Что такое динамический html

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

Динамический HTML, или DHTML, представляет собой набор технологий, используемых вместе для создания интерактивных и анимированных веб-сайтов с помощью комбинации статического языка разметки (например, HTML ), язык сценариев на стороне клиента (например, JavaScript ), язык определения представления (например, CSS ) и объектной модели документа (DOM). Приложение DHTML было введено компанией Microsoft с выпуском Internet Explorer 4 в 1997 году. Сегодня ссылки на ненавязчивое кодирование JavaScript (сценарии DOM) заменили использование термина DHTML.

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

Напротив, динамическая веб-страница — это более широкое понятие, охватывающее любую веб-страницу, созданную по-разному для каждого пользователя, возникновения нагрузки или конкретных значений переменных. Сюда входят страницы, созданные с помощью сценариев на стороне клиента, и страницы, созданные с помощью сценариев на стороне сервера (например, PHP, Python, JSP или ASP.NET ), где веб-сервер генерирует контент перед его отправкой клиенту.

DHTML отличается от Ajax тем, что страница DHTML по-прежнему основана на запросах / перезагрузках. При использовании DHTML после загрузки страницы между клиентом и сервером может не быть никакого взаимодействия; вся обработка происходит в JavaScript на стороне клиента. Напротив, страница Ajax использует функции DHTML для инициирования запроса (или «подзапроса») к серверу для выполнения дополнительных действий. Например, если на странице есть несколько вкладок, чистый подход DHTML будет загружать содержимое всех вкладок, а затем динамически отображать только ту, которая активна, в то время как AJAX может загружать каждую вкладку только тогда, когда это действительно необходимо.

• 1 Использует
• 2 Структура веб-страницы
• 3 Пример: отображение дополнительного блока текста
• 4 Объектная модель документа
• 5 Динамические стили
• 6 См. Также
• 7 Ссылки
• 8 Внешние ссылки

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

DHTML позволяет авторам добавлять на свои страницы эффекты, которые иначе трудно достичь, путем изменения объектной модели документа (DOM) и стиль страницы. Комбинация HTML, CSS и JavaScript предлагает способы:

• Анимировать текст и изображения в документе. [1]
• Встраивать тикер или другое динамическое отображение, которое автоматически обновляет его содержимое с помощью последних новостей, акций цитаты или другие данные.
• Используйте форму для сбора данных, вводимых пользователем, а затем обрабатывайте, проверяйте и отвечайте на эти данные без необходимости отправлять данные обратно на сервер.
• Включите кнопки перехода или раскрывающиеся меню.

Реже используется для создания браузерных игр. Хотя ряд игр был создан с использованием DHTML в конце 1990-х — начале 2000-х годов, различия между браузерами усложняли задачу: многие методы приходилось реализовывать в коде, чтобы игры могли работать на нескольких платформах. В последнее время браузеры переходят на веб-стандарты, что сделало дизайн игр DHTML более жизнеспособным. В эти игры можно играть во всех основных браузерах, а также их можно портировать на Plasma для KDE, виджеты для macOS и гаджеты для Windows Vista, которые основаны на коде DHTML.

Термин «DHTML» в последние годы вышел из употребления, поскольку он ассоциировался с практиками и соглашениями, которые, как правило, не работали между различными веб-браузерами. DHTML теперь можно называть ненавязчивым кодированием JavaScript (сценариями DOM), чтобы сделать упор на согласованные передовые практики, в то же время позволяя аналогичные эффекты доступным, совместимым со стандартами способом.

Поддержка DHTML с расширенным доступом к DOM была представлена ​​в Internet Explorer 4.0. Хотя в Netscape Navigator 4.0 существовала базовая динамическая система, не все элементы HTML были представлены в DOM. Когда методы в стиле DHTML получили широкое распространение, разная степень поддержки задействованных технологий веб-браузерами затруднила их разработку и отладку. Разработка стала проще, когда Internet Explorer 5.0+, Mozilla Firefox 2.0+ и Opera 7.0+ приняли общий DOM, унаследованный от ECMAScript.

