HTML :: Гиперссылки

Определение гиперссылки в HTML

Для создания гиперссылок в HTML используется элемент «a», который формируется парным тегом <a> (от англ. anchor – якорь). Все, что находится внутри элемента «a» является гиперссылкой.

Гиперссылка (от англ. hyperlink – гиперссылка) – это часть гипертекстового документа, которая ссылается на другие элементы в самом документе (текст, изображение и т.д.) или другие объекты вне данного документа (другой документ, видеофайл и т.д.).

Атрибут href гиперссылки

Чтобы указать адрес объекта, на который будет совершен переход по ссылке, используется атрибут href. В качестве значения он принимает абсолютный или относительный адрес документа. Примерами абсолютных адресов могут служить https://www.google.com или https://yandex.ru. Абсолютные адреса действительны в любом месте, независимо от сайта, на котором расположена ссылка. А вот относительные адреса формируются относительно текущей папки документа, в котором прописана данная ссылка, или корня сайта. Примеры относительных адресов мы рассмотрим в конце пункта.

Напомним, что в случае использования сборки Xampp для размещения создаваемых в ходе изучения веб-страниц на локальном сервере, их нужно помещать в папку /xampp/htdocs. А еще лучше создать в htdocs отдельную рабочую папку, например, test, и уже в ней сохранять тестируемые страницы. Тогда абсолютный адрес, например, для страницы page_1.html будет иметь вид http://localhost/test/page_1.html. Указывать нужно именно http://localhost/..., а не фактическое расположение файла на компьютере, иначе могут возникнуть проблемы с отображением страницы.

Атрибут target гиперссылки

По умолчанию, при переходе по ссылке браузер открывает документ в текущем окне или фрейме. Чтобы изменить такое поведение браузера, используется атрибут target, который в качестве значения принимает одно из зарезервированных значений "_self | _blank | _parent | _top" или имя целевого окна или фрейма, которое устанавливается их атрибутом name. Если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне. Значение "_self" установлено по умолчанию. Если использовать значение "_blank", то браузер откроет документ в новом окне или фрейме; если "_parent" – в родительском фрейме, а в случае отсутствия такового, в текущем окне; если "_top" – в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как "_self".

Атрибут download гиперссылки

В HTML 5 был введен еще один полезный атрибут download, который не принимает значений, а служит индикатором того, что браузер не совершит переход по ссылке, а предложит закачать файл, указанный в атрибуте href в качестве значения.

Также в элементе «a» могут использоваться атрибуты rel, hreflang и type. Мы их использовать скорее всего не будем. Однако, если информация о них все таки понадобится, то можно обратиться к нашему справочнику здесь.

Рассмотрим применение гиперссылок на примере №1.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://html.okpython.net/">
	<title>Использование гиперссылок</title>
</head>
<body>
	
	<p>
		Посмотреть спецификацию <em>HTML 5</em> можно 
		<a href="https://html.spec.whatwg.org/" target="_blank">здесь</a>. 
		<br>Страница откроется в новом окне.
	</p>
	
	<p title="Загрузка начнется автоматически!">
		<!-- Работает в новых версиях браузеров -->
		А скачать учебный минисайт по адресации можно 
		<a href="codes/html/relative_path.7z" download>здесь</a>.<br>
	</p>
</body>
</html>

Пример №1. Использование гиперссылок

Использование гиперссылок для создания якорей на странице

Элемент «a» может использоваться и в качестве гиперссылки для перехода внутри страницы. Для этого в нужном месте документа необходимо создать якорь (от англ. anchor), т.е. закладку, и указать ее в качестве цели в гиперссылке. Создается якорь при помощи пустого элемента «a», в открывающем теге которого указывается атрибут id. В качестве якоря можно также использовать и требуемый элемент разметки, к которому в дальнейшем будет вести внутренняя гиперссылка. Для этого нужно просто указать в нем атрибут id. Далее в атрибуте href самой гиперссылки в качестве значения указывается символ решетки # и значение атрибута id якоря. Чтобы стало понятнее, рассмотрим все на примере №2.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Создание внутренних гиперссылок</title>
</head>
<body>
	<!-- Создаем якорь -->
	<a id="anchor_1"></a>
	<p>
		Я &ndash; первый абзац.
	</p>
		
	<p>
		Посмотреть таблицу атрибутов <em>HTML 5</em> можно <br>
		на официальном сайте 
		<a href="https://html.spec.whatwg.org/index.html#attributes-1" 
		target="_blank">здесь</a>. 
		<br>Страница откроется в новом окне и будет <br>
		прокручена до таблицы с атрибутами.
	</p>
	
	<p>
		Перейти к первому абзацу можно 
		<a href="#anchor_1">здесь</a>.<br>
	</p>
