Ссылки и изображения / Ссылка с якорем [7/13]
×

Ссылка с якорем [7/13]

Ссылки с якорем обычно используются для создания навигации внутри страницы. Например, оглавления в начале страницы с большой статьёй.

Ссылка с якорем содержит символ #, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id, который может быть задан у любого тега.

Можно задать адрес, состоящий из одного якоря, например:

<a href="#glava1">Глава 1</a>

При щелчке на такую ссылку браузер найдёт на странице элемент с атрибутом id со значением glava1 и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт.

Якорь можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу произойдёт прокрутка к заданной части этой страницы.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ссылка с якорем</title> </head> <body> <h1>URL</h1> <h2 id="contents">Оглавление</h2> <ol> <li><a href="">История</a></li> <li><a href="">Структура URL</a></li> <li><a href="">Кодирование URL</a></li> </ol> <h2 id="history">История</h2> <p>URL был изобретён Тимом Бернерсом-Ли в 1990 году в стенах Европейского совета по ядерным исследованиям в Женеве, Швейцария. URL стал фундаментальной инновацией в Интернете.</p> <p>Изначально URL предназначался для обозначения мест расположения ресурсов (чаще всего файлов) во Всемирной паутине. Сейчас URL применяется для обозначения адресов почти всех ресурсов Интернета. Стандарт URL закреплён в документе RFC 1738, прежняя версия была определена в RFC 1630.</p> <p>Сейчас URL позиционируется как часть более общей системы идентификации ресурсов URI, сам термин URL постепенно уступает место более широкому термину URI. Стандарт URL регулируется организацией IETF и её подразделениями.</p> <a href="#contents">К оглавлению</a> <h2 id="structure">Структура URL</h2> <p>Изначально локатор URL был разработан как система для максимально естественного указания на местонахождения ресурсов в сети. Локатор должен был быть легко расширяемым и использовать лишь ограниченный набор ASCII‐символов (к примеру, пробел никогда не применяется в URL). В связи с этим, возникла следующая традиционная форма записи URL:</p> <p>&lt;схема&gt;://&lt;логин&gt;:&lt;пароль&gt;@&lt;хост&gt;:&lt;порт&gt;/&lt;URL-путь&gt;?&lt;параметры&gt;#&lt;якорь&gt;</p> <a href="#contents">К оглавлению</a> <h2 id="encoding">Кодирование URL</h2> <p>Появление адресов URL стало существенным нововведением в Интернете. Однако с момента его изобретения и по сей день стандарт URL обладает серьёзным недостатком — в нём можно использовать только ограниченный набор символов, даже меньший, нежели в ASCII: латинские буквы, цифры и лишь некоторые знаки препинания. Если мы захотим использовать в URL символы кириллицы, или иероглифы, или, скажем, специфические символы французского языка, то нужные нам символы должны быть перекодированы особым образом.</p> <a href="#contents">К оглавлению</a> </body> </html>
CSS
body { max-width: 350px; font-size: 16px; line-height: 24px; }
HTML Academy
  1. Ссылке «История» задайте адрес #history
  2. и щёлкните по ней.
  3. Затем ссылке «Структура URL» задайте адрес #structure
  4. и тоже щёлкните по ней.
  1. Самостоятельно задайте подходящий адрес для ссылки «Кодирование URL».
Если при щелчке по ссылке с якорем перезагружается страница, нажимайте кнопку .
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.