Элемент META

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

Количество доступных свойств приближается к нескольким десяткам, но все они делятся на две группы: NAME и HTTP-EQUIV. Элементы группы NAME содержат текстовую информацию о документе, его авторе и некоторые рекомендации для поисковых машин (например, Robots, Description, Keywords, Author, Copyright и др.). Элементы группы HTTP-EQUIV влияют на формирование HTML-заголовка и определяют режим его обработки (Content-Language, Content-Type, Refresh и др.).

Следует отметить, что Спецификация HTML 4.01 не содержит стандартного списка этих свойств, поэтому авторы пока свободны в их определении. Мы рассмотрим лишь несколько свойств.

Каждый элемент META содержит в себе пару атрибутов: для указания названия свойства используются атрибуты name или http-equiv (в зависимости от используемого свойства), а значение этого свойства устанавливается атрибутом content. Например, следующий метаописатель задает имя автора документа:

<META name="Author" content="Bazil Snowman"> 

Дополнительно он может содержать атрибут lang, указывающий язык, на котором написано значение свойства:

<META name="Author" lang="en" content="Bazil Snowman"> 

Наибольший интерес из группы свойств NAME представляют свойства Description и Keywords. Эти свойства, наряду с элементом TITLE, широко используются для оптимизации и продвижения сайтов.

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

Свойство Keywords позволяет определить ключевые слова веб-страницы. При формировании списка ключевых слов необходимо использовать слова, содержащиеся в тексте документа. Не стоит включать в Keywords служебные слова, записывать слова во множественном числе или повторять их несколько раз. Очередность ключевых слов составляется по степени важности в порядке убывания. Оптимальная длина последовательности ключевых слов не должна превышать 250 символов.

<META name="Description" content="Интернет-магазин Всякая всячина – самые низкие цены!">
<META name="Keywords" content="Интернет-магазин, игрушки, книги, литература, журнал, 
 музыка, диски, видео, DVD, двд, кино, софт, программы, игры, 
 ПО, игрушки, books, video, music, software, toys"> 

Среди свойств группы HTTP-EQUIV наиболее важными являются свойства Content-Type, Content-Style-Type и Content-Script-Type.

Свойство Content-Type отвечает за указание типа документа и кодировки символов. Данный метаописатель устанавливает в качестве кодировки HTML-страницы Кириллицу (Windows):

<META http-equiv="Content-Type" content="text/html;
 charset=windows-1251"> 

Свойство Content-Style-Type служит для указания языка таблицы стилей. Если язык таблиц стилей не задан, по умолчанию используется язык text/css. Приведенная ниже запись явно задает в качестве языка таблицы стилей CSS:

<META http-equiv="Content-Style-Type" content="text/css"> 

Свойство Content-Script-Type определяет язык программирования сценариев. Возможны несколько значений данного параметра, однако по умолчанию используется JavaScript. Язык программирования сценариев JavaScript можно задать с помощью следующего метаописателя:

<META http-equiv="Content-Script-Type"
 content="text/javascript"> 

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

Элемент BASE

Элемент BASE используется для явного задания полного URL-адреса документа. Это бывает полезно ввиду того, что общепринятым стилем задания гипертекстовых ссылок является их относительная адресация. То есть при задании ссылки на документ указывается не полный его URL-адрес, а его месторасположение относительно текущего адреса. Элемент BASE как раз и задает адрес, относительно которого и будут браться относительные ссылки.

Использование элемента BASE позволяет поддерживать относительные ссылки в том случае, когда HTML-документ перемещен, а все остальные документы, на которые он ссылается, остались на прежнем месте. Адрес документа поменялся, однако при активизации относительной ссылки, она будет взята браузером относительно исходного адреса, прописанного в элементе BASE.

Основным атрибутом элемента является href, который задает полный URL-адрес документа. Пример иллюстрирует применение элемента BASE и относительных ссылок:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HEAD>
<TITLE>Пример использования элемента BASE</TITLE>
<BASE href= "http://www.somewhere.ru">
</HEAD>
<BODY>
...текст документа...
<a href= "/images/someimage.jpg">Относительная ссылка на изображение</a>
...текст документа...
</BODY>
</HTML> 

В этом примере переход по относительной ссылке задается относительно URL-адреса http://www.somewhere.ru. Таким образом, заданная в этом документе ссылка в абсолютном варианте независимо от месторасположения документа будет записана как http://www.somewhere.ru/images/someimage.jpg. Если базовый адрес не задан, то все относительные ссылки интерпретируются относительно каталога, в котором находится данный HTML-документ.

Элемент BASE можно использовать и в заголовке, и в теле документа, причем несколько раз. Область действия элемента определяется от места его задания и до конца документа или до следующего объявления элемента BASE, если таковой имеется.

Элемент LINK

