Московский государственный университет печати

Гасов В.М.
Цыганенко А.М.


         

Методы и средства подготовки электронных изданий

Учебное пособие


Гасов В.М.
Методы и средства подготовки электронных изданий
Начало
Печатный оригинал
Об электронном издании
Оглавление

Введение

1.

Глава 1. Основные компоненты электронных изданий

1.1.

Текстовая информация

1.2.

Полутоновые и цветные иллюстрации

1.3.

Анимационная графика

1.4.

Видеоинформация

1.5.

Аудиоинформация

2.

Глава 2. Технологии гипертекстовых изданий

2.1.

Функции гипертекстовых электронных изданий

2.2.

Принципы построения гипертекстовых изданий

2.3.

Математическая модель гипертекста

2.4.

Гипертекстовые Web-документы

2.5.

Подготовка публикаций в среде Adobe Acrobat

2.6.

Технология Help-файлов

2.7.

Средства доставки электронных изданий

2.8.

Классификация и общие принципы оформления электронных изданий

3.

Глава 3. Цифровое представление текстовой информации

3.1.

Стандарты кодирования символов ASCII, ANSI, КОИ-8 и UNICODE

3.2.

Формат PDF

3.3.

Формат разметки текста RTF

4.

Глава 4. Графические форматы

4.1.

Растровый формат GIF

4.2.

Формат графических файлов PNG

4.3.

Графический формат JPEG

4.4.

Формат TIFF

4.5.

Программные средства преобразования форматов

5.

Глава 5. Представление анимационной, видео- и звуковой информации

5.1.

Семейство форматов MPEG

5.1.1.

Компрессия видеоданных в MPEG

5.1.2.

Формат MPEG-1

5.1.3.

Формат MPEG-2

5.1.4.

Формат MPEG-4

5.1.5.

Формат MPEG-7

5.2.

Звуковые форматы

5.3.

Анимационные файловые форматы FLI, FLC, CEL

6.

Глава 6. Программы просмотра Web-публикаций

6.1.

Доступ к Web-странице в Internet

6.2.

Программа просмотра MS Internet Explorer

6.3.

Программа просмотра Netscape Navigator

7.

Глава 7. Языки разметки гипертекста и программирования скриптов

7.1.

Язык разметки гипертекста НТМL

7.2.

Расширенный язык разметки XML

7.3.

Язык Java

7.4.

Язык JavaScript

7.5.

Язык программирования сценариев PHP

7.6.

Язык Perl

7.7.

Язык моделирования виртуальной реальности VRML

8.

Глава 8. Программирование Web-страниц в языковой среде HTML

8.1.

Структура и форматирование HTML-документа

8.2.

Таблицы

8.3.

Изображения и навигационные карты

8.4.

Формы

8.5.

Фреймы

8.6.

Фреймы и таблицы

8.7.

Объекты

8.8.

Гиперссылки

8.9.

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

9.

Глава 9. Автоматизация создания Web-публикаций. Программный пакет Macromedia Dreamweaver

9.1.

Назначение и функциональные возможности пакета

9.2.

Структурная схема программного пакета

9.3.

Интерфейс пользователя и принципы его организации

9.4.

Некоторые типовые процедуры пакета Dreamweaver

9.4.1.

Работа с текстом

9.4.2.

Вставка изображений

9.4.3.

Создание карты изображения

9.4.4.

Работа с таблицами

9.4.5.

Создание форм

9.4.6.

Работа с фреймами

9.4.7.

Работа со слоями

9.5.

Использование интерактивных возможностей и анимации

9.6.

Создание Web-сайта

10.

Глава 10. Программный пакет MS FrontPage

10.1.

Функциональные возможности программного пакета

10.2.

Структурная схема пакета

10.3.

Пользовательский интерфейс FrontPage

10.4.

Типовые процедуры работы с пакетом

10.5.

Пример создания Web-страницы

11.

Глава 11. Создание мультимедийных изданий. Программный пакет Macromedia Director

11.1.

Функциональные возможности программной среды

11.2.

Интерфейс пользователя

11.3.

Работа с мультимедийными элементами

11.3.1.

Элементы труппы

11.3.2.

Спрайты

11.3.3.

Изображения

11.3.4.

Текст

11.3.5.

Анимация

11.3.6.

Аудиоинформация

11.3.7.

Создание проекторов

11.3.8.

Цифровая видеоинформация

11.4.

Пример мультимедийного гиперграфического издания

Заключение

Библиографический список

Указатели
695   предметный указатель
434   указатель иллюстраций
45   указатель компаний
Рис. 08.01. Визуализация фрагмента файла заголовков в окне браузера Рис. 08.02. Использование линий для отделения разделов Рис. 08.03. Выравнивание блоков с помощью дескриптора DIV Рис. 08.04. Неупорядоченный список (вид в окне браузера) Рис. 08.05. Упорядоченный список Рис. 08.06. Списки определений Рис. 08.07. Назначение стиля списку Рис. 08.08. Пример общего вида оглавления документа с использованием ссылок Рис. 08.09. Вид таблицы в Internet Explorer 4.0 Рис. 08.10. Вставка рисунка в текст Рис. 08.11. Пример использования тега INPUT Рис. 08.12. Пример создания формы с полями ввода и кнопками Рис. 08.13. Создание кнопок с помощью элемента HTML BUTTON Рис. 08.14. Пример спискового окна Рис. 08.15. Окно выбора программы Рис. 08.16, а. Окно выбора вариантов - свернутый список Рис. 08.16, б. Окно выбора вариантов - развернутый список Рис. 08.17. Пример окна с фреймами Рис. 08.18. Задание размеров фрейма в абсолютных величинах Рис. 08.19. Пример окна с раскрытым содержанием фреймов Рис. 08.20. Исходная таблица Рис. 08.21. Визуализация информации по гиперссылке Рис. 08.21. Визуализация информации по гиперссылке Рис. 08.22. Таблица «Утренние рейсы» Рис. 08.23. Начальный вид окна браузера Рис. 08.24. Визуализация времени работы аэропорта Рис. 08.25. Визуализация расписания утренних рейсов Рис. 08.26. Визуализация ссылки Рис. 08.27. Визуализация ссылок, созданных с помощью элемента А и атрибутов href и name Рис. 08.28. Вид исходного HTML-документа в окне браузера Рис. 08.29. Вид оглавления первой главы в окне браузера Рис. 08.30. Визуализация ссылок в окне браузера Рис. 08.31. Визуализация фрагмента текста, вызванного по ссылке Рис. 08.32. Фрагмент, вызванный второй ссылкой Рис. 08.33. Использование элементов BASE и А для создания ссылки на рисунок Рис. 08.34. Реализация ссылки на картину

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

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

В данной главе рассмотрены основополагающие принципы создания Web-страниц языковыми средствами HTML.

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

В основе языка лежат элементы (теги) - управляющие коды. Все элементы HTML начинаются с < (символ левой угловой скобки) и заканчиваются символом > (символ правой угловой скобки). Например:

<TITLE> Заголовок документа </TITLE>

Завершающий элемент выглядит так же, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере элемент <TITLE> сообщает Web-браузеру об использовании формата заголовка, а элемент </TITLE> - о завершении текста заголовка.

HTML не реагирует на регистр символов, описывающих управляющие элементы HTML.

HTML-документДокумент в формате HTML 4.0 состоит из трех частей:

    строки, содержащей информацию о версии HTML;

    раздела заголовков (определенных элементом HEAD);

    тела, которое включает собственно содержимое документа (BODY).

Ниже приведен пример обязательной структуры HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Заголовок окна браузера</TITLE>

Другие заголовки

</HEAD>

<BODY>

Текстовой материал документа

</BODY>

</HTML>

В первой строке примера представлены тип документа и версия языка, на которой подготовлен данный документ. !DOCTYPE - объявление, которое служит определением типа документа (document type definition - DTD) в метаязыке SGML и которое при обработке документа понятно типовому браузеру SGML. Задание версии HTML, использованное в документе, может быть необходимо браузерам и редакторам WWW.

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

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

Формально элемент TITLE является (по крайней мере, если следовать этому буквально) частью элемента <HEAD>, тогда как объявление !DOCTYPE предшествует всем конструкциям HTML.

Элемент <HEAD> помимо элемента TITLE может содержать метаданные (<!ELEMENT META>), включающие информацию о документе. Набор свойств метаданных спецификацией HTML не определен. Начальный тег обязателен, конечный тег запрещен.

В качестве атрибутов используются: name (имя свойства), content (значение свойства), scheme (имя схемы, используемой для интерпретации свойства) и др. Значения свойств и набор их допустимых значений должны определяться в относительном словаре, называемом профилем.

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

Рекомендуемая структура документа. В дополнение к обязательной структуре HTML-документа в него рекомендуется вставлять различные элементы.

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

Если автор документа стремится к тому, чтобы люди отыскали его документ по соответствующим связям, важность предоставления информации о его происхождении становится очевидной. Когда пользователь найдет документ с помощью поискового ресурса, он, вероятнее всего, захочет узнать, к какому виду относится документ. Поэтому каждый файл HTML должен предоставлять самую основную информацию (или связи с информацией) о его происхождении и природе. Например, в собрании электронных версий печатных изданий, разделенных на файлы малых объемов (главы, параграфы), каждый файл должен содержать, по крайней мере, связь с «первой страницей» книги (Home page).

О происхождении документа может быть представлена следующая информация:

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

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

  • Контекст документа и его статус, например: часть официальной документации компании об одном из ее продуктов.

  • URL-адрес документа. Эта информация может быть полезной, когда нужна копия документа, который был найден ранее.

Организация содержания: заголовки (headings) и абзацы (paragraphs). Как правило, HTML-документ состоит из отдельных частей, которые, в свою очередь, тоже делятся на части и т.д. В языке HTMLHTML такое разделение делается с использованием заголовков различного уровня. Части самого нижнего уровня в этой иерархии состоят из одного или нескольких абзацев. Внутренняя структура абзацев и подобных им элементов определяется элементами текстового уровня, которые будут приведены далее.

Элементы для выражения главных структурных особенностей, так называемые элементы блокового уровня, представляют собой следующее:

    заголовки различных уровней: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>

    элементы уровня абзаца:

    простой абзац: <P>

    цитирование, представляемое как отдельный абзац: <BLOCKQUOTE>

    адрес автора информации - отдельный абзац: <ADDRESS>

    элемент, сохраняющий компоновку строк и пробелов предварительно отформатированного текста, <PRE>

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

Разбив документ, можно включить в него информативные заголовки к каждому разделу. Это позволит читателю быстро перейти к интересующему его материалу.

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

Элемент заголовка является контейнером и должен иметь открывающий (<Н1>) и закрывающий (</Н1>) элементы. В HTML шесть уровней заголовков: H1 (верхний уровень), Н2, HЗ, H4, Н5 и Н6 (нижний уровень). Каждый из этих уровней выглядит определенным образом в браузере читателя.

Пример:

<HTML>

<HEAD>

<TITLE> "Работа со структурированным текстом": Пример </TITLE>

</HEAD>

<BODY>

<H1>Заголовок первого уровня</H1>

<H2>Заголовок второго уровня</H2>

<H3>Заголовок третьего уровня</H3>

<H4>Заголовок четвертого уровня</H4>

<H5>Заголовок пятого уровня</H5>

<H6>Заголовок шестого уровня</H6>

</BODY>

</HTML>

На рис. 8.1Рис. 08.01. Визуализация фрагмента файла заголовков в окне браузера показана визуализация приведенного примера в окне браузера.

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

Заголовки являются дескрипторами контейнерного типа и требуют обязательного использования открывающего и закрывающего дескрипторов. До и после заголовка предполагается обязательный разрыв абзаца. Заголовок нельзя разместить в середине абзаца для изменения размера шрифта или его гарнитуры.

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

Добавление горизонтальных линий. Еще один способ выделения смысловых фрагментов в документе заключается в использовании горизонтальных линий. Эти линии отчетливо показывают границы между разделами, что важно для выделения различных частей документа. Многие Браузербраузеры используют горизонтальную линию, которая придает четкий вид документу и зрительно увеличивает глубину (рис. 8.2Рис. 08.02. Использование линий для отделения разделов).

Горизонтальную линию можно создать с помощью элемента <HR>. Этот дескриптор рисует затененную горизонтальную линию вдоль экрана браузера. Дескриптор <HR> не является контейнером и не требует закрывающего дескриптора. До и после горизонтальной линии применяется обязательное разделение абзаца. Например:

<HTML>

<HEAD>

<TITLE>"Работа со структурированным текстом": Пример </TITLE>

</HEAD>

<BODY>

<H1>Заголовок первого уровня</H1>

<HR>

<H2>Заголовок второго уровня</H2>

<HR>

<H3>Заголовок третьего уровня</H3>

<HR>

<H4>Заголовок четвертого уровня</H4>

<HR>

<H5>Заголовок пятого уровня</H5>

<HR>

<H6>Заголовок шестого уровня</H6>

</BODY>

</HTML>

Атрибуты элемента <HR> и их назначение поясняются в табл. 8.1.

Таблица 8.1

Атрибут

Назначение

ALIGN С помощью этого атрибута можно задать выравнивание по левому краю (LEFT), по правому краю (RIGHT) или по центру (CENTER)
WIDTH Длину линии можно указать в пикселах или в процентном отношении к ширине окна браузера. Если используются проценты, добавляется знак процента к числу 
SIZE Высота линии в пикселах
NOSHADE Если имеется этот атрибут, то браузер не использует эффект трехмерности
COLOR Для указания цвета резделительной линии можно использовать шестнадцатеричное значение RGB или стандартное название цвета

Атрибуты элемента <HR> открывают широкие возможности при создании HTML-документов, не усложняя их.

Горизонтальные линии рекомендуется использовать в тех случаях, когда имеет место жесткое разделение текста. Нежелательно, чтобы линии располагались между заголовком и последующим текстом. Их также не следует использовать для создания пустот в документе.

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

Из всех дескрипторов предварительного форматирования наиболее часто используется контейнерный элемент <PRE>. Текст в контейнере <PRE> обычно имеет произвольную форму и использует пустые строки, которые служат для разрыва текста. Внутри этого контейнера можно применять дескрипторы разрыва строк и абзацев. Это позволяет создавать такие компоненты, как таблицы и колонки текста. Кроме того, элемент <PRE> часто используется для отображения больших блоков программных кодов, которые было бы сложно прочесть, если бы браузер переформатировал их.

Внутри контейнера <PRE> используются различные элементы физического и логического форматирования текста. Например, можно создать таблицы с различным шрифтовым и стилевым оформлением. В контейнер <PRE> можно помещать и элементы привязки. Однако использование в этом контейнере элементов форматирования абзаца (<Address>) или элементов заголовка не допускается

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

Имеются и другие контейнеры для предварительного форматирования, однако они объявлены вышедшими из употребления.

Если вы хотите представить код HTML в виде предварительно отформатированного текста либо использовать символы < или >, рекомендуется применять заменяющие их escape -последовательности lt и gt, например, ltPREgt.

Дескриптор <DIV>. Контейнер раздела <DIV></DIV> можно использовать для выравнивания блока элементов страницы. Этот дескриптор поддерживает атрибут ALIGN, поэтому с его помощью можно, например, выровнять по центру блок текста и графики.

Все элементы, расположенные между дескрипторами <DIV> и </DIV>, выравниваются в соответствии с тем, что указано в дескрипторе <DIV> (за исключением элементов, для которых указано другое выравнивание). Атрибут ALIGN, как и в других случаях, может иметь значения LEFT (По левому краю), CENTER (По центру) или RIGHT (По правому краю).

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

Дескриптор <DIV> осуществляет макетирование страницы на основе каскадной таблицы стилей (CSS).

