Часть I.
Веб-страницы: язык HTML

"Язык — мясистый снаряд во рту, служащий для подкладки зубам пищи, для распознания вкуса ея, а также для словесной речи, или, у животных, для отдельных звуков."

Владимир Даль

Глава 1.1. Введение в HTML

1.1.1. Что такое HTML?

HTML (HyperText Markup Language) √ это язык, принятый в World Wide Web для создания и публикации Веб-страниц. HTML предоставляет авторам средства для:

• включения в Веб-документы заголовков, текста, таблиц, списков, фотографий и т. п.;
• перехода к другим Веб-страницам посредством щелчка кнопки мыши по гипертекстовой ссылке;
• создания и заполнения форм для транзакций с удаленными службами, например, для поиска информации, бронирования билетов, оформления заказов на товары и т. п.
• непосредственного включения в Веб-документы видеоклипов, звука и других внешних объектов.

Фактически, современная Веб-страница формируется с помощью трех языковых средств:

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

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

Первоначально HTML был разработан Тимом Бернерсом-Ли (Tim Berners-Lee) и его коллегами из CERN Laboratories для обмена текстовыми документами и другими данными между учеными и приобрел популярность благодаря обозревателю Mosaic, авторы которого добавили к нему поддержку графических образов и ряд других полезных качеств. Быстрое развитие Сети в 90-е годы потребовало стандартизации этого языка, и в ноябре 1995 г. по эгидой IETF был создан HTML 2.0. Следующим шагом стала кодификация W3C в январе 1997 г. новой, гораздо более мощной версии HTML 3.2. Наконец, в апреле 1998 г. появился HTML 4.0, который является в настоящее время действующим стандартом языка (в уточненной редакции HTML 4.01, опубликованной в декабре 1999 г.). Именно стандарт HTML 4.0 и будет предметом нашего рассмотрения в данной части книги.

По мере своего развития HTML не только приобретал новые возможности. Часть первоначально введенных в него понятий на сегодня официально объявлены морально устаревшими (deprecated), поскольку они лучше выражаются новыми средствами языка. Автор является сторонником создания HTML-документов в соответствии с требованиями стандарта (между прочим, почти вся эта книга написана на строгом HTML 4.0). Поэтому в этой главе мы не описываем и не используем морально устаревшие элементы и атрибуты языка, хотя они по традиции поддерживаются обозревателями и их можно встретить на многих Веб-страницах; их краткое описание можно найти в Приложении 10. По той же причине не упоминаются в нашем справочнике ни полностью устаревшие (obsolete) элементы языка HTML, ни те дополнения к нему, которые были сделаны разработчиками популярных обозревателей, но не являются стандартными. Вместе с тем, мы увязываем стандарт языка с его реализацией в обозревателях Microscape и потому приводим для каждого элемента сведения о том, как он поддерживается этими обозревателями.

1.1.2. Составные элементы HTML-документа

1.1.2.1. Элементы и теги

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

Элементы — это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега. Тег — это специальный текст, заключенный в угловые скобки "<" и ">". Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты "/". Например, элемент EM (выделение текста) выглядит так:

<EM>выделяемый текст</EM>

Имена элементов могут быть набраны в любом регистре, т. е. <EM> и <em> равнозначны.

Элементы должны либо следовать друг за другом, либо быть вложены один в другой. Если начальный тег <EM> расположен внутри элемента <P>…</P>, то и конечный тег </EM> должен быть расположен внутри этого элемента.

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

<UL>
  <LI>Первый пункт списка без конечного тега
  <LI>Второй пункт списка с необязательным конечным тегом</LI>
  <LI>Третий пункт списка без конечного тега
</UL>

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

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

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

1.1.2.2. Атрибуты

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

<IMG src="mylogo.gif" alt="Юрий Лукач">

Атрибуты всегда включаются в начальный тег элемента и имеют вид:

имя_атрибута="значение_атрибута"

Значение атрибута может быть заключено в одинарные или двойные кавычки. Кавычки можно опустить, если значение атрибута состоит только из латинских букв (A-Za-z), цифр (0-9), дефисов ("-"), подчеркиваний ("_"), двоеточий (":") и точек (".").

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

1.1.2.3. Специальные символы

Ряд символов в языке HTML зарезервирован и должен представляться специальным образом:

Для некоторых символов, отсутствующих на клавиатуре, также есть специальные обозначения. Например, символ авторского права ╘ представляется как &copy;. Полный перечень специальных символов приведен в Приложении 6.

