Спецификация языка HTML

         

Глобальные схемы именования объектов


Размещение реализации объекта задаётся в URI. Как мы уже видели во введении в URI, первый сегмент абсолютного URI специфицирует схему именования, используемую для передачи данных, указанных в URI. Для документов HTML эта схема, чаще всего, "http". Некоторые аплеты могут применять другие схемы именования. Например, при спецификации аплета Java, авторы могут использовать URI, начинающиеся с "java", а для аплетов ActiveX - использовать "clsid".

В следующем примере мы вставляем аплет Java в документ HTML:

<P><OBJECT classid="java:program.start"> </OBJECT>

При установленном атрибуте codetype, ПА может решить, запрашивать ли приложение Java, на основе его (ПА) способности выполнить аплет.

<OBJECT codetype="application/java-archive" classid="java:program.start"> </OBJECT>

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

<OBJECT codetype="application/java-archive" classid="java:program.start"> codebase="http://foooo.bar.com/java/myimplementation/" </OBJECT>

В следующем примере специфицирован (в атрибуте classid) объект ActiveX в URI, начинающемся со схемы именования "clsid". Атрибут data локализует данные для отображения ("часы").

<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="http://www.acme.com/ole/clock.stm"> Это приложение не поддерживается. </OBJECT>



Инициализация объекта: элемент PARAM


<!ELEMENT PARAM - O EMPTY -- именованное значение свойства --> <!ATTLIST PARAM id ID #ПРЕДПОЛАГАЕТСЯ -- уникальный id документа -- name CDATA #НЕОБХОДИМ -- имя свойства -- value CDATA #ПРЕДПОЛАГАЕТСЯ -- значение свойства -- valuetype (DATA|REF|OBJECT) DATA -- как интерпретировать значение -- type %ContentType; #ПРЕДПОЛАГАЕТСЯ -- тип содержимого для значения, если valuetype=ref -- > Начальный тег: необходим, Конечный тег: запрещён

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

name = cdata

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

value = cdata

Определяет значение параметра этапа выполнения, специфицированного в name. Значение свойства не важно для HTML; эти значения определяются объектом при запросе.

valuetype = data|ref|object [CI]

Специфицирует тип атрибута value. Возможные значения:

data: Значение по умолчанию. Означает, что определённое в value значение будет вычислено и передано в реализацию объекта как строка.ref: Значением value является URI, указывающий на ресурс, где хранятся значения этапа выполнения. Это позволяет поддерживать утилиты идентификации URI, заданного в качестве параметра. URI должен быть передан объекту как есть, т.е. без обработки.object: Значением value является идентификатор, ссылающийся на объявление OBJECT в этом же документе. Идентификатор должен быть значением атрибута id, установленного для объявленного элемента OBJECT.

type = content-type [CI]

Этот атрибут определяет тип содержимого ресурса, на который указывает атрибут value, только в том случае, когда valuetype установлен в "ref". Этот атрибут, таким образом, устанавливает для ПА тип значений, которые будут найдены по URI, указанному в value.

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

id (идентификатор документа)

Элементы PARAM определяют набор значений, которые могут потребоваться объекту на этапе выполнения. Элементы PARAM могут появляться в содержимом элементов OBJECT или APPLET в любом количестве, в любом порядке, но должны размещаться в начале содержимого элементов OBJECT или APPLET.

Синтаксис имён и значений должен быть понятен в данной реализации объекта. Данный документ не определяет ни то, как ПА должны запрашивать пары имя/значение, ни то, как ПА должны интерпретировать имена параметров, которые появляются дважды.

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

предположим, что аплет может принять два параметра этапа выполнения, определяющих его начальные ширину и высоту. Мы можем установить начальные размеры 40x40 пикселов с помощью двух элементов PARAM.


<P><OBJECT classid="http://www.miamachina.it/analogclock.py"> <PARAM name="height" value="40" valuetype="data"> <PARAM name="width" value="40" valuetype="data"> This user agent cannot render Python applications. </OBJECT>

В следующем примере, данные этапа выполнения для параметра "Init_values" определены как внешний ресурс (файл GIF). Значение атрибута valuetype, таким образом, установлено в "ref", а value - это URI, указывающий на ресурс.

<P><OBJECT classid="http://www.gifstuff.com/gifappli" standby="Loading Elvis..."> <PARAM name="Init_values" value="./images/elvis.gif"> valuetype="ref"> </OBJECT>

Обратите внимание, что мы установили также атрибут standby для того, чтобы ПА мог отобразить сообщение, пока загружается механизм представления.

Если элемент OBJECT отображён, ПА должен искать содержимое только тех элементов PARAM, которые являются прямыми потомками и "снабдить" ими OBJECT.

Так, в следующем примере, если "obj1" отображён, "param1" применяется к "obj1" (а не к "obj2"). Если "obj1" не отображён, а "obj2" отображён, "param1" игнорируется, а "param2" применяется к "obj2". Если ни один OBJECT не отображён, ни один PARAM не применяется.



<P> <OBJECT id="obj1"> <PARAM name="param1"> <OBJECT id="obj2"> <PARAM name="param2"> </OBJECT> </OBJECT>


Как установить альтернативный текст


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

alt = text [CS]

Для ПА, которые не могут выводить изображения, формы или аплеты, этот атрибут определяет альтернативный текст. Язык альтернативного текста определяется атрибутом lang.

Некоторые нетекстовые элементы (IMG, AREA, APPLET и INPUT) позволяют авторам вводить альтернативный текст, служащий содержимым в тех случаях, когда элемент не может быть отображён нормально.

Установка альтернативного текста помогает пользователям без графических дисплеев, пользователям, чьи браузеры не поддерживают формы, пользователям с дефектами зрения, тем, кто использует голосовые синтезаторы, тем, кто настроил свои графические ПА так, чтобы не показывать изображения и т.д.

Атрибут alt должен быть определён для элементов IMG и AREA. Он не обязателен для элементов INPUT и APPLET.

Поскольку альтернативный текст может оказать существенную помощь, он должен быть определён очень тщательно. Авторы должны руководствоваться следующим:

Не определяйте не относящийся к делу альтернативный текст при включении изображений, предназначенных для форматирования страницы, например, alt="red ball" не подойдёт для изображения, которое добавляет красные мячи для декорирования заголовка или параграфа. В этом случае альтернативный текст должен быть пустой строкой (""). В любом случае авторам не стоит использовать изображения для форматирования страниц. Вместо этого нужно использовать таблицы стилей.Не указывайте бессмысленный альтернативный текст (напр., "пустой текст"). Это не только дезориентирует пользователей, но и замедляет работу ПА, которые должны конвертировать текст для речевого или брайль-вывода.

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



Карты изображений


Карты изображений позволяют авторам специфицировать регионы/области изображения или объекта и назначать отдельное действие каждому региону (напр., запросить документ, запустить программу и т.п.). Если регион активируется пользователем, действие запускается на выполнение.

Карта изображений (image map) создаётся путём ассоциирования объекта со спецификацией сенситивного геометрического региона на объекте.

Существуют карты двух типов:

Клиентские\на стороне клиента (Client-side). Если пользователь активирует мышью регион клиентской карты, координаты щелчка (в пикселах) интерпретируются ПА. ПА выбирает ссылку, определённую для данного региона, и переходит по ней.Серверные\На стороне сервера (Server-side). Если пользователь активирует мышью регион серверной карты, координаты щелчка (в пикселах) пересылаются на сервер агенту, определённому атрибутом href элемента A. Агент на сервере интерпретирует координаты и выполняет некоторое действие.

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



Клиентские карты изображений: элементы MAP и AREA


<!ELEMENT MAP - - ((%block;) | AREA)+ -- клиентская карта изображений --> <!ATTLIST MAP %attrs; -- %coreattrs, %i18n, %events -- name CDATA #НЕОБХОДИМ -- для ссылок usemap -- > Начальный тег: необходим, Конечный тег: необходим

<!ELEMENT AREA - O EMPTY -- регион клиентской карты --> <!ATTLIST AREA %attrs; -- %coreattrs, %i18n, %events -- shape %Shape; rect -- управляет интерпретацией coords -- coords %Coords; #ПРЕДПОЛАГАЕТСЯ -- список разделённых запятыми размеров -- href %URI; #ПРЕДПОЛАГАЕТСЯ -- URI связанного ресурса -- nohref (nohref) #ПРЕДПОЛАГАЕТСЯ -- этот регион не имеет action -- alt %Text; #НЕОБХОДИМ -- краткое описание -- tabindex NUMBER #ПРЕДПОЛАГАЕТСЯ -- позиция в порядке табуляции -- accesskey %Character; #ПРЕДПОЛАГАЕТСЯ -- символ быстрого доступа -- onfocus %Script; #ПРЕДПОЛАГАЕТСЯ -- элемент получил фокус -- onblur %Script; #ПРЕДПОЛАГАЕТСЯ -- элемент потерял фокус -- > Начальный тег: необходим, Конечный тег: запрещён

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

name = cdata [CI]

Назначает имя карте изображений, определённой элементом MAP.

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

shape = default|rect|circle|poly [CI]

Этот атрибут определяет границы региона. Возможные значения:

default: весь регион;rect: прямоугольный регион;circle: круглый регион;poly: многоугольный регион.

coords = coordinates [CN]

Определяет позицию на экране и очертания. Количество и порядок значений зависят от определяемой фигуры. Возможные сочетания:

rect: left-x, top-y, right-x, bottom-y.

circle: center-x, center-y, radius.

Примечание. Если значение radius - в процентах, ПА должны вычислять окончательное значение радиуса на базе ширины и высоты ассоциированного объекта. Значение радиуса должно быть меньше 2.

poly: x1, y1, x2, y2, ..., xN, yN. Первая пара координат x и y и последняя должны бить одинаковыми, чтобы "закрыть" многоугольник. Если эти значения не одинаковы, ПА должен вычислить дополнительную пару координат, чтобы закрыть многоугольник.

Координаты относительны к верхнему левому углу объекта. Все значения являются размерами. Все значения разделены запятыми.

nohref [CI]

Если установлен этот булев атрибут, то он указывает, что регион не имеет ассоциированной гиперссылки.

Атрибут для ассоциирования карты с элементом

usemap = uri [CT]

Ассоциирует карту с элементом. Карта изображений определяется элементом MAP. Значение usemap должно совпадать со значением атрибута name ассоциированного элемента MAP.

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

id, class (идентификаторы документа)lang (язык), dir (направление текста)title (заголовок элемента)style (инлайн-стиль)name (отправка объектов с формой)alt (альтернативный текст)href (ссылка-якорь), target (целевой фрэйм)tabindex (навигация табуляцией)accesskey (символ быстрого доступа)shape (карты изображений)onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur (внутренние события)


Элемент MAP определяет клиентскую карту (или другой механизм навигации), который может быть ассоциирован с другими элементами (IMG, OBJECT или INPUT). Карта ассоциируется с элементом посредством атрибута usemap. Элемент MAP может использоваться без ассоциированного изображения для механизмов общей навигации.

Наличие атрибута usemap в элементе OBJECT подразумевает, что включаемый объект - это изображение. Кроме того, если элемент OBJECT имеет ассоциированную клиентскую карту, ПА могут выполнять взаимодействие с пользователем через OBJECT, только в понятиях клиентской карты. Это позволяет ПА (таким как аудиобраузер или робот) взаимодействовать с OBJECT без его выполнения (прогона); ПА может даже избрать вариант - не запрашивать (или не исполнять) объект. Если OBJECT имеет ассоциированную карту изображений, авторы не могут рассчитывать, что объект будет запрошен или выполнен любым ПА.

