Ссылки HTML

HTML-ссылки создаются с помощью тегов a, area и link. Ссылки представляют собой связь между двумя ресурсами, одним из которых является текущий документ.

Ссылки можно поделить на две категории:

1)    ссылки на внешние ресурсы — создаются с помощью тега  link и используются для расширения возможностей текущего документа при обработке браузером;

2)    гиперссылки — ссылки на другие ресурсы, которые пользователь может посетить или загрузить.

Рассмотрим подробно гиперссылки, остальные теги будут рассмотрены в разделе «Изображения HTML и карта изображения». Гиперссылки создаются с помощью парного тега a. Внутрь тега помещается текст, который будет отображаться в HTML-документе. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.

Обязательным параметром тега a является атрибут href, который задает URL-адрес веб-страницы:

<a href="http://site.ru">указатель ссылки</a>

Ссылка состоит из двух частей — указателя и адресной части.

Указатель ссылки представляет собой фрагмент текста или изображение, видимые для пользователя.

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

метод доступа://имя сервера /путь

Метод доступа, или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:

·        file обеспечивает чтение файла с локального диска:

file:/gallery/pictures/summer.html

·        http предоставляет доступ к веб-странице по протоколу HTTP:

http://site.ru/

·        https — специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS):

https://site.ru/

·        ftp осуществляет запрос к FTP-серверу на получение файла:

ftp://pgu/directory/library

·        mailto запускает сеанс почтовой связи с указанным адресатом и хостом:

mailto: nika@gmail.com

Имя сервера описывает полное имя машины в сети, например, site.ru. Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.

HTML поддерживает два вида пути: абсолютный и относительный.

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

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

http://site.ru/pages/tips/tips1.html

//site.ru/pages/tips/tips1.html

Если файл находится в корневой папке, то путь к файлу будет следующим:

http://site.ru/tip.html

При отсутствии имени файла будет загружаться веб-страница, которая задана по умолчанию в настройках веб-сервера (так называемый индексный файл).

http://site.ru/

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

Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения HTML-документа, который содержит ссылку. Относительный путь содержит следующие компоненты:

1)    имена папок, указывающие путь к файлу;

2)    имя файла.

Путь для относительных ссылок имеет три специальных обозначения:

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

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

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

Якорь создается с помощью атрибута id тега, который находится в том месте HTML-документа, куда нужно перейти.

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

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

<img src=”color.png” id="about-color">

А затем добавить его к адресу ссылки:

<a href="/color.html#about-color" target="_blank"> Цвет в Интернете</a>

Атрибут target указывает на то, в каком окне должен открываться документ, к которому ведет ссылка. Принимает следующие значения:

·      _self — страница загружается в текущее окно;

·      _blank — страница открывается в новом окне браузера;

·      _parent — страница загружается во фрейм-родитель;

·      _top — страница загружается в полное окно браузера.

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