Пример:

<HTML>

<HEAD>

<TITLE> "Работа со структурированным текстом": Пример</TITLE>

</HEAD>

<BODY>

<DIV ALIGN=CENTER>

<H1>Этот заголовок выравнивается по центру.</H1>

<IMG SRC="ris.gif"><BR>

Так же выравниваются рисунок, расположенный вверху, и эта строка.<BR>

<P ALIGN=RIGHT>A этот текст выравнивается по правому краю</P>

</DIV>

</BODY>

</HTML>

Рис. 8.3Рис. 08.03. Выравнивание блоков с помощью дескриптора DIV иллюстрирует визуальное представление данного примера в окне программы просмотра Internet Explorer.

Разбиение текста на абзацы. Чтобы разбить текст на абзацы, используются элементы абзаца. Если поместить открывающий элемент абзаца <Р> в начало каждого нового абзаца, то программа просмотра корректно разделит текст на абзацы. Добавление закрывающего элементы </Р> не обязательно, поскольку его функцию обычно выполняет следующий начальный элемент абзаца. Однако добавление элемента </Р> в конце абзаца поможет обработать документ в тех программах просмотра, которые не полностью соответствуют стандарту HTML.

В последнее время для представления абзацев текста все чаще используют стили, поэтому корректное употребление элемента абзаца приобретает все большее значение.

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

Элемент абзаца имеет один атрибут ALIGN, который поддерживается как Netscape NavigatorNetscape Navigator, так и Microsoft Internet ExplorerMicrosoft Internet Explorer. Если атрибут ALIGN не используется, то по умолчанию принято выравнивание текста по левому краю.

Атрибут ALIGN также можно использовать со многими другими дескрипторами HTML для выравнивания изображений, содержимого таблиц и других элементов страницы.

Разрыв строк. Язык HTML выполняет форматирование текста в программе просмотра в соответствии с использующимися тегами. В частности, можно разорвать строку текста в строго определенном месте. Для этого применяется дескриптор разрыва строки <BR>. Он заставит программу просмотра сформировать новую строку независимо от состояния текущей строки. В отличие от элемента абзаца разрыв строки не увеличивает интервал в тексте. Поскольку элемент разрыва строки не является контейнером, у него нет закрывающего дескриптора.

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

Если предполагается, что браузер может разорвать строку внутри элемента <NOBR>, то применяется так называемый "мягкий разрыв строки", при котором можно указать подходящее место разрыва с помощью элемента <WBR> . Браузер будет использовать элемент <WBR> только в случае крайней необходимости.

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

Неупорядоченный список создается с помощью управляющего элемента UL (LI):

<UL>

<LI>Компьютер.

<LI>Вычислительный сервер.

<LI>Сервер баз данных.

</UL>

В записи HTML-кода начальный и конечный теги UL обязательны.

На рис. 8.4Рис. 08.04. Неупорядоченный список (вид в окне браузера) представлен общий вид неупорядоченного списка в окне браузера.

Упорядоченный список создается с помощью управляющего элемента HTML OL (LI). Он содержит информацию, в которой важен определенный порядок. Например, последовательность параграфов главы 8 данного учебника:

<OL>

<LI> Структура и форматирование HTML-документа.

<LI> Таблицы.

<LI> Изображения и навигационные карты.

<LI> Cоздание форм.

<LI> Работа с фреймами.

</OL>

В записи HTML-кода начальный и конечный теги OL обязательны.

Вид в окне браузера упорядоченного списка приведен на рис. 8.5Рис. 08.05. Упорядоченный список.

Списки определений. Для их создания используются управляющие элементы DL (список определений), DT (термин) и DD (его определение). В записи HTML-кода начальный и конечный теги DL обязательны.

Списки определений, создаваемые с помощью элемента DL, могут содержать пары, включающие термин и его определение. Списки определений могут иметь и иное применение.

На языке HTMLHTML списки определений записываются следующим образом:

<DL>

<DT><STRONG> Компьютер IBM PC </STRONG>

<DD> Наиболее распространенная платформа для офисных систем.

<DT><STRONG> Компьютер Macintosh </STRONG>

<DD>Ориентирован на работу в редакционно-издатель-ских системах

<DT><STRONG> Графическая рабочая станция (SUN) </STRONG>

<DD> Применяется для высокоскоростной обработки информации, например сложной графической и мультимедийной информации. Используется многопроцессорная структура.

</DL>

Вид представленного выше HTML-кода в окне браузера приведен на рис. 8.6Рис. 08.06. Списки определений.

Списки определений незначительно отличаются от других типов списков - тем, что элементы состоят из двух частей: термина и определения. Термин обозначается с помощью элемента DT и может иметь только встроенное содержимое. Описание указывается с помощью элемента DD, имеющего содержимое уровня блока.

Списки определений имеют разнообразное применение. Например, с помощью элемента DL можно осуществить разметку диалогов, где каждый элемент DT означает говорящего, а в каждом элементе DD содержатся его слова.

Списки могут быть вложенными. БраузерБраузеры обычно сдвигают вложенные списки соответственно уровню вложенности.

В предыдущих версиях для задания стиля оформления списков использовался атрибут type. В HTML 4.0 стили списков определяются с помощью таблиц стилей (CSS).

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

<STYLE type="text/css">

OL.withroman { list-style-type: lower-roman }

</STYLE>

<BODY>

<OL class="withroman">

<LI> Структура и форматирование HTML-документа.

<LI> Таблицы.

<LI> Изображения и навигационные карты.

<LI> Cоздание форм.

<LI> Работа с фреймами.

</OL>

</BODY>

Общий вид списка представлен на рис. 8.7Рис. 08.07. Назначение стиля списку.

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

Осуществляется это в два этапа. Сначала в HTML-файле создается элемент привязки, указывающий, куда переходить по ссылке. Для этого используется стандартный элементы <A> с параметром <HREF>. Далее, с помощью элемента <A> с параметром <NAME> в тексте документа указывается место, на которое дается ссылка.

Например, можно поступить следующим образом:

<A HREF="#MyLabel">Перейти туда-то</A>, при этом создав где-то в тексте <A NAME=MyLabel>Фрагмент текста</A>.

Можно устанавливать имена для большинства элементов HTML-страницы с помощью атрибута ID. Таким образом, можно дать заголовку имя и ссылаться на него. Например:

<HTML>

<HEAD>

<TITLE> "Работа со структурированным текстом": Пример </TITLE>

</HEAD>

<BODY>

<B>Содержание</B>

<BR>

<A HREF="#Head01'>Раздел 1</A>

<BR>

<A HREF="#Head02'>Раздел 2</A>

<BR>

<HR>

<H1 ID=Head01>Раздел 1</H1>

</BODY>

</HTML>

На рис. 8.8Рис. 08.08. Пример общего вида оглавления документа с использованием ссылок приведен общий вид оглавления документа с использованием ссылок.

HTML, как язык разметки текста, предполагает независимость документа от компьютера пользователя. Читатели могут установить любые шрифты, цвета и т.д. Это может приводить к изменению расположения текста в окне программы просмотра, если параметры не заданы соответствующими тегами.

Различные программы просмотра могут показывать одну и ту же страницу по-разному в зависимости от настроек, принятых по умолчанию, и опций, указанных пользователем.

Авторы электронных публикаций часто используют контейнер предварительно отформатированного текста. Это дает автору гораздо больше возможностей управлять отображением документа. Однако из всех дескрипторов предварительного форматирования наиболее эффективным считается использование контейнерных escape-последовательностей lt и gt, ltPREgt.

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

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

Структура таблиц в HTML включает строки и столбцы, которые могут иметь заголовки (headers - имена, титулы, объяснения). Заголовок (элемент CAPTION) предоставляет краткое описание таблицы. Можно также указать и более длинное описание (с помощью атрибута summary) для удобства людей, использующих агентов на базе азбуки Бройля или речи.

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

Строки таблицы могут группироваться в разделы заголовков, нижних заголовков и тела с помощью элементов THEAD, TFOOT и TBODY соответственно. Группы строк convey несут дополнительную структурную информацию и могут генерироваться агентами пользователей различными способами, отображающими эту структуру. Агенты пользователей могут использовать подразделение на заголовки/тело/нижние заголовки для поддержки прокрутки тела независимо от заголовков. При печати длинных таблиц информация из заголовков может повторяться на каждой странице таблицы.

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

Элементы построения таблиц

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

Элемент <TABLE> ...</TABLE> определяет таблицу HTML и обрамляет всю табличную спецификацию. Все элементы таблицы должны находиться внутри этих двух элементов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER, т.е. если присутствует параметр BORDER, браузер визуализирует таблицу в рамке. Начальный и конечный теги обязательны.

Необязательный элемент <CAPTION> ... </CAPTION> специфицирует текст заголовка (имя) таблицы. Положение заголовка по умолчанию - сверху по центру таблицы. Для помещения заголовка в нижнюю часть таблицы используется параметр ALIGN=BOTTOM. В заголовке может использоваться дескриптор любого типа. Начальный и конечный теги обязательны.

Элемент <TR> ... </TR> определяет строку таблицы. Количество строк таблицы определяется количеством встречающихся пар <TR>..</TR>. Строки могут иметь атрибуты ALIGN (LEFT, CENTER, RIGHT) и VALIGN (TOP, MIDDLE, BOTTOM), которые описывают визуальное положение содержимого строк в таблице. Начальный тег обязателен. Конечный тег не обязателен.

Элемент <TH> ... </TH> определяет ячейку заголовка таблицы. По умолчанию текст в этой ячейке показывается жирным шрифтом по центру. Ячейки заголовка могут описываться дополнительными параметрами, определяющими характеристики ячейки и/или ее содержимого.

Элемент <TD> ... </TD> определяет ячейку данных таблицы. Этот элемент используется и в том случае, если в ячейке размещены и заголовок и данные. По умолчанию текст в ячейке выравнивается по левому краю и центрируется по вертикали. Ячейки данных могут описываться дополнительными параметрами, определяющими характеристики ячейки и/или ее содержимого.

Начальный тег Th или TD обязателен, конечный тег не обязателен.

Группы строк: элементы THEAD, TFOOT и TBODY.

    Элемент <THEAD></THEAD> - заголовок таблицы.

    Элемент <TFOOT></TFOOT> - нижний заголовок таблицы.

    Начальный тег обязателен, конечный тег не обязателен.

    Элемент < TBODY></TBODY> - тело таблицы.

Каждая группа строк должна содержать по крайней мере одну строку, определяемую элементом TR. Разделы THEAD, TFOOT и TBODY должны содержать одинаковое число столбцов.

Начальный и конечный теги не обязательны.

Группы столбцов: элементы COLGROUP и COL. Элемент <COLGROUP></COLGROUP> - группа столбцов таблицы. Начальный тег обязателен, конечный тег не обязателен

Элемент <COL></COL> позволяет авторам использовать одни и те же атрибуты в различных столбцах, не применяя структурной группировки. Начальный тег обязателен, конечный тег запрещен.

Группы столбцов позволяют создавать структурные подразделения внутри таблицы. Авторы могут выделять такую структуру с помощью таблиц стилей или атрибутов HTML.

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

<TABLE>

<THEAD>

<TR> …заголовок…

</THEAD>

<TFOOT>

<TR> …нижний заголовок…

</TFOOT>

<TBODY>

<TR> …первая строка данных блока 1…

<TR> …вторая строка данных блока 1…

</TBODY>

<TBODY>

<TR> …первая строка данных блока 2…

<TR> …вторая строка данных блока 2…

<TR> …третья строка данных блока 2…

</TBODY>

</TABLE>

Атрибуты элементов. Каждый из указанных выше элементов поддерживается определенным набором атрибутов, характеризующих свойства элемента и связанной с ним информации. Например, для элемента <TABLE> используются следующие атрибуты: summary, align, width и т.д.

Атрибут summary = текст предоставляет краткую информацию о назначении и структуре таблицы для агентов пользователей, выполняющих генерацию для невизуальных средств, таких, как синтезаторы речи или азбуки Бройля.

Атрибут align = left|center|right задает положение таблицы относительно документа. Допустимые значения:

    left: таблица размещается в левой части документа;

    center: таблица находится в центре документа;

right: таблица расположена в правой части документа.

Атрибут width = [длина] определяет необходимую ширину всей таблицы и предназначен для визуальных объектов пользователей. Значение указано в процентах от доступного горизонтального пространства. Если ширина не указана, она определяется агентом пользователя.

Атрибут border = [толщина] обеспечивает формирование рамки таблицы линией заданной толщины.

Атрибуты, определяемые в любом другом месте:

    id, class (идентификаторы в пределах документа),

    lang (информация о языке),

    dir (направление текста),

    title (заголовок элемента),

    style (встроенная информация о стиле),

    onclick, ondblclick, onmousedown, onmouseup, onmou-seover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события),

    bgcolor (цвет фона),

    frame, rulers, border (границы и линии),

    cellspacing, cellpadding (поля в ячейках).

Строчный элемент TR имеет следующие атрибуты:

    %cellhalign - горизонтальное выравнивание в ячейках,

    %cellvalign - вертикальное выравнивание в ячейках,

    id, class (идентификаторы в пределах документа),

    lang (информация о языке),

    dir (направление текста),

    title (заголовок элемента),

    style (встроенная информация о стиле),

    onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,onkeyup (внутренние события),

    align, char, charoff, valign (выравнивание в ячейках).

Атрибуты элементов TH и TD:

    headers = idrefs. В этом атрибуте указывается список ячеек заголовков, предоставляющих заголовочную информацию для текущей ячейки данных. Значением этого атрибута является разделенный пробелами список названий ячеек. Имена ячейкам должны даваться с помощью атрибута id. Авторы обычно используют атрибут headers с целью помочь невизуальным агентам пользователей в генерации заголовков ячеек данных (например, заголовок произносится перед прочтением данных ячейки), но этот атрибут может также использоваться вместе с таблицами стилей.

    scope = имя области действия. Этот атрибут определяет набор ячеек данных, для которых заголовочная информация задается текущим заголовком. Может использоваться вместо атрибута a href="tables.html#adef-headers" class= "noxref">headers, особенно в простых таблицах. Если этот атрибут используется, он должен иметь одно из следующих значений:

      row: В ячейке представлена заголовочная информация для оставшейся части строки, в которой содержится эта ячейка.

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

      rowgroup: В ячейке представлена заголовочная информация для оставшейся группы строк, в которой содержится эта ячейка.

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

    abbr = текст. Этот атрибут используется для представления сокращенной формы содержимого ячейки. Он может генерироваться агентами пользователей в подходящий момент вместо содержимого ячейки. Сокращенные имена должны быть короче, и агенты пользователей могут повторять их. Например, синтезаторы речи могут генерировать сокращенные заголовки, относящиеся к определенной ячейке, перед генерацией содержимого ячейки.

    axis = cdata. Этот атрибут может использоваться вместо ячейки в концептуальных категориях. Агенты пользователей могут давать доступ к этим категориям (например, пользователь может запрашивать у агента все ячейки, принадлежащие к определенной категории, агент пользователя может представлять таблицу в форме оглавления и т.д.). Значением этого атрибута является список имен категорий, разделенных запятыми.

    rowspan = число. Этот атрибут определяет число строк текущей ячейки. По умолчанию используется значение один (1).

    colspan = число. Этот атрибут определяет число столбцов текущей ячейки. По умолчанию используется значение один (1).

Оставшиеся элементы HTML также имеют свои атрибуты, которые здесь не рассматриваются. Некоторые из атрибутов являются общими для различных элементов. Например, атрибут align описывает свойства таких элементов, как TABLE, TR, TD,TH. Атрибуты id, class, lang, dir, style применяются к элементам TABLE, TR и т.д.

