HTML - Ссылки

12 Август 2019
HTML - Ссылки

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

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

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

Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:


Пример:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<a href="https://webzone.kz">Ссылка на сайт Webzone.</a>
	</body>
</html>


Результат:
Ссылка на сайт Webzone.



Абсолютный и относительный путь

Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:

  • протокол, например, http (опционально);
  • домен (доменное имя или IP-адрес компьютера);
  • папка (имя папки, указывающей путь к файлу);
  • файл (имя файла).

Обычно в качестве индексного файла выступает документ с именем index.html. Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.

Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http://, он выполняет поиск указанного документа на том же сервере.
Относительный путь содержит следующие компоненты:
  • папка (имя папки, указывающей путь к файлу);
  • файл (имя файла).


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



Якоря

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

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

Следующая разметка создаст оглавление с быстрыми переходами на соответствующие разделы:


Пример:


<a href="#block1">Link 1</a>
<a href="#block2">Link 2</a>
<p id="block1">Block 1</p>
<p id="block2">Block 2</p>


<!-- Link to other Domain -->
<a target="_blank"
href="https://webzone.kz/publication/html-links#comment_nickname" >
Открывается в новом вкладке и ссылается на "Написать комментарии"
</a>


Результат:
Link 1
Link 2

Block 1

Block 2



Открывается в новом вкладке и ссылается на "Написать комментарии"



Ссылка на телефонный номер, скайп или адрес электронной почты

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


Пример:


<!-- ссылка на телефонный номер -->
<a href="tel:+74951234567">+7 (495) 123-45-67</a>

<!-- ссылка на адрес электронной почты -->
<a href="mailto:example@mail.ru">example@mail.ru</a>

<!-- ссылка на скайп (позвонить) -->
<a href="skype:имя-пользователя?call">Skype</a>

<!-- ссылка на скайп (открыть чат) -->
<a href="skype:имя-пользователя?chat">Skype</a>

<!-- ссылка на скайп (добавить в список контактов) -->
<a href="skype:имя-пользователя?add">Skype</a>

<!-- ссылка на скайп (отправить файл) -->
<a href="skype:имя-пользователя?sendfile">Skype</a>




Атрибуты ссылок

Атрибут Описание
href Значением атрибута является URL-адрес документа, на который указывается ссылка.
media Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
ping Отслеживает URL-адреса ресурсов, по которым переходил пользователь.
href Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения:

<a href="/images/logo.png" download><img src="/images/logo.png" alt="logo"></a>
<a href="/images/logo.png" download="logo"><img src="/images/logo.png" alt="logo"></a>
<a href="files/20022014.pdf" download="Отчет Февраль 2014.pdf">Загрузить отчет за Февраль 2014</a>


rel Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения: alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
target Указывает на то, в каком окне должен открываться документ, к которому ведет ссылка. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.

Вопросы / Комментарии / Отзывы