Совсем недавно библиотеки JavaScript, такие как jQuery, абстрагировали многие повседневные трудности при кроссбраузерном манипулировании DOM.

Структура веб-страницы

Обычно веб-страница, использующая DHTML, настраивается следующим образом:

Глава 6 Динамический 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. DOM и клиентские скрипты

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

Dynamic HTML (DHTML) — это обообщающий термин для набора технологий, используемых совместно для создания интерактивных и анимированных веб-сайтов. Обычно под DHTML подразумевается комбинация из статического языка разметки (HTML), клиентского языка сценариев (JavaScript), языка описания представлений (CSS) и объектной модели документа (DOM). Т.е., DHTML — не особый язык, а совокупность клиентских технологий веб-разработки, которую можно представить в виде такой условной «формулы»:

DHTML = HTML + CSS + DOM + JavaScript.

DHTML представляет клиентским скриптам доступ к переменным в определении языка разметки, изменение которых влияет на внешний вид и поведение изначально статического содержимого веб-страницы. Программное управление контентом становится возможным лишь после того, как веб-страница была полностью загружена в клиентское приложение. В случае DHTML «динамичность» проявляется при просмотре страницы клиентом, а не на этапе генерации уникального содержимого веб-сервером.

О многозначности термина

С другой стороны, «динамическая веб-страница» — более широкое понятие, охватывающее любую веб-страницу, сгенерированную по-разному для каждого пользователя или набора исходных данных. Оно включает и те страницы, что созданы сценариями на стороне клиента, и те, что созданы серверными приложениями (на языках PHP, Perl, JSP, Ruby и проч.), когда веб-сервер генерирует содержимое перед отправкой клиенту.

HTML

В теме «Основы HTML» была рассмотрена обобщенная структура гипертекстового документа, которая может быть представлена в виде дерева элементов разметки. Проиллюстрируем сказанное на простом примере веб-страницы, исходный код которой приведен в Листинге 1, а структура — на рис. 1.

        
Let's start with the classical:
 
Hello, World
   

Рис. 1. Дерево элементов гипертекста

Архитектура DOM 3

Document Object Model (DOM)

В браузере дерево элементов разметки (рис. 1) преобразуется в структуру данных, подобную приведенной на рис. 2. Это представление основывается на спецификации Объектной Модели Документа ( DOM ), разработанной и поддерживаемой W3C (актуальная версия стандарта — DOM Level 3). DOM описывает веб-страницу в виде иерархии объектов, наделенных набором обязательных и опциональных свойств и методов. В нотации DOM эти объекты, представляющие теги разметки, называются узлами.

Архитектура модели DOM состоит из трех частей: ядра (Core)​​, HTML и XML. Ядро DOM обеспечивает низкоуровневый набор объектов, которые могут представлять любой структурированный документ. Однако, непосредственное обращение к объектам ядра не всегда оправданно. Спецификации HTML и XML обеспечивают дополнительные, более удобные интерфейсы верхнего уровня, которые представляют более простой и прямой доступ к документам определенного типа.

Рис. 2. Представление DOM

Каждый узел DOM имеет, по меньшей мере, следующие свойства:

• nodeName — имя узла в соответствии со спецификацией: тег разметки HTML или XML в заданном пространстве имен, предопределенное имя в нотации DOM (#text, #comment и т.д.);
• localName — локальное имя узла (если не переопределено, то соответствует nodeName);
• prefix — имя (не адрес) пространства имен, описывающего узел (см. лекцию Расширяемый язык разметки XML);
• namespaceURI — адрес файла описания спецификации (например, http://www.w3.org/1999/xhtml);
• nodeType — целочисленный идентификатор типа узла (1 — элемент; 3,8 — содержимое, 9 — документ, 10 — тип документа и т.п.);
• nodeValue — содержимое элемента (непосредственно данные);
• id — уникальный в пределах документа идентификатор узла;
• class — имя класса CSS.

Атрибуты тегов в DOM представлены в виде атрибутов же узлов в формате «name=value» (рис. 3).

Рис. 3. Атрибуты узлов

API DOM

Для обращения к DOM из скриптов и внешних программ используется стандартизованный объектно-ориентированный интерфейс ( API ), в котором каждый узел представлен в виде объекта с набором публичных свойств, методов и событий.

«Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.» W3C

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

Правила CSS

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

Рис. 4. DOM и CSS

Вычисленные стили, так же как и атрибуты, доступны через интерфейсы DOM как свойства объектов JavaScript.

DHTML в действии

      function sayHello() 
Click Me
   

После загрузки этой страницы в браузере будет выстроена модель DOM, приведенная на рис. 5а. Однако, после того как пользователь кликнет на тексте, документ изменится и его структура станет такой, как на рис. 5б.

Рис. 5. Изменение DOM после выполнения скрипта

Практическое применение DHTML

Несколько примеров, демонстрирующих некоторые возможности, представляемые DHTML:

• Очень простой онлайн-калькулятор;

Что такое динамический html

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

Динамический HTML построен на объектной модели, которая расширяет традиционный статический HTML-документ. С помощью данной книги вы изучите динамический HTML и научитесь создавать страницы, которые будут в интерактивном режиме взаимодействовать с пользователем. Материал данной книги предполагает, что читатель знаком с HTML и основными принципами программирования. В книге нет описания HTML или основ программирования на языках JavaScript, JScript или VBScript. Данные языки рассматриваются как инструменты для манипулирования страницами в динамическом режиме.

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

Создание интерактивных страниц

Концепция создания интерактивных Web-страниц не является новой — компании Microsoft и Netscape изначально определили простую объектную модель, которая была представлена как способ создания интерактивных страниц. При более внимательном рассмотрении объектная модель оказалась более эффективной только для базовой проверки форм. Динамические документы были по большей части мифом до появления Microsoft Internet Explorer 4.0, поскольку страница могла быть изменена только при ее создании. Интерактивные документы моделировались путем полной перезагрузки страницы или внедрения объектов на страницу. Многие апплеты Java, элементы управления ActiveX и даже анимированные изображения в формате GIF были разработаны для выполнения операций, аналогичных тексту, что позволяло преодолеть статическую природу HTML. Однако использование объектов вместо стиля и элементов управления содержанием представляет собой не самое лучшее решение.

После изучения множества схем для данных объектов и анимированных изображений GIF, разработчики Internet Explorer пришли к выводу, что для манипулирования документами необходим более мощный прикладной интерфейс программирования (application programming interface, API). С помощью объектной модели, которая обеспечивает полный доступ к документу, Web-мастеры могут использовать встроенные возможности размещения объектов в HTML и каскадные таблицы стилей (Cascading Style Sheets, CSS). Такая модель существенно улучшает производительность, сокращая необходимость загрузки больших анимированных изображений GIF и апплетов. Информация становится доступной мгновенно, поскольку она больше не спрятана внутри изображений или объектов.

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

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

Языки программирования

Язык программирования используется для манипулирования объектной моделью динамического HTML, но динамический HTML разработан как независимый от платформы и языка программирования. Поэтому могут быть использованы языки программирования JavaScript, JScript, VBScript, C++, Java, а также другие языки.

В данной книге используется преимущественно язык JScript для доступа к объектной модели документа. JScript является реализацией компании Microsoft стандарта ЕСМА262 (European Computer Manufacturers Association — европейская ассоциация производителей компьютеров), разработанного компаниями Microsoft, Netscape и другими организациями. Данный стандарт формализует языковые конструкции JavaScript и JScript, так что могут быть созданы реализации, допускающие совместное взаимодействие. Важно помнить, что данный стандарт определяет только конструкции языка. Несмотря на то, что язык часто ассоциируется с объектной моделью, данный стандарт не определяет объектную модель. Поэтому, когда вы определяете, поддерживает ли браузер версию JavaScript или JScript, следует четко различать объектную модель и элемент языка. JScript в Internet Explorer 4.0 совместим со стандартом ЕСМА, но реализация JavaScript 1.2 в Netscape 4.0 с ним не совместима.

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

Апплеты и объекты на странице могут взаимодействовать с ней. Например, в Internet Explorer объект, написанный на C++ или другом языке, реализует взаимодействие со страницей посредством объектной модели. Описание метода создания апплетов, использующих динамический HTML, выходит за рамки этой книги. Однако данная книга содержит основы для понимания возможностей взаимодействия динамического HTML с такими объектами.

Если вы знакомы с языком JavaScript и существующей объектной моделью, то обнаружите, что расширения объектной модели динамического HTML совместимы со всеми предыдущими версиями. Все страницы, написанные для предыдущих версий Internet Explorer или Netscape Navigator 3.0, будут выполняться в Internet Explorer 4.0. Такая совместимость позволяет Web-мастерам использовать имеющиеся знания при изучении данных нововведений. Тем, кто не знаком с JavaScript, изучение методов программирования HTML-страницы позволит расширить и улучшить работу создаваемых страниц и приобрести некоторый опыт.

Новые элементы

Динамический HTML снимает все ограничения на доступ к документу. Динамический HTML в Internet Explorer 4.0 предоставляет в распоряжение разработчиков ряд новых элементов, которые обсуждаются в следующих разделах.

HTML 4.0 и расширенная поддержка CSS. Браузер Internet Explorer 4.0 поддерживает последний стандарт HTML 4.0, CSSI и множество новых элементов в CSS. Эти стандарты HTML и CSS определяют элементы, представляемые объектной моделью динамического HTML.

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

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

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

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

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

Web-страницы клиент/сервер. Internet Explorer 4.0 добавляет расширения в HTML-элементы для создания таблиц со связыванием данных и форм с одиночной записью и отчетов. Данные асинхронно загружаются и воспроизводятся в документе, используя несколько базовых HTML-расширений. Данные могут быть кэшированы локально, позволяя осуществлять поиск и сортировку на клиентской стороне без помощи сервера. Например, поисковые машины могут представлять множество результатов поиска одновременно. Напротив, поисковая машина может отправлять запросы клиенту, где они будут воспроизводиться по мере получения. Пользователь может мгновенно сортировать и отбирать данные полностью на локальной машине, не отправляя запросов на сервер.

Эффекты мультимедиа и анимации. Браузер Internet Explorer 4.0 тесно интегрирует эффекты мультимедиа и анимации с содержанием документа. Данные эффекты включают фильтры, которые могут моделировать источники света, тени и другие эффекты, которые реализуются непосредст-венно в тексте или других элементах управления. Могут быть также добавлены эффекты перехода между изображениями и текстом, и даже между страницами.

Все эти элементы основаны на текущем обсуждении внутри рабочих групп консорциума W3C (World Wide Web Consortium). Объектная модель динамического HTML рассматривается рабочей группой объектной модели документа (Document Object Model). Цель этой группы заключается в определении объектной модели, которая является независимой от языка и платформы и удовлетворяет ряду требований для структурированных документов. Объектная модель, которая определена в Internet Explorer 4.0, удовлетворяет всем требованиям, изложенным рабочей группой объектной модели документа.

Определение HTML-документа

HTML является приложением языка SGML (Standard Generalized Markup Language — стандартный обобщенный язык разметки). В документе HTML/SGML теги определяют структуру содержания документа. Традиционный SGML-документ имеет три различных компонента: структура, стиль и содержание. С введением динамического HTML был добавлен четвертый компонент: модель поведения. Термин модель поведения (behavior) определяет взаимодействие между пользователем и HTML-страницей. Основное внимание в данной книге сосредоточено на создании HTML-приложений путем манипулирования различными компонентами документа. Структура представлена рядом семейств элементов; стиль представлен для каждого элемента и во всех семействах таблиц стилей. Содержание представлено посредством всех элементов и объекта TextRange. Сценарии (скрипты) манипулируют структурой, стилем и содержанием в ответ на события для создания модели поведения документа.

Структура и стиль

Структура обеспечивает контекст для информации, которая содержится внутри документа. Например, элементы Header с H1 по H6 предназначены для определения различных заголовков и их относительного значения. После элемента H1 может находиться другой элемент H1 или элемент H2 , но не элемент H3 . Однако HTML быстро развивается и разделение между структурой и представлением часто игнорируется. Web-мастеры используют теги HTML не для создания структуры, а для определения стиля. Элемент H1 часто используется для отображения текста крупным шрифтом полужирного начертания, а не для определения заголовка высшего уровня. По мере дальнейшего отклонения от SGML были изобретены теги стилей. Например, были введены теги и для выделения текста полужирным начертанием и курсивом.

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

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

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

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

До середины 60-х годов стиль в HTML контролировался достаточно просто, путем использования тегов и атрибутов стиля, таких как ALIGN . В этих условиях HTML не являлся действительным языком SGML, в котором структура и стиль определены раздельно. В действительном языке SGML документ может иметь связанную с ним таблицу стиля, которая определяет воспроизведение структурных элементов.

В середине 60-х был введен новый язык SGML — каскадные таблицы стилей (Cascading Style Sheets) для определения стиля в HTML. Спецификация CSS была разработана с участием Берт Хос и Хекен Лью из консорциума W3C, а также с участием многих других членов W3C и была принята большинством браузеров. По существу, элементы Strong в CSS (и даже элемент Bold в данном случае) больше не служат для выделения текста полужирным начертанием. Вместо этого элемент Strong используется традиционным образом для выделения важного слова. Таблица стилей теперь определяет, что элемент Strong должен быть выделен полужирным начертанием:

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

Структура книги

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

Часть I. HTML и программирование сценариев

В главах с 1 по 5 рассматриваются отношения между программированием сценариев и HTML-документом, описывается окно браузера и объясняется использование модели событий динамического HTML. Предполагается, что читатель знаком с основами HTML и программирования на языках JavaScript или VBScript.

В части I вводится понятие иерархии объектов, которая представляет четыре компонента документа: структуру, стиль, содержание и модель поведения. Компоненты подробно обсуждаются в частях II-IV, а поскольку данные вопросы тесно связаны, многие объяснения частично повторяются.

Часть II. Структура документа

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

Часть III. Стиль документа и анимация

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

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

Часть IV. Содержание документа и связывание данных

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

В главе 15 показано, как использовать динамический HTML для создания Web-страниц клиент/сервер, включая связывания HTML-таблицы с набором данных, которым можно манипулировать локально. Данная возможность позволяет создавать быстро загружаемые страницы с данными, которые можно легко сортировать, отбирать и редактировать на стороне клиента.

Поддержка

Были приняты все меры для обеспечения корректности содержания данной книги и прилагаемого компакт-диска. Издательство Microsoft Press публикует исправления в издаваемых книгах на своем Web-узле по адресу mspress.microsoft.com/mspress/support/. Если у вас есть комментарии, вопросы или идеи относительно этой книги или прилагаемого компакт-диска, вы можете направить их в издательство Microsoft Press по обычной или электронной почте:

Microsoft Press
Attn: Inside Dynamic HTML Editor
One Microsoft Way
Redmond, WA 98052-6399
MSPINPUT@MICROSOFT.COM

Обратите внимание, что поддержка продуктов не осуществляется по данным почтовым адресам.