Общий вид таблицы. Формат таблицы без использования групповых элементов выглядит следующим образом:

<TABLE> начало определения таблицы

<CAPTION> содержание заголовка </CAPTION> - описание заголовка

<TR> - начало описания первой строки первой ячейки

<TH> содержимое ячейки </TH> - первая ячейка в строке 1 (заголовок)

………………….

<TH> содержимое ячейки </TH> - последняя ячейка в строке 1 (заголовок)

</TR> - конец описания первой строки

<TR> - начало описания второй строки

<TD> содержимое ячейки </TD> - первая ячейка в строке 2

…………………

<TD> содержимое ячейки </TD> - последняя ячейка в строке 2

</TR> - конец описания второй строки

……………………….

<TR> - начало описания первой строки

<TD> содержимое ячейки </TD> - первая ячейка в последней строке ...

<TD> содержимое ячейки </TD> - последняя ячейка в последней строке

</TR> - конец описания последней строки

</TABLE> - конец описания таблицы

Описание таблицы должно располагаться между дескрипторами <TABLE> и </TABLE>. Первый элемент в таблице - CAPTION является необязательным. Далее может располагаться любое количество строк, описываемых дескрипторами <TR> и </TR>. В строке может располагаться любое число ячеек, описываемых дескрипторами <TD>...</TD> или <TH>...</TH>. Важно помнить, что каждая строка таблицы форматируется отдельно от предыдущей и последующей.

Создание таблицы. Рассмотрим пример создания таблицы, используя элементы языка HTML.

При помощи атрибута border элемента <TABLE> формируется рамка таблицы:

TABLE border>

Далее при помощи элемента <TR> (Table Row - строка таблицы) создается первая строка таблицы. Значение атрибута align элемента <TR> указывает, что в данном примере текст должен быть выровнен по центру каждой ячейки:

<TABLE border >

<TR align=centrer>

В первой строке таблицы должен содержаться заголовок таблицы, который устанавливается с помощью элемента <ТН> (Table Header - заголовок таблицы) и выводится в окне программы просмотра полужирным шрифтом. Для объединения всех столбцов в заголовке таблицы используется атрибут colspan элемента <ТН>:

<TABLE border >

<TR align=centrer>

<ТН colspan=3>Это таблица

</ТН>

На этом заканчивается заголовок таблицы, размещенный в первой строке. Код HTML необходимо завершить закрывающим элементом </TR>:

<TABLE border >

<TR align=centrer>

<ТН colspan=3>Это таблица

</ТН>

</TR>

Создадим вторую строку таблицы:

<TABLE border >

<TR align=centrer>

<ТН colspan=3>Это таблица

</ТН>

</TR>

<TR align=centrer>

Содержимое каждой ячейки с данными задается с помощью тега <TD> (Table Data - данные таблицы). В таблицу добавим третью строку:

<TABLE border >

<TR align=centrer>

<ТН colspan=3>Это таблица

</ТН>

</TR>

<TR align=centrer>

<TD>Это</TD>

<TD>ячейки</TD>

<ТD>для</ТD>

</TR>

<TR align=centrer>

<ТD>данных</ТD>

<TD>в</TD>

<ТD>таблице</ТD>

</TR>

</TABLE>

Создание таблицы завершаться элементом </TABLE>

Вид созданного HTML-файла в окне браузера представлен на рис. 8.9Рис. 08.09. Вид таблицы в Internet Explorer 4.0.

Авторы могут включать в свои Web-страницы изображения в различных форматах (GIF, JPEG, PNG и др.). На загрузку изображений затрачивается определенное, порою достаточно большое время и ресурсы процессора, зависящие, в том числе, от размеров изображения и глубины цвета. Поэтому рекомендуется использовать файлы с изображениями небольших размеров, оптимизированные для использования в InternetInternet.

В предшествующих версиях HTMLHTML (до 3.2) авторы могли включать изображения с помощью тега IMG. В версии HTML 4.0 для включения изображений могут использоваться элементы IMG и OBJECT.

Обычно изображения включаются в тело HTML-документа в виде изображения или объекта. Работа с объектами будет рассмотрена ниже, а в данном параграфе ограничимся только изображениями.

Включение изображения с помощью элемента IMG. Для включения графики в документ используется элемент:

<IMG src="ImageName">

где ImageName - URL-адрес графического файла.

Начальный тег обязателен, конечный тег запрещен.

Элемент IMG поддерживается следующими атрибутами:

    src = URL. Этот атрибут задает местоположение изображения. Чаще всего задается URL-адрес внедряемого изображения.

    longdesc= URL. Этот атрибут определяет ссылку на длинное описание изображения в виде графических данных. Графический файл должен дополняться кратким описанием, задаваемым атрибутом alt. Если с изображением связана навигационная карта, в этом атрибуте должна приводиться информация о ее содержимом. Это особенно важно для серверных навигационных карт.

    id, class - идентификаторы в пределах документа,

    alt - альтернативный текст,

    lang - информация о языке,

    dir - направление текста,

    title - заголовок элемента,

    style - встроенная информация о стиле,

    onclick, ondbclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup - внутренние события,

    usemap - клиентская навигационная карта,

    ismap - серверная навигационная карта,

    align, width, height, border, hapase, vspase - визуальное представление изображений (например, height - высота, width - ширина).

Атрибут alt задает альтернативный текст, который генерируется, если изображение невозможно отобразить. Агенты пользователей должны генерировать альтернативный текст, если они не поддерживают изображение, если они не поддерживают определенный тип изображений или если они сконфигурированы так, чтобы не выводить изображения.

Элемент IMG внедряет изображение в текущий документ по адресу из определения элемента. Элемент IMG содержит не изображение, а адресную ссылку на это изображение (в атрибуте src).

Размеры изображений. Атрибуты height и width используются для передачи программе просмотра высоты и ширины изображения в пикселах:

<IMG SRC ="picture.gif" HEIGHT=100 WIDTH=65>

Некоторые программы просмотра используют значения атрибутов height и width для преобразования изображения, если его реальные размеры не соответствуют заданным атрибутам (масштабирование). Однако при этом может происходить искажение изображений. Следует обратить внимание, что длины, выраженные в процентах, зависят от доступного горизонтального или вертикального пространства, а не от исходного размера изображения. Многие современные WYSIWYG-редакторы HTML способны самостоятельно определять размеры включаемых в документ изображений.

Размещение изображений. При размещении графики в тексте Web-документа используются способы, традиционные для пакетов верстки. Режим размещения графики задается соответствующими атрибутами: align=top, middle или center (по верхней границе изображения или посередине). По умолчанию нижняя часть изображения выравнивается со следующим за графикой текстом. Ниже приведен пример выравнивания текста по верхнему краю изображения:

<IMG SRC = "example.jpg" ALIGN=TOP>.

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

Возможно выравнивание по среднему уровню изображения:

<IMG SRC = "example.jpg" ALIGN =middle> (или center).

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

Можно использовать режим обтекания рисунка текстом с помощью атрибутов align=left и right. Рисунок в этом случае может располагаться справа или слева от текста. При этом можно задать и способ выравнивания текста. Например:

<HTML>

<HEAD>

<TITLE>Изображение</TITLE>

</HEAD>

<BODY>

<P>Программы просмотра выравнивают только одну строку текста, а последующие размещаются ниже изображения.

Возможно выравнивание по среднему уровню изображения:

<!-<P><IMG SRC = "example.jpg" ALIGN =middle> (или center).->

<IMG SRC="9_th_val.jpg" ALIGN=right>

<P>Как и в предыдущем случае, выравнивается только одна строка текста.

<P>Можно использовать режим обтекания рисунка текстом с помощью атрибутов align=left и right. Рисунок в этом случае может располагаться справа или слева от текста. При этом можно задать и способ выравнивания текста.

<P>Изображение может размещаться в разрывах текста. Для вывода такого изображения создается новый абзац, где размещается изображение.

<!-<P><P ALIGN =center><IMG SRC = "example.jpg"></P>->

<P>Изображение размещено по центру, следующий параграф выравнивается по левому краю.

</BODY>

</HTML>

Соответствующий данному примеру вид изображения в окне браузера приведен на рис. 8.10Рис. 08.10. Вставка рисунка в текст.

Пространство вокруг изображений. Атрибуты vspace и hspace определяют свободное пространство слева и справа (hspace) и над и под (vspace) IMG. По умолчанию значение этого атрибута не определено, но обычно это небольшое ненулевое значение. Оба атрибута имеют значение типа длины.

Границы. Изображение может окружать граница (например, если она указана пользователем или изображение имеет содержимое элемента A).

Атрибут: border = пикселы. Атрибут border определяет ширину границы в пикселах. Значение этого атрибута, используемое по умолчанию, зависит от агента пользователя. Считается нежелательным.

Альтернативный текст для графики. Некоторые программы просмотра WWW не способны выводить графику. Кроме того, часть пользователей в целях экономии времени специально отказывается от загрузки изображений при связи через модем. В качестве альтернативы вместо изображения может выводиться краткий текст. Для этого используется атрибут alt:

<IMG SRC="example.jpg" alt="Пример">

Приведенная запись выводит вместо изображения example.jpg слово "Пример". Если программа просмотра поддерживает графику, на экран будет выведен рисунок, в противном случае - заданный в атрибуте alt текст.

Краткий текст может дополняться более развернутым описанием изображения. Для этого используется атрибут longdesc:

<BODY>

<P>

<IMG src="example.jpg"

alt="Пример"

longdesc=" example.html">

</BODY>

Атрибут alt задает краткое описание изображения. Его должно быть достаточно для того, чтобы пользователи могли решить, хотят ли они следовать по ссылке, определяемой атрибутом longdesc, для получения более подробного описания. Здесь это ссылка "example.html".

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

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

Для задания фоновой графики используется элемент:

<BODY BACKGROUND="example.jpg">

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

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

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

Навигационная карта создается путем назначения изображения или объекта с указанием соответствующих геометрических областей.

Имеется два типа навигационных карт:

  1. Навигационная карта клиентскаяКлиентская. Когда пользователь активизирует область клиентской навигационной карты с помощью мыши, координаты точки интерпретируются агентом пользователя. Агент пользователя выбирает ссылку, указанную для активизированной области, и выполняет ее.

  2. Серверная. Когда пользователь активизирует область серверной навигационной карты с помощью мыши, координаты точки щелчка передаются агенту на сервере, определенному с помощью атрибута href элемента A. Агент на сервере интерпретирует координаты и выполняет соответствующие действия.

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

Клиентские навигационные карты используют элементы MAP и AREA:

    Элемент<MAP></MAP> - клиентская навигационная карта.

    Элемент <AREA>- область клиентской навигационной карты.

    Начальный и конечный теги элемента MAP обязательны.

    Начальный тег элемента AREA обязателен, конечный тег запрещен.

Чтобы включить поддержку карты для изображения, необходимо ввести атрибут в элемент IMG:

<IMG SRC="URL" usemap="url#map_name">

Атрибут usemap указывает, в каком месте находится карта описываемого изображения. Карта изображения определяет, какому участку изображения какой URL-адрес соответствует. Карта изображения может находиться в том же документе, что и изображение, или в другом документе. Помещение карты в другой документ позволяет собрать все карты изображений в одном документе (если их несколько в различных документах). Атрибут map_Name указывает имя карты для изображения, а предшествующий ему URL-адрес определяет местонахождение карты. Если URL-адрес отсутствует, то карта с указанным именем ищется в текущем документе.

Синтаксис определения карты изображения иллюстрируется следующим примером:

<MAPNAME="map_name"><AREA[SHAPE="shape"]COORDS="x,y,."

[HREF="reference"] [NOHREF]></MAP>

Элемент <MAP NAME="map_name"></MAP> - определяет начало описания карты с именем map_name.

Элемент <AREA...> - описывает участок изображения и ставит ему в соответствие URL-адрес.

Атрибуты:

    shape=default|rect|circle|poly - этот атрибут определяет форму области. Возможные значения:

    default: Задает всю область.

    rect: Определяет прямоугольную область.

    circle: Определяет круглую область.

    poly: Определяет многоугольную область.

    coords - координаты в пикселах описываемой области. Для прямоугольника это четыре координаты левого верхнего и правого нижнего углов, для круга - центр круга и радиус. Для многоугольника описание каждого угла в двух координатах (число координат равно удвоенному количеству углов).

Координаты считаются с нуля, поэтому для описания области 100 на 100 используется:

<AREA COORDS="0,0,99,99" ...>

Возможные комбинации:

    rect: x левой границы, y верхней границы, x правой границы, y нижней границы.

    circle: x центра, y центра, радиус. Примечание: Если ра-диус указан в процентах, агенты пользователя должны вычислять окончательное значение радиуса в зависимости от назначенных объекту ширины и высоты. Радиус должен быть наименьшим из этих двух значений.

    poly: x1, y1, x2, y2, ..., xN, yN. Координаты задаются относительно верхнего левого угла объекта. Все значения являются длинами; отделяются друг от друга запятыми.

    href="URL". Описание ссылки, действие по которой будет выполняться при щелчке мыши в заданной области.

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

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

Описание карты изображения завершается закрывающим тегом </MAP>.

Элемент MAP определяет клиентскую навигационную карту, которая может быть связана с одним или несколькими элементами (IMG, OBJECT или INPUT). Навигационная карта связывается с элементом при помощи атрибута usemap этого элемента.

Каждый элемент MAP может включать:

    Один или несколько элементов AREA. Эти элементы не имеют содержимого, но определяют геометрические области навигационной карты и ссылки, связанные с каждой областью. При использовании этого подхода элемент MAP не имеет генерируемого содержимого. Таким образом, авторы должны изменять текст для каждого элемента AREA с помощью атрибута alt.

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

В поле изображения может быть назначено несколько зон, на которые допустимы ссылки:

<IMG USEMAP="#map1" SRC="http://example/areas.gif " HEIGHT=204 WIDTH=402>

<MAP name="map1">

<AREA coords="0,0,401,40" href="#area1">

<AREA coords="0,30,130,203" href="#area2">

<AREA shape="poly"coords="290, 90, 330, 40, 401, 90,

370, 180, 280, 180"

href="#area4">

<AREA shape="circle" coords="180,100,90" href="#area3">

</MAP>

Зоны данного изображения:

    <A NAME="area1">Зона 1 (Area 1)

    <A NAME="area2">Зона 2 (Area 2)

    <A NAME="area3">Зона 3 (Area 3)

    <A NAME="area4">Зона 4 (Area 4)

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

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

Для включения ссылки на внешнее изображение используется ссылка:

<A HREF="example.jpg">Полноцветное изображение</A>

Можно также использовать ссылку на уменьшенную копию загружаемого изображения:

<A HREF="largeexample.jpg"><IMG SRC="smallexample.jpg"></A>

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

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

При создании серверной навигационной карты применяются элементы IMG и INPUT. При использовании элемента IMG он включается в элемент A. В случае применения элемента INPUT он должен иметь тип "image". В обоих случаях для элемента устанавливается логический атрибут ismap.

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

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

<P><A href="http://www.acme.com/cgi-bin/competition">

<IMG src="game.gif" ismap alt="target"></A>

Координаты области, в которой произошел щелчок, передаются на сервер следующим образом. Агент пользователя получает новый URL-адрес из URL-адреса, указанного в атрибуте href элемента A, добавляя '?', за которым следуют координаты x и y, разделенные запятой. Затем выполняется переход по ссылке с использованием нового URL-адреса. Например, в данном примере, если пользователь щелкает в точке с координатами x=10, y=27, то новый адрес URL - "http://www.acme.com/cgi-bin/competition?10,27".

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

Формы используются для ввода информации. Их можно сравнить с бланками или анкетами: они содержат поля для заполнения, списки для выбора одного из элементов и т.д. Важным является определение структуры формы.

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

