Previous: 4.5.6.1 Гипертекстный протокол HTTP    UP: 4.5 Процедуры Интернет
Down: 4.5.8 Поиск узлов и людей
    Next: 4.5.7 Протокол новостей NNTP

Язык программирования HTML (Hypertext Markup Language) предназначен для создания гипертекстных документов, формат которых не зависит от ЭВМ или используемой ОС. HTML-документы являются SGML-документами (Standard Generalized Markup Language, [ISO 8879]) с семантикой, пригодной для представления информации от широкого круга доменов. Файлы HTML-документов должны иметь расширение .html или .html. Данный формат пригоден для представления почтовых сообщений, новостей, меню, опций, гипермедийных документов, результатов запросов к базам данных, графических документов и т.д.

HTML используется во всемирной информационной системе World Wide Web (WWW) с 1990 года (разработчик Tim Berners-Lee).

В настоящее время существует также простой диалект языка SGML - XML (Extensible Markup Language). Смотри http://win.www.citycat.ru/doc/html/xml/wd-xml-lang или www.w3.org/put/www/tr (первоисточник). Предполагается, что этот язык совместим с SGML и HTML (последнее справедливо лишь частично).

Любое приложение SGML состоит из нескольких частей:

• SGML-декларация определяет, какие символы и разделители могут быть использованы в приложении.
• dtd (document type definition) определяет стандарт на типы документов и задает синтаксис базовых конструкций.
• Спецификация семантики, которая может также включать определенные ограничения на синтаксис, не включенные в DTD и т.д. .

SGML - это система описания языков разметки (markup). HTML - пример такого языка. Каждый язык разметки, определенный в SGML, называется приложением SGML. HTML 4.0 является приложением SGML, соответствующим международному стандарту international standard ISO 8879:1986 -- Standard Generalized Markup Language SGML (определено в [ISO8879]).

Приложение SGML характеризуется:

1. Декларацией SGML. SGML-декларация специфицирует, какие символы и разграничители могут использоваться в приложении.
2. Описанием типа документа DTD (Document Type Definition). DTD определяет синтаксис конструкций разметки. DTD может включать в себя дополнительные определения, такие как эталонные символьные объекты (entity).
3. Спецификацией, которая описывает семантику разметки. Эта спецификация также определяет синтаксические ограничения, которые не могут быть выражены в рамках DTD.
4. Примерами документов, содержащих данные и разметку. Каждый пример содержит ссылку на DTD, которая используется для его интерпретации.

HTML предоставляет разработчику следующие возможности:

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

2. Описания атрибутов

2.1. Булевы атрибуты

3. HTML и URL

• Связи с другим документом или ресурсом (см. элементы a и link).
• Связи с внешним стилевым списком или скриптом (см. элементы link и script ).
• Включения изображений объектов или аплетов в страницу (см. элементы img, object, applet и input).
• Создания карты изображения (см. элементы map и area).
• Предоставления форм (см. form).
• Создания рамочных документов (см. элементы frame и iframe).
• Цитирования внешних ссылок (см. элементы q, blockquote, ins и del).
• Ссылок на соглашения по метаданным, описывающим документ (см. элемент head).

Поскольку люди на Земле пока используют различные языки, в которых применяются совершенно не схожие наборы символов, необходимо как-то управлять процессом описания набора символов, используемого в данном документе. Для документов HTML используется универсальный набор символов UCS (Universal Character Set) [ISO10646; cм. также RFC-2070]. Этот набор эквивалентен Unicode 2.0 [unicode]. Агент пользователя может получить, послать или воспроизвести документ в любой кодировке. Это может быть набор ISO-8859-1 ("latin-1"), ISO-8859-5 (кирилица), shift_jis (японская кодировка) и так далее. Пользователь должен позаботиться, чтобы его документ в конечном итоге был приведен в соответствие с Unicode, тогда у него не будет более проблем с национальным шрифтовым набором.

Для того чтобы облегчить представление полученного документа, можно проанализировать первые несколько байт документа и в процессе пересылки соответствующим образом задать параметр charset поля "content-type". Например:

content-type: text/html; charset= euc-jp

В качестве значения параметра charset может быть выбрано стандартное имя из документа [RFC-2045]. Но, к сожалению, отнюдь не все сервера присылают информацию об используемом символьном наборе даже в случае несовпадения с ISO-8859-1. Другим способом решить проблему является включение в заголовок документа соответствующего meta-элемента. Например:

<meta http-equiv="content-type" content="text/html; charset=euc-jp">

Здесь крайне важно, чтобы агент пользователя был способен правильно интерпретировать элемент meta-декларации. Если других указаний не распознано, считается, что использован набор ISO-8859-1.

Значение типа атрибута "color" служит для описания цвета. Значение этого атрибута может быть шестнадцатеричным числом, перед которым записывается символ #, или одним из 16 имен цветов:

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

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

<!doctype html public "-//w3c//dtd html 4.0 draft//en">

Последние две буквы этой декларации характеризуют язык HTML dtd, в данном случае английский ("en"). Агент пользователя может игнорировать эту информацию. Слово draft говорит о том, что использована предварительная версия HTML 4.0. В случае работы с окончательной версией html 4.0 это слово должно быть заменено на strict. Часть документа, следующая после описания версии, должна быть оформлена в виде HTML-элемента. Таким образом, HTML-документ имеет следующую структуру:

<!doctype html public -//w3c//dtd html 4.0 draft//en>
<html>
Заголовок, текст документа .
</html>

Рассмотрим возможные варианты HTML-элементов.

<!entity % version "version cdata #fixed '%html.version;'">
<!entity % html.content "head, (fragment|body) ">
<!entity html o o (%html.content)>
<!attlist html %version; %i18n; >

Стартовая и конечная метки являются опционными.

Ниже приведены примеры элементов-заголовков.

<!entity % head.content "title & isindex? & base?">
<!element head o o (%head.content) +(%head.misc)>
<!attlist head %i18n; profile %url #implied - named directory of meta info -- >

Для элемента title стартовая и конечная метки являются обязательными. Элемент head содержит информацию о документе, он не является частью текста и служит в качестве источника ключевых слов для поисковых систем. HTML-документ должен иметь только один элемент title в секции head.

4. Элементы, используемые в тексте документа

5. Идентификаторы элементов. ID и атрибуты классов.

5.1. Элемент html

5.2. Группирующие элементы div и span

5.3. Элементы заголовков h1, h2, h3, h4, h5, h6

5.4. Элементы address

6. Спецификация языка содержимого документа. Атрибут lang

7. Наследование языковых кодов

8. Спецификация направления текста. Атрибут dir

9. Текст

9.1. Структурированный текст

9.2. Цитирование. Элементы q и blockquote

<blockquote cite=http://www.mycom.com/tolkien/twotpwers.html>
they went in single file, running like hounds on a strong scent, and an eager light was in their eyes.
</blockquote>

9.3. Верхние и нижние индексы. Элементы sub и sup

9.4. Строки и параграфы

Любой текст обычно представляется в виде последовательности параграфов. Для определения границ параграфа в HTML используется элемент p. Текст параграфа будет использоваться как единое целое при ряде процедур.

9.4.1. Параграфы и элемент p

<! element p - o (%inline) *>

P-элемент отмечает границы параграфа и не может содержать элементов блочного уровня, включая другие Р-элементы. Конечная метка может быть опущена, при этом любой элемент блочного уровня будет являться начальной меткой и конечной меткой Р-элемента. Например:

<p>Это первый параграф.</p>
<p>Это второй </p>
. блочный элемент .

Этот же текст можно переписать эквивалентным образом:

<p>Это первый параграф.
<p>Это второй.
.блочный элемент .

Аналогично параграф может быть сформирован с помощью блочных элементов:

<div>
<p> Это параграф
</div>

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

9.5. Элемент br

9.6. Предварительно сформатированный текст. Элемент pre.

10. Пометка изменений документа. Элементы ins и del.

11. Формат даты и времени

12. Неупорядоченные (ul) и упорядоченные (ol) списки

<!entity % ulstyle "disc|square|circle">
<!element ul - - (li) +>

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

type = style-information

Этот атрибут определяет стиль элемента списка.

start = integer

Работает только для ol. Устанавливает начальное значение счетчика элементов упорядоченного списка, значение по умолчанию равно единице.

value = integer

Работает только для LI. Устанавливает текущее значение номера элемента списка.

compact

Не рекомендуется использовать. При использовании требует от агента пользователя отображать список в возможно более компактном виде.

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

<ul>

Списки могут быть вложенными.

<ul>

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

<ol>
<li value="30"> присваивает этому элементу списка номер 30.
<li value="40"> присваивает этому элементу списка номер 40.
<li> этот элемент списка будет иметь номер 41.
</ol>

12.1. Списки, форматируемые визуальным агентом пользователя

12.2. Списки определений. Элементы dl, dt и dd

13. dir и элементы menu

<!element (dir|menu) - - (li)+ - (%blocklevel)>

Элемент DIR предназначен для формирования многоколоночного текста каталога. Элемент Menu предназначен для работы с одноколонными текстами каталогов. Оба элемента имеют структуру, аналогичную UL. Рекомендуется использовать UL вместо DIR и Menu.

14. Таблицы

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

14.1. Структура таблиц

14.1.1. Элемент table

<!element table - - (caption?, (col*|colgroup*), thead?, tfoot?, tbody+)>
<!attlist table -- элемент таблицы -

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

align = left | center | right

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

• left: Таблица сдвинута к левому краю документа.
• center: Таблица размещена по центральной оси документа.
• right: Таблица сдвинута к правому краю документа.

width = length

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

cols = integer

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

14.2. Вычисление числа рядов и колонок в таблице

Число рядов в таблице равно числу tr-элементов в ее содержимом. Агенты пользователя должны игнорировать ряды с номерами за пределами этого числа. Существует несколько путей определения числа колонок.

• Сканирование рядов таблицы и определение максимального числа колонок. Если число колонок в таблице превосходит число ячеек, ряд дополняется пустыми ячейками.
• Подсчитывается число колонок, как это специфицировано элементами COL и colgroup.
• Используется атрибут COLS элемента table

Агент пользователя может предположить, что число колонок в примере, приведенном ниже равно трем.

<table cols= "3">
. текст таблицы .
</table>

Если число колонок в таблице не задано атрибутом COLS, то визуальный агент пользователя будет ждать прихода всей информации о таблице, прежде чем приступит к ее отображению. Таким образом, атрибут cols позволяет отображать таблицу ряд за рядом по мере поступления данных.

14.3. Ориентация таблиц

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

<table dir="rtl">
. содержимое таблицы .
</table>

14.4. Надписи и таблица. Элемент caption

<!element caption - - (%inline;) +>
<!entity % calign "(top|bottom|left|right)">

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

align = top|bottom|left|right

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

• top: подпись над таблицей. Это значение по умолчанию.
• bottom: подпись под таблицей.
• left: подпись слева от таблицы.
• right: подпись справа от таблицы.

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

<table cols="3">
<caption>cups of coffee consumed by each senator</caption>
. остальная часть таблицы .
</table>

14.5. Группы рядов. Элементы thead, tfoot и tbody

<!element thead - o (tr+)>
<!element tfoot - o (tr+)>
<!element tbody o o (tr+) >

Таблица должна содержать хотя бы одну группу рядов. Каждая группа рядов делится на три секции: заголовок, собственно таблица и подпись под таблицей. Заголовок и подпись являются опционными. Элемент thead определяет заголовок, tfoot - подпись под таблицей, а элемент tbody - тело таблицы. thead, tfoot и tbody, если они присутствуют, должны содержать один или более рядов. Ниже приведен пример использования элементов thead, tfoot и tbody.

<table>
<thead>

tfoot в рамках определения table должен появляться до tbody, так чтобы агент пользователя мог осуществлять разбор подписи до получения всех данных таблицы.

14.6. Опционные метки групп рядов

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

14.7. Группы колонок. Элементы colgroup и col

<!element colgroup - o (col*) >

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

span = integer

Атрибут в случае своего присутствия определяет число колонок в группе по умолчанию. Агент пользователя должен игнорировать этот атрибут, если текущая группа содержит один или более элементов col. Значение атрибута по умолчанию равно единице.

width = length

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

Таблица должна иметь как минимум одну группу колонок. В отсутствии определения группы считается, что таблица имеет одну группу колонок, включающую в себя все колонки таблицы. Атрибут width элемента colgroup определяет ширину по умолчанию каждой из колонок в группе. Формат "0*", требующий минимальной ширины, может быть отменен элементом col.

Таблица в приведенном ниже примере имеет две группы колонок. Первая группа содержит 10 колонок, а вторая - 5 колонок. Значение ширины колонки по умолчанию для каждой из колонок в первой группе равно 50 пикселей. Для второй группы ширина колонки определяется минимально возможным значением.

<table>
<colgroup span="10" width="50">
<colgroup span="5" width="0*">
<thead>
<tr> ..
</thead>

14.8. Элемент col

<!element col - o empty>

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

width = length

Этот атрибут задает значение по умолчанию для ширины колонок в группе. Атрибут может также принимать значение "0*" (смотри выше) и "i*", где i - целое. Это называется относительной шириной. Когда агент пользователя выделяет место для таблицы, он сначала определяет габариты, а уже затем делит выделенное пространство, определяя относительные ширины рядов и колонок. Число i при этом определяет относительную долю, выделяемую данной колонке. Значение "*" эквивалентно "1*".

Каждая группа колонок может содержать нуль или более элементов col. Элемент col не определяет группу колонок в том смысле, как это делает colgroup, он предоставляет способ задать значения атрибутов для всех колонок группы. Атрибут span элемента col имеет следующее значение.

В отсутствии декларации span каждый элемент col представляет одну колонку. Если атрибут span имеет значение n>0, текущий элемент col действует на n колонок таблицы. Если атрибут span равен нулю, текущий элемент col имеет воздействие на все оставшиеся колонки таблицы, начиная с текущей. Что же касается colgroup, атрибут width для col воздействует на ширины колонок, к которым относится этот элемент. Если элемент cal действует на несколько колонок, тогда его атрибут width специфицирует ширину каждой колонки в его зоне ответственности.

Ниже приведен пример таблицы, имеющей две группы колонок. Первая группа содержит три колонки, вторая - две колонки. Доступное место по горизонтали определяется следующим образом. Сначала агент пользователя выделяет 30 пикселей для первой колонки. Затем будет выделено минимально возможное место для второй колонки. Оставшееся место по горизонтали будет поделено на 6 равных частей. Колонка 3 получит 2 такие порции, колонка 4 - одну, а колонка 5 получит 3.

<table>
<colgroup>

Мы установили значение атрибута align во второй группе колонок равным "center". Все ячейки в каждой колонке этой группы наследуют это значение. Но оно может быть изменено. В действительности последний элемент col делает это, специфицируя то, что все колонки, которыми он управляет, будут выровнены по символу ":".

14.9. Ряды таблицы. Элемент tr

<!element tr - o (th|td)+>

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

<table>
<caption>cups of coffee consumed by each senator</caption>
<tr> . Ряд заголовка .
<tr> . Первый ряд данных .
<tr> . Второй ряд данных .
. остальная часть таблицы .
</table>

14.10. Ячейки таблицы. Элементы th и td

<!element (th|td) - o %block>

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

axis = cdata

Атрибут определяет сокращенное имя заголовка ячейки. Имя ячейки по умолчанию - ее содержимое.

axes = cdata-list

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

rowspan = integer

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

colspan = integer

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

nowrap

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

Элемент TH запоминает заголовок, в то время как TD - данные. Это позволяет агенту пользователя обрабатывать заголовки и данные по-разному даже в отсутствии стилевого листа. Ячейки могут быть пустыми (не содержать данных). Ниже приведен пример таблицы с четырьмя колонками, имеющими заголовки.

<table>
<caption>Cups of coffee consumed by each senator</caption>
<tr> <th>name <th>Cups <th> Type of coffee <th> Suger?
<tr> <td>T. Sexton <td>10 <td>espresso <td>no
<tr> <td>J. Dinnen <td>5 <td>decaf <td>yes
. остальная часть таблицы .
</table>

Агент пользователя представит верхнюю часть данной таблицы в виде:

Cups of coffee consumed by each senator

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

<table border="border">
. остальная часть таблицы .
</table>

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

Cups of coffee consumed by each senator

Ячейки с этикетками

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

