HTML/Гиперссылки

Курс HTML является частью курса «Основы создания сайтов». Обучение проводится по учебному плану.

Гиперссылки

В новом уроке мы расскажем вам, о гиперссылках, способе создания гиперссылки и о самом теге <a>

Описание

Тег <a> является важнейшим элементом HTML и предназначен для создания гиперссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

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

По сайту

Блок с меню

Обычно навигация по сайту реализуется с помощью "меню". По сути это просто список ссылок, который размещён на одном и том же месте на разных страницах сайта. Меню помогает пользователю быстро оценить, какие материалы есть на сайте. Это может быть важно, если пользователь пришёл на сайт по ссылке на второстепенную страницу или из поисковой системы.

Меню может быть многоуровневым.

На всех страницах делается одинаковый набор пунктов меню (по крайней мере пункты верхнего уровня). Да, в меню оказывается ссылка на текущую страницу. Для того, чтобы пользователь понимал, на какой странице он находится в текущий момент, ссылка на текущую страницу выделяется, например подчёркиванием или жирным шрифтом.

Путь

Если сайт имеет древовидную структуру (главная страница -> раздел -> подраздел -> статья), то на страницах сайта пользователю удобно пользоваться "путём по сайту". На страницах сайта (обычно над контентом) размещаются ссылки

Тег <a>

Исходный код:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Тег a
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   </head>
   <body>
      <a href="http://ru.wikipedia.org">
         Википедия &mdash; свободная энциклопедия
      </a>
   </body>
</html>

Результат:
Википедия - свободная энциклопедия

Атрибуты

accesskey — активация ссылки с помощью комбинации клавиш.
charset — указывает кодировку текста, на который ведет ссылка (данный атрибут устарел в HTML5).
coords — Устанавливает координаты активной области.
href — Задает адрес документа, на который следует перейти.
hreflang — Идентифицирует язык текста по ссылке.
name — Устанавливает имя якоря внутри документа.
rel — Отношения между ссылаемым и текущим документами.
rev — Отношения между текущим и ссылаемым документами.
shape — Задает форму активной области ссылки для изображений.
tabindex — Определяет последовательность перехода между ссылками при нажатии на кнопку <Tab>.
target — Имя окна или фрейма, куда браузер будет загружать документ.
title —Добавляет всплывающую подсказку к тексту ссылки.

Задания

Сделайте ссылку на курс HTML Викиверситета, которая будет открываться в новом окне, с помощью атрибута target="_blank".
У Вас есть несколько html-файлов. Создайте на сайте навигацию типа "меню".
На одной из второстепенных страниц разместите текст длиной в несколько экранов и составьте его оглавление с возможность перехода от него к абзацам и обратно.

Дополнительные задания

Если у Вашего сайта много страниц и можно выделить несколько тематических разделов:

Сделайте главное меню (например, вверху страницы) и внутри каждого раздела создайте собственное подменю.
Создайте навигацию вида "путь по сайту".

Курс HTML

Предыдущий урок: HTML/Структура веб-страницы — Следующий урок: HTML/Заголовки