Создание сайтов с нуля - урок 8 - Ссылки html, тег a, атрибуты href, target, title

Для создания ссылок в html документах используется парный тег a.

Причем, сам по себе тег a абсолютно бесполезен, так как нигде не указан адрес, куда переходить при клике по ссылке. Более того, в таком виде ссылка абсолютно никак браузером не выделяется.

Для задания адреса, по которому нужно перейти при клике по ссылке, используется обязательный атрибут href. Кроме того, как только мы его указали в теге a, браузер автоматически задает нашей ссылке стили, определенные у него по умолчанию для ссылок: синий цвет и подчеркивание.

Теперь немного поговорим об адресах.

Адреса бывают трех типов: абсолютные, относительные и якоря.

Абсолютные адреса

Абсолютные адреса содержат в себе протокол и имя сайта, т.е. домен

<a href=”https://yandex.ru”></a>

Как правило, абсолютные адреса используют при задании ссылок на сторонний сайт.

Относительные адреса

В относительных адресах нет ни протокола, ни имени сервера.

<a href=”templates/about.php></a>

При задании относительных адресов браузер все равно преобразует их в абсолютные, добавив перед ссылкой адрес текущей страницы на данном домене.

А поскольку браузер все равно преобразовывает относительные адреса в абсолютные, то все-таки лучше их задавать явно в абсолютных, но в сокращенном виде при помощи знака «/».

<a href=”/templates/about.php></a>

В этом случае к заданному пути впереди вместо слеша браузер подставляет протокол и сервер текущей страницы.

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

Теперь разберем якоря.

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

Для записи якоря используется символ «#».

Например, ссылка с якорем #main произведет переход к элементу с идентификатором main (т.е. атрибутом id равным main) на текущей странице. Фактически, это будет моментальным скроллингом данной страницы к элементу с id равынм main.

Но якорь можно использовать и в абсолютных адресах.

<a href=”http://mysite.ua/about#main”></a>

В таком случае, после перехода на нужную страницу произойдёт прокрутка к элементу с указанным id.

Обратите внимание, что ранее, в предыдущих версиях html, для создания якорей вместо атрибута id использовался атрибут name. Это нужно помнить при редактировании страниц, написанных на более ранних версиях html.

Теперь разберем другие полезные атрибуты ссылок.

Если необходимо создать ссылку для перехода на сторонний ресурс, но при этом вы хотите, чтоб пользователь остался и на вашем сайте тоже, то в этом Вам поможет атрибут target со значением _blank. При его задании новая страница откроется не прямо в данном окне, а в новой вкладке. Это актуально при задании абсолютных ссылок на чужие сайты. Если же вы переводите посетителя вашего сайта на другую страницу в пределах вашего же ресурса, то этого делать не нужно, т.к. это сильно раздражает посетителей.

Всплывающие подсказки

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

Ссылка на изображение

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

<a href=”http://mysite.ua”>

     <img src=”images/logo.png”>

</a>

Ссылка на файл

Еще одним вариантом использования ссылок является задание пути к какому-либо файлу. В таком случае, если щёлкнуть по ссылке, ведущей на файл, то браузер либо предложит его скачать, либо откроет файл прямо в браузере, если умеет обрабатывать файлы подобного типа. Например, файлы pdf или doc.