Интернет - технологии и web- дизайн Лекция 3 Полубояров В. В.

Понятие DHTML Динамический HTML (Dynamic HTML или DHTML) не языком разметки страниц. Это термин, применяемый для обозначения HTML- страниц с динамически изменяемым содержимым. Реализация DHTML основывается на HTML, каскадных таблицах стилей (Cascade Style Sheets CSS) и языке сценариев (JavaScript или VBScript). 2

Document Object Model 3 Эти три компонента DHTML связаны между собой объектной моделью документа (Document Object Model DOM), являющейся интерфейсом прикладного программирования (API). DOM обеспечивает для HTML- документа возможность динамического изменения своего содержимого без перезагрузки страницы. DOM делает все элементы страницы программируемыми объектами. С ее помощью через языки сценариев можно получить доступ и управлять всеми элементами документа. Каждый элемент HTML доступен как индивидуальный объект, следовательно, можно изменять значение любого параметра любого тэга HTML- страницы, и, как следствие, документ действительно становится динамическим. Любое действие пользователя объектной моделью документа трактуется как событие, которое может быть перехвачено и обработано процедурой сценария.

Логическое и физическое форматирование 4 Классический, наиболее распространенный, HTML 3.2 предоставляет средства физического форматирования документов, для чего имеются специальные теги ( например, теги,, ) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web- форматирования принуждают автора явно прописывать эти теги и атрибуты для каждого нового абзаца, что, сильно увеличивает размер страниц. При таком способе форматирования затруднен анализ структуры документа человеком и поисковыми машинами. Из - за сложности логического анализа такой способ форматирования называется физическим форматированием. В спецификации HTML 4.0 используется логическое форматирование, при котором структура и оформление документа четко разделены. Этот способ форматирования рекомендован к применению Консорциумом WWW, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа с помощью CSS. То же самое можно сказать и про XHTML.

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

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

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

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

Связывание HTML с CSS 9 Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML- документом. Существует четыре способа связывания документа и таблицы стилей : 1. Связывание позволяет использовать одну таблицу стилей для форматирования многих страниц HTML. 2. Внедрение позволяет задавать все правила таблицы стилей непосредственно в самом документе. 3. Импортирование позволяет встраивать в документ таблицу стилей, расположенную на сервере. 4. Встраивание в тэги документа позволяет изменять форматирование конкретных элементов страницы.

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

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

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

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

Пример внедрения таблицы стилей <!-- 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; } -->... Необходимо, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial синего цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня – шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желтого цвета.

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

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

Пример CSS- файла 17 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; } Тэги и внутри файла таблицы стилей не используются – расширение.css явно указывает браузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами ( или импортирован сразу в несколько страниц ).

Импорт таблицы стилей 18 Для импортирования файла таблицы стилей ( в том числе с другого сервера ) необходимо указать в заголовке HTML- файла между тегами и внутри тега - контейнера следующую строку : url (my.css); Помимо адреса импортируемой таблицы стилей, в теге - контейнере можно указать любые правила CSS, которые будут дополнять или корректировать правила, заданные в импортируемой таблице – внедренные правила.

Приоритеты использования таблиц стилей 19 Браузер расставляет приоритеты таблиц стилей следующим образом : 1. встроенные (inline-) стили ( встроенные с помощью атрибута style непосредственно в теги документа ) – наивысший приоритет. Будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями ; 2. внедренные стили ( перечисленные в теге - контейнере в заголовке документа ) – чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline- стилями ( при возникновении такого конфликта будут применены inline- стили ); 3. импортированные стили ( стили внешнего файла.css, связанные с документом с помощью в теге - контейнере ) – будут применяться в тех случаях, когда отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей ; 4. связанные стили ( стили, присоединенные к html- файлу посредством тега ) – наименьший приоритет, будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.

Группирование : селекторы 20 Правила каскадных таблиц стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило. Например, следующие правила : h1 {font-family: Arial} h2 {font-family: Arial} h3 {font-family: Arial} можно сгруппировать и задать в виде одного правила со списком селекторов : h1,h2,h3 {font-family: Arial}

Группирование : определения 21 Аналогично группируются определения, только в списке они разделяются точками с запятой (;). Следующие правила форматирования заголовка первого уровня : h1 {font-weight: bold} h1 {font-size: 14pt} h1 {font-family: Arial} можно задать в виде одного правила, сгруппировав определения : h1 {font-weight: bold; font-size: 14pt; font-family: Arial}

Группирование : специфичный для свойства синтаксис 22 Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так : h1 {font: bold 14pt Arial} При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения ее размеров.

Наследование 23 В HTML некоторые элементы могут содержать другие. Рассмотрим элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет. Например, пусть цвет шрифта абзаца определен как синий ( p {color:blue} ). Рассмотрим выделенный элемент текста, задаваемый тэгом, если для него не определено правило форматирования. В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тэгом : body { color: black; font-family: "Times New Roman"; background: url(texture.gif) white; }

