Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Учебник

4-е издание стереотипное
электронное

Интернет-Университет
Информационных Технологий
www.intuit.ru

Ай Пи Ар Медиа

Москва

2025

УДК 004
ББК 32.97

Адамс, Д.Р.
Основы работы с XHTML и CSS : учебник / Д.Р. Адамс, К.С. Флойд. — 4-е изд., стер.
электрон. — Москва : Национальный Открытый Университет «ИНТУИТ» : Ай Пи Ар Медиа,
2025. — 567 с. — Текст : электронный.

ISBN 978-5-4497-0907-3
Учебник предназначен для студентов начального уровня, изучающих разработку
приложений Web. Представленные элементы языка соответствуют стандартам XHTML
(eXtensible HyperText Markup Language — Расширяемый язык разметки гипертекста),
опубликованным консорциумом WWW и реализованным в программном обеспечении
современных браузеров Web.
Подробное рассмотрение XHTML и каскадных таблиц стилей (CSS) знакомит с элементами языка, которые необходимы для создания большинства типов страниц Web с различными широко используемыми свойствами. Материал охватывает XHTML 1.1 — реализацию
языка, являющуюся подмножеством XML (eXtensible Markup Language — Расширяемый язык
разметки). Многие элементы предыдущих версий HTML и XHTML были удалены или
заменены новыми методами создания разметки для структурирования и задания стиля
страниц Web. Однако многие элементы языка, которые не поддерживаются в версии 1.1,
представлены в этом учебнике для совместимости с традиционными методами. Они могут
встречаться на существующих страницах, пока не будут вытеснены новыми методами вновь
создаваемых страниц.

Учебное электронное издание

Технический редактор Г.И. Иванова
Обложка С.С. Сизиумова, Я.А. Кирсанов

© ООО «ИНТУИТ.РУ», 2007–2016
© Адамс Д.Р., Флойд К.С., 2007–2016
© Оформление электронного издания.
ООО Компания «Ай Пи Ар Медиа», 2021

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Содержание
1. Создание WEB-страниц
2. Базовая компоновка документа
3. Основы оформления документов
4. Форматирование текста
5. Графические изображения
6. Использование специальных стилей
7. Соединение страниц
8. Использование таблиц
9. Воспроизведение мультимедиа
10. Использование фреймов
11. Создание форм
12. Проектирование сайтов Web

3

4
52
102
154
192
237
281
317
404
440
468
521

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Создание WEB-страниц
В данной лекции описаны основы XHTML 1.1, являющегося теперь
подмножеством XML (eXtensible Markup Language - Расширяемый язык
разметки)

Учебник по XHTML/CSS
История Интернет и его использования
Всемирная паутина (WWW) широко проникла в современную жизнь.
Просмотр страниц Web и использование e-mail стали повседневной
деятельностью большинства людей, и кажется, что эти технологии
существовали всегда. Конечно, базовая технология Интернет существует
уже не менее 40 лет, но паутина Web появилась совсем недавно, ее
основное развитие происходило только в последнее десятилетие.
Подобно большинству технологий Web возникла на основе
предшествующих разработок, никак не предвещавших конечную форму,
которую они могут принять. Технология начиналась с нарождающимся
чувством некоторой цели, которая затем навсегда отклонилась в
области, никак не предполагавшейся в начале. Историческое развитие
этих базовых технологий представляет собой интересный холст, на
котором рисуется портрет все еще юной и незрелой Web.
ARPANET - Начало Интернет

Рис. 1.1. Спутник I.
Агентство ARPA (Advanced Research Projects Agency - Агентство
4

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

перспективных исследовательских проектов) было создано в 1957 г. в
ответ на успешный запуск Советским Союзом первого искусственного
спутника Земли. Финансируемое Министерством обороны Агентство
объединило человеческие ресурсы, которые понадобились для первого
американского искусственного спутника - успешный запуск его
состоялся 18 месяцев спустя. Однако в 1962 г. задачи ARPA были
расширены, чтобы охватить использование компьютеров в военных
технологиях, значительная часть которых имела отношение к
коммуникации компьютеров и работе сетей.
Постоянной проблемой при проведении исследований и разработок
является объединение интеллектуальных ресурсов, необходимых для
работы над проблемами или для использования имеющихся
возможностей.
Достаточно
часто
специалисты
разбросаны
географически, что затрудняет обеспечение взаимодействия между
участниками или непрерывность развития проектов. Поэтому
электронные коммуникации считались важной областью исследований
при поддержке рабочих усилий ARPA.

Рис. 1.2. Начальная схема сети ARPANET
5

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Холодная война породила, кроме того, тревогу по поводу воздействия,
которое ядерные взрывы могли бы оказать на целостность
компьютерных сетей, обеспечивающих военное командование и
управление. Было неприятно думать, что даже незначительный
перерыв в работе мог бы нарушить военное управление, не говоря уже
о разрушениях самой ядерной войны. Поэтому необходимость
обеспечения кооперации исследований ученых и инженеров вместе с
озабоченностью
уязвимостью
сети
привели
к
концепции
распределенной коммутации пакетов как предпочтительной модели
компьютерных коммуникаций.
В этой модели сетевые передачи разбиваются на маленькие пакеты,
которые могут перемещаться к месту своего назначения в сети
различными путями через различные узлы, через различные
компьютеры. Компьютеры передают пакеты данных друг другу
различными путями, а компьютер-получатель в месте назначения
собирает все пакеты и вновь формирует из них исходное сообщение.
При передаче различных частей сообщения различными путями
безопасность коммуникации повышается. Также, поскольку пакет может
перемещаться различными путями к месту своего назначения, при
отказе одного маршрута можно использовать другой. Поэтому
распределенная сеть взаимосвязанных компьютеров более защищена и
может лучше противостоять разрушениям большого масштаба, чем
централизованная сеть, соединенная с одним или несколькими
компьютерами-хостами.
В 1969 г. Министерство обороны одобрило проект ARPANET для
исследований в области сетей. Первый узел был создан в Университете
Калифорнии в Лос-Анджелесе (UCLA), а вскоре были созданы узлы в
Станфордском исследовательском институте, в Университете
Калифорнии в Санта-Барбаре и в Университете штата Юта. К 1972 г.
большая часть работы по разработке оборудования, программного
обеспечения и коммуникационных протоколов была перенесена в
университеты и исследовательские лаборатории. В 1973 г. сеть
ARPANET объединяла 40 машин и имела международные соединения с
Великобританией и Норвегией.

6

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рис. 1.3. Профессор Леонард Клейнрок
Профессор Леонард Клейнрок, известный как один из изобретателей
технологии Интернет, создал базовые принципы пакетной коммутации,
будучи аспирантом Массачусетского института технологии (MIT). Это
было за десять лет до рождения Интернет, которое произошло, когда
хост-компьютер Клейнрока в UCLA стал первым узлом Интернет в
сентябре 1969 г. Он написал по этой теме первую статью и опубликовал
первую книгу; он также управлял передачей первого сообщения,
прошедшего через Интернет.
Одной из проблем компьютерных коммуникаций является
достоверность сообщений, посылаемых из одного компьютера в другой.
Вполне возможно, что компьютеры разных марок и моделей
используют и различные методы для отправки и получения пакетов
электронной информации. Существует также проблема потерянных
пакетов, когда информация не достигает компьютера места назначения в
связи с проблемами передачи. Эти вопросы привели к разработке TCP
(Transmission Control Protocol - Протокол управления передачей) для
обеспечения
надежных
соединений
между
различными
правительственными, военными и образовательными сетями.
Параллельная разработка IP (Internet Protocol - протокол Интернет)
решала проблемы сборки пакетов данных и обеспечивала перемещение
пакетов в требуемое место назначения.
К 1982 было решено, что сеть ARPANET должна строиться на основе
набора протоколов TCP/IP. В этом случае обеспечивалась прямая
коммуникация между компьютерами различных сетей с помощью
проводных линий связи, радио и спутников. В это время "интернет"
стал обозначать соединенное множество сетей, в частности сетей,
соединенных с помощью TCP/IP. В тот же год были созданы
7

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

спецификации EGP (External Gateway Protocol - протокол внешнего
шлюза), с помощью которого между собой общались различные сети. В
1984 г. в сети ARPANET было более 1000 компьютеров, и были введены
серверы имен доменов (DNS), которые позволяли использовать имена
хостов (например, "ссылка: www.cox.net - http://www.cox.net"), кроме
числовых IP-адресов (68.1.17.9), для идентификации и соединения
компьютеров в сетях.
NSFNET - Развитие Интернет
Развитие того, что стало теперь Интернетом, берет старт в 1986 г., когда
началось финансирование Национального научного фонда (NSF National Science Foundation). Сеть NSFNET была первоначально создана
для связи суперкомпьютеров в основных исследовательских
организациях, но она быстро выросла и включила в себя большинство
крупнейших университетов и исследовательских лабораторий. В 1990 г.
существовало более 300000 хост-компьютеров. В 1994 г. по поручению
NSF был подготовлен отчет с названием "Осознание информационного
будущего: Интернет и дальнейшее развитие". Этот отчет представил
программу эволюции "информационной супермагистрали" и оказал
значительное влияние на пути развития Интернет.
В 1995 г. после короткой, но успешной истории финансирование
NSFNET было прекращено и были сняты ограничения на коммерческое
использование, что привело к экспоненциальному росту использования
Интернет. Финансирование, которое шло на поддержку NSFNET, было
перераспределено между региональными сетями, чтобы помочь им в
получении соединения с Интернет у многочисленных новых
коммерческих поставщиков сетевых услуг. За следующие три года
количество хост-сайтов росло на миллион в год, а в 1995 -1997 гг. число
сайтов увеличивалось более чем на 6 миллионов в год и достигло почти
20 миллионов. К этому времени правительственные агентства,
образовательные учреждения и частные предприятия стали активными
клиентами Интернет.
24 октября 1995 г. Федеральный совет по сетям (Federal Networking
Council) единогласно одобрил резолюцию, определяющую термин
Интернет (Internet):
8

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Термин "Internet" (Интернет) относится к глобальной информационной
системе, которая - (i) логически связана глобально уникальным
адресным пространством на основе Протокола Интернет (IP) или его
последующими расширениями/ усовершенствованиями; (ii) способна
поддерживать коммуникацию с помощью пакета протоколов TCP/IP или
его последующими расширениями/ усовершенствованиями, и/или
другими, совместимыми с IP протоколами; и (iii) предоставляет,
использует или делает доступными, публично или в частном порядке,
высокоуровневые службы, опирающиеся на коммуникацию и
описанную здесь инфраструктуру.
Интернет можно считать технической инфраструктурой - это
компьютеры, кабели, сети и механизмы коммутации, обеспечивающие
коммуникацию одного компьютера с другим. Однако, в конечном счете,
достоинства сетевых компьютеров оцениваются информацией, которой
обмениваются сидящие перед компьютерами люди. E-mail и программы
пересылки файлов были с самого начала неотделимы от целей создания
Интернет, соединяя людей друг с другом и с нужной им информацией.
WWW - Информационная сеть
Хотя e-mail и пересылка файлов были важны для развития Интернет,
они не обладали удобными методами, которые необходимы
пользователям-новичкам, чтобы получить доступ к растущим
хранилищам информации, разбросанным по всему миру. Все еще было
слишком много технических проблем, связанных с коммуникацией через
Интернет.
Реализация
задачи
создания
информационной
супермагистрали требовала развития инструментов для "сокрытия"
технологии Интернет за удобным для человека интерфейсом. Это
привело к развитию Всемирной паутины (WWW) и программного
обеспечения браузеров Интернет.

9

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рис. 1.4. Тед Нельсон
В середине 1960-х Тед Нельсон создал слово " гипертекст " для
описания системы непоследовательных ссылок внутри текста. Идея
состояла в том, чтобы перемещаться по текстовым ссылкам, не читая
при этом материал в линейной последовательности. Фрагмент
информации в одном месте будет вести к родственной информации в
другом месте через цепочку ссылок, чтобы собрать сведения из
различных источников, разбросанных по множеству документов. И
только пятнадцать лет спустя Тим Бернерс-Ли, работавший
консультантом в Европейском центре ядерных исследований (CERN),
написал программу с названием "Enquire-Within-Upon-Everything" ("Задай
любой вопрос"), которая позволяла создавать ссылки между
произвольными узлами текста в документе. Каждый узел имел заглавиеидентификатор и список двунаправленных ссылок, поэтому читатели
могли перемещаться из одного раздела документа в другой, активируя
текстовые ссылки.

Рис. 1.5. Тим Бернерс-Ли
В 1990 Бернерс-Ли начал работу над гипертекстовым " браузером ". Он
придумал термин "WorldWideWeb" ("Всемирная паутина") для названия
программы и "World Wide Web" - для названия проекта. Проект WWW
был первоначально разработан для создания распределенной
гипермедийной системы, которая была легко доступна из любого
настольного компьютера, и для согласования физических исследований,
разбросанных по всему миру. Web содержала стандартные форматы для
текста, графики, звука и видео, которые легко индексировались и были
доступны для поиска всем сетевым машинам. Были предложены
стандарты для Единообразного локатора ресурса (URL - Uniform Resource
Locator), который является схемой адресации Web; Протокола передачи
гипертекста (HTTP - HyperText Transfer Protocol), который является
множеством сетевых правил для передачи Web-страниц; и Языка
10

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

разметки гипертекста (HTML - HyperText Markup Language), который
является темой данного учебника.
Прототип браузера был написан для компьютера Apple Next, который
был не очень широко распространен. Была создана упрощенная версия,
которая подходила для любой компьютерной платформы, так
называемый "Line-Mode Browser" ("Построчный браузер"), и выпущена
центром CERN как свободно доступная программа (freeware). БернерсЛи позднее переехал на работу в MIT (Массачусетский институт
технологии) и помог создать Консорциум WWW (W3С), который
сегодня поддерживает стандарты технологий Web.
В январе 1993 г. Марк Андреессен, который работал в Национальном
центре суперкомпьютерных приложений (NCSA) в Университите
Иллинойса, выпустил версию своего нового графического браузера для
Web на основе принципа "укажи и щелкни" для работы на машинах Unix.
В августе Андреессен и его коллеги по NCSA выпустили бесплатные
версии для Macintosh и Windows. Андреессен и Эрик Бина разработали
браузер Mosaic, а позже основали корпорацию Netscape для
производства его потомка браузера Navigator, одного из первых и
наиболее популярных коммерческих браузеров. В августе 1994 г. NCSA
передала все коммерческие права на браузер Mosaic компании Spyglass,
Inc. Spyglass впоследствии лицензировала эту технологию нескольким
другим компаниям, включая Microsoft, для использования в Internet
Explorer.
И только в 1996 г. компания Microsoft стала основным игроком на рынке
браузеров. Сегодня Internet Explorer является наиболее широко
распространенным браузером, которым пользуется во всем мире около
84% пользователей Интернет.
Техническая конвергенция
Интернет возник в результате сближения множества технологий,
которые соединились с целью электронного обмена информацией.
Сегодня Интернет является сетью взаимосвязанных сетей, которые
используют общие коммуникационные протоколы, или правила обмена,
для передачи информации между компьютерами. Одним из этих
11

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

протоколов является Протокол передачи гипертекста - HTTP, который
управляет
обменом
между
компьютерами
гипертекстовыми
документами или страницами Web. Процесс обмена информацией,
который применяет этот протокол, в своей совокупности называется
Всемирной паутиной (WWW - World Wide Web ). Другими протоколами
Интернет являются Протокол передачи файлов (FTP - File Transfer
Protocol), а также Простой протокол пересылки почты (SMTP - Simple
Mail Transfer Protocol), который используется для обмена сообщениями email. Интернет не является единой сущностью. Он объединяет
множество различных способов поддержания и обмена информацией
среди множества различных компьютеров во множестве различных
сетей, разбросанных по всему миру.
Всемирная паутина WWW является одним из таких методов сбора и
обмена информацией. Она основывается на использовании страниц
Web в качестве механизма упаковки и передачи информации между
компьютерами, соединенными с Интернет. Страница Web включает в
себя текстовую информацию вместе со ссылками на связанную с ней
текстовую или графическую информацию (контент), находящуюся где-то
в другом месте в Интернет. Эта информация форматируется для
представления с помощью языка разметки гипертекста (HTML), чтобы
организовать и определить стиль представленной информации и
связать с другим контентом на отдаленных компьютерах. Этот язык
форматирования является ключом, который открывает всемирные
хранилища информации, чтобы представить ее на настольном
компьютере, и это также средство для того, чтобы поделиться личной
информацией с миром.
С тех начальных дней WWW выросла в основную инфраструктуру
распространения информации в мире. Отдельный человек может
организовать свое присутствие в Web, доступное любому другому
человеку в мире, имеющему соединение с Интернет; отдельная
компания может организовать сайт Web, чтобы занять свое место на
глобальном рынке товаров и услуг. Хотя Web начиналась как публичная
служба с ограниченной областью деятельности, сегодня она разрослась,
благодаря
предпринимательской
деятельности
отдельных
индивидуумов и организаций, в то, что определяет ее название - во
всемирную паутину взаимосвязанных сетей для осуществления
публичных и частных мероприятий мирового сообщества.
12

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Использование Интернет
В 1969 г. Интернет начинался с четырех узлов и четырех пользователей.
Сегодня, согласно Всемирной книге фактов ЦРУ (CIA World Factbook),
во всем мире существует более 600 миллионов пользователей Интернет,
что составляет около 9% населения Земли. Однако распространение
Интернет не равномерно на земном шаре. Лидируют страны,
обладающие высоким интеллектуальным и организационным
потенциалом вместе с политической и экономической системами,
необходимыми для развития этих возможностей. Страны, занимающие
первые двадцать пять позиций по доле пользователей Интернет от
общего количества населения, показаны в таблице 1.1.
Таблица 1.1. Распределение пользователей
Интернет по странам
Позиция
Страна
Пользователи Процент
1
2

Весь мир
Исландия
Тайвань

604,111,719
195,000
13,800,000

9.4
65.7
60.3

3
4
5

Южная Корея
Лихтенштейн
Швеция

29,220,000
20,000
5,125,000

60.1
59.3
56.9

6
7
8

США
159,000,000
Новая Зеландия 2,110,000
Сингапур
2,310,000

53.8
52.3
52.2

9
10
11

Нидерланды
Дания
Финляндия

8,500,000
2,756,000
2,650,000

51.8
50.7
50.7

12
13
14
15
16

Пакистан
Норвегия
Канада
Германия
Австралия

1,500,000
2,288,000
16,110,000
39,000,000
9,472,000

50.0
49.8
49.1
47.3
47.1

13

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

17
18
19
20
21

Гонконг
3,212,800
Австрия
3,730,000
Япония
57,200,000
ОАЭ
1,110,200
Великобритания 25,000,000

46.6
45.6
44.9
43.3
41.4

22
23
24
25

Латвия
Словения
Малайзия
Франция

40.9
37.3
36.3
36.1

936,000
750,000
8,692,100
21,900,000

Источник:
CIA
World
Factbook
http://www.odci.gov/cia/publications/factbook/index.html
http://www.odci.gov/cia/publications/factbook/index.html)

(ссылка:
-

Для стран, объединенных по регионам, степень использования
Интернет показана в Таблице 1.2. Примечательно то, что Северная
Америка и Европа составляют более 52% пользователей Интернет, хотя
в абсолютных числах азиатские страны имеют наибольшее число
пользователей.
Таблица 1.2. Распределение пользователей Интернет
по регионам
Позиция
Регион
Пользователей Процент
1
Северная Америка 223,392,807
68.0%
2
Океания/Австралия 16,448,966
49.2%
3
4
5

Европа
269,036,096
Латинская Америка 68,130,804
Азия
323,756,956

36.8%
12.5%
8.9%

6
7

Средний Восток
Африка

8.3%
1.8%

21,770,700
16,174,600

Источник:
Internet
World
http://www.internetworldstats.com/index.html
http://www.internetworldstats.com/index.html)
14

Stats

(ссылка:
-

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Технологии Интернет
В недавнем прошлом соединение с Интернет было по большей части
медленным. Пользователи были ограничены использованием
существующих телефонных линий с ненадежными коммутируемыми
соединениями. Большинство пользователей соединялись с Интернет со
скоростью, ограниченной сверху 56000 бит информации в секунду.
Однако последние годы отмечены значительным ростом скорости
Интернет за счет применения технологии DSL и кабельных модемов со
скоростями до 5000000 бит в секунду. Эти широкополосные соединения
с Интернет продолжают развиваться в США и во всем мире. Как
показано в таблице 1.3 к середине 2005 г. большинство домашних
пользователей использовали высокоскоростной доступ к Интернет.
Таблица 1.3. Скорость соединения с
Интернет
Скорость
Процент пользователей
DSL и кабель
58.7%
Модем 56К
33.9%
Модем 28.8/33.6К 5.1%
Модем 14.4К

2.5%

Источник:
WebSiteOptimization.com
http://www.websiteoptimization.com/bw/0505/
http://www.websiteoptimization.com/bw/0505/)

(ссылка:
-

Большинство работающих в США также имеют высокоскоростные
линии связи с Интернет через сетевые соединения своих компаний. В
середине 2005 г. более 80% работников имели доступ к
высокоскоростным соединениям.
При разработке Web-страниц важно знать целевые браузеры, которые
будут использовать посетители сайта. Браузеры различаются
используемыми технологиями и степенью поддержки общих
стандартов. Нет никаких гарантий, что Web-страница будет выводиться
одинаково или даже правильно в двух различных браузерах.
Представленная в таблице 1.4 статистика по процентному
15

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

распределению используемых браузеров показывает, что Microsoft
Internet Explorer все еще остается наиболее широко распространенным
браузером. Его популярность обусловлена в большой степени тем, что
он установлен уже при продаже на большинстве ПК, покупаемых
частными пользователями и организациями.
Таблица 1.4. Использование браузеров
Браузер
Процент использования
Internet Explorer
84.0%
AOL, Firefox, Mozilla, Netscape 10.0%
Safari
2.0%
Opera
1.0%
Navigator
0.5%
Другие
2.5%
Источник:
Browser
News
http://www.upsdell.com/BrowserNews/index.htm
http://www.upsdell.com/BrowserNews/index.htm)

(ссылка:
-

При проектировании Web-страниц для известной аудитории с
известным браузером усилия по разработке становятся относительно
простыми. Страницы необходимо тестировать только в определенном
браузере. Однако при проектировании для общего доступа необходимо
делать предположения о наиболее вероятной аудитории.
В идеале, надо протестировать страницы во всех наиболее популярных
браузерах, например, в Internet Explorer и Firefox. Как правило, при
следовании стандартам W3C, представленным в этом учебнике,
страницы будут иметь наилучшие шансы правильного вывода во всех
браузерах, которые следуют этим стандартам.
Все современные мониторы ПК могут работать с разрешением экрана
1024 x 768 (пикселей), и многие пользователи выбирают это
разрешение для вывода Web-страниц. Тем не менее, до сих пор
достаточно много пользователей ограничены в выборе или выбирают
разрешение дисплея 800 x 600. Очень немногие в настоящее время
пользуются устаревшими дисплеями 640 x 480. Безопасный подход
16

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

состоит в проектировании Web-страниц для разрешения дисплея 800
x 600, если нет полной уверенности, что предполагаемая аудитория
предпочитает большие размеры страниц, возможно, с более высокими
разрешениями. Так как технология развивается очень быстро, то очень
скоро разрешение 1024 x 768 станет минимальным стандартом.
Необходимо отметить, что разрешение экрана не связано с размером
экрана. Даже маленькие экраны (например, 15" или 17") можно
настроить для вывода высокого разрешения, в зависимости от объема
установленной в системе видеопамяти. Тем не менее, размер окна, в
котором открывается браузер, может оказать значительное влияние на
вывод страницы Web. Полноэкранный вывод страницы обычно
отличается от страницы, открытой в окне меньшего размера, так как
страница согласовывает свою компоновку с размером окна. Эта
автоматическая настройка позволяет странице расширяться или
сжиматься в соответствии с выбранной шириной окна, делая менее
важным проектирование для определенного разрешения экрана или
определенного размера окна.
При выводе на странице цветной графики необходимо учитывать
глубину цвета (диапазон цветов) мониторов. Обычно используются
режимы с трехцветным представлением. Пользователи с более старыми
ПК имеют обычно 8-битные мониторы (256 цветов), число таких
пользователей составляет не более 1%. Другие пользователи имеют
обычно 16-битные (65,536 цветов) и 24-битные (16,777,216 цветов)
мониторы, представляющие примерно 18% и 72%, соответственно. При
создании собственной графики есть возможность выбора выводимой
глубины цвета. При использовании готовой графики такой
возможности может не быть. Помните, что изображения, сохраненные
с большой глубиной цвета, могут выводиться с неправильными цветами
на мониторах с небольшим объемом видеопамяти и меньшим
количеством возможных цветов.
С учетом тенденций развития технологий Web разработчики Web могут
рассчитывать, что современные компьютерные системы будут только
совершенствоваться. Это означает, что при создании Web-страниц
можно использовать самые современные технологии Web, так как
количество пользователей, применяющих более старые технологии,
постоянно сокращается. Оптимальным является разработка для браузера
17

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Internet Explorer, работающим с разрешением 800 x 600 пикселей и
глубиной цвета 24 бита в полноэкранном окне. Можно делать
настройку для других браузеров, других разрешений экрана и другой
глубины
цвета, если
предполагается посещение страницы
пользователями с другими технологиями.

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

18

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рис. 1.6. Загрузка Web-страницы с сервера для вывода на ПК клиента
Доступ к документам Web
Пользователи взаимодействуют с WWW с помощью программы
браузера Web. Чтобы извлечь страницу Web, расположенную на
определенном сервере, используется специальная адресация для
идентификации сервера и страницы. Этот адрес Web, называемый
Единообразным локатором ресурса (URL - Uniform Resource Locator),
вводится в адресное поле браузера и посылается через Интернет в
поисках сервера.

19

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рис. 1.7. Адрес URL страницы Web
Например, адресом URL страницы, показанной на рисунке 1.7, будет
ссылка:
http://www.google.com/enterprise/mini/index.html
http://www.google.com/enterprise/mini/index.html
URL состоит из нескольких частей:
протокол Часть адреса "http" определяет метод сетевой передачи
(протокол), используемый для поиска и доставки страницы браузеру.
HTTP является протоколом передачи гипертекста (HyperText Transfer
Protocol), стандартным методом, который применяется для
взаимодействия с WWW.
имя домена Часть адреса ссылка: www.google.com - http://www.google.com
определяет имя сервера. Практически всем серверам Web присвоены
имена доменов для уникальной идентификации среди всех серверов в
Интернет. При отсутствии имени, местонахождение сервера можно
определить по его числовому адресу протокола Интернет (IP),
записанному в формате с точками 000.000.000.000. Однако обычно
20

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

используются имена доменов, так как адреса IP трудно запоминать.
путь доступа После прибытия на сервер необходимо пройти путь
доступа к каталогу, чтобы найти определенный документ для
извлечения. Cтраница Web на рисунке 1.7 имеет путь доступа
enterprise/mini; то есть документ расположен в каталоге mini, который
является подкаталогом каталога enterprise.
имя файла Имя файла документа является конечной частью пути
доступа. Web страница на рисунке 1.7 с именем index.html расположена в
каталоге mini.
Обычно требуется знать точное имя страницы Web, чтобы ее извлечь.
Однако, если страница имеет имя index.html, как в примере выше, то она
извлекается, даже если имя страницы отсутствует в URL. Имя index.html,
а также другие специальные имена, такие, как index.htm, default.htm и
default.html, означают страницу по умолчанию, которая извлекается, если
имя страницы не задано.
Именно поэтому можно извлечь страницу Web из Интернет с помощью
простого адреса URL из имени домена (например, ссылка:
http://www.google.com - http://www.google.com). В главном каталоге Webcайта имеется страница с одним из этих специальных имен, которая
будет извлечена. Эту страницу по умолчанию часто называют
домашней страницей сайта.
URI
Хотя термин "URL" используется повсеместно, более точно называть
Web-адрес URI (Uniform Resource Identifier - Единообразный
идентификатор ресурса). Этот термин подчеркивает, что ресурсы Web
являются чем-то большим, чем просто страницами Web; они могут быть
графическими изображениями, файлами мультимедиа, загружаемыми
файлами текстового процессора, электронной таблицы, и базы данных,
электронными почтовыми ящиками и множеством других типов
документов и служб Web.
Когда Web-документ найден, он извлекается сервером и посылается
назад через Интернет запрашивающему ПК. Клиентский ПК
21

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

идентифицируется в Интернет таким же образом, как и сервер. Он
имеет уникальный IP-адрес, который передается на сервер вместе с URL
запроса Web-страницы.
Пользователь может не знать IP-адрес своего компьютера, но он
присваивается ему поставщиком услуг Интернет (ISP) при соединении с
Интернет. Поэтому Web-сервер может доставить страницу сразу
запрашивающему ПК.
Просмотр локальных страниц Web
Кроме получения доступа через Интернет страницы Web можно
просматривать локально. Личные страницы Web можно сохранить на
своем настольном ПК и открывать в браузере. Эти страницы ничем не
отличаются от любых других файлов на компьютере. Фактически все
документы Web, описанные в этом учебнике, можно создать на своем
настольном ПК, сохранить на своем настольном ПК и извлекать для
вывода на своем настольном ПК.

Рис. 1.8. Значок страницы Web
Чтобы открыть локальный документ Web в своем браузере, можно
сделать двойной щелчок на значке документа на рабочем столе. В
результате автоматически откроется браузер и выведет эту страницу.
Можно также просматривать локальную Web-страницу, открывая
сначала браузер и выбирая затем "Open..." (Открыть ... ) из меню File, а
затем просмотреть каталоги на диске, чтобы найти и открыть документ.
Этот процесс показан на рисунке 1.9.

22

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рис. 1.9. Открытие локальной страницы Web
Создание присутствия в Web
Хотя для создания и вывода Web-страниц не требуется соединение с
Интернет, но если желательно сделать эти страницы доступными
другим людям - друзьям и соседям во всем мире - потребуется
скопировать страницы на Web-сервер, соединенный с Интернет. Если
вы пользуетесь услугами Интернет дома или на работе, то вполне
возможно, что поставщик услуг Интернет (ISP) предоставляет вам
домашний каталог для хранения персональных Web-страниц. Обычно
соединение с этим каталогом и загрузка туда страниц выполняется
очень просто. В этом случае даже те страницы, которые будут созданы с
помощью этого учебника, станут доступны всему миру. Провайдер
Интернет предоставит также адрес URL, необходимый для доступа к
этим страницам через Интернет.

23

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Теги XHTML и стили CSS
Страница Web начинается как стандартный текстовый файл,
содержащий информацию, которая будет выводиться, и инструкции
форматирования для ее представления на экране компьютера. Эти
инструкции форматирования написаны на специальном языке
разметки, называемом так, потому что он используется для "разметки"
информации на странице, чтобы описать ее расположение и
представление при выводе в браузере Web.
Язык разметки HTML
С самого начала языком разметки для страниц Web был язык разметки
гипертекста (HTML). Он действует с помощью специальных команд,
которые помещают вокруг текстового и графического контента
(информационного содержания), присутствующего на странице. Эти
команды инструктируют браузер, как организовать и вывести этот
контент. В качестве очень простого примера на листинге 1.1 показана
строка кода,
<h2>Форматировать эту строку текста.</h2>
Листинг 1.1. Код HTML для форматирования строки текста

которая окружает текстовую строку "Форматировать эту строку текста."
тегами HTML для разметки <h2> и </h2> (стиль заголовка 2), чтобы
вывести текст показанным на рисунке 1.10 стилем.

Рис. 1.10. Вывод браузером форматированной строки текста
Эти коды разметки приказывают браузеру форматировать текст,
увеличивая и делая жирными появляющиеся между ними символы.
Коды разметки, называемые также тегами или элементами HTML,
всегда помещаются между символами "<" и ">", чтобы выделить их в
текстовом контенте, к которому они применяются. Обычно
24

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

"открывающий" тег указывает на начальную точку форматирования (
<h2> в примере выше), а отдельный "закрывающий" тег указывает на
конечную точку форматирования ( </h2> в примере выше). Изучив
доступные теги HTML, можно создавать свои собственные страницы
Web для представления текста и графики практически в любом
требуемом виде.
Изучение HTML
Язык HTML не является языком программирования компьютеров. Это
просто набор кодов разметки, которые структурируют и задают стиль
текста и графики, имеющихся на странице Web. Изучение HTML
является, по сути, изучением этих тегов разметки и их использования
для задания стиля страниц Web.
Существуют доступные методы для создания страниц Web, не
требующие изучения HTML. Это хорошо известные программы Microsoft
FrontPage или Macromedia Dreamweaver. Это редакторы страниц Web,
работающие в режиме WYSIWYG ("что видим, то имеем") и
использующие буксировку элементов, которые неявно для пользователя
создают необходимые коды. Фактически можно создавать страницы Web
с помощью этих программных пакетов, совершенно не зная HTML.
Зачем же тогда беспокоиться об изучении HTML?
Для временного или случайного автора страницы Web, который
поддерживает простой персональный Web-сайт, возможно, что знание
HTML не требуется. Визуальный редактор со средствами буксировки
позволяет создавать и организовывать контент страницы без знания
нижележащего кода. Неведение блаженно. Однако умному разработчику,
профессионально отвечающему за создание и поддержку коммерческих
сайтов, жизненно важно знать язык HTML. Это остается в силе, даже
если для создания страниц используются визуальные редакторы. По
мере того как приложения Web становятся все более сложными,
необходимо иметь возможность разобрать страницы на части и собрать
их снова на уровне кода, а не только на уровне контента. Необходимо, в
некотором смысле, иметь возможность поднять капот и починить
двигатель.
25

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Достаточно часто студенты после изучения кодирования HTML
предпочитают работать на уровне кода, а не использовать инструменты
WYSIWYG. В этом случае имеется больше возможностей контроля над
проектом страницы и достаточно часто оказывается легче работать
непосредственно с кодом, чем с программой редактора.
Развитие стандартов HTML
Как отмечалось, консорциум WWW (W3C) поддерживает стандарты
технологий Интернет, включая стандарты для языков разметки Web.
Самый ранний стандарт HTML появился в 1995 г., за ним последовали
версии HTML 3.0, HTML 3.2, и завершилась разработка в 1999 г. версией
HTML 4.01. Однако в дальнейшем происходит существенная
переработка языков разметки.

Рис. 1.11. Развитие версий HTML
Последние усилия W3C сосредоточены на определении нового языка
XML (eXtensible Markup Language - Расширяемый язык разметки) для
использования в качестве универсального языка разметки, заменяющего
более старые языки, и со стандартами создания будущих языков для
специальных случаев разметки. Например, были созданы версии XML
для генерации графики Web (VML - Vector Markup Language), для вывода
математических выражений (MathML - Mathematical Markup Language),
для создания интерактивных аудио/видео представлений (SMIL Synchronized Multimedia Integration Language), для распознавания цифровой
26

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

подписи (InkML - Ink Markup Language) и другие.
Недавние усилия по переработке HTML как языка на основе XML
привели к его текущей инкарнации в качестве XHTML (eXtensible
HyperText Markup Language - Расширяемый язык разметки гипертекста).
Начальная версия, XHTML 1.0, появилась в 2000 г. как переходный
стандарт, который все еще распознает некоторые популярные свойства
HTML. Однако к 2001 г. он развился в версию XHTML 1.1 и полностью
отказался от оставленных свойств предыдущих стандартов HTML. Язык
в настоящее время пересматривается в направлении версии XHTML 2.0.
Различные браузеры пытаются поддерживать стандарты HTML и
XHTML, некоторые более успешно, чем другие. Например, для
современных версий Internet Explorer или Firefox можно будет без опаски
использовать язык XHTML, описанный в этом учебнике.
Стандарты кодирования XHTML
Этот учебник пытается выдержать баланс между строгим следованием
XHTML 1.1 (текущим стандартом) и популярными оставленными
свойствами HTML, включенными в XHTML 1.0. Основное содержание
основывается на XHTML 1.1, однако дополнительные разделы
представляют свойства XHTML 1.0, которые все еще популярны и
распознаются современными браузерами.
При создании страниц Web рекомендуется включать кодирование,
чтобы указать стандарт W3C, которому будет следовать кодирование.
Поэтому желательно, чтобы все страницы Web включали следующую
начальную строку кода для указания, что документ Web является
фактически документом XML:
<?xml version="1.0" encoding="UTF-8"?>
Листинг 1.2. Объявление XML для страницы Web

Соответствие XHTML 1.1
Кроме того, страница Web должна указать, с каким множеством
27

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

стандартов она согласована. Страница Web обозначает свое
соответствие стандарту с помощью Определения типа документа (DTD),
указанного в начале страницы после объявления XML. Так как
основным стандартом соответствия, которому следует учебник,
является XHTML 1.1, то DTD соответствия кодируется следующим
образом.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Листинг
1.3.
Определение
соответствия XHTML 1.1

типа

документа

(DTD)

для

Соответствие XHTML 1.0
Некоторые средства кодирования страницы Web, описанные в этом
учебнике, основываются на более старых методах кодирования, которые
все еще применяются и распознаются большинством современных
браузеров. Для страниц Web, содержащих эти средства, необходимо
использовать стандарт XHTML 1.0. Существуют три версии этого
стандарта. Страница Web может строго соответствовать стандартам
XHTML 1.0, что означает использование методов кодирования, очень
близких по ограничениям стандартам XHTML 1.1. Страница может
находиться в переходном соответствии, что позволяет использовать
исторически распространенные методы кодирования, которые не
разрешают более строгие стандарты. Страница может быть в
соответствии с фреймами, что позволяет разделить окно браузера на
отдельные подокна (фреймы), каждое из которых может выводить
разные страницы Web.
Тремя DTD соответствия, которые необходимо указывать для этих
версий XHTML 1.0, являются:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html
28

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Листинг 1.4. Стандарты соответствия XHTML 1.0

В этом учебнике все страницы, за исключением указанных специально,
закодированы в соответствии с XHTML 1.1, что почти совпадает со
стандартами XHTML 1.0 Strict. Поэтому использовать последний нет
необходимости. Для тех страниц Web, которые нарушают стандарты
XHTML 1.1 (и XHTML 1.0 Strict), сделаны примечания об используемом
для такой страницы DTD.
Корневой элемент <html>
Наконец, корневым элементом (открывающим тегом) страницы XHTML
должен быть тег <html>, указывающий пространство имен
применяемого стандарта, то есть, расположение в Web применяемого
для страницы стандарта XHTML. Во всех случаях корневой элемент
кодируется, как показано на листинге 1.5.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Листинг 1.5. Корневой элемент <html>

Стандарты соответствия кодированию
В заключение еще раз подчеркнем, что любая создаваемая страница Web
должна включать начальные строки кода для указания соответствия
стандарту, применяемому к странице. Листинг 1.6 задает компоновку
страницы Web, которая применима для большинства страниц,
показанных в этом учебнике, и указывает на соответствие стандарту
XHTML 1.1. В этот пример включен дополнительный код создания
полной страницы Web для вывода форматированной строки текста,
показанной выше на рисунке 1.10.
29

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Страница Web, соответствующая XHTML 1.1</title>
</head>
<body>
<h2>Форматировать эту строку текста.</h2>
</body>
</html>
Листинг
1.6.
Код
стандартам XHTML 1.1

для

указания

соответствия

страницы

Страницы Web в этом учебнике, которые не строго соответствуют
стандартам XHTML 1.1, могут использовать стандарты XHTML 1.0
Transitional. Эти страницы имеют в начале код, показанный на листинге
1.7.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Страница Web, соответствующая XHTML 1.0 Transitional</title>
</head>
<body>
<h2>Форматировать эту строку текста.</h2>
</body>
30

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

</html>
Листинг 1.7. Код, указывающий на
стандартам XHTML 1.0 Transitional

соответствие

страницы

Далее в учебнике всегда уточняется, какой из двух стандартов
необходимо указывать при создании страницы Web.
Валидация страниц Web
Консорциум WWW обеспечивает службу валидации страниц Web для
проверки страницы на соответствие стандартам. Хотя проверка
страниц на соответствие не требуется для вывода страниц в браузере,
но все-таки желательно выполнять валидацию страниц, чтобы
убедиться, что они на самом деле соответствуют стандартам.
Служба
валидации
W3C
доступна
по
адресу:
ссылка:
http://validator.w3.org - http://validator.w3.org. По этому адресу находится
страница, показанная на рисунке 1.12.

31

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рис. 1.12. Страница валидатора W3C
Существует три возможности для проверки страниц. Можно ввести
URL страницы (убедившись, что страница доступна в Web), можно
загрузить документ Web со своего локального ПК или можно
скопировать свой код в текстовое поле. Последний метод показан на
рисунке 1.13, где для валидации введен код страницы примера,
приведенного на листинге 1.6.

Рис. 1.13. Ввод страницы Web для валидации
Так как запись !DOCTYPE на этой странице указывает на соответствие
стандартам XHTML 1.1, то страница проверяется согласно этим
стандартам. После нажатия кнопки "Check" выполняется валидация и
выводится страница отчета.

32

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рис. 1.14. Отчет валидатора
В данном случае код XHTML соответствует стандартам. Если документ
не соответствует стандартам, выводятся сообщения об ошибках,
указывающие те элементы страницы, которые являются некорректными.
Помните, однако, что браузеры Web имеют склонность прощать
некорректный код. Страница, скорее всего, выведется правильно, даже
если она не соответствует точно стандартам.
Типы тегов XHTML
Коды форматирования XHTML, или теги, располагаются вокруг
форматируемого материала и заключены в треугольные скобки ( "<" и
">" ), чтобы выделить их как инструкции разметки. На основе этих
тегов разметки браузер выводит страницу с указанной компоновкой и
стилем. Каждая страница Web описывается своим собственным
отдельным документом XHTML, содержащим все теги, которые
необходимы для структурирования и задания стиля страницы, согласно
замыслам автора страницы.
33

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Для различных задач компоновки и определения стилей используются
разные типы тегов XHTML. Представленный ниже список является
одним из способов классификации тегов согласно их основному
применению.
Теги компоновки документа. Эти теги используются для
структурирования
документа
XHTML.
Они
организуют
информационное содержание (контент) страницы таким образом, что
текстовые и графические элементы появляются там, где автор желает их
видеть. Эти теги применяются для организации общих физических и
визуальных отношений между элементами страницы.
Теги форматирования текста. Эти теги используются для задания
определенного шрифта, стиля, размера и цвета текста, выводимого на
странице. Они формируют и украшают текстовый контент страницы.
Теги форматирования списков. Для организации текстовой информации
в списки используются специальные теги. Списковые структуры
включают маркированные списки, нумерованные списки и другие.
Теги форматирования графики. Эти теги применяются для
позиционирования, задания размера и стиля выводимых на странице
графических изображений.
Теги ссылок. Страницы Web являются гипертекстовыми документами,
что означает существование между ними связей. С помощью щелчка
мыши можно немедленно перейти с одной страницы на другую или с
одной страницы в определенное место на другой странице. Нет
необходимости перемещаться по страницам последовательно. Поэтому
используются специальные теги для задания этих связей между
страницами и между различными частями одной страницы.
Теги таблиц. Страницы Web содержат информацию для посетителей;
они выводят данные. Часто данные необходимо представить в
табличной форме, с помощью строк и столбцов, для лучшего
представления, для удобочитаемости, и облегчения понимания. Теги
таблиц позволяют организовать данные в таблицы; их можно
использовать также как средство структуризации для организации всего
контента страниц Web.
34

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Теги фреймов. Страницы Web можно организовать в виде фреймов или,
говоря иначе, с помощью доступных одновременно отдельных окон,
каждое из которых содержит отдельную страницу Web. Теги фреймов
позволяют организовать такую структуру для размещения информации
на странице.
Теги форм. Формы являются средствами сбора данных. Они
используются для сбора информации от посетителей, чтобы получить
данные для обработки или выяснить мнение пользователей о
выводимом контенте сайта. Формы являются механизмом, с помощью
которого посетители взаимодействуют со страницей Web. Ряд
различных тегов форм предоставляют различные средства
взаимодействия пользователей.
Теги мультимедиа. Современные страницы Web часто включают в себя
мультимедийное содержимое, выводя аудио- и видеоинформацию и
представления, кроме текста и графических изображений. Используются
специальные теги для соединения и воспроизведения аудио- и
видеофайлов с помощью специальных медиа-проигрывателей, которые
могут быть встроены в страницу Web.
Данный учебник структурирован вокруг этих типов тегов. Вначале будут
рассмотрены различные способы организации и оформления текста для
представления страницы Web. Затем рассматривается вывод
графических изображений и использование текста и изображений в
качестве ссылок на другие страницы Web. После этого будут
рассмотрены специальные средства форматирования контента с
помощью таблиц, фреймов, и форм, далее следует интеграция на
страницу мультимедийного контента. В конечном счете, будут
рассмотрены большинство тегов XHTML, которые нужны для
организации и оформления контента страницы в соответствии с
самыми строгими требованиями.
Контейнерные и пустые теги
Теги XHTML являются специальными ключевыми словами,
окруженными угловыми скобками "<" и ">". "Имена" этих элементов
указывают на назначение тега и предписывают браузеру
35

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

интерпретировать вложенный контент специальным образом. В
примере страницы, показанной на листинге 1.6, тег <html> окружает
все содержимое страницы и говорит о том, что оно является
документом
HTML
и
должно
соответствующим
образом
интерпретироваться браузером. То есть, браузер должен искать теги
XHTML и использовать вложенные спецификации разметки для
оформления информации, окруженной тегами. Аналогично теги
<body> окружают весь контент страницы, которая выводится в окне
браузера. В соответствии со стандартами XHTML все ключевые слова
записываются символами нижнего регистра. Большинство тегов
XHTML кодируются парами из открывающего и закрывающего тегов,
называемых контейнерными тегами. Открывающий тег является самим
ключевым словом, появляющимся между символами < и > ;
закрывающий тег имеет такой же формат, в котором перед ключевым
словом стоит прямая косая черта ( / ). Эта пара контейнерных тегов
охватывает данные, к которым применяется форматирование.
Следовательно, пара контейнерных тегов <html>...</html>
окружает весь документ HTML, чтобы указать, что все находящееся
между ними кодируется на языке HTML. Таким же образом пара
контейнерных тегов <body>...</body> охватывает все содержимое
страницы, которое выводится в окне браузера.
Не все теги являются контейнерными, то есть они не "окружают"
данные, которые будут форматироваться, а кодируются единственным,
автономным тегом. Такие пустые теги кодируются специальным
образом, чтобы соответствовать стандартам XHTML. Они должны
содержать символ наклонной черты ( / ) непосредственно перед
закрывающей угловой скобкой. Например, одиночный тег для вывода
горизонтальной линии на странице кодируется как <hr/>, а
одиночный тег для создания разрыва строки в текстовом параграфе - как
<br/>. Такое специальное кодирование указывает, что тег служит
одновременно открывающим и закрывающим.
Каскадные таблицы стилей
Теги XHTML являются идентификаторами и контейнерами текстовой и
графической информации, выводимой на странице Web. Их основное
применение состоит в описании структуры этого содержимого, в
36

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

упаковке его для размещения на этой странице. Однако большинство
страниц Web содержат больше, чем обычный текст и размещенные в
нем с помощью тегов XHTML встроенные изображения. Информация
на странице имеет дополнительное оформление, делающее ее более
привлекательной и легко читаемой. Различные виды шрифта, размер
текста, цвет и другие характеристики форматирования делают страницу
более удобной для чтения и, при благоразумном использовании, могут
сделать информацию более понятной.
В предыдущих версиях HTML большая часть оформления контента
страницы происходила с помощью атрибутов, задаваемых как часть ее
тегов. Атрибуты определяли
дополнительные спецификации
форматирования помимо тех, которые подразумевает само имя тега.
Например, начертание шрифта можно задавать для текстовой
информации, окружая ее тегом <font>, содержащим атрибуты для
задания вида шрифта, размера и цвета: <font face="arial",
size="4", color="red">. Различные теги содержали различные
атрибуты для форматирования своего содержимого различным образом.
В текущих версиях XHTML атрибуты тегов почти исчезли, будучи
исключены (исключены в использовании) в пользу каскадных таблиц
стилей (CSS - Cascading Style Sheets), или просто кратко "таблиц стилей".
Таблица стилей является набором характеристик оформления,
связанных с тегами XHTML. Эти характеристики оформления состоят
из свойств оформления и значений, записанных с помощью
специального синтаксиса таблиц стилей и присвоенных тегам, которые
будут наследовать эти стили оформления. Например, одним из способов
присвоить таблицу стилей тегу является включение ее в тег в качестве
атрибута style.
<p style="font-family:arial; font-size:14pt; color:red; font-weight:bold">
Это текстовый параграф.
</p>
Листинг 1.8. Присвоение таблицы стилей параграфу

В этом примере параграфу текста, окруженному тегом <p> (paragraph),
задается тип шрифта Arial размером 14pt (14 пунктов), красного
цвета ( red ), с жирной насыщенностью ( bold ). Четыре
37

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

спецификации свойство:значение (например, font-family:arial )
задают эти стили оформления.
Любому тегу XHTML можно присвоить одну или несколько
характеристик оформления, и существуют сотни различных свойств
оформления и значений, которые могут использоваться. Большая часть
изучения XHTML состоит из изучения этого множества возможностей
оформления. Категории стилей оформления включают:
стили шрифта - для задания типа шрифта, размера и насыщенности.;
стили текста - для задания интервала между буквами и словами, высоты
строк, горизонтального и вертикального интервала и абзацных
отступов;
стили цвета - для задания цвета фона и переднего плана;
стили рамок - для вывода различных рамок, окружающих текстовые и
графические элементы;
стили отступов - для задания ширины различных отступов,
окружающих текстовые и графические элементы;
стили фильтрации - для применения специальных эффектов к
текстовым и графическим элементам;
стили задания размера - для задания высоты и ширины текстовых и
графических контейнеров;
стили позиционирования - для позиционирования элементов страницы
в фиксированных пиксельных координатах на странице.
Консорциум WWW поддерживает стандарты языка каскадных таблиц
стилей, так же, как это делается для языка разметки XHTML. Текущей
версией стандартов, рассматриваемой в данном учебнике, является CSS
Level 2 (CSS2).
Основная задача при освоении XHTML - изучение тегов и
особенностей
их стилей
оформления, которые применяют
форматирование браузера к содержимому страницы, которое они
38

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

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

Работа с документами XHTML
Документы XHTML имеют простую общую структуру, которая
формирует основу для создания всех страниц Web. Эта базовая
структура тегов показана на следующем листинге с помощью
соответствующих тегов, описанных в следующих разделах.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>здесь находится заголовок страницы</title>
</head>
<body>
.
здесь находится содержимое страницы
.
</body>
</html>
39

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Листинг 1.9. Шаблон страницы Web

Создание страницы XHTML можно начинать с этого шаблона. Можно
создать этот документ в редакторе и сохранить его как файл шаблона.
Затем, при создании новой страницы, откройте просто этот документ,
сохраните его под именем новой страницы и продолжайте кодирование
в соответствии с той задачей, для которой предназначена новая
страница.
Пролог
Все документы XHTML должны начинаться со строк пролога,
показанных на листинге 1.10. Первая строка говорит, что этот документ
основывается на XML версии 1.0. Остальные строки указывают на
определение типа документа (DTD), описывающее используемый на
странице стандарт кодирования W3C, в данном случае XHTML версии
1.1.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Листинг 1.10. Пролог страницы Web

Тег <html>
Контейнерный тег <html> окружает весь код XHTML в документе.
Этот тег указывает, что обрамленная информация содержит код XHTML
и должна интерпретироваться соответствующим образом в браузере. В
соответствии со стандартами XHTML открывающий тег включает
ссылку на расположение пространства имен стандартов валидации,
которые будут применяться к этому документу вместе с атрибутами,
определяющими используемый язык, в данном случае английский ( en
).
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
40

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Листинг 1.11. Тег <html>

Тег <head>
Контейнерный тег <head> обрамляет раздел заголовка документа
XHTML. Раздел заголовка содержит название документа ( title )
вместе с другой информацией, связанной с форматированием и
индексированием документа. В данный момент в разделе заголовка
имеется только тег title. Другие теги, которые могут находиться в
разделе заголовка, будут рассмотрены по мере необходимости.
<head>
<title> здесь находится название документа </title>
</head>
Листинг 1.12. Раздел заголовка <head>

Тег <title>
Контейнерный тег <title> добавляет в документ название. Этот тег
обрамляет строку текста, которая появляется в строке заголовка
браузера, когда открывается страница. Тег <title> содержит
идентификационную информацию о странице, полезную посетителю
различных страниц Web-сайта. Отметим, что разделы <head> и
<title> необходимы для соответствия стандартам XHTML 1.1.

Рис. 1.15. содержимого тега <title> в панели заголовка браузера

41

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Тег <body>
Основная часть кода документа XHTML находится в разделе тела
документа <body>, обрамленного контейнерным тегом <body>.
Только та информация, которая появляется внутри этого тега, выводится
в окне браузера. В своей простейшей форме раздел тела содержит
обычный текст, который выводится стилем используемого по
умолчанию шрифта в окне браузера. Браузеры обычно выводят текст с
помощью шрифта Times New Roman и размером примерно 12 пунктов.
Все страницы Web начинаются с этой базовой структуры документа.
Затем <body> документа увеличивается в объеме за счет текста и
других элементов страницы, которые должны выводиться в окне
браузера. Различные комбинации этих выводимых элементов и
управление
их
представлением
выполняется
с
помощью
дополнительных тегов XHTML.
Чтобы увидеть результат, не обязательно соединяться с Интернет или с
сервером в WWW. Всю работу можно делать локально. Если провайдер
Интернет, услугами которого пользуется читатель, предоставляет
персональные домашние каталоги, то можно копировать документы в
свой каталог для просмотра в Web. Однако для целей данного учебника
можно создавать страницы Web на жестком диске персонального
компьютера, на сменном флеш-драйве или дискете и просматривать
страницы с помощью браузера.
Страницы Web, созданные в этом учебнике, выглядят корректно в
Internet Explorer и других браузерах, которые следуют стандартам W3C.
Редактирование текста с помощью Notepad
Документы XHTML создаются с помощью текстовых редакторов или с
помощью специальных редакторов HTML, созданных для этой цели.
Для данного учебника достаточно использовать простой текстовый
редактор, такой, как Windows Notepad. Эта программа обычно находится
в меню Start-->All Programs-->Accessories. После запуска этого редактора
можно ввести текст и другие элементы страницы, которые желательно
вывести, дополняя тегами XHTML для компоновки и оформления.
42

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рисунок 1.16 показывает редактор Notepad с кодом простой страницы
Web. Эта страница имеет заглавие, которое выводится в панели заглавия
браузера, и одно предложение, которое выводится в окне браузера.

Рис. 1.16. Окно Notepad с кодом XHTML
Текст и кодирование вводятся в редакторе в свободном формате. То есть,
пробелы, табуляция, абзацные отступы, и другие средства
редактирования документа можно и нужно использовать, чтобы сделать
документ в редакторе удобочитаемым. Эта компоновка редактора
игнорируется браузером, который обращает внимание только на теги
XHTML, определяющие компоновку документа и инструкции
форматирования. Приведенный выше код, например, будет выведен в
браузере правильно, даже если его ввести в редакторе в следующем
виде:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DT
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/
xml:lang="en"><head><title>Страница Page</title></head><body>
<h2>Форматировать эту строку текста.</h2></body></html>
43

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Однако легче составлять и редактировать документ и понимать
компоновку страницы, размещая ее теги и текст в более удобочитаемом
формате. Уделите большое внимание выравниванию и отступам кода,
чтобы визуально он представлял структуру выводимого в браузере
контента. Небрежный код неизбежно ведет к ошибкам. Необходимо
выбрать для вывода кода в Notepad моноширинный шрифт, такой, как
Courier New. Моноширинный шрифт облегчит выравнивание строк
текста в редакторе. Кодирование XHTML является трудным искусством
и наукой. Аккуратность кодирования - требование первостепенное,
здесь нужна работа с точностью, приближающейся к 100%. Браузер не
знает, что "хочет" сделать программист; браузер может делать только то,
что ему будет точно сказано. Сначала кодирование будет утомительным
и трудоемким. Однако после некоторой практики можно научиться
вводить и редактировать код XHTML почти так же просто, как обычный
текст.
Сохранение документа XHTML
После завершения кодирования документа XHTML необходимо
сохранить его, чтобы затем его можно было извлечь и вывести в
браузере. Документ можно сохранить на рабочем столе, на сменном
устройстве хранения или в папке на жестком диске.
Для документа Web можно выбрать любое имя файла, хотя оно не
должно включать никаких пробелов или специальных символов.
Документ необходимо также сохранять с расширением файла .htm. Это
расширение идентифицирует документ как страницу Web, чтобы браузер
мог ее распознать. При использовании в качестве редактора Windows
Notepad не забудьте выбрать в качестве типа файла All Files (*.*) из
выпадающего меню. Иначе Notepad добавит расширение .txt к имени
файла, и документ будет неправильно опознаваться браузером.

44

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рис. 1.17. Сохранение документа XHTML в Notepad
Вывод документа XHTML
Сохраненный документ HTML с расширением .htm готов теперь для
просмотра в браузере. Можно открыть документ сразу в браузере, делая
двойной щелчок на его значке, или можно открыть браузер и
воспользоваться меню File, чтобы найти соответствующий диск, папку и
документ. Когда документ загружается в браузер, появляющийся в поле
адреса браузера адрес указывает этот путь доступа к документу.
Редактирование документа и вывод
При создании длинной страницы Web нет необходимости кодировать
всю страницу сразу. Можно закодировать несколько строк, сохранить
документ, просмотреть страницу в браузере, а затем вернуться к
составлению следующего фрагмента кода. Другими словами, можно
переключаться между редактором и браузером при составлении
страницы Web. Начните просто с описанного ранее шаблона документа,
чтобы создать совершенно правильный валидный документ Web.
Чтобы облегчить такую разработку страницы, оставьте окна редактора и
браузера открытыми на рабочем столе, где они будут доступны в панели
45

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

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

Рис. 1.18. Редактор страницы Web и браузер, открытые на рабочем
столе
Между прочим, существует быстрый способ открыть документ Web для
редактирования в Notepad при просмотре страницы в окне браузера. В
меню браузера View выберите команду Source, что означает просмотр
исходного кода страницы XHTML. Страница автоматически откроется в
редакторе Notepad, как показано на рисунке 1.19.
46

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рис. 1.19. Открытие редактора Notepad из браузера

Создание первой страницы Web
Пришло время создать первую страницу Web и вывести ее в браузере.
Эта страница не очень интересная, но она позволит познакомиться с
процессом кодирования, редактирования, сохранения и вызова
страницы для вывода в браузере.
Поэтому начнем с открытия редактора Notepad и ввода текста и кода,
показанного на следующем листинге.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Первая страница Web</title>
47

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

</head>
<body>
<!-- Здесь находится параграф для вывода в браузере -->

<p>Это первая попытка создать страницу Web. Я еще не совсем понимаю,
но это, кажется, достаточно просто. Возможно, когда я немного лучше узна
я буду чувствовать себя уверенно и смогу поразить всех своим мастерством
</body>
</html>
Листинг 1.13. Код первой страницы Web

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

48

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

Рис. 1.20. Кодирование страницы Web в Notepad

Комментарии в XHTML
Для описания различных разделов документа Web желательно помещать
в нем комментарии, которые являются общими описаниями или
пояснениями кода XHTML. Они служат полезным напоминанием
назначения или содержания разделов кода, когда придется через какое-то
время вернуться к редактированию документа. В приведенном выше
примере в начале раздела <body> был помещен общий комментарий.
<!-- Здесь находится параграф для вывода в браузере -->
Комментарии помещают между парой тегов <!-- и -->. Эти теги
могут окаймлять однострочный комментарий, как показано выше, или
несколько строк кода XHTML. Любой код или текст, находящийся между
этими символами, игнорируется браузером и не выводится на странице.
Кроме

размещения примечаний

и
49

заметок в

документе,

теги

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

комментариев можно использовать для временного отключения вывода
браузером части кода. Это часто бывает полезно во время "отладки"
страницы, то есть во время поиска ошибок с помощью частичного
удаления разделов кода, пока проблема не будет изолирована.
Второй способ комментирования небольшого фрагмента кода HTML
состоит в использовании в теге восклицательного знака ( !). Этот
символ можно задействовать для приостановки вывода целого тега добавляя его в начале тега, - или одного из его атрибутов - добавляя его
перед атрибутом. В следующем примере этот символ применяется для
удаления форматирования строки текста, комментируя обрамляющий
тег <p>.
<!p style="font-family:arial; color:red;">
Вывести эту строку красным цветом.
<!/p>
Кстати, восклицательный знак не является формальным, утвержденным
символом комментария. Можно использовать любой другой символ, так
как он просто искажает имя тега или имя атрибута, делая его
бессмысленным для браузера. Восклицательный знак применяется здесь
просто для совместимости со стандартным тегом комментирования.

Сохранение и вывод первой страницы Web
После кодирования страницы сохраните документ, чтобы его можно
было вызвать в браузере. Место сохранения документа зависит от
рабочей среды. При работе на стандартном настольном ПК сохраните
документ на дискете или в папке на жестком диске. Не забудьте также
сохранить документ со специальным расширением файла .htm.
Сохраните этот конкретный документ с именем FirstPage.htm, или
любым другим именем на свое усмотрение.
Теперь откройте браузер и загрузите страницу. Желательно оставить
редактор открытым на рабочем столе, так как это будет удобно для
внесения исправлений или изменений на странице. Если документ
совпадает с вышеприведенным примером, то страница Web должна
появиться в окне браузера так, как показано ниже. Эта страница была
50

Д.Р. Адамс, К.С. Флойд

Основы работы с XHTML и CSS

загружена с локального жесткого диска и выводится в Internet Explorer.

Рис. 1.21. Вывод в браузере первой страницы Web
Обратите внимание, что этот вывод браузера не является
полноразмерным окном, поэтому длины строк могут выглядеть немного
иначе. Это различие иллюстрирует тот факт, что браузер выводит
документ в соответствии с размерами своего окна вывода. Длины строк
любого текста на странице будут согласованы и перенесены по словам в
соответствии с шириной окна, независимо от размера окна.
Теперь, имея общее представление о процессе кодирования и просмотра
страниц Web, можно начинать изучать теги XHTML, чтобы сделать свои
документы более привлекательными. В следующем разделе учебника
представлены теги, которые управляют структурой страниц Web и
методами вывода блоков текста.

51

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Базовая компоновка документа
Основное назначение тегов XHTML состоит в структурировании и
организации текстового и графического содержимого (контента) на
странице Web. Они не предназначены для оформления или украшения
контента, а только для его организации, чтобы эта информация была
представлена в некотором визуальном порядке для облегчения чтения и
в логическом порядке для улучшения понимания. Лекция знакомит с
основными тегами, которые вносят порядок компоновки в содержимое
страницы

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

Вывод в редакторе и браузере
Вспомните, что создание страницы Web начинается со стандартной
настройки документа, которая задает его общую структуру. Шаблон
такой страницы показан ниже.
<?xml version="1.0" encoding="UTF-8"?>
52

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>здесь находится заголовок страницы </title>
</head>
<body>
.
здесь находится содержимое страницы
.
</body>
</html>
Листинг 2.1. Шаблон страницы Web

Каждая создаваемая страница начинается с этого кода. Необходимо
написать подходящее название для страницы в теге <title>. Этот
текст будет выводиться в панели заголовка браузера при открытии
страницы. Затем внутрь тега <body> вносится информационное
содержимое. В окне браузера выводится только та информация, которая
присутствует в теле документа. Именно внутри тега <body> помещают
текст и графические изображения вместе с тегами XHTML для их
упорядочивания и организации.
Важно понимать, что форматирование страниц Web происходит только
за счет тегов XHTML. Чтобы подчеркнуть этот момент, рассмотрим
заголовок и три параграфа, показанные в редакторе Notepad на рисунке
2.1. Задача состоит в том, чтобы вывести эту информацию в браузере в
такой же общей форме.

53

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 2.1. Документ Web, представленный в редакторе Notepad
Заголовок, имеющийся вверху документа, и все параграфы отделяются
друг от друга пустыми строками. Надо постараться ввести информацию
в редакторе в том же виде, как она представлена в браузере. Необходимо
следить за тем, чтобы сам вывод в редакторе был аккуратен и легко
читаем. Однако форматирование редактора мало связано с тем, как
введенная информация выводится на странице Web.
Если этот документ сохранить как файл XHTML, а затем открыть в
браузере, то он будет выведен, как показано на рисунке 2.2.

54

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Форматированный текст
Мы можем очень легко вернуться в редактор Notepad и вставить
несколько основных тегов XHTML для организации текста для вывода в
браузере. В данном случае, как показано на рисунке 2.3, теги параграфов
(контейнерные теги, кодируемые как <p> ) ограничивают отдельные
параграфы, а тег заголовка (контейнерный тег, кодируемый как <h2> )
55

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

обрамляет строку заголовка.

Рис. 2.3. Форматированный документ Web в редакторе Notepad
Теперь, когда страница будет открыта в браузере, эти теги приведут к
тому, что блоки текста будут выводиться как отдельные параграфы, что
показано на рисунке 2.4. Форматирование не слишком изысканное, но
оно иллюстрирует тот факт, что компоновка элементов страницы
управляется исключительно присутствующими в документе тегами
XHTML.

56

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 2.4. Вывод форматированной страницы Web в браузере
Несколько следующих параграфов рассматривают основное множество
тегов XHTML для организации порядка и структурного форматирования
содержимого страницы. Прежде всего, представлена организация
текста, затем вводятся основные теги для добавления графических
изображений и ссылок. Примеры достаточно простые с точки зрения
оформления. Однако в данный момент необходимо изучить структурные
аспекты проектирования страниц. Средства оформления будут
изучаться в дальнейшем.

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Тег <p>
Для форматирования блока текста как параграфа этот текст
ограничивается с помощью тега <p> (paragraph). Общая форма этого
тега представлена в листинге 2.2.
<p>текст</p>
Листинг 2.2. Общая форма тега <p>

Между открывающим и закрывающим тегами может находиться любой
объем текста. При выводе в браузере вложенный текст содержит только
односимвольные пробелы и перед ним и после него следует пустая
строка, чтобы отделить от окружающего содержимого страницы.
Результат действия тегов <p> на странице Web можно видеть на
показанном ранее рисунке 2.4, который выводит текст в виде четырех
отдельных параграфов. Эти теги добавляют в редакторе, как показано
ниже.
Компоновка страницы Web
<p>Страница Web начинается с предварительных разделов кода, которые
определяют документ XHTML. Также включается заголовок, который
появляется в панели заголовка браузера.</p>
<p> Все содержимое, которое появляется в окне браузера, кодируется в
разделе тела страницы. Текстовая информация, графические изображения,
ссылки и другое содержимое страницы добавляются на страницу и
ограничиваются тегами XHTML, чтобы упорядочить и структурировать их
представления. </p>

<p>Важно отметить, что содержимое организовано на странице только с
помощью тегов XHTML, закодированных в документе. Иначе все содержим
выводится как одна неформатированная строка текста. </p>
Листинг 2.3. Страница Web, форматированная тегами параграфов

Текст теперь легко читается, так как в его информационное содержание
58

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

внесена некоторая организация. Отметим, что смежные параграфы
разделяются одиночными пустыми строками, несмотря на то, что
каждый тег <p> порождает пустую строку перед и после параграфа.
Браузер объединяет пустую строку, которая следует за параграфом, и
пустую строку, которая предшествует следующему параграфу, в одну
строку.
(Отметим, что в тексте книги полное кодирование страницы Web может
отсутствовать, чтобы сосредоточиться на обсуждаемом коде. Тем не
менее,
подразумевается,
что
показанный
код
окружен
предварительными строками страницы до тега <body> и
закрывающими тегами </body> и </html>.)

Блочные и линейные теги
Тег <p> называется блочным (block-level) тегом. Он создает разрыв
строки и начинает выводить свое содержимое в браузере с новой
строки. После вывода его содержимого создается еще один разрыв
строки, определяя блок текста, выделенного в браузере среди
окружающего содержимого. Все объединения контента на странице Web
должны появляться внутри блочных тегов.
Блочный тег отличается от линейного (in-line) тега, который не
порождает разрыв строки. Включенное в него содержимое встраивается
в строку в потоке элементов страницы, отделяемых обычно от
окружающего содержимого одиночным пробелом. Большинство тегов
XHTML являются линейными тегами.
Важно помнить об этом различии между блочными и линейными
тегами. Согласно стандартам XHTML 1.1, все содержимое должно
кодироваться внутри блочных тегов, чтобы идентифицировать эти
отдельные блоки контента, которые составляют страницу. Точно так же
все линейные теги должны располагаться внутри блочных тегов; то
есть, линейное содержимое должно помещаться внутри блока текста, а
не появляться независимо вне блока текста. В данном учебнике
различные теги определяют как блочные и линейные, и постоянно
напоминается о необходимости всегда размещать линейные элементы
страницы внутри блочных элементов страницы.
59

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Исключенные теги и атрибуты
XHTML является заменой более старого языка HTML. Однако он
сохраняет многие средства кодирования HTML, чтобы облегчить
переход между двумя языками. Среди оставленных имеется несколько
тегов и атрибутов тегов, которые могут кодироваться внутри тегов для
изменения их характеристик вывода по умолчанию. Например, тег <p>
включает атрибут align для управления выравниванием текста. При
задании этого атрибута, например, <p align="center">, текст
каждой строки параграфа будет выровнен по центру, а не по левому
краю.
В XHTML большинство атрибутов тегов были постепенно сокращены
или исключены. Они все еще распознаются браузерами ради
совместимости с HTML, но настоятельно рекомендуется прекратить их
использование. Вместо этого для той же цели должны использоваться
более новые объявления таблиц стилей. Однако исключенные атрибуты
описаны в данном учебнике, так как они могут встретиться на
существующих страницах Web, хотя большинство атрибутов
недействительны в стандартах XHTML 1.1.
Некоторые теги HTML также исключены в XHTML. Исключенные теги
также будут представлены, так как они, скорее всего, еще встречаются на
существующих страницах. Эти теги могут правильно выводиться в
современных браузерах, но вместо них необходимо использовать более
современные средства.

Исключенный атрибут align
По умолчанию текст параграфа выводится в браузере с переносом слов
и выровненным по левому краю страницы. Однако можно выровнять
текст по правому краю, центрировать его или выровнять все строки по
обоим краям. Эти варианты выравнивания определяются атрибутом
align внутри тега уровня блока. Общая форма кодирования этого атрибута
вместе с его возможными значениями показана ниже:
align="left|center|right|justify"
60

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Ключевому слову align присваивается одно из значений
выравнивания в кавычках. Например, следующий код центрирует
заголовок предыдущего примера страницы и выравнивает все строки
параграфа по обоим краям. Вывод в браузере показан на рисунке 2.5.
<h2 align="center">Компоновка страницы Web</h2>

<p align="justify">Страница Web начинается с предварительных разделов код
которые определяют документ XHTML. Также включается заголовок, которы
появляется в панели заголовка браузера.</p>

<p align="justify"> Все содержимое, которое появляется в окне браузера,
кодируется в разделе тела страницы. Текстовая информация, графические
изображения, ссылки и другое содержимое страницы добавляются на стран
и ограничиваются тегами XHTML, чтобы упорядочить и структурировать и
представления. </p>

<p align="justify">Важно отметить, что содержимое организовано на страниц
только с помощью тегов XHTML, закодированных в документе. Иначе все
содержимое выводится как одна неформатированная строка текста. </p>
Листинг 2.4. Страница Web, форматированная с помощью тегов
параграфа с атрибутом align

61

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 2.5. Страница Web, форматированная с помощью выравнивания
параграфов
Помните только, что атрибут align является исключенным в некоторых
стандартах XHTML. Он представлен здесь как быстрый и простой
способ выравнивания параграфов и будет служить удобным, но
временным методом оформления, пока мы не научимся кодировать и
использовать таблицы стилей на страницах Web.

Тег <blockquote>
Тег <blockquote> предлагает способ создания отступа для блока
текста, чтобы сместить его относительно окружающего содержимого с
целью выделения, как делается при использовании цитат в кавычках,
откуда тег и получил свое имя. Этот контейнерный тег смещает
вложенный текст на фиксированное число пикселей (примерно на 40)
от левого и правого края. Вложенный текст переносится по словам и
выделяется пустыми строками перед и после текста. Общая форма тега
62

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<blockquote> показана в листинге 2.5.
<blockquote>
<p>текст</p>
</blockquote>
Листинг 2.5. Общая форма тега <blockquote>

Отметим, что тег <blockquote> не считается тегом блочного уровня
в стандартах XHTML 1.1, хотя и создает разрывы строк и пустые строки
перед и после вложенного текста. Он не заменяет тег блочного уровня
<p>, который требуется для вложения блока текста и смещения его
относительно окружающего содержимого. Тег <blockquote> просто
окружает блок параграфа, включая его в обрамляющий тег <p>.
В следующем примере тег <blockquote> смещает средний параграф
относительно окружающего текста. Вывод браузера показан на рисунке
2.6.
<p>Здесь три параграфа. Первый параграф форматирован с помощью
стандартного тега параграфа и выровнен относительно левого края
страницы.</p>

<blockquote><p>Второй параграф форматирован с помощью тега blockquote
чтобы сместить его левую и правую стороны
примерно на 40 пикселей от краев
страницы.</p></blockquote>
<p>Последний параграф форматирован как первый. Он помещен в
стандартный тег параграфа и прижат к левому краю страницы.</p>
Листинг
2.6.
<blockquote>

текста,

форматированный

63

с

помощью

тега

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 2.6. Применение для параграфа тега <blockquote>
Приведенная выше запись кода в редакторе показывает параграф
цитирования смещенным и с пустыми строками, аналогично тому, как
он выводится в браузере. Как мы знаем, форматирование редактора не
требуется и не оказывает влияния на вывод браузера, который
управляется только тегами XHTML. Однако лучше сделать запись в
редакторе похожей на вывод браузера, чтобы можно было визуально
оценить соотношения между выводимыми частями содержимого
страницы.
Значительно
легче
находить пропущенные
или
неправильные теги, когда запись страницы в редакторе хорошо
организована.

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

2.7.
<p>Здесь пять параграфов. Первый параграф форматирован стандартным
тегом параграфа и прижат к левому краю страницы.</p>

<blockquote>
<p>Второй параграф форматирован с помощью тега blockquote, чтобы
сместить его края слева и справа примерно на 40 пикселей от краев
страницы.
</p>

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

<p>Этот параграф выравнивается как второй параграф, так как он тож
находится внутри внешнего тега blockquote.</p>
</blockquote>

<p>Пятый параграф кодируется как первый. Он помещен внутри стандартн
тега параграфа и прижат к левому краю.</p>
Листинг 2.7. Блоки
текста,
вложенных тегов <blockquote>

65

форматированные

с

помощью

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 2.7. Параграфы, форматированные с помощью вложенных тегов
<blockquote>
В этом примере два тега <blockquote> вложены друг в друга, то
есть тег <blockquote> появляется внутри тега <blockquote>.
Внешний тег <blockquote> охватывает и смещает три своих
вложенных текстовых блока примерно на 40 пикселей от левого и
правого края страницы. Внутренний тег <blockquote> смещает свой
вложенный текст еще примерно на 40 пикселей от краев, определенных
внешним тегом. Любые дополнительные вложенные теги еще в
большей степени смещают свой вложенный текст от предыдущих
границ.
При вложении тегов <blockquote> друг в друга проверяйте, что
открывающий и закрывающий теги правильно согласованы - что
внутренние теги полностью закрыты внутри своих следующих внешних
ближайших охватывающих тегов.
Как и в случае тегов <p>, смежные теги <blockquote> заменяют
предшествующую и последующую пустые строки одной пустой строкой.
66

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Перенос строки
Кодирование параграфов с помощью тегов <p> является наиболее
распространенным методом структурирования текста на странице Web.
Большинство страниц Web - это текстовые страницы, и параграфы
являются удобными и легко читаемыми методами представления текста.
Однако существуют и другие средства структуризации текста.

Тег <br/>
Тег <br/> (перенос строки) заставляет браузер закончить строку текста
и продолжить вывод на следующей строке в окне браузера. Он не
создает, как в случае параграфов, пустые строки перед и после
законченной строки текста. Общая форма для тега переноса строки
показана в листинге 2.8.
<br/>
Листинг 2.8. Общая форма тега <br/>

Тег <br/> не является контейнерным тегом; он не охватывает текст и
не имеет дополнительного закрывающего тега. Этот пустой тег просто
помещают внутри текста в том месте, где должен произойти разрыв
строки. Этот тег удобно применять для вывода списков объектов, стихов
или других объединений отдельных текстовых строк через один
интервал. Следующий код использует перенос строк, например, для
завершения отдельных строк стихотворения, помещенного в тег
<blockquote>.

<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду
<blockquote>
<p>Была у Мери овечка,<br/>
67

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Была ее шерсть снежно-белой;<br/>
И куда бы ни шла Мери,<br/>
Овечка бежала за ней.</p>
</blockquote>

<p>У Мери была ужасная жизнь. Ужасно трудно сходить на свидание, когда
вокруг тебя все время скачет овечка.</p>
Листинг 2.9. Блок текста, форматированный с помощью переноса
строк

Рис. 2.8. Использование переноса строк для вывода текста через один
интервал
Четыре строки стихотворения помещены внутрь параграфа blockquoted,
чтобы сместить их и отделить от окружающих параграфов. Каждая
строчка стихотворения появляется на отдельной строке текста через
один интервал от предыдущей строки. Важно помнить, что тег <br/>
является линейным тегом, а не блочным; поэтому согласно стандартам
XHTML 1.1 он не может появиться в строке сам по себе или как
автономный тег. Он должен помещаться внутрь тега <p> или другого
68

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Несколько переносов строк
При использовании тегов <p> и <blockquote> одна пустая строка
появляется перед и после вложенного текстового блока с отступами.
Когда вставляют теги <br/>, чтобы закончить строки текста, никакие
интервалы между строками не появляются. Однако могут быть
ситуации, когда желательно вставить дополнительные пустые строки,
чтобы увеличить вертикальный интервал между строками текста или
между другим содержимым, присутствующим на странице. Для этой
цели можно использовать тег <br/>.
Ниже представлена запись предыдущей страницы с дополнительными
пустыми строками перед и после цитированного стихотворения. Эти
пустые строки создаются добавлением тегов <br/>, чтобы выполнить
дополнительные переносы строк. Вывод браузера показан на рисунке
2.9.

<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду
преследовала.<br/><br/><br/></p>
<blockquote>
<p>Была у Мери овечка,<br/>
Была ее шерсть снежно-белой;<br/>
И куда бы ни шла Мери,<br/>
Овечка бежала за нею.</p>
</blockquote>

<p><br/>У Мери была ужасная жизнь. Ужасно трудно сходить на свидание,
когда вокруг тебя все время скачет овечка.</p>
Листинг 2.10. Страница, форматированная с помощью нескольких
переносов строк

69

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 2.9. Использование переноса строк для увеличения вертикального
интервала на странице
Каждый тег <br/> вставляет на странице дополнительный перенос
строки. Поэтому можно писать несколько тегов <br/> подряд, чтобы
получить несколько пустых строк на странице.
Отметим в предыдущем примере, что теги <br/> кодируются внутри
первого и последнего параграфов - внутри тегов блочного уровня <p>
для совместимости со стандартами XHTML 1.1. Их можно было бы
поместить также в начале и конце параграфа стихотворения внутри тега
<blockquote>. Обратите внимание, что требуется три тега <br/> в
конце первого параграфа, чтобы соответствовать числу пустых строк,
заданных одним тегом <br/> в начале последнего параграфа. Это
является особенностью способа, которым браузер обрабатывает тег в
начале и конце параграфов. Может понадобиться эксперимент, чтобы
определить число тегов, нужное для создания требуемого числа пустых
строк.

70

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Исключенный тег <br>
Все браузеры все еще поддерживают тег <br>, который кодируется без
закрывающей косой черты, требуемой для пустого тега XHTML. Будущие
версии XHTML не будут поддерживать такой тег, поэтому лучше его не
использовать.

Заголовки
Появляющийся на странице Web текст выводится используемым по
умолчанию типом шрифта и размером, если не определено иное.
Большинство браузеров выводят текст шрифтом или семейством
шрифтов Times New Roman, размером примерно 12 пунктов. Чтобы
внести на страницу визуальное разнообразие, для различных разделов
документа часто выбирают различные типы и размеры шрифтов. Эта
тема будет подробнее рассмотрена в дальнейшем, скажем лишь, что
существуют простые способы изменения размера шрифта, позволяющие
добавлять на страницу заголовки различного уровня.
Тег <hn> (heading) является блочным тегом, который ограничивает
строку текста для вывода одним из шести стилей заголовка. Его общая
форма показана В листинге 2.11.
<hn>Текст заголовка</hn>
Листинг 2.11. Общая форма тега <hn>

Число n в теге может изменяться от 1 (самый крупный) до 6 (самый
мелкий). Эти шесть уровней заголовков приведены в следующем
примере и выводятся в браузере, как показано на рисунке 2.10.
Стандартный параграф выводится для сравнения.
<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>
71

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<p>Обычный текстовый параграф.</p>
Листинг 2.12. Создание заголовков с помощью тега <hn>

Рис. 2.10. Вывод в браузере тегов <hn>
Заголовки выводятся полужирными символами используемого по
умолчанию шрифта, на отдельной строке с предшествующей и
последующей одиночной пустой строкой. Таким образом, тег <hn>
нельзя использовать для изменения размера текста в середине строки
или середине параграфа, так как он создает перенос строки перед и
после своего вложенного текста. Он применяется для блочного
автономного текста, наиболее часто - в качестве заголовков
содержимого для идентификации и выделения разделов страницы Web.

Исключенный атрибут align
Заголовки можно выравнивать слева (по умолчанию) или справа, или
они могут выравниваться по центру строки с помощью атрибута
72

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

align="left|center|right"
тега <hn>. Следующий код, например, центрирует заголовок в
горизонтальном направлении между краями страницы.
<h1 align="center">Центрированный заголовок</h1>
Так как align является исключенным атрибутом в стандартах XHTML,
он должен использоваться для выравнивания заголовков только в
качестве временного метода. В дальнейшем в учебнике рассмотрены
стандарты таблиц стилей для горизонтального выравнивания текста на
странице.

Горизонтальная линейка
Основным способом выделения и идентификации разделов страницы
Web является применение заголовков и подзаголовков, кодируемых с
помощью тегов <hn>. Различные части страницы Web можно также
визуально разделить, проводя между ними горизонтальные линейки.
Это делается с помощью блочного тега <hr/> (horizontal rule) для
вычерчивания через страницу линии разделения. Общий формат этого
тега показан в листинге 2-13.
<hr/>
Листинг 2.13. Общая форма тега <hr/>

Тег <hr/> вызывает перенос строки и вывод линейки на новой
отдельной строке. По умолчанию используется линейка толщиной 2
пикселя и проходящая по всей ширине окна браузера. Линейка,
показанная на рисунке 2.11, порождается тегом <hr/>, записанным на
отдельной строке, как показано на листинге 2-14.
<h2>Горизонтальная линейка</h2>

<p>Горизонтальная линейка используется для разделения отдельных частей
содержимого страницы. Далее показана используемая по умолчанию
линейка.</p>
73

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<hr/>

<p>Линейка имеет толщину 2 пикселя и проходит по ширине через все окн
браузера. Перед и после нее вставляется пустая строка.</p>
Листинг 2.14. Код для создания горизонтальной линейки между
двумя параграфами

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

Исключенные тег <hr> и его атрибуты
Тег <hr> (без закрывающей косой черты) пока еще распознается
браузерами и создает такую же линейку, как и тег <hr/>. Он не
74

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

действителен согласно стандартам XHTML 1.1. Тег может включать
также следующие атрибуты для оформления линейки, эти атрибуты
распознаются также в теге <hr/>, но являются исключенными.
align="left|center|right"
size="n"
width="n|n%"
noshade
color="цвет"
Атрибут align смещает линейку в строке влево (по умолчанию), по
центру или вправо. Атрибут size задает толщину горизонтальной
линейки в пикселях. Атрибут width задает ширину линейки в пикселях
или как процент от ширины окна. Линейка может выводиться как
сплошная полоса при задании noshade (без значения) и с цветом,
определяемым атрибутов color. Значение цвета задается как название
цвета или как шестнадцатеричное значение, определение которого будет
рассмотрено в дальнейшем. Следующий код задает нестандартную
линейку:
<hr align="center" size="5" width="50%" noshade color="gray">

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

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

75

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Неупорядоченные списки
Неупорядоченный список является последовательностью элементов,
перед которыми стоит символ маркера, отделяемой от окружающего
текста пустыми строками. Список выводится через один интервал и с
отступом от левого края. Пример вывода неупорядоченного списка в
браузере показан в листинге 2.15.
x Элемент списка 1
x Элемент списка 2
x Элемент списка 3
Листинг 2.15. Вывод в браузере неупорядоченного списка

Неупорядоченный
список создается
с
помощью
блочного
контейнерного тега <ul>, который ограничивает элементы списка,
определяемые блочными контейнерными тегами <li> (list item). Общая
форма неупорядоченного списка показана в листинге 2.16.
<ul>
<li>элемент списка</li>
<li>элемент списка</li>
...
</ul>
Листинг 2.16. Общая форма неупорядоченного списка

Например, маркированный список, показанный выше в листинге 2.15,
задается следующим кодом.
<ul>
<li> Элемент списка 1</li>
<li> Элемент списка 2</li>
<li> Элемент списка 3</li>
</ul>
Листинг 2.17. Код неупорядоченного списка

Элементы списка выводятся через один интервал и содержат в начале
символ маркера. Если текст элемента списка не умещается по ширине
76

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

страницы, то он переносится по словам и делается отступ за символ
маркера. Элементы могут заключаться в теги <p> (или между
элементами могут вставляться теги <br/> ), чтобы увеличить
строчный интервал между элементами. Следующий список, например,
обрамляет элементы списка тегами <p>, чтобы
создать
дополнительные пустые строки между записями. Вывод браузера
показан в листинге 2.19.

<ul>
<li><p>Это первый элемент списка. Текст, идущий после символа маркера,
переносится по словам внутри маркера. Теги параграфа используются для
вставки пустых строк между элементами списка.</p></li>
<li><p>Это второй элемент списка. Текст, идущий после символа маркера,
переносится по словам внутри маркера. Теги параграфа используются для
вставки пустых строк между элементами списка.</p></li>
</ul>
Листинг 2.18. Код неупорядоченного списка параграфов текста

x Это первый элемент списка. Текст, идущий после символа маркера, перен
по словам внутри маркера. Теги параграфа используются для вставки пуст
строк между элементами списка.

x Это второй элемент списка. Текст, идущий после символа маркера, перен
по словам внутри маркера. Теги параграфа используются для вставки пуст
строк между элементами списка.
Листинг 2.19. Вывод
параграфов текста

в

браузере

неупорядоченного

списка

Вложенные неупорядоченные списки
Неупорядоченные списки можно вкладывать друг в друга. Например,
маркированный список внутри второго маркированного списка,
который входит в третий маркированный список, создается следующим
кодом и выводится в браузере, как показано в листинге 2.21. Отметим,
что вложенный неупорядоченный список является частью элементов
списка своего объемлющего списка. То есть, теги <ul>...</ul>
77

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

вложенного списка находятся внутри пары тегов <li>...</li>
охватывающего списка.
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2
<ul>
<li>Элемент списка 2a</li>
<li>Элемент списка 2b
<ul>
<li>Элемент списка 2b1</li>
<li>Элемент списка 2b2</li>
</ul>
</li>
</ul>
</li>
<li>Элемент списка 3</li>
</ul>
Листинг 2.20. Код вложенных неупорядоченных списков

x Элемент списка 1
x Элемент списка 2
x Элемент списка 2a
x Элемент списка 2b
x Элемент списка 2b1
x Элемент списка 2b2
x Элемент списка 3
Листинг
списков

2.21.

Вывод

в

браузере

вложенных

неупорядоченных

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

обычном потоке текста на странице.

Исключенный атрибут type
Атрибут type="disc|circle|square" можно задействовать
внутри открывающего тега <ul>, чтобы определить стиль
применяемого символа маркера, если он отличается от используемого
по умолчанию диска. Текущие стандарты XHTML не рекомендуют
пользоваться атрибутом type и предоставляют показанные далее
другие средства для определения символов маркеров.

Упорядоченные списки
Упорядоченный список является последовательностью элементов,
перед которыми стоят последовательные числа, выделенной из
окружающего текста одиночными пустыми строками. По умолчанию
список нумеруется последовательными десятичными числами, начиная
с 1 и до последнего элемента списка.
Элементы списка выводятся через один интервал и смещаются от
левого края таким же образом, как и неупорядоченный список. Пример
упорядоченного списка показан ниже в листинге 2.22.
1. Элемент списка 1
2. Элемент списка 2
3. Элемент списка 3
Листинг 2.22. Вывод упорядоченного списка в браузере

Вывод упорядоченного списка в браузере.
Упорядоченный список создается с помощью контейнерного тега <ol>,
который
обрамляет
элементы
списка,
идентифицируемые
контейнерными
тегами
<li>.
Общая
форма
кодирования
упорядоченного списка показана в листинге 2.23.
<ol>
79

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<li>элемент списка </li>
<li>элемент списка </li>
...
</ol>
Листинг 2.23. Общая форма упорядоченного списка

Например, упорядоченный список, показанный выше в листинге 2.22,
задается следующим кодом.
<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ol>
Листинг 2.24. Код упорядоченного списка

Элементы списка выводятся через один интервал и с переносом слов
внутри символа нумерации. Элементы списка могут содержать теги
<p> или разделяться тегами <br/> для увеличения межстрочного
интервала между элементами.

Вложенные упорядоченные списки
Упорядоченные списки можно вкладывать друг в друга, при этом
подчиненные
списки
смещаются
относительно
следующего
охватывающего списка. Все вложенные упорядоченные списки
используют одну и ту же десятичную систему нумерации,
начинающуюся с десятичной 1. Следующий код, например, создает
нумерованные списки, показанные в листинге 2.26.
<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 2
<ol>
<li>Элемент списка 2.1</li>
<li>Элемент списка 2.2</li>
</ol>
80

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</li>
<li>Элемент списка 3</li>
</ol>
Листинг 2.25. Код вложенных упорядоченных списков

1. Элемент списка 1
2. Элемент списка 2
1. Элемент списка 2.1
2. Элемент списка 2.2
3. Элемент списка 3
Листинг
списков

2.26.

Вывод

в

браузере

вложенных

упорядоченных

Отметим, что когда упорядоченные списки содержатся внутри других
упорядоченных списков, никакие пустые строки не отделяют
внутренние списки, как это происходит, когда список появляется внутри
обычного потока текста страницы.

Исключенные атрибуты type и start
Атрибут type может использоваться внутри открывающего тега <ol>,
чтобы определить один из пяти различных символов нумерации.
Значением атрибута может быть type="1" для десятичных чисел (по
умолчанию), type="A" для букв верхнего регистра, type="a" для
букв нижнего регистра, type="I" для римских цифр верхнего
регистра и type="i" для римских цифр нижнего регистра. Например,
тег ol type="A" порождает следующий список упорядоченных по
алфавиту элементов.
A. Элемент списка 1
B. Элемент списка 2
C. Элемент списка 3
Можно определить значение, начинающее последовательность
упорядоченного списка, задавая необязательный атрибут start="n"
для тега <ol>. Начальное значение последовательности требуется,
например, когда упорядоченный список прерывается на странице
81

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

другими элементами.
Как показано ниже, два последовательно упорядоченных списка
разделены параграфом. Первый список начинается с "A" и
продолжается до "E", так как в списке имеется пять элементов. Второй
список необходимо начать с шестой буквы "F". Если начальное
значение не определено, то упорядочивание снова начнется с "A".
Это начало списка:
A. Элемент списка A
B. Элемент списка B
C. Элемент списка C
D. Элемент списка D
E. Элемент списка E
Это продолжение списка:
F. Элемент списка F
G. Элемент списка G
H. Элемент списка H
I. Элемент списка I
J. Элемент списка J
Код этого списка показан ниже. Первый упорядоченный список
использует буквы верхнего регистра ( type="A" ), начиная с "A" и
заканчивая "Е". Второй список переопределяет эту последовательность
по умолчанию, определяя start="6" в открывающем теге <ol>.
Таким образом, второй список последовательно упорядочивается от
"F" до "J".
<p>Это начало списка:</p>
<ol type="A">
<li>Элемент списка A</li>
<li>Элемент списка B</li>
<li>Элемент списка C</li>
<li>Элемент списка D</li>
<li>Элемент списка E</li>
82

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</ol>
<p>Это продолжение списка:</p>
<ol type="A" start="6">
<li>Элемент списка F</li>
<li>Элемент списка G</li>
<li>Элемент списка H</li>
<li>Элемент списка I</li>
<li>Элемент списка J</li>
</ol>

Списки определений
Список определений является последовательностью терминов и
определений, отделенных от окружающего текста пустыми строками.
Термины в списке прижаты к левому краю; определения на следующих
строках смещены от края и используют перенос слов. Пример списка
определений показан в листинге 2.27.

Термин 1
Это определение Термина 1. Определяемый термин располагается на от
строке и за ним следует блок текста определения. Определение использу
перенос слов и смещено от края.
Термин 2
Это определение Термина 2. Определяемый термин располагается на от
строке и за ним следует блок текста определения. Определение использу
перенос слов и смещено от края.
Листинг 2.27. Вывод в браузере списка определений

Общая форма тегов, используемых для создания списка определений,
представлена в листинге 2.28.
<dl>
<dt>Термин 1</dt>
<dd>Текст определения Термина 1</dd>
<dt>Термин 2</dt>
83

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<dd>Текст определения Термина 2</dd>
...
</dl>
Листинг 2.28. Общая форма тегов списка определений

Список определений помещается внутри тегов <dl> и содержит один
или несколько тегов <dt> (definition term), перечисляющих определяемые
элементы. С каждым определяемым термином связан тег <dd> (definition
description), содержащий определение термина.
Список определений, показанный выше в листинге 2.27, порождается
следующим кодом.

<dl>
<dt>Термин 1</dt>
<dd>Это определение Термина 1. Определяемый термин располагается на
отдельной строке и за ним следует блок текста определения.
Определение использует перенос слов и смещено от края.</dd>
<dt>Термин 2</dt>
<dd>Это определение Термина 2. Определяемый термин располагается на
отдельной строке и за ним следует блок текста определения.
Определение использует перенос слов и смещено от края.</dd>
</dl>
Листинг 2.29. Код списка определений

При выводе в браузере элементы списка выводятся через один интервал
без пустых строк между терминами. Если необходимо увеличить
межстрочный
интервал,
можно
использовать
обрамляющие
определение теги <p> или теги <br/> между ними.
Список определений, конечно, можно применять и для целей,
отличных от определения терминов. Если потребуется список
элементов (терминов), за каждым из которых следует смещенный
параграф (определение), то можно будет воспользоваться списком
определений.

Соединение страниц
84

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Первоначальной задачей Всемирной паутины (WWW) было создание
механизма нелинейного доступа к информации. Чтобы обеспечить
такой тип доступа, информация представляется в виде множества
страниц Web, затем создаются гипертекстовые ссылки (или
гиперссылки) для перемещения с одной страницы на другую в той
последовательности, которую предпочитает читатель. В дальнейшем
разновидности страничных ссылок будут рассмотрены более полно.
Здесь мы познакомимся с основной концепцией соединения и заданием
текстовых ссылок для перемещения между страницами.
Чаще всего ссылку с одной страницы на другую создают с помощью
текстовой "точки доступа" на одной странице, щелчок мышью на
которой открывает вторую страницу - она заменяет первую страницу в
окне браузера. Строка текста, которая делается чувствительной к щелчку
мыши, может быть представлена одним словом или несколькими
словами, обычно намекающими на содержимое указываемой страницы.
Как правило, на связанной странице присутствует вторая ссылка для
возврата на исходную страницу. Считается неприличным оставить
посетителей в конце последовательности ссылок без возможности
вернуться на начальную страницу.
Как иллюстрирует рисунок 2.12 две текстовые ссылки вызывают
переход на различные страницы. На связанных страницах имеются
текстовые ссылки для возврата на исходную страницу.

85

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 2.12. Текстовые ссылки между страницами

Тег <a>
Наиболее распространенным типом ссылки являются реагирующие на
щелчок мыши слово или фраза, которые переносят прямо на
указываемую страницу. Текстовая ссылка такого типа создается с
помощью обрамляющего строку тега <a>, называемого также тегом
анкера, - он определяет расположение страницы, с которой происходит
соединение. Базовый формат этого тега показан в листинге 2.30.
<a href="url">текст ссылки</a>
Листинг 2.30. Общая форма тега <a>

Атрибут href (hypertext reference) определяет адрес URL связанной
страницы. Ссылки можно делать с другими страницами на локальном
сайте Web или со страницами на удаленных сайтах в любом месте
WWW.
86

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Если страница, на которую указывает ссылка, находится в том же месте
(в том же каталоге), что и страница, содержащая ссылку, то URL
является просто именем страницы. Такая локальная ссылка называется
относительной ссылкой, так как путь доступа к указанной странице
задается относительно расположения указывающей страницы.
При указании удаленного сайта адрес URL должен быть полной ссылкой
Web, включающей протокол "http://", за которым следует имя домена
сайта. Такая внешняя ссылка называется абсолютной ссылкой, так как
путь доступа к указанной странице является полным адресом Web.
Тег <a> обрамляет строку текста, которая должна быть сделана
чувствительной к щелчку мыши и которая активирует ссылку. Обычно
текст описывает соединяемое место назначения. В качестве ссылки
можно использовать одну букву, слово, фразу, или текст любого
разумного объема. Когда происходит щелчок на этом тексте, то страница
ссылки немедленно заменяется в окне браузера страницей, на которую
указывает ссылка.
Тег <a> является линейным тегом - это означает, что он должен
появляться внутри тега <p> или другого блочного тега, чтобы
соответствовать стандартам XHTML 1.1.

Локальные ссылки
При создании сайта Web большинство создаваемых ссылок будет между
страницами этого сайта. Простейшим способом хранения этих страниц
для соединения является хранение их в одном месте, то есть в одном
каталоге на диске или на одной дискете или устройстве хранения. В
этом случае указываемый в теге <a> адрес URL является просто именем
страницы.
В примере на рисунке 2.12 показаны три страницы Web с именами
Home.htm, Organize.htm, и Supplement.htm. Страница Home.htm содержит
текстовые ссылки на две другие страницы и имеет следующий код:
<h2>Соединение со страницами Web</h2>
87

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<p>Перемещение между страницами сайта Web становится возможным с
помощью гипертекстовых ссылок. Одно или несколько слов на странице
"соединения" сделаны чувствительными к щелчкам мыши, что позволяет
читателю переходить на различные "присоединенные" страницы. Существу
две основные причины для разбиения темы на различные присоединенны
страницы Web:</p>
<p>
<a href="Organize.htm">Тематическая организация</a><br/>
<a href="Supplement.htm">Дополнительная информация</a><br/>
</p>

<p>При создании ссылок между страницами Web важно предоставить ссыл
возврата на страницы соединения. Автор страницы не должен оставлять
читателей зависшими в конце ряда ссылок, не имеющим простого способа
вернуться на домашнюю страницу. </p>
Листинг 2.31. Код для соединения страниц

Обратите внимание на строку, содержащую код
<a href="Organize.htm">Тематическая организация</a>
Тег <a> охватывает строку текста "Тематическая организация", чтобы
преобразовать ее в гиперссылку для открытия страницы Organize.htm в
окне браузера. Требуется только имя этой страницы в качестве адреса
URL в href, так как присоединенная страница находится в том же
каталоге, что и страница Home.htm, на которой создается ссылка.
Аналогично кодируется ссылка на страницу Supplement.htm. Когда
происходит щелчок на любой из этих ссылок, связанная страница
вызывается и загружается в браузер, заменяя страницу Home.htm.
Когда одна из страниц, Organize.htm или Supplement.htm, выводится в
окне браузера, можно легко вернуться на страницу Home.htm, щелкнув на
кнопке Back в панели инструментов браузера. Однако лучше
закодировать свои собственные внутренние ссылки между страницами.
То есть, обе страницы, Organize.htm и Supplement.htm, должны включать,
как показано здесь, свои собственные ссылки возврата на страницу
Home.htm.
88

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Код страницы Organize.htm показан ниже. Здесь строка текста "Вернуться
на Home" превращена в ссылку с помощью тега анкера <a>. Щелчок на
этой ссылке снова открывает страницу Home.htm в окне браузера.
Аналогичный код возврата на домашнюю страницу имеется на
странице Supplement.htm.
<h2>Тематическая организация</h2>

<p>Одной из причин разбиения рассматриваемого вопроса в Web на
отдельные страницы является слишком большой объем информации для
размещения на одной странице Web. По той же причине, почему книги дел
на главы, а главы делятся на разделы, а разделы на параграфы,
рассматриваемый вопрос в Web может понадобиться разделить на логическ
единицы, которые представлены отдельно друг от друга. Вместо
представления в виде одного непрерывного потока текста рассматриваемы
вопрос организуется в связанные фрагменты информации, которые
напоминают о своей общей структуре и предоставляют независимое чтени
отдельного частичного вопроса.</p>
<p><a href="Home.htm">Вернуться на Home</a></p>
Листинг 2.32. Код для возврата на исходную страницу

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

Удаленные ссылки
Если известен адрес URL сайта Web где-нибудь в WWW, можно сделать
ссылку на этот сайт. Этот URL обычно имеет следующую форму:
http://имя домена,
где протокол http предшествует местоположению сайта (имя домена).
Абсолютная ссылка такого вида ведет на домашнюю страницу этого
89

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

сайта. Следующий код ссылки, например, используется для перехода на
домашнюю страницу ссылка: www.google.com - http://www.google.com.
<a href="http://www.google.com">Перейти на Google</a>
Перейти на Google
Листинг 2.33. Код и вид ссылки на внешний сайт Web

Чтобы узнать URL сайта Web, зайдите просто на этот сайт и прочитайте
URL, который появится в поле адреса браузера. Скопируйте этот адрес в
атрибут href тега <a> и добавьте текст, чтобы создать реагирующую
на щелчок текстовую ссылку. Если соединиться с определенной
страницей на удаленном сайте, то за именем домена будет следовать
путь доступа через структуру каталогов к указанной странице.
Например, следующий URL указывает на страницу на сайте ссылка:
directory.google.com - http://directory.google.com, содержащую ссылки на
различные бизнес сайты и службы.
<a href="http://directory.google.com/Top/Business/">Business Sites</a>
Business Sites
Листинг 2.34. Код и
структуру каталогов

вид

ссылки

на

внешний

сайт

Web

и

Эта страница расположена в подкаталоге Business каталога Top на сайте.
Адрес URL скопирован из поля адреса браузера при выводе этой
страницы.

Исключенный атрибут target
По умолчанию страницы по ссылкам открываются в том же окне
браузера, что и страница со ссылками, заменяя ее. При соединении с
удаленной страницей существует риск, что посетители сайта будут
переходить на удаленный сайт и в результате терять контакт с исходным
сайтом. Они могут последовательно нажимать кнопку браузера Back
(Назад), чтобы вернуться на сайт, но если они посетят слишком много
страниц на удаленном сайте, то возврат на исходный сайт может быть
90

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

практически нецелесообразен. В конце концов, ваши посетители будут
потеряны на удаленном сайте.
Одним из способов решения этой проблемы является соединение с
удаленными сайтами всегда в отдельном окне браузера. Достаточно
просто открыть страницу в другом окне; добавьте просто атрибут
target="_blank" к тегу <a>, как показано ниже для уже
приведенной здесь ссылки на сайт Google.
<a href="http://www.google.com" target="_blank">Перейти на Google</a>
В этом случае посетители могут сколько угодно перемещаться по
удаленному сайту во втором окне браузера и после закрытия этого окна
сразу вернуться на страницу с исходной ссылкой в начальном окне.
Необходимо отметить, что атрибут target не соответствует
стандартам XHTML 1.1. Его использование должно рассматриваться как
временный способ открытия страниц Web в новом окне браузера. В
дальнейшем будет изложен альтернативный способ, который не
нарушает стандарты XHTML.
Создание текстовых ссылок, как описано здесь, представляет только
пару способов, которыми гиперссылки могут связывать несколько
страниц Web. В дальнейшем будут рассмотрены другие варианты
ссылок и методов соединения.

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

91

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Графические форматы
Существует три популярных графических
применяются для изображений Web.

формата,

которые

Формат GIF (Graphics Interchange Format) используется наиболее широко.
Изображения, сохраненные в этом формате, имеют расширение .gif.
Формат GIF может выводить черно-белые изображения, полутоновые
или цветные. Наиболее часто он применяется для штриховых рисунков,
логотипов, пиктограмм, и других изображений с ограниченным
набором цветов и обычно не используется для изображений с
непрерывно изменяющимися цветами, таких, как фотографии.
Формат PNG (Portable Network Graphics) был создан с целью замены
формата GIF. PNG имеет по сравнению с GIF улучшенное качество
изображений, предлагая в то же время лучшую степень сжатия. Однако
он не поддерживает анимированные изображения. Файлы PNG
используют расширение .png.
Формат JPEG (Joint Photographic Experts Group) был создан для хранения
фотографических изображений. Он может представлять миллионы
цветов и использует методы сжатия, позволяющие упаковать всю эту
информацию о цветах в файлы небольшого размера. Изображения,
сохраненные в этом формате, обычно имеют расширение файла .jpg.
На странице Web можно выводить изображения, полученные с
помощью цифровой камеры или отсканированные с фотографии, или
можно скопировать изображения из публичных коллекций репродукций
в Web. Если у вас есть программа какого-либо из популярных
редакторов графических изображений, то обычно достаточно просто
можно отредактировать, изменить размер и преобразовать цифровые
92

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

фотографии или отсканированные изображения в форматы Web. Для
вывода на своих страницах Web сохраните просто эти изображения в
формате GIF, PNG, или JPEG. Другие форматы также могут правильно
выводиться в браузере, однако большие размеры их файлов могут быть
неудобны для посетителей, которые должны будут их загружать при
доступе к Web.

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

93

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 2.13. Результаты поиска сайтов репродукций
После того как необходимое изображение найдено, его можно легко
загрузить для использования. Как показано на рисунке 2.14, сделайте
щелчок правой кнопкой мыши на изображении и выберите из
контекстного меню позицию Save Picture As (Сохранить изображение
как...). В диалоговом окне Save (Сохранить) выберите место на своем
ПК для загрузки изображения. Этим местом может быть каталог
страницы Web, на которой будет выводиться изображение, или можно
создать отдельный подкаталог для хранения таких файлов. Можно также
при желании переименовать изображение во время сохранения.
Помните об авторских правах. Для использования защищенных
авторским правом изображений необходимо получить соответствующее
разрешение.

94

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 2.14. Загрузка изображения из Web

Тег <img/>
Изображения GIF и JPEG размещают на странице Web с помощью
линейного тега <img/>. Общий формат этого тега показан ниже.
<img src="url" alt="text"/>
Листинг 2.35. Общая форма тега <img>

Тег <img/> кодируется на странице Web в том месте, в котором должно
выводиться изображение. Атрибут src задает источник или
расположение файла изображения. Если файл изображения находится в
том же каталоге, что и страница Web, на которой оно выводится, то в
качестве URL в src достаточно указать только имя файла.
Атрибут alt является обязательным в XHTML 1.1. Его значение
"text" задает краткое всплывающее описание изображения, когда
указатель мыши перемещается поверх изображения. Эта текстовая
строка выводится, когда пользователи отключают в браузере вывод
95

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

графики, задавая тем самым текстовое описание отсутствующих
изображений. Текст также может быть озвучен специальной
программой чтения, применяемой пользователями с недостатками
зрения, которые иначе не могут видеть или четко различать
изображения.
Отметим, что тег <img/> является пустым тегом; он не использует
пару из открывающего и закрывающего тегов, так как не охватывает
никакой контент. Он только помечает расположение изображения на
странице. Он, как линейный тег, должен кодироваться внутри блочного
тега, такого, как тег <p>. По умолчанию изображение выравнивается по
левому краю страницы.
Изображение JPEG, показанное на рисунке 2.15, должно находиться в
том же каталоге, что и страница Web, на которой оно выводится.
Изображение помещается на странице в месте расположения тега
<img/> с соответствующим кодом. (Если провести указатель мыши над
изображением на странице, то появится всплывающая подсказка
атрибута alt ).
<p><img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/></p>

Рис. 2.15. Код тега <img/> и вывод в браузере соответствующего
изображения
Обратите внимание, что физическое расположение изображения может
быть произвольным. На страницу помещается тег <img/>, содержащий
адрес URL файла изображения. Когда страница Web загружается в
браузер, этот URL используется для определения местоположения файла
изображения, который затем передается браузеру отдельно для вывода
на странице. Именно поэтому размер файла изображения является
96

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Исключенное выравнивание изображений
Горизонтальное положение изображения можно контролировать,
размещая тег <img/> внутри тега <p>, который выравнивает
изображение влево, вправо или центрирует на линии. Выравнивание
параграфа
может
использовать
исключенный
атрибут
align="left|center|right" тега <p>. Изображение ниже,
например, будет центрировано на отдельной линии и будет окружено
пустыми строками с помощью ограничивающего тега <p>.

<p align="center"><img src="Stonehenge.jpg" alt="Изображение Стоунхенджа "/>

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

Исключенные атрибуты width и height
Загруженное изображение может иметь размер, не соответствующий
тому, который требуется на странице. Лучшим решением будет
использование графического редактора для изменения размера или
97

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

обрезки изображения по требуемым размерам до размещения его на
странице. Альтернативное решение состоит в динамическом изменении
размеров изображения во время вывода браузера, с применением
исключенных атрибутов width и height тега <img/>.
width="n"
height="n"
Размер n задается в пикселях. Необходимо задать только одну из
размерностей, но не обе, чтобы сохранить пропорции изображения.
Браузер автоматически настроит другой размер, чтобы сохранить
правильную пропорцию изображения.
Исходный размер загруженного изображения, показанного ниже, равен
480 пикселей (ширина) на 641 пиксель (высота). Его размер изменяется
во время вывода браузера с помощью следующего тега:
<img src="Flower.jpg" alt="Изображение цветка" width="200"/>

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Использование графических изображений в качестве
ссылок
Графические изображения можно использовать в качестве ссылок таким
же образом, как и текстовые строки. В этом случае тег <img/>
помещается внутри тега <a>, чтобы сделать изображение реагирующим
на щелчок мыши и соединить со страницей или сайтом, указанными в
атрибуте href.
Следующее изображение скопировано с Web-сайта ссылка:
www.google.com - http://www.google.com и сохранено в локальном
каталоге Web. Оно размещено на странице и сделано реагирующим на
щелчок мыши ссылкой на сайт, открывающийся в отдельном окне
браузера.

<a href="http://www.google.com"><img src="Google.gif" alt="Ссылка на Google"/>

Рис. 2.16. Код и вывод в браузере изображения, используемого как
ссылка
Отметим, что приведенное выше изображение может быть окружено
рамкой. Таким же образом, как подчеркиваются текстовые строки,
используемые как ссылки, графические изображение, используемые как
ссылки, выводятся с рамкой. Рамка служит графическим индикатором
того, что изображение является ссылкой. Можно удалить рамку с
помощью исключенного атрибута border="0" тега <img/>. В
дальнейшем будут описаны более современные методы работы с
99

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

рамками.

Создание подкаталога Media
При создании все большего количества страниц Web наступает момент,
когда каталог Web начнет становиться перегруженным и
дезорганизованным. Желательно, чтобы файлы документов и
изображений, которые относятся к различным Web-сайтам или
приложениям, хранились совместно в своих собственных отдельных
подкаталогах. Такая организация облегчает поиск и работу со
взаимосвязанными файлами.
Одним из распространенных способов такой организации является
создание отдельного подкаталога в основном каталоге Web только для
графических файлов. В этом случае все страницы Web остаются в
основном каталоге Web, а все дополнительные файлы располагаются в
подкаталоге. Рисунок 2.17 показывает типичную организацию
каталогов Web, с вложенной папкой Media внутри основной папки Web.

Рис. 2.17. Структура каталога Web
100

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Если будет создана эта папка Media, то относительный URL атрибута
src тегов <img/> должен отражать эту структуру каталогов.
Например, если Page1.htm выводит изображение Pic1.gif, файл которого
расположен в папке Media, то его тег <img/> необходимо записать
следующим образом:
<img src="Media/Pic1.gif" alt="Изображение Pic1"/>
Листинг 2.36. Код для доступа к изображению, расположенному
в подкаталоге Media

Такой код указывает, что относительно каталога, где расположена
страница Page1.htm, изображение Pic1.gif расположено на один уровень
ниже в иерархи каталогов, внутри подкаталога Media. В дальнейшем
организация страниц Web и поддерживающих файлов рассматривается
подробнее. В данный момент можно начать создавать порядок в своих
файлах для Web, помещая изображения в отдельный подкаталог.

101

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Использование стилей оформления
Атрибуты
Стили форматирования можно применять с помощью атрибутов,
кодируемых в тегах XHTML. Разные теги имеют разные атрибуты,
которые определяются их спецификой и управляют внешним видом
контента страницы. В качестве простого примера можно взять
горизонтальную линейку, которая выводится через всю страницу, когда
на странице появляется тег <hr/>. Этот тег создает линию, которую
часто используют для разделения контента на странице.
------------------------------------------------------------------Листинг
линейка

3.1.

Используемая

по

умолчанию

горизонтальная

Приведенная выше линейка является используемым по умолчанию
выводом тега. Она может, однако, иметь другое представление при
задании в теге дополнительных атрибутов. Атрибут size управляет
толщиной линейки; атрибут width задает ее длину; атрибут color
задает цвет, а атрибут align определяет ее горизонтальное положение
на линии (слева на странице, справа на странице или по центру
страницы).
Атрибуты имеют общую форму кодирования: атрибут="значение"
- название атрибута и задаваемое в кавычках его значение. Ниже,
102

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

например, тег <hr/> закодирован с четырьмя атрибутами управления
характеристиками вывода, как показано на рисунке 3.1.
<hr size="10" width="50%" color="red" align="center"/>

Рис. 3.1. Красная горизонтальная линейка в 50% ширины страницы
Web
Линейка имеет толщину 10 пикселей ( size="10" ), 50% ширины
окна браузера ( width="50%" ), красный цвет ( color="red" ) и
выровнена горизонтально по центру страницы ( align="center" ).
Таким образом, значения атрибутов задают характеристики оформления
для вывода линейки отлично от ее обычного, используемого по
умолчанию оформления. В ходе изложения учебника будет
представлены различные атрибуты, связанные с различными тегами в
качестве параметров оформления этих тегов.
Однако стандарты XHTML исключают большинство атрибутов
оформления тегов. Это означает, что атрибуты все еще распознаются
современными браузерами, но рекомендуется избегать их применения в
пользу других методов оформления. Для оформления элементов XHTML
рекомендуется использовать вместо атрибутов каскадные таблицы
стилей (CSS).

Каскадные таблицы стилей
Предпочтительным способом оформления элементов страницы
является использование каскадных таблиц стилей (CSS). Таблица
стилей - это набор характеристик стилей оформления и
соответствующих значений оформления, описывающих внешний вид
элементов XHTML, к которым они применяются. Существует три
способа создания таблиц стилей. Линейная ( in-line ) таблица стилей
появляется внутри тега, к которому применяются ее объявления стилей;
встроенная ( embedded ) таблица стилей является отдельным разделом
стилей страницы Web, которая применяет свои стили ко всем
определяемым на странице тегам; внешняя ( linked ) таблица стилей
103

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Линейные таблицы стилей
Линейная таблица стилей кодируется внутри тега для применения
оформления к этому конкретному тегу. Она использует общий формат,
показанный в листинге 3.2.
<tag style="property:value [; property:value] ...">
Листинг 3.2. Общая форма линейной таблицы стилей

Одна или несколько пар property:value задают настройки стиля
оформления в атрибуте style тега. Несколько настроек свойств стиля
разделяются друг от друга с помощью точки с запятой, для удобства
чтения между настройками можно использовать пробелы.
Свойства и значения, которые могут кодироваться для тега, зависят в
большой степени от конкретного оформляемого тега. Стилевые
настройки для горизонтальной линейки, например, могут включать
свойства height, width, color, и text-align, идентичные по
результату исключенным атрибутам size, width, color, и align,
которые они заменяют. Эти свойства кодируются как линейная таблица
стилей, что показано на рисунке 3.2. Атрибут style появляется внутри
тега <hr/> и определяет набор свойств и значений, применяемых к
тегу, когда он выводится в браузере.
<hr style="height:10px; width:50%; color:red; text-align:center"/>

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Встроенные таблицы стилей
Чтобы избежать дублирования кодирования линейных таблиц стилей,
можно применять встроенную таблицу стилей. Встроенная таблица
стилей определяется в теге <style type="text/css">, который
обычно располагается в разделе страницы <head>. Внутри этого
раздела <style> находится список имен тегов, называемых
селекторами, которым присваивают объявления стилей (свойства и
значения). Когда эти объявления сделаны, они автоматически
применяются к определенным тегам, если они появляются на странице.
Общая форма раздела <style> документа показана в листинге 3.3.
<style type="text/css">
selector {property:value [; property:value] ...}
...
</style>
Листинг 3.3. Общая форма встроенной таблицы стилей

Селектор является именем тега (без охватывающих символов " < " и " >
"). Свойства и значения стиля тега представлены в виде списка
объявлений стиля, разделенном точками с запятой и помещенном
внутри пары фигурных скобок " { } ". Например, следующий код
определяет объявления стиля для тега <hr/>, задавая такие же
параметры стиля, как и предыдущая линейная таблица стилей.
<head>
<title>Пример встроенной таблицы стилей</title>
<style type="text/css">
105

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

hr {height:10px; width:50%; color:red; text-align:center}
</style>
</head>
Листинг 3.4. Применение встроенной таблицы стилей

Селектор hr связан с четырьмя объявлениями property:value
стиля горизонтальной линейки. Когда эти стили определены во
встроенной таблице стилей, они автоматически применяются, если
браузер встречает в документе тег <hr/>. Нет необходимости
кодировать отдельные линейные таблицы стилей в каждом теге <hr/>.
Тег сам несет в себе оформление стиля, описанное во встроенной
таблице стилей. Хотя показанная выше встроенная таблица стилей
содержит только один селектор для тега <hr/>, на самом деле она
может содержать любое число записей, в зависимости от того, сколько
различных тегов должно быть оформлено. Пример также записан на
одной строке. Многие авторы страниц Web предпочитают кодировать
настройки property:value на отдельных строчках, как показано на
листинге 3.5, чтобы облегчить чтение и редактирование.
<style type="text/css">
hr {height:10px;
width:50%;
color:red;
text-align:center}
</style>
Листинг 3.5. Другая форма записи встроенной таблицы стилей

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Внешние таблицы стилей
Если сайт Web имеет множество страниц, то третий вариант таблиц
стилей будет, вероятно, лучшим решением. Он позволяет применять
одни стили оформления ко всем страницам, не требуя копирования
линейных или встроенных таблиц стилей на каждую страницу.
Внешняя таблица стилей является отдельным документом, содержащим
настройки property:value в том же формате, что и встроенная
таблица стилей. Единственное различие состоит в том, что этот
документ не содержит вокруг записей тегов <style>. Например,
документ внешней таблицы стилей, содержащий описанные выше
спецификации оформления тега <hr/>, включает в себя записи,
показанные в листинге 3.6.
Stylesheet.css (документ)
hr {height:10px;
width:50%;
color:red;
text-align:center}
Листинг 3.6. Документ внешней таблицы стилей

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

которым она применяется.
Документ внешней присоединяемой таблицы стилей содержит
настройки стиля оформления, которые применимы ко всем страницам
сайта Web. Поэтому все страницы, которые используют эту таблицу
стилей, должны с ней "соединяться", чтобы сделать стили доступными
для этих страниц. Соединение происходит с помощью тега <link>,
кодируемого в разделе <head> страницы. Общая форма тега <link>
показана в листинге 3.7.
<link
href="url"
type="text/css"
rel="stylesheet"
/>
Листинг 3.7. Общая форма тега <link>

Атрибут href ( hypertext reference ) задает расположение
присоединяемой таблицы стилей. Если таблица стилей находится в том
же каталоге, что и страница Web, к которой она применяется, то эта
запись является просто именем этого документа. Атрибут type
определяет тип документа, с которым делается соединение (всегда
"text/css" ). Атрибут rel определяет взаимоотношения внешнего
документа с данной страницей (всегда "stylesheet" ).
Если имеется документ таблицы стилей с именем Stylesheet.css, который
расположен в той же папке, что и страница Web, то страница Web
соединяется с этим документом с помощью следующего кода XHTML.
<head>
<title>Пример присоединяемой таблицы стилей</title>
<link href="Stylesheet.css" type="text/css" rel="stylesheet"/>
</head>
Листинг
стилей

3.8.

Соединение

страницы

Web

с

внешней

таблицей

Теперь страница Web имеет все доступные для нее настройки стиля
оформления, заданные в документе Stylesheet.css. Эта присоединенная
108

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Применение таблиц стилей
Нет ничего необычного в том, чтобы использовать все три типа таблиц
стилей для одной страницы Web. Внешняя таблица будет содержать
стили, которые являются общими для всех страниц Web; встроенная
таблица будет включать в себя стили, которые относятся к
определенной странице; линейные таблицы будут применяться к
отдельным тегам, которым не требуется общее оформление. Браузер
использует это множество таблиц стилей следующим образом.
Первое: все внешние таблицы стилей применяются на странице для
заданных селекторов тегов.
Второе: применяются все встроенные таблицы стилей. Если
одинаковые селекторы тегов присутствуют во внешних и встроенных
таблицах стилей, то встроенные стили переопределяют или расширяют
внешние стили.
Третье: применяются все линейные таблицы стилей. Если эти
настройки относятся к тем же тегам, которые присутствуют во внешних
или встроенных таблицах стилей, то линейные стили переопределяют
или расширяют присоединенные и встроенные стили.
Общий действующий принцип состоит в том, что любое определение
стиля более нижнего уровня имеет преимущество над эквивалентным
значением стиля более высокого уровня. Линейные таблицы стилей
имеют преимущество над встроенными таблицами стилей, которые
имеют преимущество над внешними таблицами стилей.
Предположим, например, что присоединенная таблица стилей
содержит следующее объявление стиля для горизонтальных линеек.
hr {height:1px;
109

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

width:50%;
color:red;
text-align:center}
Листинг
линеек

3.9.

Внешняя

таблица

стилей

для

горизонтальных

Все страницы, которые соединяются с этой таблицей стилей, выводят
горизонтальные линейки этим стилем. Предположим теперь, что одна
определенная страница должна иметь другое оформление линеек,
скажем, голубым цветом, а не красным. Поэтому на этой единственной
странице кодируется встроенная таблица стилей, чтобы переопределить
объявление цвета во внешней таблице стилей.
<style type="text/css">
hr {color:blue}
</style>
Листинг 3.10. Встроенная таблица стилей для горизонтальных
линеек

Все горизонтальные линейки на этой странице будут синими; однако
они сохраняют свойства height, width, и text-align внешней
таблицы стилей. Теги на этой странице наследуют свойства внешней
таблицы стилей, если не модифицируются встроенной таблицей
стилей.
Предположим дальше, что одна определенная горизонтальная линейка
на этой странице должна быть зеленого цвета и проходить по всей
ширине страницы. Поэтому для этой конкретной линейки добавляется
линейная таблица стилей.
<hr style="color:green; width:100%"/>
Листинг
линейки

3.11.

Линейная

таблица

стилей

для

горизонтальной

Зеленый цвет стиля переопределяет синий, который наследуется из
встроенной таблицы стилей; ширина в 100% переопределяет ширину в
50%, унаследованную из внешней таблицы стилей. Однако, эта
конкретная линейка сохраняет толщину в 1 пиксель и выравнивание по
110

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Стили оформления полей страницы
Когда текст выводится в окне браузера, он распространяется от одного
края окна до другого с полями примерно в 6 мм (четверть дюйма),
окружающими текст на странице. Можно было видеть эти поля на
созданных ранее страницах Web. Они показаны на простой странице
Web с одним параграфом на рисунке 3.3.

111

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 3.3. Страница Web с полями по умолчанию
В некоторых случаях эти настройки полей работают вполне успешно.
Однако, если на странице находится много текста, то эти узкие поля
создают перегруженный вид, что затрудняет чтение страницы. Может
быстро надоесть монотонное перемещение по строкам текста, которые
тянутся от одного края окна до другого. Страница Web станет более
привлекательной, более удобочитаемой и более приятной для глаз, если
вокруг текста появится больше свободного пространства. Однако в
других случаях может понадобиться сократить или удалить
используемые по умолчанию настройки полей, чтобы некоторые
элементы страницы выводились еще ближе к границам окна.
Вспомните, что тег <body> ограничивает все содержимое страницы,
которое выводится в окне браузера. Этот тег можно использовать также
для управления полями вокруг границ страницы. Для этого необходимо
применить к тегу <body> таблицу стилей, которая определяет поля
страницы.

112

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Свойства стиля оформления полей страницы
Существует пять свойств стиля оформления, которые можно применять
для задания полей вокруг элементов страницы. Эти свойства
определяют величину свободного пространства между внешними
границами элемента и любым окружающим содержимым. При
использовании в теге <body> они задают величину свободного
пространства вокруг выводимого содержимого страницы.
Таблица 3.1. Свойства
полей и значения
Свойство Значения
margin
margin-top
npx
margin-right n%
margin-bottom auto
margin-left

Свойство margin задает одну и ту же ширину поля со всех сторон
элемента; свойства margin-top, margin-right, marginbottom, и margin-left задают поля индивидуально для каждой из
четырех сторон. Значение auto заставляет поля вернуться к их
значению ширины по умолчанию при переопределении предыдущих
настроек полей.

Значение размера
Свойства полей, как и различные другие свойства стиля оформления,
используют значения размера. В большинстве случаев требуется
определять размер в пикселях ( px ) или в процентах ( % ) от ширины
окна браузера. Это два наиболее распространенных способа измерения
расстояния на экране компьютера. Если тип измерения не определен, то
предполагаются пиксели.
113

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Задание полей с помощью линейной таблицы стилей
Поля, окружающие контент страницы Web, можно задать, применяя
таблицу стилей к тегу <body>. Например, следующая линейная
таблица стилей задает 25-пиксельное поле вокруг всей страницы,
используя свойство margin и задавая пробел в 25 пикселей между
содержимым страницы и границами окна браузера.
<body style="margin:25px">

<p>Эта страница Web выводит параграф текста с окружающими страницу
полями величиной 25 пикселей. Эти поля создаются линейной таблицей
стилей, заданной для тела документа. Строки текста лежат в этих границах
переносятся по словам. </p>
</body>
Листинг 3.12. Задание полей страницы Web с помощью линейной
таблицы стилей

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

114

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 3.4. Страница Web с 25-пиксельными полями

Задание полей с помощью вложенной таблицы стилей
В приведенном выше примере тег <body> включает линейную
таблицу стилей для задания полей этой конкретной страницы. Вместо
этого можно написать встроенную таблицу стилей для получения
такого же результата. Следующая запись <style> задает селектор
body со свойством стиля оформления margin и значением для этого
тега.
<head>
<title>Поля страницы</title>
<style type="text/css">
body {margin:25px}
</style>
</head>
115

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<body>

<p>Эта страница Web выводит параграф текста с окружающими страницу
полями величиной 25 пикселей. Эти поля создаются линейной таблицей
стилей, заданной для тела документа. Строки текста лежат в этих границах
переносятся по словам.</p>
</body>
Листинг 3.13. Задание полей страницы Web с помощью вложенной
таблицы стилей

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

Задание полей с помощью внешней таблицы стилей
Если сайт Web имеет много страниц и все страницы должны
использовать одинаковые поля, то необходимо применять внешнюю
таблицу стилей. Поместите оформление body в этот отдельный
документ и соедините его со всеми страницами, которые должны
использовать это оформление.
Следующий код показывает документ Stylesheet.css, в котором
определено оформление полей для тега <body>. Этот документ
находится в том же каталоге Web, что и страницы, где этот стиль
оформления применяются.
Stylesheet.css
body {margin:25px}
Листинг 3.14. Внешняя таблица стилей (файл Stylesheet.css)
116

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Когда эта внешняя таблица стилей будет создана, любая страница Web
может использовать ее настройки полей, соединяясь с ней. Код для
подключения этой внешней таблицы стилей показан ниже.
<head>
<title>Любая страница</title>
<link href="Stylesheet.css" type="text/css" rel="stylesheet"/>
</head>
Листинг 3.15. Задание полей страницы Web с помощью внешней
таблицы стилей

Задание индивидуальных полей страницы
В примерах выше свойство margin применяется для задания полей
одинаковой ширины для всех четырех сторон страницы. Вместо этого
можно выборочно задавать поля различной ширины для каждой из
сторон, используя свойства индивидуальных полей. В следующей
встроенной таблице стилей для страницы задаются поля различной
ширины с разных сторон.
<style type="text/css">
body {margin-top:50px; margin-left:30px; margin-right:30px;
margin-bottom:50px}
</style>
Листинг 3.16. Задание индивидуальных полей страницы Web с
помощью встроенной таблицы стилей

Отметим, что эти свойства можно записывать в любом порядке. Не
забывайте только, что пара property:value должна соединяться
двоеточием ( :), а отдельные объявления разделяются точкой с запятой (;).

Исключенные атрибуты тега <body>
Существуют атрибуты полей, которые не распознаются в XHTML, но
могут использоваться для задания полей страницы. Эти исключенные
117

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

атрибуты тега <body> перечислены ниже.
leftmargin="n"
rightmargin=""n"
topmargin="n"
bottommargin="n"
marginwidth="n"
marginheight="n"
Величину полей задает значение ( n ), представляющее число пикселей
пустого пространства между содержимым страницы и границами окна
браузера. Значения задают индивидуально для каждой из границ
(leftmargin, rightmargin, topmargin, bottonmargin ), для
двух боковых сторон ( marginwidth ) или для верхнего и нижнего полей
( marginheight ) страницы, например:
<body leftmargin="30" rightmargin="30" topmargin="30" bottommargin="30">
или

<body marginwidth="30" marginheight="30">
Хотя эти исключенные атрибуты тега <body> все еще работают в
современных браузерах - и их, наверняка, можно встретить на
существующих страницах Web - не следует применять их при создании
новых страниц. Вместо этого используйте свойства оформления полей,
задействуя внешние, встроенные или линейные таблицы стиля.

Поля параграфа
Стили полей применимы для многих тегов XHTML, а не только для тега
<body>. Фактически любой контейнерный тег может использовать
задание полей. Тег <p> является таким тегом. Объявляя для этого тега
свойства стиля полей margin, margin-top, margin-right,
margin-bottom и/или margin-left, параграф может настроить
свои поля со всех сторон блока текста или с каждой стороны
независимо.
118

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

<p>Здесь три параграфа. Первый параграф форматирован с помощью
стандартного тега параграфа с используемыми по умолчанию настройка
стиля.</p>

<p style="margin-left:40px; margin-right:40px">Второй параграф форматирован с
настройкой стиля "margin-left:40px; margin-right:40px" для задания левого
и правого полей для смещения параграфа относительно окружающих
параграфов. Это оформление создает параграф, похожий по результату на
использование тега blockquote.</p>

<p>Третий параграф кодируется так же, как и первый. Он заключен в
стандартный тег параграфа с используемым по умолчанию оформлением.<
Листинг 3.17. Задание
таблицы стилей

полей

параграфа

с

Вывод в браузере этого кода показан на рисунке 3.5.

119

помощью

линейной

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 3.5. Задание полей параграфа
В этом примере применяется линейная таблица стилей, так как
настройки полей применяют только для одного параграфа. Нет
необходимости определять встроенную таблицу стилей или создавать
внешнюю таблицу стилей, так как это оформление используется только
одним параграфом.

Вертикальные поля
Ранее упоминалось, что можно использовать несколько тегов <br/>
для увеличения вертикального пробела на странице. Каждый тег
<br/>, кроме тега в конце строки текста, создает ниже на странице
дополнительную пустую строку.
Тот же самый результат можно получить, задавая настройки стиля
margin-top и margin-bottom. При определении значений
ширины полей вверху и внизу блока текста заданное число пикселей
120

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

пустого пространства вставляется перед или после текста, производя
результат, подобный вставке пустых строк. Следующий код, например,
вставляет дополнительное пространство перед и после смещенного
параграфа, увеличивая его верхнее и нижнее поля с помощью линейной
таблицы стилей. Результат будет такой же, как было показано ранее для
параграфа цитирования, где интервалы были увеличены с помощью
дополнительных тегов <br/>. Результат вывода в браузере приведен на
рисунке 3.6.

<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду
<p style="margin-left:40px; margin-right:40px;
margin-top:50px; margin-bottom:50px">
Была у Мери овечка,<br/>
Была ее шерсть снежно-белой;<br/>
И куда бы ни шла Мери,<br/>
Овечка бежала за нею. <br/>
</p>

<p>У Мери ужасная жизнь. Очень трудно сходить на свидание, когда вокру
тебя все время скачет овечка.</p>
Листинг 3.18. Задание вертикальных полей с помощью линейной
таблицы стилей

121

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 3.6.
Использование
вертикального интервала

настройки

полей

для

увеличения

Можно применять либо несколько тегов <br/>, либо увеличенные
настройки полей для создания вертикальных интервалов. Однако при
использовании margin-top и margin-bottom обеспечивается
большая точность в пикселях.
При изучении других тегов в этом учебнике помните, что они могут
использовать свойства полей для изменения свободного пространства
между их содержимым и окружающими элементами на странице.
Настройка полей является одним из основных методов для организации
содержимого на странице Web.

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Стиль text-align
Свойство стиля text-align позволяет осуществлять выравнивание
элементов страницы left (слева), center (по центру), right
(справа) или justify (по ширине). Значения свойства показаны в
таблице 3.2.
Таблица 3.2.
Свойство
выравнивания
текста и значения
Свойство Значения
left
center
text-align
right
justify

Свойство стиля text-align является заменой исключенного
атрибута align, использовавшегося ранее для тегов <p>, <hn>, и
<hr/>. С данного момента все горизонтальное выравнивание должно
делаться с помощью свойства text-align.

Выравнивание параграфа
Тег <p> окружает блок текста, который также располагает свои строки у
левого края страницы или у левой границы, созданной заданием стиля
оформления параграфа margin или margin-left. Для параграфа
можно задать стиль text-align, чтобы изменить это используемое
123

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

<p style="text-align:left">
Этот параграф форматируется с помощью задания стиля style="text-align:left".
Каждая строка текста располагается у левого края страницы и переносится
новую строку у правого края страницы. Это используемый по умолчанию с
выравнивания параграфа.</p>

<p style="text-align:center">
Этот параграф форматируется с помощью задания стиля style="textalign:center". Каждая строка текста с переносами выводится выровненной по
центру между левым и правым полем страницы.</p>

<p style="text-align:right">
Этот параграф форматируется с помощью задания стиля style="text-align:right"
Каждая строка текста с переносами выравнивается по правому полю стран
</p>
<p style="text-align:justify">
Этот параграф форматируется с помощью задания стиля style="textalign:justify". Все строки текста с переносами, за исключением последней
строки, выравниваются по ширине от левого до правого поля. Последняя
строка, так как она недостаточно длинная для переноса, не выравнивается
ширине между полями страницы.
</p>
Листинг 3.19. Задание
линейных таблиц стилей

выравнивания

124

параграфов

с

помощью

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 3.7. Вывод параграфов с разным выравниванием в окне браузера
В этом примере все четыре параграфа имели различное оформление.
Поэтому теги <p> используют линейные таблицы стилей, а не
встроенную или внешнюю таблицу стилей, которые создавали бы
общее оформление для всех параграфов. Помните, однако, что
выравнивание текста, которого должны придерживаться все параграфы
на странице, должно быть задано только один раз во встроенной или
внешней таблице стилей. Если принято решение, например, что все
параграфы на странице будут выравниваться строки по ширине, то
подходящим решением будет встроенное объявление стиля для
селектора p.
<style type="text/css">
p {text-align:justify}
</style>
Листинг 3.20. Задание выравнивания
помощью встроенной таблицы стилей

125

для

всех

параграфов

с

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Выравнивание заголовка
Стили выравнивания текста можно применять к тегам <hn> для
размещения заголовков на странице слева, в центре или справа. В
следующем примере свойство text-align задается для заголовка
<h2> в линейной таблице стилей для выравнивания его на странице
горизонтально по центру. Это свойство стиля оформления заменяет
старый атрибут align="center", использовавшийся ранее для
выравнивания заголовков.
<h2 style="text-align:center">Центрированный заголовок</h2>
Листинг 3.21. Задание выравнивания заголовка

Как правило, различные заголовки, встречающиеся на одной странице
Web, имеют общие стили, чтобы обеспечить общий вид страницы.
Поэтому обычно выравнивание заголовков включают во встроенную
таблицу стилей для общего использования всеми подобными
заголовками. Следующий код задает стили выравнивания для трех
размеров заголовков, которые встречаются на странице. Кроме того
увеличены верхние поля, чтобы создать дополнительное свободное
вертикальное пространство между заголовками и предшествующим
текстом.
<style type="text/css">
h1 {text-align:center; margin-top:20px}
h2 {text-align:left; margin-top:20px}
h3 {text-align:left; margin-top:20px}
</style>
Листинг
3.22.
Задание
заголовков на странице

стилей

выравнивания

для

всех

Хотя выравнивание текста не требуется для приведенных выше тегов
126

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<h2> и <h3> (так как выравнивание слева используется по
умолчанию), эти настройки включены в таблицу стилей, чтобы сделать
их явными и для документирования настроек. Также поскольку все
выравнивания заголовков заданы в этой встроенной таблице стилей, то
любые изменения в выравнивании заголовков можно делать в одном
месте, что будет распространяться на все заголовки на странице.

Выравнивание изображений
Вспомните, что выравнивание изображений происходит при
включении тега <img/> в контейнерный тег, который выравнивает
вложенное изображение. Это выравнивание можно осуществить,
помещая тег <img/> в тег <p>, к которому применяется стиль textalign. Вложенное в параграф изображение размещается в отдельной
строке и выравнивается по левому полю параграфа, по правому полю
или размещается в центре страницы. Например, следующий код
линейной таблицы стилей в теге <p> задает вывод изображения в
центре страницы.
<p style="text-align:center"><img src="Stonehenge.jpg" alt="Стоунхендж"/></p >

Рис. 3.8. Выравнивание изображения по центру
Отметим также, что хотя именем свойства является "text"-align
(т.е., выравнивание "текста"), содержимое любого вида, вложенное в
параграф, текст или что-то другое, будет выводиться в центре строки.

Плавающие изображения
127

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Альтернативой размещению изображения в отдельной строке является
размещение его у левого или правого поля, позволяя тексту заполнять
остающееся пространство. Изображение называют "плавающим" слева
или справа от сопровождающего его текста. Плавание изображения
обеспечивается свойством стиля float.
Таблица 3.3.
Свойство float
Свойство Значение

float

left
right
none

Изображение на рисунке 3.9 выводится у правого поля страницы (
float right ). Сопровождающий текст параграфа заполняет
оставшееся свободным пространство. Задание стиля содержится во
встроенной таблице стилей.

128

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 3.9. Плавающее изображение
<head>
<title>Плавающее изображение</title>
<style type="text/css">
body {margin:20px}
p {text-align:justify}
h2 {text-align:center}
img {float:right; margin-left:25px}
</style>
</head>
<body>
<h2>Плавающие изображения</h2>
<p>
<img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/>
Альтернативой размещению изображения в отдельной строке является
размещение изображения у левого или правого поля, позволяя тексту
заполнять оставшееся свободное пространство. Сопровождающее
изображение смещается вправо от текста на странице. </p>

<p>Помните, что важно помещать тег <img> в коде сразу перед текстом или
другими элементами страницы, которые дополняют изображение.
Изображение смещается точно в то место на странице, в котором кодируетс
тег <img/>. В данном случае тег помещается в начале первого параграфа;
поэтому изображение смещается вправо от этого параграфа.
</p>
</body>
Листинг 3.23. Код страницы со смещенным вправо изображением

Отметим, что свойство float ассоциировано с селектором img в
предыдущей таблице стилей. Это свойство тега <img/> - тег будет
плавающим, в отличие от случая, когда на строке размещается только
изображение, которое выравнивается свойством text-align
охватывающего тега <p>.
129

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Изображения, которые смещаются на странице влево или вправо,
должны кодироваться сразу перед текстом, который окружает
изображение. В приведенном выше примере тег <img/> находится в
начале параграфа, который
окружает изображение. Между
изображением и окружающим контентом нет никаких символов
переноса строк. Тегу <img/> присвоено свойство стиля
float:right, чтобы поместить у правого поля охватывающего
параграфа. Он имеет также параметр стиля margin-left:25px,
чтобы оставить пустое пространство между изображением и
окружающим текстом слева.
Изображения могут смещаться на странице влево или вправо; они не
могут находиться в середине страницы с текстом, окружающим их с
обеих сторон. Для плавающих изображений желательно обычно
включать дополнительное пустое пространство между изображением и
окружающим его текстом, расширяя его поля. Подобно большинству
свойств стиля оформления свойство float может применяться для
множества других тегов. В дальнейшем мы узнаем, как смещать
текстовые контейнеры на странице влево или вправо.
В примере выше все теги оформляются с помощью вложенной таблицы
стилей. Хотя это и не показано, но все другие появляющиеся на этой
странице теги <p>, <h2> и <img/> будут получать такие же
характеристики оформления.

Стиль text-indent
Предыдущие примеры выравнивания параграфа слева показывают их в
"блочном стиле", в котором все строки текста прижаты к левому полю.
Однако широко распространено использование отступа для первой
строки параграфа, чтобы визуально выделить начало нового параграфа.
Отступ первой строки на самом деле не требуется, когда параграфы
разделены пустыми строками, как в случае страниц Web; тем не менее,
такое форматирование может применяться для смягчения внешнего
вида страниц.
Для создания отступа первой строки параграфа используется свойство
стиля text-indent. Величина отступа задается числом пикселей или
130

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

как процент от ширины страницы.
Таблица 3.4.
Свойство задания
отступа и значения
Свойство: Значение
text-indent

npx
n%

Следующий код делает отступ первой строки двух параграфов, первого
на 25 пикселей и второго на 5% ширины страницы. Вывод в браузере
показан на рисунке 3.10.

<p style="text-indent:25px">Этот параграф форматируется с помощью
style="text-indent:25px". Первая строка параграфа смещается на 25 пикселе
левого поля. Остальные строки параграфа прижаты к левому полю и
переносятся по словам по правому полю.</p>

<p style="text-indent:5%">Этот параграф форматируется с помощью style="text
indent:5%". Первая строка параграфа смещается на 5 процентов ширины
страницы от левого поля. Остальные строки параграфа прижаты к левому
полю и переносятся по словам по правому полю. </p>
Листинг 3.24. Задание отступа первых строк параграфов

131

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 3.10. Отступ первой строки текста в параграфах
В этом примере значения в пикселях и процентах задают примерно
одинаковую величину отступа первой строки. Однако при
использовании измерения в процентах для отступа параграфа помните,
что это значение основано на ширине страницы. Будет создаваться
отступ разной величины, в зависимости от ширины окна браузера.
Чтобы сохранить фиксированную величину отступа, независимо от
размера окна, задавайте значение в пикселях, а не в процентах.

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

132

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Таблица 3.5. Стили
для задания
ширины и высоты
элемента
Свойство Значения
width
npx
height n%

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

Ширина и высота линейки
Как говорилось ранее, разделы страницы Web могут визуально
разделяться выводом между ними горизонтальных линеек. Это делается
с помощью тега <hr/> для проведения линии на странице.
Линейка по умолчанию имеет высоту (толщину) в 2 пикселя и проходит
по ширине окна браузера. Можно изменить эти размеры, кодируя для
тега <hr/> стили width и height. Такое изменение размеров
показано в следующей линейной таблице стилей и выводе браузера.
<hr style="width:75%; height:7px; text-align:center"/>

Рис. 3.12. Задание стиля горизонтальной линейки
При
определении
ширины
элементов
страницы
часто
предпочтительнее кодировать их в виде процентов. В этом случае
ширина всегда выводится в правильной пропорции с другими
элементами на странице Web, даже если пользователь изменяет размер
окна браузера. Если горизонтальная линейка получает размер меньше
ширины окна браузера, то ее можно также позиционировать на
горизонтальной линии с помощью text-align:left, text133

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

align:center, или text-align:right. В предыдущем примере
линейка занимает 75% ширины страницы и расположена по центру.
Обычно все горизонтальные линейки на странице оформлены в одном
стиле. Поэтому имеет смысл поместить этот стиль оформления во
вложенной или внешней таблице стилей, чтобы ее можно было
закодировать один раз для всех линеек на странице или всех линеек на
сайте. Следующий код является примером того, как горизонтальные
линейки можно стандартизовать для страницы с помощью вложенной
таблицы стилей.
<style type="text/css">
hr {height:1px; width:50%; text-align:center}
</style>
Листинг 3.25.
странице

Код

стиля

всех

горизонтальных

линеек

на

С помощью такого задания стиля все теги <hr/> на странице создают
линейки толщиной 1 пиксель, 50% от ширины окна браузера
(независимо от размера окна) и расположенные горизонтально по
центру страницы.

Ширина и высота изображений
Достаточно часто бывает, что графические изображения имеют не те
размеры, которые требуются для размещения на странице Web. Эта
проблема постоянно возникает, если не используется или отсутствует
программное обеспечение, которое позволяет изменять размер
изображения прежде, чем помещать его на странице. Однако с
помощью свойств стиля width и height, используемых для этих
изображений, размеры изображений можно изменять во время вывода
в браузере.
Реальный размер изображения, показанного на рисунке 3.12, равен 162
x 108 пикселей. При выводе на странице его ширина задается равной
100 пикселям с помощью линейной таблицы стилей.

<img src="Stonehenge.jpg" alt="Изображение Стоунхенджа" style="width:100
134

px"/

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 3.13. Динамическое изменение размера изображения
При изменении размеров изображения задают свойство высоты или
ширины, но обычно не оба. Браузер автоматически задаст другой
размер, чтобы сохранить правильную пропорцию. Можно, конечно,
задать оба свойства независимо, если известны правильные
измененные размеры или если необходимо создать специальные
визуальные эффекты с непропорционально измененными шириной и
высотой.
Хотя размеры изображения могут автоматически изменяться при
выводе в браузере, его реальные размеры останутся без изменений.
Слишком большое изображение может занимать значительное дисковое
пространство и создавать задержку при загрузке. В идеале необходимо
отредактировать большое изображение, чтобы уменьшить его реальный
размер до размеров его изображения на странице, а не использовать
стили ширины и высоты для изменения только выводимого размера.
Изображение не должно обычно выводиться с размером большим, чем
его исходный размер. При увеличении размера можно потерять
точность и получить нечеткое изображение.
Вспомните из предыдущего материала, что тег <img/> имеет
исключенные атрибуты width и height для изменения размеров
изображений. Эти атрибуты должны заменяться соответствующими
свойствами стиля width и height для удовлетворения стандартам
XHTML. Хотя их имена совпадают, способы их применения
различаются.
Значения стиля для ширины и высоты можно применять для любых
тегов XHTML, а не только для тегов <hr/> и <img/>, как в
предыдущих примерах. В дальнейшем будут рассмотрены случаи
изменения размеров других элементов страницы с согласованием их с
135

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

точными размерами на странице.

Основные стили цвета
Использование цвета для различных элементов страницы можно
задавать с помощью свойств color и background-color. Значения цвета (
color ) можно задавать с помощью названия цвета,
шестнадцатеричного значения, представляющего комбинацию оттенков
используемых красного, зеленого и синего цветов или десятичным
значением RGB (red, green, blue). Например, спецификации
цвета могут иметь следующие формы:
color:red
color:#FF0000
color:rgb(255,0,0)
Эти задания цветов обсуждаются более полно в дальнейшем. Пока для
задания стиля цвета на странице можно применять обычные системные
названия или имена цветов. Существует 16 основных имен цветов (
aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal,
white, yellow ), называемых стандартными цветами Windows и
показанных на рисунке 3.14. Эти цвета можно использовать для
элементов страницы, задавая в таблице стилей с помощью
color:name или background-color:name.

Рис. 3.14. Свойства и названия основных цветов

Цвет текста и фона
Цвет текста задается присваиванием значения цвета в таблице стилей,
которая связана с контейнерным тегом, содержащим текст. Например,
заголовок можно вывести синим цветом, присваивая имя этого цвета в
линейной таблице стилей тега <hn>.
136

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<h1 style="color:blue">Синий заголовок</h1>
Листинг 3.26. Кодирование стиля цветного заголовка

Если весь параграф должен иметь определенный цвет, то имя этого
цвета можно задать в таблице стилей, связанной с тегом <p>.
<p style="color:red">...красный текст параграфа ...</p>
Листинг 3.27. Код для задания стиля цветного параграфа

В некоторых случаях может понадобиться вывести весь текст на
странице определенным цветом. Это легко сделать, присваивая
свойство color тегу <body>. Следующий код выводит весь текст на
странице зеленым цветом, используя встроенную таблицу стилей,
ассоциированную с селектором body.
<style type="text/css">
body {color:green}
</style>
Листинг 3.28. Встроенная таблица стилей для задания цвета
всего текста на странице

Для любого текстового контейнера можно задать также цвет фона,
применяя свойство background-color. Проверьте также, что
выбранный цвет является дополнительным для цвета текста и не
создаст трудностей при чтении. В следующей таблице стилей желтый
цвет используется в качестве цвета фона страницы для зеленого текста.
<style type="text/css">
body {color:green; background-color:yellow}
</style>
Листинг 3.29. Встроенная таблица стилей для задания цвета
фона страницы

Цвет линейки
Такие же стили цвета можно задавать для горизонтальных линеек. В
137

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

следующем примере линейки выводятся с различными свойствами
стилей для получения различных цветов, размеров, и положения на
странице. В то же самое время цвет текста страницы будет синим, а
цвет фона будет желтым. Вывод в браузере показан на рисунке 3.15.
<body style="color:blue; background-color:yellow">
<p>Синяя горизонтальная линейка высотой 10 пикселей, шириной 300 и
смещенная к правому полю:</p>
<hr style="color:blue; height:10px; width:300px; text-align:right"/>
<p>Красная горизонтальная линейка высотой 2 пикселя, 75% от ширины
страницы и расположенная по центру:</p>
<hr style="color:red; height:2px; width:75%; text-align:center"/>

<p>Зеленая горизонтальная линейка высотой 10 пикселей; 25% от ширины
страницы и смещенная к левому полю:</p>
<hr style="color:green; height:10px; width:25%; text-align:left"/>
</body>
Листинг 3.30. Код задания стилей горизонтальных линеек

138

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 3.15. Горизонтальные линейки различных стилей
В этом примере все стили линеек задаются с помощью линейных
таблиц стилей. Отдельные линейки имеют различные настройки, для
которых встроенная таблица стилей с одним селектором hr не
подходит. Стиль оформления body также использует линейную
таблицу стилей, хотя в этом случае можно было бы применить
встроенную таблицу стилей с селектором body для задания цвета фона
и цвета переднего плана.
Цвета можно задавать для многих других элементов страницы, кроме
текста и линеек. Дополнительное обсуждение значений цветов и
использования стилей будет дано в дальнейшем. Применение имен
базовых цветов позволит начать использовать на страницах все
многообразие различных цветов.

Области действия и разделы
139

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

До этого момента стили применялись для отдельных элементов
страницы, ассоциируя таблицы стилей с их тегами. Эта техника
прекрасно работает в большинстве случаев, однако существуют
ситуации оформления, когда этого будет недостаточно.
Например, в параграфе может понадобиться использовать стиль для
определенной буквы, слова, фразы или других текстовых строк,
расположенных внутри параграфа. Применение таблицы стилей к тегу
<p> не предоставляет возможности выбрать, какие подстроки
параграфа оформлять стилем. Все символы параграфа получают единое
оформление.
Другим примером является последовательная группа параграфов, для
которой необходимо использовать один и тот же стиль. Можно,
конечно, скопировать и применить одну и ту же линейную таблицу
стилей для отдельных тегов <p>, чтобы задать для них одинаковый вид.
Однако, было бы удобнее иметь возможность применить один стиль к
параграфам как к группе, не задавая для них стиль по отдельности.
Для таких и других ситуаций оформления, включающих строки текста
длиной меньше параграфа и блоки текста больше параграфа, XHTML
предоставляет теги маркировки для определения и обособления
определенных разделов или подразделов страницы, к которым может
применяться стиль оформления.

Тег <span>
Тег <span> является линейным тегом, который помещают вокруг
текста с целью идентификации строки символов, где применяется
таблица стилей этого тега. Тег может ограничивать одну букву, слово,
фразу, предложение или любую другую подстроку текста с целью ее
определения для применения оформления. Напомним также, что
линейный тег <span> окружает строку текста, расположенную внутри
блочного контейнера.
В следующем параграфе слова "КРАСНЫЙ" и "СИНИЙ" выделяются
тегами <span> как слова, для которых эти теги определяют цвет. Когда
этот параграф выводится в браузере, эти два слова выводятся
140

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

соответствующими цветами.

<p>Этот параграф содержит слово <span style="color:red">RED</span>, котор
находится внутри тега <span>, чтобы определить цвет этого слова. В это
предложение для слова <span style="color:blue">BLUE</span> задан этот
цвет.</p>
Листинг 3.31. Код оформления отдельных слов в параграфе

Тег <span> является просто маркером для выделения текста, к
которому можно применить его таблицу стилей. Он не имеет своих
собственных встроенных характеристик форматирования. Он не создает
разрыва строки и не создает пробела. Поэтому его можно использовать
линейным образом, в обычном потоке текста просто для оформления
ограниченного им контента. Конечно, применяемый стиль должен
подходить для вложенной строки текста. Например, было бы неуместно
применять свойство text-indent для создания отступа "первой
строки" для одного слова, ограниченного тегом <span>.

Тег <div>
Тег <div> (division) служит, как и тег <span>, разновидностью
маркера. Его назначение состоит в ограничении и определении набора
элементов страницы для применения стиля оформления к вложенному
множеству. Тег <div> является блочным тегом, так как он охватывает
другие теги и, что важно, создает на странице перенос строки перед
своим вложенным содержимым и после него.
Использование тега <div> иллюстрируется двумя следующими
параграфами. Оба параграфа оформляются одинаково. Однако вместо
кодирования этих стилей с помощью линейных таблиц стилей в обоих
тегах <p>, параграфы окружены тегом <div>, который определяет эти
стили. Параграфы наследуют стили охватывающего тега <div>. Вывод
браузером этого форматирования показан на рисунке 3.15.
<div style="text-indent:25px; margin-left:30px; margin-right:30px;
text-align:justify">
141

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<p>Этот параграф имеет отступ первой строки в 25 пикселей. Он имеет л
и правое поле по 30 пикселей и выровнен по ширине между двумя полями

<p>Этот параграф также имеет отступ первой строки в 25 пикселей. Он и
левое и правое поле по 30 пикселей и выровнен по ширине между полями
параграфа оформлены с помощью охватывающего тега раздела div для
применения этих стилей к обоим параграфам.</p>
</div>
Листинг 3.32. Код оформления
охватывающего тега <div>

двух

параграфов

с

помощью

Рис. 3.16. Параграфы, оформленные охватывающим тегом <div>
Тег <div> не имеет никаких видимых собственных характеристик
форматирования, кроме того факта, что он создает перенос строки перед
и после окаймленного содержимого. Эти переносы строк не видны в
приведенном выше примере, так как теги <p> сами создают
собственные переносы строк, которые объединяются с переносами
строк тега <div>.
142

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Простые селекторы
За счет пересмотра большую часть встроенного оформления можно
выполнить с помощью селекторов отдельных тегов и соответствующих
объявлений стиля. Эти простые селекторы объявляют используемое по
умолчанию оформление тега для всей страницы. Общий формат
простого селектора показан в листинге 3.33.
selector {property:value [; property:value] ... }
Листинг 3.33. Общий
простого селектора

формат

встроенной
143

таблицы

стилей

для

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Любое число селекторов можно объединять во встроенной таблице
стилей с любым числом свойств стиля. Например, следующие простые
селекторы задают форматирование уровня страницы для полей
страницы, заголовков и параграфов. В любом месте на странице, где
встретится один из этих тегов, браузер будет использовать
соответствующий стиль оформления.
<style type="text/css">
body
{margin:20px; color:black}
h1
{color:blue; text-align:center}
h2
{color:blue; text-align:left}
p
{text-align:justify; text-indent:25px}
</style>
Листинг
3.34.
Встроенная
простые селекторы

таблица

стилей,

использующая

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

Селекторы ID
Одним из способов применения специальных стилей для отдельных
элементов страницы является задание для элемента уникального
идентификатора. Затем во встроенной таблице стилей можно
применить специальное оформление только к элементу с этим
идентификатором.
Предположим, например, что для всей страницы Web принят для
параграфа общий отступ и выравнивание с помощью показанной выше
встроенной таблицы стилей. Скажем, все параграфы имеют отступ в 25
пикселей, а текст выравнивается по ширине с отступом первой строки в
144

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

<p id="Special">Этот параграф требует специального оформления,
отличающегося от обычных параграфов на странице. Он должен быть см
на 25 пикселей от обоих полей и не должен иметь отступа в первой
строке.</p>
Листинг
3.35.
Идентификация
специального оформления

параграфа

для

применения

С помощью id, присвоенного этому тегу <p>, можно определить
специальное оформление, используя селектор ID во встроенной
таблице стилей. Общий формат селектора ID показан в листинге 3.36.
selector#id {property:value [; property:value] ...}
Листинг 3.36. Общий формат таблицы стилей для селектора ID

Стили определяют для селектора, но только для селектора с заданным (
# ) значением id. Таким образом, селектор ID можно добавить к
приведенной выше таблице стилей, чтобы отформатировать
специальный параграф иначе, чем обычный параграф:
<style type="text/css">
body {margin:20px; color:black}
h1
{color:blue; text-align:center}
h2
{color:blue; text-align:left}
p
{text-align:justify; text-indent:25px}
p#Special {text-indent:0px; margin-left:25px; margin-right:25px}
145

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</style>
Листинг 3.37. Задание стилей для селектора ID

Синтаксис p#Special относится к тегу <p> со значением id (#),
заданным как "Special". Стандартный отступ первой строки в 25
пикселей, заданный простым селектором p, изменен на 0 пикселей для
этого конкретного параграфа. Для этого параграфа также заданы
значения левого и правого полей, отличающиеся от обычных
параграфов. Однако его текст остается выровненным по ширине, как
унаследовано из оформления стандартного параграфа, заданного
селектором p. Другими словами, все параграфы наследуют оформление,
заданное простым селектором p, если только стили не модифицируются
или не дополняются селекторами p#id.
Такой тип идентификация тега и оформления можно использовать для
любого тега. Присвойте просто тегу уникальный id и выделяйте его из
других тегов такого же типа, добавляя это значение #id к селектору
тега.

Оформление тегов <span> и <div>
Оформление тегов <span> и <div> не должно выполняться с
помощью простых селекторов во встроенной таблице стилей. Эти теги
часто появляются на странице несколько раз, чтобы выделить и
оформить различные части текста и различные наборы элементов
страницы, которые обычно требуют различного оформления. Поэтому
невозможно связать один определенный стиль с этими тегами, не
ограничивая их гибкость в оформлении других фрагментов текста или
разделов, которые требуют отличающегося оформления. Другими
словами, не применяйте кодирование следующих простых селекторов
во встроенных таблицах стилей.
<style type="text/css">
div {property:value}
span {property:value}
</style>
146

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 3.38. Избегайте использования простых селекторов для
тегов <div> и <span>

Однако, используя селекторы ID с этими тегами, можно применять
различное оформление для различных тегов <span> и <div>, не
связывая их с одним определенным стилем.
В следующем примере двум параграфам задают один и тот же стиль,
помещая их внутри тега <div>, для которого задается специальное
оформление. Это оформление влияет только на этот единственный
раздел с помощью своего уникального селектора ID. Оформление
других разделов не затрагивается, так как они не имеют этого значения
id. В то же самое время два тега <span>, получают свое уникальное
оформление через свои уникальные значения id, оставляя
незатронутым все остальное оформление охваченного тегами <span>
текста.
<style type="text/css">
div#Justify {text-align:justify}
span#Red {color:red}
span#Blue {color:blue}
</style>
<div id="Justify">
<p>Этот параграф оформляется наследованием оформления своего
контейнерного раздела, который форматируется с помощью <span
id="Red">"Justify"</span> style.</p>
<p>Это параграф также оформляется наследованием оформления своего
контейнерного раздела. Кроме того, к одному из его слов применяется
оформление <span id="Blue">"Blue"</span></p>
</div>
Листинг 3.39. Использование селекторов
отдельных тегов <div> и <span>

ID

для

оформления

Классы стилей оформления
Определяя селектор класса, можно объявить стиль оформления общего
147

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

назначения для применения к любому тегу, которому понадобится
применить этот стиль. Селектор класса определяется во встроенной
таблице стилей, как показано его общей формой в листинге 3.40.
.class {property:value [ ;property:value] ...}
Листинг
класса

3.40.

Общая

форма

таблицы

стилей

для

селектора

Вместо указания тега или использования в селекторе id, задается имя
класса, перед которым ставится точка. Для селектора .class можно
задавать любое имя, оно не может только включать пробелы или
специальные символы. Любая комбинация свойств и значений стилей
оформления может быть связана с этим классом стиля оформления.
Следующая встроенная таблица стилей включает класс оформления с
именем .Offset. После определения этого класса его можно задать
для любого тега с помощью атрибута class="class". Ниже этот
класс стиля оформления задается параграфу, когда его присваивают тегу
<p>. Этот параграф получает оформление класса .Offset, в данном
случае с помощью переопределения обычного оформления, задаваемого
простым селектором p.
<style type="text/css">
p
{margin:20px}
.Offset {margin-left:30px; margin-right:30px}
</style>

<p class="Offset">Этот параграф требует специального оформления,
отличающегося от обычных параграфов на странице. Он имеет левое и пра
поле шириной по 30 пикселей.</p>
Листинг
3.41.
оформления

Объявление

и

применение

класса

стиля

(Отметим, что присвоенный тегу класс не включает точку, которая
требуется при объявлении селектора .class в таблице стилей.)
Класс стиля является стилем общего назначения, который можно
применять к тегу любого типа, задавая просто класс тегу; плюс, в
148

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

отличие от селектора ID, селектор класса можно присваивать любому
числу тегов. Поэтому любые параграфы, разделы и другие типы
блочных тегов могут использовать приведенное выше оформление,
присваивая его в классе .Offset. Конечно, тег, к которому
применяется класс, должен быть восприимчив к определенным
свойствам и значениям, объявляемым классом.
Классы стилей особенно подходят для тегов <span> и <div> для
оформления строк текста и блоков кода, не связывая эти теги с
определенным стилем. Эти теги становятся носителями множества
различных стилей просто при присвоении им различных классов
стилей. Следующий код является примером применения различных
классов стилей к различным тегам для создания страницы, показанной
на рисунке 3.16.
<head>
<title>Стили классов</title>
<style type="text/css">
.Offset {margin-left:25px; margin-right:25px; text-align:justify}
.Red {color:red}
.Blue {color:blue}
.Rule {height:2px; width:75%; text-align:center; color:green}
</style>
</head>
<body>
<hr class="Rule"/>
<div class="Offset">
<p>Этот параграф имеет форматирование, задаваемое охватывающим
разделом. Внутри этого параграфа слово <span class="Red">RED</span>
использует собственный класс стиля.</p>
<p>Этот параграф также оформляется охватывающим разделом. Внутри
этого параграфа слово <span class="Blue">BLUE</span> использует
собственный класс стиля.</p>
149

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</div>
<hr class="Rule"/>
</body>
Листинг 3.42. Объявление и использование различных классов
стилей

Рис. 3.17. Применение классов стилей
Оба параграфа выше оформляют, помещая их внутри раздела, которому
присвоен класс стиля Offset. Поэтому параграфы наследуют
оформление раздела, которое в данном случае смещает оба параграфа
относительно полей страницы и выравнивает их текст по ширине. Эта
техника имеет такой же результат, как и объявление селектора ID для
оформления раздела ( div#Offset ) и применение стиля через этот
селектор ID ( <div id="Offset" ). Однако класс .Offset
является более гибким, так как его можно ассоциировать с другими
тегами, кроме разделов. Любые теги на странице могут получать стиль
150

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

.Offset при присвоении их этому классу.
В каждом параграфе есть отдельные слова, которые получают
оформление цветом. Эти слова помещены внутри тегов <span>,
которые задают цвет, присваивая теги классу стиля .Blue или
.Orange. В связи с этим, если какие-либо другие разделы страницы параграф, заголовок, что-то еще - понадобится вывести одним из этих
цветов, то ограничивающим их тегам можно будет присвоить эти же
самые классы стиля. Любое обычное оформление этих тегов будет
дополняться этими заданными цветами.
Обе горизонтальные линейки имеют ширину 75% страницы и высоту 2
пикселя, зеленый цвет и размещены по центру. Сделан вариант
определения класса стиля представления этого оформления и
присваивания всех тегов <hr/> этому классу. Конечно, эти стили
можно было бы определить для простого селектора hr без
использования класса. Однако выбран вариант создания классов для
всех оформлений и присваивания тегов этим классам, как диктует
необходимость. Нет ничего необычного во встроенной таблице стилей,
состоящей исключительно из классов стилей, которые выборочно
применяются ко всем разновидностям тегов, требующих этих стилей.

Стратегии оформления
Во всем этом вполне можно запутаться. Можно использовать внешние
таблицы стилей, встроенные таблицы стилей, линейные таблицы
стилей или некоторые их комбинации. При использовании внешних
или встроенных таблиц стилей можно применять простые селекторы
тегов, селекторы ID или классы стилей. Далее в учебнике будут
представлены дополнительные возможности оформления. Что делать
разработчику со всеми этими средствами?
С учетом различных подходов к оформлению ниже представлена
разумная стратегия использования. Можно будет разработать и свои
собственные предпочтительные подходы, когда вы станете лучше
разбираться в таблицах стилей, но описанный подход является хорошим
началом для выбора варианта использования.
151

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Используйте встроенную таблицу стилей как основной метод
оформления. Это позволит объединить стили в одном разделе
страницы, облегчая поиск и изменение стилей, а также
преобразование встроенных стилей во внешние таблицы стилей
для приложений уровня сайта.
Во встроенной таблице стилей используйте простые селекторные
теги для применения общего оформления уровня страницы ко
всем тегам одного типа.
Определите классы стилей, чтобы выполнять оформление через
теги общего назначения, - например, теги <span> и <div>.
Используйте также классы стилей, когда два или несколько тегов
требуют форматирования, отличающегося или дополняющего то,
что задано их простыми селекторами тегов.
Для единичных тегов, требующих уникального оформления,
присвойте тегу значение id и задавайте его оформление с
помощью селектора ID во встроенной таблице стилей.
Используйте линейные таблицы стилей там, где требуется
одноразовое оформление и удобно переопределить оформление с
помощью таблицы стилей, закодированной внутри тега. Слишком
большое количество линейных таблиц стилей трудно отслеживать
в случае изменений; к тому же, одинаковые линейные стили
необходимо изменять в нескольких местах, что ведет к возможным
пропускам и ошибкам.
Хотя предпочтение отдается применению встроенных таблиц стилей, и, расширительно, внешним таблицам стилей, - в этом учебнике часто
используются линейные таблицы стилей в качестве обучающего
инструмента для знакомства и описания свойств стилей. Однако всегда
предполагается, что линейные стили будут перенесены во встроенные
или внешние таблицы стилей, когда страницы "будут включены в
производственную систему".
Этот раздел делает вводное знакомство с таблицами стилей. Существует
большое множество свойств стилей, которые еще надо рассмотреть, и
много других вариантов тех, которые были здесь рассмотрены.
Важность таблиц стилей невозможно переоценить. После исключения
большинства атрибутов форматирования тегов, таблицы стилей стали
основным методом организации и вывода содержимого страницы.
Использование линейных, встроенных и внешних таблиц стилей стало
152

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

сущностью кодирования XHTML.

153

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Форматирование текста
Когда текст изображается в браузере, он выводится используемым по
умолчанию типом, размером, стилем и цветом шрифта. Большинство
браузеров используют тип шрифта Times New Roman, размером около 12
пунктов, и черный цвет. Однако некоторые параметры таблицы стилей
позволяют изменять эти настройки, чтобы придать страницам другой
вид. Подробнее об этом рассказано в данной лекции

Параметры шрифта
Когда текст изображается в браузере, он выводится используемым по
умолчанию типом, размером, стилем и цветом шрифта. Большинство
браузеров используют тип шрифта Times New Roman, размером около 12
пунктов, и черный цвет. Однако некоторые параметры таблицы стилей
позволяют изменять эти настройки, чтобы придать страницам другой
вид.
При работе с текстовыми шрифтами необходимо учитывать, что тип
шрифта, который выводится в браузере, ограничен набором шрифтов,
установленных в компьютере. Поэтому необходимо помнить о том,
какие типы компьютеров используют посетители страницы и какие
типы шрифтов могут быть у них установлены. Лучше придерживаться
распространенных типов, если только предполагаемая аудитория Web
не известна заранее. Следующие виды шрифтов, типичные на ПК на
основе Windows, представлены здесь размером 12 пунктов.

154

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 4.1. Типичные виды шрифтов ПК (arial, arial narrow, comic sans ms,
courier new, georgia, impact, tahoma, times new roman, verdana)

Стили шрифта
Существует шесть параметров стиля шрифта, которые можно
использовать для создания разнообразия, привлекательности или
выделения в тексте на странице Web. Эти настройки свойств
перечислены в таблице 4.1.
Таблица 4.1. Свойства стиля оформления шрифта
Свойство
Значение
Может быть именем любого системного шрифта или
обобщенным именем serif, sans-serif, cursive,
monospace. Можно определять несколько значений, в
fontfamily порядке предпочтения, разделяются запятой. Используется
первый найденный шрифт fontfamily:arial,verdana,sans-serif.
Размер шрифта, определяемый обычно в пунктах ( pt ).
fontЕсли единицы измерения не заданы, используются пиксели
size
( px )
fontСтиль шрифта определяется как normal, italic,
style
oblique
155

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Насыщенность шрифта определяется как lighter,
normal, bold, bolder или значением от 100 (самый
fontweight светлый) до 900 (самый насыщенный). Не все числовые
значения в диапазоне распознаются браузерами.
fontВариант шрифта определяется как normal small-caps
variant

font

Сокращенный способ определения множества стилей
шрифта с помощью задания в строгом порядке значений,
разделенных пробелами: font-style, fontvariant, font-weight, font-size, fontfamily. Если значения не задаются, они могут
отсутствовать в списке: style="font:italic bold
10pt times new roman"

Любые комбинации этих стилей можно применять для любого текста
на странице. Они могут быть связаны с тегом <body> для
использования в документе в целом. Их можно кодировать для
селектора p для применения ко всем параграфам. Они могут
кодироваться как классы и работать с помощью тегов <span>,
окружающих буквы, слова, фразы, предложения или другие выбранные
строки текста в параграфе. Их можно применять как классы с помощью
тегов <div> для блоков текста.
Свойство font-family задействуют для изменения настройки
браузера по умолчанию, т.е. изменения шрифта Times New Roman. При
использовании для вывода специальных стилей шрифта необычного
семейства шрифтов, которое может не существовать на компьютере
каждого пользователя, необходимо предоставить другие, более
распространенные виды шрифтов, из которых может выбирать
компьютер. Свойство font-family задает эти варианты в
разделенном запятыми списке. Браузер ищет в компьютере первый
подходящий вид шрифта и применяет его для вывода текста. Например,
следующая таблица стилей задает стандартный стиль шрифта для
страницы.
<style type="text/css">
body {font-family:helvetica, verdana, sans-serif}
</style>
156

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 4.1. Выбор значений для семейства шрифтов

Сначала браузер пытается использовать шрифт Helvetica. Если он
отсутствует в системе пользователя, то браузер ищет шрифт Verdana.
Если он также отсутствует, то браузер применяет любой доступный
встроенный тип шрифта sans-serif. Обобщенные имена шрифтов
serif, sans-serif, и monospace всегда будут находить тип
шрифта, который похож на Times New Roman, Arial, и Courier,
соответственно.
Необходимо также задать свойство font-size, чтобы изменить
применяемый браузером по умолчанию размер в 12 пунктов. Обычно
размер шрифта задается в пунктах; однако можно использовать пиксели
для задания высоты букв для специального оформления.
Свойство font-style обычно определяет выбор между стилем
normal и italic ; oblique обычно выводится так же, как italic.
По умолчанию браузер использует стиль normal.
Свойство font-weight обычно применяется для выбора между
нормальным ( normal ) и полужирным ( bold ) шрифтом. Значения
для более светлого и более насыщенного шрифтов, как правило, в
браузере не различаются, как не различаются и все числовые значения.
Значения между 100 и 500 задают обычную (normal) насыщенность, а
значения между 600 и 900 определяют полужирные символы ( bold
).
Стиль font-variant со значением small-caps переводит все
буквы в верхний регистр со слегка меньшим размером шрифта.
Определение normal возвращает вывод текста к стандартному виду.
Объявления стиля шрифта могут использовать настройки отдельных
свойств, или значения могут объединяться в одном свойстве font как
сокращенном способе представления объявлений. То есть, набор
объявлений таблицы стилей можно задать, как показано на листинге
4.2.
{font-family:arial;
font-variant:small-caps;
157

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

font-size:10pt;
font-weight:bold;
font-style:italic}
Листинг 4.2. Настройка
свойств оформления

шрифта

с

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

отдельных

или как показано на листинге 4.3,
{font:italic small-caps bold 10pt arial}
Листинг 4.3.
свойства font

Настройка

шрифта

с

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

одного

со значениями, разделенными пробелами. При использовании свойства
font не требуется определять все значения, но они должны быть
представлены в строгом порядке: font-style font-variant
font-weight font-size font-family. Типичное объявление
может включать, например, только значения font-size и fontfamily: {font:10pt arial}.
Следующий код применяет встроенную таблицу стилей с различными
комбинациями настройки шрифта текста. В этом примере все значения
оформления стиля используют сокращенное свойство font. Вывод в
браузере этой страницы показан на рисунке 4.2.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Пример стилей шрифта</title>
<style type="text/css">
body {font:12pt arial; text-indent:25px; margin:20px}
.head {font:bold 14pt; text-align:center; text-indent:0px}
.offset {margin-left:25px; margin-right:25px; text-indent:0px}
158

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

.cap {font:bold 24pt}
.fancy {font:13pt comic sans ms}
.style1 {font:bold 14pt times new roman}
.style2 {font:bold 12pt courier new; color:fuchsia}
</style>
</head>
<body>
<div class="head">Оформление шрифта</div>

<p><span class="cap">Э</span>та страница показывает различное оформлен
шрифта, задаваемое с помощью встроенной таблицы стилей. Оформление
применяется ко всей странице и к отдельным частям текста на странице.</p
<div class="offset">

<p>Эти два параграфа смещают относительно окружающих параграфов,
помещая их внутри раздела. Раздел имеет левое и правое поле по 25
пикселей, и ни один из параграфов не использует отступ первой строки.</p

<p class="fancy">Этот параграф оформлен с помощью класса, который
содержит тип шрифта и размер. Внутри этого параграфа имеется тег span,
который оформляет <span class="style1">эту строку текста</span> иначе по
сравнению с остальной частью параграфа. Кроме того, это <span
class="style2">слово</span> использует свой собственный специальный сти
оформления.</p>
</div>
</body>
</html>
Листинг 4.3. Задание стилей оформления шрифта для страницы

159

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 4.2. Приложение стилей шрифта
Оформление тега <body> задает формат по умолчанию для всей
страницы. После этого применяются различные классы стилей для
отдельных частей текста.

Вложенные стили
Приведенная выше страница включает вложенные таблицы стилей, где
внутренняя настройка стиля наследует и затем временно
переопределяет, или изменяет, настройки внешнего стиля. Внешний
стиль <body>, например, задает вывод страницы шрифтом типа
Arial размером 12 пунктов с полями страницы 20 пикселей и
отступом параграфа 25 пикселей. Эти настройки остаются в силе, пока
не будут переопределены, например, вложенными стилями <div>,
которые изменяют поля для двух вложенных параграфов на 25
пикселей и задают отступ параграфа как 0 пикселей. Эти стили
разделов переопределяются далее в одном из вложенных параграфов, в
160

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

котором стиль шрифта изменяется на Comic Sans MS 13 пунктов,
сохраняя поля и отступ из раздела. В этом параграфе теги <span>
используются для переопределения стиля параграфа для отдельных
строк текста, которые будут иметь отличающийся тип шрифта и
размеры. Таблицы стилей могут вкладываться друг в друга, так что
стили каскадно спускаются на любое количество уровней. Окончание
действия настроек стиля происходит в обратном порядке. Этот момент
иллюстрирует следующий код, показывающий структуру со сдвигами
тегов <span>, которые применяют, а затем удаляют увеличивающиеся
размеры шрифта с помощью линейных таблиц стилей.
<p>
<span style="font-size:12pt">
Здесь
<span style="font-size:16pt">
показано
<span style="font-size:20pt">
вложение
<span style="font-size:24pt">
стилей
</span>
друг
</span>
в
</span>
друга.
</span>
</p>
Листинг 4.4.
<span>

Вложенные

настройки

стиля,

использующие

теги

Рис. 4.3. Применение вложенных стилей шрифта с помощью тегов
<span>
Хотя такое количество вложенных стилей вряд ли будут часто
использоваться, суть вопроса состоит в том, что каждый закрывающий
тег </span>, начиная с самого внутреннего, завершает действие
161

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

<p><span style="font-size:12pt">Здесь<span style="font-size:16pt">показано<span
style="font-size:20pt">вложение<span style="font-size:24pt">стиля </span>
друг</span>в </span>друга.</span></p>
Листинг 4.5. Другая запись кода задания вложенных стилей

В противоположность этому, тег <div> решает такие же задачи
оформления, но, кроме того, создает перенос строки. Следующий код
оформляет предыдущую строку текста с помощью тегов <div> и
создает вывод, показанный на рисунке 4.4.
<div style="font-size:12pt">
Здесь
<div style="font-size:16pt">
показано
<div style="font-size:20pt">
вложение
<div style="font-size:24pt">
стиля
</div>
друг
</div>
в друга
</div>
another.
</div>
Листинг 4.6. Вложенные настройки стилей, использующие теги
162

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<div>

Рис. 4.4. Применение вложенного оформления шрифта с помощью
тегов <div>
Необходимо помнить об этих различиях, так как теги <span> и <div>
широко используются при оформлении элементов страницы.

Исключенный тег <font>
Хотя и не используемый в XHTML, но распространенный способ
задания оформления шрифта состоит в применении тега <font>. Этот
тег, подобно тегу <span>, задает для ограничиваемого текста тип
шрифта, размер, и цвет. Общая форма тега <font> и его атрибуты
показаны ниже.
<font
face="face1 [,face2] [,face3]"
size="n|+n|-n"
color="color"
>
... форматируемый текст ...
163

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</font>
Атрибут face определяет разделенный запятыми список до трех типов
шрифта, которые могут использоваться для текста, заключенного внутри
тега <font>. Размеры шрифта можно задавать или изменять с
помощью атрибута size. Значение этого атрибута может изменяться от
1 до 7, от наименьшего до наибольшего. Если размер не определен, то
по умолчанию применяется системный размер шрифта 3, который
соответствует примерно размеру шрифта 12 пунктов. Отметим, что
размер шрифта определяется не в пунктах. Размер шрифта может
изменяться относительно текущего размера с помощью модификаторов
"+" или "-". Поэтому значение атрибута "+1" задает размер шрифта
на один размер больше текущего значения.
Цвет шрифта можно задавать с помощью атрибута color. Значение
цвета задается именем цвета или шестнадцатеричным значением. Эти
способы будут рассмотрены в дальнейшем.

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

Свойство
letterspacing
lineheight

Таблица 4.2. Свойства оформления текста
Значение
Задает горизонтальный интервал между буквами текста
элемента. Значениями являются normal, npx, auto.
Задает высоту строки текста элемента. Значение в
пикселях или пунктах является реальной высотой;
число или процент является коэффициентом для
текущего размера шрифта. normal, npx, npt, n, n%.
Задает горизонтальное выравнивание текста в
164

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

text-align элементе. Значениями являются left, center,
right, justify.
Задает дополнительное оформление текста внутри
textэлемента. Значениями являются none, linedecoration
through, overline, underline.
textЗадает отступ текста внутри элемента. Значениями
indent
являются npx n%
Задает использование прописных и строчных букв в
textэлементе. Значениями являются none, capitalize,
transform
lowercase, uppercase.
Задает вертикальное выравнивание содержимого
vertical- элемента. Значениями являются bottom, top,
align
baseline, middle, sub, super, text-bottom,
text-top.
Задает величину интервала между словами в элементе.
wordspacing
Значениями являются npx, normal.
Мы уже знакомы со свойствами text-align и text-indent.
Первое из них управляет выравниванием отдельных строк текста в
блоке текста; второе задает величину отступа в начале первой строки
текста.
Существует
два
свойства,
которые
управляют
величиной
горизонтального интервала в строке. Свойство word-spacing задает
число пикселей между словами; свойство letter-spacing - число
пикселей между буквами. Эти свойства используются для растягивания
(с помощью положительных значений) или сжатия (с помощью
отрицательных значений) слов или букв в горизонтальном
направлении, добавляя или удаляя между ними пустое пространство.
Величина вертикального интервала в текстовом блоке задается
свойством line-height. Хотя для измерения можно использовать
пиксели или пункты, числовое значение лучше соответствует знакомым
настройкам. Оно является коэффициентом текущего размера шрифта;
поэтому объявление line-height:1.5 соответствует интервалу в
полторы строки, а line-height:2 соответствует двойному
интервалу. Отметим, что дробные значения являются допустимыми.
165

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Поэтому задание line-height:.8 сужает интервал между строками
до 80% обычного межстрочного интервала.
Существует два свойства текста, которые лучше считать свойствами
шрифта, так как они влияют на внешний вид символов. Свойство
text-decoration прочерчивает линию над символами (
overline ), под символами ( underline ) или через символы (
line-through ). Свойство text-transform преобразует текст в
символы верхнего регистра ( uppercase ), символы нижнего регистра
( lowercase ) или делает первые буквы слов заглавными (
capitalize ).
Свойство vertical-align имеет ряд различных применений, в
зависимости от тега, в котором оно используется. Как свойство
оформления шрифта оно может, например, преобразовать символы в
верхние индексы ( super ) или нижние индексы ( sub ). Как свойство
выравнивания текста оно позиционирует текст относительно его
контейнера или относительно окружающего содержимого. Примеры
этого свойства даются при обсуждении отдельных тегов или задач
оформления.

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

166

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 4.5. Использование оформления для создания отчета
Большая часть оформления находится во встроенной таблице стилей,
определяющей классы стиля, которые применяются тегами <span> и
<div>. Линейные таблицы стилей используются в одном
определенном разделе страницы для одноразовых стилей, которые не
применяются в других разделах документа. Используемый по
умолчанию формат страницы задается селектором тега <body>:
полуторный ( 1 1/2 ) межстрочный интервал, отступ первой строки
параграфа и выравнивание текста по ширине.
<?xml version="1.0" encoding="UTF-8"?>
167

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Познавательный профиль</title>
<style type="text/css">
body {line-height:1.5; text-indent:20px; text-align:justify}
.head1 {text-align:center; letter-spacing:1.5px; font:bold 16pt}
.head2 {text-indent:0px; font:bold 14pt}
.uline {text-decoration:underline}
.ital {font-style:italic}
.offset {margin-left:20px; text-indent:0px; line-height:normal}
.line {text-indent:0px}
.super {font-size:7pt; vertical-align:text-top}
.footnote {line-height:normal; text-indent:20px}
</style>
</head>
<body>
<div class="head1">Модель познавательного профиля</div>

<p> <span class="uline">Модель познавательного профиля</span> является
инструментом самооценки, который должен помочь студентам определить
познавательные характеристики. Она позволяет оценить, как студент думае
учится и принимает решения.</p>

<p>Модель классифицирует познавательные стили по двум биполярным ос
Сенсорный-Интуитивный и Мыслитель-Чувственно воспринимающий.
Квадранты, сформированные двумя этими пересекающимися осями, помеч
ST (Сенсорный Мыслитель), SF (Сенсорный Чувственно воспринимающий
(Интуитивный Мыслитель) и NF (Интуитивный Чувственно воспринимаю
Самооценки изображаются на этой сетке как точечные значения в каждом и
квадрантов. Соединение точек создает некоторый четырехугольник, которы
показывает сочетание предпочтительных стилей изучения.</p>
168

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<div class="offset">
Вполне возможно, что имеется доминирующий квадрант, или один из
квадрантов составляет большую часть четырехугольника. Можно видеть, чт
студент имеет некоторую область/предпочтения/способности для каждого в
мышления и что можно усилить эти способности, изучая необходимые в
каждой из этих областей навыки. <span class="super">1</span>
</div>
<p><span class="head2">Оценочный тест</span></p>
<p>Тест состоит из 60 пар слов, из которых студенты выбирают ту, которая
больше нравится или лучше всего их описывает. Примеры пар слов
включают:</p>
<div class="offset">
<span style="width:80px; text-align:left">
Практический<br/>
Факты<br/>
Действие<br/>
</span>
<span style="width:100px; text-align:center; font-weight:bold">
4 3 2 1 1 2 3 4<br/>
4 3 2 1 1 2 3 4<br/>
4 3 2 1 1 2 3 4<br/>
</span>
<span style="width:80px; text-align:right">
Эмоциональный<br/>
Чувства<br/>
Обсуждение<br/>
</span>
</div>
<p>Значение между 1 (слабое предпочтение) и 4 (сильное предпочтение)
присваивается одной из пар слов. Эти значения суммируются по всем
позициям и изображаются в квадранте для создания познавательного
профиля.</p>
<div><span class="line">_________________</span></div>
<div class="footnote">
169

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<span class="super">1</span> Краус, Луис Брюер, <span class="ital">Как
учиться, и почему мы этого не делаем</span>, Cincinnati: Thomson Learning,
2000 (p. 19).
</div>
</body>
</html>
Листинг 4.7. Код создания отчета

Уместен, вероятно, комментарий относительно воспроизведенного
здесь следующего раздела вывода областей <div> и <span>.
Практический
Факты
Действие

43211234
43211234
43211234

Эмоциональный
Чувства
Обсуждение

Листинг 4.8. Использование span внутри div

По умолчанию тег <div> расширяет ширину страницы, охватывая три
блока текста. Являясь блочным, тег <div> создает также перенос
строки, чтобы отделить свое содержимое от окружающего текста.
<div class="offset">
<span style="width:80px; text-align:left">
Практический<br/>
Факты<br/>
Действие<br/>
</span>
<span style="width:100px; text-align:center; font-weight:bold">
4 3 2 1 1 2 3 4<br/>
4 3 2 1 1 2 3 4<br/>
4 3 2 1 1 2 3 4<br/>
</span>
<span style="width:80px; text-align:right">
Эмоциональный<br/>
Чувства<br/>
Обсуждение<br/>
</span>
170

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</div>
Листинг 4.9. Код вложения span в div

Тег <span> является линейным тегом, не задающим перенос строки
или дополнительные пустые строки перед или после тега. Поэтому
несколько тегов <span>, закодированные один за другим, выводятся
браузером на одной строке. Хотя слова и числа внутри тегов <span>
выводятся на разных строках, содержимое самих тегов появляется рядом
на одной строке внутри окружающего тега <div>.
В этом примере теги <span> задают также фиксированную ширину и
различное выравнивание, чтобы равномерно распределить свое
содержимое. Это пример использования свойства width, которое
применялось ранее для задания размеров горизонтальных линеек и
графических изображений, для определения точных размеров блока
текста. Другие примеры определения размеров блоков текста будут
представлены далее.
Еще одно замечание относительно тегов <span>: тег не может
появиться в строке сам по себе. То есть, тег <span> должен быть
ограничен блочным тегом, таким, как тег <p> или <div>. Обратите
внимание на код, создающий разделительную линию для сноски внизу
предыдущего отчета.
<div><span class="line">_________________</span></div>
Листинг 4.10. Вложение тега <span> в блочный тег

Если этот тег <span> будет закодирован не внутри своего
контейнерного тега <div>, то он не пройдет проверку (валидацию)
XHTML 1.1, хотя и может выводиться браузером правильно.

Использование отрицательных значений
При использовании размеров в пикселях часто необходимо
использовать отрицательные значения, чтобы добиться желательного
результата. Параграф, показанный на рисунке 4.6, применяет отступ
первой строки текста в -20px, чтобы создать "выступающий" формат
171

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 4.6.
Использование
библиографических записей

оформления

текста

для

создания

Как показано на листинге 4.11, оформление задается окружающим тегом
<div>, который использует класс стиля .biblio для своих
параграфов. Левое поле для всех параграфов задается равным 20px.
Такая настройка смещает весь параграф, так что задание смещения в
-20px смещает первую строку влево до края поля.
<style type="text/css">
.head {text-align:center; font-weight:bold; font-size:14pt}
.biblio {margin-left:20px; text-indent:-20px}
.book {font-style:italic}
</style>
<div class="head">Библиография</div>
172

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<div class="biblio">
<p>Duthie, P. A. & MacDonald, M. (2002). <span class="book">ASP.NET in a
Nutshell: A Desktop Quick Reference</span>. Sebastopol, CA: O`Reilly &
Associates, Inc.</p>
<p>Goodman, Danny (2002). <span class="book">Dynamic HTML: The Definitive
Reference.</span>. Sebastopos, CA: O`Reilly & Associates, Inc.</p>
<p>Griffin, J., Morales, C., & Finnegan, J. (2003). <span class=<book<>Web
Design & Development Using XHTML</span>. Wilsonville, Oregon: Franklin,
Beedle & Associates.</p>
</div>
Листинг 4.11. Код для создания выступающих параграфов

Промежутки между буквами и словами
Вспомните, что свойства letter-spacing и word-spacing могут
принимать как положительные, так и отрицательные значения. Строки
на рисунке 4.10 заданы с различными значениями промежутков между
буквами и словами для демонстрации результатов.

Рис. 4.7. Положительные и отрицательные интервалы между буквами и
словами

Теги стиля шрифта
173

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Символы текста могут использовать такие стили, как bold
(полужирный), italic (курсив), underscore (подчеркнутый) и
другие для выделения или акцентирования букв и слов. Хотя эти стили
можно задавать с помощью таблицы стилей, существуют также
автономные теги, которые можно применять для непосредственного
обрамления и форматирования символов текста.
Теги физических стилей
Теги физических стилей являются линейными контейнерными тегами,
обрамляющими строки символов, которые будут выводиться указанным
стилем. Эти теги -общие для всех браузеров и выводятся одинаково во
всех браузерах. Теги физических стилей показаны в таблице 4.3.
Таблица 4.3. Теги физических стилей
Тег физического стиля
Эквивалент в таблице стилей
<big>big</big>
font-size:18px
<b>bold</b>
font-weight:bold
<i>italic</i>
font-style:italic
<small>small</small>
font-size:12px
<tt>typewriter</tt>
font-family:courier new
<sub>subscript</sub>
vertical-align:sub
<sup>superscript</sup> vertical-align:super
<s>strikeout</s>
text-decoration:line(исключен)
through
<u>underscore</u>
text-decoration:underline
(исключен)
Как показано в приведенной выше таблице, обрамление текстовой
строки тегами <b>...</b>, например, преобразует текст в
полужирные символы точно того же стиля, что и задание свойства
font-weight:bold. Будут ли использоваться эти теги физических
стилей или свойства стилей CSS, является вопросом личного
предпочтения. Отметим, что теги strikeout и underscore
исключены и порождают ошибки при проверке на соответствие XHTML
Strict.
174

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Эти теги могут иметь также связанные с ними свойства стиля.
Например, объявление в таблице стилей b {color:red} связывает
color с селектором b. Поэтому любой текст, задаваемый полужирным
с помощью тега <b>, будет также выводиться красным цветом.
Теги логических стилей
Теги логических стилей не имеют стандартных значений во всех
браузерах, и XHTML точно не определяет, как они должны выводиться.
Однако они применяются более широко, чем теги физических стилей,
делая возможным как визуальное, так и невизуальное представление
стилей.
Для людей с ослабленным зрением, например, тег физического стиля
<b> может быть бессмысленным, так как он выводит текст визуально
полужирными символами. Однако при использовании визуально
сопоставимого тега логического стиля <strong> человек с помощью
специальной программы воспроизведения слышит текст с выделением
громкостью звука.
Следующая таблица содержит теги логических стилей. Их вывод может
несущественно отличаться от применяемого по умолчанию стиля в
браузере. Некоторые браузеры могут поддерживать не все стили.
Таблица 4.4. Теги логических стилей
Тег логического стиля
Назначение
<abbr>abbreviation</abbr> Указывает сокращение
<acronym>acronym</acronym> Указывает акроним
Содержит цитату или ссылку на
другие источники
Указывает фрагмент кода
программы
Указывает, что это пример
определения термина
Указывает на выделение
Указывает на более сильное

<cite>citation</cite>
<code>code</code>
<dfn>definition</dfn>
<em>emphasis</em>
<strong>strong</strong>
175

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

выделение

<strong>strong</strong>

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

<kbd>keyboard</kbd>
<samp>sample</samp>

<var>variable</var>

Теги логических стилей созданы для ситуаций, в которых визуальное
представление текста в браузере необходимо расширить другим
специальным представлением или информационным контентом. Для
вывода в стандартном браузере, однако, можно ограничиться тегами
физических стилей или их эквивалентами CSS.
Представление заголовков таблицами стилей
Вспомните, что теги заголовков <hn> окаймляют строки текста для
вывода одним из шести стилей заголовков. Число n в теге изменяется от
1 (самый крупный) до 6 (наименьший). Заголовки выводятся
полужирными символами используемого по умолчанию типа шрифта.
Конечно, для изменения настроек тега заголовка можно применить
таблицу стилей. Например, объявление стиля
<style type="text/css">
h2 {font-family:arial; font-style:italic}
</style>
Листинг 4.12. Оформление тега заголовка в таблице стилей

выводит заголовок размером 2, наклонным типом шрифта Arial,
переопределяя обычный вывод заголовка шрифтом Times New Roman.
Другие стили могут использоваться в теге для вывода заголовка с
дополнительными характеристиками оформления.
Таким же образом, как физические и логические теги шрифтов можно
реализовать с помощью таблиц стилей, можно создавать заголовки с
176

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<hn>. Следующая таблица стилей объявляет классы стилей,
идентичные шести типам заголовков. Это кодирование выводится в
браузере, как показано на рисунке 4.8.
<style type="text/css">
.head1 {font:bold 24pt}
.head2 {font:bold 18pt}
.head3 {font:bold 13.5pt}
.head4 {font:bold 11pt}
.head5 {font:bold 10pt}
.head6 {font:bold 7.5pt}
</style>
<p class="head1">Заголовок уровня 1</p>
<p class="head2">Заголовок уровня 2</p>
<p class="head3">Заголовок уровня 3</p>
<p class="head4">Заголовок уровня 4</p>
<p class="head5">Заголовок уровня 5</p>
<p class="head6">Заголовок уровня 6</p>
Листинг 4.13. Теги оформления заголовков стилями

Рис. 4.8.
Вывод в браузере заголовков, созданных с помощью
объявлений стилей
177

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Таким образом, существует несколько возможных вариантов
оформления заголовков. Можно использовать теги <hn> с настройками
по умолчанию, использовать эти теги с измененным оформлением или
вообще отказаться от тегов и создать свои собственные классы
заголовков. Ни один из вариантов не является лучшим решением во
всех случаях.
Групповые селекторы
Заголовки различного уровня на странице Web должны обладать общим
оформлением, так как являются визуальными ключами своей общей
функции разделителей разделов содержимого страницы. Часто
заголовки используют один тип шрифта и цвет, различаясь размером и
выравниванием. Использование тегов <hn> облегчает управление
стилями заголовков во встроенных таблицах стилей с помощью
групповых селекторов.
Групповой селектор - это два или несколько селекторов тегов,
разделенных запятыми, которые обладают одинаковым стилем
оформления. Например, следующая таблица стилей объявляет общий
тип шрифта и цвет для набора тегов <hn>, создавая общий визуальный
стиль для всех используемых на странице заголовков.
<style type="text/css">
h1, h2, h3 {font-family:verdana; color:goldenrod}
</style>
Листинг
4.14.
Использование
оформления группы тегов

групповых

селекторов

для

Селектор h1, h2, h3 является групповым селектором, поэтому
связанные с ним объявления стилей применяются ко всем тегам в этом
списке. Предположим далее, что заголовки <h1> располагаются по
центру, заголовки <h2> и <h3> выровнены по левому полю и
заголовки <h3> выводятся курсивом. Эти дополнительные групповые
и индивидуальные оформления можно добавить в приведенную выше
таблицу стилей, чтобы создать результат, показанный на рисунке 4.9.
<style type="text/css">
178

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

h1, h2, h3 {font-family:verdana; color:goldenrod}
h1
{text-align:center}
h2, h3 {text-align:left}
h3
{font-style:italic}
</style>
Листинг
4.15.
Использование
групповых
дополнительного оформления групп тегов

селекторов

для

Рис. 4.9. Вывод в браузере заголовков, оформленных групповыми
селекторами
Групповые селекторы не отличаются по результату от простых
селекторов. Они позволяют просто сократить запись объявления общих
стилей. Они также иллюстрируют достаточно четко концепцию
наследования стилей. В приведенном выше примере все три заголовка
наследуют один тип шрифта и цвет из общего группового селектора
h1, h2, h3; заголовки <h2> и <h3> наследуют выравнивание по
левому полю из группового селектора h2, h3. Используя
преимущества такого наследования, можно избавиться от кодирования
отдельных дублирующих стилей для каждого селектора тега.
Кстати, не требуется, чтобы групповые селекторы состояли из тегов
одного типа. Все теги, которые используют один стиль, могут быть
частью группового селектора. Например, групповой селектор,
показанный на листинге 4.16, указывает, что все теги параграфов <p>,
теги <span> и <div> на странице применяют один и тот же тип
шрифта и размер.
<style type="text/css">
p, span, div {font-family:verdana; font-size:10pt}
</style>
179

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг
4.16.
Использование
оформления различных тегов

групповых

селекторов

для

Тег <pre>
Обычно браузер никак не форматирует текст, если текст не окружен
тегами XHTML. Хотя в текстовом редакторе код мог быть как-то
организован с помощью средств редактора, в браузере все смежные
пробелы и пустые строки объединяются в одиночные пробелы и
строки. Однако существует один случай, когда сформатированный в
редакторе текст может выводиться таким же образом в браузере.
Блок текста, окруженный блочным тегом <pre> ("preformatted" или
"preserve"), выводится моноширинным (равномерным) шрифтом (
monospace ) точно в том же виде, как он был сформирован в
редакторе. То есть, пробелы между символами и пустые строки,
использованные для форматирования кода XHTML в редакторе, точно
воспроизводятся в браузере, пробел за пробелом и строка за строкой. Тег
<pre> часто применяется для создания простых таблиц, где
выравнивание столбцов создается с помощью пробелов. Следующий
код, например, создает таблицу, которая выводится в браузере подобно
тому, как она была введена в редакторе.
<pre>
Таблица 1
Продажи по регионам
----------------------------------------------Регион/Год 2000 2001 2002 2003
----------------------------------------------Восток
35.2 37.4 39.8 40.0
Запад
28.0 25.6 27.4 29.8
Юг
102.3 86.1 98.6 100.2
Север
10.5 8.6 9.8 10.4
----------------------------------------------</pre>
Листинг 4.17. Использование
форматирования редактора

180

тега

<pre>

для

сохранения

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Так как все строки текста помещены внутри тега <pre>, таблицу
можно сформировать в редакторе с помощью пробелов и пустых строк.
Это выравнивание возможно, потому что редактор и браузер в данном
случае выводят символы моноширинным шрифтом (т.е. шрифтом
постоянной ширины), создавая равномерно распределенные символы.
Необходимо проверить только, что редактор применяет моноширинный
шрифт (например, Courier New ), чтобы аккуратно распределить
текст. Вывод браузера здесь не показан, так как он совпадает с
организацией таблицы, создаваемой в редакторе.
К моноширинному тексту можно добавить небольшое форматирование,
если оно не изменяет размера символов, меняя тем самым величину
интервала между буквами. Следующий код, например, задает для
предыдущей таблицы стили шрифта полужирный и курсив, а также
цвет текста.
Проверьте только, что таблица выровнена требуемым образом, прежде
чем добавлять дополнительные теги оформления, что визуально
смещает выравнивание текста при просмотре в редакторе. Однако эти
дополнительные теги внутри тега <pre> не добавляют в таблицу
пробелы при просмотре в браузере.
<pre style="color:blue">
<b>Таблица 1</b>
<b>Продажи по регионам</b>
---------------------------------------------<b>Регион/Год 2000 2001 2002 2003</b>
---------------------------------------------<b>Восток</b>
35.2 37.4 39.8 40.0
<b>Запад</b>
28.0 25.6 27.4 29.8
<b>Юг</b>
102.3 86.1 98.6 100.2
<b>Север</b>
10.5
8.6
9.8 10.4
---------------------------------------------</pre>
Листинг
4.18.
Добавление
форматированному тегом <pre>

181

оформления

к

тексту,

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Цвета текста и фона
Браузеры выводят черный текст на белом фоне, если не задаются другие
настройки стиля цвета. Можно определять также цвет фона для
страницы или для любого контейнера текста. Цвета текста и фона
можно задавать в таблицах стилей с помощью шестнадцатеричных
значений, значений RGB или имен цветов.
Шестнадцатеричные цвета
Шестнадцатеричные числа имеют в основании число 16. То есть,
значения формируются с помощью 16 цифр счета 0, 1, 2, 3, 4,
5, 6, 7, 8, 9, A, B, C, D, E, F. Цифра 0 эквивалентна по
значению десятичному 0, цифра F эквивалентна десятичному значению
15. При использовании для представления значений цвета
применяются три пары шестнадцатеричных цифр для представления
182

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

объединенной интенсивности красного, зеленого и синего цветов;
этому значению цвета предшествует символ "#", чтобы указать на
шестнадцатеричное значение:
#rrggbb
Значение шестнадцатеричного "00" (наименьшее двузначное
шестнадцатеричное значение эквивалентное десятичному 0 ) с точки
зрения цвета означает отсутствие цвета; значение "FF" (наибольшее
двузначное шестнадцатеричное значение эквивалентное десятичному
255 ) означает цвет полной интенсивности. Таким образом,
шестнадцатеричное значение "#FF0000" представляет красный цвет:
"#FF" в позиции "#rr" присваивает полную интенсивность
красному цвету; "00" в позициях "gg" и "bb" представляет
отсутствие интенсивности зеленого и синего цветов.
Аналогично, значение "00FF00" является зеленым цветом, а значение
"0000FF" -- синим. Белый цвет представляется всеми цветами
полной интенсивности: "FFFFFF" ; черный цвет отсутствием цветов:
"000000". Между этими крайними значениями находятся цвета всех
оттенков и интенсивностей более чем 16 миллионов видов, хотя не все
цвета могут правильно отображаться на мониторах всех компьютеров.
Цвета RGB
Спецификация цвета RGB использует десятичные значения для
указания объединенной интенсивности красного, зеленого и синего
оттенков. Значения могут изменяться от 0 (наименьшего) до 255
(наибольшего). Эти значения RGB задаются в таблицах стилей в
следующем формате:
rgb(r,g,b)
с помощью десятичных значений для указания интенсивностей трех
цветов. Таким образом, кодирование значения RGB как
rgb(255,0,0) указывает красный цвет, rgb(0,255,0) указывает
зеленый цвет, а rgb(0,0,255) указывает синий цвет. Как и в случае
шестнадцатеричных значений, весь спектр более чем 16 миллионов
183

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

цветов можно представить комбинацией интенсивностей красного,
зеленого и синего цветов.
Названия цветов
Цвета можно также определять с помощью специальных названий
цветов. Большинство браузеров распознает более 200 названий цветов.
Обычное множество из 16 цветов Windows представлено ниже с
названиями цветов и их соответствующими шестнадцатеричными
значениями и значениями RGB.
Название HEX Значение цвета значение RGB

184

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 4.11. Названия цветов Windows и значения Hex и RGB
Свойства цвета текста
Можно задавать цвет текста на странице или цвет фона контейнера,
содержащего текст. Два эти свойства стиля показаны в следующей
таблице.
Таблица 4.5. Свойства стиля
цвета
Свойство
Значение

color

#rrggbb
rgb(r,g,b)
название цвета

#rrggbb
background-color rgb(r,g,b)
название цвета

Цвета могут задаваться в диапазоне от всей страницы, связывая стиль
цвета с тегом <body>, и до одного текстового символа, связывая стиль
цвета с тегом <span>, окружающим символ. Для определения свойств
цветов можно использовать шестнадцатеричные значения, RGB и
названия цветов в любой комбинации.
Различные комбинации цветов фона и текста показаны в следующем
коде. Вывод браузером этой страницы показан на рисунке 4.12.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdc>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
185

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<head>
<title>Цветная страница</title>
<style type="text/css">
body
{color:white; background-color:silver}
.PARAstyle {color:rgb(0,0,0)}
.PHRASEstyle {color:#0000FF}
.TEXTstyle {color:green; background-color:yellow}
</style>
</head>
<body>

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

<p class="PARAstyle">
Второй параграф задает свой собственный цвет текста как черный с помощ
значения RGB. В этом параграфе <span class="PHRASEstyle">данная строка
текста сделана синей, а фраза <span class="TEXTstyle"><b>зеленый на
желтом</b></span> имеет свои собственные настройки стиля
цвета.</span></p>

<p>Третий параграф возвращается к используемым по умолчанию настройк
цвета для страницы.</p>
</body>
</html>
Листинг 4.19. Код задания на странице свойств цвета текста

186

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 4.12. Изменение свойств цвета текста
Вся страница имеет серый фон с белыми буквами, что задается
настройкой стиля для селектора body. Определены три класса стиля
для приложения ко второму параграфу, чтобы переопределить эти
настройки страницы. Класс PARAstyle применяется к параграфу,
чтобы сделать его текст черным [rgb(0,0,0)] ; класс
PHRASEstyle применяется к части параграфа, чтобы изменить цвет
текста с черного на синий [#0000FF] ; класс TEXTstyle
применяется к подстроке текста, чтобы вывести зеленые буквы на
желтом фоне.
Конечно, скорее всего, такое количество цветов на одной странице вряд
ли будет использоваться, так как чрезмерное использование цветов
может отвлекать от информационного содержания страницы; однако
этот пример дает общее представление о том, как гибко можно
применять цвета фона и текста для элементов страницы.

Специальные символы
187

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Существуют определенные символы текста, которые невозможно
вывести в браузере, если ввести их непосредственно в текстовом
редакторе. Некоторые из этих символов имеют специальное значение в
XHTML, и, вместо их вывода, браузер будет интерпретировать эти
символы как код XHTML. Например, символы "<" (меньше) и ">"
(больше) используются для определения тегов. Поэтому нельзя вводить
эти символы непосредственно как часть контента страницы Web, так
как они будут интерпретироваться как теги XHTML, а не выводиться как
символы "меньше" и "больше"".
Другие символы, такие, как
(copyright) и
(trademark), не имеют
эквивалента на клавиатуре. Тем не менее, требуется способ
представления их на странице Web. Далее, браузеры всегда объединяют
последовательности символов пробелов в один пробел, независимо от
количества введенных в текстовом редакторе пробелов. Однако, иногда
может понадобиться оставить более одного пробела между буквами и
словами.
Коды символов
XHTML содержит набор имен специальных символов и кодов, которые
выводят соответствующие символы в браузере. Эти символы
записываются с префиксом в виде амперсанда ( & ) и заканчиваются
точкой с запятой ( ; ) , чтобы идентифицировать их как специальные
символы. Для представления этих символов в документе XHTML
можно использовать числовой код или название символа (если такое
имеется).
Таблица 4.6. Специальные символы - названия и коды
Выводимый
Название
Код
Описание
символ
двойная кавычка
амперсанд
апостроф
меньше

"
&

&quot;
&amp;

<

&lt;

&#34;
&#38;
&#39;
&#60;

>

&gt;

&#62; больше
188

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

&trade; &#153; торговая марка
&#160; неразрывный пробел
&#162; центы
разорванная вертикальная
&brvbar; &#166;
черта
&sect;
&#167; параграф, раздел
&copy;
&#169; авторское право
&laquo; &#171; левая угловая кавычка
&raquo; &#187; правая угловая кавычка
&not;
&#172; знак отрицания
зарегистрированная торговая
&reg;
&#174;
марка
&deg;
&#176; градус
&plusmn; &#177; плюс/минус
&para;
&#182; параграф, абзац
&nbsp;
&cent;

"
"

x

&middot; &#183; точка посредине
&bull;
&#149; маркер, буллит
&frac14; &#188; дробь одна четвертая
&frac12; &#189; дробь одна вторая
&frac34; &#190; дробь три четвертых
&divide; &#247; деление

x

&times; &#215; умножение

'
-

&oslash; &#248; маленькое перечеркнутое о
&Oslash; &#216; большое перечеркнутое О
&ndash; &#150; короткое тире

-

&mdash; &#151; длинное тире

В качестве примера применения этих специальных символов
следующий код оставляет по пять пробелов между словами, используя
между ними символы неразрывного пробела ( &nbsp; ) и маркера (
&bull; ).
189

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

МЕЖДУ&nbsp;&nbsp;&bull;&nbsp;&nbsp;ЭТИМИ&nbsp;&nbsp;&bull;&nbsp;&
СЛОВАМИ • ЗАДАНО •
ПО&nbsp;&nbsp;&bull;&nbsp;&nbsp;ПЯТЬ&nbsp;&nbsp;&bull;&nbsp;&nbsp;
ПРОБЕЛОВ.
Листинг 4.20. Использование специальных символов для вывода
страницы Web

МЕЖДУ x ЭТИМИ x СЛОВАМИ x ЗАДАНО x ПО x ПЯТЬ x ПРО
Листинг 4.21.
маркеров

Вывод

браузером

фиксированных

пробелов

и

Вывод кода XHTML
Если необходимо выводить теги XHTML как часть текста на странице
Web, то нельзя просто ввести символы "<" и ">". Эти символы
воспринимаются браузером как вложенные теги XHTML и будут
соответственно интерпретироваться. Вместо этого необходимо
использовать для вывода этих символов специальные символы XHTML
"&lt;" и "&gt;".
Предположим, что на странице Web нужно вывести следующий код
XHTML.

<p>Это параграф, в котором слово <span class="red">RED</span>
выводится красным цветом, помещенное внутри тега <span>, к которому
применяется класс стиля.</p>
Листинг 4.22. Вывод в браузере кода XHTML

Этот код необходимо ввести в текстовом редакторе, используя
специальные символы вместо символов < и >.
<pre style="font-size:9pt">
&lt;p&gt;Это параграф, в котором слово &lt;span class="red"&gt;
RED&lt;/span&gt; выводится красным цветом, помещенное внутри тега
&lt;span&gt;
, который использует класс стиля.&lt;/p&gt;
</pre>
190

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 4.23.
интерпретации

Код

для

вывода

тегов

XHTML

в

браузере

без

Форматирование кодов символов
Необходимо отметить, что для кодов специальных символов могут
применяться стили, так же, как и для других алфавитно-цифровых
символов. Например, следующее уравнение выводится полужирным
шрифтом Courier New размером 24 пункта.
<style type="text/css">
.equation {font-family:courier new; font-size:24pt; font-weight:bold}
</style>
<p class="equation">&frac14; + &frac12; = &frac34;</p>
Листинг 4.24. Применение стилей для кодов символов

Рис. 4.13. Коды символов с заданным стилем

191

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Формат изображений GIF
GIF (Graphics Interchange Format - формат для обмена графическими
изображениями) является наиболее широко распространенным
графическим форматом. Рисунки, сохраненные в этом формате, имеют
расширение файла .gif. Формат GIF может выводить черно-белые
изображения, полутоновые и цветные. При использовании цветных
изображений формат GIF ограничен выводом не более 256 цветов.
Обычно, когда графическая программа, сохраняет изображение в
192

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

формате GIF, программа использует до 256 цветов, которые лучше всего
представляют цвета изображения. В связи с технологией сжатия,
применяемой для изображений GIF, этот формат лучше всего подходит
для изображений с чистыми цветами, а не для непрерывно
изменяющихся цветов. Другими словами это хороший формат для
чертежей, логотипов, пиктограмм, текста и изображений с дискретным
набором цветов; это не лучший формат для фотографических
изображений.
Одной из проблем при использовании графики на странице Web
является размер файлов. Большой размер файла означает более
длительное время загрузки изображения и более продолжительное
ожидание посетителем страницы для просмотра. Обычно на размер
файла влияет не размер изображения GIF, а количество различных
цветов в изображении. Поэтому наиболее эффективным способом
сокращения размеров файлов и времени загрузки является сокращения
числа цветов изображения.
Большинство графических программ позволяют выбирать число цветов,
сохраняемых в изображении. На рисунке 5.1 показаны два варианта
сохранения файлов GIF, доступные в Adobe PhotoShop. Используемый
по умолчанию вариант слева применяет полный набор из 256 цветов.
Цветовая палитра изображения показана внизу справа изображения.
При этом создается файл размером примерно 10.9 кб. Справа то же
самое изображение форматировано с 16 цветами. Между
изображениями нет заметной разницы. Однако изображение справа
создает файл размером только 3.5 кб. При создании собственных
изображений необходимо исследовать методы, позволяющие в
наибольшей степени уменьшить размеры файлов, не искажая при этом
изображение, и сохраняющие правильное представление цветов.

193

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 5.1. Варианты сохранения изображений GIF с различными
цветовыми палитрами

Прозрачные изображения
Одна из версий формата GIF - GIF89a - имеет возможность создавать
прозрачные изображения. Можно определить в изображении один
определенный цвет, который затем будет выводиться прозрачным, когда
изображение появляется на странице. Чаще всего на рисунке для этого
используется один фоновый цвет. Когда он задается прозрачным, фон
исчезает, оставляя только изображение переднего плана, выводимое на
фоне страницы. Следующий рисунок демонстрирует эффект
прозрачности.

Рис. 5.2. Стандартное и прозрачное изображение на некотором фоне
Оба изображения, стандартное и прозрачное, создаются на белом фоне
194

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Рис. 5.3.
Многослойное
возрастающим разрешением

изображение

Анимированные изображения
195

открывается

со

все

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 5.4. Анимированное изображение GIF
Следующий экран Adobe ImageReady показывает создание нескольких из
60 изображений, которые используются для создания показанных выше
часов, секундная стрелка которых последовательно показывает все 60
секунд. Каждое положение стрелки создается в отдельном слое
изображения. Программа преобразует слои в анимационные кадры, или
ячейки, которые выводятся в определенной последовательности, когда
сохраняются как файл GIF.

196

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 5.5. Экран Adobe ImageReady, который показывает анимационные
ячейки, созданные из отдельных слоев изображения часов
Немного отличающаяся техника анимации используется в других
программах анимации. Некоторые программы для анимации GIF
требуют создания отдельных сохраненных изображений GIF. Каждое
изображение представляет собой отдельный кадр анимации. Эти
отдельные файлы GIF импортируются в программу и преобразуются в
последовательность ячеек анимации.
Файл анимированного GIF извлекается браузером, так же, как и любой
другой файл GIF. При выводе в браузере файл создает анимацию.
Конечно, если у вас нет опыта работы с графикой или не хватает
терпения создавать последовательность изображений для анимации, то
необходимые анимированные изображения GIF вполне можно найти в
Web.

Формат изображений PNG
197

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Более новым форматом с увеличивающейся популярностью является
формат PNG (Portable Network Graphic - переносимая сетевая графика,
произносится "пинг"). Этот формат используется для тех же целей, что и
GIF; однако, он создает файлы меньшего размера и без потери качества
разрешения. Он может выводить многослойные изображения и делает
это быстрее, чем формат GIF.
Наиболее заметное различие между форматами PNG и GIF находится в
области прозрачных изображений. Формат PNG допускает до 254
уровней прозрачности, позволяя изображениям лучше смешиваться с
цветом фона или узором страницы. Рисунок 5.6 показывает различия
при смешивании между изображениями PNG и GIF.

Рис. 5.6. Сравнение форматов PNG и GIF на фоне страницы
В изображении GIF справа прозрачность пикселей либо включена, либо
нет, создавая четкие границы, окружающие то, что иначе было бы
постепенным переходом между упавшей тенью и полной
прозрачностью фона изображения. Белый ореол окружает упавшую тень
на ее границе с полной прозрачностью. В противоположность этому,
изображение PNG слева мягко смешивается с цветом фона. Это
происходит за счет нескольких уровней прозрачности пикселей,
посредством чего пиксели, окружающие упавшую тень, получают
увеличивающиеся уровни прозрачности, по мере того как они
удаляются от изображения.

Формат изображений JPEG
Формат JPEG (Joint Photographic Experts Group) был создан для
хранения с различной степенью сжатия фотографических изображений
198

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 5.7. Изображения JPEG с различной степенью сжатия
199

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Для изображений Web, которые выводятся обычно с разрешением 72
пикселя на дюйм, степень сжатия, уменьшающая размер файла от 1/8 до
1/4 исходного размера файла, сохраняет удовлетворительную
визуальную точность.
Изображения JPEG сохраняются как файлы с расширением .jpg. Формат
JPEG не поддерживает многослойность или прозрачность; он также
плохо подходит для текста или штриховых изображений, так как
точность, которая требуется для создания прямых линий или четких
ребер, будет недостаточна при сжатии.

Вывод изображений
Графическое изображение размещается на странице Web с помощью
ссылки на местоположение файла GIF, PNG или JPEG. Файл
изображения затем загружается с сервера Web вместе со страницей.
Когда браузер выводит страницу, эта ссылка используется для
извлечения изображения и размещения его на странице.

Тег <img/>
Графические изображения размещают на страницах Web с помощью тега
<img/>. Общая форма этого тега показана в листинге 5.1. Отметим, что
тег <img/> не является контейнерным тегом и не требует отдельного
закрывающего тега.
<img src="url" alt="text"/>
Листинг 5.1. Общая форма тега <img/>

Тег <img/> появляется на странице Web в том месте, где должно
выводиться изображение. Атрибут src (источник) задает положение
файла изображения. Это может быть локальный или удаленный адрес
URL. Атрибут alt (дополнительный текст) требуется согласно
стандартам XHTML 1.1. Он содержит текстовое описание изображения,
которое выводится внутри небольшого всплывающего окна, когда
курсор мыши перемещается над изображением.
200

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рекомендуется включать атрибут alt, в частности для того, чтобы
снабдить этой информацией пользователей с недостаточным зрением.
Специальное программное обеспечение браузера может озвучить
текстовую строку, когда само изображение невозможно рассмотреть в
деталях. Поэтому необходимо использовать текст alt, который дает
точное и полезное описание изображения. Браузеры могут также
выводить текст во время ожидания загрузки изображения, давая тем
самым посетителю предварительное текстовое описание визуального
содержимого страницы. Наконец, некоторые люди предпочитают
отключать вывод графических изображений, как для ускорения загрузки
страниц, так и во время печати страницы; эти всплывающие окна
помогают идентифицировать изображения, которые иначе не
выводятся.
Отметим, что тег <img/> является линейным тегом и не может
появиться в строке сам по себе согласно стандартам XHTML. Этот тег
должен записываться внутри тегов <p>, <div> или другого блочного
тега.

Вывод локальных изображений
Файл изображения может располагаться в том же каталоге, что и
страница Web, которая его выводит; или можно создать отдельную
папку для хранения изображений, обычно вложенную в каталог
страницы Web. Если файл находится в том же каталоге, что и страница
Web, требуется только имя файла в качестве значения src, как
показывает следующий листинг.
<p><img src="yoda.jpg" alt="Изображение Йода"/></p>
Листинг 5.2. Вывод изображение,
каталоге, что и страница Web

находящегося

в

том

же

Рисунок 5.8 показывает вывод этого файла изображения. Если провести
курсором мыши над изображением, то в браузере появится
всплывающее окно, содержащее текстовое описание ( alt ) этого
изображения.
201

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 5.8. Вывод файла изображения
Если файл изображения находится в другом каталоге, отличном от
каталога страницы Web, которая его выводит, то необходимо указывать
как часть значения src (URL) путь доступа к этой папке. В
следующем примере файл изображения расположен в папке Media,
подкаталоге каталога, содержащего страницу Web, которая выводит
изображение.
<p><img src="Media/yoda.jpg" alt="Изображение Йода"/></p>
Листинг 5.3. Вывод
изображения
из
подкаталога
расположенного в каталоге текущей страницы

Media,

Вывод удаленных изображений
Можно соединиться и вывести изображение, расположенное в любом
месте Всемирной паутины (Web), не загружая изображение для вывода
из локального каталога. В этом случае в атрибуте src должен
присутствовать полный адрес URL изображения, начиная с
"http://". Рисунок 5.9 показывает страницу Web со ссылкой на
удаленный файл изображения. Отметим, что код тега <img/> включает
ссылку на сайт и путь доступа к каталогу изображения.
<img
src="http://www.exoticfelineimages.org/20050805/images/2005-08-05%20
12.03.03.jpg" alt="Изображение тигра"/>

202

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Размер изображения
Если не определено иначе, изображение выводится со своими
исходными значениями ширины и высоты. Используя стили width и/
или height, можно изменить размер изображения для вывода. Если
размер изображения нужно изменить с сохранением пропорции, то
надо закодировать только один размер, ширину или высоту. Браузер
определяет соответствующий размер для другого направления, чтобы
203

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

сохранить пропорцию. Однако можно намеренно исказить
изображение, задавая непропорциональные значения для ширины и
высоты.
Следующее изображение выводится в двух размерах - в исходном и в
полтора раза меньше исходного размера. Изменяется только ширина,
чтобы браузер задал высоту с сохранением пропорциональности.
<img src="Homer.gif" style="width:90px; height:120px" alt="Изображение
Гомера"/>
<img src="Homer.gif" style="width:60px" alt="Изображение Гомера"/>

Рис. 5.10. Изображение в полный размер и в 1/2 размера
При изменении размера изображения лучше не пытаться делать
изображение больше исходного размера. Его исходный размер имеет
наилучшее и самое четкое разрешение. При увеличении изображения
может происходить "пикселизация", приводящая к потере четкости.
Большинство компьютеров выводят изображения с разрешением 72 dpi
(dots per inch - точек на дюйм). Обычно бывает достаточно сохранять и
выводить изображения с этим разрешением. Сохранение изображений с
более высоким разрешением не создает заметного улучшения качества
выводимого изображения и приводит к большим размерам файлов,
204

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

которые увеличивают время загрузки.

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

Автономные изображения
Если изображение появляется отдельно стоящим в строке, то его можно
сместить по горизонтали влево, вправо или поместить в центре. Такое
позиционирование осуществляется с помощью применения стиля
text-align, только не для самого изображения, а для охватывающего
изображение контейнера, обычно тега <p> или <div>, который
отделяет свое содержимое от окружающего текста с помощью пустой
строки или переноса строки.
<p style="text-align:center"><img src="Earth.gif" alt="Изображение Земли"/></p>

Рис. 5.11. Горизонтальное выравнивание изображения с помощью тега
<p>
В приведенном выше примере тег <img/> вложен внутрь параграфа,
чтобы отделить его от окружающего текста пустыми строками.
Содержимое параграфа выравнивается по центру, размещая, таким
образом, содержащееся в параграфе изображение по центру.

205

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Плавающие изображения

Рис. 5.12. Плавающее изображение
Изображения можно смещать влево или вправо на странице
(окружающий текст при этом будет обтекать изображение), используя
стиль float:left или float:right внутри тега <img/>. Вокруг
изображения можно разместить дополнительные пробелы, чтобы
отделить его от окружающего текста с помощью увеличения полей.
Соответствующее изображение смещается вправо и имеет значение
левого поля в 25 пикселей, чтобы оставить свободное пространство
между изображением и этим параграфом.
<p>
<img src="Earth.gif" alt="Изображение Земли"
style="float:right; margin-left:25px"/>
... окружающий текст с переносом по словам ...
</p>
Листинг 5.4. Код для смещения изображения на странице вправо

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

Изображения в строке
Изображение может появиться "в строке" (in-line), то есть, на той же
строке, что и окружающий его текст. В этом случае необходимо
определить, как текст должен выравниваться относительно
изображения. По умолчанию, текст, окружающий изображение в строке,
выравнивается с нижним краем изображения. Однако можно
206

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

применить к тегу <img/> подходящим образом стиль verticalalign, чтобы изменить положение окружающего текста. Значения
свойства vertical-align показаны в таблице 5.1.
Таблица 5.1. Свойство стиля verticalalign
Свойство:
Значение
text-top
vertical-align middle
text-bottom (по умолчанию)

Применение стиля vertical-align в линейных тегах <img/>
проиллюстрировано на рисунке 5.13. Сопровождающий текст
выравнивается по верху, середине и нижнему краю изображений.
<p>Изображение<img src="1.gif" style="vertical-align:text-top"/>
с текстом, выравненным по верху изображения.</p>
<p>Изображение<img src="1.gif" style="vertical-align:middle"/>
с текстом, выровненным по середине изображения.</p>
<p>Изображение <img src="1.gif" style="vertical-align:text-bottom"/>
с текстом, выровненным по низу изображения.</p>

Рис. 5.13. Изображения в строке выровненные с сопровождающим
207

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

текстом различным образом

Обтекание текста вокруг изображений
Когда изображения смещаются влево и вправо на странице,
последующий текст будет обтекать изображение. Это иллюстрирует
рисунок 5.14, где изображение смещается влево, так что подпись к
изображению обтекает его справа. В то же самое время следующий
далее параграф также обтекает изображение.

Рис. 5.14. Плавающее изображение с обтекающим его текстовым
параграфом
Обратите внимание в следующем далее коде для показанного выше
вывода, что тег <img/> и заголовок находятся внутри тега <div>, так
как для изображения и текста согласно стандартам XHTML требуется
блочный контейнер.
<p>Это изображение с заголовком, где изображение смещается влево, а
заголовок обтекает его справа.</p>
<div>
<img src="book.gif" alt="Изображение книги"
style="float:left; margin-right:10px; margin-bottom:10px"/>
<b>Figure 1.</b><br/>
<i>The Passion of the Western Mind</i>.
</div>
208

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<p>Этот следующий далее параграф также обтекает изображение справа, та
как он записывается далее в строке ниже заголовка.</p>
Листинг 5.5. Код для плавающего изображения с обтекающим его
текстовым параграфом

Свойство clear
Хотя любой вводимый после плавающего изображения текст обтекает
изображение, иногда такое поведение может оказаться ненужным.
Например, следующий вывод содержит изображение книги и заголовок,
который обтекает изображение справа; однако следующий параграф,
вместо обтекания изображения, появляется ниже изображения.
Это изображение с заголовком, где изображение смещается влево, а
заголовок обтекает его справа.

Рис. 5.15. Плавающее изображение с параграфом, выводимым ниже
изображения
Код, создающий этот вывод, показан ниже.
<p>Это изображение с заголовком, где изображение смещается влево, а
заголовок обтекает его справа. </p>
<div>
<img src="book.gif" alt="Изображение книги"
209

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

style="float:left; margin-right:10px; margin-bottom:10px"/>
<b>Figure 1.</b><br/>
<i>The Passion of the Western Mind</i>.
</div>

<p style="clear:left">Этот параграф выводится ниже изображения, а не обтека
его ниже заголовка.</p>
Листинг 5.6. Код вывода параграфа
свойство clear для левого поля

текста,

использующего

Можно убедиться, что элемент страницы всегда появляется у левого
или правого поля страницы, если ему присваивается свойство стиля
clear. Значением этого свойства может быть left, right, both
или none (по умолчанию).
Таблица 5.2. Свойство стиля
clear
Свойство:
Значение

clear

left
right
both
none (по умолчанию)

В предыдущем примере следующему после изображения параграфу
задается линейный стиль clear:left. Это означает, что параграф
выводится на следующей доступной строке, у которой "очищено" (
"clear" ) левое поле. Поэтому параграф начинается на строке,
расположенной сразу под изображением, на первой строке, левое поле
которой не занято другим элементом.
Всякий раз, когда элемент страницы смещается влево или вправо,
может потребоваться вывод последующего текстового или графического
элемента ниже плавающего элемента, а не как часть обтекающего
содержимого. Значение свойства clear, присваиваемое этому
необтекающему элементу, зависит от положения поля ( left или
right ) плавающего элемента. Настройка clear:both обеспечивает,
210

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

что ни одно поле не занято элементом страницы перед выводом
оформленного так элемента.

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

Обычно создается одна буква (
) или слово для стилизованного
вывода. Пример буквы в тексте этого параграфа заимствован из
коллекции шрифтов Adobe Rosewood. Большинство пользователей,
скорее всего, не имеют в системе этот шрифт. Однако он выводится
браузером, так как он был преобразован в графическое изображение и
помещен на страницу с помощью тега <img/>.

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

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

border=<n>
Сплошная черная рамка вычерчивается вокруг изображения с помощью
атрибута border. Толщина рамки задается как n пикселей.
align="top|middle|bottom"
align="left|right"
Одна из версий атрибута align управляет размещением текста,
окружающего изображение. При использовании align="top",
align="middle", или align="bottom", изображение появляется
в строке - на той же строке, что и окружающий текст - и
сопровождающий текст выравнивается по верху, посредине, или по
низу изображения. Эти три атрибута выравнивания идентичны по
результату свойствам text-top, middle, и text-bottom стиля
vertical-align. Если выравнивание не определено в теге
<img/>, то изображение появляется в строке с окружающим текстом,
выровненным с нижним краем изображения.
Второй вариант атрибута align управляет обтеканием изображения
словами. Когда записывается align="left" или align="right",
то изображение появляется возле указанного левого или правого поля
страницы и сопровождается текстом, который его обтекает. Тег <img/>
должен находиться сразу перед текстом, который его обтекает. Эти
выравнивания
идентичны
по
результату свойствам
стиля
float:left и float:right.
hspace="n"
vspace="n"
Можно добавить дополнительное свободное пространство вокруг
изображения, используя один из двух или оба атрибута: hspace
(горизонтальный интервал) или vspace (вертикальный интервал), - и
задавая для каждого определенное число пикселей. Атрибут hspace
задает число оставляемых пикселей пустого пространства с левой и
правой стороны изображения; атрибут vspace определяет число
оставляемых пикселей пустого пространства сверху и снизу
изображения. В отличие от использования настроек стиля margin,
невозможно управлять пустым пространством на сторонах
212

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

изображения по отдельности.
height="n"
width="n"
Размерами изображений управляют атрибуты height и width. Они
работают аналогично свойствам стиля, используя значения в пикселях
для задания размеров изображений.

Фоновые изображения
Любой контейнер XHTML, от тега <body> и до тега <span>, может
использовать графические изображения в качестве фона для текстового
контента. Конечно, необходимо продуманно выбирать изображения,
которые не мешают и не отвлекают от текстовой коммуникации, для
которой предназначена страница.

Источники изображений

Рис. 5.17. Изображение текстуры
Большинство фоновых изображений являются текстурами, а не
рисунками. Рисунки оказываются слишком перегруженными и
отвлекают внимание от сообщения. Эти текстуры являются
стандартными изображениями GIF или JPEG, кроме того, эти
изображения обычно не совпадают с размером контейнера, для
которого они создают фон. Текстуры являются небольшими, специально
созданными изображениям, которые могут повторяться на странице и
213

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Свойство

Таблица 5.3. Свойства стиля фона
Значение

Задает соединение фонового изображения с
документом, будет ли изображение
background-attachment прокручиваться вместе с тек нет.
fixed
scroll

background-image

нто
сто

Задает фоновое изображение элемента страницы,
определяемое как
url(url)
none

Задает положение верхнего левого угла фонового
изображения относительно верхнего левого угла
контейнерного элемента, используя физический
мер
раз
214

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

background-position

процент, ключевое слово или пару ключевых слов.
left top
left% top%
top|right|bottom|left|center
top left|top center|top right
center left|center center|center right
bottom left|bottom center|bottom right
Задает повторение фонового изображения по
горизонтали и по вертикали, в обоих
направлениях или вывод без повторения.

background-repeat

repeat-x
repeat-y
repeat
no-repeat

Фоновое изображение определяется с помощью свойства backgroundimage:url(url), где расположение файла изображения задается его адресом
url. Если файл изображения хранится в том же месте, что и страница, то
необходимо ввести только имя файла. Если никакие другие настройки
стиля в отношении фонового изображения не задаются, то оно
повторяется горизонтально и вертикально, вдоль и поперек контейнера,
чтобы заполнить фон изображением.
Страница, показанная на рисунке 5.18, использует свойство
background-image для заполнения страницы горизонтально и
вертикально с помощью текстуры. Никакие другие свойства стиля не
требуются.
<style type="text/css">
body {background-image:url(Background.jpg)}
</style>

215

онт

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 5.18. Страница с изображением текстуры, используемым в
качестве фона
Изображение Background.jpg имеет реальный размер 144 х 144 пикселя.
Если дополнительных свойств стиля не задано, изображение
автоматически повторяется поперек и вниз по странице, чтобы
заполнить все доступное пространство.
Конечно, в качестве фоновых изображений не обязательно применять
повторяющиеся
текстуры.
Можно
воспользоваться
любым
изображением GIF или JPEG. Однако надо быть осторожным при
использовании обычных изображений в качестве фона, так как они
могут иметь слишком яркие цвета и затруднять чтение расположенного
поверх текста. Если имеется программа редактирования изображений,
то можно уменьшить плотность или прозрачность изображения,
смягчить его интенсивность для применения в качестве изображения
водяного знака. Это было сделано для изображения, показанного на
рисунке 5.19.
<style type="text/css">
216

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

body {background-image:url(Stonehenge.jpg)}
</style>

Рис. 5.19. Страница с повторяющимся фоновым изображением с
уменьшенной плотностью
Как в случае предыдущей текстуры фона, изображение повторяется и по
горизонтали, и по вертикали, чтобы заполнить всю страницу. Этот
повторяющийся шаблон более заметен при использовании обычного
графического изображения.
Можно сделать так, что будет выводиться одно или несколько фоновых
изображений,
задавая
соответствующим
образом
свойство
background-repeat. Значение repeat-x повторяет изображение
по горизонтали столько раз, сколько необходимо, чтобы заполнить
контейнер слева направо, создавая ряд изображений; repeat-y
повторяет изображение по вертикали столько раз, сколько необходимо
для заполнения контейнера сверху вниз, создавая столбец изображений;
значение repeat повторяет изображение по обоим направлениям,
чтобы полностью заполнить контейнер (значение по умолчанию); а
217

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

no-repeat создает одно изображение в верхнем левом углу
контейнера.
Если изображение не повторяется, можно указать положение
единственного изображения в контейнере, используя свойство
background-position. Следующий код размещает изображение в
центре страницы с помощью background-position:320px
150px. Вывод в браузер показан на рисунке 5.20.
<style type="text/css">
body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat;
background-position:320px 150px}
</style>

Рис. 5.20.
Страница с единственным фоновым изображением,
размещенным в точно указанном месте
Два значения в пикселях - 320px и 150px - задают расстояние от левого
края и верха страницы до левого края и верха изображения. То есть,
левый край изображения находится на расстоянии 320 пикселей от
218

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

левого края страницы; верхний край изображения находится на
расстоянии 150 пикселей от верхнего края страницы. Можно
попробовать несколько вариантов размещения, прежде чем найти
удовлетворительное решение.
Кроме точного определения в пикселях положения фонового
изображения, можно определить для размещения изображения
определенный процент от ширины и высоты страницы. Можно также
использовать для позиционирования изображения различные ключевые
слова или пары ключевых слов.
Ключевое слово top, right, bottom, left, или center
помещает изображение, соответственно, вверху в центре, справа в
центре, внизу в центре, в центре страницы и слева в центре. Пары
ключевых слов top left (вверху слева), top center (вверху в
центре), top right (вверху справа), center left (в центре слева),
center center (в центре), center right (в центре справа),
bottom left (внизу слева), bottom center (внизу в центре) или
bottom right (внизу справа) помещают изображение в указанные
позиции на странице.
Важно помнить, что эти позиции задаются относительно полного
размера страницы Web, а не размера окна браузера. Поэтому
изображение, помещенное в центре или внизу страницы, может быть
не видимо, пока страница не будет прокручена, так чтобы изображение
стало видимо.
В приведенных выше примерах фоновое изображение прокручивается
при прокручивании текста на странице. Для некоторых типов фона
может понадобиться, чтобы изображение оставалось зафиксированным
и текст прокручивался бы поверх фиксированного фона. Этот результат
реализуется с помощью свойства background-attachment. Его
значением по умолчанию является scroll ; если изменить его на
fixed, то фоновое изображение будет удерживаться в одной позиции
на странице при прокручивании текста поверх него. Результат показан
на рисунке 5.21.
<style type="text/css">
body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat;
219

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

background-position:320px 150px; background-attachment:fixed}
</style>

Рис. 5.21. Страница с зафиксированным фоновым изображением, над
которым прокручивается контент страницы
Предыдущие примеры показывают фоновые изображения для всей
страницы Web. Однако любой контейнерный тег может иметь фоновое
изображение. Рисунок 5.22 показывает параграф с фоновой текстурой.
<style type="text/css">
p#BKGND {background-image:url(Background.jpg); margin:20px; font-family:
verdana; font-size:12pt; font-weight:bold; text-align:justify}
</style>
<h1>Фоновая текстура параграфа</h1>

<p id="BKGND">Это параграф с фоновой текстурой.
Используемое по умолчанию свойство background-image повторяет фоновый
шаблон по горизонтали и вертикали, чтобы заполнить область
220

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

параграфа.</p>

Рис. 5.22. Параграф с фоновой текстурой

Фильтры
Фильтры являются настройками стиля, которые применяются к
изображению для изменения его визуального представления.
Существуют различные фильтры для изменения уровней плотности
цвета,
расплывчатости
изображений,
создания
зеркальных
изображений, выпуклых и гравированных изображений, создания
теней и для применения других специальных эффектов к содержимому
страницы Web. Фильтры используют с помощью свойства filter,
общая форма которого показана в листинге 5.7.
filter:filtername (property=value [, property=value]...)
Листинг 5.7. Общая форма применения фильтров

За именем фильтра filtername следует разделенный запятыми и
221

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Фильтр alpha()
222

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Фильтр alpha() является ссылкой на альфа-канал изображения,
который используется для управления плотностью или прозрачностью
изображения. Существует четыре стиля alpha, каждый из которых
производит различные эффекты или обесцвечивание изображения от
полной до частичной интенсивности. Эти четыре варианта фильтров
alpha - uniform, linear, radial, и rectangular представлены в таблице 5.4.
Таблица 5.4. Свойства и
значения фильтра alpha()
Свойство
Значения
style=0 (uniform)
opacity=n
style=1 (linear)
opacity=n
finishOpacity=n
startX=n
finishX=n
filter:alpha()
startY=n
finishY=n
style=2 (radial)
opacity=n
style=3 (rectangular)
opacity=n

Равномерный фильтр alpha()
Равномерный фильтр alpha (uniform) применяет один уровень
плотности для всего изображения. Он выводит изображение с
определенным процентом плотности: от 100% плотности, как в
исходном изображении, и до плотности 0%, создающей вообще
223

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

невидимое изображение.
Для этого фильтра требуются два значения свойства. Свойство
style=0 определяет равномерный стиль альфа; свойство
opacity=n задает уровень плотности ( n ) как процент от полной
интенсивности. Результат применения альфа-фильтра к тегу <img/>
можно видеть на рисунке 5.24. Его плотность задана как 50, то есть
изображение выводится с 50% от полной интенсивности.
<img src="GallatinValley.jpg" style="filter:alpha(style=0, opacity=50)"/>

Рис. 5.24. Изображение с равномерной плотностью 50%

Линейный фильтр alpha()
Линейный фильтр alpha осветляет изображение от начальной заданной
плотности до конечной плотности, применяя операцию по горизонтали
или по вертикали. Требуется задание пяти свойств. Свойство style=1
определяет линейный фильтр альфа. Свойство opacity=n задает
начальный процент плотности; свойство finishOpacity=n задает
конечный процент плотности. Оставшиеся два свойства определяют
горизонтальное или вертикальное направление применения фильтра.
Пара свойств startX=n и finishX=n задают начальную и конечную
точки приложения горизонтального осветления, где n является
процентом расстояния от левого края изображения. Пара свойств
startY=n и finishY=n задают начальную и конечную точки для
применения вертикального осветления, где n является процентом
расстояния от верхнего края изображения.
224

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Типичное приложение этого фильтра начинает обесцвечивание при
startX=0 (левый край изображения) и заканчивает осветление при
finishX=100 (правый край изображения). Эти свойства приведены
в следующей таблице стилей для изображения, показанного на рисунке
5.25.
<img src="GallatinValley.jpg" style="filter:alpha(style=1, opacity=100,
finishOpacity=0, startX=0, finishX=100)"/>

Рис. 5.25. Изображение с линейной плотностью от 100% до 0%
Можно варьировать направление градиента осветления, изменяя на
дополнительные значения начального и конечного процентов. То есть,
задание startX=100 и finishX=0 осветляет изображение справа
налево. Можно также осветлять изображение сверху вниз, используя
свойства startY и finishY вместо startX и finishX.

Радиальный фильтр alpha()
Радиальный фильтр альфа осветляет изображение круговым образом по
радиусам из середины наружу. Он требует задания только двух свойств.
Свойство style=2 определяет радиальный фильтр; свойство
opacity=n задает процент начальной плотности в центре
изображения. Начиная с начальной плотности, изображение
осветляется до его краев, создавая круговое изображение.
Следующий код используется для создания изображения на рисунке
5.26. Оно начинает градиент со 100% плотности в центре изображения.
225

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<img src="GallatinValley.jpg" style="filter:alpha(style=2,
opacity=100)"/>

Рис. 5.26. Изображение с радиальной плотностью от 100% до 0%

Прямоугольный фильтр alpha()
Прямоугольный фильтр альфа создает градиент осветления изнутри
наружу, как и радиальный фильтр, только использует в качестве шаблона
прямоугольник, а не окружность. Для фильтра требуется задать два
параметра. Свойство style=3 определяет прямоугольный фильтр;
свойство opacity=n задает процент начальной плотности в центре
изображения. Начиная с этой плотности изображение осветляется к
своим краям, создавая прямоугольное изображение.
Следующий код используется для создания изображения на рисунке
5.27. Он начинает градиент со 100% плотности в центре изображения
и заканчивает плотностью 0% на его краях.
<img src="GallatinValley.jpg" style="filter:alpha(style=3,
opacity=100)"/>

226

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 5.27. Изображение с прямоугольным фильтром с плотностью от
100% до 0%

Фильтр blur()
Фильтр blur() создает впечатление движения, размывая
изображение на определенное число пикселей в определенном
направлении. Свойства этого фильтра показаны в таблице 5.5.
Таблица 5.5. Свойства
и значения фильтра
blur()
Свойство Значения
strength=n
filter:blur() direction=n
add=true|false

Свойство strength=n задает число пикселей для размывания: чем
больше число, тем больше размывание. Свойство direction=n
задает угол размывания в градусах, при этом 0 соответствует
направлению вверх, 90 - направлению вправо, 180 - направлению
вниз и 270 - направлению влево. Можно использовать
промежуточные значения. Свойство add со значением true создает
наложение размывания на исходное изображение для создания эффекта
размытого движения, а не просто размытого изображения.
227

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Следующий код создает изображение, показанное на рисунке 5.28
Размывание на расстояние 25 пикселей выполняется влево от
изображения.
<img src="Osprey.jpg" style="filter:blur(strength=25, direction=270,
add=true)"/>

Рис. 5.28. Изображение с фильтром blur()

Фильтр emboss()
Фильтр emboss() выводит изображение в виде выпуклой текстуры
(барельеф) с помощью полутоновых значений. С этим фильтром не
связаны никакие свойства и значения, только специальное имя этого
фильтра Microsoft.
Изображение на рисунке 5.29 создано с помощью следующего кода.
Обратите внимание на полное имя этого фильтра.
<img src="Osprey.jpg"
style="filter:progid:DXImageTransform.Microsoft.Emboss()"/>

228

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 5.29. Изображение с фильтром emboss()

Фильтр engrave()
Фильтр engrave() выводит изображение как выгравированную
текстуру с помощью полутоновых значений. Его действие обратно
действию фильтра emboss(), т.е. создается текстура обратного
барельефа. Для данного фильтра не существует свойств или значений,
только специальное имя этого фильтра Microsoft.
Следующий код создает изображение, показанное на рисунке 5.30.
<img src="Osprey.jpg"
style="filter:progid:DXImageTransform.Microsoft.Engrave()"/>

Рис. 5.30. Изображение с фильтром engrave()

Фильтры flipH() и flipV()
229

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Имеется
два
фильтра,
которые
позволяют
изменить
на
противоположное направление изображения. Фильтр flipH()
переворачивает изображение в горизонтальном направлении, создавая
зеркальное изображение исходной картинки. Фильтр flipV()
переворачивает
изображение
в
вертикальном
направлении,
представляя его "вверх ногами". Для этих фильтров не требуется
задавать никакие свойства. Два изображения на рисунке 5.31 создают с
помощью следующего кода.
<img src="GallatinValley.jpg" style="filter:flipH()"/>
<img src="GallatinValley.jpg" style="filter:flipV()"/>

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

Фильтры xRay(), invert(), и gray()
Имеются два фильтра, которые создают изображение, похожее на
фотографический негатив. Фильтр xRay() удаляет из изображения
цвет и выводит его в негативном полутоновом изображении. Фильтр
invert() обращает уровни оттенков цвета, насыщенности и яркости
цветного изображения, выводя его как цветной негатив. Если требуется
просто удалить цвет из изображения и вывести его полутоновым, то
можно воспользоваться фильтром gray(). Эти фильтры не
230

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

используют никаких параметров.
<img src="Osprey.jpg" style="filter:xRay()"/>
<img src="Osprey.jpg" style="filter:invert()"/>
<img src="Osprey.jpg" style="filter:gray()"/>

Рис. 5.32. Изображения, выводимые с помощью фильтров xRay(), invert()
и gray()

Фильтр dropShadow()
Существуют определенные фильтры, которые нельзя применить
непосредственно к изображению, а нужно применять к контейнеру,
окружающему изображение. Изображение может находиться, например,
внутри тега <span> или <div>, с которыми работает фильтр. По сути,
фильтр применяется к содержимому контейнерного тега.
Фильтр dropShadow() является примером одного из таких фильтров,
который должен использоваться посредством контейнера. Для
правильной работы контейнер должен быть достаточно большого
размера, чтобы вмещать изображение и падающую от него тень.
Свойства и значения фильтра dropShadow() показаны в таблице 5.6.
Таблица 5.6. Свойства и
значения для фильтра
dropShadow()
Свойство:
Значения

filter:dropShadow()

color=color
offX=n
231

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

offY=n

Фильтр dropShadow() требует задания трех свойств. Свойство
color=color задает цвет падающей тени; можно использовать
название любого цвета или числовое значение. Свойство offX=n
задает горизонтальную ширину тени в пикселях; свойство offY=n
задает вертикальную высоту тени в пикселях. Помните только, что эти
значения применяются к контейнерному элементу, а не к самому
изображению. Поэтому необходимо задавать ширину и высоту
контейнера достаточно большими, чтобы в нем могло поместиться
изображение и его падающая тень.
В следующем примере изображение имеет размер 225 х 150 пикселей и
падающую тень в 10 пикселей. Поэтому его контейнерный раздел имеет
размер 235 x 160 пикселей, чтобы в нем разместилось само
изображение плюс его горизонтальная и вертикальная падающая тень.

<div style="width:235px; height:160px; filter:dropShadow(color=black, offX=10, offY
<img src="GallatinValley.jpg"/>
</div>

Рис. 5.33.
Изображение, выведенное с применением фильтра
dropShadow() для контейнерного тега <div>
Падающую тень можно применять для изображения, даже если ее
точный размер неизвестен. Задайте просто ширину или высоту
контейнера равной 0px. Если одно из таких значений присутствует, то
контейнер будет расширяться, чтобы вместить свое содержимое.
232

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Необходимо также задать для изображения значения margin-right и
margin-bottom, которые не меньше ширины падающей тени, чтобы
было пространство для ее изображения. Следующий пример использует
эту методику для вывода такой же падающей тени, как и на предыдущем
рисунке.
<div style="width:0px; filter:dropShadow(color=black, offX=10, offY=10)">
<img src="GallatinValley.jpg" style="margin-right:10px; margin-bottom:10px"/>
</div>

Фильтр shadow()
Такие принципы вывода падающей тени применимы и для фильтра
shadow(). Изображение, к которому добавляется тень, должно
находиться внутри контейнера, которое имеет достаточный размер для
размещения изображения и его тени. Фильтр применяется к контейнеру,
содержащему изображение. Свойства и значения, требуемые фильтру
shadow(), показаны в таблице 5.7.
Таблица 5.7. Свойства и
значения фильтра
shadow()
Свойство Значение
color=color
filter:shadow() direction=n
strength=n

С фильтром shadow() связаны три свойства. Свойство
color=color задает цвет тени как название цвета или как числовое
значение. Свойство direction=n задает угол тени в градусах
(направление вверх соответствует 0 градусов). Свойство strength=n
задает длину тени в пикселях. Следующий код создает контейнер
<div>, окружающий изображение неизвестного размера, и применяет
к контейнеру фильтр shadow().
233

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<div style="height:0px; filter:shadow(color=gray, direction=135, strength=15)">
<img src="GallatinValley.jpg" style="margin-right:15px; margin-bottom:15px"/>
</div>

Рис. 5.34. Изображение, выводимое с фильтром shadow(), который
применяется к его контейнерному тегу
Эффект тени можно применять к символам текста , так же, как к
изображениям. Текст должен находиться внутри контейнера, размеры
которого должны быть достаточны для размещения текста и его тени. В
следующем примере контейнер <span> создает строку текста с тенью.
Так как тег <span> имеет размер по умолчанию, достаточный только
для размещения своего содержимого, то размер этого контейнерного
тега надо увеличить, чтобы разместить и вложенный текст, и его тень.
<span style="width:350px; height:45px; font-size:24pt; font-weight:bold;
filter:shadow(color=silver,direction=135,strength=7)">
A Shadowed Text String
</span>

Рис. 5.35. Текст, выводимый с фильтром shadow(), который применяется
к контейнерному тегу
234

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Фильтр glow()
Фильтр glow() добавляет сияние за пределами границ изображения.
Подобно фильтрам dropShadow() и shadow(), фильтр glow()
применяется к контейнерному элементу. Свойства и значения для
фильтра glow() показаны в таблице 5.8.
Таблица 5.8.
Свойства и значения
для фильтра glow()
Свойство Значение
filter:glow()

color=color
strength=n

Свойство color=color задает цвет сияния, а свойство
strength=n задает его размер в пикселях. Значение strength
используется также в качестве размера поля, окружающего изображение,
и размера поля, окружающего текст.
Следующий код создает эффект сияния, показанный на рисунке 5.36.
<div style="height:0px; filter:glow(color=slategray, strength=20)">
<h2 style="margin:20px">Сияющая картина</h2>
<img src="GallatinValley.jpg" style="margin:20px"/>
</div>

235

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 5.36. Текст и изображение, выводимые с фильтром glow(), который
применяется к их контейнеру
Требуемый эффект к текстовой строке и изображению был создан с
помощью контейнерного тега <div>. В данном случае эффект сияния
окружает оба элемента; поэтому используется стиль margin, чтобы
создать достаточное для сияния свободное окружающее пространство
вокруг всех четырех сторон элементов.

236

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Оформление неупорядоченных списков
Одним из типов списков является неупорядоченный список, т.е.
последовательность позиций, помеченных специальным символом маркером, и отделенных от окружающего текста одиночными пустыми
строками. Список выводится через один интервал и с отступом от
левого поля. Пример кодирования и вывод в браузере неупорядоченного
списка показан ниже.
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>

x Элемент списка 1
x Элемент списка 2
x Элемент списка 3
237

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 6.1. Неупорядоченный список

Тип маркера можно определять с помощью исключенного атрибута
type="disc|circle|square" тега <ul>.
Однако предпочтительнее применять вместо этого атрибута свойства
таблиц стилей. Для неупорядоченных списков существует два свойства
стиля, которые можно использовать для задания типа символа маркера,
который предшествует элементам списка. Эти свойства и их
соответствующие значения показаны в таблице 6.1.
Таблица 6.1. Типы
маркеров оформления
списков
Свойство Значение
disc
circle
list-style-type
square
none

list-style-image url(url)

Определение символов маркеров
Неупорядоченный список использует свойство list-style-type
для вывода в качестве типа маркера окружности. Оформление задается
во встроенной таблице стилей для селектора ul.
<style type="text/css">
ul {list-style-type:circle}
</style>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
238

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<li>Элемент списка 3</li>
</ul>
Листинг 6.2. Код для задания типа маркера

Неупорядоченный список с маркером-окружностью:
Элемент списка 1
Элемент списка 2
Элемент списка 3
Конечно, при использовании в таблице стилей простого селектора ul
все неупорядоченные списки на странице будут иметь маркерыокружности. Можно при желании применять селекторы ID, чтобы
различным спискам можно было задать различные символы-маркеры.
Следующая таблица стилей определяет три таких списка, каждый со
своим собственным символом-префиксом.
<style type="text/css">
ul#List1 {list-style-type:disc}
ul#List2 {list-style-type:circle}
ul#List3 {list-style-type:square}
</style>
Листинг 6.4. Встроенная таблица стилей для типов маркеров
list-style

Определенная структура списка получает тип маркера, задавая
соответствующий ID для своего тега <ul>. То есть список,
определяемый с помощью тега <ul id="List3">, будет иметь в
качестве маркера символ в виде квадрата.

Задание полей для неупорядоченного списка
Обычно неупорядоченные списки имеют отступ от левого поля на
фиксированное число пикселей. В некоторых случаях может
понадобиться изменить это поведение. Можно включить задание стиля
margin-left, чтобы переместить элементы к левому полю (задание
поля для списка соответствует заданию поля для его контейнера). В
239

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

следующем коде эта настройка поля добавляется в селектор ul, чтобы
выровнять маркеры по полю страницы в 20 пикселей.
<style type="text/css">
ul {list-style-type:circle; margin-left:20px}
</style>
Листинг 6.5.
страницы

Выравнивание

неупорядоченного

списка

по

полю

Подавление вывода символов маркеров
Может понадобиться использование других, отличных от стандартных,
символов маркеров перед элементами списка. В следующем примере
свойство list-style-type задается как none, чтобы подавить
вывод маркеров. Затем каждый элемент списка помечается символом
правой стрелки ( ) из шрифта Webdings (числовой символ "4" выводит
символ правой стрелки в этом семействе шрифтов).
<style type="text/css">
ul {list-style-type:none; margin-left:20px}
</style>
<ul>
<li><span style="font-family:webdings">4</span> Элемент списка 1</li>
<li><span style="font-family:webdings">4</span> Элемент списка 2</li>
<li><span style="font-family:webdings">4</span> Элемент списка 3</li>
</ul>
Листинг 6.6. Код для вывода специального символа маркера

Рис. 6.1. Неупорядоченный список с маркерами в виде стрелки
В этом примере используемый по умолчанию символ маркера не
заменяется правой стрелкой. Вместо этого подавляется вывод маркера и
240

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

в начале каждого элемента списка добавляется символ стрелки. Хотя
вывод маркера подавляется, пространство для скрытого символа все
еще занимает место в строке. Поэтому требуется настройка marginleft, чтобы сместить элементы списка назад в их обычные позиции.
Рассмотрим следующий список, в котором символ правой стрелки
добавляется перед элементами, но вывод используемых по умолчанию
маркеров намеренно не подавляется.
<style type="text/css">
ul {margin-left:20px}
</style>
<ul>
<li><span style="font-family:webdings">4</span> Элемент списка 1</li>
<li><span style="font-family:webdings">4</span> Элемент списка 2</li>
<li><span style="font-family:webdings">4</span> Элемент списка 3</li>
</ul>
Листинг 6.7. Код
символов маркеров

неупорядоченного

списка

без

подавления

Рис. 6.2.
Неупорядоченный список с видимыми маркерами и
символами стрелки
Когда в таблицу стилей добавляется list-style-type:none, то
используемые по умолчанию символы в форме диска не выводятся;
однако занимаемое этими символами пространство остается.
Чтобы переместить список, включая стрелки, влево, так чтобы он занял
это пространство и сохранил нормальный отступ элементов списка, в
таблицу стилей добавляют свойство margin-left. Левое поле
шириной примерно 20 пикселей выравнивает символы правой стрелки
в позиции, которую ранее занимали маркеры.

241

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Использование
графических
неупорядоченных списков

изображений

для

Вместо использования текстовых символов для маркировки элементов
списка можно применять графические изображения, задавая свойство
list-style-image:url(url). Если изображение находится в
том же каталоге, что и страница со списком, то url является просто
именем графического файла. В следующем примере изображение с
именем Bullet.gif используется для маркировки элементов списка. Вывод
в браузере показан на рисунке 6.3.
<style type="text/css">
ul {list-style-image:url(Bullet.gif); vertical-align:middle}
</style>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>
Листинг 6.8. Код неупорядоченного
изображениями маркерами

списка

с

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

Рис. 6.3. Неупорядоченный список с графическими изображениями
маркерами
В зависимости от размера изображения может потребоваться настроить
вертикальное выравнивание элементов списка, чтобы выровнять их
требуемым образом с изображением. Обычно текст выравнивается по
нижней части изображения в строке. В этом примере для изображения
применяется свойство vertical-align:middle, чтобы выровнять
сопровождающий текст со серединой изображения. Можно также
использовать значения text-top
и
text-bottom
для
242

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

вертикального выравнивания текста с верхним или нижним краем
изображения.

Оформление упорядоченных списков
Упорядоченный список является рядом элементов, перед которыми
стоят последовательные числа; он отделен от окружающего текста
одиночными пустыми строками. Список выводится через один
интервал и отступает от левого поля таким же образом, как и
неупорядоченный
список.
Используемый
по
умолчанию
упорядоченный список кодируется и выводится, как показано ниже.
<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ol>
Листинг 6.9. Код упорядоченного списка

1. Элемент списка 1
2. Элемент списка 2
3. Элемент списка 3
Листинг 6.10. Упорядоченный список

В таблице стилей можно задавать тип символов нумерации, которые
будут стоять перед элементами списка. Для этого применяется свойство
list-style-type со значениями, показанными в таблице 6.2. По
умолчанию используется значение decimal.
Таблица 6.2. Типы
символов нумерации
упорядоченных списков
Свойство Значение
decimal
upper-alpha
lower-alpha
243

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

upper-roman
lower-roman
none

Задание числовых символов
Следующий упорядоченный список нумеруется большими римскими
цифрами ( upper-roman ). Вывод браузер показан в листинге 6.12.
<style type="text/css">
ol {list-style-type:upper-roman}
</style>
<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ol>
Листинг 6.11. Код упорядоченного списка с большими римскими
цифрами

I. Элемент списка 1
II. Элемент списка 2
III. Элемент списка 3
Листинг 6.12. Упорядоченный список с римскими цифрами

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<style type="text/css">
ol#List1 {list-style-type:upper-roman}
ol#List2 {list-style-type:lower-roman}
</style>
<ol id="List1">
<li>Элемент списка 1</li>
<li>Элемент списка 2
<ol id="List2">
<li>Элемент списка 2a</li>
<li>Элемент списка 2b</li>
</ol>
</li>
<li>Элемент списка 3</li>
</ol>
Листинг 6.13. Код вложенных упорядоченных списков

I. Элемент списка 1
II. Элемент списка 2
i. Элемент списка 2a
ii. Элемент списка 2b
III. Элемент списка 3
Листинг 6.14. Вложенные
римскими цифрами

упорядоченные

списки

с

нумерацией

Оформление списков определений
Список определений является рядом терминов и определений,
отделенных от окружающего текста одиночной пустой строкой.
Термины в списке выравниваются по левому полю; определения
смещаются вправо и переносятся по словам на следующих строках.
Вспомните,что список определений заключается внутрь тегов <dl> и
содержит один или несколько тегов <dt>, перечисляющих
определяемые термины. Каждый термин имеет связанный с ним тег
<dd>, окружающий его определение. Пример списка определений
закодирован ниже и показан в листинге 6.16.
245

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<dl>
<dt>Term 1</dt>
<dd>Это определение Term 1. Определяемый термин выводится в
отдельной строке, за которой следует блок текста определения. Определ
смещается относительно определения вправо и переносится по словам.
</dd>
<dt>Term 2</dt>
<dd>Это определение Term 2. Определяемый термин выводится в
отдельной строке, за которой следует блок текста определения. Определ
смещается относительно определения вправо и переносится по словам.
</dd>
</dl>
Листинг 6.15. Код списка определений

Term 1
Это определение Term 1. Определяемый термин выводится в отдельно
за которой следует блок текста определения. Определение смещается
относительно определения вправо и переносится по словам.
Term 2
Это определение Term 2. Определяемый термин выводится в отдельно
за которой следует блок текста определения. Определение смещается
относительно определения вправо и переносится по словам.
Листинг 6.16. Список определений

Не существует свойств стилей, специально созданных для списков
определений. Однако можно применять к такому списку стили
форматирования, чтобы придать ему другой вид и выравнивание. В
следующем примере для приведенного выше списка задают
дополнительные интервалы между элементами, используя настройки
margin для тегов <dd>.
<style type="text/css">
dd {margin-top:10px; margin-bottom:10px}
</style>
<dl>
<dt>Term 1</dt>
<dd>Это определение Term 1. Определяемый термин выводится в
246

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

отдельной строке, за которой следует блок текста определения. Определ
смещается относительно определения вправо и переносится по словам.<
<dt>Term 2</dt>
<dd>Это определение Term 2. Определяемый термин выводится в
отдельной строке, за которой следует блок текста определения. Определ
смещается относительно определения вправо и переносится по словам.<
</dl>
Листинг 6.17. Код списка определений с настройками margin

Term 1

Это определение Term 1. Определяемый термин выводится в отдельной
за которой следует блок текста определения. Определение смещается
относительно определения вправо и переносится по словам.
Term 2

Это определение Term 2. Определяемый термин выводится в отдельной
за которой следует блок текста определения. Определение смещается
относительно определения вправо и переносится по словам.
Листинг 6.18. Список определений с верхним и нижним полями,
окружающими элементы списка

Контекстные селекторы
Списочные структуры предоставляют хорошую возможность обсудить
дополнительный метод - дополнение к селекторам ID - для
применения выборочного оформления к элементам XHTML.
Рассмотрим следующий сценарий для двух списков, требующих
различного оформления: элементы неупорядоченного списка выводятся
цветом, отличным от цвета вывода упорядоченного списка.
Два списка могут применять различные настройки цвета с помощью
селекторов своих тегов. То есть селектор ul может иметь цвет,
отличающийся от цвета селектора ol, с помощью следующего кода.
<style type="text/css">
247

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

ul {color:red}
ol {color:blue}
</style>
<ul>
<li>Красный 1</li>
<li>Красный 2</li>
<li>Красный 3</li>
</ul>
<ol>
<li>Синий 1</li>
<li>Синий 2</li>
<li>Синий 3</li>
</ol>
Листинг
6.19.
Код
для
вывода
неупорядоченного
упорядоченного списков различным цветом

и

Рис. 6.4. Неупорядоченный и упорядоченный списки, выводимые
различным цветом
Список <ul> выводится красным цветом, а список <ol> - синим.
Однако альтернативный способ состоит в использовании различных
тегов <li> в двух списках. Тегу <li>, который выводится внутри тега
<ul>, должен быть задан цвет, отличный от цвета тега <li>, который
выводится в списке <ol>. Необходимо уметь различать теги <li>,
появляющиеся в двух разных списках. Это различие реализуется с
помощью таблицы стилей следующего вида.
<style type="text/css">
ul li {color:red}
ol li {color:blue}
248

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</style>
Листинг 6.20. Использование контекстных селекторов

Пары селекторов ul li и ol li описывают комбинацию тегов,
которая должна возникнуть, чтобы был применен ассоциированный
стиль. Эти контекстные селекторы - два или больше простых
селекторов, разделенных пробелами - создают отношения тегов,
которое должно возникнуть, прежде чем применяется стиль.
Предыдущий код задает цвет как красный, когда тег <li> следует за
тегом <ul> ; и он же задает синий цвет, когда тег <li> следует за
тегом <ol>. То есть, тег <li> получает некоторый стиль в
зависимости от своего контекста - от того, будет ли он ассоциироваться
с тегом <ul> или с тегом <ol>.
Контекстные селекторы могут включать также селекторы ID для
дополнительной дифференциации стилей. Следующий код использует
значения id для различения двух неупорядоченных списков с целью
применения различных стилей маркировки. В то же самое время двум
множествам элементов списков присваиваются различные цвета, в
зависимости от неупорядоченного списка, в котором они появляются.
<style type="text/css">
ul#ListA {list-style-type:disc}
ul#ListB {list-style-type:circle}
ul#ListA li {color:red}
ul#ListB li {color:blue}
</style>
<ul id="ListA">
<li>Позиция 1</li>
<li>Позиция 2</li>
<li>Позиция 3</li>
</ul>
<ul id="ListB">
<li>Позиция 1</li>
<li>Позиция 2</li>
<li>Позиция 3</li>
249

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</ul>
Листинг 6.21. Использование контекстных
различения неупорядоченных списков

селекторов

для

Два списка различаются в таблице стилей значениями id,
присвоенными их тегам <ul>. Первые две настройки стиля применяют
различные стили маркеров для указанных селекторов ul. Две
последние настройки стиля задают различный цвет для селектора li, в
зависимости от того, в каком списке ul он содержится. Стиль цвета li
зависит от контекста ul ID. Вывод в браузере этого кода показан на
рисунке 6.5.

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

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

Стили границ
250

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Стили границ включают свойства, назначенные типу границы, ее
толщине и ее цвету. Эти свойства перечислены в следующей таблице.
Таблица 6.3. Стили и свойства границ
Свойство
Значение
dashed
dotted
border-style
double
border-top-style
groove
border-right-style
inset
border-bottom-style none
border-left-style
outset
ridge
solid

border-width
thin
border-top-width
medium
border-right-width
thick
border-bottom-width
npx
border-left-width

border-color
border-top-color
#000000 - #FFFFFF
border-right-color color name
border-bottom-color rgb(r,g,b)
border-left-color

Border

border:style size color

Свойства стиля, толщины, и цвета границы могут применяться ко всем
четырем сторонам элемента XHTML или выборочно применяться к
отдельным сторонам. Например, пятью типами свойств стиля границы
являются:
251

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

- применяется ко всем четырем сторонам;
- применяется только к верхнему краю;
- применяется только к правому краю;
- применяется только к нижнему краю;
- применяется только к левому краю.

Когда спецификация границы применяется ко всем четырем сторонам
элемента, то сокращенное свойство border объединяет значения
стиля ( style ), толщины ( width ) и цвета ( color ), заданные в
этом порядке и разделенные пробелами, в одном объявлении свойства.
То есть вместо кодирования трех отдельных спецификаций
border-width:1px
border-style:solid
border-color:black
можно объединить эти настройки в одном свойстве границы:
border:solid 1 black
Не обязательно задавать все три эти значения, но присутствующие
должны быть записаны в правильном порядке: border:solid 1px
(неопределенный цвет).
На выбор существует восемь стилей границы ( solid dashed
dotted double groove inset outset ridge ). Эти стили
показаны на рисунке 6.6, с толщиной, равной 3 пикселям. Более тонкая
граница не выводит некоторые из этих стилей.

Рис. 6.6. Стили границы
Границы обычно применяются к таким тегам, как <div>, <p>, и
<span>, которые являются контейнерами для текста. Однако можно
экспериментировать и с другими тегами, чтобы увидеть возможный
результат для их границы.
Чтобы проиллюстрировать варианты оформления, следующий раздел
252

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<div> выводится с границей, которая имеет различные стили для всех
четырех сторон. Раздел содержит параграф, который имеет свои
собственные настройки границы и включает строку текста со своей
собственной границей.
<style type="text/css">
div#A {border-width:7px;
border-color:red;
border-top-style:solid;
border-right-style:dashed;
border-bottom-style:ridge;
border-left-style:double}
p#B {border:dashed 3px blue}
span#C {border:solid 4px green}
</style>
<div id="A">
<p id="B">This is a <span id="C">text string with borders</span>
inside a paragraph with borders inside a division with four different
borders.</p>
</div>
Листинг 6.22. Код для различных стилей границы

Рис. 6.7. Границы, окружающие элементы страницы
Так как охватывающий раздел выводит различные границы на каждой
из четырех сторон, для каждой стороны заданы индивидуальные
спецификации. Поскольку вокруг всех сторон и вложенного текста
заданы одинаковые границы, для этих контейнеров задано сокращенное
свойство границы. Хотя добавление границ к элементам страницы вряд
ли будет использоваться слишком часто, этот пример показывает
возможные настройки границы.
253

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Стили отступов
В приведенном выше примере оформления границы сжимаются вокруг
текста, который они охватывают. В большинстве случаев для
визуальной привлекательности и удобочитаемости желательно
оставлять свободное пространство между текстом и его границей. Это
реализуется введением внутри текстового контейнера отступов ( padding
). Отступ является величиной свободного пространства между
границами контейнера и вложенным в него контентом.
Отступы добавляются в контейнеры с помощью свойств стиля
оформления, показанных в таблице 6.4. Свойство padding задает
свободное пространство вдоль всех четырех сторон контейнера;
свойства padding-top, padding-right, padding-bottom
и padding-left выборочно добавляют отступы к каждой из четырех
сторон.
Таблица 6.4. Свойства
оформления отступов
Свойство Значения
padding
padding-top
padding-right npx
padding-bottom
padding-left

Следующий код повторяет предыдущий раздел <div> с отступами,
добавленными в теги <div>, <p> и <span>, чтобы создать
дополнительное пространство между текстом и окружающими его
границами. Можно создавать различные эффекты, определяя различную
величину отступов для каждой из четырех сторон.
<style type="text/css">
div#A {padding:7px;
border-width:7px;
border-color:red;
254

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

border-top-style:solid;
border-right-style:dashed;
border-bottom-style:ridge;
border-left-style:double}
p#B {padding:7px; border:dashed 3px blue}
span#C {padding:2px; border:solid 4px green}
</style>
<div id="A">
<p id="B">This is a <span id="C">text string with borders</span>
inside a paragraph with borders inside a division with four different
borders.</p>
</div>
Листинг 6.23. Код для отступов и различных стилей границы

Рис. 6.8. Отступы, окружающие текстовые элементы

Границы изображений
Можно создавать границы вокруг изображений, задавая стиль границы.
Следующий код создает границу ridge, толщиной 7 пикселей, как
показано слева на рисунке 6.9.
<img src="Stonehenge.jpg" style="border:ridge 7"/>

255

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 6.9. Изображения с границами
Невозможно разделить границу и изображение, вводя отступ вокруг
самого изображения. Однако, можно поместить изображение внутрь
другого контейнера, например, тега <span>, и добавить отступы в этот
контейнер. Этот прием закодирован ниже и показан справа на рисунке
6.9.
<span style="border:ridge 7; padding:10px"><img src="Stonehenge.jpg"/></span>
Листинг 6.24. Код для окружающих изображение отступов

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

256

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 6.10. Поля (margin), отступы (padding), и границы (border),
окружающие элементы страницы

Задание размеров элементов
Если не задано другое оформление, то текстовые контейнеры, такие, как
теги <div>, <p> и <span>, имеют размер в соответствии со своим
содержимым. Часто необходимо иметь дополнительный контроль над
размерами контейнерных тегов, что можно получить с помощью
настроек стиля, показанных в таблице 6.5. Свойства height и width
были рассмотрены ранее. Здесь они объединяются со свойством
overflow для управления размером и визуальным представлением
текстовых контейнеров.
Таблица 6.5.
Свойства стиля
размера элемента
Свойство Значение

Height

npx
n%
auto
257

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Width

npx
n%
auto

visible
hidden
Overflow
scroll
auto

Ширина и высота контейнера
В предыдущих параграфах настройки ширины и высоты применялись
для изображений и горизонтальных линеек для задания определенного
размера. То же самое можно делать практически с любым тегом
XHTML, включая текстовые контейнеры. Следующий параграф,
например, имеет размер в 50% от ширины окна браузера, а не занимает,
как по умолчанию, всю ширину страницы. Граница добавлена для того,
чтобы визуально подчеркнуть результат, а отступы используются для
размещения границы на удалении от текста. Вывод параграфа в браузере
показан на рисунке 6.11.
<style type="text/css">
p#Sized {width:50%; border:solid 1px; padding:10px}
</style>

<p id="Sized">Это параграф с шириной, равной 50% ширины
окна браузера. Кроме того, текст переносится по словам в этих границах. Та
как ширина задана в процентах, то параграф изменяет размер, чтобы
оставаться в пределах 50% ширины страницы при изменении размера окна
браузера.</p>
Листинг 6.25. Код для задания размеров и отступов параграфа

258

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 6.11. Параграф с шириной 50% ширины страницы
Ширина параграфа всегда остается равной 50%. Так как стиль height
не задан, то высота параграфа увеличивается, чтобы охватить весь
содержащийся в нем текст.

Переполнение контейнера
По умолчанию высота контейнера всегда увеличивается, чтобы показать
содержащийся в нем текст, независимо от заданной величины height.
Чтобы задать точную высоту контейнера, необходимо также указать, как
обрабатывать "переполнение" текста, когда контейнер имеет
недостаточный размер для вывода всего своего содержимого. То есть,
требуется задать свойство overflow, чтобы контролировать
потенциально "скрытый" текст, находящийся за границами контейнера.
Существует четыре возможных значения для свойства overflow,
результат действия которых показан в следующих примерах оформления
параграфа, с одним и тем же контентом (Перевод: "Контент страницы
может появляться внутри контейнеров, а также перекрывать основной
документ. Чтобы контент оставался внутри таких тегов, как <div>,
<p>, и <span>, для этих элементов можно в случае необходимости
задать различные значения высоты и ширины.")

259

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 6.12. Задание параметра overflow текстового контейнера
Задание overflow:visible выводит весь контент, независимо от
указанной
высоты
контейнера
(значение
по
умолчанию);
overflow:hidden использует указанную высоту, даже если часть
текста
остается
скрытой;
overflow:scroll
выводит
горизонтальную и вертикальную полосы прокрутки для просмотра
скрытого текста; overflow:auto выводит вертикальную полосу
прокрутки, если требуется для просмотра скрытого текста.
Стиль overflow:auto является обычно наиболее полезным и
визуально привлекательным для вывода текста, потенциально
переполняющего контейнер с указанными шириной и высотой. Код
приведенного выше тега <p> с overflow:auto показан ниже.
<style type="text/css">
p#OFLOW {overflow:auto; width:125px; height:100px; padding:5px;
border:solid 1px}
</style>
<p id="OFLOW">Page content can appear within elements as well as flow
throughout the main document. With tags such as <div>, <p>,
and <span> to contain content, these elements can, if so chosen, be
sized to various heights and widths.</p>
260

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 6.26.
параграфе

Код

для

управления

переполнением

текста

в

Этот конкретный параграф имеет id="OFLOW", чтобы отличить его от
трех других параграфов, которые имеют свои собственные значения id.
Параграф имеет заданную ширину и высоту, что не позволяет вывести
параграф полностью. Поэтому также задается стиль overflow:auto,
чтобы для доступа к скрытому тексту появилась вертикальная полоса
прокрутки.

Плавающие контейнеры
На рисунке 6.13 показан раздел врезки с шириной, равной 250
пикселей, и высотой 200 пикселей. Он имеет границу ridge толщиной 5
пикселей, отступ в 10 пикселей и цвет фона gray (серый). Раздел
смещается на странице вправо. Его левое поле задано равным 20
пикселям, чтобы отделить его от текста на странице.
Так как весь текст невозможно вывести при заданной высоте и ширине,
то разделу задается стиль overflow:auto для создания
вертикальной полосы прокрутки.

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

комментариев, то есть для вывода помещенного в поле текста, который
появляется сбоку от основного текстового содержимого страницы.
Раздел врезки показан на рисунке 6.13. Он смещается вправо, а
основной текст обтекает его с переносом строк по словам.
Текстовые контейнеры, подобно графическим изображениям, можно
размещать слева или справа на странице, применяя стиль float. При
кодировании плавающего контейнера не забывайте о том, что код
контейнера должен появиться первым, а за ним следует любой текст,
который обтекает контейнер.
<style type="text/css">
.FLOAT {float:right; width:250px; height:200px; overflow:auto; color:white;
background-color:gray; margin-left:20px; padding:10px; border:
ridge 5}
h3 {text-align:center}
</style>
<div class="FLOAT">
<h3>Плавающие контейнеры</h3>

<p>Это раздел с шириной, заданной равной 250 пикселей, и высотой,
равной 200 пикселей. Он имеет границу ridge толщиной 5 пикселей, отс туп
пикселей и фоновый цвет gray. Раздел смещается на странице вправо. Е го
левое поле задано равным 20 пикселей для отделения от текста
страницы.</p>
<p>Так как весь текст не помещается в контейнере указанной ширины и
высоты, то разделу задается стиль overflow:auto для создания вертикальн ой
полосы прокрутки.</p>
</div>
... обтекающий текст...
Листинг 6.27. Код плавающего раздела

Отметим, что только около половины контента видно в разделе с
заданной шириной и высотой. Поэтому свойство overflow:auto
262

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

relative
absolute

left

npx
n%

263

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

top

npx
n%

z-index

n

Для точного позиционирования на странице элементу необходимо
присвоить свойство position. После этого элемент можно
разместить в любом месте с точностью до пикселя с помощью
соответствующих свойств left, top, и z-index.

Относительное позиционирование
Элементы на странице Web обычно появляются в позиции, которая
задается относительно окружающих элементов на странице. То есть,
они физически выводятся в том порядке, в котором кодируются. Именно
так задается следующая строка заголовка <h1>. Она появляется по
порядку вслед за предыдущим параграфом, так как ее код следует за ним
в документе XHTML.
<p>Предыдущий параграф ...</p>
<h1>Заголовок </h1>
<p>Следующий параграф ...</p>
Листинг
6.28.
Код
размещения
окружающего содержимого

264

заголовка

относительно

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 6.14.
контента

Заголовок, размещаемый относительно окружающего

Обычно текст в строке не может перемещаться из своей используемой
по умолчанию позиции на странице. Форматирование в строке,
задаваемое тегом и его окружающими тегами, определяет, где будет
расположено содержимое. Тег <h1> всегда выводит два интервала
после предыдущего параграфа и два интервала над следующим
параграфом. Однако, задавая для тега свойство position, можно изменить
его положение на странице с точностью до пикселя.
Чтобы изменить позицию тега <h1> в приведенном выше примере,
можно присвоить ему стиль position:relative. Затем, применяя
свойство left и/или top, его можно переместить на определенное число
пикселей из его исходной позиции. Следующий код изменяет позицию
этого заголовка, определяя для тега свойство позиционирования.
<style type="text/css">
h1 {position:relative; left:50px; top:-10px}
</style>
<p>Предыдущий параграф ...</p>
<h1>Заголовок </h1>
<p>Следующий параграф ...</p>
Листинг
6.29.
Код
для
изменения
относительно окружающего контента

265

положения

заголовка

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 6.15. Изменение позиции заголовка относительно исходного
положения
С помощью position:relative позицию тега можно изменить
относительно его исходного положения. Свойство left задает
расстояние в пикселях, на которое смещается элемент из своего
обычного горизонтального положения; свойство top задает расстояние
в пикселях, на которое смещается элемент из своего обычного
вертикального положения. В приведенном выше примере заголовок
смещается на 50 пикселей вправо из своего исходного положения и на
10 пикселей вверх.
Отметим, что задаваемое значение в пикселях может быть
положительным или отрицательным. Положительное значение для
свойства left перемещает элемент вправо, а негативное значение
перемещает его влево. Положительное значение для свойства top
перемещает элемент на странице вниз, а отрицательное значение
перемещает его вверх.
В следующем примере каждое слово предложения заключено в
отдельный контейнер <span>, чтобы оформить их по отдельности.
Каждое слово затем с помощью свойства top получает смещение по
вертикали относительно своей нормальной позиции в строке. Все слова
содержатся в теге <div>, чтобы применить задание размера шрифта к
группе слов.
266

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<div style="font-size:24pt">
<span style="position:relative; top:-15px">Words</span>
<span style="position:relative; top:+10px">in</span>
<span style="position:relative; top:-5px">a</span>
<span style="position:relative; top:+5px">sentence.</span>
</div>
Листинг 6.30. Код для изменения положения слов относительно
своего исходного положения

Рис. 6.16.
Слова смещаются относительно своего нормального
вертикального положения
Каждый тег <span> имеет относительную позицию, так что можно
применить его свойство top. Нет необходимости задавать позицию слов
по горизонтали с помощью свойства left, так как теги <span>, по
умолчанию, размещаются в строке рядом друг с другом. Изменяется
положение слов только по вертикали относительно обычного
вертикального выравнивания.
Во время изменения положения элементов на странице может
понадобиться использовать метод проб и ошибок, чтобы добиться
требуемого размещения. Не существует простого способа сразу точно
выяснить, на сколько пикселей необходимо сместить элемент по
горизонтали и вертикали.

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

требуется знать, так как элементы страницы обычно не перекрываются.
Однако когда элементы явно позиционируются на странице, они могут
перекрываться, делая разбиение на слои очевидным. Также может
понадобиться изменить используемое по умолчанию разбиение на
слои, чтобы элементы были представлены в требуемом порядке
наложения.
Можно явно изменить используемое по умолчанию разбиение
элементов страницы на слои, кодируя их свойство стиля z-index.
Значение z-index является относительной величиной. Элементы с
большими числовыми значениями появятся поверх элементов с
меньшими значениями. Так, элемент с z-index:2 появится поверх
элемента с z-index:1, элемент с z-index:20 появится поверх
элемента с z-index:10. Абсолютное значение z-index не имеет
значения. Важны только относительные величины z-index,
присвоенные множеству разбитых по слоям элементов.
Цветные квадраты, показанные на
различные позиции и слои. В этом
задается исключительно порядком по
были закодированы: закодированные
кодированных ранее.

рисунке 6.17, демонстрируют
случае распределение по слоям
умолчанию, в котором квадраты
последними появляются поверх

<style type="text/css">
.RED {position:relative; width:100px; height:100px; left:0px; top:0px;
background-color:red; border:solid 1px white; color:white;
text-align:right}
.GREEN {position:relative; width:100px; height:100px; left:-50px; top:25px;
background-color:green; border:solid 1px white; color:white;
text-align:right}
.BLUE {position:relative; width:100px; height:100px; left:-100px; top:50px;
background-color:blue; border:solid 1px white; color:white;
text-align:right}
</style>
<div>
<span class="RED">Red</span>
<span class="GREEN">Green</span>
<span class="BLUE">Blue</span>
268

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</div>
Листинг 6.31. Код для перекрытия элементов страницы

Рис. 6.17. Нормальное разбиение по слоям элементов страницы
Красный квадрат был закодирован первым, поэтому он появляется под
зеленым, который закодирован вторым, - зеленый появляется под
синим квадратом, который закодирован последним. Отметим, что эти
квадраты создаются с помощью тегов <span>, для которых заданы
ширина, высота, цвет, цвет фона, и границы. Для создания этих слоев
не требуется задание значения z-index. Однако, квадратам задаются
параметры стиля left и top для смещения их по горизонтали и
вертикали от их естественного положения бок-о-бок, чтобы они стали
перекрывающимися и их распределение по слоям стало визуально
очевидно.
Для приведенных выше квадратов можно изменить порядок слоев,
просто присваивая им значения z-index. В следующем коде красному
квадрату присвоено наибольшее значение (что делает его верхним), а
синему квадрату - наименьшее (что делает его нижним). Порядок
кодирования тегов <span> остается без изменения. Вывод этих
квадратов показан на рисунке 6.18.
<style type="text/css">
.RED {position:relative; width:100px; height:100px; left:0px; top:0px;
background-color:red; border:solid 1px white; color:white;
text-align:right; z-index:3}
.GREEN {position:relative; width:100px; height:100px; left:-50px; top:25px;
background-color:green; border:solid 1px white; color:white;
269

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

text-align:right; z-index:2}
.BLUE {position:relative; width:100px; height:100px; left:-100px; top:50px;
background-color:blue; border:solid 1px white; color:white;
text-align:right; z-index:1}
</style>
Листинг 6.32. Код
элементов страницы

для

изменения

последовательности

слоев

Рис. 6.18. Изменение порядка слоев элементов страницы
Вспомните, что абсолютные значения z-index не имеют значения,
пока различия по величине находятся в правильном соотношении.
Значения 3, 2 и 1, использованные выше, можно было бы
закодировать как 30, 20 и 10 ; или 300, 200 и 100 ; или 300,
200 и 1. Наибольшее значение будет наверху, а наименьшее значение внизу, независимо от их абсолютной величины.

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<p>Предыдущий параграф....</p>
<p style="position:relative; top:25px; font-size:24pt">
Перемещенный параграф.
</p>
<p>Следующий параграф ....</p>
Листинг 6.33. Код изменения положения параграфа

Рис. 6.19.
Перемещенный параграф, оставляющий избыточное
свободное пространство в исходной позиции
Из своего обычного положения тег <p> перемещен на странице на 25
пикселей вниз. Однако исходный размер и положение этого тега
сохраняется в потоке элементов страницы, занимаемое теперь
свободным пространством, где тег должен был бы нормально
появиться. Но не только этот, любой следующий далее текст сохраняет
свое положение относительно исходного положения перемещенного
тега <p> и в связи с этим почти перезаписывается перемещенным
текстом.
Пока элементы страницы перемещаются вертикально из своего
исходного положения в пределах разумного количества пикселей, такие
вопросы со свободным пространством не должны вызывать проблем.
Однако с увеличением вертикального расстояния свободное
пространство появляется в потоке элементов страницы, представляя
оставленное пространство, занимаемое ранее перемещенным
элементом. Вероятно, необходимо будет проверить различные варианты
позиционирования, чтобы элементы страницы были представлены в
удовлетворительных соотношениях друг с другом.

271

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Абсолютное позиционирование
В то время как position:relative размещает элемент
относительно окружающих элементов, position:absolute
помещает элемент относительно его контейнерного элемента. По
умолчанию контейнерным элементом является сама страница Web, тег
<body>.
Поэтому
элементы
позиционируются
абсолютно
относительно верхнего левого угла страницы Web и, что важно,
исключаются из обычного потока элементов страницы.
Абсолютное позиционирование показано в примере на рисунке 6.20,
где слово "DRAFT" помещено в тег <div>, положение которого
задается абсолютно. При таком позиционировании тег располагается
относительно верхнего левого угла страницы. Он смещается на 50px от
верхнего края и на 280px от левого края страницы, что помещает его
ниже сопровождающего параграфа.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Позиционирование</title>
</head>
<body>
<div style="position:absolute; top:50px; left:280px; z-index:-1;
font-family:impact; font-size:68pt; color:#D6D6D6">DRAFT</div>

<p>Размещенное под этим параграфом слово "DRAFT"
определено показанным выше тегом <div>. Этот тег появляется в коде
XHTML сразу перед этим параграфом. Он позиционирован абсолютно; поэ
он исключен из нормального потока элементов страницы. В связи с эти м
исключением тега из потока элементов страницы параграф смещается вер
в чтобы занять освободившееся пространство страницы, поэтому
272

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

накладывается на слово. Таким образом, слово "DRAFT" занимает
на странице абсолютное положение, независимо от того, что еще его окруж
Для него задано также значение z-index, равное -1, помещающее его на
странице под слоем текста, чтобы слово не перекрывало текст. </p>
</body>
</html>
Листинг 6.34. Код абсолютного позиционирования содержимого
на странице под слоем текста

Рис. 6.20. Абсолютное позиционирование содержимого под слоем
текста страницы
Слой текста страницы всегда имеет значение z-index, равное 0
(нулю). Поэтому тегу <div> задано значение z-index, равное -1, для
размещения слова под слоем текста, чтобы оно не мешало восприятию.
Когда элемент страницы позиционируется абсолютно и для него заданы
значения свойств left и top, то он исключается из нормального
потока элементов страницы. В приведенном выше примере тег <div>
273

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Определение позиционного расположения элементов
страницы
Так как бывает трудно определить левую и верхнюю позицию страницы
относительно длинной, прокручивающейся страницы Web, то
элементы, которые позиционируются относительно друг друга, часто
размещаются внутри другого контейнерного элемента. Этот
контейнерный элемент позиционируется в соответствии с принципом
сохранения его позиции в потоке элементов страницы; содержащиеся в
нем элементы позиционируются абсолютно внутри контейнера. В этом
случае значения абсолютной позиции задаются относительно
контейнера, а не страницы. Контейнер становится легкоуправляемой
координатной системой, в которой точно позиционируются вложенные
элементы.
Хорошим общим решением для размещения элементов страницы
относительно друг друга является следующее:
1. определите и задайте размер тега <div>, который будет охватывать
размещенные
элементы.
Используйте
для
раздела
<div>
относительное позиционирование, размещая его тем самым в потоке
контента страницы. Когда содержимое на странице добавляется или
удаляется, то этот раздел по-прежнему сохраняет свое относительное
расположение среди других элементов страницы. Он перемещается по
странице вверх или вниз, когда изменяется содержимое страницы;
2. поместите элементы, которые будут находиться внутри раздела,
274

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

используя абсолютное позиционирование. В этом случае значения
left и top для размещаемых элементов всегда измеряются от
верхнего левого угла раздела. Эта "локальная" система координат
остается неизменной, даже если раздел изменяет положение в потоке
элементов страницы.
Раздел, показанный на рисунке 6.21, использует относительное
позиционирование, чтобы сохранять свое положение среди других
элементов XHTML на странице. Он выводится с точечной границей (
dotted ), чтобы сделать его видимым. Вложенные квадраты
позиционируются абсолютно, со значениями top и left,
измеряемыми от верхнего левого угла этого раздела.
<style type="text/css">
.DIV {position:relative; width:300px; height:160px; border:dotted 1}
.RED {position:absolute; width:100px; height:100px; left:0px; top:0px;
background-color:red; border:solid 1px white; color:white;
z-index:1; text-align:right}
.GREEN {position:absolute; width:100px; height:100px; left:50px; top:25px;
background-color:green; border:solid 1px white; color:white;
z-index:2; text-align:right}
.BLUE {position:absolute; width:100px; height:100px; left:100px; top:50px;
background-color:blue; border:solid 1px white; color:white;
z-index:3; text-align:right}
</style>
<div class="DIV">
<span class="RED">Red </span>
<span class="GREEN">Green </span>
<span class="BLUE">Blue </span>
</div>
Листинг 6.35. Код абсолютного позиционирования
внутри относительно позиционированного контейнера

275

элементов

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 6.21. Абсолютное позиционирование внутри контейнера с
относительным позиционированием
Преимущество использования такой стратегии состоит в том, что раздел
контейнера можно перемещать в любое место на странице, а
содержащиеся в нем элементы будут сохранять свои абсолютные
позиции в разделе. Не требуется заново вычислять их позиции, так как
они всегда задаются относительно верхнего левого угла раздела
контейнера.
Следующий код применяет такую же стратегию для создания эффект
падающей тени. Вывод браузер показан на рисунке 6.22.
<style type="text/css">
div#CONTAIN {position:relative; height:45px; width:180px; border:dotted 1px}
div#BLACK {position:absolute; left:0px; top:0px; z-index:2; font-family:
impact; font-size:24pt; color:black}
div#SILVER {position:absolute; left:+5px; top:+5px; z-index:1; font-family:
impact; font-size:24pt; color:silver}
</style>
<div id="CONTAIN">
<div id="SILVER">Drop Shadow</div>
<div id="BLACK">Drop Shadow</div>
</div>
Листинг 6.36. Код для создания эффекта падающей тени

276

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 6.22.
Абсолютное позиционирование
относительно позиционированного контейнера

элементов

внутри

Охватывающий раздел (позиционированный относительно в потоке
содержимого страницы) содержит два слоя элементов для размещения.
Контейнерный раздел задан строчной границей ( dashed ), чтобы
показать его размер и положение. Позиции слов и тени можно легко
определить по их расстоянию от верхнего левого угла этого раздела (
left:0px; top:0px ); тень смещается от слов на 5 пикселей (
left:+5px; top:+5px ). Для слов значение z-index задается
большим, чем для тени, чтобы вывести их сверху.
При размещении позиционируемого контента внутри раздела
необходимо обычно задать ширину ( width ) и высоту ( height )
раздела. Позиционированный раздел имеет по умолчанию ширину,
которая распространяется на всю ширину его контейнера - ширину
страницы Web, если его контейнерным элементом является тег
<body>. При желании можно задать ширину раздела, достаточную для
охвата только вложенных элементов, как это делается для приведенного
выше примера с падающей тенью. Позиционированный раздел имеет
также по умолчанию высоту в 0 пикселей, независимо от его
содержимого. Поэтому высоту необходимо задавать достаточно
большой, чтобы зарезервировать вертикальное пространство страницы
для вывода вложенного контента.
Пример, показанный на рисунке 6.23, является примером более
сложного позиционирования. Это модель информационного
бюллетеня,
использующая
приведенную
выше
стратегию
позиционирования. Вокруг различных элементов показаны границы,
чтобы можно было увидеть компоновку.

277

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 6.23. Компоновка информационного бюллетеня с помощью
позиционирования элементов
Весь бюллетень содержится внутри раздела с размерами 500 х 420
пикселей с относительным позиционированием, чтобы соответствовать
потоку содержимого на странице. Внутри этого охватывающего раздела
находятся различные другие разделы, позиционированные абсолютно
для точного размещения внутри контейнерного раздела.
Ниже показан примерный код XHTML для этой компоновки бюллетеня.
Никакое содержимое еще не было добавлено в бюллетень, на этом этапе
проектирования необходимо просто сформировать его компоновку.
Содержимое можно легко добавить, когда известно, где оно должно
находиться.
Обратите,
в
частности,
внимание
на
типы
позиционирования и размеры различных разделов.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
278

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Newsletter</title>
<style type="text/css">
div#OUTER {position:relative; width:500px; height:420px; border:dotted 1}
div#HEAD {position:absolute; left:0px; top:0px; width:500px; height:40px;
border:dotted 1; text-align:center; font-size:24pt}
div#COL1 {position:absolute; left:0px; top:50px; width:240px; height:260px;
border:dotted 1}
div#COL2 {position:absolute; left:260px; top:50px; width:240px; height:260px;
border:dotted 1}
div#FOOT {position:absolute; left:0px; top:320px; width:500px; height:100px;
border:dotted 1}
</style>
</head>
<body>
<div id="OUTER">
<div id="HEAD">
Newsletter Layout
</div>
<div id="COL1">
First Column
</div>
<div id="COL2">
Second Column
</div>
<div id="FOOT">
Footer
</div>
279

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</div>
</body>
</html>
Листинг 6.37. Код компоновки информационного
использующий позиционированные элементы

бюллетеня,

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

280

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

показан на листинге 7.1.
<a href="url">текст ссылки</a>
Листинг 7.1. Общий формат тега <a>

Текст ссылки, по умолчанию, подчеркивается и выводится в браузере
синим цветом, как визуальный указатель, что строка текста является
ссылкой, реагирующей на щелчок мыши. Расположение страницы
соединения задается атрибутом href (hyperlink reference гипертекстовая ссылка).
Можно создать ссылку на собственную страницу или на страницу на
удаленном сайте Web. Если локальная связанная страница находится в
том же каталоге, что и вызывающая страница, то в качестве URL
требуется только имя страницы. Если связанная страница находится на
том же сервере Web, что и вызывающая страница, но в другом каталоге,
то в качестве URL используется путь доступа к каталогу этой
вызываемой страницы (относительная ссылка). Если вызываемая
страница находится на другом сайте Web, то ссылка должна включать
протокол и ссылку на домен "http://имя домена" (абсолютная
ссылка). Можно соединиться с именем сайта, чтобы извлечь
используемую по умолчанию домашнюю страницу, или, если известен
адрес, с определенной страницей на этом сайте.
<a href="xhtml07-01.htm">Перезагрузить эту страницу</a>
<a href="http://www.weather.com">Погода</a>
Листинг 7.2. Соединение с локальной и удаленной страницами
Web

Вспомните, что тег <a> является линейным тегом и, чтобы
соответствовать стандартам XHTML 1.1, должен быть заключен внутри
блочного тега, такого, как тег <p> или <div>.

Исключенный атрибут target
Если не задано иначе, то вызываемая страница открывается в том же
окне браузера, которое выводит вызывающую страницу. Исходная
страница заменяется вызываемой страницей. Часто удобно, особенно
282

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

при соединении с удаленными сайтами Web, открывать эту страницу в
другом окне браузера. Когда посетители покидают сайт, чтобы
просмотреть удаленные сайты, они могут оказаться не в состоянии
вернуться назад к исходной странице, используя кнопку возврата в
браузере. Открывая удаленные сайты в новом окне, посетители не
теряют контакт со страницей. Исходный сайт будет всегда доступен в
исходном окне.
Можно определить, как должна открываться вызываемая страница,
кодируя в теге <a> атрибут target="_window". Чтобы указать окно
для открытия страницы, в коде используются специальные значения,
каждое из которых имеет в качестве префикса символ подчеркивания ( _
). Эти окна кодируются следующим образом:
_blank
_self
_top
_parent

- новое окно
- текущее окно (по умолчанию)
- все окно браузера (применяется при использовании фреймов)
- родительский фрейм (применяется при использовании фреймов)

В следующем примере удаленный сайт открывается в новом окне
браузера, содержащая ссылку страница остается видимой в исходном
окне браузера.
<a href="http://www.weather.com" target="_blank">The Weather Channel</a>
Атрибут target не действителен по стандартам XHTML 1.1. Тем не
менее, открытие удаленных сайтов Web в отдельном окне браузера
остается хорошей идеей. Можно разрешить эту ситуацию, не нарушая
стандартов XHTML, с помощью описанной ниже техники.

Вывод в новом окне браузера
Страницу Web можно открыть в новом окне браузера не нарушая
стандартов XHTML, если поместить в тег анкера операторы JavaScript.
JavaScript
является
используемым
по
умолчанию
языком
программирования для браузеров. Чтобы применять эту технику для
открытия страницы в новом окне браузера, знать этот язык не требуется.
283

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<a href="javascript:" onclick="open('http://www.weather.com','','')">The Weather</a>
Листинг 7.3. Открытие страницы в новом окне браузера

Приведенный выше код содержит "обработчик событий" JavaScript
onclick, который перехватывает щелчок пользователя на тексте
ссылки. Щелчок на ссылке приводит к выполнению оператора open()
для открытия заданного URL в новом окне браузера. Атрибут
href="javascript:" заменяет URL обычной ссылки на указание,
что вместо соединения со страницей выполняется процедура JavaScript.
Этот код можно использовать для локальных или удаленных ссылок,
изменяя просто значения URL и выводимый текст. Проверьте, что код
заключается в кавычки, точно таким же образом, как показано выше.

Стили ссылок
Текстовые ссылки выводятся тремя различными цветами, чтобы
определить три возможных состояния ссылки. Ссылка, которая еще не
была посещена, выводится синим цветом, посещенная ссылка пурпурным, а активная ссылка (кнопка мыши щелкнула при указании на
текст ссылки) - красным цветом. Текстовые ссылки, кроме того,
подчеркиваются.
Можно переопределить эти цвета и подчеркивание, а также включить
другие визуальные индикаторы состояния ссылки с помощью
селекторов таблицы стилей для тега <a>, показанных в таблице 7.1.
Таблица 7.1. Селекторы ссылок и
оформление
Свойство
Значение
a:link
a:hover
a:active
a:visited

Любое свойство текста

284

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Селектор a:link определяет непосещенную ссылку, селектор
a:hover - ссылку с расположенным над ней указателем мыши,
селектор a:active - ссылку, на которой был сделан щелчок, а
селектор a:visited - ссылку, которая была посещена. Это
оформление состояния ссылок можно изменить с помощью любой
комбинации свойств значений текстовых стилей. Следующая таблица
стилей иллюстрирует возможные настройки для четырех состояний
ссылок.
<style type="text/css">
a:link {color:blue; text-decoration:none; font-size:12pt}
a:hover {color:green; font-weight:bold; text-decoration:underline;
font-size:14pt}
a:active {color:red; text-decoration:underline; font-size:14pt}
a:visited {color:gray; text-decoration:none; font-size:12pt}
</style>
<p><a href="SomePage.htm">Text Link</a></p>
Листинг 7.4. Задание стилей для текстовых ссылок

Рис. 7.1. Оформление текстовых ссылок в соответствии с действиями
пользователя
Обычная непосещенная ссылка выводится синим цветом, но без
подчеркивания. Когда курсор мыши перемещается поверх ссылки, она
изменяет свой цвет на зеленый, подчеркивается и выводится размером
14pt. Когда делают щелчок на ссылке, ее цвет изменяется на красный.
Посещенная ссылка выводится серым цветом без подчеркивания и
размером 12pt.

Исключенные атрибуты <body>
285

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Цвета ссылок страницы можно изменять, кодируя атрибуты в теге
<body>. Существует три атрибута:
link="color"
vlink="color"
alink="color"
использующие имена цветов или шестнадцатеричные значения для
задания цвета непосещенной ссылки, посещенной ссылки и активной
ссылки, соответственно.
<body link="green" vlink="gray" alink="purple">
Эти атрибуты исключены в XHTML, поэтому следует отдать
предпочтение применению подобных селекторов ссылок и свойствам
таблиц стилей.

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

286

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 7.2. Ссылки на странице
Чтобы создать ссылки внутри страницы, необходимо закодировать пару
анкерных тегов, показанных на листинге 7.5.
<a href="#name">текст ссылки</a>
...
<a id="name">текст объекта ссылки</a>
Листинг 7.5. Общий
внутри страницы

формат

тегов

<a>

для

создания

ссылок

Место, в которое делается ссылка (обычно боковой заголовок на
странице, но можно использовать любой другой текст), помещается
внутрь тега <a id="name">, содержащего текстовое значение для
идентификации этого места назначения ссылки на странице. Текст,
287

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

откуда делается ссылка, помещается внутрь тега <a href="#name">
, в котором это имя места назначения кодируется с предшествующим
символом "#".
Следующий код показывает три ссылки в три различные места на
странице. Позиции мест назначения имеют идентификаторы ITEM1,
ITEM2, и ITEM3. Когда происходит щелчок на ссылке вверху
страницы, браузер переходит к одной из этих указанных позиций
назначения.
<!-- Ссылки -->
<div><a href="#ITEM1">Go to Item 1</a></div>
<div><a href="#ITEM2">Go to Item 2</a></div>
<div><a href="#ITEM3">Go to Item 3</a></div>
<!-- Места назначения ссылок -->
<div><a id="ITEM1"><b>Here is Item 1</b></a></div>
...
<div><a id="ITEM2"><b>Here is Item 2/<b></a></div>
...
<div><a id="ITEM3"><b>Here is Item 3</b></a></div>
...
Листинг 7.6. Код создания ссылок на странице

Даже хотя текстовые строки места назначения помещены внутри тегов
<a>, они не окрашены и не подчеркнуты, как обычные ссылки. Они
являются "невидимыми" целями ссылок (использующими атрибут id ),
а не самими ссылками (использующими атрибут href ).
При создании ссылки из верхней части страницы Wеb в место,
расположенное ниже на той же странице, желательно создавать ссылки
для возврата к началу страницы. В данном примере каждый раздел
ссылки ( ITEM1, ITEM2, и ITEM3 ) сопровождается ссылкой
возврата к началу ( Top ) страницы. Каждая из этих ссылок на странице
кодируется следующим образом.
<div><a href="#">Top</a></div>
Листинг 7.7. Код ссылки для перехода к началу страницы
288

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Отметим, что в URL ссылки ( href="#" ) не задано имя места
назначения на странице. Когда для ссылки на странице задается место
назначения без имени, то браузер по умолчанию возвращается к
вершине страницы.
Конечно, можно задать текстовое значение имени в качестве места
назначения для возврата к вершине страницы или в любое другое место
на странице. Можно, например, добавить заголовок вверху страницы в
качестве места назначения для ссылки возврата.
<h1><a id="TOP">Top of Page</a></h1>
.
.
.
<div><a href="#TOP">Top</a></div>
Листинг 7.8. Код,
вверху страницы

определяющий

место

назначения

с

именем

Теперь, когда происходит щелчок на ссылке Top, страница перемещается
к помеченному месту назначения заголовка "Top of Page.".
Можно создать ссылку на одной странице в определенное место на
другой странице, объединяя внешнюю ссылку и ссылку на странице.
Предположим, например, что необходимо создать ссылку на раздел
страницы NextPage.htm, который идентифицируется тегом <a
id="SECTION3">. Воспользуемся форматом для ссылки на странице
<a href="#name"> и добавим просто в качестве префикса для места
назначения #name имя страницы.

<div><a href="NextPage.htm#SECTION3">Go to Section 3 on Next Page</a></di
Листинг 7.9. Код ссылки на помеченное место назначения на
другой странице

Эта ссылка для перехода на страницу с именем NextPage.htm и
последующего перехода на этой странице к тегу, помеченному как <a
id="SECTION3">. Такой тип соединения обычно можно сделать
только с собственными страницами. Вряд ли будут известны
именованные разделы на удаленных страницах, даже если они и
289

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

доступны для соединения.

Исключенный атрибут name
Место назначения ссылки внутри страницы можно кодировать в
формате <a name="name">, а не <a id="name">, используя
атрибут name вместо атрибута id. Хотя атрибут name еще работает в
современных браузерах, он не распознается стандартами XHTML 1.1.
Атрибут name можно использовать, если документ не будет проверяться
службами валидации W3C.

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

Текстовые файлы
Стандартные текстовые файлы с расширением .txt открываются в
браузере так же, как и документы XHTML. Файл выводится тем типом
шрифта и стилем, которые использовались при создании документа,
браузер при этом сохраняет исходные переносы строк и пробелы,
созданные в документе. Следующая ссылка извлекает текстовый
документ, расположенный в том же каталоге, что и страница Web с этой
ссылкой, и открывается в браузере, как показано на рисунке 7.3.
<p><a href="TextDocument.txt">Вывод текстового документа</a></p>

290

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 7.3. Текстовый документ, открытый в блокноте
В этом примере текстовый документ открывается в окне браузера,
заменяя вызывающую страницу. Однако, когда документ с расширением
файла .txt открывается в отдельном окне, он открывается программой,
ассоциированной с этим типом файла. В случае файла .txt для открытия
документа используется программа текстового редактора, обычно
Notepad. Документ появится во внешнем окне Notepad. Если
пользователь выбрал другую программу редактора в качестве
используемой по умолчанию в системе, то документ откроется в окне
этой программы.

Документы, созданные текстовым процессором
Документы, созданные текстовым процессором, могут выводиться в
браузере, если на компьютере пользователя имеется совместимое
программное обеспечение. При соединении с документом Microsoft
Word - если программа Microsoft Word (или специальная программа для
291

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

чтения документов Word) установлена в компьютерной системе
пользователя - документ Word открывается в окне браузера. Следующая
ссылка открывает документ Word, заменяющий вызывающую страницу,
как показано на рисунке 7.4.
<p><a href="WordDocument.doc">Вывод документа Word</a></p>

Рис. 7.4. Документ Word, открытый в окне браузера
Отметим, что программа Microsoft Word открывается внутри окна
браузера и что в панель меню браузера добавляется подмножество меню
Word. Пользователи
могут выполнять основные операции
редактирования документа Word и сохранять его на своем локальном
компьютере. Они не могут, конечно, редактировать и сохранить
исходный документ, только копию, выводимую в окне браузера. Кнопка
браузера Back используется для возврата на вызывающую страницу.
Если вызываемый документ открывается в отдельном окне браузера, то
это окно тоже содержит подмножество меню редактирования Word.
292

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Документы электронной таблицы
Как и для документов текстовых процессоров, электронные таблицы
выводятся в браузере, если на компьютере пользователя имеется
совместимое программное обеспечение. При соединении с документом
Microsoft Excel - и если программа Microsoft Excel (или специальная
программа чтения файлов Excel) установлена в системе пользователя электронная таблица открывается в окне браузера. Следующая ссылка
открывает электронную таблицу Excel в том же окне браузера, что и
вызывающая страница, как показано на рисунке 7.5.
<p><a href="ExcelDocument.xls">Вывод документа Excel</a></p>

Рис. 7.5. Документ Excel, открытый в окне браузера
Подмножество меню Excel добавляется в панель меню браузера,
позволяя выполнять небольшое редактирование и сохранение
документа на локальном компьютере. Кнопка Back используется для
возврата на вызывающую страницу. Аналогичный вывод создается,
293

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Документы презентации
Слайдовая презентация выводится в браузере, если на компьютере
пользователя имеется соответствующее программное обеспечение. При
соединении с документом Microsoft PowerPoint - если программа
PowerPoint (или специальная программа чтения документов PowerPoint)
установлена в системе пользователя - презентация открывается в окне
браузера. Кнопка браузера Back предназначена для возврата на
вызывающую страницу. Следующая ссылка открывает документ
PowerPoint для вывода в окне браузера, как показано на рисунке 7.6.

<p><a href="PowerPointDocument.ppt">Вывод презентации PowerPoint</a></p

Рис. 7.6. Документ PowerPoint, открытый в окне браузера

294

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Графические файлы
Изображения GIF, PNG, и JPEG можно выводить в браузере, используя
прямые ссылки на эти графические файлы. Другими словами, чтобы
вывести графическое изображение, не требуется встраивать его в
страницу Web. При простом соединении с файлом с расширением .gif,
.png и .jpg изображения открываются прямо в окне браузера.
Так как изображения не форматируются на странице Web, они
выводятся в верхнем левом углу окна браузера со своим исходным
размером. Следующая ссылка открывает файл изображения .gif, как
показано на рисунке 7.7. Когда изображение открывается в том же окне
браузера, кнопка Back используется для возврата на вызывающую
страницу.
<p><a href="GraphicImage.gif">Вывод изображения GIF</a></p>

Рис. 7.7. Изображение GIF, открытое в окне браузера
295

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Ссылки е-mail
Существует вариант атрибута href, который позволяет задать ссылку email. Щелчок на этой ссылке открывает используемую по умолчанию
почтовую программу посетителя для создания переписки с адресом,
указанным в ссылке. Общий формат этой ссылки показан на листинге 710.
<a href="mailto:email@address">текст ссылки</a>
Листинг 7.10. Общий формат ссылки mailto:

За атрибутом href="mailto:" следует адрес e-mail, обычно адрес,
по которому ведут переписку с посетителями. Следующая ссылка,
например, открывает программу e-mail посетителя (которая задана как
используемая браузером по умолчанию) и вводит указанный адрес e-mail
в строку адреса.
<p><a href="mailto:anybody@mail.ru">Пишите мне</a></p>

296

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 7.8. Открытая по ссылке href="mailto:" программа e-mail

Графические ссылки
Ссылки можно инициировать графическими изображениями, помещая
тег <img/> внутрь тега <a>. Общий формат присваивания ссылок
графическим изображениям показан ниже.
<a href="url"><img src="url" alt="text"/></a>
Листинг 7.11. Общий формат графической ссылки

Изображения особенно эффективны для ссылок, так как с помощью
информативной графики можно сразу сказать о назначении сайта.
Ссылки, закодированные на листинге 7.12 и показанные на рисунке 7.9,
созданы из изображений, полученных с соответствующих сайтов.
297

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<style type="text/css">
img {border:0; vertical-align:middle}
</style>
<p>
<a href="http://www.ebay.com"><img src="ebay.jpg" alt="eBay Link"/></a>
<a href="http://www.ebay.com">Ebay</a>
</p>

<p>
<a href="http://www.nascar.com"><img src="nascar.jpg" alt="NASCAR Link"/></a>
<a href="http://www.nascar.com">NASCAR</a>
</p>

<p>
<a href="http://www.weather.com"><img src="weather.jpg" alt="Weather Link"/></a>
<a href="http://www.weather.com">The Weather Channel</a>
</p>

<p>
<a href="http://www.microsoft.com"><img src="microsoft.jpg" alt="Microsoft Link"/>
<a href="http://www.microsoft.com">Microsoft</a>
</p>
Листинг
ссылок

7.12.

Код

для

создания

298

графических

и

текстовых

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 7.9. Графические и текстовые ссылки
По умолчанию графические ссылки окружены границей, чтобы указать,
что это ссылка, - цель та же, что и у подчеркивания текстовых ссылок. В
данном примере вывод границы подавляется в таблице стилей, задавая
границу изображений толщиной 0px.
При использовании графических изображений в качестве ссылок
желательно создавать также текстовые ссылки. В данном примере это
сделано включением отдельных текстовых ссылок, которые выровнены
по центру их соответствующих изображений с помощью свойства
таблицы стилей vertical-align.
Вспомните, что удаленный сайт Web должен открываться в отдельном
окне браузера, чтобы пользователь оставался в контакте с исходным
сайтом. Приведенные выше ссылки модифицированы в следующем коде
так, чтобы они открывались в новом окне браузера с помощью
описанной ранее техники использования JavaScript.
<p>
<a href="javascript:" onclick="open('http://www.ebay.com','','')"><img
src="ebay.jpg" alt="eBay Link"/></a>
<a href="javascript:"
onclick="open('http://www.ebay.com','','')">Ebay</a>
</p>
<p>
<a href="javascript:" onclick="open('http://www.nascar.com','','')"><img
src="nascar.jpg" alt="NASCAR Link"/></a>
<a href="javascript:"
onclick="open('http://www.nascar.com','','')">NASCAR</a>
</p>
<p>
<a href="javascript:" onclick="open('http://www.weather.com','','')"><img
src="weather.jpg" alt="Weather Link"/></a>
<a href="javascript:"
onclick="open('http://www.weather.com','','')">The Weather Channel</a>
</p>
299

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<p>
<a href="javascript:" onclick="open('http://www.microsoft.com','','')"><img
src="microsoft.jpg" alt="Microsoft Link"/></a>
<a href="javascript:
" onclick="open('http://www.microsoft.com','','')">Microsoft</a>
</p>
Листинг 7.13. Код для открытия
ссылок в отдельном окне браузера

графических

и

текстовых

Карты ссылок
Карта ссылок является графическим изображением, имеющим
реагирующие на щелчок мыши области, которые соединяются
индивидуально с различными страницами. Часто карты ссылок
используются для вывода большого изображения на открывающей сайт
странице, на котором отдельные части изображения представляют
ссылки на отдельные области сайта, на которые может перейти
посетитель. Активные области (реагирующие на щелчок мыши)
графического изображения могут иметь форму кругов, прямоугольников
и/или многоугольников.
Карта ссылок и сопровождающие текстовые ссылки, показанные на
рисунке 7.10, являются ссылками внутри страницы на заголовки,
появляющиеся далее на странице. Карта ссылок использует основные
геометрические фигуры в качестве активных областей. Однако эти
фигуры можно накладывать на любое изображение, включая
фотографии и сложные графические чертежи.

300

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 7.10. Карта ссылок и сопровождающие текстовые ссылки

Определение отображаемых областей
Чтобы создать карту ссылок, начинают с изображения, на котором
требуется создать активные области. Затем, с помощью графической
программы для вывода изображения, определяют формы и размеры
различных областей, которым необходимо присвоить ссылки. Обычно
графические программы выводят горизонтальные и вертикальные
координаты указателя мыши при перемещении мыши по изображению.
Просматривая этот вывод, можно определить точные пиксельные
координаты, которые определяют формы этих активных областей.
После определения этой информации можно кодировать XHTML, чтобы
преобразовать изображение в карту ссылок.
Рисунок 7.11 показывает изображение, из которого создана приведенная
выше карта ссылок. Изображение выводится в программе Windows Paint,
которая может отслеживать перемещение мыши по изображению.
301

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 7.11. Определение горизонтальных и вертикальных координат на
графическом изображении
Обратите внимание, что в строке состояния окна выводятся
вертикальные и горизонтальные координаты указателя "карандаша".
Указатель находится в одном из углов многоугольника, и отслеживаемая
позиция показывает 175, 200; то есть, указатель расположен на
расстоянии 175 пикселей от левого края изображения (горизонтальная
позиция) и на расстоянии 200 пикселей от верхнего края изображения
(вертикальная позиция). Координаты всегда измеряются от верхнего
левого угла всего изображения.
В зависимости от формы отображаемой области, требуется различная
информация о положении.

302

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Для прямоугольника надо знать горизонтальные и вертикальные
координаты верхнего левого ( top-left ) и нижнего правого (
bottom-right ) углов. Эти две координаты h,v можно определить,
помещая указатель "карандаш" в каждый из этих углов и считывая
координаты из строки состояния. В приведенном выше рисунке
пиксельными координатами этих двух точек являются top-left =
8,13 и bottom-right = 130,123.

Для круга необходимо знать координаты центра и величину радиуса в
пикселях. Координаты центра приведенного выше круга определяют,
помещая указатель "карандаш" (приблизительно) в центре и считывая в
строке состояния значения 228, 123. Радиус является расстоянием от
центра до края круга. Радиус можно определить, считывая координаты
правого края круга (на той же вертикальной координате, что и центр
круга) и находя разность между горизонтальными координатами центра
и края: радиус = (290 - 228) = 62.

303

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Для многоугольника необходимо знать координаты каждой из его
угловых точек, обходя по часовой или против часовой стрелки его
ребра, начиная с любой угловой точки на многоугольнике. Обходя по
часовой стрелке, начав с верха этого многоугольника, мы получаем
координаты 100,144; 175,200; 155,255; 50,250; и
45,172.
Имея эти координаты фигур, теперь можно создавать код карты ссылок
и присваивать адреса URL ссылок различным фигурам.

Кодирование карты ссылок
Изображение, которое станет картой ссылок, помещается на страницу с
помощью тега <img/>. Кроме своих стандартных атрибутов этот тег
содержит атрибут usemap="mapname", который указывает на
названный этим именем тег <map>, задающий описания активных
областей изображения для создания ссылок. Общий формат тегов
<img/> и <map> показан на листинге 7.14.
<img src="url" alt="text" usemap="#mapname"/>
<map id="mapname">
<area
shape="rect|circle|poly"
coords="coordinates"
href="url"
alt="text"
/>
...
304

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</map>
Листинг
ссылок

7.14.

Связывание

выводимого

изображения

с

картой

В теге <img/> задается #mapname, чтобы связать изображение с
тегом <map>, определенным с помощью mapname. Внутри тега
<map> имеются теги <area/>, по одному для каждой отображаемой
области в изображении. Эти теги определяют форму, координаты в
пикселях и страницу ссылки для всех активных областей.
Следующий код определяет изображение, показанное на рисунке 7.11,
как карту ссылок со ссылками на различные заголовки текущей
страницы Web.
<img src="MyMap.gif" alt="Image Map" usemap="#MyImageMap">
<map id="MyImageMap">
<area shape="rect" coords="8,13,130,123"
href="#LINK1" alt="Determining Mapped Areas"/>
<area shape="circle" coords="228,123,62"
href="#LINK2" alt="Coding an Image Map"/>
<area shape="poly" coords="100,144 175,200 155,255 50,250 45,175"
href="#LINK3" alt="Overlapped Mapped Areas"/>
</map>
Листинг 7.15. Код создания карты ссылок

Обратите внимание на связь между usemap="#MyImageMap" в теге
<img/> и id="MyImageMap" в теге <map>. Идентификатор
id="MyImageMap" соединяет карту ссылок с графическим
изображением. Также при кодировании окончательной страницы оба
тега <img/> и <map> должны быть внутри блочного тега, такого, как
<p> или <div>.
Теги <area/> задают координаты ( coords ) для определения
отдельных геометрических фигур и для соединения адресов URL со
щелчком мыши на этой фигуре. В этом примере адреса URL являются
ссылками внутри страницы; но можно соединяться с другими
страницами на сайте или с внешними сайтами Web.
305

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Когда shape="rect" (прямоугольник), coords определяют
четырьмя числами, разделенными запятыми. Эта запись представляет
две пары координат h,v, первая пара задает координаты верхнего
левого угла прямоугольника, а вторая - координаты нижнего правого
угла ( 8,13,130,123 ).
Когда shape="circle" (круг), coords определяют тремя числами,
разделенными запятыми. Первые два числа представляют координаты
h,v центра круга, а последнее число является величиной радиуса в
пикселях ( 228,123,62 ).
Когда shape="poly" (многоугольник), coords определяют
координатами h,v вершин многоугольника. Числовые пары можно
перечислять по часовой или против часовой стрелки вдоль периметра
многоугольника; они разделяются пробелами ( 100,144 175,200
155,255 50,250 45,175 ).
Тег <map> может появиться на странице в любом месте. Где бы он ни
появился в теле документа, он связывается с соответствующим тегом
<img> через имя отображения.
Даже если карта ссылок создается с атрибутом alt для каждой
активной области вместе с текстом alt для самого тега <img/>, тем
не менее, желательно предоставить множество сопоставимых
текстовых ссылок для посетителей с программным обеспечением для
чтения текста или для тех, кто отключает вывод графики в браузере.

Перекрывающиеся активные области
В случае необходимости можно создавать перекрывающиеся активные
области. Когда делается щелчок мыши в перекрывающейся области, то
преимущество имеет ссылка, которая связана с фигурой, закодированной
в теге <map> раньше.
В примере на рисунке 7.12 щелчок в перекрывающейся области
соединяет с адресом URL, заданным для shape="rect", так как его
определение появляется в карте ссылок раньше shape="circle",
306

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

хотя графическое изображение круга перекрывает и изображение
прямоугольника.
<map name="ImageMap">
<area shape="rect" ...>
<area shape="circle" .../>
</map>

Рис. 7.12. Приоритет перекрывающихся областей карты ссылок
Можно также при желании присвоить ссылку области изображения,
которая не отображается специально ни на одну из этих фигур. Ссылка,
связанная с этой "фоновой" фигурой, должна появиться последней в
списке тегов <area/>, чтобы она не имела преимущества по
отношению к другим фигурам как перекрывающее изображение.
Координаты фонового изображения будут охватывать всю
прямоугольную область изображения.

Код страницы с картой ссылок
Следующий листинг показывает код карты ссылок, описанной в
текущем примере страницы. Текстовые параграфы присутствуют не
полностью, только ссылки внутри страницы на эти разделы страницы.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
307

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Использование графических карт</title>
<style type="text/css">
body {margin:20px}
.center {text-align:center}
</style>
</head>
<body>
<h2 class="center">Using Image Maps</h2>

<p class="center">
<img src="MyMap.gif" usemap="#MyImageMap" alt="Image Map" style="border:0p
<map id="MyImageMap">
<area shape="rect" coords="8,13,130,123"
href="#LINK1" alt="Determining Mapped Areas"/>
<area shape="circle" coords="228,123,62"
href="#LINK2" alt="Coding an Image Map"/>
<area shape="poly" coords="100,144 175,200 155,255 50,250 45,175"
href="#LINK3" alt="Overlapped Mapped Areas"/>
</map>
</p>
<p class="center"">
<a href="#LINK1">Determining Mapped Areas</a> |
<a href="#LINK2">Coding an Image Map</a> |
<a href="#LINK3">Overlapped Mapped Areas</a>
</p>
<h3><a name="LINK1">Determining Mapped Areas</a></h3>
...text...
<p><a href="#">Top</a></p>

308

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<h3><a name="LINK2">Coding an Image Map</a></h3>
...text...
<p><a href="#">Top</a></p>

<h3><a name="LINK3">Overlapped Mapped Areas</a></h3>
...text...
<p><a href="#">Top</a></p>
</body>
</html>
Листинг 7.16. Код страницы с картой ссылок

Этот пример использует для карты ссылки внутри страницы. Атрибут
href тега <area/> может точно также открывать внешний сайт Web
в том же самом или новом окне браузера.

Исключенный код usemap
Показанный выше общий формат атрибута usemap для тега <img/>
usemap="#mapname"
использует символ "#" в качестве префикса для mapname. Однако в
стандартах XHTML 1.1 этот символ считается незаконным. Текущие
стандарты требуют, чтобы атрибут записывался в упрощенном формате:
usemap="mapname", без символа префикса. Проблема в том, что
некоторые браузеры не соответствуют стандартам и не распознают
рекомендованный формат. Поэтому может понадобиться использовать
старый формат атрибута usemap, чтобы карты ссылок работали
правильно. Единственный недостаток в том, что в этом случае
страница не будет считаться корректной при проверке службой
валидации W3C.

Переадресация страниц
В Интернете можно встретить сайты Web, которые автоматически
309

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Тег <meta>
Переадресация выполняется с помощью тега <meta>, который
присутствует в разделе <head> документа и используется обычно для
предоставления информации о документе XHTML. Общая форма этого
тега, применяемая для переадресации, показана ниже.
<meta
http-equiv="refresh"
content="seconds; url=url"
/>
Листинг 7.17. Общая форма тега <meta/>

Атрибут http-equiv определяет такое использование тега <meta>,
как обновление или перезагрузку текущей страницы. Атрибут content
определяет количество секунд ожидания, прежде чем произойдет
перезагрузка вместе с адресом URL страницы, на которую произойдет
переадресация, когда текущая страница перезагрузится.
Например, страница с именем Redirect.htm расположена в каталоге, где
находится страница xhtml07-04.htm. На странице Redirect.htm кодируется
тег meta, который через пять секунд ожидания перенаправляет вызов на
страницу xhtml07-04.htm.
В разделе <head> страницы Redirect.htm имеется следующий тег
<meta> для перехода на страницу xhtml07-04.htm.
<head>
<title>Redirect Page</title>
<meta http-equiv="refresh" content="5; url=xhtml07-04.htm"/>
</head>
310

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 7.18.
страницу

Код

автоматической

переадресации

на

другую

Слайд-шоу
В теге <meta/> с атрибутами http-equiv и content можно
закодировать
переход
на
ряд
страниц,
чтобы
создать
самовыполняющуюся демонстрацию слайдов (слайд-шоу), которая
автоматически загружает одну страницу за другой. Каждый тег
<meta/> определяет время просмотра страницы вместе со ссылкой на
следующую страницу последовательности.
Следующая графическая ссылка загружает первую (Slide1.htm) из пяти
страниц слайд-шоу, которые все расположены в текущем каталоге. Код
этой начальной ссылки показан ниже.
<a href="Slide1.htm"><img src="Pixar.gif" alt="Просмотр слайд-шоу"/></a>

Рис. 7.13. Ссылка на слайд-шоу
Каждая страница слайд-шоу содержит тег <meta/>, задающий адрес
URL следующей страницы в последовательности и задающий таймер
обновления на три секунды. Следующий сокращенный код находится на
страницах слайдов.
<head>
<title>Slide 1</title>
<meta http-equiv="refresh" content="3; url=Slide2.htm"/>
</head>
<body>
<h1>Toy Story</h1>
<p><img src="ToyStory.jpg" alt="Toy Store Image"/></p>
</body>
<head>
<title>Slide 2</title>
<meta http-equiv="refresh" content="3; url=Slide3.htm"/>
311

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</head>
<body>
<h1>A Bug's Life</h1>
<p><img src="BugsLife.jpg" alt="A Bugs's Life Image"/></p>
</body>
<head>
<title>Slide 3</title>
<meta http-equiv="refresh" content="3; url=Slide4.htm"/>
</head>
<body
<h1>Finding Nemo</h1>
<p><img src="FindingNemo.jpg" alt="Finding Nemo Image"/></p>
</body>
<head>
<title>Slide 4</title>
<meta http-equiv="refresh" content="3; url=Slide5.htm"/>
</head>
<body
<h1>Monsters, Inc.</h1>
<p><img src="MonstersInc.jpg" alt="Monsters, Inc. Image"/></p>
</body>
<head>
<title>Slide 5</title>
<meta http-equiv="refresh" content="3; url=begin.htm"/>
</head>
<body
<h1>Toy Story 2</h1>
<p><img src="ToyStory2.jpg" alt="Toy Store 2 Image"/></p>
</body>
Листинг 7.19. Частичный код страниц слайд-шоу

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<a href="#" onclick="open('Slide1.htm','','')">
<img src="Pixar.gif" alt="Просмотр слайд-шоу"/>
</a>
Листинг 7.20. Вывод слайд-шоу в отдельном окне браузера

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

Перемещение между папками
По мере накопления большого числа документов Web, скорее всего,
потребуется организация различных приложений Web по отдельным
каталогам, подчиненным корневому каталогу - который, в свою очередь,
подчинен основному каталогу Web. Рисунок 7.14 иллюстрирует эту
идею с помощью трех подкаталогов в корневом каталоге Website,
каждый из которых содержит страницы Web. Папка Application3
содержит, кроме того, подкаталог Media для хранения всех графических
файлов, относящихся к этому приложению.

313

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 7.14. Пример структуры каталога Web
При кодировании атрибута src в теге <img/> или атрибута href в
теге <a> необходимо проследить иерархию каталогов от страницы Web,
содержащей тег до расположения определенных в ссылке реального
изображения или страницы. Это означает, что может понадобиться
спуститься на один или несколько уровней каталогов, чтобы найти
изображение или присоединенную страницу; или что необходимо
подняться по иерархии, чтобы найти изображение или страницу; или
что необходимо подняться в иерархии в каталог более высокого уровня,
а затем спуститься в папку, содержащую изображение или страницу
ссылки.
Причина этого перемещения вверх и вниз по каталогам состоит в том,
что присоединяемые страницы или изображения указываются
относительно страницы, содержащей ссылку. Используя иллюстрацию,
предположим, что PageA.htm в каталоге Application1 содержит тег
<img/>, указывающий на Picture1.gif в подкаталоге каталога
Application3. Чтобы создать ссылку src со страницы PageA.htm на
Picture1.gif, необходимо пройти следующий путь доступа:
314

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

- перейти на один уровень вверх из папки Application1 в папку WebSite;
- перейти на один уровень вниз из папки WebSite в папку Application3;
- перейти еще на один уровень вниз из папки Application3 в папку Media.
Используется два типа спецификации пути доступа для перемещения в
иерархии каталогов при определении местонахождения страниц Web и
графических изображений:
- записывают две точки, за которыми следует наклонная черта ( "../"
), для каждого уровня при перемещении вверх по иерархии папок;
- записывают имя папки, за которым следует наклонная черта ( "/" ),
для каждого уровня при перемещении вниз по иерархии папок.
Например, адрес URL для ссылки <img/> со страницы PageA.htm на
Picture1.gif будет следующим:
<img src="../Application3/Media/Picture1.gif"/>
Листинг 7.21. Соединение с
перемещение между каталогами

графическим

файлом,

используя

Из текущего каталога, содержащего PageA.htm, перемещаемся вверх на
один уровень ( ../ ) из каталога Application1 в каталог WebSite. Из
каталога WebSite спускаемся вниз по каталогам Application3/ и Media/,
чтобы найти Picture1.gif.
Обычно спецификации путей доступа будут не такими сложными. Как
правило, для папки, содержащей страницы Web, создают одну папку
Media внутри папки страниц, в которой хранятся все изображения,
используемые на этих страницах. Тогда ссылка src на изображение
должна будет указывать вниз только на один уровень каталогов:
<img src="Media/Picture.gif"/>
Листинг 7.22. Соединение с графическим файлом в подкаталоге

Приведенный выше пример соединяет страницу Web с изображением.
Тот же самый подход используют при соединении одной страницы с
315

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

другой. В приведенной выше структуре каталогов ссылка на странице
PageA.htm, указывающая на страницу Page2.htm, будет иметь вид:
<a href="../Application3/Page2.htm">На страницу Page2.htm</a>
Листинг 7.23. Соединение со страницей Web в другой папке

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

316

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Тег <pre>
Ранее мы познакомились с тегом <pre> как с одним из методов
организации данных в строки и столбцы для табличного
представления. Блок текста, окруженный тегом <pre>, выводится
моноширинным (равномерным) шрифтом точно в том же виде, как он
был введен в текстовом редакторе. Этот тег часто используется для
создания простых таблиц, где выравнивание столбцов осуществляется с
помощью вставки дополнительных пробелов.
317

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Следующий код из редактора, например, показывает таблицу, созданную
с помощью клавиши Enter для создания отдельных строк и пробела
(Space Bar) для выравнивания столбцов данных. Эта компоновка
таблицы выводится на странице Web точно в таком же формате, как она
введена внутри тегов <pre>.
<pre>
Таблица 1
Продажи по регионам
---------------------------------------------Регион/Год 2000 2001 2002 2003
---------------------------------------------Восток
35.2 37.4 39.8 40.0
Запад
28.0 25.6 27.4 29.8
Юг
102.3 86.1 98.6 100.2
Север
10.5 8.6 9.8 10.4
---------------------------------------------</pre>
Листинг 8.1. Код для создания таблицы с помощью тега <pre>

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

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

318

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.1. Таблица 3 x 3
Строки, столбцы и ячейки таблицы определяются с помощью трех
основных тегов. Тег <table> охватывает все описание таблицы; теги
<tr> (table row) определяют строки таблицы; а теги <td> (table data)
определяют ячейки, или столбцы, которые появляются в каждой строке.
Тег <td> охватывает содержимое, которое появляется в ячейке. Эти
теги показаны в их общем структурном формате на листинге 8.2.
<table>
<tr>
<td>содержимое ячейки</td>
<td>содержимое ячейки</td>
...
</tr>
...
</table>
Листинг 8.2. Общий формат основных тегов таблицы

Для задания таблицы используется столько тегов <tr>, сколько имеется
строк в таблице, и столько тегов <td>, сколько имеется ячеек
(столбцов) в каждой строке. При создании таблиц надо внимательно
следить за правильным расположением открывающих и закрывающих
тегов. Небольшая ошибка в организации может приводить к полному
разрушению таблицы. Желательно также аккуратно организовать код,
чтобы структура таблицы была легко видна. Следующий код, например,
используется для таблицы, показанной выше на рисунке 8.1.
<table>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
319

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Листинг 8.3. Код для создания таблицы 3 x 3

Отметим, что теги <table>, <tr>, и <td> являются контейнерными
тегами, которые требуют как открывающего, так и закрывающего тега.
Тег <table> ограничивает весь код таблицы; теги <tr>
ограничивают каждую строку таблицы; теги <td> ограничивают
каждую ячейку строки таблицы.
Код на листинге 8.3 организован с построчной иерархией тегов,
напоминающей о структуре таблицы. Такая манера кодирования
полезна для визуализации таблицы, хотя теги таблицы можно
кодировать в свободном стиле, как и любой другой код XHTML.
Например, эту же таблицу вверху можно закодировать следующим
образом:
<table>
<tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr>
<tr><td>Cell 3.1</td><td>Cell 3.2</td><td>Cell 3.3</td></tr>
</table>
Листинг 8.4. Альтернативный код создания таблицы 3 x 3

Однако, поскольку ячейки таблицы ( <td>...</td> ) могут
содержать информацию различной длины и сложности, то лучше
кодировать их на отдельных строках, как на листинге 8.3, для более
320

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

точной визуализации и ввода содержимого ячеек.

Границы таблицы и ячеек
По умолчанию теги таблицы не создают границы вокруг таблицы или
вокруг ее ячеек. Код на листингах 8.3 и 8.4 создает в действительности
таблицу, показанную ниже на листинге 8.5. Данные выровнены по
столбцам и строкам, однако, никакие границы не выводятся. В
некоторых случаях границы таблиц выводить нежелательно, но в
большинстве случаев их выводят. Поэтому, чтобы выводить вокруг
таблицы и ее ячеек границы, необходимо применять таблицы стилей.
Cell 1.1 Cell 1.2 Cell 1.3
Cell 2.1 Cell 2.2 Cell 2.3
Cell 3.1 Cell 3.2 Cell 3.3
Листинг 8.5. Стандартная таблица 3 x 3

Границу вокруг всей таблицы задают оформлением тега <table> ;
границы, окружающие отдельные ячейки, задают оформлением тега
<td>. Показанный ниже код создает таблицу с границами, показанную
на рисунке 8.1. Вся таблица окружена внешней границей толщиной 1
пиксель, а каждая из ячеек окружена внутренней границей толщиной 1
пиксель. Такое оформление типично для стандартной таблицы XHTML.
<style type="text/css">
table {border:outset 1px}
td {border:inset 1px}
</style>
<table>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
321

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Листинг 8.6. Код создания таблицы 3 x 3 с границами

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

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

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 8.2. Вложенные таблицы
<style type="text/css">
table {border:outset 1px}
td {border:inset 1px}
</style>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>
</td>
323

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</tr>
</table>
Листинг 8.7. Код, создающий вложенную таблицу

В этом примере можно также видеть используемое по умолчанию
выравнивание данных в ячейках. Обратите внимание в Cell 2, что
запись по горизонтали выровнена в ячейке влево; в Cell 3 запись по
вертикали выровнена по центру ячейки.

Оформление нескольких таблиц
Так как таблицы являются одним из наиболее эффективных методов
организации содержимого на странице Web, то часто на одной странице
встречаются две и больше таблиц либо вложенные таблицы или
несколько таблиц, содержащих различные данные. При этом часто
необходимо оформить эти таблицы различным образом. Поэтому
встроенная таблица стилей должна различать таблицы, чтобы каждая
из них могла иметь свое собственное специальное оформление.
Вспомните из предыдущего обсуждения, что элементам страницы могут
присваиваться для уникальной идентификации эначения id. Эти id
нужны затем во встроенной таблице стилей для указания, какому
уникальному элементу соответствует какой стиль. Эту технику можно
использовать для применения различных стилей к разным таблицам на
одной странице.
Две таблицы на рисунке 8.3, например, имеют различные стили
границы и размеры. Первая таблица оформлена со стандартными
границами; вторая таблица использует стиль outset для границ
таблицы и ячеек и другую толщину границ.

Рис. 8.3. Оформление нескольких таблиц на одной странице
324

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Таблица стилей и определения этих двух таблиц показаны на листинге
8.8.
<style type="text/css">
table#Table1 {border:outset 1px}
table#Table1 td {border:inset 1px}
table#Table2 {border:outset 3px}
table#Table2 td {border:outset 2px}
</style>
<table id="Table1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<table id="Table2">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Листинг 8.8.
странице

Код

оформления

нескольких

таблиц

на

одной

Селекторы ID используются для раздельного оформления тегов
<table> для двух таблиц. Контекстные селекторы применяются для
оформления их тегов <td>. Таким образом можно оформить
различными стилями любое число таблиц без конфликтов оформления.
325

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Это введение в таблицы дает общий обзор таблиц и подходов на основе
таблиц стилей для их оформления. Далее подробно рассмотрены
различные аспекты проектирования и форматирования таблиц.

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

Стили границ таблицы
Любой из стилей границы, которые были введены ранее, можно
применить к внешней границе таблицы. Рисунок 8.4 показывает
примеры стилей границы, общий код которых в общем виде
представлен на листинге 8.9.
<style type="text/css">
table {border:style 5px}
td {border:inset 1px}
</style>
Листинг 8.9. Общий код таблицы стилей для границ таблицы

Стиль границы ( style ) определен на рисунке 8.4 для каждой
таблицы. Таблица стилей использует общий формат {border:style
size} для всех стилей границы.

326

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Индивидуальные стили границ
В приведенных выше примерах границы выводятся вокруг всех четырех
сторон таблицы. Однако можно определить индивидуальное
оформление для отдельных сторон. С помощью свойств bordertop, border-bottom, border-left, и border-right
можно выборочно задавать границы вокруг таблицы. Например,
таблица на рисунке 8.5 выводит только верхнюю и нижнюю границы с
помощью таблицы стилей, заданной на листинге 8.10.
<style type="text/css">
table {border-top:outset 5px; border-bottom:outset 5px}
td {border:inset 1px}
</style>
Листинг 8.10. Таблица
таблицы

стилей

для

верхней

и

нижней

границ

Рис. 8.5. Таблица с верхней и нижней границами

Сжатие границ ячеек
Границы вокруг ячеек таблицы обычно выводятся независимо друг от
друга. То есть, каждая ячейка окружена своей собственной границей,
создавая вид "удвоенной границы" у смежных ячеек. Эти удвоенные
границы можно сжать в одиночные границы, задавая для таблицы
свойство стиля border-collapse.
327

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Таблица 8.1. Свойство
стиля таблицы bordercollapse
Свойство Значения
border-collapse

separate
collapse

Применяемой по умолчанию настройкой границы таблицы является
border-collapse:separate.
При
задании
bordercollapse:collapse ячейки совместно используют "одиночные
границы" между собой. Этот эффект иллюстрируется в таблицах на
рисунке 8.6, оформленных со сжатыми границами.
<style type="text/css">
table {border:style 5; border-collapse:collapse}
td {border:solid 1px}
</style>
Листинг 8.11. Таблица стилей для сжатия границ таблицы

Рис. 8.6. Таблицы со сжатыми границами ячеек
Отметим, что сжатые границы определяют для тега <table>, хотя
этот параметр применяется к ячейкам таблицы. Нельзя также
выборочно применить сжатие границ к отдельным ячейкам. Когда
границы таблицы сжаты, все границы ячеек оформляются как
border:solid 1px; другие стили и толщины не распознаются.

Стили границ ячеек
328

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Если границы ячеек не сжаты, тот же набор стилей оформления,
которые применяется для внешней границы таблицы, можно
использовать для ее отдельных ячеек. В примерах на рисунке 8.7
внешние границы таблиц имеют толщину 1px, а границы ячеек имеют
толщину 5px, чтобы выделить их оформление.
<style type="text/css">
table {border:solid 1px}
td {border:style 3px}
</style>
Листинг 8.11. Общий код таблицы стилей для границ ячеек

Рис. 8.7. Варианты границ ячеек

Выборочное оформление границ ячеек
Окружающие ячейки границы можно выборочно оформлять, применяя
для тега <td> стили border-top, border-bottom, borderleft, и border-right. Эти стили используются обычно для вывода
верхней и нижней или правой и левой границ для выделения строк или
столбцов таблицы. Две таблицы, показанные на рисунке 8.8, выводятся
с таблицей стилей, заданной на листинге 8.12.
<style type="text/css">
table {border:outset 5px; border-collapse:collapse}
td {border-top:solid 2px; border-bottom:solid 2px}
</style>
<style type="text/css">
table {border:outset 5px; border-collapse:collapse}
td {border-left:solid 2px; border-right:solid 2px}
329

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</style>
Листинг 8.12.
столбцов

Таблицы

стилей

для

задания

границ

строк

и

Рис. 8.8. Задание границ строк и столбцов
Чтобы расширить границы строки и столбца на всю таблицу, границы
должны быть сжаты. Иначе в линиях появятся разрывы между
отдельными ячейками. Как упоминалось ранее, сжатые границы
означают также, что не выводятся различные стили границ ячеек.
Поэтому стиль границы solid является единственным, который
необходимо использовать для всех ячеек.

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

Рис. 8.9. Выделение строки таблицы с помощью границ ячеек
330

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Такой результат можно получить, применяя линейную таблицу стилей к
выбранным ячейкам. Однако такая ситуация особенно подходит для
использования селекторов ID и контекстных селекторов. Полный код
таблицы и оформления (таблицы стилей) показаны ниже.
<style type="text/css">
table#TAB1
{border:outset 3px}
table#TAB1 td
{border:inset 1px}
table#TAB1 tr#ROW3 td {border:outset 3px}
</style>
<table id="TAB1">
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr id="ROW3">
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Листинг 8.13. Код выделения строки таблицы с помощью границ
ячеек

Самой таблице присваивается id, чтобы уникальным образом
идентифицировать ее среди других таблиц на странице. В этой строке
применяется специальное оформление границы для ее ячеек.
В таблице стилей для таблицы задан стиль внешней границы с
помощью ID-селектора table#TAB1, который выбирает для
приложения стиля границы тег <table> с id="TAB1".
Контекстный селектор table#TAB1 td задает для всех ячеек этой
331

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

таблицы внутреннюю границу толщиной 1 пиксель - т.е. там, где тег
<td> содержится внутри тега <table> для таблицы с id="TAB1".
Контекстный селектор используется также для оформления последней
строки таблицы. В селекторе table#TAB1
tr#ROW3
td
применяется 3-пиксельная внешняя граница - т.е. там, где тег <td>
содержится внутри тега <tr> с id="ROW3", который содержится
внутри тега <table> с id="TAB1" .
Если только одна ячейка имеет стили границ, то этой ячейке можно
задать id, например, id="CELL9". Затем селектором оформления
этой одной ячейки будет
table#TAB1 td#CELL9 {border:outset 3px}
где тег <td> с id="CELL9" содержится внутри тега <table> с
id="TAB1". В этом случае не нужно будет определять строку таблицы.

Исключенные атрибуты тега <table>
Границы вокруг таблицы и между ячейками таблицы выводятся с
помощью атрибута border="n" тега <table>, где n является
толщиной внешней границы в пикселях. Следующая таблица имеет
границу толщиной 1 пиксель:

Изменение толщины внешней границы не влияет на величину границ
ячеек. Используемым по умолчанию стилем внешней границы является
"outset", внутренних границ - "inset".

332

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Заголовок таблицы
Тег <caption>
Заголовок таблицы можно определить, кодируя тег <caption> сразу
после тега <table>. Введите заголовок таблицы между открывающим
и закрывающим тегами <caption>, и заголовок появится
выровненным по центру над таблицей. Заголовок выводится
используемым по умолчанию на странице стилем шрифта и размером;
форматирование происходит с помощью таблиц стилей, как показано в
следующем примере кода для таблицы, приведенной на рисунке 8.10.

Рис. 8.10. Таблица с заголовком
<style type="text/css">
table
{border:outset 3px}
table td {border:inset 1px}
table caption {font:bold 10pt arial}
</style>
<table>
<caption>This is My Table</caption>
333

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Листинг 8.14. Код таблицы с заголовком

Оформление заголовка можно задавать с помощью селектора caption.
В этом примере оформление шрифта происходит с помощью
сокращенной записи font.
font:style variant weight size family
Заголовок по умолчанию выравнивается по центру. Для заголовка
можно задать свойство text-align, чтобы выровнять его по
правому или левому краю таблицы. Заголовки выводятся только в верху
таблицы. Стандарты таблиц стилей предлагают стиль captionside:top|bottom|left|right
для
задания
положения
заголовка; однако это свойство не реализовано в современных
браузерах.

Тег <th>
Заголовки столбцов можно задавать, используя теги <th> вместо тегов
<td>, ограничивающих содержимое ячейки. Тег <th> автоматически
выравнивает по центру и делает полужирным вложенный текст. Для
334

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 8.11. Использование тега <th> для заголовков столбцов
<style type="text/css">
table
{border:outset 3px; border-collapse:collapse}
table td, th {border:inset 1px}
table caption {font:bold 10pt arial}
</style>
<table>
<caption>This is My Table</caption>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
335

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Листинг 8.15. Код для создания заголовков столбцов таблицы

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

Рис. 8.12.
строки

Создание заголовков столбцов с помощью оформления

<style type="text/css">
table
{border:outset 3px; border-collapse:collapse}
table tr#HEAD {font:bold; text-align:center}
table td {border:inset 1px}
table caption {font:bold 10pt arial}
</style>
<table>
<caption>This is My Table</caption>
<tr id="HEAD">
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
336

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Листинг 8.16. Код для создания заголовков столбцов с помощью
оформления строки

Контекстный селектор tr#HEAD td указывает оформление тегов td,
которое появляется внутри тега tr с id="HEAD". Программист может
выбрать использование тега th и его встроенного оформления или
реализовать все оформление с помощью таблиц стилей. Как общее
правило, чем меньше используется тегов, тем лучше.

Исключенный атрибут align тега <caption>
Заголовки могут появляться вверху или внизу таблицы в зависимости
от использования атрибута align="top" (по умолчанию) или
align="bottom" в теге <caption>.

337

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Цвет границ таблицы
Представление цвета границы зависит от стиля границы. Ниже
показаны примеры различных стилей границы, выведенные красным
цветом.
<style type="text/css">
table {border:style 5px red}
td {border:inset 1px}
</style>
Листинг 8.17. Общая таблица стилей для задания цвета границы
таблицы

338

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.13. Варианты стиля и цвета границы таблицы
Можно создавать свои собственные 3-D эффекты затенения, оформлять
каждую из сторон различным образом, используя цвета для bordertop, border-right, border-bottom, и border-left.
Следующие таблицы создают свои собственные 3-D эффекты с
помощью сплошных границ ( solid ), подкрашенных, чтобы
напоминать стили inset и outset. Примененные для этих двух
таблиц стили показаны на листинге 8.18.

Рис. 8.14. Граница таблицы с 3-D эффектами, использующими цвета
границы
<style type="text/css">
<!-- Inset Style -->
table {border:solid 7px;
border-top-color:#FEB9B9;
border-right-color:#B22222;
border-bottom-color:#B22222;
border-left-color:#FEB9B9}
table td {border:inset 1px}
</style>
<style type="text/css">
<!-- Outset Style -->
339

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

table {border:solid 7px;
border-top-color:#B22222;
border-right-color:#FEB9B9;
border-bottom-color:#FEB9B9;
border-left-color:#B22222}
table td {border:inset 1px}
</style>
Листинг
8.18.
Код
таблицы
индивидуальными цветами границы

стилей

для

таблиц

с

Цвет границ ячеек
Границы вокруг ячеек таблицы оформляются и окрашиваются
независимо от внешней границы. В следующих примерах внешняя
граница имеет толщину 1 пиксель, а границы ячеек имеют красный
цвет и толщину 3 пикселя.
<style type="text/css">
table {border:solid 1px}
td {border:style 3px rgb(255,0,0)}
</style>
Листинг 8.19. Общая таблица стилей для цветов границ ячеек
таблицы

Рис. 8.15. Варианты стилей границ таблицы и цвета
Как и в случае границы таблицы, границы ячеек можно оформлять и
окрашивать независимо. На рисунке 8.16 все ячейки в двух таблицах
оформлены сплошными ( solid ) границами толщиной 5 пикселей.
Для их сторон используются различные оттенки красного цвета для
создания 3-D эффектов, подобных границам inset и outset. Две
340

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

примененные таблицы стилей показаны на листинге 8.20.

Рис. 8.16. Таблицы с индивидуальными цветами границ ячеек
<style type="text/css">
<!-- Inset Style -->
table {border:solid 1px}
table td {border:solid 5px;
border-top-color:#FEB9B9;
border-right-color:#B22222;
border-bottom-color:#B22222;
border-left-color:#FEB9B9}
</style>
<style type="text/css">
<!-- Outset Style -->
table {border:solid 1px}
table td {border:solid 5px;
border-top-color:#B22222;
border-right-color:#FEB9B9;
border-bottom-color:#FEB9B9;
border-left-color:#B22222}
</style>
Листинг
8.20.
Код
таблицы
стилей
индивидуальными цветами границ ячеек

для

таблиц

с

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

серый цвет фона применяется ко всей таблице, задавая свойство
background-color тега <table>.

Рис. 8.17. Таблица с заданным цветом фона
<style type="text/css">
table {border:ridge 5px; background-color:#F6F6F6}
table td {border:inset 1px}
</style>
Листинг 8.21. Код для таблицы с заданным цветом фона

Фон ячеек и цвет текста
Следующая таблица использует различные цвета фона для каждой из
своих строк, определяя свойство background-color для каждого
отдельного тега <tr>. Цвет текста выбранных строк задается с
помощью свойства color. Кроме того, для одной определенной
ячейки задан цвет фона, который переопределяет цвет строки, в которой
она находится, и ей задан другой стиль границы.

Рис. 8.18. Таблица со строками различного цвета
<style type="text/css">
table
{border:ridge 5px}
342

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

table td
{border:inset 1px}
table tr#ROW1 {background-color:red; color:white}
table tr#ROW2 {background-color:white}
table tr#ROW3 {background-color:blue; color:white}
table td#CELL9 {border:inset 4px; background-color:navy}
</style>
<table>
<tr id="ROW1">
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr id="ROW2">
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr id="ROW3">
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td id="CELL9">Cell 3.3</td>
</tr>
</table>
Листинг 8.22. Код таблицы со строками различного цвета

Фон таблицы
Таким же образом, как цвет, можно определить фоновое изображение
для таблицы либо для любой из ее строк или ячеек. В следующем
примере текстурированный фон применяется ко всей таблице со
свойством background-image, заданным в теге <table>. По
умолчанию узор повторяется поперек и вниз, чтобы заполнить область
таблицы.

343

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.19. Таблица с фоновым изображением
<style type="text/css">
table {border:ridge 5px; background-image:url(bkgnd.jpg)}
table td {border:inset 1px}
</style>
Листинг 8.23. Код для таблицы с фоновым изображением

В случае необходимости можно применять другие свойства фона background-repeat и background-position.

Исключенные атрибуты тега <table>
Цвет
границы
можно
определить
с
помощью
атрибута
bordercolor="color" тега <table>, где color будет именем
цвета или шестнадцатеричным значением.
<table border="5" bordercolor="red">

Эффект окрашенной тени можно создавать у внешней границы таблицы
с
помощью
атрибутов
bordercolordark="color"
и
bordercolorlight="color".
<table border="5" bordercolordark="red" bordercolorlight="pink">
344

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Цвет фона таблицы задается атрибутом bgcolor="color". При
применении в теге <table> фон станет цветным.
<table border="5" bgcolor="lightblue">

Цвет фона ячеек задается с помощью атрибута bgcolor в теге <tr>
(для окрашивания строки) или в теге <td> (для окрашивания ячейки).
Цвет ячейки переопределяет цвет строки, который, в свою очередь,
переопределяет цвет фона таблицы. Следующая таблица определяет
цвет строки, одна из ячеек которой имеет другой цвет фона.
<table border="5" bgcolor="gainsboro">
<tr bgcolor="lightblue">
<td bgcolor="pink">

Фоновое изображение задается атрибутом background="url".
Фоновые изображения можно применять в отдельных ячейках таблицы,
кодируя этот атрибут в теге <td>.
<table border="5" background="bkgnd.jpg">
345

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Эти атрибуты таблицы, строки и ячейки являются исключенными и
должны заменяться эквивалентными свойствами таблицы стилей.

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

Ширина и высота таблицы
Общая ширина таблицы задается свойством width ; ее высота задается
свойством height. Размеры можно измерять в пикселях - для задания
точных размеров; или они могут выражаться в процентах от ширины и
высоты окна браузера - чтобы размер таблицы изменялся в
соответствии с размером окна.
Таблица на рисунке 8.20 имеет ширину и высоту, которые задаются по
умолчанию; ее размер не превышает размера, необходимого для вывода
содержащихся в ячейках данных.

Рис. 8.20. Таблица с шириной и высотой по умолчанию
346

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 8.21. Таблица с заданной шириной и высотой
<style type="text/css">
table {border:outset 1; width:50%; height:100px}
table td {border:inset 1}
</style>
Листинг 8.24. Код таблицы с заданной шириной и высотой

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

Ширина столбцов
Шириной столбцов можно управлять, определяя размер ячейки каждого
столбца. Эта ширина одной ячейки становится шириной, которой будут
соответствовать все остальные ячейки столбца. Следующая таблица
имеет размер в 50% от ширины окна. Затем ячейкам в первой строке
таблицы, содержащим в данном случае заголовки столбцов, задают
ширину в процентах от ширины таблиц, а не ширины страницы.
Поэтому сумма значений ширины столбцов должна составлять 100%
полной ширины таблицы.
347

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.22. Таблица с заданной шириной столбцов
<style type="text/css">
table
{border:outset 1; width:50%}
table td
{border:inset 1}
table tr#HEAD {font-weight:bold;
text-align:center;
background-color:#F0F0F0}
table td#CELL1 {width:25%}
table td#CELL2 {width:50%}
table td#CELL3 {width:25%}
</style>
<table>
<tr id="HEAD">
<td id="CELL1">Column 1</td>
<td id="CELL2">Column 2</td>
<td id="CELL3">Column 3</td>
</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
348

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Листинг 8.25. Код таблицы с заданной шириной столбцов

Не требуется обязательно задавать процент ширины для всех ячеек
строки. Для всех остальных ячеек строки браузер задаст одинаковый
размер, так, чтобы общая сумма значений ширины всех ячеек в строке
составляла 100% ширины таблицы. Если ширина ячейки будет
недостаточна для вывода ее данных, то браузер увеличит ширину до
необходимого минимума.
Вместо использования процентов можно определять ширину таблицы в
пикселях. Однако обычно желательно использовать проценты, чтобы
дать браузеру достаточно свободы в определении размера таблицы для
размещения в доступной ширине окна. Высоту строк можно задавать
таким же образом, как задается ширина столбцов: определяя высоту
одной ячейки в строке; остальные ячейки изменяют свою высоту в
соответствии с этой высотой. Если нет специальной причины для
изменения высоты строки, то лучше предоставить браузеру
возможность самому определить необходимую высоту для вывода
данных таблицы.

Выравнивание таблицы

Рис. 8.23. Плавающая таблица
349

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Таблицы можно выравнивать влево или вправо на странице, задавая
для селектора table свойство float. Когда таблицы определена как
плавающая, текст обтекает таблицу примерно так же, как обтекание
текста происходит вокруг плавающих изображений.
Код плавающей таблицы появляется непосредственно перед текстом,
который будет обтекать таблицу. По сторонам таблицы можно добавлять
поля, чтобы оставить свободное пространство между таблицей и
обтекающим текстом. Следующая частичная таблица стилей
применяется для плавающей таблицы, показанной на рисунке 8.23.
<style type="text/css">
table {border:outset 1; float:right; margin-left:20px; margin-bottom:10px}
...
</style>
Листинг 8.26. Частичная таблица стилей для плавающей таблицы

Таблицу можно выравнивать влево, или вправо, или по центру
отдельной строки. Однако в этом случае оформление выравнивания не
связывается с самой таблицей. Таблица должна вкладываться внутрь
тега <p> или <div> (блочные теги), которым присваивается свойство
text-align. Таблица на рисунке 8.24 кодируется внутри тега <p>,
который содержит оформление для выравнивания его содержимого по
центру.

Рис. 8.24. Выровненная по центру таблица
<style type="text/css">
p#CENTER {text-align:center}
350

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

table
{border:outset 1}
table td {border:inset 1}
table caption {font-weight:bold}
table tr#HEAD {font-weight:bold;
text-align:center;
background-color:#F0F0F0}
</style>
<p id="CENTER">
<table>
<caption>A Centered Table</caption>
...
</table>
</p>
Листинг
таблицы

8.27.

Таблица

стилей

для

выровненной

по

центру

Исключенные атрибуты тега <table>
Ширина таблицы задается атрибутом width="n" тега <table>, где n
является значением ширины в пикселях или процентом ширины окна
браузера.
<table border="1" width="35%">

Ширину ячеек можно задавать значением в пикселях или процентом с
помощью атрибута width, закодированного в теге <td> или <th>.
Высота ячейки задается с помощью атрибута height="n".
<table border="1" align="right">
351

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Таблицу можно выровнять влево или вправо на странице с помощью
атрибута align="left|right" тега <table>. Текст будет
обтекать вокруг помещенной таблицы. Пробелы вокруг таблицы можно
добавить с помощью задания полей в таблице стилей. Таблица с
атрибутом align="center" появляется одна на строке, выровненная
по центру.
<table border="1" align="center">

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

Отступы в ячейках
Отступ в ячейке добавляет свободное пространство вокруг текста в
ячейке. Его величина определяется с помощью атрибута padding,
задаваемого в селекторе ячейки td в таблице стилей. В следующей
таблице вокруг данных в ячейках таблицы создается отступ величиной
5 пикселей.
352

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.25. Таблица с отступами в ячейках
<style type="text/css">
table {border:outset 1}
table td {border:inset 1; padding:5px}
</style>
Листинг 8.28. Таблица стилей для задания отступов в ячейках
таблицы

Интервал между ячейками
Интервал между ячейками определяет величину расстояния в пикселях
между ячейками таблицы - по сути, ширину внутренних границ между
ячейками. Хотя стандарты CSS предлагают свойство borderspacing для настройки этого интервала, современные браузеры его не
поддерживают. Поэтому интервал между ячейками должен задаваться с
помощью исключенного атрибута cellspacing="n" тега <table>,
определяющего число пикселей между границами ячеек. Хотя это
исключенный атрибут, он остается действительным согласно
стандартам XHTML Strict. В следующем примере интервал между
ячейками cellspacing задается как 10px.

Рис. 8.26. Таблица с интервалом между ячейками
353

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<style type="text/css">
table {border:outset 1}
table td {border:inset 3; padding:5px}
</style>
<table cellspacing="10">
...
</table>
Листинг 8.29. Атрибут
между ячейками таблицы

cellspacing

для

задания

интервала

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

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

Выравнивание по вертикали
С помощью свойства vertical-align содержимое можно
выравнивать по верхнему краю, по середине или по нижнему краю
ячейки. Таблица на рисунке 8.28 применяет эти выравнивания по
354

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 8.28. Вертикальное выравнивание данных в ячейках
<style type="text/css">
table
{border:outset 1; width:250px; height:150px}
table td {border:inset 1}
table tr#ROW1 {vertical-align:top}
table tr#ROW2 {vertical-align:middle}
table tr#ROW3 {vertical-align:bottom}
</style>
<table>
<tr id="ROW1">
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr id="ROW2">
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr id="ROW3">
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
355

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 8.30. Таблица стилей
выравнивания текста в ячейках

для

задания

вертикального

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

Рис. 8.29. Горизонтальное выравнивание в ячейках таблицы
<style type="text/css">
table
{border:outset 1; width:250px; height:150px}
table td {border:inset 1}
table tr#ROW1 {vertical-align:top; text-align:left}
table tr#ROW2 {vertical-align:middle; text-align:center}
table tr#ROW3 {vertical-align:bottom; text-align:right}
</style>
Листинг
8.31.
Таблица
стилей
выравнивания текста в ячейках таблицы

для

горизонтального

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 8.30. Таблицы с пропущенными ячейками данных
<table>
<tr>
<td>&nbsp;</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>&nbsp;</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>&nbsp;</td>
</tr>
</table>
Листинг 8.32. Использование символов
для вывода границ вокруг пустых ячеек

неразрывного

пробела

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Рис. 8.32. Таблица со свернувшимися заголовками строк и столбцов
Нет ничего неправильного в отношении содержимого таблицы; она
просто выглядит не так, как предполагалось. Однако можно отключить
перенос слов в ячейках таблицы, задавая свойство стиля whitespace для тех ячеек, где нежелательно сворачивание текста.
Таблица 8.2.
Свойство стиля
358

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

white-space
Свойство Значение
normal
white-space nowrap
pre

Это свойство стиля определяет, как браузер должен обрабатывать
пробелы в текстовой строке. Значение normal сжимает все смежные
пробелы в один пробел и переносит строку текста на пробеле, где
остающийся в строке текст не помещается в указанную ширину его
контейнера. В противоположность этому значение nowrap
интерпретирует пробелы как неразрывные ( &nbsp; ) и не переносит
строку. Значение pre действует как тег <pre> и сохраняет столько
пробелов, сколько было закодировано, также интерпретируя их как
неразрывные пробелы.
Если ячейка таблицы недостаточно широка для вывода своего текста на
одной строке, то текст обычно переносится в позиции пробела в
текстовой строке. Это происходит с заголовками столбцов и строк в
таблице на рисунке 8-32. Однако, задавая свойство whitespace:nowrap для этих ячеек таблицы, переноса строк в заголовках
можно избежать. Такие спецификации приводят к выводу таблицы
следующим образом.

Рис. 8.33. Таблица с заголовками столбцов и строк без переноса
Следующий листинг содержит весь код приведенной выше таблицы без
переноса в ячейках. В данном случае определен класс стиля .NOWRAP с
заданным свойством white-space:nowrap. Все ячейки, которые не
должны допускать сворачивание текста, присваиваются этому классу.
359

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<style type="text/css">
table
{border:0; width:230px}
table td
{border:inset 1; padding:3px}
table tr#C-HEAD {font-weight:bold; background-color:#F0F0F0; text-align:center
table td#R-HEAD1 {font-weight:bold; background-color:#F0F0F0; text-align:left}
table td#R-HEAD2 {font-weight:bold; background-color:#F0F0F0; text-align:left}
table td#BLANK {background-color:#FFFFFF}
.NOWRAP
{white-space:nowrap}
</style>
<table>
<tr id="C-HEAD">
<td id="BLANK"> class="NOWRAP"</td>
<td class="NOWRAP">Table Column 1</td>
<td class="NOWRAP">Table Column 2</td>
<td class="NOWRAP">Table Column 3</td>
</tr>
<tr>
<td id="R-HEAD1" class="NOWRAP">Table Row 1</td>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td id="R-HEAD2" class="NOWRAP">Table Row 2</td>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
</table>
Листинг 8.33.
таблицы

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

отключения

переноса

в

ячейках

Исключенные атрибуты тега <table>
Текст выравнивается по горизонтали в ячейках с помощью атрибута
align="left|center|right", задаваемого в тегах <tr>, <td>,
360

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

или<th>. Текст выравнивается по вертикали в ячейках с помощью
задаваемого в ячейке атрибута valign="top|middle|bottom".
Отступ в ячейке определяют с помощью атрибута cellpadding="n"
(пикселей), кодируемого в теге <table>. Интервал между ячейками
задается атрибутом cellspacing="n" (пиксели). Атрибут
cellspacing должен использоваться, пока браузеры не реализуют
предложенное свойство стиля border-spacing.

Сворачиванием текста в ячейках можно управлять, задавая nowrap
или nowrap="true" для любой ячейки таблицы: <td nowrap>
или <td nowrap="true">.

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

361

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.34. Таблица с объединенными ячейками

Атрибут colspan
В приведенном выше примере первая строка таблицы используется для
заголовков столбцов. Спецификации ячеек применяют атрибут
colspan="n", чтобы расширить каждую из ячеек заголовка <td> на
две ячейки.
<style type="text/css">
table
{border:outset 1px}
table td {border:inset 1px; padding:3px}
table tr#HEAD {font-weight:bold;
text-align:center;
background-color:#F0F0F0}
</style>
<table>
<tr id="HEAD">
<td colspan="2">Heading 1</td>
<td colspan="2">Heading 2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
<td>Cell 2.4</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
362

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<td>Cell 3.4</td>
</tr>
</table>
Листинг 8.34. Код для объединения ячеек таблицы

Отметим, что в первой строке требуется только два тега заголовков
<td>, хотя имеется четыре тега ячеек <td> для каждой строки данных,
так как каждый тег заголовка <td> объединяет по две ячейки (
colspan="2" ) из четырех ячеек, которые составляют всю ширину
таблицы.

Атрибут rowspan
Таким же образом, как объединяются столбцы, можно объединить
строки двух или нескольких смежных ячеек с помощью атрибута
rowspan="n", как показано на рисунке 8.35.

Рис. 8.35. Таблица с объединенными строками
<style type="text/css">
table
{border:outset 1px}
table td {border:inset 1px; padding:3px}
table td#HEAD {font-weight:bold;
text-align:center;
background-color:#F0F0F0}
</style>
<table>
<tr>
<td id="HEAD" rowspan="2">Heading</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
<td>Cell 1.4</td>
363

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</tr>
<tr>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
<td>Cell 2.4</td>
</tr>
</table>
Листинг 8.35. Код для объединения строк таблицы

Обратите внимание, что первая ячейка в первой строке объединяет две
строки. Поэтому во второй строке надо определить на одну ячейку
меньше. Первая строка имеет четыре тега <td> ; во второй строке
требуется только три тега <td>, так как первая ячейка в этой строке
объединена с предшествующей строкой.

Объединение строк и столбцов
Можно объединять ячейки разных строк и столбцов для создания
интересных и полезных табличных структур. Кодирование будет не
таким уж сложным, если просто следовать строго по каждой строке,
определяя, нужно ли кодировать тег <td> для каждой позиции ячейки
или можно пропустить тег <td>, так как ячейка уже была объединена.
В следующем коде теги <td>, которые не требуется кодировать,
выводятся в квадратных скобках []. Эти ячейки уже были объединены
другими ячейками, которые расширяют свое положение в таблице.

Рис. 8.36. Таблица с объединенными строками и столбцами
<style type="text/css">
table {border:outset 1px}
table td {border:inset 1px; padding:3px}
</style>
364

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<table>
<tr>
<td colspan="2">Cell 1.1</td>
[<td>Cell 1.2</td>]
<td>Cell 1.3</td>
<td rowspan="2">Cell 1.4</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td rowspan="2">Cell 2.2</td>
<td>Cell 2.3</td>
[<td>Cell 2.4</td>]
</tr>
<tr>
<td>Cell 3.1</td>
[<td>Cell 3.2</td>]
<td colspan="2">Cell 3.3</td>
[<td>Cell 3.4</td>]
</tr>
</table>
Листинг 8.36. Код для объединения строк и столбцов таблицы

Пример объединения
Показанная ниже таблица является примером использования
объединения строк и столбцов для создания сложной структуры
таблицы.

365

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.37. Сложная таблица с объединенными строками и столбцами

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

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

Визуализация таблицы с объединенными строками и

366

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Кодирование структуры таблицы
Следующий код начинает описание таблицы с заголовка, за которым
следует код первой строки таблицы. На этом этапе настройка таблицы
стилей еще не рассматривается. Внимание должно быть сосредоточено
на структуре таблицы и необходимых объединениях столбцов и строк.
<table>
<caption>Quantity and Value of Installed Software</caption>
<tr>
<td rowspan="2">Software</td>
<td colspan="2">Department A</td>
<td colspan="2">Department B</td>
</tr>
Листинг 8.37. Код для объединения заголовков столбцов

Начиная с верхнего левого угла таблицы на рисунке 8.38, заметим, что
первая ячейка объединяет две строки. Поэтому эта верхняя левая ячейка
кодируется с rowspan="2", для объединения с ячейкой ниже, чтобы
создать одну, общую ячейку. Отметим также, что эта ячейка не имеет
содержимого, только пару тегов <td></td>. Если ячейка остается
пустой, то границы ячейки не выводятся.
Двигаясь слева направо вдоль первой строки, отметим, что следующая
ячейка, содержащая "Department A", не является одной ячейкой, а
занимает две горизонтальные ячейки. Поэтому тег <td> содержит
colspan="2", чтобы объединить эту ячейку с ячейкой в следующем
столбце. Двигаясь вправо, мы попадаем в ячейку, содержащую
заголовок "Department B". Здесь также не одна ячейка, а объединенная,
которая охватывает два столбца. Этот тег <td>, как и предыдущий,
содержит атрибут colspan="2".
Теперь мы достигли конца первой строки таблицы. Важно понимать,
что хотя закодировано описание только трех ячеек, всего было
использовано пять ячеек, соответствующие общему числу столбцов
таблицы. Помните всегда тот факт, что необходимо описывать столько
строк и столько столбцов, сколько их имеется в полном описании
размеров таблицы.
367

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Продолжая кодирование со второй строки таблицы, мы видим, что эта
строка содержит подзаголовки "Copies" и "$ Value" для своих
соответствующих столбцов.

<tr>
<td>Copies</td>
<td>$ Value</td>
<td>Copies</td>
<td>$ Value</td>
</tr>
Листинг 8.38. Код второй строки таблицы

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

<tr>
<td>Word Processors</td>
<td>10</td>
<td>700.00</td>
<td>15</td>
<td>1,050.00</td>
</tr>
368

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<tr>
<td>Spreadsheets</td>
<td>12</td>
<td>780.00</td>
<td>18</td>
<td>1,170.00</td>
</tr>
<tr>
<td>Databases</td>
<td>7</td>
<td>595.00</td>
<td>9</td>
<td>765.00</td>
</tr>
Листинг 8.39. Код с третьей по пятую строку таблицы

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

<tr>
<td>Total Value</td>
<td colspan="2">$ 2,075.00</td>
<td colspan="2">$ 2,985.00</td>
</tr>
</table>
Листинг 8.40. Код последней строки таблицы

Снова просматриваем всю строку, начиная с первой ячейки. Это
369

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

стандартная ячейка, содержащая текст "Total Value". Затем переходим к
ячейке, которая объединяется со следующей ячейкой и требует атрибут
colspan="2". И, наконец, еще одна ячейка, которая объединяется со
следующей ячейкой. Кодируются три спецификации ячеек, но всего при
этом используется пять ячеек строки.

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

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

Базовый вид таблицы с объединенными строками и

Оформление таблицы
Теперь необходимо добавить таблицу стилей, чтобы оформить таблицу.
В примере, показанном на листинге 8.41, используются классы стилей
для задания стиля заголовка, строки и итоговой строки. Класс .HEAD
применяется для заголовков столбцов, задавая полужирный и
выровненный по центру текст с фоновым цветом. Класс .ROW
форматирует каждую строку данных, выравнивая текст вправо, а класс
370

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

.LABEL переопределяет это оформление строки для первой ячейки в
строке, выравнивая текстовые метки влево. Класс .TOTAL
форматирует итоговую строку полужирным и выровненным вправо
текстом с фоновым цветом.
<style type="text/css">
table
{border:outset 1px}
table td {border:inset 1px; padding:5px}
table caption {font:bold 12pt}
.HEAD
{font-weight:bold; text-align:center; vertical-align:middle;
background-color:#F0F0F0}
.ROW
{text-align:right}
.LABEL
{text-align:left}
.TOTAL
{text-align:right; font-weight:bold;
background-color:#F0F0F0}
</style>
<table>
<caption>Quantity and Value of Installed Software</caption>
<tr class="HEAD">
<td rowspan="2">Software</td>
<td colspan="2">Department A</td>
<td colspan="2">Department B</td>
</tr>
<tr class="HEAD">
<td>Copies</td>
<td>$ Value</td>
<td>Copies</td>
<td>$ Value</td>
</tr>
<tr class="ROW">
<td class="LABEL">Word Processors</td>
<td>10</td>
<td>700.00</td>
<td>15</td>
<td>1,050.00</td>
</tr>
<tr class="ROW">
<td class="LABEL">Spreadsheets</td>
371

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<td>12</td>
<td>780.00</td>
<td>18</td>
<td>1,170.00</td>
</tr>
<tr class="ROW">
<td class="LABEL">Databases</td>
<td>7</td>
<td>595.00</td>
<td>9</td>
<td>765.00</td>
</tr>
<tr class="TOTAL">
<td>Total Value</td>
<td colspan="2">$ 2,075.00</td>
<td colspan="2">$ 2,985.00</td>
</tr>
</table>
Листинг 8.41. Окончательный код для таблицы с присоединенной
таблицей стилей

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

Разбиение таблицы на группы
При работе с большими таблицами с различным
выравниванием и цветом можно создать более
структуру таблицы, объединяя строки и столбцы в
случае можно задавать спецификации структуры и
372

размером ячеек,
упорядоченную
группы. В этом
оформления для

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

групп, что позволяет автоматически распространять эти свойства на
отдельные ячейки, содержащиеся в группах.
Таблица на рисунке 8.40 использует специальные теги таблицы
<thead>, <tbody> и <tfoot> для классификации и организации
строк в таблице; теги <colgroup> и <col/> применяют
выборочные стили к группам столбцов.

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

373

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.41. Структурная организация таблицы
Существует три основные структурные части таблицы, "заголовок
таблицы", "тело таблицы" и "нижняя часть таблицы", которые выделены
с помощью соответствующих тегов <thead>, <tbody> и <tfoot>.
Схема кода XHTML для этих частей показана ниже.
<table>
<caption>Sales Order</caption>
<thead>
Код XHTML заголовка таблицы
</thead>
<tfoot>
Код XHTML нижней части таблицы
</tfoot>
<tbody>
Код XHTML тела таблицы
</tbody>
</table>
374

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг
таблицы

8.42.

Схема

кода

заголовка,

тела

и

нижней

части

При организации кода для этих разделов теги <thead> и <tfoot>
должны появиться перед тегом <tbody>.

Тег <thead>
Раздел <thead> содержит информацию, которая появляется один раз в
начале таблицы. Он кодируется, по большей части, как обычный набор
заголовков столбцов. В этом примере имеются две строки,
составляющие заголовок или верхний колонтитул. Первая строка
содержит информацию об имени и адресе, которая помещается в одну
ячейку, расширяемую на всю ширину таблицы. Вторая строка является
набором заголовков столбцов.
<thead>
<tr>
<td colspan="5">
Your Name<br/>
Your Address<br/>
City, ST 55555<br/>
</td>
</tr>
<tr>
<td>No.</td>
<td>Description</td>
<td>Quantity</td>
<td>Price</td>
<td>Amount</td>
</tr>
</thead>
Листинг 8.43. Код раздела <thead> таблицы

Тег <tfoot>
375

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Нижняя часть или нижний колонтитул таблицы появляется один раз в
низу таблицы. Оно идентифицируется с помощью тега <tfoot>.
Показанная таблица содержит в основании три строки. Все строки
имеют расширенную область метки и одну ячейку для данных.
<tfoot>
<tr>
<td colspan="4">Shipping</td>
<td>50.00</td>
</tr>
<tr>
<td colspan="4">Sales Tax</td>
<td>155.77</td>
</tr>
<tr>
<td colspan="4">Total</td>
<td>$ 2,431.16</td>
</tr>
</tfoot>
Листинг 8.44. Код раздела <tfoot> таблицы

Тег <tbody>
Тело таблицы выводит основное содержимое таблицы. Оно появляется
в разделе <tbody> и содержит столько строк, сколько имеется
элементов данных для вывода. В рассматриваемой таблице данные
выводятся в пяти отдельных ячейках в строке.
<tbody>
<tr>
<td>11111</td>
<td>Microsoft Windows XP Professional</td>
<td>2</td>
<td>169.99</td>
<td>339.98</td>
</tr>
<tr>
376

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<td>22222</td>
<td>Microsoft Office XP Professional</td>
<td>2</td>
<td>449.99</td>
<td>999.98</td>
</tr>
<tr>
<td>33333</td>
<td>Adobe Photoshop 7.0</td>
<td>1</td>
<td>579.95</td>
<td>579.95</td>
</tr>
<tr>
<td>44444</td>
<td>HP PhotoSmart 7550 Printer</td>
<td>1</td>
<td>299.99</td>
<td>299.99</td>
</tr>
<tr>
<td>55555</td>
<td>USB Device Cable</td>
<td>1</td>
<td>5.49</td>
<td>5.49</td>
</tr>
</tbody>
Листинг 8.45. Код раздела <tbody> таблицы

Одной из важных задач определения строк данных таблицы внутри
тегов <tbody> (и отдельно от заголовка и нижнего колонтитула)
является то, что тело становится независимым, прокручивающимся
разделом, когда заполняется данными из внешнего файла или базы
данных. Такая возможность здесь рассматриваться не будет.
После кодирования трех разделов таблицы может быть желательно
просмотреть получающийся результат, чтобы убедиться, что таблица
377

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 8.42. Организация таблицы без стилей

Теги <colgroup> и <col/>
Возможностью выборочно оформлять ячейки таблицы можно управлять
с помощью тега <colgroup> и составляющего ему пару тега <col/>.
Объединяя ячейки с помощью этих тегов, можно определить столбцы
данных, к которым применяются стили, а не оформлять отдельные
строки или отдельные ячейки.
Столбцы объединяются в группу согласно сходству в оформлении ячеек
в разделах таблицы <thead>, <tfoot> и <tbody>. Обычно те
столбцы ячеек, которые имеют одинаковое оформление, необходимо
объединять в группу с помощью <colgroup> со столбцами
компонентами, определяемыми тегами <col/>. Затем стили можно
применить к тегу <colgroup>, чтобы распространить на все ячейки в
этой группе. Любые различия в оформлении, требуемые для
378

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

определенного столбца в этой группе, реализуются с помощью
индивидуальных тегов <col/>.
Спецификации объединения столбцов должны кодироваться перед
разделами таблицы <thead>, <tfoot>, и <tbody>. Группы
идентифицируют в таблице слева направо. В текущем примере
определены следующие группы (см. рисунок 8.41).
<table>
<caption>Sales Order</caption>
<colgroup id="GROUP1">
<col/>
</colgroup>
<colgroup>
<col/>
</colgroup>
<colgroup id="GROUP3">
<col id="COL3"/>
<col/>
<col id="COL5"/>
</colgroup>
...
Листинг 8.46. Код для объединения столбцов таблицы примера в
группы

Здесь определены три группы colgroups на основе общности
оформления ячеек в группах. Группам присвоены значения id, на
которые ссылается таблица стилей, создаваемая далее для этих групп. В
каждой группе столбцов теги <col/> определяют каждый столбец в
группе. Определенному столбцу, оформление которого отличается чемто от оформления группы, включающей его, задается id для отдельной
ссылки в таблице стилей.
Первая группа столбцов включает только первый столбец номеров
позиций. Этот столбец будет иметь ширину в 10% от ширины таблицы,
379

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

с выравниванием по центру и цветным фоном. Все ячейки данных,
входящие в данную группу <colgroup>, будут иметь это оформление.
Единственный тег <col/> идентифицирует этот столбец в группе.
(Для одиночных столбцов в группе требуется только тег <colgroup>.
Здесь необязательный
тег <col/> задается просто для
документирования существования столбца.)
Помните, что эта первая группа столбцов включает также первый
столбец из разделов <thead> и <tfoot> в таблице (группа столбцов
охватывает все разделы таблицы). Так как информация в разделах
<thead> и <tfoot> оформляется иначе, чем номера позиций в
разделе <tbody>, то заголовок и основание могут оформляться
отдельно, чтобы переопределить оформление тела. Обычная практика
состоит в использовании раздела <tbody> для объединения столбцов
и переопределении этого оформления требуемым образом.
Вторая группа столбцов включает второй столбец описаний позиций.
Для нее не определяют никакие записи в таблице стилей и не задают
id, поэтому ячейки в этой группе будут иметь оформление по
умолчанию: данные будут выровнены влево и по вертикали в центре
ячеек.
Третья группа столбцов включает последние три столбца ( quantity,
price и amount ). Эти столбцы определяют как одну группу, так как
для всех ячеек будет применяться похожее оформление. Все ячейки будут
иметь ширину в 15% от ширины таблицы, а данные будут
выравниваться вправо, так как они являются числовыми значениями.
Однако в этой группе два столбца будут немного отличаться в
оформлении. Столбец quantity будет выравниваться по центру, а
столбец amount будет иметь фоновый цвет. Этим двум столбцам
присваивают значения id для отдельного оформления в таблице
стилей.

Задание стилей
Таблица стилей для таблицы примера поэтапно создается ниже, чтобы
можно было видеть, как стили задаются для групп столбцов, раздела
380

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

заголовка и раздела нижнего колонтитула.

Задание стилей группы столбцов
Листинг 8.47 показывает записи таблицы стилей для основных групп
столбцов. Рисунок 8.43 выводит таблицу, оформленную с помощью этих
стилей.
<style type="text/css">
table
{border:outset 1px; border-collapse:collapse}
table caption
{font:bold 14pt; color:#707070}
table td
{border:inset 1px; padding:3px}
table colgroup#GROUP1
{width:10%; text-align:center;
background-color:#F6F6F6}
table colgroup#GROUP3
{width:15%; text-align:right}
</style>
Листинг 8.47. Записи таблицы
столбцов таблицы примера

стилей

для

основных

групп

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Группе столбцов GROUP1 (первый столбец) задается ширина в 10%,
текст в столбце выравнивается по центру, и выводится фоновый цвет.
Это подходящее оформление для столбца номеров позиций. Отметим,
однако, что такое же оформление применяется для первого столбца
строк верхнего и нижнего колонтитулов, так как объединение столбцов
охватывает все разделы таблицы. Поэтому строки адреса и метки
"Shipping", "Sales Tax" и "Total" также выравниваются по
центру и имеют фоновый цвет. (Вспомните, что ячейка address в
верхнем колонтитуле охватывает пять ячеек, а ячейки меток нижнего
колонтитула охватывают по четыре ячейки. Однако их источником
является первая ячейка в столбце, которая получает оформление
GROUP1. Эти оформления верхнего и нижнего колонтитулов
переопределяется ниже.)
Группа столбцов GROUP3 (последние три столбца) имеет ширину
столбцов, заданную как 15%, и выровненный вправо текст. Это общее
оформление для всех трех столбцов, за исключением того, что столбец
"Quantity" необходимо выровнять по центру, а для столбца
"Amount" необходимо добавить фоновый цвет. Отметим также, что
заголовки столбцов выравниваются вправо, хотя они должны быть
выровнены по центру. Все эти индивидуальные различия в оформлении
обрабатываются ниже.
Для второй группы столбцов, содержащей пункт "Description",
дополнительное оформление не задается. По умолчанию текст в этой
группе выравнивается влево. Заголовок этого столбца, однако, должен
быть выровнен по центру.
До сих пор было реализовано только "самое общее" оформление для
каждой группы столбцов. Конечно, существуют различия в оформлении
для некоторых ячеек в этих группах, но эти различия можно реализовать
с помощью дополнительных записей в таблице стилей.

Задание стилей столбцов
Два отличия в оформлении от основной группы столбцов имеются в
третьем столбце quantities и пятом столбце amounts.
382

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Содержимое столбца quantities должно быть выровнено по центру,
а столбец amounts должен иметь фоновый цвет. Эти переопределения и
добавления в оформление группы столбцов показаны на листинге 8.48,
который содержит стили для COL3 и COL5 и значения id,
присвоенные их соответствующим тегам <col/> (см. листинг 8.46).
Рисунок 8.44 показывает применение этих дополнительных стилей.
<style type="text/css">
table
{border:outset 1px; border-collapse:collapse}
table caption
{font:bold 14pt; color:#707070}
table td
{border:inset 1px; padding:3px}
table colgroup#GROUP1
{width:10%; text-align:center;
background-color:#F6F6F6}
table colgroup#GROUP3
{width:15%; text-align:right}
table colgroup#GROUP3 col#COL3 {text-align:center}
table colgroup#GROUP3 col#COL5 {background-color:#F0F0F0}
</style>
Листинг 8.48. Дополнительные записи
указанных столбцов примера таблицы

Рис. 8.44.
столбцов

таблицы

стилей

для

Таблица с применением индивидуального оформления

383

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Отметим использование контекстных селекторов для указания на теги
<colgroup> и <col/> в приведенной выше таблице стилей:
table colgroup#GROUP1
table colgroup#GROUP3
table colgroup#GROUP3 col#COL3
table colgroup#GROUP3 col#COL5
Это самый формальный способ определения этих объединений - по их
положению в иерархии тегов таблицы или по их значениям id. Однако
можно кодировать эти селекторы сокращенным образом, так как с
присвоенными значениями id не возникает двусмысленностей в
отношении того, какие группы столбцов и какие столбцы какой
таблицы используются:
colgroup#GROUP1
colgroup#GROUP3
col#COL3
col#COL5

Задание стилей верхнего колонтитула
Когда группы столбцов и отдельные столбцы оформлены, может
потребоваться дополнительное специальное оформление для раздела
таблицы <thead>. Таким является случай рассматриваемой таблицы,
где строки адреса (ячейка в строке таблицы с id="ADDR" ) должны
быть выровнены влево, а заголовки столбцов (ячейки в строке с
id="HEAD" ) должны быть выровнены по центру, быть полужирными
и иметь заданные цвет текста и фона. Это дополнительное оформление
добавляется в таблицу стилей на листинге 8.49 и показано в действии
на рисунке 8.45.
<style type="text/css">
table
{border:outset 1px; border-collapse:collapse}
table caption
{font:bold 14pt; color:#707070}
table td
{border:inset 1px; padding:3px}
table colgroup#GROUP1

{width:10%; text-align:center;
384

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

background-color:#F6F6F6}
table colgroup#GROUP3
{width:15%; text-align:right}
table colgroup#GROUP3 col#COL3 {text-align:center}
table colgroup#GROUP3 col#COL5 {background-color:#F0F0F0}
table tr#ADDR td
table tr#HEAD td

{text-align:left; background-color:#FFFFFF}
{font-weight:bold; text-align:center;
background-color:#A0A0A0; color:#FFFFFF}

</style>
Листинг 8.49. Дополнительные записи
оформления <thead> примера таблицы

таблицы

стилей

для

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

Задание стилей нижнего колонтитула
385

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Нижний колонтитул таблицы оформляется, в общем, таким же образом,
как и верхний. В данном случае метки "Shipping", "Sales Tax"
и "Total" должны быть выровнены вправо, а итоговая строка
должна выводиться полужирным шрифтом, с заданным цветом текста и
фона. Эти добавления сделаны на листинге 8.50 и показаны на рисунке
8.46.
<style type="text/css">
table
{border:outset 1px; border-collapse:collapse}
table caption
{font:bold 14pt; color:#707070}
table td
{border:inset 1px; padding:3px}
table colgroup#GROUP1
{width:10%; text-align:center;
background-color:#F6F6F6}
table colgroup#GROUP3
{width:15%; text-align:right}
table colgroup#GROUP3 col#COL3 {text-align:center}
table colgroup#GROUP3 col#COL5 {background-color:#F0F0F0}
table tr#ADDR td
table tr#HEAD td

{text-align:left; background-color:#FFFFFF}
{font-weight:bold; text-align:center;
background-color:#A0A0A0; color:#FFFFFF}

table tfoot td
{text-align:right}
table tfoot tr#TOTAL
{font-weight:bold;
background-color:#A0A0A0; color:#FFFFFF}
</style>
Листинг 8.50. Дополнительные записи таблицы
оформления раздела <tfoot> примера таблицы

стилей

для

Все ячейки в разделе нижнего колонтитула ( table tfoot td )
должны быть выровнены вправо. Строка нижнего колонтитула,
определяемая id="TOTAL" (table tfoot tr#TOTAL), должна
выводиться полужирным шрифтом с заданным цветом текста и фона.
Здесь также, если все строки и ячейки в разделе <tfoot> оформляются
одинаково, это оформление можно применять с помощью одного
селектора tfoot.

386

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.46. Таблица с оформлением <tfoot>

Атрибут Rules тега <table>
Для управления выводом границ внутри таблицы можно применять
специальное форматирование таблицы. Атрибут rules="value"
тега <table> задает вывод внутренних границ, окружающих ячейки.
Этот атрибут может принимать значения, показанные в таблице 8-3.
Таблица 8.3. Атрибут rules для управления внутренними границами
таблицы
Значение
Описание
Выводятся границы всех ячеек (по
all
умолчанию)
none
Границы ячеек не выводятся
Выводятся только горизонтальные границы
rows
ячеек
Выводятся только вертикальные границы
cols
ячеек
Выводятся только те границы, которые
groups
окружают группы столбцов
387

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Эти значения атрибута можно смоделировать с помощью таблицы
стилей. Однако атрибут rules="groups" является удобным
способом вывода границ только вокруг групп ячеек, определенных с
помощью тегов <colgroup>. Обратите внимание в следующем
примере, что границы отдельных ячеек не выводятся в таблице;
границы окружают только группы ячеек, объединенных с помощью
тегов <colgroup>.

Рис. 8.47. Применение атрибута rules="groups"
Единственное изменение в результате этого вывода состоит в удалении
всех настроек таблицы стилей, имеющих отношение к границам ячеек
(обычно, td {border:inset 1px} ), и в добавлении атрибута
rules в тег <table>: <table rules="groups">.

Атрибут Frame тега <table>
Атрибут frame="value" тега <table> задает вид внешней
границы таблицы. Атрибут может принимать значения, показанные в
таблице 8-4.
Таблица 8.4. Атрибут frame для управления внешними границами
таблицы
388

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Значение
void
above
below
lhs
rhs

Описание
Без внешней границы
Выводится только верхняя граница
Выводится только нижняя граница
Выводится только левая граница
Выводится только правая граница
Выводятся только верхняя и нижняя
hsides
границы
Выводятся только левая и правая
vsides
границы
Выводятся все четыре границы (по
box|border
умолчанию)
При использовании атрибута frame должны быть удалены все настройки
таблицы стилей, относящиеся к внешним границам таблиц (обычно,
table {border:outset 1px} ). При использовании вместе с
атрибутом rules атрибут frame по умолчанию выводит всю
внешнюю окружающую таблицу границу. В следующем примере код
<table rules="groups" frame="void"> подавляет вывод
внешних границ таблицы.

Рис. 8.48. Применение атрибута frame="void"
389

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 8.49. Таблица, оформленная без объединения столбцов в группы
Не используются никакие разделы таблицы <thead>, <tbody>, или
<tfoot>. Также не используется объединение столбцов в группы.
Вместо этого применяются классы стилей для отдельных строк и ячеек
в теле таблицы. Эта таблица не задействует атрибуты rules или
frame.
<style type="text/css">
table
{border-collapse:collapse}
table caption {font:bold 14pt; color:#707070}
table td {padding:3px}
.ADDR
{text-align:left; background-color:#FFFFFF}
.HEAD
{font-weight:bold; text-align:center;
background-color:#A0A0A0; color:#FFFFFF; border:solid 1px}
.NO
{width:10%; text-align:center; background-color:#F0F0F0}
390

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

.DESC

{text-align:left; background-color:#FFFFFF;
border-right:solid 1px; border-left:solid 1px}
.QTY
{width:15%; text-align:center; background-color:#FFFFFF;
border-right:solid 1px}
.PRICE
{width:15%; text-align:right; background-color:#FFFFFF;
border-right:solid 1px}
.AMOUNT
{width:15%; text-align:right; background-color:#F0F0F0}
.SUB
{text-align:right; background-color:#F0F0F0}
.TOTAL
{font-weight:bold; background-color:#A0A0A0; color:#FFFFFF}
</style>
<table>
<caption>Sales Order</caption>
<tr class="ADDR">
<td colspan="5">
Your Name<br/>
Your Address<br/>
City, ST 55555<br/>
</td>
</tr>
<tr class="HEAD">
<td>No.</td>
<td>Description</td>
<td>Quantity</td>
<td>Price</td>
<td>Amount</td>
</tr>
<tr>
<td class="NO">11111</td>
<td class="DESC">Microsoft Windows XP Professional</td>
<td class="QTY">2</td>
<td class="PRICE">169.99</td>
<td class="AMOUNT">339.98</td>
</tr>
<tr>
<td class="NO">22222</td>
<td class="DESC">Microsoft Office XP Professional</td>
391

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<td class="QTY">2</td>
<td class="PRICE">449.99</td>
<td class="AMOUNT">999.98</td>
</tr>
<tr>
<td class="NO">33333</td>
<td class="DESC">Adobe Photoshop 7.0</td>
<td class="QTY">1</td>
<td class="PRICE">579.95</td>
<td class="AMOUNT">579.95</td>
</tr>
<tr>
<td class="NO">44444</td>
<td class="DESC">HP PhotoSmart 7550 Printer</td>
<td class="QTY">1</td>
<td class="PRICE">299.99</td>
<td class="AMOUNT">299.99</td>
</tr>
<tr>
<td class="NO">55555</td>
<td class="DESC">USB Device Cable</td>
<td class="QTY">1</td>
<td class="PRICE">5.49</td>
<td class="AMOUNT">5.49</td>
</tr>
<tr class="SUB">
<td colspan="4">Shipping</td>
<td>50.00</td>
</tr>
<tr class="SUB">
<td colspan="4">Sales Tax</td>
<td>155.77</td>
</tr>
<tr class="TOTAL">
<td colspan="4">Total</td>
<td>$ 2,431.16</td>
</tr>
</table>
392

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 8.51. Код оформления таблицы без использования групп
столбцов

Использовать ли разделы таблицы <thead>, <tbody> и <tfoot>
или указатели <colgroup> or <col/>, является обычно вопросом
личного предпочтения. Для простых таблиц эти теги создания группы
могут сократить объем кода, когда имеется большое сходство между
строками и столбцами. Однако для более сложных таблиц может
оказаться более трудоемким применение и переопределение
конфликтующих стилей оформления на пересечении строк и столбцов.
Необходимо помнить, что разделы и указатели столбцов должны
применяться независимо друг от друга. То есть можно использовать
разделы <thead>, <tbody> и <tfoot> ИЛИ можно использовать
группы <colgroup> и <col/>. Они не должны применяться вместе.
Здесь также для простых таблиц можно повысить эффективность
кодирования при работе с группами столбцов, использующих или не
использующих группы строк.

Использование таблицы для компоновки страницы
Одним из лучших применений таблиц является организация
информации, выводимой на странице Web. Можно создать страницу
практически любого вида, организуя текст, графику и ссылки в ячейках
таблицы, которая охватывает все тело документа. Общая компоновка
таблицы для страницы использует раздел верхнего колонтитула
("шапка", баннер) в верху страницы, раздел меню вдоль левой стороны
страницы и остальную область для содержимого страницы. Общая
структура такой страницы приведена на рисунке 8.50 с пунктирными
линиями, показывающими компоновку таблицы. Обычно все страницы
сайта Web имеют такую общую компоновку. Когда посетители
перемещаются со страницы на страницу, баннер и меню остаются теми
же, изменяется только раздел содержимого, в котором выводится
изменяющаяся информация. Компоновка такого вида создает общий вид
у всех страниц сайта.

393

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.50. Использование таблицы для компоновки страницы

Создание компоновки страницы
Разработка общего шаблона страницы начинается с задания таблицы,
которая охватывает всю ширину окна браузера. Прежде всего,
необходимо создать структуру таблицы, не беспокоясь об информации,
которая будет заполнять ячейки таблицы. Достаточно только убедиться,
что компоновка правильная. Компоновка с тремя ячейками показана на
рисунке 8.51. Здесь выводятся только границы таблицы и
предполагаемое содержимое ячеек. Листинг 8.52 содержит код,
создающий эту компоновку.

394

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.51. Создание базовой компоновки страницы
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Page Layout</title>
<style type="text/css">
body
{margin:0px}
table
{border:outset 1; width:100%; height:100%}
table td {border:inset 1; vertical-align:top}
table td#HEAD {height:50px}
table td#MENU {width:150px}
</style>
</head>
<body>
395

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<table>
<tr>
<td id="HEAD" colspan="2">
Header
</td>
</tr>
<tr>
<td id="MENU">
Menu
</td>
<td id="CONTENT">
Content
</td>
</tr>
</table>
</body>
</html>
Листинг 8.52. Код создания базовой компоновки страницы

В этом месте необходимо только убедиться, что ячейки правильно
объединены и имеют подходящие горизонтальные размеры. Таблица
будет расширяться по вертикали по мере добавления в ячейки
информации. Создайте таблицу с границами, чтобы видеть ее внешний
вид, и добавьте пометки в каждую ячейку, указывающие на
информацию, которая там будет представлена.
Тело страницы имеет значение полей, равное 0px, чтобы таблица
охватывала все окно браузера. Ширина таблицы равна 100%. Это
означает, что страница Web всегда будет занимать всю ширину окна
396

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

браузера, независимо от размера окна или разрешения экрана. Можно,
при желании, задать таблицу фиксированной пиксельной ширины,
предполагаемой обычно шириной для большинства посетителей сайта.
Ширина таблицы в 770px является принятой для полноэкранного окна
браузера, который выводится на мониторе, заданном с разрешением
800 х 600.
Пример компоновки задает высоту таблицы в 100%, так что она
расширяется на высоту окна браузера. Высоту таблицы определять не
обязательно, поскольку таблица будет расширяться по вертикали при
добавлении содержимого. Необходимо также выровнять содержимое по
вертикали по верху каждой ячейки.
Компоновка таблицы содержит две строки. Верхняя строка, занимаемая
верхним колонтитулом, содержит одну ячейку, которая охватывает два
столбца. Вторая строка, которую занимают меню и содержимое,
содержит две смежные ячейки.
В этом примере ячейке, содержащей верхний колонтитул, задается
фиксированная высота 50px. Обычно размер этой ячейки совпадает с
размером графического изображения, занимающего всю ячейку. Поэтому
эту высоту необходимо будет настроить в соответствии с размером
графики. Если верхний колонтитул содержит только текст, высоту
можно задать в соответствии с личными предпочтениями. Можно,
однако, оставить высоту неопределенной, и она автоматически
настроится по вертикали, когда в ячейку будет помещено реальное
содержимое.
Ячейка, в которой будет находиться меню или другое фиксированное
содержимое, задается с фиксированной шириной 150px. Это значение
можно изменить в соответствии с необходимостью. Вспомните, что
браузер обычно задает одинаковую ширину ячеек при заполнении
доступного пространства. Однако такое поведение нежелательно для
столбца, который используется для вывода пунктов меню или ссылок.
Будет достаточно странно, если список меню займет половину экрана.

Создание шаблона страницы
397

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Обычно компоновка страницы будет использоваться другими
страницами сайта Web, чтобы иметь стандартный дизайн для всех
страниц. Также обычно разделы верхнего колонтитула и меню страниц
будут содержать одну и ту же информацию, чтобы создать общий
"внешний вид и функции" сайта. Поэтому необходимо двигаться дальше
и создавать код ячеек верхнего колонтитула и меню, как часть этой
стандартной компоновки страницы. При кодировании этих разделов
вставьте просто информацию между тегами <td>...</td> ; ячеек.
Кодирование в каждой ячейке можно делать независимо от
кодирования других ячеек. При добавлении содержимого таблица
расширяется по вертикали, но горизонтальная компоновка остается
фиксированной.
После создания компоновки страницы - включая все общие
колонтитулы и меню, которые должны присутствовать на всех
страницах, - необходимо сохранить страницу как файл шаблона
(например, PageTemplate.htm) для использования с другими страницами
сайта. Затем для каждой новой страницы, добавляемой к сайту,
откройте эту страницу шаблона и сохраните ее как новую страницу Web.
Теперь остается только закодировать различные ячейки содержимого на
различных страницах; вся окружающая информация на странице будет
такой же. Не забудьте только после создания страницы удалить границы
таблицы компоновки, если только не требуется их присутствие на
странице.
Рисунок 8.52 показывает шаблон простой страницы Web с общим,
созданным заранее баннером и меню. Для любой страницы Web,
которая использует этот шаблон, можно открыть этот файл, вставить
подходящую информацию в ячейку содержимого и сохранить ее как
новую страницу Web. Код шаблона показан на листинге 8.53.

398

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.52. Шаблон страницы Web
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Page Template</title>
<style type="text/css">
body
{margin:0px}
table
{width:770px; height:100%}
table td {vertical-align:top; padding:5px}
table td#HEAD {height:50px; background-color:#707070; color:#FFFFFF;
font-size:24pt; font-weight:bold; vertical-align:middle}
table td#MENU {width:150px; background-color:#F0F0F0}
</style>
</head>
399

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<body>
<table>
<tr>
<td id="HEAD" colspan="2">
My Web Site
</td>
</tr>
<tr>
<td id="MENU">
<b>Menu</b><br/><br/>
<a href="#">Home Page</a><br/><br/>
<a href="#">First Page</a><br/>
<a href="#">Second Page</a><br/>
<a href="#">Third Page</a><br/>
<a href="#">Fourth Page</a><br/>
<a href="#">Fifth Page</a><br/>
</td>
<td id="CONTENT">
- Поместите здесь содержимое страницы </td>
</tr>
</table>
</body>
</html>
Листинг 8.53. Код шаблона страницы Web

Создание информационного бюллетеня
С помощью таблиц можно создать практически любой требуемый
400

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 8.53.
Использование
информационного бюллетеня

таблицы

для

форматирования

Если вы угадали структуру, показанную на рисунке
закодированную на листинге 8.54, то вы были правы.

401

8.54

и

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 8.54. Структурный формат информационного бюллетеня
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Newsletter Layout</title>
<style type="text/css">
table
{border:outset 1; width:100%; height:150px}
table tr {vertical-align:top}
table td {border:inset 1}
table td#HEAD {text-align:center; vertical-align:middle}
table td#COL1 {width:33%}
table td#COL2 {width:34%}
table td#COL3 {width:33%}
</style>
</head>
<body>
<table>
<tr>
<td id="HEAD" colspan="3">
Header
402

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</td>
</tr>
<tr>
<td id="COL1" rowspan="2">
Column 1
</td>
<td id="COL2">
Column 2
</td>
<td id="COL3">
Column 3
</td>
</tr>
<tr>
<td id="ROW" colspan="2">
Bottom Row
</td>
</tr>
</table>
</body>
</html>
Листинг 8.54.
бюллетеня

Код

структурного

формата

информационного

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

403

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Методы передачи
Существует два способа получения файлов аудио и видео в браузере.
Один из них состоит в загрузке файла с сервера Web. В этом случае
существует задержка, связанная с передачей файла в браузер, хотя
современные браузеры могут начинать воспроизводить медиафайл,
прежде чем он будет полностью получен, - с помощью методов
постепенной (прогрессивной) загрузки. То есть воспроизведение
происходит в то же время, когда загружается файл. После окончания
загрузки файла он будет доступен в ПК пользователя для быстрой
перезагрузки и повторного воспроизведения. Загруженные файлы
можно сохранить на компьютере и после этого обращаться к ним и
воспроизводить локально.
Второй способ получения мультимедийного содержимого состоит в
использовании потоковых методов. Если файлы аудио и видео находятся
на "медиасервере", то этот компьютер может передавать файлы как
непрерывный поток, не требующий ожидания окончания загрузки,
прежде чем начнется воспроизведение. Обычно имеется несколько
404

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Воспроизведение медиа
Чтобы получать аудио- и видеофайлы и живой поток медиа, необходимо
иметь на компьютере установленный медиаплеер. При использовании
Windows XP в этой операционной системе имеется устанавливаемый по
умолчанию Windows Media Player. Другими популярными плеерами
являются QuickTime Player компании Apple и RealPlayer компании
RealNetwork. Требуемый плеер зависит от форматов, в которых
предоставляется содержимое медиа.
Следующие разделы описывают использование Media Player.
Необходимо установить самую последнюю версию этой программы.
При использовании Windows Media Player имеется два способа
предоставления доступа Web к файлам медиа. Можно создавать ссылки
на файлы или встраивать медиа в страницу Web.

Ссылки на медиафайлы
405

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

С файлами медиа можно соединяться точно так же, как делают
соединение со страницами Web, - с помощью тега <a>. В этом случае
атрибут href задает адрес URL файла, расположенный либо локально
на ПК, либо удаленно на сервере Web. При соединении с файлом медиа
Media Player открывается вне браузера, позволяя продолжить просмотр
страниц Web во время воспроизведения медиа.

Рис. 9.1. Открытие Media Player вне окна браузера

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 9.2. Открытие Media Player на странице Web
Способ, которым предоставляется доступ к файлам медиа, зависит в
большой степени от возможностей клиентов Web. Для клиентов с более
медленными соединениями с Интернет предоставление ссылок на
файлы медиа вместе с соответствующей информацией о размерах
файлов дает пользователю возможность выбора в отношении
продолжения
загрузки.
Встроенный
плеер,
заданный
для
автоматического воспроизведения, может создавать длительные
задержки и вызывать недовольство пользователей.
Для клиентов Web c широкополосными соединениями имеется
возможность в большей степени использовать варианты дизайна
страницы. Если предполагается продолжение просмотра сайта с
фоновым или внешним воспроизведением, то можно предоставить
ссылки на файлы медиа. С другой стороны, если воспроизведение
является существенным для другого содержимого страницы, то
медиафайл, скорее всего, должен быть встроен и при открытии
страницы запускаться на воспроизведение.

Форматы аудио
407

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Для воспроизведения в Web используется несколько различных
звуковых форматов. Они характеризуются маркой компьютерной
системы, для обслуживания которой они созданы, и предоставляемым
качеством звука. Качество звука зависит от типа технологии сжатия
звука, применяемой для оцифровки звукового файла. Этот метод сжатия
заключен в звуковом кодеке (алгоритме сжатия/восстановления),
который сокращает размеры файлов, удаляя ненужные сигналы или
сжимая избыточные или повторяющиеся сигналы. Наиболее
популярные звуковые форматы кратко описаны в следующей таблице.

Формат

Таблица 9.1. Форматы звуковых файлов
Описание

AIFF

Audio Interchange File Format. Разработан для использования на
компьютерах Apple Macintosh

AU

Разработан для использования, главным образом, на рабочих станци
UNIX. Обеспечивает монофоническое воспроизведение

MIDI

Musical Digital Interface. Ограничен воспроизведением звуков,
создаваемых музыкальными синтезаторами

Moving Pictures Expert Group. Используется для воспроизведения
MPEG аудио и видео, характеризуется небольшими размерами файлов и
хорошим воспроизведением

RA

RealAudio. Патентованный формат для потокового аудио в реальном
времени. Создает файлы небольшого размера для соединений с узко
полосой пропускания. Требуется специальный плеер

WAV

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

408

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

WMA

Windows Media Audio. Разработан для файлов потокового аудио.
Очень хорошее качество для различных полос пропускания. Один и
наиболее распространенных форматов

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

Формат

Таблица 9.2. Форматы файлов видео
Описание

AVI

Audio Video Interleave. Стандартный формат видео для Windows.
Широко используется для загрузки файлов

MPEG

Moving Pictures Expert Group. Высокая степень сжатия и небольшие
размеры файлов для воспроизведения аудио и видео

RV

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

Разработан для компьютеров Apple Macintosh. Файлы имеют
QuickTime расширение .mov. Один из наиболее распространенных форматов
для загрузки в Web. Требуется специальный плеер

WMV

Windows Media Video. Разработан для файлов потокового видео.
Очень хорошее качество для различных полос пропускания. Один
наиболее широко используемых форматов
409

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Воспроизведение аудио
Файлы аудио можно загружать из Web для локального воспроизведения.
Файлы аудио в форматах MPEG и WAV являются наиболее
распространенными типами для загрузки. Файлы аудио можно также
использовать для потоковой трансляции с компьютера медиасервера.
Это может осуществляться в форме широковещания или оцифрованных
файлов для получения по запросу. Формат WMA является популярным
форматом Windows для потокового аудио.

Соединение с файлами аудио
Файл аудио делается доступным для загрузки и воспроизведения при
размещении его в каталоге Web. Доступ к файлу осуществляется через
простую ссылку с помощью тега <a>, кодируемого с относительным
адресом URL файла. При щелчке на ссылке файл открывается на
компьютере клиента во внешнем Media Player. Плеер осуществляет
прогрессивную загрузку, так что пользователю не нужно ждать загрузки
всего файла, прежде чем начинается воспроизведение. После загрузки
файла он становится доступным на ПК пользователя, и его можно
повторно воспроизвести локально.
Например, следующие графическая и текстовая ссылки соединяются с
файлом аудио формата WAV, находящегося в том же каталоге, что и
страница Web. Щелчок на ссылке открывает внешний Media Player для
загрузки и воспроизведения. Внешний вид Media Player на компьютере
зависит от его конфигурации.

410

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 9.3. Ссылки для воспроизведения файла аудио
Приведенные выше ссылки кодируются, как показано ниже. Атрибут
href тегов <a>, окружающих графическое изображение и текст,
является адресом URL локальных файлов аудио в формате WAV.

<a href="PeopleWillCome.wav"><img src="PeopleWillCome.gif" alt="Kansas ballpar
<a href="PeopleWillCome.wav">PeopleWillCome.wav (426 KB)</a>
Листинг 9.1. Код для соединения с файлом аудио

Встраивание файлов аудио
Встраивание Media Player в страницу Web реализуется с помощью тега
<object>. Этот тег является обобщенным способом встраивания
многочисленных видов объектов в страницу Web. Его общий формат
для встраивания файлов аудио показан ниже.
<object classid="classID"
width="n"
height="n"
>
<param name="URL" value="url"/>
<param name="autoStart" value="true|false"/>
<param name="uiMode" value="none|mini|full"/>
</object>
Листинг 9.2. Общий формат тега <object>

Тег <object> является линейным тегом, т.е. он должен быть вложен в
блочный тег, чтобы пройти проверку XHTML.
classid является числом, которое идентифицирует тип объекта для
встраивания в страницу. Для Media Player этим значением будет:
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
Со своими настройками по умолчанию Player выводит видеоэкран и
управляющие элементы воспроизведения. Экран используется для
411

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

вывода визуального сопровождения (цветомузыки), которое изменяется
в ответ на аудиосигнал. Применяемый по умолчанию размер Player
можно изменить, кодируя атрибуты ширины и высоты, задающие
размеры в пикселях.
Встроенный Media Player для аудио представления показан на рисунке
9.4, а его код - на листинге 9.3. Адрес URL указывает на аудиофайл в том
же каталоге, где содержится эта страница Web. Player выводится с
экраном визуализации и размерами по умолчанию, воспроизведение не
начинается, пока не будет нажата кнопка "Play".

Рис. 9.4. Встроенный Media Player для воспроизведения аудио файла
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="PeopleWillCome.wav"/>
<param name="autoStart" value="false"/>
</object>
Листинг
9.3.
Код
встраивания
воспроизведения аудиофайла

Media

Player

для

Тег <object> имеет набор параметров запуска ( param ) для Player.
Необходимо задать параметр name="URL" и определить расположение
value="url" аудиофайла. Будет или нет файл воспроизводиться
немедленно после загрузки страницы, задается в параметре
name="autoStart". Значение этого параметра по умолчанию
412

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

value="true" ; задание value="false" требует, чтобы
пользователь инициировал воспроизведение, нажимая кнопку "Play"
на панели управления. Если видеоэкран выводить не требуется, можно
включить значение height="45" ; в этом случае будут выводиться
только элементы управления.

Рис. 9.5. Встроенный Media Player, выводящий только элементы
управления
Параметр name="uiMode" тега <object> позволяет задать вывод
характеристик встроенного плеера. Его значение по умолчанию
value="full" создает полный экран вывода и полный набор
элементов управления. Со значением value="mini" создается
сокращенный экран визуализации и минимальный набор элементов
управления без индикатора степени выполнения или кнопок селектора
трека. Типичный минимальный вывод показан ниже, в данном случае с заданной шириной и высотой плеера.

Рис. 9.6. Встроенный Media Player в режиме "mini"
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="150" height="160">
<param name="URL" value="PeopleWillCome.wav"/>
<param name="autoStart" value="false"/>
<param name="uiMode" value="mini"/>
413

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</object>
Листинг 9.4. Код для задания Media Player в режиме "mini"

Программирование плеера
При задании для параметра uiMode значения value="none",
элементы управления плеера Media Player не выводятся. Выводится
только экран. Это может быть подходящей настройкой, когда плеер
запускается автоматически или если пользователь знает, что элементы
управления доступны для запуска и остановки воспроизведения в
"контекстном меню", выводимом при щелчке правой кнопкой мыши в
окне плеера. Однако обычно стандартные элементы управления
скрыты, потому что они будут запрограммированы самостоятельно.
Хотя это не учебник по программированию страниц Web, достаточно
просто задать свои собственные управляющие кнопки для Media Player.
Это сделано для показанного ниже плеера.

Рис. 9.7. Программирование Media Player

<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA
width="70" height="70">
<param name="URL" value="Never Be Hungry.wav"/>
<param name="autoStart" value="false"/>
<param name="uiMode" value="none"/>
</object>
<input type="button" value="Start" style="font-size:8pt"
onclick="Player.controls.play()"/>
<input type="button" value="Stop" style="font-size:8pt"
onclick="Player.controls.stop()"/>
414

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 9.5. Код программирования элементов управления Media
Player

Прежде всего, необходимо задать для Player значение id, чтобы на него
можно было ссылаться в сценарии. Здесь id="Player"
присваивается тегу <object>. Параметру uiMode задается значение
value="none", чтобы подавить вывод элементов управления,
автозапуск autoStart выключается, а свойства стиля width и
height задают размер экрана визуализации.
При удалении панели управления необходимо создать собственные
кнопки "Start" и "Stop" для управления плеером. Эти кнопки создаются с
помощью элементов управления <input type="button"/>.
(Создание кнопок рассматривается далее).
Чтобы сделать кнопки реагирующими на щелчок мыши, кнопкам
добавляется обработчики событий onclick. Эти обработчики
событий кодируются с помощью операторов JavaScript для управления
плеером. Для кнопки "Start" оператор Player.controls.play()
вызывает метод play() плеера Player, чтобы начать воспроизведение,
для кнопки "Stop" оператор Player.controls.stop() вызывает
метод stop() плеера Player, чтобы остановить воспроизведение. Вот,
собственно, и все.
Фактически не требуется даже вообще выводить плеер Player. Для
воспроизведения аудио можно скрыть его полностью и включать и
выключать звук с помощью запрограммированных кнопок. Задайте в
коде для тега <object> значения width и height как 0px и
создайте кнопки управления.

Рис. 9.8. Кнопки скрытого Media Player

<object id="Player2" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FA
width="0" height="0">
<param name="URL" value="Never Be Hungry.wav"/>
<param name="autoStart" value="false"/>
</object>
415

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<input type="button" value="Start"
onclick="Player2.controls.play()"/>
<input type="button" value="Stop"
onclick="Player2.controls.stop()"/>
Листинг 9.6. Код программирования скрытого Media Player

Так как Media Player невидим, то не имеет значения, где на странице
записывается тег <object>.
Если посмотреть внимательно, то можно заметить небольшую точку в
нижнем левом углу кнопки "Start". Это Media Player, редуцированный до
одной точки, при задании его ширины и высоты равными 0 пикселей.
Если желательно полностью исключить точку, включите таблицу стилей
для Player с width:0px и height:0px.

Воспроизведение нескольких звуков
После небольшой модификации сценария можно воспроизводить
несколько звуков с помощью одного и того же Media Player. В следующем
примере проигрываются голоса четырех различных животных при
щелчке на четырех отдельных тегах <img/>. Тег <object> скрывает
Media Player и не задает никаких тегов <param>. Поэтому никакой файл
для воспроизведения не задается; только невидимый плеер встроен в
страницу.

Рис. 9.9. Воспроизведение нескольких звуковых файлов через один
Media Player

<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA
width="0" height="0">
</object>
416

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<img src="Bullfrog.gif" alt="Picture of bullfrog"
onclick="Player.URL='Bullfrog.wav'; Player.controls.play()"/>
<img src="Goat.gif" alt="Picture of goat"
onclick="Player.URL='Goat.wav'; Player.controls.play()"/>
<img src="Lion.gif" alt="Picture of lion"
onclick="Player.URL='Lion.wav'; Player.controls.play()"/>
<img src="Rooster.gif" alt="Picture of rooster"
onclick="Player.URL='Rooster.wav'; Player.controls.play()"/>
Листинг 9.7. Код для воспроизведения
файлов через один Media Player

нескольких

звуковых

В обработчиках событий требуется пара операторов JavaScript. Первый
оператор присваивает звуковой файл свойству URL плеера:
Player.URL='filename.wav'; второй оператор запускает его
воспроизведение:
Player.controls.play().
Не
нужно
кодировать сценарий stop(), так как звуки будут очень короткими.
Отметим, что весь сценарий обработчика событий заключен в двойные
кавычки, что имя звукового файла заключено в одиночные кавычки и
что два оператора разделены точкой с запятой.
Даже человек, незнакомый с языком JavaScript, сможет модифицировать
и включить этот сценарий в любой тег, который будет использоваться
для загрузки и воспроизведения звуковых файлов встроенным плеером
Media Player.

Фоновые звуки
Для некоторых страниц может быть нежелательно выводить на экране
Media Player или управляющие кнопки. Так будет в случае
воспроизведения фоновой музыки или дикторского текста, которое
начинается
автоматически,
когда
загружается
страница,
и
останавливается, когда происходит обращение к другой странице. Чтобы
воспроизвести фоновый звук, требуется только скрытый плеер, который
автоматически запускает аудиофайл.
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
417

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

width="0" height="0">
<param name="URL" value="BkgndSound.wav"/>
<param name="autoStart" value="true"/>
</object>
Листинг 9.8. Код воспроизведения фонового звука

Здесь, так как Player невидим, не имеет значения, где на странице
кодируется этот тег <object>. Как только страница заканчивает
загружаться, начинается загрузка и воспроизведение звука. Когда
происходит переход к другой странице, то воспроизведение аудио
останавливается.

Исключенный тег embed
Media Player можно встраивать в страницу Web с помощью тега
<embed/>, общий формат которого показан ниже.
<embed src="url" autostart="true|false"/>
Атрибут src является адресом URL файла. Свойство autostart
указывает, должен ли файл немедленно начинать воспроизведение,
когда открывается страница.

Воспроизведение видео
Нет существенных различий между вызовом и воспроизведением
файлов видео по сравнению с файлами аудио. Файлы видео можно
загружать из Web для локального воспроизведения. Файлы в форматах
AVI и MPG являются наиболее распространенными типами файлов для
загрузки. Видео файлы в формате WMA могут передаваться в потоковом
режиме с медиасервера. Это может быть живая трансляция или
оцифрованные файлы для получения по запросу.

Соединение и встраивание видеофайлов

418

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Для загрузки видеофайла создается ссылка <a> с адресом URL этого
файла. Файл загружается и открывается во внешнем Media Player таким
же образом, как аудиофайлы.
Следующая ссылка соединяется с видеофайлом формата WMV,
находящимся в том же каталоге, что и страница Web. При щелчке на
ссылке файл открывается во внешнем Media Player.
Точное поведение Media Player зависит от его конфигурации.

Рис. 9.10. Ссылки для воспроизведения видеофайла
<a href="Casablanca.wmv"><img src="Casablanca.gif" alt="Casablanca"/></a>
<a href="Casablanca.wmv">Casablanca.wmv (484 KB)</a>
Листинг 9.9. Код соединения с видеофайлом

Видеофайл можно встраивать в страницу Web с помощью тега
<object>.

Рис. 9.11. Встроенный Media Player для воспроизведения видеофайла
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="Casablanca.wmv"/>
<param name="autoStart" value="false"/>
</object>
419

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг
9.10.
Код
встроенного
воспроизведения видеофайла

Media

Player

для

Программирование плеера
Такое же программирование, как и в случае аудиофайлов, применимо к
видеофайлам. Стандартную панель управления можно удалить из Media
Player и заменить программируемыми кнопками. Следующий код и
кнопки скрывают вывод Media Player и окружают экран стилизованной
рамкой для размещения плеера внутри оформленного тега <div>.
Добавлены также кнопки для запуска и остановки плеера.

Рис. 9.12. Запрограммированный Media Player

<div style="border:outset 10">
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA
width="150" height="122">
<param name="URL" value="Casablanca.wmv"/>
<param name="autoStart" value="false"/>
<param name="uiMode" value="none"/>
</object>
</div>
<input type="button" value="Start" style="font-size:8pt"
onclick="Player.controls.play()"/>
<input type="button" value="Stop" style="font-size:8pt"
onclick="Player.controls.stop()"/>
Листинг 9.11. Код программирования Media Player
420

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 9.13. Оформленный Media Player
Необходимо разместить экран Player поверх изображения телевизора.
Поэтому оба тега <img/> и <object> позиционируются абсолютно,
чтобы получить наложение. Чтобы облегчить вычисление позиций
пикселей, оба тега помещают внутрь тега <div> с относительным
позиционированием.
Такое
размещение
дает
возможность
позиционировать теги <img/> и <object> относительно верхнего
левого угла ( 0, 0 ) раздела и позволяет изображению сохранять свое
относительное положение в потоке элементов страницы.

<img src="TV.gif" style="position:absolute; border:0" usemap="#ImgMap"/>
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA
width="250" height="150" style="position:absolute; top:18px; left:63px">
<param name="URL" value="Frankenstein.wmv"/>
<param name="uiMode" value="none"/>
<param name="autoStart" value="false"/>
421

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</object>
<map name="ImgMap">
<area shape="circle" coords="28,168,15" alt="Start"
onclick="Player.controls.play()"/>
<area shape="circle" coords="348,168,15" alt="Stop"
onclick="Player.controls.stop()"/>
</map>
</div>
Листинг 9.12. Код для оформления и программирования Media
Player

При открытии страницы видеофайл загружается в Player, но не
запускается автоматически. Его параметр uiMode задан как "none",
так что сам Player скрыт; виден только экран. Размер экрана и его
позиция заданы так, чтобы точно разместиться поверх графического
изображения телевизора. Может понадобиться проверить для экрана
различные размеры и позиции, чтобы точно попасть в правильное
положение поверх изображения.
Вместо применения для управления Player кнопок к изображению
телевизора добавлены изображения кнопок для запуска и остановки.
Эти две круглые области определены на карте ссылок, чтобы сделать их
реагирующими на щелчок мыши. В то время как карты ссылок
используются обычно для задания ссылок на страницы с помощью
атрибутов href для областей, в данном случае атрибут заменяется
обработчиками события щелчка мыши, чтобы запустить и остановить
Player.

Доступ к потоковому видео
При наличии адресов URL внешних сайтов можно соединяться с
контентом потокового видео. Как и для аудиофайлов URL можно
получить из ссылки, если видео воспроизводится через Windows Media
Player. Во время воспроизведения видео сделайте щелчок правой
кнопкой мыши на экране и выберите "Properties" во всплывающем
меню. Из окна "Properties" скопируйте полный адрес URL
422

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 9.14. Встроенный потоковый видеофайл
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="400" height="300">
<param name="URL" value="http://playlist.yahoo.com/makeplaylist.dll?
id=1021057&segment=73208&s=1805540029&ru=embedded%
2Eyahoo%2Ecom&b=a3qgtq8vgc8s33f0b633c"/>
<param name="autoStart" value="false"/>
</object>
Листинг 9.13. Код встраивания потокового видеофайла

Многие имеющиеся в Web видеофайлы требуют плату за просмотр.
Также часто встречаются видеоплееры, встроенные в страницы сайта с
настройками, которые не позволяют получить доступ к окну Properties
для получения URL. Надо быть просто терпеливым и настойчивым,
чтобы найти видео, с которым можно соединиться. Кроме того, адреса
URL постоянно изменяются, и позже может оказаться невозможно
соединиться с видео в его исходном местоположении.
Поток живого видео можно захватить и воспроизвести с помощью
423

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Media Player. Следующий адрес URL соединения C-SPAIN был
определен в окне Properties плеера во время живого вещания.

Рис. 9.15. Встроенный поток живого видео
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="http://play.rbn.com/play.asx?url=
=cspan/cspan/wmlive/cspan1v.asf&proto=mms?mswmext=.asx"/>
<param name="autoStart" value="false"/>
</object>
Листинг 9.14. Код встраивания живого видеопотока

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

Тег <marquee>
424

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

(Примечание: Тег marquee не считается допустимым элементом
согласно стандартам XHTML 1.1. Он представлен здесь в связи с его
сохраняющейся популярностью и поддержкой в браузерах. Страницы
Web с прологом XHTML 1.1 будут выполняться правильно, даже хотя
они и не будут полностью проходить проверку на правильность.)
Тег <marquee> применяется для автоматической прокрутки текста на
экране. Текст можно прокручивать влево, вправо, вверх или вниз в
определяемой области прокрутки. Он может использовать шрифт с
любыми характеристиками. Следующий тег marquee имеет связанные с
ним кнопки, чтобы можно было видеть направления прокрутки. Можно
сделать паузу в прокрутке, помещая курсор над областью marquee.

Рис. 9.16. Использование тега <marquee>
Тег <marquee> определяется следующим общим форматом
<marquee
direction="left|right|up|down"
loop="n|-1"
scrollamount="n" ( 6 пикселей по умолчанию)
scrolldelay="n" (85 миллисекунд по умолчанию)
Исключены:
bgcolor="color""
height="n"
width="n"
hspace="n"
vspace="n"
>
Текст для прокрутки
</marquee>
425

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 9.15. Общий формат тега <marquee>

В своей простейшей форме тег может использовать все значения по
умолчанию для создания прокручивающегося текста, показанного ниже:
<marquee>Text to Scroll</marquee>

Рис. 9.17. Тег <marquee> по умолчанию
Прокручивающийся текст появляется между открывающим и
закрывающим тегами <marquee>. Он двигается влево через всю
страницу (или внутри горизонтальных размеров контейнерного тега,
содержащего marquee) и изменяет свое положение на 6 пикселей
каждые 85 миллисекунд. Он занимает на экране вертикальное
пространство, соответствующее размеру букв.
Направление прокрутки можно задавать с помощью атрибута
direction. Если определено up (вверх) или down (вниз) и если
height (высота) для тега <marquee> не задана, используется
значение height по умолчанию, равное примерно 200 пикселей,
задающее вертикальную область прокрутки. Marquee в начале этой
страницы расширяется по высоте в направлении прокрутки вниз или
вверх, так как высота не была определена.
Скорость движения управляется атрибутами scrollamount и
scrolldelay. Надо проверить несколько значений настройки этих
атрибутов, чтобы создать требуемый эффект прокрутки.
Скорее всего, потребуется некоторое дополнительное оформление
прокручивающегося текста. Это можно сделать с помощью свойств
стиля, связанных с тегом <marquee>. Кодирование следующего
marquee показано ниже.

Рис. 9.18. marquee с оформлением
426

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<div style="text-align:center; background-color:#F0F0F0; padding:5px">
<marquee direction="left" scrolldelay="50" scrollamount="3"
style="border:inset 5; padding:5px; width:50%; background-color:#000000;
color:#FFFFFF; font-family:courier new; font-size:12pt; font-weight:bold"
onmouseover="this.scrollAmount=0"; onmouseout="this.scrollAmount=3">
Scrolling Text
</marquee>
</div>
Листинг 9.16. Код для оформления marquee

marquee помещается внутри раздела ( div ), чтобы выровнять его по
центру и задать цвет фона, на котором выводится текст. Для marquee
задана граница и определен размер в 50% ширины страницы с
заданным цветом текста и фона.
Обычно желательно, чтобы пользователи могли делать паузу при
прокрутке текста и, тем самым, имели возможность его спокойно
прочитать. Это легко сделать, добавляя операторы JavaScript в тег
<marquee>. Операторы сценария останавливают прокрутку по
событию "указатель мыши над" (свойство scrollAmount задается
равным 0) и возобновляют прокрутку по событию "указатель мыши вне"
(свойству scrollAmount задается его исходное значение).

Динамический HTML
Хотя это не было подчеркнуто в данном учебнике, но теги XHTML
являются программируемыми объектами, которыми можно управлять с
помощью процедур JavaScript. Это было продемонстрировано в
предыдущих примерах, где обработчики событий добавлялись в теги
<img/> и <marquee>, чтобы сделать их реагирующими на действия
пользователей с мышью. Связывая процедуры JavaScript с этими и
другими тегами, большинство элементов страницы можно сделать
реагирующими на события мыши и клавиатуры. Обычно эти события
вызывают немедленные изменения в настройках стиля, динамические
изменения визуального представления страницы или изменение
вывода информации в ответ на запросы пользователя. Такие действия
по программированию тегов называют Dynamic HTML (DHTML).
427

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Головоломка ниже является набором изображений GIF, которые
запрограммированы для реагирования на события перетаскивания
мыши. Фрагмент головоломки надо перетащить на область палитры,
чтобы восстановить изображение.

Рис. 9.19.
Использование динамического HTML (DHTML) для
программирования тегов XHTML
С помощью языка JavaScript можно программировать теги XHTML для
создания этих и других типов специальных эффектов на странице Web.
Можно также осуществить поиск в Web уже готового кода DHTML,
который можно скопировать на страницу Web и модифицировать в
соответствии со своими целями. В Web можно найти приложения
DHTML для создания меню и методов перемещения, прокрутки текста,
визуальных эффектов и слайдшоу, календарей, часов, использования
мыши, игр и многих других специальных эффектов. Часто
использование этих приложений требует только копирования кода и
сценариев с сайта Web и вставки в создаваемую страницу Web.

Функции JavaScript
Существуют тысячи готовых приложений JavaScript, которые можно
скопировать из Web и вставить в создаваемую страницу. Следующий
календарь и калькулятор были найдены на сайте ссылка:
http://javascript.internet.com/ - http://javascript.internet.com/. Обычно все
сценарии и соответствующий код XHTML копируют с сайта и сразу
вставляют на страницу.
428

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 9.20. Функции JavaScript, скопированные на страницу Web
Можно найти всевозможные календари, калькуляторы, часы, кнопки,
форматтеры текста, генераторы меню, игры, таблицы для поиска, доски
объявлений и другие приложения, слишком многочисленные, чтобы их
можно было перечислить. Обычно не требуется понимать или
модифицировать код, который помещается на страницу.

Апплеты Java
(Примечание: Прежде чем выполнять апплет Java, компьютер должен
иметь установленную среду выполнения Java. Этот встраиваемый
модуль доступен для загрузки и установки на сайте ссылка:
http://www.java.com - http://www.java.com.)
Апплеты являются небольшими программами, написанными на языке
программирования Java для встраивания в страницы Web. Апплеты
доступны практически для любых применений на странице - игры,
моделирование и настольные приложения, такие, как редактирование
текста, черчение и рисование и доступ к базам данных. Многие из них
можно использовать бесплатно. Апплет упакован как один или
несколько загружаемых файлов программ с расширением файла
.class. Он помещается на страницу с помощью тега <object> в
том месте, где должен появиться. Общая форма тега <object>,
используемая для вывода апплета Java, показана ниже.
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
width="n" height="n">
429

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<param name="code" value="file.class"/>
<param name="codebase" value="path"/>
...
</object>
Листинг 9.17. Общая форма тега <object> для апплета Java

Необходимо включить classid для апплета Java; настройки width и
height (ширины и высоты) являются необязательными, но могут
задаваться для изменения размера области вывода. Чтобы использовать
апплет, он должен получить параметры, то есть, значения данных,
которые модифицируют апплет в соответствии с существующими
потребностями. Эти значения задаются с помощью последовательности
тегов <param/>, число и тип которых зависит от назначения апплета.
Тег <param/> имеет атрибуты name, для которых задаются атрибуты
value, которые позволяют персонализировать апплет.
Необходимо закодировать параметр name="code" ; его значением
является имя файла класса апплета. Параметр name="codebase" ; не
требуется, если файл класса находится в том же каталоге, что и страница
Web, на которой он находится. Иначе значением codebase будет путь
доступа к каталогу класса апплета. Для конкретных апплетов могут
потребоваться и другие параметры.
Примеры различных типов апплетов и требований к кодированию
показаны ниже. Помните, что тег <object> является линейным тегом
и должен находиться внутри блочного тега для соответствия XHTML.
Блочные теги в следующих примерах не показаны.

Манипуляции с текстом
Большое число апплетов выполняет различные манипуляции с текстом,
позволяя украсить или анимировать слова и фразы. Следующий апплет,
например, создает эффект радуги для задаваемой строки текста.

430

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 9.21. Апплет Java для декорирования текста
Показанный выше апплет называется RainbowText.class; он был загружен
с
сайта
ссылка:
http://javaboutique.internet.com
http://javaboutique.internet.com, предлагающего свободно доступные
апплеты. Этот файл класса находится в том же каталоге, что и страница
Web. Тег <object> для этого приложения показан ниже.
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
width="160" height="40">
<param name="code" value="RainbowText.class"/>
<!-- Required parameters for applet -->
<param name="text" value="RainbowText"/>
<param name="fontname" value="impact"/>
<param name="fontsize" value="24"/>
<param name="fontstyle" value=""/>
<param name="bgcolor" value="880000"/>
</object>
Листинг 9.18. Код, применяющий апплет Java для декорирования
текста

Параметр name="code" задает имя файла класса апплета
(RainbowText.class). В этом примере параметр name="codebase" не
требуется, так как файл класса находится в том же каталоге, что и
страница Web. Данный апплет имеет дополнительные параметры,
определяющие характеристики строки текста, к которой применяется
апплет. Документация апплетов обычно определяет необходимые
параметры и диапазоны значений, которые они принимают.

Прокрутка текста
Другие популярные апплеты выполняют прокрутку текста, и многие из
них применяют методы, которые невозможно реализовать с помощью
тега XHTML <marquee>. Например, апплет с именем Terminal.class,
загруженный с того же сайта, создает показанный ниже вывод. Этот
апплет прокрутки использует для представления режим пишущей
431

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

машинки. Файл класса апплета находится в том же каталоге, что и
страница Web.

Рис. 9.22. Апплет Java для создания прокрутки текста
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
height="100" width="150">
<param name="code" value="Terminal.class"/>
<!-- Required parameters for applet -->
<param name="line1" value="This is an applet that"/>
<param name="pause1" value="0"/>
<param name="line2" value="produces scrolling text"/>
<param name="pause2" value="0"/>
<param name="line3" value="in typewriter mode."/>
<param name="pause3" value="2"/>
<param name="line4" value=""/>
<param name="pause4" value="0"/>
<param name="line5" value=""/>
<param name="pause5" value="0"/>
<param name="line6" value=""/>
<param name="pause6" value="0"/>
<param name="line7" value=""/>
<param name="pause7" value="0"/>
<param name="line8" value=""/>
<param name="pause8" value="0"/>
<param name="line9" value=""/>
<param name="pause9" value="0"/>
<param name="line10" value=""/>
<param name="pause10" value="0"/>
</object>
Листинг 9.19. Код, использующий апплет Java для прокрутки
текста
432

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Этот апплет требует использования тегов <param/> для каждых (до)
десяти строк текста. Одна пара тегов задает текстовую строку для
вывода; другая задает число секунд паузы после вывода строки.
Атрибуты width и height задают размеры области вывода.

Игры
Игры с активным действием, аркадные игры, карточные игры,
головоломки и другие типы игр доступны в виде апплетов. Версия
игры Breakout показана ниже.

Рис. 9.23. Игровой апплет Java
Как и многие игры, эта игра требует дополнительных файлов, кроме
основного файла класса. Графические и текстовые файлы поддержки
часто поставляются упакованными вместе в архиве и распаковываются
в папку, которая содержит все файлы, необходимые для выполнения
приложения. Иногда в пакете поставляется страница Web с уже
433

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

встроенным тегом <object>. Чтобы начать игру, достаточно просто
открыть эту страницу.
Показанная выше игра была распакована в папку с именем Breakout,
которая является подкаталогом каталога текущей страницы Web.
Поэтому в следующем теге <object> должен присутствовать
параметр name="codebase", задающий путь доступа к файлу
breakout.class.
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
width="466" height="457">
<param name="codebase" value="Breakout/"/>
<param name="code" value="breakout.class"/>
</object>
Листинг 9.20. Код для выполнения игрового апплета Java

Тикеры
Некоторые апплеты соединяются со службами данных, для
предоставления самых свежих новостей, финансовых отчетов, прогноза
погоды и других изменяющихся данных. Следующий апплет является
примером тикера рынка акций с сайта ссылка: www.redinews.com http://www.redinews.com. Эта служба, работающая по подписке и
требующая определенной платы за доступ к биржевой информации. Тег
<object> этого приложения показан ниже.

Рис. 9.24. Апплет Java тикера рынка
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
width="100%" height="25">
<param name="codebase" value="http://dev.redinews.com"/>
<param name="code" value="T0404.class"/>
<param name="queryid" value="QC30302"/>
</object>
Листинг 9.21. Код апплета Java тикера рынка
434

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Исключенный тег <applet>
Тег <object>, используемый для встраивания апплетов Java на
страницы Web, заменяет исключенный тег <applet>, общий формат
которого показан ниже.
<applet code="file.class" codebase="path" width="n" height="n"></applet>
Параметр code задает имя файла класса; параметр codebase задает путь
доступа к файлу класса, если он не находится в том же каталоге, что и
страница Web. Могут потребоваться необязательные теги <param/>, в
зависимости от конкретного приложения.

Использование технологии Flash
(Примечание: Прежде чем использовать приложения Flash, необходимо
загрузить и установить с сайта ссылка: http://www.macromedia.com http://www.macromedia.com плеер Flash Player.)
Многочисленные игры и приложения в формате Macromedia Flash
доступны для загрузки и размещения на странице Web (ссылка:
http://www.flash-game.net/ - http://www.flash-game.net/). Пример такой игры
показан ниже.

435

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 9.25. Flash-игра
Файлы Flash имеют расширение .swf. Они размещаются на странице
Web с помощью тега <object>. Код для встраивания приведенной
выше игры показан ниже.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="250" height="330">
<param name="movie" value="EggGame.swf"/>
</object>
Листинг 9.22. Код для встраивания приложения Flash

Отметим, что classid отличается от того, который используется для
Media Player или апплета Java. Этот classid предназначен для плеера
Flash.
Единственным обязательным параметром является name="movie" со
значением, задающим адрес URL файла .swf. Может понадобиться
добавить в тег <object> значения ширины и высоты, чтобы задать
размер изображения.

Соединение с сайтами с помощью JavaScript
436

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Другой метод встраивания приложения в страницу использует код
JavaScript для соединения с сайтами, на которых выполняется
приложение. Другими словами, приложение не загружается, оно
соединяется и выполняется с удаленного сайта.
Weather Channel (ссылка: http://www.weather.com - http://www.weather.com),
например, позволяет соединяться с локальным прогнозом погоды с
помощью небольшого сценария, который создает вывод прогноза
погоды на странице.

Рис. 9.26. Текущая погода от Weather Channel

<script src='http://voap.weather.com/weather/oap/31206?template=GENXH&par=1
&unit=0&key=4b85ab04049dg00730e07efd748e8055'>
</script>
Листинг 9.23. Код для вывода информации о погоде

Код предоставляется сайтом, предлагающим услугу, и его можно просто
скопировать на страницу. Для получения прогноза погоды необходимо
бесплатно зарегистрироваться на сайте Weather Channel и выбрать
область прогноза. Отметим, что приведенный выше регистрационный
код не является действительным, а служит просто примером кода,
полученного после регистрации.
Другим примером соединения с помощью JavaScript является
следующий информер заголовков новостей. Щелчок на выводимых
ссылках вызывает переход к исходному источнику новостей.

437

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 9.27. Заголовки текущих новостей
Это
приложение
с
сайта
ссылка: www.news4sites.com
http://www.news4sites.com, который поддерживает службу предоставления
регулярно обновляемых заголовков новостей из различных
информационных источников по всему миру. Это приложение
бесплатно, потому что включает рекламные ссылки на сайты; платная
подписка удаляет рекламу.
Код JavaScript и соответствующий XHTML предоставляются сайтом и
копируются на страницу. Не требуется даже знать, что все это означает.

<div id="NEWS">
<table style="width:270px; background-color:#D2EBFF" cellspacing="0" cellpadding
<tr>
<td style="background-color:#000000; color:#FFFFFF; font-size:12pt; font-weight
In the News
</td>
</tr>
<tr>
<td>
<span id="ITEMS"></span>
</td>
</tr>
<tr>
<td style="background-color:#FFFEE8; font-size:8pt">
<span id="TIME"></span>
</td>
</tr>
</table>
</div>
438

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<script src="http://www.news4sites.com/service/newsfeed.php?tech=js&id=2324"><
<script>
function LinesdownClassic()
{
clearTimeout(cfunc)
var str = ""
var hn = 0
var now = new Date()
for(var i=1;i<6;i++) {
hn=((ccap+i)<content.length)?ccap+i:ccap+i-content.length
str += "<li><a href=" + content[hn][url] + " target='_blank'><nobr>"
+ content[hn][caption].substr(0,40) + "</nobr></a><br>"
}
ITEMS.innerHTML = str
TIME.innerHTML = now.toLocaleString()
ccap=(ccap==0) ? content.length-1 : ccap-1
cfunc=setTimeout("LinesdownClassic()",3000)
}
ccap=0
cword=0
cfunc='LinesdownClassic'
LinesdownClassic()
</script>
Листинг 9.24. Код для вывода заголовков новостей

Среди кода DHTML, процедур JavaScript, апплетов Java, подключаемых
модулей Flash и ссылок JavaScript существует множество приложений,
которые можно добавлять на страницу Web - для выполнения действий,
которые невозможно реализовать с помощью только кода XHTML.
Найти их в Web с помощью этих ключевых слов достаточно просто.

439

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Создание множества фреймов
Примечание. В XHTML 1.1 создание и использование множества
фреймов ( frameset ) не поддерживается. Консорциум WWW
разрабатывает другой метод, разрешающий открывать несколько
страниц внутри нескольких фреймов в основном окне браузера; однако,
эти стандарты еще не завершены и не поддерживаются современными
браузерами.
Этот учебник описывает использование фреймов, так как они являются
популярными методами вывода страниц, которые часто можно
встретить, и может возникнуть желание их использовать. Большинство
современных браузеров поддерживают фреймы. Можно также
сохранить объявления Определения типа документа (DTD) и
пространства имен xhtml для XHTML 1.1, как часть кода страницы.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Однако невозможно проверить такие страницы службами валидации
XHTML 1.1. Тем не менее, страницы будут выводиться правильно при
использовании одновременно frameset и линейных фреймов.
Фреймы являются отдельными "панелями" внутри окна браузера, на
которых можно выводить одновременно различные страницы.
Множество фреймов работает обычно как обобщенный пример,
показанный на рисунке 10.1. Щелкая на ссылках в левом фрейме, можно
вывести в правом фрейме соответствующие соединенные документы.
440

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 10.1. Использование фреймов
Окно браузера в примере разделено на три отдельных фрейма. Верхний
фрейм выводит заголовок; левый выводит меню из ссылок; правый
выводит различные страницы, доступные по этим ссылкам. Все
фреймы, фактически, выводят различные страницы Web, собранные
вместе для вывода в одном окне браузера.
Преимущество использования фреймов, таким образом, состоит в том,
что не требуется кодировать заголовок и меню на каждой странице
содержимого, которая выводит различные "Чудеса света". Они всегда
видны и доступны в своих фреймах, и их не нужно загружать с каждой
страницей. Плюс изменение информационного содержимого на экране
является вопросом изменения документа, появляющегося в правом
фрейме. Создавая эти фреймы, можно предоставить согласованный вид
для страниц, постоянно присутствующий заголовок в верхнем фрейме,
постоянно присутствующее меню в левом фрейме и общий формат для
страниц содержимого в правом фрейме.

Документ frameset
Документ frameset описывает общую структуру окна, разделенного
441

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

на фреймы. Это документ XHTML, в котором теги <frameset>
заменяют теги раздела <body>. Тег <frameset> описывает число,
расположение и размеры фреймов компонентов. Также внутри тега
frameset находится два или более тегов <frame/>, которые
идентифицируют и характеризуют фреймы и определяют исходные
документы, заполняющие фреймы.

Тег <frameset>
Контейнерный тег <frameset> делит окно браузера на отдельные
фреймы. Общий формат тега <frameset> показан ниже.
<frameset
cols="n1[%],n2[%]"
rows="n1[%],n2[%]"
frameborder="1|0"
bordercolor="color"
framespacing="n"
>
...
</frameset>
Листинг 10.1. Общий формат тега <frameset>

Атрибуты cols и rows определяют компоновку фреймов в окне
браузера. cols используется для деления окна вертикально на два или
более количество фреймов, а rows - для деления окна горизонтально на
два или большее количество фреймов. Тег <frameset> может
определять cols и rows.
Атрибут cols задает число и ширину фреймов в процентах от ширины
окна браузера или как определенное число пикселей в ширину. Атрибут
rows определяет число и высоту фреймов в процентах от высоты окна
браузера или как определенное число пикселей в высоту. Обычно лучше
использовать проценты для выражения размеров фреймов, так как они
остаются пропорциональными, когда пользователь изменяет размер
окна браузера.
442

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Следующий документ frameset определяет окно с двумя вертикальными
фреймами, первый из которых занимает 20%, а второй 80% ширины
окна браузера. Получающийся набор фреймов показан на рисунке 10.2
как два смежных фрейма, разделенные границей.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Frameset Document</title>
</head>
<frameset cols="20%,80%">
...
</frameset>
</html>
Листинг 10.2.
(фреймами)

Определение

frameset

с

двумя

столбцами

Отметим в приведенном выше коде, что страница не содержит тег
<body>. Тег <body> заменен тегом <frameset>.

443

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 10.2. Вывод в браузере набора фреймов с двумя вертикальными
фреймами
При использовании атрибута rows применяются те же правила, за
исключением того, что набор фреймов создается как горизонтальные
строки с фреймами, разделенными границами.
<frameset rows="20%,80%">
...
</frameset>
Листинг
10.3.
(фреймами)

Определение

frameset

444

с

двумя

строками

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 10.3. Вывод в браузере набора фреймов с двумя горизонтальными
фреймами
Можно использовать звездочку (
) вместо задания размера, чтобы
позволить браузеру определить размеры фреймов. Такая запись
указывает на "все оставшееся пространство". Например, предыдущий
набор фреймов можно было бы закодировать следующим видом:
<frameset rows="20%,*">
чтобы позволить браузеру вычислить вторую строку как занимающую
оставшиеся 80% окна браузера.
По умолчанию множества фреймов имеют между фреймами границы. В
теге <frameset> можно задавать атрибут frameborder="1|0",
чтобы выводить ( 1 ) или скрывать ( 0 ) границы.
Толщину границ между фреймами можно задавать с помощью атрибута
framespacing="n", где n задается в пикселях.
Если границы между фреймами видимы, то можно задать им
определенный цвет с помощью атрибута bordercolor="color".
Цвета определяются именами, шестнадцатеричными или RGB
значениями.
445

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Тег <frame>
В то время как тег <frameset> делит окно на фреймы, эти фреймы
заполняются страницами Web с помощью тегов <frame/>. Имеется
по одному тегу <frame/> для каждого из фреймов, определенных во
frameset.
Тег <frame/> содержит атрибуты для указания исходного содержимого
фрейма вместе с внешним видом и поведением фрейма. Тег <frame/>
не является контейнерным тегом, поэтому он не имеет парного
замыкающего тега. Его общий формат показан ниже.
<frame
src="url"
name="framename"
frameborder="1|n"
bordercolor="color"
scrolling="auto|yes|no"
noresize
Исключены:
marginwidth="n"
marginheight="n"
/>
Листинг 10.4. Общий формат тега <frame/>

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

Атрибут src
Фрейм может загружать в начале страницу Web, адрес URL которой
446

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

определяют в атрибуте src="url". Задание этого атрибута
гарантирует, что при первом выводе окна фрейм не будет пустым.
Загружаемый предварительно во фрейм документ может быть
локальным на сайте, или URL может указывать на внешний документ.
Следующий код показывает, что документ с именем Menu.htm
загружается в начале в левом фрейме множества фреймов, а документ с
именем Home.htm загружается в правый фрейм. Предполагается, что
документы находятся в том же каталоге, что и страница frameset.
<frameset cols="20%,80%">
<frame src="Menu.htm"/>
<frame src="Home.htm"/>
</frameset>
Листинг
Web

10.5.

Предварительная

загрузка

фреймов

страницами

Атрибут name
Даже если во фрейм был загружен документ с помощью атрибута src,
он может выводить другие страницы, указывая этот фрейм в ссылках на
эти документы. Такая технология соединения описывается дальше.
Поэтому, если предполагается, что во фрейм будут загружаться другие
документы, то фрейм должен иметь имя, на которое можно ссылаться в
соответствующих гиперссылках. Фреймы, которые будут содержать
только исходный документ, определенный в атрибуте src, могут не
иметь имени.
Имена фреймам присваиваются с помощью атрибута name. В
следующем примере двум фреймам из frameset присваиваются имена
"Frame1" и "Frame2". Позже будет показано, как загрузить в эти фреймы
другие документы.
<frameset cols="20%,80%">
<frame name="Frame1" src="Menu.htm"/>
<frame name="Frame2" src="Home.htm"/>
</frameset>
447

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 10.6. Фреймы с именами

Атрибут noresize
Когда границы фреймов видимы, они являются также перемещаемыми.
Когда курсор мыши перемещается на границу, то изображение курсора
изменяется и пользователь может перетащить границу, чтобы изменить
размер фрейма. Обычно желательно, чтобы настройка фреймов
оставалась фиксированной и страницы появлялись в том виде, как это
предполагалось. Поэтому, чтобы пользователи не могли изменять
размеры фреймов, в теге <frame/> используется атрибут noresize,
как показано ниже.
<frameset cols="20%,80%">
<frame name="Frame1" src="Menu.htm" noresize/>
<frame name="Frame2" src="Title.htm"/>
</frameset>
Листинг 10.7. Запрет перемещения границ

Задание noresize для левого фрейма имеет в результате запрет на
изменение размера правого фрейма, так как они совместно используют
одну границу.

Атрибут scrolling
Атрибут scrolling="auto|yes|no" позволяет создать фрейм с
выводом или без вывода панелей прокрутки. По умолчанию фреймы
выводят панели прокрутки, когда документ слишком большой и не
помещается во фрейме.
Значением по умолчанию является scrolling="auto". Можно
изменить это значение на scrolling="yes", чтобы всегда выводить
горизонтальную и вертикальную полосу прокрутки, даже если документ
умещается во фрейме. Можно также задать scrolling="no", чтобы
отключить вывод панелей прокрутки, даже если документ слишком
большой для фрейма. Как правило, надо всегда разрешать прокрутку
448

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Атрибут marginwidth
Как и в случае полноразмерного окна браузера, информация выводится
во всем фрейме, начиная от левого края до правого края с небольшим
зазором свободного пространства, отделяющим текст от границ. Можно
улучшить удобочитаемость документа, задавая поля с каждой стороны
текста с помощью атрибута marginwidth="n". Значение атрибута
задает число пикселей свободного пространства между документом и
левой и правой границами фрейма.

Атрибут marginheight
Таким же образом поля можно ввести сверху и снизу документа с
помощью атрибута marginheight="n". Значение в пикселях
указывает величину свободного пространства между документом и
нижним и верхним краем фрейма. Альтернативой использованию
атрибутов marginwidth и marginheight является применение таблиц стилей
для задания полей документов, которые выводятся во фрейме.

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

449

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 10.4. Вложенный frameset
Такая организация фреймов создается кодированием одного набора
фреймов внутри другого набора фреймов. "Внешний" набор фреймов
состоит из двух строк. Верхняя строка содержит фрейм баннера, а
нижняя строка включает в себя "внутренний" набор фреймов из двух
столбцовых фреймов, левого фрейма, содержащего меню, и правого
фрейма, содержащего документ. Код, создающий этот набор фреймов,
показан ниже.
<frameset rows="15%,85%">
<frame name="Frame1" src="Banner.htm"/>
<frameset cols="20%,80%">
<frame name="Frame2" src="Menu.htm"/>
<frame name="Frame3" src="Document.htm"/>
</frameset>
</frameset>
Листинг 10.8. Код вложенных фреймов

Конечно, можно создавать более сложные организации фреймов, но
450

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Рис. 10.5. Задание фреймов в ссылках
Показанное выше приложение имеет приведенный ниже документ
frameset. Этот документ Wonders.htm открывается в браузере, чтобы
вывести набор фреймов.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
451

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Seven Wonders of the World</title>
</head>
<frameset rows="20%,80%" frameborder="0" framespacing="0">
<frame src="Title.htm" scrolling="no"/>
<frameset cols="20%,80%" frameborder="0" framespacing="0">
<frame src="Menu.htm"/>
<frame src="Home.htm" name="Content"/>
</frameset>
</frameset>
</html>
Листинг 10.9. Код страницы множества фреймов

Это составной набор фреймов с вложением. Внешний набор фреймов
состоит из двух строк ( rows ). Верхняя строка является фреймом, в
который загружается заголовок документа (Title.htm); нижняя строка
является вложенным набором фреймов. Это второе множество фреймов
состоит из двух столбцов. В левый фрейм загружается документ меню
(Menu.htm); в правый фрейм вначале загружается открывающая страница
сайта (Home.htm). Для правого фрейма задано также имя (
name="Content" ), так как он является фреймом для вывода
документов, соединяемых из фрейма меню.
Отметим, что множество фреймов не выводит границы, так как в тегах
<frameset> задано frameborder="0" и framespacing="0" (
framespacing необходимо задать равным 0, чтобы исключить
незначительное свободное пространство между фреймами, даже когда
границы не выводятся.) Также для верхнего фрейма задан атрибут
452

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

scrolling="no", чтобы подавить выводимую по умолчанию полосу
прокрутки.

Атрибут target
Соединенные документы загружают во фреймы, задавая атрибут
target="framename" в теге анкера <a>. Атрибут target
определяет
имя
фрейма
(заданное
в
теге
<frame
name="framename"/> ), в котором открывается документ. Поэтому
страница Menu.htm, которая загружается выше в левый фрейм,
кодируется следующим образом, чтобы направлять соединенные
страницы в именованный фрейм "Content".
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Menu Page</title>
<style type="text/css">
body {background-color:#F0F0F0}
h2 {text-align:center}
</style>
</head>
<body>
<h2>Menu</h2>
<div>
<a href="Artemis.htm" target="Content">Artemis</a><br/>
<a href="Colossus.htm" target="Content">Colossus</a><br/>
<a href="Gardens.htm" target="Content">Gardens</a><br/>
<a href="Halicarnassus.htm" target="Content">Halicarnassus</a><br/>
<a href="Lighthouse.htm" target="Content">Lighthouse</a><br/>
453

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<a href="Pyramid.htm" target="Content">Pyramid</a><br/>
<a href="Zeus.htm" target="Content">Zeus</a><br/>
</div>
</body>
</html>
Листинг
фрейм

10.10.

Код

для

направления

ссылок

в

именованный

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

Кодирование документа
Страницы, которые загружаются во фреймы, используют стандартное
кодирование XHTML. Не требуется никакое специальное кодирование
для начальной загрузки страниц с набором фреймов, или при
направлении во фрейм с помощью ссылки. Два следующих примера
страниц показывают полный код приведенного выше документа Title.htm
и одного из документов контента.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Title Page</title>
<style type="text/css">
body {background-color:#F0F0F0}
h1 {text-align:center}
</style>
454

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</head>
<body>
<h1>Seven Wonders of the World</h1>
</body>
</html>
Листинг 10.11. Код страницы заголовка приложения

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Artemis.htm Page</title>
<style type="text/css">
body {background-color:black; color:white"}
</style>
</head>
<body>
<div>
<img src="Artemis.gif" alt="Temple of Artemis at Ephesus"/><br/>
The Temple of Artemis at Ephesus<br/>
</div>
</body>
</html>
Листинг 10.12. Код примера страницы приложения с контентом

Выход из множества фреймов
455

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

При создании ссылок из множества фреймов на внешние сайты можно
столкнуться с риском встретить сайты, которые сами представлены
множеством фреймов. Это может вызывать проблемы с навигацией
одним только числом вложенных фреймов для перемещения; плюс
экран может оказаться перегруженным информацией. Не будет
преувеличением сказать, что посетители сайта могут оказаться в
лабиринте фреймов, не имея способа из него выбраться.
При создании ссылок из фреймов во внешние документы или сайты
либо на локальные страницы, которые не были созданы специально для
вывода во фреймах, необходимо предоставить средства для выхода из
множества фреймов. Иначе соединенный документ откроется внутри
множества фреймов. Эту проблему иллюстрирует метка меню на
рисунке 10.6, помеченная как "Oops!". Это стандартная ссылка, не
направленная во фрейм, которая по умолчанию открывается в текущем
окне. Текущим окном, к сожалению, является фрейм меню.

Рис. 10.6. Неправильный выход из множества фреймов
Для выхода из множества фреймов при соединении со страницей в теге
анкера используют атрибут target="_top". Такое кодирование
задает во frameset фрейм "top", и это приводит к тому, что
страница загружается вне фреймов в полном окне браузера.
456

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<a href="Page.htm" target="_top">Open Page in Full Window</a>
Листинг 10.13. Направление страницы в полное окно браузера

Другим вариантом при соединении из фрейма является направление
страницы в отдельное окно браузера. С помощью атрибута
target="_blank" в качестве места назначения ссылки открывается
другой экземпляр браузера, и в его основное окно загружается страница.
<a href="Page.htm" target="_blank">Open Page in New Window</a>
Листинг 10.14. Направление страницы в новое окно браузера

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Множества фреймов представляют особую проблему для посетителей,
которые хотят создать закладки страниц для повторного посещения.
Проблема в том, что это невозможно сделать. Закладки указывают
документ, появляющийся в полном окне браузера. Поэтому создается
закладка для множества фреймов, а не отдельных страниц внутри
фреймов. Ссылка закладки всегда возвращается на исходное множество
страниц, загруженных в документе frameset.
Удобство фреймов необходимо сбалансировать с их недостатками при
их использовании. Лучше сохранять вещи простыми, используя только
минимальный набор фреймов, необходимых для управления
соединением с требуемыми документами. В то же самое время
необходимо предоставить средства для выхода из набора фреймов при
соединении с внешними документами или при соединении с
локальными страницами, которые не были созданы для вывода во
фреймах.

Плавающие фреймы

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

странице могут выводить различные изображения в этом линейном
фрейме.
Линейные фреймы создают с помощью тега <iframe>, общая форма
которого показана на листинге 10.15.
<iframe
src="url"
name="framename"
frameborder="1|0"
scrolling="auto|yes|no"
Исключены:
width="n|n%"
height="n|n%"
align="left|right"
align="top|middle|bottom"
vspace="n"
hspace="n"
marginwidth="n"
marginheight="n"
>
</iframe>
Листинг 10.15. Общая форма тега <iframe>

Атрибут src определяет страницу для начальной загрузки во фрейм.
Атрибут name присваивает фрейму имя в качестве указателя для
ссылок. Фрейм не обязательно соединять со ссылками. Можно просто
вывести внутри фрейма один внешний документ, и в этом случае надо
определить в атрибуте src фрейма без имени только URL.
По умолчанию вокруг фрейма выводятся границы. Можно отключить
вывод границ с помощью атрибута frameborder="0". Если контент
страницы, загружаемой во фрейм, больше фрейма, то автоматически
выводятся панели прокрутки.
Можно отключить вывод панелей прокрутки с помощью атрибута
scrolling="no" или постоянно выводить панели прокрутки с
помощью scrolling="yes".
459

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Остальные атрибуты - width, height, align, vspace,
hspace, marginwidth, и marginheight - лучше задавать с
помощью таблиц стилей. Они должны считаться исключенными
атрибутами.
Отметим, что закрывающий тег </iframe> является обязательным,
даже если он ничего не замыкает. На странице Web можно определить
любое количество плавающих фреймов.
Следующий код используется для вывода и активации плавающего
фрейма. Свойства таблицы стилей заменяют большинство атрибутов
фрейма. Отметим, что в теге <iframe> атрибут src не задан. Поэтому
фрейм открывается без вывода документа, оставляя фрейм пустым.
<iframe name="TheFrame" scrolling="no"
style="width:225px; height:200px; float:right; margin-left:15px;
border:ridge 5px">
</iframe>
<div>
<a href="Artemis.htm" target="TheFrame">Artemis</a>
<a href="Colossus.htm" target="TheFrame">Colossus</a>
<a href="Gardens.htm" target="TheFrame">Gardens</a>
<a href="Halicarnassus.htm" target="TheFrame">Halicarnassus</a>
<a href="Lighthouse.htm" target="TheFrame">Lighthouse</a>
<a href="Pyramid.htm" target="TheFrame">Pyramid</a>
<a href="Zeus.htm" target="TheFrame">Zeus</a>
</div>
Листинг 10.16. Код линейного фрейма

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Использование таблицы
Использование фреймов можно симулировать с помощью таблицы,
структурированной в виде множества фреймов. Рисунок 10.8
показывает такой тип страницы. Она выглядит и действует как набор
фреймов; однако, это просто набор независимо выводимых страниц с
одинаковой структурой, скомпонованных в виде таблицы XHTML.

Рис. 10.8. Использование таблицы для эмуляции фреймов
Каждый щелчок на ссылке открывает совершенно новую страницу в
окне браузера. Все страницы, однако, имеют одинаковую структуру,
включая одинаковые название и меню. Единственное различие между
страницами состоит в кодировании ячейки, содержащей изображение и
текстовую метку. Поэтому внешне изменяется только ячейка, даже если
заменяется вся страница. Кодирование одной из этих восьми страниц
показано на листинге 10.17.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
461

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Seven Wonders of the World - Artemis Page</title>
<style type="text/css">
body
{margin:0px; background-color:#F0F0F0}
h1
{text-align:center}
table
{border:outset 1px; width:100%; height:100%}
table td
{border:inset 2px; vertical-align:top; padding:5px}
table td#TITLE {height:40px; font-size:18pt; font-weight:bold; text-align:center}
table td#MENU {width:20%}
</style>
</head>
<body>
<table>
<tr>
<td id="TITLE" colspan="2">
Seven Wonders of the World
</td>
</tr>
<tr>
<td id="MENU">
<h3>Menu</h3>
<div>
<a href="Home.htm">Home</a><br/>
<a href="Artemis.htm">Artemis</a><br/>
<a href="Colossus.htm">Colossus</a><br/>
<a href="Gardens.htm">Gardens</a><br/>
<a href="Halicarnassus.htm">Halicarnassus</a><br/>
<a href="Lighthouse.htm">Lighthouse</a><br/>
<a href="Pyramid.htm">Pyramid</a><br/>
<a href="Zeus.htm">Zeus</a><br/>
462

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</div>
</td>
<td>
<img src="Artemis.gif" alt="Temple of Artemis"/><br/>
The Temple of Artemis at Ephesus
</td>
</tr>
</table>
</body>
</html>
Листинг
фреймов

10.17.

Код

структуры

таблицы

для

эмуляции

набора

Это приложение достаточно легко создать. Закодируйте одну страницу
со всеми общими свойствами, исключая информацию, которая появится
в ячейке содержимого. Затем сохраните эту страницу в качестве
шаблона. Для каждой создаваемой страницы откройте файл шаблона,
вставьте подходящую информацию в ячейку контента и сохраните
страницу с именем, которое используется в ее ссылке в меню. Можно
быстро создать любое число страниц, которые следуют этому формату,
не повторяя при этом кодирование страницы с самого начала.
Получилось приложение Web, которое похоже на приложение с
фреймами и соответствует стандартам XHTML.

Программирование тега <div>
Действие тега <iframe> можно симулировать с помощью
использования небольшого кода JavaScript, применяемого в теге <div>.
Различие в том, что тег <div> не позволяет загружать отдельные
страницы Web, как <iframe>. Однако можно задать общую
компоновку в разделе и использовать программирование для замены
элементов страницы, содержащихся внутри раздела. Такая техника
применяется в следующем примере, в котором ссылки изменяют в
разделе графические изображения и текстовые строки.
463

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 10.9. Программирование тега <div> для эмуляции <iframe>
Этот раздел содержит тег <img/> для изображений и тег <span> для
сопровождающего текста. Код показан на следующем листинге.
<div style="width:350px; height:250px; float:left; padding:10px;
margin-right:10px; background-color:black; color:white; border:ridge 5px">
<img id="Picture" src="Artemis.gif"/><br/>
<span id="Text">Temple of Artemis at Ephesus</span>
</div>
Листинг 10.18. Код раздела, содержащий теги <img/> и <span>

В теге <div> задаются различные стили, чтобы сделать его похожим
на <iframe>, хотя это в действительности не требуется; можно
применять любое оформление для его содержимого. Раздел смещен на
странице влево, так, чтобы ссылки для замены изображений и текста
выводились справа. Вложенный тег <img/> сконфигурирован сначала
с первым изображением; тег <span> задает начальное значение текста.
Отметим, что обоим тегам <img/> и <span> присвоены значения id.
Эти присваивания необходимы, так как с помощью этих id теги
464

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

идентифицируются для замены изображения и текста в сценариях.
Этот раздел сопровождает множество ссылок <a>, которые
запрограммированы для замены изображений и текста. Эти теги
показаны на листинге 10.19.
<a href="javascript:"
onclick="Picture.src='Artemis.gif';
Picture.alt='Temple of Artemis at Ephesus';
Text.innerText='Temple of Artemis at Ephesus'">Artemis</a><br/>
<a href="javascript:"
onclick="Picture.src='Colossus.gif';
Picture.alt='Colossues of Rhodes';
Text.innerText='Colossus of Rhodes'">Colossus</a><br/>
<a href="javascript:"
onclick="Picture.src='Gardens.gif';
Picture.alt='Hanging Gardens of Babylon';
Text.innerText='Hanging Gardens of Babylon'">Gardens</a><br/>
<a href="javascript:"
onclick="Picture.src='Halicarnassus.gif';
Picture.alt='Mausoleum at Halicarnasus';
Text.innerText='Mausoleum at Halicarnasus'">Halicarnassus</a><br/>
<a href="javascript:"
onclick="Picture.src='Lighthouse.gif';
Picture.alt='Lighthouse of Alexandria';
Text.innerText='Lighthouse of Alexandria'">Lighthouse</a><br/>
<a href="javascript:"
onclick="Picture.src='Pyramid.gif';
Picture.alt='Great Pyramid of Giza';
Text.innerText='Great Pyramid of Giza'">Pyramid</a><br/>
<a href="javascript:"
onclick="Picture.src='Zeus.gif';
Picture.alt='Statue of Zeus at Olympia';
Text.innerText='Statue of Zeus at Olympia'">Zeus</a><br/>
Листинг 10.19. Код ссылок для замены изображений и текста

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Программируемыми свойствами тега <img/> являются:
src - адрес URL выводимого изображения, и alt - альтернативный
текст, выводимый при указании мышью на изображение.
Программируемым свойством тега <span> является:
innerText - текстовая строка между открывающим и закрывающим
тегами.
Сценарии JavaScript, закодированные внутри ссылок, просто
присваивают новые свойства src, alt и innerText этим тегам,
чтобы их изменить. Взгляните, например, на одну из этих ссылок:
<a href="javascript:"
onclick="Picture.src='Colossus.gif';
Picture.alt='Colossues of Rhodes';
Text.innerText='Colossus of Rhodes'">Colossus</a>
Атрибут href="javascript:", аналогично его использованию
ранее для открытия страницы Web в новом окне браузера, аннулирует
тег как ссылку URL и вместо этого указывает, что выполняется
процедура JavaScript. Обработчик событий щелчка мыши включает
вложенный сценарий (заключенный в двойные кавычки), когда
происходит щелчок на ссылке. Выполняется три оператора JavaScript,
закодированные здесь на трех отдельных строках для удобства чтения и
разделенные точкой с запятой ( ; ).
Второй оператор,
Picture.alt='Colossus of Rhodes'
присваивает текстовое значение 'Colossus of Rhodes' свойству alt тега с
id="Picture" (снова тегу <img/> ). Третий оператор,
Text.innerText='Colossus of Rhodes'
присваивает текстовую строку свойству innerText тега с
id="Text" (тегу <span> ). Эти три присваивания заменяют текущие
значения этих свойств другими значениями, что приводит к выводу
466

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

другого изображения, другого альтернативного текста и другого
текста подписи, которые появляются в разделе.
Значения в кавычках в этих операторах окружены одиночными
кавычками ( ' ), чтобы отличить их от двойных кавычек, окружающих
весь сценарий.
Такая возможность программирования тегов XHTML и задания
различных значений свойств после загрузки является сутью так
называемого
динамического
HTML
(DHTML).
Показанное
программирование является только крохотным примером множества
изменений, которые можно делать на странице Web на основе
взаимодействия пользователей с тегами на странице. DHTML
заслуживает отдельного более полного рассмотрения и находится за
рамками этой книги.
Основное замечание, которое надо здесь сделать, состоит в том, что не
существует хорошей замены для множества фреймов и линейных
фреймов. В настоящее время консорциум W3C работает над
альтернативным решением, чтобы предоставить такую же
функциональность, но пока оно еще не стало формальными
рекомендациями и не реализовано в браузерах. В настоящее время
можно продолжать использовать на страницах множества фреймов и
плавающие фреймы, помня о том, что, хотя они обеспечивают удобные
функции, они не соответствуют стандартам XHTML.

467

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Управляющие элементы формы
Форма XHTML предоставляет пользователям способ взаимодействия со
страницей Web. Форма является, по сути, средством для получения
данных. Она предоставляет пользователю один или несколько
элементов управления или полей для ввода или выбора, с помощью
которых пользователь передает информацию странице Web. На основе
полученной информации страница может ответить пользователю. Этот
ответ может варьироваться в зависимости от назначения этой формы.
Полученные данные могут использоваться для направления
посетителей на другую страницу, весьма похоже на то, что происходит
при щелчке на ссылке; для предоставления посетителям
персонализированных страниц, которые содержат информацию и
ссылки, соответствующие их интересам или предпочтениям; для
запуска сложного процесса поиска для нахождения информации,
продуктов, или услуг, в которых заинтересован пользователь, для
выполнения персонализированного вывода вариантов выбора или
вычисления цен этих продуктов или услуг; для запуска процесса
проверки кредитной карты во время покупки продуктов или услуг; для
соединения с системами учета и выставления счетов для завершения
покупки; для генерации автоматических почтовых сообщений
подтверждения покупок; и этот список можно продолжать дальше и
дальше. Главное состоит в том, что формы являются средством запуска
целого ряда действий, которые преобразуют сайты Web из простых
электронных "увлекательных книг" в полноценные системы обработки
информации.
468

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 11.1. Варианты элементов управления формы
Отметим, что существует три основные категории элементов
управления. Поля, помеченные "Textbox", "Password" и
"Textarea", представляют поля ввода, где пользователь может
вводить информацию в виде печатных символов. Элементы
управления, помеченные "Radio Button," "Checkbox" и
"Drop-down
List", предоставляют варианты выбора для
пользователя из представленных позиций. Элементы управления,
помеченные "Submit Button", "Submit Graphic" и "Reset
Button", являются реагирующими на щелчок мыши элементами
управления для отправки данных формы на обработку или обновления
469

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

всей формы, очищая все записи и сделанный выбор.

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

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

Тег <form>
470

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Независимо от числа форм или их расположения на странице, каждая
должна быть заключена в тег <form>, общая форма которого показана
ниже.
<form
id="formId"
action="url"
method="get|post"
Исключены:
name="formname"
>
...элементы управления формы
</form>
Листинг 11.1. Общая форма тега <form>

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

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Атрибут id заменяет исключенный атрибут name. Атрибут name все еще
требуется для некоторых типов сценариев сервера, но он не является
действительным в XHTML 1.1.

Атрибут action
Введенные пользователем в форму данные делаются доступными
серверной странице, содержащей сценарий для обработки этой
информации. Сценарий может находиться на той же странице, что и
форма - обычная техника, - или информация может быть отправлена на
другую страницу.
Атрибут action определяет серверную страницу, которой передается
информация из формы. Если обрабатывающая страница является той же
самой, что и страница формы, или если обрабатывающая страница
находится в том же каталоге, что и страница формы, то адрес URL
является просто именем этой страницы. Если страница находится в
удаленном месте, то кодируется полный адрес URL. Атрибут action
должен присутствовать во всех тегах <form>.

Атрибут method
Атрибут method определяет способ, которым данные формы
передаются на страницу, определенную в атрибуте action. Двумя
возможными значениями являются get и post, первый из которых
используется по умолчанию. Когда используется метод get, данные из
формы добавляются к URL из атрибута action ; когда используется
метод post, информация передается на страницу action, как
отдельный поток данных. Эти методы более подробно будут
рассмотрены далее.
В данный момент необходимо закодировать базовый тег <form>,
чтобы разместить в нем элементы управления. Минимальная
компоновка страницы, содержащей форму, показана ниже, исключая (в
данный момент) вопросы в отношении отправки данных формы для
обработки.
472

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Страница формы </title>
</head>
<body>
<form action="url">
...элементы управления формы
</form>
</body>
</html>
Листинг 11.2. Общая компоновка страницы для формы

Локальная обработка данных
Основное назначение форм состоит в отправке введенных или
выбранных данных на серверную страницу Web для обработки. Для
этого предназначен атрибут action тега <form> - для определения
страницы, на которую посылается информация.
Однако можно использовать элементы управления формы независимо
от отправки формы, когда сценарии обработки данных являются
сценариями браузера, расположенными на той же самой странице Web.
В этом случае даже не требуется использовать на странице тег <form>.
Отдельные элементы управления обрабатываются непосредственно
сценариями браузера без отправки формы. Небольшой пример с полем
473

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

ввода на странице показан ниже. Если ввести имя в поле ввода и
щелкнуть на кнопке "Submit", то введенное имя выводится как часть
выводимой строки текста.

Рис. 11.2. Обработка введенных данных сценарием на странице
Код элементов управления и сценарий обработки показаны ниже.
Понимание сценария на данном этапе не требуется. Однако, отметим,
что текстовое поле, кнопка, запускающая сценарий, и тег <span>,
который служит в качестве получателя вывода сценария, не находятся
внутри тега <form>. Тег <form> не требуется, так как введенная в
текстовое поле информация не передается на сервер для обработки. Все
элементы управления доступны непосредственно сценарию на
странице.
<!-- Сценарий браузера -->
<script type="text/javascript">
function Get_Name()
{
var Input = document.getElementById("Name")
var Output = document.getElementById("Output")
Output.innerHTML = "Your name is <b>" + Input.value + "</b>."
}
</script>
<!-- Код XHTML -->
<div>
Enter your name: <input id="Name" type="text"/>
<input type="button" value="Submit" onclick="Get_Name()"/><br/>
<span id="Output" style="color:red"></span>
</div>
Листинг 11.3. Код
введенных данных

Если

обработка

сценария

элементов

на

странице

управления
474

для

формы

обработки

проводится

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

исключительно сценариями браузера (форма не отправляется для
обработки на сервере), то тег <form> не требуется. Однако, можно,
включить тег <form action="">, чтобы указать на локальную
обработку и для согласованности в кодировании элементов управления
формы.

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

Тег <input/>
Наиболее распространенным типом элементов управления формы
является текстовое поле ( textbox ). Этот элемент управления
предоставляет стандартное поле для ввода текста, в которое вводится
информация. Текстовое поле ввода создается с помощью тега
<input/> следующим образом.
<input type="text|password"
id="id"
size="n"
maxlength="n"
value="text"
Исключен:
name="name"
/>
Листинг
11.4.
Общий
type="text|password"/>

формат

Атрибут type
475

тега

<input

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Тег <input/> содержит атрибут type для определения его как
текстового поля ввода. Существует два различных типа элементов
управления текстовым вводом. Если type="text" или если атрибут
type не определен, то тип поля является стандартным текстовым
полем для ввода информации. Если type="password", то создается
аналогичный элемент управления, но вводимые символы выводятся в
поле как символы маркеры, чтобы скрыть вводимую информацию. Тег
<input/> является линейным, требующим включения в блочный тег.
Два типа элементов управления показаны ниже, вместе с кодом для их
создания. Элементы управления выводятся в таблице без границ, чтобы
выровнять их и приглашающие метки. В первом поле при вводе будут
видны вводимые символы, а второе поле будет показывать только
маркеры (например, звездочки).

Рис. 11.3. Варианты тега <input type="text|password"/>
<form action="ThisPage.htm">
<p>Please enter the following information:</p>
<table>
<tr>
<td>Name: </td>
<td><input id="TheName" type="text"/></td>
</tr>
<tr>
<td>Password: </td>
<td><input id="ThePassword" type="password"/></td>
</tr>
</table>
</form>
Листинг 11.5. Код для вывода различных вариантов тега <input
476

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

type="text|password"/>

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

Атрибут size
Если размер текстового поля не определен, то при выводе в браузере
используется размер по умолчанию, который соответствует примерно
20 символам. В большинстве случаев определяют размер, который
равен числу ожидаемых символов ввода. Например, три текстовых поля
ниже имеют размер 15 (City), 2 (State), и 10 (Zip code) символов,
соответственно. Вместо применения атрибута size можно определять
размер поля с помощью свойства width таблицы стилей.

Рис. 11.4.
textbox

Задание выводимых размеров управляющих элементов

<form action="ThisPage.htm">
<table>
<tr>
<td>City: </td>
<td><input type="text" id="City" size="15"/></td>
477

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</tr>
<tr>
<td>State: </td>
<td><input type="text" id="State" size="2"/></td>
</tr>
<tr>
<td>Zip: </td>
<td><input type="text" id="Zip" size="10"/></td>
</tr>
</table>
</form>
Листинг 11.6. Код
элементов textbox

задания

выводимых

размеров

управляющих

Атрибут maxlength
Текстовое поле может содержать до 256 символов, независимо от его
выводимого размера. Когда ввод достигает правой границы поля, текст
смещается, чтобы можно было ввести дополнительные символы. Как
правило, не нужно разрешать пользователям вводить больше чем
максимальное число ожидаемых символов. При передаче данных для
обработки на сервере этот максимум часто задан размерами полей в
базе данных, которая хранит значения.
Максимальное число допустимых символов можно задать, кодируя
атрибут maxlength. Если это значение закодировано, то пользователь
не сможет ввести в поле больше указанного числа символов.
<form action="ThisPage.htm">
<table>
<tr>
<td>City: </td>
<td><input type="text" id="City" size="15" maxlength="15"/></td>
<tr>
<tr>
<td>State: </td>
<td><input type="text" id="State" size="2" maxlength="2"/></td>
478

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<tr>
<td>Zip: </td>
<td><input type="text" id="Zip" size="10" maxlength="10"/></td>
</tr>
</table>
</form>
Листинг 11.7. Код для задания максимального
символов, вводимых в элементах управления textbox

количества

Атрибут value
Текстовое поле ( textbox ) может иметь атрибут value,
определяющий предварительно введенный в поле текста. С его
помощью можно задать используемое по умолчанию значение поля или
указать на предполагаемое содержимое.

Рис. 11.5. Предварительно заполненный элемент управления textbox
Name: <input type="text" id="FullName" size="30" value="Введите имя"/>
Листинг 11.8. Код
управления textbox

предварительно

заполненного

элемента

Использование кавычек в текстовых полях
При предварительном заполнении текстового поля с помощью значения
атрибута value нельзя использовать символы кавычек, окружающие
часть текста. Это связано с тем, что значение атрибута value само
заключено в кавычки и любые знаки цитирования внутри этих
контейнерных кавычек разрушают их парность. Поэтому, например,
следующий код будет неверным и не создаст правильно заполненное
текстовое поле.
<input id="QuoteText" type="text" size="45"
479

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

value="Этот текст "в кавычках"."/>
Листинг 11.9. Неверное
содержимым с кавычками

предварительное

заполнение

textbox

Однако, можно использовать специальный символ &quot;, чтобы
выводить символы кавычек внутри значения атрибута value элемента
управления textbox.
<input id="QuoteText" type="text" size="45"
value="Этот текст &quot;в кавычках&quot;."/>
Листинг 11.10. Действительное
textbox содержимым с кавычками

предварительное

заполнение

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

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

Рис. 11.6. Оформление элемента управления textbox
<style type="text/css">
.textbox {width:200px; font-family:comic sans ms; font-size:10pt;
background-color:#F0F0F0; color:#0000FF; border:ridge 5px}
480

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</style>
Name: <input type="text" id="FullName" class="textbox"
maxlength="20" value="Enter your full name here"/>
Листинг
textbox

11.11.

Код

для

оформления

элемента

управления

Извлечение данных из textbox
Следующий пример демонстрирует использование текстовых полей для
ввода данных. Для тех, кто не понимает показанный ниже код JavaScript,
скажем, что он иллюстрирует, как сценарий браузера может получить
доступ к информации в элементах управления textbox и выполнять
локальную обработку и вывод информации.

<!-- Сценарий браузера -->
<script type="text/javascript">
function Get_Logon()
{
var Account = document.getElementById("Account")
var Password = document.getElementById("Password")
var Output = document.getElementById("Output")
Output.innerHTML = "Your account is <b>" + Account.value
+ "</b> and your password is <b>"
+ Password.value + "</b>."
}
</script>
<!-- Код XHTML -->
<div>
Enter your account: <input id="Account" type="text"/><br/>
Enter your password: <input id="Password" type="password"/>
<input type="button" value="Submit" onclick="Get_Logon()"/><br/>
481

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<span id="Output" style="color:red"></span>
</div>
Если ввести в поля некоторый текст и щелкнуть на кнопке "Submit",
то будет активирована функция JavaScript с именем Get_Logon(),
которая находится на той же странице, что и элементы управления
textbox. Сценарий обращается к введенным в текстовые поля
данным и выводит их на экране.

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

Рис. 11.7. Элемент управления <textarea>
Элемент управления <textarea> является контейнерным тегом,
общая форма которого показана на листинге 11.12.
<textarea
id="id"
cols="n"
rows="n"
>
...предварительно введенный текст
482

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</textarea>
Листинг 11.12. Общая форма элемента управления <textarea>

Атрибут id
Как и всем элементам управления, формы элементу <textarea>
может быть задан идентификатор id. Этот id должен отражать в
какой-то степени содержащуюся в области информацию.

Атрибут cols
Визуальная ширина textarea задается атрибутом cols. Он
определяет ширину, как приблизительное число символов, выводимых
в строке текста. Если этот атрибут не задан, то по умолчанию
используется ширина, соответствующая примерно 20 символам. Вместо
атрибута cols для задания ширины textarea можно применить
свойство width таблицы стилей.

Атрибут rows
Высота области текста textarea задается атрибутом rows. Это
значение определяет число строк текста, которые видны в области
ввода. По умолчанию используется две строки видимого текста. Для
задания высоты области текста можно применить вместо атрибута
rows свойство таблицы стилей height.

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Важно помнить, что любые пробелы, переносы строк, или пустые
строки, присутствующие в тексте во время ввода в редакторе,
воспроизводятся в области текста textarea, почти в таком же виде,
как браузер выводит текст, помещенный внутри тега <pre>. В
следующем примере ввод в редакторе на листинге 11.13 организует тег
и его содержимое на отдельных строках и со смещением для удобства
чтения в редакторе. Однако вывод в браузере на рисунке 11.8 будет не
обычным параграфом с переносом строк по словам, а скорее
воспроизведением введенного в редакторе текста.
<textarea id="MyTextarea" cols="50" rows="6">
These are two paragraphs appearing
inside a textarea.
This content, with line breaks and
blank lines coded in the editor for
for readability, is exactly reproduced
within the textarea.
</textarea>
Листинг
11.13.
Кодирование
пробелами и переносами строк

textarea

с

фиксированными

Рис. 11.8. Область текста textarea, выводящая фиксированные пробелы
и переносы строк
Чтобы в предварительно введенном тексте автоматически
расставлялись пробелы и выполнялся перенос по словам внутри
области текста textarea, текст должен кодироваться сразу вслед за
открывающим тегом и за ним сразу должен следовать закрывающий тег.
Фиксированные пробелы или переносы строк должны отсутствовать.
Следующий пример показывает предварительно введенные параграфы,
484

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

закодированные как одиночные строки в редакторе кода, чтобы
обеспечить правильный перенос слов в текстовой области.
<textarea id="MyTextarea" cols="50" rows="6">
These are two word-wrapped paragraphs appearing in a textarea.
This content, without extra line breaks or blank lines coded in the editor,
is properly word-wrapped inside the textarea as intended.
</textarea>
Листинг 11.14. Кодирование текстовой области для содержимого
с переносом слов

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

Теги XHTML и кавычки в текстовой области
Введенные в текстовой области теги XHTML не оказывают никакого
форматирующего влияния. Они интерпретируются как стандартные
текстовые символы. В следующем примере теги XHTML появляются в
текстовой области либо как предварительно введенный текст, либо как
ввод данных пользователя, но эти теги не оказывают никакого
форматирующего влияния.
<textarea id="TagInput" cols="40" rows="6">
The <p> tag appears around a block of
text to offset it from surrounding
text by blank lines. A <div> tag, in
contrast, does not produce blank lines
surrounding its content.
485

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

</textarea>
Листинг 11.15. Кодирование текстовой области с тегами XHTML

Рис. 11.10. Текстовая область с тегами XHTML
В отличие от случая со значениями, в текстовом поле знаки кавычек
могут появляться в предварительно введенном тексте и могут также
вводиться пользователем, не вызывая проблем с выводом текстовой
области или с вводом данных.

Дополнительное оформление текстовой области
Текстовая область использует по умолчанию тип шрифта Courier
New размером 12pt. Можно изменить эти настройки, а также
оформление текстовой области с помощью таблицы стилей, как
показано ниже.
<style type="text/css">
textarea {style="border:inset 5; background-color:#F0F0F0; color:#0000FF;
font-family:comic sans ms; font-size:10pt; padding:7px}
</style>
<textarea id="Comments" cols="50" rows="4">
This control is styled with 10-point Comic Sans
MS type face with gray background and blue
foreground colors.
The border is inset style, five pixels in width.
Padding of 7 pixels appears around the text.
</textarea>
486

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 11.16. Кодирование оформления текстовой области

Рис. 11.11. Оформленная текстовая область

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

<!-- Сценарий браузера -->
<script type="text/javascript">
function Get_Text()
{
var Input = document.getElementById("MyText")
var Output = document.getElementById("Output")
Output.innerHTML = "<b>You entered: </b>" + Input.value
}
</script>
<!-- Код XHTML -->
<div>
Enter your comments:<br/>
<textarea id="MyText"></textarea>
<input type="button" value="Submit" onclick="Get_Text()"/><br/>
<span id="Output" style="color:red"></span>
</div>
Когда делается щелчок на кнопке "Submit", активируется локальная
487

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

функция JavaScript с именем Get_Text(), которая находится на той же
странице, что и управляющий элемент textarea. Сценарий
обращается к данным, введенным в текстовой области, и выводит их на
экране.

Радио кнопки
Радио кнопки являются множествами круглых кнопок, которые могут
быть включены ( "on" ) и выключены ( "off" ). Заполненный,
затемненный центр в кнопке указывает, что кнопка является
выбранной; пустой центр указывает, что кнопка не была выбрана.
Радио кнопки обычно предоставляют пользователям взаимно
исключающие друг друга варианты выбора, - то есть, может быть
выбрана только одна из группы кнопок. Когда выбирается другая
кнопка, то предыдущая кнопка выключается. Набор радио кнопок
показан ниже.

Рис. 11.12. Набор радио кнопок

Тег <input type="radio" />
Радио кнопки определяют с помощью одного или нескольких тегов
<input type="radio"/>. Для каждой кнопки в множестве
требуется отдельный тег. Общая форма этого тега показана ниже.
<input type="radio"
id="id"
name="name"
value="text"
checked="checked"
/>
488

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 11.17. Общая форма тега <input type="radio"/>

Тег <input type="radio"/> только выводит кнопку. Если нужно
задать для кнопки метку, текст можно ввести перед или после кода
кнопки, чтобы вывести его слева или справа от кнопки.

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

Атрибут name
Радио кнопки обычно группируют для представления пользователю
множества связанных вариантов выбора. В этом случае можно выбрать
только один из вариантов - они являются взаимно исключающими.
Когда происходит щелчок на кнопке для ее выбора и эта кнопка
подсвечивается, то любая выбранная ранее кнопка становится
выключенной и неподсвеченной. Чтобы группа радио кнопок
действовала таким образом, необходимо присвоить всем кнопкам в
группе одно имя, как показано в следующем коде для представленных
выше кнопок.
<input type="radio" name="Choice"/>Choice 1<br/>
<input type="radio" name="Choice"/>Choice 2<br/>
<input type="radio" name="Choice"/>Choice 3<br/>
Листинг 11.18. Кодирование группы радио кнопок

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

Атрибут value
489

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 11.13. Множество кнопок для выбора цвета
What is your favorite color?<br/>
<input type="radio" name="Color" value="Red"/>Red<br/>
<input type="radio" name="Color" value="Green"/>Green<br/>
<input type="radio" name="Color" value="Blue"/>Blue<br/>
Листинг 11.19. Код множества кнопок для выбора цвета

Все кнопки имеют общее имя "Color", чтобы задать группу взаимно
исключающих вариантов выбора. Выбор определенного цвета из
группы задается значением, связанным с выбором. Поэтому, если
пользователь щелкает на первой кнопке, будет выбран цвет "Red".
Более точно, значение "Red" связывается с именем "Color" как
указатель выбора.
Обычно для радио кнопок всегда необходимо кодировать атрибуты value.
Таким способом кнопки получают значения, а сценарий браузера или
серверная программа определяет, какая кнопка была выбрана. Не
обязательно присваивать значение, которое совпадает с меткой кнопки.
Часто для значений используются сокращенные коды, а выводятся более
содержательные метки.
What is your favorite color?<br/>
<input type="radio" name="Color" value="R"/>Red<br/>
<input type="radio" name="Color" value="G"/>Green<br/>
<input type="radio" name="Color" value="B"/>Blue<br/>
490

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 11.20. Код для множества, создающий "кодированный"
выбор цвета

Выбор одной из приведенных выше кнопок отправляет имя и значение
Color=R, Color=G, или Color=B программе обработки, которая
затем определяет, какое предпринять действие с полученным кодом
значения.

Атрибут checked
Когда множество радио кнопок выводится первый раз, все кнопки
выводятся выключенными, то есть, ни одна из них не выбрана и не
подсвечена. Однако можно принудительно вывести одну из кнопок в
группе
включенной.
Для
этого
используют
атрибут
checked="checked" в теге <input type="radio"/> кнопки,
которая должна появиться включенной при загрузке страницы.

Рис. 11.14. Набор кнопок с первый заранее выбранной кнопкой
What is your favorite color?<br/>
<input type="radio" name="Color" value="R" checked="checked"/>Red<br/>
<input type="radio" name="Color" value="G"/>Green<br/>
<input type="radio" name="Color" value="B"/>Blue<br/>
Листинг 11.21. Код для предварительного выбора кнопки

Извлечение данных радио кнопки
Следующий пример демонстрирует использование радио кнопок для
ввода данных. При выборе кнопки цвета и нажатии на кнопку
"Submit" будет выводиться значение выбранной кнопки.
491

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<!-- Сценарий браузера -->
<script type="text/javascript">
function Get_Color()
{
var i
var Button
var Output
for (i=1; i<=3; i++){
Button = document.getElementById("Button" + i)
if (Button.checked == true) {
Output = document.getElementById("Output")
Output.innerHTML = "<b>You selected: </b>" + Button.value
}
}
}
</script>

<!-- Код XHTML -->
<div>
What is your favorite color?<br/>
<input id="Button1" type="radio" name="Button" value="Red" checked="checked"/>
<input id="Button2" type="radio" name="Button" value="Green"/>Green<br/>
<input id="Button3" type="radio" name="Button" value="Blue"/>Blue<br/>
<input type="button" value="Submit" onclick="Get_Color()"/><br/>
<span id="Output" style="color:red"></span>
</div>
При нажатии кнопки "Submit" активируется локальная функция
JavaScript с именем Get_Color(). Сценарий проверяет каждую из
492

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

кнопок, чтобы выяснить, какая из них включена, и вывести значение
этой кнопки.

Флажки
Флажки, как и радио кнопки, предоставляют пользователю
возможность выбора. Однако в случае ряда флажков варианты выбора
не являются взаимно исключающими, пользователь может выбирать
один или несколько вариантов. Для отмеченных флажков в боксе
появляется значок "галочки". Невыбранные флажки остаются пустыми.
Множество флажков показано ниже.

Рис. 11.15. Множество флажков

Тег <input type="checkbox"/>
Общий формат кодирования флажка похож на формат для радио кнопки.
Для каждого флажка требуется тег <input type="checkbox"/>.
<input type="checkbox"
id="id"
name="name"
value="text"
checked="checked"
/>
Листинг 11.22. Общий формат тега <input type="checkbox"/>

493

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Тег <input type="checkbox"/> только выводит флажок. Если
нужно задать для флажка метку, необходимо добавить текст перед или
после тега, чтобы вывести его слева или справа от флажка.

Атрибут id
Для флажка можно задать атрибут id, если необходимо
идентифицировать его для обработки в сценарии, обычно в сценарии
браузера. Иначе id не требуется.

Атрибут name
Флажкам можно задавать имена с помощью атрибута name, так что
выбранные значения могут быть связаны именами для обработки
сценарием на сервере. Как и в случае радио кнопок, все флажки в
группе могут иметь одно имя. Однако, в отличие от радио кнопок,
общее имя не делает варианты выбора взаимно исключающими. Имя
просто получает больше одного значения, если выбрано больше одного
флажка. Это создает некоторые особенности при обработке, но делать
это допустимо. Лучшим решением является задание для флажков
различных имен. Каждое имя затем связывается с различным
значением, независимо от числа поставленных пользователем флажков.
Если множество флажков включено только в обработку браузером, то
для флажков можно кодировать значения id, а не name.

Атрибут value
Аналогично случаю радио кнопки, значение, связанное с флажком,
задается в атрибуте флажка value. Когда форму отправляют для
обработки на сервер, значение связывается с именем определенного
флажка. Для обработки в браузере значение связывается с id флажка.
Значения не обязаны совпадать с метками. Обычно для значений
применяют сокращенные коды, а более описательный текст
используется для меток.
494

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Атрибут checked
Флажки могут быть заданы заранее с помощью атрибута
checked="checked", задаваемого для любого желаемого
количества различных флажков. Различные настройки флажков
приведены ниже для множества, показанного выше на рисунке 11.15. В
этом примере всем флажкам присвоены различные имена, чтобы их
можно было различать во время обработки на сервере. Никакие флажки
не заданы заранее. Никакие значения id не заданы, так как эти флажки
обрабатываются сценарием на сервере, а не сценарием браузера.
What are your favorite colors?<br/>
<input type="checkbox" name="Color1" value="R"/>Red<br/>
<input type="checkbox" name="Color2" value="G"/>Green<br/>
<input type="checkbox" name="Color3" value="B"/>Blue<br/>
<input type="checkbox" name="Color4" value="Y"/>Yellow<br/>
<input type="checkbox" name="Color5" value="M"/>Maroon<br/>
<input type="checkbox" name="Color6" value="P"/>Purple<br/>
<input type="checkbox" name="Color7" value="A"/>Aqua<br/>
<input type="checkbox" name="Color8" value="T"/>Teal<br/>
Листинг 11.23. Код множества флажков

Извлечение данных из флажков
Следующий пример демонстрирует использование флажков для ввода
данных. Если выбрать любое количество флажков и щелкнуть на кнопке
"Submit", то будут выведены значения выбранных флажков.

495

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<!-- Сценарий браузера -->
<script type="text/javascript">
function Get_Colors()
{
var i
var Checkbox
var Output = document.getElementById("Output")
Output.innerHTML = "<b>You selected: </b><br/>"
for (i=1; i<=8; i++){
Checkbox = document.getElementById("Colors" + i)
if (Checkbox.checked == true) {
Output.innerHTML += Checkbox.value + "<br/>"
}
}
}
</script>
<!-- Код XHTML -->
<div>
What are your favorite colors?<br/>
<input id="Colors1" type="checkbox" value="Red"/>Red<br/>
<input id="Colors2" type="checkbox" value="Green"/>Green<br/>
<input id="Colors3" type="checkbox" value="Blue"/>Blue<br/>
<input id="Colors4" type="checkbox" value="Yellow"/>Yellow<br/>
<input id="Colors5" type="checkbox" value="Maroon"/>Maroon<br/>
<input id="Colors6" type="checkbox" value="Purple"/>Purple<br/>
496

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<input id="Colors7" type="checkbox" value="Aqua"/>Aqua<br/>
<input id="Colors8" type="checkbox" value="Teal"/>Teal<br/>
<input type="button" value="Submit" onclick="Get_Colors()"/><br/>
<span id="Output" style="color:red"></span>
</div>
В этом примере флажкам присвоены уникальные значения id, а не
имена, так как они будут обрабатываться в браузере, а не на сервере.
Когда происходит щелчок на кнопке "Submit", она активирует
локальную функцию JavaScript с именем Get_Colors(). Этот
сценарий проверяет каждый из флажков, какой из них был отмечен, и
выводит значения этих флажков.

Раскрывающиеся списки
Раскрывающийся список, или список выбора, представляет список
позиций, из которого выбирается одна или несколько позиций. При
щелчке на направленной вниз стрелке справа от списка раскрывается
весь список. Позиция выбирается при щелчке на записи.

Рис. 11.16. Раскрывающийся список

Теги <select> и <option>
Меню из вариантов выбора создается с помощью тега <select>.
Внутри этого тега находятся теги <option>, по одному для каждой
позиции списка. Общая форма тегов <select> и <option> показана
ниже.
<select
id="id"
name="name"
size="n"
497

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

multiple="multiple"
>
<option
value="text"
selected="selected"
>
Label
</option>
...
</select>
Листинг 11.24. Общая форма тегов <select> и <option>

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

Атрибут name
Раскрывающемуся списку можно присвоить имя с помощью атрибута
name, кодируемого в теге <select>. Имя списка связывается со
значением выбранной позиции для некоторых типов обработки на
сервере.

Тег <option>
Позиции для вывода в раскрывающемся списке определяют с помощью
тега <option>. Используется столько тегов, сколько имеется позиций
в списке. Метка ( label ) для варианта вводится между открывающим
и закрывающим тегами. Эта текстовая строка будет видна в списке и
498

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

будет значением по умолчанию при выборе.

Атрибут value
По умолчанию значение, связанное с вариантом раскрывающегося
списка, задается текстовой меткой, имеющейся в теге <option>.
Однако можно закодировать атрибут value, чтобы задать значение
отличное от метки. Это может быть предпочтительно, когда метки
являются длинными текстовыми строками, а нужно иметь только
сокращенные коды значений.
Код ниже показывает основные теги и атрибуты, необходимые для
создания раскрывающегося списка. Он создает список, показанный
выше на рисунке 11.16.
Choose your favorite color:<br/>
<select id="Color">
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
<option value="M">Maroon</option>
<option value="P">Purple</option>
<option value="A">Aqua</option>
<option value="T">Teal</option>
</select>
Листинг 11.25. Базовый код для раскрывающегося списка

Атрибут size
Атрибут size тега <select> указывает число позиций, которые
видны в списке. По умолчанию список выводит только одну позицию.
Если определен size, то список выводит заданное число позиций и,
если необходимо, полосу прокрутки для доступа к ним. Показанный
ниже список использует атрибут size="4" для вывода одновременно
четырех позиций.
499

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 11.17. Раскрывающийся список с четырьмя видимыми позициями

Атрибут multiple
Обычно в списке можно выбрать только одну позицию. Однако можно
выбирать одну или несколько позиций, если в теге <select> задать
атрибут multiple="multiple". Несколько позиций выбирают с
помощью метода выбора Shift+щелчок или Ctrl+щелчок.
Тег <select> следующего списка имеет атрибуты size="4" и
multiple="multiple" и допускает выбор нескольких позиций. Если
выбирается несколько позиций, то name или id этого элемента
управления ассоциируется с этой совокупностью значений, и любой
сценарий, который обрабатывает этот элемент управления, сможет
определить эти несколько выбранных значений.

Рис. 11.18. Раскрывающийся список с выбором нескольких значений

Атрибут selected
Позиции в списке могут быть предварительно выбраны с помощью
500

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

атрибута selected="selected" в соответствующем теге
<option>. Можно выбрать несколько позиций, когда для тега
<select>
задан
атрибут
multiple="multiple".
Раскрывающийся список на рисунке 11.18 имеет три предварительно
выбранные позиции ( Red, Blue, Aqua ).

Извлечение данных раскрывающегося списка
Следующий пример демонстрирует использование раскрывающегося
списка для ввода данных. Если выбрать позицию из списка и щелкнуть
на кнопке "Submit", то будет выведено значение выбранного
варианта. Отметим, что если выбор не делать, то по умолчанию
выбирается первая позиция в списке.

<!-- Сценарий браузера -->
<script type="text/javascript">
function Get_Color()
{
var DropDown = document.getElementById("Color")
var Value = DropDown.options[DropDown.selectedIndex].value
var Output = document.getElementById("Output")
Output.innerHTML = "<b>You selected: </b>" + Value + "."
}
</script>
<!-- Код XHTML -->
<div>
Choose your favorite color:
<select id="Color">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
501

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<option value="Yellow">Yellow</option>
<option value="Maroon">Maroon</option>
<option value="Purple">Purple</option>
<option value="Aqua">Aqua</option>
<option value="Teal">Teal</option>
</select>
<input type="button" value="Submit" onclick="Get_Color()"/><br/>
<span id="Output" style="color:red"></span>
</div>
Раскрывающемуся списку присвоено значение id, так как он вовлечен в
обработку браузером, а не сервером. Когда нажимается кнопка "Submit",
активируется функция JavaScript с именем Get_Color(). Этот
сценарий определяет индекс выбранной позиции (которые
пронумерованы, начиная с 0 ) и выведет его значение.

Кнопки Submit и Reset
Все формы, которые посылаются для обработки на сервер, должны
включать как минимум одну кнопку "submit" для передачи данных
формы на страницу Web, определенную в атрибуте action тега
<form>. Для передачи формы можно использовать стандартную
кнопку или графическое изображение.

Кнопка <input type="submit"/>
Кнопку передачи формы можно создать с помощью тега <input
type="submit"/>, который может выводиться в любом месте
формы. Используемый по умолчанию вид кнопки с меткой "Подача
запроса" показан ниже.

Рис. 11.19. Используемый по умолчанию вид кнопки передачи формы
Общая форма тега <input type="submit"/> для определения
502

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

кнопки передачи формы задается на листинге 11.26.
<input type="submit"
id="id"
name="name"
value="text"
/>
Листинг 11.26. Общая форма кнопки <input type="submit"/>

Атрибут id
Кнопке submit можно присвоить идентификатор id, если необходимо
идентифицировать ее для обработки сценарием браузера. Иначе id не
требуется.

Атрибут name
Кнопке submit можно присвоить имя с помощью атрибута name. Имя
требуется для некоторых типов обработки на сервере.

Атрибут value
Атрибут value задает для кнопки два вида идентификации. С одной
стороны, это значение ассоциируется с именем кнопки и указывает
сценарию на сервере, какая кнопка была нажата; с другой, это значение
используется как метка кнопки. Если атрибут value не задается, кнопка
помечается как "Submit Query" ; однако можно задать любую
текстовую строку, чтобы пометить кнопку содержательной надписью.
Обычный код и вывод кнопки submit показан ниже.
<input type="submit" name="SubmitButton" value="Submit Form"/>

503

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 11.20. Типичный код и вывод кнопки <input type="submit"/>

Тег <input type="image"/>
Альтернативой для стандартной кнопки submit является использование
графического изображения для запуска отправки формы. Например,
следующая кнопка "Go" действует идентично стандартной кнопке
submit.
<input type="image" name="SubmitButton" src="GoButton.gif"
alt="Click to Submit"/>

Рис. 11.21. Графическая кнопка submit
Графическая кнопка создается с помощью тега <input
type="image"/>, общая форма которого дана на листинге 11.27.
<input type="image"
id="id"
name="name"
src="url"
alt="text"
/>
Листинг 11.27. Общая форма кнопки <input type="image"/>

Тег применяет атрибут type="image" для указания, что это
графический элемент управления для отправки формы. Используемое
изображение задается адресом URL в атрибуте src. Можно кодировать
и другие атрибуты тега <img/>, включая alt для альтернативного
текстового описания изображения. Как и для стандартной кнопки
submit, может понадобиться присвоить name или id для
идентификации кнопки в сценариях сервера или браузера.

504

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Тег <input type="reset"/>
Для форм существует также другой тип кнопок. Можно создать кнопку
"reset", чтобы позволить пользователю очистить всю информацию
в форме либо чтобы ввести новую информацию или удалить
неправильную информацию. Используемый по умолчанию вид показан
ниже.

Рис. 11.22. Используемый по умолчанию вид кнопки сброса формы
Эта кнопка создается кодированием тега <input type="reset"/>.
Для этой кнопки можно задать name или id и заменить используемую
по умолчанию метку "Reset", задавая значение атрибута value.
Действие кнопки состоит в автоматическом сбросе формы, очищающем
все области ввода текста и возвращающем радио кнопки, флажки и
раскрывающиеся списки в их исходное состояние по умолчанию.
Следующий пример показывает использование кнопки reset. Если после
ввода текста в текстовом поле нажать кнопку "ClearForm"
(reset), то информация в текстовом поле исчезнет.

Рис. 11.23. Использование кнопки сброса формы

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

505

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 11.24. Оформленные кнопки submit и reset
<style type="text/css">
.submit {width:150px; background-color:#4682B4; color:#FFFFFF;
font-family:times new roman; font-size:14pt}
.reset {width:150px; background-color:#4682B4; color:#FFFFFF;
font-family:times new roman; font-size:14pt}
</style>
<input type="submit" name="SubmitButton" value="Submit Form" class="submit"/>
<input type="reset" name="ResetButton" value="Reset Form" class="reset"/>
Листинг 11.28. Код оформления кнопок формы submit и reset

Другие кнопки
Двумя основными типами кнопок, которые встречаются на форме,
являются кнопки submit и reset. Эти две кнопки связаны с
отправкой формы программам, которые обрабатывают данные формы.
Можно определить также другие кнопки общего назначения. Они
обычно связаны со сценариями браузера для локальной обработки форм
и других задач процедурами JavaScript, встроенными в страницу Web.

Тег <input type="button"/>
Тег <input type="button"/> используется для создания кнопок
общего назначения для вызова сценариев браузера, расположенных на
той же странице Web. Его общая форма показана ниже.
<input type="button"
id="id"
name="name"
value="text"
[onclick="script"]
506

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

/>
Листинг 11.29. Общая форма тега <input type="button"/>

Могут понадобиться значения name и id, если сценарий ссылается на
кнопку, иначе эти атрибуты можно не задавать. Атрибут value
требуется для задания метки кнопки; иначе будет выводиться кнопка без
метки.
Кнопка такого типа обычно реагирует на щелчок мыши и активирует
встроенный сценарий или вызывает функцию JavaScript для
выполнения некоторой обработки. Поэтому обычно в кнопке имеется
обработчик событий, такой, как onclick, чтобы выполнить сценарий
или вызвать функцию. Следующий пример показывает две кнопки со
встроенным кодом JavaScript для ответа на события "щелчок" мыши. В
этом коде щелчок мыши выделяет нажатую кнопку, изменяя цвет ее
текста и фона.

Рис. 11.25. Кнопки общего назначения для выполнения сценариев
<input id="Button1" type="button" value="Hilite Me"
onclick="this.style.color='white';
this.style.backgroundColor='red';
document.getElementById('Button2').style.color='';
document.getElementById('Button2').style.backgroundColor=''"/>
<input id="Button2" type="button" value="Hilite Me"
onclick="this.style.color='white';
this.style.backgroundColor='red';
document.getElementById('Button1').style.color='';
document.getElementById('Button1').style.backgroundColor=''"/>
Листинг 11.30. Код для оформления и программирования тега
<input type="button"/>

Тег <button>
Тег <button> обеспечивает универсальность в создании кнопок. Его
507

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

можно настроить как кнопку submit, как кнопку reset или как кнопку
общего назначения. Как контейнерный тег, он может охватывать любой
текст или код XHTML для вывода текста и/или графики на поверхности
кнопки. Общая форма этого тега показана ниже:
<button
type="submit|reset|button"
id="id"
name="name"
[onclick="script"]
>
...текст и теги XHTML
</button>
Листинг 11.31. Общая форма тега <button>

При определении как type="submit" или type="reset", кнопка
работает как любая другая кнопка submit или reset. При
определении как type="button", она требует, чтобы сценарий
браузера выполнил действие при щелчке мышью, и для активации
сценария необходим обработчик событий onclick.
Метка кнопки помещается между открывающим и закрывающим тегами.
Это может быть простая текстовая метка, или могут кодироваться теги
XHTML, которые задают на кнопке текст или размещают графическое
изображение.
Следующая кнопка общего назначения иллюстрирует компоновку,
использующую теги XHTML для задания графического изображения и
текста для лицевой поверхности кнопки. Кнопка активирует
встроенные операторы JavaScript для вывода и сокрытия изображения в
линейном фрейме.

508

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 11.26. Использование тега <button> для активации сценария
<style type="text/css">
button {float:left; height:100px; width:180px; border:outset 3px;
margin-right:10px}
span#Title {font-family:impact; font-size:14pt; color:#DAA520}
span#Text {font-family:verdana; font-size:10pt}
img
{width:50px; height:39px}
iframe {width:225px; height:185px; border:outset 10; margin-right:65px}
</style>
<button type="button"
onclick="
if (document.getElementById('Text').innerText == 'View Picture') {
document.getElementById('Picture').src='W-Colossus.gif'
document.getElementById('Text').innerText='Hide Picture' }
else if (document.getElementById('Text').innerText == 'Hide Picture') {
document.getElementById('Picture').src=''
document.getElementById('Text').innerText='View Picture' }"
>
<span id="Title">Colassus of Rhodes</span><br/>
<img src="T-Colossus.gif" alt="View Colossus of Rhodes"/><br/>
<span id="Text">View Picture</span>
</button>
<iframe id="Picture" scrolling="no"></iframe>
Листинг 11.32. Код для оформления и программирования тега
<button>
509

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Отметим, что выводимые на кнопке текст и изображение кодируются
между открывающим и закрывающим тегами <button> почти таким
же образом, как они кодировались бы на странице. (Примечание. Тег
<iframe> кодируется обычно с атрибутом name, который
идентифицирует его как получателя для ссылок. Так как
программируется фрейм, то для ссылок в сценарии задается id.)

Объединение элементов управления в группу и порядок
обхода
Можно визуально объединить в группу множество элементов
управления формы, размещая вокруг них рамку группы ( group box ).
Рамка группы выводит границу с меткой вокруг множества элементов
управления.

Рис. 11.27. Использование рамки группы вокруг элементов управления
формы

Теги <fieldset> и <legend>
Рамка группы создается вокруг элементов управления формы с
помощью тега <fieldset>. Рамка помечается текстом, который
задается во вложенном теге <legend>. fieldset является
линейным элементом XHTML, поэтому он должен находиться внутри
блочного тега. Общая форма двух этих тегов показана ниже.
<fieldset>
<legend>text</legend>
...элементы управления формы
</fieldset>
510

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Листинг 11.33. Общая форма тегов <fieldset> и <legend>

Пример группы нескольких fieldset показан на рисунке 11.28.

Рис. 11.28. Пример группы нескольких fieldset
Код этих fieldset показан ниже. Так как fieldset расширяется,
чтобы заполнить ширину своего контейнера, обычно нужно задавать
для них фиксированную ширину, чтобы управлять их размещением и
видом. Отметим, что все fieldset в примере имеют ширину 180
пикселей, чтобы удержать их от расширения на всю ширину
заключающего их раздела, что позволяет вывести их рядом друг с
другом; они также выровнены по вертикали по верху контейнерного
раздела. Таблицу стилей можно применять к обоим тегам
<fieldset> и <legend>, чтобы изменить их оформление.
<style type="text/css">
fieldset {width:180px; vertical-align:top}
legend {font-family:verdana; font-size:9pt; font-weight:bold; color:royalblue}
</style>
<div> <!-- Блочный контейнер для всех fieldset -->
<fieldset>
<legend>Radio Buttons:</legend>
<input type="radio" name="Radio"/>First Button<br/>
<input type="radio" name="Radio"/>Second Button<br/>
<input type="radio" name="Radio"/>Third Button<br/>
</fieldset>
<fieldset>
<legend>Checkboxes:</legend>
<input type="checkbox" name="Box1"/>First Checkbox<br/>
<input type="checkbox" name="Box2"/>Second Checkbox<br/>
511

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<input type="checkbox" name="Box3"/>Third Checkbox<br/>
<input type="checkbox" name="Box4"/>Fourth Checkbox<br/>
<input type="checkbox" name="Box5"/>Fifth Checkbox<br/>
</fieldset>
<fieldset>
<legend>Selection List:</legend>
<select size="5">
<option>First Option</option>
<option>Second Option</option>
<option>Third Option</option>
<option>Fourth Option</option>
<option>Fifth Option</option>
<option>Sixth Option</option>
<option>Seventh Option</option>
</select>
</fieldset>
</div>
Листинг 11.34. Код для объединения элементов управления в
группы с заголовками

Порядок обхода по Tab
Пользователи часто перемещаются по полям формы с помощью
клавиши tab. Порядок, в котором будут доступны поля, задается, по
умолчанию, их физическим порядком кодирования на форме XHTML.
Обычно это последовательность, в которой пользователи должны
заполнять формы - сверху вниз, слева направо.
Однако можно изменить порядок перехода по клавише tab. В следующей
форме текстовые поля были проиндексированы в обратном порядке. То
есть, перемещение по клавише tab будет происходить снизу вверх.
Можно щелкнуть в первом поле, а затем воспользоваться клавишей tab
для перемещения по другим полям, чтобы увидеть этот порядок.

512

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 11.29. Обратный порядок перемещения по форме с помощью tab
Каждому полю формы можно присвоить порядковый номер при
перемещении по tab с помощью атрибута tabindex="n". По
умолчанию номера этой последовательности будут 1, 2, 3 ... и
т.д., начиная с первого и кончая последним полем. Однако индексные
номера можно присвоить в любом порядке. Значение 0 сохраняет для
поля физический порядок перемещения по tab; отрицательное значение
полностью удаляет поле из порядка перемещения по tab.
Следующий листинг показывает код для приведенных выше текстовых
полей, перемещение по которым с помощью клавиши tab происходит в
обратном порядке.
<div>
<fieldset>
<legend>Reversed Tab Order:</legend>
1. <input type="text" tabindex="5"/><br/>
2. <input type="text" tabindex="4"/><br/>
3. <input type="text" tabindex="3"/><br/>
4. <input type="text" tabindex="2"/><br/>
5. <input type="text" tabindex="1"/><br/>
</fieldset>
</div>
Листинг 11.35.
полей формы

Код

для

задания

обратного

порядка

обхода

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Отправка формы
Важно помнить, что назначение форм состоит в сборе данных от
пользователей. Конечно, эти данные имеют некоторое дальнейшее
назначение, включающее обычно некоторую обработку информации.
Хотя сценарии на основе браузера, написанные на JavaScriptе, могут
выполнить некоторую предварительную обработку данных, основная
часть обработки происходит на сервере, используя языки
программирования на стороне сервера.
Способ выполнения обработки на сервере важен для понимания при
проектировании форм. Хотя здесь не рассматривается обработка форм,
требуется иметь общее понимание, как сервер идентифицирует
переданные ему данные формы.
Когда происходит щелчок на кнопке или изображении submit, данные
из формы упаковывается для доставки на страницу, указанную в
атрибуте action тега <form>. Когда формы передаются на сервер
Web, эта информация передается указанным методом, который может
быть get или post. Обычно данные формы передаются на сервер с
помощью метода post - это означает, что они приходят на сервер
отдельным от запроса URL потоком данных. Когда данные приходят,
они делаются доступными для страницы с адресом URL и ее сценария
обработки.

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

текст становится значением элемента управления и к нему можно
обратиться через присвоенное текстовому полю имя. Аналогично, когда
пользователь отмечает флажок или выбирает позицию из
раскрывающегося списка, значение данных, связанное с флажком или
вариантом выбора, становится доступно через имя, присвоенное этому
конкретному элементу управления.
Поэтому информация формы сводится к именам полей и связанным с
ними значениями данных, переданных пользователем. Информация
прибывает на страницу обработки как строка пар имя/значение в
формате:
fieldname1=value1&fieldname2=value2&fieldname3=value3....
Имена элементов управления и связанные с ними значения
соединяются с помощью знака равенства ( = ) и скрепляются с другими
парами имен и значений с помощью амперсандов ( & ). Одной из
первых задач обработки в сценарии является разборка этой строки
символов на отдельные имена и значения, чтобы извлечь введенные в
форму данные. После этого сценарий обрабатывает данные согласно
требуемым шагам обработки.

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

515

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 11.30. Форма для ввода данных
Элементы формы кодируются внутри табличной структуры, чтобы было
легче выравнивать метки и поля. Читатель должен в данный момент
легко понимать все элементы управления формы в следующем листинге
кода.
<form name="MyForm" action="MembershipForm.htm" method="post">
<h2>Membership Application Form</h2>
<table>
<tr>
<td>First Name: </td>
<td><input type="text" name="FirstName" size="15" maxlength="15"/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type="text" name="LastName" size="15" maxlength="15"/></td>
</tr>
516

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

<tr>
<td>Email: </td>
<td><input type="text" name="Email" size="30" maxlength="50"/></td>
</tr>
<tr>
<td>Gender: </td>
<td><input type="radio" name="Gender" value="F"/>Female
<input type="radio" name="Gender" value="M"/>Male</td>
</tr>
<tr>
<td>Major: </td>
<td><select name="Major">
<option>Web Development</option>
<option>Digital Media</option>
<option>Database Administration</option>
<option>Networking</option>
<option>Software Development</option>
<option>Systems Analysis</option>
</select></td>
</tr>
<tr>
<td>Reason for<br/>Joining: </td>
<td><textarea name="Reason" cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="SubmitButton" value="Submit Form"/></td>
</tr>
</table>
</form>
Листинг 11.36. Код формы для ввода данных

Атрибут action тега <form> имеет в качестве значения страницу
MembershipForm.htm. То есть, переданные из формы на сервер данные
передаются этой странице. Для передачи используется метод post это означает, что пары формы имя/значение посылаются отдельным
потоком данных, независимо от запроса URL. Все множество пар имя/
517

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

значение для заполненной формы будет напоминать следующее:

FirstName=Alice&Lastname=Underwood&Email=a_underwood@hotmail.com&
Gender=F&Major=Web+Development&Reason=To+meet+new+friends+and+make
+Web+pages&SubmitButton=Submit+Form
Отметим, что пробелы в строке заменяются знаком плюс ( + ). Когда
сервер получает эту строку ввода, он разбивает ее на составные
компоненты, так, чтобы связать отдельные имена и значения.
FirstName=Alice
LastName=Underwood
Email=a_underwood@hotmail.com
Gender=F
Major=Web Development
Reason=To meet new friends and make Web pages
Способ обработки этой информации получающей страницей зависит от
сценария, который находится на этой странице.

Отправка формы
Приведенная выше форма Membership была создана для отправки на
страницу, содержащую сценарий обработки. Если заполнить все поля и
щелкнуть на кнопке, то на указанный адрес будет получено сообщение
email, содержащее введенную информацию. Необходимо ввести
действующий адрес email, чтобы форма работала правильно.
Следующий листинг содержит серверный сценарий, используемый для
обработки присланной формы. Этот сценарий находится на странице,
заданной в адресе URL атрибута action тега <form>. Он получает
поток имен и значений, переданных из формы, и форматирует эту
информацию как сообщение email, которое посылается по адресу,
извлеченному из текстового поля формы Email. Этот сценарий написан
на языке Visual Basic.
<SCRIPT runat="server">

518

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Sub Submit_Form (Src As Object, Args As EventArgs)
If Email.Text <> "" Then
Dim MyEmail = New MailMessage
MyEmail.From = "dadams@mail.maconstate.edu"
MyEmail.To = Email.Text
MyEmail.Subject = "Form Submission"
MyEmail.Body = "<h3>Membership Form</h3>"
MyEmail.Body &= "<b>First Name = </b> " & FirstName.Text & "<br/>"
MyEmail.Body &= "<b>Last Name = </b> " & LastName.Text & "<br/>"
If Gender1.Checked Then
MyEmail.Body &= "<b>Gender = </b> " & Gender1.Text & "<br/>"
ElseIf Gender2.Checked Then
MyEmail.Body &= "<b>Gender = </b> " & Gender2.Text & "<br/>"
Else
MyEmail.Body &= "<b>Gender = </b>Not checked<br/><br/>"
End If
MyEmail.Body &= "<b>Major = </b> " & Major.SelectedItem.Text & "<br/>"
MyEmail.Body &= "<b>Reason = </b> " & Reason.Text & "<br/>"
MyEmail.BodyFormat = MailFormat.Html
SmtpMail.Send(MyEmail)
Message.Text = "Form posted. Check your email."
Else
Message.Text = "Missing email address. Not posted."
End If
End Sub
</SCRIPT>
Листинг 11.37. Серверный сценарий
email из введенных в форму данных

для

создания

сообщения

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Действие mailto:
Обычно информация из формы передается на сервере для обработки
сценарию, как в случае с показанной выше формой Membership. Можно,
однако, переслать информацию из формы с помощью сообщения email,
не задействуя сценарий. Этот метод использует mailto: в адрес URL
атрибута action тега <form>, задающий адрес email для получения
информации. Синтаксис действия mailto: имеет следующий вид.
<form action="mailto:email@address">
При щелчке на кнопке отправки формы, которая использует действие
mailto:, компьютер применяет программу email для получения
содержимого формы Web. В зависимости от конфигурации системы
email, это сообщение email можно будет отредактировать или оно
посылается автоматически в адрес email атрибута mailto:.
Примечание. Этот метод работает только при использовании системы
email, совместимой с протоколом POP3 (например, система
поддерживающая Microsoft Exchange Server). Он не работает в почтовой
системе с протоколом SMTP, которая обычно установлена на серверах
Web.

520

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Содержимое сайта Web
Определение предназначения сайта Web помогает также определить
тип контента для представления и его организацию. Процесс
структуризации содержимого сайта Web в чем-то похож на процесс
проектирования базы данных. Можно, фактически, считать сайт Web
базой данных информации, в составе которой - страницы контента,
организованные их отношениями связей. На языке базы данных задача
состоит в создании моделей "сущность-отношение" представляемой
информации; на языке разработки Web задача состоит в создании
моделей информации "содержимое-связь".
Хорошая формулировка назначения сайта Web поможет определить
элементы контента, подходящие для сайта. Таким же образом, как
создатели баз данных определяют основные сущности - объекты
информационного интереса - которые будут включены в базу данных,
необходимо определить основные объекты информационного интереса
сайта Web.
Например, для персонального сайта по выполнению заданий,
523

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

Иерархическая структура
524

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

525

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рис. 12.2. Линейная организация страниц Web
Для представления истории, последовательности событий во времени
или шагов процесса линейная последовательность страниц Web
работает, вероятно, лучше всего. Ссылки идут с одной страницы на
следующую
со
ссылками
возврата,
повторяющими
эту
последовательность.
Если
необходимо,
то
можно
сделать
дополнительные ссылки между начальной страницей и страницей с
деталями для перехода в произвольное место последовательности и
возврата. Тем не менее, основная структура остается линейной.

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

526

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 12.3. Смешанная организация страниц Web
Приведенные выше организационные структуры не подразумевают, что
содержание Web должно быть организовано только таким образом. Они
представлены только как концептуальные схемы; необходимо
определить лучшую структурную организацию совокупности страниц,
представляя содержимое некоторым организованным образом. Однако,
помня об этих структурах, надо подумать о структурной организации
самой информации и создать совместимую структуру связей для
представления ее наиболее четким и логически организованным
образом.

Графическая блок-схема
При разработке структурной компоновки сайта Web начинается также
раскладка его содержимого на отдельные страницы Web с указанием
между ними ссылок. Обычный способ моделирования содержимого и
ссылок между страницами Web называется графической блок-схемой
(storyboarding). Эта техника визуально отображает контент Web на
страницы Web и описывает ссылки, которые реализуют логические
отношения между темами. Графическая блок-схема заставляет
527

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

конкретизировать темы и уточнять их взаимоотношения.

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

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

Рабочие чертежи
Не нужно уделять большого внимания формату и символам,
используемым на высокоуровневой блок-схеме на рисунке 12.4. Не
существует формальных графических стандартов для блок-схем. Можно,
528

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

История Интернет и его использование
1. Введение
2. ARPANET
a. Начало ARPA
b. Назначение ARPANET
c. Распределенная коммутация пакетов (Леонард Кляйнрок)
d. Рост сети ARPA
e. TCP/IP
3. NSFNET
a. Начало и назначение
b. Роль прекращения финансирования
c. Определение Интернет
4. WWW
a. Концепция гипертекста (Тед Нельсон)
b. Начало Всемирной паутины WWW(Тим Бернерс-Ли)
c. Разработка браузера
5. Техническая конвергенция
529

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

a. Протоколы
b. Язык форматирования
6. Статистика использования Интернет
a. Использование Интернет по странам
b. Региональное распределение использования
7. Технологии Интернет
a. Скорости соединения
b. Версия браузера
c. Разрешение экрана
d. Глубина цвета
Листинг 12.1. Конспект первой главы учебника по XHTML

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

530

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 12.5. Блок-схема страницы Web
Хотя здесь это показано в виде графического изображения, блок-схема
страницы может быть чертежом от руки или компоновкой страницы на
XHTML. Можно использовать редакторы WYSIWYG, такие, как
FrontPage или Dreamweaver, для создания компоновок "на скорую руку".
Задача не в том, чтобы создать определенное содержимое, но в том,
чтобы указать некоторый начальные соображения о дизайне страницы.
Можно отметить основные заголовки, которые появятся на странице,
всю графику или таблицы, которые необходимо включить, примерную
оценку пространства страницы для различных тем и все ссылки на
внутренние страницы или внешние сайты.
Необходимо, однако, в этом месте начать укреплять основание, общий
дизайн, который будет использоваться на всех страницах, чтобы
визуально и операционально связать страницы с помощью общего
"вида и функций", которые подходят для принятия решений о проектных
решениях, таких, как поля страницы или стили параграфов, цветовые
531

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Размеры страниц
Один из основных вопросов дизайна связан с подходящим размером
страницы Web. Ширина страницы должна принимать в расчет ширину
окна браузера, которая, в свою очередь, определяется разрешением
экрана пользователя. Тремя распространенными вертикальными и
горизонтальными разрешениями экрана являются 640 x 480, 800
x 600, и 1024 x 768 пикселей.
В настоящее время наиболее распространенным разрешением экрана
является 800 x 600 пикселей. Если нет причин сделать по-другому зная, например, что популяция предполагаемых посетителей использует
другое разрешение, - то имеет смысл ориентировать страницы на экран
с этим разрешением.
Окно браузера, однако, содержит границы, панели меню, строки
состояния, полосы прокрутки и другие элементы, которые сокращают
площадь пространства, в пределах которого выводится страница Web.
Следующая таблица задает эффективные размеры окна вывода браузера
для различных разрешений экрана.
Таблица 12.1. Разрешение экрана
монитора и размеры окна браузера
Разрешение экрана Размер окна браузера
640 x 480
600 x 300
532

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

800 x 600
1024 x 768

760 x 420
955 x 600

Задание горизонтальных размеров
Браузер переносит по словам текст на странице, так что он всегда
остается в пределах полей страницы. Однако другие элементы
страницы - такие, как графические или текстовые контейнеры, которые
имеют фиксированные размеры, - могут не укладываться в эти границы.
При этом возникает проблема горизонтальной полосы прокрутки в окне
браузера, присутствие которой нежелательно на любой странице Web.
Трудно найти что-то более раздражающее или непродуктивное, чем
постоянное прокручивание страницы Web туда и обратно, чтобы
просмотреть содержимое.
Следующее окно браузера иллюстрирует проблему и решение. Первый
затененный раздел имеет заданную ширину в 760 пикселей,
подходящую для разрешения экрана 800 x 600. Однако при выводе в
браузере на экране 640 x 480 раздел выходит за поля страницы и
создает горизонтальную полосу прокрутки для просмотра его на всю
ширину.

533

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 12.6. Управление шириной страницы
Лучшим решением для задания размеров блоков текста является
использование измерений в процентах, как делается во втором разделе.
Показанная здесь ширина равна 100%. Поэтому раздел будет
расширяться только до ширины полей страницы, независимо от
разрешения экрана.
При выводе графических изображений задание горизонтального
размера немного сложнее, так как настройка ширины может искажать
картинку или вызывать пикселизацию, когда изображение
увеличивается до ширины, которая больше исходного размера. Всегда
лучше задавать размер самого изображения, чем подстраивать его с
помощью задания стилей. Выберите размер, который умещается в окне
600 x 400, чтобы гарантировать, что оно правильно будет
помещаться в любом другом окне браузера.

Задание вертикальных размеров
Очевидно, что не слишком много можно сделать в отношении
вертикальных размеров страниц Web. Они расширяются, чтобы
534

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

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

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

536

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 12.7. Цветовой круг

Рис. 12.8. Осветление (tint) и затенение (shade) тона (hue)
Первичными цветами являются красный, желтый и синий. Это
основные цвета, из которых получают все остальные. Они называются
первичными цветами, потому что эти цвета невозможно получить
смешением никаких других цветов. Они равномерно распределены по
цветовому кругу.
Вторичные цвета получают смешиванием двух первичных цветов.
Тремя вторичными цветами являются оранжевый (красный + желтый),
зеленый (желтый + синий) и фиолетовый (красный + синий).
Третичные цвета создают смешиванием первичного цвета и смежного
вторичного цвета. Шестью третичными цветами являются краснооранжевый, красно-фиолетовый, желто-зеленый, желто-оранжевый,
сине-зеленый и сине-фиолетовый.
Самое чистое значение цвета - это его тон (hue). Осветление цвета (tint)
является более светлым значением тона, получаемое добавлением
белого цвета; затенение цвета (shade) является более темным значением
тона, получаемым добавлением черного цвета.

Выбор цветов
При выборе цветов для сайта Web лучше выбирать только несколько
цветов. Было бы нежелательно переусердствовать и отвлечь внимание
от информационного содержания страницы; надо только дополнить или
выделить его. Обычно выбирается доминирующий цвет вместе с
другими цветами, которые либо похожи на него, либо контрастируют с
ним. Существуют стандартные схемы подходящих цветов, которым
можно следовать при выборе этих цветов.
537

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Монохроматическая схема цветов

Рис. 12.9. Монохроматические цвета
Монохроматическая схема цветов использует один цветовой тон с
различными значениями осветления и затенения для контраста.
Обычно выбирают более темные цвета для представления текста и
более светлые цвета для фона. Различные осветления и затенения могут
принимать значения от сильных до едва заметных, и необходимо
выбрать комбинацию, хорошо подходящую для сообщения, которые вы
собираетесь донести, и настроения, которое пытаетесь создать.
Таблица 12.2. Таблица монохроматических цветов
Раздел
Тон
Значение hex Значение RGB
Заголовок красный (темный) #CC6666
204,102,102
Столбец красный (светлый) #FAC8C8
250,200,200
Фон

красный (светлый) #F6E1E1

Схема аналогичных цветов

538

246,225,225

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 12.10. Аналогичные цвета
Схема аналогичных цветов использует смежные тона и их осветления и
затенения. Все цвета имеют общий тон, например, красно-фиолетовый,
красный и красно-оранжевый. Представление и ощущение аналогично
монохроматической схеме с более широким ассортиментом оттенков
для выбора.
Таблица 12.3. Таблица аналогичных цветов
Раздел
Тон
Значение hex Значение RGB
красно-фиолетовый
Заголовок
#C4028F
196,2,143
(темный)
Столбец красно-оранжевый (светлый) #FEB7B3
254,183,179
Фон
красный (светлый)
#FFCCCC
255,204,204

Схема дополнительных цветов

Рис. 12.11. Дополнительные цвета
539

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Схема дополнительных цветов применяет тон с противоположной
стороны цветового круга относительно доминирующего цвета. Такая
комбинация цветов создает наибольший контраст и делает оба цвета
более интенсивными и яркими, чем при использовании по одиночке.
Таблица 12.4. Таблица дополнительных цветов
Раздел
Тон
Значение hex Значение RGB
Заголовок красный (темный) #C4028F
196,2,143
Столбец зеленый (темный) #02D0BF
2,208,191
Фон
зеленый (светлый) #D0F2E0
208,242,224

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

Рис. 12.12. Раздельно-дополнительные цвета
Таблица 12.5. Таблица раздельно-дополнительных цветов
Раздел
Тон
Значение hex Значение RGB
Заголовок красный (светлый)
#C4028F
196,2,143
Столбец сине-зеленый (темный) #02D0BF
2,208,191
Фон
желто-зеленый (светлый) #D0F2E0
208,242,224
540

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Тройственная схема цветов

Рис. 12.13. Тройственные цвета
Тройственная схема цветов использует три тона, которые равномерно
удалены друг от друга на цветовом круге. Например, если
доминирующим цветом является красный, то синий и желтый оттенки
являются
тройственными
дополнениями.
Подобно
схеме
дополнительных цветов, эта схема также выделяет цвета на основе их
контраста.
Таблица 12.6. Таблица аналогичных цветов
Раздел
Тон
Значение hex Значение RGB
Заголовок красный (светлый) #FF7575
Столбец синий (светлый) #7676FB
Фон
желтый
#FFFF99

255,117,117
118,118,251
255,255,153

Ахроматическая схема цветов
Хотя они и не присутствуют на цветовом круге, не забывайте о черном
и белом цветах, а также множестве серых оттенков, которые могут
применяться для выделения или подчеркивания содержимого
страницы. Эти ахроматические тона могут создавать большой контраст
или незначительное затенение.
Таблица 12.7. Таблица ахроматических цветов
Раздел
Тон
Значение hex Значение RGB
541

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Заголовок серый 50% #818181
Столбец серый 25% #C1C1C1
Фон
серый 5% #F6F6F6

255,117,117
193,193,193
246,246,246

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

Рис. 12.14. Выбор тройственной цветовой схемы

542

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 12.15. Выбор чистых оттенков
При работе с параграфами хорошей начальной точкой является выбор
цветов на основе имеющихся на изображении. В сопровождающей
иллюстрации палитра из пяти цветов плюс черный и белый цвета
были выбраны на основе изображения. Различные оттенки красного и
синего - часть тройственной цветовой схемы - создают небольшой
контраст, необходимый между текстом и фоном. Намерение состоит в
том, чтобы немного скрыть текст и привлечь внимание к изображению.
Эти цвета были взяты с фотографии с помощью инструмента Photoshop
eyedropper.
Как общее правило, вероятно, лучше не использовать чистые тона, как
на второй иллюстрации. Чистые цвета оказываются слишком яркими,
высококонтрастными, что может создавать трудности с восприятием. В
этом случае толщина шрифта текста позволяет отвлечь внимание от
изображения к верхней и нижней частям иллюстрации. Если такой
эффект и предполагался, то отлично, хотя существуют лучшие способы
выделить текст без высококонтрастных цветов.
При наличии 16 миллионов цветов на выбор, может оказаться трудно
выбрать полдесятка цветов для страницы. Эффективным способом
выбора цветов является использование различных типов существующих
программ, применяющих цветовой круг. Например, посетив сайт
ссылка:
www.colormatch.dk
http://www.colormatch.dk,
можно
интерактивно проверить цветовые комбинации и выбрать палитру
543

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

цветов для своего сайта.

Шрифтовое оформление
Обычно страницы Web предназначены для чтения, а не для просмотра.
Это означает, что необходимо создать оформление текста,
соответствующее другим проектным решениям, которое сделает
страницы Web более разборчивыми и легкочитаемыми. Шрифтовое
оформление является взаиморасположением элементов алфавитных
символов на странице, играющее двойственную роль в визуальном
дизайне страницы и в улучшении ее читаемости.
Термин "шрифт" стал всеобъемлющим термином для обозначения
используемых на странице характеристик текста. Более точно, термин
"гарнитура шрифта" относится к единому согласованному визуальному
дизайну символов алфавита; семейство шрифтов является связанным
множеством гарнитур, включая их начертания bold, italic и
другие типографские варианты. Следующая иллюстрация показывает
часть общей терминологии, используемой при описании оформления
текста.

Рис. 12.16. Типографская терминология

Контурные шрифты

Рис. 12.17. Растровое изображение контура шрифта
544

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Большинство цифровых шрифтов - таких, как Microsoft TrueType и Adobe
PostScript, - хранятся как контуры символов с помощью математических
описаний символов. Использование этих контурных шрифтов означает,
что требуется только один контур для символа, чтобы создать все
размеры этого символа; его можно масштабировать до различных
размеров и даже перекашивать и вращать, не теряя его характерной
формы. Для вывода на экране компьютера или на печатной бумаге,
контуры необходимо "заполнить", то есть создать растровое
изображение из пиксельных точек. Программа создания растрового
изображения
выполняет
эту функцию,
как показано
на
сопровождающей иллюстрации.

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

545

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рис. 12.18. Типичные базовые шрифты, установленные на настольных
компьютерах
Конечно, большинство пользователей имеет другое программное
обеспечение, установленное в своих системах, которое поставляется с
дополнительными шрифтами для поддержки этих приложений. Эти
шрифты могут быть доступны или нет для вывода в браузере.
Шрифты можно классифицировать как имеющие "засечки" ( serif ) и
не имеющие таких засечек ( sans-serif ). "Засечки" ( serif )
являются небольшими "штрихами" на элементах символов. Это
различие можно видеть в показанных ниже шрифтах Times New Roman (
serif ) и Arial ( sans-serif ).

Рис. 12.19. Типы шрифтов serif и sans-serif
546

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Обычно один шрифт serif для текста и один sans-serif для
заголовков (или наоборот) являются хорошей комбинацией. Страница
должна содержать не более двух различных типов шрифта или четырех
различных вариаций, таких, как размер шрифта и начертание bold или
italic.

Размер шрифта
Легкость чтения зависит от размера шрифтов. Шрифт обычно измеряют
в пунктах, который равен 1/72 дюйма (на бумаге). Однако
компьютерные экраны используют пиксели, а не пункты, поэтому
программы визуализации должны преобразовывать размеры в пунктах
в пиксели, принимая в расчет разрешение экрана. По двум строкам
ниже можно видеть, что шрифт размером 12 пунктов соответствует
примерно 16-пиксельному размеру шрифта на экране.

Рис. 12.20. Размеры шрифта в пунктах и пикселях
Размер шрифта в 10 или 12 пунктов удобен для чтения большинству
людей. Если требуются меньшие размеры, то выбирайте шрифты с
большим расстоянием между символами и большим значением высоты
строчных символов. Следующие две строки выводятся шрифтами
Arial и Verdana размером 8 пунктов. Вторая строчка не такая
плотная и поэтому более разборчива.

Рис. 12.21. Сравнение типов и размеров шрифтов
В связи с этим шрифт Verdana становится популярным шрифтом Web,
так как он создан для точного отображения позиции в пикселях на
экране. Также шрифты sans-serif, такие, как Arial или
Verdana, легче читать на экране, в то время как шрифты serif,
547

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

например, Times New Roman, легче читать на бумаге.

Размер строки
Удобство чтения зависит также от высоты и длины строки. Обычно
используемый по умолчанию интервал в браузере создает удобное
расстояние между строками. Длина строки примерно в 60-80 символов
позволяет хорошо прослеживать глазами от конца одной строки до
начала следующей. Следующие строки содержат примерно по 75
символов шрифтом Verdana c размером 9 пунктов.

Рис. 12.22. Типичный размер шрифта, длина строки и межстрочный
интервал

Свободное пространство
Частой ошибкой авторов страниц является размещение слишком
большого количества материала с крошечными полями. Будет скучно и
утомительно читать текст строку за строкой от границы до границы без
перерыва. Оставляйте для полей достаточно свободного пространства и
создавайте достаточное количество заголовков и визуальных образов,
чтобы разорвать монотонность страницы.

Цвет текста
548

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Для разнообразия текста можно использовать цвет. Как и в случае с
графическими изображениями, выбирайте небольшое количество
согласованных цветов и будьте последовательны в их использовании.
Читатели обычно рассматривают цвет, как и размер текста, в качестве
визуальных указателей с логичным смыслом. Например, обычно шрифт
разного размера используют для различения уровней заголовков. Размер
шрифта предполагает некоторый тип изменения темы содержимого.
Точно так же цвет предполагает некоторое ожидаемое значение. Будьте
последовательны в цветовых сигналах, подаваемых читателю.
екоративные шрифты
Одним из способов введения нестандартных шрифтов на странице Web
является использование графических изображений отдельных букв,
таких, как символ "D" в предыдущем заголовке. Эта техника гарантирует,
что шрифт будет выводиться независимо от установленных шрифтов
посетителя и внесет на страницу разнообразие. Однако используйте
графические буквы с осторожностью, так как они увеличивают время
загрузки страницы и увеличивают риск перегрузить страницу
трудночитаемыми символами.

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

- не могут использовать клавиатуру или мышь;
- могут использовать экран только с текстовым выводом, маленький
экран или медленное соединение с Интернет;
- не могут легко понимать язык, на котором написан документ;
- могут находиться в ситуации, где их глаза, уши или руки заняты либо
им что-то мешает (например, за рулем машины, работа в громком
окружении, и т.д.);
- могут иметь более раннюю версию браузера, совершенно другой
браузер, голосовой браузер или отличающуюся операционную систему.
Разработчики Web должны рассматривать такие ситуации во время
проектирования страницы. Конечно, могут быть ситуации, когда
нецелесообразно или неразумно ограничивать дизайн по соображениям
доступности. Сайт Web, который использует малодоступные
технологии, не должен извиняться за отсутствие альтернативных
представлений, если отсутствуют возможности продублировать
получаемый результат другим образом. Существуют также вопросы
стоимости и маркетинга. Может существовать ограничение по ресурсам
для создания параллельного сайта для небольшой группы
пользователей и конкурентные убытки в связи с задержкой доступного
представления до полного завершения.
Тем не менее, поиск альтернативных представлений должен
продолжаться. В некоторых случаях существуют технические решения
проблем доступности. В других случаях существуют средства
кодирования страницы.

Вспомогательные технологии
Вспомогательные технологии предоставляют механические и
программные средства для преодоления физических или когнитивных
недостатков. Примерами являются:
- Мышь, управляемая движением глаз. Встроенная в монитор
компьютера камера сфокусирована на глазах пользователя. Курсор мыши
550

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

перемещается в то место, куда смотрит пользователь, а щелчок мыши
выполняется при моргании глаз.
- Мышь, управляемая ногами. Управление мыши ногами использует две
педали, одну - для движения курсора и другую - для щелчка мышью.
- Мышь, отслеживающая движения головы. Устройство на верху
компьютерного монитора отслеживает рефлектор, помещенный на
голове или очках пользователя. Движения головы пользователя
управляют направлением и расстоянием движения курсора.
- Сенсорно-тактильная клавиатура/мышь. Клавиатура работает при
слабейших прикосновениях указки, удерживаемой в руках или во рту, не
требуя никаких усилий для надавливания. Функция мыши работает как
стандартная мышь, но не требует усилий руки.
- Управляемый ртом джойстик. Джойстик управляет движением
курсора на экране; "втягивание" или "выдувание" удерживаемого во рту
указателя симулирует щелчок мышью.
- Сенсорный экран. Поверхность экрана, чувствительная к
прикосновениям пальцев и указки, управляет движением курсора и
активирует щелчок мыши.
- Устройства чтения экрана и текста. Программное обеспечение читает
вслух или преобразует в шрифт Брайля информацию, появляющуюся на
экране монитора, либо произносит текст, введенный с клавиатуры или
появляющийся в документах, таких, как текстовые файлы, сообщения
email или документы текстового процессора.
- Экранная лупа. Программа, увеличивающая выводимое на экране
изображение.
- Коммуникатор языка жестов. Преобразует текст или речь в видеоязык
жестов или синтезированный компьютером голос.
- Распознавание речи. Устройства и программное обеспечение для
управления компьютерами с помощью произносимых слов и фраз;
вспомогательное устройство вывода, преобразующее речь в текст без
использования карандаша и бумаги.
551

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рекомендации W3C по доступности
Консорциум WWW (W3C) создает множество Рекомендаций по
доступности содержимого Web (ссылка: http://www.w3.org/TR/WCAG10/"
- http://www.w3.org/TR/WCAG10/), как сделать содержимое Web
доступным для людей с физическими недостатками. Следуя этим
рекомендациям, разработчики содержимого могут создавать страницы,
которые будут доступны несмотря на ограничения из-за физических,
сенсорных и когнитивных недостатков. Некоторые общие рекомендации
по созданию таких страниц включают следующее.
- Разделяйте структуру и представление. Помните, что информационное
содержание страницы Web отличается и обычно отделено от ее
визуального оформления.
- Предоставляйте текстовые альтернативы для аудио- и видеоконтента.
Текст можно выводить таким образом, что он будет доступен почти
всем устройствам просмотра Web и почти всем пользователям.
- Создавайте документы, которые не полагаются на оборудование
одного типа. Страницы должны быть доступны людям без мыши, с
маленькими экранами, с экранами низкого разрешения, с черно-белыми
552

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

экранами, без экранов и только с голосовым или текстовым выводом.
W3C предоставляет четырнадцать рекомендаций с тремя уровнями
приоритета в соответствии с их влиянием на доступность. Некоторые
из этих рекомендаций относятся к технологиям или методикам, которые
не рассматриваются в этом учебнике.
Рекомендации приоритета 1 должны быть удовлетворены; иначе одна
или несколько групп пользователей не смогут получить доступ к
информации документа.
Рекомендации приоритета 2 желательно удовлетворить; иначе одна или
несколько групп пользователей будут испытывать трудности при
доступе к информации документа.
Рекомендации приоритета 3 могут быть удовлетворены; иначе одна или
несколько групп пользователей будут испытывать неудобство при
доступе к информации документа.
Следующее обсуждение суммирует эти рекомендации. Все подробности
можно найти на сайте доступности консорциума W3C.

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

элемента. Например, используйте текст alt для тега <img>. Для
сложного содержимого, где текст alt не предоставляет полного
текстового эквивалента, предоставьте ссылку на текстовое описание.
Для карт ссылок применяйте атрибут alt с тегами <area>. [Приоритет
1]
- Пока агенты пользователя не смогут автоматически читать вслух
текстовый эквивалент визуального трека, предоставляйте акустическое
описание важной информации визуального трека мультимедийного
представления. [Приоритет 1]
- Для любого представления мультимедиа с разверткой во времени
(например, фильм или анимация) синхронизируйте вместе с
представлением эквивалентные альтернативы (например, заголовки
или акустические описания визуального трека). [Приоритет 1]
- Пока агенты пользователя не станут изображать текстовые
эквиваленты для карт ссылок, предоставляйте избыточные текстовые
ссылки для каждой активной области клиентской карты ссылок.
[Приоритет 3]

Рекомендация 2. Не полагайтесь только на цвет
Проверьте, что текст и графика понятны при просмотре без цвета. Если
используется только цвет для передачи информации, то люди, не
различающие определенные цвета, и пользователи с устройствами,
которые не имеют цветных или визуальных дисплеев, не получат эту
информацию. Когда цвета фона и переднего плана слишком близки к
одному оттенку, они могут не обеспечивать достаточной контрастности
при просмотре на монохромных дисплеях или для людей с различными
недостатками восприятия цвета.
Существующие практики кодирования:
- Проверьте, что вся информация, передаваемая с помощью цвета,
доступна также без цвета, например, из текстового контекста или
разметки. [Приоритет 1]
554

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

- Проверьте, что комбинация цветов фона и переднего плана создает
достаточный контраст при просмотре для человека с недостатком
восприятия цвета или при просмотре на черно-белом экране.
[Приоритет 2]

Рекомендация 3. Правильно используйте разметку и
таблицы стилей
При разметке документов правильно и должным образом используйте
элементы XHTML - как средство структуризации информации, а не как
способ оформления. Управляйте представлением с помощью таблиц
стилей, а не с помощью атрибутов. Ненадлежащее использование
разметки ограничивает доступность.
Существующие практики кодирования:
- Когда имеется подходящий элемент языка разметки, используйте для
передачи информации разметку, а не изображение. Избегайте
использования изображений для представления текста - используйте
вместо этого текст и таблицы стилей. [Приоритет 2]
- Создавайте документы, которые соответствуют опубликованным
стандартам XHTML. [Приоритет 2]
- Используйте таблицы стилей, а не исключенные атрибуты для
управления компоновкой и представлением. [Приоритет 2]
- Используйте относительные единицы измерения (проценты), а не
абсолютные единицы (пиксели) в значениях атрибутов разметки и
значениях свойств таблицы стилей. [Приоритет 2]
- Используйте элементы заголовков для передачи структуры документа,
а не для эффектов оформления. Например, используйте H2, чтобы
указать на подраздел H1, а не в связи с различием размеров
применяемых шрифтов. [Приоритет 2]
- Правильно вкладывайте друг в друга элементы списка OL, UL и DL.
[Приоритет 2]
555

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рекомендация
4.
естественного языка

Уточняйте

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

Используйте разметку, которая облегчает произношение или
интерпретацию сокращенного или иностранного текста. Когда
разработчики контента кодируют в документе естественный язык,
синтезаторы речи и устройства с азбукой Брайля могут автоматически
переключаться на новый язык, делая документ более доступным для
многоязычных пользователей. Разметка естественного языка позволяет
также
процессорам
поиска
находить
ключевые
слова
и
идентифицировать документы на требуемом языке.
Существующие практики кодирования:
- Четко определяйте изменения естественного языка текста документа и
заголовков. Например, используйте "xml:lang" в прологах страницы.
[Приоритет 1]
- Определяйте расширение каждого сокращения или акронима в
документе, где он впервые появляется. [Приоритет 3]

Рекомендация 5. Создавайте
аккуратно трансформируются

таблицы,

которые

Проверьте, что таблицы имеют необходимую разметку, чтобы
трансформироваться браузерами доступа и другими агентами
пользователей. Таблицы должны использоваться для разметки
действительно табличной информации ("таблицы данных") и не
должны, по возможности, применяться при компоновке страниц
("таблицы компоновки"). Таблицы любого применения представляют
особые проблемы для пользователей считывателей экрана.
Существующие практики кодирования:
- Для таблиц данных определяйте заголовки строк и столбцов.
Используйте <td> для идентификации ячеек данных и <th> для
идентификации заголовков. [Приоритет 1]
556

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

- Для таблиц данных, которые имеют два или больше логических
уровней заголовков строк или столбцов, применяйте разметку для
соединения ячеек данных и ячеек заголовков. Используйте <thead>,
<tbody>, и <tfoot> для объединения в группы строк и <col/> и
<colgroup> для объединения в группы столбцов. [Приоритет 1]
- Не используйте таблицы для компоновки, если только таблица не
теряет смысл, когда представлена в линейном виде (вдоль строк и вниз
по столбцам). Иначе создайте альтернативное представление.
[Приоритет 2]
- Если таблица используется для компоновки, не применяйте никакой
структурной разметки для целей визуального форматирования - не
используйте элемент <th> для вывода содержимого ячейки (не
табличного заголовка) выровненным по центру и полужирным
шрифтом. [Приоритет 2]
- Создавайте текстовые сводки для таблиц, где это имеет смысл.
[Приоритет 3]

Рекомендация
6.
Проверьте,
что
страницы,
использующие новые технологии, трансформируются
аккуратно
Проверьте, что страницы доступны, даже когда более новые технологии
не поддерживаются или отключены. Хотя разработчиков контента
поддерживают в использовании новых технологий, они должны знать,
как сделать свои страницы работающими со старыми браузерами и для
людей, которые решили отключить такие свойства.
Существующие практики кодирования:
- Организуйте документы таким образом, чтобы они могли читаться без
таблиц стилей. Например, когда документ HTML изображается без
связанных таблиц стилей, все равно должна быть возможность
прочитать этот документ. [Приоритет 1]
-

Проверяйте,

что

эквиваленты
557

динамического

содержимого

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

обновляются при изменении динамического содержимого. [Приоритет
1]
- Проверяйте, что страницы можно использовать, когда сценарии,
апплеты или другие программные объекты отключены или не
поддерживаются. Если это невозможно, предоставьте эквивалентную
информацию на альтернативной доступной странице. [Приоритет 1]
- Проверяйте, что динамическое содержание доступно или
предоставляет
альтернативное
представление
или
страницу.
[Приоритет 2]

Рекомендация
7.
Обеспечьте
пользователю
возможность управления изменяющимся во времени
контентом
Проверьте, что движущиеся, мигающие, прокручивающиеся или
автоматически обновляемые объекты или страницы могут быть
приостановлены или остановлены вообще. Некоторые люди с
когнитивными или визуальными недостатками не могут быстро или
вообще читать движущийся текст. Движение может вызывать такое
отвлекающее влияние, что остальная страница становится нечитаемой
для людей с когнитивными недостатками. Считыватели экрана не могут
читать движущийся текст. Люди с физическими недостатками могут
оказаться неспособными двигаться достаточно быстро или аккуратно
для взаимодействия с движущимися объектами.
Существующие практики кодирования:
- Пока агенты пользователя не позволят управлять мерцанием,
избегайте использования мерцания экрана. [Приоритет 1]
- Пока агенты пользователя не позволят управлять миганием,
избегайте использования мерцания содержимого. [Приоритет 2]
- Пока агенты пользователя не позволят останавливать движущееся
содержание, избегайте на страницах движения. [Приоритет 2]
558

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рекомендация 8. Обеспечьте прямую доступность
встроенных интерфейсов пользователя
Проверьте, что интерфейс пользователя следует принципам
проектирования доступности: независимый от устройств доступ к
функциям, работа с клавиатуры, самоозвучивание и т.д. Когда
встроенный объект имеет свой "собственный интерфейс", то этот
интерфейс - как и интерфейс самого браузера - должен быть доступен.
Если интерфейс встроенного объекта нельзя сделать доступным,
должно быть предоставлено альтернативное решение доступности.
Существующие практики кодирования:
- Делайте программные элементы, такие, как сценарии,
непосредственно
доступными
или
совместимыми
со
вспомогательными технологиями [Приоритет 1, если функции важны и
не представлены другим образом, иначе Приоритет 2.]

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

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Существующие практики кодирования:
- Создавайте карты ссылок на стороне клиента вместо карт ссылок на
сервере, за исключением случаев, когда области невозможно определить
с помощью доступной геометрической формы. [Приоритет 1]
- Проверьте, что любой элемент, который имеет свой собственный
интерфейс, может действовать независимым от устройства образом.
[Приоритет 1]
- Для сценариев определяйте логические обработчики событий вместо
зависимых от устройств обработчиков событий. [Приоритет 2]
- Создавайте логическую последовательность обхода с помощью ссылок,
элементов управления формы и объектов. [Приоритет 3]
- Предоставьте клавиатурные комбинации вызова для важных ссылок,
элементов управления формы и групп элементов управления формы.
[Приоритет 3]

Рекомендация
решения

10.

Используйте

промежуточные

Используйте промежуточные решения доступности, так, чтобы
вспомогательные технологии и более старые браузеры действовали
правильно. Например, изменение текущего окна или раскрытие новых
окон может быть крайне дезориентирующим для пользователей,
которые не могут видеть, что это произошло.
Примечание. Применяйте следующие контрольные пункты, пока агенты
пользователей (включая вспомогательные технологии) не решат эти
вопросы. Эти контрольные пункты классифицируются как
"промежуточные", отмечая тем самым, что Рабочая группа по
рекомендациям контента Web (Web Content Guidelines Working Group)
считает их действительными и необходимыми для доступности Web во
время публикации этого документа. Однако Рабочая группа не ожидает,
что эти контрольные точки понадобятся в будущем, когда технологии
Web реализуют ожидаемые свойства или возможности.
560

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Существующие практики кодирования:
- Пока агенты пользователя не позволяют отключать порождаемые
окна, не позволяйте появляться всплывающим и другим окнам и не
изменяйте текущее окно, не информируя об этом пользователя.
[Приоритет 2]
- Пока агенты пользователя не поддерживают явные связи между
метками и элементами управления формы, для всех элементов
управления формы с неявно связанными метками реализуйте
правильное позиционирование метки непосредственно перед ее
элементом управления на той же строке. [Приоритет 2]
- Пока агенты пользователя (включая вспомогательные технологии) не
выводят правильно примыкающий друг к другу текст, создавайте
линейную текстовую альтернативу (на текущей странице или на другой)
для всех таблиц, которые выводят текст в параллельных столбцах с
переносом строк. [Приоритет 3]
- Если агенты пользователя обрабатывают пустые элементы
управления правильно, включайте используемые по умолчанию
символы заполнители в текстовых полях и областях. [Приоритет 3]
- Если агенты пользователя (включая вспомогательные технологии)
выводят смежные ссылки раздельно, включайте не являющиеся
ссылками печатные символы (окруженные пробелами) между
смежными ссылками. [Приоритет 3]

Рекомендация 11.
рекомендации W3C

Используйте

технологии

и

Используйте технологии W3C и следуйте рекомендациям по
доступности. Где невозможно использовать технологию W3C или где ее
использование создает материал, который преобразуется неаккуратно,
создавайте альтернативную версию содержимого, которая будет
доступна.
Существующие практики кодирования:
561

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

- Используйте технологии W3C, когда они доступны и подходят для
задачи, и
выбирайте самые последние версии, которые
поддерживаются. [Приоритет 2]
- Избегайте дублирующих средств технологий W3C . [Приоритет 2]
- Предоставляйте информацию, чтобы пользователи могли получать
документы в соответствии со своими предпочтениями (например, язык,
тип контента, и т.д.) [Приоритет 3]
- Если, применив все возможности, невозможно создать доступную
страницу, предоставьте ссылку на альтернативную страницу, которая
использует технологии W3C, является доступной, содержит
эквивалентную информацию (или функции) и обновляется так же часто,
как и недоступная (исходная) страница [Приоритет 1]

Рекомендация 12. Предоставляйте контекстную и
ориентировочную информацию
Предоставляйте контекстную и ориентировочную информацию, чтобы
помочь пользователям понять сложные страницы или элементы.
Объединение элементов и предоставление контекстной информации об
отношениях между элементами может быть полезно для всех
пользователей. Сложные отношения между частями страницы могут
быть трудны для интерпретации людям с когнитивными недостатками
и людям с недостатками зрения.
Существующие практики кодирования:
- Давайте заголовок каждому фрейму для облегчения идентификации
фреймов и навигации. [Приоритет 1]
- Описывайте назначение фреймов и связи фреймов друг с другом, если
это не очевидно из их заголовков. [Приоритет 2]
- Делите большие блоки информации на более контролируемые группы,
где это будет уместно и естественно. [Приоритет 2]
- Явно связывайте метки с их элементами управления. [Приоритет 2]
562

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Рекомендация 13. Предоставляйте четкие механизмы
навигации
Предоставляйте четкие и согласованные механизмы навигации ориентировочную информацию, навигационные панели, карты сайта и
т.д. - для увеличения вероятности, что посетитель найдет на сайте то,
что ищет. Четкие и согласованные механизмы навигации важны для
людей с когнитивными недостатками или слепотой и помогут всем
пользователям.
Существующие практики кодирования:
- Четко определяйте объект каждой ссылки. Текст ссылки должен быть
достаточно содержателен, чтобы он имел смысл при чтении из
контекста -- либо из собственного, или как части последовательности
ссылок. Текст ссылки должен также быть кратким. [Приоритет 2]
- Используйте метаданные для добавления на страницы и сайты
семантической информации. Например, укажите автора документа, тип
контента и т.д. [Приоритет 2]
- Предоставляйте информацию об общей компоновке сайта (например,
карту сайта или оглавление). [Приоритет 2]
- Используйте
[Приоритет 2]

механизмы

навигации

согласованным

образом.

- Предоставляйте навигационные панели для выделения и
предоставления доступа к навигационному механизму. [Приоритет 3]
- Объединяйте в группы связанные ссылки, идентифицируйте группу
(для агентов пользователя), и, если агенты пользователя позволяют,
предоставляйте способ обойти группу. [Приоритет 3]
- Если предоставляются функции поиска, включите различные типы
поиска для различных уровней подготовки и предпочтений. [Приоритет
3]
-

Помещайте

различимую

информацию
563

в

начале

заголовков,

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

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

Рекомендация 14. Создавайте документы четкими и
простыми
Создавайте документы четкими и простыми, чтобы их было легче
понимать. Согласованная компоновка страницы, узнаваемая графика и
легко понятный язык будут полезны всем пользователям. Это помогает
людям с когнитивными недостатками или имеющим трудности с
чтением. Проверьте, что изображения имеют текстовые эквиваленты
для людей слепых, имеющих слабое зрение или для всех пользователей,
которые не могут или решили не выводить графику.
Существующие практики кодирования:
- Используйте самый четкий и простой язык, подходящий для
содержимого сайта. [Приоритет 1]
- Дополняйте текст графическим и звуковым представлением, которое
облегчает понимание страницы. [Приоритет 3]
- Создавайте стиль представления, который
страницами. [Приоритет 3]

согласован

между

В этом учебнике невозможно дать примеры всех упомянутых выше
методов кодирования, помогающих повысить доступность страницы
Web. Однако исчерпывающее множество примеров кода XHTML
имеется на сайте Web консорциума W3C, посвященном методам
реализации рекомендаций по доступности контента Web (ссылка:
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/
564

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/).
Существует ряд сайтов Web, содержащих программное обеспечение для
тестирования страниц на соответствие рекомендациям по доступности.
Например, ссылка: bobby.watchfire.com - http://bobby.watchfire.com
позволяет ввести адрес URL страницы и получить отчет о ее
совместимости с рекомендациями W3C и другими.

Требования Раздела 508
Согласно федеральному закону агентства США, авторы должны
создавать свои сайты доступными для людей с недостатками зрения и
слуха, с ограниченной подвижностью и с другими физическими
недостатками. Раздел 508, дополнение к Акту о реабилитации 1973 г.,
требует, чтобы людям с физическими недостатками был предоставлен
доступ к имеющейся в Web правительственной информации,
сравнимый с доступом для других пользователей; Акт также
распространяется на организации, которые получают финансирование
федерального правительства.
В стандартах Раздела 508 существует шестнадцать общих правил
доступных страниц Web. Вкратце этими правилами доступных страниц
Web являются:
Текстовые теги. Для каждого нетекстового
предоставляться текстовый эквивалент.

элемента

должен

Мультимедийные представления. Для любого мультимедийного
представления
эквивалентные
альтернативы
должны
синхронизироваться с представлением.
Цвет. Страницы Web должны создаваться таким образом, чтобы вся
передаваемая цветом информация была доступна без цвета, например,
из контекста или разметки.
Удобство чтения. Документы должны быть организованы таким
образом, чтобы их можно было читать, не требуя связанной таблицы
стилей.
565

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

Серверные карты ссылок. Должны предоставляться избыточные
текстовые ссылки для каждой активной области серверной карты
ссылок.
Карты ссылок на стороне клиента. Должны предоставляться карты
ссылок на стороне клиента вместо серверных карт ссылок, за
исключением областей, которые невозможно определить с помощью
доступной геометрической формы.
Таблицы данных 1. Для таблиц данных должны быть определены
заголовки строк и столбцов.
Таблицы данных 2. Для таблиц данных, которые имеют два или
несколько логических уровней заголовков строк или столбцов, должна
использоваться разметка для соединения ячеек данных и ячеек
заголовков.
Фреймы. Фреймы должны иметь текстовые заголовки, которые
облегчают идентификацию фреймов и навигацию.
Частота мерцания. Страницы должны проектироваться таким образом,
чтобы избежать мерцания экрана с частотой менее 2 гц и более 55 гц.
Только текстовые альтернативы. Должна быть предоставлена только
текстовая страница с эквивалентной информацией или функциями,
чтобы сайт Web соответствовал требованиям этого Раздела, когда
совместимость невозможно обеспечить другим образом. Содержимое
только текстовой страницы должно обновляться всякий раз при
изменении основной страницы.
Сценарии. Когда страницы используют языки сценариев для вывода
содержимого,
или
для
создания
элементов
интерфейса,
предоставляемая сценарием информация должна определяться с
помощью функционального текста, который можно прочитать с
помощью вспомогательной технологии.
Апплеты и подключаемые модули. Когда страница Web требует, чтобы
апплет, подключаемый модуль или другое приложение были
представлены в системе клиента для интерпретации содержимого
страницы, страница должна предоставлять ссылку на подключаемый
566

Основы работы с XHTML и CSS

Д.Р. Адамс, К.С. Флойд

модуль или апплет.
Формы. Когда создаются электронные формы для заполнения онлайн,
форма должна позволять людям, использующим вспомогательные
технологии, получить доступ к информации, элементам полей, и
функциям, которые требуются для заполнения и отправки формы,
включая все направления и сигналы.
Навигационные ссылки. Должен предоставляться метод, который
позволяет пользователям пропустить повторяющиеся навигационные
ссылки.
Время. Когда требуется ответ по времени, пользователь должен быть об
этом предупрежден и ему должно быть дано достаточно времени,
чтобы сказать, что требуется дополнительное время.
Подробнее с этими рекомендациями вместе со ссылками на другие
ресурсы по совместимости с Разделом 508 можно ознакомиться на
сайте федерального правительства ссылка: www.section508.gov/ http://www.section508.gov/.
Центр обучения и технической помощи по информационным
технологиям (ITTATC - Information Technology Technical Assistance and
Training Center) является центром обмена информацией, связанной с
Разделом 508, с сайтом ссылка: www.ittatc.org - http://www.ittatc.org. Эта
организация финансируется Национальным институтом исследований
по инвалидности и реабилитации (NIDDR - National Institute on Disability
and Rehabilitation Research) и располагается в Институте технологии в
Джорджии (Georgia Institute of Technology).

567