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

M. Чаунин
www.bhv.ru
www.bhv.kiev.ua

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.
Гигиеническое заключение на продукцию, товар № 77.99.02.953.Д.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 — Матросовым А. В. и Чауниным М. П.
Замечание и пожелания по книге просим направлять авторам по электрон-
ной почте [email protected].
 .

ГЛАВА 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 по адресу http://www.w3.org/TR/. Специфика-
ция 4.0 находится по адресу http://www.w3.org/TR/REC-html40-971218.
Заметим, что по логике вещей официальная спецификация должна играть
роль руководящей и направляющей силы, обеспечивая одинаковую форму
представления информации различными браузерами. Это идеальный вари-
ант, к которому следует стремиться. На деле все обстоит не так хорошо. По-
стоянно появляются новые идеи, реализуемые компаниями-разработчиками
в своих браузерах и пропагандируемые ими. Удачные идеи приживаются,
а затем подхватываются другими разработчиками. Часть возможностей так и
остается специфическими особенностями отдельного браузера. Удачные
разработки в итоге попадают в спецификацию и становятся общеприняты-
ми. Таким образом, процесс усовершенствования возможностей браузеров и
уточнения спецификации идет непрерывно, оказывая взаимное влияние
друг на друга.

Структура документа
Первым тэгом, с которого следует начинать описание документов 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/news.gif 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 ="../toc.html">
<LINK HREF="mailto:[email protected]" REV="made">

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

(toc.html — 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/homepage.html">
Глава 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>,
выдается подсказка.

y.mi 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«MMW.Ua ' 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="example.html">3TOT текст является указателем сскшки</А>
В качестве ссылки можно использовать графическое изображение. По
принципу действия графические ссылки ничем не отличаются от текстовых.
Они не подчеркиваются и не выделяются цветом, а для их выделения брау-
зеры обычно вокруг такого изображения рисуют рамку. Пример графиче-
ского указателя ссылки:
<А HREF="example.html"><IMG SRC="picture.gif "
Более подробно о графических указателях рассказывается в главе 3. Специ-
альные возможности создания изображений, фрагменты которого указывают
на различные документы, подробно описываются в главе 6.
Второй частью ссылки является URL-адрес. Это не что иное, как адрес
Web-страницы, которая будет загружена при щелчке мышью на указателе.
Указание адреса может быть относительным или абсолютным.
Если в URL-адресе не указывается полный путь к файлу, то такая ссылка
называется относительной. В этом случае определение местоположения
файлов выполняется с учетом местоположения документа, в котором имеет-
ся такая ссылка. Например, если браузер загрузил страницу, находящуюся
по адресу http://www.mysite.com/page, то относительный указатель /picture
подразумевает адрес http://www.mysite.com/page/picture, т. е. подкаталог,
расположенный на той же машине.
Примечание
Относительный указатель работает по-другому, если в HTML-документе ис-
пользуется тэг <BASE>. Ниже в данной главе показывается, что в этом случае
указатель дает адрес относительно URL-адреса, определенного в тэге <BASE>.

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

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

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

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

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

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

чения работы с относительными указателями ссылок введен тэг <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-адреса следует указать адрес электронной
почты, предварив его словом mailto:.
<А HREF="mailto:[email protected] mo.ги">Присылайте ваши отзывы
и предложения</А>.

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

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

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

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

I
. «it-
•в

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

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

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

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

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

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

Web-страница http: //sitename http: //www.mysite.com/

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

Newsgroup news : newsgroupname news : news . newusers . questions

FTP ftp: //sitename ftp: / / ftp . mys ite.com/

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=texture.gif 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=picture.gif>

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

Выравнивание изображений
При включении графического изображения в документ можно указывать его
расположение относительно текста или других элементов страницы. Способ
выравнивания изображения задается значением параметра 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=eagle.gif ALIGN=top>no верхнему краю

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

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

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

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

ние прижато к правому краю окна просмотра браузера, а последующий
текст располагается с левой стороны от изображения. Количество строк,
располагаемое рядом с изображением, может изменяться в зависимости от
размеров шрифта текста, а также размеров окна просмотра. Текст, не помес-
тившийся рядом с изображением, автоматически продолжается ниже. Этот
пример построен на следующем исходном коде:
<HTML>
<Т1ТЬЕ>Выравнивание изображений</Т1ТЬЕ>
<BODY>
<IMG SRC=spb.gif 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=monkey.gif>
<IMG SRC=mouse.gif ALIGN=top width=160>
Выравнивание ALIGN=TOP

<IMG SRC=monkey.gif>
<IMG SRC=mouse.gif 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=spb.gif WIDTH=300>
<IMG SRC=spb.gif>
<IMG SRC=spb.gif WIDTH=75>
</BODY>
</HTML>

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

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

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

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

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

тия. В приведенном ниже HTML-коде, отображение которого показано на
рис. 3.8, со всех четырех сторон изображения задан отступ, равный 20 пик-
селам. Сравните этот рисунок с рис. 3.5, где отступы от изображения не за-
давались.
<HTML>
<Т1ТЬЕ>Использование параметров HSPACE и VSPACE</TITLE>
<BODY>
<IMG SRC=spb.gif 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=map.gif>
<IMG SRC=map.gif BORDER=1>
<IMG SRC=map.gif BORDER=5>
<IMG SRC=map.gif BORDER=10>
</BODY>
</HTML>

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

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

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

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

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

Stop FWiKh Home

1

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

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

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

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

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

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

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

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

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

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

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

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

с такими изображениями занимают значительно меньше места по сравне-
нию с полноразмерными и поэтому гораздо быстрее грузятся. С помощью
миниатюрных версий можно быстро просмотреть набор изображений, дос-
тупных для загрузки, и выбрать понравившееся.
В Интернете можно найти целый ряд специализированных сайтов, содержа-
щих разного рода изображения и обеспечивающих предпросмотр (preview)
с помощью миниатюрных копий. Большое число сайтов не предназначено
для детских глаз, но есть и ряд интересных серверов, предлагающих изо-
бражения различной тематики. Можно отметить сайт http://www.snap-
shot.com, одна из страниц которого приведена на рис. 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. Типовое применение миниатюрных версий изображений

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

ется сайт, расположенный по адресу http://euclid.nmu.edu/, одна из страниц
которого была показана на рисунке в предыдущей главе (см. рис. 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), порядок рабо-
ты с которым будет описан ниже. Информацию о пакете можно получить
по адресу:
http://www.mindworkshop.com/alchemy/gifcon.html
Среди других пакетов можно назвать VideoCraft GIF Animator, доступный по
адресу:
http://www.andatech.com/vidcraft/demo.html
102 Часть I. Основы HTML

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

ниями в GIF-файле и типичные средства для обработки отдельных изобра-
жений (настройка яркости, контрастности, повороты изображения, измене-
ние размеров и т. п.). Имеются возможности работы с файлами AVI, выпол-
нения морфинга (Morph), стилизации изображений.
Обзор вопросов построения GIF-файлов можно найти по адресу:
http://members.aol.com/royalef/gifanim/htm

Программа 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\tablesUB4.HTM

||Ячейка 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="LIST.htm">
<FRAME scrolling=auto SRC="empty.htm" name="pages">
</FRAMESET>
<FRAME SRC = "toolbar.html" scrolling=noresize>
</FRAMESET>

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

структур, когда один фрейм служит оглавлением документов, а другой ис-
пользуется для загрузки их содержимого. Решение такой задачи без приме-
нения фреймов обычно выполняется следующим образом. На одной из
страниц располагают оглавление, состоящее из ссылок на другие документы
или их отдельные фрагменты. При переходе по такой ссылке оглавление
исчезает, а на его место загружается нужный документ, после прочтения
которого обычно необходимо вновь вернуться к оглавлению. При использо-
вании фреймов такой возврат становится ненужным, так как оглавление по-
стоянно располагается на части экрана.
На рис. 5.2 показан фрагмент начальной страницы электронного издания
популярного в Санкт-Петербурге адресно-телефонного справочника "Весь
Петербург".
Электронная версия справочника доступна по адресу http://www.allpetersburg.ru
и позволяет находить нужные сведения по запросам пользователя. Данная
страница документа также имеет фреймовую структуру и состоит из двух
фреймов, причем первый из них имеет ширину 100 пикселов, а второй за-
нимает всю оставшуюся ширину окна просмотра. Фрейм, расположенный
Глава 5. Фреймы 151

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

ствующего на экране, а также содержит логотип компании "Nevalink". Вто-
рой фрейм содержит документ, который в данном случае представляет со-
бой форму для запроса пользователя. Структура этой страницы определена
следующим HTML-кодом:
<FRAMESET COLS="100,*" frameborder="0" framespacing="0" border="0">
<FRAME NAME="Menu window" SRC="menu.htm" noresize>
<FRAME NAME=content SRC="sql.idc" 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

Адрес сервера http://www.tucows.com. Заметим, что имя сервера определила

аббревиатура, полученная от сокращения полного названия сборника — 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:

* http://www.allpetersburg.ru/
о Frame: http://www.allpetersburg.ru/menu.htm
Background Image:
http://www.allpetersburg.ru/IMAGES/textures/veHowl.JPG
• Image: http://www.allpetersburg.nl/images/info.ipg
• Image: http://www.allpetersburg.ru/IMAGES/help2.JPG
• Image: http://www.allpetersburg.ru/IMAGES/cool.JPG
• Image: http://www.allpetersburg.ru/IMAGES/list.JPG
• Image: http://www.allpetersburg.ru/IMAGES/toplO.JPG
• Image: http://www.allpetersburg.ru/IMAGES/NEVA/nevasms.gif
• Frame: http://www.allpetersburg.ru/sql.idc
Form 1:
• Action URL:

Location: http ://www. allpetersburg.ru/

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="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="list.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</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="sample.htm">.

Обратите внимание, что любой HTML-файл, заданный в описании фрейма,

должен быть полным HTML-документом, а не фрагментом. Это означает,
что документ должен иметь тэги HTML, HEAD, BODY и т. д.
Конечно, в качестве значения SRC может быть задан любой допустимый
URL-адрес. Если, например, фрейм используется для отображения изобра-
жения в формате GIF, которое располагается на сервере издательства дан-
ной книги, то следует записать:
<FRAME SRC="http: //www.bhv. ru/example.gif ">.

Совет
He задавайте в документе, описывающем структуру фреймов, никакого содер-
жания.
Обычный текст, заголовки, графические изображения и другие элементы не мо-
гут прямо использоваться в документе, который описывает структуру фреймов.
Все содержание фреймов должно быть определено в отдельных HTML-фай-
лах, имена которых задаются параметром SRC тэга <FRAME>.

Параметр NAME определяет имя фрейма, которое может использоваться для

ссылки к данному фрейму. Обычно ссылка задается из другого фрейма, рас-
полагающегося на той же самой странице. Например:
<FRAME SRC="sample.htm" NAME= " Fr ame_l " > .
Глава 5. Фреймы 161

Такая запись создает фрейм с именем "Frame_l", на который может быть

выполнена ссылка. Например:
<А HREF="other.htm" ТАК6ЕТ="Ргате_1">Щелкните здесь для загрузки
документа other.htm во фрейм с именем 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 задать имя какого-либо файла. На-
пример, такой файл можно назвать empty.htm (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. Предупреждающее сообщение

при попытке загрузки несуществующего
файла

Совет
Создайте файл с именем empty.htm, размер которого равен одному байту,
содержащий символ пробела. Примите за правило при записи тэга <FRAME>
всегда указывать SRC=empty.htm, если сразу невозможно указать имя конкрет-
ного файла.

Примеры фреймов
В этом разделе представлены некоторые типичные примеры определений
фреймов.
Возвратимся к примеру, который приведен в начале данного раздела
(рис. 5.7). Этот пример использует вложенную структуру <FRAMESET>. Внеш-
ний тэг <FRAMESET> создает три строки высотой, соответственно, в 25, 50 и
25 процентов от общей высоты окна просмотра:
<FRAMESET ROWS="25%,50%,25%">.
Внутри этой области определения первая и последняя строки представляют
собой простые фреймы:
<FRAME SRC="header.htm">
<FRAME SRC="footer.htm">

Каждая из этих строк заполняет всю ширину экрана. Первая строка в верх-
ней части экрана занимает 25 процентов высоты, и третья строка в нижней
части также занимает 25 процентов высоты.
Между ними, однако, располагается вложенный тэг <FRAMESET>:
<FRAMESET COLS="25%,75%">
<FRAME SRC="list.htm">
<FRAME SRC="info.htm">
</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="header.htm">
<FRAME SRC="frameset.htm">
<FRANE SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Ваш браузер не может отображать фреймы
</NOFRAMES>
</HTML>

Второй файл с именем frameset.htm содержит следующий код:

<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="list.htm">
<FRAME SRC="info.htm">
166 Часть I. Основы HTML

</FRAMESET>
</HTML>

В этом случае верхняя и нижняя строки ведут себя по-прежнему. Но вторая

строка теперь является простым фреймом, как и другие. Однако файл
frameset.htm, на который указывает параметр SRC, определяет собственную
структуру фреймов. В результате на экране будет отображено в точности то
же самое, что и в первоначальном примере.

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

Совет
Используя вложенные структуры <FRAMESET> в различных комбинациях, воз-
можно создать практически любую сетку фреймов, которую можно себе пред-
ставить. Однако помните, что следует создавать удобный для пользователя
интерфейс, а не просто демонстрировать свое умение работать с фреймами.

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

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="*,2*" COLS="20%,30%,40%">
<FRAME SRC="documl.htm">
<FRAME SRC="docum2.htm">
<FRAME SRC="docum3.htm">
<FRAME SRC="docum4.htm">
<FRAME SRC="docum5.htm">
<FRAME SRC="docum6.htm">
</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> файла с именем LIST.htm це-
лесообразно записать следующую строчку: <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