Руководство по HTML5

Руководство по HTML5

Адам Фриман

Описание документов при помощи элементов метаданных

Элементы метаданных позволяют предоставлять информацию об HTML документе. Сами они не являются содержанием, но они дают информацию о содержании, которое последует далее. Элементы метаданных добавляются в элемент head.

Указание названия документа

Элемент title задает документу название или имя. Браузеры обычно отображают содержание этого элемента в верхней части окна браузера или вкладки. В таблице 7-6 приведено описание элемента title.

Таблица 7-6: Элемент title
Элемент title
Тип элемента Метаданные
Разрешенные родительские элементы head
Локальные атрибуты Нет
Содержание Название документа или осмысленное описание его содержания
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям Нет

Каждый HTML документ должен иметь только один элемент title, а текст, заключенный в открывающем и закрывающем тегах, должны быть значимым для пользователей. По крайней мере, он должен позволять пользователю различать вкладки или окна браузера и узнавать, какие из них относятся к вашему веб приложению. В листинге 7-5 показано, как используется элемент title.

Листинг 7-5: Использование элемента title
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
</body>
</html>

На рисунке 7-2 вы можете увидеть, каким образом браузер обрабатывает элемент title. Тут показан Google Chrome, но другие браузеры делают это аналогично.

Рисунок 7-2: Результат использования элемента title

Настройка базы для относительных URL-адресов

Элемент base устанавливает базовый URL, на котором будут завязаны относительные ссылки, содержащиеся в HTML документе. Относительная ссылка это та, в которой опущены следующие части URL-адреса: протокол, хост и порт; и она оценивается относительно другого URL: либо указанного при помощи элемента base, или используемого для загрузки текущего документа. Элемент base также определяет, каким образом открываются ссылки, когда пользователь щелкает на их, и как браузер действует, после того как была отправлена форма (я объясню HTML5 формы в главе 12). В таблице 7-7 приведено описание элемента base.

Таблица 7-7: Элемент base
Элемент base
Тип элемента Метаданные
Разрешенные родительские элементы head
Локальные атрибуты href, target
Содержание Нет
Стиль тегов Тег пустого элемента
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям Нет

HTML документ должен содержать максимум один элемент base. Как правило, это один из первых элементов, которые вы помещаете внутрь элемента head. Это гарантирует, что базовый URL будет применяться к относительным URL-адресам, используемым в последующих элементах метаданных.

Использование атрибута href

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

Листинг 7-6: Использование атрибута href в элементе base
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<base href="http://titan/listings/" />
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
	<a href="page2.html">Page 2</a>
</body>
</html>

В этом примере я установил базовый URL на http://titan/listings/. Titan – это имя моего сервера разработки, а listings – это каталог (директория) на сервере, который содержит примеры для этой книги.

Позже в этом же документе я добавил элемент a для создания гиперссылки с использованием относительного URL page2.html (я объясню, как использовать элемент a в главе 8). Когда пользователь щелкает по гиперссылке, браузер сочетает в себе базовый URL и относительной URL для создания комбинированного URL http://titan/listings/page2.html.

Совет

Если вы не используете элемент base либо указываете базовый URL при помощи атрибута href, то браузер будет считать, что он должен связывать любые относительные ссылки с URL текущего документа. Так, например, если вы загружаете документ с URL http://myserver.com/app/mypage.html, и он содержит гиперссылку с относительным адресом myotherpage.html, то браузер будет пытаться загрузить вторую страницу с полным URL http://myserver.com/app/myotherpage.html.

Использование атрибута target

Атрибут target сообщает браузеру, как открывать ссылки. Значения, которые вы указываете для этого атрибута, представляют собой просматриваемый контекст (браузерный контент). Вы увидите некоторые примеры этих контекстов и то, как их использовать, в главах 8 и 15, когда мы будем рассматривать элементы a и iframe.

Использование метаданных для описания документа

