Язык HTML

Семёнов Ю.А. (ГНЦ ИТЭФ), book.itep.ru

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

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 характеризуется:

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

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

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

1. Синтаксис HTML

Символьные объекты (entity) представляют собой цифровые или символьные имена символов, которые могут быть включены в документ HTML. Эти объекты нужны в тех случаях, когда прямой их ввод по каким-либо причинам невозможен. Эти объекты начинаются с символа & и завершаются точкой с запятой (;).

Элементы в SGML представляют собой структуры или описывают требуемое поведение. Элементы начинаются со стартовой метки (TAG), за которой следует содержание, и завершаются конечной меткой. Стартовая метка обычно записывается как <имя_элемента>, а конечная метка, как </имя_элемента>. Некоторые элементы могут не иметь содержания или конечной метки. "Пустые" элементы не имеют конечной метки. Имена элементов обычно записываются прописными буквами, но HTML использование прописных или строчных букв в именах элементов не регламентировано.

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

Если используется несколько атрибутов/значений, они разделяются пробелами. Порядок их записи не играет роли. По умолчанию SGML требует, чтобы значения были помещены в двойные или одинарные кавычки. Для этих же целей могут использоваться символьные объекты " или " для двойной кавычки и ' для одинарной кавычки. Значения могут содержать помимо латинских букв и цифр символы (-) и (.). Имена атрибутов не чувствительны к тому, прописными или строчными буквами они напечатаны (как правило, их имена записываются в HTML строчными буквами).

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

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

URI. Любой ресурс в WWW - HTML документ, изображение, видео-клип, программа и пр. имеют адрес, который может быть представлен в виде универсального идентификатора ресурса (URI).

Комментарии в HTML имеют следующий синтаксис:




dtd-комментарии выделяются двумя черточками (--) в начале и в конце текста.

HTML DTD начинается с серии описаний каких-то объектов (entities). Описание объекта представляет собой макрос, который может быть развернут где-либо в DTD(в HTML не применим). Когда макрос вызывается (по имени), он разворачивается в строку.

Описание объекта (entity) начинается с ключевого слова <!entity %, за которым следует имя объекта и помещенная в кавычки строка, которая разворачивается. Описание завершается символом >. Развертываемая строка может содержать другие имена объектов. Конкретные значения объекта начинаются с символа "%" и завершается опционно символом ";".

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

<!entity %fontstyle "tt | i | b | big | small">
<!entity %inline "#pcdata | %fontstyle; | %phrase; | %formctrl;">

Большая часть HTML DTD состоит из описаний элементов и их атрибутов. Ключевое слово <!element> открывает описание элемента, а символ > - завершает. Между ними размещается имя элемента, две черточки после имени указывают на то, что стартовая и конечная метки являются обязательными. Одна черточка после имени элемента и последующая буква О указывают на то, что конечная метка может отсутствовать. Две буквы О означают допустимость отсутствия как стартовой, так и конечной метки. После имени может следовать содержимое элемента, которое называется моделью содержимого. Элементы без содержимого называются пустыми (empty). Пустые элементы описываются ключевым словом "empty". Например, <!element ccc - o empty>. ccc - имя элемента; - О говорит о допустимости отсутствия конечной метки. В сочетании с моделью empty это означает, что конечная метка должна отсутствовать.

Модель содержимого описывает то, что может содержать элемент. Определения содержимого могут включать:

Имена допустимых и запрещенных элементов.
dtd-объекты.
Текст документа, отмеченный SGML-конструкцией "#pcdata". Текст может содержать цифровые и именные символьные объекты.

Модель содержимого имеет следующий синтаксис.

(…)	специфицирует группу.
А\|b	Допускается присутствие А и В в любом порядке.
А,В	А должно появиться раньше, чем В.
a&b	a и b должны появиться только один раз, но в любом порядке.
А?	А может появиться не более одного раза.
А*	А может появиться любое число раз, включая 0.
А+	А может появиться один или более раз.

Ниже приведены примеры HTML DTD:

<!element select - - (option+)>

Элемент select должен содержать один или более элементов option.

<!element dl - - (dt|dd)+>

Элемент dl должен содержать один или более dt или dd элементов в любом порядке.