<table border="border">
<caption>Caps of coffee consumed by each senator</caption>
<tr> <th>Name <th>Cups <th> Type of coffee <th> suger?
<tr> <td axis="sexton" exes="name">T. Sexton <td>10
<td>espresso <td>no
<tr> <td axis="dinnen" exes="name">J. Dinnen <td>5 <td>decaf <td>yes
</table>

14.11. Ячейки, которые занимают несколько рядов или колонок

Ячейки могут охватывать несколько рядов или колонок. Число рядов или колонок в ячейке определяется атрибутами rowspan и colspan для соответственно TH или TD-элементов. В таблице, которая была описана, ячейка в ряду 4 вторая колонка должна занимать три колонки, включая текущий ряд.

<table border="border">
<caption>Caps of coffee consumed by each senator</caption>
<tr> <th>Name <th>Cups <th> Type of coffee <th> suger?
<tr> <td>T. Sexton <td>10 <td>espresso <td>no
<tr> <td>J. dinnen <td>5 <td>decaf <td>yes
<tr> <td>A. Soria <td colspan="3"<em>not available</em>
</table>

Эта таблица будет развернута визуальным агентом пользователя как:

Caps of coffee consumed by each senator

Этот пример иллюстрирует как описания ячеек, которые распространяются более чем на один ряд или колонку, влияет на определение последующих ячеек. Рассмотрим следующее описание таблицы.

<table border="border">
<tr> <td>1 <td rowspan="2">2 <td>3
<tr> <td>4 <td>6
<tr> <td>7 <td>8 <td>9
</table>

Таблица может быть представлена в виде:

Версия HTML 4.0 включает в себя механизмы контроля горизонтального и вертикального выравнивания, стилями границ таблицы и полями ячеек.

14.12. Горизонтальное и вертикальное выравнивание

<!entity % cellhalign "align (left|center|right|justify|char) #implied
char cdata #implied -- выравнивание по символу, напр. char=":" --
charoff cdata #implied -- смещение выравнивания по символу -- >
<!entity % cellvalign "valign (top|middle|bottom|baseline) #implied" >

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

align = left|center|right|justify|char

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

valign = top|middle|bottom|baseline

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

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

charoff = length

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

Рассмотрим пример таблицы с выравниванием по символу точка.

<table border="border">
<colgroup>
<col><col align="char" char=".">
<thead>
<tr><th>Vegetable <th>Cost per kilo
<tbody>
<tr> <td> lettuce <td>$1
<tr> <td> silver carrots <td>$10.50
<tr> <td>golden turnips <tr>$100.30
</table>

Отформатированная таблица будет выглядеть как:

14.13. Границы и линии

Следующие атрибуты влияют на рамки таблицы и внутренние линии.

frame = void|above|below|hsides|lhs|rhs|vsides|box|border

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

rules = none|groups|rows|cols|all

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

border = cdata

Эти атрибуты определяют ширину рамки вокруг таблицы в пикселях. В приведенном ниже примере таблица имеет рамку в 5 пикселей и присутствует с правой и левой сторон таблицы. Разделительные линии имеются между всеми колонками.

<table border="5" frame=vsides" rules="cols">
<tr> <td>1 <td>2 <td>3
<tr> <td>4 <td>5 <td>6
<tr> <td>7 <td>8 <td>9
</table>

Следующие установки должны выполняться агентом пользователя для совместимости. Установка border="0" подразумевает frame="void" и, если не специфицировано иного, rules="none". Другие установки border подразумевают frame="border" и, если не оговорено иное, rules="all". Значение "border" в стартовой метке элемента table должно интерпретироваться как значение атрибута frame. Это предполагает, что rules="all" и ненулевое значение атрибута border. Так, например:

<frame border="2"> у <frame border="2" frame="border" rules="all">
и
<frame border> <=< frame frame="border" rules="all">

14.14 Поля ячейки

Два атрибута регулируют зазор между и внутри ячеек.

cellspacing = length

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

cellpadding = length

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

Во всех последующих таблицах атрибут cellspacing определяет, что ячейки разделяются друг от друга и от рамки таблицы расстоянием в 20 пикселей. Атрибут cellpadding определяет, что верхняя и нижняя граница ячейки отстоит от его содержимого на 10% доступного пространства по вертикали (всего 20%). Аналогично поля ячейки в горизонтальном направлении составляют 10% от горизонтального размера ячейки.

Ниже приведены примеры, где проиллюстрировано взаимодействие различных элементов. Пример 1.

<table border="border">
<caption>A test table with merged cells </caption>

Таблица может быть отображена следующим образом.

A test table with merged cells

Пример 2 иллюстрирует группировку рядов и колонок. Пример взят из "developing international software", by nadine kano.

Code-page support in Microsoft Window

15. Информация о пути. Элемент base

<!element base - o empty>
<!attlist base href %url #required
target cdata #implied -- где развернуть подключенный ресурс -- >

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

href = url

Этот атрибут задает абсолютный url, который используется как базовый при определении относительных url.

В HTML проходы всегда задаются с помощью URL. Относительные URL получаются на основе базового URL, который может быть получен различными путями. Элемент base позволяет описать базовый URL явно. Например:

<html>
<head>
<base href=http://www.barre.fr/fou/intro.html>
</head>
..
</html>

Относительный URL "../gee/foo/html" будет в этом случае получен в виде:

http://www.barre.fr/gee/foo.html

15.1. Связи и якоря

HTML-связь представляет собой соединение одного WWW-ресурса с другим.

Определение связей и якорей

В HTML любая связь имеет два конца и направление. Связь начинается в источнике и завершается в месте назначения. Любое описание связи определяет оба эти конца. Один конец задается местом описания связи, другой - атрибутом этой связи. Связь соответствует какому-то WWW-ресурсу (HTML-документу, изображению, видео-клипу, текущему документу, звуковому файлу и т.д.). Конец связи может быть также задан якорем. Якорь - это именованный указатель на определенную часть документа. Связь устанавливает соответствие между источником и местом назначения. Но помимо этого связь может определять тип информации. Связи могут носить самый разный характер, например, указания "next" или "previous" также задают определенные связи. Связи могут использоваться пользователем и для определения порядка печати документов. Атрибут rel определяет, что связь имеет начало в текущем документе. Атрибут rev указывает, что описанная связь имеет в качестве места назначения текущий документ. В HTML имеется два элемента, определяющие связь, это link и a.

Link может появиться в секции head HTML-документа. Этот элемент определяет взаимоотношение между зоной текущего документа и другим ресурсом.

Элемент A может появиться в теле документа, он устанавливает связь между зоной текущего документа и другим ресурсом. Элемент a в отличие от link может иметь содержимое (текст, изображения и т.д.). Другим важным отличием этих двух элементов является то, что А интерпретируется агентом пользователя как указание "извлечь ресурс, находящийся на другом конце связи". Извлеченный ресурс может обрабатываться агентом пользователя разными способами:

Открыть новый документ в том же окне, открыть документ в другом окне, запустить новую программу и т.д.

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

15.2. Элементы, определяющие якоря

Существует два способа специфицировать якоря в HTML-документах.

• Использовать элемент А (служит для формирования связей и якорей).
• Применить атрибут id любого элемента.

Так как документы могут быть написаны на разных языках, link и a поддерживают атрибуты lang, dir и charset.

15.3. Элемент А

<!element a - - (%inline)* -(a)>
<!attlist a

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

name = cdata

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

href = url

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

rel = cdata

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

rev = cdata

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

charset = cdata

Этот атрибут специфицирует перекодировку символов для данной связи. Значение этого атрибута должно быть именем "charset" описанным в RFC-2045. Значение по умолчанию этого атрибута равно "ISO-8859-1".

Ниже приведен пример использования А-элемента.

<a href=http://www.3w.org/>w3c web site</a>

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

<a href =http://www.w3.org/ charset="ISO-8859-1">w3c web site</a>

Ниже приведен пример, иллюстрирующий описание якоря с именем "anchor-one" в файле "one.html".

. текст до якоря .

<a name="anchor-oner">this is the location of anchor one.</a>
. текст после якоря .

Это определение присваивает якорь зоне документа, содержащей текст "This is the location of anchor one". Определив якорь, мы можем установить с ним связь из того же или постороннего документа. URL, который указывает на якорь, завершаются символом #, за которым следует имя якоря. Ниже приведены примеры такого URL.