Элемент meta позволяет определить различные виды метаданных в документе. Вы можете использовать этот элемент разными способами, и HTML документ может содержать несколько элементов meta. В таблице 7-8 приведено описание элемента meta.

Таблица 7-8: Элемент meta
Элемент meta
Тип элемента Метаданные
Разрешенные родительские элементы head
Локальные атрибуты name, content, charset, http-equiv
Содержание Нет
Стиль тегов Тег пустого элемента
Новый в HTML5 Нет
Изменения в HTML5 Атрибут charset является новым в HTML5. В HTML4 атрибут http-equiv мог иметь любое число различных значений. В HTML5 это было изменено таким образом, что разрешены только те значения, которые я описываю в этой таблице. Атрибут HTML4 scheme устарел. Вы больше не указываете язык страницы при помощи элемента meta (я покажу вам, как сделать это в HTML5, далее в этой главе).
Соглашение по стилям Нет

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

Указание пар метаданных имя/значение

Во-первых, элемент meta используется для определения метаданных по парам имя/значение, для которых мы применяем атрибуты name и content. В листинге 7-7 представлен пример.

Листинг 7-7: Использование элемента meta для определения метаданных по парам имя/значение
<!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" />
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
	<a href="page2.html">Page 2</a>
</body>
</html>

Вы можете использовать атрибут name, чтобы указать, к какому типу метаданных относится элемент, и атрибут content, чтобы добавить значение. В таблице 7-9 перечислены предопределенные типы метаданных, которые можно использовать с элементом meta.

Таблица 7-9: Предопределенные типы метаданных для использования с элементом meta
Название метаданных Описание
application name Имя веб приложения, частью которого является текущая страница
author Имя автора текущей страницы
description Описание текущей страницы
generator Название программного обеспечения, которое сгенерировало HTML (это, как правило, применяется при использовании какого-либо серверного фреймворка для создания HTML страниц, такого как Ruby on Rails, ASP.NET и т.д.)
keywords Набор разделенных запятой строк, которые описывают содержание страницы

В дополнение к пяти предопределенным именам метаданных вы также можете использовать расширения метаданных. На http://wiki.whatwg.org/wiki/MetaExtensions можно увидеть список этих расширений, которые с течением времени меняются. Некоторые из этих расширений широко используются, а другие довольно специализированны и практически не используются. Тип метаданных robots является примером расширения, которое очень широко используется. Он позволяет автору HTML документа указать, каким образом документ должен рассматриваться поисковыми системами. Например:

<meta name="robots" content="noindex">

Тремя значениями, которые узнают большинство поисковых систем, являются noindex (не индексировать эту страницу), noarchive (не создавать архивы или кэшированные версии этой страницы) и nofollow (не следовать по ссылкам с этой страницы). Есть еще много доступных расширений метаданных, и я рекомендую вам прочитать этот онлайн список, чтобы увидеть, какие из них подходит для вашего проекта.

Совет

В прошлом тип метаданных keywords был главным способом рассказать поисковой системе, как следует классифицировать и ранжировать ваш контент. В наши дни поисковики уделяют гораздо меньше внимания метаданным keywords, потому что ими можно злоупотреблять, то есть давать ложное представление о значимости и содержании страницы. Лучший способ улучшить ваш контент для поисковых систем – это прислушаться к совету самих поисковиков, большинство из них дают руководство по оптимизации ваших страниц или всего сайта. Вы можете найти руководство Google по адресу http://google.com/support/webmasters/bin/topic.py?topic=15260.

Объявление кодировки символов

Во-вторых, элемент meta применяется для объявления кодировки, которую использует содержание HTML документа. Пример этого показан в листинге 7-8.

Листинг 7-8: Использование элемента meta для объявления кодировки
<!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" />
	<meta charset="utf-8" />
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
	<a href="page2.html">Page 2</a>
</body>
</html>

