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

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

Информация о версии языка. Элемент <!doctype>.

Если рассмотреть любой HTML-документ, то определенные элементы в нем всегда можно найти. Правила хорошего тона советуют в первом элементе разместить информацию о версии языка, которую вы используете, чтобы браузер, отображающий Web-страницу, мог учесть особенности или ограничения этой версии. Рассматриваемый элемент имеет только открывающий тег <!doctype>, который начинается восклицательным знаком. В данном теге заключена информация о типе документа.

В версии HTML 4.01 есть ссылки на три вида документов:

  1. HTML 4.01 Strict — наиболее «правильная» версия, не поддерживающая отмененные элементы для форматирования текста. Элемент обычно имеет вид:
    <!doctype html public "-//W3C//DTD HTML4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    С указанного адреса браузер (в случае необходимости) может загрузить описание элементов данной версии языка. Часть, касающаяся адреса, может быть опущена. Аббревиатура DTD (Document Type Definition) означает «определение типа документа». Эта версия языка не поддерживает подокна-фреймы.
  2. HTML 4.01 Transitional — переходная версия языка, наиболее популярная в настоящее время. Подразумевается, что предыдущие требования к синтаксису смягчаются и поддерживаются страницы, написанные до появления стандарта HTML 4.0. Допустимы отмененные в современном языке элементы, например, <font>. В этом случае <!doctype> имеет вид:
    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
    Как и в предыдущем примере, может быть использован адрес документа:
    http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd
  3. HTML 4.01 Frameset — используется в том случае, если ваш документ включает фреймы. Записывается
    <!doctype html public "-//W3C//DTD HTML4.01 Frameset//EN">
    Адрес документа: http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd

Для XHTML разработчиками W3C установлено следующее описание языка.

XHTML 1.0 Strict — версия языка XHTML. Слово Strict означает, что синтаксис должен жестко подчиняться последним требованиям вышеупомянутой спецификации, то есть не должен содержать отмененных элементов или атрибутов и фреймов.

Элемент html.

Этот элемент служит признаком того, что перед нами Web-страница, или HTML-документ.Открывающий тег и закрывающий теги могут отсутствовать. Однако их использование является правилом хорошего тона. Все остальные элементы, кроме <!doctype>, помещаются внутрь контейнера <html>...</html> и служат его контентом.

Атрибуты:

  • version — не рекомендуемый атрибут, в котором описывается версия языка. Сейчас эта информация помещается в <!doctype>.
  • lang, dir — информация о языке и направленности текста.

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

Таким образом, минимальный документ должен иметь структуру

<html>
<head>
...служебная неотображаемая информация...
</head>
<body>
...воспроизводимое содержание документа...
</body>
</html>

Размещение контента. Элемент body.

В элементе <body> располагается та часть информации, которая должна быть воспроизведена, то есть содержимое.

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

Атрибуты:

  • bgcolor — задает цвет фона, значениями служат единицы определения цвета.
  • background — указывает URI графического файла, используемого в качестве фона на всей странице, не рекомендуемый.
  • text — определяет цвет текста на всей странице, не рекомендуемый.
  • link — задает цвет ссылок, не рекомендуемый.
  • vlink — задает цвет просмотренных ссылок, не рекомендуемый.
  • alink — задает цвет активных ссылок, на которых находится маркер в данный момент. Используется для подсветки ссылок во время выбора, не рекомендуемый.
  • bgproperties — может принимать единственное значение fixed. В этом случае фон не прокручивается вместе с текстом, а остается «привязанным» к экрану.
  • topmargin — задает в пикселях расстояние между окном и текстом сверху.
  • leftmargin — задает в пикселях расстояние между окном и текстом слева.
  • bottommargin — задает в пикселях расстояние между окном и текстом снизу.
  • rightmargin — задает в пикселях расстояние между окном и текстом справа.
  • scroll — устанавливает полосы прокрутки.
  • id — задает идентификатор элемента, который может применяться в различных целях, например, в качестве программной метки, чтобы программа смогла найти этот элемент среди множества других.
  • class — указывает на принадлежность элемента к классу элементов, имеющих аналогичные свойства. Например class="red_text".
  • lang — задает информацию о языке.
  • dir — определяет направление написания текста и данных в таблицах.
  • style — встроенная информация о стиле.
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onmousemove, onkeypress, onkeydown, onkeyup, onload, onunload — внутренние события.

Попробуем переписать нашу первую программу с учетом рассмотренных элементов.

Пример.

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
Hello, world!
</body>
</html>

Такой шаблон часто используется при создании новых документов.