• Абсолютный URL: http://www.mycompany.com/one.html">http://www.mycompany.com/one.html#anchor-one
• Относительный URL: ../one.html#anchor-one
• Когда связь задана в пределах документа: #anchor-one

Таким образом, связь, определенная в файле "two.html", который находится в том же каталоге, что и "one.html" имеет ссылку на якорь в виде:

<a href="./one.html#anchor-one" anchor one</a>

Элемент А в следующем примере определяет якорь и связь в одно и то же время.

<a name="anchor-two" href="html://wwwsomecompany.com/people/ian/vocation/family.png">
</a>

Этот пример содержит связь с www-ресурсом другого типа (png-изображение). Активация связи должна извлечь это изображение из сети и отобразить его.

15.4. Связи mailto

Автор может сформировать связи, которые не ведут к какому-либо документу, а реализуют отправку e-mail сообщения по некоторому адресу. Когда такая связь активизируется, агент пользователя вызывает почтовую программу. Для реализации таких связей введено значение mailto атрибута Href.

<a href="mailto:semenov@ns.itep.ru"> yury semenov</a>

Когда пользователь активизирует эту связь, агент пользователя открывает почтовую программу и заносит в поле "to:" значение "semenov@ns.itep.ru".

15.5. Вложенные связи

15.6. Якоря с атрибутом id

Атрибут id может использоваться для размещения якоря в области начальной метки любого элемента. Ниже приведен пример использования id для размещения якоря в элементе Н2. Якорь подвязан здесь посредством А-элемента.

<h2 id="section2">section two</h2>
. позднее в документе .
please refer to <a href="#section2">section two</a> above for more details.

Атрибуты ID и name работают в общем пространстве имен (см. ISO10646). Это означает, что они не могут описать якоря с идентичными именами в пределах одного документа.

15.7. Элемент link

<!element link - o empty>
<!attlist link

Этот элемент, который должен использоваться в Head-секции документа (любое число раз), определяет связь, независящую от среды. Хотя Link не имеет содержимого, он предоставляет информацию, обрабатываемую агентами пользователя. Ниже в предлагаемом примере показано как в секции head документа могут появиться несколько определений Link. Атрибуты rel и rev определяют, откуда связь начинается и где кончается.

<html>
<head>
<link rel ="index" href="../index.html">
<link rel ="next" href="chapter_3.html">
<link rev ="previous" href="chapter_1.html">
</head>
..

15.8. Типы связей

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

15.9. Связи с поисковыми системами

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

<head>
<link media="print" title="the manual in postscript"

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

<head>
<link rel="start" title="the first page of the manual"

16. Элемент object

<!entity % oalign "(texttop|middltextmiddle|baseline|textbottom|left|center|right)">
<!element object - - (param | %block)*>
<!attlist object

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

codebase = url

Этот атрибут специфицирует базовый проход для определения относительного URL, описанного classid. Если атрибут не задан, значением по умолчанию является базовый URL данного документа.

classid = URL

Этот атрибут специфицирует положение механизма отображения через url.

codetype = cdata

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

data = URL

Этот атрибут специфицирует положение данных, которые должны быть отображены.

type = cdata

Этот атрибут специфицирует Internet media type для данных, заданных атрибутом data. Атрибут является опционным, но рекомендуемым, когда задан атрибут data, так как это позволяет агенту пользователя избежать загрузки информации с типом, неподдерживаемым средой.

declare

Если присутствует, этот булев атрибут делает текущее определение object лишь декларацией.

standby = cdata

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

align = texttop|middle|textmiddle|baseline|textbottom|left|center|right

Не рекомендуется к использованию. Этот атрибут специфицирует положение объекта по отношению к окружающему контексту.

Большинство агентов пользователей снабжены механизмом для отображения базовых типов информации, таких как текст, картинки в GIF-формате, цвета, шрифты и т.д. В HTML элемент object определяет положение механизма отображения и положение данных, необходимых для механизма отображения. Агент пользователя интерпретирует элемент object согласно следующим правилам.

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

Важным следствием конструкции элемента object является то, что он предлагает механизм для описания альтернативного механизма отображения различных объектов. Каждая декларация object может предлагать альтернативный механизм отображения. Если агент пользователя не может воспользоваться имеющимся механизмом, он может обратиться к тексту, который может представлять собой другой элемент object. В ниже приведенном примере использовано несколько деклараций object для иллюстрации альтернативных способов отображения. Агент пользователя сначала попробует отобразить первый элемент object, а далее будет пытаться воспользоваться: аплетом eath, написанным на языке python, mpeg анимацией, изображением земли в формате GIF и, наконец, альтернативным текстом.

<object title="the earth as seen from space"
classid="http://www.observer.mars/theearth.py">
<object data="theearth.mpeg" type="application/mpeg">

Самая внешняя декларация специфицирует аплет, который не требует данных или начальных параметров. Вторая декларация специфицирует MPEG-анимацию и не определяет механизм отображения, предполагая, что с этой работой справится агент пользователя. Здесь установлен атрибут type, таким образом, что в случае если агент пользователя не может отобразить MPEG, он может не копировать "theearth.mpeg" из сети. Третья декларация специфицирует позицию GIF-файла и предлагает альтернативный текст на случай, когда другие механизмы не приведут к успеху.

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

16.1. Инициализация объекта. Элемент param.

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

name = cdata

value = cdata

Этот атрибут специфицирует значение параметра исполнения, заданного атрибутом name. Значение этого параметра не имеет какого-либо смысла для HTML, он определяется рассматриваемым объектом.

valuetype=data|ref|object

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

type = cdata

Этот атрибут специфицирует internet media type ресурса, определенного атрибутом value, только в случае, когда атрибут valuetype = "ref". Этот атрибут, таким образом, специфицирует для агента пользователя тип значений, которые будут обнаружены в URL, определенном атрибутом value.

Элемент param специфицирует набор значений, которые могут требоваться механизму отображения. В начале декларации object может появиться любое число элементов param. Синтаксис имен и значений предполагается понятным механизму отображения. Имена и значения передаются механизму отображения, как стандартный ввод. Рассмотрим пример. Здесь предполагается, что механизм отображения может воспринять два параметра, которые определяют начальную высоту и ширину (часов). Задаем эти начальные параметры равными 40х40 пикселей.

<object classid="http://www.miamachina.it/ahalogclock.py">
<param name="height" value="40" valuetype="data">
<param name="width" value="40" valuetype="data">

Этот агент пользователя не может исполнять приложения, написанные на языке python.

</object>

Так как значение по умолчанию valurtype для элемента param равно "data", мы можем заменить вышеприведенную декларацию следующей:

<param name="height" value="40">
<param name="width" value="40">

или

<param name="height" value="40" data>
<param name="width" value="40" data>

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

<object classid="html://www.gifstuff.com/gifappli" standby="loading elvis.">
<param name="init_values" value="./images/elvis.gif">
</object>

Здесь установлен также атрибут standby так, что агент пользователя может отобразить сообщение в процессе загрузки механизма отображения. Механизмы отображения локализуются с помощью URL. Первая секция абсолютного URL характеризует протокол, используемый для передачи данных, которые указаны в URL. Для HTML-документов протокол обозначается как HTTP. Но возможны и другие варианты, например, в случае использования механизма отображения java вы можете использовать URL, начинающиеся со слова Java, а для аплетов activex - "clsid". В предлагаемом примере в HTML-документ введен Java-аплет.

<object classid="java:program.start">
</object>

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

<object codetype="application/octet-strim" classid="java:program.start">
codebase=http://fooo.bar.com/java/myimplement/
</object>

В следующем примере с помощью атрибута classid через URL, который начинается с протокольной информации "clsid", специфицирован механизм activex.

<object classid="clsid:663c8fef-1ef9-11cf-a3db-080036f12502"
data=http://www.acme.com/ole/clock.stm>
Это приложение не поддерживается.
</object>

Для декларирования механизма отображения так, чтобы он не запускался в процессе прочтения агентом пользователя, нужно в элементе object установить булеву переменную declare. В то же время вы должны идентифицировать декларацию с помощью атрибута id в элементе object.

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