</body>
</html>

Пример №2. Использование внутренних гиперссылок

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

Относительные гиперссылки и построение относительной адресации

В заключение пункта рассмотрим принцип построения относительных адресов. Пусть наша гиперссылка находится в документе, расположенном на сервере по адресу https://site.name/doc_1/doc_2/ ... /doc_n/web_page.html, где doc_n – папка n-го уровня вложенности. В этом случае папка doc_n, в которой находится наш документ с гиперссылкой, автоматически принимается за основу, относительно которой и строится вся адресация. Итак:

Если нужно, чтобы ссылка вела на целевой документ new_page.html, расположенный в той же папке doc_n, что и наш исходный документ с гиперссылкой, то в качестве значения атрибута href ссылки нужно просто задать имя целевого документа: href="new_page.html".
Для перехода к целевому документу new_page.html, расположенному в папке https://site.name/doc_1/doc_2/ ... /doc_n/doc_n_1/ ... doc_n_k/, значение атрибута href ссылки должно включать только папки, вложенные в doc_n, и, конечно же, имя целевого документа: href="doc_n_1/ ... doc_n_k/new_page.html". Таким образом, мы указываем браузеру, что он должен зайти в папку doc_n_1, расположенную в папке doc_n с исходным документом, в котором прописана гиперссылка, затем в папку doc_n_2 и так далее, пока не попадет в папку doc_n_k с находящимся там целевым документом, который он и должен открыть.
Чтобы попасть в папку на уровень выше исходной, используется специальная комбинация символов ../. Для перехода на n уровней вверх нужно записать комбинацию ../ n раз подряд. Так в нашем случае, чтобы перейти по ссылке к целевому документу https://site.name/doc_1/doc_2/ ... /doc_n-3/new_page.html атрибут href ссылки должен иметь значение "../../../new_page.html". Тем самым мы сообщаем браузеру, что он должен подняться в папку doc_n-1, затем doc_n-2 и doc_n-3, после чего открыть находящийся там целевой документ new_page.html.
Если же необходимо не просто подняться на несколько уровней вверх, но и зайти там в папку (или несколько вложенных папок), для получения доступа к целевому документу, то в значении атрибута href ссылки сперва нужно прописать требуемое количество уровней поднятия вверх при помощи символов ../, а затем дописать путь из полученной папки к целевому документу. Например, если целевой документ расположен в папке new_doc и адресный путь к нему имеет вид https://site.name/doc_1/doc_2/ ... /doc_n-3/new_doc/new_page.html, то атрибут href ссылки должен иметь значение "../../../new_doc/new_page.html". Т.е. мы указываем браузеру, что он должен подняться на три уровня вверх относительно исходной папки doc_n, в которой находится документ с гиперссылкой, а затем зайти в папку new_doc и открыть целевой документ new_page.html

В качестве примера вы можете скачать учебный минисайт, построенный полностью на основе относительной адресации. После просмотра поэкспериментируйте, изменяя и создавая новые ссылки, папки и страницы.

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

Если необходимо начать отсчет относительного пути от корня сайта, в начале пути следует прописать слеш /. Например, ссылка <a href="/index.html">Домой</a> указывает на документ, который находится в корневой папке сайта (а не в текущей!). Следует иметь в виду, что отсчет от корня сайта работает только под управлением реального веб-сервера. На локальном сервере, например, Xampp, отсчет нужно начинать с имени корневой папки.