Ниже в качестве примера приводится простая форма, включающая метки, кнопки с зависимой фиксацией и кнопки очистки формы или отправки данных:

<FORM action="http://somesite.com/prog/adduser" method="post">

<P>

<LABEL for="firstname">Имя: </LABEL>

<INPUT type="text" id="firstname"><BR>

<LABEL for="lastname">Фамилия: </LABEL>

<INPUT type="text" id="lastname"><BR>

<LABEL for="email">Адрес электронной почты: </LABEL>

<INPUT type="text" id="email"><BR>

<INPUT type="radio" name="sex" value="Male">

Мужской<BR>

<INPUT type="radio" name="sex" value="Female">

Женский<BR>

<INPUT type="submit" value="Отправить"><INPUT

type="reset">

</P>

</FORM>

Типы элементов формы

Спецификацией HTML определены следующие типы элементов форм:

  1. Кнопки. Авторы могут создавать три типа кнопок:

    • Кнопки отправки. При активизации такой кнопки производится отправка данных формы. В форме может быть несколько кнопок отправки.

    • Кнопки сброса. При активизации этой кнопки для всех элементов формы устанавливаются исходные значения.

    • Прочие кнопки. Для этих кнопок действие по умолчанию не определено. С атрибутами событий каждой такой кнопки могут быть связаны клиентские скрипты. Если происходит событие (например, пользователь нажимает кнопку, отпускает ее и т.д.), включается связанный с событием скрипт. Авторы определяют язык скрипта для кнопок в объявлении скрипта по умолчанию (в элементе META).

    При создании кнопок используются управляющие элементы HTML (BUTTON или INPUT).

  2. Флажки. Флажки (и кнопки с зависимой фиксацией) - это переключатели вкл./выкл., которые могут переключаться пользователем. Переключатель "включен", если для управляющего элемента HTML установлен атрибут selected.

    При отправке формы успешными могут стать только включенные переключатели. Несколько флажков в форме могут создаваться с помощью одного и того же управляющего элемента HTML (INPUT).

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

  4. Меню. С его помощью осуществляется выбор одного из предложенных вариантов. Меню создается с помощью управляющего элемента HTML SELECT, а также элементов OPTGROUP и OPTION.

  5. Текстовой ввод. Этот элемент формы используется для ввода буквенно-цифровых данных. Текстовой ввод поддерживается двумя управляющими элементами HTML: INPUT и TEXTAREA. Элемент INPUT создает элемент формы для ввода текста из одной строки, а элемент TEXTAREA обеспечивает ввод текста из нескольких строк. Введенный текст становится текущим значением управляющего элемента HTML.

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

  7. Скрытые элементы формы. Авторы могут создавать элементы формы, не представляемые пользователям, но имеющие значения, которые передаются с формой. Для создания скрытого элемента формы используется управляющий элемент HTML INPUT.

  8. Объекты. Авторы могут размещать в формах объекты для использования связанных с ними определенных данных. Для создания таких элементов формы используется управляющий элемент HTML OBJECT.

Управляющие элементы HTML

Для создания форм спецификацией HTML предусмотрено использование таких управляющих элементов языка HTML, как:

    Элемент FORM - интерактивная форма.

    Элемент INPUT - управляющий элемент формы.

    Элемент BUTTON - создание кнопок.

    Элементы SELECT, OPTGROUP и OPTION - создание меню.

    Элемент TEXTAREA - создание текстового поля из нескольких строк.

    Элемент LABEL - создание текста метки поля формы.

    Элементы FIELDSET и LEGEND - группировка связанных меток и управляющих элементов по темам.

Рассмотрим некоторые из названных выше управляющих элементов языка HTML.

Элемент FORM используется для создания интерактивных форм. Начальный и конечный теги обязательны.

Этот элемент поддерживается следующими атрибутами:

    action=URL. Задает агента для обработки формы. Например, значением может быть URL HTTP (для передачи формы в программу) или mailto URL (для отправки формы по электронной почте).

    method = get|post. Определяет метод HTTP, используемый для передачи набора данных формы. Возможные значения - "get" (по умолчанию) и "post".

    enctype = content-type. Задает тип содержимого, используемый для отправки формы на сервер.

    accept-charset= список наборов символов. Задает список кодировок символов для ввода данных, которые должны приниматься обрабатывающим эту форму сервером. Значением является разделенный пробелами и/или запятыми список значений charset. Сервер должен принимать любую кодировку для загруженного объекта. По умолчанию значением этого атрибута является зарезервированная строка "UNKNOWN".

    accept = content-type-list. Этот атрибут определяет список типов содержимого, которые должен корректно обрабатывать сервер.

Элемент FORM определяет:

    Макет формы - программу, которая будет обрабатывать заполненную и переданную форму (атрибут action). Получающая форму программа должна иметь возможность определения пар имя/значение.

    Метод отправки данных на сервер (атрибут method) - кодировку символов, которая должна приниматься сервером для обработки этой формы (атрибут accept-charset). Агенты пользователей могут рекомендовать значение атрибута accept-charset и/или не позволять пользователям вводить нераспознаваемые символы.

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

В следующем примере показана форма, которая должна обрабатываться программой "adduser". Эта форма будет отправляться с использованием метода HTTP "post":

<FORM action="http://somesite.com/prog/adduser" method="post">

...содержимое формы...

</FORM>

Ниже приведен пример отправки формы на адрес электронной почты:

<FORM action="mailto:Kligor.T@gee.whiz.com" method="post">

...содержимое формы...

</FORM>

Элемент INPUT - управляющий элемент формы. Начальный тег обязателен. Конечный тег запрещен.

Элемент поддерживается следующими атрибутами:

    tupe = text |password |checkbox| radio|submit |reset| file |hidden |image| button - определяет тип управляющего элемента. По умолчанию используется значение "text".

    name= cdata - определяет имя управляющего элемента.

    value = cdata - определяет начальное значение управляющего элемента. Этот атрибут не обязателен, если только для атрибута type не установлено значение "radio".

    size = cdata - сообщает агенту пользователя начальную ширину элемента формы. Ширина дается в пикселах, если для атрибута type не установлено значение "text" или "password". В последнем случае ширина задается числом символов (число должно быть целым).

    maxlength= число. Если для атрибута type установлено значение "text" или "password", этот атрибут определяет максимальное число символов, вводимых пользователем. Оно может превышать указанный в атрибуте size размер поля. В таком случае агент пользователя должен создать механизм прокрутки. По умолчанию число символов не ограничено.

    checked. Если для атрибута type установлено значение "radio" или "checkbox", этот логический атрибут указывает, что флажок установлен. Агенты пользователей должны игнорировать этот атрибут для других типов управляющих элементов.

    src = URL. Если атрибут type имеет значение "image", этот атрибут определяет местоположение изображения, используемое для представления графической кнопки.

Элементы формы, создаваемые с помощью элемента INPUT. Тип элемента формы, определяемый управляющим элементом HTML INPUT, зависит от значения атрибута type:

    text. Создает поле ввода для текста из одной строки.

    password. Служит для ввода скрытого текста, например паролей.

    checkbox. Создает флажок.

    radio. Создает кнопку с зависимой фиксацией.

    submit. Создает кнопку отправки.

    image. Создает графическую кнопку отправки. Значение атрибута src задает URL изображения, используемого для представления кнопки. Если для щелчка на изображении используется курсор мыши, на сервер передаются форма и координаты курсора. Значение x измеряется числом пикселов от левой границы изображения, а значение y - в пикселах от верхней границы изображения. В передаваемые данные включаются последовательности имя. x=значение-x и имя.y=значение-y, где "имя" - значение атрибута name, а значение-x и значение-y - значения координат x и y соответственно.

    reset. Создает кнопку сброса.

    hidden. Создает невидимый элемент формы.

    file. Создает элемент выбора файла. Агенты пользователей могут использовать значение атрибута value в качестве исходного имени файла.

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

В качестве примера использования тегов FORM и INPUT приведем HTML-код следующего вида:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Элемент INPUT.HTM</title>

</head>

<body>

<form>

Номер телефона:<INPUT TYPE="text" NAME="Телефон" size="15'

MAXLENGTH="15'>

</form>

</body>

</html>

В результате выполнения этого HTML-кода в окне браузера формируется поле ввода, представленное на рис. 8.11Рис. 08.11. Пример использования тега INPUT.

В случае более сложных форм управляющий элемент INPUT может в одном HTML-документе поддерживаться несколькими атрибутами. Ниже приведен пример HTML-кода, в состав которого включены атрибуты элемента INPUT: action, type, radio, submit, reset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Элемент INPUT type.HTM</title>

</head>

<body>

<FORM action="http://somesite.com/prog/adduser" method="post">

<P>

Имя: <INPUT type="text" name="firstname"><BR>

Фамилия: <INPUT type="text" name="lastname"><BR>

email: <INPUT type="text" name="email"><BR>

<INPUT type="radio" name="sex" value="Male"> Мужской<BR>

<INPUT type="radio" name="sex" value="Female"> Женский<BR>

<INPUT type="submit" value="Отправить"><INPUT type="reset">

</P>

</FORM>

</body>

</html>

Cформированная этим HTML-кодом в окне программы просмотра форма представлена на рис 8.12Рис. 08.12. Пример создания формы с полями ввода и кнопками.

Элемент BUTTON. В записи HTML-кода начальный и конечный теги обязательны.

Этот элемент поддерживается следующими атрибутами:

    name = cdata. Определяет имя управляющего элемента.

    value = cdata. Определяет начальное значение кнопки.

    type = submit|button|reset. Объявляет тип кнопки. Возможные значения:

      submit: Создает кнопку отправки. Это значение используется по умолчанию.

      reset: Создает кнопку сброса.

      button: Создает другую кнопку.

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

В приведенном ниже примере (рис. 8.13Рис. 08.13. Создание кнопок с помощью элемента HTML BUTTON) в форме кнопки отправки и сброса создаются с помощью элемента BUTTON (вместо элемента INPUT).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Элемент BUTTON.HTM</title>

</head>

<body>

<FORM action="http://somesite.com/prog/adduser" method="post">

<P>

Имя: <INPUT type="text" name="firstname"><BR>

Фамилия: <INPUT type="text" name="lastname"><BR>

email: <INPUT type="text" name="email"><BR>

<INPUT type="radio" name="sex" value="Male" > Мужской<BR>

<INPUT type="radio" name="sex" value="Female">Женский<BR>

<BUTTON name="submit" value="Отправить" type="submit">

Отправить</BUTTON>

<BUTTON name="reset" type="reset">

Сброс</BUTTON>

</P>

</FORM>

</body>

</html>

Если для представления кнопок используются изображения (элемент IMG), то необходимо предусмотреть альтернативный текст.

Элементы SELECT, OPTGROUP и OPTION. Элемент SELECT может быть представлен в виде поименованного поля с возможностью прокрутки. Оно может содержать списки или использовать другие механизмы, например выпадающие меню. Число строк определяется соответствующими атрибутами. Начальный и конечный теги в записи HTML-документа обязательны.

Определения атрибутов элемента SELECT:

    name = cdata. Определяет имя управляющего элемента.

    size = number. Если элемент SELECT представлен в виде списка с возможностью прокрутки, этот атрибут определяет число строк в списке, видимых на экране.

    multiple. Если этот логический атрибут установлен, он позволяет выбирать несколько пунктов. Если он не установлен, в элементе SELECT можно выбрать только один вариант.

Элемент SELECT создает меню. Каждый вариант пункта меню представляется элементом OPTION. Элемент SELECT должен содержать хотя бы один элемент OPTION.

Элемент OPTGROUP позволяет авторам логически группировать варианты. Обычно это используется, если пользователь должен делать выбор в длинном списке вариантов. Группы связанных вариантов проще просматривать и запоминать, чем один длинный список вариантов. В HTML 4.0 все элементы OPTGROUP должны задаваться непосредственно в элементе SELECT (т.е. группы не могут быть вложенными).

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

    Если ни для одного элемента OPTION не установлен атрибут selected, ни один вариант заранее не выбран.

    Если для одного элемента OPTION установлен атрибут selected, этот вариант должен быть выбран заранее.

    Если для элемента SELECT установлен атрибут multiple и для нескольких элементов OPTION установлен атрибут selected, они должны быть выбраны заранее.

Считается ошибкой, если для нескольких элементов OPTION установлен атрибут selected, а для элемента SELECT не установлен атрибут multiple.

Элемент OPTGROUP используется для создания группы вариантов. Начальный и конечный теги обязательны.

В качестве атрибута элемента OPTGROUP используется label = text - метка группы вариантов.

Элемент OPTION - вариант выбора. Начальный и конечный теги обязательны.

Определения атрибутов элемента OPTION:

    selected. Если этот логический атрибут установлен, то данный вариант считается выбранным заранее.

    value = cdata. Определяет исходное значение элемента формы. Если этот атрибут не установлен, исходное значение устанавливается равным содержимому элемента OPTION.

    label = text. Позволяет авторам определить более короткую метку для варианта, чем содержимое элемента OPTION. Если этот атрибут определен, агенты пользователей долж-ны использовать его значение вместо содержимого элемента OPTION в качестве метки варианта.

При представлении пункта меню агенты пользователей используют значение атрибута label элемента OPTION в качестве выбора. Если этот атрибут не определен, агенты пользователей используют содержимое элемента OPTION.

Атрибут label элемента OPTGROUP определяет метку группы вариантов.

В качестве примера рассмотрим использование управляющих элементов SELECT и OPTION.

<HTML>

<HEAD>

<TITLE>SELECT.HTM</TITLE>

</HEAD>

<BODY>

<FORM>

Тип соединения:

<SELECT MULTIPLE NAME="network">

<OPTION SELECTED VALUE="ethernet">Ethernet

<OPTION VALUE="token16"> Token Ring - 16мб

<OPTION VALUE="token4"> Token Ring - 4мб

<OPTION VALUE="localtalk"> LocalTalk

</SELECT>

</FORM>

</BODY>

</HTML>

На рис. 8.14Рис. 08.14. Пример спискового окна представлена форма, описываемая приведенным выше HTML-кодом.

В следующем примере создается список, позволяющий выбрать одну из семи программ. Первая и вторая программы выбраны заранее, но пользователь может отменить их выбор. Остальные программы заранее не выбраны. Атрибут size определяет, что список должен занимать 4 строки, хотя исходными являются 7 возможных вариантов. Доступ к другим вариантам должен обеспечиваться с помощью механизма прокрутки.

<HTML>

<HEAD>

<TITLE>Элемент SELECT.HTM</TITLE>

</HEAD>

<BODY>

<FORM action="http://somesite.com/prog/component-select" method="post">

<P>

<SELECT multiple size="4' name="component-select">

<OPTION selected value="Component_1_a">Программа_1

</OPTION>

<OPTION selected value="Component_1_b">Программа _2

</OPTION>

<OPTION>Программа _3</OPTION>

<OPTION>Программа _4</OPTION>

OPTION>Программа _5</OPTION>

<OPTION>Программа _6</OPTION>

<OPTION>Программа _7</OPTION>

</SELECT>

<INPUTtype="submit"value="Отправить"><INPUT type="reset">

</P>

</FORM>

</BODY>

</HTML>

Вид HTML-документа в окне браузера показан на рис. 8.15Рис. 08.15. Окно выбора программы.

Для группировки вариантов используется управляющий элемент HTML OPTGROUP. В приведенном ниже примере иллюстрируется его применение при создании свернутого списка групп вариантов.

<HTML>

<HEAD>

<TITLE>Элемент OPTGROUP.HTM</TITLE>

</HEAD>

<BODY>

<FORM action="http://somesite.com/prog/someprog"

method="post">

<P>

