Создание гиперссылок

Гиперссылки являются важной функцией в HTML и дают основу для того, чтобы пользователи могли перемещаться по контенту, как в рамках одного документа, так и между страницами. Для создания гиперссылки используется элемент a, который представлен в таблице 8-2.

Таблица 8-2: Элемент a

Элемент	`a`
Тип элемента	Элемент `a` считается фразовым элементом, если он содержит фразовый контент, и потоковым элементом, если он содержит потоковый контент
Разрешенные родительские элементы	Любой элемент, который может содержать фразовый контент
Локальные атрибуты	`href`, `hreflang`, `media`, `rel`, `target`, `type`
Содержание	Фразовый контент и потоковые элементы
Стиль тегов	Требуются открывающий и закрывающий теги
Новый в HTML5	Нет
Изменения в HTML5	Сейчас этот элемент может содержать как потоковый, так и фразовый контент. Добавлен атрибут `media`. Атрибут `target`, который являлся устаревшим в HTML4, в настоящее время восстановлен. В настоящее время элемент `a` без значения `href` является заполнителем (placeholder) для гиперссылки. Устарели атрибуты `id`, `coords`, `shape`, `urn`, `charset`, `methods` и `rev`
Соглашение по стилям	`a:link, a:visited { color: blue; text-decoration: underline; cursor: auto; } a:link:active, a:visited:active { color: blue; }`

Элемент a определяет шесть локальных атрибутов, которые описаны в таблице 8-3. Наиболее важным из этих атрибутов является href, как вы увидите далее в этом разделе.

Таблица 8-3: Локальные атрибуты для элемента a

Атрибут	Описание
`href`	Указывает URL ресурса, к которому обращается элемент `a`.
`hreflang`	Указывает язык связанного ресурса.
`media`	Указывает устройство, для которого предназначается связанный контент. Этот атрибут использует те же значения `device` и `feature`, о которых я рассказал в главе 7.
`rel`	Определяет тип отношений между документом и связанным ресурсом. Этот атрибут использует те же значения, что и атрибут `rel` элемента `link`, как описано в главе 7.
`target`	Определяет браузерный контекст, в котором должен быть открыт связанный ресурс.
`type`	Указывает MIME-тип связанного ресурса, такой как `text/html`.

Создание внешних гиперссылок

Вы можете создавать ссылки на другие HTML документы, установив атрибут href на URL, который начинается с http://. Когда пользователь щелкает по гиперссылке, браузер загружает указанную страницу. В листинге 8-1 показан элемент a, который используется для связи с внешним контентом.

Листинг 8-1: Использование элемента a для связи с внешним ресурсом

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<base href="http://titan/listings/" />
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	I like <a href="http://en.wikipedia.org/wiki/Apples">apples</a> and
	<a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>.
</body>
</html>

В этом примере я создал два элемента a, которые ссылаются на статьи из Википедии. Нажатие на ссылку приведет к тому, что соответствующая статья будет загружена и отображена пользователю. Вы можете увидеть соглашение по стилям по умолчанию для гиперссылок на рисунке 8-1.

Рисунок 8-1: Представление по умолчанию для гиперссылок

Не все URL-адреса должны обращаться к другим веб страницам. Хотя протокол http является наиболее широко используемой формой URL, браузер также поддерживает другие протоколы, такие как https и ftp. Если вы хотите сослаться на адрес электронной почты, вы можете использовать протокол mailto, например, mailto:adam@mydomain.com.

Совет
Вы можете использовать элемент a для создания гиперссылок на основе изображений (когда пользователь нажимает на изображение, а не на текст, чтобы следовать гиперссылке). Это требует использования элемента img. Вы можете найти информацию об элементе img и примеры ссылок на основе изображений в главе 15.

Создание относительных ссылок

Если значение атрибута href начинается не с признанного протокола, такого как http://, то браузер обращается с гиперссылкой как с относительной ссылкой. По умолчанию это обозначает, что браузер предполагает, что целевой ресурс доступен в том же месте, что и текущий документ. В листинге 8-2 приведен пример относительного URL.

Листинг 8-2: Использование относительной ссылки

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<base href="http://titan/listings/" />
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	I like <a href="http://en.wikipedia.org/wiki/Apples">apples</a> and
	<a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>.
