Веб-студия. Создай сайт своими руками на HTML 4.0

7.5 Тело документа

7.5.1 Элемент `BODY`

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) - тело документа -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- документ загружен --
  onunload        %Script;   #IMPLIED  -- документ удален --
  >

Начальный тег: не обязателен, Конечный тег: не обязателен

Определения атрибутов

background = uri[CT]: Нежелателен. Значение этого атрибута - URI, указывающий на изображение. Это изображение является фоном (для визуальных браузеров).
text = color[CI]: Нежелателен. Этот атрибут устанавливает цвет текста (для визуальных браузеров).
link = color [CI]: Нежелателен. Этот атрибут устанавливает цвет текста гипертекстовых ссылок, по которым Вы не переходили (для визуальных браузеров).
vlink = color [CI]: Нежелателен. Этот атрибут устанавливает цвет текста ссылок, по которым Вы переходили (для визуальных браузеров).
alink = color [CI]: Нежелателен. Этот атрибут устанавливает цвет текста ссылок, когда они выбраны пользователем (для визуальных браузеров).

Атрибуты, определяемые в любом другом месте

id, class (идентификаторы в пределах документа)
lang (информация о языке), dir (направление текста)
title (заголовок элемента)
style (встроенная информация о стиле)
bgcolor (цвет фона)
onload, onunload (внутренние события)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

В теле документа располагается содержание документа. Содержимое может представляться агентом пользователя несколькими способами. Например, для визуальных браузеров Вы можете считать тело документа полотном, на котором отображается содержимое: текст, изображения, цвета, рисунки и т.д. Для аудиоагентов пользователей оно может произноситься. Поскольку предпочтительным способом задания представления документов теперь являются таблицы стилей, атрибуты представления в теге BODY являются нежелательными.

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем фрагменте кода HTML показано использование нежелательного атрибута. Он устанавливает белый цвет фона, черный цвет текста и красный цвет гиперссылок изначально, цвет фуксии при активизации ссылок и коричневый для ссылок, по которым Вы переходили.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
   "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Динамика популяции</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  ... тело документа...
</BODY>
</HTML>

Используя таблицы стилей, того же эффекта можно достичь следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Динамика популяции</TITLE>
 <STYLE type="text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  ... тело документа...
</BODY>
</HTML>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Динамика популяции</TITLE>
 <LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
  ... тело документа...
</BODY>
</HTML>

Кадры и тела документов HTML. В документах, содержащих кадры, элемент BODY заменяется элементом FRAMESET. Подробнее см. в разделе о кадрах.

7.5.2 Идентификаторы элементов: атрибуты `id` and `class`

Определения атрибутов

id = name [CS]: Этот атрибут назначает элементу имя. Имя в пределах документа должно быть уникальным.
class = cdata-list [CS]: Этот атрибут назначает элементу имя класса или набор имен классов. Одно и то же имя или имена классов могут быть назначены любому числу элементов. Несколько имен классов должны быть разделены пробелами.

Атрибут id назначает элементу уникальный идентификатор (который может проверяться синтаксическим анализатором SGML). Например, следующие абзацы распознаются по значениям их атрибутов id:

<P id="myparagraph"> Этот абзац имеет уникальное имя.</P>
<P id="yourparagraph"> Этот абзац тоже имеет уникальное имя.</P>

Атрибут id имеет в HTML несколько ролей:

Способ выбора таблицы стиля.
Назначение цели (якорь) для гипертекстовых ссылок.
Средство ссылки на определенный элемент сценария.
Имя объявленного объекта OBJECT.
В целях обработки агентами пользователей (например. для полей идентификации при извлечении данных из страниц HTML в базу данных, преобразовании документов HTML в другие форматы и т.д.).

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

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

Далее элемент exampleSPAN используется вместе с атрибутами id и class для пометки сообщений документа. Сообщения отображаются в английской и русской версиях.

<!-- английские сообщения -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN>

<!-- русские сообщений -->
<P><SPAN id="msg1" class="info" lang="fr">Переменная объявлена дважды</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Переменная не объявлена</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">Синтаксическая ошибка в имени переменной</SPAN>

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