В этом случае я указал, что моя страница использует кодировку UTF-8. UTF-8 является распространенной кодировкой, потому что она может представлять все символы Юникода в наименьшем количестве байтов. (На данный момент около 50 процентов всех веб страниц используют кодировку UTF-8).

Имитация HTTP заголовка

И наконец, элемент meta используется для того, чтобы переопределить значение одного из HTTP (Hypertext Transfer Protocol) заголовков. HTTP – это то, что вы обычно используете для транспортировки HTML данных между сервером и браузером. Я не собираюсь углубляться в HTTP, только скажу, что каждый ответ сервера содержит ряд заголовков, которые описывают содержание браузеру, и что вы можете использовать элемент meta для имитации или замены трех из этих заголовков. В листинге 7-9 показан общий вид такого использования элемента meta.

Листинг 7-9: Использование элемента meta для имитации HTTP заголовка
<!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" />
	<meta charset="utf-8" />
	<meta http-equiv="refresh" content="5" />
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
	<a href="page2.html">Page 2</a>
</body>
</html>

Вы можете использовать атрибут http-equiv, чтобы указать, какой заголовок вы хотите имитировать, а атрибут content, чтобы добавить значение, которое вы хотите использовать. В данном случае я указал заголовок refresh и значение равное 5; результатом такого применения будет то, что мы просим браузер перезагружать страницу каждые пять секунд.

Совет

Если вы поставите за интервалом обновления точку с запятой и URL, браузер будет загружать указанный URL через нужный интервал. Для примера смотрите раздел «Элемент noscript».

Для атрибута http-equiv существуют три допустимых значения, которые я описываю в таблице 7-10.

Таблица 7-10: Допустимые значения для атрибута http-equiv элемента meta
Значение атрибута Описание
refresh Определяет период, в секундах, после чего текущая страница должна быть перезагружена сервером. Вы также можете указать другой URL для загрузки. Например: <meta http-equiv="refresh" content="5; http://www.apress.com"/>
default-style Указывает предпочтительную таблицу стилей, которую следует использовать для этой страницы. Значение атрибута content должно соответствовать атрибуту title элементов script или link в том же документе.
content-type Это альтернативный способ указания кодировки HTML страницы. Например: <meta http-equiv="content-type" content="text/html charset=UTF-8"/>

Определение CSS стилей

Элемент style позволяет определить стили CSS внутри HTML документа (в отличие от элемента link, который позволяет импортировать стили из внешней таблицы стилей). В таблице 7-11 приведено описание элемента style.

Таблица 7-11: Элемент style
Элемент style
Тип элемента N/A
Разрешенные родительские элементы Разрешенные родительские элементы Любой элемент, который может содержать метаданные, плюс head, div, noscript, section, article, aside
Локальные атрибуты type, media, scoped
Содержание CSS стили
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 В HTML5 был добавлен новый атрибут scoped
Соглашение по стилям Нет

В листинге 7-10 представлен пример использования элемента style.

Листинг 7-10: Использование элемента style
<!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" />
	<meta charset="utf-8" />
	<style type="text/css">
		a {
			background-color: grey;
			color: white;
			padding: 0.5em;
		}
	</style>
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
	<a href="page2.html">Page 2</a>
</body>
</html>

В этом примере я создал новый стиль для элемента a. Он отображает ссылку на сером фоне, с белым текстом и некоторым отступом. (Если вы не знакомы с CSS, вы можете получить краткие сведения в главе 4, а полную информацию вы найдете в главе 16.) Результат использования этого стиля можно увидеть на рисунке 7-3.

Рисунок 7-3: Использование элемента style для создания внутреннего стиля

Вы можете использовать элемент style по всему HTML документу, и один документ может содержать несколько элементов style. Это обозначает, что вы не должны определять все стили в разделе head. Это может быть полезно, если вы создаете ваши страницы с помощью шаблонов, потому что это обозначает, что вы можете дополнить стили, определенные в шаблоне, стилями, которые являются специфическими для конкретной страницы.