Последующий пример иллюстрирует то, как можно специфицировать значения исполнительных параметров, которые являются объектами. В этом примере мы посылаем текст гипотетическому механизму его отображения. Механизм отображения распознает параметр, названный "font". Значение этого параметра само является объектом, который управляет использованием определенного шрифта. Взаимоотношение этого объекта и механизма отображения устанавливается путем присвоения id "tribune" декларации объекта шрифта и обращением к нему из элемента param.

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

Выравнивание объектов

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

17. Изображения. Элемент img

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

src = URL

Этот атрибут специфицирует положение (указатель на) ресурса, содержащего изображение. Общепринятые форматы: GIF, JPG, PNG.

align = bottomiddle|top|left|right

Применение не рекомендуется. Атрибуты определяют положение изображения по отношению к окружающему тексту.

Элемент IMG вводит изображение в текущий документ в точке его описания. Но тем не менее, рекомендуется вводить рисунок в текст с помощью элемента object. Рассмотрим, как семейное фото может быть включено в документ.

<img src="html://www.somecompany.com/people/ian/vocation/family.png"

Это же может быть сделано с помощью object следующим образом.

<object data=http://www.somecompany.com/people/ian/vocation/family.png

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

18. Введение аплетов. Элемент applet

<!element applet - - (param | %inline) *>
<!attlist applet

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

codebase = URL

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

code = cdata

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

name = cdata

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

width = length

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

height = length

Этот атрибут специфицирует исходную высоту для области отображения аплета.

align = top|middle|bottom|left|right

Этот атрибут специфицирует положение объекта по отношению к окружающему тексту.

archive = cdata

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

object = cdata

Этот атрибут присваивает имя ресурсу, который содержит последовательное представление аплета. Аплет приводится к стандартному виду. Используется метод start().

Этот элемент, поддерживаемый всеми java-броузерами, позволяет разработчикам встраивать Java-аплеты в HTML-документы. Содержимое аплетов используется агентом пользователя как альтернатива, если он не поддерживает данный элемент. При прочих условиях его содержимое должно игнорироваться. Ниже приведен пример Java-аплета.

<applet code="bubbles.class" width="500" height="500">
java-аплет, который рисует движущиеся пузыри.
</applet>

Эту запись можно переписать в другой форме.

<object codetype="application/octet-stream"
classid="java:bubbles.class"

java-аплет, который рисует движущиеся пузыри.
</object

Исходные данные можно передать аплету через элемент param

<applet code="audioitem" width="15" height="15">
<param name="snd" value="hello.au|welcome.au">
java-аплет, который исполняет приветственную мелодию.
</applet>

Вариант, базирующийся на object, представлен ниже.

<object codetype="application/octet-stream"
classid="audioitem"
width="15" height="15">
<param name="snd" value="hello.au|welcome.au">
java-аплет, который исполняет приветственную мелодию.
</object>

19. Введение HTML-документа в другой HTML-документ

Иногда возникает необходимость не связи с другим HTML-документом, а полного его включения в текст. Для решения такой задачи рекомендуется использовать элемент object с атрибутом data. Ниже следующая строка включит содержимое file_to_include.html в позицию документа, где размещен элемент object.

<object data="file_to_include.html">
warning: file_to_include.html could not be included.
</object>

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

20. Введение карты изображения в html-документ

20.1. Карты изображения клиента

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

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

shape = default|rect|circle|poly

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

coords = length-list

Этот атрибут специфицирует положение и форму области на экране. Число и порядок значений зависит от определенной формы. Возможны комбинации:

Начало координат размещено в верхнем левом углу объекта. Значения координат выражаются в пикселях или в процентах.

Для элемента object описан также булев атрибут shapes, который определяет то, что объект является картой изображения. Ниже представлен пример с картой изображения клиента.

<object data=:navbar.gif" shapes>
<a href="guide.html" shape="rect" coords="0,0,118,28">access guide</a> |
<a href="shotcut.html" shape="rect" coords="118,0,184,28">go</a> |
<a href="search.html" shape="circ" coords="184,200,60">search</a> |
<a href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">top ten</a>
</object>

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

20.2. Карты изображения клиента с map и area

Элементы map и area предоставляют альтернативный механизм для карт изображения клиента.

<!element map - - (area)*>

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

Несколько элементов (object, img и input) имеют атрибут usemap = URL для спецификации карты изображения клиента описанной элементами map и area.

Рассмотрим пример, представленный выше, переписанный в терминах MAP и AREA.

<object data=:navbar1.gif" usemap="#map></object>
<map name="map1">

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

Карты изображения сервера

Карты изображения сервера могут представлять интерес в случае, когда карта изображения слишком сложна для стороны клиента. Такая карта может быть создана с помощью элемента img. Для того чтобы сделать это, нужно установить булев атрибут ismap в описании элемента IMG. Соответствующие области должны быть описаны с помощью атрибута usemap. Когда пользователь активирует область карты изображения, соответствующие координаты посылаются непосредственно серверу, где помещен документ. Координаты на экране выражаются в пикселях. Агент пользователя берет новый URL из URL, описанного атрибутом HREF, присоединив к нему символ "?", за которым следуют координаты х и у, разделенные запятой. Например, в предыдущем примере, если пользователь кликнет в области x=10, y=27, то будет получен URL=/cgibin/navbar.map?10,27.

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

<object data="game.gif" shapes>

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

Применение атрибутов элементов img и object для целей управления отображением не рекомендуется, предпочтение, как и раньше здесь отдается стилевым листам. Атрибуты height и width дают агенту пользователя информацию о размере изображения или объекта, что позволяет зарезервировать для него место, а тем временем продолжить отображение документа. Оба атрибута могут иметь значение типа length. Агент пользователя может изменить масштаб, если это необходимо. Атрибуты vspace и hspace специфицируют размер полей вокруг изображения или объекта. Значения по умолчанию этих атрибутов не определено, оно должно быть мало, но не равно нулю.

22. Как специфицировать альтернативный текст?

alt = cdata

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

23. Стилевые листы

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

• Гибкое размещение стилевой информации. Помещение стилевых листов в отдельные файлы упрощает их повторное использование.
• Независимость от стилевых особенностей используемого языка. Данная спецификация HTML не привязывает его к какому-то определенному языку.
• Каскадирование стилевых листов. Эта особенность позволяет совместно использовать стилевую информацию из нескольких источников.
• Зависимость от среды. HTML позволяет описать документ независимым от среды способом, что обеспечивает доступ широкому кругу людей, работающих в различных средах (Windows, X11, Mac, мультимедиа системы и пр.). Стилевые листы позволяют адаптироваться к среде наилучшим образом, используя все предоставляемые ей возможности.
• Альтернативные стили. Разработчик может предложить пользователю несколько альтернативных стилей представления данных. Например, отображение с мелкими или крупными шрифтами, с или без графических объектов и т.д.

HTML-документ может содержать стилевые рекомендации внутри, но можно их импортировать и извне. Синтаксис стилевых правил определяется языком стилевых листов CSS (Cascading Style Sheets), который не является частью HTML. Так как агент пользователя должен осуществлять разбор стилевых инструкций, пользователь обязан декларировать, какой стилевой язык он использует. Можно использовать элемент META для установки стилевого языка по умолчанию. Так для установления в качестве стилевого языка по умолчанию CSS, в head документа нужно включить следующую декларацию.

<meta http-equiv="content-style-type" content="text/css">

Стилевой язык может быть задан также в http-заголовках. Например:

content-style-type: text/css

Если использовано несколько деклараций стилевого языка, работает самая последняя декларация. Если нет явной декларации стилевого языка, по умолчанию устанавливается CSS. HTML-элементы и атрибуты определяют начало стилевого листа. Конец стилевого листа определяется открытым разграничителем конечной метки, за которым следует начальный символ имени SGML [a-za-z]. Агент пользователя должен иметь соответствующий хандлер стилевого листа.

Одним из строчных стилевых атрибутов является style = Cdata. Этот атрибут специфицирует стилевую информацию для текущего элемента. Ниже приведен пример задания цвета и размера шрифта в тексте параграфа.

<p type="text/css" style="font-size: 12pt; color: fuschia">aren't style sheet wonderful?

Декларация типа имя: значение является конструкцией языка CSS. Если стиль планируется использовать повторно в нескольких элементах, более корректным будет применение элемента style, а не атрибута style, который носит одноразовый характер.

