В HTML ссылки создаются с помощью элемента <a> с атрибутом href, в значении которого указывается адрес документа, который надо открыть. Адрес — это широкое понятие и зависит от того, на что именно должна вести ссылка. Вот некоторые примеры разных адресов:
- https://yandex.ru — адрес Яндекса;
- //yandex.ru — тот же адрес, но без указания протокола, браузер сам подставит нужный протокол (http или https);
- image/pic.png — адрес локальной картинки;
- documents/info.pdf — адрес PDF-документа;
- page/contact.html — адрес HTML-файла;
- # — заглушка, позволяющая сделать ссылку, щелчок по которой не открывает другую веб-страницу и никуда не ведёт.
Как видите, адреса могут быть достаточно разнообразные и указывать на документы различного типа.
Например, для создания ссылки на сайт webref.ru, пишется следующий код HTML (пример 1).
Пример 1. Создание ссылки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
</head>
<body>
<p><a href="https://webref.ru">Ссылка на сайт webref.ru</a></p>
</body>
</html>
Элемент <a> создаёт ссылку, в атрибуте href пишется адрес сайта, на который делается переход, а содержимое элемента <a> это текст ссылки, отображаемый в браузере. На рис. 1 показан вид нашей ссылки.
Рис. 1. Ссылка в браузере
По умолчанию текстовые ссылки отображаются синего цвета и с подчёркиванием. При наведении курсора мыши на ссылку меняется вид курсора и он превращается в «указывающую руку». Обратите внимание, что в браузере мы видим только текст ссылки, а не адрес сайта. Чтобы его узнать, надо навести курсор мыши на ссылку и адрес будет показан снизу во всплывающей строке.
Ссылка-заполнитель
Для элемента <a> атрибут href не является обязательным и его можно опустить. Естественно, это уже не будет ссылка в привычном нам понимании, поскольку нет адреса документа. В этом случае элемент <a> называется заполнителем. Обычно такой заполнитель применяется в списках, где одна из ссылок не нужна, но сам текст из стилевых соображений должен располагаться в каком-либо элементе.
В примере 2 показано создание вложенного меню, где один из пунктов не является ссылкой. В качестве адреса ссылки используется заглушка #. Она часто применяется в ситуациях, когда ссылку вставить надо, но адреса временно пока нет.
Пример 2. Вложенное меню
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
</head>
<body>
<ul>
<li><a>Коньки</a>
<ul>
<li><a href="#">Мужские</a></li>
<li><a href="#">Женские</a></li>
<li><a href="#">Детские</a></li>
</ul>
</li>
<li><a href="#">Аксессуары для коньков</a></li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 2. Заметьте, что заполнитель не отличается по своему виду от обычного текста. Также, если навести на заполнитель курсор мыши, то он не поменяет свой вид, как это происходит с обычными ссылками.
Рис. 2. Вид меню с заполнителем
Итоги
- Создание ссылки в HTML делается через элемент <a> с атрибутом href. Значением этого атрибута является адрес документа, файла или сайта.
- При необходимости можно использовать элемент <a> без href. В таком случае это уже будет не ссылка, а заполнитель, который по своему виду и функционалу не отличается от обычного текста.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 05.08.2023