Теория DHTML

Вадим Беляков, vadimka@novgorod.net

Динамический HTML (DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML страниц с динамически изменяемым содержимым.

Реализация DHTML базируется на непосредственно самом HTML, каскадных таблицах стилей (CSS) и на языке сценариев (JavaScript, VBScript).

Каскадные таблицы стилей можно сравнить со стилевыми файлами любого текстового редактора. С их помощью определяется внешний вид отображаемого HTML - документа: цвет шрифта и фона документа, сам шрифт, его размер, разбивка текста и многое другое. Для каждого элемента, задаваемого определённым тегом HTML, можно определить свой стиль отображения в окне браузера. Например, заголовки первого уровня будут отображаться шрифтом Sans Serif 18pt синего цвета, заголовки второго уровня - Sans Serif 15pt красного цвета, основной текст - Arial 10pt чёрного цвета с одинарным интервалом между строками. Можно создать таблицу стилей и использовать её для всех документов, расположенных на сервере, что придаст стройность и строгость всему Web - сайту.

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

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

Есть ещё одна проблема, связанная с тем, что разные фирмы - разработчики браузеров могут реализовывать собственную объектную модель документов, как это произошло с IE и NN. Поэтому некоторым вебмастерам, использующим DHTML, приходится, в конечном счёте, писать два варианта своих сайтов, чтобы пользователи указанных браузеров могли правильно просматривать их страницы.

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

Общие положения

Каскадные таблицы стилей представляют собой простую технологию определения и присоединения стилей к документам HTML. Стиль - это всё то, что определяет внешний вид документа HTML при его отображении в окне браузера: шрифты и цвета заголовков разных уровней, шрифт и разрядка основного текста, задаваемого в теге абзаца <P>, и т. д. Стиль задаётся по определённым правилам, о которых, собственно говоря, и пойдёт речь в данном цикле статей, а таблица стилей - набор правил отображения, применяемых в документе, к которому присоединена соответствующая таблица стилей.

Таблица стилей - это шаблон, который управляет форматированием тегов HTML в Web - документе. Если Вы работали с текстовым редактором Microsoft Word, то концепция таблицы стилей напомнит Вам концепцию стилевых файлов данного редактора: изменить внешний вид документа Word можно простым изменением присоединённых к нему стилей. Точно также изменить внешний вид документа HTML можно простым изменением присоединённой к нему таблицы стилей.

Для разработки таблицы стилей достаточно немного ориентироваться в языке HTML и быть знакомым с базовой терминологией настольных издательских систем. Как отмечалось выше, таблица стилей представляет собой набор правил форматирования элементов HTML. Эти правила достаточно просты и легко запоминаемы. Например, если необходимо, чтобы в документе все заголовки первого уровня отображались синим цветом и шрифтом с размером равным 16 пунктов, то в таблице следует задать правило:
H1 {color: blue;
font-size: 16pt}

Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Селектором может быть любой тег HTML, для которого определение задаёт, каким образом необходимо его форматировать. Само определение, в свою очередь состоит из двух частей: свойства и его значения, разделённых знаком двоеточия. Назначение свойства очевидно из его названия. В приведённом примере селектором является элемент H1, а определение, записанное в фигурных скобках, задаёт значения двух свойств заголовка первого уровня: цвет шрифта (свойство color) определён как синий (значение blue) и размер шрифта (свойство font-size) определён в 16 пунктов (значение 16 pt). В одном правиле можно задать несколько определений, разделённых символом точка с запятой, как это демонстрируется в приведённом примере.

Созданная только что таблица стилей влияет на форматирование элемента определённого типа: заголовок первого уровня. Её комбинация с другими таблицами стилей определяет окончательное представление документа при его просмотре в окне браузера.

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

Пока всё, в следующей статье будет материал о таблицах стилей в документах.

Эта и другие статьи на сайте pl.hut.ru/.