Модель содержимого элемента MAP позволяет авторам комбинировать:

Один или более элементов AREA. Эти элементы не имеют содержимого, но определяют геометрические регионы карты изображений и гиперссылки, ассоциированные с каждым регионом. Заметьте, что ПА обычно не отображают элементы AREA. Поэтому авторы должны предоставлять альтернативный текст для каждого AREA в атрибуте alt (см. ниже как определить альтернативный текст). Содержимое уровня блока. Это содержимое должно включать элементы A, которые специфицируют геометрические регионы карты и ссылки, ассоциированные с каждым регионом. Обратите внимание, что ПА должен отображать содержимое уровня блока элемента MAP. Авторы должны использовать этот метод для создания более доступных документов.

Если элемент MAP имеет смешанное содержимое (элементов AREA и содержимое уровня блока), ПА должны игнорировать элементы AREA.

Авторы должны специфицировать геометрию карты изображений полностью элементами AREA, полностью элементами A или полностью теми и другими, если содержимое смешанное. Авторы могут смешивать содержимое так, чтобы старые ПА обрабатывали очертания карт, определённые элементами AREA, а новые ПА использовали преимущества содержимого уровня блоков.

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

ПА и авторы должны предоставлять текстовую альтернативу графической карте для тех случаев, когда графика недоступна или пользователь не может её получить. Например, ПА могут использовать текст из alt для создания текстовых ссылок вместо графической карты изображений. Такие ссылки могут быть активированы разными способами (с клавиатуры, голосом и т.д.).

Примечание. MAP не имеет обратной совместимости с ПА HTML 2.0.


Объявление и размещение объектов


Предыдущие примеры иллюстрировали только изолированные определения объектов. Если документ содержит более чем одну инстанцию (сущность, объект) одного и того же объекта, можно разделить объявление объекта и его инстанции. Такой подход даёт определённые преимущества:

Данные могут быть запрошены ПА из сети только один раз (при объявлении) и повторно использоваться для каждой инстанции.Можно размещать инстанции из другого места, например, из гиперссылки.Можно определять объекты как данные этапа выполнения других объектов.

Для объявления объекта так, чтобы он не исполнялся после считывания ПА, установите булев атрибут declare элемента OBJECT.

Одновременно авторы должны идентифицировать объявление установкой уникального значения атрибута id элемента OBJECT. Последующие инстанции этого объекта будут ссылаться на этот идентификатор.

Объявленный OBJECT должен появиться до первой инстанции этого OBJECT.

Объект, объявленный с атрибутом declare, размещается каждый раз, когда элемент, который ссылается на этот объект, запрашивает его (объект) для отображения (напр., гиперссылка, ссылающаяся на него, активирована, объект, ссылающийся на него, активирован и т.д.).

В следующем примере мы объявляем OBJECT и размещаем его вызовом из гиперссылки. Таким образом, объект может быть активирован щелчком на выделенном тексте, например:

<P><OBJECT declare id="earth.declaration" data="TheEarth.mpeg" type="application/mpeg"> <STRONG>Земля</STRONG> - вид из космоса. </OBJECT> ...позже в документе... <P>Вот <A href="#earth.declaration"> анимация Earth!</A>

Следующий пример иллюстрирует, как специфицировать значения этапа выполнения, которые являются другими объектами. Здесь мы посылаем текст (стих) гипотетическому механизму просмотра стихов. Объект распознаёт параметр этапа выполнения под названием "font" (для отображения текста стиха определённым шрифтом). Значение этого параметра само по себе является объектом, которое вставляет (но не отображает) объект шрифта. Соотношение между объектом font и объектом просмотра стиха достигается путём

установки id "tribune" в объявлении объекта font иссылкой на него из элемента PARAM объекта просмотра стиха (с помощью valuetype и value).

<P><OBJECT declare id="tribune" type="application/x-webfont" data="tribune.gif"> </OBJECT> ...здесь просматривается KublaKhan.txt... <P><OBJECT classid="http://foo.bar.com/poem_viewer" data="KublaKhan.txt"> <PARAM name="font" valuetype="object" value="#tribune"> <P>You're missing a really cool poem viewer ... </OBJECT>

ПА, не поддерживающие атрибут declare, должны отображать содержимое объявления OBJECT.



Общая вставка: элемент OBJECT


<!ELEMENT OBJECT - - (PARAM | %flow;)* -- общий внедрённый объект --> <!ATTLIST OBJECT %attrs; -- %coreattrs, %i18n, %events -- declare (declare) #ПРЕДПОЛАГАЕТСЯ -- объявляет, но не устанавливает флаг -- classid %URI; #ПРЕДПОЛАГАЕТСЯ -- идентифицирует класс -- codebase %URI; #ПРЕДПОЛАГАЕТСЯ -- базовый URI для classid, data, archive-- data %URI; #ПРЕДПОЛАГАЕТСЯ -- ссылка на данные объекта -- type %ContentType; #ПРЕДПОЛАГАЕТСЯ -- тип содержимого данных -- codetype %ContentType; #ПРЕДПОЛАГАЕТСЯ -- тип содержимого кода -- archive CDATA #ПРЕДПОЛАГАЕТСЯ -- список разделённых пробелами URI -- standby %Text; #ПРЕДПОЛАГАЕТСЯ -- сообщение для показа во время загрузки -- height %Length; #ПРЕДПОЛАГАЕТСЯ -- переопределить высоту -- width %Length; #ПРЕДПОЛАГАЕТСЯ -- переопределить ширину -- usemap %URI; #ПРЕДПОЛАГАЕТСЯ -- использовать клиентские карты -- name CDATA #ПРЕДПОЛАГАЕТСЯ -- отправить как часть формы -- tabindex NUMBER #ПРЕДПОЛАГАЕТСЯ -- позиция в порядке табуляции -- > Начальный тег: необходим, Конечный тег: необходим

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

classid = uri [CT]

Этот атрибут может использоваться для определения размещения класса объекта посредством URI. Может использоваться вместе с- или как альтернатива атрибуту data, в зависимости от типа объекта.

codebase = uri [CT]

Определяет базовый путь, используемый для разрешения относительных URI, специфицированных атрибутами classid, data и archive. При отсутствии, значением по умолчанию является базовый URI текущего документа.

codetype = content-type [CI]

Этот атрибут специфицирует тип содержимого данных, ожидаемых при загрузке объекта, определённого атрибутом classid. Этот атрибут не обязателен, но рекомендуется, если classid определён, поскольку он позволяет ПА избежать загрузки информации с неподдерживаемыми типами содержимого. При отсутствии, по умолчанию принимается значение атрибута type.

data = uri [CT]

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

type = content-type [CI]

Этот атрибут специфицирует тип содержимого данных, определённых в data. Атрибут не обязателен, но рекомендуется, если data определён, поскольку он позволяет ПА избежать загрузки информации с неподдерживаемыми типами содержимого. Если значение этого атрибута отличается от HTTP Content-Type, возвращённого сервером после запроса объекта, HTTP Content-Type имеет приоритет.

archive = uri-list [CT]

Этот атрибут может использоваться для определения разделённого пробелами списка URI для архивов, содержащих ресурсы, относящиеся к объекту, который (список) может включать ресурсы, определённые атрибутами classid и data. Предварительная загрузка архивов как правило уменьшает время загрузки объектов. Архивы, определённые как относительные URI, должны интерпретироваться относительно атрибута codebase.

declare [CI]

Если установлен, этот булев атрибут делает определение текущего OBJECT только объявлением. Объект должен быть установлен последующим определением OBJECT, ссылающимся на это объявление.

standby = text [CS]

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

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

id, class (идентификаторы документа)lang (язык), dir (направление текста)title (заголовок элемента)style (инлайн-стиль)onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)tabindex (навигация табуляцией)usemap (клиентские карты изображений)name (отправка формы)align, width, height, border, hspace, vspace (визуальное представление объектов, изображений и аплетов)


Большинство ПА имеют встроенные механизмы для отображения данных обычных типов, таких как рисунки GIF, цвета, шрифты и небольшое количество графических элементов. Чтобы иметь возможность отображать данные, изначально не поддерживаемые, ПА обычно запускают внешние приложения. Элемент OBJECT позволяет авторам контролировать, должны ли данные просматриваться независимо (вне ПА) или программой определённой автором для просмотра внутри ПА.

В самом общем случае, автору необходимо специфицировать три типа информации:

Реализацию (класс) включённого объекта. Например, если включаемый объект - это аплет "часы", автор должен указать, где находится исполняемый код аплета.Данные для отображения, например, если включаемый объект - это программа, отображающая данные шрифтов, автор должен указать, где находятся эти данные.Дополнительные значения, необходимые для объекта на этапе выполнения. Например, некоторым аплетам требуются начальные значения параметров.

Элемент OBJECT позволяет авторам специфицировать данные всех трёх типов, но не всегда необходимо определять все три. Например, некоторым объектам не нужны данные (аплет, выполняющий небольшую анимацию). Другие не требуют инициализации при выполнении. Наконец, третьи могут не требовать дополнительной информации о выполнении, т.е. ПА может уже сам "знать", как отображать данные такого типа (напр., рисунки GIF).

Авторы определяют реализацию объекта и размещение данных, отображаемых элементом OBJECT. Чтобы определить значения времени выполнения, авторы используют элемент PARAM, который рассматривается в разделе инициализация объекта.

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

См. раздел элементы управления (ЭУ) формы об элементе OBJECT в формах.

Этот документ не специфицирует поведение элементов OBJECT, использующих как атрибут classid для идентификации реализации, так и атрибут data для определения данных для этой реализации. Чтобы обеспечить переносимость, авторы должны использовать элемент PARAM для того, чтобы сообщить в реализацию, где находятся дополнительные данные.


Правила представления объектов


ПА должны интерпретировать элемент OBJECT в соответствии с со следующими правилами приоритета:

ПА должен сначала попытаться отобразить объект. Он не должен отображать содержимое элементов, но обязан проверить элементы на предмет наличия каких-либо прямых потомков, которые являются элементами PARAM (см. инициализация объекта) или элементами MAP (см. клиентские карты изображений).Если ПА не может по каким-либо причинам отобразить объект (не сконфигурирован, недостаточно ресурсов, неверная архитектура и т.д.), он обязан попытаться отобразить его (объекта) содержимое.

Авторы не должны включать содержимое в элементы OBJECT, появляющиеся в элементе HEAD.

В следующем примере мы вставляем аплет аналоговых часов в документ посредством элемента OBJECT. Аплет, написанный на языке Python, не требует дополнительных данных или значений для этапа выполнения. Атрибут classid определяет размещение аплета:

<P><OBJECT classid="http://www.miamachina.it/analogclock.py"> </OBJECT>

Обратите внимание, что часы будут отображены сразу, как только ПА интерпретирует это объявление OBJECT. Можно отсрочить отображение объекта, первоначально объявив его (описано ниже).

Авторы должны дополнить это объявление включением альтернативного текста как содержимого OBJECT на тот случай, если ПА не сможет отобразить часы.

<P><OBJECT classid="http://www.miamachina.it/analogclock.py"> An animated clock. </OBJECT>

Важным следствием дизайна элементов OBJECT является то, что он предоставляет механизм альтернативного представления объектов; каждое объявление внедрённого OBJECT может специфицировать альтернативные типы содержимого. Если ПА не может отобразить наиболее удалённые OBJECT, он пытается отобразить содержимое, которое может быть другим элементом OBJECT и т.д.

В следующем примере мы внедряем несколько объявлений OBJECT, чтобы проиллюстрировать, как работают альтернативные представления.

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