Селекторы 24 Правила каскадных таблиц стилей, в которых в качестве селектора используются тэги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчеркивания все ссылки ( тэг ) в документе : <!-- a { text-decoration: none; } --> Если необходимо некоторые ссылки отобразить по - другому, то можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр class, добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра class является ссылка на класс, задаваемый в таблице стилей.

Селектор class 25 В одной таблице стилей можно создать два и более различных класса одинаковых элементов с помощью селектора класса. К этим классам элементов можно затем будет применить различные таблицы стилей. Пример. Необходимо создать страницу, на которой будет два вида абзацев, причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы – интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. При создании такой страницы необходимо визуально отделить вопросы и ответы друг от друга.

Пример использования селектора class 26 Интервью p.ask { font-style: italic; font-weight: bold; font-family: Arial, sans-serif; font-size: 10pt; color: gray; margin-left: 15px } p.answer { font-family: 'Times New Roman', serif; font-size: 12 pt; color: black; } Вопрос Ответ

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

Пример использования селектора id 28 Демо <!-- #par24 { letter-spacing: lem; } h1#form3 { color: red; background-color: blue} --> Разреженные слова в абзаце Черный шрифт В этом примере абзац идентифицирован именем par24 в параметре id, поэтому к нему применимо правило с селектором #par24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.

Функции таблиц стилей : гибкое размещение, независимость от языков Гибкое размещение информации о стиле. Помещение таблиц стилей в отдельные файлы упрощает их повторное использование. Иногда полезно включать инструкции по представлению в документ, к которому они применяются, в начало документа или в атрибуты элементов в теле документа. 2. Независимость от языков таблиц стилей. HTML не привязан к конкретному языку таблиц стилей. Это позволяет использовать широкий диапазон таких языков, например, простые языки для большинства пользователей и более сложные для более специализированных случаев. Во всех примерах, приведенных ниже, используется язык CSS1 (Cascade Style Sheets), но можно использовать и другие языки.

Функции таблиц стилей : каскадирование 30 Эта возможность обеспечивается некоторыми языками таблиц стилей, такими как CSS, для объединения информации о стиле из нескольких источников. Это может быть, например, корпоративные положения о стиле, стили, общие для группы документов, а также стили, специфичные для одного документа. С использованием раздельного хранения эти таблицы стилей могут использоваться повторно, что упрощает работу авторов и повышает эффективность сетевого кэширования. Каскад определяет упорядоченную последовательность таблиц стилей, в которой правила более поздних таблиц имеют приоритет над более ранними. Не все языки таблиц стилей поддерживают каскады.

Функции таблиц стилей : зависимость от устройств 31 Зависимость от устройств. HTML позволяет авторам разрабатывать документы, независимые от устройств. Это позволяет пользователям обращаться к Web- страницам с использованием различных устройств, например, графических дисплеев для компьютеров под управлением различных ОС, телевизионных устройств, телефонов и портативных устройств на базе PDA, речевых браузеров и тактильных устройств на базе азбуки Бройля. Таблицы стилей, напротив, применяются к конкретным устройствам или группам устройств. Языки таблиц стилей могут включать функции описания зависимости от устройств в одной таблице.

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

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

Объектная модель документа 34 Объектная модель документа (Document Object Model DOM) связывает в единое целое HTML, язык сценариев и каскадные таблицы стилей, предоставляя разработчикам Web- документов инструмент с совершенно новыми качествами - динамический HTML. DOM является интерфейсом прикладного программирования (API) для документов HTML. Она определяет логическую структуру документа и способ доступа и манипулирования составляющими документ элементами. Все, что определено в документе тэгами языка разметки страниц, становится доступным для изменения, удаления и добавления. Программист может создавать документы, свободно перемещаться по их структуре и добавлять, изменять или удалять элементы и / или их содержимое. Internet Explorer 5.0 полностью реализует объектную модель документа, совместимую с объектной моделью DHTML.

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

Функции объектной модели документа 36 Объектная модель документов определяет : 1. интерфейсы и объекты, используемые для представления документа и манипулирования с ним ; 2. семантику ( смысл ) этих интерфейсов и объектов, включая и поведение, и параметры ; 3. " родственные " связи и взаимодействие между этими интерфейсами и объектами. Основное назначение реализации объектной модели документов предоставить возможность доступа и манипулирования элементами документа из программы с помощью объектов, выстроенных в некоторую иерархическую структуру, а также обеспечить взаимодействие между объектами. Поэтому любая реализация модели включает в свою очередь и управление событиями, представленными также в виде объектов.

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

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

Проблема HTTP- соединения 39 При использовании HTML- технологии существует проблема - невозможности отслеживания последовательных запросов пользователей. Эта проблема заключается в непостоянстве соединения между клиентом и сервером, После того, как браузер послал запрос и получил ответ, HTTP соединение закрывается, и информация о пользователе теряется. Транзакция завершается после того, как браузер сделал запрос, а сервер выдал соответствующий ответ. Сразу после этого сервер " забывает " о пользователе и каждый следующий запрос того же пользователя считает новым пользователем.