Определение типа стиля

Атрибут type позволяет указать браузеру, какой стиль вы собираетесь определить; однако, единственным механизмом стилей, который поддерживается браузером, является CSS, так что значение этого атрибута всегда будет text/css.

Определение сферы применения стиля

Если атрибут scoped присутствует в элементе style, то стили будут применяться только к родительскому элементу данного элемента и дочерним элементам «родителя». Без атрибута scoped, стиль, определенный в любом месте HTML документа, применяется ко всем элементам в документе.

Внимание

Когда я писал это, ни один из крупных браузеров не поддерживал атрибут scoped для стилей.

Указание условий (как и на каких носителях будет отображаться) применения стиля

Атрибут media позволяет указать, когда стиль должен быть применен к документу. В листинге 7-11 представлен пример того, как можно использовать этот атрибут.

Листинг 7-11: Использование атрибута media элемента style
<!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" />
	<meta charset="utf-8" />
	<style media="screen" type="text/css">
		a {
			background-color: grey;
			color: white;
			padding: 0.5em;
		}
	</style>
	<style media="print">
		a {
			color: Red;
			font-weight: bold;
			font-style: italic;
		}
	</style>
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
	<a href="page2.html">Page 2</a>
</body>
</html>

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

Вы можете создать очень специфические условия, при которых будет использоваться стиль. Вы можете указать устройство, в котором заинтересованы. Я представил поддерживаемые значения в таблице 7-12.

Таблица 7-12: Определенные значения для атрибута media элемента style
Значение Описание
all Применять этот стиль к любому устройству (это по умолчанию).
aural Применять этот стиль к синтезаторам речи.
braille Применять этот стиль к дисплеям Брайля.
handheld Применять этот стиль к портативным устройствам.
projection Применять этот стиль к проекторам.
print Применять этот стиль в окне предварительного просмотра и когда страница будет печататься.
screen Применять этот стиль, когда содержимое отображается на экране компьютера.
tty Применять этот стиль к устройствам с фиксированной шириной, таким как телетайп.
tv Применять этот стиль к телевизорам.

Браузер интерпретирует, к какой категории попадает устройство. Браузеры справляются с некоторыми типами устройств (такими, как screen и print) довольно хорошо, но другие устройства (например, устройства типа handheld) могут получить более широкое толкование. Стоит удостовериться, что ваши целевые браузеры так же интерпретируют конкретные устройства, как это понимаете и делаете вы. Использование функций media позволяет вам быть еще более конкретным. В листинге 7-12 приведен пример.

Листинг 7-12: Добавление конкретики в элемент style
<!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" />
	<meta charset="utf-8" />
	<style media="screen AND (max-width:500px)" type="text/css">
		a {
			background-color: grey;
			color: white;
			padding: 0.5em;
		}
	</style>
	<style media="screen AND (min-width:500px)" type="text/css">
		a {
			color: Red;
			font-style: italic;
		}
	</style>
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
	<a href="page2.html">Page 2</a>
</body>
</html>

В этом листинге я использовал width, чтобы установить различие между двумя стилями. Первый будет использоваться, когда окно браузера является более узким, чем 500 пикселей, а второй, когда окно шире, чем 500 пикселей. Если вы отобразите HTML из листинга 7-12 в браузере, а затем растянете окно, чтобы изменить его размер, вы можете увидеть результат использования этой возможности, как показано на рисунке 7-4.

Рисунок 7-4: Применение различных стилей на основе ширины окна браузера

Обратите внимание, как я использовал AND, чтобы объединить устройство с медиа-функцией. В дополнение к AND, вы также можете использовать NOT, или запятую (,), чтобы представить OR. Это позволяет создавать сложные и весьма специфические условия, в которых применяется стиль.