аплет Earth, написанный на языке Python,MPEG-анимацию Earth,GIF-рисунок Earth,альтернативный текст.


<P> <!-- Сначала пытается выполнить аплет Python --> <OBJECT title="The Earth as seen from space" classid="http://www.observer.mars/TheEarth.py"> <!-- В противном случае, MPEG video --> <OBJECT data="TheEarth.mpeg" type="application/mpeg"> <!-- В противном случае, рисунок GIF --> <OBJECT data="TheEarth.gif" type="image/gif"> <!-- В противном случае отображает текст --> The <STRONG>Earth</STRONG> as seen from space. </OBJECT> </OBJECT> </OBJECT>

Самое внешнее объявление специфицирует аплет, который не требует дополнительных данных или начальных значений. Второе объявление специфицирует анимацию MPEG и, поскольку не определяется размещение программы обработки MPEG, обращается к ПА для обработки анимации. Мы также установили атрибут type, чтобы ПА, "знающий", что он не может обработать MPEG, не загружал "TheEarth.mpeg" из сети.

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

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

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

<P> <OBJECT id="clock1" classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="data:application/x-oleobject;base64, ...base64 data..."> A clock. </OBJECT>

Информацию о размере объекта, выравнивании и рамках см. в визуальном представлении объектов, изображений и аплетов.


Примеры клиентских карт


В следующем примере мы создаём клиентскую карту для элемента OBJECT.

Мы не хотим отображать содержимое карты при отображении элемента OBJECT, поэтому мы "прячем" элемент MAP внутри содержимого элемента OBJECT. Следовательно, содержимое элемента MAP будет отображаться, только если OBJECT не может быть отображён.

<HTML> <HEAD> <TITLE>The cool site!</TITLE> </HEAD> <BODY> <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A> </MAP> </OBJECT> </BODY> </HTML>

Нам может понадобиться отображать содержимое карты даже тогда, когда ПА может отображать OBJECT. Например, нам нужно ассоциировать карту с элементом OBJECT и вставить текстовую навигационную панель внизу страницы. Для этого мы определяем элемент MAP вне OBJECT:

<HTML> <HEAD> <TITLE>The cool site!</TITLE> </HEAD> <BODY> <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> </OBJECT>

...остальная часть страницы...

<MAP name="map1"> <P>Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A> </MAP> </BODY> </HTML>


В это примере мы создаём похожую карту, используя на этот раз элемент AREA. Обратите внимание на использование текста alt:
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <P>Это панель навигации. </OBJECT>
<MAP name="map1"> <AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28"> <AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28"> <AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60"> <AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"> </MAP>
Сходная версия с использованием элемента IMG вместо OBJECT (с тем же объявлением MAP):
<P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">
Следующий пример иллюстрирует, как карты изображений могут использоваться совместно (shared).
Вложенные элементы OBJECT используются, если ПА не поддерживают определённые форматы. Например:
<P> <OBJECT data="navbar.png" type="image/png"> <OBJECT data="navbar.gif" type="image/gif"> ...текст, описывающий изображение... </OBJECT> </OBJECT>
Если ПА не поддерживает формат PNG, он пытается отобразить рисунок GIF. Если GIF не поддерживается (напр., в голосовых ПА), отображается текстовое описание, предоставленное как содержимое внутреннего элемента OBJECT. Если элементы OBJECT вложены таким образом, авторы могут разделять изображение между ними:
<P> <OBJECT data="navbar.png" type="image/png" usemap="#map1"> <OBJECT data="navbar.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A> </MAP> </OBJECT> </OBJECT>
Следующий пример показывает, как определить якоря для создания неактивных зон внутри карты изображений. Первый якорь определяет маленький круглый регион без ассоциированной гиперссылки. Второй якорь определяет более крупный круглый регион с тем же центром координат. При их соединении образовался круг с неактивной средней частью и активным краем. Важен порядок определения якорей, поскольку малый круг должен перекрывать большой.
<MAP name="map1"> <P> <A shape="circle" coords="100,200,50">I'm inactive.</A> <A href="outer-ring-link.html" shape="circle" coords="100,200,250">I'm active.</A> </MAP>
Подобным же образом атрибут nohref элемента AREA объявляет, что данный геометрический регион не имеет ассоциированной гиперссылки.

Рамки


Изображение или объект могут быть окружены рамкой (напр., если рамка определена пользователем или если изображение является содержимым элемента A).

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

border = pixels [CN]

Не рекомендуется. Определяет в пикселах ширину рамки вокруг IMG или OBJECT. Значение по умолчанию зависит от ПА.



Серверные (на стороне сервера) карты изображений


Серверные карты могут представлять интерес в тех случаях, когда карта слишком сложна, чтобы работать как карта на стороне клиента.

Можно определить серверные карты только для элементов IMG и INPUT.

IMG должен находиться внутри элемента A, а булев атрибут ismap ([CI]) должен быть установлен.

INPUT должен быть типа "image".

Когда пользователь активирует ссылку щелчком на изображении, координаты экрана передаются непосредственно тому серверу, где находится документ. Значения координат экрана выражены в пикселах относительно изображения. Нормативную информацию об определении пикселов и о том, как их обсчитывать, см. в [CSS1].

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

<P><A href="http://www.acme.com/cgi-bin/competition"> <IMG src="game.gif" ismap alt="target"></A>

Точка щелчка предаётся на сервер так: ПА устанавливает новый URI из URI, определённого атрибутом href в элементе A, присоединением '?' с последующими координатами x и y, разделёнными запятыми. Теперь переход осуществляется по новому URI. Например, в предыдущем отрывке, если пользователь щёлкнул в точке x=10, y=27, тогда новый URI будет "http://www.acme.com/cgi-bin/competition?10,27".

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



Ширина и высота


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

width = length [CN]

Переопределяет ширину изображения и объекта.

height = length [CN]

Переопределяет высоту изображения и объекта.

Если установлены, атрибуты width и height сообщают ПА, что нужно переопределить натуральные размеры изображения или объекта новыми значениями.

Если объектом является изображение, оно может быть обсчитано. ПА должны обсчитывать объект или изображение для установки ширины и высоты, специфицированных автором. Напоминаем, что размеры, выраженные в процентах, базируются на доступном вертикальном или горизонтальном пространстве, а не на натуральных размерах изображения, объекта или аплета.

Атрибуты height и width сообщают ПА основную идею о размерах изображения или объекта, чтобы ПА мог зарезервировать под них пространство и продолжить показ документа, пока продолжается получение данных изображения.



Свободное пространство вокруг изображений и объектов


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

hspace = pixels [CN]

Не рекомендуется. Определяет размер свободного пространства слева и справа от IMG, APPLET или OBJECT. Значение по умолчанию не определено, но обычно это небольшая ненулевая величина.

vspace = pixels [CN]

Не рекомендуется. Определяет размер свободного пространства сверху и снизу от IMG, APPLET или OBJECT. Значение по умолчанию не определено, но обычно это небольшая ненулевая величина.



Визуальное представление изображений, объектов и аплетов


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



Вставка аплета: элемент APPLET


APPLET Не рекомендуется (со всеми его атрибутами). Следует использовать OBJECT.

См. формальное определение в Переходном ОТД.

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

codebase = uri [CT]

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

Примечание. Поскольку ограничения на субдиректории являются отходом от принятой практики и спецификации HTML 3.2, HTML Working Group решила оставить данные ограничения в этой версии спецификации из соображений обеспечения безопасности.

code = cdata [CS]

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

name = cdata [CS]

Определяет имя инстанции аплета, что делает возможным для аплетов в пределах той же страницы находить друг друга (и взаимодействовать).

archive = uri-list [CT]

Определяет список разделённых запятыми URI для архивов, содержащих классы и другие ресурсы, которые будут "предзагружены". Классы загружаются с использованием объекта AppletClassLoader с установленным codebase. Относительные URI для архивов интерпретируются в соответствии с codebase аплета. Предварительная загрузка ресурсов может значительно ускорить выполнение аплетов.

object = cdata [CS]

Этот атрибут именует ресурс, содержащий сериализованное представление состояния аплета. Он интерпретируется относительно codebase аплета. Сериализованные данные содержат имя класса аплета, но не реализацию. Имя класса используется для запроса реализации из файла класса или архива.

Если аплет "десериализован", вызывается метод start(), но не метод init(). Значения атрибутов после сериализации оригинального объекта не восстанавливаются. Любые атрибуты, передаваемые в инстанцию APPLET, будут доступны аплету. Авторы должны предельно осторожно пользоваться этой возможностью. Аплет должен быть остановлен перед тем, как будет сериализован.

Атрибуты code или object должны присутствовать. Если задан и code, и object, то будет считаться ошибкой, если они будут задавать разные имена класса.

width = length [CI]

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

height = length [CI]

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

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

id, class (идентификаторы документа)title (заголовок элемента)style (инлайн-стиль)alt (альтернативный текст)align, hspace, vspace (визуальное представление объектов, изображений и аплетов)


Этот элемент, поддерживаемый всеми браузерами с поддержкой Java, позволяет дизайнерам внедрять аплет Java в документ HTML. Он не рекомендуется. Вместо него следует применять элемент OBJECT.

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



НЕ РЕКОМЕНДУЕТСЯ:

В этом примере элемент APPLET вставляет аплет Java в документ. Поскольку отсутствует codebase, предполагается, что аплет находится в той же директории, что и текущий документ.

<APPLET code="Bubbles.class" width="500" height="500"> Java applet that draws animated bubbles. </APPLET>

Этот пример можно переписать с использованием OBJECT:

<P><OBJECT codetype="application/java" classid="java:Bubbles.class" width="500" height="500"> Java applet that draws animated bubbles. </OBJECT>

Начальные значения могут быть переданы аплету элементом PARAM.



НЕ РЕКОМЕНДУЕТСЯ:

Этот участок аплета Java:

<APPLET code="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> Java applet that plays a welcoming sound. </APPLET>

можно переписать с OBJECT:

<OBJECT codetype="application/java" classid="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> Java applet that plays a welcoming sound. </OBJECT>


Вставка изображения: элемент IMG


<!-- Чтобы исключить проблемы с только-текстовыми ПА, а также чтобы сделать содержимое изображения более понятным и доступным для пользователей с невизуальными ПА, Вы должны предоставить описание в элементе ALT и исключить использование серверных карт изображений --> <!ELEMENT IMG - O EMPTY -- Внедрённое изображение --> <!ATTLIST IMG %attrs; -- %coreattrs, %i18n, %events -- src %URI; #НЕОБХОДИМ -- URI изображения для вставки -- alt %Text; #НЕОБХОДИМ -- краткое описание -- longdesc %URI; #ПРЕДПОЛАГАЕТСЯ -- ссылка на полное описание (дополняет alt) -- name CDATA #ПРЕДПОЛАГАЕТСЯ -- имя изображения (для скриптов) -- height %Length; #ПРЕДПОЛАГАЕТСЯ -- переопределить высоту -- width %Length; #ПРЕДПОЛАГАЕТСЯ -- переопределить ширину -- usemap %URI; #ПРЕДПОЛАГАЕТСЯ -- использовать клиентские карты изображений -- ismap (ismap) #ПРЕДПОЛАГАЕТСЯ -- использовать серверные карты изображений -- > Начальный тег: необходим, Конечный тег: запрещён

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

src = uri [CT]

Специфицирует размещение ресурса изображения. Наиболее распространённые форматы изображений: GIF, JPEG и PNG.

longdesc = uri [CT]