23.1. Стилевая информация заголовка. Элемент style

<!element style - - cdata -- стилевая информация --
<!attlist style

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

type = cdata

Этот атрибут специфицирует язык стилевого листа (заменяет значение по умолчанию). Стилевой язык специфицируется также как и тип среды Интернет (internet media type) (т.е. "text/css").

media cdata-list

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

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

Следующая декларация CSS style устанавливает рамку вокруг каждого Н1 элемента в документе и центрирует ее на странице.

<head>
<style type="text/css">

Для спецификации того, что этот стиль информации должен применяться только для Н1-элементов определенного класса, модифицируем эту запись следующим образом.

<head>
<style type="text/css">

И наконец, для того чтобы ограничить зону действия стилевой информации одним случаем Н1, установим атрибут ID.

<head>

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

<head>

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

<head>

23.2. Типы среды

HTML позволяет разработчику конструировать документы, структура которых не зависит от специфических свойств среды. В результате пользователь может просматривать этот документ с использованием самых разных агентов пользователя: на персональной ЭВМ, рабочей станции, Х-терминале, специально приспособленном телефонном аппарате и т.д..

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

<head>

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

<head>
<link href="docl-screen.css" rel="stylesheet"

23.3. Внешние стилевые листы

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

Сначала специфицируются постоянные (persistent) внешние стилевые листы (например, из файла mystyle.css).

<link href="mystyle/css" rel="stylesheet">

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

<link href="mystyle/css" title="compact" rel="stylesheet">

Добавление ключевого слова "alternate" к атрибуту rel делает стилевой лист альтернативным.

<link href="mystyle/css" title="medium" rel="alternate stylesheet">

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

Агент пользователя должен обеспечить средства выбора стилей для пользователей. Значение атрибута title предоставляет имя, которое может использоваться при выборе стиля. В предлагаемом примере определено два альтернативных стиля, названных "compact". Если пользователь выберет стиль "compact", будут применены оба внешних стилевых листа, а также стилевой лист "common.css" (применяется всегда, так как атрибут title не установлен). Если пользователь выберет стиль "big print", агент пользователя применит файлы "bigprint.css" и "common.css".

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

Ниже предлагается вариант с элементами link и style.

<link rel=stylesheet href="corporate.css">
<link rel=stylesheet href="techreport.css">
<style type="text/css">

23.4. Установка именованного стиля по умолчанию

23.5. Форматирование

Для задания цвета фона может использоваться атрибут bgcolor = color (хотя это и не рекомендуется). Применение стилевых листов для решения этой задачи предпочтительнее.

Другой проблемой форматирования является выравнивание текста. Для этой цели служит атрибут Align = left|center|right|justify. Здесь справедливы те же замечания, что и в случае атрибута bgcolor. Ниже предлагается пример решения задачи выравнивания с использованием стилевого листа.

<head>
<style>
h1 { test-align: center }
</style>
</head>
<h1> how to carve wood </h1>

Следует иметь в виду, что приведенный текст отцентрирует все заголовки Н1. Можно ограничить зону действия данного стиля, установив атрибут ID.

<head>
<style type="text/css">
h1.wood {text-align: center}
</style>
</head>
<h1 id="wood"> how to carve wood </h1>

Аналогично для выравнивания по правому и левому полям с использование атрибута align:

<p align="justify"> ..далее следует текст..

То же с использованием стилевого листа:

<head>
<style type="text/css">
p.mypar {text-align: justify}
</style>
</head>
<p id="mypar"> ..далее следует текст..

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

<div align="justify">
<p> . текст первого параграфа..
<p> . текст второго параграфа..
<p> . текст третьего параграфа..
</div>

Решение той же задачи с использованием каскадирования стилевых листов:

<head>
<style type="text/css">
div.mypars {text-align: justify}
</style>
</head>
<div id="mypars">
<p> . текст первого параграфа..
<p> . текст второго параграфа..
<p> . текст третьего параграфа..
</div>

Для выравнивания всего документа с использованием каскадирования стилевых листов можно записать:

<head>
<style type="text/css">
body {text-align: justify}
</style>
</head>
<body>
. текст документа, подлежащий выравниванию .
</body>

Элемент center работает также как и элемент div с атрибутом align="center". Использование center не рекомендуется.

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

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

<img align="left" src=http://foo.com/animage.gif>

Существует атрибут для элемента br, который управляет обтеканием объекта текстом. Это clear= none|left|right|all, который определяет то, где должна появиться следующая строка в процессе отображения.

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

Если атрибут clear="none", следующая строка начнется сразу под уже имеющимся текстом.

Если же clear = "left" или all, то мы получим:

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

<style type="text/css">
br { clear: left }
</style>

Для того чтобы такая схема размещения текста сработала только раз, следует воспользоваться атрибутом ID.

<head>
...
<style type="text/css">
br.mybr }clear: left}
</style>
</head>
<body>
...
....
</body>

23.7. Элементы управления шрифтами: tt, i, b, big, small, strike, s и u

23.8. Элементы модификаторов шрифтов: font и basefont

23.9. Элемент hr

<!element hr - o empty>

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

noshade

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

size = length

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

width = length

(Не рекомендуется) Этот атрибут определяет ширину линии (по умолчанию 100%), то есть линия пресекает весь экран.

Пример использования элемента hr.

<hr width="50%" align="center">
<hr size="5" width="50%" align="center">
<hr noshade size="5" width="50%" align="center">

24. Рамки (frames)

24.1. Элемент frameset

<!element frameset - - ((frameset|frame) + & noframes?)>
<!attlist frameset

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

rows = length-list

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

cols = length-list

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

Все рамки предполагаются прямоугольными. Установка атрибута rows определяет число рамок по горизонтали, а атрибут cols задает число рамок по вертикали. Таким образом, задается сетка рамок. Если атрибут rows не задан, каждая колонка занимает всю длину страницы. Если атрибут cols не задан, каждый ряд занимает всю ширину страницы. Если не заданы оба атрибута, на странице присутствует одна рамка, занимающая всю страницу.

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

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

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

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

В следующем примере создается решетка 2х3

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

В следующем примере предполагается, что высота окна равна 1000 пикселей. Для первой рамки выделяется 30% общей высоты (300 пикселей). Для второй рамки выделено точно 400 пикселей. Это оставляет 300 пикселей на две оставшиеся рамки. Высота четвертой рамки определена как "2*", а третей - *, следовательно, третья получит 100, а четвертая - 200 пикселей.

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

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

<frameset rows="33%,33%,34%" >
.содержимое первой рамки.

24.2. Элемент frame

<!element frame - o empty>
<!attlist frame

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

name = cdata

Атрибут присваивает имя текущей рамке. К этому имени можно адресоваться.

src = url

Этот атрибут специфицирует положение исходного документа, содержимое которого заключено в рамку.

noresize

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

scrolling = auto|yes|no

Этот атрибут специфицирует информацию о возможности прокрутки информации в данной рамке. Возможные значения:

frameborder=1|0

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

marginwidth = length

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

marginheight = length

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

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

<html>
<frameset cols="33%, 33%, 33%">

В результате будет получена раскладка рамок, показанная ниже не рисунке.

Ниже приведенный пример содержит в себе ошибку, так как текст второй рамки включен в описание самой рамки.

<html>
<frameset cols="50%,50%">

Существует атрибут target = cdata, который специфицирует имя рамки, где должна быть размещена информация. Путем присвоения с помощью атрибута name имени рамке разработчик может ссылаться на нее, как на адрес связей. Атрибут target может быть установлен для элементов, создающих связи (А, link), карты изображения (area) и формы (form). Ниже предлагается пример, где target позволяет динамически изменять содержимое рамки:

<html>
<frameset rows="50%,50%">

Затем в init_dynamic.html мы организуем связь с рамкой под именем "dynamic"

<html>
<body >
. начало документа .
now you may advance to

Активирование любой связи приводит к открытию документа в рамке с именем "dynamic", в то время как другие рамки ("fixed") остаются со своим исходным содержимым.

24.3. Установка для связей адресов по умолчания

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

<html>
<head>
<base target="dynamic">
</head>
<body>
. начало документа .

now you may advance to <a href="slide2.html">slide 2.</a>
. продолжение документа .
you're doing great. now on to
<a href="slide3.html">slide 3.</a>
</head>
</html>

