Главная :: Веб разработка :: Учебник HTML :: Структура HTML документа
Plug&Pray

Структура HTML документа

Начнем со структуры HTML документа. В простом виде можно записать ее в следующем виде:

<html>

<head>
<!-- Заголовок документа -->
</head>

<body>
<!-- тело документа -->
</body>

</html>

Сохраняем документ под именем index.html и открываем его в браузере. Что мы видим? Ничего - пустая страница. Разберем этот пример и начнем ее заполнение.

Элементы HTML представляют собой теги. Теги - это ключевые слова, заключенные в угловые скобки. Теги могут быть одинарными (например, горизонтальная черта <hr>) или парными. Во втором случае элемент состоит из открывающегося тега (например, <html>) и закрывающегося тега (</html>). Действие элемента распространяется на область между открывающимся и закрывающимся тегом.

Весь гипертекстовый документ заключается внутри элемента html (т.е. между <html> и </html>). Внутри этого элемента содержится еще два элемента - заголовок документа (элемент head), который содержит служебную информацию о документе и тело документа (элемент <body>), которое содержит информацию отображаемую в окне браузера.

Приведенной структуры достаточно для создания простых HTML документов для личных целей, но она не удовлетворяет стандарту. Главная ошибка заключается в том, что не указан в каком стандарте представлен документ. Стандарт прописывается первой строкой до тега <html>. Посмотрим какие основные стандарты существуют.

Для HTML 4.01

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

Для XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Для XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Strict, Transitional, Frameset - означают строгую (верстка не должна содержать отклонений от стандарта) спецификацию, переходную (ошибки игнорируются, для чайников) и для сайтов использующих фреймы (а такие еще есть?). Указание типа документа чувствительно к регистру, поэтому лучше ее копировать из приведенных здесь примеров для избежания ошибок.

Существуют и другие стандарты, для создания шаблона остановимся на первой из списка (мы легко сможете модифицировать шаблон под свой тип документа).

Перейдем к разделу заголовка. В нем указывается заголовок страницы (элемент title), META-данные и другая служебная информация. Здесь мы остановимся только на заголовке, остальные элементы рассмотрим в соответствующих темах (отметим только два элемента, отвечающих за кодировку и CSS).

Добавим внутри элемента head строку <title>Структура документа</title> и откроем страницу в браузере. В верхней верхней строке браузера мы видет то, что указали внутри элемента title. Кроме того, эта информация используется браузером для обозначения ссылок, когда вы добавляете страницу в закладки.

Для правильного отображения страницы мы должны задать в какой кодировке написан наш документ. Для этого добавляет строку

<meta http-equiv="content-type" content="text/html;charset=windows-1251" />

Здесь мы указываем стандартную виндоуз-кодировку windows-1251. Конечно, указать это мало, необходимо, чтобы сам документ был набран в этой кодировке. Также стандартной является кодировка utf-8 (уникод, поддерживает расширенный набор символов).

Так же укажем формат для каскадных таблиц стилей с помощью строки

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

Тело документа (элемент body) содержит визуальную информацию, т.е. ту, что будет непосредственно отображаться в окне браузера. Добавим строчку "Код документа содержит правильную структуру".

Итак, окончательный строгий вариант (который мы можем использовать в качестве шаблона для других документов) следующий:

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

<html>

<head>
<!-- Заголовок документа -->
   <title>Структура документа</title>
   <meta http-equiv="content-type"
      content="text/html;charset=windows-1251" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>
<!-- тело документа -->
Код документа содержит правильную структуру
</body>

</html>

В итоге мы получили шаблон документа для выбранного нами стандарта.

Ссылки

Автор: Ильдар Насибуллаев