Определяет ссылку на полное описание изображения. Это описание должно дополнять краткое описание, предоставляемое атрибутом alt. Если изображение имеет ассоциированную карту изображений, этот атрибут должен предоставлять информацию о содержимом карты изображений. Это особенно важно для серверных карт.

Поскольку элемент IMG может находиться внутри содержимого элемента A, механизм ПА в пользовательском интерфейсе для доступа к ресурсу "longdesc" первого должен отличаться от механизма к доступу ресурса href второго.

name = cdata [CI]

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

Примечание. Этот атрибут включён для обеспечения обратной совместимости. Приложения должны использовать для идентификации элементов атрибут id.

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

id, class (идентификаторы документа)alt (альтернативный текст)lang (язык), dir (направление текста)title (заголовок элемента)style (инлайн-стиль)onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)ismap, usemap (клиентские карты изображений)align, width, height, border, hspace, vspace (визуальное представление объектов, изображений и аплетов)


Элемент IMG внедряет изображение в текущий документ в месте определения элемента. Элемент IMG не имеет содержимого; обычно он замещается на ходу изображением, указанным в атрибуте src, исключение составляют изображения, выровненные влево или вправо, которые "обтекаются" по контуру.

В предыдущем примере мы определили ссылку на семейное фото. Здесь мы вставим фото непосредственно в текущий документ:

<BODY> <P>I just returned from vacation! Here's a photo of my family at the lake: <IMG src="http://www.somecompany.com/People/Ian/vacation/family.png" alt="A photo of my family at the lake."> </BODY>

Это включение может быть выполнено также элементом OBJECT:

<BODY> <P>I just returned from vacation! Here's a photo of my family at the lake: <OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png" type="image/png"> A photo of my family at the lake. </OBJECT> </BODY>

Атрибут alt устанавливает альтернативный текст, который отображается, если изображение не может быть выведено (см. ниже как установить альтернативный текст). ПА должны отображать альтернативный текст, если они не поддерживают изображения, не поддерживают изображения определённых типов или если сконфигурированы так, чтобы не показывать изображения.

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

<BODY> <P> <IMG src="sitemap.gif" alt="HP Labs Site Map" longdesc="sitemap.html"> </BODY>

Атрибут alt предоставляет краткое описание изображения. Этого должно быть достаточно, чтобы пользователь мог решить, перейти ли по ссылке, заданной атрибутом longdesc для полного описания, здесь - "sitemap.html".

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


Мультимедиа возможности HTML позволяют авторам


Мультимедиа возможности HTML позволяют авторам включать в свои страницы изображения, аплеты (программы, которые автоматически загружаются и запускаются на выполнение на машине пользователя), видеоклипы и другие документы HTML.
Например, чтобы включить в документ изображение в формате PNG, автор может записать:
<BODY> <P>Here's a closeup of the Grand Canyon: <OBJECT data="canyon.png" type="image/png"> This is a <EM>closeup</EM> of the Grand Canyon. </OBJECT> </BODY>
Предыдущие версии HTML позволяли авторам включать изображения (с помощью IMG) и аплеты (с помощью APPLET). Эти элементы имели несколько ограничений:
они не могли решить более общую проблему включения новых и будущих типов носителя;элемент APPLET работал только с аплетами Java. Этот элемент не рекомендуется. Вместо него нужно использовать OBJECT;они создавали проблемы доступности.
Для адресации этих вопросов HTML 4 ввёл элемент OBJECT, предлагающий общий способ включения объектов. Элемент OBJECT позволяет авторам HTML специфицировать всё необходимое для представления объектов в ПА (пользовательских агентах): код, начальные значения и данные процесса выполнения. В этой спецификации термин "object/объект" используется для описания предметов, которые человек может поместить в документы HTML; другие обычные термины для обозначения этих предметов: аплеты, plug-ins/плагины и т.д.
Новый элемент OBJECT соединяет некоторые задачи, выполняемые существующими элементами.
Посмотрите на эту таблицу функциональности:
Тип объектаСпецифический элементОбщий элемент
ИзображениеIMGOBJECT
АплетAPPLET (не рекомендуется)OBJECT
Другой документ HTMLIFRAMEOBJECT

Таблица показывает, что вставка каждого объекта имеет специфическое и общее решение. Общий элемент OBJECT послужит решением для включения в будущем новых типов носителя.
Чтобы вставить изображение, автор может использовать элементы OBJECT или IMG.
Чтобы вставить аплет, автор должен использовать элемент OBJECT, так как элемент APPLET не рекомендуется использовать.
Чтобы включить один документ HTML в другой, авторы могут использовать новый элемент IFRAME или элемент OBJECT. В обоих случаях, внедрённый документ остаётся независимым от главного документа. Визуальные ПА могут представлять внедрённый документ в отдельном окне внутри главного документа. См. замечания о внедрённых документах, чтобы сравнить вставку документов элементами OBJECT и IFRAME.
Изображения и другие включённые объекты могут иметь ассоциированные с ними гиперссылки, используя стандартные механизмы ссылок, а также посредством карт изображений. Карта изображений определяет активные геометрические регионы включённого объекта и назначает гиперссылку каждому такому региону. При активации эти ссылки могут вызвать запрос документа, запустить программу на сервере и т.д.
В следующих разделах мы обсудим различные доступные авторам механизмы вставки мультимедиа и создания карт изображений для таких вставок.

Выравнивание


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

align = bottom|middle|top|left|right

Не рекомендуется. Определяет положение IMG, OBJECT или APPLET в соответствии с их контекстом.

Вот значения для align, касающиеся позиции объекта по отношению к окружающему тексту:

bottom: означает, что низ объекта должен быть выровнен вертикально по текущей базовой линии. Это значение по умолчанию.middle: означает, что центр объекта должен быть выровнен вертикально по текущей базовой линии.top: означает, что верх объекта должен быть выровнен вертикально по верхней границе текущей строки.

Два других значения, left и right, заставляют изображение "отплывать" к левому или правому краю. Они рассматриваются разделе всплывающие объекты.

Различия в интерпретации выравнивания. ПА отличаются в интерпретации атрибута align. Некоторые только принимают во внимание то, что появляется в строке перед элементом, другие учитывают текст по обе стороны от элемента.



Замечания о внедрённых документах


Иногда, вместо того, чтобы ссылаться на документ, автор может захотеть встроить объект непосредственно в основной документ HTML. Для этого авторы могут использовать элементы IFRAME или OBJECT, но эти элементы отличаются друг от друга. Они не только имеют разные модели содержимого; элемент IFRAME может быть целевым фрэймом (см. детали в определении информации целевого фрэйма) и может быть "выбран" пользовательским агентом как фокус для печати, просмотра текста-источника HTML и т.д. ПА могут отображать выбранные фрэймы не так, как невыбранные (например, прорисовкой рамки вокруг выбранного фрэйма).

Внедрённый документ полностью независим от документа, в который он внедрён. Например, относительные URI внутри внедрённого документа разрешаются в соответствии с базовым URI внедрённого документа, а не с базовым URI главного документа. Внедрённый документ отображается только внутри другого документа (напр., в дочернем окне), в то же время, он остаётся независимым.

К примеру, следующие строки внедряют содержимое файла embed_me.html в то место, где появляется определение OBJECT:

...текст до... <OBJECT data="embed_me.html"> Warning: embed_me.html could not be embedded. </OBJECT> ...текст после...

Напоминаем, что содержимое OBJECT должно отображаться только в том случае, если файл, определённый в атрибуте data не может быть загружен.

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



Добавление стиля в HTML


Примечание. Образец таблицы стилей HTML 4, включённый в [CSS2], показывает обычно приемлемую информацию по умолчанию для каждого элемента. Авторы и разработчики могут найти его вполне пригодным.

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

Любой язык таблиц стилей может быть использован в HTML. Простой язык может удовлетворить потребности большинства пользователей, а другие языки больше подходят для решения узкоспециализированных задач. В этой спецификации использован язык стилей "Cascading Style Sheets" ([CSS1]), сокращённо - CSS.

Синтаксис данных стиля зависит от языка таблицы стилей.



Информация о стиле в заголовках: элемент STYLE


<!ELEMENT STYLE - - %StyleSheet -- информация о стиле --> <!ATTLIST STYLE %i18n; -- lang, dir, для использования с названием элемента -- type %ContentType; #НЕОБХОДИМ -- тип содержимого языка стилей -- media %MediaDesc; #ПРЕДПОЛАГАЕТСЯ -- создан для использования с этим носителем -- title %Text; #ПРЕДПОЛАГАЕТСЯ -- информативное название -- > Начальный тег: необходим, Конечный тег: необходим

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

type = content-type [CI]

Определяет язык стиля содержимого элемента и переопределяет язык по умолчанию для таблиц стилей. Язык таблиц стилей определён как тип содержимого (напр., "text/css"). Авторы обязаны указывать значение этого атрибута. Значение по умолчанию отсутствует.

media = media-дескрипторы [CI]

Определяет предполагаемый носитель для стилевой информации. Это может быть один media-дескриптор или список разделённых запятыми значений. Значение по умолчанию для этого атрибута - "screen".

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

lang (язык), dir (направление текста)title (название элемента)

Элемент STYLE позволяет разместить информацию стиля в "шапке" документа. HTML допускает любое количество элементов STYLE в разделе HEAD документа.

ПА, не поддерживающие таблицы стилей или не поддерживающие определённый язык таблиц стиля, используемый элементом STYLE, должны прятать содержимое элемента STYLE. Ошибочным будет отображать это содержимое как часть текста документа. Некоторые языки таблиц стиля поддерживают синтаксис скрытия содержимого от несоответствующих ПА.

Синтаксис данных стиля зависит от языка таблиц стиля.

Некоторые реализации таблиц стиля могут допускать больший набор правил в элементе STYLE, нежели в атрибуте style. Например, при наличии CSS, правила могут быть объявлены в элементе STYLE для:

всех объектов определённого элемента HTML (напр., все элементы P, все элементы H1 и т.д.);всех объектов элемента HTML, принадлежащих к определённому классу (т.е. тех, чей атрибут class установлен в некоторое значение);одиночных объектов элементов HTML (т.е. тех, чей атрибут id установлен в некоторое значение).


Правила иерархии и наследования стиля зависят от языка таблиц стилей.

Следующее объявление CSS STYLE помещает рамку вокруг каждого элемента H1 в документе и выравнивает их по центру страницы.

<HEAD> <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD>

Чтобы эта информация стиля воздействовала только на элементы H1 определённого класса, мы изменим её так:

