Что такое якорь в HTML? Спецсимволы. Редакторы

Добро пожаловать в последний урок из видеокурса по HTML. В нем мы разберем все то, что пропустили по ходу прохождения курса: узнаем, что такое якоря, разберемся с тегом <pre>, ознакомимся со спецсимволами и, напоследок, рассмотрим самые известные редакторы для верстки сайтов, а также я дам советы по дальнейшему изучению (то, есть советы о том, что следует изучать после курса по HTML чтобы двигаться в правильном направлении). Давайте приступим. Что такое якоря? Это ссылки на внутренности нашего документа. Перейдем на рабочий стол, зайдем в папку Site, откроем файл index.html через notepad. Помните, мы делали навигационную карту? Давайте теперь создадим ссылкив этой навигационной карте якорем. Ссылки могут указываться  как на якоря других документов, так и на якоря документов других сайтов. Якоря прописываются так: #ссылка.

 <area shape="rect" coords="70,43,270,121" href="#s1" alt="Якорь 1">
 <area shape="rect" coords="476,37,556,243" href="#s2" alt="Якорь 2">
 <area shape="circle" coords="147,199,61" href="#s3" target="_blank">
 <area shape="poly" coords="270,160,351,174,434,160,417,203, 433,248,351,236,270,250,287,204" href="#s4" target="_blank" title "О нас">
 

Все якоря ведут на внутренности нашего документа. Например, если бы нужно было сделать ссылку на внутренность документа about.html, мы бы прописали так:

 <area shape="circle" coords="147,199,61" href="about.html#s3">
 

Но нам это не нужно. Давайте теперь укажем наш якорь, то есть то, на что он будет ссылаться. Это делается с помощью атрибута id.

 <p align="left"><i id="s1">Данная страничка посвящена одной <a href="history/history.html" title="Мои истории из жизни">истории</a>. Истории о том, зачем я создал сайт <b>info-line.net</b></i></p>

Укажем второй якорь.

 <br>Ближе к <b id="s2">PHP</b>... И <a href="about.html" target="_blank" title="О нас"><font color="#000000">изучать</font></a>
 

Теперь создадим тег <pre>. Текст, зафиксированный в тегах <pre></pre> отображается моноширным шрифтом, а также отображаются все пробелы, которые стоят в этих тегах. То есть, если мы поставим три пробела, то они все отобразятся. Тегу прописываем также атрибут id.

 <br><pre id="s3">Я работал   на фрилансе</pre>
 

Четвертым якорем у нас будет, например, тег <p>. Пропишем ему атрибут id.

 <p id="s4">Я решил создать сайт про то, чему сам долго и упорно трудился, тому, как
 создать свой сайт в этом большом и наверняка всем известном пространстве.
 

Вместо атрибута id можно использовать атрибут name, но я предпочитаю использовать id.

Давайте сохраним и проверим, что у нас получилось. Открываем файл index.html и попробуем понажимать на карту нашего сайта. Сначала на прямоугольник. Как мы видим, ссылка пошла на якорь #s1. Он был установлен на строку «Данная страничка посвящена одной истории. Истории о том, зачем я создал сайт info-line.net». Теперь нажмем на кружок. Якорь здесь — «Я работал   на фрилансе». Как мы видим, пробелы отобразились. Нажмем на наш второй прямоугольник. Это второй якорь. И, наконец, четвертый якорь — якорь «О нас». Нажав на него, мы перешли на абзац «Я решил создать сайт про то...».

Нам желательно убрать атрибут target="_blank" чтобы якоря не открывались в новых окнах. Это мы сейчас и сделаем.

 <area shape="rect" coords="70,43,270,121" href="#s1" alt="Якорь 1">
 <area shape="rect" coords="476,37,556,243" href="#s2" alt="Якорь 2">
 <area shape="circle" coords="147,199,61" href="#s3" >
 <area shape="poly" coords="270,160,351,174,434,160,417,203, 433,248,351,236,270,250,287,204" href="#s4">
 

Сохраним. Закроем все ненужные окна.

Теперь давайте я поведаю вам  о спецсимволах. Возникала ли у вас когда-нибудь потребность поставить или знак копирайта, или значок торговой марки, или неразрывный пробел? Если нет, то возможно в будущем вам это понадобится, поэтому я сейчас об этом расскажу.

Перейдем в код. Давайте поставим перед словом «спасибо» значок копирайта. Спецсимволов очень много. Чтобы их узнать, вы можете перейти на таблицу специальных символов на нашем сайте info-line.net рубрика — «HTML», подрубрика — «дополнительно», таблица специальных символов HTML. Давайте посмотрим знак копирайта. Как мы видим, код этого знака — «&#169». Копируем его, переходим в код и вставляем.

 <u>&#169; Спасибо за внимание! C Уважением, <a href="mailto:test@test.com">Олег Зубцов</a>.</u>
 

Сохраним, проверим, что у нас получилось. Мы видим значок копирайта.

На этом мы заканчиваем наш курс по HTML. Поздравляю вас с его прослушиванием! Вы уже  научились создавать простые статичные сайты. Я вам желаю успехов в последующем изучении!

Теперь я дам несколько советов по визуальным текстовым редакторам. Самый известный из них — notepad, в котором мы и работали. Есть еще и визуальные редакторы, но для удобства работы с ними нужно иметь представление хотя бы о языке разметки HTML. Самые известные визуальные редакторы — Microsoft Front Page и Adobe DreamWeaver. Из них я бы вам посоветовал второй, но стоит он порядка 200-300$.

Обязательно посмотрите бонусные видеоуроки к курсу по HTML. В них тонны полезной информации!

1. Таблица специальных символов HTML
2. Что такое валидность и XHTML. В чем отличия XHTML и HTML?
3. Обзор HTML 5. Что нового?

А после их просмотра, можете переходить на наш сайт info-line.net и приступать к изучению каскадных таблиц стилей CSS, потому что они играют важную роль и облегчают работу сайтостроителя. Уроки появляются на сайте два раза в неделю. Они совершенно бесплатны, и вы можете подписаться на них прямо сейчас. Чуть позже мы будем выкладывать уроки по PHP, JAVAScript, Photoshop для сайтостроителей и др. Спасибо за внимание, с вами был Олег Зубцов. До встречи в следующем курсе по CSS!