<SELECT name="ComOS">

<OPTGROUP label="PortMaster 3">

<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3

и ComOS 3.7.1

<OPTION label="3.7" value="pm3_3.7">PortMaster 3 и ComOS 3.7

<OPTION label="3.5" value="pm3_3.5">PortMaster 3 и ComOS 3.5

</OPTGROUP>

<OPTGROUP label="PortMaster 2">

<OPTION label="3.7" value="pm2_3.7">PortMaster 2 и ComOS 3.7

<OPTION label="3.5" value="pm2_3.5">PortMaster 2 и ComOS 3.5

</OPTGROUP>

<OPTGROUP label="IRX">

<OPTION label="3.7R" value="IRX_3.7R">IRX и ComOS 3.7R

<OPTION label="3.5R" value="IRX_3.5R">IRX и ComOS 3.5R

</OPTGROUP>

</SELECT>

</FORM>

</BODY>

</HTML>

Вид HTML-документа в окне браузера приведен на рис. 8.16 (аРис. 08.16, а. Окно выбора вариантов - свернутый список, бРис. 08.16, б. Окно выбора вариантов - развернутый список).

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

Элемент TEXTAREA - текстовое поле из нескольких строк. В записи HTML-кода начальный и конечный теги обязательны.

Определения атрибутов:

    name = cdata. Имя управляющего элемента.

    rows = number. Число видимых текстовых строк. Для документов с большим количеством строк вводятся средства прокрутки этого управляющего элемента.

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

Элемент TEXTAREA создает управляющий элемент для многострочного ввода текста. Агенты пользователей должны использовать содержимое этого элемента как исходное значение управляющего элемента и представлять этот текст с начала.

Элемент LABEL. С некоторыми управляющими элементами формы могут автоматически связываться метки (например, с кнопками). Для управляющих элементов с неявными метками агенты пользователей применяют в качестве метки значение атрибута value. Элемент LABEL используется для задания меток для управляющих элементов, не имеющих неявных меток.

В записи HTML-кода начальный и конечный теги обязательны.

Определения атрибутов:

    for = idref. Явно связывает определяемую метку с другим управляющим элементом. Если указано значение этого атрибута, оно должно совпадать со значением атрибута id другого управляющего элемента в этом же документе. Если этот атрибут не указан, определяемая метка связывается с содержимым элемента.

Элемент LABEL может использоваться для прикрепления к управляющим элементам информации. Каждый элемент LABEL связан только с одним управляющим элементом формы.

Атрибут for явно связывает метку с другим управляющим элементом. При этом значение атрибута for должно совпадать со значением атрибута id связанного управляющего элемента. С одним и тем же управляющим элементом может быть связано несколько элементов LABEL, если создать несколько ссылок с помощью атрибута for.

Элементы FIELDSET и LEGEND. Элемент FIELDSET позволяет авторам группировать связанные метки и управляющие элементы по темам. Элемент LEGEND позволяет назначать заголовки для элемента FIELDSET. В записи HTML-кода начальный и конечный теги обязательны.

Определения атрибутов управляющего элемента LEGEND:

    align = top|bottom|left|right. Атрибут считается нежелательным. Определяет положение legend относительно набора полей. Возможные значения:

    top: legend располагается сверху набора полей. Это значение используется по умолчанию.

    bottom: legend располагается внизу набора полей.

    left: legend располагается в левой части набора полей.

    right: legend располагается в правой части набора полей.

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

Помимо рассмотренных атрибутов имеются атрибуты, определяемые в другом месте. К ним относят:

    id, class - идентификаторы в пределах документа,

    lang - информация о языке,

    style - встроенная информация о стиле,

    title - заголовок элемента,

    dir - направление текста и т.д.

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

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

  1. Определяет успешные управляющие элементы.

  2. Осуществляет построение набора данных формы. Набор данных формы - это последовательность пар имя/значение, составляемых из успешных управляющих элементов.

  3. Производит кодирование набора данных формы.

  4. Осуществляет передачу закодированного набора данных формы. Закодированные данные отправляются обрабатывающему агенту, назначаемому атрибутом action, по протоколу, указанному в атрибуте method.

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

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

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

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

HTML-документ, включающий фреймы, отличается от HTML-документа без фреймов. Стандартный HTML-документ имеет один раздел HEAD и один раздел BODY. Документ с фреймами имеет раздел HEAD и раздел FRAMESET, который заменяет раздел BODY.

В разделе FRAMESET задается расположение фреймов в основном окне агента пользователя. Кроме того, в разделе FRAMESET может присутствовать элемент NOFRAMES с альтернативным содержимым для агентов пользователей, не поддерживающих или не показывающих фреймы.

Управляющие элементы, обычно помещаемые в раздел BODY, не должны присутствовать до первого элемента FRAMESET. Иначе элемент FRAMESET будет игнорироваться.

При создании HTML-документа с фреймами используются следующие управляющие элементы языка HTML и их атрибуты:

    <FRAMESET></ FRAMESET> - документ с фреймами (вместо BODY).

    <FRAMESET ROWS=,,,></ FRAMESET> - высота строк в пикселах или %.

    <FRAMESET ROWS=*></ FRAMESET> - относительный размер высоты строк.

    <FRAMESET COLS=,,,></ FRAMESET> - ширина колонок в пикселах или %.

    <FRAMESET COLS=*></ FRAMESET> - относительный размер ширины колонок.

    <FRAMESET BORDER=?> - ширина окантовки.

    <FRAMESET FRAMEBORDER="yes|no"> - наличие окантовки.

    <FRAME> - определить фрейм (содержание отдельного фрейма).

    <FRAME SCR="URL"> - документ.

    <FRAME NAME="***"|blank| _self|parent| top> - имя фрейма.

    <FRAME MARGINWIDTH=?> - ширина границы (правая и левая).

    <FRAME MARGINHEIGHT=?> - высота границы (верхняя и нижняя).

    <FRAME FRAMEBORDER="yes|no"> - наличие окантовки.

    <NOFRAME></NOFRAME> - содержание без фреймов (для браузеров, не поддерживающих фреймы).

Рассмотрим некоторые управляющие элементы языка HTML, ориентированные на работу с фреймами.

Элемент FRAMESET. Этот элемент создает документ с фреймами. Фактически он разделяет окно на прямоугольные области заданного автором размера.

Этот элемент поддерживается следующими атрибутами:

    rows = multi-length-list. Этот атрибут определяет расположение горизонтальных фреймов.

    cols = multi-length-list. Этот атрибут определяет расположение вертикальных фреймов.

В записях атрибутов rows и cols представляется разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что означает одну строку или один столбец соответственно.

Элемент FRAMESET определяет макет основного окна пользователя в виде совокупности прямоугольных пространств.

Элемент FRAME - вложенное окно. Элемент FRAME определяет содержимое и вид одного фрейма.

Определения атрибутов:

    name = cdata. Назначает имя текущему фрейму. Это имя может использоваться в качестве цели в последующих ссылках.

    longdesc =url. Ссылка на длинное описание фрейма. Это объявление должно дополнять краткое описание, задаваемое атрибутом title, и может быть особенно полезно для невизуальных агентов пользователей.

    src = url. Определяет местонахождение начального содержимого фрейма.

    noresize. Если этот атрибут присутствует, он сообщает агенту пользователя, что размеры фрейма изменять нельзя.

    scrolling = auto|yes|no. Этот атрибут задает информацию о прокрутке фрейма. Возможные значения:

    auto. При необходимости предоставлять возможности прокрутки. Это значение используется по умолчанию.

    yes. Всегда предоставлять возможности прокрутки.

    no: Не предоставлять возможности прокрутки.

    frameborder = 1|0. Этот атрибут предоставляет агенту пользователя информацию о границе фрейма. Возможные значения:

      1. Агент пользователя должен изобразить разделитель между этим фреймом и всеми прилежащими фреймами. Это значение используется по умолчанию.

      0. Агент пользователя не должен отображать разделитель (разделители могут все равно отображаться, если они заданы в других фреймах).

    marginwidth = пикселы. Этот атрибут задает пространство, оставляемое в фрейме в качестве левого и правого полей.

    marginheight = пикселы. Этот атрибут определяет верхнее и нижнее поля в фрейме.

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

Указанные выше управляющие элементы поддерживаются и атрибутами, определяемыми в другом месте:

    id, class (идентификаторы в пределах документа identifiers);

    title (заголовок элемента);

    style (встроенная информация о стиле);

    onload, onunload (внутренние события);

    target (информация о целевом фрейме).

Строки и столбцы. Установка атрибута rows определяет число горизонтальных отрезков пространства в наборе фреймов. Установка атрибута cols определяет число вертикальных отрезков. Для создания сетки можно установить оба атрибута одновременно.

Если атрибут rows не установлен, каждый столбец занимает всю длину страницы. Если атрибут cols не установлен, каждая строка занимает всю ширину страницы. Если не установлен ни один из этих атрибутов, фрейм занимает всю страницу.

Фреймы создаются в направлении слева направо для столбцов и сверху вниз для строк. Если указаны оба атрибута, разделы окон создаются слева направо в верхней строке, слева направо во второй строке и т.д.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.0 Frameset//EN"

"_THE_LATEST_VERSION_/frameset.dtd">

<HTML>

<HEAD>

<TITLE>Фреймы</TITLE>

</HEAD>

<FRAMESET rows="25%,50%,25%">

<FRAME SRC="header.htm">

<FRAMESET cols="20%,80%">

<FRAME SRC="label.htm">

<FRAME SRC="info.htm">

</FRAMESET>

<FRAME SRC="footer.htm">

</FRAMESET>

<NOFRAMES>

Браузер не может работать с фреймами.

</NOFRAMES>

</HTML>

Пример фреймов представлен на рис. 8.17Рис. 08.17. Пример окна с фреймами.

Размеры фреймов можно задавать и в абсолютных величинах. При этом используется физическая система координат графического дисплея. Ниже приведен пример комбинированного задания размеров фрейма: в пикселах (250) и пропорциональных величинах (1*, 3*). В последнем случае браузер (агент пользователя) сам рассчитывает требуемый размер фрейма в пикселах.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"

"_THE_LATEST_VERSION_/frameset.dtd">

<HTML>

<HEAD>

<TITLE>Фреймы</TITLE>

</HEAD>

<FRAMESET rows ="1*,250,3*">

<FRAME SRC="header.htm">

<FRAMESET cols ="1*,3*">

<FRAME SRC="label.htm">

<FRAME SRC="info.htm">

</FRAMESET>

<FRAME SRC="footer.htm">

</FRAMESET>

<NOFRAMES>

Браузер не может работать с фреймами.

</NOFRAMES>

</HTML>

Общий вид полученной совокупности фреймов приведен на рис. 8.18Рис. 08.18. Задание размеров фрейма в абсолютных величинах.

Абсолютные длины, если они не дают в сумме 100% реально доступного пространства, должны корректироваться. Если указана длина менее фактической, оставшееся пространство долж-но равномерно распределяться между всеми разделами. Если указана длина, превышающая фактическую, каждый раздел должен уменьшаться в зависимости от того, какую часть пространства он занимает.

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

Ниже приведен пример окна с четырьмя фреймами.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Frameset//EN"

"_THE_LATEST_VERSION_/frameset.dtd">

<HTML>

<HEAD>

<TITLE>Документ с фреймами</TITLE>

</HEAD>

<FRAMESET cols="30%,70%">

<FRAMESET rows="20%,80%">

<FRAME src="frame1.gif">

<FRAME src="frame3.htm">

</FRAMESET>

<FRAMESET rows="20%,80%">

<FRAME src="frame2.htm">

<FRAME src="frame4.htm">

</FRAMESET>

</FRAMESET>

</HTML>

Общий вид приведенного выше HTML-документа в окне браузера представлен на рис. 8.19Рис. 08.19. Пример окна с раскрытым содержанием фреймов.

Браузер анализирует HTML-документ и последовательно загружает описание соответствующих фреймам файлов в отдельный раздел окна.

Содержимое фрейма и его определение не должны находиться в одном документе.

Визуальное представление фрейма определяется его декоративными атрибутами.

Ниже приведен пример HTML-кода, в котором заданы различные режимы визуализации фреймов. Фрейм 1 не будет содержать полос прокрутки. В фрейме 2 вокруг содержимого (изображения) останется пустое пространство, и размер фрейма нельзя будет изменять. Будет отсутствовать граница между фреймами 3 и 4. Границы (по умолчанию) будут присутствовать между фреймами 1, 2 и 3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Frameset//EN"

"_THE_LATEST_VERSION_/frameset.dtd">

<HTML>

<HEAD>

<TITLE>Документ с фреймами</TITLE>

</HEAD>

<FRAMESET cols="33%,33%,33%">

<FRAMESET rows="*,200">

<FRAME src="contents_of_frame1.html" scrolling="no">

<FRAME src="contents_of_frame2.gif"

marginwidth="10" marginheight="15"

noresize>

</FRAMESET>

<FRAME src="contents_of_frame3.html" frameborder="0">

<FRAME src="contents_of_frame4.html" frameborder="0">

</FRAMESET>

</HTML>

Определение цели фрейма. Цели фрейма задаются атрибутом target = frame-target. Этот атрибут указывает имя фрейма, в котором должен открываться документ.

Назначая фрейму имя с помощью атрибута name, авторы могут ссылаться на него как на "target" для ссылок, определяемый другими элементами. Атрибут target может устанавливаться для элементов, создающих ссылки (A, LINK), навигационных карт (AREA) и форм (FORM).

В приведенном ниже примере показано, как функции цели обеспечивают динамическое изменение содержимого фрейма.

Сначала определим набор фреймов в документе frameset.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Frameset//EN"

"_THE_LATEST_VERSION_/frameset.dtd">

<HTML>

<HEAD>

<TITLE>Документ с фреймами</TITLE>

</HEAD>

<FRAMESET rows="50%,50%">

<FRAME name="fixed" src="init_fixed.htm">

<FRAME name="dynamic" src="init_dynamic.htm">

</FRAMESET>

</HTML>

Затем в файле init_dynamic.htm создадим ссылки на фрейм с именем "dynamic".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Frameset//EN"

"_THE_LATEST_VERSION_/frameset.dtd">

<HTML>

<HEAD>

<TITLE>Документ с якорями с определенными целями</TITLE>

</HEAD>

<BODY>

...начало документа...

<P>Теперь можно перейти к

<A href="slide2.htm" target="dynamic">слайду 2.</A>

...продолжение документа...

<P> Переходим к

<A href="slide3.htm" target="dynamic">слайду 3.</A>

</BODY>

</HTML>

Активизация любой из ссылок приведет к открытию нового документа в фрейме с именем "dynamic", в то время как в другом фрейме, "fixed", сохраняется исходное содержимое.

Если во многих ссылках в документе используется одна и та же цель, можно указать ее один раз и использовать в дальнейшем с помощью атрибута target каждого элемента. Это осуществляется путем установки атрибута target элемента BASE.

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

Элемент NOFRAMES - контейнер альтернативного содержимого для представления без фреймов. Этот управляющий элемент задает содержимое, которое должно отображаться в окне браузера, если он не способен отображать фреймы. В качестве альтернативы используются короткое и длинное описания фрейма. Элемент Noframes можно использовать в разделе FRAMESET документа с фреймами.

Элемент IFRAME - встроенные фреймы. Элемент IFRAME позволяет авторам вставлять фрейм в блок текста.

Определения атрибутов:

    longdesc = url. Определяет ссылку на длинное описание фрейма. Это описание должно дополнять краткое описание, задаваемое атрибутом title, и особенно полезно для невизуальных агентов пользователей.

    name =сdata. Назначает имя текущего фрейма.

    width = длина. Длина встроенного фрейма.

    height = длина. Высота встроенного фрейма.

    Атрибуты, определяемые в другом месте:

    id, class (идентификаторы в пределах документа).

    title (заголовок элемента).

    style (встроенная информация о стиле).

    name, src, frameborder, marginwidth, marginheight, scrolling.

    target (информация о целевом фрейме).

    align (выравнивание).