<HEAD> <STYLE type="text/css"> H1.myclass {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass"> В этом H1 наш стиль действует </H1> <H1> Здесь наш стиль не действует </H1> </BODY>

Наконец, чтобы ограничить область видимости стилевой информации до одного объекта H1, установим атрибут id:

<HEAD> <STYLE type="text/css"> #myid {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass"> На этот H1 не действует </H1> <H1 id="myid"> На этот H1 действует </H1> <H1> На этот H1 не действует </H1> </BODY>

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

В этом примере мы используем элемент SPAN для установки стиля шрифта нескольких слов в начале параграфа в малые прописные.

<HEAD> <STYLE type="text/css"> SPAN.sc-ex { font-variant: small-caps } </STYLE> </HEAD> <BODY> <P><SPAN class="sc-ex">The first</SPAN> few words of this paragraph are in small-caps. </BODY>

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

<HEAD> <STYLE type="text/css"> DIV.Abstract { text-align: justify } </STYLE> </HEAD> <BODY> <DIV class="Abstract"> <P>The Chieftain product range is our market winner for the coming year. This report sets out how to position Chieftain against competing products.

<P>Chieftain replaces the Commander range, which will remain on the price list until further notice. </DIV> </BODY>


Инлайн-стиль (внедрённый)


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

style = style [CN]

Синтаксис значений атрибута style определяется языком по умолчанию для таблиц стилей. Например, для инлайн-стиля [[CSS2]] используйте синтаксис блока объявлений, описанный в разделе 4.1.8 (без фигурных скобок-ограничителей).

Этот пример CSS устанавливает цвет и шрифт текста параграфа:

<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?

В CSS правильное объявление имеет форму "имя : значение" (с разделяющим двоеточием).

Для установки стилевой информации в нескольких элементах авторы могут использовать элемент STYLE.

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



Каскадные таблицы стилей


Языки каскадных таблиц стилей, такие как CSS, разрешают объединять стилевую информацию из различных источников. Однако, не все языки таблиц стилей поддерживают каскадирование. Чтобы создать каскад, авторы определяют последовательность элементов LINK и/или STYLE. Стилевая информация каскадируется в том порядке, в котором элементы появляются в HEAD.

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

В следующем примере мы определяем две альтернативные таблицы стилей с названием "compact". Если пользователь выберет стиль "compact", ПА обязан применить обе внешние таблицы стилей, также как и постоянную таблицу стилей "common.css". Если пользователь выберет стиль "big print", только альтернативная таблица "bigprint.css" и постоянная "common.css" будут применены.

<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> <LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"> <LINK rel="stylesheet" href="common.css" type="text/css">

Пример каскада, который использует элементы LINK и STYLE.

<LINK rel="stylesheet" href="corporate.css" type="text/css"> <LINK rel="stylesheet" href="techreport.css" type="text/css"> <STYLE type="text/css"> p.special { color: rgb(230, 100, 180) } </STYLE>



Media-зависимые каскады


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

В следующем примере мы определяем каскад, где таблица "corporate" даётся в нескольких версиях: одна для печати, другая для экрана и третья для речевых браузеров (используемая, как говорят, при чтении email в автомобиле). Таблица "techreport" применима ко всем носителям.

Правило цвета, определённое элементом STYLE, используется для печати и экрана, но не для речевого представления.

<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css"> <LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css"> <LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css"> <LINK rel="stylesheet" href="techreport.css" type="text/css"> <STYLE media="screen, print" type="text/css"> p.special { color: rgb(230, 100, 180) } </STYLE>



Наследование и каскадирование


Если ПА хочет отобразить документ, ему нужно найти значения для свойств стиля, например, семейство шрифтов, стиль шрифта, размер, высота строки, цвет текста и так далее. Точный механизм зависит от языка таблиц стилей, но следующее описание в целом применимо:

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

Если свойство может наследоваться, ПА проверяет непосредственно включаемые элементы, чтобы убедиться, применимо ли к ним правило. Этот процесс продолжается до тех пор, пока ПА находит применимые правила. Этот механизм позволяет компактно специфицировать таблицы стилей. К примеру, авторы могут определить семейство шрифтов для всех элементов внутри BODY одним правилом, которое применяется к элементу BODY.



Основные и альтернативные таблицы стилей


HTML позволяет ассоциировать любое число внешних таблиц стилей с документом. Язык таблицы стилей определяет, сколько внешних таблиц стилей взаимодействует с документом (например, "каскадные" правила CSS).

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

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

Авторы могут группировать несколько альтернативных таблиц стилей (включая основную авторскую) под одним именем стиля. Если пользователь выбирает именованный стиль, ПА должен применить все таблицы стилей с этим именем. ПА не должны применять альтернативные таблицы стилей с другим именем стиля. В разделе спецификация внешней таблицы стилей объясняется, как именовать группу таблиц стилей.

Авторы также могут определить постоянные\persistent таблицы стилей, которые обязаны применяться ПА в дополнение к любой альтернативной таблице стилей.

ПА обязаны учитывать media-декскрипторы при использовании любой таблицы стилей.

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



Скрытие данных стиля от пользовательских агентов (ПА)


Некоторые языки таблиц стилей поддерживают синтаксис, позволяющий авторам прятать содержимое элементов STYLE от несоответствующих ПА.

Этот пример иллюстрирует, как в CSS закомментировать содержимое элементов STYLE так, чтобы быть уверенным наверняка, что несоответствующие ПА не будут рассматривать его как текст.

<STYLE type="text/css"> <!-- H1 { color: red } P { color: blue} --> </STYLE>



Спецификация внешней таблицы стилей


Авторы определяют внешнюю таблицу стилей со следующими атрибутами элемента LINK:

href указывает на расположение файла таблицы стилей. Значением href является URI;значение атрибута type указывает язык связанного ресурса (таблицы стилей). Это позволяет ПА избегать загрузки таблиц стилей для не поддерживаемого языка таблиц стилей;

определить, является таблица стилей постоянной, основной или альтернативной:

чтобы сделать таблицу постоянной, установите атрибут rel в "stylesheet" и не устанавливайте атрибут title;чтобы сделать таблицу основной, установите атрибут rel в "stylesheet" и именуйте таблицу с помощью атрибута title;чтобы сделать таблицу альтернативной, установите атрибут rel в "alternate stylesheet" и именуйте таблицу с помощью атрибута title.

ПА должен предоставлять пользователю возможность видеть список альтернативных стилей и выбрать из него. Значение атрибута title рекомендуется как название каждого пункта выбора.

В этом примере мы сначала определяем постоянную таблицу стилей, находящуюся в файле mystyle.css:

<LINK href="mystyle.css" rel="stylesheet" type="text/css">

Установка атрибута title делает её авторской основной:

<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">

Добавление ключевого слова "alternate" к атрибуту rel делает её альтернативной таблицей стилей:

<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">

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

Авторы могут использовать элемент META для установки основной таблицы стилей документа. Например, чтобы установить основную таблицу стилей в "compact" (см. предыдущий пример), авторы могут включить следующую строчку в HEAD:

<META http-equiv="Default-Style" content="compact">

Основная таблица стилей может быть специфицирована заголовками HTTP. Предыдущее объявление META эквивалентно заголовку HTTP:

Default-Style: "compact"

Если два или более объявления META или заголовка HTTP определяют основную таблицу стилей, самая последняя имеет приоритет. Заголовки HTTP появляются раньше, чем HEAD документа.

Если два или более элемента LINK определяют основную таблицу стилей, первая таблица имеет преимущество.

Основная таблица стилей, определённая в META или в заголовке HTTP, имеет преимущество перед таблицами, определёнными в элементе LINK.



Ссылки на таблицы стилей в заголовках HTTP


Этот раздел относится только к тем ПА, которые соответствуют версиям HTTP, определяющим поле заголовка Link. Обратите внимание, что HTTP 1.1, как определено в [RFC2616],не содержит поле заголовка Link (см. раздел 19.6.3).

Менеджеры Web-сервера могут найти удобным сконфигурировать сервер так, чтобы таблица стилей применялась к группе страниц. Заголовок HTTP Link имеет то же действие, что и элемент LINK с теми же атрибутами и значениями. Множественные заголовки Link соответствуют множественным элемента LINK, появляющимся в том же порядке. Например:

Link: <http://www.acme.com/corporate.css>; REL=stylesheet

соответствует:

<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">

Можно определить несколько альтернативных стилей, используя множественные заголовки Link, и использовать затем атрибут rel для определения стиля по умолчанию.

В этом примере "compact" применяется по умолчанию, поскольку опущено ключевое слово "alternate" для атрибута rel.

Link: <compact.css>; rel="stylesheet"; title="compact" Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"

Это должно также работать, если документы HTML пересылаются по email. Некоторые агенты email могут изменять порядок заголовков [RFC822]. Чтобы защитить каскадный порядок таблиц стилей, определённый заголовками Link, авторы могут использовать конкатенацию заголовков для сращивания нескольких объектов одного поля заголовка. Знак кавычек нужен только тогда, когда значения атрибутов содержат пробелы. Используйте мнемоники SGML для ссылки на символы, которые недопустимы в заголовках HTTP или email или могут быть изменены при прохождении через шлюзы.

Элементы LINK и META, ожидаемые заголовками HTTP, определены как появляющиеся явно перед каким-либо элементом LINK или META в HEAD документа.



Типы носителя


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

Данное объявление относится к элементам H1. При отображении на бизнес-совещании, все объекты будут голубого цвета. При печати - будут центрироваться.

<HEAD> <STYLE type="text/css" media="projection"> H1 { color: blue} </STYLE>

<STYLE type="text/css" media="print"> H1 { text-align: center } </STYLE>

Здесь добавлены звуковые эффекты к якорю для использования в голосовом выводе:

<STYLE type="text/css" media="aural"> A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)} </STYLE> </HEAD>

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



Установка языка по умолчанию для таблиц стилей


Авторы могут специфицировать язык таблиц стилей для стилевой информации, ассоциированной с документом HTML.

Авторы должны использовать элемент META для установки в данном документе языка по умолчанию для таблиц стилей. Для этого, например, автор должен поместить следующее объявление в HEAD своих документов:

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

Язык по умолчанию для таблиц стилей может быть также установлен в заголовках HTTP. Предыдущее объявление META эквивалентно объявлению в заголовке HTTP:

Content-Style-Type: text/css

ПА должны определять язык по умолчанию для таблиц стилей документа в такой последовательности (приоритет по убыванию):

Если какое-либо объявление META устанавливает "Content-Style-Type", это выражение определяет язык по умолчанию для таблиц стилей.Иначе, если какое-либо объявление заголовка HTTP устанавливает "Content-Style-Type", тогда данное выражение определяет язык по умолчанию для таблиц стилей.Иначе языком по умолчанию является "text/css".

Документы, содержащие элементы с установленным атрибутом style, но не определившие язык по умолчанию для таблиц стилей, являются некорректными. Авторские утилиты должны генерировать информацию о языке по умолчанию для таблиц стилей (обычно в объявлении META) так, чтобы ПА не должны были обращаться к языку по умолчанию - "text/css".



Внешние таблицы стилей


Авторы могут отделить таблицы стилей от основных документов HTML. Это даёт следующие преимущества:

авторы и менеджеры Web-сайтов могут разделять использование таблиц стилей среди нескольких документов (и сайтов);авторы могут изменять таблицы стилей без изменения самих документов;ПА могут выборочно загружать таблицы стилей (в зависимости от media-дескриптора).



Таблицы стилей являются грандиозным прорывом


