ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Спецификация HTML 4.01 | 7. Глобальная структура документа HTML

7. Глобальная структура документа HTML

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

7.5.1. Элемент BODY
7.5.2. Идентификаторы элементов: атрибуты id и 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

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- the document has been loaded --
  onunload        %Script;   #IMPLIED  -- the document has been removed --
  >

Начальный тег: факультативный, конечный тег: факультативный

Описание атрибутов

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

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

  • id, class
  • lang, dir
  • title
  • style
  • bgcolor
  • onload, onunload
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

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

УСТАРЕВАЮЩИЙ ПРИМЕР:

Следующий фрагмент HTML иллюстрирует использование устаревающих атрибутов. Он устанавливает цвет фона каркаса белым, цвет текста – черным, а цвет гиперссылки – сначала красный, при активизации - фуксиновый, и – коричнево-красный цвет после посещения.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>A study of population dynamics</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  ... document body...
</BODY>
</HTML>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>A study of population dynamics</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>
  ... document body...
</BODY>
</HTML>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>A study of population dynamics</TITLE>
 <LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
  ... document body...
</BODY>
</HTML>

Фреймы и тело HTML. Документы, которые содержат фреймы, заменяют элемент BODY на элемент FRAMESET. Обратитесь к разделу по фреймам для получения подробной информации.

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

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

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

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

<P id="myparagraph"> This is a uniquely named paragraph.</P>
<P id="yourparagraph"> This is also a uniquely named paragraph.</P>

Атрибут id играет в HTML следующие роли:

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

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

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

В следующем примере элемент SPAN используется вместе с атрибутами id и class для разметки сообщений документа. Сообщения появляются в двух версиях: на английском и французском языках.

<!-- English messages -->
<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>
<!-- French messages -->
<P><SPAN id="msg1" class="info" lang="fr">Variable déclarée deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Variable indéfinie</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour variable</SPAN>

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

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

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

Практически каждому элементу HTML можно присвоить идентификатор и информацию класса.

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

<HEAD>
<TITLE>... document title ...</TITLE>
<STYLE type="text/css">
PRE.example { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
...example code here...
</PRE>
</BODY>

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

Обратите внимание. Атрибут id занимает то же именное пространство, что и атрибут name, когда используется для имен якорей (anchor). Обратитесь к разделу по якорям с id для получения подробной информации.

7.5.3 Блочные и внутристрочные элементы

Определенные элементы HTML, которые могут входить в тело документа - BODY, называются "блочными" ("block-level"), в то же время другие – "внутристрочными" ("inline") (известные также как – "текстовые" ("text level")). Различие обнаруживается в следующем:

Модель содержания (Content model)
Обычно, блочные элементы могут содержать внутристрочные элементы и другие блочные элементы. Внутристрочные элементы могут содержать только данные и другие внутристрочные элементы. Характерным в этом структурном различие является идея, что блочные элементы создают структуры "больше", чем внутристрочные элементы.
Форматирование (Formatting)
По умолчанию, блочные и внутристрочные элементы форматируются различным образом. Обычно, блочные элементы начинаются с новой строки, а внутристрочные элементы нет. По поводу информации о пробелах, обрыве строки и блочного форматирования, обратитесь к разделу о тексте.
Направление текста (Directionality)
С технической точки зрения, касающейся алгоритма направления текста [UNICODE], блочные и внутристрочные элементы различаются в том, как они наследуют информацию о направлении текста. Для получения подробной информации обратитесь к разделу о наследовании направления текста.

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

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

7.5.4 Группирующие элементы: элементы DIV и SPAN

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT SPAN - - (%inline;)*         -- generic language/style container -->
<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

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

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

  • id, class
  • lang, dir
  • title
  • style
  • align
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

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

Предположим, например, что вы захотели бы сгенерировать HTML-документ, основанный на базе данных информации клиента. Поскольку HTML не включает элементы, которые идентифицируют объекты, такие как "client" ("клиент"), "telephone number" ("телефонный номер"), "email address" ("адрес электронной почты") и т.д., то мы используем DIV и SPAN для достижения желаемых структурных и презентационных эффектов. Мы могли бы использовать элемент TABLE для структурирования информации следующим образом:

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information: </SPAN>
<TABLE class="client-data">
<TR><TH>Last name: <TD>Boyera</TR>
<TR><TH>First name: <TD>Stephane</TR>
<TR><TH>Tel: <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">Client information: </SPAN>
<TABLE class="client-data">
<TR><TH>Last name: <TD>Lafon</TR>
<TR><TH>First name: <TD>Yves</TR>
<TR><TH>Tel: <TD>(617) 555-1212</TR>
<TR><TH>Email: <TD>yves@coucou.com</TR>
</TABLE>
</DIV>

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

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

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

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

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

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

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

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  There are six levels of headings from H1 (the most important)
  to H6 (the least important).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- heading -->
<!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>Forest elephants</H1>
<P>In this section, we discuss the lesser known forest elephants.
...this section continues...
<DIV class="subsection" id="forest-habitat" >
<H2>Habitat</H2>
<P>Forest elephants do not live in trees but among them.
...this subsection continues...
</DIV>
</DIV>

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

<HEAD>
<TITLE>... document 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, позволят авторам контролировать генерацию номеров разделов (что удобно для ссылок в напечатанных документах).

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

7.5.6 Элемент ADDRESS

<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

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

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

  • id, class
  • lang, dir
  • title
  • style
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

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

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

<ADDRESS>
<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: 1999/12/24 23:07:14 $
</ADDRESS>

← Назад | Вперед →
Copyright © 2006 -  aranea.ru