Элемент IFRAME позволяет авторам вставлять фрейм в блок текста. Вставка встроенного фрейма в раздел текста аналогична вставке объекта с помощью элемента OBJECT, который будет рассмотрен в следующем параграфе.

Встраиваемая информация назначается атрибутом src этого элемента. Изменять размер встроенных фреймов нельзя.

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

Совместное использование фреймов и таблиц рассмотрим на конкретных примерах.

В приведенном здесь комплексном примере с помощью HTML-кода формируются таблицы в двух фреймах Web-страницы, содержащих информацию о расписании рейсов самолетов (рис.8.20Рис. 08.20. Исходная таблица и 8.21Рис. 08.21. Визуализация информации по гиперссылке).

Как только посетитель Web-страницы щелкнет на гипер-ссылке "Время работы аэропорта" в левом фрейме, в правом фрейме страницы будет выведено расписание работы аэропорта (рис. 8.21Рис. 08.21. Визуализация информации по гиперссылке).

Если пользователь выберет команду "Утренние рейсы" в левом фрейме, то в правом фрейме отобразится расписание утренних рейсов (рис. 8.22Рис. 08.22. Таблица «Утренние рейсы»).

Положим, что рассмотренные данные содержатся в Web-странице (файл airport.htm). Вначале создадим два фрейма, занимающих 40 и 60% ширины страницы. Это делается с помощью атрибутов управляющего элемента <FRAMESET>, который позволяет задать относительную ширину создаваемых фреймов.

<HTML>

<HEAD>

<TITLE>Использование фреймов и таблиц</TITLE>

</HEAD>

<FRAMESET COLS = "40%,60%">

Затем выведем в первый фрейм новую Web-страницу, которая называется menu.htm, а во второй фрейм - еще одну Web-страницу с названием welcome.htm. Чтобы иметь возможность направлять информацию во второй фрейм, присвоим ему имя "display":

<HTML

<HEAD>

<ТITLЕ>Использование фреймов и таблиц </ТITLЕ>

</HEAD>

<FRAMESET COLS = "40%, 60%">

<FRAME SRC = menu.htm >

<FRAME SRC = welcome.htm NAME = "display">

</FRAMESET>

</HTML>

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

Разместим все команды: "Время работы аэропорта", "Утренние рейсы", "Дневные рейсы" и т.д. - в упорядоченный список так, чтобы при выводе осуществлялась их автоматическая нумерация с помощью тега <OL>.

Для первой команды создадим гиперссылку с текстом "Время работы аэропорта" и атрибутом target, содержащим имя правого фрейма - "display". Эта гиперссылка указывает на Web-страницу hours.htm, загружаемую в правый фрейм при выборе данной команды.

<HTML>

<HEAD>

<TITLE>Время работы аэропорта </TITLE>

</HEAD>

<BODY>

<CENTER>

<Н1>Время работы аэропорта

</H1>

<BR>

<BR>

Аэропорт открыт с 6 утра до 10 вечера ежедневно.

</CENTER>

</BODY>

</HTML>

Направленный вывод информации в фреймы. При выборе пользователем команды "Утренние рейсы" Web-страницы menu.htm не будем загружать новую Web-страницу, изменим HTML-код страницы, которая выводится в правом фрейме. С этой целью свяжем данные команды с VBScript-подпрограммой Morning(). Как и при организации гиперссылки "Время работы аэропорта", для вывода команд будет использован тег <А>.

<HTML>

<BODY LINK = 0000>

<OL>

<A HREF = "hours, htm" TARGET = "display">

Время работы аэропорта

</A>

</LI>

<LI><A onClick = "Morning()">

<U>Утренние рейсы

</U>

</A>

<LI><A onClick = "Afternoon()">

<U>Дневные рейсы</U>

</A>

<LI><A onClick = "Evening ()">

<U>Вечерние рейсы</U>

</A>

</OL>

</BODY>

</HTML>

После того как пользователь выберет команду "Утренние рейсы", Web-браузер вызовет связанную с ней подпрограмму Morning():

<SCRIPT LANGUAGE = VBScript>

Sub Morning ()

parent.frames(1).document.open()

parent.frames(1).document.write "<CENTER>"

parent.frames(1).document.write "<TABLE BORDER BGCOLOR = ""#ffff00"">"

parent.frames(1).document.write"<TR><TH

COLSPAN=2>Утренние рейсы

</TH>

</TR>"

parent.frames(1).document.write "<TR><TD>Ленинград</TD><TD>6:30 AM

</TD>

</TR>"

parent.frames(1).document.write "<TR><TD>Киев</TD><TD>6:30 AM</TD></TR>"

parent.frames(1).document.write "<TR><TD>Сочи</TD><TD>6:30 AM</TD></TR>"

parent.frames(1).document.write "<TR><TD>Москва</TD><TD>6:30 AM

</TD>

</TR>"

parent.frames(1).document.write "<TR><TD>Минск</TD><TD>6:30 AM

</TD>

</TR>"

parent.frames(1).document.write "</TABLE>"

parent.frames(1).document.write "</CENTER>"

parent.frames(1).document.close()

End Sub

</SCRIPT>

Если открыть созданную Web-страницу (airport.htm) в Microsoft Internet ExplorerInternet Explorer, то она будет иметь вид, иллюстрирующийся рис. 8.23Рис. 08.23. Начальный вид окна браузера.

При выборе пункта "Время работы аэропорта" браузер выведет в правом фрейме соответствующую информацию (рис. 8.24Рис. 08.24. Визуализация времени работы аэропорта).

При выборе команды "Утренние рейсы" в правом фрейме страницы выводится расписание утренних рейсов (рис. 8.25Рис. 08.25. Визуализация расписания утренних рейсов).

В заключение приведем реальные программы данного примера:

Файл airport.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.0 Frameset//EN"

"_THE_LATEST_VERSION_/frameset.dtd">

<HTML>

<HEAD>

<TITLE>Использование фреймов и таблиц</TITLE>

</HEAD>

<FRAMESET COLS = "40%,60%">

<FRAME SRC = menu.htm >

<FRAME SRC = welcome.htm NAME = "display">

</FRAMESET>

</HTML>

Файл menu.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.0 Frameset//EN"

"_THE_LATEST_VERSION_/frameset.dtd">

<HTML>

<BODY

BACKGROUND="..."BGCOLOR="#ada794"TEXT="#000000"

LINK="#800080"ALI>

<OL>

<LI><A HREF = "hours.htm" TARGET = "display">

Время работы аэропорта

</A>

<LI><A onClick = "Morning()">

<U>Утренние рейсы</U>

</A>

<LI><A onClick = "Afternoon()">

<U>Дневные рейсы</U>

</A>

<LI><A onClick = "Evening ()">

<U>Вечерние рейсы</U>

</A>

</OL>

</BODY>

<SCRIPT LANGUAGE = VBScript>

Sub Morning ()

parent.frames(1).document.open()

parent.frames(1).document.write "<CENTER>"

parent.frames(1).document.write "<Table BORDER

BGCOLOR=""#ffff00"">"

parent.frames(1).document.write У<TR><TH>Утренние рейсы

</TH></TR>"

parent.frames(1).document.write "<TR><TD>Ленинград

</TD><TD>6:30 AM </TD></TR>"

parent.frames(1).document.write "<TR><TD>Киев

</TD><TD>6:30 AM</TD></TR>"

parent.frames(1).document.write "<TR><TD>Сочи

</TD><TD>6:40 AM</TD></TR>"

parent.frames(1).document.write "<TR><TD>Москва

</TD><TD>6:50 AM </TD></TR>"

parent.frames(1).document.write "<TR><TD>Минск

</TD><TD>7:00 AM </TD></TR>"

parent.frames(1).document.write "</TABLE>"

parent.frames(1).document.write "</CENTER>"

parent.frames(1).document.close()

End Sub

</SCRIPT>

</HTML>

Файл welcome.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.0 Frameset//EN"

"_THE_LATEST_VERSION_/frameset.dtd">

<HTML>

<HEAD>

<TITLE> Добро пожаловать в аэропорт </TITLE>

</HEAD>

<BODY

BACKGROUND="..."BGCOLOR="#ada794'TEXT="#000000'LINK="

#800080'ALINK="

<CENTER>

<H2>Добро пожаловать в аэропорт</H2>

</CENTER>

</BODY>

</HTML>

Файл hours.htm

<HTML>

<HEAD>

<TITLE>Время работы аэропорта </TITLE>

</HEAD>

<BODY

BACKGROUND="..."BGCOLOR="#ada794"TEXT="#000000"LINK= "#800080"ALINK="#ff0000">

<CENTER>

<H2>Время работы аэропорта<H2>

<BR>

<BR>

Аэропорт открыт с 6 утра до 10 вечера ежедневно.

</CENTER>

</BODY>

</HTML>

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

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

Для включения одного HTML-документа в другой могут использоваться новые элементы IFRAME или OBJECT. В обоих случаях внедряемый документ не зависит от основного документа. Визуальные агенты пользователей могут представлять внедряемый документ в виде отдельного окна в основном документе.

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

Управляющий элемент OBJECT - общий внедренный объект. В записи HTML-документа начальный и конечный теги обязательны.

Определения атрибутов:

    classid = url. Используется для указания местоположения объекта с помощью URL-адреса. Может использоваться вместе с атрибутом data или как альтернатива ему в зависимости от типа объекта.

    codebase = url. Определяет базовый путь, используемый для разрешения относительных URL-адресов, задаваемых в атрибутах classid, data и archive. Если этот атрибут отсутствует, значением по умолчанию является базовый URL-адрес текущего документа.

    codetype = content-type. Определяет тип содержимого данных, получения которых следует ожидать при загрузке объекта, задаваемого атрибутом classid. Не является обязательным, но рекомендуется, если используется атрибут classid, поскольку позволяет агенту пользователя избежать загрузки информации для типа содержимого, который он не поддерживает. Если этот атрибут отсутствует, по умолчанию используется значение атрибута type.

    data = url. Может использоваться для указания местоположения данных объекта. Если дается относительный адрес URL, он должен интерпретироваться относительно атрибута codebase.

    type = content-type. Определяет тип содержимого для данных, задаваемых атрибутом data. Не является обязательным, но используется, если применяется атрибут data. Позволяет агенту пользователя избежать загрузки информации для типа содержимого, который не поддерживается.

    archive = url. List. Используется для определения разделенного пробелами списка URL-адресов архивов, содержащих относящиеся к объекту ресурсы. Эти ресурсы могут задаваться атрибутами classid и data. Предварительная загрузка архивов приведет к уменьшению времени загрузки объекта. Архивы, указанные в виде относительных URL-адресов, должны интерпретироваться относительно атрибута codebase.

    declare. При использовании этого логического атрибута текущее определение OBJECT может быть только объявлением.

    standby = text. Этот атрибут определяет сообщение, которое агент пользователя может генерировать при загрузке данных объекта.

Атрибуты, определенные в другом месте:

    id, class (идентификаторы в пределах документа).

    lang (информация о языке), dir (направление текста).

    title (заголовок элемента).

    style (встроенная информация о стиле).

    onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события).

    tabindex (переход по клавише tab).

    usemap (клиентские навигационные карты).

    name (предоставление формы).

    align, width, height, border, hspace, vspace (визуальное представление объектов, изображений и апплетов).

В большинстве агентов пользователей имеются встроенные механизмы для генерации основных типов данных. Элемент OBJECT позволяет авторам управлять генерацией данных - задавать внешнюю генерацию или использование некоторой определяемой автором программы, генерирующей данные в агенте пользователя.

В общем случае определена информация трех типов:

    Реализация включенного объекта. Например, если включенный объект - апплет, автор должен указать местоположение исполняемого кода апплета.

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

    Дополнительные значения, необходимые объекту. Например, некоторым апплетам могут быть нужны исходные значения для их параметров.

Авторы Web-страниц не обязаны использовать все указанные типы данных. Так, некоторым объектам не требуются данные. Другим может быть не нужна инициализация или дополнительная информация о генерировании различных типов данных.

Элемент OBJECT может также присутствовать внутри управляющего элемента HTML HEAD. Поскольку агенты пользователей обычно не генерируют элементы в HEAD, авторам следует убедиться, что во всех элементах OBJECT в HEAD нет содержимого, которое необходимо генерировать.

Правила генерации объектов. Агент пользователя должен интерпретировать элемент OBJECT в соответствии со следующими правилами старшинства:

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

    Если агент пользователя по какой-либо причине не может сгенерировать объект (не сконфигурирован для этого, недостаточно ресурсов и т.д.), он должен попытаться сгенерировать его содержимое.

    Авторам не рекомендуется включать содержимое в управляющие элементы OBJECT, расположенные в элементе HEAD.

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

Ниже приведен пример внедрения нескольких объявлений OBJECT для различных компонентов электронных изданий.

<OBJECT title="Вид Земли из космоса"

classid="http://www.observer.mars/TheEarth.py">

<OBJECT data="TheEarth.mpeg" type="application/mpeg">

<OBJECT data="TheEarth.gif" type="image/gif">

</OBJECT>

</OBJECT>

</OBJECT>

В этом примере объявляются объекты с апплетом (на языке Python), видеоклипом в формате MPEG и изображением в формате GIF.

Внешнее объявление определяет апплет, которому не нужны данные или начальные значения. Второе объявление определяет клип в формате MPEG, и, поскольку местоположение обработчика формата MPEG не указано, предполагается, что клип будет обрабатываться агентом пользователя. Атрибут type используется агентом пользователя. Если он не может сгенерировать клип в формате MPEG, то загрузка файла "TheEarth.mpeg" из сети производиться не будет. В третьем объявлении задается местоположение файла в формате GIF.

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

Управляющий элемент PARAM - инициализация объекта. Начальный тег обязателен, конечный тег запрещен.

Определения атрибутов:

    name = cdata. Этот атрибут определяет имя рабочего параметра, которое должно быть понятно вставляемому объекту.

    value = cdata. Этот атрибут определяет значение рабочего параметра, задаваемого атрибутом name. Параметры свойства не имеют значения в HTML; они определяются объектом.

    valuetype = data|ref|object. Этот атрибут определяет тип атрибута value. Возможные значения:

    data: Используется по умолчанию. Значение, задаваемое атрибутом value, будет определяться и передаваться в объект в виде строки.

    ref: Значение, задаваемое атрибутом value, является адресом URL ресурса, где хранятся рабочие значения. Это позволяет средствам поддержки идентифицировать адреса URL, данные в качестве параметров. Адрес URL должен передаваться в объект как есть, т.е. неразрешенным.

    object: Значение, задаваемое атрибутом value, является идентификатором, ссылающимся на объявление OBJECT в этом же документе. Идентификатором должно быть значение атрибута id для объявленного элемента OBJECT.

    type = content-type. Этот атрибут задает тип содержимого ресурса, назначаемого атрибутом value только в том случае, если значением атрибута valuetype является "ref". Таким образом, этот атрибут определяет для агента пользователя тип значений, которые будут находиться по адресу URL, назначенному атрибутом value.

Атрибут, определенный в другом месте:

    id (идентификаторы в пределах документа).

Элементы PARAM определяют набор значений, которые могут понадобиться объекту во время работы. В элементах OBJECT или APPLET может присутствовать любое число атрибутов PARAM в любом порядке, но они должны помещаться в начале тела включающего элемента OBJECT или APPLET.