You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>

В этом примере я установил для атрибута href значение fruitlist.html. Когда пользователь нажимает на ссылку, браузер использует URL текущего документа, чтобы определить, как загрузить связанную страницу. Например, если текущий документ был загружен с http://www.mydomain.com/docs/example.html, то браузер будет загружать целевую страницу с http://www.mydomain.com/docs/fruitlist.html.

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

Создание внутренних гиперссылок

Вы можете создать гиперссылку, которая представит другой элемент в окне браузера. Это делается с помощью ID селектора CSS-стиля, #<id>, как показано в листинге 8-3.

Листинг 8-3: Создание внутренней ссылки

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	I like <a href="http://en.wikipedia.org/wiki/Apples">apples</a> and
	<a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>.
You can see other fruits I like <a href="#fruits">here</a>.
	<p id="fruits">
		I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
	</p>
</body>
</html>

Я создал гиперссылку со значением href равным #fruits. Когда пользователь нажимает на ссылку, браузер начинает искать элемент в документе, значение атрибута id которого равно fruits. Если элемент еще не отобразился на экране, браузер будет прокручивать документ до тех пор, пока не отобразится.

Совет
Если браузер не может найти элемент с нужным значением атрибута id, он будет искать снова, обращая внимание на атрибут name, который соответствует цели.

Таргетинг просматриваемого контекста

Атрибут target позволяет указать браузеру место, где на ваш взгляд должен быть отображен связанный ресурс. По умолчанию браузер использует окно, вкладку или фрейм, в котором отображается текущий документ; это обозначает, что новый документ заменяет существующий. Тем не менее, есть и другие варианты. В таблице 8-4 описаны поддерживаемые значения для атрибута target.

Таблица 8-4: Значения атрибута target элемента a

Атрибут	Описание
`_blank`	Открыть документ в новом окне (или вкладке).
`_parent`	Открыть документ в родительском фрейме.
`_self`	Открыть документ в текущем окне (это поведение по умолчанию).
`_top`	Открыть документ в теле окна.
`<frame>`	Открыть документ в указанном фрейме.

Каждое из этих значений представляет просматриваемый контекст. Значения _blank и _self очевидны; другие относятся к использованию фреймов, которые я объясню в главе 15.

Аннотирование контента при помощи базовых текстовых элементов

Первый набор текстовых элементов, который вы увидите, уже существует в HTML определенное время. Раньше некоторые из этих элементов представляли форматирование текста, но так как HTML претерпел изменения, разделение представления от широкой семантики обозначает, что у этих элементов теперь есть более обобщенное значение.

Обозначение ключевых слов и названий продуктов

Элемент b используется для выделения куска текста без указания какого-либо дополнительного акцента или важности. Примерами, приведенными в спецификации HTML5, являются ключевые слова в описании документа и названия продуктов в рецензии. В таблице 8-5 представлен элемент b.

Таблица 8-5: Элемент b

Элемент	`b`
Тип элемента	Фразовый
Разрешенные родительские элементы	Любой элемент, который может содержать фразовый контент
Локальные атрибуты	Нет
Содержание	Фразовый контент
Стиль тегов	Требуются открывающий и закрывающий теги
Новый в HTML5	Нет
Изменения в HTML5	В HTML4 элемент `b` имел только презентационный смысл; в HTML5 он получил семантическое значение, которое было описано ранее, а презентационный смысл был понижен
Соглашение по стилям	`b { font-weight: bolder; }`

Элемент b очень прост: контент, содержащийся между открывающим и закрывающим тегами, выделяется из окружающего контента. Вы, как правило, делают это, показывая этот контент жирным шрифтом, но вы можете использовать CSS, чтобы изменить стиль, применяемый к элементу b. В листинге 8-4 показано, как используется элемент b.

Листинг 8-4: Использование элемента b

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<base href="http://titan/listings/" />
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	I like <b>apples</b> and <b>oranges</b>.
</body>
</html>

Вы можете увидеть соглашение по стилям по умолчанию для элемента b на рисунке 8-2.

Рисунок 8-2: Использование элемента b

8.2. Добавление акцента

или RSS канал: