чатросов ергеев,

M. Чаунин
[Link]
[Link]

HTML 4.
Новый уровень создания HTML-документов

Динамический HTML
CGI-сценарии
Языки JavaScript и VBScript
Использование Java-anrmeioi

шшшмшй
ir-\r- "-'
Александр Матросов
Александр Сергеев
Михаил Чаунин

HTML 4.0

Санкт-Петербург
«БХВ-Петербург»
2003
УДК 681.3.06

Матросов А. В., Сергеев А. О., Чаунин М. П.

HTML 4.0. - СПб.: БХВ-Петербург, 2003. - 672 с.: ил.
ISBN 5-8206-0072-Х
Представлен весь спектр технологий создания Web-документов (начиная от простей-
ших — статических — и до документов на основе динамического HTML), включая
форматирование текста, создание списков, таблиц, форм, применение фафики, кас-
кадных таблиц стилей, встраивание различных объектов, использование средств
интерактивного общения с пользователем, баз данных, мультимедиа-объектов и пр.
Рассматриваются объектно-ориентированные технологии и программирование на
языке Perl, а также создание CGI-программ и написание сценариев на языках
JavaScript и VBScript.
Приводятся сведения о браузерах Netscape Communicator и Microsoft Internet Explorer
и таблице HTML-тэгов.
Для Web-дизайнеров
УДК 681.3.06

Группа подготовки издания:

Главный редактор Екатерина Кондукова
Зав. редакцией Наталья Таркова
Редактор Борис Желваков
Компьютерная верстка Ольги Сергиенко
Корректор Зинаида Дмитриева
Дизайн обложки Натальи Смирновой
Зав. производством Николай Тверских

Лицензия ИД № 02429 от 24.07.00. Подписано в печать 25.06.03.

Формат 70x100'/tg. Печать офсетная. Усл. печ. л. 54,18.
Доп. тираж 5000 экз. Заказ № 944
"БХВ-Петербург", 198005, Санкт-Петербург, Измайловский пр., 29.
Гигиеническое заключение на продукцию, товар № [Link].Д.001537.03.02
от 13.03.2002 г. выдано Департаментом ГСЭН Минздрава России.
Отпечатано с готовых диапозитивов
в Академической типографии "Наука" РАН
199034, Санкт-Петербург, 9 линия, 12.

ISBN 5-8206-0072-Х С Матросов А. В., Сергеев А. О., Чаунин М. П., 1999

С Оформление, издательство "БХВ — Санкт-Петербург", 1999
Содержание

ЧАСТЬ I. ОСНОВЫ HTML 11

Глава 1. Правила построения HTML-документов 13

Что такое HTML 13
Спецификации HTML 16
Структура документа 18
Раздел документа HEAD 19
Название документа 19
Связь с другими документами 20
Тэг <МЕТА> 22
Другие элементы заголовка 24
Раздел документа BODY 24
Форматирование текста 25
Тэги уровня блока и последовательные тэги 25
Логическое и физическое форматирование 26
Тэги логического форматирования текста 27
Тэги физического форматирования текста 31
Форматирование HTML-документа 39
Разделение на абзацы 39
Перевод строки 40
Тэги <NOBR> и <WBR> 41
Заголовки внутри HTML-документа 42
Горизонтальные линии 43
Использование предварительно отформатированного текста 44
Тэг <DIV> 45
Тэг <CENTER> 46
Включение комментариев в документ 46
Тэг <BLOCKQUOTE> 46
Тэг <ADDRESS> 48
Специальные символы 48
Ссылки на другие документы и файлы 49
Организация ссылок 49
Правила записи ссылок 50
Прочие тэги 54
 Содержание

Глава 2. Списки 56
Маркированный список 56
Тэги <UL>n <LI> 57
Графические маркеры списка 59
Нумерованный список 61
Тэги <OL> и <Ы> .'. 61
Список определений 65
Списки типа <DIR> и <MENU> 67
Вложенные списки 68

Глава 3. Графика 71
Общие соображения 72
Способы хранения изображений 73
Фоновые изображения 75
Встраивание изображений в HTML-документы 78
Выравнивание изображений 78
Задание размеров выводимого изображения 83
Отделение изображения от текста 84
Рамки вокруг изображений 85
Альтернативный текст 86
Использование изображения в качестве ссылки 87
Параметр LOWSRC 88
Использование миниатюрных версий изображений 88
Формат GIF 90
Формат JPG 96
Какой формат предпочесть — GIF или JPG 97
Некоторые проблемы использования цвета 99
Создание анимации на основе GIF-файлов 100
Программа GIF Construction Set 102
Блок HEADER 103
Блок LOOP 104
Блок CONTROL 104
Блок IMAGE 107
Использование мастера анимации 108
Дополнительные возможности пакета GIF Construction Set ПО

Глава 4. Таблицы в HTML 114

Создание простейших HTML-таблиц 116
Представление таблиц на странице 118
Заголовок таблицы <CAPTION> 118
Параметры тэга <TABLE> 119
Параметр BORDER 120
Параметр CELLSPACING 121
Параметр CELLPADDING 122
Параметры WIDTH и HEIGHT. 123
Параметр ALIGN 124
Форматирование данных внутри таблицы 128
Содержание

Вложенные таблицы 132

Особенности построения таблиц 136
Отображение пустых ячеек в таблицах 136
Выравнивание данных в столбцах таблицы 137
Задание цвета рамок таблицы 139
Задание фонового рисунка для таблицы 140
Тэги структурирования таблицы <THEAD>, <TBODY>n <TFOOT> 140
Задание числа столбцов таблицы 143
Вертикальное выравнивание таблиц 143
Альтернатива табличному представлению 144
Подготовка таблиц 144

Глава 5. Фреймы 148

Сферы применения фреймов 148
Правила описания фреймов 155
Тэг <FRAMESET> 157
Тэг <FRAME> 159
Тэг <NOFRAMES> 162
Особенности описания фреймовых структур 162
Примеры фреймов 164
Особенности навигации при использовании фреймов 167
Взаимодействие между фреймами 168
Примеры более сложного взаимодействия между фреймами 174
Различие между фреймами и окнами браузера 179
Дополнительные возможности браузеров 181
Возможности браузера Netscape 181
Возможности браузера Microsoft Internet Explorer 183
Плавающие фреймы 185
Средства создания документов, содержащих фреймы 186
Редактор фреймов FrameGang 187
Редактор фреймов Frame-It 190
Информация об использовании фреймов на WWW 193

Глава 6. Карты-изображения 194

Основы использования карт-изображений 196
Терминология 197
Графическое представление карты-изображения 197
Описание конфигурации карты-изображения 197
Варианты реализации карт-изображений 198
Преимущества и недостатки карт-изображений 198
Серверный вариант реализации карт-изображений 200
Формат CERN 202
Формат NCSA 203
Клиентский вариант карты-изображения 204
Тэг <МАР> 205
Тэг <AREA> 205
Параметр SHAPE 205
 Содержание

Параметр COORDS. 206

Параметры HREF и NOHREF ; 206
Параметр TARGET 207
Параметр AL Т 207
Комбинация клиентского и серверного вариантов 208
Особенности использования карт-изображений 209
Альтернативные средства навигации 209
Средства создания карт-изображений 211
Программа MapEdit 212
Программа Map THIS! 217
Программа CrossEye 220
Заключительный пример 221

Глава 7. Звук 223

Средства воспроизведения звука 223
Как компьютер работает со звуком 224
Модуль LiveAudio 226
Управление модулем LiveAudio 226
Встраивание звуковых файлов в Web-страницу 227
Другие звуковые модули 232
Технология RealAudio 235
Программа-плейер RealPlayer Plus G2 238
Встраивание в страницу звуковых файлов формата RealAudio 239
Ресурсы RealAudio в Интернете 246
Звуковые файлы формата МРЗ 249
Воспроизведение файлов формата МРЗ 251
Установка программы Winamp 252
Управление программой Winamp 256
Подключаемые модули программы Winamp 257
Изменение внешнего вида программы Winamp 259
Скрытые возможности программы Winamp 261
Декодирование файлов формата МРЗ 262
Где найти файлы МРЗ? 263
Создание звуковых файлов МРЗ 265
Программы вычленения файлов с аудио CD 266
Программы кодирования 266
Выбор параметров кодирования 270
Переносные плейеры звуковых файлов МРЗ 271
Потоковое воспроизведение 274
Звуковые файлы формата VQF 274
Звуковые файлы формата ААС 277
HomeboyAAC 278
АТ&Та2ЬААС 278
Liquifier Pro AAC 279
Astrid/Quartex ААС 279
Звуковые файлы формата РАС 280
Новый формат хранения звука МР4 281
Формат WMA 282
Содержание

Глава 8. Разработка HTML-страниц при помощи текстового процессора

Microsoft Word 283
Создание Web-страниц 285
Создание маркированных и нумерованных списков на Web-страницах 285
Вставка горизонтальной линии в Web-страницу 288
Выбор фона создаваемого документа 289
Изменение цвета и форматирование текста Web-страниц 291
Работа со стилями на Web-страницах 294
Непосредственное редактирование HTML-кода 295
Предварительный просмотр Web-страницы в процессе редактирования 296
Таблицы на Web-страницах 296
Работа с рисунками на Web-страницах 299
Создание ссылок в документе 301
Создание форм на Web-страницах 302
Сохранение существующего документа Word в формате HTML 303
Проблемы преобразования полей 308
Использование примечаний в документе 314
Версии и реализации Microsoft Word 315

ЧАСТЬ П. ИНТЕРАКТИВНЫЕ WEB-ДОКУМЕНТЫ 319

Глава 9. Выполняемые сценарии 321

Основы объектно-ориентированных технологий 321
Что такое программный объект 321
Событийные приложения 323
Объектные модели языков сценариев 324
Язык создания сценариев JavaScript 325
Общий обзор языка 326
Синтаксис языка 327
Размещение операторов языка на странице 327
Использование тэга <SCRIPT> 327
Задание файла с кодом JavaScript 328
Элементы JavaScript в параметрах тэгов HTML 329
Обработчики событий 329
Язык ядра JavaScript 333
Переменные и литералы 333
Выражения и операторы 335
Стандартные объекты и функции 339
Операторы управления 345
Объекты клиента и обработка событий 350
Иерархия объектов 351
Свойства и методы ключевых объектов 352
Обработчики событий 359
Практические примеры 364
Часы JavaScript 364
Простое меню 365
Документ с фреймами 368
8 Содержание

Язык VBScript 369

Основные понятия 370
Типы данных 370
Переменные, массивы и константы 373
Операторы 375
Операторы условия и цикла 377
Процедуры 383
Объектная модель и взаимодействие с элементами документа 385
Функции и объекты ядра VBScript 385
Объекты MS Internet Explorer 391
Процедуры обработки событий 393
Практические примеры 396
Плавающий фрейм 396
Баннер 398
CGI-сценарии и язык Perl 401
Основные понятия 401
HTML-формы 402
Тэг <FORM> 403
Тэг <INPUT> 404
Тэг <SELECT> 407
Тэг <TEXTAREA> 408
Пример формы 409
Передача информации CGI-программе 411
Кодирование и пересылка данных формы 411
CGI-сценарии 414
Общие сведения 414
Переменные в языке Perl 418
Переменные среды CGI 426
Поиски замена текста. Регулярные выражения 429
Обработка данных формы 432
Подпрограммы, библиотеки, модули 438

Глава 10. Динамический HTML 449

Каскадные таблицы стилей 450
Общие положения 451
Встраивание таблиц стилей в документ 452
Группирование и наследование 454
Селекторы 455
Селектор CLASS. 456
Селектор ID 457
Контекстные селекторы 457
Псевдоклассы 458
Псевдоклассы связей 459
Применение таблиц стилей 459
Модель форматирования 462
Блоковые элементы 463
Встроенные элементы 465
Содержание 9

Свойства форматирования элементов 466

Шрифты 468
Свойство font-family 468
Свойство font-style 469
Свойство font-variant 469
Свойство font-weight 470
Свойство font-size 470
Свойство font 471
Свойство ©font-face 471
Цвет и фон 471
Форматирование текста 474
Блоки 476
Визуальное форматирование 478
Абсолютное позиционирование 479
Относительное позиционирование 481
Статическое позиционирование 482
Визуальные эффекты 482
Отображение списков 486
Объектная модель документа 488
Структура документа 489
Объектная модель DHTML в MS Internet Explorer 4.0 490
Иерархия объектов 491
Свойства и методы объектов 494
Событийная модель 497
Цикл жизни события 497
Объект event 500
Объектная модель документа в MS Internet Explorer 5.0 503
Динамический HTML в Internet Explorer 509
Динамическое изменение документа 510
Раскрывающийся список 510
Движущийся элемент 514
Поиск в документе 516
Фильтры и переходы 519
Общие свойства некоторых фильтров 523
Описание фильтров 525
Описание переходов 530
Связывание данных с документом 533
Архитектура привязки данных 533
Объекты-источники данных 536
Динамический HTML в Netscape Navigator 543
Применение каскадных таблиц стилей 543
Позиционирование и объектная модель сценария 547
Динамическое позиционирование 551
Загружаемые шрифты 553

Глава 11. Встраиваемые компоненты 555

Элементы управления ActiveX 555
Встраивание в HTML-страницу 557
10 Содержание

Элементы управления ActiveX и сценарии 561

Редактор FrontPage 98 565
Безопасность и элементы управления ActiveX 573
Цифровая подпись 574
Безопасное использование элементов управления ActiveX 576
Лицензирование элементов управления ActiveX 579
Элементы управления на HTML-страницах 581
Элемент управления TabStrip 582
Элемент управления TreeView 588
Java-апплеты ,. 597
Приложения и апплеты 599
Структура приложения 600
Интерфейсы 602
Апплеты 603
Встраивание апплета в HTML-документ 607
Жизненный цикл апплета 608
Создание графического интерфейса пользователя 612
Обработка событий 615
Рисунки в апплетах 620
Архивы 621
Java и JavaScript 622
Заключение 630

Приложение 1. Поддержка тэгов и параметров HTML-браузерами 633

Приложение 2. Названия и коды цветов для HTML 650
Приложение 3. Совместимость приводов CD-ROM и программ
для вычленения звуковых файлов 656

Предметный указатель 664

 1. Правила построения HTML-документов
2. Списки
3. Графика
4. Таблицы в HTML
5. Фреймы
6. Карты-изображения
7. Звук
8. Разработка HTML-страниц при помощи
текстового процессора Microsoft Word

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

В данной книге главы 1—8 и приложения написаны Сергеевым А. О., а гла-

вы 9—11 — Матросовым А. В. и Чауниным М. П.
Замечание и пожелания по книге просим направлять авторам по электрон-
ной почте sergeev@[Link].
 .

ГЛАВА 1

Правила построения
HTML-документов

Что такое HTML

Всемирная паутина World Wide Web (WWW) соткана из Web-страниц, кото-
рые создаются с помощью так называемого языка разметки гипертекста
HTML (HyperText Markup Language). Хотя многие говорят о программиро-
вании на этом языке, HTML вовсе не является языком программирования в
традиционном понимании. HTML — язык разметки документа. При разра-
ботке HTML-документа выполняется разметка текстового документа точно
так же, как это делает редактор при помощи красного карандаша. Эти по-
метки служат для указания формы представления информации, содержа-
щейся в документе.
Специальные программы просмотра HTML-документов, которые часто на-
зывают браузерами, служат для интерпретации файлов, размеченных по пра-
вилам языка HTML, форматирования их в виде Web-страниц и отображении
их содержимого на экране компьютера пользователя. Существует большое
количество программ-браузеров, разработанных различными компаниями,
однако, на сегодняшний день из всего разнообразия программ явно выде-
ляются две программы-лидера — Netscape Communicator и Microsoft Internet
Explorer.
Программа Netscape Navigator разработана компанией Netscape Communi-
cations Corporation. Как и у многих программных продуктов, существует ряд
версий этой программы. Последней версией программы Netscape Communi-
cator на момент написания книги являлась версия 4.7. Программа Internet
Explorer разработана компанией Microsoft. Последняя версия этой програм-
мы — 5.0.
Другие браузеры значительно отстают по популярности. Несколько лет на-
зад браузер компании Netscape занимал ведущее место среди браузеров, бо-
лее двух третей пользователей применяли именно эту программу просмотра.
Выпустив свой браузер, компания Microsoft приложила огромные усилия
для завоевания этой части рынка. В средствах массовой информации часто
14 Часть I. Основы HTML

встречались сообщения о войне между браузерами за пользователей. Сейчас

эти два браузера сравнимы по популярности. Росту популярности браузера
Microsoft способствует включение браузера в состав операционной системы
Windows 98, однако, в конечном счете, выбор браузера остается за пользова-
телем.
Современные браузеры обладают широкими возможностями, но основным
для них является интерпретация документов, размеченных по правилам
HTML. Описанию этих правил, в основном, и посвящена данная книга.
В первой части мы рассмотрим лишь основополагающие принципы по-
строения HTML-документов.
Чтобы понять, что собой представляет язык разметки, вспомним старые до-
брые времена, когда многие работали с текстовыми редакторами типа
WordStar. В них для выделения какой-либо фразы, например, полужирным
шрифтом, в ее начале и в конце ставились специальные отметки (/в и /ь):
/ВЭтот текст будет выведен полужирным шрифтом/Ь

При выводе такого текста на печатающее устройство (о дисплеях еще речь

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

Символы <в> включают полужирное начертание, а символы </в> выключают

его. Такие символы, которые управляют отображением текста и при этом
сами не отображаются на экране, в языке HTML принято называть тэгами
(от английского слова tag — ярлык, признак).
Все тэги языка HTML выделяются символами -ограничителями (< и >), между
которыми записывается идентификатор (имя) тэга (в нашем примере это в),
и, возможно, его параметры. Единственным исключением из этого правила
являются тэги комментария с более сложными ограничителями (<!-- и —>).
Названия тэгов, а также их параметров можно записывать на любом регист-
ре. Для единообразия в данной книге большинство тэгов записывается про-
писными буквами.
Большинство тэгов HTML используется попарно, т. е. для определенного
тэга, назовем его открывающим, в документе имеется соответствующий за-
крывающий тэг. По правилам HTML закрывающий тэг записывается так же,
как и открывающий, но с символом / (прямой слэш) перед именем тэга.
Единственным принципиальным различием парных тэгов является то, что
закрывающие тэги не используют параметры.
Глава /. Правила построения HTML-документов 15

Тэги, которые нуждаются в соответствующих завершающих тэгах, будем на-

зывать тэгами-контейнерами. Все, что записано между соответствующим
открывающим и закрывающим тэгом, будем называть содержимым тэга-
контейнера. Иногда завершающий тэг можно опускать. Например, для тэга,
описывающего данные для ячейки таблицы <то>, соответствующий закры-
вающий тэг </то> можно всегда опускать. Окончание данных для ячейки
таблицы будет распознано по появлению очередного тэга <то> или тэга
окончания строки таблицы </TR>.
Есть ряд тэгов, для которых завершающие тэги опускаются большинством
авторов документов. Примером может служить тэг элемента списка <LI> или
тэг абзаца <р>. Современные браузеры во многих случаях правильно форма-
тируют документы, если опущены некоторые завершающие тэги, однако
такая практика не может быть рекомендована.
Ряд тэгов в принципе не нуждается в завершающих тэгах. Примерами могут
служить тэг вставки изображений <IMG>, принудительного перевода строки
<BR>, указания базового шрифта <BASEFONT> и др. Часто из самого предна-
значения тэга можно догадаться, нуждается ли он в завершающем.
Существуют общие правила интерпретации тэгов браузерами. В отличие
от языков программирования, в которых ошибочные операторы приводят
к выдаче соответствующих сообщений на этапе компиляции программы и
требуют правки, в HTML не принято реагировать на неверную запись тэгов.
Неверно записанный тэг или его параметр должен просто игнорироваться
браузером. Это общее правило для всех браузеров, под действие которого
подпадают не только ошибочно записанные тэги, но и тэги, не распозна-
ваемые данной версией браузера. Примером могут служить тэги, пред-
ложенные и реализованные для отдельного браузера и неизвестные для
другого. Например, тэг-контейнер <NOFRAMES>, который служит для предо-
ставления альтернативной информации браузерам, не обеспечивающим
поддержку фреймовых структур, такими браузерами не будет распознан.
Браузер же, поддерживающий фреймы, встретив тэг <NOFRAMES>, пропустит
всю заключенную в нем информацию. А браузер, не знакомый с фреймами,
естественно, не поймет и тэг <NOFRAMES>. Однако, согласно приведенному
правилу, этот тэг будет просто пропущен, зато вся последующая информа-
ция будет отображена.
Тэги могут записываться с параметрами или атрибутами (от англ, attribute).
В этой книге будем чаще всего использовать термин параметр. Наборы
допустимых параметров индивидуальны для каждого тэга. Общие правила
записи параметров заключаются в следующем. После имени тэга могут сле-
довать параметры, которые отделяются друг от друга пробелами. Порядок
следования параметров тэга произволен. Многие параметры требуют указа-
ния их значений, однако некоторые параметры не имеют значений или могут
записываться без них, принимая значения по умолчанию. Если параметр тре-
бует значения, то оно указывается после названия параметра через знак
_/6 Часть I. Основы HTML

равенства. Значение параметра может записываться в кавычках, так и без

них. Единственным случаем, в котором без кавычек не обойтись, является
случай, когда в значении параметра имеются пробелы. В значениях пара-
метров (в отличие от названий тэгов и самих параметров) иногда важен ре-
гистр записи. Приведем пример записи тэга с параметрами:
<TABLE BORDER ALIGN="left">

Здесь для тэга <TABLE> задано два параметра. Первый параметр BORDER указан
без значения. Второй параметр ALIGN имеет значение left.
В последующих главах первой части книги будет описано назначение тэгов
языка HTML и их параметров. В общем, тэги могут иметь различные пара-
метры, однако существует ряд параметров, единых практически для всех
тэгов. Упомянем здесь общие параметры тэгов, чтобы более не говорить
о них при описании каждого тэга.
Все тэги, которые допустимо использовать в разделе <BODY> документа
HTML, могут иметь параметры CLASS, ID, LANG, LANGUAGE, STYLE и TITLE. Ис-
пользование этих параметров полезно, прежде всего, при стилевом оформ-
лении документов, речь о котором пойдет во второй части книги.
Параметры CLASS, ID, STYLE поддерживаются Internet Explorer, начиная
с версии 3.0, и Netscape, начиная с версии 4.0. Эти параметры нужны при
использовании стилей.
Параметры LANG, LANGUAGE, TITLE — поддерживаются только Internet Explorer,
начиная с версии 4.0. Эти параметры указывают, соответственно, исполь-
зуемый язык (например, для России: LANG=ru), язык записи скриптов
(например, LANGUAGE=JavaScript), а также текст подсказки, выдаваемой при
наведении указателя мыши на данный элемент (TITLE).
В современном HTML, помимо тэгов языка и их содержимого, в исходном
HTML-коде также записываются коды сценариев (JavaScript или VBScript).
В первой части книги об этом практически нигде не упоминается, зато
часть вторая целиком посвящена вопросам использования сценариев.
Завершая общий обзор HTML, отметим, что простейшие HTML-документы
представляют собой обычные текстовые файлы, для просмотра и редактиро-
вания которых можно воспользоваться любым текстовым редактором. Эти
файлы обычно имеют расширение НТМ или HTML.

Спецификации HTML
Язык HTML приобрел популярность в середине 90-х годов, благодаря экс-
поненциальному росту сети Интернет. К этому времени назрела необходи-
мость стандартизации языка, поскольку различные компании, разрабаты-
вавшие программное обеспечение для доступа в Интернет, предлагали свои
Глава 1. Правила построения HTML-документов 17

варианты инструкций HTML, число которых все возрастало и возрастало.

Настала пора прийти к какому-то единому соглашению в части применения
тэгов языка HTML.
Работу по созданию спецификации HTML взяла на себя организация, назы-
ваемая World Wide Web Consortium (сокращенно — W3C). В ее задачу вхо-
дило составление спецификации, отражающей современный уровень разви-
тия возможностей языка с учетом разнообразных предложений компаний-
разработчиков браузеров. Так, в ноябре 1995 г. появилась спецификация
HTML 2.0, призванная формализовать сложившуюся к концу 1994 г. прак-
тику использования HTML.
Схема утверждения спецификаций состоит в следующем. Консорциум W3C
выпускает проект спецификации, после обсуждения которого выпускается
так называемый черновой, рабочий (draft) вариант спецификации и предла-
гает его к обсуждению на определенный период. После периода обсуждения
рабочий вариант спецификации может стать рекомендацией, т. е. офици-
ально признанным вариантом спецификации HTML.
Вскоре после спецификации 2.0 была выпущена рабочая версия специфика-
ции 3.0, срок окончания периода обсуждения которой истек в сентябре 1995 г.
Эта спецификация так и не была принята в качестве официальной рекомен-
дации. В нее планировалось включить большое разнообразие тэгов и воз-
можностей, специфичных для отдельных браузеров, однако Консорциум
W3C не нашел возможности разработать хорошую спецификацию для та-
кого большого числа инструкций.
После долгих размышлений в мае 1996 г. был выпущен проект HTML 3.2.
Проект основывался на части тэгов, имеющихся в версии 3.0, которые пока-
зывали стабильность в работе. В сентябре 1996 г. после нескольких месяцев
обсуждения версия 3.2 стала предлагаемой спецификацией, а в январе
1997 г. — официальной рекомендацией.
Июль 1997 года ознаменовался выходом предлагаемой спецификации
HTML 4.0, которая в декабре 1997 г. стала официальной рекомендацией. На
сегодняшний день это последняя из принятых спецификаций.
В приводимом здесь кратком обзоре истории развития языка HTML вряд ли
стоит детально описывать особенности различных спецификаций, тем бо-
лее, что в реальной жизни разработчики далеко не всегда следуют рекомен-
дациям Консорциума. Отметим лишь некоторые идеи, заложенные в основу
последней спецификации.
В спецификации HTML 4.0 ключевой идеей стало отделение описания
структуры документа от описания его представления на экране монитора.
Опыт показывает, что разделение структуры и представления документа
уменьшает затраты на поддержку широкого спектра платформ, сред и т. п.,
а также облегчает внесение исправлений в документы. В соответствии с
этой идеей следует шире пользоваться методами описания представления
18 Часть I, Основы HTML

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

ные данные о форме представления вперемешку с содержанием документа.
Для реализации этой идеи в спецификации HTML 4.0 ряд тэгов, используе-
мых для непосредственного задания формы представления HTML-
элементов, отменены. К отмененным по этой причине тэгам относятся
<CENTER>, <FONT>, <BASEFONT>, <s>, <STRiKE>, <u>. Среди других отмененных
тэгов отметим <ISINDEX>, <APPLET>, <DIR>, <MENU>. Вместо отмененных тэгов
предлагаются альтернативные варианты реализации соответствующих воз-
можностей, на что мы обращаем особое внимание в этой книге.
Понятие отмененного (deprecate) тэга состоит в следующем. Если в данной
спецификации языка тэг назван отмененным, то это означает, что браузеры
должны пока продолжать поддержку таких тэгов, но их использование не
рекомендуется. В следующих спецификациях эти тэги, возможно, будут пе-
реведены в разряд устаревших (obsolete). Устаревшие тэги могут более не
поддерживаться браузерами. В спецификации HTML 4.0 устаревшими на-
званы всего три тэга: <ХМР>, <PLAINTEXT> и <LISTING>. Информацию о том,
какие из тэгов включены в спецификацию, можно получить из таблицы,
приводимой в приложении Ш.
Официальные сведения о спецификации HTML всегда можно получить с
Web-сайта Консорциума W3C по адресу [Link] Специфика-
ция 4.0 находится по адресу [Link]
Заметим, что по логике вещей официальная спецификация должна играть
роль руководящей и направляющей силы, обеспечивая одинаковую форму
представления информации различными браузерами. Это идеальный вари-
ант, к которому следует стремиться. На деле все обстоит не так хорошо. По-
стоянно появляются новые идеи, реализуемые компаниями-разработчиками
в своих браузерах и пропагандируемые ими. Удачные идеи приживаются,
а затем подхватываются другими разработчиками. Часть возможностей так и
остается специфическими особенностями отдельного браузера. Удачные
разработки в итоге попадают в спецификацию и становятся общеприняты-
ми. Таким образом, процесс усовершенствования возможностей браузеров и
уточнения спецификации идет непрерывно, оказывая взаимное влияние
друг на друга.

Структура документа
Первым тэгом, с которого следует начинать описание документов HTML,
является тэг <нтмь>. Он должен всегда начинать описание документа, а за-
вершать описание документа должен тэг </нтмь>. Эти тэги обозначают, что
находящиеся между ними строки представляют единый HTML-документ.
Сам по себе документ является обыкновенным текстовым ASCII-файлом.
Без этих тэгов браузер или другая программа просмотра, возможно, будет не
Глава 1. Правила построения HTML-документов 19

в состоянии идентифицировать формат документа и правильно его интер-

претировать.
Чаще всего тэг <нтмь> используется без параметров. В предыдущих версиях
использовался параметр VERSION, отмененный спецификацией HTML 4.0. На
смену этому параметру пришел тэг <! DOCTYPEX
Большинство современных браузеров могут опознать документ и не содер-
жащий тэгов <нтмь> и </нтмь>, все же их употребление крайне желательно.
Между парой тэгов <нтмь> и </нтмь> располагается сам документ. Документ
может состоять из двух разделов — раздела заголовка (начинающийся тэгом
<HEAD>) и раздела содержательной части документа (начинающийся тэгом
<BODY>). Для документов, описывающих фреймовые структуры, вместо раз-
дела BODY используется раздел FRAMESET (с тэгом <FRAMESET>). Далее бу-
дут рассмотрены правила составления разделов документа HEAD и BODY.
Построение документов, содержащих фреймы, рассматривается в главе 5.

Раздел документа HEAD

Раздел документа HEAD определяет его заголовок и не является обязатель-
ным тэгом, однако хорошо составленный заголовок может быть весьма по-
лезен. Задачей заголовка является представление необходимой информации
для программы, интерпретирующей документ. Тэги, находящиеся внутри
раздела HEAD (кроме названия документа, описываемого с помощью тэга
<TITLE>), не отображаются на экране.
Раздел заголовка открывается тэгом <HEAD>. Обычно этот тэг следует сразу
же за тэгом <нтмь>. Закрывающий тэг </HEAD> показывает конец этого разде-
ла. Между упомянутыми тэгами располагаются остальные тэги раздела заго-
ловка.

Название документа
Тэг-контейнер <TITLE> является единственным обязательным тэгом заголов-
ка и служит для того, чтобы дать документу название. Оно обычно показы-
вается в заголовке окна браузера. Тэг <TITLE> нельзя путать с названием
файла документа; напротив, он представляет собой текстовую строку, со-
вершенно независимую от имени и местоположения файла, что делает его
весьма полезным. Имя же файла жестко определяется операционной систе-
мой компьютера, на котором он хранится. Также следует отличать название
документа (с тэгом <TITLE>) от заголовков внутри документа, обычно разме-
чаемых тэгами <нх>.

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

браузерами. При этом различные браузеры в качестве заголовка окна будут

выдавать различную информацию. Так ранние версии браузера Netscape вы-
давали строчку "No title". Другие браузеры либо не показывают ничего, либо
отображают адрес загруженного файла, повторяя информацию панели Loca-
tion браузера.

Название документа записывается между тэгами <TITLE> и </TITLE> и пред-

ставляет собой строку текста. В принципе, название может иметь неограни-
ченную длину и- содержать любые символы-^роме некоторых зарезервиро-
ванных. На практике следует ограничиться одной строкой, имея в виду, что
название появляется в заголовке окна браузера. Также следует помнить о
том, что останется от названия документа при минимизации окна браузера.
Можно рекомендовать ограничивать длину названия документа 60 символа-
ми. Увидеть, как отображается название в окне браузера, можно на любом
рисунке в данной книге, где приводится пример отображения какого-либо
документа.
По умолчанию текст, содержащийся в названии документа, используется
при создании закладки (bookmark) для документа. Поэтому, для большей
информативности, избегайте безликих названий (Home Page, Index и т. д.).
Подобные слова, используемые в качестве названия закладки, обычно со-
вершенно бесполезны. Название документа должно кратко характеризовать
его содержание. Заметим, что при отображении на экране документов с
фреймовой структурой, когда в каждый из фреймов загружается отдельный
документ, имеющий свое название, на экране будет видно только название
главного документа. Тем не менее, задавать название отдельных документов,
предназначенных для загрузки во фреймы, также настоятельно рекоменду-
ется. Более подробно этот вопрос рассматривается в главе 5.
Важность названия документа определяет следующий факт. Поскольку тэг
<TITLE> располагается практически в самом начале HTML-файла, то после
начала загрузки документа первым делом отображается именно оно. Далее
выполняется загрузка основного содержания документа, при этом браузер
начинает форматирование документа в окне. Этот процесс, вообще говоря, в
зависимости от содержания и структуры документа, а также скорости со-
единения, может затянуться. В течение достаточно продолжительного вре-
мени пользователь будет созерцать пустой экран, единственной информа-
тивной строчкой которого будет являться название документа. Весьма часто
(при обрыве соединения или, если пользователь не желает дожидаться
окончания загрузки документа) вся информация о документе на этом и за-
канчивается.

Связь с другими документами

Часто HTML-документы связаны между собой, то есть имеют ссылки друг
на друга. Ссылки могут быть как абсолютные, так и относительные. И те
и другие имеют недостатки. Абсолютные ссылки могут быть слишком гро-
Глава 1. Правила построения HTML-документов 21

моздкими и переставать работать, если перемещен младший по иерархии

документ. Относительные ссылки легче вводить и обновлять, но и эта связь
обрывается, если перемещен старший по иерархии документ. Оба вида свя-
зей могут нарушиться при переносе документа с одного компьютера на
другой.
Часто случается, что пользователь загрузил на свою машину большой доку-
мент и отключился от сети для его подробного изучения. Все ссылки в ло-
кальной копии документа перестанут работать. Для их "реанимации" при-
дется вновь обратиться к оригиналу документа, находящемуся на удаленном
компьютере.
К счастью, разработчики HTML предусмотрели эту проблему и добавили
два тэга, <ВАЗЕ> и <LINK>, которые включаются в заголовок для того, чтобы
связь между документами не нарушалась.

Тэг <BASE>
Тэг <BASE> служит для указания полного базового URL-адреса документа.
С его помощью относительная ссылка продолжает работать, если документ
переносится в другой каталог или даже на другой компьютер. Тэг <BASE>
работает аналогично команде path MS-DOS, что позволяет программе про-
смотра определить ссылку на искомый документ, даже если она находится
в старшем по иерархии документе, расположенном на другом компьютере.
Тэг <BASE> имеет один обязательный параметр HREF, после которого указы-
вается полный URL-адрес документа. Ниже показан пример использования
тэга <BASE>.
<HTML>
<HEAD>
<Т1ТЬЕ>Указание базового адреса</Т1ТЬЕ>
<BASE HREF="//www.my_host.ru/~sergeev">
</HEAD>
<BODY>
<IMG SRC=/gifs/[Link] ALT="News">
</BODY>
</HTML>

Тэг <BASE> указывает браузеру, где искать файл. В случае, если пользователь
работает с локальной копией файла и его машина не отключена от сети,
изображение пиктограммы News будет найдено и показано в окне браузера.

Тэг <LINK>
Даже если тэг <BASE> позволяет найти файл, остается открытым вопрос
о взаимоотношениях документов. Важность этих отношений возрастает
пропорционально росту сложности ваших документов. Для того чтобы под-
держивать логическую связь между ними, в HTML введен тэг <LINK>.
_22 Часть I. Основы HTML

Тэг <LINK> указывает на связь документа, содержащего данный тэг и другого

документа или объекта. Он состоит из URL-адреса и параметров, конкрети-
зирующих отношения документов. Заголовок документа может содержать
любое количество тэгов <LINK>. Табл. 1.1 описывает параметры тэга <ыж> и
их функции.

Таблица 1.1. Параметры тэга <LINK>

Параметр Назначение

HREF Указывает на URL-адрес другого документа

REL Определяет отношение между текущим и другим документом
REV Определяет отношение между другим документом и текущим
(отношение, обратное REL)
TYPE Указывает тип и параметры присоединенной таблицы стилей

Приведем примеры тэга <ыж> с параметрами:

<LINK REL="contents" HREF ="../[Link]">
<LINK HREF="[Link] REV="made">

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

([Link] — table of contents) с прямым отношением contents. Вторая строка
описывает связь с URL-адресом автора документа (с обратным отношением
made).
Между документами может существовать множество различных отношений.
Примеры других значений параметра REL: bookmark, copyright, glossary,
help, home, index, toe, next, previous. Параметр REV может также принимать
значения: author, editor, publisher, owner.

Тэг <МЕТА>
Разработка новых спецификаций языка разметки гипертекста занимает не-
малый срок, и за это время компании, производящие браузеры, успевают
выпустить несколько версий своих продуктов. Поэтому в раздел заголовка
может быть добавлен еще один тэг <МЕТА>, позволяющий авторам документа
определять информацию, не имеющую отношения к HTML.
Эта информация используется браузером для действий, которые не преду-
смотрены текущей спецификацией HTML. Тэг <МЕТА> не потребуется вам
для создания первых HTML-документов, но он вам наверняка понадобится,
когда ваши страницы станут более сложными.
Пример:
<МЕТА HTTP-EQUIV="refresh" CONTENT="60" RL="www.my_host.ru/[Link]">
Глава 1. Правила построения HTML-документов 23

Браузеры Netscape Navigator и Internet Explorer поймут эту запись как инст-
рукцию ожидать 60 секунд, а затем загрузить новый документ. Такая инст-
рукция часто используется при изменении местоположения документов.
Небольшой документ с приведенной строкой может быть оставлен на ста-
ром месторасположении документа для автоматической ссылки на его новое
месторасположение.
Следующая строка:
<МЕТА HTTP-EQUIV="refresh" CONTENT="60">

инструктирует браузер перезагружать страницу каждые 60 секунд. Это может

быть полезно, если данные на странице часто обновляются, например,
в случае отслеживания котировок акций.
Стало весьма популярным применение элемента <МЕТА> для решения неко-
торых типичных задач. В качестве примера можно привести указание клю-
чевых слов, используемых поисковыми системами. Этот способ позволяет
включать в индекс документа дополнительные слова, которые могут явно не
входить в его содержание. Для этого в тэге <МЕТА> в качестве значения пара-
метра NAME указывается имя некоторого свойства. А при помощи параметра
CONTENT указывается значение данного свойства, например:
<МЕТА NAME="author" CONTENT="Александр Сергеев">

Спецификация HTML не определяет каких-либо конкретных имен свойств,

записываемых в тэге <МЕТА>. Однако есть несколько часто применяемых
СВОЙСТВ, например, description, keywords, author, robots И др.:
<МЕТА NAME="description" CONTENT="Описание возможностей языка HTML 4.0">
<МЕТА NAME="keywords" СОМТЕ№Г="тэг, гипертекст, HTML, браузер">

Приведенные тэги <МЕТА> вполне могли бы быть указаны, например, для

электронного варианта данной книги.
Тэг <МЕТА> может иметь параметры, указанные в табл. 1.2.

Таблица 1.2. Параметры тэга <МЕТА>

Параметр Назначение

HTTP-EQUIV Определяет свойство для тэга

NAME Обеспечивает дополнительное описание тэга. Если этот параметр

опущен, он считается эквивалентным параметру HTTP-EQUIV

URL Определяет адрес документа для свойства

CONTENT Определяет возвращаемое значение для свойства

24_ Часть I. Основы HTML

Еще одно важное предназначение тэга <МЕТА> — это указание кодировки

текста. Так, для текста на русском языке в кодировке Windows нужно запи-
сать следующую строчку:
<МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">

Другие элементы заголовка

В разделе заголовка документа могут присутствовать еще два тэга — <STYLE>
и <SCRIPT>. Их назначение связано с использованием таблиц стилей в доку-
менте и записью скриптов. Эти вопросы подробно рассматриваются во вто-
рой части книги.

Раздел документа BODY

В этом разделе документа располагается его содержательная часть. Боль-
шинство тэгов, рассматриваемых далее в этой главе и последующих, должно
располагаться в данном разделе документа. Здесь мы рассмотрим лишь не-
которые общие вопросы.
Раздел документа BODY должен начинаться тэгом <BODY> и завершаться тэ-
гом </BODY>, между которыми располагается все содержимое данного разде-
ла. Строго говоря, наличие этих тэгов не является обязательным, поскольку
браузеры могут определить начало содержательной части документа по кон-
тексту. Однако их употребление рекомендуется.
Тэг <BODY> имеет ряд параметров, ни один из которых не является обяза-
тельным. Перечень параметров приведен в табл. 1.3.

Таблица 1.3. Перечень параметров тэга <BODY>

Параметр Назначение

ALINK Определяет цвет активной ссылки

BACKGROUND Указывает на URL-адрес изображения, которое используется
в качестве фонового
BOTTOMMARGIN Устанавливает границу нижнего поля документа в пикселах
BGCOLOR Определяет цвет фона документа
BGPROPERTIES Если установлено значение FIXED, фоновое изображение не про-
кручивается
LEFT/MARGIN Устанавливает границу левого поля документа в пикселах
LINK Определяет цвет еще не просмотренной ссылки
RIGHTMARGIN Устанавливает границу правого поля документа в пикселах
Глава 1. Правила построения HTML-документов 25_

Таблица 1.3 (окончание)

Параметр Назначение

SCROLL Устанавливает наличие или отсутствие полос прокрутки окна

браузера
TEXT Определяет цвет текста
TOPMARGIN Устанавливает границу верхнего поля документа в пикселах
VLINK Определяет цвет уже просмотренной ссылки

Использование параметров BACKGROUND и BGCOLOR, определяющих фон доку-

мента, подробно рассмотрено в главе 3.
Параметр BGPROPERTIES, принимающий единственное значение FIXED, под-
держивается только браузером Microsoft Internet Explorer.
Параметры BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN и TOPMARGIN, задающие
расстояния в пикселах между краями текста и соответствующими краями
окна, а также параметр SCROLL, распознаются только браузером Microsoft
Internet Explorer, начиная с версии 4.0.
Параметры ALINK, LINK, TEXT и VLINK определяют цвета ссылок и текста до-
кумента.
В языке HTML цвета определяются цифрами в шестнадцатеричном коде.
Цветовая система базируется на трех основных цветах — красном, зеленом и
синем — и обозначается RGB. Для каждого цвета задается шестнадцатерич-
ное значение в пределах от 00 до FF, что соответствует диапазону 0—255 в
десятичном исчислении. Затем эти значения объединяются в одно число,
перед которым ставится символ #. Например, число #800080 обозначает
фиолетовый цвет. Чтобы не запоминать совокупности цифр, вместо них
можно пользоваться названиями цветов, которые приводятся в приложении
П2. Ранние версии браузеров распознавали только названия 16 стандартных
цветов, отмеченных в приложении звездочками. Современные версии брау-
зеров распознают все 140 названий цветов.

Форматирование текста
В данном разделе будут рассмотрены возможности форматирования отдель-
ных символов текста документа.

Тэги уровня блока и последовательные тэги

Некоторые HTML-тэги, которые могут появляться в разделе BODY, назы-
вают тэгами уровня блока (block level), в то время как другие последователь-
26 Часть I. Основы HTML

ньши (inline) тэгами или, называя по-другому, тэгами уровня текста (text
level), хотя такое разделение тэгов по уровням в известной степени условно.
Различие уровней HTML-тэгов заключается в следующем: тэги уровня блока
могут содержать последовательные тэги и другие тэги уровня блока, тогда
как последовательные тэги содержат только данные и другие последователь-
ные тэги. Блоковые тэги описывают более крупные структуры документов,
по сравнению с последовательными тэгами.
По умолчанию тэги этих видов размещаются в тексте описания различным
образом: тэги уровня блока начинаются с новой строки, в то время как по-
следовательные — нет.

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

Для форматирования текста HTML-документов предусмотрена целая группа
тэгов, которую можно условно разделить на тэги логического и физического
форматирования.
Тэги логического форматирования обозначают (своими именами) структурные
типы своих текстовых фрагментов, такие, например, как программный код
(тэг <CODE>), цитата (тэг <CITE>), аббревиатура (тэг <ABBR>) и т. д. (см. опи-
сания этих и других подобных тэгов в следующем разделе). С помощью тэгов
<ЕМ> и <STRONG> можно, например, отметить отдельные фрагменты как выде-
ленные, или сильно выделенные. Заметим, что речь идет о структурной раз-
метке, которая не влияет на конкретное экранное представление фрагмента
браузером. Поэтому такая разметка и называется логической. Фрагменты
с логическим форматированием браузеры отображают на экране определен-
ным образом, заданным по умолчанию. Вид отображения никак не связан
со структурным типом фрагмента (т. е. именем тэга логического форматиро-
вания), но может быть легко переопределен.
Тэги физического форматирования определяют формат отображения ука-
занного в них фрагмента текста в окне браузера (согласно предпочтениям
автора документа). Например, для отображения фрагмента курсивом можно
использовать тэг курсива <i>. Этот и другие, часто используемые тэги физи-
ческого форматирования описаны ниже в разделе "Тэги физического форма-
тирования текста"этой главы.
Между разработчиками HTML-документов долгое время шли споры о пре-
имуществах и недостатках того или иного подхода. С выходом специфика-
ции HTML 4.0 эти споры завершились в пользу применения логического
форматирования, поскольку был провозглашен принцип отделения структу-
ры документа от его представления. Действительно, только на базе логиче-
ского форматирования можно гибко управлять представлением документа,
используя современные методы (основанные на таблицах стилей, динамиче-
ски изменяющихся документах и т. д.).
Глава 1. Правила построения HTML-документов 27

Тем не менее, на настоящий момент может свободно использоваться и

физическое форматирование. В спецификации HTML 4.0 некоторые тэги
физического форматирования не рекомендуются для применения, однако,
пока они все еще поддерживаются всеми браузерами. Заметим, что некото-
рые тэги логического форматирования, призванные заменить отдельные
тэги физического форматирования, распознаются не всеми браузерами, что
делает их применение крайне неудобным. Примером может служить логиче-
ский тэг <DEL>, который рекомендуется использовать вместо физического
тэга <STRIKE>.
Рассматриваемые ниже тэги относятся к тэгам уровня текста, т. е. призваны,
в основном, размечать небольшие группы символов. Некоторые тэги могут
задавать разметку и на уровне блока.

Тэги логического форматирования текста

Тэг <ABBR>
Тэг <ABBR> отмечает свой текст как аббревиатуру (ABBReviation). Несмотря
на то, что этот тэг включен в спецификацию HTML 4.0, он до настоящего
времени не поддерживается ни одним браузером.

Тэг <ACRONYM>
Тэг <ACRONYM>. Так же, как и тэг <ABBR>, используется для отметки аббревиа-
тур. Этим тэгом рекомендуется отмечать так называемые акронимы, т. е.
произносимые слова, состоящие из аббревиатур. Тэг <ACRONYM> возможно
в будущем станет использоваться для невизуального отображения элемен-
тов, например при речевом синтезе.
Данный тэг удобно использовать в сочетании с параметром TITLE, в качестве
значения которого можно указать полную форму^записи аббревиатуры. То-
гда визуальные браузеры при наведении курсора на текст, размеченный тэ-
гом <ACRONYM>, будут выдавать полное наименование в виде появляющейся
подсказки.
Заметим, что тэг <ACRONYM> распознается только браузером Microsoft Internet
Explorer. Пример:
<ACRONYM Т1ТЬЕ="Санкт-Петербургский государственный институт
точной механики и оптики">
CII6rHTMO</ACRONYM> — один из ведущих технических вузов Санкт-Петербурга

Тэг <С1ТЕ>
Тэг <CITE> используется для отметки цитат или названий книг и статей,
ссылок на другие источники и т. д. Браузерами такой текст обычно выво-
дится курсивом. Пример:
<С1ТЕ>Невское время</С1ТЕ> является одной из наиболее популярных
городских газет Санкт-Петербурга
28 Часть I. Основы HTML

Тэг <CODE>
Тэг <CODE> отмечает свой текст как небольшой фрагмент программного кода.
Как правило, отображается моноширинным шрифтом. Этот тэг не следует
путать с тэгом <PRE>, являющимся элементом уровня блока, который следует
использовать для отметки больших фрагментов (листингов) кода.
Например:
Пример простейшего оператора языка программирования C:<BR>
<CODE>puts("Hello, World!");</CODE>

Есть еще одно различие в использовании тэгов <CODE> и <PRE>. В коде про-
грамм часто бывает важно наличие нескольких идущих подряд пробелов. Их
отображение будет сохранено только при использовании тэга <PRE>.

Тэг <DEL>
Тэг <DEL> отмечает свой текст как удаленный. Этот элемент полезно исполь-
зовать для отметки изменений, вносимых в документ от версии к версии.
Тэг <DEL> может использоваться как элемент уровня текста и как элемент
уровня блока.
Тэг имеет два необязательных параметра: CITE и DATETIME. Значение пара-
метра CITE должно представлять собой URL-адрес документа, поясняющего
причины удаления данного фрагмента.
Параметр DATETIME указывает дату удаления в формате: YYYY-MM-
DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секун-
ды удаления, а также часовой пояс (Time Zone). Например:
Последней принятой спецификацией языка разметки HTML является версия
<DEL DATETIME=1999-10-29T16:12:53+0.00>3.2</DEL> 4.0

Текст, помеченный тэгом <DEL> обычно отображается перечеркнутым тек-

стом. В спецификации HTML 4.0 этому тэгу отдается предпочтение перед
тэгом физического форматирования <STRIKE> или <s>, обозначающих пере-
черкнутый текст. Однако тэг <DEL> в настоящее время распознается только
браузером Microsoft Internet Explorer.

Тэг <DFN>
Тэг <DFN> отмечает свой текстовый фрагмент как определение (DeFinitioN).
Например, этим тэгом можно отметить какой-либо термин, когда он встре-
чается в тексте в первый раз. Пример:
<DFN>Internet Explorer</DFN> — это популярный Web-браузер

Тэг <DFN> поддерживается только браузером Microsoft Internet Explorer. Ото-

бражается по умолчанию курсивом.
Глава 1. Правила построения HTML-документов 29

Тэг </WS>
Тэг <INS> отмечает свой текст как вставку (INSertion). Этот элемент полез-
но использовать для отметки изменений, вносимых в документ от версии
к версии. Тэг <INS> может использоваться как элемент уровня текста и как
элемент уровня блока.
Тэг имеет два необязательных параметра: CITE и DATETIME. Значение пара-
метра CITE должно представлять собой URL-адрес документа, поясняющего
подробности внесенных дополнений.
Параметр DATETIME указывает дату вставки в формате: YYYY-MM-
DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секун-
ды вставки, а также часовой пояс (Time Zone).
Текст, помеченный тэгом <INS>, обычно отображается подчеркнутым тек-
стом. Тэг <INS> в настоящее время распознается только браузером Microsoft
Internet Explorer.
Тэг <ЕМ>
Тэг <ЕМ> (EMphasis — выделение, подчеркивание) используется для выделе-
ния важных фрагментов текста. Браузеры обычно отображают такой текст
курсивом. Пример:
Пример выделения <ЕМ>отдельных слов</ЕМ> текста

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

форматирования <i>.

Тэг <KBD>
Тэг <кво> отмечает текст как вводимый пользователем с клавиатуры. Обыч-
но отображается моноширинным шрифтом, например:
Чтобы запустить текстовый редактор, напечатайте: <KBD>notepad</KBD>

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

форматирования <тт>.

Тэг <О>
Тэг <Q> отмечает короткие цитаты в строке текста. В отличие от тэга уров-
ня блока <BLOCKQUOTE> при отображении не выполняется отделение разме-
ченного текста пустыми строками. Обычно отображается курсивом. Тэг <о>
(в отличие от <BLOCKQUOTE>) в настоящее время распознается только браузе-
ром Microsoft Internet Explorer.
Тэг имеет параметр CITE, в качестве значения которого можно указать ис-
точник цитаты.
Тэг <SAMP>
Тэг <SAMP> отмечает текст как образец (SAMPle). Обычное использование
этого тэга — отметка текста, выдаваемого программами (sample output). Ис-
30 Часть I. Основы HTML

пользуется также для выделения нескольких символов моноширинным

шрифтом.
Применение данного тэга предпочтительнее применения тэга физического
форматирования <тт>. Например:
В результате работы программы будет напечатано: <SAMP>Hello, World!</SAMP>.

Тэг <STRONG>
, Тэг <STRONG>, как правило, используется для выделения важных фрагментов
текста. Браузеры обычно отображают такой текст полужирным шрифтом.
Пример:
Санкт-Петербург расположен в самой восточной оконечности <STRONG><t>MHCKoro
залива</ЗТКОШ> в устье реки <STRONG>HeBbi</STRONG>

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

форматирования <в>. Тэгом <STRONG> обычно размечают более важные фраг-
менты текста, чем те, что размечены тэгом <ЕМ>.

Тэг <VAR>
Тэг <VAR> отмечает имена переменных программ. Обычно такой текст ото-
бражается курсивом. Пример:
Задайте значение переменной <VAR>N</VAR>

Отображение некоторых из примеров, приведенных при описании тэгов

логического форматирования текста, показано на рис. 1.1. На рисунке видно,
как при наведении указателя мыши на текст, отмеченный тэгом <ACRONYM>,
выдается подсказка.

[Link] p,)-™*» 1«.й

m '& :ii -j i
H(,rw Sfri-rn fsvwtetV- -

СП6ППМО - один из ведущих технических вузов Санкт-Петербурга

<т-Петербурге к. ни государственный институт точной
| механики и оптики

Невское время является одной из наиболее популярных городских |>

газет Санкт-Петербурга
|
Пример простейшего оператора языка программирования С: -;••:•

:
Последней принятой спецификацией языка разметки HTML является j^SI
версия 3-й 4.0

Пример выделения отдельных слов текста

Чтобы запустить текстовый редактор, напечатайте: notepad

--;!
Санкт-Петербург расположен в самой восточной оконечности
Финского залива в устье реки Невы
Рис. 1.1. Примеры
форматирования текста
Глава 1. Правила построения HTML-документов 31

Вы, наверное, обратили внимание на то, что некоторые элементы дают оди-
наковый результат. Более того, часть элементов может никак не изменять
представление фрагмента текста на экране. Может возникнуть законный
вопрос: для чего создано такое разнообразие элементов форматирования?
Ответ — в названии этой группы элементов. Они предназначены для рас-
становки логических ударений, выделения логических частей и подчеркива-
ния сути высказываний. Их использование весьма актуально, поскольку,
вероятно, в ближайшем будущем возможности браузеров возрастут, напри-
мер, станет возможен поиск цитат на Web-пространстве, а может быть сле-
дующее поколение браузеров научится читать документы вслух. Кроме того,
авторам документов ничто не мешает уже сегодня, применяя таблицы сти-
лей, задать желаемое отображение для любого из тэгов, переопределив зна-
чения по умолчанию.

Тэги физического форматирования текста

Приведем описание тэгов физического форматирования. Часть из них не
рекомендуется к использованию спецификацией HTML 4.0 по приведенным
выше причинам. Некоторые тэги отменены (deprecate) спецификацией
HTML 4.0, однако они продолжают поддерживаться браузерами.
Тэг <В>
Тэг <в> отображает текст полужирным шрифтом. В большинстве случаев
рекомендуется вместо тэга <в> использовать тэг логического форматирова-
ния <STRONG>. Например:
Это <В>полужирный</В> шрифт.

Это полужирный шрифт.

Вьщеление курсивом

ЭТО моноширинный Шрифт.

Пример подчеркивания текста.

Пример зачеркнутого текста.

Шрифт большего размера.

Шрифт меньшего размера.

Пример шрифта для „„.„д.,) индекса.

Пример шрифта для вер3™" индекса. Рис. 1.2. Примеры физического

форматирования текста
(браузером Netscape)
32 Часть I. Основы HTML

Тэг </>
Тэг <i> отображает текст курсивом. Для большинства случаев вместо этого
тэга рекомендуется использовать тэги <ЕМ>, <DFN>, <VAR> или <CITE>, посколь-
ку последние лучше отражают назначение выделяемого текста. Например:
Выделение <1>курсивом</1>

Тэг <ТТ>
Тэг <тт> отображает текст моноширинным шрифтом. Для большинства слу-
чаев вместо этого тэга лучше использовать тэги <CODE>, <SAMP> или <KBD>.
Пример:
Это <ТТ>моноширинньй</ТТ> шрифт.

ТЭГ <U>
Тэг <и> отображает текст подчеркнутым. Отмененный тэг. Вместо него ре-
комендуется использовать тэги <STRONG> или <CITE>. Например:
Пример <и>подчеркивания</и> текста.

Тэги <STRIKE> и <S>

Тэги <STRIKE> и <s> отображают текст, перечеркнутый горизонтальной ли-
нией. Отмененный тэг. Вместо него следует использовать тэг <DEL>. Например:
Пример <ЗТН1КЕ>зачеркнутого</ЗТК1КЕ> текста.

В настоящее время тэг <DEL> поддерживается не всеми браузерами, поэтому

пока рекомендуется использовать <DEL> в сочетании с тэгом <STRIKE>.
А именно, внутрь тэга-контейнера <DEL> можно вложить пару тэгов
<STRIKE>...</STRIKE>.

Тэг <BIG>
Тэг <BIG> выводит текст шрифтом большего (чем непомеченная часть текста)
размера. Вместо данного элемента лучше использовать <STRONG> или тэги
заголовков, например, <нз>. Большинство браузеров поддерживают вложен-
ные тэги <BIG>, однако использовать такой подход не рекомендуется. На-
пример:
Шрифт <В1С>большего</В16> размера.

Тэг <SMALL>
Тэг <SMALL> выводит текст шрифтом меньшего размера. Поскольку в HTML
нет тэга, противоположного по действию тэгу <ЕМ>, то для этих целей можно
применять тэг <SMALL>. Большинство браузеров поддерживают вложенные
тэги <SMALL>, однако использовать такой подход не рекомендуется. Например:
Шрифт <ЗМАЬЬ>меньшего</ЗМАЬЬ> размера.
Глава 1. Правила построения HTML-документов 33

Тэг <SUB>
Тэг <зив> сдвигает текст ниже уровня строки и выводит его (если возможно)
шрифтом меньшего размера. Удобно использовать для математических ин-
дексов. Например:
Пример шрифта для <3ив>нижнего</3ив> индекса.

Тэг <SUP>
Тэг <SUP> сдвигает текст выше уровня строки и выводит его (если возможно)
шрифтом меньшего размера. Удобно использовать для задания степеней чи-
сел в математике. Например:
Пример шрифта для <ЗиР>верхнего</зиР> индекса.

Тэг <BLINK>
Тэг <BLINK> отображает мигающий текст. Этот тэг не входит в специфика-
цию HTML и поддерживается только браузером Netscape. Опытные разра-
ботчики крайне редко прибегают к использованию этого тэга, поскольку
наличие на странице мигающих символов раздражает многих пользователей.
Тэг <SPAN>
Тэг-контейнер <SPAN> является аналогом тэга уровня блока <DIV>. Может
использоваться в тех случаях, когда требуется отметить фрагмент текста для
задания его свойств, и при этом не удается использовать никакой другой
структурный тэг форматирования.
Браузер Microsoft Internet Explorer дополнительно разрешает использование
следующих параметров тэга: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание
параметров можно найти во второй части книги.

Это полужирный шрифт

Это курсив.

А здесь текст полужирный и курсивный Рис. 1.3. Использование

вложенных тэгов форматирования
И текста

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

2 Зак. 944
34 Часть I. Основы HTML

Это <В>полужирный</В> шрифт.

<Р>
Это <1>курсив</1>.
<р>
А здесь текст <ВХ1>полужирный и курсивный</1х/В>

Тэг <FONT>
Тэг <FONT> указывает параметры шрифта. Он относится к тэгам физического
форматирования уровня текста.
Назначение параметров шрифта непосредственно в тексте документа нару-
шает основную идею разделения содержательной части документа и описа-
ния формы представления документа. Поэтому в спецификации HTML 4.0
данный тэг, а также тэг <BASEFONT> отнесены к отмененным. Их дальнейшее
применение не рекомендуется.
Несмотря на эти грозные предупреждения, видимо, для самых простых до-
кументов физическое форматирование можно считать допустимым. Кроме
того, начинать обучение основам форматирования проще всего именно с
правил непосредственного указания форматов элементов. До стилевого
оформления начинающий разработчик должен еще дорасти.
Тэг <FONT> относится к последовательным элементам, поэтому не может
включать в себя элементы уровня блока, например, <р> или <TABLE>.
Для тэга могут задаваться следующие параметры: FACE, SIZE и COLOR. Заме-
тим, что браузер Netscape допускает также использование двух дополни-
тельных параметров: POINT-SIZE и WEIGHT, описание которых опускаем.
П FACE
Параметр FACE служит для указания типа шрифта, которым программа
просмотра пользователя будет выводить текст (если такой шрифт имеется
на компьютере). Значением данного параметра служит название шрифта,
которое должно в точности совпадать с названием шрифта, имеющего у
пользователя. Если такого шрифта не будет найдено, то данное указание
будет проигнорировано и будет использован шрифт, установленный по
умолчанию.
Можно указать как один, так и несколько названий шрифтов, разделяя
их запятыми. Это весьма полезное свойство, так как в разных системах
могут быть почти идентичные шрифты, называющиеся по-разному.
Другим важным качеством является задание предпочтения использования
шрифтов. Список шрифтов просматривается слева направо. Если на
компьютере пользователя нет шрифта, указанного в списке первым, то
делается попытка найти следующий шрифт и т. д.
Приведем пример использования параметра FACE:
<HTML>
<HEAD>
Глава 1. Правила построения HTML-документов 35

<Т1ТЬЕ>Назначение шрифтов</Т1ТЬЕ>
</HEAD>
<BODY>
Текст, записанный шрифтом по умолчанию.
<BR>
<FONT FACE="Verdana", "Arial", "Helvetica">
Пример задания названия шрифта.
</FONT>
</BODY>
</HTML>

На рис. 1.4 показано отображение примера браузером Netscape. В примере

в качестве предпочитаемого указывается шрифт Verdana, при его отсутст-
вии будет использован шрифт Arial и т. д.

Текст, записанный шрифтом по умолчанию.

Пример задания названия шрифта.

Рис. 1.4. Отображение примера

браузером Netscape

SIZE
Этот параметр служит для указания размеров шрифта в условных едини-
цах от 1 до 7. Конкретный размер шрифта зависит от используемой про-
граммы просмотра. Принято считать, что размер "нормального" шрифта
соответствует значению 3.
Настройки размеров шрифта, используемых по умолчанию, а также ве-
личины абсолютного изменения размеров шрифта, зависят от браузеров.
На рис. 1.5 показано окно настройки браузера Netscape, в котором зада-
ются шрифты, используемые по умолчанию.
Размер шрифта указывается как абсолютной величиной (sizE=2), так и
относительной (SIZE=+I). Последний способ часто используется в сочета-
нии с заданием базового размера шрифта с помощью тэга <BASEFONT>.

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

Приведем пример, в котором использованы различные способы назначе-

ния размеров шрифтов. Отображение примера показано на рис. 1.6.
36 Часть I. Основы HTML

I?! Compbsei '

;
| Я ||
;
.
| '
:
;:
:
:
;•. .".'Г- ,
'1 !!|rt;
'.'::^

[^.fLJ Г.агеа^ .j.

Рис. 1.5. Окно настройки параметров шрифтов браузера Netscape

Шрифт размера 2
Шрифт размера 3
Шрифт размера 4
Шрифт размера 5
Шрифт размера 6
Шрифт размера 7
Рис. 1.6. Назначение
размеров шрифтов

<HTML>
<HEAD>
<Т1ТЬЕ>Назначение размеров шрифтов</Т1ТЬЕ>
</HEAD>
<BODY>
<FONT 31гЕ=1>Шрифт размера 1</FONTXBR>
<FONT 31гЕ=-1>Шрифт размера 2</FONTXBR>
<FONT 31гЕ=3>Шрифт размера 3</FONTXBR>
<FONT 31гЕ=4>Шрифт размера 4</FONTXBR>
Глава 1. Правила построения HTML-документов 37

<FONT 312Е=5>Шрифт размера 5</FONTXBR>

<FONT 312Е=+3>Шрифт размера 6</FONTXBR>
<FONT 31гЕ=7>Шрифт размера 7</FONTXBR>
</BODY>
</HTML>

П COLOR
Этот параметр устанавливает цвет шрифта, который может задаваться
с помощью стандартных имен или в формате #RRGGBB. Приведем при-
мер документа с разноцветным текстом.
<HTML>
<HEAD>
<Т1ТЬЕ>Выбор цвета шрифта</Т1ТЬЕ>
</HEAD>
<BODY>
<FONT COLOR=green>TeKCT зеленого цвета</РОЫТХВК>
<FONT COLOR=#FFOOOO>TeKCT красного цвета</ГОМТХВК>
</BODY>
</HTML>

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

( Примечание )
Тэг <BASEFONT> может появляться также и в разделе <HEAD> документа.
Заметим, что для тэга <BASEFONT> не существует закрывающего тэга.
В качестве параметров могут использоваться точно такие же параметры, что
и для тэга <FONT>, а именно: FACE, SIZE и COLOR. Назначение и правила запи-
си параметров аналогичны.

( Примечание j
Браузер Netscape не допускает применение параметра FACE тэга <BASEFONT>.

Приведем пример использования тэга <BASEFONT>.

<HTML>
<HEAD>
38 Часть I. Основы HTML

<Т1ТЬЕ>Назначение размеров шрифтов</Т1ТЬЕ>

</HEAD>
<BODY>
Текст, записанный шрифтом по умолчанию.

<BASEFONT SIZE=2>
<Р>
Шрифт размера 2 .

<BASEFONT SIZE=4>

Шрифт размера 4 .

<TABLE BORDER=1>
<TR>
<ТО>Текст внутри ячейки таблицы</ТО>
</TR>
</TABLE>

Текст после таблицы

</BODY>
</HTML>

В приведенном примере дважды переопределяется размер шрифта, исполь-

зуемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем уста-
навливается равным 2, далее — 4. Обратите внимание на отображение дан-
ного примера (рис. 1.7). Видно, что для таблиц назначение тэга <BASEFONT>
не действует. Это характерно для многих браузеров, хотя формально нару-
шает идею применения тэга.

Ё*' .View L№ },'<i«[Link] ' Help :;

Текст, записанный шрифтом по умолчанию.

Шрифт размера 2.

Шрифт размера 4.

|Текст внутри ячейки таблицы;

Текст после таблицы

Рис. 1.7. Отображение примера
С ТЭГОМ <BASEFONT>
(браузером Netscape)
Глава 1. Правила построения HTML-документов 39

Форматирование HTML-документа
Разделение на абзацы
Любые тексты, будь то школьное сочинение, заметка в газете или техниче-
ское описание устройства имеют определенную структуру. Элементами та-
кой структуры являются заголовки, подзаголовки, таблицы, абзацы и др.
Одним из первых правил составления практически любых документов явля-
ется разбиение его текста на отдельные абзацы, выражающие законченную
мысль. HTML-документы не являются исключением из этого правила. При
создании документов с помощью текстовых редакторов разбиение на абзацы
выполняется вводом символа перевода строки. Большинство редакторов
реализует это при нажатии клавиши <Enter>. В HTML-документах символы
перевода строки не приводят к образованию нового абзаца.
Язык HTML предполагает, что автор документа ничего не знает о компью-
тере своего читателя. Читатель вправе установить любой размер окна и
пользоваться любым из имеющихся у него шрифтов. Это означает, что место
переноса в строке определяется только программой просмотра и установка-
ми конечного пользователя. Поскольку символы перевода строки ориги-
нального документа игнорируются, то текст, отлично смотревшийся в окне
редактора автора документа, может превратиться в сплошной неудобочитае-
мый текст в окне программы просмотра.
Избежать этой неприятности позволяет применение специального тэга раз-
деления на абзацы <р>. Перед началом каждого абзаца текста следует помес-
тить тэг <Р>. Закрывающий тэг </р> не обязателен. Браузеры обычно отде-
ляют абзацы друг от друга пустой строкой.

Примечание
Браузеры обычно интерпретируют несколько стоящих подряд тэгов абзаца <Р>
как один. То же самое относится и к тэгу перевода строки <BR>. Поэтому соз-
дать несколько пустых строк при помощи этих тэгов не удается.

Тэг <Р> может задаваться с параметром горизонтального выравнивания

ALIGN. Возможные значения параметра приведены в табл. 1.4. По умолчанию
выполняется выравнивание по левому краю.

Таблица 1.4. Значения параметра ALIGN

Значение параметра ALIGN Действие

LEFT Выравнивание текста по левой границе окна брау-

зера
CENTER Выравнивание по центру окна браузера
40_ Часть I. Основы HTML

Таблица 1.4 (окончание)

Значение параметра ALIGN Действие

RIGHT Выравнивание по правой границе окна браузера

JUSTIFY Выравнивание по ширине (по двум сторонам)

Заметим, что выравнивание по ширине (ALIGN = JUSTIFY) долгое время не

поддерживалось браузерами. Во многих описаниях языка HTML для значе-
ний параметра выравнивания указывается только три варианта (LEFT, CENTER
и RIGHT). В настоящее время все популярные браузеры умеют выполнять вы-
равнивание по ширине. Некоторые проблемы создания документов с вы-
равниванием по ширине рассмотрены также в главе 8.

( Примечание ^
Отсутствие выравнивания по ширине в настоящее время кажется удивитель-
ным. Этот режим применяется очень часто для печатных изданий. Достаточно
взять в руки любую газету или внимательно присмотреться к абзацам данной
книги— все они выровнены по ширине. Однако для HTML-документов до по-
следнего времени выравнивание по ширине не допускалось. Всего лишь пару
лет назад ни один браузер не имел такого режима. Так, читатели, до сих пор
использующие браузер Netscape версии 3.x, не смогут увидеть ровные строчки
в документе. Можно попытаться предугадать, какие же еще возможности по-
явятся в будущем у браузеров, сравнив возможности мощных текстовых редак-
торов и современных браузеров. Примером не реализованных пока возмож-
ностей может являться автоматическая расстановка переносов и пр.

Перевод строки
При отображении текстовых документов в браузере место переноса строки в
пределах абзаца определяется автоматически в зависимости от размера
шрифтов и размера окна просмотра. Перенос строки может осуществляться
только по символам-разделителям слов (например, пробелам). Иногда в до-
кументах требуется задать принудительный перевод строки, реализующийся
независимо от параметров настроек браузера. Для этого служит тэг при-
нудительного перевода строки <вк>, который не имеет соответствующего
закрывающего тэга. Включение тэга <вк> в текст документа обеспечит раз-
мещение последующего текста с начала новой строки. Например, такой
подход может использоваться для создания структур типа списков без ис-
пользования специальных тэгов разметки списка. Или, например, без дан-
ного тэга не обойтись для отображения стихотворений и т. п.
Приведем пример использования принудительного перевода строки (рис. 1.8):
<HTML>
<HEAD>
<Т1ТЬЕ>Использование принудительного перевода CTpoKM</TITLE>
Глава 1. Правила построения HTML-документов 41

</HEAD>
<BODY>
Над омраченным Петроградом<ВК>
Дышал ноябрь осенним хладом. <BR>
Плеская шумною волной<ВК>
В края своей ограды стройной, <BR>
Нева металась, как больной<ВЮ>
В своей постеле беспокойной.

<С1ТЕ>А. С. Пушкин. Медный всадник</С1ТЕ>

</BODY>
</HTML>

МШ@ШшШШ
fit &M У,,-,. j,,, С»"»-,.'»'** HHll

и
Над омраченным Петроградом
Дышал ноябрь осенним хладом.
Плеская шумною волной
В края своей ограды стройной,
Нева металась, как больной
В своей постеле беспокойной.
Рис. 1.8. Тэг <BR>
А.С.Пушхия. Медный есадних можно использовать
для принудительного перевода
ж i.,::.4;i^rt::':-v^:;
строки

В отличие от тэга абзаца <р> при использовании тэга <вк> не будет образо-
вана пустая строка.
Использование тэга <BR> требует осторожности — возможна ситуация, когда
браузер уже сделал перевод строки за одно-два слова до того, как встретил
ваш тэг <BR>. Это бывает в случае, если ширина окна программы просмотра
читателя меньше, чем тот же параметр программы, с помощью которой вы
тестировали ваш документ. При этом может получиться, что в строке посре-
ди абзаца останется только одно слово, нарушая тем самым красоту компо-
новки документа.

С Примечание ^
При использовании тэга <BR> для разбивки текста, обтекающего изображения
или таблицы, можно задавать параметр CLEAR, прекращающий обтекание текста.
Об этом можно прочитать в главах 3 и 4.

Тэги <NOBR> и <WBR>

Бывают ситуации, когда требуется выполнить операцию противоположного
назначения — запретить перевод строки. Для этого существует тэг-контей-
 Часть I. Основы HTML

нер <NOBR>. Текст, размеченный этим тэгом, будет гарантированно распола-

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

Примечание
Для обеспечения неразрывности текста, располагаемого в ячейках таблиц, су-
ществует специальный параметр NOWRAP тэга <то>. Об этом можно узнать
в главе 4.
Размечая текст с помощью тэга неразрывной строки <NOBR> можно получить
очень длинные строки. Чтобы этого избежать, можно указать браузеру чита-
теля место возможного перевода строки, что будет выполнено только при
необходимости (так называемый "мягкий" перевод строки). Это можно осу-
ществить, поставив в нужном месте текста тэг <WBR> (Word BReak), который
так же, как и тэг <BR>, не нуждается в закрывающем тэге.

( Примечание ^
Тэг <WBR> вообще не поддерживается браузером Netscape. Браузер Microsoft
Internet Explorer распознает этот тэг только в тексте, размеченном тэгами
<NOBR>.

Заголовки внутри HTML-документа

Наряду с названием всего документа, на Web-странице могут использоваться
заголовки для отдельных частей документа. Эти заголовки могут иметь
шесть различных уровней (размеров) и представляют собой фрагменты тек-
ста, которые выделяются на экране при отображении страницы браузером.
Для разметки заголовков используются тэги <HI>, <Н2>, <нз>, <Н4>, <нз>
и <нб>. Эти тэги требуют соответствующего закрывающего тэга. Заголовок
с номером 1 является самым крупным (заголовок верхнего уровня), а с но-
мером 6 — самым мелким. Тэги заголовка являются элементами уровня
блока, поэтому с помощью них нельзя размечать отдельные слова текста для
увеличения их размера. При использовании тэгов заголовков осуществляет-
ся вставка пустой строки до и после заголовка, поэтому тэгов абзаца или
перевода строки здесь не требуется.
Тэги заголовков могут задаваться с параметром горизонтального выравнива-
ния ALIGN. Возможные значения параметра совпадают с параметрами вырав-
нивания тэга абзаца <р> (см. табл. 1.4).
Пример использования заголовков разного уровня с различным выравнива-
нием (рис. 1.9):
<HTML>
<HEAD>
Глава 1. Правила построения HTML-документов 43
<Т1ТЬЕ>Примеры заголовков</Т1ТЬЕ>
</HEAD>
<BODY>
<Н1>Заголовок размера 1</Н1>
<Н2>Заголовок размера 2</Н2>
<НЗ АЫСЫ=СЕЫТЕК>Заголовок размера 3</НЗ>
<Н4 АЫСЫ=К1СНТ>Заголовок размера 4</Н4>
<Н5>Заголовок размера 5</Н5>
<Нб>Заголовок размера 6</Н6>
Основной текст документа
</BODY>
</HTML>

• Примеры заголовков - Netscape Г~Г I

Заголовок размера 1
Заголовок размера 2
Заголовок размера 3
Заголовок размера 4

Заголовок размера 5

Заготовок римфа С

Основной текст документа

Рис. 1 .9. Отображение заголовков различного размера

Горизонтальные линии
Другим методом разделения документа на части является проведение гори-
зонтальных линий. Они визуально подчеркивают законченность той или
иной области страницы. Сейчас часто используют рельефную, вдавленную
линию, чтобы обозначить "объемность" документа.
Тэг <HR> позволяет провести рельефную горизонтальную линию в окне
большинства программ просмотра. Этот тэг не является контейнером, по-
этому не требует закрывающего тэга. До и после линии автоматически
вставляется пустая строка. Параметры тэга <нк> представлены в табл. 1.5.
44_ Часть I. Основы HTML

Таблица 1.5. Параметры тэга <HR>

Параметр тэга <нк> Назначение

ALIGN Выравнивает по краю или центру; имеет значения LEFT,

CENTER, RIGHT
WIDTH Устанавливает длину линии в пикселах или процентах от
ширины окна браузера
SIZE Устанавливает толщину линии в пикселах
NOSHADE Отменяет рельефность линии
COLOR Указывает цвет линии. Используется формат RGB или
стандартное имя

Пример:
<HR ALIGN=CENTER WIDTH=50% NOSHADE>

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

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

( Примечание )
Браузер Netscape не позволяет использовать параметр COLOR тэга <нк>.

Использование
предварительно отформатированного текста
Как видно в приведенных выше разделах, для разбивки текста по абзацам и
обеспечения принудительного перевода строки следует пользоваться специ-
альными тэгами. Однако бывают случаи, когда в HTML-документ необхо-
димо включить текст, уже имеющий форматирование, выполненное тради-
ционным способом при помощи символов перевода строки, необходимого
количества пробелов, символов табуляции и т. д. Для решения таких задач
предусмотрен специальный тэг-контейнер <PRE>, определяющий предвари-
тельно форматированный ^реформатированный) текст.
Текст, размеченный тэгом <PRE>, будет отображаться в таком виде, как он
выглядит в обычном текстовом редакторе. Для отображения всегда будет
использоваться моноширинный шрифт. При этом вы сможете в большей
степени контролировать вывод документа программой просмотра, правда, за
счет некоторой потери в гибкости.
Одним из вариантов использования этого тэга являются таблицы, построен-
ные без применения специальных тэгов разметки таблиц. Другим важным
Глава 1. Правила построения HTML-документов 45

применением является вывод на экран больших блоков программного кода

(Java, C++ и т. п.), не позволяющий браузеру переформатировать их.
Текст внутри контейнера <PRE> может содержать элементы форматирования
уровня текста, кроме следующих: <IMG>, <OBJECT>, <APPLET>, <BIG>, <SMALL>,
<SUB>, <SUP>, <FONT>, <BASEFONT>. Недопустимо внутри преформатированного
текста задавать элементы форматирования уровня блока, например, тэги
заголовков. Тэг абзаца по логике вещей также не должен встречаться внутри
преформатированного текста, однако если встречается, то будет реализовы-
вать переход на новую строку (без образования пустой).

( Примечание ~~)
Тэг <PRE> имеет необязательный параметр WIDTH, назначение которого — ука-
зывать браузеру максимальную длину строки преформатированного текста.
В зависимости от этого значения браузер мог бы подобрать нужный шрифт
и/или отступ для оптимального отображения преформатированного текста.
В качестве значения по умолчанию предлагалось использовать 80. Другими ре-
комендованными значениями являются 40 и 132. Заметим, что читателям,
имеющим значительный опыт работы со средствами вычислительной техники,
эти числа говорят о многом. На деле же современные браузеры игнорируют
значение параметра WIDTH.

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

К НИМ ОТНОСЯТСЯ ТЭГИ <ХМР>, <PLAINTEXT> И <LISTING>. Все ТрИ уПОМЯНуТЫХ
тэга в спецификации HTML 4.0 отмечены как устаревшие. Это означает, что
в будущих версиях браузеры прекратят их поддержку. Вместо этих тэгов ре-
комендуется использовать тэг <PRE>.

Тэг <DIV>
Тэг-контейнер <DIV> является элементом уровня блока, служащим для вы-
деления фрагмента документа. Целью этого выделения является управление
параметрами данного фрагмента, которое обычно выполняется с помощью
назначения стилей. Приведем пример:
<DIV STYLE="color: green">
(Фрагмент документа)

В этом примере фрагмент HTML-документа обрамляется тэгами <DIV> и

</DIV> для задания некоторых его свойств. В данном случае все текстовые
элементы выделенного фрагмента будут отображаться зеленым (green) цве-
том. Аналогом тэга <DIV> уровня текста является элемент <SPAN>.
Заметим, что непосредственное назначение стилевых свойств отдельного
фрагмента так, как это сделано в примере, использовать не желательно в
соответствии с концепцией разделения структуры документа и его представ-
46_ Часть I, Основы HTML

ления. Следует использовать таблицы стилей, речь о которых пойдет во вто-

рой части книги.

Тэг <CENTER>
Тэг-контейнер <CENTER> предназначен для горизонтального выравнивания
всех элементов посередине окна просмотра браузера. Он имеет уровень блока
и его полезно использовать для центрирования таких элементов, как, на-
пример, таблиц, так как они не могут быть центрированы назначением
ALIGN=CENTER ТЭГЗ <TABLE>.

По существу тэг <CENTER> является краткой формой следующей записи: <DIV

ALIGN=CENTER>. Дальнейшее использование тэга <CENTER> по причинам, отме-
ченным в предыдущем разделе, также нежелательно.

Включение комментариев в документ

В HTML-документ можно включать комментарии, которые не будут видны
читателю. Они могут состоять из произвольного числа строк и должны на-
чинаться тэгом <!— и заканчиваться тэгом —>. Все, что заключено внутри
этих тэгов, при просмотре страницы не будет отображаться на экране.
Комментарии обычно используются авторами документа для заметок, пред-
назначенных только для собственного использования. Заметим, что текст
комментариев не отображается на экране браузера, однако передается вместе
с документом и вполне может быть просмотрен читателями. Большинство
браузеров предоставляют возможность просмотра исходного кода документа.
Поэтому не следует включать в комментарии информацию, не предназначен-
ную для чужих глаз. Это замечание может оказаться важным для разработ-
чиков-программистов, привыкших писать комментарии в своих программах.
Дело в том, что комментарии в программах, написанных на большинстве
языков программирования, не попадают в результирующий код программы,
получаемый в результате ее компиляции. Исходные же коды программ
обычно хранятся только у авторов. Для языка же HTML нет понятия ком-
пиляции.
Комментарии в HTML применяются также для того, чтобы "спрятать" от
браузера скрипты в случае, если он не в состоянии распознать их. Этот во-
прос освещается во второй части книги.
Существует еще один тэг-контейнер для записи комментариев — <COMMENT>.
Этот тэг используется редко, поскольку поддерживается только браузером
Microsoft Internet Explorer. Некоторые проблемы использования этого тэга
рассматриваются в главе 8.

Тэг <BLOCKQUOTE>
Бывают случаи, когда в текст HTML-документа необходимо включить ка-
кую-либо длинную цитату. Для выделения цитат из основного текста суще-
Глава 1. Правила построения HTML-документов 47

ствует тэг <BLOCKQUOTE>. Он является контейнером и может содержать любые

тэги форматирования.
В отличие от тэга <Q>, предназначенного для выделения коротких цитат в
строке текста, <BLOCKQUOTE> является тэгом уровня блока. Текст, размечен-
ный данным тэгом, при отображении отделяется от основного текста пус-
тыми строчками и, как правило, выводится с небольшим отступом вправо.
Пример отображения длинной цитаты приведен на рис. 1.10.

с Примечание
Иногда полезно знать не только назначение тэга, но и принципы его реализа-
ции браузерами. Так, по существу единственное действие, которое выполняют
браузеры, встретив тэг <BLOCKQUOTE>, заключается в отделении текста пусты-
ми строками и сдвиге его вправо. Эти сведения позволяют использовать дан-
ный элемент не только по прямому назначению, но и просто для тех случаев,
когда требуется отобразить фрагмент текста с отступом. Конечно, это нарушает
логику структурирования документа, однако на деле такой подход часто приме-
няется. В частности, редактор HTML-документов Netscape Composer, входящий
в состав пакета Netscape Communicator, имеет в панели инструментов кнопки
"увеличить отступ" и "уменьшить отступ". Каждое нажатие кнопки увеличения
отступа реализуется путем обрамления выделенного текста парой тэгов
<BLOCKQUOTE> и </BLOCKQUOTE>. Просматривая в дальнейшем исходный HTML-
код созданного таким путем документа, можно долго вспоминать, что же вы там
цитировали.

Кибернетика - реакционная лженаука, возникшая в США после второй мировой войны и

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

По существу своему кибернетика направлена против материалистической диалектики,

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

Кроткий философский словарь, 1954

Рис. 1.10. Так цитата выглядит в окне браузера Netscape

_48 Часть I. Основы HTML

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

Специальные символы
Некоторые специальные символы не входят в базовую часть таблицы кодов
ASCII. К ним относятся буквы алфавитов части европейских языков, мате-
матические и некоторые другие символы. Некоторые символы, непосредст-
венно введенные в HTML-документ, будут интерпретированы не так, как
задумал автор. К ним относятся символы "<" и ">", обычно используемые
для указания тэгов языка.
В таких случаях можно вводить нужные символы в ваш HTML-документ
при помощи специальных кодов. Эти коды состоят из символа амперсанда
(&) и следующим за ним именем символа или его десятичным или шестнад-
цатеричным значением. Заканчиваться специальный символ должен знаком
"точка с запятой".
В спецификации HTML приводятся целые таблицы со специальными сим-
волами и их значениями. На сегодняшний день браузеры распознают лишь
небольшое количество специальных символов, поэтому приводить эти таб-
лицы полностью излишне. Отметим лишь некоторые символы, употребле-
ние которых актуально и обеспечено поддержкой браузеров (табл. 1.6).

Таблица 1.6. Специальные символы HTML

Запись специального символа Назначение

&lt Знак "меньше"

&gt Знак "больше"
&nbsp Неразрывный пробел
&сору Знак copyright
&amp Амперсанд
&quot Знак "кавычки"
Глава 1. Правила построения HTML-документов 49

Все символами могут быть также заданы своими кодами. Например, символ
неразрывного пробела имеет код 160. Он может записываться в десятичном
виде как &#160;.

Ссылки на другие документы и файлы

Одним из важнейших понятий для HTML-документов являются ссылки.
Само название — HTML, язык разметки гипертекста, указывает на принцип
организации таких документов. Вы, наверное, уже обратили внимание на
ссылки, часто использующиеся в этой книге. Они выполняют ту же роль,
что и ссылки на Web-странице, хотя и далеки от последних с точки зрения
технического совершенства. Они относят вас к разделу книги, который мо-
жет быть полезен именно в данный момент. Без этих ссылок вам бы при-
шлось долго перелистывать книгу в поисках нужной информации.
Значение ссылок в мире Интернета трудно переоценить. Читая книгу, вы
имеете ее всегда под рукой. Работая в Web-пространстве, вы часто понятия
не имеете, где находится та или иная нужная вам страница. Поэтому ссылки
здесь являются единственной возможностью перейти от одного документа
к другому.
Гипертекстовый документ — это документ, содержащий ссылки на другие
документы, позволяющие при помощи нажатия кнопки мыши быстро пере-
мещаться от одного документа к другому. Часто подобные ссылки можно
увидеть и в файлах помощи современных программных продуктов. За осно-
ву гипертекста взят принцип организации энциклопедических словарей,
в которых во многих статьях есть ссылки на другие.
Существует много типов мультимедийных объектов, которые могут быть
размещены на Web-странице. В современных гипертекстовых документах
в дополнение к самому тексту часто используют разнообразную графику,
видео- и аудиообъекты, а в качестве ссылок часто применяют изображения.

Организация ссылок
Ссылка состоит из двух частей. Первая из них — это то, что вы видите на
Web-странице; она называется указатель ссылки (anchor). Вторая часть,
дающая инструкцию браузеру, называется адресной частью ссылки (URL-
адрес). Когда вы щелкаете мышью по указателю ссылки, браузер загружает
документ, адрес которого дается URL-адресом. Ниже рассмотрены правила
построения отдельных элементов ссылок.
Указателем ссылки может быть слово, группа слов или изображение. Внеш-
ний вид ссылки зависит от его типа, способов создания и установок про-
граммы просмотра читателя. Указатели бывают двух типов — текстовые и
графические.
50 _ Часть I. Основы HTML

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

выделенных на экране подчеркиванием. Цвет текстового указателя может
регулироваться автором и установками программы просмотра.
Приведем пример записи для текстового указателя ссылки:
<А HREF="[Link]">3TOT текст является указателем сскшки</А>
В качестве ссылки можно использовать графическое изображение. По
принципу действия графические ссылки ничем не отличаются от текстовых.
Они не подчеркиваются и не выделяются цветом, а для их выделения брау-
зеры обычно вокруг такого изображения рисуют рамку. Пример графиче-
ского указателя ссылки:
<А HREF="[Link]"><IMG SRC="[Link] "
Более подробно о графических указателях рассказывается в главе 3. Специ-
альные возможности создания изображений, фрагменты которого указывают
на различные документы, подробно описываются в главе 6.
Второй частью ссылки является URL-адрес. Это не что иное, как адрес
Web-страницы, которая будет загружена при щелчке мышью на указателе.
Указание адреса может быть относительным или абсолютным.
Если в URL-адресе не указывается полный путь к файлу, то такая ссылка
называется относительной. В этом случае определение местоположения
файлов выполняется с учетом местоположения документа, в котором имеет-
ся такая ссылка. Например, если браузер загрузил страницу, находящуюся
по адресу [Link] то относительный указатель /picture
подразумевает адрес [Link] т. е. подкаталог,
расположенный на той же машине.
Примечание
Относительный указатель работает по-другому, если в HTML-документе ис-
пользуется тэг <BASE>. Ниже в данной главе показывается, что в этом случае
указатель дает адрес относительно URL-адреса, определенного в тэге <BASE>.

Относительные указатели удобны в использовании. Намного проще вста-

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

Правила записи ссылок

Для организации ссылки необходимо сообщить браузеру, что является ука-
зателем ссылки, а также указать адрес документа, на который вы ссылаетесь.
Оба действия выполняются при помощи тэга <А>.
Глава 1. Правила построения HTML-документов 51

Тэг <А>
Тэг <А> имеет единственный параметр HREF, значением которого является
URL-адрес. Указатель может быть как относительным, так и абсолютным,
например, [Link] Этот тэг является контей-
нером, поэтому необходимо поставить закрывающий тэг </А>:
<А НКЕГ=ШЪ-адрес>Текстовый указатель ссылки</А>

Указатель ссылки может быть относительным или абсолютным. Для облег-

чения работы с относительными указателями ссылок введен тэг <BASE>. Он
располагается в начале документа в разделе HEAD и содержит URL-адрес,
относительно которого в документе построена вся адресация. Это указание
влияет на любой тэг документа, в котором используется относительная ад-
ресация. Если тэг <BASE> отсутствует, то адресация строится относительно
адреса текущего документа.

Внутренние ссылки
Кроме ссылок на другие документы, часто бывает полезно включить ссылки
на разные части текущего документа. Например, большой документ читается
лучше, если он имеет оглавление со ссылками на соответствующие разделы.
Для построения внутренней ссылки сначала нужно создать указатель, опре-
деляющий место назначения. Например, если вы хотите сделать ссылку на
текст определенной главы документа, нужно разместить там указатель и дать
ему имя при помощи параметра NAME тэга <А>. При этом параметр HREF не
используется, и браузер не выделяет содержимое тэга <А>. Например:
<А NAME=chapter_5> </A>

Обратите внимание, что в приведенном примере отсутствует содержимое

тэга <А>. Обычно именно так и делают, поскольку здесь нет необходимости
как-то выделять текст, а требуется лишь указать местоположение.
После того как место назначения определено, можно приступить к созда-
нию ссылки на него. Для этого, вместо указания в параметре HREF адреса
документа, как это делалось ранее, поместим туда имя ссылки с префиксом
#, говорящим о том, что это внутренняя ссылка.
<А HREF="#chapter_5">rViaBa 5</A>

Теперь, если пользователь щелкнет кнопкой мыши на словах "глава 5",

браузер выведет соответствующую часть документа в окне просмотра.

Ссылки на документы различных типов

Когда пользователь щелкает мышью на ссылке, указывающей на другую
Web-страницу, она выводится непосредственно в окне браузера. Если же
ссылка указывает на документ иного типа, программа просмотра принимает
5£ Часть I. Основы HTML

документ и затем решает, что с ним делать дальше. Следующими действия-

ми браузера могут быть:
П Браузер знает этот тип документа и умеет с ним обращаться. Например,
если вы создали ссылку на графический файл формата GIF и пользова-
тель щелкнул мышью на этой ссылке, его программа просмотра очистит
окно и загрузит указанное изображение. В некоторых случаях браузер
может дополнительно использовать подключаемый программный модуль
(plug-in), без которого задача не была бы решена.
В Браузер не распознает тип принятого документа и не знает, что с ним
делать дальше. В этом случае он обратится к вспомогательным програм-
мам, имеющимся на машине пользователя. Если подходящая программа
найдется, браузер запустит ее и передаст ей полученный документ для
обработки. Например, если пользователь щелкнет на ссылке на видео-
файл формата AVI, браузер загрузит файл, найдет программу для демон-
страции AVI-файлов и запустит ее. Видеофайл будет показан в дополни-
тельном небольшом окне.

Ссылки на другие ресурсы Интернета

Web-пространство является лишь частью сети Интернет. Другие ресурсы
начали свое существование задолго до рождения WWW, поэтому накопили
уже много достойной внимания информации и имеют достаточно большую
аудиторию. Поэтому, разрабатывая свою персональную страницу или доку-
мент, вы, возможно, захотите включить ссылки и на другие ресурсы.
Ресурсы Интернета весьма разнообразны по форме и содержанию. Хотя
HTML предполагает возможность создания своих собственных версий этих
ресурсов с помощью механизма обработки данных форм, есть более простые
пути к взаимодействию с системами UseNet, Telnet, FTP, e-mail и другими.
Например, вы можете создать документ с использованием различных тэгов
форм, текстовых элементов и кнопкой для отправки электронного письма
на ваш адрес. Однако будет намного проще для связи указать лишь свой
адрес электронной почты. В этом случае упрощается обновление страницы,
которое не будет связано с изменениями форм. Кроме того, многие браузе-
ры имеют встроенную поддержку некоторых ресурсов, что дает возможность
сократить время на установление связи с ними.
Используя ранее какой-либо ресурс сети, вы, скорее всего, захотите сохра-
нить эту связь. Если у вас уже работает система Gopher с автоматическим
обновлением информации, нет смысла переделывать его под Web-сайт. Легче
создать ссылку на него с вашей новой Web-страницы.
Самой популярной деятельностью в Интернете является обмен электронны-
ми письмами. Пользователей этого ресурса намного больше, чем любого
другого. Причина очень простая: если вы подключены к Интернету, у вас
обязательно есть свой адрес электронной почты. Большинство современных
Глава 1. Правила построения HTML-документов 53

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

интерфейс и просты в использовании.
Если вас интересует отклик читателей на содержание вашего документа, вы
захотите поместить на странице свой адрес электронной почты. Это может
быть также полезно для сообщений о неработающих ссылках и других про-
блемах, связанных с просмотром вашей страницы.
Создание ссылки на электронную почту так же просто, как и на другую
страницу. Для этого вместо URL-адреса следует указать адрес электронной
почты, предварив его словом [Link]
<А HREF="[Link] mo.ги">Присылайте ваши отзывы
и предложения</А>.

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

вашего документа. То же самое можно сказать и о ссылках на другие ресур-
сы Интернета. После щелчка мышью на ссылке на ваш адрес браузер откро-
ет собственное окно для работы с электронной почтой. Интерфейсы могут
быть разными, но большинство программ автоматически вводят в сообще-
ние адрес и имя пользователя и напоминают о необходимости заполнения
строки "Subject".
В заключение приведем пример HTML-кода, в котором используется ряд
тэгов, описанных в данной главе:
<HTML>
<HEAD>
<Т1ТЬЕ>Личная страница Александра Сергеева</Т1ТЬЕ>
</HEAD>
<BODY>
<Н1 ALIGN=CENTER>flo6po пожаловать!</Н1>
<HR>
Основное содержание страницы
<HR>
<ADDRESS>
Последнее обновление выполнено 01 ноября 1999 г.
</ADDRESS>
<А HREF="[Link]
Присылайте ваши отзывы и предложения</А>
</BODY>
</HTML>

В приведенном примере есть ссылка на электронную почту. При наведении

курсора мыши на указатель данной ссылки этот адрес будет виден в нижней
части окна браузера (рис. 1.11).
Ссылки на другие ресурсы Интернета записываются аналогично. Правила
записи приведены в табл. 1.7.
54 Часть I. Основы HTML

I
. «it-
•в

Добро пожаловать!
Основное содержание страницы

Последнее обновление выполнено 01 ноября 1999 г.

Присылайте ваши отзывы и предложения

Рис. 1.11. Отображение документа примера в окне браузера

Таблица 1.7. Ссылки на ресурсы Интернета

Ресурсы Интернета Формат ссылки Пример записи ссылки

Web-страница http: //sitename http: //[Link]/

e-mail mailto : address mailto :me@mysite. com

Newsgroup news : newsgroupname news : news . newusers . questions

FTP ftp: //sitename ftp: / / ftp . mys [Link]/

Gopher gopher: //sitename gopher: //gopher .mysite. com/

WAIS wais: //sitename wais : //wais .mysite . com/

TelNet telnet : //sitename telnet: //bbs. mysite. com/

Прочие тэги
Чтобы полностью охватить весь спектр существующих или использовавших-
ся ранее тэгов языка HTML, в этом разделе лишь упомянем те тэги, описа-
ние которых намеренно не дается на страницах данной книги. В основном
это редко используемые тэги, применение которых в большинстве случаев
ограничивается одним единственным браузером. Тэги такого рода вряд ли
следует рекомендовать к использованию, хотя их разработчики, естественно
будут пропагандировать их, частенько не указывая ограниченности приме-
нения. Возможно, в будущем какие-то из них станут общепринятыми, а мо-
жет быть наоборот, устареют, не приобретя популярности.
Перечисление тэгов в данном разделе преследует единственную цель — от-
разить их существование в указателе, приводимом в конце книги. Тогда чи-
Глава 1. Правила построения HTML-документов 55

татель, выполняя поиск интересующего его тэга по алфавитному указателю,

попадет на данную страницу.
Тэги, распознаваемые только браузером Netscape:
<LAYER>, <ILAYER>, <MULTICOL>, <KEYGEN>, <SPACER>.

Тэги, распознаваемые только браузером Microsoft Internet Explorer:

<FIELDSET>, <LEGEND>, <MARQUEE>.

Тэг, распознаваемый только браузером Mosaic: <SOUND>.

Редко используемые тэги, дальнейшее употребление которых не рекоменду-
ется:
<ISINDEX>, <NEXTID>.

Тэги, актуальность которых крайне мала: <воо>.

 ГЛАВА 2

Списки

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

информации в виде списков. Списки являются одним из наиболее часто
употребляемых форм представления данных как в электронных документах,
так и в печатных. Со списками мы встречаемся практически ежедневно, —
это может быть список необходимых покупок в магазине, учеников в классе
или просто дел, которые необходимо выполнить. Возможность организации
списковых структур имеется во многих текстовых редакторах, в частности,
мощный текстовый процессор Microsoft Word обладает удобными средства-
ми форматирования списков различного вида (возможности создания
HTML-списков при помощи Microsoft Word обсуждаются в главе 8). Приве-
дем ряд случаев, для которых использование списков довольно удобно:
О Объединение фрагментов информации в единую структуру для придания
удобочитаемого вида.
П Описание сложных пошаговых процессов.
П Расположение информации в стиле оглавления, пункты которого указы-
вают на соответствующие разделы документа.
Заметим, что приведенные выше пункты как раз и организованы в виде
списковой структуры.
В языке HTML предусмотрены следующие основные типы списков: марки-
рованный, нумерованный и список определений. Для реализации списков
различных типов используются следующие тэги: <UL>, <OL>, <DL>, <DIR>,
<МЕШ>. С помощью различных типов встроенных в документ списков могут
быть реализованы самые разные возможности, описанию которых и посвя-
щена данная глава. Рассматриваются особенности построения списков раз-
личных типов, а также применения вложенных друг в друга списков.

Маркированный список
Одним из типов списков, реализованных в языке HTML, является маркиро-
ванный список. Иначе списки такого типа называют ненумерованными или
Глава 2. Списки 57

неупорядоченными. Последнее название часто используется как формаль-

ный перевод названия соответствующего тэга <иь>, с помощью которого и
организуются списки такого типа в HTML-документах (UL — Unordered
List, неупорядоченный список).
В маркированном списке для выделения его элементов используются специ-
альные символы, называемые маркерами списка (часто их называют булле-
тами, что является формальным озвучением английского термина bullet -
пуля). Вид маркеров списка определяется браузером, причем при создании
вложенных списков браузеры автоматически разнообразят вид маркеров
различного уровня вложенности.

Тэги <UL> и <LI>

Для создания маркированного списка необходимо использовать тэг-контей-
нер <UL> </UL>, внутри которого располагаются все элементы списка. От-
крывающий и закрывающий тэги списка обеспечивают перевод строки до и
после списка, отделяя, таким образом, список от основного содержимого
документа, поэтому здесь нет необходимости использовать тэги абзаца <р>
или принудительного перевода строки <вк>.
Каждый элемент списка должен начинаться тэгом <ы> (LI — List Item, эле-
мент списка). Тэг <ы> не нуждается в соответствующем закрывающем тэге,
хотя его наличие в принципе не возбраняется. Браузеры обычно при ото-
бражении документа начинают каждый новый элемент списка с новой
строчки.
Приведенных сведений достаточно для построения элементарного маркиро-
ванного списка. Приведем пример HTML-документа, использующего мар-
кированный список, отображение которого браузером показано на рис. 2.1.
<HTML>
<HEAD>
<Т1ТЬЕ>Пример маркированного списка</Т1ТЬЕ>
</HEAD>
<BODY>
<UL>
<В>Знаки зодиака:</В>
<Ы>Овен
<Ы>Телец
<Ы>Близнецы
<Ы>Рак
<Ы>Лев
<Ы>Дева
<Ы>Весы
<Ы>Скорпион
<Ы>Стрелец
58 Часть I. Основы HTML

<ЫЖозерог
<Ы>Водолей
<Ы>Рыбы
</UL>
</BODY>
</HTML>

Заметим, что кроме элементов списка, от-

мечаемых тэгом <ы>, могут присутствовать
и другие HTML-элементы. В приведенном
выше примере одним из таких элементов
Знаки зодиак а: является обычный текст, не являющийся
Овен
Телец пунктом списка, а играющий роль его за-
Близнецы головка.
Рак
Лев
Дева
Весы
Скорпион
Стрелец
Козерог
Водолей
Рыбы
Рис. 2.1. Отображение браузером
| iII маркированного списка

( Примечание )
В некоторых учебниках по языку HTML встречается указание, что для задания
заголовка списка следует применять тэг-контейнер <LH> (LH — List Header, заго-
ловок списка). В настоящее время этот тэг не распознается ни одним из распро-
страненных браузеров и не входит в спецификацию HTML. Таким образом, его
применение становится бессмысленным, хотя и не приведет к каким-либо ошибкам.

В тэге <UL> могут быть указаны два параметра: COMPACT и TYPE.

Параметр COMPACT записывается без значений и применяется для указания
браузеру, что данный список следует выводить в компактном виде. Напри-
мер, может быть уменьшен шрифт или расстояние между строчками списка
и т. д.

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

Параметр TYPE может принимать следующие значения: disc, circle и square.

Этот параметр используется для принудительного задания вида маркеров
Глава 2. Списки 59_

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

Типичными вариантами отображения являются следующие:
TYPE = disc - маркеры отображаются закрашенными кружками;
TYPE = circle — маркеры отображаются не закрашенными кружками;
TYPE = square — маркеры отображаются закрашенными квадратиками.
Пример записи: <UL TYPE = circlex
Значением, используемым по умолчанию, является TYPE = disc. Для вло-
женных маркированных списков на первом уровне по умолчанию использу-
ется значение disc, на втором -- circle, на третьем и далее — square.
Именно так делается в последних версиях браузеров Netscape и Internet
Explorer. Заметим, что иные браузеры могут иначе отображать маркеры. На-
пример, в спецификации HTML 4.0 для вида маркера, отображаемого при
значении TYPE = square, указывается незакрашенный квадратик (square
outline).
Параметр TYPE с теми же значениями может употребляться для указания ви-
да маркеров отдельных элементов списка. Для этого параметр TYPE с соот-
ветствующим значением разрешено указывать в тэге элемента списка <ы>.
Пример записи: <LI TYPE = circlex

С Примечание j
Браузеры по-разному интерпретируют указание вида маркера для отдельного
элемента списка. Браузер Netscape изменяет вид маркера для данного и всех
последующих, пока не встретится очередное переопределение вида маркера.
Браузер Internet Explorer изменяет вид маркера только для данного элемента.

Графические маркеры списка >

В качестве маркеров списка можно использовать графические изображения,
что широко применяется для создания привлекательных, красиво оформлен-
ных HTML-документов. На самом деле такая возможность не предоставля-
ется непосредственно языком HTML, а реализуется несколько искусственно.
Это вовсе не означает, что так делать не рекомендуется или предосудитель-
но, а лишь означает, что здесь не будут применяться никакие специальные
языковые конструкции HTML.
Чтобы понять идею, необходимо разобраться в механизме реализации спи-
сков на HTML-страницах. Оказывается, что тэг списка <иь> (как, впрочем,
и тэги списков других типов, рассматриваемых ниже) выполняет единствен-
ную задачу — указывает браузеру, что вся информация, располагаемая после
данного тэга должна отображаться со сдвигом вправо (отступом) на некото-
рую величину. Тэги <ы>, указывающие на отдельные элементы списка,
обеспечивают вывод стандартных маркеров элементов списка.
60 Часть I. Основы HTML

Если же нам требуется построить список с графическими маркерами, то

можно вообще обойтись без тэгов <ы>. Достаточно будет перед каждым
элементом списка вставить желаемое графическое изображение. Единствен-
ной задачей, которую нужно при этом решить, будет отделение элементов
списка друг от друга. Для этого можно использовать тэги абзаца <Р> или
принудительного перевода строки <BR>. Пример реализации списка с графи-
ческими маркерами, отображение которого представлено на рис. 2.2, пока-
зан ниже:
<HTML>
<HEAD>
<Т1ТЬЕ>Маркированный список</Т1ТЬЕ>
</HEAD>
<BODY>
<UL>
<В>Знаки зодиака : </BXBR>
<IMG SRC="Green_ball.gif"> Овен<ВК>
<IMG SRC="Green_ball.gif ">
<IMG SRC="Green_ball.gif">
<IMG SRC="Green_ball.gif"> PaK<BR>
<IMG SRC="Green_ball.gif"> Лeв<BR>
<IMG SRC="Green_ball.gif"> Дeвa<BR>
<IMG SRC="Green_ball.gif "> Becbi<BR>
<IMG SRC="Green_ball.gif " Скорпион<ВК>
<IMG SRC="Green_ball.gif "
<IMG SRC="Green_ball.gif " Kosepor<BR>
<IMG SRC="Green_ball.gif " Boдoлeй<BR>
<IMG SRC="Green_ball.gif"> Рыбы
</UL>
</BODY>
</HTML>

Рис. 2.2. Маркированный список

с графическими маркерами

Знаки зодиака:
• Овен
& Телец
® Близнецы
Фрак В приведенном примере в качестве маркера
* Лев элементов списка используется графический
в Дева
9 Весы файл Green_ball.gif. Заметим, что использова-
® Скорпион ние графики на HTML-страницах может зна-
в Стрелец
в Козерог чительно увеличить объем передаваемой ин-
в Водолей формации. Однако в данном случае это уве-
& Рыбы
м личение крайне незначительно. Здесь для всех
маркеров используется один и тот же файл,
Глава 2. Списки 67

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

( Примечание ^
Методы создания списков с графическими маркерами обсуждаются в свою
очередь в главе 8.

Нумерованный список
Другим типом списков, реализованных в языке HTML, является нумерован-
ный список. Иначе списки такого типа называют упорядоченными. Послед-
нее название часто используется как формальный перевод названия соот-
ветствующего тэга <оь>, с помощью которого и организуются списки такого
типа в HTML-документах (OL — Ordered List, упорядоченный список).
Списки данного типа обычно представляют собой упорядоченную последо-
вательность отдельных элементов. Отличием от маркированных списков яв-
ляется то, что в нумерованном списке перед каждым его элементом автома-
тически проставляется порядковый номер. Вид нумерации зависит от брау-
зера и может задаваться параметрами тэгов списка. В остальном реализация
нумерованных списков во многом похожа на реализацию маркированных
списков.

Тэги <OL> и </./>

Для создания нумерованного списка следует использовать тэг-контейнер
<OL> </OL>, внутри которого располагаются все элементы списка. Откры-
вающий и закрывающий тэги списка обеспечивают перевод строки до и по-
сле списка, отделяя таким образом список от основного содержимого доку-
мента.
Как и для маркированного списка, каждый элемент нумерованного списка
должен начинаться тэгом <ы>.
Приведем пример HTML-документа, использующего нумерованный список,
отображение которого браузером показано-на рис. 2.3.
<HTML>
<HEAD>
<Т1ТЬЕ>Пример нумерованного списка</Т1ТЬЕ>
</HEAD>
<BODY>
<OL>
<В>Наиболее яркие звезды, видимые с Земли:</В>
<Ы>Сириус
<ЫЖанопус
62 Часть I. Основы HTML

<Ы>Арктур
<Ы>Альфа Центавра
<Ы>Вега
<Ы>Капелла
<Ы>Ригель
<Ы>Процион
<Ы>Ахернар
<Ы>Бета Центавра
<Ы>Бетельгейзе
<Ы>Альдебаран
<BR>. . .
<LI value=58>Mimap
<BR>. . .
value=75>Пoляpнaя
</OL>
</BODY>
</HTML>

Наиболее яркие звезды, видимые с Земли:

1. Сириус
2. Канопус
3. Арктур
4. Альфа Центавра
5. Бега
6. Капелла
7. Ригель
8. Процион
9. Ахернар
10. Бета Центавра
11. Бетельгейзе
12. Альдебаран

58. Мицар

75. Полярная
Рис. 2.3. Нумерованный
список

В тэге <оь> могут быть указаны следующие параметры: COMPACT, TYPE и START.
Параметр COMPACT имеет тот же смысл, что и у маркированных списков. Па-
раметр TYPE используется для задания вида нумерации списка. Может при-
нимать следующие значения:
TYPE = А — задает маркеры в виде прописных латинских букв;
TYPE = а — задает маркеры в виде строчных латинских букв;
Глава 2. Списки 63

TYPE = i — задает маркеры в виде больших римских цифр;

TYPE = i — задает маркеры в виде маленьких римских цифр;
TYPE = 1 — задает маркеры в виде арабских цифр.
По умолчанию всегда используется значение TYPE = 1, т. е. нумерация при
помощи арабских цифр. Это касается и вложенных нумерованных списков.
Здесь, в отличие от маркированных списков, браузеры по умолчанию не де-
лают различной нумерацию на различных уровнях вложенности списков.
Заметим, что после номера элемента списка всегда дополнительно выводит-
ся знак "точка".
Параметр TYPE с теми же значениями может употребляться для указания ви-
да нумерации отдельных элементов списка. Для этого параметр TYPE с соот-
ветствующим значением разрешено указывать в тэге элемента списка <ы>.
Пример записи: <ы TYPE = A>.
Параметр START тэга <оь> позволяет начать нумерацию списка не с единицы.
В качестве значения параметра START всегда должно указываться натураль-
ное число, вне зависимости от вида нумерации списка. Приведем пример:
<OL TYPE = A START=5>.

Такая запись определяет нумерацию списка с прописной латинской буквы

"Е". Для других видов нумерации запись START=S задаст нумерацию, соответ-
ственно, с числа "5", римской цифры "V" и т. д.
Изменение вида нумерации списка и значений номеров допустимо произво-
дить и для любого элемента списка. Тэг <ы> для нумерованных списков
разрешает использовать параметры TYPE и VALUE. Параметр TYPE может при-
нимать такие же значения, как и для тэга <оь>.
Пример записи: <ы TYPE = A>.

( Примечание )
Браузеры по-разному интерпретируют указание вида нумерации для отдельно-
го элемента списка. Браузер Netscape изменяет вид нумерации для данного
элемента и всех последующих, пока не встретится очередное переопределе-
ние. Браузер Internet Explorer изменяет вид номера только для данного элемента.

Значение параметра VALUE тэга <ы> позволяет изменить номер данного эле-
мента списка. При этом изменяется нумерация и всех последующих элемен-
тов. Типичным применением являются списки с пропуском некоторых
элементов. Пример такого списка был приведен выше (рис. 2.3). В нем дается
упорядоченный список наиболее ярких звезд, в котором на 58 и 75 местах
расположены звезды, хорошо видимые в наших широтах (Мицар — наибо-
лее яркая звезда созвездия Большая Медведица, а Полярная звезда — Малой
Медведицы).
64 Часть I. Основы HTML

Приведем еще один оригинальный пример использования нумерации раз-

личных видов. В приводимом ниже HTML-коде заданы три списка с раз-
личной нумерацией. Для удобства просмотра каждый из списков помещен в
отдельную ячейку таблицы. Все три списка идентичны и различаются толь-
ко видом нумерации: в первом столбце таблицы — арабские цифры, во вто-
ром — римские, а в третьем нумерация ведется латинскими буквами. Обра-
тим внимание, что элементы списка пусты, т. е. после любого тэга <ы> нет
никаких данных. Пример такого рода можно использовать в качестве табли-
цы соответствия между записью чисел арабскими и римскими цифрами.
Оказывается, что любой браузер, поддерживающий списки, можно исполь-
зовать в качестве генератора такой таблицы (рис. 2.4), стоит лишь набрать
приводимый HTML-код. Нумерация римскими цифрами правильно работа-
ет вплоть до значения 3999. Изучая правый столбец, можно понять, как вы-
полняется нумерация латинскими буквами. По исчерпании однобуквенной
нумерации (от А до Z) в качестве следующего номера берется первый двух-
буквенный номер — АА и т. д.
<HTML>
<HEAD>
<Т1ТЬЕ>Использование различного типа нумерации в списках</Т1ТЪЕ>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=100% CELLPADDING=15>
<TR>
<TD>
<OL>
<LIXLI>
<BR>. . .
<LI VALUE=1991><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LIXLI>
</OL>
</TD>

<TD>
<OL TYPE=I>
<LIXLI>
<BR>. . .
<LI VALUE=1991><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LIXLI>
</OL>
</TD>

<TD>
<OL TYPE=A>
<LIXLI>
<BR>. . .
VALUE=1991XLIXLIXLIXLIXLIXLIXLIXLIXLIXLIXLIXLIXLI>
Глава 2. Списки 65

</OL>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

I ^; Использование разяи чного типа нумерации е

^н^ш

Ёи 1 1
'"f'es :""
1
• - -• . И»
i
Ц Но™
И **- !кщ[
$*»№ N«,c,v»
• '£
I'liTt
|
'..S.J
I
и
1. I. А
в
2. П.

1991. MCMXCI BVO.

1992. мсмхсп. BVP.
1993. мсмхсгд. BVQ.
1994. MCMXCIV. BVE.
1995. MCMXCV. BVS.
1996. MCMXCVI. BVT.
! 1997. МСМХСУП. BVU.
1998 MCMXcvm BW.
1999. мсмхсгх. BVW.
2000. мм. BVX.
2001. MMI. BVY.
2002. ммп. BVZ.
2003. ммш. BWA
2004. MMIV BWB.

Рис. 2.4. Различные типы

в^ДДЕий^й|ш|^Шшвш~фгей|и нумерации HTML-списков

Список определений
Списки определений, также называемые словарями определений специаль-
ных терминов, являются особенным видом списков. В отличие от других
типов списков, каждый элемент списка определений всегда состоит из двух
частей. В первой части элемента списка записывается определяемый тер-
мин, а во второй части — текст в форме словарной статьи, раскрывающий
значение термина.
Списки определений задаются с помощью тэга-контейнера <DL> (Definition
List). Внутри контейнера тэгом <DT> (Definition Term) помечается опреде-
ляемый термин, а тэгом <DD> (Definition Description) — абзац с его опреде-
лением. Для тэгов <от> и <DD> можно не записывать соответствующие за-
крывающие тэги.

3 Зак. 944
_66 Часть I. Основы HTML

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

<DL>
<ОТ>Термин
<00>0пределение термина
</DL>
В тексте после тэга <от> не могут использоваться элементы уровня блока,
такие как, например, тэги абзаца <р> или заголовков <HI>—<нб>. Как прави-
ло, текст определяемого термина должен располагаться в одной строке.
Текст, содержащий определение термина, выводится, начиная со следующей
строки (или через строку для некоторых браузеров) после определения тер-
мина с отступом вправо. В информации, помещенной после тэга <DD>, могут
располагаться элементы уровня блока. Отсюда следует, в частности, что
списки определений могут быть вложенными.
В тэге <DL> может быть указан параметр COMPACT, назначение которого ана-
логично другим спискам, описываемым выше.
Приведем пример HTML-документа, в котором использован список опреде-
лений:
<HTML>
<HEAD>
<Т1ТЬЕ>Пример списка определений</Т1ТЬЕ>
</HEAD>
<BODY>
<DL>
<CENTER>
<НЗ>Классификация типичных темпераментов человека,<ВК>основанная
на воззрениях Гиппократа</Н3>
</CENTER>
<ОТ>Флегматик
<ВВ>Пассивный, очень трудоспособный, медленно
приспосабливающийся;<ВК>настроение устойчивое, мало поддается внешнему
влиянию;<ВК>вялость эмоциональных реакций и медлительность в волевой
де ятель ности<ВКХВК>

<ОТ>Сангвиник
<ВО>Активный, энергичный, легко приспосабливающийся;<ВК>живость
и подвижность эмоциональных реакций, быстрота и сила волевых
проявлений<ВКХВК>

<ОТ>Холерик
<ВО>Активный, очень энергичный, настойчивый;<ВК>порывистость и сила
эмоциональных реакций, бурные волевые проявления<ВКХВК>

<ОТ>Меланхолик
<00>Пассивный, легко утомляющийся, тяжело
приспосабливающийся;<ВК>слабость волевых проявлений и преобладание
подавленного настроения, неуверенность в себе
</DL>
Глава 2. Списки 67

</BODY>
</HTML>

Отображение приведенного HTML-документа в браузере показано на рис. 2.5.

л т .• н т*
Классификация типичных темпераментов человека,
основанная на воззрениях Гиппократа

Флегматик
Пассивный, очень трудоспособный, медленно приспосабливающийся;
настроение устойчивое, мало поддается внешнему влиянию,
вялость эмоциональный реакций и медлительность в волевой
деятельности

Сангвиник
Активный, энергичный, легко приспосабливающийся;
живость и подвижность эмоциональных реакций, быстрота и сила
волевых проявлений

Холерик
Активный, очень энергичный, настойчивый;
порывистость и сила эмоциональных реакций, бурные волевые
проявления

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

Рис. 2.5. Список определений (напоминает группу статей в словаре)

Списки типа <DIR> и <MENU>

Списки типа <DIR> и <MENU> в настоящее время практически не использу-
ются, хотя их поддержка ведущими браузерами до сих пор обеспечивается.
В спецификации HTML 4.0 оба этих типа списка отмечены как отмененные.
Вместо них предлагается использовать маркированные списки, задаваемые
тэгом <иь>.
Изначально списки этих типов задумывались как более компактные по
сравнению с обычными маркированными списками. Согласно правилам
записи элементов этих списков в них не разрешалось использовать блочные
элементы, что означает невозможность реализации вложенности списков
такого типа. Каждый элемент списка представлял собой одну строчку текста.
Для списков типа <DIR> планировалось ввести ограничение на длину текста
элемента списка (24 символа). Такое ограничение позволило бы выводить
68 Часть I. Основы HTML

списки типа <DIR> в виде, подобном выводу списка каталогов в операцион-

ных системах UNIX и MS-DOS при использовании ключа /W (в несколько
колонок). Кроме этого, для элементов списков такого типа не отображались
маркеры.
В настоящее время все эти замыслы не реализованы, поскольку дальнейшее
употребление списков данных типов не рекомендуется. Современные версии
браузеров отображают списки этих типов полностью аналогично спискам
типа <иь>.

Вложенные списки
Бывают случаи, когда в элемент списка одного типа требуется включить це-
лый список такого же типа или другого. При этом будут организованы
многоуровневые или вложенные списки. В HTML допустимо произвольное
вложение различных типов списков, однако при их организации следует
проявлять аккуратность.
Ниже приводится HTML-код документа с вложенными списками, отобра-
жение которого показано на рис. 2.6. В этом примере в каждый элемент
маркированного списка вложен свой нумерованный список.
<HTML>
<HEAD>
<Т1ТЬЕ>Пример вложенного списка</Т1ТЬЕ>
</HEAD>
<BODY>
<UL>
<В>Спутники некоторых планет</В>
<Ы>Земля
<OL>
<Ы>Луна
</OL>
<Ы>Марс
<OL>
<Ы>Фобос
<Ы>Деймос
</OL>
<Ы>Уран
<OL>
<Ы>Ариэль
<Ы>Умбриэль
<Ы>Титания
<Ы>Оберон
<Ы>Миранда
</OL>
Глава 2. Списки 69

<Ы>Нептун
<OL>
<Ы>Тритон
<Ы>Нереида
</OL>
</UL>
</BODY>
</HTML>

Примечание
Язык HTML не допускает автоматическую
многоуровневую нумерацию списков, как
Спутники некоторых планет это делают мощные текстовые редакторы.
Земля
1. Луна
Марс
1 Фобос
2. Деймос
Уран
1. Арюль
2 Умбриэль
3. Тирания
4. Оберон
5. Миранда
Нептун
1. Тритон
2. Нереида
Рис. 2.6. Простейший пример
1 вложенного списка

:
я»' 1 :* ''Л К 4d ••> 4'
рц •-•• ••••

8Ш1Р
чВШЩ5
I

Рис. 2.7. Пример многоуровневого списка в HTML-документе

70 Часть I. Основы HTML

В заключение приведем пример реально существующей HTML-страницы,

на которой имеется маркированный список с тремя уровнями (рис. 2.7). На
рисунке видно типовое применение многоуровневого списка для создания
структуры типа оглавления разделов документа. Каждый элемент списка
всех уровней представляет собой ссылку на соответствующий подраздел.
 : Ш '•-'"' • --,

ГЛАВА 3

Графика

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

любому виду публикации, в том числе и для Web-документов. Без иллюст-
раций документ однообразен, вял и скучен. Расчетливо подобранная и пра-
вильно размещенная в документе графика делает его визуально привлека-
тельнее и, что самое важное, передает одну из основных идей документа.
Изображения могут сделать текст вашего документа более содержательным.
Представьте некий сухой HTML-документ, содержащий, например, описа-
ние придуманного вами технического устройства. Если он состоит из одного
текста, то многим покажется скучным и порой непонятным. А если его
"разбавить" несколькими иллюстрациями, размещенными в нужных местах,
документ станет более читабельным и визуально привлекательным.
Изображения помогают лучше передать суть и содержание документа. Мо-
жете ли вы представить эту книгу без иллюстраций? Вы бы вряд ли ее купи-
ли, и авторы не могли бы иметь за это к вам никаких претензий. Вспомните
старое правило: лучше один раз увидеть, чем сто раз услышать (в данном
случае — прочитать).
Однако во всем нужно чувство меры. Это правило лишний раз подтвержда-
ется при просмотре ряда Web-страниц. Довольно часто встречаются Web-
документы, загроможденные фоновыми изображениями, ничего не выра-
жающей графикой и раздражающей анимацией. Планируя разместить на
своей странице то или иное изображение, убедитесь, что оно действительно
необходимо. Если при просмотре печатных материалов вам не составит тру-
да перевернуть страницу, то для Web-документов часто приходится дожи-
даться окончания его загрузки с тем, чтобы двинуться дальше. Загромож-
денность графикой также плоха, как и полное ее отсутствие. Дело усугубля-
ет наличие рекламы в Интернет, которая появляется на страницах многих
сайтов в виде привлекательных графических плакатов (рекламных банне-
ров), которые обычно размещаются до основной содержательной части до-
кументов. Обычная реакция пользователей на рекламу в Web-документах
точно такая же, как и на рекламу, вставляемую посреди вашей любимой те-
левизионной передачи.
72 Часть /. Основы HTML

Использование графики в компьютерных документах имеет давние корни.

Еще в те прежние времена, когда о мониторах приходилось лишь мечтать,
подготовка документов выполнялась на перфолентах, перфокартах и распе-
чатывалась на АЦПУ, предпринимались попытки что-то изобразить графи-
чески. С помощью совокупности алфавитно-цифровых символов, наклады-
ваемых друг на друга, даже на алфавитно-цифровом печатающем устройстве
удавалось построить подобие изображения. Вспомните кинофильм Э. Ряза-
нова "Служебный роман", в котором над рабочим местом одного из героев
висела картинка, распечатанная на АЦПУ. Как это ни удивительно, графика
такого рода (ее называют ASCII-графикой) до сих пор популярна в среде
компьютерщиков. Так, например, в сети FIDOnet многие используют лого-
типы, составленные из символов кода ASCII. А в сообщениях, которыми
обмениваются пользователи электронной почты, принято использовать от-
дельные совокупности символов для выражения своих эмоций. Поверните
голову набок и посмотрите, что вам напоминает следующая совокупность
символов :-).
Вернемся в современность. В предыдущих главах вы узнали об основных
методах построения HTML-документов. Эта глава дополнит ваш инструмен-
тарий средствами включения изображений в страницы, позволяющих сде-
лать их более привлекательными и информативными. Дается обзор различ-
ных графических форматов и рекомендации по их применению. Приводятся
правила встраивания изображений и примеры их использования.

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

то читатели, использующие современные методы поиска, такие страницы не

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

Способы хранения изображений

Рассматривая изображение на экране монитора, вы на самом деле видите
большое количество разноцветных точек (пикселов), которые, будучи соб-
ранными вместе, образуют некую картинку. Отсюда следует, что графиче-
ский файл должен содержать информацию о том, как представить этот на-
бор точек на экране. Существует много способов описания графической
информации, соответственно имеется значительное количество форматов
хранения графических файлов, — порядка нескольких десятков.
Все форматы хранения графической информации можно разделить на два
типа: векторный и растровый.
Файлы векторной графики содержат математические данные о том, как пе-
рерисовать изображение с помощью отрезков прямых (векторов) при выводе
его на экран. Процесс вывода требует дополнительной обработки, но такое
представление графической информации имеет важное преимущество: мас-
штаб изображения может быть изменен без потери качества, так как не су-
ществует фиксированной связи между тем, как он определен в файле и вы-
водом точек на экран. При масштабировании растровой графики обычно
происходит потеря разрешения, что ухудшает качество изображения.
Векторная графика, как правило, употребляется для изображений с четкими
геометрическими формами. Примером ее применения являются системы
автоматизированного проектирования (CAD). В векторном виде хранится
информация для некоторых типов шрифтов.
74_ Часть I. Основы HTML

Растровая графика предполагает хранение данных о каждой точке изобра-

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

На Web-страницах в подавляющем большинстве случаев используется растро-

вая графика в двух форматах: GIF и JPG. Подробное обсуждение преиму-
ществ и недостатков того и другого формата будет дано ниже. Здесь лишь
заметим, что именно эти два формата непосредственно поддерживаются по-
пулярными браузерами, а для использования большинства других графиче-
ских форматов потребуются специальные средства.
Формат BMP является стандартом MS Windows и поддерживается браузером
Internet Explorer, однако его употребление не может быть рекомендовано,
так как данный формат не поддерживает сжатие данных.
Разработанный недавно формат PNG был призван заменить растровый
формат GIF, однако, несмотря на его очевидные преимущества, должного
распространения на настоящий момент не получил.
Иные графические форматы (кроме GIF и JPG) в HTML-документах на
WWW-серверах практически не встречаются, хотя принципиально это воз-
можно. Использование других форматов не рекомендуется по следующим
причинам: во-первых, только для GIF и JPG осуществляется встроенная
поддержка в большинстве браузеров, тогда как для иных файлов необходимо
подключение внешних программ отображения, во-вторых, структура файлов
GIF и JPG наиболее подходит для передачи данных по сети и является не-
зависимой от платформы. Так, например, использование старого и доброго
формата PCX, который существует уже более 10 лет и распознается практи-
чески всеми графическими редакторами, крайне неудачно для сетевых при-
ложений. Во-первых, алгоритм сжатия формата PCX (RLE — метод группо-
вого кодирования) дает малую степень сжатия, однако, вследствие своей
простоты, позволяет распаковывать данные со скоростью, близкой к скорости
Глава 3. Графика 75

считывания. Для сетевых приложений определяющим фактором является

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

Фоновые изображения
Разработчики Web-страниц могут управлять цветом фона документа, а также
указывать изображения, используемые в качестве фонового. Идея приме-
нения фоновых изображений хорошо знакома пользователям системы
Windows, в которой предусмотрен ряд возможностей по изменению пара-
метров рабочего стола (desktop). В этой системе в качестве параметров ото-
бражения рабочего стола может быть указан как однотонный цвет, так и
фоновый узор или рисунок (рис. 3.1).

Рис. 3.1. Выбор параметров

рабочего стола MS Windows
76 Часть I. Основы HTML

Во многом аналогично выполняется настройка параметров фона для HTML-

документов. Для задания цвета фона употребляется параметр BGCOLOR тэга
<BODY>, а фоновое изображение включается в документ при помощи пара-
метра BACKGROUND. В качестве значения параметра BGCOLOR указывается назва-
ние цвета или его составляющие в шестнадцатеричном коде. В качестве фо-
нового изображения должен использоваться графический файл формата GIF
или JPG.

( Примечание )
Названия стандартных цветов и их шестнадцатеричное представление приве-
дено в приложении П2.

Фоновое изображение для HTML-документа всегда заполняет все окно про-

смотра (в отличие от рабочего стола Windows, где изображение может не
размножаться). Если размер изображения меньше размеров окна просмотра,
то оно будет размножено по принципу мозаики. Поэтому фоновые изобра-
жения должны создаваться так, чтобы при появлении на экране границы
сшивки повторяющихся изображений были бы невидимы. Эта задача напо-
минает подбор рисунка при оклеивании обоями стен комнаты.
Обычно в качестве фонового берется небольшое изображение, для загрузки
которого по сети не требуется значительного времени. Существуют огром-
ные коллекции изображений (текстур), которые можно использовать при
разработке своих собственных HTML-документов (рис. 3.2).
Другим часто используемым вариантом является фоновое изображение в
виде бледного рельефного логотипа. Такая графика ясно идентифицирует
сайт и не мешает восприятию материала.
Приведем пример записи тэга <BODY> с указанием фонового цвета и фоно-
вого изображения:
<BODY BACKGROUND=[Link] BGCOLOR=gray>
Пример документа с фоновым изображением показан на рис. 3.3. Заметим,
что одновременное задание параметров BACKGROUND и BGCOLOR вовсе не обяза-
тельно. Любой из них, равно как и оба вместе, могут отсутствовать.
На первый взгляд может показаться, что указание фонового цвета излишне
при задании фонового изображения. В действительности все наоборот.
Можно рекомендовать всегда указывать цвет фона документа если задается
фоновое изображение. Дело в том, что при загрузке документа прежде всего
отображается текстовая часть, а на следующем проходе будут загружаться
изображения, в том числе и изображение, используемое в качестве фоно-
вого. До момента загрузки и отображения фонового изображения цвет фона
документа будет определяться значением параметра BGCOLOR или устанавли-
ваться по умолчанию. Опыт работы с HTML-документами, получаемыми по
сети, показывает, что до загрузки фонового изображения порой проходит
Глава 3. Графика 77

достаточное количество времени, в течение которого пользователь знако-

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

1Ш1!1

Рис. 3.2. Коллекция текстур

1« Докимент с фоновым изображением - Netscape №313

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

фонового изображения
78 Часть I. Основы HTML

Примечание
При выборе цвета фона и характера фонового изображения следует не забы-
вать о необходимости контраста между цветом текста и фона. Неудачное соот-
ношение цветов может затруднить чтение текста. Обратите внимание на
рис. 3.3. Без фонового изображения прочитать текст было бы гораздо проще.

Есть еще причина, из-за которой задание цвета фона документа следует ре-
комендовать. Пользователь может отключить загрузку изображений. В этом
случае фоновое изображение также не будет загружено.
Еще один вариант предпочтений пользователя исключит и выдачу фонового
изображения и указание цвета фона. Конкретный вариант настроек зависит
от используемого браузера. Так, например, в браузере Netscape есть режим
принудительного задания гаммы цветов, перекрывающих настройки, ука-
занные в документе (пункт Always use my colors, overriding document меню
Colors вкладки Preferences). При установке данного флажка цветовые на-
стройки отображаемого документа не будут использоваться, в том числе во-
обще не будет загружаться фоновое изображение.

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

Встраивание изображений
в HTML-документы
Для встраивания изображений в HTML-документ следует использовать тэг
<IMG>, имеющий единственный обязательный параметр SRC, определяющий
URL-адрес файла с изображением. Простейший пример встраивания изо-
бражения:
<IMG SRC=[Link]>

Данный тэг может иметь ряд параметров, обсуждение которых дается ниже.

Выравнивание изображений
При включении графического изображения в документ можно указывать его
расположение относительно текста или других элементов страницы. Способ
выравнивания изображения задается значением параметра ALIGN тэга <IMG>.
Возможные значения этого параметра приведены в табл. 3.1.
Глава 3. Графика 79

Таблица 3.1. Значения параметра ALIGN

Значение Действие параметра

параметра ALIGN

ТОР Верхняя граница изображения выравнивается по самому

высокому элементу текущей строки
ТЕХТТОР Верхняя граница изображения выравнивается по самому
высокому текстовому элементу текущей строки
MIDDLE Выравнивание середины изображения по базовой линии
текущей строки
ABSMIDDLE Выравнивание середины изображения посередине теку-
щей строки
BASELINE или BOTTOM Выравнивание нижней границы изображения по базовой
линии текущей строки
ABSBOTTOM Выравнивание нижней границы изображения по нижней
границе текущей строки
LEFT Изображение прижимается к левому полю окна. Текст
обтекает изображение с правой стороны
RIGHT Изображение прижимается к правому полю окна. Текст
обтекает изображение с левой стороны

Поясним действие параметров выравнивания, приведенных в таблице. Сразу

же оговоримся, что все значения параметров выравнивания изображений
можно условно разделить на две группы по их принципу действия. К одной
группе относятся два значения параметра — LEFT и RIGHT. При использова-
нии любого из этих параметров мы получаем так называемое "плавающее"
изображение. В этом случае изображение прижимается к соответствующему
краю окна просмотра браузера, а последующий текст (или другие элементы)
"обтекают" изображение с противоположной стороны. Здесь текст, разме-
щаемый рядом с изображением, может занимать несколько строчек.
К другой группе значений параметров относятся все остальные. При их ис-
пользовании изображение как бы встраивается в строчку текста, а парамет-
ры выравнивания задают расположение изображения относительно строки
текста. Таким образом, в отличие от плавающих изображений, здесь изо-
бражение является обычным элементом строки. Это легко понять, если
представить, что изображение является просто одной буквой строки текста,
правда, достаточно большой (типа буквицы).
Приведем пример HTML-кода, в котором используются изображения, как
элемент строки.
<HTML>
<TITLE>BbipaBHHBaHwe изображений</Т1таЕ>
<BODY>
80 Часть I. Основы HTML

Выравнивание<1МС SRC=[Link] ALIGN=top>no верхнему краю

<Р>
Выравнивание no<IMG SRC=[Link] АЫСЫ=Ьазе11пе>базовой линии
</BODY>
</HTML>

Отображение браузерами приведенного выше кода показано на рис. 3.4.

Выравнивание п
линии Рис. 3.4. Выравнивание
изображений как элементов
текстовой строки

Приведем пример плавающего изображения (рис. 3.5). В примере изображе-

ние прижато к правому краю окна просмотра браузера, а последующий
текст располагается с левой стороны от изображения. Количество строк,
располагаемое рядом с изображением, может изменяться в зависимости от
размеров шрифта текста, а также размеров окна просмотра. Текст, не помес-
тившийся рядом с изображением, автоматически продолжается ниже. Этот
пример построен на следующем исходном коде:
<HTML>
<Т1ТЬЕ>Выравнивание изображений</Т1ТЬЕ>
<BODY>
<IMG SRC=[Link] ALIGN=right>
<P ALIGN=JUSTIFY>
Санкт-Петербург расположен в самой восточной оконечности Финского залива
в устье реки Невы, на 42-х островах ее дельты. Географические координаты
Глава 3. Графика 81

города: 59"57' северной широты и 30"19' восточной долготы от Гринвича.

Из крупнейших городов мира (с населением свыше одного миллиона человек)
Санкт-Петербург является ближайшим к Северному полюсу, он находится на
одной широте с северной частью Камчатки и южной оконечностью Аляски.
<Р ALIGN=JUSTIFY>
Высокоширотным положением города объясняется явление белых ночей. Они
наступают 25-26 мая, когда солнце опускается за горизонт не более чем
на 9', и вечерние сумерки практически сливаются с утренними. Наибольшая
продолжительность дня приходится на 21-22 июня; заканчиваются белые ночи
16-17 июля, продолжаясь в общей сложности более 50 дней.
</BODY>
</HTML>

Санкт-Петербург расположен в самой восточной оконечности

Финского залива в устье реки Невы, на 42-х островах ее
дельты. Географические координаты города: 59"57' северной
широты и 30" 19' восточной долготы от Гринвича. Из
крупнейших городов мира (с населением свыше одного
миллиона человек) Санкт-Петербург является ближайшим к
Северному полюсу, он находится на одной широте с северной
частью Камчатки и южной оконечностью Аляски.

Высокоширотным положением города объясняется явление

белых ночей. Они наступают 25-26 мая, когда солнце опускается за горизонт не
более чем на 9', и вечерние сумерки практически сливаются с утренними.
Наибольшая продолжительность дня приходится на 21-22 июня; заканчиваются
белые ночи 16-17 июля, продолжаясь в общей сложности более 50 дней.

Рис. 3.5. Выравнивание изображения по правому краю

Отметим, что по умолчанию изображения выравниваются по базовой линии.

Примечание
Браузер Netscape реализует выравнивание со значением ABSBOTTOM точно так
же, как и BOTTOM. Аналогично выравнивание со значением ABSMIDDLE реализу-
ется так же, как и MIDDLE.
Браузер Microsoft Internet Explorer выполняет выравнивание согласно приве-
денной выше таблице.

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

строки? Или различие между самым высоким элементом строки и самым
высоким текстовым элементом строки? Результат действия этих параметров
может отличаться в зависимости от содержимого рассматриваемой строки.
Базовая линия (BASELINE или BOTTOM) — это нижняя часть линии текста, ко-
торая проводится без учета нижней части (descender) некоторых символов,
82 Часть I. Основы HTML

например, букв типа j, q, у. В отличие от выравнивания по базовой линии,

при задании значения ABSBOTTOM выравнивание выполняется по нижней час-
ти самого низкого элемента в строке, т. е. по одному из символов строки,
имеющему элементы, лежащие ниже базовой линии.
Аналогично обстоит дело с различием между параметрами ТОР и ТЕХТТОР.
Например, самым высоким элементом в строке может быть графическое
изображение, в то время как самым высоким текстовым элементом строки
является, как правило, заглавная буква. На рис. 3.6 показаны возможные
отличия. Для данного примера был использован следующий HTML-код:
<HTML>
<Т1ТЬЕ>Различие параметров выравнивания</Т1ТЬЕ>
<BODY>
<IMG SRC=[Link]>
<IMG SRC=[Link] ALIGN=top width=160>
Выравнивание ALIGN=TOP

<IMG SRC=[Link]>
<IMG SRC=[Link] ALIGN=texttop width=160>
Выравнивание ALIGN=TEXTTOP
</BODY>
</HTML>

1 Ш ' '
Рис. З.6. Выравнивание со значениями ТОР и ТЕХТТОР может отличаться
Глава 3. Графика 83

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

значением RIGHT или LEFT, то имеется возможность принудительного пре-
кращения обтекания в заданном месте текста. Это обеспечивается примене-
нием тэга принудительного прерывания строки <вк> с параметром CLEAR.
В качестве значений параметра CLEAR можно использовать следующие: LEFT,
RIGHT или ALL. Так, для приведенного выше примера в нужном месте текста
можно разместить строку:
<BR CLEAR=right>.

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

строки.

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

Тэг встраивания изображений имеет два необязательных параметра, указы-
вающих размеры изображения при отображении — WIDTH и HEIGHT. Значения
параметров могут указываться как в пикселах, так и в процентах от размеров
окна просмотра.
Значения параметров ширины и высоты изображения могут не совпадать
с истинными размерами изображения. В этом случае браузеры автоматически
при загрузке изображений выполняют его перемасштабирование. Заметим,
что неаккуратное задание параметров может привести к изменению пропор-
ций рисунка и, как следствие, к его искажению.
Любой из этих параметров может быть опущен. Если задан только один из
параметров, то при загрузке рисунка второй параметр будет вычисляться
автоматически из условий сохранения пропорций. Изменение размеров изо-
бражений при помощи задания параметров ширины и высоты может ис-
пользоваться для просмотра иллюстраций в уменьшенном виде, однако
такой подход не сокращает время загрузки изображения. Вопросы использо-
вания миниатюрных версий изображений будут рассмотрены ниже.
Если не требуется решать задачу изменения размеров изображения, настоя-
тельно рекомендуется указывать их реальные размеры в пикселах с по-
мощью параметров WIDTH и HEIGHT. Определить действительные размеры ис-
пользуемых вами изображений можно при помощи любой из многих про-
грамм работы с растровой графикой. Например, LView Pro или Paint Shop
Pro. Указание действительных размеров:
П позволяет читателю, работающему в режиме отключения загрузки изо-
бражений, иметь представление о размерах иллюстраций по пустому
прямоугольнику, выдаваемому на экран вместо изображения (если разме-
ры не будут указаны, то браузер, не зная их, выведет маленькую пикто-
грамму и форматирование страницы будет нарушено). Пример будет при-
веден ниже в разделе, где обсуждается альтернативный текст);
84 Часть I. Основы HTML

О позволяет ускорить верстку документа на экране. Обычно браузеры

должны загрузить все встроенные изображения прежде, чем отформати-
ровать текст на экране. Указание размеров встроенных изображений по-
зволяет выполнить форматирование документа до полной загрузки фай-
лов с изображениями.
Приведем пример HTML-кода, отображение которого показано на рис. 3.7.
Действительные размеры отображаемого рисунка— 150x174. Этот рисунок
отображен трижды в разном масштабе. Для изменения масштаба использо-
вано указание ширины изображения, а его высота автоматически масштаби-
руется. В итоге рисунки при отображении будут иметь масштаб— 2:1, 1:1
и 1:2.
<HTML>
<Т1ТЬЕ>Задание размеров изображений</Т1ТЬЕ>
<BODY>
<IMG SRC=[Link] WIDTH=300>
<IMG SRC=[Link]>
<IMG SRC=[Link] WIDTH=75>
</BODY>
</HTML>

Рис. З.7. Все три

изображения являются
отображением одного
и того же файла

Отделение изображения от текста

Для тэга <IMG> можно задавать параметры HSPACE и VSPACE, значения которых
определяют отступы от изображения, оставляемые пустыми, соответственно,
по горизонтали и вертикали. Это гарантирует, что между текстом и изобра-
Глава 3. Графика 85

жением останется пространство, необходимое для нормального восприя-

тия. В приведенном ниже HTML-коде, отображение которого показано на
рис. 3.8, со всех четырех сторон изображения задан отступ, равный 20 пик-
селам. Сравните этот рисунок с рис. 3.5, где отступы от изображения не за-
давались.
<HTML>
<Т1ТЬЕ>Использование параметров HSPACE и VSPACE</TITLE>
<BODY>
<IMG SRC=[Link] ALIGN=left HSPACE=20 VSPACE=20>

(Текст абзаца)

(Текст абзаца)
</BODY>
</HTML>

Санкт-Петербург расположен в самой восточной

оконечности Финского залива в устье реки Невы, на 42-х
островах ее дельты Географические координаты города:
59'57' северной широтыи 30"19' восточной долготы от
Гринвича. Из крупнейших городов мира (с населением
свыше одного миллиона человек) Санкт-Петербург
является ближайшим к Северному полюсу, он находится
на одной широте с северной частью Камчатки и южной
оконечностью Аляски

Высокоширотным положением города объясняется

явление белых ночей. Они наступают 25-26 мая, когда
солнце опускается за горизонт не более чем на 9', и вечерние сумерки практически
сливаются с утренними. Наибольшая продолжительность дня приходится на 21-22
июня, заканчиваются белые ночи 16-17 июля, продолжаясь в общей сложности
более 50 дней.

Рис. 3.8. Отступы от изображения улучшают восприятие документа

Рамки вокруг изображений

Изображение, встраиваемое на страницу, можно поместить в рамку различ-
ной ширины. Для этого служит параметр BORDER тэга <шс>. В качестве зна-
чения параметра используется число, означающее толщину рамки в пиксе-
лах. По умолчанию рамка вокруг изображений не рисуется. Исключением
из этого правила является случай, когда изображение является ссылкой.
86 Часть I. Основы HTML

!il S Ш \mtfK

Рис. 3.9. Изображения

могут помещаться
в рамку различной
толщины

На рис. 3.9 показан пример задания рамок различной толщины для одного и
того же изображения. HTML-код данного примера приведен ниже:
<HTML>
<Т1ТЬЕ>Помещение изображения в рамку</Т1ТЬЕ>
<BODY>
<IMG SRC=[Link]>
<IMG SRC=[Link] BORDER=1>
<IMG SRC=[Link] BORDER=5>
<IMG SRC=[Link] BORDER=10>
</BODY>
</HTML>

Примечание
Если изображение является указателем ссылки, то по умолчанию браузеры за-
ключают их в рамку синего цвета. Избежать появления рамки можно, указав
значение BORDER=O.

Альтернативный текст
Одним из параметров тэга <IMG> является параметр ALT, определяющий аль-
тернативный текст. Его указание дает возможность пользователям негра-
фических браузеров или пользователям, работающим в режиме отключения
Глава 3. Графика 87

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

енных изображениях.
При отключенном изображении вместо них на экране появится альтерна-
тивный текст, определенный значением параметра ALT. Значение этого па-
раметра имеет смысл и для случаев, когда загрузка изображений будет вы-
полняться. Поскольку загрузка изображений выполняется на втором прохо-
де после отображения текстовой информации, то изначально на экране на
месте изображения появится альтернативный текст, который по мере за-
грузки будет сменяться изображением.
Современные браузеры будут также отображать альтернативный текст в ка-
честве подсказки (tooltip) при помещении курсора мыши в область изобра-
жения. На рис. 3.10 показано отображение документа в режиме отключения
загрузки изображений. Заметим, что точно так же документ будет выглядеть
и при отсутствии файлов с изображениями. Различие в двух изображениях
связано с тем, что для первого из них явно указаны размеры, а для второго
размеры не заданы. Для этого примера использовался следующий фрагмент
HTML-кода:
<IMG SRC=[Link] ALT='Tep6 Санкт-Петербурга" WIDTH=150 HEIGHT=174>
<IMG SRC=[Link] АЬТ="Герб Москвы">

ьзование альтернат

Stop FWiKh Home

1

Рис. 3.10. При отключенной загрузке

изображений будет показан
альтернативный текст

Использование изображения в качестве ссылки

Графические изображения могут использоваться не только в качестве иллю-
страций, но и выполнять роль указателей гипертекстовых связей. Для обес-
печения работы изображения в качестве ссылки на другие ресурсы доста-
точно включить изображение внутрь тэга-контейнера <А>. Пример:
<А HREF=My_doc.html><IMG SRC=[Link]/A>
j?S Часть I. Основы HTML

Любая часть такого изображения будет работать как указатель ссылки на

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

Параметр LOWSRC
Еще одним параметром, который можно задать в тэге <IMG>, является
LOWSRC. Его значение определяет файл с альтернативным изображением, ко-
торое должно появляться при первом проходе выдачи на экран загружае-
мого документа. Смысл задания двух загружаемых на одно и то же место
изображений заключается в следующем. В качестве изображения, указывае-
мого значением параметра LOWSRC, рекомендуется выбирать картинку того
же содержания, но более низкого разрешения, возможно с меньшей глуби-
ной цвета или даже монохромное. Изображения такого рода занимают зна-
чительно меньше места и, как следствие, быстро загружаются. Это позволя-
ет уже на первом проходе формирования документа увидеть общие черты
изображений и не ожидать их полной загрузки. Пример записи:
<IMG SRC=[Link] LOWSRC=[Link]>

Использованию параметра LOWSRC присущ ряд особенностей. Если была за-

гружена картинка, адрес которой был задан параметром LOWSRC, то основная
картинка будет иметь точно такие же размеры, что и предыдущая. Если изо-
бражения исходно имели различные размеры, то основное изображение бу-
дет приводиться к размерам первого. При этом могут быть нарушены про-
порции основного изображения. Во избежание этого разумно указывать на-
стоящие размеры основного изображения (параметрами WIDTH и HEIGHT тэга
<IMG>). Тогда на первом проходе изображение низкого разрешения будет
приводиться к размерам настоящего изображения, а на втором проходе -
будет заменено им.

Примечание
Параметр LOWSRC был предложен компанией Netscape и в настоящее время
распознается только этим браузером. Другие браузеры просто проигнорируют
наличие незнакомого им параметра.

Использование
миниатюрных версий изображений
На Web-страницах часто используются миниатюрные версии изображений
(thumbnail) в качестве графических указателей ссылок на полноразмерные
изображения (рис. 3.11). Изображения такого рода представляют собой
уменьшенные копии оригинальных изображений, имеющие иногда также
Глава 3. Графика 89

меньшую глубину цвета или представленные в оттенках серого цвета. Файлы

с такими изображениями занимают значительно меньше места по сравне-
нию с полноразмерными и поэтому гораздо быстрее грузятся. С помощью
миниатюрных версий можно быстро просмотреть набор изображений, дос-
тупных для загрузки, и выбрать понравившееся.
В Интернете можно найти целый ряд специализированных сайтов, содержа-
щих разного рода изображения и обеспечивающих предпросмотр (preview)
с помощью миниатюрных копий. Большое число сайтов не предназначено
для детских глаз, но есть и ряд интересных серверов, предлагающих изо-
бражения различной тематики. Можно отметить сайт [Link]
[Link], одна из страниц которого приведена на рис. 3.11.
, **> (ш-.(щйк of bald «antes and Desktop Wallpapei Image
Kite £»4t View Go Uom,Tiun .Help
Bookmarks Д Location: |l ~Tj (fj ' What's Related Ц

Balil Eagles Page 1 | Page 2 j Pag! 3

On-line Pictures and Desktop Wallpaper Images

Рис. 3.11. Типовое применение миниатюрных версий изображений

Еще одним интересным сервером с огромным набором изображений явля-

ется сайт, расположенный по адресу [Link] одна из страниц
которого была показана на рисунке в предыдущей главе (см. рис. 2.7).

с Примечание
Термин thumbnail является общепринятым для обозначения миниатюрных вер-
сий изображений. В буквальном переводе с английского языка он означает
"ноготь большого пальца" или нечто, имеющее небольшой размер.
90 Часть I. Основы HTML

Для создания миниатюрных версий изображений можно воспользоваться

одним из пакетов для работы с растровыми изображениями. Большинство
пакетов такого рода обладают возможностями масштабирования, изменения
яркости, контрастности и других параметров изображений. Из простейших
пакетов, успешно справляющихся с поставленной задачей, можно назвать
Paint Shop Pro и LView Pro. Среди более мощных пакетов можно отметить
Adobe Photoshop. Существуют также специализированные программы, ориен-
тированные на решение задачи создания миниатюрных копий изображений.

( Примечание ^
Браузеры предоставляют возможность масштабирования изображений "на ле-
ту" при помощи указания требуемых размеров в тэге <IMG>. Это свойство мо-
жет использоваться для выдачи миниатюрных копий на экран, но при этом не
решается главная проблема — уменьшение объема передаваемых файлов.
Довольно странно загружать полное изображение, чтобы увидеть его малень-
кую копию. Такой подход рационально использовать только при просмотре ло-
кальных файлов, когда время загрузки файлов с жесткого диска или локальной
сети невелико.

Формат GIF
Формат файла GIF (Graphics Interchange Format) первоначально был пред-
ложен корпорацией CompuServe Incorporated для передачи графических дан-
ных по сети. Из-за популярности сети CompuServe формат GIF получил ши-
рокое распространение и в настоящее время поддерживается множеством
программ работы с графикой, а также реализован на ряде платформ. Попу-
лярность формата увеличивается за счет свободного распространения его
спецификации и свободного использования. Поскольку изначально формат
разрабатывался для передачи данных в потоке, а не как формат для хране-
ния данных в файле, то его последовательная организация как нельзя более
подходит для размещения графических изображений на WWW-серверах.
К положительным качествам формата можно отнести возможность хранения
множественных изображений, внесение перекрывающего текста, отображе-
ние ряда изображений с задержкой, задание режимов восстановления пре-
дыдущего изображения, введение данных для специфических приложений.
К недостаткам следует отнести ограниченное количество цветов (не более
256), реализованных в виде палитры 24-битовых цветов, отсутствие возмож-
ностей по хранению градаций серого и данных цветовой коррекции, хране-
нию данных в моделях, отличных от RGB (например, CMYK или HSI). Хотя
256 цветов во многих случаях оказывается достаточно, сохранение фотореа-
листичных изображений в этом формате может привести к ухудшению цве-
товой гаммы картинки.
В настоящее время используются две модификации GIF-файлов, которые
носят название GIF87a и GIF89a. Последняя модификация является расши-
Глава 3. Графика 91

рением GIF87a. Официальная документация по GIF89a датирована 31 июля

1990 года.
Версия файла определяется дескриптором, который записывается в первые
шесть байтов файла. В качестве дескриптора используется строка "GIF87a"
или "GIF89a". Дескриптор определяет минимальные требования к програм-
мам, работающим с данным файлом. Так, например, для файла, имеющего
дескриптор "GIF87a" это означает, что для работы с ним не требуется до-
полнительных возможностей, введенных в модификации GIF89a. Поэтому
даже современные программы, способные сохранять изображения в формате
GIF, предлагают оба варианта сохранения. Таким образом, модификация
GIF87a не является устаревшей, а представляет собой подмножество GIF89a
с полной совместимостью снизу вверх.
Уже в 1987 году в модификации GIF87a были определены следующие воз-
можности:
П наличие нескольких различных изображений, закодированных в одном
файле (далее будем называть отдельное изображение, входящее в состав
данного файла, кадром);
П позиционирование изображения на логической области экрана;
П хранение изображения с чередованием строк (interlacing).
Это означает, что уже более десяти лет назад была потенциальная возмож-
ность создавать простейшие анимации, собирая последовательность кадров
в одном GIF-файле, однако широкое распространение "анимированных"
(animated GIF) файлов произошло только в последние годы, главным обра-
зом, за счет широкого использования на Web-страницах.
В GIF-файле определены два различных варианта хранения данных. В од-
ном из них все строки изображения записываются подряд от начальной до
конечной (построчное хранение — Noninterlaced). В другом варианте строки
сохраняются в определенном порядке (хранение с чередованием строк -
Interlaced). Для последнего варианта порядок хранения строго определен,
а именно, строки изображения с чередованием размещаются в четыре про-
хода:
П каждая 8-я строка, начиная с 0-й;
О каждая 8-я строка, начиная с 4-й;
П каждая 4-я строка, начиная с 2-й;
П каждая 2-я строка, начиная с 1-й.
Вариант хранения изображения задается при его создании или сохранении
после редактирования и является параметром самого файла изображения.
В зависимости от варианта хранения выполняется и вывод изображения на
экран — либо картинка разворачивается сверху вниз, либо она постепенно
проявляется и улучшается от прохода к проходу. Очевидно, что браузеры
_££ Часть I. Основы HTML

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

жения на экране, применяя различные эффекты вне зависимости от схемы
хранения, однако для этого необходимо первоначальное получение всего
файла с последующей его обработкой для получения нужного эффекта. Для
WWW-браузеров характерно отображение файлов в процессе их получения,
что определяет однозначную связь между схемой хранения и процессом вы-
дачи на экран.
Заметим, что на первом проходе заполняется 1/8 часть всех строк изображе-
ния. На каждом последующем проходе число заполненных строк растет
вдвое и, таким образом, за четыре прохода изображение принимает ориги-
нальный вид. При чересстрочной схеме хранения уже после первого прохо-
да можно увидеть контуры появляющегося изображения и, при необходимо-
сти, остановить дальнейшую загрузку, чтобы не загружать сеть перекачкой
бесполезной для вас информацией. При построчной схеме хранения, получив
данные для 1/8 части всех строк, пользователь увидит верхнюю 1/8 часть
изображения сразу в оригинальном качестве, по которой, скорее всего, не
удастся определить содержание рисунка.
Связь между размерами уже полученной части файла с изображением и
числом строк, отображенных браузером по этим данным, вообще говоря, не
прямая. Дело в том, что формат GIF предусматривает сжатие данных, по-
этому размер файла и структура данных будут существенно зависеть от его
содержимого.
Покажем пример отображения файла формата GIF, загрузка которого была
прервана после первого прохода (рис. 3.12). Размер изображения составляет
570x495 (256 оттенков серого), файл имеет размер 243 Кб. Для получения
данных первого прохода потребовалось загрузить 32 Кб, что и составляет
примерно 1/8 от размеров всего файла.
( Примечание )
Конечно, браузеры не обладают возможностью остановки загрузки GIF-файлов
после получения данных для первого (или любого другого) прохода. Здесь на-
ми был использован искусственный прием, единственной целью которого явля-
лась иллюстрация данного примера.

Можно было ожидать, что на изображении после первого прохода будет

прорисована только каждая восьмая строка, а остальные будут иметь цвет
фона. На самом деле браузеры поступают более умно. Очевидно, что для
многих изображений близлежащие пикселы имеют близкий цвет, поэтому,
выполняя интерполяцию по пикселам с известным значением цвета, можно
примерно угадать цвет других пикселов. Браузеры применяют простейший
вариант такого подбора, а именно, получив данные для пикселов какой-
либо строки, окрашивают в такой же цвет все последующие строчки изо-
бражения, для которых данных пока еще нет. Для первого прохода, при по-
лучении данных для одной строки цвет ее пикселов распространяется еще
на семь смежных строк. Использование такого подхода позволяет довольно
Глава 3. Графика 93

быстро сформировать контуры изображения, что хорошо видно на рис. 3.12.

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

Рис. 3.12. Отображение чересстрочного Рис. 3.13. Оригинальное изображение

GIF-файла, полученное после первого
прохода

Примечание
Для неискушенных читателей заметим, что термины Interlaced и Noninterlaced
(NI) часто встречаются при описании режимов работы мониторов. Хотя на пер-
вый взгляд речь идет о схожих вещах, а именно о порядке заполнения строк
экрана, однако применительно к мониторам эти термины отражают технический
аспект работы развертки кадра монитора, что никак не влияет на работу про-
грамм в общем, и метод выдачи строк изображения формата GIF, в частности.

Модификация GIF89a расширила возможности управления выводом изо-

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

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

Рассмотрим кратко перечисленные возможности.

Время задержки определяет промежуток между окончанием выдачи теку-
щего кадра и началом выдачи следующего. Точнее, перед началом выдачи
следующего кадра выполняется восстановление области экрана, занятого
изображением, в соответствии с заданным режимом.
Режим ожидания ввода пользователем позволяет интерактивно управлять
сменой кадров при просмотре. Для отдельного кадра может быть задано и
время задержки, и режим ожидания ввода. При этом смена кадра осущест-
вится при наступлении любого из этих событий — окончании времени за-
держки или ввода пользователя. Браузерами данный режим не поддержи-
вается.
Один из цветов палитры изображения может быть определен как прозрач-
ный (transparent). Это указывает браузеру, что при выводе изображения те
пикселы, цвет которых объявлен прозрачным, не требуется изменять на эк-
ране. Чаще всего в качестве прозрачного цвета задается цвет фона изобра-
жения.
Включение комментариев в GIF-файл используется для текстовых поясне-
ний к изображениям, которые не являются частью самого изображения.
Размер комментариев не ограничивается, однако следует иметь в виду, что
излишне большое их количество может привести к неоправданному увели-
чению размеров файла.
Включение строк текста в файл позволяет визуализировать его в простой
форме в виде фрагмента графического изображения. Визуализация будет
выполняться с использованием сетки ячеек символов, определяемой пара-
метрами в этом блоке файла. Текстовые данные будут представлены как мо-
ноширинные символы по одному символу на ячейку наиболее подходящим
шрифтом и размером. Данные будут представимы до тех пор, пока не будет
достигнут конец данных или сетка ячеек не будет заполнена. Браузеры не
поддерживают отображение строк текста.
Режим восстановления области экрана задает способ, которым будет обраба-
тываться фрагмент графики после его отображения. Определены следующие
способы:
О не делать ничего;
О оставить как есть, что в большинстве случаев то же самое, что ничего не
делать;
Глава 3. Графика 95

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

изображением, которое было до вывода текущего изображения;
П заполнить цветом подложки (фоновым цветом или изображением).
Браузеры не поддерживают восстановление предыдущего состояния фраг-
мента экрана. Это наиболее сложный режим, так как требует предваритель-
ного запоминания содержимого части экрана.
Задание внутри GIF-файла данных, специфичных для отдельного приложе-
ния, позволяет практически неограниченно расширять возможности работы
с этими файлами. В одном GIF-файле может быть несколько разных бло-
ков, каждый из которых определяет данные для конкретного приложения и
не используется другими. Netscape использует такой блок для задания пара-
метров цикла смены изображений. Внутри блока записывается единствен-
ный параметр, представляющий собой число от 0 до 32760, который означает
количество полных циклов смены кадров, выполняемых при отображении.
Число нуль означает бесконечный цикл. Отсутствие этого блока приводит
к одноразовой выдаче всех кадров файла с соответствующими временными
задержками. Версия Netscape 2.0 при любом числовом значении давала бес-
конечный цикл. Начиная с версии 3.0, браузер Netscape выполняет заданное
число циклов. Внутри блоков, специфичных для приложения, имеется
8-байтовое поле идентификатора приложения и 3-байтовое поле кода при-
ложения. Для блоков задания цикла в качестве идентификатора использует-
ся слово "NETSCAPE", а в качестве кода приложения "2.0". Это можно об-
наружить, "заглянув" внутрь любого GIF-файла с циклом.

С" Примечание j
Версия Netscape 2.0 на сегодняшний день представляется архаичной. Однако
это вовсе не означает, что следует менять значение поля кода приложения.
Это значение указывает на номер версии, начиная с которой обеспечивается
распознавание такого блока браузером Netscape. Заметим, что данный блок
распознается также и браузером Internet Explorer.

Если Netscape обнаруживает в файле предназначенный для него блок дан-

ных, то он выполняет загрузку всего файла в кэш компьютера и начинает
выполнение цикла анимации. Отметим некоторые особенности отображения:
О если файл слишком велик для размещения в кэше, то цикл выполняться
не будет, чтобы не загружать сеть повторными считываниями;
О в процессе выполнения цикла смены кадров изображения из кэша лого-
тип Netscape в правом верхнем углу браузера не показывает падающих
звезд, как это происходит в случае получения данных из сети;
О кнопка Stop панели навигации браузера горит во время выполнения за-
мены кадров. Просмотр анимации может быть остановлен нажатием
кнопки Stop или Esc. Остановка может произойти на любом кадре из
цикла. Возобновление цикла возможно при просмотре изображения от-
96 ^ Часть I. Основы HTML

дельно от всего документа (View Image) или при перезагрузке (Reload)

документа, но не при обновлении экрана (Refresh).

ФорматJPG
Формат файлов графических изображений JPG (JPEG) был разработан Объ-
единенной группой экспертов в области фотографии (Joint Photographic
Experts Group) как средство для хранения изображений, имеющих боль-
шую глубину цвета (24 бита на пиксел, что обеспечивает 16,7 Мб возможных
цветов).
Не останавливаясь на деталях хранения информации в этом формате, отме-
тим, что файлы JPG следует использовать, прежде всего, для хранения фо-
тореалистичных изображений. Такого рода изображения можно получить
при использовании сканера, оцифровке отдельных видеокадров или с циф-
ровой фотокамеры. Ограничение в 256 цветов, присущее GIF, может снизить
качество изображения, что исключается при использовании JPG. Поскольку
JPG основан на сжатии данных с потерями, учитывающими особенности
восприятия изображения человеком, то без значительного ухудшения кар-
тинки можно обеспечить значительную степень сжатия и, как следствие,
небольшой размер файла. Аналогичный файл GIF в большинстве случаев
будет иметь больший размер.
В настоящее время файлы формата JPG поддерживаются большинством
программ работы с растровой графикой. Отметим лишь важное обстоятель-
ство, проявляющееся при сохранении данных в этом формате. Поскольку
формат предусматривает потери при сжатии, то уровень потерь (а соответст-
венно, и однозначно связанную с ним степень сжатия) может быть изменен
пользователем в широких пределах. Во многих пакетах по умолчанию уста-
новлен некий приемлемый уровень, при котором изображение не очень
сильно искажается при сохранении в данном формате. Значение этого уров-
ня обычно задается параметрами настроек определенного пакета. Как пра-
вило, это число, изменяемое в пределах от 1 до 99, смысл которого для раз-
ных программ различен. Более того, для одних программ увеличение такого
параметра повышает уровень потерь, а для других наоборот. Здесь можно
рекомендовать пробовать сохранять изображения с различным уровнем по-
терь и визуально наблюдать различия. Одновременно можно следить за из-
менением размеров получаемых файлов.
Еще одним важным параметром файлов JPG является схема их хранения.
Различают две схемы — обычная и прогрессивная (progressive). Прогрессив-
ная схема хранения такова, что при выводе таких изображений создается
впечатление постепенного проявления рисунка на экране со все большим
уточнением отдельных деталей. Это напоминает проявление изображения
при работе с чересстрочными файлами формата GIF, однако здесь уточне-
ние производится не построчно, а, как правило, по прямоугольным облас-
Глава 3. Графика 97_

тям размера 8x8 или более. При сохранении изображения в обычной форме
его отображение будет выполняться путем разворачивания изображения
сверху вниз. Из сказанного можно сделать вывод, что хранение изображе-
ний, предназначенных для загрузки по сети, лучше осуществлять в прогрес-
сивной форме.
Покажем пример изображения, сохраненного в формате JPG с высокой сте-
пенью сжатия (рис. 3.14). Видна размытость изображения, что вызвано поте-
рями при сжатии. Такое изображение могло также получиться при отобра-
жении файла JPG с приемлемым качеством на определенном шаге проявле-
ния изображения (по мере загрузки его из сети). Единственным условием
для этого является хранение в прогрессивном формате. Сравните это изо-
бражение с оригиналом, приведенным выше (см. рис. 3.13), а также с час-
тично загруженным GIF-файлом (см. рис. 3.12).

Рис. 3.14. Формат JPG

позволяет хранить изображения
со значительной степенью сжатия

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

Какой формат предпочесть — GIF или JPG

В каких случаях предпочтительнее использование формата GIF, а в каких -
JPG?
Формат GIF следует использовать для изображений, создаваемых про-
граммным путем или рисуемых вручную с помощью графических редакто-
ров, например, графики, гистограммы, несложные рисунки и т. д. (так на-
зываемый line art). Ограничение формата — одновременное использование
не более чем 256 цветов, для таких изображений в большинстве случаев не
играет роли. Алгоритм сжатия, используемый в GIF-формате (LZW — алго-

4 Зак. 944
98 Часть I. Основы HTML

ритм, названный по фамилиям Lempel-Ziv-Welch), выполняющий сжатие

без потерь, обеспечивает точное восстановление изображения и для не-
сложных рисунков достаточно хорошую степень сжатия.
Некоторые проблемы со свободным использованием этого формата возник-
ли в 1995 году. Алгоритм компрессии LZW имеет патент, который в на-
стоящее время принадлежит компании Unisys Corporation. Хотя GIF-формат
является свободно распространяемым и используемым, однако компания
Unisys Corporation в 1995 году решила обязать всех коммерческих продавцов
программных продуктов, использующих LZW-компрессию, лицензировать
ее применение. Чтобы избежать уплаты гонорара вместо GIF-формата было
решено создать альтернативный формат PNG (Portable Network Graphic, чи-
тается "пинг"), поддерживающий прозрачный цвет и чередование строк, од-
нако не допускающий нескольких изображений в одном файле. Считалось,
что формат PNG станет достойной заменой формата GIF, поскольку снима-
ет многие ограничения последнего и является абсолютно открытым. Кроме
того, в формате PNG предусмотрена еще более хитрая схема хранения дан-
ных об отдельных точках изображения по сравнению с чересстрочной схе-
мой формата GIF. Если для формата GIF при чересстрочной схеме хране-
ния можно было увидеть контуры всего изображения после загрузки при-
мерно 1/8 части данных, то для формата PNG то же самое можно сделать,
загрузив 1/64 часть данных. В этом формате предусматривается не только
чересстрочное, но и череспиксельное (если можно так выразиться) хране-
ние. Несмотря на значительные преимущества, на текущий момент формат
PNG широкого распространения не получил, и по-прежнему во всем мире
на WWW-серверах лежат GIF-файлы.
Подводя итоги сказанному, сделаем вывод, что формат GIF лучше всего
подходит для следующих типов изображений:
П изображений с ограниченным количеством используемых цветов;
П изображений, имеющих четкие границы и края, что свойственно боль-
шинству изображений типа меню, кнопок и графиков;
П изображений, в состав которых входит текст.
Формат JPG больше подходит для хранения следующих изображений:
П фотографий, полученных со сканера или цифровой камеры, а также фо-
тореалистичных изображений, построенных на основе компьютерных
расчетов (ray-tracing rendering);
П графики со сложным сочетанием цветов и оттенков;
П любое изображение, которое требует более 256 цветов.
Эти рекомендации не носят абсолютного характера и могут не приниматься
во внимание, тем более, что не всегда можно провести строгое разграниче-
ние между многоцветными фотореалистичными изображениями и рисован-
Глава 3. Графика 99_

ной графикой в стиле "line art". Если уже имеется файл с изображением,
хранящийся в одном из двух форматов — GIF или JPG, то никогда не сле-
дует преобразовывать один формат в другой. Преобразование GIF в JPG
может ухудшить качество изображения за счет алгоритма сжатия с потеря-
ми. Например, в областях, заполненных одним цветом, обязательно появит-
ся муар. Размер файла при таком преобразовании несложных рисунков мо-
жет даже увеличиться. Преобразование JPG в GIF ограничит палитру цветов
до 256 и в подавляющем большинстве случаев приведет к увеличению раз-
мера файла.

Некоторые проблемы использования цвета

Рассмотрим некоторые проблемы, связанные с выбором цвета. Сразу огово-
римся, что речь будет идти об изображениях с палитрой 256 цветов, и их
просмотре в режиме монитора также с 256 цветами. Большая глубина цве-
та— 15, 16 или 24 бит (т.е. 32 тыс., 64 тыс. или 16,7 млн одновременно
отображаемых различных цветов) пока доступна не всем. Кроме того, выбор
видеорежима влияет на характеристики частоты развертки монитора. Со-
временные мониторы (вкупе с соответствующим видеоадаптером) позволяют
обеспечить вертикальную частоту развертки (частоту смены кадров) до
90—120 Гц. Повышение разрешения (числа пикселов по высоте и ширине
экрана) и глубины цвета снижает максимально достижимую частоту смены
кадров до значений 72, 60 и даже 56 Гц, что существенно влияет на утом-
ляемость пользователя. Поэтому опытные операторы, проводящие по не-
сколько часов ежедневно у компьютера, без необходимости не пользуются
режимами с повышенными характеристиками.
Рассмотрим следующий пример. Создадим в любом графическом редакторе
самый простой рисунок, а именно прямоугольник произвольного размера,
все пикселы которого закрашены одним цветом. Сохраним изображение в
формате GIF с 256 цветами. Просматривая такой файл с помощью боль-
шинства графических программ, можно действительно увидеть однотонный
прямоугольник. Иначе может получиться, если такой файл использовать в
HTML-документе, который будет просматриваться в Netscape Navigator или
Microsoft Internet Explorer. Эти браузеры работают с использованием своей
собственной палитры, которая может не совпадать с палитрой изображения.
Преобразование изображения к палитре браузера выполняется при его за-
грузке, при этом используется метод Dither, подбирающий недостающий
цвет сочетанием нескольких пикселов доступного цвета. В итоге вместо од-
нотонного прямоугольника при внимательном рассмотрении можно увидеть
повторяющиеся группы разноцветных пикселов, которые в целом непло-
хо имитируют требуемый цвет. Отметим, что при просмотре такого файла
отдельно в Netscape Navigator (браузеры позволяют загружать не только
HTML-документы со ссылками на графические файлы, но и непосредст-
100 Часть I. Основы HTML

венно просматривать файлы типа GIF) приведение палитры не выполняет-

ся, а используется палитра изображения. Эффект приведения палитры мо-
жет несколько исказить восприятие рисунка, поэтому для изображений,
ориентированных на использование в WWW, рекомендуется заранее выпол-
нить приведение к нужной палитре. Для описываемого примера вместо
произвольного цвета следует выбрать какой-либо цвет, имеющийся в палит-
ре браузера, и тогда при просмотре всегда будет виден строго однотонный
прямоугольник. Изменение палитры используемых цветов доступно во мно-
гих программах, предназначенных для редактирования растровых изобра-
жений. Приведение палитры к требованиям WWW-браузеров выполняется
рядом специальных пакетов, в частности GIF Construction Set и VideoCraft
GIF Animator, описываемых ниже. В первом из них предлагается выполнить
приведение к палитре Netscape Navigator, используя замену цветов на бли-
жайшие (Remap) или метод Dither. Эти возможности заложены непосредст-
венно в пакет.
Термин dither (или dithering) в среде профессионалов обычно используется
без перевода, поскольку подходящего русского термина, который бы кратко
и точно отражал суть дела, пока не найдено. В англо-русском словаре тер-
минов по компьютерной графике Д. В. Волкова, А. Н. Ефлеева, Н. Г. Шагу-
риной (Мир ПК, 1994, № 4, с. 43—52) предлагается переводить словом "кли-
ширование". Часто используются термины "диффузия цвета" или "смешение
цветов". Процитируем также пояснение термина dithering, взятое из того же
источника: "Способ получения дополнительных градаций цветов в изобра-
жении за счет использования цветовых шаблонов, образованных различны-
ми сочетаниями цветов пикселов базовой палитры. Метод обеспечивает
расширение цветовой палитры при ухудшении разрешающей способности".
Палитра цветов, используемая в Netscape Navigator, крайне проста — все
трехмерное RGB-пространство возможных значений цвета равномерно раз-
делено на равные части по каждой координате, и полученные значения
подряд записаны в палитру. Для каждой составляющей R, G и В выбраны
6 значений — 0, 51, 102, 153, 204, 255, все возможные сочетания которых
дают 6x6x6 = 216 различных цветов. Дополнительно к 216 цветам использу-
ются стандартные цвета Windows. Пакет GIF Construction Set при необходи-
мости выполнит приведение всех возможных цветов к описанным 216.

Создание анимации на основе GIF-файлов

Как уже было сказано выше, структура файлов формата GIF позволяет хра-
нить несколько изображений (кадров) в одном файле и указывать парамет-
ры для их смены при отображении. Этим обстоятельством стали широко
пользоваться разработчики Web-страниц для создания наборов сменяющих-
ся (анимированных) изображений. Рассмотрим порядок построения аними-
рованных GIF-файлов.
Глава 3. Графика 101

Процесс создания анимации на базе GIF-файлов состоит из трех этапов:

О подготовка отдельных кадров;
П сбор отдельных кадров в единый файл;
П задание параметров цикла выдачи, временных задержек между кадрами
и другой информации.
Подготовка отдельных кадров выполняется с помощью любого графического
редактора, сохраняющего данные в растровом формате в отдельных GIF-фай-
лах. Простейшим средством является утилита Paint (в Windows 3.1 была ути-
лита Paintbrush), входящий в состав Windows. Подробное обсуждение методов
работы с изображениями выходит за рамки данной книги, поскольку здесь
в минимальной степени присутствуют особенности сетевых приложений.
При создании отдельных кадров анимации следует помнить, что на сего-
дняшний день далеко не все браузеры могут выполнять смену кадров GIF-
файла. Ряд браузеров, не имеющих таких возможностей, покажут лишь пер-
вый кадр. Кроме того, при просмотре в браузерах цикл анимации может
быть остановлен пользователем в любой момент, при этом на экране может
остаться любой из кадров. В некоторых случаях цикл анимации будет вы-
полнен только один раз и закончится показом последнего кадра. Поэтому
при разработке последовательности кадров изображения следует уделить
внимание всем кадрам, которые не должны оказаться недоработанными.
Большинство пакетов для работы с графическими изображениями, таких
как CorelDRAW! версий со 2 по 5, PhotoPaint, Adobe Photoshop, Paint Shop
Pro и другие, поддерживают формат GIF, однако не могут работать с не-
сколькими изображениями, расположенными в одном файле. Чтение файла
формата GIF с несколькими изображениями в любом из перечисленных
пакетов позволит редактировать лишь первое изображение, причем даль-
нейшее сохранение файла приведет к потере всех остальных изображений и
управляющих блоков. Пользователь может сразу не заметить этой потери,
так как никаких предупреждающих сообщений не появляется. Следует при-
нять за правило иметь копии отдельных изображений в отдельных файлах и
редактировать только их при помощи любого пакета.
Для сбора в один файл формата GIF с добавлением управляющей информа-
ции можно воспользоваться специальными пакетами. Для Windows-
платформы одним из наиболее популярных является пакет GIF Construction
Set фирмы Alchemy Mindworks Inc. (Beeton, Ontario, Canada), порядок рабо-
ты с которым будет описан ниже. Информацию о пакете можно получить
по адресу:
[Link]
Среди других пакетов можно назвать VideoCraft GIF Animator, доступный по
адресу:
[Link]
102 Часть I. Основы HTML

Пакет сочетает в себе средства для работы с множественными изображе-

ниями в GIF-файле и типичные средства для обработки отдельных изобра-
жений (настройка яркости, контрастности, повороты изображения, измене-
ние размеров и т. п.). Имеются возможности работы с файлами AVI, выпол-
нения морфинга (Morph), стилизации изображений.
Обзор вопросов построения GIF-файлов можно найти по адресу:
[Link]

Программа GIF Construction Set

Пакет GIF Construction Set для Windows является мощным средством для
работы с GIF-файлами, содержащими несколько блоков. Пакет позволяет:
П создавать файлы, содержащие несколько изображений, из существующих
отдельных изображений;
П добавлять, редактировать и удалять блоки комментариев, блоки с тек-
стом, накладывающимся на изображение;
О сохранять изображения в режиме чередования строк или построчном ре-
жиме;
П задавать признак прозрачности цвета для отдельных изображений;
О задавать параметры временных задержек, а также цикла анимации для
Netscape, которые также распознаются Microsoft Internet Explorer;
П просматривать отдельные изображения;
П импортировать файлы, хранящие изображения во многих популярных
форматах, в том числе и 24-битных;
П изменять параметры месторасположения отдельных изображений на ло-
гическом экране.
Этот программный продукт существует уже очень давно и, как многие про-
граммы, многократно видоизменялся. На настоящий момент последней яв-
ляется версия 2.0а, датированная августом 1999 года. Эта версия сохранила
все функциональные возможности предыдущих версий, однако имеет не-
сколько отличный интерфейс. Для большинства задач вполне достаточно
наличия и более ранних версий. Так, примеры будут даваться для версий от
1.0К до 1.0Р, применение которых вполне допустимо и сегодня, несмотря на
то, что появление этих версий относится к 1996 году.
Отличительной особенностью программы является простота работы с ней.
Освоение типовых действий для создания анимации требует весьма неболь-
ших затрат времени.
Рассмотрим основные возможности программы и методы работы с ней. По-
сле запуска программы GIF Construction Set и считывания GIF-файла на
экран выдается список блоков файла (рис. 3.15).
Глава 3. Графика 103

File £d» Block Help

View | Insert j E d i t | Dslete | Manage | About. I Setup; [ Exit J

HEADFR C!F89a Screen M8 « 48)

LOOP
•!QL ' . • .. • •

IfoWGE 48 x 48,16 colours : : " •':''.

CGNTR-pL ' ' ••.'""::" '
:
IMAGE 48x48,16 colours . •:
CONTROL
IMAGE 48 x 48, Ш colours ,:
CONTROL
IMAGE .48* 48,16 colours v
CONTROL ' •'';,.,- : : : : '•',$?, • •
IMAGE 48 x 48,16-colours GIF Construction
CONTROL Set (32*it) 1 .OP
IMAGE 48 x 48,16 colours
CONTROL : : UNREGISTgRED
IMAGE 48 к 48,16 colours ,'•••' : COPY (patch 3)
COMMENT This is an axample of an animate
Рис. 3.15. Список
блоков GIF-файла

Файл всегда содержит один блок заголовка (HEADER) и один или несколь-
ко блоков с отдельными изображениями IMAGE. Остальные блоки могут
отсутствовать. В правом верхнем углу окна программы отводится место для
быстрого просмотра изображений в уменьшенном виде. Предоставляется
возможность удалить, добавить или отредактировать параметры любого из
блоков.

Блок HEADER
Блок HEADER (рис. 3.16) содержит информацию о размерах логического
экрана в пикселах. Эти параметры не влияют на размеры самих изображе-
ний, но для Web-браузеров определяют размеры прямоугольной области,
внутри которой будут располагаться все изображения данного GIF-файла.
Каждое изображение имеет определенный размер по горизонтали и верти-
кали и заданное смешение в пикселах от левого верхнего угла логического
экрана. В простейшем случае смещение равно нулю, и тогда размер логиче-
ского экрана должен быть равен максимальному из размеров всех изобра-
жений отдельно по горизонтали и по вертикали. При смещении, большем
нуля, к размеру изображения добавляется величина смещения. Пользователь
может самостоятельно задать размеры логического экрана, однако следует
иметь в виду, что отображение картинок, выходящих за пределы логиче-
ского экрана в Netscape Navigator, вызывает неустранимую ошибку GPF
(General Protection Fault). Поэтому программа GIF Construction Set при со-
хранении файла автоматически вычисляет необходимые размеры логиче-
ского экрана с учетом размеров отдельных изображений и их смещений не-
зависимо от значений, заданных пользователем.
 104 Часть I. Основы HTML

Рис. 3.16. Задание

общих параметров GIF-файла

Блок LOOP
Блок LOOP (рис. 3.17) определяет параметры цикла анимации для Netscape.
Блок содержит единственный параметр — число повторений цикла, которое
можно изменять в пределах от нуля до 32760. Нулевое значение определяет
бесконечный цикл. Выдаваемое сообщение о том, что Netscape игнорирует
значение счетчика цикла, уже неактуально для Netscape 3.0 и выше. Блок
LOOP может отсутствовать, при этом все изображения будут выданы один
раз, и на экране останется последнее. При наличии блока LOOP он всегда
располагается вторым в списке блоков после HEADER.
Edit Loop Block

Рис. 3.17. Задание

параметров цикла анимации

Блок CONTROL
Перед каждым блоком с описанием изображения IMAGE может распола-
гаться блок CONTROL с управляющими параметрами (рис. 3.18) для после-
дующего блока IMAGE. Задается флаг наличия прозрачного цвета (Trans-
parent colour) и номер этого цвета, который вводится вручную или указыва-
ется непосредственно на рисунке при помощи специального маркера, пик-
тограмма которого представлена в правом верхнем углу. При указании мар-
кером прозрачным становится цвет того пиксела, который был отмечен на
Глава 3. Графика 105

изображении. Так как обычно в качестве прозрачного выбирается цвет фона

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

Рис. 3.18. Задание

параметров блока управления

Следующий параметр блока (Wait for user input) задает ожидание нажатия
клавиши пользователем перед сменой изображения. Браузеры не поддержи-
вают это свойство, и поэтому значение данного параметра не играет роли.
Параметр Delay задает время задержки данного изображения в сотых долях
секунды. Заметим, что реальное время задержки при отображении в браузе-
ре может быть больше указанного, например, при нескольких файлах GIF
со сменяющимися изображениями на экране или при недостаточной скоро-
сти процессора и/или возможностей видеокарты. При разработке HTML-
документов следует учитывать, что выполнения операций по смене изобра-
жений могут потребоваться значительные затраты мощностей процессора,
что замедлит выполнение других операций и создаст неудобства в работе.
Рекомендуется вставлять задержки в несколько секунд в конец цикла ани-
мации для освобождения процессора для выполнения других операций.
Приведем результаты эксперимента по анализу загрузки процессора при
выполнении операций такого рода. Был подготовлен GIF-файл, содержа-
щий 5 изображений размером 150x174. Для смены изображений установлен
бесконечный цикл. Исследовалась загрузка процессора при отображении
этого файла браузером в отсутствии других задач. Результаты исследования
определяются большим числом факторов, поэтому приведем все необходимые
сведения об условиях проведения эксперимента. Отображение выполнялось
браузером Netscape 4.7 в режиме 800x600x256. Процессор Pentium-200 MMX,
RAM 64 Мб, видеокарта S3 Virge с 2 Мб памяти. Операционная система
Windows 95. Проанализировано два варианта отображения GIF-файла, кото-
рые отличаются величинами временных задержек между сменой изображе-
ний. Загрузка процессора изучалась с помощью программы "Системный
монитор", входящей в состав операционной системы. Результаты анализа
показаны на рис. 3.19. Представлена загрузка процессора в процентах при
106 Часть I. Основы HTML

временных отсчетах, равных 5 с. Левая часть графика (примерно одна чет-

верть всего временного интервала) характеризует загрузку процессора при
отображении файла с изображениями, сменяющимися без задержек. Видно,
что загрузка составляет величину порядка 40%. Скорее всего, при наличии
более быстродействующей видеокарты загрузка процессора была бы еще
больше. Далее график показывает загрузку процессора при отображении
файла с изображениями, при смене которых задана задержка, равная 0,1 с,
а в конце цикла смены изображений установлена задержка 2 с. Загрузка
процессора составила примерно 10%. В самом конце графика загрузка упала
практически до нуля (осталось 2%), что произошло при нажатии кнопки
Stop в браузере и прекращении цикла анимации.

Ьнстемныи монитор

Ядро: Использование процессора (%1

Рис. 3.19. Загрузка процессора при отображении циклически сменяющихся

изображений с различными задержками

Из этого примера можно сделать вывод, что неразумное задание параметров

анимации может привести к значительной трате ресурсов процессора, часто
бесполезной. Несколько анимированных GIF-файлов на странице с мини-
мальными задержками, и неудобства при просмотре обеспечены. К сожале-
нию, в браузерах отсутствует возможность настройки режима демонстрации
анимированных изображений. Можно либо не загружать изображения во-
обще, либо вручную останавливать загрузку кнопкой Stop, что приведет,
в том числе, и к остановке циклов анимации.

Примечание
Для браузера Netscape известны хакерские приемы, останавливающие анима-
цию после прокрутки одного цикла. Для некоторых конкретных версий браузера
известно, в каких адресах ЕХЕ-файла браузера нужно внести изменения, в ре-
Глава 3. Графика 107

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

Параметр Remove by (рис. 3.20) определяет способ восстановления данных

на месте изображения после завершения времени задержки изображения.
Напомним, что режим Previous image (восстановление предыдущего состоя-
ния фрагмента экрана) не реализуется браузерами. Типичным вариантом
восстановления является режим Background, обеспечивающий заполнение
цветом фона или фоновым изображением, которое в сочетании с прозрач-
ным цветом и изменяющимся смещением внутри логического экрана для
отдельных кадров может создать хорошую иллюзию перемещающегося изо-
бражения. Если все изображения GIF-файла одинакового размера, имеют
одинаковое смещение и не имеют прозрачного цвета, то в качестве режима
восстановления достаточно указать Nothing (ничего не делать) или Leave as
is (оставить как есть).

Рис. 3.20. Задание способа

восстановления изображения

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

Блок IMAGE
Блок IMAGE непосредственно содержит информацию об отдельном изо-
бражении (рис. 3.21). Размеры изображения (Image width и Image depth)
приводятся в качестве справочных, их изменение здесь невозможно, а пара-
метры Image left и Image top определяют смещение в пикселах данного изо-
бражения относительно левого верхнего утла логического экрана, которое
задается пользователем. В данном блоке также задается тип хранения изо-
бражения — с чередованием строк (Interlaced) или без, наличие локальной
 108
Часть I. Основы HTML

палитры (Local Palette) и заголовок блока (Block title), который не отражает-

ся при выводе и является краткой текстовой характеристикой изображения
спользование локальной палитры для отдельного изображения не реко-
мендуется. Каждая локальная палитра увеличивает размер файла на 779 байт
и может ухудшить отображение цвета при смене кадров. При сохранении
Construction Set предупреждает о наличии локальной палит-
i одном из блоков и предлагает выполнить ее приведение к глобальной

Щ Ч.У<"
1Щ Ш

Рис. 3.22. Окно выбора способа

приведения палитры

Рис. 3.21. Окно редактирования

параметров изображения

При добавлении (Insert) изображения в список блоков файла выполняется

сравнение глобальной палитры с палитрой добавляемого изображения
Предварительно для 24-битовых изображений выполняется преобразование
< 256 цветам. Если какие-либо цвета отсутствуют в глобальной палитре то
предлагается сделать выбор варианта преобразования (рис. 3 22) Не углуб-
ляясь в детали, отметим, что для фотореалистичных изображений наилуч-
иим выбором является метод Dither, при котором делается попытка имити-
эвать цвет, отсутствующий в палитре совокупностью нескольких разно-
иных пикселов из палитры. Для иных изображений обычно достаточно
°ТСУТСТВуЮЩИе Цвета
"Р°сто заменяются на

Использование мастера анимации

Создание анимации из отдельных кадров может быть осуществлено вруч-
ную использованием пунктов меню пакета, описанных выше. Однако можно
Глава 3. Графика 109

быстро создать нужную анимацию с использованием мастера анимации

Animation Wizard, входящего в состав программы GIF Construction Set. Вся
процедура создания заключается в ответе на ряд вопросов, последовательно
задаваемых пользователю. Отдельные кадры этой процедуры показаны на
рис. 3.23 и рис. 3.24.
[Animation Wtzaid

On учи warn Щ ;>:I:M..••.'.'••! Vil- i;:r i,. focp

Рис. 3.23. Подготовка

анимации с помощью мастера
Animation Wizard

Ш""""'"'

Рис. 3.24. Один из шагов

подготовки анимации

Ускорить процесс задания параметров кадров анимации можно с использо-

ванием пункта меню Manage (рис. 3.25), который позволяет определить ряд
общих значений параметров для нескольких кадров за одну операцию.
Еще одна возможность, предоставляемая пакетом, заключается в преобразо-
вании анимации в формате AVI в GIF-файл с набором кадров. Преобразо-
110 Часть I. Основы HTML

вание может занять значительное время и создать файл очень большого

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

MAGE 48 х 48,16 colours

IMAGE 48 х 48, 16 colours

CONTROL.
MAGE 48 x 48, 16 colours

MAGE 48x48,16 colours

MAGE 48 x 48, 16 colours

iONTROL
MAGE 48 x48,16 colours
CONTROL
MAGE 4 8 x 4 8 , 16 colours
X'NTPGL
MAGE 48 x 48.16 colours

яяИви
Рис. 3.25. Установка общих свойств блоков

В список блоков, составляющих файл GIF, можно добав-

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

Рис. 3.26. Окно вставки блоков

Заметим, что сохранение файла программой GIF Construction Set всегда

производится с дескриптором GIF89a.

Дополнительные возможности пакета

GIF Construction Set
Современные версии пакета GIF Construction Set обладают некоторыми до-
полнительными возможностями, которые позволяют создавать GIF-файлы
специального содержания. Эти возможности можно найти в пункте меню
Глава 3. Графика 111

Edit пакета. Заметим, что реализация описываемых ниже возможностей свя-

зана не с какими-либо конкретными особенностями формата файла GIF
или браузеров, которые не были использованы до этого, а с некоторыми
сервисными инструментами быстрого создания файлов с множественными
изображениями. Перечислим эти возможности в порядке их появления в
меню. Отметим, что в таком же порядке они появлялись с развитием пакета
от версии 1.0К, в которой не было ни одной из них, и до версии 1.0Р, начи-
ная с которой в программу были включены все описываемые ниже пункты.
Banner. Создание бегущей строки. В действительности пакет генерирует ряд
изображений, содержащий текст или его фрагменты, которые по мере сме-
ны отдельных изображений создают иллюзию бегущей строки.
Transition. Имитация одного из выбираемых методов появления изображе-
ния на экране. Различные методы появления изображений широко исполь-
зуются в ряде пакетов работы с графикой. Одним из примеров является
пакет презентационной графики PowerPoint, входящий в состав Microsoft
Office. В отличие от таких пакетов Web-браузеры не имеют средств для
реализации методов появления изображения (не считая вариантов формата
GIF — построчное хранение или чередование строк и вариантов формата
JPG — обычный или прогрессивный). Использование данного пункта меню
позволяет быстро создать ряд изображений, содержащих отдельные фазы
смены изображения с заданными временными задержками и числом кадров.
Wide Palette GIF. Использование палитры, содержащей более чем 256 одно-
временно используемых цветов. Название этого пункта может привести в
недоумение, поэтому сразу же еще раз подчеркнем, что структура файла
GIF не позволяет хранить изображение, имеющее более 256 цветов. Однако
внутри одного GIF-файла может размещаться несколько изображений, каж-
дое из которых имеет свою локальную палитру. Это свойство применяется
для искусственного увеличения числа используемых цветов. Все изображение
разбивается на ряд отдельных кадров одинакового размера в зависимости от
количества используемых цветов. Например, для 510 цветов достаточно двух
кадров. Каждый из кадров имеет свою палитру и включает пикселы, цвет
которых соответствует локальной палитре данного кадра. Остальные пикселы
задаются одним определенным цветом, который объявляется прозрачным.
Таким образом, каждый кадр может содержать до 255 уникальных цветов,
один цвет отводится под прозрачный. При последовательном выводе не-
скольких кадров на одно и то же место изменяются лишь те пикселы, цвет
которых отличен от прозрачного. Вывод всей последовательности кадров
обеспечит требуемое разнообразие цветов. Такие изображения не могут
иметь одного прозрачного цвета, поскольку прозрачность используется для
специальных целей, как описано выше. Изображения с расширенной па-
литрой в принципе могут быть анимированными, однако это приведет к
медленной смене кадров, так как каждый из них, по существу, состоит из
112 Часть I. Основы HTML

нескольких. Исходное изображение должно содержать 24-битовый цвет, на-

пример, это может быть файл формата BMP, PCX или TIFF. Отметим, что
данный режим поддерживается только 32-битной версией пакета. Эффект
большого количества цветов хорошо смотрится только в режиме монитора
HiColor или TrueColor, при просмотре в режиме 256 цветов изображение
может оказаться просто ужасным. Все эти особенности заставляют подхо-
дить к использованию режима расширенной палитры с большой осторож-
ностью.

На сервере представлены
"ЙЙМЙ?3^. общие сведения об ИТМО,
.:•••• . . . информация о направлениях и
специальностях подготовки, структурных подразделениях и проводимых
научных исследованиях. . ' : • •' ' " • .. • : ,"'.'V. •
Здесь можно найти сведения 6 сотрудниках и преподавателях университета.
Для абитуриентов представлена информация о специальностях подготовки,
конкурсеит.п. ' • • . : '.'. ' '• . • ' .. : '::/." . •. ' . '. •.
<jj} Также здесь находите* информация о 5йК:*!ККнт;1Щ.ММ.Ш> :
^^ ет :'5'i в северо-восточной европейской зоне.

: аи), Желающие могут ознакомиться с информацией редакции научного

''-"' журнала 'Известия вузов, Приборостроение?.
/**1
:
С 15 марта 1999 г. в ИТМО изменились некоторые номера телефонов.
1 Можете поискан, здесь нужный вам номер.

Рис. 3.27. Пример удачно оформленной страницы

LED Sign. Создание бегущей строки, напоминающей по характеру световую

рекламу или табло электронных приборов. В тексте строки при помощи
специальных знаков задается цвет символов. Длина строки с учетом спец-
знаков не может превосходить 260 символов.
В целом все описанные возможности приводят к созданию файлов с множе-
ственными изображениями, что может значительно увеличить их размер.
Получаемый при этом эффект следует сопоставлять с дополнительными за-
тратами на его осуществление, состоящими в увеличении времени передачи
Глава 3. Графика 113

файлов по сети и общего трафика. Отдельные Web-страницы с излишне

большим количеством эффектов часто свидетельствуют только об отсутст-
вии чувства меры у создателей и лишь затрудняют восприятие.
В заключение разговора о применении графики на Web-страницах приведем
пример реально существующей страницы (рис. 3.27), на которой умело по-
добраны и размещены графические изображения, часть которых играет роль
заставки, а некоторые изображения являются ссылками на другие ресурсы.
 ГЛАВА 4
•••"" i ' ' ' ".'.'./'-" "••;

Таблицы в HTML

Одним из наиболее мощных и широко применяемых в HTML средств

являются таблицы. Понятие табличного представления данных не нуждается
в дополнительном пояснении. В HTML таблицы используются не только
традиционно, как метод представления данных, но и как средство формати-
рования Web-страниц. Приведем примеры реально существующих докумен-
тов, в которых табличное представление является удобным способом по-
строения документа. На рис. 4.1 показан типичный пример использования
таблиц для представления числовых данных, разбитых по строкам и столб-
цам. На рис. 4.2 использование таблицы служит лишь целям форматирова-
ния документа, задания взаимного расположения элементов страницы. При
просмотре такого документа сразу не видно, что для его построения исполь-
зуется таблица, так как рамки вокруг ее ячеек не прорисовываются.
Первая версия языка HTML не предусматривала специальных средств для
отображения таблиц, так как была в основном предназначена для написания
простого текста. С развитием сфер применения HTML-документов стала
актуальной задача представления данных, для которых типично наличие ря-
да строк и столбцов. Создание документов, содержащих выровненные по
колонкам данные, на первых порах осуществлялось использованием пре-
форматированного текста, внутри которого необходимое выравнивание
обеспечивалось введением нужного количества пробелов. Напомним, что
текст внутри пары тэгов <PRE> и </PRE> выводится моноширинным шриф-
том, и все пробелы и символы табуляции являются значащими. Работа по
выравниванию такого текста выполнялась вручную, что существенно замед-
ляло создание документов. Поддержка табличного представления данных
стала стандартом де-факто, поскольку изначально была реализована во всех
ведущих браузерах и лишь по прошествии значительного времени была за-
креплена в спецификации HTML 3.2.
Специальные средства для создания таблиц, впрочем, не отменяют возмож-
ности использования преформатированного текста. Использование таблиц
не ограничивается только данными, состоящими из рядов и колонок. Одним
из применений является организация расположения разнообразных данных
Глава 4. Таблицы в HTML 115

на странице, которые могут состоять из простого текста, изображений,

других таблиц и т. д. Правилам создания таблиц и примерам их использова-
ния посвящена данная глава.

111
Курсы обмени наличной валюты а коммерческих вояках Санкт-П?терау}1.-п
М>та: 27.09.1999 Время: ЖЛГ

Ва,гпота|Маке, ппкутша|Мн
USD 25.10
"DEM" """Тз'оо
Б1М 4.35

* банка Время
ПокШрод. Пвк,Щрсд. Пок.ЛТрод, Пок./Прад. Пак.Л1рад. Пок./Прод,
10:21 125.00/25.65 12.20/14.00 4.05/4.60 -/-

Башкредитбанк
Викинг
Внешторгбанк России

юшумж»«?««»»»>~%?:Шя**!ЯШШЯ91№МЖШ>

Рис 4.1. Типичный пример HTML-таблицы

Гербы Санкт-Петербурга и
городов Ленинградской
области

Герб ЛемштрадскРй области утвержден 9 декабря 1997 года. Описание герба:

"Герб Ленинградской области представляет собой изображение на геральдическом
щите с отношением ширины к высоте 8:9 серебряного якоря, пересеченного
золотым ключом на лазоревом (голубом) поле. В верхней части щита изображена
серебряная зубчатая стена в перевязь на красном поле.

Рис 4.2. Пример таблицы без рамок

116 Часть I. Основы HTML

Создание простейших HTML-таблиц

Рассмотрим сначала минимальный набор тэгов и их параметров, необходи-
мый и достаточный для создания несложных таблиц, а затем перейдем к их
детальному описанию.
Описание таблиц должно располагаться внутри раздела документа <BODY>.
Документ может содержать произвольное число таблиц, причем допускается
вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом
<TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тэгов располагается
описание содержимого таблицы. Любая таблица состоит из одной или не-
скольких строк, в каждой из которых задаются данные для отдельных ячеек.
Каждая строка начинается тэгом <TR> (Table Row) и завершается тэгом
</TR>. Отдельная ячейка в строке обрамляется парой тэгов <то> и </то>
(Table Data) или <тн> и </тн> (Table Header). Тэг <тн> используется обычно
для ячеек-заголовков таблицы, а <то> — для ячеек-данных. Различие в ис-
пользовании заключается лишь в типе шрифта, используемого по умолча-
нию для отображения содержимого ячеек, а также расположению данных
внутри ячейки. Содержимое ячеек типа <тн> отображается полужирным
(Bold) шрифтом и располагается по центру (ALIGN=CENTER, VALIGN=MIDDLE).
Ячейки, определенные тэгом <то> по умолчанию отображают данные, вы-
ровненные влево (ALIGN=LEFT) и посередине (VALIGN=MIDDLE) в вертикальном
направлении.
Тэги <то> и <тн> не могут появляться вне описания строки таблицы <тк>.
Завершающие коды </TR>, </TD> и </тн> могут быть опущены. В этом случае
концом описания строки или ячейки является начало следующей строки
или ячейки, или конец таблицы. Завершающий тэг таблицы </TABLE> не
может быть опущен.
Количество строк в таблице определяется числом открывающих тэгов <TR>,
а количество столбцов — максимальным количеством <то> или <тн> среди
всех строк. Часть ячеек могут не содержать никаких данных, такие ячейки
описываются парой следующих подряд тэгов — <TD>, </TD>. Если одна или
несколько ячеек, располагающихся в конце какой-либо строки, не содержат
данных, то их описание может быть опущено, а браузер автоматически до-
бавит требуемое количество пустых ячеек. Отсюда следует, что построение
таблиц, в которых в разных строчках располагается различное количество
столбцов одного и того же размера, не разрешается. '
Таблица может иметь заголовок, который заключается в пару тэгов
<CAPTION> и </CAPTION>. Описание заголовка таблицы должно располагаться
внутри тэгов <TABLE> и </TABLE> в любом месте, однако вне области описа-
ния любого из тэгов <то>, <тн> или <TR>. Согласно спецификации языка
HTML расположение описания заголовка регламентировано более строго:
Глава 4. Таблицы в HTML 117

оно должно располагаться сразу же после тэга <TABLE> и до первого <TR>.

Мы рекомендуем придерживаться этого правила.
По умолчанию текст заголовка таблицы располагается над ней (ALIGN=TOP) и
центрируется в горизонтальном направлении.
Перечисленные тэги могут иметь параметры, число и значения которых раз-
личны. Однако в простейшем случае тэги используются без параметров, ко-
торые принимают значения по умолчанию.
Этих сведений вполне достаточно для построения элементарных таблиц.
Приведем пример простейшей таблицы, состоящей из двух строк и двух
столбцов, отображение которой показано на рис. 4.3.
<HTML>
<HEAD>
<Т1ТЬЕ>Пример простейшей таблицы</Т1ТЪЕ>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<ТО>Ячейка 1 строки 1</TD>
<ТО>Ячейка 2 строки 1</TD>
</TR>
<TR>
<ТП>Ячейка 1 строки 2</TD>
<ТО>Ячейка 2 строки 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Ячейка 1 строки 1 [Ячейка 2 строки 1

Ячейка 1 строки 2 ^Ячейка 2 строки 2

Рис. 4.3. Пример простейшей таблицы

118 Часть I. Основы HTML

Представление таблиц на странице

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

Заголовок таблицы <CAPTION>

Тэг заголовка таблицы <CAPTION> имеет единственный допустимый параметр
ALIGN, принимающий значения ТОР (заголовок над таблицей) или BOTTOM
(заголовок под таблицей). Параметр ALIGN может быть опущен, что соответ-
ствует значению ALIGN=TOP. В горизонтальном направлении заголовок таб-
лицы всегда располагается по ее центру. Таблица может не иметь заголовка.
В качестве заголовка таблицы в большинстве случаев используется простой
текст, что регламентируется спецификацией HTML, однако в действитель-
ности между тэгами <CAPTION> и </CAPTION> допустимо записывать любые
HTML-элементы, употребляемые в разделе <BODY>. Приведем пример записи
заголовка таблицы:
<CAPTION ALIGN=BOTTOM>3arcxnoBOK, располагаемый внизу таблицы</САРТ10Ы>

Если данное описание заголовка добавить к приведенному выше примеру,

то таблица будет отображаться так, как показано на рис. 4.4.

•» Пример таблицы с заголовком - Netscape

He Edit View fio rcmrntinicalot Help

i ВЦ • -3 • •':^i-
Вас*. !
I.• R«ioad Hume ^M•apeI '^
••§ Netcaster

[Ячейка 1 строки 1; Ячейка 2 строки 1

[Ячейка 1 строки 2|[Ячейка 2 строки 2
Заголовок, располагаемый внизу
таблицы
Рис. 4.4. Таблица
с заголовком

Браузер Microsoft Internet Explorer предоставляет дополнительные возмож-

ности для выбора расположения заголовка. Параметр ALIGN допускает зна-
чения LEFT, CENTER и RIGHT для горизонтального выравнивания наряду с опи-
санными выше значениями. Отметим, что это один из редких случаев, когда
широко распространенный параметр ALIGN может использоваться и для
горизонтального выравнивания, и для вертикального. Например, запись
ALIGN=RIGHT обеспечит расположение заголовка, прижатого к правой стороне
и размещенного над таблицей. Если записать ALIGN=BOTTOM, то так же, как и
Глава 4. Таблицы в HTML 119

в приведенном выше примере, заголовок будет расположен под таблицей.

Однако двойное использование в одном заголовке параметра ALIGN недопус-
тимо. Поэтому дополнительно введен специальный параметр для вертикаль-
ного выравнивания — VALIGN, принимающий значения ТОР или BOTTOM. На-
пример, для заголовка, располагаемого внизу таблицы с выравниванием вле-
во, описание имеет следующий вид:
<CAPTION ALIGN=LEFT УАЫСЫ=ВОТТОМ>Заголовок, располагаемьм внизу с вырав-
ниванием влево</САРТЮМ>
Таблица с данным описанием заголовка в Microsoft Internet Explorer будет
отображена следующим образом (рис. 4.5). Если данный пример просматри-
вать в Netscape, то заголовок будет размещен по умолчанию, т. е. над табли-
цей и посередине в горизонтальном направлении.

I Л Пример таблицы с заголовком - Microsoft Interne! Explorer ВЩ S3I

•н
DANEW_BOOK\[Link]

||Ячейка 1 строки 1|[Ячейка 2 строки 1

{(Ячейка 1 строки 2;1Ячейка 2 строки 2ij
Заголовок, располагаемый внизу с
выравниванием влево Рис. 4.5. Горизонтальное
выравнивание заголовка
таблицы браузером
Microsoft Internet Explorer

Возможности горизонтального выравнивания заголовка таблицы являются

расширением спецификации HTML, не поддерживаются браузером Netscape
Navigator, и поэтому ими следует пользоваться только в крайней необходи-
мости.

Параметры тэга <TABLE>

Основным тэгом, применяемым при создании таблиц, является тэг <TABLE>.
Он может использоваться с рядом параметров, каждый из которых допусти-
мо опускать. Набор допустимых параметров зависит от браузера. Согласно
спецификации HTML в тэге <TABLE> могут использоваться следующие пара-
метры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Браузеры NetScape И
Microsoft Internet Explorer разрешают кроме перечисленных пяти параметров
использовать параметры HEIGHT и BGCOLOR. Отдельные браузеры позволяют
также задавать и другие параметры. Рассмотрим назначение общеупотреби-
тельных параметров тэга <TABLE>.
120 Часть I. Основы HTML

Параметр BORDER
Параметр BORDER управляет изображением рамки вокруг каждой ячейки, ко-
торые, по сути, дают линии сетки таблицы, и вокруг всей таблицы. По
умолчанию рамки не рисуются, и на экране пользователь увидит лишь ров-
но расположенный текст ячеек таблицы. Существует немало ситуаций, когда
использование таблиц без рамок вполне оправданно, например, для много-
колонных списков, реализованных при помощи таблиц, или задания точ-
ного взаимного расположения рисунков и текста. Однако в большинстве
случаев для традиционного использования таблиц ее ячейки полезно отде-
лить друг от друга линиями сетки, что облегчает восприятие и понимание
информации, содержащейся в таблице.
Для добавления в таблицу рамок необходимо включить в код <TABLE> пара-
метр BORDER, который может иметь численное значение.
Например, <TABLE BORDER> или <TABLE BORDER=IO>.
Численное значение параметра определяет толщину рамки в пикселах, ри-
суемую вокруг всей таблицы, однако на толщину рамок вокруг каждой
ячейки это значение не влияет. При отсутствии численного значения обыч-
но оно принимается равным минимальному значению (1), хотя для различ-
ных браузеров стиль показа рамок может отличаться. Возможность незави-
симого управления отображением рамки вокруг всей таблицы и рамками
вокруг ячеек отсутствует.
Пример таблицы с рамкой толщиной 10 пикселов приведен на рис. 4.6.

щ Щ mm Щ

(Ячейка 1 строки 1 [Ячейка 2 строки 1

|Ячейка 1 строки 2 (Ячейка 2 строки 2
Рис. 4.6. Таблица
с рамкой толщиной
10 пикселов

В спецификации HTML 3.0 не было включено значение для параметра

BORDER. Это сделано лишь в HTML 3.2. Так, в частности, ранние версии
Microsoft Internet Explorer не разрешали задания численного значения.
Отметим, что при отсутствии параметра BORDER рамки не прорисовываются,
но место под них оставляется (это относится только к Netscape). Общий
размер таблицы при отсутствии параметра BORDER или его наличии не изме-
Глава 4. Таблицы в HTML 121

няется (исключением является случай задания BORDER=O). Таким образом,

минимальное расстояние между двумя соседними ячейками в этих случаях
будет равно удвоенной толщине рамки, т. е. двум пикселам. Расположить
ячейки как можно ближе друг к другу возможно заданием BORDER=O, что оз-
начает отсутствие рамок. Некоторые браузеры могут не поддерживать зада-
ние численного значения параметра BORDER, тогда значение, равное нулю,
будет проигнорировано, и таблица будет прорисована с рамками.
Приведем несколько примеров:
<TABLE BORDER>
<TABLE BORDER=0>
<TABLE>

Все три приведенных примера браузером Netscape будут отображены по-

разному. Заметим, что здесь имеет место довольно уникальный случай, ко-
гда нельзя говорить о значении по умолчанию. Третий пример, в котором
параметр BORDER опущен, отличается от любого примера, где этот параметр
присутствует. Для Microsoft Internet Explorer второй и третий примеры иден-
тичны, поэтому для этого браузера значение по умолчанию параметра
BORDER раВНО НУЛЮ.

Параметр CELLSPACING
Форма записи параметра: cELLSPAciNG=num, где num — численное значение
параметра в пикселах, которое не может быть опущено. Величина num опре-
деляет расстояние между смежными ячейками (точнее между рамками яче-
ек) как по горизонтали, так и по вертикали. По умолчанию значение при-
нимается равным двум. Заметим, что традиционно в издательских системах
смежные ячейки таблицы имеют общую границу. В HTML-таблицах по
умолчанию между ними оставляется место, что хорошо видно на приведен-
ном выше рисунке (рис. 4.6). При задании CELLSPACING=O рамки смежных
ячеек сольются и создадут впечатление единой сетки таблицы (рис. 4.7).

Задание нулевого расстояния между ячейками - Netscape рр > Б

Ячейка 1 строки 1 [Ячейка 2 строки

Ячейка 1 строки 2[Ячейка 2 строкин22| Щ Рис. 4.7. Таблица
со значением
~-. CELLSPACING=0
122 Часть I. Основы HTML

Параметр CELLPADDING
Форма записи параметра аналогична CELLSPACING. Величина num определяет
размер свободного пространства (отступа) между рамкой ячейки и данными
внутри ячейки. По умолчанию значение принимается равным единице. Ус-
тановка параметра CELLPADDING равным нулю может привести к тому, что
некоторые части текста ячейки могут касаться ее рамки, что выглядит не
очень эстетично.
На рис. 4.8 показан пример таблицы со значением CELLPADDING=IO.

Ячейка 1 строки 1 Ячейка 2 строки 1

Ячейка 1 строки 2 Ячейка 2 строки 2

Рис. 4.8. Таблица
со значением
CELLPADDING=10

Действие параметров CELLPADDING и CELLSPACING очень похоже друг на друга.

Для таблицы без рамок изменение того или другого параметра приводит к
одному и тому же результату. Оба параметра влияют на соответствующие
отступы одновременно по горизонтали и по вертикали. К сожалению, раз-
дельного управления горизонтальными и вертикальными отступами так, как
это сделано, например, для отступов от изображений (параметры HSPACE и
VSPACE тэга <IMG>), не предусмотрено.
Все три параметра — BORDER, CELLPADDING и CELLSPACING действуют независи-
мо друг от друга, если какой-нибудь из них опущен, то берется его значе-
ние, принятое по умолчанию. В частности, если опущены все перечислен-
ные параметры, то минимальное расстояние между данными из смежных
ячеек будет равно 6 пикселам (для Netscape). Это значение складывается из
двух пикселов для CELLSPACING, одного пиксела для CELLPADDING и одного
пиксела для рамки каждой из ячеек. Наиболее компактная таблица будет
получена заданием следующего описания:
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>

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

Примером использования может служить таблица, все ячейки которой со-
держат рисунки одинакового размера, которые необходимо расположить
рядом друг с другом.
Глава 4. Таблицы в HTML 123

Параметры WIDTH и HEIGHT

При отображении таблиц их ширина и высота автоматически вычисляются
браузером и зависят от многих факторов: значений параметров, заданных в
описании всего документа, данной таблицы, отдельных ее строк и ячеек,
содержимого ячеек, а также параметров, задаваемых при просмотре доку-
мента в том или ином браузере, например, типа и размеров шрифта, разме-
ров окна просмотра и др. При отображении расчет размеров таблиц выпол-
няется автоматически с учетом этих факторов, при этом делается попытка
представить таблицу в наиболее удобном виде — расположить таблицу так,
чтобы она помещалась в окне просмотра. Общая схема просмотра больших
документов, как правило, сводится к линейной прокрутке содержимого до-
кумента по вертикали и чтении текста, перемежаемого различными табли-
цами, изображениями и т. п. Это относится как к HTML-документам, так и
к обычным документам, создаваемым в любых текстовых редакторах. Боль-
шинство как текстовых редакторов (например, Microsoft Word), так и
HTML-браузеров автоматически форматируют текст так (если возможно),
чтобы длина строк не превосходила ширину окна просмотра. Это позволяет
избежать необходимости горизонтальной прокрутки документа. Аналогич-
ные действия предпринимаются браузерами с таблицами — по возможности
форматировать их таким образом, чтобы ширина таблицы не превосходила
ширины окна просмотра. Можно сделать вывод, что ширина таблиц являет-
ся более важным, первостепенным параметром, расчет которого выполняет-
ся в первую очередь по сравнению с высотой.
В большинстве случаев динамическое определение размеров таблицы дает
в результате эстетически соразмерное изображение с эффективным исполь-
зованием реальной площади окна просмотра. Однако бывает необходимо
принудительно указывать ширину или высоту таблицы. Для этой цели ис-
пользуются параметры WIDTH (ширина таблицы) и HEIGHT (высота таблицы)
тэга <TABLE>. Форма записи: иютн=шт или юютн=пит%, где пит — численное
значение ширины всей таблицы в пикселах или в процентах от всего разме-
ра окна. Заметим, что допустимо задавать значения, большие 100%, хотя
трудно представить себе случай, где это необходимо. Пример:
<TABLE WIDTH=200>.

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

что задание конкретного значения параметра, например иютн=2сю, не озна-
чает, что таблица в любом случае будет иметь указанную ширину, а лишь
определяет рекомендуемую ширину, которая будет выдержана по возможно-
сти. Поясним это на примерах. Пусть имеется таблица, которая в данных
условиях по умолчанию имела бы ширину, меньшую заданной. В этом слу-
чае браузер увеличит ширину таблицы до требуемой путем пропорциональ-
ного расширения всех колонок таблицы. При сужении окна просмотра ши-
рина таблицы изменяться не будет, и, возможно, для ее просмотра потребу-
ется горизонтальная прокрутка. Если же таблица по умолчанию имеет
124 Часть I. Основы HTML

ширину, большую заданной, то браузер сделает попытку уменьшить ее ши-

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

Параметр ALIGN
Данный параметр тэга <TABLE> определяет горизонтальное расположение
таблицы в области просмотра. Допустимые значения — LEFT (выравнивание
влево) и RIGHT (выравнивание вправо). По умолчанию таблицы выровнены
по левому краю. Заметим, что среди допустимых значений нет типичного
значения для параметра выравнивания — CENTER. В некоторых источниках
по языку HTML значение CENTER (по центру) приводится в качестве допус-
тимого в данном случае. Это соответствует спецификации HTML, но на
практике и Netscape Navigator, и Microsoft Internet Explorer реализуют только
два значения. Дело в том, что присутствие параметра ALIGN в тэге <TABLE> не
только определяет месторасположение таблицы, но и разрешает выполнить
обтекание таблицы текстом с противоположной стороны аналогично обте-
канию картинок. Обтекание таблицы текстом с двух сторон не предусматри-
вается ни в каких случаях. Для более точного управления обтеканием следу-
ет использовать тэг <BR> с параметром CLEAR так же, как это выполняется
для <IMG>. Если параметр ALIGN опушен, то место справа и/или слева от таб-
лицы всегда будет пустым независимо от ее ширины. Если таблица не тре-
бует обтекания текстом, то можно добиться ее расположения по центру ок-
на просмотра. Для этого, например, можно все описание таблицы поместить
внутри пары тэгов <CENTER> и </CENTER>.
Приведем пример таблицы с обтекающим текстом, отображение которой
показано на рис. 4.9.
<HTML>
<HEAD>
<Т1ТЬЕ>Таблица с обтекающим ее TeKCTOM</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=LEFT WIDTH=70%>
<САРТ1(Ж><НЗ>Наиболее употребительные мужские mieHa<BR> взрослого
населения Санкт-Петербурга</Н3>
</CAPTION>
<UL>
Глава 4. Таблицы в HTML 125

<TRXTD VALIGN=TOP>
<Ы>Абрам <Ы>Александр <Ы>Алексей <Ы>Альберт <Ы>Анатолий <Ы>Андрей
<Ы>Аркадий <Ы>Борис <Ы>Вадим <Ы>Валентин <Ы>Валерий <Ы>Василий
<Ы>Виктор <Ы>Виталий <Ы>Владимир <Ъ1>Владислав <Ы>Вячеслав
<Ы>Геннадий <Ы>Георгий <Ы>Герман <Ы>Григорий <Ы>Дмитрий
</TD>
<TD VALIGN=TOP>
<Ы>Евгений <Ы>Ефим <Ы>Иван <Ы>Игорь <Ы>Илья <Ы>Иосиф <ЫЖонстантин
<Ы>Лев <Ы>Леонид <Ы>Михаил <Ы>Николай <Ы>Олег <Ы>Павел <Ы>Петр
<Ы>Роман <Ы>Семен <Ы>Сергей <Ы>Станислав <Ы>Эдуард <Ы>Юрий <Ы>Яков
</TD>
</UL>
</TR>
</TABLE>
<BRXBR><BR><BR><BRXBR>
Приведенные данные получены на основе анализа репрезентативной выборки,
содержащей сведения о 5000 мужчин в возрасте старше 18 лет, проживающих
в Санкт-Петербурге.<BR> Указанные 43 наиболее часто встречаемых имени
охватывают 92% выборки.<BR> Частота встречаемости каждого из остальных
имен не превосходит 0.3%
</BODY>
</HTML>

Наиболее употребительные мужские имена

взрослого населения Санкт-Петербурга

Абрам Евгений
Александр Ефим
Алексей Иван Приведенные данные
Альберт Игорь получены на основе
Анатолий Илья анализа
Андрей Иосиф репрезентативной
Аркадий Константин выборки, содержащей
Борис Лев сведения о 5000
Вадим Леонид мужчин в возрасте
Валентин Михаил старше 18 лет,
Валерий Николай проживающих в
Василий Олег Санкт-Петербурге.
Виктор Павел Указанные 43 наиболее
Виталий Петр часто встречаемых
Владимир Роман имени охватывают 92%
Владислав Семен выборки.
Вячеслав Сергей Частота встречаемости
Геннадий Станислав каждого из остальных
Георгий Эдуард имен не превосходит
Герман Юрий 0.3%
Григорий Яков
Дмитрий

Рис. 4.9. Таблица без рамок с обтекающим текстом

126 Часть I. Основы HTML

Этот документ состоит из таблицы без рамок с параметром выравнивания

ALIGN=LEFT, что позволяет тексту, следующему за таблицей, расположиться
справа от нее. Таблица состоит всего из одной строки, в которой содержит-
ся две ячейки. Каждая ячейка содержит часть ненумерованного списка <UL>.
Использование таблицы для вывода списка — это один из способов прину-
дительного расположения списка в несколько колонок, что также иллюст-
рирует данный пример. Текст, расположенный справа от таблицы, может
весь там не поместиться, при этом он будет продолжен после таблицы. По-
пробуйте на данном примере уменьшать ширину окна просмотра браузера, и
в какой-то момент весь текст окажется снизу таблицы. Напомним, что для
принудительного прерывания обтекания текста вдоль таблицы (например,
если последующий текст логически не связан с таблицей и должен распо-
лагаться ниже ее) следует воспользоваться кодом <вк> с установленным па-
раметром CLEAR. Для данного примера нужно записать <BR CLEAR=LEFT> или
<BR CLEAR=ALL>. Некоторые браузеры разрешают запись параметра CLEAR без
значения, но этого делать не рекомендуется. Для осуществления той же за-
дачи задание нескольких переводов строки <BR> без параметра CLEAR (как
это сделано в примере перед текстом для его сдвига вниз на несколько
строк) или нескольких кодов начала нового абзаца <р> — неверное решение.
Приведем несколько иной пример для создания подобной страницы, ото-
бражение которой показано на рис. 4.10.
<HTML>
<HEAD>
<Т1Т1|Е>Таблица без обтекающего TeKCTa</TITLE>
</HEAD>
<BODY>
<TABLE>
<САРТ10МХНЗ>Наиболее употребительные мужские имена<ВК>
взрослого населения Санкт-Петербурга</Н3>
</CAPTION>
<OL>
<TRXTD VALIGN=TOP>
<LI>A6paM <LI>AneKcaHflp <^1>Алексей <LI>Anb6epx <Х1>Анатолий <LI>AHflpeu
<Ы>Аркадий <LI>Bopnc <LI>BaflHM <Ы>Валентин <Ь1>Валерий <Ы>Василий
<LI>BnKTOp <Ы>Виталий <^1>Владимир <Ы>Владослав <Ы>Вячеслав
<Ь1>Геннадий <Ы>Георгий <LI> Герман <1Д>Григорий <Ы>Дмитрий
</TD>
<TD VALIGN=TOP>
<LI>EBreHHH <LI>Eфим <LI>MaaH <Ы>Игорь <Ъ1>Илъя <Ы>Иосиф <ЫЖонстантин
<LI>nes <Ь1>Леонид <Ы>Михаил <^1>Николай <LI>Oлeг <LI>Пaвeл <Ы>Петр
<LI>PoM3H <LI>CeM6H <LI>Cepren <LI>Cтaниcлaв <LI>3nyapn. <LI>K)pmi <LI>HKOB
</TD>
</UL>
<TD WIDTH=200>
Глава 4. Таблицы в HTML 127

Приведенные данные получены на основе анализа репрезентативной выборки,

содержащей сведения о 5000 мужчин в возрасте старше 18 лет, проживающих
в Санкт-Петербурге.<BR> Указанные 43 наиболее часто встречаемых имени
охватывают 92% выборки.<BR> Частота встречаемости каждого из остальных
имен не превосходит 0.3%
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

£*! bit V». . Ци 8.1'

Наиболее употребительные мужские имена il

взрослого населения Санкт-Петербурга
1
Абрам
Александр
Евгений
Ефим 1
тт
Д nevppvt ft

Приведенные данные II
Альберт Игорь получены на основе
Анатолий Илья анализа
Андрей Иосиф репрезентативной
Аркадий Константин выборки, содержащей
Борис Лев
сведения о 5000 мужчин ||
Вадим нид возрасте старше is лет. Я
Валентин Михаил
проживающих в ||
Валерий Николай
Санкт-Петербурге.
Василий Олег
Указанные 43 наиболее ||
Виктор Павел
часто встречаемых имени Ц
Виталий Петр
охватывают 92%
Владимир Роман
выборки.
Владислав Семен
Частота встречаемости
Вячеслав Сергей
каждого из остальных
Геннадий Станислав
имен не превосходит т
Георгий Эдуард
0.3%
Герман Юрий

i
Григорий Яков : Рис. 4.10. Таблица
Дмитрий без рамок, содержащая
ЛШЯ1™>-:. три столбца

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

Весь документ состоит из одной таблицы с заголовком, содержащей три
ячейки в одной строке. Первые две ячейки полностью повторяют предыду-
щий пример. В третьей ячейке располагается текст, который комментирует
содержание первых двух ячеек. Здесь нет необходимости задавать принуди-
тельное обрывание текста, как это описано в предыдущем случае. Весь
текст, относящийся к таблице, должен располагаться внутри третьей ячейки,
а последующий текст — после окончания описания всей таблицы </TABLE>.
Оба примера при просмотре на полном экране выглядят одинаково, за
исключением заголовка, который в первом случае расположен посередине
128 Часть I. Основы HTML

двухколонного списка, а во втором — располагается посередине всех трех

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

Форматирование данных внутри таблицы

Каждую отдельную ячейку внутри таблицы можно рассматривать как об-
ласть для независимого форматирования. Все правила, которые действуют
для управления отображением текста, могут быть использованы для форма-
тирования текста внутри ячейки. Внутри ячейки допустимо использование
практически всех элементов HTML, которые могут появляться внутри тела
документа <BODY>, в том числе тэги, управляющие расположением текста -
<р>, <BR>, <HR>, коды заголовков — от <HI> до <нб>, тэги форматирования
СИМВОЛОВ — <В>, <I>, <STRONG>, <BIG>, <EM>, <FONT SIZE>, <FONT COLOR>, ТЭГИ
вставки графических изображений <IMG>, гипертекстовых ссылок <А> и т. д.
Сразу же подчеркнем, что область действия тэгов, заданных внутри отдель-
ной ячейки, ограничивается пределами этой ячейки независимо от наличия
завершающего тэга. Например, если внутри ячейки определен цвет текста -
<FONT COLOR=RED>, то даже при отсутствии завершающего кода </FONT> или
расположения его через несколько ячеек или строк таблицы, текст следую-
щей ячейки будет отражен цветом по умолчанию.
Для форматирования данных внутри ячеек таблицы предусмотрены следую-
щие параметры.
Параметры выравнивания содержимого ячеек — ALIGN и VALIGN. Могут при-
меняться в кодах <TR>, <TD> и <тн>. Параметр горизонтального выравнива-
ния ALIGN может принимать значения LEFT, RIGHT и CENTER (по умолчанию
LEFT для <то> и CENTER для <тн>). Параметр вертикального выравнивания
VALIGN может принимать значения ТОР (по верхнему краю), BOTTOM (по ниж-
нему краю), MIDDLE (посередине), BASELINE (по базовой линии). По умолча-
нию — MIDDLE. Выравнивание по базовой линии обеспечивает привязку тек-
ста отдельной строки во всех ячейках к единой линии. Задание параметров
выравнивания на уровне кода <TR> определяет выравнивание для всех ячеек
данной строки, при этом в каждой отдельной ячейки строки может быть
определены свои параметры, переопределяющие действие параметров, за-
данных в <TR>.
Приведем пример таблицы, в которой данные в ячейках первого столбца
выровнены вправо, второго столбца — по центру, а третьего — влево (зна-
чение по умолчанию):
<HTML>
<HEAD>
<Т1^Е>Выравнивание элементов Ta6rombi</TITLE>
</HEAD>
Глава 4. Таблицы в HTML 129
<BODY>
<TABLE BORDER WIDTH=100%>
<TR>
<TD ALIGN=RIGHT>H4eiiKa
<TD ALIGN=CENTER>fl4eiiKa 2</TD>
<ТО>Ячейка 3</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>H4eiiKa 4</TD>
<TD ALIGN=CENTER>H4eiiKa 5</TD>
<ТО>Ячейка 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Отображение этого примера браузером показано на рис. 4.11.

Выравнивание элементов таблицы - Netscape ИЕ1Ш

Vim- Qc.

А «£
N..-V:.--;!-V : I'Wil

Ячейка 1 1 Ячейка 2 Ячейка 3

Ячейка 4 1 Ячейка 5 |Ячейка б

Рис. 4.11. Выравнивание данных в ячейках таблицы

Параметр NOWRAP отключает возможность автоматического разбиения текста

ячейки на строки. Может применяться в кодах <TR>, <TD> и <тн>. Следует
избегать неоправданного применения этого параметра, так как это может
значительно сократить возможности динамического изменения размеров
таблиц и ухудшить их восприятие. В большинстве случаев достаточно при-
менить NOWRAP для отдельных ячеек, действительно требующих запрещения
переноса слов на новую строчку. Перенос слов осуществляется только по
разделителям между словами (пробелам), и в ряде случаев для запрещения
разрыва текста в отдельных местах следует вместо символа пробела задавать
код неразрывного пробела snbsp; (NonBreaking Space). В качестве примеров
можно привести случаи, где разрыв не рекомендуется — между числовым
значением и единицами измерения данной величины; между фамилией и
инициалами. Так, текст 650 км или ЕЛЬЦИН Б.Н. рекомендуется записывать
В виде 650&пЬзр;кмИ Ельцин&пЬзр;Б.Н.
Параметры WIDTH и HEIGHT могут применяться в кодах <то> и <тн>. Их син-
таксис аналогичен синтаксису этих параметров для тэга <TABLE>. Их значе-

5 Зак. 944
130 Часть I. Основы HTML

ние определяет ширину или высоту ячейки, для которой записаны данные
параметры. Значения могут задаваться в пикселах или в процентах от разме-
ров всей таблицы. Microsoft Internet Explorer разрешает задавать значение
WIDTH только в пикселах. Поскольку таблица представляет собой связную
структуру, состоящую из строк и колонок, то задание ширины для какой-
либо ячейки влияет на ширину всей колонки, в которой расположена ячейка,
а задание высоты влияет на всю строчку. Если в колонке значение ширины
указано лишь в одной ячейке, то данное значение становится шириной всей
колонки. Если таких указаний несколько, то выбирается максимальное зна-
чение. Те же свойства характерны и для строк.
Для сложных таблиц характерна потребность в объединении нескольких
смежных ячеек по горизонтали или по вертикали в одну. Данная возмож-
ность реализуется с помощью параметров COLSPAN (COLunm SPANning) и
ROWSPAN (ROW SPANning), задаваемых в кодах <то> или <тн>. Форма записи:
coLSPAN=num, где num — числовое значение, определяющее, на сколько
столбцов следует расширить текущую ячейку по горизонтали. Применение
параметра ROWSPAN аналогично, только здесь указывается количество строк,
которые должна захватить текущая ячейка по вертикали. По умолчанию для
этих параметров устанавливается значение, равное единице. Допустимо од-
новременное задание значений обоих параметров для одной ячейки. Пра-
вильная установка значений этих параметров может оказаться не очень про-
стой задачей, тем более, что большинство HTML-редакторов позволяют ви-
зуально конструировать с последующей генерацией HTML-кодов лишь
простейшие таблицы.
На рис. 4.12 показан пример отображения таблицы, полученный по сле-
дующему HTML-коду:
<HTML>
<HEAD>
<Т1ТЬЕ>Использование параметров COLSPAN и ROWSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD ROWSPAN=2^4eiiKa, захватывающая две строки</ТО>
<TD COLSPAN=2>fl4eUKa, захватывающая два столбца</ТО>
</TR>
<TR>
<ТО>Ячейка 3</TD>
<ТО>Ячейка 4</TD>
</TR>
<TR>
<ТО>Ячейка 5</TD>
<ТО>Ячейка 6</TD>
Глава 4. Таблицы в HTML 131

<ТО>Ячейка 7</TD>
</TR>
</TABLE>
</BODY>
</HTML>

SPAN и ROWSPAN - Netscape ИВВ

Ill v" v <>

*„, M>r-.~.,,K*S ,.; .,.
! PaA •:.,',.^ Retead Nome <,*„>,• N r . ШН i 1

[Ячейка, захватывающая два столбца

|Ячейка, захватывающая две строки f
|Ячейка 3 |Ячейка 4
.__.
[Ячейка 5 [Ячейка 7

Рис. 4.12. Таблица с ячейками, распространяющимися на несколько строк

или столбцов

Невнимательное задание значений параметров раздвижки ячеек может при-

вести к их взаимному перекрытию и конфликтам, при которых результат
непредсказуем. Характерное применение протяженных ячеек — общий заго-
ловок для нескольких смежных колонок или строк.
Приведем пример кода HTML (отображение которого показано на рис. 4.13),
в котором протяженные ячейки сформированы некорректно.
<HTML>
<HEAD>
<Т1ТЬЕ>Неверное использование протяженных ячеек</Т1ТЬЕ>
</HEAD>
<BODY>
<TABLE BORDER WIDTH=100%>
<TR ALIGN=CENTER>
<ТО>Ячейка 1</TD>
<ТО>Ячейка 2</TD>
<TD ROWSPAN=3>
Ячейка 3<BR> (распространеннс1ЖВР>на Tpn<BR>CTpo4Kn)
</TD>
</TR>
<TR АЫСЫ=СЕМТЕЯХТО>Ячейка 4</ТОХТО>Ячейка 5</TDX/TR>
<TR ALIGN=CENTER>
<ТО>Ячейка 6</TD>
<TD СОЬЗРАЫ=2>Ячейка 7 (распространенная на два столбца)</TD>
</TR>
132 Часть I. Основы HTML

</TABLE>
</BODY>
</HTML>

1 •& Неверное использование протяженных ячеек - Netscape i [ 1 '- ?

; . • . , • • • • wf^ff^fffffffft S»g^.:v:.::y^::::^gi:gg;;gg:'g^:i;i^SsSS5SS;;^
Fiie E'i' ;'!•;-. || Cc^-^rJcate 4ifcj = ; ••

| Ячейка 1 Ячейка 2 Ячейка 3

i Ячейка 4 Ячейка 5 (распространен![ая
:
i ua три
i Ячейка б
:! ;
Ячейка 7 (распространеннегрь»!^^ столбца)

И "tl^l • -fM-f,,:,^'' '• -:- __. i

Рис. 4.13. Результат некорректного определения протяженных ячеек
(наложение текста)
^
Параметр BGCOLOR задает цвет подложки всей таблицы, отдельных строк или
ячеек. Может встречаться в тэгах <TABLE>, <TR>, <TD> и <тн>. Эта возмож-
ность не предусматривается спецификацией HTML, однако поддерживается
как Netscape, так и Microsoft Internet Explorer. Форма записи такая же, как и
для тэга <BODY>, а именно: вссоьок=значение, где в качестве значения задает-
ся содержание цвета в RGB-формате или его название.
Пример: <TD BGCOLOR=#FFOOOO> или <TD вссоьок=гесз>.

Вложенные таблицы
Отдельные ячейки таблицы могут содержать практически любые тэги языка
и данные, разрешенные в разделе <BODY> документа. В том числе, внутри
ячейки таблицы может быть целиком размещена другая таблица. Такие таб-
лицы называются вложенными. Правила их построения не отличаются от
построения таблиц и не нуждаются в отдельном описании. Отметим лишь,
что не все браузеры, поддерживающие таблицы, правильно отражают слож-
ные таблицы с несколькими уровнями вложенности, поэтому их использо-
вание требует осторожности.
Приведем пример таблицы, использующей один уровень вложенности.
<HTML>
<HEAD>
<Т1ТЬЕ>Города Ленинградской области</Т1ТЬЕ>
</HEAD>
<BODY>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<САРТ10ЫХН2>Города Ленинградской области</Н2>
H — население города (тыс.жит.,1992 г.)snbsp;Snbsp;&nbsp;
Глава 4. Таблицы в HTML 733

Р — расстояние от Санкт-Петербурга (км)</CAPTlON>

<TRXTD VALIGN=TOP>
<TABLE BORDER CELLPADDING=3 CELLSPACING=0>
<CAPTIONXSTRONG>ropOfla, подчиненные CaHKT-IIeTep6ypry</STRONG></CAPTION>
<TRXTH>Fopofl< /THXTH>H< /TH><TH> P< /TH>< /TR>
<ТКХТО>Зеленогорск </TDXTD ALIGN=RIGHT> 13.6</TDXTD ALIGN=RIGHT>
50</TDX/TR>
<ТКХТОЖолпино </TD><TD ALIGN=RIGHT>144 . 6</TDXTD ALIGN=RIGHT>
26</TDX/TR>
<ТКХТО>Кронштадт </TDXTD ALIGN=RIGHT> 45.2</TDXTD ALIGN=RIGHT>
48</TDX/TR>
<TRXTDXHOMOHOCOB </TDXTD ALIGN=RIGHT> 42.0</TDXTD ALIGN=RIGHT>
40</TDX/TR>
<TR><TD>Пaвлoвcк </TDXTD ALIGN=RIGHT> 25.4</TDXTD ALIGN=RIGHT>
30</TDX/TR>
<ТКХТО>Петродворец </TDXTD ALIGN=RIGHT> 83.8</TDXTD ALIGN=RIGHT>
29</TDX/TR>
<ТКХТО>Пушкин </TDXTD ALIGN=RIGHT> 95.K/TDXTD ALIGN=RIGHT>
24</TDX/TR>
<ТКхТО>Сестрорецк </TDXTD ALIGN=RIGHT> 34.9</TDXTD ALIGN=RIGHT>
35</TDX/TR>
</TABLE>
<P>
<CENTER>
Все города, nofl4HHeHHHe<BR>aflMHHHCTpauMH<BR>CaHKT-neTep6ypra,
HMeioT<BR>npHMbie ropOflCKMe<BR>Tene<J>OHHbie номера.
</CENTER>
</TD>
<TD WIDTH=50X/TD>
<TD VALIGN=TOP>
<TABLE BORDER CELLPADDING=3 CELLSPACING=0>
<CAPTION><STRONG>Гopoдa областного подчинения</САРТЮЫ>
<TRXTH>ropOfl</THXTH>H</THXTH>P</THX/TR>
<TRXTD>BoKCMToropCK </TDXTD ALIGN=RIGHT> 21.6</TDXTD
ALIGN=RIGHT>245</TDX/TR>
<TRXTD>Bonxos </TDXTD ALIGN=RIGHT> 50.3</TDXTD
ALIGN=RIGHT>122</TDX/TR>
<TR><TD>Bceвoлoжcк </TDXTD ALIGN=RIGHT> 32. 9</TDXTD ALIGN=RIGHT>
24</TDX/TR>
<TRXTD>Bbi6opr </TDXTD ALIGN=RIGHT> 80.9</TD>
<TD ALIGN=RIGHT>130</TDX/TR>
<ТКХТО>Высоцк </TDXTD ALIGN=RIGHT> 1.0</TDXTD
ALIGN=RIGHT>159</TDX/TR>
<ТК><ТО>Гатчина </TDXTD ALIGN=RIGHT> 80.9</TD>
<TD ALIGN=RIGHT> 46</TDX/TR>
<ТКХТО>Ивангород </TDXTD ALIGN=RIGHT> 11.9</TDXTD
ALIGN=RIGHT>147</TDX/TR>
<ТК><ТОЖаменногорск </TDXTD ALIGN==RIGHT> 5.9</TD>
<TD ALIGN=RIGHT>157</TDX/TR>
134 Часть I. Основы HTML

«СТЕХТОЖингисепп </TDXTD ALIGN=RIGHT> 51.5</TDXTD

ALIGN=RIGHT>138</TDX/TR>
<ТКХТО>Кириши </TDXTD ALIGN=RIGHT> 53.8</TDXTD
ALIGN=RIGHT>115</TDX/TR>
<TRXTD>KMpOBCK </TDXTD ALIGN=RIGHT> 23.8</TDXTD ALIGN=RIGHT>
55</TDX/TR>
<TR><TD>Лoдeйнoe Поле</ТО><ТО ALIGN=RIGHT> 27.3</TDXTD
ALIGN=RIGHT>244</TDX/TR>
<ТКХТО>Луга </TDXTD ALIGN=RIGHT> 41.8</TDXTD ALIGN=RIGHT>139</TDX/TR>
</TABLE>
</TD>
<TD WIDTH=50X/TD>
<TD VALIGN=TOP>
<TABLE BORDER CELLPADDING=3 CELLSPACING=0>
<CAPTIONXSTRONG> (продолжение таблицы) </CAPTION>
<ТЯХТН>ГорОД< /ТНХТН>Н< /ТНХТН>Р< /ТНХ /TR>
<TR><TD>Любaнь </TDXTD ALIGN=RIGHT> 4.7</TDXTD ALIGN=RIGHT>
85</TDX/TR>
<ТКХТО>Новая Ладога </TDXTD ALIGN=RIGHT> 11.2</TDXTD
ALIGN=RIGHT>14K/TDX/TR>
<ТКХТО>Отрадное </TDXTD ALIGN=RIGHT> 22 . 9</TDXTD
ALIGN=RIGHT>40</TDX/TR>
<ТКХТО>Пикалево </TDXTD ALIGN=RIGHT> 25.K/TDXTD
ALIGN=RIGHT>246</TDX/TR>
<ТКХТО>Подпорожье </TDXTD ALIGN=RIGHT> 23.K/TDXTD
ALIGN=RIGHT>285</TDX/TR>
<TRXTD>IIpMMOpCK </TDXTD ALIGN=RIGHT> 6.7</TDXTD
ALIGN=RIGHT>137</TDX/TR>
<ТЕХТО>Приозерск </TDXTD ALIGN=RIGHT> 20.5</TDXTD
ALIGN=RIGHT>145</TDX/TR>
<ТКХТО>Светогорск </TDXTD ALIGN=RIGHT> 15.8</TDXTD
ALIGN=RIGHT>20K/TDX/TR>
<TRXTD>QiaHUbi </TDXTD ALIGN=RIGHT> 42.6</TDXTD
ALIGN=RIGHT>192</TDX/TR>
<ТКХТО>Сосновый Бор </TDXTD ALIGN=RIGHT> 57. 6</TDXTD ALIGN=RIGHT>
81</TDX/TR>
<ТКхТО>Тихвин </TDXTD ALIGN=RIGHT> 72.0</TDXTD
ALIGN=RIGHT>200</TDX/TR>
<TRXTD>TOCHO </TDXTD ALIGN=RIGHT> 33.8</TDXTD ALIGN=RIGHT>
53</TDX/TR>
<TR><TD>IIIлиcceльбypг </TDXTD ALIGN=RIGHT> 12.5</TDXTD ALIGN=RIGHT>
64</TDX/TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Глава 4. Таблицы в HTML 135

Города Ленинградской области

Н - население города (тыс.жит.,1992 г.) Р • расстояние от Санкт-Петербурга (км)
Города, подчиненные Города областного (продолжение
Санкт-Петербургу подчинения таблицы)
о'род ™"]~Н~|р~| Город Н Р Город Н Р
_
ногорск | 13-<ШО! Бокситогорск 21.6 245 Любань 4.7
.!!
шно ~| 144.6 [26 ] Волхов 50.3 122 Новая Ладога
шггадг I 45.2 48) |Всеволожск 32.9 24 Отрадное 22.9 40
>носов j 42.0 401 |Выборг 80.9 130 Пикалево 25.1 246
овск | 25.4 зо! Высоцк 1.01159 [Подпорозкье 23.1 285
одаорец ) 83.8 5JH Гатчина 80.9 46 [Приморск 6.7 137
кин 1 95.1 24 j Ивангород 11.9 147 [Приоэсрск 20.5 145
рорецк \ 34.9 35] Каменногорск 5.9 157 [Светогорск 15.8 201
Кингисепп 51.5J138 Сланцы 42.6 192
орода, подчиненные
Кириши 53.8 115 ! Сосновый Бор 57.6 81
администрации
r-Петер бурга, имеют Кировск 23.8 55 J Тихвин 72.0 200|
)ямые городские Лодейное Поле 27.3 244 |Тосно 33.8 53
ефонные номера.
Луга 41.8 139 Шлиссельбург 12.5 64 i

Рис. 4.14. Пример вложенных таблиц

Результат отображения данного примера показан на рис. 4.14.

На первый взгляд кажется, что в примере нет вложенности таблиц. На са-
мом деле весь документ представляет собой таблицу, не имеющую рамок и
состоящую из заголовка и всего одной строки, содержащей пять ячеек. Ор-
ганизация такой таблицы служит единственной цели — расположению дан-
ных на странице. Внутри первой ячейки располагается другая таблица,
имеющая свой заголовок и состоящая из трех столбцов, после которой идет
текст, выровненный посередине. Третья и пятая ячейки также содержат от-
дельные таблицы. Вторая и четвертая ячейки — пустые, они не содержат
никаких данных и имеют единственный параметр WIDTH, определяющий ее
ширину. Их назначение — задать отступ между первой и третьей, а также
третьей и пятой ячейками, в которых располагаются таблицы. Это один из
возможных вариантов задания такого отступа. Другой вариант — использо-
вание параметра CELLSPACING, определяющего расстояние между ячейками,
однако этот параметр задает отступы одновременно и по горизонтали, и по
вертикали, что в данный момент не требуется. Кроме того, пустая ячейка
с заданной шириной при сужении области просмотра будет сокращаться
в отличие от пространства, заданного параметром CELLSPACING (равно как и
CELLPADDING). Попробуйте на данном примере уменьшать ширину области
просмотра в браузере или, что приведет к тем же результатам, увеличивать
размеры шрифта, которым отображается текст. Расстояние между таблицами
136 Часть I. Основы HTML

сократится до нуля, давая возможность видеть одновременно всю информа-

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

Особенности построения таблиц

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

Отображение пустых ячеек в таблицах

Одной из особенностей представления таблиц различными браузерами явля-
ется отображение пустых ячеек. Согласно описанию языка все браузеры
должны дополнять строки пустыми ячейками, если в какой-либо строке их
количество задано меньшим, чем в остальных строках. Кроме того, в любом
месте таблицы могут находиться ячейки, не содержащие данных. Существу-
ет различие между пустыми ячейками и ячейками, содержащими невидимые
данные. В пустых ячейках внутри пары тэгов <то> и </то> не содержится
никакой информации или один или более пробелов, которые не трактуются
как данные. Ячейки, содержащие невидимые данные, к примеру, могут со-
держать код snbsp; или код перевода строки <BR>, или любой текст, цвет
которого совпадает с цветом фона ячейки. Если ячейки, содержащие данные
(пусть даже невидимые), отображаются всеми браузерами одинаково, то
пустые ячейки будут показаны по-разному. Браузер Netscape пустую ячейку
не показывает, т. е. место, где располагается данная ячейка, будет закраше-
но цветом фона страницы, а не цветом фона ячейки в отличие от ячеек, со-
держащих данные. Вокруг пустых ячеек не прорисовывается рамка. Пример
таблицы с пустой ячейкой приведен на рис. 4.15.

Рис. 4.15. Пустая ячейка таблицы

отображается по-разному
различными браузерами
Глава 4. Таблицы в HTML 137

Microsoft Internet Explorer и те, и другие ячейки отображает цветом фона

ячеек. Такой браузер как NSCA Mosaic предоставляет пользователю воз-
можность самому определить характер выдачи пустых ячеек таблицы с по-
мощью выбора соответствующих опций. Знание таких особенностей позво-
лит разрабатывать таблицы, которые будут отображены подходящим обра-
зом, вне зависимости от выбранного пользователем браузера. В ряде случаев
достаточно для этого вместо некоторых пустых ячеек создавать ячейки, со-
держащие единственный КОД Snbsp;.

Выравнивание данных в столбцах таблицы

Характерной проблемой при создании таблиц является задание параметров
выравнивания для отдельных строк или столбцов. Для выравнивания содер-
жимого всех ячеек текущей строки достаточно задать требуемые параметры
в коде <TR>. Однако чаще необходимо обеспечить одинаковое выравнивание
для всех элементов одного столбца, так как в большинстве случаев в столбце
располагаются однородные данные. В ранних версиях HTML для этого
предлагалось использовать параметр COLSPEC (COLumn SPECification), кото-
рый задавался в тэге <TABLE> и определял выравнивание и ширину каждой
колонки таблицы. Для примера, задание COLSPEC="L40 RSO сзо" определяло
для трех колонок таблицы выравнивание данных в ячейках: для первой ко-
лонки — LEFT, для второй — RIGHT и для третьей — CENTER, а также ширину
каждой колонки. По мере развития языка HTML от использования этого
параметра отказались, и в настоящее время он не входит в спецификацию
языка и не поддерживается большинством браузеров. В итоге для решения
такой задачи в Netscape Navigator не имеется специальных средств, и един-
ственным вариантом остается либо использование выравнивания по умол-
чанию, либо задание соответствующих значений в каждой ячейке, где это
необходимо.
В Microsoft Internet Explorer предусмотрены специальные тэги — <COL> и
<COLGROUP>. Эти тэги должны располагаться сразу же за описанием <TABLE>
перед первым появлением тэга <TR>.
Параметрами тэгов <соь> и <COLGROUP> могут быть SPAN, определяющий ко-
личество смежных колонок, на которые распространяется действие значе-
ний параметров, и ALIGN, определяющий горизонтальное выравнивание дан-
ных во всех ячейках соответствующего столбца (или столбцов). Допустимы-
ми значениями параметра ALIGN являются LEFT, RIGHT и CENTER. Для
параметра SPAN значение по умолчанию равно единице.
Тэг <COLGROUP> дополнительно позволяет задавать параметр VALIGN, опреде-
ляющий вертикальное выравнивание данных в ячейках. Допустимыми зна-
чениями параметра VALIGN являются MIDDLE, TOP и BOTTOM.
Различие между тэгами <COLGROUP> и <COL> заключается в том, что первый из
них, помимо задания параметров выравнивания данных для столбцов, вы-
138 Часть I. Основы HTML

полняет также условное объединение нескольких столбцов в группу. Эффект

такого объединения проявляется при использовании параметра RULES, кото-
рый описывается ниже. По умолчанию все столбцы таблицы считаются од-
ной группой. Тэг <соь> должен использоваться только для определения вы-
равнивания данных в отдельных столбцах в группе.
Приведем пример. Пусть необходимо построить таблицу, содержащую 6 столб-
цов, причем данные в первых трех из них должны быть выровнены вправо,
а следующих трех — посередине. Для решения этой задачи следует записать
такой фрагмент HTML-кода:
<TABLE>
<COLGROUP SPAN=3 ALIGN=RIGHT>
•CCOLGROUP SPAN=3 ALIGN=CENTER>
(данные для таблицы)
</TABLE>

Результат отображения этого кода показан на рис. 4.16.

1 .. = ,>„!. «г,,

Ячейка lj| Ячейка 2.1 Ячейка 3| Ячейка 4 Ячейка 5 Ячейка б

Ячейка 7:1 Ячейка ii Ячейка 9|[ Ячейка 10 Ячейка 11 Ячейка 12

Рис. 4.16. Таблица с разными параметрами выравнивания данных в группах ячеек

Другой пример. Пусть в предыдущей таблице первые две колонки должны

быть выровнены вправо, а третья — посередине, причем все три колонки
необходимо объединить в группу. Последующие три колонки также должны
быть объединены в группу и иметь выравнивание, аналогичное первой группе.
Для решения этой задачи следует записать такой фрагмент HTML-кода:
<TABLE>
<COLGROOP>
<COL SPAN=2 ALIGN=RIGHT>
<COL ALIGN=CENTER>
<COLGROUP>
<COL SPAN=2 ALIGN=RIGHT>
<COL ALIGN=CENTER>
(данные для таблицы)
</TABLE>
Глава 4. Таблицы в HTML 139

В этом примере после тэга <COLGROUP> задаются настройки отдельных столб-

цов данной группы. При этом в тэге <COLGROUP> при необходимости могли
бы быть заданы параметры выравнивания, значения которых распространя-
ются на все столбцы данной группы. Значения параметров, заданные в тэге
<соь>, переопределяют значения из тэга <COLGROUP>. Заметим, что в тэге
<COLGROUP> в данном примере, в отличие от предыдущего, отсутствует пара-
метр SPAN. Здесь его употребление бессмысленно, так как количество эле-
ментов в группе будет определяться следующими за тэгом <COLGROUP> тэгами
<соь>. Поэтому любое заданное значение параметра SPAN тэга <COLGROUP> бу-
дет переопределено.
На рис. 4.17 показан результат реализации приведенного выше кода, а также
вариант отображения такой таблицы с записью RULES=GROUPS в тэге <TABLE>,
из которого виден смысл объединения в группы.

с Совет
Поскольку область применения тэгов <COLGROUP> и <соь> ограничивается
единственным браузером Microsoft Internet Explorer, то следует пользоваться
ими с осторожностью. Удобство использования этих тэгов очевидно, но на
практике большинство таблиц строится с использованием соответствующего
параметра выравнивания ALIGN для каждой ячейки таблицы, где это необхо-
димо, что значительно увеличивает объем исходного кода таблицы, однако
обеспечивает возможность просмотра в любом браузере.

(тдмимчянмнмнтммямммняняняяяя

Of
Bock f > . ibp '-!,:!,,..•>, ШШ ^e«* F*v«! E(S

В следующей таблице столбцы объединены в две группы по три столбца в каждой.

Первые два столбца каждой группы выровнены вправо, а третий - по середине

Ячейка 1:! Ячейка 21 Ячейка 3 Ячейка 4ii Ячейка 5 : Ячейка б

Ячейка 7 Ячейка 89 Ячейка 9 Ячейка 10|| Ячейка Hi Ячейка 12

Следующая таблица отличается только наличием записи RULES=GROUPS в тэге TABLE

Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6

Ячейка 7 Ячейка 8 Ячейка 9 Ячейка 10 Ячейка 11 Ячейка 12

Рис. 4.17. Таблица с группированными столбцами

Задание цвета рамок таблицы

Еще несколько параметров, характерных только для Microsoft Internet Explo-
rer, позволяют выбирать цвет рамок таблиц — BORDERCOLOR, BORDERCOLORLIGHT
 140 Часть I. Основы HTML

и BORDERCOLORDARK. Эти параметры могут задаваться в тэгах <TABLE>, <TD>,

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

( Примечание ^
Браузер Netscape версии 4.x также поддерживает параметр BORDERCOLOR.

Задание фонового рисунка для таблицы

Браузер Microsoft Internet Explorer (а также браузер Netscape версии 4.x) раз-
решает использовать параметр BACKGROUND, определяющий фоновый рисунок
для таблицы так, как это может быть сделано для всего HTML-документа.
Этот параметр может задаваться в тэгах <TABLE>, <TD> и <тн>.

Тэги структурирования таблицы

<THEAD>, <TBODY>v\<TFOOT>
Браузер Microsoft Internet Explorer позволяет использовать ряд новых тэгов
для структурирования таблиц и гибкого управления прорисовкой рамок и
линий сетки.
Тэги <THEAD>, <TBODY> и <тгоот> более строго задают структуру описания
таблицы, выделяя ячейки заголовка таблицы, основное содержимое таблицы
и итоговую строку. Эти тэги могут встречаться только в описании таблиц
внутри пары тэгов <TABLE> и </TABLE>.
Тэги <THEAD> и <TFOOT> используются для описания верхнего и нижнего ко-
лонтитулов таблицы. Эти тэги могут встречаться в таблице не более одного
раза. Завершающий тэг для них можно опускать. Использование данных
тэгов удобно при создании больших таблиц, выходящих за пределы одной
страницы.
Тэг <TBODY> может встречаться многократно в описании таблицы, при этом
требуется использование завершающего тэга </TBODY>. Этот тэг выполняет
логическое группирование данных так же, как и тэг <COLGROUP>, выполняю-
щий группирование смежных столбцов.
При использовании новых тэгов появляется возможность более гибко управ-
лять рамками и линиями сетки таблицы.
Глава 4. Таблицы в HTML 141

Управление прорисовкой рамок вокруг таблицы осуществляется параметром

FRAME тэга <TABLE>, а линий сетки таблицы — параметром RULES. Например,
становится возможным провести только вертикальные линии между колон-
ками и вместо рамки вокруг всей таблицы дать горизонтальные линии сверху
и снизу таблицы.
Параметр FRAME может принимать следующие значения:
О BOX или BORDER — рамка рисуется со всех четырех сторон
П ABOVE — только с верхней стороны
П BELOW — только с нижней стороны
О HSIDES — рисуется нижняя и верхняя сторона
П VSIDES — рисуется левая и правая сторона
О LHS — только с левой стороны
П RHS — только с правой стороны
П VOID — таблица без внешних рамок
Параметр RULES управляет прорисовкой внутренних линий сетки таблицы и
может принимать следующие значения:
П ALL — рисуются все внутренние линии
П GROUPS — рисуются только линии, разделяющие группы
П ROWS — рисуются линии, разделяющие строки
О COLS — рисуются линии, разделяющие столбцы
О NONE — внутренние линии не рисуются
Пример: <TABLE BORDER FRAME=HSIDES RULES=GROUPS>.

Примечание
Прорисовка линий сетки таблицы и рамок будет осуществляться только при
наличии параметра BORDER тэга <TABLE>. При отсутствии этого параметра или
его нулевом значении линии сетки и рамки будут отсутствовать при любых зна-
чениях параметров FRAME и RULES.
Приведем пример полного HTML-кода, создающего таблицу с использова-
нием описанных возможностей:
<HTML>
<HEAD>
<Т1Т1|Е>Вьщеление заголовка и итоговой CTpoKn</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=5 WIDTH=100% RULES=GROUPS FRAME=HSIDES>
<COLGROUP ALIGN=CENTER>
142 Часть I. Основы HTML

<COLGROUP ALIGN=CENTER>
<COLGROUP ALIGN=CENTER>
<CAPTIONXH3>
Пример гибкого управления линиями<ЕЖ>сетки таблицы</НЗ>
</CAPTION>
<THEAD>
<TR>
<ТН>Заголовок столбца 1</ТН>
<ТН>Заголовок столбца 2</ТН>
<ТН>Заголовок столбца 3</ТН>
</TR>
</THEAD>
<TBODY>
<ТК><ТО>Данные</ТОХТО>Данные</ТО><ТО>Данные</ТОХ/ТК>
<ТРХТО>Данные</ТОхТО>Данные</ТОХТО>Данные</ТОХ/^>
<ТКХТО>Данные</ТО><ТО>Данные</ТО><ТО>Данные</ТО></ТК>
<TRXTD>flaHHHe</TDXTD>flaHHbie</TDxTD>flaHHbie</TDX/TR>
<TRXTD>flaHHbie</TDXTD>flaHHbie</TDXTD>flaHHbie</TDX/TR>
<TRXTD>flaHHHe</TD><TD>flaHHHe</TDXTD>flaHHue</TDX/TR>
</TBODY>
<TFOOT>
<TRXTD>№ror</TDXTD>MTor</TDXTD>MTOr</TDX/TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>

Пример гибкого управления линиями

сечки таблицы
Заголовок Заголовок Заголовок
столбца 1 столбца 2 столбца 3
Данные Данные Данные
Данные Данные Данные
Данные Данные Данные
Данные Данные Данные
Данные Данные Данные
Данные Данные Данные Рис. 4.18. Гибкая
Итог прорисовка линий сетки
Итог Итог таблицы браузером
Microsoft Internet
Explorer
Глава 4. Таблицы в HTML 143

В этом примере, отображение которого браузером представлено на рис. 4.18,

показывается один из возможных вариантов управления линиями сетки
и рамками вокруг таблицы. Вокруг таблицы рисуется рамка толщиной
5 пикселов (BORDER=S) только с верхней и нижней стороны (FRAME=HSIDES).
Внутри таблицы рисуются линии сетки, разделяющие группы данных
(RULES=GROUPS). Группы данных определены, во-первых, наличием трех тэгов
<COLGROUP ALIGN=CENTER>, каждый из которых объявляет отдельный столбец
таблицы группой. Во-вторых, тэги <THEAD>, <TBODY> и <TFOOT> также разби-
вают данные таблицы на группы, что определяет прорисовку внутренних
горизонтальных линий.

Задание числа столбцов таблицы

Браузер Microsoft Internet Explorer (а также браузер Netscape версии 4.x) раз-
решает задавать в тэге <TABLE> параметр COLS, значение которого определяет
число столбцов в таблице. Запись этого параметра позволяет ускорить про-
цедуру верстки таблицы при отображении в браузере, так как появляется
возможность определить количество столбцов до окончания загрузки кода
описания таблицы. На текущий момент включение этого параметра никак
не влияет на ход загрузки документа.

Вертикальное выравнивание таблиц

Последний параметр тэга <TABLE>, свойственный только Microsoft Internet
Explorer, это — VALIGN, определяющий вертикальное выравнивание таблицы
относительно текста. Его действие подобно такому же параметру для изо-
бражений.

( Примечание ^
Отметим, что использование одного и того же параметра может существенно
различаться как по назначению, так и по возможным значениям для разных
тэгов даже для одного браузера и в рамках спецификации языка. Поэтому не-
возможно составление сводной таблицы по использованию различных пара-
метров вне контекста их применения. Например, параметр ALIGN только в таб-
лицах используется в трех различных вариантах:
• для тэга <TABLE> параметр ALIGN может принимать значения LEFT или
RIGHT, и означает расположение таблицы, прижатой к левому или правому
краю соответственно;
• для тэга <CAPTION> параметр ALIGN принимает значения ТОР или BOTTOM,
и означает расположение заголовка таблицы над таблицей или под ней;
• для тэгов <TR>, <TD> и <тн> параметр ALIGN принимает значения LEFT,
RIGHT или CENTER, и означает выравнивание содержимого соответствующей
ячейки (или ячеек) таблицы по горизонтали.
144 Часть I. Основы HTML

Альтернатива табличному представлению

Поддержка таблиц стала широко распространенным свойством Web-браузе-
ров, так что практически не осталось причин, из-за которых следовало бы
избегать их использования. Тем не менее рассмотрим возможные варианты
альтернативного представления данных, которые можно использовать вме-
сто таблиц или в добавление к ним.
Некоторые иные способы, не использующие понятие таблиц:
П Использование преформатированного текста. Этот способ традиционно
использовался в ранних версиях языка HTML, когда поддержки таблиц
еще не существовало. Его употребление и до настоящего времени не по-
теряло актуальности, так как такие тексты будут правильно отображаться
любыми браузерами, в том числе и чисто текстовыми.
П Использование изображения, содержащего таблицу. Таблица может быть
создана любым текстовым редактором или даже отображена Web-брау-
зером и затем сохранена как картинка в одном из графических форматов.
Это не лучший вариант, так как при этом теряется вся гибкость динами-
ческой настройки отображения таблиц. Кроме того, возникает необходи-
мость хранения дополнительного файла с изображением, размер которого
к тому же, как правило, будет значительно больше, чем размер текста,
описывающего HTML-таблицу. Возможная область применения — таб-
лицы строго определенных размеров, для которых недопустима зависи-
мость ее отображения от каких-либо внешних факторов (шрифтов, ре-
жимов работы браузера и т. п.).
П Использование списков вместо таблиц. Для простейших случаев вместо
организации таблиц вполне возможно обойтись одним из видов списков,
имеющихся в языке HTML.

Подготовка таблиц
Для подготовки HTML-таблиц могут быть использованы любые редакторы,
большинство из которых имеют средства для визуального создания таблиц.
Приведем пример подготовки таблицы в редакторе HotDog Professional. Для
создания таблицы достаточно выбрать пункт Tables из меню Insert, после
чего будет выдано диалоговое окно, показанное на рис. 4.19. Создание таб-
лицы заключается в заполнении соответствующих полей в окне. После оп-
ределения количества строк и столбцов в таблице можно перейти к непо-
средственному заполнению отдельных ячеек таблицы, которые будут пока-
заны в этом же диалоговом окне. Диалоговое окно имеет кнопку Preview,
нажатие которой позволяет просмотреть получаемую таблицу при помощи
встроенного браузера (рис. 4.20).
Глава 4. Таблицы в HTML 145

•Щ Щ I., Ш ,« ! -•'.! !.,Ы,., . В „Л л„

!головр

1 ;2 !Э !4
5 ;6 !7 !8
9 ПО 111 П2
13 Н4 115 118
17 ;18 !19 J20

\
Рис. 4.19. Диалоговое окно для создания таблиц

Заголовок таблицы
Столбец 1 Столбец 2 Столбец 3 Столбец 4
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 Те
17 J18 19 20

Рис. 4.20. Таблица,

•Яв:///С /WINDOWS /Piofiles/Seigeev/Pa6o4ni»CTO/!/~hdg3015. htm
показанная при помощи
встроенного браузера

После завершения подготовки данных для таблицы следует нажать кнопку

ОК. Тогда сгенерированный код описания таблицы будет вставлен в редак-
тируемый HTML-документ. Для примера, приведенного на рис. 4.19, будет
сгенерирован следующий код:
146 Часть I. Основы HTML

<table border=5 width=100% cellpadding=3 cellspacing=0>

<caption а11дп=1;ор>3аголовок тaблицы</caption>
<tr>
<О1>Столбец K/th>
<1:п>Столбец 2</th>
<th>Cтoлбeц 3</th>
<th>O<Mi6eu 4</th>
</tr>
<tr>
<td>K/td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
(часть кода опущена)
</table>

Аналогичным образом данная задача решается при использовании компо-

ненты Netscape Composer программы Netscape Communicator. На рис. 4.21
показано диалоговое окно, в котором необходимо заполнить нужные поля.
Для ввода дополнительных параметров тэга <TABLE> предусмотрена кнопка
Extra HTML. После заполнения полей диалогового окна следует нажать
кнопку Apply и тогда будет предоставлена возможность заполнения ячеек
таблицы (рис. 4.22).

'Щ||8вНВНЯшЯ^^В||щ

fi Tette'
F Equal

Рис. 4.21. Диалоговое окно

для задания параметров таблицы
программы Netscape Composer
Глава 4. Таблицы в HTML 147

file:/>VUnulled - Netscape Composer

I Paste Ptirt! ('.jr<J Imk Target !гп,ик Н Uw Table

*w. Шя*****™** Шктт и i A A 111 I i.•• i

Заголовок таблицы

Столбец I Столбец 2 Столбец З Столбец 4

L . _ __
, — __,,_,_ — _ — _

i - • 1 Ш ' |

т 'mm Ш Я
•не
Рис. 4.22. Исходная позиция курсора ввода в пустой таблице
 ГЛАВА 5

Фреймы

Фреймы позволяют разбить окно просмотра браузера на несколько прямо-

угольных подобластей, располагающихся рядом друг с другом. В каждую из
подобластей можно загрузить отдельный HTML-документ, просмотр кото-
рого осуществляется независимо от других. Между фреймами, также как и
между отдельными окнами браузера, при необходимости можно организо-
вать взаимодействие, которое заключается в том, что выбор ссылки в одном
из фреймов может привести к загрузке нужного документа в другой фрейм
или окно браузера.
Возможность работы с фреймами впервые была реализована в браузере
Netscape 2.O. Следующая версия браузера Netscape 3.0 обогатила возможно-
сти фреймов, добавив несколько дополнительных параметров к основным
тэгам описания структуры фреймов. Браузер Microsoft Internet Explorer под-
держивает фреймы, начиная с версии 3.0, а также предоставляет уникальную
возможность создания плавающих фреймов.
В данной главе приводятся основные правила и примеры построения фрей-
мов, даются рекомендации по их использованию.

Сферы применения фреймов

Разработчикам HTML-документов предоставляется довольно богатый выбор
форм отображения информации на страницах. Текстовая и графическая ин-
формация может быть упорядочена и организована при помощи списков,
таблиц или просто с помощью параметров выравнивания, задания горизон-
тальных линий, разделения на абзацы. Иногда этих возможностей оказыва-
ется недостаточно и тогда приходится разбивать окно просмотра браузера на
отдельные области или фреймы (frames). В ряде русскоязычных описаний
языка HTML вместо термина фреймы используется термин кадры. Частота
использования обоих терминов примерно одинакова.
Выбор фреймовой структуры отображения информации на WWW оправдан
в следующих случаях:
Глава 5. Фреймы 149

П при необходимости организовать управление загрузкой документов в одну

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

ef Индикаторы ФИНМАРКЕТ ГОСУДАРСТВЕННЫЕ ЦЕННЫЕ

российского БУМАГИ
фондового рынка
^АГЕНТСТВО "ФИНМАРКЕТ' СТАЛО ПЕРВЫМ
РОССИЙСКИМ ИНФОРМАЦИОННЫМ АГЕНТСТВОМ,
Индикаторы
ПОЛУЧИВШИМ ПРАВО ОФИЦИАЛЬНОГО
международного
РАСПРОСТРАНЕНИЯ ИНФОРМАЦИИ О ХОДЕ ТОРГОВ i
Фондового рынка
ГКО-ОФЗ В РЕЖИМЕ РЕАЛЬНОГО ВРЕМЕНИ НА
ММВБ

наиболее ликвидных
акций в Российской Информационное Агентство
Торговой Системе "Финмаркет" начинает распространение информации о
(по данным ходе торгов ГКО-ОФЗ и корпоративными облигациями
ПАУФОР1 РАО "ВСМ" на Московской Межбанковской Валютной
Бирже (ММВБ) в режиме реального времени.
«

Рис. 5.1. Типичный Web-документ с фреймовой структурой

На этой странице окно браузера разбивается на три фрейма. Нижняя часть

окна занимает 20% высоты всего окна и содержит постоянную информа-
цию, которая в данном случае представляет собой графическое меню, по-
зволяющее в любой момент обратиться к наиболее важным разделам. Этот
фрейм не может изменять своих размеров по командам пользователя и не
150 Часть I. Основы HTML

имеет полос прокрутки. Верхняя часть окна (составляющая 80% высоты)

разделена по горизонтали на два фрейма. Левый фрейм содержит оглавле-
ние документов, которые могут быть просмотрены пользователем. Правый
фрейм, занимающий большую часть окна просмотра, предназначен для ото-
бражения самих документов. При первоначальной загрузке эти два фрейма
делят окно браузера по горизонтали в соотношении 15% на 85%. Это соот-
ношение может изменяться пользователем при просмотре, что позволяет
выбрать оптимальные размеры фреймов с учетом содержимого загруженных
документов. Каждый из этих фреймов имеет свою полосу прокрутки, обес-
печивающую возможность просмотра всего содержимого фрейма вне за-
висимости от размера самого фрейма, всего окна браузера и используемых
шрифтов. При выборе любой ссылки в левом фрейме соответствующий до-
кумент будет загружен в правый фрейм. Такая структура позволяет одновре-
менно видеть на экране и оглавление документов, и содержимое выбран-
ного документа.
Приведем без пояснений фрагмент HTML-кода, по которому построен до-
кумент с данной структурой:
<FRAMESET ROWS="80%,20%">
<FRAMESET COLS="15%, 85%">
<FRAME SRC="[Link]">
<FRAME scrolling=auto SRC="[Link]" name="pages">
</FRAMESET>
<FRAME SRC = "[Link]" scrolling=noresize>
</FRAMESET>

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

структур, когда один фрейм служит оглавлением документов, а другой ис-
пользуется для загрузки их содержимого. Решение такой задачи без приме-
нения фреймов обычно выполняется следующим образом. На одной из
страниц располагают оглавление, состоящее из ссылок на другие документы
или их отдельные фрагменты. При переходе по такой ссылке оглавление
исчезает, а на его место загружается нужный документ, после прочтения
которого обычно необходимо вновь вернуться к оглавлению. При использо-
вании фреймов такой возврат становится ненужным, так как оглавление по-
стоянно располагается на части экрана.
На рис. 5.2 показан фрагмент начальной страницы электронного издания
популярного в Санкт-Петербурге адресно-телефонного справочника "Весь
Петербург".
Электронная версия справочника доступна по адресу [Link]
и позволяет находить нужные сведения по запросам пользователя. Данная
страница документа также имеет фреймовую структуру и состоит из двух
фреймов, причем первый из них имеет ширину 100 пикселов, а второй за-
нимает всю оставшуюся ширину окна просмотра. Фрейм, расположенный
Глава 5. Фреймы 151

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

ствующего на экране, а также содержит логотип компании "Nevalink". Вто-
рой фрейм содержит документ, который в данном случае представляет со-
бой форму для запроса пользователя. Структура этой страницы определена
следующим HTML-кодом:
<FRAMESET COLS="100,*" frameborder="0" framespacing="0" border="0">
<FRAME NAME="Menu window" SRC="[Link]" noresize>
<FRAME NAME=content SRC="[Link]" noresize>
</FRAMESET>

11

{Без сортировки

Название фирмы
|Начин*втсяс !щ Г

Область деятельности
[Содержит Щ IL™,^,,.»™.,...!!!,,™.™,...,

Название улицы
jНачинается с Щ j

Номер дома

Телефон

Ьй

Рис. 5.2. Пример реального документа с простейшей структурой фреймов

Фреймы очень похожи на таблицы — и те и другие осуществляют разбиение

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

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

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

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

В конечном итоге, выбор структуры документа — табличной или фреймо-

вой — зависит от многих факторов и не может быть однозначно предопре-
делен.
Приведем пример еще одной страницы, которая с виду построена аналогич-
но предыдущим. На рис. 5.3 показана страница очень популярного во всем
мире сборника программных продуктов, предназначенных в основном для
работы с Интернетом.

MucowtnneltuMebShlml

World Wide Web applications are interactive-access programs

that can be utilized to access data from the Web. FTP
Gopher, and Telpet applications, to name a few. W W W
browsers have graphical interfaces and display pictures. In
addition, applications viewed through browsers can become
"point-and-click" applications.

Click here ta see the

for si,?, 4, or 5 cow retina!

Рис. 5.З. В данном документе фреймы не используются

Глава 5. Фреймы 153

Адрес сервера [Link] Заметим, что имя сервера определила

аббревиатура, полученная от сокращения полного названия сборника — The
Ultimate Collection of Winsock Software. Поскольку сокращение tucows оказа-
лось созвучным словосочетанию two cows (две коровы), то на страницах
сервера сплошь и рядом встречается изображение коров, а рейтинг про-
граммных продуктов оценивается в количестве мычаний ("Моо") и графиче-
ски изображается в виде ряда из соответствующего числа коров. Большин-
ство страниц сервера построено однотипно — в левой части окна приводит-
ся список доступных разделов, а в правой части — перечень программных
продуктов выбранного раздела. На первый взгляд структура документа
должна иметь примерно такой же вид, как и в предьщущих примерах. Одна-
ко в этом документе фреймы не используются! Данная страница построена
при помощи таблицы, которая состоит всего лишь из одной строки с двумя
ячейками. Таблица не имеет обрамления и лишь преследует цель формати-
рования страницы. Впечатление разделения экрана на две части по вертика-
ли создано путем использования фонового графического изображения, со-
держащего вертикальную линию, а вовсе не сеткой таблицы. В этом можно
убедиться, если выполнять просмотр страницы без загрузки изображений.
Использование таблицы здесь, видимо, обусловлено соображениями боль-
шей доступности документов, поскольку фреймы позволяют отображать не
все браузеры.
Недостатком такого подхода в данном случае является необходимость по-
вторения в каждом документе всего списка разделов (левая часть страницы),
что незначительно увеличивает размер файлов.
Сравнение приведенных примеров показывает, что использование таблиц
и фреймов может иногда быть взаимозаменяемым и определяется пожела-
ниями разработчиков. Заметим, что часто при взгляде на страницу с отобра-
женным на ней документом невозможно определить, как она построена.
Конечному пользователю знание внутренней структуры документа не требу-
ется, однако при разработке собственных Web-страниц ознакомление с ис-
ходным кодом существующих документов было бы крайне полезно. В пер-
вом примере (см. рис. 5.1) фреймовая структура документа сразу же видна -
наличие двух вертикальных полос прокрутки уже определяет присутствие
отдельных фреймов. Последующие два примера внешне очень схожи, при-
чем при взгляде на рисунки (рис. 5.2 и 5.3) невозможно определить, что
первый из них построен с помощью фреймов, а второй — с помощью таб-
лиц. Отличия будут проявляться только при работе с ними. В примере на
рис. 5.2 при прокрутке документа левая часть окна будет оставаться на мес-
те, что возможно только при наличии фреймовой структуры. В следующем
примере (рис. 5.3) при прокрутке будет смещаться все содержимое окна.
Посмотреть структуру документа при работе с браузером Netscape можно
воспользовавшись пунктом Page Info (в версиях 3.x браузера Netscape этот
пункт меню назывался Document Info) меню View (рис. 5.4).
154 Часть I. Основы HTML

Рис. 5.4. Меню View

браузера Netscape

Например, документ одного из описанных выше

примеров (см. рис. 5.2) имеет структуру, приведен-
ную на рис. 5.5.
Кроме того, всегда можно ознакомиться с исходным
HTML-кодом всего документа, воспользовавшись
пунктом Page Source меню View (или пунктом View
Frame Source контекстного меню, вызываемого
правой кнопкой мыши, для просмотра HTML-кода документа, загруженного
в выбранный фрейм).

АТС АдреСНО-ТелефоННЫЙ СпраВОЧНИК has the following

structure:

* [Link]
о Frame: [Link]
Background Image:
[Link]
• Image: [Link]
• Image: [Link]
• Image: [Link]
• Image: [Link]
• Image: [Link]
• Image: [Link]
• Frame: [Link]
Form 1:
• Action URL:

Location: http ://www. [Link]/

File MIME Type: text/html
Source: Currently in disk cache
Local cache file: MOPMOPFA
Last Modified:

Рис. 5.5. Структура загруженного документа

Совет
Не следует без необходимости злоупотреблять использованием фреймов, при-
чем их количество не должно превосходить трех-четырех.

Еще один пример реального использования фреймов представлен на рис. 5.6.

Здесь два смежных фрейма использованы для зафузки документов, которые
удобно просматривать одновременно и сопоставлять друг с другом. В каж-
Глава 5. Фреймы 155

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

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

Индикативные котировки на 16.05

1. Покупка I. Продазна

;Цсна, Цена,
Наименование ЦБ {Наименование ЦБ
i lUSD
|"Башкирэнерго" .1 "Башкирэнерго" "[jaoj 16,530 J100.I
|рЕЭС России" РАО |"ЕЭС России" РАО :laop|0,3150 1566^1
рЁЭС "России" РАО |'тас'Россга?'рАр 1[апр]6",212а!5Ж|
«"Газпром" ffasnpoM'' llao! |0,650 llOOOOOS
^'Иркутскэнерго" ГИркутскэнерго" lao-i[6^30
!!"Колэнерго" |"Колэнерго" liaol 6,3"05"
|"Коминефтъ" |"Коминефть"
«"Кубаньэлектросвяэь ]"Ку6аньэлектросвязь" ao 24,50 LOGO
!;"Кубаньэлектросвязь ]"Кубаньэлек1гросвязь" llani |14,0 ......
|"ЛУКойл Нефтяная |"ЛУКойл Нефтяная
aoift 14,90 15.000
компания" [компания"
!|"ЛУКойл Нефтяная ;ГЛУКойл Нефтяная
компания" {компания" цдо is.000
'

!"МсП!иНН'.-<Ь!5ГаЗ" Г'Мепюннебгегаз" ijaoi Й.10 J10.0

Рис. 5.6. Пример использования фреймов для загрузки двух документов,

которые удобно просматривать в сопоставлении друг с другом

Все приведенные примеры данного раздела взяты со страниц популярных

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

Правила описания фреймов

Перейдем теперь к рассмотрению правил записи тэгов, используемых для
документов с фреймовыми структурами.
Давайте для начала рассмотрим полный HTML-код, создающий документ
с фреймами средней сложности:
156 Часть I. Основы HTML

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="[Link]">
<FRAMESET COLS="25%,75%">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>
<FRAME SRC="[Link]">
</FRAMESET>
<NOFRAMES>
Ваш браузер не может отображать фреймы
</NOFRAMES>
</HTML>

Этот пример создает страницу с фреймами, показанную на рис. 5.7. Как вы

видите, этот HTML-код определяет четыре фрейма. Верхний фрейм занима-
ет всю ширину страницы и содержит заголовок. Далее идут два центральных
фрейма, один из которых расположен с левой стороны и занимает 25 про-
центов от ширины экрана, а второй занимает оставшееся место. Последний,
четвертый фрейм занимает нижнюю четверть экрана. В каждый из фреймов
загружается отдельный HTML-документ, имя которого определяется пара-
метром SRC.
Как видно из примера, для описания структуры фреймов применяются тэги
<FRAMESET>, <FRAME> и <NOFRAMES>. Рассмотрим назначение этих тэгов.

...".
и
ц
j l?,Sl::a«w| •.'!>>• ,ldl j Щ j

Заголовок документа

Оглавление Содержательная часть документа

Рис. 5.7. Результат

Нижний колонтитул документа отображения браузером
Netscape HTML-документа
с фреймами, приведен-
ного в примере
Глава 5. Фреймы _ 157

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

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

Контейнер из тэгов <FRAMESET> и </FRAMESET> обрамляет каждый блок опре-

делений фрейма. Внутри контейнера <FRAMESET> могут содержаться только
ТЭГИ <FRAME> И ВЛОЖбННЫе ТЭГИ <FRAMESET>.

Тэг <FRAMESET> имеет два параметра: ROWS (строки) и COLS (столбцы) и запи-
сывается в следующем виде:
<FRAMESET ROWS="crmcoK значений" COLS="cnMCOK значений">.

Примечание
Некоторые браузеры разрешают использовать дополнительные параметры тэ-
га <FRAMESET>. Обзор возможностей браузеров Netscape и Microsoft Internet
Explorer дается в конце главы.

Можно определить значения для ROWS или COLS, или обоих вместе. Необхо-
димо определить, по меньшей мере, два значения хотя бы одного из этих
параметров. Если другой параметр опущен, то его значение принимается
равным 100%.

Совет
Если в тэге <FRAMESET> определено только одно значение для ROWS и COLS, то
этот тэг будет считаться ошибочным и браузер проигнорирует его. Другими
словами, нельзя определить <FRAMESET>, состоящий только из одного фрейма.

Список значений параметров ROWS и COLS тэга <FRAMESET> представляет собой

разделенный запятыми список значений, которые могут задаваться в пиксе-
лах, в процентах или в относительных единицах. Число строк или столбцов
определяется числом значений в соответствующем списке. Например, запись
<FRAMESET ROWS="100,240,140">
158 Часть I. Основы HTML

определяет набор трех фреймов. Эти значения представляют собой абсолют-

ные значения в пикселах. Другими словами, первый фрейм (первая строка)
имеет высоту 100 пикселов, второй — 240 и последний — 140 пикселов.
Задание значений размеров фреймов в пикселах не очень удобно. Здесь не
учитывается тот факт, что браузеры запускаются в различных операционных
системах и с различными разрешениями дисплеев. В то же время, можно
определить абсолютные значения размеров для некоторых случаев, напри-
мер, для отображения небольшого изображения с известными размерами.
Лучшим вариантом будет задание значений в процентах или в относитель-
ных единицах, например:
<FRAMESET ROWS="25%,50%,25%">.

В этом примере создаются три фрейма, размещаемые как строки во всю

ширину экрана. Верхняя строка займет 25 процентов от доступной высоты
экрана, средняя строка — 50 процентов и нижняя — 25 процентов. Если
сумма заданных процентов не равна 100%, то значения будут пропорцио-
нально отмасштабированы, чтобы в итоге получилось ровно 100%.
Значения в относительных единицах выглядят следующим образом:
<FRAMESET COLS="*,2*,3*">.

Звездочка (*) используется для пропорционального деления пространства.

Каждая звездочка представляет собой одну часть целого. Складывая все зна-
чения чисел, стоящих у звездочек (если число опущено, то подразумевается
единица), получим знаменатель дроби. В этом примере первый столбец зай-
мет 1/6 часть от общей ширины окна, второй столбец — 2/6 (или 1/3), а по-
следний — 3/6 (или 1/2).
Помните, что числовое значение без каких-либо символов определяет абсо-
лютное число пикселов для строки или колонки. Значение со знаком про-
цента (%) определяет долю от общей ширины (для COLS) или высоты (для
ROWS) от окна просмотра, а значение со звездочкой (*) задает пропорцио-
нальное распределение оставшегося пространства.
Приведем пример, использующий все три варианта задания значений:
<FRAMESET COLS="100,25%,*,2*">.

В этом примере первый столбец будет иметь ширину 100 пикселов. Второй
столбец займет 25 процентов от всей ширины окна просмотра, третий стол-
бец — 1/3 оставшегося пространства и, наконец, последний столбец — 2/3.
Абсолютные значения рекомендуется назначать первыми по порядку слева
направо. За ними следуют процентные значения от общего размера про-
странства. В заключение записываются значения, определяющие пропор-
циональное разбиение оставшегося пространства.
Глава 5. Фреймы 159

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

Если используется тэг <FRAMESET>, в котором заданы значения и COLS, и

ROWS, то будет создана сетка из фреймов. Например:
<FRAMESET ROWS="*,2*,*" COLS="2*, *">

Эта строка HTML-кода создает сетку фреймов с тремя строками и двумя

столбцами. Первая и последняя строки занимают 1/4 высоты каждая, а
средняя строка — половину. Первый столбец занимает 2/3 ширины, а вто-
рой — 1/3.
Контейнер <FRAMESET> </FRAMESET> может быть вложен внутрь другого та-
кого же контейнера, как это было показано в начальном примере. Рассмот-
рим далее использование тэга <FRAME>.

( Примечание ^
В некоторых источниках по языку HTML указывается, что параметры COLS и
ROWS тэга <FRAMESET> являются взаимоисключающими. Однако и Netscape,
и Microsoft Internet Explorer допускают их совместное использование.

Тэг <FRAME>
Тэг <FRAME> определяет одиночный фрейм. Он должен располагаться внутри
пары тэгов <FRAMESET> и </FRAMESET>. Например:
<FRAMESET ROWS="*,2*">
<FRAME>
<FRAME>
</FRAMESET>

Обратите внимание, что тэг <FRAME> не является контейнером и в отличие

от <FRAMESET> не имеет завершающего тэга. Все определение одиночного
фрейма выполняется одной строчкой HTML-кода.
Необходимо записать столько тэгов <FRAME>, сколько отдельных фреймов
определено при задании тэга <FRAMESET>. В предыдущем примере тэгом
<FRAMESET> задано две строки, поэтому потребовалось записать два тэга
<FRAME>. Однако этот пример, по существу, бесполезен, так как ни один из
фреймов не имеет какого-либо содержания!
Тэг <FRAME> имеет шесть параметров: SRC, NAME, MARGINWIDTH, MARGINHEIGHT,
SCROLLING И NORESIZE.
160 Часть I. Основы HTML

Примечание
Некоторые браузеры разрешают использовать ряд дополнительных парамет-
ров тэга <FRAME>. Обзор возможностей браузеров Netscape и Microsoft Internet
Explorer дается в конце главы.

Приведем запись тэга <FRAME> со всеми параметрами:

<FRAME SRC="url" NAME="window_name" SCROLLING=YES |NO| AUTO
MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE>

На практике в тэге <FRAME> редко используются одновременно все параметры.

Наиболее важный параметр — SRC (сокращение от слова source). Довольно
часто в тэге <FRAME> задается единственный параметр SRC. Например:
<FRAME SRC="url">.

Значение параметра SRC определяет URL-адрес документа, который будет

загружен изначально в данный фрейм. Обычно в качестве такого адреса за-
писывается имя HTML-файла, расположенного в том же самом каталоге,
что и основной документ. Тогда строка определения фрейма будет выгля-
деть, например, так:
<FRAME SRC="[Link]">.

Обратите внимание, что любой HTML-файл, заданный в описании фрейма,

должен быть полным HTML-документом, а не фрагментом. Это означает,
что документ должен иметь тэги HTML, HEAD, BODY и т. д.
Конечно, в качестве значения SRC может быть задан любой допустимый
URL-адрес. Если, например, фрейм используется для отображения изобра-
жения в формате GIF, которое располагается на сервере издательства дан-
ной книги, то следует записать:
<FRAME SRC="http: //[Link]. ru/[Link] ">.

Совет
He задавайте в документе, описывающем структуру фреймов, никакого содер-
жания.
Обычный текст, заголовки, графические изображения и другие элементы не мо-
гут прямо использоваться в документе, который описывает структуру фреймов.
Все содержание фреймов должно быть определено в отдельных HTML-фай-
лах, имена которых задаются параметром SRC тэга <FRAME>.

Параметр NAME определяет имя фрейма, которое может использоваться для

ссылки к данному фрейму. Обычно ссылка задается из другого фрейма, рас-
полагающегося на той же самой странице. Например:
<FRAME SRC="[Link]" NAME= " Fr ame_l " > .
Глава 5. Фреймы 161

Такая запись создает фрейм с именем "Frame_l", на который может быть

выполнена ссылка. Например:
<А HREF="[Link]" ТАК6ЕТ="Ргате_1">Щелкните здесь для загрузки
документа [Link] во фрейм с именем Frame_l</A>.

Обратите внимание на параметр TARGET, который ссылается на имя фрейма.

Если для фрейма не задано имя, то будет создан фрейм без имени, и не бу-
дет возможности использовать ссылки на него из другого фрейма. Имена
фреймов должны начинаться с алфавитно-цифрового символа.
Параметры MARGINWIDTH и MARGINHEIGHT дают возможность устанавливать
ширину полей фрейма. Записывается это следующим образом:
MARGINWIDTH="value",

где "value" — абсолютное значение в пикселах. Например:

<FRAME MARGINHEIGHT= "5" MARGINWIDTH= "7">.

Данный фрейм имеет поля сверху и снизу по 5 пикселов, а слева и справа -

по 7 пикселов. Не забудьте, что здесь идет речь о полях, а не о рамках. Па-
раметры MARGINWIDTH и MARGINHEIGHT определяют пространство внутри фрей-
ма, в пределах которого не будет располагаться никакая информация. Ми-
нимально допустимое значение этих параметров равно единице.
Для фреймов будут автоматически создаваться и отображаться полосы про-
крутки, если содержимое фрейма не помещается полностью в отведенном
пространстве. Иногда это нарушает дизайн страницы, поэтому было бы
удобно иметь возможность управлять отображением полос прокрутки. Для
этих целей используется параметр SCROLLING. Формат записи:
<FRAME SCROLLING="YES|NO IAUTO">.

Параметр SCROLLING может принимать три значения: YES, NO или AUTO. Зна-
чение AUTO действует так же, как и в случае отсутствия параметра SCROLLING.
Значение YES вызывает появление полос прокрутки вне зависимости от не-
обходимости этого, a NO — запрещает их появление. Например:
<FRAME SCROLLING=YES>.

Обычно пользователь может изменять размер фреймов при просмотре стра-

ницы. Если установить курсор мыши на рамке фрейма, то курсор примет
форму, указывающую на возможность изменения размеров, и позволит вы-
полнить перемещение рамки в нужное место. Это иногда нарушает структу-
ру красиво спроектированных фреймов. Для предотвращения возможности
изменения пользователем размера фреймов следует воспользоваться пара-
метром NORESIZE:
<FRAME NORESIZE>.

Этот параметр не требует никаких значений. Естественно, когда задан пара-

метр NORESIZE для одного из фреймов, то размер любого из смежных фрей-

6 Зак. 944
162 Часть I. Основы HTML

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

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

Тэг <NOFRAMES>
Возможность работы с фреймами не предполагалась ни в стандарте HTML
3.0, ни в HTML 3.2. Здесь до последнего времени складывалась достаточно
типичная ситуация, когда реально используемые возможности активно при-
меняются на многих WWW-страницах, однако не являются частью стандар-
та. Это означало, что браузеры вполне законно могли игнорировать фреймы.
С появлением стандарта HTML 4.0 ситуация изменилась — теперь поддерж-
ка фреймовых структур закреплена стандартом. Заметим, что большинство
современных браузеров распознавали фреймы и до появления HTML 4.O.
Тем не менее, необходимо предоставлять информацию пользователям, при-
меняющим браузеры без поддержки фреймов. Для таких браузеров можно
предусмотреть альтернативную информацию, которая записывается между
парой тэгов <NOFRAMES> и </NOFRAMES>. Это выглядит следующим образом:
<NOFRAMES>
весь HTML-документ
</NOFRAMES>

Все, что размещено между тэгами <NOFRAMES> и </NOFRAMES>, будет отобра-

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

Особенности описания фреймовых структур

Одним из важнейших тэгов, применяемых при описании фреймовых струк-
тур, является тэг <FRAME>. Тэг имеет ряд параметров, ни один из которых не
является обязательным и не зависит от других, однако при их записи следу-
ет учитывать ряд моментов.
Оказывается, что при необходимости создания фрейма, в который в даль-
нейшем может быть загружен какой-либо документ, например, по команде
из другого фрейма, следует в тэге <FRAME> записать параметр SRC. Если этот
Глава 5. Фреймы 163

параметр опущен, то фрейм не будет создан, хотя место под него будет ос-
тавлено. Например, запись типа <FRAME NAME="B"> вполне логична и могла
бы определять фрейм с именем "В", в который исходно не загружается ни-
какой документ. Однако из-за отсутствия параметра SRC фрейм с таким
именем не будет существовать, поэтому дальнейшие попытки загрузить в
него какой-либо документ останутся безрезультатными, а место в окне, от-
веденное под данный фрейм, будет пустовать. Более того, некоторые брау-
зеры (например, Microsoft Internet Explorer версии 3 для Windows З.хх) при
попытке загрузки документа в такой фрейм выдадут сообщение об ошибке и
завершат работу.
Обязательность задания параметра SRC не поддается логическому объясне-
нию, поэтому лучше всего просто принять к сведению этот факт. Тогда даже
при отсутствии документа, который необходимо загружать в данный фрейм
с самого начала, следует в параметре SRC задать имя какого-либо файла. На-
пример, такой файл можно назвать [Link] (empty — пустой), содержи-
мым которого будет являться минимально возможный корректный HTML-
документ, а именно:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Можно сократить данный документ до двух тэгов: <HTMLX/HTML>, что также

будет верным HTML-документом. Идя по пути максимального сокращения
размеров "пустого" документа, можно ограничиться файлом, размер кото-
рого равен одному байту, в котором хранится символ пробела (или любой
другой неотображаемый символ). Этот файл не будет корректным HTML-
документом, но не вызовет нареканий со стороны большинства браузеров.
Дальнейшее сокращение размера такого файла до нуля не оправдано, так
как при его загрузке браузером Netscape будет выдаваться предупреждающее
сообщение (рис. 5.8) о том, что документ не содержит данных.

Рис. 5.8. Предупреждающее сообщение

при загрузке файла нулевой длины

При этом на данное сообщение необходимо отреагировать, нажав клавишу

<Enter> или кнопку мыши. При любой перезагрузке документа или измене-
нии размеров окна просмотра браузера сообщение будет возникать вновь.
164 Часть I. Основы HTML

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

Рис. 5.9. Предупреждающее сообщение

при попытке загрузки несуществующего
файла

Совет
Создайте файл с именем [Link], размер которого равен одному байту,
содержащий символ пробела. Примите за правило при записи тэга <FRAME>
всегда указывать SRC=[Link], если сразу невозможно указать имя конкрет-
ного файла.

Примеры фреймов
В этом разделе представлены некоторые типичные примеры определений
фреймов.
Возвратимся к примеру, который приведен в начале данного раздела
(рис. 5.7). Этот пример использует вложенную структуру <FRAMESET>. Внеш-
ний тэг <FRAMESET> создает три строки высотой, соответственно, в 25, 50 и
25 процентов от общей высоты окна просмотра:
<FRAMESET ROWS="25%,50%,25%">.
Внутри этой области определения первая и последняя строки представляют
собой простые фреймы:
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">

Каждая из этих строк заполняет всю ширину экрана. Первая строка в верх-
ней части экрана занимает 25 процентов высоты, и третья строка в нижней
части также занимает 25 процентов высоты.
Между ними, однако, располагается вложенный тэг <FRAMESET>:
<FRAMESET COLS="25%,75%">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>

Этот тэг определяет два столбца, на которые разбивается средняя строка эк-
рана. Строка, в которой располагаются эти два столбца, занимает 50 про-
Глава 5. Фреймы 165

центов высоты экрана, что определено во внешнем тэге <FRAMESET>. Левый

столбец использует 25 процентов от ширины экрана, в то время как правый
столбец занимает оставшиеся 75 процентов ширины.
Фреймы для этих столбцов определены внутри вложенной пары тэгов
<FRAMESET> и </FRAMESET>, в то время как определение фреймов для первой и
последней строки записывается вне этой пары, но внутри внешнего
<FRAMESET> В СООТВвТСТВуЮЩСМ ПОрЯДКС.
Структуру записи легко понять, если воспринимать вложенный блок
<FRAMESET> как отдельный элемент <FRAME>. В нашем примере внешний тэг
<FRAMESET> определяет три строки. Каждая из них должна быть заполнена.
В данном случае они заполняются сначала отдельным элементом <FRAME>,
далее — вложенным блоком <FRAMESET> шириной в два столбца, а затем еще
одним элементом <FRAME>.
Теперь может возникнуть вопрос, можно ли в качестве значения параметра
SRC тэга <FRAME> задать имя файла, который, в свою очередь, содержит опи-
сание структуры фреймов. Да, это допустимо. В данном случае тэг <FRAME>
будет использован для указания на HTML-документ, который является
фреймовой структурой и используется в качестве отдельного фрейма.
Вернемся к примеру и заменим вложенный <FRAMESET> на отдельный
<FRAME>. Естественно, потребуется два HTML-файла вместо одного, так как
вложенный <FRAMESET> теперь будет располагаться в отдельном документе.
Приведем содержимое первого (внешнего) файла:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
<FRANE SRC="[Link]">
</FRAMESET>
<NOFRAMES>
Ваш браузер не может отображать фреймы
</NOFRAMES>
</HTML>

Второй файл с именем [Link] содержит следующий код:

<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
166 Часть I. Основы HTML

</FRAMESET>
</HTML>

В этом случае верхняя и нижняя строки ведут себя по-прежнему. Но вторая

строка теперь является простым фреймом, как и другие. Однако файл
[Link], на который указывает параметр SRC, определяет собственную
структуру фреймов. В результате на экране будет отображено в точности то
же самое, что и в первоначальном примере.

( Примечание )
Принципиально возможно создать вложенные структуры <FRAMESET>, исполь-
зующие тэги <FRAME>, которые ссылаются на тот же самый файл с описанием
структуры фреймов, однако этого делать не следует. Такая ситуация приведет
к бесконечной рекурсии и не даст возможности дальнейшей работы. Некоторые
браузеры контролируют подобную ситуацию и предотвращают возможность
сбоя. Если адрес, записанный в SRC, совпадает с одним из предыдущих адре-
сов в иерархии фреймов, то он игнорируется, как если бы параметр SRC отсут-
ствовал вообще.

Совет
Используя вложенные структуры <FRAMESET> в различных комбинациях, воз-
можно создать практически любую сетку фреймов, которую можно себе пред-
ставить. Однако помните, что следует создавать удобный для пользователя
интерфейс, а не просто демонстрировать свое умение работать с фреймами.

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

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="*,2*" COLS="20%,30%,40%">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>
</HTML>

Этот пример создает сетку фреймов с двумя строками и тремя столбцами

(рис. 5.10). Так как определен набор из шести фреймов, необходимо также
дать шесть определений отдельных фреймов <FRAME>. Обратите внимание,
что определения фреймов даются построчно. То есть первый тэг <FRAME>
определяет содержимое первой колонки в первой строке, второй — второй
колонки, а третий заканчивает определение данных для последней колонки
первой строки. Последние три фрейма затем заполняют столбцы второй
строки.
Глава 5. Фреймы 167

< Netscape [untillcd]

Фрейм 1 Фрейм 2 Фрейм 3

Фрейм 4 Фрейм 5 Фрейм 6

Рис. 5.10. Сетка фреймов 2 на 3

Заметим также, что сумма значений процентов в параметре COLS равна не

100, а только 90 процентов. В этом нет ничего страшного, так как браузер
автоматически пропорционально изменит ширину колонок, чтобы ликвиди-
ровать это противоречие.

Особенности навигации
при использовании фреймов
Работа с документами, имеющими фреймовую структуру, имеет некоторые
особенности, которые необходимо знать. Эти особенности в основном про-
являются в навигации при загрузке документов. Значительные различия в
навигации свойственны не только разным браузерам, но и разным версиям
одного и того же браузера.
Браузер Netscape версий 3.x и 4.x при нажатии кнопки Back возвращает об-
ратно документ в тот фрейм, действия с которым производились последним.
Те же действия будут произведены в случае, если будет выбран пункт Back
при вызове контекстного меню в любом из фреймов. Напомним, что кон-
текстное меню вызывается нажатием правой кнопки мыши. Таким образом,
независимо от того, в каком из фреймов было вызвано контекстное меню,
при нажатии кнопки Back будет выполнена отмена последней операции,
даже если она была произведена в другом фрейме.
Браузер Netscape версии 2.x работал совершенно по-другому. Контекстное
меню содержит команду Back in Frame, выполнение которой возвращает
документ в текущий фрейм, а не выполняет отмену последней операции.
168 Часть I. Основы HTML

В любой версии Netscape можно сделать закладку на документ, содержа-

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

Взаимодействие между фреймами

Простейшая форма просмотра информации на WWW состоит в чтении
страниц и переходах по ссылкам, при которых текущий документ в окне
браузера замещается другим документом. При работе с фреймами можно
организовать более удобную для пользователя схему загрузки документов.
Взаимодействие между фреймами заключается в возможности загрузки до-
кументов в выбранный фрейм по командам из другого фрейма. Для этой
цели используется параметр TARGET тэга <д>. Данный параметр определяет
имя фрейма или окна браузера, в которое будет загружаться документ, на
который указывает данная ссылка. По умолчанию при отсутствии параметра
TARGET документ зафужается в текущий фрейм (или окно). Это умолчание
может быть изменено заданием тэга <BASE> с нужным значением параметра
TARGET. Задание имени фрейма, в который осуществляется загрузка по умол-
чанию, очень удобно для тех случаев, когда большое количество ссылок
должно направлять документы в определенный фрейм. Типичная ситуация с
оглавлением в одном фрейме, ссылки из которого загружают соответствую-
щие документы в смежный фрейм, была показана в начале данной главы
(рис. 5.1). Для этого примера в разделе <HEAD> файла с именем [Link] це-
лесообразно записать следующую строчку: <BASE TARGET="pages">. В против-
ном случае для каждой ссылки пришлось бы указывать параметр TARGET.
Имена фреймов должны начинаться с латинской буквы или цифры. В каче-
стве имени может задаваться имя существующего окна или фрейма, а может
указываться новое имя, под которым будет открыто новое окно. Имеется
четыре зарезервированных имени, при задании которых выполняются спе-
циальные действия. Эти имена начинаются с символа подчеркивания (_):
"_biank", "_seif", "_parent" и "_top". Любое другое имя, начинающееся
с символа "подчеркивание", недопустимо.
TARGET="_blank" — обеспечивает загрузку документа в новое окно. Это окно
не будет иметь имени, а следовательно, в него невозможно будет загрузить
другой документ.
Глава 5. Фреймы 169

TARGET="_seif" — загрузка документа будет произведена в текущий фрейм

(или окно). Такую запись следует использовать для обхода умолчания, за-
данного ТЭГОМ <BASE>.
TARGET="_top" — вызывает загрузку документа в полное окно. Если документ
уже располагается в полном окне, то данное значение действует так же, как
"_self".
TARGET="_parent" — вызывает загрузку документа в область, занимаемую
фреймом-родителем текущего фрейма. При отсутствии фрейма-родителя
данное значение параметра действует так же, как " t o p " .

( Примечание }
В ряде источников по языку HTML ошибочно утверждается, что при отсутствии
родителя у фрейма значение "_parent" эквивалентно "_self". Такое утверж-
дение не всегда корректно.

Предупреждение
Зарезервированные имена фреймов "_blank", "_self", "_parent" и "_top"
должны записываться строчными латинскими буквами. Заметим, что такая тре-
бовательность присуща только Netscape. Браузер Microsoft Internet Explorer
правильно распознает зарезервированные имена, записанные на любом ре-
гистре.

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

браузера. Рассмотрим следующий HTML-код:
<HTML>
<HEAD>
<Т1ТЬЕ>Использование фреймов</Т1ТЬЕ>
</HEAD>
<FRAMESET COLS=2*,*,*>
<FRAME SRC=frame_a.htm NAME="A">
<FRAME SRC=[Link] NAME="B">
<FRAME SRC=[Link] NAME="C">
</FRAMESET>
</HTML>

В этом HTML-документе дается описание структуры, состоящей из трех

фреймов с именами "А", "В" и "С". Имена фреймов потребуются в дальней-
шем для организации ссылок между фреймами. Заметим, что на фрейм с
именем "А" в данном примере ссылок не будет, поэтому он мог быть остав-
лен без имени вообще. При загрузке приведенного выше документа в брау-
зер во фреймах будет отображена информация, содержащаяся в файлах, оп-
ределяемых параметром SRC. Во фрейм "А" попадет содержимое файла
frame_a.htm, а остальные два фрейма получат данные из файла [Link],
который не имеет отображаемых данных. Еще раз напомним, что HTML-до-
кумент, описывающий структуру фреймов, не имеет раздела <BODY>.
170 Часть I. Основы HTML

Приведем текст файла с именем frame_a.htm:

<HTML>
<HEAD>
<Т1ТЬЕ>Документ для фрейма A</TITLE>
</HEAD>
<BODY>
<А HREF="[Link]" TARGET="B">1. Загрузка документа во фрейм В</АХР>
<А HREF="[Link]" TARGET="C">2. Загрузка документа во фрейм С</АХР>
<А HREF="[Link]" TARGET="D">3. Загрузка документа в окно с именем
D</AXP>
<А HREF="[Link]" TARGET="_blank">4. Загрузка документа в новое ок-
но</АХР>
<А HREF="[Link]" TARGET="_top">5. Загрузка документа в полное ок-
но</АХР>
<А HREF="[Link]" TARGET="_self">6. Загрузка документа в текущий
фрейм</А>
</BODY>
</HTML>

Этот документ является полным HTML-документом, имеющий разделы

<HEAD> и <BODY> и, в свою очередь, имеет ссылки на файл с именем [Link],
располагающийся в том же самом каталоге, что и файл frame_a.htm.
Текст файла [Link] крайне прост:
<HTML>
<HEAD>
<Т1ТЬЕ>Тестовый документ</Т1ТЬЕ>
</HEAD>
<BODY>
Текст тестового документа
</BODY>
</HTML>

Файл frame_a.htm, содержимое которого загрузилось во фрейм "А", имеет

шесть ссылок на один и тот же файл [Link] с различным значением пара-
метра TARGET.
Рассмотрим действия, которые будут происходить при реализации этих ссы-
лок. Первая ссылка со значением TARGET="B" будет загружать файл [Link]
во фрейм с именем "в". Заметим, что после реализации любой из шести
ссылок браузер Netscape автоматически окрасит в другой цвет все шесть, так
как они указывают на один и тот же файл. Microsoft Internet Explorer отме-
чает только действительно реализованные ссылки.
Вторая ссылка выполнит те же действия для фрейма "с". Изначально во
фреймах "в11 и "С" ничего нет (точнее загружено содержимое пустого файла
[Link]). Реализация первой и второй ссылок заполнит эти фреймы.
Глава 5. Фреймы 171

Третья ссылка со значением TARGETED" приведет к образованию нового ок-

на браузера с именем "D" и загрузке в него файла [Link]. Заметим, что
форма записи этой ссылки ничем не отличается от первых двух. Различие
состоит в том, что в первых двух случаях ссылки были даны на существую-
щие фреймы, имена которых были определены в файле со структурой
фреймов, а в данном случае ссылка дана на несуществующий объект. Если
данная ссылка будет выполнена хотя бы один раз, то окно с именем "о" бу-
дет образовано и повторный переход по ссылке лишь перезагрузит данные в
существующее теперь окно "о". Конечно, пользователь может в любой мо-
мент его закрыть и вновь образовать выбором данной ссылки. На рис. 5.11
показана ситуация после того, как первые три ссылки были реализованы.
Напомним, что расположение и размеры окон на экране определяются
пользователем.

. - IpV*!
V/DI/!Mgeev/ftames/EXftMPLE/Exaitiplelhim i*:j:i^

1. Загрузка документа во фрейм В Текст тестового Текст тестового

документа документа
2. Загрузка документа во фрейм С

3. Загрузка документа в окно с именем D

4. Загоузка документа в новое окно

| т.1 ИИЯИСЕШ;
Щ Щ 1 [Link] IWM1S
(
iriE/[Link] SjsiSli
И « | ' '.::fS
6. Загоузка документа в текущий Фоейм
Текст тестового
\ документа
а! х.

;н 1
Рис. 5.11. Ситуация, полученная после последовательной реализации
первых трех ссылок, имеющихся в левом фрейме

Четвертая ссылка со значением TARGET="_biank" создаст новое окно без

имени и загрузит туда требуемый документ. Любое повторение данной
ссылки будет открывать еще одно окно браузера.
Пятая ссылка со значением TARGET="_top" загрузит документ в полное окно
вместо всей фреймовой структуры. При таком значении параметра TARGET
 172 Часть I. Основы HTML

новое окно не образуется. Возврат к фреймовой структуре возможен нажа-

тием кнопки Back.
Последняя ссылка со значением TARGET="_seif" загрузит документ во фрейм
"А" на место документа со ссылками. В данном случае результат эквивален-
тен выполнению ссылки без параметра TARGET.

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

Совет
Напомним, что названия загружаемых документов задаются тэгом <TITLE>. Ес-
ли документ загружен в полное окно, то его название выдается в самой верх-
ней части окна браузера. Если же документ загружается во фрейм, то его на-
звание нигде не отображается, а в верхней части окна по-прежнему будет рас-
полагаться название документа, содержащего описание фреймовой структуры
документа. Поэтому названия документов, предназначенных для просмотра во
фреймах, не имеют большого значения. Например, на рис. 5.11 один и тот же
документ загружен во фреймы "В" и "С", а также в отдельное окно с именем
"D", при этом название документа видно только в окне "D". Тем не менее, вряд
ли стоит рекомендовать опускать названия документов, загружаемых во фрей-
мы, так они могут появиться, например, в списке закладок (Bookmarks) при
создании закладки на документ, расположенный во фрейме или списке про-
смотренных документов.

Рассмотрим еще один интересный пример организации взаимодействия ме-

жду фреймами и окнами браузера. Пусть имеется текст основного загружае-
мого HTML-документа:
<HTML>
<HEAD>
<Т1ТЬЕ>Использование имен окон</Т1ТЬЕ>
</HEAD>
<BODY>
<А HREF="[Link]" ТАКСЕТ="0">Загрузка документа в окно с именем D</A><P>
<А HREF="f [Link]" ТАКСЕТ="_ЫапК">Загрузка документа, имеющего
фреймовую структуру, в новое окно</АХР>
</BODY>
</HTML>

В данном документе имеются ссылки на файлы [Link] и [Link]. Пусть

первый из них содержит ту же информацию, что и в предыдущем примере.
Текст файла [Link] имеет следующий вид:
Глава 5. Фреймы 173

<HTML>
<HEAD>
<Т1ТЬЕ>Использование фреймов</Т1ТЬЕ>
</HEAD>
<FRAMESET COLS=*,*>
<FRAME SRC=[Link] NAME="C">
<FRAME SRC=[Link] NAME="D">
</FRAMESET>
</HTML>

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

•HTML-документом, то загружаемый по ссылке из основного документа
файл [Link] содержит структуру фреймов и в свою очередь ссылается на
файл [Link].
После загрузки основного документа окно браузера будет иметь вид, пока-
занный на рис. 5.12 (левое окно). Весь документ состоит из двух ссылок.
Выполним переход по первой ссылке. Будет образовано новое окно с име-
нем "о", в котором появится текст файла [Link] (рис. 5.12, правое окно).
Повторение этой ссылки будет лишь перезагружать данные в окне "D".

Загрузка документа в окно с именем D Текст тестового документа

Загрузка документа, имеющего

фреймовую структуру в новое окно

Текст тестового документа

Рис. 5.12. Пример окон взаимодействующих фреймов

Выполним переход по второй ссылке. Образуется новое окно без имени,

в которое загрузится файл [Link], определяющий два фрейма с именами
"С" и "D" (рис. 5.12, нижнее окно). В обоих фреймах ничего нет (точнее за-
гружен пустой документ [Link]). Обратим внимание, что теперь имеется
174 _ __ __ Часть I. Основы HTML

открытое окно с именем "D" и окно с фреймами, один из которых также

имеет имя "D". Выполним снова переход по первой ссылке. В отличие от
первого случая загрузка данных будет осуществляться не в окно "D", а во
фрейм с именем "D". Результат всех описанных действий показан на рис. 5.12.

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

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

ку, а затем первую, то окно с именем "D" вообще не появится! Это произой-
дет потому, что после реализации второй ссылки образуется фрейм с име-
нем "D" и для первой ссылки не будет нужды открывать новое окно.
Этот пример вовсе не является образцом для подражания, а лишь показыва-
ет возможную сложность организации взаимодействия. Напротив, нужно
стараться без особой нужды не усложнять организацию данных, тем более
не создавать ситуаций, в которых результат меняется в зависимости от по-
рядка действий пользователя.

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

Предупреждение
Имена фреймов и окон сравниваются с учетом регистра символов. Так, напри-
мер, фреймы с именами "frame_l" и "Frame_l" будут различны.

Примеры более сложного взаимодействия

между фреймами
Выше были рассмотрены достаточно простые типовые примеры взаимодей-
ствия между фреймами. Были рассмотрены задачи создания новых окон,
замены содержимого отдельных фреймов, а также выдачи документа в пол-
ное окно с разрушением всей структуры фреймов. Даны примеры использо-
вания задаваемых имен фреймов, а также зарезервированных имен "_biank",
"_seif" и "_top". Использование последнего зарезервированного имени
"_parent" более сложно и будет описано ниже.
В данном разделе будут рассмотрены более сложные варианты взаимодейст-
вия между фреймами. В частности, будет реализована замена содержимого
нескольких смежных фреймов.
Глава 5. Фреймы 175

Одним из наиболее часто встречающихся вариантов применения фреймов,

который уже упоминался в данной главе, является случай двух фреймов,
один из которых содержит список ссылок, а в другой загружаются сами до-
кументы (рис. 5.1).
Попробуем расширить постановку задачи. Пусть необходимо отображать на
экране содержимое достаточно большого документа, состоящего из глав,
разделенных на разделы. Типичным примером служит техническая лите-
ратура по какой-либо тематике. Опишем желаемое представление такого
документа на экране. Разобьем экран на три фрейма, в одном из которых
будет располагаться список глав книги, во втором — перечень разделов вы-
бранной главы, а в третьем — текст выбранного раздела. При выборе ссылки
во втором фрейме должно меняться содержимое третьего фрейма. Реализа-
ция этого требования тривиальна. При выборе ссылки в первом фрейме
должно одновременно изменяться содержимое как второго, так и третьего
фрейма. На первый взгляд реализация этой задачи на языке HTML невоз-
можна (без применения программирования на языке JavaScript или др.), так
как при выполнении ссылки загружается только один документ, а не два
или более. Тем не менее, решение данной задачи вполне возможно.
Покажем возможную схему решения такой задачи на простом примере.
Пусть требуется отобразить на экране три фрейма и загрузить в них некото-
рые документы. Поставим задачу создать в каждом из этих фреймов ссылки,
реализация которых, например, меняла местами содержимое двух фреймов.
Пусть первый фрейм занимает 50% ширины окна и 100% высоты и распо-
лагается с левой стороны окна. Правая половина окна делится по горизон-
тали также пополам и содержит два других фрейма. Такая структура описы-
вается следующим кодом:
<HTML>
<HEAD>
<Т1ТЬЕ>Пример взаимодействия между фреймами</Т1ТЬЕ>
</HEAD>
<FRAMESET COLS="*,*">
<FRAME SRC="[Link]">
<FRAMESET ROWS="*,*">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>
</FRAMESET>
</HTML>

С помощью данного HTML-кода будет создана требуемая структура, однако

решение поставленной задачи невозможно. Необходимо вынести вложенную
структуру <FRAMESET> в отдельный файл, а в данном HTML-коде описать
фрейм, ссылающийся на созданный файл. Тогда текст исходного документа
будет иметь вид:
176 ^ Часть I. Основы HTML

<HTML>
<HEAD>
<Т1ТЬЕ>Пример взаимодействия между фреймами</Т1ТЬЕ>
</HEAD>
<FRAMESET COLS="*,*">
<FRAME SRC="[Link]">
<FRAME SRC="l_2.htm" NAME="Two_Frames">
</FRAMESET>
</HTML>

Созданный файл с вложенной структурой <FRAMESET> имеет имя l_2.htm и

содержит следующий код:
<HTML>
<HEAD>
<TITLE>l-2</TITLE>
</HEAD>
<FRAMESET ROWS="*,*">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>
</HTML>

На первый взгляд совершенно ничего не изменилось. В обоих случаях име-

ется три фрейма, в которые загружаются документы [Link], [Link] и [Link]
соответственно. Однако при взаимодействии фреймов различие проявится.
Если в первом случае ни у одного из фреймов нет фрейма-родителя, то во
втором случае для двух фреймов родительским будет фрейм с именем
"Two_Frames". Поэтому если в любом из двух фреймов применить ссылку со
значением параметра TARGET, равным "_parent", то результат будет различ-
ным для первого и второго случая. Для первого случая реализация такой
ссылки приведет к загрузке документа в полное окно с замещением сущест-
вующей структуры фреймов. Здесь проявляется свойство значения
"_parent", которое при отсутствии фрейма-родителя действует как "_top".
Во втором случае будет замещен фрейм с именем "Two_Frames", который за-
нимает правую половину экрана и по существу состоит из двух фреймов.
Второй случай формально отличается от первого также наличием фрейма
с именем "Two_Frames", к которому могут быть обращены ссылки. Как раз
эта особенность и позволит нам решить поставленную задачу.
Приведем содержимое файла [Link], который изначально загружается
в первый из рассматриваемых фреймов:
<HTML>
<HEAD>
<Т1ТЬЕ>Левый фрейм</Т1ТЬЕ>
Глава 5. Фреймы 1 77

</HEAD>
<BODY>
Реализация любой ссылки во всех трех фреймах приводит к перезагрузке
документов в двух фреймах, расположенных в правой части окна.

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

<Р>
<А HREF=" l_2.htm" TARGET="Two_Frames">BapnaHT 1-
<Р>
<А HREF="2_l.htm" TARGET="Two_Frames">BapMaHT 2-K/A>
</BODY>
</HTML>

В этом документе имеются ссылки на файлы l_2.htm и 2_l.htm. Текст пер-

вого был дан выше, а второго имеет следующий вид:
<HTML>
<HEAD>
<TITLE>2-K/TITLE>
</HEAD>
<FRAMESET ROWS="*,*">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>
</HTML>

Заметим, что текст файлов l_2.htm и 2_l.htm отличаются только порядком

ссылок на файлы [Link] и [Link].
Рассмотрим теперь построение документа, загруженного в левый фрейм.
В нем имеется две ссылки с параметром TARGET="Two_Frames". Реализация
любой из этих ссылок создает на месте расположения фрейма "Two_Frames"
(это правая половина экрана) два фрейма с загрузкой документов [Link] и
[Link] в том или ином порядке. Таким образом при выборе варианта 1-2
в верхний правый фрейм загружается документ [Link], а в нижний правый -
[Link]. При выборе варианта 2-1 порядок документов меняется. В итоге по-
очередный выбор вариантов создает впечатление того, что документы в двух
фреймах меняются местами. Именно такого эффекта мы и стремились дос-
тичь (рис. 5.13).
Содержимое документов [Link] и [Link] для описанного примера не имеет
значения. Тем не менее, для примера, вместо тривиальных документов соз-
дадим документы со ссылками, реализующими те же действия.
Текст файла [Link]:
<HTML>
<HEAD>
178 Часть I. Основы HTML

<Т1ТЬЕ>Документ 1</TITLE>
</HEAD>
<BODY>
<Н2>Документ 1</Н2>
<A HREF=" [Link]" ТАК6ЕТ=" рагегЛ">Вариант l-

<A HREP=" 2_l.htm" TARGET="_parent">BapnaHT 2-K/A>

</BODY>
</HTML>

Файл [Link] отличается от [Link] только заголовком.

Здесь имеются две ссылки со значением TARGET="_parent", которые обраще-
ны к родительскому фрейму. Эти ссылки могли бы быть записаны и с яв-
ным указанием имени фрейма-родителя, т. е. TARGET="Two_Frames", однако
использование неявного указания имени обычно более удобно. Например,
если из левого фрейма (документ [Link]) исключить ссылки, то можно бы-
ло бы опустить имя фрейма "Two_Frames", заданное при описании основной
фреймовой структуры. При этом был бы создан фрейм без имени, но ссыл-
ки из документов [Link] и [Link] со значением TARGET="_parent" по-прежнему
работали бы правильно.

Совет
По возможности используйте неявное указание имен фреймов Например,
"_parent", "_top", "_self " вместо задания конкретных имен.

Реализация любой ссылки

во всех трех фреймах
Документ 2
приводит к перезагрузке
документов в двух Вариант 1-2
фреймах, расположенных в
правой части окна. Вариант 2-1

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

Вариант 1-2
Документ 1
Вариант 2-1 Вариант 1-2

Вариант 2-1 Рис. 5.13. Окна

взаимодействующих
фреймов с эффектом
смены загружаемых
документов
Глава 5. Фреймы 179

Различие между фреймами

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

( Совет ^
Хотя фреймы и не могут предоставить всех возможностей работы с отдельны-
ми окнами, их рациональная организация создаст для пользователя максимум
удобств.

Работе с окнами свойственны и другие недостатки. Создание каждого окна

требует немало памяти. По существу в Netscape каждое окно представляет
собой еще одну копию браузера и снабжено полным набором кнопок и меню.
Та же ситуация характерна и для Microsoft Internet Explorer.
Заметим, что организация отдельных окон в браузерах выполнена по-раз-
ному. Создание нового окна с документом приводит к появлению отдельной
задачи в системе Windows, в чем можно убедиться при просмотре списка
запущенных задач. Поэтому переключение между окнами может выполнять-
ся так же, как и переключение между разными задачами, например, нажа-
тием сочетания клавиш <Alt>+<Tab>.
Во многих популярных Windows-приложениях существует понятие окна с
документом (document window). В качестве примера можно привести тексте-
180 Часть I. Основы HTML

вый процессор Microsoft Word или программу работы с графическими изо-

бражениями Paint Shop Pro и многие другие. В каждом из таких приложе-
ний допустимо одновременное использование нескольких окон с данными
и, как правило, существует меню Window, в котором приводится список
окон и дается возможность переключения между ними. Образование нового
окна в таких приложениях обычно происходит при открытии существую-
щего файла или создании нового. Однако в этих программах при создании
нового окна не образуется новая работающая задача.
В Netscape также имеется меню Window, в котором приводится список су-
ществующих окон. (В версиях Netscape 4.x эта возможность предоставляется
пунктом Window меню Communicator.) Вернемся к рис. 5.12. В этом примере
одновременно открыто три окна, каждое из которых по существу является
отдельным браузером. Однако для пользователя все они являются окнами
одного браузера, которые могут взаимодействовать друг с другом. В любом
из этих окон можно открыть меню Window и увидеть список трех окон. На
рис. 5.14 показана ситуация, когда это сделано для нижнего окна.

; Netscape - [Использование Фреймов]

le: WDI/seigeev /fiames^EXftM RLE /fiame

Рис. 5.14. Открытие окон фреймов в браузере Netscape

Каждое из окон может быть закрыто отдельно (командой Close из меню

File). Для завершения работы с браузером в любом из окон можно открыть
меню File и выполнить пункт Exit (рис. 5.15).
Если при этом было открыто несколько окон, то все они будут закрыты, но
перед этим появится предупреждающее сообщение (рис. 5.16).
Каждое окно браузера может иметь свои установки (правда не все). Посмот-
рите на рис. 5.11. Открыто два окна, одно из которых разбито на три фрей-
ма. В два из трех фреймов, а также в отдельное окно загружен один и тот же
документ. Возможность независимой настройки параметров каждого окна
позволяет по-разному отобразить один и тот же документ. В приведенном
примере размер шрифта документа в одном окне больше, чем в другом. Та-
кой эффект достигнут установкой различных кодировок каждого из окон
(пункт Document Encoding меню Options или пункт Character Set меню View
для версии 4.x), причем обе кодировки используют один и тот же шрифт, но
Глава 5. Фреймы 181

разного размера. Изменение же любого пункта меню General Preferences

воздействует на все окна.

-Netscape - [Использование имен окон] [Netscape Exit Confirmation

цц окжмушснемЕ)
шн Рис. 5.16. Предупреждение
имеющего фреймовую о закрытии окон в браузере
I
но Netscape

Print Pteyiew
S3

Рис. 5.15. Завершение работы с браузером Netscape

Дополнительные возможности браузеров

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

Возможности браузера Netscape

Браузер Netscape, начиная с версии 3.0, позволяет использовать три допол-
нительных параметра: BORDER, FRAMEBORDER и BORDERCOLOR. Параметр BORDER
применяется только в тэге <FRAMESET>. Значение параметра BORDER определя-
ет толщину рамок между фреймами в пикселах.
Параметр FRAMEBORDER может применяться как в тэге <FRAMESET>, так и в тэге
<FRAME> и определяет наличие рамки между фреймов. Этот параметр может
принимать значение Yes или NO. Если параметр записан в тэге <FRAMESET>, то
его действие распространяется на все фреймы этой группы. Для отдельного
фрейма значение может быть переопределено. По умолчанию принимается
значение Yes.
Заметим, что параметры BORDER и FRAMEBORDER работают независимо друг от
друга. Например, если в качестве значения FRAMEBORDER задано NO, а для
BORDER задано значение, отличное от нуля, то рамка между фреймами про-
рисовываться не будет, но место под нее, определенное значением парамет-
ра BORDER, все равно будет отведено.
182 Часть I. Основы HTML

Параметр BORDERCOLOR может применяться как в тэге <FRAMESET>, так и в тэге

<FRAME> и определяет цвет рамки, который может задаваться названием цве-
та или его шестнадцатеричным представлением.
Приведем пример:
<FRAMESET COLS=2*,*,* BORDER=10 FRAMEBORDER=No BORDERCOLOR=red>
<FRAME SRC=frame_a.htm NAME="A">
<FRAME SRC=[Link] NAME="B">
<FRAME SRC=[Link] NAME="C" FRAMEBORDER=Yes>
</FRAMESET>

Первая строка этого HTML-кода задает три фрейма, между которыми остав-
лено место под рамку толщиной 10 пикселов (рис. 5.17).

1 5» Нф

1. Загрузка документа во фрейм В Текст тестового Текст тестового

документа документа
2. Загрузка документа во фрейм С

3. Загрузка документа в окно с именем D

4. Загрузка документа в новое окно

5. Загрузка документа в полное окно

6. Загрузка документа в текущий фрейм

Рис. 5.17. Прорисовка рамок между фреймами в браузере Netscape

Между окнами фреймов "А" и "в" рамка не прорисовывается благодаря зна-

чению NO параметра FRAMEBORDER, тем не менее для рамки определен крас-
ный цвет (red). Для последнего фрейма "с" значение FRAMEBORDER задано
равным Yes и переопределяет значение, установленное в первой строке. По-
этому между фреймами с именами "В" и "С" все-таки будет нарисована рам-
ка красного цвета и толщиной 10 пикселов.

с Примечание
Если рамки между фреймами не прорисовываются, то браузер Netscape не по-
зволит изменять размеры фреймов путем перетаскивания рамок мышью даже
при отсутствии параметра NORESIZE. Для Microsoft Internet Explorer ситуация
иная.
Глава 5. Фреймы 183

Заметим, что фреймы без рамок используются не так уж и редко (например,

см. рис. 5.2). Следует помнить, что отсутствие рамок не запрещает появле-
ние полос прокрутки (рис. 5.18).

; Netscape - [Демонстрация "висячих" полос прокрутки]

{Mi;

При отсутствии рамок вокруг

фреймов создается
впечатление, что полосы
прокрутки "висят" в воздухе

Рис. 5.18. Полосы прокрутки во фрейме без рамок

Возможности браузера Microsoft Internet Explorer

Браузер Microsoft Internet Explorer разрешает использовать параметр
FRAMEBORDER для тех же целей, как было описано выше, но не позволяет
задавать цвет и толщину рамок. Однако в качестве значения параметра
FRAMEBORDER допустимо использовать только числовое значение "О" для отме-
ны прорисовки рамки или отличное от нуля числовое значение для прори-
совки рамки.
Различие в правилах задания значений параметра FRAMEBORDER для разных
браузеров весьма неприятно. Попробуйте, например, задать FRAMEBORDER=Yes.
Такая запись верна для Netscape, а для Microsoft Internet Explorer приведет
к отсутствию рамки. Предыдущий пример (рис. 5.17) при просмотре в
Microsoft Internet Explorer будет представлен без рамки.

С Совет
Можно рекомендовать всегда записывать значение параметра FRAMEBORDER
в числовом виде, например, FRAMEBORDER=O. Это соответствует правилам записи
параметра для Microsoft Internet Explorer, но нарушает правила для Netscape
(хотя и верно воспринимается последним).
184 Часть I. Основы HTML

Примечание
Если рамки между фреймами не прорисовываются, то браузер Microsoft Internet
Explorer (в отличие от Netscape) при отсутствии параметра NORESIZE позволит
"наощупь" изменять размеры фреймов путем перетаскивания рамок мышью.
Поймать место, где должна находиться рамка, можно по изменению формы
указателя мыши.

Браузер Microsoft Internet Explorer разрешает использовать дополнительный

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

<HTML>
<HEAD>
<Т1ТЬЕ>Изменение расстояния между фреймами</Т1ТЬЕ>
</HEAD>
<FRAMESET COLS=2*,*,* FRAMESPACING=30>
<FRAME SRC=f rame_a . htm NAME="A">
<FRAME SRC=empty . htm NAME="B">
<FRAME SRC=[Link] NAME="C">
</FRAMESET>
</HTML>

fj Изменение расстояния между Фреймами * Microsoft Internet Explorer

: : r
Back И - , Stop Refrwh Home )*<*di Fjavwe» Ainl Fwit

DAsergeev\frames\EX4MPLE\[Link]

1. Загрузка документа во Текст Текст

фрейм В тестового тестового
документа документа
2. Загрузка документа во
фрейм С

Рис. 5.19. Пустое пространство между фреймами в Microsoft Internet Explorer

Примечание
К сожалению, во многих описаниях языка HTML ошибочно указывается, что па-
раметр FRAMESPACING должен использоваться в тэге <FRAME>. Microsoft Internet
Explorer допускает использование этого параметра только в тэге <FRAMESET>.
Глава 5. Фреймы 185

Плавающие фреймы
Браузер Microsoft Internet Explorer разрешает использовать уникальный тэг
<IFRAME>, который реализует концепцию плавающих фреймов. В отличие от
обычных фреймов описание плавающих фреймов может встречаться в тексте
обычного HTML-документа. Браузеры, не поддерживающие тэг <IFRAME>,
вместо фрейма будут отображать любую информацию, записанную между
<IFRAME> и </IFRAME>. В тэге <IFRAME> применяются точно такие же парамет-
ры, как и в тэге описания обычных фреймов <FRAME>. Единственным исклю-
чением является параметр NORESIZE, применение которого бессмысленно,
так как размер плавающих фреймов в любом случае не может быть изменен
пользователем при просмотре документа.
Кроме того, для задания расположения и размеров плавающего фрейма
в документе можно использовать следующие дополнительные параметры:
WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Их назначение и порядок использова-
ния совпадает с соответствующими параметрами для встроенных изображе-
ний, которые задаются тэгом <IMG>.
Приведем пример использования плавающих фреймов:
<HTML>
<HEAD>
<Т1ТЬЕ>Использование плавающих фреймов</Т1ТЬЕ>
</HEAD>
<BODY>
<СЕЫТЕКХН2>Пример использования концепции плавающих фрей-
MOB</H2X/CENTER>
<IFRAME SRC=[Link] NAME="A" HEIGHT=300 WIDTH=40% HSPACE=10
SCROLLING=YES ALIGN=RIGHT>
Ваш браузер не позволяет отображать плавающие фреймы
</IFRAME>
Браузер Microsoft Internet Explorer — первый из браузеров (и пока
единственный), который поддерживает так называемые "плавающие" фреймы.
Такие фреймы могут размещаться в любом месте экрана так же, как
графические изображения и таблицы.
Фрейм справа от данного текста размещен на странице с помощью
специального тэга <IFRAME>. При создании фрейма было указано
выравнивание вправо.
</BODY>
</HTML>

Результат отображения данного примера браузером Microsoft Internet

Explorer показан на рис. 5.20. Браузеры, не поддерживающие концепцию
плавающих фреймов, для данного примера вместо отображения содержи-
мого документа [Link] выдадут текст "Ваш браузер не позволяет отобра-
жать плавающие фреймы".
186 Часть I. Основы HTML

lip шн Миш MM MB
lag D:\NEWJOOK\FRAMES\EXAMPLE5HTM

Пример использования концепции плавающих

фреймов
Браузер Microsoft Internet Explorer - первый из
браузеров (и пока единственный), который Документ,
поддерживает так называемые "плавающие"
фреймы. Такие фреймы могут размещаться в размещаемый в
любом месте экрана так же, как графические плавающем
изображения и таблицы. Фрейм справа от
данного текста размещен на странице с фрейме
помощью специального тэга IFRAME. При
создании фрейма было указано выравнивание
вправо.

Рис. 5.20. Плавающий фрейм в Microsoft Internet Explorer

Отметим, что концепция плавающих фреймов близка по идеологии к встро-

енным изображениям или таблицам. Здесь в нужное место HTML-доку-
мента целиком встраивается другой HTML-документ.

с Совет
В настоящий момент применение плавающих фреймов ограничивается единст-
венным браузером — Microsoft Internet Explorer версии 3.0 и выше. Следует
помнить, что пользователи других браузеров (в частности, Netscape) не смогут
увидеть содержимого плавающих фреймов.

Средства создания документов,

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

Редактор фреймов FrameGang

Одним из таких редакторов является утилита FrameGang, разработанная
австралийской фирмой Sausage Software, которая более известна своим по-
пулярным HTML-редактором HotDog.
Информацию об этом программном продукте можно получить по адресу
[Link] а также из сборника программных продуктов для
Интернета (по адресу [Link] или любому другому из не-
скольких десятков серверов-зеркал, разбросанных по всему миру).
Утилита FrameGang является дополнением к любому HTML-редактору или
обычному текстовому редактору, работающему в среде Windows, которая
позволяет визуально сконструировать необходимую структуру фреймов и
затем сгенерировать соответствующий HTML-код. Получаемый HTML-код
через буфер обмена Windows (Clipboard) может быть передан в HTML-ре-
дактор. Программа FrameGang позволит быстро построить нужную фреймо-
вую структуру.

, New FiameGdng
Рассмотрим возможности программы.
1. I т iv,.^ • После установки данной программы в
Windows и ее запуска появляется кар-
тинка, как на рис. 5.21.
•[Link] Wi.<i(ii You ! il-<; \ (mm I n»i«Ml 7

Columns Rows

red?

Рис. 5.21. Первое окно

I программы FrameGang

Здесь предлагается выбрать одну из двух возможных структур фреймов пер-

вого (верхнего) уровня — поколонное расположение фреймов (Columns) или
построчное (Rows), а также определить их количество. В дальнейшем каж-
дый из фреймов первого уровня может при необходимости быть разбит на
несколько фреймов второго уровня. Большее количество уровней фреймов
не предусмотрено, однако это не является существенным ограничением, так
как на практике редко используется более двух уровней.
Пусть для примера выбрано четыре фрейма, расположенных по колонкам.
Далее следует создать структуру фреймов второго уровня, что осуществляет-
188 Часть I, Основы HTML

ся разбиением существующих фреймов в противоположном направлении.

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

Рис. 5.22. Двухуровневая

структура фреймов

Заметим, что смешные картинки во фреймах не несут смысловой нагрузки и

служат лишь для заполнения пустого пространства. Их прорисовка может
быть отменена в меню Options. Также отметим, что само название фирмы-
производителя (sausage — сосиски) и название некоторых ее программных
продуктов (HotDog — в переводе не нуждается) определило стиль интерфейса
данного пакета — во многих пунктах меню встречается изображение сосисок.
После определения структуры фреймов следует задать их размеры. Это вы-
полняется простым перемещением границ фреймов мышью так же, как это
делается для изменения размеров окон системы Windows. Установленные
размеры для текущего фрейма отображаются в процентах в окнах с назва-
ниями Width и Height. При необходимости задать размеры фреймов не в
процентах, а в пикселах или относительных единицах, следует изменить по-
лучаемый HTML-код вручную вне программы FrameGang.
Далее для каждого фрейма нужно задать его имя (Name), которое может
быть опущено, URL-адрес документа, загружаемого в данный фрейм изна-
чально (Frame URL), а также выбрать значение параметра изменяемости
размеров фрейма (Resizeable Frame Border) и параметра прокрутки содержи-
мого фрейма (Frame Scrolling).
Глава 5. Фреймы 189

В любой момент можно посмотреть создаваемую фреймовую структуры в

выбранном внешнем браузере, не выходя из программы FrameGang. Для
этого служит кнопка Preview. Задание имени браузера производится в меню
Options. После задания всех параметров следует сгенерировать HTML-код,
соответствующий выбранной структуре фреймов, который будет записан в
буфер обмена Windows (кнопка HTML Compile). Полученный код может
быть вставлен из буфера обмена в нужное место HTML-файла при работе
в любом редакторе.
Кнопки сохранения (Save) и открытия (Open) файла позволяют сохранять и
считывать файл только в специальной кодировке, свойственной программе
FrameGang и не предназначенной для иного использования.
Ниже представлен HTML-код, сгенерированный программой FrameGang
для описанного примера:
<FRAMESET COLS="25%,25%,25%,25%">
<FRAME SCROLLING=AUTO SRC="[Link]" NAME="Frame_A">
<FRAME SCROLLING=AUTO SRC="[Link]" NAME="Frame_B">
<FRAMESET ROWS="50%,50%">
<FRAME SCROLLING=AUTO SRC="[Link]" NAME="Frame_Cl">
<FRAME SCROLLING=AUTO SRC="[Link]" NAME="Frame_C2">
</FRAMESET>
<FRAME SCROLLING=AUTO SRC="[Link]" NAME="Frame_D">
</FRAMESET>

Для получения корректного HTML-документа полученный код достаточно

заключить между тэгами <нтмь> и </HTML>. Можно добавить раздел заголовка
документа <HEAD>, в котором определить нужные данные, например, назва-
ние документа (напомним, что название документа записывается между тэ-
гами <TITLE> и </TITLE>). Заметим, что современные браузеры могут пра-
вильно работать даже при отсутствии некоторых необходимых тэгов. Если
приведенный выше HTML-код сохранить в виде файла с соответствующим
расширением даже без добавления каких-либо тэгов, то и Netscape Navi-
gator, и Microsoft Internet Explorer смогут правильно отобразить данный до-
кумент.
Программа FrameGang позволяет визуально проектировать фреймы, доста-
точна удобна и проста в эксплуатации, однако не лишена отдельных недос-
татков. В частности, нет возможности уточнить размеры фреймов, записы-
вая нужные числа в окнах Width и Height, так как в них лишь отображаются
размеры, устанавливаемые при перемещении границ фреймов мышью. Не
задаются общепринятые параметры фреймов MARGINWIDTH и MARGINHEIGHT.
Нет возможности записи файла в текстовом формате на диск, что не дает
возможности воспользоваться данной программой автономно.
190 Часть I. Основы HTML

Редактор фреймов Frame-it

Еще одним специализированным редактором фреймов является программа
Frame-It, информацию о которой (рис. 5.23) можно получить по адресу:
[Link]

Рис. 5.23. Информация

о программе Frame-It

Работа с этой программой во многом аналогична предыдущей. Сначала тре-

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

Рис. 5.24. Ьыоор фреймовой структуры в программе hrame-it

Для каждого фрейма задаются все необходимые параметры путем запол-

нения соответствующих полей (рис. 5.25). В отличие от предыдущей про-
Глава 5. Фреймы 191

граммы здесь предусмотрено задание значений параметров MARGINWIDTH

и MARGINHEIGHT. Кроме того, введен флажок Invisible Frame Borders, установ-
ка которого обеспечивает генерацию следующего фрагмента кода:
FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0".

Height,'

WWhf-

Рис. 5.25. Настройка параметров отдельных фреймов в программе Frame-It

После задания необходимых параметров фреймов можно сохранить сге-

нерированный HTML-код в файле или записать его в буфер обмена
Windows. Сгенерированный код будет содержать не только описание струк-
туры фреймов, но и начальный тэг <нтмь>, а также пару тэгов <NOFRAMES> и
</NOFRAMES>, между которыми записывается информация, предназначенная
для браузеров, не отображающих фреймы (рис. 5.26).
Для примера, показанного на рис. 5.25, будет сгенерирован следующий код:
<html>
<! - - Generated using Frame-it vl.21 >
<! - - [Link] -
<frameset cols="25%,25%,25%, 25%" FRAMEBORDER="NO" BORDER="0"
FRAMESPACING="0">
<frame name="Frame_l" src="[Link]">
<frame name="Frame_2" src="[Link]">
<frameset rows="50%,50%">
<frame name="Frame 3" src="[Link]">
192 Часть I. Основы HTML

<frame name="Frame_5" src="[Link]">

</frameset>
<frame name="Frame_4" src="[Link]">
</frameset>
<noframes>
<body>
Ваш браузер не может показывать документы
с фреймовой структурой
</noframes>

Ваш браузер не может показывать документы

; Фреймовой структурой
i Some ьчшаПеЛ

. mm

Background

Рис. 5.26. Окно для задания альтернативного содержания для браузеров,

не поддерживающих концепцию фреймов в программе Frame-It

Если в данном примере сбросить флажок Invisible Frame Borders, то генери-

руемый код значительно изменится:
<html>
<! Generated using Frame-it vl.21 >
<! - - [Link] -
<frameset cols="25%,25%,25%,25%">
<frame name="Frame_l" src="[Link]" marginheight=3 marginwidth=3
scrolling=auto noresize>
<frame name="Frame_2" src="[Link]" marginheight=3 marginwidth=3
scrolling=auto noresize>
<frameset rows="50%,50%">
Глава 5. Фреймы у 93
<frame name="Frame_3" src="[Link]" marginheight=3 marginwidth=3
scrolling=auto noresize>
<frame name="Frame_5" src="[Link]" marginheight=3 marginwidth=3
scrolling=auto noresize>
</frameset>
<frame name="Frame_4" src="[Link]" marginheight=10 marginwidth=10
scrolling=auto noresize>
</frameset>
<noframes>
<body>
Ваш браузер не может показывать документы
с фреймовой структурой
</noframes>

Информация
об использовании фреймов на WWW
Для получения информации о фреймах можно обратиться к следующим
адресам на WWW:

[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]

7 Зак. 944
 ГЛАВА 6

Карты-изображения

В последнее время многие Web-страницы для организации ссылок исполь-

зуют так называемые карты-изображения. Реализация этой возможности
предусмотрена языком HTML и позволяет привязывать гипертекстовые
ссылки к различным областям изображения. Такой подход нагляднее, чем
применение обыкновенных текстовых связей, поскольку пользователь мо-
жет не читать словесное описание связи, а сразу понять ее смысл по графи-
ческому образу.
Даже начинающий пользователь, побродив по просторам Интернета, вскоре
столкнется с картой-изображением. На рис. 6.1 показана Web-страница од-
ной из крупнейших компьютерных фирм Северо-Запада России. Основное
меню на этой странице представляет собой карту-изображение с соответст-
вующими ссылками.
Запуск известного поискового сервера Yahoo! также приводит к появлению
страницы, содержащей карту-изображение (рис. 6.2). Самая верхняя часть
изображения, приведенного на рисунке, содержит четыре кнопки, между
которыми написано слово "Yahoo!". Курсор на рисунке показывает на первую
из этих кнопок, причем форма курсора дает понять, что последний указыва-
ет на ссылку, адрес которой виден в строке статуса браузера. Ссылки, реа-
лизующиеся по этим кнопкам, и сделаны по технологии карт-изображений.
Однако не следует считать, что карты-изображения должны использоваться
всюду, где требуется организовать переходы по ссылкам. Нужно обдумать,
имеет ли смысл применение карт-изображений в том или ином случае,
взвесив все "за" и "против". В данной главе содержатся все необходимые
сведения, касающиеся использования карт-изображений.
В этой главе вы узнаете:
О Что такое карта-изображение, и как она работает
П Как создать файл конфигурации карты-изображения
П Как создать ссылки в HTML-документе, используя карту-изображение
Глава 6. Карты-изображения 195

Г!,, (,:« •.,,,: ,0 jjjj

# • * **«*»«***««*

Сегодня не найти такой области человеческой деятельности

где бы н(; применялись компьютеры. Наука и медицина,
образование и производство - все это немыслимо без
компьютеров
У нас вы найдете самый обширный выбор компьютеров для
дс>мз и офиса, работы ч развлечений, также вы сможете купи'Ь
монитор, принтер, сканер по самой выгодной цене! Нэшз
Компания является партнером Intel. ViewSonic. OoliQuesl
Western Digilal. Quantum. ATI. Diamond Multimedia. Samsung
L£?. Astjs. Sony и даугих ведущих производителей
компьютерных компонентоЕ;. Добро пожаловать на ceimep
Alpha Compuieis- одной из крупнейших компьютерных фирм
Северо-Запада России.

*****••**••*••»•«»*****»•*•

Рис. 6.1. Пример Web-страницы, в которой основное меню сделано

с помощью карты-изображения

--«*iU

УаИи! '-мгНапч I»

i IH 8 Huinanrtig>»
,|

ш .................... - ,,A. «»

Рис. 6.2. Начальная страница поискового сервера Yahoo! содержит

карту-изображение
196 Часть I. Основы HTML

П Какими принципами следует руководствоваться при использовании карт-

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

Основы использования карт-изображений

Карты-изображения предоставляют пользователям дружественный интерфейс
для перехода на другие Web-страницы. Чтобы выполнить переход по такой
ссылке, следует просто выбрать нужное место на изображении и щелкнуть
мышью. Наличие такого развитого графического интерфейса является од-
ним из значительных преимуществ Web-страниц по сравнению с другими
ресурсами Интернета. Вместо текстовых меню, подобных интерфейсу кли-
ентов системы Gopher, пользователи получают наглядное графическое пред-
ставление информации (рис. 6.3).

[Link]/EaiptA'/ondeft'

Main Site Mirror

Although most people know that a list exists of the Seven World Wonders, only few can

Рис. 6.З. Наглядное представление ссылок (на страницы, рассказывающие

о семи чудесах света) с помощью карты-изображения
Глава 6. Карты-изображения 197

Карта-изображение внешне выглядит как обычное встроенное изображение,

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

Терминология
Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map — все эти анг-
лоязычные термины используются в справочной литературе для обозначе-
ния одной и той же возможности — использование встроенного в HTML-
документ изображения, для которого определены "горячие" (или активные)
точки или области, имеющие ссылки на различные URL-адреса. Будем опи-
сывать эту возможность словосочетанием "карта-изображение", подразумевая
под этим совокупность нескольких компонентов, обеспечивающих реализа-
цию данной концепции. Основными компонентами являются: само изобра-
жение, которое будем называть опорным для данной карты-изображения;
описание конфигурации активных областей; а также соответствующее про-
граммное обеспечение.

Графическое представление
карты-изображения
Карта-изображение фактически представляет собой обычное встроенное
графическое изображение на Web-странице. Эти изображения могут иметь
любой допустимый формат (GIF или JPG). При этом в формате GIF может
использоваться прозрачный цвет, а также режим чередования строк. Для
того чтобы изображение могло использоваться в качестве опорного для кар-
ты-изображения, формально не накладывается никаких дополнительных
ограничений.

Описание конфигурации карты-изображения

Конфигурация карты-изображения записывается в виде обычного текста,
который в зависимости от используемого формата может быть сохранен в
отдельном файле или являться частью HTML-документа. Описание конфи-
гурации содержит координаты для каждой из активных областей изображе-
ния, а также URL-адреса, связанные с каждой из этих областей. Активные
198 Часть I. Основы HTML

области могут иметь форму прямоугольников, кругов и многоугольников.

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

Варианты реализации карт-изображений

Концепция карты-изображения на Web-страницах может быть реализована
в двух различных вариантах — серверный вариант (server-side imagemap) и
клиентский вариант (client-side imagemap). Последнее название часто исполь-
зуют в виде аббревиатуры CSIM. Исторически первым появился и получил
распространение серверный вариант карт-изображений, который впервые
был реализован в браузере Mosaic. Серверный вариант позволяли использо-
вать первые версии всех трех ведущих браузеров. Серверный вариант может
быть реализован в двух различных форматах, которые получили свое наиме-
нование по названиям организаций-разработчиков — NCSA и CERN.
В последнее время все большее развитие получает клиентский вариант, ко-
торый впервые был реализован в браузере Microsoft Internet Explorer. Начи-
ная с версии 2.0, этот вариант также поддерживает браузер Netscape. Дан-
ный вариант имеет свои неоспоримые преимущества и становится все более
популярным.

Преимущества и недостатки
карт-изображений
В использовании карт-изображений есть как положительные, так и отрица-
тельные моменты. Большинство из них носит эстетический характер, но
некоторые имеют и технические аспекты. Для создания хороших Web-
страниц важно понимать преимущества и недостатки карт-изображений.
Карты-изображения наиболее удобно использовать в следующих ситуациях:
П Для представления пространственных связей, например географических
координат, которые было бы трудно задать отдельными кнопками или
текстом На рис. 6.4 в качестве примера приведена карта Северной Аме-
рики, на которой выбор каждого из штатов ведет к переходу на соответ-
ствующую страницу.
О В качестве меню верхнего уровня, появляющегося на каждой странице.
Наличие такого меню предоставляет возможность перехода в интересую-
щий раздел сервера с любой страницы и в любой момент (рис. 6.5). Соз-
дание общего графического меню позволит сократить время разработки
Глава 6. Карты-изображения 199

United States/Canada • Listed by area code

i
Рис. 6.4. Карта-изображение для представления пространственных связей

A Cool Place to Work JOINTHE NETSCAPE TEAM

Netscape is always looking for people who possess
the skills, special talents, and character to go beyond
simple job descriptions and help us move into the
future of secure Internet commerce and sp
communication.

Employee Home Pages GET то KNOW OTJR TEAM

Personal home pages and email addresses for
Netscape Communications employees.

Corporate Sales: 415/937-2555, Personal Sales: 415/937-3777; Government Sales: 415/937-3678

If you have any questions, please visit Customer Service.

Рис. 6.5. Карта-изображение как меню, появляющееся на каждой странице

200 ^ Часть I. Основы HTML

HTML-документов, поскольку будет использоваться один и тот же файл

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

Серверный вариант реализации

карт-изображений
Использование на Web-страницах карт-изображений оказывается несколько
более сложным делом, чем простое встраивание интересных графических
изображений и связывание с ними ссылок. Для реализации серверного ва-
рианта карты-изображения необходимо, чтобы HTML-документ был разме-
щен на сервере. Также требуется, чтобы на сервере была сконфигурирована
поддержка CGI-сценариев (Common Gateway Interface, Общий интерфейс
шлюза), которые выполняют обработку запросов, поступающих от браузера
при работе с картой-изображением. Для каждой карты-изображения на сер-
вере должен быть размещен файл, описывающий конфигурацию активных
областей. При щелчке мышью в пределах изображения координаты места
щелчка передаются браузером серверу, который обращается к конфигураци-
онному файлу, являющемуся, по существу, поисковой таблицей активных
областей. Результат поиска возвращается браузеру в виде URL-адреса или
Глава 6. Карты-изображения 201

сообщения об отсутствии найденных активных областей, соответствующих

указанному месту изображения.
Для обеспечения функционирования карты-изображения необходимо ука-
зать, что данное изображение является опорным для карты. Это выполняет-
ся заданием параметра ISMAP в тэге <IMG>. Кроме того, карту-изображение
необходимо сделать ссылкой на Web-странице, во многом подобно тому,
как это делалось при использовании всего изображения в качестве отдель-
ной ссылки.
Напомним, что встроенные изображения могут использоваться как гипер-
текстовые ссылки, если они включены в тэг <А>. Например, чтобы сделать
изображение с именем [Link] графическим указателем ссылки на до-
кумент в том же самом каталоге с именем [Link], следует записать:
<А HREF=[Link] XIMG SRC=[Link]/A>

Этот HTML-код сообщает серверу, что при щелчке на изображении

[Link] браузеру должен быть возвращен документ с именем [Link].
Параметр ISMAP, добавленный к тэгу <IMG> для приведенного примера, акти-
визирует карту-изображение. Ссылка в этом случае выполняется не к опре-
деленному документу, а к файлу конфигурации карты-изображения, содер-
жащему координаты всех активных областей изображения. Файл конфигу-
рации, обычно имеющий расширение MAP, анализируется CGI-программой
на сервере вкупе с координатами точки щелчка на изображении. Тогда вме-
сто приведенной строки следует записать:
<А HREF=[Link] SRC=MyImage, gif ISMAPX/A>

Ссылка в этом примере представляет собой не адрес другого HTML-доку-

мента, а файл конфигурации карты-изображения, который содержит коор-
динаты для каждой активной области изображения с именем [Link].

С Примечание ^
Порядок расположения параметров тэга <IMG> произволен, однако, параметр
ISMAP обычно помещают последним.

Файл конфигурации изображения-карты — это обычный текстовый файл,

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

С Совет ^
Для каждой карты-изображения необходим отдельный файл конфигурации.
Примите за правило сохранять файл конфигурации в том же самом каталоге и
с тем же именем, что и связанное с ним изображение. Например: main__menu.gif
и main [Link].
202 _ Часть I. Основы HTML

Существуют два формата файлов конфигурации карт-изображений, разрабо-

танные в CERN и NCSA и носящие названия этих организаций. Оба этих
формата содержат одинаковую информацию, но по-разному ее представля-
ют. В обоих случаях используются одни и те же типы областей, о которых
речь пойдет ниже. При разработке карт-изображений для использования на
конкретном сервере необходимо получить у администратора системы сведе-
ния о принятом на данном сервере способе поддержки карт-изображений.
В обоих форматах используются активные области в виде прямоугольников,
кругов и многоугольников, а также может задаваться так называемая область
по умолчанию (default), которая характеризует все точки области, не при-
надлежащие ни к одной из активных областей. Если пользователь выпол-
няет щелчок внутри изображения, но вне любой из заданных активных об-
ластей, то в качестве URL-адреса будет взято значение, определяемое типом
default.
Для каждой области в файле конфигурации записывается URL-адрес, кото-
рый будет возвращен пользователю, когда произойдет щелчок внутри дан-
ной области. Этот адрес может быть написан как в относительной, так и в
абсолютной форме. Нужно учесть, что относительный URL-адрес должен
быть определен по отношению к расположению файла конфигурации, а не
файла изображения. Список активных областей в файле конфигурации чи-
тается, начиная с первой строки. Если две области перекрываются, то реа-
лизуется та ссылка, описание области действия которой встретится первым
в файле конфигурации.

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

Далее рассмотрим особенности записи и использования различных форма-

тов серверного варианта карт-изображений.

Формат CERN
CERN — это европейский научный центр, тематика исследований которого
весьма широка. Именно здесь была разработана концепция системы World
Wide Web, которая явилась толчком всех разработок в области WWW. По
праву CERN можно считать родиной Web. Когда возникла необходимость
разработки структуры файлов конфигурации карт-изображений, в CERN
был предложен следующий формат:
тип_области координаты URL-адрес
Глава 6. Карты-изображения 203

Значения пар координат X и Y разделяются запятой и заключаются в круг-

лые скобки. Формат CERN не допускает использования комментариев для
пояснения ссылок, связанных с той или иной областью. Могут использо-
ваться следующие типы областей: rect, circle, poly и default. Этот формат
допускает двоякое написание названий типов областей — как в сокращен-
ной, так и в полной форме. Наряду с приведенными названиями типов мо-
гут использоваться названия rectangle, circ И polygon.
Приведем пример записи информации об участках на карте-изображении в
формате CERN:
rect ( 5 6 , 4 7 ) (357,265) [Link]
circ (366,147) 109 [Link]
polygon ( 5 3 4 , 6 2 ) ( 6 9 9 , 6 2 ) ( 6 9 8 , 2 3 6 ) (626,261) (534,235) (534,62)
[Link]

Формат NCSA
Национальный центр суперкомпьютерных приложений NCSA (National
Center for Supercomputing Applications) университета штата Иллинойс также
внес значительный вклад в развитие Web. Здесь был создан первый попу-
лярный графический браузер — программа Mosaic. В NCSA был предложен
формат конфигурационного файла, отличающийся по форме записи от
формата CERN. Этот формат имеет следующий вид:
тип_рбласти URL-адрес координаты

Могут ИСПОЛЬЗОВаТЬСЯ Следующие ТИПЫ Областей: rect, circle, poly, default

И point.
Координаты X и Y отделяются запятыми, но не заключаются в круглые
скобки. В этом формате допускается использование строк комментариев.
Любая строка, начинающаяся с символа #, будет рассматриваться как ком-
ментарий, и ее содержимое будет игнорироваться программой интерпретации.
Формат NCSA предлагает несколько отличный способ для задания круговых
областей (по сравнению с форматом CERN и рассматриваемым ниже кли-
ентским вариантом). Круговая область задается координатами двух точек -
центра и любой точки, лежащей на окружности.

( Примечание ~^)
Формат NCSA допускает использование типа области point (точечная об-
ласть). Этот тип области не применяется ни в формате CERN, ни при исполь-
зовании клиентского варианта карт-изображений. Замысел создателей форма-
та заключался в том, что при наличии ряда точечных областей по щелчку мыши
активизировалась ссылка, находящаяся ближе других. Однако, наличие такого
типа области, по существу, входит в противоречие с типом области default,
так как при одновременном использовании областей point и default реализа-
204 Часть I. Основы HTML

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

Приведем пример записи конфигурационного файла формата NCSA:

# Пример записи конфигурационного файла
rect [Link] 56,47 357,265
circle [Link] 366,147 366,256
poly [Link] 534,62 699,62 698,236 626,261 534,235 534,62

Клиентский вариант карты-изображения

Клиентский вариант карты-изображения позволяет разместить всю инфор-
мацию о конфигурации карты в HTML-файле, в который встроено изобра-
жение. В случае же применения серверного варианта браузер посылает за-
прос на сервер для получения адреса выбранной ссылки и ждет ответа с
требуемой информацией. Это может потребовать дополнительных затрат
времени на ожидание. При клиентском варианте число обращений к серве-
ру уменьшается, и увеличивается скорость доступа к информации. В этом
варианте также для редактирования конфигурации карты нет необходимости
обращения к серверу, поэтому вся работа по созданию карты-изображения
может быть выполнена локально, одновременно с редактированием HTML-
файла. В отличие от серверного варианта, в котором для каждой карты-
изображения требовался отдельный конфигурационный файл, в этом вари-
анте конфигурация карты может располагаться непосредственно в том же
HTML-документе, в котором задана ссылка на опорное изображение. Чаще
всего именно так и поступают, хотя допустимо сохранять конфигурацию
карты в отдельном файле и давать на него ссылку.
Для указания того, что встроенное изображение является опорным для кар-
ты, используется параметр USEMAP тэга <IMG>. Значением параметра USEMAP
является ссылка на описание конфигурации карты.

(~ Примечание ~^)
Браузер Netscape не допускает использование отдельного файла для описания
конфигурации карты.

Например:
<IMG SRC=[Link] USEMAP=#logo>

В этом примере изображение, хранящееся в файле с именем [Link], явля-

ется опорным для карты-изображения, реализуемой в клиентском варианте.
Глава в. Карты-изображения 205

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

файле, что и данная строка HTML-кода, и иметь для данного примера имя
logo.

Тэг <МАР>
Для описания конфигурации областей карты-изображения используется
специальный тэг <МАР>, единственным параметром которого является NAME.
Значение параметра NAME определяет имя, которое должно соответствовать
имени в USEMAP. Тэг <МАР> требует закрывающего тэга </МАР>. Внутри этой
пары тэгов должны располагаться описания активных областей карты, для
чего используется специальный тэг <AREA>.

Тэг <AREA>
Каждый отдельный тэг <AREA> задает одну активную область. Завершающий
тэг не требуется. Активные области могут перекрываться. В случае если не-
которая точка относится одновременно к нескольким активным областям,
то будет реализована та ссылка, описание которой располагается первым
в списке областей.
Параметрами тэга <AREA> являются SHAPE, COORDS, HREF, NOHREF, TARGET, и ALT.
Рассмотрим назначение этих параметров.

Параметр SHAPE
Параметр SHAPE определяет форму активной области. Допустимыми значе-
ниями являются rect, circle, poly, default. Эти значения задают области в
виде прямоугольника, круга, многоугольника. Последнее значение — default -
определяет все точки области. Если параметр SHAPE опущен, то по умолча-
нию предполагается значение rect, т. е. область в виде прямоугольника.

Предупреждение
Не следует путать область типа default, которая описывает все точки изобра-
жения, и значение параметра SHAPE по умолчанию, которым является rect.

Примечание
В отличие от серверного варианта, где область типа default определяла все
точки на изображении, которые не относятся к какой-либо активной области,
для клиентского варианта область типа default определяет вообще все точки
изображения. Поэтому в данном случае описание области default должно
располагаться последним в списке активных областей. Если, например, описа-
ние области default поставить первым, то всегда для клиентского варианта
будет реализовываться ссылка, определяемая данной областью, а все осталь-
ные ссылки будут игнорироваться (именно так реализован данный тип области
206 Часть I. Основы HTML

в Netscape). Для серверного варианта расположение описания области default

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

Совет
Отметим также, что не все браузеры поддерживают тип области default. В част-
ности, Microsoft Internet Explorer вообще не разрешает использовать данный
тип области. Поэтому вместо области типа default можно рекомендовать за-
дание прямоугольной области с размерами, равными размерам всего изобра-
жения. Естественно, что такая область должна описываться последней. Именно
так поступают некоторые программы редактирования карт-изображений, кото-
рые будут рассматриваться ниже.

Параметр COORDS
Параметр COORDS задает координаты отдельной активной области. Значением
параметра является список координат точек, определяющих активную об-
ласть, разделенных запятыми. Координаты записываются в виде целых не-
отрицательных чисел. Начало координат располагается в верхнем левом углу
изображения, которому соответствует значение 0,0. Первое число определя-
ет координату по горизонтали, второе — по вертикали. Список координат
зависит от типа области.
Для области типа rect задаются координаты верхнего левого и правого
нижнего углов прямоугольника.
Для области типа circle задаются три числа — координаты центра круга
и радиус.
Для области типа poly задаются координаты вершин многоугольника в нуж-
ном порядке. Заметим, что последняя точка в списке координат не обяза-
тельно должна совпадать с первой. Если они не совпадают, то при интер-
претации данных для этой формы области браузер автоматически соединит
последнюю точку с первой. Различные редакторы карт-изображений в этом
отношении работают по-разному — одни добавляют первую точку в конец
списка, а другие — нет. Количественные ограничения на число вершин до-
вольно велики и покрывают практически все мыслимые потребности. По
крайней мере многоугольник, имеющий 100 вершин, уверенно обрабатывает-
ся всеми ведущими браузерами. Есть ограничение, связанное с самим язы-
ком HTML, согласно которому список не может содержать более 1024 зна-
чений. Многоугольник вполне может быть невыпуклым.
Область типа default не требует задания координат.

Параметры HREF и NOHREF

Параметры HREF и NOHREF являются взаимоисключающими. Если не задан ни
один из этих параметров, то считается, что для данной области не имеется
Глава 6. Карты-изображения 207

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

чения. Параметр HREF определяет адрес ссылки, который может записывать-
ся в абсолютной или относительной форме. Правила записи полностью
совпадают с правилами записи ссылок в тэге <А>.
Параметр NOHREF полезно использовать для исключения части активной об-
ласти. Пусть, например, необходимо создать активную область в виде коль-
ца. Такой тип области не предусмотрен в списке возможных областей, од-
нако он может быть реализован путем задания двух круговых областей. Для
этого сначала следует задать область меньшего радиуса и указать в качестве
параметра NOHREF. Далее нужно задать область большего радиуса с центром в
той же точке и указать нужную ссылку. Тогда область внутри кольца, опре-
деленная двумя окружностями различного радиуса, будет иметь необходи-
мую ссылку. Использование подхода, основанного на взаимном перекрытии
областей, позволит строить области весьма разнообразной формы.

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

Параметр ALT
Параметр ALT позволяет записать альтернативный текст для каждой из ак-
тивных областей изображения. По существу этот текст будет играть лишь
роль комментария для создателя документа. Если альтернативный текст, за-
писанный для всего изображения (в тэге <IMG>), служит для выдачи его на
экран при работе с отключенной загрузкой изображений, то альтернатив-
ный текст для активных областей никогда на экране не появится.
Приведем пример задания областей различных типов:
<МАР NAME="logo">
<AREA SHAPE=rect COORDS="33,60,191,246" HREF="[Link]" АЬТ="Прямоугольная
область">
<AREA SHAPE=circle COORDS="366,147,109" HREF="[Link]" ALT="Круговая область">
<AREA SHAPE=poly COORDS="534,62,699,62,698,236,626,261,534,235"
HREF="[Link]" АЬТ="Многоугольник">
<AREA SHAPE=default HREF="[Link]">
</MAP>

Этот фрагмент кода размещается в HTML-файле. Часто все описания карт-

изображений одного документа сводятся вместе и размещаются в начале
раздела <BODY> документа. Такой подход близок программистам, которые
208 ^ Часть I. Основы HTML

обычно при написании программ разносят описательную часть программы

и исполняемую, что упрощает понимание записанного кода, а иногда и оп-
ределяется требованиями компилятора.

Комбинация
клиентского и серверного вариантов
Допустимо использование комбинированного варианта, при котором для
одного и того же изображения определены оба параметра — USEMAP и ISMAP,
что предполагает использование данного изображения в качестве опорного
как для клиентского, так и для серверного варианта. Параметр USEMAP явля-
ется доминирующим. Это означает, что браузер, который поддерживает кли-
ентский вариант, будет использовать USEMAP, игнорируя указания параметра
ISMAP. Те браузеры, которые не поддерживают клиентский вариант и не
поймут назначение параметра USEMAP, согласно общим правилам HTML
проигнорируют его наличие и будут реализовывать серверный вариант, об-
наружив присутствие параметра ISMAP. Комбинированный вариант является
более надежным, однако требует наличия данных для конфигурации облас-
тей для обоих вариантов. В настоящее время необходимость использования
комбинированного варианта все более снижается, так как все ведущие брау-
зеры осуществляют поддержку клиентского варианта. Тем не менее, началь-
ные странички компании Netscape, с которыми наверняка сталкивался лю-
бой пользователь браузера Netscape, сделаны именно в комбинированном
варианте.
Приведем пример комбинированного варианта:
<А HREF="[Link]
<IMG SRC="[Link]" USEMAP="#logo" ISMAP></A>

Примечание
Параметр USEMAP также является доминирующим по отношению к ссылке, оп-
ределяемой тэгом <А>. Так, если изображение, используемое для реализации
концепции карты-изображения в клиентском варианте, записано внутри облас-
ти действия тэга <А HREF>, то ссылка, определяемая последним тэгом, будет
проигнорирована браузерами, поддерживающими клиентский вариант. Пусть,
например, имеется следующий фрагмент:
<А HREF=NoMaps . htm> <IMG SRC="example. gif " USEMAP= " #map " </A>.

С одной стороны, все изображение является ссылкой на документ с именем

[Link]. С другой стороны, наличие параметра USEMAP определяет данное
изображение как опорное для соответствующей карты-изображения. Ссылка на
документ [Link] будет игнорироваться уже благодаря присутствию пара-
метра USEMAP и вне зависимости от других факторов.
Глава 6. Карты-изображения 209

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

Альтернативные средства навигации

Применение карт-изображений стало общепринятым, однако не следует за-
бывать о том, что еще не все пользователи Web могут использовать графику
или же хотят работать в режиме отключения загрузки изображений для
уменьшения времени передачи файлов. Поэтому нужно предусмотреть для
них какие-либо другие, альтернативные средства навигации на странице.
В противном случае пользователи вообще не смогут обнаружить на странице
и, соответственно, реализовать те ссылки, которые определены только кар-
той-изображением.
В качестве альтернативного варианта можно создать отдельный раздел с
текстовым описанием ссылок и соответствующих URL-адресов. Можно
также создать ссылку на текстовое меню, которое имеет те же самые связи,
что и карта-изображение. При любом подходе, какой бы ни был избран,
нужно убедиться, что для текстового режима браузера доступны все ссылки.
Приведем пример реально существующего документа, в котором решены эти
вопросы. На рис. 6.6 показан фрагмент одной из страниц известной фирмы
Hewlett-Packard, в котором есть карта-изображение. В середине страницы
располагается перечень десяти различных типов оборудования, для каждого
из которых задана ссылка на соответствующий документ. На самом деле на
странице располагается картинка, которая является опорным изображением
для карты. На этом изображении выделены десять прямоугольных зон, яв-
ляющимися активными областями.
Если загрузить данную страницу при отключенном режиме загрузки изо-
бражений, то вы увидите картинку, показанную на рис. 6.7. Обратите вни-
мание, что вместо карты-изображения присутствует лишь маленькая пик-
тограмма, показывающая местоположение изображения и текст, который
210 Часть I. Основы HTML

Seaah ISC
Welcome to the Information
Storage Group Support
Site
Please Select Your Product Type

«an Drives
NEW drawing
for the chance ado Tape Drives
to win a
Шлю
; Optical

itorage Products it Libraries

[Colorado Travan Drives) [All Other Colorado Tape Drives]

[SureStore CD-Writer] [SureStore Disk]
fAU Other HP Storage Products] [SureStore DAT]
[SureStore DLT] [SurcStore T4i] [SureStore Optical]
fSurcStorc DLT Libraries]

Рис. 6.6. Фрагмент HTML-страницы, содержащей

карту-изображение и дублирующее текстовое меню

НИИРЧ"

to the Information
Enter our Storage Group Support
NEW drawing
for the chance Site
T4QQOes!
Please Select Your Product Type

[Colorado Travan Drives] ГА11 Other Colorado Tape Drives]

rSurcStorc CD-Writer] [SureStore Disk]
[All Other HP Storage Products] [SureStore DAT]
[SureStore DLT] [SureStore T4i] [SureStore Optical]
[SureStorc DLT Libraries]
"V : -Т-Ч
Рис. 6.7. Данная HTML-страница показана в режиме
отключения загрузки изображений
Глава 6. Карты-изображения 211

был задан в качестве альтернативного для всего данного изображения. Оче-

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

Средства создания карт-изображений

Создание карт-изображений требует двух шагов: подготовки опорного изо-
бражения, на котором впоследствии будут заданы активные области, и раз-
работки файла конфигурации, описывающего геометрические параметры
активных областей. Подготовка изображения, которое будет являться осно-
вой для карты-изображения, ничем не отличается от работы по подготовке
обычных изображений, встраиваемых на Web-страницах. Для этого можно
воспользоваться любым графическим редактором или использовать готовое
изображение.
На втором шаге необходимо отметить активные области на изображении и
сопоставить им соответствующие адреса ссылок. Подготовка файла конфи-
гурации является наиболее трудным шагом в создании карт-изображений.
В принципе возможен ручной способ задания границ активных областей на
изображении. Например, при работе в графическом редакторе можно отме-
чать отдельные точки, записывать их координаты и затем создавать файл
описания геометрических параметров выбранных областей. Однако такой
подход крайне неудобен и громоздок.
Для автоматизации процесса разметки областей на изображении существует
ряд программ, большинство из которых очень похожи друг на друга. Они
позволяют создавать и изменять файлы конфигурации, работая непосредст-
венно с изображением на экране. Большинство программ представляют со-
бой отдельные утилиты, работающие автономно и, по существу, являющие-
ся дополнением к HTML-редакторам. Эти программы позволяют сохранять
создаваемый конфигурационный файл либо в буфере обмена Windows, либо
в файле на диске. В первом случае типичным вариантом является совмест-
ная работа программы редактирования карты-изображения и какого-либо
HTML-редактора или обычного текстового редактора. Если же программа
позволяет сохранять конфигурационный файл на диске, то она может ис-
пользоваться полностью автономно. Все программы позволяют размечать на
изображении области трех основных типов — rect, circle и poly. Некото-
рые редакторы поддерживают тип default. Пожалуй, единственным крите-
рием выбора программы редактирования карт-изображений является удоб-
ство ее использования, так как по функциональным свойствам все програм-
212 Часть I. Основы HTML

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

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

Программа MapEdit
Одной из наиболее простых и известных программ редактирования конфи-
гурационных файлов является утилита MapEdit, разработанная Томасом Бу-
теллом (Thomas Boutell). Эта программа существует уже на протяжении не-
скольких лет и реализована для различных платформ. В частности, имеются
версии для Windows 3.x и Windows 95/98/NT. Как и для большинства про-
грамм, существовал ряд версий данной утилиты. На текущий момент по-
следней доступной версией для Windows 95/98/NT является версия 2.6
(сентябрь 1999 г.). Информацию о программе можно получить по адресу:
[Link]

Программа MapEdit является условно-бесплатной (shareware) и имеет 30-днев-

ный оценочный период, по истечении которого необходима ее регистрация.
Программа невелика по размеру — дистрибутив занимает около 300 Кб,
и при этом обладает практически всеми необходимыми возможностями.
Программа позволяет редактировать конфигурационные файлы как для сер-
верного варианта (в форматах NCSA и CERN), так и для клиентского. Есть
возможность визуального создания активных областей в форме прямоуголь-
ников, кругов и многоугольников, а также определения адреса ссылки для
области по умолчанию.
Рассмотрим вкратце основные возможности данной программы. После за-
пуска MapEdit выдается основное окно, содержащее заставку (рис. 6.8) и
меню. Имеется возможность редактирования существующих файлов как для
серверного, так и для клиентского вариантов карт-изображений. Есть воз-
можность также создания нового файла конфигурации, однако это касается
только серверного варианта. Для клиентского варианта необходимо наличие
исходного HTML-файла со ссылками на встроенные изображения, которые
будут использоваться в качестве опорных для карт-изображений.

( Примечание }
Невозможность создания нового HTML-файла с помощью программы MapEdit
можно легко обойти. Для этого следует запустить программу в режиме созда-
ния файла в одном из форматов серверного варианта (NCSA и CERN), выпол-
нить все необходимые действия, а затем сохранить полученные результаты
в режиме Save as, указав при этом формат Client Side Map. Будет создан
HTML-файл, который в дальнейшем можно использовать в качестве готового
фрагмента HTML-документа.

Пусть нам необходимо создать новый конфигурационный файл для сервер-

ного варианта карт-изображений. Выберем пункт Open/Create Map из меню
Глава 6. Карты-изображения 213

File. Появится диалоговое окно (рис. 6.9), в котором следует задать имя соз-
даваемого файла конфигурации (например, [Link]), указать сущест-
вующий файл с изображением и формат создаваемого файла (NCSA или
CERN). Файл изображения может иметь формат GIF, JPG или PNG.

MAPI Э! Рис. 6.8. Заставка

MapEdit

Open/Create Map

PMC. 6.9. Диалоговое окно

Open/Create Map для создания
конфигурационного файла

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

Программа загрузит выбранный файл с изображением, на котором можно

будет произвести разметку активных областей (рис. 6.10).
Для этого нужно выбрать форму активной области — прямоугольник, круг
или прямоугольник путем нажатия соответствующей пиктограммы или вы-
бора нужного пункта из меню Tools (рис. 6.11).
Дальнейшие действия производятся непосредственно на изображении путем
отметки точек мышью. Для прямоугольной области отмечают левый верх-
ний и правый нижний углы, для круговой области — центр и одну из точек
214 Часть I. Основы HTML

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

рис. 6.10 показан случай, когда на изображении уже размечены три актив-
ных области различной формы. Заметим, что линии, ограничивающие ак-
тивные области, служат лишь для их визуализации при работе в редакторе и
никак не изменяют файл с изображением. Изображение в данном примере
по существу содержит три отдельных картинки (изображены гербы городов
Томск, Якутск и Санкт-Петербург), что обычно не характерно для реалисти-
ческих изображений. Однако для изображений, содержащих, например, на-
бор кнопок управления, такая ситуация довольно типична.

Рис. 6.10. Изображение с размеченными активными областями различного типа

Object URL
fie Eg§ He.l,.
i * .§*||

Герб города Томск

Рис. 6.11. Меню Tools

Рис. 6.12. Диалоговое окно

Object URL для задания URL-адреса
и необязательного комментария

После разметки любой из областей следует задать адрес ссылки, соответст-

вующий данной области, а также комментирующую информацию (рис. 6.12).
Можно задать адрес ссылки для области по умолчанию, который будет pea-
Глава 6. Карты-изображения 215

лизовываться для части области изображения, не входящей ни в одну из ак-

тивных областей (рис. 6.13).
После разметки областей можно визуально проконтролировать или изме-
нить созданные активные области, воспользовавшись пунктом Test меню
Edit. Последним шагом работы является сохранение результатов в виде фай-
ла конфигурации (пункт Save меню File). Можно также использовать пункт
Save As, в котором задать требуемый формат сохранения файла (рис. 6.14).

[Link] Cartel

Рис. 6.13. Диалоговое окно

Default URL для задания URL-адреса
для области по умолчанию
я
Рис. 6.14. Диалоговое окно
команды Save As

Примечание
Старые версии редактора MapEdit содержали небольшую ошибку, связанную
с заданием формата сохраняемого файла конфигурации. Если при создании
файла был указан формат CERN, то при сохранении данных в режиме Save
файл все равно будет сохранен в формате NCSA. Создать файл формата
CERN удается только при использовании режима Save as с указанием требуе-
мого формата.

Для рассматриваемого примера будет создан файл с именем [Link],

содержащий следующую информацию (формат NCSA):
#Герб города Томск
rect [Link]/sergeev/[Link] 35,58 187,244
#Герб города Якутск
circle [Link]/sergeev/[Link] 364,150 468,150
#Герб города Санкт-Петербург
poly [Link]/sergeev/[Link] 537,61 700,61 700,230 618,256 537,231

Те же данные, сохраненные редактором в формате CERN, будут выглядеть

следующим образом:
rect (35,58) (187,244) [Link]/sergeev/[Link]
circle (364,150) 104 [Link]/sergeev/[Link]
poly (537,61) (700,61) (700,230) (618,256) (537,231)
[Link]/sergeev/[Link]
216 Часть I. Основы HTML

Заметим, что комментарии в данном формате не допускаются, поэтому при

сохранении файла эта информация будет утрачена.
Рассмотрим задачу создания клиентского варианта карты-изображения. Для
решения этой задачи необходимо наличие исходного HTML-файла, содер-
жащего хотя бы одно встроенное изображение. Данный исходный файл мо-
жет быть создан заранее любым текстовым редактором или специальным
HTML-редактором. Пусть имеется файл с именем [Link], содержащий
следующий код:
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC=[Link]>
</BODY>
</HTML>

Этот файл следует открыть в редакторе Map Edit (рис. 6.15). В отличие от
варианта, в котором выполнялось создание конфигурационного файла, здесь
не требуется указание имени файла с изображением в пункте меню Open/Create
Map.

Qpen/Cieale Map

ы-цчаниponding (о an?
iivs HTML document

Рис. 6.15. Диалоговое окно

Open/Create Map для открытия
существующего HTML-файла
Рис. 6.16. Диалоговое окно
Select Inline Image

Редактор после открытия исходного HTML-файла выдаст диалоговое окно

с перечнем всех встроенных изображений, из которого необходимо выбрать
нужное (рис. 6.16). Конечно, файл с выбранным изображением должен су-
ществовать.
Дальнейшая работа по разметке активных областей полностью идентична
предыдущему случаю. После сохранения результатов разметки исходный
файл будет изменен, и для приведенного примера будет иметь следующий
вид:
Глава 6. Карты-изображения _ 217

<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC="Blazons .gif " usemap="#Blazons">
<map name="Blazons">
<area shape="rect" alt='Tep6 города Томск" coords="35, 58, 187, 244"
href="[Link]">
<area shape="circle" alt='Tep6 города Якутск" coords="364, 150, 104"
href="[Link]">
<area shape="poly" alt='Tep6 города Санкт-Петербург"
coords="537, 61, 700, 61, 700, 230, 618, 256, 537, 231" href="[Link]">
<area shape="default" nohref>
</map>
</BODY>
</HTML>

Обратите внимание, что редактор автоматически присваивает имя для опи-

сания карты-изображения, которое совпадает с именем файла опорного изо-
бражения. Для данного примера файл с изображением имел имя [Link],
поэтому параметру name тэга <тар> было присвоено значение "Blazons".

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

Программа Map THIS!

Еще одной утилитой создания и редактирования конфигурационных файлов
карт-изображений является программа Map THIS!, информацию о которой
можно получить по адресу:
[Link]
Работа с данной программой по идеологии схожа с программой MapEdit.
Основой работы с программой является визуальное конструирование актив-
ных областей с дальнейшим сохранением результатов в файле в одном из
выбранных форматов. Редактор поддерживает оба формата серверного вари-
анта карт-изображений (NCSA и CERN) и клиентский вариант. Изображе-
ния могут загружаться из файлов в форматах GIF и JPG.
Приведем примеры файлов конфигурации, созданных данной программой.
Для примера, приведенного в предыдущем разделе, файл, сохраненный
в формате NCSA, будет иметь следующий вид:
218 Часть I. Основы HTML

I$MTIMFH
#$-:Image Map file created by Map THIS!
#$-:Map THIS! free image map editor by Todd C. Wilson
#$-:Please do not edit lines starting with "#$"
#$VERSION:1.30
#$TITLE: Blazons
#$DESCRIPTION:Серверный вариант карты-изображения
#$AUTHOR:Сергеев
#$DATE:Tue Sep 14 12:10:42 1999
i$PATH:С:\Program Files\Mapthis\
#$GIF:[Link]
#$FORMAT:ncsa
#$EOH
default [Link]
# Герб города Томск
rect [Link] 33,60 191,246
# Герб города Якутск
circle [Link] 366,147 366,256
# Герб города Санкт-Петербург
poly [Link] 534,62 699,62 698,236 626,261 534,235 534,62

В отличие от программы MapEdit, данный редактор записывает в выходной

файл довольно много комментирующей информации, включающей краткие
сведения о самой программе, дате создания файла и др. При этом после
символа #, означающего начало строки комментария, редактор добавляет
символ $ для строк-комментариев, создаваемых самим редактором. Обрати-
те внимание на четвертую строчку приведенного кода, в которой содержит-
ся просьба не редактировать комментарии, вставленные редактором.
Тот же пример, сохраненный в формате CERN, будет иметь вид:
rect (4096,4096) (4096,4096) mt:#$MTIMFH
rect (4096,4096) (4096,4096) mt:#$-:Image Map file created by Map THIS!
rect (4096,4096) (4096,4096) mt:#$-:Map THIS! free image map editor
by Todd C. Wilson
rect (4096,4096) (4096,4096) mt:f$-:Please do not edit lines starting
with "tt$"
rect (4096,4096) (4096,4096) mt:#$VERSION:1.30
rect (4096,4096) (4096,4096) mt:#$TITLE: Blazons
rect (4096,4096) (4096,4096) mt:#$DESCRIPTION: Серверный вариант
карты-изображения
rect (4096,4096) (4096,4096) mt:#$AUTHOR:Сергеев
rect (4096,4096) (4096,4096) mt:#$DATE:Tue Sep 14 12:10:42 1999
rect (4096,4096) (4096,4096) mt:#$PATH:C:\Program Files\Mapthis\
rect (4096,4096) (4096,4096) mt:#$GIF:[Link]
rect (4096,4096) (4096,4096) mt:#$FORMAT:cern
rect (4096,4096) (4096,4096) mt:#$EOH
default [Link]
Глава 6. Карты-изображения 219
rect (4096,4096) (4096,4096) mt:# Герб города Томск
rectangle (33,60) (191,246) [Link]
rect (4096,4096) (4096,4096) mt:# Герб города Якутск
circ (366,147) 109 [Link]
rect (4096,4096) (4096,4096) mt:# Герб города Санкт-Петербург
polygon (534,62) (699,62) (698,236) (626,261) (534,235) (534,62) [Link]

Как видно из приведенного выше кода, редактор использует несколько ис-

кусственный прием для сохранения комментариев, как введенных пользова-
телем, так и генерируемых самой программой. Напомним, что формат
CERN не позволяет задавать строки комментариев, поэтому редактор созда-
ет строку вида
rect (4096,4096) (4096,4096),

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

описывает прямоугольник, который заведомо располагается за пределами
экрана, поэтому его наличие не играет роли. Конечно, при этом текст кон-
фигурационного файла становится гораздо более громоздким и неудобным
для чтения, что, правда, не мешает работе программ. Этот прием сохране-
ния комментариев может быть взят на вооружение.
Тот же пример, сохраненный в виде HTML-файла (для клиентского вариан-
та карт-изображений) будет иметь вид:
<BODY>
<МАР NAME="Blazons">
<!— #$-:Image Map file created by Map THIS! —>
<!— #$-:Map THIS! free image map editor by Todd C. Wilson —>
<!— #$-:Please do not edit lines starting with "#$" —>
<!-- #$VERSION:1.30 —>
<!— #$DESCRIPTION:Клиентский вариант карты-изображения —>
<!— #$AUTHOR:Сергеев —>
<!— #$DATE:Tue Sep 14 12:10:42 1999 -->
<!— #$PATH:С:\Program Files\Mapthis\ —>
<!— #$GIF:[Link] —>
<AREA SHAPE=RECT COORDS="33,60,191,246" HREF="[Link]"
АЬТ="Герб города Томск">
<AREA SHAPE=CIRCLE COORDS="366,147,109" HREF="[Link]"
ALT='Tep6 города Якутск">
<AREA SHAPE=POLY COORDS="534,62,699,62,698,236,626,261,534,235,534,62"
HREF="[Link]" АЬТ="Герб города Санкт-Петербург">
<AREA SHAPE=default HREF="[Link]">
</MAP>
</BODY>

Здесь, в отличие от программы MapEdit, имя карты-изображения необходи-

мо задавать вручную, поэтому оно может и не совпадать с именем файла
с опорным изображением.
220 Часть I. Основы HTML

Программа CrossEye
Программа-редактор конфигурационных файлов CrossEye, созданная из-
вестной австралийской компанией Sausage Software. Эта программа будет
встречена с радостью поклонниками популярного HTML-редактора HotDog,
поскольку она создана той же компанией и имеет весьма привлекательный,
выполненный с юмором, интерфейс (рис. 6.17).

5 Т" НЕ. il'0.1";

Рис. 6.17. Заставка

; программы CrossEye 1.4

Информация о пакете CrossEye может быть получена по адресу:

[Link]

Отличительными особенностями программы является довольно большой

размер дистрибутива (около 2,5 Мб), а также небольшой период времени
(14 дней), в течение которого можно ее эксплуатировать в режиме оценки.
Большой размер программ характерен для всего программного обеспечения,
создаваемого компанией Sausage Software, что, видимо, обусловлено выбо-
ром инструментария, используемым для разработки (Visual Basic).
К сожалению, программа не обладает рядом необходимых свойств. Напри-
мер, отсутствует возможность чтения существующего HTML-файла, поэтому
невозможно отредактировать уже имеющуюся карту-изображение, которая
была создана ранее. Также невозможно выполнить сохранение результатов
работы непосредственно в HTML-файле. Сохранение результатов возможно
лишь в файле со специальным расширением EYE, который имеет двоичный
вид и может использоваться в дальнейшем только в этом редакторе. Сгене-
Глава 6. Карты-изображения 221

рированный HTML-код записывается в буфер обмена Windows, откуда он

может быть скопирован в любой текстовый редактор.
Как и во всех редакторах, описанных выше, создание и редактирование ак-
тивных областей осуществляется непосредственно на изображении, однако
загрузка изображения осуществляется в окно, размеры которого по непо-
нятным причинам невозможно изменить. Если изображение больше разме-
ров окна, то для просмотра изображения можно использовать прокрутку, но
задать активную область, выходящую за пределы окна просмотра, становит-
ся невозможно.
Для клиентского варианта карты-изображения редактор вообще не предла-
гает задать URL-адрес для области по умолчанию. Возможно, это сделано
специально, так как не все браузеры поддерживают тип области default.
Тем не менее, редакторы, описанные выше, эту проблему решают весьма
изящно, автоматически заменяя область по умолчанию на прямоугольную
область с размерами, равными размерам изображения.
Недостатки в некотором смысле компенсируются отдельными дополнитель-
ными свойствами редактора. В частности, можно узнать, что попугая, кото-
рый виден в правом верхнем углу приведенного рисунка, зовут Полли. Он
весьма разговорчив, и пользователи, работающие на компьютере, оснащен-
ном звуковой картой, время от времени будут слышать возгласы попугая,
которые, правда, никак не связаны с выполняемыми действиями. А в одном
из диалоговых окон настройки редактора есть даже специальный пункт, по-
зволяющий заткнуть рот бедному попугаю. Вот пример сервиса высшего
разряда. Видимо, благодаря перечисленным свойствам, рейтинг этого редак-
тора по оценкам [Link] весьма высок, чего нельзя сказать
о двух описанных выше программах.
В конечном итоге выбор редактора для создания карт-изображений остается
за пользователем.

Заключительный пример
В завершение главы приведем пример довольно удачного изображения, ко-
торое используется в одном из реально существующих программных про-
дуктов в качестве графического меню (рис. 6.18). Этот пример не имеет ни-
какого отношения к Web-страницам, однако вполне мог бы играть роль кар-
ты-изображения для реализации ссылок. На этой картинке практически все
предметы, не говоря уже о непосредственно написанных в различных местах
словах, являются областями, реализующими те или иные действия. Так,
щелкая мышью на расположенных на столе аптекарских весах, вы получаете
доступ к процедуре подведения баланса, наведя мышь на фотоаппарат, по-
лучите мгновенный срез экономической ситуации. Скульптура мыслителя
помогает получить справку Help, плакаты на стенах реализуют соответст-
 222
Часть I. Основы HTML

И Т
- * РеаЛИзация вых°да из программы видна из рисун-
«атся п Расположен у выхода. Конечно, не всегда можно дога-
даться обо всех возможностях, таящихся в этом изображении, однако дан

Рис. 6.18. Пример изображения, играющего роль живого графического меню

™ изобпя ™Па ^ НТМЬ-Д°^мента, пользуясь концепцией

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

ГЛАВА 7

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

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

Еще совсем недавно единственным способом извлечения звуков при помо-
щи компьютера было использование встроенного динамика, традиционно
существовавшим на всех моделях персональных компьютеров. Хотя главным
предназначением этого динамика была выдача коротких по длительности,
чаще всего однотонных звуков, находились программисты, создававшие
утилиты для воспроизведения целых музыкальных фрагментов.
В наше время, когда термин "мультимедийный компьютер" стал привычным
и уже не вызывает благоговейного трепета, большинство персональных ком-
пьютеров оснащаются звуковой картой и приводом для чтения компакт-
дисков. Тем не менее, маленький динамик по-прежнему присутствует в каж-
дом компьютере. За прошедшие годы компьютеры очень сильно изменились,
в частности, отпала необходимость в некоторых устройствах и элементах
конструкции. Так, например, современные компьютеры более не оснащают-
ся кнопкой переключения режимов "Turbo", исчез замок для блокирования
клавиатуры. Зато встроенный динамик все так же выполняет возложенные
на него задачи.
Не будет преувеличением сказать, что функционирование компьютера на-
чинается со звука. Многие компьютеры при загрузке издают звуковой сиг-
нал, по характеру которого можно определить правильность прохождения
тестирования. Опытные пользователи даже при выключенном мониторе на
слух могут определить корректность процесса запуска компьютера. Более
224 Часть I. Основы HTML

того, до сих пор ряд программ используют возможности встроенного дина-

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

Как компьютер работает со звуком

Существует два типа звуковых файлов, используемых в компьютерах: циф-
ровые и музыкальные. Иногда выделяют еще один тип файлов — текстово-
звуковые, в которых используется метод конвертирования текстового файла
в звуки, близкие к человеческой речи, т. е. замена букв фонемами.
Музыкальные файлы похожи на нотные листы, — мелодия в них хранится
последовательностью музыкальных нот, и, кроме того, в них имеется ин-
формация об используемых для воспроизведения музыкальных инструмен-
тах. При проигрывании такой музыки звуковой адаптер может не просто
генерировать звуки разной высоты, но и выбирать из памяти фрагменты
звучаний реальных музыкальных инструментов и синтезировать мелодию.
Использование таких звуков ограничено возможностями синтезатора.
Большинство звуков, которых вы слышите из колонок компьютера, пред-
ставляют собой оцифрованный звук. По своей сути оцифрованный звук до-
вольно прост. Аналоговые по своей природе звуки, передаваемые по прово-
дам в виде изменяющегося напряжения, преобразуются в цифровые данные,
которые можно сохранять в компьютере в виде файлов. Такое преобразова-
ние выполняется при помощи аналого-цифрового преобразователя (АЦП).
При воспроизведении выполняется обратное действие — преобразование из
цифровой формы в аналоговую. Эта работа возлагается на звуковую карту
компьютера. Пользователь может создать любое количество звуковых фай-
лов, подключив к компьютеру микрофон или бытовой магнитофон и вос-
пользовавшись стандартными программами записи звука.
На качество получаемого оцифрованного звука влияет несколько факторов.
Важнейшим фактором является частота дискретизации звука (sampling rate)
Глава 7. Звук 225

или количество преобразований аналогового звука в цифровой (замеров),

выполняемое за одну секунду. Чем больше частота дискретизации, тем выше
качество звука и тем больше при воспроизведении он будет похож на ори-
гинал. Обычно этот параметр лежит в диапазоне от 8 до 44,1 кГц. Увеличе-
ние частоты дискретизации приводит к пропорциональному росту размеров
файла, поэтому здесь важен разумный компромисс.
Другим фактором является разрядность дискретизации (sample rate), опреде-
ляющая точность замеров. Типичными значениями являются 16 бит, 8 бит
и др.
Характеристикой звукового файла является также режим записи — моно
или стерео. Выбор того или иного режима сразу же в два раза изменяет раз-
мер получаемого файла.
Нетрудно подсчитать, сколько места на диске будут занимать оцифрованные
звуки. Так, одна секунда фонограммы качества аудио CD (44100 замеров
в секунду, 16 бит на канал, два канала) дает 172 Кб данных. Заметим, что
полученная величина близка к скорости передачи данных односкоростных
CD-приводов, большинство которых уже умели проигрывать аудиодиски.
Сегодня скорости этих устройств значительно возросли, поэтому, тем более,
проблем воспроизведения музыки не должно возникать.
Выбор приведенных параметров оцифровки звука не случаен. Оказывается,
что определить влияние факторов на качество звука довольно просто. Часто-
та дискретизации определяет максимально возможную частоту воспроизве-
дения звука. В соответствии с законом Найквиста, самая высокая частота
воспроизведения равна половине частоты дискретизации. Так, при дискре-
тизации 44,1 кГц звук можно воспроизводить с частотой 22,05 кГц. Такая
частота с запасом перекрывает диапазон звуков, воспринимаемых большин-
ством людей, и определяет практически идеальное качество. В то же время
для передачи речи такой частоты, как правило, не требуется. Человеческая
речь в основном укладывается в диапазон 3 кГц, поэтому в телефонных се-
тях оцифровка звука ведется на частоте 8 кГц.
Разрядность дискретизации определяет фактор, представляющий собой от-
ношение сигнала к шуму. Любой метод хранения и последующего воспро-
изведения звука вносит некоторые случайные потери, которые проявляются
в виде шумов. Для оцифрованного звука шум определяется точностью заме-
ров. Чем точнее измерение, тем меньше потенциальная возможность внесе-
ния шума.
Еще одним фактором является наличие сжатия данных, целью которого яв-
ляется экономия места на диске и выигрыш во времени передачи файлов.
Среди схем сжатия/хранения звуковых данных можно выделить схемы,
обеспечивающие сжатие без потерь информации, а также схемы, позволяю-
щие значительно (в 10 и более раз) уменьшить размеры файлов без замет-
ного искажения звука. Подробное описание технологий хранения данных
выходит за рамки этой книги, однако в конце главы все же будут даны не-

8 Зак. 944
226 Часть I. Основы HTML

которые практические рекомендации по работе с современными форматами

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

Модуль LiveAudio
Первые версии браузеров не имели встроенных средств для воспроизведе-
ния звука и, соответственно, на Web-страницах практически не встречалось
звуковых файлов. Если же такие ссылки попадались, то сначала требовалось
переписать файл на локальный диск, а затем воспользоваться внешней
программой его воспроизведения. Технология подключаемых модулей изме-
нила ситуацию. Теперь для браузеров имеется ряд подключаемых модулей,
позволяющих воспроизводить звуковые файлы в различных форматах. Пре-
имуществом использования подключаемых модулей по сравнению с внеш-
ними приложениями является возможность управления проигрыванием зву-
ковых файлов прямо из окна браузера.
Браузер Netscape поставляется вместе с подключаемым модулем LiveAudio,
который часто называют "официальным" аудиоплейером Netscape. Модуль
LiveAudio может работать со стандартными форматами AIFF, AU, MIDI и
WAV. Этот модуль снабжен понятной и удобной консолью с кнопками вос-
произведения, паузы, остановки и регулятором громкости.
Модуль LiveAudio заменил вспомогательное приложение NAPlayer, сопровож-
давшего более ранние версии браузера Netscape Navigator. (Модуль LiveAudio
начал поставляться с Netscape Navigator версии 3.0.)
Приложение NAPlayer работало с форматами Sun/NeXT (AU и SND) и
Mac/SGI (AIF и AIFF). LiveAudio имеет более широкие возможности и под-
держивает следующие типы звуковых форматов:
О AIFF — формат звуковых файлов Mac/SGI
G AU — формат звуковых файлов Sun/NeXT
П MIDI— формат электронных музыкальных инструментов (Musical
Instrument Digital Interface)
П WAV — стандарт звуковых файлов операционной системы Windows
Формат AU когда-то был стандартным для Интернета. Формат AIFF — стан-
дарт для платформы Macintosh, формат WAV — наиболее типичен в опера-
ционной системе Windows. Таким образом, этот подключаемый модуль мо-
жет воспроизводить большинство стандартных оцифрованных звуковых
файлов, а также работать с музыкальным форматом MIDI.

Управление модулем LiveAudio

Если на Web-странице, загружаемой браузером Netscape, встречается звуко-
вой файл одного из перечисленных выше форматов, модуль LiveAudio "выво-
Глава 7. Звук 227

дит в окне браузера консоль управления. Вид консоли управления определя-

ется параметрами, указанными в тэге включения звукового файла в страницу.
Модуль может работать как со встроенными (с помощью тэга <EMBED>), так
и отдельными звуковыми файлами (например, можно создать ссылку на
звуковой файл). В последнем случае консоль управления выводится в пус-
том окне браузера, при этом сама консоль будет иметь стандартный вид.
Органы управления модулем понятны и просты в использовании. Кнопки
такие же, как и у обычного аудиоплейера — останов, воспроизведение, пау-
за и регулятор громкости, имеется простое выпадающее меню (рис. 7.1).

Netscape ОШI

l!l_
Рис. 7.1. Консоль управления
модуля LiveAudio

Щелчком мыши слева или справа от ручки регулятора громкости можно

уменьшить или увеличить громкость воспроизведения. Линейка "светодио-
дов" внизу показывает текущий уровень звука. Темно-зеленые "светодиоды"
индицируют диапазон 0—40%, светло-зеленые — диапазон 40—100%.
Если на консоли щелкнуть правой кнопкой мыши, будет выведено выпа-
дающее меню. Его пункты дублируют кнопки управления, а также обеспе-
чивают возможность сохранения звукового файла на локальном диске (Save
As...) и содержат сведения об изготовителе модуля (пункт меню About).

( Примечание }
Пункт меню сохранения файла (Save As...) есть только в последней версии
модуля LiveAudio (версия 1.1). В предыдущей версии этот пункт отсутствовал,
зато отображалась информация о текущей громкости звука (например, появля-
лась надпись Current Volume: 60.0%).

Встраивание звуковых файлов в Web-страницу

Для использования звуковых файлов на Web-странице можно применить
любой из двух вариантов: встраивать файл с помощью тэга <EMBED>, либо
создать ссылку на звуковой файл. В любом случае фонограмму можно будет
прослушать при просмотре страницы в браузере Netscape при помощи под-
ключаемого модуля LiveAudio. Первый вариант дает большую гибкость в
компоновке страницы. Как будет описано ниже, тэг <EMBED> обладает значи-
тельным количеством параметров, задавая которые можно контролировать
228 _ Часть I. Основы HTML

аспекты работы модуля LiveAudio. Однако у этих возможностей есть и обо-

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

<HTML>
<HEAD>
<Т1ТЬЕ>Пример использования звуковых файлов</Т1ТЬЕ>
</HEAD>
<BODY>
Встраивание звукового файла
с <и>полным</и> набором органов управления консоли

<EMBED SRC="[Link]" HEIGHT=60 WIDTH=144 AUTOSTART=TRUE>

Встраивание звукового файла

с <и>ограниченным</0> набором органов управления консоли

<EMBED SRC="[Link]" HEIGHT=15 WIDTH=144 CONTROLS=SMALLCONSOLE>

<P>
<A HREF="[Link]">3TO ссылка на звуковой файл</А>
</BODY>
</HTML>

В документе, приведенном в примере 7.1, используются два встроенных зву-

ковых файла ([Link] и [Link]), а также есть ссылка на звуковой
файл [Link]. При просмотре этого документа в браузере Netscape для
каждого из встроенных файлов будет отображена консоль управления моду-
ля LiveAudio (рис. 7.2).
Для файла [Link] консоль управления будет иметь полный набор
кнопок управления (этот режим используется по умолчанию), причем вос-
произведение начнется автоматически при загрузке документа <AUTOSTART=
TRUE) . Окно консоли управления будет иметь размеры 144 на 60 пикселов.
Для звукового файла [Link] консоль управления будет иметь более
компактные размеры (144 на 15 пикселов) и урезанный набор органов управ-
Глава 7. Звук 229

ления, что определено инструкцией CONTROLS=SMALLCONSOLE. Воспроизведе-

ние этого файла начнется только в случае, если пользователь нажмет соот-
ветствующую кнопку.

с Примечание
Размеры консоли органов управления модуля LiveAudio имеют постоянные
значения и не могут изменяться (например, при полном наборе органов управ-
ления — 144 на 60 пикселов). Значения размеров окна, отводимых под встраи-
ваемый элемент параметрами HEIGHT и WIDTH, не должны быть меньше тре-
буемых. Если же этими параметрами заданы размеры больше требуемых, то
справа и снизу от консоли управления будет оставлено соответствующее сво-
бодное место.

IS& Пример использования звуковых Файлов - Netscape I '•"•

4'L'!/MEV~JOOK/[Link]

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

органов управления консоли

Встраивание звукового файла с ограниченным

набором органов управления консоли

Это ссыпка на звуковой байл Рис. 7.2. Отображение

документа со встроенными
звуковыми файлами
в браузере Netscape

На третий звуковой файл, используемый в документе ([Link]), дана

стандартная ссылка. Реализация этой ссылки откроет новое окно браузера
Netscape с полной консолью управления и автоматически запустит файл на
воспроизведение (рис. 7.1).
В табл. 7.1 перечислены параметры тэга <EMBED> и их значения, исполь-
зующиеся совместно с модулем LiveAudio. Все параметры необязательные,
за исключением SRC, WIDTH и HEIGHT, применяющихся при встраивании
в HTML-документ большинства объектов.

Таблица 7.1. Параметры тэга <EMBED>

Параметр Описание

SRC="filename" Указывает имя воспроизводимого файла (форматы AU,

AIFF, AIF, WAV, MIDI и MID). Обязательный параметр
230 Часть I. Основы HTML

Таблица 7.1 (окончание)

Параметр Описание

WIDTH=n Определяет ширину консоли в пикселах. Обязательный

параметр
HEIGHT=m Определяет высоту консоли в пикселах. Обязательный
параметр
AUTOSTART=TRUE|FALSE Если имеет значение TRUE, воспроизведение начинается
автоматически. По умолчанию — значение FALSE
AUTOLOAD=TRUE|FALSE Если имеет значение FALSE, файл не загружается авто-
матически. По умолчанию — значение TRUE
STARTTIME="mm:ss" Воспроизведение начинается с указанного в минутах и
секундах момента от начала файла. По умолчанию —
00:00
ENDTIME="mm:ss" Воспроизведение оканчивается с указанного в минутах и
секундах момента от начала файла. По умолчанию — это
конец файла
VOLUME=percentage Громкость воспроизведения, указанная в процентах от
максимальной. По умолчанию — последнее установлен-
ное значение
ALIGN="value" Выравнивает консоль управления по отношению к тексту
страницы. Может иметь значения CENTER, BASELINE, TOP,
LEFT, RIGHT. По уМОЛЧЭНИЮ — BASELINE

CONTROLS="value Задает набор органов управления консоли. Может иметь

следующие значения (они объяснены далее в этой табли-
це): CONSOLE, SMALLCONSOLE, PLAYBUTTON, PAUSEBUTTON,
STOPBUTTON И VOLUMELEVER. По умолчанию — CONSOLE
CONSOLE Полный набор органов управления
SMALLCONSOLE Компактное представление консоли. Полный набор орга-
нов управления, кроме кнопки паузы
PLAYBUTTON Только кнопка воспроизведения
PAUSEBUTTON Только кнопка паузы
STOPBUTTON Только кнопка остановки. При этом файл выгружается
VOLUMELEVER Только регулятор громкости
CONSOLE="name" Комбинация органов управления, позволяющая включить
в страницу несколько клипов. Например, можно указать
CONSOLE="MySetup" в двух тэгах <EMBED> одной страни-
цы; при этом в обоих случаях вид консоли будет одина-
ковым
Глава 7. Звук 231

Примечание
Если для клипа задать параметры CONTROLS="VOLUMELEVER" и CONSOLE=
"_MASTERVOLUME", то изменение громкости звучания данного клипа будет отра-
жаться на громкости всех остальных клипов, т. е. изменять громкость работы
звуковой карты.

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

другого браузера может нарушить весь замысел автора. Посмотрим, как
пример 7.2, будет выглядеть в браузере Microsoft Internet Explorer (рис. 7.3).
Здесь для проигрывания встроенных звуковых файлов используется вспо-
могательное приложение Microsoft ActiveMovie, работающее как компонент
браузера. Естественно, что это приложение не распознает большинства спе-
цифических параметров тэга <EMBED>, рассчитанных на использование моду-
ля LiveAudio браузера Netscape. В итоге, хотя оказывается вполне возмож-
ным прослушать все имеющиеся на странице звуковые файлы, внешний вид
документа оставляет желать лучшего.
ия звуковых Файлов - Microsoft Inteinet .

frl* £* у«я .feu f

' || Я | jj | & И!

D:\NEW_BOOK\[Link]

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

управления консоли

Встраивание звукового файла с ограниченным набором

органов управления консоли

Рис. 7.3. Отображение

документа со встроенными
Это ссылка на звуковой файл
звуковыми файлами
в браузере Microsoft
Internet Explorer

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

бований браузера Internet Explorer, может неудачно отображаться браузером
Netscape.
Заметим, что приложение ActiveMovie предоставляет больше возможностей
по управлению прослушиванием (рис. 7.4). Так, например, можно задать
режим повторения фонограммы заранее заданное или бесконечное число
раз. Есть возможность одновременного исполнения (с наложением звука)
нескольких файлов встроенных на страницу, даже если они имеют одина-
232 Часть I. Основы HTML

ковый тип. Например, можно заставить играть два файла типа WAV одно-
временно, соорудив из браузера своего рода микшерский пульт. Этой воз-
можности лишен модуль LiveAudio, в котором запуск одной фонограммы
автоматически останавливает воспроизведение файла такого же типа. Ис-
ключением является возможность одновременного воспроизведения файла
с оцифрованной музыкой и файла типа MIDI, что возможно всегда.

Рис. 7.4. Консоль управления приложения

ActiveMovie с полным набором кнопок

Если вам потребуется сконфигурировать программу-сервер для работы со

звуковыми файлами, то нужно сначала задать соответствующие MIME-типы.
В табл. 7.2 перечислены MIME-типы и соответствующие им типы файлов,
с которыми работает модуль LiveAudio.

Таблица 7.2. MIME-типы и соответствующие им файлы

М1МЕ-тип Расширение

audio/basic AU
audio/x-aiff AIF, AIFF
audio/aiff AIF, AIFF
audio/x-wav WAV
audio/wav WAV
audio/x-midi MID, MIDI
audio/midi MID, MIDI

Другие звуковые модули

Кроме модуля LiveAudio, поставляемого с браузером Netscape, имеется до-
вольно много других звуковых модулей, часть которых работает со своим,
уникальным форматом хранения звука. Приведем краткую характеристику
некоторых из них.
В ряде случаев нет необходимости сохранять оцифрованный звук с парамет-
рами, обеспечивающими качество звучания аудио CD. Напомним, что такое
качество обеспечивается при частоте дискретизации 44,1 кГц, разрядностью
16 бит, стерео. Нетрудно подсчитать, что минута звучания потребует хране-
ния около 10 Мб данных (44100x2 байтах2х60 = 10584000 байт). Записи та-
Глава 7. Звук 233

кого качества сохраняют все оттенки звука, в частности, дают возможность

воспроизведения всех высоких частот, слышимых человеческих ухом. Одна-
ко, для многих применений, например для передачи речевых сообщений,
такое качество излишне. Для звуковых данных такого рода можно понизить
объем хранимой информации, уменьшив характеристики оцифровки звука.
Минимально возможными параметрами для хранения звука в стандартном
формате WAV являются частота оцифровки 8 кГц, разрядность данных 8 бит,
моно.

С~ Примечание ^
Речь идет о хранении в подформате PCM, (Pulse Code Modulation, импульсно-
кодовая модуляция), использующегося в большинстве случаев применения
формата WAV. Этот подформат не предусматривает возможностей сжатия
данных.

При таких параметрах минута звучания уже потребует всего лишь около
0,5 Мб (8000x1x60 = 480000 байт). Выигрыш в 20 раз. Тем не менее, даже
для такого звукового сообщения необходим поток 64 Кбит/с, что не дает воз-
можности передавать данные по большинству модемов в реальном времени.
Для решения этой задачи рядом компаний были разработаны модули, кото-
рые могут сохранять и воспроизводить звуковые сообщения со значительной
степенью сжатия. Для речевых сообщений важнейшим фактором является
разборчивость речи, которая сохраняется даже при сильном сжатии.
К таким модулям относятся TrueSpeech, ToolVox, EchoSpeech и др.
Модуль TrueSpeech компании DSP Group хранит звуки в своем собственном
формате, сжимая данные до 60 Кб на одну минуту звучания (передача таких
данных требует 8 Кбит/с). Поскольку в состав операционной системы Win-
dows входит кодер/декодер для данного формата, то конвертировать оциф-
рованный звук в него можно при помощи стандартного приложения Фоно-
граф (Sound Recorder). Более подробную информацию можно получить на
сайте компании DSP Group: [Link]
Модуль ToolVox компании Voxware обеспечивает еще большую степень сжа-
тия (до 53:1). После конвертирования речевого файла в формат VOX ско-
рость потока данных сокращается до 2,4 Кбит/с. Для кодирования/декоди-
рования данных используется кодировщик RT24, лицензию на использова-
ние которого получила компания Netscape. Появился также более новый
кодер RT29, сокращающий поток данных до 2,9 Кбит/с. Компания Voxware
ведет разработки программ для конвертирования текста в звуковые файлы
и программ распознавания речи. Информацию о программном обеспече-
нии, разрабатываемом компанией Voxware, можно получить на сайте: http://
[Link]/.
Модуль EchoSpeech выполняет сжатие речи на частоте дискретизации 11025 Гц.
Степень сжатия достигает значения 18.5:1, что уменьшает поток данных до
234 Часть I. Основы HTML

9,6 Кбит/с. Для создания файлов формата EchoSpeech нужно воспользоваться

специальной программой-кодером Speech Coder. Программное обеспечение
работы с файлами этого формата имеется по адресу [Link]

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

Существуют модули и для воспроизведения музыки в формате MIDI. Одним

из наиболее известных среди них является модуль Crescendo компании
LiveUpdate. При помощи браузера, оснащенного таким модулем, можно
создавать Web-страницы с фоновыми музыкальными клипами и специаль-
ными звуковыми эффектами.
Модуль запускается автоматически и работает без контрольной панели на
экране. Модуль выпускается для систем Windows 95/NT и Macintosh и мо-
жет быть скопирован со страницы [Link]
Усовершенствованная версия модуля, Crescendo Plus, имеет панель управле-
ния и поддерживает работу в реальном режиме времени, т. е. чтобы начать

311

The Beatles Genesis .Jean Midi el Jarre Led Zeppelin

Pink Floyd Oueeii Yes Coining Soon!

PS. The songs, intended'for listening are submitted in the standard General MIDI

Back.2
Back For other sites with МШ1 files, refer to the
Join? Standard MIDI Files on the Net
Next Ultimate MIDI Page
Next 5 Jim's МДЯ Links
...Random,..,,,. lf Wfinrd n~.c i™™™,,™.

Рис. 7.5. Web-страница, содержащая MIDI-файлы знаменитых рок-групп

Глава 7. Звук 235

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

Эту версию также можно найти на сайте компании LiveUpdate.
Формат электронных музыкальных инструментов MIDI вовсе не потерял
своей популярности в связи с бурным развитием новых форматов хранения
оцифрованного звука. До сих пор на Web-страницах встречается довольно
много ссылок на файлы этого формата. Например, на сервере, посвященном
трехсотлетию Санкт-Петербурга (1703—2003), можно услышать гимн города,
хранящегося в формате MIDI. Кстати, этот сервер обещает быть очень ин-
тересным, его концепция, структура и наполнение определяются специаль-
ным наблюдательным советом, председателем которого является писатель
Даниил Гранин. Содержание сервера ([Link] планируется об-
новлять вплоть до 2003 года.
Встречаются целые сайты, посвященные музыкальным произведениям в
формате MIDI (например, [Link] Множество страниц в Интер-
нете посвящено дискографии различных музыкальных групп (например,
[Link] страничка этого сайта показана на рис. 7.5).

Технология RealAudio
С развитием возможностей Интернета актуальной стала задача проведения
различных аудио- и видеоконференций, передачи вещания радиостанций
в реальном времени. Технология RealAudio стала первой, предоставившей
возможность передачи звуковых файлов в режиме реального времени. На
сегодняшний день эта технология получила в Интернете широкое распро-
странение, модуль RealAudio, несомненно, является самым популярным
в Интернете приложением для вывода звуковых файлов. С сайта компании,
разработавшей этот модуль, было скопировано несколько миллионов экзем-
пляров плейера. В начале 1999 г. промелькнуло сообщение, что число заре-
гистрированных пользователей этой программы достигло 50 Мбиллионов.
Разработка технологии RealAudio была выполнена компанией Progressive
Networks (сейчас она называется RealNetworks). Компания в сети Интернет
имеет свой сайт, популярность которого за последние годы необычайно уве-
личилась. Адрес сайта [Link]

( Примечание ~^
До недавнего времени сайт компании-разработчика технологии RealAudio имел
адрес [Link]. Сейчас обращение по такому адресу приведет
к странице [Link].
RealAudio состоит из трех функционально связанных программ. Программа-
кодировщик (RealProducer Pro) конвертирует готовые звуковые файлы или
живой звук в файлы формата RealAudio. Программа-сервер (RealServer) пе-
редает эти файлы по сети. И, наконец, программа-плейер (RealPlayer G2)
236 Часть I. Основы HTML

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

Все три компонента доступны на сайте: [Link] (рис. 7.6). Сайт
содержит много полезной технической информации и звуковых примеров.

Download RealPlayer Plus G2 Now

The best quality RealAudio and !4;un!, •.! N.....
RealVideo
° Hi-fi audio quality with graphic EQ
в Control picture quality like a TV RfalAuilioiiita
a Just$29.99 \nthmoneybacfc
guarantee
Download Now

Serve Content Create Content

download RealServen. Naw RealProdufer Pro &
Complete streaming media RealProducer Plus— Everything
solutions for the Internet and you need Tor creating streaming
Corporate Intranets. media is at the Real Tools site.

Рис. 7.6. Сайт компании RealNetworks, посвященный технологии RealAudio

Для прослушивания звуковых клипов достаточно иметь только программу-

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

( Примечание
Ранние версии программы-плейера назывались RealAudio Player. Сегодня по-
следняя версия программы называется RealPlayer G2. Эта программа является
свободно распространяемой. Существует также коммерческая версия, имеющая
название RealPlayer Plus G2. Коммерческая версия обладает несколько боль-
шими возможностями по сравнению с бесплатным вариантом. Различия в воз-
можностях описаны в справочном файле, поставляемом вместе с программой.

Исходными данными для кодирования в формат RealAudio являются го-

товые звуковые файлы, либо "живой" звук. Программа-кодировщик может
Глава 7. Звук 237

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

Типичными вариантами являются скорости 14,4 и 28,8 Кбит/с. В результате
кодирования получается файл, размеры которого намного меньше размера
исходного файла. Например, одноминутный файл формата WAV (частота
22 кГц, разрядность данных 16 бит, моно) занимает 2,6 Мб; кодированный
файл формата RealAudio для скорости 14,4 составляет всего 60 Кб, а для
скорости 28,8 — в два раза больше. Таким образом, достигается сжатие —
40:1 и 20:1 соответственно. Файл для скорости 14,4 по качеству сравним
с АМ-вещанием и очень хорош для речи, а файл для скорости 28,8 звучит
как монофоническая FM-передача и подходит практически для любой му-
зыки.
Процедура сжатия выполняет отбрасывание некоторой звуковой информа-
ции. Приходится пожертвовать качеством, чтобы получить выигрыш в ско-
рости передачи. Это проявляется при прослушивании некоторой потерей
глубины звучания.
В Интернете информация может передаваться двумя способами. Одним ва-
риантом является протокол TCP, лежащий в основе WWW, который подра-
зумевает безошибочную передачу данных. Любая возникающая при передаче
ошибка тут же исправляется повторной передачей. С другой стороны, суще-
ствует протокол UDP, который подразумевает скоростную передачу с неко-
торыми потерями в точности. Наличие ошибок недопустимо, когда мы имеем
дело с текстом или программным кодом, где важен каждый бит. Некоторые
ошибки и неточности передачи звука воспринимаются нашим ухом как не-
большой шум или статические разряды в процессе обычного радиоприема.
При передаче звука более важна непрерывность передачи, здесь главное -
не потерять целые блоки данных и поддерживать передачу в режиме реаль-
ного времени. Поэтому сервер RealAudio использует протокол UDP. Возмо-
жен случайный пропуск того или другого звукового байта, зато звук переда-
ется непрерывно и в режиме реального времени.

С Примечание ^
На самом деле в противоречии с названием технологии RealAudio передача
радиопрограмм идет не совсем в реальном времени. Вещание различных сер-
веров RealAudio обычно идет с некоторой задержкой, измеряемой минутами.
С коллегой автора этих строк однажды приключилось следующее. Он зашел в
комнату, где работало несколько компьютеров, на одном из которых шло веща-
ние программы RealAudio. Связь была достаточно хорошая, что обеспечивало
безупречную передачу звуковой программы. Поэтому определить на слух, идет
ли настоящая радиопередача, пойманная из эфира радиоприемником, или же
это программа RealAudio, не представлялось возможным. В некий момент в пе-
редаче прозвучали привычные сигналы точного времени. Как оказалось впо-
следствии, коллега, нисколько не сомневаясь в их правильности, автоматиче-
ски взглянул на часы и, несколько удивившись их спешке, поставил точное
время. В этот же день он чуть было не опоздал на поезд, так как программа
RealAudio шла с почти десятиминутным запозданием.
238 Часть I. Основы HTML

Сервер RealAudio является двухканальной системой: протокол UDP исполь-

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

Программа-плейер RealPlayer Plus G2

Программа воспроизведения клипов формата RealAudio выпускается для
систем Windows, Macintosh и UNIX. Программа для Windows называется
RealPlayer G2 и является свободно распространяемой. Коммерческая версия
имеет название RealPlayer Plus G2. Установка любого варианта программы
на компьютер не составляет труда. Программа поставляется в виде саморас-
паковывающегося файла, запустив который и, следуя дальнейшим указани-
ям, можно осуществить установку. В состав устанавливаемого пакета входит
как самостоятельная программа-плейер, так и подключаемые модули для
браузеров. После завершения установки браузеры Netscape и Internet Ex-
plorer получат возможность воспроизводить клипы формата RealAudio.
Как самостоятельная программа RealPlayer Plus G2 (рис. 7.7) является пол-
нофункциональным приложением, позволяющим воспроизводить звуковые
файлы от любого источника, включая локальный диск или удаленный сер-
вер. Эта программа является одним из представителей растущего числа при-
ложений, способных напрямую, без участия браузера, общаться с Интерне-
том. Программа-плейер RealPlayer Plus G2 как отдельная программа может
служить вспомогательным приложением браузера или самостоятельно вос-
производить звуковые файлы.
Если в Web-страницу включается ссылка на файл формата RealAudio, то при
щелчке мышью на ней браузер запустит программу-плейер как вспомога-
тельное приложение. Это приложение работает как отдельная задача и после
окончания прослушивания требует ручного закрытия.
Если же файл встроен непосредственно в страницу с помощью тэга <EMBED>,
браузер автоматически отобразит на экране консоль управления подключае-
мого модуля.
Органы управления плейера очень просты. Панель управления содержит ти-
пичный набор кнопок: Воспроизведение, Пауза, Останов, Запись (доступна
только для коммерческой версии) и индикатор текущего момента проигры-
вания с бегунком. Имеется также кнопка включения эквалайзера (только
для коммерческой версии) и кнопка переключения внешнего вида плейера
(полный/компактный). Может выводиться информация о проигрываемом
клипе, время воспроизведения и длительность клипа. Имеется движковый
регулятор громкости. Конкретный внешний вид плейера в значительной
степени зависит от установок, выбранных пользователем в пункте меню
View. Заметим, что внешний вид, а также набор пунктов меню сильно изме-
нились по сравнению с более ранними версиями программы, поэтому их
детальное описание представляется излишним.
Глава 7. Звук 239

Рис. 7.7. Программа-плейер

RealPlayer Plus G2

Если звуковой файл встраивается в страницу, то набор органов управления

определяется автором страницы и зависит от значений параметров соответ-
ствующего тэга <EMBED>. Правила записи параметров рассматриваются ниже.

Встраивание в страницу
звуковых файлов формата RealAudio
Звуковые файлы, используемые технологией RealAudio, должны иметь рас-
ширение RA. Кроме того, принято использовать метафайлы с расширением
RAM, которые представляют собой обычные текстовые файлы, каждая
строчка которых содержит полный URL-адрес файла RA. Например:
pnm://[Link]/example.га
Такому файлу логично присвоить имя [Link]. Строчка pnm:// означает,
что данные находятся на сервере RealAudio. Если на Web-страницах необхо-
димо расположить ссылку на файл формата RealAudio, то обычно ссылаются
на метафайл RAM, а не на сам файл RA, хотя это и не запрещено. Для чего
так сделано? Метафайлы могут содержать целый список адресов файлов RA,
240 Часть I. Основы HTML

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

могут располагаться сведения о моменте времени начала воспроизведения
файлов, если требуется проигрывать их с определенного места.
Для этого следует указать точку начала воспроизведения после адреса фай-
ла, отделив символом $:
pnm://[Link]/[Link]$l:20

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

следующим образом:
$dd:hh:ram:ss.t
где dd — дни, hh — часы, mm — минуты, ss — секунды и t — десятые доли
секунды.
Если вы хотите, чтобы при просмотре страницы использовался плейер как
вспомогательное приложение, то достаточно лишь применить стандартную
ссылку, например:
<А НКЕГ=ехатр1е.гат>Ссылка на метафайл</А>

Другим вариантом является встраивание с помощью тэга <EMBED>, например:

<EMBED SRC=[Link] WIDTH=500 HEIGHT=100>

Обратите внимание, что при встраивании файлов для активизации подклю-

чаемого модуля, а не самостоятельного приложения, необходимо ссылаться
на метафайл с расширением RPM, а не RAM. Никаких иных отличий, кро-
ме расширения, правила записи метафайлов не имеют.
Параметры WIDTH и HEIGHT указывают размеры окна для органов управления
подключаемого модуля. Как и параметр SRC, они являются обязательными.

( Примечание )
Выбор значений размеров окна полностью определяется автором страницы.
Подключаемый модуль построен таким образом, что его органы управления
автоматически масштабируются по указанным размерам и, таким образом, все-
гда полностью занимают отводимое окно. В этом отличие, например, от модуля
LiveAudio, описанного выше.
Вот как выглядит обобщенный синтаксис тэга <EMBED>, если он используется
для встраивания файлов RealAudio:
<EMBED SRC=source_URL WIDTH=width_value HEIGHT=height_value
[CONTROLS=option] [AUTOSTART=True] [CONSOLE=value] [NOLABELS=True]>

Параметры CONTROLS, AUTOSTART, NOLABELS и CONSOLE являются специфиче-

скими для RealAudio и могут отсутствовать.
Параметр CONTROLS определяет набор органов управления модуля плейера
RealAudio. В табл. 7.3 описаны возможные значения этого параметра.
Глава 7. Звук 241

Таблица 7.3. Значения параметра CONTROLS

Значение Описание

CONTROLS=A11 Окно плейера содержит все органы управления, вклю-

чая ControlPanel, InfoVolumePanel и StatusBar.
(Это значение используется по умолчанию)
CONTROLS=ControlPanel Окно плейера содержит кнопки воспроизведения,
паузы, остановки, индикатор текущего положения и
изображение регулятора громкости. (Аналог окна
самостоятельного плейера, если не отмечена ни
одна из опций меню View)
CONTROLS=InfoVolumePanel Окно плейера содержит строки для вывода инфор-
мации о файле и движковый регулятор громкости.
(Аналог окна самостоятельного плейера, если отме-
чена опция Clip Info меню View)
CONTROLS=InfoPanel Окно плейера содержит строки для вывода инфор-
мации о файле
CONTROLS=StatusBar Окно плейера содержит строку состояния, указатели
времени воспроизведения и длительности клипа.
(Аналог окна самостоятельного плейера, если отме-
чена опция Status Bar меню View)
CONTROLS=PlayButton Окно плейера содержит только кнопки воспроизве-
дения и паузы
CONTROLS=StopButton Окно плейера содержит только кнопку остановки
CONTROLS=VolumeSlider Окно плейера содержит только движковый регуля-
тор громкости
CONTROLS=PositionSlider Окно плейера содержит только индикатор текущего
положения
CONTROLS=PositionField Встраивает в строку состояния время воспроизведе-
ния и длительность клипа
CONTROLS=StatusField Встраивает в строку состояния текстовые сообщения

Если параметру AUTOSTART присвоено значение TRUE, проигрывание файла

начинается автоматически. Несколько файлов не могут звучать одновремен-
но. Поэтому, если более одного тэга <EMBED> имеют AUTOSTART=TRUE, только
последний из них будет запущен автоматически. Порядок загрузки файлов
зависит от программы-сервера и кэш-памяти браузера Netscape.
Параметр CONSOLE позволяет создать несколько окон с различным набором
органов управления, осуществляющими управление одним и тем же клипом.
Изначально каждое окно связано со своим клипом; если же применить па-
раметр CONSOLE, то предоставится возможность управлять одним клипом из
242 _ Часть I. Основы HTML

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

пользуясь кнопками другого окна. Появляется возможность создания произ-
вольного набора кнопок для отдельного клипа, расположенных также про-
извольным образом. Для реализации этого свойства следует указать одно и
то же имя клипа в каждом из тэгов <EMBED>, а также присвоить одинаковые
значения параметру CONSOLE:
<EMBED SRC="[Link]" WIDTH=30 HEIGHT=33 CONTROLS="PlayButton"
CONSOLE="Clipl">
<EMBED SRC="[Link]" WIDTH=300 HEIGHT=33 CONTROLS="PositionSlider"
CONSOLE="Clipl">

Еще один пример на эту тему:

<HTML>
<HEAD>
<Т1ТЬЕ>Пример встраивания файлов формата RealAudio</TITLE>
</HEAD>

<BODY>
<Н2>Различные варианты встраивания клипов формата RealAudio</H2>

<НЗ>Кнопки воспроизведения/паузы, кнопка ocTaHOBKn<BR>

и индикатор текущего положения</НЗ>

<EMBED SRC=samplel . rpm WIDTH=50 HEIGHT=30 CONTROLS=PlayButton

CONSOLE=clipl>
<EMBED SRC=samplel . rpm WIDTH=50 HEIGHT=30 CONTROLS=StopButton
CONSOLE=clipl>
<EMBED SRC=samplel . rpm WIDTH=350 HEIGHT=30 CONTROLS=PositionSlider
CONSOLE=clipl>

<НЗ>Только панель управления</НЗ>

<EMBED SRC=sample2 . rpm WIDTH=300 HEIGHT=35 CONTROLS=ControlPanel>

<НЗ>Полный набор органов управления</НЗ>

<EMBED SRC=sample3 . rpm WIDTH=500 HEIGHT=100 CONTROLS=A11>

<A HREF=sample3 . гат>Ссылка, при выборе которой

будет запущена самостоятельная программа-плейер</А>

</BODY>
</HTML>

В примере 7.2 в HTML-документ встроено три клипа RealAudio и имеется

ссылка на еще один файл. Отображение этого документа в браузере приве-
Глава 7. Звук 243

дено на рис. 7.8. Первый из файлов [Link] встраивается трижды с раз-

личным набором органов управления. Поскольку во всех этих тэгах <EMBED>
есть строчка coNSOLE=ciipi, то кнопки управления будут относиться к одно-
му и тому же клипу. Например, запустив клип кнопкой воспроизведения,
можно его остановить, нажав кнопку в другом окне (расположенном от него
справа). По существу, все три окна, с точки зрения их функционирования,
будут являться единой консолью управления для этого клипа. Естественно,
что эти окна могли быть разбросаны по странице в произвольном порядке.
При встраивании клипов RealAudio вид консоли управления определяется
автором страницы.

Различные варианты встраивания клипов формата RealAudio

Кнопки воспроизведения/паузы, кнопка остановки
и индикатор текущего положения

Только панель управления

Полный набор органов управления

шяДНИИ

Ссыпка, при выборе которой будет згпуценз самостоятельная программа-плеер

Рис. 7.8. Различные варианты встраивания клипов RealAudio

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

управления с различным набором кнопок.
Файл sample [Link] имеет следующее содержание:
[Link]
Остальные метафайлы имеют аналогичное содержание. Здесь для примера
показано, что данные для плейера могут поступать не только от соответст-
вующего сервера в реальном времени, а и представлять собой обычные фай-
лы формата RA, расположенные локально.
Продолжим рассмотрение значений параметров тэга <EMBED>. Если парамет-
ру CONSOLE ОДНОГО ИЗ ТЭГОВ <EMBED> ПРИСВОИТЬ Значение "_master", TO При
 244 Часть I. Основы HTML

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

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

; : :
1 v'. i ."," . 1 ."-;.-».; Л v.r.'i.'.v.i'iiv;.. -•.^.^i^.i-V^[Link]^V./i'.'.-^.iV^

<HTML>
<HEAD>
<TITLE>The Prodigy</TITLE>
</HEAD>
<BODY>
<НЗ>Встраивание нескольких клипов, управляемых одной консолыо</НЗ>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=3 ALIGN=left>
<TRXTH СОЬЗРАЫ=3>Альбом "The fat of the land"</THX/TR>

<TRXTDXEMBED SRC=samplel. rpm WIDTH=50 HEIGHT=30

CONTROLS=PlayButtonX/TD>
<TD>Smack my bitch up</TDXTD>5:42</TDX/TR>

<TRXTDXEMBED SRC=[Link] WIDTH=50 HEIGHT=30

CONTROLS=PlayButtonX/TD>
<TD>Breathe</TDXTD>5:34</TDX/TR>

<TRXTDXEMBED SRC=sample3 . rpm WIDTH=50 HEIGHT=30

CONTROLS=PlayButtonX/TD>
<TD>Diesel power</TDXTD>4 :17</TDX/TR>

<TRXTDXEMBED SRC=sample4 . rpm WIDTH=50 HEIGHT=30

CONTROLS=PlayButtonX/TD>
<TD>Funky shit</TDXTD>5:15</TDX/TR>

<TRXTDXEMBED SRC=sample5. rpm WIDTH=50 HEIGHT=30

CONTROLS=PlayButtonX/TD>
<TD>Serial thrilla</TDXTD>5:10</TDX/TR>

<TRXTDXEMBED SRC=[Link] WIDTH=50 HEIGHT=30

CONTROLS=PlayButtonX/TD>
<TD>Mindf iels</TDXTD>5:39</TDx/TR>

<TRXTDXEMBED SRC=sample7 . rpm WIDTH=50 HEIGHT=30

CONTROLS=PlayButtonX/TD>
<TD>Narayan</TDXTD>9:04</TDX/TR>

<TRXTDXEMBED SRC=sample8 . rpm WIDTH=50 HEIGHT=30

CONTROLS=PlayButtonX/TD>
<TD>Firestarter</TDXTD>4: 40</TDX/TR>
Глава 7. Звук 245

«CTRXTDXEMBED SRC=sample9 . rpm WIDTH=50 HEIGHT=30

CONTROLS=PlayButtonX/TD>
<TD>Climbatize</TDXTD>6:36</TDX/TR>

<TRXTDXEMBED SRC=samplelO. rpm WIDTH=50 HEIGHT=30

CONTROLS=PlayButtonX/TD>
<TD>Fuel my fire</TDXTD>4 :18</TDX/TR>
</TABLE>

<EMBED SRC=[Link] WIDTH=300 HEIGHT=100 CONTROLS=A11 CONSOLE="_master">

<CENTERXIMG SRC=newlogo. gif ></CENTER>

</BODY>
</HTML>

В приведенном примере встроено десять клипов, объединенных для удобст-

ва в таблицу. Каждый из встроенных клипов имеет минимальный набор
кнопок управления: воспроизведения и паузы, что определяется параметром
coNTROLS=PiayButton. Справа от таблицы (рис. 7.9) располагается еще одна
консоль управления с полным набором кнопок, для которой указано значе-
ние CQNSOLE="_master". Заметим, что для этого окна также имеется отдель-
ный встроенный файл ([Link]), содержимое которого никогда не ис-
пользуется. Единственное, что необходимо, это обеспечить существование
непустого файла с таким именем.
" Г he 1'ioilnjy Netscape

e;«OI/NEW_BOOIC/4/prodi!iy Mm

Встраивание нескольких клипов, управляемых одной

консолью

Альбом "The fat of th« land" \\

_,.| |^
Smack my bitch up •15:42!i ; 'i

Breathe

Diesel power

Funky shit

Serial thrilla

Mindfiels |5:39J

jNarayan 9:04

JFirestarter |4:40

jClimbatize |6:36
Рис. 7.9. Несколько
Fuel my fire 14:18
встроенных клипов,
управляемых из одного
окна
246 Часть I. Основы HTML

Запуск на воспроизведение любого из десяти встроенных клипов приводит

к активизации мастер-консоли. В этом окне будут отображаться все пара-
метры запущенного клипа, а также будут работать все кнопки управления.
Последним параметром тэга <EMBED> является NOLABELS. Если ему присвоено
значение TRUE, то вывод информации о клипе (название, автор и копирайт)
будет запрещен.
Для тех пользователей, браузеры которых не поддерживают тэг <EMBED>,
включите после этого тэга контейнер <NOEMBED> с альтернативным содержа-
нием:
<ЮЕМВЕО>Что-то для браузеров, не поддерживающих подключаемые
модули</№ЭЕМВЕО>

К примеру, можно такой строке дать ссылку для запуска самостоятельной

программы-плейера:
<EMBED SRC="[Link]" WIDTH=300 HEIGHT=100>
<NOEMBEDXA ЗКС="затр1е.гат">Сейчас запустится
программа RealPlayer</AX/NOEMBED>

Примечание
Несмотря на то, что все примеры встраивания файлов формата RealAudio при-
ведены для браузера Netscape, они будут точно также работать и в браузере
Internet Explorer. Это заслуга компании-разработчика плейера.

Если вам потребуется сконфигурировать программу-сервер для работы со

звуковыми файлами формата RealAudio, то нужно задать соответствующие
МШЕ-типы. В табл. 7.4 перечислены MIME-типы и соответствующие им
расширения файлов.

Таблица 7.4. MIME-типы для RealAudio

MIME-тип Расширение

audio/x-pn-realaudio RA, RAM

audio/x-pn-realaudio/plugin RPM

Ресурсы RealAudio в Интернете

Основным сайтом для получения разнообразной информации, связанной
с технологией RealAudio, является официальный сайт разработчика этой
технологии [Link]
Информацию о передачах в формате RealAudio можно получить по адресу
[Link] В недавнем прошлом это был отдельный сервер,
Глава 7. Звук 247

однако, сейчас обращение по указанному адресу перебрасывается на стра-

ничку [Link]
Появилось достаточное количество серверов RealAudio на русском языке.
Их число постоянно растет, найти их адреса можно, воспользовавшись лю-
бой поисковой системой, например, по ключевому слову RealAudio. Укажем
лишь некоторые из наиболее интересных адресов.
Большой список серверов RealAudio, работающих на русском языке, можно
найти по адресу [Link]
Весьма обширная коллекция файлов в формате RealAudio располагается по
адресу [Link] (рис. 7.10).

Ж MIH HIT PARAD Netscape

TN Hit farad
\ totp; //www. rus. oig/mtrrosAeaf

Jfyg&mattjt Jl^|«i«ae t/m^a&m

MTN Хит парад.Втоззв Коллекция Аллы Стерховой (добавлена 2S мая <ээа г )

После ППОСЛУШИВМИЯ песен и мелодий вы можете оставить свое мнение в

Музыкальной Конференции и™ поговорить ДЕВ нашем чате о музыке и искусстве и

вообще о чем угодно
С Коллекция песен MTB-NIKITAD
(популярные > основном русские и советские песни разных лег!

^"^ ПВЕИи из сдрни "СпасиВртрв, Сталину з» наше

Ешипивдедвтствн"

-Пдсни и н|поии дшуВажныии пдддийо ^^ песни из серии "СладиВатдв.

исполиитепвй Сталину за наше счастлива в ДЕГСТВР"-? НШ i?.1.03 SB!

^Лучшие иыгвнскид нддни и псмднды1вбррвин

^ ЙЛ8ЛИВИИ ВЫЕРЦКИЙ [Ei

Рис. 7.10. Постоянно растущая коллекция песен на русском языке в формате RealAudio

Не обошел вниманием возможности использования технологии RealAudio и

известный российский Web-мастер Артемий Лебедев. В своем музыкальном
разделе он расположил гимны всех республик бывшего СССР в этом фор-
мате для четырех разных скоростей соединений (рис. 7.11).
Естественно, что возможности Интернета стали осваивать и ведущие рос-
сийские радиостанции. Радиостанция "Маяк" является одной из старейших
248 Часть I. Основы HTML

ВЦ , I 1 Щ

Музыкальный КА]дел

Музыкальный НАздел на Н.Ж.М Д - еще одна веха в КАзвитаи моей стЕАницы, и так уже
ЕАзросшейся до гигантских КАзмеров. Вашему вниманию предлагаются все гимны республик
СССР в формате Real Audio.

Государственный гимн Советского Союза

Государственный гимн Украинской ССР
Государственный гимн Белорусской ССР
Л ГГПЙ Г!(ТР lN*l . . . .llsl .
j,p- • .-.-:. *
• -i- Vi * - X

Рис. 7.11. Музыкальный раздел с гимнами всех республик бывшего СССР

Европа Плюс
Л п р е д с г я и •> и с 1 к о н к у р с

Рис. 7.12. Страница радиостанции "Европа Плюс

Глава 7. Звук 249

и наиболее известных в России. Пожалуй, нет в нашей стране ни одного

человека, который бы ни разу не слышал ее позывных. Станция начала ве-
щание 1 августа 1964 г. и с успехом продолжает его и сегодня. Начато веща-
ние и в сети Интернет в формате RealAudio ([Link]
/[Link]).
Одной из наиболее популярных радиостанций, появившихся в последние
годы, является станция "Европа Плюс". Она уже отметила свое 8-летие
(основана в 1991 г.) и на сегодняшний день занимает второе место среди
коммерческих радиостанций России. На рис. 7.12 показана страничка Санкт-
Петербургского отделения радиостанции ([Link] Как
видно из рисунка, в планах компании осуществление вещания в формате
RealAudio.

Звуковые файлы формата МРЗ

Как уже отмечалось в начале главы, хранение звуковых данных в оцифро-
ванной форме с высоким качеством требует довольно больших затрат дис-
ковой памяти. Попытки сократить объем файлов, используя стандартные
архиваторы, обычно не приводят к значительному выигрышу из-за специ-
фичности звуковых данных. Тем не менее, добиться довольно значительного
уровня сжатия видео- и аудиоинформации удается при использовании спе-
цифических методов, основанных на анализе структуры данных и после-
дующем сжатии с некоторыми потерями.
Реальная возможность обработки изображений и звука, сравнимых по ка-
честву с существовавшими аналоговыми примерами, появилась только в кон-
це 80-х годов.
В 1988 году Международной организацией стандартов ISO (International Stan-
dards Organization) был сформирован комитет MPEG (Moving Pictures Expert
Group, группа экспертов в области движущихся изображений), основной
задачей которого являлась разработка стандартов кодирования подвижных
изображений, звука и их комбинации. За десять лет своего существования
комитет выработал ряд стандартов по данному вопросу. В результате, обоб-
щив обширные исследования в этой области, был рекомендован определен-
ный набор методов сжатия аудио- и видеоданных. Был определен ряд спе-
цифических форматов для хранения данных, отличающихся по качеству ре-
зультатов и скорости передачи данных.
В настоящее время существует три стандарта хранения видеоданных:
MPEG-1, MPEG-2 и MPEG-4. В рамках форматов MPEG-1 и MPEG-2 су-
ществуют также форматы хранения звуковой информации, которые носят
название Layer-1, Layer-2 и Layer-З. Эти три звуковых формата определены
для MPEG-1 и незначительными расширениями используются в MPEG-2.
Все три формата похожи друг на друга, но используют различные уровни
250 Часть I. Основы HTML

компромисса между сжатием и сложностью. Уровень Layer-1 -- наиболее

простой, не требует значительных затрат на сжатие, но и дает небольшую
степень сжатия. Уровень Layer-З — наиболее трудоемкий и предлагает самое
лучшее сжатие. В последнее время огромную популярность завоевал формат
Layer-З, который часто называют просто МРЗ. Такое название связано с ти-
пичным расширением МРЗ для звуковых файлов, хранящихся в этом фор-
мате. Это сокращение укоренилось, стало общепринятым, в частности, дало
название ряду сайтов, посвященных этой технологии ([Link],
[Link], [Link] и др.).
Основная идея, на которой основаны все методики сжатия аудиосигнала с
потерями, — пренебрежение тонкими деталями звучания оригинала, лежа-
щими вне пределов возможностей человеческого слуха. Здесь можно выде-
лить несколько моментов.
Уровень шума. Звуковое сжатие базируется на простом факте. Если человек
находится рядом с громко воющей сиреной, то вряд ли он услышит разго-
вор стоящих неподалеку людей. Причем это происходит не оттого, что чело-
век обращает больше внимание на громкий звук, а в большей степени от-
того, что человеческое ухо фактически теряет звуки, лежащие в том же диа-
пазоне часто, что и значительно более громкий звук. Этот эффект носит
название маскирующего, он изменяется с различием в громкости и частоте
звука.
Одним из основных способов сжатия звука является уменьшение числа бит,
используемых для хранения данных при дискретизации звука. Уменьшение
числа бит эквивалентно добавления шума к звуку. Сжатие MPEG использу-
ет маскирующий эффект, имея в виду, что человек все равно не услышит
появляющийся в результате уменьшения числа бит шум.
Вторым моментом является деление полосы звуковых частот на подполосы.
Каждая из выбранных подполос далее обрабатывается отдельно. Программа
кодирования выделяет самые громкие звуки в каждой подполосе и исполь-
зует эту информацию для определения приемлемого уровня шума для этой
подполосы. Лучшие программы кодирования учитывают также влияние со-
седних полос. Очень громкий звук в одной подполосе может повлиять на
маскирующий эффект и на близлежащие полосы.
Еще одним моментом кодирования является использование психоакустиче-
ской модели, опирающейся на особенности человеческого восприятия зву-
ка. Сжатие с использованием этой модели основано на удалении заведомо
не слышимых частот с более тщательным сохранением звуков, хорошо раз-
личаемых человеческим ухом. К сожалению, здесь не может быть точных
математических формул. Восприятие звука человеком — сложный, до конца
не исследованный процесс, поэтому выбор методов сжатия выполняется на
основе анализа прослушивания и сравнения по-разному сжатых звуков
группами экспертов. Зато здесь имеются практически неограниченные воз-
можности в сфере улучшения психоакустических моделей.
Глава 7. Звук _ 25 1

Большинство существующих алгоритмов для кодировки человеческого голо-

са основано на высокой степени предсказуемости такого сигнала — универ-
сальные алгоритмы сжатия MPEG с переменным успехом пытаются приме-
нить этот прием. Еще одним приемом сжатия является использование так
называемого совмещенного стерео. Известно, что слуховой аппарат человека
может определить направление лишь средних частот — высокие и низкие
звучат как бы отдельно от источника. Значит, эти фоновые частоты можно
кодировать в моно сигнал.
Кроме всего этого для сжатия используется различие в сложности потоков
в каналах. Например, если в правом канале какое-то время полная тишина,
это "зарезервированное" место используется для повышения качества левого
канала или туда впихиваются необходимые биты, не влезшие в поток чуть
раньше.
На последней стадии сжатия используется алгоритм сжатия Хаффмана, ис-
пользуемый во многих стандартных программах сжатия. Этот процесс по-
зволяет улучшить степень сжатия для относительно однородных сигналов,
которые плохо сжимаются с помощью описанных выше приемов.
На основе описанных идей строятся алгоритмы сжатия, позволяющие дос-
тичь степени компрессии 10:1 и выше практически без потери в качестве
звучания. При кодировании задают требуемый уровень компрессии, а алго-
ритмы сжатия добиваются требуемого уровня сжатия за счет качества. Для
данного применения требуемый уровень сжатия обычно указывают в виде
величины потока данных (bit rate), измеряемого в Кбит/с.

( Примечание ^)
Термин "bit rate" обозначает количество битов передаваемой информации в се-
кунду. На русский язык этот термин переводится по-разному в различных ис-
точниках. В последнее время часто вместо формального перевода употребля-
ют новое для русского языка слово "битрейт". Вариантами перевода также яв-
ляются следующие: "ширина потока данных", "сложность потока битов", "ско-
рость потока", "битовая частота". Иногда для звуковых файлов этот же пара-
метр называют степенью сжатия файла. Например, говорят, что файл сжат до
128 Кбит/с. Дело в том, что величина битрейта напрямую связана с размером
звукового файла в расчете на одну секунду звучания (уменьшение размера
файла в определенное количество раз обеспечивает снижение битрейта в та-
кое же количество раз).

Воспроизведение файлов формата МРЗ

Для проигрывания файлов МРЗ существует довольно большое количество
программ-плейеров, число которых измеряется десятками. Большой список
таких программ можно найти на сайте [Link] Однако сре-
ди перечисленных программ есть всего несколько, пользующихся огромной
популярностью и занимающих практически весь рынок программ. Безус-
252 Часть I. Основы HTML

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

дано ниже. Дальнейшему росту популярности программы Winamp будет
способствовать ее включение в дистрибутив пакета Netscape Communicator
версии 4.7.
Программы воспроизведения отличаются друг от друга как интерфейсом,
так и такими важными параметрами, как качество проигрывания и скорость
декодирования. По скорости декодирования самым быстрым плейером был
и остается на сегодняшний день K-Jofol, краткие характеристики которого
также будут приведены ниже.
Вопрос качества воспроизведения не так прост, как может показаться. Не-
смотря на то, что стандарт МРЗ однозначно определяет, какие именно
данные содержатся в МРЗ-файле, это не значит, что их декодирование обя-
зательно должно быть однозначным. Причин неоднозначности несколько.
Во-первых, независимо от сути алгоритма декодирования, оно может про-
водиться с разной точностью. По данному признаку декодеры разделяют на
32-битовые и 64-битовые. Существует также 110-битовый декодер NAD.
Во-вторых, как и в случае с цифровыми данными, записанными на CD, со-
держащаяся в файлах информация является лишь приближением к исход-
ному сигналу. И как для более адекватного воспроизведения аудио CD с
компенсацией дефектов, вызванных записью на CD, в высококлассной ап-
паратуре применяются различные методы обработки звука, так и в случае
файлов МРЗ в принципе можно значительно улучшить звучание, если знать,
какие из вносимых сжатием в МРЗ искажений более заметны и какие под-
даются коррекции.
По качеству звука лидером считается программа NAD, возрождающаяся
ныне под названием NADDY ([Link]

Установка программы Winamp

Программа-плейер Winamp (Windows Audio Mpeg Player) предназначена для
воспроизведения звуковых файлов в различных форматах (МРЗ, WAV, MIDI
и др.) и может устанавливаться в среде Windows 95/98/NT. Для качествен-
ного воспроизведения файлов МРЗ минимальным требованием является
компьютер на базе процессора 486 последних моделей. Рекомендуется ис-
пользовать Pentium и выше. Программа разработана компанией Nullsoft
([Link] для получения сведений о новейших разработках
можно обратиться к официальному сайту [Link] Совсем
недавно появился сайт [Link] на котором будет дублировать-
ся информация официального сайта на русском языке.
Инсталляция программы на компьютер в среде Windows очень проста. Ин-
сталляционный файл программы представляет собой исполняемый файл
(ЕХЕ-файл) размером порядка 500 Кб (для популярной в свое время вер-
сии 2.05).
Глава 7. Звук 253

с Примечание
Последующие версии имеют незначительно отличающийся размер инсталля-
ционного файла. Правда, начиная с версии 2.24, компания-разработчик стала
предлагать программу в двух вариантах— базовом и полном. Базовый ком-
плект в отличие от полного не имеет некоторых возможностей, которые на са-
мом деле не нужны для обычного прослушивания звуковых файлов, поэтому
вполне годится для типичного применения программы. Размер базового ком-
плекта версии 2.5с составляет примерно 600 Кб, а полного комплекта той же
версии —1,8 Мб.

Запустите этот файл на исполнение, и вы увидите окно, как на рис. 7.13.

Выберите имя каталога, в который необходимо установить программу и на-
жмите кнопку Install. Появится окно (рис. 7.14), в котором предлагается об-
новить список ссылок на ресурсы программы Winamp в сети Интернет. Если
ваш компьютер подключен к Интернету, нажмите кнопку Да, в противном
случае нажимайте Нет.

Winamp Instdllei 1 Dynamic Links

И е С..',.!.'... VW::V; |i
I

gMi,'!'

Рис. 7.13. Окно инсталлятора Рис. 7.14. Окно запроса обновления

программы Winamp динамических ссылок

После этих действий программа автоматически запустится в режиме вос-

произведения демонстрационного файла формата МРЗ ([Link]). На этом
установка будет завершена.
Заметим, что на настоящий момент существует довольно много версий
программы. Новые версии программы Winamp в отдельные моменты появ-
лялись чуть ли не каждую неделю (табл. 7.5, в этой таблице приведен далеко
не исчерпывающий список версий). Это, с одной стороны, свидетельствует
о том, что разработчики программы активно работают над ее модернизаци-
ей. С другой стороны, скоропалительный выпуск новых версий не позволяет
тщательно отлаживать программу. В итоге выпуск новой версии таит в себе
и новые ошибки, исправляемые в последующих версиях. В частности, для
версии 2.09 авторам пришлось буквально через два дня выпустить файл-
заплатку (patch), которая исправляет допущенные ошибки и изменяет номер
254 Часть I. Основы HTML

версии на 2.091. Разные версии программы имеют и определенные возмож-

ности и особенности, зачастую не описываемые разработчиками. Основные
возможности различных версий можно всегда посмотреть на сайте компа-
нии-разработчика, а также в справочном текстовом файле, появляющемся
в каталоге при установке программы. Пользователю обычно не интересно
изучать нюансы версий программы, однако полезно знать основные осо-
бенности и рекомендации по использованию, так как с программами раз-
личных версий приходится сталкиваться в различных архивах и на CD-дис-
ках с музыкальными файлами. Активные пользователи по возможности
стремятся устанавливать последнюю версию, считая, что она, по крайней
мере, не хуже, что для данной программы не всегда справедливо.
Отметим лишь важнейшие и наиболее интересные особенности версий.
Версия 1.92 ознаменовала рождение нового поколения программы Winamp,
включив в себя новый декодер Nitrane 1.0, обеспечивающий поддержку тех-
нологий ММХ и 3DNow! Декодер Nitrane использовался во многих после-
дующих версиях программы, однако в версии 2.20 был заменен на другой
декодер, лицензированный немецким институтом Fraunhofer IIS (о вкладе
этой организации в развитие технологий кодирования звука см. ниже в этой
главе). Этот декодер использовался в версиях 2.20-2.22. Естественно, что при
выходе этих версий говорилось, что программа оснащена новым декодером,
улучшившим качество звука. При этом лишь кое-где мельком упоминалось,
что этот декодер работает лишь с форматом звука Layer-З, а форматы Layer-1
и Layer-2 корректно не воспроизводит. Незнание этой особенности про-
граммы оказалось очень неприятным. Дело в том, что в настоящее время
большинство звуковых файлов MPEG записываются в формате Layer-З, од-
нако встречаются и старые записи Layer-1 и Layer-2. Причем довольно часто
в фонотеках все файлы независимо от формата имеют расширение МРЗ.
Отличить формат файла по расширению становится невозможно. Это мож-
но сделать лишь посмотрев информацию самого музыкального файла (View
file info). Что же происходит в итоге. Установив новую версию программы
в определенный момент обнаруживаешь, что некоторые звуковые файлы,
прекрасно воспроизводившиеся предыдущими версиями программы, пере-
стали корректно воспроизводиться новой версией по непонятным причи-
нам. Такая ситуация весьма неприятна для пользователя и весьма подрывает
авторитет компании-разработчика. Данный декодер использовался лишь в
трех версиях программы, и в версии 2.23 разработчики вновь вернулись
к декодеру Nitrane обновленной версии 1.60. Возвращение декодера Nitrane
сопровождалось рекламными характеристиками об уменьшении загрузки
процессора при декодировании файлов, появилась даже фраза "Nitrane жив!".
Все эти изменения обросли легендами и мифами, в которых правда соседст-
вует с вымыслом. Так возврат к декодеру Nitrane был обыгран следующим
образом. Было сказано, что автор программы Winamp Дж. Френкель разбил
свой автомобиль Audi и после случившегося потерял всякое доверие к не-
Глава 7. Звук 255

мецкой инженерии, что и послужило поводом для возврата к собственному

декодеру Nitrane. Косвенным доказательством реальности случившегося
может служить фотография разбитого автомобиля, файл с которой можно
найти на просторах Интернета. В других источниках указывалось, что в те-
чение некоторого времени происходила судебная тяжба между компанией
Nullsoft и неким истцом, в продолжение которой компании Nullsoft было
запрещено использовать собственный декодер. По окончании тяжбы все
встало на свои места. Как все происходило на самом деле, обычному поль-
зователю совершенно не интересно. Эти подробности приведены лишь для
того, чтобы показать разнообразие возможных мотивов изменения характе-
ристик программ и их неожиданное влияние на потребительские качества.
Отметим еще некоторые возможности различных версий. Возможность ло-
кализации программы Winamp была заложена довольно давно, однако лишь
летом 1999 г. появился модуль русификации (Language Pack). Файл для ру-
сификации имеет имя [Link] и существует в трех вариантах — для вер-
сии 2.10, группы версий 2.2х и версии 2.5х.
Программа Winamp распространялась по принципу shareware, подразуме-
вающему двухнедельный оценочный период и последующую регистрацию
программы с небольшой оплатой (см. рис. 7.13). К чести разработчиков
программы следует заметить, что не было сделано никаких ограничений к
использованию программы после прохождения двухнедельного срока после
ее установки. Более того, начиная с версии 2.50, программа стала полностью
бесплатной (freeware).

Таблица 7.5. Версии программы Winamp

№ Номер Дата появления № Номер Дата появления

п/п версии п/п версии

1 0.2а 21.04.97 12 2.0 08.09.98

2 0.92 01.05.97 13 2.01 25.09.98
3 1.00 07.06.97 14 2.02 29.09.98
4 1.20 31.07.97 15 2.03 08.10.98
5 1.40 03.09.97 16 2.04 25.10.98
6 1.50 19.09.97 17 2.05 15.11.98
7 1.66 14.01.98 18 2.06 31.12.98
8 1.80 18.03,98 19 2.09 11.01.99
9 1.90 31.03.98 20 2.091 13.01.99
10 1.91 20.05.98 21 2.10 24.03.99
11 1.92 27.06.98 22 2.20 03.05.99
256 Часть I. Основы HTML

Таблица 7.5 (окончание)

№ Номер Дата появления № Номер Дата появления

п/п версии п/п версии

23 2.21 12.05.99 27 2.5 25.08.99

24 2.22 26.05.99 28 2.5с 27.08.99
25 2.23 08.06.99 29 2.5е 04.10.99
26 2.24 13.07.99

Довольно популярной долгое время была версия 2.05, которая работает

весьма устойчиво. Начиная с версии 2.06, программа Winamp была перепи-
сана на Visual C++. По утверждению авторов программа должна была стать
меньше по размерам и работать надежнее.

Управление программой Winamp

Работа с программой проигрывания звуковых файлов Winamp не вызывает
затруднений. Вы выделяете необходимые звуковые файлы и кидаете их
(drag-and-drop) в любое место окна профаммы Winamp. Файлы попадают в
список проифываемых файлов и будут
воспроизводиться по очереди. Это наи-
более простой способ использования
профаммы.
Внешний вид профаммы с фафическим
эквалайзером (Winamp Equalizer) и спи-
ском проифываемых файлов (Winamp
Playlist) показан на рис. 7.15. Заметим,
что на рисунке показано одновременно
три окна: самой профаммы, эквалайзера
и списка файлов. Эти окна могут быть
разбросаны по экрану, а могут быть со-
ставлены в произвольном порядке друг
над другом и перемещаться как единое
целое.

Рис. 7.15. Окна программы

Winamp
Глава 7. Звук 257

Окошко самой программы имеет следующие кнопки управления (нижний

ряд кнопок): переход к предыдущему звуковому файлу из списка (Previous
Track), воспроизведение (Play), пауза (Pause), останов (Stop), переход к сле-
дующему звуковому файлу из списка (Next Track), выбор нового файла или
файлов (Eject (open file (s))). В этом же ряду имеются две кнопки-пере-
ключателя: Shuffle и Repeat, а также кнопка About. Если включена кнопка
Shuffle, то воспроизведение файлов из списка будет выполняться в случай-
ном порядке, в противном случае они будут проигрываться подряд. Включе-
ние кнопки Repeat обеспечивает бесконечный цикл воспроизведения.
Выше ряда кнопок управления располагается ползунок, перемещающийся
по мере исполнения произведения. Перемещая ползунок, можно обеспечить
воспроизведение файла с любого места.
Еще выше располагаются ползунки управления громкостью звука и балан-
сом. Тут же расположены кнопки включения/выключения окон эквалайзера
(EQ) и списка файлов (PL).
В окне программы Winamp отображается также информация о воспроизво-
димом в текущий момент файле. Указывается битрейт файла (например,
128 Кбит/с), частота оцифровки (например, 44 кГц), режим воспроизведе-
ния (моно или стерео).
Двойным щелчком по строчке с информацией о текущей фонограмме можно
вызвать редактор идентификационных параметров звукового файла (рис. 7.16).
В окошках редактора можно увидеть данные, хранящиеся в файле, и при
необходимости их отредактировать. Заметим, что программа Winamp даже
в нерусифицированном виде ограниченно поддерживает русские буквы.
MPEG File Info Воя + ID3 Tag Editor

[СЛгПрЗ\Сг.а|.в .

I ;
• j Genre ! Еа j f'nVJit^Mo

Commert Г~ "-Г'-""'"" : {Ш ''•'•,:.• 4 ".<•

j ClliairrfYes
< «Tt
Рис. 7.16. Окно редактора
параметров звукового файла
программы Winamp

Подключаемые модули программы Winamp

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

9 Зак. 944
258 Часть /. Основы HTML

какую-нибудь графическую информацию (модули визуализации), програм-

ма, добавляющая звуковые эффекты (модули DSP — Digital Sound Proces-
sing, цифровая обработка звука), или модули общего назначения (General
Purpose plug-ins) — например, добавляют кнопки управления проигрывате-
лем в панель задач. Существуют специальные модули для открытия нестан-
дартных типов файлов, например VQF-файлов, а также модули для вывода
звука через нестандартные устройства (например, при переводе звука из
формата МРЗ в формат WAV).

(~ Примечание ~^)
Начиная с версии 2.09 в файл с дистрибутивом программы Winamp более не
включаются подключаемые модули (plugins) для визуализации и обработки зву-
ка (vis/dsp). Теперь их необходимо скачивать и устанавливать отдельно. Разу-
меется, все ранее установленные модули сохраняются, если новая версия про-
граммы устанавливается поверх предыдущей.
Установка модулей не представляет сложностей. В простейшем варианте
подключаемые модули представляют собой небольшие dll-файлы, начало
имени которых отражает их назначение (vis — модуль визуализации, dsp —
модуль обработки звука, gen — модуль общего назначения, in/out для вво-
да/вывода). Как правило, модули хранятся в упакованном виде. Необходимо
распаковать архив в каталог \Winamp\Plugins\.
Затем запустите Winamp и настройте модуль. Для этого откройте окно
Preferences (<Ctrl>+<P>), выберите соответствующий модуль и выполните
его настройки.
Подключаемые модули программы Winamp можно найти на различных сай-
тах сети Интернет. В частности, около сотни разнообразных модулей имеет-
ся на официальном сайте [Link]
Одним из наиболее интересных модулей визуализации является модуль
Cthugha, реализующий огромное количество светомузыкальных эффектов
(рис. 7.17).

Рис. 7.17. Окно модуля

визуализации Cthugha
Глава 7. Звук 259

Информацию о модуле Cthugha можно получить на следующих сайтах:

[Link]
[Link]
[Link]

Изменение внешнего вида программы Winamp

В программе Winamp для изменения внешнего вида любого окошка можно
воспользоваться технологией установки так называемых Skin'oB. Изображе-
ния главного окна проигрывателя, всех кнопок, регуляторов, букв хранятся
в отдельных графических BMP-файлах, которые легко редактируются. Это
позволяет изменять внешний вид программы по своему усмотрению. Набор
таких файлов называется Skin'oM. Слово skin в переводе с английского языка
означает кожа, шкура, кожура. Для данного применения этого термина пока
не найдено удачного перевода, верно отражающего смысл. Часто употребля-
ется без перевода, например, говорят "установить новый скин". Встречаются
термины "сменить шкуру", "установить обшивку". Как бы это ни называли,
речь идет об изменении внешнего вида окошек программы Winamp, которое

р: //www. winamp. com/ winamp/over view, html

V* It Ы А РЛ f* }
[Link] player for Windy

^ Winamp Player
Winamp Player Overview

• Base skin design

¥
Winamp Downloads • Basic controls play, pause, • j> ; ';.-•• :-'~ ;-•-;; ...;L./J.^'/.:'':^.;. ;-„!;.;'. .!„_.'...-::; ll
stop, forward song, previous ="kfe,^ • -V —^н'" ^*иь
song, select new song ••->
• Built-in spectrum analyzer and ; ; - .
oscilloscope f
*• Register Winamp 1
• Track into author, tttle. bit rate, \
sample rate, time, etc
• Additional controls position slider, balance, volume, equalizer, ptayltst, shuffle and
repeat
• Can run in unobtrusive wmdowshade mode.
v
Team Winamp • All windows dock seemlessly

Drag and drop playlist

jst sonq information vi<

ort bv 1 ntle and filename or

Рис. 7.18. Сайт [Link], целиком посвященный программе Winamp

260 Часть I. Основы HTML

никак не влияет ни на расположение элементов окон, ни на функциональ-

ные возможности программы.
Технология использования Skin'oe, как это ни удивительно, получила очень
широкое распространение. В сети Интернет можно найти огромное количе-
ство разнообразных Skin'oB для Winamp, даже найти целые коллекции, в ко-
торых они разбиты по отдельным рубрикам. Достаточно зайти на специаль-
ный сайт (рис. 7.18), посвященный программе Winamp ([Link]
и скачать оттуда любой из имеющихся Skin'oB, число которых перевалило за
тысячу на начало 1999 г. и за три тысячи еще через полгода.
Установить новый Skin довольно просто. Сделайте подкаталог в каталоге
\Winamp\Skins\ с именем, соответствующим названию Skin'a. Разархивируй-
те туда содержимое архива со Skin'oM. Отдельный Skin представляет собой
набор примерно десяти файлов с расширением BMP и как минимум одного
текстового файла. Некоторые Skin'bi имеют встроенные подключаемые мо-
дули (файлы *.DLL), которые нужно скопировать в каталог \Winamp\Plugins\.
После совершения этих операций нажмите в главном окне проигрывателя
Alt-S. Появится Skin Browser, где можно опробовать новый Skin.
На рис. 7.19 показаны примеры Skin'oB, изменяющих внешний вид основ-
ного окна программы Winamp.

II:» 0 0: 0 а\Ь...«»И1»лч».дч|.
Ii EN* S N » «
I (UireaiiaaDJ ш-шшига »:ШшГ

Рис. 7.19. Различные варианты отображения основного окна программы Winamp

Глава 7. Звук 261

Скрытые возможности программы Winamp

Многие программисты закладывают в свои программные продукты некото-
рые недокументируемые возможности. Иногда это требуется для отладоч-
ных, проверочных и других технологических целей. В ряде случаев авторы
программ закладывают в них различные шутки ("приколы", как говорят
программисты), не влияющие на возможности программ. К последним отно-
сятся и несколько скрытых возможностей программы Winamp версии 2.хх.
1. Откройте окно About Winamp, выберите вкладку Winamp (рис. 7.20). На
рисунке вы увидите стилизованное изображение любителя музыки в на-
ушниках, перемещающееся по экрану. Однако, если, находясь на этой
вкладке, вы выполните двойной щелчок мышью на слове Copyright, од-
новременно удерживая клавиши <Ctrl>+<Alt>+<Shift>, то увидите фото-
графию главного программиста фирмы Nullsoft Джастина Френкеля (Justin
Frankel).

JpHPHMl m
Ж Рис. 7.20. Вкладка
Viitt*:^ И т -..-(ч;™ Shareware окна About
Winamp программы
Winamp

2. Откройте окно About Winamp, выберите вкладку Shareware (рис. 7.21). Вы

увидите информацию об использовании вами программы, в частности,
количество запусков программы, число исполненных произведений и
общее число минут воспроизведения. Это полезная статистическая ин-
формация. Попробуйте сделать двойной щелчок мышью на строчке Usage
statistics. Появится строчка, извещающая о том, сколько дней на сегодня
прожил автор программы.
3. Выберите стандартный внешний вид (skin) программы Winamp. На кла-
виатуре медленно наберите слово nullsoft, нажимая клавишу <Ecs> после
262 Часть I. Основы HTML

каждой буквы. Вместо названия окна программы Winamp появится строчка

текста, которая, в частности, озвучена в демонстрационном файле
demo.mp3. Перевод текста оставляем читателю.

сват fun- i | ,i: ill HI vi П i I -no oi li»

14 tbV Iflf'l :» И !' i: i'"-i- u;.•,<•.<:,.:i«lly t«-

Iо i ...
anna bteJ-rth*. р*;да,а! ч,е UStlO
„•.!M,,'i., .,.•'..,!•,..-., .r,,.,,j t,j . I
,.,,,,,„.,,tnc .
В I I |:'.,,w.-Vfи.«м<ч...?««»Щ:Щ|;(||

USA"'" I • I

SeCUiSoiv- -.-:..:: I-.'.!.-,.» .; V l ' , •,:'.«• -.,: 1/Л:!. ^ i: .• - . » i -,S..- b.4..

Рис. 7,21. Программа

Winamp накапливает
OK J статистику своего
использования

Декодирование файлов формата МРЗ

Для декодирования звуковых файлов формата МРЗ и их сохранения, напри-
мер, в формате WAV можно воспользоваться специальными программами-
декодерами. Однако многие программы-проигрыватели файлов МРЗ обла-
дают возможностью такого преобразования. В частности, таким свойством
обладает программа Winamp.
Для того чтобы преобразовать звуковой файл МРЗ в формат WAV необхо-
димо сделать следующее.
П В меню Options/Preferences выберите вкладку Audio I/O.
а В окне Output Plug-Ins выберите строчку Nullsoft Disk Writer Plug-In...
(рис. 7.22).
HI Нажмите кнопку Configure и выберите имя каталога, в котором будут со-
храняться создаваемые файлы.
О Запустите режим воспроизведения. Вместо воспроизведения звука будут
создаваться файлы формата WAV.
Глава 7. Звук 263

[Winamp - Pieferences

Ж'
Шшш
•1I

Применить Рис. 7.22. Вкладка Audio I/O

окна Winamp/Preferences

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

Где найти файлы МРЗ?

В последнее время хранение музыкальных записей в формате МРЗ получило
очень широкое распространение. В сети Интернет уже существует довольно
большое количество сайтов, посвященных коллекциям фонограмм в этом
формате, причем их число постоянно растет. Найти сайты не представляет
труда, воспользовавшись любой поисковой системой. Для этого достаточно
для поиска ввести ключевое слово "МРЗ". Заметим, что таким же образом
можно найти и коллекции в других форматах, описанных ниже (например,
VQF). Что же касается нового формата хранения звука МР4, то о нем пока
ничего не слышно, поэтому поиск по ключу "МР4" приведет к чему угодно,
но не к музыкальным сайтам. Приведем адреса лишь некоторых наиболее
интересных сайтов.
На рис. 7.23 показана одна из страничек сети Интернет, посвященная музы-
ке ([Link]
264 Часть I. Основы HTML

• сайты о музыке, рэйве, аудиотехнике, рэпе,

CD, rock, MIDI. RA, МРЗ.
a bsjtKH

ссылки
Мегаяп. вок. altemativ. 'n'roil
КИ МЭ fflyllirfci И К.СЛОЛНИТ^ЛКЙ

* ссылки':::
Радиостанции

• MIDI. RealAudio, MP3

ВнШц£ШиШШ
1
online & .zip
Ш1
• onlin

Рис. 7.23. Одна из многочисленных русскоязычных страничек, посвященных

музыкальным ресурсам в сети Интернет

,|'««*,МЛ, A '.«,.:>,•],.,

Butfeoj* - кто «и? Бысомзп-паг.стпрсй.чшпккки

псчржтысиифтmk Внс<май- птспсоимшй

D L11** ЛI 11/'1Л1Л
Di3llrfl,JLll\p
™""§ II/1

-•песни проза театр-- кино-

о высоцком : музей —общение

Рис. 7.24. Официальный сайт фонда В. Высоцкого

Глава 7. Звук 265

Множество сайтов на русском языке посвящено авторской песне, в частно-

сти, отдельным исполнителям. Например, можно найти страничку, целиком
посвященную В. Высоцкому (рис. 7.24). Адрес сайта [Link]
/masha/vysotsky.
Приведем список некоторых наиболее известных русскоязычных сайтов с
музыкальными коллекциями:
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]

Создание звуковых файлов МРЗ

Оказывается, что создать звуковые файлы формата МРЗ может практически
каждый в домашних условиях. Для этого необходимо иметь источник аудио-
данных (обычно это аудио CD) и пару программ.
Создание файла выполняется в два почти независимых этапа. На первом
этапе следует получить файл формата WAV (стандартного звукового файла
Microsoft Windows), а на втором этапе выполнить его кодирование в формат
МРЗ. Эти этапы можно проделать непосредственно друг за другом, но мож-
но и разделить промежутком времени. Что они в себя включают?
Входным источником для большинства программ-кодировщиков служат
WAV-файлы. Некоторые из кодировщиков (для UNIX и OS Macintosh) под-
держивают и другие входные форматы. Информация же на CD содержится в
специфическом "звуковом" формате в соответствии со стандартом ISO-9680
для записи аудио CD. Перед кодировкой необходимо вычленить такой
WAV-файл, что и является первым этапом. Для считывания музыки с аудио
CD можно, конечно, прогнать звук через звуковую карту и, воспользовав-
шись каким-либо звуковым редактором, сохранить данные в виде WAV-фай-
ла. Однако это наихудший путь для вычленения звука. Кроме музыки будет
сохранен весь набор шумов, который только может породить звуковая карта.
Использование звуковой карты оправдано только для тех случаев, когда нет
возможности взять музыку непосредственно с CD, например, при записи с
радио, магнитофона и т. д. Для считывания музыки с CD пользуются специ-
альными программами, способными перевести данные из аудиоформата в
WAV-файл без использования звуковой карты. Такие программы носят на-
звание "рипперы" (rippers). В переводе на русский язык для их обозначения
используются также термины "нарезальщик", "сдиратель", "грабилка" и др.
В последнее время таких программ появилось довольно много, причем ере-
266 Часть I. Основы HTML

ди них есть условно-бесплатные и вовсе бесплатные. Их обилие определяет-

ся в основном тем, что каждая программа поддерживает определенный на-
бор моделей CD, с которым можно ознакомиться в описании программы.
Заметим, что далеко не все приводы компакт-дисков поддерживают опера-
цию чтения аудиодорожек (Reading raw audio stream). Для выбора програм-
мы-риппера, просмотрите таблицу, приведенную в приложении 3, и опреде-
лите главное: поддерживает ли вообще ваша модель CD-ROM такое считы-
вание, и если да, то каким из нарезальщиков рекомендуется пользоваться.

Программы вычленения файлов с аудио CD

Одной из наиболее популярных программ-рипперов является WinDAC
(Windows Digital Audio Copy). Эта программа поддерживает большое количе-
ство приводов CD-ROM, в частности все модели с интерфейсом SCSI. По
адресу [Link] можно получить полную версию программы.
Второе место по популярности занимает программа AudioGrabber. Эта про-
грамма не умеет работать с драйверами SCSI, однако прекрасно работает с
устройствами интерфейса IDE. Информацию о программе можно получить
по адресам [Link] [Link]
Менее популярной является программа CDCopy, работающая в Windows
([Link] Среди программ, работающих в среде DOS, следует
упомянуть CDDA (CD Digital Audio) и CD2WAV.
Информацию о работе с этими программами можно получить на сайтах
[Link] [Link] Из русскоязычных сайтов
можно рекомендовать обратиться к страничке [Link]

Программы кодирования
Остановимся теперь на программах-кодировщиках. Эти программы на входе
принимают WAV-файл и выполняют его кодирование в формат МРЗ. Часть
программ позволяет работать из командной строки, что дает возможность
выполнять их запуск непосредственно из программ-рипперов после считы-
вания очередного трека. Такой возможностью, например, обладает програм-
ма-риппер WinDAC, которая имеет механизм написания и запуска скрип-
тов. Некоторые из программ-кодировщиков могут принимать поток данных,
поступающих от программы-риппера, и кодировать его без создания проме-
жуточных WAV-файлов. Появились также программы, представляющие со-
бой объединение кодировщика вместе с риппером (к числу таких можно
отнести программу CDex).
Несмотря на большое разнообразие программ-кодировщиков, многие из них
используют одни и те же библиотеки, т. е. в сущности, являются програм-
мами-оболочками, предоставляющие удобный интерфейс к кодировщикам,
работающим из командной строки, или установленным в системе кодерам.
Глава 7. Звук 267

Программы такого рода (их называют front-end-программами) передают вве-

денные параметры непосредственно кодировщику и ожидают завершения
процесса кодирования. Сами кодировщики называют двигателями кодиро-
вания.
Разнообразных двигателей кодирования, в отличие от программ, не так уж и
много. Прежде всего, нужно выделить кодировщики, разработанные немец-
ким институтом Fraunhofer IIS (Institut Integrierte Schaltungen), варианты ко-
торых используются в программах МРЗ Producer, МРЗ Compressor, 13enc,
трЗепс, AudioActive. Институт Fraunhofer IIS (рис. 7.25), в стенах которого
выполнены основополагающие разработки систем сжатия звука, является
признанным лидером среди научно-исследовательских лабораторий в облас-
ти мультимедийных приложений ([Link]
Одной из первых программ-кодировщиков является 13епс, 16-битовая про-
грамма, работающая в среде DOS. Другая программа трЗепс — дальнейшее
развитие 13епс для 32-битовых систем, все также работающая из командной
строки, выполняет кодирование значительно быстрее, однако проявляет себя
хуже в плане сохранения высоких частот.

•wit». Jf. Mtpi/[Link]/amm/

Нате | Fraunhofer Geseilschaft I Jobs I Contact i Fairs & Events I Press I Search
Business Fields | Competences I Projects & Products

Fraunhofer IIS Audio & Multimedia

In the field of high quality low bit-rate audio coding. Fraunhofer IIS is the leader among
the international research labs. Fraunhofer IIS has been the main developer of the most
advanced audio coding schemes, like MPEG Laver-3 and MPEG-2 AAC (Advanced
Audio Coding). Fraunhofer IIS plays a major role in the ongoing work for the MPEG4
standardization process and contributes to many other standards bodies as well, like
ITU-R TG10V4, ITU-R WP10C. AES, HPEG4 Intellectual Property Management &
Protection, and others.

Video activities are another corner-stone for multimedia competence at Fraunhofer IIS
complementing the audio expertise. A focus of work is the combination of high quality
audio coding with small-sized video using the H.263 coding scheme The experience
gathered with this standard is also the basis for H.263+ and future MPEG-4 video coding
activities.

Latest News f-
Jiiiuiaiy 27, 1999: Genuine Music
Fraunhofer IIS announces its participation in the "Genuene Music" Initiative that
has been announced by Liquid Audio during MIDEM in Cannes in order to give
artists a simple possibility to identify their intellectual propery rights on MP3
content.

January 22,1999: Secure Digital Music Initiative (SDMI)

Fraunhofer IIS confirms its participation in the "Secure Digital Music Initiative"

I• . :

Рис. 7.25. Страница института Fraunhofer IIS, известного своими разработками

в области сжатия аудиоданных
268 Часть I. Основы HTML

Программа МРЗ Producer (рис. 7.26) считается лучшим кодировщиком (по

мнению авторов сайта [Link]). При установке этой программы
в систему Windows становится доступен кодер МРЗ, который может затем
использоваться из любой программы работы со звуком. Например, можно
воспользоваться стандартной программой Фонограф (Sound Recorder) и со-
хранять файлы в формате МРЗ. Список установленных в системе кодеров
можно увидеть, выбрав нужный пункт в панели управления (Control panel
/Multimedia/Audio compression).

с Примечание
Последние версии МРЗ Producer устанавливают в систему Windows только де-
кодер файлов МРЗ, а код кодера интегрирован с самой программой.

i,,PU Г.'ЛМаяс^ЛМ.ЖЬП'бШ

^?~Щ
Рис. 7.26. Окно
программы-кодировщика
МРЗ Producer

Программа МРЗ Compressor является оболочкой-интерфейсом к тому же

кодеру, на котором основан и МРЗ Producer. Интерфейс программы позво-
ляет несколько иначе строить задачи кодирования и следить за их процес-
сом. Это приложение предоставляет некоторые дополнительные возмож-
ности, не допускаемые в МРЗ Producer. В частности, поддерживает работу
в режиме LQ (режим, противоположный HQ — High Quality). При включен-
ной опции LQ (Low Quality) кодировщик производит над каждым фрагмен-
том некоторое фиксированное количество итераций, затрачивая на коди-
ровку фрагмента определенное количество времени. Если же активизировать
HQ, кодировщик будет продолжать итерационный процесс до тех пор, пока
не перестанет улучшаться результат. Повышение качества в этом случае тре-
бует дополнительных временных затрат на кодировку, при этом размер вы-
ходного файла не меняется. Время кодирования при изменении режима
HQ/LQ может изменяться в 2—3 раза.
Другим несомненным достоинством программы является возможность зада-
ния большого количества файлов для кодировки и запуска программы из
командной строки.
Глава 7. Звук 269

( Примечание ^
Последние версии программы МРЗ Producer (начиная с версии 2.1) также пре-
доставляют возможность отключения режима HQ, а также имеют опцию пакет-
ной обработки файлов (Batch Processor). Кроме того, теперь предоставляется
возможность задания битрейта вплоть до 256 Кбит/с для высококачественных
записей (ранние версии имели ограничение — до 128 Кбит/с).

Другой известный производитель коммерческих кодеров МРЗ, компания

Xing Tech (Xing Technology Corporation, адрес сайта корпорации http://
[Link]), специализируется на выпуске низкокачественных коде-
ров. Среди этой группы кодеров можно назвать XingMP3 Encoder, Mplifier,
AudioCatalyst и др. Характерной особенностью кодировщиков от Xing Tech
является высокая скорость работы (программа XingMPS Encoder выполняет
кодирование в 6—8 раз быстрее, чем МРЗ Producer). Такая скорость дости-
гается за счет безжалостного вырезания частот свыше 16 кГц, которые еще
слышны человеку. В итоге, когда речь заходит о высоком качестве, коди-
ровщики Xing Tech использованы быть не могут.

С Примечание ^
Программа AudioCatalyst представляет собой объединение программы-риппера
(на базе AudioGrabber) и кодировщика от Xing Tech.

У кодировщиков данной группы (от Xing Tech) есть и некоторые интерес-

ные свойства. В последней версии кодировщика AudioCatalyst 1.5 реализо-
вана довольно интересная техника переменного битрейта (VBR, Variable Bit
Rate). В результате кодер способен для того же суммарного объема в опре-
деленных ситуациях давать МРЗ-файлы даже более высокого качества, чем
кодеры от Fraunhofer IIS, так как для сложно кодируемых участков стано-
вится возможным использование повышенных битрейтов, а для легко коди-
руемых, соответственно, — пониженных. Несомненным достоинством тех-
ники VBR-кодирования является то, что она базируется на внутренних воз-
можностях формата МРЗ, не добавляя по сути ничего нового — просто эти
возможности в полной мере не были использованы ранее. Соответственно,
полученные МРЗ-файлы можно проиграть на любом МРЗ-плейере. Пробле-
мы могут возникнуть иногда только при определении длительности звуча-
ния композиции, но на качество и полноценность воспроизведения это не
влияет. Полностью технология переменного битрейта поддерживается про-
граммой Winamp, начиная с версии 2.09.
Все остальные известные кодеры, авторство которых не принадлежит ни
Fraunhofer IIS, ни Xing Tech, основаны на общедоступных исходных текстах
кодера (ISO source), равномерно кодирующего разные частотные диапазоны,
что приводит к наивысшему качеству кодирования на высоких битрейтах
и вполне приличному на 128 Кбит/с. Но этот код достаточно медленный,
поэтому существует единственный известный кодер, в котором он не под-
вергся обширным изменениям в целях оптимизации — mpegEnc. Эта про-
270 Часть I. Основы HTML

грамма считается эталоном качества для высших битрейтов. Из кодировщи-

ков этой группы достойны также упоминания BladeEnc, Cdex и SoundLimit.
Выбор кодировщика в конечном итоге определяется требованиями к качест-
ву и времени кодирования. Для большинства любителей музыки среднего
качества вполне достаточно возможностей кодировщика AudioCatalyst 1.5.
Он обеспечивает наивысшую скорость кодирования и при этом дает вполне
удовлетворительное качество звучания. Для обеспечения высшего качества
придется прибегнуть к большим битрейтам и воспользоваться кодировщи-
ками типа BladeEnc или mpegEnc. Из кодировщиков от Fraunhofer IIS, кро-
ме популярных программ МРЗ Producer и МРЗ Compressor, рекомендуется
опробовать их последнюю разработку — программу AudioActive.
Информацию о программном обеспечении для работы со звуковыми файла-
ми можно получить на сайтах:
[Link] [Link]
[Link] [Link]
[Link] [Link]
[Link] [Link]
[Link] [Link]

Выбор параметров кодирования

Значительное количество встречающихся в сети Интернет файлов МРЗ
имеют частоту оцифровки 44,1 кГц, битрейт 128 Кбит/с и режим стерео.
Считается, что такие параметры звуковых файлов обеспечивают качество,
сопоставимое с аудио CD. На эти параметры и следует ориентироваться при
подготовке звуковых файлов для дальнейшего прослушивания на аппаратуре
среднего класса.

Примечание
На самом деле звучание файлов МРЗ становится невозможно отличить от ау-
дио CD только на битрейтах 256 Кбит/с и выше, что подтверждено профессио-
нальными прослушивателями, нанятыми в свое время институтом Fraunhofer
IIS. Однако использование битрейта 128 Кбит/с вместо 256 Кбит/с позволяет в
два раза уменьшить размер файлов, что играет значительную роль при пере-
даче по сети. При этом искажения сигнала можно ощутить только на высоко-
классной аппаратуре и то не на всякой фонограмме. Учитывая эти особенности
принято считать, что 128 Кбит/с обеспечивает качество аудио CD.

При кодировании можно поступиться качеством и выиграть в размере полу-

чаемых файлов (в зависимости от предназначения звуковых файлов). Для
выбора параметров кодирования можно рекомендовать обратиться к табл. 7.6,
по которой в зависимости от требуемого качества звука можно выбрать
Глава 7. Звук 271

нужные параметры кодирования (важнейшим параметром для кодировщика

является значение битрейта).

Таблица 7.6. Приблизительные характеристики качества звука

для различных режимов

Качество звука Частотный режим Битрейт, Степень

диапазон, кГц Кбит/с сжатия

Телефонная линия 2,5 моно 8 96:1

Лучше, чем LW-радио 4,5 моно 16 48:1
Лучше, чем АМ-радио 7,5 моно 32 24:1
FM-радио 11 стерео 56-64 26-24:1
Почти CD-качество 15 стерео 96 16:1
CD- качество 15 стерео 112-128 14-12:1

Заметим, что процесс кодирования достаточно длителен. Так, например,

кодирование 4 минут музыки на Pentium-200 ММХ программой МРЗ
Producer в режиме HQ с битрейтом 128 Кбит/с занимает примерно 12 минут
процессорного времени в отсутствие других задач.

Переносные плейеры звуковых файлов МРЗ

Прочитав о возможностях хранения звука в формате МРЗ, у проницатель-
ного читателя должен появиться вопрос, не пора ли начать выпускать пере-
носные устройства проигрывания (наподобие популярных уже на протя-
жении двух десятилетий аудиоплейеров). Спешим вас обрадовать, такие
устройства уже существуют! Одни устройства предназначены для прослуши-
вания файлов "на улице", другие же -- для установки в автомобиле. Их
можно разделить по принципу хранения данных — флэш-память, жесткие
диски PC-card type I и II, а также способу расшифровки файлов — специ-
альный процессор, предназначенный только для этих целей, или любой дос-
таточно мощный RISC-процессор с низким энергопотреблением.
Одним из первых переносных плейеров является МРМап, точной копией ко-
торого является плейер MPStation ([Link] фирмы DigitalCast.
Компания Z Company (которой, кстати, принадлежит сайт [Link])
уже начала продажу в США плейеров МРМап ([Link] ко-
торые производятся корейской фирмой Saehan Information Systems.
Плейер МРМап имеет размер с пачку сигарет (91x70x16,5 мм), весит всего
65 г (без батареек), не содержит движущихся частей и выпускается в двух
вариантах. Модель с 32 Мб флэш-памяти может вместить до 30 минут запи-
си, а модель с 64 Мб, соответственно, — один час. Питание осуществляется
272 Часть I. Основы HTML

от двух аккумуляторных батарей напряжением 1,2 В, емкости которых хва-

тает на 9 часов звучания. Плейер может устанавливаться в специальное уст-
ройство (Docking Station), оборудованное зарядным устройством и подклю-
чаться к компьютеру через стандартный параллельный порт.
Один из крупнейших производителей аппаратуры для персональных ком-
пьютеров — компания Diamond Multimedia Systems выпустила свой порта-
тивный цифровой музыкальный плейер Rio РМРЗОО — первое устройство от
крупной фирмы, способное воспроизводить записи, загруженные из Интер-
нета. Плейер также имеет небольшие размеры (89x63x16 мм), весит всего
70 г. Данная модель имеет флэш-память емкостью 32 Мб с возможностью
увеличения. Может подключаться к компьютеру через параллельный порт.
Время заполнения флэш-карты не превышает 6 мин. Емкости батареек хва-
тает на 12 часов непрерывного прослушивания.
Вице-президент компании Diamond Multimedia Systems по корпоративному
маркетингу Кен Вирт (Ken Wirt) считает, что этот продукт станет очень по-
пулярным. Компания планирует в ближайшее время довести объем произ-
водства до 10 тыс. штук в неделю. Это устройство размером меньше плейера
Walkman обещает произвести переворот в музыкальной индустрии и при-
близить эру цифрового распространения записей, предоставив больше воз-
можностей независимым музыкальным группам.
Видимо в ближайшее время произойдет резкий рост количества компаний,
производящих подобную технику. В частности, компания Samsung объявила
о завершении разработки своего плейера с названием "Yepp", выпускаемого
в трех вариантах (от простого к сложному). Отличительными характеристика-
ми этого плейера является наличие встроенного радиоприемника FM-
диапазона с цифровой настройкой, а также возможность записи голоса, т. е.
это устройство может использоваться в качестве диктофона. Для записи
файлов формата МРЗ предлагается отдельное устройство. Сведения о этих
разработках можно получить на специальном сайте [Link]
Еще один переносной плейер — Clikman. Помимо основных функций в это
устройство встроили органайзер для записи телефонов, расписания и т, д.
Управление устройством осуществляется как при помощи встроенной циф-
ровой клавиатуры, так и голосовыми командами. Для хранения всех данных
используются диски Clik! от накопителей ZIP-Iomega емкостью 40 Мб. Все
перечисленные возможности потребовали усложнения устройства, в резуль-
тате его размеры и вес несколько превышают соответствующие параметры
аналогичных устройств (вес составляет почти 200 г). Ознакомиться с новин-
кой более подробно можно непосредственно на сайте компании-произво-
дителя: Varo Vision Co ([Link]
Однако, технологии использования формата МРЗ, по крайней мере, для
крупной музыкальной индустрии свойственен один существенный недоста-
ток, а именно, отсутствие средств защиты от копирования. Каждый желаю-
Глава 7. Звук 273

щий может распространять в Интернете любую преобразованную в этот

формат песню: чтобы из одной копии сделать миллион, достаточно нажать
на несколько клавиш. Это не нравится Американской ассоциации индуст-
рии звукозаписи (RIAA — Recording Industry Association of America), пред-
ставляющей около 90% этого бизнеса ([Link] Старший ис-
полнительный вице-президент и генеральный юрисконсульт RIAA Кэри
Шерман (Сагу Sherman) считает, что, бесплатно распространяя пиратские
записи, новое устройство способно полностью разрушить индустрию.
Сейчас большая часть музыкальных записей МРЗ в Интернете — это пират-
ские копии. RIAA называет эту разработку шагом не вперед, а назад.
Согласно заявлению ее представителей, Ассоциация видит очень мало ле-
гальных применений МРЗ по сравнению с множеством вариантов пират-
ского использования. Компания также рассматривает возможность запрета
импорта устройств типа МРМап в США.
Встроить в плейер технологию флэш-памяти легко могли и другие компа-
нии, не менее смышленые, чем Diamond. Но они ожидали появления тех-
нологии защиты содержимого. С выпуском плейера Rio ситуация измени-
лась. Почему Sony должна ждать, если Diamond уже делает деньги? Эти слова
Кэри Шермана оказались пророческими. Боясь отстать, Sony продемонст-
рировала на выставке Comdex прототипы подобных изделий. Это вызовет
эффект домино, вы не успеете оглянуться, как артисты останутся абсолютно
беззащитными. Опасения такого рода не беспочвенны. Интернет способен
коренным образом изменить соотношение сил в музыкальной индустрии,
что уже произошло в информационной технологии в целом.
Споры о нарушении авторских прав при использовании цифровых плейеров
дошли до суда. В результате эти электронные устройства признаны амери-
канским судом не относящимися к записывающим устройствам и потому не
нарушающими авторские права. Суд Лос-Анджелеса в октябре 1998 г. раз-
решил производство и продажу устройства Rio и отказал истцу — Амери-
канской ассоциации индустрии звукозаписи в требовании к производителю
прибора, фирме Diamond Multimedia, отчислять им проценты с продаж за
"копирование музыкального материала". По оценке Роберта Кона, прези-
дента интернетовского сайта GoodNoise, предлагающего посетителям тыся-
чи музыкальных записей, это решение суда "является большой победой мо-
лодых исполнителей, которые получают альтернативный способ распро-
странения своих произведений".
Влияние подобных устройств еще только осознается шоу-бизнесом. Они
могут буквально перевернуть все аспекты работы музыкальной промышлен-
ности, включая практику распространения и лицензирования копий. На-
пример, группы начнут конкурировать в реальном времени, выпуская не
диск за диском, а песенку за песенкой, публикуя особо удачные концертные
исполнения, и т. д.
274 Часть I. Основы HTML

Легко представить себе, например, как трансформируется существующая в

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

Потоковое воспроизведение
Технология сжатия звуковых файлов МРЗ постепенно проникает во все
сферы использования звука. С развитием каналов передачи данных и воз-
можностей сжатия эта технология вышла на уровень потоковой передачи
данных в реальном времени, где до сих пор безраздельно господствовала
технология RealAudio. Компания NuIIsoft ([Link] создатель
знаменитого плейера Winamp теперь, кроме продвижения самого плейера,
активно занимается развитием и пропагандой технологии ShoutCast, предна-
значенной для потоковой передачи аудиоданных в формате МРЗ. Единст-
венное, что нужно обычному пользователю для того, чтобы послушать сете-
вую МРЗ-станцию, или открыть собственную, это сам плейер Winamp. По
адресу [Link] можно найти адреса более чем 300 серве-
ров, вещающих в формате МРЗ, и список десяти лучших из них.

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

Популярность и широкое распространение технологий МРЗ вызвали бурный
рост числа разработок в области сжатия звука. Стали появляться новые
стандарты и форматы хранения звука, которые в будущем, возможно, при-
дут на смену существующим. В последующих разделах кратко остановимся
на современных достижениях в этой области.
Наряду с широко известным на сегодняшний день форматом МРЗ сравни-
тельно недавно появился формат VQF, имеющий более высокую степень
сжатия и качество воспроизведения.
Формат VQF основывается на технологии TwinVQ (Transform-domain Weighted
Interleave Vector Quantization — векторное квантование с трансформными
доменами и взвешенным чередованием), разработанной в Японии в ла-
боратории NTT Human Interface Laboratories ([Link]
/index_e.html). Патент на использование этого формата принадлежит фирме
NTT, однако основное программное обеспечение для работы с этим форма-
том предлагает фирма Yamaha. Компания Yamaha предлагает, пожалуй,
лучшее программное обеспечение для создания и воспроизведения фай-
лов формата VQF под маркой SoundVQ ([Link]
Глава 7, Звук 275

/SoundVQ/). При установке плейера одновременно инсталлируются под-

ключаемые модули для воспроизведения файлов VQF в браузеры Netscape и
Internet Explorer.
Существует также и программное обеспечение от компании разработчика
технологии TwinVQ ([Link]
Этот формат по использованию идей сжатия весьма похож на МРЗ. Приве-
дем их сравнительные характеристики.
VQF-файлы примерно на 30—35% меньше, чем МРЗ, при одинаковом каче-
стве звука. Потоку 128 Кбит/с у файлов МРЗ соответствует поток 80 Кбит/с
у файлов VQF. У этих достоинств есть и обратная сторона. При декодирова-
нии загрузка процессора также примерно на 30% выше, чем при декоди-
ровании МРЗ. Это определяет повышенные требования к компьютеру, на
котором планируется проигрывать такие файлы. Для качественного воспро-
изведения минимальным требованием является процессор Pentium-90, ре-
комендуется Pentium-200 MMX. Для кодирования минимальным требовани-
ем является компьютер с процессором Pentium-66. Высокая степень сжатия
требует значительных временных затрат на кодирование файлов в формате
VQF. Так кодирование 4 минут музыки на Pentium-200 MMX занимает при-
мерно 20 минут процессорного времени. Это значительно больше, чем при
кодировании файлов МРЗ.
Тесты показывают превосходство VQF по всем параметрам на нижних час-
тотах и гораздо меньшее искажение формы сигнала с большим динамиче-
ским диапазоном (реальная музыка). Однако по завалу верхних частот зву-
кового спектра VQF на 2—3 дБ уступает МРЗ на частотах выше 15 кГц. Это
впрочем, легко компенсируется настройкой эквалайзера плейера, что объек-
тивно ставит VQF на ступень выше по качеству звука по сравнению с МРЗ,
но субъективное восприятие различных композиций формата VQF дало
старт затяжной полемике между приверженцами хорошо проверенного ста-
рого (МРЗ) и новинок (формата VQF и формата ААС, о котором пойдет
речь далее). Узкопрофессиональные споры не мешают сделать широкой ин-
тернетовской общественности выбор в пользу нового формата. Наиболее
распространенное мнение сейчас можно сформулировать примерно так:
"Если и есть какие-то различия, то нужно быть профессиональным музы-
кантом, чтобы их заметить".
На текущий момент в сети Интернет можно найти довольно много музы-
кальных произведений в формате VQF, однако их количество и степень по-
пулярности значительно уступают МРЗ. Также значительно меньше сущест-
вует программ-плейеров и кодеров.
Для проигрывания файлов можно рекомендовать программу K-Jofol. Появи-
лись также подключаемые модули для Winamp, проигрывающие файлы VQF
(этот модуль использует декодер компании Yamaha).
Программа K-Jofol версии 0.51 занимает 1,4 Мб (как раз одна дискетка).
Позволяет воспроизводить файлы форматов VQF, ААС, МРЗ и др. Дает воз-
276 Часть I. Основы HTML

можность декодировать файлы в формат WAV. На сегодняшний день счита-

ется самым быстрым плейером, использующим свои собственные декодеры
для всех форматов.
Программе характерен оригинальный дизайн. Уже при инсталляции можно
заметить (рис. 7.27), что авторы попытались уйти от традиционных прямо-
угольных окон, придав им вычурные формы (рис. 7.28, 7.29). На первых по-
рах немного непривычно, однако довольно быстро удается приспособиться.
Возможности и методы работы с программой во многом аналогичны другим
плейерам.

Рис. 7.27. Окно инсталлятора

программы K-Jofol

Рис. 7.28. Основное окно программы K-Jofol

Глава 7. Звук 277

Рис. 7.29. Список проигрываемых файлов

программы K-Jofol

Информацию о формате VQF можно полу-

чить с официального сайта [Link]
О программе K-Jofol можно узнать на сайте
[Link] Найти иную информацию
в Интернете, а также файлы в этом формате,
можно с помощью любой поисковой систе-
мы, указав для поиска слово "vqf. О быст-
ром росте популярности этого формата сви-
детельствует следующий факт. Если в сен-
тябре 1998 г. запрос по слову "vqf поисковой системе AltaVista давал всего
20 ссылок, то в начале 1999 г. по такому запросу выдавалось уже несколько
тысяч ссылок.

с Примечание
Популярность формата VQF пока значительно уступает МРЗ. Рынок программ-
ного обеспечения работы с такими звуковыми файлами еще не вполне устоял-
ся. Частенько появляются сообщения о весьма неустойчивой работе многих
программ-проигрывателей этого формата. Это относится и к подключаемым
модулям программы Winamp (попадаются просто неработоспособные версии),
так и программе K-Jofol. Если у вас воспроизведение файлов такого формата
идет с явными искажениями (даже на достаточно мощной машине), попробуйте
прежде всего обновить версию программы-проигрывателя или используйте
другую программу. Только во вторую очередь следует грешить на сам звуковой
файл.

Звуковые файлы формата ААС

Формат ААС (Advanced Audio Coding) представляет еще один из числа по-
явившихся сравнительно форматов кодирования звуковой информации,
в котором осуществляется сжатие с потерями. На сегодняшний момент ААС
представляет собой лучшую систему сжатия высококачественного звука. Это
последний из стандартов MPEG-2. Перевести ААС можно как "Продвинутое
Аудио Кодирование", название, которое появилось из-за исключительно
высокого качества звучания и очень сильной системы сжатия.
На данный момент различают четыре разновидности формата ААС:
О HomeboyAAC
О АТ&Та2ЬААС
278 Часть I. Основы HTML

О Liquifier Pro AAC

П Astrid/Quartex AAC
По всем объективным параметрам последние две модификации ААС пре-
восходят как МРЗ, так и VQF.
Все четыре разновидности несовместимы между собой и используют свои
собственные программы кодирования и воспроизведения.
Далее мы кратко их охарактеризуем.

HomeboyAAC
Это первая версия ААС, кодер для которой стал общедоступен. Ее можно
охарактеризовать одним словом — отвратительно. Крайне корявые и мед-
ленные кодеры в сочетании с отчетливо слышимыми искажениями сыграли
свою роль в отталкивании широких масс от этого формата. Единственными
его плюсами является достижение качества МРЗ 128 Кбит/с на более низких
битрейтах и наличие приятного и быстрого плейера BitAAC. Сейчас этот
формат уже практически не используется и даже ссылки на программное
обеспечение для него почти исчезли со страниц Интернета. Следует иметь в
виду, что большинство программ, распространяемых через Интернет под
видом кодеров ААС, являются кодерами именно этого формата. Во времена
появления и развития этой ветви ААС уже существовал формат VQF.

AT&T а2ЬААС
Известная компания AT&T не могла остаться в стороне от технологий но-
вых систем сжатия аудиоданных. При фирме было создано специальное
подразделение, занимающееся созданием программ и раскруткой нового
формата, который получил название а2Ь. Строго говоря, этот формат прак-
тически полностью следует тем же самым принципам компрессии, что и
предыдущий. Однако фирмой были предприняты значительные усилия по
повышению качества звучания (в результате чего снизилась степень сжатия)
и внесению новых элементов в формат. Составной частью формата а2Ь стала
возможность включения изображения исполнителя и текста песни внутрь
аудиофайла. Также была разработана технология получения самовоспроиз-
водящихся песен (исходную композицию можно преобразовать в .ехе-файл,
включающий в себя все необходимые для воспроизведения, что увеличивало
файл всего примерно на 170 Кб). Для файлов этого формата существует
удобный и бесплатный плейер с поддержкой многих дополнительных воз-
можностей. Однако, несмотря на мощнейшую рекламную компанию и на
очевидные достоинства формата, он не нашел широкого применения по од-
ной простой причине — отсутствию общедоступного кодера! Мало того, эта
уважаемая фирма пыталась запатентовать и запретить к использованию все
составные части формата. К счастью, это у нее не вышло, — патент был по-
Глава 7. Звук £79

лучен только на собственные нововведения. Сейчас уже рекламный пыл не-

много угас и со своего сайта компания предлагает приобрести уже готовые
файлы или бесплатно скачать несколько композиций.
Формат по степени сжатия превосходит МРЗ, но на 15—20% уступает VQF,
РАС, Astrid/Quartex ААС и Liquifier Pro AAC.
Качество звучания a2b 96 Кбит/с сравнимо с качеством МРЗ 128 Кбит/с
и VQF 96 Кбит/с, но уступает Liquifier Pro AAC 96, Astrid/Quartex AAC 96
и РАС 96.
Дополнительную информацию можно получить в Интернете по адресу
[Link]

Liquifier Pro AAC

Естественно компания AT&T не могла остаться одинокой на рынке борьбы
за первенство в области высококачественной компрессии звука. Через неко-
торое время фирма Liquid Audio нанесла если не сокрушительный, то очень
опасный удар по честолюбивым замыслам остальных. Предложенная ей вер-
сия формата ААС наиболее четко следовала всем техническим тонкостям и
в результате появилась лучшая на сегодняшний день система сжатия звука.
Она по степени сжатия и качеству звучания превосходит все существующие
в данный момент форматы. И хотя превосходство по сжатию над VQF и
Astrid/Quartex AAC незначительное — минимальный битрейт, заслуживаю-
щий внимания, все те же 96 Кбит/с, звук превосходит все ожидания!
К сожалению, политика компании Liquid Audio на данный момент слабо
отличается от политики AT&T — есть отличный плейер, но нет общедос-
тупного кодера (существовала демо-версия, но она работала только в он-
лайне и через несколько дней неожиданно самоуничтожалась, а все закоди-
рованные ей файлы становились неработоспособными).
Подводя итоги, заметим, что этот формат по всем параметрам превосходит
все остальные и объективно является лучшим. Среди самых последних но-
востей отметим появление звуковых файлов в этом формате (они имеют
расширение LQT), причем для их воспроизведения можно воспользоваться
плейером компании Liquid Audio или же установить plugin для программы
Winamp (in_lqt.dll), который на самом деле пользуется все тем же, несколько
"исправленным" плейером, перенаправляя звук в программу Winamp.
Дополнительную информацию можно получить в Интернете по адресу
[Link]

Astrid/Quartex ААС
В октябре 1998 г. в "спор гигантов" вступило частное лицо. Никому не из-
вестный и скромный программист создал, на основе изданных фирмой NTT
280 Часть I. Основы HTML

в мае исходников МР4, свою собственную систему компрессии! Им было

предложено протестировать кодер, для чего он был выложен в Интернете по
адресу [Link]
Уже через несколько дней после выхода новой версии популярного плейера
K-Jofol, для которого автор формата Astrid/Quartex AAC написал декоди-
рующий модуль, появились восторженные отклики. Кодер, обладающий не-
притязательным интерфейсом командной строки, по сжатию и качеству зву-
чания превосходил кодировщики от AT&T ААС и YAMAHA VQF. При этом
качество звука практически не уступало хваленому Liquifier Pro AAC. Почти
одновременно появились графические интерфейсы (front-end) для нового
кодировщика и масса хвалебных отзывов в разных источниках. При всех
видимых недостатках сегодняшней версии 0.2 (поддержка только WAV
44 кГц/16 бит РСМ и степени сжатия только 64, 96 и 128 Кбит/с), она уже
широко применяется (есть целые ftp-сайты с музыкой в этом формате) и все
с нетерпением ждут новых версий.
По степени сжатия и качеству звучания формат превосходит все остальные,
кроме Liquifier Pro AAC, и является объективно лучшим среди тех, что име-
ют общедоступные кодеры и доступные для распространения в Интернете
звуковые файлы. По сравнению с МРЗ обеспечивается аналогичное качество
при потоке на 30% меньше. Качество Astrid AAC 96 Кбит/с много лучше
качества VQF/96 Кбит/с. Возможно также потоковое воспроизведение.

Звуковые файлы формата РАС

Несколько особняком от остальных систем кодирования стоит формат РАС
(Perceptive Audio Coding). Впервые эта аббревиатура появилась в стенах ла-
боратории Bell Labs/Lucent Technologies (кстати, там же впервые появилось
сокращение ААС) в самом конце 1997 года. Через некоторое время стали
появляться очень интересные сообщения от других фирм-разработчиков,
которые не могли не заинтриговать интересующегося человека.
Так было заявлено о следующих возможностях:
П достижении качества МРЗ 128 Кбит/с в формате РАС с битрейтом
64 Кбит/с;
О поддержка потокового воспроизведения через Интернет;
П прямое преобразование из Audio-CD в РАС без промежуточных огром-
ных WAV-файлов на диске;
П кодирование в реальном времени на Pentium-166 (даже не ММХ);
П защита от свободного распространения РАС-файлов по Интернету и на
CD-R;
П широкие возможности упорядочения готовых РАС-файлов (плей-листы,
каталоги, описания и т. д.).
Глава 7. Звук 287

В середине лета 1998 г. известная фирма Celestial Technologies выпустила

первую и до сих пор единственную программу для кодирования и воспроиз-
ведения звука в формате РАС — "Audio Library 1.0". Хотя программа бес-
платно работает только 15 дней и позволяет в одном каталоге хранить не
более 5-ти композиций, уже можно сделать кое-какие выводы. Первое, что
бросается в глаза, это отсутствие, как таковых, файлов в формате РАС. Во
время своей работы программа создает базу данных, состоящую из 8 файлов
с расширением TPS, в отдельном каталоге, причем для воспроизведения не-
обходимы минимум 7 из них ([Link] можно выкинуть) Увеличе-
ние количества композиций не меняет количества файлов — при добавле-
нии новой песни в базу просто увеличивается размер файла [Link].
И во всем остальном программа удивляет. Хотя пока на битрейте 64 Кбит/с
звук уступает МРЗ 128 Кбит/с, качество звучания РАС 128 Кбит/с поражает
воображение. При этом кодер обеспечивает обещанную скорость кодирования.
Большего сказать о данном формате пока не представляется возможным.
Нужно подождать новых версий кодеров.
Новую информацию можно получить по адресу [Link]

Новый формат хранения звука МР4

Работа над новыми стандартами в области хранения звука не стоит на месте.
И вот, наконец, в ноябре 1998 г. все заинтересованные стороны пришли к
согласию об окончательной спецификации нового формата сжатия звука
МР4. Как и ожидалось, в основе нового формата лежат VQF и ААС.
Появление нового стандарта, однако, не предполагает быстрого появления
программ, работающих в этом формате. По самым оптимистичным про-
гнозам первые кодеры и плейеры появятся к началу-середине лета 1999 г.,
а более или менее продвинутые, с оптимизацией скоростей кодирования
и воспроизведения, программы следует ожидать не ранее 2000-го года. Сле-
довательно, в ближайшее время всем придется пользоваться уже сущест-
вующими форматами.
Первые разработки по новому формату были представлены в январе 1999 г.
компанией Global Music Outlet. Пока рано делать какие-либо выводы о воз-
можностях и перспективах этого формата. Вполне может случиться, что
формат с таким названием останется лишь в виде спецификации, а в реаль-
ной жизни будут появляться и использоваться другие форматы, предложен-
ные отдельными компаниями.
Вызывает некоторое удивление само название формата — МР4 из-за воз-
можной путаницы с MPEG-4, форматом аудио- и видеокомпрессии, приня-
тым Международной организацией по стандартизации в качестве открытого
стандарта распространения мультимедийной информации. Между обеими
технологиями нет ничего общего.
282 Часть I. Основы HTML

Новости о развитии ситуации можно узнать на сайте http://

[Link]/. Компания Global Music Outlet обещала, что одной из
первых записей в новом формате будут произведения группы Public Enemy,
которые будут опубликованы на ее Web-сайте ([Link]
Компания также рассчитывает соблазнить "китов" музыкальной индустрии
возможностью формата МР4 записывать звуковые файлы с защитой от не-
лицензионного копирования.

Формат WMA
Компания Microsoft, естественно, не могла обойти вниманием быстро раз-
вивающиеся технологии сжатия звуковых данных. Была разработана собст-
венная технология кодирования звука, быстро получившая распространение.
Формат соответствующих файлов получил название WMA (изначально он
был назван ASF). Быстрому внедрению формата должна способствовать
маркетинговая политика компании Microsoft, которая включила поддержку
нового формата в свой проигрыватель (Media Player), который можно сво-
бодно получить с сайта компании. Также в свободном доступе кодировщик
файлов формата WMA.
Поддержка воспроизведения файлов WMA включена в программу Winamp
с версии 2.20. Эту же программу можно использовать и в качестве кодиров-
щика.
 ГЛАВА 8

Разработка HTML-страниц
при помощи текстового
процессора Microsoft Word
Создание и изменение HTML-страниц может выполняться с помощью раз-
личных средств. В эпоху зарождения и развития Web большинство авторов
использовало для этих целей обычные текстовые редакторы. При этом тэги
языка HTML добавлялись вручную в ходе редактирования документа. Такой
способ вполне допустим и сегодня, однако требует хорошего знания самого
языка HTML и значительных затрат времени на набивку и исправление тэ-
гов. Со временем появились специальные средства редактирования HTML-
документов, сделавшие работу над документами проще и эффективнее.
Редакторы HTML-документов обычно принято разбивать на две группы.
К первой группе относятся так называемые редакторы тэгов, которые пре-
доставляют возможность записывать коды непосредственно на языке HTML
и имеют специальные дополнительные возможности для облегчения про-
цесса включения тэгов в создаваемый документ. Современные редакторы
тэгов имеют дополнительные инструменты для генерации элементов HTML.
К ним относятся программы-мастера, шаблоны и иные средства, упрощаю-
щие работу с типичными HTML-элементами типа списков, таблиц, форм и
фреймов. Некоторые редакторы проверяют синтаксис записи тэгов, что по-
зволяет быстрее находить ошибки форматирования HTML-документов. Од-
ним из наиболее популярных редакторов этой группы является программа
HotDog Web Editor, разработанная компанией Sausage Software. Этот редак-
тор используется разработчиками на протяжении уже многих лет и сильно
менялся в процессе своего развития.
К другой группе относятся так называемые редакторы WYSIWYG (What You
See Is What You Get — что видишь, то и получаешь), типичными представи-
телями которой являются Netscape Composer (редактор, входящий в состав
пакета Netscape Communicator) и Microsoft FrontPage. Редакторы такого рода
позволяют изменять внешний вид и компоновку страницы визуально, не
вдаваясь в подробности реализации в виде тэгов. При этом результирующий
HTML-код документа создается автоматически. При работе с этими редак-
 284
— - - - - - __ _ Часть I. Основы HTML

торами разработчик может вообще не представлять правил записи ТЭГОЕ

HTML и целиком положиться на возможности соответствующего редактора
венной оаСбТоОР°НЫ "*** Редакт°Ры ^гут не обеспечивать гибкости, свойст
Р 0 В Н е ТЭГ
— о-ми раз-
На современном этапе деление редакторов на две группы становится все
воТожноГ6 УСЛ°ВНГ ' РеДаКТ°РЫ ТЭð ВСС б°Лее Сближаются по своим
возможностям и удобству работы к редакторам WYSIWYG а последние
В ОЧ е Р
чат
fibьТсе о ^еЬ' CT3H
все бболее °mэлементы.
сложные ** *""* М °ЩНЫМИ
Скорее
И
™бкИМИ
всего, ' позволяябудущем
в ближайшем B^
деление редакторов на группы исчезнет.
Одним из средств создания и редактирования HTML-документов является
^ТпоГпипеТ б""6™
га. В принципе любая
MiCr SOft ОШСе
' Н°СЯЩИЙ
версия °этой программы, н-вание текстовый
как обычный Srosoft
редактор, может служить в качестве HTML-редактора (о Р™чиях в во
можностях версий пакета говорится в конце этой главы). Удобство его ис-
пользования для редактирования HTML-документов определяется широким
распространением Microsoft Word среди пользователей для создания ТчетоВ
писем, документации, анкет и даже брошюр и книг. ОФомн™лГество
людей, использующих в своей повседневной деятельности M°LscT Word°

Создание Web-документов
Удобное и быстрое опубликованш
документов в Интернете и/или
внутренней сети организации.
• Мастер публикаций на Web
из Microsoft Access позволяет
создавать и публиковать
интерактивные динамические
страницы баз данных.
• Создание мультимедийных Web-
страниц вез изучения языка HTML
• Вставка данных Web в таблицы
с помощью запросов.

Рис. 8.1. Реклама возможностей Microsoft Office 97 при

при е
его инсталляции
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 265

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

Microsoft Word 97 добавлены специальные возможности для работы с HTML-
документами, которые переводят его в разряд мощных средств создания
страничек для Интернета (рис. 8.1).
В данной главе будут рассмотрены основные возможности текстового про-
цессора Microsoft Word 97, используемые при редактировании HTML-до-
кументов.

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

Создание маркированных
и нумерованных списков на Web-страницах
Так же, как и в документах Word, в Web-страницах можно создавать списки.
Списки в HTML могут быть маркированные (Bulleted) и нумерованные
(Numbered). В маркированных списках могут употребляться стандартные
маркеры, реализация вида которых возлагается на браузер, а также графиче-
ские изображения, загружаемые из отдельного файла. Для нумерованных
списков могут быть использованы арабские или римские цифры, а также
латинские буквы. Более подробная информация о правилах организации
списков приводится в соответствующей главе.
Создание списков выполняется точно так же, как и в обычных документах
Word. Выделите текст, который должен быть представлен в виде списка,
и выберите пункт Список из меню Формат. Будет выдана панель Список,
содержащая две вкладки — Маркированный (рис. 8.2) и Нумерованный (рис. 8.3).
286 Часть I. Основы HTML

Можно также воспользоваться кнопками панели инструментов Нумерация

ЦЦ или Маркеры Щ

Рис. 8.2. Выбор вида маркированного Рис. 8.3. Выбор вида нумерованного
списка списка

При создании маркированного списка можно выбрать один из трех стан-

дартных маркеров (последние три элемента первой строки, изображенные
на рис. 8.2) или одно из предлагаемых графических изображений. Восполь-
зовавшись кнопкой Другой можно в качестве маркера выбрать любой суще-
ствующий графический файл. В зависимости от выбора типа маркеров спи-
сок в HTML будет реализован по-разному. Если выбран один из трех стан-
дартных маркеров, то список будет сформирован с помощью тэга <иь> и
элементов списка <ы>. При этом будет генерироваться одна из следующих
строк кода HTML:
<UL> — для первого стандартного маркера (маленький черный кружок)
<UL TYPE="ciRCLE"> — для второго маркера (квадратик)
<UL TYPE= "SQUARE"> — для третьего маркера (закрашенный квадратик)
Приведем пример. Пусть был создан следующий текст:
Первый элемент списка
Второй элемент списка
Третий элемент списка

При разметке этого текста как списка и выборе второго стандартного мар-
кера будет сгенерирован следующий фрагмент кода HTML:
<UL TYPE="CIRCLE"XFONT FACE="Times New Roman" SIZE=2>
<Ы>Первый элемент списка </LI>
<1Я>Второй элемент списка </LI>
Глава В. Разработка HTML-страниц при помощи Microsoft Word _ 287

<Ы>Третий элемент списка</ЫХ/иь>

</FONT>

Если в качестве маркера выбирается графическое изображение, то список,

по существу, не формируется, то есть специальный тэг списка <оъ> исполь-
зоваться не будет. Здесь каждый элемент списка будет выделен в отдельный
абзац тэгом <р> и предварен ссылкой на встроенное изображение. Само
графическое изображение маркера будет сохранено в том же каталоге, что и
HTML-файл. Для приведенного примера при выборе одного из графических
маркеров будет сгенерирован следующий код:
<DIR>
<PXIMG SRC="[Link]" WIDTH=13 HEIGHT=13><FONT SIZE=5> </FONT>
<FONT FACE="Times New Roman" 31гЕ=5>Первый элемент списка </P> </FONT>
<PXIMG SRC="[Link]" WIDTH=13 HEIGHT=13><FONT SIZE=5> </FONT>
<FONT FACE="Times New Roman" 31гЕ=5>Второй элемент списка </Р> </FONT>
<PXIMG SRC="[Link]" WIDTH=13 HEIGHT=13XFONT SIZE=5> </FONT>
<FONT FACE="Times New Roman" 31гЕ=5>Третий элемент списка</Р>

</FONT>

Пмечание
Различие в использовании стандартных и графических маркеров проявляется
не только в реализации, но и возможности отмены списка. Если были выбраны
стандартные маркеры, то список можно отменить так же, как это делается при
работе с документом Word. Достаточно выделить список и выбрать режим Нет
в панели Список или же нажать соответствующую кнопку на панели инстру-
ментов. Если же были выбраны графические маркеры, то отменить список не
удается. Необходимо удалить все графические маркеры по отдельности, вы-
деляя их и нажимая клавишу <Delete>.

Перейдем к рассмотрению нумерованных списков. Нумерация списков на

Web-страницах почти не отличается от нумерации документов Word. Отли-
чие состоит в том, что для Web-страниц невозможна автоматическая нуме-
рация структурных списков и заголовков.
В зависимости от выбранного формата нумерации списка будут генериро-
ваться следующие коды:
<оь> — для нумерации арабскими цифрами
<OL TYPE="I"> — большими римскими цифрами
<OL TYpE="i"> — маленькими римскими цифрами
<OL TYPE="A"> — прописными латинскими буквами
<оь турЕ="а"> — строчными латинскими буквами
288 Часть I. Основы HTML

Например:
<OL TYPE="A">
<FONT FACE="Times New Roman" SIZE=4>
<1Д>Первый элемент списка</Ы>
<Ы>Второй элемент списка</Ы>
<Ы>Третий элемент списка</Ы></ОЬ>
</FONT>

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

Хотя автоматическая нумерация многоуровневых списков не предусмотрена,

списку можно придать многоуровневый вид, изменяя размер отступа и ис-
пользуя различные формы нумерации. Для этого нужно выполнить следую-
щие действия:
1. Выделите текст, являющийся верхним уровнем списка.
2. Выберите нужный формат нумерации из вкладки Нумерованный панели
Список.
3. Сдвиньте текст, принадлежащий следующему уровню списка, установив
курсор в начале каждого абзаца или строки и нажав клавишу <ТаЬ>. Хотя
табуляция не применяется в HTML, в редакторе Word символы табуля-
ции списка будут преобразованы в отступы.
4. Выберите формат нумерации для очередного уровня.
5. Для каждого уровня в списке повторите шаги 3—4.

( Примечание J
Несмотря на то, что приведенная рекомендация по созданию многоуровневых
списков дана разработчиками Word 97, она не всегда работает корректно. Ино-
гда для того, чтобы добиться желаемого результата, приходится доводить
вручную получаемый HTML-код.

Вставка горизонтальной линии

в Web-страницу
Горизонтальные линии часто используются на Web-страницах для разделе-
ния текста на части. Для того чтобы вставить в документ горизонтальную
линию, нужно выполнить команду Горизонтальная линия в меню Вставка.
Появится панель, показанная на рис. 8.4, содержащая список возможных
вариантов горизонтальных линий. Если приведенного списка покажется не-
достаточно, то можно нажать кнопку Другая и выбрать другой вид линии.
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 289

[Горизонтальная линия

Рис. 8.4. Выбор вида

горизонтальной линии
для HTML-страницы

Все линии, кроме самой верхней в списке, представляют собой обычные

файлы с графическими изображениями. Эти линии будут размещены в Web-
документе как обычные встроенные изображения. Например, если выбрать
самую нижнюю линию, то она будет вставлена в документ с помощью сле-
дующего кода:
<Р ALIGN="CENTER"XIMG SRC="line9 . g i f " WIDTH=623 HEIGHT=llx/P>

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

Параметры горизонтальной линии могут быть изменены, если нажать пра-
вую кнопку мыши и в появившемся меню выбрать пункт Формат автофигу-
ры (Format Autoshape). Можно изменить длину и толщину линии, ее распо-
ложение на странице в горизонтальном направлении. Например:
<HR ALIGN="LEFT" WIDTH="65%" SIZE=7>

Для того чтобы быстро вставить в текст страницы еще одну линию того же
стиля, можно нажать кнопку Горизонтальная линия (Ц на панели инстру-
ментов.

Выбор фона создаваемого документа

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

ЮЗак. 944
290 Часть I. Основы HTML

списка основных или дополнительных цветов или же задать изображение,

которое будет служить фоновым. Для выбора фонового изображения необ-
ходимо нажать кнопку Способы заливки (Fill Effects), при этом появится па-
нель Заливка (Fill Effects) с вкладкой Текстура (Texture), из которой можно
подобрать нужное изображение (рис. 8.6).

•II Ij ш | |
Я :':: : Я; ,":1|ГШ . . .
«Р.,- • . . . . •:•. • И I
• ; И I...>:!. Я . И ; I ; '

Рис. 8.5. Задание

требуемого цвета фона

Рис. 8.6. Выбор текстуры

Кроме стандартных текстур, отображаемых на вкладке Текстура, в качестве

фонового изображения можно использовать любой рисунок. Для этого на-
жмите кнопку Другая текстура и укажите файл, содержащий нужный рисунок.
Если будет определен цвет фона документа, то выбранное значение сохра-
няется в HTML-доку менте в качестве значения параметра BGCOLOR тэга
<BODY>. При задании фонового изображения имя соответствующего файла
графического изображения будет являться значением параметра BACKGROUND.
Приведем примеры обоих вариантов:
<BODY LINK="#OOOOff" VLINK="tt800080" BGCOLOR="#ccffff">
<BODY LINK="#OOOOff" VLINK="#800080" BACKGROUND="[Link]">

Напомним, что фоновые изображения всегда заполняют весь экран браузе-

ра, при этом изображение будет повторяться столько раз, сколько необхо-
димо для заполнения страницы.
При создании Web-страницы фоновое изображение сохраняется в виде от-
дельного файла, например [Link], который помещается в тот же каталог,
что и сама Web-страница.
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 291

Изменение цвета
и форматирование текста Web-страниц
При создании Web-страницы для текста и ссылок можно определить ис-
пользуемые по умолчанию цвета. Для этого следует воспользоваться коман-
дой Цвет текста меню Формат (Format/Text Colors). Появится панель, пока-
занная на рис. 8.7, в которой можно задать цвет текста, цвет ссылок и цвет
ссылок, соответствующий уже посещенным страницам. Зададим для приме-
ра в качестве цвета текста — синий, цвета ссылок — бирюзовый, а цвета
просмотренных ссылок — зеленый. Заданные значения определят парамет-
ры тэга <BODY>:
<BODY TEXT="#OOOOff" LINK="#OOffff" VLINK="#008000">

I Цвета текста Щ
•.-., . ..' '•:.. .-..'.

Авто
1|И
fjlj Синий

1 111 | . ш 1 -1
. '•: | V. .•!
ZZ
Рис. 8.7. Выбор цвета всего текста
для HTML-страницы

Рис. 8.8. Выбор цвета фрагмента

текста для HTML-страницы

Эти параметры задают цвета по умолчанию для всего документа. Если же

необходимо задать цвет для выбранного фрагмента документа, то следует
использовать кнопку Цвет шрифта на панели инструментов или коман-
ду Шрифт меню Формат (рис. 8.8). Если для фрагмента текста будет выбран,
например, красный цвет, то результат такого выбора в HTML-документе
будет отражен так:
<FONT SIZE=2 COLOR="#ffOOOO">3TOT текст будет отображаться
красным цветом</ГОЫТ>

Читатель Web-страницы может задать свои собственные устанавливаемые по

умолчанию цвета в браузере. Чтобы текст и ссылки изображались в выби-
раемых по умолчанию цветах браузера, задайте значение Авто во всех трех
списках панели Цвета текста.
При создании Web-страниц в редакторе Word можно использовать многие
средства форматирования, предназначенные для форматирования докумен-
тов Word. Например, можно присвоить тексту полужирное начертание с по-
292 _ Часть I. Основы HTML

мощью кнопки Полужирный или выбрать стиль Заголовок 1 из списка сти-

лей. Задание элементов форматирования текста определяет вставку соответ-
ствующих тэгов HTML в генерируемый код.
Панель Шрифт, вызываемая из меню Формат, служит также для задания
типа шрифта, его размеров и форматирования выделенных фрагментов текста.
Установка флажков, соответствующих каждому из шести доступных в дан-
ной панели эффектов, приводит к вставке в HTML-код следующих тэгов:
<в> — Полужирный
<i> — Курсив
<и> — Подчеркнутый
<STRIKE> — Зачеркнутый
<SUP> — Верхний индекс
<зив> — Нижний индекс
Эти тэги вставляются в начало выделенного фрагмента текста, а в конце
фрагмента записывается соответствующий закрывающий тэг. Заметим, что
может использоваться любая совокупность перечисленных эффектов, за ис-
ключением двух последних, которые являются взаимоисключающими. Для
полужирного начертания, курсива и подчеркнутого текста на панели инст-
рументов имеются специальные кнопки
Для быстрого перехода к следующему доступному размеру шрифта исполь-
зуйте кнопки Увеличить размер шрифта ИИ и Уменьшить размер шрифта
Дня каждого абзаца в HTML генерируется тэг начала абзаца <р>, а также тэг
конца абзаца </р>. Последний тэг при создании документов вручную обыч-
но опускается. Большинство браузеров абзацы автоматически отделяют пус-
той строкой. Чтобы реализовать переход на новую строку без образования
абзаца, нажмите клавиши <Shift>+<Enter>. В этом случае будет генериро-
ваться тэг перехода на новую строку <BR>.

С Примечание ^
В справочной системе Word 97 "для создания абзацев без интервалов" (именно
так сформулировано) ошибочно предлагается воспользоваться клавишами
<Ctrl>+<Enter>. Напомним, что совокупность клавиш <Ctrl>+<Enter> обычно ис-
пользуется при редактировании документов Word для принудительного пере-
хода на следующую страницу. При преобразовании документов Word в HTML
в этом случае будет лишь создан дополнительный абзац, а при редактировании
Web-документов клавиши <Ctrl>+<Enter> вообще недопустимы.

Форматирование, не поддерживаемое языком HTML или некоторыми сред-

ствами просмотра Web, недоступно в разделе редактирования Web-страниц
редактора Word. В число таких средств входят эффекты форматирования
символов Приподнятый, С тенью и Утопленный, междустрочный интервал,
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 293

поля, межсимвольный интервал, кернинг, параметры обтекания текста и

интервалы между абзацами. Не следует использовать символы табуляции,
так как многие браузеры изображают их как пробелы; вместо них для сдвига
первой строки текста вправо можно использовать отступ.
Для изменения отступа текста используйте кнопки Увеличить отступ Цу и
Уменьшить отступ С точки зрения языка HTML, отступы реализуются
путем обрамления текста парой тэгов <DIR> и </DIR>. Формально данный тэг
определяет начало списка и подразумевает использование тэгов элементов
списка <ы>. Однако здесь тэг <ы> не используется, а тэг <DIR> нужен толь-
ко для организации отступов, которые невозможно задать в HTML естест-
венным образом. Вложенные друг в друга тэги <DIR> подразумевают много-
уровневые списки, причем каждый уровень сдвинут на один отступ по от-
ношению к предыдущему. Например:
<01КХР>Этот текст имеет один отступ</Р>
<DIR>
<Р>Этот текст имеет два отступа</Р>

Примечание ^
Аналогичный подход для создания отступов применяют и другие HTML-редак-
торы. Например, Netscape Composer (так же, как и редактор пакета Netscape
Navigator Gold) для отступов используется аналогичный прием, только в каче-
стве тэга списка применяется <иь>.

Примечание
При увеличении отступа Word часто генерирует сразу два тэга <DIR>, создавая
двойной отступ. Соответственно при уменьшении отступа удаляются два тэга
<DIR>. Иногда генерируется и удаляется по одному тэгу <DIR>. Логику поведе-
ния редактора понять чрезвычайно затруднительно, если вообще возможно. По
всей видимости мы имеем дело с очередной некорректностью работы про-
граммы.

Для изменения выравнивания текста используйте кнопки По левому краю

По центру ЯП и По правому краю Заметим, однако, что текст на
Web-страницах невозможно выровнять по ширине.

( Примечание ^
Невозможность выравнивания текста на Web-страницах по ширине отмечается
в справочной системе Microsoft Word. Действительно, в панели инструментов
Форматирование при работе с HTML-документом нет кнопки выравнивания по
ширине. Это связано с тем, что в спецификации HTML вплоть до версии 3.2 для
параметров выравнивания тэга абзаца <Р> не было выравнивания по ширине.
Однако в настоящее время ведущие браузеры поддерживают эту возможность,
294 Часть I. Основы HTML

реализуемую следующим образом: <р ALIGN=JUSTIFY>. Более того, даже в

Microsoft Word это уже заложено. Если работать с документом Word, в котором
имеется текст, выровненный по ширине, а затем преобразовать его HTML-
документ, то появятся абзацы, имеющие приведенный выше код.

Работа со стилями на Web-страницах

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

И Готовый
а Клавиатура
S Код
а образец
а Определение
а Переменная
а Печатная машинка
Примечание
СЙМ6С.ЯЫ

И Список определений
fi Термин Tunes New Roman
а Узел
..Щитаты

Рис. 8.9. Выбор стиля Разметка HTML

Специальные стили HTML, например Адреса и Н2, непосредственно гене-

рируют соответствующие команды языка HTML; поэтому изменения, вне-
сенные в эти стили, не сохраняются. При внесении изменений во встроен-
ный стиль Word, например Заголовок 1, связанное с этим стилем формати-
рование будет перенесено на соответствующую команду HTML, если такое
форматирование поддерживается HTML.
Допускается создание и изменение собственных стилей. При сохранении
страницы в формате HTML преобразуется только форматирование, поддер-
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 295

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

Непосредственное редактирование
HTML-кода
Microsoft Word 97 рассчитан прежде всего на создание и изменение Web-
страниц в визуальном режиме без явного применения тэгов HTML. Однако
при необходимости на созданную страницу можно вручную вставить собст-
венные коды HTML. Есть два пути решения этой задачи. Во-первых, можно
редактировать HTML-код в режиме просмотра исходных кодов Web-стра-
ницы, а во-вторых, присвоить тексту специальный стиль Разметка HTML.
Перейти в режим просмотра исходных кодов Web-страницы можно, выпол-
нив пункт Источник HTML в меню Вид (рис. 8.10). До того, как выполнить
переход в этот режим, следует выполнить сохранение файла. Если этого не
сделано, то будет выдано предупреждающее сообщение (рис. 8.11). В режи-
ме просмотра исходных кодов Word можно использовать в качестве обыч-
ного текстового редактора, изменяя текст кода HTML. Обратный переход
выполняется кнопкой Закрыть источник HTML. При этом переходе также
выдается предупреждающее сообщение о необходимости сохранения сде-
ланных изменений.

Рис. 8.10. Меню Вид Word 97

с командой Источник HTML

i l . i - . . H.-.rillj'-"

tllpsifl

Рис. 8.11. Запрос подтверждения для сохранения

изменений в HTML-файле

Другой путь состоит в записи необходимых HTML-кодов при работе в ре-

жиме визуального редактирования. При этом не требуется переходить в иной
режим работы. Чтобы указать, что введенный текст является исходным ко-
дом HTML, необходимо пометить его специальным стилем символов Раз-
метка HTML. Этот стиль делает текст скрытым, поэтому, чтобы видеть его,
нужно работать в режиме просмотра непечатаемых символов. Переключение
данного режима осуществляется кнопкой Непечатаемые символы Д;|.
296 Часть I. Основы HTML

Предварительный просмотр Web-страницы

в процессе редактирования
Хотя Word 97 отображает редактируемый HTML-документ практически в
таком же виде, как он в дальнейшем будет отображаться браузерами, всегда
следует выполнять предварительный просмотр созданной страницы в пред-
почитаемом вами браузере. Это позволит вам убедиться в том, что и при
размещении документа на Web-сервере он будет выглядеть соответствую-
щим образом.
Для предварительного просмотра Web-страницы в процессе ее редактирова-
ния необходимо установить на компьютере браузер. Для просмотра следует
нажать кнопку Просмотр Web-страницы Д на панели инструментов. Для
возврата в Word следует выбрать значок Word на панели задач или закрыть
браузер.

Таблицы на Web-страницах
Работа с таблицами на Web-страницах не отличается от работы с таблицами
в документах Word. Для создания таблицы можно использовать два способа:
вставить таблицу, воспользовавшись командой Добавить таблицу из меню
Таблица (для этого случая необходимо задать размеры создаваемой таблицы)
или путем преобразования существующего текста с разделителями (символ
абзаца, символ табуляции, точка с запятой или иной символ) в таблицу
(пункт Преобразовать в таблицу из меню Таблица). Для редактирования
структуры таблицы используется команда Нарисовать таблицу. При этом
возникнет панель инструментов Таблицы и границы (рис. 8.12), содержащая
кнопки для изменения параметров таблицы.

Рис. 8.12. Изменение параметров таблицы с помощью панели инструментов

Таблицы и границы
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 297

Например, если добавить таблицу размером 4x2, то Word создаст следующий

код:
<TABLE CELLSPACING=0 BORDER=0 CELLPADDING=V WIDTH=638>
<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>
<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>
</TR>
<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>
<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>
</TR>
<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>
<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>
</TR>
<TRXTD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>
<TD WIDTH="50%" VALIGN="TOP">&nbsp;</TD>
</TR>
</TABLE>

Так как на Web-страницах таблицы часто используются как скрытое средст-

во форматирования (например, для обеспечения требуемого взаимного рас-
положения текста и рисунков), вставляемые в текст таблицы по умолчанию
не имеют границ. Для добавления границ к таблицам используйте команду
Границы (меню Таблица).
После создания таблицы можно заняться изменением ее параметров. Для
этого следует воспользоваться пунктом Свойства таблицы (рис. 8.13) или
пунктом Свойства ячейки (рис. 8.14).

Свойства таблицы

по
Рактояжр до ок^.-*™'.'фг.-,> текста-•
\ ' i
no roptuoi- тали;... : ]~

;•••
ц!
тш - flis

I
I Авто 1
>, *.
| vi|C).37
::
столбцами:
Рис. 8.14. Окно Свойства ячейки
Отмена _J для изменения параметров отдельных
ячеек таблицы
Рис. 8.13. Окно Свойства таблицы
для изменения параметров всей таблицы
298 Часть I. Основы HTML

Читатели, имеющие опыт работы с таблицами в документах Word, сразу же

смогут создавать таблицы и для HTML-документов. При отсутствии такого
опыта можно научиться создавать таблицы по любой книге, посвященной
работе с Microsoft Word, или воспользоваться справкой. Поэтому мы не бу-
дет здесь более подробно освещать вопросы создания таблиц, а отметим
лишь некоторые особенности.
Поскольку возможности форматирования HTML-документов уступают ана-
логичным возможностям документов Word, то часто при преобразовании в
HTML-документ некоторые элементы форматирования могут быть потеря-
ны или изменены. Более того, даже при работе в режиме создания HTML-
документа можно сконструировать на экране такую таблицу, которая не мо-
жет быть в точно таком же виде отображена браузерами. Приведем пример.
На рис. 8.15 показана таблица, созданная в Word в режиме редактирования
НТМ L-документа.

,;й Msiei-a ; .T].j> ;,>а+..„ " ri.,-!3i,, ?'[..»• ' „i5i,/j

||Normal :*:::; Time-' WGW Roman

Пример таблицы, допустимой для

документа Word, но нереализуемой
для HTML-документа
; йй '-г
т
1 2 3

4 5 б 7 \ |

8 9 10

Рис. 8.15. Пример таблицы,

||
:

существование которой
в HTML-документе
;.С)'р; 1 1>кл .! 1/1 ! Н л Я , 7 с и : С:- Кал 2 ' . .к; ] 'уМТ ^;.Ш' :'.,,;;. невозможно

Вторая строка таблицы содержит на одну ячейку больше, чем остальные

строки. Язык разметки HTML не допускает ситуации, когда в разных строч-
ках содержится разное число ячеек. Точнее, если при записи данных для
отдельных строк указывается меньшее количество ячеек, чем в остальных
строках, то браузеры автоматически добавляют недостающее число ячеек,
считая, что они пустые. Естественно, при подсчете числа ячеек учитываются
протяженные ячейки, которые занимают несколько смежных ячеек. (На-
помним, что для протяженной ячейки требуется указать параметр COLSPAN
с соответствующим значением.) Поэтому очевидно, что приведенный пример
не может точно также отображаться браузерами. Редактор Word должен ка-
ким-то образом учитывать сложившуюся ситуацию. Чтобы убедиться в этом,
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 299

достаточно сохранить редактируемый документ в файле и вновь его загру-

зить в редактор. Заметим, что можно сделать даже проще, а именно, перей-
ти в режим просмотра исходного кода документа, а затем вернуться обратно.
При этих переходах предлагается сохранять изменения в файле, поэтому
результат будет тот же. В результате этих действий вид таблицы изменится
(рис. 8.16). Заметим, что редактор не создал дополнительной пустой ячейки,
а растянул последнюю ячейку первой и третьей строк на две, создав протя-
женные ячейки.
Г -, Microsoft Word - Table2 НННщ^ Ю1 х]

II : ; t,'*W

« Normal i|Tir, £Ж

1 2 3

4 5 б 7

8 9 10 Ц!
Рис. 8.16. Измененный
_*_
вариант таблицы после
щгэйт— ir-;™ «• wmmasmf ее сохранения в виде
HTML-файла

Приведенный пример показывает, что вид HTML-страницы может отли-

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

Совет
После сохранения редактируемого в Word документа формата HTML не будет
излишним вновь его загрузить и просмотреть. Эти действия, впрочем, не отме-
няют необходимость просмотра окончательного варианта документа в браузере.

Работа с рисунками на Web-страницах

При сохранении Web-страницы в формате HTML все изображения преобра-
зуются в формат GIF или JPEG. При этом в формате JPEG сохраняются
только те изображения, которые исходно были записаны в этом формате.
Все остальные форматы графических файлов преобразуются в GIF. Чтобы
вставить рисунок в Web-страницу, выберите команду Рисунок в меню
Вставка, а затем команду Из файла или Картинки.
 300 Часть I. Основы HTML

Если рисунок вставляется из файла, при сохранении он копируется в ту же

папку, что и Web-страница, если не установлен флажок Связь с файлом. Ес-
ли флажок Связь с файлом установлен, можно задать ссылку на рисунок в
заданном каталоге, как на другой Web-узел.
Вставленный на Web-страницу рисунок по умолчанию выравнивается по
левому полю. Чтобы задать взаимное расположение текста и рисунка, следу-
ет выделить рисунок и выбрать соответствующую команду в меню Формат
или на панели инструментов Рисование (рис. 8.17).

Обтекание

Щвертилапи:

;посоризонтали:

Рис. 8.17. Вкладка Положение окна

J. Огмйна Рисунок для задания положения
рисунка относительно текста

На рис. 8.18 показан пример использования изображения на создаваемой

Web-странице. Для этого примера будет сгенерирован следующий фрагмент
кода:
<IMG SRC="[Link]" WIDTH=213 HEIGHT=356 ALIGN="RIGHT" HSPACE=12>
<FONT FACE="Times New Roman" SIZE=5 COLOR="#000000"><Р>Пример вставки
изображения в текст HTML-документа. Этот рисунок взят из подборки
Microsoft Clip Gallery и располагается на странице с выравниванием
по правому краю.</РХ/ЕШТ>

Заметим, что Word автоматически нумерует рисунки, которые конвертиру-

ются из других форматов. В данном примере изображение, взятое из сбор-
ника рисунков Clip Gallery, было преобразовано в формат GIF и сохранено
С именем [Link].

с Примечание
Изображения в файле сохраняются в их исходном размере. При изменении
размеров изображения при компоновке Web-страницы для встроенного изо-
бражения изменяются лишь значения параметров WIDTH и HEIGHT тэга <IMG>.
Таким образом, преобразование изображения к нужному размеру будет выпол-
няться браузером при отображении страницы.
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 301

> Ими V
.:;.•)У? а
ж k ч I I i

Пример вставки
изображения в текст
HTML-документа. Этот
рисунок взят го подборки
Microsoft Clip Gallery и
располагается на странице
с выравниванием по
правому краю.

Рис; 8.18. Вставка

изображений
в HTML-документ

Создание ссылок в документе

Программа Word 97 позволяет включать в редактируемый документ ссылки
внутри документа, а также ссылки на другие страницы и документы. Имеет-
ся несколько способов включения ссылок в состав документа. Наиболее
простым способом является использование режима автоформатирования,
когда текст, представляющий собой адрес ссылки, автоматически преобра-
зуется в нужную ссылку. Для включения режима автоформатирования ссы-
лок необходимо выполнить следующие действия: выбрать пункт Автозамена
из меню Сервис. На вкладке Автоформат при вводе в разделе Заменять при
вводе включить режим адреса Интернета и сетевые пути гиперссылками. То-
гда при вводе текста, представляющего собой соответствующие адреса, они
будут заменяться гиперссылками. Например, при вводе текста:
[Link]
Sergeev@[Link]

будет сгенерирован следующий код:

<А HREF="[Link]
<A HREF="[Link]

Другим способом включения в текст ссылки является использование коман-

ды Гиперссылка из меню Вставка. После вызова этой команды будет откры-
то диалоговое окно Добавить гиперссылку, в котором нужно указать требуе-
мый адрес и другие параметры ссылок (рис. 8.19).
302 Часть I. Основы HTML

{Добавить гиперссылкч

"3 .„
[
Кг.1:Лл\Ч.--.п. •-'•>•.: <i^nvn,f. <(;.KVT|I'.!.. У - - «•,!•«.,': як*
• 'Ч) или

Путь: 'КСвадь y-tMTfc пдачц.ц, д,;,->яентов>'

Им'я оогег.м -i Щ >---"iit" •'i4-.f,<ini:.i,."./.r..'r<4»,noj!

ИМЗ>ЮВаНниИУЛ1(.'11М-|-.н.', i'-Ома. rJ :\\ 4,1 .„.ir (МЫ;, jf НИ СЛаЙДу),

•

Рис. 8.19. Диалоговое окно

Добавить гиперссылку

Создание форм на Web-страницах

Редактор Word 97 имеет набор инструментов для создания форм и задания
свойств их элементов. Образцы форм, например формы для опроса, пре-
доставляются мастером Web-страниц. С помощью мастера можно создать
основные формы, а затем отредактировать их в соответствии с конкретными
задачами. Если нужной формы нет в мастере, ее можно создать, вводя необ-
ходимые элементы управления. Для этого необходимо перейти в режим
конструктора, воспользовавшись соответствующим режимом меню Вид. За-
тем нужно выбрать необходимые элементы из появившейся панели Элемен-
ты управления и разместить их в форме (рис. 8.20).

[Элементы управления
Рис. 8.20. Панель Элементы
1 Яв управления

Например, если разместить в форме строку ввода текста и две кнопки

Submit и Reset, то будет создан следующий код:
<FORM>
<Р>
<INPUT TYPE="TEXT" WIDTH="28">

<INPUT TYPE="SUBMIT">
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 303

<INPUT TYPE="RESET">
</P>
</FORM>

Заметим, что свойства элементов управления можно изменять, нажимая

кнопку Свойства или выполняя двойной щелчок мышью на выбранном
элементе.

Сохранение существующего документа Word

в формате HTML
Сохранение документа в формате HTML представляет собой простейший
способ создания Web-страниц. Для его реализации не требуется никаких
знаний о формате HTML, а лишь необходимо уметь работать в среде Word.
После открытия существующего или создания нового документа Word мож-
но выполнить его сохранение в виде HTML-документа. Это выполняется в
специальном пункте меню Файл с названием Сохранить в формате HTML
MiciosoltWoid -oHice97
(File/Save as HTML). Документ Word закрывает-
|
ся, а затем вновь открывается в формате HTML.
ц На рис. 8.21 приведено содержимое меню Файл,
используемое при работе в режиме документа
Word.
Если перед преобразованием документ Word не
был сохранен, то будет выдано предупреждаю-
щее сообщение (рис. 8.22) о том, что ряд эле-
ментов форматирования Word-документа будет
потерян.

Рис. 8.21. Меню Файл с командой

Сохранить в формате HTML

Microsoft Word

:
. .' - •. ' •

Рис. 8.22. Запрос подтверждения при сохранении документа

Word в формате HTML
304 Часть I. Основы HTML

Поэтому лучше всего предварительно сохранять документ в формате Word,

а лишь затем выполнять его преобразование. После открытия документа в
формате HTML полученная Web-страница изображается практически в том
виде, который она имела бы при просмотре ее с помощью Web-браузера.
При необходимости в Web-страницу можно внести нужные изменения и
вновь сохранить ее. Заметим, что при выполнении преобразования Word
переходит в режим работы с документом формата HTML. Формально это
отражается на содержимом пунктов меню и некотором изменении возмож-
ностей редактора. На рис. 8.23 приведено содержимое меню Файл, исполь-
зуемое при работе в режиме HTML-документа. Сравните пункты меню,
приведенные на рис. 8.21 и 8.23.

( Примечание ^
В справочной системе русифицированной версии Word 97 не используется
термин "браузер". Вместо него применяется термин "средство просмотра Web".

Приведенных сведений вполне достаточно для выполнения преобразования

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

. !0ij!.~'.-i,., ];.1,,';:4Ы

Рис. 8.23. Меню Файл

при работе в режиме
НТМ L-документа

Однако, отдельные элементы форматирования, не поддерживаемые языком

HTML, могут быть потеряны или изменены. Приведем таблицу элементов
документа Word, которые удаляются или изменяются в процессе преобразо-
вания (табл. 8.1). Эта таблица полностью заимствована из справочной сис-
темы Word 97 с незначительными редакционными изменениями (рис. 8.24).
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 305

Ли-'

1
„й„,., ..,.. , i i. I i • т щ , ..-ни™-,
;п
two нагййлийй
ч ''
- " ' " ' - - " ' - • 1л
_
| Создание и просмотр Web-страниц
^ Создание Web-страниц
^ Оформление Web-страниц
ф Рисунки на Web-стр аницэ^
ф; Формы HaWeb-страиицах
^ Просмотр Web-страниц и исходных кодов HTML
l£il Использование средств редактирования Web-страниц \
Ш Получение поспедней версии средств редактирования •;
Функции Word, недоступные или изменяющ^еся при ред|
[?] [мто происходит при сохранении документа Word a7 как Web-c
2] Работа с файлами и ссылками на Web-страницах ^НШ
IJL) Диаграммы, формулы и дру(ие объекты на Web-страни:^!
[?] Как сделать Web-страницу доступной другим пользова^р
Щ Дополнительные ресурсы редактирования Web-cTpannJ^i Рис. 8.24. Справочная система
редактора Word по созданию
и редактированию
HTML-документов
!'•:•,rnt;

Таблица 8.1. Элементы документа Word, которые удаляются

или изменяются при преобразовании в формат HTML

Элемент Word —> HTML Подробности преобразования

документа Word

Примечания См. Примечание, введенное с помощью коман-

подробности ды Примечание (меню Вставка), удаля-
ется. Однако после сохранения доку-
мента в формате HTML примечания мож-
но снова ввести и присвоить им стиль
Примечание. Примечания не изобра-
жаются при просмотре Web-страницы с
помощью средства просмотра Web
Размер шрифтов См. Шрифт документа заменяется шрифтом
подробности HTML соответствующего размера. Раз-
меры шрифтов HTML изменяются от 1
до 7. Эти цифры не являются собственно
размером шрифта, а служат указанием
на размер шрифта для средств про-
смотра Web. В Word изображаются
шрифты размером от 9 до 36 пунктов
Текстовые эффекты: Нет Текстовые эффекты не сохраняются, но
приподнятый, с тенью, текст остается
утопленный,
все прописные, малые
прописные, двойное
зачеркивание и контур
(меню Формат,
команда Шрифт,
вкладка Шрифт)
306 Часть I. Основы HTML

Таблица 8.1 (продолжение)

Элемент Word —> HTML Подробности преобразования

документа Word
Начертания: Да Некоторые особые эффекты подчеркива-
полужирное, курсив, ния, например подчеркивание пунктиром,
подчеркивание преобразуются в подчеркивание сплош-
и зачеркивание ной чертой, а другие — нет
Анимация текста См. Анимация не сохраняется, но текст оста-
(меню Формат, подробности ется. Вместо эффектов анимации с по-
команда Шрифт, мощью среды редактирования Web-
вкладка Анимация) страниц на страницу следует поместить
бегущую строку
Графика См. Изображения, например рисунки и кар-
подробности тинки, преобразуются в формат GIF, если
рисунки не сохранены уже в формате
JPEG. Графические объекты, например,
надписи и фигуры, не преобразуются.
Линии преобразуются в горизонтальные
линии
Табуляция Да Символы табуляции преобразуются в
символы табуляции HTML, представляе-
мые в исходных кодах как &#9. В некото-
рых браузерах символы табуляции заме-
няются пробелами, поэтому вместо них
лучше использовать отступы или таблицы
Поля См. Значения полей преобразуются в текст;
подробности коды полей удаляются. Например, если в
документ вставлено поле DATE, текст
даты преобразуется, но сама дата не бу-
дет в дальнейшем обновляться
Оглавления См. Информация преобразуется, но указате-
и указатели подробности ли и оглавления после преобразования не
будут обновляться автоматически, так как
они базируются на кодах полей. В оглав-
лении вместо номеров страниц изобра-
жаются звездочки; эти звездочки являют-
ся гиперссылками, позволяющими поль-
зователю перемещаться по Web-стра-
нице. Звездочки можно заменить тек-
стом, который будет указывать на гипер-
ссылки
Буквицы Нет Буквицы удаляются. В среде создания и
редактирования Web-страницы размер
одной буквы можно увеличить, выделив ее
и нажав кнопку Увеличить размер. Если
для буквы имеется графическое изобра-
жение, его можно вставить перед текстом
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 307

Таблица 8.1 (продолжение)

Элемент Word — > HTML Подробности преобразования

документа Word

Графические объек- Нет Графические объекты не сохраняются.

ты: автофигуры, В среде редактирования и создания Web-
фигурный текст, страницы можно использовать графиче-
надписи и тени ские средства, вставляя объекты Рисунок
Word. Объекты преобразуются в формат
GIF

Формулы, диаграммы См. Объекты преобразуются в изображения

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

Таблицы Да Таблицы преобразуются, однако пара-

метры, не поддерживаемые средой ре-
дактирования Web-страниц, не сохраня-
ются. Цветные границы и границы пере-
менной ширины не сохраняются

Ширина таблиц См. По умолчанию после преобразования

подробности таблицы имеют фиксированную ширину.
Чтобы после преобразования таблица
получила относительную ширину (при
этом размер таблицы составляет опре-
деленную долю от размера окна сред-
ства просмотра), установите параметр
PercentageTableWidth=1 в следующем
поле системного реестра Windows
95:HKEY_LOCAL_MACHINE\Software
\Microsoft\Shared ToolsYText Converters
\Export\HTML\Options

Выделение цветом Нет Выделение цветом не сохраняется

Записанные Нет Внесенные изменения сохраняются, од-

исправления нако пометки исправлений удаляются

Нумерация страниц Нет Так как документ HTML считается одной

Web-страницей, независимо от его длины,
нумерация страниц не сохраняется

Поля страниц Нет Чтобы сохранить разметку страницы,

можно использовать таблицу

Границы Нет Границы таблицы сохраняются. Для раз-

вокруг абзацев деления частей и выделения важных мест
и слов Web-страницы можно использовать гори-
зонтальные линии
308 Часть I. Основы HTML

Таблица 8.1 (окончание)

Элемент Word — > HTML Подробности преобразования

документа Word

Границы страниц Нет В HTML нет соответствия границам стра-

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

Верхние и нижние Нет В HTML отсутствуют аналоги колонтитулов

колонтитулы

Обычные и концевые Нет

сноски

Колонки Нет Для создания колонок используйте таблицы

Стили См. Определенные пользователем стили пре-

подробности образуются в прямое форматирование,
если оно поддерживается HTML. Напри-
мер, при преобразовании стиля, содер-
жащего полужирное начертание и зате-
нение текста, полужирное начертание
преобразуется в прямое форматирова-
ние, а затенение не сохраняется

Основываясь на сведениях, приведенных в таблице, можно понять причины

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

Проблемы преобразования полей

Рассмотрим на примере некоторые проблемы, возникающие при преобразо-
вании документа Word в HTML-документ. Пусть имеется документ, пока-
занный на рис. 8.25.
В нем имеется таблица, содержащая поля с формулами, а также некоторая
другая информация, содержащая обновляемые поля. В первом столбце рас-
полагаются названия продуктов, второй и третий столбцы содержат соответ-
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 309

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

ячейка третьего столбца содержит поле с формулой, определяющей пере-
множение значений ячеек второго и третьего столбца. В конце таблицы за-
дана формула, подводящая итоговое значение. Такая таблица может с успе-
хом служить шаблоном для оперативных подсчетов затрат. Достаточно за-
полнить соответствующие ячейки в первых трех колонках, обновить
значения полей, содержащих формулы, тогда последняя колонка и итоговая
графа примут нужные значения. Конечно, задачи обработки электронных
таблиц логичнее решать в Microsoft Excel, который специально предназна-
чен для этого, однако некоторые элементарные возможности вполне допус-
тимо реализовывать и в Word. Здесь специально выбран пример таблицы с
формулами. Отметим также еще одну особенность таблицы — наличие про-
тяженной ячейки. В последней строке объединены вместе три ячейки, в ко-
торой записано слово "Итого:". Такого же визуального эффекта можно было
бы добиться и без объединения ячеек. Например, можно было для этих трех
ячеек оставить только прорисовку общей рамки, а линии между этими
ячейками отменить. Такое решение допустимо для документа Word, однако
неосуществимо в формате HTML. Обратите внимание на то, как протяжен-
ная ячейка будет реализована в кодах HTML, приводимых ниже.

Примечание
Microsoft Word 97 предоставляет также возможность объединения нескольких
ячеек таблицы по вертикали. Этой возможности не было в предыдущих верси-
ях Word.

Тот же самый документ на рис. 8.26 показан в режиме отображения кодов

полей. В таблице используется формула умножения (PRODUCT), а также
формула для суммирования всех элементов данного столбца (SUM).

[Link] ЯШ®

jj«J

Затраты на покупку продовольственных товаров

Продукт Количество, Цена за Стоимость,
кг 1 кг руб.
Хлеб 1 4,5 4,5
Сахар 2 7,3 14.6
Картофель 5 5,0 25
Огурцы 0,5 11 5,5
Помидоры 1 8 8
Итого: 57,6

Дата составления: вторник. 21 Сентября 1999 г.

Составил: Сергеев А.О.
1
^ЩхВД А
jjjjjjjj:^^
Рис. 8.25. Документ Word, содержащий поля с формулами
310 Часть I. Основы HTML

Затраты на покупку продовольственных товаров

Продукт Количество, Цена за Стоимость, руб.
кг 1 кг
Хлеб 1 4,5 t=PRODUCT(B2;C2)l
Сахар 2 7,3 { =PRODUCT(B3;C3) }
Картофель 5 5,0 { =PRODUCT(B4;C4) }
Огурцы 0,5 11 {=PRODUCT(B5;C5)}
Помидоры 1 8 t=PRODUCT(B6;C6) }
Итого: { =SUM(ABOVE) }

Дата составления: { TIME \@ "dddd. d MMMM уууу 'г.'" }

Составил: (USERNAME \* MERGEFORMAT}
I
Рис. 8.26. Документ Word, показанный в режиме отображения кодов полей

Примечание
Напомним, что коды полей можно просмотреть при работе с документом в
формате Word, используя горячую клавишу переключения режима просмотра
полей (View Fields, <Alt>+<F9>). Также допустимо переключать отображение
отдельного поля (Toggle Field, <Shift>+<F9>).

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

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

Примечание ^
Напомним, что обновление выделенного поля выполняется клавишей <F9>
(Update Field). Для одновременного обновления всех полей можно выполнить
пункт Выделить все меню Правка, а затем нажать клавишу <F9>. Автоматиче-
ское обновление полей при изменении данных не производится (в отличие от
Excel).

Выполним сохранение данного документа в формате HTML. Как указано в

табл. 8.1, при преобразовании документа в формат HTML коды полей утра-
чиваются и заменяются соответствующим текстом. В действительности не
все коды полей при преобразовании будут заменяться соответствующим тек-
стом. Для данного примера поле, содержащее дату, будет заменено текстом
(как это и указано в качестве примера в таблице), однако все остальные ко-
ды полей просто исчезнут и не будут заменены ничем. Преобразованный
документ в формате HTML будет выглядеть следующим образом (рис. 8.27).
Трудно анализировать причины такого преобразования. Бессмысленно так-
же проводить анализ, какие поля будут преобразовываться, а какие нет.
Возможно это связано с особенностями русифицированной версии Word 97,
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 311

а может быть просто с наличием ошибок, которые будут исправлены в сле-

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

I jjl Затраты на покупку продовольственным товаров г : -1 •< Г.: -

Затраты на покупку продовольственных товаров --

Продукт Количество, Цена за Стоимость, 1
кг руб.
1 кг
ХлеО 1 4,5

Сахар 2 7,3

Картофель 5 5,0

Огурцы 0,5 11

Помидоры 1 8

Итого:
Цата составления: вторник, 21 Сентября 1999 г.
Составил:

BJ •
Рис. 8.27. HTML-документ, полученный в результате преобразования
из документа Word

Для достижения поставленной цели можно рекомендовать до проведения

преобразования в формат HTML осуществить процедуру разрыва связи с
полями (Unlink Field). Иначе эту процедуру называют отключением полей.
После разрыва связи с полем текущее значение поля становится обычным
текстом. Код поля исчезает, поэтому, если в дальнейшем потребуется обно-
вить сведения, придется вставлять это поле снова. Следует порекомендовать
сохранять документ с кодами полей, а процедуру разрыва связи с полями
осуществлять с копией документа, которая может быть удалена после пре-
образования в формат HTML. Это обеспечит возможность возврата к доку-
менту Word с обновляемыми полями. Для разрыва связи с полем необходимо
выделить его и нажать клавиши <Ctrl>+<Shift>+<F9>. Для разрыва связей
со всеми полями документа можно выделить весь документ и нажать те же
клавиши. Заметим, что при разрыве связи с полем не происходит его обнов-
ления. Например, если вы изменили какие-то значения во втором или
третьем столбце примера и разорвали связь с полями без их обновления, то
в итоговой колонке сохранятся прежние значения. После выполнения всех
этих действий в документе не останется обновляемых полей, а будет присут-
ствовать лишь обычный текст, преобразование которого в HTML будет вы-
полнено без проблем.
312 Часть I. Основы HTML

Сведем все указанные рекомендации в единый порядок действий, выполняя

которые можно избежать потери значений полей при преобразовании в
HTML-формат:
1. Откройте документ Word, подлежащий преобразованию в HTML-формат.
2. Если необходимо, то обновите поля документа. Для этого выделите весь
документ или его фрагмент и нажмите клавишу <F9>.
3. Выполните разрыв связи с полями. Для этого выделите весь документ
или его фрагмент и нажмите совокупность клавиш <Ctrl>+<Shift>+<F9>.
Коды полей будут потеряны, поэтому предварительно сохраните копию
документа.
4. Выполните сохранение файла в HTML-формате.

( Примечание ~)
Обратим внимание на некоторые возможности Word, незнание которых может
повергнуть в шок даже довольно опытных пользователей. Любое из полей до-
кумента может быть подвергнуто блокировке, что означает запрет на его об-
новление. Блокировка поля (Lock Field) выполняется клавишами <Ctrl>+<F11>.
Снятие блокировки (Unlock Field)— клавишами <Ctrl>+<Shift>+<F11>. Если ка-
кое-либо поле заблокировано, то запрос на его обновление будет проигнориро-
ван и при этом не будет выдано никаких текстовых сообщений. Лишь те поль-
зователи, компьютер которых оснащен звуковой картой, при включенном звуке
услышат сигнал, означающий невозможность выполнения требуемой операции.
Визуально различить заблокированное поле от незаблокированного невозмож-
но, так как они отображаются абсолютно одинаково. Определить наличие за-
блокированного поля можно лишь косвенно по звуковому сигналу или увидев,
что пункт Обновить поле в контекстном меню, выдаваемом по правой кнопке
мыши, недоступен.

Приведем HTML-код, полученный в результате преобразования документа

из примера:
<HTML>
<HEAD>
<МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<META NAME="Generator" CONTENT="Microsoft Word 97 ">
<Т1ТЬЕ>Затраты на покупку продовольственных товаров</Т1ТЪЕ>
<МЕТА NAME="Template" CONTENT="С:\PROGRAM FILES\MICROSOFT
OFFICEXOFFICE\[Link]">
</HEAD>
<BODY LINK="#OOOOff" VLINK="#800080">

<BXFONT FACE="Arial" 31гЕ=5ХР>Затраты на покупку продовольственных

товаров</Р></В></РОЫТ>
<TABLE BORDER CELLSPACING=1 CELLPADDING=7 WIDTH=557>
<TRXTD WIDTH="29%" VALIGN="TOP">
<PXFONT FACE="Arial" 312Е=5>Продукт</БШТ></ТС>
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 313

<TD WIDTH="27%" VALIGN="TOP">

<FONT FACE="Arial" SIZE=5><P АЫСЫ="СЕКТЕК"Жоличество, Kr</FONTx/TD>
<TD WIDTH="19%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=5><P ALIGN="CENTER">UeHa за</Р>
<P ALIGN="CENTER">1 Kr</FONT></TD>
<TD WIDTH="25%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=5XP ALIGN="CENTER">CTOMMOCTb, руб. </FONTx/TD>
</TR>
<TRXTD WIDTH="29%" VALIGN="TOP">
<FONT FACE="Arial" 312Е=4ХР>Хлеб</РОЫТХ/ТО>
<TD WIDTH="27%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4XP ALIGN="CENTER">K/FONTX/TD>
<TD WIDTH="19%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4><P ALIG№="CENTER">4,5</FONTX/TD>
<TD WIDTH="25%" VALIGN="TOP">&nbsp;</TD>
</TR>
<TR><TD WIDTH="29%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4XP>Caxap</FONTX/TD>
<TD WIDTH="27%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4XP ALIGN="CENTER">2</FONTx/TD>
<TD WIDTH="19%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4xP ALIGN="CENTER">7 , 3</FONTX/TD>
<TD WIDTH="25%" VALIGN="TOP">&nbsp;</TD>
</TR>
<TRXTD WIDTH="29%" VALIGN="TOP">
<FONT FACE="Arial" 312Е=4хР>Картофель</Р01\1ТХ/ТО>
<TD WIDTH="27%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4XP ALIGN="CENTER">5</FONTX/TD>
<TD WIDTH="19%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4XP ALIGN="CENTER">5,0</FONTX/TD>
<TD WIDTH="25%" VALIGN="TOP">&nbsp;</TD>
</TR>
<TRXTD WIDTH="29%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4XP>OrypUbi</FONTX/TD>
<TD WIDTH="27%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4><P ALIGN="CENTER">0,5</FONTx/TD>
<TD WIDTH="19%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4><P ALIGN="CENTER">1K/FONTX/TD>
<TD WIDTH="25%" VALIGN="TOP">&nbsp;</TD>
</TR>
<TRXTD WIDTH="29%" VALIGN="TOP">
<FONT FACE="Arial" 31гЕ=4ХР>Помидоры</ЕОЫТХ/ТО>
<TD WIDTH="27%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4XP ALIGN="CENTER">K/FONTX/TD>
<TD WIDTH="19%" VALIGN="TOP">
<FONT FACE="Arial" SIZE=4XP ALIGN="CENTER">8</FONTX/TD>
314 Часть I. Основы HTML

<TD WIDTH="25%" VALIGN="TOP">inbsp;</TD>

</TR>
<TRXTD WIDTH="75%" VALIGN="TOP" COLSPAN=3>
<FONT FACE="Arial" SIZE=5XP ALIGN="CENTER">MToro: </FONTX/TD>
<TD WIDTH="25%" VALIGN="TOP">&nbsp;</TD>
</TR>
</TABLE>

<FONT FACE="Arial" SIZE=4XP>flaTa составления: вторник,

21 Сентября 1999 г.</Р>
<Р>Составил: </PX/FONTX/BODY>
</HTML>

Использование примечаний в документе

Напомним, что примечания часто используются при работе нескольких
пользователей с одним документом, каждый из которых вносит свои ремар-
ки. Добавление примечаний в документ выполняется в пункте Примечание
меню Вставка (Insert/Annotation). Как правило, в окончательный документ
примечания не вносятся, а используются в качестве рабочих записей от-
дельных разработчиков или рецензентов документа. Примечания похожи на
сноски (Footnote) тем, что при вставке в документ примечания в то место, к
которому оно относится, ставится специальный символ, а сам текст приме-
чания, как и текст сноски, вводится в отдельном окне. Примечания нуме-
руются последовательно, но в отличие от сносок, в символ примечания до-
бавляются инициалы автора данного примечания. Word позволяет также
вставлять звуковые примечания, если компьютер оснащен звуковой платой
и микрофоном.
Все примечания и сноски, вставленные в документе Word, при преобразо-
вании в формат HTML теряются. Это указано в приведенной выше таблице,
где также дается рекомендация по вставке примечаний в HTML-документ.
Для этого достаточно выделенный текст пометить стилем Примечание
(Comment). Этот совет компании Microsoft нуждается в комментариях.
Использование этого стиля приводит к тому, что весь текст, помеченный
данным стилем, обрамляется парой тэгов <COMMENT> и </COMMENT>. Этот тэг
служит для отметки примечаний (часто их называют комментариями), кото-
рые игнорируются браузерами и часто служат лишь для заметок автора
HTML-документа. Такой подход к реализации комментариев в HTML имеет
существенный недостаток. Дело в том, что тэг <COMMENT> не распознается
некоторыми браузерами. Он не входил в спецификацию HTML 3.2 и был
введен лишь в спецификации HTML 4.O. До сих пор этот тэг не распознает-
ся браузером Netscape (вплоть до версии 4.7). Впервые этот тэг был исполь-
зован в браузере Mosaic и вскоре был включен в Microsoft Internet Explorer.
Глава 8. Разработка HTML-страниц при помощи Microsoft Word 315

В настоящее время стало общепринятым записывать комментарии, обрам-

ляя их совокупностью символов <!— и —>. Этот вариант записи коммента-
риев распознается всеми ведущими браузерами и давно входит в специфи-
кацию HTML. Ясно, что компания Microsoft мало заботится о совместимости
с другими браузерами, однако на сегодняшний день забывать о значитель-
ной роли браузера Netscape не следует. Браузер Netscape проигнорирует тэг
<COMMENT> при отображении документа на экране и весь текст комментария
появится на экране, что вряд ли соответствует замыслам автора документа.
Исходя из приведенных соображений рискнем дать следующий совет, вхо-
дящий в противоречие с рекомендациями разработчиков Word 97.

Совет
Не используйте стиль Примечание (Comment) при создании HTML-документа
в среде Word 97. Если вы все-таки воспользовались этим стилем, то в полу-
ченном HTML-коде выполните замену сгенерированных тэгов <COMMENT> и
</COMMENT> соответственно на символы <!— и —>.

Версии и реализации MicrosoftWord

Пакет Microsoft Office так же, как и подавляющее большинство пакетов
программного обеспечения, в ходе своего развития претерпевал изменения,
что отражалось в выпуске новых версий программ и исправлении недочетов.
В результате оказывается, что пользователи пакета работают с его различ-
ными версиями и при этом не всегда представляют себе особенности и воз-
можности. Опыт общения со многими пользователями, зачастую далекими
от компьютерных профессионалов, свидетельствует о достаточном консерва-
тизме в использовании программного обеспечения. Это связано как с не-
достатком времени и возможностей пользователей постоянно заботиться об
обновлении программных средств, так и с иногда принципиальной невоз-
можностью установки более мощных программ без соответствующей модер-
низации технической части компьютерного парка. Данные рассуждения
особенно касаются такого пакета, как Microsoft Word, с которым работает
очень широкий круг людей, не имеющих специального компьютерного об-
разования. Исходя из сегодняшнего опыта и экстраполируя ситуацию на
будущее, можно утверждать, что в ближайшее время будут использоваться
самые различные версии Microsoft Word. В частности, до сих пор встречает-
ся MS Windows 3.1, работающая на стареньких по сегодняшним меркам
компьютерах. Наступающая эра Windows 2000 и, соответственно, Office 2000
далеко не сразу охватит весь парк компьютеров.
Приведем здесь лишь краткую информацию об используемых версиях
Microsoft Word и некоторых их особенностях.
Пакет Microsoft Word имеет давнюю историю. Ранние версии пакета работа-
ли еще под MS-DOS, что сегодня уже практически не встречается. Версия
316 Часть I. Основы HTML

пакета для Windows 3.1 называлась Microsoft Word 6.0. Для операционной
системы Windows 95 был выпущен Microsoft Word 7.0, который чаще стали
называть коротко — Microsoft Word 95. В своей основе эта программа пред-
ставляет собой Microsoft Word 6.0, перенесенный в среду Windows 95 с до-
бавлением некоторых новых возможностей. Заметим, что эти версии про-
граммы имеют одинаковую структуру файлов, хранящих подготовленные
документы. Здесь проблема совместимости и переноса файлов еще не воз-
никала.
Следующей версией стала версия Microsoft Word 97, которая появилась в
начале 1997 года.

Примечание
Разработчики, видимо, хотели сохранить преемственность в нумерации версий
(6.0 -> 7.0 -> 8.0), однако прижилось лишь название Word 97, а номер версии
8.0 можно увидеть, лишь заглянув внутрь кодов любого файла, сохраненного
редактором Microsoft Word 97.

Версия обогатилась новыми возможностями, одной из которых является

способность сохранять, просматривать и редактировать документы в форма-
те HTML. Предыдущие версии не обладали такой возможностью, однако
для них были разработаны специальные программы, при установке которых
подобная возможность появлялась. Такие программы для Microsoft Office
получили название Internet Assistant. В частности, для Microsoft Word 6.0/95
имеется программа [Link] (размер этого установочного файла -
1091 Кб). Пользователям, не желающим переходить на более поздние вер-
сии Microsoft Word, можно рекомендовать установку этой программы.
Версия Microsoft Word 97 не нуждается в программах типа Internet Assistant,
так как соответствующие возможности уже заложены в этот пакет. Заметим
лишь, что для использования возможностей редактирования HTML-доку-
ментов в Microsoft Word 97 необходимо указать это на этапе инсталляции
пакета, поскольку типичный вариант инсталляции, который обычно выби-
рают многие пользователи по умолчанию, не предполагает установку дан-
ного компонента (рис. 8.28).
Microsoft Word 97 имеет другую структуру файла документа, что вызывает
проблемы переносимости. Microsoft Word 97 может читать любые файлы
формата Word 6.0/95, может записывать по требованию пользователя в фор-
мате Word 6.0/95 (с возможной потерей некоторых нюансов форматиро-
вания документа) для обратной совместимости. Однако документы, со-
храненные в формате Word 97, впрямую не могут читаться программами
Microsoft Word 6.0/95. Для обеспечения совместимости (пусть неполной)
существует специальный конвертер, устанавливаемый в среду Microsoft
Word 6.0/95, который предоставляет возможность чтения файлов Microsoft
Word 97. Этот конвертер обычно поставляется в виде файла с именем
[Link] размером 952 Кб.
 317
Глава 8. Разработка HTML-страниц при помощи Microsoft Word

I
•се),
Microsoft Binder
Microsoft Excd
• Hi i ц щ ш щ
Microsoft Word
Microsoft PowerPoinl
Microsoft Access
Microsoft Outtook

Доступ к данным
Дополнительные средства Office
Р Конвертеры и фильтры

Рис. 8.28. Включение компоненты Создание WEB-страниц (HTML) при установке

пакета Microsoft Office

Как и у многих программ, с течением времени обнаруживаются ошибки

и недочеты, исправляемые специальными пакетами обновления (patch). На
текущий момент для Microsoft Word 97 существует уже два таких пакета, по-
лучивших названия SR-1 (Service Release-1) и SR-2. Пакет SR-1 существует
в виде файла [Link] размером 8022 Кб. Пакет SR-2 — в виде файла
[Link] размером 22448 Кб. Установка этих пакетов может быть реко-
мендована пользователям исходной версии Microsoft Word 97 (рис. 8.29).

i Установка Microsoft Office 97 SI

Рис. 8.29. Окно установки

пакета обновления SR-1
318 Часть I. Основы HTML

Заметим, что установка SR-1 занимает несколько десятков минут (в зависи-

мости от параметров компьютера и наличия установленных компонент
Microsoft Office 97). Установка же SR-2 выполняется в течение десятков се-
кунд. Уточнить версию Microsoft Word 97, с которой работает пользователь
всегда можно, воспользовавшись пунктом меню О программе (About) из ме-
ню Справка (рис. 8.30).

О программе Microsoft Woid

1*ч, .;- .
g Инфляции- A.s:.,, W1-1997,

:
!Л'*>У! -V.-.KWjty-M !,.;тк, Ш f,^4''l^f in в I ' ' 1 i • И HI P .-.идищеж.-!.

Рис. 8.30. Окно, открывающееся по команде Справка/О программе

Кроме того, появилась специальная небольшая программа, единственное

назначение которой — проконтролировать номер версии пакета Microsoft
Office. Имя программы [Link] (123 Кб). Ее работа показана на рис. 8.31.

R,..;,.,,-,.,,.,;„,.,,,,,.„„jl^ennwi.-, Ш

Рис. 8.31. Информационное окно,

генерируемое программой проверки
версий пакета Microsoft Office

Появилась и уже работает у ряда пользователей и следующая версия -

Microsoft Office 2000. Ее нюансы и особенности лишь только начинают об-
наруживаться и их обсуждение — дело ближайшего будущего.
 9. Выполняемые сценарии
10. Динамический HTML
11. Встраиваемые компоненты

Интерактивные
Web-документы
Стандартный язык разметки HTML позволяет легко и быстро создавать
Web-страницы, передаваемые по сети Интернет. Это достаточно удобный
инструмент работы в сети, однако загружаемые в окно браузера страницы
являются статичными. Пользователь не может изменять их содержимое, не
может взаимодействовать с ними. Мы живем в динамичном, меняющемся
мире, и, естественно, хотели бы видеть то же самое и в рукотворном мире -
мире Интернета.
Для придания динамичности HTML-страницам был предложен и реализо-
ван ряд технологий, "оживляющих" и создающих "реагирующие" на дейст-
вия пользователя HTML-документы. Одной из первых технологий в этом
ряду стоит технология, основанная на CGI-сценарии — программе, инициа-
лизируемой на сервере при передаче на него информации из полей форм
HTML, создаваемых тэгом <гокм>. Ее недостатком является реализация про-
стейшего сценария вида: "Я вам послал сообщение, а вы мне на него отве-
тили". Более того, подобный сценарий существенно влияет на загрузку сети:
любой запрос и ответ занимает ресурсы сети. А если для выполнения неко-
торого действия на сервере переданы неправильные данные? Пользователь
получит вместо ожидаемого (возможно достаточно длительное время) ответа
всего лишь сообщение о неверно введенных данных.
Чтобы избежать подобных ситуаций, фирмой Netscape был разработан спе-
циальный язык сценариев JavaScript. Программы, написанные на этом язы-
 ке, встраиваются в документ HTML и интерпретируются браузером, исполь-
зуемым для его просмотра. Подобная технология снимает нагрузку на сеть,
избавляя пользователя от ненужных пересылок недостоверной информации,
ибо теперь можно написать выполняемый на стороне клиента код для про-
верки введенных данных. Фирма Microsoft, браузер которой Internet Explorer
конкурирует с браузером Netscape Navigator фирмы Netscape, разработала и
активно продвигает собственный язык сценариев — VBScript, являющийся
подмножеством широко используемого для разработки Windows-приложе-
ний языка Visual Basic.
Языки сценариев действительно делают HTML-страницы интерактивными.
Содержание страницы может зависеть от желания пользователя, однако для
его изменения все равно необходимо производить загрузку новой страницы
либо во фрейм отображаемой страницы, либо в новое окно браузера. При-
чем эти изменения связаны с необходимостью взаимодействия с элементами
управления: кнопка, поле ввода, переключатель и т. п. Хотелось бы, чтобы
страницы действительно стали динамичными, как наш меняющийся мир: за
поворотом мы видим открывающийся новый вид, не взаимодействуя ни с
какими "элементами управления". Двигаясь по странице и перемещая по
ней курсор мыши, хочется увидеть новую информацию, скрытую до тех пор,
пока курсор не пройдет, например, над определенным словом или изобра-
жением, расположенным на странице. Поместив курсор мыши на некоторый
элемент списка, хотелось бы увидеть уточняющую информацию, скрытую
для пользователя до этого момента. Или, указав просто на слово "дальше",
увидеть на странице очередную картину любимого художника. Все это реа-
лизуется с помощью так называемого динамического языка разметки стра-
ниц (Dynamic HTML), который, по существу, состоит из трех компонен-
тов — каскадной таблицы стилей (CSS), JavaScript и HTML, соединенных
объектной моделью документа (DOM).
Перечисленные технологии являются мощными инструментами создания
интерактивных Web-страниц, однако они ограничены возможностями соот-
ветствующих языков сценариев, которые напрямую связаны с располагае-
мыми на странице элементами, задаваемыми тэгами языка HTML. Апплеты
Java и элементы управления ActiveX, создаваемые с помощью современных
языков программирования, поддерживающих объектно-ориентированные тех-
нологии, позволяют внедрять в документ программируемые объекты и взаи-
модействовать с ними, меняя их свойства и вызывая их методы посредством
языков сценариев.
Перечисленным трем технологиям создания интерактивных Web-документов
и посвящена данная часть книги. Приводится достаточное число примеров,
позволяющих оценить их эффективность, а также научиться применять эти
технологии для разработки собственных интерактивных документов.
 ГЛАВА 9
. .. ..^. .,.,... . .., . . . . - - . .

Выполняемые сценарии

Основы
объектно-ориентированных технологий
Данный раздел посвящен основам объектно-ориентированных технологий
(ООТ). Без знания основополагающих понятий ООТ невозможно понима-
ние программирования на языках сценариев, которые реализуют простую
объектную модель, непосредственно связанную с документом HTML. He
имея никакого представления о событийных приложениях, трудно создать
интерактивные, встроенные в документ сценарии.

Что такое программный объект

Реальный мир, в котором мы живем, "населен" разнообразными объектами.
Нам не надо определять, что это такое: от момента рождения до смерти мы
видим и взаимодействуем с объектами. Одни объекты статичны (дом, в ко-
тором мы живем), другие объекты могут перемещаться при определенном
воздействии на них (машина, в которой мы ездим), третьи могут развивать-
ся сами по себе (мы сами, животные, растения). Все объекты непохожи друг
на друга. Не найти двух совершенно одинаковых домов, деревьев даже од-
ного вида, не говоря уже о животных и людях. Однако все объекты похожи
друг на друга в том, что каждый объект обладает некоторым внешним ви-
дом, поведением (что он умеет делать), а также возможностью взаимодейст-
вия с другими объектами. Конечно, такая грубая абстракция не может яв-
ляться реальной моделью внешнего мира, но она оказывается полезной при
моделировании программным способом реально существующих объектов
внешнего мира.
Программный объект также обладает некоторым внешним видом или свой-
ствами, отражаемыми в значениях его переменных, и поведением или ме-
тодами, задаваемыми в виде его процедур. Причем свойства и методы не
существуют отдельно друг от друга, а объединены вместе, образуя единый

11 Зак. 944
322 Часть II. Интерактивные Web-документы

объект с новым качеством. Методы "окружают" свойства объекта, не позво-

ляя напрямую обращаться к ним или менять их значения. Говорят, что
свойства заключены в некую "капсулу", инкапсулированы в объект. Доступ
к ним предоставляют методы объекта, которые решают, можно ли изменять
значения свойств, или можно получить только значение некоторого свойст-
ва, установленного разработчиком программного объекта. Это и есть фунда-
ментальное свойство программного объекта: свойства инкапсулированы в
объект и доступ к ним осуществляется только посредством методов, предос-
тавляемых объектом. Программный объект схематически можно представить
так, как на рис. 9.1.

Рис. 9.1. Схематическое представление

программного объекта

Как видим, методы предоставляют программный интерфейс для доступа

к значениям свойств, заключенных в ядре объекта, и являются некоторой
внешней оболочкой, защищающей их от несанкционированного или слу-
чайного воздействия.
Инкапсуляцией называется расположение переменных объекта под защитой
методов. Она используется для скрытия деталей реализации от других объ-
ектов. Не надо знать биологический механизм роста дерева, для практики
достаточно знания, что дерево растет и, например, через столько-то лет оно
достигнет состояния, при котором его можно использовать в качестве дело-
вой древесины. Водителю автомашины не обязательно представлять детали
реализации коробки передач, ему достаточно знать, что, установив ручку
переключения скорости в такое-то положение, автомобиль сможет двигаться
с заданной скоростью. Главное знать, какие методы может выполнять объ-
ект, а как это реализовано — не столь важно. Таким образом, можно всегда
изменить внутреннюю реализацию объекта, не меняя части программы, где
используется этот объект.
Существование программных объектов самих по себе не имеет никакого
смысла. Они дадут преимущества при программировании тогда, когда мож-
но организовать их взаимодействие. И это является следующей основной
концепцией объектно-ориентированных технологий. Объекты могут взаимо-
Глава 9. Выполняемые сценарии 323

действовать друг с другом, посылая сообщения с просьбой выполнить неко-

торый подходящий метод или выполняя метод в ответ на запрос системы.
Взаимодействуя, объекты образуют единое целое — программу.
Любое сообщение состоит из трех компонентов:
1. Имя объекта, которому оно адресовано.
1. Имя метода, который объект-адресат должен выполнить,
3. Необязательные параметры, необходимые для выполнения метода.
Этих трех компонентов достаточно, чтобы объект точно выполнил, что от
него хотят.
Здесь мы не будем углубляться в понятия класса, перекрытие методов, меха-
низмов наследования и полиморфизма, которые реализуются объектно-ориен-
тированными системами программирования, например, Java, Visual C++,
Delphi. Языки программирования сценариев, как отмечалось выше, реали-
зуют простую объектно-ориентированную модель, и для понимания функ-
ционирования и создания сценариев вполне достаточно приведенной ин-
формации о программных объектах.
Обратиться к свойству или методу объекта можно с использованием стан-
дартного для объектно-ориентированных языков синтаксиса — так назы-
ваемой точечной нотации. Разные объекты могут иметь свойства и методы
с одинаковыми названиями. Чтобы указать, метод какого объекта вызывает-
ся, перед именем метода указывается имя объекта, отделенного точкой. На-
пример, если необходимо вызвать метод рост объекта липа, это можно сде-
лать с помощью следующего оператора:
липа.рост(. . .)
где в скобках задаются необходимые для выполнения метода параметры.

Событийные приложения
До появления операционных систем с графическим интерфейсом (типа
Windows) было распространено так называемое "процедурное" программиро-
вание, суть которого заключается в том, что программа жестко определяет,
когда и в какой последовательности вызываются те или иные процедуры,
в совокупности составляющие программу. Программист должен был заранее
разработать и реализовать алгоритм выполнения своей программы. При ее
запуске она жестко следовала инструкциям вызова соответствующих процедур.
По-иному выглядит работа приложения с графическим интерфейсом. Оно
должно реагировать на действия пользователя: нажал ли он кнопку, а если
нажал — то какую, хочет ли он выполнить команду какого-либо меню и
т. п. В этом случае выполняемая программа не должна следовать один раз и
навсегда заданному алгоритму выполнения. Она должна иметь возможность
324 Часть II. Интерактивные Web-документы

запускать на выполнение процедуры, реализующие действие, которое жела-

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

Объектные модели языков сценариев

Объектные модели языков сценариев тесно связаны с тэгами HTML. При
загрузке страницы HTML в браузер интерпретатор языка создает объекты со
свойствами, определяемыми значениями параметров тэгов страницы. Гово-
рят, что браузер отражает HTML-страницу в свойствах объектов, и иногда
этот процесс называют отражением (reflection). Созданные объекты сущест-
вуют в виде иерархической структуры, отражающей структуру самой HTML-
страницы. На верхнем уровне расположен объект window, представляющий
собой активное окно браузера. Далее вниз по иерархической лестнице сле-
дуют объекты frame, document, location и history, представляющие соответ-
ственно фрейм, непосредственно сам документ, адрес загружаемого доку-
мента и список ранее загружавшихся документов, и т. д. Значения свойств
объектов отражают значения соответствующих параметров тэгов страницы
или установленных системных параметров. Более подробно модель объектов
JavaScript для клиента рассматривается ниже в этой главе в разделе "Объекты
клиента и обработка событий".
Для правильного использования объектных моделей следует четко пони-
мать, как браузер компонует страницы и, тем самым, создает иерархию объ-
ектов. При загрузке страницы просматриваются сверху вниз, тем самым по-
следовательно происходит компоновка страницы и ее отображение в окне
браузера. А это означает, что и объектная модель страницы также формиру-
ется последовательно, по мере ее обработки. Поэтому невозможно обратить-
ся из сценария, расположенного ранее какой-либо формы на странице,
к элементам этой формы. Всегда следует помнить о том, что браузер после-
довательно сверху вниз интерпретирует содержимое HTML-страницы.
Глава 9. Выполняемые сценарии 325

Еще один аспект работы с объектами языков сценариев заключается в том,

что нельзя изменить свойства объектов. Браузер обрабатывает страницу
только один раз, компонуя и отображая ее. Поэтому попытка в сценарии
изменить свойство отображенного элемента страницы обречена на провал.
Только повторная загрузка страницы приведет к желаемому результату.

( Примечание }
Можно динамически изменять содержимое полей ввода элементов форм
HTML. Это осуществляется установкой свойства value соответствующего эле-
мента в сценарии, встроенном в HTML-страницу.

Язык создания сценариев JavaScript

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

( Примечание ^)
Языки Java и JavaScript являются совершенно разными языками, ориентиро-
ванными на выполнение разных задач в сети, но дополняющими друг друга при
создании сложных сетевых приложений.

При разработке обоих типов приложений используется общий компонент

языка, называемый ядром и включающий определения стандартных объек-
тов и конструкций (переменные, функции, основные объекты и средство
LiveConnect взаимодействия с Java-апплетами), и соответствующие компо-
ненты дополнений языка, содержащие специфические для каждого типа
приложений определения объектов. На рис. 9.2 схематически представлено
взаимодействие компонентов JavaScript при создании клиентских и сервер-
ных приложений.
Клиентские приложения непосредственно встраиваются в HTML-страницы
и интерпретируются браузером по мере отображения частей документа в его
окне. Серверные приложения для увеличения производительности предва-
рительно компилируются в промежуточный байт-код. В данном разделе
описывается ядро JavaScript версии 1.3 и дополнительные возможности раз-
работки клиентских приложений.

(~ Примечание ^
Фирма Microsoft разработала свой интерпретатор языка JavaScript, который она
называет JScript.
326 Часть II. Интерактивные Web-документы

JavaScript для серверных приложений

(Дополнительные (Дополнительные
возможности: возможности:
объекты window, объекты server,
history и т.д.) database и т.д.)

JavaScript для клиентских приложений

Рис. 9.2. Компоненты JavaScript

Прежде чем переходить к обзору языка JavaScript, перечислим основные

области его использования при создании интерактивных HTML-страниц:
П Динамическое создание документа с помощью сценария
П Оперативная проверка достоверности заполняемых пользователем полей
форм HTML do передачи их на сервер
О Создание динамических HTML-страниц совместно с каскадными табли-
цами стилей и объектной моделью документа
П Взаимодействие с пользователем при решении "локальных" задач, ре-
шаемых приложением JavaScript, встроенном в HTML-страницу

Общий обзор языка

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

Синтаксис языка
Приложение JavaScript представляет набор операторов языка, последова-
тельно обрабатываемых встроенным в браузер интерпретатором. Каждый
оператор можно располагать в отдельной строке. В этом случае разделитель
(;), отделяющий один оператор от другого, не обязателен. Его используют
только в случае задания нескольких операторов на одной строке. Любой
оператор можно расположить в нескольких строках без всякого символа
продолжения. Например, следующие два вызова функции alert эквивалент-
ны:
alert("Подсказка") ;
alert(
"Подсказка"
);

Строковый литерал обязательно должен располагаться на одной строке. Ес-

ли необходимо задать его в нескольких строках, то следует разбить его на
более мелкие строковые литералы и использовать оператор конкатенации
строк для соединения полученных мелких строк в одну длинную. В этом
случае каждый литерал можно располагать на отдельной строке.
Для удобства чтения кода приложения в нем можно расположить коммента-
рии. Любая последовательность символов, следующая за двумя косыми чер-
тами (//), рассматривается как комментарий. Этот прием позволяет задать
комментарий, расположенный на одной строке. Для задания многострочных
комментариев используется синтаксис, заимствованный из языков Java и С.
Любая последовательность символов, заключенная между символами (/*) и
(*/), интерпретируется как комментарий.
Язык JavaScript чувствителен к регистру. Это означает, что строчные и про-
писные буквы алфавита считаются разными символами.

Размещение операторов языка на странице

Встроить сценарий JavaScript в HTML-страницу можно несколькими спо-
собами:
П Задать операторы языка внутри тэга <SCRIPT> языка HTML
П Указать файл с кодом JavaScript в параметре SRC тэга <SCRIPT>
П Использовать выражения JavaScript в качестве значений параметров тэгов
HTML
П Определить обработчик событий в тэге HTML

Использование тэга <SCRIPT>

Для внедрения в HTML-страницу сценария JavaScript в спецификацию язы-
ка HTML был введен тэг-контейнер <SCRIPT>. . .</SCRIPT>, внутри которого
328 Часть II. Интерактивные Web-документы

могут располагаться операторы языка JavaScript. Обычно браузеры, не под-

держивающие какие-нибудь тэги HTML, просто их игнорируют, анализи-
руя, однако, содержимое пропускаемых тэгов с точки зрения синтаксиса
языка HTML, что может приводить к ошибкам при отображении страницы.
Во избежание подобной ситуации следует помещать операторы языка
JavaScript в контейнер комментария < ! — . . . — >, как показано ниже
<SCRIPT [LANGUAGE=" JavaScript" ]>
<! —
операторы JavaScript
//-->
</SCRIPT>

Параметр LANGUAGE задает используемый язык сценариев. В случае языка

JavaScript его значение задавать не обязательно, так как этот язык использу-
ется браузерами по умолчанию. Для языка сценариев VBScript необходимо
явно задать значение этого параметра в виде строки "VBScript".

( Примечание ^
Символы (//) перед закрывающим тэгом комментария — > являются операто-
ром комментария JavaScript. Он необходим для правильной работы интерпре-
татора.

Документ может содержать несколько тэгов <SCRIPT>, расположенных в лю-

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

Задание файла с кодом JavaScript

Тэг <SCRIPT> имеет параметр SRC, позволяющий связать встраиваемый сце-
нарий с внешним файлом, содержащим программный код на языке
JavaScript. В качестве значения параметра задается полный или относитель-
ный URL-адрес ресурса. Задание закрывающего тэга </SCRIPT> обязательно,
независимо от того, заданы или нет операторы внутри тэга. Следующий
фрагмент кода связывает документ HTML с файлом-источником, содержа-
щим некоторый набор функций:
<SCRIPT SRC="http: //home. bhv. com/ f unctions/ jsfuncs . j s">
[операторы JavaScript]
</SCRIPT>
Глава 9. Выполняемые сценарии 329

Примечание
Связываемый внешний файл не должен содержать тэгов HTML и должен иметь
расширение JS.

Операторы внутри тэга <SCRIPT> игнорируются браузером, если только не

произошла ошибка при включении файла в страницу, например, файл не
найден. Можно разместить внутри тэга операторы, выводящие сообщение
об ошибке загрузки файла.
Следующий сценарий использует метод alert объекта document для вывода
диалогового окна с сообщением:
<SCRIPT SRC="http: //[Link]/functions/jsfurics . js">
<!-
document . alert ( "He загрузился файл сценария ! " )
//-->
</SCRIPT>

Элементы JavaScript в параметрах тэгов HTML

Переменные и выражения JavaScript можно использовать в качестве значе-
ний параметров тэгов HTML. Эта процедура аналогична процедуре встраи-
вания числовых или символьных примитивов HTML. Элементы JavaScript
также располагаются между амперсандом (&) и точкой с запятой (,-), но
должны заключаться в фигурные скобки { } и использоваться только в каче-
стве значений параметров тэгов HTML.
Пусть определена переменная barwidth, и ей присвоено значение 75. Сле-
дующий тэг нарисует горизонтальную линию длиной в 75% от горизонталь-
ного размера окна браузера:
<HR WIDTH="&fbarWidth};%" ALIGN="LEFT">

Предупреждение
Нельзя использовать элементы JavaScript в тексте HTML. Они интерпретиру-
ются только тогда, когда расположены справа от параметра и задают его зна-
чение. Например, попытка использовать значение переменной myvar в сле-
дующем фрагменте
<Н4> &{myVar}; </H4>
обречена на провал. Вместо ожидаемого значения переменной myVar браузер
отобразит строку myVar.

Обработчики событий
Для совместимости с языками сценариев в некоторые тэги HTML были вве-
дены специальные параметры обработки возникающих событий. Значения-
330 _ Часть II. Интерактивные Web-документы

ми этих параметров могут быть операторы языка JavaScript. Обычно в каче-

стве значения задается имя функции, которая вызывается, когда происходит
соответствующее событие, определяемое параметром обработки события.
Имя параметра начинается с приставки on, за которым следует имя самого
события. Например, параметр обработки события click (щелчок кнопкой
МЫШИ) будет ИМеТЬ ИМЯ onClick.
События в основном связаны с действиями, производимыми пользователем
с элементами форм HTML. Поэтому чаще всего перехват и обработка собы-
тий задается в параметрах элементов форм, что позволяет проверить введен-
ную информацию перед ее отправкой на обработку CGI-сценарием.
Здесь кратко остановимся на функциях JavaScript. Функция или процедура -
это именованная последовательность операторов, которая выполняет опре-
деленную задачу и может возвращать некоторое значение. Функция опреде-
ляется оператором function, имеющем следующий синтаксис:
function имя_функции ( [параметры] ) {
[операторы JavaScript]
[return значение]

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

ный оператор return в теле функции (блок операторов, заключенный в фи-
гурные скобки), определяет возвращаемое функцией значение.
Следует четко понимать различие между объявлением функции и ее вызо-
вом. Объявление функции только задает ее имя и определяет, что она будет
делать при ее вызове. Непосредственное выполнение функции осуществля-
ется, когда в сценарии вызывают ее и передают действительные параметры.
Определение необходимых функций следует осуществлять в тэге <HEAD>, так
как все определенные в нем операторы сценария интерпретируются до ото-
бражения страницы, и, таким образом, будут известны в процессе отобра-
жения всей страницы.
Следующий пример демонстрирует задание функции и ее вызов в процессе
формирования страницы документа.

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!— //Скрыть сценарий от браузеров: не поддерживающих JavaScript
function square(number) {
alert("Мне надо вычислить функцию и потом сформировать документ!");
return number * number;
Глава 9. Выполняемые сценарии 331

II—>
</SCRIPT>
</HEAD>
<BODY>
<Р>Начинается отображение страницы, в которую внедрен сценарий вычисления
функции</Р>
<SCRIPT>
<! —
[Link]("Значение, которое вычислялось, равно ", square(5), ".");
//-->
</SCRIPT>
<Р> Теперь формирование страницы закончено.
</BODY>

В тэге <HEAD> задано описание функции square (), которая возвращает квад-
рат значения своего параметра, а также отображает окно сообщения. Вызов
функции осуществляется в сценарии, размещенном в теле HTML-доку-
мента. В этом сценарии используется метод write объекта document для
формирования вывода в HTML-страницу.
При зафузке этого документа в браузер Internet Explorer отображается пер-
вый абзац, а затем выводится окно сообщения, как на рис. 9.3.

>>ieV &n
:
•в li -^ -3 • - ' •
f;oiWif<J ' Slop I'.ftfrusli
т *.
ОЛИнтерактивные\ПримерьЛПример_1 .html
.
Начинается отображение страницы, в которую внедрен сценарий
вычисления функции •••.••
:•

Miciosolt Internet [Link]

Рис. 9.3. Отображение окна сообщения

Нажатие на кнопку ОК закрывает окно сообщения, и продолжает отображе-

ние страницы. Окончательный вид полученной страницы можно видеть на
рис. 9.4.
 332 Часть II. Интерактивные Web-документы

Зп \Ин|срлк1иш1Ь1е\(1римеры\Пример__1 html - Microsoft Internet Explorer гГПП

»> £Л»
* й т Hnmo yoaruh: favonl [Link]
«L! 0:\Интерактивные\ПримерыМ1ример_1 .html

Начинается отображение страницы, в которую внедрен сценарий

вычисления функции

Значение, которое вычислялось, равно 25.

Теперь формирование страницы закончено.

Рис. 9.4. Динамически сформированная страница

Следующий пример демонстрирует прием явного вызова функции из сцена-

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

i^.it,i\iii..,:-,i..j.•':..•.'::.;; •'•••••Vj^iw^.V*>-i*i;ii.>[Link]..;.->iV.»".i.'^ в _j

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!— //Скрыть сценарий от браузеров: не поддерживающих JavaScript
function validate(form) {
if([Link] >=30) {
alert("Да Вы уже взрослый человек!");

else (
alert ("Вы еще повзрослеете!");

</SCRIPT>
</HEAD>
<BODY>
<FORM name="Form_l">
Ваш возраст: <INPUT type="text" size=5 name="age"XHR>
<INPUT type="button" value= "Подтвердите"
onClick="validate (this. form. age) ">
</FORM>
</BODY>
Глава 9. Выполняемые сценарии 333

В этом примере обработчик события onclick кнопки формы связан с вызо-

вом функции validate, которой передается значение, введенное в текстовое
поле age. Имя поля задается параметром name. При нажатии на кнопку вы-
зывается функция validate, отображающая сообщение в зависимости от
введенного значения.
Параметр name элемента формы задает символическое имя элемента, кото-
рое можно использовать в операторах сценария для ссылки на соответст-
вующий элемент. Передаваемый функции параметр [Link] использу-
ет синтаксис объектно-ориентированных языков, обозначающий элемент с
именем age (текстовое поле) формы. Ключевое слово this языка JavaScript
означает в данном случае ссылку на текущую форму. В функции использу-
ется свойство value элемента Текстовое поле формы для анализа введенного
пользователем значения.
На рис. 9.5 показан результат взаимодействия с загруженной в браузер стра-
ницей.

•Ш
0\Интерактивные\ПримерьЛПример__2 html

Рис. 9.5. Результат взаимодействия с кнопкой формы HTML

Язык ядра JavaScript

Этот раздел посвящен элементам языка, общим для клиентской и серверной
частей JavaScript. Здесь вводятся основные понятия языка, операторы и
стандартные объекты и функции.

Переменные и литералы
Как и любой другой язык программирования, JavaScript использует пере-
менные для хранения данных определенного типа. Реализация JavaScript
334 Часть II. Интерактивные Web-документы

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

тельно задавать тип переменной. Ее тип зависит от типа хранимых в ней
данных, причем при изменении типа данных меняется и тип переменной.
JavaScript поддерживает четыре простых типа данных:
О Целый
О Вещественный
П Строковый
О Булевый, или логический
Для присваивания переменным значений основных типов применяются ли-
тералы — буквальные значения данных соответствующих типов.
Целые литералы являются последовательностью цифр и представляют обыч-
ные целые числа со знаком или без знака:
123 // целое положительное число
-123 // целое отрицательное число
+123 // целое положительное число

Для задания вещественных литералов используется синтаксис чисел с деся-

тичной точкой, отделяющей дробную часть числа от целой, или запись ве-
щественных чисел в научной нотации с указанием после символа "е" или
"Е" порядка числа. Пример правильных вещественных чисел:
1.25 0.125е01 12.5Е-1 0.0125Е+2
Строковый литерал — последовательность алфавитно-цифровых символов,
заключенная в одинарные (') или двойные кавычки ("), например: "Анна",
'АННА1.

( Примечание ^
При задании строковых переменных нельзя смешивать одинарные и двойные
кавычки. Недопустимо задавать строку, например, в виде "Анна'.

Предупреждение
Двойные кавычки — это один самостоятельный символ, а не последователь-
ность двух символов одинарных кавычек.
Если в строке нужно использовать символы кавычек, то строковый литерал
необходимо заключать в кавычки противоположного вида:
"It's a string" //Значение строки равно It's a string

Булевы литералы имеют два значения: true и false, и используются для об-
работки ситуаций да/нет в операторах сравнения.
Каждая переменная имеет имя, которое должно начинаться с буквы латин-
ского алфавита, либо символа подчеркивания "_", за которыми следует лю-
Глава 9. Выполняемые сценарии 335

бая комбинация алфавитно-цифровых символов или символов подчеркива-

ния. Следующие имена являются допустимыми именами переменных
Tempi
My Function
__my_Method
Определить переменную можно двумя способами:
П Оператором var
П Оператором присваивания (=)
Оператор var используется как для задания, так и для инициализации пере-
менной и имеет синтаксис:
var имя_переменной [= начальное_значение];
Необязательный оператор присваивания задает данные, которые содержит
переменная. Их тип определяет и тип переменной. Например, следующий
оператор
var weekDay = "Пятница";

задает переменную weekDay, присваивает ей строковое значение "Пятница",

и тем самым определяет ее тип как строковый.
Если при определении переменной ей не присвоено никакого значения, то
ее тип не определен. Ее тип будет определен только после того, как ей будет
присвоено некоторое значение оператором присваивания =.
Этот оператор можно использовать в любом месте программы, меняя тем
самым тип переменной. Это обстоятельство отличает язык JavaScript от
строго типизированных языков программирования (например, Java или
C++), в которых тип переменной должен быть определен до ее использова-
ния. В следующем фрагменте кода переменная weekDay меняет свой тип:
var weekDay // Переменная определена, но тип не известен

weekDay = "Пятница"; // Строковый тип

weekDay = 5; // Целый тип

Выражения и операторы
Выражение — это комбинация переменных, литералов и операторов, в ре-
зультате вычисления которой получается одно единственное значение, ко-
торое может быть числовым (целым или вещественным), строковым или
булевым.
Переменные в выражениях должны быть инициализированы либо в опера-
торе var, либо оператором присваивания. Если при вычислении выражения
336 Часть II. Интерактивные Web-документы

встречается неинициализированная или вообще не определенная перемен-

ная, ТО интерпретатор генерирует ошибку "undefined variable" ("переменная
не определена"), указывая ее местоположение на странице HTML.

(~ Примечание ^
В JavaScript определен специальный литерал null для обозначения неопреде-
ленного значения. Если переменной присвоено значение null, то она считает-
ся инициализированной, и при вычислении выражения с такой переменной
ошибка не генерируется.

Оператор присваивания рассматривается как выражение присваивания, ко-

торое вычисляется равным выражению правой части, и в то же время он
присваивает вычисленное значение выражения переменной, заданной в ле-
вой части оператора.
Кроме выражения присваивания в JavaScript существует три типа сложных
выражений:
П Арифметическое (вычисляемым значением является число)
О Строковое (вычисляемым значением является строка)
П Логическое (вычисляемое значение равно true или false)
Для построения выражений применяются операторы, соответствующие типу
выражения.
Арифметические выражения создаются арифметическими операторами (табл. 9.1).

Таблица 9.1. Арифметические операторы

Оператор Название

+ Сложение
Вычитание
Умножение
/ Деление
% Остаток от деления целых чисел
++ Увеличение значения переменной на единицу
Уменьшение значения переменной на единицу

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

speed = 5.5;
time = 4;
distance = speed * time;
distance = (speed ++)*time;
Глава 9. Выполняемые сценарии 337

В последнем операторе скорость (переменная speed) увеличивается на еди-

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

Таблица 9.2. Сокращенные операторы присваивания

Оператор Значение

х *= у х = х * у
х /= у х = х / у
х+=у х = х + у
х -= у х = х — у
х%=у х = х % у

Для создания логических выражений используются операторы сравнения и

логические операторы, применяемые к переменным любого типа.
Операторы сравнения аналогичны таковым в других языках программирова-
ния. Их список представлен в табл. 9.3.

Таблица 9.3. Операторы сравнения

Оператор Название

Равно
Не равно
Больше или равно
Меньше или равно
Строго больше
Строго меньше

При использовании этих операторов в выражении оно вычисляется равным

true, если соответствующее сравнение верно, в противном случае значение
выражения равно false.
338 Часть II. Интерактивные Web-документы

Логические операторы представлены в табл. 9.4. В примерах предполагается,

ЧТО переменная varl = 'Кит', var2 = 'Кот', var3 = false.

Таблица 9.4. Логические операторы

Оператор Синтаксис Описание Пример

&& выраж! && выраж2 Возвращает выраж!, varl && var2

(логическое если оно преобразуется (равно ' кот ' }
И) или равно false, иначе var2 && var3
выраж2 (равно false)
I | выраж! | I выраж2 Возвращает выраж!, varl | | var2
(логическое если оно преобразуется (равно ' К и т ' )
ИЛИ) или равно true, иначе var3 | | varl
выраж2 (равно 'Кит')
var3 | | false
(равно false)
! ! выраж Если выраж равно true, ivarl
(логическое возвращает false; если (равно false)
НЕ) выраж равно false, воз- !var3
вращает true (равно true)

Логические операторы и операторы сравнения используются в операторах

цикла и условия для проверки завершения цикла или выполнения опреде-
ленной группы операторов.
Строковые операторы используются для создания строковых выражений.
В JavaScript, собственно говоря, существует только один строковый опера-
тор — оператор конкатенации (соединения) строк (+), если не считать со-
кращенной формы оператора присваивания со сложением (+=). Этот опера-
тор присоединяет к строковому значению первого операнда строковое зна-
чение второго, получая результат, равный соединению строк:
string = "Моя" + "строка"; // Значение переменной string равно "Моястрока"

Примечание
Оператор + может использоваться со смешанными типами операндов. Все
операнды приводятся к строковому типу, если хотя бы один из операндов со-
держит строковый литерал. Например, выражение "май" + 1. 999еЗ будет вы-
числено равным строке "Май!999", а "Май" + t будет равно "Mautrue", если
переменная t содержит булево значение true.

Условный оператор является единственным оператором, использующим три

операнда. Его значением является один из двух операндов, определяемый из
условия истинности третьего. Синтаксис его таков:
(условие) ? знач! : знач2;
Глава 9. Выполняемые сценарии 339

Если операнд условие имеет значение true, то результатом вычисления ус-

ловного оператора будет знач!, в противном случае — знач2. Например,
оператор
range = (mark <= 2) ? "Пересдача" : "Зачтено";
присваивает переменной range значение "Пересдача", если переменная mark
меньше либо равно 2, в противном случае ей присваивается значение
"Зачтено".
Кроме перечисленных выше операторов в JavaScript существует большая
группа операторов для поразрядных действий с данными. В них содержимое
каждого оператора рассматривается как последовательность битов, а не как
данные строкового, числового или булевого типов. Их описание можно най-
ти в любом учебнике по языку JavaScript или в технических описаниях на
сервере фирмы Netscape по адресу: [Link]

Стандартные объекты и функции

В ядре JavaScript определены объекты и функции, которые можно использо-
вать вне контекста загруженной страницы. Они доступны как для сценариев
на стороне клиента, так и для сценариев на стороне сервера.
Объект Array
В JavaScript нет типа данных массив, но с помощью объекта Array можно
создавать массивы в приложениях и манипулировать ими. Методы этого
объекта позволяют сортировать, объединять, записывать в обратном порядке
содержимое массивов и выполнять многие другие действия. Наиболее часто
используется свойство объекта Array, позволяющее определять количество
элементов, содержащихся в массиве.
Массив — упорядоченный набор однородных данных, к элементам которого
можно обращаться по имени и индексу. Массив создается оператором new и
конструктором массива — системной функцией Array, инициализирующей
элементы массива. Создать массив можно одной из следующих конструкций:
имя_массива = new Array([элементО, элемент!, . . ., элементы]);
имя_массива = new Array([длина_массива]);

При использовании первого синтаксиса конструктору массива в качестве

параметров передаются значения элементов массива, во второй конструкции
задается длина массива. Можно использовать конструктор без параметров,
но в этом случае только определяется, что переменная с данным именем
используется в качестве массива. Элементы самого массива не заданы, и
поэтому к ним нельзя обратиться, пока в сценарии им явно не будут при-
своены значения.
Для получения значения элемента массива необходимо в квадратных скоб-
ках рядом с именем массива указать порядковый номер элемента. Элемент
340 Часть II. Интерактивные Web-документы

массива можно использовать в выражениях и в левой части оператора при-

сваивания:
а [ 0 ] = "1"; а[1] 2;
с = Ь[2]*с[3];

( Примечание J
В JavaScript нумерация элементов массивов начинается с нуля. Поэтому пер-
вый элемент имеет индекс 0, второй — 1 и т. д.

Примечание
В JavaScript версии 1.2 и выше вторая форма задания массива с указанием
числа элементов в конструкторе создает массив из одного элемента с целым
значением. В предыдущих версиях языка создается массив с заданным числом
элементов, значения которых не определены.

Массив, являясь объектом, обладает методами, которые вызываются с ис-

пользованием обычной для объектно-ориентированных языков точечной
нотации. В табл. 9.5 перечислены методы объекта Массив.

Таблица 9.5. Методы объекта Массив

Метод Действие

concat Объединяет два массива в один

join Соединяет все элементы массива в одну строку
pop Удаляет последний элемент из массива и возвращает его значение
push Добавляет один или несколько элементов в конец массива и возвраща-
ет последний добавленный элемент
reverse Переставляет элементы массива в обратном порядке: первый элемент
становится последним, а последний первым
shift Удаляет первый элемент массива и возвращает его значение
slice Создает сечение массива в виде нового массива
splice Добавляет и/или удаляет элементы из массива
sort Сортирует элементы массива
unshift Добавляет один или более элементов в начало массива и возвращает
новую длину массива

Предположим, что определены два массива

arrayl = new Array("Первый","Второй","Третий");
array2 = new Array("Один","Два","Три");
Глава 9. Выполняемые сценарии _ 34?

Метод arrayl. join () возвратит строку "Первый, второй, Третий"; метод

[Link] упорядочит элементы массива arrayl (переставив их местами)
в алфавитном порядке, а оператор [Link](array2) .sort о объединит
два массива в один новый и отсортирует его.

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

Присвоить значение элементу массива можно в любом месте программы.

Добавление элементов в конец массив можно осуществлять простым при-
сваиванием значения новому элементу, а не только методом push ( } . Для оп-
ределения длины массива используется свойство length. Ниже представлен
фрагмент кода, определяющий пятый элемент массива arrayl, и тем самым
изменяющий значение его свойства length с 3 на 5:
arrayl = new Array ("Первый", "Второй", "Третий") ;
11 = arrayl . length;
arrayl [4] = "1";
12 = arrayl. length;
document. write ( 11 ); // Напечатает 3
document . write ( 12 ); // Напечатает 5

Для задания массивов нескольких размерностей следует значениям элемен-

тов массивов присваивать массивы. Подобная техника иллюстрируется сле-
дующим фрагментом, в котором создается двумерный массив:
а = new Array ( )
for (i=0; i < 4; i++) {
a[i] = new Array ()
for (j=0; j < 4;
a [ i ] [j] = "["

Здесь в первом операторе определяется массив а. Далее в цикле элементы

этого одномерного массива сами определяются как массивы, элементам ко-
торых присваиваются значения. Таким образом создается двумерный массив.
Объект Date
Для представления дат в программе JavaScript используется объект Date. Он
создается, как и любой объект в JavaScript, оператором new с помощью кон-
структора Date. Синтаксис оператора создания даты следующий:
имя объекта дата = new Date ( [параметры] ) ;
342 Часть II. Интерактивные Web-документы

В JavaScript дата хранится в виде числа миллисекунд, прошедших от 1 янва-

ря 1970 года. Если в конструкторе даты отсутствуют параметры, то значени-
ем объекта будет текущая дата. Параметром конструктора может быть строка
Вида "месяц день, год часы:минуты:секунды". ЕСЛИ ОПУСТИТЬ значения часов,
минут и секунд, то по умолчанию они будут иметь значения 0. Можно за-
дать список параметров, задающих год, месяц и день или год, месяц, день,
часы, минуты и секунды. Ниже представлены все три способа инициализа-
ции объекта Date:
today = new Date()
Xmas = new Date("January 7, 1999 12:00:00")
Xmas = new Date(99, 1, 7)
Xmas = new Date(99, 1, 7, 12, 0, 0)

Методами объекта Date можно получать и устанавливать отдельно значения

года, месяца, дня недели, часов, минут и секунд. Например, метод getYearO
возвращает год, метод setYeart) устанавливает значение года объекта Date.
Метод getTime (} возвращает число миллисекунд, прошедшее с момента
времени 1 января 1970 года 00:00:00, метод setTimeO устанавливает соответ-
ствующее значение даты в миллисекундах, заданных в качестве параметра.

Объект Math
В свойствах объекта Math хранятся основные математические константы, а
его методы вычисляют основные математические функции. При обращении
к свойствам и методам этого объекта создавать его не надо, но следует явно
указывать его имя Math. Например, в свойстве PI хранится значение числа л
и использовать его в программе можно в виде [Link].
Методы этого объекта включают процедуры вычисления тригонометриче-
ских, экспоненциальных, логарифмических и других математических функ-
ций. В табл. 9.6 собраны все методы объекта Math.

Таблица 9.6. Методы объекта MS th

Метод Описание

abs Абсолютное значение

sin, cos, tan Стандартные тригонометрические функции; аргумент задается
в радианах
acos, asin, atan Обратные тригонометрические функции
exp, log Экспоненциальная функция и функция натурального лога-
рифма
ceil Наименьшее целое, большее или равное значению аргумента
Глава 9. Выполняемые сценарии 343

Таблица 9.6 (окончание)

Метод Описание
floor Наибольшее целое, меньшее или равное значению аргумента
min, max Наибольшее или наименьшее значение двух аргументов
pow Показательная функция: pow (x, у) =ху
round Округление аргумента до ближайшего целого
sqrt Квадратный корень

Объект String
Когда переменной присваивается строковый литерал, она становится, как
указывалось выше в разделе "Переменные и литералы", строковой перемен-
ной. На самом деле JavaScript не поддерживает строковых типов, а создает
стандартный объект string. Таким образом, любая строковая переменная
или строковый литерал является объектом string, к которому могут быть
применены соответствующие методы этого объекта.
Можно явно создать строковый объект, используя ключевое слово new и
конструктор string, как показано ниже:
имя_объекта = new String(строка);
Параметром конструктора является любая допустимая строка. Например:
myString = new String("Строка");
Объект string имеет единственное свойство length, хранящее длину строки,
содержащейся в строковом объекте. Так, и "строка". length, и
[Link] возвращают одинаковые значения 6, равные в первом слу-
чае длине строкового литерала, а во втором случае длине строки, содержа-
щейся в строковом объекте.
Объект string имеет два типа методов: первые непосредственно влияют на
саму строку, например метод substring, а вторые возвращают отформатиро-
ванный HTML вариант строки, например метод bold.
Некоторым методам необходимы параметры. Так, метод получения подстро-
ки требует задания двух целых чисел, определяющих позиции начала и кон-
ца ПОДСТРОКИ, например substring ( 2 , 7 ) .
Методы, возвращающие HTML-отформатированные варианты строк, соот-
ветствуют тэгам форматирования HTML. Например, следующий оператор
вставляет в страницу HTML связь с ресурсом, расположенным по адресу,
задаваемому параметром метода link:
[Link]([Link]("[Link]
344 Часть II. Интерактивные Web-документы

В документе отобразится содержимое строкового объекта s, представленное

как связь с соответствующим ресурсом.
В табл. 9.7 перечислены методы строковых объектов.

Таблица 9.7. Методы объекта string

Метод Действие

anchor Создает именованную ссылку

big, blink, bold, fixed, Создает строку в формате HTML
italics, small, strike,
sub, sup
charAt, charCodeAt Возвращает символ или код символа, параметр
определяет позицию символа в строке
indexOf, lastlndexOf Возвращает позицию начала или конца в строке
заданной подстроки
link Создает гиперсвязь
concat Конкатенация двух строк
split Преобразует строковый объект в массив строк,
разбивая строку на подстроки
slice Получает сечение строки
substring, substr Возвращают подмножество строки, заданное
либо началом и концом, либо началом и числом
символов
match, replace, search Используются для работы с регулярными выра-
жениями
toLowerCase, toUpperCase Переводят содержимое строк в верхний или в
нижний регистр соответственно

Примечание
Подробную информацию о работе с методами строкового объекта можно най-
ти в любом учебнике по JavaScript или в Интернете по адресу http://
[Link].

Стандартные функции верхнего уровня

В добавление к стандартным объектам существует несколько функций, для
вызова которых не надо создавать никакого объекта. Они находятся вне
иерархии объектов JavaScript на так называемом "верхнем уровне".
Полезными при разработке приложений могут оказаться две функции,
производящие "синтаксический" анализ своих аргументов: parseFioat и
parselnt.
Глава 9. Выполняемые сценарии 345

Функция parseFioat (параметр) анализирует значение переданного ей стро-

кового параметра на соответствие представлению вещественного числа в
JavaScript. Если в строке при последовательном просмотре обнаруживается
символ, отличный от символов, применяемых для формирования вещест-
венных литералов (знаки + и -, десятичные цифры, точка и символы (е) или
(Е)), то она игнорирует оставшуюся часть строки и возвращает то числовое
значение, которое ею обнаружено до неправильного символа. Если первый
символ в строке не является цифрой, она возвращает значение "NaN" (Not a
Number — не число).
Аналогично функция parseint(строка, [основание]) пытается возвратить це-
лое число по заданному вторым параметром основанию. Если первый сим-
вол в строке не является цифрой, она также возвращает значение "NaN".
Эти функции полезны при анализе введенных пользователем данных в по-
лях формы до передачи их на сервер.
Функции Number (объект) и string (объект) преобразуют объект, заданный в
качестве его параметра в число или строку.
Функция isNaN(параметр) тестирует значение своего параметра на соответст-
вие нечисловому значению. Если ее параметр действительно оказывается не
числом, она возвращает true, в противном случае — false.

(~ Примечание ^
Подробную информацию о функциях верхнего уровня можно найти в любом
учебнике по JavaScript или в Интернете по адресу [Link]

Операторы управления
Весь набор операторов управления языка можно разбить на три группы:
П Операторы выбора, или условные
О Операторы цикла
П Операторы манипулирования с объектами
В этом разделе кратко обсуждается каждая из указанных групп операторов
JavaScript, в совокупности позволяющая создавать высоко интерактивные
приложения.
Операторы выбора
К этой группе операторов относятся операторы, которые выполняют опре-
деленные блоки операторов в зависимости от истинности некоторого булев-
ского выражения. Это оператор условия i f . . .else и переключатель switch.
Оператор условия if применяется, если необходимо вычислить некоторый
блок операторов в зависимости от истинности заданного условия, и имеет
следующий синтаксис:
346 _ Часть II. Интерактивные Web-документы

if (условие) {
операторы!
}
[else {
олераторы2

Первая группа операторов операторы! выполняется при условии истинности

выражения условие. Необязательный блок else задает группу операторов
операторы2, которая будет выполнена в случае ложности условия, заданного
в блоке if.

( Примечание ^
Фигурные скобки, отмечающие группу выполняемых операторов в блоках if и
else, необязательны, если группа состоит из одного оператора.

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

Внутри группы выполняемых операторов могут использоваться любые опе-

раторы JavaScript, в том числе и операторы условия. Таким образом, можно
создавать группу вложенных операторой условия и реализовывать сложные
алгоритмы проверки.
В операторе switch вычисляется одно выражение и сравнивается со значе-
ниями, заданными в блоках сазе. В случае совпадения выполняются опера-
торы соответствующего блока case. Синтаксис этого оператора следующий:
switch (выражение) {
case значение! :
[операторы!]
break;
case значение2 :
[операторы2]
break;

default :
[операторы]

Если значение выражения в блоке switch равно значение!, то выполняется

группа операторов операторы!, если равно значениеа, то выполняется группа
операторов операторы2 и т. д. Если значение выражения не равняется ни од-
ному из значений, заданных в блоках case, то вычисляется группа операто-
Глава 9. Выполняемые сценарии 347

ров блока default, если этот блок задан, иначе происходит выход из опера-
тора switch.
Необязательный оператор break, задаваемый в каждом из блоков case, вы-
полняет безусловный выход из оператора switch. Если он не задан, то про-
должается выполнение операторов в следующих блоках case до первого опе-
ратора break или до конца тела оператора switch.

Операторы цикла
Оператор цикла повторно выполняет последовательность операторов
JavaScript, определенных в его теле, пока не выполнится некоторое заданное
условие. В языке существует два оператора цикла: for и while. Они отлича-
ются механизмом организации цикла.
Оператор цикла for позволяет организовать выполнение блока операторов
заданное число раз. Он определяет переменную, называемую переменной
цикла, которая изменяет свое значение во время выполнения цикла. Условие
завершения цикла зависит от значения этой переменной. Оператор имеет
следующий синтаксис:
for ( [инициал_выражение] ; [условие] ; [изменяющее_выражение] ) {
[операторы]

Параметром инициал_выражение задается и инициализируется переменная

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

С~ Примечание ^
Инициализирующее выражение, изменяющее выражение и условие окончания
цикла не являются обязательными, и любое из них может быть опущено. Однако
следует оставлять разделитель (;) для правильной интерпретации оставшихся
выражений. Например, в случае отсутствия условия завершения цикла заголо-
вок цикла for будет выглядеть следующим образом:
for (var i=0; ;i+2).

Следующий цикл выводит в документ значения степеней двойки:

for(var i=0; i<=5; i
document. write ("<p>2^{", i, "} = ", [Link] (2, i) )
348 _ Часть II. Интерактивные Web-документы

Результат работы этого оператора цикла представлен ниже:

2°= 1

4
2 = 16
25 = 32

Цикл while выполняется пока истинно выражение, задающее условие вы-

полнения цикла. Его синтаксис следующий:
while (условие) {
[операторы]

Сначала проверяется истинность условия, заданного в заголовке цикла,

а затем выполняются (или не выполняются) операторы тела цикла. Проверка
истинности условия осуществляется на каждом шаге цикла. Использование
этого цикла предполагает, что условное выражение окончания цикла ме-
няется в зависимости от вычисленных значений переменных и выражений
в теле цикла. Например, следующий фрагмент кода
s = "Example"; i = 0;
while (i<s. length) {
document . write (s. substr (i, 1) , "<BR>")

выведет в документ слово "Example" по одной букве в строке.

Иногда необходимо завершить цикл не по условию, задаваемому в заголовке
цикла, а в результате вычисления некоторого условия в теле цикла. Для этой
цели в JavaScript существуют операторы break и continue.
Оператор break завершает выполнение цикла и передает управление опера-
тору, непосредственно следующим за оператором цикла. Оператор continue
прекращает выполнение текущей итерации и начинает выполнение сле-
дующей, т. е. в цикле while он передает управление на проверку выражения
условие цикла, а в цикле for - на вычисление выражения изменяющее_
выражение.

Манипулирование объектами
Четыре оператора JavaScript предназначены для работы с объектами. Это
оператор new, создающий новый объект (см. выше раздел "Стандартные объек-
ты и функции"), операторы for. . .in и with и ключевое слово this.
Глава 9. Выполняемые сценарии _ 349

Оператор f o r . . . in позволяет организовать цикл по свойствам объекта

JavaScript. Синтаксис его следующий:
for( переменная_цикла in объект) {
[операторы]

Этот цикл производит перебор свойств объекта. В переменной цикла на ка-

ждой итерации сохраняется значение свойства объекта. Количество итера-
ций равно количеству свойств, существующих у заданного в заголовке цикла
объекта.
В следующем примере функция properties о, в качестве параметров кото-
рой передаются объект и его имя, используется для отображения в HTML
документе всех свойств объекта Флажок, созданного на странице тэгом
<INPUT>.

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<! — //Скрыть сценарий от браузеров, не поддерживающих JavaScript
function properties (obj , obj_name) {
var result = ""
for (var i in obj ) {
result += obj_name + "." + i + " = " + obj [i] + "<BR>"
}
result += "<HR>"
return result

</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="checkbox" NAME="checkl" value="<bna;KOK">
Флажок

<SCRIPT>
document. write (properties (checkl, checkl. value) )
</SCRIPT>
</BODY>

Сама функция описывается в разделе <HEAD>, а ее вызов происходит в теле

документа. Для связи элементов управления форм со сценарием применяет-
ся параметр NAME тэга <INPUT>. Его значение равно переменной, которую ис-
пользуют в сценарии для ссылки на соответствующий элемент управления.
350 Часть II. Интерактивные Web-документы

В качестве имени объекта в функцию передается значение свойства value

объекта checkbox.

Предупреждение
Вызов функции осуществляется после создания в документе элемента управ-
ления checkbox. Попытка вызвать функцию properties () до создания в доку-
менте флажка приведет к ошибке интерпретатора, так как объект еще не будет
существовать (см. выше раздел "Объектные модели языков сценариев").
Оператор with задает объект по умолчанию для блока операторов, опреде-
ленных в его теле. Это означает, что все встречаемые в операторах этого
блока свойства и методы, являются свойствами и методами указанного объ-
екта. Применение данного оператора избавляет от необходимости указывать
иерархию принадлежности объекта и сокращает исходный текст программы.
Текст приведенного выше сценария с использованием оператора with упро-
стится следующим образом:
<SCRIPT>
with( checkl) {
[Link](properties(checkl, value))
)
</SCRIPT>

Здесь свойство value относится к объекту checkl, который указан в заголов-

ке оператора with.
Полезно использовать этот оператор для объекта Math. Тогда обращение к
его свойствам и методам осуществляется без явного указания префикса Math.
Например:
with( Math) {
г = sin(2.0) // Вычисление синуса
1 = 2*Р1*г // Вычисление длины окружности

Объекты клиента и обработка событий

Как отмечалось выше, при интерпретации страницы HTML браузером соз-
даются объекты JavaScript, свойства которых представляют значения пара-
метров тэгов языка HTML. Объекты хранятся в виде иерархической струк-
туры, отражая структуру документа. Некоторые тэги HTML являются кон-
тейнерами, В которых могут размещаться другие тэги. Например, тэг формы
<FORM> содержит элементы управления, задаваемые тэгами <INPUT>. Эта под-
чиненность одних тэгов другим и образует структуру документа, отражаясь
в иерархической структуре объектов, соответствующих тэгам HTML.
Глава 9. Выполняемые сценарии 351

с Примечание
Не все свойства объектов могут соответствовать значениям параметров тэгов
HTML. Некоторые свойства могут получать значения от установленных свойств
самого браузера. Например, свойство fgColor объекта document отражает ус-
тановку цвета отображения текста на странице в диалоговом окне предпочте-
ний браузера Netscape Navigator.

Иерархия объектов
На самом верхнем уровне иерархии находится объект window, представляю-
щий окно браузера и являющийся "родителем" всех остальных объектов.
Расположенные ниже в иерархии объекты могут иметь свои подчиненные
объекты. На рис. 9.6 показана структура объектов клиента (браузера).

layer

it |

'—
Рис. 9.6. Иерархия объектов JavaScript на стороне клиента

Особняком стоит объект navigator с двумя дочерними (подчиненными) объ-

ектами. Он относится к самому браузеру, и его свойства позволяют опреде-
лить характеристики профаммы просмотра. Свойство appName содержит имя
браузера (для Internet Explorer, например, его значение равно "Microsoft
internet Explorer"), а свойство appVersion содержит информацию о версии
браузера (например, для Internet Explorer версии 4.01 его значение равно
"4.0 (compatible; MSIE 4.01; Windows 95)).
Каждая страница в добавление к объекту navigator обязательно имеет еще
четыре объекта:
О window — объект верхнего уровня, свойства которого применяются ко
всему окну, в котором отображается документ.
352 Часть II. Интерактивные Web-документы

О document — свойства которого определяются содержимым самого доку-

мента: связи, цвет фона, формы и т. д.
О location — свойства которого связаны с URL-адресом отображаемого
документа.
О history — представляет адреса ранее загружавшихся HTML-страниц.
Кроме указанных объектов страница может иметь дополнительные объекты,
зависящие от ее содержимого, которые являются дочерними объектами объ-
екта document. Если на странице расположена форма, то все ее элементы
являются дочерними объектами этой формы. Для задания точного имени
объекта используется точечная нотация с полным указанием всей цепочки
наследования объекта. Это возможно, так как объект верхнего уровня имеет
свойство, значением которого является объект нижнего уровня. Ссылка на
объект осуществляется по имени, заданному параметром NAME тэга HTML.
Например, пусть в документе задана форма с элементами:
<FORM NAME="forml">
Фамилия: <INPUT TYPE = "text" name = "studentName" size = 20>
Курс: <INPUT TYPE = "text" name = "course" size = 2>
</FORM>

Для получения фамилии студента, введенного в первом поле ввода, в программе

JavaScript следует ИСПОЛЬЗОВатЬ ССЫЛКУ document, [Link], a
чтобы определить курс, на котором обучается студент, необходимо исполь-
зовать ссылку document. forml. course. value.

( Примечание
При ссылке на формы и их элементы необязательно указывать объект верхне-
го уровня document. В приведенном примере сослаться на значение первого
поля ввода можно и так forml . studentName . value.

Совет
Для получения свойств объектов можно воспользоваться сценарием примера 9.3.

Свойства и методы ключевых объектов

Не все объекты иерархии интенсивно используются в сценариях JavaScript.
В данном разделе перечислены свойства и методы наиболее часто исполь-
зуемых объектов.

Объекты window и Frame

Объект window создается автоматически при запуске браузера, так как для
отображения документа необходимо окно. В меню Файл (File) любого брау-
зера есть команда Создать (New), позволяющая открыть новое окно и ото-
Глава 9. Выполняемые сценарии 353

бразить в нем новый документ, и команда Закрыть (Close) закрытия окна.

Эти действия можно осуществлять программно из приложения JavaScript,
применяя методы open () и close () объекта window.
Новое окно создается методом open ( } , который имеет следующий синтаксис:
MMH_nepeMeH_OKHa=window. open ( [имя_файла] , [имя_ссьшки_окна] , [параметры] )

Здесь:
имя_перемен_окна — имя для ссылки на новое окно в операторах JavaScript,
имя_Файла — полный или относительный URL-адрес открываемого в окне
документа,
имя_ссылки_окна — имя, указываемое в качестве цели в гипертекстовой
ссылке на это окно из другого документа HTML, параметры — задают значе-
ния параметров окна (ширина, высота, наличие панелей инструментов, по-
лос прокрутки и т. п.).

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

Например, следующий оператор:

winExample=[Link]
("[Link]
"linkWin","toolbar=no,scrollbars=yes")

открывает новое окно без панелей инструментов, но с полосами прокрутки,

на которое можно ссылаться в сценарии по имени winExampie, и загружает
в него документ, расположенный по адресу [Link]
/[Link]. На это окно можно ссылаться из другого документа по имени
"linkWin".
Вывод во вновь открытое окно осуществляется методом write () объекта
document этого окна. Например, в примере 9.3 можно отобразить свойства
объекта в новом окне с помощью следующего сценария:
<SCRIPT>
msgWindow=[Link]("","displayWindow","toolbar=no,scrollbars=yes")
[Link](properties(checkl, [Link]))
</SCRIPT>

Результат выполнения сценария показан на рис. 9.7.

Закрывается окно методом dose о без параметров. Окно документа, в кото-
ром находится сценарий, закрывается одним из следующих операторов:

123ак. 944
354 Часть II. Интерактивные Web-документы

[Link]()
[Link]()
closed

г Флажок
""'
Флажок. accessKey -
Флажок.аН = [object]
Флажок.checked = false
Флажок.children - [object]
Флажок. className -
Флажок clienffleight = 20
Флажок.dientLeft = 0
Флажок.clientTop = 0
Флажок.с1|еп1Ш1<№ = 20
Флажок.оЫаКИ =
Флажок. dataFormatAs =
Флажок.dataSrc =
Флажок.defaultchecked = false
Флажок.disabled - false
Флажок^осшпет = [object]
Флажок.filters = [object]
ФлажокТогт - null
Флажок.id =
Флажок, indeterminate - false
1

Рис. 9.7. Открытие нового окна и отображение в нем свойств объекта

Для закрытия окна, открытого методом open (), необходимо явно указывать
имя переменной этого окна:
[Link])
Метод alert о объекта window отображает диалоговое окно с текстом, пере-
даваемым в качестве параметра этому методу. Например, следующий сцена-
рий выводит диалоговое окно с информацией для пользователя, если неко-
торая переменная меньше нуля:
i f f myVar < 0) alert("Переменная 'myVar' стала отрицательной!")

Эта функция полезна в сценариях проверки правильности заполнения по-

лей формы перед отправкой формы на сервер.
В HTML тэг-контейнер <FRAMESET>. . .</FRAMESET> задает специальный тип
окна, называемый набором фреймов. Это окно может отображать несколько
независимых, каждый со своими полосами прокрутки фреймов на одном
экране. Каждый фрейм, в свою очередь, может отображать определенный
документ, расположенный по адресу, указанному в параметре SRC тэга
<FRAME>. Набор фреймов образует страницу, поэтому не надо задавать тэг
<BODY>.
Глава 9. Выполняемые сценарии 355

Тэг-контейнер <FRAMESET> может содержать, кроме тэгов <FRAME>, опреде-

ляющих фреймы, другие тэги <FRAMESET>, образуя, таким образом, вложен-
ные наборы фреймов. Пример HTML-страницы с вложенными наборами
фреймов представлен ниже:
<FRAMESET COLS="30%,70%">
<FRAMESET ROWS="30%,70%">
<FRAME SRC="./Часы.html" NAME="clockFrame">
<FRAME SRC="[Link]" NAME="menuFrame">
</FRAMESET>
<FRAME SRC="" NAME="contentFrame">
</FRAMESET>

Значение параметра NAME задает имя, по которому можно ссылаться на соот-

ветствующий фрейм в иерархии объектов документа. Отображение страницы
с фреймами можно увидеть на рис. 9.8.

Дата заполнения: Sun Jun 20 12:33:22 UTC+0400

1999

Проверка данных
формы

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

Рис. 9.8. Отображение страницы с фреймами

Эта страница содержит три фрейма, которые образуют иерархическую мо-

дель объектов Frame. На верхнем уровне расположен объект top, являющий-
ся родителем всех Трех фреймов на странице (clockFrame, menuFrame И
contentFrame). Для ссылки на фреймы страницы можно использовать либо
символические имена, либо свойство-массив frames объекта top, в котором
содержатся ссылки на все фреймы страницы. Так, на первый фрейм можно
сослаться двумя способами:
[Link]
ИЛИ
[Link][0]
356 Часть II. Интерактивные Web-документы

Свойство location объекта Frame содержит адрес загруженного во фрейм

документа. Изменение значения этого свойства приведет к загрузке нового
документа в соответствующий фрейм. Следующий фрагмент кода HTML
задает на странице [Link] кнопку с именем "Пример 1":
<INPUT TYPE="button" УАШЕ="Пример 1"
onClick="javascript: [Link]='npnMep_l.html'">
</FORM>

При щелчке на кнопке пример 1 выполняется код JavaScript, заданный в ка-

честве значения параметра обработки события onclick. Этот код меняет
значение свойства location фрейма contentFrame, что приводит к отображе-
нию в нем нового документа пример_1.Млй.
Если зафужаемый во фрейм документ сам содержит набор фреймов, то объ-
ектная модель немного усложняется. В этом случае все фреймы, отображае-
мого в заданном фрейме документа, являются подчиненными этому фрейму,
который, в свою очередь, порождается от объекта верхнего уровня top. Ес-
ли, например, в предыдущем примере файл [Link] будет содержать сле-
дующий код HTML:
<FRAMESET ROWS="30%,70%">
<FRAME SRC="[Link]" NAME="Framel">
<FRAME SRC="[Link]" NAME="Frame2">
</FRAMESET>

TO фреймы Framel И Frame2 будут порождаться фреймом menuFrame, И ДЛЯ

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

[Link]
[Link][2].frames[0]

В последней конструкции используется свойство-массив frames любого объ-

екта Frame.
Объект document
Этот объект содержит информацию о текущей зафуженной странице. Все
элементы страницы HTML представляются свойствами объекта document
(см. рис. 9.6). Для каждой страницы создается один объект document, неко-
торые свойства которого соответствуют параметрам тэга-контейнера <BODY>:
bgColor, fgColor, linkColor, alinkColor И vlinkColor. При работе С ЭТИМ объ-
ектом полезно его свойство URL, содержащее адрес загруженного документа.
Этот объект используется наиболее часто в связи с его двумя полезными
методами write о и writeino, которые записывают в документ информа-
цию и, тем самым, позволяют динамически его создавать.
Глава 9. Выполняемые сценарии 357

Объекты location и history

Объект location связан с текущим URL-адресом. Его свойства позволяют
получить информацию о хост-машине, с которой в данный момент связан
браузер. Например, свойство hostname содержит имя хоста, свойство port —
номер порта, к которому подсоединен браузер на хост-машине.
Два метода объекта location связаны с загрузкой HTML-страниц. Метод
reload () перезагружает в браузер текущую страницу, а метод replace () за-
гружает в окно браузера страницу, адрес которой задан в качестве его пара-
метра.
Объект history содержит список адресов HTML-документов, ранее загру-
жавшихся в браузер. Получить адреса текущей, следующей и предыдущей
страницы можно с помощью соответственно свойств current, next и
previous этого объекта.
Метод до ( ) этого объекта загружает страницу из списка посещенных. Теку-
щая страница имеет индекс 0, предыдущие по отношению к текущей стра-
ницы индексируются отрицательными целыми числами, а последующие -
положительными целыми числами. Например, следующий оператор
history.до(-З)

загрузит страницу, расположенную на три пункта назад по отношению

к текущей в списке посещенных страниц.

Объекты Form
Каждая форма в документе, определенная тэгом <FORM>, создает объект Form,
порождаемый объектом document. Ссылка на этот объект осуществляется с
помощью переменной, определенной в параметре NAME тэга <FORM>. В доку-
менте может быть несколько форм, поэтому для удобства ссылок и обработ-
ки в объект Form введено свойство-массив forms, в котором содержатся
ссылки на все формы документа. Ссылка на первую форму задается как
document, forms [0 ], на вторую — document. forms [ 1 ] И Т. Д. Вместо индекса В
массиве forms можно указывать строку, значение которой равно имени пе-
ременной для формы. Например, если создана одна форма
<FORM NAME="forml">
Информация пользователя:
<INPUT TYPE="text" NAME="textl" value="BBenMTe что-нибудь"><HR>
<INPUT TYPE="submit" NAME="subButton">
</FORM>

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

[Link][0]
[Link]["forml"]
[Link]
358 Часть II. Интерактивные Web-документы

Последний оператор возможен в силу того, что объект document порождает

объект Form, и ссылку на него можно осуществлять по обычным правилам
наследования языка JavaScript.
Все элементы формы порождают соответствующие объекты, подчиненные
объекту родительской формы (см. рис. 9.6). Таким образом, для ссылки на
объект Text формы formi следует пользоваться любым из нижеприведенных
операторов:
[Link][0].textI
[Link]["forml"].textl
[Link]

Каждый объект Form имеет также свойство-массив elements, содержащий

ссылки на все подчиненные форме элементы в том порядке, как они опре-
делены в документе HTML.
Элементы формы, точнее их объекты, имеют свойство name, значение кото-
рого равно значению параметра NAME тэга <INPUT>, а также свойство value,
значение которого определяется смыслом параметра VALUE элемента формы.
Например, для элементов text и textarea значением этого свойства будет
строка содержимого полей ввода этих элементов, для кнопки подтвержде-
ния — надпись на кнопке и т. д.

Свойства-массивы объектов
Некоторые объекты имеют свойства, которые являются массивами. Они ис-
пользуются для хранения информации о подчиненных объектах, когда их
количество заранее не известно (например, массив forms объекта document
или массив elements объекта Form). В табл. 9.8 перечислены все объекты,
обладающие свойствами-массивами.

Таблица 9.8. Свойства-массивы объектов JavaScript

Объект Свойство Описание

document anchors Отражает тэги <А> в порядке их появления в документе

applets Отражает тэги <APPLET> в порядке их появления в доку-
менте
embeds Отражает тэги <EMBED> в порядке их появления в доку-
менте
forms Отражает тэги <FORM> в порядке их появления в доку-
менте
images Отражает тэги <IMG> в порядке их появления в документе
Глава 9. Выполняемые сценарии 359

Таблица 9.8 (окончание)

Объект Свойство Описание

document links Отражает тэги <AREA HREF="..."> и <А HREF="">, a

также объекты link, созданные методом link о в по-
рядке их появления в документе
function arguments Отражает параметры функции
form elements Отражает элементы формы в порядке их перечисления в
тэге <FORM>
select options Отражает опции объекта select (тэг <OPTION>) в поряд-
ке их появления
window frames Отражает тэги <FRAME> в окне, содержащем тэг
<FRAMESET>, в порядке их появления в документе
History Отражает элементы объекта history

Navigator MimeTypes Отражает все типы MIME, поддерживаемые браузером

Plug ins Отражает все установленные дополнительные приложе-
ния для браузера

Работа с перечисленными массивами аналогична работе с массивом forms,

описанным выше в разделе "Объекты Form".

Обработчики событий
Интерактивные страницы должны реагировать на действия пользователя.
Например, при нажатии на кнопку появляется диалоговое окно с сообще-
нием, или выполняется проверка правильности введенных пользователем
данных в полях формы.
В JavaScript подобная интерактивность реализована возможностью перехвата
и обработки событий, возникающих в результате действий пользователя.
Для этого в тэги некоторых элементов (объектов с точки зрения JavaScript)
введены параметры обработки событий, задающие действия, выполняемые
при возникновении события, связанного с элементом. Имя параметра обра-
ботки события начинается с приставки on, за которой следует название со-
бытия. Если событием является, например, щелчок кнопкой мыши click, то
соответствующий параметр обработки этого события называется onclick;
если обрабатываемым событием является нажатие кнопки мыши MouseDown,
то параметр называется onMouseDown.
В табл. 9.9 представлены возможные события, и в каких элементах докумен-
та HTML они могут инициализироваться.
360 Часть II. Интерактивные Web-документы

Таблица 9.9. События JavaScript

Событие Применяется Когда происходит событие Обработчик

к объектам события
Abort image Пользователь отказывается onAbort
от загрузки изображения
Blur window Потеря объектом фокуса onBlur
и все объекты формы
Change text, textarea, Пользователь изменяет onChange
select значение элемента
Click button, radio, Щелчок на элементе формы onclick
checkbox, submit, или связи
reset, link
DragDrop window Пользователь перетаскивает onDragDrop
мышью объект в окно брау-
зера, например файл
Error image, window Загрузка документа или изо- onError
бражения вызывает ошибку
Focus window и все объекты Окно или элемент формы onFocus
формы получает фокус
KeyDown document, image, Пользователь нажимает кла- onKeyDown
link, textarea вишу клавиатуры
KeyPress document, image, Пользователь удерживает onKeypress
link, textarea нажатой клавишу клавиатуры
KeyUp document, image, Пользователь отпускает опКеуир
link, textarea клавишу клавиатуры
Load Тело документа Загружается документ onLoad
в браузер
MouseDown document, button, Пользователь нажимает onMouseDown
link кнопку мыши
MouseMove Никакой Пользователь перемещает onMouseMove
курсор мыши
MouseOut area, link Пользователь перемещает onMouseOut
курсор из области изображе-
ния или со связи
MouseOver link Пользователь перемещает onMouseOver
курсор над связью
MouseUp document, button, Пользователь отпускает onMouseUp
link кнопку мыши
Move window Пользователь или сценарий onMove
перемещает окно
Глава 9. Выполняемые сценарии 361

Таблица 9.9 (окончание)

Событие Применяется Когда происходит событие Обработчик

к объектам события

Reset form Пользователь нажимает onReset

кнопку Reset формы
Resize window Пользователь или сценарий onResize
изменяет размеры окна
Select text, textarea Пользователь выбирает поле onSelect
ввода элемента формы
Submit form Пользователь нажимает onSubmit
кнопку Submit формы
Unload Тело документа Пользователь закрывает onUnload
документ

Хорошим стилем программирования является оформление действий, вы-

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

Процедуры JavaScript
Процедура, или функция, — это именованная последовательность операторов,
которая инициализируется и выполняется простой ссылкой на имя функции.
Процедура задается оператором function, имеющим следующий синтаксис:
function имя_функции ( [параметры] ) {
[операторы]

где имя_функции — любое правильное имя языка JavaScript, параметры — спи-

сок передаваемых в процедуру параметров, элементы которого отделяются
запятыми.
Оператор function только определяет процедуру, но не выполняет ее. Для
вызова процедуры достаточно указать ее имя с заданными в скобках пара-
метрами.

Примечание
Если в процедуре параметры отсутствуют, наличие скобок без параметров
в операторе вызова процедуры обязательно.
Процедура может возвращать некоторое вычисляемое в ней значение.
В этом случае обычно она называется функцией, и в операторах, опреде-
ляющих последовательность выполняемых ею действий, обязательно должен
присутствовать оператор return, задающий возвращаемое функцией значе-
362 _ Часть II. Интерактивные Web-документы

ние. Вызов функции осуществляется аналогично вызову процедуры, но ее

можно использовать в выражениях JavaScript.
Обычно все определения процедур и функций задаются в разделе <HEAD>
документа. Это обеспечивает интерпретацию и сохранение в памяти всех
процедур при загрузке документа в браузер.
С процедурами и обработчиками событий тесно связано ключевое слово this.

Ключевое слово this

Ключевое слово this используется для ссылки на текущий объект и обычно
применяется для ссылки на объект при вызове процедуры обработки собы-
тий в обработчике событий элемента.
Предположим, что для проверки правильности ввода в текстовое поле курса,
на котором учится студент, написана процедура validate:
function validate (obj ){
iff obj. value < 1 I I obj. value > 6) {
alert ("Правильно введите Ваш курс")

Вызов этой процедуры в обработчике событий элемента формы осуществля-

ется следующим образом:
<FORM NAME="forml">
<ВЖурс, на котором учитесь :</В>
<INPUT TYPE="text" NAME="textl" SIZE=3
onChange=" validate (this. form. text 1} ">
</FORM>

Ключевое слово this в данном контексте ссылается на элемент Текстовое

поле ввода texti. Свойство form этого объекта содержит ссылку на текущую
форму. Таким образом, получается правильная ссылка на поле ввода в кон-
тексте объектной модели документа: document. [Link].

Объект event
В JavaScript каждое событие порождает ассоциированный с ним объект
event. Этот объект содержит всю информацию о событии и его можно пере-
дать процедуре обработки события.
Информация о событии зависит от конкретного произошедшего события.
Например, объект event события MouseDown содержит информацию о типе
события (свойство type), какая кнопки мыши была нажата (свойство which),
какая клавиша (Alt, Shift или Ctrl) удерживалась при щелчке кнопкой
мыши (свойство modifiers), и значения координат курсора мыши в момент
возникновения События (свойства screenX И screenY).
Глава 9. Выполняемые сценарии _ 363

Объекты event совместно с обработчиками событий позволяют проводить

достаточно тонкую обработку события.
Вызов процедуры обработки события
Вызов процедуры обработки события можно осуществить двумя способами:
П явно — назначив ссылку на процедуру обработки события в соответст-
вующем свойстве объекта;
П неявно — в параметре обработки события тэга соответствующего элемента.
Каждый объект JavaScript, создаваемый для элементов HTML-документа,
имеет свойства, ассоциированные с возможными событиями, которые мо-
гут быть сгенерированы для этого элемента. Присвоив этому свойству в ка-
честве значения ссылку на процедуру обработки события, мы, тем самым,
определим процедуру, которая будет вызываться при возникновении соот-
ветствующего события. Например, следующий код определяет процедуру
showEventType как процедуру обработки события MouseDown кнопки формы:
<FORM NAME="forml">
<INPUT TYPE="button" NAME="buttonl" УАЪиЕ="Узнай событие">
<SCRIPT>
document. forml. button. onmousedown = showEventType
</SCRIPT>
</FORM>

Сама процедура задается следующим кодом:

function showEventType (e) {
alert ("Произошло событие: " + [Link])

Обратим внимание на то, что, присваивая ссылку на процедуру, мы не зада-

ем в скобках никаких параметров. Это связано с тем, что любая процедура
в JavaScript представляется как объект. Поэтому указание имени процедуры
(объекта) однозначно определяет ссылку на нее.
В объявлении функции showEventType присутствует параметр е, свойство
type которого выводится в диалоговом окне. При явном вызове процедуры
обработки события объект event передается ей по умолчанию, поэтому
в данном случае печатается значение свойства type объекта event, т. е. тип
СОбЫТИЯ — MouseDown.
Второй, неявный вызов процедуры обработки события требует задания об-
ращения к ней в параметре onMouseoown тэга <INPUT>. При этом необходимо
явно указывать параметр event, как показано в следующем фрагменте кода:
<FORM NAME="forml">
<INPUT TYPE="button" NAME="buttonl" УАШЕ="Узнай событие"
364 Часть II. Интерактивные Web-документы

onMouseDown = "showEventType(event)" >

</FORM>

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

Часы JavaScript
Как отмечалось выше, нельзя изменить содержимое HTML-страницы после
ее загрузки в окно браузера. Однако можно динамически с помощью функ-
ций JavaScript менять содержимое полей форм, что и используется при ото-
бражении текущего времени на странице.
Прежде всего создадим HTML-страницу с текстовым полем, в которое бу-
дем выводить текущее время:
<HEAD>
</HEAD>
<BODY bgcolor="#FFCCOO" onLoad=" JSClock ( ) ">
<FORM NAME="clockForm">
<INPUT TYPE="text" NAME="digits" SIZE=8 VALUE="">
</FORM>
</BODY>

При загрузке документа вызывается функция jsciock ( ) , которая определяет

и отображает в поле digits формы clockForm текущее время. Определение
самой функции разместим в разделе <HEAD> документа:
<SCRIPT LANGUAGE="JavaScript">
<! — //Скрыть сценарий от браузеров, не поддерживающих JavaScript
function JSClock () {
var time =• new Date{)
var hour = [Link] ()
var minute = [Link] ( )
var second = [Link] ( )
var temp = "" + hour
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
document . clockForm. digits . value = temp
id = setTimeout ("JSClock () ",1000)

</SCRIPT>
Глава 9. Выполняемые сценарии 365

При вызове функции переменная time содержит ссылку на объект Date,

в котором хранится текущее время. Методы getHoursO, getMinutesO
и getseconds () объекта Date определяют часы, минуты и секунды, задава-
емые системными часами. В переменной temp формируется строка
"часы:минуты: секунды" ДЛЯ Отображения В ПОЛС digits формы clockForm.
Наиболее интересный оператор этой процедуры — оператор вызова функ-
ции setTimeout ( ) . Эта функция выполняет указанные в первом параметре
действия по истечении интервала времени (в миллисекундах), задаваемого
вторым параметром. В нашем случае через одну секунду снова вызовется
функция jsciocko, отобразит в поле формы текущее время, и процесс по-
вторится снова.

Простое меню
На HTML-страницах часто можно встретить меню на фоне привлекательной
картинки. При выборе команды такого меню изменяется цветовая гамма ее
фона. Подобное меню легко создается с помощью любого языка сценария,
в том числе JavaScript.
Прежде всего необходимо выбрать рисунок для фона меню и разрезать его
на составные части, представляющие обрамление и команды меню, как по-
казано на рис. 9.9, и сохранить их в отдельных графических файлах.
Добавить названия команд меню в соответствующие графические файлы.
Теперь остается только создать новые картинки, которые будут отображать-
ся вместо исходных картинок при расположении курсора мыши над соот-
ветствующей командой. Эти картинки должны отличаться только цветом
фона. Заготовки графических файлов для одной из команд меню примера
показаны на рис. 9.10.
римечание
Фон графического файла для команды соответствует фону исходной картинки
для меню (желтая цветовая гамма); фон графического файла для выбранной
команды реализован в синих тонах.

Исходная картинка
для фона меню Верхнее обрамление

Команда 1

Команда 2

Нижнее обрамление

Рис. 9.9. Разбиение картинки фона на составные части

366 Часть II. Интерактивные Web-документы

Художники
Команда Выбранная команда

Рис. 9.10. Графические файлы команды и выбранной команды меню

Примечание
Графические картинки подобного типа достаточно просто можно сделать с по-
мощью, например, программы Adobe Photoshop.
В HTML-документе меню создается в виде таблицы, в ячейках которой рас-
полагаются графические файлы, причем файлы с командами меню распо-
лагаются в тэге <А>, содержащем ссылки на загружаемые документы:
<body bgcolor="#FFCCOO" leftmargin="0" text="#FFFFOO" link="#FFFFOO"
vlink="#FFFFOO" topmargin="0">
<div align="left">
•stable border="0" width="152" cellspacing="0" cellpadding="0">
<tr>
<td align="left" width="152"> <img src="M-Up. jpg" border="0"
WIDTH="152" HEIGHT="50"X/td>
</tr>
<tr>
<td align="left" width="152"> <a href ="artist. htm"
onMouseOver="enter ( ' 10 ' ) " onMouseOut="out ( '10') "ximg name="iO"
src="[Link]" border="0" WIDTH="152" HEIGHT="26"X/a></td>
</tr>
<tr>
<td align="left" width="152"> <a href ="poet. htm"
onMouseOver="enter ( ' il ' ) " onMouseOut="out ( 'il ' ) "ximg name="il"
src="[Link]" border="0" " WIDTH="152" HEIGHT="22"x/aX/td>
</tr>
<tr>
<td align="left" width="152"ximg src="M- Down. jpg" border="0"
WIDTH="152" HEIGHT="50"X/td>
</tr>
</table>

</body>

Обработчики событий onMouseOver и onMouseOut вызывают процедуры, ко-

торые загружают либо графический образ невыбранной команды, либо гра-
фический образ выбранной команды. Эти и другие необходимые процедуры
располагаются в разделе <HEAD> документа и представлены ниже:
<title>MENU</title>
<script LANGUAGE="JavaScript">
Глава 9. Выполняемые сценарии _ 367

var MAX = 1;
var img = new MakeArray(MAX) ;
function MakeArray (n) {
for( var i=0; i<n;
this['i'+i]=0;
}
[Link]=n;
[Link]=0;
return this;
}
function Images (org, swap) (
if (document. images) {
this . org = new Image ( ) ;
this. org. src = org;
this . swap = new Image ( ) ;
this. swap, src = swap;

function Add (name, id) {

img[id] = new Images (name+" .gif", name+"_m.gif ") ;
}
function enter (id) {
if (document . images) {
document. images [id] .src = img [id] .swap. src;

function out (id) {

if (document. images) {
document. images [id] .src = img [id] .org. src;

Add("mO","iO") ;

</script>

Сначала создается массив img (с помощью конструктора MakeArrayo), к эле-

ментам которого можно ссылаться по индексу с именем объекта, который
в нем хранится. В нашем случае в этом массиве будут храниться графические
образы невыбранной и выбранной команды меню. Конструктор images о
как раз и предназначен для создания объекта, хранящего подобные графи-
ческие объекты. Функция Add о добавляет в массив img объекты, содержа-
щие по два графических файла для каждой команды меню. Назначение
функций enter о и out о — отобразить соответствующий графический файл
368 Часть II. Интерактивные Web-документы

при расположении курсора мыши над командой и при выходе курсора из

области команды. Результаты работы меню можно видеть на рис. 9.11.

Рис. 9.11. Меню,

созданное в примере
Обычное меню Меню с выбранной командой

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

Документ с фреймами
В этом примере мы объединим два предыдущих и создадим полноценную
HTML-страницу, в одном из фреймов которой будет отображаться текущее
время, в другом располагаться меню, а в третий — загружаться соответст-
вующие документы при выборе команд меню.
Текст основной страницы представлен ниже и не требует пояснений:
<HEAD>
</HEAD>
<FRAMESET COLS="152,*" border="0">
<FRAMESET ROWS="70,*">
<FRAME SRC="[Link]" NAME="clockFrame">
<FRAME SRC= "menu. html" NAME="menuFrame">
</FRAMESET>
<FRAME SRC="" NAME="contentFrame">
</FRAMESET>

Каждый фрейм имеет имя, заданное в параметре NAME, по которому можно

ссылаться на него в тексте JavaScript. Файл часы. html является файлом пер-
вого примера данного раздела, файл [Link] содержит код документа,
реализующего меню с небольшим дополнением: в раздел <HEAD> необходимо
внести дополнение для указания интерпретатору, что все HTML-страницы,
на которые имеются ссылки, должны загружаться во фрейм с именем
contentFrame. Для этой цели необходимо добавить следующий тэг:
<BASE TARGET="contentFrame">
Глава 9. Выполняемые сценарии 369

Естественно, необходимо создать все HTML-документы, на которые имеет-

ся ссылка в меню страницы. Результат отображения страницы показан на
рис. 9.12.

'ЗОЛИнтераюин1|ые\Примери\11ример б html Microsoft Internet Explorer

.•

Рис. 9.12. Отображение в браузере страницы примера

Язык VBScript
Язык создания сценариев VBScript разработан фирмой Microsoft и является
подмножеством достаточно распространенного в среде программистов языка
Visual Basic разработки прикладных Windows-приложений. Как и его роди-
тель, язык VBScript достаточно прост и легок в изучении.
Преимуществом его применения для создания сценариев является возмож-
ность использования, с небольшими корректировками, ранее написанных
процедур на языках Visual Basic и Visual Basic for Application.
Функциональные возможности сценариев, написанных на VBScript, ничем
не отличаются от возможностей сценариев JavaScript: динамическое созда-
ние документа или его частей, перехват и обработка событий и т. д.
VBScript используется для написания сценариев клиента (в этом случае
браузер должен иметь встроенный интерпретатор этого языка), а также для
написания сценариев на сервере (в этом случае сервер должен поддерживать
язык VBScript). Для создания сценариев клиента используется набор объек-
370 Часть II. Интерактивные Web-документы

тов, аналогичный набору объектов JavaScript (см. выше раздел "Язык создания
сценариев JavaScript"). Объекты клиента и сервера отличаются друг от друга,
но существует общая часть (ядро) объектов, используемых при разработке
как сценариев клиента, так и сценариев сервера.

Основные понятия
В этом разделе вводятся основные понятия языка VBScript, необходимые
для написания кода сценариев.

Типы данных
В VBScript определен только один тип данных — Variant. Это универсаль-
ный тип, в котором можно хранить информацию, представленную другими
типами данных, применяемыми в программировании, начиная от простей-
шего целого и заканчивая объектами.
В своем простейшем использовании тип variant содержит либо числовые
данные, либо символьные строки — типы данных, наиболее часто встречае-
мые при написании сценария. Реально содержащиеся в вариантном типе
данные могут быть одного из типов, называемых подтипами типа variant,
представленных в табл. 9.10. Собственно говоря, эти подтипы охватывают
все возможные типы данных, которые используются в языках Visual Basic и
Visual Basic for Application.

Таблица 9.10. Подтипы данных, хранящихся в типе variant

Подтип Описание Функция

преобразования

Переменная не инициализирована
Null Переменная не содержит никаких допустимых
данных
Error Содержит номер ошибки
Boolean Содержит значения либо True, либо False CBool
Byte Содержит целые числа в диапазоне от 0 до 255 CByte
Integer Содержит целые числа в диапазоне от -32 768 cint
до 32 767
Currency Значения в диапазоне CCur
от -922 337 203 685 477.5808
до 922 337 203 685 477.5807
Long Содержит целые числа в диапазоне CLng
от -2 147 483 648 до 2 147 483 647
Глава 9. Выполняемые сценарии 371

Таблица 9.10 (окончание)

Подтип Описание Функция

преобразования

Single Содержит вещественные числа с плавающей csng

точкой одинарной точности в диапазоне
от-3.402823Е38 до -1.401298Е-45
для отрицательных значений
И от 1.401298Е-45 до 3.402823Е38
для положительных значений
Double Содержит вещественные числа с плавающей CDbl
точкой удвоенной точности в диапазоне
от -1.79769313486232Е308
до -4.94065645841247Е-324 для отрицательных
значений и от 4.94065645841247Е-324
до 1.79769313486232Е308
для положительных значений
Date (Time) Содержит число, которое представляет дату CDate
в диапазоне от 1 января 100 года до 31 декабря
9999 года
String Содержит строку переменной длины cstr
(до 2 миллионов символов)
Object Содержит ссылку на объект

Первые три подтипа, собственно говоря, не являются подтипами, а пред-

ставляют значения, которые может принимать вариантный тип.
Значение Empty имеет переменная, которая была объявлена в операторе Dim
(см. ниже), но ей еще не присваивали никакого значения. Это значение
считается равным 0 в математических операциях и равным пустой строке
("") в операциях со строковыми значениями.
Значение Null означает, что переменная не содержит данных. Его не следует
путать со значением Empty. Вариантная переменная может получить значе-
ние Null в результате выполнения некоторых операций над ней. Это значе-
ние можно присвоить переменной, тогда как значение Empty — нельзя.
Значение Error — это специальное значение, которое используется для ука-
зания возникновения ошибки в процедуре.
Каждый подтип данных задается с помощью литералов (символьных кон-
стант). Числовые литералы представляют собой целые числа, действитель-
ные числа с плавающей или фиксированной точкой. Примеры числовых
литералов приведены ниже:
23 ' Целое число
-23.78 ' Действительное число с фиксированной точкой
-237.8Е-1 ' Действительное число с плавающей точкой
372 Часть II. Интерактивные Web-документы

Строковые литералы задаются в виде последовательности символов, заклю-

ченных в двойные кавычки ("):
"Это строковый литерал".

Литералы даты и времени заключаются между символами числовых знаков

(#). VBScript поддерживает большое число форматов даты и времени. Сле-
дующие примеры показывают правильные литералы даты и времени, соот-
ветствующие дате 10 июня 1999 года:
#10-6-99 22:20#
#10/6/99*
#10/6/99 10:20рт#

Внутренне литералы даты и времени представляются в виде действительных

чисел удвоенной точности. Целая часть представляет количество дней, про-
шедших от даты 30 декабря 1899 года, а дробная часть — время суток.
Булевы литералы True и False являются константами целого типа, прини-
мающими соответственно значения i и о. Любое числовое значение, не рав-
ное нулю, преобразуется функцией своо! в True, а нулевое значение (целое
или действительное) — в False.
Вариантный тип данных при использовании в выражениях в качестве опе-
рандов разнообразных операторов языка обрабатывается в зависимости от
подтипа содержащихся в нем данных. Например, при использовании пере-
менных этого типа данных в операторе сложения (+) результат зависит от
того, какие подтипы данных в них содержатся. Если хотя бы один из опе-
рандов содержит число, то результатом будет сумма значений двух перемен-
ных (содержимое второго операнда преобразуется к числовому подтипу),
если оба операнда содержат строковые данные, то результатом будет конка-
тенация строк.
Вариантный тип данных предоставляет программисту более эффективный
способ обработки и хранения данных, не заботясь о типе хранимых данных.
Если, например, при вычислениях первоначально в переменной вариант-
ного типа хранилось значение типа Byte (число в диапазоне от 0 до 255), и
в результате выполнения некоторых действий это значение стало отрица-
тельным, то просто изменится представление этого числа в переменной (оно
станет типа integer) и не возникнет никакой ошибки. Правда, за это удоб-
ство приходится платить используемой памятью: для вариантного типа дан-
ных вне зависимости от хранимого подтипа нужно 16 байт памяти.
Иногда в некоторых вычислениях необходимо явно преобразовать содержа-
щийся в переменной подтип в другой. Для этого в VBScript имеется ряд
функций преобразования в соответствующие типы. В табл. 9.10 последний
столбец содержит имена функций преобразования в соответствующий под-
Глава 9. Выполняемые сценарии 373

тип. Эти функции в качестве параметра принимают литералы, переменные

и выражения.

Переменные, массивы и константы

Переменные используются для хранения данных приложения. Прежде чем
переменную можно будет использовать, ее необходимо объявить. Это можно
осуществить явным способом с помощью оператора Dim, или неявным -
просто использовать имя переменной в операторе присваивания. Синтаксис
оператора явного объявления переменной следующий:
Dim имя_переменной
Параметр имя_переменной — имя объявляемой переменной. Оно должно на-
чинаться с буквы, не содержать пробелов, точку (.), восклицательный знак
(i), а также символов (@), (&), ($), (#) и не превышать длину в 255 символов.
Язык VBScript не чувствителен к регистру. Это означает, что в нем не раз-
личаются строчные и прописные буквы. Поэтому, например, и т, и м будут
ссылаться на одну и ту же переменную, если используются в качестве иден-
тификатора переменной.
В одном операторе Dim можно объявлять несколько переменных, которые
в списке параметров задаются через запятую.
Так как в VBScript определен только один тип данных variant, то и все, ис-
пользуемые в приложении переменные, также имеют тип variant.

( Примечане
Вместо оператора Dim можно использовать операторы Private и Public для
объявления переменной. Эти операторы, наследуемые VBScript от Visual Basic
и задающие там локальные и открытые переменные соответственно, в VBScript
выполняют функции, аналогичные оператору Dim.

Иногда возникает необходимость хранить данные в массивах, обращаясь

к ним с помощью индекса. VBScript поддерживает одномерные и многомер-
ные массивы двух типов:
П Статические массивы
О Динамические массивы
Любой тип массива определяется оператором Dim. Отличие от объявления
переменной заключается в том, что после имени массива в круглых скобках
указывается его размерность. Синтаксис задания массива следующий:
Dim имя_массива([индексы])
Параметром индексы задается число размерностей массива и протяженность
каждой размерности. Если этот параметр представляет одно целое число, то
он задает одномерный массив, содержащий число элементов на единицу
374 Часть II. Интерактивные Web-документы

больше значения параметра. Это связано с тем, что первый элемент массива
имеет индекс нуль. Например, следующий оператор
Dim M ( 9 )

задает массив, состоящий из 10 элементов: первый элемент— М ( 0 ) , вто-

рой — М(1) И Т. Д.
Если параметр индексы задан в виде последовательности целых чисел, разде-
ленных запятыми, то оператор Dim задает многомерный массив. Количество
чисел в списке определяет число размерностей массива, а значение каждого
индекса равно количеству элементов массива, соответствующих этой раз-
мерности, минус единица. Следующий оператор задает двумерный массив,
или таблицу из 10 строк и 4 столбцов:
Dim B ( 9 , 3 )
Для получения значения элемента массива следует указать имя массива и
индексы элемента. Например, чтобы получить значение элемента, находя-
щегося на пересечении второй строки и третьего столбца массива в, следует
использовать запись

Число размерностей можно задавать до 60, хотя следует учитывать, что с

увеличением числа размерностей катастрофически увеличивается требуемое
количество памяти для размещения массива.
Задание параметра индексы определяет так называемые статические массивы,
т. е. массивы, количество элементов и размерности которого известны и не
могут быть изменены в процессе выполнения приложения.
Если при задании массива отсутствует параметр индексы, то такая конструк-
ция определяет динамический массив, размерность и протяженность каждой
размерности которого могут меняться в процессе выполнения программы.
Для задания числа размерностей и их протяженности применяется оператор
ReDim, синтаксис которого аналогичен синтаксису оператора Dim при зада-
нии статических массивов:
Dim Array()

ReDim Array(3)

В этом фрагменте оператор Dim задает динамический массив Array, а в опе-

раторе ReDim назначается его размерность.
В программе можно неограниченное число раз изменять размерности дина-
мических массивов. Следует только учитывать, что при новом переопреде-
лении размерности массива, его предыдущие элементы могут быть потеряны.
Глава 9. Выполняемые сценарии 375

Во избежание потери старых значений элементов динамического массива

при новом его распределении, следует использовать в операторе ReDim клю-
чевое слово Preserve, как показано в следующем примере:
Dim Array()

ReDim Array(3)

ReDim Preserve Array(Ubound(Array)+1)

В этом фрагменте используется функция abound для определения верхней

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

С Примечание )
Для многомерных массивов можно изменять протяженность только последней
размерности массива. Любая попытка изменения протяженности не последней
размерности приведет к ошибке интерпретатора.
Иногда в программе необходимо задавать переменные, значения которых
нельзя изменять. Такие переменные называются именованными константа-
ми. В VBScript для задания констант существует оператор const, имеющий
следующий синтаксис:
Const имя_константы = значение
Параметр значение представляет собой любой допустимый литерал. Напри-
мер, следующий фрагмент кода определяет несколько констант разных под-
типов:
Const conName = "Александр" ' Строковая константа
Const conPi = 3.1416 ' Числовая константа
Const conBirthDay = ttl-8-53tt ' Константа даты

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

Операторы
При вычислении выражений необходимо производить разнообразные дейст-
вия с переменными и литералами. Для этих целей в VBScript предусмотрен
ряд встроенных операторов, выполняющих арифметические операции, опе-
рации сравнения, конкатенацию (соединение) строк и логические операции
над данными, хранящимися в переменных, или представленными литералами.
376 Часть II. Интерактивные Web-документы

В VBScript каждый оператор размещается на отдельной строке и не завер-

шается никаким разделителем. Однако, если возникает необходимость за-
дания нескольких операторов в одной строке, то они разделяются двоето-
чием (:).
Если оператор достаточно длинный, или из соображений удобства чтения
исходного текста необходимо расположить его в нескольких строках, то сле-
дует использовать символы продолжения — пробел со знаком подчеркива-
ния (_).
Комментарии в языке VBScript вводятся в текст программы одинарной ка-
вычкой (')• Любой текст, расположенный в строке за одинарной кавычкой,
трактуется интерпретатором как комментарий, и, естественно, не обрабаты-
вается им.
Большую группу представляют арифметические операторы, выполняющие
основные арифметические действия над числовыми данными: возведение в
степень (А), умножение (*), деление (/), целочисленное деление (\), сложе-
ние (+) и вычитание (-). Они подчиняются принятым в математике прави-
лам старшинства операций: сначала выполняется возведение в степень, за-
тем умножение или деление, далее сложение или вычитание. Скобки изме-
няют последовательность вычисления операций.

Примечание
Так как в VBScript существует только один тип данных variant, то интерпретатор
языка преобразует хранящиеся в вариантных переменных не числовые подти-
пы данных в числовые, и производит указанные в выражении арифметические
операции. Если подтип данных не может быть конвертирован в правильное
число, то генерируется ошибка.

Предупреждение
Оператор сложения (+), примененный к операндам, содержащим строковые
данные, выполняет операцию конкатенации строк, а не сложение преобразо-
ванного в числовые данные содержимого обоих операндов. Для выполнения
операции конкатенации в VBScript существует специальный оператор (&), кото-
рым и следует пользоваться для соединения строковых данных.
Для сравнения данных используются операторы сравнения: равенство (=),
неравенство (<>), меньше (<), больше (>), меньше или равно (<=), больше
или равно (>=). Объекты сравниваются с помощью специального оператора is.

(~ Примечание ^
В VBScript нет специального знака для операции присваивания. Один и тот же
знак равенства используется как для операции присваивания значения пере-
менной (см. выше), так и для операции сравнения на равенство. Смысл опера-
ции, представляемой этим символом, зависит от контекста, в котором она при-
менена.
Глава 9. Выполняемые сценарии 377

Существует ряд операторов, выполняющих действия над логическими

(булевыми) данными: отрицание (Not), конъюнкция (And), дизъюнкция (or),
исключающее ИЛИ (хог), эквивалентность (Eqv) и импликация (imp). Эти
операции используются в операторах условия для вычисления выражений,
истинность (или ложность) которых позволяет изменить поток выполнения
операторов языка.
Оператор (&) производит конкатенацию (соединение) двух строк. При его
выполнении данные, содержащиеся в операндах, преобразуются при необ-
ходимости к строковому подтипу, и осуществляется сцепление двух строк.

Операторы условия и цикла

Операторы сценария выполняются последовательно в том порядке, как они
записаны. Изменить порядок выполнения операторов в VBScript можно
операторами условия и цикла.
Операторы принятия решения (условные операторы) выполняют опреде-
ленные блоки операторов в зависимости от результатов проверки некото-
рого выражения или выражений. VBScript поддерживает следующие конст-
рукции операторов принятия решения:
П If...Then
П If...Then...Else
П Select Case
Конструкция if...Then применяется, когда необходимо выполнить группу
операторов или один оператор в зависимости от значения выражения, зада-
ваемого в качестве параметра условия конструкции.
Ее первая форма
If условие Then оператор
позволяет вычислить указанный оператор, если истинно заданное условие.
Вторая форма этой конструкции позволяет вычислить группу операторов,
заданных в нескольких строках кода, и имеет следующий синтаксис:
If условие Then
операторы
End If

Примечание
Во всех условных операторах проверяемое на истинность условие не обяза-
тельно должно быть сравнением. Оно может быть любым вычисляемым выра-
жением, которое интерпретируется как ложь, в случае нулевого значения, и как
истина — в противном случае.
378 Часть II. Интерактивные Web-документы

Наиболее общий синтаксис конструкции i f . . .Then.. .Else следующий:

If условие! Then
[группа-операторов-1]
[Elself условие2 Then
[группа-операторов-2]]...
[Else
[группа-операторов-n]]
End If

Сначала проверяется условие!. Если оно ложно, то проверяется условие2.

Если и оно ложно, то проверяется следующее условие из группы Eiseif до
тех пор, пока не будет найдено истинное условие, операторы которого и
выполняются. После чего управление передается оператору, непосредствен-
но следующему за оператором End if.
Если не найдено ни одно истинное условие, то выполняется группа опера-
торов из блока Else, если он присутствует в конструкции. В противном слу-
чае управление передается оператору, следующему за оператором End if.

( Примечание )
Блоков Elself в конструкции If.. .Then.. .Else может быть сколько угодно,
тогда как блок Else всегда один, если он задан.

Если в предыдущей конструкции принятия решения проверяется равенство

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

Select Case тестируемое_выражение

[Case список_значений!
[группа-операторов-!]]
[Case список_значений2
[группа-операторов-1]]

[Case Else
[группа-операторов-n]]
End Select

Вычисляется единственное выражение тестируемое_выражение и последова-

тельно сравнивается со значениями из списков значений блоков case. Если
значение выражения совпадает со значением, заданным в списке какого-
либо блока Case, то выполняется группа операторов данного блока, и после
Глава 9. Выполняемые сценарии 379

этого управление передается оператору, непосредственно следующему за

оператором End Select.
Если не найдено ни одного соответствия значения тестируемого выражения
со значениями из списков значений, то выполняется группа операторов
блока case Else (в случае его наличия).
Список значений блока case может состоять из одного или нескольких зна-
чений. В случае нескольких значений они разделяются запятыми.

С Примечание j
Если вычисленное значение тестируемого выражения совпадает со значения-
ми из нескольких блоков Case, то выполняется группа операторов, заданная
в первом из блоков Case, в котором найдено соответствие.

Для повторного выполнения несколько раз группы операторов VBScript, как

и любой другой язык программирования, предоставляет разнообразные ти-
пы операторов цикла:
П Do... Loop
О For...Next
П For Each...Next
Конструкция DO...Loop применяется для выполнения группы операторов,
пока некоторое выражение ложно или истинно. Она имеет несколько раз-
новидностей, отличающихся моментом проверки условия завершения цикла
(до начала выполнения группы операторов или после) и тем, истинно или
ложно это условие.
Цикл DO while выполняется до тех пор, пока истинно условие окончания
цикла:
Do While условие_окончания
группа-операторов
Loop

Перед выполнением операторов цикла проверяется, истинно ли выражение

условие_окончания. ЕСЛИ ОНО ИСТИННО, ТО ВЫПОЛНЯСТСЯ группа-операторов
(в ней изменяются значения переменных, входящих в выражение усло-
вие_окончания). После этого снова проверяется условие окончания цикла и,
в случае его истинности, выполняется группа операторов тела цикла. Про-
цедура повторяется до тех пор, пока выражение условие_окончания не станет
ложным.

( Примечание ^
Если выражение, определяющее условие завершения цикла и первоначально
имеющее значение True, не изменяется в теле цикла, то цикл будет повторять-
380 Часть II. Интерактивные Web-документы

ся бесконечное число раз. Для выхода из бесконечного цикла следует исполь-

зовать оператор Exit Do (см. ниже).
Цикл DO while не будет выполнен ни разу, если при первой проверке усло-
вие_окончания ЛОЖНО.

Другая разновидность цикла DO while сначала выполняет группу операторов,

а потом проверяет условие окончания цикла:
Do
группа-операторов
Loop While условие_окончания

Этот цикл обязательно выполнит один раз группу операторов, определенных

в теле цикла.
Цикл DO until аналогичен первой разновидности цикла DO while, за ис-
ключением того, что он выполняется, пока значение выражения
условие_окончания ЛОЖНО!
Do Until условие_окончания
группа-операторов
Loop

Этот цикл также может не выполниться ни одного раза, если при первой же
проверке условия завершения цикла, оно оказывается истинным.
Во второй разновидности цикла DO Until условие окончания завершения
цикла проверяется после выполнения группы операторов, и, таким образом,
он обязательно выполнится хотя бы один раз:
Do
группа-опера торов
Loop Until условие окончания

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

В циклах D O . . . Loop заранее не известно количество итераций повторения

группы операторов, но иногда требуется выполнить точно заданное число
повторений цикла. Такую возможность предоставляет цикл For. . .Next.
В этом цикле задается переменная, называемая счетчиком цикла, которая
увеличивается (или уменьшается) на заданную величину после выполнения
группы операторов. Цикл завершает свои итерации, когда значение счетчика
превысит (или станет меньше) заданной величины. Синтаксис такой конст-
рукции цикла следующий:
Глава 9. Выполняемые сценарии 381

For счетчик = нач_значение То кон_значение [Step приращение]

операторы
Next

В начале выполнения этого цикла переменной счетчик присваивается зна-

чение, заданное параметром нач_значение. Выполняются операторы цикла, и
значение переменной цикла увеличивается или уменьшается (в зависимости
от знака) на величину приращение. Осуществляется проверка, не превысило
ли (или не стало меньше) новое значение счетчика значение параметра
кон_значение. Если нет, то итерации повторяются, если да, то цикл заверша-
ет свое выполнение.
Параметр приращение цикла For...Next является необязательным. Если он
не задан, то по умолчанию переменная цикла увеличивается на 1.

( Примечание ^
Следует аккуратно задавать все три параметра цикла For.. .Next. Они должны
быть согласованы: если приращение положительно, то начальное значение
должно быть меньше или равно конечному значению; если приращение отри-
цательно, то конечное значение должно быть меньше или равно начальному
значению. Если это не так, то цикл For.. .Next не выполняется ни одного раза.

Конструкция For Each...Next позволяет организовать цикл по элементам

массива или по объектам некоторого набора (семейства) объектов (см. ниже
в разделе), не зная заранее число элементов в массиве или число объектов в
наборе. Синтаксис этой конструкции следующий:
For Each элемент In группа
операторы
Next

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

Number = О
For Each j In Ar
Number = Number + 1
Next
[Link] "Число элементов массива равно " & Number

Результатом работы данного сценария будет строка в документе:

Число элементов массива равно 11
382 Часть II. Интерактивные Web-документы

В следующем примере используется набор forms для организации цикла по

числу форм в документе. Внутренний цикл по элементам набора elements
формы печатает в документ значения свойства value всех элементов формы.

<BODY>
<FORM name="frml">
<INPUT TYPE="checkbox" NAME="checkl" value="<taa;KOK"> Флажок
</FORM>
<FORM name="frm2">
<INPOT TYPE="checkbox" NAME="check2" value="Флaжoкl"> Флажок!
</FORM>

<SCRIPT language="VBScript">
For Each i In document . forms
document . write "<p> Форма " & [Link] & ":"
For Each j In i. elements
document. write "<p> Элемент: " & j. value
Next
document . write "<HR>"
Next
</SCRIPT>
</BODY>

На каждом шаге внешнего цикла переменная i содержит ссылку на форму,

созданную тэгом <FORM>. Во внутреннем цикле осуществляется перебор эле-
ментов формы. Ссылка на набор elements формы указывается в качестве
параметра i. elements цикла For Each. Переменная j внутреннего цикла по-
следовательно ссылается на элементы формы, поэтому конструкция j . value
дает значение параметра value элемента формы. Результат отображения
страницы в окне браузера показан на рис. 9.13.
Обычно любой оператор цикла выполняется столько раз, сколько определе-
но его параметрами, но иногда необходимо прервать выполнение цикла,
например, в результате выполнения какого-либо условия. Для этих целей в
VBScript существует несколько операторов Exit безусловного выхода из кон-
струкций цикла:
П Exit DO осуществляет безусловный выход из операторов группы DO . . . Loop
П Exit For осуществляет безусловный выход из операторов For. . .Next и For
Each. . .Next
Их можно использовать в любом месте в теле цикла, но обычно они исполь-
зуются совместно с операторами условиями.
Глава 9. Выполняемые сценарии 383

1 3 1МИте|>.1К1И1111ы<;\11[>имеры\1с;'Л html Microsoft Internet Explorer

г Флажок

г Флажок!

Форма frml :

Элемент: Флажок

Форма frm2:

Элемент: Флажок!

Рис. 9.13. Отображение информации по элементам форм документа

Процедуры
Часто приходится выполнять одну и ту же последовательность операторов,
реализующих какое-нибудь действие в программе, возможно с разными пе-
ременными или разными значениями. Например, отображение подсказки
пользователю в диалоговом окне можно рассматривать как одну и ту же по-
следовательность действий (отобразить на экране диалоговое окно) с раз-
ными значениями (содержание подсказки). Такая последовательность дей-
ствий обычно оформляется в виде процедуры (с параметрами или без пара-
метров), инициализация выполнения которой осуществляется простым
указанием имени этой процедуры и передаче ей необходимых параметров.
VBScript предусматривает создание двух типов процедур:
О Процедура sub
П Процедура Function (или функция)
Процедура sub выполняет последовательность действий, но не возвращает
никакого значения, ассоциированного с ее именем. Она имеет следующий
синтаксис:
Sub имя_процедуры ([список-параметров])
операторы
End Sub

Через необязательный список параметров можно передать в процедуру внеш-

ние данные или, наоборот, получить некоторые вычисленные ею значения.
Вызов процедуры Sub осуществляется оператором сан, после которого ука-
зывается имя процедуры и в круглых скобках параметры. Процедуру можно
вызвать и простым указанием ее имени, но в этом случае передаваемые ей
384 Часть II. Интерактивные Web-документы

параметры задаются без скобок. Следующие два способа вызова процедуры

эквивалентны:
Call MyProc(firstarg, secondarg)
MyProc firstarg, secondarg

Функция также выполняет определенную последовательность операторов и

ей можно передать внешние данные через параметры процедуры, но, в от-
личие от процедуры sub, она возвращает значение, присваиваемое ее имени,
и может быть использована в выражениях VBScript. Она имеет следующий
синтаксис:
Function имя_процедуры ([список-параметров])
операторы
имя процедуры = значение
End Function

В операторах процедуры обязательно должен присутствовать оператор при-

своения имени процедуры некоторого значения. Следующая функция пере-
считывает переданное ей в качестве параметра значение в дюймы или сан-
тиметры; второй параметр этой процедуры определяет, в каких единицах
измерения задано исходное значение параметра.
Function InchMeter( value, index)
Select Case index
Case 0 ' Задано значение в сантиметрах
InchMeter = value / 2.54
Case 1 ' Задано значение в дюймах
InchMeter = value * 2.54
Case Else
InchMeter = -1
MsgBox "InchMeter: неправильный параметр index"
End Select
End Function

leng = InchMeter(1.5,0)

В этом фрагменте кода функция InchMeter о вызывается в правой части

оператора присваивания. Вызов функции в выражениях осуществляется ука-
занием ее имени и списком параметров в круглых скобках. Функции
Function можно вызывать, используя синтаксис вызова процедур Sub, но в
этом случае VBScript игнорирует возвращаемое ею значение. Следующие два
оператора вызывают одну и ту же процедуру InchMeter ( ) , но возвращаемые
значения не доступны для дальнейшего использования:
Call InchMeter(1,0)
InchMeter 1,1
Глава 9. Выполняемые сценарии 365

VBScript предоставляет два способа передачи параметров в процедуры:

П По ссылке
П По значению
Способ передачи параметра по ссылке, применяемый по умолчанию, пере-
дает фактический адрес переменной, используемой в качестве параметра.
Это позволяет изменить содержимое соответствующего адреса памяти, а тем
самым, и значение переменной.
Передача параметров по значению предполагает передачу в процедуру ко-
пии переменной, а не адреса самой переменной. Поэтому любые изменения
параметра внутри процедуры воздействуют на копию, а не на саму перемен-
ную, и, следовательно, значение переменной, переданной в качестве пара-
метра, изменяться не будет. Для указания интерпретатору, что параметр пе-
редается в процедуру по значению, используется ключевое слово Byval, за-
даваемое перед параметром в описании процедуры. При вызове следующей
процедуры значение переменной 1, переданной в качестве параметра, не
изменяется, хотя процедура изменяет значение параметра:
Sub proc(ByVal m)
m = 3
End Sub
1 = 4
proc 1
[Link] 1 // Напечатает 4, а не 3

Объектная модель
и взаимодействие с элементами документа
Как уже говорилось (в разделе "Объектные модели языков сценариев" этой
главы), при интерпретации HTML-страницы браузер создает объекты, соот-
ветствующие элементам отображаемой страницы. Эти объекты доступны для
приложения VBScript и любой сценарий может обратиться или установить
значения свойств объектов, выполнить их методы.
Язык VBScript, как и другой распространенный язык сценариев, может ма-
нипулировать стандартными объектами, встроенными в ядро VBScript, и
объектами, предоставляемыми браузером. При описании объектов JavaScript
мы рассматривали объекты браузера Netscape Navigator фирмы Netscape. Те-
перь остановимся на объектах браузера Microsoft Internet Explorer фирмы
Microsoft.

Функции и объекты ядра VBScript

Ядро VBScript предоставляет программисту большой набор встроенных функ-
ций для работы с датами, строковыми подтипами данных, вычисления ма-

ПЗак. 944
386 Часть II. Интерактивные Web-документы

тематических функций и отображения информационных диалоговых окон и

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

Таблица 9.11. Математические функции VBScript

Функция Действие

Abs Вычисляет абсолютное значение

Atn Вычисляет значение арктангенса своего параметра
Cos Вычисляет значение косинуса угла, заданного в радианах
Ехр Экспоненциальная функция: е*
int Целая часть числа
Log Вычисляет натуральный логарифм своего параметра
Sin Вычисляет значение синуса угла, заданного в радианах
Sqr Вычисляет значение квадратного корня своего параметра
Tan Вычисляет значение тангенса угла, заданного в радианах

Получить текущее время, текущую дату, а также одновременно и дату, и

время, установленные на компьютере пользователя, можно с помощью
функций Time, Date и NOW. Эти три процедуры-функции не требуют парамет-
ров, поэтому при их использовании в выражениях следует задавать откры-
вающую и закрывающую скобки, указывающие на отсутствие параметров,
как показано в следующем фрагменте кода:
iTime = Time () ' переменная iTime содержит текущее время
iDate = Date() ' переменная iDate содержит текущую дату
iDateTime = Now() ' переменная iDateTime содержит текущую дату и время

Что хранится в этих переменных, зависит от системных установок времени

и даты, определенных на компьютере пользователя. Например, на компью-
тере с установленным форматом времени Ч:мм:сс и даты дд.ММ.гг печать
в документе значений переменных предыдущего фрагмента кода будет вы-
глядеть следующим образом:
14:49:31 ' Значение переменной iTime
23.06.99 ' Значение переменной iDate
23.06.99 14:49:31 ' Значение переменной iDateTime

Если какая-либо переменная содержит значение подтипа Date, или ее

содержимое может быть преобразовано в этот подтип, то функции
Глава 9. Выполняемые сценарии 367

Day (переменная), Month (переменная) И Year (переменная) Возвращают соответ-

ственно число, месяц и год даты, не зависимо от формата хранения дат на
Компьютере пользователя. ФуНКЦИИ Hour (переменная), Minute (переменная) И
second (переменная) возвращают целые числа, соответствующие часам, мину-
там и секундам времени, хранящимся в переменной, являющейся парамет-
ром этих функций.
Для работы со строками предназначен целый ряд функций, которые полез-
ны при проверке правильности ввода информации в поля формы.
Функция Lent строка) возвращает число символов в строке с. учетом лиди-
рующих и замыкающих пробелов. Если пользователь ввел в поле формы
строку " строка " с двумя пробелами в начале и одним пробелом в конце,
то эта функция возвратит значение 9. Для удаления незначащих пробелов в
начале ИЛИ КОНЦе СТРОКИ МОЖНО Обратиться К ФУНКЦИЯМ Ltrim, Rtrim И Trim,
которые, соответственно, удаляют лидирующие, замыкающие или оба типа
пробелов из строки, переданной этим функциям в качестве параметров.
Функции LCase и ucase переводят все содержимое строки соответственно
в нижний или верхний регистр.
ДЛЯ Сравнения ДВУХ СТРОК ИСПОЛЬЗуетсЯ фуНКЦИЯ StrComp(cTpOKal, строка2,
метод_сравнения>. Она возвращает значение о (если строки совпадают в со-
ответствии с методом сравнения, заданным третьим параметром функции),
значение -1 (если строка! меньше строки2) и значение i в любом не совпа-
дающем с двумя предыдущими случае. Параметр метод_сравнения может
принимать два значения: о — строки сравниваются с учетом регистра, i -
строки сравниваются без учета регистра.
Функция InStr(нач_позиция, строка!, строка2, метод_сравнения) позволяет
определить, содержится ли строка2 в строке!. Параметр нач_позиция задает
позицию в строке!, с которой начинается поиск подстроки, заданной пара-
метром строка2. Это достаточно полезно, если известно, что строка! содер-
жит несколько вхождений строки2. Параметр метод_сравнения определяет,
учитывается ли регистр при поиске соответствующей подстроки, и совпада-
ет с аналогичным параметром функции strcomp. Функция поиска подстроки
intstr возвращает номер позиции в строке! первого вхождения строки2,
если такое найдено, и значение о — в противном случае.
Две стандартные функции inputBox и MsgBox позволяют отобразить диалого-
вое окно с полем ввода и диалоговое окно с сообщением пользователю.
Функция inputBox отображает диалоговое окно с полем ввода и двумя кноп-
ками: ОК и Cancel (Отмена). Она имеет следующий синтаксис:
InputBox(подсказка, заголовок, умалч_знач, х, у)

Строковые параметры подсказка и заголовок задают соответственно под-

сказку для пользователя и заголовок диалогового окна. Параметр умалч_знач
388 Часть II. Интерактивные Web-документы

определяет значение, выводимое в поле ввода при отображении окна. Необя-

зательные два последних параметра задают в твипах (1 твип = 1/1440 дюйма =
= 1/20 пойнта) координаты левого верхнего угла диалогового окна относи-
тельно левого верхнего угла окна браузера.
Эта функция возвращает значение строки, введенной пользователем, или
заданное умалчиваемое значение при нажатии кнопки ОК. При нажатии
кнопки Cancel возвращаемое функцией значение равно Empty. На рис. 9.14
показано диалоговое окно, отображаемое оператором:
1C = InputBox("Введите Ваш регистрационный номер.", "Регистрация", "")

Рис. 9.14. Диалоговое

окно, отображаемое
функцией InputBox

С помощью функции MsgBox можно не только просто информировать поль-

зователя о возникших проблемах, но и предоставить ему возможность раз-
решить ее некоторыми стандартными способами. Например, если не удается
из сценария связаться с каким-нибудь сервером, пользователь может отка-
заться от этого действия, повторить его или отменить. Подобное взаимодей-
ствие осуществляется отображением диалоговых окон разных типов, зада-
ваемых значением соответствующего параметра функции MsgBox. Синтаксис
вызова этой функции следующий:
1С=МздВох(строка_сообщения, тип_окна, заголовок_окна)
Параметр строка_сообщения задает строку сообщения, отображаемую в диа-
логовом окне, параметр заголовок_окна определяет надпись в заголовке ок-
на, а параметр тип_окна задает тип отображаемого окна. Он является целым
числом и его значение определяется как сумма трех целочисленных подпа-
раметров, задающих элементы диалогового окна. Эти подпараметры опре-
деляют количество и типы кнопок, тип значка и умалчиваемую кнопку,
отображаемые в диалоговом окне. Значения этих параметров представлены
в табл. 9.12.

Таблица 9.12. Значения подпараметров вида диалогового окна

Типы кнопок
Значение Результат
О Отображается одна кнопка ОК
1 Отображаются кнопки ОК и Cancel (Отмена)
Глава 9. Выполняемые сценарии 389

Таблица 9.12 (окончание)

Типы кнопок
Значение Результат
2 Отображаются кнопки Abort (Стоп), Retry (Повтор) и Ignore (Пропустить)
3 Отображаются кнопки Yes (Да), No (Нет) и Cancel
4 Отображаются кнопки Yes и No
5 Отображаются кнопки Retry (Повтор) и Cancel

Типы значков
Значение Результат
О Никакой значок не отображается
Отображается значок Стоп Ц
32 Отображается значок Вопрос УУ

Отображается значок Восклицание Ц

Отображается значок Информация УУ

Умалчиваемая кнопка
Значение Результат
О Первая кнопка
256 Вторая кнопка
512 Третья кнопка

Примечание
Надписи на кнопках отображаются в зависимости от используемой операцион-
ной системы. В таблице в скобках после английского названия кнопок указано
их название при работе в русской версии Windows 95.

Если необходимо отобразить диалоговое окно с тремя кнопками Yes, No и

Cancel (значение подпараметра равно 3), со значком Восклицание (значение
подпараметра равно 48) и третьей кнопкой (Cancel) по умолчанию (значение
подпараметра равно 512), то необходимо при вызове функции MsgBox в ка-
честве значения параметра тип_окна указать 563 (3+48+512), как показано
в следующем примере:
MsgBox "Вы действительно хотите завершить процесс?", 563, "Сообщение"
 390
Часть II. Интерактивные Web-документы

Результат выполнения этого оператора можно увидеть на рис. 9.15.

Рис. 9.15. Диалоговое окно,

отображаемое функцией
MsgBox

Функция мздвох возвращает целочисленное значение, по которому можно

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

Таблица 9.13. Коды возврата функции мздвох

Возвращаемое значение Нажата кнопка
1 ОК
2 Cancel (Отмена)
3 Abort (Стоп)
4 Retry (Повтор)
5 Ignore (Пропустить)
6 Yes (Да)
7 No (Нет)

VBScript предоставляет ряд объектов, не связанных с объектной модель,

HTML-страницы и предназначенных для сценариев, выполняющихся
ервере. Это объекты для работы с файловой системой: диск™ папками
а Ла М В ЙСТВа И МСТОДЫ Э Х бЪеКТОВ
Ци ю о 1йл а°х ™ ° п-воляют получать информа
С ПОЛОЖеННЫХ М КОМПЬЮТе е
cneHaLf ПоТенпи
сценарии. Потенциально
я их можно включать в>сценарии
Р на котором выполняется
HTML-стпа.
вероятность их выполнения мала, так как при попь?тке использ^ия по-
добных объектов браузер отображает предупреждающее сообщение (рис 9 16)
и пользователь может отказаться от дальнейшего выполнения сценария

Рис. 9.16. Сообщение

браузера при использовании
в сценарии объектов доступа
к файлам
Глава 9. Выполняемые сценарии _ 39?

Здесь дадим краткое описание использования подобных объектов на приме-

ре объектов FileSystemObjects (Объекты файловой системы), так как с их
помощью можно быстро решить какие-то свои домашние задачи, не обра-
щаясь к "серьезным" системам программирования.
Прежде чем использовать методы и свойства любого объекта VBScript, его
необходимо создать. Это достигается использованием оператора Set совме-
стно С функцией CreateObject:
Dim fso, MyFile
Set fso = CreateObject ("Scripting. FileSystemObject")

Сначала описывается переменная fso, в которой будет храниться ссылка

на объект файловой системы, а затем в операторе Set создается сам объект,
и в переменную заносится ссылка на него. Теперь можно использовать все
методы и свойства созданного объекта, применяя обычную точечную нота-
цию объектно-ориентированных технологий. Например, в следующем фраг-
менте кода создается объект Textstream, метод writeLine которого записыва-
ет строку текста в файл:
Set MyFile = fso. CreateTextFile ("a: \testfile. txt", True)
MyFile. WriteLine ("Проверка записи в файл из VBScript.")
MyFile. Close

Если выполнить приведенные два фрагмента кода в одном сценарии, то на

дискете будет создан новый файл, содержащий одну текстовую строку.

( Примечание )
Создание нового объекта всегда осуществляется с помощью оператора Set.
После знака равенства указывается конструктор объекта — функция, воз-
вращающим значением которой является объект. Конструктор может иметь па-
раметры.

Совет
Описание всех объектов VBScript можно найти на сервере фирмы Microsoft по
адресу [Link] С него же можно установить на свой компь-
ютер документацию по языку сценариев VBScript.

Объекты MS Internet Explorer

Браузер MS Internet Explorer разработан с использованием технологии
Automation. Приложение, созданное на основе этой технологии, раскрывает
свои объекты другим приложениям, поддерживающим данную технологию.
Эти приложения имеют доступ к методам и свойствам объектов другого
приложения Automation. Иерархическая структура объектов Internet Explorer
достаточна сложна, но для написания сценариев используется часть объект-
ной модели, связанной с элементами HTML-страницы.
392 Часть II. Интерактивные Web-документы

Во главе иерархии, как и в случае с Netscape Navigator, стоит объект window,

представляющий окно браузера и порождающий все остальные объекты мо-
дели. При ссылке в программе на любой объект из иерархии можно не ука-
зывать "родительский" объект window.
Модель охватывает практически все элементы HTML-страницы. На рис. 9.17
показана иерархическая структура объектной модели, которая отражает под-
чиненность элементов страницы.

Рис. 9.17. Объектная модель

MS Internet Explorer

Для каждого типа элементов в модели предусмотрены соответствующие на-

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

Примечание
Наборы объектов, собственно говоря, являются свойствами порождающих их
объектов. Имена наборов объектов задаются в виде множественного числа су-
ществительных (в английском языке добавляется буква "s" в конце слова), оп-
ределяющих типы объектов.
Глава 9. Выполняемые сценарии 393

Формы HTML, отображаемые в объектах Form, содержат разнообразные

элементы управления, которые порождают соответствующие объекты, под-
чиненные объекту Form. Все, что сказано об этих объектах в разделе "Язык
создания сценариев JavaScript", остается в силе и при работе с этими объекта-
ми с помощью языка VBScript.

Процедуры обработки событий

Как и в сценарии JavaScript, весь код VBScript должен располагаться в тэге-
контейнере <SCRIPT>. . .</SCRIPT>. Для обратной совместимости с браузера-
ми, не поддерживающими язык сценариев VBScript, следует размещать код
внутри тэга <SCRIPT> в контейнере-комментарии, как показано ниже:
<SCRIPT TYPE="text/vbscript" LANGUAGE="VBScript">
<! —
код сценария VBScript
'—>
</SCRIPT>

Завершающий тэг комментария предваряется знаком ('), чтобы интерпрета-

тор браузера не сгенерировал ошибку синтаксиса.

Предупреждение
Следует избегать появления в коде сценария последовательности символов
(</), так как интерпретатор воспринимает ее как завершающий тэг и может не
обработать до конца сценарий. Если необходимо напечатать в документе по-
следовательность указанных символов, в коде VBScript следует заменить знак
/ на его представление через десятичный код chr ( 4 7 ) и использовать опера-
цию конкатенации строк. Например, если необходимо при динамическом соз-
дании документа напечатать <р>Абзац</р>, то следует использовать метод
Write объекта Document следующим образом:
Document. Write "<р>Абзац<" & Chr(47) & "р>"

Параметр LANGUAGE задает язык сценария. Параметр TYPE, определяющий

MIME-тип заключенного в тэг <SCRIPT> кода, задает также язык сценария.
Для VBScript значение этого параметра должно быть строкой
"text/vbscript". Этот параметр включен в HTML 4.0, но может не поддер-
живаться некоторыми браузерами, поэтому рекомендуется задавать оба па-
раметра одновременно.

( Примечание }
Все сказанное выше о параметрах TYPE и LANGUAGE относится и к языку JavaScript,
для которого MIME-тип следует задавать в виде строки "text/ javascript".

Указанным выше способом код сценария непосредственно встраивается

в страницу. Параметр SRC тэга <SCRIPT> позволяет указать полный или отно-
394 Часть II. Интерактивные Web-документы

сительный адрес внешнего файла, содержащего код VBScript, который будет

загружен и обработан интерпретатором браузера.
Internet Explorer поддерживает еще два параметра: FOR и EVENT тэга <SCRIPT>,
непосредственно связанных с процедурами обработки событий, и речь о ко-
торых пойдет немного ниже.
В каком месте документа лучше размещать код сценария? В любом месте
документа и в неограниченном количестве. Но, как и в случае с JavaScript,
определения процедур рекомендуется размещать в разделе <HEAD>, хотя это и
не обязательно. Подобная практика улучшает чтение кода сценария, позво-
ляя избегать поиска процедуры по всему документу. Более того, при интер-
претации браузером документа раздел <HEAD> интерпретируется до начала
обработки тела документа, следовательно, все процедуры будут размещены
в памяти до того, как в документе встретится их вызов.
Если читатель прочитал раздел "Язык создания сценариев JavaScript", то он
помнит, что каждый объект, соответствующий какому-либо элементу
HTML-документа, имеет возможность перехватывать и обрабатывать собы-
тия, возникающие в результате разнообразных действий пользователя с дан-
ным объектом (установка курсора мыши над связью, щелчок на кнопке
формы, нажатие клавиши клавиатуры при установленном в поле ввода кур-
соре и т. д.). Для этого в тэги HTML, описывающие элементы документа,
введены специальные параметры обработки событий: onMouseOver, onclick,
onKeyUp и т. д. Значениями этих параметров является код вызова процедур,
которые выполняются в ответ на произошедшее событие.
Задавать выполняемый код можно несколькими способами. Самый про-
стой — задание кода в качестве значения параметра с указанием в начале
строки используемого языка:
<BODY>
<Р>Пример обработки событий в VBScript<BR>
<FORM>
•CINPUT TYPE="BUTTON" VALUE="Нажми меня" NAME="Buttonl"
OnClick="vbscript: Alert 'Сообщение в ответ на щелчок!'">
</FORM>
</BODY>

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

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

Префикс vbscript: сообщает интерпретатору, что необходимо использовать

язык сценариев VBScript. Далее задается код VBScript, вызывающий метод
Alert объекта window. Подобный метод применим, когда необходимо выпол-
нить один-два оператора языка.
Глава 9. Выполняемые сценарии 395

Примечание
Если в качестве префикса указать javascript:, то будет вызван интерпрета-
тор языка JavaScript, а последующий код должен быть, соответственно, напи-
сан на языке JavaScript.
Второй способ использует параметры FOR и EVENT в тэге <SCRIPT>. Предыду-
щий фрагмент может быть переписан следующим образом:
<BODY>
<Р>Пример обработки событий в VBScript<BR>
<FORM>
<INPUT TYPE="BUTTON" УАШЕ="Нажми меня" NAME="Buttonl">
<SCRIPT FOR="Buttonl" EVENT="OnClick" LANGUAGE="VBScript">
<! —
Alert 'Сообщение в ответ на щелчок! '
'— >
</SCRIPT>
</FORM>

При использовании данного способа задания процедуры обработки события

в тэге <INPUT>, определяющем кнопку формы, параметр обработки события
click не задается, но в тэге <SCRIPT>, определяющем код сценария, параметр
EVENT определяет, в ответ на какое событие будет выполняться код, а пара-
метр FOR — для какого объекта. Значением первого параметра является имя
параметра обработки события (onclick) тэга элемента, а значением второго
параметра — имя элемента (Buttoni), для которого вызывается код, опреде-
ленное в параметре NAME тэга элемента.

( Примечание }
Указанный способ обработки события распознается только браузером Internet
Explorer, и поэтому его следует избегать. Здесь он упомянут исключительно
ради полноты описания.

Третий способ задания процедуры обработки события унаследован VBScript

от своего "родителя" Visual Basic и заключается в специальном именовании
процедуры обработки события при ее объявлении. Любая процедура, имя
которой составлено из имени объекта и имени события этого объекта с пре-
фиксом (on), соединенных знаком подчеркивания, рассматривается VBScript
как процедура обработки указанного события для указанного объекта. Про-
цедуру обработки события для рассмотренного выше примера можно опре-
делить следующим образом:
<SCRIPT TYPE="text/vbscript" LANGUAGE="VBScript">
<! —
Sub Buttonl_onClick()
Alert "Сообщение в ответ на щелчок ! "
End Sub
396 _ Часть II. Интерактивные Web-документы

</SCRIPT>

Этот способ удобен тем, что можно в одном тэге <SCRIPT> собрать все про-
цедуры обработки событий всех элементов документа.
Для тех, кто программирует на Visual Basic или Visual Basic for Application
последний способ инициирования процедуры обработки события, вероятно,
окажется самым подходящим. Более того, в специальных приложениях
Windows, предоставляющих среду разработки HTML-страниц на языке
VBScript, этот способ является основным.

Практические примеры
В этом разделе приводится несколько примеров программирования сцена-
риев VBScript.

Плавающий фрейм
Тэг <IFRAME> задает плавающий фрейм на HTML-странице. Его можно ис-
пользовать для отображения динамически создаваемой страницы. Такая тех-
ника полезна, например, при написании учебной страницы по языкам сце-
нариев. В тексте можно привести код изучаемой конструкции, а при щелчке
кнопкой мыши внутри плавающего фрейма она отобразится так, как ее уви-
дит конечный пользователь.
Прежде всего, необходимо создать страницу с плавающим фреймом, и орга-
низовать перехват обработки какого-либо события плавающего фрейма.
Ниже представлен текст страницы, на которой при получении плавающим
фреймом фокуса (обработчик событий onFocus) вызывается процедура
VBScript, динамически создающая содержимое, отображаемое в этом фрейме:
<BODY BGCOLOR="FFFFOO">
<Р>Щелчок кнопкой мыши на плавающем фрейме приводит
к отображению в нем содержимого</Р>
<IFRAME WIDTH="400" HEIGHT="100" FRAMEBORDER="1"
NAME="fral" OnFocus="FillIFrame">
</IFRAME>
</BODY>

При щелчке на плавающем фрейме он получает фокус, и происходит вызов

процедуры FiiiiFrame. На рис. 9.18 показана эта страница, отображенная
в окне браузера.
Теперь остается только создать процедуру VBScript, создающую содержимое
плавающего фрейма. Ее текст представлен ниже и должен быть размещен
в разделе <HEAD> предыдущего документа:
Глава 9. Выполняемые сценарии 397
<SCRIPT LANGUAGE="VBScript">
<! —
Sub Fi 111 Frame ()
With Parent. Frames ("fral") .Document
.Clear
.WriteLn "<HTML>"
.WriteLn "<BODY BGCOLOR='OOCCFF'>"
.WriteLn "<Р>Тест работы с плавающим фреймом! <BR>"
.WriteLn "<FORM>"
.WriteLn "<SCRIPT LANGUAGE=" & Chr(34) & "VBScript" &
Chr(34) & "><" & Chr(47) & "SCRIPT>"
.WriteLn "<INPUT TYPE=BUTTON VALUE=" & Chr(34) &
"Нажми" & Chr(34) & " NAME=Buttonl "
.WriteLn "OnClick=' Alert " & Chr(34) &
"Простое сообщение." & Chr(34) &
", vbExclamation, " & Chr(34) &
"VBScript тест" & Chr(34) & '">"
.WriteLn "<" & Chr(47) & "FORM>"
.WriteLn "<" & Chr(47) & "BODY>"
.WriteLn "<" & Chr(47) & "HTML>"
.Close
End With
End Sub

</SCRIPT>

K! О Я !

Рис. 9.18. Страница

с плавающим фреймом

Оператор with задает объект, методы которого вызываются в теле оператора.

В нашем примере — это документ, отображаемый в плавающем фрейме.
Методы WriteLn записывают в документ строки, содержащие тэги HTML,
и тем самым динамически формируют документ, отображаемый во фрейме.
Щелчок кнопкой мыши при расположении ее курсора в области фрейма
приводит к возникновению события FOCUS, которое интерпретатор перехва-
тывает и запускает на выполнение процедуру FiiiiFrameO. Результат ото-
бражения динамически созданной страницы показан на рис. 9.19.
398 Часть II. Интерактивные Web-документы

Щслчоь ,,11ви на; плавающем

фрейме приводитiк:ОТбфая^Мию..да«ем

Рис. 9.19. Содержимое фрейма

после получения им фокуса

Это полноправная страница. При щелчке на кнопке, расположенной во

фрейме, отобразится диалоговое окно подсказки — действие, определенное
в процедуре обработки события click кнопки страницы.

Баннер
Можно организовать динамическое отображение разных страниц во фрейме,
имитируя, таким образом, работу баннера. Реализация подобного процесса
осуществляется вызовом разных процедур, готовящих и отображающих со-
ответствующие страницы во фрейме с использованием функции SetTimeOut.
В этом примере мы создадим плавающий фрейм, в котором будет постепен-
но по частям отображаться строка "Издательство BHV", затем также по час-
тям она будет исчезать, и процесс начнется сначала. Каждая динамически
появляющаяся во фрейме строка будет отображаться разным цветом, созда-
вая эффект "неоновой" рекламы.
Как и в предыдущем примере, сначала создадим HTML-страницу с пла-
вающим фреймом, а затем напишем сценарий, реализующий необходимый
нам процесс отображения. Текст HTML-страницы выглядит следующим об-
разом:
<BODY BGCOLOR="FFFFOO">
<Р ALIGN="center">
<IFRAME NAME="frameBHV" HEIGHT="70" WIDTH="200"x/IFRAMEX/P>
Вас приветствует "Издательство BHV", Санкт-Петербург!
</BODY>

В верхней части страницы отображается плавающий фрейм, ссылаться на

который из сценария можно при помощи имени frameBHV. Ниже фрейма
располагается текст приветствия.
Теперь приступим к созданию сценария. Прежде всего определим, что ото-
бражаемая во фрейме строка полностью будет появляться в нем за пять ото-
бражений: сначала отобразится "Из", затем "Издат", далее "Издатель", потом
"Издательство" и наконец "Издательство BHV". Исчезать она также будет за
пять отображений, но в обратном порядке. Для каждого отображения необ-
ходимо динамически создать соответствующую страницу, что и реализуется
Глава 9. Выполняемые сценарии 399

пятью процедурами AnimFrame с соответствующим номером в конце имени

процедуры.
В НИХ ИСПОЛЬЗУЮТСЯ переменные Pagel, Page2, РадеЗ, Раде4 И Раде5, СОДер-
жащие определения цветов фона и текста, и переменная PageEnd, которая
хранит завершающие тэги страницы.
Dim PageEnd
Pagel = "<BODY BGCOLOR='#OOCCFF' TEXT='#OOOOFF'XPRE>"
Page2 = "<BODY BGCOLOR='#OOCCFF' TEXT='#OOFFFF'XPRE>"
РадеЗ = "<BODY BGCOLOR='#OOCCFF' TEXT='#OOFFOO'XPRE>"
Page4 = "<BODY BGCOLOR='#OOCCFF' TEXT='#FFFFOO'XPRE>"
PageS = "<BODY BGCOLOR='#OOCCFF' TEXT='#FFOOOO'XPRE>"
PageEnd = "</pREx/BODY>"

Первая вызываемая процедура — процедура без параметров AnimFramei, ко-

торая отображает во фрейме строку "Из" синим цветом, и по прошествии
1/4 секунды вызывает процедуру AnimFrame2 с параметром True. Это дейст-
вие реализуется функцией setTimeOut, которая выполняет код, заданный
первым» параметром, через количество миллисекунд, определяемых вторым
параметром этой функции.
Sub AnimFramei
[Link] Pagel & "Из" & EndPage
[Link]
SetTimeOut "AnimFrame2 True", 250, "VBScript"
End Sub
Процедура AnimFrame2 отображает во фрейме строку "Издат" голубым цветом
и вызывает процедуру AnimFrame3 или AnimFramei, в зависимости от того,
должна ли появиться вся надпись (параметр forw равен True) или вся над-
пись должна исчезнуть (параметр forw равен False).
Sub AnimFrame2(forw)
[Link] Page2 & "Издат" & EndPage
[Link]
If forw Then
SetTimeOut "AnimFrame3 True", 250, "VBScript"
Else
SetTimeOut "AnimFramei", 250, "VBScript"
End If
End Sub

Процедуры AnimFrameS и AnimFrame4 осуществляют аналогичные действия,

отображая соответственно строки "Издатель" и "Издательство" и вызывая
другие процедуры для выполнения необходимых действий.
Sub AnimFrame3(forw)
[Link] РадеЗ & "Издатель" & EndPage
400 _ Часть II. Интерактивные Web-документы

Window, f rameBHV. Document . Close

If forw Then
SetTimeOut "AnimFrame4 True", 250, "VBScript"
Else
SetTimeOut "AnimFrame2 False", 250, "VBScript"
End If
End Sub
Sub AnimFrame4 (forw)
Window. f rameBHV. Document. Write Page4 & "Издательство" & EndPage
Window. f rameBHV. Document . Close
If forw Then
SetTimeOut "AnimFrameS", 250, "VBScript"
Else
SetTimeOut "AnimFrame3 False", 250, "VBScript"
End If
End Sub

Последняя, пятая процедура AnimFrameS отображает строку "Издательство

BHV" и запускает процесс отображения в обратном порядке (процедура
AnimFrame4 Вызывается С параметром False).
Sub AnimFrameS
Window. f rameBHV. Document. Write PageS & "Издательство BHV" & EndPage
Window. fraHello. Document. Close
SetTimeOut "AnimFrame4 False", 250, "VBScript"
End Sub

Теперь, для запуска всего процесса необходимо инициализировать выпол-

нение первой процедуры AnimFramel при загрузке документа в окно браузе-
ра. Это действие реализуется в процедуре обработки события Load объекта
window:

Sub Window_OnLoad ( )
AnimFramel
End Sub

Результаты отображения информации во фрейме в разные моменты времени

показаны на рис. 9.20 и 9.21.

С Примечание )
На рис. 9.20 строка во фрейме отображается синим цветом, а на рис. 9.21 —
красным.

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

№f":,A

Рис. 9.20. Отображение строки Рис. 9.21. Отображение строки

"Из" во фрейме страницы "Издательство BHV" во фрейме страницы

CGI-сценарии и язык Perl

Основные понятия
Основу "Всемирной паутины" WWW составляют Web-узлы — компьютеры,
на которых выполняется специальная программа — Web-сервер, ожидающая
запроса со стороны клиента на выдачу документа. Документы сохраняются
на Web-узле, как правило, в формате HTML. Клиентом Web-сервера являет-
ся программа-браузер, выполняющаяся на удаленном компьютере, которая
осуществляет запрос к Web-серверу, принимает запрошенный документ и
отображает его на экране.
Аббревиатура CGI (Common Gateway Interface) обозначает часть Web-серве-
ра, которая может взаимодействовать с другими программами, выполняю-
щимися на этом же Web-узле, и в этом смысле является шлюзом (gate-way -
шлюз) для передачи данных, полученных от клиента, программам обработки,
таким как СУБД, электронные таблицы, и др. CGI включает общую среду
(набор переменных) и протоколы для взаимодействия с этими программами.
Общая схема работы CGI состоит из следующих элементов.
П Получение Web-сервером информации от клиента-браузера. Для передачи
данных Web-серверу в языке HTML имеется средство, называемое форма.
Форма задается в HTML-документе при помощи тэгов <FORM>. . .</FORM>
и состоит из набора полей ввода, отображаемых браузером в виде графи-
ческих элементов управления: селекторных кнопок, опций, строк ввода
текста, управляющих кнопок и т. д. (рис. 9.22).
П Анализ и обработка полученной информации. Данные, извлеченные из
HTML-формы, передаются для обработки CGI-программе. Они не всегда
могут быть обработаны CGI-программой самостоятельно. Например, они
могут содержать запрос к некоторой базе данных, которую CGI-npo-
грамма читать "не умеет". В этом случае CGI-программа на основании
полученной информации формирует запрос к компетентной программе,
выполняющейся на том же компьютере. CGI-программа может быть на-
402 Часть II. Интерактивные Web-документы

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

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

Пример HTML-формы - Netscape

; Fdit Vtew т 0 ; и !„;;;, Ц Help

ФОРМА
Это пример формы, используемой для передачи информации Web-серверу для
последующей обработки CGI-программой.

1. Это поле для ввода текста: |

2. Ниспадающее меню с возможностью выбора из нескольких элементов:
[Элемент, выбранный по умолчанию и]
3. Селекторные кнопки (Radio buttons):

(f Выбор по умолчанию С Альтернативный выбор

4. Набор опций (checkboxes), определяющих множественное значение

В Значение 1 П Значение 1 П Значение 3

5. Управляющие кнопки: Кнопка передачи | Кнопка сброса !

Рис. 9.22. Пример отображения HTML-формы браузером

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

на сервере или выбор нужного документа из представленного списка. Фор-

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

Тэг <FORM>
В HTML-документе для задания формы используются тэги <FORM>. . .</FORM>,
отмечающие, соответственно, начало и конец формы. Документ может со-
держать несколько форм, но они не могут быть вложены одна в другую. Тэг
<FORM> имеет параметры ACTION, METHOD и ENCTYPE. Отдельные браузеры
(Netscape, Internet Explorer) поддерживают дополнительные параметры по-
мимо стандартных, например, CLASS, NAME, STYLE и др. В общем виде фор-
ма задается следующим образом:
<FORM ACTION="URL" МЕТНОО=метод_лередачи ЕМСТУРЕ=М1МЕ-тил>
содержание_формы
</FORM>

Параметр ACTION является единственным обязательным. Его значением

является URL-адрес CGI-программы, которая будет обрабатывать инфор-
мацию, извлеченную из данной формы.
Параметр METHOD определяет метод пересылки данных, содержащихся в
форме, от браузера к Web-серверу. Он может принимать два значения: GET
(по умолчанию) и POST.

Примечане
Взаимодействие между клиентом-браузером и Web-сервером осуществляется
по правилам, заданным протоколом HTTP, и состоит из запросов клиента и
ответов сервера. Запрос разбивается на три части. В первой строке запроса
содержится HTTP-команда, называемая методом, URL-адрес запрашиваемого
файла и номер версии протокола HTTP. Вторая часть — заголовок запроса.
Третья часть — тело запроса, собственно данные, посылаемые серверу. Метод
сообщает серверу о цели запроса. В протоколе HTTP определены несколько
методов. Для передачи данных формы в CGI-программу используются два ме-
тода: GET И POST.

При использовании метода GET данные формы пересылаются в составе

URL-запроса, к которому присоединяются после символа "?" в виде сово-
купности пар переменноя=значение, разделенных символом "&". В этом слу-
чае первая строка запроса может иметь следующий вид:
GET /cgi-bin/[Link]?name=Mike&surname=Ivanoff HTTP/1.1

URL запроса Данные формы

404 Часть II. Интерактивные Web-документы

После выделения данных из URL сервер присваивает их переменной среды

QUERY_STRING, которая может быть использована CGI-программой.
При использовании метода POST данные формы пересылаются Web-серверу
в теле запроса, после чего передаются сервером в CGI-программу через
стандартный ввод.
Значением параметра ENCTYPE является медиа-тип, определяющий формат
кодирования данных при передаче их от браузера к серверу. Браузер коди-
рует данные, чтобы исключить их искажение в процессе передачи. Возмож-
ны два значения этого параметра: application/x-www-form-urlencoded (по умол-
чанию) и multipart/form-data.

С Примечание ^
Одним из первых применений Интернета была электронная почта, ориентиро-
ванная на пересылку текстовых сообщений. Часто возникает необходимость
вместе с текстом переслать данные в нетекстовом формате, например, упако-
ванный zip-файл, рисунок в формате GIF, JPEG и т. д. Для того, чтобы пересы-
лать средствами электронной почты такие файлы без искажения, они кодиру-
ются в соответствии с некоторым стандартом. Стандарт MIME (Multipurpose
Internet Mail Extensions, многоцелевые расширения электронной почты для Ин-
тернета) определяет набор MIME-munoe, соответствующих различным типам
данных, и правила их пересылки по электронной почте. Для обозначения MIME-
типа используется запись вида тип/подтип, где тип определяет общий тип
данных, например, fexf, image, application (тип application обозначает специфи-
ческий внутренний формат данных, используемый некоторой программой), а
подтип — конкретный формат внутри типа данных, например, application/zip,
image/gif, text/html. MIME-типы нашли применение в Web, где они называются
также медиа-типами, для идентификации формата документов, передаваемых
по протоколу HTTP. В HTML-форме параметр ENCTYPE определяет медиа-тип,
который используется для кодирования и пересылки специального типа дан-
ных — содержимого формы.

Как видно из примера на рис. 9.22, форма отображается в окне браузера

в виде набора стандартных элементов управления, используемых для запол-
нения полей формы значениями, которые затем передаются Web-серверу.
Значение вводится в поле ввода пользователем или назначается по умолча-
нию. Для создания полей средствами языка HTML существуют специальные
тэги: <INPUT>, <SELECT>, <TEXTAREA>, которые употребляются только внутри
тэга <FORM>.

Тэг <INPUT>
П <INPUT ТУРЕ=тип_поля_ввода ЫАМЕ=имя_поля_ввода другие_параметры>
Это наиболее употребительный тэг, с помощью которого можно генери-
ровать внутри формы поля для ввода строки текста, пароля, имени фай-
ла, различные кнопки. Он имеет два обязательных параметра: TYPE и
NAME. Параметр TYPE определяет тип поля: селекторная кнопка, кнопка
передачи и др. Параметр NAME определяет имя, присваиваемое полю. Оно
Глава 9. Выполняемые сценарии 405

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

значения, передаваемого Web-серверу. Остальные параметры меняются
в зависимости от типа поля. Ниже приведено описание типов полей, соз-
даваемых при помощи тэга <INPUT>, и порождаемых ими элементов ввода.
П ТУРЕ=ТЕХТ
Создает элемент для ввода строки текста. Дополнительные параметры:
• MAXLENGTH=n
Задает максимальное количество символов, разрешенных в текстовом
поле. По умолчанию — не ограничено.
• SIZE=n
Максимальное количество отображаемых символов.
• УАЬиЕ=начальное_значение
Первоначальное значение текстового поля.
П TYPE=PASSWORD
Создает элемент ввода строки текста, отличающийся от предыдущего
только тем, что все вводимые символы представляются в виде символа *.

Примечание
Поле PASSWORD не обеспечивает безопасности введенного текста, так как на
сервер он передается в незашифрованном виде.
О TYPE=FILE
Создает поле для ввода имени локального файла, сопровождаемое кноп-
кой Browse. Выбранный файл присоединяется к содержимому формы при
пересылке на сервер. Имя файла можно ввести непосредственно или,
воспользовавшись кнопкой Browse, выбрать его из диалогового окна,
отображающего список локальных файлов. Для корректной передачи
присоединенного файла следует установить значения параметров формы
раВНЫМИ ENCTYPE="multipart/form-data" И METHOD=POST. В ПрОТИВНОМ
случае будет передана введенная строка, то есть маршрутное имя файла,
а не его содержимое. Дополнительные параметры MAXLENGTH и SIZE име-
ют тот же смысл, что и для элементов типа TEXT и PASSWORD.
П TYPE=CHECKBOX
Создает поле для установки флажка, который можно установить или
сбросить (on/off (вкл./выкл.), истина/ложь). Элементы CHECKBOX можно
объединить в группу, установив одинаковое значение параметра NAME.
Дополнительные параметры:
• VALUE=CTpOKa
Значение, которое будет передано серверу, если данная кнопка вы-
брана. Если кнопка не выбрана, значение не передается. Обязатель-
ный параметр.
406 _ Часть II. Интерактивные Web-документы

• CHECKED
Если указан параметр CHECKED, элемент является выбранным по умол-
чанию.
Если флажки образуют группу, то передаваемым значением является
строка разделенных запятыми значений параметра VALUE всех установ-
ленных флажков.
П TYPE=RADIO
Создает элемент-переключатель, существующий только в составе группы
подобных элементов, из которых может быть выбран только один. Все
элементы группы должны иметь одинаковое значение параметра NAME.
Отображается в виде круглой кнопки. Дополнительные параметры:
• УАШЕ=строка
Обязательный параметр, значение которого передается серверу при
выборе данной кнопки. Должен иметь уникальное значение для каж-
дого члена группы.
• CHECKED
Устанавливает элемент выбранным по умолчанию. Один и только
один элемент в группе должен иметь этот параметр.
О TYPE=SUBMIT
Создает кнопку передачи, нажатие которой вызывает пересылку на сер-
вер всего содержимого формы. По умолчанию отображается в виде пря-
моугольной кнопки с надписью Submit (или Submit Query — для браузера
Netscape). Дополнительный параметр

позволяет изменить надпись на кнопке. Параметр NAME для данного эле-

мента может быть опущен. В этом случае значение кнопки не включается
в список параметров формы и не передается на сервер. Если параметры
NAME И VALUE Присутствуют, Например,
<INPUT TYPE=SUBMIT NAME="submit_button" VALUE="OK">,

то в список параметров формы, передаваемых на сервер, включается па-

раметр submit_button="OK". Внутри формы могут существовать несколь-
ко кнопок передачи.
TYPE=RESET
Создает кнопку сброса, нажатие которой отменяет все сделанные изме-
нения, восстанавливая значения полей формы на тот момент, когда она
была загружена. По умолчанию отображается в виде прямоугольной
кнопки с надписью Reset. Надпись можно изменить при помощи допол-
нительного параметра
VALUE=Ha3BaHHe кнопки
Глава 9. Выполняемые сценарии _ 407

Значение кнопки Reset никогда не пересылается на сервер, поэтому у нее

отсутствует параметр NAME.
П TYPE=IMAGE
Создает элемент в виде графического изображения, действующий ана-
логично кнопке Submit. Дополнительные параметры:
• ЗКС=иг1_изображения
Задает URL-адрес файла с графическим изображением элемента.

Задает тип выравнивания изображения относительно текущей строки

текста точно так же, как одноименный параметр тэга <IMG>.
Если на изображении элемента щелкнуть мышью, то координаты указа-
теля мыши в виде NAME . x=n&NAME . y=m включаются браузером в список
параметров формы, посылаемых на сервер.
П TYPE=HIDDEN
Создает скрытый элемент, не отображаемый пользователю. Информация,
хранящаяся в скрытом поле, всегда пересылается на сервер и не может
быть изменена ни пользователем, ни браузером. Скрытое поле можно
использовать, например, в следующем случае. Пользователь заполняет
форму и отправляет ее серверу. Сервер посылает пользователю для за-
полнения вторую форму, которая частично использует информацию, со-
держащуюся в первой форме. Сервер не хранит историю диалога с поль-
зователем, он обрабатывает каждый запрос независимо и при получении
второй формы не будет знать, как она связана с первой. Чтобы повторно
не вводить уже введенную информацию, можно заставить CGI-програм-
му, обрабатывающую первую форму, переносить необходимые данные
в скрытые поля второй формы. Они не будут видимы пользователем и,
в то же время, доступны серверу. Значение скрытого поля определяется
параметром VALUE.

Тэг <SELECT>
<SELECT ЫАМЕ=имя_лоля SIZE=n MULTIPLE>
элементы OPTION
</SELECT>

Тэг <SELECT> предназначен для того, чтобы организовать внутри формы вы-
бор из нескольких вариантов без применения элементов типа CHECKBOX и
RADIO. Дело в том, что если элементов выбора много, то представление их
в виде флажков или кнопок-переключателей увеличивает размеры формы,
делая ее труднообозримой. С помощью тэга <SELECT> варианты выбора бо-
лее компактно представляются в окне браузера в виде элементов ниспадаю-
щего меню или списка прокрутки. Тэг имеет следующие параметры.
408 Часть II. Интерактивные Web-документы

О ЫАМЕ=строка
Обязательный параметр. При выборе одного или нескольких элементов
формируется список выбранных значений, который передается на сервер
под именем NAME.
П SIZE=n
Устанавливает число одновременно видимых элементов выбора. Если
п=1, то отображается ниспадающее меню, если п>1, то — список про-
крутки с п одновременно видимыми элементами.
О MULTIPLE
Означает, что из меню или списка можно выбрать одновременно не-
сколько элементов.
Элементы меню задаются внутри тэга <SELECT> при помощи тэга «DPTIONX
«DPTION SELECTED ЧКШЕ,=строка>содержимое_тэга

Закрывающий тэг </OPTION> не требуется. Параметр VALUE содержит значе-

ние, которое пересылается серверу, если данный элемент выбран из меню
или списка. Если значение этого параметра не задано, то по умолчанию оно
устанавливается равным содержимому тэга «DPTIONX Например, элементы
<OPTION VALUE=Red>Red
<OPTION>Red

имеют одно значение Red. В первом случае оно установлено явно при по-
мощи параметра VALUE, во втором — по умолчанию. Параметр SELECTED из-
начально отображает элемент как выбранный.

Тэг <TEXTAREA>
<TEXTAREA ЫАМЕ=имя ROWS=jn COLS=n>
текст
</TEXTAREA>

Тэг <TEXTAREA> создает внутри формы поле для ввода многострочного текста,
отображаемое в окне браузера в виде прямоугольной области с горизонталь-
ной и вертикальной полосами прокрутки. Для пересылки на сервер каждая
введенная строка дополняется символами %OD%OA (ASCII-символы "Возврат
каретки" и "Перевод строки" с предшествующим символом %), полученные
строки объединяются в одну строку, которая и отправляется на сервер под
именем, задаваемым параметром NAME. Параметры:
П NAME
Необходимый параметр, используемый для идентификации данных при
пересылке на сервер.
О COLS=n
Задает число столбцов видимого текста.
Глава 9. Выполняемые сценарии 409

О ROWS=n
Задает число строк видимого текста.
Между тэгами <TEXTAREA> и </TEXTAREA> можно поместить текст, который
будет отображаться по умолчанию.

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

<htmlxheadxtitle>npMMep iJ>opMbi</title></head>
<body>
<Ь2>Регистрационная страница Клуба любителей фантастики</п2>
Заполнив анкету, вы сможете пользоваться нашей электронной библиотекой.
<br>
<form method="get" action="/cgi-bin/[Link]">
<pre>
Введите регистрационное имя: <input type="text" name="regname">
Введите пароль: <input type="password" name="password!"
maxlength=8>
Подтвердите пароль: <input type="password" name="password2"
maxlength=8>
</pre>
Ваш возраст:
<input type="radio" name="age" value="lt20" checked>flo 20
<input type="radio" name="age" value="20_30">20-30
<input type="radio" name="age" value="30_50">30-50
<input type="radio" name="age" value="gt50">cTapme 50
<br><br>
На каких языках читаете:
<input type="checkbox" name="language" value="russian" checked>pyccicnu
<input type="checkbox" name="language" value="english">aHiyiHuciadi
<input type="checkbox" name="language" уа!ие=":£гепсп">французский
<input type="checkbox" name="language" value="german">HeMe4KHu
<brxbr>
Какой формат данных является для Вас предпочтительным
<br>
<select name="format" size=2>
<option selected value="HTML">HTML
<option value="Plain text">Plain text
<option value="PostScript">PostScript
<option value="PDF">PDF
</select>
410 Часть II. ИнтерактивныеМеЬ-документы

<brxbr>
Ваши любимые авторы:
<br>
<textarea name="wish" cols=40 rows=3>
</textarea>
<br><br>
<input type="submit" value="OK"> <input type="reset" value="OTMeHMTb">
</form>
</body>
</html>

Рис. 9.23. Пример заполнения формы

Данная форма содержит:

П текстовое поле для ввода регистрационного имени пользователя;
П текстовое поле для ввода пароля, отображаемого в окне символами *;
П текстовое поле для подтверждения пароля, также отображаемого симво-
лами *;
П группу кнопок-переключателей для указания возраста пользователя
(единственный выбор);
Глава 9. Выполняемые сценарии 411

П группу полей для установки флажков указания языков, которыми владеет

пользователь (множественный выбор);
О список прокрутки для указания предпочтительного формата данных
(выбор из ограниченного списка);
П блок ввода многострочного текста для перечисления любимых авторов
(неизвестное заранее количество строк);
П кнопку передачи с меткой ОК (у этого элемента отсутствует параметр
NAME, он не нужен, так как в данном примере всего одна кнопка переда-
чи, а, значит, CGI-программе нет необходимости определять, от какой
именно кнопки поступила команда передачи данных);
О кнопку сброса с меткой Отменить.
Итак, пользователь заполнил форму и щелкнул кнопку передачи Submit.
Дальнейшее прохождение данных выглядит следующим образом.
1. Информация кодируется и пересылается на Web-сервер, который пере-
дает ее для обработки CGI-программе.
2. CGI-программа обрабатывает полученные данные, возможно обращаясь
за помощью к другим программам, выполняющимся на том же компью-
тере, и генерирует новый "виртуальный" HTML-документ, либо опреде-
ляет ссылку на уже имеющийся.
3. Новый HTML-документ или ссылка передаются CGI-программой Web-
серверу для возврата клиенту.
Рассмотрим эти шаги более подробно.

Передача информации CGI-программе

Кодирование и пересылка данных формы
Как мы уже знаем, существуют два метода кодирования информации, со-
держащейся в форме:
П стандартный метод application/x-www-form-urlencoded, используемый по
умолчанию;
О дополнительный multipart/form-data.
Второй метод нужен только в том случае, если к содержимому формы при-
соединяется локальный файл, выбранный при помощи элемента формы
<INPUT TYPE=FILE>. В остальных случаях следует использовать метод коди-
рования по умолчанию.
Схема кодирования application/x-www-form-urlencoded одинакова для обоих
методов пересылки (GET и POST) и заключается в следующем.
Для каждого элемента формы, имеющего имя, заданное параметром NAME,
формируется пара "name=value", где value — значение элемента, введенное
412 Часть П. Интерактивные Web-документы

пользователем или назначенное по умолчанию. Если значение отсутствует,

соответствующая пара имеет вид "name—'. Для радиокнопок и переключате-
лей используются значения только выбранных элементов. Если элемент вы-
бран, а значение параметра VALUE не определено, по умолчанию использует-
ся значение "он".
Все пары объединяются в строку, в качестве разделителя служит символ "&".
Так как имена и значения представляют собой обычный текст, то они могут
содержать символы, недопустимые в составе URL (метод GET пересылает
данные как часть URL). Такие символы заменяются последовательностью,
состоящей из символа % и их шестнадцатеричного ASCII-кода. Символ
пробела может заменяться не только кодом %20, но и знаком + (плюс). При-
знак конца строки, встречающийся в поле TEXTAREA, заменяется кодом
%OD%OA. Такое кодирование называется URL-кодированием.
Закодированная информация пересылается серверу одним из методов GET
или POST. Основное отличие заключается в том, как метод передает инфор-
мацию CGI-программе.
При использовании метода GET данные формы пересылаются серверу в со-
ставе URL-запроса, к которому добавляются после символа "?" (вспомним,
что запрос это формализованный способ обращения браузера к Web-сер-
веру). Тело запроса в этом случае является пустым. Для формы из примера 9.5
запрос выглядит следующим образом:
GET /cgi-bin/[Link]? reg-
name=bob&passwordl=rumata&password2=rumata&age=lt20&language=
russian&format=HTML&wish=%F6%C5%CC%Dl%DA%CE%D9 HTTP/1.0

(заголовки запроса, сообщающие серверу информацию о клиенте)

<пусто> (тело запроса)

Часть URL после символа "?" называется строкой запроса. Web-сервер, по-
лучив запрос, присвоит переменной среды QUERY_STRING значение строки
запроса и вызовет CGI-программу, обозначенную в первой части URL до
символа "?": /cgi-bin/[Link]. CGI-ПрОГрамма registrar. cgi CMO-
жет затем обратиться к переменной QUERY_STRING для обработки закодиро-
ванных в ней данных.

Предупреждение
Обратите внимание на то, что данные, введенные в поле типа PASSWORD, пе-
редаются открытым текстом без шифрования. При передаче данных методом
GET они в составе URL помещаются в файл регистрации доступа [Link],
обычно открытый для чтения всем пользователям. Таким образом "секретные"
данные, введенные в поле типа PASSWORD, оказываются доступными посто-
ронним.
Глава 9. Выполняемые сценарии _ 413

( Примечание )
Метод GET позволяет передавать данные CGI-программе вообще без исполь-
зования форм. Информацию, содержащуюся в приведенном выше URL, можно
передать при помощи следующей гиперссылки, помещенной в HTML-документ:
<А HREF="http: //[Link]/cgi-bin/[Link]?
regname=bob&passwordl=rumata&password2=rumata&age=lt20&language=
russian&format=HTML&wish=%F6%C5%CC%Dl%DA%CE%D9 ">СС1-программа</А>,
заменив в этом фрагменте символ " & " его символьным примитивом &#38 или
samp для правильной интерпретации браузером.
К сожалению, эта информация является статической. Форма же позволяет ме-
нять данные.
Строка запроса — не единственный способ передачи данных через URL. Дру-
гим способом является дополнительная информация о пути (extra path
information), представляющая собой часть URL, расположенную после имени
CGI-программы. Сервер выделяет эту часть и сохраняет ее в переменной сре-
ды PATH_INFO. CGI-программа может затем использовать эту переменную для
извлечения данных. Например, URL
http: //www. domain/ cgi-bin/regist rar. cgi/ regname=bob&passwordl=
rumata&password2=rumata&age=lt20slanguage=russian&format=HTML&wish=
%F6%C5%CC%D1%DA%CE%D9
содержит уже знакомые нам данные, но не в виде строки запроса, а в виде до-
полнительной информации о пути. При получении запроса с таким URL сервер
сохранит данные в переменной среды.
PATH_INFO= "/regname=bob&passwordl=rumata&password2=rumata&age=
lt20&language=russian&format=HTML&wish=%F6%C5%CC%Dl%DA%CE%D9"
Название объясняется тем, что обычно этим способом передается информация
о местоположении какого-либо файла (extra path information). Например, URL
http: / /www. domain/cgi-bin/ registrar. cgi /texts /jdk_doc.txt
содержит дополнительную информацию PATH_iNFO="/texts/ jdk_doc.txt"
о местонахождении файла jdk_doc . txt относительно корневого каталога де-
рева документов. Другая переменная среды PATH_TRANSLATED содержит инфор-
мацию об абсолютном местоположении файла в файловой системе, например,
PATH_TRANSLATED="/home/httpd/docs/texts/ jdk_doc.txt"
а переменная DOCUMENT_ROOT содержит путь к корневому каталогу дерева до-
кументов, в нашем случае DOCUMENT_ROOT="/home/httpd/docs/" .

При использовании метода POST данные формы пересылаются серверу в те-

ле запроса. Если в примере 9.5 вместо метода GET использовать метод POST
<form method="post" action="/cgi-bin/[Link]">,
то запрос клиента будет иметь следующий вид:
POST /cgi-bin/[Link] HTTP/1.1
(заголовки запроса, сообщающие серверу информацию о клиенте)
414 Часть II. Интерактивные Web-документы

Content-length: 126
regname=bob&passwordl=rmnata&password2=rumata&age=lt20&language=
russian&format=HTML&wish=%F6%C5%CC%Dl%DA%CE%D9

В этом фрагменте среди прочих заголовков выделен заголовок Content-

length, сообщающий серверу количество байт, переданных в теле запроса.
Это значение сервер присваивает переменной среды CONTENT_LENGTH, а дан-
ные посылает в стандартный ввод CGI-программы.

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

Методы GET и POST имеют свои достоинства и недостатки. Метод GET обес-
печивает лучшую производительность при пересылке форм, состоящих из
небольшого набора коротких полей. При пересылке большого объема дан-
ных следует использовать метод POST, так как браузер или сервер могут на-
кладывать ограничения на размер данных, передаваемых в составе URL, и
отбрасывать часть данных, выходящую за границу. Метод POST, к тому же,
является более надежным при пересылке конфиденциальной информации.

CGI-сценарии
Общие сведения
Назначение CGI-программы — создать новый HTML-документ, используя
данные, содержащиеся в запросе, и передать его обратно клиенту. Если та-
кой документ уже существует, то передать ссылку на него. Какой язык мож-
но использовать для написания CGI-программ? Сам интерфейс CGI не на-
кладывает ограничений на выбор языка программирования. Зная, какую за-
дачу решает CGI-программа и каким образом она получает входную
информацию, мы можем назвать свойства, которыми должен обладать язык
CGI -программирования.
П Средства обработки текста. Необходимы для декодирования входной
информации, поступающей в виде строки, состоящей из отдельных по-
лей, разделенных символами-ограничителями.
П Средства доступа к переменным среды. Необходимы, так как с помощью
переменных среды данные передаются на вход CGI-программы.
Глава 9. Выполняемые сценарии 415

П Возможность взаимодействовать с другими программами. Необходима для

обращения к СУБД, программам обработки графики и другим специаль-
ным программам.
Выбор языка зависит и от операционной системы Web-сервера. Большая
часть имеющихся серверов предназначены для работы под управлением
операционной системы UNIX. В этой операционной системе очень распро-
странено использование скриптов — текстовых командных файлов, пред-
ставляющих собой профаммы, состоящие из обращений к командам опера-
ционной системы и управляющих конструкций языка shell — командной
оболочки UNIX. Профамма shell является интерпретатором команд опера-
ционной системы и, в то же время, имеет встроенные средства, характерные
для языков профаммирования: строковые переменные и управляющие кон-
струкции — операторы цикла, перехода, условные операторы и т. д. Shell
выполняет командные файлы как интерпретатор, т. е. считывает из файла и
выполняет команды одну за другой с учетом управляющих конструкций, не
преобразуя исходный текст в исполняемый двоичный код. При помощи
скриптов осуществляется значительная часть работы по конфигурированию
ОС. Видимо, с распространенностью командных процедур в UNIX и связа-
но появление в этой операционной системе ряда интерпретирующих язы-
ков, предназначенных для создания сценариев: Perl, Python, Tel. Все они
могут использоваться для написания CGI-сценариев так же, как и традици-
онные языки профаммирования C/C++. Наибольшее распространение в
качестве языка CGI-профаммирования получил язык Perl (Practical
Extraction and Report Language). Он удовлетворяет перечисленным выше
требованиям и, кроме того, обладает такими полезными свойствами, как:
О переносимость (существуют версии интерпретатора Perl для MS-DOS,
Windows, Macintosh и множества других платформ);
П наличие готовых модулей, облегчающих CGI-профаммирование и сво-
бодно доступных в сети Интернет на многих ftp-узлах в архивах CPAN
(Comprehensive Perl Archive Network).
Perl — достаточно простой язык (по утверждению его создателя). Во-первых,
это интерпретируемый язык, а интерпретируемые языки в целом проще язы-
ков компилируемых. Во-вторых, его конструкции, в основном заимство-
ванные из других языков, достаточно понятны тем, кто имеет отношение
к профаммированию. Вместе с тем, это мощный язык, обладающий многими
возможностями таких языков, как С, UNIX shell, awk (язык обработки тек-
стовых данных в UNIX), sed (утилита UNIX, предназначенная для обработ-
ки текста) и, следовательно, требующий времени для усвоения. К счастью,
для понимания и создания простых профамм не требуется знания всех воз-
можностей Perl, вполне достаточно начального уровня владения языком.
Данный раздел не предназначен для того, чтобы служить введением или
кратким справочником по языку Perl и технике профаммирования на нем.
Задача другая — дать представление о том, как используется Perl в CGI-npo-
416 _ Часть II. Интерактивные Web-документы

граммировании. Поэтому мы не стараемся давать формальное определение

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

( Примечание )
При написании программ следует помнить, что язык Perl, как и ОС UNIX, явля-
ется чувствительным к регистру символов, поэтому "Perl" и "PERL" обозначают
не одно и то же.

Первая программа "Hello, world!", с которой начинается изучение любого

языка программирования, на языке Perl выглядит так:
# ! /usr/bin/perl
print "Hello, world! \n";

Первая строка сообщает, где находится интерпретатор языка Perl. В UNIX-

системах она служит для того, чтобы сопоставить файлу с текстом Perl-про-
граммы обрабатывающее его приложение. Другие операционные системы ее
игнорируют.
Функция print выводит список своих аргументов, преобразованных в стро-
ку, в стандартный вывод, по умолчанию ассоциированный с терминалом.
Управляющая последовательность \п вызывает переход на новую строку по-
сле вывода информации.
Отметим также, что большая часть строк Perl-программы завершается сим-
волом точка с запятой (;). Исключением являются строки, содержащие опе-
раторы цикла и условные операторы. Сохраним текст программы в файле
[Link]. Запустить программу можно по-разному, например, передав имя
файла в качестве аргумента командной строки интерпретатору языка:
• " • • ' V
perl [Link]

В ОС UNIX можно сделать файл выполняемым, применив команду

chmod 755 [Link],
и запустить его из командной строки:
./[Link]
CGI-сценарий на языке Perl это программа, имеющая свою специфику, за-
ключающуюся в том, что она, как правило, генерирует HTML-документ,
посылаемый клиенту в виде ответа сервера. Ответ сервера, так же как и за-
прос клиента, имеет определенную структуру. Он состоит из следующих
трех частей:
1. Строка состояния, содержащая три поля: номер версии протокола HTTP,
код состояния и краткое описание состояния, например:
НТТР/1.0 200 ОК # Запрос клиента обработан успешно
НТТР/1.0 404 Not Found # Документ по указанному адресу не существует
Глава 9. Выполняемые сценарии 417

2. Заголовки ответа, содержащие информацию о сервере и о возвращаемом

HTML-документе, например:
Date: Mon, 26 Jul 1999 18:37:07 GMT # Текущая дата и время
Server: Apache/1.3.6 # Имя и номер версии сервера
Content-type: text/html # Описывает медиа-тип содержимого

3. Содержимое ответа — HTML-документ, являющийся результатом выпол-

нения CGI-программы.
CGI-программа передает результат своей работы — HTML-документ — сер-
веру, который возвращает его клиенту. При этом сервер не анализирует и не
изменяет полученные данные, он может только дополнять их некоторыми
заголовками, содержащими общую информацию (например, текущая дата
и время) и информацию о самом себе (например, имя и версия сервера).
Информация о содержимом ответа формируется CGI-программой и должна
содержать как минимум один заголовок, сообщающий браузеру формат воз-
вращаемых данных:
Content-type: text/html

С~ Примечание ^
Информацию о заголовках можно найти в спецификации протокола HTTP. Мы
же ограничимся еще одним примером. Если в качестве ответа клиенту посыла-
ется статический документ, например, подтверждение о получении заполнен-
ной формы, то неэффективно каждый раз создавать его заново. Лучше создать
один раз и сохранить в файле. В этом случае CGI-сценарий вместо заголовка
Content-type: media-type
описывающего формат данных, формирует заголовок Location: URL, указы-
вающий серверу местонахождение документа, который следует передать кли-
енту.

Заголовки отделяются от содержимого документа пустой строкой.

Преобразуем, учитывая сделанные замечания, программу [Link] в CGI-сце-
нарий, который сохраним в файле [Link].
#!/usr/bin/perl
print "Content-type:text/html\n\n";
print "<htmlxhead><title>HELLO</title></head>\n";
print "<body>\n";
print "<h2>Hello, world!</h2>\n";
print "</body></html>\n";

Если поместить файл [Link] в каталог CGI-программ Web-сервера, а затем

обратиться к нему из браузера, то браузер отобразит HTML-документ, соз-
данный программой [Link] (рис. 9.24).

!43ак. 944
418 Часть II. Интерактивные Web-документы

ttp: //wvw. domain, edu/cgi-bin/hello. cgi

Рис. 9.24. Web-страница, сформированная программой [Link]

Примечание
Большинство Web-серверов по умолчанию предполагают, что файлы CGI-сце-
нариев находятся в специальном каталоге, обычно называемом cgi-bin.
Можно настроить сервер таким образом, чтобы все файлы, находящиеся в
определенном каталоге, он воспринимал не как обычные документы, а как
выполняемые сценарии. Можно также указать серверу, что все файлы с опре-
деленным расширением (например, CGI) должны рассматриваться как CGI-
сценарии. Когда пользователь открывает URL, ассоциированный с CGI-npo-
граммой, клиент посылает запрос серверу, запрашивая файл. Сервер распо-
знает, что запрошенный адрес является адресом CGI-программы, и пытается
выполнить эту программу. Подробности конфигурирования Web-серверов мож-
но найти в соответствующей литературе и документации на конкретный сервер.

Переменные в языке Perl

В языке Perl существует три типа данных и соответственно им три типа пе-
ременных: скалярные переменные, массивы скалярных переменных и ассо-
циативные массивы скалярных переменных (или хеш-массивы). В Perl
программе переменные не нужно явно описывать перед их использованием.
Тип переменной определяется начальным символом, предшествующим ее
имени.
Скалярные переменные
Скалярный тип является базовым типом, на основании которого строятся
более сложные структуры данных. Скалярная переменная содержит одно
значение, которое может быть числом, строкой или ссылкой на другую пе-
ременную. Признаком скалярной переменной является начальный символ
"$":
$name = "mike";
$х = 7;
$nameref = \$name;
Глава 9. Выполняемые сценарии 419

В первой строке примера скалярной переменной $name присваивается стро-

ковое значение "mike", во второй строке — скалярной переменной $х при-
сваивается числовое значение 7, в третьей строке — скалярной переменной
$nameref присваивается значение ссылки на скалярную переменную $name.
Операция \х создает ссылку на объект х, который может быть переменной,
подпрограммой или константой.
И число, и строка относятся к скалярному типу данных, поэтому в про-
грамме скалярная переменная может последовательно принимать числовые
и строковые значения, не вызывая сообщения о неправильном использова-
нии типов:
#! /usr/bin/perl
$pi=3.1416;
$р!="Число пи равно $pi";
print "$pi\n";
В результате выполнение этой программы будет выведена строка:
Число пи равно 3.1416
Над данными скалярного типа в языке Perl определены арифметические и
логические операции, показанные в табл. 9.14.

Таблица 9.14. Основные арифметические и логические операции языка Perl

Операция Описание Пример Результат

+ Сложение 5+3 8

- Вычитание 3-5 -2
* Умножение 2*3 6

/ Деление 10/2 5

% Остаток от деления 20/3 2

** Возведение в степень 2**3 8

• Конкатенация строк "Hello, "Hello,

"." world!" world! "

Повторение первого операнда; " 1 "*3

количество повторений задается
вторым операндом
Побитовое И 123&456 72
123=11110112
456=110010002
72=1001000 2
Побитовое ИЛИ 1231456 507
123=11110112
456=110010002
507=111110112
420 Часть II. Интерактивные Web-документы

Таблица 9.14 (окончание)

Операция Описание Пример Результат

Побитовое исключающее ИЛИ 123 Л 456 435

123=11110112
456=11001000,
435=101100112
Побитовый сдвиг вправо 32»2 8
32=1000002
8=10002
Побитовый сдвиг влево 32«2 128
32=100000 2
128=10000000 2
&& Логическое И: 1 && 2 2
$а && $Ь = $а, если $а — ложь, 32 && 0 0
иначе $Ь
I I Логическое ИЛИ: 1 1 1 2 1
$а || $Ь = $а, если $а — истина, 32 | | 0 32
иначе $Ь

( Примечание }
В языке Perl нет специального типа для представления логических данных, но,
в то же время, есть логические операции, выполняемые над скалярными вели-
чинами. При выполнении логических операций над данными скалярного типа
следует руководствоваться следующими правилами:
• Любая строка, кроме пустой строки "" и строки "О", соответствует логическо-
му значению "истина".
• Любое число, кроме 0, соответствует значению "истина".
• Любая ссылка соответствует значению "истина".
• Любое неопределенное значение соответствует значению "ложь".
Так как логические значения "истина" и "ложь" не имеют однозначной записи, то
логические операции && и || в качестве результата возвращают последнее вы-
численное в результате применения операции скалярное значение.

Операции сравнения скалярных величин определены отдельно для числовых

и строковых значений, как показано в табл. 9.15.

Таблица 9.15. Операции сравнения

Операция Описание Пример Результат

Числовое "больше чем" ложь ( " " )

Числовое "меньше чем" 2<3 истина (1)
Глава 9. Выполняемые сценарии 421

Таблица 9. 15 (окончание)

Операция Описание Пример Результат

Числовое "больше или равно" 3>=2 истина (1)

<- Числовое "меньше или равно" 3<=3 истина (1)

Числовое равенство 2==3 ложь ( " " )

!= Числовое неравенство 2!=3 истина (1)

gt Строковое "больше чем" "hat" gt "cat" истина (1)

It Строковое "меньше чем" "hat" It "cat" ложь ( " " )

ge Строковое "больше или равно" "hat" ge "hat" истина (1)

le Строковое "меньше или равно" "pat" le "hat" ложь ( " " )

eq Строковое равенство "cat" eq "cats" ложь ( " " )

Ne Строковое неравенство "cat" ne "cats" истина (1)

Г
-
Примечание i
При сравнении строковых значений используется лексикографический порядок,
принятый в словарях: "a" It "aa" It "ab" It ... "ay" It "az".

В порядке убывания приоритета операции, перечисленные в табл. 9.14 и

9.15, располагаются следующим образом:

|-
«
< <= >= It gt le ge
eq ne

&&
I I

Внесем изменения в нашу первую программу [Link], добавив в нее скаляр-

ные переменные и некоторые новые конструкции:
#!/usr/bin/perl
5ту_пате="Издательство BHV, Санкт-Петербург";
print "Привет, привет. Как Ваше имя?\п";
$your_name=<STDIN>;
chomp($your_name);
print "Здравствуйте, $your_name. Вас приветствует $my_name.\n";
422 Часть II. Интерактивные Web-документы

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

perl [Link]
Привет, привет. Как Ваше имя?
mike
Здравствуйте, mike. Вас приветствует Издательство BHV, Санкт-Петербург.

Программа выводит приглашение ввести имя и считывает его в переменную

$your_name, используя оператор присваивания $your_name=<STDiN>. Иден-
тификатор STDIN обозначает дескриптор файла стандартного ввода програм-
мы. Дескриптор файла — это внутреннее имя файла для интерпретатора
Perl. Он создается и связывается с конкретным файлом на диске при помо-
щи специальной функции, о чем будет сказано дальше. Интерпретатор пре-
доставляет Perl-программе несколько предопределенных, автоматически от-
крываемых дескрипторов, которые он сам получает от операционной систе-
мы. Это дескриптор стандартного ввода STDIN, дескриптор стандартного
вывода STDOUT и дескриптор стандартного вывода диагностики STDERR,
обычно связанные с терминалом. Оператор $your_name=<STDiN> читает одну
строку из файла, соответствующего дескриптору STDIN, то есть из стандарт-
ного ввода программы — терминала.
Считанное значение обрабатывается функцией chomp. Функция
chomp variable
удаляет из строкового аргумента variable признак конца строки. Если его
не удалить, то в нашем примере последняя выводимая строка будет разорвана:
Здравствуйте, mike
. Вас приветствует Издательство BHV, Санкт-Петербург.

Массивы
Массив это упорядоченный список скалярных значений. Признаком пере-
менной, обозначающей массив, является начальный символ имени "@", на-
пример,
@names = ("Kate","Bob","Mike");

Здесь определен упорядоченный массив из трех элементов "Kate", "Bob" и

"Mike". Значение массива в правой части оператора присваивания представ-
ляется конструкцией, состоящей из списка скалярных значений, разделен-
ных запятыми и заключенных в круглые скобки. Префикс @ в имени пере-
менной используется для обозначения массива как совокупности элементов.
Для обращения к единичному элементу используется имя массива с пре-
фиксом $, сопровождаемое индексом, заключенным в квадратные скобки.
Первому элементу массива всегда соответствует индекс 0.
$names[0] = "Ann";
@selected names = Gnames[1..2];
Глава 9. Выполняемые сценарии 423

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

В первом случае происходит обращение к единичному элементу массива
$names[0] для изменения его значения. Во втором случае определяется но-
вый массив @seiected_names, которому присваивается массив значений
@names(i. .2], состоящий из элементов "Bob" и "Mike".
Использование имени массива в качестве скалярной переменной позволяет
легко определить число элементов массива:
$number_of_names = @ names;
Значение переменной $nun±>er_of_naities равно числу элементов в массиве
@names.
В языке Perl можно добавлять новые элементы к массиву при помощи при-
сваивания значений:
$names[3] = "John";
Теперь массив @names состоит из четырех элементов: "Ann", "Bob", "Mike" и
"John".

Функции для работы с массивами

Perl располагает набором функций для работы с массивами. Ниже опреде-
лены наиболее употребительные из них.
П splice @ARRAY, OFFSET [, LENGTH [, LIST]]
Удаляет LENGTH элементов из массива @ARRAY, начиная с элемента с ин-
дексом OFFSET, и заменяет их элементами списка LIST. Возвращает уда-
ленные элементы. Если количество удаляемых элементов LENGTH не ука-
зано, удаляются все элементы, начиная с элемента OFFSET.
Пример:
@colors=("red","green","black","white","blue");
splice @colors,2,2, "orange","brown";

Элементы "black" и "white" массива @coiors заменяются на элементы

"orange" и "brown", соответственно.
П shift 0ARRAY
Осуществляет сдвиг элементов массива SARRAY влево с отбрасыванием
первого элемента. Возвращает значение удаленного первого элемента
массива.
О unshift SARRAY, LIST
Добавляет к началу массива @ARRAY список элементов LIST. Возвращает
число элементов в новом массиве.
О pop 9ARRAY
Удаляет последний элемент массива SARRAY и возвращает его значение.
424 Часть II. Интерактивные Web-документы

П push @ARRAY, LIST

Добавляет в конец массива ARRAY элементы из списка LIST.
П sort (3ARRAY
Сортирует элементы массива SARRAY и возвращает отсортированный мас-
сив.
П reverse 0ARRAY
Возвращает массив @ARRAY с элементами, расположенными в обратном
порядке.
П join EXPR, 0ARRAY
Объединяет в одну строку элементы массива @ARRAY, используя в качестве
разделителя полей значение EXPR, и возвращает эту строку.
Пример:
@numbers=("l","2","3") ;
$string=join "***", @numbers;

Значение переменной $string равно "i***2***3".

Ассоциативные массивы
Ассоциативный массив или хеш-массив, это неупорядоченное множество
пар скалярных величин "ключ-значение". Поскольку хеш-массив представ-
ляет собой неупорядоченное, а, значит, ненумерованное множество элемен-
тов, то обращение к отдельному элементу осуществляется не через его ин-
декс, которого нет, а через ключ, ассоциированный с этим элементом. Имя
переменной, обозначающей ассоциативный массив, содержит в качестве
префикса символ "%", например,
Iphones = ("Ann", "123-45-67",
"Bob", "765-43-21",
"Mike", "543-21-76");
или более наглядно
%phones =("Ann" => "123-45-67",
"Bob" => "765-43-21",
"Mike" => "543-21-76");
В этом примере определен хеш-массив %phones, содержащий номера теле-
фонов, ассоциированные с именами их владельцев. Имя служит ключом для
выбора отдельного элемента:
$ann_phone=$phones{'Ann'};

Переменной $ann_phone присвоено значение "123-45-67". Снова обратите

внимание на использование префиксов в именах переменных. Префикс $
Глава 9. Выполняемые сценарии _ 425

в имени хеш-массива, за которым следует значение ключа в фигурных скоб-

ках, используется для обращения к единичному элементу, в то время, как
префикс % — для ссылки на весь ассоциативный массив. Символы "," и
"=>", используемые для создания пары "ключ-значение", являются синони-
мами.
Для получения списка всех ключей или всех значений ассоциативного мас-
сива можно использовать функции keys и values, соответственно:
@persons= keys %phones;
@numbers= values %phones;

Массив gpersons содержит список ключей хеш-массива %phones, располо-

женных в случайном порядке. Массив Onumbers содержит список значений
хеш-массива %phones, расположенных в порядке, соответствующем порядку
расположения ключей в массиве Spersons:
("Bob", "Ann", "Mike") — массив @persons,
("234-56-78", "123-45-67"," 345-67-89") — массив Snumbers
Можно добавлять элементы к ассоциативному массиву при помощи при-
сваивания:
$phones{ 'John' }="456-78-90"
или удалять при помощи функции delete:
delete $phones ( ' j ohn ' }
Для выполнения операций над множеством элементов массива в языках
программирования существуют операторы цикла. Perl имеет несколько та-
ких операторов, из которых мы отметим один, позволяющий работать как с
обычными, так и с ассоциированными массивами.
f о reach $VAR (LIST) {

В операторе цикла foreach для каждого значения, принимаемого переменной

$VAR из списка LIST, выполняется последовательность операторов, заклю-
ченная в фигурные скобки {}. Аргумент LIST может быть списком скалярных
значений, разделенных запятыми, или переменной, представляющей массив
или хеш-массив.
Пример:
foreach $name (gnames)
{
print "$name\n";
}
foreach $key ( keys %phones)
426 Часть II. Интерактивные Web-документы

(
print "$key ' phone is $phones{$key)\n";
}
Результатом выполнения первого оператора foreach будет вывод списка
имен, являющихся элементами массива @names:
Ann
Bob
Mike

В результате выполнения второго оператора foreach будут выведены сле-

дующие строки:
Bob 's phone is 234-56-78
Ann 's phone is 123-45-67
Mike 's phone is 345-67-89

Обратите внимание на то, что список телефонов выведен в случайном по-

рядке. Применение функции sort позволяет получить список, отсортиро-
ванный по значениям ключей:
foreach $key ( sort( keys %phones))
{
print "$key ' phone is $phones{$key}\n";
}

Читатель, должно быть, уже догадался, что ассоциативные массивы естест-

венным образом находят применение в CGI-сценариях для обработки дан-
ных формы, передаваемых в виде совокупности пар "имя=значение".
Все операции в языке Perl выполняются в определенном контексте. Суще-
ствуют два основных контекста: скалярный и контекст массивов. Результат
операции зависит от того, в каком контексте она выполняется. Например,
допустимы такие операции присваивания:
@ а= ("one", "two","three"};
$a=("one", "two","three");
В первом случае операция выполняется в контексте массива, она присваива-
ет целый список значений переменной-массиву @а. Во втором случае опера-
ция выполняется в скалярном контексте, она присваивает единственное
значение, равное числу элементов списка (3), скалярной переменной $а.
В контексте массива допустима, например, операция присваивания ($опе,
$two, $three}= @а, В результате .которой переменным $one, $two, $three
будут присвоены последовательные значения из массива @а.

Переменные среды CGI

В зависимости от метода данные формы передаются в CGI-программу или
через стандартный ввод (POST), или через переменную среды QUERY_STRING
Глава 9. Выполняемые сценарии 427

(GET). Помимо этих данных CGI-программе доступна и другая информация,

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

Таблица 9.16. Переменные среды CGI

Переменная среды Описание

GATEWAYJNTERFACE Версия CGI, которую использует сервер

SERVER_NAME Доменное имя или IP-адрес сервера
SERVER_SOFTWARE Имя и версия программы-сервера, отвечающей на за-
прос клиента (например, Apache 1.3)
SERVER_PROTOCOL Имя и версия информационного протокола, который
был использован для запроса (например, HTTP 1.0)
SERVER_PORT Номер порта компьютера, на котором работает сервер
(по умолчанию 80)
REQUEST_METHOD Метод, использованный для выдачи запроса (GET,
POST)
PATHJNFO Дополнительная информация о пути
PATH_TRANSLATED Та же информация, что и в переменной PATHJNFO
с префиксом, задающим путь к корневому каталогу
дерева Web-документов
SCRIPT_NAME Относительное маршрутное имя CGI-сценария (напри-
мер, /cgi-bin/[Link])
DOCUMENT_ROOT Корневой каталог дерева Web-документов
QUERY_STRING Строка запроса — информация, переданная в составе
URL запроса после символа "?"
REMOTEJHOST Имя удаленной машины, с которой сделан запрос
REMOTE_ADDR IP-адрес удаленной машины, с которой сделан запрос
REMOTEJJSER Идентификационное имя пользователя, посылающего
запрос
CONTENT_TYPE Медиа-тип данных запроса, например, "text/html"
CONTENT_LENGTH Количество байт в теле запроса, переданных в CGI-
программу через стандартный ввод
HTTP_HOST Хост-имя компьютера, на котором работает сервер
HTTP FROM Адрес электронной почты пользователя, направившего
запрос
428 Часть II. Интерактивные Web-документы

Таблица 9.16 (окончание)

Переменная среды Описание

НТТР_АССЕРТ Список медиа-типов, которые может принимать клиент

HTTP_USER_AGENT Браузер, которым клиент пользуется для выдачи запроса
HTTP REFERER URL-адрес документа, на который клиент указывал пе-
ред обращением к CGI-программе

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

CGI-программа на языке Perl имеет доступ к переменным среды через ав-

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

.Bs;,::. --jScSJVv. RuISM НМЛ

_
[Link]
КГГР„а»)НЕГ,ГЛЛ1 :
ИТГР„НС);-"Г : www

_ , . . .
PATH: ,/sl'in .

? >,.,v! J,.VK ч, }• •;>>„,' fist

Рис. 9.25. Информация о переменных среды CGI

переменнУх

# ! /usr/bin/perl
print "Content-type: text /html \n\n";
Глава 9. Выполняемые сценарии 429

print "<html>\n";
print "<headxtitle>nepeMeHHbie cpejobi</title></head>\n";
print "<Ьос1уХп2>Переменные среды</п2>\п";
print "<hrxpre>\n";
foreach $name (sort(keys %ENV))
{
print "$name: $ENV{$name}\n";
}
print "<hr></pre>\n";
print "</bodyx/html>\n";

Поиск и замена текста. Регулярные выражения

При обработке текста часто приходится осуществлять поиск фрагментов,
удовлетворяющих некоторым условиям, например,
П найти все слова, содержащие последовательность qwerty;
П найти все слова, начинающиеся с последовательности qwerty;
П найти все слова, имеющие окончание qwerty;
П найти все слова, не содержащие последовательности qwerty;
П найти все слова, начинающиеся с последовательности qwerty и оканчи-
вающиеся цифрой, и т. д.
Как видим, условия поиска могут быть достаточно сложными. В языке Perl
существуют специальные конструкции, предписывающие интерпретатору
организовать поиск, замену или преобразование фрагментов текста, удовле-
творяющих некоторому образцу. Рассмотрим следующее выражение:
$variable =~ s/pattern/substitution/[e] [g] [i] [m] [о] [s] [x]

Левая часть $variabie является скалярной переменной. Правая часть пред-

ставляет собой конструкцию
s/pattern/substitution/[е] [g] [i] [m] [о] [s] [x],

которая служит для интерпретатора Perl командой, организующей поиск

образца pattern и замену его выражением substitution. Опции egimosx мо-
дифицируют процесс поиска и замены, в частности, опция "g" означает вы-
полнение глобальной (а не единичной) замены, а опция "е" означает, что
заменяющая строка должна вычисляться как Perl-выражение. Оператор "=~"
связывает скалярную переменную с командой подстановки, указывая, что
замену следует осуществлять в строке $variabie. Значением данного выра-
жения является количество произведенных замен, так что допустима сле-
дующая операция присваивания:
$count=($variable=~s/pattern/substitution/),
430 Часть II. Интерактивные Web-документы

в результате которой переменная $count будет равна количеству замен, сде-

ланных В строке $variable.
Выражение:
$variable=~tr/searchlist/replacementlist/cds
предписывает интерпретатору заменить в строке $variabie все вхождения
символов из списка searchlist на соответствующие символы из списка
repiacementiist. Значением выражения является число замененных симво-
лов. Опции модифицируют процесс замены следующим образом:
с — будет использован не список поиска searchlist, а его дополнение;
d — удаление всех символов, для которых нет соответствующего символа
В списке замены repiacementiist;
s — все последовательности символов, преобразуемые в один и тот же сим-
вол, заменяются одним экземпляром этого символа.
Образец для поиска pattern представляется в виде регулярного выражения.
Регулярное выражение можно рассматривать как шаблон для выделения це-
почек символов. Для задания этого шаблона используются специальные
символы \ | ( ) [ { Л $ * + ? . и двухсимвольные конструкции, имеющие в
составе регулярного выражения особый смысл. Все остальные символы яв-
ляются обычными символами, представляющими самих себя. Подробно ре-
гулярные выражения рассматриваются в литературе по операционной сис-
теме UNIX, где различные их формы используются в командном интерпре-
таторе shell, утилитах grep, sed, awk, текстовых редакторах ed, vi, emacs.
Ограничимся перечислением некоторых конструкций, имеющих в регуляр-
ном выражении специальную интерпретацию (табл. 9.17).

Таблица 9.17. Конструкции, используемые в регулярных выражениях

Конструкция Интерпретация

Любой одиночный символ, кроме символа новой строки

[...] Любой символ из [...]; возможно задание диапазона значений, на-
пример,
[A-Z] означает любой символ от А до Z
[л...] Любой символ, не входящий в [...]
Ряд элементов, сгруппированных как один элемент
Выбор одного из вариантов
Обозначает положение в начале строки
$ Обозначает положение в конце строки
\ Отмена специального значения следующего за ним символа
Глава 9. Выполняемые сценарии 431

Таблица 9.17 (окончание)

Конструкция Интерпретация

+ Одно или более повторений предыдущего элемента

Нуль или более повторений предыдущего элемента
? Нуль или одно повторение предыдущего элемента
{n,m} Минимум п, максимум m повторений предыдущего элемента;
{п} означает ровно п повторений, {п,} — минимум п повторений
\w Множество алфавитно-цифровых символов плюс символ подчер-
кивания, эквивалентно [a-zA-Z_0-9]
Л
\W Дополнение предыдущего множества, т. е. [ а-гА-2_0-9]
\s Разделитель: пробел, символ табуляции (\t), символ новой строки
(\п), символ возврата каретки (\г), символ подачи бланка (Yf)
\S He разделитель
\Ь Обозначает положение на границе слова
\В Обозначает положение не на границе слова

Часть регулярного выражения может быть заключена в круглые скобки.

В этом случае все заключенные в скобки подвыражения будут пронумерова-
ны слева направо числами 1, 2, и т. д. При нахождении фрагмента, удовле-
творяющего образцу, в нем будут выделены части, соответствующие подвы-
ражениям, заключенным в круглые скобки, и сохранены в специальных пе-
ременных. К этим переменным в дальнейшем можно обратиться внутри
регулярного выражения (при помоши ссылок \1, \2 и т. д.) или за предела-
ми регулярного выражения (при помощи ссылок $1, $2 и т. д.).
Примеры:
П $str =~ s/\bred\b/white/g;
Глобальная замена целого слова red на слово white. Части слов замене не
подлежат. Слово redactor, например, останется неизменным.
СП $count=($x =~ s/\bmore\b/less/g);
Подсчет числа замен слова more словом less.
П $str =~ з / ( [ Л ]*) * ( [ Л ] * ) / $ 2 $1/;
Поменять местами первые два поля в строке $str.
П $str =~ з / Л \ з М . * ? ) \ з * $ / $ 1 / ;
Убрать символы-ограничители в начале и конце строки $str.
П ($b=$a)=~s/Perl/Shell/;
Присвоить переменной $ь значение переменной $а, заменив слово Peri
словом shell.
432 _ Часть II. Интерактивные Web-документы

Обработка данных формы

Данные формы поступают в CGI-программу в закодированном виде, поэто-
му в качестве первого шага обработки CGI-сценарий должен выполнить де-
кодирование полученной информации. При пересылке данных методом GET
данные формы присваиваются переменной среды QUERY_STRING, при пере-
даче методом POST — передаются в программу через стандартный ввод и то-
же могут быть присвоены некоторой внутренней переменной. Таким обра-
зом, декодирование данных сводится к следующей последовательности ма-
нипуляций со строкой:
П замена каждой группы %ьь, состоящей из шестнадцатеричного ASCII-
кода hh с префиксом %, на соответствующий ASCII-символ;
П замена символов + пробелами;
П выделение отдельных пар имя=значение, разделенных ограничителем &;
П выделение из каждой пары имя— значение имени и значения соответст-
вующего поля формы.
Рассмотренные выше средства языка Perl позволяют написать следующую
короткую программу декодирования
# ! /usr/bin/perl
# Декодирование данных формы, переданных методом GET
$form_data = $ENV{ ' QUERY_STRING ' } ;
# преобразование цепочек %hh в соответствующие символы
$form_data =~ s/%(..)/pack ("С", hex ($l))/eg;
# преобразование плюсов в пробелы
$form_data =~ tr/+/ /;
# разбиение на пары имя=значение
Spairs = split (/&/, $form_data) ;
# выделение из каждой пары имени и значения поля формы и сохранение
# их в ассоциативном массиве $form_fields
foreach $pair (@pairs)
(
($name, $value)=split (/=/, $pair) ;
$ f orm_f ields { $name } =$ value ;

Если данные формы переданы методом POST, то в приведенном тексте сле-

дует заменить оператор присваивания
$form_data = $ENV( ' QUERY_STRING ' } ;

оператором
read(STDIN,$form_data,$ENV{ ' CONTENT_LENGTH ' }) ;

считывающим из стандартного ввода программы CONTENT_LENGTH байтов,

составляющих содержимое запроса клиента, в переменную $form_data.
Глава 9. Выполняемые сценарии 433

В приведенном примере используются три новые функции: spilt, pack и

hex. Поясним их назначение прежде, чем перейти к обсуждению текста
программы.
П Функция split /pattern/, string
разбивает строку string на подстроки, используя в качестве разделителя
регулярное выражение pattern.
П Функция pack template, list
упаковывает список значений list в двоичную структуру по заданному
Шаблону template.
Аргумент template представляет собой последовательность символов, оп-
ределяющих формат представления пакуемых данных:
а/А Текстовая строка, заполненная нулями/пробелами
Ь/в Двоичная строка, значения расположены в порядке возрастания/убывания
с/с Обычное символьное значение/ Символьное значение без знака
f /d Значение в формате с плавающей точкой одинарной/двойной точности
h/н Шестнадцатеричная строка, младший/старший полубайт первый
i/l Целое со знаком/ без знака
1/L Значение типа long со знаком/без знака
n/N Значение типа short/long с "сетевым" порядком байтов
("старший в старшем")
Р/и Указатель на строку/11и-кодированная строка
s/s Значение типа short со знаком/без знака
v/v Значение типа short/long с VAX-порядком байтов ("старший в младшем")
х/х Нулевой байт/резервная копия байта
@ Заполнение нулевыми байтами (до абсолютной позиции)

За каждым символом может следовать число, обозначающее счетчик при-

менений данного символа в качестве формата. Символ * в качестве счет-
чика означает применение данного формата для оставшейся части списка.
Примеры:
$х = pack "cccc", 80, 101, 114, 108;
$х = pack "c4", 80, 101, 114, 108;
$х = pack "B32", "01010000011001010111001001101100";
$х = pack "H8", "5065726С";
$х = pack "H*", "5065726C";
$х = pack "cB8H2c",80,"01100101",72,108;

Значение переменной $х во всех случаях равно "perl".

 434 Часть II. Интерактивные Web-документы

П Функция hex expr

Интерпретирует аргумент ехрг как шестнадцатеричную строку и возвра-
щает ее десятичное значение.
В приведенном выше тексте программы все представляется очевидным.
Прокомментируем только наиболее насыщенную строку:
$form_data =~ s/%(..)/pack ("С", hex ($l))/eg;

Образец для поиска задан в виде регулярного выражения % ( . . ) . Этому об-

разцу удовлетворяет произвольная последовательность вида %ху, где х, у -
любые символы. В результате кодирования данных в качестве х, у могут
появиться только шестнадцатеричные цифры, поэтому можно не задавать
более точный, но менее компактный шаблон % ([0-9A-Fa-f] [0-9A-Fa-f]).
Часть выражения заключена в скобки ( . . ) . При нахождении подходящего
фрагмента %ьь его часть, содержащая шестнадцатеричное число hh, сохраня-
ется в переменной, которая затем будет использована в качестве аргумента
функции hex($i) для преобразования в десятичное значение. Функция pack
упакует это десятичное значение в двоичную структуру, которая в соответст-
вии с шаблоном "С" будет интерпретироваться как символ. Этот символ за-
меняет в тексте найденную цепочку %hh.
После выделения и декодирования данных можно приступить к их обра-
ботке. Попробуем написать CGI-сценарий, обрабатывающий данные формы
из примера 9.5. Программа должна декодировать полученные данные, про-
верять заполнение обязательных полей формы и правильность подтвержде-
ния пароля, в зависимости от результатов проверки формировать документ
для отсылки клиенту. Сохраним сценарий в файле /cgi-Mn/[Link].
Полный маршрут к данному файлу определяется параметрами конфигура-
ции Web-сервера. Местоположение каталога cgi-bin обычно указывается не
относительно корневого каталога файловой системы, а относительно корня
дерева документов Web-сервера. Например, если корнем является каталог
/home/httpd/html/, то файл сценария будет иметь маршрутное имя
/home/httpd/html/cgi-bin/[Link], которое В запросе клиента будет
указано как /cgi-bin/[Link]. В первом приближении текст сценария
может выглядеть следующим образом.

; Пример Э.7^Г1ёрймйШрийнт сценария

:.::.'^.;;Vi:i:.....'jvi^'. ,/.;.'^:v;:i ^vii^-.1.1^1.;'.:;'.::'';'.'. .'.v.L.;.;1.^ :,:,.i;.^::,':.': ;':,...';-;.;."^,'.:..'.

#!/usr/bin/perl
print "Content-type:text/html\n\n";
$method = $ENV{'REQUEST_METHOD'};
if ($method eq "GET") {
$form data = $ENV{'QUERY STRING'
Глава 9. Выполняемые сценарии 435

else {
read (STDIN, $form_data, $ENV{'CONTENT_LENGTH'});
}
$form_data =~ s/%(..)/pack ("C", hex ($l))/eg;
$form_data =~ tr/+/ /;
Spairs = split (/&/, $form_data);
foreach $pair (@pairs) {
($name, $value)=split(/=/,$pair);
$ FORM{$name}=$value;
}
#Проверка заполнения обязательных полей
i f (!$FORM{'regname'} I I !$FORM('passwordl'}) {
print«goback
<html>
<head><title>HenonHbie flaHHbie</titlex/head>
<bodyxh2>Il3BMHMTe, Вы пропустили обязательные данные</Ь2>
<br>
<а href="[Link] еще раз,
пожалуйста</а>
</body>
</html>
goback
;}
#Проверка правильности ввода пароля
elsif ($FORM{'passwordl'} eq $FORM{'password2'}){
pr int«conf i rmat ion
<html>
<head><title>Пoздpaвляeм!</title></head>
<body><h2>Пoздpaвляeм! </h2Xbr>
Ваша регистрация прошла успешно. Вы можете пользоваться нашей
библиотекой. Спасибо за внимание.
</body>
</html>
confirmation
;}
else {
print «new_form
<htmlxheadxtitle>OuM6Ka при вводе n^xxnfl</titlex/head>
<bodyXh3>BBefleHHbie Вами значения пароля не совпадают
<brxform method="get" action="/cgi-bin/[Link]">
<pre>
Введите пароль: <input type="password" name="passwordl">
Подтвердите пароль: <input type="password" name="password2">
</pre>
new form
436 _ Часть II. Интерактивные Web-документы

foreach $key ( keys %FORM) {

if ($key ne "passwordl" && $key ne "password2") {
print "<input type=\"hidden\" name=$key value=$FORM{$key }>\n";

print «EndOf HTML

<brxbr>
<input type="submit" value="OK"> <input type="reset"
value="OTMeHHTb">
</form></bodyx/html>
EndOfHTML

После вывода строки заголовка осуществляется считывание переданной сер-

веру информации в переменную $form_data. В зависимости от метода пере-
дачи эта информация считывается из переменной среды QUERY_STRING (метод
GET) или из стандартного ввода программы (метод POST). Для выбора одного
из вариантов здесь использован условный оператор, общая форма которого
имеет следующий вид:
if (выражение) { . . . } [[ elsif (выражение) { . . . } . . . ] else {...}]

Если значение выражения истинно, выполняется соответствующий блок опера-

торов, заключенных в фигурные скобки. Ветви elsif и else являются необяза-
тельными.
Считанная информация декодируется и помещается в ассоциативный массив
%FORM.
Отсутствие обязательных данных — регистрационного имени и пароля — про-
веряется С ПОМОЩЬЮ УСЛОВИЯ if ( ! $FORM{ ' regname' } | | ! $FORM{ 'passwordl' }) ,
смысл которого становится понятен, если вспомнить замечание о том, как
интерпретируются значения скалярных величин в условных выражениях.
В случае отсутствия необходимых данных формируется виртуальный HTML-
документ, предлагающий повторить попытку, который и посылается клиен-
ту (рис. 9.26)
При выводе этого документа в операции print использована конструкция,
заимствованная из командного интерпретатора UNIX shell и называемая
"here document" ("документ здесь"): текст, заключенный между «word и сле-
дующим вхождением идентификатора word, расположенного в отдельной
строке, трактуется как заключенный в двойные кавычки. Такая конструкция
позволяет внутри себя использовать символы, которые при заключении в
обычные двойные кавычки необходимо маскировать символом "\", напри-
мер, сами двойные кавычки ", символы @, $, %. Важно помнить, что между
символом « и идентификатором word не должно быть пробела, а закры-
вающий конструкцию идентификатор word должен располагаться в отдель-
ной строке.
Глава 9. Выполняемые сценарии 437

HJOhttp: //wvw. klf. ru/cgi-bin/registrar, с

Рис. 9.26. Ответ сервера в случае отсутствия обязательной информации

1
Условие elsif ($FORM{'passwordl } eq $FORM{'password2 ' } ) Предназначено
для проверки совпадения двух копий введенного пользователем пароля. Если
значения совпадают, то пользователю посылается сообщение, подтверждаю-
щее успешную регистрацию (рис. 9.27).

ttp://[Link], ru/cgi-bin/r«giatr. cgi?regnam

Рис. 9.27. Подтверждение регистрации

В противном случае формируется HTML-документ, предлагающий ввести

пароль повторно (рис. 9.28). Этот новый документ содержит форму, в состав
которой входят два видимых поля типа "password" — для ввода и подтверж-
дения пароля, и скрытые поля типа "hidden" — для сохранения остальных
данных, введенных при заполнении исходной формы. Каждое скрытое поле
новой формы наследует у соответствующего поля исходной формы парамет-
ры name и value. Если эти данные не сохранить, то их придется вводить за-
ново, принуждая пользователя повторно выполнять уже сделанную работу.
Информация, сохраненная в скрытых полях, невидима пользователю и не-
доступна для изменения.
438 Часть II. Интерактивные Web-документы

?reg™i»e;-

Введенные Нами значения

OKJ

Рис. 9.28. Повторное приглашение для ввода пароля

Культура Perl допускает различные уровни владения языком. В рассмотрен-

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

Подпрограммы, библиотеки, модули

Подпрограммы в языке Perl играют ту же роль, что и функции в языке С,
или процедуры и функции в языке Pascal. Они объединяют операторы в одну
группу для дальнейшего использования. Подпрограмма может быть объяв-
лена в любом месте основной программы при помощи описания
sub subroutine_name (...)

Последовательность операторов Perl, заключенная в фигурные скобки, на-

зывается блоком. Блоки применяются также в условных операторах и опера-
торах цикла.
В языке Perl, как мы знаем, нет обязательного явного описания перемен-
ных. Точкой определения переменной является место, где она впервые
встречается в программе, а признаком типа — первый символ ее имени.
Область действия большинства переменных (исключение составляют не-
которые предопределенные глобальные переменные интерпретатора Perl)
ограничена пакетом. Пакет это механизм, позволяющий создать свое про-
странство имен для некоторого отрезка программы (этот отрезок может
включать всю программу). Каждый фрагмент кода Perl-профаммы относит-
Глава 9. Выполняемые сценарии 439

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

при помощи объявления
package package_name
Обычно описание пакета встречается в первой строке файлов специального
назначения — библиотек и модулей, о чем пойдет речь ниже. Но может
встречаться и в любом месте программы. Область пакета распространяется
от оператора объявления до конца самого внутреннего вложенного блока
или до объявления следующего пакета того же уровня. С каждым пакетом
связана своя таблица символов, представляющая собой ассоциированный
массив, имя которого совпадает с именем пакета. В ней перечислены все
переменные, образующие пространство имен пакета. Каждый пакет имеет
имя. Неявно предполагается, что основная программа, не имеющая явного
определения пакета, связана с пакетом main. К переменным другого пакета
МОЖНО обращаться, ИСПОЛЬЗУЯ нотацию имя_пакега: : имя_леременной С Пре-
фиксом, соответствующим типу переменной, например:
$main:rmyname, Smain::list.
Для того чтобы ограничить область действия переменных, внутри блока до-
пускается их явное описание при помощи функций объявления local (Perl
4.0 и Perl 5.0) и my (Perl 5.0). Переменные, объявленные при помощи конст-
рукции local, являются доступными только для операций внутри блока и
для подпрограмм, вызываемых внутри блока. Переменные, объявленные при
помощи конструкции ту, являются доступными только для операций внутри
блока и для подпрограмм, определенных в том же блоке, и недоступны для
подпрограмм, определенных за пределами блока. Они не входят в таблицу
символов пакета. В версии языка Perl 5.0 в большинстве случаев рекоменду-
ется использовать функцию ту. Если объявляются несколько переменных,
то они должны быть заключены в скобки. Переменным при их объявлении
могут быть присвоены начальные значения. Примеры объявления локаль-
ных переменных:
local $а; # объявляется переменная $а
my $x="red"; # объявляется и инициализируется переменная $х
ту ( $ х , $ у ) = ( 2 , 7 ) ; # объявляются и инициализируются переменные $х,$у

В языке Perl не различаются понятия "подпрограмма" и "функция". Под-

программа может быть использована в выражении как функция, возвра-
щающая значение. По умолчанию таким значением подпрограммы является
последнее вычисленное в ней выражение. Его можно задать и явно, указав
в качестве аргумента функции return о в любой точке подпрограммы. Воз-
вращаемое значение может быть скалярной величиной или массивом.
Вызов подпрограммы осуществляется по ее имени, которое может сопрово-
ждаться списком параметров в скобках или без скобок. Имя подпрограммы
может иметь необязательный префикс "&", являющийся признаком типа:
440 _ Часть II. Интерактивные Web-документы

имя_подпрограммы ( список_параметров ) ;
имя_подпротраммы список_параметров) ;
& имя_ подпрограмм;

Для передачи в подпрофамму аргументы помещаются в специальный мас-

сив @_. Внутри подпрограммы они доступны как элементы @_[0], @_[1],
и т. д. Такой механизм позволяет передавать в подпрофамму произвольное
количество параметров.
В языках профаммирования различают передачу параметров по ссылке и по
значению. При передаче парамефов по значению подпрофамма получает
копию переменной. Изменение копии внуфи подпрофаммы не влияет на
ее оригинал. При передаче параметров по ссылке подпрофамма получает
доступ к самой переменной и может ее изменять.
В языке Perl можно реализовать передачу парамефов по значению, если
внутри подпрофаммы объявить локальные переменные и присвоить им зна-
чения аргументов из массива @_, как это сделано в следующем примере
# ! /usr/bin/perl
I Передача в подпрограмму параметров по значению
?val=&subl (9,11) ;
print "Значение (9+1) * (11-1) равно $val.\n";
$х = 9;
$у = 11;
$val = ssubl ($x, $y) ;
print "Значение ($х+1) * ($у-1) равно $val.\n";
print "Значение \$х остается равным $х, а \$у равным $у.\п";
sub subl {
my($x, $y) = @_;
return (++$x * — $у) ;

Результат выполнения:
Значение (9+1) * (11-1) равно 100.
Значение (9+1) * (11-1) равно 100.
Значение $х остается равным 9, а $у равным 11.

Примечание
В примере использованы заимствованные из языка С префиксные операции
увеличения на единицу ++ и уменьшения на единицу --.

Передача скалярных параметров по ссылке реализуется обращением внуфи

подпрофаммы непосредственно к элементам массива @_. В этом случае фак-
тический парамеф должен быть переменной и не может быть константой,
не способной изменять свое значение.
Глава 9. Выполняемые сценарии _ 441

# ! /usr/bin/perl
I Передача в подпрограмму параметров по значению
$х = 9;
$у = 11;
$val = &sub2 ($x,$y) ;
print "Значение ($х+1) * ($у-1) равно $val.\n";
print "Значение \$х стало равным $х, а \$у равным $у.\п";
sub sub2 {
return (++$x * — $у) ;

Результат выполнения:
Значение (10+1) * (10-1) равно 100.
Значение $х стало равным 10, а $у равным 10.
Передача по ссылке этим способом параметров-массивов тоже возможна, но
с некоторыми ограничениями: во-первых, несколько параметров- массивов
передаются как один массив в составе @_; во-вторых, внутри процедуры
нельзя изменять размер массива, следовательно, использовать функции
push ( ) И pop ( ) .
Для передачи по ссылке массивов можно воспользоваться другим методом,
который заключается в том, чтобы внутри подпрограммы объявить локаль-
ные переменные, присвоив им значения аргументов из массива @_, а под-
программе в качестве аргументов передать не массивы, а ссылки на них:
#! /usr/bin/perl
# Пример подпрограммы, использующей массивы, переданные по ссылке
&sub3(\@al,\@a2) ;
print "Измененный массив \@al : @а1\пИзмененный массив \@а2: @а2\п";
sub sub3 {
my ( $ a l r e f , $a2ref ) =@_;
print "Эта подпрограмма изменяет массивы \ @ a l and \Sa2\n";
@$alref=("q","w","e");
@$a2ref=("r","t","y");
}

Результат работы программы:

Эта подпрограмма изменяет массивы @al and @a2
Измененный массив @al : q w e
Измененный массив @а2: г t у

Примечание
Обратите внимание на операцию разыменования, позволяющую обратиться
к переменной через ссылку на нее:
@$alref=("q","w","e");
442 Часть II. Интерактивные Web-документы

Обращение к индивидуальному элементу массива в этом случае может иметь

одну из следующих эквивалентных форм:
$$alref [ 0 ] = "q";
$ { $ a l r e f } [ 0 ] = "q";
$alref-> [0] = "q";
В последнем случае в начале выражения опущен символ $, который неявно
подразумевается. Эту форму удобно применять в тех в случаях, когда ссылоч-
ное выражение является достаточно сложным.

Подпрограмма, объявленная внутри основной программы, может быть вы-

звана в любой ее точке. Чтобы сделать подпрограмму доступной другим
программам, в языке Perl существуют два средства: библиотеки (Perl 4.0 и
Perl 5.0) и модули (Perl 5.0).
Библиотека — это просто коллекция подпрограмм, которая обычно разме-
щается в отдельном файле и образует отдельный пакет со своим пространст-
вом имен. Собственное пространство имен позволяет не смешивать одно-
именные переменные из библиотеки и основной программы.
Для создания библиотеки подпрограммы помещаются в один файл с расши-
рением PL, начинающийся строкой объявления пакета package package_name.
Имя файла должно совпадать с именем пакета. В конец файла надо доба-
вить строку
1;

чтобы она возвращала значение ИСТИНА при включении пакета в основ-

ную программу при помощи функции require. Имя файла должно совпадать
с именем пакета package_name. Пример библиотеки, состоящей из одной
подпрограммы:
package cgi_utils;
sub print_header {
print "Content-type: text/html\n\n";
}
1;
Библиотека cgi_utils состоит из одной подпрограммы print_header и со-
храняется в файле с именем cgi_utiis.pi.
Для использования библиотеки в вызывающей программе нужно указать
ИМЯ библиотеки При ПОМОЩИ фуНКЦИИ require:

#!/usr/bin/perl
require cgi_utils;
&cgi_utils::print_header;

Более развитым средством, чем библиотеки, являются модули в версии язы-

ка Perl 5.O. Модуль представляет собой библиотеку подпрограмм, обладаю-
Глава 9. Выполняемые сценарии 443

щую дополнительными свойствами по сравнению с библиотеками Perl 4.O.

Модуль позволяет управлять экспортом своих переменных и подпрограмм в
другие программы, объявляя, какие из них экспортируются по умолчанию, а
какие должны быть явно указаны в соответствующем операторе вызываю-
щей программы. Для создания простого модуля следует поместить в начало
файла строки следующего вида, за которыми должны следовать собственно
подпрограммы:
package package_name;
require Exporter;
@ISA = qw(Exporter);
8EXPORT = qw(funcl func2);
@EXPORT__OK = qw($var Olist %hash func3);

Имя файла должно совпадать с именем пакета package_name и иметь расши-

рение РМ. Первая из указанных строк является объявлением пакета. Пред-
ложение require Exporter предоставляет возможность наследовать подпро-
грамму import, реализованную в модуле Exporter. Механизм экспорта имен
устроен таким образом, что каждый экспортирующий модуль должен иметь
свою подпрограмму import, которая используется программой, импортирую-
щей имена. Подпрограмма import должна быть определена в самом экспор-
тирующем модуле или наследована у модуля Exporter. В третьей строке эле-
ментам специального массива @ISA присваиваются имена некоторых пакетов.
Применение массива @ISA связано с новыми объектно-ориентированными
возможностями Perl 5.O. Мы не будем их обсуждать, так как это выходит за
рамки нашей темы.
Массив SEXPORT содержит имена, экспортируемые по умолчанию. В четвер-
той строке указывается, что из данного модуля по умолчанию будут экспор-
тированы имена fund и func2. Конструкция
qw(string)

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

выделения слов, являются символы пробела, табуляции, новой строки, воз-
врата каретки, подачи бланка.
Массив @EXPORT_OK в пятой строке содержит имена, которые будут экспор-
тироваться только в том случае, если они явно указаны в списке импорта
вызывающей программы.
В вызывающей программе для обращения к модулю используется функция
use Module [list]

Здесь Module — имя модуля, a list — необязательный список аргументов,

позволяющий управлять импортом имен. Если аргументы отсутствуют, то
будут импортироваться все имена, определенные в модуле в массиве
@EXPORT. Для того чтобы импортировались имена, содержащиеся в массиве
444 _ Часть II. Интерактивные Web-документы

@EXPORT_OK, они должны быть явно указаны в списке аргументов list. Если
представлен пустой список аргументов (), символы вообще не импортиру-
ются.
Преобразуем рассмотренную выше в качестве примера библиотеку в модуль.
Для этого создадим файл cgi_utiis.pm, в который запишем следующие
строки:
package cgi_utils;
require Exporter;
@ISA = qw (Exporter) ;
SEXPORT = qw(print_header) ;
sub print_header {
print "Content-type: text/html \n\n";
}
1;

Соответствующим образом преобразуем вызывающую программу:

#!/usr/bin/perl
use cgi_utils;
&print_header;

Используем методы, изложенные в этом разделе, для исправления замеча-

ний, сделанных относительно CGI-сценария из примера 9.7.

|||!!Щ|||^^ Ш-:АК 1 1

а) Часть исходного кода может быть использована другими CGI-програм-

мами. Преобразуем ее в отдельный модуль, сохраняемый в файле
cgi_utils.pm.
package cgi_utils;
require Exporter;
@ISA = qw(Exporter) ;
SEXPORT = qw (print_header process_input) ;

# Подпрограмма вывода заголовка ответа

sub print_header {
print "Content-type: text/html\n\n";

# Подпрограмма декодирования данных формы

sub process_input {
my ($form_ref)=@_;
my ($form_data,@pairs) ;
my ($temp)="";
Глава 9. Выполняемые сценарии _ 445

if ($ENV{ 'REQUEST_METHOD' } eq 'POST') {

read(STDIN,$form_data,$ENV{ ' CONTENT^LENGTH ' }) ;
}
else (
$form_data=$ENV{ ' QUERY_STRING ' } ;
}
$form_data=~s/% (. . ) /pack ("c", hex ($1) ) /ge;
$form_data=~tr/+/ /;
$form_data=~s/\n/\0/g;
@pairs=split (/&/, $form_data) ;
foreach $item(@pairs) {
($name, $value) =split (/=/,$ item) ;
if { !defined($form_ref->{$name} ) ) {
$f orm_ref -> { $name } =$value ;
)
else {
$form_ref->{$name} .= "\0$value";

foreach $item (sort keys %$form_ref) {

$temp.=$item. "=" . $form_ref->{$item} . "&
return ($ temp) ;

1;

б) Текст основного сценария обработки формы [Link] преобразуем сле-

дующим образом:
# ! /usr/bin/perl
use cgi_utils;
my %FORM, $file_rec;
$file_rec=&process_input (\%FORM) ;
#Проверка заполнения обязательных полей
#if ($FORM{ 'regname' } eq "" II $FORM{ 'passwordl ' } eq "") {
if ( !$FORM{ 'regname1 } || ! $FORM{ 'passwordl '}) (
print "Location: /[Link]\n\n";
}
#Проверка правильности ввода пароля
elsif ($ FORM { 'passwordl' } eq $FORM{ 'password2 ' } ) {
print "Location: /confirmation. html \n\n";
open (OUTF, "»users");
print OUTF $file_rec, "\n";
close OUTF
}
else {
&print_header;
446 _ Часть II. Интерактивные Web-документы

print«new_form
<html>
<headxtitle>0mn6ica при вводе пароля</1:1-ие:></11еас1>
<ЬоЗуХпЗ>Введенные Вами значения пароля не совпадают
<br><form method="get" action="/cgi-bin/registrar .cgi">
<pre>
Введите пароль: <input type="password" name="passwordl">
Подтвердите пароль: <input type="password" name="password2">
</pre>
new_form

foreach $key ( keys %FORM) {

if ($key ne "passwordl" && $key ne "password2") (
print "<input type=\"hidden\" name=$key value=$FORM{$key}>\n";

print«EndOfHTML
<brxbr>
<input type="submit" value="OK">
<input type="reset" value="OTMeHHTb">
</form>
</body>
</html>
EndOfHTML

exit

в) В исходном варианте сценария в качестве ответов сервера при получении

неполных данных и для подтверждения регистрации пользователя форми-
руются виртуальные HTML- документы. В этом нет необходимости, так как
они содержат только статическую информацию. Соответствующие фрагмен-
ты сценария преобразуем в HTML-код готовых документов, которые сохра-
ним в отдельных файлах. В основном сценарии в качестве ответа сервера
возвращаются ссылки на эти документы.
Файл [Link] содержит документ, посылаемый клиенту в качестве
сообщения об успешной регистрации:
<html>
<headxtitle>no3flpaBnHeM!</titleX/head>
<bodyxh2>no3flpaBnHeM! </h2xbr>
Ваша регистрация прошла успешно. Вы можете пользоваться нашей библиоте-
кой.
<br>
Спасибо за внимание .
</body>
</html>
Глава 9. Выполняемые сценарии 447

Файл [Link] содержит документ, посылаемый клиенту при получении

неполных данных:
<html>
<head><title>HencxnHbie flaHHbie</titlex/head>
<Ьсх1у><п2>Извините, Вы пропустили обязательные данные</Ь2>
<Ьг>
<а href="[Link] еще раз, пожалуй-
ста</а>
</body>
</html>

В приведенном тексте появились некоторые новые элементы, которые необ-

ходимо пояснить.
Подпрограмма process_input модуля cgi_utiis.pm передает декодированные
данные через вызываемый по ссылке параметр — ассоциативный массив.
Кроме того, она возвращает при помощи функции return о те же данные,
но в виде строки, состоящей из пар имя=значение, разделенных символом &.
Обратите внимание на то, как подпрограмма вызывается в основной про-
грамме:
$file_rec=&process_input(\%FORN);

В качестве аргумента ей передается ссылка на ассоциативный массив. В тек-

сте подпрограммы появилась проверка наличия полей формы с совпадаю-
щими именами и разными значениями

if (!defined($form_ref->{$name})) {
$ form_ref->{$name}=$value;
}
else {
H

Этот фрагмент необходим для того, чтобы правильно обработать следующую

ситуацию из нашего примера. Выбраны несколько переключателей, опреде-
ляющих языки, которыми владеет пользователь: русский, английский,
французский. Так как соответствующие элементы формы имеют одинаковые
имена name=language, TO без проверки В ассоциативный массив %form_ref,
куда помещаются обработанные данные, попадет только информация от по-
следнего обработанного элемента name=language value=french. В подобном
случае обычное присваивание заменяется операцией присваивания с конка-
тенацией
$form_ref->{$name} .= "\0$value",

которая к переменной $form_ref->($name} добавляет нулевой символ и зна-

чение $value.
448 Часть II. Интерактивные Web-документы

В основной программе [Link] обратим внимание на то, как переда-

ется ссылка на готовый HTML-документ. Для этого вместо заголовка
Content-type: text /html ВЫВОДИТСЯ заголовок Location: URL, сообщающий
серверу адрес документа.
Еще один новый элемент в основной программе — работа с файлами.
В примере данные сохраняются в файле с именем users. Для записи ин-
формации в файл он открывается функцией open с дескриптором OUTF.
Напомним, что дескриптор — это внутреннее, используемое системой имя,
которое может быть ассоциировано с файлом на диске, устройством (в
UNIX устройства также представлены специальными файлами) и другим
объектом, к которому применимы файловые операции записи/считывания.
Вызов функции
open (OUTF, "»users");

создает дескриптор OUTF, открывает его для добавления данных и связыва-

ет с конкретным файлом users. Для указания операций допустимых над от-
крытым файлом используются следующие обозначения:
open(filehandle, "filename"); # чтение из существующего файла
open(filehandle, "> filename "); # открытие нового файла для записи
open(filehandle, "» filename "); # открытие для записи в конец файла

Запись в файл осуществляется функцией print с указанием дескриптора

файла в качестве первого аргумента:
print OUTF $file_rec, "\n";

После завершения работы с файлом его необходимо закрыть при помощи

ФУНКЦИИ close.
 ГЛАВА 10

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

Динамический HTML (Dynamic HTML или DHTML) не является каким-то

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

Рис. 10.1. Компоненты

динамического HTML

Каскадные таблицы стилей можно сравнить со стилевыми файлами любого

текстового редактора. С их помощью определяется внешний вид отображае-
мого HTML-документа: цвет шрифта и фона документа, сам шрифт, разбив-
ка текста и многое другое. Для каждого элемента, задаваемого определен-
ным тэгом HTML, можно определить свой стиль отображения в окне брау-
зера. Например, заголовки первого уровня будут отображаться шрифтом
Arial I6pt синего цвета, заголовки второго уровня — Arial 14pt красного цве-

15 Зак. 944
450 Часть II. Интерактивные Web-документы

та, основной текст — Times New Roman lOpt черного цвета с одинарным
интервалом между строками. Можно создать таблицу стилей и использовать
ее для всех документов, расположенных на сервере, что придаст стройность
и строгость всему Web-сайту.
Объектная модель документа делает все элементы страницы программируе-
мыми объектами. С ее помощью через языки сценариев можно получить
доступ и управлять всем, что есть в документе. Каждый элемент HTML дос-
тупен как индивидуальный объект, а это означает, что можно изменять зна-
чение любого параметра любого тэга HTML-страницы, и, как следствие,
документ действительно становится динамическим. Любое действие пользо-
вателя (щелчок кнопкой мыши, перемещение мыши в окне браузера или
нажатие клавиши клавиатуры) объектной моделью документа трактуется как
событие, которое может быть перехвачено и обработано процедурой сценария.
DHTML достаточно новая технология, и не все браузеры поддерживают
объектную модель документа и каскадные таблицы стилей. Однако DHTML
использует стандартные тэги HTML, и поэтому пользователи браузеров, не
поддерживающих DOM, практически увидят все, что задумано разработчи-
ком динамической страницы, но только в статическом виде.
Есть еще одна "неприятность", связанная с тем, что разные фирмы-
разработчики браузеров могут реализовывать собственную объектную модель
документов, как это произошло с двумя популярными браузерами Internet
Explorer и Netscape Navigator. Поэтому разработчикам динамических стра-
ниц приходится, в конечном счете, писать два варианта своих приложений,
чтобы пользователи указанных браузеров могли правильно просматривать их
страницы.
В данной главе описываются каскадные таблицы стилей, объектные модели
документов браузеров Internet Explorer и Netscape Navigator и приемы созда-
ния динамических HTML-страниц.

Каскадные таблицы стилей

Каскадные таблицы стилей впервые были реализованы в Internet Explorer
3.0, но информация о них в то время была большей частью противоречивой.
При реализации Internet Explorer 4.0 были приняты во внимание рекомен-
дации REC-CSS1 Консорциума W3 относительно каскадных таблиц стилей,
датированные 17 декабря 1996 года. К настоящему времени они пересмотре-
ны и известны как рекомендации по каскадным таблицам стилей, уровень 1,
документ REC-CSS1-19990111 от 11 января 1999 года. В мае 1998 года Кон-
сорциум издал рекомендации по каскадным таблицам стилей, уровень 2,
документ REC-CSS2-19980512, часть из которых реализована в Internet
Explorer 4.01. В соответствии с этими рекомендациями и будет вестись опи-
сание каскадных таблиц стилей.
Глава 10. Динамический HTML 451

Общие положения
Каскадные таблицы стилей, уровень 1, представляют собой простую техно-
логию определения и присоединения стилей к документам HTML. Стиль,
говоря житейским языком, — это все то, что определяет внешний вид доку-
мента HTML при его отображении в окне браузера: шрифты и цвета заго-
ловков разных уровней, шрифт и разрядка основного текста, задаваемого
в тэге абзаца <р>, и т. д. Стиль задается по определенным правилам, о кото-
рых, собственно говоря, и пойдет речь в данном разделе, а таблица сти-
лей — набор правил отображения, применяемых в документе, к которому
присоединена соответствующая таблица стилей.
Таблица стилей — это шаблон, который управляет форматированием тэгов
HTML в Web-документе. Если читатель работал с текстовым редактором
Microsoft Word, то концепция таблицы стилей напомнит ему концепцию
стилевых файлов этого редактора: изменить внешний вид документа Word
можно простым изменением присоединенных к нему стилей. Точно также
изменить внешний вид документа HTML можно простым изменением при-
соединенной к нему таблицы стилей.
Почему в название таблиц стилей включено определение "каскадные"? Дело
в том, что рекомендации Консорциума W3 позволяют использовать не-
сколько таблиц стилей для управления форматированием одного документа
HTML, а браузер по определенным правилам выстраивает приоритетность
применения этих таблиц. Они выстраиваются неким "каскадом", по которо-
му и "прокатывается" документ. Правила приоритетности и разрешения воз-
никающих конфликтов описаны ниже в данном разделе.
Для разработки таблицы стилей достаточно немного ориентироваться в язы-
ке HTML и быть знакомым с базовой терминологией настольных издатель-
ских систем. Как отмечалось выше, таблица стилей представляет собой на-
бор правил форматирования элементов HTML. Эти правила достаточно
просты и легко запоминаемы. Например, если необходимо, чтобы в доку-
менте все заголовки первого уровня отображались синим цветом и шрифтом
с кеглем (размером) 16 пунктов, то в таблице следует задать правило:
HI {color: blue;
font-size: 16pt}

Любое правило каскадных таблиц стилей состоит из двух частей: селектора и

определения. Селектором может быть любой тэг HTML, для которого опреде-
ление задает, каким образом необходимо его форматировать. Само опреде-
ление, в свою очередь, также состоит из двух частей: свойства и его значения,
разделенных знаком двоеточия (:). Назначение свойства очевидно из его
названия. В приведенном правиле селектором является элемент HI, а опре-
деление, записанное в фигурных скобках, задает значения двух свойств за-
головка первого уровня: цвет шрифта (свойство color) определен как синий
452 Часть II. Интерактивные Web-документы

(значение blue) и размер шрифта (свойство font-size) определен в 16 пунк-

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

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

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

Встраивание таблиц стилей в документ

Чтобы таблица стилей могла воздействовать на внешнее представление до-
кумента, браузер должен знать о ее существовании. Для этого ее необходимо
связать с HTML-документом.
Существует четыре способа связывания документа и таблицы стилей:
1. Связывание — позволяет использовать одну таблицу стилей для форма-
тирования многих страниц HTML.
2. Внедрение — позволяет задавать все правила таблицы стилей непосредст-
венно в самом документе.
3. Импортирование — позволяет встраивать в документ таблицу стилей,
расположенную на сервере.
4. Встраивание в тэги документа — позволяет изменять форматирование
конкретных элементов страницы.
Связывание позволяет хранить таблицу стилей в отдельном файле и присо-
единять ее к документам с помощью тэга <LINK>, задаваемого в разделе
<HEAD>:
<LINK REL="stylesheet" TYPE="text/css" HREF="[Link]">

Связываемый файл содержит набор правил каскадных таблицей стилей, оп-

ределяющих форматирование документа, и должен иметь расширение CSS.
Глава 10. Динамический HTML 453

Связывание позволяет разработчику применить одинаковый набор правил

форматирования к группе HTML-документов, что приводит к единообраз-
ному отображению различных документов и придает некоторую системность
серверу разработчика.
При внедрении таблицы стилей в документ правила, ее составляющие, зада-
ются в стилевом блоке, ограниченном тэгами <STYLE TYPE="text/css"> и
</STYLE>, который должен размешаться в разделе <HEAD> документа:
<HEAD>
<STYLE TYPE="text/css">
<! —
В { text-transform: uppercase; }
P { background-color: lightgrey;
text-align:center; }
—>
</STYLE>
</HEAD>

Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их,

интерпретируя, однако, их содержимое в том виде, в каком оно задано, что
может приводить к ошибкам. Поэтому, как обычно, следует задавать содер-
жимое тэгов, которые потенциально не обрабатываются старыми версиями
браузеров, заключенным в тэг комментария <! — . . . — >.
В приведенном выше примере встроенная таблица стилей определяет ото-
бражение всех абзацев в документе (элемент Р) на сером фоне с центриро-
ванными строками. Полужирный текст, определяемый любым элементом в
(тэг <в>) документа, будет отображаться прописными буквами, даже если в
документе он задан строчными.
В тэге <STYLE> можно импортировать внешнюю таблицу стилей с помощью
свойства @import таблицы стилей:
@import: url([Link]);

Его следует задавать в начале стилевого блока или связываемой таблицы

стилей перед заданием остальных правил. Значением свойства @import явля-
ется URL-адрес файла таблицы стилей.
Последний способ задания значений свойств таблицы стилей предназначен
для оперативного форматирования определенного элемента документа и на-
зывается внедрение. Каждый тэг HTML имеет параметр STYLE, в котором
можно задать значения его свойств в соответствии с синтаксисом каскадных
таблиц стилей. Например, в следующем примере задается форматирование
заголовка первого уровня, определяющее его отображение шрифтом крас-
ного цвета:
<Н1 STYLE="color: геоУ'>Заголовок отображается шрифтом красного цвета</Н1>
454 Часть II. Интерактивные Web-документы

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

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

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

Все способы встраивания таблиц стилей свободно сочетаются в одном доку-

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

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

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

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

можно задать в виде одного правила, сгруппировав определения:

HI {font-weight: bold;
font-size: 14pt;
font-family: Arial;
Глава 10. Динамический HTML 455

Некоторые свойства имеют собственный синтаксис группирования, связан-

ный с заданием значений нескольких свойств в одном. Например, преды-
дущий пример при использовании свойства font запишется так:
Hi (font: bold 14pt Arial}
При задании таблицы стилей можно свободно комбинировать все три пра-
вила группирования для уменьшения ее размеров.
В HTML некоторые элементы могут содержать другие. Как будет отобра-
жаться элемент, расположенный внутри другого элемента страницы, если
для последнего задано правило форматирования, а для вложенного элемента
нет? Например, пусть цвет шрифта абзаца определен как синий (Р (color:
blue}). Как будет отображаться выделенный элемент текста, задаваемый тэ-
гом <ЕМ>, если для него не определено правило форматирования? В подоб-
ных случаях вложенный элемент наследует правила форматирования эле-
мента-родителя. В нашем примере выделенный элемент будет также ото-
бражаться синим цветом. Другие свойства ведут себя аналогично свойству
color, например font-family, font-size.
Некоторые свойства не наследуются вложенными элементами от своих ро-
дителей, например свойство background, но по умолчанию вложенные эле-
менты будут отображаться с фоном родительского элемента.
Наследование полезно при задании значений свойств, применяемых к до-
кументу по умолчанию. Для этого достаточно задать все свойства для эле-
мента, порождающего все остальные элементы страницы HTML. Таким
элементом является тело документа, определяемое тэгом <BODY> :
BODY {
color: black;
font-family: "Times New Roman";
background: url([Link]) white;
}

Приведенные правила задают форматирование документа по умолчанию:

черным шрифтом гарнитуры Times New Roman с фоном, задаваемым графиче-
ским файлом [Link], или на белом фоне, если файл не доступен.

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

Селекторы
Правила каскадных таблиц стилей, в которых в качестве селектора исполь-
зуются тэги HTML, влияют на отображение всех элементов заданного типа
456 _ Часть II. Интерактивные Web-документы

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

(тэг <А>) в документе:
<STYLE TYPE="text/css">
<! —
А { text-decoration: none; }

</STYLE>

А что делать, если необходимо некоторые ссылки отобразить по-другому?

Можно задать для них правило форматирования непосредственно в тэге, а
можно применить параметр CLASS, добавленный в HTML 4.0 в качестве
стандарта для всех тэгов. Значением параметра CLASS является ссылка на
класс, задаваемый в таблице стилей.

Селектор CLASS
Класс позволяет задать разные правила форматирования для одного элемен-
та определенного типа или всех элементов документа. Имя класса указыва-
ется в селекторе правила после имени тэга и отделяется от него точкой.
Можно определить несколько правил форматирования для одного элемента
и с помощью параметра CLASS соответствующего тэга применять разные
правила форматирования в документе. Например, можно определить два
класса отображения заголовка первого уровня:
<STYLE TYPE="text/css">
<! —
HI. red { color: red; }
[Link] { color: red; background-color: blue}
—>
</STYLE>

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

CLASS:

<Н1 CLASS="red">KpacHbrii шрифт</Н1>

<Н1 CLASS="blueBgrd">KpacHbm шрифт на синем фоне</Н1>

Примечание
Имя класса в параметре CLASS задается без лидирующей точки. Оно может
быть заключено в двойные или одинарные кавычки, или задаваться вообще без
кавычек, например CLASS=red.

В приведенном примере классы задавались для разного отображения эле-

ментов одного типа. Если класс должен применяться ко всем элементам до-
кумента, то в селекторе задается имя класса с лидирующей точкой без ука-
зания конкретного элемента:
Глава 10. Динамический HTML 457

<STYLE TYPE="text/css"><!~
.red { color: red; }
.blueBgrd { color: red; background-color: blue}
—></STYLE>

Теперь два класса red и blueBgrd можно применять к любым элементам до-
кумента:
<Р ClASS=red>nepBbM абзац</Р>
<Р ClASS=blueBgrd>Bтopoй абзац</Р>

Первый абзац отобразится красным шрифтом, а второй — красным шриф-

том на синем фоне.'

Селектор ID
Параметр ID, как и параметр CLASS, не влияет на отображение браузером
элемента HTML, но он задает уникальное имя элемента, которое использу-
ется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно
применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального иден-
тификационного имени элемента в качестве селектора, предваряя его сим-
волом |:
<STYLE TYPE="text/css"><!—
#par24 { letter-spacing: lem; }
HliformS { color: red; background-color: blue}
—></STYLE>
<BODY>
<P 10=раг24>Разреженные слова в абзаце</Р>
<Н1 ID=form2>4epHbM шрифт</Н1>

В этом примере абзац идентифицирован именем раг24 в параметре ID, по-

этому к нему применимо правило с селектором #раг24. Второе правило в
таблице стилей должно применяться к заголовку первого уровня с иденти-
фикатором form3. Такого элемента в нашем фрагменте нет, и поэтому заго-
ловок form2 отображается с применением правила по умолчанию.

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

Контекстные селекторы
При разработке страниц HTML часто приходится одни элементы вклады-
вать в другие, например, выделять слова тэгом <ЕМ> в каком-нибудь абзаце,
458 _ Часть II. Интерактивные Web-документы

задаваемом тэгом <р>. В этом случае говорят, что элемент р порождает эле-
мент ЕМ и является его предком, а сам элемент ЕМ является потомком элемен-
та р. Некоторые свойства предка наследуются потомком, например, цвет
шрифта (свойство color). Чтобы вложенные элементы отображались со
своими значениями свойств, можно определить для них правила формати-
рования, как показано ниже:
<Р> {color: blue}
<ЕМ> (color: yellow}

Однако это приведет к тому, что все выделяемые в документе элементы бу-
дут отображаться шрифтом желтого цвета. А если необходимо, чтобы выде-
ляемые только в абзаце элементы отображались желтым цветом, а в других
частях документа каким-то другим цветом? Здесь помогут контекстные се-
лекторы. Поставленную задачу решит следующее правило:
Р ЕМ {color: yellow)

Контекстный селектор состоит из нескольких простых, разделенных пробе-

лами. Интерпретатор браузера просматривает в стеке все открытые элемен-
ты, находит элементы ЕМ, порожденные элементом р, и применяет к ним
указанное правило форматирования.
Таким образом, правила с контекстными селекторами задают исключения
из общих правил форматирования элементов документа, определенных с
простыми селекторами.

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

Примечание
В браузерах Internet Explorer и Netscape Navigator реализованы только псевдо-
классы для элементов связей А. Псевдоэлементы в них не используются вообще.
Глава 10. Динамический HTML 459

Псевдоклассы связей
Связь в документе HTML определяется тэгом <А> с параметром HREF. Обыч-
но браузеры отображают посещенные связи отлично от непосещенных (на-
пример, разными цветами). Уровень 1 каскадных таблиц стилей регламенти-
рует правила для отображения связей через псевдоклассы элемента А:
A:link { color: red } /* непосещенная связь */
A:visited { color: blue } /* посещенная связь */
A:active { color: green } /* активная связь */
A:hover ( color: lime ) /* связь, на которой расположен курсор мыши */

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

сов. Активная связь — это связь, которая выбрана в данный момент.

( Примечание )
Комментарии в каскадных таблицах стилей задаются аналогично комментари-
ям в языке С: текст, заключенный между символами /* и */, является коммен-
тарием.

Примечание
Псевдокласс hover включен в каскадные таблицы стилей, уровень 2, который
частично реализован в Internet Explorer 4.01.

В приведенном примере задается отображение непосещенных связей крас-

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

Предупреждение
Браузер Internet Explorer 4.01 правильно реализует псевдоклассы связей, тогда
как Netscape Navigator 4.0 не воспринимает псевдоклассы active и hover.

Так как псевдоклассы применяются к единственному типу элементов А, то

при задании их в селекторе правил этот элемент можно опустить. Следую-
щие два правила равносильны:
A:link { color: red } /* непосещенная связь */
:link { color: red } /* непосещенная связь */

Применение таблиц стилей

К одному документу можно присоединить несколько таблиц стилей, кото-
рые одновременно будут влиять на представление документа в окне браузера.
Этот принцип является основополагающим принципом применения кас-
460 Часть II. Интерактивные Web-документы

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

комендован группой разработчиков Консорциума W3:
1. Реализация модульности — разработчики таблиц стилей могут комбини-
ровать таблицы стилей, каждая из которых отвечает за определенный
этап форматирования документа. Например, в одной таблице можно оп-
ределить все правила форматирования шрифтов, во второй -- правила
позиционирования элементов и т. д.
2. Соблюдение равновесия между авторской разработкой и пристрастиями
читателя — и авторы страниц, и читатели могут влиять на представление
страницы через таблицы стилей. Пользователь может определить собст-
венные правила отображения элементов документа в своих личных таб-
лицах стилей, а браузер, на основании механизма приоритетности, будет
использовать те или иные правила из таблиц пользователя или автора
страницы.
Но как взаимодействуют правила, определяющие форматирование одинако-
вых элементов и заданные в разных таблицах? Может, например, оказаться,
что в связанной таблице цвет шрифта определен как черный, в импор-
тируемой как красный, а во встроенной как синий, — какой цвет шрифта
будет иметь документ, отображаемый в браузере? Подобные конфликты раз-
решаются с использованием принципа приоритетности разных таблиц сти-
лей. Таблицы выстраиваются в цепочку приоритетности (от низшего к наи-
высшему), образуют каскад, по которому документ "прокатывается" и посте-
пенно форматируется на основе правил таблиц стилей, образующих каскад.
Говорят, что правила, определенные в таблице с большим приоритетом,
имеют больший вес. По умолчанию веса правил читателя всегда меньше ве-
сов правил, определенных в таблицах разработчика документа. То есть, если
возникает конфликт между правилами, определенными в документе, и пра-
вилами, определенными в личных таблицах стилей пользователя, приме-
няться будут первые. Правила читателя и автора всегда перекрывают уста-
новки по умолчанию значений свойств используемого браузера.
Приоритетность импортируемых таблиц стилей зависит от порядка их им-
портирования в документ. В таблице стилей можно использовать несколько
операторов eimport. Каждый последующий оператор импортирует таблицу
стилей с более высоким приоритетом по отношению к предыдущим, и по-
этому ее правила имеют больший вес. Импортируемые таблицы стилей сами
могут импортировать и перекрывать другие таблицы.
Любые правила, определенные непосредственно в самом документе, пере-
крывают правила импортируемых таблиц стилей. Обычно все операторы
@import задаются в таблице стилей до определений правил, а это как раз и
показывает, что правила самой таблицы перекрывают правила импортируе-
мых таблиц.
Глава 10. Динамический HTML 467

Можно увеличить вес правила с помощью значения important, которое зада-

ется после значения свойства, вес которого необходимо увеличить:
HI {color: red ! important; background: white ! important}
В приведенном примере оба свойства имеют увеличенный вес.
Правило читателя со значением important перекрывает аналогичное правило
автора, заданное без увеличения веса. Авторское правило со значением
important перекрывает аналогичное правило читателя с увеличенным весом.
Разрешение конфликтов осуществляется на основе внутреннего механизма,
реализованного в каскадных таблицах стилей. Для определения значения
комбинации элемент-свойство используется следующий механизм:
1. Ищутся все определения, применяемые к рассматриваемой комбинации
элемент-свойство. Определения применяются, только если селектор со-
ответствует рассматриваемому элементу. Если невозможно применить ни
одно определение, используется наследуемое значение свойства. Если не
определено наследуемое значение (это справедливо в случае элементов
HTML и свойств, которые не могут наследоваться), используется началь-
ное значение.
2. Определения сортируются по явно заданным весам: определения со зна-
чением important имеют больший вес по сравнению с нормальным (без
увеличения веса) определением.
3. Определения сортируются по своему происхождению: авторские таблицы
стилей перекрывают таблицы стилей читателя, которые, в свою очередь,
перекрывают установки значений свойств по умолчанию браузера. Им-
портируемая таблица стилей имеет одинаковое происхождение с табли-
цей, из которой она импортирована.
4. Определения сортируются по специфичности селектора: селектор с боль-
шим числом специфичности перекрывает селектор с меньшим числом
специфичности. Для определения числа специфичности селектора опре-
деления подсчитывают количество параметров ID (а), параметров CLASS
(ь) и названий тэгов (с) в селекторе. Составляется число abc, которое и
определяет специфичность данного определения; Несколько примеров,
взятых из рекомендаций REC-CSS1-19990111, приведено ниже:
LI {...}/* а=0 Ь=0 с=1 —> специфичность = 1 */
UL LI (...}/* а=0 Ь=0 с=2 —> специфичность = 2 */
UL OL LI {...}/* а=0 Ь=0 с=3 —> специфичность = 3 */
[Link] {...} /* а=0 Ь=1 с=1 —> специфичность = 11 */
UL OL [Link] {...} /* а=0 Ь=1 с=3 —> специфичность = 13 */
#х34у {...} /* а=1 Ь=0 с=0 —> специфичность = 100 */

Псевдоклассы и псевдоэлементы считаются как нормальные элементы

и классы, соответственно.
462 Часть II, Интерактивные Web-документы

5. Определения сортируются по порядку их задания в таблице стилей: если

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

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

иишшииш
тент и IIOOMOIJICTU. как оп^йжчт.'Ц «61Щ":

Рис. 10.2. Блоковая модель форматирования абзаца

Блок содержимого элемента (самый внутренний блок) отделен от границы

отступами. Самым внешним блоком является поле. Свойства таблиц стилей
позволяют устанавливать размеры и цвета всех блоков, составляющих в
сумме отображаемый элемент. Поле всегда является прозрачным прямо-
угольником, поэтому его цвет наследует цвет родителя элемента (для абзаца
это элемент BODY). Отступ всегда имеет цвет фона самого элемента.
Глава 10. Динамический HTML 463

Все перечисленные блоки в совокупности составляют блок форматирования,

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

Блоковые элементы
Каждый элемент в модели форматирования имеет свойство display, значе-
ние которого определяет, отображается или не отображается (попе) элемент,
является ли он блоком (block), списком (list-item) или встроенным эле-
ментом (inline).
Элементы со значением свойства display равным block или list-item,
а также элементы со значением свойства float, отличным от попе (не
"плавающие" элементы), являются блоковыми элементами. Их форматирова-
ние связано с установкой значений соответствующих параметров вложенных
блоков, составляющих элемент в целом. На рис. 10.3 показаны все парамет-
ры, доступные в модели форматирования каскадных таблиц стилей для бло-
ковых элементов.

•верх
верхнее
попе

верхняя
граница

верхний
отступ

левое I левая I левый содержимое правый I правая правое

поле I граница I отступ отступ I граница

внутренний низ
нижний
левый правый
внешний отступ
внешний
край левый край
внутренний нижняя
край граница

нижнее
попе

Рис. 10.3. Параметры форматирования блоковых элементов

Примечание
Параметры "верх" (top) и "низ" (bottom) не применяются к блоковым элемен-
там, они существуют только для встроенных (inline) элементов, речь о которых
пойдет ниже.
464 Часть II. Интерактивные Web-документы

Ширина (width) элемента — это ширина блока содержимого, и определяется

как расстояние между левым и правым внутренними краями. Высота
(height) элемента — расстояние между внутренним верхом и низом.
При вертикальном форматировании блоковых, не "плавающих" элементов
значения параметров "верхнее поле" и "нижнее поле" определяют мини-
мальное расстояние до границ блоков окружающих их элементов. Если
у двух примыкающих элементов определены не нулевые значения парамет-
ров полей, то при вертикальном форматировании поля двух элементов сли-
ваются в одно со значением, равным максимальной высоте поля одного
из двух элементов. Подобное слияние можно наблюдать для элементов ы
списка UL или OL.
Горизонтальное форматирование элемента определяется значениями семи
свойств: левое поле (margin-left), левая граница (border-left), левый отступ
(padding-left), ширина (width), Правый отступ (padding-right), правая гра-
ница (border-right) и правое поле (margin-right). Сумма значений этих се-
ми параметров всегда равняется ширине элемента-родителя или ширине
окна браузера, если элемент не вложен в другой элемент.
По умолчание параметр width имеет значение auto. Если элемент не являет-
ся замещаемым (в тэге элемента задан параметр SRC), то браузер вычисляет
ширину элемента из условия равенства суммы значений семи указанных
выше параметров ширине элемента-родителя. Для замещаемого элемента
значение ширины автоматически заменяется шириной замещаемого элемен-
та, если только значение ширины установлено в auto. В противном случае
размер замещаемого элемента подгоняется под заданную в параметре шири-
ну (процедура подгонки зависит от браузера).
Чтобы удовлетворить условию равенства суммы значений семи параметров
ширине элемента-родителя или окна браузера, в рекомендациях Консор-
циума W3 определено, в каких случаях значения каких параметров устанав-
ливаются браузером в auto.
Свойство float может переводить любой элемент в разряд "плавающих". Это
приводит к тому, что указанный элемент выводится из нормального потока
отображения и форматируется как блоковый элемент. Например, установка
свойства float элемента <IMG> равным left позволяет создать буквицу при
выводе абзаца текста, как показано на рис. 10.4.

Ж
или-были в далекие
времена далеко на
Севере большие и
сильные люди. При одном
только их виде дрожали все,
обитавшие в округе племена.
Рис. 10.4. Плавающий элемент IMG,
представляющий букву Ж
Глава 10. Динамический HTML 465

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

<HEAD>
<STYLE TYPE="text/css"><! —
IMG (float: left)
— ></STYLE>
</HEAD>
<PXIMG [Link] >
или-были в далекие времена далеко на Севере
большие и сильные люди. При одном только их виде
дрожали все, обитавшие в округе племена.

Таблица стилей определяет все элементы IMG как плавающие элементы со

смещением влево. Встроенная в абзац картинка, смещаясь влево, образует
буквицу абзаца.
»

Встроенные элементы
Элементы, которые не форматируются как блоковые, являются встроенными
(inline) элементами. Они совместно с другими элементами используют об-
ласть строки. Обычно, выделяемые в строке элементы (ЕМ, STRONG, в и т . д.)
классифицируются как встроенные.
Рассмотрим пример задания встроенных элементов в блоковый элемент
абзац Р:
<Р>В абзац можно помещать
<В STYLE= ' background-color : lightsteelblue' Устраиваемые элементы</В>.
Их может быть
<ЕМ STYLE=' background-color: 11д^ее1Ыие'>несколько</ЕМ>.</Р>
Если ширина абзаца достаточна для отображения всех встроенных элемен-
тов в строке, то они отобразятся в одной строке. Если ширина недостаточ-
на, то некоторые элементы могут быть разбиты на два и отображены в двух
строках (рис. 10.5).

В абзац можно помещать

1. Их может быть Рис. 10.5. Отображение
встраиваемых элементов
466 Часть II. Интерактивные Web-документы

Свойства форматирования элементов

В каскадных таблицах стилей, уровень 1 и 2 (CSS1 и CSS2), все доступные
свойства форматирования элементов в документе HTML разбиты на 9 кате-
горий, представленных в табл. 10.1. Категории или свойства, появившиеся
во втором уровне каскадных таблиц стилей, отмечены верхним индексом 2.

Таблица 10.1. Категории свойств элементов

Категория Устанавливает

Шрифт Типографские свойства шрифтов

Цвет и фон Цвет текста и фона, а также картинки в качестве фона
Текст Выравнивание, форматирование и разрядку текста
Блок Свойства форматирования блоковых элементов
Визуальное Свойства, связанные с блоками отображения элементов, их
форматирование позиционированием и отображением списков
Печать2 Спецификацию разрыва страницы
2
Фильтры и переходы Мультимедийные эффекты и преобразования графических
изображений
Псевдоклассы Свойства @import, cursor 2 и important
и другие свойства

Прежде чем переходить к описанию свойств форматирования, остановимся

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

Таблица 10.2. Единицы измерения в таблицах стилей

Единицы измерения
Относительные Абсолютные
em Высота шрифта элемента in Дюйм (1 in = 2.54 cm)
ex Высота буквы х cm Сантиметр
Глава 10. Динамический HTML 467

Таблица 10.2 (окончание)

Единицы измерения
Относительные Абсолютные

рх Пиксел ШРЛ Миллиметр

% Процент pt Пункт (1pt= 1/72 in)
рс Пика (1 рс = 12 pt)

Примечание
Относительные единицы измерения em и ех во всех свойствах вычисляются от-
носительно высоты шрифта элемента. Единственное исключение — свойство
font-size, в котором эти единицы относятся к высоте шрифта элемента-
родителя.

Примечание
Пикселы являются единицами измерения, относящимися к разрешению дис-
плея компьютера. Если плотность пикселов на устройстве вывода сильно от-
личается от типового дисплея, браузер должен переопределить эту единицу.
Новая единица, ссылочный пиксел, — это угол, под которым виден один пик-
сел монитора с плотностью 90dpi с расстояния вытянутой руки пользователя
(28 дюймов).

В качестве значений цветов можно использовать зарезервированные ключе-

вые слова HTML для определения наиболее употребительных цветовых от-
тенков (например, aqua, black, white и т. п.) или использовать цветовую мо-
дель RGB. Примеры способов задания цветовых оттенков приведены ниже:
ЕМ { color: #fOO } /* #rgb соответствует ttrrggbb */
ЕМ { color: #ffOOOO } /* trrggbb */
EM { color: rgb(255,0,0) } /* целые в интервале 0 - 255 */
ЕМ ( color: rgb(100%, 0%, 0%) } /* вещественные от 0.0% до 100.0% */

Для задания URL-адреса ресурса используется функциональная запись

uri(...):
BODY { background: url([Link] }
Скобки, запятые, пробелы, одинарные и двойные кавычки в URL-адресе
задаются с предшествующей обратной косой чертой (\), \ ( , \,).

( Примечание }
В каскадных таблицах стилей частичный URL-адрес интерпретируется относи-
тельно месторасположения таблицы стилей, а не относительно расположения
документа.
468 Часть II. Интерактивные Web-документы

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

Свойство font-family
Свойство font-family задает приоритетный список семейств шрифтов и/или
типовых семейств шрифтов. Если использовать для отображения страницы
один определенный шрифт, то может оказаться, что этот шрифт не поддер-
живает некоторые символы, содержащиеся на странице, или на компьютере
пользователя нет вообще этого шрифта. Для разрешения подобных проблем
это свойство позволяет разработчику страницы задать список шрифтов од-
ного стиля и размера, среди которых браузер может искать необходимый
символ. В отличие от других свойств каскадных таблиц стилей названия
семейств в списке отделяются запятыми, чтобы показать их альтернативность:
BODY {font-family: TimesDL, "Times New", serif)

При интерпретации HTML-страницы браузер сначала ищет на компьютере

пользователя шрифт TimesDL. Если такой шрифт отсутствует, то браузер
пытается применить шрифт Times New, а если и он не найден, то использу-
ется любой шрифт из семейства шрифтов serif— одного из типовых се-
мейств шрифтов компьютера.
Понятие типовых семейств шрифтов введено в каскадные таблицы стилей
с целью реализации наихудшего варианта отображения страницы, если не
найдены специально использованные автором шрифты. В любой реализа-
ции каскадных таблиц стилей должны существовать пять типовых семейств
шрифтов, которые соответствуют реальным шрифтам, обычно устанавли-
ваемым на большинстве компьютеров:
П serif (например, Times)
П sans-serif (например, Helvetica)
О cursive (например, Zapf-Chancery)
П fantasy (например, Western)
П monospace (например, Courier)
Глава 10. Динамический HTML 469

Имена шрифтов, состоящих из нескольких слов, должны заключаться в ка-

вычки:
BODY {font-family: "Times New Roman", serif}
1
<BODY STYLE="font-family: 'Tiroes New "Roman , serif">

Предупреждение
Следует использовать кавычки разных типов при задании последовательности
всех определяемых свойств в параметре STYLE и при задании имени шрифта в
свойстве font-family.

Свойство font-style
Свойство font-style определяет стиль шрифта из выбранного семейства:
Нормальный (normal), КУРСИВНЫЙ (italic) ИЛИ НаКЛОННЫЙ (oblique).
Нормальный шрифт — это обычный прямой шрифт, используемый для печа-
ти документов. Курсивный стиль шрифта напоминает каллиграфические
этюды в прописях первоклассников и близок к рукописному. Наклонные
шрифты генерируются из обычных прямых шрифтов небольшим наклоном
символов.
Обычно в базе шрифтов браузера все шрифты, в именах которых встречают-
ся слова Oblique, Slanted или Incline отмечены как наклонные (oblique)
шрифты. Шрифты, в названиях которых присутствуют слова Italic, Cursive
или Kursiv, отождествляются браузером с курсивными (italic).
Следующие правила определяют курсивный стиль шрифта заголовка пер-
вого уровня и нормальный, прямой шрифт выделенных частей заголовка:
HI {font-style: italic}
HI EM {font-style: normal}

Свойство font-variant
Каскадные таблицы стилей реализуют еще одну вариацию шрифта выбран-
ного семейства — капитель (small-caps). В шрифте этого стиля все строчные
буквы выглядят как прописные, но меньшего размера и с немного изменен-
ными пропорциями.
Значение normal свойства font-variant не изменяет вида шрифта, а значе-
ние small-caps выбирает вариант капитель шрифта. Рекомендации по кас-
кадным таблицам стилей допускают создание шрифта капитель простой за-
меной строчных букв масштабированными символами верхнего регистра.
Следующие правила задают отображение заголовка четвертого уровня капи-
телью с наклонной капителью в выделенных частях:
470 Часть II. Интерактивные Web-документы

Н4 {font-variant: small-caps}
ЕМ {font-style: oblique}

Примечание
Свойство font-variant наследуется элементом ЕМ от своего родителя — по-
этому в приведенном примере выделенные части заголовка будут отображать-
ся наклонной капителью.

Свойство font-weight
Это свойство выбирает из заданного семейства шрифт определенной жир-
ности. В рекомендациях регламентируется 9 градаций жирности шрифта,
задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует
самому "бледному" шрифту, тогда как 900 — самому "жирному".
Для задания нормального шрифта используется ключевое слово normal, что
соответствует цифровому значению 400. Значение bold применяется для вы-
бора общепринятого полужирного начертания шрифта и его цифровым эк-
вивалентом является 700.
Выбор определенной градации жирности шрифта не означает, что в семей-
стве существует шрифт с заданной жирностью. Единственное, что гаранти-
руется, — это то, что шрифт с большим значением жирности не светлее
предыдущего значения. Некоторые семейства имеют только две градации
жирности: нормальную и полужирную.

Свойство font-size
Это свойство определяет размер шрифта. Его значение может быть абсо-
лютным или относительным.
Абсолютное значение можно задать одним из следующих ключевых слов:
xx-small, x-small, small, medium, large, x-large, xx-large, которые ЯВЛЯЮТСЯ
индексами в таблице размеров шрифтов, поддерживаемой браузером. Мас-
штабирующий множитель соседних значений в уровне 1 каскадных таблицах
стилей определялся как 1.5, а в уровне 2 его значение рекомендовано рав-
ным 1.2. Это означает, что шрифт размера large в 1.2 раза выше шрифта
medium и в 1.2 ниже шрифта x-large. По умолчанию браузер использует зна-
чение medium.
Абсолютное значение можно задать и в виде абсолютного значения длины,
например lOpt, но в этом случае высота шрифта не зависит от хранимой
таблицы размеров шрифтов браузера.
Ключевые слова для задания относительного размера шрифта интерпрети-
руются относительно таблицы размеров шрифтов и размера шрифта элемен-
та-родителя. Возможными значениями могут быть: larger и smaller. На-
Глава 10. Динамический HTML 471

пример, если родитель имеет размер шрифта medium, то значение larger сде-
лает шрифт текущего элемента равным large.
Относительный размер шрифта можно задать также в процентах к размеру
шрифта родителя или в относительных единицах длины:
Р (font-size: lOpt}
ЕМ {font-size: 120%}
ЕМ {font-size: 1.2em}

Два последние правила для выделенного в абзаце элемента ЕМ определяют

одинаковую высоту шрифта I2pt.

Свойство font
Основное назначение свойства font — установить в одном определении зна-
чения СВОЙСТВ font-style, font-variant, font-weight, font-size, line-height
и font-family. Все значения перечисленных свойств задаются через пробелы
в том порядке, как они перечислены выше. Первые три свойства могут не
задаваться, что соответствует установке их значений в normal. Размер шрифта
и высота строки (свойство line-height) задаются через косую черту. Элемен-
ты списка семейств шрифтов свойства font-family задаются через запятую:
Р {font: oblique 12pt/14pt "Times Cyr", serif}

В этом примере для абзаца задается наклонный шрифт Times Cyr высотой
12 пунктов. Высота строк — 14 пунктов. Если не найден шрифт Times Cyr,
то применяется любой шрифт типового семейства serif.

Свойство ©font-face
Это свойство введено в каскадные таблицы стилей в рекомендациях уровня 2.
Оно предназначено для задания семейства шрифта. Если указанный шрифт
отсутствует на компьютере пользователя, то он загружается из сети по за-
данному вторым параметром URL-адресу:
@font-face {font-family: CoolFont;
src:url([Link]

Примечание
Все свойства шрифтов являются наследуемыми и применяются ко всем эле-
ментам документа HTML.

Цвет и фон
Свойства этой категории определяют цвет и фон элемента. Фон можно за-
дать в виде цвета или изображения. В случае изображения указывается его
472 Часть II. Интерактивные Web-документы

положение, как оно повторяется и фиксировано ли оно или прокручивается

вместе с прокруткой содержимого окна браузера.
Для установки цвета текста элемента существует единственное свойство
color. Его значением является цвет, задаваемый с помощью ключевых слов
или rgb-функции:
<Р> (color: blue}
<ЕМ> {color: rgb(0,0,255)}

Оба правила в примере устанавливают синий цвет текста соответствующих

элементов.
Для установки параметров фона элемента существует несколько свойств,
задающих значения индивидуальных параметров фона, и свойство
background, в котором можно установить одновременно все значения пара-
метров фона.
Цвет фона определяется значением свойства background-color, а изображе-
ние, используемое в качестве фона, задается свойством background-image.
Начальным значением свойства background-color является transparent, ко-
торое определяет фон элемента как прозрачный. Значением свойства
background-image является абсолютный или относительный адрес файла изо-
бражения, используемого в качестве фона. Если это свойство определено, то
рекомендуется задать также и цвет фона, который будет использоваться в
случае недоступности файла изображения.
BODY {background-color: lightsteelblue;
background-image: url(/image/[Link]);}
<P> (background-image: none}

В приведенном примере задается адрес файла изображения для фона тела

документа и явно указывается отсутствие фона для абзацев документа.
Если фон задан в виде изображения, то свойство background-repeat опреде-
ляет его повторяемость и способы повторяемости. Допустимыми значения-
ми являются repeat (повторяемость и по вертикали, и по горизонтали),
repeat-x и repeat-y (повторяемость соответственно по горизонтали или вер-
тикали) и no-repeat (изображение не повторяется). В следующем примере
BODY (background-color: lightsteelblue;
background-image: url(/image/[Link]);
background-repeat: repeat-y;}

задается повторяемость изображения фона по вертикали.

Свойство background-attachment определяет, будет ли фон, на котором ото-
бражается документ, оставаться неподвижным при прокрутке содержимого
окна браузера или он будет прокручиваться вместе с документом. В первом
Глава 10. Динамический HTML 473

случае реализуется эффект перемещения содержимого окна над неподвиж-

ным рисунком. Значение fixed оставляет фон неподвижным, а значение
scroll заставляет его перемещаться вместе с содержимым документа при
прокрутке. Пример закрепленного в окне браузера изображения фона пред-
ставлен ниже:
BODY {background-color: lightsteelblue;
background-image: url(/image/[Link]);
background-repeat: repeat-y;
background-attachment: fixed;}

Свойство background-position определяет начальное положение изображе-

ния, используемого в качестве фона, в блоке содержимого элемента. Значе-
нием этого свойства являются координаты привязки определенных точек
изображения и блока содержимого. Их можно задавать в процентах, в абсо-
лютных единицах длины, а также с использованием комбинаций ключевых
значений.
Пара о% 0% означает, что верхний левый угол изображения помещается в
верхний левый угол блока содержимого элемента (это значение является
значением по умолчанию). Пара юо% юо% размещает нижний правый угол
изображения в нижний правый угол блока содержимого. Пара значений,
отличных от указанных, например 10% 80%, помещает точку изображения,
расположенную на расстоянии в 10% ширины от левого края и в 80% высо-
ты от верхнего края, в точно такую же точку блока содержимого элемента.
Пара абсолютных значений, например lOmm lomm, размещает верхний левый
угол изображения на 10 мм правее и на 10 мм ниже левого верхнего угла
блока содержимого.
Ключевые значения и их допустимые комбинации вместе с эквивалентными
числовыми значениями представлены в табл. 10.3.

Таблица 10.3. Допустимые комбинации ключевых значений

Комбинация Значение

top left,left top 0% 0%

top, top center, center top 50% 0%
top right, right top 100% 0%
left, center left, left center 0% 50%
center, center center 50% 50%
right, center right, right center 100% 50%
bottom left, left bottom 0% 100%
474 Часть II. Интерактивные Web-документы

Таблица 10.3 (окончание)

Комбинация Значение
bottom, bottom right, bottom center 50% 100%

bottom right, right bottom 100% 100%

Свойство background позволяет одновременно устанавливать значения

СВОЙСТВ background-color, background-image, background-repeat И background-
attachment. Все допустимые значения индивидуальных свойств задаются в
виде списка, элементы которого отделены пробелами. Если значение како-
го-либо свойства не задано, то оно устанавливается в начальное значение,
определяемое браузером:
BODY {background: lightsteelblue url(/image/[Link]) center)

Это правило устанавливает цвет и изображение фона, а также положение

изображения в окне браузера. Остальные свойства фона принимают началь-
ные значения.

Примечание
Свойство color наследуется по обычным правилам. Все свойства, опреде-
ляющие параметры фона, не наследуются, но фон элемента-родителя будет
отображаться по умолчанию, так как начальным значением свойства
backround-color является transparent (прозрачный).

Форматирование текста
Свойства данной категории влияют на отображение символов, слов и абза-
цев. Они определяют расстояние между словами и буквами в словах, задают
отступы и высоту строк в абзацах.
Свойство letter-spacing влияет на расстояние между символами при ото-
бражении текста. Его значение, задаваемое в единицах длины, определяет
пробел, добавляемый к установленному по умолчанию пробелу между сим-
волами. На рис. 10.6 показано отображение текста с установками по умол-
чанию и с увеличенным на 0.5ет пробелом между символами:
<Р STYLE=" letter-spacing: 0.5em">
Слово слово слово слово слово

ц
Слово слово слово
Рис. 10.6. Абзац
С л о в о с л о в о с л о в о с увеличенным расстоянием
..J между символами
Глава 10. Динамический HTML 475

Примечание
Браузер увеличивает не только расстояние между символами слов, но и рас-
стояние между словами.

Каскадные таблицы стилей позволяют преобразовывать текст. Если значе-

ние свойства text-transform равно capitalize, то все слова отображаются
с прописной буквы. Значения uppercase и lowercase этого свойства приводят,
соответственно, к преобразованию всех букв в прописные или строчные,
независимо от их задания в тексте документа HTML.
Свойство text-decoration задает подчеркивание, подчеркивание или пере-
черкивание текста. Соответствующие значения этого свойства следующие:
underline, overline И line-through.
Выравнивание текста в блоке содержимого элемента определяется значени-
ем свойства text-align. Текст выравнивается по левому краю при значении
left, по правому краю — при значении right и по центру — при значении
center.

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

Отступ первой строки элемента задается значением свойства text-indent,

которое определяет величину отступа в абсолютных или относительных
единицах длины.
Свойство vertical-align определяет положение элемента по вертикали от-
носительно элемента-родителя. Его значением может быть любое ключевое
слово из табл. 10.4.

Таблица 10.4. Ключевые значения выравнивания по вертикали

Значение Результат

baseline Выравнивание базовой линии элемента (или низа, если элемент не

имеет базовой линии) по базовой линии родителя
middle Выравнивание средней точки элемента (обычно изображения) на
уровне базовой линии родителя плюс половина ширины блока со-
держимого родителя
sub Элемент отображается в виде нижнего индекса
super Элемент отображается в виде верхнего индекса
text-top Выравнивание верха элемента с верхом шрифта элемента-роди-
теля
text-bottom Выравнивание низа элемента с низом шрифта элемента-родителя
476 Часть II. Интерактивные Web-документы

Таблица 10.4 (окончание)

Значение Результат

top Выравнивание верха элемента с верхом самого высокого элемента

строки
bottom Выравнивание низа элемента с ниже всех расположенным элемен-
том строки

Значения этого свойства, заданные в виде процентов, вычисляются относи-

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

( Примечание j
Все текстовые свойства, кроме СВОЙСТВ text-decoration И vertical-align,
наследуются элементами-потомками от родителей.

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

Совет
При знакомстве со свойствами блоковых элементов желательно иметь перед
глазами схему параметров форматирования блоковых элементов, схематиче-
ски представленную на рис. 10.3.
В группу форматирования поля входят свойства, устанавливающие ширину
верхнего (margin-top), правого (margin-right), НИЖН6ГО (margin-bottom) И
левого (margin-left) поля элемента. В свойстве margin можно одновременно
установить значения всех четырех параметров поля элемента.
Глава 10. Динамический HTML 477

Ширина соответствующих полей задается значением длины или в процентах

от ширины ближайшего элемента-родителя. Начальные значения всех полей
равны 0.
Если в свойстве argin заданы четыре значения, то они, соответственно, от-
носятся к верхнему, правому, нижнему и левому полю. Если определено
только одно значение, то оно применяется ко всем сторонам поля элемента.
При задании двух или трех значений недостающие значения берутся из
установок противоположных сторон. Например:
BODY {margin: lem 2em} /* верх и низ = lem, право и лево = 2ет */

Ширина верхнего, правого, нижнего и левого отступа определяется значе-

нием, соответственно, СВОЙСТВ padding-top, padding-right, padding-bottom И
padding-left. Свойство padding позволяет одновременно установить значе-
ния всех четырех отступов элемента. Все, что было сказано о задании зна-
чений для одновременной установки полей, относится и к этому свойству.
Ширину верхней, правой, нижней или левой границы задают соответствен-
но свойствами border-top-width, border-right-width, border-bottom-width И
border-left-width. Значения свойства border-width определяют ширину гра-
ницы элемента для всех перечисленных ее частей. Все, что было сказано
о задании значений для одновременной установки полей, относится и к этому
свойству.
Значениями этих свойств могут быть ключевые параметры thin, medium и
thick или значение длины. Ширина границы, определяемая ключевыми па-
раметрами, зависит от браузера. Единственное, что можно гарантировать, -
это то, что ширина thin не больше ширины medium, которая, в свою оче-
редь, не больше ширины thick.
Цвета частей границы задаются значениями свойств border-top-coior,
border-right-color, border-bottom-color И border-left-color. СВОЙСТВО
border-color определяет цвета всех частей границы. Четыре параметра цвета
подчиняются все тем же правилам, описанным при задании полей элемента.
Если задан тип границы (см. ниже), но не задан цвет границы, то по умол-
чанию используется цвет самого элемента.
Все предыдущие установки свойств границы не будут иметь никакого воз-
действия на отображение элемента, если не установлен тип границы, так
как по умолчанию тип границы не определен, и она не отображается.
Для задания типа любой из четырех частей границы применяются свойства
border-top-style, border-right-style, border-bottom-style И border-left-
style. Свойство border-style определяет одновременно типы всех частей
границы. Значениями этих свойств могут быть ключевые параметры попе,
solid, double, groove, ridge, inset, outset. Типы Границ, соответствующих
всем перечисленным значениям, представлены в табл. 10.5.
478 Часть II. Интерактивные Web-документы

Таблица 10.5. Типы линий границы

Ключевой Типграницы
параметр

попе Граница не отображается (несмотря на значение свойства border-

width)
solid Граница отображается сплошной линией
double Граница отображается двойной линией (сумма толщины двух линий
и промежутка между ними равна значению свойства border-width
groove Граница отображается, как будто она вдавлена в лист ("желобок")
ridge Граница отображается, как будто она выдавлена из листа ("барельеф")
inset Весь блок элемента отображается, как будто он вдавлен в лист
outset Весь блок элемента отображается, как будто он выдавлен из листа
("барельеф")

Последняя большая группа свойств позволяет установить ширину, тип и

цвет частей границы или всей границы в целом. Свойства border-top,
border-right, border-bottom И border-left определяют ширину, ТИП И цвет,
соответственно, верхней, правой, нижней и левой границы. Свойство border
определяет одновременно параметры всех частей границы. В отличие от
аналогичных свойств, задающих параметры полей и отступов, данное свой-
ство устанавливает одинаковые значения для всех частей границы.

Визуальное форматирование
Каскадные таблицы стилей предоставляют разработчику Web-документов
мощные средства компоновки элементов HTML на странице документа, оп-
ределяющие внешний вид страницы HTML в окне браузера. В CSS1 боль-
шинство этих свойств относилось к категории позиционирования, и, ввиду
большой важности, их описание было выделено в отдельный документ ре-
комендаций, подготовленный Консорциумом W3. В CSS2 эти и некоторые
другие свойства сгруппированы в разделах, относящихся к визуальному
форматированию.
Элементы HTML отображаются браузером последовательно, в том порядке,
как они определены в тексте HTML-файла с учетом их положения в струк-
туре документа и расположения предыдущих отображенных элементов и
элементов-контейнеров, в которых они могут содержаться. При компоновке
страницы используются установки браузера для определения положения ка-
ждого элемента. Например, два последовательных абзаца следуют друг за
другом, причем каждый начинается с новой строки.
Глава 10. Динамический HTML 479

Свойство position элемента позволяет определить способ его позициониро-

вания на странице: статический, относительный или абсолютный. Отно-
сительный способ определяет смещение элемента относительно его естест-
венного положения в потоке отображения элементов. Абсолютный способ
удаляет элемент из естественного потока позиционирования и позволяет
разместить его на странице абсолютно произвольным образом. Статический
способ, являющийся умалчиваемым способом позиционирования элемен-
тов, предполагает естественный поток отображения элементов страницы
в окне браузера в соответствии с иерархией объектов документа.
Значения static, relative и absolute свойства position определяют соответ-
ствующий способ позиционирования элемента, который, в конечном счете,
складывается из значения указанного свойства элемента, его положения в
иерархической структуре документа, местом его определения в исходном
файле HTML и значениями его свойств top и left. Эти последние свойства
определяют смещение вниз и вправо левого верхнего угла блока отображе-
ния элемента (см. выше раздел "Модель форматирования).

Абсолютное позиционирование
Абсолютно позиционированный элемент и все его потомки изымаются из есте-
ственного потока отображения элементов и позиционируются независимо,
причем сам элемент или его потомки могут перекрывать ранее отображен-
ные элементы.
Чтобы определить точку отсчета местоположения элемента, следует найти
его ближайшего родителя, позиционированного абсолютно или относитель-
но. Положение левой верхней вершины блока этого элемента и будет точ-
кой отсчета для абсолютно позиционированного элемента. Если процесс
поиска подобного родителя (следует пропускать все позиционированные
статически элементы) дойдет до элемента <BODY>, то тело документа и будет
тем элементом, относительно которого позиционируется исходный элемент.
Следующий фрагмент страницы HTML иллюстрирует абсолютное позицио-
нирование элемента:
<SPAN STYLE="position:static;
background-color:#90EE90">
Родитель, позиционированный статически!
<IMG SRC="/[Link]" STYLE="position:absolute; top:60px; left:60px;">
</SPAN>

На рис. 10.7 показано отображение страниц с абсолютно позиционирован-

ным элементом (графическим изображением буквы Ж) в тэге <SPAN>, пози-
ционированном статически (aw. б) и относительно (в и г).
Так как в исходном фрагменте родитель (<SPAN>) элемента <IMG>, позицио-
нированного абсолютно, является статически позиционированным элемен-
480 Часть II. Интерактивные Web-документы

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

вым будет тело документа, относительно начала которого и смещается вправо
и вниз на 60 пикселов изображение (рис. 10.7, а). Если к этому фрагменту
добавить один абзац, то элемент <SPAN> сместится вниз, но его потомок -
элемент <IMG> — все равно будет позиционирован относительно начала до-
кумента (рис. 10.7, б), что приводит к перекрытию изображением родителя.

Родитель, позициями! Абзац 1

Ж
Абзац 1

Ж в
ж г
Рис. 10.7. Отображение абсолютно позиционированного изображения

Если теперь изменить позиционирование родителя на относительное, то

элемент <IMG> будет смещен вниз и вправо относительно начала элемента-
родителя (рис. 10.7, в). А если добавить перед элементом <SPAN> абзац, то
изображение сместится вместе со своим родителем, оставаясь расположен-
ным на 60 пикселов вниз и вправо относительно начала элемента-родителя
(рис. 10.7, г).

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

Значения свойств top и left влияют на начало отсчета положения абсолют-

но позиционированного элемента. Если их значения установлены, то имен-
но они и используются для смещения элемента относительно начала пози-
ционированного элемента-родителя. Если значение свойства top не задано
или установлено равным auto, то верхний край элемента совмещается с вер-
хом последней строки текста родителя, если последний содержит текст, или
выравнивается по верхнему краю родителя, если последний является изо-
бражением. Аналогично, если значение свойства left не задано или уста-
Глава 10. Динамический HTML 481

новлено равным auto, то левый край элемента совмещается с концом по-

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

Относительное позиционирование
Относительно позиционированные и статически позиционированные элементы
после изъятия из исходного текста документа всех абсолютно позициониро-
ванных элементов (вместе с их потомками), образуют непрерывный поток
отображения, в котором каждый последующий элемент позиционируется
относительно конца предыдущего.
Относительно позиционированные элементы, являющиеся потомками абсо-
лютно позиционированных элементов, также позиционируются в конец
своего элемента-родителя.
Рис. 10.8, а демонстрирует отображение в окне браузера последовательности
относительно позиционированных элементов страницы:
<SPAN STYLE="position:relative;
background-color: gray">
Это изображение </SPAN>
<IMG SRC="[Link]" STYLE="position: relative;">
<SPAN STYLE="position:relative;
background-color: lightgrey">
является изображением буквы "Ж".
</SPAN>

Каждый элемент потока позиционируется в конец предыдущего. Если пози-

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

163ак. 944
482 Часть II. Интерактивные Web-документы

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

<IMG> задан вторым, поэтому он отображается раньше третьего элемента и
перекрывается последним.

яЙШ» i <5ЙЛ "'Ж"><

Ж
Рис. 10.8. Отображение потока
относительно позиционированных
элементов

До сих пор мы не задавали значений свойств top и left относительно пози-

ционируемых элементов. Если для какого-либо элемента из стандартного
потока определены значения этих свойств, то этот элемент смещается вниз
и вправо на заданные величины относительно правого верхнего угла блока
предыдущего элемента в потоке, а следующий элемент отображается так,
как будто предыдущий смещенный элемент остается не смещенным. Это
правило иллюстрируется на рис. 10.8, в, где отображен предыдущий фраг-
мент, в котором параметр STYLE элемента <IMG> имеет значение "position:
relative; top: ЮОрх; l e f t : 40px;".

Статическое позиционирование
В стандартном потоке статически позиционированные элементы ведут себя
аналогично относительно позиционированным: они отображаются непо-
средственно сразу после предыдущего элемента в потоке. Единственное их
отличие от относительно позиционируемых элементов заключается в том,
что для них нельзя установить значения свойств top и left, и тем самым
сместить их, например, со строки абзаца вверх или вниз.

Визуальные эффекты
Несколько свойств каскадных таблиц стилей позволяют организовать, со-
вместно со встроенными сценариями, динамическое отображение и скрытие
элементов страницы HTML.
Свойство visibility управляет отображением элемента. Если его значение
равно visible (значение по умолчанию), то элемент отображается, если оно
установлено равным hidden, то элемент не отображается. Когда для скрытия
элемента используется его свойство visibility, то элемент не изымается из
Глава 10. Динамический HTML 483

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

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

со свойством
ом 'display: uiuck!:
JJ:

Рис. 10.9. Поведение элементов при их скрытии

На рис. 10.9, а показано отображение двух элементов <IMG>, источником

изображения которых является графический файл буквы Ж. Верхний эле-
мент определен со свойством visibility равным visible, а нижний эле-
мент — со свойством display равным block. При нажатии соответствующих
кнопок свойство visibility первого изображения становится равным
hidden, а свойство display второго изображения изменяется на попе. На
рис. 10.9, б показан результат отображения скрытых изображений. Блок
первого изображения остается в потоке отображения, и поэтому только ис-
чезает картинка. Второе изображение изымается из потока отображения,
и поэтому никакого зарезервированного для картинки места не остается.
Свойство clip позволяет обрезать видимое изображение абсолютно пози-
ционированного элемента. Каждый такой элемент отображается в прямо-
угольном блоке определенной ширины и высоты, которые определяются
484 Часть II. Интерактивные Web-документы

либо шириной и высотой самого элемента, либо его свойствами width и

height. Та часть элемента, которая отображается в блоке, является его види-
мым изображением. Блок отображения не обязательно должен соответство-
вать размерам самого элемента: он может вмещать весь элемент, а может
вмещать только его часть. Например, блок отображения элемента <IMG> мо-
жет быть меньше размеров графического изображения, представляемого
этим элементом. Свойство clip воздействует только на блок отображения
элемента. Его значением может быть auto (никакого отсечения не произво-
дится) или границы прямоугольника видимого изображения элемента, кото-
рые задаются с помощью следующего параметра rect(<top> <right>
<bottom> <left>). Величины <top>, <right>, <bottom> И <left> определяют,
соответственно, верхнюю, правую, нижнюю и левую границы видимого изо-
бражения элемента относительно блока отображения. На рис. 10.10, а пока-
зано графическое изображение с размерами 89x74 пиксела, а на рис. 10.10, б
то же изображение со свойством clip равным rectuo 70 60 Ю).

Рис. 10.10. Свойство

clip обрезает видимое
изображение элемента

Свойство overflow определяет поведение элемента, когда размеры его со-

держимого не соответствуют размерам блока отображения, установленного
свойствами top, left, width и height. Существует четыре значения этого
свойства, определяющие поведение элемента:
П visible — заставляет элемент сжаться или увеличиться, чтобы полностью
отобразиться в заданном блоке (для графического содержимого элемента)
или увеличивает размеры блока отображения (для текстового содержи-
мого);
П hidden — обрезает элемент в соответствии с размерами блока;
П auto — добавляет полосы прокрутки к блоку отображения в случае, если
размеры содержимого элемента превосходят размеры блока отображения;
П scroll — добавляет полосы прокрутки к блоку отображения в любом случае.
На рис. 10.11 показан один и тот же раздел (элемент <DIV>) с разными зна-
чениями свойств overflow. Свойства width и eight раздела во всех вариантах
его отображения одинаковы и соответствуют размерам первого элемента на
рисунке (блок отображения).
Глава 10. Динамический HTML 485

Рис. 10.11. Элементы с разными значениями свойства overflow

Все представленные выше свойства влияют на расположение блока отображе-

ния элемента в плоскости окна браузера. Однако каскадные таблицы стилей
позволяют позиционировать каждый блок и в направлении, перпендикуляр-
ном плоскости экрана, что влияет на отображение элемента при перекрытии
его другим элементом.
Обычно элемент, появляющийся позже другого в исходном тексте докумен-
та HTML, перекрывает ранее отображенные элементы. Свойство z-index
задает слой, в котором располагается элемент при отображении. Если слой
расположен ближе к пользователю (значение свойства z-index больше), то
элемент перекрывает любой другой элемент с меньшим значением слоя, да-
же если последний и отображается позже. Следующие фрагменты документа
HTML иллюстрируют использование свойства z-index, а на рис. 10.12 пока-
заны результаты их отображения в окне браузера:
<!—Фрагмент 1—>
<IMG STYLE="position:absolute; top:80px; left:0px; z-index:auto"
SRC=)[Link]>
<DIV STYLE="position:absolute; top:115px; left:10px; width:150px;
color:white; background-color:blue; z-index:auto">
Две буквы ")K"</DIV>
<IMG STYLE="position:absolute; top:120px; left:50px; z-index:auto"
SRC=[Link]>

<!—Фрагмент 2—>
<IMG STYLE="position:absolute; top:260px; left:0px; z-index:3"
SRC=[Link]>
<DIV STYLE="position:absolute; top:295px; left:10px; width:150px;
color:white; background-color:blue; z-index:1">
Две буквы "5K"</DIV>
<IMG STYLE="position:absolute; top:300px; left:50px; z-index:auto"
SRC=[Link]>

Если значением свойства z-index является auto, то элемент перекрывает все

элементы с таким же значением этого свойства, но его перекрывает любой
элемент со значением свойства z-index, отличным от auto.
486 Часть II. Интерактивные Web-документы

Первый фрагмент иллюстрирует значение auto. Второй элемент в потоке

отображения перекрывает первый, а третий — все предыдущие. Во втором
фрагменте третья буква Ж перекрывается всеми предыдущими элементами -,
так как значение ее свойства z-index равно auto, а у предыдущих элементов
это свойство определяет номер слоя. Первая буква Ж перекрывает текст, так
как значение ее свойства z-index больше значения этого же свойства текста,
хотя в потоке отображения она идет ранее.

Цй<'

Рис. 10.12. Перекрытие элементов при отображении

Отображение списков
Четыре свойства каскадных таблиц стилей влияют на отображение списков,
задаваемых тэгами <оь> и <иь>.
Свойство list-style-type определяет тип маркера списка, если значение
свойства list-style-image установлено равным попе или графическое изо-
бражение, определенное в этом свойстве функцией uri ( ) , не доступно. До-
пустимые значения этого свойства показаны в табл. 10.6.

Таблица 10.6. Значения свойства list-style-type

Значение Вид маркера

попе Маркер не отображается

disk Закрашенный кружок
circle He закрашенный кружок
square Закрашенный квадрат
decimal Арабская цифра с точкой
lower-roman Римская строчная цифра с точкой
Глава 10. Динамический HTML 487

Таблица 10.6 (окончание)

Значение Вид маркера

upper-roman Римская прописная цифра с точкой

lower-alpha Латинская строчная буква с точкой
upper-alpha Латинская прописная буква с точкой

Свойство list-style-image определяет графическое изображение, которое

будет использоваться в качестве маркера списка, если оно доступно. Значе-
ниями этого свойства могут быть либо попе (не задается никакое изображе-
ние для маркера), либо полный или относительный адрес графического
файла, задаваемый с помощью функции uri ( ) :
OL {list-style-image: url (http: //[Link]/list . gif)

Свойство list-style-position определяет положение маркера в списке:

в составе абзаца пункта списка (значение inside) или выдвинутым влево от
него (значение outside):
<DIV STYLE= "posit ion: absolute; top: Opx; left: 20px; width: 300px">
<UL STYLE="list-style-position: inside"> Список 1
<LI> Абзац первого перечисления в списке. Маркер в составе абзаца.
<LI> Абзац второго перечисления в списке. Маркер в составе абзаца.
</UL>

<DIV STYLE="position:absolute; top: Opx; left: 400px; width: 300px">

<UL STYLE="list-style-position: outside"> Список 2
<LI> Абзац первого перечисления в списке. Маркер впереди абзаца.
<Ы> Абзац второго перечисления в списке. Маркер впереди абзаца.
</UL>

Результаты отображения этих двух списков показаны на рис. 10.13

1
й'
:|;Й чХ:;:-::1.:'

6; :
ЯВ '

Ш'ШЩтМШШШ

Рис. 10.13. Списки с разным расположением маркеров

488 Часть II. Интерактивные Web-документы

Как и для большинства свойств каскадных таблиц стилей, так и для этих
свойств определено свойство, в котором можно одновременно определить
значения всех свойств отображения списка. Значением свойства list-style
Является СПИСОК значений СВОЙСТВ list-style-type, list-style-image И list-
style-position:
OL {list-style: circle url([Link]) inside}

Примечание
Свойства группы "Фильтры и переходы" используются для создания динамиче-
ских визуальных эффектов в HTML-документах, и поэтому их описание будет
дано ниже в разделе "Динамический HTML e Internet Explorer".

Объектная модель документа

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

Структура документа
В объектной модели документа любой документ представляется в виде логи-
ческой древовидной структуры. Например, следующий фрагмент документа
HTML:
<BODY>

<Р ID='pl'> В блоковый элемент, каким является абзац,

можно добавлять <В 10= 'Ы Застраиваемые элементы</В> и
даже другие блоковые элементы <IMG ID='imgl' SRC="[Link] ">

<IMG ID='img2' SRC="my-l .gif "

</BODY>

будет представлен в объектной модели документа логической структурой,

показанной на рис. 10.14.

Рис, 10.14. Логическая структура

фрагмента документа

Для сложного документа логическая структура будет, естественно, сложнее.

В ней может оказаться много "деревьев", которые в сумме будут представ-
лять уже некоторый "лес".
Для понимания объектной модели документов важно осознавать, что логи-
ческая древовидная структура представления документа никак не связана
с реализацией этой модели именно в виде древовидной структуры. Рекомен-
дации не регламентируют способ реализации модели, она может быть про-
извольной. Основное — это принцип структурного изоморфизма: две реали-
зации объектной модели документа, используемые для представления одного
и того же документа, создадут одну и ту же структурную модель с одинако-
выми объектами и их связями.
Другой важный аспект модели документов — она оперирует с объектами в
полном соответствии с традиционными объектно-ориентированными техно-
логиями: все элементы документа представляются в виде объектов. В узлах
структурной логической схемы находятся объекты, а не данные, со всеми
присущими объектам свойствами и поведением.
490 Часть II. Интерактивные Web-документы

Объектная модель документов, таким образом, определяет:

О интерфейсы и объекты, используемые для представления документа и
манипулирования с ним;
О семантику (смысл) этих интерфейсов и объектов, включая и поведение,
и параметры;
О "родственные" связи и взаимодействие между этими интерфейсами и
объектами.
Основное назначение реализации объектной модели документов — предоста-
вить возможность доступа и манипулирования элементами документа из
программы с помощью объектов, выстроенных в некоторую иерархическую
структуру, а также обеспечить взаимодействие между объектами. Поэтому
любая реализация модели включает в свою очередь и управление события-
ми, представленными также в виде объектов. Разработанные на настоящий
момент рекомендации Консорциума W3 не затрагивают вопросов управле-
ния событиями, но работа в этом направлении продолжается, и, возможно,
в ближайшее время могут появиться рекомендации по объектной модели
документа, уровень 2.
В связи с этим хотелось бы отметить ведущую роль фирмы Microsoft, объ-
ектная модель DHTML которой легла в основу рекомендаций, разработан-
ных Консорциумом W3. Поэтому следует ожидать, что и стандартизация
событий объектной модели документов также будет основываться на реали-
зованной в Internet Explorer событийной модели.

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

Объектная модель DHTML в MS Internet Explorer 4.0

Объектная модель DHTML предоставляет разработчикам Web-документов
прямой программируемый доступ ко всем элементам документа, а совмест-
но с событийной моделью подобный подход позволяет браузеру обрабаты-
вать ввод пользователя, выполнять встроенные сценарии и динамически
менять содержимое документа, не перезагружая его.
Каждый элемент HTML-документа является в этой модели программируе-
мым. Это означает, что к каждому элементу можно привязать сценарий, вы-
полняемый в зависимости от того, какое действие над элементом произвел
Глава 10. Динамический HTML _ 49 1

пользователь: поместил ли курсор мыши на элемент, перемещает курсор

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

Иерархия объектов
Иерархическая структура объектов модели DHTML похожа на иерархиче-
скую структуру объектов JavaScript, но дополнительно позволяет обращаться
и устанавливать свойства каскадных таблиц стилей.
Каждый объект в иерархии можно использовать в сценариях, но для этого
необходимо получить доступ к соответствующему объекту. В иерархической
объектной модели одну из важных ролей при доступе к объектам играют два
набора: all и children. В первом содержатся ссылки на все объекты, распо-
ложенные ниже объекта в иерархии, тогда как второй содержит ссылки на все
объекты, непосредственно порождаемые данным. Например, набор all объек-
та body приведенного выше фрагмента документа (см. выше раздел "Струк-
тура документа") содержит ссылки на все объекты документа, в том числе и
на pi, imgi, ы и img2. Набор children будет ссылаться только на два объек-
та, непосредственно порождаемых элементом body: pi, img2, при условии,
что приведенный фрагмент является законченным документом, и больше не
содержит никаких элементов.
На вершине всей иерархии объектов расположен объект document, от кото-
рого происходят, в конечном итоге, все объекты, представляющие элементы
HTML. Этот объект также имеет набор all (содержащий ссылки на все объ-
екты документа), который можно использовать для доступа к любому объекту
страницы.
Например, чтобы обратиться к объекту, представляющему первый абзац
предыдущего примера, в сценарии JavaScript это можно сделать следующи-
ми способами:
document . all . pi
document . all [ ' pi ' ]
document . all [ 0 ]

Примечание
Набор ail объекта document всегда содержит ссылки на объекты HTML, HEAD,
TITLE и BODY, даже если соответствующие тэги отсутствуют в документе. Кроме
перечисленных объектов в этот набор включаются также комментарии и неиз-
вестные или ошибочные тэги.
Имя элемента HTML, по которому на него можно ссылаться в сценарии,
задается либо в параметре ID, либо в параметре NAME тэга элемента. Каждый
492 _ Часть II. Интерактивные Web-документы

объект, входящий в набор, определяет свойство этого набора с таким же

именем, что и имя объекта, соответствующего определенному элементу
HTML-документа. Первая ссылка на объект первого абзаца страницы в при-
веденном примере как раз и использует это свойство наборов и объектов.
Последнюю запись можно использовать, если точно известно, что первый
абзац является первым элементом набора all.
Можно просто ссылаться на элемент, указав его имя, определенное в пара-
метре ID или NAME. Таким образом, на первый абзац можно сослаться и про-
сто как pi.
При программировании достаточно полезным свойством наборов является
свойство length, в котором хранится общее число объектов в наборе. Его
обычно используют, если заранее не известно число элементов в наборе.
Сценарий примера 10.2 демонстрирует использование этого свойства для
организации цикла по всем элементам страницы HTML. Этот сценарий
отображает диалоговое окно и сообщает пользователю, какой элемент он
собирается изменить.

<HTML>
<НЕАОХТ1ТЬЕ>Цикл по элементам</Т1ТЬЕ>
<SCRIPT LANGUAGE=" JavaScript ">
var mColor = new Array ( 'red' , 'green' , 'blue' , 'white' )
function changeAHElements ( ) {
for (i=0; i<document .all. length; i++) {
alert ( "Изменяется элемент: " + "<" + document. all [i] .tagName + ">"
document. all [i] .style. backgroundColor = mColor [i%4] ;

</SCRIPT>
</HEAD>
<BODY onload="changeAHElements ( ) >
<Н1>Привет ! </Н1>
<Р>Это простой пример, <В>ну очень простой</В> пример.
</BODY>
</HTML>

При загрузке документа вызывается функция changeAHEiementsO, которая в

цикле просматривает набор аи объекта document и отображает диалоговое
окно с сообщением, что будет изменен элемент, задаваемый соответствую-
щим тэгом. В качестве имени элемента в функции alert ( ) используется зна-
чение свойства tagName объекта, в котором как раз и хранится имя тэга. На
рис. 10.15 показано окно браузера в начале выполнения сценария (а) и после
выполнения сценария (б).
Глава 10. Динамический HTML 493

1
Привет!
Это простой пример, ну очень простой пример
:iosott Intcrnot I xplorer

!\i .HI'MI 1

а б
Рис. 10.15. Изменение параметров форматирования элементов HTML

В начале работы сценария документ отображается со стандартными уста-

новками форматирования браузера: черный текст на белом фоне. В процессе
выполнения сценария поочередно отображаются диалоговые окна с преду-
преждением об изменении элементов страницы. Так как к некоторым эле-
ментам страницы свойство, устанавливающее цвет фона элемента background-
color, не применимо, то его установка оператором JavaScript просто игно-
рируется. Изменения начинаются с элемента <BODY>. Сначала цвет фона
всей страницы становится красным, затем заголовок отображается на зеле-
ном фоне, текст абзаца — на синем, и в конце сценария текст тэга <в> ото-
бражается на белом фоне.
В этом примере продемонстрирована техника доступа к свойствам каскад-
ных таблиц стилей форматирования HTML-элементов из программы на
языке сценариев JavaScript. Все установленные для объекта свойства каскад-
ных таблиц стилей хранятся в наборе style этого объекта и являются, как
обычно, свойствами этого набора. Например, обратиться к свойству color
какого-либо HTML-элемента из сценария JavaScript можно с использовани-
ем следующего синтаксиса:
<ссылка_на_объект>.[Link]
<ссылка_на_объект>.style['color']

Здесь <ссылка__на_объект> определяет ссылку на объект, о которой речь шла

выше.
В каскадных таблицах стилей свойства форматирования имеют названия,
В Которых используется дефис: background-color, margin-top, border-left
и т. д. Имя такого свойства в сценарии определяется следующим образом:
1. Удаляется из названия свойства дефис (-).
2. Часть имени свойства после дефиса присоединяется к предшествующей
части с прописной буквы.
494 Часть II. Интерактивные Web-документы

3. Предыдущие два пункта повторяются для всех вхождений дефиса в на-

звание свойства.
Например, свойство border-right-width в сценарии JavaScript будет выгля-
деть borderRightWidth, на СВОЙСТВО background-color МОЖНО ссылаться как
backgroundColor.

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

Иногда необходимо из всего множества объектов страницы выделить под-

множество объектов, соответствующих некоторому типу элементов HTML.
На странице обычно содержится несколько заголовков, например, первого
уровня. В наборе аи они расположены вперемежку с остальными объекта-
ми, но если необходимо выделить их из всего множества элементов, то по-
добную операцию можно осуществить, используя метод tags о набора ail:
var paragraphs=[Link]('P')
for (i=0; i< [Link]; i++)
paragraphs(i).[Link] = 'blue';

Параметром метода tags () является наименование типа тэга, все экземпля-

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

Свойства и методы объектов

Большинство свойств объектов соответствуют параметрам представляемых
ими элементов HTML-документа и имеют такие же имена, что и имена па-
раметров. В сценарии можно получить значения интересующих параметров
элемента или, наоборот, изменить их установку. Динамическое изменение
свойств объектов, и, соответственно, представляемых ими элементов HTML,
является основной концепцией динамического HTML.
Имена некоторых свойств объектов отличаются от имен параметров, но
обычно достаточно близки к именам представляемых параметров. Напри-
мер, свойство className соответствует параметру CLASS. Подобное несоот-
ветствие связано, в основном, с именами параметров, которые могут кон-
фликтовать с зарезервированными ключевыми словами основных языков
сценариев.
Глава 10. Динамический HTML 495

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

что можно получить их значение, но нельзя изменить. Примером подобного
свойства является свойство tagName, представляющее имя тэга HTML-эле-
мента.
В объектной модели существуют свойства, представляющие целое мно-
жество свойств объекта. По существу, такие свойства являются наборами и
к ним применима описанная выше технология работы с наборами. Свойство
style объекта — одно из таких свойств. Оно содержит все свойства каскад-
ных таблиц стилей, применимых к соответствующему элементу, и которые
можно задавать в параметре STYLE тэга элемента. В приведенном выше
фрагменте это свойство объекта, представляющего абзац, использовалось
для изменения цвета текста.
Некоторые свойства не соответствуют никаким параметрам тэгов. Эти свой-
ства предоставляют дополнительную информацию об элементе и обычно
являются свойствами только для чтения. С одним из подобных свойств мы
уже знакомы. Свойство tagName не соответствует никакому параметру и пре-
доставляет информацию о типе тэга элемента. Другим примером является
свойство sourceindex, значением которого является индекс элемента в набо-
ре all.
Методы getAttribute(), setAttribute() И removeAttribute() ПОЗВОЛЯЮТ, СО-
ответственно, получить и установить значение параметра элемента, не об-
ращаясь к его свойствам, или удалить параметр. Для методов getAttribute о
и removeAttribute о параметром является строка, задающая имя параметра,
в метод setAttribute о кроме имени параметра необходимо передать и его
значение. Следующий фрагмент сценария использует все три метода для
получения и установки значения параметра ALIGN объекта pi, а также для
удаления этого параметра из тэга элемента, соответствующего объекту pi:
alert("Значение параметра ALIGN равно: " + [Link]('align'));
[Link]('align','right')
alert("Значение параметра ALIGN равно: " + [Link]('align'));
[Link]('align')
alert("Значение параметра ALIGN равно: " + [Link]('align'});

Если объект pi, например, будет соответствовать абзацу с параметром ALIGN,

равным center, то при выполнении приведенного фрагмента сначала ото-
бразится диалоговое окно, в котором значением параметра ALIGN будет
center. В следующем диалоговом окне это значение изменится на right, a
в последнем — значение будет не определено (будет выведена пустая строка).
В соответствии с устанавливаемыми значениями параметра ALIGN будет из-
меняться и отображение абзаца в окне браузера. При удалении этого пара-
метра абзац будет отображаться с использованием значения по умолчанию
(left).
496 Часть II. Интерактивные Web-документы

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

Эти три метода не чувствительны к регистру, т. е. для них неважно, строч-

ными, прописными или и теми, и другими заданы имя параметра и его зна-
чение. Если для установки значения параметра или для задания его имени
важен регистр, то дополнительный, последний параметр, принимающий
значения true или false, определяет чувствительность этих методов к регистру.
Иногда возникает необходимость показать в окне браузера часть документа,
расположенного достаточно далеко от того места страницы, где в данный
момент находится читатель. Конечно, можно поместить на страницу ссылку,
по которой читатель и сможет осуществить переход. А если подобную про-
цедуру необходимо произвести из сценария? В этом случае следует восполь-
зоваться методом scrollintoViewO элемента, который должен быть отобра-
жен в окне браузера. Метод прокручивает содержимое окна браузера, чтобы
указанный элемент оказался вверху или внизу окна. Например, в следую-
щем сценарии осуществляется быстрый переход к третьему заголовку пер-
вого уровня документа:
var myHl=[Link]['Hi'];
if( [Link] > 0) myHl[2].scrollIntoView(true);

Объектная модель позволяет осуществлять доступ и изменять не только зна-

чения параметров элементов, но и их содержимое. Это возможно с помощью
Следующих СВОЙСТВ объектов: 1ппегНТМЬ, innerText, outerHTML И outerText.
Свойства с префиксом inner применяются к элементам-контейнерам
(например, DIV, SPAN и Hi) и заменяют содержимое HTML-элементов внутри
контейнера, а свойства с префиксом outer применяются ко всем HTML-
элементам в теле документа и могут использоваться для замены всего эле-
мента и его содержимого.
Свойства с суффиксом Text работают с текстовым содержимым HTML-
элемента без ограничивающих тэгов, тогда как свойства с суффиксом HTML
оперируют с представлением элемента на языке HTML. Например, оператор
contents = [Link]
присвоит переменной строку, являющуюся текстом абзаца pi. Если абзац
в тексте документа определен следующим образом:
<Р NAME=pl ID=pl>
В блоковый элемент, каким является абзац,
можно добавлять <В ID='bl'Устраиваемые элементы</В>
Глава 10. Динамический HTML 497

и даже другие блоковые элементы <IMG ID='imgl' SRC="[Link]">.

Как только что включенное изображение.

то в результате выполнения предыдущего оператора переменная contents

будет содержать строку:
"В блоковый элемент, каким является абзац,
можно добавлять встраиваемые элементы и
даже другие блоковые элементы .
Как только что включенное изображение."

Если в операторе присваивания заменить свойство outerText на outerHTML,

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

с Примечание
Ознакомиться с полным описанием всех свойств и методов объектной модели
DHTML можно на сервере разработчика фирмы Microsoft по адресу:
[Link]

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

Цикл жизни события

Любое событие имеет свой "жизненный" цикл: от момента возникновения
действия или условия, являющегося причиной генерирования события, до
выполнения последнего оператора обработчика события или финальных
действий браузера. Цикл жизни любого типичного события включает сле-
дующие этапы:
498 Часть II. Интерактивные Web-документы

1. Происходит действие пользователя или возникает условие, которое воз-

буждает событие.
2. Тотчас же корректируется объект event, чтобы отразить параметры воз-
никшего события.
3. Событие генерируется — это и есть истинное сообщение о возникшем
событии.
4. Вызывается обработчик событий элемента-источника события, который
выполняет определенные программистом действия и завершает свою ра-
боту.
5. Событие передается вверх по иерархии объектов (bubble up) и вызывается
обработчик события объекта, являющегося родителем объекта-источника
события. Это "всплытие" вверх по иерархии объектов продолжается, пока
не будет достигнут самый верхний объект иерархии — объект window, или
обработчик события какого-либо объекта не аннулирует событие.
6. Выполняются заключительные действия по умолчанию, если таковые
определены, но при условии, что событие не было аннулировано.
Если для элемента-источника события не определен обработчик событий, то
в иерархии объектов определяется его родитель, и обработчик событий ро-
дителя выполняет соответствующие действия по обработке события. И так
происходит до корневого объекта иерархии.
Какие удобства предоставляет подобная технология обработки событий?
Прежде всего, нет необходимости для каждого элемента писать процедуру
обработки события и присоединять ее к нему. Достаточно написать одну
процедуру для элемента-родителя, и она будет обрабатывать события, воз-
буждаемые всеми порожденными родителем элементами. Это позволяет
централизованно обрабатывать наиболее часто возникающие события, и,
как результат, требует меньше усилий и времени для написания и поддерж-
ки кода процедур обработки событий.
Пример 10.3 демонстрирует технику передачи события вверх по иерархии
объектов. В нем щелчки кнопкой мыши на всех элементах страницы обра-
батываются централизованно обработчиком события элемента <BODY>, кото-
рый является родителем всех элементов страницы.

<HTML>
<НЕАОХТ1ТЬЕ>Всплывание события</Т1ТЬЕ>
</HEAD>
<BODY ID='body' onclick="alert('Не надо щелкать!');">
<Н1 10='пеаа1'>Привет!</Н1>
<Р Ю='рагад1'>Это простой пример, <В ID='boldl'>ну очень простой</В>
пример.
Глава 10. Динамический HTML 499

</BODY>
</HTML>

Щелчок на любом элементе документа приводит к отображению диало-

гового окна предупреждений из процедуры обработки события click объек-
та body.
Если к какому-нибудь элементу добавить собственный обработчик событий,
то будут выполнены две процедуры: самого элемента и элемента родителя.
Если элемент расположен достаточно глубоко в иерархии объектов, и каж-
дый элемент, расположенный выше него, имеет также собственный обра-
ботчик событий, то неужели событие будет обрабатываться всеми обработ-
чиками? Да, именно это и произойдет, если только какой-то обработчик не
аннулирует "всплывающее" вверх по иерархии событие. Объект event имеет
свойство canceiBubbie, которое позволяет аннулировать событие, если уста-
новить его значение равным true. После этого соответствующее событие не
существует, и обработчики этого события для всех, расположенных выше
элементов, не вызываются. В примере 10.4 обработчик щелчка мыши выде-
ленного элемента <в> аннулирует данное событие. Это приводит к тому, что
при щелчке на нем никакого диалогового окна с сообщением не отображается.

<HTML>
<НЕАО><Т1ТЬЕ>Аннулирование события</Т1ТЬЕ>
</HEAD>
<BODY ID='body' onclick="alert('Не надо щелкать!');">
<Н1 Ю='пеас11'>Привет!</Н1>
<Р ID='paragl'>Это простой пример,
<В ID='boldl' onclick="[Link]=true" >ну очень про-
стой</В> пример.
</BODY>
</HTML>

Аннулирование события достаточно частое действие в сценариях обработ-

ки событий, и будет интенсивно использоваться далее в примерах раздела
"Динамический HTML e Internet Explorer".
Присоединение обработчика события к элементу страницы осуществляется
установкой значения параметра обработки события тэга элемента или соот-
ветствующего свойства объекта. О том, как это можно сделать, подробно
рассказывалось в главе 9 в разделе "Язык создания сценариев JavaScript".
Каждый элемент HTML может быть источником многих событий. В табл. 10.7
представлены события, которые могут генерировать и обрабатывать все эле-
менты страницы, и соответствующие им параметры обработки событий.
500 Часть //. Интерактивные Web-документы

Таблица 10.7. Общие события всех HTML-элементов

Параметр Условие возникновения

onmouseover Курсор мыши перемещается в область элемента (т. е. находится

внутри элемента)
onmouseout Курсор мыши выходит за пределы элемента
onmousedown Нажата любая кнопка мыши, когда курсор находится в пределах
элемента
onmouseup Отпущена ранее нажатая любая кнопка мыши, когда курсор нахо-
дится в пределах элемента
onmousemove Курсор мыши перемещается в пределах области элемента
onclick Щелчок левой кнопкой мыши на элементе
ondblclick Двойной щелчок левой кнопкой мыши на элементе
onkeypress Нажата и отпущена клавиша клавиатуры. Если клавиша удержива-
ется, то генерируется серия события Keypress
onkeydown Нажата клавиша клавиатуры. Генерируется только одно событие,
даже если клавиша удерживается
onkeyup Отпущена ранее нажатая клавиша клавиатуры

Объект event
Как уже отмечалось, объект event создается автоматически всякий раз, когда
возникает какое-либо событие. Этот объект не зависит от используемого
языка создания сценария, и его использование в процедурах обработки со-
бытий для получения информации о сгенерированном событии является
предпочтительным способом получения достоверной информации о событии.
Каждое событие характеризуется параметрами, которые передаются в сцена-
рий через свойства объекта event. Существуют параметры, общие для всех
типов событий (например, координаты курсора мыши в окне браузера) и
специфические для определенного события (например, код нажатой клави-
ши для событий клавиатуры). Свойства объекта event, как и сам он, явля-
ются динамическими и создаются в зависимости от типа произошедшего
события. При описании свойства, если не оговорено противное, подразуме-
вается, что оно является общим для всех типов событий.
Свойство srcEiement определяет элемент документа, явившийся источником
события. Оно может быть полезным при централизованной обработке собы-
тий элементом, расположенным выше в иерархии объектов документа ис-
тинного "виновника" события, и, в зависимости от типа элемента, програм-
ма-обработчик может предпринять соответствующие действия.
Глава 10. Динамический HTML 501

Важное свойство canceiBubbie, аннулирующее событие и прекращающее

передачу его на обработку вверх по иерархии объектов, рассмотрено не-
много ранее в этом же разделе.
Свойство returnValue является булевым и возвращает значение true или
false после завершения выполнения процедуры обработки события. При
передаче события вверх по иерархии значение этого свойства можно ис-
пользовать для альтернативной обработки события. Кроме того, если в об-
работчике события элемента, для которого определены действия по умолча-
нию, это свойство устанавливается равным false, то это отменяет выполне-
ние действий по умолчанию. Одним из таких элементов является тэг <А>,
действием по умолчанию которого является переход по ссылке, задаваемой
параметром HREF.
По значениям свойств aitKey, ctriKey и shiftKey элемента-источника собы-
тия определяется, была ли нажата, соответственно, клавиша <Alt>, <Ctrl>
или <Shift> в момент возникновения события. Значение свойства равно
true, если клавиша была нажата, и false — в противном случае.
Следующий фрагмент сценария отменяет переход по любой связи в доку-
менте, если при щелчке на ней была нажата клавиша < Shift >:
[Link]=click;
function click() {
if(([Link]=='A'; && [Link]) {
[Link]=false;

Предупреждение
Установка значения свойства returnValue равным false не аннулирует собы-
тие. Оно продолжает "всплывать" по иерархии объектов. Отменяется только
действия по умолчанию элемента, являющегося источником события.

Для событий мыши определены свойства, значениями которых являются

координаты положения курсора в момент возникновения события.
Свойства clientx и clientY представляют координаты относительно области
отображения браузера, offsetx и offsetY являются координатами относи-
тельно элемента-контейнера, в котором расположен элемент-источник со-
бытия, screenx и screenY — абсолютные координаты курсора мыши, т. е.
координаты экрана монитора. Все значения этих свойств определены в пик-
селах.
Свойства х и у определяют положение курсора мыши по горизонтали и вер-
тикали относительно позиционированного контейнера, содержащего эле-
мент-источник события. Если ни один контейнер не позиционирован, то
положение определяется относительно тела документа <BODY>.
502 Часть II. Интерактивные Web-документы

Полезное свойство событий мыши button определяет нажатую кнопку мы-

ши. Его возможные значения представлены в табл. 10.8.

Таблица 10.8. Значения свойства button

Значение Нажаты кнопки мыши
0 Ни одна
1 Левая
2 Правая
3 Одновременно левая и правая
4 Средняя
5 Одновременно левая и средняя
6 Одновременно правая и средняя
7 Все три одновременно

Свойства toElement И fromElement ПрИМСНИМЫ ТОЛЬКО К событиям

onmouseover и onmouseout. Они определяют, от какого элемента и к какому
перемещался курсор мыши, и полезны при анализе этих действий для вло-
женных элементов.
Некоторые элементы на HTML-странице могут получить фокус. В каждый
момент времени только один элемент может обладать фокусом, и ввод дан-
ных с клавиатуры направляется именно этому элементу. Наиболее часто ис-
пользуемыми элементами с фокусом являются <виттом> и некоторые типы
элемента <INPUT>. Для таких элементов при получении ими фокуса генери-
руется событие onfocus, а при потере фокуса — событие onblur. Элемент
получает фокус при щелчке на нем кнопкой мыши или перемещением на
этот элемент с помощью клавиш клавиатуры.
При выделении на странице части документа возникают события, регистри-
рующие эти действия. Событие onselectstart генерируется, когда пользова-
тель нажимает кнопку мыши при расположении курсора в области докумен-
та. Если после этого нажатия он перемещает курсор мыши по документу (не
отпуская нажатую кнопку), то инициируется событие onseiect, регистри-
рующее выделение части документа. У этого события есть действия по
умолчанию: визуально отметить выделенную часть документа изменением ее
фона. Это действие можно отменить, установив значение свойства returnvaiue
события равным false в процедуре обработки этого события.
Для самого документа существуют два события, отмечающие некоторые ста-
дии его обработки браузером. На самом деле эти события относятся к объ-
екту window, находящемуся на вершине иерархии объектов, но обработчики
Глава 10. Динамический HTML 503

этих событий задаются в тэге <BODY> документа. Событие onload происходит

сразу же после того, как были загружены в окно браузера все элементы
страницы. Его можно использовать для выполнения действий при первона-
чальной или повторной загрузке страницы. Событие unload генерируется до
начала выгрузки документа, когда пользователь желает загрузить другой до-
кумент, и в процедуре обработки этого события можно, например, напом-
нить пользователю о выполнении некоторых действий перед окончательной
выгрузкой страницы.
Существует еще большой набор полезных и важных событий в объектной
модели DHTML, с которыми можно познакомиться на сервере разработчика
фирмы Microsoft по адресу [Link]

Объектная модель документа

в MS Internet Explorer 5.0
Объектная модель, реализованная в Internet Explorer 5.0, полностью соответ-
ствует рекомендациям REC-DOM-Level-1-19981001 Консорциума W3. Эта
модель основана на объектной модели DHTML, рассмотренной в предыду-
щем разделе, и включает дополнительные возможности динамического управ-
ления содержимым документов HTML.
В данном разделе основное внимание будет уделено привнесенным в объ-
ектную модель DHTML новшествам, дополнениям и изменениям.
Объектная модель документа предоставляет программисту большие удобства
при работе с иерархической структурой объектов документа. Она позволяет:
П Перемещать часть структуры документа в другое место, не разрушая и не
создавая ее заново.
П Создавать новые элементы и присоединять их к структуре документа
в любом ее месте.
П Организовывать и манипулировать новыми или существующими ветвями
структуры фрагмента документа до помещения объектов в структурное
дерево документа.
Объектная модель документа представляется узлами (node), расположенны-
ми в виде иерархической структуры дерева. Концепция объектной модели
не привязана ни к какому конкретному представлению документа (HTML,
XML, SGML). Она всего лишь описывает логическую организацию доку-
мента. Ее реализация в конкретной системе представления документов ставит
в соответствие узлам реальные элементы. В объектной модели документа,
реализованной для HTML, в узлах могут находиться любые HTML-эле-
менты или текст, называемые узловыми элементами.
К узлам, и даже целым ветвям, можно получить доступ из сценария
JavaScript, встроенного в документ. Концепция объектной модели документа
504 Часть II. Интерактивные Web-документы

позволяет изменить узел или целую ветвь структуры, не разрушая ее. Это
приводит к более простому и ясному коду по сравнению с кодом, реали-
зующим изменение структуры документа в объектной модели DHTML.
Каждый узловой элемент порождается другим узловым элементом и может
сам выступить родителем других элементов (правда, не все элементы могут
быть родителями других элементов). Рассмотрим на примере таблицы
HTML, как в объектной модели документа можно быстро изменить часть
документа, не затрагивая документ в целом.
Пусть в каком-либо документе задана таблица из трех рядов:
<TABLE ID="Table">
<TR>
<ТО>Ячейка 1 первого ряда</ТО><ТО>Ячейка 2 первого ряда</ТО>
</TR>
<TR>
<ТО>Ячейка 1 второго ряда</ТОХТО>Ячейка 2 второго ряда</ТО>
</TR>
<TR STYLE="background-color: tCFCFCF; ">
<ТО>Этот ряд перемещаем</ТОхто>Этот ряд перемещаем</ТП>
</TR>
</TABLE>

Необходимо переместить последний ряд на место предшествующего. Для

начала приведем текст сценария, ориентированный на объектную модель
DHTML:
function fnclnterchange (row) {
var rowMove=row. rowlndex;
var rowMove_Celll=[Link] [rowMove] . cells [0] .innerHTML;
var rowMove_Cel!2=Table. rows [rowMove] . cells [1] .innerHTML;
Table . deleteRow ( rowMove ) ;
rowMove — ;
Table. insertRow (rowMove } ;
Table . rows (rowMove) . style . backgroundColor="#CFCFCF" ;
Table. rows (rowMove) . insertCell (0) ;
Table. rows (rowMove) . insertCell (1) ;
Table. rows (rowMove) .cells[0] .innerHTML+= rowMove_Celll;
Table. rows (rowMove) . cells [1] . innerHTML+= rowMove_Cel!2;

В переменной rowMove сохраняется индекс перемещаемого ряда, передавае-

мого в качестве параметра. Переменные rowMove_cein и rowMove_cein хра-
нят содержимое двух ячеек перемещаемого ряда. После этих подготовитель-
ных действий ряд удаляется методом rowDeiete ( ) объекта Table, и в таблицу
вставляется новый ряд перед рядом, предшествующим удаленному. Послед-
Глава 10. Динамический HTML 505

ние операторы функции добавляют две ячейки в новый ряд и помещают в

них содержимое соответствующих ячеек удаленного ряда.
Как видим, в объектной модели DHTML пришлось видоизменять структуру
документа: удалять и добавлять ряды и ячейки. Иначе обстоит дело в объ-
ектной модели документа. Методом swapNode ( ) можно просто поменять мес-
тами узлы-элементы в структуре документа:
function fnclnterchange (row) (
row. swapNode ([Link]) ;

Параметром этого метода является элемент, с которым необходимо поме-

нять местами текущий элемент. Свойство previoussibiing определяет бли-
жайшего предыдущего брата элемента. На сколько код стал компактнее и
понятнее по сравнению с кодом объектной модели DHTML!

с Примечание
Этот пример будет выполняться только в Internet Explorer 5.0 или другом брау-
зере, поддерживающим объектную модель документа (DOM).

Добавив в обработчик событий onclick какого-либо ряда таблицы вызов

функции fnclnterchange ( ) , можно простым щелчком на соответствующей
строке таблицы переместить ее на одну строку выше.
При реализации объектной модели документов в IE5.0 в существовавшую
в IE4.0 объектную модель DHTML были добавлены свойства, методы и на-
боры, позволяющие с максимальным удобством и полнотой использовать
все преимущества, предоставляемые этой объектной моделью.
Если все HTML-элементы документа имеют параметр ID, то разработчику
документа достаточно просто в сценариях определять объекты таких элемен-
тов (значение параметра ID элемента является символическим именем соот-
ветствующего ему объекта в языках сценариев). Но идентифицировать все
элементы страницы дело достаточно утомительное, поэтому в объектную
модель документа включены набор chiidNodes и свойства parentNode,
nextSibling, previousSabling, firstChild И lastChild объектов, ПОЗВОЛЯЮ-
щие легко перемещаться по древовидной иерархии объектов и идентифици-
ровать необходимые для работы объекты.
На примере структуры, создаваемой вложенными списками, продемонстри-
руем использование перечисленных выше свойств:
<UL ID="Parent">
<LI ID="Nodel">ysen 1
<LI 10="МоЗе2">Узел 2
<UL>
<LI ID="Childl">IIOTOMOK 1
506 Часть II. Интерактивные Web-документы

<LI ID="Child2">IloTOMOK 2
<LI ID="Child3">noTOMOK 3
</UL>
<LI ID="NodeЗ">Узeл 3
</UL>

В объектной модели документов этот фрагмент будет представлен в виде

структуры с отношениями "родства", показанной на рис. 10.16.

ж 1 1 +
Предыдущий брат Последующий брат

даж г~~~71Д—.
Рис. 10.16. Структура
вложенных списков
с родственными
Узлы-потомки отношениями

Элементы с именами Model, Node2 и Nodes являются узлами-потомками эле-

мента-родителя с именем Parent, который в объектной модели также пред-
ставляется узлом. В наборе chiidNodes объекта Parent хранятся ссылки на
Всех ПОТОМКОВ ЭТОГО Элемента (Nodel, Node2 И NodeS). СВОЙСТВО parentNode
объектов-потомков возвращает имя родителя объекта, поэтому значением
ЭТОГО свойства объектов Model, Node2 И NodeS будет Parent. Объекты Nodel,
Node2 и Nodes являются ближайшими родственниками одного поколения и
открываются друг другу с помощью свойств previoussibling (предыдущий
ближайший родственник) и nextsibiing (следующий ближайший родствен-
ник). Набор узла-объекта Node2 покажет всех его потомков (chiidi, Chiid2
И Child3).
Объектная модель DHTML также раскрывает все родственные отношения,
но для некоторых отношений требуется небольшое программирование, и
она использует собственные свойства элементов, отличные от свойств объ-
ектной модели документа.
Определить родителя объекта в объектной модели DHTML можно с помощью
свойства parentElement, которое соответствует свойству parentNode узла объ-
ектной модели документа.
Предыдущего ближайшего родственника так легко, как в объектной модели
документа, в модели DHTML не найти. Необходимо выполнить ряд действий:
function fnGetSibling(Obj){
var Parent=[Link];
Глава 10. Динамический HTML 507

var iLength=[Link];
for(var i=0;i < iLength;i++){
if([Link][i]== Obj){
return [Link][i-1];
break;

Здесь приходится организовывать цикл по набору children объекта-роди-

теля, пока не встретится исходный объект, для которого ищется ближайший
родственник.
Для установки или получения содержимого объекта в объектной модели до-
кумента используется свойство nodevalue, тогда как в модели DHTML сле-
дует применять СВОЙСТВа innerHTML И innerText:
[Link][0].nodeValue="HoBoe содержимое"; // Объектная модель
[Link]="HoBoe содержимое"; // Модель DHTML

Отметим отличие этих двух моделей при доступе к текстовому содержимому

объектов. В объектной модели документа текст является объектом textNode,
порождаемым элементом, который содержит этот текст. Поэтому доступ
к текстовому содержимому объекта осуществляется через набор chiidNodes.
В модели DHTML добавление элементов в структуру документа связано
с изменением значений свойств innerHTML и outerHTML объектов-контейнеров,
или применением внешних для объекта методов, например, insertRow и
insertceii для элемента TABLE. В объектной модели документа можно соз-
дать любой HTML-элемент, задать значения его параметров, а затем встро-
ить в существующую иерархию документа методами createEiemento и
createTextNode () объекта document.

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

Примечание
В объектной модели DHTML можно использовать свойство createEiemento,
но его действие ограничено созданием только элементов AREA, IMAGE и OPTION.

Если не надо задавать параметры вновь создаваемого элемента или исполь-

зуются их значения по умолчанию, то для создания нового элемента доста-
точно только его HTML-имя:
var newParagraph = document . createElement (' P 1 );
508 Часть II. Интерактивные Web-документы

При создании новых объектов и встраивания их в существующую структуру

документа следует формировать объекты с правильной структурой, соответ-
ствующей их представлениям в объектной модели документа. Не соблюде-
ние этих правил может привести к неправильно сформированному докумен-
ту и, в конечном итоге, к его неправильному отображению браузером.
Любая таблица объектной модели документа обязательно состоит, по край-
ней мере, из двух узлов: TABLE и TBODY. Поэтому при динамическом создании
таблиц не следует забывать об этом обстоятельстве:
var Table=[Link]('TABLE');
var TBody=[Link]('TBODY');
var Row=[Link]('TR');
var Celll=[Link]('TD');
var Cell2=[Link]();
[Link](Celll);
[Link](Cell2);
[Link](TBody);
[Link](Row);
[Link](Table);
[Link] rHTML='Ячейка 1';
[Link]='Ячейка 2';

Процедура создания таблицы, собственно говоря, повторяет задание тэгов

в коде HTML-документа (не пропуская тэгов, вставляемых по умолчанию).
Обратим внимание на метод appendchiid(элемент), который применим
к большинству элементов объектной модели. Он добавляет подчиненный
элемент к объекту, для которого вызывается, создавая, таким образом, древо-
видную структуру. В нашем примере этим методом в строку таблицы были
добавлены две ячейки, в тело таблицы добавлена строка, а само тело было
добавлено к объекту таблицы Table.
Для создания объекта, соответствующего второй ячейке таблицы, использо-
ван метод cloneNode о, который копирует объект, для которого он применя-
ется, его параметры и набор chiidNodes, если в качестве параметра задано
значение true. Если параметр метода не задан, то используется значение по
умолчанию false, при котором набор ссылок на порождаемые объекты не
копируется.
Для включения вновь созданной структуры в документ ее необходимо доба-
вить К Объекту body методом appendChildO .
Для манипуляции узлами в объектной модели используются методы
removeNode(), replaceNode() И swapNode().
Метод removeNode () удаляет объект, для которого он вызван, из структуры
документа. Его единственный параметр может принимать булевы значения
true или false. Значение true предписывает удалить и все порожденные
Глава 10. Динамический HTML 509

данным объектом объекты, тогда как значение false (умалчиваемое) удаляет

только сам объект, оставляя в документе все подчиненные ему объекты.
Замену одного объекта другим можно осуществить методом repiaceNode(),
вызываемым для замещаемого объекта. Замещающий объект передается в
качестве параметра метода. При замене объекта замещаемый объект удаля-
ется из структуры документа.
Поменять местами два объекта в иерархии документа позволяет метод
swapNode(). Меняются местами объект, метод которого вызывается, и объ-
ект, определяемый параметром метода.

( Примечание ^
Изменение структуры документа требует внимательности и осторожности, так
как может привести к неправильной модели документа. Например, удаление из
списка верхнего объекта, соответствующего тэгу <оь>, приведет к ошибке при
интерпретации оставшихся объектов <ы>.

В данном разделе мы кратко охарактеризовали объектную модель докумен-

та, реализованную в браузере Internet Explorer 5.0, и совместимую с моделью
DHTML. Подробнее ознакомиться с объектной моделью документа можно
на сервере разработчика фирмы Microsoft по адресу [Link]
/workshop/author/.

Динамический HTML в Internet Explorer

Напомним, что под динамическим HTML понимается технология, позво-
ляющая изменять содержимое отображаемой в окне браузера HTML-стра-
ницы без ее перезагрузки. Эта технология использует каскадные таблицы
стилей, язык сценариев (например, JavaScript) и обычный HTML, которые
объединяются программным интерфейсом — объектной моделью документа
(DOM).
Чтобы пользователь мог видеть все динамические эффекты, предусмотрен-
ные разработчиком Web-документа, его браузер должен поддерживать все
перечисленные компоненты динамического HTML. В противном случае он
увидит простую статическую страницу.
Если реализация каскадных таблиц стилей в двух наиболее популярных
браузерах — Microsoft Internet Explorer и Netscape Navigator — соответствует
рекомендациям Консорциума W3, то относительно объектной модели доку-
мента этого сказать нельзя. Объектная модель браузера Internet Explorer со-
гласуется с рекомендациями Консорциума, тогда как в Netscape Navigator
реализована собственная модель документа, выполняющая такие же функ-
ции, что рекомендованная Консорциумом модель, но немного отличающая-
ся от нее. Поэтому динамические эффекты, реализованные для одного брау-
510 Часть II. Интерактивные Web-документы

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

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

Примечание
Реализации динамического HTML в Netscape Navigator посвящен следующий
раздел данной главы.

Динамическое изменение документа

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

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

Раскрывающийся список
Создать простое меню можно на основе HTML-элемента <иь> и свойства
display каскадных таблиц стилей, которое позволяет скрывать элементы
страницы. Поместим на страницу вложенный список:
<UL ID="idList" NAME="idList">
<Ы Т1ТЬЕ="Щелкни и раскрой"
STYLE="cursor: hand; "> Один
<UL ID="idListOneA" NAME="idListOneA"
STYLE="display: none; cursor: default; ">
Глава 10. Динамический HTML 511

<LI Т1ТЪЕ="Файл A">A

<LI Т1ТЬЕ="Файл Б">Б
</UL>
<LI Т1ТЬЕ="Нераскрывающийся список"> Два
<LI Т1ТЪЕ="Нераскрывающийся список"> Три
</UL>

Список idList составлен из трех элементов <LI> и вложенного списка

idListOneA, который не отображается (его свойство isplay равно попе) и бу-
дет использован для создания раскрывающегося списка при щелчке на пер-
вом элементе списка. Строка, заданная в параметре TITLE, отображается в
виде всплывающей подсказки при расположении курсора мыши над эле-
ментом. Этот фрагмент отображается как простой статический список из
трех элементов (вложенный список не отображается) с маркерами в виде
закрашенных кружков.
Чтобы сделать список раскрывающимся, необходимо добавить к первому
элементу внешнего списка и к элементам внутреннего списка обработчики
событий и определить в них необходимые действия.
Прежде всего, запрограммируем изменение цвета этих элементов при рас-
положении над ними курсора мыши, чтобы пользователь обратил внимание
на их динамичность. Для этого добавим в тэги элементов параметры обра-
ботчиков событий:
ONMOUSEOVER="flashMe(this, 'red')"
ONMOUSEOUT="flashMe(this,'black')"

В обработчиках событий вызывается функция flashMe ( } , изменяющая цвет

элемента. Имя элемента (параметр this) и цвет передаются в качестве пара-
метров функции:
function flashMe (eSrc, sColor) {
eSrc . style . color=sColor
idListOneA. style . color="black"

Обратим внимание на оператор установки черного цвета списка

Если его не будет, то при раскрытии первого элемента внешнего списка
цвет элементов вложенного списка idListOneA будет таким же, как и цвет
элемента-родителя — красным (свойство color наследуется потомками).
Теперь остается добавить обработчик щелчка кнопки мыши в первый эле-
мент списка idList, выполняющий функцию отображения вложенного
списка idListOneA, если он скрыт, и скрывающий его, если он видим:
ONCLICK="toggleListOneA() "
Исходный текст функции toggieListoneAO приведен ниже и не требует
комментариев:
512 Часть II. Интерактивные Web-документы

function toggleListOneAO {
eTarget=idListOneA
eTarget. style. display == "none" ? eTarget. style. display="block" :
eTarget . style . display="none"
eTarget. display == "none" ? eTarget .display="block":
eTarget .display="none"

Итак, у нас есть все функции, реализующие раскрывающийся список. Од-

нако мы не учли одного обстоятельства. Если пользователь щелкнет на лю-
бом из элементов раскрывшегося списка, то список закроется. Вспомним
"подъем" события по иерархии объектов. Хотя в элементе раскрывающегося
списка нет обработчика события ONCLICK, в любом случае оно передается
вверх по иерархии и обрабатывается всеми встречающимися обработчиками
этого события. Поэтому процедура обработки события ONCLICK внешнего
списка закроет внутренний (установит значение его свойства display рав-
ным попе). Чтобы этого не происходило, следует в обработчиках событий
элементов внутреннего списка отменить передачу события на обработку
вверх по иерархии объектов:
ONCLICK="window. event . cancelBubble=true"

Окончательно исходный текст нашего раскрывающегося списка выглядит

так:
г;***:*: ......................................v _ ........... ........... _ ...... ,w .................................

<HEAD>
<SCRIPT LANGUAGE= ' JavaScript '>
<! —
function toggleListOneAO (
eTarget=idListOneA
eTarget. style. display == "none" ? eTarget .style. display="block" :
eTarget . style . display="none"
eTarget. display == "none" ? eTarget .display="block" :
eTarget . display="none "
}
function flashMe(eSrc, sColor) {
eSrc . style . color=sColor
idListOneA. style . color="black"
}
II— >
</SCRIPT>
<STYLE TYPE="text/css"><! —
HI {background-color: lightgrey;
font-family: Arial;
Глава 10. Динамический HTML 513

font-size: llpt;
color: indianred;
}
#idListOne {
list-style-image:url([Link]);
color: black;
list-style-position:inside;
}
—></STYLE>
</HEAD>
<H1> Пример 2.4: Раскрывающийся список </Н1>
<UL ID="idList" NAME="idList">
<LI ONCLICK="toggleListOneA()"
ONMOUSEOVER="flashMe(this,'red')"
ONMOUSEOUT="flashMe(this,'black')"
Т1ТЪЕ="Щелкни и раскрой"
STYLE="cursor: hand;"> Один
<UL ID="idListOneA"
NAME="idListOneA"
STYLE="display:none; cursor: default;">
<LI Т1ТЬЕ="Файл A"
ONCLICK="[Link]=true'
ONMOUSEOVER="flashMe(this,'red')"
ONMOUSEOUT="flashMe(this,'black')">A
<LI Т1ТЬЕ="Файл Б"
ONCLICK="[Link]=true"
ONMOUSEOVER="flashMe(this,'red')"
ONMOUSEOUT="flashMe(this,'black')">B
</UL>
<LI Т1ТЬЕ="Нераскрывающийся список"> Два
<LI Т1ТЪЕ="Нераскрывающийся список"> Три
</UL>

Графический файл [Link] в свойстве каскадных таблиц стилей tem-styie-

image задает изображение маркера в списках. Свойство cursor определяет
тип курсора мыши, когда он располагается над элементом. В нашем приме-
ре курсор будет меняться на изображение руки (значение свойства hand).
На рис. 10.17 показаны результаты отображения раскрывающегося списка:
в закрытом (а) и раскрытом состояниях (б).
Раскрывающийся список в Web-документах можно использовать в качестве
простого меню, если в процедурах событий ONCLICK его элементов задать
отображение каких-либо документов в отдельных окнах или во фрейме
страницы.

17 Зак. 944
514 Часть II. Интерактивные Web-документы

I - Пр&шер'Д<4<:^ <&&;;€1Ш&& |
'Щ:: :
•:

U Один LJ Один
[ •! Два [Щелкни и раскрой]
:
1 ^ А ^
!•] Три
Г] Два [файл Б у

1 LJ Три
' JJ

Рис. 10.17. Раскрывающийся список

Аналогичную технику можно применить для динамического отображения

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

Движущийся элемент
Положение абсолютно позиционированного элемента на странице легко
изменить, установив новые значения его свойств top и left из встроенного
сценария. Если организовать изменение значений этих свойств во времени,
то элемент будет двигаться на странице по заданной траектории. Подобное
поведение раздела (элемент <DIV>) реализовано в примере Ю.6.

Ifекста

<HTML>
<SCRIPT LANGUAGE="JavaScript">
<! —
var action, coef_px=-l, coef_pt=l, p_move=5;
function startMove() {
[Link] = parselnt([Link])/3+200;
[Link] = 0;
action = [Link]("move()",100);
)
function move() {
px = parselnt([Link]);
px = px + coef_px * p_move;
[Link] = px;
if (px <= parselnt([Link])/3-200 ||
px >= parselnt([Link])/3+200) {
coef_px = -coef_px
Глава 10. Динамический HTML 515
pt = parseint (Banner. style. top)
pt = pt + coef_pt * p_move;
Banner. style. top = pt;
if (pt <= 0 | | pt >= 200} {
coef_pt = -coef_pt

</SCRIPT>
<STYLE TYPE="text/css"><! —
HI {background-color: lightgrey;
font-family: Arial;
font-size: llpt;
color: indianred;
}
— ></STYLE>
</HEAD>
<BODY onload="startMove() ">
<H1> Пример 2.5: Изменение положения элемента </Н1>
<Р> Динамический HTML позволяет программно менять положение
элемента ! </Р>
<DIV ID="Banner" STYLE="position: absolute; width: 200px;
background-color: lightsteelblue; ">
Добро пожаловать на страницу динамического HTML!</DIV>
</BODY>
</HTML>

В теле документа определяется абсолютно позиционированный раздел с

именем Banner. Его ширина определена в 200 пикселов. При загрузке доку-
мента вызывается функция startMove ( ) , в которой устанавливаются началь-
ные значения свойств top и left раздела Banner. В этой функции методом
setinterval о объекта window с интервалом в 100 миллисекунд вызывается
функция move ( ) , которая и реализует перемещение раздела во времени.
Каждый раз при вызове этой функции положение раздела меняется: значе-
ния его свойств top и left увеличиваются или уменьшаются на p_move пик-
селов в зависимости от достижения значениями этих свойств своих нижних
или верхних границ. Таким образом, при каждом вызове функции move ( )
изменяется положение раздела, что внешне представляется как его движе-
ние по странице документа.
Обратим внимание на то, что значения свойств каскадных таблиц стилей
необходимо преобразовывать в числовое представление функцией parseint ( ) ,
так как они хранятся в символьном виде. На рис. 10.18, а, б показаны два
различных момента отображения документа примера 10.6.
516 Часть II. Интерактивные Web-документы

TI
Динамический HTML позволяет программно ДинамичесщИЯЖёЪ профаммно
менять положение элемента! менять полЦшЬ!

м.
Рис. 10.18. Движущийся раздел документа

Эффекты перемещения частей текста или графических изображений можно

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

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

<HTML>
<SCRIPT>
function findme (cValue) {
if (cValue == null | | cValue = ")
{ alert ("Задайте слова для поиска"); return; }
var rng = document .[Link] ( ) ;
for (i=0; rng. findText (cValue) !=false; i++) {
rng. collapse (false) ;
}
spanFound . innerHTML = "Найдено <SPAN STYLE= ' font -weight : bold':>" + i +
"</SPAN> вхождений слова:";
i f ( i != 0) {
search. innerHTML = '<BUTTON' +
1
style="width:100; text-align: center" 1 +
'onclick=" findme (txtToFind. value) ">Поиск' +
'</BUTTON>&nbsp; ' +
Глава 10. Динамический HTML _ 517

'<BUTTON style="width: 100; text-align: center"' +

'onclick="move(txtToFind. value) ">Перейти</виттОЫ>'

function move(cValue) {
var rng = document. body. createTextRange ();
if ([Link] (cValue) =true) {
rng. select () ;
rng. scrollIntoView ( ) ;

</SCRIPT>
</HEAD>
<BODY>
<DIV ID="buttons" STYLE="position: absolute; top: 20">&nbsp;
<SPAN ID="spanFound">BBeflHTe слово для поиска: </SPAN>
<INPUT TYPE=TEXT ID=txtToFind VALUE="">
<SPAN ID="search">
<BUTTON style="width: 100; text-align: center"
onclick="findme (txtToFind. value) ">Поиск
</BUTTONX/SPAN>

<DIV style="position: absolute; top: 60; font-size: 14pt; ">

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

<Р>Ф.М. Достоевский "Дневник писателя за 1873 год"

</BODY>
</HTML>

В этом примере в разделе buttons задается встроенный элемент <SPAN>

с именем spanFound, в который выводится информация о числе найденных
вхождений фрагментов текста, задаваемых в текстовом поле txtToFind,
а также кнопка Поиск для инициализации процедуры поиска. Эта кнопка
содержится в элементе <SPAN> с именем search, в который, в случае успеш-
ного поиска, добавляется кнопка перехода к первому вхождению фразы.
При нажатии на кнопку Поиск вызывается процедура findMe(cVaiue), пара-
метром которой служит введенная пользователем в текстовом поле txtToFind
518 Часть II. Интерактивные Web-документы

фраза. В процедуре методом createTextRange () объекта body создается объ-

ект TextRange, в котором хранится текстовое содержимое всей страницы.
Методом findText () этого объекта в цикле определяется число вхождений
введенной фразы. Вызов метода collapse о необходим, чтобы установить
начало следующего цикла поиска в конец предыдущего найденного вхож-
дения.
Переустановка значения свойства inner объекта spanFound приводит к изме-
нению его содержимого. Теперь в нем содержится текст, отражающий коли-
чество найденных вхождений заданной фразы.
Если число вхождений не нулевое, то создается кнопка Перейти, при нажа-
тии на которую происходит переход к первому вхождению в документ вве-
денной пользователем фразы. Переход осуществляется функцией
move (cvalue), которая ищет первое вхождение фразы, выделяет ее (метод
select о объекта rng) и осуществляет, в случае необходимости, прокрутку
страницы (метод scroiiintoviewo объекта rng) до найденной фразы.
На рис. 10.19 показаны отдельные этапы работы со страницей: а — пользо-
ватель ввел слова для поиска; б — нашлось одно вхождение, и отобразилась
кнопка перехода Перейти; в — пользователь перешел к первому вхождению
слова в текст документа.

Введите слово для поиска: [мысль

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

Найдено 1 вхождений слова:[иысль.

Правда и то: если никто не хочет задумываться, то, казалось бы,
тем легче русскому литератору. Да, легче действительно; и горе
тому литератору и издателю, который в наше время
задумывается. Еще горше тому, кто сам за-хотел бы учиться и Ц
понимать; но еще горше тому, который объявит об этом
искренно; а если заявит, что уже капельку понял и желает j§j
б

тем легче русскому литератору. Да, легче действительно; и горе

тому литератору и издателю, который в наше время
задумывается. Еще горше тому, кто сам за-хотел бы учиться и
понимать; но еще горше тому, который объявит об этом
искренно; а если заявит, что уже капельку понял и желает
высказать свою МВВЯ. то немедленно всеми оставляется... Рис. 10.19. Этапы
поиска информации
Ф,М, Достоевский "Янерник писателя за 1R73 гоя" в документе
в
Глава 10. Динамический HTML 519

Возможности динамического HTML по работе с содержимым страницы не

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

Фильтры и переходы
Создавать HTML-страницы с мультимедийными эффектами также просто,
как и применять каскадные таблицы стилей. Разнообразные визуальные ди-
намические эффекты: постепенное "проявление" изображения или текста,
изменение контрастности графического изображения, "свечение" букв тек-
ста и т. п. — все это и многое другое можно увидеть при отображении стра-
ницы в Internet Explorer 4.0 и более поздних версий. Реализуются мультиме-
дийные эффекты применением фильтров к элементам страницы и органи-
зацией переходов из одного визуального состояния к другому.
Фильтр — это некоторый алгоритм, преобразующий визуальное отображение
элемента в окне браузера. Он может быть статическим или динамическим.
Статический фильтр преобразует элемент, и после этого он отображается.
Динамический фильтр воздействует во времени на визуальное отображение
элемента, меняя его непосредственно на HTML-странице, что приводит
к эффекту анимации. Динамический фильтр еще называют переходом из од-
ного состояния отображения в другое.
Фильтры применяются не ко всем HTML-элементам, а только к тем, кото-
рые могут определять прямоугольный блок при отображении в окне браузе-
ра и не являются окнами, как, например, элемент <IFRAME>. В табл. 10.9 пе-
речислены все элементы HTML, к которым могут применяться фильтры.

Таблица 10.9. Элементы, к которым применяются фильтры

Элемент Фильтр применяется

BODY Всегда
BUTTON Всегда
DIV Если заданы ширина (свойство width), высота (свойство height) или
элемент абсолютно позиционирован
IMG Всегда
INPUT Всегда
MARQUEE Всегда
SPAN Если заданы ширина (свойство width), высота (свойство height) или
элемент абсолютно позиционирован
520 Часть II. Интерактивные Web-документы

Таблица 10.9 (окончание)

Элемент Фильтр применяется

TABLE Всегда
TD Всегда
TEXTAREA Всегда
ТН Всегда

Примечание
Фильтры можно применять и к элементам управления ActiveX, встраиваемым в
HTML-страницу.

Фильтры не применяются к следующим элементам HTML-страницы: апплеты

Java, IFRAME, SELECT, OPTION, p, EM, STRONG и ко всем заголовкам HI, н2 и т. д.
Применить фильтр к элементу просто: достаточно задать значение его свой-
ства filter, следуя правилам задания свойств каскадных таблиц стилей
filter: значение. Каждый фильтр, как отмечалось выше, реализует опреде-
ленный алгоритм преобразования видимого отображения элемента, поэтому
значение свойства filter задается в форме функции:
filter: имя_фильтра([параметры]);

а параметры фильтра, если они присутствуют, задаются с использованием

синтаксиса именованных параметров функции:
имя_параметра=значение_параметра

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

запятую, а некоторым фильтрам параметры вообще не нужны, но круглые
скобки должны присутствовать обязательно.
К элементу можно применить несколько фильтров одновременно. В этом
случае они задаются в виде списка с пробелом в качестве разделителя:
<IMG ID=imgl SRC="[Link]"
STYLE="filter: blur(strength=50) fliph()>

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

первый (blur) размазывает изображение на глубину в 50 пикселов, а второй
(fliph) просто зеркально его отображает в горизонтальном направлении.
В Internet Explorer реализовано большое число разнообразных фильтров.
В табл. 10.10 представлены все фильтры с кратким описанием их воздейст-
вия на визуализацию элементов.
Глава 10. Динамический HTML 521

Таблица 10.10. Доступные в Internet Explorer фильтры

Фильтр Описание

alpha Устанавливает уровень непрозрачности объекта

blendTrans Увеличивает или уменьшает контрастность отображения объекта
Ыиг Создает эффект размытия изображения
chroma Делает прозрачными пикселы заданного цвета
dropShadow Рисует сплошной силуэт объекта, смещенный в заданном направ-
лении, создавая тем самым эффект объекта, расположенного над
страницей и отбрасывающего на нее тень
flipH Рисует объект в зеркальном отображении относительно горизон-
тальной плоскости
f lipV Рисует объект в зеркальном отображении относительно вертикаль-
ной плоскости
glow Добавляет свечение вдоль внешних границ объекта, создавая эф-
фект "возгорания" границ объекта
gray Удаляет цветовую гамму объекта и отображает его в серых тонах
invert Меняет оттенок, насыщение и яркость объекта на противоположные
light Подсвечивает объект
mask Закрашивает прозрачные пикселы объекта заданным цветом и соз-
дает прозрачную маску из непрозрачных пикселов объекта
redirect Преобразует объект в объект DAlmage, к которому можно приме-
нить все возможности технологии MS DirectAnimation
revealTrans Показывает или скрывает объекты, используя 23 определенных
в фильтре перехода
shadow Рисует силуэт объекта вдоль одной из его границ в заданном на-
правлении, создавая эффект тени
wave Синусоидальное искривление объекта в вертикальном направле-
нии, создавая эффект волнообразной поверхности
хгау Изменяет глубину цвета объекта и после этого отображает его
в черно-белых тонах, имитируя рентгеновский снимок объекта

Ограниченные объемы книги не позволяют полностью описать каждый

фильтр со всеми параметрами и нюансами использования, но некоторые,
наиболее часто применяемые разработчиками Web-документов, фильтры
будут описаны достаточно подробно.
Интересные динамические эффекты достигаются использованием фильтров
совместно со сценариями. В процессе выполнения сценария можно уста-
навливать или изменять параметры применяемых к объектам фильтров,
522 Часть II. Интерактивные Web-документы

можно назначать новые фильтры, создавать визуальные эффекты через оп-

ределенные интервалы времени и делать многое другое.
Доступ к фильтрам и их параметрам в программируемых сценариях осуще-
ствляется, как обычно, с помощью объектной модели, предоставляемой
браузером. В этой модели любой фильтр представляется в виде обычного
объекта со своими свойствами и методами. Большинство свойств и методов
соответствует параметрам фильтра, определяемым при задании фильтра
в параметре STYLE. Некоторые свойства и методы доступны только из про-
граммируемого сценария.
Определить, какие фильтры применены к элементу, можно с помощью на-
бора filters соответствующего объекта. В нем хранятся ссылки на все при-
меняемые к элементу фильтры:
<IMG ID=picture SRC="[Link]"
STYLE="filter: wave(strength=100) gray() fliph()">

<SCRIPT>
strengthWave=[Link];
if( [Link]['gray'].enabled && strengthWave >= 100) {
[Link] += 50
}
</SCRIPT>

В приведенном примере объект picture сценария соответствует элементу

<IMG> HTML-страницы. Переменная strengthWave хранит значение парамет-
ра strength фильтра wave. Оператор условия проверяет, не отключался ли
фильтр gray объекта picture ранее в каком-либо сценарии (значение свой-
ства enabled фильтров равно true, если разрешено его применение к эле-
менту). Если этот фильтр продолжает применяться, и параметр strength
фильтра wave больше или равен 100, то этот параметр увеличивается на 50.
Можно ссылаться на фильтры объекта и с помощью числового индекса на-
бора filters. Каждому фильтру, заданному в параметре или тэге STYLE, со-
ответствует определенный числовой индекс этого набора. Все фильтры ин-
дексируются в порядке их перечисления в свойстве filter каскадных таблиц
стилей, начиная с нуля. Так, в приведенном примере фильтру wave соответ-
ствует индекс 0, фильтру gray — 1 и фильтру fiiph — 1. Поэтому получить
значение параметра strength фильтра wave можно было бы и так:
strengthWave=[Link][0].strength;

Совет
Использование числового индекса при ссылке на фильтр элемента полезно, если
к элементу применяются одновременно несколько фильтров одного и того же
типа (естественно, с разными параметрами). Это единственный способ иден-
тифицировать фильтры.
Глава 10. Динамический HTML 523

В наборе style объекта, в котором хранятся значения всех свойств каскад-

ных таблиц стилей соответствующего объекту элемента HTML, хранится и
значение свойства filter объекта, являющееся строкой, содержащей список
применяемых к элементу фильтров. Если в предыдущем примере в сценарий
добавить оператор
alert([Link]);
то в диалоговом окне, выводимом функцией alert ( ) , будет отображена сле-
дующая строка:
wave(strength=100) gray() fliphf)
Это свойство можно использовать для динамического изменения присоеди-
ненных к элементу фильтров. Добавить фильтр fiipvO к элементу picture
того же примера можно простым оператором:
[Link] += ' flipv()';

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

Общие свойства некоторых фильтров

Каждый фильтр имеет свойство enabled, которое разрешает (значение true)
или запрещает (значение aise) применение присоединенного к объекту
фильтра. Это свойство соответствует параметру ENABLED при задании фильт-
ра в тэге HTML-элемента.
Свойство strength фильтров blur, glow и wave определяет интенсивность
применения соответствующего фильтра и может изменяться от 0 до 255. Для
blur это будет степень размытости изображения элемента, для glow — ин-
тенсивность "свечения" контура изображения объекта, для wave — амплитуда
волны искажения. На рис. 10.20 показаны изображения одного и того же
фрагмента текста, обработанного фильтрами wave различной интенсивности.

( Примечание ^
Обратите внимание, что некоторые символы, расположенные близко к грани-
цам блока отображения элемента, при использовании фильтра wave преобра-
зуются таким образом, что выходят за область отображения.
Фильтры, воздействующие на цветовую гамму элемента, имеют свойство
(и, естественно, параметр) color. К ним относятся следующие фильтры:
chroma, dropShadow, glow, mask, shadow. Как И В случае свойства strength,
524 Часть II. Интерактивные Web-документы

свойство color для разных фильтров определяет разные цветовые эффекты,

связанные с воздействием фильтра на объект. Для фильтров dropshadow и
shadow это свойство задает цвет создаваемой тени, в фильтре glow оно опре-
деляет цвет "свечения" контура элемента, в фильтрах chroma и mask значени-
ем этого свойства задается цвет пикселов объекта, которые становятся про-
зрачными, или цвет, в который окрашиваются прозрачные пикселы объекта.
Значение этого свойства задается шестнадцатеричным числом вида #RRGGBB
или одним из зарезервированных слов, обозначающих определенные цвета,
например magenta, lightsteelblue И Т. Д.

Этот текст
отображается
с
применением применением
фильтра Яильгра
'wave'!
strength=0
Рис. 10.20. Воздействие фильтра wave на отображение текста

Свойство direction фильтров blur и shadow определяет, соответственно, на-

правление, в котором размывается изображение объекта, и направление па-
дения тени от объекта. Значением этого свойства является угол, отсчиты-
ваемый от вертикали объекта по часовой стрелке с шагом в 45°. Отрица-
тельные значения или значения, большие 360°, приводятся к эквивалентным
значениям в диапазоне от 0° до 360°. Например, значение —45° соответству-
ет 315°.
Булево свойство add определяет, включать (значение true) или не включать
(значение false) исходное изображение объекта, к которому применяется
фильтр, в отфильтрованный образ. Это свойство имеют только два фильтра:
Ыиг и wave. На рис. 10.21 показаны три графических файла буквы Ж: пер-
вый отображается без применения фильтров, второй -- с применением
фильтра размывания изображения blur интенсивности 100, третий — ана-
логичен второму, но с добавленным исходным изображением. В серых тонах
трудно найти различия во втором и третьем изображениях, но в цвете вид-
но, что в третьем изображении четче прорисовывается сама буква "Ж",
а вдоль контура наблюдается размытие.
Перечисленные выше свойства полностью исчерпывают описание некото-
рых фильтров, так как они не имеют методов, или только свойств фильтров.
Все такие фильтры приведены в табл. 10.11.
Глава 10. Динамический HTML 525

Рис. 10.21. Эффект от добавленного исходного изображения в фильтр

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

Фильтр Свойства Методы

blur add, direction, enabled, Нет
strength
chroma color, enabled Нет
flipH Enabled Нет
flipV Enabled Нет
glow color, enabled, strength Нет
gray Enabled Нет
invert Enabled Нет
light Enabled AddAmbient, addCone, addPoint,
changeColor, changeStrength,
clear, moveLight

mask color, enabled Нет

redirect Enabled Element Image

shadow color, direction, enabled Нет

xray Enabled Нет

He вошедшие в эту таблицу фильтры, а также методы фильтров light и

redirect, описываются в следующих двух разделах.

Описание фильтров
Фильтр wave имеет свойства-параметры add, enabled, strength, freq, phase
И lightStrength. Первые три свойства Описаны выше. Свойства freq И phase
определяют количество максимумов в синусоидальной волне искажения
и фазу смещения волны, которая задается в процентах от фазы обычной
синусоиды, имеющей начальное значение 0. Величина этого параметра, рав-
526 Часть II. Интерактивные Web-документы

ная 100, соответствует фазе смещения в 360°. Все остальные значения лежат
в интервале от 0 до 100. Например, значение phase: 25 соответствует сину-
соиде с фазой смещения в 90°. Последнее свойство lightstrength определя-
ет интенсивность освещения для имитации трехмерного эффекта поднятия
гребней волны. На рис. 10.22 показаны изображения после обработки
фильтром wave с различными параметрами.

Обычное изображение Изображение с фильтром wave Изображение с фильтром wave

(Add=0, Freq=3, LightStrength=15, (Add=0, Freq=3, LightStrength=25,
Phase=25, Strength=10) Phase=25, Strength=15)

Рис. 10.22. Действие фильтра wave

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

У фильтра dropshadow кроме свойств color и enabled имеется ряд свойств,

задающих параметры падающей тени. Свойства offx и offY определяют ко-
личество пикселов в горизонтальном и вертикальном направлениях, на ко-
торые смещается тень от как бы приподнятого над плоскостью страницы
объекта, а свойство positive определяет, должен ли фильтр создавать па-
дающую тень от прозрачных пикселов объекта. Если значение этого свойст-
ва true, то тень создается от непрозрачных пикселов объекта, если false -
от прозрачных. Положительное значение свойства offx смещает тень впра-
во, отрицательное — влево; положительное значение свойства o f f Y смещает
тень вниз, отрицательное — вверх. На рис. 10.23 показаны эффекты от при-
менения этого фильтра.

Рис. 10.23. Эффекты фильтра dropShadow

Глава 10. Динамический HTML _ 527

Совет
Если на странице есть прозрачный объект, то можно получить его тень, приме-
нив к нему фильтр dropShadow и установив значение его параметра positive
равным 0.

Фильтр alpha позволяет создавать эффекты прозрачности (невидимости)

отображения или его части. Свойство opacity определяет степень прозрач-
ности: значение о соответствует полной прозрачности (невидимости) изо-
бражения, а значение юо — нормальному изображению. Параметр style
определяет способ создания эффекта прозрачности. Его умалчиваемое зна-
чение равно о и соответствует изменению прозрачности всего изображения.
Ненулевое значение означает, что прозрачность объекта не однородна и из-
меняется от пиксела к пикселу. При styie=i параметры startx, startY и
finishx, finishY определяют координаты точек прямой, на которой про-
зрачность равна значению параметра finishopacity. Прозрачность точек,
лежащих между границами объекта и этой прямой, меняется от значения,
заданного свойством opacity, до значения, заданного свойством finishopacity.
При значении style=2 степень прозрачности точек изображения меняется
при перемещении из центра к эллипсу (вписанному в прямоугольный блок
отображения элемента) от значения, определяемого свойством opacity, до
значения, заданного параметром finishopacity. Вне вписанного эллипса
прозрачность соответствует finishopacity. Если style=3, прозрачность ана-
логичным образом меняется от центра до границ изображения.
Комбинируя значения свойств фильтра alpha можно создавать разнообраз-
ные эффекты отображения объекта. Некоторые возможности показаны на
рис. 10.24.

opacity=60, style=0 opacity=60, style=l, opacity=60, style=2, opacity=60, style=3,

finishOpacity=0 fmishOpacity=0 fmishOpacity=10

Рис. 10.24. Эффекты фильтра alpha

Фильтр light, возможно самый интересный из всех фильтров, имеет един-

ственное свойство enabled и много методов, которые позволяют добавлять
к изображению объекта разнообразные источники света.
Метод addAmbient(iRed, iGreen, iBlue, iStrength) Добавляет рассеянный
источник света, который представляет собой ненаправленный источник све-
та, распространяющий параллельные лучи перпендикулярно к поверхности
528 Часть II. Интерактивные Web-документы

страницы. Его параметры iRed, iGreen, iBlue задают, соответственно, на-

сыщенность красной, зеленой и синей составляющей света и изменяются
в диапазоне от 0 до 255. Параметр istrength определяет интенсивность ис-
точника.
Направленный конический источник света добавляется методом
addCone(1X1,iYl,iz,1X2, iY2, iRed, iGreen, iBlue,istrength,iAngle)
где:
ixi,iYi — определяют координаты источника света в пикселах,
iz — задает номер слоя,
iX2,iY2 — определяют координаты точки направления света,
iRed, iGreen, iBlue — задают насыщенности соответствующих цветовых
составляющих,
istrength — интенсивность источника света,
iAngle — угол конуса распространения света.
Прямая, проходящая через точку источника света и точку направления све-
та, является биссектрисой этого угла.
Точечный источник света добавляется к объекту методом
addPoint(iXl,iYl,iz,iRed,iGreen,iBlue,istrength)
Первые два параметра задают координаты источника света в пикселах, тре-
тий — номер слоя источника света. Остальные параметры имеют тот же
смысл, что и в предыдущих методах добавления источников света.
На рис. 10.25 можно увидеть все три источника, присоединенные к графи-
ческому изображению.

Рассеянный Конический Точечный

источник красного источник источник света

Рис. 10.25. Добавленные источники света

Все источники добавляются только из встроенного сценария. Для HTML-

страницы, отображенной на рис. 10.25, исходный текст выглядит следую-
щим образом:
Глава 10. Динамический HTML 529

<HEAD>
<SCRIPT>
window. onload=fnlnit;
function f nlnit ( ) {
var iX2=[Link]/2;
var iY2=[Link]/2;
var iX3=img3 . of f setWidth/2 ;
var iY3=[Link]/2;
imgl . filters . light . enabled=true;
imgl . filters . light . addAmbient (255, 0, 0, 255) ;
img2 . filters . light . enabled=true;
img2. filters. light. addCone (0, 0, 3, iX2, iY2, 255, 255, 255, 255, 20) ;
img3 . filters . light . enabled=true;
img3. filters. light. addPoint (iX3, iY3, 3, 255, 255, 255, 255);
}
</SCRIPT>
</HEAD>
<DIV STYLE=' position: absolute; top:0; left: 0; width: 190'>
<IMG SRC=' flower. jpg' >Нормальное изображение</П1У>

<DIV STYLE=' posit ion: absolute; top:0; left: 195; width: 190'>
<IMG ID=imgl SRC=' flower. jpg' STYLE=" filter: light ()">
Рассеянный источник красного

<DIV STYLE=' position: absolute; top:0; left: 390; width: 190'>

<IMG ID=img2 SRC=' flower. jpg' STYLE=" filter: light ();">
Конический источник

<DIV STYLE=' position: absolute; top:0; left: 585; width: 190'>

<IMG ID=img3 SRC=' flower. jpg' STYLE=" filter: light (); height:190">
Точечный источник света

'ч Примечание
При добавлении фильтра lighto в параметре STYLE область отображения
элемента становится черной, чтобы можно было видеть эффекты конического
и точечного источников света.

Примечание
Точечный источник света может представлять собой один пиксел, если не по-
добран его цвет и цвет элемента. Лучше всего этот источник света виден на
белом фоне.
530 Часть II. Интерактивные Web-документы

Оригинальные эффекты с источниками света достигаются из встроенных

сценариев. Большое количество подобных примеров можно найти на сер-
вере разработчика фирмы Microsoft по адресу [Link]
/workshop/author/.

Описание переходов
В Internet Explorer включено два перехода: biendTrans и reveaiTrans. На-
помним, что переход позволяет переходить во времени от одного визуаль-
ного состояния к другому, задавая длительность перехода. Переходы в Web-
документах используются для создания эффекта анимации, например пре-
образования одного изображения в другое.
Свойство-параметр duration определяет интервал времени, необходимый
для выполнения перехода. Его значением является действительное число
с плавающей точкой в формате секунды.миллисекунды. В сценариях его можно
изменять, если только не началось выполнение перехода.
Свойство status, доступное только из сценария, позволяет определить со-
стояние перехода: о — переход остановлен, г — переход применен и 2 -
переход выполняется.
Переход biendTrans задает постепенное исчезновение или появление изо-
бражения, увеличивая или уменьшая степень его прозрачности. Исчезнове-
ние или появление моделируется совместным использованием перехода и
свойства visibility объекта. Следующий пример демонстрирует постепен-
ное исчезновение одной картинки и появления другой.

<HTML>
<SCRIPT language="JavaScript">
var fRunning = 0
function startTransO
{
if (fRunning == 0)
{
fRunning = 1
[Link]();
img. s г с = "Арноль д! . bmp " ;
[Link]()
}
I
</SCRIPT>
<SCRIPT for="img" event="onfilterchange">
fRunning = 0
</SCRIPT>
Глава 10. Динамический HTML 531

</HEAD>
<BODY>
<IMG id="img" згс="Арнольд.Ьтр"
style="fliter:blendTrans(duration=8); width: 400; height: 250;"
onclick="startTrans() >
</BODY>
</HTML>

В этом примере к изображению img применяется переход blendTrans, кото-

рый постепенно в течение 8 секунд делает прозрачным изображение файла
Арнольд.Ьтр, а вместо него отображается содержимое файла Арнольд!.bmp.
Инициализация перехода осуществляется щелчком мыши на изображении.
При начале выполнения перехода генерируется событие onfiiterchange,
в процедуре обработки которого задается начальное значение переменной
fRunning.
В процедуре обработки щелчка мыши вызывается метод appiay ( ) , после
которого можно устанавливать новые значения параметров объекта img.
В примере задается новый файл изображения. На рис. 10.26 показано на-
чальное изображение (о), промежуточное (б) и окончательное (в).

а б в
Рис. 10.26. Применение перехода blendTrans

Три метода переходов предназначены для управления выполнением перехо-

да из сценария. Для их выполнения не требуется никаких параметров. Ме-
тод apply () "замораживает" видимое в данный момент изображение элемен-
та и позволяет изменить значения параметров перехода и самого элемента,
не требуя немедленного применения перехода. Чтобы выполнить переход
после переустановки значений необходимых параметров, следует использо-
вать метод play ( ) . Остановить выполнение перехода для элемента в любой
момент времени можно методом stop ( ) .
Переход reveaiTrans позволяет, в отличие от перехода blendTrans, выпол-
нить переходы из одного видимого состояния в другое разнообразными спо-
собами. Его свойство transition может иметь целое значение и определяет
тип перехода. Допустимые значения представлены в табл. 10.12.
532 Часть II. Интерактивные Web-документы

Таблица 10.12. Типы переходов в фильтре revealTrans

Переход Отображение объекта Переход Отображение объекта

0 Сжимающийся 12 Пикселы отображаются

прямоугольник в случайном порядке
1 Расширяющийся 13 Одновременно слева
прямоугольник и справа к центру
2 Сжимающийся круг 14 Одновременно от центра
налево и направо
3 Расширяющийся круг 15 Одновременно снизу
и сверху к центру
4 Разворачивание 16 Одновременно от центра
снизу вверх вверх и вниз
5 Разворачивание 17 От правого верхнего угла
сверху вниз к левому нижнему
6 Разворачивание слева 18 От правого нижнего угла
направо к левому верхнему
7 Разворачивание справа 19 От левого верхнего угла
налево к правому нижнему
8 Вертикальные жалюзи 20 От левого нижнего угла
к правому верхнему
9 Горизонтальные жалюзи 21 Случайными горизонталь-
ными линиями
10 В шахматном порядке 22 Случайными вертикальными
поперек линиями
11 В шахматном порядке вниз 23 Отображение пикселов
случайным образом

.:,
:
4
ЦЦ «Г 1111 11 *я|
а б в
Рис. 10.27. Применение перехода revealTrans

На рис. 10.27 (а, б, в) показаны результаты применения перехода revealTrans

со значением параметра transitions вместо перехода biendTrans в приме-
ре 10.9. В этом случае новый рисунок прорисовывается в течение 8 секунд
Глава 10. Динамический HTML 533

расширяющимся из центра прямоугольником. Промежуточное отображение

перехода показано на рис. 10.27, б.
Мы привели достаточно простые примеры применения переходов. Более
сложные примеры использования фильтров и переходов можно найти на
сервере разработчика фирмы Microsoft по адресу [Link]
/workshop/author/.

Связывание данных с документом

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

Архитектура привязки данных

В основу решения привязки данных к HTML-странице положены четыре
основных компонента:
П Объект, являющийся источником данных (Data Source Object — DSO)
О Объекты-потребители данных
П Программа-посредник, или агент, привязки данных
П Программа-посредник, или агент, повторения таблиц (табличный повто-
ритель)
Объект-источник данных получает данные из сети и предоставляет их в рас-
поряжение объектам-потребителям данных, являющимися стандартными
HTML-элементами, через специальную программу-посредника, которая обес-
печивает синхронизацию работы источника и потребителей данных. Таблич-
ный повторитель подключается, если обрабатывается целый набор записей
из базы данных, который отображается в табличной форме на HTML-стра-
нице.
Привязка данных к HTML-странице осуществляется простым встраиванием
в нее объекта-источника, который реализует открытую спецификацию, по-
зволяющую разработчику определить:
534 Часть II. Интерактивные Web-документы

О Используемый транспортный протокол для получения данных из сети.

Им может быть любой протокол, например, стандартный протокол HTTP
или простой файловый ввод/вывод. Также объект-источник определяет,
синхронно или асинхронно осуществляется передача. Последний тип пе-
редачи является предпочтительным, так как позволяет немедленно взаимо-
действовать с пользователем, не дожидаясь окончания передачи данных.
О Необходимый набор данных из базы данных.
Для этого может потребоваться задание строки ODBC-связывания и опе-
ратора SQL или простого указания URL-адреса базы данных.
П Как обрабатываются данные в сценарии.
Так как объект-источник поддерживает данные на машине пользователя,
он также определяет их сортировку и фильтрацию.
П Возможность корректировки и обновления данных.
Все перечисленные возможности объекта-источника реализуются через объ-
ектную модель, доступную для сценариев HTML-документа.
На объект-источник накладывается единственное ограничение, — он дол-
жен обеспечивать доступ к данным посредством либо OLE-DB, либо ODBC.
Объекты-потребители данных — это элементы HTML, способные отобра-
зить на странице данные, поставляемые объектом-источником. К ним отно-
сятся как стандартные элементы HTML (INPUT, SPAN, DIV, TABLE), так и вне-
дряемые в страницу Java-апплеты и элементы управления ActiveX. (Под-
робно они рассматриваются в главе 11 "Встраиваемые компоненты".)
Используя специальные параметры, расширяющие стандартный HTML,
Internet Explorer позволяет привязать соответствующий элемент к опреде-
ленному столбцу данных из набора данных, поставляемых объектом-источ-
ником.
Элементы могут использовать какое-то одно значение из записи набора
данных (например, элемент INPUT) или весь набор данных, отображая каж-
дую запись в виде строки одной или нескольких таблиц (элемент TABLE).
Работа программы-посредника привязки данных и табличного повторителя
совершенно невидима для пользователя. При загрузке страницы они опре-
деляют, содержит ли она объекты-источники данных и соответствующие им
объекты-потребители. При наличии подобных объектов эти программы ав-
томатически синхронизируют их работу. Когда объект-источник получает
дополнительную порцию данных из сети, программы-посредники автомати-
чески пересылают их соответствующим потребителям данных. И наоборот,
если пользователь изменил данные в объекте-потребителе, то они автомати-
чески пересылаются в объект-источник, который, в свою очередь, пересы-
лает их в базу данных.
Глава 10. Динамический HTML 535

Разработчик страницы с привязанными к ней данными может отслеживать

работу программы-посредника, перехватывая и обрабатывая события, гене-
рируемые посредником при выполнении им определенных действий.
Для обеспечения привязки данных к HTML-странице в Internet Explorer
включена поддержка дополнительных нестандартных параметров элементов-
потребителей данных: DATASRC, DATAFLD, DATAFORMATAS и DATAPAGESIZE. Зада-
ние значений этих параметров для объекта-потребителя связывает его с оп-
ределенным объектом-источником данных на странице и обеспечивает их
правильное отображение.
Параметр DATASRC определяет имя источника данных, задаваемого в виде
строки, начинающейся с символа (#), за которым сразу же следует имя объ-
екта-источника, определенное в его параметре ID.
Параметр DATAFLD задает имя поля в записи, данные из которого привязы-
ваются к определенному элементу-потребителю данных на HTML-странице.
Обычно эти два параметра используются совместно, определяя отображение
набора данных и конкретных полей его записей на странице. В следующем
примере весь набор данных, поставляемый объектом-источником с именем
myoso, привязан к табличному потребителю данных, в ячейках которого ото-
бражаются значения поля author всех записей набора данных:
<TABLE DATASRC="#myDSO">
<TRXTDXINPUT TYPE=TEXTBOX DATAFLD="author"X/TDX/TR>
</TABLE>

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

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

чение, следует задавать оба параметра, как показано в следующем примере:
<SELECT DATASRC="ttmyDSO" DATAFLD="publisher">
<OPTION>BXB
<ОРТ10М>Питер
<OPTION>Microsoft Press
</SELECT>

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

программа-посредник установит текущую запись, поле publisher которой
содержит выбранное значение.
Для элементов-потребителей единственного значения можно указать формат
используемых данных в параметре DATAFORMATAS. В настоящее время значе-
536 Часть II. Интерактивные Web-документы

нием этого параметра может быть только одно из двух значений: HTML
и TEXT. Первое соответствует данным в формате HTML, второе — обычным
текстовым данным. Данные отображаются в зависимости от заданного фор-
мата. Ниже представлены примеры привязки данных к элементам DIV и
TEXTAREA с указанием формата:
<DIV DATASRC="#myDSO" DATAFLD="author" DATAFORMATAS="HTML"X/DIV>
<TEXTAREA DATASRC="#myDSO" DATAFLD="book_name"
DATAFORMATAS="TEXT"></TEXTAREA>

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

Для оптимизации отображения набора данных, содержащего большое число

записей, следует использовать параметр DATAPAGESIZE, определяющий мак-
симальное число записей, отображаемых в таблице. По умолчанию в табли-
це отображаются все записи привязанного набора данных, и если записей
много, то они могут не поместиться в окне отображения браузера. Возмож-
ность ограничения числа выводимых одновременно записей позволяет соз-
давать более удобные в использовании страницы. Переход к отображению
следующей порции записей осуществляется методом nextPage ( ) объекта
TABLE, предыдущей — методом previousPage О .

Объекты-источники данных
При разработке приложений с использованием внешних данных следует,
прежде всего, определить, в каком формате будут храниться эти данные.
Они могут представляться в виде простого текстового файла с запятой в ка-
честве разделителя (расширение CSV), HTML-файла или таблицы базы дан-
ных, поддерживающей технологию OLE-DB или ODBC (например, SQL
Server, MS Access, FoxPro).
После того как определен формат представления внешних данных, необхо-
димо выбрать подходящий объект-источник данных (DSO) и встроить его
в страницу HTML. В Internet Explorer объектом-источником данных может
быть апплет Java, элемент управления ActiveX или сама динамически под-
ключаемая библиотека [Link] браузера, реализующая его объектную
модель.
Внешние источники данных
Internet Explorer поставляется с двумя элементами управления ActiveX. Пер-
вый, TDC, осуществляет доступ к данным, представленным текстовым фор-
матом с разделителем (файл CSV), второй, [Link], позволяет ра-
ботать с таблицами реляционных баз данных.
Глава 10. Динамический HTML 537

Элементы управления ActiveX являются законченными программными объ-

ектами, которые позволяют получать/изменять значения своих свойств
внешним программам или другим объектам. При их установке на компью-
тере пользователя в реестре Windows производится соответствующая запись,
идентифицирующая каждый установленный в системе элемент управления
ActiveX уникальным кодом. На HTML-страницу они встраиваются тэгом
<OBJECT>, а тэг <PARAM> позволяет установить значения свойств элемента
ActiveX.

( Примечание }
Более подробно элементы ActiveX и Java-апплеты рассматриваются в главе 11
"Встраиваемые компоненты".

TDC (Tabular Data Control) является простым источником данных для

HTML-страницы и используется в следующих случаях:
П Для отображения простых наборов данных, хранящихся в обычных тек-
стовых файлах с разделителями.
П Если необходимо предоставить пользователю возможность просмотра
простых наборов данных в режиме off-line. При работе с этим источни-
ком данные пересылаются с сервера на машину пользователя и сохраня-
ются в кэш-областях. После завершения сеанса связи их можно просмот-
реть в автономном режиме.
П Если необходимо предупредить возможность прямого использования
системы управления базами данных сервера (DBMS). В этом случае соз-
дается простой текстовый файл, представляющий набор данных из базы,
доступ к которому и осуществляется объектом TDC. Заметим, что совре-
менные DBMS позволяют представлять данные в формате текстового
файла с разделителем.
Его свойства и методы позволяют определять файл данных, а также осуще-
ствлять их фильтрацию и сортировку. Свойства, определяющие файл дан-
ных и его структуру, представлены в табл. 10.13.

Таблица 10.13. Файловые свойства элемента управления TDC

Свойство Описание

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

умолчанию применяется набор latinl
DataUrl Задает URL-адрес файла данных
EscapeChar Определяет символ ESC в файле данных. Умалчиваемого значе-
ния нет
FieldDelim Определяет символ-разделитель полей. По умолчанию использу-
ется запятая (,)
538 Часть II. Интерактивные Web-документы

Таблица 10.13 (окончание)

Свойство Описание

Language Определяет язык, используемый для генерации файла данных.

По умолчанию eng-us
TextQualifier Задает необязательный символ, которыми окружено каждое поле
RowDelim Определяет символ-разделитель рядов данных. По умолчанию
используется символ новой строки
UserHead Определяет, является ли первая строка файла данных информа-
цией для заголовка таблицы (значение TRUE). По умолчанию зна-
чение равно FALSE — первая строка является строкой данных

Для работы с данными элемент управления TDC имеет два свойства и один
метод.
Свойство Filter содержит выражение, включающее имя столбца, который
должен быть отфильтрован, критерий фильтрации и значение, с которым
должно сравниваться содержимое указанного столбца. В качестве критерия
фильтрации используются последовательности символов =, >=, <=, !=, смысл
которых очевиден.
Значением свойства Sort является список имен столбцов, разделенных точ-
кой с запятой, по которым необходимо отсортировать данные файла в таб-
лице. Знак (+) перед именем столбца означает сортировку в возрастающем
порядке, минус (-) — в убывающем.
Действительная сортировка данных в таблице осуществляется методом
Reset () элемента TDC.
Элемент управления [Link] (Remote Data Service) no своим воз-
можностям превосходит элемент управления TDC. Он позволяет работать
с наборами данных из реляционных таблиц, и его рекомендуется применять
в случаях:
П Работы с данными, хранящимися в таблицах баз данных, поддерживаю-
щих технологии OLE-DB или ODBC
О Если необходимо получить набор данных с помощью SQL
П Если есть необходимость предоставить пользователю возможности кор-
ректировки и добавления данных непосредственно в таблицы баз данных
П Предоставления работы с данными в реальном режиме времени
Для стандартной работы с этим объектом достаточно задания трех его
свойств: server, connect и SQL. Первое свойство задает URL-адрес сервера,
на котором расположена база данных. Свойство connect определяет систем-
ное имя набора данных (DSN), определенное на машине-сервере. Оно также
требует, при необходимости, задания идентификатора пользователя и паро-
ля доступа. Последнее свойство SQL определяет запрос к базе данных в виде
 Глава 10. Динамический HTML 539

оператора SQL. Пример встраивания объекта RDS на HTML-странице пока-

зан ниже:
<OBJECT classid="clsid:BD96C556-65A3-llDO-983A-OOC04FC29E33"
ID=dsoComposer HEIGHT=0 WIDTH=0>
<PARAM NAME="Server" VALUE="[Link]
<PARAM NAME="Connect" VALUE="dsn=library;uid=guest;pwd=">
<PARAM NAME="SQL" VALUE="select * from title">
</OBJECT>

Здесь объект-источник привязывает набор данных, состоящий из всех полей

таблицы title базы данных, расположенной на сервере по адресу http://
bhvserver. Он связывается с ней посредством определенного в системе сер-
вера имени источника данных library.
Этот объект имеет большой набор свойств и методов, позволяющий выпол-
нять сложную фильтрацию и сортировку данных, а также корректировать и
добавлять их в базу данных. Более подробно ознакомиться с объектом
[Link] можно на сервере Microsoft по адресу [Link]
/isapi/ado/.
Сортировка данных в таблице
Предположим, что в файле [Link] содержатся данные по книгам, вы-
пускаемым каким-то издательством. Этот файл представляет собой файл
данных с запятой в качестве разделителя полей в записи. Каждая запись на-
чинается с новой строки. В первой строке содержатся имена полей в запи-
си. Фрагмент начала файла представлен ниже:
series, author, title
Мастер, Нортон П . , Разработка приложений в Access 97
В подлиннике, Браун М . , HTML 3.2
В подлиннике, Нортон P., Windows 98
Мастер, Мюррей У . , Создание переносимых приложений для Windows

С помощью объекта-источника TDC и элемента <SELECT> можно организо-

вать динамическое отображение в таблице данных из такого файла. В рас-
крывающемся списке <SELECT> пользователь выбирает необходимую ему
серию книг и в таблице динамически изменяется содержимое, чтобы ото-
бразить только книги выбранной серии. Исходный текст HTML-документа
можно увидеть в примере 10.10.
? : : : : ::
*1ЩР'': .:;""" "~""* " ~»-'^-<---^"--"'~-'^---"'--'" •••••••- ' ••""~

<STYLE TYPE="text/css">
DIV {background-color: lightgrey}
540 Часть II. Интерактивные Web-документы

В {color: blue}
</STYLE>
<SCRIPT>
function tChange() {
ser=new Array(3)
ser[l]='Мастер'
ser[2]='B подлиннике'
[Link]=''
fld=s_change.value
if(fid != 0) {
[Link]+='series='+ser[fid]
}
[Link] ()
}
function a_sort() {
[Link]='+author'
[Link]()
}
</SCRIPT>
</HEAD>
<OBJECT id="authorDSO"
CLASSID="clsid:333C7BC4-460F-llDO-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="[Link]">
<PARAM NAME="UseHeader" VALUE="True">
</OBJECT>
<1АВЕЬ>Серия: </LABEL>
<SELECT ID="s__change" onchange="tChange()>
<OPTION SELECTED VALUE=0>Bce
<OPTION VALUE=l>MacTep
<OPTION VALUE=2>B подлиннике
</SELECT>
<TABLE ID="elemtbl" datasrc="#authorDSO">
<THEADXTR>
<TD><DIV ID="series"XB>CepMH</Bx/DIVX/TD>
<TD><DIV ID="author" onclick='a_sort()'><B>ABTOp</Bx/DIV></TD>
<TDXDIV ID="title"XB>Ha3BaHHe</BX/DIVX/TD>
</TRX/THEAD>
<TBODY>
<TR>
<TDXDIV DATAFLD="series"X/DIVX/TD>
<TDXDIV DATAFLD="author"X/DIVX/TD>
<TDXDIV DATAFLD="title"x/DIVX/TD>
</TR>
</TBODY>
</TABLE>
Глава 10. Динамический HTML 541

Объект-источник данных TDC включается в страницу тэгом <OBJECT>. Зна-

чения его свойств задаются в тэгах <PARAM>. Обязательно должен быть опре-
делен файл исходных данных. В нашем примере — это упомянутый выше
файл [Link]. В параметре CLASSID задается уникальный регистрацион-
ный номер элемента управления ActiveX, в нашем примере элемента TDC.
При задании тела таблицы для ссылки на поля записей используются их
символические имена, определенные в первой строке файла данных. Это
можно делать, так как значение свойства UseHeader установлено равным
true.
При выборе значения в раскрывающемся списке s_change генерируется со-
бытие onchange этого элемента и вызывается функция tchange ( ) , которая
устанавливает значение свойства Filter объекта authoroso и выполняет ме-
тод Reset () для обновления отображаемых данных в соответствии с задан-
ным критерием фильтрации. Последний задается только в случае, если вы-
брана конкретная серия книг (значение свойства value объекта s_change не
раВНО Нулю) В ВИДе СТрОКИ зег!ез=Мастер ИЛИ series=B подлиннике В ЗаВИСИ-
мости от осуществленного пользователем выбора. Если сделан выбор ото-
бразить книги всех серий, то значение критерия фильтрации равно пустой
строке. После этого вызывается метод Reset () объекта-источника данных,
и обновляется содержимое таблицы. На рис. 10.28 а, б представлены два со-
стояния таблицы, отображающей исходный файл данных [Link].

Серия: [все
МШРИЙ1 |Шйа

1 Шй

Серия:

Рис. 10.28. Сортировка (а)

и фильтрация данных (б)
на HTML-странице

Примечание
Динамическое отображение таблицы полезно, когда она содержит большое
число записей, логически разбитых на мелкие группы, а пользователю как раз
и необходимо видеть эти мелкие группы данных.
542 _ Часть II. Интерактивные Web-документы

Источник данных MSHTML

Разработчики Web-документов могут задавать непосредственно в HTML-
документе необходимый набор данных и обрабатывать его, используя сам
браузер, точнее, — программы из его библиотеки динамической компоновки
[Link]. Следует отметить, что такой подход к отображению набора
данных позволяет работать с ним исключительно как с набором данных,
предоставляющим доступ только на чтение. Добавлять записи или коррек-
тировать их со страницы HTML нельзя. Отдельная HTML-страница, в кото-
рой определяется набор данных, называется страницей данных.
Когда MSHTML используется в качестве источника данных, она анализиру-
ет содержимое HTML-страницы и определяет элементы с параметрами ID.
Содержимое разных элементов с одинаковыми идентификаторами опреде-
ляет столбец набора данных, т. е. поле с именем, соответствующим значе-
нию параметра ID, разных записей набора. Одинаковые идентификаторы
могут быть у разных элементов. Для MSHTML это не имеет никакого зна-
чения, — все они будут определять один столбец набора данных. Значение
параметра ID используется в качестве значения параметра DATAFLD элемента,
к которому привязываются данные.
Набор данных из предыдущего примера можно определить в файле
author . htm следующим образом:
<DIVXSPAN ID=series>MacTep</SPAN>
<SPAN ID=author>HopTOH n.</SPAN>
<SPAN ID=title>Pa3pa6oTKa приложений в Access 97</SPANX/DIV>
<DIV><SPAN ID=series>B лодлиннике</ЗРАМ>
<SPAN ID=author>BpayH M.</SPAN>
<SPAN ID=title>HTML 3 . 2</SPANX/DIV>
<DIVXSPAN ID=series>B подлиннике</ЗРАЫ>
<SPAN ID=author>HopTOH P.</SPAN>
<SPAN ID=title>Windows 98</SPANX/DIV>
<DIVXSPAN ID=series>MacTep</SPAN>
<SPAN ID=author>Mroppen y.</SPAN>
<SPAN ID=title>Co3flaHHe переносимых приложений для Windows</SPAN>

Когда определен набор данных, можно использовать тэг <OBJECT> для при-
вязки данных к HTML-странице:
«OBJECT ID=authorDSO DATA="author .htm">
</OBJECT>

Теперь набор данных можно обычным способом отображать в HTML-эле-

ментах. Динамическая обработка подобных наборов данных требует написа-
ния скриптлетов (программных компонентов, используемых в сценариях стра-
ниц HTML и написанных на языке VBScript или JScript) и выходит за рамки
Глава 10. Динамический HTML 543

настоящей книги. На сервере Microsoft по адресу [Link]

/workshop/author/databind/ можно найти пример динамической обработки
данных, присоединенных к странице с помощью MSHTML.

Динамический HTML в Netscape Navigator

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

( Примечание J
В этом разделе нам придется часто упоминать названия двух популярных
браузеров. Для экономии места на странице и времени читателя при чтении
длинных названий везде в этом разделе браузер Internet Explorer будет обо-
значаться IE, a Netscape Navigator— NN.

Применение каскадных таблиц стилей

Каскадные таблицы стилей в NN реализованы в соответствии с рекоменда-
циями REC-CSS1 Консорциума W3 и их применение ничем не отличается
от применения в IE. Единственное отличие заключается в том, что в NN
реализовано два способа задания правил каскадных таблиц стилей. Первый
способ соответствует рекомендациям Консорциума — задавать все правила
в тэге <STYLE>, расположенном в головном разделе документа, в соответст-
вии с предложенным там же синтаксисом. В NN добавлена возможность
задания правил в тэге <STYLE> с использованием синтаксиса JavaScript и
объектной модели сценариев.
544 _ Часть II. Интерактивные Web-документы

Рассмотрим традиционное задание правила, определяющего цвет заголовка

первого уровня:
<STYLE TYPE="text/css">
<! —
HI {color: red}
—>
</STYLE>

При использовании синтаксиса JavaScript это же правило будет выглядеть так:

<STYLE TYPE="text/javascript">
document . tags . HI . color = 'red'
</STYLE>

Читатель, прочитавший раздел, посвященный объектной модели документа,

или просто проницательный читатель без труда поймет, что объект tags,
являющийся подобъектом объекта document, содержит все объекты, соответ-
ствующие типам HTML-элементов документа, а написанный оператор
JavaScript присваивает свойству color объекта HI строку со значением red.
Как и в объектной модели IE, объект document соответствует всему докумен-
ту и содержит все остальные объекты модели (является их родителем).
Сложные названия свойств каскадных таблиц стилей, содержащие дефисы,
при использовании синтаксиса JavaScript преобразуются следующим обра-
зом: из названия просто убираются дефисы. Например, свойству line-height
будет соответствовать название iineheight.
Обратим внимание на отличие в задании значения параметра TYPE тэга
<STYLE>. Его значением является "text/ javascript", что сообщает браузеру
об использовании синтаксиса JavaScript. При этом содержимое тэга <STYLE>
не надо комментировать, так как браузер, проанализировав значение пара-
метра TYPE, просто пропустит весь тэг, если он не поддерживает этот син-
таксис.

С Примечание )
В документации фирмы Netscape обычный способ задания правил каскадных
таблиц стилей называется CSS-стиль, а с использованием синтаксиса JavaScript —
JavaScript-стиль или стиль сценария. При необходимости мы также будем ис-
пользовать эту терминологию.

В стиле сценария можно использовать оператор with (объект), задающий

объект, к которому применяются свойства и методы из тела этого оператора.
Он удобен при определении нескольких значений свойств элемента одного
типа. Следующий фрагмент определяет свойства заголовка первого уровня:
with([Link]) {
color='red' ;
 Глава 10. Динамический HTML 545

textTransform = 'uppercase';
}

В каскадных таблицах стилей широко используется определение классов,

позволяющих легко изменять отображение элемента одного и того же типа.
В стиле сценария классы задаются следующим образом:
[Link] = "#44СС22" // Эти два оператора определяют
[Link] = "bold" // класс GREENBOLD, применимый
// ко всем элементам документа
[Link] = "red"; // Эти два оператора определяют
[Link] = "bold"; // класс RED1 элементов Р

[Link] = "blue"; // Этот оператор определяет класс элемента

// с параметром ID="BLUE1"

Свойства контекстных элементов (правила с контекстными селекторами)

задаются с помощью функции contextual о, параметрами которой служит
список, определяющий контекстный селектор:
contextual([Link], [Link]).color = "green";

Приведенный оператор эквивалентен следующему правилу, записанному

в CSS-стиле:
HI EM {color: green;}

Оба браузера отображают HTML-элементы с присоединенными стилями

в целом одинаково, но существуют некоторые различия в трактовках неко-
торых свойств.
В частности, наблюдается отличие при закрашивании фона абзаца, раздела
и всех заголовков. В IE закрашивается все видимое в окне браузера про-
странство, относящееся к этим элементам, а в NN — только часть, в кото-
рой расположен текст. Это расхождение иллюстрируется на рис. 10.29.

Рис. 10.29. Отображение абзаца в браузерах IE (а) и NN (б)

183ак. 944
546 Часть II, Интерактивные Web-документы

'•'.'"•':':.:T..>:.v' '::J •

Это абзац, который в документе следует непосредственно за

заголовком.

Это абзац, который в документе следует непосредственно за

заголовком.

Это абзац, который в документе следует непосредственно за заголовком.

Это абзац, который в

документе следует
lil'l
Рис. 10.30. Отображение
непосредственно за заголовком.
"плавающих" блоковых
элементов в браузерах
IE (а) и NN (б)

По-разному применяется свойство float, что связано с различной интер-

претацией перевода элементов в разряд "плавающих". В IE плавающими
элементами можно сделать только встроенные элементы, т. е. элементы, ко-
торые появляются внутри блоковых. Например, элемент <SPAN> в блоковом
элементе <р>. В NN плавающим можно сделать любой блоковый элемент,
в том числе и абзац, и заголовок. В этом случае, например, заголовок со
значением right свойства float будет выделен из нормального последова-
тельного потока отображения элементов страницы и прижат вправо, а по-
следующий абзац будет отображаться перед ним, обтекая его справа. На
рис. 10.30 показано отображение двумя браузерами следующей страницы
с установленным свойством float второго заголовка:
<HEAD>
<STYLE TYPE="text/css">
m { width:70%;
border-style:outset;
border-width:2pt,•
border-color:green;
background-color:rgb(70%, 90%,
font-weight:bold;
}
[Link] (float:right;}
</STYLE>
</HEAD>
Глава 10. Динамический HTML 547

<Н4>Н4 - обычный, float: none</H4>

<Р>Это абзац, который в документе следует непосредственно
за заголовком.</Р>
<Н4 CLASS = FLOATRIGHT>H4 - смещен вправо, float: right</H4>
<Р>Это абзац, который в документе следует непосредственно
за заголовком.</Р>

Обратите внимание на то, что установка значения свойства width заголовка

совершенно не влияет на его отображение в окне IE, но учитывается при
отображении браузером NN. Это связано с различной реализацией пози-
ционирования элементов в этих браузерах.

Позиционирование и объектная модель сценария

В каскадных таблицах стилей свойство position элемента определяет его
положение в плоскости страницы относительно других элементов страницы.
Если элемент позиционирован (значение его свойства position равно
relative или absolute), то значение свойства z-index определяет, какие по-
зиционированные элементы он перекрывает при отображении и какие эле-
менты перекрывают его. Значение свойства visibility определяет, виден
или не виден этот элемент в окне браузера.
В Internet Explorer, в соответствии с рекомендациями Консорциума W3 по
объектной модели документа, все перечисленные свойства являются обыч-
ными свойствами объектов, соответствующих элементам HTML-документа.
В Netscape Navigator, в отличие от Internet Explorer, позиционированный
элемент реализуется в виде объекта layer со своими свойствами и методами.
В этом заключается различие между IE и NN. Они по-разному отражают в
объектных моделях позиционированные элементы, что приводит к функ-
циональной несовместимости браузеров при обработке страниц, содержа-
щих сценарии динамического изменения содержимого документа с исполь-
зованием позиционирования.
В NN каждый позиционированный элемент считается слоем и отобража-
ется в объектной модели сценария в виде объекта layer, порождаемого кор-
невым объектом document. В документации по динамическому HTML в
Netscape Navigator на сервере фирмы Netscape термины "позиционирован-
ный элемент", "позиционированный блок" и "слой" являются синонимами и
представляют позиционированный элемент вместе со всем его содержимым
как одно целое.
Слои могут содержать другие слои. Если в каком-либо слое определен еще
один слой, то этот слой является вложенным для первого слоя, который,
в свою очередь, является содержащим слоем для вложенного. Эти понятия
важны для определения положения абсолютно и относительно позициони-
рованных слоев, задаваемых свойствами top и left.
548 Часть II. Интерактивные Web-документы

Положение абсолютно позиционированного слоя (значение absolute свой-

ства position) отсчитывается от левого верхнего угла содержащего его слоя,
тогда как относительно позиционированный слой (значение relative свой-
ства position) располагается относительно текущего положения в документе.
В NN для задания слоев можно использовать тэги, являющиеся расширени-
ем HTML. Тэг <IAYER> определяет слой, а тэг <ILAYER> определяет вложен-
ный слой. Однако следует учитывать, что только браузер NN поддерживает
эти расширения. Поэтому при разработке HTML-документов лучше ими не
пользоваться. Здесь они упомянуты исключительно для полноты изложения
позиционирования в NN.
Все свойства, применяемые в каскадных таблицах стилей для позициониро-
ванных элементов, применимы и для слоев в NN. Размеры слоя определя-
ются значениями свойств width и height, свойство visibility позволяет
отображать или не отображать слой и т. д.
Таким образом, статическое использование слоев дает одинаковый эффект
в обоих браузерах, если только относительно позиционированные слои вло-
жены в абсолютно позиционированные. Если это не так, то могут обнару-
житься отличия при отображении документа в IE и в NN. В каждом случае
следует просто проверять отображение документа в обоих браузерах.
Существенные отличия, как отмечалось выше, появляются при реализации
динамических эффектов, что связано с разными объектными моделями, ис-
пользуемыми этими браузерами.
Объект document имеет свойство-набор layers, в котором содержатся ссылки
на объекты layer, соответствующие созданным в документе слоям. Если из-
вестен идентификатор слоя idName, определенный в параметре ID слоя, то
получить доступ к объекту, соответствующему этому слою, можно одним из
следующих способов:
[Link]
[Link][idName]
[Link][index]

В последнем случае используется индекс слоя в наборе layers. Все слои до-
кумента располагаются в этом наборе в порядке, определяемом значениями
их свойства z-index: сначала идут слои, располагающиеся при отображении
дальше всего от пользователя, затем те, которые перекрывают предыдущие,
и т. д.
Каждый объект, соответствующий слою в документе, имеет свойство
document, которое, в свою очередь, имеет свойство-набор layers, в котором
содержатся ссылки на все вложенные в данный слой слои. Определить чис-
ло вложенных слоев можно с помощью свойства length набора layers:
•[Link][idNameLayer].[Link]
Глава 10. Динамический HTML 549

Каждый объект-слой имеет свойство, соответствующее примененному к не-

му свойству каскадных таблиц стилей. Например, определить в сценарии
значение свойства top слоя с именем layeri можно следующим оператором:
layerlTop=[Link]
Все допустимые в объектной модели сценария браузера NN свойства слоев
перечислены в табл. 10.14.

Таблица 10.14. Свойства объектов-слоев

Свойство Описание

document Представляет объект document слоя, содержащий все вложен-

ные в слой объекты: изображения, апплеты, слои и т. д.
name Идентификатор слоя, заданный в параметрах ID или NAME
left Определяет значение свойства left
top Определяет значение свойства top
pageX Смещение слоя по горизонтали относительно страницы
pageY Смещение слоя по вертикали относительно страницы
zIndex Определяет значение свойства z-index
visibility Определяет значение свойства visibility
[Link] Определяют параметры прямоугольника, представляющего ви-
[Link] димое отображение слоя. Все, что не входит в заданный прямо-
[Link] угольник, остается невидимым при отображении слоя в окне
[Link] браузера. Соответствуют свойству clip каскадных таблиц сти-
[Link] лей
[Link]
[Link] Задает графическое изображение, используемое в качестве
фона слоя
bgColor Определяет цвет фона слоя

siblingAbove Определяет вложенный в тот же слой-родитель объект-слой,

перекрывающий заданный. Если такого слоя нет, то значение
равно null

siblingBelow Определяет вложенный в тот же слой-родитель объект-слой,

перекрываемый заданным слоем. Если такого слоя нет, то зна-
чение равно null

above Определяет объект-слой из всего множества слоев документа,

перекрывающий заданный. Если такого слоя нет, то значение
равно объекту window
550 Часть II. Интерактивные Web-документы

Таблица 10.14 (окончание)

Свойство Описание

below Определяет объект-слой из всего множества слоев документа,

перекрываемый заданным слоем. Если такого слоя нет, то зна-
чение равно null

parentLayer Определяет объект-слой, содержащий заданный слой. Если

такого слоя нет, то значение равно объекту window

src Относительный или абсолютный URL-адрес файла содержимого

слоя

В объектной модели сценария определены методы объекта-слоя, которые

позволяют модифицировать его из сценария JavaScript. Набор допустимых
методов един и применяется к слоям, созданным как с помощью тэгов
<LAYER> и <ILAYER>, так и с помощью CSS-стиля. В табл. 10.15 перечислены
все методы объекта layer.

Таблица 10.15. Методы объектов-слоев

Метод Описание

moveBy(dx,dy) Перемещает слой на dx пикселов вправо и dy

пикселов влево относительно его текущего по-
ложения
moveTo(x,y) Действие аналогично действию, осуществляе-
мому при установке новых значений свойств top
И left
moveToAbsolute(x, у) Действие аналогично действию, осуществляе-
мому при установке новых значений свойств
радеХ и радеУ
resizeBy(dwidth,dheight) Изменяет размеры видимого отображения слоя
на заданную ширину и высоту. Содержимое слоя
не прорисовывается. Действие аналогично дей-
ствию, осуществляемому при установке новых
значений свойств [Link] и [Link]
resizeTo(width,height) Изменяет размеры видимого отображения слоя
до заданной ширины и высоты. Содержимое
слоя не прорисовывается. Действие аналогично
действию, осуществляемому при установке новых
значений свойств [Link] и [Link]
moveAbove(layer) Изменяет отображение слоя таким образом, что
он располагается поверх заданного параметром
метода слоя
Глава 10. Динамический HTML _ 55?

Таблица 10.15 (окончание)

Метод Описание

moveBelowf layer) Изменяет отображение слоя таким образом, что

заданный параметром метода слой располагает-
ся поверх слоя, к которому применяется метод
load(sourcestring, width) Изменяет содержимое слоя на содержимое
файла, заданного параметром sourcestring, и
устанавливает ширину слоя в соответствии с па-
раметром width

В сценарии можно динамически создать новый слой в документе. Для этого

следует определить новый объект layer с помощью конструктора Layer о:
bluelayer = document .bluelayer;
newbluelayer = new Layer (300, bluelayer);

Первый параметр конструктора — ширина слоя, а необязательный второй -

родительский слой для создаваемого слоя.
После того как новый объект-слой создан, определить его содержимое можно
установкой значения свойства src или выполнением метода load ( ) , а можно
и непосредственно записать содержимое в объект document слоя.

( Примечание ^
Создать новый слой можно только после полной загрузки документа в браузер.
Объект document только одного слоя может быть открыт для записи. Чтобы
записать содержимое следующего слоя, следует закрыть объект document
предыдущего.

Динамическое позиционирование
В данном разделе рассматривается пример создания HTML-страницы с ди-
намическим позиционированием графического изображения, который оди-
наково отображается в браузерах IE и NN.
Прежде всего, разработаем две функции, определяющие, в каком браузере
происходит отображение страницы. Функция ISNNO возвращает значение
true, если браузером является Netscape Navigator версии 4.0 и выше; функ-
ция isiEO возвращает значение true, если используется Internet Explorer.
Тексты этих функций приведены ниже:
function isNN ( )
{
// Получаем информацию о браузере
appName= navigator . appName ;
552 _ Часть II. Интерактивные Web-документы

appLongVer = navigator. appVe r s ion;

appVer = appLongVer. substring (0, 1) ;

// Проверяем Netscape Navigator версии 4+.

if ( (appName == "Netscape") && (appVer >= 4)) return true;
return false;

function isIE()
{
// Получаем информацию о браузере
appName= navigator .appName;
appLongVer = navigator .appVersion;
appVer = appLongVer. substring (0, 1);

// Проверяем Internet Explorer версии 4+.

if ((appName == "Microsoft Internet Explorer") && (appVer >= 4))
return true;
return false;

На страницу поместим графическое изображение с именем imgMove, и на-

пишем функцию moveDHTML ( ) , перемещающую это изображение:
function move DHTML ( ) {
// Задание объектов перемещения для разных браузеров
if (isNNO) targetObj = document . imgMove;
if (isIE(J) targetObj = imgMove. style;

// Перемещаем изображение на 10 пикселов вправо.

targetObj . left = parselnt (targetObj . left) + 10;

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

Теперь остается привязать перемещение изображения к нажатию кнопки.
Исходный текст HTML-страницы представлен ниже:
<SCRIPT LANGUAGE="JavaScript">
Здесь размещаются тексты трех разработанных функций
</SCRIPT>
</HEAD>
<SPAN ID="imgMove" STYLE="position: relative; top:0; left:0;">
<IMG SRC=")[Link]" ALT= "Перемести меня">
</SPAN>
<FORM >
<PXINPUT TYPE="button" УМШ;="Перемещение" onclick="moveDHTML()
</FORM>
Глава 10. Динамический HTML 553

При просмотре страницы графическое изображение буквы Ж появляется в

левой части окна браузера. Ниже расположена кнопка с надписью Переме-
щение. При нажатии на нее буква Ж смещается вправо. Это будет происхо-
дить при просмотре страницы как в браузере IE, так и в браузере NN. На
рис. 10.31 показано смещенное изображение в окне браузера Netscape
Navigator.

Рис. 10.31. Динамическое

позиционирование графического
элемента

Примечание
Приведенный пример достаточно прост. Более сложные приемы динамиче-
ского позиционирования элементов в Netscape Navigator можно найти в доку-
ментации "Dynamic HTML in Communicator" на сервере разработчика фирмы
Netscape по адресу [Link]

Загружаемые шрифты
Для повышения привлекательности HTML-документов автор может исполь-
зовать многочисленные шрифты, находящиеся в его распоряжении. Но что
произойдет, если этих шрифтов не окажется на компьютере читателя его
документов? Они будут заменены другими в соответствии с установленными
на компьютере пользователя правилами подстановки шрифтов. В этом слу-
чае, возможно, вся привлекательность HTML-страницы исчезнет.
Во избежание подобных ситуаций в браузере NN реализована возможность
загрузки необходимых для просмотра страницы шрифтов. Файл описания
шрифтов автоматически загружается с хост-сервера, на котором находится
просматриваемая страница, во временную кэш-область браузера пользовате-
ля и находится там, пока связанная с ним HTML-страница в ней хранится.
Загрузить эти шрифты с хост-машины для постоянного использования
нельзя.
Файл описания шрифтов создается в специальных программах (например
НехМас Typograph) или с помощью Font Composer Plugin для Netscape
Navigator. Работа в подобных программах достаточно проста: загружается
документ, для которого необходимо создать файл описания шрифтов, поме-
554 Часть II. Интерактивные Web-документы

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

создается файл описания шрифтов (расширение PFR), который сохраняется
на сервере разработчика.
К документу файл описания шрифтов присоединяется либо посредством
тэга <LINK>, либо через задание свойства @fontdef каскадных таблиц стилей
в тэге <STYLE>. Ниже показаны оба способа встраивания ссылки на файл
описания шрифтов:
<STYLE TYPE="text/css"><!—
Sfontdef url([Link]
—></STYLE>
<LINK REL=FONTDEF SRC="[Link]

Использование загружаемых шрифтов ничем не отличается от использова-

ния других шрифтов. Их имена и параметры можно использовать в качестве
значений параметра FACE тэга <FONT> или свойств каскадных таблиц стилей
из категории шрифтов:
<STYLE type="text/css"><!--
HI {font-family:"Impress ВТ", "Helvetica", sans-serif;}
—></STYLE>
<H1> <FONT FACE="Impress BT">B HI используется шрифт
Impress BT</FONTX/H1>

При задании загружаемого шрифта в тэге <FONT> можно использовать до-

полнительные параметры: FONT-SIZE для определения размера шрифта и
WEIGHT для определения степени жирности шрифта.
 :

ГЛАВА 11

Встраиваемые компоненты

Современные тенденции в области разработки программных продуктов ха-

рактеризуются широким использованием самостоятельных программных
компонентов как строительных единиц создаваемых приложений.
Не так давно разработанный (1995), но получивший достаточно быстрое
распространение язык Java позволяет создавать специальные программные
компоненты — апплеты, которые предназначены для встраивания в HTML-
страницы и передаче их на компьютер пользователя, где они и выполняются
в режиме интерпретации специальным модулем браузера.
Элементы управления ActiveX (ранее называвшиеся элементы управления
OLE) давно применяются в разработках программных продуктов. Они соз-
даются на основе технологии СОМ и представляют собой самостоятельные
программные единицы, выполняющиеся в определенной среде -• среде
программы-контейнера. Их возможность встраивания в HTML-страницы
обеспечивается либо самим браузером (Internet Explorer), либо специальны-
ми дополнительными модулями к нему (Netscape Navigator).
Данная глава посвящена вопросам встраивания апплетов и элементов
управления ActiveX в HTML-страницы и взаимодействия с ними из сцена-
рия JavaScript или VBScript.

Элементы управления ActiveX

Элементы управления ActiveX— это самостоятельные программные компо-
ненты, которые можно использовать в разрабатываемых приложениях для
реализации необходимых функциональных возможностей. Обратим внимание
читателя на слова "программные компоненты" в приведенном определении.
Дело в том, что элементы управления ActiveX создаются с использованием
технологии Component Object Model (COM — Компонентная объектная мо-
дель), разработанной фирмой Microsoft, и не являются самостоятельным
приложением — они выполняются только в приложении, которое позволяет
556 Часть II. Интерактивные Web-документы

встраивать элементы управления ActiveX, являясь, тем самым, для них не-
ким контейнером. Вне приложения-контейнера ни один элемент управле-
ния ActiveX невозможно запустить на выполнение и требовать от него ка-
ких-нибудь результатов.
Не всякое приложение может быть контейнером для элементов управления
ActiveX. Оно должно поддерживать технологию СОМ и предоставлять воз-
можность манипулирования встраиваемыми компонентами. Многие прило-
жения фирмы Microsoft позволяют широко использовать элементы управле-
ния ActiveX либо для расширения функциональных возможностей самого
приложения, либо для быстрого создания новых приложений, использую-
щих элементы управления ActiveX в качестве строительных блоков. К по-
добным приложениям можно отнести Microsoft Visual Basic, Microsoft Access,
Microsoft Internet Explorer и некоторые другие.
Технология СОМ— это дальнейшее развитие идеи объектно-ориентирован-
ного программирования. Она позволяет использовать объекты со своими
свойствами, методами и событиями, которые создаются не во время выпол-
нения программы, написанной на каком-либо объектно-ориентированном
языке программирования, а существуют в виде отдельных программных еди-
ниц, называемых компонентами. При включении подобного объекта-компо-
нента в тело разрабатываемой программы он раскрывает свои свойства и
методы, которые можно использовать в присущей объектно-ориентирован-
ным технологиям манере: получать или устанавливать значения его свойств,
а также выполнять доступные методы.
Для реализации какой-нибудь функциональной возможности с помощью эле-
мента управления ActiveX, например отображения дерева каталогов, програм-
мист может разработать свой элемент управления ActiveX, а может восполь-
зоваться одним из многочисленных элементов управления ActiveX, разрабо-
танных и распространяемых другими фирмами. Следует знать и помнить, что
не все они распространяются бесплатно. Поэтому, если вы решили исполь-
зовать на своей HTML-странице какой-либо элемент управления ActiveX,
следует позаботиться о приобретении лицензии на его использование у фир-
мы-изготовителя.
Преимущества использования компонентной объектной модели и элементов
управления ActiveX для разработки новых приложений очевидны: не надо
тратить времени и усилий для программирования функциональных возмож-
ностей приложения. А какие преимущества дает использование элементов
управления ActiveX в Web-документах? Прежде всего, они расширяют воз-
можности Web-документов, приближая их к полноценным приложениям.
Помните, как легко была реализована возможность работы с содержимым
базы данных прямо с HTML-страницы простым включением в ее состав
элемента управления TDC (см. главу 2 раздел "Связывание данных с докумен-
том"), который, естественно, является элементом управления ActiveX! Да-
лее, они могут добавить привлекательности к разрабатываемым страницам,
Глава 11. Встраиваемые компоненты 557

если реализуют мультимедийные эффекты, позволить отобразить данные

способом, не возможным в рамках языка HTML или даже динамического
HTML, например, вывести текст, расположенный под углом, и многое дру-
гое. И все это практически без программирования! Простое использование
тэга <OBJECT> совместно с тэгом <PARAM>, в котором задаются значения
свойств элемента управления ActiveX, — и вы читаете данные из базы данных.

Встраивание в HTML-страницу
Для встраивания в HTML-страницу внешних объектов предназначен тэг
<OBJECT>, который является контейнером для тэгов <PARAM>, определяющих
значения свойств включаемого объекта. Тэг <OBJECT> имеет несколько пара-
метров, два из которых непосредственно связаны с элементами управления
ActiveX.
Параметр CLSID задает уникальный идентификационный номер встраиваемого
на страницу элемента управления ActiveX, а значение параметра CODEBASE
определяет URL-адрес расположения исходных файлов этого элемента.
Но прежде, чем начинать описание тэга <ОВОЕСТ> и его параметров, остано-
вимся немного на вопросах установки элементов управления ActiveX на
компьютере пользователя, так как они тесно переплетаются с использовани-
ем элементов ActiveX на HTML-страницах и в Web-приложениях, реализо-
ванных с помощью встраиваемых сценариев.
Любой устанавливаемый на компьютере элемент управления ActiveX регист-
рируется в системном реестре, куда заносится и там же хранится соответст-
вующая информация. В дальнейшем эта информация используется браузе-
ром Internet Explorer для обработки HTML-страниц, содержащих встроен-
ные элементы управления ActiveX.
В разделе HKEY_CLASSES_ROOT/CLSID/ реестра хранятся уникальные
идентификационные номера всех установленных на компьютере элементов
управления ActiveX. Запись в этом разделе для элемента управления RDS,
знакомого читателю по главе 10, можно увидеть на рис. 11.1.
Для рассматриваемого элемента управления ActiveX создан раздел, названи-
ем для которого и служит уникальный идентификационный номер элемента
управления {BD96C556-65A3-iiDO-983A-ooc04FC29E33}, присваиваемый ему при
создании. Для целей применения элементов управления ActiveX на HTML-
страницах достаточно знать, что именно СОМ ответственна за присваивание
уникального идентификационного номера. Интересующийся читатель мо-
жет обратиться к документации по разработке элементов управления ActiveX
для более подробного ознакомления с механизмом назначения идентифика-
ционных номеров.
Каждый раздел — это параметр реестра. Если выделить интересующий раз-
дел в левой панели окна программы работы с реестром [Link], то на
555 Часть II. Интерактивные Web-документы

правой панели отобразится значение этого параметра. На рис. 11.1 значени-

ем выделенного раздела является [Link].

ffi S3 (BD323431-CE94-1 1СЕ-8200-080009БАБВББ) _

ffi §3 (BD323432-CE94-11CE-82DD-080009BA6B65) о /молчанию) "[Link]
Я-Ш (BD323433-CE94-11СЕ-8200-080009БАБВББ)
Ki--i3 (bd70c020-2d24-l 1 dO-9110-00004С7Б27Б2)
ф 83 (BD84B380-8CA2-1069-AB1D-08000948F634)
•»• И (BD84B381-8CA2-1069-ABlp-Q8000948FS34]
Ё-&1Щ
В Ш Implemented Categories
•Ш (7DD96801-9882-11CF-9FA9-OOAA006C42C4)«S*
•®Ш (7DD95802-9882-l1CF-9FA9-OOAA008C42C4)
: 'Ш lnprocServer32
; Ш MiscStatus

Штуреиь
: и VersionlndependentProglD
ф S3 (В096СББ6-6БАЗ-11DO-983A-OOC04FC29E36)
[* & (BDC217C6-ED16-11CD-968C-OOOOC04E4COA)
ffi И (bdc67890-4fcO-l I dO-a806-OOaa006d2ea4)

.»-

Рис. 11.1. Запись в системном реестре Windows для элемента управления RDS

Кроме записи в разделе HKEY_CLASSES_ROOT/CLSID/ для элемента

управления создается собственный раздел в каталоге HKEY_CLASSES_ROOT,
в котором параметр cisid также имеет значение, равное идентификацион-
ному номеру элемента управления. На рис. 11.2 показан раздел элемента
управления [Link].
Значением параметра cisid является уникальный идентификационный но-
мер элемента управления [Link].

д- г
if; Нз QuickTlmePreferences
•k-Ш QuickTimes/stem Й1(По /молчанию) "{В096СЫ DO-983A-OOC04FC29E33)'
«Ш QuickView
*: Si [Link]
:t:-ivj RacReg RegClass
Ш Ш ramfile

;r> ml RAR archive

c+sKlRAR Archive

Б El [Link]

Si-Ш [Link].l .5
ffl-Ш [Link] 2.0
i»ia [Link]
ЖШ [Link].1.5
Ш ^1 [Link].2.0
щ S3 [Link]

Рис. 11.2. Запись в системном реестре Windows для элемента управления RDS
Глава 11. Встраиваемые компоненты 559

Как отмечалось выше, элементы управления ActiveX встраиваются в страни-

цу HTML тэгом-контейнером <OBJECT>. Он имеет большое число парамет-
ров, и его полный синтаксис представлен ниже:
«DBJECT
АССЕ S SKE¥=клавиша
ALIGN=ABSBOTTOM | ABSMI
DOLE | BASELINE | BOTTOM I LEFT |
MIDDLE | RIGHT | TEXTTOP | TOP
CLAS 3=имя_класса
CLAS S10=идентификатор_объекта
СООЕ=имя_файла
CODEBASE=url-anpec[#version=a,b,c,d]
CODETYPE^media-тип
ОАТА=иг1-адрес
ОАТАГЬО=имя_столбца
г
ОАТАЗКС=#идентификатор_ис гочника
НЕ1СНТ=целое_число
I0=идентификатор
1АШ=язык
LANGUAGE=JAVASCRIPT | JSCRIPT I VBSCRIPT I VBS
ЫАМЕ=имя
STYLE=npaBnna_CSS
ТАВ1ЫОЕХ=целое_число
TITLE=T6KCT
ТУРЕ=М1МЕ-тип
ШОТН=целое число

Элемент HTML <OBJECT> является блоковым, поэтому для его правильной

интерпретации необходимо предусмотреть на странице закрывающий тэг
</OBJECT>. Задание всех параметров, естественно, не обязательно, но неко-
торые необходимы для правильной работы внедряемого объекта и включе-
ния его самого на HTML-страницу.
Для элементов управления ActiveX обязательно задание параметра CLASSID.
Значением его является уникальный идентификационный номер встраивае-
мого элемента управления ActiveX. При загрузке страницы браузер проверя-
ет, установлен ли элемент управления на компьютере пользователя, осуще-
ствляя его поиск в системном реестре по заданному идентификационному
номеру. В случае отсутствия записи в реестре браузер автоматически начи-
нает процедуру загрузки элемента управления ActiveX с сервера, URL-адрес
которого указан в параметре CODEBASE тэга <OBJECT>.
Значение параметра CLASSID представляет строку, определяющую встраивае-
мый объект, и для зарегистрированных элементов управления ActiveX зада-
ется в форме:
"cls id:ХХХХХХХХ-ХХХХ-ХХХХ-ХХХХ-ХХХХХХХХХХХХ"
550 Часть II. Интерактивные Web-документы

Первая часть els id: сообщает анализатору браузера, что вставляется элемент
управления ActiveX. Вторая часть представляет собой уникальный иденти-
фикационный номер этого элемента. Например, кнопка управления из на-
бора элементов управления, используемых при создании форм в приложе-
ниях Office 97 фирмы Microsoft, встраивается на HTML-страницу при по-
мощи следующего тэга:
«DBJECT ID=cmdl CLASSID="CLSID:D7053240-CE69-11CD-A777-OODD01143C57">
</OBJECT>

В параметре CODEBASE задается адрес компонента, по которому браузер мо-

жет загрузить его на компьютере пользователя в случае отсутствия:
«DBJECT ID="myActX" WIDTH=32 HEIGHT=32
CLASSID="CLSID:12D3959D-5048-11D3-A272-8C0305C10000"
CODEBASE="[Link]
#Version=l,0,0,0">
</OBJECT>

В этом примере определен полный адрес элемента управления, причем об-

ратим внимание читателя на расширение CAB загружаемого файла. Очень
часто для ускорения загрузки разнообразных компонентов они пересылают-
ся по сети в упакованном виде. В данном случае элемент управления упако-
ван программой [Link], используемой фирмой Microsoft для упаковки и
распространения своих продуктов.
После адреса элемента управления задается его версия в виде:
#version=a,b,c,d, где а и ь представляют, соответственно, старшее и млад-
шее слово максимально доступной на сервере версии элемента управления,
а с и d — соответственно старшее и младшее слово минимально доступной
на сервере версии элемента управления. Эти значения используются браузе-
ром в процессе принятия решения о загрузке элемента управления с серве-
ра. Если на компьютере пользователя установлена более новая версия эле-
мента управления, то загрузка не производится. В приведенном примере,
если на компьютере пользователя будет установлена версия элемента управ-
ления выше, чем 1.0, то загрузки не будет.
Значения, определяющие интервал доступных версий компонента могут
быть все установлены равными "-i". В этом случае элемент управления за-
гружается, если дата выпуска его версии на сервере позже даты его установ-
ки на компьютере пользователя.
Параметры WIDTH и HEIGHT задают в пикселах размеры визуального интер-
фейса элемента управления ActiveX, если он у него существует. Например,
кнопка управления или метка, реализованные в виде элементов управления
ActiveX, имеют визуальные интерфейсы, а элементы управления RDS или
TDC, позволяющие работать с данными, не имеют.
Глава 11, Встраиваемые компоненты 561

Значение параметра ACCESSKEY определяет клавишу быстрого доступа к эле-

менту управления. Это означает, что при одновременном нажатии комбина-
ции клавиш <Alt> и заданной, элемент управления получает фокус.

( Примечание J
При получении фокуса некоторыми элементами управления выполняются
предписанные им по умолчанию действия. Например, если фокус получает
кнопка управления, то генерируется событие click этой кнопки и выполняются
предусмотренные в процедуре обработки этого события действия. Если фокус
получает элемент управления OptionButton (Переключатель), то также гене-
рируется событие Click, и свойство checked (выбран) переключателя прини-
мает противоположное значение, отображая новое состояние переключателя:
если он был выбран, то устанавливается в положение "не выбран", и наоборот.

Каждый элемент управления ActiveX, являясь компонентом, раскрывает

свои свойства и методы программе-контейнеру. При включении элемента
управления на HTML-страницу можно задать значения его свойств в тэгах
<PARAM>, содержащихся в теле тэга «ЭВОЕСТХ Тэг <PARAM> не является тэгом-
контейнером и ему не требуется закрывающий тэг </PARAM>. Название свой-
ства и его значение определяются параметрами NAME и VALUE тэга <PARAM>:
<OBJECT ID="myActX" WIDTH=32 HEIGHT=32
CLASSID="CLSID:12D3959D-5048-11D3-A272-8C0305C10000"
CODEBASE="[Link]
#Version=l,0,0,0">
<PARAM NAME="Value" VALUE="TeKCT">
<PARAM NAME="TextColor" VALUE="red">
</OBJECT>

В этом примере задаются значения двух свойств элемента управления. Если

значения свойств не заданы при внедрении элемента управления, то он
инициализируется со значениями свойств по умолчанию.

(" Примечание ^
Все свойства и методы элемента управления ActiveX можно найти в докумен-
тации, поставляемой продавцом элемента управления.

Элементы управления ActiveX и сценарии

Каждый встроенный на HTML-страницу элемент управления ActiveX в объ-
ектной модели документа браузера Internet Explorer представляется в виде
объекта object. Свойства, методы и события этого объекта соответствуют
свойствам, методам и событиям соответствующего элемента управления
ActiveX.
562 Часть II. Интерактивные Web-документы

В объектной модели документа реализованы свойства, соответствующие па-

раметрам тэга «ЭВОЕСТХ Например, свойство className соответствует пара-
метру CLASS тэга. Может оказаться, что реализация внедренного объекта
поддерживает какое-либо свойство или метод с таким же названием, опре-
деленным в реализации объектной модели. Во избежание конфликтов в та-
ких случаях следует использовать свойство obj ect объекта для доступа к со-
ответствующему свойству или методу, реализованному внедренным объек-
том. Например, если в объектной модели и в самом элементе управления
ActiveX реализован метод itemo, то следующие операторы обеспечивают,
соответственно, доступ к методу объектной модели и самого объекта:
[Link]() // метод объектной модели
[Link]() // метод элемента управления

В этих операторах nameOf object — имя объекта, определенное в параметре

ID тэга <OBJECT>.
События, поддерживаемые элементом управления ActiveX, посылаются не-
посредственно объекту object, представляющему в объектной модели эле-
мент управления. В сценарии можно определить обработчик событий -
процедуру, выполняющуюся при генерировании определенного события
элемента управления.
Определение обработчика событий для элементов управления ActiveX в
Internet Explorer 4.0 несколько не укладывается в общепринятые нормы на-
значения процедуры обработки события какого-либо HTML-элемента. За-
дание обработчика события опСобытие в качестве параметра тэга <OBJECT> не
приводит к желаемым результатам. Чтобы определить процедуру обработки
события элемента управления ActiveX, следует воспользоваться тэгом
<SCRIPT> с параметрами FOR и EVENT (см. главу 9 "Выполняемые сценарии"):
<SCRIPT ГОК=имяЭлемента ЕУЕЫТ=Событие LANGUAGE=[JavaScript I VBScript]>
исходный текст процедуры обработки события
</SCRIPT>

С помощью такого синтаксиса тэга <SCRIPT> можно определять обработчики

событий как в языке JavaScript, так и в языке VBScript, не забывая указы-
вать последний явно в параметре LANGUAGE. По умолчанию любой браузер
использует JavaScript в качестве языка сценария.
В VBScript обработчик события для элемента управления ActiveX можно оп-
ределить, также используя специальные правила именования процедур, вы-
зываемых в ответ на возникновение определенного события для определен-
ного объекта. Имя такой процедуры составляется из имени объекта и назва-
ния события, соединенных знаком подчеркивания ' _". Например, если
элемент управления определен с именем Treeviewi и необходимо создать
процедуру обработки события click, то достаточно определить процедуру
Глава 11. Встраиваемые компоненты 563

с именем Treeviewi_ciick. Внимательный читатель тотчас же заметит, что

это несколько отличается от подобного же правила для процедур обработки
событий обычных HTML-элементов, для которых во второй части имени
процедуры задается не имя самого события, а обработчик события с пре-
фиксом on перед именем события. Если бы объект TreeViewl был обычным
объектом, соответствующим HTML-элементу, то имя процедуры обработки
его события click было бы Treeviewl_onciick. Такое задание имени про-
цедуры обработки событий элементов управления ActtiveX является исклю-
чением и его следует помнить, так как если для элемента управления
ActiveX задать процедуру по правилам VBScript, то интерпретатор не сгене-
рирует никакой ошибки, но и никакого действия не будет выполняться при
возникновении соответствующего события.
В примере 11.1 показано, как правильно обрабатывать щелчок кнопкой
мыши на элементе управления Label (Метка), поставляемого вместе с Inter-
net Explorer 4.0.

<HTML>
<SCRIPT LANGUAGE="VBScript">
<! —
Sub lblActivel_Click
[Link] = ([Link] + 45) Mod 360
End Sub
—>
</SCRIPT>
</HEAD>
<BODY>
<H2 STYLE="color: blue; background-color: lightgrey">
Пример 11.1 Обработка щелчка на элементе управления ActiveX
</Н2>
<Р>Щелчок кнопкой мыши на слове "Текст" поворачивает его
на 45 градусов!<Р>
<DIV>
<OBJECT CLASSID="clsid:99B42120-6EC7-11CF-A6C7-OOAAOOA47DD2"
ID=lblActivel
WIDTH=150
HEIGHT=150 >
<PARAM NAME="Angle" VALUE="0">
<PARAM NAME="Alignment" VALUE="4">
<PARAM NAME="BackStyle" VALUE="0">
<PARAM NAME="Caption" VALUE="TEKCT">
<PARAM NAME="FontName" VALUE="Verdana, Arial, Helvetica">
<PARAM NAME="FontSize" VALUE="20">
564 _ Часть II, Интерактивные Web-документы

<PARAM NAME="FontBold" VALUE="1">

<PARAM NAME="FrColor" VALUE="0">
</OBJECT>

</BODY>

Используемый в этом примере элемент управления имеет свойство Angle,

определяющее наклон текста, задаваемого в свойстве caption, относительно
горизонтали. Первоначальное значение этого свойства равно 0°. Когда поль-
зователь щелкает кнопкой мыши на содержимом этого элемента управле-
ния, генерируется событие click, которое перехватывается и обрабатывается
процедурой ibiActivei_ciick, имя которой определено в соответствии с из-
ложенными выше правилами. Эта процедура добавляет 45° к значению
свойства Angle элемента управления и приводит его к диапазону от 0° до
360°, если новое значение угла поворота выходит за указанный диапазон.
Изменение значения свойства приводит к тому, что надпись "ТЕКСТ" пово-
рачивается на 45° относительно своего предыдущего положения.
Следует заметить, что событие, генерируемое для элемента управления
ActiveX, как и любое событие в объектной модели документа, "всплывает"
вверх по иерархии объектов документа и обрабатывается соответствующими
обработчиками событий объектов-контейнеров верхних уровней.
Обратим внимание на то, что в примере 11.1 элемент управления Label со-
держится в тэге раздела <DIV>. Если задать обработчик события onclick для
этого раздела, например, в виде вызова окна предупреждения
<DIV onclick="alert ( 'Я всплыл из тЗга DIV!')>

то при щелчке кнопкой мыши на метке кроме поворота текста будет ото-
бражаться диалоговое окно с надписью "Я всплыл из тэга DIV".
Вставка на HTML-страницу элементов управления ActiveX связано со зна-
нием его уникального идентификационного номера, а также всех доступных
свойств, методов и событий элемента управления. Существуют средства раз-
работки Web-документов, автоматизирующие процесс встраивания элемен-
тов управления ActiveX на HTML-страницы.
Одним из первых подобных средств была программа Microsoft ActiveX
Control Pad, которая послужила основой для редактора FrontPage, входящего
в целый комплекс программного обеспечения FrontPage 98 фирмы Micro-
soft, предназначенный для разработки и поддержки простого "домашнего"
Web-сервера.

Примечание
Программа Microsoft ActiveX Control Pad свободно распространяется в Интер-
нете и доступна на сервере разработчика фирмы Microsoft по адресу http://
[Link]/workshop/.
Глава 11. Встраиваемые компоненты 565

Программа FrontPage 98 получила дальнейшее развитие и в настоящее время

ее новая модификация под названием FrontPage 2000 интегрирована в Micro-
soft Office 2000.
В следующем разделе будет описана технология включения элементов управ-
ления ActiveX на HTML-страницу в редакторе FrontPage 98, так как
FrontPage 2000 еще не получил большого распространения, а основные
приемы работы остаются такими же, как и в редакторе FrontPage 98.

Редактор FrontPage 98
Редактор FrontPage предназначен для создания, разработки и редактирова-
ния Web-документов. При добавлении текста, изображений, таблиц и других
элементов на страницу редактор FrontPage отображает их в том виде, какой
они будут иметь в окне браузера. Знание языка HTML не обязательно, так
как FrontPage в конечном итоге сам создает HTML-страницу, содержащую
все включенные разработчиком элементы. Этот редактор может генериро-
вать все известные тэги HTML, включая свойства каскадных таблиц стилей,
фреймы и элементы управления ActiveX.
Его рабочая область состоит из трех вкладок, переход между которыми осу-
ществляется с помощью расположенных в нижней части рабочей области
ярлычков (рис. 11.3). На каждой вкладке разрабатываемый или редактируе-
мый HTML-документ имеет разное представление.

с Примечание
Описание работы с элементами управления ActiveX в редакторе FrontPage бу-
дет производиться на примере английской версии редактора, поэтому указан-
ные в скобках русские названия меню, команд, полей, списков и т. д. могут не
соответствовать русской версии редактора.

Ярлыки вкладок
Рис. 11.3. Общий вид интерфейса редактора FrontPage 98
566 Часть II. Интерактивные Web-документы

Вкладка Normal (Нормальная) является рабочей. Именно здесь осуществля-

ется создание и разработка HTML-страницы. Большинство вставляемых
элементов имеют такой же внешний вид, что и в окне браузера, но их рас-
положение не отражает окончательную компоновку страницы.
Переход на вкладку HTML позволяет увидеть исходный текст HTML разра-
батываемой или редактируемой страницы, причем пользователь может его
редактировать, что достаточно удобно при внесении небольших корректиро-
вок в исходный текст.
На вкладке Preview (Просмотр) можно посмотреть Web-документ так, как он
будет отображаться в окне браузера. Здесь нельзя вносить никакие измене-
ния в разрабатываемую страницу.
На рис. 11.4 показан вид HTML-страницы примера 11.1 на всех трех вклад-
ках редактора FrontPage 98.
На рис. 11.4, а видно, что встроенный на страницу элемент управления
ActiveX (а читатель помнит, что в примере 11.1 использовался элемент
управления Label) на основной, рабочей вкладке представляется специаль-
ным графическим изображением — пиктограммой ActiveX. Причем ширина
и высота этой пиктограммы соответствуют ширине и высоте элемента
управления, определенными, соответственно, в параметрах WIDTH и HEIGHT
тэга <OBJECT>, задающего элемент управления ActiveX.
Двойной щелчок на пиктограмме отображает диалоговое окно, в котором
можно произвести корректировку значений свойств элемента управления,
добавить или изменить установки свойств каскадных таблиц стилей, а также
откорректировать старые или добавить новые процедуры обработки событий
элемента управления.
В редакторе FrontPage любой элемент добавляется на страницу посредством
команд меню Insert (Вставить). Вставка элемента управления ActiveX осуще-
ствляется вызовом команды ActiveX Control (Элемент управления ActiveX)
подменю Advanced (Дополнительно) этого меню. Дополнительная информа-
ция относительно встраиваемого элемента управления ActiveX задается
в отображаемом этой командой диалоговом окне ActiveX Control Properties
(Свойства элемента управления ActiveX), показанном на рис. 11.5.
В раскрывающемся списке Pick a Control (Выберите элемент управления)
следует выбрать элемент управления ActiveX. Этот список содержит все, ус-
тановленные на компьютере элементы управления ActiveX.
В полях этого диалогового окна вводятся значения параметров тэга <OBJECT>,
который встраивает выбранный элемент управления ActiveX на HTML-стра-
ницу. Каждое поле соответствует определенному параметру тэга, название
которого ясно из названия самого поля. Например, поле Code Source соот-
ветствует параметру CODEBASE, поле Data Source — параметру DATA и т. д.
Глава 11. Встраиваемые компоненты 567

!»•>- Ш t :•№

Щелчок кнопкой мыши на слове "Текст" поворачивает его на 45 градусов!

.1 > * ы ; * » А . • -'6- ЩИ Я 1 I I

целчка на элемент* управления Activ«X</h2>

Сг..>Ш«лчок кнопкой кыши на ело

: 99B42120-6EC7-11CF-A6C7-DOAADOA47DD2" ]:D-'lblAct i v e l " К

£&&* ..'"< ••• V A ; - ' | ч ? • Щ | 1II ;* |

"~~Т|: I • - | " I ^ • i-V ;;;;i^; I

Щелчок кнопкой мыши на слове "Текст" поворачивает его на 45 градусов!

ТЕКСТ

Рис. 11.4. Одна и та же HTML-страница на разных вкладках

рабочего окна редактора FrontPage 98
 568 Часть II. Интерактивные Web-документы

ActiveX Control Properties

Label Object

(Спеяуетустан

ше:///0:/Интерактивные/

i;<«(с'мл»,'- I
//[Link]/

Рис. 11.5. Диалоговое окно ActiveX Control Properties

Для заполненного диалогового окна на рис. 11.5 редактор FrontPage вставит

в исходный текст HTML-страницы следующий тэг <OBJECT> с заданными
значениями параметров:
<object align="top" codebase="[Link]
id="lb!2" border="5" hspace="20"
vspace="30" width="200" height="100"
data="[Link]
classid="clsid:99B42120-6EC7-HCF-A6C7-OOAAOOA47DD2">
Следует установить ЭУ Label</object>

Совет
Сопоставление параметров и их значений в приведенном примере со значе-
ниями полей диалогового окна на рис. 11.5 поможет найти соответствие между
полями формы и параметрами тэга <OBJECT>, если оно не достаточно ясно из
названий полей.

Обратим внимание только на параметр CLASSIC, в котором задается уни-

кальный идентификационный номер элемента управления. Редактор авто-
матически определяет его в реестре системы и вставляет в качестве значения
параметра CLASSID, избавляя разработчика от самостоятельного поиска иден-
тификационного номера в реестре.
Однако пока остаются не определенными значения свойств элемента управ-
ления, задаваемые в тэгах <PARAM>, содержащихся в теле тэга <OBJECT>. Уста-
новка значений доступных свойств элемента управления осуществляется
Глава 11. Встраиваемые компоненты 569

в диалоговом окне редактора свойств, если элемент управления установлен

и поддерживает локальное редактирование свойств, или в диалоговом окне
Object Parameters (Параметры объекта) в противном случае. Окно Object
Parameters отображается нажатием кнопки Properties (Свойства) диалогового
окна ActiveX Control Properties.
Элемент Label Control, используемый в нашем примере, не поддерживает
локальное редактирование свойств, поэтому установку его свойств прихо-
дится осуществлять в диалоговом окне Object Parameters, которое требует
знания всех свойств элемента управления и их допустимых значений
(рис. 11.6, а). В нередактируемом списке этого диалогового окна отобража-
ются названия и значения установленных свойств. В поле Attribute name
(Имя параметра) отображается имя свойства, которое задается в параметре
NAME тэга <PARAM>, а поле Value (Значение) содержит его значение, задавае-
мое параметром VALUE. Добавление или изменение значения свойства осу-
ществляется нажатием кнопок Add (Добавить) или Modify (Изменить). При
этом отображается диалоговое окно Edit Object Properties (Редактирование
свойств объекта), в полях которого задается название свойства и его значе-
ние (рис. 11.6, б).

Рис. 11.6. Установка значений свойств элемента управления ActiveX

в окне Object Parameters
 570 Часть II. Интерактивные Web-документы

Совет
Для элемента управления Label Control программа MS ActiveX Control Pad
отобразит все устанавливаемые свойства элемента в редакторе свойств. Если
FrontPage по какой-либо причине не отображает для элемента управления ре-
дактор свойств, а вы забыли названия некоторых свойств и нет под рукой доку-
ментации, можно попробовать использовать упомянутую программу, которая
свободно распространяется в Интернете.

Редактор свойств для элемента управления ActiveX, поддерживающего ло-

кальное редактирование свойств, представляет два окна: в одном отобража-
ется визуальный интерфейс элемента управления или его пиктограмма, если
у элемента нет визуального интерфейса, другое окно представляет окно ре-
дактирования свойств, хорошо знакомое всем, работающим с визуальными
системами программирования. Два окна редактора свойств для элемента
управления Calendar Control 8.0 показаны на рис. 11.7 (а — визуальный ин-
терфейс, б — окно свойств).
Выбирая в окне свойств необходимый параметр, можно изменять его значе-
ние. Это изменение немедленно отображается в окне визуального интер-
фейса, если свойство влияет на его параметры. Некоторые свойства элемен-
та можно менять в окне визуального интерфейса, например ширину и высо-
ту элемента. Их изменение также будет отображаться в окне свойств.

ilieOOOOOOf- Button Face

Рис. 11.7. Окна редактора свойств элемента управления ActiveX

По завершении редактирования свойств элемента управления ActiveX и за-

крытия диалогового окна ActiveX Control Properties, в исходном тексте
HTML-страницы в тэг <OBJECT> вставляются все необходимые тэги <PARAM>,
определяющие значения свойств элемента управления. Для нашего примера
после добавления значения свойства Angle тэг <OBJECT> будет выглядеть сле-
дующим образом:
<object align="top" codebase="[Link]
id="lb!2" border="5" hspace="20"
Глава 11. Встраиваемые компоненты 571
vspace="30" width="200" height="100"
data="[Link]
1
classid="clsid:99B42120-6EC7-llCF-A6C7-OOAAOOA47DD2 '>
<param name="Size" value="3563;3598">
<param name^"Angle" value="10">
Следует установить ЭУ Label</object>

Добавление обработчиков событий элементов управления ActiveX на стра-

ницу HTML в программе FrontPage 98 так же просто, как и встраивание и
изменение свойств элементов управления ActiveX. Для этого предназначена
команда Script Wizard (Мастер сценария) контекстного меню элемента
управления ActiveX, которое отображается щелчком правой кнопки мыши
на элементе управления при работе на вкладке Normal. Эта команда отобра-
жает диалоговое окно Мастера сценария (рис. 11.8.), в котором задаются все
необходимые параметры и действия для процедуры обработки события.
В заголовке диалогового окна в скобках после имени файла отображается
используемый язык сценария: VBScript или JavaScript. Установка языка сце-
нария осуществляется командой Insert, Advanced, Script (Вставка, Дополни-
тельно, Сценарий), в диалоговом окне которой в группе переключателей
Language (Язык) следует выбрать используемый язык сценария.

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

Script Wizard - New Page 1 (JScript)

. 1Ы2
О Change Global Variables
ti а 1ыг
• о DblClick ;•• •& Procedures
<> MouseDown Й G window
•- О MouseMove
О MouseUp
т
1 window jfj

ill:
Рис. 11.8. Диалоговое
окно Мастера сценария
572 Часть II. Интерактивные Web-документы

Диалоговое окно Мастера сценария состоит из трех панелей. В панели

Select an Event (Выбрать событие) отображаются в алфавитном порядке все
элементы редактируемой HTML-страницы, которые могут генерировать со-
бытия. Двойной щелчок на любом из элементов раскрывает список доступ-
ных для программирования событий этого элемента. При выборе какого-
либо события элемента, для которого необходимо написать процедуру его
обработки, над нижней панелью появляется заголовок, представляющий
собой тэг <SCRIPT> с соответствующими параметрами FOR и EVENT. Теперь
в рабочем поле этой панели можно вводить операторы процедуры.
Сделаем небольшое замечание, что подобное поведение редактора сценария
происходит только тогда, когда в нижней части его диалогового окна вы-
бран переключатель Code View (Просмотр кода). Выбор этого режима рабо-
ты редактора сценария позволяет пользователю в рабочей области нижней
панели набирать исходный текст сценария.
При выборе переключателя List View (Просмотр списка) включается режим
создания сценария простым указанием необходимых действий из соответст-
вующего списка. Более подробно об этом режиме можно прочитать в любой
книге по FrontPage 98.
В панели Insert Actions (Ввод действий) можно найти значки, соответст-
вующие доступным в сценарии объектам, например, на рис. 11.8 встроен-
ный нами на страницу HTML под именем 1Ы2 элемент управления Label.
Двойной щелчок на элементе раскрывает список его доступных свойств,
который можно использовать при ссылке на свойства элемента управления
в процессе написания сценария: двойной щелчок на свойстве в этом списке
помещает ссылку на свойство элемента управления в рабочее поле панели
написания сценария, как показано на рис. 11.9.
Script Wizard New Page 1 (VBScnpl)

ft. 1Ы2 . 1Ы2

; О Change [D AboutBox
Ш Alignment
I O DblClick ••EH ЦВН
; О MouseDown m BackColor
... о MouseMove -a BackStyle
< О MouseUp Ш Botlndex
П window

1Ы[Link]

Рис. 11.9. Создание

—''-'''-"'9' aiJ процедуры обработки
события в окне Мастера
сценария
Глава 1 1. Встраиваемые компоненты 573

Теперь можно просто продолжить оператор, присвоив этому свойству, на-

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

( Примечание ^
В списке событий элемента управления те события, для которых созданы про-
цедуры обработки событий, помечены закрашенным ромбиком.

Редактор сценария позволяет создавать отдельные процедуры, которые

можно использовать в других процедурах обработки событий, определять
глобальные переменные, доступные всем процедурам страницы. Их можно
создать, установив курсор на элементе Global Variables (Глобальные пере-
менные) или Procedures (Процедуры) панели Insert Actions, и, щелкнув пра-
вой кнопкой мыши, в контекстном меню выбрать команду New Global
Variable (Новая глобальная переменная) для создания новой переменной
или New Procedure (Новая процедура) для создания отдельной процедуры.
Мы кратко остановились на возможностях FrontPage 98, имея в виду его
использование для внедрения элементов управления ActiveX на HTML-стра-
ницы, а также написания процедур обработки их событий, хотя возможно-
сти этого редактора достаточно велики и позволяют быстро и эффективно
создавать великолепные Web-документы.

Безопасность
и элементы управления ActiveX
Вопрос о безопасности компьютера пользователя, подключенного к любой
сети, является одним из важнейших в ряду других вопросов, связанных с
получением внешних данных. Здесь возникает достаточно много проблем,
знание о существовании которых уже может оградить пользователя от воз-
можных неприятностей. Несанкционированный доступ к информации, на-
ходящейся на компьютере, запуск потенциально опасных программ, про-
никновение "вирусов" и многое другое — все это относится к безопасности
компьютера.
Пользователь "путешествует" по сети Интернет и получает информацию с
помощью специальных программ — браузеров (от английского browse — чи-
тать, просматривать). Каждый браузер поддерживает определенную страте-
гию безопасности, предупреждая пользователя о потенциально опасных за-
гружаемых компонентах.
Internet Explorer 4.0 позволяет пользователю установить три уровня безопас-
ности: высокий, средний и низкий. Каждый уровень характеризуется свои-
ми ограничениями на загрузку из сети программ, файлов, изображений и
574 Часть II. Интерактивные Web-документы

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

ально опасных программ (как в случае высокого уровня безопасности) или
разрешение, даже без дополнительного информирования пользователя, за-
гружать на компьютер все, что встретится на HTML-странице (как в случае
низкого уровня безопасности).
Широко используемые на HTML-страницах объекты — Java-апплеты и эле-
менты управления ActiveX — также разрабатываются с учетом их безопас-
ного применения. Стратегии безопасности для этих двух типов объектов
различны. Если средства разработки Java-апплетов вообще не позволяют им
обращаться к информации, расположенной на компьютере, то с элементами
управления ActiveX дело обстоит немного сложнее. Последние используются
не только в Web-приложениях, но и как строительные единицы при разра-
ботке обычных приложений. Поэтому, естественно, ни одна среда разработ-
ки элементов управления ActiveX не накладывает ограничений на доступ к
информации, хранящейся на компьютере, где используется этот элемент.
Каким же образом можно ограничить доступ к "закрытой" информации
элементу управления ActiveX? Это достигается совместным использованием
системы безопасности браузера и мероприятиями, связанными с регистра-
цией и установкой элементов управления ActiveX на компьютере пользова-
теля при загрузке HTML-страницы.

Цифровая подпись
Если используемый на странице элемент управления ActiveX не установлен
на компьютере пользователя, то браузер начнет процедуру загрузки и уста-
новки элемента управления на этом компьютере. Но, прежде чем загружать
необходимые файлы, браузер проверит, снабжен ли элемент управления
цифровой подписью, и если да, то в диалоговом окне отобразит содержимое
цифровой подписи, если нет — предупредит пользователя о том, что будет
загружаться элемент управления без цифровой подписи. Пользователь сам
решает, стоит ли ему загружать такой элемент управления, который создан
не известно кем и может быть потенциально опасен. На рис. 11.10 показано
диалоговое окно безопасности браузера Internet Explorer 4.0 при загрузке
элемента управления ActiveX, снабженного цифровой подписью.
В диалоговом окне на рис. 11.10 сообщается, что будет установлен элемент
управления Microsoft Windows Media Player, подписанный 07.07.98 и рас-
пространяемый фирмой Microsoft Corporation. Подлинность распространи-
теля установлена организацией VeriSign.
Выделенная полужирньгм шрифтом информация в предыдущем абзаце взята
из цифровой подписи, которой снабжен элемент управления Microsoft
Windows Media Player. Пользователь по отображенной информации решает,
можно ли разрешить загрузку элемента управления или нет.
Глава 11. Встраиваемые компоненты 575

Security Warning
"M''i:n;;![Link],..,.• > ' , , - , ; •

You f.I'[Link]/V'HW 111!'; «;I)tfiri1 if VCD l:n',\ Mil1 Mrti iff

Рис. 11.10. Диалоговое окно безопасности браузера Internet Explorer 4.0

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

Предупреждение
Подумайте, стоит ли загружать элемент управления ActiveX от непроверенного
поставщика и, в особенности, без цифровой подписи, так как следующие вер-
сии устанавливаются без предупреждающего сообщения и потенциально могут
нанести вред компьютеру.
Каким образом разработчик элемента управления ActiveX снабжает свой
элемент цифровой подписью? Для этого он, прежде всего, получает соответ-
ствующий сертификат подлинности от организации, уполномоченной на
это. Одной из таких организаций является VeriSign, сервер которой можно
найти по адресу [Link]
Основная функция организации типа VeriSign — проверить подлинность и
правильность информации о фирме или индивидуальном программисте, же-
лающих подписывать свои продукты. Сертификат, по существу, является
цифровой идентификационной карточкой производителя программного
обеспечения и аналогичен товарному знаку на рынке обычных продуктов.
Приходя в магазин и покупая товар, мы обращаем внимание на фирму-
производителя, которую идентифицируем по зарегистрированной торговой
марке. Точно так же мы можем теперь делать и в сети Интернет с загружае-
мым программным обеспечением.
576 Часть II. Интерактивные Web-документы

Существует два типа сертификатов, выдаваемых для создания цифровой

подписи: сертификат класса 2 и сертификат класса 3.
Сертификат класса 2 выдается индивидуальному программисту, публикую-
щему в Интернете свои программы. Для его получения он должен предста-
вить в организацию, выдающую сертификаты, информацию о себе: имя, ад-
рес, адрес электронной почты, дату рождения и номер карточки социаль-
ного страхования (Social Security Number). После проверки предоставленной
информации ему выдается сертификат сроком на один год. Заметим, что
при получении сертификата он обязан оплатить его стоимость в размере
20 долларов США.
Сертификат класса 3 выдается фирмам-производителям программного обес-
печения, и его стоимость составляет 400 долларов США в год. Для его полу-
чения необходимо представить название фирмы, место регистрации, кон-
тактные адреса и телефоны, а также рейтинг фирмы в соответствии с мето-
дикой Dun-and-Bradstreet.
Как обратил внимание читатель, сертификат имеет ограниченный срок дей-
ствия, и по истечении этого срока требует своего возобновления.
После получения сертификата с помощью специального программного обес-
печения, поставляемого разными фирмами, производитель программного
продукта вставляет цифровую подпись в двоичный код распространяемого
им программного обеспечения, например элемента управления ActiveX.
Таким образом, действующая цифровая подпись гарантирует, что загружае-
мый элемент управления ActiveX произведен конкретной фирмой или ли-
цом, и подтверждает, что он никем не был изменен со дня его подписания
фирмой-производителем. Однако она еще не гарантирует безопасности эле-
мента управления ActiveX.

Безопасное использование
элементов управления ActiveX
Безопасность — понятие достаточно субъективное. То, что для одного поль-
зователя может казаться потенциально опасным, другому пользователю по-
кажется совершенно безобидным. Но существует ряд общепризнанных дей-
ствий, которые не должен выполнять безопасный элемент управления
ActiveX. К ним относятся:
О Доступ к информации, расположенной на локальном компьютере, вклю-
чая информацию о пользователе.
П Предоставление закрытой, частной информации о локальном компьюте-
ре или сети.
П Модификация или разрушение информации, находящейся на локальном
компьютере или в сети.
Глава 11. Встраиваемые компоненты 577

О Ошибки в работе элемента управления, которые потенциально могут

полностью вывести из строя браузер.
П Полный захват процессора или памяти компьютера во время своей работы.
О Выполнение потенциально опасных системных команд, включая выпол-
нение загрузочных модулей.
Чтобы пользователь элемента управления ActiveX был уверен в том, что все
перечисленные действия не выполняются приобретенным элементом управ-
ления, разработчик обычно включает в процедуру установки элемента его
регистрацию в реестре как безопасного.
Существует два типа безопасности, применимых не только к элементам
управления ActiveX, но и любым выполняемым программным объектам:
безопасность при инициализации и безопасность использования во встроенных
сценариях.
Для инициализации элементу управления ActiveX могут потребоваться дан-
ные, задаваемые пользователем или поступающие из внешних источников.
В этом действии скрывается потенциальная возможность пробить брешь в
безопасности компьютера пользователя. Внешние источники данных могут
оказаться ненадежными, а заданные пользователем данные могут привести
элемент управления в неуправляемое состояние, в котором он начнет, на-
пример, изменять значения ключей системного реестра. Элемент управле-
ния, который гарантирует надежность источника данных для инициализа-
ции, а также гарантирует, что он правильно обрабатывает любые пользова-
тельские данные, не допуская разрушения системы локального компьютера,
считается элементом управления, безопасным при инициализации.
Наибольший эффект от элемента управления ActiveX достигается его совме-
стным использованием со встроенным на HTML-страницу сценарием. Мо-
жет оказаться, что специально написанный сценарий для безопасного и по-
лученного из надежного источника элемента управления ActiveX вызовет его
методы и назначит такие значения его свойствам, что элемент управления
опять начнет "ломать" систему безопасности компьютера или разрушать
системные данные. Элемент управления, который гарантирует надежность
применения его методов при любой последовательности их вызовов и при
любых значениях параметров, а также при любых значениях его свойств,
считается надежным при использовании во встроенных сценариях.
При установке на компьютере пользователя элемента управления ActiveX,
помеченного разработчиком безопасным при инициализации и использова-
нии в сценариях, в разделе системного реестра этого элемента управления
создается ключ Implemented Categories (Реализованные категории), содер-
жащий два подключа, отмечающие соответствующие категории безопасности
Элемента управления. ПОДКЛЮЧ {7DD95801-9882-llCF-9FA9-OOAA006C42C4} СО-
ответствует безопасности при инициализации, а подключ (7DD95802-9882-
HCF-9FA9-OOAA006C42C4} — безопасности при использовании в сценарии.

19 Зак. 944
575 Часть II. Интерактивные Web-документы

На рис. 11.11 показано окно программы работы с реестром [Link], в ко-

тором отображен раздел для элемента управления TDC. Видно, что этот
элемент управления является безопасным во всех отношениях: ключ Imple-
mented Categories содержит два подключа безопасности: {7DD95801-9882-11CF-
9FA9-OOAA006C42C4} И {7DD95802-9882-11CF-9FA9-OOAA006C42C4}.

if Qj (32СВ4636-2ЕВ2-1 1 Dl-BD4e-OOC04FB6B'ICA)
6Ё^|320А;>В1Б-СРЕР-11О1-В747-ООС04ТС2В086| умолчанию) Tabular Data Control"

ИЗ Control
8 Si Implemented Categories
^ (ODE86A67-2BAA-I 1CF-A229-OOAA008D7362I }
• i&|40FCeED4-2438-llct-A3DB-080036F12502|
; Ш (7DD96801 -9882-1 1 CF-9FA9-OOAA006C42C4I
-S (7ОО9Б802-9882-1 1 CF-9FA9-OOAA006C42C4)
' Й lnprocServer32
* Й MiscStatus
; Ш ProglD
33 Programmable
'• 13 ToolboxBitmap32
: ISTypeUb
^Version
^J VersionfndependentProglD
Ш |33e47BdO-942a-l 1 ce-a870-OOaa002feabB|

Рис. 11.11. Раздел реестра для элемента управления TDC

В разделе Component Categories реестра перечислены ключи для каждого ви-

да выполняемых функций, которые реализованы или требуются компонен-
там и приложениям, установленным на компьютере. Этот раздел можно ис-
пользовать для определения значения подключен, перечисленных в ключе
Implemented Categories приложения или компонента. На рис. 11.12 показан
раздел Component Categories с подключами в окне программы [Link].

г.; шЭ Component Categories

Ш (00021492-0000-0000-СООО-000000000046) Щ "у(По умолчанию) (значение не присвоено)
,1Э (00021493-0000-0000-СООО-000000000046) ff >J409 -Controls that are safely scriptable
Ш (00021494-0000-0000-СООО-0000000000461 Ц Й800 "Sate tor scripting"
§3 (ОАЕЕ2А92-ВСВВ-11 DO-8C72-OOC04FC2B086f|
^ (1F9DDD20-4146-11 DO-BDC2-OOAOC908DB96|i
ia(lF9DDD2!-4l4e-11DO-BDC2-OOAOC908DB9Jl
S3 (21448В92-0788-11 dO-8144-OOAOC91 BBEE3) I|I
ia (40FC6ED3-2438-11С|^АЗОВ-08003вР12Б02)|1|
•Oil (40FC6ED4-2438-I lCF-A3DB-08003eF12502)p:
=& I40FC6ED6-2438-1 lCF-A3DB-08003eF12502Hll
И (40FCeED8-2438-l 1CF-A3DB-080036FI2B02}E1
Hi (40FC6ED9-2438-11CF-^3DB-080036F12602)||
•SH (64464F82-F827-11CE-9069-080036F12602) S
Si ill (7374BI40-977C-11CF-9FA9-OOAA006C42C4) Ц

Рис. 11.12. Раздел Component Categories реестра

Глава 11. Встраиваемые компоненты 579

При использовании элемента управления на странице HTML браузер про-

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

Рис. 11.13. Окно

предупреждений браузера
Internet Explorer 4.0 при загрузке
небезопасного элемента
управления ActiveX

Примечание
Предупреждение о небезопасности элемента управления ActiveX будет ото-
бражаться, даже если элемент управления разработан самим пользователем,
но не помечен в реестре как безопасный.

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

Лицензирование
элементов управления ActiveX
Лицензирование программных продуктов, в том числе и элементов управле-
ния ActiveX, связано с их легальным, законным использованием. Примене-
ние "пиратских" версий элементов управления ActiveX на HTML-страницах
может привести к осложнениям с фирмами-разработчиками, вплоть до су-
дебного разбирательства. Каждая фирма, распространяющая свои про-
граммные продукты, разрабатывает и поддерживает собственные стратегии
лицензирования. В этом разделе мы кратко остановимся на стратегии фир-
мы Microsoft, как одной из первых зачинательниц легального использования
программных продуктов.
Большинство предлагаемых этой фирмой элементов управления ActiveX,
если только они не распространятся бесплатно, должны поддерживать ли-
цензирование во время разработки и во время выполнения. Лицензирование
580 Часть II. Интерактивные Web-документы

во время разработки гарантирует, что автор Web-документа или программ-

ного обеспечения использует легально приобретенные элементы управле-
ния. Лицензирование во время выполнения гарантирует, что пользователь
просматривает Web-документ или применяет программное обеспечение с
легально приобретенными элементами управления.
Лицензия элемента управления во время разработки проверяется програм-
мой-контейнером, которая встраивает элемент управления в разрабатывае-
мый продукт. Визуальные средства разработки фирмы Microsoft, например
Visual Basic и Visual InterDev, прежде чем поместить элемент упраачения в
программу или Web-документ, проверяют наличие ключа лицензии. Если
такового не обнаружится, то соответствующий элемент управления не может
быть использован в разработке, при этом отображается диалоговое окно
с описанием причины отказа в использовании этого элемента управления.
На рис. 11.14 показано диалоговое окно, отображаемое Visual Basic 6.0 (рус-
ская редакция) при попытке использовать нелицензированный элемент
управления.

Рис. 11.14. Окно

предупреждений Visual
Basic при встраивании
нелицензированного
элемента управления
ActiveX

За проверку лицензии во время выполнения также отвечают упомянутые

выше средства разработки. Они встраивают лицензию на использование
элемента управления во время разработки в программу или Web-документ,
создаваемый этими средствами.
MS Internet Explorer — это другой тип программы-контейнера, использую-
щего элементы управления ActiveX. В отличие от программных средств раз-
работки, которые встраивают двоичный код элемента управления в выпол-
няемый файл разрабатываемого приложения, Internet Explorer сначала за-
гружает элемент управления на компьютер пользователя, а потом проверяет
его лицензию на использование перед отображением на странице. Чтобы
предупредить пиратское использование элемента управления, так как поль-
зователь в любой момент может увидеть исходный текст HTML-страницы,
механизм проверки легальности прибегает к "сокрытию" от пользователя
лицензии на использование элемента управления ActiveX. Это достигается
использованием файла упаковки лицензии (license package file) с расшире-
нием LPK, который встраивается в HTML-страницу с помощью тэга
<OBJECT>. Параметр CLSID идентифицирует этот объект как файл упаковки
лицензии, а тэг PARAM определяет его адрес относительно адреса HTML-
страницы:
Глава 11. Встраиваемые компоненты 581

<OBJECT CLASSID="clsid:5220CB21-C88D-llCF-B347-OOAAOOA28331">
<PARAM NAME="LPKPath" VALUE="[Link]">
</OBJECT>

Уникальный идентификационный номер, заданный в этом примере, опре-

деляет объект как файл упаковки лицензии, а значение параметра LPKpath
в тэге <PARAM> указывает, что этот файл имеет имя [Link] и расположен
в том же каталоге и на том же сервере, что и просматриваемая страница.
Файл упаковки лицензии создается специальной программой Lpk_Tool.exe
из средств разработки приложений клиента Интернета и содержит пары
CLSID элемента управления — лицензионный ключ. Браузер Internet Explorer
специальной программой ActiveX License Manager выделяет для элемента
управления лицензионный ключ и сравнивает его с ключом загруженного
элемента управления. Если они совпадают, то элемент управления ActiveX
отображается на странице, если не совпадают, то элемент управления не
отображается и страница теряет свою функциональность, связанную с ис-
пользованием этого элемента управления.

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

Элементы управления на HTML-страницах

В этом разделе мы приведем примеры использования элементов управления
ActiveX для расширения функциональных возможностей HTML-страниц.
Вероятно, читатель заметит, что некоторые "трюки" можно было бы сделать
и с помощью средств динамического HTML, но следует заметить, что эле-
менты управления ActiveX продолжают оставаться мощным средством реа-
лизации функциональности, и практика их использования расширит круго-
зор разработчиков Web-приложений. Если читатель знаком с Visual Basic, то
он уже работал с элементами управления ActiveX, и этот опыт он может ис-
пользовать, привлекая известные ему элементы управления для разработки
Web-приложений на языке VBScript.
Сразу оговоримся, что современные элементы управления ActiveX содержат
большой спектр функциональности, который реализуется раскрытием свойств
и методов элемента управления программе-контейнеру, причем сложная
функциональность требует наличия у элемента управления свойств, значе-
ниями которых являются некоторые объекты. Это приводит к тому, что зна-
чения многих свойств наиболее популярных элементов управления ActiveX
уже нельзя определить в тэге <PARAM>. Отсюда возникает необходимость
инициализации параметров элементов управления и организации дальней-
шей работы с ними осуществлять из специально создаваемых на страницах
582 Часть II. Интерактивные Web-документы

сценариях, привязываемых к допустимым событиям элементов управления

ActiveX. В этом разделе в качестве языка сценария используется язык
VBScript, хотя все то же самое можно осуществить и с помощью языка
JavaScript.

Элемент управления TabStrip

Элемент управления TabStrip напоминает закладки в записной книжке или
разделители в библиотечной картотеке. Он состоит из нескольких ярлычков
и области клиента, в которой отображается связанная с каждым ярлычком
информация, размещаемая в расположенных там элементах управления
ActiveX (отсюда и название этой области). Стандартный вид элемента
управления TabStrip показан на рис. 11.15, а, где также черными линиями
обозначена граница области клиента. При щелчке на каком-либо ярлычке
он как бы располагается перед оставшимися ярлычками, и в области клиен-
та отображается связанная с этим ярлычком информация.

( Примечание
Элемент управления TabStrip используется для создания диалоговых окон со
вкладками. Каждая вкладка — это ярлычок с соответствующим ему содержи-
мым области клиента.

Использование элемента управления TabStrip экономит место на странице

Web-документа. Множественная информация отображается поочередно в
одном месте на странице — области клиента элемента управления.
Свойство style этого элемента управления позволяет ярлычки-закладки
(значение свойства равно 0) заменить кнопками управления (значение свой-
ства равно 1). Внешний вид элемента управления TabStrip с кнопками вме-
сто ярлычков показан на рис. 11.15, б.

. /Кнопка 1 /.!-
Кнопка 3 ! Кнопка 4

Область клиента

а б в
Рис. 11.15. Элемент управления TabStrip (Microsoft 6.0)

У этого элемента управления есть очень полезное свойство: MultiRow. Если

оно равно True, то отображаются все ярлычки или кнопки, в случае необхо-
димости, в несколько рядов (рис. 11.15 а, б). Дополнительные ряды созда-
ются за счет области клиента, уменьшая ее высоту. Установка значения
Глава 11. Встраиваемые компоненты 553

этого свойства равным False отображает все ярлычки или кнопки в один
ряд. Если их общая ширина превышает ширину самого элемента управле-
ния, то в правом верхнем углу добавляются две кнопки, позволяющие пере-
мещаться по ярлычкам или кнопкам (рис. 11.15, в).
Элемент управления TabStrip в таком виде удобен для использования в ви-
зуальных системах программирования, в которых необходимые элементы
управления ActiveX перетаскиваются мышью в область клиента.
В Web-приложениях программирование этого элемента управления требует
определенных усилий, однако можно использовать только ярлычки этого
элемента управления, установив высоту всего элемента управления равной
высоте ярлычка, и отображая их в один ряд (styie=i), для отображения
в одной области страницы разнообразной информации. Например, таким
способом можно создать галерею картин какого-либо художника, образцов
товаров и т. п.
В качестве примера такого использования элемента управления TabStrip
создадим страницу интерактивного учебного пособия, содержащую галерею
элементов управления ActiveX.
На этой странице ярлычки элемента управления TabStrip будут использо-
ваться для отображения в плавающем фрейме информации об элементе
управления ActiveX, имя которого будет написано на выбранном пользова-
телем ярлычке.
Прежде всего, встроим на страницу сам элемент и создадим плавающий
фрейм. Для лучшего восприятия "связанности" этих объектов разместим их
в одной таблице в двух соседних строках. Исходный текст HTML, разме-
щаемый в тэге <BODY>, показан ниже:
<body bgcolor="lightgrey">
<Н2 STYLE="color:red; backgrounr-color:lightgrey">
ГАЛЕРЕЯ ЭЛЕМЕНТОВ УПРАВЛЕНИЯ ActiveX</H2>
•ctable border="l">
<trxtd>
<object ID="TabStripl"
WIDTH="720" HEIGHT="33"
CLASSID="clsid:lEFB6596-857C-llDl-B16A-OOCOF0283628">
</object>
</td>
</tr>
<trxtd>
<IFRAME ID="FloatingFrame" HEIGHT="400" WIDTH="720">
</IFRAME>
</td>
</tr>
</table>
</body>
584 Часть II. Интерактивные Web-документы

Обратите внимание на уникальный идентификационный номер элемента

управления ActiveX в параметре CLASSID тэга <OBJECT>. Это идентификаци-
онный номер элемента управления TabStrip (Microsoft 6.0), под которым он
зарегистрирован в системном реестре.
Если отобразить эту страницу в окне браузера, то мы увидим картинку,
представленную на рис. 11.16, а.

а б
Рис. 11.16. Отображение страницы примера и элемента TabStrip без параметров

Виден без надписи один ярлычок элемента управления TabStrip (его высота
определена в параметре HEIGHT), ниже которого расположен плавающий
фрейм. На рис. 11.16, б показан элемент управления TabStrip, если бы его
высота была определена равной 400 пикселов, и он точно так же, как и
в нашем примере, был бы встроен в страницу без задания каких-либо своих
параметров.
Определим вид элемента управления TabStrip, задавая значения его свойств
в процедуре обработки события onLoad загрузки содержимого окна браузера.
Каждый элемент управления TabStrip состоит из одного или нескольких
объектов Tab (Вкладка), которые хранятся в наборе Tabs элемента управле-
ния. Объект Tab представляет собой ярлычок и соответствующую ему об-
ласть клиента. Его свойство caption определяет надпись на ярлычке этого
объекта. Например, если в программе необходимо задать надпись "Ярлычок 1"
на первом ярлычке элемента управления TabStrip, то это можно сделать
следующим оператором:
[Link](1). Сар1:1оп="Ярлычок 1"

Здесь Tabstripi — имя объекта, соответствующего элементу управления

TabStrip.
Но прежде чем работать с объектами Tab, их нужно создать. Из рис. 11.16
ясно, что при инициализации элемента управления TabStrip по умолчанию
Глава 11. Встраиваемые компоненты 585

создается только одна вкладка. Метод Add о набора Tabs служит для созда-
ния новой вкладки (объект Tab) элемента управления TabStrip. Следующий
оператор создает еще одну вкладку элемента управления TabStripl:
[Link]()
Теперь, если предположить, что в массиве Name размерности N хранятся
имена ярлычков, то создание N вкладок элемента управления TabStrip с
именем TabStripl в процедуре обработки события onLoad окна браузера бу-
дет выглядеть следующим образом:
Sub Window_OnLoad()
' Создание вкладок элемента управления TabStripl
For 1=1 То N
[Link]()
[Link](I).Caption=Name(I)
Next
[Link]=0 ' Стиль отображения ярлычков
[Link]=False ' He отображать ярлычки в несколько рядов
[Link]="10" ' Размер шрифта текста ярлычков
[Link]="Arial" ' Тип шрифта текста ярлычков
End Sub

В этой же процедуре определяется стиль и параметры шрифта элемента

управления TabStripl. Свойство Font элемента управления хранит ссылку на
объект Font (Шрифт), который определяет параметры шрифта надписей яр-
лычков.

( Примечание ^
Так как объект TabStripl, как элемент объектной модели документа, имеет
свойство style, определяющее свойства каскадных таблиц стилей этого эле-
мента, то ссылка на свойство style элемента управления TabStrip, представ-
ленного объектом TabStripl, осуществляется через свойство object (см. вы-
ше раздел "Элементы управления ActiveX и сценарии").
Если эту процедуру добавить в разрабатываемую нами HTML-страницу,
а также определить значение переменной м, представляющей число элемен-
тов управления ActiveX в нашей галерее, и названия этих элементов управ-
ления в элементах массива Name, то при загрузке страницы будут отобра-
жаться ярлычки с названиями элементов управления ActiveX и плавающий
фрейм.
Теперь следует связать выбор каждого ярлычка с загрузкой в плавающий
фрейм HTML-страницы, описывающей соответствующий названию ярлычка
элемент управления ActiveX. Это осуществляется в процедуре обработки со-
бытия click элемента управления TabStrip, которое генерируется при щелч-
ке кнопкой мыши на каком-нибудь ярлычке элемента управления:
586 Часть II. Интерактивные Web-документы

Function TabStripl_Click()
[Link] = "actx-" &
[Link] & ".html"
End Function

Чтобы загрузить HTML-страницу в плавающий фрейм, необходимо присво-

ить адрес этой страницы свойству Href объекта Location этого фрейма. Если
страница расположена на том же сервере и в том же каталоге, что и исход-
ная HTML-страница, то достаточно задать только имя загружаемой страни-
цы. В нашем примере при щелчке на первом ярлычке будет загружаться
файл [Link], при щелчке на втором— [Link] и т.д. Свойство
Selectedltem элемента управления TabStrip содержит объект Tab, соответст-
вующий выбранной вкладке, а свойство index хранит его индекс в наборе
Tabs.

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

.
<head>
<script LANGUAGE="VBScript" TYPE="text/vbscript">
<! —
Dim Name ( )
N=12
ReDim Name (N)
Name(l)="TabStrip"
Name(2)="Label"
Name(3)="TDC"
Name ( 4 ) ="RDS . Control"
Name(5)="FlexGrid"
Name(6)="Button"
Name (7)="TreeView"
Name ( 8 ) ="OptionButton"
Name(9)="CheckList"
Name(10)="Slider"
Name(ll)="Image"
Name(12)="Picture"
Sub Window_OnLoad ( )
For 1=1 To N
Глава 11. Встраиваемые компоненты 587

[Link]()
[Link](I).Caption=Name(I)
Next
[Link] [Link]=0
[Link]=False
[Link]="10"
[Link]="Arial"
End Sub
Function TabStripl_Click()
[Link] = "actx-" &
[Link] & ".html"
End Function
'-->
</script>
</head>
<body bgcolor="lightgrey">
<H2 STYLE="color:red; backgrounr-color:lightgrey">
ГАЛЕРЕЯ ЭЛЕМЕНТОВ УПРАВЛЕНИЯ ActiveX</H2>
<table border="l">
<tr>
<td>
<object ID="TabStripl"
WIDTH="720" HEIGHT="33"
CLASSID="clsid:lEFB6596-857C-llDl-B16A-OOCOF0283628">
</object>
</td>
</tr>
<tr>
<td>
<IFRAME ID="FloatingFrame" HEIGHT="400" WIDTH="720">
</IFRAME>
</td>
</tr>
</table>
</body>

Обратим внимание, что массив Name задается как динамический. Это сдела-
но для того, чтобы легче можно было добавлять описание дополнительных
элементов управления ActiveX.
Результаты загрузки в браузер разработанного Web-приложения можно ви-
деть на рис. 11.17.
На рис. 11.17, а показано окно браузера при первоначальной загрузке стра-
ницы примера 11.2, а на рис. 11.17, б— при выборе элемента управления
Label.
588 Часть II. Интерактивные Web-документы

J
|ГЛЛЕРЕЯ 'э '
A«hlJ,-ll>IV.'<:,,.1.,,r|rl...>iS;>:,>.

>Шм, ..ш«н,ш«Щ1§Ш1§!ЙЯ1 1
1 1 Позволяет расположить текст на странице под любым уг.юм. Мижно
:
использовать в сценариях: например, изменять угол поворота текста |;; ;
Щелчок кнопкой мыши на слове "Текст" поворачивает его на 10

1 градусов!

i tEKCt

Рис. 11.17. Приложение с элементом управления TabStrip

Аналогично можно сделать галерею картин любимого художника, образцов

производимой продукции и т. д.

Элемент управления TreeView

Элемент управления TreeView, общий вид которого показан на рис. 11.18,
предназначен для отображения в компактном виде данных древовидной
структуры. Этот элемент управления часто используется для представления
оглавления книг, иерархической структуры базы данных, каталогов данных
на жестком диске компьютера и т. д. На рис. 11.18 он отражает оглавление
книги "Справочник Web-мастера" издательства BHV.

Справочник Web-MacT'Ji
& Предисловие
% Глава 1. Введен!
^ [Link] 1
а Ш Глава 2. с|
^ 1 СтрД
Синтаксис НТМ1-тегоВ|
% Глава 3. Tj
% Глава 4. Кщ I Рис. 11.18. Общий вид
)Ж
I элемента управления TreeView

Основной единицей этого элемента управления ActiveX является узел, кото-

рый в самом общем случае состоит из изображения и метки. Изображения
для узлов поставляются элементом управления ImageList, ассоциированным
с элементом управления TreeView. Например, самый первый узел на рис. 11.18
состоит из изображения раскрытой книги и метки, задающей отображаемый
текст этого узла ("Справочник Web-мастера").
Узлы в дереве могут содержать подчиненные узлы. В этом случае их можно
раскрыть, показав все подчиненные узлы, или свернуть. Такие узлы отобра-
Глава 11. Встраиваемые компоненты 589

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

(его еще называют флажком), в котором располагается знак + (плюс), если
узел свернут, и знак — (минус), если узел раскрыт. Для свернутого или рас-
крытого узла можно использовать разные изображения, как показано на
рис. 11.18. Двойной щелчок на узле или одинарный щелчок на квадратике
раскрывает или сворачивает узел с подчиненными узлами.
Если структура дерева при раскрытии узлов не помещается в области ото-
бражения элемента управления, то автоматически добавляются вертикальная
и горизонтальная полосы прокрутки. Если надпись в узле полностью не по-
мещается в пространстве отображения элемента управления, то при распо-
ложении курсора мыши над таким узлом появляется всплывающая подсказ-
ка, в которой отображается весь текст, содержащийся в метке узла, как вид-
но на рис. 11.18.
Каждый узел реализован в виде программируемого объекта Node (Узел). Эти
объекты хранятся в наборе Nodes элемента управления TreeView. Свойство
index узла позволяет определить его индекс в наборе Nodes. Узлы помеща-
ются в этот набор в соответствии с порядком их задания в программе.
Каждый узел может быть либо только родителем других узлов (тогда он яв-
ляется началом дерева и называется корневым узлом), либо только порож-
денным узлом (тогда он завершает ветвь дерева), либо и родителем, и поро-
жденным узлом одновременно (тогда он расположен в точке ветвления де-
рева). Корневых узлов может быть несколько. Они не связаны между собой
никакими "родственными" связями, и порождают, каждый в отдельности,
самостоятельные деревья иерархической структуры. Любое дерево может
иметь только один корневой элемент.
Для определения "родства" узлов объект Node имеет набор свойств, позво-
ляющих определить родителя (свойство Parent), первый порожденный узел
(свойство child), количество порожденных узлов (свойство children) и кор-
невой узел (свойство Root).
Узлы, непосредственно порождаемые каким-либо узлом, являются узлами-
"братьями", или узлами одного уровня. Ряд свойств позволяет обрабатывать
подобные "родственные" связи: Firstsibiing возвращает ссылку на первый
узел из множества узлов одного уровня, Lastsibiing — на последний узел из
этого множества, Next определяет следующего брата, a Previous — предыду-
щего.
Перечисленные свойства объекта Node позволяют полностью определить
структуру данных, отображаемую элементом управления TreeView, и органи-
зовать перемещение по ее узлам и ветвям.
Но как создать узлы, как определить, какой узел порождает другой, как за-
дать корневой узел дерева? Для этого предназначен метод Add набора Nodes,
имеющий следующий синтаксис:
объектТгееУ1е\^.[Link] узел, отнош, ключ, текст, изобр, выбр_изобр
590 Часть II. Интерактивные Web-документы

Первый параметр узел этого метода определяет объект Node, относительно

которого создается новый узел элемента управления TreeView с заданным
параметром отнош "родственным" отношением. Параметр узел задает либо
индекс, либо уникальный ключ существующего объекта Node (см. ниже). Па-
раметр отнош может быть целым числом от 0 до 4. Описание всех значений
этого параметра и определяемых ими отношений представлено в табл. 11.1.

Таблица 11.1. Родственные отношения узлов в методе Add

Значение Описание
параметра отнош

0 Новый узел создается перед всеми узлами того же уровня, что

и узел, определяемый параметром узел
1 Новый узел создается после всех узлов того же уровня, что и
узел, определяемый параметром узел
2 Новый узел создается непосредственно после узла, опреде-
ляемого параметром узел
3 Новый узел создается непосредственно перед узлом, опреде-
ляемым параметром узел
4 Новый узел создается как узел, порождаемый узлом, который
определен параметром узел

Примечание
Если отсутствует параметр узел, то метод Add создает корневой узел дерева.

Параметр ключ задает уникальный идентификатор, или уникальный ключ

узла, по которому можно ссылаться на создаваемый узел. Его значением
является символьная строка.
Параметр текст определяет строку текста, появляющуюся в метке узла при
отображении в браузере элемента управления.
Последние два параметра изобр и выбр_изобр определяют, соответственно,
графическое изображение в узле и графическое изображение, когда узел вы-
бран щелчком кнопки или с помощью клавиш со стрелками. Их значения-
ми являются ссылки на графические изображения, хранящиеся в элементе
управления Image List, присоединенном к элементу управления TreeView (см.
ниже).
Из всех шести параметров этого метода только параметр текст является обя-
зательным. Запятые, определяющие положение отсутствующих параметров,
обязательны, если эти параметры расположены раньше параметра текст
в списке параметров.
Глава 11. Встраиваемые компоненты 591

Структура содержания книги, отображаемая в элементе управления TreeView

на рис. 11.18, создана с помощью следующих операторов:
[Link], "open", LoadPicture("D:/Picture/[Link]")
[Link],"close", LoadPicture("D:/Picture/[Link]")
[Link],"leaf", LoadPicture("D:/Picture/[Link]")
[Link]=imgListl

[Link] ,,"R","Справочник Web-мастера" ',"close"

[Link] "R", 4,"Intr","Предисловие" ',"leaf"

[Link] "R", 4,"Chi","Глава 1. Введение" ',"close"
[Link] "Chi", 4,"Parl","0 Web в двух словах" V'leaf"
[Link] "Chi", 4,"Par2","Кто такие Web-мастера?" '/'leaf"
[Link] "Chi", 4,"Par3", "Рекомендуемая литература" '/'leaf"

[Link] "R", 4,"Parti","Часть 1. HTML","close"

[Link] "Parti", 4,"Ch2","Глава 2. Обзор HTML","close"
[Link] "Ch2", 4, "Parl-2","Структура HTML-документа","leaf"
[Link] "Ch2", 4,"Par2-2","Синтаксис HTML-тэгов","leaf"

[Link] "Parti", 4,"Ch3","Глава 11. Тэги HTML","close"

[Link] "Ch3", 4,"Parl-3",
"Описание тэгов HTML и их параметров","leaf"

[Link] "Parti", 4,"Ch4","Глава 4. Фреймы","close"

[Link] "Ch4", 4,"Parl-4","Компоновка фреймов","leaf"
[Link] "Ch4", 4,"Par2-4","Вложенные наборы фреймов","leaf"
[Link] "Ch4", 4,"РагЗ-4","Тэг <FRAME>","leaf"
[Link] "Ch4", 4,"Par4-4","Целевые фреймы","leaf"
[Link] "Ch4", 4, "Par5-4","Параметры обрамления
фреймов", "leaf"

[Link] "R", 4,"Part2","Часть 2. CGI","close"

Первые три оператора этого фрагмента определяют список графических

изображений, хранящихся в элементе управления ImageList. который опре-
делен переменной imageListi. Для добавления ссылок на графические изо-
бражения предназначен метод Add набора Listlmages элемента управления.
Именно этот набор содержит ссылки на все графические изображения,
хранящиеся в элементе управления ImageList. Для работы метода Add не-
обходимо задание трех параметров. Первый параметр, не обязательный,
определяет индекс в наборе Listlmages включаемого изображения. Второй
параметр задает уникальный ключ изображения, который используется
в качестве значений параметров изобр и выбр_изобр метода Add набора Nodes
элемента управления TreeView. Последний параметр определяет файл вклю-
чаемого изображения, причем он определяется с помощью функции
LoadPicture(имя файла).
592 Часть II. Интерактивные Web-документы

Четвертым оператором осуществляется привязка элемента управления

ImageListl к элементу управления TreeView, определяемому переменной
Treeviewi. Это делается простым присваиванием свойству imageList элемен-
та управления TreeViewl ссылки на элемент управления ImageListl.
Остальные операторы приведенного фрагмента текста сценария задают узлы
отображаемой структуры содержания книги и не требуют пояснений.
Простое отображение содержания книги в компактной форме достаточно
полезная вещь, но если к нему добавить возможность отображения содер-
жимого книги, то мы получим электронный вариант книги. Далее в этом
разделе мы покажем, как обрабатывать события элемента управления
TreeView, чтобы при раскрытии узлов менялось его изображение, как свя-
зать выбор завершающего узла дерева с отображением ассоциированного
с ним файла. Решение этих задач покажем на примере создания электронного
варианта книги простой структуры — книги, состоящей из трех простых
глав без разделов.
Создадим HTML-страницу, на которой разместим элемент управления
TreeView, содержащий оглавление книги, и плавающий фрейм, в котором
будет отображаться содержимое глав при щелчке кнопкой мыши на соответ-
ствующем узле элемента управления TreeView:
<body bgcolor="lightgrey">

<!— Элемент управления TreeView — >

<object id="treeViewl"
classid="clsid:C74190B6-8589-llDl-B16A-OOCOF0283628"
width="250" height="300">
</object>
<!— Элемент управления ImageList — >
<object id="imgListl" width=0 height=0
classid="clsid:2C247F23-8591-HDl-B16A-OOCOF0283628">
</object>
Snbsp; snbsp; snbsp; Snbsp; Snbsp;
<IFRAME ID="iFramel" WIDTH=680 HEIGHT=300>
</IFRAME>

</body>

Обратите внимание, что кроме элемента управления TreeView на страницу

помещен и элемент управления ImageView, который необходим для привяз-
ки графических файлов изображений в узлах иерархической структуры, ото-
бражаемой элементом управления TreeView. Так как этот элемент управле-
ния не имеет видимого интерфейса, то значения параметров WIDTH и HEIGHT,
определяющих размеры, не влияют на его отображение и установлены рав-
ными нулю.
Глава 11. Встраиваемые компоненты 593

Инициализацию элементов управления, как обычно, произведем в процеду-

ре обработки события Load (Загрузка) объекта window. Но прежде создадим
графические изображения, которые будут использоваться в раскрываемых и
завершающих ветвях дерева оглавления узлах. Их можно создать в любом
графическом редакторе, причем размеры не имеют значения, так как при
отображении их в узлах они автоматически масштабируются. Для свернутого
узла будем использовать изображение из файла "[Link]", для раскрытого
узла — из файла "[Link]" и для завершающего ветвь узла — из файла
"[Link]". Изображения из этих файлов показаны на рис. 11.19.

Рис. 11.19. Графические изображения,

используемые в узлах дерева
[Link] open-jpg l*af,jpg оглавления

Теперь, создав графические изображения, необходимо поместить их в эле-

мент управления imgListl и связать его с элементом управления TreeViewl
до того, как начинать создавать структуру оглавления. Ниже представлен
код процедуры обработки события загрузки окна:
Sub Window_pnLoad()
[Link],"open", LoadPicture("D:/Picture/[Link]")
[Link],"close", LoadPicture("D:/Picture/[Link]")
[Link],"leaf", LoadPicture("D:/Picture/[Link]")
[Link]=imgListl

[Link] ,,"R","Интерактивные Web-документы","close"

[Link] "R", 4,"Chi","Глава l " , " l e a f "
[Link] "R", 4,"Ch2","Глава 2 " , " l e a f "
[Link] "R", 4,"Ch3","Глава 3 " , " l e a f "
End Sub

Пока наше приложение, если его поместить в окно браузера, не будет ото-
бражать никаких глав в плавающем фрейме, и более того, не будет меняться
изображение в корневом узле при его раскрытии, как показано на рис. 11.20.
Для того чтобы изображение узла менялось при его раскрытии и сворачива-
нии, следует написать процедуры обработки событий obiciick, Expand и
Collapse элемента управления TreeViewl. При двойном щелчке кнопкой
мыши на узле, имеющем подчиненные узлы, он раскрывается или сворачи-
вается. События Expand (Раскрыть) и collapse (Свернуть) генерируются при
щелчке на квадратике, отображаемом слева от раскрываемого узла: первое,
когда узел свернут, а второе, когда узел был раскрыт. В процедурах обработ-
ки этих событий необходимо просто заменить изображение в узле, соответ-
594 Часть II. Интерактивные Web-документы

ственно, для события Expand на файл "[Link]", а для события collapse на

файл "[Link]", тогда как в процедуре обработки двойного щелчка на узле
следует проверить, раскрываемый ли это узел и в каком состоянии он нахо-
дился: был раскрыт или свернут. После такой проверки заменить изображе-
ние на противоположное. Ниже представлены исходные тексты процедур
обработки событий:
Sub TreeViewl_DblClick()
If [Link] <> 0 Then
If [Link] = True Then
[Link] = "open"
Else
[Link] = "close"
End If
End If
End Sub

Sub TreeViewl_Expand(ByVal Node)

[Link] = "open"
End Sub

Sub TreeViewl_Collapse(ByVal Node)

[Link] = "close"
End Sub

:
| _ __: _

Ш Ш \ • :

Рис. 11.20. Электронный вариант книги без обработки событий элемента

управления TreeView

Процедурам обработки событий Expand и collapse в качестве параметра пе-

редается объект Node (узел) элемента управления TreeViewl, на флажке ко-
торого был произведен щелчок кнопкой мыши. Он используется в этих
процедурах для установки нового значения своего свойства image, в котором
хранится ссылка на изображение.
В процедуре обработки события Dbiciick проверяется, имеет ли узел, на ко-
тором произведен щелчок ([Link]), порождаемые им узлы
(свойство children не равно нулю). Если имеет, то проверяется, раскрыт ли
Глава 11. Встраиваемые компоненты 595

он или нет. В зависимости от результатов проверки узлу назначается соот-

ветствующее изображение.
Теперь остается только при щелчке на завершающем узле ветви дерева ог-
лавления загрузить в плавающий фрейм файл соответствующих глав книги.
Это действие осуществляется в процедуре обработки события click элемен-
та управления treeViewi:
Sub TreeViewl_Click()
If [Link] = 0 Then
[Link] = [Link] & ".html"
End If
End Sub

Содержимое глав КНИГИ хранится В файлах "Глава [Link]", "Глава [Link]" И

"глава [Link]", расположенных в том же каталоге, что и файл нашего при-
ложения, окончательный, полный текст которого приведен в примере 11.3.

Jiiii.. ,..^mi*;^viv;v;;*:i^iV;;;;;;;;';-;viv^^i-;:

<html>
<head>
<SCRIPT Language="VBScript">
Sub Window_onLoad()
[Link],"open", LoadPicture("D:/Picture/[Link]")
[Link],"close", LoadPicture("D:/Picture/[Link]")
[Link],"leaf", LoadPicture("D:/Picture/[Link]")
[Link]=imgListl

[Link] ,,"R","Интерактивные Web-документы","close"

[Link] "R", 4,"Chi","Глава l","leaf"
[Link] "R", 4,"Ch2","Глава 2","leaf"
[Link] "R", 4,"СпЗ","Глава 3","leaf"
[Link] [Link]=7
[Link]=l
[Link]=10
[Link]="Arial"
End Sub

Sub TreeViewl_Click()
If [Link] = 0 Then
[Link] = [Link] & ".html1
End If
End Sub

Sub TreeViewl_DblClick()
[Link] <> 0 Then
596 Часть II. Интерактивные Web-документы

If [Link]. Expanded = True Then

TreeViewl .Selectedltem. Image = "open"
Else
TreeViewl. Selectedltem. Image = "close"
End If
End If
End Sub

Sub TreeViewl_Expand (ByVal Node)

Node. Image="open"
End Sub

Sub TreeViewl_Collapse (ByVal Node)

Node. Image = "close"
End Sub
</SCRIPT>
</head>
<body bgcolor=lightgrey>

<object id="TreeViewl"
classid="clsid:C74190B6-8589-llDl-B16A-OOCOF0283628"
width="250" height="300">
</object>
<object id="imgListl" width=100 height=10
classid="clsid:2C247F23-8591-HDl-B16A-OOCOF0283628">
</object>
&nbsp; &nbsp; snbsp; snbsp; Snbsp;
<IFRAME ID=iFramel WIDTH=680 HEIGHT=300>
</IFRAME>

</body>
</html>

Результаты отображения первой главы показаны на рис. 11.21.

• • • ^л j _ _ _ ^ __
! В •• Ш Интерактивные Wejj
Глава 1 Выполняемые
Глава 2
Глава 3 сценарии
Основы объектно-ориентированных
технологий М
Данный раздел посвящен основам объектно- ориентированных технологий is:::i;
(ООТ). Без знания основополагающих понятий ООТ невозможно понимание V;|

Рис. 11-21. Отображение первой главы книги

Глава 11. Встраиваемые компоненты 597

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

установки для элемента управления TreeView. Свойство Font устанавливает
параметры шрифта, которым отображается текст в метках узлов, а свойство
style элемента управления TreeView определяет вид отображения узлов и
всей иерархической структуры, представляемой этим элементом. Его значе-
нием может быть любое целое число из диапазона 0—7, определяющее, что
отображается в узлах: 0 — только текст меток, 1 — изображение и текст, 2 -
флажок и текст, 3 — флажок, изображение и текст, 4 — соединительные ли-
нии древовидной структуры и текст, 5 — линии, изображение и текст, 6 -
линии, флажок и текст, 7 — линии, флажок, изображение и текст.

Предупреждение
Так как объект TreeView, как элемент объектной модели документа, имеет
свойство style, определяющее свойства каскадных таблиц стилей этого эле-
мента, то ссылка на свойство style элемента управления TreeView, представ-
ленного объектом treeViewl, осуществляется через свойство object (см. вы-
ше раздел "Элементы управления ActiveX и сценарии").

Java-апплеты
Java-апплеты — это еще один метод создания динамических HTML-доку-
ментов. Технология Java была разработана относительно недавно (1995 г.)
программистами фирмы Sun и в настоящее время продолжает быстро раз-
виваться, занимая все более прочное положение на рынке программных
средств для создания приложений Интернета. Она включает в себя язык
программирования и платформу, для обозначения которых используется одно
название — Java.
В одном из своих документов фирма Sun характеризует язык Java как про-
стой, объектно-ориентированный, распределенный, интерпретируемый, на-
дежный, защищенный, архитектурно-независимый, переносимый, высоко-
производительный, многопоточный, динамический язык программирования
высокого уровня и поясняет, какой смысл имеют все эти определения.
Программа на языке Java транслируется компилятором в специальный бай-
товый код — Java bytecode, называемый также J-кодом, кия выполнения ко-
торого требуется интерпретатор Java. Таким образом, язык Java является од-
новременно компилируемым и интерпретируемым. Интерпретатор Java -
это приложение, предназначенное для конкретной аппаратно-программной
платформы: PC-Windows, PC-Linux, Mac, UNIX-машины. J-код не зависит
от платформы. Он может быть подготовлен, например, на рабочей станции
Sun, работающей под управлением операционной системы Solaris, а выпол-
нен на персональном компьютере под управлением Windows NT. Это обес-
печивает архитектурную независимость и переносимость программ на языке
Java. Байтовый код Java можно рассматривать как набор машинных команд
598 Часть II, Интерактивные Web-документы

для некоторой виртуальной машины, реализуемой интерпретатором. Он

может исполняться в любой среде, в которой выполняется виртуальная ма-
шина Java.
Основными единицами, из которых строится программа Java, являются
классы. Классы образуют иерархическую древовидную структуру, лежащую в
основе объектно-ориентированной модели языка. Класс представляет собой
совокупность данных и методов для их обработки. Слово метод в термино-
логии объектно-ориентированной модели является синонимом слов процеду-
ра или функция. На базе уже существующего класса может быть определен
новый класс, являющийся подклассом своего предшественника. Исходный
класс является родительским классом или надклассом для своего подкласса.
Подкласс наследует у родительского класса коллекцию данных и методов.
Кроме них он может содержать собственные данные и методы.
Класс определяет целый тип данных. Конкретный экземпляр этого типа на-
зывается объектом. Написание Java-программы заключается в создании но-
вого класса или совокупности связанных между собой классов, то есть в оп-
ределении набора данных, описывающих решаемую программистом задачу,
и в конструировании методов, реализующих обработку этих данных. При
этом для порождения новых классов может использоваться существующая
базовая коллекция классов. Исходный текст на языке Java, составляющий
описание класса, сохраняется в файле, имя которого имеет расширение
JAVA. Этот файл компилируется в J-код и сохраняется в файле с тем же
именем и расширением CLASS. Скомпилированные классы Java в виде
J-кода могут храниться локально на компьютере или распределенно в сети и
динамически загружаться выполняющимися приложениями по мере необхо-
димости.
Платформа Java состоит из виртуальной машины и интерфейса прикладного
программирования Java API. Виртуальная машина предназначена для вы-
полнения J-кода на различных платформах. Интерфейс прикладного про-
граммирования Java представляет собой большую коллекцию классов в
формате J-кода, сгруппированных по своему назначению в отдельные паке-
ты. Список имеющихся пакетов занимает несколько страниц текста, и каж-
дый из пакетов содержит коллекцию классов. Для работы с такой сложной
структурой используется специальная схема именования пакетов и классов,
напоминающая доменную систему имен Интернета (DNS). Например, имя
[Link] определяет пакет, содержащий базовые классы самого языка Java.
Имя [Link] определяет класс object внутри этого пакета. Пакеты,
имена которых начинаются со слова java, составляют основу интерфейса
прикладного программирования и входят в состав любой платформы Java.
Кроме основной части API существуют стандартные расширения для работы
с трехмерной графикой, анимацией и т. д.
Для создания Java-программ необходим набор средств разработчика Java
Development Kit (JDK), включающий в себя базовую коллекцию классов,
Глава 11. Встраиваемые компоненты 599

компилятор javac, отладчик jdb, виртуальную машину java для выполнения

готовых приложений и программу просмотра апплетов appietviewer. Суще-
ствуют варианты набора JDK от фирм Sun и Microsoft и, кроме того, визу-
альные средства разработки фирм Microsoft, Borland, Symantec. Основным
разработчиком, определяющим направление развития технологии Java, яв-
ляется фирма Sun, поэтому лучше использовать инструментальные средства
именно этого производителя. К тому же визуальные средства не позволяют
проследить все стадии разработки программы. Сведения о текущей версии и
приобретении JDK можно получить на сервере Sun [Link]

Приложения и апплеты
В среде Java существуют два основных типа программ: приложения (applica-
tion) и апплеты (applets). Приложение — это самостоятельная программа,
для выполнения которой требуется только наличие виртуальной машины
Java. Апплет — это программа, которая предназначена для выполнения в
составе Web-браузера или специальной программы просмотра апплетов.
Схема применения апплетов выглядит следующим образом. Апплет создает-
ся, компилируется и сохраняется на Web-сервере. В HTML-документ, вы-
ставляемый на сервере, при помощи специального тэга помещается ссылка
на местоположение апплета. При получении документа с сервера браузер
загружает апплет и начинает его выполнять. Такой подход к созданию ди-
намических документов прямо противоположен подходу, который использу-
ется в программировании интерфейсов CGI: апплет выполняется на стороне
клиента, а CGI-сценарий — на стороне сервера. Два основных браузера,
Netscape и Internet Explorer, имеют в своем составе средства для выполнения
апплетов, включающие виртуальную машину и набор классов.
Слово applet представляет собой уменьшительную форму слова application и
может быть переведено как "приложеньице" или "программка". Это название
подчеркивает, что апплет должен быть небольшой по размеру программой,
выполняющей достаточно простые действия. Большие апплеты увеличивают
нагрузку на сеть и требуют заметного времени для передачи браузеру, в ре-
зультате чего утрачивается то, для чего они предназначены — динамичное,
соответствующее скорости реакции пользователя, изменение отображаемого
документа.
Существует потенциальная опасность того, что полученная из сети неиз-
вестная программа, которой позволено выполняться на локальном компью-
тере, может оказать разрушающее воздействие на локальную систему или
прочитать конфиденциальную информацию. Разрушающие воздействия могут
выражаться, например, в удалении или искажении файлов, в запуске про-
грамм, потребляющих ограниченные ресурсы системы, что приводит к ее
деградации и вынужденной перезагрузке, в уничтожении других приложе-
600 Часть II. Интерактивные Web-документы

ний, выполняющихся параллельно. По этой причине апплеты должны

в обязательном порядке удовлетворять некоторым ограничениям безопас-
ности, предъявляемым как самим языком Java, так и браузерами, в составе
которых выполняются апплеты.
Апплет не может:
П осуществлять операции чтения-записи в локальной файловой системе, то
есть читать и изменять файлы, просматривать содержимое каталогов,
создавать, удалять, переименовывать файлы и каталоги;
О устанавливать сетевые соединения с другими компьютерами, кроме ком-
пьютера, с которого он был загружен;
О запускать на выполнение другие программы на компьютере, на котором
он сам выполняется;
П использовать библиотеки других языков программирования, например,
загружать библиотеки C++, хотя сам язык Java такую возможность пре-
доставляет;
П изменять системные параметры (а может читать только некоторые из
них, например, имя и версию операционной системы).
Для проверки соблюдения правил безопасности существует специальный класс
[Link]. Экземпляр этого класса выполняется в составе
виртуальной Java-машины браузера. Когда объект [Link]
обнаруживает нарушение правил безопасности, возникает исключение (поня-
тие близкое понятию прерывание, означающее возникновение ситуации,
требующей специальной обработки), которое апплет перехватывает и реаги-
рует заданным образом.

Структура приложения
Мы установили, что апплет это особый тип Java-приложения. Прежде чем
перейти к рассмотрению апплетов, рассмотрим простейший пример прило-
жения, не являющегося апплетом. В соответствии с международной тради-
цией изучение языка программирования начинается с написания програм-
мы "Hello, world!". Не будем ее нарушать. Создадим файл HelloWorld. java,
содержащий следующий текст:

class HelloWorldApplication {
public static void main(String[] args) {
[Link]"Hello, World!");
}
}
Глава 11. Встраиваемые компоненты 60?

и скомпилируем его, используя компилятор javac:

javac [Link]
Результатом компиляции является файл [Link], со-
держащий J-код, выполнение которого на виртуальной Java-машине завер-
шается выводом строки
Hello, World!
Как мы уже знаем, программа на языке Java строится из классов. Простая
программа состоит из одного класса. Определение класса должно содержать
две обязательные компоненты — ключевое слово class и следующее за ним
имя класса. В примере это имя HelloWorldApplication. Оно должно совпадать
с именем файла, содержащего текст программы. Следует иметь в виду, что в
языке Java различаются большие и малые буквы. Компилятор следит за пра-
вильностью употребления имен: HelloWorld и Helloworld обозначают разные
имена. Кроме обязательных компонентов определение может содержать мо-
дификаторы, характеризующие некоторые свойства класса. Вот список всех
модификаторов в порядке их появления в определении.

public Класс может быть использован классами из другого

пакета; по умолчанию класс может использоваться
только классами из одного с ним пакета
abstract Абстрактный класс, для которого нельзя создать эк-
земпляры; используется для последующего создания
подклассов, дополняющих его структуру и поведение
final Объявляет о том, что для данного класса нельзя соз-
давать подклассы
class class_name Обязательная часть определения класса
extends Superclass Определяет, что для данного класса надклассом яв-
ляется Superclass
implements lnterface_list Определяет, что данный класс реализует список ин-
терфейсов Inteface_list

Внутри фигурных скобок содержится описание переменных и методов дан-

ного класса. В классе HelloWorldApplication отсутствуют переменные и име-
ется всего один метод с именем main ( ) . Каждое приложение Java обязатель-
но должно содержать метод main ( ) . При запуске приложения ему можно
передать параметры через строковый массив string!] args. В рассмот-
ренном примере метод main () состоит из одного обращения к методу
[Link], направляющему список своих аргументов в стандарт-
ный выходной поток.
Описания переменных и методов содержат обязательные компоненты и мо-
дификаторы. Обязательными являются имя, а также тип переменной или
602 Часть II. Интерактивные Web-документы

тип значения, возвращаемого методом. Если метод не возвращает никакого

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

Интерфейсы
Интерфейс по своей структуре очень похож на абстрактный класс, в опре-
делении которого вместо ключевого слова class используется ключевое сло-
во interface:
interface interface_name [extends interface_name] {
[описание переменной;]
[описание метода;]
}

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

ний методов. Сами методы являются пустыми, их реализация в интерфей-
се не определена. Интерфейс может наследовать свойства любого чис-
ла других интерфейсов, задаваемых при помощи модификатора extends
interface_name. Если класс реализует некоторый интерфейс, то он должен
явно определить все методы, перечисленные в описании интерфейса. При-
менению интерфейсов можно дать следующее объяснение. Класс может
наследовать свойства (переменные и методы) только одного класса. Если
родительский класс не содержит необходимых методов, то наследующий
класс должен определить и реализовать их самостоятельно. Но лучше делать
это, следуя определенной схеме. Эта схема, содержащая необходимые пере-
менные и названия методов, предлагается интерфейсами. Класс же может
реализовать любое число интерфейсов.
Например, интерфейс j ava. awt. event. MouseListener имеет следующее опи-
сание
public abstract interface MouseListener extends EventListener {
void mouseClicked(MouseEvent e)
void mouseEntered(MouseEvent e)
void mouseExited(MouseEvent e)
void mousePressed(MouseEvent e)
void mouseReleased(MouseEvent e)
Глава 11. Встраиваемые компоненты 603

Класс, используемый в системе графического интерфейса пользователя

и предполагающий обрабатывать события, связанные с манипуляциями
мышью: нажатие и отпускание кнопки, щелчок, перемещение курсора
мыши в пределы и за пределы объекта, должен реализовать интерфейс
[Link]. Внутри класса для слежения за этими собы-
тиями при помощи метода addMouseListener создается специальный объект.
Когда этот объект регистрирует одно из перечисленных событий, вы-
зывается метод обработки этого события, указанный в интерфейсе
[Link] и реализованный в самом классе.

Апплеты
После того как мы познакомились со структурой и рассмотрели простой
пример обычного приложения, сделаем то же самое применительно к ап-
плетам. С точки зрения структуры апплет отличается от приложения, преж-
де всего, отсутствием метода main ( ) . Любой апплет представляет собой под-
класс класса Applet. В иерархии пакетов и классов вновь создаваемый ап-
плет newAppiet занимает место согласно схеме, показанной на рис. 11.22.
[Link]

[Link]

[Link]

I
I [Link]

I ,
[Link]

I Рис. 11.22. Место апплета newAppiet

newAppiet в иерархии классов

Каждый апплет, являясь подклассом класса [Link], наследует

все переменные и методы своих предшественников в данной иерархической
структуре. В частности, класс Applet определяет следующие собственные
методы.

Таблица 11.2. Методы класса Applet

Тип
возвращаемого Метод Описание
значения
void Destroy (} Вызывается браузером, чтобы
сообщить апплету о предстоя-
щем завершении его работы с
тем, чтобы он мог освободить
используемые им ресурсы
604 Часть II. Интерактивные Web-документы

Таблица 11.2 (продолжение)

Тип
возвращаемого Метод Описание
значения
AppletContext getAppletContext() Предоставляет возможность по-
лучать информацию о среде, в
которой выполняется апплет и
воздействовать на нее. Средой
апплета является HTML-доку-
мент, содержащий этот апплет
String getAppletlnfo(; Возвращает информацию
о самом апплете
AudioClip getAudioClip(URL url) Возвращает объект типа
AudioClip, находящийся
по адресу url
AudioClip getAudioClip(URL url, Возвращает объект типа
String name) AudioClip, задаваемый пара-
метрами url И name:
url — базовый URL, задающий
местоположение каталога
name — местоположение аудио-
клипа относительно каталога url

URL getCodeBase() Возвращает базовый URL

апплета
URL GetDoc_umentBase() Возвращает базовый URL доку-
мента, в который встроен апплет
Image getlmage(URL url) Возвращает графический объ-
ект типа Image, который затем
может быть отображен на экра-
не. Объект задается своим ад-
ресом URL
Image getlmage(URL url, Возвращает графический объект
String name) типа Image, который затем может
быть отображен на экране. Объ-
ект задается своим базовым ад-
ресом url и относительным name
Locale getLocale() Возвращает объект типа Locale,
содержащий информацию о на-
циональных стандартах пред-
ставления даты, времени, чисел
и т.д., если таковые были уста-
новлены
Глава 11. Встраиваемые компоненты 605

Таблица 11.2 (продолжение)

Тип
возвращаемого Метод Описание
значения
String getParameter(String name) Возвращает значение имено-
ванного параметра name, опре-
деленного в HTML-тэге <param>
String!] [] getParameterlnfо() Возвращает строковый массив,
содержащий информацию о
параметрах. Обычно переопре-
деляется в описании апплета
void init () Вызывается браузером для ини-
циализации апплета: просмотра
списка параметров, построения
интерфейса пользователя, за-
грузки ресурсов
boolean isActive() Сообщает, является ли апплет
активным
void play(URL url) Проигрывает аудиоклип, распо-
ложенный по указанному адресу
url
void play(URL url, Проигрывает аудиоклип, распо-
String name) ложенный по указанному адресу,
определяемому базовым адре-
сом url и относительным name
void resize(Dimension d) Запрашивает новые размеры для
апплета, задаваемые при помо-
щи аргумента типа Dimension
void resize(int width, Запрашивает новые размеры для
int height) апплета, задаваемые при по-
мощи аргументов, определяю-
щих новую ширину width и вы-
соту height
void setStub(AppletStub stub) Вызывается браузером перед
инициализацией апплета для
создания интерфейса между
апплетом и средой браузера
void showStatus(String msg) Запрашивает браузер отобра-
зить в окне состояния строку
msg
void start () Вызывается каждый раз, когда
апплет попадает в область ви-
димости
606 Часть II. Интерактивные Web-документы

Таблица 11.2 (окончание)

Тип
возвращаемого Метод Описание
значения
void stop () Вызывается каждый раз, когда
апплет исчезает из области ви-
димости для приостановки его
выполнения

Обсудим применение некоторых методов, оформив в виде апплета програм-

му "Hello, World!". Создадим для этого подкласс класса Applet и сохраним
его в файле [Link]. Простейший вариант может выглядеть сле-
дующим образом:

import j [Link];
import j [Link];
public class HeiloWorld extends Applet {
public void paint(Graphics g) {
[Link]("Hello world!", 5, 15);

Первые две строки содержат оператор import. Он позволяет использовать

внутри текущего класса сокращенные имена классов. Если бы его не было,
то для ссылки на класс необходимо было указывать полное имя, определяю-
щее положение класса в иерархии классов Java, например, [Link].
Выводимая строка "Hello world" должна появиться в окне браузера, поэтому
вместо записи ее в стандартный выходной поток используется метод
drawstring () класса [Link] .Graphics, используемый для отображения за-
данной строки в окне браузера. Пакет [Link] содержит полный набор
классов для создания графического интерфейса пользователя и отображения
графики и изображений.
Метод paint о является методом класса [Link] и используется
для изображения объекта, которому он принадлежит. В данном примере он
переопределяется так, чтобы выводить изображение строки.
Для того чтобы просмотреть апплет в окне браузера, необходим HTML-
документ, в который при помощи специального тэга вставлена ссылка на
апплет. Создадим файл [Link]:
<HTML>
<НЕАО><Т1ТЬЕ>Программа "Hello, world"</TITLEX/HEAD>
Глава 11. Встраиваемые компоненты 607
<BODY>
<НЗ>Программа выводит строку:<НЗ>
<APPLET CODE="[Link]" WIDTH=150 HEIGHT=25>
</APPLET>
</BODY>
</HTML>

Откроем этот файл в окне браузера. Мы должны увидеть изображение, по-

казанное на рис. 11.23.

Программа выводит строку:

Рис. 11.23. HTML-доку-

мент апплета HelloWorld

Встраивание апплета в HTML-документ

Для встраивания апплетов в HTML-документ можно использовать два тэга:
<APPLET> или <OBJECT>. Для каждого из них существует обязательный закры-
вающий тэг, соответственно </APPLET> и </OBJECT>. В спецификации языка
HTML 4.0 тэг <APPLET> называется отмененным и рекомендуется использо-
вать для встраивания апплетов более общий тэг <OBJECT>, который был опи-
сан ранее в этой главе. Вместе с тем, тэг <APPLET> продолжает широко ис-
пользоваться. В версии языка HTML 4.0 он имеет следующий набор собст-
венных параметров:
П codebase=ur-I
Задает базовый URL апплета. Если значение этого параметра не задано, то
по умолчанию используется базовый URL текущего документа. Значением
параметра может быть только URL-адрес каталога текущего документа
или его подкаталогов.
О archive=url_list
Задает список разделенных запятыми URL-адресов архивов. Архивы
содержат классы и другие ресурсы, которые могут быть использованы
апплетом. Они предварительно загружаются браузером для повышения
производительности апплета. Адреса архивов задаются относительно ба-
зового URL апплета.
608 Часть II. Интерактивные Web-документы

CJ code=file_name
Определяет имя и местоположение файла, содержащего класс апплета,
относительно базового URL апплета. Один из параметров code или
object должен обязательно присутствовать.
П object=r~ile_name
Определяет имя и местоположение относительно базового URL апплета
файла, содержащего описание апплета в специальном формате, содержа-
щем только имена классов без их реализации. По этим именам в случае
необходимости сами классы могут быть получены из архива.
П alt=string
Указывается альтернативный текст для замены области <APPLET> в брау-
зерах, которые не могут отображать апплеты.
П1 name=string
Задает имя конкретного экземпляра апплета.
П width=n
Ширина области апплета в пикселах.
П height=n
Высота области апплета в пикселах.
О align=(top[middle|bottom!left I right)
Задает выравнивание апплета в соответствии с заданным значением па-
раметра.
О hspace=n
Задает размер дополнительного пространства слева и справа от области
апплета. Может задаваться в пикселах или процентах доступного свобод-
ного пространства.
О vspace=n
Задает размер дополнительного пространства сверху и снизу от области
апплета. Может задаваться в пикселах или процентах доступного свобод-
ного пространства.

Жизненный цикл апплета

Каждый апплет имеет свой цикл существования. То, что происходит с ап-
плетом при открытии документа, просмотре, переходе к другому документу
и возвращении, зависит от методов inito, start о, stop о, destroy о. Вы-
зывая эти методы, браузер или программа просмотра апплетов appletviewer
управляют поведением апплета.
Метод init () вызывается один раз сразу после загрузки документа и созда-
ния апплета. Он используется для того, чтобы подготовить условия для вы-
Глава 1 1. Встраиваемые компоненты _ 609

полнения апплета, например, создать интерфейс пользователя: кнопки, об-

ласти ввода текста и другие элементы управления. Апплету могут понадо-
биться различные ресурсы, которые также удобно загрузить во время ини-
циализации: шрифты, изображения и т. д.
Метод start о вызывается каждый раз, когда апплет становится видимым,
метод stop о, напротив, когда апплет становится невидимым. Такая смена
состояний происходит, например, при просмотре многостраничного доку-
мента или переходе по ссылке к другому документу и возвращении обратно.
Метод stop о приостанавливает выполнение апплета, а метод start о возоб-
новляет.
Метод destroy о также вызывается всего один раз и сообщает апплету о не-
обходимости перед завершением работы освободить используемые ресурсы,
кроме процессора и памяти.
Указанные методы могут переопределяться конкретным классом апплета.
Рассмотренный пример Heiioworid. java все методы наследует, переопреде-
ляя только метод paint ( ) для вывода изображения строки. Метод paint ( ) ,
а также метод update о, наследуемые у класса [Link]. Container, исполь-
зуются для изображения на экране того объекта, к которому они относятся.
Метод paint ( ) полностью перерисовывает объект, а метод update ( ) рисует
только изменения в изображении объекта, экономя время, необходимое для
восстановления картинки. Управление обновлением изображения организо-
вано таким образом, что метод update о никогда не вызывается объектом
непосредственно, а только через метод repaint ( ) , как будет показано ниже.
Методы paint ( ) и update ( ) , как правило, переопределяются внутри апплета.
От апплетов, подобных HelioWord. java, мало пользы. Отображаемая ими
статическая информация может быть размещена в HTML-документе без до-
полнительных затрат на выполнение апплета. Следующий вариант апплета,
также статический, добавляет к выводимому изображению некоторые эле-
менты украшения.

Ш р Ш Ш | Ю ¥ : ': '''

import [Link].*;
import j [Link].*;
public class HelloWorld2 extends Applet {
private Font font;
public void initO {
font = new FontC'Arial", [Link], 48)
}
public void paint(Graphics g) {
// The pink oval
[Link]([Link]) ;

20 Зак. 944
 610
Часть II. Интерактивные Web-

[Link](10, 10, 330, 100);

[Link]([Link]);
[Link](font);
[Link]("Hello, World!", 40, 75);

В этом примере уже переопределяется метод inito, осуществляющий за-

грузку необходимого ресурса - шрифта "Arial" для отображения выводимой

Изображение апплета в окне браузера показано на рис. 11.24.

Программа выводит строку "Hello, world!" желтым

цветом на фоне синего овала:

Hello, World!

Рис. 11.24. HTML-доку-

мент апплета HelloWorld2

В следующем примере мы попытаемся переопределить методы, управляю-

щие жизненным циклом апплета: inito, start,), stop о, destroy 0 так™
вод'имым ™06 °6РаЩеНИе * "™ С™*™**™™ -общением, вы-

Pi|IHllllPM" : mm

import [Link];
import [Link];
public class HelloWorldS extends Applet
StringBuffer buffer;
int start=0;
int stop=0;
public void init() (
buffer = new StringBuffer();
addltern("Инициализация; ");
Глава 11. Встраиваемые компоненты 611

public void start() {

addltem("Запуск апплета "+(++start)+"-й раз; ");
)
public void stop() {
addltemt"Приостановка апплета "+(++stop)+"-й раз; ");
}
public void destroy() {
addltem("Заканчиваем работу");
}
void addltem(String newWord) {
[Link](newWord);
[Link](newWord);
repaint();
}
public void paint(Graphics g) {
[Link](0, 0, getSize().width-1, getSize().height - 1);
[Link]("Hello, world!", 5, 15);
[Link]([Link](), 5, 30);

В данном примере каждый из методов inito, start(), stopo, destroy()

использует определенный внутри апплета метод additemo для добавления к
переменной buffer своего сообщения. Затем изображение строки buffer,
помещенное после приветствия "Hello, world!" в прямоугольной рамке, при
помощи метода paint о отображается на экране. Обратите внимание на тип
переменной buffer. В языке Java для описания строкового типа используют-
ся классы string и stringBuffer. Класс string служит для представления
строковых констант, а класс stringBuffer — строковых переменных.

Г -.;'£' '. 1
:;•>.;!: ^>- И
Ш Щ :,.*
if He net j l «k,4' .j NmvH'.i.i.l Ч i-4,i..*ol.."

Программа выводит строку "Hello, world" и сообщения об изменении

состояния апплета:

Hello, world!
Инициализация; Запуск зпплетз 1 -и раз; Приостановка апплета 1 -и раз; Запуск апплета 2-й раз; Приостановка зпплета :

Рис. 11.25. HTML-документ апплета HelloWorldS

612 Часть II. Интерактивные Web-документы

Выводимое на экран изображение будет динамически меняться с каждым

изменением в жизненном цикле апплета и иметь вид, изображенный на
рис. 11.25.

Создание графического интерфейса пользователя

Одним из недостатков последнего примера является невозможность про-
смотреть выводимую строку целиком. Видимая часть ограничена размером
рамки. Для того чтобы иметь возможность просмотреть всю строку, необхо-
димо применить соответствующий элемент графического интерфейса поль-
зователя (GUI).
Для работы с окнами, графикой и создания пользовательского интерфейса в
состав средств разработчика JDK входит набор AWT (Abstract Windowing
Toolkit). Ему соответствует пакет [Link], содержащий все необходимые
классы. Набор AWT предоставляет для создания интерфейса пользователя
такие компоненты:

Кнопка (класс [Link]).

Флажок (класс [Link]).
Строка текста (класс j ava. awt. TextField).
Многострочное текстовое поле (класс j ava. awt. TextArea).
Метка . (класс Java. awt. Label).
Список (класс j ava. awt .List).
Всплывающее меню (класс j ava . a w t . Choice).
Полоса прокрутки (класс [Link]).
Графическая область экрана (класс [Link]).
Меню (класс [Link]).

Начиная с версии 1.1, набор JDK содержит новый комплект средств разра-
ботки графического интерфейса пользователя — swing. Комплект Swing со-
держит многие элементы, отсутствующие в комплекте AWT, но не является
его полной заменой. Swing позволяет создавать элементы графического ин-
терфейса, которые выглядят одинаково на различных платформах. Как из-
вестно, в графической оконной системе UNIX внешний вид элементов
интерфейса зависит от выбора соответствующей библиотеки, содержащей
набор этих элементов. Используя swing, можно создавать графический ин-
терфейс, внешне одинаковый для разных платформ. В Java 1.2 пользователь-
ский интерфейс рекомендуется создавать, используя Swing вместо AWT.
В следующем примере для иллюстрации используется всего один элемент
GUI — текстовое поле, которое может содержать несколько одновременно
Глава 11, Встраиваемые компоненты 613

отображаемых строк текста с возможностью просмотра в горизонтальном и

вертикальном направлении.

Ш1!Шв11ИЮпле* а 1
import [Link];
import [Link]; •
public class HelloWorld4 extends Applet {
TextArea text_area;
int start=0;
int stop=0;
public void init() {
text_area = new TextArea("Hello, World!");
text_area.setEditable(false);
setLayout(new [Link](1,0));
add(text_area) ;
addltem("Инициализация;");
}
public void start() {
addltem("Запуск апплета "+(++start)+"-й раз; ");
}
public void stop() {
addltem("Приостановка апплета "+(++stop)+"-й раз; ");
}
public void destroy)) {
addltem("Заканчиваем работу");
}
void addltem(String hewWord) (
text_area.append(newWord);

Изображение апплета представлено на рис. 11.26.

«дай
Hello, МогКЯИнициализация Запуск апплета 1-й раз; Приостановка апплета 1-й раз; Запуск апплета 2-й раз; Приост ;
апплета 19-й раз; Приостановка апплета 19-й раз; Запуск апплета 20-й раз;

Applet started.

Рис. 11.26. HTML-документ апплета HelloWorld4

Последний пример отличается от предыдущего только способом вывода на

экран текста. В примере 11.8 для вывода используется элемент графического
614 Часть II. Интерактивные Web-документы

интерфейса — текстовая область. Это изменение находит отражение в тексте

апплета. В последнем примере отсутствует переопределение метода paint ( ) .
В нем нет необходимости, так выводом на экран теперь управляет не метод
апплета, а сам элемент интерфейса. Посмотрим, в каком месте программы
это происходит.
Основные изменения произошли в методе init ( ) . Сам апплет содержит но-
вую переменную text_area, которая может принимать значение ссылки на
объект типа TextArea. Этот тип представляет область, способную отображать
несколько строк текста. Метод init () в качестве первого шага инициализа-
ции апплета создает при помоши оператора new новый объект типа TextArea
и выводит в него начальную строку "Hello, world!".
Вызов метода setEditableO с аргументом false запрещает редактирование
текста внутри области.
Следующие две строки содержат обращения к методам setLayout ( ) и add ( ) .
ЭТИ методы класс Applet наследует у Класса [Link]. Container.
Метод add () служит для того, чтобы вставить в апплет элемент, задаваемый
аргументом, в данном случае — текстовую область, на которую указывает
переменная text_area.
Метод setLayLayout {) создает новый объект типа GridLayout для управления
размещением элементов внутри апплета.
Последнее замечание нуждается в пояснении. Существуют разные формы
метода add (), отличающиеся количеством и типом аргументов. Форма, ис-
пользованная в примере, не имеет дополнительных аргументов, при помощи
которых можно было бы указать, каким образом следует расположить до-
бавляемый элемент внутри апплета. А что произойдет, если кроме текстовой
области добавить в апплет другие элементы: кнопки, метки, меню? Для
управления размещением элементов внутри объектов-контейнеров (к ним
относятся и апплеты) в языке Java существует специальный тип объектов
LayoutManager. Если говорить точнее, ТО [Link]— ЭТО ин-
терфейс, содержащий список методов, без их реализации, для управления
компоновкой элементов внутри контейнера. Реализация методов интерфей-
са, как мы знаем, осуществляется внутри классов. В состав AWT входят не-
сколько классов, реализующих некоторые общие схемы размещения. Это
классы BorderLayout, CardLayout, FlowLayout, GridLayout, GridBagLayout.
Внутри апплета создается объект одного из перечисленных типов, называе-
мый менеджером размещения, который и управляет размещением элемен-
тов. В примере 11.8 используется менеджер типа GridLayout.
Менеджер BorderLayout старается разместить элемент в одной из пяти име-
нованных областей контейнера: NORTH (СЕВЕР), SOUTH (ЮГ), EAST
(ВОСТОК), WEST (ЗАПАД) и CENTER (ЦЕНТР), в соответствии со значением
аргумента в методе add ( ) , например:
add(new Button("OK"), [Link]);
Глава 11. Встраиваемые компоненты _ 615

Менеджер CardLayout размешает элементы подобно карточкам в картотеке,

когда только одна карточка является видимой в каждый момент.
Менеджер FiowLayout размещает элементы слева направо и сверху вниз по-
добно тому, как размещается текст на странице.
Менеджер GridLayout делит область контейнера на равные прямоугольники
и размещает элементы по одному в каждом прямоугольнике. Например, об-
ращение к методу
setLayout (new GridLayout (3,2) ) ;
устанавливает для размещения элементов сетку, состоящую из трех строк
и двух столбцов.
Менеджер GridBagLayout использует наиболее гибкую схему, выравнивая по
горизонтали и по вертикали элементы, которые могут быть разного размера.

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

import j ava . awt . event . MouseListener ;

import j ava . awt . event . MouseEvent ;
import j ava . awt . event . KeyListener;
import j ava . awt . event . KeyEvent ;
import Java. applet. Applet;
import Java. awt .TextArea;

public class HelloWorldS extends Applet implements MouseListener,

KeyListener {
TextArea text_area;
int start = 0;
int stop = 0;
int click = 0;
int keytyped = 0;

public void initO {

addMouseListener (this) ;
addKeyListener (this) ;
616 _ Часть II. Интерактивные Web-документы

text_area = new TextArea ("Hello, World! ", 4, 80) ;

text_area.setEditable (false) ;
setLayout (new Java . awt . FlowLayout ( ) ) ;
add(text_area) ;
addltemf "Инициализация; ") ;
}
public void start () {
addltem( "Запуск апплета "+ (++start) +"-й раз; ") ;
}
public void stopO {
addl tern ("Приостановка апплета "+ (++stop) +"-й раз; ") ;
}
public void destroy () {
addl tern ("Заканчиваем работу");
)
void addltem( String newWord) {
text_area. append (newWord) ;
}
public void mouseEntered (MouseEvent event) {
}
public void mouseExited (MouseEvent event) {
}
public void mousePressed (MouseEvent event) {
}
public void mouseReleased (MouseEvent event) {
}
public void mouseClicked (MouseEvent event) {
addltemf (++click) +"-й "+"щелчок; ") ;
}
public void keyPressed (KeyEvent event) {
}
public void keyReleased (KeyEvent event) {
}
public void keyTyped (KeyEvent event) (
addltem( (++keytyped) +"-oe "+" нажатие клавиши; ") ;

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

Она содержит предложение implements MouseListener, KeyListener. Это озна-
чает, как мы помним, что класс Heiioworid5 реализует два интерфейса:
[Link] .event .MouseListener И [Link] . event .KeyListener, И, ЗНЗЧИТ, обязан
реализовать методы этих интерфейсов. Выше мы перечислили методы ин-
терфейса Java. awt. event. MouseListener. В классе HelloWorldS ОНИ реализо-
ваны очень просто. Метод moused icked о , отвечающий за обработку щелч-
Глава 11. Встраиваемые компоненты 617

ков мышью, вызывает метод additemo для добавления в текстовую область

сообщения об этом событии. Остальные методы свои события игнорируют.
Интерфейс [Link] объявляет три метода:
void keyPressed(KeyEvent e) Вызывается при нажатии клавиши
void keyReleased(KeyEvent e) Вызывается при отпускании клавиши
void keyTyped(KeyEvent e) Вызывается при отпускании клавиши
после нажатия

В классе HeiioWoridS все они также реализованы, но обрабатывается только

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

Программа "Hello v/OR-f - Microsoft internet Es-ptorer

m ж

Программа выводит строку "Hello, world!", сообщения об

изменении состояния апплета, нажатии клавиши и щелчке
мышью:

.ч>,-< HS

Jill
Рис. 11.27. HTML-документ апплета HelloWorldS

В языке Java каждому типу событий соответствует класс, например, событи-

ям, связанным с мышью, — класс MouseEvent, событиям, связанным с кла-
виатурой, — класс KeyEvent, событиям, которые генерируются при манипу-
ляциях с компонентами пользовательского интерфейса (нажатие кнопки), -
класс ActionEvent. Каждое событие имеет источник, представленный объек-
том, и идентификатор типа, позволяющий различать разные события одного
класса, например, нажатие и отпускание клавиши. Модель обработки собы-
тий основана на применении специальных объектов — регистраторов собы-
тий. Объект-источник поддерживает список всех объектов-регистраторов.
При возникновении события он вызывает метод объекта-регистратора и пе-
редает ему в качестве аргумента объект, соответствующий типу события.
Чтобы источник события мог вызвать метод объекта-регистратора, необхо-
димо, чтобы этот метод был регистратором реализован. С этой целью все
 618 Часть II. Интерактивные Web-документы

объекты-регистраторы одного типа должны реализовывать соответствующий

интерфейс. Например, если объект регистрирует события клавиатуры
KeyEvent, TO ОН ДОЛЖСН реализовать интерфейс KeyListener.
В нашем примере в качестве регистратора событий клавиатуры и мыши ис-
пользуется сам апплет HelloWord5. Он добавляет себя в списки регистрато-
ров к объектам-источникам событий при помощи методов addKeyListenerO
и addMouseListener ( ) , соответственно. Идентификатор this обозначает теку-
щий апплет. При щелчке мышью в области апплета объект-источник собы-
тия вызовет метод mouseCiickedfMouseEvent event), реализованный в апплете.
Аналогично будут обрабатываться и другие события.
В примере 11.9 апплет обрабатывает не все события клавиатуры и мыши, но
должен определять все методы соответствующего интерфейса, даже если он
их не использует. В результате текст апплета содержит шесть пустых методов
ИЛИ "заглушек": mouseEntered, mouseExited, mousePressed, mouseReleased,
keypressed и keyReleased. Если апплет реализует несколько интерфейсов, и
из каждого интерфейса использует только по одному методу, то он все рав-
но должен реализовать оставшиеся методы как "заглушки". Избежать этого
можно, только отказавшись от реализации интерфейсов. Но как тогда обра-
батывать события? В этом случае можно использовать возможности, добав-
ленные в версию Java 1.1.
В Java 1.0 не разрешалось определять новые классы внутри других классов.
Новый класс мог быть определен только на верхнем уровне — как член па-
кета. Расширения языка, добавленные в Java 1.1, позволяют определять но-
вые классы внутри других классов и даже внутри блоков, заключенных
в фигурные скобки {}. Такие классы называют внутренними классами. Ис-
пользуя внутренние классы, в предыдущем примере можно отказаться от
интерфейсов KeyListener, MouseListener и записать текст более компактно:
: : 1 :i
•*'-**''".-?* '~"'' ' ""^Ux:'f" •:;*" кЖ";"^-'"•'" | '•'''"•^"' " ' ";;;'.j"|

import j [Link].*;
import j [Link].*;
import j [Link].*;

public class HelloWorldSa extends Applet {

TextArea text_area;
int start = 0;
int stop = 0;
int click = 0;
int keytyped = 0;

public void init() {

[Link](new MouseAdapter() {
public void mouseClicked(MouseEvent event) {
Глава 11. Встраиваемые компоненты _ 619

addltem( (++click) +"-й "+"щелчок; ") ;

this .addKeyListener (new KeyAdapter { ) {

public void keyTyped(KeyEvent event) (
addltem( (++keytyped) +"-oe "+" нажатие клавиши; ") ;

text_area = new TextArea ("Hello, World! ", 4, 80) ;

text_area.setEdi table (false) ;
setLayout (new j ava . awt . FlowLayout ( ) ) ;
add(text_area) ;
addltem( "Инициализация; ") ;
}
public void start () {
addltemf "Запуск апплета "+ (++start) +"-й раз; ") ;
}
public void stopO {
addltemf "Приостановка апплета "+ (++stop) +"-й раз; ");
}
public void destroy () (
addltemf "Заканчиваем работу") ;
}
void addltemf String newWord) {
text_area. append (newWord) ;

Разберем, как обрабатываются события в этом апплете. В методе init () ап-

плет передает своему методу addMouseListener () аргумент, чтобы добавить
его в список объектов-регистраторов событий от мыши. Аргументом являет-
ся объект, создаваемый оператором new. Рассмотрим его подробно.
MouseAdapter — это абстрактный класс, имеющий следующее описание:
public abstract class MouseAdapter extends Object implements MouseListener (
void mouseClicked(MouseEvent event);
void mouseEntered(MouseEvent event);
void mouseExited(MouseEvent event);
void mousePressed(MouseEvent event);
void mouseReleased(MouseEvent event);
}

Все методы класса MouseAdapter — это методы интерфейса MouseListener.

Они также являются пустыми. Этот абстрактный класс является шаблоном,
используя который можно создать новый класс, в котором переопределить
 620 _ Часть II. Интерактивные Web-документы

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

Если затем создать объект этого нового класса, то его можно использовать
в качестве регистратора событий мыши, передав в виде аргумента методу
addMouseListener ( ) . Оператор
new MouseAdapter (} {
public void mouseClicked (MouseEvent event) {
addltem( (++click) +"-й "+"щелчок; ") ;

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

объект этого класса. Данный внутренний класс наследует классу MouseAdapter,
переопределяя только один, необходимый апплету, метод mousedickedo .
Вновь созданный объект безымянного класса в качестве аргумента
addMouseListener о добавляется в список регистраторов событий мыши.
Обработка событий клавиатуры организована аналогично.

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

:. ...;;... ^..:^;л:;*..^;-;;й;;й;-;:;лй^;й^й:^;^

import j ava . awt . * ;

import j ava . applet . * ;
import j ava . net . * ;
public class HelloWorld6 extends Applet {
Image globe;
public void initO (
URL CodeBase = getCodeBase ( ) ;
globe = getlmage (CodeBase, "[Link]");
}
public void paint (Graphics g) {
int width = globe. getWidth (this) ;
Глава 11. Встраиваемые компоненты 621

int height = [Link](this);

[Link](52, 52, width+10, height+10);
[Link](globe, 57, 57, width, height, this);

В примере 11.11 предполагается, что файл [Link], содержащий изобра-

жение, находится в том же каталоге, что и файл, содержащий код апплета.
При помощи метода getcodeBase () определяется URL-адрес этого каталога,
после чего метод get image о загружает из каталога указанный файл. Для
отображения файла в окне браузера переопределяется метод paint ( ) . Изо-
бражение апплета приведено на рис. 11.28.

BR .Ktut view &;> Fir

,,^' .: :^я, ' . ' • .
:
" • • S

Пример апплета, содержащего рисунок

Рис. 11.28. Пример

апплета, содержащего
рисунок

Архивы
В предыдущем примере для нормальной работы апплета требуются два фай-
ла: файл апплета [Link] и файл рисунка [Link]. Апплет мо-
жет содержать несколько рисунков, несколько звуковых файлов и использо-
вать внутренние классы, о которых говорилось выше. Для внутренних клас-
сов компилятор создает отдельные файлы. Таким образом, для работы
апплета может потребоваться достаточно большое количество файлов. Брау-
зер при загрузке апплета должен загрузить также и все необходимые файлы,
и для каждого из них он открывает отдельное HTML-соединение с серве-
ром. В результате увеличивается сетевой трафик и загруженность Web-
сервера, который вместо одного запроса вынужден обрабатывать несколько.
Выход заключается в том, чтобы поместить все необходимые файлы в один
архивный файл. Передача этого файла браузеру произойдет в рамках одного
622 Часть II. Интерактивные Web-документы

HTML-соединения. Впервые передача апплетов в составе архивных файлов

была поддержана браузером Netscape, который использовал для этой цели
формат ZIP без компрессии. Для того чтобы сообщить браузеру о местона-
хождении архива, в состав тэга <дррьЕТ>был добавлен новый параметр
ARCHIVE:
<APPLET CODE = "[Link]" ARCHIVE = "[Link]"> </APPLET>

Местоположение архива указывается относительно базового URL-адреса

апплета, то есть относительно каталога, содержащего его код. Версия HTML
4.0 официально поддерживает параметр ARCHIVE.
Впоследствии фирмы Netscape и Sun совместно разработали на базе ZIP-
формата новый формат JAR (Java ARchive), позволяющий передавать аппле-
ты вместе с сопутствующими файлами в составе одного архивного файла в
сжатом виде. Формат JAR поддерживается также последними версиями
Internet Explorer (4.0+). Для создания JAR-архива в состав JDK входит ути-
лита командной строки jar. Типичное обращение к ней имеет вид:
jar -cf [Link] *.class [Link] [Link]

Значение опций:
-с — создать новый архив;
-f — указать имя архивного файла.

Java и JavaScript
Применения апплетов в Web-программировании многочисленны и разнооб-
разны. Их подробное изучение не является целью данной книги. Мы рас-
смотрели основы апплетов и посвятим остаток раздела тому, как организо-
вать совместное использование двух разных технологий, затронутых в этой
книге: сценариев JavaScript и Java-апплетов.
Для создания динамических HTML-страниц используются различные под-
ходы. С некоторыми из них мы уже познакомились. Язык JavaScript создан
в фирме Netscape и встроен разработчиками в браузер Netscape для создания
интерактивных сценариев. Технология Java развивается фирмой Sun. Каждая
из этих технологий имеет свои преимущества и недостатки, но обе распо-
лагают большим арсеналом средств для решения своих задач. Некоторые
задачи удобнее решать при помощи JavaScript, другие — используя Java.
Браузер Netscape поддерживает обе технологии, но первоначально они су-
ществовали внутри браузера изолированно друг от друга, не имея возможно-
сти взаимодействовать. Возможность такого взаимодействия полезна, так
как позволяет некоторые задачи решать проще, комбинируя подходящие
приемы из обеих технологий. Начиная с версии 3.0 в браузеры Netscape до-
бавлена новая технология LiveConnect, поддерживающая взаимодействие
JavaScript и Java, а именно:
Глава 11. Встраиваемые компоненты 623

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

Java, встроенными в браузер;
П сценарии JavaScript могут читать и изменять данные апплетов, в описа-
нии которых имеется ключевое слово public;
П сценарии JavaScript могут вызывать методы апплетов, в описании кото-
рых имеется ключевое слово public;
П апплеты могут читать и изменять свойства объектов, элементы массивов
и вызывать функции JavaScript.
Для взаимодействия с Java технология LiveCormect добавляет в язык
JavaScript новые типы данных.
О JavaPackage — объект, являющийся представлением пакета Java в JavaScript
П Javaciass — объект, являющийся представлением класса Java в JavaScript
О javaObject — объект, являющийся представлением объекта Java в JavaScript
П JavaArray — объект, являющийся представлением массива Java в JavaScript
Объект Javaciass не имеет собственных свойств. Все его свойства представ-
ляют поля и методы соответствующего класса Java, имеющие ключевое сло-
во public в своем описании, и имеют те же самые имена. Например, объект
[Link]. System Представляет Java-класс [Link]. System.
Объект JavaObject представляет объект Java, то есть экземпляр Java-класса.
Его свойства представляют открытые поля и методы экземпляра класса.
Объект JavaPackage может содержать классы, представленные объектами
Javaciass. Все объекты JavaPackage содержатся в родительском объекте. На
этот объект самого верхнего уровня иерархии ссылается свойство Packages
объекта window. Схема именования свойств для JavaPackage отражает схему
именования пакетов Java. Например, свойство [Link] представля-
ет класс [Link].
Браузер Netscape, поддерживая технологию Java, содержит собственную
коллекцию Java-классов. В эту коллекцию для взаимодействия с JavaScript
добавлены новые классы, которые сгруппированы в самостоятельную иерар-
хию пакетов, схема именования которой содержит имена, начинающиеся
словом netscape. Классы, обеспечивающие взаимодействие Java с JavaScript,
содержатся в пакете [Link]. Основным среди них является
класс netscape, javascript, jsobject, представляющий объект JavaScript.

( Примечание ^
Браузер MS Internet Explorer также имеет свою коллекцию классов Java. Начи-
ная с версии Internet Explorer 4.0 в нее включен пакет netscape, javascript.
624 Часть II. Интерактивные Web-документы

Класс jsobject имеет следующий синтаксис:

public final class JSObject extends Object {
public static JSObject getWindow([Link] applet);
public Object getMember(String name);
public Object getSlot(int index);
public void setMember(String name, Object value);
public void setSlot(int index, Object value);
public void removeMember(String name);
public Object call(String methodName, Object args[]);
public Object eval(String s);
public String toStringf);
protected void finalize();
}

П Метод getwindowo возвращает объект типа jsobject, представляющий

окно браузера, содержащее апплет applet.
G Метод getMember (лате) возвращает объект Java, представляющий свойст-
во объекта JavaScript, заданное аргументом name.
П Метод getsiot () возвращает элемент массива JavaScript.
П Метод setMember (лате, value) устанавливает для объекта JavaScript зна-
чение свойства лалге равным value.
П Метод setsiot(index, value) устанавливает значение элемента массива.
П Метод removeMember (name) удаляет свойство name объекта JavaScript.
П Метод call(methodName, a r g s [ ] ) вызывает метод methodName объекта
JavaScript и передает ему массив аргументов a r g s f ] .
П Метод evai(s) выполняет строку s, которая содержит интерпретируемый
код JavaScript.
О Метод tostring () служит для преобразования различных значений в стро-
ковую форму.
Все объекты JavaScript образуют иерархическую структуру, имеющую в ка-
честве корня текущее окно браузера. Для доступа к объектам JavaScript нуж-
но сначала получить доступ к этому окну.
Необходимо выполнить несколько условий, чтобы предоставить апплетам
Java доступ к свойствам и методам объектов JavaScript.
П Первое, что нужно сделать, — это обеспечить компиляцию самого аппле-
та. Для этого надо сообщить компилятору, где находятся классы, входя-
щие в пакет netscape, javascript. Браузеры сохраняют этот пакет в соста-
ве архивных файлов: [Link] (Netscape 4.x) и [Link] (Internet
Explorer 4.0 и выше). Надо уточнить местоположение этих файлов и ука-
зать его в переменной среды CLASSPATH, например:
Глава 11. Встраиваемые компоненты _ 625

set CLASSPATH= .; с: \winnt\Java\[Link];

c:\Program Files\Netscape\Coramunicator\Program\Java\Classes\java40. j a r ;
В Windows это можно сделать также через Панель управления.
О В текст апплета добавить строку
import netscape . javascript . *
П Для того чтобы апплет имел доступ к объектам jsobject, необходимо в
HTML-документе добавить в тэг <APPLET> параметр MAYSCRIPT.
П Внутри апплета создать для доступа к объектам JavaScript объект, пред-
ставляющий окно браузера, содержащее данный апплет:
JSObject applet_win = JSObject .getWindow (this) ;

Рассмотрим несколько примеров взаимодействия Java с JavaScript.

а) Текст апплета Appietcaiis JScript . class

import j ava . applet . * ;
impo r t j ava . awt . * ;
import j ava . awt . event . * ;
import netscape. javascript. *;
public class AppletCallsJScript extends Applet implements ActionListener
Button b;
TextField t;
public void initO {
t = new TextField ( 40 );
add(t) ;
b = new Button ( "Выполнить " ) ;
add(b) ;
[Link] (this) ;
}
public void actionPerformed(ActionEvent ae) {
if ([Link] == b) {
JSObject mywin = JSObject .getWindow (this) ;
mywin . eval (t . getText ( ) ) ;

б) Текст HTML-документа
<HTMLXHEAD>< /HEADXBODY>
<h3>
Здесь размещен апплет, вызывающий выполнение функции JavaScript
</h3>
626 Часть II. Интерактивные Web-документы

Введите функцию и нажмите кнопку<Ьг>

<APPLET CODE=[Link]
MAYSCRIPT
WIDTH=300
HEIGHT=80>
</APPLET></BODYX/HTML>

В этом примере апплет, встроенный в HTML-документ, содержит текстовое

поле и кнопку Выполнить. В текстовое поле можно ввести строку, которая
содержит обращение к функции JavaScript. Нажатие кнопки обрабатывается
методом actionPerformed ( ) . Метод actionPerformed () создает объект, пред-
ставляющий окно браузера, вызывает метод этого объекта eval () и передает
ему для выполнения строку, введенную в текстовое поле. На рис. 11.29 по-
казана работа апплета, который вызывает функцию alert с HELLO, WORLD'),
осуществляющую вывод сообщения в диалоговое окно.

, 4i> „ ЗЙ-:'.:1?|;
Fnwari Stop .cnw..,l..., Ml-.l..,y Cheti

Здесь размещен апплет, вызывающий выполнение

функции JavaScript

Введите функцию и нажмите кнопку

iijalert I 'HELLO. WORLD I Щ.

ИЯ 1 HELLO WORLD

Рис. 11.29. Вызов функции JavaScript из апплета Java

|Щ;|||3.1(инамическое создание HTML-документа ,

а) Текст апплета CreateHtmlForm. Java

import j [Link].*;
import j [Link].*;
import j [Link].*;
import netscape.j avascript.*;
public class CreateHtmlForm extends Applet implements ActionListener {
Button aButton;
public void init(}{
setLayout(new FlowLayout(});
Глава 11. Встраиваемые компоненты 627

aButton = new Button("Создать страницу");

add(aButton);
[Link](this);
}
public void actionPerformed(ActionEvent ae) {
if ([Link]() == aButton){
String HTML = "<html>";
HTML +="<headxtitle>CosflaHHe cTparaujbi</title></head>";
HTML +="<body>";
HTML +="<пЗ>Эта страница создана из апплета Java</h3>";
HTML +="<form method='get' action='/cgi-bin/[Link]'>";
HTML +="Ввод CTporaKinput type='text' name='textfield'xbr><br>";
HTML +="Кнопка передачи <input type=submit
name=subnamexbr><br>";
HTML +="Кнопка сброса <input type=resetx/p>";
HTML +="</formX/bodyx/html>";
JSObject win = [Link](this);
[Link]("createHTML(\"" + HTML +"\");");

б) Текст HTML-документа со встроенным сценарием JavaScript

<HTMLXHEAD></HEADXBODY>
<SCRIPT>
function createHTML(s) {
[Link](s) ;
[Link]() ;
}
</SCRIPT>
<h3>
Здесь размещен апплет, создающий HTML-страницу
</h3>
Нажмите кнопку<Ьг>
<APPLET CODE=[Link]
MAYSCRIPT
WIDTH=120
HEIGHT=100>
</APPLETX/BODYX/HTML>

В примере 11.13 (6) HTML-документ содержит описание функции JavaScript

с именем createHTML ( ) . Эта функция вызывает метод write (s) объекта
document для записи в объект document строки s. Объект document представ-
ляет HTML-документ, выведенный на экран в данный момент. Если выво-
димые строки являются строками HTML-кода, то таким образом создается
новый HTML-документ. В HTML-документ встроен апплет, содержащий
628 Часть II. Интерактивные Web-документы

одну кнопку с надписью Создать страницу. При нажатии кнопки вызывается

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

щ Ш
g

В
Здесь размещен апплет, создающий НТМ1^страницу
Нажмите кнопку

1 ' 8Ч Mv Cotnputer

Щ Search Г

Эта страница создана из апплета Java

Ввод строки!

Кнопка передачи {

Кнопка сброса;'

Рис 11.30. Динамическое создание HTML-страницы

а) Текст апплета FormReadWrite. Java

import [Link].*;
import j [Link].*;
Глава 1 1. Встраиваемые компоненты _ 629

import j ava . awt . * ;

import netscape . javascript . * ;
public class FormReadWrite extends Applet implements ActionListener (
Button buttonl , button2 ;
TextField text_field;
JSObject window;
public void initO {
setLayout (new FlowLayout ( ) ) ;
text_field = new TextField ( 30 );
buttonl = new Button ("Запись в форму");
button2 = new Button ("Считывание из формы");
buttonl . addActionListener (this) ;
button2. addActionListener (this) ;
add(text_field) ;
add (buttonl) ;
add(button2) ;
}
public void actionPerformed(ActionEvent ae) {
if ([Link]) == buttonl) {
JSObject window = [Link](this) ;
window. eval ("setHTMLText ( ' "+text_field.getText ()+"') ;") ;
}
if ([Link] ( ) == button2) {
JSObject window = [Link](this) ;
text_field.setText ( (String) window. eval ("getHTMLText () ;") ) ;

б) Текст HTML- документа

<HTMLXHEADXSCRI PT>
function getHTMLText (){
return document . forms [ 0 ] . elements [0] .value;
}
function setHTMLText ( s ){
document . forms [0] .elements [0] .value = s;
}
< / SCRI PTX /HEAD><BODY>
Это текстовое поле формы<Ьг>
<FORM>
<INPUT TYPE=text SIZE=30>
</FORM>
А это апплет с текстовым полем и двумя кнопками<Ьг>
<APPLET ALIGN=TOP CODE=FormReadWrite . class MAYSCRIPT WIDTH=300 HEIGTH=60>
</APPLET>
</BODYX/HMTL>
630 Часть II. Интерактивные Web-документы

HTML-документ данного примера содержит форму, состоящую из одного

текстового поля, и апплет, содержащий текстовое поле и две кнопки Запись
в форму и Считывание из формы. В документе определены также две функ-
ции JavaScript: getHTMLText () и setHTMLText ( ) . Функция getHTML () возвраща-
ет, а функция setHTMLText () устанавливает значение первого поля первой на
данной странице формы. Так как на данной странице всего одна форма,
которая содержит только одно текстовое поле, то операции чтения и записи
применяются именно к нему. Функции JavaScript вызываются внутри аппле-
та методом actionPerformed ( ) , обрабатывающим нажатие кнопок. Нажатие
кнопки Считывание из формы вызывает копирование данных из текстового
поля формы в текстовое поле апплета, нажатие кнопки Запись в форму -
наоборот, копирование данных из текстового поля апплета в текстовое поле
формы. Окно браузера, отображающее документ, представлено на рис. 11.31.

html Ш

Это текстовое поле формы

JHello, world

А это апгшет с текстовым полем н двумя кнопками

'" Ж... ;:«*,; JO'

Рис 11.31. Обмен данными между апплетом и полем HTML-формы

Заключение
Данный раздел является элементарным введением в апплеты, предназна-
ченным для того, чтобы дать начальное представление об этой развиваю-
щейся области Web-программирования. Возможно он, как и другие разделы
этой книги, вызовет интерес к продолжению изучения затронутой темы.
Многие вопросы, связанные с созданием и применением апплетов, остались
за пределами изложения. Для их изучения можно воспользоваться литерату-
рой, посвященной технологии Java и, в частности, апплетам, а также огром-
ными ресурсами Интернета. Лучший способ изучения — создание собствен-
ных апплетов. В качестве образца можно использовать примеры, в большом
Глава 11. Встраиваемые компоненты 631

количестве размещенные на различных сайтах. Отправной точкой поиска

может послужить один из следующих адресов:

[Link]
[Link]
[Link]
[Link]
[Link]
 ПРИЛОЖЕНИЕ 1

Поддержка тэгов и параметров

HTML-браузерами
В нижеследующей таблице показана поддержка тэгов и параметров тэгов
тремя ведущими браузерами. Приводимые данные справедливы для сле-
дующих версий браузеров:
a Internet Explorer, версии 4.01 (Windows 98/95/NT)
О Netscape, версия 4.04 (Windows 98/95/NT)
П Mosaic, версия 3.0 (Windows 95)
Если в ячейке таблицы фигурирует вопросительный знак, то это означает,
что поддержка данного элемента была заявлена разработчиками браузера, но
при проверке этого не оказалось.
В колонке "Спецификация" приводится номер спецификации HTML (1.0,
2.0, 3.2 или 4.0), в которой был введен данный тэг или параметр. Если эле-
мент не вошел в спецификацию, то указывается версия браузера, в который
впервые был применен данный элемент. Условные сокращения:
NS: Netscape
IE: Internet Explorer
Mos: Mosaic
Все тэги, которые допустимо использовать в разделе <BODY> HTML-доку-
мента, могут иметь параметры CLASS, ID, LANG, LANGUAGE, STYLE и TITLE. Из
соображений компактности таблицы эти параметры не приводятся.
Параметры CLASS, ID, STYLE поддерживаются Internet Explorer, начиная
с версии 3.0, и Netscape, начиная с версии 4.0.
Параметры LANG, LANGUAGE, TITLE — поддерживаются только Internet Explorer,
начиная с версии 4.0.

Поддержка тэгов и параметров HTML-браузерами

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

<A> Да Да Да 1.0
ACCESSKEY Да Нет Нет 4.0
634 Приложение 1

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

DATAFLD Да Нет Нет IE 4.0

DATASRC Да Нет Нет IE 4.0
HREF Да Да Да 2.0
INDEXSTRING Нет Да Нет NS4.0
METHODS ? ? ? 2.0
NAME Да Да Да 2.0
REL ? ? ? 2.0
REV ? ? 9 2.0
TARGET Да Да Нет 4.0
TOCSTRING Нет Да Нет NS4.0
URN ? ? ? 2.0

<ACRONYM> Да Нет Нет 4.0

<ADDRESS> Да Да Да 2.0

<APPLET> Да Да Нет 3.2

ALIGN Да Да Нет 3.2/NS 2.0
ALT Да Да Нет 3.2/NS 2.0
ARCHIVE Нет Да Нет 3.2/NS 3.0
CODE Да Да Нет 3.2/NS 2.0
CODEBASE Да Да Нет 3.2/NS 2.0
DATAFLD Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
HEIGHT Да Да Нет 3.2/NS 2.0
HSPACE Да Да Нет 3.2/NS 2.0
MAYSCRIPT Нет Да Нет NS3.0
NAME Да Да Нет 3.2/NS 2.0
SRC Да Да Нет 3.2/NS 2.0
WIDTH Да Да Нет 3.2/NS 2.0

<AREA> Да Да Да 3.2
ALT Да Да Да 3.2/IE 2.0
Поддержка тэгов и параметров HTML-браузерами 635

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

COORDS Да Да Да 3.2/IE 2.0

HREF Да Да Да 3.2/IE 2.0
NAME Да Да Нет 3.2/IE 2.0
SHAPE Да Да Да 3.2/IE 2.0
TARGET Да Да Нет 3.2/IE 2.0

<B> Да Да Да 3.2

<BASE> Да Да Да 3.2
HREF Да Да Нет 2.0
TARGET Да Да Нет 2.0/NS 2.0

<BASEFONT> Да Да Нет 4.0

COLOR Да Да Нет 4.0
FACE Да Нет Нет 4.0/IE 2.0
SIZE Да Да Нет 4.0

<BGSOUND> Да Нет Да IE 2.0

BALANCE Да Нет Нет IE 4.0
LOOP Да Нет Нет IE 2.0
SRC Да Нет Нет IE 2.0
VOLUME Да Нет Нет IE 2.0

<BIG> Да Да Да 3.2

<BLOCKQUOTE> Да Да Да 2.0

<BODY> Да Да Да 2.0
ALINK Да Да Нет 3.2
BACKGROUND Да Да Нет 3.2
BGCOLOR Да Да Нет 3.2
BGPROPERTIES Да Нет Нет IE 2.0
BOTTOMMARGIN Да Нет Нет IE 4.0
LEFTMARGIN Да Нет Нет IE 4.0
LINK Да Да Нет 3.2
636 Приложение 1

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

RIGHTMARGIN Да Нет Нет IE 4.0

SCROLL Да Нет Нет IE 4.0
TEXT Да Да Нет 3.2
TOPMARGIN Да Нет Нет IE 4.0
VLINK Да Да Нет 3.2

<BR> Да Да Да 2.0
CLEAR Да Да Да 3.2

<BUTTON> Да Нет Нет 4.0

ACCESSKEY Да Нет Нет 4.0
DATAFLD Да Нет Нет IE 4.0
DATAFORMATAS Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
DISABLED Да Нет Нет 4.0
TYPE Да Нет Нет 4.0

<CAPTION> Да Да Да 3.2
ALIGN Да Да Нет 3.2
VALIGN Да Нет Нет 4.0/IE 2.0

<BIG> Да Да Да 3.2

<CITE> Да Да Да 2.0

<CODE> Да Да Да 2.0

<COL> Да Нет Да 4.0

ALIGN Да Нет Нет 4.0
VALIGN Да Нет Нет 4.0

<COLGROUP> Да Нет Да 4.0

ALIGN Да Нет Нет 4.0
SPAN Да Нет Нет 4.0
VALIGN Да Нет Нет 4.0
WIDTH Да Нет Нет 4.0
Поддержка тэгов и параметров HTML-браузерами 637

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

<COMMENT> Да Нет Да 4.0

<DD> Да Да Да 2.0

<DEL> Да Нет Нет 4.0

CITE Да Нет Нет 4.0
DATETIME Да Нет Нет 4.0

<DFN> Да Нет Нет 3.2

<DIR> Да Да Да 2.0

<DIV> Да Да Нет 3.2

ALIGN Да Да Нет 3.2
DATAFLD Да Нет Нет IE 4.0
DATAFORMATAS Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
COMPACT Да Да Нет 3.2

<DT> Да Да Да 2.0

<EM> Да Да Да 2.0

<EMBED> Да Да Нет 3.2

ALIGN Да Да Нет 3.2
ALT Да Да Нет 3.2
BORDER Да Да Нет 3.2
HIDDEN Нет Да Нет 3.2
HSPACE Да Да Нет 3.2
NAME Да Да Нет 3.2
PALETTE Да Да Нет 3.2
PLUG INS PACE Да Да Нет 3.2
VSPACE Да Да Нет 3.2

<FIELDSET> Да Нет Нет 4.0

638 Приложение 1

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

<FONT> Да Да Да 3.2
COLOR Да Да Нет 3.2
FACE Да Да Нет 3.2
POINT-SIZE Нет Да Нет NS4.0
SIZE Да Да Нет 3.2
WEIGHT Нет Да Нет NS4.0

<FORM> Да Да Да 2.0
ACTION Да Да Да 2.0
ENCTYPE Да Да Да 2.0
METHOD Да Да Да 2.0
NAME Да Да Да 2.0
TARGET Да Да Нет 3.2

<FRAME> Да Да Нет 4.0

BORDERCOLOR Да Да Нет 4.0
DATAFLD Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
FRAMEBORDER Да Да Нет 4.0
FRAMESPACING Да Да Нет 4.0
MARGINHEIGHT Да Да Нет 4.0
MARGINWIDTH Да Да Нет 4.0
NORESIZE Да Да Нет 4.0
SCROLLING Да Да Нет 4.0
SRC Да Да Нет 4.0

<FRAMESET> Да Да Нет 4.0

BORDER Да Да Нет 4.0
BORDERCOLOR Да Да Нет 4.0
COLS Да Да Нет 4.0
FRAMEBORDER Да Да Нет 4.0
FRAMESPACING Да Да Нет 4.0
ROWS Да Да Нет 4.0
Поддержка тэгов и параметров HTML-браузерами 639

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

<HR> Да Да Да 2.0
ALIGN Да Да Да 3.2
COLOR Да Нет Да 3.2
NOSHADE Да Да Да 3.2
SIZE Да Да Да 3.2
WIDTH Да Да Да 3.2

<Hx> Да Да Да 2.0
ALIGN Да Да Да 3.2

<I> Да Да Да 2.0

<IFRAME> Да Нет Нет 4.0

ALIGN Да Нет Нет 4.0
BORDER Да Нет Нет 4.0
BORDERCOLOR Да Нет Нет 4.0
DATAFLD Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
FRAMEBORDER Да Нет Нет 4.0
HEIGHT Да Нет Нет 4.0
HSPACE Да Нет Нет 4.0
NAME Да Нет Нет 4.0
SCROLLING Да Нет Нет 4.0
SRC Да Нет Нет 4.0
VSPACE Да Нет Нет 4.0
WIDTH Да Нет Нет 4.0

<ILAYER> Нет Да Нет NS4.0

ABOVE Нет Да Нет NS4.0
BACKGROUND Нет Да Нет NS4.0
BELOW Нет Да Нет NS4.0
BGCOLOR Нет Да Нет NS4.0
LEFT Нет Да Нет NS4.0
640 Приложение 1

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

NAME Нет Да Нет NS4.0

SRC Нет Да Нет NS4.0
TOP Нет Да Нет NS4.0
VISIBILITY Нет Да Нет NS4.0
WIDTH Нет Да Нет NS4.0
Z- INDEX Нет Да Нет NS4.0

<IMG> Да Да Да 2.0
ALIGN Да Да Да 2.0
ALT Да Да Да 2.0
BORDER Да Да Да 2.0
CONTROLS Да Нет Нет IE 2.0
DATAFLD Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
DYNSRC Да Нет Нет IE 2.0
HEIGHT Да Да Да 2.0
HSPACE Да Да Да 3.2
ISMAP Да Да Да 2.0
LOOP Да Нет Нет IE 2.0
LOOPDELAY Да Нет Нет IE 2.0
LOWSRC Да Да Нет 3.2
NAME Да Да Нет 3.2
SRC Да Да Да 2.0
START Да Нет Нет IE 2.0
USEMAP Да Да Да 3.2
VRML Да Нет Нет IE 3.0
VSPACE Да Да Да 3.2
WIDTH Да Да Да 2.0

<INPUT> Да Да Да 2.0
ACCESSKEY Да Нет Нет 4.0
ALIGN Да Да Да 2.0
Поддержка тэгов и параметров HTML-браузерами 641

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

CHECKED Да Да Да 2.0
DATAFLD Да Нет Нет IE 4.0
DATAFORMATAS Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
DISABLED Да Нет Нет 4.0
MAXLENGTH Да Да Да 2.0
NAME Да Да Да 2.0
READONLY Да Нет Нет 4.0
SIZE Да Да Да 2.0
SRC Да Да Да 2.0
TABINDEX Да Нет Нет 4.0
TYPE Да Да Да 2.0
VALUE Да Да Да 2.0

<INS> Да Нет Нет 4.0

CITE Да Нет Нет 4.0
DATETIME Да Нет Нет 4.0

<ISINDEX> Да Да Да 2.0
ACTION Да Да Нет 2.0
PROMPT Да Да Нет 2.0

<KBD> Да Да Да 2.0

<KEYGEN> Нет Да Нет NS3.0

CHALLENGE Нет Да Нет NS3.0
NAME Нет Да Нет NS3.0

<LABEL> Да Нет Нет 4.0

ACCESSKEY Да Нет Нет 4.0
DATAFLD Да Нет Нет IE 4.0
DATAFORMATAS Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
FOR Да Нет Нет 4.0

21 Зак. 944
642 Приложение 1

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

<LAYER> Нет Да Нет NS4.0

ABOVE Нет Да Нет NS4.0
BACKGROUND Нет Да Нет NS4.0
BELOW Нет Да Нет NS4.0
BGCOLOR Нет Да Нет NS4.0
CLIP Нет Да Нет NS4.0
LEFT Нет Да Нет NS4.0
NAME Нет Да Нет NS4.0
SRC Нет Да Нет NS4.0
TOP Нет Да Нет NS4.0
VISIBILITY Нет Да Нет NS4.0
WIDTH Нет Да Нет NS4.0
Z- INDEX Нет Да Нет NS4.0

<LEGEND> Да Нет Нет 4.0

ALIGN Да Нет Нет 4.0

<LI> Да Да Да 2.0
TYPE Да Да Нет 4.0

<LINK> Да Да Да 2.0
DISABLED Да Нет Нет 2.0
HREF Да Да Да 2.0
REL Да Да Да 2.0
REV Нет Нет Да 2.0
TYPE Да Да Да 2.0

<LISTING> Да Да Да 2.0

<MAP> Да Да Да 3.2
NAME Да Да Да 3.2

<MARQUEE> Да Нет Нет IE 2.0

ALIGN Да Нет Нет IE 2.0
Поддержка тэгов и параметров HTML-браузерами 643

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

BEHAVIOR Да Нет Нет IE 2.0

BGCOLOR Да Нет Нет IE 2.0
DATAFLD Да Нет Нет IE 4.0
DATAFORMATAS Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
DIRECTION Да Нет Нет IE 2.0
HEIGHT Да Нет Нет IE 2.0
HSPACE Да Нет Нет IE 2.0
LOOP Да Нет Нет IE 2.0
SCROLLAMOUNT Да Нет Нет IE 2.0
SCROLLDELAY Да Нет Нет IE 2.0
TRUESPEED Да Нет Нет IE 4.0
VSPACE Да Нет Нет IE 2.0
WIDTH Да Нет Нет IE 2.0

<MENU> Да Да Да 2.0

<META> Да Да Да 2.0
CONTENT Да Да Да 2.0
HTTP-EQUIV Да Да Да 2.0
NAME Да Да Да 2.0

<MULTICOL> Нет Да Нет NS3.0

COLS Нет Да Нет NS3.0
GUTTER Нет Да Нет NS3.0
WIDTH Нет Да Нет NS3.0

<OBJECT> Да Нет Да 4.0

ACCESSKEY Да Нет Нет 4.0
ALIGN Да Нет Да 3.2
BORDER Да Нет Нет 4.0
CLASSID Да Нет Да 4.0
CODE Да Нет Нет 4.0
644 Приложение 1

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

CODEBASE Да Нет Да 4.0

DATA Да Нет Нет 4.0
DATAFLD Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
HEIGHT Да Нет Нет 4.0
HSPACE Да Нет Нет 4.0
NAME Да Нет Нет 4.0
TABINDEX Да Нет Нет 4.0
TYPE Да Нет Нет 4.0
VSPACE Да Нет Нет 4.0
WIDTH Да Нет Нет 4.0

<OL> Да Да Да 2.0
START Да Да Нет 3.2
TYPE Да Да Нет 3.2

<OPTION> Да Да Да 2.0
NAME Да Да Нет 3.2
SELECTED Да Да Да 2.0
TYPE Да Да Нет 3.2
VALUE Да Да Нет 2.0

<P> Да Да Да 2.0
ALIGN Да Да Нет 3.2

<PARAM> Да Да Да 3.2
DATAFLD Да Нет Нет IE 4.0
DATAFORMATAS Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
NAME Да Да Да 3.2
VALUE Да Да Да 3.2

<PLAINTEXT> Да Да Да 2.0
Поддержка тэгов и параметров HTML-браузерами 645

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

<PRE> Да Да Да 2.0
WIDTH Да Да Да 2.0

<Q> Да Нет Нет 4.0

CITE Да Нет Нет 4.0

<s> Да Да Да 2.0

<SAMP> Да Да Да 2.0

<SELECT> Да Да Да 2.0
ACCESSKEY Да Нет Нет 4.0
ALIGN Да Да Да 2.0
DATAFLD Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
DISABLED Да Нет Нет 4.0
MULTIPLE Да Да Да 2.0
NAME Да Да Да 2.0
SIZE Да Да Да 2.0
TABINDEX Да Нет Нет 4.0
TYPE Да Да Нет 4.0

<SMALL> Да Да Да 3.2

<SOUND> Нет Нет Да Mos 3.0

DELAY Нет Нет Да Mos 3.0
LOOP Нет Нет Да Mos 3.0
SRC Нет Нет Да Mos 3.0

<SPACER> Нет Да Нет NS3.0

ALIGN Нет Да Нет NS3.0
HEIGHT Нет Да Нет NS3.0
SIZE Нет Да Нет NS3.0
TYPE Нет Да Нет NS3.0
WIDTH Нет Да Нет NS3.0
646 Приложение 1

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

<SPAN> Да Да Нет 3.2

DATAFLD Да Нет Нет IE 4.0
DATAFORMATAS Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
DIR Да Нет Нет 3.2

<STRIKE> Да Да Да 2.0

<STRONG> Да Да Да 2.0

<STYLE> Да Да Нет 3.2

DISABLED Да Да Нет 4.0
MEDIA Да Да Нет 4.0
TYPE Да Да Нет 3.2

<SUB> Да Да Да 2.0

<SUP> Да Да Да 2.0

<TABLE> Да Да Да 3.2
ALIGN Да Да Да 3.2
BACKGROUND Да Да Нет IE 3.0
BGCOLOR Да Да Нет IE 3.0
BORDER Да Да Нет 3.2
BORDERCOLOR Да Да Нет IE 3.0
BORDERCOLORDARK Да Нет Нет IE 3.0
BORDERCOLORLIGHT Да Нет Нет IE 3.0
CELLPADDING Да Да Да 3.2
CELLSPACING Да Да Да 3.2
COLS Да Нет Нет 4.0
DATAFLD Да Нет Нет IE 4.0
DATAPAGESIZE Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
FRAME Да Нет Нет 3.2
Поддержка тэгов и параметров HTML-браузерами 647

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

HEIGHT Да Да Да 3.2
RULES Да Нет Нет 3.2
VALIGN Да Да Нет 4.0
WIDTH Да Да Да 3.2

<TBODY> Да Нет Нет 3.2

ALIGN Да Нет Нет 4.0
BGCOLOR Да Нет Нет IE 4.0
VALIGN Да Нет Нет 4.0

<TD> Да Да Да 3.2
ALIGN Да Да И. 3.2
BACKGROUND Да Да Нет IE 3.0
BGCOLOR Да Да Нет IE 3.0
BORDERCOLOR Да Да Нет IE 3.0
BORDERCOLORDARK Да Нет Нет IE 3.0
BORDERCOLORLIGHT Да Нет Нет IE 3.0
COLS PAN Да Да Да 3.2
HEIGHT Да Да Нет 3.2
NOWRAP Да Да Да 3.2
ROWSPAN Да Да Да 3.2
VALIGN Да Да Нет 3.2
WIDTH Да Да Нет 3.2

<TEXTAREA> Да Да Да 2.0
ACCESSKEY Да Нет Нет 4.0
ALIGN Да Да Да 2.0
COLS Да Да Да 2.0
DATAFLD Да Нет Нет IE 4.0
DATASRC Да Нет Нет IE 4.0
DISABLED Да Нет Нет IE 4.0
NAME Да Да Да 2.0
648 Приложение 1

(продолжение)

<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

READONLY Да Нет Нет 4.0

ROWS Да Да Да 2.0
TAB INDEX Да Нет Нет 4.0
WRAP Да Да Нет 3.2

<TFOOT> Да Нет Нет 3.2

ALIGN Да Нет Нет 4.0
BGCOLOR Да Нет Нет IE 4.0
VALIGN Да Нет Нет 4.0

<TH> Да Да Да 3.2
ALIGN Да Да Да 3.2
BACKGROUND Да Да Нет IE 3.0
BGCOLOR Да Да Нет IE 3.0
BORDERCOLOR Да Да Нет IE 3.0
BORDERCOLORDARK Да Нет Нет IE 3.0
BORDERCOLORLIGHT Да Нет Нет IE 3.0
COLS PAN Да Да Да 3.2
HEIGHT Да Да Да 3.2
NOWRAP Да Да Да 3.2
ROWS PAN Да Да Да 3.2
VALIGN Да Да Да 3.2
WIDTH Да Да Да 3.2

<THEAD> Да Нет Нет 3.2

ALIGN Да Нет Нет 4.0
BGCOLOR Да Нет Нет IE 4.0
VALIGN Да Нет Нет 4.0

<TR> Да Да Да 3.2
ALIGN Да Да Да 3.2
BACKGROUND Нет Да Нет NS3.0
BGCOLOR Да Да Да 3.2
Поддержка тэгов и параметров HTML-браузерами 649

(окончание)
<Тэг>/параметр Internet Explorer Netscape Mosaic Спецификация

BORDERCOLOR Да Да Нет IE 3.0

BORDERCOLORDARK Да Нет Нет IE 3.0
BORDERCOLORLIGHT Да Нет Нет IE 3.0
VALIGN Да Да Да 3.2

<тт> Да Да Да 2.0

<и> Да Да Да 2.0

<UL> • Да Да Да 2.0
TYPE Да Да Да 3.2

<VAR> Да Да Да 2.0

<ХМР> Да Да Да 2.0
 ПРИЛОЖЕНИЕ 2

Названия и коды цветов

для HTML
В нижеследующей таблице приведены в алфавитном порядке названия
140 стандартных цветов, которые можно использовать в HTML-документах
по их названию. Поддержка этих названий впервые была реализована в
Netscape Navigator 3.0. В дальнейшем их поддержка была включена и в брау-
зер Microsoft Internet Explorer 4.0. В таблице отмечены звездочками 16 стан-
дартных цветов, поддержка которых обеспечивалась и ранее.
В таблице даны также значения составляющих для каждого цвета (RGB)
в шестнадцатеричном и десятичном виде.

Названия и коды цветов для HTML

Шестнадцатеричное Десятичные значения

Название цвета
значение RGB R G В

1. aliceblue #FOF8FF 240 248 255

2. antiquewhite #FAEBD7 250 235 215
3. *aqua #OOFFFF 0 255 255
4. aquamarine #7FFFD4 127 255 212
5. azure #FOFFFF 240 255 255
6. beige #F5F5DC 245 245 220
7. bisque #FFE4C4 255 228 196
8. *black #000000 0 0 0
9. blanchedalmond #FFEBCD 255 235 205
10. *blue #OOOOFF 0 0 255
11. blueviolel #8A2BE2 138 43 226
12. brown #A52A2A 165 42 42
13. burlywood #DEB887 222 184 135
Названия и коды цветов для HTML 651

(продолжение)

Название цвета Шести адцатеричное Десятичные значения

значение RGB R G В

14. cadetblue #5F9EAO 95 158 160

15. chartreuse #7FFFOO 127 255 0
16. chocolate #02691 E 210 105 30
17. coral #FF7F50 255 127 80
18. cornflowerblue #6495ED 100 149 237
19. cornsilk #FFF8DC 255 248 220
20. crimson #DC143C 220 20 60
21. cyan #OOFFFF 0 255 255
22. darkblue #000088 0 0 139
23. darkcyan #008B8B 0 139 139
24. darkgoldenrod #B8860B 184 134 11
25. darkgray #A9A9A9 169 169 169
26. darkgreen #006400 0 100 0
27. darkkhaki #BDB76B 189 183 107
28. darkmagenta #8B008B 139 0 139
29. darkolivegreen #556B2F 85 107 47
30. darkorange #FF8COO 255 140 0
31. darkorchid #9932CC 153 50 204
32. darkred #860000 139 0 0
33. darksalmon #E9967A 233 150 122
34. darkseagreen #8FBC8F 143 188 143
35. darkslateblue #483D8B 72 61 139
36. darkslategray #2F4F4F 47 79 79
37. darkturquolse #OOCED1 0 206 209
38. darkviolet #940003 148 0 211
39. deeppink #FF1493 255 20 147
40. deepskyblue #OOBFFF 0 191 255
41. dimgray #696969 105 105 105
42. dodgerblue #1E90FF 30 144 255
652 Приложение 2

(продолжение)

Название цвета Шестнадцатеричное Десятичные значения

значение RGB R G В

43. firebrick #B22222 178 34 34

44. floralwhite #FFFAFO 255 250 240

45. forestgreen #228622 34 139 34

46. *fuchsia #FFOOFF 255 0 255

47. ghostwhite #F8F8FF 248 248 255
48. gainsboro #DCDCDC 220 220 220
49. gold #FFD700 255 215 0
50. goldenrod #DAA520 218 165 32
51. *gray #808080 128 128 128
52. *green #008000 0 128 0
53. greenyellow #ADFF2F 173 255 47
54. honeydew #FOFFFO 240 255 240
55. hotpink #FF69B4 255 105 180
56. indianred #CD5C5C 205 92 92
57. indigo #4B0082 75 0 130
58. ivory #FFFFFO 255 255 240
59. khaki #FOE68C 240 230 140
60. lavender #E6E6FA 230 230 250
61. lavenderblush #FFFOF5 255 240 245
62. lawngreen #7CFCOO 124 252 0
63. lemonchiffon #FFFACD 255 250 205
64. lightblue #ADD8E6 173 216 230
65. lightcoral #F08080 240 128 128
66. lightcyan #EOFFFF 224 255 255
67. lightgoldenrodyellow #FAFAD2 250 250 210
68. lightgreen #90EE90 144 238 144
69. lightgrey #D3D3D3 211 211 211
70. lightpink #FFB6C1 255 182 193
71. lightsalmon #FFA07A 255 160 122
Названия и коды цветов для HTML 653

(продолжение)

Название цвета Шестнадцатеричное Десятичные значения

значение RGB R G В

72. lightseagreen #20B2AA 32 178 170

73. lightskyblue #87CEFA 135 206 250
74. lightslategray #778899 119 136 153
75. lightsteelblue #BOC4DE 176 196 222
76. lightyellow #FFFFEO 255 255 224
77. *lime #OOFFOO 0 255 0
78. limegreen #32CD32 50 205 50
79. linen #FAFOE6 250 240 230
80. magenta #FFOOFF 255 0 255
81. *maroon #800000 128 0 0
82. mediumaquamarine #66CDAA 102 205 170
83. mediumblue #OOOOCD 0 0 205
84. mediumorchid #BA55D3 186 85 211
85. mediumpurple #9370DB 147 112 219
86. mediumseagreen #3CB371 60 179 113
87. mediumslateblue #7B68EE 123 104 238
88. mediumspringgreen #OOFA9A 0 250 154
89. mediumturquoise #4801 CC 72 209 204
90. mediumvioletred #071585 199 21 133
91. midnightblue #191970 25 25 112
92. mintcream #F5FFFA 245 255 250
93. mistyrose #FFE4E1 255 228 225
94. moccasin #FFE4B5 255 228 181
95. navajowhite #FFDEAD 255 222 173
96. *navy #000080 0 0 128
97. oldlace #FDF5E6 253 245 230
98. *olive #808000 128 128 0
99. olivedrab #6B8E23 107 142 35
100. orange #FFA500 255 165 0
654 Приложение 2

(продолжение)

Шестнадцатеричное Десятичные значения

Название цвета
значение RGB R G В

101. orangered #FF4500 255 69 0

102. orchid #DA70D6 218 112 214
103. palegoldenrod #EEE8AA 238 232 170
104. palegreen #98FB98 152 251 152
105. paleturquoise #AFEEEE 175 238 238
106. palevioletred #067093 219 112 147
107. papayawhip #FFEFD5 255 239 213
108. peachpuff #FFDAB9 255 218 185
109. peru #CD853F 205 133 63
110. pink #FFCOCB 255 192 203
111. plum #DDAODD 221 160 221
112. powderblue #BOEOE6 176 224 230
113. *purple #800080 128 0 128
114. *red #FFOOOO 255 0 0
115. rosybrown #BC8F8F 188 143 143
116. royalblue #4169E1 65 105 225
117. saddlebrown #864513 139 69 19
118. salmon #FA8072 250 128 114
119. sandybrown #F4A460 244 164 96
120. seagreen #2E8B57 46 139 87
121. seashell #FFF5EE 255 245 238
122. sienna #A0522D 160 82 45
123. *silver #COCOCO 192 192 192
124. skyblue #87CEEB 135 206 235
125. slateblue #6A5ACD 106 90 205
126. slategray #708090 112 128 144
127. snow #FFFAFA 255 250 250
128. springgreen #OOFF7F 0 255 127
129. steelblue #468264 70 130 180
Названия и коды цветов для HTML 655

(окончание)

Название цвета Шестнадцатеричное Десятичные значения

значение RGB R G В
130. tan #D2B48C 210 180 140
131. *teal #008080 0 128 128
132. thistle #D8BFD8 216 191 216
133. tomato #FF6347 255 99 71
134. turquoise #40EODO 64 224 208
135. violet #EE82EE 238 130 238
136. wheat #F5DEB3 245 222 179
137. *white #FFFFFF 255 255 255
138. whitesmoke #F5F5F5 245 245 245
139. *yellow #FFFFOO 255 255 0
140. yellowgreen #9ACD32 154 205 50

Примечания
1. Цвет aliceblue (первый в списке) отображается браузером Netscape версии
3.x не так, как приведено в таблице. В последующих версиях браузера
(4.0 и выше) эта ошибка была исправлена.
2. Заметим, что в перечне наименований имеются названия, которые опи-
сывают одинаковые по содержанию цвета, — aqua и cyan, а также fuchsia
и magenta.
3. Несмотря на то, что приведенные названия цветов предложены компани-
ей Netscape, при их отображении в режиме 256 цветов будет выполняться
их коррекция для приведения к палитре Netscape. Палитра Netscape
включает 16 стандартных цветов, а также 216 цветов, получаемых всевоз-
можными комбинациями чисел 0, 51, 102, 153, 204 и 255, используемых в
качестве значений для R, G и В. Отображение цвета в точном соответст-
вии с данной таблицей будет выполняться только для режимов с большей
глубиной цвета - HiColor и TrueColor.
4. При задании цвета по названию необходимо точно придерживаться его
написания. При сомнениях в написании названия по памяти можно све-
риться с приводимой таблицей. Смысл этого совета состоит в следую-
щем. Некоторые названия имеют довольно длинное трудно запоминаемое
написание. Есть отдельные странности в названиях. Так, слово "серый"
в английском языке имеет два написания - "gray" и "grey". Обратите
внимание, как записаны следующие названия: gray, darkgray, lightgrey.
 ПРИЛОЖЕНИЕ 3

Совместимость приводов CD-ROM

и программ для вычленения
звуковых файлов

Дейст-
Производитель Модель Тип Скорость Программа
вует?

Acer CD607E/O IDE/ATAPI Нет - -

Acer CD616A IDE/ATAPI Да 4Х WinDAC32

Acer CD620A IDE/ATAPI Да 4Х WinDAC32
Acer CD624A 003 IDE/ATAPI Да 8Х CDDA - DAC
Acer CD665A IDE/ATAPI Нет - -
Acer CD685A IDE/ATAPI Нет - -
Acer CD743E IDE/ATAPI Нет - -
Acer CD767E/S IDE/ATAPI Нет -
Acer CD-787E/SAS IDE/ATAPI Нет - -
Acer CD-910E/JAS IDE/ATAPI Нет - - .
Acer CD-912E/ATK IDE/ATAPI Нет - -
Acer (AOpen) CD-916E/ATK IDE/ATAPI Да 1Х CD Worx 95"CDDA
Acer (AOpen) CD-924E/AKO IDE/ATAPI Да 4Х AudioGrabber -
CDDA
Acer (AOpen) CD-924R/AKO IDE/ATAPI Нет - -
Aiwa ACD-620 SCSI Нет - -
Aztech AZT 66801 1 IDE/ATAPI Нет - -
Aztech AZT 868ISE IDE/ATAPI Да 2Х DAC - CD2WAV
BTC SLL24 IDE/ATAPI Да ЗХ WinDAC32
ChiHeTn CDS-545 - Да - WinDAC32
Compaq CR-503BCQ SCSI Да 1X CDDA-WinDAC32
Совместимость приводов CD-ROM и программ для вычленения звуковых файлов 657

(продолжение)

Дейст-
Производитель Модель Тип Скорость Программа
вует?

CyberDrive 120D IDE/ATAPI Да 1X CD-Grab

Audio/CD-Grab Pro
CyberDrive TW240D IDE/ATAPI Да зх WinDAC32
CreativeLabs CD 620 IDE/ATAPI Нет - -
CreativeLabs CD 820 IDE/ATAPI Да - CD Worx 95
CreativeLabs CD821E IDE/ATAPI Да 1X WinDAC32
CreativeLabs CDR511 SCSI Нет - -
CreativeLabs CDR 2423 IDE/ATAPI Да 2Х WinDAC32
CreativeLabs INFRA 1800 IDE/ATAPI Да 4Х DAC - WinDAC32
CreativeLabs INFRA 2400 IDE/ATAPI Да 4Х WinDAC32
CreativeLabs INFRA 3600 IDE/ATAPI Да 4Х WinDAC32
CreativeLabs PC-DVD Encore IDE/ATAPI Да 2Х Easy CD Creator
Delta ODC-6101 IDE/ATAPI Нет - -
Dysan CD-242E IDE/ATAPI Да юх AudioGrabber —
CD2WAV
Funai E295X IDE/ATAPI Да 16Х WinDAC32
Funai E2850UA IDE/ATAPI Да 6Х WinDAC32
Funai E2650UA IDE/ATAPI Нет - -
Funai E2920/2950 IDE/ATAPI Да - WinDAC32
Gateway 8X for the Solo IDE/ATAPI Нет _ —

21 00 (laptop)
Goldstar CRD-8160B IDE/ATAPI Да - DAC
Goldstar CRD-8240B IDE/ATAPI Да 8Х WinDAC32
Goldstar GCD-R540C IDE/ATAPI Да 1X CDDA-WinDAC32
Goldstar GCD-R560B IDE/ATAPI Да - CD Worx 95
Goldstar GCD-R580B IDE/ATAPI Да 1X WinDAC32
Hewlett Packard SURESTORE4020 SCSI Да 4Х WinDAC32
Hewlett Packard SURESTORE4020 IDE/ATAPI Да 2Х WinDAC32
Hewlett Packard 6020I SCSI Да 6Х Easy CD Pro 2,0
Hewlett Packard 71101 IDE/ATAPI Да 2Х Easy CD Pro 2.0
Hitachi CDR 7730 IDE/ATAPI Да 1X WinDAC32
Hitachi CDR 7830 IDE/ATAPI Да 2.5 X WinDAC32
658 Приложение 3

(продолжение)

Производитель Модель Тип Дейст- Скорость Программа

вует?

Hitachi CDR 7930 IDE/ATARI Да 4Х WinDAC32

Hitachi CDR8130 IDE/ATARI Да 8Х CDDA32
Hitachi CDR 8230 IDE/ATARI Нет - -
JVC 2022 SCSI Да - WinDAC32
LG Electronics CRD-8160B IDE/ATARI Нет - -
LG Electronics CRD-8241B IDE/ATARI Да 7Х WinDAC32
Liteon LTN242 IDE/ATARI Да 4Х WinDAC32
Liteon LTN244 IDE/ATARI Да 5Х CD Copy
Liteon LTN264 IDE/ATARI Да 4Х WinDAC32
Matshita CR52X IDE/ATARI Нет - -
Matshita CR504 SCSI Нет - -
Matshita CR508 SCSI Да 8Х CDRWIN
Matshita CR562 IDE/ATARI Да 2Х WinDAC32
Matshita CR 562-B IDE/ATARI Нет - -
Matshita CR 563-B - Да 1.5 X CDDA
Matshita CR574 IDE/ATARI Да - WinDAC32
Matshita CR581 IDE/ATARI Да 4Х WinDAC32
Matshita CR583 IDE/ATARI Да 1X DAC
Matshita CR584 IDE/ATARI Да 9Х WinDAC32 - CDDA
Matshita CR585 IDE/ATARI Да 8Х WinDAC32
Mitsumi CDR2600TE — Да 2Х WinDAC32 - CD
Copy
Mitsumi FX001D IDE/ATARI Нет - -
Mitsumi FX120TIB IDE/ATARI Да 12Х WinDAC32
Mitsumi FX140 IDE/ATARI Да - CD2WAV
Mitsumi FX140S !B - Да юх CDDA 1.6
Mitsumi FX162 IDE/ATARI Да 8Х WinDAC32
Mitsumi FX240S !B IDE/ATARI Да 8Х WinDAC32
Mitsumi FX400B IDE/ATARI Нет - -
Mitsumi FX400D IDE/ATARI Нет - -
Mitsumi FX410AIB IDE/ATARI Нет - -
Mitsumi FX600S IDE/ATARI Нет —
Совместимость приводов CD-ROM и программ для вычленения звуковых файлов 659

(продолжение)

Дейст- Скорость Программа

Производитель Модель Тип
вует?

Mitsumi FX800S !B IDE/ATARI Да 8Х WinDAC32

Mitsumi FX810S !B - Да 4Х WinDAC32
Mitsumi FX810T IDE/ATARI Да 2.6 X WinDAC32 - CDDA
Nakamichi MBR-7 SCSI Нет - -
Nakamichi MJ4.4 IDE/ATARI Нет - -
Nakamichi MJ5.16 SCSI Да 5Х WinDAC32
Nee 251 - Да 1X WinDAC32
Nee 252 - Нет - -
Nee 260 IDE/ATARI Да 1X WinDAC32
Nee 272 IDE/ATARI Да 2Х WinDAC32
Nee 273 IDE/ATARI Да 2Х WinDAC32
Nee 282 - Да 1.8Х WinDAC32
Nee 288 IDE/ATARI Да 8Х WinDAC32
Nee 462 SCSI Да 1X WinDAC32
Nee 463 SCSI Да 1X WinDAC32
Nee 4Xi SCSI Нет - -
Nee 502 SCSI Да 1X WinDAC32
Nee CDR-84-1 SCSI Нет - -
Nee CDR-1400B IDE/ATARI Да 2Х WinDAC32
Nee CDR-1600 IDE/ATARI Нет - -
Nee CDR-1610A SCSI Да 1X WinDAC32
Nee CDR-1800 IDE/ATARI Да 8Х WinDAC32 -
CD Worx 95
Nee CDR-1800A IDE/ATARI Да 6Х WinDAC32
Nee CDR-1900A IDE/ATARI Да 2Х WinDAC32
Nee Multi Spin 8V - Да 4Х DAC
Olympus CDR 2x6 SCSI Да 2Х Easy CD Creator
Panasonic CR-506-C SCSI Да 8Х CD Worx NT
Panasonic CR-508-B SCSI Да 8Х Spin Doctor
(Easy CD Creator),
CDRWIN
Panasonic CR-562-B IDE/ATARI Да
660 Приложение 3

(продолжение)
Дейст-
Производитель Модель Тип Скорость Программа
вует?

Panasonic CR-572 - Да 2Х WinDAC32

Panasonic CR-583 IDE/ATAPI Да 2Х WinDAC32 - CDDA
Panasonic CR-584 IDE/ATAPI Да 12Х CD Copy
Panasonic CR-585 IDE/ATAPI Да ЗХ WinDAC32
Panasonic CR-585-B IDE/ATAPI Да 4 Х-24 X WinDAC32
Panasonic KXL-783A SCSI Нет - -
Philips ODD 2000 SCSI Да 4Х WinDAC32
Philips CDD 2600 SCSI Да 6Х WinDAC32 -
CD Copy
Philips CDD3610 IDE/ATAPI Да 2Х WinDAC32 -
Easy CD Creator
Philips CM205 IDE/ATAPI Нет - -
Philips PCA123CD . IDE/ATAPI Да 1Х CDDA
Philips PCA162CD/M2 IDE/ATAPI Да ЗХ WinDAC32
Philips PCA202CD IDE/ATAPI Да ЗХ WinDAC32
Philips PCA243CD/M2 IDE/ATAPI Да 4Х CDDA
Philips ROD 1269 IDE/ATAPI Да 2Х CD Copy -
CD Worx NT
Pioneer DR-A01S IDE/ATAPI Да ЗХ WinDAC32-CDDA
Pioneer DR-A10X IDE/ATAPI Да ЭХ WinDAC32-CDDA
Pioneer DRA12X IDE/ATAPI Да 4Х DAC - WinDAC32
Pioneer DR A24X IDE/ATAPI Да ЗХ WinDAC32
Pioneer DR-U03X SCSI Да ЗХ WinDAC32-CDDA
Pioneer DR-U12X SCSI Да 12Х WinDAC32
Pioneer DR-U24X SCSI Да 2.5 X WinDAC32
Pioneer DVD-A01 IDE/ATAPI Да 7Х WinDAC32
Plextor PX-12TS SCSI Да 8Х WinDAC32 - CDDA
Plextor PX-20TS SCSI Да 10Х WinDAC32
Plextor PX-43CH - Да 4Х WinDAC32
Plextor UltraPlex 32 SCSI Да 16Х WinDAC32
Ricoh 1420c — Да 2Х Easy CD Creator
dlx 3.0
Ricoh MP6200A ICE/ATAPI Да 4Х WinDAC32
Совместимость приводов CD-ROM и программ для вычленения звуковых файлов 661

(продолжение)

Дейст-
Производитель Модель Тип Скорость Программа
вует?

Ricoh MP6200S SCSI Да 2Х -

Samsung SCR-830 IDE/ATAPI Да 1X DAC
Samsung SCR-1231 rev 1.01 IDE/ATAPI Да 1X CDDA
Samsung SCR-2030JS103 IDE/ATAPI Да 9Х WinDAC32
Samsung SCR-2430 - Да 10Х WinDAC32
Samsung SCR-2431 IDE/ATAPI Да 2Х WinDAC32 - CDDA
Sanyo CRD-254P IDE/ATAPI Нет - -
Sanyo CRD-256P - Нет - -
Sanyo CRD-820P IDE/ATAPI Нет - -
Smart and CD-R 1002 SCSI Да 2Х WinDAC32
friendly
Smart and SAF-2006 SCSI Да 6Х —
friendly
Sony CDU31A - Да - CDDA
Sony CDU31A Propietary Да 1X DAC
Sony CDU55S SCSI Да 2Х WinDAC32
Sony CDU76E-Q IDE/ATAPI Нет - -
Sony CDU77E-Q IDE/ATAPI Нет - -
Sony CDU311 IDE/ATAPI Да 8Х WinDAC32 -
ReadCDA
Sony CDU415 SCSI Да ЗХ WinDAC32
Sony CDU511 IDE/ATAPI Да 16Х WinDAC32
Sony CDU55E - Да 1X CD2WAV
Sony CDU611 - Да ЭХ WinDAC32
Sony CDU76S SCSI Да - WinDAC32
Sony CDU920S SCSI Да 2Х WinDAC32
Sony CDU926S — Да 6Х WinDAC32 -
Adaptec Software
Sony CDU928E IDE/ATAPI Да 6Х WinDAC32
Stingray 8422 IDE/ATAPI Нет - -
Teac CD-44E Laptop Да 1X WinDAC32
Teac CD-46E Laptop Да 5Х WinDAC32
Teac CD-55A IDE/ATAPI Нет - -
662 Приложение 3

(продолжение)

Дейст-
Производитель Модель Тип Скорость Программа
вует?

Теас CD-56E IDE/ATARI Да 6Х WinDAC32-CDDA

Теас CD-58E IDE/ATARI Да 0.01 X WinDAC32 -
Easy Creator 3.0
Теас CD-512E - Да 0.2 X WinDAC32
Теас CD-516S SCSI Да 4Х WinDAC32 - CDDA
Теас CD-524E IDE/ATARI Да 12Х WinDAC32
Теас CD-532E IDE/ATARI Да 10Х WinDAC32
Теас CD-R50S SCSI Да 4Х WinDAC32
Теас CD-R55S SCSI Да 8Х WinDAC32
Techmedia CDD-6100 — Да ЗХ Any DOS based
program
Techmedia CDD-7120 IDE/ATARI Да 16Х CD2WAV
Techmedia CDD-7200 IDE/ATARI Нет - -
Torisan CDR-N16 IDE/ATARI Bad Slow CD Worx 95
Torisan CDR-S1G IDE/ATARI Нет - -
Toshiba SD-M 1002 (DVD) IDE/ATARI Да 1X WinDAC32
Toshiba XM-3401TA SCSI Да 0.4 X WinDAC32
Toshiba XM-3701TA SCSI Да 0.5 X WinDAC32
Toshiba XM-5201B SCSI Нет 1Х WinDAC32
Toshiba XM-5302B IDE/ATARI Да 1Х CDDA - DAC
Toshiba XM-5402TA IDE/ATARI Да 1X WinDAC32 -
ReadCDA
Toshiba XM-5522B - Да - WinDAC32
Toshiba XM-5602B IDE/ATARI Да 1Х WinDAC32-CDDA
Toshiba XM-5701 SCSI Да 4Х WinDAC32
Toshiba XM-5702 IDE/ATARI Да - CDDA
Toshiba XM-6002B IDE/ATARI Да 1X WinDAC32
Toshiba XM-6102B IDE/ATARI Да 1X WinDAC32
Toshiba XM-6202B IDE/ATARI Да 4Х WinDAC32
Octek CDR-810 IDE/ATARI Нет - -
Vertos V400HTDB IDE/ATARI Нет - -
Wearnes CDD-220 _ Нет _ —
Совместимость приводов CD-ROM и программ для вычленения звуковых файлов 663

(окончание)

Тип Дейст- Скорость Программа

Производитель Модель
вует?

Wearnes CDD-620 IDE/ATARI Нет — —

Wearnes CDD-820 IDE/ATARI Да 2Х WinDAC32
Wearnes CDD-2420 IDE/ATARI Да 2Х WinDAC32
Yamaha 400T SCSI Да 7Х Disc-At-Once —
WinCD
Yamaha 401 Т SCSI Да 5Х -
Yamaha CDR100 SCSI Да 2Х WinDAC32 -
CD Worx 95
Yamaha CDR200T SCSI Да 2Х WinCD
Yamaha CRW400T SCSI Да 4Х WinDAC32
Yamaha CRW4001 IDE/ATARI Да 5Х WinDAC32
Предметный указатель

в
Bitrate 251 Апплеты 599, 603
безопасность 600
вставка рисунков 620
встраивание в HTML-документ 607
CGI 401 жизненный цикл 608
CGI-сценарий 402, 414 идентификатор this 618
методы класса Applet 603—606
обработка событий 615
D,F Архивы 621
формат JAR 622
Dither 100
Ассоциативный массив
Front-end 267
%ENV 428
©EXPORT 443
@EXPORT_OK 443
Атрибуты обработки событий 329, 359
Java Development Kit (JDK) 598
JavaScript
взаимодействие апплетов
с JavaScript 622 Безопасность компьютера 573
объект JavaArray 623 Безопасные элементы управления ActiveX
объект JavaClass 623 в сценарии 577
объект JavaObject 623 при инициализации 577
объект JavaPackage 623 цифровая подпись 574
J-код 597 Библиотека 442
Блок 438

LiveConnect 622 В
Skin 259 Виртуальная машина Java 598
Встраивание сценария 327
т, и Выражения JavaScript 335
арифметические 336
Thumbnail 88 логические 337
URL-кодирование 411 строковые 338
Предметный указатель 665

псевдоклассы связей 459

псевдоэлементы 458
Графический интерфейс пользователя 612 свойство filter 520
AWT (Abstract Windowing Toolkit) 612 свойство, значение 451
Swing 612 связывание 452
селектор 451, 455
д селектор-идентификатор 457
синтаксис JavaScript 543
Дескриптор файла 422 специфичность селектора 461
Дополнительная информация о пути 413 Классы 598
внутренние классы 618
Ключевые слова JavaScript
this 333, 362
Заголовок Ключевые слова VBScript
запроса 403 ByVal 385
ответа 417 Preserve 375
Загружаемые шрифты 553
свойство @fontdef 554 Л
Запрос клиента 403, 412
Литералы VBScript
булевы 372
И даты и времени 372
Интерфейс 602 строковые 372
Источники данных числовые 371
MSHTML 542 Лицензирование 579
[Link] 538 во время выполнения 579
TDC 537 во время разработки 579

К м
Карта-изображение 194 Массив 422
клиентский вариант 198 @_440
серверный вариант 198 Массивы VBScript
типы областей 203 динамические 374
формат CERN 202 статические 373
формат NCSA 203 Медиа-тип 404
Каскадные таблицы стилей 451 Менеджер компоновки
вес 460 BorderLayout 614
внедрение 453 CardLayout 615
группирование селекторов 454 FlowLayout 615
импорт 453 GridBagLayout 615
класс 456 GridLayout 615
контекстный селектор 458 Метод пересылки данных
наследование свойств 455 GET 403, 412
определение 451 POST 403, 413
правило 451 Методы апплета 598
приоритетность 460 destroyO 609
псевдоклассы 458 init() 608
666 Предметный указатель

Методы апплета (прод.) свойства CSS 493

paint() 609 свойства и методы объектов 494
repaint() 609 Объектная модель документа 488
startQ 609 отношения "родства" 506
stop() 609 реализация 490
updateQ 609 структура документа 489
метод main() 601 структурный изоморфизм 489
Методы объектов узел 503
getAttributeQ 495 Объектная модель сценария 543
removeAttribute() 495 конструктор Layer() 551
scrollIntoView() 496 метод load() 551
setAttribiite() 495 методы слоя 550
Методы переходов набор layers 548
apply() 531 объект layer 547
play() 531 свойства слоя 549
stop() 531 слой 547
Методы фильтра light Объекты 598
addAmbient'O 527 Объекты HTML
addCone() 528 Object 561
addPointQ 528 Объекты JavaScript
Модель форматирования 462 Array 339
абсолютные единицы 466 Data 341
блок содержимого 462 document 356
блоковый элемент 463 event 362
встроенный элемент 465 Form 357
граница 462 Frame 355
относительные единицы 466 history 357
отступ 462 location 357
поле 462 Math 342
Модуль 442 String 343
window 352
н иерархия 351
Объекты VBScript
Наборы объектной модели FileSystemObjects 391
all 491 TextStream 391
children 491, 507 Оператор
filters 522 foreach 425
style 493, 495 if ...elsif...else 436
метод tags() 494 Операторы JavaScript
свойство length 492 break 347, 348
continue 348
строковые 338
for 347
Обработка событий 615 for...in 349
Обработка событий элемента function 361
управления ActiveX 562 if 345
обработчик события в VBScript 562 switch 346
Объектная модель DHTML 490 var 335
объект document 491 while 348
Предметный указатель 667

Операторы JavaScript (npod.) CELLSPACING 121

with 350 CLASS 456
арифметические 336 CLASSID 559
логические 338 CLEAR 83, 126
поразрядных действий 339 CLSID 557
присваивания, = 335 CODEBASE 557, 560
присваивания, сокращенные формы COLS 143, 157
337 COLSPAN 130
сравнения 337 COLSPEC 137
условный 338 COMPACT 58
Операторы VBScript COORDS 206
Const 375 DATAFLD 535, 542
Dim 373 DATAFORMATAS 535
Do Until 380 DATAPAGESIZE 536
Do While 379 DATASRC 535
Exit Do 382 FRAME 141
Exit For 382 FRAMEBORDER 181
For Each...Next 381 FRAMESPAC1NG 184
For...Next 380 HEIGHT 83, 123, 129, 185, 560
If...Then 377 HREF 206
If...Then...Else 378 HSPACE 84, 185
ReDim 374 ID 457
Select Case 378 ISMAP 201
Set 391 LOWSRC 88
With 397 MARGINHEIGHT 161
арифметические 376 MARGIN WIDTH 161
конкатенации 377 NAME 160
логические 377 NOHREF 206
сравнения 376 NORESIZE 161
Ответ сервера 416 NOWRAP 129
Отображение списков 486 ROWS 157
Отражение страницы 324 ROWS PAN 130
RULES 141
SCROLLING 161
п SHAPE 205
SPAN 137
Пакет 438 SRC 78, 160
Пакеты 598 START 63
Параметр TARGET 161, 168, 207
ACCESSKEY 561 USEMAP 204
ALIGN 78, 116, 124, 128 VALIGN 116, 128
ALT 86, 207 VSPACE 84, 185
BACKGROUND 76, 140 WIDTH 83, 123, 129, 185, 560
BGCOLOR 76 Передача параметров
BORDER 85, 120, 181 по значению 440
BORDERCOLOR 139, 181 по ссылке 440
BORDERCOLORDARK 140 Переменная
BORDERCOLORLIGHT 139 PATHJNFO 413
CELLPADDING 122 QUERY_STRING 412
668 Предметный указатель

Переменные в языке Perl Winamp 252

ассоциативные массивы 424 WinDAC 266
массивы 422 XingMP3 Encoder 269
скалярные переменные 418 Программный объект 321
арифметические и логические взаимодействие 323
операции 419 инкапсуляция 322
операции сравнения 420 методы 321
Переменные среды CGI 427 свойства 321
Переход 519 Процедуры JavaScript 330
Платформа Java 598 Процедуры VBScript
Подключаемый программный модуль Function 384
Crescendo 234 Sub 383
Cthugha 258 передача параметров 385
EchoSpeech 233
LiveAudio 226
RealAudio 235
ToolVox 233 Регулярное выражение 430
TrueSpeech 233 Редактор FrontPage 565
Подпрограммы 438
Подтипы типа Variant 370
Empty 371
Error 371 Свойства визуализации
Null 371 clip 483
Позиционирование display 483
абсолютное 479 overflow 484
относительное 481 visibility 482
статическое 481, 482 z-index 485
Приложения 599 Свойства объекта event
Программа altKey 501
AudioActive 267 button 502
AudioCatalyst 269 cancelBubble 499, 501
AudioGrabber 266 clientX 501
BladeEnc 270 clientY 501
CD2WAV 266 Ctrl Key 501
CDCopy 266 fromEIement 502
CDDA 266 offsetX 501
CDex 266 offsetY 501
FrameGang 187 return Value 501
Frame-It 190 screenX 501
GIF Construction Set 100, 102 screenY 501
K-Jofol 275 shiftKey 501
Map THIS! 217 srcElement 500
MapEdit 212 to Element 502
Microsoft ActiveMovie 231 x501
MP3 Compressor 267 у 501
MP3 Producer 267 Свойства объекта Node
RealPlayer 238 Child 589
VideoCraft GIF Animator 100 Children 589
Предметный указатель 669

Свойства объекта Node (npod.) Событие 324, 497

FirstSibling 589 объект event 497, 500
ImageList 592 процедура обработки события 324
LastSibling 589 цикл жизни 497
Next 589 События элементов 499
Parent 589 Список
Previous 589 вложенный 68
Root 589 маркированный 56
Свойства объектов нумерованный 61
innerHTML 496 определений 65
innerText 496 Стандартные функции VBScript
outerHTML 496 CreateObject 391
outerText 496 InputBox 387
sourcelndex 495 MsgBox 388
style 495 времени и даты 386
tagName 492 математические 386
Свойства позиционирования строковые 387
height 481 Строка запроса 412
left 480
position 479
top 480
width 481
Свойства фильтров Таблица 114
add 524 Текстовые свойства
color 523 letter-spacing 474
direction 524 line-height 476
enabled 523 text-align 475
strength 523 text-decoration 475
Свойства форматирования text-indent 475
граница 477 text-transform 475
отступ 477 vertical-align 475
поле 476 Технология COM 556
Свойства шрифтов Типы данных JavaScript
©font-face 471 строковый 334
font 471 булевый 334
font-family 468 вещественный 334
font-size 470 целый 334
font-style 469 Типы данных VBScript
font-variant 469 Variant 370
font-weight 470 Тэг
Свойства элемента управления TabStrip <!- 46
MultiRow 582 <!DOCTYPE> 19
Style 582 <AHREF> 51
Связывание данных 533 <ANAME> 51
архитектура привязки 533 <A> 87
объект-источник 533 <ABBR> 27
объект-потребитель 533 <ACRONYM> 27
программа-посредник 533 <ADDRESS> 48
табличный повторитель 533 <APPLET> 607
670 Предметный указатель

Тэг (проб.) <LISTING> 45

<AREA> 205 <MAP> 205
<В>31 <MARQUEE> 55
<BASE>21, 168 <MENU> 67
<BASEFONT> 37 <META> 22
<BDO> 55 <MULTICOL> 55
<BIG> 32 <NEXTID> 55
<BLINK> 33 <NOBR> 42
<BLOCKQUOTE> 47 <NOFRAMES> 162
<BODY> 24 <OBJECT> 557, 559, 607
<BR> 40, 83 <OL> 61
<CAPTION> 116, 118 <P>39
<CENTER> 46, 124 <PARAM> 557, 561
<CITE> 27 <PLAINTEXT> 45
<CODE> 28 <PRE>44, 114
<COL> 137 <Q>29
<COLGROUP> 137 <S>32
<DD> 65 <SAMP> 29
<DEL> 28 <SELECT> 407
<DFN> 28 <SMALL> 32
<DIR> 67 <SOUND> 55
<DIV> 45 <SPACER> 55
<DL> 65 <SPAN> 33
<DT> 65 <STRIKE> 32
<EM> 29 <SUB> 33
<EMBED> 227 <SUP> 33
<FIELDSET> 55 <TABLE> 116
<FONT> 34 <TBODY> 140
<FORM> 403 <TD> 116
<FRAME> 157, 159 <TEXTAREA> 408
<FRAMESET> 157 <TFOOT> 140
<HEAD> 19 <TH> 116
<HR> 43
<THEAD> 140
<HTML> 18
<TITLE> 19
<Hx> 42 <TR> 116
<I> 32
<TT>32
<IFRAME> 185 <U>32
<ILAYER> 55
<UL> 57
<IMG> 201
<VAR> 30
<INPUT> 405
<WBR> 42
<INS> 29
<XMP> 45
<ISINDEX> 55
->46
<KBD> 29
<KEYGEN> 55
<LAYER> 55 Ф
<LEGEND> 55
<LH> 58 Фильтр
<LI> 57, 61 динамический 519
<L1NK> 21 статический 519
Предметный указатель 671

Фильтры и переходы 519 push 424

alpha 527 require 442
blendTrans 530 return 439
dropShadow 526 reverse 424
light 527 shift 423
revealTrans 531 sort 424
wave 525 splice 423
свойство filter 520 split 433
Формат unshift 423
AAC277 use 443
AIFF 226 values 425
AU 226
GIF 90, 197
GIF87a 91
GIF89a 91 Цветовые свойства
JPG 96, 197 background 474
LQT 279 background-attachment 472
MIDI 226 background-color 472
MP3 250 background-image 472
MP4 281 background-position 473
MPEG 249 background-repeat 472
РАС 280 color 472
PCM 233
PCX 74
PNG 213 Э
RA239
RAM 240 Элемент управления ImageList 588
RPM 240 Элемент управления TabStrip 582
VQF 274 добавление вкладок 585
WAV 226 набор Tabs 584
WMA 282 область клиента 582
Формы 402 объект Tab 584
Фрейм 148 Элемент управления TreeView 588
Функция набор Nodes 589
close 448 объект Node 589
hex 433 узел 588
import 443 узлы-братья 589
join 424 Элементы управления ActiveX 555
keys 425 приложение-контейнер 556
local 439 уникальные идентификационные
my 439 номера 557
open 448
pack 433 Я
pop 423
print 416 Язык Perl 415
 ВЕСЬ МИР
компьютерных книг
Более 1900 наименований книг
в интернет-магазине
[Link]
ComputeiBQOK ru - Miciosolt InlMnel Г «uloiei
;£айл Правка £на (Дэрранное Сервис £правка

SvK '••* ' " •&' "-'J": ..... ;.£~Т'1эГ -^

Назад , : ", . Остднов(-*гь Обновить Домой Поиск Избранное
^
Медиа
^......i£ ..... -
Журнал- ' Почта Печзгь
^ Адрес; j^ij [Link] ^j ^Переход Ссылки

поиск | [найти |расширенный поиск—» :• •:

> KesK купить книгу ® Главная страница НОШ ЯШ f

> Прайс-лист
Специализированный интернет-магазин Протоколы TCP/IP
> Новинки Практическое
компьютерной литературы
> Готовятся к печати _ руководство
' Расширенный поиск
На данный момент магазин предлагает;
>• TOP 2O
*• Электронные книги
• количество книг'1965
*• Обзоры • количество электронных книг 11
> Главная страница • количество новинок: 69

I* В нашем магазине (Бобруйокэл ул., дом 4) до 31

декабря 2003 года любой пог-упатйга. может*

• купит» книгу издательства «БХЕ- Петер бур г»

со скидкой 10%
• прьтчть -у-частие Е лотерее и посетить
распродаж/компьютерной литерлтуцлы

• С марта месяца Б вузах Санкт-Петербурга

проводится передаи:*Э1ая выставка -чВесь мир
компьютерных книг» В ней принимают участие 11 вузов

Интернет
 А. Матросов, А. Сергеев,
М. Чаунин

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

• Разработка динамических документов

• Средства интерактивного общения

с пользователем

• Применение таблиц стилей

• CGI-сценарии

• Программирование на языках
JavaScript и VBScript
• Встроенные элементы управления
и Java-апплеты

Вы также найдете дополнительные

сведения по поддержке инструментов
HTML-браузерами Netscape Communicator
и Microsoft Internet Explorer, справочную
информацию по применению тэгов HTML.

£
интернет-провайдер двух столпи ^-

П C I T Y L I NE г
I N T E R N E T T E C H N O L O G I E S **
*S*

ISBN 5-8206-0072-Х