В приведенном ниже примере рабочие данные для параметра "Init_values" объекта задаются в виде внешнего ресурса (файл GIF). Таким образом, для атрибута valuetype устанавливается значение "ref", а атрибутом value является URL-адрес ресурса.

<P><OBJECT classid="http://www.gifstuff.com/gifappli"

standby="Загрузка Элвиса...">

<PARAM name="Init_values"

value="./images/elvis.gif">

valuetype="ref">

</OBJECT>

Так как установлен атрибут standby, агент пользователя может отобразить сообщение во время загрузки генерирующего механизма.

Когда элемент OBJECT сгенерирован, браузер должен выполнить поиск содержимого только для тех элементов PARAM, которые являются их прямыми дочерними элементами.

Ниже приведен пример, в котором к каждому из объектов отнесен соответствующий "param":

<P>

<OBJECT id="obj1">

<PARAM name="param1">

<OBJECT id="obj2">

<PARAM name="param2">

</OBJECT>

</OBJECT>

Таким образом, если сгенерирован "obj1", "param1" применяется к "obj1" (и не применяется к "obj2"). Если "obj1" не сгенерирован, а "obj2" сгенерирован, "param1" игнорируется, а "param2" применяется к "obj2". Если ни один OBJECT не сгенерирован, ни один PARAM не применяется.

Схемы именования объектов. Местоположение обработчика объекта задается URL-адресом. Некоторые апплеты могут использовать внешние схемы именования. Например, при указании апплетов Java могут использоваться URL-адреса, начинающиеся с "java", а для апплетов ActiveX - "clsid".

Некоторым схемам генерации для определения обработки необходима дополнительная информация. Поэтому им нужно указать, где находится эта информация. Путь к обработчику объекта задается с помощью атрибута codebase.

<OBJECT codetype="application/java-archive"

classid="java:program.start">

codebase="http://foooo.bar.com/java/myimplementation/"

</OBJECT>

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

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

    Инициализировать объект можно из местоположения, отличного от того, в котором объект объявлялся, например, из ссылки.

    Объекты можно определять в качестве рабочих данных для других объектов.

Если требуется объявить объект так, чтобы он не обрабатывался браузером при чтении, устанавливается логический атрибут declare элемента OBJECT. В то же время для идентификации объекта устанавливается уникальное значение атрибута id (в элементе OBJECT). Инициализация объекта позже будет ссылаться на этот идентификатор.

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

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

<P><OBJECT declare

id="earth.declaration"

data="TheEarth.mpeg"

type="application/mpeg">

Вид <STRONG>Земли</STRONG> из космоса.

</OBJECT>

...далее в документе...

<P>Анимационное<A href="#earth.declaration"> изображение

Земли!</A>

БраузерБраузеры, не поддерживающие атрибут declare, должны генерировать содержимое объявления OBJECT.

Внедренные документы. Иногда вместо ссылки на документ автору необходимо внедрить его непосредственно в первичный документ HTML. Для этого используются элементы IFRAME или OBJECT. Эти два элемента отличаются друг от друга. В част-ности, они имеют различные модели содержимого. К тому же элемент IFRAME может быть целевым кадром и может быть «выделен» браузером для последующей печати, просмотра кода HTML и т.д. Браузеры могут генерировать выделенные кадры способом, отличным от генерации невыделенных кадров (например, отображать границу вокруг выделенного кадра).

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

Например, следующая строка внедряет содержимое файла embed_me.html в то место документа, в котором встречено определение OBJECT.

...предшествующий текст...

<OBJECT data="embed_me.html">

Внимание: невозможно внедрить файл embed_me.html.

</OBJECT>

...последующий текст...

Напомним, что содержимое элемента OBJECT должно генерироваться, только если файл, задаваемый атрибутом data, невозможно загрузить.

Клиентские навигационные карты. Управляющий элемент OBJECT может использоваться для создания клиентских навигационных карт. В приведенном ниже примере иллюстрируется создание клиентской навигационной карты с использованием управляющего элемента HTML OBJECT.

Поскольку генерация содержимого навигационной карты осуществляется при генерации элемента OBJECT, она (элемент MAP) скрыта в содержимом элемента OBJECT. Таким образом, содержимое элемента MAP будет генерироваться, если не осуществлена генерация содержимого элемента OBJECT.

<HTML>

<HEAD>

<TITLE>Web-страница</TITLE>

</HEAD>

<BODY>

<P><OBJECT data="pic.gif" type="image/gif"

usemap="#map1">

<MAP name="map1">

<P>Перемещение по узлу:

<A href="ogl1.htm" shape="rect" coords="0,0,118,28">

Глава 1</a> |

<A href="ogl2.htm" shape="rect"

coords="118,0,184,28">Глава2</A> |

<A href="search.html" shape="circle"

coords="184,200,60">

Глава 3 </A> |

<A href="top10.html" shape="poly"coords="

276,0,373,28,50,50,276,0"> Глава 4 </A>

</MAP>

</OBJECT>

</BODY>

</HTML>

Нам может понадобиться генерация содержимого карты, даже если агент пользователя способен сгенерировать элемент OBJECT. Например, мы хотим связать навигационную карту с элементом OBJECT и включить текстовую навигационную панель внизу страницы. Чтобы это сделать, определим элемент MAP вне элемента OBJECT:

<HTML>

<HEAD>

<TITLE>Web-страница</TITLE>

</HEAD>

<BODY>

<P><OBJECT data="pic.gif" type="image/gif"

usemap="#map1">

</OBJECT>

<MAP name="map1">

<P>Перемещение по узлу:

<A href="ogl1.htm" shape="rect" coords="0,0,118,28">

Глава 1 </A> |

<A href="ogl2.htm" shape="rect" coords="118,0,184,28">

Глава 2 </A> |

<A href="Ogl3.htm" shape="circle" coords="184,200,60">

Глава 3 </A> |

<A href="ogl4.htm" shape="poly"

coords="276,0,373,28,50,50,276,0"> Глава 4 </A>

</MAP>

</BODY>

</HTML>

В следующем примере мы создаем сходную навигационную карту, на этот раз используя элемент AREA:

<P><OBJECT data="navbar1.gif" type="image/gif"

usemap="#map1">

<P>Это навигационная панель.

</OBJECT>

<MAP name="map1">

<AREA href="guide.html"

alt="Руководство по доступу"

shape="rect"

coords="0,0,118,28">

<AREA href="search.html"

alt="Поиск"

shape="rect"

coords="184,0,276,28">

<AREA href="shortcut.html"

alt="Переход"

shape="circle"

coords="184,200,60">

<AREA href="top10.html"

alt="Первые десять"

shape="poly"

coords="276,0,373,28,50,50,276,0">

</MAP>

Ниже предлагается версия с использованием элемента IMG вместо элемента OBJECT (с тем же самым объявлением MAP):

<P><IMG src="navbar1.gif" usemap="#map1"

alt="навигационная панель">

Вложенные элементы OBJECT используются тогда, когда браузер пользователя не поддерживает определенные форматы. Например:

<P>

<OBJECT data="navbar.png" type="image/png">

<OBJECT data="navbar.gif" type="image/gif">

текст с описанием изображения...

</OBJECT>

</OBJECT>

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

<P>

<OBJECT data="navbar.png" type="image/png"

usemap="#map1">

<OBJECT data="navbar.gif" type="image/gif"

usemap="#map1">

<MAP name="map1">

<P>Перемещение по узлу:

<A href="guide.html" shape="rect"

coords="0,0,118,28">Руководство по доступу</a> |

<A href="shortcut.html" shape="rect"

coords="118,0,184,28">Переход</A> |

<A href="search.html" shape="circle"

coords="184,200,60">Поиск</A> |

<A href="top10.html" shape="poly"

coords="276,0,373,28,50,50,276,0">Первые десять</A>

</MAP>

</OBJECT>

</OBJECT>

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

<MAP name="map1">

<P>

<A shape="circle" coords="100,200,50">Я неактивная.</A>

<A href="outer-ring-link.html" shape="circle"

coords="100,200,250">Я активная.</A>

</MAP>

Точно так же атрибут nohref элемента AREA объявляет, что с геометрической областью не связана ссылка.

В заключение отметим, что на момент подготовки данного материала браузеры Microsoft Internet ExplorerInternet Explorer и Netscape NavigatorNetscape Navigator, а также HTML-редакторы не поддерживали элемент OBJECT.

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

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

Различают глобальные и локальные ссылки. Глобальные ссылки могут указывать на другой документ в рамках сети InternetInternet, например, запрашивать файл по FTP-протоколу для отображения его браузером. URL-адрес в ссылке позволяет вызывать документы, используя рассмотренную ранее систему именования Internet. Именно этот подход применяется при организации больших структурированных Web-серверов.

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

В терминологии HTMLHTML конечные точки связей часто называют anchors (якорь).

Существуют два конца связи (якоря): связь осуществляется от одной точки к другой. Последняя, называемая целью (target) связи, часто является началом документа.

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

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

По умолчанию со ссылкой бывает связана загрузка другого Web-ресурса. Запуск ссылки достигается обычно путем выбора ссылки курсором мыши и последующего щелчка левой клавишей мыши (или с помощью ввода с клавиатуры).

Web-ресурс задается URL-адресами:

    Абсолютным URL-адресом, например, http://www.mycompany.com/one. html#anchor-one.

    Относительным URL-адресом: */*/one.html#anchor-one.

    Именем файла, на который указывает ссылка, если этот файл размещен в той же директории (папке): one.html#anchor-one one.htm.

    Если ссылка определена в том же документе: #anchor-one.

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

<html>

<head>

<title> Ссылки </title>

</head>

<A HREF="URL"> текст, который будет подсвечен как ссылка

</A>

</body>

</html>

Тег <A HREF="URL">открывает описание ссылки, а тег </A> закрывает его. Любой текст, находящийся между открывающим и закрывающим тегами, подсвечивается специальным образом Web-браузером (рис. 8.26Рис. 08.26. Визуализация ссылки). Обычно этот текст отображается подчеркнутым и выделенным синим (или другим заданным пользователем) цветом. Код, обозначающий URL-адрес, браузером не отображается, а используется только для выполнения предписанных им действий при активизации ссылки. Отметим, что при совмещении курсора мыши с полем текста ссылки курсор изменяет свою форму (пиктограмма руки с выпрямленным указательным пальцем).

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

Целевой якорь ссылки может быть элементом в HTML-документе. Целевому якорю должны присваиваться имя и URL-адрес. Это имя используется в качестве идентификатора фрагмента.

Целевые якоря в HTML-документах могут указываться с помощью элемента A (и атрибута name) или с помощью других управляющих элементов HTML (используется атрибут id). Таким образом, например, можно создавать оглавление, элементы которого являются ссылками на элементы заголовков H1 - H6 и т.д. в том же документе.

Используя элемент A для создания целевых якорей, можно записать:

<html>

<head>

<title> Ссылки</title>

</head>

<body>

<H3> Содержание; </H3>

<P><A href="#section1"> Введение </A>

<BR>

<A href="#section2"> Предыстория </A>

<BR>

<A href="#section2.1"> Более конкретные заметки </A>

<P>продолжение содержания...

<P>тело документа...

<H4><A name="section1"> Введение </A></H4> ...раздел 1...

<H4><A name="section2"> Предыстория </A></H4> ...раздел 2...

<H4><A name="section2.1"> Более конкретные заметки </A>

</H4> ...раздел 2.1...

</body>

</html>

Визуализация приведенного выше HTML-кода в окне браузера иллюстрируется рис. 8.27Рис. 08.27. Визуализация ссылок, созданных с помощью элемента А и атрибутов href и name.

Такого же эффекта можно достигнуть, сделав якорями сами элементы заголовка:

<html>

<head>

<title> Ссылки</title>

</head>

<body>

<H3> Содержание </H3>

<P><A href="#section1">Введение</A><BR>

<A href="#section2">Предыстория</A><BR>

<A href="#section2.1">Более конкретные заметки</A><BR>

продолжение содержания...

тело документа...

<H4 id="section1">Введение</H4>

раздел 1...

<H4 id="section2">Предыстория</H4>

раздел 2...

<H5 id="section2.1">Более конкретные заметки</H5>

раздел 2.1...

</body>

</html>

В последней записи использованы атрибуты href и id. Вид HTML-документа в окне браузера остается без изменений.

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

Роли ссылок, определяемых элементами A или Link, указываются с помощью атрибутов rel и rev. Тип первой ссылки - "prev", второй - "next" (два из ряда распознаваемых типов ссылок).

Для задания заголовков ссылок используется атрибут title (для элементов A и LINK).

Рассмотрим управляющие элементы HTML, используемые при создании ссылок.

Управляющий элемент A - якорь (точка ссылки).

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

Определения атрибутов:

    name = cdata. Присваивает якорю имя. Значением атрибута должно быть уникальное имя. Область действия имени распространяется на текущий документ. Этот атрибут использует общее с атрибутом id пространство имен.

    href = URL. Указывает местоположение ресурса Web. Определяет связь между текущим элементом (исходным якорем) и целевым якорем.

    hreflang = langcode. Задает базовый язык ресурса, назначаемого атрибутом href.

    type = content - type. Определяет тип части содержимого, например результат обратного действия ссылки на ресурс.

    rel = link - type. Описывает отношение из текущего документа к якорю, заданному атрибутом href. Значением атрибута является разделенный пробелами список типов ссылок.

    rev = link - type. Используется для описания обратной ссылки из якоря, задаваемого атрибутом href, в текущий документ. Значением атрибута является разделенный пробелами список типов ссылок.

    charset = charset. Задает кодировку символов назначаемого ссылкой ресурса.

Каждый элемент A определяет якорь:

    Содержимое управляющего элемента A определяет положение якоря.

    Атрибут name этого элемента задает имя якоря, так что он может служить пунктом назначения любого числа ссылок.

    Атрибут href определяет якорь пунктом назначения для одной ссылки.

В качестве примера приведем содержание некоторого HTML-документа, состоящее из четырех глав:

<HTML>

<HEAD>

<TITLE> Ссылки в Web-страницах </TITLE>

</HEAD>

<BODY>

<P><H3> Содержание: </H3>

<A href="ogl1.htm"><P> Глава 1 </A>

<A href="ogl2.htm"><P> Глава 2 </A>

<A href="Ogl3.htm"><P> Глава 3 </A>

<A href="ogl4.htm"><P> Глава 4 </A>

</BODY>

</HTML>

Здесь ссылки даются на HTML-файлы, размещенные в той же директории, что и файл данного примера.

На рис. 8.28Рис. 08.28. Вид исходного HTML-документа в окне браузера приведен вид Содержания в окне браузера.

Слова, используемые в качестве исходного якоря ссылки, выделены подчеркиванием.

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

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

При создании рассмотренных выше примеров использован атрибут href.

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

Для формирования такой ссылки создается маркер раздела, который вызывается по ссылке, и сама ссылка на данный маркер:

Маркер раздела. Синтаксис данного маркера следующий:

<A NAME="named_anchor"> Текст-который-отобразится-в-первой-строке-браузера </A>

Ссылка на данный маркер:

<A HREF="#named_anchor"> Текст </A>

В качестве примера приведем начальный текстовой фрагмент данного параграфа:

<HTML>

<HEAD>

<TITLE> Ссылки внутри документа </TITLE>

</HEAD>

<BODY>

<P><H4> 8.8 Ссылки </H4>

<P> Гипертекстовые ссылки являются отличительной особенностью гипертекстовых Web-публикаций. Введение гипертекстовых ссылок (далее - ссылки) позволяет объединить любое множество документов в одно издание. Они делают набор документов связанным и структурированным, что позволяет читателю (пользователю) получать необходимую ему информацию максимально быстро и в полном объеме.

<P> Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки.

<P> Различают глобальные и <A HREF="#ex1"> локальные ссылки </A>. Глобальные ссылки могут указывать на другой документ в рамках сети Internet, например, запрашивать файл по FTP-протоколу для отображения его браузером. <A HREF="#ex2"> URL-адрес в ссылке</A> позволяет вызывать документы, используя рассмотренную ранее систему именования Internet. Именно этот подход используется при организации больших структурированных Web-серверов.

<P><A NAME="#ex1"> Локальные ссылки используются в рамках одного документа. В этом случае ссылка используется для организации связи между некоторыми элементами или фрагментами Web-публикации в виде прямого соединения отдельных точек в документе с другими точками в том же самом Web-документе </A>.

<P> В терминологии HTML конечные точки связей часто называют <I>anchors (якорь).</I>

<P> Существуют два конца связи (якоря): связь осуществляется от одной точки к другой. Последняя, называемая <I>целью (target)</I> связи, часто является началом документа.

<P><I>Связанный текст</I> (аббревиатура HUT) действует как связь с Web-документом, который объясняет это сокращение и дает информацию о нем. Отображение текста связи возможно по-разному: текст связи может быть подчеркнут, окрашен или выделен в текстовом материале каким-то другим образом. Пользователь (читатель) может узнать, как связи отображены в каждом отдельном окружении.

<P> HTML использует множество условных оборотов для текстовых и структурированных документов. Ссылки связывают один Web-ресурс с другим (например, изображением, видеоклипом, звуковым файлом, программой, HTML-документом, элементом в документе HTML и т.д.). Несмотря на простоту, ссылки стали основным залогом успеха Web-технологий.

<P> По умолчанию со ссылкой бывает связана загрузка другого Web-ресурса. Запуск ссылки достигается обычно путем выбора ссылки курсором мыши и последующего щелчка левой клавишей мыши (или с помощью ввода с клавиатуры).

<A NAME="#ex2">

<P>Web-ресурс задается URL-адресами:

<P>- Абсолютным URL-адресом, например, http://www.mycompany.com/one. html#anchor-one.

<P>- Относительным URL-адресом: */*/one.html#anchor-one.