Мы обычно используем медиа-функции, такие как width, с модификаторами min и max, чтобы сделать их более гибкими; хотя можно применять стили, основанные на очень специфических условиях для окна браузера, опуская их. Я перечислил и описал доступные медиа-функции вместе с их модификаторами в таблице 7-13. Если не указано иное, вы можете менять эти функции с min- или max-, чтобы создать порог, а не задать конкретное значение.

Таблица 7-13: Медиа-функции атрибута media элемента style
Медиа-функция Описание Пример
width
height
Определяет ширину или высоту окна браузера. Единицы выражаются как px для пикселей. width:200px
device-width
device-height
Определяет ширину или высоту всего устройства (а не только окна браузера). Единицы выражаются как px для пикселей. min-device-height:200px
resolution Указывает плотность пикселей (разрешение) устройства. Единицами измерения являются dpi (точек на дюйм) или dpcm (точек на сантиметр). max-resolution:600dpi
orientation Определяет ориентацию устройства. Поддерживаемыми значениями являются portrait и landscape (портрет и пейзаж). Для этой функции нет модификаторов. orientation:portrait
aspect-ratio
device-aspectratio
Определяет отношение пикселей окна браузера или всего устройства. Значения выражены как отношение количества пикселей ширины к количеству пикселей высоты. min-aspect-ratio:16/9
color
monochrome
Определяет число битов на пиксель цветного или монохромного устройства. min-monochrome:2
color-index Определяет количество цветов, которые может показывать дисплей. max-color-index:256
scan Задает режим сканирования телевизора. Поддерживаются значения progressive и interlace (прогрессивный и чересстрочный). Для этой функции нет модификаторов. scan:interlace
grid Указывается тип устройства. Сеточные устройства используют фиксированные сетки для отображения содержимого, например, текстовые терминалы и дисплеи однолинейных пейджеров. Поддерживаются значения 0 и 1, где 1 представляет собой сеточное устройство. Для этой функции нет модификаторов. grid:0

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

Определение внешних ресурсов

Элемент link создает связь между HTML документом и внешним ресурсом, обычно с таблицей стилей CSS. В таблице 7-14 приведено описание элемента link.

Таблица 7-14: Элемент link
Элемент link
Тип элемента Метаданные
Разрешенные родительские элементы head, noscript
Локальные атрибуты href, rel, hreflang, media, type, size
Содержание Нет
Стиль тегов Пустой (Одиночный)
Новый в HTML5 Нет
Изменения в HTML5 Добавлен атрибут sizes; в HTML5 устаревшими считаются атрибуты charset, rev и target
Соглашение по стилям Нет

Элемент link определяет шесть локальных атрибутов, которые я описываю в таблице 7-15. Наиболее важным из этих атрибутов является rel, который определяет характер отношений между HTML страницей и ресурсом, с которым связывает эту страницу элемент link. Я покажу вам некоторые из наиболее распространенных типов отношений в ближайшее время.

Таблица 7-15: Локальные атрибуты элемента link
Атрибут Описание
href Указывает URL ресурса, к которому относится элемент link.
hreflang Указывает язык связанного ресурса.
media Определяет устройство, для которого предназначен связанный контент. Этот атрибут использует те же устройства и значения медиа-функций, которые я описал в таблицах 7-10 и 7-11.
rel Определяет тип отношений между документом и связанным ресурсом.
sizes Определяет размер значков. Я покажу вам пример использования элемента link для загрузки значков далее в этой главе.
type Указывает MIME-тип связанного ресурса, такой как text/css или image/x-icon.

Значение, присвоенное атрибуту rel, определяет, как браузер работает с элементом link. В таблице 7-16 представлены некоторые из наиболее распространенных значений атрибута rel и описано каждое из них. Есть и дополнительные значения для атрибута rel, но это все еще изменчивая область в HTML5. Вы можете найти наиболее полное определение значений атрибута rel на http://iana.org/assignments/link-relations/link-relations.xml.

