Ссылка с якорем

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

Вот пример:

Статья «Сейчас мы научимся делать ссылки с якорем»

Оглавление

  1. Дано
  2. Способ выполнения

Дано

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

К оглавлению

Способ выполнения

Сначала создаем «Оглавление», в данном случае оно состоит из двух пунктов «Дано» и «Способ исполнения».

Обрамляем слово «Оглавление» в теги заголовка Н4 и во внутрь добавляем атрибут id=»contents». Именно на значение внутри атрибута id мы и будем ссылаться.

Далее тегами немаркированного списка (с циферками) формируем список, состоящий из двух элементов «Дано» и «Способ выполнения». И каждому элементу прицепим ссылку с якорем, которая и поможет отыскивать именно это содержание в длинном тексте статьи. Элементу списка «Дано» присвоим значение id=»dano», а элементу списка «Способ выполнения» id=»ispo». Таким образом у нас есть три участка в статье, на которые мы и будем ссылаться: «Оглавление» (id=»contents»), Дано ( id=»dano») и «Способ выполнения»(id=»ispo»)

Выглядит это так (рисунок с кодом можно открыть в отдельной вкладке и увеличить при надобности) для «Дано»:

В конце можно увидеть ссылку на переход к началу страницы, на оглавление.
Аналогично содержание для «Способ выполнения», только его значение это «ispo».

В самом оглавлении проставим ссылки на соответствующее содержание. Ссылка для «Дано» задается так:

Аналогично проставляется ссылка для «Способа исполнения».
А теперь все вместе, но без «Способа исполнения», так как содержание этого раздело большое. Тем не менее и без него понятен принцип по которому делаются ссылки с якорем:

К оглавлению


Leave a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Загрузка...
Menu Title