Таблицы стилей являются грандиозным прорывом в области Web-дизайна. В научных кругах, там, где был придуман Web, больше интересуются содержимым документов, чем их внешним видом. Поскольку всё больше людей открывают для себя Web, ограничения HTML становятся постоянным источником разочарований, и авторы должны постоянно придумывать, как преодолеть эти стилистические ограничения. Хотя намерения были самыми благими - улучшить внешний вид Web-страниц - техника исполнения этого имела, к сожалению, побочные эффекты. Эта техника иногда работает, но не всегда и не везде. Она включает:
использование подходящих расширений HTML;конвертирование текста в изображение;использование изображений для управления пробелами;использование таблиц для форматирования текста;написание программ вместо использования HTML.
Эти способы явно увеличивали сложность страниц Web, ограничивали свободу действий, создавали проблемы совместимости, а также сложности для пользователей с физическими проблемами.
Таблицы стилей решают эти задачи, одновременно выходя за узкие рамки механизмов представления в HTML. Таблицы стилей облегчают установку межстрочных интервалов, отступов, цвета текста и фона, размера и стиля шрифта и других деталей.
Например, эта небольшая CSS (таблица стилей), находящаяся в файле "special.css", устанавливает цвет текста параграфа в зелёный и окружает его сплошной красной рамкой:
P.special { color : green; border: solid red; }
Авторы могу подключить эту таблицу стилей к основному документу HTML с помощью элемента LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//RU" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <LINK href="special.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <P class="special">Текст в этом параграфе должен быть зелёного цвета. </BODY> </HTML>
HTML 4 поддерживает следующие возможности таблиц стилей:
Гибкость размещения информации о стиле
Размещение таблиц стилей в отдельных файлах облегчает их повторное использование. Иногда необходимо включить инструкции представления в документ, к которому они применяются, путём группировки их в начале документа или установкой в атрибутах по всему телу документа. Чтобы облегчить работу со стилями на базе сайта, эта спецификация описывает, как использовать заголовки-"шапки"/headers HTTP для установки применения таблиц стилей в документах.
Независимость от конкретного языка таблицы стилей
Эта спецификация не привязывает HTML к какому-то определённому языку таблиц стилей. Это позволяет использовать разные языки, например, простой для большинства пользователей и более сложный - для пользователей с узко специализированными потребностями. Примеры, данные ниже, используют язык CSS (Cascading Style Sheets) [CSS1], но возможны и другие языки таблиц стилей.
Каскадирование
Это возможность, предоставляемая некоторыми языками таблиц стилей, такими как CSS, соединять информацию стилей из различных источников. Это могут быть, например, корпоративные руководства по стилям, стили для групп документов и стили, специфические для отдельного документа. Сохраняя эту информацию раздельно, таблицы стилей могут быть повторно использованы, облегчая творчество и более эффективное использование сетей. Каскад определяет упорядоченную последовательность таблиц стилей, где правила более поздних таблиц имеют преимущество перед правилами более ранних таблиц. Не все языки таблиц стилей поддерживают каскадирование.
Зависимость от типа носителя
HTML позволяет авторам определять media-независимые документы. Это даёт пользователям возможность использовать Web-страницы на разных устройствах и носителях информации, например, графические дисплеи компьютеров, использующих Windows, Macintosh OS и X11, телевизионные устройства, специально адаптированные телефоны и портативные устройства на базе PDA, речевые браузеры и тактильные брайль-устройства.
Таблицы стилей, наоборот, применяются к конкретным носителям или группам носителей. Таблица, предполагаемая для использования с экраном, может функционировать при печати на принтере, но мало подходит для речевых браузеров.
Эта спецификация позволяет Вам определить устройства из широкого набора, в которых данная таблица стилей может быть применена. Это позволяет пользовательским агентам (ПА) исключить употребление неподходящих таблиц стилей. Языки таблиц стилей могут включать возможности описания в той же самой таблице зависимости от типа носителя.
Альтернативные стили
У авторов может появиться желание предоставить пользователям различные способы просмотра документа. Например, создав таблицу стилей для компактного просмотра документов со шрифтом небольшого размера, или таблицу, определяющую более крупный шрифт для удобства чтения. Эта спецификация даёт авторам возможность определять основную таблицу стилей, а также альтернативы в зависимости от условий конечного пользователя и типа носителя. ПА должны давать пользователям возможность выбора из нескольких таблиц стилей или объединения этих таблиц.
Возражения в связи с ухудшением параметров работы
Некоторыми высказывается озабоченность в связи с ухудшением параметров работы, связанным с использованием таблиц стилей. Например, загрузка внешней таблицы стилей может задержать вывод документа. Такие ситуации возникают чаще, если "шапки" документов содержат большое количество информации о стиле.
В настоящее время предлагается для решения этой проблемы включать соответствующие инструкции непосредственно в каждый элемент HTML. Информация о представлении в этом случае всегда доступна для ПА при отображении конкретного элемента.
Во многих случаях, авторы предпочитают использовать обычные таблицы стилей для групп документов. При использовании внедрённых таблиц стилей, передача стилевых установок документам действительно приводит к значительному снижению параметров работы, поскольку, для большинства документов, таблицы стилей будут размещены в локальном кэше. Общедоступность хороших таблиц стилей способствует этому.

Цвет фона


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

bgcolor = color [CI]

Не рекомендуется. Этот атрибут устанавливает цвет фона документа или ячеек таблицы.

Этот атрибут устанавливает цвет фона "канвы" тела документа (элемент BODY) или таблицы (элементы TABLE, TR, TH и TD). Дополнительные атрибуты, устанавливающие цвет текста, могут использоваться с элементом BODY.

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



Горизонтальные линии: элемент HR


<!ELEMENT HR - O EMPTY -- горизонтальная линия --> <!ATTLIST HR %attrs; -- %coreattrs, %i18n, %events -- > Начальный тег: необходим, Конечный тег: запрещён

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

align = left|center|right [CI]

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

left: линия выравнивается влево.center: линия выравнивается по центру.right: линия выравнивается вправо.

По умолчанию align=center.

[CI]

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

size = pixels [CI]

Не рекомендуется. Определяет высоту линии. Значение по умолчанию зависит от ПА.

width = length [CI]

Не рекомендуется. Определяет ширину линии. Ширина по умолчанию - 100%, т.е. линия растянута по ширине всей "канвы".

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

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

Элемент HR отображает горизонтальную линию в ПА.

Величина свободного пространства под и над горизонтальной линией зависит от ПА.

НЕ РЕКОМЕНДУЕТСЯ:

В этом примере линия центрируется, размер установлен в половину доступной ширины между краями страницы. Верхняя линия имеет толщину по умолчанию, а две нижние - по 5 пикселов. Нижняя линия должна отображаться сплошным цветом без тени:

<HR width="50%" align="center"> <HR size="5" width="50%" align="center"> <HR size="5" width="50%" align="center">

Эти линии должны выглядеть примерно так:




Элементы модификатора шрифта: FONT и BASEFONT


FONT и BASEFONT не рекомендуется применять.

См. формальное определение в разделе Переходное ОТД.

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

size = cdata [CN]

Не рекомендуется. Устанавливает размер шрифта. Возможные значения:

Целое число от 1 до 7. Устанавливает шрифт в определённый фиксированный размер, представление которого зависит от ПА. Не все ПА могут отобразить все семь размеров.Относительное увеличение размера шрифта. "+1" означает: на один размер больше. "-3" означает: на три размера меньше. Все размеры находятся в пределах шкалы от 1 до 7.

color = color [CI]

Не рекомендуется. Устанавливает цвет текста.

face = cdata [CI]

Не рекомендуется. Определяет список имён шрифтов, разделённых запятыми, которые ПА должен искать в порядке убывания приоритета.

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

id, class (идентификаторы документа)lang (язык), dir (направление текста)title (название элемента)style (инлайн-стиль)

Элемент FONT изменяет размер шрифта и цвет текста своего содержимого.

Элемент BASEFONT устанавливает базовый размер шрифта (используя атрибут size). Размер шрифта, определяемый FONT, является относительным по отношению к BASEFONT. Если BASEFONT не используется, размер базового шрифта составляет 3.

НЕ РЕКОМЕНДУЕТСЯ:

В этом примере показана разница между шрифтами семи размеров элемента FONT:

<P><font size=1>size=1</font> <font size=2>size=2</font> <font size=3>size=3</font> <font size=4>size=4</font> <font size=5>size=5</font> <font size=6>size=6</font> <font size=7>size=7</font>

Это может выглядеть так:


А это пример относительного изменения размера шрифта с использованием базового размера 3:


Базовый размер шрифта не применяется к заголовкам/headings, за исключением тех случаев, когда заголовки изменены с использованием относительного изменения размера в элементе FONT.



Элементы стиля шрифта: TT, I, B, BIG, SMALL, STRIKE, S и U


<!ENTITY % fontstyle "TT | I | B | BIG | SMALL"> <!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*> <!ATTLIST (%fontstyle;|%phrase;) %attrs; -- %coreattrs, %i18n, %events -- > Начальный тег: необходим, Конечный тег: необходим

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

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

Представление элементов стиля шрифта зависит от пользовательского агента (ПА). Следующее описание является лишь информативным.

TT: моноширинный текст, телетайп.

I: курсив.

B: полужирный.

BIG: "большой" шрифт.

SMALL: "малый" шрифт.

STRIKE и S: не рекомендуются, зачёркнутый текст.

U: не рекомендуется, подчёркнутый.

Вот несколько примеров определения шрифта:

<P><b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and <big>big</big> and <small>small</small> text.

Это будет отображено так:


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

<HEAD> <STYLE type="text/css"> P#mypar {font-style: italic; color: blue} </STYLE> </HEAD> <P id="mypar">...голубой курсив...

Элементы стиля шрифта должны вкладываться соответствующим образом. Отображение вложенных элементов стиля шрифта зависит от ПА.



Обтекание текста вокруг объекта


Ещё один атрибут, определённый для элемента BR, управляет обтеканием текста вокруг "всплывающего" объекта.

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

clear = none|left|right|all [CI]

Не рекомендуется. Определяет, где должна появиться следующая строка после обрыва строки, сделанного этим элементом. Этот атрибут учитывает плавающие объекты (изображения, таблицы и т.д.). Возможные значения:

none: следующая строка начнётся нормально. Это значение по умолчанию.left: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.right: следующая строка начнётся в ближайшей строке под любым плавающим объектом у правого края.all: следующая строка начнётся в ближайшей строке под любым плавающим объектом у любого края.

Посмотрите на этот рисунок. Текст обтекает изображение по правому краю до обрыва строки элементом BR:

********* ------- | | ------- | image | --<BR> | | *********

Если атрибут clear установлен в none, линия, следующая после BR, начнётся сразу под ним у правого края изображения:

********* ------- | | ------- | image | --<BR> | | ------ *********

НЕ РЕКОМЕНДУЕТСЯ:

Если атрибут clear установлен в left или all, следующая строка появится так:

********* ------- | | ------- | image | --<BR clear="left"> | | ********* -----------------

Используя таблицы стилей, Вы можете установить, чтобы все обрывы строки вели себя одинаково для объектов (изображений, таблиц и т.д.), "всплывая" у левого края. В таблице стилей Вы можете записать:

<STYLE type="text/css"> BR { clear: left } </STYLE>

Чтобы определить такое поведение для конкретного элемента BR, нужно скомбинировать информацию о стиле и атрибут id:

<HEAD> ... <STYLE type="text/css"> BR#mybr { clear: left } </STYLE> </HEAD> <BODY> <P>... ********* ------- | | ------- | table | --<BR id="mybr"> | | ********* ----------------- ... </BODY>



Плавающие объекты


Изображения и объекты могут появляться непосредственно "in-line" или "всплывать" к одной из сторон страницы, изменяя временно поля текста, который может обтекать объект по любой его стороне.



Шрифты


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



"Всплывание" объекта


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

left: прижимает объект к левому краю. Последующий текст обтекает объект справа.right: прижимает объект к правому краю. Последующий текст обтекает объект слева.

ПРИМЕР НЕ РЕКОМЕНДУЕМОГО ИСПОЛЬЗОВАНИЯ:

Пример показывает как элемент IMG "всплывает" к левому краю "канвы".

<IMG align="left" src="http://foo.com/animage.gif" alt="my boat">

Некоторые атрибуты выравнивания также допускают значение "center", которое не вызывает всплывания, а центрирует объект по отношению к краям. В то же время, у элементов P и DIV, значение "center" вызывает центрирование содержимого элементов.



Выравнивание


Можно выравнивать блок элементов (таблицы, изображения, объекты, параграфы и т.п.) на "канве" с помощью атрибута align. Хотя этот атрибут может быть установлен для многих элементов HTML, диапазон его значений может отличаться, в зависимости от элемента. Здесь мы обсуждаем только значение атрибута "выравнивание" для текста.

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

