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

Динамический HTML
Динамический HTML (Dynamic HTML, или DHTML) – это развитие традиционного
языка HTML, позволяющее создавать интерактивные, "живые" HTML-документы.
Стремлению сделать Web-страницу динамичной и интерактивной, то есть легко
изменяющейся, управляемой пользователем, столько же лет, сколько и самому WWW.
Один из методов реализации идеи динамичности заставил разработчиков "дополнить"
HTML и встроить в браузеры средства обработки специальных языков
программирования, таких как JavaScript, JScript и VBScript. Сами сценарии (скрипты),
т. е. программы, написанные на одном из этих языков, можно размещать вместе с
основным содержанием и разметкой HTML-документа. Программы на этих языках
перемещаются по сети Интернет в виде исходных текстов, а компилируются и
выполняются после загрузки в конкретный браузер.
Все события, происходящие в браузере, например, нажатие кнопки или переход к
другой странице, можно отследить и обработать при помощи программы, написанной на
одном из выше указанных языков. Важность этих событий состоит в том, что они
позволяют программе и браузеру тесно взаимодействовать друг с другом. Например,
программа может определить, когда пользователь покидает страницу, и выполнить при
этом необходимые действия.
С противоположного фланга на HTML наступает, принимая на себя часть его
функций и снимая тем самым часть его ограничений, язык иерархических стилевых
спецификаций (Cascading Style Sheets, CSS). Главная цель CSS (эту технологию часто
называют каскадные таблицы стилей.) – отделить структуру документа от его
оформления и позволить автору или пользователю самому решать, как должен выглядеть
тот или иной элемент содержания HTML-страницы. Другим достоинством таблиц (иногда
называемых листами) стилей является возможность обеспечить единый стиль оформления
некоторого набора HTML-документов, например курсовых или дипломных работ.
На стыке этих двух расширений HTML – языка стилей и языка сценариев – и возник
тот набор технологий, который сейчас принято называть динамическим HTML. Основную
идею динамического HTML можно сформулировать очень просто: полный контроль языка
сценариев над всеми без исключения элементами документа, параметрами их оформления
и размещения (как подразумеваемыми в HTML, так и задаваемыми с помощью CSS) и
даже над самим текстом страницы. Благодаря этому любой элемент HTML-документа
может изменять свое содержание и внешний вид.
К сожалению, два варианта реализации динамического HTML, предлагаемые
компаниями Netscape Communications Corporation и Microsoft – разработчиками двух
наиболее популярных браузеров, имеют между собой очень мало общего, особенно если
судить по документации самих этих компаний. Различиям между этими реализациями и
рекомендациям по подготовке HTML-страниц, совместимых с разными браузерами,
посвящено много статей в Интернет. В этой главе рассматриваются образцы применения
DHTML, одинаково отображаемые этими браузерами, и даются советы, как достичь такого
"взаимопонимания".
Стили и таблицы стилей
На самом простом уровне, стиль является всего лишь правилом, сообщающим браузеру,
как интерпретировать отдельные теги HTML. С каждым тегом связан ряд свойств,
значения которых определяют его вид при выводе браузером. Так, например, у
1
большинства тегов (<P>, <TD>, и т. д.) есть свойство COLOR, значение которого определяет
цвет, используемый для отображения содержимого тега.
Таблица (лист) стилей CSS – набор правил отображения, применяемых в документе,
к которому присоединяется соответствующая таблица стилей. Все свойства,
использующиеся в таблицах стилей, условно можно разделить на несколько групп:




управляющие видом шрифта (гарнитура, кегль, цвет, наклон, жирность,..);
управляющие форматированием абзаца (отступ красной строки, выравнивание,
интерлиньяж, расстояние между словами,..);
управляющие
свойствами
блока
(отступы
слева-сверху-справа-снизу,
местоположение блока в документе, видимость блока,..);
другие (цвет ссылок, изменение внешнего вида курсора,..).
Использование стилей
Одним из способов подключения стиля к HTML-странице (остальные способы
рассматриваются в параграфе "Каскадные таблицы стилей") является использование в
заголовке документа контейнера <STYLE>:
<HEAD>
...
<STYLE TYPE="text/css">
...
описание стилей
...
</STYLE>
...
</HEAD>
Включение в этот контейнер атрибута TYPE="text/css" указывает браузеру, что в нем
содержится описание стилей. В настоящее время атрибут TYPE может принимать только
указанное значение, однако если он будет опущен, то некоторые браузеры могут
проигнорировать всю таблицу стилей.
Само описание стиля включает селектор тега, указывающий имя тега, на который
распространяется правило стиля, и фигурные скобки, содержащие одну или более пар
объявлений вида "свойство_стиля:значение", разделенных точкой с запятой:
селектор_тега{
свойство_стиля1:значение1;
свойство_стиля2:значение2;
свойство_стиля3:значение3;
}
Если в фигурных скобках указано всего одно правило, то точку с запятой можно опустить.
Пример
<HTML>
<HEAD>
<TITLE>Первый пример использования стилей</TITLE>
<STYLE TYPE="text/css">
<!-H1 {text-align: center}
-->
2
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок</H1>
<P>
Какой-то текст
</BODY>
</HTML>
В данном примере в секции заголовка документа <HEAD> ... </HEAD> задан стиль
(правило), согласно которому браузер должен выравнивать по центру страницы
содержимое контейнера <H1> ... </H1>: свойству text-align присвоено значение
center.
Обратите внимание на использование тегов комментария (<!-- и -->). Все
содержимое контейнера <STYLE> находится между ними. Это позволяет скрыть
информацию о стиле от браузеров, которые не распознают тег <STYLE> (в противном
случае они могут принять правила за текст и вывести их на экран).
В таблицах стилей также можно использовать комментарии, позволяющие описать то
или иное свойство: текст, расположенный между символами /* и */ не обрабатывается
браузером и не рассматривается, как элемент таблицы стилей (не путайте теги
комментария и комментарии таблиц стилей, они имеют разный синтаксис и разное
назначение).
Пример
Рассмотрим пример оформления текста. Установим белый цвет фона документа (свойство
background-color), затем задействуем свойства управления шрифтом: color (цвет), fontfamily (гарнитура шрифта) и font-size (размер шрифта), например,



цвет – серый;
семейство шрифта (гарнитура) – Times, шрифт с засечками;
размер шрифта – 14 пунктов.
Добавим свойства, связанные с форматированием абзаца: text-indent (отступ
красной строки), text-align (выравнивание), padding-left (отступ слева), например,



дополнительный отступ красной строки – 10pt;
выравнивание – по ширине документа;
отступ от левого края – 20pt.
Установим темно-красный цвет (свойство color) заголовков с первого по третий
уровень.
3
Документ примет вид:
<HTML>
<HEAD>
<TITLE>Второй пример использования стилей</TITLE>
<STYLE TYPE="text/css">
<!–
BODY {background-color: white}
H1, H2, H3 {color: red}
P
{
/* шрифт */
color: gray;
font-family: Times, serif;
font-size: 14pt;
/* абзац */
text-indent: 10pt;
text-align: justify;
padding-left: 20pt;
}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Задание значений
Для задания значений в правилах таблиц стилей важно использовать корректный
синтаксис.
Задание цвета (color), также как и в тегах HTML, возможно двумя способами:
наименованием и численным значением. Спецификация CSS1 ("Спецификации каскадных
таблиц стилей, уровень 1"), разработанная Консорциумом World Wide Web (W3C),
перечисляет только 16 наименований цветов, которые можно использовать в таблицах
стилей:
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow
Другие наименования из полного списка цветов, приведенного ниже, также могут
поддерживаться некоторыми браузерами.
Web-цвета по оттенкам
black
white
Нейтральные/холодные
darkgray
darkslategray
dimgray
gainsboro
ghostwhite
gray
lightgrey
lightslategray
silver
slategray
snow
Нейтральные/теплые
4
antiquewhite
cornsilk
floralwhite
ivory
linen
oldlace
papayawhip
seashell
Коричневые/бронзовые
beige
bisque
blanchedalmond
brown
burlywood
chocolate
khaki
moccasin
navajowhite
peru
rosybrown
sienna
tan
wheat
lightcoral
lightpink
lightsalmon
magenta
mistyrose
pink
salmon
Розовые
coral
darksalmon
deeppink
hotpink
Оранжевые
darkorange
orange
orangered
peachpuff
Желтые
darkgoldenrod
gold
goldenrod
lemonchiffon
lightyellow
lightgoldenrodyellow
palegoldenrod
yellow
Зеленые
aquamarine
chartreuse
darkgreen
darkkhaki
darkolivegreen
darkseagreen
forestgreen
green
greenyellow
honeydew
lawngreen
lime
limegreen
mediumseagreen
mediumspringgreen
mintcream
olive
olivedrab
palegreen
seagreen
springgreen
yellowgreen
Фиолетовые
blueviolet
darkmagenta
darkorchid
darkviolet
fuchsia
lavender
lavenderblush
mediumorchid
mediumpurple
mediumvioletred
orchid
palevioletred
plum
purple
thistle
violet
Сине-зеленые
aqua
cyan
darkcyan
darkturquoise
lightcyan
lightseagreen
mediumauqamarine
mediumturquoise
deepskyblue
dodgerblue
indigo
lightblue
lightskyblue
lightsteelblue
mediumblue
mediumslateblue
midnightblue
navy
powderblue
skyblue
slateblue
steelblue
Синие
aliceblue
azure
blue
cadetblue
cornflowerblue
darkblue
darkslateblue
5
Красные
crimson
darkred
firebrick
indianred
maroon
red
При задании цвета численным значением используют либо шестнадцатеричное
значение, либо тройку вида rgb(red, green, blue), где red, green и blue являются
числами в диапазоне от 0 до 255, либо процентными величинами, определяющими яркость
каждой составляющей цвета в RGB. Значения 255 или 100% указывают, что
соответствующая составляющая цвета имеет максимальную яркость; значения 0 или 0% –
соответствующая составляющая полностью отсутствует.
Пример
H1
H1
H1
H1
{color:
{color:
{color:
{color:
#0000FF}
#00F}
rgb(27, 119, 207)}
rgb(50%,75%, 0%)}
Во втором примере используется трехзначный синтаксис, при использовании которого три
цифры преобразуются в шесть путем дублирования каждой из них.
При задании единиц длины (length) используют число, за которым без пробелов
следует двухсимвольное обозначение единицы измерения (em, ex, in, cm и др.)
Обозначения единиц измерения еm и ех относятся к общей высоте шрифта и высоте буквы
"х" соответственно. Единица измерения рх соответствует величине пиксела на экране, а
in, cm, mm, pt и рс обозначают дюймы, сантиметры, миллиметры, пункты и цицеро
соответственно. В дюйме 25,4 миллиметра или 72,27 пункта, а в цицеро – 12 пунктов. Если
значение равно нулю, обозначение единицы измерения можно опустить.
Пример
P {font-size: 12pt}
H3 {text-indent: 20em}
Некоторые значения могут быть заданы в процентах (percent). При этом они
вычисляются как процент от другого свойства элемента, обычно его размера.
Пример
P {line-height: 120%}
Для указания местоположения ресурса используется его URL-адрес. В этом случае
после ключевого слова url сразу (без пробелов) следует открывающая круглая скобка, а за
ней - URL, заключенный, при желании, в одиночные или двойные кавычки, и
закрывающая правая скобка.
Пример
BODY {
background: url(http://www.image.ru/image/pic1.gif)
}
6
Наконец, некоторые значения являются последовательностью (list) других величин и
описываются как "список" некоторых значений. Список состоит из одного или более
допустимых значений, разделяемых запятыми.
Пример
P {font-family: Times, serif}
Классы стилей
При написании HTML-документов довольно часто встречается необходимость какимлибо образом выделять блоки информации, подчеркивать их уникальность или
логическую нагрузку. Например, в учебнике по математике кроме обычного описания
материала могут присутствовать теоремы, задания, примеры и др. Стандартный HTML
предоставляет нам теги логической разметки, например, тег <BLOCKQUOTE> предназначен
для длинных цитат. CSS дает возможность самим придумывать логические конструкции и
описывать их внешний вид.
Допустим, мы хотим создать страницу, на которой будет два вида абзацев (тег <P>),
причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример
такой страницы - интервью, в котором чередуются вопросы журналиста и ответы
интервьюируемого. Естественно, при создании такой страницы мы захотим визуально
отделить вопросы и ответы друг от друга.
Сначала выделим абзацы (вопросы журналиста и ответы интервьюируемого) с
помощью селектора класса CLASS.
<HTML>
...
<BODY>
...
<P CLASS="ask">Вопрос журналиста</P>
<P CLASS="answer">Ответ интервьюируемого</P>
...
</BODY>
</HTML>
В разделе HEAD документа зададим стиль каждого класса.
P.ask{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
text-align: justify;
color: gray;
margin-left: 100px;
font-weight: bold;
}
P.answer{
font-family: Times, serif;
font-size: 14pt;
color: black;
text-align: justify;
margin-left: 20px;
}
Вопросы журналиста будут отображаться шрифтом серии sans-serif серого цвета,
полужирным начертанием, размером 12 пунктов, с отступом 100 пикселов от левого края
7
страницы, с выравниванием по ширине. Ответы же будут отображены шрифтом Times,
размером 14 пунктов черного цвета, с отступом 20 пикселов от левого края страницы, с
выравниванием по ширине.
Вложенные элементы наследуют правила, заданные для родительских элементов. Так,
например, если в абзац, содержащий вопрос журналиста, включить фрагмент текста,
выделенный курсивным начертанием, то этот фрагмент при отображении браузером уже
будет иметь выделение как курсивом, так и полужирным шрифтом. Это связано с тем, что
текст, заключенный между тегами <I> и </I>, входит в состав абзаца и наследует его
свойства.
Каскадные таблицы стилей
Одной из основных особенностей таблиц стилей является каскадность. Она означает,
что при обработке стилей используется специальный механизм каскадирования. Для
одного документа могут быть заданы различные правила. Один набор правил может
определяться разработчиком документа, другие правила могут быть заданы
пользователем. Кроме того, в каждом браузере имеется набор правил, используемых по
умолчанию; они используются, если какое-либо из свойств явно не определено. Средства
каскадирования собирают и объединяют различные правила, а также разрешают
возникающие при этом конфликты.
Свойство каскадности тесно связано со способом подключения стилей к HTMLдокументу, которое возможно осуществить тремя способами: inline-описание, описание в
секции заголовка и использование внешнего файла.
Самый простой способ – это, так называемое, inline-описание или описание,
встроенное в тег. При помощи дополнительного атрибута STYLE можно определить
нужные стилевые параметры в любом теге. Основной недостаток этого способа в том, что
определение стиля действует лишь в пределах одного тега. Представьте, насколько
вырастет размер файла, и насколько неудобно будет его исправлять, если указывать стиль
у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания
внешнего
вида
при
помощи
тега
<FONT>.
Пример
<P STYLE="color:red; text-align:center;">Этот
параграф переопределен стилем</P>
Гораздо удобнее заранее определить все нужные стили оформления и впоследствии
просто применять их к соответствующим тегам, т. е. воспользоваться способом описания
стилей в секции заголовка. Именно этим способом мы пользовались в примерах,
рассматривающих форматирование абзаца и оформление интервью. Действие таблицы
стилей, подключенной таким образом, распространяется на весь HTML-документ.
И наконец, третий способ, – вынесение описания стилей во внешний файл
(внешнюю таблицу стилей). Для этого нужно все описание стилей поместить в отдельный
файл с расширением .css. В раздел HEAD документа включить строку, аналогичную
следующей, где атрибут HREF содержит имя файла со стилями:
<LINK REL="STYLESHEET" TYPE="text/css" HREF="list.css">
Диапазон воздействия таблицы в этом случае простирается на все файлы, в которые
включено такое описание. Если потребуется изменить внешний вид группы документов,
то будет достаточно откорректировать лишь один стилевой файл. Сравните этот способ с
8
предыдущими: в одном из них придется менять описание стилей в каждом документе, а в
другом – даже в каждом теге.
На практике приходится пользоваться всеми тремя способами, и здесь в игру вступает
"каскадность" стилей, позволяющая переопределять стили. Приведенный выше список
способов подключения таблиц стилей соответствует порядку переопределения:
вышерасположенный способ может переопределять нижерасположенный.
Например, пусть во внешнем стилевом файле определено, что текст в теге <P> должен
выводится шрифтом высотой 10 пунктов. Если при этом в разделе HEAD документа
переопределить тег <P>, указав, что текст должен отображаться шрифтом в 12 пунктов, то
он будет выведен именно таким кеглем - стиль, расположенный в заголовке документа,
переопределит стиль внешнего файла.
В целом, браузер расставляет приоритеты таблиц стилей следующим образом:
1. inline-стили (встроенные с помощью атрибута STYLE непосредственно в теги
документа) – наивысший приоритет; будут применены браузером в любом случае,
даже если возникает конфликт с внедренными или внешними стилями;
2. внедренные стили (перечисленные в теге-контейнере <STYLE> в разделе <HEAD>
документа) - чуть меньший приоритет; будут применяться во всех случаях, кроме
случаев возникновения конфликта с inline-стилями (при возникновении такого
конфликта будут применены inline-стили);
3. связанные стили (стили, присоединенные к HTML-файлу посредством тега <LINK>) наименьший приоритет; будут применены только после того, как браузер убедится
в отсутствии аналогичных правил во всех остальных типах стилей.
Зная, в какой последовательности браузер анализирует таблицы стилей, можно задать
одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять
стилями отдельных страниц и отдельных элементов на странице. Именно с этой
особенностью и связано слово "каскадные" в названии CSS (cascading style sheets) несколько таблиц стилей, присоединенных к HTML-файлу, прокатываются через
анализатор (браузер) неким "каскадом" в порядке их приоритетности.
Применение таблиц стилей
Подготавливая Web-материал, авторы всегда встают перед выбором, как организовать
оформление материала: пользоваться обычными средствами HTML или подключать
таблицы стилей? Профессиональные Web-дизайнеры всегда останавливают свой выбор на
таблицах стилей. Какие же преимущества имеет этот подход?
Во-первых, таблицы стилей позволяют разделить смысловое содержимое документа и
его оформление. Согласно идеологии текстовой разметки все оформление рекомендуется
вынести во внешний стилевой файл. Основной документ будет содержать только
информацию и ссылки на необходимые стили. Такой подход дает возможность
конкретному устройству при показе документа задействовать соответствующую таблицу
стилей. Для сотового телефона и монитора компьютера они, разумеется, должны быть
разными. В первом случае нужно использовать минимальное оформление, которое
позволит представить информацию наиболее оптимально и компактно. Во втором же
случае допустимо использовать все возможности шрифтового и цветового оформления.
Во-вторых, как мы уже убедились, размещение всей стилевой информации в одном
внешнем файле позволяет, изменив содержимое только одного (!) стилевого файла, в
9
считанные секунды сменить дизайн целой группы документов. Причем никаких других
переделок не понадобится. Разумеется, это верно лишь в том случае, если все документы
группы ссылаются на одну и ту же таблицу стилей.
В-третьих, таблицы стилей довольно часто используются для достижения единого
стиля оформления какого-либо набора документов. Например, члены научного
сообщества, готовя материалы к публикации их на WWW-сервере, могут пользоваться
стандартными таблицами стилей, которые для них заранее подготовил Web-мастер.
Задания
1. Создайте HTML-документ, в котором
а) заголовку первого уровня (тег <H1>) задайте следующий стиль оформления: цвет
текста – красный, выравнивание – по центру, семейство шрифта (гарнитура) – Arial,
шрифт без засечек (sans-serif), размер шрифта – 14 пунктов;
б) заголовку второго уровня задайте выравнивание по правому краю, наклонное
начертание, размер шрифта – 12 пунктов.
2.
Создайте HTML-документ, предназначенный для размещения интервью.
Оформите таблицу стилей в виде отдельного файла и свяжите ее с документом.
Переопределите при помощи внедренной таблицы стилей класс ask, сделав цвет
текста зеленым.
10