2.2 Структура html-документа

HTML-документ – представляет собой контейнер, начинающийся с тега <HTML> и заканчивается тегом </HTML>. Также документ включает два вложенных контейнера: заголовка документа (HEAD) и тела документа (BODY). Таким образом любой документ на языке HTML имеет следующею базовую структуру предоставления информации:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title> название </title>

</head>

<body>

содержание документа

</body>

</html>

Рассмотрим основные теги подробнее.

2.2 Задание типа html-документа

Элемент <!DOCTYPE> предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML, похожий на HTML, но различающийся с ним по синтаксису. Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы. В таблице 2.2 приведены основные типы документов с их описанием.

Таблица 2.2 – Основные типы документов

DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>	Для всех документов.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

2.3 Основные элементы заголовка html-документа

К основным элементам HTML-разметки заголовка относятся:

1. HEAD (элемент разметки HEAD);

2. TITLE (заглавие документа);

3. BASE (базовый URL);

4. META (метаинформация);

5. LINK (общие ссылки);

6. STYLE (описатели стилей);

7. SCRIPT (скрипты).

Элемент разметки HEAD содержит заголовок HTML-документа. Данный элемент разметки не является обязательным. Атрибутов у тега нет.

TITLE служит для задания имени документу. Атрибутов у тега нет. Синтаксис контейнера TITLE в общем виде выглядит следующим образом:

<TITLE>название документа</TITLE>

Элемент <BASE> не выводит никакого контента и выполняет исключительно служебную функцию – позволяет указать базовый URL, относительно которого будут устанавливаться другие адреса, например, для изображений и ссылок. Также <base> задаёт значение атрибута target, которое по умолчанию применяется ко всем ссылкам.

Пример. Задание базового адреса для документа.

<html>

<head>

<meta charset="utf-8">

<title>Адреса</title>

<base href="http://htmlbook.ru/">

</head>

<body>

<p><img src="example/images/figure.jpg" alt=""></p>

<p><a href="example/1.html">Ссылка</a></p>

</body>

</html>

META определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег. Атрибуты :

• charset – Задает кодировку документа.

• content – Устанавливает значение атрибута, заданного с помощью name или http-equiv.

• http-equiv – Предназначен для конвертирования метатега в заголовок HTTP.

• name – Имя метатега, устанавливает его предназначение.

Возможные применения:

1. Если в заголовке HTTP-сообщения указать оператор refresh то по истечении заданного интервала времени (атрибут CONTENT) браузер загружает документ, определенный атрибутом URL данного оператора. Таким образом можно реализовывать смену страниц через заданный интервал времени (слайд-шоу) или обновление.

Пример. Загрузка документа Page1.html через 1 сек:

<META HTTP-EQUIV="Refresh" CONTENT="1; URL=Page1.html">

Обновление текущей страницы каждые 3 сек:

<META HTTP-EQUIV="Refresh" CONTENT="3" >

2. Если в заголовке HTTP-сообщения указать оператор Content-type, с помощью атрибута CHARSET можно задать типа кодировки документа, с атрибутом CONTENT тип документа.

Приме. Задание кодировки документа

<meta http-equiv="content-type" content="text/html; charset=utf-8">

3. Заголовок HTTP – Cache-Control позволят управлять кэшированием документа и хранением документа на стороне клиента.

Пример. Запрещение кэширования:

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

Запрещение хранение документа после пересылки:

<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">

Так же можно задать время последней модификации (Last-Modified) имеет смысл только для статических страниц или дату истечения актуальности документа (Expire).

4. Описание поискового образа документа. Описания документа используется два META-тега. Один определяет список ключевых слов (keywords), а второй – реферат (description) (краткое содержание документа), который отображается в качестве пояснения к ссылке на документ в отчете поисковой машины о выполненном запросе.

Пример. Описание поискового образа документа

<META NAME="description" http-equiv="description"

content=" Канал Eurosport: все о спорте в режиме online, новости спорта: футбол, хоккей, теннис, баскетбол, бокс; Eurosport;">

<META NAME="keywords" HTTP-EQUIV="keywords"

CONTENT=" спорт новости спорта канал весь спорт спортивные игры футбол бокс хоккей баскетбол все спорте eurosport евроспорт ">

При индексировании можно указывать одновременно и атрибут NAME, и атрибут HTTP-EQUIV с одинаковыми значениями. Это связано с тем, что одни роботы индексирования анализируют содержание META-элемента по атрибуту NAME, а другие – по атрибуту HTTP-EQUIV.

Элемент разметки LINK используется для загрузки CSS – стилевых таблиц. Более подробно будет рассмотрен в разделе о стилевых таблицах.

Пример. Загрузка стилей из файла style.css

<LINK REL=stylesheet href="../css/style.css" TYPE="text/css">

SCRIPT предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке (обычно JavaScript). Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Более подробно будет рассмотрен при изучении языка JavaScript. Синтаксис:

<script type="тип"> ...</script>

<script type="тип" src="URL"></script>

Пример. Загрузка скрипта из файла script.js

<SCRIPT TYPE="text/javascript" SRC=../js/script.js>