|
aranea.ru || Спецификация HTML 4.01 | 7. Глобальная структура документа HTML
7. Глобальная структура документа HTML7.5. Тело документа7.5.1. Элемент BODY7.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 -- > Начальный тег: факультативный, конечный тег: факультативный Описание атрибутов
Атрибуты, определенные в другом месте
Тело включает содержание документа. Содержание может представляться устройством вывода различными способами. Например, для визуальных браузеров вы можете думать о теле, как о каркасе, где появляется содержание: текст, изображения, цвет, графика и т.д. Для аудио устройств вывода это же содержание проговаривается. Стилевые таблицы в настоящее время считаются более предпочтительным способом для определения представления документа, поэтому презентационные атрибуты в элементе 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 присваивает уникальный идентификатор элементу (который может быть проверен анализатором синтаксиса 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 следующие роли:
Атрибут 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")). Различие обнаруживается в следующем:
Стилевые таблицы предоставляют средство для определения визуализации произвольных элементов, включая и то, является ли элемент блочным или внутристрочным. В некоторых случаях, можно установить внутристрочный стиль для элементов списков, но, обычно, авторам не рекомендуется преодолевать обычную интерпретацию элементов 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 -- > Начальный тег: обязательный, конечный тег: обязательный Атрибуты, определенные в другом месте
Элементы 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 -- > Начальный тег: обязательный, конечный тег: обязательный Атрибуты, определенные в другом месте
Элемент заголовка кратко описывает тему раздела, который он вводит. Информация заголовка может использоваться устройствами вывода, например, для автоматического построения таблицы содержания для документа. В 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
|