<P>- Именем файла, на который указывает ссылка, если этот файл размещен в той же директории (папке): one.html#anchor-one one.htm.

<P>- Если ссылка определена в том же документе: #anchor-one.

</A>

</BODY>

</HTML>

Каждой ссылке сопоставляется определенный код. Определив якорь, мы можем связать его с этим же или с другим документом. URL, назначающие якорь, включают символ "#", за которым следует имя якоря (идентификатор фрагмента). В данном случае используются имена ссылок "#ex1", "#ex2".

Символы "#ex1" сообщают браузеру, что необходимо найти в данном HTML-документе маркер с именем "#ex1". Аналогичная процедура осуществляется и со вторым адресом"#ex2".

На рис. 8.30Рис. 08.30. Визуализация ссылок в окне браузера приведен вид в окне браузера HTML-документа с созданными ссылками.

После щелчка курсором мыши по первой ссылке материал в окне браузера перемещается таким образом, чтобы фрагмент, на который произведена ссылка, отобразился начиная с первой строки (рис. 8.31Рис. 08.31. Визуализация фрагмента текста, вызванного по ссылке).

Текстовой фрагмент, вызванный по первой ссылке (#ex1), специально выделен авторами (и отображается инверсно).

Реакция на вторую ссылку (URL-адрес ссылки) иллюстрируется рис. 8.32Рис. 08.32. Фрагмент, вызванный второй ссылкой.

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

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

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

Синтаксис имен якорей. Именем якоря является значение атрибута name или атрибута id, используемого в контексте якоря. К именам якорей применяются следующие правила:

    Уникальность. Имена якорей должны быть уникальны в пределах документа. Имена якорей в одном документе не могут отличаться только регистром.

    Соответствие строк. Сравнение между идентификатором фрагментов и именами якорей должно проводиться на основе полного (с учетом регистра) совпадения.

Имена якорей могут содержать только символы набора ASCII.

Ссылки и якоря, определяемые элементом А, не могут быть вложенными. Элемент А не должен содержать другие элементы А.

Якоря могут создаваться и с помощью атрибута id. Атрибут id может использоваться для создания якоря в начальном теге любого элемента (включая элемент A).

Элемент LINK - отношения документов. С помощью этого элемента создаются независимые от устройства ссылки. В записи HTML-кода начальный тег обязателен, конечный тег запрещен.

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

Элемент LINK определяет отношение между текущим документом и другим ресурсом. Хотя он не имеет содержимого, определяемые им отношения могут отображаться некоторыми браузерами.

Прямые и обратные ссылки. Атрибуты rel и rev задают прямую и обратную ссылки соответственно. Оба атрибута могут определяться одновременно.

Элемент BASE - информация о пути. Начальный тег обязателен, конечный тег запрещен. В качестве атрибута используется href = URL. Этот атрибут задает абсолютный URL-адрес, служащий базовым URL для разрешения относительных URL.

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

Элемент BASE вставляется в раздел HEAD HTML-документа, до элементов, ссылающихся на внешние ресурсы. Информация о пути, указанная в элементе BASE, влияет только на URL в документе, в котором присутствует этот элемент.

Ниже иллюстрируется пример использования элемента BASE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML>

<HEAD>

<TITLE> Ссылка на рисунок</TITLE>

<BASE href="A:/LINK/pic.jpg">

</HEAD>

<BODY>

<P> Щелнув курсором мыши по ссылке, Вы увидите

<A href="A:/LINK/pic.jpg"> картину </A>

</BODY>

</HTML>

В приведенном примере элементы А и BASE используются для создания ссылки на рисунок (рис. 8.33Рис. 08.33. Использование элементов BASE и А для создания ссылки на рисунок).

После щелчка курсором мыши по ссылке на экране браузера визуализируется картина (рис. 8.34Рис. 08.34. Реализация ссылки на картину).

Ссылки, указанные в заголовках HTTP, обрабатываются так же, как элементы LINK, установленные в документе.

Считается, что элементы OBJECT и APPLET определяют атрибуты, имеющие приоритет над значением, установленным для элемента BASE.

Таблицы стилей в HTMLТаблицы стилей упрощают разметку HTMLHTML и существенно снижают участие языка HTML в представлении документа. Они позволяют как авторам, так и пользователям управлять представлением документов: шрифтами, выравниванием, цветом и т.д.

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

Механизмы связи таблиц стилей с документами не зависят от языка таблиц стилей.

До появления таблиц стилей возможности управления созданием изображения у авторов были ограничены. Но уже в HTML 3.2 был включен ряд атрибутов и элементов для управления выравниванием, размером шрифта и цветом текста. Авторы также использовали для компоновки страниц таблицы и изображения. Поскольку на обновление браузеров у пользователей уйдет довольно долгое время, эти средства еще будут использоваться в течение какого-то времени. Однако поскольку таблицы стилей обеспечивают более мощные механизмы представления, World Wide Web Consortium существенно сократит число элементов и атрибутов представления в HTML.

В спецификации HTML 4.0 предусматривается использование каскадных таблиц стилей (CSS).

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

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

Например, следующая таблица стилей CSS (хранящаяся в файле "special.css") устанавливает зеленый цвет текста абзаца и окружает его сплошной рамкой красного цвета:

P.special {

color : green;

border: solid red;

}

Авторы могут связывать таблицы стилей с исходным HTML-документом с помощью ранее рассмотренного элемента LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html40">

<HTML>

<HEAD>

<LINK href="special.css" rel="stylesheet" type="text/css">

</HEAD>

<BODY>

<P class="special">В этом абзаце текст должен быть зеленым.

</BODY>

</HTML>

HTML 4.0 обеспечивает поддержку таких функций таблиц стилей, как:

    Размещение информации о стиле. Помещение таблиц стилей в отдельные файлы упрощает их повторное использование. Иногда полезно включать инструкции по представлению в документ, к которому они применяются: в начало документа или в атрибуты элементов в теле документа. Для упрощения управления стилем Web-сервера в данной спецификации описывается использование заголовков HTTP для установки таблиц стилей, применяемых к документу.

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

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

    Зависимость от устройств. Таблицы стилей применяются к конкретным устройствам или группам устройств. Таблица стилей, предназначенная для экрана, может применяться при печати, но бесполезна для речевых браузеров. Данная спецификация позволяет определить широкие категории устройств, к которым применяется конкретная таблица стилей. Это позволяет агентам пользователей избежать загрузки ненужных таблиц стилей. Языки таблиц стилей могут включать функции описания зависимости от устройств в одной таблице.

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

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

Таблицы стилей в HTML-документах

Документы в формате HTMLHTML могут содержать правила таблиц стилей непосредственно в документе или импортировать таблицы стилей.

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

Синтаксис данных стиля зависит от языка таблицы стилей.

Установка языка таблицы стилей по умолчанию. Авторы должны указывать язык таблицы стилей для информации о стиле, связанной с документом HTML.

С целью установки языка таблицы стилей для документа по умолчанию рекомендуется использовать управляющий элемент META. Например, чтобы установить по умолчанию язык CSS, в разделе HEAD HTML-документа помещается следующее объявление:

<META http-equiv="Content-Style-Type" content="text/css">Я

Язык таблиц стилей по умолчанию можно также установить с помощью заголовков HTTP. Показанное выше объявление с использованием тега META эквивалентно заголовку HTTP:

Content-Style-Type: text/css

Агенты пользователей должны определять язык таблиц стилей по умолчанию для документа в соответствии со следующими приоритетами (от высшего к низшему):

    Если в объявлении META задается "Content-Style-Type", язык таблиц стилей определяет последнее объявление в потоке символов.

    Если "Content-Style-Type" задается в заголовках HTTP, язык таблиц стилей определяет последний заголовок в потоке символов.

    В противном случае по умолчанию используется язык "text/css".

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

Встроенная информация о стиле. Атрибут style = style определяет информацию о стиле текущего элемента. Таблицы стилей встроенных правил стиля определяются языком таблиц стилей по умолчанию.

В приведенном ниже примере устанавливается информация о цвете и размере шрифта текста определенного абзаца.

<P style="font-size: 12pt; color: fuchsia"> Таблицы стилей

В CSS объявления свойств имеют форму «имя: значение» и разделяются точкой с запятой.

Атрибут style может использоваться для применения определенного стиля к отдельному элементу HTML. Если стиль повторно применяется для нескольких элементов, необходимо использовать управляющий элемент STYLE (для перегруппировки этой информации). Для оптимальной гибкости рекомендуется определять стили во внешних таблицах стилей.

Информация о стиле в заголовке. Элемент STYLE. В записи HTML-кода начальный и конечный теги обязательны.

Элемент используется совместно с атрибутами:

    type = content-type. Этот атрибут определяет язык таблиц стилей для содержимого элемента и имеет приоритет над используемым языком таблиц стилей. Язык таблиц стилей указывается как тип содержимого (например, "text/css"). Поскольку для этого атрибута не устанавливается значение по умолчания, авторам следует указывать соответствующее значение.

    media = дескрипторы устройств. Атрибут задает целевое устройство для информации о стиле. Это может быть один дескриптор устройства или список дескрипторов, разделенных запятыми. По умолчанию устанавливается значение "screen".

Наряду с указанными используются следующие атрибуты: lang (информация о языке), dir (направление текста).

Элемент STYLE позволяет авторам помещать правила таблиц стилей в раздел HEAD HTML-документа. В HTML-документе допускается любое число элементов STYLE (в разделе HEAD).

Некоторые реализации таблиц стилей могут поддерживать большее разнообразие правил для элемента STYLE, чем в атрибуте style. Например, в CSS правила могут объявляться в элементе STYLE для:

    Всех экземпляров определенного элемента языка HTML (например, для всех элементов P, всех элементов H1 и т.д.).

    Всех экземпляров элемента HTML, принадлежащих определенному классу (т.е. для атрибута class которых установлено определенное значение).

    Отдельных экземпляров элемента языка HTML (т.е. для атрибута id которого установлено определенное значение).

Правила приоритета и наследования правил таблиц стилей зависят от языка таблиц.

Ниже дано объявление CSS STYLE, приводящее к возникновению границы вокруг всех элементов H1 в документе и центрированию их на странице.

<HEAD>

<STYLE type="text/css">

H1 {border-width: 1; border: solid; text-align: center}

</STYLE>

</HEAD>

Для указания о том, что эту информацию о стиле необходимо применять только к элементам H1, можно изменить данное определение следующим образом:

<HEAD>

<STYLE type="text/css">

H1.myclass {border-width: 1; border: solid; text-align: center}

</STYLE>

</HEAD>

<BODY>

<H1 class="myclass"> Стиль влияет на заголовок уровня H1</H1>

<H1> На этот заголовок стиль не влияет</H1>

</BODY>

Для ограничения области действия информации о стиле единственным экземпляром элемента H1 используется атрибут id:

<HEAD>

<STYLE type="text/css">

#myid {border-width: 1; border: solid; text-align: center}

</STYLE>

</HEAD>

<BODY>

<H1 class="myclass"> На этот заголовок H1 стиль не влияет</H1>

<H1 id="myid"> А на этот влияет </H1>

<H1> На этот заголовок H1 стиль не влияет </H1>

</BODY>

Для задания информации о стиле могут использоваться и элементы DIV и SPAN.

В следующем примере элемент SPAN используется для установки размера прописных букв для стиля шрифта первых нескольких слов абзаца.

<HEAD>

<STYLE type="text/css">

SPAN.sc-ex { font-variant: small-caps }

</STYLE>

</HEAD>

<BODY>

<P><SPAN class="sc-ex">Первые несколько</SPAN> слов абзаца выделены прописными буквами заданного размера.

</BODY>

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

<HEAD>

<STYLE type="text/css">

DIV.Abstract { text-align: justify }

</STYLE>

</HEAD>

<BODY>

<DIV class="Abstract">

<P>- Всех экземпляров определенного элемента языка HTML (например, для всех элементов P, всех элементов H1 и т.д.)

<P>- Всех экземпляров элемента HTML, принадлежащих определенному классу (т.е. для атрибута class которых установлено определенное значение).

<P>-Отдельных экземпляров элемента языка HTML

</DIV>

</BODY>

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

    Совместное использование авторами таблицы стилей в ряде HTML-документов (и сайтов).

    Возможность изменения таблиц стилей без изменения документа.

    Выборочная загрузка таблиц стилей (в зависимости от описаний устройств).

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

Указание внешних таблиц стилей. Для указания внешних таблиц стилей используются атрибуты элемента LINK:

    Установите в атрибуте href местоположение файла таблицы стилей. Значением атрибута href должен быть URL-адрес.

    Установите для атрибута type значение, указывающее язык связанного ресурса (таблицы стилей). Это позволяет браузерам пользователей не загружать таблицы стилей, использующие неподдерживаемые языки.

    Укажите, является ли таблица стилей постоянной, предпочитаемой или альтернативной.

    Чтобы таблица была постоянной, устанавливается для атрибута rel значение "stylesheet" и не устанавливается атрибут title.

    Чтобы таблица была предпочитаемой, для атрибута rel устанавливается значение "stylesheet" и таблице присваивается имя с помощью атрибута title.

    Чтобы указать альтернативную таблицу, установите для атрибута rel значение "alternate stylesheet" и присвойте таблице имя с помощью атрибута title.

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

Каскады таблиц стилей. Каскадные языки таблиц стилей, такие, как CSS, позволяют использовать информацию о стиле из нескольких источников. Однако не все языки таблиц стилей поддерживают каскады. Чтобы определить каскад, авторы указывают последовательность элементов LINK и/или STYLE. Каскад информации таблиц стилей производится в порядке указания элементов в разделе HEAD.

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

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

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

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

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

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

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

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

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

© Центр дистанционного образования МГУП