<!element option - o (#pcdata) *>

Элемент option может содержать только текст и символьные объекты.

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

Описание атрибутов начинается с ключевого слова <!attlist>. Описание атрибута включает в себя:

Имя атрибута.
Тип значения атрибута или набор возможных значений.
Значение атрибута может быть определено тремя способами. Когда значение атрибута по умолчанию задано неявно (ключевое слово "#implied"), оно должно быть задано агентом пользователя или наследуется из определения порождающего элемента. Возможны также ключевые слова "#required" (всегда необходимо) и "#fixed" - присвоено фиксированное значение.

Рассмотрим описание элемента map с опционным атрибутом.

<!attlist map name cdata #implied >, здесь тип допустимого значения задан DATA (тип данных SGML). CDATA - представляет собой текст, который может содержать символьный объекты.

Описания атрибутов могут содержать объекты DTD. Например:

<!attlist link %attrs;	-- id, class, style, lang, dir, title -
bref %url @implied	-- url для подключенного ресурса -- >

Объект %attrs разворачивается в:

<!attrlist p		id id #implied -- уникальный идентификатор для данного документа --
	class cdata #implied		-- список значений классов --
	style cdata #implied		-- информация о стиле --
	title cdata #implied		-- рекомендуемые заголовки/расширения --
	lang name #implied		-- [rfc1766] код идентификатор языка --
	dir (ltr\|rtl) #implied		-- direction for weak/neutral text --
	align (left\|center\|right\|justified) #implied >

Аналогично DTD определяет объект %URL как расширение в строку cdata.

<!entity % URL "CDATA" -- термин URL означает атрибут, значение которого равно универсальному указателю ресурса URL (uniform resource locator), см. RFC-1808 и RFC-1738 -->

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

Некоторые атрибуты выполняют роль булевых переменных. Их появление в стартовой метке элемента предполагает, что значение атрибута равно "true" (истинно). Их отсутствие означает, что их значение равно "false" (ложно).

В HTML допускается сжатая форма записи булевых атрибутов:

<option selected> вместо
<option selected="selected">.

3. HTML и URL

World Wide Web (WWW) представляет собой всемирную сеть информационных ресурсов. WWW базируется на трех механизмах, которые обеспечивают доступ к этим ресурсам:

Однородная схема имен для описания положения ресурсов в сети WWW(например, URI).
Протоколы доступа к именованным ресурсам через WWW-сеть (напр., HTTP).
Гипертекст, который обеспечивает простую технику поиска и перемещения (навигации) в сетях WWW (например, HTML).

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

Схема имен механизмов доступа к ресурсам [см. RFC-2068; далее в тексте данного документа ссылки на публикации и сервера, представленные в конце выделены квадратными скобками [].].
Имя машины, где размещается ресурс.
Имя самого ресурса в виде прохода к нему (path).

Примером URI может служить адрес, где размещено описание языка HTML v4.0:

http://www.w3.org/tr/rec-html4/

Этот URI можно воспринимать следующим образом: имеется документ, доступный через протокол HTTP (см. [RFC-2068]), этот документ находится на ЭВМ www.w3.org, проход к нему имеет вид /tr/rec-html4/.

Замечание. Большинство читателей знакомо с термином URL (Universal Resource Locator; [RFC-1738]) URL представляет собой подмножество более общей системы имен URI.

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

Спецификация URL определяет положение документа в сети, но не позицию внутри документа. По этой причине введено понятие URL-фрагмента, который может указывать на определенную часть документа. URL-фрагмент завершается символом #, за которым следует идентификатор указателя (anchor).

Примером такого URL-фрагмента может служить http://store.in.ru/semenov/intro.htm#intr_1, где int_1 - имя метки в тексте документа intro.htm.

Для локальной адресации HTML- документов используется относительные URL, которые не имеют секций протокола и ЭВМ. Относительный URL может содержать компоненты относительного прохода к ресурсу (".." означает положение порождающего URL). Документ RFC-1808 определяет алгоритм работы с относительными URL. Относительный URL может быть частью полного URL. Полный URL можно определить следующим образом:

Если базовый URL завершается символом (/), то он получен путем добавления относительного URL. Например, если базовый URL http://nosite.com/dir1/dir2/, а относительный - gee.html, то полный URL будет выглядеть как http://nosite.com/dir1/dir2/gee.html.
Если базовый URL не завершается /, последнюю секцию базового URL следует рассматривать как ресурс.

Для связи через электронную почту иногда используется специальная разновидность URL - mailto, которая имеет формат:

mailto:e-mail_адрес.

В HTML, URI используются для:

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

Поскольку люди на Земле пока используют различные языки, в которых применяются совершенно не схожие наборы символов, необходимо как-то управлять процессом описания набора символов, используемого в данном документе. Для документов 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 имен цветов:

black="#000000"	white="#ffffff"
silver="#c0c0c0	gray="#808080"
green="#008000"	lime="#00ff00"
olive="#808000"	maroon="#800000"
yellow="#ffff00"	aqua="#00ffff"
red="#ff0000"	blue="#0000ff"
purple="#800080"	teal="#008080"
fuchsia="#ff00ff"	navy="#000080"

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

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.

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

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

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

Можно описать свойства метаданных во внешнем профайле. Профайл может определить свойства вспомогательной системы поиска (help), такой как "автор", "ключевые слова" и т.д..
Программист может установить значения определенных параметров. Это можно сделать внутри документа с помощью meta-элемента. В этом случае профайл определяет имена свойств, которые могут быть заданы с помощью META-элемента. Установить конкретные значения можно и извне, связав метаданные с элементом link. В этом варианте профайл определяет имена соотношений типов, которые может использовать элемент LINK.

Если профайл определен для элемента Head, тот же профайл будет присутствовать во всех элементах META и LINK в заголовке документа. Ниже приведены примеры записи элементов meta.

<!element meta - o empty	-- Базовая метаинформация -->
<!attlist meta %i18n;	-- lang, dir, для использования со строкой содержимого --
http-equiv name #implied	-- имя заголовка http-отклика --
name name #implied	-- Имя метаинформации --
content cdata #required	-- соответствующая информация --
scheme sdata #implied	-- select form of content -->

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

name=Cdata	Этот атрибут определяет имя свойства.
content=Cdata	определяет значение свойства.
scheme=Cdata	определяет схему интерпретации значения свойства.
HTTP-equiv=cdata	может использоваться вместо атрибута name. http-серверы используют этот атрибут при сборе информации для заголовков откликов.

Например, <meta name="interpreter" content="yuri semenov">.

Атрибут lang может использоваться с элементом meta для определения языка для значения атрибута content. Этот атрибут позволяет синтезаторам речи корректно выбрать правила произношения. Например:

<meta name="interpreter" lang="ru" content="semenov">.

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

<meta name="refresh" content="3,http://www.acme.com/intro.html">

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

Атрибут HTTP-equiv может использоваться вместо атрибута name. HTTP-серверы могут работать с именами свойств, заданными атрибутом HTTP-equiv, что позволяет им формировать заголовок HTTP-отклика согласно требованиям RFC-822. Декларация <meta http-equiv="expires" content="Mon, 17 Aug 1998 16:35:08 GMT"> приведет к формированию следующей строки в HTTP-заголовке: expires: Mon, 17 Aug 1998 16:35:08 GMT. Это позволяет определить время доступности свежей копии документа.

Одним из важных функция элемента meta является описание ключевых слов для поисковых систем. Например:

<meta name="keywords" content="information, retrieval, indexing">

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

<!entity % block "(%blocklevel | %inline)*">
<!entity % color "cdata" - a color using srgb: #rrggbb as hex values -->

<!entity % bodycolors "bgcolor		%color #implied
	text	%color #implied
	link	%color #implied
	vlink	%color #implied
	alink	%color #implied">

<!element body o o (%block) -(body) +(ins|del)>
<!attlist body

	%attrs;	-- %coreattrs, %i18n, %events -
	background %url #implied	-- раскладка текстуры для фона документа --
	%bodycolors;	-- bgcolor, text, link, vlink, alink -
	onload %script #implied	-- документ загружен --
	onunload $script #implied	-- документ удален -->

Для этого элемента стартовая и конечная метки являются опционными. Здесь применимы следующие атрибуты.

Background=URL	указывает на место, где лежит изображение мозаичного образа для фона документа.
text=color	устанавливает фоновый цвет для текста.
Link=color	определяет цвет не посещенных гипертекстных объектов.
vlink=color	определяет цвет посещенных гипертекстных объектов.
alink=color	определяет цвет выбранного пользователем объекта.

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

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

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

<html>
<head>

<title> a study of population dynamics </title>

</head>
<body bgcolor="white" text="black" link="red" alink="fuschia" vlink="maroon">
… текст документа …
</body>
</html>

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

<html>
<head>

<title> a study of population dynamics </title>

	body { background: white color: black}
	a:link { color: red }
	a:visited { color: fuschia }

</style>
</head>
<body>

…текст документа …

</body>
</html>

Использование связанного стилевого листа добавляет гибкости при реализации презентации.

<html>
<head>

<title> a study of population dynamics </title>

…текст документа…

</body>
</html>

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

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

ID = name

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

class = cdata-list

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

Эти атрибуты могут использоваться в следующих случаях:

Атрибут id может использоваться в качестве адреса места назначения гипертекстной связи.
Атрибут id может использоваться скриптами для ссылки на какой-то конкретный элемент.
Стилевые листы могут использовать атрибут ID для того, чтобы определить элемент, на который распространяется действие данного стиля.
Атрибут ID может использоваться для идентификации деклараций object.
Стилевые листы могут использовать атрибут class для идентификации списка элементов, на которые распространяется действие данного стиля.
Атрибуты id и class могут использоваться для целей обработки, например, для идентификации полей при извлечении информации с HTML-страниц в базу данных, при трансляции HTML-документов в другие форматы.

Предположим, что пишется документ о языке программирования. Документ включает в себя некоторое число отформатированных примеров. В этом случае для форматирования используется элемент pre. Пусть также задан цвет фона = green для всех случаев, когда элемент pre принадлежит классу "example".

<head>
<style pre.example { background : green } </style>
</head>
<body>
<pre class = "example" id = "example-1">
… текст программы примера …
</pre>
</body>

5.1 Элемент html

<!entity % html.content "head, body">

<!element html o o (%html.content;)	-- корневой элемент документа -->
<!attlist html %i18n;	-- lang, dir -- >

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

version = cdata [cn]

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

После декларации типа документа оставшаяся часть документа содержит элемент HTML. Таким образом, HTML-документ имеет структуру:

<!doctype html public "-//w3c//dtd html 4.0//en"
"http://www.w3.org/tr/rec-html40/strict.dtd">
<html>
...Заголовок, тело, и т.д. следует здесь...
</html>

Содержание раздела