HTML-ссылка – это инструмент, позволяющий пользователям осуществлять переход между веб-страницами сайта и открывать нужные документы. Ее также называют гиперссылкой.
Ссылки создаются при помощи тега a. Внутри него содержатся обязательный атрибут «href», задающий URL-адрес, и указатель ссылки.
Указатель ссылки
Пользователи видят только указатель ссылки. Это может быть текст или изображение. По умолчанию текст гиперссылки подчеркивается и имеет синий цвет (эти параметры можно изменять).
Чтобы ссылка была оформлена в виде текста, достаточно внутри тега a вписать нужный текст.
Если же вы хотите оформить ссылку изображением, необходимо внутри тега a поместить элемент img, который будет указывать путь к изображению.
Адресная часть
Вторая часть – это адресная часть (или URL страницы). Ее пользователи не видят. Это адрес ссылки, указывающий браузеру путь к документу или веб-странице.
Адрес ссылки бывает двух видов:
- абсолютный – полный адрес веб-страницы или документа (http://mysite.com/index.html), используемый для ссылки на сторонний ресурс или файл;
- относительный – укороченный адрес внутреннего файла (file.html), используемый для ссылки на файлы, находящиеся на том же хостинге, компьютере и т. д.
Если указать адрес несуществующего файла или допустить ошибку, браузер выдаст сообщение о том, что он не может открыть данный файл. Такие ссылки называются битыми и от них нужно избавляться.
Помимо самого адреса можно задать атрибут «target», который будет отвечать за то, как открыть новую веб-страницу. Target бывает трех видов:
- _blank – открывает страницу в новой вкладке (пример – переход на сайты из поисковой выдачи «Яндекса»);
- _self – открывает страницу в этом же окне (пример – переход на сайты из поисковой выдачи Google);
- _new – открывает страницу в новом окне.
Первый вариант используется чаще всего, так как он не закрывает текущую страницу и при этом не открывает новых окон.
Атрибут «title» позволяет добавить описание, которое будет появляться при наведении курсора на гиперссылку.
Якоря
Если сослаться необходимо не на новую страницу, а на определенный раздел текущей, используются якоря. Например, страница содержит очень большую статью. Создание оглавления со ссылками (якорями) позволит быстро перемещаться по всем разделам этой статьи.
Создаются такие ссылки точно так же, используя тег A, только в данном случае в атрибуте «href» вместо URL-адреса будет содержаться имя указателя (якорь), начинающееся со знака #. Пример:
#p1, #p2, #p3 и т. д. – это id элементов, которые необходимо задать в соответствующих местах страницы.
В дальнейшем при нажатии на ссылку, содержащую атрибут «href="#p1"», пользователь попадет на тот элемент, которому был задан этот id.