Создание якоря

Работа с якорными тэгами документа содержит два важных этапа. Во-первых, определите, на какие разделы HTML-документа вы хотите сослаться. Во-вторых, введите тэги <a href="..">, указывающие на эти разделы.

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

<a href=" #raz1 ">Переход к разделу 1</a><br> <a href=" #raz2 ">Переход к разделу 2</a><br> <a href=" #raz3 ">Переход к разделу 3</a><br> <a href=" #raz4 ">Переход к разделу 4</a><br> <br> <a name=" raz1 ">Раздел 1</a><br> Ваш текст<br>...<br>...<br>...<br> Ваш текст<br> <a name=" raz2 ">Раздел 2</a><br> Ваш текст<br>...<br>...<br>...<br> Ваш текст<br> <a name=" raz3 ">Раздел 3</a><br> Ваш текст<br>...<br>...<br>...<br> Ваш текст<br> <a name=" raz4 ">Раздел 4</a><br> Ваш текст<br>...<br>...<br>...<br> Ваш текст<br>

"<a href=" # raz1 ">Переход к разделу 1</a>" - этой строчкой мы обозначили якорным тэгом имя Переход к разделу 1. Чтобы перейти на этот тэг, посетитель должен кликнуть на флажке с именем raz1.

Переход к разделу 1Переход к разделу 2Переход к разделу 3Переход к разделу 4 Раздел 1 Ваш текст......... Ваш текст Раздел 2 Ваш текст......... Ваш текст Раздел 3 Ваш текст......... Ваш текст Раздел 4 Ваш текст......... Ваш текст

Ссылка на якорь

После того как вы установили все необходимые якоря, настала пора составить оглавление, содержащее ссылки на каждый из якорей.

Ссылка на якорь очень напоминает стандартную ссылку. Для этого используется тэг <a href="...">. Отличие в том, что вам надо сообщить браузеру, что это ссылка на якорь внутри документа. Это делается с помощью значка #. Для задания ссылки на раздел нашей "золотой" страничке, использовался тэг:

<a href=" # raz4 ">Переход к разделу 4</a><br>

Символ # указывает браузеру, что следует искать флажок, а не страничку. Для посетителей текст такой ссылки будет выглядеть так же, как и текст любой другой ссылки. Однако при клике на таком тексте он перейдет не на отдельный HTML-файл, а на якорь, расположенный в той же странице что и ссылка на него.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: