belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
HTML >>>

2.8. Создание гиперссылок в документе. Тег <a>

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Использование гиперссылок</title>
</head>
<body>
	
	<p>
		Посмотреть спецификацию <em>HTML 5</em> можно 
		<a href="http://www.w3.org/TR/html5/" target="_blank">здесь</a>. 
		<br>Страница откроется в новом окне.
	</p>
	
	<p title="Скачка начнется автоматически!">
		<!-- Работает в новых версиях браузеров -->
		А скачать таблицы элементов и атрибутов можно 
		<a href="http://www.w3.org/TR/html5/" download>здесь</a>.<br>
	</p>
</body>
</html>

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

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

<!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="http://www.w3.org/TR/html5/index.html#attributes-1" 
		target="_blank">здесь</a>. 
		<br>Страница откроется в новом окне и будет <br>
		прокручена до таблицы с атрибутами.
	</p>
	
	<p>
		Перейти к первому абзацу можно 
		<a href="#anchor_1">здесь</a>.<br>
	</p>
</body>
</html>

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

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

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

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

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

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

Контрольные вопросы и задания

  1. Что называется гиперссылкой? Какой тег формирует гиперссылку в HTML?
  2. Перечислите основные атрибуты элемента 'a'. Для чего они предназначены?
  3. Что такое 'якорь'? Как создать внутреннюю гиперссылку?
  4. Для чего используется комбинация символов '../'?

Словарь новых английских слов

word [wə:d] – слово.
break [breɪk] – разрыв, прекратить.
opportunity [,ɔpə'tju:niti] – возможность,
удобный случай.
division [di'viʒən] – раздел, разделение.
bold [bəuld] – жирный.
italic [i'tælik] – курсив, наклонный.
underline [ˌʌndəˈlaɪn] – подчеркнуть.
strike out [strʌɪk ˈaut] – вычеркивать.
subscript [ˈsʌbskrɪpt] – нижний индекс.
superscript [ˈsuːpəskrɪpt] – верхний индекс.
emphasis [ˈɛmfəsɪs] – акцент, выделение.
strong [strɔɳ] – сильный, прочный.
variable ['vɛəriəbl] – переменная.
sample ['sa:mpl] – образец.
definition [defi'ni∫ən] – определение.
quote [kwəut] – цитата.
insert [ɪnˈsɜːt] – вставлять.
reversed [rɪˈvɜːst] – перевернутый, обратный.
ordered [ˈɔːdəd] – упорядоченный, нумерованный (список).
unordered [ʌnˈɔːdəd] – маркированный (список).
description [dis'krip∫ən] – описание.
row [rou] – строка, ряд.
column ['kɔləm] – столбец, колонка.
cell [cel] – ячейка, элемент, клетка.
table ['teibl] – таблица, стол.
row span – диапазон строк.
column span – диапазон столбцов.
self [self] – сам.
parent ['pɛərənt] – родитель.
blank [blæɳk] – чистый, пустой, бланк.
anchor ['æɳkə] – якорь, привязка.
link [link] – связь, ссылка.
foot [fut] – нижнее поле, ступня.
header ['hedə] – заголовок, верхний колонтитул.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх