DHTML

Динамический HTML (Dynamic HTML или DHTML) не является языком разметки страниц. Это термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым. Реализация DHTML основывается на HTML, каскадных таблицах стилей (Cascade Style Sheets — CSS) и языке сценариев (JavaScript или VBScript). Эти три компонента DHTML связаны между собой объектной моделью документа (Document Object Model — DOM), являющейся интерфейсом прикладного программирования (API).

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

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

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

Логическое и физическое форматирование

Классический, наиболее распространенный, HTML 3.2 предоставляет средства физического форматирования документов, для чего имеются специальные теги (например, теги <font>, <b>, <i> ) и множество различных атрибутов ( size, color, height, width и т. п.). Особенности web-форматирования принуждают автора явно прописывать эти теги и атрибуты для каждого нового абзаца, что, сильно увеличивает размер страниц. При таком способе форматирования затруднен анализ структуры документа человеком и поисковыми машинами. Из-за сложности логического анализа такой способ форматирования называется физическим форматированием.

В спецификации HTML 4.0 используется логическое форматирование, при котором структура и оформление документа четко разделены. Этот способ форматирования рекомендован к применению Консорциумом WWW, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа с помощью CSS. То же самое можно сказать и при XHTML.

Понятие стиля, таблицы стилей и CSS

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

Таблица стилей - набор правил отображения, применяемых в документе, к которому присоединена соответствующая таблица стилей. Таблица стилей — это шаблон, который управляет форматированием тэгов HTML в Web-документе.

CSS level 1(Cascade Style Sheets, Каскадные таблицы стилей, уровень 1) представляют собой технологию определения и присоединения стилей к документам HTML. Термин "каскадные" используется потому, что возможно использовать несколько таблиц стилей для управления форматированием одного документа HTML, а браузер по определенным правилам выстраивает приоритетность применения этих таблиц.

Правила CSS

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

h1 {color: blue; font-size: 16pt}

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

Связывание HTML с CSS

Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом. Существует четыре способа связывания документа и таблицы стилей:

1. Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.
2. Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе.
3. Импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере.
4. Встраивание в тэги документа — позволяет изменять форматирование конкретных элементов страницы.

Встраивание CSS в HTML

CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу <body>. Если стиль задан для тега <body>, он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нет необходимости прописывать теги <font> и атрибуты color, size и т. п. для каждого абзаца на странице – достаточно задать стиль для тега <body>, и все абзацы на странице будут отображены в соответствии с этим стилем.

Пример. Необходимо, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов зеленого цвета. Для этого следует указать атрибут style тега <body>, присвоив ему соответствующее значение:

<body style="font-family: 'Times New Roman'; font-size: 12pt; color: green">

В примере используется встраивание стиля непосредственно в тег документа – так называемый inline -стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях – если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML.

Внедрение таблицы стилей

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

Пример. Необходимо, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial синего цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня – шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желтого цвета.

<head>
...
<style>
<!--body { 
font-family: 'Times New Roman';
font-size: 12pt;
color: green;
}
h1 {
font-family: Arial;
font-size: 16pt;
color: blue;
font-weight: bold;
}
h2 {
font-family: Helvetica;
font-size: 14pt;
color: yellow;
font-weight: bold;
font-style: italic;
}
-->
</style>
...
</head>

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

Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их, интерпретируя, однако, их содержимое в том виде, в каком оно задано, что может приводить к ошибкам. Поэтому, как обычно, следует задавать содержимое тэгов, которые потенциально не обрабатываются старыми версиями браузеров, заключенным в тэг комментария <!--…-->.

Связывание таблицы стилей

Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тэга <link>, задаваемого в разделе <head>:

<link rel="stylesheet" type="text/css" href="mystyles.css"/>

В этой строке указывается, что связываемый файл является таблицей стилей ( rel="stylesheet" ), формат этого файла – . css1 ( type="text/css" ) и находится он в той же директории, что и файл html, либо имеет другой URL-адрес ( href="mystyles.css" ).

Эта строка может быть указана в любом html -файле. Таким образом, единое оформление будет использовано для нескольких страниц.

При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным – .css ).

Пример CSS-файл а:

body { 
font-family: 'Times New Roman';
font-size: 12pt;
color: green;
}
h1 {
font-family: Arial;
font-size: 16pt;
color: blue;
font-weight: bold;
}
h2 {
font-family: Helvetica;
font-size: 14pt;
color: yellow;
font-weight: bold;
font-style: italic;
}

Тэги <style> и </style> внутри файла таблицы стилей не используются – расширение .css явно указывает браузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц).

Импорт таблицы стилей

Для импортирования файла таблицы стилей (в том числе с другого сервера) необходимо указать в заголовке HTML-файла между тегами <head> и </head> внутри тега-контейнера <style> следующую строку:

<head>
...
<style>
...
@import: url (my.css);
...
</style>
...
</head>

Помимо адреса импортируемой таблицы стилей, в теге-контейнере <style> можно указать любые правила CSS, которые будут дополнять или корректировать правила, заданные в импортируемой таблице – внедренные правила.