align = left|center|right|justify [CI]

Не рекомендуется. Этот атрибут определяет горизонтальное выравнивание элемента по отношению к окружающему контексту. Возможные значения:

left: строки текста выравниваются по левому краю;center: строки текста выравниваются по центру;right: строки текста выравниваются по правому краю;justify: строки текста выравниваются по обоим полям.

Значение по умолчанию зависит от базового направления текста. Для направления слева направо - это align=left, для направления справа налево - по умолчанию .

НЕ РЕКОМЕНДУЕТСЯ:

Здесь заголовок центрируется.

<H1 align="center"> Что за прелесть эта мерзость! </H1>

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

<HEAD> <TITLE>Что за прелесть эта мерзость!</TITLE> <STYLE type="text/css"> H1 { text-align: center} </STYLE> <BODY> <H1> Что за прелесть эта мерзость! </H1>

Учтите, что это будет действовать на все элементы H1. Вы можете ограничить область видимости стиля, установив атрибут class элемента:

<HEAD> <TITLE>Что за прелесть эта мерзость!</TITLE> <STYLE type="text/css"> H1.wood {text-align: center} </STYLE> <BODY> <H1 class="wood"> Что за прелесть эта мерзость! </H1>

НЕ РЕКОМЕНДУЕТСЯ:

также, для того, чтобы выровнять вправо параграф на "канве" атрибутом HTML align, Вы могли бы записать:

<P align="right">...параграф текста...

что в таблице стиля могло бы быть:

<HEAD> <TITLE>Что за прелесть эта мерзость!</TITLE> <STYLE type="text/css"> P.mypar {text-align: right} </STYLE> <BODY> <P class="mypar">...параграф текста...

НЕ РЕКОМЕНДУЕТСЯ:

Чтобы выровнять вправо несколько параграфов, сгруппируйте их элементом DIV:

<DIV align="right"> <P>...текст первого параграфа... <P>...текст второго параграфа... <P>...текст третьего параграфа... </DIV>

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

<HEAD> <TITLE>Что за прелесть эта мерзость!</TITLE> <STYLE type="text/css"> DIV.mypars {text-align: right} </STYLE> <BODY> <DIV class="mypars"> <P>...текст первого параграфа... <P>...текст второго параграфа... <P>...текст третьего параграфа.. </DIV>

Чтобы выровнять по центру весь документ:

<HEAD> <TITLE>Что за прелесть эта мерзость!</TITLE> <STYLE type="text/css"> BODY {text-align: center} </STYLE> <BODY> ...тело выровнено по центру... </BODY>

Элемент CENTER полностью эквивалентен определению элемента DIV с атрибутом align, установленным в "center". Элемент CENTER не рекомендуется.



Альтернативное содержимое


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



Фрэймы - Введение


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

Вот простой документ с фрэймами:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Простой набор фрэймов</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="contents_of_frame1.html"> <FRAME src="contents_of_frame2.gif"> </FRAMESET> <FRAME src="contents_of_frame3.html"> <NOFRAMES> <P>Это набор фрэймов: <UL> <LI><A href="contents_of_frame1.html">Некоторое содержимое</A> <LI><IMG src="contents_of_frame2.gif" alt="Изображение"> <LI><A href="contents_of_frame3.html">Другое содержимое</A> </UL> </NOFRAMES> </FRAMESET> </HTML>

который выводит фрэймы примерно так:

--------------------------------------- | | | | | | | Frame 1 | | | | | | | | |---------| | | | Frame 3 | | | | | | | | | | | Frame 2 | | | | | | | | | | | | | | ---------------------------------------

Если пользовательский агент (ПА) не может выводить фрэймы (или сконфигурирован так), он будет выводить содержимое элемента NOFRAMES.



Инлайн-фрэймы: элемент IFRAME


<!ELEMENT IFRAME - - (%flow;)* -- inline подокно --> <!ATTLIST IFRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #ПРЕДПОЛАГАЕТСЯ -- ссылка на полное описание (дополняет title) -- name CDATA #ПРЕДПОЛАГАЕТСЯ -- имя целевого фрэйма -- src %URI; #ПРЕДПОЛАГАЕТСЯ -- источник содержимого фрэйма -- frameborder (1|0) 1 -- бордюр фрэйма -- marginwidth %Pixels; #ПРЕДПОЛАГАЕТСЯ -- ширина полей, в пикселах -- marginheight %Pixels; #ПРЕДПОЛАГАЕТСЯ -- высота полей, в пикселах -- scrolling (yes|no|auto) auto -- прокручивать или нет -- align %IAlign; #ПРЕДПОЛАГАЕТСЯ -- вертикальное и горизонтальное выравнивание -- height %Length; #ПРЕДПОЛАГАЕТСЯ -- высота фрэйма -- width %Length; #ПРЕДПОЛАГАЕТСЯ -- ширина фрэйма -- >

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

longdesc = uri [CT]

Определяет ссылку на полное описание фрэйма. Это описание должно дополнять краткое описание, даваемое атрибутом title, и должно использоваться для невизуальных ПА.

name = cdata [CI]

Устанавливает имя текущего фрэйма. Это имя может использоваться для последующих ссылок.

width = length [CN]

Ширина инлайн-фрэйма.

height = length [CN]

Высота инлайн-фрэйма.

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

id, class (идентификаторы документа)title (название элемента)style (инлайн-стиль)name, src, frameborder, marginwidth, marginheight, scrolling (элементы управления и оформления фрэйма)align (выравнивание)

Элемент IFRAME позволяет авторам вставлять фрэйм внутрь блока текста. Вставка инлайн-фрэйма в раздел текста очень похожа на вставку объекта элементом OBJECT: Обе позволяют Вам вставить документ HTML в середину другого, оба могут быть выровнены с окружающим текстом и т.д.

Информация. вставляемая инлайн, создаётся атрибутом src данного элемента. Содержимое элемента IFRAME, с другой стороны, должно отображаться ПА, только если он (ПА) не поддерживает фрэймы или соответствующим образом сконфигурирован, чтобы не отображать фрэймы.

В ПА поддерживающих фрэймы, этот пример помещает инлайн-фрэйм, окружённый бордюром, в середину текста.

<IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> [Ваш ПА не поддерживает фрэймы или соответствующим образом сконфигурирован, чтобы не отображать фрэймы. Однако, Вы можете посетить <A href="foo.html">сопутствующий документ.</A>] </IFRAME>

Инлайн-фрэймы не могут менять свои размеры (и таким образом, они не принимают атрибут noresize).

Примечание. Документы HTML могут также быть встроены в другие документы HTML с помощью элемента OBJECT. См. раздел встроенные документы.


<IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> [ Ваш ПА не поддерживает фрэймы или соответствующим образом сконфигурирован, чтобы не отображать фрэймы. Однако, Вы можете посетить <A href="foo.html">сопутствующий документ.</A>] </IFRAME>

Инлайн-фрэймы не могут менять свои размеры (и таким образом, они не принимают атрибут noresize).

Примечание. Документы HTML могут также быть встроены в другие документы HTML с помощью элемента OBJECT. См. раздел встроенные документы.

© 2003-2007 INTUIT.ru. Все права защищены.

Элемент FRAME


