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.
<!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.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Создание внутренних гиперссылок</title> </head> <body> <!-- Создаем якорь --> <a id="anchor_1"></a> <p> Я – первый абзац. </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/
- Если нужно, чтобы ссылка вела на целевой документ new_page.html, расположенный в той же папке doc_n, что и наш исходный документ с гиперссылкой, то в качестве значения атрибута href ссылки нужно просто задать имя целевого документа: href="new_page.html".
-
Для перехода к целевому документу new_page.html, расположенному в папке
https://site.name/
doc_1/ , значение атрибута href ссылки должно включать только папки, вложенные в doc_n, и, конечно же, имя целевого документа: href="doc_n_1/ ... doc_n_k/doc_2/ ... /doc_n/ 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/ атрибут href ссылки должен иметь значение "../../../new_page.html". Тем самым мы сообщаем браузеру, что он должен подняться в папку doc_n-1, затем doc_n-2 и doc_n-3, после чего открыть находящийся там целевой документ new_page.html.doc_2/ ... /doc_n-3/ new_page.html -
Если же необходимо не просто подняться на несколько уровней вверх, но и зайти там в папку (или несколько вложенных папок), для получения доступа
к целевому документу, то в значении атрибута href ссылки сперва нужно прописать требуемое количество
уровней поднятия вверх при помощи символов ../, а затем дописать путь из полученной папки к целевому документу.
Например, если целевой документ расположен в папке new_doc и адресный путь к нему имеет вид
https://site.name/
doc_1/ , то атрибут href ссылки должен иметь значение "../../../new_doc/new_page.html". Т.е. мы указываем браузеру, что он должен подняться на три уровня вверх относительно исходной папки doc_n, в которой находится документ с гиперссылкой, а затем зайти в папку new_doc и открыть целевой документ new_page.htmldoc_2/ ... /doc_n-3/new_doc/ new_page.html
В качестве примера вы можете скачать учебный минисайт, построенный полностью на основе относительной адресации. После просмотра поэкспериментируйте, изменяя и создавая новые ссылки, папки и страницы.
Относительные гиперссылки очень удобны при разработке браузерных офф-лайн приложений, например, справочных руководств. Однако следует помнить, что при переносе документа из текущей папки в другую, все относительные ссылки в нем перестанут работать. Поэтому их придется переписывать. Если же относительные ссылки указывают на файлы, которые также находятся внутри текущей папки либо во вложенных папках, то после переноса данной папки в другое место все ссылки в документе останутся рабочими.
Если необходимо начать отсчет относительного пути от корня сайта, в начале пути следует прописать слеш /. Например,
ссылка <a href="/index.html">
Быстрый переход к другим страницам
- Таблицы в HTML
- Гиперссылки в HTML
- Служебные теги в HTML
- Вернуться к оглавлению учебника