Существует несколько методов сделать рамку адресом связи.

1. Если элемент имеет атрибут target, указывающий на известную рамку, тогда при активации элемента, документ связанный с этим элементом, будет загружен в данную рамку.
2. Если элемент не имеет атрибута target и имеет элемент base, тогда именно base определяет рамку, куда будет произведена загрузка.
3. Если элемент и base не имеют атрибута target, документ, соответствующий элементу, будет загружен в рамку, содержащую этот элемент.
4. Если любой адрес (target) указывает на рамку f, агент пользователя создаст новое окно и рамку, припишет имя f этой рамке и загрузит документ, соответствующий элементу, в эту новую рамку.

Имя рамки должно начинаться с буквы (a-za-z). Агент пользователя должен игнорировать любые другие имена. Существует несколько имен, зарезервированных для специальных целей.

Агенты пользователя, которые не поддерживают рамки, должны отображать секцию body, которая следует за самым внешним frameset документа. Агенты пользователя, которые поддерживают рамки, должны игнорировать эту секцию body.

24.4. Элемент noframes

<!element noframes - - (#pcdata, ((body,#pcdata)|

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

Предположим, что имеется frameset, определенный в "top.html", который отображает документ "main.html", и оглавление этого документа ("table_of_contents.html"). Тогда содержимое "top.html":

<html>
<frameset cols="50%,50%">

Когда пользователь читает "top.html", а агент пользователя не поддерживает работу с рамками, на экране ничего не появится, если в секции body ("top.html") нет альтернативного текста. Если мы введем "table_of_contents.html" и "main.html" непосредственно в body, задача ассоциации документов будет решена. Но при этом мы можем заставить агента пользователя, который поддерживает рамки, скопировать один и тот же документ дважды. Более экономно включить оглавление в начало "main.html", в элемент noframes:

<html>
<body>
<noframes>
. оглавление .
</noframes>
. остальная часть документа .
</body>
</html>

Элемент noframes может использоваться в frameset-секции документа. Например:

<!doctype html public "-//w3c//dtd HTML 4.0 frameset//en"
"http://www.w3.org/tr/rec-html40">
<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.</a>
</noframes>
</frameset>
</html>

24.5. Элемент iframe

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

longdesc = uri

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

name = cdata

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

width = length

Ширина рамки.

height = length

Высота рамки.

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

<iframe src="foo.html" width="400" height="500"
scrolling="auto" frameborder="1">
[Ваш агент пользователя не поддерживает рамки или сконфигурирован без поддержки рамок]. Кликните для извлечения <a href="foo.html"> сопряженного документа. </a>]
</iframe>

Размеры этих рамок не могут быть изменены.

25. Формы

HTML-форма представляет собой часть документа, содержащая обычный текст, разметку (markup) и специальные элементы управления, называемые controls. controls служат для приема и обработки текста, вводимого пользователем. Форма - это аналог стандартного бланка, заполняемого пользователем. Заполненная форма может быть послана по почте другому пользователю, или передана программе для последующей обработки. Каждый control (графа бланка) должен иметь имя, а его значение определяется его типом. Ниже приведен пример формы, где используются метки и различного типа кнопки:

<form action="http://somesite.com/prog/adduser" method="post">
<p>
<label for="firstname">first name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">last name: </label>
<input type="text" id="lastname"><br>
<label for="email">email: </label>
<input type="text" id="email"><br>
<input type="radio" name="sex" value="male"> male<br>
<input type="radio" name="sex" value="female"> female<br>
<input type="submit" value="send"> <input type="reset">
</p>
</form>

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

Кнопки

Разработчики могут создавать три типа кнопок:

• submit-кнопки. При активации эти кнопки преадресуют форму адресату. Форма может содержать более одной submit-кнопки.
• Кнопки сброса: При активации эти кнопки возвращают все controls в исходное состояние.
• Кнопки нажатия. Эти кнопки не имеют какого-либо фиксированного назначения. Каждой такой кнопке может быть поставлен в соответствие, например, скрипт клиента.

Разработчик создает кнопку с помощью элемента button или input. Следует иметь в виду, что элемент button предоставляет более широкие возможности, чем input.

Переключатели

Переключатели (chekbox; и радио-кнопки) представляют собой двухпозиционные приборы, которые могут находиться в состоянии on/off (вкл/выкл). Пользователь может переводить этот переключатель из одного состояния в другое. Переключатель находится в состоянии "on", когда установлен соответствующий атрибут управляющего элемента.

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

Радио-кнопки

Радио-кнопки схожи с переключателями. Но здесь при наличии нескольких кнопок, относящихся к одному имени control, перевод одной кнопки в состояние "on" переводит все другие кнопки с тем же именем в состояние "off". Для создания радио-кнопок используется элемент input.

Меню

Меню предоставляет пользователю выбор из нескольких возможностей. Для формирования меню используется элемент select, в сочетании с элементами optgroup и option.

Ввод текста

Разработчик может создать два типа controls, которые позволяют вводить текст. Элемент input создает однострочный control для ввода, а textarea предназначен для многострочного ввода. В обоих случаях введенный текст становится текущим значением control.

Выбор файла

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

Скрытые элементы управления control

Разработчик может создать control, которые не отображаются на экране, но величины которых заносятся в форму. Для формирования скрытого control используется элемент input.

Объектные control

Разработчик может ввести в форму общие объекты, так что соответствующие величины будут заноситься в форму. Для работы с объектными control используется элемент object.

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

25.2. Элемент input

<!entity % inputtype
"(text | password | checkbox | radio | submit | reset |
file | hidden | image | button)" >
<!-- имя атрибута необходимо для всех кроме submit & reset -->

Определение атрибутов
type = text|password|checkbox|radio|submit|reset|file|hidden|image|button

Этот атрибут специфицирует тип создаваемого control. Значение по умолчанию "text".
name = cdata

Этот атрибут присваивает имя control.
value = cdata

Этот атрибут специфицирует начальное значение control.
size = cdata

Этот атрибут сообщает агенту пользователя исходную ширину control. Ширина задается в пикселях, за исключением случая, когда тип атрибута "text" или "password". В этом варианте ширина измеряется числом символов.

maxlength = number

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

checked.

Когда тип атрибута "radio" или "checkbox", этот булев атрибут указывает, что кнопка нажата. Агент пользователя должен игнорировать этот атрибут для всех других видов control.

src = url

Когда тип атрибута "image", этот атрибут специфицирует положение изображения, которое будет использовано для украшения кнопки.

Атрибут type элемента input определяет то, какой управляющий элемент создан.

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

<form action="http://somesite.com/prog/adduser" method="post">
<p>
first name: <input type="text" name="firstname"><br>
last name: <input type="text" name="lastname"><br>
email: <input type="text" name="email"><br>
<input type="radio" name="sex" value="male"> male<br>
<input type="radio" name="sex" value="female"> female<br>
<input type="submit" value="send"> <input type="reset">
</p>
</form>

Следующий пример представляет собой анкету, предложенную выше, дополненную кнопками submit и reset. Кнопки содержат изображения, для чего использован элемент img.

<form action="http://somesite.com/prog/adduser" method="post">
<p>
first name: <input type="text" name="firstname"><br>
last name: <input type="text" name="lastname"><br>
email: <input type="text" name="email"><br>
<input type="radio" name="sex" value="male"> male<br>
<input type="radio" name="sex" value="female"> female<br>
<button name="submit" value="submit" type="submit">
send<img src="/icons/wow.gif" alt="wow"></button>
<button name="reset" type="reset">
reset<img src="/icons/oops.gif" alt="oops"></button>
</p>
</form>

Внешне данная форма будет выглядеть для пользователя следующим образом:

25.3. Элемент isindex

<!element isindex - o empty>
<!attlist isindex

Элемент использовать не рекомендуется, вместо него лучше применять элемент input.

Описание атрибута
prompt = cdata

Атрибут специфицирует строку приглашения для ввода. Служит для ввода одной строки пользователем. Например:

<isindex prompt="enter your name: ">

Та же задача решается с использованием элемента input следующим образом (рекомендуемый вариант):

<form action="." method="post">
enter your name: <input type="text">
</form>

25.4. Элемент button

<!element button - - (%flow;)* -(a|%formctrl;|form|fieldset) -- клавиша -->
<!attlist button

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