<![ %HTML.Frameset; [ <!-- зарезервированные имена фрэймов начинаются с символа "_" остальные - с буквы --> <!ELEMENT FRAME - O EMPTY -- подокно --> <!ATTLIST FRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #ПРЕДПОЛАГАЕТСЯ -- ссылка на полное описание (дополняет title) -- name CDATA #ПРЕДПОЛАГАЕТСЯ -- имя целевого фрэйма -- src %URI; #ПРЕДПОЛАГАЕТСЯ -- источник содержимого фрэйма -- frameborder (1|0) 1 -- установка бордюра-рамки фрэйма -- marginwidth %Pixels; #ПРЕДПОЛАГАЕТСЯ -- ширина полей, в пикселах -- marginheight %Pixels; #ПРЕДПОЛАГАЕТСЯ -- высота полей, в пикселах -- noresize (noresize) #ПРЕДПОЛАГАЕТСЯ -- запрещает/разрешает пользователю изменение размеров фрэйма -- scrolling (yes|no|auto) auto -- прокрутка -- > ]]>

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

name = cdata [CI]

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

longdesc = uri [CT]

Определяет ссылку к полному описанию фрэйма. Это описание должно дополнять краткое описание, данное атрибутом title, и может использоваться для невизуальных ПА.

src = uri [CT]

Определяет размещение первоначального содержимого фрэйма.

noresize [CI]

При наличии, этот булев атрибут сообщает ПА, что окно фрэйма не может изменять свои размеры.

scrolling = auto|yes|no [CI]

Прокрутка окна фрэйма. Возможные значения:

auto: это значение требует от ПА предоставлять возможность прокрутки при необходимости. Это значение по умолчанию.yes: это значение требует от ПА всегда предоставлять возможность прокрутки.no: это значение требует от ПА не предоставлять возможность прокрутки.

frameborder = 1|0 [CN]

Этот атрибут сообщает ПА информацию об обрамлении фрэйма. Возможные значения:

1: это значение требует от ПА рисовать разделитель между этим фрэймом и каждым смежным фрэймом. Это значение по умолчанию.0: это значение требует от ПА не рисовать разделитель между этим фрэймом и каждым смежным фрэймом. Учтите, что разделители всё же будут прорисованы, если они установлены в других фрэймах.

marginwidth = pixels [CN]

Этот атрибут определяет левое и правое поля между границей фрэйма и его содержимым. Значение должно быть больше нуля (в пикселах). Значение по умолчанию зависит от ПА.

marginheight = pixels [CN]

Определяет верхнее и нижнее поля между границей фрэйма и его содержимым. Значение должно быть больше нуля (в пикселах). Значение по умолчанию зависит от ПА.

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

id, class (идентификаторы документа)title (название элемента)style (инлайн-стиль)

Элемент FRAME определяет вид и содержимое одного фрэйма.



Элемент FRAMESET


<![ %HTML.Frameset; [ <!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- разделение окна --> <!ATTLIST FRAMESET %coreattrs; -- id, class, style, title -- rows %MultiLengths; #ПРЕДПОЛАГАЕТСЯ -- список размеров, по умолчанию: 100% (1 ряд) -- cols %MultiLengths; #ПРЕДПОЛАГАЕТСЯ -- список размеров, по умолчанию: 100% (1 столбец)-- onload %Script; #ПРЕДПОЛАГАЕТСЯ -- все фрэймы загружены -- onunload %Script; #ПРЕДПОЛАГАЕТСЯ -- все фрэймы удалены -- > ]]>

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

rows = multi-length-list [CN]

Определяет вывод горизонтальных фрэймов. Это разделённый запятыми список пикселов, процентов и относительных размеров. По умолчанию - 100%, один ряд.

cols = multi-length-list [CN]

Определяет вывод вертикальных фрэймов. Это разделённый запятыми список пикселов, процентов и относительных размеров. По умолчанию - 100%, один столбец.

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

id, class (идентификаторы документа)title (название элемента)style (инлайн-стиль)onload, onunload (внутренние события)

Элемент FRAMESET определяет вывод главного пользовательского окна в виде набора прямоугольников (кадров).



Элемент NOFRAMES


<![ %HTML.Frameset; [ <!ENTITY % noframes.content "(BODY) -(NOFRAMES)"> ]]>

<!ENTITY % noframes.content "(%flow;)*">

<!ELEMENT NOFRAMES - - %noframes.content; -- контейнер альтернативного содержимого для просмотра в режиме "без фрэймов" --> <!ATTLIST NOFRAMES %attrs; -- %coreattrs, %i18n, %events -- >

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

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

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

Элемент NOFRAMES является частью ОТД transitional/переходное и frameset. В документе, использующем ОТД frameset, NOFRAMES должен использоваться в конце раздела FRAMESET документа.

Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document with NOFRAMES</TITLE> </HEAD> <FRAMESET cols="50%, 50%"> <FRAME src="main.html"> <FRAME src="table_of_contents.html"> <NOFRAMES> <P>Here is the <A href="main-noframes.html"> non-frame based version of the document.</A> </NOFRAMES> </FRAMESET> </HTML>

NOFRAMES может использоваться, например, в документе - источнике фрэйма, использующего переходное ОТД. Это позволит авторам объяснить задачи документа в тех случаях, когда он просматривается вне набора фрэймов или в ПА, не поддерживающем фрэймы.



Полное описание фрэймов


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

Следующий frameset-документ описывает два фрэйма. Левый содержит оглавление, а правый первоначально содержит изображение страуса:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>A poorly-designed frameset document</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich.gif" longdesc="ostrich-desc.html"> </FRAMESET> </HTML>

Заметьте, что изображение включено во фрэйм независимо от какого-либо элемента HTML, так что автор не имеет другого пути дать альтернативный текст, кроме как атрибутом longdesc. Если содержимое правого фрэйма изменилось (напр., пользователь отделил гремучую змею от содержимого), пользователи больше не будут иметь прямого доступа к новому содержимому фрэйма.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>A well-designed frameset document</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich-container.html"> </FRAMESET> </HTML> <!-- In ostrich-container.html: --> <HTML> <HEAD> <TITLE>The fast and powerful ostrich</TITLE> </HEAD> <P> <OBJECT data="ostrich.gif" type="image/gif"> These ostriches sure taste good! </OBJECT> </HTML>



Разделение данных между фрэймами


Авторы могут разделять данные между несколькими фрэймами путём включения этих данных через элемент OBJECT. Авторы должны включать элемент OBJECT в элемент HEAD frameset-документа и поименовать их с помощью атрибута id. Любой документ, являющийся содержимым фрэйма данного набора фрэймов, может ссылаться по этому идентификатору.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//RU" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Это набор фрэймов (frameset) с OBJECT в HEAD</TITLE> <!-- Этот OBJECT не отображается! --> <OBJECT id="myobject" data="data.bar"></OBJECT> </HEAD> <FRAMESET> <FRAME src="bianca.html" name="bianca"> </FRAMESET> </HTML>

<!-- В bianca.html --> <HTML> <HEAD> <TITLE>Страница Bianca</TITLE> </HEAD> <BODY> ...начало документа... <P> <SCRIPT type="text/javascript"> parent.myobject.myproperty </SCRIPT> ...остальная часть документа... </BODY> </HTML>



Ряды и столбцы


Установка атрибута rows определяет количество горизонтальных кадров в наборе кадров. Установка атрибута cols определяет количество вертикальных кадров. Оба атрибута могут быть установлены одновременно для создания таблицы фрэймов.

Если атрибут rows не установлен, каждый столбец занимает всю высоту страницы. Если не установлен атрибут cols, каждый ряд занимает всю ширину страницы. Если ни один из атрибутов не установлен, фрэйм занимает всю страницу целиком.

Фрэймы создаются слева направо - столбцы, и сверху вниз - ряды. Если установлены оба атрибута, фрэймы создаются слева направо в верхнем ряду, слева направо во втором ряду и т.д.

В этом примере экран делится надвое по вертикали (т.e. создаются верхняя и нижняя половины):

<FRAMESET rows="50%, 50%"> ...остальная часть определения... </FRAMESET>

В этом примере создано три столбца: второй имеет фиксированную ширину 250 пикселов (для отображения, например, рисунка известного размера). Первый занимает 25% оставшегося пространства, а третий - 75%:

<FRAMESET cols="1*,250,3*"> ...остальная часть определения... </FRAMESET>

В этом примере создана таблица фрэймов 2x3:

<FRAMESET rows="30%,70%" cols="33%,34%,33%"> ...остальная часть определения... </FRAMESET>

Предположим, что текущее окно браузера имеет высоту 1000 пикселов. Первый фрэйм занимает 30% общей высоты (300 пикселов). Второй определён точно в 400 пикселов высоты. Оставшиеся 300 пикселов делятся между оставшимися двумя фрэймами. Высота четвёртого фрэйма определена как "2*", что означает - в два раза выше, чем третий фрэйм, высота которого составляет только "*" (эквивалентно 1*).

Следовательно, четвёртый фрэйм имеет высоту 200 пикселов, а третий - 100 пикселов.

<FRAMESET rows="30%,400,*,2*"> ...остальная часть определения... </FRAMESET>

Абсолютные размеры, которые не укладываются в 100% реально доступного пространства, должны уточняться ПА. Лишнее пространство делится пропорционально между фрэймами. Если пространства не хватает, каждый фрэйм уменьшается в соответствии с установленными пропорциями.



Семантика цели


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

Если атрибут target элемента установлен на известный фрэйм, при активации элемента (т.е. сделан переход по ссылке или форма обрабатывается), ресурс назначения для элемента должен быть загружен в целевой фрэйм.Если атрибут target элемента не установлен, но есть элемент BASE, атрибут target элемента BASE определяет целевой фрэйм.Если ни элемент, ни элемент BASE не имеют ссылки на целевой фрэйм, ресурс должен быть загружен во фрэйм, содержащий элемент.Если любой атрибут target ссылается на неизвестный фрэйм F, ПА должен новое окно и фрэйм, назначить фрэйму имя F и загрузить ресурс, назначенный элементом, в новый фрэйм.

ПА могут предоставлять пользователям механизм переопределения атрибута target.



Установка целевого фрэйма


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

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

target = frame-target [CI]

Определяет имя фрэйма, в котором будет открыт документ.

Установив атрибут name, авторы могут ссылаться на него как на "target" (целевой) для ссылок, определённых в других элементах. Атрибут target может быть установлен для элементов, создающих ссылки (A, LINK), карты изображений (AREA) и формы (FORM).

См. раздел имя целевого фрэйма о распознавании имён фрэймов.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET rows="50%,50%"> <FRAME name="fixed" src="init_fixed.html"> <FRAME name="dynamic" src="init_dynamic.html"> </FRAMESET> </HTML>

затем в init_dynamic.html мы создаём ссылку на фрэйм с именем "dynamic":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>A document with anchors with specific targets</TITLE> </HEAD> <BODY> ...начало документа... <P>Now you may advance to <A href="slide2.html" target="dynamic">slide 2.</A> ...документ... <P>You're doing great. Now on to <A href="slide3.html" target="dynamic">slide 3.</A> </BODY> </HTML>

Активация любой ссылки открывает новый документ во фрэйме с именем "dynamic", в то время как другой фрэйм - "fixed", сохраняет первоначальное содержимое.

Примечание. Определение набора фрэймов никогда не меняется, но содержимое любого из них - может меняться. Как только содержимое фрэйма изменилось, определение набора фрэймов больше не отражает текущее состояние своих фрэймов.

В настоящее время отсутствует возможность кодировать всё состояние набора фрэймов в URI. В то же время, многие ПА не позволяют пользователям устанавливать закладки на набор фрэймов.

Наборы фрэймов могут сделать навигацию в "истории" ПА более затруднительной для пользователя.



Установка целевого фрэйма по умолчанию


Если многие ссылки в одном документе имеют один целевой фрэйм, можно установить его однократно в атрибуте target каждого элемента. Это делается установкой атрибута target элемента BASE.

Мы возвращаемся к предыдущему примеру, размножая на этот раз информацию о цели, определяя её в элементе BASE и удаляя её из элементов A.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>A document with BASE with a specific target</TITLE> <BASE href="http://www.mycom.com/Slides" target="dynamic"> </HEAD> <BODY> ...начало документа... <P>Now you may advance to <A href="slide2.html">slide 2.</A> ...документ... <P>You're doing great. Now on to <A href="slide3.html">slide 3.</A> </BODY> </HTML>



Установка начального содержимого фрэйма


Атрибут src определяет документ, первоначально отображаемый в данном фрэйме.

Следующий пример документа HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET cols="33%,33%,33%"> <FRAMESET rows="*,200"> <FRAME src="contents_of_frame1.html"> <FRAME src="contents_of_frame2.gif"> </FRAMESET> <FRAME src="contents_of_frame3.html"> <FRAME src="contents_of_frame4.html"> </FRAMESET> </HTML>

должен создать фрэйм примерно такого вида:

------------------------------------------ |Frame 1 |Frame 3 |Frame 4 | | | | | | | | | | | | | | | | | | | | | | | | | | | | | -------------| | | |Frame 2 | | | | | | | | | | | ------------------------------------------

и указать ПА загрузить каждый файл в отдельный фрэйм.

Содержимое фрэйма не должно быть в том же документе, что и определение фрэйма.

НЕВЕРНОЕ ИСПОЛЬЗОВАНИЕ:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//RU" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Документ - набор фрэймов</TITLE> </HEAD> <FRAMESET cols="50%,50%"> <FRAME src="contents_of_frame1.html"> <FRAME src="#якорь_в_этом_же_документе"> <NOFRAMES> ...текст... <H2><A name="якорь_в_этом_же_документе">Важный раздел</A></H2> ...текст... </NOFRAMES> </FRAMESET> </HTML>



Визуальное представление фрэйма


В этом примере показано использование декоративных атрибутов элемента FRAME. Мы определяем, что фрэйм 1 не разрешает прокрутку. Фрэйм 2 оставляет свободное пространство вокруг содержимого (первоначально - файл изображения), фрэйм не меняет размеров. Между фрэймами 3 и 4 бордюра нет. Бордюры будут прорисованы (по умолчанию) между фрэймами 1, 2 и 3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <FRAMESET cols="33%,33%,33%"> <FRAMESET rows="*,200"> <FRAME src="contents_of_frame1.html" scrolling="no"> <FRAME src="contents_of_frame2.gif" marginwidth="10" marginheight="15" noresize> </FRAMESET> <FRAME src="contents_of_frame3.html" frameborder="0"> <FRAME src="contents_of_frame4.html" frameborder="0"> </FRAMESET> </HTML>



Вложенные фрэймы


Наборы фрэймов могут вкладываться на любую глубину.

В этом примере внешний FRAMESET делит доступное пространство на три столбца. Внутренний FRAMESET делит второй фрэйм на два ряда неравной высоты.

<FRAMESET cols="33%, 33%, 34%"> ...содержимое первого фрэйма... <FRAMESET rows="40%, 50%"> ...второй фрэйм, первый ряд... ...второй фрэйм, второй ряд... </FRAMESET> ...содержимое третьего фрэйма... </FRAMESET>



Вывод фрэймов


Документ HTML, описывающий вывод фрэймов (называемый документ с фрэймами), имеет несколько другой состав, нежели документ HTML без фрэймов. Стандартный документ содержит один раздел HEAD и один раздел BODY. Набор фрэймов содержит раздел HEAD, и раздел FRAMESET вместо BODY.

Раздел FRAMESET определяет вывод нескольких кадров в главном окне. Дополнительно раздел FRAMESET может содержать элемент NOFRAMES для представления альтернативного содержимого в ПА, не поддерживающих фрэймы или сконфигурированных так. чтобы не отображать фрэймы.

Элементы, которые могут быть нормально размещены в элементе BODY, не должны появляться перед первым элементом FRAMESET, иначе FRAMESET будет проигнорирован.