Cookie как решение проблемы HTTP- соединения 40 Cookie - это информация, которая хранится в браузере и каждый раз передается от клиента серверу вместе с запросом и другими заголовками (HTTP Request Headers). Таким образом, при последующих запросах сервер может получить значения переменных, установленные на посещенных ранее страницах. Используя cookie, можно эмулировать сессию по HTTP протоколу. Принцип эмуляции сессии следующий : на первом запросе выдается соотвествующее значение cookie, а при каждом последующем запросе это значение читается из переменной окружения HTTP_COOKIE и соответствующим образом обрабатывается.

Примеры использования cookie 41 Есть форма, где пользователю предлагается указать свое имя, из нее вызывается скрипт, прописывающий значение cookie в браузер пользователя. При каждом последующем заходе на основе анализа значения cookie из браузера пользователя на странице появляется либо именное приветствие ( если есть установленное значение cookie), либо первоначальная форма с запросом имени пользователя ( если значение cookie не установлено ). Сервер может считывать содержащуюся в cookies информацию и на основании ее анализа совершать те или иные действия. Например, в случае авторизованного доступа к чему либо через WWW в cookies сохраняется login и password в течение сессии, что позволяет пользователю не вводить их снова при запросах каждого документа, защищенного паролем.

Области применения cookie 42 На использовании cookies также часто строят функции оформления заказов в онлайновых магазинах. При их помощи реализуют виртуальную корзину покупателя, в которую сервер записывает информацию обо всех заказанных товарах. Пользователь просто помечает интересующие его товары, а затем оформляет покупку сразу всех отмеченных товаров. Еще одна распространенная область использования cookies - при настройке индивидуального профиля каждого зарегистрированного пользователя. Другая область - использование механизма cookie в рекламном бизнесе Cookie используются для определения целевой аудитории, например, по географическому положению пользователей, отслеживания интересов пользователей, учета количества показов и проходов сквозь баннеры.

Формат cookie 43 Полное описание поля Set-Cookie HTTP заголовка : Set-Cookie: NAME=VALUE; expires=DATE; path=PATH; domain=DOMAIN_NAME; secure Минимальное описание поля Set-Cookie HTTP заголовка : Set-Cookie: NAME=VALUE; Set-Cookie- заголовок включает выбранный Set-Cookie:, за которым следует перечень одной или более записей. Каждая запись начинается с пары NAME=VALUE, за которыми следуют ноль или больше пар « атрибут - значение », разделенных точками с запятой. Синтаксис для пар атрибут - значение приведен выше. Пара NAME=VALUE должна быть самой первой в объявлении записи. Все другие могут следовать в любом порядке. Стандарт не предусматривает поведение при неоднократном использовании одной и той же пары атрибут - значение.

Параметры cookie 44 expires=DATE - время хранения cookie, т. е. вместо DATE должна стоять дата в формате Wdy, DD-Mon-YYYY HH:MM:SS GMT, после которой истекает время хранения cookie. Если этот атрибут не указан, то cookie хранится в течение одного сеанса, до закрытия браузера. Использование expires не гарантирует сохранность cookie в течение заданного периода времени, поскольку браузер может удалить запись вследствие нехватки выделенного места или каких - либо других лимитов. domain=DOMAIN_NAME - домен, для которого значение cookie действительно. path=PATH - этот атрибут устанавливает подмножество документов, для которых действительно значание cookie. Например, указание path=/win приведет к тому, что значение cookie будет действительно для множества документов в директории /win/, в директории /wings/ и файлов в текущей директории с именами типа wind.html и windows.shtml. Если этот атрибут не указан, то значение cookie распространяется только на документы в той же директории, что и документ, в котором было установлено cookie. secure - если стоит такой маркер, то информация cookie пересылается только через HTTPS (HTTP с использованием SSL). Если этот маркер не указан, то информация пересылается обычным способом.

Установка значений записей cookie 45 Значение записи устанавливается тремя способами : 1. веб - сервером ( при включении соответствующих настроек ); 2. через заголовки ответа CGI- приложения ( например Perl, PHP, C, Sh); 3. через клиентский скрипт (javascript,vbscript). Когда запрашивается документ с HTTP сервера, браузер проверяет свои cookie на предмет соответствия домену сервера и прочей информации. В случае если найдены удовлетворяющие всем условиям значения cookie браузер посылает их в серверу в виде пары имя / значение : Cookie: NAME1=OPAQUE_STRING1; NAME2=OPAQUE_STRING2... В случае если cookie принимает новое значение при имеющемся уже в браузере cookie с совпадающими NAME, domain и path, старое значение заменяется новым. В остальных случаях новые cookies добавляются.