SPAN.info    { color: green }
SPAN.warning { color: yellow }
SPAN.error   { color: red }

Помните, что русской "msg1" и английское "msg1" не могут отображаться в одном документе, поскольку они используют одно и то же значение атрибута id. Авторы могут извлечь дальнейшую пользу, используя атрибут id для усовершенствования представления отдельных сообщений, указания их в качестве целей (якорей) и т.д.

Почти каждому элементу HTML может быть назначен идентификатор и информация о классе.

Предположим, мы пишем документ о языке программирования. Этот документ должен включать ряд отформатированных примеров. Для форматирования примеров мы используем элемент PRE. Мы также назначаем цвет фона (зеленый) всем экземплярам элемента PRE, принадлежащим классу "example".

<HEAD>
<TITLE>... название документа...</TITLE>
<STYLE type="text/css">
PRE.example { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
...код примера...
</PRE>
</BODY>

Установив атрибут id для этого примера, мы можем (1) создать на него гиперссылку и (2) использовать информацию о стиле, отличную от определенной в таблицы, для одного экземпляра информации о стиле.

Примечание. Атрибут id использует одно пространство имен с атрибутом name, если он используется для имен якорей. Подробнее см. в разделе о якорях с id.

7.5.3 Элементы уровня блока и встроенные элементы

Некоторые элементы HTML, которые могут присутствовать внутри тега BODY, называются элементами "уровня блока", в то время как другие - "встроенными" (также называемыми элементами "уровня текста"). Разница между ними описана ниже:

Модель содержимого: Обычно элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока. Обычно встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию свойственна идея о том, что элементы блока создают "большие" структуры, чем встроенные элементы.
Форматирование: По умочланию элементы уровня блока форматируются иначе, чем встроенные элементы. Обычно элементы уровня блока начинаются с новой строки, а встроенные элементы - нет. Информацию о пробелах, переносах строки и форматировании блоков см. в разделе о тексте.
Направление: По техническим причинам, затрагивающим алгоритм двунаправленного текста [UNICODE], элементы уровня блока и встроенные элементы различаются способами наследования информации о направлении. Подробнее см. в разделе о наследовании направления текста.

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

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

7.5.4 Группировка элементов: элементы `DIV` и `SPAN`

<!ELEMENT DIV - - (%flow;)*            -- общий контейнер языка/стиля -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT SPAN - - (%inline;)*         -- общий контейнер языка/стиля -->
<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

href = uri [CT]: Этот атрибут указывает ресурс, предоставляющий дополнительную информацию о содержимом элемента DIV или SPAN.

Атрибуты, определяемые в любом другом месте

id, class (идентификаторы в пределах документа)
lang (информация о языке), dir (направление текста)
title (заголовок элемента)
style (встроенная информация о стиле information)
align (выравнивание)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста. Таким образом, авторы могут использовать эти элементы с таблицами стилей, атрибутами lang и т.д..

Предположим, Вы хотите сгенерировать документ в формате HTML на основе базы данных информации о клиентах. Поскольку HTML не включает элементов для идентификации таких объектов как "клиент", "номер телефона", "адрес электронной почты" и т.д., мы используем элементы DIV и SPAN для достижения нужных эффектов структуры и представления. Для структурирования информации мы могли использовать элемент TABLE следующим образом:

<!-- Пример данных из базы данных о клиентах: -->
<!-- Имя: Stephane Boyera, Тел.: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Информация о клиенте:</SPAN>
<TABLE class="client-data">
<TR><TH>Фамилия:<TD>Boyera</TR>
<TR><TH>Имя:<TD>Stephane</TR>
<TR><TH>Тел:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Информация о клиенте:</SPAN>
<TABLE class="client-data">
<TR><TH>Фамилия:<TD>Lafon</TR>
<TR><TH>Имя:<TD>Yves</TR>
<TR><TH>Тел:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

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

Другой пример см. в разделе об атрибутах class и id.

Визуальные агенты пользователей обычно помещают символ перевода строки перед и после элементов DIV, например:

<P>ааааааааа<DIV>ббббббббб</DIV><DIV>ввввв<P>ввввв</DIV>

что обычно генерируется как:

ааааааааа
ббббббббб
ввввв

ввввв

7.5.5 Заголовки: Элементы `H1`, `H2`, `H3`, `H4`, `H5`, `H6`

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  Существует шесть уровней заголовков - с H1 (наиболее важный) до H6 (наименее важный).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- заголовки -->
<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Начальный тег: обязателен, Конечный тег: обязателен

Атрибуты, определяемые в любом другом месте

id, class (идентификаторы в пределах документа)
lang (информация о языке), dir (направление текста)
title (заголовок элемента)
style (встроенная информация о стиле)
align (выравнивание)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Заголовок кратко описывает содержание раздела, которому он предшествует. Информация из заголовка может использоваться агентами пользователей, например, для автоматического построения оглавления документа.

В языке HTML существует шесть уровней заголовков: H1 - наиболее важный - и H6 - наименее важный. Визуальные браузеры обычно отображают более важные заголовки более крупным шрифтом.

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

<DIV class="section" id="forest-elephants" >
<H1>Лесные слоны</H1>
<P>В этом разделе мы обсуждаем менее известных лесных слонов.
...продолжение раздела...
<DIV class="subsection" id="forest-habitat" >
<H2>Ариал</H2>
<P>Лесные слоны не живут в деревьях, а среди них.
...продолжение раздела...
</DIV>
</DIV>

Эту структуру можно представить с использованием информации о стиле, например:

<HEAD>
<TITLE>... название документа ...</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

Пронумерованные разделы и ссылки
Язык HTML не генерирует номера разделов из заголовков. Это может выполняться агентами пользователей. Вскоре языки описания таблиц стилей, такие как CSS, предоставят авторам возможность управления генерацией номеров разделов (для удобства в ссылках в печатной документации, например "См. раздел 7.2").

Некоторые люди считают пропуск уровней заголовков дурным тоном. Они принимают порядок заголовков H1 H2 H1, но не принимают порядок H1 H3 H1, поскольку пропущен уровень H2.

7.5.6 Элемент `ADDRESS`

<!ELEMENT ADDRESS - - (%inline;)* -- информация об авторе -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Начальный тег: обязателен, Конечный тег: обязателен

Атрибуты, определяемые в любом другом месте

id, class (идентификаторы в пределах документ)
lang (информация о языке), dir (направление текста)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Элемент ADDRESS может использоваться авторами для указания контактной информации или основной части документа, такой как форма. Этот элемент часто находится в начале или в конце документа.

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

<ADDRESS>
<P><A href="../People/Raggett/">Dave Raggett</A>, 
   <A href="../People/Arnaud/">Arnaud Le Hors</A>, 
contact persons for the <A href="Activity">W3C HTML Activity</A><BR> 
$Date: 1997/12/16 05:38:14 $
</ADDRESS>

HTML 4.0

7.5 Тело документа

7.5.1 Элемент `BODY`

7.5.2 Идентификаторы элементов: атрибуты `id` and `class`

7.5.3 Элементы уровня блока и встроенные элементы

7.5.4 Группировка элементов: элементы `DIV` и `SPAN`

7.5.5 Заголовки: Элементы `H1`, `H2`, `H3`, `H4`, `H5`, `H6`

7.5.6 Элемент `ADDRESS`

МЕНЮ

Рекомендуем

HTML 4.0

7.5 Тело документа

7.5.1 Элемент BODY

7.5.2 Идентификаторы элементов: атрибуты id and class

7.5.3 Элементы уровня блока и встроенные элементы

7.5.4 Группировка элементов: элементы DIV и SPAN

7.5.5 Заголовки: Элементы H1, H2, H3, H4, H5, H6

7.5.6 Элемент ADDRESS

МЕНЮ

Рекомендуем

7.5.1 Элемент `BODY`

7.5.2 Идентификаторы элементов: атрибуты `id` and `class`

7.5.4 Группировка элементов: элементы `DIV` и `SPAN`

7.5.5 Заголовки: Элементы `H1`, `H2`, `H3`, `H4`, `H5`, `H6`

7.5.6 Элемент `ADDRESS`