name = cdata

Этот атрибут присваивает имя кнопке.
value = cdata

Этот атрибут присваивает значение кнопке.
type = button | submit | reset

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

Элемент button с типом "submit", содержащий изображение (т.е. элемент img), очень похож на элемент input с типом "image". Но их поведение на фазе отображения различно. В этом контексте элемент input предполагает плоское изображение, а button - объемное (кнопка нажимается и отбрасывает тень). Ниже приведен пример использования элементов input и button:

<form action="http://somesite.com/prog/adduser" method="post"><p>
first name: <input type="text" name="firstname"><br>
last name: <input type="text" name="lastname"><br>
email: <input type="text" name="email"><br>
<input type="radio" name="sex" value="male"> male<br>
<input type="radio" name="sex" value="female"> female<br>
<button name="submit" value="submit" type="submit">
send<img src="/icons/wow.gif" alt="wow"></button>
<button name="reset" type="reset">
reset<img src="/icons/oops.gif" alt="oops"></button>
</p>
</form>

Если используется button с элементом img, рекомендуется применение img-элемента с атрибутом alt, чтобы обеспечить совместимость с агентами пользователя, не поддерживающими графику. Недопустимо использование карты изображения с img в элементе button:

<button>
<img src="foo.gif" usemap=".">
</button>

Элемент button с типом "reset" очень похож на элемент input с типом "reset".

25.5. Элемент select

25.6. Элемент optgroup

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

label = text [cs]

Этот атрибут специфицирует метку опции для группы опций.

Когда форма передается на обработку, каждый из выборов группируется с именем "component-select".

25.7. Элемент textarea

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

name = cdata [ci]

Этот атрибут присваивает имя control.

rows = number [cn]

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

cols = number [cn]

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

Пример использования элемента textarea для создания текстовой области размером 20 строк по 80 колонок. В исходный момент зона содержит только две строки.

<form action="http://somesite.com/prog/text-read" method="post">
<p>
<textarea name="thetext" rows="20" cols="80">
first line of initial text.
second line of initial text.
</textarea>
<input type="submit" value="send"><input type="reset">
</p>
</form>

25.8. Элемент label

<!element label - - (%inline;)* -(label) -- form field label text -->
<!attlist label

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

for = idref [cs]

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

Элемент label может использоваться для привязки информации к другим элементам control (за исключением других элементов label). Ниже приведены два примера использования элемента label.

<form action="..." method="post">
<table>
<tr>
<td><label for="fname">first name</label>
<td><input type="text" name="firstname" id="fname">
<tr>
<td><label for="lname">last name</label>
<td><input type="text" name="lastname" id="lname">
</table>
</form>
<form action="http://somesite.com/prog/adduser" method="post">
<p>
<label for="firstname">first name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">last name: </label>
<input type="text" id="lastname"><br>
<label for="email">email: </label>
<input type="text" id="email"><br>
<input type="radio" name="sex" value="male"> male<br>
<input type="radio" name="sex" value="female"> female<br>
<input type="submit" value="send"> <input type="reset">
</p>
</form>

Для установления неявной связи между меткой и другим control контрольный элемент должен находиться внутри содержимого элемента label. В этом случае label может содержать только один контрольный элемент. В примере две метки неявно поставлены в соответствие двум вводимым текстам:

<form action="..." method="post">
<p>
<label>
first name
<input type="text" name="firstname">
</label>
<label>
<input type="text" name="lastname">
last name
</label>
</p>
</form>

25.9. Элементы fieldset и legend

<!-- #pcdata служит для решения проблемы смешанных данных, согласно спецификации здесь допустимы только whitespace! -->
<!element fieldset - - (#pcdata,legend,(%flow;)*) >
<!attlist fieldset

Определение атрибута элемента legend
align = top|bottom|left|right

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

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

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

<form action="..." method="post">
<p>
<fieldset>
<legend>personal information</legend>
last name: <input name="personal_lastname" type="text" tabindex="1">
first name: <input name="personal_firstname" type="text" tabindex="2">
address: <input name="personal_address" type="text" tabindex="3">
...more personal information...
</fieldset>
<fieldset>
<legend>medical history</legend>
<input name="history_illness"
type="checkbox"
value="smallpox" tabindex="20"> smallpox
<input name="history_illness"
type="checkbox"
value="mumps" tabindex="21"> mumps
<input name="history_illness"
type="checkbox"
value="dizziness" tabindex="22"> dizziness
<input name="history_illness"
type="checkbox"
value="sneezing" tabindex="23"> sneezing
...more medical history...
</fieldset>
<fieldset>
<legend>current medication</legend>
are you currently taking any medication?
<input name="medication_now"
type="radio"
value="yes" tabindex="35">yes
<input name="medication_now"
type="radio"
value="no" tabindex="35">no
if you are currently taking medication, please indicate
it in the space below:
<textarea name="current_medication"
rows="20" cols="50"
tabindex="40">
</textarea>
</fieldset>
</form>

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

26. Выделение элементов

Активный элемент HTML-документа должен быть выделен. Существует несколько способов выделения элемента:

1. Пометить элемент с помощью мышки.
2. Выделить нужный элемент, перемещаясь от элемента к элементу с помощью стрелок или других клавиш.
3. Выбрать нужный элемент, нажав определенную комбинацию клавиш.

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

tabindex = integer

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

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

1. Тем элементам, которые поддерживают атрибут tabindex, присваиваются положительные значения и они просматриваются первыми. Процесс просмотра начинается с меньших значений tabindex и продолжается в направлении больших. Элементы, которые имеют равные значения tabindex должны обрабатываться в порядке их появления в документе.
2. Элементы, для которых атрибут tabindex не определен или не поддерживается, просматриваются в порядке их появления в документе.
3. Те элементы, которым приписано отрицательное значение tabindex, не участвуют в процессе просмотра.

Атрибут tabindex поддерживается элементами a, area, object, input, select, textarea и button. Ниже предлагается пример.

<!doctype html public "-//w3c//dtd html 4.0//en"
"http://www.w3.org/tr/rec-html40/strict.dtd">
<html>
<head>
<title>a document with form</title>
</head>
<body>
...some text...
<p>go to the
<a tabindex="10" href="http://www.w3.org/">w3c web site.</a>
...some more...
<button type="button" name="get-database"
tabindex="1" onclick="get-database">
get the current database.
</button>
...some more...
<form action="..." method="post">
<p>
<input tabindex="1" type="text" name="field1">
<input tabindex="2" type="text" name="field2">
<input tabindex="3" type="submit" name="submit">
</p>
</form>
</body>
</html>

Ключи доступа

accesskey = cdata

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

Нажатие клавиши, соответствующей ключу доступа, приводит к выбору элемента.Действия, которые будут выполнены при выборе, зависят от элемента. Атрибут accesskey поддерживается элементами: label и legend. В приведенном примере клавиша "u" ставится в соответствие элементу управления input.

<form action="..." method="post">
<p>
<label for="fuser" accesskey="u">
user name
</label>
<input type="text" name="user" id="fuser">
</p>
</form>

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

<p><a accesskey="c"
rel="contents"
href="http://someplace.com/specification/contents.html">
table of contents</a>

В системе MS Windows для активации ключа доступа одновременно с ним следует нажать клавишу alt.

Атрибут disabled

Когда этот булев атрибут установлен для control формы, он блокирует данный вид контроля для ввода пользователя. Атрибут disabled поддерживается элементами input, textarea, select, option, object, label и button.

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

<input disabled name="fred" value="stone">

Изменить значение атрибута динамически можно только с помощью скрипта.

Атрибут readonly

Этот булев атрибут при установке запрещает изменение control. Элементы, предназначенные только для чтения, могут быть выбраны, но не могут быть изменены пользователем. Значения control в этом случае передается вместе с формой. Атрибут readonly поддерживается элементами input, text, password и textarea.

27. Скрипты

27.1. Элемент script

27.2. Локальная декларация языка скрипта

27.3. Ссылки на html-документы из скрипта

28. Динамическая модификация документов

28.1. Элемент noscript

28.2. Комментирование скриптов в javascript

28.3. Комментирование скриптов в vbscript

28.4. Комментирование скриптов в tcl

29. Верификация документов

29.1. Каталог образцов SGML

29.2. sgml декларация html 4.0

29.3. SGML декларация