HTML-ссылки. Часть 2

Если пропустили прошлую статью, вот ссылка на нее:

HTML-ссылки. Часть 1

Как сделать гиперссылки на сайте

Содержание:

Часть 1

1. Структура ссылки

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

3. Якорь

Часть 2

4. Как сделать изображение-ссылку

5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты

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

4. Как сделать изображение-ссылку

Чтобы сделать кликабельное изображение, необходимо поместить элемент <img> внутрь тега <a>. Чтобы ссылка открывалась в другом окне, нужно добавить атрибут target="_blank" для ссылки.

HTML

<a href="https://www.ivi.ru/watch/109726" target="_blank"><img src="//https://teletype.in/files/3e/6c/3e6c8f81-dc51-4cbf-94e4-bcfd2547894b.jpeg" alt="Fringe"></a>

Здесь, к сожалению, на самом изображении ссылка не работает. Но при создании сайта она должна работать без проблем.

5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты

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

HTML

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

ссылка на адрес электронной почты 
<a href="mailto:[email protected]">[email protected]</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>

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

Элемент <a> поддерживает глобальные атрибуты и собственные.

ТАБЛИЦА 1. АТРИБУТЫ ТЕГА <A>

Структура таблицы следующая: Атрибут - Описание, принимаемое значение

• download - Дополняет атрибут 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>

• href - Значением атрибута является URL-адрес документа, на который указывается ссылка.
• hreflang - Определяет язык связанного веб-документа. Используется только вместе с атрибутом href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка, например:

<a href="http://www.anysite.ru" hreflang="en">Anysite</a>

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

Источник ↗