Элемент LINK задает вид взаимоотношений между содержащим его документом и другим ресурсом Сети и устанавливает между ними логическую связь. Один элемент LINK устанавливает связь только с одним внешним документом. Однако в HTML-документе может присутствовать несколько таких элементов.

Основными атрибутами элемента LINK являются href, указывающий URL-адрес документа, с которым задается взаимоотношение, и rel или rev, задающие прямую и обратную ссылку и определяющие тип ссылки, который показывает, чем документ, указанный в ссылке, является по отношению к текущему документу. Типы ссылок определены в Спецификации HTML.

Например, запись

<LINK rel="Copyright" href="copyright.html"> 

означает, что документ copyright.html является документом, содержащим сведения об авторском праве для текущего документа (прямая ссылка), а запись

<LINK rev="Chapter" href="main.html"> 

означает, что текущий документ является главой документа main.html (обратная ссылка).

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

Заглавные ссылки учитываются поисковыми машинами в своей работе, поэтому рекомендуется их задавать. Например, чтобы указать поисковому роботу на расположение иноязычных версий данного документа, достаточно использовать следующее задание элемента LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Документ на русском языке</TITLE>
<LINK title ="Этот же документ на английском языке"
type="text/html" rel="alternate"
href="http://www.somewhere.ru/english.html"
hreflang="en">
...
</HEAD>
<BODY>
...текст документа на русском языке...
</BODY>
</HTML> 

Также важным применением элемента LINK является подключение к документу внешней таблицы стилей. В этом случае элемент LINK имеет вид:

<LINK rel="StyleSheet" href="style.css" type="text/css"> 

Элемент STYLE

Элемент STYLE позволяет включать в документ внутренние таблицы стилей. Заголовок документа может содержать любое количество этих элементов. Обязательный атрибут type указывает на тип таблицы стилей, т.е. на язык, на котором описываются стили. Для каскадных таблиц стилей этот атрибут всегда должен иметь значение text/css.

Ниже представлен пример включения каскадных таблиц стилей в HTML-документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Пример использования элемента STYLE</TYTLE>
 <STYLE type="text/css">
 body{
 background:#000;
 color:#ccc;
 font-family: helvetica, arial, sans-serif;
 }
 </STYLE>
</HEAD>
<BODY>
<P>Информация к размышлению...</P>
</BODY>
</HTML> 

HTML позволяет авторам создавать документы, учитывающие особенности устройств, на которых будет отображаться HTML-документ. К таким устройствам относятся принтеры, проекторы, устройства, предназначенные для людей с ограниченными физическими возможностями и др. Для того, чтобы использовать разные таблицы стилей для различных устройств, используется атрибут media. По умолчанию, значением данного атрибута является screen (т.е. предполагается, что документ будет отображаться на экране монитора).

В описанном выше примере можно переопределить используемые цвета и размер шрифта, чтобы страница лучше выглядела при печати. Для этого можно добавить другой блок STYLE с атрибутом media со значением print, как показано ниже:

<STYLE type="text/css" media="print">
 body{
 background:#fff;
 color:#000;
 font-family: helvetica, arial, sans-serif;
 font-size:300%;
 }
</STYLE> 

Результат предыдущего примера представлен на рисунке 5.2, где применяется стиль с параметром media="screen". На рисунке 5.3 представлен результат предварительного просмотра той же страницы, однако при этом уже действует стиль для печати, заданный параметром media="print" .

Рис. 5.2.  Страница со стилем для просмотра на мониторе

Рис. 5.3.  Страница со стилем для вывода на печать

Элемент SCRIPT

Элемент SCRIPT предназначен для добавления так называемых клиентских сценариев - сценариев, которые выполняются браузером и написаны на языке JavaScript. JavaScript добавляет динамическое поведение в статические документы HTML, например, эффекты анимации, или проверку данных формы, или другие функции, которые запускаются, когда пользователь выполняет определенные действия.

Элемент SCRIPT может располагаться в заголовке или теле HTML-документа в неограниченном количестве. Когда браузер встречает такой сценарий, он прекращает разбор оставшегося документа, пока не выполнит код сценария. Поэтому, чтобы гарантировать, что код JavaScript будет доступен до загрузки основного документа, его необходимо поместить в раздел HEAD .

Например, можно предупредить посетителя с помощью следующего сценария, что определенная ссылка отправит его на другой сервер:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Пример использования элемента SCRIPT</TITLE>
 <SCRIPT>
 function crossing(){
 return confirm("Вы готовы перейти на другой сервер?")
 }
 </SCRIPT>
</HEAD>
<BODY>
 <A href="http://www.somewhere.com" onclick="return crossing()"> Ссылка на другой сервер </A>
</BODY>
</HTML> 

Если открыть этот пример в браузере и щелкнуть на ссылке, то код попросит подтвердить действие пользователя, как представлено на рисунке 5.4.

Рис. 5.4.  Пример использования элемента SCRIPT