Гиперссылка
Гиперссылка обеспечивает связь документов HTML или их отдельных частей.
- <a></a>
- элемент используемый для обозначения метки ссылки
- href="путь и имя файла HTML"
- указывает путь к документу HTML, к которому следует перейти. Если документ HTML к которому требуется перейти находится в том же каталоге, что и документ содержащий на него ссылку, то указывается только имя целевого документа.
Содержимое элемента <a> является меткой ссылки и обычно представляет из себя текст либо изображение. При наведении курсора на содержимое элемента <a> курсор приобретет форму кисти руки с указательным пальцем.
| html код |
|---|
<a
href="giperssilka_html.html">пример ссылки</a>
|
| результат |
| пример ссылки (Эта ссылка на текущий документ) |
| Не посещенная ссылка будет синего цвета и подчеркнутой. | пример ссылки |
| В момент нажатия ссылка изменит цвет на красной. | пример ссылки |
| Посещенная ссылка изменит цвет на фиолетовый. | пример ссылки |
Ссылка-изображение представляет собой элемент <a> содержимым которого является элемент <img>. Путь к изображению задается в атрибуте src аналогично пути в атрибуте href.
| html код |
|---|
<a href="giperssilka_html.html">
<img src="1.jpg">
</a> |
| результат |
|
В элемент <a> можно поместить любой другой элемент, включая блочные.
- title="дополнительное описание ссылки"
- при наведении курсора мыши на метку ссылки покажет свое значение в дополнительной всплывающей строке.
| html код |
|---|
<a
href="gipertekst_html.html"
title="эта ссылка содержит атрибут title, значение которого данный текст">
пример ссылки с атрибутом title</a>
|
| результат |
| пример ссылки с атрибутом title |
Браузеры для слабовидящих людей воспроизводят вслух значение атрибута title.
Вышеприведенные примеры целесообразны для перехода между документами HTML, которые находятся в одном каталоге. У каждого сайта есть хотя бы один каталог и этот каталог называется корневым. Для перехода между каталогами и сайтами используют относительный и абсолютный путь.
Относительный и абсолютный путь
- Корневой каталог
- это основной каталог сайта наивысшего уровня, который содержит остальные файлы и каталоги сайта.
В корневом каталоге обычно размещается документ с именем index для серверов Linux, либо с именем default для серверов Windows, который может содержать ссылки на другие документы HTML. Документ index может быть с различными расширениями, например: index.html, index.php . Последний свидетельствует о наличии в документе php-сценариев.
Документ с именем index будет выводиться при обращении к корневому каталогу. Если документ с этим именем отсутствует, то будет выведен список имеющихся в нем файлов и каталогов. Так же документ index размещают и в подкаталогах, чтобы перенаправить запрос пользователя и не показывать ему список файлов.
Структура сайтов состоит как правило из множества каталогов, для группировки документов HTML и прочих файлов, согласно их теме, либо типу. Например в отдельных каталогах удобно размещать изображения, чтобы они не перемешивались с документами HTML.
Корневой каталог является родительским по отношению к содержащимся в нем каталогам. Каталог который содержится внутри другого каталога, считается дочерним по отношению к каталогу в котором он содержится.
Чтобы перейти от одного документа к документу расположенному в другом каталоге, в значении атрибута href следует указать относительный путь и имя документа HTML к которому следует перейти.
- Относительный путь
- используется для создания ссылок между внутренними страницами сайта.
| относительный путь | |
|---|---|
| Для того чтобы перейти из документа HTML расположенного в родительском каталоге, к документу HTML расположенному в дочернем катлоге (на уровень вниз) в значении атрибута href задается название папки, слэш, имя документа HTML | href="namedata/namedoc.html" |
| Для того чтобы перейти из документа HTML расположенного в дочернем каталоге к документу HTML расположенному в родительском каталоге (на уровень вверх) в значинии атрибута href задаются две точки, слэш, имя документа HTML | href="../namedoc.html" |
Если требуется перейти к документу расположенному в каталоге на более чем один уровень вверх или вниз, то каждый отрезок пути отделяется символом / после которого прописывается имя папки или двоеточие, в зависимости от направления.
Допустим есть корневой каталог 0 он содержит каталоги 1 и 2. Каталог 1 содержит каталоги 11 и 12, каталог 2 содержит каталоги 21 и 22. Каждый каталог содержит по одному документу HTML, начало названий которых соответствует номеру каталога в котором они находятся.
| / (корневая папка) index.html | |||
| 1 1_doc.html |
2 2_doc.html | ||
| 11 11_doc.html |
12 12_doc.html |
21 21_doc.html |
22 22_doc.html |
- Чтобы создать ссылку от index.html к 1_doc.html следует задать путь 1/1_doc.html
- Чтобы создать ссылку от index.html к 21_doc.html следует задать путь 2/21/21_doc.html
- Чтобы создать ссылку от 21_doc.html к 2_doc.html следует задать путь ../2_doc.html
- Чтобы создать ссылку от 22_doc.html к index.html следует задать путь ../../index.html
- Чтобы создать ссылку от 22_doc.html к 11_doc.html следует задать путь ../../1/11/11_doc.html
- Чтобы создать ссылку от 11_doc.html к 12_doc.html следует задать путь ../12/12_doc.html
- Путь относительно корня сайта
- используется для создания внутренних ссылок. Содается методом указания пути к файлу из корневого каталога сайта.
Является альтернативным вариантом создания внутренних ссылок. Если относительный путь начинается из каталога, в котором находится web-страница, содержащий ссылку на файл в другом каталоге, то путь относительно корня сайта начинается из корневого каталога (всегда обозначается символом / ), независимо от того, в каком каталоге находится web-страница, содержащая ссылку на файл в другом каталоге.
Если взять вышеприведенный пример по формированию относительных ссылок и переделать его под пути относительно корня сайта, то они будут выглядеть следующим образом:
- Чтобы создать ссылку от index.html к 1_doc.html следует задать путь /1/1_doc.html
- Чтобы создать ссылку от index.html к 21_doc.html следует задать путь /2/21/21_doc.html
- Чтобы создать ссылку от 21_doc.html к 2_doc.html следует задать путь /2/2_doc.html
- Чтобы создать ссылку от 22_doc.html к index.html следует задать путь /index.html
- Чтобы создать ссылку от 22_doc.html к 11_doc.html следует задать путь /1/11/11_doc.html
- Чтобы создать ссылку от 11_doc.html к 12_doc.html следует задать путь /1/12/12_doc.html
Начиная путь с символа / мы сообщаем, что сначала следует перейти в корневой каталог, а затем указываем путь из этого каталога к требующемуся файлу.
Преимущество пути относительно корня сайта проявляется в случаях когда:
- содержимое сайта предполагается перемещать из каталога в каталог;
- ссылки создаются на динамические материалы;
- их можно копировать из одного документа в другой, не меняя путь.
Такие ссылки не работают на локальном компьютере, без установленного на нем серверного ПО, т. к. они обращаются к корню логического диска.
- Абсолютный путь
- используется для создания внешних ссылок. Создается методом указания полного URL-адреса в значении атрибута href, элемента <a>.
| html код |
|---|
<a
href="http://google.com">пример внешней ссылки</a>
|
| результат |
| пример внешней ссылки |
Если браузер запрашивает у веб-сервера каталог, а не страницу, например: http://name.com/namevonkatalog , то браузер выдаст страницу с перечислением имеющихся в данном каталоге файлов и каталогов. Если в запрашиваемом каталоге имеется документ HTML с именем index.html или default.htm то будут показано их содержимое.
Когда происходит запрос типа: http://name.com фактически происходит обращение к корневой папке и содержимому index.html или default.htm.
Ссылка на отдельные части документа HTML
создается путем обозначения метки с идентификатором к которой требуется осуществить переход с и метки с ссылкой на идентификатор при активации которой будет осуществлен переход.
- id="имя идентификатора"
- идентификатор значение которого может быть равно любому допустимому имени: должно начинаться любой буквы латинского алфавита, может содержать любые символы, не должно содержать пробелов. В данном случае является идентификатором для связи ссылки и метки на которую эта ссылка отправляет.
Создаем метку c идентификатором, к которой требуется перейти:<h1><a id="MyOnlyChild">Гиперссылка</a></h1>Создаем ссылку на метку с атрибутом id, значение которого MyOnlyChild, путем указания этого имени в атрибуте href, начало имени должно начинаться с символа решетки #: <a href="#MyOnlyChild">эта ссылка приведет вас в начало текущего документа</a> |
| результат |
|---|
| эта ссылка приведет вас в начало текущего документа |
Пути ссылок на метки с идентификатор задаются аналогично путям внутренних и внешних ссылок + указание имени идентификатора.
Например:
href="data_1/data_2/html_doc_1.html#namevonberuf"
- target="значение"
- атрибута позволяет задать окно, в котором следует открыть документ текущей ссылки. Значение атрибута равное _blank позволяет создавать новое окно при каждом нажатии ссылки. Ели значение target будет равно произвольному имени, то документ откроется в новом окне с этим именем и последующие нажатие по ссылке откроет документ в уже открытом окне с именем равным значению target.
|
Создаем ссылку которая откроет документ в новом окне браузера: |
|
Создаем ссылку на текущий документ с произвольным именем newTab: |
|
Создаем еще одну ссылку на другой документ с значением атрибута target так же равным newTab: |
из вышепреведенного примера следует, что значение target равное _blank сообщает браузеру, что нужно при каждом нажатии ссылки создавать новое окно. Тогда как значение target в виде незарезервированного имени указывает браузеру, что нужно создать окно с именем равным этому значению и открывать в нем все ссылки, у которых значение атрибута target имеет это же имя.
Атрибут target можно использовать для открытия увеличенного изображения в новом окне.
Ссылка на номер телефона
Позволяет начать звонок при нажатии по ссылке в браузере смартфона. Создается путем указания в атрибуте href ключевого слова tel: и номера телефона.
<a href="tel:+79000000000">нажмите, чтобы позвонить</a>
нажмите, чтобы позвонить
В браузере ПК ссылка будет проигнорирована, но эти ссылки можно убирать в зависимости от устройства при помощи CSS.