Динамический HTML

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

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

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

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

Стили и таблицы стилей

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

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

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

Использование стилей

Одним из способов подключения стиля к веб-странице является применение в заголовке документа контейнера :

...

...

описание стилей

...

...

Включенный в данный контейнер атрибут TYPE="text/css" указывает браузеру на содержание в нем описания стилей. Данный атрибут принимает только указанные значения, в случае же когда он не указывается, некоторые браузеры игнорируют всю таблицу стилей.

Непосредственное описание стиля состоит из селектора тега, в котором указываются имя тега данного правила стиля и фигурные скобки, в которых заключены одна или несколько пар объявлений вида «свойство_стиля:значение», разделенных точкой с запятой:

селектор_тега{

свойство_стиля1:значение1;

свойство_стиля2:значение2;

свойство_стиля3:значение3;

}

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

Задание значений

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

Задать цвет (color), также как и в тегах HTML, можно 2 способами: наименованием и численным значением. В спецификации CSS1 ("Спецификации каскадных таблиц стилей, уровень 1"), разработанной Консорциумом World Wide Web (W3C), перечисляются лишь 16 названий цветов, которые можно использовать в таблице стилей:

aqua gray navy silver

black green olive teal

blue lime purple white

fuchsia maroon red yellow

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

Когда цвет задается численным значением, возможно использование шестнадцатеричных значений или значений из тройки вида rgb (red, green, blue), где red, green и blue представлены числами от 0 до 255 или процентными величинами, которые определяют яркость каждой составляющей цвета в RGB. Значениями 255 или 100% указывается максимальная яркость соответствующей составляющей цвета; значениями 0 или 0% – полное отсутствие составляющей цвета.

Единицы длины (length) задаются числом, после которого без пробела савится двухсимвольное обозначение единицы измерения (em, ex, in, cm и др.) Единицы измерения еm и ех обозначают общую высоту шрифта и высоту буквы «х» соответственно. Единицей измерения рх обозначается размер пикселя на экране, а in, cm, mm, pt и рс обозначают дюймы, сантиметры, миллиметры, пункты и цицеро соответственно. Один дюйм содержит 25,4 мм или 72,27 пункта, а в цицеро – 12 пунктов. При значении, равном нулю, обозначение единицы измерения опускается. Некоторые значения задаются процентами (percent). Их вычисляют как процент от другого свойства элемента, обычно его размера.

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

Классы стилей

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

Для выделений используется селектор класса CLASS.

Например:

Вопрос журналиста

Ответ интервьюируемого

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

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

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

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

При использовании третьего способа, вынесения описания стилей во внешний файл, необходимо все описание стилей разместить в отдельном файле с расширением .css. В разделе HEAD документа записать строку, аналогичную приведенной ниже, в которой атрибут HREF содержит имя файла со стилями:

$$

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

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

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