Таблица 7-16: Выбранные значения для атрибута rel элемента link
Значение Описание
alternate Ссылается на альтернативную версию документа, такую как перевод на другой язык.
author Ссылается на автора документа.
help Ссылается на помощь, связанную с текущим документом.
icon Указывает ресурс значка. См. листинг 7-14 для примера.
license Ссылается на лицензию, связанную с текущим документом.
pingback Указывает пингбэк (pingback) сервер, который позволяет блогу автоматически получать уведомления, когда другие веб сайты ссылаются на него.
prefetch Предварительно получает ресурс. См. листинг 7-15 для примера.
sylesheet Загружает внешнюю таблицу стилей CSS. См. листинг 7-13 для примера.

Загрузка таблицы стилей

Чтобы продемонстрировать использование элемента link таким способом, я создал таблицу стилей styles.css, содержание которой показано в листинге 7-13.

Листинг 7-13: Файл styles.css
a {
	background-color: grey;
	color: white;
	padding: 0.5em;
}

Этот стиль CSS ранее применялся с использованием элемента style, но теперь он помещен во внешнюю таблицу стилей. Для того чтобы воспользоваться этой таблицы стилей, используйте элемент link, как показано в листинге 7-14.

Листинг 7-14: Использование элемента link для внешней таблицы стилей
<!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" />
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
	<a href="page2.html">Page 2</a>
</body>
</html>

Вы можете использовать несколько элементов link, чтобы загрузить нескольких внешних ресурсов. Преимущество использования внешней таблицы стилей заключается в том, что вы можете использовать один набор стилей в нескольких документах без необходимости дублировать стили. Браузер загружает и применяет стили так же, как если бы вы установили CSS свойства в элемент style, как показано на рисунке 7-5.

Рисунок 7-5: Применение стилей, полученных из внешней таблицы стилей

Определение иконки для вашей страницы

После таблиц стилей CSS самым распространенным способом использования элемента link является определение иконки (значка), которая будет связана с вашей страницей. Различные браузеры обрабатывают иконки по-разному, но обычно иконка появляется на вкладке или когда пользователь добавляет вашу страницу в список избранных. Чтобы продемонстрировать это, я взял значок, который Apress используется для www.apress.com. Это файл с рисунком 32 пикселя на 32 пикселя в формате .ico. Браузеры универсально поддерживают этот формат. Вы можете увидеть, как выглядит эта иконка на рисунке 7-6. Графическим файлом является favicon.ico.

Рисунок 7-6: Иконка Apress

Вы можете использовать эту иконку, добавив элемент link на вашу страницу, как показано в листинге 7-15.

Листинг 7-15: Добавление иконки при помощи элемента link
<!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>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
	<a href="page2.html">Page 2</a>
</body>
</html>

Когда HTML страница загружается, браузер будет подгружать и отображать иконку, как показано на рисунке 7-7. На рисунке показан Google Chrome, который отображает иконку в верхней части вкладки страницы.

Рисунок 7-7: Иконка, отображенная в верхней части вкладки

Совет

Вам не нужно использовать элемент link, если иконка находится в /favicon.ico (то есть, в корневом каталоге веб-сервера). Большинство браузеров автоматически запрашивает этот файл при загрузке страницы, даже если нет элемента link.

Предварительная загрузка ресурса

Вы можете попросить браузер предварительно извлечь ресурс, который, как вы ожидаете, будет необходим в ближайшее время. В листинге 7-16 показано использование элемент link для указания предварительной загрузки.

Листинг 7-16: Предварительная загрузка связанного ресурса
<!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" />
	<link rel="prefetch" href="/page2.html" />
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
	<a href="page2.html">Page 2</a>
</body>
</html>

Я установил атрибут rel на prefetch и указал, что HTML страница page2.html должна быть загружена в ожидании того, что пользователь нажмет на ссылку, чтобы выполнить некоторые другие действия, чем те, которые требует эта страница.

Примечание

На момент написания книги, только Firefox поддерживал предварительную загрузку с link.

или RSS канал: Что новенького на smarly.net