HTML ссылки
Ссылки разбросанные по всему интернету. Можно выделить два типа ссылок: внешние и внутренние. Внешние ссылки связывают страницы в один сайт, и помогают передвигаться по нему. Внутренние ссылки помогают передвигаться в рамках одной страницы. Рассмотрим каждый вид по отдельности.
Внешние ссылки – называются ссылки на объекты, расположены вне текущей страницы. Это могут быть картинки, документы, страницы сайта, видео, музыка. Основой внешней ссылки является URL-адрес объекта, на который ссылается.
Для создания гиперссылки в HTML служит элемент A, <area> и <link>, который требует закрывающего тега. Внутри элемента располагается текст, который будет выделен по умолчанию как ссылка. Язык HTML имеет возможность замаскировать адрес под текст ссылки, что бы сообщить человеку в каком месте сайта расположена ссылка. Текст ссылки должен внятно описывать что пользователь увидит перейдя по ссылке при щелчке кнопкой мыши. Между тегами <a>ваш текст</a> располагается текст ссылки.
Адрес документа для перехода записывается в элемент A, в качестве значения атрибута href. Пример создания ссылки:
<a href=”thehostbest.html”>О нас</a><br /> <!– Ссылка на страницу –>
<a href=”logo.png”>Логотип компании</a> <br /><!– Ссылка на картинку –>
<a href=”#list”>Список услуг</a> <!– внутренняя ссылка –>
<br /> <!– Переносит текст на следующую строку, создавая разрыв строки. –>
Текст ссылки отображается подчеркнутым, а указатель мыши меняет вид при наведении на ссылку.
Внутренние ссылки – организуют переходы внутри одного HTML-документа. Чтобы создать такую ссылку, сначала нужно определить место, к которому ссылка приводит. Делается с помощью атрибута name элемента A. Необходимый текст заключается в элемент A. Помешать текст совершенно не обязательно, можно установить тег элемента в месте, к которому браузер автоматически переходит при щелчке кнопкой мыши на ссылке.
В качестве значения атрибута name можно присвоить любое имя, так вам проще пользоваться метками. Ссылка на внутреннюю метку создается вместо URL-адреса желаемой страницы нужно ввести адрес метки в виде #metka1. metka1 – это имя вашей метки. Пример использование метки:
<a name=”metka1”>Метка для перехода</a><br />
<a href=”#metka1”>клик для перехода к метке 1</a> <!– внутренняя ссылка, метка. –>
Внутренние ссылки по синтаксису как и внешние, атрибут элемента A применим для обоих типов.
| Атрибут | Описание, принимаемое значение |
|---|---|
| download | Дополняет атрибут href и сообщает браузеру, что ресурс загружен в момент когда пользователь щелкает по ссылке. Задавая имя для атрибута, мы задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения: <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/price.pdf" download="Отчет прайса.pdf">Загрузить отчет прайса</a> |
| href | Значением является URL-адрес документа, на который указывается ссылка. |
| hreflang | Определяет язык веб-документа. Используется вместе с атрибутом href. Принимаемые значения — аббревиатура состоящая из пары букв, например: <a href="http://www.thehostbest.ru" hreflang="en">Anysite</a> |
| media | Определяет для какого типа устройств файл будет оптимизирован. Значением может быть медиа-запрос. |
| ping | Отслеживает URL-адреса ресурсов. |
| rel | Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения: alternate — ссылка на альтернативную версию документа. author — ссылка на автора документа. bookmark — постоянный URL-адрес. help — ссылка на справку. license — ссылка на информацию об авторских правах на веб-документ. next/prev — указывает связь между отдельными URL. nofollow — запрещает поисковой системе переходить по ссылкам на данной странице. noreferrer — при переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация с какой страницы пришел посетитель сайта. prefetch — целевой документ должен быть кэширован, браузер в фоновом режиме загружает содержимое страницы в кэш. search — целевой документ содержит инструмент для поиска. tag — указывает ключевое слово для документа. |
| target | в каком окне открывается документ, к которому ведет ссылка. Принимает следующие значения: _self — страница загружается в текущее окно; _blank — страница открывается в новом окне браузера; _parent — страница загружается во фрейм-родитель; _top — страница загружается в полное окно браузера. |
| type | MIME-тип файлов ссылки носит справочную информацию. |