При желании авторы могут пользоваться и числовой кодировкой символов в стандарте Unicode. При этом символ может быть задан своим десятичным кодом (&#код;) или шестнадцатеричным кодом (&#xкод;). Например &#169; представляет символ авторского права ╘, а &#x410; √ русскую букву А.

Поддержка:  Некоторые специальные символы не отображаются.
            Некоторые специальные символы не отображаются;
              шестнадцатеричные коды символов не распознаются.

1.1.2.4. Комментарии

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

• начинайте комментарий с символов "<!--",
• завершайте комментарий символами "-->",
• не используйте внутри комментария символов "--".

Пример комментариев:

<!-- это комментарий -->
<!-- а вот еще комментарий,
     занимающий более одной строки -->

1.1.3. Типы данных HTML

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

CDATA

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

ID и NAME

Значения атрибутов типа ID и NAME должны начинаться с латинской буквы (A-Za-z) и состоять только из латинских букв (A-Za-z), цифр (0-9), дефисов ("-"), подчеркиваний ("_"), двоеточий (":") и точек ("."). Эти значения зависят от регистра. Они отличаются тем, что NAME может содержать специальные символы, а ID не может.

IDREF и IDREFS

Значения типа IDREF и IDREFS указывают на идентификаторы, т. е. на значения атрибута id других элементов. Значение типа IDREF — это единственный идентификатор, а значение типа IDREFS — это список идентификаторов, разделенных пробелами. IDREF и IDREFS зависят от регистра.

Число

Числовые значения атрибутов — это десятичные числа, состоящие хотя бы из одной цифры (0-9).

Текст

Текстовые значения атрибутов — это значения типа CDATA, представляющие собой осмысленный текст.

URI

Значения атрибутов типа URI — это унифицированные идентификаторы ресурсов (полные или относительные), синтаксис которых должен соответствовать Приложению 2.

Цвет

Цветовые значения атрибутов могут задаваться либо шестнадцатеричным числом с префиксом "#" вида "#rrggbb", задающим RGB-код цвета, либо одним из 16-ти символических имен, приведенных в Таблице П9.1. Имена цветов не зависят от регистра.

Примечание. Обозреватели Microscape дополнительно поддерживают имена цветов, перечисленные в Таблице П9.2.

Пиксели

Значения этого типа — целые числа, задающие количество пикселей.

Размер

Значения этого типа — либо целые числа, задающие количество пикселей, либо доли в процентах от размера по горизонтали или вертикали: например, 50% означает половину всего размера, а 50 означает 50 пикселей.

Кратный размер

Кратный размер — это либо целое число, задающее количество пикселей, либо доля в процентах от размера по горизонтали или вертикали, либо относительный размер вида i*, где i — целое число. При распределении пространства обозреватель сначала выделяет место для размеров, заданных в числах и процентах, а затем разделяет оставшееся пространство между элементами с относительными размерами. Элементу размером 3* будет выделено пространство в три раза большее, чем элементу размером 1*. Значение * эквивалентно 1* и часто означает "заполнить оставшееся пространство".

Кратные размеры

Значения этого типа — список кратных размеров, разделенных запятыми.

Тип файла

Значения атрибутов этого типа задают типы файлов MIME для связанных или вложенных ресурсов. Список всех зарегистрированных типов содержится в Приложении 4.

Типы файлов

Значения этого типа — список типов файлов, разделенных запятыми.

Код языка

Значения атрибутов этого типа задают код языка согласно Приложению 8. Код языка не зависит от регистра и не должен содержать пробелов.

Кодировка и Кодировки

Значения этого типа задают имя таблицы кодировки символов согласно Приложению 7. Значение типа Кодировка — это единственное имя таблицы кодировки, а значение типа Кодировки — это список имен, разделенных пробелами или запятыми. Они не зависят от регистра.

Символ

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

Дата-время

Значения атрибутов этого типа задают дату и время в формате ГГГГ-ММ-ДДТчч:мм:ссУВЗ, где ГГГГ — четырехзначный номер года, ММ — двузначный номер месяца (01 — 12), ДД — двузначный номер дня (01 — 31), чч — двузначный номер часа (00 — 23), мм — двузначный номер минуты (00 — 59), cc — двузначный номер секунды (00 — 59) и УВЗ — указатель временной зоны. Отметим, что буква Т, отделяющая дату от времени — это именно прописная латинская буква Т. Если какой-либо из компонентов времени неизвестен, то используется 00. Указатель временной зоны может принимать следующие значения:

• Z (прописная), указывающая на время по Гринвичскому меридиану (UTC, Universal Coordinated Time);
• +чч:мм, положительная разница с временем UTC в часах и минутах;
• -чч:мм, отрицательная разница с временем UTC в часах и минутах.

Типы ссылок

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

<LINK rev="Made" href="mailto:somebody@somewhere.com">

Устройства

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

Сценарий

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

Таблица стилей

Значения атрибутов этого типа — таблицы стилей на языке CSS.

Фрейм

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

1.1.4. Общие атрибуты элементов HTML

Ряд атрибутов применим к большинству элементов HTML. Эти атрибуты подразделяются на:

• базовые атрибуты (class, id, style и title), которые определяют общие свойства элементов;
• локализующие атрибуты (dir и lang), которые указывают на свойства языка, на котором написано содержимое элемента;
• обработчики событий, которые определяют реакцию данного элемента на различные события.

1.1.4.1. Идентификатор элемента: атрибут id

Синтаксис: id = ID

Поддержка:  Полное соответствие стандарту (2.0+)
            Полное соответствие стандарту (3.0+)

Атрибут id присваивает элементу имя, уникальное в пределах данного документа. Никакие два элемента не могут иметь одинаковых значений id. Этот атрибут имеет несколько применений в HTML:

• в качестве селектора стилей отдельных элементов;
• в качестве закладки для гиперссылок;
• для указания на конкретный элемент из сценария;
• в качестве имени элемента OBJECT.

В следующем примере атрибут id использован для идентификации двух абзацев:

<P id="firstp">Мой первый абзац.</P>
<P id="secondp">Мой второй абзац.</P>

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

P#firstp { color: navy; background: transparent }
P#secondp { color: black; background: transparent }

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

<P>См. также <A HREF="#firstp">первый абзац</A>.</P>

Этот атрибут применим ко всем элементам, кроме BASE, HEAD, HTML, META, SCRIPT, STYLE и TITLE.

Примечание. Значения атрибутов id и name хранятся в одном пространстве имен, поэтому их значения не могут совпадать в пределах документа. Отметим также, что name может содержать специальные символы, а id нет.

1.1.4.2. Класс элемента: атрибут class

Синтаксис: class = список CDATA

Поддержка:  Полное соответствие стандарту (2.0+)
            Списки имен классов игнорируются (4.0+)

Атрибут class указывает, что элемент является членом определенного класса. В отличие от атрибута id любое количество элементов может относиться к одному классу. Далее, элемент может принадлежать к нескольким классам — в этом случае значением атрибута является список имен классов, разделенных пробелами.

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

Атрибут class особенно полезен в селекторах стилей. Рассмотрим следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
  p { font-size: medium }
  p.note { font-size: small }
</STYLE>
</HEAD>
<BODY>
<P>Обычный абзац</P>
<P class="note">Примечание</P>
</BODY>
</HTML>

Здесь в заголовке документа заданы размеры шрифта для обычных абзацев и для абзацев класса note (примечание). Теперь для того, чтобы включить в текст примечание, достаточно присвоить соответствующему абзацу (т. е. элементу P) атрибут class="note". Именно так построены все примечания в данном справочнике.

Этот атрибут применим ко всем элементам, кроме BASE, HEAD, HTML, META, PARAM, SCRIPT, STYLE и TITLE.

1.1.4.3. Стиль элемента: атрибут style

Синтаксис: style = таблица стилей

Поддержка:  Полное соответствие стандарту (3.0+)
            Полное соответствие стандарту (4.0+)

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

<P>Популярным экранным шрифтом является
  <SPAN style="font-family: Verdana">Verdana</SPAN>.</P>

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

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

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

Этот атрибут применим ко всем элементам, кроме BASE, HEAD, HTML, META, PARAM, SCRIPT, STYLE и TITLE.

1.1.4.4. Титул элемента: атрибут title

Синтаксис: title = текст

Поддержка:  Полное соответствие стандарту, выводится как подсказка (4.0+)
            Не поддерживается

Атрибут title определяет титул элемента и часто используется обозревателями как подсказка (tooltip), которая выводится на экран, когда курсор помещается на данный элемент. Он особенно полезен в элементах A, LINK, IMG и OBJECT, в которых он указывает на титул связанного или вложенного ресурса. Приведем несколько примеров.

Ссылка на почтовый ящик:

<A href="mailto:yurylukach@homepage.com"
  title="Пошлите мне свои замечания">yurylukach@homepage.com</A>

Ссылка на Веб-страницу:

<A href="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html"
  title="Библиотека CGI-сценариев">CGI.pm</A>

Ссылка на альтернативную Веб-страницу:

<LINK rel="Alternate" href="index.ru.html" hreflang=ru lang=ru title="Русская версия">

Ссылка на аплет:

<OBJECT classid="java:Audio.class" codetype="application/java"
  style="width: 400; height: 250"
  standby="Готовы слушать музыку?" title="Моя любимая песня">
  <IMG src="music.gif" alt="" title="Beatles' Yesterday">
  Yesterday √ моя <EM>любимая</EM> песня!
</OBJECT>

Атрибут title полезен также с элементами ABBR и ACRONYM, где он позволяет дать расшифровку сокращения. Примеры:

<P>Он весит 80 <ABBR title="килограммов" lang=ru>кг</ABBR>.</P>
<ACRONYM title="Организация Объединенных Наций">ООН</ACRONYM>

1.1.4.5. Язык элемента: атрибут lang

Синтаксис: lang = код языка

Поддержка:  Распознается, но игнорируется (2.0+)
            Распознается, но игнорируется (3.0+)

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

• некоторые поисковые системы индексируют документы по их языку;
• синтезаторы речи могут использовать правила произношения, определяемые конкретным языком;
• обозреватели могут в зависимости от языка использовать различные шрифты, учитывать правила переноса слов, проверять правописание и т. д.

Значение атрибута lang не зависит от регистра. Список его возможных значений приведен в Приложении 8.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Welcome - Добро пожаловать</TITLE>
</HEAD>
<BODY>
  <H1><SPAN lang=en>Welcome</SPAN> - <SPAN lang=ru>Добро пожаловать</SPAN></H1>
  <P lang=en>This paragraph is in English.</P>
  <P lang=ru>Этот абзац на русском языке.</P>
</BODY>
</HTML>

Основной язык документа может быть задан атрибутом lang в элементе HTML или в поле заголовка HTTP Content-Language.

Этот атрибут применим ко всем элементам, кроме BASE, BR, FRAME, FRAMESET, IFRAME, PARAM и SCRIPT.

Примечание. Атрибут lang не должен использоваться для задания направления вывода текста — оно задается атрибутом dir.

1.1.4.6. Направление вывода текста: атрибут dir

Синтаксис: dir = ltr | rtl

Поддержка:  Полное соответствие стандарту (5.0+)
            Не поддерживается

Атрибут dir определяет направление вывода текста: слева направо (dir="ltr", по умолчанию) или справа налево (dir="rtl"). Всем символам в кодировке Unicode приписано направление, с тем, чтобы текст отображался правильно. Так, латинские и русские буквы выводятся слева направо, а еврейские и арабские √ справа налево.

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

Допустим, например, что русское предложение содержит ивритскую фразу, которая содержит английскую цитату. В этом случае направление вывода ивритской фразы потребует явного указания направления: ивритская фраза, включая английскую цитату, должна быть заключена в элемент SPAN или BDO с атрибутом dir="rtl".

Этот атрибут применим ко всем элементам, кроме BASE, BR, FRAME, FRAMESET, IFRAME, PARAM и SCRIPT.

1.1.4.7. Обработчики событий

Синтаксис: имя_события = сценарий

Поддержка:  Полное соответствие стандарту (4.0+)
            Полное соответствие стандарту (3.0+)

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

Следующий пример использует операторы языка JavaScript для обработки двух событий, связанных с кнопкой "Submit", а именно выводит подсказку в строке состояния, когда курсор мыши попадает на кнопку, и очищает строку состояния, когда курсор мыши оказывается за ее пределами. Обратите внимание, что значения атрибутов заключены в одинарные кавычки из-за того, что двойные кавычки использованы внутри них. Подробно правила обработки событий описаны в гл. 4.11.

<INPUT type=submit
  onmouseover='window.status="Вы заполнили всю форму?";'
  onmouseout='window.status="";'>

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

<META http-equiv="Content-Script-Type" content="text/javascript">

Следующие атрибуты событий применимы ко всем элементам, кроме BASE, BDO, BR, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, PARAM, SCRIPT, STYLE и TITLE. Все они связаны либо с нажатием клавиш на клавиатуре, либо с движением мыши и нажатием ее кнопок.