/
Автор: Ломов Артемий
Теги: компьютерные технологии самоучитель языки программирования веб-технологии
ISBN: 5-94157-698-6
Год: 2006
Текст
I
МУЧИТЕЛЬ
HTML, CSS, СКРИПТЫ:
практика создания сайтов
Артемий Ломов
+CD
Современные веб-стандарты
Блочная верстка страниц
Комплексный подход
Динамические интерактивные
приложения
Наглядные практические
примеры
•а я ступенька карьеры настоящего веб-мастера
Артемий Ломов
HTML, CSS, СКРИПТЫ:
практика создания сайтов
Санкт-Петербург
<БХВ-Петербург»
2006
УДК 681.3.06
ББК 32.973.26-018.2
Л75
Ломов А. Ю.
Л75 HTML, CSS, скрипты: практика создания сайтов. — СПб.:
БХВ-Петербург, 2006. —416 с.: ил.
ISBN 5-94157-698-6
Рассматриваются современные веб-технологии клиентской стороны:
языки разметки HTML 4.01 и XHTML 1.x в сочетании с каскадными листа-
ми стилей CSS2, а также язык сценариев JavaScript. По мере прочтения кни-
ги складывается целостное представление о технологической цепочке соз-
дания веб-сайтов и формируется понимание актуальных тенденций разви-
тия веб-технологий. Обилие практических примеров и скриншотов делает
знакомство с материалом интересным и увлекательным. Среди примеров
имеется ряд вполне завершенных разработок, обладающих самостоятельной
практической ценностью: несколько вариантов шаблонов веб-страниц,
сверстанных при помощи блоков, небольшой законченный сайт, интерак-
тивное приложение— тест на знание HTML и др. В результате читатели
смогут самостоятельно создавать вполне работоспособные веб-сайты ин-
формационной направленности. К книге прилагается компакт-диск со всеми
примерами.
Для веб-разрабопгчиков
УДК 681.3.06
ББК 32.973.26-018.2
Группа подготовки издания:
Главный редактор
Зам. главного редактора
Зав. редакцией
Редактор
Компьютерная верстка
Корректор
Дизайн обложки
Зав. производством
Екатерина Кондукова
Евгений Рыбаков
Григорий Добин
Александр Чадное
Ольги Сергиенко
Зинаида Дмитриева
Игоря Цырульникова
Николай Тверских
Лицензия ИД № 02429 от 24.07.00. Подписано в печать 17.10.05.
Формат 70x1001/ie. Печать офсетная. Усл. печ. л. 33,54.
Тираж 3000 экз. Заказ № 1370
"БХВ-Петербург", 194354, Санкт-Петербург, ул. Есенина, 5Б.
Санитарно-эпидемиологическое заключение на продукцию
№ 77.99.02.953.Д.006421.11.04 от 11.11.2004 г. выдано Федеральной службой
по надзору в сфере защиты прав потребителей и благополучия человека.
Отпечатано с готовых диапозитивов
в ГУП "Типография "Наука"
199034, Санкт-Петербург, 9 линия, 12
ISBN 5-94157-698-6
© Ломов А. Ю., 2006
© Оформление, издательство "БХВ-Петербург", 2006
Оглавление
Введение..............................................................7
Цели и задачи этой книги..............................................8
Для кого предназначена книга..........................................9
Чему научит книга.....................................................9
Краткий экскурс по главам и приложениям..............................10
Благодарности........................................................12
ЧАСТЬ I. ТЕХНОЛОГИЧЕСКИЕ ОСНОВЫ......................................15
Глава 1. Устройство сайта............................................17
Интернет: что внутри?................................................17
Протоколы........................................................19
Эталонная модель взаимодействия открытых систем ISO OSI..........20
Стек протоколов TCP/IP...........................................24
Адресация на сетевом уровне......................................27
Система и служба доменных имен...................................30
Публикация сайта.................................................36
Идентификация ресурсов...........................................37
Всемирная паутина как прикладная служба Интернета....................40
Сервис, затмивший все............................................40
Описание сущности сайтов.............................................43
Коммерческие и некоммерческие сайты..............................43
Информационные и презентационные сайты...........................46
Сайт в действии..................................................49
Устройство веб-страницы: взгляд внутрь...............................53
Исследование исходного кода страниц..............................53
Статика и динамика...............................................56
Стадии разработки сайта..............................................58
Начало — половина дела...........................................58
Рождение и жизнь проекта.........................................59
4
Оглавление
Глава 2. Создание простейших страниц с помощью языка разметки
HTML...................................................................63
Экскурс в историю Всемирной паутины....................................63
SGML и основы теории разметки......................................63
HTML на грани кризиса..............................................65
Настоящее и будущее веб-технологий.....................................68
Построение HTML-документа..............................................70
Минимальный HTML-документ..........................................72
Время "X": создание простейшего документа с помощью XHTML..........76
С прицелом на будущее..............................................79
Структурирование данных................................................81
Заголовки..........................................................82
Абзацы.............................................................83
Принудительный разрыв строки.......................................89
Списки.............................................................90
Логическое выделение...............................................92
Гипертекстовые ссылки..................................................94
Абсолютные ссылки..................................................94
Относительные ссылки...............................................95
Ссылки на разделы одного документа.................................98
Открытие ссылок в новом окне......................................102
Вставка изображений и других объектов в веб-страницу..................103
Анатомия веб-графики..............................................105
Использование тега <object>........................................ПО
Практические примеры — простейшие веб-страницы........................112
Глава 3. Оформление веб-страниц с использованием каскадных
листов стилей.........................................................113
Назначение и возможности CSS..........................................114
Синтаксис конструкций CSS и связь листа стилей с веб-страницей........121
Селекторы, свойства и значения....................................121
Внешние и внутренние листы стилей.................................122
Внутри или снаружи — "против” и "за”..............................128
Индивидуальные правила представления контента для различных сред и
устройств вывода..................................................130
Цвет текста и фона....................................................135
Фоновое изображение...................................................139
Линейные единицы измерения в CSS..................................140
Подготовка фоновых изображений....................................143
Форматирование текстовых блоков.......................................146
Свойства шрифта...................................................147
Свойства текстового набора........................................153
Свойства списков..................................................158
Практические примеры — веб-страницы, оформленные при помощи CSS.......160
Оглавление
5
ЧАСТЬ II. ПРИМЕНЕНИЕ ВЕБ-ТЕХНОЛОГИЙ СТОРОНЫ
КЛИЕНТА ДЛЯ СОЗДАНИЯ САЙТОВ.........................................161
Глава 4. Использование блочной модели CSS2 для верстки
сложных веб-страниц.................................................163
Организация пространства страницы информационного сайта.............163
И снова о минимализме...........................................167
Оформление прямоугольных блоков средствами CSS......................169
Свойства рамок..................................................171
Поля и отступы..................................................173
Взаимное размещение нескольких блоков...............................177
Селекторы классов и уникальных элементов........................178
Линейные размеры элементов......................................180
Виды позиционирования...........................................191
Обтекаемые элементы.............................................201
Практический пример — веб-страница с горизонтально ориентированным
блоком навигации....................................................202
Практический пример — веб-страница с вертикально ориентированным
блоком навигации....................................................213
Системы навигации сайтов............................................229
Внутренняя навигация............................................231
Внешняя навигация...............................................233
Интерактивное меню навигации средствами CSS.........................234
Практический пример — завершенный сайт..............................236
Лист стилей готового сайта......................................236
Типы страниц....................................................244
Примеры к этой главе, размещенные на компакт-диске..............252
Глава 5. Таблицы в HTML.............................................253
Для чего нужны таблицы и почему об этом нужно говорить особо?.......253
Создание простой "правильной" таблицы...............................255
Оформление таблиц...................................................257
Сложные таблицы с объединением ячеек................................260
Заголовки таблиц, заголовочные ячейки, группировка столбцов и строк.263
Вложенные таблицы...................................................272
Табличная верстка макета сайта: "за" и "против".....................276
Практические примеры таблиц.........................................279
Глава 6. Формы в HTML...............................................281
Веб-формы как средство обратной связи с пользователем...............281
Наши методы.....................................................284
Основные элементы форм..........................................286
Текстовые поля ввода................................................288
6
Оглавление
Богатство выбора...................................................292
"Радиокнопки" и флажки.........................................292
Списки единственного и множественного выбора...................297
Кнопки.............................................................300
Специальные возможности веб-форм...................................302
Использование тега <label>.....................................303
Иерархические списки...........................................304
Поля ввода пароля..............................................306
Скрытые поля...................................................307
Поля для выбора файла..........................................309
Группировка элементов форм.....................................311
Оформление HTML-форм...............................................312
Практические примеры форм..........................................318
Глава 7. Создание интерактивных сайтов при помощи
языка сценариев JavaScript и динамического HTML....................319
Сценарии на стороне клиента — ключ к интерактивности...............320
Назначение и ключевые особенности JavaScript...................321
Понятие объектной модели документа и динамического HTML........323
Почему JavaScript?.............................................325
Обработчики событий................................................327
Связь скриптов с веб-страницей.....................................329
JavaScript как язык программирования...............................335
Основы синтаксиса, переменные и базовые типы данных............335
Введение в объектно-ориентированное программирование...........338
Инструменты первой необходимости...............................343
Отладка сценариев..............................................353
Практический пример — интерактивный тест на знание HTML............355
Вместо заключения .............................................368
ПРИЛОЖЕНИЯ.........................................................369
Приложение 1. Ссылки на символьные объекты, определенные
в спецификации HTML 4.01...........................................371
Приложение 2. Ключевые слова, обозначающие поименованные
цвета, предусмотренные спецификацией CSS2 и перспективными
версиями CSS.......................................................385
Приложение 3. Описание компакт-диска...............................393
Предметный указатель...............................................401
Введение
Благодаря Всемирной паутине (World Wide Web, WWW) сети Интернет пуб-
ликация практически любой информации стала в наши дни фантастически
доступной.
Так, сервисы наподобие "Народа", расположенного по адресу www.narod.ru,
декларируют возможность построить веб-сайт на основе готовых шаблонов
чуть ли не за 60 секунд. А, потратив ту же самую минуту на регистрацию на
сайте "ЖЖ" (Живой журнал) по адресу www.livejournal.com, любой желаю-
щий может открыть в Сети собственный дневник. Все это — совершенно бес-
платно и анонимно.
Потенциальная возможность заявить о себе на весь мир во всеуслышанье не
дает покоя миллионам людей — информационная лавина, обрушившаяся на
наши головы буквально в одночасье, за какой-то десяток лет более-менее ак-
тивного развития Интернета, сопоставима по своим масштабам с совокупным
информационным продуктом, выработанным человечеством за всю его ис-
торию.
Количество, однако, редко переходит в качество. Более того, как это ни пе-
чально, означенные категории почти всегда находятся между собой в вечной
конфронтации. Интернет не является исключением — ценность подавляюще-
го большинства материалов, нашедших пристанище в Сети, стремится к ну-
лю.
Праздные кустарные поделки и солидные ресурсы, способные вызвать к себе
доверие как к источникам информации, разделяет пропасть. Эти два полюса
похожи друг на друга едва ли больше, чем кораблик, сложенный из фантика
из-под конфеты, и настоящий атомный крейсер.
Серьезные сайты отличают от бесполезного хлама, которым полнится Сеть,
как минимум следующие непременные черты:
□ высокое качество информационного наполнения и грамотность его по-
дачи;
8
Введение
□ оригинальность и эстетическая привлекательность внешнего облика стра-
ниц;
□ доступность содержания сайта для максимально широкого круга пользова-
телей вне зависимости от применяемых ими типов устройств и версий
браузеров, а также от ограничений по состоянию здоровья;
□ эргономичность элементов пользовательского интерфейса сайта, обеспе-
чивающая высокую эффективность, но в то же время легкость и неприну-
жденность взаимодействия посетителя с веб-ресурсом;
□ надежность и безопасность используемых технологических решений, чет-
кая согласованность работы всех компонентов;
□ безупречная проработка всех деталей и нюансов.
Разработка подобных ресурсов — тяжкий труд и большая наука. Современ-
ные сайты почти никогда не создаются в одиночку — в реализации крупных
проектов могут быть задействованы десятки специалистов различного про-
филя. Но для работы в команде от каждого из них, несмотря на узкую спе-
циализацию, требуется глубокое и всестороннее понимание механизмов
функционирования Всемирной паутины, тесное знакомство с современными
технологиями, используемыми при создании сайтов, осведомленность об ак-
туальных тенденциях и наиболее вероятных перспективах развития Сети.
Цели и задачи этой книги
Профессии, связанные с веб-разработкой, год от года становятся все более
распространенными. Даже безнадежно отставшего от жизни обывателя сего-
дня уже не удивишь словами "веб-дизайнер" или "веб-программист"; тем не
менее хороших специалистов от этого в относительном выражении больше не
становится.
Моя книга ставит целью научить своих читателей — новичков в области веб-
разработки, но новичков увлеченных, жаждущих познать эту "кухню" изнут-
ри— создавать полнофункциональные, качественные сайты "с нуля". Не
размениваясь на типовые шаблоны, чужие готовые скрипты (сценарии) и ви-
зуальные редакторы.
Большинство знакомых мне учебников, ориентированных на новичков, к со-
жалению, грешат изобилием догматических "пошаговых инструкций", трени-
рующих лишь моторные навыки и побуждающих читателей разве что к сле-
пому копированию тех или иных приемов вслед за "гуру" без какого бы то ни
было понимания их назначения. Такой подход, однако, насквозь порочен, ибо
в большинстве случаев при переходе к решению реальных задач читатель
сталкивается с тем, что шаг в сторону от "генеральной линии", намеченной в
данной литературе, становится шагом в пропасть непонимания.
Введение
9
Своей приоритетной задачей я вижу стимулирование самостоятельного ин-
теллектуального творчества читателя. Мне бы хотелось заинтересовать, рас-
положить читателя к осмыслению и анализу концепций, изложенных в книге,
с тем, чтобы начало реальной практической деятельности, связанной с разра-
боткой веб-сайтов, не обернулось для него россыпью неприятных неожидан-
ностей.
Для кого предназначена книга
’’Плох тот солдат, который не мечтает стать генералом’’. Поэтому я ничуть не
покривлю душой, если скажу, что моя книга адресована, прежде всего, буду-
щим профессионалам на поприще веб-разработки.
Разумеется, стать профессионалом, прочитав одну книгу, невозможно. Со-
мневаюсь я и в том, что ознакомление даже с десятком толстенных фолиан-
тов может стать достаточным условием профессионализма. Полагаю, про-
фессионализм не измеряется количеством прочитанных книг, а определяется
мастерством, которое приходит с опытом (заметьте, личным опытом!) и отта-
чивается годами.
Конечно же, моя книга будет полезна и тем, кто не собирается связывать с
веб-творчеством свою профессиональную деятельность, а просто интересует-
ся вопросами создания сайтов в Интернете в порядке хобби или с какими бы
то ни было иными намерениями.
Автор предполагает, что читатель знаком с компьютерами и Интернетом на
уровне ’’продвинутого пользователя”. Во всяком случае, мне хотелось бы из-
бавить себя от необходимости разъяснять, что такое бит или байт, как создать
файл с таким-то именем, как открыть его при помощи той или иной програм-
мы или, скажем, какую роль в браузере играет меню выбора кодировки.
В то же время, для того, чтобы приступить к чтению этой книги, никаких
специальных знаний, отличающих разработчика от пользователя, не тре-
буется.
Чему научит книга
Веб-издательство — чрезвычайно широкое и разнообразное поле деятельно-
сти. Взрастить на нем свои собственные плоды могут люди любого склада —
и "физикам”, и "лирикам" вполне по силам найти здесь свою нишу.
Но, как известно, нельзя объять необъятное. Эта книга имеет большей частью
"технократический" уклон. Мы будем разбирать сайты "по винтикам" с
целью получить развернутое представление об их внутреннем устройстве.
10
Введение
’’Гуманитарным” же вопросам — скажем, художественному аспекту или про-
блемам эргономики — внимание в этой книге будет уделяться лишь постоль-
ку-поскольку, в самых важных и ответственных случаях, требующих знаком-
ства с основополагающими правилами хорошего тона, следование которым
отличает профессиональную работу от любительской.
В результате прочтения книги читатель познакомится с самыми необходи-
мыми, базовыми технологиями, которые незаменимы при реализации веб-
проектов любого назначения. После некоторой тренировки читатель сможет
самостоятельно, без посторонней помощи создавать вполне работоспособные
сайты информационного характера, осознанно подбирая те или иные техно-
логии, наиболее уместные в каждом конкретном случае.
Речь идет, главным образом, о технологиях стороны клиента (т. е., иначе го-
воря, пользовательского программного обеспечения). Вся обработка страниц,
построенных только на базе клиентских технологий, в полном объеме осуще-
ствляется браузером, и поэтому при создании подобных страниц нет нужды
использовать веб-сервер — чтобы посмотреть результат работы, вполне дос-
таточно открыть файл той или иной веб-страницы в окошке браузера с ло-
кального диска.
( Примечание
Буквально на наших глазах происходят весьма судьбоносные метаморфозы.
В сообществах "инсайдеров отрасли" стали намного больше говорить о явле-
нии, которое нынче модно именовать словом "веб-стандарты". Под этим емким
термином подразумеваются актуальные рекомендации Консорциума W3C
(VWWV Consortium), нацеленные на отказ от морально устаревших, но пока еще
доминирующих в среде разработчиков концепций построения веб-страниц.
Официальные спецификации веб-технологий можно получить с веб-сайта Кон-
сорциума www.w3.org. Веб-стандарты — весьма злободневная и неоднознач-
ная тема, порождающая вокруг себя массу дискуссий. В своей книге я, разуме-
ется, уделю этому вопросу самое пристальное внимание и постараюсь расста-
вить все точки над "i". Мы обсудим как устаревшие, так и новые,
пропагандируемые Консорциумом W3C, подходы к созданию веб-страниц, про-
анализируем каждый из них с позиций исторической подоплеки, достоинств,
недостатков (как с точки зрения пользователя, так и с точки зрения разработчи-
ка) и взаимных противоречий.
Краткий экскурс по главам и приложениям
Книга состоит из двух частей, объединяющих в общей сложности семь глав.
Часть I "Технологические основы " включает в себя три главы "общеобразова-
тельного", скажем так, толка.
Так, в главе 1 автор поставил цель сформировать у читателя целостное пред-
ставление о Всемирной паутине как одной из прикладных служб Интернета,
Введение
11
комплексно раскрыть все этапы технологической цепочки создания веб-
сайтов, привить чувство сопричастности к контексту современного состояния
веб-разработки.
В главе 2 обсуждаются базовые конструкции языка разметки гипертекста
(HyperText Markup Language, HTML), а точнее, двух его наиболее часто ис-
пользуемых спецификаций — языка HTML версии 4.01 и расширяемого язы-
ка HTML (extensible HTML, XHTML) версии 1.0. В этой главе также рас-
сматриваются первые учебные примеры. Данный подход обоснован тем, что
язык HTML является краеугольным камнем Всемирной паутины и ни один
сайт не обходится без использования этой технологии в том или ином во-
площении.
Глава 3 посвящена непременному спутнику языка HTML — каскадным лис-
там стилей (Cascading Style Sheets, CSS). Тогда как предназначение HTML
заключается главным образом в логическом структурировании данных, CSS
позволяет управлять представлением этой структурированной информации,
например, ее отображением на экране монитора или на листе бумаги при пе-
чати, определяя оформление тех или иных функциональных областей веб-
страницы в каждом конкретном случае. В основном речь будет идти о наибо-
лее актуальной в наши дни спецификации листов стилей CSS level 2, или
просто CSS2.
Часть II "Применение веб-технологий стороны клиента для создания сай-
тов" содержит в себе четыре главы. В ней автором предложено качественно
иное описание, отличающееся от первой части сугубо практическим уклоном
и максимальным приближением к реальности.
Глава 4 является центральной, наиважнейшей, кульминационной составляю-
щей книги. В данной главе рассматриваются подходы к верстке сложных
страниц с использованием наиболее актуального в настоящее время механиз-
ма, предназначенного для этих целей— блочной модели CSS2, уделяется
значительное внимание обсуждению особенностей интерпретации различны-
ми браузерами тех или иных HTML- и CSS-конструкций и сопутствующих
проблем совместимости. Среди многочисленных практических примеров,
иллюстрирующих содержание этой главы, имеется ряд вполне самоценных
разработок, в частности несколько вариантов шаблонов веб-страниц и— в
качестве финального аккорда— небольшой завершенный сайт, который
сверстан с использованием блочной модели CSS2 и учитывает все необходи-
мые правила хорошего тона.
В главе 5 читателю предстоит познакомиться с одной из сложных структур
организации данных— таблицами, предусмотренными в HTML. Таблицы
долгое время использовались (да и, чего уж там греха таить, применяются по
сей день) не по назначению в качестве средства для верстки шаблонов веб-
12
Введение
страниц. Мы постараемся взвесить все плюсы и минусы такого подхода в
сравнении с применением для тех же целей блочной модели CSS2.
Глава 6 затрагивает веб-формы — встроенные в HTML средства, которые по-
зволяют создавать на веб-страницах элементы интерфейса, предназначенные
для ввода пользователем необходимых данных и передачи их на обработку
соответствующим сценариям.
В главе 7 мы коснемся технологий, наделяющих веб-страницы элементами
интерактивности— речь пойдет, в частности, о применении для создания
сайтов динамического HTML (Dynamic HTML, DHTML) с использованием
языка сценариев JavaScript. В числе прочего, побеседуем и о том, как можно
обрабатывать значения полей веб-форм — одним из практических примеров
к данной главе станет интерактивный тест на знание HTML, созданный при
помощи JavaScript.
Книга не является сухим пересказом официальных спецификаций.
Я постарался сделать так, чтобы знакомство с материалом стало наглядным,
интересным и увлекательным. Этому способствует обилие практических
примеров, проиллюстрированных многочисленными скриншотами. Стиль
изложения в меру метафоричен и не лишен разумной толики юмора.
В каждой главе читатель найдет множество хитростей и секретов, позволяю-
щих добиться тех или иных неочевидных на первый взгляд, но полезных ре-
зультатов или эффектов, призванных облегчить разработку или сделать сайт
удобнее для пользователей.
В состав книги включены приложения, содержащие разнообразные справоч-
ные материалы, которые могут быть пригодны читателям в работе над реаль-
ными проектами, и описание компакт-диска. Также в книге приведен пред-
метный указатель.
Хотел бы обратить особое внимание читателей, что на компакт-диске, прила-
гаемом к книге, собраны полные и гарантированно работоспособные версии
всех практических примеров, которые рассмотрены на страницах этой книги.
Диск содержит удобное электронное оглавление— откройте при помощи
своего любимого браузера файл index.html, расположенный непосредственно
в корневом каталоге, и все практические примеры будут как на ладони.
Благодарности
Автор выражает искреннюю признательность основателю Международного
союза интернет-деятелей "ЕЖЕ" (ezhe.ru) — Александру Малюкову за пред-
ложение опубликовать мои мысли о веб-разработке в формате еженедельных
колонок в рамках ЕЖЕ-проекта "Информационный бум" (ezhe.ru/ib).
Введение 13
Эти колонки (именуемые "Веб-анатомия по воскресеньям с Артемием Ломо-
вым" и представленные на сайте www.web-anatomy.ru) за год своего сущест-
вования приобрели достаточную известность в кругах разработчиков, позво-
лив мне познакомиться с множеством замечательных людей. Так, в один пре-
красный день я получил письмо от заместителя главного редактора
издательства "БХВ-Петербург" Евгения Рыбакова с предложением написать
эту книгу.
Еще я говорю свое искреннее "спасибо" Алексу Экслеру (www.exler.ru) за
ценные консультации по вопросам авторского права.
Я буду несказанно рад получить от вас, уважаемые читатели, любые коммен-
тарии, вопросы и замечания, касающиеся этой книги — пожалуйста, отправ-
ляйте свои отзывы по электронной почте: artemy@lomov.ru.
ЧАСТЬ I
Технологические основы
Глава 1. Устройство сайта
Глава 2. Создание простейших страниц с помощью языка
разметки HTML
Глава 3. Оформление веб-страниц с использованием
каскадных листов стилей
ГЛАВА 1
Устройство сайта
Перефразируя известный большевистский лозунг, можно заключить: "Мы
говорим Всемирная паутина — подразумеваем Интернет; мы говорим Интер-
нет— подразумеваем Всемирная паутина".
Многие рядовые обыватели, в меру далекие от информационных технологий,
привыкли безо всякой задней мысли отождествлять Интернет и Всемирную
паутину. Мне приходилось неоднократно наблюдать неподдельное удивле-
ние в глазах людей гуманитарного склада и, в особенности, на лицах все-
знающих работников СМИ после того, как я брался разъяснить им, что на
самом-то деле речь идет о явлениях совершенно различного порядка.
Всемирная паутина — это лишь подмножество, часть, одна из многочислен-
ных прикладных служб Интернета, появившаяся на свет много позже, нежели
сам Интернет. Полагаю, мои читатели твердо знают об этом и без лишних
напоминаний, но тем не менее мне представляется полезным рассказать об
"анатомии" сети Интернет и взаимоотношений ее с самой популярной из сво-
их служб.
Интернет: что внутри?
Интернет — это глобальное международное сообщество компьютерных се-
тей, созданных и функционирующих на основе общепризнанных технологий
(которые реализуют базовые архитектурные решения и набор протоколов
стека TCP/IP) и взаимодействующих с использованием каналов разнообраз-
ных сетей связи. Для предоставления общедоступных ресурсов в Интернете
или их использования каждая компьютерная сеть должна иметь, как мини-
мум, один общий (public), глобально уникальный IP-адрес. Далее в этой главе
будет пояснено данное определение.
18
Часть I. Технологические основы
По назначению компьютерные сети подразделяются на сети ’’общего пользо-
вания” и ’’внутренние” (интранет) сети частного использования.
Компьютерные сети ’’общего пользования" в основном предназначены для
поддержки бизнес-процессов, ориентированных на предоставление услуг се-
тевых и прикладных служб сети Интернет.
К сетям интранет, использующим стандарты, технологии и программное
обеспечение (ПО) Интернета, относят домашние и корпоративные сети, на-
чиная от небольших офисных сетей до сетей масштаба предприятий, терри-
ториально охватывающих сети центральных офисов и офисов подразделений
с возможностью подключения как удаленных и мобильных пользователей,
так и деловых партнеров. Для объединения сетей центральных офисов и офи-
сов подразделений, подключения удаленных и мобильных пользователей и
деловых партнеров используются выделенные или коммутируемые каналы
связи различных сетей общего пользования, сотовых сетей и других сетей, а
защищенные соединения обеспечиваются на основе технологии виртуальной
частной сети (Virtual Private Network, VPN). Для этих целей могут также ис-
пользоваться сетевые службы Интернета. Для поддержки бизнес-процессов
организаций сети интранет могут использовать и (или) предоставлять услуги
прикладных служб Интернета (например, Всемирной паутины и электронной
почты), с обеспечением защиты от несанкционированного доступа к основ-
ным службам данных сетей.
( Примечание
Никто уже не спорит с тем, что термин Интернет можно и нужно писать по-
русски и склонять по всем правилам великого и могучего, но, тем не менее, во
взглядах на то, с какой буквы употреблять название самой большой в мире
глобальной сети, согласия не наблюдается до сих пор.
Не хочу ничего никому навязывать, но хотел бы, тем не менее, акцентировать
внимание читателей на том, что с точки зрения исторической справедливости
слово "Интернет" все же предпочтительнее употреблять с прописной буквы.
А дело вот в чем. В англоязычной литературе термин internet (со строчной бук-
вы i) относится к нескольким сетям TCP/IP, соединенных маршрутизаторами, а
под термином Internet (с прописной буквы I, как имя собственное) понимается
крупнейшая в мире сеть Интернет.
Кстати говоря, ведь и в русскоязычном лексиконе, помимо слова "сеть", обозна-
чающего какую угодно сеть, хоть рыболовную, есть и слово "Сеть" с большой
буквы, однозначно подразумевающее не что иное, как Интернет.
Коммуникационной основой построения компьютерных сетей являются тех-
нологии локальных (Local Area Network, LAN) и территориальных (Wide
Area Network, WAN) сетей. Современными технологиями локальных сетей
являются технологии коммутируемых сетей на основе коммутаторов 2, 2/3
уровней и маршрутизирующих коммутаторов, технологии виртуальных ло-
кальных сетей (VLAN), технологии Ethernet от lOOBase до lOGBase, а терри-
Глава 1. Устройство сайта 19
ториальных— технологии Frame Relay (FR, ретрансляция кадров), ATM
(Asynchronous Transfer Mode, асинхронный режим передачи), SDH (Synchro-
nous Digital Hierarchy, синхронная цифровая иерархия).
( Примечание j
Под минимальной конфигурацией компьютерной сети понимается совокупность
компьютерного оборудования и периферийных устройств с необходимым ПО,
взаимосвязанных пассивным (кабель, витая пара, оптоволоконный кабель или
радиоэфир) и активным (как правило, локальный коммутатор) коммуникацион-
ным оборудованием. Компьютерное оборудование в данной конфигурации
взаимодействует друг с другом, не прибегая к межсетевым процессам маршру-
тизации.
В зависимости от задач, стоящих перед такой сетью, может использоваться од-
на из двух технологий распределенной обработки: одноранговая (peer-to-peer),
или клиент-серверная. В одноранговой сети все компьютеры равноправны и их
обращение к ресурсам друг к другу является симметричным. В клиент-
серверной сети один или несколько компьютеров конфигурируются для предос-
тавления и поддержки общих ресурсов и выполнения определенных задач, на-
пример файл-серверов, серверов баз данных, серверов печати и т. д. Осталь-
ные компьютеры, используя общие ресурсы, выступают в качестве клиентов
определенных служб и являются рабочими станциями.
Протоколы
Взаимодействие любых компонентов (компьютеров, серверов, маршрутиза-
тов, коммутаторов, ПО и т. д.) сетей Интернет или интранет определяется
протоколами. Каждый протокол представляет собой весьма четкий и опреде-
ленный набор правил и соглашений, предписывающий, каким образом долж-
ны производиться обмен и обработка информации.
С Примечание
Подробное описание всех протоколов и других открытых спецификаций, ис-
пользуемых в Интернете, обнародуется в документах, называемых RFC
(Request For Comments, запрос для обсуждений). Они имеют сквозную нумера-
цию по хронологии создания. Эти документы можно без особого труда найти в
Сети, но проще всего сделать это на сайте Комитета по инженерным про-
блемам Интернета (Internet Engineering Task Force, IETF)— по адресу
www.ietf.org/rfc.htm I.
Результат работы сети, наблюдаемый пользователем, — это лишь вершина
айсберга. Передача полезной информации между двумя компьютерами со-
пряжена с великим множеством сокрытых от глаз пользователя сопутствую-
щих задач служебного характера, с огромной массой рутины, которая должна
выполняться четко и слаженно. Это, например, поиск программы, с которой
будет производиться обмен информацией, установка и поддержание связи,
отслеживание и восполнение потерь, вызываемых разнообразными помехами
20
Часть I. Технологические основы
и сбоями, и т. п. Понятно, что осуществлять все эти действия без использова-
ния общепринятых соглашений было бы крайне нерациональным.
Между тем, на ранних этапах компьютерные сети развивались в известной
степени стихийно. И задача обеспечения межсетевого взаимодействия, объ-
единения нескольких сетей в одну, при таком раскладе зачастую превраща-
лась в непосильную.
Постепенно мир пришел к осознанию необходимости стандартизации, кото-
рая бы облегчила труд разработчиков сетевых средств и открыла бы стимул к
массовому развитию сетей.
Эталонная модель
взаимодействия открытых систем ISO OSI
Так, в 1984 году Международная организация по стандартизации (Internatio-
nal Organization for Standardization, ISO, www.iso.org) с целью создания стан-
дартизованных возможностей информационного обмена в рамках архитекту-
ры взаимодействия открытых систем (open systems interconnection) приняла
базовую эталонную модель (basic reference model).
Основными понятиями данной модели являются открытая система, приклад-
ной процесс, область взаимодействия и физические средства соединения. Под
открытой системой в широком смысле понимается абстрактное описание
любого физического объекта, созданного на основе общепринятых специфи-
каций, будь то компьютер, вычислительная сеть, операционная система или
какое бы то ни было другое аппаратное или программное средство. Область
взаимодействия, располагаясь между основными частями прикладных про-
цессов и физическими средствами соединения, предназначена для обеспече-
ния информационного обмена между прикладными процессами.
Для поддержки прикладных процессов полная совокупность функций взаи-
модействия, выполняемых как передающими, так и принимающими откры-
тыми системами, разбивается на семь, в достаточной степени, автономных
уровней, каждый из которых реализует свой четко определенный набор задач
и функций (табл. 1.1).
Таблица 1.1. Уровни модели ISO OSI
№ п/п Название Основные задачи
7 Прикладной (application layer) Обеспечение различных форм взаимодействия при- кладных процессов
6 Представительский (presentation layer) Представление и преобразование данных, подлежа- щих передаче между прикладными процессами
Глава 1. Устройство сайта
21
Таблица 1.1 (окончание)
№ п/п Название Основные задачи
5 Сеансовый (session layer) Организация и проведение диалога между приклад- ными процессами
4 Транспортный (transport layer) Предоставление сквозных соединений (через все физические средства соединения сети) взаимодей- ствующим прикладным процессам, независимо от их типа и характера. Обеспечивает гарантированную доставку сообщений в зависимости от используемого на нижележащем сетевом уровне сервиса
3 Сетевой (network layer) Обеспечение двух видов сервиса: с установлением соединения или без установления. Адресация, мар- шрутизация и коммутация
2 Канальный (data link layer) Обеспечивает безошибочную, надежную передачу кадров через физические средства соединения
1 Физический (physical layer) Сопряжение с физическими средствами соединения. Обеспечивает передачу битового потока
Каждый уровень передающей системы логически обменивается информацией
только с соответствующим ему уровнем принимающей системы. Таким обра-
зом, мы можем говорить, например, о протоколах сетевого, транспортного
или прикладного уровня.
Здесь идет речь о так называемой горизонтальной модели взаимодействия.
Очевидно, однако, что прикладной уровень передающей системы не может
взаимодействовать с прикладным уровнем принимающей напрямую, минуя
физическую среду передачи. Подчеркиваю, мы говорим только о логическом
взаимодействии — физически между принимающей и передающей сторона-
ми циркулируют лишь абстрактные биты.
( Примечание
Этот самый битовый поток, если нам вдруг захочется его перехватить и про-
анализировать, весьма и весьма отдаленно похож на передаваемое полезное
сообщение. В канале связи в момент передачи данных присутствует избыточ-
ный, служебный трафик. Это и бесчисленные заголовки, которыми снабжаются
кадры, пакеты и сообщения; и специальные сервисные сообщения (к примеру,
подтверждения приема или извещения об ошибках); и дубли кадров или паке-
тов в случаях, если была выявлена ошибочная передача кадра либо пакет за-
терялся где-то в пути... Эта избыточность съедает солидный кусок пирога про-
пускной способности физического канала связи, но, к сожалению, от нее никуда
не скрыться — иначе сколько-либо надежная и предсказуемая работа сети бы-
ла бы невозможна.
Фактические процессы, происходящие на стороне принимающей и передаю-
щей систем, по отдельности, описывает вертикальная модель взаимодей-
ствия.
22
Часть I. Технологические основы
В вертикальной модели каждый уровень взаимодействует с двумя смежными
уровнями — вышележащим и нижележащим, предоставляя вышележащему
уровню свои услуги (сервисы) и, в свою очередь, пользуясь услугами ниже-
лежащего уровня. Эти услуги представляют собой межуровневые интер-
фейсы.
Как же происходит процесс передачи? Сообщение, подготовленное приклад-
ной программой, снабжается служебным заголовком прикладного уровня,
после чего спускается на ’’этаж" ниже — на уровень представления, где при-
водится в соответствие тому или иному формату, к примеру, подвергается
изменению кодировки кириллицы. Разумеется, и здесь к сообщению неиз-
бежно добавляется служебный заголовок — заголовок уровня представления.
Точно так же сообщение "обрастает" служебными заголовками сеансового и
транспортного уровней (это чем-то похоже на русскую матрешку).
На сетевом уровне, однако, это сообщение разбивается на части, из которых
составляются пакеты, пригодные для маршрутизации и пересылки. Пакеты
одного и того же сообщения могут следовать по разным маршрутам. Каждый
пакет, разумеется, снабжается собственным заголовком.
( Примечание
Это похоже на сортировку крупной партии продукции по стандартным
20-футовым контейнерам, которые удобно перевозить и по шоссе, и по желез-
ной дороге, и по морю. Часть контейнеров крупной партии товара можно пере-
править по морю, а остатки, не уместившиеся в трюме, перевезти поездом.
Всякий грузовой контейнер маркируется индивидуальным идентификационным
номером.
На канальном уровне, однако, и пакеты дробятся на кусочки — кадры, кото-
рые, естественно, предваряются служебными заголовками своего уровня.
Размер и формат кадра диктуется особенностями физической среды переда-
чи, использующейся в той или иной сети.
Наконец, кадры данных поступают в физическую среду передачи в виде по-
тока бит. На стороне принимающей системы вышеописанные преобразования
происходят с точностью до наоборот— кадры, лишаясь своих заголовков,
собираются в пакеты, пакеты составляются в сообщения, после чего, по мере
продвижения к верхним уровням, первозданное сообщение очищается от
служебных заголовков, готовясь предстать перед прикладной программой в
первозданном виде.
Но не все открытые системы предназначены для реализации полной совокуп-
ности функций взаимодействия. Если физические средства соединения непо-
средственно не соединяют все передающие и принимающие открытые систе-
мы, то для их взаимодействия в архитектуре OSI предусмотрены ретрансля-
ционные открытые системы, реализующие определенный набор уровней
Глава 1. Устройство сайта
23
области взаимодействия. К таким системам отнесены мосты (bridges), мар-
шрутизаторы (routers) и шлюзы (gateways).
Связывая пару или более физических средств соединения, мост реализует
протоколы физического и канального уровней, над которыми располагаются
канальные процессы. Преобразование кадров одного протокола в формат
кадров другого протокола — основная функция канальных процессов данной
системы. Часто мосты наделяют дополнительными функциями, например
фильтрами данных, управление потоками и другими функциями.
Для организации межсетевого взаимодействия используется маршрутизатор,
реализующий протоколы физического, канального и сетевого уровней сетей
или их частей, а сетевые процессы, которые выполняют функции маршрути-
зации. Конкретное содержание функций маршрутизации зависит от типа се-
тевых протоколов, ориентированных на установление соединений (метод
виртуальных каналов) либо не ориентированных на установление соединений
(метод датаграмм).
Что касается шлюзов, то это наиболее сложные ретрансляционные системы,
выполняющие трансляцию протоколов для согласования разнородных систем
сразу на нескольких уровнях модели OSI, вплоть до работы по всему стеку
от физического до прикладного уровня.
( Примечание )
В широком смысле стек — это некая структура, устроенная по принципу "по-
следним пришел— первым ушел" (Last In — First Out, LIFO). Если вы будете
складывать монетки в высокий и узкий стакан, то получите модель стека. Вы-
тащить ту монетку, которая лежит на дне, вы не сможете до тех пор, пока по-
следовательно не извлечете все монетки, лежащие выше нее. Точно так же
данные на стороне отправителя последовательно спускаются с прикладного
уровня на физический, а на стороне получателя— последовательно поднима-
ются с физического уровня на прикладной. В сетевом оборудовании последо-
вательный подъем и спуск происходит, разумеется, в пределах от физического
уровня до того "потолка", который доступен данному конкретному устройству,
например, до сетевого уровня, если речь заходит о маршрутизаторах.
Архитектура взаимодействия ISO OSI, включающая в себя не только выше-
указанную модель, но и архитектуру безопасности, структуру управления,
принципы наименования и адресации и др., является базовой рекомендуемой
основой построения различных компьютерных сетей и сетей связи, а также
разработки необходимых для них систем. Стандарты данной архитек-
туры (ISO 7598) являются рекомендуемыми, факультативными для реали-
зации.
С Примечание
В тех или иных конкретных сетях количество уровней модели де-факто может
быть меньшим, нежели семь, поскольку в некоторых операциях (таких, напри-
24
Часть I. Технологические основы
мер, как преобразование формата данных на уровне представления) может от-
сутствовать надобность.
Собственно говоря, Интернет в силу исторических причин тоже никак нельзя
назвать безупречной реализацией данной модели.
Стек протоколов TCP/IP
Несмотря на то, что Интернет являет собой невероятный конгломерат боль-
шого количества самых разнообразных сетей, его жизнедеятельность всецело
и полностью подчинена единому иерархическому семейству протоколов,
первоначально разрабатывавшемуся под руководством Министерства оборо-
ны США для сети ARPAnet (Advanced Research Projects Agency Network, сеть
Управления перспективных исследовательских программ) и дополненному в
дальнейшем другими протоколами. Такое дополнение получило название
стека протоколов TCP/IP. Структура данного стека и ее соотношение с
уровнями эталонной модели ISO OSI приведена в табл. 1.2.
Таблица 1.2. Структура стека протоколов TCP/IP
Уровни модели ISO OSI Уровни модели TCP/IP Описание Протоколы
7 I. Прикладной уровень (application layer) Определяет прикладные протоко- лы TCP/IP и интерфейс программ со службами транспортного уров- ня, необходимый для использова- ния сети HTTP, FTP, SMTP, Telnet... TFTP, SNMP...
6
5
4 II. Транспортный уровень (transport layer) Обеспечивает управление сеан- сами связи между компьютерами. Определяет уровень служб и со- стояние подключения, используе- мые при транспортировке данных TCP UDP
3 III. Межсетевой уровень (internet layer) Упаковывает данные в IP-датаграммы, содержащие информацию об адресах источни- ка и приемника. Выполняет мар- шрутизацию IP-датаграмм IP, ARP, RARP, ICMP, IGMP, RIP, OSPF...
2 IV. Уровень сете- вого интерфейса (network interface layer) Определяет средства и принципы физической передачи данных по сети, включая преобразование битов данных в электрические или другие сигналы аппаратными уст- ройствами, непосредственно под- ключенными к среде передачи, такой как коаксиальный кабель, оптоволокно или витая пара Ethernet, Token Ring, FDDI, X.25, SLIP, PPP...
1
Глава 1. Устройство сайта
25
Следует заметить, что отображение четырехуровневой модели стека прото-
колов TCP/IP на семиуровневую эталонную модель OSI является в значи-
тельной мере приближенным — достаточно сказать лишь о том, что протокол
IP, по сути дела, является датаграммным, а метод виртуальных каналов, ко-
торый, согласно эталонной модели ISO OSI, возможен уже на сетевом уров-
не, в рамках стека протоколов TCP/IP реализуется только на транспортном
(благодаря протоколу TCP). О подобных несоответствиях можно говорить
часами, но ничего удивительного в них нет— стек протоколов TCP/IP был
разработан раньше эталонной модели OSI, так что теперь приходится искус-
ственно "подгонять” одно к другому.
Так или иначе, самый нижний уровень данной модели, примерно соответст-
вующий физическому и канальному уровням модели OSI, отвечает за отправ-
ку и прием кадров данных в соответствии с правилами, определенными низ-
коуровневыми протоколами сетей тех или иных стандартов — Ethernet, Token
Ring и т. д. — их мы уже вспоминали. К этому же уровню относятся прото-
колы, позволяющие передавать данные при помощи телефонных линий. Это
SLIP (Serial Line Internet Protocol, межсетевой протокол для последовательно-
го канала, в данный момент устаревший) и PPP (Point-to-Point Protocol, про-
токол "точка-точка”).
Функции уровня межсетевого взаимодействия с известными оговорками со-
ответствуют задачам, возлагаемым на сетевой уровень модели OSI. К этому
уровню, помимо базового протокола IP (Internet Protocol, межсетевой прото-
кол), не ориентированного на установление соединения и ненадежного про-
токола передачи датаграмм, ответственного, главным образом, за адресацию,
коммутацию и маршрутизацию пакетов, относятся протокол ARP (Address
Resolution Protocol, протокол преобразования адресов), обеспечивающий пре-
образования IP-адресов в аппаратные адреса сетевых адаптеров локальной
сети; протокол ICMP (Internet Control Message Protocol, протокол межсетевых
управляющих сообщений), использующийся для отправки управляющих со-
общений и извещений об ошибках, связанных с проблемами доставки паке-
тов; ряд протоколов маршрутизации, например RIP (Routing Information Pro-
tocol, протокол маршрутной информации) и OSPF (Open Shortest Path First,
протокол предпочтения кратчайшего пути) и т. д.
Транспортный уровень (приближенно соответствующий по функционально-
сти транспортному же уровню модели OSI) делят между собой два протоко-
ла: TCP (Transmission Control Protocol, протокол управления передачей) и
UDP (User Datagram Protocol, пользовательский протокол данных).
Протокол TCP, являясь базовым в стеке, предоставляет надежную и ориенти-
рованную на установление соединения службу доставки пакетов. Протокол
UDP обеспечивает службу датаграмм, не ориентированную на установление
26
Часть I. Технологические основы
соединения, что означает, что UDP не гарантирует ни доставку, ни правиль-
ность порядка доставки датаграмм. Как нетрудно догадаться, протокол UDP
используется в том случае, когда данные отправляются при помощи метода
датаграмм, в отсутствии предварительно организованного виртуального ка-
нала.
Наконец, прикладной уровень приведенной четырехуровневой модели, воз-
ложивший на себя в общих чертах обязанности трех высших уровней модели
OSI, представлен протоколами многочисленных служб Интернета. К ним от-
носятся HTTP (HyperText Transfer Protocol, протокол передачи гипертекста),
являющийся основой Всемирной паутины, FTP (File Transfer Protocol, прото-
кол передачи файлов), SMTP (Simple Mail Transfer Protocol, простой протокол
передачи почты), Telnet (протокол терминального доступа к ресурсам уда-
ленного компьютера) и множество других прикладных протоколов, которые я
не стал приводить в этой таблице из соображений экономии места, тем более
что к тематике нашей книги все они относятся весьма опосредованно.
Обратите внимание, что в строке вышеприведенной таблицы, соответствую-
щей прикладному уровню, например протоколы TFTP (Trivial FTP, тривиаль-
ный протокол передачи файлов) и SNMP (Simple Network Management
Protocol, простой протокол управления сетью) стоят особняком, после черты.
Эта же черта продолжается и в строке, соответствующей транспортному
уровню, разделяя TCP и UDP. Такое разбиение сделано умышленно: все вы-
шеназванные протоколы прикладного уровня, кроме TFTP, SNMP и ряда дру-
гих используют для своей работы услуги протокола транспортного уровня
TCP, и лишь TFTP, SNMP и некоторые другие довольствуются ненавязчивым
сервисом датаграммного протокола UDP.
(П риме ч а н ие
Циркуляцию данных по Интернету можно сравнить с повседневными передви-
жениями жителей большого города.
Мы выходим из дома и пешком движемся к остановке трамвая. Данные отправ-
ляются с домашнего компьютера по телефонной линии с помощью модема. Мы
садимся в трамвай. Данные достигают сети нашего провайдера и передаются
по ней с существенно большей скоростью. Но на трамвае мы доезжаем только
до метро, после чего спускаемся на станцию и садимся в вагон. Данные посту-
пают из сети провайдера в высокоскоростную опорную сеть, связывающую
страны и континенты.
В метро мы можем сделать ряд пересадок, выбрав оптимальный маршрут из
нескольких возможных (учитывая не только время и расстояние, но и загружен-
ность тех или иных линий и пересадочных узлов — по мне так всегда лучше
проехать пару-тройку лишних станций в полупустом вагоне, чем истекать потом
в забитом под завязку поезде на другой линии ради пяти минут сэкономленного
времени). И данные наши, разумеется, тоже могут следовать по различным
маршрутам в зависимости от складывающихся условий. Как уже говорилось,
Глава 1. Устройство сайта
27
пакеты одного и того же сообщения могут идти от отправителя к адресату раз-
ными путями.
Но вот, наконец, мы доехали до станции назначения. Выходим из метро — са-
димся в автобус. Данные достигли сети другого провайдера, который обслужи-
вает получателя, находящегося на противоположной стороне земного шара.
Доезжаем на автобусе до нужной остановки, выходим, идем к нужному дому
пешком. Вот она и ’’последняя миля”, связывающая машину-адресат с сетью
провайдера.
...Аналогия, конечно, чрезвычайно упрощенная, но для понимания сути межсе-
тевого взаимодействия ее вполне достаточно.
( Примечание J
Здесь можно сказать еще вот о чем. Проделывая путь от дома до работы, мы
обычно не задумываемся о вопросах организации движения трамваев, о мани-
пуляциях машиниста в кабине метропоезда или о его разговорах с линейным
диспетчером... Мы просто пользуемся транспортом и надеемся, что нас, в ко-
нечном счете, довезут до нужной остановки. Точно так же прикладные протоко-
лы, доставляющие нам свежую электронную почту или открывающие веб-
страницы в окошке браузера, пользуются услугами протоколов транспортного
уровня, проявляя глубокое безразличие к тонкостям работы последних.
Еще меньше занимают нас такие вопросы, как, например, количество электро-
двигателей в вагоне метро, их суммарная мощность или, скажем, потребляе-
мый ток в пиковом режиме. Полагаю, что и машинисту поезда все это без
большой разницы, лишь бы работало: повернул рукоятку— поезд тронулся.
Аналогично, протоколам транспортного уровня и уровня межсетевого взаимо-
действия абсолютно все равно, какой формат кадров данных используется в
конкретной сети, и как "бегают" электроны по медному кабелю.
К чему я клоню? Эта книга, если читатель еще не забыл, посвящена веб-
разработке. Для того чтобы создавать сайты, в общем случае, не обязательно
во всех нюансах представлять себе, как устроен Интернет в целом. Но опре-
деленный экскурс, который я позволил себе привести, был, полагаю, все-таки
необходим. Хотя бы для того, чтобы автор мог сказать читателю, как профес-
сионал профессионалу: мы будем работать только на прикладном уровне сте-
ка TCP/IP, и единственный протокол, который будет нас серьезно интересо-
вать — HTTP.
Прежде, однако, чем окунуться с головой в обсуждение насущных вопросов
создания сайтов, не мешало бы затронуть еще одну немаловажную ’’низко-
уровневую” тему — адресацию в Сети.
Адресация на сетевом уровне
В целях однозначной идентификации хостов (компьютеров, серверов, мар-
шрутизаторов и сетевой периферии) в сетях Интернет и интранет использует-
ся IP-адресация. IP-адрес представляет собой адрес сетевого уровня, кото-
28
Часть I. Технологические основы
рый независим от адреса канального уровня (например, от адреса сетевого
адаптера).
Он представляет собой 32-разрядное двоичное число, которое для удобства
восприятия разбито на четыре октета — поля по 8 бит. Каждый октет пре-
образуется в десятичное число в диапазоне 0—255 и отделяется точкой. Та-
кой формат называется точечно-десятичной нотацией.
К примеру, один из IP-адресов, принадлежащих Google, в точечно-
десятичном формате имеет вид 64.233.183.104, а в двоичном — 01000000 11-
101001 10110111 01101000.
Все адресное пространство, примерно 4,3 миллиарда (232) адресов, разделено
на пять классов (А, В, С, D и Е). Классы А, В и С предназначены для назна-
чения IP-адресов соответственно большим, средним и малым сетям. Класс D
зарезервирован для адресов групповой IP-рассылки, а класс Е является экспе-
риментальным.
Любой IP-адрес включает идентификатор сети и идентификатор хоста.
Идентификатор сети определяет TCP/IP-хосты, расположенные в одной сети.
У всех таких хостов должен быть один и тот же идентификатор сети (сетевой
адрес). Идентификатор хоста должен быть уникален в рамках идентификато-
ра сети.
Идентификаторы сетей и хостов в составе IP-адреса различают с помощью
маски. Каждая маска представляет собой 32-битовое число, состоящее из по-
следовательной группы единичных битов для выделения из IP-адреса иден-
тификатора сети и последовательной группы нулевых битов для выделения
идентификатора хоста.
Каждый IP-адрес должен быть глобально уникальным в межсетевой среде
Интернета или уникальным в межсетевой среде интранета.
Для автономных сетей интранет, не соединенных с Интернетом, в соответст-
вии с правилами назначения IP-адресов можно использовать любой иденти-
фикатор сети (с соответствующей маской и блоком IP-адресов) схем адреса-
ции классов А, В и С или схемы CIDR (Classless Inter-Domain Routing, бес-
классовая междоменная маршрутизация). В зависимости от конфигурации
данных сетей можно разбивать идентификатор сети на подсети.
Чтобы связать интранет с Интернетом, необходимо оперировать с адресами
трех типов: общими (public), частными (private) и производными.
Общие адреса назначаются из блока IP-адресов идентификатора сети, выде-
ленных InterNIC (Internet Network Information Center, Центр сетевой инфор-
мации Интернета) по схемам адресации классов А, В и С или CIDR. Соответ-
ствующие маршруты программируются на маршрутизаторах Интернета, так
чтобы трафик, направленный на эти адреса, мог быть доставлен по назна-
чению.
Гпава 1. Устройство сайта
29
Как правило, общие адреса назначаются маршрутизаторам и ТСР/1Р-хостам,
которые необходимо напрямую (через маршрутизатор) соединить с общедос-
тупным Интернетом для предоставления прикладных услуг, а также прокси-
серверам, брандмауэрам или трансляторам интранета. Прокси-серверы,
брандмауэры и трансляторы применяются в случае, когда некоторым TCP/IP-
хостам интранета необходим косвенный доступ к прикладным службам Ин-
тернета для их использования.
Остальным TCP/IP-хостам интранета должны быть назначены IP-адреса, не
дублирующие уже выделенные общие адреса. Для этих целей может приме-
няться адреса из частного адресного пространства (private address space) или
производные.
Частное адресное пространство определяется следующими адресными бло-
ками:
□ 10.0.0.0/8 — идентификатор класса А, допускающий IP-адреса в диапазоне
от 10.0.0.1 — 10.255.255.254 и предусматривающий 24 бита для иденти-
фикации хоста, которые могут быть использованы в любой схеме разбие-
ния на подсети в рамках частной организации;
□ 172.16.0.0/12— идентифицируется либо как блок из 16 идентификаторов
сети класса В, либо как 20-битовое частное адресное пространство, кото-
рое может быть использовано в любой схеме разбиения на подсети в рам-
ках частной организации. Сеть интранет 172.16.0.0 /12 допускает IP-адреса
в диапазоне 172.16.0.1 — 172.31.255.254;
□ 192.168.0.0/16— идентифицируется либо как блок из 256 идентификато-
ров сети класса С, либо как 16-битовое частное адресное пространство,
которое может быть использовано в любой схеме разбиения на подсети
в рамках частной организации. Сеть интранет 192.168.0.0/16 допускает
IP-адреса в диапазоне 192.168.0.1 — 192.168.255.254.
Производные адреса могут быть сформированы путем разделения на подсети
выделенного InterNIC для интранета идентификатора сети, либо использова-
ния любого идентификатора сети схем адресации классов А, В и С или схемы
CIDR.
Такие факторы, как резервирование адресов классов D и С, использование
адресов для тестирования (начиная с номера 127), ограничения, вызванные
правилами назначения адресов (например, выделение битов для групповой и
широковещательной рассылки), а также стремительный рост Интернета (ад-
реса классов А и В в настоящее время практически выделены организациям)
вызвали проблему дефицита IP-адресов при подключении новых сетей к Ин-
тернету.
Для снятия данной проблемы адресного пространства IPv4 (четвертая, акту-
альная ныне версия протокола IP) предпринято ряд мер, в частности, приме-
30
Часть I. Технологические основы
нение схемы адресации CIDR, введение частных адресов (многие организа-
ции могут использовать одно и то же адресное пространство), использование
различных схем разделения идентификаторов сетей на подсети, и другие
меры.
С Примечание )
Некоторые провайдеры идут еще дальше, предоставляя своим пользователям
вообще только частные IP-адреса, доступные исключительно в пределах про-
вайдерской сети. К ним, в отличие от общих IP-адресов, невозможно обратить-
ся извне, из любой произвольной точки Интернета. Многих рядовых пользова-
телей, которым Интернет нужен только для просмотра веб-сайтов и чтения поч-
ты, такое обслуживание вполне устраивает, однако его никак нельзя назвать
полноценным доступом к Интернету.
Текущую версию протокола IP — IPv4 —- планируется постепенно заменить
новой, IPv6, предполагающей адресацию 128-битовыми последовательностя-
ми. С внедрением IPv6 Интернет получит поистине неиссякаемый запас из
2128 ~ 3,4-1038 возможных IP-адресов. В компактной форме IPv6-адрес запи-
сывается в виде 8 групп шестнадцатеричных чисел в диапазоне от 0 до FFFF
(что соответствует числу 65 535 в десятичной форме), разделенных двоето-
чиями. Разумеется, существуют механизмы, позволяющие обеспечить со-
вместимость между протоколами IPv4 и IPv6.
Система и служба доменных имен
Протокол IP эффективно справляется с адресацией узлов в Интернете, однако
записи IP-адресов, даже "облагороженные” компактной формой, мягко гово-
ря, не слишком-то наглядны для большинства пользователей. И уж особенно,
если речь идет об 1Ру6-адресах. Людям трудно запомнить 32-битовые числа
(особенно в крупной сети), удобнее использовать для адресации осмыслен-
ные символьные имена.
Для снятия упомянутых ограничений в сети Интернет была предложена схе-
ма именования, получившая названия системы доменных имен (Domain
Name System, DNS). В основе системы доменных имен лежит иерархическое
пространство имен. При этом все пространство имен DNS представлено в
виде отдельных фрагментов, называемых доменами (domains). Домены, свя-
зываясь между собой с помощью отношений родитель-потомок, образуют
определенную иерархию. В зависимости от того, какое положение занимает
домен в этой иерархии, принято говорить об уровне домена. На любом уров-
не домен может включать в свой состав домены более низкого уровня. Начи-
ная со второго уровня, домены могут также содержать записи о хос-
тах/службах и должны быть уникальны в пределах родительского домена.
Домен, лежащий в основании иерархического пространства имен, называют
Гпава 1. Устройство сайта 31
корневым доменом (root domain). Этот домен выполняет функцию родона-
чальника всех доменов первого уровня. Фактически он является чисто фор-
мальным элементом, символизирующим иерархичность пространства домен-
ных имен. При записи доменного имени корневой домен обозначается как
пустое пространство после точки, которой оканчивается любое доменное
имя.
Домены первого уровня используются для группировки других доменов по
организационному либо географическому принципу. В случае группировки
по организационному принципу имена доменов первого уровня образуются
тремя символами латинского алфавита (com, net, org, info, biz и др.). Принад-
лежность к некоторому государству является основой группирования по ор-
ганизационному принципу. Для этого используются имена из двух символов,
представляющие собой коды стран в соответствии со стандартом ISO 3166-1
(ru — Россия, su — территория бывшего СССР, il — Израиль и т. д.). Органи-
зационные имена доменов первого уровня подразделяются на домены общего
(com, net, org, info, biz и др.) и ограниченного (gov, mil, edu, int) пользования.
( Примечание
К настоящему времени DNS-имена лишились первозданной логики. К примеру,
домен первого уровня biz был введен с той же целью, что и сот — для коммер-
ческих организаций, для бизнес-проектов. Мотивация была такова: в домене
сот заняты все домены второго уровня, являющие собой осмысленные слова.
И хотя появление домена biz позволило решить проблему недостаточности
имен, это внесло еще большую неразбериху: состоятельные в финансовом
плане компании, изначально обладавшие доменами, соответствующими своим
названиям, в домене сот, сразу скупили имена второго уровня и в домене biz.
В итоге в одних случаях одинаковые домены второго уровня сот и biz стали
принадлежать разным фирмам, а в других случаях — одной и той же, причем
вне всякой закономерности.
Домены первого уровня являются основой образования зон системы домен-
ных имен. Эти зоны служат понятийной базой организации сегментов сети
Интернет. Регистрация доменов второго уровня представляет собой процесс
внесения доменных имен в реестр соответствующих зон. Зарегистрировав
имя домена второго уровня в некоторой зоне, любая организация получает
возможность создавать собственную иерархию субдоменов для своей корпо-
ративной сети в рамках определенного сегмента сети Интернет.
Общим контролем за системой DNS и пространством IP-адресов занимается
специальная организация— Корпорация Интернета по выделению имен и
адресов (Internet Corporation for Assigned Names a Numbers, ICANN). Под-
держка доменов общего пользования осуществляется аккредитованными
ICANN компаниями (например, для доменов сот и net такой организацией
является VeriSign, www.verisign.com).
32
Часть I. Технологические основы
В связи со стремительным ростом Интернета ICANN делегировала полномо-
чия по созданию доменов второго уровня в национальных доменах соответ-
ствующим организациям. Общий контроль за зоной системы доменных имен
ru и su осуществляет РосНИИРОС (Российский научно-исследовательский
институт развития общественных сетей, www.ripn.net). С 2000 года функции
по регистрации доменов в зоне ru переданы Автономной некоммерческой
организации ’’Региональный сетевой информационный центр’’ (АНО
”РСИЦ”), более известной как RU-CENTER (www.nic.ru). Помимо RU-
CENTER, в настоящее время в России работает ряд независимых регистрато-
ров.
Чтобы проверить, свободен ли тот или иной домен, а также ознакомиться с
информацией о существующем домене, можно воспользоваться службой
whois по адресу www.nic.ru/whois (рис. 1.1 и 1.2).
33 Э «еддайти [ЕГ
.....Л................... ..........
httpJ/www.nrcru/whois/
Russian Enghsh
Домены IP-адреса ~ Статистика Инфоцентр АУКЦИОН whois I
ts------ -----ок---- компании --------------- —к доменов ---------------------
Whois Service
Для подбора доменного имени вы можете £
воспользоваться специальным сервисом или выбрать no*6op ауицион
имя на аукционе доменных имен. доменов доменов
Информация о доменах в зонах RU, SU, NET, COM, ORG, BIZ, INFO, NAME:
рОфоулД" j ilBM
Примеры: test.ru, tnydomain.com
Информация об IP-адресах:
Пример: 195,2.62.30
регистрация доменов ♦ распределение IP-адресов ♦ контакты » условия пользования услугами
©АНО "РСИЦ", 2001
Рис. 1.1. Веб-интерфейс службы whois на сайте RU-CENTER
В пространстве имен DNS домены выступают в роли контейнеров или узлов
дерева. Листьями этого дерева являются конкретные хосты либо службы,
принадлежащие тому или иному домену. Чтобы иметь возможность ссылать-
Глава 1. Устройство сайта
33
ся на хост либо службу из любой точки сети, необходимо использовать их
полное правомочное доменное имя (Fully Qualified Domain Name, FQDN). Это
имя образуется из имени хоста либо службы и имен всех доменов, находя-
щихся между хостом либо службой и корневым доменом (в терминологии эту
часть полного правомочного доменного имени принято называть DNS-суф-
фиксом).
Ф .О ® |яГhttp://www.nic.ru/whois/7domain=lomov.ru
Ф» «Setting Uv НмФге?
Информация о домене LOMOV RU (по данным WHOIS RIPN.NET).
% By submitting a query to RIPN's Whois Service
% you agree to abide by the following terms of use:
% http://www.ripn.net/about/servpol.html#3.2 (in Russian)
% http://www.ripn.net/about/en/servpol.html#3.2 (in English).
domain:
type:
nserver:
nserver:
nserver:
state:
person:
phone:
fax-no:
e-mail:
regist rar:
created:
paid-till:
source:
LOMOV.RU
CORPORATE
ns.masterhost. ru.
nsl.masterhost.ru.
ns2.masterhost. ru.
REGISTERED, DELEGATED
Artemy Y Lomov
+7 095 4120785
+7 095 4120785
artemy@lomov. ru
RUCENTER-REG-RIPN
2002.05.14
2005.05.15
TC-RIPN
Last updated on 2005.03.04 13:03:26 MSK/MSD
| Faroea
Рис. 1.2. Информация о домене, полученная при помощи сервиса whois
Проиллюстрируем сказанное примером. Запись pogoda.spb.ru. (именно так,
с точкой на конце — "в быту” ею часто пренебрегают) является полным пра-
вомочным доменным именем. В его составе ru— домен первого уровня,
pogoda — имя хоста (в данном случае являющееся доменом третьего уровня),
spb.ru. — DNS-суффикс.
Главная идея построения системы доменных имен заключается в создании
альтернативного метода адресации объектов сети. Поскольку соединение
может быть организовано только на основе IP-адресов, необходимо преду-
смотреть механизмы трансляции доменных имен в соответствующие 1Р-ад-
реса. В качестве такого механизма используется специальная служба, полу-
34
Часть I. Технологические основы
чившая название службы доменных имен (Domain Name Service, DNS). Фак-
тически эта служба представляет собой надстройку над системой 1Р-адре-
сации. В терминологии TCP/IP процесс трансляции полного доменного име-
ни в соответствующий IP-адрес называется процессом разрешения имени.
( Примечание
Обратите внимание, что аббревиатура DNS может обозначать как систему до-
менных имен (Domain Name System), так и службу доменных имен (Domain
Name Service). Однако было бы ошибочно считать, что эти два термина иден-
тичны. В первом случае речь идет о системе именования объектов, а также о
методике формирования и разрешения доменных имен. Во втором же случае
речь идет о программном обеспечении как средстве разрешения доменных
имен.
Служба DNS представляет собой распределенную базу данных, содержащую
информацию об IP-адресах и соответствующих им доменных имен. При этом
данные, образующие пространство имен DNS, не сосредоточены где-либо в
одном месте, а хранятся в виде отдельных фрагментов на многочисленных
серверах, что и позволяет говорить о базе данных DNS как о распределенной.
В терминологии DNS такие фрагменты пространства имен принято называть
зонами (zone). Зона является основным административным элементом, по-
средством которого DNS-серверы управляют процессами разрешения имен.
При этом границы зоны не определяются доменной структурой. Одна зона
может включать в себя несколько доменов, в то время как один домен может
быть распределен между несколькими зонами. Единственное соображение, из
которого нужно исходить, принимая решения о разделении пространства
имен DNS на зоны,— удобство администрирования. Можно делегировать
административные полномочия по поддержанию зоны для каждого домена
организации. В то же время в случае, если домен имеет большие размеры,
можно разбить его на зоны, распределив между несколькими DNS-серверами.
DNS-сервер может использоваться для хранения нескольких зон. Аналогич-
ным образом одну зону можно разместить на нескольких серверах. Один из
серверов выступает в качестве основного носителя зоны (primary zone), а ос-
тальные конфигурируются как дополнительные носители зоны (secondary
zone), и хранят копии соответствующих зон. В ситуации, когда основной но-
ситель зоны в силу каких-либо обстоятельств окажется недоступным, все
обязанности по разрешению имен для данной зоны возьмет на себя один из
дополнительных носителей зоны. Это позволяет обеспечить отказоустойчи-
вость системы разрешения имен.
Для обеспечения актуальности копий зоны со всеми изменениями, которые
произведены администратором или пользователем в базе данных зоны, рас-
положенной на основном сервере зоны, необходима синхронизация зон. Син-
хронизация копий зоны осуществляется путем репликации с основного носи-
Глава 1. Устройство сайта
35
теля зоны на все дополнительные серверы. Этот процесс получил название
процесса передачи зоны (transfer zone). Некоторые реализации службы DNS
позволяют передачу не всей зоны, а только произведенных изменений. Такой
режим называют инкрементальной передачей зоны. Однако использовать
этот режим можно только в том случае, когда все носители зоны поддержи-
вают его.
Отдельно стоит сказать о зоне обратного разрешения (reverse lookup zone).
Зоны данного типа используются для управления обратными доменами. Ме-
ханизм обратных доменов позволяет определять доменные имена хос-
тов/служб, основываясь на информации об их IP-адресах.
Далее, на примере рассмотрим суть процесса разрешения доменных имен.
Приложение, получая от пользователя полное доменное имя (например,
www.site.ru), не озадачивается, каким именно образом будет осуществляться
данный процесс. Все функции по организации процесса разрешения домен-
ных имен в соответствующий IP-адрес берет на себя DNS-клиент, сконфигу-
рированный на компьютере пользователя и функционирующий на уровне
прикладного интерфейса программирования (Application Programming Inter-
face, API).
Первоначально DNS-клиент пытается обнаружить соответствие в собствен-
ном локальном кэше, куда помещаются записи о доменном имени и соответ-
ствующем ему IP-адресе после каждого успешного разрешения имени. В си-
туации, когда в данном кэше не содержатся записи о требуемом хосте либо
службе, DNS-клиент обращается к предпочтительному DNS-серверу (prefer-
red DNS Server), или, в силу каких-либо причин его недоступности, к допол-
нительному DNS-серверу. Адрес этих серверов указывается при настройке
стека протоколов TCP/IP.
( Примечание
Как правило, DNS-клиент настроен на выполнение рекурсивных запросов к
предпочтительному DNS-серверу. Это означает, что данный сервер в ответ на
запрос должен возвратить либо IP-адрес, соответствующий запрашиваемому
доменному имени, либо сообщение об ошибке, если имя не может быть разре-
шено. Аналогичным образом настроены и все DNS-серверы.
После этого вся работа по разрешению имени в IP-адрес осуществляется
DNS-серверами. При этом, в зависимости от обстоятельств, в процесс разре-
шения может быть вовлечено несколько DNS-серверов. Связано это с тем,
что DNS-серверы образуют строгую иерархию, во многом обусловленную
структурой пространства имен DNS, и хранят информацию только о части
общего пространства имен.
Предпочтительный DNS-сервер просматривает собственную базу данных.
Если запись в базе не найдена, данный сервер обращается к собственному
36
Часть I. Технологические основы
кэшу имен. Только в том случае, если запись о запрашиваемом имени не най-
дена ни в базе, ни в кэше, предпочтительный DNS-сервер пытается обнару-
жить DNS-сервер, способный разрешить указанное имя. Прежде всего, этот
сервер отправляет запрос DNS-серверу корневого домена, чтобы получить IP-
адрес DNS-сервера домена первого уровня, соответствующего первому уров-
ню запрашиваемого имени. В нашем примере, это домен ru. В базе данных
этого сервера содержатся сведения об IP-адресах всех DNS-серверов, обслу-
живающих домены второго уровня, принадлежащих к домену ru (в том числе
и домен site.ru). На последнем этапе предпочтительный DNS-сервер клиента
отправляет запрос DNS-серверу домена site.ru на разрешение ресурса www и
в ответ получит IP-адрес, который возвратит DNS-клиенту.
Публикация сайта
Для большинства пользователей, желающих открыть собственный веб-сайт,
но не слишком подкованных в технических вопросах, наиболее разумное ре-
шение — доверить регистрацию домена провайдеру, чьими услугами хостин-
га планируется воспользоваться.
( Примечание
Хостингом называют размещение веб-страниц на арендованном дисковом
пространстве какого-либо сервера. Обратите внимание, что под хостингом под-
разумевается не процесс публикации веб-страниц (который можно осущест-
вить, например, путем загрузки файлов по протоколу FTP либо при помощи
веб-интерфейса), а именно аренда дискового пространства для них.
В данном случае не придется возиться с самостоятельной настройкой DNS,
да и с финансовой точки зрения это выгоднее: как правило, большинство
крупных провайдеров предоставляют один домен бесплатно при оплате хос-
тинга на полгода или год вперед. При этом нужно соблюдать единственную
предосторожность: администратором домена должен быть указан заказчик, а
не провайдер! Как это ни банально звучит, но лучше в сотый раз повторить:
не стоит покупаться на предложения сомнительных контор, какими бы при-
влекательными ни были их цены. Крупные и проверенные провайдеры, кото-
рым дороже репутация, нежели призрачная выгода от обладания правами на
лишний домен, сделают все, как нужно.
Иногда бывает необходимым зарегистрировать домен и без хостинга —
к примеру, когда сайт уже существует или же просто хочется зарезервировать
понравившееся имя на будущее, чтобы его не занял никто другой. В этом
случае целесообразно обратиться непосредственно к регистратору.
Регистрация сама по себе почти ничего не значит — она лишь закрепляет за
заказчиком право пользоваться тем или иным доменным именем в течение
определенного срока (обычно домены регистрируются на год).
Гпава 1. Устройство сайта
37
Для того чтобы домен начал функционировать, необходимо, в первую оче-
редь, разместить служебную информацию о нем на двух DNS-серверах. Для
зон ru и su обязательным условием является расположение серверов DNS в
различных IP-подсетях класса С (иными словами, по крайней мере третьи
октеты IP-адресов этих машин должны отличаться — например, 195.14.47.2 и
195.14.58.34).
Далее будем полагать, что у читателя не найдется собственных машин для
подобных нужд. В этом случае, как в старом анекдоте, возможно два выхода.
Первый— использование DNS-серверов хостинг-провайдера, а второй —
оформление соответствующей услуги, разумеется, за дополнительную плату,
у регистратора домена.
Информация о домене на DNS-сервере хранится в виде так называемого фай-
ла зоны. Обычно провайдеры обеспечивают возможность его редактирования
посредством некоего веб-интерфейса. RU-CENTER предлагает воспользо-
ваться для этих целей достаточно удобным редактором DNS-master, который
тоже использует веб-интерфейс.
Стоит отметить, что на одной физической машине может быть организовано
множество независимых виртуальных узлов с различными доменными име-
нами, но тем не менее использующих один общий (разделяемый) 1Р-адрес.
Именно такая схема (вследствие уже упомянутого нами дефицита IP-адресов)
применяется в подавляющем большинстве недорогих тарифных планов хос-
тинга, не говоря уже о бесплатных его вариантах.
Идентификация ресурсов
В соответствии с законодательной инициативой Всемирной паутины, приня-
той в 1998 году спецификацией RFC 2396, любые ресурсы сети Интернет
идентифицируются на основе URI (Uniform Resource Identifier, унифициро-
ванный идентификатор ресурсов).
Ресурсы сети Интернет можно разделить на абстрактные и физические. К аб-
страктным ресурсам относятся HTML-документы, приложения, графические
изображения, исполняемые файлы и службы, а к физическим — компьютеры
и серверы. Для обеспечения выполнения различных действий (осуществление
доступа, обновления, поиска и др.) на ресурсах сети данный идентификатор
используется в качестве адресной части ссылки.
Расширенная версия грамматики и основополагающий синтаксис URI обнов-
ляет и, в качестве подмножеств, вводит в свой состав URL (Uniform Resource
Locator, унифицированный указатель ресурса) и URN (Uniform Resource
Name, унифицированное имя ресурса). URI определяет две формы идентифи-
каторов: абсолютный (или полный) и относительный.
38
Часть I. Технологические основы
В общем, не вдаваясь в мелкие детали, абсолютный (полный) схемо-
зависимый идентификатор URI можно записать следующим образом:
<схема>:[//«имя хоста | имя службы>.<основной DNS-суффикс» |
<1Ру4-адрес>] [<:порт>]/<путь к ресурсу>?<запрос> [<#фрагмент>]
Где:
□ компонент <схема> совместно с символом двоеточия (”:”) определяет ме-
тод доступа. Хотя многие методы доступа именуются по имени протоко-
лов, доступ к ресурсам через названный протокол не является единствен-
ным;
□ два символа слэша (”//”) указывают на сетевой путь;
□ компонент «имя хоста | имя службы>.<основной DNS-суффикс» яв-
ляется полным правомочным доменным именем (FQDN);
□ символ ”|” используется для определения альтернативы, а компоненты,
заключенные в квадратные скобки (”[ ] ”), являются не обязательными;
□ компонент <путь к ресурсу>. Путь может состоять из последовательности
сегментов, разделенных символами ”/”;
□ некоторые типы URI ссылаются на место внутри ресурса. URI этого типа
заканчиваются символом после которого следует идентификатор
фрагмента.
Приведем пример широкоупотребляемых типов идентификаторов URI служб
сети Интернет:
□ http://www.math.uio.no/faq/compression-faq/partl.html— адрес ресурса
Всемирной паутины. Протокол HTTP является основным в этой службе
для передачи веб-страниц и их компонентов между серверами и браузе-
рами;
□ http://www.hmn.ru:8101/ — адрес, в котором присутствует нестандартный
номер ТСР-порта;
□ http://www.yandex.ru/yandsearch7text.E2%E5%E1-%F2%E5%F5%ED
%ЕЕ%ЕВ%ЕЕ%ЕЗ%Е8%Е8— адрес страницы выдачи поисковой сис-
темы ’’Яндекс” с закодированным поисковым запросом (”веб-технологии”)
в качестве дополнительного параметра, переданного пользователем;
□ ftp://ftp.is.co.za/rfc/rfcl808.txt— для службы FTP (File Transfer Protocol,
протокол передачи файлов). Обеспечивает поиск и пересылку файлов ме-
жду двумя, возможно, разнородными машинами в сети;
□ gopher://spinaltap.rnicro.umn.edu/00/Weather/California — для службы
Gopher. Серверы этой службы кроме текстов содержат аудио и графику,
которые можно не только пересылать, но и проигрывать (воспроизводить).
Эта служба является прямой предшественницей Всемирной паутины;
Глава 1. Устройство сайта 39
□ telnet://melvyl.ucop.edu/— для службы Telnet. Позволяет абоненту Ин-
тернета дистанционно подключаться к другим удаленным станциям и ра-
ботать с ними со своей машины, как если бы она была их удаленным тер-
миналом;
□ mailto:artemy@lomov.ru— простейший вариант единственного адреса
электронной почты;
□ mailto:artemy@lomov.ru,lomov@ezhe.ru?subject=Privet— отправка пись-
ма двум адресатам с темой ’’Privet”;
□ news:comp.infosystems.www.servers.unix — для служб телеконференций.
Идентификатор URN представляет собой регистрационное имя, администра-
тивно назначаемое из заданного пространства имен. Основным условием
данного идентификатора является глобальная уникальность и постоянство
объекта, даже в случае его перемещения или прекращения существования.
Относительные идентификаторы URL не содержат информацию о схеме. Их
’’путь” обычно ссылается на ресурс по адресу, где находится и текущий до-
кумент. Относительные URL могут содержать компонент <#фрагмент>.
Данный URL расширяется до полного URL с использованием базового URL.
К примеру, предположим, что у нас есть базовый URL http://www.acme.com
/support/intro.html. Относительный URI suppliers.html будет расширен до
полного URI http://www.acme.com/support/suppliers.html.
( Примечание
Бьюсь об заклад, что многие даже весьма опытные веб-разработчики безо вся-
кой задней мысли отождествляют понятия URI и URL, подчас даже не подозре-
вая о существовании таких категорий, как URN и URC (Uniform Resource
Characteristics). И вряд ли этих людей можно упрекнуть в некомпетентности —
лично я, к примеру, не могу припомнить случаев применения последних двух
разновидностей URI на практике, во всяком случае, в области веб-разработки.
Следует заметить, что IETF вкладывает в понятие ресурса намного более ши-
рокий смысл, чем мы делаем это в рамках данной книги. Идеи вселенской ин-
вентаризации, прослеживающиеся в разработках IETF на тему URI, подразуме-
вают, что к ресурсам могут быть отнесены, скажем, люди, компании, книги в
библиотеке и другие, подчас совершенно абстрактные объекты, которые вовсе
не должны быть органически связанными с Интернетом.
В силу сказанного в примечании, в дальнейшем нас будет интересовать лишь
такая разновидность URI, как URL. Если же в книге встретится термин URI
(например, по причине большей корректности его употребления в том или
ином контексте, нежели URL), следует иметь в виду, что по умолчанию де-
факто все равно подразумевается URL.
40
Часть I. Технологические основы
Всемирная паутина
как прикладная служба Интернета
Интернет предоставляет нам возможность пользоваться самыми разнообраз-
ными услугами информационного характера. Однако само по себе понятие
Интернета как ’’сети сетей” не дает ровным счетом никакого представления о
конкретных разновидностях этих услуг, будь то функциональное назначение,
возможности, отличительные свойства и особенности каждой из них.
Ценные услуги предоставляются пользователям не Интернетом как таковым,
а прикладными службами, использующими Интернет в качестве транспорта
для сообщений.
’’Классические” службы Интернета— электронная почта, FTP, телеконфе-
ренции Usenet— существовали, кажется, вечно... Во всяком случае, еще в
1972 г. с легкой руки Рэя Томлинсона (Ray Tomlinson), ’’отца электронной
почты”, создавшего годом ранее первую программу для пересылки сообще-
ний по распределенной сети, адреса e-mail получили привычную нам всем
сегодня форму: имя_пользователя@домен...
( Примечание
Никто вам точно не скажет, сколько именно служб имеется "на вооружении"
_ у Интернета. Службы приходят и уходят, а Интернет остается.
С появлением Всемирной паутины многие процветавшие некогда службы стали
постепенно забываться пользователями — это, например, телеконференции
Usenet или IRC (Internet Relay Chat), ибо веб-форумы и веб-чаты (соответствен-
но) де-факто вобрали в себя их функциональность. Да и файлы вполне успеш-
но можно передавать не по протоколу FTP, а по протоколу HTTP... Многие
пользователи привыкли читать почту при помощи веб-интерфейса — неофиты
же и вообще не догадываются, что это можно делать как-то иначе. А о такой эк-
зотике, как Gopher, даже "интернетчики со стажем" порой имеют весьма смут-
ное представление.
Бывают службы специализированные— скажем, рядовой пользователь, вряд
ли когда-нибудь столкнется с Telnet. Нередки случаи, когда опытные разработ-
чики проектируют весьма специфичные по назначению службы "под себя", для
собственных нужд, и пользуются такими сервисами единолично или в составе
команд, численностью едва дотягивающих до десятка человек.
Сервис, затмивший все
Вот, кажется, и наступил торжественный момент, когда мы оставляем позади
необходимые, но временами казавшиеся скучноватыми беседы, которые ка-
саются тех или иных аспектов устройства и развития Интернета в целом. Те-
перь перед нами — необозримые горизонты самой главной службы Интерне-
Глава 1. Устройство сайта
41
та— Всемирной паутины. Ей и только ей посвящается все дальнейшее наше
повествование.
Появление Всемирной паутины будто бы острым мечом рассекло историю
развития Интернета на два совсем непохожих периода: "до и после". Как это
было?
В марте 1989 г. группой специалистов Европейского центра исследований в
области ядерной физики в Женеве (CERN — Conseil Europeen pour la Re-
cherche Nucleaire, public.web.cern.ch/Public/Welcome.html) во главе с Тимом
Бернерсом-Ли и Дэном Коноли было положено начало работам по созданию
на базе Интернета единой распределенной гипертекстовой среды, позицио-
нировавшейся как средство для оперативного распространения информации
по физике высоких энергий между учеными всего мира. В январе 1992 г. этот
проект был реализован, как раз и получив название Всемирной паутины.
Понятие "гипертекст" появилось задолго до возникновения Всемирной пау-
тины — этот термин ввел в обращение знаменитый американский ученый
Тед Нельсон в 1965 г., характеризуя документы (в том числе электронные),
которые выражают нелинейную структуру, свойственную мыслям, идеям че-
ловека, "скачущим", связанным многими переходами — в противополож-
ность линейной структуре речи и ее производных, например письма.
Серьезные исследования систем, названных Нельсоном гипертекстовыми,
активно проводятся в рамках различных научных направлений, начиная ма-
тематикой и заканчивая психологией, уже свыше 50 лет.
На "бытовом" уровне гипертекст можно рассматривать как разветвленную и
самовзаимосвязывающуюся документацию, позволяющую читателю иссле-
довать ее в той последовательности, которую он сам выбирает.
Нельзя не отметить, что принцип организации информации, де-факто являю-
щийся гипертекстом, был известен намного раньше не только появления
службы WWW, но и всех вышеупомянутых исследований. Хрестоматийный
пример гипертекстовой системы — Библия с ее "параллельными местами",
представляющими собой не что иное, как ссылки на стихи, близкие по тема-
тике к данному. Многие словари, энциклопедии и справочники построены
похожим образом. Примерами электронных гипертекстовых систем могут
служить подсистемы помощи в различных программах, мультимедийные эн-
циклопедии и т. д.
Ключевое отличие Всемирной паутины от существовавших ранее электрон-
ных гипертекстовых систем — распределенность, позволяющая связывать
воедино документы, физически расположенные в различных точках земного
шара.
Кстати говоря, в последнее время классическое понятие гипертекста потес-
нилось термином "гипермедиа", намекающим на то, что современные инфор-
42
Часть I. Технологические основы
мационные системы зачастую включают в себя и нетекстовые компоненты —
графику, анимацию, звукозаписи, видеоролики и т. д.
В основу Всемирной паутины, как уже говорилось, был положен созданный
вышеупомянутой рабочей группой протокол HTTP, функционирующий на
трех высших уровнях эталонной модели OSI или, что то же самое, на при-
кладном уровне модели стека протоколов TCP/IP. Протокол HTTP использует
транспорт, предоставляемый протоколом TCP.
В основе Всемирной паутины лежат узлы Интернета, на каждом из которых
запущена программа-сервер, именуемая веб-сервером. Веб-сервер обслужи-
вает запросы от клиентов в рамках протокола HTTP. Сеанс взаимодействия
клиента и сервера на основе протокола HTTP называется HTTP-транзакцией,
В простейшем случае HTTP-транзакция состоит из четырех шагов:
□ установка соединения (инициируется клиентом);
□ передача запроса от клиента серверу;
□ передача ответа от сервера клиенту;
□ разрыв соединения (инициируется сервером).
Усовершенствованной и наиболее актуальной в данный момент версией про-
токола является HTTP 1.1. Эта версия поддерживает так называемые посто-
янные соединения, при которых в рамках одного сеанса взаимодействия кли-
ента и сервера может быть обработано несколько запросов.
Документы, возвращаемые сервером по запросу клиента, как правило, пред-
ставляют собой гипертекстовые страницы (или, иначе, веб-страницы), сфор-
мированные при помощи языка HTML (HyperText Markup Language, язык
разметки гипертекста). Веб-страницы обычно содержат гипертекстовые
ссылки на другие документы подобного рода. Совокупность веб-страниц,
объединенных некоторыми общими признаками (например, общей тематиче-
ской направленностью, принадлежностью одному автору или группе взаимо-
действующих между собой авторов, единым стилем оформления, расположе-
нием на одной физической машине и т. д.), принято называть веб-сайтом.
Программы, реализующие функции HTTP-клиента, именуются обычно веб-
браузерами (от английского глагола to browse — ’’пролистывать”) или, в тер-
минологии W3C, агентами пользователя (user agent). Эти программы позво-
ляют пользователю загружать гипертекстовые страницы с тех или иных веб-
узлов, отображать их содержимое, удобно перемещаться по гипертекстовым
ссылкам от страницы к странице, от сайта к сайту.
Неоспоримые удобства доступа к информации, предоставляемые Всемирной
паутиной, обеспечили стимул для стремительного развития этой службы.
Впервой половине 1990-хгг. собственными веб-сайтами стали обзаводиться
учебно-научные институты, а чуть позже привлекательность Всемирной пау-
Глава 1. Устройство сайта 43
тины в качестве площадки для продвижения разнообразных товаров и услуг
осознали акулы бизнеса. Это повлекло за собой мощнейший приток коммер-
ческого капитала и инвестиций в развитие Всемирной паутины, обеспечив
беспрецедентный, лавинообразный ее рост.
Благодаря Всемирной паутине число пользователей Интернета за последние
15 лет возросло в миллионы раз — главным образом за счет информационной
ценности веб-ресурсов. На страницах веб-сайтов сегодня можно найти цен-
ную информацию практически любого профиля.
...Вероятно, через десяток лет Интернет будет предоставлять нам такие воз-
можности, о каких сегодня мы даже не можем догадываться в силу ограни-
ченности своего воображения. Если этот тезис покажется вам высокопарным,
призадумайтесь, мог ли кто-либо совсем недавно по меркам истории,
в 1990 г., предположить, к каким глобальным переменам почти в одночасье
приведет человечество World Wide Web. Притом что создание Всемирной
паутины не претендовало, в сущности, на роль эпохального изобретения или
вероломного открытия, а стало "всего лишь" результатом решения формаль-
но поставленной инженерной задачи.
Описание сущности сайтов
Всемирная паутина— весьма разноплановый и весьма многогранный мир.
А потому емко, содержательно и доступно раскрыть термин ’’веб-сайт” в не-
скольких словах — задача вовсе даже не тривиальная.
Какое-никакое определение сайта мы уже дали чуть выше, но оно заметно
’’хромает", ибо во многом абстрактно и не блещет должной полнотой.
Похоже, наиболее здравым разрешением сложившейся неувязки следует при-
знать полнокровный рассказ о том, какие вообще бывают сайты и каким це-
лям они служат.
Коммерческие и некоммерческие сайты
Весьма многочисленная категория веб-ресурсов создается с целью получения
денежного дохода их владельцами. Хорошо это или плохо, но именно ком-
мерческие проекты, капитализация Интернета, приток инвестиций послужи-
ли катализатором головокружительного роста Всемирной паутины, развер-
нувшегося в последнее десятилетие буквально на наших глазах.
Механизмы извлечения прибыли из Сети довольно разнообразны. Онлайно-
вая торговля использует интерактивные возможности Интернета как удобную
среду для продажи товаров. Баннерные системы приносят владельцам деньги
за счет продажи показов рекламы. Выделение рекламных площадей позволя-
Часть I. Технологические основы
ет (благодаря традиционно хорошей посещаемости) быть доходными и таким
проектам, как поисковые системы, каталоги, ленты новостей, бесплатные
сервисы электронной почты или хостинга, ресурсы развлекательного толка.
Причем каждое из перечисленных направлений "в чистом виде" встречается
все реже — устойчивый характер приобрела тенденция создавать интегриро-
ванные порталы, собирающие сервисы подобного рода "под одной крышей".
Рекламно-информационные корпоративные сайты используют Интернет в
качестве медиа для продвижения компаниями своих продуктов или услуг.
Платежные системы, осуществляя переводы "виртуальных" денег, позволяют
своим владельцам зарабатывать вполне реальные комиссионные.
Тем не менее подавляющее большинство коммерческих проектов, если гово-
рить объективно, лишено индивидуальности. Как только в Сети появляется
принципиально новая успешная схема, принесшая "золотые горы" своим соз-
дателям, можно не сомневаться, что спустя некоторое время попытки вопло-
тить ее будут растиражированы сотнями, и все новые аналоги будут штампо-
ваться до тех пор, пока не наступит пресыщение рынка.
Пример бесплатного сервиса электронной почты, включающего поиск, ката-
лог новостей, а также курсы валют, погоду, знакомства и гороскопы и, разу-
меется, огромное количество посторонней рекламы, приведен на рис. 1.3.
Противоположный полюс — некоммерческие ресурсы. Создатели подобных
проектов не стремятся заработать на них материального богатства — во вся-
ком случае, до поры до времени. Смысл существования сайтов некоммерче-
ской направленности в наше расчетливое время может показаться некоторым
нашим особо прагматичным современникам довольно туманным, но именно
такие проекты составляют, без преувеличения, квинтэссенцию Всемирной
паутины, то, ради чего вообще стоит рядовым пользователям приобщаться к
Интернету.
Притягательная основа некоммерческих веб-ресурсов— полезное, ориги-
нальное, интересное наполнение, созданное истинными энтузиастами своего
дела. Авторский контент всегда приятнее читать, ибо он живее, полнее и раз-
ностороннее, нежели сухие данные энциклопедий или скупые сведения офи-
циальных источников. Почти вся познавательная информация (например,
когда необходимо узнать о заброшенных подмосковных усадьбах или о буд-
дистских дацанах Гималаев, о нюансах устройства самолета или об астероид-
ном поясе Солнечной системы, о придворных интригах Екатерины II или об
идеологии антиглобализма и т. д.) представлена именно на некоммерческих
сайтах. Авторы этих ресурсов собирают интересный для себя материал по
крупицам, скрупулезно систематизируя его, создавая подчас настоящие ше-
девры. Невозможно придумать темы, которая не была бы отражена в рамках
хотя бы одного некоммерческого контент-проекта.
Гпава 1. Устройство сайта
45
0 Гйрайти р€^
«$Ц1п5 StyrtiM Ute* нечкй^
0674
ПОИСК
Иитьрнет
СОВЕРШЕННО БЕСПЛАТНО
НАСТРОЙТЕ СВОЮ
МОБИЛЬНУЮ СВЯЗЬ
с НАМИ УДОБНО
Сделать стастсрсй
г;С»лошд
i Картинки I i Каталог] | Товары и лоты] j Софт
Словари।
агент
Новости
ПОЧТО
Регистрация м п>> л
3 Мвртз на Mail ru -
Расскажи лучшую историю о женской логике
и выигран приз: »
/8 Весна
Знакомства
ITt Гироскопы
Анекдоты
?| Афиша
KQMtWt«!p
I Врачи: Н.Караченцову будет сложно
si сохраншь интеллект
* -^г гп?бз МВД Украины Ю Кравченко найден
♦ Дены на нефть и бензин достигли новых высш
млрд.Р.у.б.
j сс.думз усилила меры безопасности на
♦ 5ЦИОМ„.4л
гавил 7G7.
ч~ап1 н"
я реАтьша; специальное предложение!
Закажи рекламу - получи бонус в 50%' >-
Каталог
ре тонам По алфавит>
£ >ЬИ[..,1 • Ьук( Id •
Афиша ‘ Модная и красивая • Уж замуж .! •
Рассылки
ал Работа
есоФт
Покупки
Аукцион
И-РДИР..?.?..!™
USD ЦЬ 5 03 27.7518
ЩЩЬ 5 03 36.3771
Погода: г Москва
04 03 -Г 05 03
12:20 Подозрение (3-я
сер
13:СЮ Сегодня
Первый
НТВ
Только 8 35мм
Сердце - одинокий
h
•<$* Чаты
Рис. 1.3. Главная страница портала Mail.Ru
Какую же пользу, если речь не идет о денежной прибыли, может принести
некоммерческий сайт своему владельцу? Прежде всего — признание и авто-
ритет, а иногда и главенствующую, образующую роль в некотором сообще-
стве, возможность, если хотите, влиять на умы. Еще один аспект— интел-
лектуальное совершенствование в результате обратной связи с посетителями
сайта. Ну и, конечно, интересную жизнь, наполненную созиданием. Согласи-
тесь, все это порой значит намного больше, чем деньги.
Пример некоммерческого, лишенного пафоса и чужой рекламы, интернет-
издания приведен на рис. 1.4.
Основная ценность любого веб-ресурса, как нацеленного на получение дохо-
да, так и некоммерческого— это посетители. В отсутствии целевой аудито-
рии любой сайт— не более чем набор ненужных файлов, обреченно ожи-
дающих своей участи в "Корзине".
Аудитория, ясное дело, не может сформироваться сама собой, автоматически,
в порядке приложения к регистрации доменного имени. Посетителей нужно
46
Часть I. Технологические основы
привлечь, но это лишь половина дела. Самое трудное — завоевать их симпа-
тии. А это сопряжено с каждодневным самоотверженным трудом.
ж a® ®g;j
•ч ш ж жв m иж » «я w ию ж »
Ф? Дарджилинги
Благородство китайских красных чаев — оно ровное и скучное. При питии
многих китайских красных чаев хочется сделать серьезное лицо и начать
вести степенный разговор ни о чем. А от дарджилингов хочется смеяться -
их благородство дразнит и восхищает. // 03.03.2005
получить удовольствие от чтения *
И
*
В
& Кубики с вопросиками
Насчет названия этой модели — ведь знал когда-то и никак не мог
вспомнить. Интересно, что никакие поисковики не могут помочь в таком
случае, ибо невозможно сформулировать запрос. Разве что «кубики
с гранями, поделенными диагоналями на контрастно раскрашенные
треугольники» — эх, где же он, грядущий Искусственный
Интеллект? // 02.03.2005
комнате тоже можно
задумываясь о crispan и
Но вот спросите у верст
бумажных изданий: пол
или журнала — это таб
ГОЛ/ЧИТ» удовольствие от чтения ►
# row rf» а с ? %?
ГрТСйЮ
Хорошо забытое новое
Прямое заимствование либо так и называется — заимствование, либо
именуется обидным словом «плагиат». Так или иначе, его легко распознать.
Труднее с заимствованием идей. // 01.03.2005
получить у довсни-хте-ив от чге-нич ►
$1
Собачья о <
номеде-йьникам ?*<> 24
Жизнь двадцать Tpei ьм. Шея
Рана почернела, пес уже с трудом
поднимает голе®у. Но проклятая
удавка на месте и по-прежнему
доставляет бедолаге немыслимые
страдания. Наверное, живодер
сделал петлю из проволоки или
из капроновой лески. Удавка
намертво сдавила шею
животного, постоянно разрезая
живую плоть ине давая огромной
ране зажить.
Чай но четверг аи с
Шунакнвым М 45
Китайские чайные церемонии.
Начало...
$
&
&
%
&
&
&
Рис. 1.4. Главная страница сайта "Информационный бум"
Информационные и презентационные сайты
Основа всех основ и самый смысл существования Всемирной паутины — это
сайты информационного характера, ценные своим контентом, полезным
содержанием— словом, тем, ради чего пользователи чаще всего приходят
в Сеть.
Информационные сайты могут существовать в течение многих лет и даже
десятилетий, концентрируя вокруг себя устойчивые сообщества (или, иначе,
Глава 1. Устройство сайта
47
коммьюнити— communities) посетителей с ярко выраженным постоянным
"ядром", проявляющим наибольшую активность.
Важно понимать, что дизайн любого информационного сайта хорош только в
том случае, если он совершенно незаметен, прозрачен для пользователя. Пси-
хология рядового посетителя такова, что заметными акцентами в информа-
ционном дизайне могут стать лишь недостатки — затуманивающие взор, от-
влекающие внимание, препятствующие быстрому и удобному восприятию
информации (например, непродуманная навигация, обилие тяжеловесной
графики, неприятные зазубрины на логотипе, чересчур мелкий шрифт, орфо-
графические и грамматические ошибки в тексте, недостаточно контрастное
или же не в меру яркое цветовое решение и прочее, прочее...). Концепция
любого информационного сайта должна быть направлена на обеспечение аб-
солютного приоритета качества и доступности контента над чем бы то ни
было еще.
Сайт информационной направленности может жить в одной "одежке" прак-
тически вечно. К тому же, для информационных сайтов по самой их природе
характерна определенная (и подчас весьма существенная) степень взаимного
сходства, которую во многих случаях можно рассматривать как проявление
формата. Опять, это легко объясняется психологией — пользователь быст-
рее и с большим комфортом найдет нужную информацию на новом для него
сайте, если интерфейс последнего не будет противоречить опыту и ожидани-
ям этого посетителя.
Но есть в Сети и кардинально иные проекты — презентационные. Они пре-
следуют совсем другую цель, нежели информационные сайты — грубо гово-
ря, пустить пыль в глаза, произвести неизгладимое визуальное впечатление,
вспыхнуть на мгновение яркой звездой и... погаснуть, отпечатавшись где-то в
глубинах подсознания. Всякий презентационный проект поэтому уникален и
неповторим, и любое сколько-либо заметное сходство двух таких сайтов вы-
зывает невольные размышления о том, кто у кого позаимствовал концепцию
оформления. Имиджевые или же красочные литературно-художественные
сайты — штучный товар, не приемлющий никаких обобщенных правил, под-
властный лишь полету фантазии создателей да непрерывно меняющейся мо-
де. Корпоративные имиджевые проекты, выполненные в "выставочной" ма-
нере (а такие сайты зачастую создаются с целью осветить лишь какое-то одно
конкретное событие — скажем, распродажу, ввод нового "революционного"
тарифного плана или какую бы то ни было еще рекламную акцию) — сию-
минутны и мимолетны. Они морально устаревают быстрее, чем сменяются
времена года за окном. Разумеется, говорить о какой бы то ни было постоян-
ной аудитории применительно к данным проектам не приходится.
Презентационных сайтов в Сети меньшинство. В то же время найти на про-
сторах Всемирной паутины "чисто информационный" или "чисто презента-
48
Часть I. Технологические основы
ционный" сайт достаточно трудно — как правило, любой веб-проект являет
собой плод здравого компромисса. Тем не менее "перевес" явно на стороне
информационной составляющей.
Пример "чисто информационного" сайта приведен на рис. 1.5.
Правка Закладки ставка
"3 О Ларайги
Web-Anatom v. Ru
Десятилетию Рунета посвящается
anatomy сущ. <...> 3) анализ, тщательный разбор (Яндекс-.Lingvo)
Web-Anatomy .Ru — это сайт, представляющий авторские еженедельные колонки
«Веб-анатомия по воскресеньям с Артемием Ломовым*, публикующиеся в рамках
ЕЖЕ-проекта «Информационный бум *.
Этот сервер ценен в основном тем, что он хранит в себе разнообразные материалы,
так или иначе дополняющие содержание выпусков.
Колонки «Веб-анатомия по воскресеньям с Артемием
Ломовым» выдвинуты на соискание премии
*Интер11ИТЬ-2ОО5» в номинации «Лучшая публикация (цикл
материалов, доклад) на русском языке, посвященная
Интернету». Если у вас есть свободные пара секунд, не сочтите за труд,
поставьте оценку за мою работу. Спасибо'
Собственно колонки
Самая первая, объясняющая, что к чему да почему
Есе и сразу, для нетерпеливых
Дополнительные материалы
• К выпуску N? 28 («Веб-графика в картинках») [05.12.2004]
• К выпуску N? 23 («Эпистолярный жанр*) [31.10.2004]
• К выпуску № го («Свобода выбора или выбор свободы?*) [10.10.2004,
дополнено 16.01.2005]
• К выпуску № 18 («Школа навигации») [26.09.2004]
• К выпуску № 16 («Вообще и в частности») [12.09.2004]
• К выпуску № 15(«Голосуем за стабильность») [05.09.2004]
• К выпуску № 14 («Развилка трех дорог») [29.08.2004]
• К выпуску № 4 («Неразрывные проблемы») [23.05.2004]
Куда податься?
Это должен видеть каждый
Секретные сведения об авторе
• На персональном сайте
• В «Физиономиях русского Интернета*
• На соответствующей странице «Информационного бума*
©Артемий Ломов, 2004, 2005.
Рис. 1.5. Сайт Web-Anatomy.Ru
Глава 1. Устройство сайта
49
Пример красноречивого воплощения ’’чисто презентационного” дизайна по-
казан на рис. 1.6.
Рис. 1.6. Сайт Cube Bird
В особый класс можно выделить сайты сервисного характера. Это, например,
уже упоминавшиеся поисковые системы, каталоги ресурсов, форумы, доски
объявлений, чаты, интернет-магазины, платежные системы и многие-многие
другие ресурсы, не вписывающиеся в прокрустово ложе классификации ”ин-
формационный/презентационный". И снова, сайты-сервисы почти никогда не
встречаются "в чистом виде” — наиболее частым следует счесть вариант ин-
теграции сервисов в информационные ресурсы.
Разумеется, на нескольких книжных страницах нельзя в полноте описать все
многообразие сайтов, встречающихся во Всемирной паутине. Я предлагаю
пользоваться предложенным мной подобием классификации как неким тро-
фейным компасом, не забывая о том, что время от времени солнечная актив-
ность оборачивается магнитными бурями, а в недрах земли сокрыты магнит-
ные аномалии...
Сайт в действии
Прежде чем перейти к практическим опытам по созданию собственных веб-
страниц, представляется разумным хотя бы в самых общих чертах рассмот-
50
Часть I. Технологические основы
реть технологические основы взаимодействия клиента и сервера в рамках
протокола HTTP.
Пользователь вводит URL, найденный на чьей-то визитке или на огромном
рекламном щите, что висит поперек дороги, в адресную строку браузера. Или
щелкает мышью по ссылке на уже открытой в окошке браузера веб-страни-
це. Или нажимает кнопку Найти в форме поисковика. Что происходит
дальше?
Клиентская программа, т. е. браузер, формирует HTTP-запрос. Этот запрос в
любом случае содержит точный URL того ресурса, к которому требуется по-
лучить доступ (таким ресурсом вовсе не обязательно должна быть веб-
страница — пользователь может запросить ZIP-архив, PDF-документ, звуко-
запись в формате MP3 или объект любого другого типа).
Сообщения запроса и ответа в рамках протокола HTTP имеют общий формат.
НТТР-сообщение — это простой текст (имеется в виду, что любой человек
без каких бы то ни было лишних усилий может прочесть этот текст. В НТТР-
сообщениях нет ’’страшных" бинарных полей фиксированной длины, харак-
терных, например, для кадров или пакетов данных). Как запрос, так и ответ в
обязательном порядке предваряется начальной строкой (start line). Все ос-
тальные элементы являются факультативными. За начальной строкой могут
следовать одно или несколько полей заголовка (каждое — на новой строке).
После заголовка начинается тело сообщения. Заголовок и тело отделяются
друг от друга пустой строкой.
Начальная строка имеет следующий формат:
метод URI версиЯ—Протокола
Пример возможной начальной строки клиентского запроса:
GET http://www.yandex.ru/ НТТР/1.1
Метод указывает, какое действие предполагается совершить с запрашивае-
мым ресурсом. Примеры HTTP-методов: get (получить содержимое ресурса),
post (отправить данные на обработку), put (разместить данные на сервере),
delete (удалить ресурс), head (получить информацию о ресурсе без передачи
его содержимого) и пр.
Только два метода приводят к загрузке веб-страниц в окошко браузера — это
get и post. Метод get используется в подавляющем большинстве случаев: он
позволяет "без затей" получить указанный в начальной строке запроса ресурс.
Метод post применяется в тех случаях, когда требуется отправить на сервер
большое количество данных от пользователя (к примеру, результат заполне-
ния какой-нибудь анкеты). Небольшую порцию пользовательских параметров
можно передать на сервер и с помощью метода get (непосредственно в соста-
Глава 1. Устройство сайта
51
ве строки URL запрашиваемого ресурса после вопросительного знака —
о такой возможности мы уже говорили, рассматривая форматы URL).
Все остальные HTTP-методы будут интересовать нас значительно меньше.
Говоря о клиентских запросах в рамках данной главы, мы будем по умолча-
нию подразумевать get- или розт-запросы.
Сервер обрабатывает запросы клиента в порядке общей очереди. Поступаю-
щие запросы сохраняются в буфере — специально назначенной для этих це-
лей области памяти физической машины. Если запросы будут поступать
слишком часто, может наступить момент, когда сервер перестанет успевать
обрабатывать их все. В этом случае произойдет переполнение буфера, и часть
запросов попросту потеряется. Очевидно, что производительность веб-
сервера по обработке клиентских запросов напрямую зависит от технических
характеристик используемого компьютера — в первую очередь, конечно же,
от быстродействия процессора и от объема памяти.
Подавляющее большинство реальных веб-проектов использует так называе-
мый виртуальный хостинг — схему, при которой на одной физической ма-
шине средней, прямо скажем, производительности уживаются десятки и даже
сотни сайтов (тоже средненьких, с посещаемостью в районе нескольких сотен
человек в день). Как уже говорилось выше, веб-сервер можно настроить та-
ким образом, чтобы он обслуживал множество независимых виртуальных
хостов, которые извне ничем не отличаются от реальных веб-узлов, т. е. мо-
гут обладать своими собственными доменными именами и даже, при необхо-
димости, выделенными IP-адресами.
Более серьезные сайты, с посещаемостью в десятки тысяч человек в день,
уже не могут довольствоваться возможностями виртуального хостинга —
такие проекты используют выделенные физические серверы: одна машина —
один сайт.
Но есть и такие проекты, которым недостаточно и выделенной машины,
пусть даже многопроцессорной и весьма высокопроизводительной. Речь идет
о высоконагрузочных сервисах, таких, например, как поисковые системы,
к которым обращаются многие миллионы пользователей в день. Аппаратные
решения подобных систем базируются, как правило, на мощных многома-
шинных центрах обработки данных (data center), порой территориально рас-
средоточенных по всему миру.
...Итак, сервер получает клиентский запрос. Если ничего не препятствует вы-
полнению клиентских "пожеланий”, сервер возвращает клиенту НТТР-ответ,
в теле которого размещается содержимое запрошенного ресурса.
Такая идиллия, однако, бывает не всегда. Случается, что клиент отправил не-
корректный запрос; или ресурс, запрошенный клиентом, отсутствует в распо-
ряжении сервера; или на стороне сервера произошел программный сбой... Так
52
Часть I. Технологические основы
или иначе, но в любом случае сервер должен отправить клиенту ответ с объ-
яснением причин, в силу которых выполнить запрос невозможно.
Сообщение HTTP-ответа сервера характеризуется кодом статуса— трех-
значным числом, начинающимся на одну из цифр в диапазоне от 1 до 5. Ко-
ды, начинающиеся на 1, являются информационными и указывают на то, что
клиентский запрос принят и обрабатывается. Первая цифра 2 свидетельствует
об успешном клиентском запросе. Коды статуса, начинающиеся на 3, опреде-
ляют ситуации, связанные с перенаправлениями. Они свидетельствуют, что
соответствующий запрос не был выполнен, и клиент должен предпринять
какие-либо дополнительные действия для его успешного выполнения. Коды
ответа, первая цифра которых — 4, свидетельствуют об ошибках на стороне
клиента и означают, что клиентский запрос не выполнен. Наконец, коды, на-
чинающиеся с цифры 5, говорят об ошибках на стороне сервера, препятст-
вующих выполнению клиентского запроса.
Рис. 1.7. Веб-страница с ошибкой 404
Самый распространенный код ответа — 200 (ОК — клиентский запрос пра-
вилен, и в теле сообщения HTTP-ответа сервера содержатся запрошенные
Глава 1. Устройство сайта 53
данные). Самая распространенная ошибка (рис. 1.7), вне всякого сомне-
ния, — 404 (Not Found — ресурс не найден).
Устройство веб-страницы: взгляд внутрь
В заголовке ответа сервера явно указывается тип содержимого, фигурирую-
щего в теле сообщения HTTP-ответа. Иными словами, браузер, принимая от
сервера ответ на свой запрос, ни за что не перепутает веб-страницу с графи-
ческим изображением или PDF-документом.
Исследование исходного кода страниц
Посмотреть, что "на самом деле" представляет из себя веб-страница, загру-
женная в окно браузера, очень легко средствами самого браузера. Так, в
Internet Explorer, например, нужно щелкнуть правой кнопкой мыши в любом
свободном от текста и графики месте окна, и в выпавшем контекстном меню
выбрать пункт Просмотр HTML-кода. В Mozilla Firefox 1.x последователь-
ность действий такая же, но соответствующий пункт меню называется чуточ-
ку иначе — Просмотр исходного кода страницы. Наконец, пользователям
Opera достаточно лишь нажать клавиши <Alt>+<F3>.
( Примечание
Новичков обычно сбивает с толку термин "код", поскольку в данном контексте
значение этого слова далеко от привычного обиходного. Так вот, код можно
грубо охарактеризовать как "текст на компьютерном языке", будь то исходный
текст программы, написанный с использованием того или иного языка програм-
мирования; содержимое исполняемого файла программы в том или ином пред-
ставлении; "внутренности" веб-страницы, наконец.
Как уже говорилось выше, веб-страница почти всегда представляет собой
некий код на языке HTML. (Разъяснений насчет "почти" делать сейчас не бу-
дем — это предмет последующих глав.) Этот код вполне поддается чтению.
Чтобы просмотреть исходный код страницы в Internet Explorer, нужно вы-
брать пункт Просмотр HTML-кода в контекстном меню, открывающемся по
щелчку правой кнопки мыши (рис. 1.8).
Пример исходного кода показан на рис. 1.9.
Веб-страница отличается от обычного текста тем, что в ее коде фигурируют
управляющие конструкции разметки, определяющие логическую структуру
документа— так называемые теги. Теги заключены в угловые скобки.
О том, что обозначает каждый из тегов, мы будем подробно беседовать в гла-
ве 2 — сейчас наша цель состоит в том, чтобы понять, "из какого сора растут
стихи".
54
Часть I. Технологические основы
tvs Garden; The Heatrty in CSS Oevhjn * Mtcrnseh Mi
''<Й& 'Йрйиа'А1ЙА Забранное Сервис Справка
., .и*»*
http: //csszengar den com/
/1 armcns'ra'ton of what
iphshed
> ’ ’ s u a 7у f л г о u g h CXT-
The Road to Enlightenment
Littering a dark and dreary road lay the past relics
of browser-specific tags, incompatible DOMs, and
broken CSS support.
fwww'y by
$ufcw«V Ewm* fay
based design. Select any
toad it into this page.
Today, we must clear
Web enlightenment has'
tireless efforts of folk H
major browser creators.
Download the sample
Назад
Сделать фоновым рисунком
Сохранить кек алеменг ре&чйгосгаяа<
Л iisr by Sfcafc.8»
»t»d by
by S-s«»«w4
выделить все
The css Zen Garden
meditate on the import
Begin to see with clarity . &>*&***
time-honored techniques in new and invigorating fashion-^------------------
html file and
by
Kim &
просмотр НТК-кода
fay
So What is This About?
There is clearly a need for CSS to be taken seriously by gt DeyStfa .
.... . . .. " . • Сбмоанть
amis to excite, inspire, and encourage participation. To bt. -
designs in the list. Clicking on any one will load the style.9*^^......v....1...
code remains the same, the only thing that has changed is the external .css file. Yes,
really.
• • • f»-
тейсгй«1Ж данной etpawt
Wy» Еууцп « С 5%
ИнгдрнйУ
ЗГ
K^fafWa
J»><>
Рис. 1.8. Контекстное меню, предоставляющее возможность просмотра исходного кода страницы
В коде веб-страницы могут присутствовать и другие функциональные едини-
цы: например, листы стилей, определяющие внешний вид тех или иных эле-
ментов веб-страницы при отображении их в окне браузера, а также скрипты
клиентской стороны— небольшие программы, позволяющие в некоторой
степени ’’оживить” статичный контент HTML-документа.
Стили и скрипты могут быть как внутренними, так и внешними по отноше-
нию к веб-странице. В первом случае они внедряются непосредственно в
HTML-документ, а во втором — представляются в виде самостоятельных
объектов, связанных с веб-страницей при помощи предназначенных для этого
тегов.
Графические изображения и Flash-анимация, которые очень часто встречают-
ся на веб-страницах, всегда являются самостоятельными, связанными объек-
Глава 1. Устройство сайта
55
тами. То же самое относится к звуковому сопровождению, видеороликам,
ActiveX-компонентам и аплетам (applet — небольшое исполняемое приложе-
ние), которые встречаются на веб-страницах значительно реже.
Д oszengarden(l) - Блокнот
...........L
XlDOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Str 1Ct//ENW
"http://w*/.w3. org/TR/xhtmll/DTD/xhtmll-strict. dtd"> Я
<html xml ns» http ://ww. w3. org/1999/xhtml" xml:lang»"en" > Я
«head> Л
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> Ж
<meta name="author" content»'Dave shea" /> ®
<meta name»"keywords" content»"design, css, cascading, style, sheets, xhtml,
<meta name»"description" content="A demonstration of what can be accomplished
<meta name="robots'' content = "al 1" /> 'Ц
<title>css Zen Garden: The Beauty in css Design«/title> И
«!-- to correct the unsightly Flash of unstyled content, http://ww. bluerobotH
«script type="text/javascript"x/script> Ж
«style type="text/css" title="currentstyle" media="screen"> ®
©import "/001/001.css"; I
«/style>
«link rel = "shortcut icon" type="image/x-icon" href="http://ww. csszengarden.
«link rel="alternate" type» application/rss+xml" title» RSS" href="http://w
</head>
This xhtml document is marked up to provide the designer with the maximum po
There are more classes and extraneous tags than needed, and in a real world i
likely that it would be much leaner.
However, I think we can all agree that even given that, we're still better о
built with tables.
«body id="css-zen-garden"> ,
«div id="container">
«div id="intro">
<div id="pageHeader">
«nl>«span>css Zen Garden«/span>«/hl>
«h2>«span>The Beauty of «acronym title="cascading style shee
</div>
«div id="quicksummary">
«p class«"pl >«span>A demonstration of what can be accomplis
«p class="p2">«span>Download the sample «a href="/zengarden-
«/div> i?|l
...J
Рис. 1.9. Исходный код веб-страницы
В процессе загрузки и отображения (рендеринга) веб-страницы браузер, ра-
зумеется, анализирует ее код. И если в нем встретится тег, предписывающий
вставить тот или иной связанный объект, скажем, графическое изображение
(разумеется, URL этого объекта явно указывается), браузер отправляет веб-
серверу соответствующий запрос. Веб-страница средней сложности предпо-
лагает в среднем около десятка связанных с ней объектов — и загрузка каж-
дого из них сопровождается парой HTTP-сообщений запрос/ответ. Постоян-
56
Часть I. Технологические основы
ные соединения, доступные в рамках протокола HTTP 1.1 (о них говорилось
выше), позволяют существенно ускорить загрузку страниц.
Так или иначе, но тот код, который получает клиент от сервера— конечный.
или результирующий, ровным счетом ничего не говорит, однако, о том, как
представляется веб-страница на стороне сервера.
Статика и динамика
Веб-страницы, по идее, могут храниться на сервере в виде завершенных
(статических) HTML-документов. В этом случае все, что должен сделать
сервер, получив запрос от клиента с указанием URL той или иной страни-
цы — без особого напряжения отправить в ответ содержимое готовенького
файла, который лежит вот тут, под боком. Сказка, а не жизнь.
Такая схема всем хороша. Запросы обрабатываются почти молниеносно;
можно выбрать чуть ли не самый дешевый хостинг; ничто ни с какой сторо-
ны не угрожает безопасности сервера...
Есть, однако, несколько существенных ”но”.
Во-первых, если сайт разрастется хотя бы до сотни страниц, его практически
невозможно будет сопровождать. Скажем, добавление нового пункта в меню
навигации (которое должно быть на каждой странице) обернется головной
болью как минимум на полчаса.
Во-вторых, статические страницы не в состоянии обеспечить буквально ни-
какой интерактивности. Максимум, что с ними может делать пользователь —
читать текст, разглядывать картинки да щелкать по ссылкам.
Пользователи же хотят большего — совместно комментировать тексты, вы-
ставлять авторам понравившихся материалов оценки, искать информацию по
ключевым словам, выбирать понравившиеся товары и складывать их в кор-
зинку заказа, просто общаться на вольные темы...
Администраторы сайтов — тоже люди. Им подавай красивый веб-интерфейс:
ввел текст в поле формы, выбрал название раздела из списка, нажал кноп-
ку — и чтоб тут же новая страница на сайте образовалась. И чтоб ссылки на
нее в нужных местах сами собой появились. Или, например, неплохо бы
знать, сколько раз просматривали ту или иную страницу, чтобы получить
пищу для размышлений, в каком направлении развиваться дальше.
А потому статические страницы на сколько-либо серьезных сайтах в наше
время большая редкость. Почти все страницы, которые мы привыкли наблю-
дать в окошке браузера, не хранятся на сервере в том же самом виде, в каком
отправляются клиенту, а тем или иным образом динамически генерируются,
что называется, ”на лету”.
Глава 1. Устройство сайта
57
gpftft f^<fe«o-4 ' Сфйака'' '
Ф'Ф'З? Ф &Г j hftp^/^w^modelkriix xom/cgi-bin/market/search'. pl?id~423AO99341018taction»si ^|>:А^:::;ЙврейтИвд|,^С^
ФйЬп^ Started u.4 Latest htead&wt
Форма поиска товаров (срочный заказ)
а
U4U ' юшек*
Производитель 1HERPA з
Артикул [
Категория | самолет :3&|
Масштаб | (все масштабы) i*i|
Максимальная цена | ;РУб
1 Искать только среди уцененных i (б/у, взятых на комиссию, с дефектами) Г
| Показывать только снабженные i иллюстрациями позиции □
ПОКАТАТЬ ТЗЗфЫ I [Очистить форьг/]
Всего записей в базе 8654
Результаты поиска
Найдено записей 30
ШйлтЗ; ikbh Дошшшю —4
HERPA 560184(B) 1400 самолет Boeing 737-400 Lufthansa 1453 f—-
HERPA 560450(B) 1400 самолет Boeing 707-300 Lufthansa 1088 1 V ।
HERPA 500814(B) 1:500 самолет Boeing 747-400 769 Г”
HERPA 500838(B) 1:500 самолет Boeing 747-400, Northwest Airlines/KLM 730 i j
HERPA 501279(B) 1500 самолет Boeing 737-400, Hapag Lloyd 479 к .
HERPA 502603(B) 1 500 самолет Boeing 747-400 «Scotland», Bntish Airways 823 Г-
HERPA 502917(B) 1 500 самолет Boeing 767-300, польские авиалинии, 70-летний юбилей 580 k .. Г~;
HERPA 502986(B) 1.500 самолет Boeing 767-300, Vietnam Airlines 629 । J
HERPA 503402(B) 1:500 самолет MD-11 702 । . J
Рис. 1.10. Динамическая страница электронной витрины интернет-магазина
Но без ’’классической” (читай: ’’статической") подготовки вряд ли имеет
смысл обсуждать, как именно происходит формирование динамических стра-
ниц. Эти крайне важные и интересные темы, увы, выходят за рамки тематики
нашей книги — к сожалению, нельзя объять необъятное...
58
Часть I. Технологические основы
Стадии разработки сайта
Положенный в основу этой главы сугубо концептуальный подход, не предпо-
лагающий ни единой строчки кода, вероятно, уже порядком утомил читателя.
А может быть, только наоборот, вселил вдохновенье? Представьте: идеи гро-
моздятся одна на другую, мечты не дают уснуть по ночам... Желание создать
свой первый сайт уже неумолимо, но с чего, с чего же все-таки начать?!
Конечно же, не с HTML-редактора. Выражаясь академическим языком, пер-
воочередным этапом решения любой проблемы является постановка задачи.
Этот казенный термин здесь весьма кстати. Ибо своим невозмутимым тоном
он одергивает, заставляет задержаться, оглянуться, еще раз неспешно все об-
думать, трезво взвесить все "за и против", и только после этого приступать к
ответственной работе по воплощению нового проекта. Иначе есть большой
риск, что на свет появится очередная пустышка.
Начало — половина дела
Предположим, сверхидея, глобальный замысел будущего проекта более-
менее осязаем — иначе говорить не о чем; делать "сайт ради сайта" не имеет
смысла. Пусть, к примеру, планируется создать некоммерческий тематиче-
ский информационный ресурс.
Перед тем как начинать говорить о воплощении проекта в жизнь, весьма же-
лательно исследовать уже существующие ресурсы Всемирной паутины, хоть
сколько-нибудь перекликающиеся с избранной тематикой. Это поможет из-
бежать изобретения велосипеда. В идеале не мешало бы некоторое время
"повращаться" в сообществе, симпатии которого в первую очередь планиру-
ется завоевать при помощи нового сайта, на правах стороннего наблюдате-
ля — "побродить" по уже действующим узлам, поучаствовать в тематических
форумах или дискуссионных листах. Это позволит познакомиться с аудито-
рией, что весьма полезно, поскольку к неожиданно появляющимся в поле
зрения проектам, принадлежащим людям "с улицы", завсегдатаи сообществ
"по интересам" в первое время относятся, как правило, настороженно. Кроме
того, при грамотном подходе существует возможность выяснить, какая имен-
но информация в рамках выбранной тематики наиболее востребована ауди-
торией.
В результате подобного анализа автор будущего сайта должен как можно
полнее, хотя бы на обозримое будущее сроком не менее года, определиться
с планируемыми характерными чертами своего проекта, как-то:
□ тематический охват (глобальный, широкий, или же, напротив, узкий и же-
стко очерченный);
Глава 1. Устройство сайта 59
□ направленность проекта (по содержанию — художественная, познаватель-
ная, строго научная или официальная; по форме— повествовательная,
изобразительная, музыкальная и т. д.);
□ место проекта среди родственных сайтов (отличительные особенности,
’’изюминка”; возможные отношения с существующими проектами — дру-
жественность или, напротив, жесткая конкуренция);
□ цели (по степени влияния на аудиторию— просто утвердиться в уже
существующем сообществе, организовать новое или ’’перетянуть" центр
сформировавшегося коммьюнити).
После этих выкладок, весьма вероятно, удастся наметить, и снова, хотя бы на
ближайшие перспективы, следующие уже сугубо технологические моменты:
□ состав компонентов и сервисов будущего проекта (доминирование стати-
ческого контента или, напротив, преобладание интерактивных средств;
необходимость динамических элементов — например, возможности ком-
ментирования статей посетителями, форума, рассылки);
□ структура содержания сайта (основные разделы, число уровней вложен-
ности);
□ детали организационного плана (предполагаемый объем работ, состав
коллектива авторов и разработчиков).
Непосредственная реализация замысла, по сути, вторична. Вся технологиче-
ская цепочка создания сайта должна быть поставлена на службу, полностью
подчинена основным целям и задачам будущего проекта, базовым тезисам,
сформулированным на самом раннем этапе проектирования. Чем более точно
и четко это будет сделано один раз и навсегда, тем легче и непринужденнее
окажется техническая сторона дела, рутина, с которой придется сталкиваться
день ото дня.
Рождение и жизнь проекта
Точно определившись с концепцией сайта, можно приступать к подготовке
первоначальной порции его информационного наполнения (текстов, иллюст-
ративного материала и т. д.) в соответствии с запланированной структурой
сайта.
Параллельно с этим можно заниматься разработкой макетов страниц сайта.
Макеты — это еще никакие не страницы, а только лишь прототипы будущих
страниц; чаще всего — единые многослойные графические изображения.
Процесс создания макетов (рис. 1.11), наиболее творческий и ответственный
одновременно, требует совершенного владения искусством поиска компро-
миссов. Он состоит из двух конкурирующих, диаметрально противополож-
60
Часть I. Технологические основы
ных по своему влиянию, но при всем при том неразрывно связанных состав-
ляющих, соотносящихся друг с другом точно так же, как разум и чувства,
’’физика” и ’’лирика”. Со стороны ’’разумного” — организация пространства
веб-страниц, разбиение его на функциональные области. А ’’эмоциональ-
ное” — это, конечно же, художественное оформление страниц.
( Примечание
Следует, однако, помнить, что в любом случае (а для информационных сай-
тов — в особенности) контент первичен, а дизайн вторичен. Дизайн должен
всеми средствами помогать восприятию информации пользователем, а не пре-
пятствовать этому, что, к сожалению, сплошь и рядом наблюдается в реальных
проектах.
Рис. 1.11. Процесс создания макета главной страницы презентационного сайта в Photoshop CS
После того, как приемлемые варианты макетов созданы, начинается подго-
товка шаблонов страниц. Монолитные макеты режутся на фрагменты, кото-
рые сохраняются в общепринятых для использования в графических форма-
тах Всемирной паутины. Когда вся декоративная графика для страниц готова,
можно верстать HTML-код.
( Примечание
Употребляя термин "шаблон", мы принимаем как само собой разумеющееся то,
что все страницы сайта выполняются в едином стиле. Это диктуется в первую
г
Глава 1, Устройство сайта 61
очередь соображениями композиционного единства (ведь обычно говорят о ди-
зайне сайта в целом, а не об оформлении каждой страницы по отдельности; хо-
тя, конечно, и такое тоже бывает, но подобные случаи редкостны и присущи ис-
ключительно презентационным проектам).
К тому же, мы подразумеваем нацеленность описываемой здесь технологиче-
ской цепочки на использование динамических технологий стороны сервера, а в
случае их применения вполне обыденна ситуация, когда один-два файла (те
самые шаблоны) полностью контролируют дизайн сайта, состоящего из многих
тысяч страниц.
Собственно, я уже раскрыл карты — следующим этапом разработки сайта
является проектирование и реализация динамических его компонентов.
Затем наступает момент истины — сборка всех компонентов сайта воедино и
скрупулезное тестирование всей системы. Все это удобнее делать в теплич-
ных условиях, на локальной машине.
Далее, когда все очевидные баги будут выловлены, имеет смысл передисло-
цироваться и в боевые условия — ввести сайт в эксплуатацию, предваритель-
но выбрав хостинг, зарегистрировав домен и произведя все необходимые ма-
нипуляции по привязке домена, загрузке файлов на удаленный сервер, на-
стройке необходимого окружения и т. д. и т. п.
Сайт введен в строй. Вы полагаете, на этом все заботы и заканчиваются? На-
оборот, они только начинаются. Впереди— полнокровная жизнь проекта.
Развитие, продвижение, взлеты и падения, радости и разочарования, регуляр-
ные пополнения свежими информационными материалами и рутинная техни-
ческая поддержка — все будет в этой жизни. Готовьтесь!..
ГЛАВА 2
Создание простейших страниц
с помощью языка разметки HTML
Хотелось бы верить, что обзорная, концептуальная первая глава, получив-
шаяся неожиданно длинной даже для меня самого, сняла множество вопросов
о том, что с чем и как взаимосвязано.
Теперь можно с чистой совестью перейти к практике. Перед тем, однако, как
вплотную заняться постижением конструкций языка HTML, нужно еще не-
много потерпеть.
Как известно, знание прошлого избавляет нас от старых ошибок в будущем.
А поэтому представляется необходимым рассказать о том, по какому пути
происходило развитие веб-технологий клиентской стороны. Путь этот, надо
заметить, был весьма запутан и тернист.
Экскурс в историю Всемирной паутины
Язык HTML, созданный, как мы уже упоминали, Тимом Бернерсом-Ли в на-
чале 1990-х гг., нельзя назвать чем-то революционным.
Напротив, он был основан на базе уже существовавшего тогда языка, а точ-
нее, метаязыка SGML (Standard Generalized Markup Language, стандартный
обобщенный язык разметки), который является стандартом ISO с 1986 г.
Строго говоря, язык HTML есть подмножество метаязыка SGML.
SGML и основы теории разметки
Вероятно, для большинства читателей слова ’’метаязык” и ’’разметка” почти
ни о чем не говорят. Поэтому, полагаю, нужно рассказать немного о том, что
представляет собой SGML.
64
Часть I. Технологические основы
В конце 1960-х гг. группа исследователей из компании IBM под руковод-
ством Чарльза Гольдфарба взялась за проблему создания универсальной сис-
темы для обмена юридическими документами. Они поставили перед собой
задачу — обеспечить максимальную переносимость данной системы, т. е.
независимость ее от особенностей конкретных аппаратно-программных
платформ, сред и устройств вывода информации, как уже существовавших на
тот момент, так и тех, которые могли бы появиться в будущем.
Создатели системы сочли единственно верным решение ’’отделить мух от
котлет" — т. е. четко разграничить логическую структуру документа, с одной
стороны, и его оформление, с другой.
Суть этого принципа такова. Непосредственно в текст документов внедряют-
ся специальные управляющие конструкции — элементы разметки, позво-
ляющие логически структурировать содержание, определить в тексте само-
стоятельные смысловые единицы (например, заголовки, абзацы и т. п.). Но
конструкции разметки абсолютно ничего не говорят о конкретном способе
представления данных, т. е. об особенностях их отображения или воспроиз-
ведения, о внешнем виде форматирования и т. д.
Информация о способе представления хранится не в документе, а в отдель-
ном файле — листе стилей. Подобная схема позволяет автоматически обра-
батывать одну и ту же информацию различными способами.
Разработчики системы справедливо посчитали, что всякий документ может
быть надежно обработан лишь в том случае, если он соответствует некоему
единому стандарту. Все прочие документы предполагалось отвергать. Таким
образом, потребовалось четко определить допустимую структуру документов
того или иного типа. Для этой цели был задействован механизм определений
типов документов (Document Type Definition, DTD). DTD, как и лист стилей,
представляет собой файл, внешний по отношению к соответствующему до-
кументу.
Разделение содержания, представления и проверки на допустимость обеспе-
чивает чрезвычайную гибкость, поскольку как таблицы стилей, так и DTD
могут быть легко модифицированы, в то время как структурная разметка до-
кумента останется неизменной.
Язык, соответствующий всем вышеозначенным концепциям и получивший
название GML (Generalized Markup Language), был создан в 1969 г.
( Примечание )
Существует легенда, будто бы официальная расшифровка аббревиатуры GML
была удачно "подогнана" уже позже, а первоначально это сокращение незатей-
ливо отражало первые буквы фамилий Goldfarb, Mosher и Lorie— Чарльза
Гольдфарба, Эдварда Мошера и Раймонда Лори, трех ведущих разработчиков.
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 65
В 1974 г. Гольдфарб доказал, что допустимость документа можно проверять,
не обрабатывая его. Это послужило стимулом к дальнейшей работе над про-
ектом — разработчики значительно расширили свой первоначальный замы-
сел, замахнувшись на статус промышленного стандарта для хранения тексто-
вых документов. В 1986 г. ISO приняла язык GML в качестве международно-
го стандарта, и в его названии закономерно появилась буква ”S”. Десятью
годами позже стандартом ISO стал язык DSSSL (Document Style Semantics
and Specification Language, язык для определения семантики и специфика-
ции стиля документов), определяющий правила, в соответствии с которыми
создаются таблицы стилей, использующиеся для обработки SGML-доку-
ментов.
Мы называем SGML метаязыком в том смысле, что он, де-факто, является
’’языком для описания языков”. SGML, в отличие от языка в классическом
понимании, не имеет ограниченного словаря— каждый тип документов
(определяемый при помощи DTD) может иметь свою собственную структуру
и обладать своим собственным набором допустимых управляющих кон-
струкций.
Таким образом, язык HTML — это не что иное, как один из типов документов
SGML. (Если быть совсем корректным и говорить по состоянию на сего-
дняшний день, то уже не один, а несколько, ибо за 15 лет развития Всемир-
ной паутины появилось множество версий языка HTML, каждая из которых
описывается соответствующим DTD.)
HTML, однако, был задуман как достаточно вольный стандарт. Иными сло-
вами, страница, созданная с его использованием, должна обрабатываться
браузером несмотря ни на что, в любом случае, даже при наличии откровен-
ных ошибок в коде. Причем ошибку браузер может интерпретировать, как
душе угодно. Надо ли говорить, что впоследствии эта самая потенциальная
"свобода творчества” обернулась миной замедленного действия...
HTML на грани кризиса
HTML, по замыслу своих создателей, изначально позиционировался как язык
логической, структурной разметки документов и включал в себя возможно-
сти для определения лишь таких элементов, как гипертекстовые ссылки, за-
головки, абзацы, списки и их пункты, а чуть позже — графические изображе-
ния и веб-формы. Предполагалось, что внешний вид всех подобных элемен-
тов будет определять браузер на свое усмотрение. Иными словами, веб-
страницы не должны были отображаться одинаково в различных браузерах.
Строго говоря, для создания полнофункциональных информационных сайтов
было вполне достаточно возможностей языка HTML версии 2.0, ставшего
официальной рекомендацией W3C в 1995 г. Стандарт HTML 2.0 можно на-
звать своего рода классикой жанра.
66
Часть I. Технологические основы
( Примечание j
Консорциум W3C основан одним из создателей Всемирной паутины, Тимом
Бернерсом-Ли, в 1994 г., возложив на себя нелегкое бремя стандартизации веб-
технологий. Требования W3C, однако, не являются стандартами в строгом по-
нимании этого слова, а имеют статус рекомендаций. То есть, попросту говоря,
их можно придерживаться, а можно и нет— никто силой не заставляет. Понят-
но, что второе много проще.
Учитывая упомянутый выше либерализм языка HTML, неудивительно, что по-
давляющее большинство современных веб-страниц не соответствует рекомен-
дациям W3C и содержит массу ошибок.
Полагаю, вовсе не мешало бы слегка ужесточить статус требований W3C. Ведь
Консорциум сегодня — уже достаточно влиятельная организация, и он вполне
мог бы придать своим рекомендациям статус стандартов, обязательных для
выполнения, подобно ISO, IEEE (Institute of Electrical and Electronics Engineers,
Институт инженеров по электротехнике и радиоэлектронике) или IEC
(International Electrotechnical Commission, Международная электротехническая
комиссия). В этом случае производители браузеров и мобильных устройств,
профессиональные разработчики сайтов и т. д. будут поставлены перед необ-
ходимостью сертификации своих решений в области веб-технологий. Им при-
дется либо улучшить свои продукты до состояния соответствия стандартам,
либо уйти с рынка.
В то же самое время, для того чтобы обеспечить доступность Всемирной пау-
тины для максимально широкого круга пользователей (а это, в сущности,
сверхзадача Консорциума), веб-технологии должны оставаться открытыми. Мне
приходилось сталкиваться с людьми, которые на полном серьезе полагают,
' будто бы признание какого-то одного браузера "единственно правильным" (ча-
ще всего на эту роль прочат, разумеется, Internet Explorer, получивший наи-
большее распространение в результате, мягко говоря, не слишком честной
маркетинговой политики компании Microsoft) станет решением всех проблем.
Это, конечно же, нонсенс, обсуждение которого выходит за рамки здравого
смысла.
Следует заметить, что до принятия того или иного документа в качестве реко-
мендации W3C он проходит три стадии "шлифовки". Это рабочий проект
(Working Draft), который бесчисленное количество раз обсуждается и совер-
шенствуется; кандидат на рекомендацию (Candidate Recommendation) — нечто
вроде бета-версии, более детально "обкатываемой" и выдерживаемой в тече-
ние определенного срока; и предлагаемая рекомендация (Proposed Recom-
mendation) — документ, полностью готовый к утверждению в качестве рекомен-
дации. В состав W3C входит чуть менее 400 участников (в их числе, конечно
же, и весь свет производителей браузеров— Microsoft Corporation, Mozilla
Foundation, Opera Software и т. д.), и все они активно способствуют внесению
корректив в будущие рекомендации. Все сказанное призвано проиллюстриро-
вать серьезность и зрелость рекомендаций W3C, их состоятельность для воз-
можного объявления международными стандартами.
’’Классическая” эпоха, однако, продержалась недолго. Шумное вторжение
коммерции в Интернет в середине 1990-х повлекло за собой качественное
изменение специфики Всемирной паутины — имиджевым сайтам компаний
Гпава 2. Создание простейших странице помощью языка разметки HTML 67
потребовалось яркое, броское, запоминающееся и даже местами навязчивое
оформление страниц, а кроме того — их константный внешний вид в различ-
ных браузерах. HTML 2.0 никак не мог обеспечить всего этого.
Но, как известно, кто платит, тот и заказывает музыку... Главный на тот мо-
мент производитель браузеров, компания Netscape, почувствовав конъюнкту-
ру рынка, пожертвовала логической стройностью HTML в угоду сиюминут-
ным тенденциям. Чуть позже "подсуетилась” вездесущая Microsoft, и между
этими двумя компаниями разгорелась нешуточная 'Тонка вооружений”. Каж-
дый производитель стремился встроить в свой браузер поддержку как можно
большего количества разнообразных элементов HTML, отвечающих за визу-
альное представление информации (к примеру, позволяющих изменять цвет
шрифта и фона страницы, позиционировать и выравнивать текст, воплощать
эффекты "бегущей строки” и мигающего текста и т. п.). Это, разумеется, шло
наперекор официальным рекомендациям W3C и являлось злостным наруше-
нием идеологии структурной разметки.
Чтобы как-то повлиять на ситуацию и привести к общему знаменателю по-
рочные инициативы Netscape и Microsoft, в 1997 г. W3C в спешке, под суще-
ственным нажимом Microsoft, утвердил рекомендацию HTML 3.2, вобрав-
шую в себя, что называется, "по факту” введенные в оборот участниками со-
стязания элементы визуального форматирования, но в то же время по-
прежнему предполагавшую вольность их интерпретации агентами пользова-
теля.
Эта временная мера не сильно помогла— браузеры Netscape Navigator и
Microsoft Internet Explorer по-прежнему изобиловали множеством расшире-
ний — индивидуальных элементов HTML, никак не представленных в офи-
циальном DTD, и по мере развития этих программ несовместимости только
продолжали накапливаться.
Поскольку рынком была продиктована потребность приблизить внешний вид
веб-страниц к облику полос глянцевых журналов, возникла нелепая традиция
верстать шаблоны страниц при помощи таблиц (см. главу 5), ибо в HTML не
существовало более изящного и логически состоятельного механизма для
взаимного позиционирования частей содержимого.
В результате всего этого работа HTML-кодеров к середине — концу
1990-х гг. свелась, по сути, к сизифову труду— им приходилось долгие часы
биться над каждым сколько-либо сложным макетом сайта, чтобы обеспечить
более-менее предсказуемый внешний вид страниц в нескольких распростра-
ненных на тот момент браузерах при отсутствии каких бы то ни было гаран-
тий совместимости с последующими их версиями, а также с уже существо-
вавшими пользовательскими агентами, в которых работа сайта не была явно
протестирована.
68
Часть I. Технологические основы
Этот беспредел, разумеется, не мог продолжаться вечно, и в 1996 г. Консор-
циумом W3C была утверждена спецификация CSS (Cascading Style Sheets,
каскадные листы стилей).
Каскадные листы стилей отделены от содержания веб-страниц и потому не
вредят внутренней логике последних. К тому же они, в отличие от встроен-
ных в HTML возможностей визуального форматирования, явно предписыва-
ют агенту пользователя, каким образом должны интерпретироваться те или
иные свойства. Полузабытый принцип разделения содержания и представле-
ния, заложенный разработчиками SGML, стал возрождаться.
Настоящее и будущее веб-технологий
Любой технологии, однако, нужны многие годы на обкатку. Первая версия
CSS, CSS level 1 (или, кратко, CSS1) оказалась почти не замеченной разра-
ботчиками, ибо не смогла заменить собой все визуальные средства, насильст-
венно втиснутые в HTML. К тому же, качество поддержки CSS в браузерах
тех лет не выдерживало никакой критики.
Спецификация CSS2, утвержденная в качестве официальной рекомендации в
1998 г., обладает намного более серьезными возможностями. Ее конек— су-
щественно усовершенствованная блочная модель, позволяющая представить
любую веб-страницу как набор прямоугольных областей с различными свой-
ствами и тем самым избавиться от верстки шаблонов страниц с помощью
таблиц. Кроме того, CSS2 позволяет определять индивидуальные и прозрач-
ные для пользователя правила представления информации для различных
сред и устройств вывода (в частности, для экрана настольного компьютера
или ноутбука, для меньшего по размерам экрана ’’наладонника” или смартфо-
на, для речевых браузеров, для механических строк Брайля, для принтера
и т. д.).
В 1997 г. официальной рекомендацией W3C становится HTML версии 4.0,
явившийся плодом множества компромиссов. Данная версия вобрала в себя
все визуальные возможности HTML 3.2, но в большинстве своем они были
провозглашены не рекомендованными к использованию (deprecated).
HTML 4 — это, по сути, не один стандарт, а целых три. Иначе говоря, в рам-
ках HTML 4 определяются 3 типа документов: Strict (строгий, предписываю-
щий четкое соблюдение идеологии структурной, логической разметки и под-
разумевающий отказ от большинства возможностей визуального представле-
ния данных), Transitional (переходный, намного более либеральный,
оставляющий право пользоваться сомнительным наследием эпохи HTML 3.2)
и Frameset (предназначенный для страниц, использующих фреймы — слабо-
актуальную ныне придумку компании Netscape, позволяющую поделить окно
браузера на несколько фрагментов с тем, чтобы отображать в каждом из них
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 69
разные документы). Наиболее предпочтительным, разумеется, является ис-
пользование типа документов Strict.
С момента, когда были созданы буквально все условия для торжества логики
и принципа разделения содержания и представления на уровне конечного
кода, а именно с момента утверждения Консорциумом W3C тандема
HTML 4 Strict + CSS2 в качестве официальных рекомендаций, прошло уже
7 лет. Для кого-то это будет неожиданностью, но "веб-стандарты" (о которых
мы замолвили слово в самом начале нашей книги, во введении) появились
отнюдь не вчера. Их повсеместное распространение тормозилось все это вре-
мя лишь низким качеством реальной поддержки упомянутых спецификаций
сколько-либо распространенными браузерами.
Сегодня уже можно констатировать, что все современные браузеры работают
с актуальными рекомендациями W3C на вполне приемлемом уровне. Наиболее
безупречно поддерживает их Mozilla Firefox 1.x, его догоняет Opera 7.x и 8.0,
а хуже всего на этом фоне выглядит Microsoft Internet Explorer 6.0. (Справед-
ливости ради нужно заметить, что разногласия проявляются в нюансах —
я повторюсь, в общем и целом качество поддержки современных рекоменда-
ций W3C даже в браузере от Microsoft можно без натяжки назвать вполне
сносным.)
Что касается самых свежих рекомендаций W3C, то в концептуальном плане
за семь лет изменилось немногое.
Сложный и противоречивый SGML в качестве универсального стандарта для
хранения любых структурированных данных постепенно уступает место
расширяемому языку разметки XML (extensible Markup Language). Этот язык
представляет собой компактное подмножество SGML, отличающееся от пра-
родителя существенно более строгими и однозначными правилами. HTML 4
(а точнее, HTML 4.01, утвержденный в конце 1999 г., и представляющий со-
бой результат незначительных модификаций последнего) стал в определен-
ном смысле "тупиковой веткой" — это последняя версия HTML, основанная
на SGML.
Развитием HTML 4 стал расширяемый (extensible) язык разметки гипертек-
ста— XHTML 1.0, по сути своей явившийся лишь переформулировкой стан-
дарта HTML 4.01 в соответствии с правилами XML 1.0. XHTML 1.0, за ис-
ключением ряда нюансов, в точности повторяет функциональность
HTML 4.01 и включает в себя все те же три типа документов: Strict, Transi-
tional и Frameset.
XHTML 1.1, полностью упразднивший типы документов Transitional и Frame-
set и утвердивший еще некоторые ощутимые нововведения, уже несколько
дальше от привычного HTML, но на практике пока используется довольно
редко— возможность обсудить некоторые тонкости представится нам не-
70
Часть I. Технологические основы
сколько позже. XHTML 2.0 уходит в еще больший отрыв от совместимости с
HTML— но эта версия пока еще находится в работе и в разряд официальных
рекомендаций W3C перейдет не так скоро. То же самое относится и к
CSS3 — перспективной версии CSS, снимающей многие ограничения, при-
сущие CSS2. В более скором будущем официальной рекомендацией W3C
должна стать спецификация CSS2 Revision 1 (CSS2.1), на момент написания
книги обладавшая статусом Candidate Recommendation. Эта спецификация
уточняет и корректирует некоторые важные положения рекомендации CSS2,
но отличается от нее не столь значительно, как CSS3.
В своей книге я хотел бы провозгласить уважение к идеологии структурной
разметки и концепции разделения содержания и представления.
Далее в этой главе мы рассмотрим применение для создания веб-страниц
обеих наиболее распространенных сегодня рекомендаций W3C — HTML 4.01
и XHTML 1.0, при этом по возможности придерживаясь наиболее строгих
правил, определенных для типа документов Strict. А следующая глава будет
посвящена технологии CSS2.
Построение HTML-документа
Чтобы не прибегать к неуклюжим искусственным обозначениям вроде
(X)HTML или HTML/XHTML, давайте условимся, что под единой аббревиа-
турой HTML в дальнейшем мы будем подразумевать оба языка, если иное
особо не оговорено. Я повторюсь: речь идет о стандартах HTML 4.01 Strict и
XHTML 1.0 Strict.
Для создания HTML-документа достаточно обычного текстового редактора,
например, стандартного ’’Блокнота” из комплекта поставки Windows. Есть и
более продвинутые редакторы, которые обладают способностью подсвечи-
вать разными цветами характерные конструкции HTML и других искусст-
венных компьютерных языков, но у меня, например, от такой подсветки по-
сле пары часов работы начинает рябить в глазах. Так или иначе, выбирайте
редактор на свой вкус, и в путь!
( Примечание
Иногда случается, что страница, исправно работавшая на домашнем компью-
тере, отображается неправильно или не отображается вовсе после загрузки на
удаленный сервер. Чтобы этого не происходило, следует придерживаться неко-
торых простых правил. В частности, следует помнить, что большинство реаль-
ных веб-серверов работает под управлением'операционных систем семейства
UNIX, которые, в отличие от Windows, привыкли различать прописные и строч-
ные буквы в названиях файлов. Кроме того, эти две платформы используют от-
личающиеся кодировки кириллицы. В связи со сказанным старайтесь всегда
называть файлы, относящиеся к проекту сайта, только строчными и только ла-
тинскими буквами.
Гпава 2. Создание простейших страниц с помощью языка разметки HTML
71
Кроме того, главную страницу сайта есть резон назвать именем index.html. Вы-
брав такое название, вы наверняка не ошибетесь: при использовании практи-
чески любого хостинга она будет открываться по умолчанию при запросе корня
документов вашего сервера. Хотя список названий индексных страниц, разуме-
ется, можно видоизменить, покопавшись в настройках сервера.
Как уже говорилось, документ HTML состоит из текста, составляющего со-
держание веб-страницы, ’’разбавленного” управляющими конструкциями
разметки — последние иначе называются тегами.
Наряду с тегами, в HTML используются еще так называемые ссылки на сим-
вольные объекты (Character Entity References, CER), позволяющие представ-
лять внутри текста разные специальные символы (например, угловые скобки,
кавычки и т. д.), которые, если их применить ’’напрямую”, без помощи CER,
могут быть неверно истолкованы браузером. Перечень всех возможных сим-
вольных объектов приведен в приложении 1.
Вообще говоря, весь HTML-код той или иной страницы может выглядеть как
одна-единственная сколь угодно длинная строка. Но в целях удобочитаемо-
сти кода содержимое HTML-файла можно разбить на несколько строк. Пере-
ход на новую строку внутри содержания документа интерпретируется как
знак пробела, а в иных случаях просто игнорируется.
Структура HTML-документа выглядит примерно таким образом:
<тег_1 атрибут_1="значение_1” атрибут_2=”значение_2”>
содержание_1&CER1;содержание_2
<тег_2>содержание_3</тег2>
содержание_4 &CER2;
</тег_1>
Как видите, теги заключаются в угловые скобки, а ссылки на символьные
объекты предваряются знаком амперсанда ("&") и оканчиваются точкой с
запятой (";”). Имена тегов могут содержать только латинские буквы и цифры.
Различают открывающие и закрывающие теги (или, иначе, старт-теги —
start tags и стоп-теги — stop tags). Старт-тег, так или иначе, влияет на после-
дующий ’’кусок” кода, но только до тех пор, пока не встретится стоп-тег. За-
крывающие теги отличаются от открывающих наличием косой черты (”/")
перед именем. Регистр букв (прописные, строчные) при записи тегов не име-
ет значения, но это относится только к HTML 4. В XHTML все теги нужно
записывать только строчными буквами.
Атрибуты определяют какие бы то ни было дополнительные, уточняющие
параметры того или иного тега. В большинстве случаев атрибуты характери-
зуются значениями, которые отделяются от названий атрибутов знаком ра-
венства и заключаются в кавычки. Но возможны и так называемые булевы
72
Часть I. Технологические основы
атрибуты, значения которых имеют природу ”да/нет". В HTML 4 такие атри-
буты можно записывать в минимизированной форме— иными словами, на-
личие ключевого слова с названием атрибута в записи тега означает "да”,
а отсутствие— ’’нет”. В XHTML, однако, минимизация атрибутов не допус-
кается, и булевы атрибуты в любом случае должны записываться в виде пары
атрибут-”атрибут”, слегка смахивающей на тавтологию.
Завершенная структурная единица HTML-документа называется элементом.
В большинстве случаев элемент определяется парой тегов — открывающим и
закрывающим. Подобные элементы называются контейнерами, поскольку
они хранят внутри себя те или иные данные. Элементы-контейнеры могут
быть вложенными друг В друга: <тег_1>. . .<тег_2>. . . </тег_2>. . . </тег_1>, но,
согласно всем рекомендациям W3C, НЕ могут быть перекрывающимися:
<тег_1>. . .<тег_2>. . . </тег__1>. . .</тег_2>.
Для некоторых элементов-контейнеров закрывающий тег в HTML 4 необяза-
телен, но в XHTML он должен присутствовать в любом случае. Для пустых
элементов, не содержащих внутри себя данных и описываемых непарными
тегами, в стандарте HTML 4 закрывающий тег запрещен. Хотя в XHTML,
подчиняющемся правилам XML, любому открывающему тегу должен соот-
ветствовать закрывающий, однако для описания пустых элементов вместо
записи <тег></тег> принято использовать сокращенную форму: <тег />.
(Пробел перед косой чертой необязателен, но в целях совместимости со ста-
рыми браузерами его лучше использовать.)
Наконец, XHTML-документ может включать в себя только один элемент
высшего уровня иерархии — корневой элемент', все прочие элементы долж-
ны быть вложенными в него. В HTML 4 такого ограничения нет.
Пора бы, однако, от абстрактных выкладок переходить к банальной конкре-
тике.
Минимальный HTML-документ
Минимально возможный документ, согласно стандарту HTML 4, должен со-
стоять из двух обязательных составляющих: ссылки на определение типа до-
кумента (DTD) и элемента <title>.. .</titie>, содержащего название доку-
мента. К сожалению, горе-разработчики, игнорирующие и одно, и другое,
встречаются на каждом шагу. Помимо перечисленного, минимальный доку-
мент HTML 4 должен включать в себя любую структурную единицу разметки
полезного содержания.
Вот возможный пример такого HTML-документа, обнаруживающий соответ-
ствие DTD HTML 4.01 Strict (листинг 2.1).
Гпава 2. Создание простейших страниц с помощью языка разметки HTML
73
[ Листинг 2.1. Минимальный документ, соответствующий стандарту
j HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”
"http://www.w3.org/TR/html4/strict.dtd">
<title></title>
<px/p>
Убедиться в том, что документ соответствует стандарту, можно при помощи
онлайнового валидатора, доступного на сайте Консорциума W3C по адресу
validator.w3.org. После загрузки стартовой страницы окно браузера будет
иметь вид, показанный на рис. 2.1.
файл Оавкй Пщзвхед
*4* * Z* * U http///ahdato[ w3 огд/
Ф1 «Setting StWrt
ж
Home
Markup Validation Service юв?
News
Docs
.......
•1Е1.Р&ГА0 Гееоэаск Lhik Checker
The W3C Markup Validation Service is a free service that checks Web documents in formats like HTML and XHTML for
conformance to W3C Recommendations and other standards
VALIDATE YOUR MARKUP
Vai.ioare by URL |................................................................................
Address. | i ШвЙ
Enter the URL of the page you want to check Advanced options are available from the Extended interface.
Validate by File Uploadj
Local File a-Checfex]
Select the file you want to upload and check Advanced options are available from the Extended R-i-c? bpioaci Interface
Note file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2. see our
on the W3C QA Website
Рис. 2.1. Стартовая страница онлайнового валидатора W3C
С Примечание
Онлайновый валидатор W3C предоставляет возможность проверить на соот-
ветствие тому или иному стандарту как уже размещенную, где бы то ни было,
в Интернете веб-страницу (в этом случае требуется указать ее URL), так и лю-
бой документ с локального диска.
74
Часть I. Технологические основы
Здесь, однако, есть небольшая тонкость. Дело в том, что процедура проверки
кода на валидность может быть завершена успешно только в том случае, если
указана кодировка документа. Веб-сервер, как правило, указывает кодировку
запрошенной веб-страницы в заголовке HTTP-ответа. Но в коде страницы, хра-
нящейся на локальной машине, этой информации обычно нет, поэтому попытка
проверить такую страницу может привести к ошибке. Чтобы сообщить валида-
тору, какая кодировка используется на той или иной странице, которую бы вы
хотели проверить, не загружая на удаленный сервер, можно воспользоваться
расширенным диалогом загрузки файлов с локального диска: validator.w3.org
/file-upload.html.
Я настоятельно рекомендую проверять при помощи валидатора все создавае-
мые веб-страницы. Прекрасно отдавая себе отчет в том, что свыше 90% су-
ществующих во Всемирной паутине сайтов не соответствует стандартам и
содержат ошибки, я все же хочу заметить, что времена меняются— мир
осознал необходимость стандартизации веб-технологий, и многие сайты
движутся в этом направлении. Особенно заметна эта тенденция на Западе —
о конкретных ее проявлениях мы еще успеем поговорить в последующих
главах. Пример успешной проверки документа на соответствие стандарту
HTML 4.01 Strict приведен на рис. 2.2.
файв Upew» Переход фвимдкн Инструмент» йдравм у ?
СЭ Перейти
Ф Swrifcif □ Latest
Markup Validation Service
Home ' Asout, , Nsq'<s Docs He ur Checker
THIS PAGE IS VALID HTML 4.01 STRICT!
Tip Of The Day: Choass URIs wisely
Note:
You can also view verbose results by setting the corresponding option on the Extended Interface
The document located at <http./AvAW.wel>anatoiTv.ru/> was checked and found to be valid HTML. 4 Qi Strict This means
that the resource in question identified itself”as "HTML -4 01 Strict" and that we successfully performed a formal validation
using an SGML or XML Parser (depending on the markup language used)
wMblTo show your readers that you have taken the care to create an interoperable Web page, you may display this
—|Con on any page that validates Here is the HTML you should use to add this icon to your Web page
<P>
<a href="http: //validator. w3. org/check?uri=referer"Ximg
src=”http://www.w3.org/Icons/valid-html401"
alt = "Valid HTML 4.01!" height=”31" width="88"X/a>
</p>
Thanks to this code, you will be able to re-validate your Web page by following the link (click on the image), and we
encourage you to do so every time you modify your document
; If you use CSS in your document, you should also cneck н for valiosty using the W3C CSS Validation Service. g
Рис. 2.2. Отчет валидатора об успешной проверке документа
на соответствие стандарту HTML 4.01 Strict
Гпава 2. Создание простейших страниц е помощью языка разметки HTML
75
Большинство же существующих во Всемирной паутине страниц содержит
несоответствия стандартам. Так, в коде главной страницы сайта
www.artlebedev.ru валидатор W3C обнаруживает около трех десятков оши-
бок, что демонстрируется на рис. 2.3.
фаске фад. tlgppxp* |ак«адки Сфевка
puj http,//7ahdator.w3 org/check>uri«http%3A%2F
. . . cid=="get" acLion“"/search/search.html"л<td ®idchn"33%" stylee"padding-left:22.
*3 Шиайм
25
26
27.
The mentioned element is not allowed to appear in the context in which you've placed it, the other mentioned elements are the
only ones that are both allowed there ana can contain the element mentioned. This might mean that you need a containing
element, or possibly that you've forgotten to close a previous element
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<tab!e>")
inside an inline element (such as “<a>", ''<span>u, or “<font>'')
Line 278, column 102 document type does not allow element "TD" here
.. width»”3 3V style®"padding-left :22; "
Line 280, column 4 end tag for "FORM” omitted, but its declaration does not permit this
</tatole>
Line 278, column 0 start tag was here
' farm name®"search" K)etbGd“"get" act ion="/search/search. httnl":
Feedback Tbo
Date 2004/07/21 1024 06
Рис. 2.3. Отчет валидатора W3C о проверке главной страницы сайта www.artlebedev.ru
Проверка документов валидатором убережет от ошибок, которые могут при-
вести к неверному отображению вашей страницы тем или иным агентом
пользователя. Напомню, что речь идет не только о браузерах, установленных
на настольных компьютерах и ноутбуках, но и о великом разнообразии дру-
гих устройств и сред вывода информации (карманных компьютерах, смарт-
фонах, программах речевого синтеза, дисплеях Брайля и т. д.). Никто не мо-
жет гарантировать, что код, не соответствующий стандарту, будет корректно
обрабатываться всеми существующими пользовательскими агентами, а тем
более теми, которые появятся в будущем.
Если мы откроем созданный нами документ с помощью какого-либо браузе-
ра, то мы увидим... пустое окно. Это неудивительно— наш документ не со-
держит никакой полезной информации. Элемент <titiex/titie>, опреде-
76
Часть I. Технологические основы
ляющий название документа, равно как и контейнер <рх/р>, задающий абзац
текста, в нашем примере совершенно пусты.
Давайте заполним их содержательной информацией (листинг 2.2).
i Листинг 2,2. Простейшая содержательная веб-страница, |
I созданная при помощи HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Ъ "http://www.w3.org/TR/html4/strict.dtd">
<^^е>Минимальный noKyMeHT</title>
<р>Эта веб-страница имеет простейшую структуру из всех возможных. </р>
Обновив содержимое окна браузера, мы получим вполне осязаемый резуль-
тат. Текст ’’Минимальный документ”, являющийся названием нашей веб-
страницы, отобразится в заголовке окна браузера, а содержимое контейнера
<р>.. .</р> — абзац текста — мы увидим непосредственно в окошке браузера
(рис. 2.4).
&айл Правка П^эаход Закладги Инструменты Сдраека
< ’ ц> ’ @ О & (LJ file: II: /examples/02/02/index. html
Ф» Getting Started L4 Latest Head&nss
31 © Перетк [[G”
Эта веб-страница тшеет простейшую структуру пз всех возможных.
Рис. 2.4. Отображение простейшей страницы в окне браузера Mozilla Firefox 1.0
Время "X": создание простейшего документа
с помощью XHTML
Если мы просто попытаемся заменить ссылку на объявление типа документа,
торжественно провозгласив, что наша веб-страница отныне является никак не
просто H{TML-, а вовсе даже XHTML-документом, у нас ничего путного не
выйдет.
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 77
Ибо, как мы уже говорили, XHTML-документ может содержать только один
корневой элемент разметки — а у нас их целых два: это . ,</titie> и
<р>.. .</р>. Кроме того, в XHTML 1.0 Strict являются обязательными элемен-
ты <head>.. .</head> и <body>.. .</body>, определяющие соответственно заго-
ловок и тело документа. Впрочем, хорошим тоном считается наличие этих
элементов и в документах, созданных при помощи "обычного" HTML 4.
Заголовок — это раздел документа, куда включаются служебные, вспомога-
тельные, управляющие элементы, которые не являются частью контента
страницы. Такие элементы не отображаются в окне браузера. В их числе —
элемент <titie>.. ,</titie>, содержимое которого, как мы помним, никак не
влияет на внешний вид веб-страницы, а показывается лишь в заголовке окна
браузера.
Напротив, тело документа— это контейнер, куда помещается полезное со-
держание веб-страницы. Оно отображается в окне браузера и воспроизводит-
ся прочими пользовательскими агентами в соответствии с определенными
для них правилами.
Перевод страницы, код которой приведен в листинге 2.2, на язык XHTML
будет выглядеть примерно так:
? Листинг 2.3, Простейшая страница, соответствующая стандарту
[ XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd”>
<html>
<head>
<title>MnHHManbHbii4 документе/title>
</head>
<body>
<р>Эта веб-страница имеет простейшую структуру из всех возможных.</р>
</body>
</html>
Как видите, первая строка видоизменилась — именно так выглядит ссылка на
определение типа документа XHTML 1.0 Strict.
Кстати говоря, для общего развития совсем не вредно прогуляться по тем
URL, которые указываются в этих самых объявлениях, и посмотреть воочию,
как выглядят файлы DTD. По адресу www.w3.org/TR/html4/strict.dtd вы
найдете определение типа документа HTML 4.01 Strict, а по адресу
www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd — DTD для XHTML 1.0 Strict.
78
Часть I. Технологические основы
Анализ файлов DTD выходит за пределы нашей книги — но ничего сверхъес-
тественного они в себе не таят, и интересующиеся после некоторой подго-
товки вполне смогут самостоятельно в них разобраться.
Пример небольшого фрагмента содержимого файла DTD XHTML 1.0 Strict
приведен на рис. 2.5.
ИЯВЗЕ2
fcupwr 4 & . -
------------------ -----------------------------------------------э
<!--================ Document structure ==================================-->
<!— the namespace URI designates the document profile -->
<!ELEMENT html (head, body)>
c’ATTLIST html
%il8n;
id ID ^IMPLIED
xmlns %URI; £FIXED ’http://www.w3.org/1999/xhtml’
<!--================ Document Head =======================================-->
<’entity % head.misc ”(script|style|meta|link|object)*'’>
<!-- content model is %head.misc; combined with a single
title and an optional base element in any order -->
«’ELEMENT head (Shead.misc;,
((title, %head.misc;, (base, %head.misc;)?) |
(base, %head.misc;, (title, %head.misc;))))>
<!ATTLIST head
%il8n;
id ID ^IMPLIED
profile %URI; ^IMPLIED
<!-- The title element is not considered part of the flow of text.
It should be displayed, for example as the page header or
window title. Exactly one title is required per document.
-->
<!ELEMENT title (#PCDATA)>
c’ATTLIST title
%il8n;
id ID ^IMPLIED
Рис. 2.5. Фрагмент содержимого файла DTD XHTML 1.0 Strict
Мы, однако, уходим от темы. В листинге, приведенном выше, можно отчет-
ливо видеть единственный корневой элемент <html>.. .</html>, который, соб-
ственно, и содержит в себе весь документ.
В корневой элемент документа вложены элементы <head>.. .</head> и
<body>...</body>, о назначении которых мы уже достаточно сказали. Все ос-
тальное сохранилось от того документа, который был описан в листинге 2.2.
Обратите внимание на "лесенку" отступов из пробелов в начале строк — бла-
годаря ей сразу видна иерархия элементов. Я, правда, обычно не делаю от-
Гпава 2. Создание простейших страниц с помощью языка разметки HTML
79
ступов перед тегами, определяющими разделы заголовка и тела документа,
зато отделяю эти элементы пустыми строками друг от друга и от тегов <htmi>
и </htmi>, но это уже дело вкуса. Самое главное, чтобы вы сами смогли легко
разобраться в собственноручно созданном коде, причем желательно вне зави-
симости от того, как давно он был написан.
Результат отображения кода, приведенного в листинге 2.3, браузером ничем
не отличается от итога обработки документа из листинга 2.2.
С прицелом на будущее
Описанных в предыдущем пункте "каркасов" документов на языках
HTML 4.01 Strict и XHTML 1.0 Strict вполне достаточно для создания весьма
качественных веб-страниц.
Есть, однако, еще несколько пожеланий. Пожеланий факультативных, необя-
зательных, но способствующих дальнейшему усовершенствованию создавае-
мых документов, улучшению их в плане универсальности.
W3C, пропагандируя доступность контента веб-ресурсов для максимально
широкого круга пользователей и выступая за интернационализацию Всемир-
ной паутины, рекомендует указывать язык содержимого веб-страниц с по-
мощью атрибута lang тега <htmi>. Это касается документов, созданных как
посредством HTML 4, так и с применением XHTML,
Нижеследующий фрагмент HTML-кода свидетельствует, что данный доку-
мент— на русском языке:
<html lang="ru">
</html>
Буквенный код того или иного языка, указываемый в значении атрибута lang,
приводится в соответствии со стандартом ISO 639 (подробную информацию
см. http://www.w3.org/WAI/ER/IG/ert/iso639.htm). Так, например, англий-
скому языку соответствует код еп, французскому — fr, немецкому — de, ук-
раинскому — uk, белорусскому — be и т. д.
Дальнейшее в этом пункте касается только XHTML-документов. Любая
XHTML-страница, как известно, представляет собой XML-документ.
Считается хорошим тоном начинать XML-документы с объявления XML. Оно
содержит номер версии языка, а также (иногда) некоторые дополнительные
параметры, например кодировку документа. Объявление XML не является
обязательным для XML-документов, но все же его рекомендуется указывать,
ибо в будущем вероятны ситуации, что документы без объявления XML бу-
80
Часть I. Технологические основы
дут восприняты как соответствующие самой последней версии языка, что
может привести к ошибкам и разного рода несовместимостям. В настоящий
момент в качестве официальных рекомендаций утверждены две версии
XML— 1.0 и 1.1. Язык XHTML 1.0, напоминаю, базируется на XML 1.0, яв-
ляясь подмножеством последнего.
В XML, который, как мы уже говорили, является универсальным стандартом
для хранения любых структурированных данных, определен атрибут
xml:lang, предназначенный для тех же целей, что и атрибут lang в HTML,
с той лишь разницей, что xml .-lang применим для любых XML-документов, а
не только для XHTML-страниц. Можно сказать, что xml:lang носит более
глобальный характер, нежели lang. Применение атрибута xml:lang является
предпочтительным для современных XML-ориентированных пользователь-
ских агентов, поисковых систем и т. д., но, к сожалению, старые браузеры, не
совместимые с XML, не понимают и попросту игнорируют этот атрибут. По-
этому рекомендуется употреблять как xml:lang, так и lang "в одном флаконе",
чтоб уж наверняка...
Кроме того, рекомендуется указывать принадлежность элемента <html>...
</html> к пространству имен XHTML.
( Примечание
XML позволяет разработчикам придумывать свои собственные, совершенно
произвольные теги. Поскольку именами тегов назначаются, как правило, ос-
мысленные слова, которых, положа руку на сердце, не так уж и много в челове-
ческой речи, в XML-документах разных типов вполне могут присутствовать оди-
наковые теги, обозначающие совершенно различные сущности. В этом нет ни-
чего криминального. (Можно привести такую аналогию: скажем, в английском и
французском языках есть слова, которые пишутся одинаково, но звучат по-
разному, а порой обладают и разными значениями.) Однако если элементы,
наделяемые различной смысловой нагрузкой, но при этом определяемые оди-
наковыми тегами, встретятся в одном документе, произойдет конфликт имен —
при обработке такого документа станет весьма проблематичным определить,
данные какого типа несет в себе тот или иной элемент.
Механизм пространств имен позволяет разрешать подобные конфликты. Впро-
чем, мне не хотелось бы в данной книге вдаваться в его устройство и вообще
углубляться в тонкости XML — этому распрекрасному языку посвящены другие
весьма увесистые тома, в богатейшем ассортименте представленные на полках
книжных магазинов. Скажу лишь, что наличие или отсутствие ссылки на про-
странство имен XHTML никак не сказывается на поведении привычных нам
браузеров; все это можно рассматривать скорее как задел на светлое будущее
и лишний фактор душевного спокойствия и уверенности в том, что все сделано
"как надо". А это само по себе неплохо.
С учетом всрго вышесказанного "минимальный" XHTML-документ превра-
щается в нечто вроде такого (листинг 2.4).
Гпава 2. Создание простейших страниц с помощью языка разметки HTML
81
I Листинг 2.4. "Минимальный" XHML-документ
<?xml version=”l.О" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
%> "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
chtml xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<Ь1Ь1е>Минимальный документ</Ь1Ь1е>
</head>
<body>
<р>Эта веб-страница имеет простейшую структуру из всех возможных.</р>
</body>
</html>
Первая строка — то самое объявление XHTML; указываемая здесь кодировка
должна, разумеется, совпадать с той, в которой документ возвращается сер-
вером. Тег <htmi> "оброс" новыми атрибутами— так, значением атрибута
xmlns является идентификатор пространства имен XHTML, а после атрибута
lang добавился атрибут xml:lang с тем же самым значением, что и у lang. Все
остальное, если не принимать в расчет слегка видоизменившуюся "лесенку",
всецело и полностью повторяет листинг 2.3.
Теперь, после всестороннего рассмотрения теоретических основ построения
HTML-документов, мы можем со знанием дела заняться созданием содержа-
тельных веб-страниц.
Структурирование данных
Все элементы логической разметки можно подразделить на два типа: блочные
(block) и внутристрочные (inline).
Разница между ними заключается в том, что при визуальном отображении
страницы следующие друг за другом блочные элементы располагаются вер-
тикально, а внутристрочные — горизонтально. Иными словами, любой блоч-
ный элемент всегда разрывает строку, а внутристрочный — нет.
Абзац является примером блочного элемента — он всегда начинается с новой
строки. Любой элемент, который следует за абзацем, будет также перенесен
на новую строку.
В контейнер <body>.. .</body>, согласно рекомендациям W3C, могут быть
непосредственно вложены исключительно блочные элементы структурной
82
Часть I. Технологические основы
разметки данных. Внутристрочные элементы могут располагаться только
внутри них.
При всем многообразии тегов, которыми изобилует HTML, для разметки по-
давляющего большинства текстов будет достаточно тех элементов, которые
мы обсудим в этом разделе.
Заголовки
Почти любой текст, будь то краткая новость или объемная статья, должен
быть озаглавлен. Большие тексты, как правило, еще и подразделяются на час-
ти, причем порой неравнозначные. Скажем, в книгах мы можем выделить та-
кие структурные единицы текста, как часть, глава, раздел, параграф, пункт
и т. п.
В HTML предусмотрено 6 видов текстовых заголовков, которые определяют-
ся тегами <hi>, <h2>, <h3>, <h4>, <h5> и <h6> и предполагают иерархическую
структуру. Так, заголовок, определяемый тегом <hl>, называется заголовком
первого уровня, имеет наибольший "вес" и в графических браузерах обычно
отображается шрифтом самого крупного размера (кегля).
Хорошим тоном считается использовать этот вид заголовка для озаглавлива-
ния всей страницы в целом.
Заголовок, определяемый тегом <h2>, имеет меньший "вес" и отображается в
графических браузерах шрифтом чуть меньшего размера. Такая тенденция
прослеживается и далее — наименьшим "достоинством" обладает заголовок
шестого уровня, определяемый тегом <h6>.
Не следует нарушать естественную иерархичность заголовков. Я не вижу ни-
каких разумных причин для того, чтобы название всей страницы задавать в
виде заголовка не первого, а, скажем, третьего уровня. Совершенно незачем
"перепрыгивать" через уровни — сочетание заголовка первого уровня и сле-
дующего за ним заголовка четвертого уровня выглядит, по меньшей мере,
странным. Если оформление заголовка того или иного уровня, используемое
по умолчанию, вас не устраивает, его можно переопределить с помощью
CSS, о чем мы будем говорить в следующей главе.
Фрагмент кода, иллюстрирующий использование различных заголовков,
приведен в листинге 2.5.
[ Листинг 2,5. Заголовки в HTML
<Ь1>Заголовок первого уровня</Ы>
<Ь2>Заголов<^к второго уровня</Ь2>
<ЬЗ>Заголовок третьего уровня</ЬЗ>
Гпава 2. Создание простейших страниц с помощью языка разметки HTML
83
<Ь4>Заголовок четвертого уровня</Ь4>
<Ь5>Заголовок пятого уровня</Ь5>
<Ь6>Заголовок шестого уровня</Ь6>
(Здесь и далее подразумевается, что приведенные конструкции размещаются
в контейнере <body>.. .</body> HTML-документа.)
Пример отображения страницы с заголовками шести уровней приведен на
рис. 2.6.
" ояоьки * Firefox
, ...............f’/4
~ ржк* 4 .
| Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Рис. 2.6. Отображение браузером страницы с заголовками различных уровней
Абзацы
При рассмотрении простейших примеров веб-страниц мы уже познакомились
с тегом <р> — именно он используется для определения абзаца, самой эле-
ментарной и, пожалуй, самой главной логической единицы текста.
Предлагаю сразу же воплотить в HTML несколько абзацев текста. Я возьму
первые три абзаца текущего раздела книги (листинг 2.6).
84
Часть I. Технологические основы
( Листинг 2.6. Абзацы в HTML
<р>Все элементы логической разметки можно подразделить на два типа:
блочные (block) и внутристрочные (inline).</р>
<р>Разница между ними заключается в том, что при визуальном отображении
страницы следующие друг за другом блочные элементы располагаются
вертикально, а внутристрочные — горизонтально. Иными словами,
любой блочный элемент всегда разрывает строку, а
внутристрочный&пЬзр;— нет.</р>
<р>Абзац является примером блочного элемента — он всегда
начинается с новой строки. Любой элемент, который следует за абзацем,
будет также перенесен на новую строку.</р>
Пример отображения страницы, содержащей несколько абзацев текста, пока-
зан на рис. 2.7.
[JiagKa &ид Переход -^кладки Инструменты Справка О ",
I file:///Z:/examples^ Перейти | Сж
фздод batted
Все элементы логической разметки можно подразделить на два типа: блочные
(block) п внутристрочные (inline).
Разница между ними заключается в том. что при визуальном отображении
страницы следующие друг за другом блочные элементы располагаются
вершкально, а внутрис гр очные — горизонтально. Иными словами, любой
блочный элемент всегда разрывает строку, а внутристрочный — нет.
Абзац является примером блочного элемента — он всегда начинается с новой
строки. Любой элемент, который следует за абзацем, будет также перенесен на
: НОВуЮ строку.
Рис. 2.7. Абзацы текста, отображенные в окне браузера
По умолчанию большинство привычных нам графических браузеров отобра-
жает абзацы текста, предусматривая между ними вертикальные отступы.
Текст выравнивается только по левому краю, тогда как правый край остается
’’рваным” (у полиграфистов это называется флаговым набором).
Такая традиция, однако, в большей мере характерна для англоязычных тек-
стов. Учитывая тот факт, что средняя длина слова в английском языке при-
мерно на 40% меньше, чем в русском, да к тому же латинский алфавит богат
узкими (в пропорциональном начертании) буквами, такими как "Р, "i", "j",
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 85
”1”, ”t”, аналогов которым почти нет в русском. Флаговый набор нисколько не
мешает восприятию англоязычных текстов, а даже помогает, делая компози-
цию страницы более динамичной. К сожалению, русскоязычные тексты при
флаговом наборе выглядят уже намного менее удобочитаемыми, особенно
при небольшой ширине колонки набора. Поэтому для русскоязычных текстов
более традиционен набор с выравниванием (выключкой) строк по всей шири-
не (или, как скажут полиграфисты, по формату) колонки набора, при кото-
ром как левый, так и правый край остаются ровными. Для русскоязычного
набора нехарактерны и вертикальные отступы между абзацами — вместо них
используются горизонтальные, предваряющие первые строки абзацев (иными
словами, мы начинаем абзацы с ’’красной строки”).
Изменить форматирование абзацев позволяют каскадные листы стилей, и об
этом мы побеседуем в следующей главе.
Пока же обратим внимание на применение ссылок на символьные объекты в
листинге 2.6.
Натренированный глаз увидит такие ссылки во втором и третьем абзацах.
Причем во всех случаях мы имеем дело с сочетаниями из двух подобных
ссылок.
Несмотря на ТО, ЧТО ВЫГЛЯДЯТ ОНИ по-разному-------- — и
О;—, это совершенно эквивалентные записи. Ссылки на символьные
объекты могут быть записаны как в виде мнемонических подстановок, наи-
более удобных для запоминания, так и в виде числовых кодов.
Подстановка &пЬзр; или, что то же самое, О;, соответствует символу не-
разрывного пробела (non-breaking space), который используется вместо обыч-
ного пробела в тех случаях, когда разрыв строки на месте пробела нежела-
телен.
В нашем примере неразрывный пробел в обоих абзацах отделяет от предше-
ствующего текста символ длинного тире, представленный в одном случае
мнемоподстановкой —, а в другом— эквивалентной числовой подста-
новкой —.
В одном и том же документе не возбраняется использовать как мнемониче-
ские, так и числовые подстановки для символьных объектов— самое глав-
ное, чтобы все они фигурировали в перечне, утвержденном W3C. Напоми-
наю, что список всех возможных в HTML символьных объектов приведен
в приложении 1.
Q Примечание
Грамотная подготовка текстового содержания сайта — большая наука. Многие
обыватели не задумываются о правилах текстового набора, формировавшихся
столетиями, и запросто "лепят" дефисы ("-") вместо тире ("—"). Мол, черточ-
ка — она и в Африке черточка.
86
Часть I. Технологические основы
Между тем, существует как минимум четыре разновидности "черточек", строго
различных по своему функциональному назначению: это уже упоминавшиеся
дефис и длинное тире, а также короткое тире в HTML определяется мне-
моподстановкой – или кодом –) и знак "минус" ("-", задается мне-
моподстановкой − или числовой подстановкой −).
Дефис имеет ширину, равную трети кегля шрифта (т. е. высоты строки) и значи-
тельно толще обеих разновидностей тире и минуса. Короткое тире и минус
одинаковы по ширине (половина кегля шрифта) и толщине, однако минус нахо-
дится в строке заметно выше короткого тире. Само короткое (или, иначе, полу-
кегельное) тире никогда в жизни не применялось в русскоязычной типографской
традиции — оно вероломно вторглось в русские тексты вследствие всеобщего
распространения текстового процессора Microsoft Word, в котором настройки
автозамены по умолчанию убийственны с точки зрения набора на русском язы-
ке, а среднестатистическому пользователю, разумеется, и в голову не придет
что-то там такое менять. В русскоязычном наборе используется никакое не ко-
роткое, а длинное (кегельное) тире, которое, как следует из альтернативного
названия, шире короткого вдвое.
Интересны сами названия мнемоподстановок — и –. Собственно,
по-английски длинное и короткое тире так и называются: em dash и en dash.
Чуть позже мы увидим, что одна из единиц измерения в CSS (см. главу 3) на-
зывается em. Это не что иное, как англоязычное наименование одной из глав-
ных типометрических единиц — кегельной (или круглой) шпации. 1 em соответ-
ствует величине кегля данного шрифта, к которой, в свою очередь, наиболее
близка ширина прописной "М", являющейся обычно самой широкой из всех
букв.
Вообще говоря, значение букв "т" и "п" в латинском наборе трудно переоце-
нить: ширины этих литер испокон веков служили эталонами весьма разнооб-
разных величин. Так, например, классические традиции латинского набора
предписывают устанавливать базисный межбуквенный интервал равным шири-
не внутрибуквенного просвета буквы "п". А средний межсловный интервал в та-
ком случае должен соответствовать ширине самой буквы "п". Эту золотую
формулу гармонии вывел еще в 1522 году итальянский печатник Людовико
Винчентино (Ludovico Vincentino).
Правилам набора и верстки текста учат весьма солидные справочные изда-
ния. Текст— весьма и весьма непростая материя, требующая к себе макси-
мально внимательного и бережного отношения. У нас нет ни малейшей воз-
можности обсуждать этот неподъемный пласт сколько-либо глубоко — иначе
можно по уши завязнуть в бесчисленных тонкостях и нюансах. Однако самые
главные, первоочередные нормы оформления текстовых блоков мы рассмот-
реть просто обязаны.
Азы текстового набора
Пробелы в русском наборе обязательны в нижеперечисленных случаях:
□ только после (не перед!) точки или многоточия в конце предложения, точ-
ки с запятой, запятой, двоеточия, вопросительного и восклицательного
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 87
знаков и любых их сочетаний, закрывающей скобки и закрывающей ка-
вычки;
□ только перед (не после!) открывающей скобкой, открывающей кавычкой,
многоточием в начале предложения;
□ перед и после длинного тире, причем перед тире полагается неразрывный
пробел. Вопросы, касающиеся отбивки знака тире пробелами, на самом
деле, не столь однозначны. В английском наборе, например, вокруг длин-
ного тире не положено ставить пробелов. А в русскоязычной типограф-
ской традиции длинное тире должно отбиваться тонкими шпациями — уз-
кими пробелами шириной в четверть кегля. В числовых диапазонах, одна-
ко, этого делать не нужно. А если полистать старые книги, то нельзя не
заметить, что на их пожелтевших страницах знаки тире, следующие за
точками и запятыми, с левой стороны не отбиваются пробелами.
Внутри любого сочетания знаков препинания (если только в нем не участвует
длинное тире) никогда не ставится никаких пробелов. Неразрывные пробелы
обязательны в следующих ситуациях:
□ между двумя инициалами, между инициалом и фамилией:
a. с. Пушкин, между сокращенными обращениями и фамилией,
между географическими сокращениями и соответствующими названиями:
тов. Киров, г. Санкт-Петербург;
□ внутри сокращений и&пЬзр;т.&пЬзр;д., n т. п., T. e.
(пробел, отделяющий ”т. е.” от последующего текста, должен также быть
неразрывным) и пр.;
□ между числами и соотносящимися с ними единицами измерения, обозна-
чениями валют, знаками номера или параграфа, разнообразными сокраще-
ниями, а желательно— и вообще любыми словами: б50&пЬзр;км,
iooo $ (кстати, запись ”$1000” является в русском наборе недопусти-
мой — префиксная форма уместна лишь в английском наборе),
§ 33, № 302-бис, глава&пЬзр;2, 10 негритят,
l января, 2005 г., XXI в.;
□ между группами разрядов в десятичных записях больших чисел, начиная с
пятизначных: 65 536;
□ между однобуквенным предлогом или союзом и последующим текстом в
начале предложения: д&пЬзр;тем временем;
□ между внутритекстовыми пунктами, такими как ”а)”, ”б)”, ”1)”, ”2)” и по-
следующим текстом;
□ в других случаях, когда соображения здравого смысла диктуют желатель-
ность оставить слова или символы, разделенные пробелом, на одной стро-
ке: Правитель CTBO РФ, OAO РВД, Firefox 1.0 ИТ. Д.
88
Часть I. Технологические основы
Многоточие (”...”)— это единый символ (в HTML его можно задать подста-
новками sheiiip; или …). Замена многоточия на три идущие подряд
точки неправомерна.
Среди кавычек можно выделить как минимум четыре характерных типа:
□ «французские» («елочки»)— « («) И » (»);
□ „немецкие” („лапки”)— „ („) И “ (“);
□ ’’английские двойные” — “ (“) И ” (”);
□ ‘английские одинарные’ — ‘ (‘) И ’ (’).
В русском языке некоторые редакции для набора традиционно применяют
французские кавычки («елочки»), а для вложенных кавычек— немецкие
„лапки”. В английской типографской традиции приняты английские двойные
кавычки, в качестве вложенных же кавычек применяются английские оди-
нарные. Кстати говоря, в английской типографской традиции точки и запятые
принято вносить внутрь кавычек, даже если по смыслу они должны стоять
снаружи. Апостроф — это та же самая закрывающая одинарная английская
кавычка (’ ИЛИ ’).
Символ (') (одинарная прямая кавычка) не может использоваться в наборе в
качестве апострофа, равно как и знак (”) (двойная прямая кавычка) не приме-
няется в типографской традиции. Эти символы используются в основном в
различных искусственных компьютерных языках— например, в том же
HTML для обрамления значений атрибутов, поэтому иногда называются
’’программистскими”.
Стоит отметить, что прямые кавычки, вопреки расхожему мнению, не имеют
никакого отношения К знакам фута ('— ′, ′) или дюйма ("—
″, ″). Сравните рисунки этих знаков и прямых кавычек в крупном
кегле и убедитесь, что между означенными категориями нет ничего общего.
Примечание j
Вообще говоря, правила текстового набора, применимые для веб-страниц, су-
щественно отличаются от норм, принятых для печатных изданий — я бы даже
сказал, первые являются жалкими упрощениями вторых.
Основное отличие веб-страниц от печатных полос — невозможность жесткого
закрепления взаимного расположения слов текста в пределах абзацев, ведь
постоянство гарнитуры и кегля шрифта, неизменность ширины колонки набора
от платформы к платформе, от браузера к браузеру, от пользователя к пользо-
вателю никем не гарантируется.
К томуже, на веб-страницах почти никогда не бывает переносов. Справедливо-
сти ради нужно заметить, что какой-никакой механизм для них предусмотрен —
в частности, в HTML определен символ мягкого переноса (­ или ­).
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 89
Но, во-первых, он некорректно воспринимается некоторыми устаревшими брау-
зерами (будучи интерпретируемым как обыкновенный дефис), а во-вторых, при
его использовании мы вынуждены были бы записывать слова примерно так:
ne­pe­Hoc. Делать это вручную сродни самоубийству— значит, нуж-
ны средства автоматизации, основанные на серверных технологиях. Но вот эти
самые ­ через каждый слог весьма значительно (фактически двукратно)
увеличивают объем текста, что, разумеется, не лучшим образом сказывается
на времени загрузки страниц. Ждем CSS3, который обещает большую по срав-
нению с CSS2 гибкость в управлении разрывами строк...
Принудительный разрыв строки
Если мягкий перенос в HTML — вещь достаточно капризная, то вот перенос
"жесткий", принудительное завершение строки "раньше времени" в пределах
одного блочного элемента— вполне решаемая задача. Для этого использует-
ся тег <Ьг>, образующий пустой элемент. Иными словами, тег <ы> не имеет
пары — закрывающего тега. Но в таком виде он может быть записан только в
HTML 4, а в XHTML, напоминаю, необходимо использовать следующую
форму записи: <Ьг /> (листинг 2.7).
\ Листинг 2Х Использование элемента <Ьг /> в XHTML
<р>Люблю тебя, Петра творенье,<Ьг />
Люблю твой строгий, стройный вид,<Ьг />
Невы державное теченье,<Ьг />
Береговой ее гранит,<Ьг />
Твоих оград узор чугунный,<Ьг />
Твоих задумчивых ночей<Ьг />
Прозрачный сумрак, блеск безлунный,<Ьг />
Когда я в комнате моейсЬг />
Пишу, читаю без лампады,<Ьг />
И ясны спящие громадьКЬг />
Пустынных улиц, и светла<Ьг />
Адмиралтейская игла,<Ьг />
И, не пуская тьму ночную<Ьг />
На золотые небеса,<Ьг />
Одна заря сменить другую<Ьг />
Спешит, дав ночи полчаса.</р>
Отображение страницы, описанной в вышеприведенном листинге, демонст-
рируется на рис. 2.8.
90
Часть I. Технологические основы
' всодник * й
........ ;< г? '
&*. ^tpvwtw cpg
Ф * S 9:© рТЗ^
Люблю тебя, Петра творенье,
Люблю твой строгий, стройный впд,
Невы державное теченье,
Береговой ее гранит.
Твоих оград узор чугунный,
Твоих задумчивых ночей
Прозрачный сумрак, блеск безлунный,
Когда я в комнате моей
Пишу, читаю без лампады,
И ясны спящие громады
Пустынных улиц, и светла
Адмиралтейская игла,
И, не пуская тьму ночную
На золотые небеса,
Одна заря сменить другую
Спешит, дав ночи полчаса.
Рис. 2.8. Классический случай использования "жесткого переноса" —
оформление стихотворных строф
Списки
Наряду с абзацем, весьма распространенным способом логического структу-
рирования текста является список, или перечень. Читатели этой книги, веро-
ятно, уже успели повстречаться на ее страницах с множеством разнообразных
списков. Так, например, подобным образом организована классификация ти-
пов кавычек, которую мы обсуждали парой страниц ранее.
Списки в HTML делятся на маркированные (определяются тегом <ui>) и ну-
мерованные (задаются, соответственно, тегом <oi>). Элементы маркирован-
ных списков, как следует из названия, предваряются маркерами— в боль-
шинстве ныне распространенных графических браузеров по умолчанию мар-
керы отображаются в виде кружочков. Элементы нумерованных перечней
предваряются, как и следует ожидать, цифрами. Номера элементов таких
списков формируются автоматически.
Элементы как маркированных, так и нумерованных списков задаются тегом
<li>.
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 91
В главе 3 мы обсудим, как CSS позволяет изменять внешний вид маркеров и
нумерацию, а пока рассмотрим пример кода, использующий оба типа списков
(листинг 2.8).
|Листинг 2.8. Структурирование данных с помощью списков
<р>Хороший сайт отличают как минимум следующие черты:</р>
<ul >
<И>высокое качество информационного наполнения
и грамотность его подачи;</li>
<1^оригинальность и эстетическая привлекательность
внешнего облика страниц;</li>
<И>доступность содержания сайта для максимально
широкого круга пользователей вне зависимости от
применяемых ими типов устройств и версий браузеров,
а также от ограничений по состоянию здоровья;</li>
<И>эргономичность элементов пользовательского
интерфейса сайта, обеспечивающая высокую эффективность,
но в то же время легкость и непринужденность взаимодействия
посетителя с веб-ресурсом;</li>
<И>надежность и безопасность используемых технологических
решений, четкая согласованность работы всех компонентов;</li>
<И>безупречная проработка всех деталей и нюансов.</li>
</ul>
<р>Технологическая цепочка создания сайта состоит из следующих шагов:</р>
<о1>
<И>постановка задачи, включающая в себя:
<ul>
<И>анализ существующих конкурирующих
и/или родственных проектов;</li>
<И>выработку концепции; </li>
</ul>
</li>
<11>подготовка первоначального информационного наполнения;</li>
<11>разработка макетов страниц;</li>
<И>подготовка шаблонов страниц; </li>
<1^проектирование и реализация сервисов;</li>
<И>сборка всех компонентов воедино; </li>
<И>тестирование; </li>
<И>ввод в эксплуатацию; </li>
<И>пожизненное сопровождение&пЬзр;— информационное
наполнение и техническая поддержка.</li>
</ol>
92
Часть I. Технологические основы
Перейти |
' ;/ . -им
Правка §ид Пдреход ^кладки ^струтенты
Ф ’ ф - ® © в> г ,4 flie. HIZ: Iexarnples/02/08/iridex. html
U _ _____________
i Хороший сайг отличают как минимум следующие черты:
♦ высокое качество информационного наполнения и грамотность его подачи;
♦ оригинальность и эстетическая привлекательность внешнего облика страниц;
♦ доступность содержания сайта для максимально штфокого круга пользователей вне
зависимости от применяемых ими пшов устройств и версий браузеров, а также от
ограничений по состоянию здоровья;
♦ эргономичность элементов пользовательского интерфейса сайта, обеспечивающая
высокую эффективность, но в то же время легкость и непринужденность
взаимодействия посеппеля с веб-ресурсом;
♦ надежность и безопасность используемых технологических решений, четкая
согласованность работы всех компонентов;
♦ безупречная проработка всех детален и нюансов.
{ Технологическая цепочка создания сайта состоит из следующих шагов:
1. постановка задачи, включающая в себя:
о анализ существующих конкурирующих iviuni родственных проектов;
о выработку концепции;
2. подготовка первоначального информационного наполнения;
3. разработка макетов страниц;
4. подготовка шаблонов страниц;
5. проектирование и реализация сqjJBiicoB;
6. сборка всех компонентов воедино;
7. теспфование;
8. ввод в эксплуатацию;
9. пожизненное сопровождение — информационное наполнение и техническая
поддержка.
ir-<yFQW.......................................................................JA.4
Рис. 2.9. Пример использования списков
Внешний вид страницы, использующей различные типы списков, показан на
рис. 2.9.
Как видим, списки могут быть вложенными друг в друга. Число уровней
вложенности может быть произвольным; вкладывать друг в друга можно
списки как одного и того же, так и разных типов.
Логическое выделение
Часто бывает необходимым акцентировать внимание читателя на каких бы то
ни было словах или фразе в тексте.
Для этих целей в HTML предусмотрены теги <ет> (от слова emphasis — выра-
зительность, ударение) и <strong> (сильное, мощное выделение). Графиче-
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 93
ские браузеры, как правило, выделяют содержимое контейнера <ет>.. ,</ет>
курсивным начертанием, а содержимое элемента <strong>.. .</strong>— по-
лужирным. Программы синтеза речи выделяют фрагменты текста, размечен-
ные подобным образом, при помощи интонации.
Следует подчеркнуть, что теги <ет> и <strong> определяют элементы логиче-
ской разметки данных. Их основное назначение НЕ состоит в выделении тек-
ста курсивом или полужирным шрифтом. Если существует потребность
оформить некий фрагмент текста тем или иным начертанием без придания
этому смысла какого бы то ни было логического ударения, то лучше для это-
го использовать CSS.
Примечание
В HTML существуют теги <i> и <Ь>, позволяющие выделить ограниченный оп-
ределенными ими контейнерами текст курсивным и полужирным начертанием
соответственно. Равно как и есть тег <и>, позволяющий подчеркнуть текст ли-
нией, а также тег <s>, предназначенный для перечеркивания текста. Использо-
вать их все, тем не менее, крайне не рекомендуется, ибо эти теги нарушают
принцип разделения содержания и представления, являя собой элементы никак
не структурной, а визуальной разметки. Задачи, реализуемые этими тегами,
предпочтительнее решать с помощью CSS.
файд Цраака Сараака
Ф • Ф • $ © Г 3 file: ///Z:/examples/02/09/index. html
39 Q Парайти [‘GT
«Satbraj Started Q Utest Headtee?
Ни в коем случае не следует подменять логику построения документа
его визуальным нредетпаценнем. Теги логического ударения
НЕ предназначены для выделения фрагментов текста курсивным пли
полужирным начертанием?
Рис. 2.10. Страница, содержащая теги логического ударения
По традиции, приводим пример (листинг 2.9) использования тегов <ет> и
<strong>.
........................................................
I Листинг 2.9. Применение элементов логического ударения
<р>Ни в коем случае не следует подменять <ет>логику построения</ет>
94
Часть I. Технологические основы
документа его <ет>визуальным представлением</ет>. Теги логического
ударения <э1:гопд>НЕ&пЬзр;предназначены</з1:гопд> для выделения фрагментов
текста курсивным или полужирным начертанием!</р>
Результат отображения текста, размеченного тегами логического ударения,
в графическом браузере демонстрируется на рис. 2.10.
Гипертекстовые ссылки
Гипертекстовые ссылки— основа идеологии Всемирной паутины. Об их на-
значении; о том, что такое гипертекст и гипермедиа, было сказано многое, но
только теперь мы приблизились вплотную к тому, чтобы обсудить, каким
именно образом определяются гипертекстовые ссылки в HTML.
Гипертекстовые ссылки задаются с помощью тега <а>. В атрибуте href этого
тега должен быть указан URI того объекта, на который ведет ссылка. Эле-
мент, определяющий гипертекстовую ссылку, является элементом-
контейнером, поэтому ему положен закрывающий тег </а>. Между откры-
вающим и закрывающим тегами, в простейшем случае, может располагаться
какая-либо надпись, раскрывающая назначение ссылки. Но внутри контейне-
ра вполне может быть и элемент другого рода — скажем, ссылкой может яв-
ляться графическое изображение.
( Примечание
При наведении курсора мыши на ссылку в статусной строке браузера (той,
что обычно помещается внизу окна) отображается URI ресурса, на который ве-
дет ссылка. Это очень ценная информация: по ней посетитель может узнать,
является ли ссылка внешней или внутренней по отношению к данному сайту, на
объект какого типа она указывает (к примеру, на обычную HTML-страницу, на
графическое изображение или на ZIP-архив) и т. п. К сожалению, некоторые
недальновидные разработчики используют статусную строку не по назначе-
нию— например, выводят в ней при помощи JavaScript различные надписи
вроде "Добро пожаловать". Нельзя придумать более бездарного способа ис-
пользования благ, предоставляемых интерфейсом браузера.
Поскольку адресацию ресурсов с помощью URI мы достаточно подробно об-
судили в главе У, перейдем сразу к примерам гиперссылок.
Абсолютные ссылки
Ссылки с абсолютными идентификаторами URL должны обязательно содер-
жать в себе имя схемы, иначе браузер будет полагать, что URL является от-
носительным. В результате ссылка, скорее всего, будет указывать на несуще-
ствующий объект, у
Такой, например, может быть ссылка на веб-сайт:
<а href="http://www.web-anatomy.ru/">Web-Anatomy.Ru</a>
Гпава 2. Создание простейших страниц с, помощью языка разметки HTML 95
Обратите внимание на замыкающий символ косой черты в значении атрибута
href в этом примере. Он говорит о том, что ссылка указывает не на конкрет-
ный файл (к примеру, http://www.web-anatomy.ru/index.shtml), а на каталог,
в данном случае— корневой. Если пропустить злополучный "слэш", катаст-
рофы не случится. Но страница будет открываться медленнее по причине
переадресации— сервер отправит клиенту сообщение с кодом статуса 301
(Moved Permanently) с верной ссылкой на каталог, что спровоцирует лишний
служебный трафик и отсрочку передачи индексного файла каталога браузеру.
Пример ссылки на почтовый адрес:
<а href="mailto:artemy@lomov.ru?subject=Book">HanncaTb письмо автору</а>
Если щелкнуть мышью по такой ссылке, откроется окно почтовой программы
с заполненными полями Кому и Тема.
По аналогии можно организовать ссылку на любой объект, идентифицируе-
мый при помощи URL
( Примечание J
Если ссылка указывает на веб-страницу или иной файл понятного браузеру
формата, браузер попытается открыть такой объект самостоятельно.
Подключаемые модули (плагины, plug-ins) существенно расширяют функцио-
нальность браузера, позволяя отображать в его окне, скажем, Flash-ролики,
трехмерные сцены, книги в формате DjVu ит. д. Собственно, это иллюстрация
одного из срезов понятия "гипермедиа".
Если же браузер не способен обработать объект даже при помощи подключае-
мых модулей, он может предложить пользователю прибегнуть к услугам той
или иной сторонней программы (скажем, Internet Explorer автоматически откры-
вает звуковые файлы посредством проигрывателя Windows Media Player).
В любом случае, щелкнув по ссылке правой кнопкой мыши и вызвав тем самым
контекстное меню, пользователь имеет возможность сохранить ресурс на ло-
кальный диск с тем, чтобы потом самостоятельно разобраться, что с ним де-
лать. В Internet Explorer соответствующий пункт выпадающего меню называется
Сохранить объект как...
Относительные ссылки
Для взаимосвязи страниц одного и того же сайта, как правило, используются
гиперссылки с указанием относительных URL, что намного удобнее, нежели
применение абсолютных ссылок.
Относительные URL не привязаны к доменному имени сайта — поэтому если
вдруг возникнет необходимость по той или иной причине сменить домен, то
ссылки, связывающие страницы сайта между собой, не придется править.
96
Часть I. Технологические основы
Относительные URL позволяют просматривать сайт на локальной машине,
что чрезвычайно удобно для разработчика. Наконец, относительные URL ко-
роче абсолютных, что облегчает страницы и ускоряет их загрузку.
Приведем некоторые примеры ссылок с относительными URL.
Простейшая из подобных ссылок указывает на файл, располагающийся в том
же каталоге, что и ссылающийся:
<а href="index.html">В оглавление раздела</а>
В следующем примере URL "пляшет" от корня документов сервера:
<а href="/projects/index.html">Наши проекты</а>
Эта ссылка будет указывать на один и тот же документ, на какой бы странице
сайта она не находилась.
Тонкое отличие от предыдущего примера: предполагается, что каталог
projects расположен в той же директории, что и ссылающаяся страница:
<а href = "projects/index.html’'>Наши проекты</а>
А вот пример ссылки на файл, расположенный в родительском каталоге:
<а href/index.htm">Ha уровень вверх</а>
Давайте испробуем относительные ссылки на практике — создадим две про-
стые страницы и свяжем их между собой.
Пусть одна из этих страниц называется index.html, а другая— about.html.
(Условно говоря, предположим, что index,html — это главная страница, а
about.html — страница раздела "О проекте" с более подробным описанием
сайта.) Оба файла должны быть размещены в одной директории.
= Листинг 2Л0. Код страницы inctex^html
<?xml version="l.О" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
’b "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<1111е>Лучшая в мире веб-студия</1111е>
</head>
<body>
<Н1>Лучшая в мире веб-студия</й1>
<р>Вы, сами того не подозревая, зашли на сайт лучшей
Гпава 2. Создание простейших страниц с.помощью языка разметки HTML
97
веб-студии всех времен и народов. Если вы хотите узнать
о нас больше, загляните на страницу
<а href=”aboutlaquo;0 проекте»</а>.</р>
</body>
</html>
^Листинг 2.11. Код страницы abouthtmJ
<?xml version="l.О" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Ъ "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>0 проекте - Лучшая в мире веб-студия<А^1е>
</head>
<body>
<hl>0 проекте</И1>
<p>B отличие от многих, очень многих веб-студий, мы умеем
делать правильный код на языке XHTML 1.0 Strict!</р>
<р><а href="index.html">Ha главную страницу</а></р>
</body>
</html>
Внешний вид двух взаимосвязанных страниц представлен на рис. 2.11.
( Примечание
Раз дощечка, два дощечка — будет лесенка. Вот так, совершенно незаметно,
мы перешли на другой уровень абстракции: ведь даже две связанные между
собой страницы — это уже целый сайт.
Да-да, и не надо смеяться. Все, напротив, очень серьезно. Объединить не-
сколько страниц с помощью гиперссылок— казалось бы, тривиальная задача.
С технической точки зрения это действительно так, но нужно, простите за ка-
ламбур, задуматься о том, чтобы, переходя от страницы к странице, посетитель
сайта ни о чем не задумывался. Иными словами, нужно уделить пристальное
внимание проектированию системы навигации сайта, в основе которой лежат,
разумеется, гипертекстовые ссылки; однако понятие "система навигации" го-
раздо шире банального "система взаимосвязей между страницами". Реализо-
вать удачную систему навигации невозможно без груза знаний о множестве ню-
ансов и подводных камней. Впрочем, эту тему мы даже трогать сейчас не бу-
дем — обстоятельный разговор о навигации ждет нас в главе 4.
98
Часть I. Технологические основы
-•Упучшоя&»1иР,£»£Ь студий МкзкШа FrdfaiH v
.£ид Зякодки' сдое**
Qute«H$adlihe«f
Лучшая в мире веб-студия
Вы, сами того не подозревая, зашли на сайг лучшей веб-студни всех
времен и народов. Если вы хотите узнать о нас больше, загляните на
страниц}' «О проекте».
&айл Оэавка Закладки Сорока
.UOlxl
О проекте
В отличие от многих, очень многих веб-студий, мы умеем делать
правильный код на языке XHTML 1.0 Strict!
На главную страницу
Рис. 2.11. Две взаимосвязанные страницы простейшего сайта
Ссылки на разделы одного документа
До сих пор мы обсуждали URL, адресующие цельные документы. Между
тем, в качестве ресурса, на который можно поставить ссылку, вполне может
выступать какая-либо часть веб-страницы, а точнее — метка в документе.
Взгляните на страницу каталога книг на сайте издательства ’’БХВ-
Петербург”: www.bhv.ru/books. На ней представлены книги всех серий, вы-
пускаемых издательством. Серия ’’Самоучитель1’ затеряна где-то в середине
страницы. Между тем, оглавление, приведенное в самом начале документа,
позволяет быстро добраться до раздела, описывающего нужную серию. На
интересующую hac рубрику ’’Самоучитель" можно сослаться и извне — вот
ее адрес: www.bhv.ru/books/#al3.
Глава 2. Создание простейших страниц с помощью языка разметки HTML 99
Давайте попытаемся воплотить нечто подобное на основе тех примеров, ко-
торые мы уже рассмотрели в этой главе, объединив некоторые из них в один
длинный документ.
। Листинг 2Л X Документ с обособленными разделами
<?xml version="l.О" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
chtml xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<ДН1е>Памятка веб-разработчику</Д111е>
</head>
<body>
<hl><a id="top"x/a>naMHTKa веб-разработчику</Ь1>
<Ь2>Содержание</Н2>
<ul>
<lixa ЬгеЕ="#р1">Критерии качества сайта</аХ/П>
<lixa ЬгеЕ="#р2">Технологическая цепочка создания сайта</аХ/П>
<lixa href="#p3">JIornKa и представление</ах/П>
</ul>
<h2><a id="pl"x/a>KpnTepnn качества сайта</И2>
<ul>
<li>BwcoKoe качество информационного наполнения
и грамотность его подачи</П>
<11>0ригинальность и эстетическая привлекательность
внешнего облика странице/li>
< Преступность содержания сайта для максимально
широкого круга пользователей вне зависимости от
применяемых ими типов устройств и версий браузеров,
а также от ограничений по состоянию здоровья</П>
<П>Эргономичность элементов пользовательского
интерфейса сайта, обеспечивающая высокую эффективность,
но в то же время легкость и непринужденность взаимодействия
посетителя с веб-ресурсом</П>
<П>Надежность и безопасность используемых технологических
решений, четкая согласованность работы всех компонентов</П>
<П>Безупречная проработка всех деталей и нюансов</П>
</ul>
<р>[<а href="#top">K оглавлению</а>]</р>
100
Часть I. Технологические основы
<h2><a 1с1="р2"></а>Технологическая цепочка создания сайта</Ь2>
<о1>
<И>Постановка задачи
<ul>
<И>Анализ существующих конкурирующих
и/или родственных проектов</И>
<И>Выработка концепции</И>
</ul>
</li>
<И>Подготовка первоначального информационного наполнения</И>
<И>Разработка макетов страниц</И>
<И>Подготовка шаблонов страниц</И>
<1 ^Проектирование и реализация сервисов</И>
<И>Сборка всех компонентов воедино</И>
<И>Тестирование</И>
<Ы>Ввод в эксплуатацию</И>
<И>Пожизненное сопровождение — информационное
наполнение и техническая поддержка</И>
</о1>
<р> [<а href="#top">K оглавлению</а>] </р>
<h2><a 1б=”рЗ’’х/а>Логика и представление</Ь2>
<р>Ни в коем случае не следует подменять <ет>логику
построения</ет> документа его <ет>визуальным представлением</ет>.
Теги логического ударения <зЬгопд>НЕ&пЬзр;предназначены</зЬгопд>
для выделения фрагментов текста курсивным или полужирным
начертанием! </р>
<р> [<а href=”#top’’>K оглавлению</а>] </р>
</body>
</html>
Внешний вид оглавления веб-страницы, состоящего из ссылок на внутренние
разделы того же самого документа, показан на рис. 2.12.
На рис. 2.13 демонстрируется результат перехода к разделу, соответствую-
щему второму пункту оглавления.
Метки в этом XHTML-документе задаются элементами вида <а id=
"имя__метки”>... </а> (согласно стандарту, каждая такая метка должна быть
внутри блочного элемента, поэтому мы заключили их внутрь контей-
неров <hl>..^</hl> и <h2>... </h2>. Ссылки на метки имеют вид
<а ЬгеГ="#имя метки’’>. . . </а>.
щ capwta ________G J
<Р ’ n> - ^:j [u5Z7??zZ<r*j О Перейти [ cl
4^ GsJ&^g latest H^&d&r^
Памятка веб-разработчику
i Содержание
♦ Технологическая цепочка создания сайта
♦ Логика и представление
j Критерии качества сайта
♦ Высокое качество информационного наполнения и
грамотность его подачи
♦ Оригинальность и эстепгческая привлекательность
внешнего облика страниц
♦ Доступность содержания сайта для максимально
широкого круга пользователей вне зависимости от
применяемых ими типов устройств и версии браузеров,
а также от ограничений по состоянию здоровья
♦ Эргономичность элементов пользовательского
интерфейса сайта, обеспечивающая высокую
эффективность, но в то же время легкость и
непринужденность взаимодействия посеппеля с
веб-ресурсом
I mcea
Рис. 2.12. Оглавление веб-страницы
со ссылками внутри одного документа
&*& Qpwa Щ Переход ^лыхи jHw^Htbi Qp« ' О L'
ф ж L^> |^Sp 1<G ($ Перечти |gL ~ ~~ ~~
Gsttbg Stated (G Ute$tHe«fom
Технологическая цепочка создания
сайта
1. Постановка задачи
о Анализ существующих конкурнруюпцгс и/нли
родственных проектов
о Выработка концепции
2. Подготовка первоначального информационного
наполнения
3. Разработка макетов страниц
4. Подготовка шаблонов страниц
5. Проектирование и реализация сервисов
б. Сборка всех компонентов воедино
7. Тестирование
8. Ввод в эксплуатацию
9, Пожизненное сопровождение — информационное
наполнение и техническая поддержка
[К оглавлению]
.Логика и представление
Ни в коем случае не следует подменять логику построения —
документа его визуальным представлением. Тегн
? логического ударения НЕ предназначены для выделения Tj
Гготлэе»
Глава 2. Создание простейших страниц с помощью языка разметки HTML
Рис. 2.13. Результат щелчка мышью
по второму пункту оглавления
102
Часть I. Технологические основы
Следует учесть, что в ряде устаревших браузеров ссылки на нашей странице
могут не работать — в соответствии с прежними версиями HTML, вместо
атрибута id полагалось использовать атрибут name, однако сейчас применение
последнего признается Консорциумом W3C нежелательным.
Открытие ссылок в новом окне
Иногда требуется, чтобы ссылка открывалась в новом окне. Вообще говоря,
пользователям нужно давать возможность самостоятельно выбирать, каким
образом открывать ту или иную ссылку — в том же самом окне, в новом окне
или в новой вкладке для тех браузеров, которые их поддерживают. Интер-
фейс браузера позволяет пользователям легко манипулировать сценариями
открытия ссылок, поэтому в рамках обсуждаемых нами стандартов —
HTML 4.01 Strict и XHTML 1.0 Strict— не предусматривается законной
возможности принудительно открывать новые окна по щелчку мыши по
ссылке.
Нелегитимный способ, однако, имеется — необходимо задействовать атрибут
target тега <а>, доставшийся по наследству от популярной некогда идеологии
фреймов:
<а href="newpage.html" target="_blank">3Ta ссылка будет
открыта в новом окне</а>
Советую, однако, не злоупотреблять такой возможностью без острой необхо-
димости. Принудительно открывать внешние ссылки (т. е. такие, которые ве-
дут на другие сайты) в выпадающих новых окнах — дурной тон. Некоторые
разработчики верят, что таким образом удастся задержать пользователя у се-
бя на сайте. Эта позиция в корне порочна. Пользователь все равно уйдет с
сайта навсегда, если ему там не понравилось, и обязательно вернется вновь,
если сайт ему нужен. Никакие хитроумные искусственные ухищрения здесь
не помогут. Завоевывать признание нужно честно. В первую очередь, качест-
венным контентом и всесторонней заботой о посетителях.
Выпадающие окна, в особенности открываясь во весь размер экрана, могут
напрочь сбить не слишком опытного пользователя с толку. В них, кроме все-
го прочего, не работает кнопка Назад. Конечно, существуют избранные слу-
чаи, когда принудительное открытие новых окон действительно повышает
удобство работы с сайтом — например, если по щелчку на уменьшенной ко-
пии изображения на странице большого иллюстрированного каталога в но-
вом окне открывается полноэкранная версия картинки. Но во всех подобных
ситуациях необходимо заранее предупреждать пользователя, что те или иные
ссылки открываются в новых окнах, иначе может произойти конфуз.
Гпава 2. Создание простейших страниц с помощью языка разметки HTML
103
Подчеркиваю, наличие атрибута target в теге <а> автоматически делает код
страницы не соответствующим современным рекомендациям W3C, так что
трижды подумайте, прежде чем пользоваться этой сомнительной возмож-
ностью.
Вставка изображений и других объектов
в веб-страницу
Современные сайты почти никогда не обходятся одним лишь текстовым со-
держанием. Помимо текста, веб-страницы могут включать в себя графику,
анимацию, звуковое сопровождение, разнообразные аплеты и т. д.
Как мы уже говорили в главе 1, любые подобные объекты являются внешни-
ми по отношению к HTML-коду страниц, т. е. представляют собой самостоя-
тельные файлы.
Самым распространенным типом связываемых с веб-страницами объектов
являются, безусловно, растровые графические изображения. Для того чтобы
поместить картинку в нужное место страницы, традиционно используют тег
<img>.
йстинг 2.13. Связь графического файла с веб-страницей
<img src="ball.png" alt="UIap с игрой света и тени" />
Результат использования тега <img> представлен на рис. 2.14.
Рис. 2.14. Картинка, отображаемая на веб-странице
104
Часть I. Технологические основы
Элемент <img> является пустым — в HTML 4 закрывающий тег для него за-
прещен; если же код пишется на языке XHTML, необходимо позаботиться о
том, чтобы не забыть поставить косую черту перед закрывающей угловой
скобкой тега <img>.
Элемент <img> не может фигурировать непосредственно в контейнере
<body>... </body>— его нужно поместить внутрь любого блочного элемента,
к примеру, <р>.. .</р>.
Тег <img> имеет два обязательных атрибута— оба они отражены в листин-
ге 2.13. Содержимым атрибута зге должен являться URI связываемой со
страницей картинки, а в значении атрибута alt должно фигурировать альтер-
нативное текстовое описание рисунка.
Значение атрибута alt— его иногда называют alt-текстом— отображается
браузером в том случае, если сама картинка по тем или иным причинам не
показывается: либо соответствующий файл еще не успел подгрузиться, либо
из-за плохой связи его не удается загрузить вообще, либо пользователь от-
ключил графику в браузере для того, чтобы страницы открывались как мож-
но быстрее. Особенно актуален атрибут ait для пользовательских агентов,
органически не способных отображать графику — к примеру, текстовых
браузеров или программ синтеза речи.
( Примечание
Internet Explorer отображает alt-текст даже в том случае, когда изображение
вполне себе исправно загружено— в виде выплывающих подсказок. Делать
этого он, вообще говоря, не обязан. К слову, Opera и Firefox не страдают такой
болезнью.
Для того чтобы заставить и эти браузеры отображать всплывающие подсказки,
текст последних следует заключать в атрибут title. Атрибут title, содержа-
щий краткое описание того или иного элемента, может быть назначен не только
тегу <img>, но и многим другим тегам, формирующим логические элементы
страницы.
Любое графическое изображение, важное для понимания информационного
наполнения страницы, должно в обязательном порядке снабжаться содержа-
тельным alt-текстом!
Разумеется, графические изображения, являющиеся частью оформления сай-
та, не несущие полезной информации, снабжать alt-текстами необязательно.
Но сам атрибут alt все равно должен присутствовать в описании тега <img>,
иначе страница не пройдет валидацию. Значением атрибута alt в этом случае
может являться пустая строка: ait=’”’.
У тега <img> есН и другие атрибуты — к примеру, width и height, опреде-
ляющие соответственно ширину и высоту изображения. Для этой цели, одна-
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 105
ко, более правильно использовать аналогичные свойства CSS, о чем речь
пойдет в последующих главах.
Анатомия веб-графики
Графика— вторая по важности и по значимости после текста материя, со-
ставляющая содержание сайтов. Тематика нашей книги не позволяет погово-
рить о ней основательно — проблемам подготовки графики, равно как и во-
просам набора и верстки текста, посвящены отдельные тома.
Но коснуться этой темы хотя бы вскользь мы должны в обязательном поряд-
ке. Ибо невозможно себе представить грамотного веб-разработчика, хотя бы
в общих чертах не знакомого с методологией подготовки веб-графики.
Графика во Всемирной паутине держится на трех китах — растровых форма-
тах GIF (Graphics Interchange Format, формат обмена графическими данны-
ми), JPEG (Joint Photographic Expert Group, объединенная группа экспертов в
области фотографии, предложившая одноименный алгоритм сжатия), а точ-
нее, JFIF (JPEG File Interchange Format, формат обмена файлами стандарта
JPEG) и PNG (Portable Network Graphics, переносимая сетевая графика).
(7 Примечание
Полагаю, читателю известны различия между растровой и векторной графи-
кой, но на всякий случай напомню. Растровые форматы определяют параметры
(цвет, прозрачность) каждой точки (пиксела) изображения в отдельности, тогда
как векторные форматы оперируют более "высокоуровневыми" математически
описываемыми объектами, такими как отрезки прямых, кривые Безье (сплай-
ны), многоугольники, эллипсы и прочие фигуры.
Таким образом, растровые картинки имеют фиксированные размеры в пиксе-
лах; их трудно масштабировать (увеличивать — почти бесполезно). Векторные
же изображения, напротив, легко поддаются произвольному масштабированию.
Перевод из "вектора" в "растр" — задача тривиальная; обратное же преобразо-
вание сопряжено с весьма существенными трудозатратами, а порой и вообще
неосуществимо.
Исторически так сложилось, что во Всемирной паутине больше прижился
"растр". Хотя Flash, появившийся сравнительно недавно— не что иное, как
проявление "вектора" в Сети.
Растровый пакет всех времен и народов, который используется для подготовки
веб-графики подавляющим большинством наших коллег— это, конечно же,
Adobe Photoshop (в сочетании с ImageReady— "спутником" Photoshop, специа-
лизированным редактором, предназначенным как раз для оптимизации графики
для Всемирной паутины).
Фотография — это классический пример растрового изображения, что называ-
ется, по природе своей. Рисованные же иллюстрации, однако, зачастую гото-
вятся с привлечением векторных или даже трехмерных редакторов (таких как
Adobe Illustrator и 3D Studio МАХ соответственно), лишь в самый последний мо-
мент конвертируются в "растр".
106
Часть I. Технологические основы
Формат GIF предполагает сжатие без потерь качества по алгоритму LZW
(Лемпеля — Зива — Велча, Lempel — Ziv — Welch), но при этом число цве-
тов в палитре ограничено 256-ю, в результате чего этот формат больше всего
подходит для малоцветных изображений с четкими чертами.
Миру известны две разновидности формата GIF — GIF87a и GIF89a (цифры
означают год создания). Обе они прекрасно поддерживаются всеми графиче-
скими браузерами. GIF89a получил в Сети наибольшее распространение за
счет поддержки прозрачных областей и анимации. Помимо прочего, в GIF
изначально предусмотрена возможность чересстрочной развертки.
JPEG— полноцветный формат, предполагающий компрессию с потерями
качества. Основной свой удар алгоритм сжатия, основанный на разновидно-
сти дискретного преобразования Фурье, наносит по областям изображения с
высокими частотами изменения цветового тона, яркости и насыщенности
(иначе говоря, с высокой детализацией). В итоге JPEG больше всего подхо-
дит для изображений фотографического характера, состоящих большей
частью из плавных цветовых переходов, ибо вблизи резких контуров даже
при незначительном сжатии начинают проявляться неприятные артефакты.
Существует несколько вариантов формата JPEG. Следует сразу заметить, что
JPEG2000 — это не разновидность JPEG, а совсем другой формат, который
не нашел (пока?) применения в Веб, и поэтому говорить мы о нем не будем.
Я веду речь о другом — Photoshop, например, предлагает нам сохранять
JPEG-файлы в трех форматах: Baseline (базовый), Baseline Optimized (опти-
мизированный) и Progressive (с прогрессивной разверткой).
Первый из перечисленных форматов — самый простой. По сравнению с ос-
тальными он обеспечивает наименее эффективное сжатие. К тому же, изо-
бражение в формате JPEG Baseline появляется на экране только после полной
загрузки файла, что делает этот формат малоприменимым в Веб.
Baseline Optimized при прочих равных условиях обеспечивает более эффек-
тивное сжатие, а изображение, сохраненное в этом формате, проявляется на
экране постепенно, по частям, по мере загрузки файла. Наглядность процесса
загрузки — это несомненный плюс, повышающий интерактивность интер-
фейса веб-страницы.
Наконец, формат Progressive по сути своей аналогичен формату GIF с черес-
строчной разверткой. Иными словами, изображение, сохраненное в
JPEG Progressive, сразу же проявляется на экране целиком, а по мере загрузки
его детали постепенно уточняются.
К сожалению, основное отличительное свойство JPEG Progressive не реализу-
ется в Internet Explorer, включая даже шестую (последнюю на момент напи-
сания книги) версию. IE отображает такие файлы подобно формату Baseline,
что пока делает ’’прогрессивный” JPEG абсолютно бесполезным.
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 107
И хотя по объему файл такого формата занимает несколько меньше, чем та
же самая картинка, сохраненная с тем же качеством в JPEG Baseline (а иногда
даже и чуть-чуть меньше, чем в Baseline Optimized), все же, как ни крути, на
данный момент единственно правильной для Всемирной паутины разновид-
ностью формата JPEG является Baseline Optimized.
Кстати, что касается возможности использовать чересстрочную развертку в
GIF, злоупотреблять ею вряд ли стоит, поскольку в больших количествах это
раздражает. Чересстрочная развертка может оказаться полезной примени-
тельно к GIF-изображениям крупного формата— к примеру, каким-нибудь
картам или схемам в пол-экрана.
Плавно переходим к PNG. Он позиционируется как полноценная замена обо-
им вышеозначенным форматам сразу. PNG использует сжатие без потерь ка-
чества и может иметь произвольную глубину цвета вплоть до 48 бит на пик-
сел. Правда, при подготовке графики для Веб в основном применяются вари-
анты формата PNG либо с индексированной палитрой, когда на каждый
пиксел приходится от 1 до 8 бит информации, как в случае с GIF, либо с
24-битовой глубиной цвета. Одним из ключевых достоинств PNG является
поддержка альфа-каналов — это дает возможность определять в изображени-
ях области дробной прозрачности. В PNG, правда, в отличие от GIF89a, от-
сутствует возможность создания анимированных изображений. На то, одна-
ко, есть Flash.
PNG сносно поддерживается всеми распространенными ныне браузерами, но
только до тех пор, пока не заходит речь о той самой прозрачности. Прогрессу
мешает Internet Explorer, который по неведомым причинам подрисовывает
под PNG-изображениями с альфа-каналом какой-то несусветный фон. Эту
проблему можно обойти, правда, способы весьма витиеваты.
Замечена и еще одна неприятная особенность IE: случается, что браузер от
Microsoft искажает цвета PNG-изображения с индексированной (т. е. жестко
заданной!) палитрой. Это происходит, в частности, при сохранении PNG-
файлов при помощи Photoshop CS или ImageReady CS, тогда как при отобра-
жении картинок, сохраненных, скажем, в ImageReady 1.0, такого эффекта не
наблюдается. Упомянутые искажения незаметны, если картинка стоит особ-
няком на контрастном фоне. Но когда речь заходит о точном совмещении
цветов изображения и фона, фальшь становится видна невооруженным
глазом.
Что касается вопросов размера файла, то PNG действительно позволяет до-
биться экономии (порядка 20%) по сравнению с GIF в классических случаях,
т. е. применительно к четким и небольшим изображениям с ограниченной
палитрой. Что же касается фотографических изображений, то PNG безуслов-
но ’’тяжеловеснее” JPEG даже с наилучшим качеством, причем зачастую раз-
ница весьма и весьма ощутима.
108
Часть I. Технологические основы
Таким образом, явных причин целесообразности жертвы форматами GIF и
JPEG в пользу PNG пока что на горизонте не предвидится. Хотя W3C призна-
ет только последний, но в основном — из-за правовых причин. (Алгоритм
LZW, используемый в GIF, запатентован Unisys и IBM, да и на JPEG не так
давно нашелся претендент— компания Forgent Networks, в то время как
PNG— изначально открытая технология, разработанная специально для
Всемирной паутины.)
Вопрос выбора графического формата для того или иного изображения мо-
жет показаться тривиальным. И напрасно! Разумеется, типичные случаи на-
метанный глаз расставит по местам сразу же и безошибочно, но есть и ситуа-
ции пограничные, не вполне очевидные даже для профессионала.
К таковым относится изрядное количество разнообразных пиктограмм, рисо-
ванных визуалов и пиксельных миниатюр. В их царстве вполне себе можно
заблудиться не только в трех, но даже и в двух соснах— т. е., при выборе
между GIF и JPEG, не принимая во внимание PNG.
Мне неоднократно приходилось сталкиваться с картинками, которые, каза-
лось бы, сам бог велел сохранять в формате GIF, но... которые выглядят луч-
ше и "весят" существенно меньше при сохранении в JPEG. Бывают и про-
тивоположные случаи — скажем, изначально фотографичная по текстуре
картинка с парой резких переходов (особенно если переходы эти самые обра-
зуют смысловой центр композиции) при сохранении в GIF смотрится намно-
го лучше, чем в JPEG при сопоставимом размере файла: на JPEG-
изображении вокруг четких контуров проявляется неприятный ореол. Если
же уменьшить сжатие, то размер файла станет уже неприемлемым.
Оптимизация графики не терпит типовых решений! Со многими изображе-
ниями стоит экспериментировать.
Но даже когда выбор в пользу того или иного формата сделан, на этом работа
над изображением не заканчивается. Порой палитру GIF-изображения (это
относится и к PNG с индексированной палитрой) можно уменьшить в 2—
4 раза практически без видимых потерь качества. В особенности это касается
одноцветного текста со сглаженными контурами (анти-алиасинг): палитру
подобного изображения вполне можно ограничить восьмью цветами.
Кстати говоря, хотя количество цветов в палитре GIF- или PNG-изображения
может выбираться произвольным, лучше всего использовать палитры, со-
стоящие из 2, 4, 8, 16, 32, 64, 128 или 256 цветов. В этом случае каждый пик-
сел изображения будет кодироваться минимально возможным количеством
бит при максимально возможном количестве цветов в палитре. Классический
пример задачи на оптимизацию... Поясню: цвет каждого пиксела в изображе-
нии, имеющем/например, 32-цветную палитру, кодируется пятью битами
(32=25). При 33 цветах в палитре число бит на пиксел уже будет равным шее-
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 109
ти. 64 цвета — это максимум, который можно закодировать 6 битами (64=26).
65-й цвет потребует нового бита, и т. д.
Теперь поговорим немного про GIF-анимацию. Как правило, кадры в аними-
рованных изображениях отличаются друг от друга не полностью, а лишь в
какой-то части. При этом имеет смысл общую для всех кадров часть сохра-
нить целой и невредимой лишь на одном — первом — кадре, а на всех ос-
тальных заменить ее прозрачными пикселами. Кроме того, полезно привести
все кадры к единой палитре. (Это важно, ибо даже 256-цветные палитры в
соседних кадрах могут не совпадать ни на йоту, что позволяет, исхитрив-
шись, создавать посредством GIF-анимации с использованием прозрачных
зон неподвижные изображения со многими сотнями и тысячами цветов в об-
щей палитре.) Перечисленные меры позволяют получить весьма и весьма су-
щественный выигрыш — порой в несколько раз по сравнению с неоптимизи-
рованными анимированными изображениями.
Что касается формата JPEG, то в идеальном случае необходимо для каждой
оптимизируемой картинки подбирать опытным путем, сравнивая на каждом
шаге результат с оригиналом, индивидуальную степень компрессии, руко-
водствуясь целью получить наилучшее отношение качества изображения
(а это параметр субъективный) к объему файла. Или, если угодно, необходи-
мо интуитивно найти ту пограничную точку, где потери еще не начинают яв-
но бросаться в глаза.
В заключение— несколько слов об обработке фотографий. Как правило,
в оригинале фотографии (сделанные цифровым фотоаппаратом или
отсканированные) не пригодны для размещения на веб-страницах, прежде
всего— в силу неподходящих (превышающих требуемые в несколько раз)
линейных размеров и сопутствующего слишком большого объема. Банальное
уменьшение линейных размеров до нужной величины и последующее
сохранение фотографии в формате JPEG, однако, вряд ли позволит получить
действительно качественную фотографию.
Лично я при подготовке фотографий руководствуюсь алгоритмом, включаю-
щим в себя примерно такие шаги:
1. Компенсация перспективных искажений, присущих оптике фотоаппарата,
при помощи инструментов трансформации.
2. Кадрирование изображения — обрезание краев, отсечение всего лишнего,
выделение смыслового центра композиции кадра.
3. Ретушь — удаление нежелательных дефектов изображения (шум, царапи-
ны, лишние объекты, по случайности, попавшие в кадр и т. д.).
4. Корректировка цветовых уровней и баланса цвета.
5. Повышение резкости изображения с помощью фильтра нерезкой маски.
110
Часть I. Технологические основы
6. Уменьшение линейных размеров в точности на 50%.
7. Выполнение шагов 4—6 до тех пор, пока не будут достигнуты требуемые
линейные размеры изображения.
8. Окончательная доводка: заключительная ретушь, тонкая настройка цвето-
баланса, высветление/затемнение некоторых участков изображения и т. д.
Так следует поступать с каждой фотографией. Трудно? А кто сказал, что бу-
дет легко!
Использование тега <object>
Следует заметить, что в HTML предусмотрен универсальный тег для вставки
объектов — <object>. Этот тег может использоваться и для вставки графиче-
ских изображений вместо тега <img>. Более того, в XHTML 2.0, который пока
находится в стадии разработки, тег <img> будет полностью упразднен, и его
полномочия перейдут во власть тега <object>. Бежать впереди паровоза, од-
нако, не следует, ибо пока у тега <object> полно проблем с совместимостью.
Переформулировка фрагмента кода из листинга 2.13 с использованием тега
<object> выглядит так:
cobject data="ball<png" type=" image/png ">Шар с игрой света
и TeHH</object>
Атрибут type определяет MIME-mun содержимого объекта. Стандарт MIME
(Multipurpose Internet Mail Extensions, многоцелевые расширения почтовой
службы в Интернете) первоначально разрабатывался для электронной почты
с тем, чтобы можно было безболезненно пересылать по ней мультимедиа-
данные. В соответствии со спецификацией MIME, тип содержимого опреде-
ляется следующим образом:
тип/подтип
Некоторые (разумеется, далеко не все!) примеры MIME-типов приведены
ниже.
□ Тип верхнего уровня — text (текст):
• text/piain — обычный текст;
• text/html — данные в формате HTML;
• text/xml — данные в формате XML.
□ Тип верхнего уровня — image (изображение):
• image/gif — изображение в формате GIF;
• image/jpe^ — изображение в формате JPEG;
• image/png — изображение в формате PNG.
Гпава 2. Создание простейших страниц с помощью языка разметки HTML 111
□ Тип верхнего уровня — video (видео):
• video/mpeg — видео в формате MPEG;
• video/avi — видео в формате AVI.
( Примечание
В рамках этой книги XHTML 1.0 рассматривается как нечто почти тождествен-
ное HTML 4. Мы предполагаем, что веб-страница, созданная с применением
правил XHTML 1.0, будет вести себя точно так же, как аналогичный по структу-
ре документ, созданный посредством HTML 4.
И это действительно так, но только при условии, если веб-сервер указывает в
поле HTTP-заголовка Content-type, определяющем MIME-тип содержимого
сообщения ответа, значение text/html.
Консорциум W3C, в свою очередь, рекомендует указывать для XHTML-доку-
ментов совсем другие MIME-типы— в частности, text/xml, application/xml
или application/xhtml+xml. Для XHTML 1.1 и 2.0 это условие уже обяза-
тельно.
Предполагается, что в указанном случае веб-страница должна обрабатываться
агентом пользователя как полноценный XML-документ, с использованием син-
таксического анализатора XML. А это, в свою очередь, "грозит" двумя важными
последствиями. Во-первых, страницы будут отображаться только после полной
загрузки и последующего синтаксического анализа. Во-вторых, документы, в ко-
торых синтаксический анализатор найдет ошибки, вообще не будут обрабаты-
ваться, что положит конец излишнему "либерализму" языка HTML, обсуждав-
шемуся в начале этой главы. (Собственно, только в этих условиях XHTML оп-
равдает свое название — "расширяемый HTML", ибо обработка документа по
правилам XML позволит безболезненно внедрять в код веб-страницы фрагмен-
ты, использующие другие языки, основанные на XML, например, MathML, пред-
назначенный для описания математических выражений.)
Правда, всерьез говорить обо всем этом можно будет только лет через пять,
если не позже. Экспериментировать "в лабораторных условиях" вполне можно
уже сегодня, но для повседневной практики упомянутые концепции пока не
подходят. Подняться до заоблачных высот мешает балласт, обусловленный
уровнем развития современных браузеров. Ничего не поделаешь, придется по-
кружить над аэродромом...
При помощи тега <object>, пользуясь атрибутом type, можно связывать с веб-
страницей объекты разного типа.
В случае если объект невозможно отобразить, обрабатывается содержимое,
заключенное в контейнер <object>.. .</object>. Возможны вложенные кон-
тейнеры <object>... </object>, что дает возможность жить по принципу "не
один, так другой".
У тега <object>, помимо data и type, масса других атрибутов, что делает его
поистине универсальным инструментом для связи веб-страниц с различными
объектами. Рассмотрение всех особенностей тега <object> выходит, однако,
за рамки концепции этой книги.
112
Часть I. Технологические основы
Практические примеры —
простейшие веб-страницы
В ходе этой главы мы рассмотрели достаточное количество вполне работо-
способных примеров простейших страниц.
Все документы, полностью или фрагментарно приведенные в пронумерован-
ных листингах (см. листинги 2.1—2.13), доступны на прилагаемом к книге
компакт-диске в полных версиях.
Все, без исключения, рассмотренные в этой книге практические примеры со-
браны на компакт-диске в каталоге \examples. Этот каталог для удобства раз-
бит на подкаталоги, имена которых соответствуют номерам глав. В каждом
таком каталоге, в свою очередь, расположены подкаталоги, соответствующие
номерам листингов в пределах каждой главы.
Так, например, все файлы, относящиеся к листингу 2.4, следует искать в ка-
талоге \examples\02\04.
Примеры, отраженные в листингах 2.10 и 2.11, будучи взаимосвязанными,
находятся в едином каталоге \examples\02\10-l 1.
Полные версии примеров, соответствующие тем листингам, в которых были
рассмотрены фрагменты кода, а не завершенные документы, в большинстве
своем используют шаблон документа в формате XHTML 1.0 Strict, описан-
ный в листинге 2.4.
Однако для тех фрагментов кода, для которых оговаривались различия между
конструкциями, характерными для HTML 4.01 Strict и XHTML 1.0 Strict
(а это листинги 2.7 и 2.13), на компакт-диске даны полные версии соответст-
вующих документов в обоих форматах. С этой целью в каталогах указанных
примеров организованы подкаталоги html4 и xhtml 1.
Так, версия примера, рассмотренного в листинге 2.7, на языке HTML 4.01
Strict расположена в каталоге \examples\02\07\html4.
Впрочем, хотелось бы напомнить, что диск содержит удобное оглавление —
для того, чтобы им воспользоваться, откройте файл \index.html.
ГЛАВА 3
Оформление веб-страниц
с использованием каскадных
листов стилей
Всем хороши HTML-документы, рассмотренные нами в предыдущей главе.
Вот только смотрятся они, прямо скажем, скучновато.
Примерно так, просто и без излишеств, выглядели веб-страницы лет десять
тому назад, в ’’классическую” эпоху HTML 2.0.
С тех пор много воды утекло, но редкие памятники истории живы и по сей
день. Я не буду оригинальничать и приведу традиционный и весьма показа-
тельный пример — Библиотеку Максима Мошкова (www.lib.ru), которая не
меняла дизайн со дня своего основания, с ноября 1994 г.
Как притягательна все же эстетика такого вот экстремального минимализма,
беспощадно срывающая всю бесполезную мишуру, обнажающая естество
контента, открывающая чистый, не затуманенный взор на самую сущность
проекта!
Впрочем, инициативы Netscape и Microsoft по засорению языка HTML так
называемыми ’’расширениями” — визуальными тегами и атрибутами, кото-
рые противоречат идеологии структурной разметки, были направлены во
многом на преодоление безнадежного однообразия, царившего во Всемирной
паутине. Вполне понятно, что когда буквально каждая первая страница ото-
бражалась в окошке браузера как черный текст с вкраплениями синих и пур-
пурных ссылок на белом или сером фоне, глядя на все это, можно было и
взвыть.
Безусловно, решения, выработанные данными компаниями, были, мягко го-
воря, поспешными — с их последствиями мы боремся и по сей день. Но да-
вать трезвые и однозначные оценки легко сейчас, по прошествии десятка лет;
тогда же, в ’’подростковый” период жизни Всемирной паутины, когда многие
эксперты всерьез приравнивали два года развития Сети к тысячелетию ста-
114
Часть I. Технологические основы
новления человеческой цивилизации, бурлящие волны эйфории от любых
проявлений прогресса увлекали за собой в бездну все рациональные зерна...
Назначение и возможности CSS
Актуальная на сегодняшний день версия листов стилей, CSS level 2 (или, со-
кращенно, CSS2), позволяет полностью отказаться от нежелательных тегов и
атрибутов HTML, отвечающих за визуальное представление данных.
Важно понимать, что, отказываясь от визуальных средств HTML в пользу
CSS, мы не просто меняем ’’шило на мыло”. Мы приобретаем несравненно
большую гибкость, ибо CSS2 в идеале дает нам возможность реализовать
принцип разделения содержания и представления на уровне конечного кода
веб-страниц.
В этом случае HTML-документы содержат в себе только структурированный
контент и ничего более (совсем как в примерах из главы 2). Описание внеш-
него облика страниц, в свою очередь, всецело и полностью отделено от
HTML-документов и хранится во внешнем по отношению к ним листе сти-
лей. Таким образом, модифицировав единственный CSS-файл, мы можем из-
менить оформление всех страниц, связанных с ним. Изменить в корне, самым
радикальным образом, если только в этом существует надобность. Количест-
во страниц не имеет значения — таких документов может быть десять, сто,
тысяча, да хоть миллион...
Изящество принципа разделения содержания и представления со всей
красноречивостью демонстрируют авторы проекта CSS Zen Garden
(www.csszengarden.com), которые предлагают ознакомиться с ошеломляю-
щим многообразием совершенно не похожих друг на друга примеров дизайна
одной и той же страницы (рис. 3.1 и 3.2), различающихся взаимным располо-
жением функциональных областей, цветовым и шрифтовым решением, под-
бором графики и т. д.
Как уже говорилось, CSS2 на приемлемом уровне поддерживается всеми рас-
пространенными сегодня графическими браузерами, так что описанная идео-
логия реально работает!
Более того, как это ни парадоксально, прогрессивные технологии предпочти-
тельнее и для устаревших браузеров. Ибо принцип разделения содержания и
представления гарантирует текстуальную доступность контента везде и
всюду. Судите сами — если вдруг агент пользователя по каким-то причинам
не поддерживает CSS (или посетитель сайта самостоятельно отключил CSS в
своем браузере), невелика беда. HTML-код страницы будет в любом случае
обработан, а ону напомню, девственно чист и содержит только структуриро-
ванную полезную информацию. Графический браузер отобразит такую
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 115
Zen
Garden
Д demonstration of what
can be accomplished
visually through
CSS-based design. Select
any style sheet from the
list to load it into this
The Road to Enlightenment
Uttering a dark and dreary road lay the past relics of browser-specific tags,
incompatible DOMs, and broken CSS support.
Today, we must clear the mind of past practices. Web enlightenment has been
achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major
browser creators.
/ЭДЬмму Or* am by
Но London
page.
Ths css Zen Garden invites you to relax and meditate on the Important lessons of the
masters. Begin to see with clarity. Learn to use the (yet to be) time-honored
techniques in new and Invigorating fashion. Become one with the web.
Uncultivated ъ/ мал»
Carbon*
Download the sample
html file and ri'<-
really.
So What is This About?
There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden
aims to excite, inspire, and encourage participation. To begin, view some of the existing
designs in the list. Clicking on any one will load the style sheet into this very page. The
code remains the same, the only thing that has changed is the external .css file. Yes,
CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a
way that ge’s people excited Is by demonstrating what It can truly be, once the reins are placed In the hands of those
able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by
structurists and coders. Designers have yet to make their mark. This needs to change.
AtbHxle цу
Vtew AB IWgnc
jffew Th»» Design • tse 'SM
Рис. 3.1. Первый пример дизайна веб-страницы сайта CSS Zen Garden
Downlosd th« hl ml fUs *nd ««« fils
Рис. 3.2. Второй пример дизайна веб-страницы сайта CSS Zen Garden
116
Часть I. Технологические основы
страницу с оформлением, принятым по умолчанию (рис. 3.3). То есть так, как
в эпоху HTML 2.0. При этом пользователь, разумеется, без труда сможет оз-
накомиться со всем содержанием сайта.
Файл -бвд Кодюнжгш- Строка
3 ’ -> л л. « < а м
% Ивере# Ckrnsw* Двмой Пвиск И&яэя Печатав <Зйшяг» Схй JMMI
css Zen Garden »
The Beauty of CSS Design
A demonstration of what can be accomplished visually through CSS-based design Select any style sheet from the list to load it into this page
Download the sample html.file and css file ||
The Road to Enlightenment
Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support
Today, we must clear the mind of past practices Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the
major browser creators
The css Zen Garden invites you to relax and meditate on the important lessons of the masters Begin to see with clarity Learn to use the (yet to be)
time-honored techniques in new and invigorating fashion Become one with the web
So Wlisit is This About?
There is clearly a need for CSS to be taken seriously by graphic artists The Zen Garden aims to excite, inspire, and encourage participation To begin, view
some of the existing designs in the list Clicking on any one will load the style sheet into this very page The code remains the same, the only thing that has
changed is the external css file Yes, really
CSS allows complete and total control over the style of a hypertext document The only way this can be illustrated in a way that gets people excited is by
demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure To date, most examples of neat tricks
and hacks have been demonstrated by structunsts and coders Designers have yet to make their mark This needs to change
frc.............................- „ „ ........z L
Рис. 3.3. Отображение одной из страниц сайта CSS Zen Garden браузером Netscape Navigator 4
с отключенной поддержкой CSS
Что касается страниц, ’’напичканных” визуальными тегами и атрибутами
HTML, зачастую не представленными ни в одном официальном DTD, то от-
носительно доступности содержания таких документов, где бы то ни было,
помимо браузеров, в которых отображение сайта явно проверялось, невоз-
можно дать никаких гарантий.
С Примечание
В середине— конце 1990-х на множестве сайтов можно было наблюдать такие
приписки, как: "Оптимизировано для просмотра в Internet Explorer 3.0" или "Этот
сайт лучше смотреть в браузере Netscape Navigator 4.0". Иначе говоря, разра-
ботчики подстраивались под особенности конкретных браузеров. Высшим пи-
лотажем считалось обеспечение более-менее постоянного внешнего вида
страниц в двух конкурирующих браузерах, но сути дела это не меняло.
Страницы/"заточенные" под один или несколько распространенных браузеров,
как правило, содержали множество ошибок в коде, поскольку об использовании
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 117
валидатора в те времена вообще никто не вспоминал. Ошибки эти, конечно,
сходили с рук в "любимых” браузерах. Но браузер браузеру рознь— одни
HTTP-клиенты относятся к ошибкам в коде более лояльно, а другие — менее.
Так, например, какой-нибудь незакрытый тег, совершенно никак не мешавший
просмотру страницы в IE, мог стать серьезным препятствием для пользовате-
лей NN — вплоть до того, что часть содержимого страницы не отображалась
вовсе. А уж сколько головной боли в свое время доставил HTML-кодерам при-
вередливый браузер Opera — ни в сказке сказать, ни пером описать...
До сих пор мы говорили большей частью лишь о визуальном представлении
контента. Возможности CSS, однако, этим не ограничиваются. CSS2 позволя-
ет управлять представлением данных, учитывая специфику среды или уст-
ройства вывода информации, включая, например, программы синтеза речи,
дисплеи Брайля и т. д.
Визуальные устройства и среды, к слову, тоже бывают разными. И CSS умеет
работать с ними в режиме, совершенно прозрачном для пользователя. При
условии например, что разработчиком предусмотрены индивидуальные лис-
ты стилей (или правила в общем листе стилей) для представления содержи-
мого страниц сайта не только на экране настольного ПК или ноутбука, но и
на экране карманного компьютера, а также на листе бумаги при печати, поль-
зователю в этом случае нет никакой необходимости искать на странице кноп-
ки или ссылки а-ля ’’Версия для КПК” или ’’Версия для печати”. Ни о чем не
задумываясь, пользователь может смело зайти на страницу с тем же самым
URL с ’’наладонника”, увидев ее в специально адаптированном оформлении.
Точно так же пользователь может стандартными средствами браузера отпра-
вить необходимую страницу на печать и получить ее ’’твердую копию” без
лишнего оформления, к примеру, без неактуальной в данном контексте нави-
гационной панели.
( Примечание
Гиганты Рунета пока, к сожалению, в большинстве своем не прониклись идеями
о необходимости следования актуальным рекомендациям W3C. В 2004 году ди-
зайн меняли Mail.Ru (www.mail.ru), Lenta.Ru (www.lenta.ru), запущено множе-
ство новых сервисов "Яндекса" (www.yandex.ru) — и все эти "новые" сайты по
инерции используют отжившую свое табличную верстку шаблонов страниц и
требуют лишних действий от пользователей, желающих распечатать ту или
иную страницу или просмотреть ее на карманном компьютере. В то же самое
время на Западе бум веб-стандартов приобретает поистине глобальный раз-
мах— от табличной верстки отказались такие столпы, как MSN Search
(search.msn.com), Yahoo! (www.yahoo.com), ABC News (www.abcnews.com);
поразительной красоты сайты, основанные на современных рекомендациях
W3C, демонстрируют Blogger (www.blogger.com), Ecco (www.ecco.com), Quark
(www.quark.com) и многие, многие другие — да что там говорить, откройте га-
лерею CSS Vault (www.cssvault.com) или CSS Beauty (www.cssbeauty.com) и
наслаждайтесь!
118
Часть I. Технологические основы
Lenta.Ru, поменяв дизайн в 2004 г., осталась от прогрессивных течений в сто-
роне. Для каждой из версий одной и той же статьи на ’’Ленте” — полноэкран-
ной, для печати и для КПК — используются различные URL, что крайне не-
удобно (рис. 3.4—3.6).
^авка ёМ Переход ^йкладки Инструменту Cjpaes*»
* * >' * ЙУ .' R h,ttP tf|enta 'и/пею5/2005/0,3/24/еи/
Getbng Started ^4 latest Headlnes
а •'
О Перейти
wLSNTArRU
издание Rambler Media Group Интернет
Верховный суд США
Шиаво умрет
Главу МВД Киргизии
сместили
а Фишер вышел на
свободу
! Москва отомстит
J Варшаве за Дудаева
Г ядвнгю
VijjHiosocTH
В России
Кавказ
б СССР
В иное
ближний
Boc.Toir
Политика
Экономикс:
Пвесгупносп-
Оружи»?
Масс-медиа
Прогресс
Интернет
'»И
О высоком
Спорт
As то
Из жизни
mail^;ent3 ru
Реклам.:!
Готоао
25.03 05:03 Акаев не
уходил в отставку, но
СКрЫЛ? Я Е
беаопасном месте
25.03 05:30 Фрадков
против продажи
1 Сиповщ машин1-
концерну Siemens
ICANN официально одобрила создание
домена .ей
Международная
организация ICANN
("Корпорация пс
распределению
номеров и имен в
Интернете"),
регулирующая
стандарты доменных
имен и IP-адресов,
официально одобрила
Послядаие новости
25.03 03:2! Глава СБ
Российский 4>иот
rmnTTmnpayHT
недионаиЕКЬзм
tот ер е.9
25.03 01:04 Убит
хот .чин дома, где
скрывался Масхадов
25.03 04:53 В
Японском море
терпит бедствие
российский траулер
25.03 04:44 Художник
пришел и раз® еыт
свои картины в
ьстулх Яьк-Иорка
25.03 04:00 Бобби
Фишер пршиткт г
Испан^дню
Найти' Архив
рубайс J [25~ [6з~ [2005 <J
Рис. 3.4. Полноэкранная версия Lenta.Ru
( Примечание
В России, как обычно, долго запрягают. Трудно сказать, чем объясняется наш
консерватизм — не то леностью и нежеланием переучиваться, не то привычкой
видеть в переменах только худшее, но тем не менее уже сегодня нельзя, как
полтора-два года тому назад, сказать, что российский сектор Сети в технологи-
ческом плане стагнирует. Просто активность исходит "снизу вверх" и не осо-
бенно видна на поверхности, как, впрочем, это происходило и на Западе, но
только чуточку раньше. Достаточно заглянуть в русскоязычные ЖЖ-коммью-
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей
119
нити ru_webdev (www.livejournal.com/community/ru_webdev), ru_coding
(www.livejournal.com/community/ru_coding) и т. п., чтобы удостовериться, что
буквально каждый день там обсуждается CSS-верстка и прочие аспекты веб-
стандартов. За последние пару лет в Рунете появилось множество достойных
проектов, пропагандирующих веб-стандарты, и вокруг этих ресурсов формиру-
ются свои прочные сообщества. (Здесь мне не хотелось бы никого рекламиро-
вать, в том числе и по той причине, что я сам веду аналогичный проект.)
Появляются студии — например, Minimal (www.minimal.ru), Cetera Labs
(www.cetera.ru) или CreativePro (www.creativepro.ru), заявляющие пунктуаль-
ность в следовании веб-стандартам своим кредо. И на данный момент, пока не
расшевелились крупные студии, для отмеченных выше коллективов складыва-
ются поразительно удачные условия — ведь создаваемые небольшими про-
грессивными студиями сайты по многим статьям объективно превосходят тво-
рения неповоротливых гигантов...
) 1enta.ru; новосгнг ICANN официально
файл правка Переход Зэкщки. 0..CV
'О ’ Ф • S © Veu/Printed.htm
&шапдStarted (У
Lenta ru- Новости: http /Aenta.ru/news/2005/03/24/eu/
25 ЛЗ 22005, romoow. 05:42 24
Обновлено 24.03.2065 в 20. IS. 57
Чубайс и Дерипаска
помирились
ICANN официально одобрила создание домена .ей
* * >
Международная организация ICANN ("Корпорация по распределению номеров и имен в
Интернете"), регулирующая стандарты доменных имен и IP-адресов, официально одобрила
создание нового домена верхнего уровня .ей, предназначенного для сайтов стран Евросоюза
Президент ICANN, один из "отцов" Интернета Винтон Серф (Vinton Cerf), подписал договор с
консорциумом Eurid, который был создан для управления создаваемым доменом и получил на это одобрение
Еврок.омиссии Переговоры Eurid и ICANN длились с октября 2004 года При этом о том, по какой причине они длились
так долго, не сообщается, отмечает интернет-издание ZDNet France.
В настоящее время Eund разрабатывает процедуры регистрации и политику будущего управления доменом, а также
готовится принимать предварительные заявки В третьем квартале этого года начнется период первичного приема заявок
от правительственных учреждений и владельцев торговых марок. Предполагается, что в начале 2006 года начнется
прием заявок от остальных желающих и фактическая работа домена.
Отмечается, что проект по созданию доменной зоны .ей был начат в 2002 году, а изначально запуск домена был
запланирован на конец 2003 года.
© 2004 Lenta.ru С1 сервере Реклама.
Лицензия Минпечати Эл No 77-4400 Письмо в редакцию
Прием опечаток
Дизайн - Студия Артемия Лебедева. 2004
Рис. 3.5. Lenta.Ru в версии для печати
120
Часть I. Технологические основы
'' ,)PDAXenta.ru; Новости: ICAftN
* e
Правка |идПереход ^акладкн ^трумеяты Ставка______________________________________ ОО|
<Qsl * | Uajenta,r^ © Пзрей-Щ . |[gL
5*y»d О J ;
-------------------------------LENTA.RU: КАРМАННАЯ ВЕРСИЯ -----------------------------------
PDA.Lenta.ru: Новости: 2005/03/24 20: IS: 57
ICANN официально одобрила создание домена ,еи
Международная организация ICANN ("Корпорация по распределению
номеров и имен в Интернете"), регулирующая стандарты доменных имен и
IP-адресов, официально одобрила создание нового домена верхнего уровня
.ей, предназначенного для сайтов стран Евросоюза.
Президент ICANN, один из "отцов" Интернета Винтон Серф (Vinton Cerf), _______________________
подписал ДОГОВОР С консорциумом Eurid, который был создан ДЛЯ управления Графика с сайта Eurid
создаваемым доменом и получил на это одобрение Еврокомиссии.
Переговоры Eurid и ICANN длились с октября 2004 года. При этом о том, по какой причине они
длились так долго, не сообщается, отмечает интернет-издание ZDNet France.
В настоящее время Eurid разрабатывает процедуры регистрации и политику будущего управления
доменом, а также готовится принимать предварительные заявки. В третьем квартале этого года
начнется период первичного приема заявок от правительственных учреждений и владельцев
торговых марок. Предполагается, что в начале 2006 года начнется прием заявок от остальных
желающих и фактическая работа домена.
Отмечается, что проект по созданию доменной зоны .ей был начат в 2002 году, а изначально запуск
домена был запланирован на конец 2003 года.
ССЫЛКИ ПО ТЕМЕ
й* .eu is officially born • ZDNet France, 24.03.2005
ICANN одобрила новые домены .rnobi и .jobs - Lenta.ru, 16.12.2004
Financial Times! Права на домен .net могут уйти в Германию - Lenta ru, 16.11.2004
й* В Интернете появятся новые домены .post и .travel - Lenta.ru, 28.10.2004
;♦ Домену .Ru исполнилось 10 лет - Lenta.ru, 07.04.2004
;♦ ICANN расширяет список новых доменных зон - Lenta.ru, 17.12.2002
й* История доменной зоны .usa закончилась неудачно - Lenta.ru, 12.03.2002
;♦ Домены .biz и .info заработвпи, на подходе .eu - Lenta.ru, 28.06.2001
САЙТЫ ПО ТЕМЕ
>:♦ Eurid
♦ ICANN
J>ttp //pds i&nta.ru /n<&ws/2005/03/24/^<}/
Рис. 3.6. Lenta.Ru в варианте для КПК
Не стоит думать, что ваш покорный слуга боготворит CSS2. Разумеется, как и
любая другая технология, как и вообще все то, что создано человеком, CSS2
обладает рядом объективных недостатков. Иначе никто не занимался бы раз-
работкой CSS3 — перспективного развития технологии CSS. Пожалуй, сей-
час нет смысла перечислять отличия CSS3 от CSS2, тем более что мы, положа
руку на сердце, еще и не вдавались толком в ’’анатомию” CSS2, a CSS3 явля-
ется пока лишь рабочим проектом. Далее в этой книге, однако, при рассмот-
рении конкретных примеров, мы будем акцентировать внимание на ключе-
вых нововведениях, ожидающих веб-разработчиков в будущем.
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей
121
Синтаксис конструкций CSS
и связь листа стилей с веб-страницей
В основе технологии CSS лежит особый язык, не имеющий ничего общего с
HTML. Тем не менее язык этот достаточно прост и понятен.
Лист стилей — это набор правил, каждое из которых имеет следующий фор-
мат:
селектор {свойство__1: значение_1; свойство_2: значение_2; ... свойство_Ы:
значение_Ы}
Правила можно записывать в одну строку, но в целях удобочитаемости кода
поначалу лучше всего использовать запись в столбик:
селектор {
свойство_1: значение_1;
свойство_2: значение_2;
свойство_П: значение_Ы;
}
Точка с запятой, следующая за последней парой ’’свойство— значение”, не-
обязательна, но на первых порах ее лучше не пропускать, чтобы выработать
привычку не забывать ставить точку с запятой после каждой такой пары.
Селекторы, свойства и значения
Селектор определяет, к каким элементам HTML-документа будет применено
данное правило. В самом простейшем случае селекторы совпадают с имена-
ми тегов. Так, например, селектор р позволяет определить правило, распро-
страняющееся на все абзацы (элементы <р>...</р>) того документа (или
множества документов), к которому относится лист стилей.
Бывают, разумеется, и более сложные селекторы. Вот некоторые примеры
правил с пояснениями, для каких элементов они действительны:
□ * {...} — распространяется на все без исключения элементы;
□ ы, h2, р {...} — применяется к заголовкам первого и второго уровней,
а также к абзацам;
□ р а {...} — относится к гипертекстовым ссылкам, расположенным внут-
ри абзацев.
Еще бывают селекторы атрибутов, уникальных элементов, классов, псевдо-
элементов, псевдоклассов и т. п., но их мы пока, пожалуй, не будем трогать.
С более сложными селекторами мы будем знакомиться по мере необходимо-
сти на практических примерах.
122
Часть I. Технологические основы
Во многих случаях селекторы строятся на базе элементарных "кирпичиков”,
образуя в результате довольно хитроумные сочетания перечислений элемен-
тов, иерархичности, классов-псевдоклассов и т. д. Такие селекторы (порой в
сотню-другую символов длиной) называются комбинированными. Вот про-
стой пример:
р a, li а
Этот селектор указывает на элементы <а>.. .</а>, но не все подряд, а только
такие, которые заключены в контейнерах <р>.. .</р> и <ii>.. .</ii>.
Что касается свойств и значений, то здесь все совсем просто. Именно они
предписывают агенту пользователя, как именно представлять те или иные
элементы. Нижеследующее простейшее правило, сдается мне, сможет понять
не то что браузер, но даже совсем далекий от Интернета человек, немного
знакомый с английским языком:
р {text-align: right; color: red}
Здесь говорится, очевидно, о том, что все абзацы должны быть выровнены по
правому краю и ’’окрашены" в красный цвет.
Внешние и внутренние листы стилей
Пришло время рассмотреть наиболее животрепещущий вопрос— как же
"привязать" лист стилей к HTML-документу?
Опишем возможные способы.
Наиболее предпочтительный вариант — организация внешнего листа стилей
в виде отдельного файла. Таким файлам обычно присваивают расширение
css, но это вовсе не обязательно.
Внешний лист стилей style.css можно подключить к XHTML-документу,
вставив внутрь контейнера <head>.. ,</head> элемент:
<link rel="stylesheet" href="style.css" type="text/css" />
В случае использования HTML 4 косая черта перед закрывающей угловой
скобкой тега не нужна. (Полагаю, уже пора бы и закончить оговаривать ти-
пичные отличия HTML- и XHTML-конструкций — комментарий такого рода
будет последним.)
Лист стилей можно внедрить непосредственно в HTML-документ. Для этого
используется тег <style>:
<style type="text/css">
</style> Л
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 123
Этот элемент должен также находиться между тегами <head> и </head>
HTML-документа. Конструкции листа стилей помещаются непосредственно
внутрь контейнера <styie>.. ,</styie>.
Тут есть, правда, небольшой нюанс. Устаревшие версии браузеров, не под-
держивающие CSS и не понимающие тега <styie>, могут интерпретировать
CSS-код как часть содержания веб-страницы. Поэтому целесообразно обрам-
лять лист стилей символами HTML-комментария, и тогда устаревшие браузе-
ры будут попросту игнорировать содержимое контейнера <style>.. .</style>:
<style type="text/css">
< I —
</style>
( Примечание J
Комментарии предусмотрены не только в HTML, но и в подавляющем боль-
шинстве других компьютерных языков. Их основное предназначение— дать
возможность разработчику оставлять непосредственно в коде заметки произ-
вольного содержания. В большинстве случаев комментарии поясняют те или
иные фрагменты кода, чтобы в них можно было легко разобраться. Коммента-
рии никак не влияют на функциональность кода.
В языке HTML начало комментария определяется символьной последователь-
ностью <!—, а конец— набором знаков —>. Между этими последовательно-
стями могут находиться любые символы, кроме самих отмеченных сочетаний
знаков. Комментарий может занимать несколько строк.
В CSS предусмотрен свой собственный синтаксис для комментариев. Начать
комментарий можно после сочетания символов /*, а последовательность ★/
указывает на окончание комментария. Точно так же, как в HTML, в CSS не раз-
решены вложенные комментарии; комментарий в CSS, как и в HTML, при необ-
ходимости может занимать несколько строк.
Правила XHTML требуют, чтобы фигурирующие в содержимом элементов и
значениях атрибутов тегов служебные символы, которые могут быть воспри-
няты как управляющие конструкции разметки, были заменены соответст-
вующими ссылками на символьные объекты: ”<”— <, ”>”— >, —
& И Т. Д.
Внутри HTML-комментариев эти знаки могут употребляться в непосредст-
венном виде, но сказанное справедливо только в том случае, если тип содер-
жимого, указываемый веб-сервером в поле content-type HTTP-ответа —
text/htmi. ’’Истинный XHTML”, сопровождаемый MIME-типами text/xml,
appiication/xmi или appiication/xhtmi+xml, подобных вольностей уже не до-
пускает.
124
Часть I. Технологические основы
Фрагменты XML-документов, которые не должны обрабатываться синтакси-
ческим анализатором XML, необходимо заключать в разделы CDATA:
<![CDATA[
Здесь могут содержаться любые символы
]]>
Это относится и к листам стилей, поскольку в них вполне могут встречаться
"запрещенные" спецсимволы. Слегка исхитрившись, можно воплотить и уни-
версальное обрамление для листов стилей, пригодное как для документов,
имеющих тип содержимого text/html, так и для "истинных" XHTML-
документов:
<style type="text/css’’>
<!—/*—><! [CDATAf/*><!--*/
/*]]>*/—>
</style>
Но мы, пожалуй, не будем пока использовать эту "гремучую смесь" из
HTML- и CSS-комментариев в сочетании с объявлением раздела CDATA, а
ограничимся лишь более или менее привычными HTML-комментариями, ибо
сегодня, как уже говорилось в главе 2. отказываться от типа text/html для
веб-страниц еще слишком рано. А поэтому все сказанное относительно раз-
делов CDATA следует воспринимать пока только как информацию на пер-
спективу.
Листы стилей могут включать в себя директивы @import, позволяющие встав-
лять содержимое одного листа стилей в другой, "склеивать" листы стилей по
кусочкам. Использование директивы ^import можно рассматривать как аль-
тернативный способ связи веб-страницы с внешним листом стилей:
<style type=”text/css”>
< ! --
@import url(style.css);
</style>
Наконец, можно использовать местные, или локальные, объявления стилей
непосредственно в HTML-коде для определения свойств одного конкретного
элемента. С этой целью в HTML предусмотрен атрибут style, допустимый
для любых тегов, определяющих отображаемые агентом пользователя эле-
менты:
<р style="text-align: right; color: red">...</р>
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей
125
Вниманию читателей предлагается первый практический пример к этой гла-
ве, иллюстрирующий все вышесказанное. Как и в случае с примерами из гла-
вы 2, его можно найти на компакт-диске, прилагаемом к книге.
Этот пример, демонстрирующий различные способы взаимосвязи листов
стилей с HTML-документами (а заодно — использование комментариев), со-
стоит из трех файлов — XHTML-страницы index.html, являющейся модифи-
кацией листинга 2.6, и двух внешних листов стилей stylel .css и style2.css.
Листинг ЗЛ. Код файла index.html
<?xml version="l.О" encoding;="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN”
%> "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
chtml xmlns="http://www.w3.org/1999/xhtml” lang="ru" xml:lang="ru">
<head>
<title>CB43b листов стилей c НТМП-документом</Ь1Ь1е>
<!— Подключение внешнего листа стилей stylel.css -->
clink rel=”stylesheet" href="stylel.css" type="text/css" />
<!— Определение внутреннего листа стилей —>
Cstyle type="text/css”>
<! --
/* Подключение внешнего листа стилей style2.css ★/
@import url(style2.css);
/★ Правила внутреннего листа стилей */
hl {
background-color: rgb(0, 102, 0); /* Темно-зеленый цвет фона
для всех заголовков
первого уровня ★/
}
</style>
</head>
<body>
<й1>Элементы логической разметки HTML</hl>
<р>Все элементы логической разметки можно подразделить на два типа:
блочные (block) и внутристрочные (inline).</р>
126
Часть I. Технологические основы
<р>Разница между ними заключается в том, что при визуальном отображении
страницы следующие друг за другом блочные элементы располагаются
вертикально, а внутристрочные Smdash; горизонтально. Иными
словами, любой блочный элемент всегда разрывает строку,
а внутристрочный&пЬзр;— нет.</р>
<!— Для последнего абзаца используется полужирное начертание —>
<р style="font-weight: Ьо1сГ’>Абзац является примером блочного
элемента — он всегда начинается с новой строки. Любой
элемент, который следует за абзацем, будет также перенесен на новую
строку.</р>
</body>
</html>
[Листинг 3.2. Код файла sty lei. css
/* Правило для тела веб-страницы */
body {
color: rgb(0, 102, 0); /* Темно-зеленый цвет текста */
background-color: rgb(204, 255, 204); /* Светло-зеленый
слабонасыщенный цвет фона */
}
....................,;г";.v""'............................................
гЛйстинг 3.3. Кодфайла style2.css
/* Правило для всех заголовков первого уровня */
hl {
color: rgb(255, 255, 255); /* Белый цвет текста */
font-family: Tahoma, Arial, sans-serif; /* Шрифт */
font-size: 150%; /* Размер шрифта в полтора раза больше,
чем у основного текста страницы ★/
}
Веб-страница, описанная в вышеприведенных листингах, в графическом
браузере будет выглядеть так, как показано на рис. 3.7.
Назначение тех или иных свойств и значений кратко раскрывается в коммен-
тариях к коду. Более подробно о различных свойствах CSS мы будем беседо-
вать в последующих разделах данной главы и в следующей главе.
Пока же хочется остановиться на том, почему каскадные листы стилей назы-
ваются каскадными.
Нетрудно видеть, что во внешнем листе стилей style2.css содержится прави-
ло, определяющее представление заголовков первого уровня:
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 127
hl {
color: rgb(255, 255, 255);
font-family: Tahoma, Arial, sans-serif;
font-size: 150%;
U flie:///Z:/examples/03/О1 03/mdex,html
Bated
Элементы логической разметки HTML
Все элементы дорической разметки эюжью подргаетгпъ ня два тити б-ю^пшс (block;*
п внутрпстрошше (inline)
Ргнннца между шши заключается в том, что при визуальном отображенш! страницы
следующие друг за другом блочные элементы располагаются вертикально, а
внутрпстр очные — гориюятяльно. Иными словами любой блоштып элемент всегда
разрывает строку, я вщ’тристроштый — нет
А(ван является примером блочного элемента — он всегда начинается с новой
: строки. Любой элемент, который следует за абзацем, будет также перенесен на
; новую строку.
Готова
Рис. 3.7. Отображение страницы index.html в окне графического браузера
Но и во внутреннем листе стилей тоже содержится правило для заголовков
первого уровня — но уже совсем другое:
hl {
background-color: rgb(0, 102, 0) ;
}
Налицо конфликт, В данном случае он разрешается просто: свойство, опре-
деленное позднее, добавляется к ранее определенным свойствам. Иными сло-
вами, два правила, приведенные выше, эквивалентны одному:
hl {
color: rgb(255, 255, 255);
font-family: Tahoma, Arial, sans-serif;
font-size: 150%;
background-color: rgb(0, 102, 0) ;
}
Если же несколько правил противоречат друг другу (к примеру, если в одном
из них определяется белый цвет для заголовков первого уровня, в другом —
128
Часть I. Технологические основы
желтый, а в третьем — и вовсе зеленый), браузер будет руководствоваться
принципом приоритетности.
Листы стилей образуют каскад, выстраиваясь в цепочку приоритетности.
Так, каждое правило характеризуется весом и специфичностью. Правила лис-
та стилей, определенного разработчиком (автором документа), имеют боль-
ший вес, нежели правила, заданные в пользовательском листе стилей. Те, в
свою очередь, обладают большим весом по отношению к правилам, опреде-
ленным браузером по умолчанию.
Правила, соответствующие более специфичным селекторам, ’’сильнее”, чем
правила, относящиеся к более общим селекторам.
Если несколько противоречащих друг другу правил одинаковы по весу и спе-
цифичности, применяется последнее из них. При этом правила, содержащие-
ся в импортируемых (при помощи директивы ^import) листах стилей, пред-
шествуют любым правилам импортирующего листа стилей.
Внутри или снаружи — "против" и "за"
Учебный пример, описанный в листингах 3.1—3.3, иллюстрирует использо-
вание возможных способов связи листов стилей с HTML-документами. Это
не означает, однако, что нужно всегда прибегать к такому разнообразию. На
практике в большинстве случаев бывает достаточно ограничиться одним из
возможных способов. Возникает, однако, резонный вопрос — каким же
именно?
С точки зрения наиболее полной реализации принципа разделения содержа-
ния и представления предпочтительны, разумеется, внешние листы стилей.
Только в этом случае один лист стилей сможет распространять свое влияние
на множество документов.
Если для всех страниц сайта используется единый внешний лист стилей, это
позволяет заметно сократить время загрузки страниц, поскольку обычно файл
стилей, единожды загрузившись, кэшируется браузером, не требуя повторной
передачи с каждым вновь открываемым HTML-документом.
Но, к сожалению, у внешних листов стилей есть недостаток — в некоторых
случаях, например, из-за плохой связи, бывает, что CSS-файлы не загружа-
ются, а это, в свою очередь, приводит к тому, что страница отображается со-
всем не так, как задумывал ее создатель. Кроме того, при сохранении пользо-
вателем веб-страницы в режиме ’’только HTML” сопутствующий CSS-файл
не сохраняется, что приводит к аналогичному результату.
Внутренние листы стилей свободны от этого недостатка, но они не обладают
главным преимуществом внешних листов стилей — способностью в полной
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей
129
мере реализовать принцип разделения содержания и представления на уровне
конечного кода веб-страниц, возможностью управлять представлением мно-
жества документов посредством модификации единственного файла.
Разумеется, это ограничение можно легко обойти, формируя веб-страницы
динамически на стороне сервера— при таком раскладе лист стилей в любом
случае будет физически храниться в единственном экземпляре вне зависимо-
сти от того, каким способом он будет связан с HTML-кодом страницы.
Тем не менее, внедренные в HTML-код листы стилей увеличивают объем
веб-страниц, а с этим недостатком бороться уже никак нельзя.
К тому же, применение динамических технологий стороны сервера на каж-
дом шагу не всегда оправдано. Их использование порождает существенную
нагрузку на сервер, что, естественно, не лучшим образом сказывается на вре-
мени отклика и продолжительности загрузки страниц. Кроме того, серверные
приложения зачастую таят в себе угрозы безопасности — в соответствующей
литературе описаны десятки способов атак на веб-сервер с использованием
уязвимостей, свойственных, например, скриптам, написанным на языке Perl.
Динамические технологии, при всех своих достоинствах, не смогут сравнить-
ся со "статикой" по скорости обработки клиентских запросов и по надеж-
ности.
Так или иначе, при выборе способа связи листов стилей с веб-страницами
нужно руководствоваться, прежде всего, соображениями здравого смысла.
Лист стилей, состоящий из 5—10 коротких правил, как мне представляется,
можно безболезненно внедрить в код веб-страницы при помощи тега <styie>,
но вот "простыню" размером в пару десятков килобайт (а такие в настоящее
время не редкость) лучше уж оформить в виде отдельного файла...
Что касается способа связи внешнего листа стилей с веб-страницей, тег
<iink> является более универсальным средством, нежели директива @import,
которую не понимают многие устаревшие на сегодняшний день браузеры, не
поддерживающие CSS2 в полноте, например, Netscape Navigator 4.x. В то же
время, директива @import может оказаться полезной как раз для того, чтобы
скрыть от подобных пользовательских агентов те правила, которые могут
быть ими неверно истолкованы.
От местных объявлений стилей, определяемых в значениях атрибутов style,
лучше вообще воздерживаться — они, как вы понимаете, препятствуют "на-
стоящему" разделению содержания и представления. Требуемого результата
всегда можно добиться, не применяя местные объявления, а используя вместо
этого "хитрые" селекторы в общем листе стилей.
Тем не менее локальные объявления стилей вполне уместны, например, для
указания линейных размеров графических изображений на странице, особен-
но если размеры каждой картинки строго индивидуальны.
130
Часть I. Технологические основы
Индивидуальные правила представления контента
для различных сред и устройств вывода
В CSS2 определен ряд типов сред и устройств вывода информации, к каждо-
му из которых можно применить индивидуальный набор правил, что дает
возможность создавать аппаратно-зависимые стили. Перечень имен типов
сред и устройств с пояснениями приведен в табл. 3.1.
Таблица 3.1. Типы устройств вывода информации,
определенные спецификацией CSS2
Имя Описание
all Все среды и устройства
aural Речевые синтезаторы (только CSS2; в последующих версиях CSS по ряду причин вместо aural надлежит использовать ключевое слово speech)
braille Тактильные дисплеи Брайля
embossed Печатные материалы с постраничной разбивкой, использующие рельефную азбуку Брайля
handheld Небольшие экраны мобильных устройств
print Печатные материалы с постраничной разбивкой; документы, ото- бражаемые на экране в режиме предварительного просмотра перед печатью
projection Постраничные презентации, демонстрируемые при помощи проек- тора
screen Цветные дисплеи высокого разрешения (прежде всего речь идет о "полноценных" экранах настольных компьютеров и ноутбуков)
tty Терминальные устройства, предназначенные для вывода символов фиксированных размеров
tv Устройства с цветными экранами низкого разрешения, ограниченной прокруткой и возможностью воспроизведения звука (наподобие WebTV, некогда популярного на Западе)
Существуют CSS-свойства, которые можно использовать только примени-
тельно к конкретным типам устройств вывода. Так, например, все свойства,
использованные в нашем первом практическом примере к этой главе —
color, background-color, font-family И font-size,— актуальны ТОЛЬКО ДЛЯ
визуальных сред и устройств.
Обеспечить работу аппаратно-зависимых стилей можно несколькими различ-
ными способами. Первый пример связывает страницу с внешним файлом
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 131
стилей printer.css, определяющим визуальное форматирование ее содержимо-
го при выводе на печать:
clink rel="stylesheet" href="printer.css" type="text/css"
{bmedia="print" />
Аналогичным образом атрибут media может быть задан и для тега <style>.
Один документ вполне может содержать несколько элементов
<style>...</style>.
Другой пример демонстрирует применение директивы ©media для определе-
ния аппаратно-зависимой части, которая задает правила произнесения текста
страницы программами синтеза речи, непосредственно во встроенном листе
стилей:
cstyle type="text/css”>
©media aural
{
}
</style>
Наконец, в третьем примере показано, как использовать директиву ©import
для того, чтобы вставить во встроенный стиль внешний фрагмент, заданный
файлом pocketpc.css и определяющий правила форматирования содержания
страниц в версии для "наладонников”:
cstyle type="text/css">
©import url(pocketpc.css) handheld;
</style>
Будьте внимательны — Internet Explorer, включая даже шестую версию, не
восприимчив к последнему варианту синтаксиса. Подобную директиву брау-
зер от Microsoft попросту проигнорирует.
В главе 4 будет описан завершенный сайт, предусматривающий автоматиче-
ски генерируемые версии представления контента: экранную, для печати и
Для КПК. Пока же предлагаю рассмотреть простейший практический пример,
явно определяющий стиль только для экранной версии страницы.
Соответствующий XHTML-документ, по обыкновению, назовем именем
index.html. Лист стилей будет внешним, организованным в виде файла
style.css.
132
Часть I. Технологические основы
:• Листинг 3.4, Код файла Index,html
<?xml version="l.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Ъ "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>fleMOHCTpau,HH аппаратно-зависимого CTnnn</title>
clink rel="stylesheet" href="style.css" type="text/css"
^>media="screen" />
</head>
<body>
<Ь1>Элементы логической разметки HTML</hl>
<p>Bce элементы логической разметки можно подразделить на два
типа: блочные (block) и внутристрочные (inline).</р>
<р>Разница между ними заключается в том, что при визуальном отображении
страницы следующие друг за другом блочные элементы располагаются
вертикально, а внутристрочные — горизонтально. Иными
словами, любой блочный элемент всегда разрывает строку,
а внутристрочный&пЬзр;— нет.</р>
<р>Абзац является примером блочного элемента — он всегда
начинается с новой строки. Любой элемент, который следует за абзацем,
будет также перенесен на новую строку.</р>
</body>
</html>
Листинг 3.5, Содержимое файла style.css
/* Предполагается использование рубленого шрифта для всего текста
страницы ★/
body {
font-family: Tahoma, Arial, sans-serif;
}
/★ Заголовок первого уровня делаем золотистым и очень большим */
hl {
color: rgb(255, 204, 0) ;
font-size: 300%;
}
Глава 3. Оформление веб-страниц с использованием каскадных листов стилей
133
/★ Текст абзацев делаем водянисто-голубым,
применяем выключку по формату */
Р {
color: rgb(0, 153, 204);
text-align: justify;
Открыв эту страницу в графическом браузере, мы увидим большущий заго-
ловок золотистого цвета и три водянисто-голубых абзаца, выровненных по
всей ширине строк (рис. 3.8). Весь текст будет набран с использованием
шрифта без засечек (подробнее о шрифтах поговорим ниже).
| Все элементы логической разметки можно подразделить на два типа: блочные
| (block) и внутристрочные (inline).
| Разница между ними заключается в том, что при визуальном отображении
| страницы следующие друг за другом блочные элементы располагаются
вертикально, а внутристрочные — горизонтально. Иными словами, любой блочный
элемент всегда разрывает строку, а внутрисхемный — нет.
j Абзац является примером блочного элемента — он всегда начинается с новой •
строки, Любой элемент, который следует за абзацем, будет также перенесен на
S новую строку,
Рис. 3.8. Отображение страницы, использующей аппаратно-зависимый стиль
Однако при попытке вывести страницу на печать все "излишества” пропадут.
Внешний вид документа в окне предварительного просмотра (рис. 3.9) свиде-
тельствует, что страница будет напечатана с использованием умолчаний,
принятых в настройках браузера.
А теперь попробуем убрать атрибут media из тега <iink>, заменив строку
<link rel="stylesheet" href="style.css" type="text/css"media="screen" />
134
Часть I. Технологические основы
листинга 3.4 на следующую:
clink rel="stylesheet" href="style.css" type="text/css" />
Если теперь открыть диалог предварительного просмотра страницы перед
печатью, то внешний вид документа, отраженный там, будет вполне соответ-
ствовать облику нашей веб-страницы, отображаемой в окне браузера
(рис. 3.10).
Демонстрация аппаратно-зависимого стиля
file ///2 /example s/D3/D4-05/index html
Элементы логической разметки HTML
Абзац является примером блочного элемента — он всегда начинается с новой строки Любой
элемент, который следует за абзацем, будет также перенесен на новую строку.
Все элементы логической разметки можно подразделить на два типа блочные (block) и
внутристрочные (inline)
Разница между ними заключается в том, что при визуальном отображении страницы
следующие друг за другом блочные элементы располагаются вертикально, а
внутристрочные — горизонтально Иными словами, любой блочный элемент всегда
разрывает строку, а внутристрочный — нет
Рис. 3.9. Предварительный просмотр страницы перед выводом на печать
Рис. 3.10. Предварительный просмотр страницы с модифицированным листом стилей
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 135
Цвет текста и фона
Свойства, которые назначают цвета для текста и фона тех или иных элемен-
тов веб-страниц, мы уже, фактически, рассмотрели в приведенных выше
примерах.
Цвет текста определяется свойством с закономерным названием color, цвет
фона задается при помощи свойства background-color.
Следует, однако, уделить внимание возможным значениям этих свойств.
До сих пор мы использовали только один из типов значений:
rgb(r, g, b)
Всем известно, что каждый пиксел цветного изображения на экране монитора
формируется при помощи смешения определенных долей красного, зеленого
и синего цветов. В вышеприведенной записи числа г (red — красный), g
(green — зеленый) и ь (blue — синий) как раз и определяют, в каких пропор-
циях и что нужно смешивать. Каждое такое число может принимать значения
от 0 до 255 (числа, выходящие за указанный диапазон, приводятся к ближай-
шим граничным значениям — так, например, 350 будет интерпретироваться
как 255).
В сущности, это не что иное, как воплощение классической 24-битовой моде-
ли RGB, в которой на каждый из трех цветовых каналов отводится по 8 бит:
28 = 256 — количество возможных градаций каждой из составляющих,
(28)3 = 224 = 16 777 216 — общее количество возможных оттенков.
Описываемый тип значений наиболее универсален, однако в CSS предусмот-
рен сокращенный эквивалент — запись в шестнадцатеричной форме:
ftrrggbb
Здесь rr, gg и ьь — двузначные шестнадцатеричные числа в диапазоне от 00
до FF (шестнадцатеричные цифры А—F можно записывать и в нижнем реги-
стре, т. е. при помощи строчных букв). Так, например, значение rgb(0, 153,
204) из листинга 3.5 эквивалентно такому: #0099сс. Скажу больше— если
каждое из трех шестнадцатеричных чисел образовано парой повторяющихся
цифр, как в этом примере, то допускается еще более краткая форма записи:
#rgb
Значение #0099сс, например, можно записать как #09с.
Шестнадцатеричная форма записи значений цвета является наиболее пред-
почтительной — при помощи нее можно представить любой из тех самых
16 777 216 цветов, и вместе с тем она обладает великолепной лаконичностью.
136
Часть I. Технологические основы
Конечно, людям, в меру далеким от программирования, придется изрядно
потренироваться, чтобы научиться ’’сходу” представлять нужный цвет сразу в
шестнадцатеричной записи — однако, поверьте, не такое уж это и мудреное
искусство. Если совсем никак не получается— штатный ’’Калькулятор” из
комплекта поставки Windows вполне справится с преобразованием десятич-
ного числа в шестнадцатеричную форму. Если же у вас установлен
Photoshop 7.0 или CS, то выбор подходящего цвета и его представление в
шестнадцатеричной форме вообще не доставит забот: диалог Color Picker
предоставит всю необходимую информацию. Но лениться не следует— вся-
кий уважающий себя дизайнер или кодер, на мой скромный взгляд, должен
уметь в голове синтезировать необходимый цвет в любых самых что ни на
есть ’’походных” условиях.
у Примечание )
Уважающий себя дизайнер, кроме всего прочего, должен ориентироваться в
физике цвета и особенностях устройства человеческого глаза; разбираться в
том, что такое спектральные и неспектральные цвета, а также относительная
спектральная чувствительность глаза; представлять себе, зачем нужны главное
цветовое пространство и локус цветов; ясно понимать сущность, ограничения,
особенности и взаимосвязь основных аппаратно-независимых и аппаратно-
зависимых цветовых моделей. Ну и, конечно, чувствовать психологию воспри-
ятия цвета, уметь грамотно подбирать и сочетать цвета.
Веб-дизайнер (работающий только с экранным изображением, но не сующий
носа в полиграфию, где море своих нюансов) должен, по меньшей мере, "на ав-
томате" мыслить в терминах модели HSB (hue — тон, saturation — насыщен-
ность, brightness — яркость) и понимать... нет, не так — чувствовать! — взаимо-
зависимость моделей HSB и RGB, легко и непринужденно "переключаясь" меж-
ду ними.
Все эти и многие другие наиважнейшие темы лежат за пределами данной кни-
ги, иначе бы я никогда не закончил ее. Это краткое примечание, однако, напи-
сано отнюдь не с целью бравады хитроумными терминами, как могут подумать
иные читатели. Забираясь, время от времени, в "дебри", я стараюсь расширить
ваш кругозор и построить маяки, которые бы указывали, в каком направлении
двигаться дальше.
Для полноты картины рассмотрим еще два способа задания цвета с помощью
CSS. Один из них напоминает упомянутую выше форму rgb(r, g, b), с той
лишь разницей, что градации каждой из трех составляющих задаются не в
абсолютных величинах от 0 до 255, а в процентах, от 0 до 100%:
rgb(r%, g%, b%)
Так, наш любимый цвет rgb(0, 153, 204), он же #0099сс, он же #09с, в записи
с процентами будет представлен как rgb(0%, 60%, 80%). Значения вроде
120%, опять же, будут приводиться к ближайшим граничным.
"Процентная" форма представления цвета, несмотря на наглядность, имеет
существенный недостаток: при помощи нее можно задать всего лишь
Глава 3. Оформление веб-страниц с использованием каскадных листов стилей
137
1013 = 1 030 301 оттенков. Каждый из них все равно приводится к ближайше-
му значению в "полноценной" 24-битовой модели.
Самый простой, но и наиболее несовершенный способ задания цвета— по
ключевому слову. CSS2 поддерживает определенные в HTML 4 (и унаследо-
ванные от палитры VGA) предустановленные 16 значений цвета (к примеру,
black— черный, white— белый, red— красный и т. д.). Спецификация
CSS2.1 предусматривает 17 предустановленных значений цвета (те же 16
плюс orange — оранжевый).
Ряд браузеров, ко всему прочему, "на свой страх и риск" поддерживают рас-
ширенный перечень предустановок— в основном, из набора XI1 (это прото-
кол, определяющий взаимодействие между приложением и системой отобра-
жения графики; разрабатывался в середине 80-х для UNIX-систем). Ожидает-
ся, что CSS3 официально будет поддерживать все, без малого полторы сотни
ключевых слов, соответствующих XI1-цветам. Среди этих слов есть и весьма
экзотичные— к примеру, какой-нибудь blanchedaimond ("очищенный мин-
даль"). Мне кажется, что выучиться считать в шестнадцатеричной системе
счисления намного проще, нежели запомнить все эти поэтичные названия.
Так или иначе, в приложении 2 приводятся все поименованные цвета, как
поддерживаемые спецификацией CSS2, так и ожидающиеся в CSS3. Может
быть, кому-то на первых порах эта информация пригодится...
При разработке листов стилей для реальных проектов не стоит уповать на
умолчания, принятые в браузерах. Не следует думать, что все поголовно гра-
фические браузеры используют по умолчанию черный цвет для текста, а бе-
лый— для фона страницы. В IE3, например, цвет фона окна по умолчанию
был серым; к тому же, пользователи могут изменять настройки.
Если вам на странице нужны именно черные буквы на белом фоне — так
прямо и скажите:
body {color: #000; background-color: #fff}
Значение свойства color будет применяться ко всем элементам, вложенным в
контейнер <body>.. .</body> — иными словами, оно наследуется элементами,
для которых элемент <body>.. .</body> является родительским.
Что касается значения свойства background-color, то оно не наследуется вло-
женными элементами — если цвет фона явно не задан, фон будет прозрач-
ным.
С Примечание )
В нашем первом примере к этой главе мы использовали темно-зеленый цвет
для основного текста страницы и светло-зеленый — для ее фона. Это неплохое
цветовое решение, но разработчикам информационных сайтов я все-таки ре-
комендовал бы по возможности не отступать от традиций. Текст, набранный
"черным по белому" — это классика. Побродите по Сети, присмотритесь к ве-
138
Часть I. Технологические основы
дущим сайтам, принадлежащим крупнейшим транснациональным корпораци-
ям — почти все они используют черный цвет для основного текста и белый —
для фона. И вообще оформлены достаточно просто.
В заключение этого раздела хотелось бы вспомнить еще вот о чем. В веб-
разработке получила особое распространение так называемая ’’безопасная”
палитра цветов. Оттенки, входящие в эту палитру, отображаются одинаково и
без диффузии (т. е. имитации недоступного оттенка чередованием пикселов
двух близких к нему цветов, имеющихся в текущей палитре) на большинстве
платформ даже при работе с экранным режимом, предусматривающим всего
256 цветов.
На настольных компьютерах и ноутбуках 8- и даже 16-битовый цвет— уже
архаизм, но, полагаю, бум портативных устройств вдохнет в ’’безопасную”
палитру вторую жизнь. Во всяком случае, я стараюсь использовать ’’безопас-
ные” цвета везде, где это не противоречит здравому смыслу.
’’Безопасная” палитра содержит 216 цветов и формируется из множества от-
тенков, красная, зеленая и синяя компоненты которых могут принимать толь-
ко значения 0, 51, 102, 153, 204 и 255 (в шестнадцатеричной записи — 00, 33,
66, 99, сс и ff соответственно).
Таким образом, приглянувшийся нам оттенок #09с— типичный представи-
тель ’’безопасной” палитры. Что забавно, среди поименованных цветов очень
мало ’’безопасных”. Зато в том самом диалоге Color Picker в Photoshop 7.0 и
CS имеется флажок Only Web Colors, позволяющий выбирать только те цве-
та, которые относятся к ’’безопасной” 216-цветной палитре (рис. 3.11).
Рис. 3.11. Диалог Color Picker в Photoshop CS. Флажок Only Web Colors активизирован
Глава 3. Оформление веб-страниц с использованием каскадных листов стилей
139
В среднем столбце диалога Color Picker координаты выбранного цвета ото-
бражаются в моделях HSB и RGB, в том числе в шестнадцатеричном пред-
ставлении.
Фоновое изображение
В эпоху, когда каскадные листы стилей были еще в новинку, существовал
лишь один алгоритм рендеринга фона— размножение фонового изображе-
ния от верхнего левого угла того или иного элемента страницы по всей пло-
щади последнего.
Благодаря CSS арсенал средств по управлению фоновыми изображениями
существенно расширился.
За отображение фонового рисунка отвечают четыре свойства: background-
image, background-repeat, background-attachment И background-position.
Свойство background-image, как и следует из названия, определяет графи-
ческое изображение, предполагаемое к использованию в качестве фона. При-
мер:
body {background-image: url(bg.png)}
Алгоритм повторения фонового изображения задается при помощи свойства
background-repeat. Возможные значения:
□ repeat — изображение повторяется и по вертикали, и по горизонтали, за-
полняя собой всю площадь элемента, это значение используется по умол-
чанию;
□ repeat-x — изображение повторяется только по горизонтали;
□ repeat-y — то же, только по вертикали;
□ no-repeat — фоновое изображение не повторяется, а размещается в един-
ственном экземпляре.
Свойство background-attachment указывает, следует ли изображению прокру-
чиваться вместе с контентом, или же ему надлежит быть зафиксированным
относительно области просмотра, т. е. окна браузера. Значениями этого свой-
ства могут являться, соответственно, ключевые слова scroll и fixed.
Свойство background-position определяет расположение фона (а точнее, пер-
вого экземпляра фонового изображения) на странице и допускает множество
разнообразных значений, в которых нетрудно и запутаться.
Одним из способов определения координат фона является задание их в про-
центах от линейных размеров элемента, которому назначается фоновое изо-
бражение. Значение по умолчанию так и определено — 0% 0%.
140
Часть I. Технологические основы
Первая цифра означает смещение по горизонтали, вторая — по вертикали.
Если задано только одно число, например 10%, подразумевается, что речь идет
о горизонтальном смещении. Вертикальное смещение при этом считается
равным 50%.
Помимо процентов, допускается использование ключевых слов left (левая
граница), right (правая граница), top (верхняя граница), bottom (нижняя гра-
ница) и center (по центру). Примеры:
□ top left или left top — тоже, что 0% 0%;
□ top, top center ИЛИ center top — тоже, ЧТО 50% 0%;
□ right top ИЛИ top right — TO же, ЧТО 100% 0%;
О left, left center ИЛИ center left — TO же, ЧТО 0% 50%;
□ center ИЛИ center center — TO же, ЧТО 50% 50%;
□ right, right center ИЛИ center right — TO же, ЧТО 100% 50%;
□ bottom left ИЛИ left bottom — TO же, ЧТО 0% 100%;
□ bottom, bottom center ИЛИ center bottom—TO же, ЧТО 50% 100%;
□ bottom right ИЛИ right bottom—TO же, ЧТО 100% 100%.
Помимо всего прочего, смещения можно задавать в линейных единицах из-
мерения, предусмотренных в CSS. О них стоит поговорить подробнее.
Линейные единицы измерения в CSS
Мы подошли к весьма и весьма важной теме, которая будет сопровождать нас
и в следующей главе, посвященной блочной модели CSS2.
В CSS определены следующие единицы измерения.
□ Относительные:
• ет— кегельная (круглая) шпация, или просто кегельная; иными слова-
ми — величина кегля шрифта, т. е. высота строки;
• ех — рост строчных буке; высота малой буквы "х" данного шрифта;
• рх (pixel; исторически — сокращение слов picture element) — пиксел.
□ Абсолютные:
• cm (centimeter) — сантиметр;
• mm (millimeter) — миллиметр;
• in (inch) — дюйм (2,54 сантиметра);
• pt (point) — пункт (’/72 дюйма);
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 141
• pc (pica)— пика (12 пунктов); иногда в русскоязычной литературе
встречается транскрипция ’’пайка”, особенно в старых книгах.
Примечание
Типографский пункт, в точности равный семьдесят второй части английского
дюйма, введен "в оборот" компанией Adobe совсем недавно по меркам истории
печатного дела. Полиграфистам знакомы и другие типометрические системы —
но мы, пожалуй, оставим их в покое. Разговору об истории типометрии вполне
можно было бы посвятить отдельную книгу, а нам пока вполне хватит и тех
единиц измерения, которые определены в CSS.
Внимательный читатель помнит, что о происхождении названия единицы из-
мерения ет мы беседовали в одном из примечаний к разделу "Абзацы" гла-
вы 2, поэтому сейчас останавливаться на данном вопросе не будем.
Что касается единицы измерения ех, то ”х” — чуть ли не единственная буква
латинского алфавита, высота которой равна... высоте строчных букв, да и то
не во всех случаях (например, когда речь заходит о курсивном начертании).
Что за чертовщина, спросите? Тут вот какое дело. Шрифт — это одна из наи-
более тонких и благородных материй, порожденных человечеством. Шрифт
не терпит случайностей — законы его построения формировались веками,
если не сказать — тысячелетиями. ’’Анатомия” шрифта чрезвычайно сложна,
но ее следует непременно постичь. Ибо даже великолепная интуиция и безу-
пречный вкус сами по себе, не подкрепленные твердым знанием всех дета-
лей, тонкостей, нюансов, выработанных поколениями мастеров, обязательно
дадут промах, как только речь зайдет о подборе шрифтов для сколько-либо
сложной шрифтовой композиции, а тем более — о собственноручном созда-
нии образцов шрифта. Фальшь проявится неизбежно.
Так вот, о букве ”х”. Поэкспериментируйте— рассмотрите, например, стоя-
щие рядом буквы ”о” и ”х” в крупном кегле, хотя бы в окошке редактора
MS Word. (Или в этой книге, вооружившись увеличительным стеклом.) Вы
увидите, что их высоты неодинаковы. Буква ”о” выше, чем ”х”. за счет свиса-
нии, компенсирующих обман зрения: круг всегда кажется меньше располо-
женного рядом квадрата, сторона которого в точности равна диаметру круга.
И так уж сложилось, что те самые свисания имеются у всех строчных букв
латинского алфавита, за исключением ”х”. А если не свисания — так вынос-
ные элементы, как, например, у букв ”f” или ”к”. У выносных элементов,
кстати, тоже различают свисания — но, кажется, я уже полез в дебри. Во вся-
ком случае, к основному шрифту этой книги тезис об ’’исключительности”
буквы ”х” относится в полной мере.
Пиксел, точка изображения, причислен к относительным единицам, посколь-
ку его абсолютные размеры зависят от разрешаюгцей способности устройст-
ва вывода, которая измеряется обычно в dpi (dots per inch — точки на дюйм).
142
Часть I. Технологические основы
При отображении страницы в окошке браузера на экране монитора единица
измерения рх в точности соответствует одному экранному пикселу, мини-
мально возможному элементу изображения. Однако при выводе на печать
(а у печатающих устройств, как известно, разрешающая способность намного
больше, нежели у экрана), единица измерения рх уже не будет соответство-
вать одной точке растра. Спецификация CSS предписывает агентам пользова-
теля масштабировать единицу измерения рх в случае, если разрешающая спо-
собность устройства вывода выходит далеко за рамки типичных величин эк-
ранного разрешения. Иными словами, 1рх на бумаге будет представлен
несколькими точками растра.
С абсолютными единицами измерения, казалось бы, все ясно. Это, однако,
ошибочная удаль.
Дело в том, что точный сантиметр или дюйм на экране вы никогда не полу-
чите.
Да, графические среды ряда операционных систем позволяют автоматически,
в зависимости от текущего экранного режима и модели монитора вычислять
реальную разрешающую способность экрана. Windows же по умолчанию
считает, что разрешающая способность экрана равна 96 dpi. Значение это
можно изменить вручную, щелкнув правой кнопкой мыши по Рабочему столу
и выбрав в выпавшем меню пункт Свойства. В появившемся окне необходи-
мо открыть закладку Настройка, там нажать кнопку Дополнительно и, на-
конец, во вновь открывшемся диалоге перейти к закладке Общие. Выбрав в
выпадающем списке Размер шрифта пункт Другой..., желающие могут даже
приложить линейку к экрану, дабы сравнить дюйм, нарисованный воображе-
нием компьютера, с реальным — только, пожалуйста, не поцарапайте анти-
бликовое покрытие.
Тут, однако, есть три проблемы.
Во-первых, точность автоматического (равно как, впрочем, и ручного) вы-
числения разрешающей способности во многих случаях оставляет желать
лучшего. Скажем, у мониторов на базе электронно-лучевых трубок (ЭЛТ)
фактические размеры видимой области экрана никогда не совпадают с заяв-
ленными производителем параметрами. Хотя бы потому, что каждый пользо-
ватель настраивает монитор под себя любимого, в том числе сжимая или рас-
тягивая картинку. Кроме того, на ЭЛТ-мониторах ввиду далеко не идеальной
и не однородной геометрии, горизонтальное и вертикальное разрешения мо-
гут существенно различаться. И в особенности'— при использовании непро-
порциональных экранных режимов. (Соотношение сторон экрана— 4:3, и
мне, по всей видимости, никогда не понять людей, которые жертвуют, на-
пример, режимом 1280x960 в пользу совершенно абсурдного 1280x1024 из-за
полоски толщиной в 64 пиксела...)
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 143
Во-вторых, среднестатистический пользователь, на благо которого мы, соб-
ственно говоря, и стараемся, вряд ли когда-нибудь по собственной инициати-
ве полезет в то самое окошко свойств— а если и полезет, то без должного
понимания сути дела, из спортивного интереса. Вообще же, большинство
пользователей пассивно, и изменять настройки по умолчанию им не свойст-
венно. (Ну, разве что, обои на Рабочий стол повесить — но это так, развле-
чение.)
В-третьих, уж я не знаю, как на других платформах, но в Windows к разреше-
нию экрана жестко привязаны размеры всех шрифтов, включая системные.
Если оставить в покое настройки по умолчанию, то при смене экранного ре-
жима с 1600x1200 до 800x600 один дюйм вполне может превратиться в два
дюйма. На том же самом мониторе. Как вам такое постоянство?..
В общем, абсолютные единицы длины на экране — это вещь, мягко говоря,
эфемерная. А вместе с ними и понятие кегля шрифта в отношении экранных
текстов шатко и призрачно. Абсолютные единицы измерения куда более ак-
туальны, когда речь заходит о разработке версии представления контента,
предназначенной для вывода на печать.
Подготовка фоновых изображений
Вернемся, однако, к фонам. Напомню, что разговор о единицах измерения
начался с рассказа о том, что свойство background-position позволяет опреде-
лять величины смещений в единицах длины.
Скажу больше— означенное свойство позволяет комбинировать значения,
заданные в линейных единицах измерения, с процентными значениями и
ключевыми словами. К примеру, так:
background-position: 0% 25рх
Очевидно, такая запись говорит о том, что фоновое изображение будет сме-
щено на 25 пикселов по вертикали.
Чувствую, пора бы привести законченный практический пример. Предлагаю
для разнообразия сделать лист стилей внутренним, чтобы не приводить два
листинга (имеется в виду, что в случае внутреннего листа стилей можно
обойтись одним листингом, тогда как в случае внешнего придется делать два:
один — для HTML-кода, второй — для CSS-кода).
[ Листинг 3.6. Пример использования CSS-свойств. . - =
| управляющих фоновым изображением j
<?xml version="l.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
%> "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
144
Часть I. Технологические основы
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>BcTaBKa фонового изображения<^^1е>
<style type="text/css">
<! —
body {
color: #000;
background-color: #fff;
background-image: url(fortress.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50px 150px;
}
</style>
</head>
<body>
<Ы>Вставка фонового изображения</Ь1>
<p>B эпоху, когда каскадные листы стилей были еще в диковинку,
существовал лишь один алгоритм рендеринга фона&пЬзр;— размножение
фонового изображения от верхнего левого угла того или иного элемента
страницы по всей площади последнего.</р>
<р>Благодаря CSS арсенал средств по управлению фоновыми изображениями
существенно расширился.</р>
<р>3а отображение фонового рисунка отвечают четыре свойства:
background-image, background-repeat, background-attachment
и background-position.</p>
</body>
</html>
В качестве фонового изображения была выбрана фотография крепости Коре-
ла (Приозерск) размерами 320x240 пикселов, имя файла— fortress.jpg. При
помощи Photoshop мы сделали изображение ’’бледным" — с тем, чтобы фото-
графия воспринималась именно как фон и не затрудняла чтение расположен-
ного поверх нее текста.
Используя свойство background-repeat, мы запретили размножение фонового
рисунка. В значении свойства background-attachment мы указали, чтобы кар-
тинка прокручивалась вместе с текстом страницы. Изображение смещено на
50 пикселов вправо и на 150 пикселов вниз относительно левого верхнего
угла страницы благодаря применению свойства background-position.
Внешний вид страницы, описанной в листинге 3.6, приведен на рис. 3.12.
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей
145
файл Правка Переход Закладки йнструменты Сдоавка
\р * Ц, * r&f I - f|le///Z/examples/03/06/mdex.html
Getting Started Latest Headlines
Q J
О Перейти fjat
Вставка фонового изображения
В эпоху, когда каскадные листы стилей были еще в диковинку,
существовал лишь один алгоритм рендеринга фона — размножение
фонового изображения от верхнего левого утла того или иного
элемента страница по всей площади последнего.
Благодаря CSS арсенал средств по управлению фоновыми
пзображеж^ш супрсхвенно расширился.
За отображение фонрвдго^исужа отвечают четыре свойства:
backgioimd-Hiw^^^^^ft^^eat, backgiound-attaclunent и
background-position.
Готово
Рис. 3.12. Страница, использующая фоновое изображение
( Примечание
Некоторые свойства, в том числе и background-position, позволяют опреде-
лять не только положительные, но и отрицательные значения с использовани-
ем линейных единиц измерения. К примеру, указание background-
position: -25рх -50рх сместит фоновое изображение на 25 пикселов влево и
на 50 пикселов вверх относительно левого верхнего угла элемента, для которо-
го оно определено — таким образом, часть фонового изображения останется
"за кадром".
В CSS предусмотрено обобщенное свойство background, позволяющее фор-
мулировать правила, относящиеся к управлению фоном, более кратко. Так,
лист стилей, описанный в листинге 3.6, можно сократить до такого вида:
| Листинг 37< Использование свойства background
Ь..*к..«к.......(*к...*к...*к...*к..«к.и.к..«....*....*....*...«к..мк..«к..«...ок...*...«к...*к...м...*к..«к..<м..<«к.«к..ок...«..«к..<*к...*. .
body {
color: #000;
background: #fff url(fortress.jpg) no-repeat scroll 50px 150px;
146
Часть I. Технологические основы
Зачастую в качестве фоновых изображений для веб-страниц используются
простейшие пиксельные текстуры, основу которых составляет многократно
повторяющееся "ядро", состоящее из считанных пикселов. При этом велик
соблазн оставить в фоновой картинке единственный экземпляр такого "яд-
ра" — мол, браузер самостоятельно повторит его столько раз, сколько нужно.
Это искушение следует, однако, преодолеть. В России живет достаточно
пользователей, для которых трехгигагерцовые четвертые "пентиумы" с гига-
байтами памяти на борту существуют лишь в мечтах. Попробуйте разыскать
какой-нибудь Pentium-100 с восьмью мегабайтами "оперативки" на борту
(а такие машины— отнюдь не редкость в отечественных провинциальных
офисах) и посмотрите, сколько времени подобный компьютер будет отрисо-
вывать такое вот фоновое изображение. Мораль напросится сама собой: кар-
тинка, которая будет множиться в фоне страницы, должна иметь размер не
менее 50—100 пикселов по меньшей стороне (рис. 3.13).
Рис. 3.13. Размер фонового изображения, какой бы простой ни была его текстура,
необходимо довести до 50—100 пикселов по меньшей стороне
Форматирование текстовых блоков
Обсуждая основные элементы логического структурирования информации в
главе 2, мы всякий раз откладывали разговор о переопределении их внешнего
вида при помощи CSS до лучших времен.
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 147
И вот, кажется, такие времена наступили. В этом разделе мы вкратце коснем-
ся CSS-свойств, наиболее часто использующихся для управления визуальным
представлением фрагментов текстового содержания веб-страниц. Некоторые
подобные свойства уже мелькали в примерах к этой главе.
Свойства шрифта
Под шрифтом в самом общем и грубом смысле понимается некоторый ком-
плект знаков (символов), объединенных какими-либо общими визуальными
признаками, стилевыми особенностями и характерными чертами рисунка.
Начертание шрифта — характеристика, более детально отражающая форму
знаков, уточняющая толщину штрихов, наличие и характер наклона букв,
плотность и т. п.
Множество всех начертаний одного шрифта называется гарнитурой. Если
шрифт представлен единственным начертанием, термин "гарнитура" по от-
ношению к нему обычно не используют.
Все шрифты можно разделить на две большие категории:
□ алфавитно-цифровые, содержащие национальные символы тех или иных
языков;
□ наборы специальных символов (например, математических, химических,
картографических) или пиктограмм.
В дальнейшем мы будем обсуждать лишь шрифты первой группы, причем
только те, которые содержат буквы латинского и русского алфавитов.
Каждый знак любого шрифта представляет собой совокупность ряда штри-
хов. Так, например, различают основные и соединительные штрихи.
К основным (называемым иначе штамбами или стойками) относятся доми-
нирующие вертикальные или наклонные, направленные слева сверху вправо
вниз элементы рисунка знаков. Соединительные штрихи— это, в первую
очередь, горизонтальные, а также наклонные, но направленные слева снизу
вправо вверх (и, как правило, существенно более тонкие) линии. В ряде
шрифтов (в частности, в том, которым набрана эта книга) знаки имеют засеч-
ки— короткие штрихи, венчающие штамбы. Засечки в большинстве случаев
перпендикулярны основным штрихам.
Все необозримое множество современных алфавитно-цифровых шрифтов
можно подразделить на три большие группы:
П шрифты с засечками (антиква)}
□ шрифты без засечек (рубленые, или гротески)}
П декоративные, к которым относятся разнообразные стилизации под ста-
рину, шрифты, украшенные всевозможными орнаментами и эффектами, а
также шрифты, имитирующие рукописные.
148
Часть I. Технологические основы
Кроме того, шрифты можно классифицировать по признаку ширины знаков.
В подавляющем большинстве шрифтов ширина знаков варьируется от знака к
знаку (такие шрифты называются пропорциональными), но существует под-
класс моноширинных шрифтов, предназначающихся, например, для оформ-
ления фрагментов кода программ или просто имитирующих набор на пишу-
щей машинке.
Перечислим еще некоторые важные характеристики шрифта:
□ контрастность — соотношение толщин основных и соединительных
штрихов знака (это один из отличительных признаков, характеризующих
гарнитуру в целом);
□ насыщенность — отношение толщины основного штриха к высоте знака
(в одной гарнитуре может быть несколько начертаний, различающихся по
насыщенности).
Говоря о начертаниях шрифта, целесообразно подразделить все множество
начертаний на несколько групп.
□ По характеру наклона: прямое, наклонное, курсивное. Важно отметить, что
наклонное и курсивное начертания — это не одно и то же. Наклонное на-
чертание, грубо говоря, является просто слегка "перекошенным” вправо
основным начертанием шрифта. Курсивное же начертание существенно
отличается от основного по стилю, являясь более округлым, приближен-
ным к рукописному.
□ По насыщенности: светлое, нормальное, полужирное, жирное, сверхжир-
ное. В светлом начертании толщина штрихов даже меньше, чем в основ-
ном начертании, а семейство жирных начертаний представляет шрифт с
различными степенями увеличения насыщенности. Как правило, светлое,
жирное и сверхжирное начертания имеют лишь рубленые шрифты, да и то
далеко не все. Шрифты с засечками в большинстве своем ограничиваются
лишь нормальным и полужирным начертаниями.
□ По плотности: сжатое, нормальное, растянутое. Сжатое и растянутое
начертания при их отсутствии в гарнитуре не следует пытаться получить
при помощи механического изменения ширины знаков (к примеру, при
создании шрифтовых композиций в графическом редакторе) — при этом
неизбежно теряются пропорции, изменяется контрастность шрифта.
□ Специальное начертание: капитель. Под капителью понимается использо-
вание заглавных букв, имеющих высоту и выполняющих роль строчных,
в сочетании с обычными заглавными буквами. Такое начертание также не
стоит получать механической подстановкой заглавных букв меньшего
кегля в качестве строчных— у знаков в капители совсем другие про-
порции.
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 149
Не все алфавитно-цифровые шрифты пригодны для набора больших объемов
текста. Поэтому помимо наборных, специально выделяют еще и акцидентные
гарнитуры и начертания, уместные только для разнообразных выделений,
оформления заголовков и т. д.
Наш сверхкраткий экскурс в классификацию и строение шрифта лишь слегка
приоткрыл дверцу в этот сложный и неоднозначный мир. К сожалению, у нас
нет никакой возможности обсуждать столь необходимые аспекты, как исто-
рия шрифта, классификация антиквенных и рубленых гарнитур, подбор и со-
четаемость шрифтов... Тем не менее хотелось бы надеяться, что такое вот
введение поможет пониманию смысла многих CSS-свойств, относящихся к
форматированию текста.
Задание гарнитуры шрифта
Для того чтобы определить шрифт, которым следует набрать текст того или
иного элемента, используется свойство font-family, например:
hl, h2 {font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif}
Данное правило предписывает применить к заголовкам первого и второго
уровня одну из следующих рубленых гарнитур: Tahoma, Verdana, Arial или
Helvetica. Они перечислены в порядке приоритета: наиболее предпочтитель-
ной является первая, наименее предпочтительной— последняя гарнитура.
В самом крайнем случае, если в системе не найдена ни одна из перечислен-
ных гарнитур, правило предписывает использовать шрифт по умолчанию,
относящийся к обобщенному классу шрифтов без засечек, заданному ключе-
вым СЛОВОМ sans-serif.
Вот еще один пример:
р {font-family: Georgia, "Times New Roman", Times, serif}
Данное правило предписывает использовать для набора абзацев одну из сле-
дующих антиквенных гарнитур: Georgia, Times New Roman (названия, со-
стоящие из нескольких слов, рекомендуется заключать в кавычки) или Times.
В случае, если ничего из перечисленного применить невозможно, будет ис-
пользован шрифт по умолчанию, относящийся к обобщенному классу шриф-
тов с засечками, определенный ключевым словом serif.
( Примечание
Для набора основного текста целесообразно использовать антикву — засечки
способствуют более удобному и быстрому чтению, заставляя взгляд "сколь-
зить" по строке. В то же время, из-за сложности форм знаков и сравнительно
низкого разрешения экрана (по сравнению, скажем, с принтером) антиква в
мелких кеглях отображается на экране весьма и весьма приблизительно.
150
Часть I. Технологические основы
Для заголовков, напротив, лучше использовать рубленые шрифты. Они, обла-
дая достаточно простыми геометрическими формами, органичнее вписываются
в композицию при больших кеглях (основной же текст рассматривается скорее
не как совокупность отдельных форм, а как текстура). К тому же, крупные руб-
леные шрифты весьма удобочитаемы и заметны.
Впрочем, чаще всего для заголовков и основного текста используют один и тот
же шрифт. Так или иначе, однако, вряд ли стоит играть в борьбу со стереоти-
пами, пытаясь использовать рубленый шрифт для основного текста и при этом
заголовки набирать антиквой.
Если требуется набрать какой-то фрагмент текста (к примеру, листинг про-
граммы) моноширинным шрифтом, можно использовать такое объявление
стиля:
<р style="font-family: ’Courier New', ’Lucida Console’, Courier,
monospace">...</p>
В данном случае названия гарнитур, содержащие пробелы, заключены в оди-
нарные кавычки, поскольку двойными обрамлено значение атрибута style.
Ключевое слово monospace определяет обобщенный класс моноширинных
шрифтов "на крайний случай".
( Примечание
К сожалению, существует ряд технических ограничений, не дающих возможно-
. сти в полной мере воспользоваться свободой выбора шрифтов для веб-
страницы.
Вполне возможны случаи, когда в системе пользователя не будет ни одной из
предпочтительных гарнитур, и тогда браузеру придется использовать шрифт по
умолчанию. Но гораздо хуже ситуации, когда нужный шрифт имеется на маши-
не клиента, но не обладает кириллической версией.
Это не означает, что свойством font-family нельзя пользоваться — но не
следует определять с его помощью слишком экзотические гарнитуры. Но если
все-таки нужна стопроцентная гарантия доступности, то для основного текста
лучше всего оставить шрифт по умолчанию.
Произвольные шрифты без опаски можно применять лишь в надписях, реали-
зованных в виде графики. Для акцидентных целей это вполне допустимо, но в
любом случае следует обязательно снабжать изображения alt-текстом, соот-
ветствующим их содержанию.
Определение кегля шрифта
Изменить размер шрифта можно, воспользовавшись свойством font-size.
Один из способов — указание "абсолютного" размера (абсолютного в терми-
нологии, фигурирующей в рекомендациях W3C; на самом же деле речь идет
о задании размера относительно базового кегля, установленного в настройках
браузера) с помощью одного из ключевых слов, перечисленных в табл. 3.2.
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей
151
Таблица 3.2. Ключевые слова для задания "абсолютного"размера шрифта
и масштабные коэффициенты в соответствии с различными версиями CSS
Ключевое слово Масштабные коэффициенты
CSS1 CSS2 CSS2.1 и выше
хх-small 1 /1,53 = 0,3 1 /1,23 = 0,58 %
х-small 1 /1,52 = 0,44 1 /1,22 = 0,69 3/4
small 1 /1,5 = 0,67 1 /1,2 = 0,83 %
medium 1 1 1
large 1,5 1,2 %
x-large 1,52 = 2,25 1,22 = 1,44 %
xx-large 1,53 = 3,375 1,23 = 1,728 2
Другой способ— использование в качестве значений свойства font-size
ключевых слов larger и smaller для определения относительного размера
шрифта (относительно кегля шрифта родительского элемента). Значение
larger увеличивает размер шрифта на одну ’’ступень” (с учетом тех самых
масштабных коэффициентов, которые приведены в табл. 3.2), a smaller —
уменьшает.
Разнобой в коэффициентах еще тот... Распространенные ныне браузеры пока
что трактуют перечисленные значения по своему собственному разумению.
Поэтому надежнее всего определять кегль шрифта в процентах (от размера
шрифта родительского элемента) или линейных единицах измерения, опре-
деленных в CSS.
Относительные единицы измерения em и ех в данном случае применяются к
кеглю шрифта родительского элемента.
Возможные примеры использования свойства font-size:
hl {font-size: xx-large}
h2 {font-size: 1.3em}
P {font-size: 80рб}
Следует избегать определения размеров шрифта основного текста страницы в
абсолютных линейных единицах измерения и в пикселах, если речь идет о
представлении контента на экране.
Это затрудняет ознакомление с содержимым страницы людям с ослабленным
зрением (да и вполне здоровым тоже, поскольку чтение с экрана намного ме-
нее комфортно, чем с листа бумаги).
152
Часть I. Технологические основы
Пользователям необходимо предоставить возможность свободно варьировать
кегль шрифта средствами интерфейса браузера. Не все браузеры, однако, по-
зволяют масштабировать шрифт в том случае, если его размер определен
в пикселах (рх) или абсолютных линейных единицах измерения, таких как
пункты (pt).
Изменение начертания шрифта
При помощи свойства font-style можно варьировать начертание шрифта по
характеру наклона. Так, значение italic этого свойства определяет курсив-
ное начертание (курсивный шрифт в книгопечатании впервые использовал
итальянский типограф Альд Мануций в 1501 г.— отсюда английское назва-
ние данного начертания), а значение oblique — наклонное.
Управлять насыщенностью шрифта позволяет свойство font-weight. Помимо
значения по умолчанию, normal, соответствующего нормальной насыщенно-
сти, ВОЗМОЖНЫе Значения ЭТОГО СВОЙСТВа таковы: bold, bolder, lighter, юо,
200, 300, 400, 500, 600, 700, 800, 900.
Значение bold определяет полужирное начертание. Ему соответствует число-
вое значение 7оо. Ключевое слово normal, в свою очередь, обозначает то же
самое, что и число 400.
Значения bolder и lighter предписывают задать элементу, для которого оп-
ределено одно из них, более жирное и, соответственно, более светлое начер-
тание, нежели у родительского элемента.
Разумеется, далеко не все гарнитуры имеют по 9 начертаний с различной на-
сыщенностью. Их количество не возрастет волшебным образом только по той
причине, что те самые 9 ступеней насыщенности поддерживаются специфи-
кацией CSS. Так, например, применять значения bolder, 800 и 900 к полужир-
ному начертанию гарнитуры Times New Roman бесполезно — жирнее шрифт
от этого не станет.
Наконец, СВОЙСТВО font-variant СО значением small-caps позволяет приме-
нить к тому или иному элементу страницы капитель.
( Примечание
Существует масса вариантов выделения текста — это, например, выделение
полужирным, курсивным или наклонным начертаниями, подчеркиванием, раз-
рядкой, цветом. Последние три способа недопустимы при наборе основного
текста— их можно использовать только для акциденции. Кроме того, в нашей
стихии подчеркивание прочно ассоциируется с гиперссылкой, поэтому исполь-
зовать его для слов, не являющихся ссылками, недопустимо вдвойне.
Выделение полужирным начертанием больше подходит для заголовков, кур-
сивное и наклонное начертания — для выделения слов в основном тексте без
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей
153
изменения оптической равномерности полосы. Полужирное начертание тоже
подходит для выделения слов в тексте, но у него есть одна особенность: выде-
ленное слово видно на странице сразу же, до того, как читатель дошел до вы-
деления.
Если возникает необходимость в полужирном наборе дополнительно выделить
какое-либо слово, то нужно использовать полужирное и курсивное начертания
одновременно. Само по себе их комбинирование практически не имеет права
на существование.
Если нужно выделить какое-либо слово в курсивном наборе, то применяется
обычное, прямое начертание. Использовать полужирное начертание в допол-
нение к курсивному в этом случае возможно только в особых ситуациях.
Все знаки препинания, обрамляющие выделенный фрагмент, должны быть на-
браны основным начертанием. Исключением являются только кавычки.
В CSS определено ’’стенографическое” свойство font, объединяющее воз-
можности СВОЙСТВ font-style, font-weight, font-variant, font-size, font-
family и некоторых других, не вошедших в наш обзор. С его помощью соот-
ветствующие правила можно формулировать существенно более кратко:
hl {font: bold italic small-caps 150% Tahoma, Verdana, Arial, Helvetica,
sans-serif}
(Здесь, в отличие от обобщенного свойства background, важно соблюдать по-
следовательность: значение, относящееся к свойству font-size, должно фи-
гурировать на предпоследнем месте, а значение свойства font-family— на
последнем.)
Свойства текстового набора
Определить, как должен выравниваться текст того или иного элемента, по-
зволяет свойство text-aiign. Возможные значения:
□ left — флаговый набор с выключкой по левому краю;
□ right — то же, по правому;
□ center — выравнивание по центру;
□ justify—выключка по формату.
Свойство text-indent дает возможность определить отступ для ’’красной
строки” — первой строки абзаца. Значением этого свойства может быть ве-
личина в процентах (по отношению к ширине родительского элемента) или в
линейных единицах измерения, например в ”эмах” (em) или пунктах (pt).
Классический отступ для красной строки в абзацах русскоязычных текстов —
полторы величины кегля шрифта:
р {text-indent: 1.5em}
154
Часть I. Технологические основы
При помощи свойства text-decoration можно определять те или иные эффек-
ты отображения текста:
□ попе — никакие эффекты не применяются;
□ underline — текст элемента подчеркивается;
□ overline — текст надчеркивается;
□ line-through — текст зачеркивается;
□ blink — текст мигает.
Допускается комбинирование нескольких возможных значений (за исключе-
нием попе), к примеру:
<р style="text-decoration: underline overline">...</р>
Текст абзаца, определенного таким образом, будет подчеркиваться и надчер-
киваться одновременно.
Свойство text-transform позволяет взаимно преобразовывать строчные и
прописные буквы. Оно не столь бесполезно, как может показаться на первый
взгляд.
Так, к примеру, очень часто используются заголовки, набранные исключи-
тельно прописными буквами. Или, наоборот— у некоторых дизайнеров сло-
жилась привычка набирать целые абзацы текста строчными буквами.
Казалось бы, чего же проще — текст можно набрать так, как того просит ду-
ша, сразу же.
Действительно, можно, но это нежелательно. Так, многие поисковые системы
с меньшим доверием относятся к заголовкам, набранным прописными буква-
ми. А некоторые программы синтеза речи, возможно, будут затруднены в оп-
ределении границ предложений, если последние будут набраны только
строчными буквами.
Так что лучше все-таки набирать текст ’’как обычно”, а регистр конвертиро-
вать при помощи того самого CSS-свойства text-transform, которое может
принимать следующие значения:
□ uppercase — все буквы преобразуются в верхний регистр;
□ lowercase — то же, в нижний регистр;
□ capitalize— первая буква каждого слова преобразуется в верхний ре-
гистр.
Наконец, свойство white-space определяет метод обработки пробельных сим-
волов браузером. В спецификации CSS2.1 определено пять возможных зна-
чений для этого свойства, но нас будет интересовать главным образом одно:
nowrap.
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 155
Текст внутри элемента, для которого определено свойство white-space со
значением nowrap, останется на одной строке вне зависимости от того, на-
личествуют в нем символы, по умолчанию допускающие разрыв строки, или
нет.
Свойство white-space со значением nowrap активно используется наряду
с символом неразрывного пробела ( ).
Чтобы проиллюстрировать данное свойство реальным примером, придется
забежать немного вперед и отметить, что в HTML определены такие теги, как
<div> и <span>. Они определяют семантически нейтральные блочный и внут-
ристрочный элементы соответственно.
Что это значит— ’’семантически нейтральный”? Сточки зрения структуры
документа, <р>.. .</р> — это определенно абзац; <ui>.. .</ui> — это опреде-
ленно маркированный список, <em>...</em>— это определенно логическое
ударение. И ничто иное. A <div>.. .</div>— это ’’просто блочный элемент”,
без какой бы то ни было смысловой нагрузки. Точно так же,
<span>... </span> — это ’’просто внутристрочный элемент”, не обремененный
четким предназначением.
Для чего нужны эти абстрактные элементы? Определяя те или иные правила
их представления, разработчик может использовать элементы <div>.. .</div>
и <span>... </span> на свое усмотрение, не рискуя нарушить логику докумен-
та неправомерным использованием того или иного элемента ”не по назначе-
нию”.
Так, элемент <div>.. .</div> мы будем активно эксплуатировать в следующей
главе для организации функциональных областей веб-страниц.
А вот элемент <span>.. .</span> весьма часто используется совместно со
СВОЙСТВОМ white-space, о котором мы замолвили слово:
<р>Язык HTML, созданный, как мы уже упоминали, Тимом <span style==
"white-space: nowrap">Бернерсом-Ли</зрап> в начале <span style=
"white-space: nowrap">1990-x rr.,</span> нельзя назвать чем-то
революционным.</р>
Текст этого абзаца может быть разбит браузером на отдельные строки как
угодно, но применение свойства white-space со значением nowrap гарантиру-
ет, что перенос на новую строку не ’’вклинится” внутрь содержимого элемен-
тов <span>...</span>.
Оформление абзацев русскоязычного текста
В главе 2 мы отметили, что традиции русскоязычного набора предписывают
выключать текст абзацев по формату, предваряя их первые строки горизон-
тальными отступами (’’красная строка”). Все это мы теперь умеем делать.
156
Часть I. Технологические основы
Но есть еще одно условие — между абзацами не должно быть вертикальных
отступов. Одновременное сочетание горизонтальных и вертикальных отсту-
пов, встречающееся, к сожалению, на каждом шагу — тавтология, происхо-
дящая от непонимания культуры текстового набора.
Как же избавиться от пресловутых вертикальных отступов? Снова придется
забежать вперед, коснувшись тематики следующей главы, которая, впрочем,
уже близка.
Необходимо использовать CSS-свойства margin-top и margin-bottom, обнулив
их значения. Указанные свойства определяют минимально возможные рас-
стояния до соседних элементов сверху и снизу соответственно.
Полагаю, пришло время привести полноценный практический пример, иллю-
стрирующий применение большинства CSS-свойств, о которых шла речь в
этом разделе.
| Листинг 3.8> Использование свойств шрифта и текстового набора,
|(||||||||(^^^^
#>Vl'4kkV44»kV44>kV^nv?/kkkV44kkY44kk74ibkV44kk'l'4ik>V44kkV44k*'«'44kkV44kkV44kkV44kkV44kkV44kk-«-4i»k*>4kkV44»k'<>44k*«'4MV'<'4Ok«'«4kk'«l44 k>V4 4 k>V4 4 kkV44 »kV4« kkV4 4 kkV4> kk-»'4**kV44»k?44 k>V44kkV44kk'»l44 k4 kkV44k>V44k>V44 k*V44 kbW4 4 kkV44 kkV/4 kkV44 k>V4 4kkV44 kW44 kkVO » »
<?xml version="l.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
chtml xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<Ш1е>Экскурс в историю Всемирной паутины</ЬИ1е>
<style type="text/css">
<! —
body {
color: #000;
background-color: #fff;
}
hl {
font: bold small-caps 150% Tahoma, Verdana, Arial,
^Helvetica, sans-serif;
color: #369;
}
P {
font-family: Georgia, "Times New Roman", Times, serif;
text-align: justify;
text-indent: 1.5em;
margin-top: Opt;
margin-bottom: Opt;
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей
157
</style>
</head>
<body>
<Ь1>Экскурс в историю Всемирной паутины</й1>
<р>Как известно, знание прошлого избавляет нас от старых ошибок
в будущем. A поэтому представляется необходимым рассказать
о том, по какому пути происходило развитие веб-технологий
клиентской стороны. Путь этот, надо заметить, был весьма запутан
и тернист.</р>
<р>Язык HTML, созданный, как мы уже упоминали, Тимом <span
style="white-space: nowrap">BepHepcoM-JIn</span> в начале
<span style="white-space: nowrap">1990-x rr.,</span> нельзя
назвать чем-то революционным.</р>
<р>Напротив, он был основан на базе уже существовавшего тогда
языка, а точнее, <span style=”font-style: 1ба11с">метаязыка</зрап>
SGML (<span style="text-€ransform: capitalize">standard
generalized markup language</span> — стандартный
обобщенный язык разметки), который является стандартом ISO
c 1986 г. Строго говоря, язык HTML есть подмножество
метаязыка SGML.</p>
</body>
</html>
Файл Лерех&д Зак/шки Сдраво
Ф - Ф> • $ с г file: 1/17: /examples/03/08/mdex. html
Gafthj Started
О Q
*3 Нарейяи fcf
Экскурс в историю Всемирной Паутины
Как известно, знание прошлого избавляет нас от старых ошибок в будущем.
А поэтому представляется необходимым рассказать о том, по какому пути
происходило развитие веб-технологий клиентской стороны. Путь этот, надо
заметить, был весьма запутан и тернист.
Язык HTML, созданный, как мы уже упоминали, Тимом Бернерсом-Ли в начале
1990-х гг., нельзя назвать чем-то революционным.
Напротив, он был основан на базе уже существовавшего тогда языка, а точнее,
метаязыка SGML (standard Generalized Markup Language — стандартный
обобщенный язык разметки), который является стандартом ISO с 1986 г. Строго
говоря, язык HTML есть подмножество метаязыка SGML.
Рис. 3.14. Внешний вид страницы, описанной в листинге 3.8
158
Часть I. Технологические основы
Результат использования различных свойств шрифта на веб-странице демон-
стрируется на рис. 3.14.
Свойства списков
При помощи CSS можно переопределить внешний вид маркеров списков,
в том числе и путем назначения графического изображения в качестве марке-
ра. Кроме того, CSS позволяет определить, каким образом должны распола-
гаться маркеры списка относительно его содержимого.
Для задания внешнего вида маркеров используется свойство list-style-type.
Некоторые из возможных его значений:
□ disc — маркер в форме круга;
□ circle — маркер в форме окружности;
□ square — маркер в форме квадрата;
□ decimal — десятичная нумерация элементов списка;
□ lower-roman— нумерация элементов списка римскими цифрами в нижнем
регистре;
□ upper-roman — нумерация элементов списка римскими цифрами в верхнем
регистре;
□ lower-alpha— нумерация элементов списка строчными латинскими бук-
вами;
□ upper-alpha — нумерация элементов списка прописными латинскими бук-
вами;
□ попе — маркер отсутствует.
Все эти значения применимы как к спискам, заданным тегом <ui>, так и к
спискам, определенным при помощи тега <о1>, а также вообще ко всем эле-
ментам, которые предписано интерпретировать как пункты списков при по-
мощи CSS-свойства display (его мы коснемся позже).
Так или иначе, я рекомендовал бы не забывать о семантике. Так, на мой
взгляд, использовать маркеры в форме круга, окружности или квадрата при-
менительно к элементам нумерованных списков (сформированных при по-
мощи тега <о1>) с логической точки зрения не совсем правильно, равно как и
не совсем красиво "насильственно" применять нумерацию для элементов
маркированных списков (определенных с помощью тега <ui>).
Использовать в качестве маркера графическое изображение позволяет свой-
ство list-style-image. В качестве значения этого свойства выступает URL
картинки:
ul {list-style-image: url(bullet.png)}
Гпава 3. Оформление веб-страниц с использованием каскадных листов стилей 159
Если для одного и того же списка одновременно заданы свойства list-style-
type и list-style-image, приоритетным является значение последнего. Значе-
ние свойства list-style-type используется в том случае, если графическое
изображение, определенное в значении свойства list-style-image, по тем или
иным причинам невозможно отобразить.
Свойство list-style-position указывает, где по отношению к содержимому
элементов списка должны находиться маркеры — внутри содержимого эле-
ментов (значение inside) или за его пределами (значение outside, использу-
ется по умолчанию).
’’Стенографическое” свойство list-style объединяет все свойства, управ-
ляющие внешним видом элементов списков.
................*...........
______________________________________________________________________________О ОI
вцтг
*
| Хороший сайг отличают как минимум следующие черты:
0 высокое качество информационного наполнения и грамотность его подачи;
0 оригинальность и эстетическая привлекательность внешнего облика страниц;
0 доступность содержания сайта для максимально широкого круга пользователей вне
зависимости от применяемых ими типов устройств и версий браузеров, а также от
ограничений по состоянию здоровья;
| 0 эргономичность элементов пользовательского интерфейса сайта, обеспечивающая
высокую эффективность, но в то же время легкость и непринужденность
взаимодействия посетителя с веб-ресурсом;
| 0 надежность и безопасность используемых технологических решений, четкая
согласованность работы всех компонентов;
0 безупречная проработка всех деталей и нюансов.
Технологическая цепочка создания сайта состоит нз следующих шагов:
i. постановка задачи, включающая в себя:
0 анализ существующих конкурирующих н/или родственных проектов;
0 выработку концепции;
| ii подготовка первоначального информационного наполнения;
iii. разработка макетов страниц;
iv. подготовка шаблонов страниц;
| V. проектирование и реализация сервисов;
vi. сборка всех компонентов воедино;
I vii. тестирование;
| viii. ввод в эксплуатацию;
j ix. пожизненное сопровождение — информационное наполнение и техническая
? поддержка.
Рис. 3.15. Страница, использующая CSS
для переопределения внешнего вида элементов списков
160
Часть I. Технологические основы
Заключительный для этой главы практический пример демонстрирует воз-
можный вариант листа стилей для страницы, описанной в листинге 2.8.
j Листинг 3,9. Использование свойства list-style для управления внешним
| видом элементов списков
body {
color: #000;
background-color: #fff;
}
ul {
list-style: url(bullet.png) square inside;
}
ol {
list-style-type: lower-roman;
}
Внешний вид веб-страницы, использующей лист стилей, описанный в лис-
тинге 3.9, приведен на рис. 3.15.
Практические примеры — веб-страницы,
оформленные при помощи CSS
Полные, работоспособные, протестированные в различных браузерах и про-
веренные HTML- и CSS-валидаторами версии примеров, отраженных в лис-
тингах 3.1—3.9, можно найти на компакт-диске, прилагаемом к этой книге,
в каталоге \examples\03.
Напоминаем, число 03 — это номер текущей главы. Чтобы найти пример,
соответствующий, скажем, листингу 3.7, необходимо открыть папку
\examples\03\07.
Примеры, представленные несколькими листингами, расположены в ’’совме-
щенных” каталогах. К таковым относятся \examples\03\01-03 и \examples
\03\04-05, содержащие файлы, описанные в листингах 1—3 и 4—5 соответст-
венно.
Кроме всего прочего, к вашим услугам — удобный электронный путеводи-
тель по всем практическим примерам, представленный файлом \index.html.
АнАа|анвА
ЧА(1Ь II
Применение веб-технологий
стороны клиента
для создания сайтов
Глава 4. Использование блочной модели CSS2 для верстки
сложных веб-страниц
Глава 5. Таблицы в HTML
Глава 6. Формы в HTML
Глава 7. Создание интерактивных сайтов при помощи
языка сценариев JavaScript и динамического HTML
ГЛАВА 4
Использование
блочной модели CSS2 для верстки
сложных веб-страниц
Три первые главы нашего повествования были в большей или меньшей сте-
пени вводными. Они преследовали главным образом ’’общеобразовательные”
цели — знакомство с основополагающими принципами функционирования
сайтов, постижение идеологии структурной разметки и концепции разделе-
ния содержания и представления, овладение первоочередными конструкция-
ми HTML и CSS.
Данная глава по своему характеру кардинально отличается от предшествен-
ниц, выходя на качественно новый уровень.
Она обладает сугубо практической направленностью. Так, мы обсудим ряд
примеров шаблонов страниц, вполне пригодных в качестве основы для ре-
альных веб-проектов. А финальным аккордом, рубежом, к которому подведет
читателя данная глава, станет пример завершенного, полноценного и само-
достаточного сайта — пусть даже и статического.
Вполне вероятно, что количество ’’новых” конструкций HTML и CSS, с кото-
рыми нам предстоит познакомиться в ходе одной этой главы, превзойдет
число всех ранее рассмотренных тегов, атрибутов, селекторов, директив и
свойств. Но теперь мы уже не будем подолгу останавливаться на каждой по-
добной конструкции — полагаю, что заложенный прежде базис позволит чи-
тателю понять их природу буквально с полуслова.
Организация пространства страницы
информационного сайта
Успех будущего веб-проекта во многом определяется качеством исполнения
фундамента — шаблонов главной и внутренних страниц сайта. Еще в главе 7,
164
Часть II. Применение веб-технологий стороны клиента для создания сайтов
если помните, мы приняли за аксиому тот факт, что все сайты информацион-
ного характера (в отличие от презентационных проектов) в значительной ме-
ре похожи друг на друга. И общность эта сильнее всего выражена в составе и
взаимном расположении элементов страниц.
В организации пространства страницы любого информационного сайта мож-
но выделить как минимум четыре функциональные области со строго опре-
деленными ролями. Это "шапка” (в английской терминологии — header),
блок навигации, область основного текста и "подвал” (footer).
Слова, взятые в кавычки, унаследованы веб-разработчиками от верстальщи-
ков-полиграфистов и, бесспорно, являют собой жаргонизмы, но зато они по-
нятны всем и каждому. Честно говоря, мне неизвестны устоявшиеся ’’офици-
альные” их заменители в русском языке, поэтому оставим терминологическое
эстетство лингвистам, а сами перейдем к сути дела.
Вне всякого сомнения, "шапка” должна располагаться сверху. Основной ее
функциональный элемент— название сайта. Иногда, помимо титульной
надписи, в ’’шапке" может присутствовать заголовок текущего раздела сайта.
Там может находиться и логотип компании или иной характерный символ
проекта, например, некий художественный визуал, причем хорошим тоном
считается размещение подобного элемента в левой стороне "шапки" и наде-
ление его ролью ссылки на главную страницу сайта.
Навигационная панель, если количество разделов на сайте небольшое, может
располагаться горизонтально, отделяя "шапку" страницы от области основно-
го текста. В этом случае элементы навигации полезно продублировать и вни-
зу страницы, между блоком основного содержания и "подвалом". Когда же
разделов на сайте относительно много, лучше сделать навигационный блок
вертикальным, располагая его слева от зоны с основным текстом страницы.
Почему именно слева, а не справа? Нас, носителей европейской культуры,
чуть ли не с пеленок учили читать слева направо и сверху вниз. И именно эти
направления волей-неволей становятся преобладающими не только при чте-
нии, но и при любом визуальном восприятии. Навигационный же блок, буду-
чи, как правило, визуально "тяжелее" (темнее, сложнее по внутреннему уст-
ройству и т. п.) области основного содержания страницы, при размещении с
левой стороны интерпретируется подсознанием как отправная точка для
движения, а при расположении справа— напротив, как некая преграда на
пути восприятия.
В нестандартных ситуациях, когда, например, логическая структура сайта
чрезвычайно сложна и насчитывает множество иерархических уровней вло-
женности, может найти применение и двухкоординатная система навигации.
При этом, скажем, горизонтально ориентированная область отводится для
ссылок на верхнеуровневые, "магистральные" направления сайта, а верти-
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 165
кальный блок планируется как контекстное меню подразделов в рамках те-
кущего крупного раздела.
( Примечание
Достаточно модные ныне ниспадающие навигационные меню мало того, что
сложны в реализации, так еще и существенно проигрывают в доступности для
максимально широкого круга пользователей, ибо весьма требовательны к типу
и настройкам браузера. Так что, как мне представляется, все это от лукавого,
игра не стоит свеч... Впрочем, о навигации мы еще успеем основательно побе-
седовать.
Область основного текста — то, ради чего, собственно, создается страница,
ее главная ценность и единственный ’’полезный груз”. В идеале, конечно, не-
обходимо стремиться выделить для этого блока как можно больше простран-
ства. Разумеется, функциональность всех прочих элементов не должна стра-
дать, но на многих реально существующих сайтах (особенно грешат этим но-
востные ресурсы) основное содержание неприметно ютится где-то между
огромными рекламными баннерами и беспорядочно разбросанными областя-
ми с бесконечными ссылками на ’’самые горячие сенсации”, не претендуя да-
же на половину, а то и на треть площади окна браузера! Полагаю, разработ-
чикам подобных проектов есть о чем задуматься...
На главной странице сайта в блоке основного текста должна в обязательном
порядке присутствовать краткая аннотация, раскрывающая в нескольких сло-
вах назначение проекта. Наличие такого пояснения — признак уважения к
личному времени пользователей.
Случайный посетитель, забредший на сайт, в таком случае сможет сразу же
понять: интересна ему тематика проекта или же нет. И немедленно покинуть
ресурс, не успев затаить в душе ни малейшего раздражения, либо же, напро-
тив, в первый же момент получить стимул к более основательному копанию в
содержании.
Аннотация должна предварять любое текстовое содержание главной страни-
цы и быть полностью видимой без какой бы то ни было прокрутки содержи-
мого окна браузера. Но на главной странице часто размещают и новости,
причем тоже крайне желательно, чтобы информация о последнем обновлении
ресурса была видна без прокрутки содержимого окна. Поэтому целесообраз-
но применить для текстового содержания главной страницы сайта двухко-
лонную верстку, тогда как на внутренних страницах вполне можно обойтись
размещением текста и в одну колонку.
’’Подвал” страницы — немаловажная деталь, которой, к сожалению, многие
разработчики несправедливо пренебрегают. Чисто композиционная роль
’’подвала” состоит в том, чтобы уравновесить ’’шапку”, придать странице за-
конченность. Но и в информационном плане он тоже весьма и весьма поле-
166 Часть II. Применение веб-технологий стороны клиента для создания сайтов
зен: в самой нижней области страницы нелишне разместить выходные дан-
ные, контакты, дату последнего обновления страницы, счетчик посещений и
прочую сопутствующую информацию.
( Примечание
Хотя все мы знаем, что "последний бой — он трудный самый", в веб-разработке
сложнее всего, как это ни парадоксально, сделать самый первый шаг, перейти
грань от чистого листа к чему-то осязаемому.
Я не случайно вспомнил про белый бумажный лист— для дизайнера даже
столь "нематериальных" произведений, как веб-сайты, нет лучших инструмен-
тов на самом начальном этапе работы над проектом, чем карандаш и бумага.
При помощи этих нехитрых средств можно с молниеносной быстротой набро-
сать десяток-другой эскизов макета страниц будущего сайта, с каждым шагом
приближаясь к единственно верному варианту, исключая или добавляя те или
иные элементы, скругляя углы, корректируя расстояния.
Качественная веб-страница невозможна без детальной проработки нюансов
пространственных отношений. Только тогда, когда размеры и взаимное разме-
щение всех элементов, а также величины всевозможных полей и отступов бу-
дут со всей очевидностью коррелировать между собой, когда исчезнут все
лишние сущности, не укладывающиеся в общий строй композиции эскиза, —
вот тогда только можно начинать осторожно заикаться о переходе к электрон-
ной форме.
Кстати, в свете сказанного бумага в клеточку выигрышнее, нежели обычная бе-
лая бумага, ибо являет собой, де-факто, готовую модульную сетку. Положив
элементарной единицей расстояния будущего макета, линейный размер одной
клетки (на уровне экспериментов в Photoshop он может соответствовать, ска-
жем, 10 или 20 пикселам), вы избавите себя от мучительных поисков "зацепки",
так необходимой для преодоления пресловутой скованности перед чистым лис-
том.
Конечно, начать плясать можно и не "от печки", а от вполне конкретной величи-
ны — к примеру, от ширины уже имеющегося в наличии логотипа или же от
стандартных размеров рекламного баннера, который планируется разместить в
верхней части страницы. Словом, возможны варианты — мое дело лишь обра-
тить на них внимание читателя.
Экранные версии страниц сайта могут либо обладать фиксированной шири-
ной в пикселах, либо верстаться по ’’резиновому” принципу, растягиваясь или
сжимаясь в зависимости от размеров окна браузера. Нужно сразу взвесить все
"за" и "против". "Резиновый" шаблон верстать сложнее, да и вряд ли какая
либо другая композиция будет выглядеть сбалансированно при возможном
изменении ее ширины в два с лишним раза от. расчетной. Не следует забы-
вать, что растровая графика, применяемая в Веб, не масштабируется с изме-
нением ширины окна браузера. В то же время вокруг содержимого страниц с
фиксированной шириной при больших разрешениях экрана остаются огром-
ные пустые поля, и выглядят такие страницы в подобной ситуации весьма
сиротливо. С другой стороны, большие мониторы созданы для того, чтобы на
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 167
них умещалось много информации (в нескольких окнах или рабочих облас-
тях), и разворачивать при работе с ними окошко браузера на все 2048 пиксе-
лов — мягко говоря, не совсем правильно. Хотя, осуждать пользователей за
их предпочтения, мы не имеем никакого права— напротив, мы обязаны соз-
дать для всех категорий посетителей максимально комфортные условия.
Макет нужно рассчитывать так, чтобы будущие страницы отображались без
горизонтальной прокрутки при как можно меньшей ширине окна браузера.
Для шаблонов фиксированной ширины за базу сегодня нужно брать величину
порядка 760 пикселов. Именно при такой ширине страница будет приемлемо
отображаться во всех браузерах при ширине окна 800 пикселов, а экранный
режим 800^600 пока еще применяют порядка 20% пользователей. (О пред-
почтениях посетителей сайтов русскоязычного сектора Всемирной паутины
можно справиться, обратившись, например, к сервису глобальной статистики
SpyLog по адресу gs.spylog.ru.) В то же время "резиновые" страницы могут
себе позволить сжиматься и до меньших значений ширины окна— по боль-
шому счету, нельзя окончательно сбрасывать со счетов "несчастных" пользо-
вателей слабых компьютеров, до сих пор эксплуатирующих экранный режим
640x480, но полностью жертвовать интересами большинства в пользу единиц
"обездоленных" — неразумно.
Все сказанное выше касается страниц, рассчитанных на просмотр при помо-
щи полноценных настольных компьютеров и ноутбуков. При разработке вер-
сий представления контента для экранов "наладонников" необходимо ориен-
тироваться на очень малую ширину — порядка 200 пикселов.
И снова о минимализме
Создать простейшую веб-страницу чрезвычайно легко. И вместе с тем ужас-
но трудно.
Легко — в техническом плане. Для этого, помимо тегов, необходимых для
минимального документа HTML, потребуются элементы, описывающие заго-
ловки, абзацы, списки, гипертекстовые ссылки и графические изображения
(в зависимости от специфики контента ненужные элементы можно зачерк-
нуть).
Трудно — в плане психологическом. Особенно для новичков. Чтобы преодо-
леть соблазн к бесполезным украшательствам и "архитектурным излишест-
вам", требуется или привитый с рожденья и непрестанно культивируемый
хороший вкус, или... богатый горький опыт.
Надо сказать, что мода на минималистский, граничащий с "академическим"
(в традициях HTML 2.0, свойственных "докоммерческой" эпохе развития Се-
ти) стиль в веб-дизайне сегодня возрождается. И этой тенденции способст-
вуют, по меньшей мере, три фактора.
168
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Во-первых, минималистские страницы обладают наивысшей степенью дос-
тупности контента, о которой мы много раз говорили. Судите сами. Отсутст-
вие "отягчающей" декоративной графики и замысловатого визуального фор-
матирования обеспечивает почти моментальную загрузку таких страниц даже
по самым "хилым" каналам связи. Страницы минималистского стиля непри-
хотливы к ширине экрана или любой другой области вывода, к примеру, бу-
мажного листа при печати. Приоритет текстовых данных над чем бы то ни
было (да еще и с гарантией) позволяет обеспечить беспрепятственное озна-
комление со всем содержанием страницы незрячих людей, а также "ущерб-
ных" (с точки зрения многих отечественных веб-студий) пользователей —
например, тех, которые по каким-либо соображениям отключают графику
или применяют текстовые браузеры, не обременяют себя установкой новых
версий "обозревателей", а тем более разнообразных плагинов к ним (скажем,
Flash-проигрывателей).
Во-вторых, в концепцию минимализма прекрасно вписывается не на шутку
разыгравшийся в наши дни бум смартфонов, карманных компьютеров и про-
чих портативных и мобильных устройств. Сайт, в основе которого лежат лег-
ковесные и оттого молниеносно загружающиеся "академические" страницы,
которые можно с комфортом просматривать при любом разрешении экрана,
не требует разработки облегченного варианта представления данных.
В-третьих, каскадные листы стилей позволили, не нарушая принципа разде-
ления содержания и представления на уровне конечного кода, "оживить"
оформление "академических" страниц, привнести в них индивидуальные
нотки. Это достигается благодаря возможностям каскадных листов стилей по
созданию уникальных цветовых решений, подбору шрифтов, контролю вели-
чин полей и отступов и т. п. Тем самым удалось преодолеть монотонность и
скуку классического "академического" стиля, распространенного в ранние
годы становления Всемирной паутины.
( Примечание
Заказчики корпоративных сайтов, конечно, вряд ли когда-нибудь проникнутся
идеями минимализма. Ибо рассуждают они в большинстве своем обычно в та-
ком ключе: "То, что вы мне тут предлагаете за бешеные деньги, моя секретар-
ша за пять минут в „Ворде" состряпает. Хочу, чтоб было краси-и-во — вот тут
большой вращающийся и переливающийся логотип..." Впрочем, от вращающе-
гося и переливающегося, да розовым по зеленому, как правило, удается заказ-
чика отговорить (в противном случае остается лишь с ним распрощаться —-
лично мне халтурой заниматься противно), но результат в любом случае полу-
чается плодом множества компромиссов, й уж точно далеким от минимализма...
Впрочем, какому дизайнеру/художнику/архитектору не известно это самое чув-
ство "компромиссности"?..
Говоря математическим языком, страница минималистского стиля является
вырожденным случаем и представляет собой одну только область основного
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 169
содержания, занимающую все 100% окна браузера. Это оборачивается еще
одним достоинством минимализма— ведь мы только что отмечали необхо-
димость отводить для блока основного текста как можно больше места.
Далее в этой главе мы, конечно, будем заниматься созданием страниц "невы-
рожденных". Тем не менее мне хочется еще раз обратить внимание читателей
вот на что.
Не ощущая в себе достаточной уверенности относительно художественного
чутья и навыков работы с графикой, не нужно стремиться сразу же вопло-
щать сложные графические макеты. Эти попытки выглядят, поверьте мне,
удручающе.
Простой, но аккуратно и со вкусом разработанный сайт, который обладает
интересным текстовым содержанием и написан грамотным русским языком,
выглядит намного более профессионально и состоятельно по сравнению с
безвкусной и неряшливой поделкой, созданной с использованием штампо-
ванных эффектов программы Photoshop.
Я повторюсь —- в который уже раз, но этот тезис достоин того, чтобы быть
распечатанным крупными буквами и закрепленным на видном месте поближе
к монитору: сайты создаются не ради дизайна, а ради контента. Дизайн слу-
жит контенту, находясь у него в полном подчинении, в безраздельной, ничем
не ограниченной власти. Но никак не наоборот.
Оформление прямоугольных блоков
средствами CSS
Как уже неоднократно отмечалось, CSS2 предоставляет разработчикам впол-
не состоятельное средство, позволяющее организовать пространство веб-
страницы в виде набора прямоугольных областей с различными свойства-
ми — речь идет о так называемой блочной модели. Подошло время познако-
миться с ней лицом к лицу.
Блочная модель присутствовала в CSS с самого начала, но в спецификации
CSS2 она подверглась весьма существенным дополнениям и коррективам.
Название "блочная модель" не должно вводить в заблуждение— свойства,
предопределенные ею, вполне применимы не только к блочным, но и к внут-
ристрочным элементам. Путаница возникает исключительно по причине осо-
бенностей перевода рекомендаций W3C на русский язык. Устоявшемуся рус-
скоязычному названию "блочная модель" в англоязычной терминологии со-
ответствует понятие box model, тогда как "блочный элемент" в оригинале —
это block element.
170 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Так или иначе, любой элемент HTML в визуальном представлении помимо
непосредственного содержимого может иметь также поля, рамку и отступы
(см. схему, изображенную на рис. 4.1).
Рис. 4.1. "Анатомия” визуально отображаемого элемента
в соответствии с блочной моделью CSS2
Содержимое элемента (в англоязычной терминологии — content) — это визу-
альное отображение той полезной информации, которая размечена тегами,
определяющими данный элемент. Например, текст абзаца или графическое
изображение.
Рамка (border) представляет собой видимый контур, для которого можно оп-
ределять такие характеристики, как толщина, цвет, тип линии (к примеру,
сплошная или пунктирная).
Поля (padding) отделяют содержимое элемента от рамки. Фон полей совпада-
ет с фоном, определенным для содержимого.
Наконец, отступы (margin) — это своеобразная ’’полоса отчуждения”, харак-
теризующая минимально возможное расстояние от рамки до соседних эле-
ментов или до границ содержимого родительского элемента. Фон отступов
всегда является прозрачным.
В CSS определены одноименные свойства border, padding и margin для зада-
ния характеристик рамки, полей и отступов соответственно. Все эти свойства
являются "стенографическими”.
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 171
Свойства рамок
Свойство border объединяет ’’под одной крышей” свойства border-style,
border-width и border-color, позволяющие определить тип линии рамки, ее
толщину и цвет соответственно.
Некоторые возможные значения свойства border-style:
□ none — рамка отсутствует;
□ dotted — точечная линия;
□ dashed — пунктирная линия;
□ solid — сплошная линия;
□ double — двойная линия;
□ groove — псевдотрехмерная ’’вдавленная” линия в виде желобка;
□ ridge — псевдотрехмерная "выпуклая” линия в виде конька крыши;
□ inset— псевдотрехмерная линия, создающая иллюзию того, что содер-
жимое элемента "вдавлено” в плоскость страницы;
□ outset — псевдотрехмерная линия, создающая впечатление, будто содер-
жимое элемента "возвышается” над плоскостью страницы.
Следует отметить, что не все браузеры корректно отображают перечисленные
типы рамок. Так, например, браузер IE5 (да и IE6) заменяет прерывистые
рамки на сплошные, а также почти не делает различий между двумя разными
типами "вдавленных” и "выпуклых" рамок.
Значениями свойства border-width могут являться ключевые слова thin (тон-
кая рамка), medium (средней толщины) и thick (толстая рамка). Однако точные
величины, соответствующие этим ключевым словам, не оговариваются, по-
этому лучше всего использовать для определения толщины рамки линейные
единицы измерения, определенные в CSS.
Свойство border-color может принимать значения тех же самых типов, кото-
рые возможны для свойства color (см. главу 3).
Нижеследующее правило применяет ко всем заголовкам первого уровня
сплошную рамку зеленого цвета толщиной в один пиксел:
hl {border: solid Ipx #090}
Это правило полностью аналогично такому:
hl {
border-style: solid;
border-width: lpx;
border-color: #090;
}
172 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Число и последовательность значений у свойства border, как и у большинства
других "стенографических” свойств, может быть любой.
Обобщенное свойство border не разрешает задавать индивидуальные правила
оформления рамки для каждой из четырех сторон блока, однако это все-таки
МОЖНО сделать, применяя свойства border-top, border-bottom, border-left и
border-right, позволяющие определить стиль оформления соответственно
для верхней, нижней, левой и правой линий рамки.
[Листинг 4.1. Индивидуальное оформление линий рамки с каждойизчетырех
||||1Ж||||||1||||:||||||^|||И
hl {
border-top: none;
border-right: none;
border-left: solid 15px #c00;
border-bottom: solid 3px #c00;
}
Очевидно, что эти свойства, в свою очередь, тоже являются ’’стенографиче-
скими” — так, например, border-top объединяет свойства border-top-style,
border-top-width И border-top-color.
Результат обработки вышеприведенного фрагмента кода демонстрируется на
рис. 4.2.
51
CT hle'/Z/Z/exaTples/Q4/Ql/indЧ $$ ftepeftht pG»
[Рамки
\ Обобщенное свойство border не разрешает задавать
j индивидуальные правила оформления рамки для каждой тгз
j четырех сторон блока, однако это все-таки можно сделать,
[ применяя свойства border-top, border-bottom, border-left и
j border-right позволяющие опредешггь стиль оформления
| соответственно для верхней, нижней, левой и правой линий
j рамки.
Рис. 4.2. Результат применения правила из листинга 4.1
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 173
С другой стороны, "стенографическими" являются и свойства border-style,
border-width и border-color. Так, border-style позволяет кратко записать
значения ДЛЯ СВОЙСТВ border-top-style, border-bottom-style, border-left-
style И border-right-style.
Словом, приведенный выше пример можно переиначить "шиворот-
навыворот":
|Листинг Вариант оформления линий рамки
hl {
border-style: none none solid solid;
border-width: Opx Opx 3px 15px;
border-color: #c00;
}
Стоит запомнить простое правило, применимое к свойствам, фигурирующим
в этом примере и другим аналогичным.
□ Если задано одно значение, то оно применяется ко всем четырем сторо-
нам.
□ Если определено два аргумента, то первый применяется к верхней и ниж-
ней, а второй — к левой и правой сторонам.
□ Если в списке фигурирует три значения, то первое используется для верх-
ней стороны, второе — для левой и правой, а третье — для нижней сторо-
ны.
□ Наконец, если определено четыре значения, то они применяются к каждой
из четырех сторон, начиная с верхней стороны, по часовой стрелке: вто-
рое — к правой стороне, третье — к нижней стороне и четвертое — к ле-
вой стороне.
( Примечание
Перспективная версия каскадных листов стилей, CSS3, судя по рабочим доку-
ментам, размещенным по адресу www.w3.org/Style/CSS/current-work, будет
предусматривать поистине фантастические возможности по оформлению ра-
мок. Так, в новом стандарте ожидаются свойства, позволяющие описывать
рамки со скругленными углами и произвольными линиями на основе графиче-
ских изображений.
Поля и отступы
Свойства padding и margin являются "стенографическими" по отношению к
Наборам СВОЙСТВ padding-top, padding-bottom, padding-left, padding-right И,
Соответственно, margin-top, margin-bottom, margin-left, margin-right.
174
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Значениями свойства padding могут являться любые величины, определенные
при помощи линейных единиц измерения, предусмотренных в CSS. Это
справедливо и для свойства margin, но в качестве значений последнего могут
также выступать величины, заданные в процентах (от ширины содержимого
родительского элемента), а еще ключевое слово auto, предписывающее ис-
пользовать значение по умолчанию.
Следующий пример листа стилей иллюстрирует использование свойств
border, padding И margin.
................
html, body {
margin: Орх;
padding: Орх;
border: Орх;
}
body {
color: #000;
background: #fff;
}
hl {
font: 120% Tahoma, Verdana, Arial, Helvetica, sans-serif;
background: #f0f0f0;
border-style: solid dotted;
border-width: 3px 5px;
border-color: #c00;
padding: 5px 20px;
margin: 20px;
}
P {
margin: Opx 20px 20px lOOpx;
Страница, использующая вышеприведенный лист стилей, при просмотре в
графических браузерах будет выглядеть так, как показано на рис. 4.3.
Здесь следует обратить особое внимание на два момента.
Во-первых, мы принудительно установили нулевые поля и отступы для эле-
ментов <html>.. .</html> и <body>... </body>, поскольку эти величины изна-
чально не равны нулю, а бесконтрольно "плавают" от браузера к браузеру,
что препятствует точному позиционированию элементов на странице. Более
того, мы перестраховались, провозгласив для контейнеров <html>.. .</html> и
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 175
<body>...</body> нулевую толщину рамки— браузеры, знаете ли, всякие
встречаются...
' )Применение блочных свойств CSS - Мо/Ша Firefox
IWa Переход- Инсгругегеа CffiWa j___________________',____________________________________4 0
[й hle7//Z:/examples/04/03/index.htrrll " © ПфеЙго '
X______________________________________________________..;_______\ Л Ж
? в..............................................u........................ ............................................................ц
| ! Блочная модель CSS2 !
| »............:.........-....................n..nll]1.„„,....r,.::. ..... ::...- ...............................................Л
CSS2 пред оставляет разработчикам в пол не состоятельное средство, позволяющее
организовать пространство веб-страницы в виде набора прямоугольных областей с
различными свойствами — речь идет о так называемой блочной модели. Подошло время
познакомиться с ней лицом к лицу.
Блочная модель наличествовала в CSS с самого начала, но в спецификации CSS2 она
подверглась весьма существенным дополнениям и коррективам
| |у......................................................... -............................
j « Нюансы терминологии I
§ Й,,..к».,........................................................... Ж
| Название «блочная модель» не должно вводить в заблуждение — свойства,
| предопределенные ею, вполне применимы не только к блочным, но и к внутристрочным
| элементам Путаница возникает исключительно по причине особенностей перевода
| рекомендаций W3C на русский язык. Устоявшемуся русскоязычному названию «блочная
I* модель» в англоязычной терминологии соответствует понятие box model, тогда как
«блочный элемент» в оригинале —это block element.
Так или иначе, любой элемент HTML в визуальном представлении помимо
| непосредственного содержимого может иметь также поля, рамку и отступ.
£ =
Рис. 4.3. Отображение веб-страницы, использующей лист стилей листинга 4.3
Во-вторых, заметьте: нижние отступы у абзацев, равно как и верхние отступы
у заголовков, равны 20 пикселам, но эти величины не складываются — от-
ступы перекрываются (collapsing). Воспользовавшись Инспектором DOM
(Document Object Model, объектная модель документа), одним из средств,
предусмотренных в установочном комплекте браузера Firefox, можно в этом
убедиться со всей наглядностью.
Работа с Инспектором DOM проиллюстрирована на рис. 4.4. На рисунке,
в частности, видна рамка вокруг выделенного в данный момент элемента де-
рева документа — одного из абзацев текста. Рамка охватывает не только со-
держимое абзаца, но также поля и отступы, окружающие его.
176
Часть II. Применение веб-технологий стороны клиента для создания сайтов
файл дрйвка Пф&кэд ^акладжв Сйраака
□ file///2’ /examples/04/03/index html
Stated
a ’
Блочная модель CSS2
CSS2 предоставляет разработчикам вполне состоятельное средство, позволяющее организовать пространство
веб-страницы в виде набора прямоугольных областей с различными свойствами — речь идет о так называемой блочной
модели Подошло время познакомиться с ней лицом к лицу
Блочная модель наличествовала в CSS с самого начала, но в спецификации CSS2 она подверглась весьма существенным
дополнениям и коррективам
Нюансы терминологии
Название «блочная модель» не должно
не только к блочным, но и квнутристрс^^«»^ШлШй&^^^^1 ''хч >' ' '
перевода рекомендаций W3C на русски
англоязычной терминологии соответстт gg Д piie7//f/exa^.......
element Д<зкумевт>DOWItate*
TZZuEZZ
Так или иначе, любой элемент HTML в
иметь также поля, рамку и отступ
Я HTML
Ж HEAD
F
Иияузлв*
Ж1
й BODY
i -#text
ЙН1
Xl
Рис. 4.4. Исследование одного из абзацев страницы при помощи Инспектора DOM
Аналогичное исследование заголовка, следующего за абзацем, выявляет факт
перекрытия отступов этих двух элементов (рис. 4.5).
( Примечание }
Обстоятельный разговор, посвященный объектной модели документа, нас ждет
в главе 7.
Наложение отступов в данном случае — не ошибка. В спецификации CSS2
оговаривается ряд ситуаций, когда такое перекрытие является правомер-
ным.
Так, горизонтальные отступы никогда не перекрываются. Вертикальные же
отступы соседних блоков порой могут перекрываться. В частности, это про-
исходит в том случае, когда блочные элементы располагаются в нормальном
потоке (normal flow), т. е. ’’как обычно” следуют друг за другом вертикально
от верхнего края родительского элемента. В некоторых случаях, однако,
блочные элементы могут изыматься из нормального потока— и тогда их от-
ступы не подлежат наложению. Такие ситуации мы рассмотрим чуть позже.
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 177
^айл Омка §нд. П®тйд ^кладки Надменны Сумела - 4
О - 4> - ® C-i [ J file. Ц/Z: /examples/04/03/index. html ' ' 'й
Q _ _ _ ........._
* Блочная модель CSS2 *
CSS2 предоставляет разработчикам вполне состоятельное средство, позволяющее организовать пространство
веб-страницы в виде набора прямоугольных областей с различными свойствами — речь идет о так называемой блочной
' модели Подошло время познакомиться с ней лицом к лицу
Блочная модель наличествовала в CSS с самого начала, но в спецификации CSS2 она подверглась весьма существенным
дополнениям и коррективам.
^1121*1
перевода рекомендаций W3C на русски
*^яел<эя*п>
Объект <ЕиЭМйв&
англоязычной терминологии соответстт Д jfйе ///z ^xamples/04/03/index html’
element дикуненг* DCMModef
Рис. 4.5. Анализ следующего за абзацем заголовка с помощью Инспектора DOM
выявляет перекрытие отступов
Взаимное размещение
нескольких блоков
Порядок отображения элементов веб-страницы определяется моделью визу-
ального форматирования (visual formatting model) CSS. Собственно говоря,
разделение элементов на блочные и внутристрочные, понятие нормального
потока — все это относится к ее владениям.
Мне не очень хотелось бы глубоко вдаваться в терминологические изыски,
наличествующие в описании модели визуального форматирования. Наша
первоочередная задача— научиться применять соответствующие CSS-
свойства на практике.
Прежде, однако, чем приступить к обсуждению этих свойств, необходимо
сделать небольшое отступление, посвященное селекторам.
178 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Селекторы классов и уникальных элементов
До сих пор мы обходились достаточно простыми селекторами. Терпеть, од-
нако, уже невмоготу — рассмотрение взаимоотношений между несколькими
однотипными элементами требует осведомленности об удобном способе их
идентификации.
В конце главы 3 мы замолвили несколько слов о том, что функциональные
области веб-страниц обычно определяются при помощи семантически ней-
тральных элементов <div>.. .</div>. Для страницы, включающей в себя
’’шапку", блок навигации, область основного текста и "подвал", таким обра-
зом, понадобится как минимум 4 подобных элемента. В то же время мы пре-
красно знаем, что правило вида div {...} в листе стилей, связанном с нашей
веб-страницей, сделает оформление всех элементов <div>.. .</div> совер-
шенно одинаковым, что, разумеется, нам совсем не нужно. Можно, конечно,
использовать атрибут style, но этот способ, как мы уже говорили, лишен
гибкости и элегантности.
Как же быть? Очень просто: использовать вместо style слегка другие атрибу-
ты — id ИЛИ class.
При помощи атрибута id можно назначить тому или иному элементу уни-
кальный идентификатор. К примеру, мы можем наделить "говорящим" име-
нем header элемент, описывающий "шапку" нашей страницы; блоку навига-
ции присвоить идентификатор menu; область основного текста наименовать
словом text; и, наконец, закономерное имя footer назначить "подвалу":
<div id=”header”>...</div>
<div id=’’menu’’>. . .</div>
<div id=”text”>...</div>
<div id=”footer”>...</div>
Атрибут class нужен, в сущности, для тех же самых целей — с тем лишь от-
личием, что одно и то же значение данного атрибута может быть присвоено
нескольким элементам.
После этого в листе стилей, относящемся к нашей странице, мы сможем ис-
пользовать правила примерно следующего толка:
□ div#header {...} — определяет представление элемента
<div id=”header”>...</div>;
□ #header {...} — применяется к элементу, заданному любым тегом, до-
полненным атрибутом id со значением header;
□ р.comment {...}— задает оформление абзацев, определенных тегами
<р class=’’comment</р>;
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 179
□ .picture {...}— используется для любых элементов, для которых при
помощи HTML-разметки определен атрибут class со значением picture.
Следующий пример, код которого мы приводим целиком, демонстрирует ис-
пользование классов и идентификаторов элементов.
| Листинг 4.4. Применение селекторов классов и уникальных элементов
<?xml version-"l.О" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
’b "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<11и1е>Селекторы классов и идентификаторов</и111е>
<style type="text/css">
<! —
html t body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
color: #000;
background: #fff;
}
#header {
background: #fOfOfO;
border-bottom: dashed 2px #c00;
padding: 2 Opx;
}
#text {
border: solid Ipx #ccc;
margin: 2Opx;
padding: 2 Opx;
}
.comment {
font-size: 80%;
margin-left: 50px;
}
</style>
</head>
180
Часть II. Применение веб-технологий стороны клиента для создания сайтов
<body>
<div id="header">3To область &1адио;шапки&гадио;.</div>
<div id="text”>
<p>A это&пЬзр;— абзац основного текста.</p>
<р>И еще один абзац основного текста.</р>
<р class="comment">A63an примечания.</р>
<р>Опять абзац основного текста.</р>
<р с1ass="comment">И снова абзац примечания.</р>
</div>
</body>
</html>
Внешний вид страницы, описанной в листинге 4.4, представлен на рис. 4.6.
вид переход Закнадки £&<груменгы Справка © •
<р ф С Л @
.Gethrtg Sbarted Latest Headfines
Это область «шапки».
А это — абзац основного текста,
II еще один абзац основного текста.
Абзац примечания.
Опять абзац основного текста,
И снова абзац примечания
$ Готово >^-
Рис. 4.6. Страница, использующая лист стилей
с селекторами уникальных элементов и классов
Линейные размеры элементов
Размеры элементов по умолчанию определяются контекстом форматирова-
ния — в зависимости от того, блочным или внутристрочным является данный
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 181
элемент, применяются различные алгоритмы вычисления его линейных раз-
меров.
Так, линейные размеры блочного элемента по умолчанию определяются ши-
риной родительского элемента (по горизонтали) и объемом содержимого (по
вертикали), а также зависят от величин полей, отступов и толщины рамки.
Но размеры блочных элементов можно контролировать и явно — при помо-
щи CSS-свойств width и height, определяющих соответственно ширину и вы-
соту содержимого.
Значениями этих свойств могут быть величины, заданные с использованием
линейных единиц измерения или в процентах, а также ключевое слово auto.
Значение auto, используемое по умолчанию, предписывает вычислять шири-
ну или высоту содержимого блочного элемента с учетом значений других
свойств, влияющих на линейные размеры элемента.
Применение процентной записи сопряжено с рядом нюансов. Для свойства
width значение, заданное в процентах, однозначно определяет отношение
ширины содержимого данного элемента к ширине содержимого родительско-
го элемента — здесь все просто.
В случае со свойством height, однако, не все так прозрачно. Если высота ро-
дительского элемента не определяется явно (т. е. зависит от объема контен-
та), то любое процентное значение будет интерпретироваться как auto.
В спецификации CSS2.1 оговаривается исключение из этого правила— бло-
ки, позиционированные в абсолютных координатах (см. ниже). Специфика-
ция CSS2.1 также оговаривает (a CSS2— неявно подразумевает), что про-
центное значение высоты корневого элемента "привязывается” к высоте об-
ласти просмотра, т. е., в частном случае, окна браузера.
Чем все это нам грозит?
Верстка на основе блочной модели CSS таит в себе серьезное органическое
противоречие со ’’старым добрым” подходом верстать страницы при помощи
таблиц, предусмотренных в HTML (см. главу 5).
Это несоответствие, оборачивающееся для разработчиков ’’консервативной” и
’’прогрессивной” школ настоящим яблоком раздора, заключается в следую-
щем. Во всякой таблице, состоящей из двух ячеек, расположенных в одну
строку, обе ячейки при любом раскладе будут иметь одинаковую высоту. Ко-
гда же речь заходит о CSS-верстке, мы теряем возможность ’’увязки” высот
соседних блоков между собой, если этот параметр не задан жестко (в пиксе-
лах или иных линейных единицах), что при произвольном количестве кон-
тента в блоках совершенно неприемлемо.
Разумеется, существует миллион искусственных способов создать иллюзию
равной высоты двух соседних блоков, но как раз этот самый факт чаще всего
182 Часть II. Применение веб-технологий стороны клиента для создания сайтов
рассматривается приверженцами табличной верстки в качестве неопровер-
жимого доказательства несовершенства блочной модели CSS. По той самой
причине, что речь идет всего лишь об искусственных способах, создающих
иллюзию, и не более того.
А если все-таки посмотреть на проблему с другой стороны? Иными словами,
так ли уж и необходимо создавать ту самую иллюзию? Полагаю, что с точки
зрения логики и здравого смысла вполне естественно, когда размеры того или
иного блока определяются количеством контента в нем. Ведь веб-страница —
это не журнальная или газетная полоса, где объем каждой колонки строго
фиксирован. Тогда зачем, спрашивается, искусственно усложнять действи-
тельность?
Взгляните, например, на главную страницу сайта W3C (www.w3.org), где ис-
пользуется верстка в три колонки. Заметьте, никаких попыток уравнять высо-
ту смежных колонок там не прослеживается. Множество аналогичных при-
меров (включая, например, и такие сказочно красивые сайты, как
www.komodomedia.com) можно найти в галерее CSS Vault (www.cssvault.com),
которая, впрочем, сама по себе является ярким примером верстки страниц
при помощи блочной модели CSS2.
Как бы то ни было, "капризное" свойство height используется веб-раз-
работчиками намного реже, нежели width. Для сайтов, сверстанных с приме-
нением блочной модели CSS, характерно контролируемое развитие по гори-
зонтали в сочетании со "стихийным" развитием по вертикали.
Особенности интерпретации свойств width и height
различными браузерами
Я хотел бы ЛИШНИЙ раз подчеркнуть, ЧТО значения СВОЙСТВ width И height,
согласно стандарту, относятся только к размерам содержимого блочного эле-
мента— без учета полей, рамки и отступов. Иными словами, значения
СВОЙСТВ padding, border-width И margin дополнительно прибавляются К значе-
ниям width И height.
И вот здесь начинается самое интересное. Ибо некоторые браузеры вольны
интерпретировать положения рекомендаций W3C, мягко говоря, весьма свое-
образно.
Так, например, Internet Explorer 5.x (за исключением версии 5.5 для
Macintosh) в пику стандарту трактует значения свойств width и height как
ширину и высоту блочного элемента с учетом величин полей (padding) и
ТОЛЩИНЫ рамки (border-width), НО все же без учета отступов (margin).
С Примечание
Доля IE5 среди предпочтений пользователей Рунета стремительно падает —
так, осенью 2004 г. она составляла порядка 20%, а в марте 2005 г., когда я пи-
Глава 4. Использование блочной модели С852для верстки сложных веб-страниц 183
сал эти строки, сервис глобальной статистики SpyLog (все тот же gs.spylog.ru)
фиксировал значение, не дотягивавшее до 14%. Тем не менее это все еще
весьма значительный процент, и пренебрегать им ни в коем случае нельзя.
Если существует потребность в том, чтобы размеры какого бы то ни было
элемента были точными при отображении страницы во всех сколько-либо
распространенных сегодня графических браузерах, придется прибегать к
вложенности. В этом случае один блок, для которого определены нулевые
значения величины полей и толщины рамки, выступает в качестве "подлож-
ки" для другого блока.
\ Листинг 4.5. Преодоление несовместимости IE5 с современными
| рекомендациями W3C ’ \
<?xml version="l.О" encoding="windows-1251”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
%> "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
chtml xmlns=”http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>BnoK, обладающий постоянной шириной во всех 6paysepax</title>
<style type="text/css">
<! —
body {
color: #000;
background: #fff;
}
#carrier {
width: 30Opx;
padding: Opx;
border: Opx;
}
#data {
padding: 2 Opx;
border: solid 2px #c00;
background: #f0f0f0;
}
</style>
</head>
<body>
<div id="carrier”>
184
Часть II. Применение веб-технологий стороны клиента для создания сайтов
<div id="data">
Этот блок имеет ширину 300Snbsp;пикселов <ет>с&пЬзр;учетом</еш>
полей и толщины рамки во всех распространенных ныне графических
браузерах.
</div>
</div>
</body>
</html>
Отображение страницы, описанной в листинге 4.5, демонстрируется на
рис. 4.7.
файл правка Дид flgpWA закаадкм Мнструменш
Getting Started © Latest Headlines
Этот блок имеет ширину
300 пикселей с учетом полей н
толщины рамки во всех
распространенных ныне
графических браузерах.
Рис. 4.7. Веб-страница, описанная в листинге 4.5
Впрочем, некоторые не слишком дальновидные разработчики поступают го-
раздо проще. А именно, подготавливают шаблон страниц сообразно прави-
лам, принятым в IE5, и не включают в код ссылку на определение типа доку-
мента (элемент <!doctype ...>). Тогда и в IE6, и в Opera 7—8 такая страница
отображается ”по старинке”, в режиме обратной совместимости, с исполь-
зованием тех же самых представлений о сути вещей, которыми ’’радует” нас
пятая версия браузера Internet Explorer.
Такой подход, конечно же, нельзя назвать правомерным. Ибо веб-страница,
не содержащая в своем коде ссылки на определение типа документа, никогда
не пройдет проверку валидатором (о чем мы говорили еще в главе 2).
А теперь — внимание, еще один ’’приятный” сюрприз, подготовленный для
нас компанией Microsoft. Дело в том, что IE6 работает в режиме обратной
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 185
совместимости с IE5 в любом случае, если только правильный элемент
<!doctype .. .> не встретится этому замечательному браузеру в самой первой
значащей строке кода.
А что у нас в первой строке кода? Объявление XML! Элемент <!doctype .. .>
идет следом. Opera его исправно распознает, а вот для 1Е6 этой строчки будто
бы и нет вовсе.
Предлагаю поставить опыт. Давайте слегка видоизменим правило для блока с
идентификатором header в примере из листинга 4.4, определив содержимому
этого элемента высоту в 100 пикселов:
Г Листинг 4.6. Видоизмененное правило для блока с идентификатором header !
...................... .............................................. ............................ <
#header {
height: 10Орх;
background: #f0f0f0;
border-bottom: dashed 2px #c00;
padding: 2 Opx;
}
Какой должна быть высота ’’шапки” с учетом полей и рамки? Совершенно
верно, 142 пиксела: к высоте содержимого (100 пикселов) дважды прибавля-
ется значение свойства padding (по 20 пикселов сверху и снизу) и толщина
рамки, которая имеется только снизу (2 пиксела).
Открываем эту страницу в Firefox или Opera— да, результат вполне похож
на правду. Открываем в IE6— и удивляемся: ’’шапка” стала ниже почти в
полтора раза (рис. 4.8)! 1Е6, не найдя элемента <! doctype ...> в первой же
строчке кода, ’’мудро" рассудил, что искать ссылку на определение типа до-
кумента дальше не имеет ну совсем никакого смысла, а потому решил прики-
нуться предшествующей, пятой, версией, приняв пресловутые 100 пикселов
за общую высоту ’’шапки” нашей страницы с учетом полей и рамки.
Экспериментируем дальше. Давайте-ка попробуем ликвидировать строку
<?xml version="l.0" encoding="windows-1251"?>
из начала кода документа.
Подумать только — все волшебным образом встало на свои места: IE6 стал
отображать нашу многострадальную страницу так же, как Opera и Firefox.
Капризы браузера IE6 при интерпретации страницы, которая использует CSS-
код, описанный в листинге 4.6, иллюстрируются на рис. 4.9.
Мораль сей басни такова. Когда условия работы меняются с ’’учебных" на
"боевые” и речь заходит о реальных проектах, не стоит безоглядно полагаться
186
Часть II. Применение веб-технологий стороны клиента для создания сайтов
И Гепгк wf»>t кnatron и
fcsrt** мерами
•* \ &. -a ! ’
* * ....ФЙЕИТ» I
...HmjL..........................
1**Й*ТВ Z:\examples\04\06\l .html
Это область «шапки»
Это область ^шапктр>.
А это — абзац основного текста.
И еще один абзац основного текста.
Абзац примечания
Опять абзац основного текста.
И снова абзац примечания
А это — абзац основного текста.
II еще один абзац основного текста.
Абзац примечания
Опять абзац основного текста.
И снова абзац примечания
Рис. 4.8. Различия в интерпретации кода из листинга 4.6
браузерами Firefox 1.0 и Internet Explorer 6.0
"...1
' з й I
Н*»ад йлийй I
zi^ampies^^^. html
I ф ; 4 . 0 ' a
H,^4W .....
IJ 2 Дехатр|ё$\04\06\2 . Ь1т1
Это область «шапки» лсть «шапки?
А это — абзац основного текста.
И еще один абзац основного текста.
Абзац примечания
Опять абзац основного текста.
И снова абзац примечания
А это — абзац основного текста.
И еще один абзац основного текста.
Абзац примечания
Опять абзац основного текста.
И снова абзац примечания
/W-foJ Ж.!. -•«•••-.: г-? ?,4
Рис. 4.9. Слева — документ содержит в первой строке объявление XML,
справа — объявление XML удалено
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 187
на стандарты. Стараясь придерживаться их духа и буквы, где только это воз-
можно, необходимо, тем не менее, принимать во внимание и особенности
интерпретации тех или иных спецификаций реальными браузерами, которые,
к сожалению, пока что далеки от идеала.
Пока ситуация складывается таким образом, что от объявления XML в пер-
вой строке XHTML-документов в реальной практике лучше воздерживаться,
ибо ’’народный браузер” IE6 (которым, по данным SpyLog, пользуются почти
73% посетителей сайтов Рунета) за объявлением XML не видит элемента
<!doctype ...>, влияющего на корректность отображения элементов стра-
ницы.
К слову, повода для расстройства почти нет — ведь в главе 2 мы акцентиро-
вали внимание на том, что объявление XML является факультативным, не-
обязательным элементом...
Линейные размеры изображений
CSS-свойства width и height можно использовать и для указания линейных
размеров графических изображений, связанных с веб-страницей при помощи
тегов <img>.
Если говорить точнее, то даже не ’’можно", а "нужно". При явном указании
линейных размеров изображений браузер заранее отводит для них соответст-
вующие области, тогда как в противном случае страница многократно пере-
страивается и "пляшет" по мере загрузки графики, что, очевидно, не способ-
ствует комфортному восприятию контента пользователями.
В значениях свойств width и height, указывая как фактические, так и отлич-
ные от реальных, совершенно произвольные размеры картинки в пикселах
(или в процентах), можно заставить браузер сжимать или растягивать данную
картинку.
Так вот, растягивать изображения таким способом вполне можно, а вот сжи-
мать— ни под каким предлогом нельзя. Ибо в первом случае мы выигрыва-
ем, занимая маленькой и легковесной картинкой большую площадь, а во вто-
ром — с точностью до наоборот. Если изображение нужно уменьшить, сде-
лать это лучше всего при помощи графического редактора. При этом,
сократив линейные размеры, удастся в той или иной степени "урезать" и объ-
ем файла.
Но и растягивать картинки нужно с умом. Во многих случаях эта процедура
лишена смысла, ибо дополнительной информации в изображении так или
иначе не появится. Искусственная растяжка хороша, к примеру, для изобра-
жений, не изменяющихся в каком-то одном направлении, к примеру, для ли-
нейных градиентов.
188
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Предположим, на странице требуется горизонтальная полоска оттенения вы-
сотой 20 пикселов и шириной 600. Для этого подготавливаем градиент с фак-
тическими размерами 1^20, после чего растягиваем его при помощи CSS-
свойства width до требуемых 600 пикселов. В значении свойства height ука-
зываем, разумеется, фактическую высоту.
Другой возможный вариант — демонстрация того или иного изображения в
увеличенном масштабе с подчеркиванием растра (чаще всего— в оформи-
тельских целях). Но хорошие результаты это дает только в том случае, когда
в значениях свойств width и height указаны величины, кратные реальным
ширине и высоте растягиваемого изображения в пикселах. Ресэмплированная
картинка, увеличенная в нецелое число раз, выглядит крайне неряшливо.
; Листинг 4.7, Демонстрация использования свойств width и height
\ для указания линейных размеров графических изображений
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Линейные размеры изображений</Ь1Ь1е>
</head>
<body>
<р>Реальные размеры картинки:</p>
<pximg src="ball.png" alt="IUap с игрой света и тени"
style="width: 156рх; height: 114рх; border: solid Ipx #ccc" /></p>
<р>Увеличение линейных размеров втрое:</p>
<pximg src="ball.png" alt="UIap с игрой света и тени"
style="width: 468рх; height: 342рх; border: solid Ipx #ccc" /x/p>
<p>Paстяжение линейного градиента в одном направлении:</р>
<pximg src="grad. gif" а1Ь="Линейный градиент"
style="width: бООрх; height: 20рх; border: none" /х/р>
</body>
</html>
Результат отображения страницы, код которой описан в листинге 4.7, приве-
ден на рис. 4.10.
Гпава 4. Использование блочной модели С882для верстки сложных веб-страниц 189
Рис. 4.10. Пример использования CSS для определения линейных размеров изображений
Переполнения и предельные размеры
Порой случается, что значения свойств, определяющих линейные размеры
элемента, не позволяют содержимому целиком уместиться в ’’прокрустовом
ложе” отведенных ему границ.
По умолчанию браузеры могут выводить содержимое элемента согласно сво-
им собственным установкам, но должны предоставлять пользователю воз-
можность прокрутки, если контент не помещается полностью в назначенном
для него контейнере.
190 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Отображением содержимого можно управлять при помощи свойства
overflow. Значением этого свойства по умолчанию является ключевое слово
auto. Помимо него, возможны также следующие значения:
□ visible — содержимое отображается за пределами элемента;
□ hidden — содержимое обрезается по границе элемента;
□ scroll — содержимое отображается в пределах элемента, но при этом
обеспечивается возможность его прокрутки.
Internet Explorer, начиная с версии 4.0, а также ряд других браузеров, под-
держивает нестандартные свойства overfiow-x и overfiow-y, которые позво-
ляют определять алгоритм отображения содержимого раздельно по вертика-
ли и горизонтали. Эти свойства ’’официально” войдут в спецификацию CSS3.
Несмотря на то, что компания Microsoft явилась родоначальником этих, без-
условно, полезных свойств, ее браузер пока что с трудом управляется со
стандартным свойством overflow. Internet Explorer интерпретирует значение
visible таким образом, что размер блока подстраивается под объем содержи-
мого, что с точки зрения спецификации CSS2 некорректно.
...........................-................................
^Листинг 4.8, Блочный элемент, использующий значение visible
<!DOCTYPE html PUBLIC ’’-//W3C//DTD XHTML 1.0 Strict//EN"
%> "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict,dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml: lang-"ru’’>
<head>
<tit1е>Переполнение контейнера</title>
</head>
<body>
<p style="width: 200px; height: 200px; background: #fOfOfO;
border: dashed 2px #c00; padding: lOpx; overflow: visible">HecMOTpn
на то, что компания Microsoft явилась родоначальником безусловно
полезных свойств <span style=”white-space: nowrap”>overflow-x</span>
и <span style="white-space: nowrap">overflow-у,</span> ее браузер
пока что с трудом управляется со стандартным свойством overflow.
Internet Explorer интерпретирует значение visible таким образом,
что размер блока подстраивается под объем содержимого, что с точки
зрения спецификации CSS2 некорректно.</р>
</body>
</html>
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 191
Различия в интерпретации кода, описанного в листинге 4.8, браузерами
Firefox 1.0 и Internet Explorer 6.0 иллюстрирует рис. 4.11.
яяяя
Запаши. дуащ <
______ _ _ _______________________________________
Файд Правка Вид Сервис Справка
started
ф . * . ф й а <
Наяд Oct аяовить Обн&мт. Доной ;
^Первхзд
zAeK^ie^^Oe^^^htm?'
I Несмотря на то, что !
I компания Microsoft j
J явилась J
[ родоначальником ’
> безусловно полезных <
। свойств oveiftow-x и •
I oveillow-y, ее браузер !
J пока что с трудом J
[ управляется со [
I- стандартным свойством- J
overflow. Internet
Explorer ннтерпрептрует
значение visible таким
образом, что размер
блока подстраивается
под объем
содержимого, что с
точки зрения
спецификации CSS2
некорректно.
Несмотря ня то, что
компания Microsoft
явилась
род она ч алы а жо м
безусловно полезных
свойств overflow-x и
overflow-y, ее браузер
пока что с трудом
управляется со
стандартным свойством
overflow. Internet
Explorer интерпретирует
значение visible таким
образом, что pajMq)
блока подстраивается
под объем
СОДерЖНМОГО, что с
точки зрения
спецификации CSS2
некорректно
"~j f j J3^*c****<w
Рис. 4.11. Нюансы интерпретации свойства overflow
браузерами Firefox 1.0 и Internet Explorer 6.0
Спецификацией CSS2 определены свойства min-width, max-width, min-height и
max-height с тем, чтобы разработчики могли указывать минимальные и мак-
симальные линейные размеры элементов. Эти свойства поддерживают те же
самые типы значений, что и свойства width и height (со всеми сопутствую-
щими оговорками). К сожалению, доминирующий браузер— Internet
Explorer— совсем не понимает означенных свойств, а поэтому рассматри-
вать их в деталях сегодня не имеет смысла.
Виды позиционирования
Долго ли, коротко ли, а добрались мы до основной темы текущего раздела —
позиционирования элементов.
CSS2 предусматривает четыре типа позиционирования, определяемых при
помощи свойства position со следующими значениями:
192 Часть II. Применение веб-технологий стороны клиента для создания сайтов
□ static (значение по умолчанию)— статическое. Элемент размещается
’’как обычно”, в соответствии с нормальным потоком;
□ relative — относительное. Положение элемента вычисляется в соответ-
ствии с нормальным потоком, однако затем элемент смещается относи-
тельно нормального потока на величины, определенные значениями
свойств top, bottom, left и right, о которых будет сказано ниже. После-
дующие элементы в нормальном потоке позиционируются так, будто бы
данный элемент не был смещен;
□ absolute — абсолютное. Положение и, возможно, размер элемента опре-
деляется значениями свойств top, bottom, left и right, задающими смеще-
ния относительно границ содержимого родительского элемента. Абсолют-
но позиционированные блоки исключаются из нормального потока, никак
не влияя на размещение всех остальных элементов. Если абсолютно пози-
ционированный элемент имеет отступы, определенные свойством margin,
то они не перекрываются с отступами других элементов;
□ fixed— фиксированное. Расположение элемента рассчитывается по алго-
ритму, применяемому для схемы absolute, но при этом осуществляется
жесткая ’’привязка” блока к границам области просмотра (например, окна
браузера) или страницы (для устройств, осуществляющих постраничную
разбивку документа, к примеру, при выводе на печать). Говоря проще,
элемент, позиционированный с использованием фиксированной схемы, не
будет прокручиваться вместе с остальным содержимым окна браузера.
К сожалению, Internet Explorer не поддерживает фиксированную схему по-
зиционирования — причем IE5 вообще не отображает такого рода элемен-
ты, a IE6 интерпретирует их согласно схеме static, размещая без каких-
либо изысков в нормальном потоке.
Свойства top, bottom, left и right позволяют задать смещения элементов
(с учетом полей, рамки и отступов) соответственно сверху, снизу, слева или
справа в соответствии с одной из схем, перечисленных выше, за исключени-
ем static. В большинстве случаев бывает достаточно двух подобных свойств.
Так, например, правило
# menu {top: ЮОрх; left: 20px}
смещает блок с идентификатором menu на 100 пикселов по вертикали вниз и
на 20 пикселов по горизонтали вправо — относительно нормального потока
при относительном позиционировании, либо относительно границ содержи-
мого родительского элемента при абсолютном позиционировании.
Значениями свойств top, bottom, left и right могут быть величины, заданные
при помощи линейных единиц измерения, в процентах (относительно высоты
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 193
или ширины родительского элемента), а также ключевое слово auto, исполь-
зуемое по умолчанию.
Разумеется, необходимы примеры, иллюстрирующие различные виды пози-
ционирования. Для начала рассмотрим простейший пример, использующий
схему static, определенную по умолчанию, а затем будем постепенно ус-
ложнять задачу.
I Листинг 4,9, Позиционирование блочных элементов в нормальном потоке
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
%> "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>CTaTW4ecKoe позиционирование</Ь1Ь1е>
<style type="text/css">
<! —
html t body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
color: #000;
background: #fff;
}
div {
width: 15Opx;
height: 150px;
padding: 2 Opx;
border: dashed 3px;
}
#first {
background: #ccf0ff;
border-color: #0cf;
}
#second {
background: #fff0cc;
border-color: #fc0;
}
#third {
background: #ccfff0;
194 Часть II. Применение веб-технологий стороны клиента для создания сайтов
border-color: #0fc;
</style>
</head>
<body>
<div id="first">Первый 6лок</61у>
<div id=’’second">BTopoii блок</б^>
<div id="third’’>TpeTnii блок</а^>
</body>
</html>
Результат интерпретации кода, приведенного выше, иллюстрирует рис. 4.12.
Теперь применим к блоку с идентификатором second относительное пози-
ционирование, видоизменив код следующим образом:
из anei
#second {
position: relative;
top: 5 Opx;
left: 5 Opx;
background: #fffOcc;
border-color: #fcO;
На рис. 4.13 показано, как отображается модифицированный таким образом
документ.
Попробуем теперь изменить схему позиционирования для второго блока на
absolute, оставив остальные параметры неизменными:
г....................................................................
^Листинг 4Л1. Пример использования абсолютного позиционирования
гйляодногоизэлементов
#second {
position: absolute;
top: 5 Opx;
left: 50px; . -
background: #fffOcc;
border-color: #fcO;
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 195
Рис. 4.12. Простейшая схема
позиционирования элементов — статическая
Рис. 4.13. Отображение элемента,
использующего относительное
позиционирование
Внешний вид страницы, использующей правило, описанное в листинге 4.11,
продемонстрирован на рис. 4.14.
Наконец, заменим значение absolute на fixed:
j Листинг 4Л2. Применение фиксированной схемы позиционирования
!................ ....................... ...... ................................. .......»*.......«о ... ..........................
#second {
position: fixed;
top: 5 Opx;
left: 50px;
196
Часть II. Применение веб-технологий стороны клиента для создания сайтов
background: ttfffOcc;
border-color: #fcO;
Пцрехад Гладки йнструичнты Сдо
* ф * (§? l3' S) 3 Перейти [ЙГ
Setting Stated О Latest Heatffines
Первый блок
ЯЛЛ »<К W* W W) WW «О» VW WV NV^
[ Второй блок }
Рис. 4.14. Внешний вид страницы, содержащей элемент,
позиционированный в абсолютных координатах
Поначалу результат покажется тем же самым. Однако если уменьшить разме-
ры окошка браузера до состояния, когда содержимое можно будет прокручи-
вать по вертикали, мы увидим разницу: блок, позиционированный при помо-
щи схемы absolute, прокручивается вместе с остальным содержимым окна,
тогда как элемент, использующий схему позиционирования fixed, остается
на своем месте, словно вкопанный (рис. 4.15). Подчеркиваю, что в IE схема
fixed не поддерживается, хотя некоторые разработчики умудряются доби-
ваться похожего эффекта при помощи JavaScript, что, впрочем, в любом слу-
чае не говорит в пользу браузера от Microsoft...
Полезно рассмотреть еще одно свойство, тесно связанное с позиционирова-
нием элементов — z-index. Если свойства top, bottom, left и right определя-
ют местоположение блока на плоскости, то z-index управляет размещением
блоков, образно говоря, в ’’трехмерном” пространстве, вдоль ’’оси z”, перпен-
дикулярной плоскости экрана (листа бумаги и т. п.).
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 197
ВДЗД£и£ '' *1
Правка Hgpaw ^кладки ^трунен
^кладки ^сгрунен
I $
1 ::/||||||||||:- ‘III
В i
Тр<| |
t I
। iiiiii 'is
L J
9м«< ям км мде мсе. Фде »» wx моо яооо»
Гатова
Ф ’ Ф - ® © П~3 ©
Started & idtat Heaves
j Второй блок
Рис. 4.15. Результат прокрутки содержимого окна браузера:
слева — страница, использующая код, описанный в листинге 4.11,
справа — страница, применяющая правило, представленное в листинге 4.12
Элементы, схема позиционирования которых отлична от static, часто "наез-
жают” друг на друга, перекрываются. Как раз для того, чтобы определить по-
рядок наложения элементов, и используется свойство z-index. Оно примени-
мо ко всем элементам, для которых определено отличное от static значение
свойства position.
В качестве значения свойства z-index, помимо традиционного ключевого
слова auto, использующегося по умолчанию, может выступать любое целое
число. Элемент с большим значением z-index будет располагаться ’’выше”,
перекрывая собой элемент с меньшим значением z-index.
Рассмотрим такой пример:
| Листинг 4.13. Два абсолютно позиционированных блока
......... ................................................... ........................................
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN”
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>flBa абсолютно позиционированных блока</^б1е>
198 Часть II. Применение веб-технологий стороны клиента для создания сайтов
<style type=’’text/css">
<! —
html, body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
color: #000;
background: #fff;
}
div {
position: absolute;
width: 15Opx;
height: 15Opx;
padding: 2 Opx;
border: dashed 3px;
}
#first {
top: 5 Opx;
left: 50px;
background: #ccf0ff;
border-color: #0cf;
}
#second {
top: 150px;
left: 150px;
background: #fff0cc;
border-color: #fc0;
}
</style>
</head>
<body>
<div id=”first”>Первый блок<М^>
<div id=’’second”>BTopon 6лок<М1у>
</body>
</html>
Внешний вид страницы с двумя перекрывающимися абсолютно позициони-
рованными блоками представлен на рис. 4.16.
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 199
Рис. 4.16. Отображение страницы, код которой приведен в листинге 4.13
Второй блок, будучи определен в разметке позже первого, ’’наползает” на не-
го. Отодвинуть второй блок ”на задний план”, не внося изменений в код раз-
метки, МОЖНО, воспользовавшись СВОЙСТВОМ z-index:
...............WWSSSWA-".Г............... .............................
| Листинг 4.14. Применение свойства z-index для управления наложением 1
I блоков
#first {
z-index: 2;
top: 50рх;
left: 50рх;
background: #ccfOff;
border-color: #0cf;
}
#second {
z-index: 1;
top: 15Opx;
left: 15Opx;
200 Часть II. Применение веб-технологий стороны клиента для создания сайтов
background: #fffOcc;
border-color: #fcO;
}
Эффект, полученный в результате модификации кода, иллюстрирует рис. 4.17.
Рис. 4.17. Представление страницы, правила оформления которой описаны в листинге 4.14
Примечание J
Не удержусь от того, чтобы не бросить очередной камень в огород Microsoft.
Флагманский браузер Internet Explorer в значительной мере ограничивает наши
возможности по использованию не только фиксированного, но и просто абсо-
лютного позиционирования.
Нет, само по себе абсолютное позиционирование в IE работает верно. Вот
только выделение текста мышью ведет себя довольно странно. Пытаемся вы-
делить единственное слово в тексте — а при этом выделяется чуть ли не весь
текст блока и еще какие-то куски соседних областей...
Так происходит не со всеми абсолютно позиционированными блоками — зако-
номерность, порождающую эту досадную ошибку, мне установить пока не уда-
лось. Скажу лишь, что применение абсолютного позиционирования в качестве
основной схемы верстки шаблонов страниц неизбежно приведет к такому эф-
фекту.
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 201
Обтекаемые элементы
Помимо перечисленных выше, весьма часто при верстке шаблонов страниц
используется еще один алгоритм управления взаимным размещением блоч-
ных элементов.
Зародившись давным-давно еще в HTML (в виде атрибута align тега <img>,
позволявшего размещать графические изображения так, чтобы расположен-
ный рядом текст ’’обтекал” их), эта схема была доведена до совершенства
в CSS.
Режим обтекания регулируется двумя простыми CSS-свойствами: float и
clear. Первое из названных свойств, предполагая значения left и right, оп-
ределяет, с какой стороны будет располагаться обтекаемый элемент по отно-
шению к обтекающим — слева или справа соответственно. Ключевое слово
попе (значение по умолчанию) отменяет действие свойства float.
Свойство clear, в свою очередь, запрещает расположение обтекаемых блоков
с той или иной стороны от данного элемента. Оно, помимо закономерных
значений left и right, может принимать значение both (в этом случае обте-
каемые элементы запрещены с обеих сторон от данного элемента). Значение
по умолчанию — попе — напротив, разрешает размещение обтекаемых бло-
ков с любой стороны.
Рассмотрим использование свойств float и clear на классическом примере
с участием графического изображения.
г Листинг 4.15. Использование свойств float и clear
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN”
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<б!б1е>Обтекаемые элементы</б!б1е>
</head>
<body>
<p><img src="ball.png" alt="UIap с игрой света и тени"
style="width: 156рх; height: 114рх; border: solid Ipx #ccc;
margin: Opx 20px 20px Opx; float: left" />Текст этого абзаца
обтекает изображение.</р>
<р>Текст этого абзаца тоже будет обтекать картинку.</р>
202 Часть II. Применение веб-технологий стороны клиента для создания сайтов
<р style="clear: left">A этот абзац уже не обтекает рисунок.</р>
<р>Ну а этот&пЬэр;— и подавно.</р>
</body>
</html>
Внешний вид страницы, описанной в листинге 4.15, приведен на рис. 4.18.
Правка ^кладки йнаруманты Справка
falj vo О flle:///Z:/example$/04/15/index.html Ч (Q Перейти ||GL
.......?.......... ?... s....______________________________________________________________t___
gettir^^ted Q Latest НеасШпа$ ' -
Текст этого абзаца обтекает изображение.
Текст этого абзаца тоже будет обтекать картинку.
А этот абзац уже не обтекает рисунок.
Ну а этот — и подавно.
Рис. 4.18. Отображение страницы, содержащей обтекаемые элементы
Чуть позже мы познакомимся с идеологией обтекаемых блочных элементов и
на более сложных примерах, чем этот.
Практический пример — веб-страница
с горизонтально ориентированным
блоком навигации
Сверстать на основе блочной модели CSS2 шаблон страницы, не предпола-
гающий изобилия сложной и точно позиционированной декоративной графи-
ки, очень просто, особенно если речь идет о горизонтально ориентированном
навигационном блоке.
В этом случае вполне можно обойтись простейшей, статической схемой по-
зиционирования элементов, даже не прибегая к использованию свойства
position.
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 203
Более того, нет никакой необходимости задействовать и такие свойства, как
width и height — как мы уже говорили, ширина блочного элемента по умол-
чанию определяется шириной содержимого родительского элемента, а высо-
та — объемом контента.
При этом получится замечательная "резиновая" страница, не порождающая
совершенно никаких проблем, связанных с капризами различных браузеров.
Словом, не верстка, а одно удовольствие.
Предлагаю ознакомиться с наипростейшим примером веб-страницы, состоя-
щей из трех функциональных областей: "шапки", горизонтального блока на-
вигации и области основного содержания. Код настолько прозрачен, что мне
даже не хочется его комментировать — со всеми свойствами и типами селек-
торов, использованными в правилах листа стилей, читатель уже отлично
знаком.
:’”AV.......V....—.....Г......................А.....v..А..А...А............J
...........................J
<!DOCTYPE html PUBLIC ’’-//W3C//DTD XHTML 1.0 Strict//EN”
’’http: //www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd’’>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=’’ru” xml:lang=’’ru’’>
<head>
<ti Неправильный сайт</НПе>
<style type=’’text/css”>
<! --
html, body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
color: #000;
background: #fff;
font-family: Georgia, ’’Times New Roman’’, Times, serif;
}
#header, #menu, #text h2 {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#header {
font-size: 250%;
color: #fff;
background: #369;
204
Часть II. Применение веб-технологий стороны клиента для создания сайтов
margin: Opx;
padding: Юрх 2 Opx;
}
#menu {
font-size: 120%;
background: ftfffOcc;
border-style: solid none;
border-width: 2px Opx;
border-color: #c00;
padding: 5px 2Opx;
text-align: center;
white-space: nowrap;
}
#text {
margin: 2 Opx;
padding: 2 Opx;
border: solid Ipx #ccc;
}
#text h2 {
color: #369;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: Opx;
}
</style>
</head>
<body>
<hl 1б=”ЬеаЬег”>Правильный сайт</Ь1>
<div id=”menu”>
Здесь • Будет • Меню • Навигации
</div>
<div id="text”>
<Ь2>0рганизация пространства страницы</Ь2>
<р>Успех будущего веб-проекта во многом определяется качеством
исполнения фундамента — шаблонов главной и внутренних
страниц сайта. Мы приняли за аксиому тот факт, что все сайты
информационного характера (в отличие от презентационных проектов)
в значительной мере похожи друг на друга. И&пЬзр;общность эта сильнее
всего выражена в составе и взаимном расположении элементов
страниц.</р>
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 205
<р>В организации пространства страницы любого информационного сайта
можно выделить как минимум четыре функциональные области со строго
определенными ролями. Это &1aquo;шапка» (в английской
терминологии — header), блок навигации, область основного
текста и «подвал» (footer).</р>
</div>
</body>
</html>
Внешний вид документа, описанного в листинге 4.16, показан на рис. 4.19.
файп Переход Закладки ^нструиенты йсраака ~ ____________
| □ File///Z: /examples/04/16/index html ' ПйфИЙШ
Started Q latest Hfoadfaas
Правильный сайт
Здесь ♦ Будет • Меню • Навигации
Организация пространства страницы
Успех будущего веб-проекта во многом определяется качеством исполнения
фундамента — шаблонов главной и внутренних страниц сайта. Мы приняли за аксиому тот
факт, что все сайты информационного характера (в отличие от презентационных проектов)
в значительной мере похожи друг на друга. И общность эта сильнее всего выражена в
составе и взаимном расположении элементов страниц.
В организации пространства страницы любого информационного сайта можно выделить
как минимум четыре функциональные области со строго определенными ролями. Это
«шапка» (в английской терминологии — header), блок навигации, область основного текста
и «подвал» (footer).
Рис. 4.19. Внешний вид страницы стремя функциональными областями
Очевидно, однако, что ’’снизу чего-то не хватает” — давайте попробуем про-
дублировать навигационный блок ниже текстового содержания, попутно по-
играв немного с вертикальными отступами новоиспеченных двух панелей
навигации, которые теперь определяются при помощи селектора класса.
Заодно не мешало бы приделать и ’’подвал”:
206 Часть II. Применение веб-технологий стороны клиента для создания сайтов
। Листинг 4.17. Усовершенствованный шаблон страницы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml” lang="ru" xml:lang="ru">
<head>
<title>npaBizmbHbiH caiiT</title>
<style type="text/css">
<! —
html, body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
color: #000;
background: #fff;
font-family: Georgia, "Times New Roman", Times, serif;
}
#header, .menu, #text h2, #footer {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#header {
font-size: 250%;
color: #fff;
background: #369;
margin: Opx;
padding: lOpx 2Opx;
}
. menu {
font-size: 120%;
background: #fff0cc;
border-style: solid none;
border-width: 2px Opx;
border-color: #c00;
margin: 2px Opx;
padding: 5px 2 Opx;
text-align: center;
white-space: nowrap;
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 207
#text {
margin: 2Opx;
padding: 2Opx;
border: solid Ipx #ccc;
}
# text h2 {
color: #369;
}
# text p {
text-align: justify;
text-indent: 1.5em;
margin: Opx;
}
# footer {
font-size: 70%;
color: #fff;
background: #369;
padding: lOpx 2 Opx;
}
</style>
</head>
<body>
<hl id= ’’header'^Правильный сайт</Ь1>
<div class="menu">
Здесь • Будет • Меню • Навигации
</div>
<div id="text">
</div>
<div class=”menu”>
Здесь • Будет • Меню • Навигации
</div>
<div id=”footer”>
© Правильная веб-студия, 2005. <br /xspan
style=”white-space: поуггар”>Тел.: (123) 456-78-90.</span>
</div>
</body>
</html>
Вполне самодостаточная страница (рис. 4.20), не находите?
208
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Ставка Переход Закладки Сфаака "О
<р * ф ' Й? 0) Г 3 “file:///Z:/examplesWl^ndJx '" " "' ' Cl [[Ot
Started latest Haadfcas
Правильный сайт
Здесь • Будет ♦ Меню ♦ Навигации
Организация пространства страницы
Успех будущего веб-проекта во многом определяется качеством исполнения фундамента —
шаблонов главной и внутренних страниц сайта. Мы приняли за аксиому тот факт, что все
j сайты информационного характера (в отличие от презентационных проектов) в значительной
j мере похожи друг на друга. И общность эта сильнее всего выражена в составе и взаимном
$ расположении элементов страниц.
В организации пространства страницы любого информационного сайта можно выделить как
минимум четыре функциональные области со строго определенными ролями. Это «шапка» (в
английской терминологии — header), блок навигации, область основного текста и «подвал»
(footer).
Здесь ♦ Будет • Меню • Навигации
© Правильная ваб-с^дия, 206S,
R**08* \ ~
Рис. 4.20. Полноценная "резиновая" страница, включающая в себя "шапку",
две горизонтально ориентированные панели навигации, область основного содержания
и"подвал"
Правда, имеет смысл немного сократить лист стилей, ведь набор правил
#header {
font-size: 250%;
color: #fff;
background: #369;
margin: Opx;
padding: lOpx 2Opx;
}
#footer {
font-size: 70%;
color: #fff;
background: #369;
padding: lOpx 2Opx;
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 209
вполне можно заменить более лаконичной конструкцией:
#header, ftfooter {
color: #fff;
background: #369;
padding: lOpx 2 Opx;
}
#header {
font-size: 250%;
margin: Opx;
}
#footer {
font-size: 70%;
}
Подобного рода группировки мало того, что позволяют сократить объем лис-
та стилей, так еще и облегчают труд по поддержке сайта. Если мы захотим
поменять темно-синий цвет фона ’’шапки” и "подвала”, скажем, на темно-
зеленый, в первом фрагменте нам нужно будет найти и заменить два значе-
ния, а во втором — только одно.
В целях обеспечения еще лучшей удобочитаемости CSS-кода рекомендуется
придерживаться некоторого естественного порядка следования правил. Я, на-
пример, обычно в самом начале листа стиля определяю правила для контей-
неров <html>.. .</htmi> и <body>.. .</body>, т. е., фактически, общие для всей
страницы в целом; затем задаю правила, общие для нескольких элементов
(см., например, конструкцию #header, .menu, #text h2, #footer {...})
в листинге 4.17; после чего перечисляю индивидуальные правила для функ-
циональных областей страницы, причем желательно в той последовательно-
сти, в которой соответствующие элементы определяются в HTML-разметке.
( Примечание
Выполнять все эти рекомендации относительно стиля кодирования, конечно,
совершенно необязательно, но, как мне кажется, аккуратность должна прояв-
ляться во всем. Страницы, красивые только внешне, "снаружи", но при этом не-
читабельные "изнутри", ассоциируются лично у меня с каким-то лицемерием, с
заметанием соринок под ковер...
Так или иначе, в аккуратном коде практически невозможно "заблудиться". Для
работы в команде единый стиль кодирования — это не блажь, а насущная не-
обходимость.
Продолжим, однако, обсуждение нюансов верстки. Для того чтобы создать
шаблон страницы с фиксированной шириной, можно использовать две стра-
тегии:
210
Часть II. Применение веб-технологий стороны клиента для создания сайтов
□ указание ширины индивидуально для каждой функциональной области
страницы;
□ применение блока-"подложки" необходимой ширины.
Второй путь представляется более состоятельным. Прежде всего, по той при-
чине, что он дает нам возможность указать требуемую ширину лишь еди-
ножды. Изменяя одно это значение, мы сможем легко варьировать ширину
шаблона.
Кроме того, вторая из перечисленных стратегий выгоднее первой в плане
обеспечения совместимости с устаревшими браузерами (например, Internet
Explorer 5.0), некорректно интерпретирующими CSS-свойства width и height.
Предлагаем вниманию читателей один из возможных вариантов преобразо-
вания описанной выше ’’резиновой” страницы в шаблон с фиксированной
шириной 600 пикселов.
Добавив к общей картине пару штрихов в виде двух фоновых изображений
”на сумму” меньше килобайта, получим поистине шикарный результат:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd’'>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<ti Неправильный canT</title>
<style type="text/css">
<! —
html, body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
color: #000;
background: #999 url (bg__page. gif) ;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
}
#carrier {
background: #fff;
width: 60Opx;
margin: auto;
text-align: left;
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 211
#header, .menu, #text h2, #footer {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#header, #footer {
color: #fff;
background: #369;
padding: lOpx 2 Opx;
}
#header {
font-size: 250%;
margin: Opx;
}
. menu {
font-size: 120%;
background: #fc9 url(bg_nav.gif) center repeat-x scroll;
border-style: solid none;
border-width: 2px Opx;
border-color: #c00;
margin: 2px Opx;
padding: 5px 2 Opx;
text-align: center;
white-space: nowrap;
}
#text {
margin: 2Opx;
padding: 2 Opx;
border: solid Ipx #ccc;
}
# text h2 {
color: #369;
}
# text p {
text-align: justify;
text-indent: 1.5em;
margin: Opx;
}
# footer {
font-size: 70%;
}
</style>
</head>
<body>
<div id="carrier">
212 Часть II. Применение веб-технологий стороны клиента для создания сайтов
<hl id=’deader'^Правильный сайт</Ь1>
<div class="menu">
Здесь • Будет • Меню • Навигации
</div>
<div id=”text">
</div>
<div class="menu">
Здесь • Будет • Меню • Навигации
</div>
<div id="footer”>
© Правильная веб-студия, 2005. <br /xspan
style="white-space: псмгар">Тел.: (123) 456-78-90.</span>
</div>
</div>
</body>
</html>
33 Cs ПереЙп* fc7
; • S Q S Г 3 flie:UlZ;/examples/04/18/index.html
Ф stwd Utest Hefidtees
Здесь ♦ Будет • Меню • Навигации
Здесь * Будет • Меню • Навигации
Правильный сайт
Рис. 4.21. Фиксированная по ширине страница, использующая фоновые изображения
для пустующего пространства окна и навигационных панелей
Организация пространства страницы
Успех будущего веб-проекта во многом определяется качеством
исполнения фундамента — шаблонов главной и внутренних страниц
сайта. Мы приняли за аксиому тот факт, что все сайты
информационного характера (в отличие от презентационных
проектов) в значительной мере похожи друг на друга. И общность эта
сильнее всего выражена в составе и взаимном расположении
элементов страниц.
В организации пространства страницы любого информационного
сайта можно выделить как минимум четыре функциональные области
со строго определенными ролями. Это «шапка» (в английской
терминологии — header), блок навигации, область основного текста и
«подвал» (footer).
Тея.;
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 213
Страница, описанная в вышеприведенном листинге, в графических браузерах
отображается так, как показано на рис. 4.21.
В качестве ’’подложки” используется блок с идентификатором carrier.
Правило body {text-align: center} ИСПОЛЬЗуетСЯ ДЛЯ ТОГО, чтобы ОТЦентри-
ровать нашу страницу; но свойство text-align наследуется вложенными эле-
ментами, поэтому мы применили ’’компенсирующее” правило #carrier
{text-align: left}. Кроме того, следует обратить внимание, что значения
левого и правого отступа для блока carrier должны быть установлены в auto,
иначе браузеры, четко следующие букве стандарта (например, Firefox) не бу-
дут центрировать нашу подложку, ибо значение свойства margin для элемен-
тов <div>... </div> по умолчанию равно 0.
Практический пример — веб-страница
с вертикально ориентированным
блоком навигации
Продолжаем изыскания различных вариантов верстки шаблонов веб-страниц.
Вертикальная ориентация блока навигации — а фактически, верстка страни-
цы в несколько колонок— заставляет перейти от пассивной статической
схемы позиционирования элементов к более сложным алгоритмам.
Чаще всего при этом, так или иначе, используются обтекаемые элементы.
Начнем, по традиции, с примера ’’резинового” шаблона, но теперь, пожалуй,
не станем рассматривать простейший вариант без ’’подвала”, а сразу же соз-
дадим полноценную страницу с четырьмя функциональными областями.
|Листинг 4.1 9 Вариант ’’резиновой" страницыс вертикально ориентированным
i навигационным блоком
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
'b ’’http: //www.w3. org/TR/xhtmll/DTD/xhtmll-strict. dtd”>
<html xmlns=’’http://www. w3 . org/1999/xhtml” lang=’’ru" xml: lang=’’ru’’>
<head>
<ti Неправильный canT</title>
<style type=’’text/css’’>
<! —
html, body {
margin: Opx;
214
Часть II. Применение веб-технологий стороны клиента для создания сайтов
padding: Opx;
border: Opx;
}
body {
color: #000; *
background: #fff;
font-family: Georgia, "Times New Roman”, Times, serif;
}
#header, #menu, #text h2, #footer {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#header, #footer p {
color: #fff;
background: #369;
padding: lOpx 2 Opx;
margin: Opx;
}
#header {
font-size: 250%;
}
#menucarrier
{
width: 25%;
margin-bottom: 2Opx;
float: left;
}
#menu {
font-size: 120%;
background: #fff0cc;
text-align: center;
padding: 2Opx;
border-style: none dotted dotted none;
border-width: Opx 2px 2px Opx;
border-color: #c00;
}
#textcarrier {
width: 75%;
float: right;
clear: right;
}
#text {
padding: 2Opx;
Гпава 4. Использование блочной модели С882для верстки сложных веб-страниц 215
# text h2 {
color: #369;
}
# text p {
text-align: justify;
text-indent: 1.5em;
margin: Opx;
}
# footer {
width: 100%;
clear: both;
font-size: 70%;
}
</style>
</head>
<body>
<hl id=" header" Правильный ca&T</hl>
<div id=”menucarrier”>
<div id=’’menu”>
<р>3десь</р>
<р>Будет</р>
<р>Меню</р>
<р>Навигации</р>
</div>
</div>
<div id="textcarrier">
<div id="text”>
</div>
</div>
<div id="footer">
<p>© Правильная веб-студия, 2005.<br /Xspan
style="white-space: nowrap">Тел.: (123) 456-78-90.</span></p>
</div>
</body>
</html>
Внешний вид документа из вышеприведенного листинга проиллюстрирован
на рис. 4.22.
216
Часть II. Применение веб-технологий стороны клиента для создания сайтов
'файл' Правка W й^реход ^кладки ^струменты Справка
©>
33 ©йерейтя pGi
0* Setting Started Q latest Haadfena? -
Правильным сайт
здесь
Будет
Меню
Навигации
Организация пространства
страницы
Успех будущего веб-проекта во многом определяется
качеством исполнения фундамента — шаблонов главной и
внутренних страниц сайта. Мы приняли за аксиому тот факт,
что все сайты информационного характера (в отличие от
презентационных проектов) в значительной мере похожи друг
на друга. И общность эта сильнее всего выражена в составе и
взаимном расположении элементов страниц.
В организации пространства страницы любого
информационного сайта можно выделить как минимум четыре
функциональные области со строго определенными ролями.
Это «шапка» (в английской терминологии — header), блок
навигации, область основного текста и «подвал» (footer).
© прйвийьиа^ веб-try дьз,. 2006,
Телс(ШН^78-90,
* rarest
Рис. 4.22. Страница "резиновой" ширины
с вертикально ориентированным навигационным блоком
Чем этот шаблон принципиально отличается от рассмотренных выше? Алго-
ритм позиционирования "шапки” остался прежним, а дальше начинаются
нюансы.
Мы заключили навигационное меню (блок с идентификатором menu) и об-
ласть ОСНОВНОГО текста (text) соответственно В контейнеры menucarrier и
textcarrier, служащие "подложками" для названных блоков.
Это позволяет точно определить, какую часть ширины окна браузера займет
блок навигации, а какую — область основного текста. В нашем примере эти
параметры равны 25 и 75% соответственно (установлены при использовании
свойства width для блоков-”подложек”.
Применить свойство width (которое, напомню, задает ширину содержимого
блока без учета рамок, полей и отступов) с указанием значений в процентах
непосредственно к элементам с идентификаторами menu и text не представля-
ется возможным, поскольку они снабжены полями и рамками, ширины кото-
рых определены в пикселах.
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 217
К тому же, как вы помните, свойство width неверно интерпретируется уста-
ревшими на настоящий момент версиями браузера Internet Explorer. Приме-
нение свойства width для элементов, имеющих ненулевые ширину полей и
толщину рамки, будет неизбежно создавать лишние проблемы пользовате-
лям IE5.
Блоки menu и text позиционируются внутри своих "подложек" согласно схеме
static, занимая всю доступную ширину. Так, блок menu с учетом принадле-
жащих ему полей и рамки будет занимать в точности 25% ширины окна брау-
зера, а блок text с учетом своих полей (рамки у этого элемента нет) — стро-
го 75% от ширины окошка.
Сами же "подложки", т. е. элементы menucarrier и textcarrier, позициони-
руются при помощи свойства float. Блок menucarrier прижат к левому краю
страницы и обтекается элементом textcarrier справа, а последний прижат к
правому краю страницы и, в свою очередь, обтекается элементом menucarrier
слева. Вследствие этого между ними образуется строго вертикальный "водо-
раздел".
Размещенный ниже блок "подвала" с идентификатором footer использует
свойство clear с тем, чтобы запретить обтекаемые элементы с обеих сторон
от себя. Таким образом, он будет расположен ниже любого из блоков
menucarrier и textcarrier вне зависимости от того, какой из них имеет
большую высоту.
Для блока menucarrier При ПОМОЩИ свойства margin-bottom установлен НИЖ-
НИЙ вертикальный отступ, равный 20 пикселам. Таким образом, "подвал" в
любом случае будет располагаться не ближе величины этого отступа от ниж-
ней рамки навигационного блока. Такое же минимальное расстояние —
20 пикселов — отделяет "подвал" от содержимого области основного текста
(за счет соответствующего значения свойства padding, указанного для блока
textcarrier).
"Подвал" позиционируется в соответствии с простейшей схемой static, при-
нятой по умолчанию. Пришлось, однако, дополнительно определить внутри
этого элемента абзац, а ширину самого контейнера установить равной
100% ширины окна браузера, поскольку в отсутствии данных мер в Internet
Explorer вылезают "глюки" неведомой природы — верхнее поле начинает
"гулять" и порой "заезжать" на территорию, занятую блоками навигации и
основного текста...
В целях преодоления особенностей того же IE пришлось еще определить
правило tttextcarrier {clear: right}, которое предписывает запретить раз-
мещение обтекаемых блоков справа от области основного текста (а их там и
так нет). Иначе при недостаточной ширине окна элемент textcarrier "съедет"
218 Часть II, Применение веб-технологий стороны клиента для создания сайтов
под блок навигационного меню. Подчеркиваю, сказанное относится лишь к
особенностям нрава браузера Internet Explorer.
Плавно переходим ко второму примеру. Зачастую необходимость в "истинно
резиновой" верстке отсутствует— порой требуется, чтобы растягиваться или
сужаться в зависимости от ширины окна "умела" только область основного
текста, тогда как навигационное меню обладало бы фиксированной шириной
в пикселах.
[ Листинг 4.20. ’*Условно резиновая** страница с навигационным блоком Ж
| фиксированной ширины
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
‘Ъ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<tiНеправильный canT</title>
<style type="text/css">
< i_
html, body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
color: #000;
background: #fff;
font-family: Georgia, "Times New Roman", Times, serif;
}
#header, #menu, #text h2, #footer {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#header, #footer p {
color: #fff;
background: #369;
padding: lOpx 2 Opx;
margin: Opx;
}
#header {
font-size: 250%;
}
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 219
#menucarrier
{
width: 20Орх;
margin-bottom: 2Орх;
float: left;
}
#menu {
font-size: 120%;
background: tffffOcc;
text-align: center;
padding: 2Opx;
border-style: none dotted dotted none;
border-width: Opx 2px 2px Opx;
border-color: #c00;
}
#text {
margin-left: 200px;
padding: 2 Opx;
}
#text h2 {
color: #369;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: Opx;
}
#footer {
width: 100%;
clear: both;
font-size: 70%;
</style>
</head>
<body>
<hl 1Ь="ЬеаЬег">Правильный ca&T</hl>
<div id="menucarrier">
<div id="menu">
<р>3десь</р>
<р>Будет</р>
<р>Меню</р>
220
Часть II. Применение веб-технологий стороны клиента для создания сайтов
<р>Навигации</р>
</div>
</div>
<div id="text">
</div>
<div id="footer">
<p>© Правильная веб-студия, 2005. <br /Xspan
style=”white-space: помгар">Тел.: (123) 456-78-90.</span></p>
</div>
</body>
</html>
Рис. 4.23 демонстрирует, как будет вести себя страница, описанная в листин-
ге 4.20, при различных значениях ширины окна браузера.
ЗВгэйл StesBics &Ч Лйреход Инструменты 4&иака
т | jj file ///Z /examples
& ЯйгtW C-
*3 0 Лврвйти [(Gt
Правильный сайт
Здесь Организация пространства страницы
,,
\7 * 1 * .5? fu file ///z /exam?
x| гтся качеством исполнения фундамента —
>i приняли за аксиому тот факт, что все
JZZZZT езентационных проектов) в значительной
;»ее всего выражена в составе и взаимном
Ф йвйе^ ЗЕйгЫ latest tfeedfees
Правильный сайт
Здесь
Будет
Организация пространства
страницы
формационного сайта можно выделить как
) определенными ролями. Это «шапка» (в
чи, область основного текста и «подвал»
Меню * Успех будущего веб-проекта во многом
оделяется качеством исполнения
Рис. 4.23. Отображение страницы, описанной в листинге 4.20
при различных размерах окна браузера
В этом примере статическое позиционирование применяется ко всем элемен-
там, за исключением навигационного блока (с "подложкой"), ширина которо-
го с учетом полей и рамки установлена равной 200 пикселам.
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 221
I
Правильный
сайт
Здесь
Будет
Меню
Навигации
Организация
пространства
страницы
Успех будущего
веб-проекта во
Готою
Рис. 4.24. При недостаточной ширине окна блок основного содержания в IE6
"съезжает" под область навигационного меню
Блок основного содержания освободился от '’подложки” — теперь он пред-
ставляет собой обыкновенный элемент, всецело и полностью принадлежащий
нормальному потоку. Единственная его особенность — левый горизонталь-
ный отступ, определенный при помощи свойства margin-left и равный тем
самым 200 пикселам, которые отнимает навигационное меню. Если бы этого
отступа не было, содержимое элемента text обтекало бы навигационный
блок с двух сторон — справа и снизу. Мы же стремимся сохранить верти-
кальный "водораздел”.
Правда, бороться со "сползанием” области основного текста вниз, под блок
навигации, при малых величинах ширины окна в Internet Explorer (рис. 4.24)
мы уже никак не сможем.
С Примечание )
При уменьшении ширины окна браузера до "закритичных" значений поведение
страницы, сверстанной при помощи блочной модели CSS2, заметно отличается
222 Часть II. Применение веб-технологий стороны клиента для создания сайтов
от метаморфоз табличного шаблона. Блоки, позиционированные в абсолютных
координатах, могут "наезжать" друг на друга; контент иногда "вылезает" за гра-
ницы чрезмерно узких блоков (к слову, не забывайте о возможностях свойства
overflow!) и т. д.
Не вижу, однако, никакого смысла в обсуждении "экстремальных" случаев: мол,
а что будет, если сжать окно браузера до 200 пикселов в ширину? А если еще и
шрифт при этом увеличить до 100 пикселов? Все это не так уж и важно для
страницы, рассчитанной на минимальный комфортный размер окна, скажем,
800x600. Для маленьких же экранов мобильных устройств — карманных ком-
пьютеров или смартфонов — обычно предусматривается обособленная версия
представления контента.
Теперь — о шаблонах с фиксированной шириной. Предлагаю вниманию чи-
тателей "гремучую смесь", вобравшую в себя все лучшее из листингов 4.18
и 4.20.
Г......................v.....................................
i Листинг 4.21. Фиксированная по ширине страница с вертикально 4 "
j ориентированным блоком навигации и использованием фоновых
J изображений
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN”
‘Ъ "http://www.w3.org/TR/xhtmll/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>npaBWibHbiM canT</title>
<style type="text/css">
<! --
html r body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
color: #000;
background: #999 url (bg__page. gif) ;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
}
#carrier {
background: #fff;
width: 60Opx;
margin: auto;
text-align: left;
}
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 223
#header, #menu, #text h2, tffooter {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#header, tffooter {
color: #fff;
background: #369;
padding: lOpx 2 Opx;
}
#header {
font-size: 250%;
margin: Opx;
}
#menucarrier
{
width: 20Opx;
margin-bottom: 2 Opx;
float: left;
background: #fff0cc url(bg_menu.gif) center repeat-у scroll;
}
#menu {
font-size: 120%;
text-align: center;
padding: 2 Opx;
border-style: none dotted dotted none; ।
border-width: Opx 2px 2px Opx;
border-color: #c00;
}
#text {
margin-left: 200px;
padding: 2 Opx;
}
# text h2 {
color: #369;
}
# text p {
text-align: justify;
text-indent: 1.5em;
margin: Opx;
}
# footer {
clear: both;
font-size: 70%;
224
Часть II. Применение веб-технологий стороны клиента для создания сайтов
</style>
</head>
<body>
<div id="carrier">
<hl id="header">npaBrnibHbM сайт</Ь1>
<div id="menucarrier">
<div id="menu">
<р>3десь</р>
<р>Будет</р>
<р>Меню</р>
<р>Навигации</р>
</div>
</div>
<div id="text">
</div>
<div id="footer">
© Правильная веб-студия, 2005.<br /xspan
style="white-space: псжгар">Тел.: (123) 456-78-90.</span>
</div>
</div>
</body>
</html>
Страница, описанная в вышеприведенном листинге, в графических браузерах
будет иметь вид, аналогичный демонстрируемому на рис. 4.25.
Ровным счетом ничего нового для внимательного читателя. Та же самая
’’подложка” с идентификатором carrier для всей страницы в целом
(см. листинг 4.18), те же самые обтекаемый блок навигации и сдвинутая на
ширину последнего вправо область основного текста (см. листинг 4.20).
Разве что теперь в IE никуда ничего не съезжает — ширина шаблона-то же-
стко фиксированная. Кстати говоря, отпала необходимость дополнительного
определения абзаца в содержимом ’’подвала” — надо признать, что в услови-
ях жестких рамок Internet Explorer ощущает себя куда более уверенно.
Напоследок рассмотрим еще один вариант шаблона, демонстрирующий один
из способов создания иллюзии равенства навигационного блока и области
основного содержания по высоте. Код получается даже проще, чем в преды-
дущем случае.
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 225
»Лп|х|
О
*3 © pGl
Здесь
Будет
Меню
Навигации
Правильный сайт
Рис. 4.25. Отображение страницы, описанной в листинге 4.21
Организация пространства
страницы
Успех будущего веб-проекта во многом
определяется качеством исполнения
фундамента — шаблонов главной и внутренних
страниц сайта. Мы приняли за аксиому тот
факт, что все сайты информационного
характера (в отличие от презентационных
проектов) в значительной мере похожи друг на
друга. И общность эта сильнее всего выражена в
составе и взаимном расположении элементов
страниц.
В организации пространства страницы
любого информационного сайта можно выделить
как минимум четыре функциональные области
со строго определенными ролями. Это «шапка»
(в английской терминологии — header), блок
навигации, область основного текста и «подвал»
(footer).
F Листинг 4Я^^^^ца фиксированной ширины с иллюзией равенства высот j
| вертикального навигационного блока и области основного содержания
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN”
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<^111е>Правильный canT</title>
<style type="text/css">
<! —
html, body {
226
Часть II. Применение веб-технологий стороны клиента для создания сайтов
margin: Орх;
padding: Орх;
border: Орх;
}
body {
color: #000;
background: #999 url (bg__page. gif) ;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
}
#carrier {
background: #fff url(bg_menu.gif) top left repeat-у scroll;
width: 600px;
margin: auto;
text-align: left;
}
#header, #menu, #text h2, #footer {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#header, #footer {
color: #fff;
background: #369;
padding: lOpx 2Opx;
}
#header {
font-size: 250%;
margin: Opx;
}
#menucarrier
{
width: 20Opx;
float: left;
}
#menu {
font-size: 120%;
text-align: center;
padding: 2 Opx;
}
#text {
margin-left: 200px;
padding: 2Opx;
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 227
# text h2 {
color: #369;
}
# text p {
text-align: justify;
text-indent: 1.5em;
margin: Opx;
}
# footer {
clear: both;
font-size: 70%;
</style>
</head>
<body>
<div id="carrier”>
<hl 1Ь="Ьеабег">Правильный сайт</И1>
<div id="menucarrier">
<div id="menu">
<р>3десь</р>
<р>Будет</р>
<р>Меню</р>
<р>Навигации</р>
</div>
</div>
<div id=”text">
</div>
<div id="footer">
© Правильная веб-студия, 2005.<br /xspan
style="white-space: по™гар">Тел.: (123) 456-78-90.</span>
</div>
</div>
</body>
</html>
Результат интерпретации вышеприведенного кода демонстрирует рис. 4.26.
Весь секрет— в фоновом изображении bg_menu.gif, назначенном общей для
всей страницы ’’подложке” carrier. Фон блока навигации теперь прозрачен,
как слеза; более того, никакой рамки у навигационного блока (во всяком слу-
228
Часть II. Применение веб-технологий стороны клиента для создания сайтов
чае, заданной при помощи свойств семейства border) отныне нет. Рамку ими-
тирует все та же фоновая картинка. Пользователю-то какая разница!
Файл Переход Справка
ж I Щi file’/7/Z /examples/04/22/^
имейте
Здесь
Будет
Пеню
Навигации
| Готово
Правильный сайт
Организация пространства
страницы
У?
Stated L.4- Latest Haadfew
Рис. 4.26. Полная иллюзия таблицы в действии
Успех будущего веб-проекта во многом
определяется качеством исполнения
фундамента — шаблонов главной и внутренних
страниц сайта. Мы приняли за аксиому тот
факт, что все сайты информационного
характера (в отличие от презентационных
проектов) в значительной мере похожи друг на
друга. И общность эта сильнее всего выражена в
составе и взаимном расположении элементов
страниц.
В организации пространства страницы
любого информационного сайта можно выделить
как минимум четыре функциональные области
со строго определенными ролями. Это «шапка»
(в английской терминологии — header), блок
навигации, область основного текста и «подвал»
(footer).
Существуют и более изощренные способы ’’пускать пыль в глаза”, даже без
использования графики. Полагаю, однако, что рассматривать их здесь совер-
шенно излишне — свою точку зрения по поводу контроля высоты блочных
элементов я высказал, надо полагать, вполне определенно и недвусмысленно.
Все примеры шаблонов страниц, рассмотренные в этой главе, были протести-
рованы в следующих браузерах (не говоря уже о проверке валидатором): IE5,
IE6, Opera 5, Opera 7, Opera 8, Firefox 1. Размеры, взаимное расположение и
внешний вид всех областей на страницах при адекватных габаритах окон в
полной мере соответствуют заявленным целям. Правда, IE5 отображает
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 229
сплошную рамку вместо точечной— но на этом все сколько-либо сущест-
венные различия заканчиваются.
Системы навигации сайтов
В идеале— об этом можно прочесть у Якоба Нильсена (Jakob Nielsen,
www.useit.com), одного из ведущих мировых специалистов в области проек-
тирования пользовательских интерфейсов — навигация сайта должна в лю-
бой момент предоставлять посетителю четкие ответы на три вопроса: ’’Где я
нахожусь?”, ’’Где я уже был?” и ’’Куда я могу отсюда пойти?”
Качество и удобство системы навигации любого сайта напрямую зависит от
того, насколько ясной и продуманной является его логическая структура.
принятая на одном из начальных этапов проектирования. Обычно логическая
структура сайта изображается в виде дерева, корнем которого выступает
главная страница.
В то же время, картина реальных взаимосвязей между страницами веб-
ресурса почти никогда не является зеркальным отражением нарисованного на
бумаге дерева логической структуры — зачастую устройство средств навига-
ции намного сложнее условной древовидной схемы, ибо на большинстве сай-
тов навигация предусматривает значительное количество неосновных, вспо-
могательных связей. Все подобные ссылки, как правило, избыточны, но бла-
годаря им можно существенно повысить степень удобства использования
сайта. Здесь уместно вспомнить известное ’’правило двух щелчков” — крайне
желательно, чтобы переход между двумя любыми страницами можно было
осуществить при помощи всего двух нажатий на кнопку мыши. А такое без
вспомогательных связей реализовать на сайтах с многоуровневой иерархией
древовидной структуры принципиально невозможно.
В основе любой системы навигации, конечно же, лежит краеугольный камень
идеологии Всемирной паутины — гипертекстовые ссылки. Но состав средств
навигации ими вовсе не ограничивается— при ближайшем рассмотрении
устройство любой сколько-либо сложной навигационной системы выявляет
неоднородность.
Так, все средства навигации можно подразделить на внутренние и внешние
(по отношению к данному сайту). И лишь внутренняя навигация представле-
на гиперссылками, размещенными на страницах сайта, тогда как навигация
внешняя, ’’неофициальная”, сопряжена со свободой перемещений, предостав-
ляемой пользователю программой-клиентом, т. е. браузером. Так, кнопка На-
зад— безусловный лидер, ее нажимают на порядок чаще, чем соседнюю
Вперед. Помимо двух этих кнопок, к средствам внешней навигации можно
отнести адресную и статусную строки браузера, а также заголовок его окна.
230
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Внутренняя навигация неоднородна сама по себе. Первое, на что обращает
внимание посетитель — обособленный навигационный блок, где представле-
ны ссылки на базовые разделы сайта. Это ’’парадная”, магистральная, основ-
ная часть системы навигации. Но на страницах сайта пользователь может
встретить и вспомогательные элементы навигации — например, ссылки с
надписями ”К предыдущему подразделу”, ”К следующему подразделу”, ”На
уровень вверх”, "В начало” и т. д.
Что нужно сделать для того, чтобы система навигации создаваемого сайта
удалась на славу? Прежде всего, конечно же, необходимо следовать обще-
принятым правилам хорошего тона. Не мешало бы также облегчить труд по
созданию и сопровождению сайта себе любимому, дабы не возникало со-
блазна означенные правила нарушить.
Прежде чем приступить к изложению пресловутых правил хорошего тона,
мне хотелось бы обратить внимание читателя вот на какой нюанс. Не нужно
воспринимать эти теоретические соображения как догму и истину в послед-
ней инстанции. Правила хорошего тона, которых мы коснемся, возникли, ко-
нечно же, не на пустом месте — они основаны на моделях, явившихся пло-
дами исследования когнитивной психологии, изучающей информационные
процессы человека, такие как обнаружение и интерпретация сенсорных сиг-
налов, память, образы, мышление...
Очевидно, однако, что когнитивная психология— это не математический
анализ и не марксистско-ленинская философия. Человек устроен гораздо
сложнее, чем все модели, описывающие его поведение, вместе взятые, и су-
ществование готового рецепта идеального интерфейса на каждый день по-
просту невозможно. Во всяком случае, на сегодняшнем этапе развития науки.
Поэтому серьезные компании, занимающиеся созданием каких бы то ни было
пользовательских интерфейсов, обязательно тестируют свои разработки
с привлечением реальных пользователей.
Таким образом, правила можно и должно нарушать. Но делать это нужно с
умом, будучи вооруженным соответствующими знаниями, четко представляя
себе, как и на что повлияют ваши оригинальные решения.
Я вполне могу согласиться, что сайты литературного и художественного тол-
ка, ориентированные на неспешное прочтение на досуге, а не на беглое озна-
комление. характерное для большинства ’’классических” информационных
ресурсов, предоставляют своим разработчикам куда больше степеней свобо-
ды, вполне допуская разного рода нестандартные подходы к решению при-
вычных задач — если хотите, некое интеллектуальное заигрывание с посети-
телями... В то же самое время, все хорошо в меру, ’’изюминка” вряд ли долж-
на превращаться в фунт изюма, иначе будет приторно. Если система
навигации напоминает тест на IQ, вряд ли кому бы то ни было будет на таком
сайте уютно.
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 231
Внутренняя навигация
Если вам предстоит разработка довольно сложного сайта, лучше заранее про-
думать его логическую структуру, выявить главное и второстепенное, разло-
жить все по полочкам, в конце концов, нарисовать на листе бумаге ту самую
схему в виде дерева. Она и послужит отправной точкой для создания системы
внутренней навигации.
Основных разделов (ветвей, отходящих от корня дерева) на сайте в идеале
должно быть не более семи. Только в этом случае все пользователи смогут
быстро привыкнуть к расположению ссылок в блоке навигации.
( Примечание
Считается, что именно семью объектами ограничивается объем восприятия
среднестатистического человека, когда совокупность элементов еще восприни-
мается как единое целое. Взаимное расположение семи кнопок очень легко от-
печатывается в сознании — первая, средняя, последняя; следующая за первой,
предпоследняя; предшествующая средней, идущая сразу за средней.
Если количество основных разделов существенно ’’зашкаливает” за семь, ло-
гическую структуру следует пересмотреть, укрупнив некоторые разделы. При
этом вероятно, логическую структуру придется сильнее развить вглубь.
Дерево логической структуры— почти готовая карта сайта. На крупных
веб-ресурсах, иерархия структуры которых имеет более трех уровней вло-
женности, карта сайта (страница, с которой одним щелчком мыши можно по-
пасть на любую другую страницу) должна быть обязательным атрибутом.
Если в качестве кнопок навигации используются графические изображения,
то их требуется обязательно снабжать содержательными alt-текстами. Нужно
непременно проверять, легко ли работать с сайтом при отключенной графике
или в текстовом браузере наподобие Lynx.
Очень часто случается, что в меню навигации встречаются ссылки, ведущие
на ту же самую страницу, на которой находится ссылка. Это очень грубый
недочет, разрушающий логику построения сайта, и от него нужно обязатель-
но избавляться.
Хорошим тоном считается не просто ликвидация ссылки с названия текущего
раздела в меню навигации, но и выделение этой надписи особенным образом,
к примеру, другим цветом или начертанием.
Поскольку CSS2 предоставляет развитый спектр возможностей по формати-
рованию текста и оформлению блоков, а все современные графические брау-
зеры поддерживают эти возможности, сегодня лучше всего вообще отказать-
ся от использования элементов навигации, реализованных в виде графиче-
ских изображений. Как минимум по двум причинам — во-первых, текст,
232 Часть II. Применение веб-технологий стороны клиента для создания сайтов
отлитый в графике, вредит логике документа, а во-вторых, добавление нового
раздела в графическое меню навигации существенно более трудоемко.
Основное меню навигации, как правило, сразу заметно, и его оформление
может быть в достаточной степени вольным (в разумных пределах, конечно).
А что касается выбора цветов текстовых ссылок в остальных частях страниц,
то обязательно должно существовать четкое разделение всех ссылок на про-
смотренные и непросмотренные, причем у пользователя не должно возни-
кать неопределенности, возможности двоякого толкования. В идеале, конеч-
но, лучше всего обойтись цветами по умолчанию— синий для непросмот-
ренных ссылок и пурпурный половинной яркости — для просмотренных.
Чаще всего, конечно, это бывает нежелательным с композиционной точки
зрения, но в любом случае просмотренные ссылки должны явным образом
свидетельствовать о том, что их уже посетили, к примеру, иметь менее на-
сыщенный цвет, чем непросмотренные, или же цвет, более близкий к цвету
основного текста или фона страницы, чем у непросмотренных ссылок.
Желательно выделять ссылки подчеркиванием. Это давняя традиция, и нару-
шать ее вряд ли целесообразно. Если же на странице очень много ссылок, и
большое количество подчеркиваний создает нежелательную рябь, можно
средствами CSS реализовать эффект подчеркивания ссылок только при наве-
дении на ссылку курсора мыши (см. далее). Так или иначе, но ссылки в обя-
зательном порядке должны явным образом выражать свое отличие от основ-
ного текста страниц. Выделение подчеркиванием слов основного текста, не
являющихся ссылками, недопустимо.
На каждой внутренней странице сайта должна обязательно присутствовать
ссылка на главную. Уже стало стандартом де-факто использование титульной
надписи, логотипа или визуала, размещенных в левом верхнем углу, в каче-
стве такой ссылки.
На страницах любого веб-ресурса неизбежно присутствуют как внутренние,
так и внешние ссылки, ведущие на другие сайты. Такова идеология Всемир-
ной паутины — все сайты в ней взаимосвязаны. Для внешних ссылок, напри-
мер, на дружественные ресурсы, на сайтах, как правило, отводится обособ-
ленный раздел. В случае же, когда в тексте внутренние ссылки перемежаются
с внешними, нужно снабжать последние каким-либо значком с целью одно-
значно дать пользователю понять, что данная ссылка ведет во внешнюю сре-
ду.
В состав вспомогательной навигации полезно включать ссылки, ведущие к
предыдущему и к следующему подразделам, к странице со списком подраз-
делов (т. е. к оглавлению раздела более высокого уровня) и на главную стра-
ницу сайта. Если иерархия логической структуры сайта насчитывает больше
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 233
трех уровней, лучше всего реализовать вспомогательную навигацию в виде
строк пройденного пути. Вот возможный пример такой строки:
Библиотека веб-разработчика > CSS2 > Блочная модель > Позиционирование
Три первые надписи выделены здесь подчеркиванием в знак того, что они
являются ссылками на страницы с оглавлениями соответствующих разделов.
Удобно, не так ли?
Внешняя навигация
Не следует пренебрегать стандартными элементами интерфейса браузеров.
Как уже отмечалось, особенно часто используется кнопка Назад. Намеренно
блокировать работу этой кнопки (например, при помощи JavaScript) — дур-
ной тон. Нужно по возможности воздержаться также и от использования тех-
нологий, нарушающих логику работы кнопки Назад (например, фреймов,
Flash-заставок и анкеров, т. е. ссылок, позволяющих перемещаться между
разделами внутри одной и той же страницы).
URL страницы может дать много информации, если каталоги и файлы, со-
ставляющие сайт, названы разработчиками "говорящими” именами в соот-
ветствии с логикой построения сайта. Согласитесь, нижеследующий URL не-
сет достаточно сведений о текущей странице:
http://www.webdevlibrary.ru/css2/boxes/positioning/absolute.html
Помимо чисто справочной роли, URL такого вида вполне может использо-
ваться для передвижения по сайту. Посетитель, сократив этот адрес, скажем,
ДО Вида http://www.webdevlibrary.ru/css2/, сможет при ПОМОЩИ ОДНОГО
щелчка мыши попасть на страницу оглавления раздела, посвященного техно-
логии CSS2, которая находится тремя уровнями выше! Изменив
absoiute.html на reiative.html, посетитель сможет перейти к статье, касаю-
щейся другой темы, не пользуясь для этого внутренней навигацией сайта.
Чрезвычайно важное значение при ответе на вопрос 'Тде я нахожусь?" имеет
заголовок окна браузера, который, как известно, отображает информацию,
содержащуюся внутри контейнера <titie>.. ,</titie> HTML-кода веб-
страницы. Грамотное составление содержимого этого элемента— большая
наука. На главной странице, помимо названия сайта, в заголовке окна должно
фигурировать сверхкраткое описание ресурса, которое, кстати говоря, весьма
позитивно отражается на релевантности страницы при ранжировании резуль-
татов поиска слов, присутствующих в элементе <titie>.. .</titie>, при по-
мощи поисковых машин. Пример грамотного заглавия для главной страницы
сайта:
Библиотека веб-разработчика: XHTML, CSS2, блочная модель, верстка,
веб-стандарты
234 Часть II. Применение веб-технологий стороны клиента для создания сайтов
На внутренних страницах содержимое заглавия должно отражать положение
того или иного подраздела в иерархической структуре сайта. Для приведен-
ного несколькими абзацами выше URL содержимое элемента <titie>...
</titie> может выглядеть примерно так:
Абсолютное позиционирование - Схемы позиционирования элементов - Блочная
модель - CSS2 - Библиотека веб-разработчика
Следует обратить внимание на то, что в заглавии внутренней страницы сайта
непременно должны присутствовать как название самой страницы, так и на-
звание сайта в целом. Причем название страницы лучше всего размещать на
первом месте, поскольку, скажем, в Панели задач Windows отображается
кнопка, содержащая лишь первые несколько символов заголовка окна, и, если
в разных окнах открыто несколько страниц одного и того же сайта, иденти-
фицировать то или иное окно по кнопке в Панели задач будет значительно
легче.
Интерактивное меню навигации
средствами CSS
Обсудив возможности HTML по организации гипертекстовых ссылок в гла-
ве 2, мы до сих пор ничего не говорили о том, каким образом можно переоп-
ределить их внешний вид.
Разумеется, к гиперссылкам, равно как и к другим элементам, применимы
многие рассмотренные нами CSS-свойства, например, color, background, font,
text-decoration, border И T. Д.
Мы, однако, замолвили, что гипертекстовые ссылки должны четко подразде-
ляться на просмотренные и непросмотренные. Как это реализовать?
В CSS предусмотрены псевдоклассы link и visited, позволяющие строить
селекторы, соотносящиеся соответственно с непосещенными и посещенными
ссылками. Имена псевдоклассов записываются с использованием символа
двоеточия:
a {text-decoration: none} /* Правило относится ко всем гиперссылкам */
a:link {color: #036} /* Правило определяет цвет непросмотренных ссылок */
a:visited {color: #999} /* Правило задает цвет просмотренных ссылок */
Псевдоклассы link и visited являются взаимоисключающими — ссылка не
может быть непросмотренной и просмотренной одновременно. Браузеры, од-
нако, могут возвращать просмотренные ссылки в исходное, непросмотренное
состояние, если соответствующий ресурс давно не посещался.
Помимо двух перечисленных выше, CSS предусматривает три динамических
псевдокласса, позволяющих изменять визуальное представление различных
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 235
элементов (не обязательно гиперссылок) под влиянием тех или иных собы-
тий. Так, псевдокласс hover относится к элементам, на которые наведен кур-
сор мыши или иного указательного устройства; псевдокласс active сопостав-
ляется с активизированными (к примеру, путем нажатия на кнопку мыши)
пользователем элементами; а псевдокласс focus определяет элементы, сфоку-
сированные (выделенные) посредством клавиатуры или иных способов тек-
стового ввода.
Динамические псевдоклассы применительно к гиперссылкам можно исполь-
зовать в сочетании с псевдоклассами link и visited, к примеру, так:
a:link:hover {text-decoration: underline; color: #369}
a:visited:hover {text-decoration: underline; color: #666}
Кроме того, динамические псевдоклассы могут комбинироваться друг с дру-
гом:
a:focus:hover {background: #fffOcc}
Таким образом, зайти можно очень далеко — число возможных представле-
ний одной и той же гиперссылки весьма велико.
Определять индивидуальные правила для всех состояний вряд ли целесооб-
разно. Тем более, что некоторые браузеры могут всего этого великолепия не
оценить. В частности, наш ’’любимый" Internet Explorer приведет два правила
a:link:hover {color: #369}
a: visited-.hover {color: #666}
к одному:
a:hover {color: #666}
А это, мягко говоря, не совсем то, что мы хотели бы получить.
Еще более печальным, однако, является тот факт, что Internet Explorer не по-
зволяет применять динамические псевдоклассы к элементам, отличным от
гипертекстовых ссылок...
Представляется разумным определять различные правила представления для
элементов, заданных селекторами a: link, a: visited, a:hover И a: active В ОС-
НОВНОМ тексте страниц. Для ссылок же "магистрального" навигационного ме-
ню, полагаю, вполне достаточно указать всего два правила — для элементов,
сопоставленных С селекторами 1) a: link, a: visited И 2) a:hover, a: active.
Воплощение этих тезисов на практике ждет читателя в финальном примере,
венчающем первые четыре главы нашего повествования.
236 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Практический пример — завершенный сайт
Чтобы обобщить все знания и умения, полученные в ходе прочтения первых
четырех глав книги, предлагаю воплотить в жизнь проект полнофункцио-
нального информационного сайта. Что называется, с отделкой "под ключ".
Наш проект предполагает следующую логическую структуру (в скобках при-
ведены относительные URL соответствующих страниц):
□ Сайт о сайтах (index.html; главная страница)
• Концепции (concept/index.html)
D Критерии качества сайтов (concept/quality.html)
D Технологическая цепочка создания сайтов (concept/stages.html)
• Технологии (tech/index.html)
D Расширяемый язык разметки гипертекста XHTML (tech/xhtml.html)
D Каскадные листы стилей CSS (tech/css.html)
• Нюансы (nuances/index.html)
D Организация пространства страницы (nuances/layout.html)
° Проектирование систем навигации (nuances/nav.html)
• О проекте (about/index.html)
• Карта сайта (map/index.html)
Элементы второго уровня этого списка отражают "магистральные" разделы
сайта, названия которых будут отражены в главном меню навигации.
За основу будущего сайта мы примем "резиновый" шаблон с фиксированным
по ширине вертикально ориентированным навигационным блоком, описан-
ный в листинге 4.20.
Но мы "скрестим" его с шаблоном, рассмотренным в листинге 4.21 — проще
говоря, будем использовать "подложку" белого цвета для содержательной
части страницы, а пустующую полоску окна браузера (возникающую в слу-
чае, когда все содержимое страницы умещается в окне без вертикальной про-
крутки, и "подвал" не дотягивает до нижней границы окошка) заполним про-
стой фоновой текстурой.
Лист стилей готового сайта
Наш лист стилей будет аппаратно-зависимым. Помимо экранной версии для
настольных компьютеров и ноутбуков, мы реализуем варианты представле-
ния контента для "наладонников" и для вывода на печать.
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 237
Файл листа стилей будет, разумеется, внешним. Примеры, рассмотренные
выше в этой главе, снабжались внутренними листами стилей в основном в
целях экономии бумаги. К тому же, для единственной страницы совершенно
все равно, внедренным или связанным является лист стилей. Совсем другое
дело — сайт, состоящий из множества страниц.
Для связи листа стилей с XHTML-документами мы будем использовать ди-
рективу @import. Хотя, как мы уже говорили, она является менее универсаль-
ным средством, нежели тег <iink>, в нашем случае ее использование более
предпочтительно из тех соображений, что лист стилей "увидят” только те
браузеры, которые более-менее адекватно понимают CSS2. Остальные поль-
зовательские агенты будут интерпретировать страницу так, будто бы никако-
го листа стилей и нет вовсе. И это не плохо, а наоборот хорошо — вместо то-
го, чтобы демонстрировать результаты интерпретации с горем пополам обра-
ботанного CSS-кода, старые браузеры будут отображать нашу страницу с
"академическим” оформлением по умолчанию, словно в эпоху HTML 2.0.
Впрочем, процент подобных браузеров мал. Страницы сайта будут показы-
ваться исправно, со всем сопутствующим оформлением, во всех сколько-
либо распространенных сегодня графических браузерах— в частности, IE5,
IE6, Opera 5—8, Firefox 1.
Хочется верить, что к настоящему моменту читателю известно уже почти все
о каскадных листах стилей. Поэтому я не буду "растекаться мыслью по дре-
ву", а сразу же приведу полный код нашего коронного листа стилей с необ-
ходимыми комментариями прямо внутри.
| Листинг 4.23. Лист стилей для завершенного сайта с комментариями
/★ Правила для экранной версии представления данных ★/
@media screen {
/* Общие установки для страницы */
html, body {
margin: Орх;
padding: Орх;
border: Орх;
}
body {
color: #000;
background: #999 url(images/bg_page.gif) scroll;
font-family: Georgia, "Times New Roman", Times, serif;
}
/* "Подложка" для всей страницы */
#carrier {
238
Часть II. Применение веб-технологий стороны клиента для создания сайтов
width: 100%;
background: #fff;
}
/* Шрифт для ’’шапки”, меню навигации, заголовков второго
уровня в основном тексте и "подвала” */
tfheader, #menu, #text h2, #footer {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
/* Общие правила оформления "шапки” и ’’подвала” ★/
ftheader, tffooter р {
color: #fff;
background: #369;
padding: Юрх 2 Opx;
margin: Opx;
}
/★ Представление "шапки" ★/
#header {
font-size: 250%;
border-bottom: solid 5px #69c;
}
/★ На внутренних страницах сайта титульная надпись в "шапке"
выступает в качестве ссылки на главную страницу. Для этой
ссылки задаются такие правила, чтобы она визуально была
неотличима от заголовка без ссылки ★/
#header a: link, #header a .-visited, #header a: hover, #header a: active {
color: #fff;
text-decoration: none;
}
/★ "Подложка” для навигационного меню. Ширина области навигации
постоянна во всех браузерах и составляет 200 пикселов ★/
#menucarrier
{
width: 20Opx;
margin-bottom: 20рх;
float: left;
background: #fff0cc url(images/bg__menu.gif) center repeat-у scroll;
}
/★ Собственно блок навигации ★/
#menu {
font-size: 18px;
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 239
text-align: center;
padding: Юрх 2Opx;
border-style: none dotted dotted none;
border-width: Opx 2px 2px Opx;
border-color: #c00;
}
/* Хитрые игры co свойствами margin и padding имеют целью
полную совместимость с IE5. Блок навигации отображается в IE5
так же, как и в более современных браузерах. ’’Кнопки”
навигационного меню расположены на расстоянии 20 пикселов
друг от друга и от границ навигационного блока по вертикали */
#menu р {
padding: Юрх Орх;
margin: Орх;
}
/* При помощи свойства display мы превращаем гиперссылки и
контейнер <span>...</span>, размещенные в блоке навигации, из
внутристрочных элементов в блочные, что дает нам возможность
указать ширину при помощи свойства width */
#menu a, #menu span
{
display: block;
width: 154px;
margin: auto;
}
/* Далее следуют правила представления "кнопок" навигационного меню.
Их четыре вида: 1) обыкновенные; 2) выделенные при помощи курсора
мыши; 3) соответствующие текущему "магистральному" разделу и
предназначенные для его внутренних страниц - для таких "кнопок"
назначен класс current; 4) соответствующие текущей
странице и поэтому не являющиеся ссылками - этот вид "кнопок"
представлен элементами <span>...</span> */
#menu а {
color: #000;
text-decoration: none;
}
#menu a:link, #menu a:visited {
background: #fff0cc;
border: solid 2px #fc9;
240
Часть II. Применение веб-технологий стороны клиента для создания сайтов
#menu a:hover, #menu a:active, #menu a.current:link,
*b#menu a.current:visited, #menu span {
border-style: solid dotted;
border-width: 2px;
border-color: #c00;
}
#menu a.current:link, #menu a.current:visited, #menu span {
background: #fff;
}
#menu span
{
color: #999;
}
#menu a.current:hover, #menu a.current:active {
background: #fffOcc;
}
/* Дальнейшие правила определяют оформление элементов области
основного текстового содержания страницы */
#text {
margin-left: 200рх;
padding: 2 Орх;
}
#text h2 {
font-size: 120%;
font-weight: normal;
text-transform: uppercase;
color: #369;
}
/* Псевдокласс first-child указывает на первый вложенный
в блок #text заголовок <h2>...</h2>. Для таких заголовков
верхний вертикальный отступ устанавливается равным нулю.
Впрочем, Internet Explorer не понимает этого псевдокласса,
так что в браузере от Microsoft первый заголовок области
основного текста будет расположен заметно дальше от
"шапки", нежели в браузерах, относящихся к рекомендациям
W3C более уважительно */
#text h2:first-child {
margin-top: Opx;
}
/* Абзацы основного текста оформляются в соответствии
с традициями русскоязычного текстового набора */
#text р {
text-align: justify;
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 241
text-indent: 1.5em;
margin: Opx;
}
/* Класс абзацев, предназначенный для новостей сайта */
#text p.news {
text-align: left;
text-indent: Opt;
margin-top: .5em;
margin-bottom: .5em;
}
/* Класс, позволяющий выделять полужирным начертанием
даты свежих обновлений сайта */
.date {
font-weight: bold;
}
/* Представление нумерованных и маркированных списков
в основном тексте ★/
#text ul, text ol {
margin-top: Opx;
margin-bottom: Opx;
}
#text ul {
list-style-type: square;
}
/* Оформление ссыпок в основном тексте ★/
#text а {
text-decoration: none;
}
#text a-.link {
color: #f60;
}
#text a:visited
{
color: #999;
}
#text a:hover {
text-decoration: underline;
}
#text a:active {
color: #f00;
}
242 Часть II. Применение веб-технологий стороны клиента для создания сайтов
/★ Правила, определяющие представление "подвала" и содержащихся в нем
элементов - абзацев и гипертекстовых ссылок */
#footer {
width: 100%;
clear: both;
}
#footer p {
font-size: 70%; border-top: solid 5px #69c;
}
ftfooter a:link, #footer a:visited, #footer a:hover, ftfooter a:active {
color: #fff;
text-decoration: underline;
/* Правила, определяющие версию представления данных для карманных
компьютеров. Никак не взаимосвязаны с правилами, определенными
для экранной версии представления. Перечисленные ниже конструкции
очень простые, комментировать здесь почти нечего. Все блоки
позиционированы согласно простейшей схеме static и следуют
друг за другом в нормальном потоке. Размер шрифта для всего
текста страницы задан в пикселах: 16 пикселов для заголовков
первого уровня, 14 - для заголовков второго уровня и 12 - для
всех остальных элементов */
@media handheld {
html, body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
font: 12px Tahoma, Arial, Helvetica, sans-serif;
color: #000;
background: #fff;
}
#header, #menucarrier, #text, #footer {
padding: 5px;
}
#header, #footer {
background: #ccc;
}
#header (
font-size: 16px;
margin: Opx;
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 243
#menucarrier {
background: #fffOcc;
border-top: solid lpx #666;
border-bottom: solid lpx #666;
}
#footer {
border-top: solid lpx #666;
}
h2, p {
margin: 5px Opx;
}
#text h2
{
font-size: 14px;
}
ul {
list-style: square inside;
margin: 5px;
padding: Opx;
}
li {
margin: Opx;
padding: Opx;
}
a:link {
color: #00f;
}
a .-visited {
color: #609;
/* Правила для печатной версии представления данных.
Этот фрагмент листа стилей еще проще. При помощи свойства
display со значением попе мы скрываем все элементы, не
требующиеся в печатной версии - "шапку", блок навигации
и "подвал". Остается только область основного текста.
Используем рубленый шрифт кегля 16 пунктов для заголовков,
антикву кегля 12 пунктов для всего остального. Всему
тексту, включая гиперссылки, назначаем черный цвет. */
@media print {
body {
color: #000;
244
Часть II. Применение веб-технологий стороны клиента для создания сайтов
font: 12pt "Times New Roman", Times, serif;
}
#header, #menucarrier, ttfooter {
display: none;
}
#text h2 {
font: 16pt Arial, Helvetica, sans-serif;
}
Hext a {
color: #000;
text-decoration: none;
}
Типы страниц
Наш сайт включает в себя три вида страниц. Это главная страница; страницы
оглавлений "магистральных" разделов; и, наконец, страницы третьего уровня
вложенности, т. е. внутренние страницы разделов.
Перечисленные категории документов отличаются друг от друга, во-первых,
структурой содержания элемента <titie>.. .</titie>, во-вторых, тем, что ти-
тульная надпись в "шапке" всякой страницы, за исключением главной, явля-
ется ссылкой на последнюю, и в-третьих, устройством навигационного блока.
HTML-разметка гораздо проще кода листа стилей, поэтому мы приведем лис-
тинги, отражающие все три вида страниц. Комментировать ничего не буду —
предлагаю провести самостоятельный анализ. Почти как в игре "найдите
10 отличий".
[ Листинг 4.24. Код главной страницы сайта
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
'Ъ "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>CaiiT о сайтах: концепции, технологии, нюансы
Be6-pa3pa6oTKH</title>
<style type="text/css">
<! —
@import url(style.css);
Гпава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 245
</style>
</head>
<body>
<div id="carrier">
<hl id="header">Сайт о сайтах</Ы>
<div id="menucarrier">
<div id="menu">
<p><a href="concept/index.html">Концепции</a></p>
<p><a href="tech/index.html">TextK>norHH</a></p>
<p><a href ="nuances/index, html ">Нюансы</ах/р>
<p><a href="aboutI index.html">0 проекте</a></p>
<p><a href="map/index.html">KapTa сайта</a></p>
</div>
</div>
<div id="text">
<h2Создавайте правильные сайты!</h2>
<р>Мы призываем всех веб-разработчиков помнить, что
создание сайтов — это нелегкий труд, требующий
аккуратности и ответственности, глубокого знания многих
принципов и <а href="concept/index.html">концепций</а>,
уважительного отношения к <а href="tech/index.html">технологическим
стандартам</а>, учета бесчисленного множества <а
href="nuances/index.html">нюансов</а>. Этот проект ставит своей
целью популяризацию грамотной веб-разработки в Рунете.</р>
<Н2>Последние обновления</Ь2>
<р class="news"><span class="date">30.03.2005.</span> В разделе
<а href="tech/index.html">«Технологии&гaquo;</а> открыта
страница, посвященная <а href="tech/css.html">каскадным листам
стилей CSS</a>.</p>
<р class="news"Xspan class="date">28.03.2005.</span> Открыт
раздел <а href="nuances/index.html">«HioaHCbi»</а>,
посвященный правилам хорошего тона, принятым в веб-разработке,
грамотным подходам к использованию веб-технологий.</р>
<р class="news"Xspan class="date">25.03.2005.</span> Сайт введен
в эксплуатацию. Приглашаем практикующих веб-разработчиков,
которым не все равно, как будет развиваться Рунет, к
сотрудничеству.</р>
</div>
<div id="footer">
<р>&сору; <a href="http://www.lomov.ги/">Артемий Ломов</а>,
2005.<br />Пишите письма: <a
246 Часть II. Применение веб-технологий стороны клиента для создания сайтов
href="mailto:artemy@lomov.ru">artemy@lomov.ru</a>.</p>
</div>
</div>
</body>
</html>
i Листинг 4.25. Код страницы второго уровня (tech/index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www,w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd”>
<html xmlns="http://www,w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<1111е>Технологии - Сайт о canTax</title>
<style type="text/css">
<! —
@import url(../style.css);
</style>
</head>
<body>
<div id="carrier">
<hl id="header"Xa href="../index.html">Сайт о сайтах</аХ/И1>
<div id="menucarrier">
<div id="menu">
<p><a href=" . . /concept/index, html ">Концепции</ах/р>
<рХзрап>Технологии< / spanx /р>
<p><a href=". . /nuances/index, html ">Нюансы</ах/р>
<p><a href="../about/index.html">0 npoeKTe</a></p>
<p><a href=" . ./тар/index. html">KapTa сайта</ах/р>
</div>
</div>
<div id="text">
</div>
<div id="footer">
... , r
</div>
</div>
</body>
</html>
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 247
= Листинг 4.26. Код страницы третьего уровня (tech/xhtml.htnnl) i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
'b "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang=”ru" xml:lang^"ru">
<head>
<title>Расширяемый язык разметки гипертекста
XHTML - Технологии - Сайт о сайтах</Ъ1Ъ1е>
<style type~"text/css">
<! --
@import url(../style.css);
</style>
</head>
<body>
<div id="carrier">
<hl id="header"><a href="../index.html">Сайт о сайтах</а></И1>
<div id="menucarrier">
<div id="menu">
<p><a href="../concept/index.html">Концепции</аХ/р>
<p><a href="index.html" class="current">TexHonornn</aX/p>
<p><a href=". ./nuances/index.html">HioaHCbi</ax/p>
<p><a href==". ./about/index.html">0&пЬзр;проекте</ах/р>
<p><a href="../map/index.html">KapTa сайта</ах/р>
</div>
</div>
<div id="text">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Относительные ссылки с использованием двух точек для обозначения
вышележащего каталога, фигурирующие в приведенных выше листингах, не
слишком удобны и в реальных проектах встречаются довольно редко. Обыч-
но используются URL, начинающиеся с символа и определяющие место-
248
Часть II. Применение веб-технологий стороны клиента для создания сайтов
нахождение той или иной страницы относительно корня документов веб-
сервера.
Преимущество ссылки вида <а href=”/index.. .</а> перед
<а href="../index.html">...</а> состоит в том, что первая указывает на
главную страницу сайта всегда, на какой бы сколь угодно глубоко запрятан-
ной странице такая ссылка не находилась. Вторая же ссылка подразумевает,
что индексная страница сайта расположена в родительском каталоге.
Тем не менее ссылки такого вот ’’непрофессионального” вида для нас сейчас
как нельзя кстати, ибо они обеспечивают безболезненный просмотр сайта на
локальной машине без использования веб-сервера.
Внешний вид главной страницы сайта демонстрирует рис. 4.27.
4 'Чли*'« саАтж концепции* гекйцтжинаижш оев-рййцлнйш
-Файл Ш Сор*»*»
О
3] О [S
getting Parted Q latest Headfoes
Сайт о сайтах
Концепции j
Технологии ; 5
Нюансы ;
О проекте I
Карта сайта j
СОЗДАВАЙТЕ ПРАВИЛЬНЫЕ САЙТЫ!
Мы призываем всех веб-разработчиков помнить, что создание сайтов — это нелегкий
труд, требующий аккуратности и ответственности, глубокого знания многих принципов
и концепций, уважительного отношения к технологическим стандартам, учета
бесчисленного множества нюансов. Этот проект ставит своей целью популяризацию
грамотной веб-разработки в Рунете.
ПОСЛЕДНИЕ ОБНОВЛЕНИЯ
30.03.2005. В разделе «Технологии» открыта страница, посвященная каскадным
•.•чта.м стилей CSS.
28.03.2005. Открыт раздел • Нюансы , посвященный правилам хорошего тона,
принятым в веб-разработке, грамотным подходам к использованию веб-технологий.
25.03.2005. Сайт введен в эксплуатацию. Приглашаем практикующих
веб-разработчиков, которым не все равно, как будет развиваться Рунет, к
сотрудничеству.
Рис. 4.27. Главная страница сайта
На рис. 4.28 представлена страница второго уровня — оглавление раздела
’’Технологии”. Обратите внимание на то, что кнопка с названием текущего
Глава 4. Использование блочной модели. CSS2 для верстки сложных веб-страниц 249
раздела в навигационном меню не является ссылкой, зато теперь ссылкой на
главную страницу стала титульная надпись в "шапке”.
5
Концепции 5 ТЕХНОЛОГИИ
: j Этот раздел включает в себя материалы,
Й.Г. : j затрагивающие актуальные на сегодняшний
; день веб-технологии стороны клиента,
Нюансы ? разрабатываемые Консорциумом W3C.
? Расширяемый язык разметки с г?ь-?та
? ХгГ="М1
О проекте ; я {{декадные листы стилей CSS
Карта сайта |
Рис. 4.28. Страница второго уровня
Страница третьего уровня, содержащая статью, посвященную языку XHTML,
показана на рис. 4.29. Кнопка с названием раздела ’’Технологии”, которому
принадлежит эта статья, вновь стала ссылкой. Ссылка ведет на страницу ог-
лавления раздела.
На рис. 4.30 представлен внешний вид главной страницы в режиме предвари-
тельного просмотра перед печатью, а рис. 4.31 демонстрирует, как будет вы-
глядеть эта страница при просмотре на экране карманного компьютера.
Пользователи браузеров, не поддерживающих CSS2 в полной мере, смогут,
тем не менее, без каких бы то ни было проблем ознакомиться с содержанием
сайта. Рис. 4.32 иллюстрирует, как будет отображаться главная страница на-
шего сайта-примера в Netscape 4.
250 Часть II. Применение веб-технологий стороны клиента для создания сайтов
JO
*| Пврейтн } С>„ J
Сайт о сайтах
Концепции
Технопоп.
Нюансь*
? РАСШИРЯЕМЫЙ ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА XHTML
На смену сложному и противоречивому SGML (Standard Generalized Markup
language) в качестве универсального стандарта для хранения любых
। структурированных данных приходит расширяемый язык разметки XML —
extensible Markup Language, отличающийся более строгими правилами. HTML 4 стал
- в определенном смысле «тупиковой веткой» — это последняя версия HTML,
онованная на SGML.
Развитием HTML 4 стал «расширяемый» (extensible) язык разметки
ипертекста — XHTML 1.0, по сути своей явившийся лишь переформулировкой
1 андарта HTML 4.01 в соответствии с правилами XML 1.0. XHTML 1.0, за
.... исключением ряда нюансов, в точности повторяет функциональность HTML 4.01 и
•J включает в себя предусмотренные последним три типа документов: Strict, Transitional
и Frameset.
XHTML 1.1, полностью упразднивший типы документов Transitional и Frameset и
утвердивший еще некоторые ощутимые нововведения, уже несколько дальше от
привычного HTML, но на практике пока используется довольно редко. XHTML 2.0
уходит в еще больший отрыв от совместимости с HTML — но эта версия пока еще
находится в работе и в разряд официальных рекомендаций W3C перейдет не так
скоро.
Рис. 4.29. Страница третьего уровня
Сайт о сайты: концепции, технологии, нюансы веб-разработки
file IIIZ /examples/04/23-26/index html
Создавайте правильные сайты!
Мы призываем всех веб-разработчиков помнить, что создание сайтов — это нелегкий труд,
требующий аккуратности и ответственности, глубокого знания многих принципов и
концепций, уважительного отношения к технологическим стандартам, учета бесчисленного
множества нюансов. Этот проект ставит своей целью популяризацию грамотной
веб-разработки в Рунете
Последние обновления
30 03.2005 В разделе «Технологии» открыта страница, посвященная каскадным листам
стилей CSS
28 03.2005. Открыт раздел «Нюансы», посвященный правилам хорошего тона, принятым в
веб-разработке, грамотным подходам к использованию веб-технологий
25.03.2005 Сайт введен в эксплуатацию Приглашаем-практикующих веб-разработчиков,
которым не все равно, как будет развиваться Рунет, к сотрудничеству
Рис. 4.30. Внешний вид главной страницы сайта
в режиме предварительного просмотра перед печатью
E- В>ая® Переход #
ПЛЗ С
’ £sttbg Started Ц4 Latest Headfe^as
Сайто сайтах
Ш С •' :• МИ
3
I Создавайте правильные сайты!
Мы призываем всех веб-разработчиков
। помнить, что создание сайтов — это
f нелегкий труд, требующий аккуратности и
£ ответственности, глубокого знания многих
| принципов и концепций, уважительного
i отношения к технологическим стандартам,
| учета бесчисленного множества нюансов.
« Этот проект ставит своей целью
| популяризацию грамотной веб-разработки в
| Рунете.
5 Последние обновления
| 30.03.2005. В разделе «Технологии»
| открыта страница, посвященная каскадным
| листам стилей CSS.
28.03.2005. Открыт раздел «Ноансьв-,
f посвященный правилам хорошего тона,
| принятым в веб-разработке, грамотным
? подходам к использованию веб-технологий.
I 25.03.2005. Сайт введен в эксплуатацию.
| Приглашаем практикующих
I веб-разработчиков, которым не все равно,
> как будет развиваться Рунет, к
5 сотрудничеству.
С* 12005.
ГИвите письма:
ЕГ----------------------—---- :>>>-
ишшйеж. ла*
Правка Бил Переход крявонеты Crm*______ _____ _________ ___________
ISM
j] Обновит» Домой Поиск Обзор , Печать Защита Сшл яЯш
sj WF* Закладки Jfa Aspeccpde //ZZl/exanx^s/04/23-28/ndex htrni yj
.... ...
Сайт о сайтах
Концепции
Т ехясдотии
; Нюансы
: О проекте
Карта сайга
Создавайте правильные сайты!
Мы призываем всех веб-разработчиков помнить, что создание сайтов — это нелегкий
труд требующий аккуратности и ответственности, птубокого знания многих принципов и
; кснпепша^, уважительного отношения к технологическим стандартам. учета бесчисленного
множества нюансов. Этот проект ставит своей целью популяризацию грамотной веб-разработки
в Рунете.
Последние обновления
< 30.03.2005. В разделе «T^SHj?npjTag> открыта страница, посвященная каскадным пигтам стилей
28.03 2005. Открыт раздел «Нюансы», посвященный правилам хорошего тона, принятым в
i веб-разработке, грамотным подходам к использованию веб-технологий.
: 25 03 2005 Сайт введен в эксплуатацию. Приглашаем практикующих веб-разработчиков,
: которым не все равно, как будет развиваться Рунет, к сотрудничеству.
; © Артемий Ломов. 2005.
Пишите письма: jgiemyffiomov iu.
Ж Ж. А
Рис. 4.31. Версия представления данных,
адаптированная для просмотра на карманных компьютерах
Рис. 4.32. Так отобразится главная страница сайта в Netscape 4,
не поддерживающем CSS2 в полной достаточной мере
Гпава 4. Использование блочной модели. CSS2 для верстки сложных веб-страниц 251
252 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Примеры к этой главе,
размещенные на компакт-диске
Полностью работоспособную версию сайта, описанного в данном разделе,
можно найти на компакт-диске, прилагаемом к этой книге, в каталоге
\examples\04\23-26. Напомню, что для вашего удобства папки на компакт-
диске названы в точном соответствии с номерами листингов, фигурирующих
на страницах книги.
Разумеется, примеры, рассмотренные в листингах 4.1—4.22, также отражены
на компакт-диске. Скажем, материалы, относящиеся к примеру, описанному
в листинге 4.7, следует искать в каталоге \examples\04\07.
Воспользовавшись электронным оглавлением, содержащимся в файле
\index.html, вы найдете все примеры максимально быстро.
ГЛАВА 5
Таблицы в HTML
Встроенные в HTML средства, предназначенные для организации контента в
табличном виде, вызывают, судя по многочисленным дискуссиям в профиль-
ных сетевых сообществах, весьма неоднозначные мнения на свой счет как у
новичков, так и, зачастую, у HTML-кодеров, уже имеющих за плечами какой-
никакой опыт.
Одна из основных причин этого явления — экстраполяция некоторыми увле-
ченными головами звучащих тут и там призывов к отказу от верстки шабло-
нов страниц посредством таблиц на табличную модель как таковую.
Бросаться в крайности и сваливать все в одну кучу, однако, не следует. Таб-
лицы, встроенные в HTML— весьма нужный и полезный инструмент, и о
том, чтобы жертвовать им в пользу сомнительных идеалов, не может быть и
речи. Впрочем, обо всем по порядку...
Для чего нужны таблицы
и почему об этом нужно говорить особо?
Очевидно, далеко не все данные выгодно представлять в виде последователь-
ных текстовых блоков.
Иногда приходится размещать на веб-страницах такую информацию, как, на-
пример, прайс-листы, разнообразные ведомости или отчеты, какая бы то ни
было статистика, данные справочного характера, календари и т. п., где тем
или иным порциям данных ставятся в соответствие другие информационные
блоки.
Иными словами, речь идет о тех данных, которые органически, по природе
своей организованы в табличной форме; и которые мы без тени сомнения
изобразим на бумаге именно в виде таблицы и никак иначе.
254 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Собственно говоря, таблицы в HTML изначально были предусмотрены как
раз для разметки таких вот массивов данных. Конечно, всякий контент можно
организовать последовательно, линейно, но для вышеупомянутых примеров
простейшая организация из всех возможных малоэффективна, поскольку не
обеспечивает должной наглядности и при этом сопряжена с излишней гро-
моздкостью.
Все сказанное, казалось бы, совершенно прозрачно для любого школьника.
Однако во второй половине 1990-х, почти одновременно с появлением под-
держки таблиц в распространенных в ту пору браузерах, возникла, как уже
говорилось в главе 2, логически несостоятельная, но сообразная духу времени
мода верстать шаблоны веб-страниц, заключая вообще весь их контент в таб-
личные ячейки.
Тогда, в 90-е годы, на фоне полного отсутствия механизмов, аналогичных по
функциональности каскадным листам стилей, с одной стороны, и под влия-
нием диктуемой рынком потребностей по созданию многоколонных страниц,
похожих на полосы печатных изданий, с другой, для достижения требуемого
облика веб-страниц разработчикам приходилось использовать вложенные
таблицы, невидимые графические распорки и бесчисленное множество визу-
альных атрибутов HTML, не допускающихся к использованию нынешними
спецификациями HTML 4.01 Strict и XHTML 1.0 Strict, не говоря уже о более
поздних версиях языка XHTML.
Традиция эта, несмотря на вполне приемлемую поддержку CSS2 всеми со-
временными браузерами, живет и процветает поныне.
За несколько лет техника табличной верстки была отточена до мельчайших
деталей— и чисто по-человечески вполне понятно, что для веб-разработ-
чиков старой закалки, в совершенстве постигших все возможные и невоз-
можные ее нюансы, одна только мысль о том, что нужно расстаться с накоп-
ленным за долгие годы опытом и стать опять новичком, становится сокруши-
тельным ударом по самолюбию и зачастую почти непреодолимым
психологическим барьером.
Тому есть, однако, и более глубинные причины, нежели просто сила привыч-
ки. Мы проведем сравнительный анализ двух противоборствующих подходов
к верстке веб-страниц в конце этой главы, когда познакомимся с техникой
создания таблиц более-менее полно.
Но само по себе это знакомство жизненно'необходимо, ибо даже если чита-
телю никогда не придется верстать какую бы то ни было страницу при помо-
щи таблиц (а в этом я, честно говоря, пока еще сомневаюсь). Сами по себе
таблицы не противоречат ни здравому смыслу, ни рекомендациям W3C, если
они используются по назначению, т. е. для структурирования данных, орга-
Гпава 5. Таблицы в HTML
255
низованных подобающим образом, а их оформление определяется при помо-
щи CSS без применения визуальных атрибутов HTML.
Таблицы и блочная модель CSS — это не взаимоисключающие, а взаимодо-
полняющие инструменты, каждый из которых служит своим определенным
целям.
Создание простой "правильной" таблицы
Для описания таблиц в HTML используется три основных тега— <tabie>,
<tr> и <td>. Каждый из них определяет элемент-контейнер, поэтому все пере-
численные теги являются парными.
Тег <tabie> определяет собственно таблицу; тег <tr> отвечает за формирова-
ние ее строк; и, наконец, тег <td> описывает ячейки таблицы.
Таблицы в HTML надлежит описывать построчно: каждая строка таблицы
(элемент <tr>.. .</tr>) может содержать в себе одну или несколько ячеек.
представленных элементами <td>.. .</td>.
Проще всего при помощи HTML реализовать описание правильной табли-
цы — т. е. такой, которая содержит постоянное количество ячеек во всех
строках и неизменное число ячеек во всех столбцах.
Нижеследующий пример демонстрирует, как при помощи HTML можно ор-
ганизовать в виде таблицы данные переписи населения 2002 г. о численности
жителей в крупнейших городах России.
I Листинг 5.1, Правильная таблица
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml” lang="ru" xml:lang="ru">
<head>
<ti Неправильная таблица</Ш1е>
</head>
<body>
<table>
<tr>
<td>ropofl</td>
<^>Население, тыс. чел. </td>
</tr>
256
Часть II. Применение веб-технологий стороны клиента для создания сайтов
<tr>
<td>MocKBa</td>
<td>10 383</td>
</tr>
<tr>
<td>CaHKT-neTep6ypr</td>
<td>4 661</td>
</tr>
<tr>
<td>HoaocH6npcK</td>
<td>l 426</td>
</tr>
</table>
</body>
</html>
На рис. 5.1 представлен внешний вид документа, содержащего простейшую
таблицу, описанную в листинге 5.1.
Рис. 5.1. Простейшая таблица, реализованная средствами HTML
Структура этого документа, полагаю, совершенно прозрачна. Первая строка,
содержащая ячейки со словами "Город" и "Население, тыс. чел." являет собой
"шапку" таблицы (хотя на уровне семантики кода этот факт никак не под-
черкнут; об этом поговорим чуть ниже). Каждая следующая строка содержит
пары сопоставленных друг с другом значений: название города— числен-
ность населения.
Гпава 5. Таблицы в HTML
257
Оформление таблиц
Внешний вид таблицы, сформированной в результате обработки браузером
кода, приведенного в листинге 5.1, скажем прямо, скучноват.
Многие читатели уже вполне закономерно догадываются, что придать табли-
це тот или иной внешний облик можно при помощи CSS. Причем для этих
целей подойдут многие из тех визуальных CSS-свойств, что уже были нами
рассмотрены В главах 3 U 7, например, font, color, background, border, padding
И т. д.
Оформление для каждой ячейки в отдельности можно определить, восполь-
зовавшись атрибутами style, class или id— словом, ничего из ряда вон вы-
ходящего таблицы в себе не таят.
В то же время CSS предоставляет веб-разработчикам ряд особых свойств,
применимых исключительно к таблицам и их ячейкам.
Так, свойство border-collapse определяет, по какому принципу будут стро-
иться рамки вокруг ячеек таблиц.
Значение collapse задает модель отображения таблицы с общей сеткой яче-
ек— иными словами, рамки ячеек будут перекрываться. Напротив, значение
separate предписывает использовать модель форматирования, предполагаю-
щую наличие индивидуальных раздельных рамок у каждой ячейки.
В последующих фрагментах кода приводятся примеры листов стилей для
оформления таблицы, описанной в листинге 5.1, в соответствии с двумя раз-
личными моделями форматирования.
£....................................................:.............!
; Листинг 5,2» Лист стилей для таблицы с общей сеткой ячеек
table {
border-collapse: collapse;
}
td {
border: solid Ipx #c00;
}
Внешний вид таблицы, использующей вышеприведенный лист стилей, про-
иллюстрирован на рис. 5.2.
। Листинг Лист стилей для таблицы с индивидуальными рамками для ячеек |
table {
border-collapse: separate;
}
258
Часть II. Применение веб-технологий стороны клиента для создания сайтов
td {
border: solid lpx #c00;
}
) таблиц с аШей сеткой яче
(§1 t*j) о перейти |jcit
^tt^Statfed ©Latest неАе$ ' s '
Город Население, тыс. чел.
Москва 10 383
Санкт-Петербург 4 661
Новосибирск 1 426
Рис. 5.2. Отображение таблицы, к которой применен лист стилей,
описанный в листинге 5.2
Результат интерпретации видоизмененного листа стилей представлен на
рис. 5.3.
^струмйты справка
<ф * @ |й^1е Э ® Перейти р©
9* (з®Шп$ Stated © Latest He®>tf&
Город ((Население, тыс. чел.
| [Москва 110 383
Санкг-Петербург(|4 661
! [Новосибирск ] 1 426
Рис. 5.3. Отображение таблицы, оформленной при помощи листа стилей
из листинга 5.3
Гпава 5. Таблицы в HTML
259
В случае использования модели форматирования с раздельными рамками для
всех ячеек таблицы свойство border-spacing позволяет нам контролировать
расстояния между ее ячейками. В качестве значения этого свойства может
выступать одна или две величины, заданные с использованием линейных
единиц измерения. В том случае, когда определена одна подобная величина,
она определяет расстояния между ячейками как по горизонтали, так и по вер-
тикали, которые при этом одинаковы. Если же аргумента два, то первый при-
меняется к горизонтальным расстояниям, а второй — к вертикальным.
К сожалению, Internet Explorer полностью игнорирует данное свойство.
Наш следующий пример немного сложнее рассмотренных выше — мы на-
значаем толстую рамку для всей таблицы в целом, ячейки заключаем в тон-
кие рамки, заливаем их фоновым цветом и определяем величину полей во-
круг содержимого, а в довершение ко всему определяем расстояния между
ячейками по горизонтали и вертикали.
| Листинг 5А Лист стилей, определяющий более сложное оформление таблицы |
table {
border-collapse: separate;
border: solid 2px #c00;
border-spacing: 5px lOpx;
}
td {
padding: Opx 5px;
border: solid Ipx #c00;
background: tffffOcc;
Отображение таблицы, описанной в листинге 5.4, браузером Mozilla
Firefox 1.0, исправно поддерживающим свойство border-spacing, и браузером
Microsoft Internet Explorer 6.0, игнорирующим означенное свойство, проил-
люстрировано на рис. 5.4.
Еще одно полезное свойство, тоже, увы, не поддерживаемое браузером от
Microsoft, — empty-cell. Оно применяется при использовании раздельной
модели форматирования ячеек и определяет, будет ли отображаться рамка
вокруг пустой ячейки, не содержащей полезной информации (значение show
должно использоваться по умолчанию) или же не будет (значение hide). Ис-
пользование свойства empty-cell демонстрирует рис. 5.5.
Мораль — пустые ячейки при похожем раскладе желательно заполнять (про-
черками, неразрывными пробелами или другими подходящими по случаю
символами).
260
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Рис. 5.4. Отображение таблицы из листинга 5.4 браузерами Mozilla Firefox 1.0
и Microsoft Internet Explorer 6.0
Файл SWfBKft nswwi ^кладки йягруивигы Сораекй
ф Settop Started
I Город ~ Насепение. тыс. чей. ]
! Мост® а |
। Санкт-Петербург 4 661 ]
| Новосибирск 1 426 |
I Город ^Население, тыс. челГ]
; Москва_______
I Санкт-Петербург [4 661________J
| Новосибирск[ 1 426 J
Рис. 5.5. Отображение таблицы, содержащей пустую ячейку и использующей лист стилей,
описанный в листинге 5.4, в Firefox и IE
Сложные таблицы с объединением ячеек
Таблицы правильной структуры на практике встречаются относительно ред-
ко. Зачастую бывает необходимо растянуть те или иные ячейки на несколько
строк или столбцов.
Гпава 5. Таблицы в HTML
261
Для этих целей в HTML предусмотрены атрибуты rowspan и coispan, приме-
нимые к тегам, определяющим ячейки таблицы (<td> и <th>; о последнем теге
будет сказано чуть ниже). Значением атрибута rowspan выступает число
строк, на которые растягивается данная ячейка вниз по вертикали, начиная со
своего "законного", предопределенного разметкой положения. Значением ат-
рибута coispan служит, соответственно, количество столбцов, на которые
данная ячейка растягивается вправо по горизонтали. Одна и та же ячейка таб-
лицы может быть растянута как в вертикальном, так и в горизонтальном на-
правлениях.
Необходимо только следить за тем, чтобы в разметке тех строк, на которые
распространяет свое влияние растянутая ячейка, было определено правиль-
ное число ячеек.
Например, если мы растягиваем какую бы то ни было ячейку на две строки
по вертикали, то ячейки в следующей строке под влиянием "внешнего втор-
жения" будут вытесняться вправо. Поэтому общее количество ячеек в строке,
на которую распространяет влияние растянутая по вертикали ячейка, фор-
мально принадлежащая другой, расположенной выше строке, должно умень-
шиться на единицу по сравнению со случаем правильной таблицы.
Сказанное демонстрируется следующим примером.
I Листинг 5.5» Таблица с объединением ячеек . J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>06beflHHeHne 44eeK</title>
<style type="text/css">
<! —
table {
border-collapse: collapse;
border: solid 2px #cOO;
}
tr {
vertical-align: top;
}
td {
padding: Opx 5px;
border: solid lpx #cOO;
background: #fffOcc;
262
Часть II. Применение веб-технологий стороны клиента для создания сайтов
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">TexHCJiornn</td>
<td>rofl утверждения в качестве рекомендации W3C</td>
</tr>
<tr>
<td rowspan="4">H3MKH разметки</ЪЬ>
<td>HTML 4.01</td>
<td>1999</td>
</tr>
<tr>
<td>XHTML 1.0</td>
<td>2000</td>
</tr>
<tr>
<td>XHTML 1.l</td>
<td>2001</td>
</tr>
<tr>
<td>XHTML 2.0</td>
<ЬЬ>Обладает статусом Working Draft</td>
</tr>
<tr> I
<td rowspan="2”>KacKalUHbie листы CTmieft:</td>
<td>CSS2</td>
<td>1998</td>
</tr>
<tr>
<td>CSS2.l</td>
<^Ь>Обладает статусом Candidate Recommendation</td>
</tr>
</table>
</body>
</html>
Внешний вид таблицы, описанной в листинге 5.5, представлен на рис. 5.6.
Гпава 5. Таблицы в HTML
263
\ ячеек * MuZtfh Firefox
J* 0^ I L F»le:///Z:/exarnples/OS/OS/index. html 4|IgL
^£etmg Start ad U&stHeadfcsw ' ' ; •
Технологии. Языки разметки HTML 4.01 ximiL i.o Год утверждения в качестве рекомендации W3C 1999 2000
xhtml 1.1 XHTNIL 2.6 2001 Обладает статусом Walking Draft
Каскадные .аисты стилей CSS2 1998
CSS2.1 Обладает статусом Candidate Reconunendation
Рис. 5.6. Отображение таблицы, использующей возможности объединения ячеек
Очевидно, в этой таблице три столбца. Но ячейка со словом "Технологии" в
первой строке растянута на два столбца, поэтому в первой строке определено
две ячейки, а не три.
Первая ячейка второй строки, содержащая надпись "Языки разметки", растя-
нута по вертикали на четыре строки. Поэтому в трех нижеследующих строках
опять же по две, а не по три ячейки. Аналогичный случай наблюдается и в
ситуации с первой ячейкой шестой строки, содержащей слова "Каскадные
листы стилей” — она растянута на две строки, и оттого в седьмой строке сно-
ва не три, а две ячейки. Если в той или иной строке окажется лишняя ячейка,
то самая правая ячейка такой строки будет отображаться за пределами таб-
лицы.
В вышеприведенном коде встречается CSS-свойство verticai-aiign. Его
употребление со значением top предписывает браузеру выровнять содержи-
мое ячеек таблицы по их верхнему краю. В модели визуального форматиро-
вания блоков данное свойство работает несколько иначе, в связи с чем ис-
пользуется на практике значительно реже.
Заголовки таблиц, заголовочные ячейки,
группировка столбцов и строк
Помимо тегов <tabie>, <tr> и <td>, HTML предусматривает ряд других, более
специальных и поэтому реже используемых на практике элементов, предна-
значенных для структурирования данных в таблицах.
Таблице может быть назначен заголовок при помощи тега <caption>, который
полагается помещать сразу же после открывающего тега <tabie>.
264
Часть II. Применение веб-технологий стороны клиента для создания сайтов
По умолчанию этот заголовок располагается сверху от таблицы и выровнен
по центру. Для изменения положения заголовка относительно таблицы мож-
но использовать CSS-свойство caption-side с допустимыми значениями top,
bottom, left и right, предписывающими располагать содержимое заголовка
таблицы соответственно сверху, снизу, слева или справа от последней. Из тех
браузеров, которыми мне доводилось пользоваться, данное свойство поддер-
живает лишь Firefox, но даже IE не мешает нам применять для элемента <сар-
tion>. . .</caption> такие свойства, как, скажем, text-align или margin, что
позволяет разнообразить оформление и— хотя бы в ограниченных пре-
делах — расположение заголовка, пускай бы даже его нельзя было "оторвать"
от верхнего края таблицы...
В ряде случаев (например, в "шапке" таблицы) предпочтительнее вместо тега
<td> использовать тег <th>, который определяет не рядовую, а заголовочную
ячейку. Графические браузеры по умолчанию выравнивают содержимое по-
добных ячеек по центру и применяют к содержащемуся в них тексту полу-
жирное начертание. Эти параметры, разумеется, можно переопределить при
помощи CSS — но здесь важен не столько внешний вид, сколько семантика.
Помимо всего перечисленного, HTML предусматривает возможность опреде-
лять те или иные параметры для отдельных столбцов и для групп столбцов
таблицы.
Для этих целей предназначены теги <со1> и <coigroup>. Они должны разме-
щаться в самом начале описания таблицы, но после элемента
<caption>...</caption>.
Нижеследующий пример позволяет установить для первого столбца таблицы
(вне зависимости от их общего количества) ширину 25% от горизонтального
размера всей таблицы и желтоватый цвет фона, а для второго — ширину 35%
и голубоватый фоновый цвет:
<col style=”width: 25%; background: #fffOcc" />
<col style=”width: 35%; background: #ccfOff” />
Предположим теперь, что мы хотим три первых столбца таблицы залить жел-
товатым фоном и сделать одинаковыми по ширине. В этом случае надлежит
использовать тег <со1> с атрибутом span, содержащим количество столбцов,
для которых применяются те или иные свойства:
<col span=”3” style=”width: 25%; background-color: #fffOcc” />
А теперь допустим, что за этим тегом следует такая конструкция:
<col style=”width: 25%; background: #ccfOff” />
Свойства, заданные в значении атрибута style, будут в таком случае приме-
няться к четвертому столбцу таблицы.
Гпава 5. Таблицы в HTML 265
Тег <coigroup> преследует, прежде всего, цели логического объединения тех
или иных столбцов. Если первые три столбца таблицы следует сгруппировать
из соображений логики, то вместо конструкции
<col span=’’3" style="width: 25%; background-color: #fffOcc” />
следует, по идее, использовать такую:
<colgroup span="3" style=”width: 25%; background-color:
#fffOcc"x/colgroup>
(в HTML 4 закрывающий тег не обязателен; XHTML допускает сокращение
ДО ccolgroup . . . />).
Internet Explorer, правда, внемлет ей лишь частично — свойство width в таких
случаях браузером от Microsoft по неизвестной причине игнорируется.
Внутри элемента <coigroup>.. .</coigroup> могут располагаться элементы
<со1>:
ccolgroup span="3” style=’’background-color: #fffOcc”>
<col style=”width: 10%” />
<col style=”width: 20%’’ />
<col style=”width: 30%’’ />
</colgroup>
Подобную конструкцию все распространенные графические браузеры, вклю-
чая IE, будут интерпретировать корректно.
Если в таблице определен хотя бы один элемент <coigroup>.. .</coigroup>, то
элементы <со1> не могут располагаться на одном уровне с ним — все такие
элементы должны быть заключены в контейнеры <coigroup>.. .</coigroup>,
иначе документ не будет признан соответствующим стандарту.
Нижеследующий пример демонстрирует использование тегов и CSS-свойств,
о которых шла речь в этом разделе.
[ Листинг 5*6* Сложная таблица с заголовком, заголовочными ячейками,
i группировкой столбцов и другими возможностями
<!DOCTYPE html PUBLIC ’’-//W3C//DTD XHTML 1.0 Strict//EN”
’Ъ ’’http: //www. w3. org/TR/xhtmll/DTD/xhtmll-strict. dtd”>
chtml xmlns=”http://www.w3.org/1999/xhtml” lang=’’ru" xml: lang=’’ru”>
<head>
<^^1е>Специальные возможности</1111е>
<style type=’’text/css’’>
ci-
table {
table-layout: fixed;
266
Часть II. Применение веб-технологий стороны клиента для создания сайтов
width: 60Opx;
border: solid 2рх #с00;
border-collapse: collapse;
caption-side: bottom;
}
caption {
font-style: italic;
text-align: right;
}
tr {
vertical-align: top;
}
td, th {
border: solid Ipx #c00;
padding: Opx 5px;
}
#tech {
background: #fffOcc;
width: 38%;
}
#year {
background: #ccfOff;
width: 24%;
</style>
</head>
<body>
<table>
<capt1оп>Современные веб-технологии</capt ion>
<col span="2" id=”tech” />
<col id=’’year” />
<tr>
<th со1зрап=”2”>Технологии</ЬЬ>
<th>rofl утверждения в качестве рекомендации W3C</th>
</tr>
<tr>
<td rowspan=”4”>£3biKH pasMeTKH</td>
<td>HTML 4.01</td>
<td>1999</td>
</tr>
Гпава 5. Таблицы в HTML 267
<tr>
<td>XHTML 1.0</td>
<td>2000</td>
</tr>
<tr>
<td>XHTML 1.l</td>
<td>2001</td>
</tr>
<tr>
<td>XHTML 2.0</td>
<td>(MnaflaeT статусом Working Draft</td>
</tr>
<tr>
<td rowspan="2">KacKaflHbie листы dwieii</td>
<td>CSS2</td>
<td>1998</td>
</tr>
<tr>
<td>CSS2.1</td>
<td>(MnaflaeT статусом Candidate Recommendation</td>
</tr>
</table>
</body>
</html>
На рис. 5.7 показано, как описанная в листинге 5.6 веб-страница будет ото-
бражаться браузером Mozilla Firefox, исправно поддерживающим свойство
caption-side. В Internet Explorer и Opera (даже восьмой версии) заголовок
таблицы будет сверху.
Все конструкции вышеприведенного кода читателю известны — мы до сих
пор ничего не сказали лишь о CSS-свойстве table-layout.
Это свойство позволяет задать один из двух возможных алгоритмов ренде-
ринга таблицы. Согласно сценарию, определяемому при помощи ключевого
слова auto (значение по умолчанию), ширина таблицы в целом и каждого из
столбцов по отдельности определяется в результате полного анализа всего
содержимого таблицы с учетом объема и специфики контента в каждой ячейке.
Значение fixed свойства table-layout, в свою очередь, назначает более быст-
рый (и предпочтительный в случае необходимости контроля ширины табли-
цы и ее столбцов с точностью до пиксела) алгоритм отображения таблицы, не
зависящий от особенностей содержимого ячеек, а принимающий в расчет
ЛИШЬ значения СВОЙСТВ, аналогичных width, border-width, border-spacing
268 Часть II. Применение веб-технологий стороны клиента для создания сайтов
и т. д. Если же эти свойства не заданы вообще или же определены для недос-
таточного количества элементов, то "отправной точкой" для работы описы-
ваемого алгоритма выступает итог обработки первой строки таблицы.
Прзт» Ш' Сшивка
latest Headlines
Технологии Языки разметки HTMLUul f XHTMLLO Х1ГГМ1’ 1.1 Год утверадешшв качестве рекомевдащш W3C ' W 2000 2001
j XHTML 2.0 Обладает статусом Working Draft
Каскадные листы сп шей CSS2 1Ж
jcssz.i 1 Обладает статусом Candidate Recommendation
Современные ееб-технопогии
Рис. 5.7. Отображение таблицы, использующей свойство caption-side,
браузером Mozilla Firefox
Примечание J
В случае если для той или иной таблицы определено свойство table-layout
со значением fixed, все распространенные браузеры будут отображать ее сра-
зу же, не дожидаясь полной загрузки. Разумеется, это дополнительный плюс
"фиксированного” алгоритма рендеринга.
Справедливости ради нужно заметить, что "правильные" браузеры — Opera и
Firefox— поступают так со всеми без исключения таблицами. И только Internet
Explorer начинает отрисовывать таблицы, для которых явно не определено
значение fixed свойства table-layout, после полной загрузки всех данных.
Несколько лет тому назад это было нормой — а теперь уже анахронизм. Но и
по сей день остаются в силе рекомендации, призывающие разбивать большие
таблицы на несколько маленьких для того, чтобы обеспечить визуальное впе-
чатление более скорой загрузки веб-страниц.
Гпава 5. Таблицы в HTML 269
Подобно тому, как теги <coi> и <colgroup> позволяют группировать столбцы
таблицы, теги <thead>, <tfoot> и <tbody> предназначены для группировки
строк. Эти теги описывают элементы-контейнеры, внутри которых должны
располагаться элементы <tr>.. .</tr>, определяющие разметку строк табли-
цы, составляющих соответственно ’’шапку”, ’’подвал” и основное содержание
последней.
Применение тегов <thead>, <tfoot> и <tbody> не является обязательным, но
если уж задумано их использование, то соответствующие элементы должны
определяться в HTML-разметке именно в такой последовательности.
Примечание
Пара элементов <thead>.. .</thead> и <tfoot>.. .</tfoot> может отсутство-
вать; элемент <tfoot>.. .</tfoot> сам по себе тоже может отсутствовать. Од-
нако ситуация, когда элемент <tfoot>.. .</tfoot> определен при отсутствую-
щем <thead>.. .</thead>, недопустима с точки зрения стандарта. Одна табли-
ца может содержать несколько элементов <tbody>.. .</tbody>.
Пример использования тегов, группирующих строки таблицы, представлен
ниже.
J Листинг 57. Таблица с использованием группировки строк
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
’Ъ "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="ru" xml:lang="ru">
<head>
<Ь1Ь1е>Группировка CTpoK</title>
<style type=”text/css”>
<! --
table {
border-collapse: collapse;
border: solid 2px #666;
}
caption {
font-style: italic;
}
td, th {
border: solid Ipx #999;
padding: Opx 5px;
}
#city-name {
width: 60%;
}
270
Часть ^Применение веб-технологий стороны клиента для создания сайтов
#population {
width: 40%;
}
thead {
font-size: 120%;
background: #ccc;
}
tfoot {
font-weight: bold;
background: #ccc;
}
#federal-cities {
background: #f0f0f0;
}
</style>
</head>
<body>
<table>
<сарЬ1оп>Пятерка крупнейших городов Poccnn</caption>
<col id=”city-name" />
<col id=”population” />
<thead>
<tr>
<th>ropofl</th>
<ЬЬ>Население, тыс.&пЬзр;чел.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>MToro</td>
<td>19 130</td>
</tr>
</tfoot>
ctbody id="federal-cities">
<tr>
<td>MocKBa</td>
<td>10 383</td>
</tr>
<tr>
<td>CaHKT-neTep6ypr</td>
<td>4 661</td>
</tr>
</tbody>
Гпава 5. Таблицы в HTML
271
<tbody>
<tr>
< Ьс1>Новосибирск< / td>
<td>l 426</td>
</tr>
<tr>
<td>EKSTepMH6ypr</td>
<td>l 340</td>
</tr>
<tr>
<ЬЬ>Нижний HoBropofl</td>
<td>l 320</td>
</tr>
</tbody>
</table>
</body>
</html>
Внешний вид таблицы, описанной в листинге 5.7, демонстрируется на
рис. 5.8.
Таблица численности жителей пяти крупнейших городов России в приведен-
ном выше примере использует два элемента <tbody>.. .</tbody>, в один из
которых (с идентификатором federal-cities) включены только города феде-
рального подчинения (Москва и Санкт-Петербург).
<Qj * Qi ’Qf | 77 О Перейти |[gL
Getttog Started ©l&estHfcadto
Пятерка крупнейших городов России
_ _ - _ _;Г ; ~ ! Москва Население, тыс. чел. То 383~~ ~ "
Санкт-Петербург Новосибирск 4 661 ; 1 426
Екатеринбург 1 340
Нижний Новгород 1 320
CTwrw® "——
Рис. 5.8. Таблица, использующая возможности группировки строк
272 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Обратите внимание, что описание элемента <tfoot>.. .</tfoot> в HTML-
разметке предшествует обоим элементам <tbody>.. .</tbody>, но в окне брау-
зера содержимое элемента <tfoot>.. .</tfoot> отображается в самом низу
таблицы.
В связи с этим противоречием (задуманным специально с той целью, чтобы
браузеры могли показать сводную информацию, фигурирующую в "подвале”,
не дожидаясь полной загрузки всех данных таблицы) группировку строк
нужно использовать с осторожностью. Все более-менее распространенные
сегодня графические браузеры отображают данные таблиц, организованных
подобным образом, в правильной последовательности, но устаревшие брау-
зеры (например, Netscape 4) не понимают тегов <thead>, <tfoot> и <tbody>,
обрабатывая таблицы ”как обычно”, строка за строкой (рис. 5.9).
<&эйл Правка Пе^&ход |^знгкт«ты £фавка
И Й Л
Ц Няуы йгупт ОбИ’Дшть- Домой Поиск Сбаор
fopec|hle^
Пятерка крупнейших городов России
Город
Итого
Москва
Санкт-Петербург
Новосибирск
Екатеринбург
Нижний Новгород
Население, тыс. чел.
19 130
10 383
4 661
1 426
1 340
1 320
Рис. 5.9. Отображение таблицы, использующей группировку строк,
браузером Netscape Navigator 4, выявляет неверный порядок следования информации
Вложенные таблицы
HTML допускает возможность организации многократно вложенных таб-
лиц — так, одна таблица может быть вставлена в ячейку другой таблицы; та,
в свою очередь, — в ячейку третьей и т. д.
Вероятно, в сложных справочных материалах использование вложенных таб-
лиц оправдано — мы могли бы, скажем, модифицировать последний из рас-
Гпава 5. Таблицы в HTML
273
смотренных выше примеров (см. листинг 5.7), предусмотрев в ячейках, соот-
ветствующих численности населения избранных городов, небольшие сопро-
водительные таблички, отражающие динамику роста населения в этих цен-
трах цивилизации за последние несколько десятилетий.
Подобного рода "факультативную" информацию, однако, было бы лучше
разместить в отдельных таблицах, снабдив основную таблицу соответствую-
щими ссылками — благо, идеология гипертекста позволяет сделать это в дос-
таточной мере элегантно.
Табличная организация данных резко снижает доступность контента— поль-
зователям текстовых или речевых браузеров весьма непросто анализировать
таблицы с развитой структурой. Не говоря уже о таблицах, использующих
вложенность.
До момента достижения приемлемого уровня поддержки CSS большинством
браузеров, однако, идеология вложенных таблиц была в веб-разработке гла-
венствующей.
Дело в том, что без привлечения каких бы то ни было хитроумных приемов
таблицы могли отображаться браузерами того времени в одном из двух оди-
наково неприемлемых с точки зрения сколько-либо вменяемого дизайна
обличий: либо вообще без рамки, либо с весьма убогой псевдотрехмерной
рамкой.
Как раз для того, чтобы получить более-менее элегантную таблицу с плоской
рамкой, веб-разработчикам пришлось выдумать довольно изощренную тех-
нологию использования вложенных таблиц.
Предлагаю вниманию читателей нетрадиционный для нашей книги пример из
серии "как это было давным-давно". Просто для сравнения...
1 Листинг 5Х Таблица из далекого прошлого
..............................“bl..'............................. ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
'b "http: //www. w3. org/TR/html4/loose. dtd">
<html>
<head>
<Ь1Ь1е>Таблица из далекого nponuioro</title>
</head>
<body text="#000000" bgcolor=”#ffffff”>
<table width="600" bgcolor="#cc0000" cellspacing="0"
cellpadding=”0" border="0">
274
Часть II. Применение веб-технологий стороны клиента для создания сайтов
<tr>
ctdxtable width="100%" cellspacing='’l" cellpadding="3" border="0">
<tr bgcolor="#ffccOO">
<th width=="60%">ropofl</th>
<th width="40%’,>Haceлeниe, тыс. &пЬзр;чел. </th>
</tr>
<tr bgcolor="#fffOcc">
<td>MocKBa</td>
<td>10 383</td>
</tr>
<tr bgcolor="#fffOcc">
<td>CaHKT-IIeTep6ypr< /td>
<td>4 661</td>
</tr>
<tr bgcolor="#fffOcc">
<td>HoBOcn6npCK</td>
<td>l 426</td>
</tr>
</tablex/td>
</tr>
</table>
</body>
</html>
Таблица, сверстанная по правилам консервативной школы, одинаково ото-
бражается как в новых, так и в старых браузерах (рис. 5.10).
Атрибуты text и bgcolor тега <body> определяют цвета текста и фона страни-
цы соответственно. Далее атрибут bgcolor активно используется примени-
тельно к тегам, описывающим таблицы, их строки и ячейки. Атрибут width
задает ширину таблицы или ячейки, атрибут cellspacing выполняет задачи,
возложенные нынче на CSS-свойство border-spacing, а атрибут cellpadding
выполняет функции CSS-свойства padding. Атрибут border задает толщину
рамки — в нашем случае все по нулям.
Плоская однопиксельная рамка формируется благодаря "подложке" — таб-
лице, состоящей ровно из одной ячейки, залитой нужным цветом, в которую
вложена таблица с данными. "Подложка" просвечивает через щели между
ячейками вложенной таблицы, "прорезанные" при помощи атрибута cell-
spacing со значением 1 (единица измерения — пиксел). Таким образом,
ячейки никоим образом нельзя сделать прозрачными.
Вышеприведенный листинг — классический пример жертвы логической
стройностью контента и внутренней эстетикой кода в пользу сиюминутной
Гпава 5. Таблицы в HTML
275
потребности обеспечить требуемый визуальный облик страницы в несколь-
ких графических браузерах любой ценой. Посудите сами: для того, например,
чтобы изменить фон таблицы, разработчику нужно будет модифицировать
значения атрибутов bgcolor у каждого тега <tr>. О том, чтобы ’’одним махом”
изменить оформление одинаковых таблиц на нескольких страницах, в данном
случае не может идти и речи.
v | J hie:///Z;/ex^@ pH
Ф Seeing Stertad ©latest HeadSnes.
Москва
Санкт-Петер бур i
Новоснбщкк
| Население, тыс чел. J
110 1.83 :
s 4 661 ;
$ Таблица ю далекого прошлого *
г s ь
Файл Главка -Вид Перя?5ед Кэмпамеиш Справка
и ' £ Л 4s к* Л- Ж
&Л5К4 40<5H<Wtc ХЫфй ГШ* Hwh Пон
Наеежние, так. чел,
10 383
_£661
~J1 426
J jfa Ай&шЙе 7//Z /examples^5/08/index '
gzzz=zzz=
Город
Москва
Санкт-Петербург
Новосибирск
Рис. 5.10. Отображение документа из листинга 5.8 браузерами Firefox 1 и Netscape 4
Несмотря на всю свою неуклюжесть, этот код исправно отображается даже в
столь древних браузерах, как, скажем, Internet Explorer 4.0 и Netscape
Navigator 4.0, а возможно, и в более ранних версиях— где их теперь возь-
мешь, чтобы проверить... И даже— не поверите— успешно проходит про-
верку валидатором на соответствие рекомендации HTML 4.01 Transitional.
Разумеется, соответствие строгим правилам типа документов Strict этой стра-
нице не светит.
Лично мне известны люди, которые верстают таблицы похожим образом и по
сей день, добровольно утяжеляя себе труд и обделяя свои сайты ценнейшими
функциональными особенностями, которые могли бы стать доступными бла-
годаря применению CSS. Искренне надеюсь, что мой читатель будет избав-
лен от подобной практики.
276
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Табличная верстка макета сайта:
"за11 и "против11
Теперь, когда читатель достаточно близко познакомился как с блочной мо-
делью CSS, так и с таблицами, предусмотренными в HTML, пришло время
разобраться, какие плюсы и минусы таит в себе использование каждого из
этих двух подходов применительно к верстке шаблонов веб-страниц.
Хотел бы сразу оговориться — мне чужд фанатизм, и я вовсе не склонен
смотреть на блочную модель CSS2 сквозь розовые очки и при этом безосно-
вательно поливать грязью табличную верстку.
Обе идеологии далеки от совершенства, как и все сущее на Земле. Но объек-
тивная реальность такова, что эти два подхода не просто конкурируют друг с
другом — они сменяют друг друга, и мы живем в переходный период. Таб-
личная верстка доживает свои последние годы, в то время как будущее — за
версткой блочной.
Таблицы не создавались для верстки страниц— веб-разработчики искусст-
венно приспособили этот инструмент для несвойственных ему задач, ибо, как
известно, на безрыбье и рак — рыба.
Напротив, блочная модель CSS2 задумана именно для того, чтобы обеспечить
гибкое визуальное представление контента в виде прямоугольных областей,
так или иначе разбросанных по пространству веб-страницы.
Я повторюсь (в который уже раз): табличная верстка логически несостоя-
тельна. "Втискивая" десяток абзацев текста, перемежающихся с картинками,
в одну огромную табличную ячейку, логически никоим образом не сопостав-
ляя ее содержимое с данными, расположенными в соседних ячейках, мы не-
оправданно усложняем структуру контента, тогда как из соображений дос-
тупности эту структуру следовало бы, наоборот, стремиться всеми силами
упрощать.
Блочная верстка, напротив, не способна усложнить логическую структуру
содержимого, оставляя ее при любых обстоятельствах последовательной.
Благодаря этому со всем содержимым страницы можно ознакомиться без ка-
ких бы то ни было затруднений при помощи любого браузера, даже самого
древнего.
Отказ от табличной верстки в пользу блочной, а в особенности объявление
войны визуальным тегам и атрибутам HTML, существенно снижает объем
кода разметки, делает его более удобочитаемым и стройным. (Ведь согласи-
тесь, конструкция <div>... </div> объективно лаконичнее, нежели монстру-
озное <table>...<tr>...<td>..,</td>...</tr>...</tabie>, даже если не брать
в расчет атрибуты тегов.) Разумеется, в случае блочной верстки возрастает
Гпава 5. Таблицы в HTML 277
объем CSS-кода, ибо вся ответственность за какое бы то ни было представле-
ние данных ложится на плечи каскадных листов стилей. Но файл листа сти-
лей, будучи внешним и общим для нескольких страниц, как мы помним,
кэшируется браузером, что не требует его повторной загрузки с каждым
вновь открываемым HTML-документом.
Ко всему прочему, если, как мы говорили выше, в ряде случаев некоторые
браузеры переходят к рендерингу таблиц только после полной загрузки по-
следних, то содержимое блочных элементов всегда отображается сразу же,
без задержки.
Больший удельный вес контента по отношению к разметке, его логическая
стройность весьма положительно сказываются на вычисляемой поисковыми
машинами релевантности запросов, соответствующих фразам, фигурирую-
щим в содержании страницы, и, как следствие, на ранжирование результатов
поиска по данным запросам. Иными словами, страницу, сверстанную при по-
мощи блочной модели CSS и не использующую визуальных тегов и атрибу-
тов HTML, засоряющих структурную разметку, при прочих равных условиях
гораздо проще найти при помощи "Яндекса" или Google, нежели страницу,
сверстанную таблицами и не гнушающуюся не рекомендованных Консор-
циумом W3C элементов.
Табличная верстка не способна предоставить такой гибкости, какую может
обеспечить блочная верстка, когда речь заходит о создании автоматически
генерируемых и прозрачных для пользователей версий представления кон-
тента для различных классов устройств с использованием аппаратно-
зависимых стилей. Да, мы можем скрыть те или иные ячейки таблицы, но
реализовать радикально отличные друг от друга варианты взаимного распо-
ложения ячеек у нас не получится ни при каком раскладе.
Чтобы добавить к шаблону страницы или, напротив, исключить из его соста-
ва какую бы то ни было функциональную область, в случае табличного маке-
та почти всегда приходится практически переверстывать все заново. Если же
верстка страниц сайта использует блочную модель CSS — достаточно лишь
поместить в файл стилей описание нового блока (или удалить описание ста-
рого), поменять несколько цифр, определяющих размеры смежных областей,
после чего просто добавить данные, обрамленные тегами <div>.. .</div>
с соответствующим параметром class или id в HTML-код.
...Тем не менее, несмотря на все сказанное, свыше 90% разработчиков по-
прежнему продолжают верстать сайты таблицами; а сколько-либо известные
широкой аудитории проекты, использующие блочную верстку, в Рунете
можно пересчитать по пальцам одной руки. Почему?
Года три-четыре тому назад консерватизм разработчиков можно было объяс-
нить низким качеством поддержки актуальных рекомендаций W3C распро-
278
Часть II. Применение веб-технологий стороны клиента для создания сайтов
страненными на тот момент браузерами. Сетовать на этот фактор сегодня —
значит, кривить душой: 99% используемых ныне браузеров поддерживает
CSS2 на приемлемом для практического применения этой технологии уровне.
Что касается оставшегося 1% пользователей, то содержание всех сайтов, по-
строенных на базе CSS, для этого контингента в полной мере доступно, пус-
кай без лишнего оформления. Во второй половине 1990-х, на пике "гонки
вооружений" между Netscape и IE, о подобной идиллии можно было только
мечтать — сайты, оптимизированные для просмотра в Internet Explorer, порой
отображались в Netscape Navigator так, что ничего толком и не прочтешь;
и наоборот.
Несовершенство браузеров, стало быть, отнюдь не главный повод, обуслав-
ливающий скепсис по отношению к CSS-верстке.
Основная причина консерватизма кроется, на мой взгляд, в силе привычки.
Как мы уже неоднократно отмечали в ходе главы 7, блочная модель CSS и
таблицы обладают рядом весьма существенных, органических взаимных про-
тиворечий.
Использование блочной модели CSS2 позволяет сделать многое, чего нельзя
добиться при помощи таблиц. Но верно и обратное — без применения таблиц
иной раз практически невозможно реализовать то, что с их помощью разре-
шается буквально в два счета. Между блочной и табличной моделями нет и
не может быть взаимно однозначного соответствия, ибо это совершенно раз-
личные по своему назначению инструменты.
Другой вопрос— как интерпретировать этот нейтральный по сути своей
факт. Закостенелые апологеты таблиц как средства верстки шаблонов веб-
страниц склонны однозначно идентифицировать как недостатки любые осо-
бенности блочной модели CSS, которые идут с табличной версткой вразрез и
тем самым не вписываются в традиционное миропонимание. Ибо смены тех-
нологий недостаточно — нужно поменять мышление, отказаться от прежних
стереотипов, а это весьма и весьма непросто и болезненно.
Я специально не стал приводить в этой главе примеров верстки шаблонов
страниц при помощи таблиц— кто захочет, тот всегда сделает "шаг назад"
самостоятельно; а мне хотелось бы сделать все возможное, чтобы привить
читателю, не обремененному багажом многолетнего опыта табличной верст-
ки, сразу новое, "блочное" мышление.
Разумеется, если вы 10 лет верстали сайты таблицами — они вам, вне всякого
сомнения, где угодно будут мерещиться: мебель в комнате ведь тоже можно
расставлять, оперируя категориями coispan и rowspan. Но в общем случае
страница веб-сайта — это НЕ таблица, а набор прямоугольных функциональ-
ных областей, так или иначе спозиционированных друг относительно друга.
Гпава 5. Таблицы в HTML
279
Равно как и, скажем, полоса бумажного издания— газеты или журнала —
это никакая не таблица.
Кстати говоря, если полистать публикации 7—8-летней давности, посвящен-
ные использованию таблиц в качестве механизма верстки сложных веб-
страниц, когда для таблиц означенная роль была еще в новинку, то можно
будет провести огромное количество параллелей с сегодняшним днем. О том,
насколько убога табличная верстка веб-страниц по сравнению с ’’благород-
ной" версткой бумажных изданий, не писал тогда только ленивый. Ничего,
привыкли. А уж коль привыкли к таблицам, то привыкнем и к блочной моде-
ли — механизму куда более выверенному и элегантному...
Практические примеры таблиц
По обыкновению, все примеры, описанные в пронумерованных листингах,
доступны на компакт-диске, прилагаемом к книге, в полных и работоспособ-
ных версиях.
Файлы к данной главе расположены в директории \examples\05.
Пример, рассмотренный, скажем, в листинге 5.4, вы найдете в каталоге
\examples\05\04 нашего компакт-диска. А еще лучше — не бродить по ката-
логам, а открыть файл \index.html — электронный путеводитель по компакт-
диску — прямо из корня.
ГЛАВА 6
Формы в HTML
До этого момента, обсуждая разнообразные аспекты структурирования и
представления контента веб-страниц и рассматривая соответствующие кон-
струкции HTML и CSS, мы говорили, де-факто, лишь о выводе информации
(на экран, на принтер и т. п.), почти никак не касаясь противоположного по
своей сути явления — пользовательского ввода.
Между тем, по-настоящему интерактивные сетевые сервисы — будь то фо-
румы, информационно-поисковые системы, диалоги выбора товаров и под-
тверждения заказа в интернет-магазинах, административные интерфейсы для
публикации новостей на сайтах и прочее, прочее— предполагают двуна-
правленное взаимодействие с пользователем. Содержание страниц, динами-
чески генерируемых подобными приложениями, основывается на результатах
обработки информации, получаемой от пользователя.
Вопросы создания сложных динамических сайтов, использующих технологии
стороны сервера, лежат за рамками тематики этой книги. Тем не менее орга-
низация пользовательского ввода— это прерогатива технологий клиентской
стороны; все заботы по обеспечению такой функциональности в настоящее
время возложены на HTML.
О том, как HTML справляется с означенной ролью, мы и поговорим далее в
этой главе. А следующая, заключительная, глава нашей книги будет посвя-
щена сравнительно несложным способам обработки действий пользователя
на стороне клиента.
Веб-формы как средство обратной связи
с пользователем
Базовым механизмом, обеспечивающим для пользователя возможность пере-
дачи на обработку данных практически любого типа, являются веб-формы
282 Часть II. Применение веб-технологий стороны клиента для создания сайтов
(внешний вид страницы с двумя формами см. рис. 1.10). Для описания форм
используется ряд специальных тегов, впервые предусмотренных еще в
HTML 2.0.
( Примечание )
Ожидается, что все эти теги будут упразднены в XHTML 2.0 — на смену фор-
мам, встроенным в HTML, должен прийти XML-ориентированный язык XForms,
получивший статус рекомендации W3C в 2003 г. В отличие от "классических"
веб-форм, предполагающих обработку введенной пользователем информации
при помощи сторонних скриптов или приложений, XForms включает в себя раз-
витые средства анализа данных. Впрочем, учитывая современное положение
вещей в мире браузеров, весьма далекое от идеала, остается только сожалеть
о том, что пока еще рассматривать XForms в подробностях слишком рано...
С точки зрения структурной разметки, веб-форма представляет собой эле-
мент-контейнер, ограниченный тегами <form>.. .</form>.
Один HTML-документ вполне может содержать несколько форм, но они не
должны быть вложенными друг в друга.
У тега <fom> имеется обязательный атрибут action, значением которого
обычно выступает URL обработчика (например, серверного скрипта), осу-
ществляющего анализ данных формы. (В следующей главе мы рассмотрим
пример обработки введенной пользователем информации, не требующий
привлечения серверных технологий. Атрибут action при этом примет пустое
значение: action=”". Тем не менее подчеркиваю, action является обязатель-
ным атрибутом тега <form> — он должен так или иначе фигурировать в опи-
сании данного элемента подобно тому, как атрибут alt является непремен-
ным спутником тега <img>.)
В качестве значения атрибута action может фигурировать адрес электронной
почты — в таком случае при соблюдении ряда условий введенная пользова-
телем информация будет отправлена по e-mail с привлечением сторонней
почтовой программы (в большинстве случаев— используемой в системе
клиента по умолчанию).
Другим важным, но уже необязательным параметром тега <form> является
атрибут method, определяющий, при помощи какого НТТР-метода
(см. подраздел "Сайт в действии" главы 1) будет передаваться на сервер ин-
формация пользовательского запроса. Возможные значения — get и post
(спецификация XHTML требует использовать нижний регистр, в то время как
HTML 4 такого ограничения не налагает; сами же названия одноименных ме-
тодов принято записывать прописными буквами). По умолчанию использует-
ся значение get.
Атрибут enctype тега <form> определяет MIME-тип (см. раздел "Использова-
ние тега <object>" главы 2) данных веб-формы.
Гпава 6. Формы в HTML
283
Значение данного атрибута по умолчанию— appiication/x-www-form-
uriencoded— указывает на то, что содержимое полей формы отправляется
обработчику с использованием так называемой кодировки URL, а именно,
в следующем формате:
параметр_1=значение_1&параметр_2=значение_2&...&параметр_К=значение_К
Названия параметров — это имена тех или иных элементов интерфейса веб-
формы, заданные разработчиком при помощи атрибута name (подробнее об
этом — несколько позже.) Значения параметров — это данные, введенные
пользователем в соответствующие поля.
При этом все пробелы заменяются знаком "+", а прочие символы (за исклю-
чением латинских букв, цифр и ограниченного множества других знаков,
разрешенных к передаче в непосредственном виде) кодируются двузначными
шестнадцатеричными числами, предваряющимися знаком процента ("%").
Так, например, слово "веб-технологии", представленное в кодировке URL, будет
выглядеть следующим образом: %E2%E5%E1-%F2%E5%F5%ED%EE%EB%EE%E3%E8%E8.
Скрипт, выполняющий обработку данных веб-формы, должен, прежде всего,
декодировать переданную пользователем информацию.
При использовании метода GET пользовательские данные являются частью
URL запрашиваемого ресурса— если помните, при обсуждении форматов
URL в главе 1 мы рассматривали такой пример:
http://www.yandex.ru/yandsearch?text=%E2%E5%El-
%F2%E5%F5%ED%EE%EB%EE%E3%E8%E8
Все то, что следует за вопросительным знаком, и есть содержимое полей
формы (в данном случае — одного поля с именем text), передаваемое серве-
ру при помощи метода GET.
В случае применения метода POST пользовательские параметры передаются
обработчику непосредственно в теле НТТР-запроса.
Если атрибут method тега <form> имеет значение get, то в качестве значения
атрибута enctype не имеет смысла использовать ничего, кроме упомянутого
выше appiication/x-www-form-uriencoded. В противном случае результат
обещает быть непредсказуемым — один из атрибутов (какой именно — брау-
зер рассудит по своему собственному разумению) будет попросту проигно-
рирован.
Если же данные веб-формы отправляются при помощи метода POST, атрибут
enctype вполне может принимать и отличные от принятого по умолчанию
значения.
Так, например, если веб-форма применяется для отправки обработчику со-
держимого какого бы то ни было локального файла (о том, как реализуется
284
Часть II. Применение веб-технологий стороны клиента для создания сайтов
такая возможность, поговорим чуть позже), значением атрибута enctype дол-
жен быть тип multipart/form-data, иначе скрипт получит отнюдь не содер-
жимое файла, а лишь только имя последнего.
Если же предполагается использовать веб-форму в качестве средства для от-
правки почтовых сообщений (когда значением атрибута action является ад-
рес e-mail), атрибут enctype тега <form> должен принимать значение
text/plain. Следует, однако, заметить, что пользоваться этим приемом нужно
с большой осторожностью — к сожалению, возможны проблемы с отправкой
русскоязычных сообщений в корректной кодировке.
Наши методы
Начинающему веб-разработчику, вероятно, на первых порах будет вполне
достаточно тех сведений о протоколе HTTP, что были изложены в главе 1 —
особенно в том случае, если заниматься проектированием серверных прило-
жений пока не планируется.
Тем не менее, считаю целесообразным поведать о некоторых особенностях
методов GET и POST более подробно, ибо даже опытные разработчики за-
частую упускают в своей повседневной практике самые что ни на есть клю-
чевые концепции, не уделив им должного внимания в начале пути...
Итак, мы выяснили, что оба метода могут использоваться для передачи поль-
зовательских данных от клиента серверу. А не задумывались ли вы над тем,
почему тогда у этих самых методов прямо противоположные названия? Ведь
post в буквальном переводе с английского — ’’отправлять, посылать по поч-
те”, a get — напротив, ’’брать, получать".
Порой даже тот, кто в деталях представляет себе, как происходит взаимодей-
ствие клиента и сервера в случае передачи пользовательских параметров раз-
личными способами, обычно оказывается не в состоянии объяснить смысл
этой терминологической головоломки. Между тем, именно знание букваль-
ных переводов английских слов post и get способно дать новичку возмож-
ность никогда не путать соответствующие методы и четко понимать их сущ-
ность.
Название метода GET подразумевает, что пользователь хочет "взять”, "полу-
чить" ресурс, обладающий определенным URL. Например, таким:
http://www.somewebsite.ru/script.рЬр?параметр_1=значение_1&параметр_2=
значение_2&...&параметр_М=значение_М
С формальной точки зрения совсем не важно, что после вопросительного
знака следуют какие-то специфичные данные — это просто составная часть
адреса запрашиваемого ресурса.
Гпава 6, Формы в HTML
285
Метод POST же отличается тем, что заданные пользователем значения пара-
метров именно ’’отправляются”, ’’отсылаются" серверу в теле НТТР-
сообщения запроса как некий "полезный груз"; URL запрашиваемого ресурса
при этом не подвергается никаким модификациям.
Как видите, противоречий в терминологии нет, названия методов говорят са-
ми за себя.
Пользовательские параметры, переданные при помощи метода POST, по
умолчанию представляются точно таким же образом, как и при использова-
нии метода GET:
параметр_1=значение_1&параметр_2=значение_2&. . . &параметр_Ы=значение_Ы
Но благодаря применению атрибута enctype здесь уже возможны и другие
варианты, поскольку отправка пользовательских данных в теле НТТР-запроса
не сопряжена с драконовскими ограничениями, определяемыми допустимым
форматом URL.
Но зачем нам два метода, неужели не хватает одного? Дело в том, что нет в
мире совершенства, идеального и универсального средства, с успехом справ-
ляющегося с любой задачей. У каждого из методов — свои индивидуальные
особенности характера, приемлемые в одних ситуациях и нежелательные —
в других. "Темные стороны души" метода POST компенсируются достоинст-
вами метода GET, и наоборот. В каждом конкретном случае разработчику
нужно принимать одно решение из многих, неизбежно отказываясь от одних
возможностей в пользу других, причаливать к тому или иному берегу. Или
метаться между двух огней, искать компромиссы — такое тоже не редкость...
Метод GET привлекает разработчиков своей простотой— все переданные
таким способом параметры прочесть легче, нежели данные, отправленные
при помощи метода POST. Очевидные плюсы есть и для пользователя — все
параметры на виду, и более-менее искушенный серфер может править их
значения прямо в адресной строке браузера, во всей полноте ощущая свободу
"неофициальной" навигации (см. главу 4).
Но, как известно, палка о двух концах... Длинные URL с обилием спецсимво-
лов трудно запоминаются и порой даже вызывают недоверие у не слишком
подкованных пользователей. К тому же, излишняя раскрепощенность посети-
телей не всегда бывает в интересах разработчика — например, она совершен-
но неприемлема в тех случаях, когда требуется, чтобы некоторые из парамет-
ров принимали только фиксированные значения из строго определенного
списка. А уж если речь идет об информации конфиденциального характера,
то тем более весьма нежелательно, чтобы такие данные выставлялись на все-
общее обозрение. В этом смысле метод POST, конечно, несколько безопас-
нее.
286
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Главный недостаток метода GET — ограниченная протяженность строки
пользовательских параметров. Максимальная длина URL в каждом конкрет-
ном случае зависит как от версии браузера, так и от настроек сервера — но в
любом случае растянуть пользовательские данные от Владивостока до Бреста
не получится. Я обычно ориентируюсь на "потолок" порядка килобайта.
Метод POST, напротив, не налагает никаких ограничений на объем переда-
ваемых данных, и именно в этом заключается основное его преимущество
перед GET. К сожалению, почти все достоинства метода POST на этом и за-
канчиваются.
Органический недостаток метода POST — невозможность поставить прямую
гипертекстовую ссылку на страницу, сгенерированную на основе конкретных
значений параметров. Отсюда вытекает невозможность индексирования по-
добных динамических отчетов поисковыми системами.
Еще один существенный недостаток заключается в нарушении логики работы
кнопки Назад — самого популярного элемента пользовательского интерфей-
са браузера. Вернуться на страницу, сгенерированную при помощи метода
POST, после перехода с нее куда бы то ни было еще, довольно трудно.
Internet Explorer, например, выдаст сообщение: "Внимание: страница устаре-
ла" с требованием нажать на кнопку Обновить, если намерения пользователя
вновь просмотреть злополучную страницу все же сколько-либо серьезны.
В ряде браузеров возникают трудности при сохранении веб-страниц, сгене-
рированных динамически с применением метода POST, для локального про-
смотра. Отмечаются также проблемы с распечаткой подобных документов.
В общем и целом, подводя итог, скажем, что с позиций заботы о пользовате-
лях метод POST — мягко говоря, не самый лучший выбор. Так что при про-
ектировании сложных многошаговых приложений (например, интернет-
магазинов) метод POST нужно стараться использовать только там, где требу-
ется передача действительно больших объемов информации. При этом жела-
тельно, чтобы логика работы приложения строилась таким образом, что стра-
ницы, генерируемые на основе данных, отправляемых методом POST, не тре-
бовали бы возврата к себе.
Основные элементы форм
Виды полей ввода, доступные для применения в веб-формах, в достаточной
степени разнообразны. Тем не менее все они описываются сравнительно не-
большим количеством HTML-тегов. К таковым относятся <input>, <textarea>
И <select>.
Львиная доля элементов интерфейса форм определяется тегом <input>, ин-
терпретация которого зависит от значения атрибута type.
Гпава 6. Формы в HTML
287
Тег <input> определяет пустой элемент, поэтому в HTML 4 закрывающий тег
для него запрещен, а в XHTML необходимо использовать косую черту перед
правой угловой скобкой тега.
Ни один из атрибутов тега <input> не является обязательным; атрибут type по
умолчанию принимает значение text, что соответствует простому текстовому
полю ввода.
Некоторые возможные значения атрибута type тега <input> и соответствую-
щие им типы элементов интерфейса веб-форм таковы:
□ text — однострочное текстовое поле;
CJ password— поле для ввода пароля (аналог обычного текстового поля, но
набираемые символы отображаются "звездочками", чтобы недоброжела-
тель не смог подсмотреть вводимый текст из-за спины набирающего);
CJ checkbox — флажок;
CJ radio — "радиокнопка" переключателя единственного выбора;
CJ submit — кнопка для отправки данных веб-формы обработчику;
CJ reset — кнопка для очистки полей формы от введенных пользователем
значений;
П button — кнопка, изначально не обремененная какой бы то ни было функ-
циональной нагрузкой (разработчик может использовать подобный эле-
мент на свое усмотрение);
□ file — поле для выбора локального файла, пересылаемого на обработку;
П hidden — скрытое поле, никак не отображающееся в форме (скрипт может
помещать в поля такого типа какую бы то ни было служебную информа-
цию, которой не нужно забивать голову пользователю — к примеру, иден-
тификатор текущего сеанса работы).
Вне компетенции тега <input> остались всего две важные разновидности эле-
ментов интерфейса: это многострочная текстовая область, определяемая те-
гом <textarea>, и списки единственного и множественного выбора, задавае-
мые при помощи тега <seiect>. В отличие от <input>, означенные теги явля-
ются парными, определяя элементы-контейнеры.
В последующих разделах мы более подробно рассмотрим возможности, пре-
доставляемые тегами, предназначенными для описания элементов HTML-
форм. Мне представляется, что наиболее разумно сгруппировать эти элемен-
ты по роду решаемых задач.
Пока же — несколько общих замечаний.
Всякая веб-форма может содержать произвольное количество элементов того
или иного типа, расположенных в любом порядке.
288 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Тег, описывающий каждое поле формы, может (но не обязан) характеризо-
ваться атрибутом name, определяющим имя этого поля, использующееся в
качестве названия параметра, передаваемого обработчику. Отправляемым на
обработку значением этого параметра будет являться информация, опреде-
ленная пользователем в соответствующем поле (путем непосредственного
ввода, если речь идет о текстовом поле; выбором требуемого значения из за-
ранее определенного перечня или иным возможным способом).
Любой элемент формы можно сделать неактивным и, соответственно, недос-
тупным для изменения благодаря использованию булева атрибута disabled.
HTML 4, напомню, допускает минимизацию подобных атрибутов, разрешая
записи вида:
cinput type="text" name="userdata" disabled>
XHTML же требует, чтобы все атрибуты, в том числе и булевы, были записа-
ны в развернутой форме:
cinput type="text" name="userdata" disabled="disabled" />
Все примеры, обсуждаемые далее в этой главе, построены по правилам
XHTML. Я счел необходимым лишь кратко напомнить некоторые ключевые
различия синтаксиса XHTML 1.0 и HTML 4 (рассмотренные в главе 2), к ко-
торым мы уже давно не возвращались.
Текстовые поля ввода
Однострочное текстовое поле можно сформировать, воспользовавшись тегом
<input> с атрибутом type, принимающим значение text.
Также предусмотрены следующие дополнительные атрибуты:
□ size — определяет видимую длину поля ввода в символах;
П maxlength — задает максимальное число символов, разрешенных для ввода
в данное поле (по умолчанию ограничений нет);
П value — устанавливает содержимое поля по умолчанию.
С примерами подобных полей мы повседневно сталкиваемся в поисковых
системах, таких как Google или ’’Яндекс". Попробуем реализовать похожую
форму своими силами.
Листинг 6.1. Однострочное текстовое поле у г
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
’b "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
chtml xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
Гпава 6. Формы в HTML
289
<head>
<title>C№ocTpo4Hoe текстовое nc>ne</title>
</head>
<body>
<form action="">
<р>Адрес вашего сайта: cinput type="text" size="20"
maxlength="100" name="websits" value="http://www." /xinput
type="submit" value="OK" /></p>
</form>
</body>
</html>
Описанная в приведенном выше листинге простейшая форма показана на
рис. 6.1.
Opwa £ид flgpewt ^кладки Справка 0
Ьд) | 3 7^© 13йрвЙ*И [Gt
0» GetW ki latent «майи»
Адрес вашего сайта: [http^ OK |
I
[firoeo s
Рис. 6.1. Внешний вид простейшей веб-формы
с одним текстовым полем и кнопкой отправки данных
В этом примере использовано два типа элементов интерфейса — текстовое
поле ввода и кнопка, отправляющая данные на обработку (пустое значение
атрибута action тега <form> предполагает, что обработчик находится в теку-
щем документе). Атрибут value применительно к элементу-кнопке работает
слегка иначе, нежели по отношению к текстовому полю — он определяет
надпись, которая будет фигурировать на поверхности кнопки. Текст этой
надписи по умолчанию браузеры определяют на свое усмотрение — так, ло-
кализованная версия Internet Explorer, например, предлагает нам не вполне
изящную формулировку "Подача запроса". Вместо нее мы кратко напи-
шем "ОК".
290 Часть II. Применение веб-технологий стороны клиента для создания сайтов
При помощи атрибута size мы указали, чтобы наше текстовое поле имело
длину 20 символов. Предельную длину вводимой строки, задаваемую атри-
бутом maxlength, мы установили равной 100 знакам. Поскольку мы призыва-
ем пользователя ввести в текстовое поле адрес своего сайта, логично дать
этому элементу имя website при помощи атрибута name. Адрес любого сайта
начинается со схемы http: //, а зачастую — с последовательности http: / /www.,
и поэтому, чтобы облегчить труд пользователю, мы набили этот десяток сим-
волов в поле формы сами за счет применения атрибута value.
Наберите какой-нибудь адрес (например, http://www.mozilla.org/) в поле
формы и нажмите кнопку ОК. Содержимое адресной строки браузера изме-
нится— как мы помним, по умолчанию веб-форма использует метод GET
для отправки данных, что сопряжено с передачей пользовательских парамет-
ров, представленных в кодировке URL, прямо в составе адреса запрашивае-
мого ресурса.
Содержимое адресной строки браузера, имевшее до этого вид
file:///Z:/examples/06/01/index.html,
чудесным образом преобразится в
file:///Z:/examples/06/01/index.html?website=
http%3A%2F%2Fwww.mozilla.org%2F. (рИС. 6.2)
Рис. 6.2. Метаморфозы адресной строки браузера:
вверху — до нажатия на кнопку ОК, внизу — после нажатия
Добавились вопросительный значок и данные, следующие за ним: website —
название пользовательского параметра, в точности соответствующее имени
поля, определенному при помощи атрибута name; знак равенства, отделяю-
щий название параметра от значения последнего; и собственно значение па-
Гпава 6. Формы в HTML
291
раметра— адрес сайта, который мы ввели в поле формы. Латинские буквы и
точки остались на месте, не подвергшись кодированию, а вот символы двое-
точия и косой черты были преобразованы в шестнадцатеричные коды, пред-
варенные значком процента: %зд и %2F соответственно.
Получить многострочное текстовое поле ввода можно, воспользовавшись
тегом <textarea>.
Этот тег имеет два обязательных атрибута: cols и rows. Атрибут cols опреде-
ляет ширину текстовой области (буквально— число столбцов текста, на-
бранного моноширинным шрифтом, используемым по умолчанию; этот
шрифт можно переопределить средствами CSS), а параметр rows задает ее
высоту в строках.
Объем данных, которые можно ввести в такую текстовую область, не ограни-
чен, поэтому почти все формы, использующие элементы подобного типа,
предполагают отправку введенной пользователем информации на обработку
при помощи метода POST.
Атрибут value для тега <textarea> не определен стандартом, поскольку зна-
чения атрибутов в HTML ограничены по длине. Текст, который должен фи-
гурировать в области ввода по умолчанию, задается непосредственно между
тегами <textarea> И </textarea>.
Наш второй пример демонстрирует форму, использующуюся для отправки
почтовых сообщений.
| Листинг 6.2. Форма, использующая многострочную текстовую область для ।
отправки длинных сообщений по e-mail
<form action="mailto:artemy@lomov.ru?subject=Book" method="post"
enctype="text/plain">
<pxtextarea cols="50" rows="5" name="message">Ваш отзыв
о KHnre</textarea></p>
<pxinput type="submit" value="OTnpaBHTb автору" /></р>
</form>
Внешний вид формы, содержащей многострочную текстовую область ввода,
демонстрируется на рис. 6.3.
В соответствии со спецификациями HTML 4.01 Strict и XHTML 1.0 Strict,
конструкции разметки, определяющие те или иные элементы веб-форм,
должны употребляться исключительно внутри блочных элементов наподобие
<р>...</р> или <div>... </div>— обратите внимание на эту особенность в
наших примерах.
Скажу больше— контейнер <form>.. .</form>, напротив, с точки зрения
стандарта является совершенно необязательным для таких элементов, как
292
Часть II. Применение веб-технологий стороны клиента для создания сайтов
<input> или <textarea>... </textarea>— правда, практическая ценность их
’’автономного плавания" вызывает определенные сомнения.
Рис. 6.3. Форма с многострочной текстовой областью
Богатство выбора
Во многих случаях бывает разумнее не требовать от пользователя самостоя-
тельного ввода, какой бы то ни было текстовой информации, а вместо этого
предлагать ему на выбор один или несколько вариантов из заранее опреде-
ленного перечня.
Для решения этой задачи HTML предоставляет несколько похожих и порой
взаимозаменяемых средств.
Так, при помощи тега <input> можно организовать переключатели единст-
венного выбора и флажки множественного выбора, а тег <seiect> использу-
ется для организации более компактных списков, реализующих аналогичные
возможности.
"Радиокнопки" и флажки
Поместить "радиокнопку’’ на веб-страницу возможно, воспользовавшись те-
гом <input>, для которого определен атрибут type со значением radio:
<pxinput type="radio" name="switcher" /> Включить</р>
По умолчанию переключатель не активирован. Если пользователь, щелкнув
по ’’радиокнопке’’, код которой приведен выше, переведет ее во включенное
Гпава 6. Формы в HTML
293
состояние, то после нажатия на кнопку отправки данных формы обработчику
будет, в числе прочего, передан следующий параметр: switcher=on.
Но чаще всего ’’радиокнопки" не используются в одиночку, а применяются
для выбора пользователем одного варианта из нескольких предложенных.
Более того, одна форма может содержать множество переключателей, со-
стоящих, в свою очередь, из нескольких ’’радиокнопок’’ — каждый переклю-
чатель идентифицируется по содержимому атрибута name. Для того же, чтобы
определить, какая именно из нескольких "радиокнопок", обладающих одним
и тем же именем, указанным в значении атрибута name (т. е. принадлежащих
одному переключателю), была активизирована пользователем, необходимо
использовать атрибут value с тем, чтобы сформировать список возможных
вариантов значений соответствующих параметров, передаваемых обработ-
чику.
Предположим, мы хотим выяснить предпочтения пользователей о применяе-
мых ими браузерах и операционных системах. Тогда нам потребуется орга-
низовать форму наподобие этой:
^Листинг 6.3, Форма для голосования
<form action="">
<р>Каким браузером вы предпочитаете пользоваться?</р>
<pxinput type="radio" name="browser" value="IE" /> Microsoft
Internet Explorer</p>
<pxinput type="radio" name="browser" value="Opera" /> Opera</p>
<pxinput type="radio" name="browser" value="FF" /> Mozilla Firefox</p>
<р>Какая операционная система вам более всего по душе?</р>
<p><input type="radio" name=" system" value="Windows" /> Microsoft
Windows</p>
<p><input type="radio" name=" system" value="MacOS" /> MacOS</p>
<p><input type="radio" name="system" value="Linux" /> Linux</p>
<pxinput type="submit" value="IIporonocoBaTb " /x/p>
</form>
Внешний вид формы, описанной приведенным выше фрагментом кода, пред-
ставлен на рис. 6.4.
В этом примере — два переключателя (с осмысленными именами browser и
system; используются соответственно для выбора предпочтительных браузера
и операционной системы).
Обратите внимание на значения атрибутов value— они тоже вполне осмыс-
ленны и отражают тот или иной возможный выбор пользователя (ie —
294 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Internet Explorer, ff— Firefox, значения Opera и Linux вообще дублируют тек-
стовые комментарии напротив соответствующих ’’радиокнопок”).
Рис. 6.4. Внешний вид формы с двумя группами "радиокнопок"
Предположим, что при ответе на вопрос ’’Каким браузером вы предпочитаете
пользоваться?” посетитель нашей странички выберет пункт ’’Mozilla Firefox”,
а отвечая на вопрос ’’Какая операционная система вам более всего по душе?",
не мешкая, выберет пункт ’’Linux”. Какие данные отправятся обработчику
после нажатия на кнопку Проголосовать?
Очевидно, обработчик получит следующую информацию к размышлению:
browser=FF&system=Linux. Этот текст сможем увидеть и мы в адресной строке
браузера, поскольку форма использует для отправки пользовательских пара-
метров метод GET.
Для того чтобы сделать одну из ’’радиокнопок” переключателя активи-
зированной по умолчанию, используется булев атрибут checked. Если вы
попытаетесь снабдить атрибутом checked несколько тегов cinput type=
"radio" .. .> с одинаковыми значениями атрибута name, то активизированной
окажется все равно только одна "радиокнопка" — последняя из тех,
в описаниях которых фигурирует атрибут checked.
Гпава 6. Формы в HTML 295
! Листинг 6.4. Пример использования атрибута checked
<form action="">
<p>Каким браузером вы предпочитаете пользоваться?</р>
<р><input type="radio" name="browser" value="IE" /> Microsoft
Internet Explorer</p>
<p><input type="radio" name="browser" value="Opera" /> Opera</p>
<p><input type="radio" name="browser" value="FF" /> Mozilla
Firefox</p>
<p><input type="radio" name="browser" value="all-one"
checked="checked" /> Мне все равно</р>
<p><input type="submit" уа1ие="Проголосовать" /></р>
</form>
Результат интерпретации данного фрагмента кода иллюстрирует рис. 6.5.
) Au । ими । кн ин i ииирусн ля «радмикшжкч* v
Г-
..Л
Каким браузером вы предпочитаете пользоваться?
Microsoft Internet Explorer
О Opera \
С Mozilla Firefox
£= Мне все равно
Рис. 6.5. Форма с активацией одного из предлагаемых пользователю вариантов выбора
по умолчанию
Мы слегка модифицировали форму из предыдущего примера, отбросив для
краткости вопрос, касающийся операционной системы, но добавив к вариан-
там ответа на вопрос ’’Каким браузером вы предпочитаете пользоваться?”
нейтральный пункт ’’Мне все равно”, сделав соответствующую ’'радиокноп-
ку” активной по умолчанию благодаря использованию атрибута checked.
296 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Совершенно аналогичным образом описываются флажки, позволяющие
пользователю выбрать не один, а несколько вариантов из числа предложен-
ных.
При этом значением атрибута type тега <input> выступает ключевое слово
checkbox, а ограничения, касающиеся атрибута checked, становятся неакту-
альными — применяя этот атрибут, мы можем сделать активными по умол-
чанию хоть все флажки.
[ Листинг 6,5. Пример использования флажков
<form action="">
<р>Какие браузеры, на ваш взгляд, хорошо справляются
с поддержкой CSS2?</p>
<р><input type=”checkbox” name="browser" value="IE" /> Microsoft
Internet Explorer 6.0</p>
<pxinput type="checkbox" name="browser" value="Opera" />
Opera 8.0</p>
<pxinput type="checkbox" name="browser" value="FF" /> Mozilla
Firefox 1.0</p>
<p><input type="submit" уа1ие="Поделиться мнением" /х/р>
</form>
\ ''' .Jal xl
Цраш» $ид Нёрехад ^Нггрументы Ставка s О
<£j ’ ' |§ @ @ |l J fiie3 © napartm p5l
Какие браузеры, на ваш взгляд, хорошо справляются с
поддержкой CSS2?
Г Microsoft Internet Explorer 6.0
j П Opera 8.0
j D Mozilla Firefbx 1.0
i Поделиться мнением^
I-.-. то 'to. . '..'"'TO . . Z-X"<to> .\+K-. .
Рис. 6.6. Форма, использующая флажки для множественного выбора
Гпава 6. Формы в HTML
297
Отображение веб-формы, описываемой рассмотренным фрагментом кода,
иллюстрирует рис. 6.6.
Предположим, при ответе на вопрос ’’Какие браузеры, на ваш взгляд, хорошо
справляются с поддержкой CSS2?” пользователь активизирует флажки на-
против надписей ’’Opera 8.0” и "Mozilla Firefox 1.0” нашей веб-формы.
В таком случае обработчик после нажатия кнопки Поделиться мнением по-
лучит ДЛЯ анализа такую строку: browser=Opera&browser=FF.
Списки единственного и множественного выбора
Всем хороши флажки и ’’радиокнопки”, но в тех случаях, когда пользователь
должен выбирать что-либо (например, страну проживания) из десятков или
сотен возможных вариантов, переключатели и группы флажков выглядят
крайне громоздко.
В таких ситуациях разумнее использовать списки, определяемые тегом
<seiect>. По умолчанию тег <seiect> задает список единственного выбора, но
применение булева атрибута multiple превращает элемент <select>...
</seiect> в список множественного выбора.
Список единственного выбора по умолчанию однострочный и выпадающий,
а список множественного выбора при относительно небольшом объеме (кон-
кретная величина зависит от браузера) занимает на экране столько же строк,
сколько позиций в нем содержится. Вертикальный размер списка и в том, и в
другом случае можно контролировать при помощи атрибута size, опреде-
ляющего число строк списка, одновременно отображающихся в окне браузе-
ра. Если значение атрибута size будет меньшим, нежели количество пунктов
в списке, браузер должен предоставить механизм прокрутки.
Собственно позиции списков описываются при помощи тега <option>, обра-
зующего элемент-контейнер.
(Листинг 6.6. Пример выпадающего сп|^ ^инственного выбора
<form action="">
<р>Каким браузером вы предпочитаете пользоваться?</р>
<р>
<select name="browser">
<option>Microsoft Internet Explorer</option>
<option>Opera</option>
<option>Mozilla Firefox</option>
coption selected="selected">MHe все paBHO</option>
</select>
</p>
298 Часть II. Применение веб-технологий стороны клиента для создания сайтов
<pxinput type=" submit’’ value=’’Проголосовать” /></р>
</form>
Внешний вид веб-формы, описанной в листинге 6.6, представлен на рис. 6.7.
Starts '
Каким браузером вы предпочитаете пользоваться?
; j Мне все равно
Проголосовать |
Stated О latest Headfene^ j
Каким браузером вы предпочитаете пользоваться?
Мне все равно
Microsoft Internet Explorer
Opera___________________
Мне все равно
Mozilla Firefox
IL1
Рис. 6.7. Форма с выпадающим списком; справа — иллюстрация процесса выбора
позиции из списка
В приведенном выше примере, являющемся, в сущности, переводом листин-
га 6.4 на язык списков, пользователю предлагаются все те же четыре варианта
ответа на вопрос ’’Каким браузером вы предпочитаете пользоваться?”, вклю-
чая пункт ’’Мне все равно”, выбранный по умолчанию благодаря применению
атрибута selected.
Если для тегов <option> не определить атрибуты value, то значения пользова-
тельских параметров, отправляемых на обработку, будут формироваться
из содержимого контейнеров <option>.. .<option>. Иными словами, если
пользователь выберет в нашем списке позицию "Mozilla Firefox” и нажмет
на кнопку Проголосовать, то обработчик получит такие данные:
browser=Moziiia+Firefox. Если же пользователь согласится на нейтральный
ответ "Мне все равно”, обработчику будет передана следующая информация:
browser=%cc%ED%E5+%E2%Fi%E5+%F0%E0%E2%ED%EE. Подобный сценарий зачастую
Гпава 6. Формы в HTML
299
не слишком удобен, поэтому при помощи атрибута value целесообразно ука-
зать более краткие и простые для анализа значения параметров. Именно так
мы и поступим в нашем следующем примере, демонстрирующем список
множественного выбора.
cform action=”">
срЖакими браузерами вам приходилось пользоваться?</р>
<р>
<select name=”browser” multiple="multiple” size=”8”>
coption value=”l”>Microsoft Internet Explorer 7.0</option>
coption value=”2”>Microsoft Internet Explorer 6.0c/option>
coption value=”3”>Microsoft Internet Explorer 5.xc/option>
coption value=”4”>0pera 8.0c/option>
coption value=”5”>0pera 7.xc/option>
coption value=”6”>0pera 6.xc/option>
coption value=”7”>0pera 5.xc/option>
coption value=”8">Mozilla Firefox 1.0c/option>
c/select>
</p>
cp>cinput type="submit" value="Поделиться опытом" />с/р>
c/form>
ngpexsa справка Q
| й file:///Z:/exarnple-^ О Прейти | Gt
___________________________________________' \_______________
Какими браузерами вам приходилось пользоваться?
[Microsoft Internet Explorer 7.0
Microsoft Internet Explorer 6.0
Microsoft Internet Explorer 5.x
Opera 8.0
Opera 7.x
[Opera 6.x
Opera5.x .....
Mozilla Firefox 1.0
Рис. 6.8. Работа co списком множественного выбора
300 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Внешний вид списка множественного выбора на веб-странице показан на
рис. 6.8.
Благодаря использованию атрибута size со значением 8, список будет зани-
мать по высоте ровно восемь строк— по количеству представленных в нем
позиций.
Если попадется подкованный посетитель и в ответ на наш вопрос ’’Какими
браузерами вам приходилось пользоваться?” выберет семь позиций (все за
исключением строки ’’Microsoft Internet Explorer 7.0”, ведь такого браузера
пока еще нет в природе), после нажатия на кнопку Поделиться опытом об-
работчик получит следующие данные: browser=2&browser=3&browser=4&brow-
ser=5&browser=6&browser=7&browser=8.
Кнопки
Один из видов кнопок, использующихся в веб-формах, мы уже, фактически,
рассмотрели. Речь идет о кнопке отправки пользовательских данных на обра-
ботку. Этот элемент интерфейса формируется при помощи тега cinput
type=”submit” .. .>. Дополнительно можно определить атрибут value, содер-
жимое которого будет использоваться в качестве надписи на кнопке, заменяя
зачастую не слишком привлекательный текст по умолчанию.
Собственно, в приведенных выше примерах мы уже неоднократно использо-
вали подобный элемент управления, поэтому останавливаться на нем больше
не будем.
Еще одна разновидность кнопок, определяемая тегом cinput type=
"reset" .. .>, предназначена для очистки (сброса в исходное состояние) по-
лей веб-формы. При нажатии на такую кнопку поля формы обретают перво-
зданный облик — освобождаются от введенных пользователем данных. Если
для тех или иных полей определено содержимое по умолчанию (например,
при помощи атрибутов value, checked или selected), после нажатия на кнопку
очистки формы эти установки восстанавливаются.
Очистить форму так, чтобы первоначальные установки по умолчанию не
принимались во внимание, при помощи кнопки сброса невозможно. Если та-
кая потребность возникнет, ее можно удовлетворить только посредством
скрипта, способного устанавливать значения полей формы.
Текст надписи на кнопке, осуществляющей очистку формы, можно, как и в
случае с кнопкой отправки данных, переопределить при помощи атрибута
value. Русскоязычный Internet Explorer по умолчанию отображает кнопку
очистки формы с надписью ’’Сброс”.
Гпава 6. Формы в HTML
301
! Листинг 6.8. Форма с возможностью сброса в первоначальное состояние
<form action=’’’’>
<р>Адрес вашего сайта:</р>
<p><input type=”text” size=”20” maxlength="100" name= ’’website”
value=’’http://www. ” /></p>
<р>Каким браузером вы предпочитаете пользоваться?</р>
<p><input type="radio” name=’’browser” value=”IE” /> Microsoft
Internet Explorer</p>
<p><input type=”radio" name=”browser" value="0pera" /> Opera</p>
<p><input type="radio" name="browser" value="FF" /> Mozilla
Firefox</p>
<p><input type="radio" name^"browser" value="all-one"
checked="checked" /> Мне все равно</р>
<p><input type="submit" value="Отправить данные" /> cinput
type="reset" value="Очистить форму" /></р>
</form>
Веб-форма, описанная в приведенном выше листинге, показана на рис. 6.9.
На рисунке слева — внешний вид формы в процессе заполнения, справа — ее
облик после нажатия пользователем кнопки Очистить форму.
Помимо кнопок, наделенных четкой функциональной нагрузкой, HTML пре-
дусматривает и ’’просто кнопки” — такие, поведением которых может управ-
лять разработчик сайта на свое личное усмотрение.
- uni xt
;• Адрес вашего сайта:
? Адрес вашего сайта:
| http.//www то| ; [http.//www ? Каким браузером вы предпочитаете пользоваться? г Microsoft Internet Explorer i Г Opera < Г Mozilla Firefox & Мне все равно
http://www.mo21ll.org/ |
5 Каким браузером вы предпочитаете пользоваться? $ С Microsoft Internet Explorer § С Opera i # Mozilla Firefox s Г Мне все равно
Рис. 6.9. Веб-форма с возможностью сброса к первоначальному состоянию
302 Часть II, Применение веб-технологий стороны клиента для создания сайтов
Подобные кнопки актуальны, прежде всего, в тех случаях, когда обработка
данных веб-формы происходит на стороне клиента при помощи JavaScript
или ему подобных языков сценариев. Эту тему мы будем обсуждать в главе 7,
но наипростейший пример я все-таки позволю себе привести прямо сейчас:
\ Листинг 64L Кнопка, вызывающаяокно
.S&1
cinput type=”button” value="Нажмите на кнопку!" onclick="alert(’Вы нажали
на кнопку, спасибо!’);" />
Атрибут onclick олицетворяет собой обработчик события ’’одиночный щел-
чок мышью”. Значением этого атрибута является конструкция JavaScript, вы-
зывающая открытие окошка предупреждения с текстовым сообщением: ”Вы
нажали на кнопку, спасибо!” (рис. 6.10).
Рис. 6.10. Результат нажатия на кнопку, описанную в листинге 6.9
Специальные возможности веб-форм
Тех элементов интерфейса форм, что мы обсудили в предыдущих разделах
этой главы, вполне достаточно для решения большинства практических
задач.
Гпава 6. Формы в HTML
303
Средства описания веб-форм, тем не менее, предоставляют разработчикам
сайтов еще целый ряд полезных инструментов, которым не грех уделить не-
сколько минут внимания.
Использование тега <label>
Примеры использования переключателей и флажков, приведенные в листин-
гах 6.3—6.5 и 6.8, вполне исправно функционируют, но они слегка неудобны
тем, что изменить состояние того или иного элемента пользователь может
лишь в том случае, если щелкнет прямо по ’’радиокнопке” или флажку — це-
литься нужно очень метко.
Между тем пользователи привыкли, что в аналогичных по внешнему виду
диалогах настройки различных прикладных программ достаточно щелкнуть
мышью по надписи, располагающейся напротив того или иного флажка, что-
бы включить или выключить соответствующую опцию.
Реализовать подобный эффект в веб-формах позволяет тег <1аЬе1>, опреде-
ляющий элемент-контейнер, внутрь которого заключается текст подписи к
флажку или "радиокнопке". Атрибут for тега <1аЬе1> указывает, к какому
именно элементу формы относится соответствующая метка. Значение этого
атрибута должно совпадать с содержимым атрибута id тега cinput>, опреде-
ляющего нужный флажок или ’’радиокнопку’’. Ниже приводится модифици-
рованный с учетом сказанного пример, описанный в листинге 6.4.
cform action=””>
срЖаким браузером вы предпочитаете пользоваться?с/р>
<р><input type=’’radio” name="browser" id=’’choicel” value=”IE” />
clabel for="choicel">Microsoft Internet Explorerc/labelx/p>
<pxinput type=’’radio” name="browser" id="choice2" value="0pera" />
clabel for=”choice2”>Opera</labelx/p>
cpxinput type="radio" name="browser" id="choice3" value="FF" />
clabel for=’’choice3’’>Mozilla Firefoxc/labelx/p>
Cpxinput type="radio" name="browser" id="choice4" value="all-one"
checked="checked" /> clabel for=’’choice4’’>MHe все равнос/1аЬе1х/р>
cpxinput type="submit" value="nporonocoBaTb" />c/p>
c/form>
Чтобы выбрать тот или иной вариант ответа, теперь не нужно целиться по
соответствующей ’’радиокнопке’’ — достаточно лишь щелкнуть по сопрово-
ждающей ее надписи (рис. 6.11).
304
Часть II. Применение веб-технологий стороны клиента для создания сайтов
5 Справка $.ид Переход ^йкм«дки Инструмента Справка 0 -?
*0 " СЙ ГСГ^^//7г7/е^прГ^ СJ Перейти j-j^—
Каким браузером вы предпошггаете пользоваться?
г Microsoft Internet Explorer
с Opera
Е Mozilla Firefox
о Мне все равно
^Прогхэлосовать j
Рис. 6.11. Форма, использующая тег <label>
Иерархические списки
При анализе списка множественного выбора, описанного в листинге 6.7, на-
блюдательный читатель, наверное, задался вопросом: а нельзя ли избавиться
от повторов названий браузеров при перечислении пунктов: ’’Microsoft
Internet Explorer 7.0", "Microsoft Internet Explorer 6.0", "Microsoft Internet
Explorer 5.x” и т. п.?
Действительно, упомянутый код можно сделать более элегантным, а внеш-
ний вид списка— более наглядным. В HTML предусмотрен тег <optgroup>,
позволяющий группировать пункты списков единственного и множественно-
го выбора, описываемых тегом <seiect>. Название тематической категории,
объединяющей несколько пунктов списка, задается в виде значения атрибута
label тега <optgroup>.
Видоизмененный пример из листинга 6.7:
i Листинг 6.1 L Группировка пунктов списка / <
<form action=””>
<р>Какими браузерами вам приходилось пользоваться?</р>
<р>
<select name=”browseг” multiple=”multiple" size="10">
Гпава 6. Формы в HTML
305
<optgroup label="Microsoft Internet Explorer">
<option value="l">7.0</option>
<option value="2">6.0</option>
<option value="3">5.x</option>
</optgroup>
<optgroup label=”Opera”>
<option value="4">8.0</option>
<option value="5">7.x</option>
<option value="6">6.x</option>
<option value="7">5.x</option>
</optgroup>
<option value="8">Mozilla Firefox 1.0</option>
</select>
</p>
<p><input type="submit" value="IIpoixonocoBaTb" /x/p>
</form>
File Edit View Bookmarks Tools Help
University of ЦусфПпЬ ChrQQSg а
Open Save
Small virtual international classrooms |
I MSftbXC 'j
. s /loc al host/Z: /examples/Об/11 /inc
6d
Какими браузерам! вам приходилось пользоваться?
Microsoft Internet Explorer
1 7.0
| 6.0
I 5.x
Opera
| 8.0
I 7.x
| 6.x
| 5.x
i Mozilla Firefox 1.0
: Проголосовать 1
Рис. 6.12. Список с использованием тематической группировки пунктов — отображение в Opera 8
306 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Пример возможного внешнего вида списка с группировкой пунктов показан
на рис. 6.12.
Щелчок на названиях категорий— словах "Microsoft Internet Explorer" и
"Opera" — ни к чему не приведет; они не являются пунктами списка, которые
можно выбирать. В большинстве графических браузеров названия категорий
отображаются полужирным курсивом. Красивее всего — с применением вы-
воротки, т. е. инверсии цвета — отображает названия категорий браузер
Opera 7-й и 8-й версий.
К сожалению, устаревшие браузеры, такие как Netscape 4, Opera 5 и даже IE5,
игнорируют теги <optgroup>, в связи с чем пользователи этих продуктов на-
верняка будут затруднены в понимании смысла иерархически организован-
ных списков. Поэтому тег <optgroup> рекомендуется использовать с большой
осторожностью.
Вложенные теги <optgroup> спецификациями HTML и XHTML не разре-
шены.
Поля ввода пароля
В некоторых ситуациях (классический случай — ввод посетителем сайта па-
роля при авторизации перед использованием того или иного сервиса) может
потребоваться укрыть пользовательский ввод от глаз потенциальных недоб-
рожелателей.
Для этой цели в HTML предусмотрена разновидность текстового поля, все
вводимые символы в котором отображаются "звездочками". Сформировать
такое поле можно при помощи тега <input>, снабженного атрибутом type со
значением password:
<р>Введите пароль: cinput type=’’password" name=’’password" size=’’10"
maxlength=’’10" /></p>
Если не считать "звездочек", то ведет себя такое поле точно так же, как и
простое однострочное текстовое поле типа text. Данные, введенные в поле
типа password, отправляются обработчику в открытом виде. Если применяет-
ся метод GET, то потенциальный недоброжелатель может из-за спины поль-
зователя подсмотреть пароль если не в самом поле, то в адресной строке
браузера, хотя это, конечно, несколько сложнее, тем более что информация о
пароле вполне может оказаться "за кадром", если адресная строка достаточно
длинная. Впрочем, решительный злоумышленник с гарантией найдет пере-
данный таким образом пароль, покопавшись в журнале посещенных страниц
(стандартный инструмент любого браузера). Поэтому информацию, претен-
дующую на какую бы то ни было конфиденциальность, необходимо отправ-
Гпава 6. Формы в HTML
307
лять только при помощи метода POST. Хотя от настоящих взломщиков и эта
мера не спасет — надежная защита возможна лишь при передаче данных по-
средством протоколов, использующих шифрование, но связанные с этим во-
просы лежат далеко за пределами тематики нашего повествования.
Скрытые поля
Как уже говорилось выше, скрытые поля никак не проявляют себя в визуаль-
ном плане и могут использоваться для хранения и отправки на обработку той
или иной служебной информации, которая не должна модифицироваться
пользователем.
Скрытое поле описывается уже до слез знакомым нам тегом <input> с атри-
бутом type, принимающим значение hidden. Имя передаваемого обработчику
параметра, соответствующего данному полю, как и обычно, определяется при
помощи атрибута name, а значение этого параметра задается посредством ат-
рибута value.
Ниже представлен пример формы, позволяющей осуществлять поиск средст-
вами "Яндекса" на отдельно взятом сайте web-anatomy.ru.
‘Листинг 6.12. Приручение "Яндекса"
<form action="http://www.yandex.ru/yandsearch">
<р>Поиск на сайте <а
hre f="http://www.web-anatomy.ru/">Web-Anatomy.Ru</a>
от <a href="http://www.yandex.ги/">Яндекса</а>:</p>
<P>
<input type="hidden" name="pag" value="u" />
<input type="hidden" name=”surl” value="web-anatomy.ru" />
<input type="text" name="text" size="20" maxlength="300" />
<input type="submit" value="Haйти" />
</p>
</form>
Пример результата поиска с использованием формы, описанной в листин-
ге 6.12, проиллюстрирован на рис. 6.13.
Помимо собственно поискового запроса (содержимое поля с именем text),
"Яндексу" передаются еще два параметра: рад со значением и и suri со значе-
нием web-anatomy.ru. Первая пара "параметр — значение" предписывает "Ян-
дексу" включать в отчет все найденные страницы, а не только одну наиболее
релевантную; вторая же пара, полагаю, разъяснений не требует— именно
она определяет область поиска.
308 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Орэдгсе gw Ййаекод йнструиенты
о '>
Поиск на сайте Web-Anatomy. Ru от Яндекса:
х 1 «ерс то» * НшгШ
Жг; > -
j___' ЕЗравкз ём. Пйуд йчстоумет» jtnpwe
kbhn» /Aahaiiju wsnrlav и
а >
"3 перейти рсГ
started U latent
Помощь Настройка поиска
лг j -------------------------------------------
/index Гверст“
Найдется всё 'р на eafttfc weteanafomy.ta Г” кв^г|Щы _ ч .....
Катило-- : Новости : Маркет I Энциклопедии : Картинки
НййТМ j '
расширенный поиск.
Бее службы
Результат поиска страниц— 1
Область поиска сайт — web-anatomy.ru
Объявления
2.
а выбора .или .выбор.£К9^&Ь1?2
Web-Anatomy Ru
. . предположить, что кодеров, привыкших создавать сайты при помощи
таблиц, в верстке слоями больше всего пугают некоторые органические
противоречия двух ...
Когда же речь заходит о верстке слоями, мы теряем возможность
"увязки" высот соседних блоков между собой, если, конечно, этот
параметр не задан жестко . .
www web-anatomy m/issue20/ (9 КБ)
Найденные слова
Верстка и дизайн
Любая полиграфия -
быстро, грамотно, с
учетом Вашего
бюджета
air-preps.narcd cj
К выпуску № 4 ("Неразрывные проблемы") - Web-Anatcw.Ru
"Нежелательно" совсем не означает "недопустимо", и верстка книги
весьма красноречиво демонстрирует этот тезис своим примером.
www web-anatomy.iu/issue4/index.shtml (6 КБ)
Найденные слова
Москва
Дизайн и верстка,
рисунок
Для полиграфии.
Профессиональные
художники.
Дизайн-бюро при
типографии.
К выпуску Ms 14 ("Разэилка трех дорог") - Web-Ariatomy.Ru
Если прибегнуть к табличной верстке, любой кодер, помудрив слегка с
вложенностью и атрибутом cellspacing в целях получения "плоской"
рамки, выдаст на- ..
www.web-anatomy ru/i$sue14/ (11 КБ)
Найденные слова
Страницы
Отсортировано гю релевантности по дате
Москва
Удойный выбор
Гипографии
Биржа заказов,продажа
оборудования, чат, место
встречи типографии и
РА
www. pr in (tender. пи
Ищешь «Урсы
3
ГрТОв©
Рис. 6.13. Форма поиска при помощи "Яндекса" по одному сайту
Предположим, пользователь введет в текстовом поле слово ’’верстка”. Тогда
полный URL, при помощи которого браузер обратится к "Яндексу”, будет
таким:
http://www.yandex.ru/yandsearch?pag=u&surl=web-anatomy.ru&text=
%E2%E5%F0%Fl%F2%EA%E0
Гпава 6. Формы в HTML
309
В сложных динамических приложениях скрытые поля веб-форм встречаются
сплошь и рядом.
Поля для выбора файла
Одним из наиболее сложных для новичков типов элементов интерфейса веб-
форм является поле для выбора локального файла. То есть, само по себе это
поле не представляет из себя чего-то из ряда вон выходящего— определен-
ные трудности вызывает обработка данных, полученных в результате запол-
нения поля такого типа.
Формируется поле для выбора файла (рис. 6.14) при помощи тега <input>
с атрибутом type, обладающим значением file. Как и обычно, атрибут name
позволяет определить имя этому полю; можно использовать атрибут size для
регулировки видимого горизонтального размера элемента:
<р>Файл картинки: <input type=’’file” name="picture" size="20" /></р>
ppw»» 8м* Caws у <
;«ji http: //ezhe. ru/cgi-bin/r/blogZ. cgi?blog= 1 Bdtype=edit8ud=381 3 перейп* |G?
. _ ...........................................................................................................................
Загрузить изображение:
Alt:
Удалить изображение:
Продолжить редактирование:
Рис. 6.14. Работа с полем выбора локального файла
А вот дальше начинаются сложности. Если значением атрибута enctype тега
<fom> не является тип muitipart/form-data и, соответственно, данные формы
не отправляются обработчику с использованием метода POST, максимум, что
получит обработчик— имя, но никак не содержимое файла. Большинство
распространенных браузеров при этом указывают полный путь к файлу в ло-
кальной системе, но Firefox полагает, что не царское это дело.
310
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Для того же, чтобы обработчик данных веб-формы получил от браузера со-
держимое локального файла (а такая возможность бывает полезной, напри-
мер, в тех случаях, когда возникает необходимость создать интерфейс для
загрузки пользователями, скажем, картинок на удаленный сервер), необходи-
мо соблюсти все указанные выше условия. Иными словами, атрибут enctype
тега <form> должен иметь значение muitipart/form-data, а атрибут method —
непременно значение post.
----:------------------------7dS4el$2O138
Content-Disposition: fr-» ™-data; name-4’login11
vasya
-------- 7dS4el$2OX38
Content-Disposition: torm-data; name»4'passwordu
.........7d $4eJLS20XM' .
form-data; name»4*comment4
p7Q109h
Content-Oisposition
Иллюстрация к, последнему выпуску '
Content-Disposition: form-data; name»’picture41; filename»4‘D:\tmp\photo.jpg4
...'................ъ
di;ям;g
\\a-A"'' 'Q ' л \ Av '
даоиио О/ '
GswaaBsspootooaEfQoiiaff-j[A*... яаоо.к лг-аоожшяд „. anas . - j
: ooanno !01QA,,0Qaq2El_S#38,+RMDSpBCr‘fBTCSU0S OODOCOCOO - 0 DrjOO!lAQau.,,,q
лр LOX-' 3 Л: жпеп"юпооОПЧб25бЕСПЧ,Ъ’' “pe [daMEcpKGQMAf)&820_]бнйнсш-юэиау tutm >fc_vx_h
ojniH<i>EOw_& t;o6oc+„a%yebtp?ODfciH, o6Kt„B6$ocf}s_ie3_^>jm4+xc nj;oTc_«}w.7
«1\_%„сР1И хн_ыбР)] [ce6i0TT>ac»03_Eaj<:B',0a’,+sia:ooyn_abD9_jj3X{S9KQ д i
n?K~DSHMMDu4h-_.8uCCZ .-
€KW0x43r(rH0 ’ $gf ’ ?’_п„3у„. Рсо_РС/11уХвуп - :N'‘b40C_dv_svzn3Hi3Ar,'_i_“e I ИБ0Т1_ТО.:_.' a"
ц_дзт_д@' _0bXvPX_00EC[). сшк-ьб _/&Q¥«RB [VOE. "УСыцц.' Obi гП04аНт ех)0ИЦУО" 5: F*>" nЛМ7
БЙ_ /Ьы>Яе_5ХПТЁТдМ’ О'ёшОЙ" UD„’ )С„.СОЫ_______br»y ’Н1Ь"асфИПв5ЦЗЗВХдвЗТ1 иокгёщ.
eim>jm)_&DKKTBUA34 _пудйР\%охм«>«„хйПд81МИл(док™(а>э„1ро:эсеи hsxuzko.zhkhxe.d
ggg
Рис. 6.15. Фрагмент HTTP-запроса при передаче JPEG-файла
на обработку серверному скрипту при помощи метода POST
Анализировать данные, переданные подобным образом, значительно слож-
нее, нежели разобрать пользовательские параметры, представленные в коди-
ровке URL. Мы, разумеется, не будем даже касаться этого — для общего раз-
вития я просто приведу на рис. 6.15 внешний вид содержимого тела НТТР-
сообщения запроса, включающего в себя "внутренности" отправленного
пользователем графического файла в формате JPEG. Помимо собственно
Гпава 6. Формы в HTML
311
файла (содержимое поля с именем picture), передаются данные еще трех тек-
стовых полей С именами login, password И comment.
Группировка элементов форм
В современной практике веб-разработки не так уж и редко встречаются об-
ширные формы, насчитывающие десятки полей различных типов. Сказанное
относится в первую очередь к административным интерфейсам продвинутых
систем управления содержанием сайтов (Content Management Systems, CMS),
в просторечии — "движков".
Само по себе количество элементов, задействованных в составе формы, вряд
ли способно сколько-либо заметно затруднить работу с ней. Основная причи-
на неудобства подавляющего большинства встречающихся на просторах
Всемирной паутины веб-форм кроется в недостаточно продуманной органи-
зации их интерфейса с точки зрения взаимного расположения элементов, яс-
ности текстовых пояснений к полям и т. д.
Теги <fieidset> и <legend>, предусмотренные в HTML, позволяют дополни-
тельно структурировать (как логически, так и визуально) сложные формы,
разбив их на относительно небольшие и однородные тематические группы
элементов.
В случае применения означенных тегов родственные поля веб-формы заклю-
чаются в контейнер <fieldset>.. .</fieldset>. Элемент <legend>.. .</legend>,
содержащий текстовый заголовок той или иной группы элементов, должен
следовать сразу же за открывающим тегом <fieidset>.
Сказанное демонстрируется на примере следующей веб-формы:
[Листинг 6.13. Веб-форма, использующая группир^^ояоей,»? J
<form action="">
<hl>Регистрация нового участника тайного общества борцов
за веб-стандарты</Н1>
<fieldset>
<1едепЬ>Персональная информация</1едепб>
<р>Ф. I4. O. : <br /xinput type=,,text" size=,,20"
maxlength="100" name="fio" /></p>
<р>Желаемый логин:<br /xinput type=”text” size=”20"
maxlength="50" name="login" /></p>
<р>Желаемый пароль :<br /xinput type=,,password”
size="10" maxlength=,,10" name="password" /x/p>
<р>Адрес электронной почты: <br /xinput type=,,text”
size=,,20" maxlength=”100” name=”email" /></p>
312 Часть II. Применение веб-технологий стороны клиента для создания сайтов
<р>Немного о себе:<Ьг /xtextarea cols="50" rows="3"
name="about"x/textareax/p>
</fieldset>
<fieldset>
<legend>JlH4Hbie предпочтения</1едегк1>
<р>Каким браузером вы предпочитаете пользоваться?</р>
<р><input type="radio” name="browser" id="choicel" value="IE" />
clabel for="choicel">Microsoft Internet Explorer</labelx/p>
Cpxinput type="radio" name="browser" id="choice2" value="Opera" />
clabel for="choice2">0perac/labelx/p>
Cpxinput type="radio" name="browser" id="choice3" value="FF" />
clabel for="choice3">Mozilla Firefoxc/labelx/p>
СрЖакая операционная система вам более всего по душе?с/р>
Cpxinput type="radio" name="system" id="choice4" value="Windows" />
clabel for="choice4">Microsoft Windows </label x/p>
Cpxinput type="radio" name="system" id="choice5" value="MacOS" />
clabel for="choice5">MacOSc/labelx/p>
Cpxinput type="radio" name="system" id="choice6" value="Linux" />
clabel for="choice6">Linuxc/labelX/p>
c/fieldset>
cpxinput type="submit" value="OTnpaBHTb анкету" /> cinput
type="reset" value="04HCTHTb форму" />с/р>
c/form>
Внешний вид веб-формы, использующей тематическую группировку элемен-
тов интерфейса, демонстрируется на рис. 6.16.
Оформление HTML-форм
’’Академический" облик веб-формы, описанной в листинге 6.13, равно как и
внешний вид всех остальных форм, рассмотренных ранее в этой главе, лишен
индивидуальности.
Как и следовало ожидать, на помощь приходит CSS.
В отличие от таблиц, однако, для веб-форм в CSS2 не определено каких бы то
ни было специальных свойств, поэтому обсуждать здесь почти нечего — чи-
тателю и так уже все наперед известно из глав 3 и 4.
Сделаю лишь несколько замечаний.
Поскольку множество разнородных элементов веб-форм задается одним и
тем же тегом <input>, при составлении CSS-правил, описывающих внешний
вид полей, возникает соблазн использовать селекторы атрибутов.
Гпава 6, Формы в HTML
313
}Группировка
Зйкп^и &KCTPYWW W*
:------—
I Регистрация нового участника тайного
j общества борцов за веб-стандарты
Рис. 6.16. Форма из листинга 6.13
Так, например, в соответствии со спецификацией CSS2, правило
input[type] {...}
будет применяться ко всем элементам, определенным при помощи тегов
<input>, для которых указаны атрибуты type, принимающие любые значения.
314 Часть II. Применение веб-технологий стороны клиента для создания сайтов
А правило вида
input[type="text"] {...}
относится только к таким элементам, которые описываются тегами <input>,
сопровождаемыми атрибутами type со строго определенным значением text,
т. е. к однострочным текстовым полям ввода.
К великому сожалению, столь изящный механизм, как селекторы атрибутов,
никак не поддерживается браузером от Microsoft. Следующий пример будет
отображаться так, как задумано, только в Opera 7—8 и Firefox.
; Листинг 6.14, Использование селекторов атрибутов
г для оформления веб-форм
<’DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
%> "http: //www. w3. org/TR/xhtmll/DTD/xhtmll-strict. dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>0(£opMneHne веб-формы средствами CSS</title>
<style type="text/css">
<! —
body {
margin: 3% 15%;
color: #000;
background: #fff;
font: 75% Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
input[type="text"], input[type®"password"], textarea {
background: #fOfOfO;
border: solid Ipx #ccc;
font-family: Lucida Console, monospace;
}
input[type="submit"], input[type="reset"] {
color: #fff;
background: #000;
font-weight: bold;
border: solid 2px #999;
}
fieldset {
border: solid lpx #ccc;
padding: lOpx;
}
Гпава 6. Формы в HTML
315
legend
{
font-weight: bold;
color: #c00;
}
</style>
c/head>
<body>
cform action="">
сИ1>Регистрация нового участникасЬг /xspan
style="font-size: 75%">тайного общества борцов за
веб-стандартыс/зрапх/Ы>
<fieldset>
<legend>Пepcoнaльнaя информацияс/1едепЬ>
<р>Ф. M. O.:<br /xinput type="text" size="20"
maxlength="100" name="fio" /x/p>
ср>Желаемый логин:<br /xinput type="text" size="20"
maxlength="50" name="login" /x/p>
ср>Желаемый пароль:<br /xinput type="password" size«"10"
maxlength=”10’' name="password" /x/p>
<р>Адрес электронной почты:<br /xinput type="text" size="20"
maxlength="100" name="email" /x/p>
ср>Немного о себе:<Ьг /xtextarea cols="50" rows="3"
names"about”x/textareax/p>
</fieldset>
<fieldset>
<legend>JlM4Hbie предпочтенияс/1едепа>
срЖаким браузером вы предпочитаете пользоваться?</р>
cpxinput type="radio" name="browser" id="choicel" value="IE" />
clabel for="choicel">Microsoft Internet Explorer</labelx/p>
cpxinput type="radio" name="browser" id="choice2" value="Opera" />
clabel for="choice2">Opera</labelx/p>
cpxinput type="radio" name="browser" id="choice3" value="FF" />
clabel for="choice3">Mozilla Firefoxc/labelx/p>
СрЖакая операционная система вам более всего по душе?с/р>
cpxinput type="radio" name="system" id="choice4"
value="Windows" /> clabel for="choice4">Microsoft
Windowsc/labelx/p>
Cpxinput type="radio" name="system" id="choice5" value="MacOS" />
clabel for="choice5">MacOSC/labelx/p>
cpxinput type="radio" name="system" id="choice6" value="Linux" />
clabel for="choice6">Linuxc/labelx/p>
c/fieldset>
316
Часть II. Применение веб-технологий стороны клиента для создания сайтов
<p><input type="submit" уа1ие="0тправить анкету" /> <input
type="reset" уа1ие="0чистить форму" /></р>
</form>
</body>
</html>
Отображение веб-страницы, описанной в вышеприведенном листинге, иллю-
стрируется на рис. 6.17.
; >Оформлемие ое&формы
Дайл Правка £ид Сораака г _ -
I L file:///Z7examples/06/f ® Перейти
Регистрация нового участника
тайного общества борцов за веб-стандарты
;••• Персональная информация.........................
: Ф. И. О.:
; ^Иванов и. и.
! Желаемый логин
; Hvanov
• Желаемый пароль:
j Адрес электронной почты:
: ivanowivanov.ru
: Немного о себе:
. Разрабатываю сайты с 1997 года|
; Личные предпочтения
• Каким браузером вы предпочитаете пользоваться?
О Microsoft Internet Explorer
С Opera
Mozilla Firefox
• Какая операционная система вам более всего по душе?
О Microsoft Windows
С MacOS
® Linux
Отправить анкету I Очистить форму
Готово
Рис. 6.17. Веб-форма, внешний вид которой определяется CSS-правилами,
использующими селекторы атрибутов
Гпава 6. Формы в HTML
317
Для того чтобы обеспечить желаемый внешний вид этой формы в 1Е, необхо-
димо поступиться элегантностью в пользу совместимости. Один из возмож-
ных вариантов решения проблемы — это определение индивидуальных клас-
сов для полей различного типа при помощи атрибута class (к примеру, тек-
стовые поля можно отнести к классу с именем наподобие textfield, а кнопки
объединить в класс с именем button).
5 Листийг 6Л5/ Пёрефбрмулировкапредь1дущегопримеравцеляхдбеспечения||
i совместимости с IE
Ь».........,.............................. ч....,................?
input.textfield, textarea {
background: #fOfOfO;
border: solid Ipx #ccc;
font-family: Lucida Console, monospace;
}
input.button {
color: #fff;
background: #000;
font-weight: bold;
border: solid 2px #999;
}
<р>Ф. I4. O. : <br /xinput type="text" size=”20”
maxlength=”100" name=”fio” class=”textfield" /></p>
<р>Желаемый логин:<br /xinput type=”text” size=”20”
maxlength=”50” name=”login” class=”textfield” /x/p>
<р>Желаемый пароль :<br /xinput type=”password” size=”10”
maxlength=”10” name="password” class=”textf ield" /x/p>
<р>Дцрес электронной почты:<br /xinput type="text" size="20"
maxlength="100" name=”email” class=’’textfield’’ /x/p>
<pxinput type="submit" уа1ие=”Отправить анкету" class="button" />
<input type="reset” value="Очистить форму” class="button" /х/р>
Так или иначе, возможности CSS по изменению внешнего вида элементов
интерфейса веб-форм отнюдь не безграничны.
При помощи CSS никоим образом нельзя повлиять на облик "радиокнопок” и
флажков, будь то их геометрические параметры или цвета; управление внеш-
ним видом списков тоже весьма и весьма проблематично.
Визуальный облик всех подобных элементов определяется индивидуальными
особенностями браузера, и это никак не противоречит идеологии HTML.
318 Часть II. Применение веб-технологий стороны клиента для создания сайтов
( Примечание
У некоторых разработчиков пользуются популярностью CSS-свойства, позво-
ляющие раскрашивать линейки прокрутки (относящиеся к окну браузера в це-
лом, К элементам наподобие <textarea>. . .</textarea> и т. Д.).
Нужно, однако, заметить, что все эти свойства (scrollbar-base-color,
scrollbar-face-color, scrollbar-track-color, scrollbar-arrow-color,
scrollbar-3dlight~color, scrollbar-highlight-color, scrollbar-shadow-
color, scrollbar-darkshadow-color) были придуманы компанией Microsoft, и
их никогда не было и не будет в рекомендациях W3C. Поэтому примеров на эту
тему не ждите: о запрещенных приемах мы говорить не станем.
Линейки прокрутки — это, вообще-то говоря, неотъемлемый элемент интер-
фейса браузера, но никак не собственность веб-страницы. Раскраска линеек
прокрутки при помощи нелегитимных CSS-свойств работает в Internet
Explorer 5.5 и 6.0 (а еще в Konqueror и некоторых других экзотических браузе-
рах), причем к IE вкупе с новомодным интерфейсом Windows ХР сказанное уже
не относится. В Opera, в Firefox и т. д. расцвечивание полос прокрутки не рабо-
тает — и это правильно. Меня удивляет, почему Microsoft ограничилась только
линейками прокрутки и до сих пор не додумалась дополнить CSS свойствами,
отвечающими за раскрашивание других элементов окна браузера или, чего уж
там мелочиться, Рабочего стола да Панели задач Windows...
Мне могут возразить — мол, на некоторых сайтах встречаются весьма ориги-
нальные и вольные по своему стилю элементы управления, включая те же
"радиокнопки", флажки и выпадающие списки. Спорить не буду — да, встре-
чаются. Только все эти вещи не имеют никакого отношения к предусмотрен-
ным в HTML веб-формам, а являют собой суррогат на основе Flash или гра-
фики в сочетании с JavaScript.
Вероятно, в рамках презентационных проектов подобные решения имеют
право на жизнь. Но жертвовать стопроцентной доступностью стандартных
средств в пользу эфемерных украшательств на сайтах информационной на-
правленности — не иначе как преступление по отношению к посетителям.
Практические примеры форм
Протестированные в различных браузерах и проверенные валидатором пол-
ные версии примеров, описанных в пронумерованных листингах данной гла-
вы, читатель сможет найти на компакт-диске, прилагаемом к этой книге,
в каталоге \examples\06, где 06 — не что иное, как номер текущей главы.
Документ, рассмотренный, например, в листинге 6.15, следует искать в ката-
логе \examples\06\l 5.
Но гораздо удобнее отыскать все необходимое при помощи электронного ог-
лавления компакт-диска, представленного файлом \index.html.
ГЛАВА 7
Создание интерактивных сайтов
при помощи языка сценариев
JavaScript и динамического HTML
У нас позади — порядка трех сотен страниц, всецело и полностью посвящен-
ных актуальным на настоящий момент (да и на обозримое будущее, надеюсь,
тоже) базовым концепциям разработки веб-сайтов.
В своих беседах, если не считать беглого экскурса, совершенного в главе 1
в целях расширения кругозора, мы обсуждали лишь ’’статику”, почти никак
не затрагивая "динамику".
Сколько-либо обстоятельный разговор о динамических технологиях стороны
клиента (а уж о серверных решениях — и подавно) вполне способен "потя-
нуть" на такую же по объему, если не более толстую, книгу. И мне хотелось
бы верить, что после прочтения моей книги читатель к подобным разговорам
будет уже вполне подготовлен.
На этой оптимистической ноте я вполне мог бы и завершить свое повество-
вание. Совесть, однако, не позволила мне так поступить. Посвятив целую
главу веб-формам и рассмотрев в деталях вопросы организации пользова-
тельского ввода, я не могу бросить читателя на полдороге. Ведь сам по себе
факт заполнения посетителем полей формы не имеет ровным счетом никако-
го смысла без последующей обработки введенной информации. А этот аспект
мы никак не рассматривали.
В предлагаемой вашему вниманию заключительной главе я планирую хотя
бы в самом первом приближении коснуться вопросов обеспечения интерак-
тивного взаимодействия сайта с пользователями средствами клиентских тех-
нологий. Речь пойдет, разумеется, не только об анализе данных веб-форм.
320 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Сценарии на стороне клиента —
ключ к интерактивности
В ’’академическую" эпоху развития Всемирной паутины существовал лишь
один механизм, позволявший наладить обратную связь веб-ресурсов с посе-
тителями — CGI (Common Gateway Interface, общий шлюзовой интерфейс).
Интерфейс CGI расширяет функциональность веб-сервера. Благодаря этой
технологии сервер приобретает способность исполнять на своей стороне про-
извольный программный код. При этом сервер имеет возможность переда-
вать исполняемому приложению некие пользовательские данные (отправляе-
мые, например, при помощи тех же веб-форм) и получать результаты его ра-
боты (как правило, в виде HTML-кода). Сгенерированные "на лету" страницы
отсылаются клиенту точно так же, как и покоящиеся на диске статические
документы.
Благодаря своей универсальности технология CGI живет и по сей день —
в качестве CGI-скриптов могут выступать приложения, написанные с
применением практически любых языков программирования, включая даже в
той или иной мере "усеченные" по своим возможностям языки командных
процессоров операционных систем. Разработчику достаточно лишь соблюсти
ряд общих требований, обсуждение каковых не входит в наши задачи.
Сегодня старый добрый интерфейс CGI оттесняют в сторону многочислен-
ные конкуренты, обладающие индивидуальными особенностями, достоинст-
вами и недостатками, но решающие, в сущности, похожие задачи. PHP (Per-
sonal Home Page, персональная домашняя страница); ASP (Active Server
Pages, активные серверные страницы) от компании Microsoft; Java-сервлеты и
JSP (Java Server Pages, серверные страницы на языке Java) от Sun
Microsystems; ColdFusion от Allaire— вот далеко не полный перечень совре-
менных серверных технологий.
Идея распространить "динамику" на клиентскую сторону принадлежит ком-
пании Netscape. Так, в виде одного из расширений браузера Netscape Naviga-
tor 2.0 миру был явлен язык сценариев JavaScript 1.0, разработанный Бренда-
ном Эйчем в 1995 г.
Microsoft не заставила себя долго ждать — поддержка JavaScript (правда, под
именем JScript, ибо название JavaScript— это собственность компании
Netscape; впрочем, о подобных нюансах сегодня мало кто вспоминает) по-
явилась в Internet Explorer 3.0.
Позже JavaScript был стандартизирован организацией ЕСМА (в прошлом —
European Computer Manufacturers Association, Европейская ассоциация произ-
водителей компьютеров; www.ecma-international.org), занимающейся сер-
тификацией решений в области информационных технологий и телекомму-
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 321
никаций (Information and Communication Technology, ICT) и бытовой элек-
троники (Consumer Electronics, СЕ), а затем обрел статус стандарта ISO. Со-
ответствующие стандарты имеют номера ЕСМА-262 и ISO 16262, а сам опре-
деляемый ими язык носит имя ECMAScript. Впрочем, ни это название, ни
придуманное в стенах Microsoft наименование JScript не прижились среди
разработчиков. Куда как чаще используется первоначальное имя языка, дан-
ное ему непосредственным создателем — JavaScript, и мы, пожалуй, тоже
будем придерживаться этой традиции.
( Примечание
Между тем, JavaScript, JScript и ECMAScript далеко не тождественны друг другу.
Более того, каждый из этих языков обладает индивидуальной нумерацией вер-
сий — во всем этом чрезвычайно легко запутаться.
Как вы понимаете, я призываю пользоваться стандартизированным вариантом
языка. Актуальной на настоящий момент является третья редакция стандарта
ЕСМА-262, выпущенная в декабре 1999 г.
Как правило, версии языка JavaScript обладают полной обратной совмести-
мостью с ближайшими ранее выпущенными редакциями стандарта ЕСМА-262,
но в то же время включают в себя дополнительные возможности, не преду-
смотренные стандартом.
Так, JavaScript до версии 1.2 включительно не дотягивал по ряду требований до
первой редакции стандарта ЕСМА-262. Версии 1.3 и 1.4 языка JavaScript обла-
дают обратной совместимостью с первой и второй редакциями стандарта.
(Вторая редакция ЕСМА-262 по сравнению с первой содержит лишь незначи-
тельные поправки "косметического" характера). JavaScript 1.5, в свою очередь,
полностью совместим с третьей редакцией ЕСМА-262.
Что касается поддержки JavaScript современными браузерами, то Internet
Explorer версий 5.x и 6.0 обнаруживает совместимость с JavaScript 1.3;
Opera 7.x поддерживает JavaScript 1.4; Opera 8.0 и Firefox 1.0 понимают
JavaScript 1.5.
Назначение и ключевые особенности JavaScript
Принципиальное отличие JavaScript от языков, рассмотренных нами ранее —
HTML и CSS — состоит в том, что JavaScript представляет собой самый на-
стоящий язык программирования.
HTML и CSS не являются таковыми даже в первом приближении. HTML, бу-
дучи языком разметки, выполняет задачи логического структурирования дан-
ных, a CSS описывает, каким образом эти данные должны отображаться на
экране, выводиться на печать, озвучиваться и т. д.
В этом смысле статическая веб-страница мало чем отличается, скажем, от
какого-нибудь письма или договора, сохраненного в формате документа
MS Word.
322 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Программа же в самом общем смысле — это набор команд, предписывающих
компьютеру выполнять те или иные активные действия — например, осуще-
ствлять операции над данными. Так вот, JavaScript позволяет создавать имен-
но программы.
Разумеется, JavaScript— чрезвычайно простой язык программирования.
В отличие, скажем, от С или C++ (универсальных языков программирования,
при помощи которых создана львиная доля системного и прикладного про-
граммного обеспечения для самых различных компьютерных платформ), он
не позволяет создавать автономный исполняемый код; не предусматривает
возможности управления памятью; не предполагает никаких манипуляций с
файловой системой ит. д. Но всего этого и не требуется от JavaScript —
у него совершенно другие задачи.
JavaScript не предназначен для создания самостоятельных приложений — он
задуман как компактный кроссплатформенный язык, легко интегрируемый в
различные прикладные программные продукты (например, браузеры) с
целью расширения функциональных возможностей последних. Программы,
создаваемые при помощи JavaScript, принято называть сценариями или
скриптами.
JavaScript является объектно-ориентированным языком. К сожалению, ни
строгое определение этого термина, ни наглядную его иллюстрацию привес-
ти здесь не представляется возможным — это требует наличия определенной
фундаментальной подготовки у читателя. Наша книга, тем не менее, ставит
основной своей целью отнюдь не занудное теоретизирование, а постижение
ключевых концепций на практике. Придет время — и сущность языка
JavaScript станет очевидной читателю из практических примеров, сопровож-
дающих эту главу. Пока же я лишь замечу, что объектно-ориентированный
подход— это одна из наиболее современных и распространенных на
сегодняшний день парадигм программирования.
Следующий тезис для кого-то может стать откровением, но язык JavaScript
как таковой (во всяком случае, на уровне спецификации ЕСМА-262) не со-
держит в себе ровным счетом никаких механизмов, позволяющих взаимодей-
ствовать с веб-формами и какими бы то ни было другими элементами веб-
страниц, управлять интерфейсом браузера и т. д.
Этот парадоксальный, казалось бы, факт объясняется предельно просто:
JavaScript может получать доступ к объектам, предоставляемым средой, в
которую тот интегрирован. Но непосредственно в ядре JavaScript такие объ-
екты не определяются.
Отсюда вытекает два качественно противоположных следствия.
С одной стороны, возможность расширения ядра JavaScript за счет объектной
модели, присущей тому или иному приложению, делает этот язык сценариев
весьма универсальным.
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 323
С другой же стороны, неизбежные разногласия, возникающие между объект-
ными моделями различных браузеров, поддерживающих JavaScript, так или
иначе препятствуют кроссбраузерной совместимости веб-сайтов, исполь-
зующих "динамику" на стороне клиента...
Понятие объектной модели документа
и динамического HTML
Факт наличия поддержки языка JavaScript той или иной версии в определен-
ном браузере ничего не говорит о способностях отображения этим браузером
интерактивных веб-страниц, созданных с применением данного языка. Эти
возможности определяются не столько совместимостью агента пользователя
с конкретной версией языка, сколько особенностями реализованной в браузе-
ре объектной модели.
Обратимся ненадолго к истории. Так, например, и Netscape 4, и IE4 поддер-
живают JavaScript 1.2, однако объектные модели этих двух браузеров разнят-
ся, словно день и ночь.
В сущности, объектная модель браузера Netscape 4 обеспечивает доступ к
весьма и весьма ограниченному кругу элементов HTML-документа, позволяя
модифицировать лишь малую часть их атрибутов и обрабатывать довольно
скудный набор событий, связанных с объектами веб-страницы.
Объектная модель же, впервые реализованная в 1Е4, шагнула далеко вперед.
Она обеспечила доступ ко всем элементам HTML, позволив сценариям изме-
нять содержимое этих элементов и значения всех присущих им атрибутов.
Это, в свою очередь, открыло возможность динамически в режиме реального
времени (под влиянием тех или иных событий, связанных, например, с дейст-
виями пользователя — об этом более подробно мы будем говорить далее)
перекраивать веб-страницы практически полностью, подвергая модификации
как содержание и структуру, так и оформление документов.
Помимо прочего, объектная модель, воплощенная в IE4, существует отдельно
от базовых функций J Script, предоставляя возможность взаимодействия с со-
бою другим языкам сценариев, поддерживаемым браузером Internet
Explorer— в частности, VBScript (скриптовый язык, основанный на синтак-
сисе языка программирования Visual Basic). Netscape 4, напротив, реализует
морально устаревшую на сегодня интегрированную модель, в которой базо-
вые функции JavaScript неразрывно связаны с предлагаемой этим браузером
инфраструктурой объектов.
С чего бы это мы столь подробно стали вдруг обсуждать особенности версий
браузеров, практически ушедших в небытие?.. Дело в том, что все это дает
нам возможность проследить историю возникновения технологии, широко
известной ныне под названием DHTML (Dynamic HTML).
324 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Прежде, чем раскрыть это понятие, хотелось бы заметить следующее. Каж-
дую из объектных моделей, предоставляемых браузерами, можно подразде-
лить на две части: одна из них дает сценариям возможность управления объ-
ектами (диалоги, окна, статусная строка и т. д.) интерфейса браузера, а другая
обеспечивает доступ скриптов к элементам документов.
Так вот, именно объектная модель документа, реализованная в IE4, является
более совершенной, чем аналогичная модель Netscape 4. Эта инициатива
Microsoft впоследствии легла в основу официальной рекомендации W3C —
DOM (Document Object Model, объектная модель документов) level 1, приня-
той в 1998 г. Позднее в качестве рекомендаций W3C были утверждены суще-
ственно более расширенные версии спецификации DOM — DOM level 2 (или
просто D0M2, 2000—2003 гг.) и DOM level 3 (DOM3, 2004 г.).
Согласно рекомендациям W3C, DOM — это независимый от платформы и от
какого бы то ни было конкретного языка интерфейс, позволяющий разнооб-
разным программам и сценариям получать доступ к содержанию, структуре и
представлению документов с возможностью динамически модифицировать
все эти три составляющие.
В отличие от прототипа— объектной модели документа, реализованной в
IE4, спецификации DOM, принятые Консорциумом W3C, распространяются
не только на HTML-документы, но и вообще на любые XML-документы, рас-
сматривая модель документа HTML как частный случай.
В основе DOM лежит понимание XML-документа как дерева объектов с из-
меняемыми свойствами. Так, например, для классической веб-страницы кор-
нем такого дерева будет выступать объект, соответствующий элементу
<html>...</html>.
Он называется родительским для объектов, соответствующих элементам
<head>.. .</head> и <body>.. .</body>, а те, в свою очередь, являются дочерни-
ми по отношению к нему. Все элементы дерева за исключением корневого
являются потомками корня, а сам корень, в свою очередь, называется их
предком. Все объекты, составляющие дерево, именуются узлами последнего.
Получить наглядное представление о дереве объектов того или иного доку-
мента позволяет, например, такой инструмент, как Инспектор DOM, вклю-
ченный в минимальный дистрибутив браузера Mozilla Firefox 1.0 (см. рис. 4.4
и 4.5).
Собственно DHTML — это не более чем лаконичная аббревиатура, введенная
в оборот фирмой Microsoft и обозначающая конгломерат технологий стороны
клиента в составе HTML, листов стилей и языков сценариев, объединенных
под знаменами DOM.
Ключевыми возможностями DHTML являются обеспечение динамического
формирования веб-страниц в процессе их загрузки и динамического измене-
Глава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 325
ния уже загруженных документов под влиянием действий пользователя ис-
ключительно на стороне клиента, без необходимости обращений к веб-
серверу.
Распространенные на сегодняшний день браузеры— Internet Explorer 5.x
и 6.0, Firefox 1.0, Opera 7.x и 8.0— вполне приемлемо поддерживают DOM1
и DOM2 (с некоторыми оговорками), что позволяет создавать в достаточной
мере кроссбраузерные сайты на основе DHTML с использованием HTML 4
или XHTML 1 в сочетании с языком сценариев JavaScript. О поддержке
DOM3 речи пока не идет, поскольку эта рекомендация слишком абстрактна
по отношению к реалиям сегодняшнего дня и актуальна в первую очередь
для разнообразных XML-приложений, каковыми современные веб-страницы
по ряду причин (см. примечание в разделе "Применение тега <object>” гла-
вы 2) пока еще нельзя назвать.
Почему JavaScript?
Помимо JavaScript, существует множество других языков сценариев похоже-
го предназначения. Это, например, уже упоминавшийся выше VBScript, Perl-
Script— ’’младший брат” языка программирования Perl (Practical Extraction
and Report Language), перенявший у прототипа мощные средства обработки
текстовых строк, и т. д.
Тем не менее исторически сложилось так, что JavaScript стал первым языком
сценариев, встроенным в веб-браузер. И, вероятно, именно по этой причине
JavaScript до сих пор является одним из самых распространенных скриптовых
языков, позволяющих создавать динамические веб-страницы, обрабатывае-
мые на стороне клиента.
Поддержка JavaScript, как уже говорилось, впервые появилась в таких ’’древ-
них” браузерах, как Netscape Navigator 2.0 и Internet Explorer 3.0. Все распро-
страненные сегодня графические браузеры поддерживают JavaScript тех или
иных версий (см. примечание в начале этого раздела), чего нельзя сказать о
других языках сценариев. Так, VBScript— это детище Microsoft, и встроен-
ная его поддержка имеется только в Internet Explorer. Исполнять сценарии,
написанные на VBScript, в других браузерах невозможно без предваритель-
ной установки соответствующих подключаемых модулей. Язык PeriScript,
насколько известно автору, не обрел встроенную поддержку ни в одном из
массовых браузеров — таким образом, непременным условием его использо-
вания является применение особых плагинов.
( Примечание
JavaScript находится в таких же родственных отношениях с языком Java, в ка-
ких VBScript относится к Visual Basic или PeriScript— к Perl. Иными словами,
326 Часть II. Применение веб-технологий стороны клиента для создания сайтов
JavaScript использует синтаксис и избранные ключевые концепции Java, но и
те — с весьма существенными упрощениями.
Большой ошибкой было бы считать, что Java и JavaScript — это одно и то же.
Равно как и большой ошибкой было бы полагать, что JavaScript — это одна из
разновидностей Java. JavaScript даже не является подмножеством Java — это
совсем разные языки программирования, служащие совершенно различным
задачам.
Java, тем не менее, весьма активно используется в веб-программировании,
причем как на стороне клиента (в этом случае Java-приложения называются
аплетами, applets), так и на стороне сервера (при этом программные модули,
написанные на Java, именуются сервлетами, servlets). При всем при том Java-
аплеты распространены на современных веб-ресурсах в существенно меньшей
степени, нежели JavaScript-сценарии.
Из всего сказанного следует важный вывод. Работоспособность сайтов, ис-
пользующих те или иные технологии стороны клиента, тесно взаимосвязана с
программной конфигурацией локальной машины пользователя— прежде
всего, с такими аспектами, как тип, версия и настройки браузера.
Функционирование серверных веб-приложений, напротив, никак не зависит
от конфигурации клиентской машины. Иными словами, если пользователь
может отключить в своем браузере JavaScript или же прибегнуть к услугам
браузера, вообще не поддерживающего какие бы то ни было языки сценари-
ев, то вот "отключить CGI-скрипты" у посетителя сайта нет никакой возмож-
ности.
Между тем, веб-разработчик никоим образом не может контролировать кон-
фигурацию программного обеспечения клиентских машин (за исключением
случаев, когда речь заходит не о создании общедоступных веб-ресурсов, раз-
мещаемых в Интернете, а о проектировании сайтов для корпоративных ин-
трасетей). А вот конфигурацией веб-сервера, напротив, администратор сайта
вполне может управлять (в большей или меньшей степени — в зависимости
от специфики используемого хостинга).
Следует иметь в виду, что использование DHTML, Java-аплетов, Flash,
ActiveX-компонентов и прочих технологий клиентской стороны, имеющих
ограниченную поддержку, в качестве безальтернативных решений может по-
влечь серьезные проблемы для пользователей.
Решения, кажущиеся сколь угодно красивыми, но лишающие хотя бы одного
потенциального посетителя возможности полного доступа к содержанию и
ключевым сервисам сайта, вредны. Применять DHTML и другие клиентские
технологии нужно с умом — так, чтобы пользователь, чей браузер не под-
держивает их, не смог заметить предвзятого к себе отношения.
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 327
Обработчики событий
Одним из ключевых аспектов применения сценариев на стороне клиента яв-
ляется обработка событий, связанных с разнообразными действиями поль-
зователя или браузера.
Так, например, событиями являются щелчок мышью по тому или иному эле-
менту на странице; нажатие на кнопку отправки данных веб-формы; загрузка
страницы в окно браузера или, напротив, удаление документа оттуда (связан-
ное, скажем, с переходом пользователя на другую страницу).
Наиболее простой способ воспользоваться возможностью обработки событий
состоит в применении предусмотренных в HTML специальных атрибутов,
имена которых начинаются с on. С одним подобным атрибутом, onclick, мы
уже познакомились в предыдущей главе (см. листинг 6.9). Пришло время
"огласить весь список".
Обработчики событий, вызываемых мышью и клавиатурой, могут назначать-
ся для подавляющего большинства элементов HTML-документа. Исключе-
ниями являются лишь такие элементы, как <htmi>.. .</html>,
<head>.. .</head>, <title>.. .</title>, <style>.. .</style> И T. П., ПО которым,
впрочем, и безо всяких запретов нельзя щелкнуть мышью, даже если очень
того захотеть.
Ниже перечислены атрибуты обработчиков событий, связанных с мышью и
клавиатурой, а также сами ситуации, на которые соответствующие обработ-
чики реагируют:
□ onclick — одиночный щелчок мышью;
□ ondblclick — двойной щелчок мышью;
□ onmousedown — нажатие кнопки мыши;
□ onmouseup — отпускание кнопки мыши;
□ onmouseover — помещение курсора мыши в область, занимаемую соответ-
ствующим элементом HTML;
□ onmousemove — любое передвижение курсора мыши внутри области, заня-
той соответствующим элементом веб-страницы;
□ onmouseout— выход курсора мыши за пределы области, занимаемой эле-
ментом;
□ onkeypress — нажатие на клавишу и последующее ее отпускание;
□ onkeydown — нажатие на клавишу;
□ onkeyup — отпускание клавиши.
328 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Существуют события, свойственные меньшему кругу элементов, нежели пе-
речисленные выше, например, следующие:
О onfocus — фокусировка (выделение) того или иного элемента. Применяет-
ся для элементов, заданных такими тегами, как <а>, <input>, <1аЬе1>,
<seiect>, <textarea> и некоторыми другими, оставшимися за пределами
нашего рассмотрения. В ряде случаев совпадает с onmouseover;
О onblur— расфокусировка элемента. Событие, противоположное onfocus.
Принимается теми же самыми тегами. В некоторых случаях совпадает с
onmouseout;
О onseiect — выделение некоторой части или всего текста в однострочном
текстовом поле ввода веб-формы (cinput type="text" .. .>) либо в много-
строчной области (<textarea>. . . </textarea>);
О onchange — изменение данных в поле формы. Применяется к элементам,
определенным тегами <input>, <select> И <textarea>;
О onsubmit— нажатие кнопки отправки данных веб-формы. Применяется к
тегу <form>;
О onreset — активизация кнопки сброса веб-формы в исходное состояние.
Назначается тегу <form>;
□ onload — загрузка HTML-документа в окно браузера. Атрибут допускает-
ся для тега <body>;
О onunioad — удаление загруженного ранее HTML-документа из окна брау-
зера. Назначается для тега <body>.
Значениями перечисленных выше атрибутов могут выступать либо непосред-
ственно небольшие конструкции JavaScript, как в примере из листинга 6.9,
либо вызовы функций, определенных во внутренних или внешних скриптах.
Практических примеров пока не привожу — предлагаю прежде ознакомиться
с возможными способами связи сценариев с веб-страницами, а также с азами
самого языка программирования JavaScript.
Использование DOM позволяет оперировать событиями существенно более
тонко. Обратившись к соответствующему объекту, можно, например, полу-
чить код нажатой клавиши; выяснить, сопровождалось ли то или иное собы-
тие нажатием клавиш <Alt>, <Ctrl> или <Shift>; осведомиться о горизонталь-
ной и вертикальной координатах произошедшего события относительно эк-
рана или границ области просмотра и т. д. Подробное рассмотрение всех этих
возможностей, однако, лежит за пределами тематики этой книги.
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 329
Связь скриптов с веб-страницей
С одним из способов связи сценариев с веб-страницей мы, в сущности, уже
познакомились. Небольшие скрипты могут размещаться непосредственно в
значениях атрибутов обработчиков событий. При этом операторы (команды)
языка JavaScript должны отделяться друг от друга знаком точки с запятой
Синтаксис языка программирования JavaScript, тем не менее, предполагает
активное использование различных специальных символов, которые могут
быть истолкованы как элементы управляющих конструкций HTML (”<”, ”>”,
ит. п.), причем заменить их в JavaScript-коде на соответствующие
мнемоподстановки HTML мы не имеем права — это приведет к синтаксиче-
ским ошибкам в коде сценария.
Конструкции JavaScript, использующие спецсимволы, аналогичные перечис-
ленным выше, весьма нежелательны в значениях атрибутов HTML.
Связывать сценарии с веб-страницами можно и другим способом — HTML
предусматривает для этих целей тег <script>.
Скрипты могут быть как внутренними, так и внешними по отношению к веб-
странице. Код внедренного сценария должен размещаться между тегами
<script> и </script> подобно тому, как код внедренного в HTML-документ
листа стилей располагается между тегами <styie> и </style>.
Как и в случае с листами стилей, необходимо заключить код внутреннего
скрипта внутрь HTML-комментария. Это позволит старым браузерам, не
поддерживающим JavaScript, игнорировать содержимое элемента
<script>... </script>, а также разрешит нам использовать в коде скрипта лю-
бые спецсимволы.
Опять же, как и в случае с листами стилей, если предполагается использова-
ние ’’истинного XHTML”, т. е. MIME-типов text/xml, appiication/xml или
appiication/xhtml+xml (но не text/html), указываемых для содержимого веб-
страниц при помощи поля content-type заголовка HTTP-сообщения ответа
сервера, встроенные в XHTML-документ скрипты необходимо организовы-
вать в виде разделов CDATA (см. главу 3). При этом в целях обратной со-
вместимости со старыми браузерами можно использовать комбинированное
обрамление для кода скриптов, например, такое:
<script type="text/javascript">
<!--//—><! [CDATA[//><!--
//—><!]]>
</script>
330 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Последовательность // начинает однострочный комментарий в JavaScript.
Наряду с такой разновидностью комментария, в JavaScript возможны и мно-
гострочные комментарии, каждый из которых начинается с символов /* и
заканчивается */. Такая форма комментариев, напомню, используется в CSS,
а ’’ножки растут" у нее из языка программирования С.
Учитывая тот факт, что "истинный XHTML" работает пока только в теплич-
ных условиях и на практике встречается крайне редко, в наших примерах
мы ограничимся более простым вариантом маскировки кода внутренних
скриптов:
<script type="text/javascript">
<! —
//—>
</script>
Для связи веб-страницы с внешними сценариями используется все тот же тег
<script>. В этом случае для него должен быть определен атрибут src, содер-
жащий URI связываемого со страницей скрипта. Файлы сценариев, написан-
ных на языке JavaScript, обычно имеют расширение js, хотя это и не является
обязательным условием:
<script type="text/javascript" src="myscript. js”x/script>
( Примечание )
В соответствии со спецификацией XHTML 1.0 Strict, допустима и сокращенная
форма записи — <script ... />, однако большинство браузеров интерпрети-
рует ее с ошибками.
Атрибут type является обязательным для тега <script> и в случае, если соот-
ветствующий сценарий написан с использованием языка JavaScript, должен
принимать значение text/javascript. (Для ECMAScript определен свой соб-
ственный М1МЕ-тип— text/ecmascript, но, к сожалению, многими браузе-
рами он не поддерживается.)
В то же самое время, атрибут language, знакомый опытным разработчикам,
упразднен и не поддерживается типом документов Strict.
Элементы <script>.. .</script> могут размещаться в любых местах разделов
<head>.. .</head> или <body>.. .</body> HTML-документа. С одним докумен-
том может быть связано несколько скриптов.
Внешние скрипты принципиально ничем не отличаются от внутренних — а
точнее, для сценариев справедливы все оговорки, обсуждавшиеся в главе 3
применительно к различиям внешних и внутренних листов стилей. В даль-
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 331
нейших примерах в целях экономии бумаги мы будем пользоваться скрипта-
ми, внедренными в HTML-документы.
Собственно, первый пример — модификация листинга 6.9, иллюстрирующая
применение тега <script>:
Листинг 7.1. Применение тега <script> для внедрения сценария > >. j
[ в HTML-документ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>KHonKa, вызывающая окно предупреждения</^^е>
</head>
<body>
<script type="text/javascript">
<!--
function showAlert()
{
alert(’Вы нажали на кнопку, спасибо!');
}
//—>
</script>
<pxinput type="button" value="Нажмите на кнопку!"
onclick="showAlert();" /></р>
</body>
</html>
С точки зрения функциональности вышеприведенный код абсолютно иден-
тичен примеру из листинга 6.9, однако отличается от него тем, что значением
атрибута onclick тега <input>, описывающего кнопку^ нажать на которую мы
призываем пользователя, является вызов функции с именем showAlert, объяв-
ленной в скрипте, встроенного в документ. Функция — это поименованный
фрагмент программного кода, который, будучи однажды определенным, мо-
жет выполняться многократно по вызову. Вся дальнейшая обработка собы-
тия, связанного с нажатием на кнопку, таким образом, возлагается на эту
функцию. Тело функции (код, заключенный в фигурные скобки после объяв-
ления функции, использующего ключевое слово function) состоит из единст-
332 Часть II. Применение веб-технологий стороны клиента для создания сайтов
венной строчки, вызывающей окно предупреждения. Ранее именно эта строка
кода фигурировала в нашем примере в виде значения атрибута onciick.
Еще один возможный способ связи скриптов с веб-страницами состоит в ис-
пользовании псевдопротокола (имени схемы URL) javascript в гипертексто-
вых ссылках. Предлагаю видоизменить предыдущий пример с тем, чтобы вы-
зов окна предупреждения осуществлялся при активации пользователем ги-
перссылки (рис. 7.1). При этом никакие атрибуты обработчиков событий не
используются.
Листинг 7.2. Использование псевдопротокола javascript в гиперссылках
<script type=”text/javascript">
function showAlert()
{
alert(’Вы щелкнули по ссылке, спасибо!’);
}
//—>
</script>
<р><а href=" javascript: showAlert (); ">Щелкните по ссылке! </ах/р>
£айя Правка Переход Закладки ^трументы справка
| Z : ///Z: /examples/07, Т © ПареЙТп (iGt
^Mellins Started Uj latest Headnas
Щелкшгге по ссыпке!
вы ахвпкнуян по ссылку спасибо
| Гагоав
Рис. 7.1. Результат щелчка по ссылке, описанной в листинге 7.2
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 333
Впрочем, как вы понимаете, тот же самый эффект мы могли бы получить и
безо всяких функций, вот так:
<а href="javascript:alert('Вы щелкнули по ссылке, спасибо!');">Щелкните
по ссылке!</а>
Функции JavaScript могут не только совершать те или иные заданные дейст-
вия, но и получать аргументы, влияющие на ход выполнения функции, а
также возвращать некоторые значения во внешнюю среду.
Подробнее обо всем этом мы поговорим в следующем разделе. Пока же хоте-
лось бы остановиться вот на чем: если та или иная функция, являющаяся
целью гиперссылки, использующей псевдопротокол javascript, возвращает,
какое бы то ни было значение, то браузер будет замещать документ, загру-
женный в текущее окно, возвращаемым функцией результатом.
В нижеследующем примере функция с именем generateDocument возвращает
(при помощи оператора return) строку, при ближайшем рассмотрении оказы-
вающуюся действительным XHTML-документом. Этот документ загружается
в окно браузера после того, как пользователь перейдет по гиперссылке, опи-
сываемой тегом <а> с атрибутом href, принимающим значение
j avascript:generateDocument();.
f Листинг 7.3. Формирование документа при помощи JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<1111е>Формирование нового документа</1111е>
</head>
<body>
<script type=”text/javascript">
<! —
function generateDocument()
{
return(’<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-
^>strict.dtd">\n\n<html>\n\n<head>\n <title>HoBbM
flOKyMeHT</title>\n</head>\n\n<body>\n <Н1>Новый
документ</И1>\п <р>Этот документ сформирован при помощи
JavaScript</p>\n</body>\n\n</html>');
}
334
Часть II. Применение веб-технологий стороны клиента для создания сайтов
//—>
</script>
<рха href="javascript:generateDocument О ;’^Сформировать новый
документ</ах/р>
</body>
</html>
На рис. 7.2 вверху показан первоначальный внешний вид страницы, описан-
ной в вышеприведенном листинге, а внизу— результат щелчка по гипер-
ссылке ’’Сформировать новый документ”.
..........................................
it Фйрмирееанке доьрлетз -
' Опжсяжъ Обновить
Адрес.* Z:\examples\07\03\mdex.html
Сформировать новый документ
3 ДсжУнент Mirrn«of|
Сервис Снр-авка
Ад|Ж Z: \examples\07\03\lndex. html
Журнал (
3
Новый документ
Этот документ сформирован при помощи JavaScript
Рис. 7.2. Формирование нового документа при помощи JavaScript
Пары символов \п, в обилии фигурирующие в строке, возвращаемой функци-
ей generateDocument, относятся к разряду так называемых escape-последова-
тельностей. Подобными сочетаниями знаков во многих языках программи-
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 335
рования кодируются те или иные специальные символы. Собственно после-
довательность \п обозначает переход на новую строку.
К сожалению, документ, генерируемый описанным выше скриптом, некор-
ректно отображается в Firefox вследствие того, что в похожих ситуациях оз-
наченный браузер по неведомым причинам искажает значения, содержащие
русские буквы... Та же самая болезнь наблюдается у Firefox и при попытке
передачи данных веб-форм по электронной почте за счет указания почтового
адреса в значении атрибута action тега <form>. В остальных распространен-
ных ныне браузерах и даже в Netscape 4 вышеприведенный код работает без
каких бы то ни было трудностей.
Тем не менее, существует ряд других серьезных проблем, связанных с при-
менением ссылок, использующих псевдопротокол javascript. В частности,
пользователь не сможет сделать так, чтобы документ, формируемый подоб-
ным образом, открывался в новом окне или в новой вкладке (если, конечно,
сам скрипт не создает нового окна принудительно). К тому же, документы,
генерируемые при помощи JavaScript, не подвластны поисковым системам.
Учитывая все сказанное, я рекомендовал бы по возможности воздерживаться
ОТ гиперссылок, использующих псевдопротокол javascript — для любой за-
дачи можно найти альтернативное решение.
JavaScript как язык программирования
Определение любого языка программирования включает в себя следующие
основные составляющие: алфавит (перечень допустимых символов); список
зарезервированных слов’, синтаксис (правила сочетания символов и зарезер-
вированных слов между собой); и семантику (описание смысла тех или иных
конструкций языка).
Мне хотелось бы лишний раз подчеркнуть, что эта книга не ставит своей
целью рассмотрение JavaScript и DHTML в полноте. В рамках текущего раз-
дела я предлагаю вниманию читателей лишь краткий обзор ключевых конст-
рукций и правил языка JavaScript, знакомство с которыми жизненно необхо-
димо для первых шагов самостоятельного творчества на этой ниве.
Основы синтаксиса, переменные
и базовые типы данных
Программа на языке JavaScript — это последовательность операторов, разде-
ленных символом точки с запятой (’’;”)• В том случае, если оператор заканчи-
вается переходом на новую строку, точку с запятой после него можно не ста-
вить — это, вероятно, может показаться удобным, но такая схема в известной
336
Часть II. Применение веб-технологий стороны клиента для создания сайтов
степени ограничивает возможности по организации многострочных опера-
торов.
Пробелы, символы табуляции и новой строки между лексемами (последова-
тельностями допустимых символов языка, обладающими самостоятельным
смыслом) не учитываются, поэтому их вполне можно использовать для соз-
дания уже знакомой нам ’’лесенки” отступов, повышающей удобочитаемость
кода.
JavaScript чувствителен к регистру символов. Ключевые слова, определенные
в языке, необходимо записывать строчными буквами. В идентификаторах —
определяемых программистом в именах переменных, функций, объектов
и т. п. — можно использовать знаки как верхнего, так и нижнего регистра, но
следует учитывать, ЧТО, например, идентификаторы myFunction И MyFunction с
точки зрения JavaScript совершенно различны. Спецификация ECMAScript
разрешает использовать в идентификаторах буквы из набора Unicode, но во
избежание потенциальных проблем на практике я рекомендовал бы ограни-
читься только латинскими буквами. Кроме этого, можно использовать циф-
ры, знаки подчеркивания и доллара (’’$’’), но следует иметь в виду, что
идентификатор не может начинаться с цифры.
JavaScript содержит ряд ключевых слов, обладающих определенной смысло-
вой нагрузкой, а также некоторое количество слов, зарезервированных "на
будущее". Так или иначе, попытка их использования в качестве идентифика-
торов приведет к ошибке. Привожу перечень всех подобных слов (в соответ-
ствии СО стандартом ЕСМА-262): abstract, boolean, break, byte, case, catch,
char, class, const, continue, debugger, default, delete, do, double, else, enum,
export, extends, false, final, finally, float, for, function, goto, if, implements,
import, in, instanceof, int, interface, long, native, new, null, package, private,
protected, public, return, short, static, super, switch, synchronized, this,
throw, throws, transient, true, try, typeof, var, void, volatile, while, with.
Ни один язык программирования не обходится без переменных. Перемен-
ная — это поименованная область памяти, содержащая те или иные данные, к
которым программа может многократно обращаться и при необходимости
модифицировать их.
Переменные в JavaScript, в отличие, например, от языков С или C++, являют-
ся нетипизированными. Это означает, что одна и та же переменная в процес-
се работы программы может хранить значения различных типов (например,
числа, строки или более сложные структуры данных, которых мы коснемся
ниже).
Все переменные в JavaScript необходимо предварительно объявлять, пользу-
ясь оператором var:
var х; // Объявляем переменную с именем х
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 337
Одновременно с объявлением можно сразу же инициализировать перемен-
ную, наделив ее каким бы то ни было начальным значением:
var у = 5; /* Объявляем переменную с именем у
и одновременно присваиваем ей числовое значение 5 */
Ранее объявленной переменной можно в любой момент присвоить какое
угодно значение:
у = ’игрек’; /* Ранее объявленной переменной у присваиваем
строковое значение ’игрек’. Предыдущее
значение этой переменной утрачивает свою актуальность */
Буквально представленные фиксированные значения, такие как 5 или ’игрек’,
фигурирующие в наших примерах, называются литералами. Между тем, мы
можем присвоить какой-либо переменной значение другой переменной; зна-
чение, возвращаемое некоей функцией и т. д.:
var pi = 3.14159265; // Заносим число "пи" в переменную pi
у = pi; /* А теперь присвоим переменной у значение переменной pi.
Отныне у нас две переменных с одинаковыми значениями */
Примечание J
Переменные в JavaScript различаются областью видимости. Так, переменные,
объявленные внутри функций, являются локальными — каждая из них доступна
только в пределах "своей" функции. К переменным же, определенным вне
функций, можно получить доступ из любого скрипта, относящегося к данной
веб-странице. Такие переменные называются глобальными.
Строковые литералы необходимо заключать в кавычки — можно использо-
вать как одинарные, так и двойные кавычки, причем внутри строки, заклю-
ченной в одинарные кавычки, допустимы двойные, и наоборот. Если же в
составе одной и той же строки необходимо использовать оба вида кавычек,
на помощь приходят escape-последовательности. Так, пара символов \’ оли-
цетворяет собой одинарную кавычку, а сочетание \" — двойную:
// Это совершенно одинаковые строки:
var stringl = ’пример строки’;
var string2 = "пример строки";
// Строка, содержащая кавычки:
var string3 = ’<р style="text-align: center">A63au</p>';
// Такая же точно строка:
var string4 = "<р style=\"text-align: center\">A63au</p>";
JavaScript предусматривает также булевы величины. Любая такая величина
может иметь одно из двух возможных значений: ’’истина” либо ’’ложь", кото-
рые определяются ключевыми словами true и false соответственно.
338 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Массив — это структура данных, позволяющая организовать упорядоченное
множество значений. Один и тот же массив в JavaScript, в отличие от C/C++,
может содержать данные различных типов— к примеру, числа, строки и бу-
левы величины одновременно.
Пример объявления и инициализации массива:
var cities = [’Москва’, ’Санкт-Петербург’, ’Новосибирск’];
Этот массив состоит из трех элементов. Обратиться к тому или иному эле-
менту массива можно при помощи номера — индекса. Элементы массива ну-
меруются с нуля, поэтому индекс последнего элемента массива всегда на
единицу меньше общего числа элементов, составляющих массив. Все масси-
вы в JavaScript являются динамическими— количество элементов в каждом
из них можно изменить в любой момент по ходу выполнения программы.
Обратиться к определенному элементу массива можно следующим образом:
var SPb = cities[1]; // Читаем второй элемент массива
cities[3] = ’Екатеринбург’; // Добавляем к массиву четвертый элемент
Введение
в объектно-ориентированное программирование
Некоторые языки программирования, например Perl, предусматривают тип
данных, именуемый ассоциативным массивом или хэшем. От обычного мас-
сива хэш отличается тем, что его индексами (а точнее, ключами— так пра-
вильнее с терминологической точки зрения) могут являться данные произ-
вольного типа, а не обязательно порядковые номера. Иными словами, ассо-
циативный массив олицетворяет таблицу, состоящую из некоторого
количества пар "имя — значение". Таблица соответствия названий городов
численности проживающего в них населения, которую мы всячески препари-
ровали в главе 5 — яркий пример ассоциативного массива.
Так вот, составной тип данных, де-факто являющийся ассоциативным масси-
вом, в JavaScript именуется объектом, сосредотачивая вокруг себя всю мощь
идеологии объектно-ориентированного программирования.
Объект обладает совокупностью свойств, каждое из которых характеризуется
именем и значением. Всякий объект относится к определенному классу. При
этом говорят, что объект наследует свойства этого класса. Один класс может
наследовать свойства другого класса; объект может наследовать свойства не-
скольких классов.
Новый объект без каких бы то ни было свойств создается при помощи кон-
структора объектов (использующего ключевое слово new) следующим об-
разом:
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 339
var mybook - new Object(); /★ Создание нового пустого объекта
с именем mybook */
В этой конструкции Object— это имя определенного в ядре JavaScript над-
класса, свойства которого наследуются всеми без исключения объектами.
В дальнейшем созданному нами объекту в любое время может быть назначе-
но любое свойство:
mybook.title = "HTML, CSS, скрипты: практика создания сайтов";
mybook.author = "Артемий Ломов";
mybook.publisher = "БХВ-Петербург";
mybook.year = 2005;
Здесь mybook ("моя книга")— имя объекта; title ("название”), author (’’ав-
тор”), publisher ("издательство") и year ("год издания”)— названия свойств;
строки и числа, фигурирующие после знаков равенства (’’=’’, оператор при-
сваивания) — значения соответствующих свойств. Как видно из приведенно-
го выше фрагмента кода, имена свойств записываются через точку (’’. ”) после
названий объектов, к которым эти свойства относятся.
Прочесть значение того или иного свойства мы сможем, пользуясь как нота-
цией объектов, так и нотацией массивов:
var author = mybook.author;
var publisher = mybook[’publisher’];
Конструктор объектов — это, по сути дела, функция, имя которой совпадает
с названием класса объекта. Попробуем определить свой собственный класс
Book и соответствующий конструктор объектов, благо с функциями мы уже
сталкивались:
function Book(title, author, publisher, year)
{
this.title = title;
this.author = author;
this.publisher = publisher;
this.year = year;
}
Эта функция имеет четыре аргумента с именами title, author, publisher и
year. Ключевое слово this указывает на текущий объект. В данном случае мы
присваиваем значения аргументов одноименным свойствам объекта, созда-
ваемого при помощи определенного нами конструктора.
Вот так можно использовать конструктор для построения однотипных объек-
тов, принадлежащих воплощенному нами классу Book:
340 Часть II. Применение веб-технологий стороны клиента для создания сайтов
var html_css_scripts = new Book(’HTML, CSS, скрипты: практика создания
сайтов’, ’Артемий Ломов’, ’БХВ-Петербург’, 2005);
var web_design = new Book(’Веб-дизайн’, 'Дмитрий Кирсанов', 'Символ-
Плюс' , 1999);
Объект htmi css scripts, принадлежащий классу Book, содержит данные о
книге ’’HTML, CSS, скрипты: практика создания сайтов” вашего покорного
слуги. Объект web design в том же самом формате хранит информацию о
культовой книге всех времен и народов — "Веб-дизайн" Дмитрия Кирсанова.
Мы легко можем получить информацию, скажем, о том, какое издательство
выпустило ту или иную книгу, обратившись к свойству publisher соответст-
вующего объекта:
var р = web_design.publisher; /* Переменная р примет значение
"Символ-Плюс" ★/
Функция, так или иначе воздействующая на свойства того или иного объекта,
называется методом данного объекта.
Попытаемся создать метод showinfo, позволяющий осуществить вывод ин-
формации о той или иной книге.
| Листинг 7 А Объектно-ориентированное программирование в действии
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<Д1Ь1е>Объектно-ориентированное программирование*^^tle>
</head>
<body>
<script type="text/javascript">
<! —
// Определяем конструктор объектов класса Book:
function Book(title, author, publisher, year)
{
this.title = title;
this.author = author;
this.publisher = publisher;
this.year = year;
this.showinfo = showinfo; // Добавляем метод showinfo
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 341
// Определяем метод showinfo:
function showinfo()
{
document.write(*<hl>' + this.title + '</hl>\n');
document .write ('<pXspan style="font-weight: bold">AB
’Ътор:</span> ' + this.author + '</p>\n');
document.write(’<p><span style="font-weight:
’Ъ ЬоМ">Издательство: </span> ' + this .publisher + '</p>\n');
document.write('<p><span style="font-weight: bold">rofl
'Ъ издания:</span> ' + this.year + '</p>\n');
}
// Создаем три однотипных объекта, описывающих разные книги:
var html_css_scripts = new Book('HTML, CSS, скрипты: практика
’Ъ создания сайтов', 'Артемий Ломов', 'БХВ-Петербург', 2005);
var web_design = new Book('Веб-дизайн', 'Дмитрий Кирсанов',
’Ъ 'Символ-Плюс', 1999);
var webjpages = new Book('Создание веб-страниц: искусство
’Ъ верстки', 'Михаил Дубаков', 'Новое знание', 2004);
// Применяем метод showinfo к созданным объектам:
html_css_scripts. showinfo () ;
web_design.showinfo();
webjpages.showinfo();
//—>
</script>
</body>
</html>
Отображение веб-страницы, описанной в листинге 7.4, в окошке браузера
демонстрируется на рис. 7.3.
Пример, описанный в вышеприведенном листинге, возможно, не блещет
практичностью — но зато он помогает раз и навсегда разобраться с объек-
тами.
Перед нами веб-страница, HTML-разметка которой не содержит ровным сче-
том никакой полезной информации — весь контент формируется при помо-
щи скрипта.
Скрипт содержит две функции: Book— уже знакомый нам конструктор объ-
ектов— и showinfo. Для того чтобы функцию showinfo можно было исполь-
зовать как одноименный метод, применимый к объектам класса Book, к опре-
делению нашего конструктора была добавлена еще одна строчка:
this.showinfo = showinfo;.
342
Часть II. Применение веб-технологий стороны клиента для создания сайтов
' ^Объектна ориентированное
Cj) * Й) | L6le7//Z:/exam "*| © ПйИ^ТИ [К1
Ф Stated l^ute^Headta s
I HTML, CSS, скрипты: практика создания сайтов
j Автор: Артемий Ломов
§ Издательство: БХВ-Петербург
} Год выпуска: 2005
I Веб-дпзапн
!
| Автор: Дмитрий Кирсанов
Издательство: Символ-Плюс
; Год выпуска: 1999
I Создание веб-страниц: искусство верстки
Автор: Михаил Дубаков ,
? Издательство: Новое знание
•: Год выпуска: 2004
Рис. 7.3. Содержание этой страницы полностью сформировано скриптом
Функция showinfo не получает никаких аргументов и не возвращает значе-
ний. Она лишь включает в отображаемый браузером документ значения
свойств title, author, publisher и year текущего (this) объекта, сдабривая их
подобающей HTML-разметкой.
С этой целью используется метод write объекта document, олицетворяющего
текущий документ и любезно предоставленного нам соответствующим ин-
терфейсом DOM. Имя метода, по аналогии с именами свойств, также отделя-
ется от названия объекта, к которому относится данный метод, символом
точки Метод document.write вызывается с аргументами, имеющими
значения строкового типа. Знак "+" в данном контексте соответствует опера-
ции объединения (конкатенации) строк. Небольшой поясняющий пример:
var d = 'Dynamic';
var h = 'HTML';
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 343
var mystring = d + ' ' + h + ' имеет большое будущее!';
/* Итоговая строка (значение переменной mystring):
'Dynamic HTML имеет большое будущее!' */
Для того чтобы выполнить ту или иную функцию, необходимо ее явно вы-
звать (из основной части скрипта, при помощи обработчика событий или лю-
бым другим доступным способом). Иначе функция — это не более чем вися-
щее на стенке ружье, из которого никогда не стреляли.
Основной код программы в нашем примере из листинга 7.4 размещен после
определений функций Book и showinfo, и именно отсюда начинается выпол-
нение сценария немедленно после открытия страницы пользователем. Опре-
деления функций могут размещаться и в конце программы (да и вообще в
любом ее месте) — это не имеет никакого значения.
В начале работы скрипта уже знакомым читателю способом (с использовани-
ем конструктора Book) создается три однотипных объекта (с именами
html__css_scripts, web_design И web pages), содержащих данные О трех раз-
личных книгах.
Затем к созданным объектам применяется метод showinfo— иначе говоря,
вызывается одноименная функция, осуществляющая отображение информа-
ции о книгах на веб-странице.
...Учебники, рассчитанные на новичков, редко когда рассказывают о собст-
венноручном создании объектов в JavaScript. Пригодится ли вам этот навык в
повседневной практике — сказать трудно. Зато, научившись определять свои
собственные конструкторы объектов и описывать методы, мы поймали трех
зайцев сразу.
Во-первых, надо надеяться, стали понятными и прозрачными сущность и
терминология объектно-ориентированного программирования. Во-вторых,
коль уж мы умеем создавать свои объекты, работать с чужими — уже гото-
венькими — сможем и подавно. Наконец, в-третьих, "по ходу пьесы” мы
окончательно разобрались с таким механизмом, как функции. Разумеется, для
закрепления всей этой "высокой теории" необходимо большее количество
практических примеров (и они, несомненно, будут); не помешает и самостоя-
тельный опыт. Но самый сложный и концептуальный материал уже позади.
Инструменты первой необходимости
Построив прочный фундамент, перейдем к сооружению "первого этажа"
башни познаний о JavaScript из "кирпичиков" первоочередных конструкций
языка.
Соединением литералов, переменных, вызовов функций со знаками опера-
ций, предусмотренными в JavaScript, образуются выражения.
344 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Мы уже сталкивались с выражениями в рассмотренных ранее примерах: так,
например, конструкция ’<ы>’ + this.title + ’</hi>\n’, фигурирующая в
качестве аргумента одного из вызовов метода document.write в листин-
ге 7.4 — не что иное, как выражение.
JavaScript определяет широкий спектр операций— арифметических, логиче-
ских, служебных... Нижеследующее выражение демонстрирует простейшие
арифметические операции:
5 + 4- 6/ 3*2
Символ ’’+” в числовом контексте обозначает операцию сложения, — знак
вычитания, — символ операции деления и, наконец, — знак умно-
жения.
(Как мы помним, в строковом контексте знак ’’+” соответствует операции
конкатенации — слияния, объединения — строк.)
Значением вышеприведенного выражения будет число 5 — все, как в при-
вычной школьной арифметике. Операции имеют различные приоритеты'.
вначале выполняется деление и умножение, затем — сложение и вычитание.
Иначе говоря, операции деления и умножения имеют более высокий приори-
тет, чем операции сложения и вычитания. Между собой операции сложения и
вычитания имеют одинаковый приоритет, равно как и операции умножения и
деления имеют один и тот же приоритет.
Знаки операций (а для ряда операций — особые ключевые слова) называются
операторами, а литералы и переменные, участвующие в выражениях (то, над
чем осуществляются операции) — операндами. Впрочем, операндами могут
называться и целые выражения, участвующие в более сложных выражениях.
Если необходимо изменить приоритет операций, нужно воспользоваться
скобками:
(5 + 4-6) /3*2
Очевидно, значением этого выражения будет число 2. А следующее выраже-
ние имеет значение 0,5:
(5 + 4-6) / (3*2)
(Дробные числа в JavaScript записываются не через запятую, как принято в
русскоязычной типографской традиции, а через точку: var pi = 3.14159265.)
Выражения могут принимать не только числовые и строковые, но и другие
типы значений -— например, булевы. Такие выражения весьма полезны при
проверке различных условий, сравнении значений и т. д.
Некоторые логические операции, операции сравнения и проверки равенст-
ва/неравенства в порядке убывания приоритета представлены в табл. 7.1.
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 345
Таблица 7.1. Наиболее часто используемые логические операции, операции
сравнения и проверки значений в JavaScript
Приоритет Оператор Описание операции
Самый высокий । Логическое "НЕ” (отрицание). Если а принимает значе- ние true, то !а примет значение false, и наоборот
Высокий Проверка условия, что левый операнд меньше правого. Выражение а < Ь примет значение true, если значение переменной а меньше значения переменной ь. В противном случае выражение примет значение false. Операция может применяться как в числовом, так и в строковом контексте— строки сравниваются с учетом алфавитного порядка. Сказанное относится ко всем ана- логичным операциям, описанным ниже
<= Проверка условия, что левый операнд меньше либо ра- вен правому
> Проверка условия, что левый операнд больше правого
>= Проверка условия, что левый операнд больше либо ра- вен правому
Средний === Проверка условия, что левый операнд в точности равен правому
! = Проверка условия, что левый операнд не равен правому
Низкий && Логическое "И” (конъюнкция). Выражение а && ь примет значение true тогда и только тогда, когда оба операнда а и ь принимают значение true. В противном случае вы- ражение принимает значение false
Самый низкий I I Логическое "ИЛИ" (дизъюнкция). Выражение а | | ь при- мет значение true, если хотя бы один из операндов а или ь имеет значение true. В противном случае выраже- ние примет значение false
Если говорить о приоритетах обсуждавшихся выше арифметических опера-
ций по отношению к операциям, представленным в таблице, то они занимают
два "этажа” между "высоким" и "самым высоким" в нашей импровизирован-
ной классификации.
Обсудив основные операции, мы вплотную подошли к условным операторам
JavaScript.
Оператор if выполняет следующий за ним оператор (или составной опера-
тор — несколько команд, заключенных в фигурные скобки) только в том
случае, если проверяемое выражение истинно, т. е. принимает значение true.
346
Часть //. Применение веб-технологий стороны клиента для создания сайтов
{ Листинг 7.5. Использование условного оператора
var birth_year = window.prompt('В каком году вы родились?', '');
if(birth_year < 1850)
{
window.alert('Так долго не живут!');
)
Вышеприведенный скрипт, будучи внедренным в веб-страницу, первым де-
лом спросит у пользователя: "В каком году вы родились?" (рис. 7.4) при по-
мощи диалогового окна, формируемого благодаря вызову метода prompt объ-
екта window. (Этот объект соответствует текущему окну браузера и предос-
тавляется объектной моделью последнего.)
Методу prompt требуются два аргумента — текст надписи, сопровождающей
диалог (в данном случае — строковый литерал 'в каком году вы родились?'),
и значение по умолчанию (в нашем примере— литерал ’', соответствующий
пустой строке). Введенный пользователем год рождения заносится в пере-
менную birth_year.
Оператор if проверяет, истинно ли выражение birth year < 1850. Если год
рождения, заданный пользователем, меньше 1850, возникает окно предупре-
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 347
ждения со словами "Так долго не живут!" (рис. 7.5), формируемое уже знако-
мым читателю способом — применением метода alert объекта window. Рань-
ше мы не акцентировали на этом факте внимания и писали не window.alert, а
просто alert, что тоже вполне допустимо. Теперь же, когда читатель в общих
чертах знаком с объектно-ориентированным программированием, я решил
раскрыть карты и продемонстрировать, что чудес на свете не бывает. Созда-
ние сценариев на JavaScript буквально насквозь пронизано объектами, свой-
ствами и методами.
Рис. 7.5. В случае если проверяемое условие не выполняется,
выводится соответствующее окно предупреждения
Оператор if можно расширить предложением else, предписывающим вы-
полнить другой оператор в случае, если проверяемое выражение ложно.
В следующем примере мы просим пользователя выбрать себе ник (псевдо-
ним) длиной от 5 до 10 символов. Если пользователь введет строку, не укла-
дывающуюся в это "прокрустово ложе", он увидит окно предупреждения со
словами "Вы ввели слишком длинный или слишком короткий ник!"; в про-
тивном же случае в окне браузера появится приветствие, включающее опре-
деленный посетителем ник.
ноге оператора с расширенным синтаксисы
var nick = window.prompt(’Выберите себе ник длиной от 5 до 10
'Ь символов ’, ’ ’) ;
348 Часть II. Применение веб-технологий стороны клиента для создания сайтов
if((nick.length < 5) || (nick.length > 10))
{
window.alert(’Вы ввели слишком длинный или слишком короткий ник!’);
}
else
{
document.write(’<р>3дравствуйте, ’ + nick + ’!</p>\n’);
}
Предложение else можно неограниченное множество раз комбинировать с
вложенным оператором if, проверяя различные условия.
? Листинг 77. Напоминание о том, какой день недели за окном
var today = new Date();
today = today. getDayO;
if(today == 0)
today = ’воскресенье’;
else if(today == 1)
today = ’понедельник’;
else if(today == 2)
today = ’вторник’;
else if(today == 3)
today = ’среда’;
else if(today == 4)
today = ’четверг’;
else if(today == 5)
today = ’пятница’;
else if(today == 6)
today = ’суббота’;
document.write(’<р>Напоминаем вам, что сегодня
'Ъ уже ’ + today + ’!</р>\п’);
Результат работы скрипта, описанного в листинге 7.7, демонстрируется на
рис. 7.6.
Сценарий, описанный в листинге 7.7, создает объект today при помощи кон-
структора класса Date, определенного в ядре JavaScript. Для объектов класса
Date описан ряд методов, позволяющих получать или переустанавливать те-
кущие дату и время (или отдельные их составляющие). Затем переменной с
тем же именем today (ведь незачем плодить лишние сущности) присваивается
значение, возвращаемое методом getDay теперь уже бывшего объекта today.
Этот метод возвращает числовой код текущего дня недели: 0 — воскресенье,
1 — понедельник, 2 — вторник и т. д.
Гпава 7. Создание интерактивных сайтов, при помощи языка сценариев JavaScript 349
ВаЙл jppaate Переход ^кгржиты Справка
03 | f fl Hle:///Z:/examples/07/07/indf © Перейти |[Gl
Started Latest Headlines
I Напоминаем вам, что сегодня уже пятница!
Рис. 7.6. Если вы забыли, какой на дворе день недели, скрипт вам напомнит
При помощи блока условий, содержащего несметное количество операторов
if...else if, мы преобразуем эти холодные числа в названия дней недели,
записанные по-русски. Пояснений, полагаю, не требуется. Единственное, на
что хочется обратить внимание — чтобы не загромождать код, мы отказались
от использования фигурных скобок. Здесь (как, впрочем, и в большинстве
предыдущих примеров) эти скобки необязательны, поскольку за каждым
оператором if следует всего один простой оператор. Не забывайте, однако,
использовать их, если по условию должно выполняться несколько команд!
Следует отметить, что для решения задач, подобных рассмотренной в лис-
тинге 7.7, в JavaScript определен оператор switch.. .case.. .default, в чем-то
более элегантный. Не будем, однако, тратить драгоценные страницы на об-
суждение средства не самой первой необходимости— все-таки if.. .else яв-
ляется главным условным оператором (который в тех или иных формах
встречается практически в любых языках программирования), а все осталь-
ные способы проверки условий носят вспомогательный, альтернативный ха-
рактер.
Напоследок рассмотрим циклы — конструкции, позволяющие многократно
повторять выполнение тех или иных фрагментов кода.
Основной оператор для организации циклов в JavaScript — for.
I Листинг 7.8. Использование оператора for для организации цикла
var i;
for(i =1; i <= 6; i++)
{
document.write(’<h’ + i + 1>3аголовок <span style="white-space:
’b nowrap">’ + i + ’-ro</span> уровняс/h’ + i + ’>\n’);
350
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Краткий скрипт, описанный в листинге 7.8, выводит на странице шесть раз-
ноуровневых заголовков— результат получается почти таким же, как при
отображении статического документа из листинга 2.5, но зато здесь все пол-
ностью автоматизировано (рис. 7.7).
’ Ф ^3 St 1j 3 ®пе₽вйти
Heines
Заголовок 1-го уровня |
Заголовок 2-го уровня
i
| Заголовок 3-го уровня
j Заголовок 4-го уровня
j
{ Заголовок 5-го уровня
j Заголовок 6-го уровня
г~_.,
Рис. 7.7. Автоматические заголовки
В скобках после оператора for последовательно перечисляются: начальная
установка (инициализация) переменной-счетчика; условие, при истинности
которого должен повторяться цикл; изменение счетчика с каждым новым ша-
гом (итерацией) цикла.
Операция, обозначаемая сочетанием знаков называется инкрементиро-
ванием. Смысл ее состоит в увеличении значения переменной на единицу.
Таким образом, оператор
i++;
есть то же самое, что
i = i + 1;
Аналогично, два знака ’’минус” ("--”) соответствуют операции декременти-
рования, уменьшающей значение переменной на единицу. Приоритет опера-
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 351
ций инкремента и декремента очень высок — такой же, как и у операции ло-
гического отрицания.
Цикл for жестко "завязан" на переменную-счетчик. JavaScript предусматри-
вает и более простой оператор цикла— while. Тело цикла, определенного
при помощи этого оператора, выполняется до тех пор, пока некоторое прове-
ряемое условие остается истинным.
i Листинг 7.9. Использование цикла whi
var nick;
var message = ’Выберите себе ник длиной от 5 до 10 символов’;
while((nick.length < 5) || (nick.length > 10))
{
nick = window.prompt(message, ’’);
message = 'Вы ввели слишком длинный или слишком короткий ник.
'Ъ Попробуйте еще раз!’;
}
document.write(’<р>3дравствуйте, ’ + nick + ’!</p>\n’);
Рис. 7.8. Первоначальное приглашение
352
Часть II. Применение веб-технологий стороны клиента для создания сайтов
[©Цикл white " МахШа Гие&ж
Файл ПрАЁКа 8ид переход зжладки ^етрулемты Справка
Getting Parted ©tatestHeaditw
V
Готе®»
Рис. 7.9. На второй итерации цикла текст приглашения изменится
Файл Правка £ид Переход ^кладки ^струменты Сдавка
,х!
Stated Ш Latest Headlines
Здравствуйте, Admin!
Гготс®»
ж
Рис. 7.10. Приветствие, появляющееся после ввода правильного ника
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 353
Этот пример — в некотором роде усовершенствованная версия сценария,
описанного в листинге 7.6.
Диалоговое окно, приглашающее пользователя выбрать себе ник, будет появ-
ляться до тех пор, пока пользователь не введет строку, соответствующую оп-
ределенным нами ограничениям на длину.
В первый раз текст приглашения будет такой: ’’Выберите себе ник длиной
от 5 до 10 символов" (рис. 7.8). Если пользователь захочет "обмануть" скрипт,
то, начиная со второй итерации цикла, в окошке приглашения он увидит со-
всем другую строчку: "Вы ввели слишком длинный или слишком короткий
ник. Попробуйте еще раз!" (рис. 7.9) — и так до тех пор, пока, наконец, стро-
ка требуемой длины не будет введена. После ввода подходящего ника поль-
зователь увидит приветствие, аналогичное показанному на рис. 7.10.
В теле цикла фигурирует два оператора— поэтому использование фигурных
скобок здесь обязательно.
Отладка сценариев
Учебные скрипты, рассмотренные нами выше, чрезвычайно просты. При со-
ставлении сложных сценариев, однако, неизбежно будут появляться ошибки.
Ошибаться свойственно человеку— то скобку где-нибудь не закроешь, то
пропустишь точку с запятой, то поставишь лишнюю букву в имени перемен-
ной...
Недаром программисты утверждают, что 90% времени разработки занимает
отладка. Тем не менее в сложных программных продуктах то и дело обнару-
живаются баги, не выловленные на этапах тестирования и отладки. Для "ла-
тания дыр" выпускают "заплатки", которые исправляют старые ошибки, но
вместе с этим привносят новые... И этот процесс неизбежен и бесконечен.
Однако JavaScript-сценарии, формирующие динамические веб-страницы, не-
сопоставимы по сложности с операционными системами и флагманскими
прикладными пакетами — так что добиться полного отсутствия ошибок в
скриптах вполне реально.
Весьма удобным средством отладки сценариев, позволяющим локализовать
ошибки, является Консоль JavaScript, входящая в минимальный дистрибутив
браузера Mozilla Firefox (рис. 7.11). Вызвать ее можно через меню Инстру-
менты.
Консоль JavaScript позволяет отображать не только откровенные ошибки, но
и предупреждения, связанные, например, с нежелательностью использования
тех или иных конструкций JavaScript— морально устаревших, нестандарт-
ных и т. п., не влияющих на исправность работы скрипта "здесь и сейчас", но,
354
Часть II. Применение веб-технологий стороны клиента для создания сайтов
' ' . .. жй 2£|
Прздмлшювать
ж Предупреждение: redeclaration of var value а| Источник: f >Xn5d£^5cD.HS’?Z^^r?i’Q^r.i.l5! Строка: 4297 var value ~ gPref. getCornplexValue (prefName, - t .Ш
';/Y\ Предупреждение: useless expression Источник: fije: ft it Pr oqt am%20f^^ irefc x/corr portent $£nsUpdate;?er vice js Строка: 82
/< ^£\ Предупреждение: useless expression Источник: fi'? ///Ci/rrogtam^^CFiles/Mo^ifYi^GF-tefcc/co.i ponents/rifJJpd^eSeryice в Строка: 85
'7,\ Предупреждение: redeclaration of var sbs Источник: fi’;?:///C: • Proutam%20Nes/Mozilia%20Firefcx/corfiponerits/nsUpdate^ervice is Строка: 202 var sbs « Components.classes["Pmozilla.erg/intl/stringbundle;1"] ?
Предупреждение: redeclaration of var bundle Источник: ti-e ///C:/Proqramy^.2Crilec/Moz>i'a:!<>2CFirerc,\?con po~ient$/ns.Jpd.ate5erv'te if- Строка: 204 var bundle « sbs.createBundle("chrome://mozapps/locale/update/update... *x->> 4
<st Предупреждение: redeclaration of var ps Источник: KeJZ/CiPr.jJQraffi.SlCG jlfikJ*’ -'P!. -,QF n?p.-J b?.|.nsiJ i v:$.£ ..[$ Строка: 209 var ps = Components.classes["Omozilla. org/embedcomp/prompt-service; 1"]
Ошибка: generateDocument is not defined -*** Источник: Строка: 1
Рис. 7.11. Консоль JavaScript в Firefox
ч?* ’V Л 0 Ш! ' abootCvnf"=
Фильгрг']
О [gT
Достояние {Тип (Значение .. [
javascript.allow.rnailnews по умолчанию булево false
]avascnpt.enabled по умолчанию булево true
javascript.options.showInConsole по умолчанию булево false
javascript, options, s tn ct установлено пользователем булево true
keyword.URL по умолчанию строка http://www....
key word.enabled по умолчанию булево true
layout.enablejapanese__specific_transfonn по умолчанию булево false
layou t. fra mes. force_resi zabil i ty по умолчанию булево false
layout.word_select.eat_space_to._next_w... по умолчанию булево true
layou t.word_select.stop_at_punctuation по умолчанию булево true u
middlemouse.contentLoadURL по умолчанию булево false
middlemouse.openNewWindow по умолчанию булево true
middlemouse.paste по умолчанию булево false
middlemouse.scroll bar Position по умолчанию булево false
mousewheel.horizscroll.withaltkey .action по умолчанию целое 2
mousewheel.horizscroll.withaltkey.numli... по умолчанию целое -1 xl
&
Рис. 7.12. Страница конфигурации браузера Mozilla Firefox
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 355
тем не менее, способных вызвать определенные проблемы с совместимостью
в будущем.
Всем тем, кто собирается использовать возможности Firefox для отладки сце-
нариев, я рекомендую сделать следующее. Наберите в адресной строке брау-
зера URL about:config. В окне браузера отобразится страница, содержащая
все настройки Firefox и позволяющая изменять их (рис. 7.12).
Найдите на этой странице опцию javascript.options.strict и активизируйте
ее — иными словами, установите для нее значение true. С этого момента
Консоль JavaScript будет отображать предупреждения даже по самым "ме-
лочным" поводам, нарушающим "чистоту языка". Старайтесь добиться, что-
бы ваши скрипты не провоцировали вообще никаких предупреждений —
стремитесь к совершенству!
Практический пример —
интерактивный тест на знание HTML
Заключительную главу, а вместе с ней и всю книгу, завершим большим прак-
тическим примером интерактивного приложения, представляющего собой
тест для проверки пользователями своих познаний в области HTML.
Разумеется, этот тест создавался... не ради теста, а для демонстрации воз-
можностей динамического HTML на примере целостного приложения, обла-
дающего вполне завершенной функциональностью. Поэтому в нашем тесте
всего пять вопросов — по аналогии можно добавить их еще сколько угодно;
но не в этом главное.
Полагаю, есть смысл сразу же привести код, чтобы предмет обсуждения был
перед глазами.
( Листинг 7Л 0, Прощальный пример ]
<’DOCTYPE html PUBLIC "-//W3C//DTD XHTl^ _l .
’’http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd’’>
chtml xmlns=”http://www.w3.org/1999/xhtml” lang=’’ru" xml: lang=’’ru”>
<head>
<title>HHTepaKTMBHbin тест на знание HTML</title>
<style type=”text/css’’>
<! —
html, body {
margin: Opx;
356 Часть II. Применение веб-технологий стороны клиента для создания сайтов
padding: Орх;
border: Орх;
}
body {
color: #000;
background: #fff;
font: 75% Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
hl {
font-size: 200%;
color: #fff;
background: #369;
margin: Opx;
padding: 5px 20px;
}
form {
margin: Opx;
padding: Opx;
}
h2 {
font-size: 150%;
color: #369;
margin: lOpx 2Opx 5px;
}
p (
margin: Opx 50px;
}
p.buttons {
padding: 30px Opx;
}
#questions, #results
{
display: none;
</style>
</head>
<body onload=”hideNoDHTML () ; ’’>
<script type=’’text/javascript’’>
<! —
function hideNoDHTML()
{
document.getElementById(’nodhtml’).style.display = ’none’;
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 357
showQuestions();
}
function showQuestions()
{
document.getElementByld(’questions’).style.display = ’block’;
document.getElementByld(’results’).style.display = ’none’;
}
function showResults()
{
var i = 0;
if(document.getElementByld(’choicel2’).checked == true)
{
i++;
}
if(document.getElementByld(’choice23’).checked == true)
{
}
if ((document.getElementByld(’choice31’).checked == true) &&
(document.getElementByld(’choice32’).checked == false) &&
(document.getElementByld(’choice33’).checked == true) &&
(document.getElementByld(’choice34’).checked == false))
{
}
if((document.getElementByld(’choice41’).checked == false) &&
(document.getElementByld(’choice42’).checked == true) &&
(document.getElementByld(’choice43’).checked == true) &&
(document.getElementByld(’choice44’).checked == false))
{
i++;
}
if(document.getElementByld(’text5’).value == ’type’)
{
i++;
}
358 Часть II, Применение веб-технологий стороны клиента для создания сайтов
document.getElementByld(’questions’).style.display ~ ’none’;
document.getElementByld(’results’).style.display = ’block’;
document.getElementByld(’results’).innerHTML = ’<h2 Результаты
теста</Ь2>\п<р>Количество правильных ответов: <strong>’ + i +
’ </strong>. </p> ’ ;
if(i == 5)
{
document.getElementByld(’results’).innerHTML += ’<p
^t> style="color: #096">Поздравляем с отличным результатом!</p>’;
}
if(i <= 2)
{
document.getElementByld(’results’).innerHTML += ’<p
style=”color: #сОО"Ж сожалению, результат очень плохой.</p>’;
}
document.getElementByld(’results’).innerHTML += ’<p
class="buttons "xinput type="button" value="Вернуться к
'Ъ вопросам" onclick="showQuestions();" /></р>’;
}
function getHelpO
{
document.getElementByld(’choicel2’).checked = true;
document.getElementByld(’choice23’).checked = true;
document.getElementByld(’choice31’).checked = true;
document.getElementByld(’choice32’).checked = false;
document.getElementByld(’choice33’).checked = true;
document.getElementByld(’choice34’).checked = false;
document.getElementByld(’choice41’).checked = false;
document.getElementByld(’choice42’).checked = true;
document.getElementByld(’choice4 3’).checked = true;
document.getElementByld(’choice4 4’).checked = false;
document.getElementByld(’text5’).value = ’type’;
}
//-->
</script>
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 359
сЬ1>Интерактивный тест на знание HTMLc/hl>
cdiv id="nodhtml">
<h2 style="color: #сОО">Ошибкас/Ь2>
ср>Ваш браузер в полной мере не поддерживает технологии
динамического HTML. Вероятно, вы отключили JavaScript или используете
устаревшую версию браузера, не поддерживающую DOM и/или CSS2.
K сожалению, это приложение не будет корректно работать в вашем
браузере.</р>
</div>
<div id="questions">
cform action=””>
ch2>l. Каково, на ваш взгляд, основное предназначение
языка HTML?</h2>
<pxinput type=”radio” nane="questionl" id=”choicell” /> clabel
£ог=”сЬо1се11’’>Визуальное оформление веб-страниц</1аЬе1></р>
<p><input type="radio" nane="questionl" id="choicel2" /> clabel
for="choicel2">JIorH4ecKoe структурирование содержимого
веб-странице/labelx/p>
<p><input type="radio" name="questionl" id="choicel3" /> clabel
for="choicel3">0nncaHne правил передачи гипертекстовой
информациис/1аЬе1х/р>
cpxinput type="radio" name="questionl" id="choicel4" /> clabel
for="choicel4">Управление представлением данных
веб-страницс/1аЬе1х/р>
ch2>2. Каким тегом определяется абзац текста?с/И2>
cpxinput type="radio" nane="question2" id="choice21" /> clabel
for="choice21"><br> c/labelx/p>
cpxinput type="radio” name="question2" id="choice22" /> clabel
for="choice22"><div> c/labelx/p>
cpxinput type="radio" nane="question2" id="choice23" /> clabel
for="choice23">< p> c/labelx/p>
Cpxinput type=’’radio" nane="question2" id="choice24" /> clabel
for="choice24 ">< textarea> c/labelx/p>
ch2>3. Какие теги из перечисленных ниже определяют
элементы-контейнеры?с/Ь2>
cpxinput type="checkbox" id="choice31" /> clabel
for="choice31">< a> c/labelx/p>
cpxinput type="checkbox" id="choice32" /> clabel
for="choice32"><br> c/labelx/p>
360 Часть II. Применение веб-технологий стороны клиента для создания сайтов
<pxinput type=”checkbox” id=*"choice33" /> clabel
for="choice33"><div> </labelx/p>
cpxinput type="checkbox" id="choice34" /> clabel
for="choice34">< img> </labelx/p>
<h2>4. Какие теги из перечисленных ниже определяют блочные
элементы?с/Ь2>
cpxinput type="checkbox” id="choice41" /> clabel
for="choice31"><a>c/labelx/p>
cpxinput type="checkbox" id="choice42" /> clabel
for="choice32"><div> c/labelx/p>
cpxinput type="checkbox" id="choice43" /> clabel
for="choice33"><p> c/labelx/p>
cpxinput type="checkbox" id="choice44" /> clabel
for="choice34 ">< span> c/labelx/p>
ch2>5. Назовите атрибут, обязательный для тега <script>:c/h2>
cpxinput type="text" size="20" maxlength="20" id="text5" />c/p>
cp class="buttons"xinput type="button" уа1ие="Показать результаты"
onclick="showResults();" /> cinput type="button" уа1ие="Подсказать
ответы" onclick="getHelp();" /> cinput type=="reset" уа1ие="0чистить
форму" />с/р>
c/form>
c/div>
cdiv id="results"x/div>
c/body>
c/html>
Внешний вид веб-страницы, описанной в листинге 7.10, сразу после ее от-
крытия в окне браузера представлен на рис. 7.13.
Начнем, пожалуй, с HTML-разметки. Она определяет следующие друг за
другом заголовок всей страницы (chi>.. .</ы>) и три блока с идентификато-
рами nodhtml, questions И results.
Блок questions содержит в себе HTML-форму с вопросами теста, а блок
results предназначается для вывода результатов. Многих, наверное, слегка
смутит факт полного отсутствия какого бы то ни было содержимого в блоке
results:
cdiv id="results">c/div>
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 361
| }Иктерзктиы<ыи тест не знание
£|рявк» 'Яарехед * Закладкн Справка
11.) file:///Z:/examples/07/10/mdex html 3 © пчи*и [IG,
Интерактивный тест на знание HTML j
1. Каково, на ваш взгляд, основное предназначение языка HTML?
Визуальное оформление веб-страниц
О Логическое структурирование содержимого веб-страниц
С Описание правил передачи гипертекстовой информации
С Управление представлением данных веб-страниц
2. Каким тегом определяется абзац текста?
Г* <Ьг>
С <dlv>
С <р>
О <textarea>
3. Какие теги из перечисленных ниже определяют
элементы-контейнеры?
П <а>
О <Ьг>
С <dlv>
О <lmg>
4. Какие теги из перечисленных ниже определяют блочные элементы?
О <а>
С <div>
О <р>
О <span>
5. Назовите атрибут, обязательный для тега <script>:
Рис. 7.13. Стартовая страница интерактивного теста
В листе стилей фигурирует еще менее очевидное правило, предписывающее
вообще запретить отображение блоков questions и results:
#questions, #results
{
display: none;
}
Выходит, из всего того, что наличествует в разметке, в окне браузера отобра-
зится только заголовок (содержимое элемента <hi>.. .</hi>) и блок с иденти-
фикатором nodhtml.
362
Часть II. Применение веб-технологий стороны клиента для создания сайтов
Все обстоит именно так, но только в том случае, если не принимать во вни-
мание содержимое элемента <script>.. .</script>.
Обратите внимание, что для тега <body> задан атрибут onload, олицетворяю-
щий обработчик события "загрузка документа в окно браузера". В качестве
значения этого атрибута фигурирует вызов функции hideNoDHTML, которая —
в случае исправной поддержки JavaScript в браузере — выполняется немед-
ленно после открытия страницы пользователем.
Эта функция первым делом устанавливает значение CSS-свойства display
для блока с идентификатором nodhtml равным попе:
document.getElementByld(’nodhtml’).style.display = ’none’;
Метод getElementByld— одно из наиболее часто используемых средств, пре-
дусмотренных спецификацией DOM. Этот метод, как следует из его назва-
ния, возвращает объект, ссылающийся на тот или иной элемент HTML, иден-
тифицируемый при помощи атрибута id. Таким образом, мы получаем пол-
ный доступ к содержимому соответствующего элемента, к значениям
определенных для него атрибутов и CSS-свойств.
( Примечание
Не менее часто, чем getElementByld, используется другой похожий метод —
getEiementByName, обеспечивающий доступ к свойствам объекта, соответст-
вующего тому или иному элементу HTML, идентифицируемого по значению ат-
рибута name.
Вообще же, оба этих метода применимы для объектов класса HTMLElement, от-
ражающего произвольные элементы HTML и определяемого соответствующим
интерфейсом DOM.
Итак, блок с идентификатором nodhtml тоже пропадает из поля зрения, и на
странице не остается ничего, кроме заглавия. Но после этого происходит вы-
зов функции с обнадеживающим названием showQuestions ("показать вопро-
сы"). И действительно, в результате выполнения этой функции блок ques-
tions становится видимым в окне браузера:
document.getElementByld(’questions’).style.display = ’block’;
Но почему нельзя было отобразить блок questions сразу? Дело в том, что в
блоке nodhtmi содержится сообщение об ошибке (рис. 7.14), которое должно
оставаться на экране в том случае, если пользователь отключил JavaScript или
же браузер не поддерживает DOM и CSS2 в той мере, в какой это необходимо
для работы нашего приложения. При этом крайне желательно, чтобы формы
с вопросами теста в окне браузера не было.
Следует отметить, что наш тест исправно функционирует в Internet Explo-
rer 5.0 и более поздних версиях, Opera 6.0 и выше, Firefox 1.0х. (В указанных
Гпава 7. Создание интерактивных сайтов.при помощи языка сценариев JavaScript 363
браузерах работа приложения явно проверялась — велика вероятность, что и
с другими современными браузерами проблем не будет.) А вот в Netscape 4
наш тест работать уже не станет, ибо этот браузер не поддерживает DOM
В понимании W3C (в частности, NN4 не воспринимает Метод getElementByld)
и игнорирует CSS-свойство display. DOM в нужной мере не поддерживается
и браузером Opera 5.
1 aw<Поиск с Google > “ 3< ’Г 180% ”1£|
Интерактивный тест на знание HTML
Ошибка
Ваш браузер в полной мере не поддерживает технологии
динамического HTML. Вероятно, вы отключили JavaScript или
используете устаревшую версию браузера, не поддерживающую
DOM и/или CSS2. К сожалению, это приложение не будет корректно
работать в вашем браузере.
Рис. 7.14. Сообщение об ошибке, возникающее в устаревшем к настоящему моменту
браузере Opera 5
Веб-форма, содержащаяся в блоке questions, содержит поля, позволяющие
ответить на пять вопросов теста.
Первые два вопроса предполагают по одному варианту ответа из нескольких
предложенных — для реализации возможности выбора используются пере-
ключатели с "радиокнопками” (cinput type="radio”>), сгруппированными
посредством атрибута name— так, все "радиокнопки" переключателя, соот-
ветствующего первому вопросу теста, характеризуются значением questioni
атрибута name, а элементы переключателя, соответствующего второму вопро-
су — значением question2.
Атрибут name применительно к элементам формы больше нигде не использу-
ется — все они идентифицируются при помощи атрибута id, и непосредст-
венный анализ ответов пользователя производится благодаря применению
метода getElementByld.
Третий и четвертый вопросы подразумевают множественный выбор, поэтому
здесь используются флажки, определяемые тегами cinput type=”checkbox”>.
Пятый вопрос предполагает ввод правильного ответа в текстовое поле формы
(cinput type="text”>).
Первые четыре вопроса подразумевают по четыре варианта ответа (хотя, ра-
зумеется, это количество может быть произвольным для каждого вопроса).
364
Часть II. Применение веб-технологий стороны клиента для создания сайтов
"Радиокнопки” и флажки, соответствующие тем или иным вариантам ответа,
в целях унификации характеризуются идентификаторами формата choiceXY,
где х — порядковый номер вопроса, a Y — номер варианта ответа.
Текстовое поле, предполагающее ввод ответа на пятый вопрос, имеет иден-
тификатор texts. Подчеркну, что все эти условности — не более чем стрем-
ление к унификации. Значения атрибутов id могут быть совершенно произ-
вольными; самое главное, чтобы назначенные идентификаторы были уни-
кальными.
Атрибут action тега <fom> имеет пустое значение. По правде говоря, в дан-
ном случае значением этого атрибута может быть что угодно— форма не
содержит кнопки отправки данных (cinput type=”submit”>) как таковой.
Вместо нее используется ’’нейтральная” кнопка (cinput type=”button”>)
с надписью ’’Показать результаты". С этой кнопкой связан обработчик собы-
тия, заданный атрибутом onciick и вызывающий функцию showResuits ("по-
казать результаты”) при нажатии на кнопку.
Форма предусматривает и другую кнопку — с надписью "Показать ответы".
При нажатии на нее, благодаря все тому же обработчику события onciick,
вызывается функция getHeip ("получить помощь"), автоматически запол-
няющая форму правильными ответами. (Мы же не на экзамене, тест-то для
самопроверки, почему бы и не предусмотреть такую приятную возмож-
ность?)
Наша веб-форма также включает в себя кнопку сброса (cinput
type=”reset”>), очищающую все поля. (Очистить форму вполне можно и при
помощи JavaScript, только вот ехать из Москвы в Питер через Сахалин со-
вершенно незачем.) Собственно, не будь этой кнопки, тег <form> стал бы со-
вершенно необязательным.
Итак, как же производится проверка ответов?
Внутри функции showResuits сначала объявляется и инициализируется пере-
менная i — счетчик правильных ответов.
Далее выполняется пять условных операторов if, каждый из которых прове-
ряет правильность ответа на один из вопросов теста. С каждым правильным
ответом счетчик i инкрементируется (наращивается на единицу).
Рассмотрим некоторые условия подробнее.
Правильным ответом на первый вопрос является второй вариант из четырех
предложенных— иными словами, ответ на первый вопрос должен быть за-
считан в том случае, когда пользователь включил "радиокнопку" с идентифи-
катором choicei2. Условный оператор, проверяющий корректность ответа на
первый вопрос, будет таким:
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 365
if(document.getElementByld('choicel2’).checked == true)
{
}
(Фигурные скобки здесь необязательны, но используются, опять же, для уни-
фикации — мало ли, какие еще операторы будут добавлены в компанию к
инкрементированию счетчика в потенциальной перспективе.)
Булево СВОЙСТВО checked, Характерное ДЛЯ объектов Класса HTMLInputElement
(отражающего элементы HTML, заданные тегом <input>), хранит информа-
цию О ТОМ, активизирован ЛИ ТОТ ИЛИ ИНОЙ флаЖОК (cinput type="checkbox">)
ИЛИ ’’радиокнопка” (cinput type="radio">).
Пользователь при всем желании не сможет активизировать больше одной
’’радиокнопки” одного и того же переключателя. С флажками ситуация не-
сколько сложнее— чтобы зачесть ответ на вопрос, предполагающий множе-
ственный выбор, мы должны проверить состояние каждого из флажков того
или иного набора, получить, скажем так, полную картину. Вот как, например,
проверяется правильность ответа на третий вопрос теста:
if ((document.getElementByld('choice31').checked == true) &&
(document.getElementByld('choice32').checked — false) &&
(document.getElementByld('choice33').checked == true) &&
(document.getElementByld('choice34').checked == false))
{
}
Очевидно, ответ на этот вопрос засчитывается тогда и только тогда, когда
первый и третий флажки активизированы, а второй и четвертый — нет.
Наконец, проверить данные текстового поля можно, получив доступ к его
содержимому при помощи свойства value, определенного для объектов все
того же класса HTMLInputElement, предоставленного одноименным интерфей-
сом DOM:
if(document.getElementByld('text5’).value == 'type’)
{
}
Проверив все ответы, функция showResuits запрещает отображение блока
questions, содержащего веб-форму, а вместо него отображает блок results —
до сей поры не содержащий контента:
document.getElementByld('questions').style.display = 'none';
document.getElementByld('results').style.display = 'block';
366 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Содержимое блока results формируется динамически. Доступ к HTML-
разметке, находящейся внутри того или иного элемента-контейнера, обес-
печивается благодаря свойству innerHTML, присущего объектам класса
HTMLElement.
Записываем результаты теста внутрь блока results:
document.getElementByld(’results’).innerHTML = '<Ь2>Результаты
теста</Ь2>\п<р>Количество правильных ответов: <strong>’ + i +
%> '</strong>.</p>';
На этом выполнение функции showResuits можно было бы и завершить, но
сделаем еще пару красивых штрихов.
Пусть отличный результат тестирования (когда пользователь правильно отве-
тил на все пять вопросов) сопровождается поздравлением, а плохой (если
число корректных ответов не превышает двух) — противоположным по ха-
рактеру сообщением:
if(i == 5)
{
document.getElementByld('results').innerHTML += '<p style="color:
%> #096">Поздравляем с отличным результатом!</p>';
}
if(i <= 2)
{
document.getElementByld('results').innerHTML += '<p style="color:
#сОО"Ж сожалению, результат очень плохой.</p>';
}
Операция, определяемая символами сочетает в одном лице конкатена-
цию строк (или, в числовом контексте, сложение) и присваивание. Иначе го-
воря, оператор
а += Ь;
аналогичен более привычной, но нерационально длинной конструкции
а = а + Ь;
Напоследок не мешало бы обеспечить для пользователя возможность ’’начать
все сначала", т. е. вернуться к форме с вопросами. С этой целью добавим к
содержимому блока results кнопку, по щелчку на которой вызывается уже
знакомая нам функция showQuestions, скрывающая блок results и включаю-
щая отображение блока questions:
document.getElementByld('results').innerHTML += '<p
'b class="buttons"xinput type="button" value="Вернуться к
'Ъ вопросам" onclick="showQuestions();" /></р>';
Гпава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 367
На рис. 7.15 показано, как выглядит страница с результатами тестирования в
случае прохождения теста на ’’отлично”.
Результаты теста
Количество правильных ответов: 5.
Поздравляем с отличным результатом!
Рис. 7.15. Отображение результатов тестирования: тест пройден на "отлично"
Как видите, возможности, предоставляемые технологиями динамического
HTML, позволяют совершать с веб-страницей совершенно фантастические по
меркам недавнего прошлого вещи. Де-факто, переключаясь между формой с
вопросами и результатами тестирования, пользователь видит две совершенно
различные страницы, содержимое которых, к тому же, всецело и полностью
подчинено его действиям. Немаловажно и то, что все сколько-либо распро-
страненные на сегодняшний день браузеры поддерживают эти возможности
на вполне приемлемом уровне, что позволяет создавать вполне работоспо-
собные и ориентированные на весьма широкую аудиторию интерактивные
приложения без обязательного привлечения серверных технологий.
Мы всесторонне обсудили работу описанного в листинге 7.10 интерактивно-
го теста, не затронув лишь внутреннее устройство функции getHeip. Как уже
было сказано выше, ее задача— автоматически заполнить форму и тем са-
мым продемонстрировать правильные ответы.
Эта функция использует уже знакомые нам свойства checked и value, прису-
щие объектам класса HTMLInputElement, устанавливая им требуемые значения.
Полагаю, на данном этапе код тела функции getHeip для читателя уже совер-
шенно прозрачен.
Наш интерактивный тест, а также другие примеры, рассмотренные в прону-
мерованных листингах этой главы, читатель, как и обычно, найдет на ком-
пакт-диске, поставляемом с книгой, в каталоге, соответствующей номеру
368
Часть II. Применение веб-технологий стороны клиента для создания сайтов
главы — \examples\07. Обсуждаемое в этом разделе приложение, описанное в
листинге 7.10, находится, соответственно, в каталоге \examples\07\10. И, как
всегда, наше электронное оглавление, хранящееся в файле \index.html, позво-
лит открыть нужный пример в считанные секунды.
Вместо заключения
...Разработанный нами тест, конечно, не лишен объективных недостатков.
Так, например, для того чтобы дополнить его новыми вопросами или моди-
фицировать существующие, нужно быть не просто пользователем, а, во вся-
ком случае, иметь некоторое представление о HTML, CSS и JavaScript.
Кроме того, функции getHeip и showResuits требуют, по сути дела, дублиро-
вания одних и тех же правил, что не слишком практично.
Разумеется, организовать хранение информации о вопросах и правильных
ответах можно намного более эффективно — например, в виде массива или
объекта; к тому же, логичнее использовать для данных обособленный от ос-
новного скрипта файл. Я нарочно не полез в дебри— побоялся, что все эти
тонкости могли бы затмить основную идею нашего тренировочного примера.
В то же самое время я совершенно уверен, что пытливый ум докопается до
всех нюансов самостоятельно и сможет сделать наше простенькое приложе-
ние в тысячу раз лучше и удобнее.
Так, например, неплохо бы обеспечить возможность совмещения в одном
приложении нескольких тестов; предусмотреть не только режим самопровер-
ки, но и экзаменационный режим (быть может, с контролем времени), за-
труднив при этом доступ экзаменующихся к правильным ответам — ведь
сейчас их легко подсмотреть непосредственно в коде страницы. Короче гово-
ря, нет предела совершенству, и дополнительных требований к любому про-
екту можно напридумывать вагон и маленькую тележку.
Суть не в этом. Если в результате прочтения моей книги читатель не только
постигнет азы HTML, CSS и JavaScript, но и хотя бы в первом приближении
научится формулировать такие вот требования, ставить самому себе задачи,
видеть достоинства и недостатки тех или иных решений, мыслить систем-
но — я буду счастлив.
V V V
ПРИЛОЖЕНИЯ
Приложение 1. Ссылки на символьные объекты, определенные
в спецификации HTML 4.01
Приложение 2. Ключевые слова, обозначающие поименованные
цвета, предусмотренные спецификацией CSS2
и перспективными версиями CSS
Приложение 3. Описание компакт-диска
ПРИЛОЖЕНИЕ 1
Ссылки на символьные объекты,
определенные в спецификации
HTML 4.01
В табл. П1.1—П1.3 приведена информация об определенных стандартом
HTML 4.01 и унаследованных спецификацией XHTML 1.0 ссылках на сим-
вольные объекты в виде мнемонических подстановок и соответствующих им
числовых десятичных кодов (с сохранением последовательности, принятой в
оригинале).
При использовании подобных ссылок в содержимом веб-страниц отсутст-
вующие в текущей гарнитуре символы обычно заимствуются из других
шрифтов, но так умеют поступать не все браузеры. Firefox и Opera при нали-
чии необходимых шрифтов на машине клиента отобразят все представленные
в приведенных ниже таблицах символы, а вот Internet Explorer будет рисовать
’’квадратики” на месте некоторых математических знаков, если ему прямо не
указать при помощи CSS-свойства font-family, что для этих символов требу-
ется использовать гарнитуру Symbol.
Примечание
Перечень символов, используемых на веб-страницах, отнюдь не ограничивает-
ся знаками, для которых определены мнемонические подстановки. Разработчик
имеет право применять любые символы из набора Unicode, отдавая отчет в
том, что некоторые из этих знаков могут быть реально отображены пользова-
тельскими агентами.
Для того чтобы использовать тот или иной символ Unicode, достаточно со-
слаться на его десятичный или шестнадцатеричный код. Так, например, рус-
ский знак номера ("№") можно получить, воспользовавшись подстановкой
£#8470; ИЛИ &#х2116;.
Следует также принять во внимание тот факт, что коды из диапазона € —
Ÿ зарезервированы как управляющие, и их использование в составе со-
держимого веб-страниц рекомендациями W3C не допускается.
372
Приложение 1
Таблица П1.1. Символы, определенные стандартом ISO 8859-1
Мнемоническая подстановка Числовой код Внешний вид символа Описание
  Неразрывный пробел
¡ ¡ i Перевернутый восклицательный знак
¢ ¢ 0 Знак цента
£ £ £ Знак британского фунта стерлингов
¤ ¤ п Общее обозначение денежной единицы
¥ ¥ ¥ Знак японской йены или китайского юаня
¦ ¦ । । Разорванная вертикальная черта
§ § § Знак параграфа
¨ ¨ Трема, или умляут (диакритический знак в виде двух горизонтальных точек, как у русской буквы ё)
© © © Знак авторского права
ª ª a Женский порядковый числитель
« « и Открывающая кавычка-"елочка"
¬ ¬ Знак отрицания
­ ­ - Мягкий перенос
® ® Знак регистрации (зарегистрированной торговой марки)
¯ S#175; — Знак долготы над гласным
° ° o Знак градуса
± ± ± Плюс-минус
² ² 2 Верхний индекс 2 (возведение в квад- рат)
³ ³ 3 Верхний индекс 3 (возведение в куб)
´ ´ Акут (ударение)
µ µ M Знак приставки "микро" (например, рА — микроампер)
¶ ¶ 11 Знак абзаца
· · Точка, поднятая над линией шрифта до середины строки; в грузинском языке используется в качестве запятой
Ссылки на символьные объекты, определенные в спецификации HTML 4.01
373
Таблица П1.1 (продолжение)
Мнемоническая подстановка Числовой код Внешний вид символа Описание
¸ ¸ Седиль (орфографический знак)
&supl; ¹ 1 Верхний индекс 1
º º 0 Мужской порядковый числитель
» » II Закрывающая кавычка-"елочка"
&fracl4; ¼ % Дробь — одна четвертая
&fracl2; ½ % Дробь — одна вторая
¾ ¾ % Дробь — три четверти
¿ ¿ 6 Перевернутый вопросительный знак
À À A Прописная латинская буква А с грависом
Á Á A Прописная латинская буква А с акутом
  A Прописная латинская буква А с циркумфлексом
à à A Прописная латинская буква А с тильдой
& Auml; Ш96; A Прописная латинская буква А с умляутом
Å Ш97; A Прописная латинская буква А с окружностью
Æ Ш98; /Е Заглавная латинская лигатура АЕ
Ç Ш99; Q Прописная латинская буква С с седилем
È È Ё Прописная латинская буква Е с грависом
É É e Прописная латинская буква Е с акутом
Ê Ê e Прописная латинская буква Е с циркумфлексом
Ë Ë Ё Прописная латинская буква Е с умляутом
Ì Ì I Прописная латинская буква I с грависом
ĺ Í j Прописная латинская буква I с акутом
Î Î I Прописная латинская буква I с циркумфлексом
374
Приложение 1
Таблица П1.1 (продолжение)
Мнемоническая подстановка Числовой код Внешний вид символа Описание
Ï Ï T Прописная латинская буква i с умляутом
&ЕТН; Ð В Прописная исландская буква eth
Ñ Ñ N Прописная латинская буква п с тильдой
Ò Ò 0 Прописная латинская буква о с грависом
Ó Ó 0 Прописная латинская буква о с акутом
Ô Ô 0 Прописная латинская буква о с циркумфлексом
Õ Õ 0 Прописная латинская буква о с тильдой
Ö Ö 0 Прописная латинская буква о с умляу- том
& times; × X Знак умножения
Ø Ø 0 Прописная латинская буква о с косым штрихом
Ù Ù и Прописная латинская буква и с грави- сом
Ú Ú 0 Прописная латинская буква и с акутом
Û Û 0 Прописная латинская буква и с циркумфлексом
Ü Ü и Прописная латинская буква и с умляу- том
Ý Ý V Прописная латинская буква у с акутом
Þ Þ р Прописная исландская буква thorn
ß ß в Строчная немецкая лигатура sz
à à а Строчная латинская буква а с грависом
á á а Строчная латинская буква а с акутом
â â а Строчная латинская буква а с циркум- флексом
ã ã а Строчная латинская буква а с тильдой
ä ä а Строчная латинская буква а с умляутом
Ссылки на символьные объекты, определенные в спецификации HTML 4.01
375
Таблица П1.1 (продолжение)
Мнемоническая подстановка Числовой код Внешний вид символа Описание
å å a Строчная латинская буква а с окружностью
æ æ as Строчная латинская лигатура ае
ç ç 9 Строчная латинская буква с с седилем
è è e Строчная латинская буква е с грависом
é é e Строчная латинская буква е с акутом
Secirc; ê e Строчная латинская буква е с циркум- флексом
ë ë ё Строчная латинская буква е с умляутом
ì ì i Строчная латинская буква i с грависом
í í i Строчная латинская буква i с акутом
î î i Строчная латинская буква i с циркум- флексом
ï T Строчная латинская буква i с умляутом
ð ð d Строчная исландская буква eth
ñ ñ h Строчная латинская буква п с тильдой
ò ò 0 Строчная латинская буква о с грависом
ó ó 6 Строчная латинская буква о с акутом
ô ô 6 Строчная латинская буква о с циркум- флексом
õ õ 6 Строчная латинская буква о с тильдой
ö ö 0 Строчная латинская буква о с умляутом
÷ ÷ -r Знак деления
ø ø 0 Строчная латинская буква о с косым штрихом
ù ù u Строчная латинская буква и с грависом
ú £#250; u Строчная латинская буква и с акутом
Sueire; û u Строчная латинская буква и с циркум- флексом
ü £#252; 0 Строчная латинская буква и с умляутом
376
Приложение 1
Таблица П1.1 (окончание)
Мнемоническая подстановка Числовой код Внешний вид символа Описание
ý ý У Строчная латинская буква у с акутом
þ þ t> Строчная исландская буква thorn
ÿ ÿ У Строчная латинская буква у с умляутом
Таблица П1.2. Математические знаки, греческие буквы и другие символы
Мнемоническая подстановка Числовой код Внешний вид символа Описание
ƒ ƒ / Знак функции
Α Α A Прописная греческая буква ’’альфа"
Β Β В Прописная греческая буква "бета"
& Gamma; Γ Г Прописная греческая буква "гамма"
Δ Δ A Прописная греческая буква "дельта"
Ε Ε Е Прописная греческая буква "эпсилон"
Ζ Ζ Z Прописная греческая буква "зета" ("дзета")
Η Η н Прописная греческая буква "эта"
Θ Θ 0 Прописная греческая буква "тэта"
Ι Ι I Прописная греческая буква "йота"
Κ Κ к Прописная греческая буква "каппа"
Λ Λ Л Прописная греческая буква "лямбда" ("ламбда")
Μ Μ м Прописная греческая буква "мю" ("ми")
Ν Ν N Прописная греческая буква "ню" ("ни")
Ξ Ξ — Прописная греческая буква "кси"
Ο Ο О Прописная греческая буква "омикрон"
Π Π п Прописная греческая буква "пи"
Ρ Ρ р Прописная греческая буква "ро"
& Sigma; Σ Z Прописная греческая буква "сигма"
Ссылки на символьные объекты, определенные в спецификации HTML 4.01
377
Таблица П1.2 (продолжение)
Мнемоническая подстановка Числовой код Внешний вид символа Описание
&Таи; Τ T Прописная греческая буква "тау"
&UpsiIon; Υ Y Прописная греческая буква "ипсилон" ("юпсилон")
Φ Φ ф Прописная греческая буква "фи"
Χ Χ X Прописная греческая буква "хи"
Ψ Ψ у Прописная греческая буква "пси"
Ω Ω Q Прописная греческая буква "омега"
α α а Строчная греческая буква "альфа"
β β р Строчная греческая буква "бета"
& gamma; γ Y Строчная греческая буква "гамма"
δ δ б Строчная греческая буква "дельта"
ε ε £ Строчная греческая буква "эпсилон"
ζ ζ С Строчная греческая буква "зета" ("дзе- та")
η η п Строчная греческая буква "эта"
θ θ е Строчная греческая буква "тэта"
ι ι । Строчная греческая буква "йота"
κ κ к Строчная греческая буква "каппа"
λ 	b5; Л Строчная греческая буква "лямбда" ("ламбда")
μ μ М Строчная греческая буква "мю" ("ми")
ν ν V Строчная греческая буква "ню" ("ни")
ξ ξ Строчная греческая буква "кси"
ο ο О Строчная греческая буква "омикрон"
π π я Строчная греческая буква "пи"
ρ ρ р Строчная греческая буква "ро"
ς ς Строчная греческая буква "сигма" (око- нечная)
σ σ о Строчная греческая буква "сигма"
378
Приложение 1
Таблица П1.2 (продолжение)
Мнемоническая подстановка Числовой КОД Внешний вид символа Описание
τ τ т Строчная греческая буква "тау"
&upsiIon; υ и Строчная греческая буква "ипсилон" ("юпсилон")
φ φ ф Строчная греческая буква "фи"
χ χ X Строчная греческая буква "хи"
ψ ψ Ф Строчная греческая буква "пси"
& omega; ω ш Строчная греческая буква "омега"
ϑ ϑ О Строчная греческая буква "тэта" — математический символ
ϒ ϒ Y Прописная греческая буква "ипсилон" ("юпсилон") с крючком
ϖ ϖ Греческая буква "пи" — математиче- ский символ
• • • Кружок
… … Многоточие
′ ′ 9 Знак фута или угловой минуты
& Prime; ″ II Знак дюйма или угловой секунды
‾ ‾ - Знак надчеркивания
⁄ ⁄ / Дробная черта (отличается от обычной косой черты существенно большим углом наклона и более низким распо- ложением относительно линии шриф- та)
Sweierp; ℘ р "рукописная" заглавная буква Р — знак мощности множества
& image; ℑ 3 Прописная готическая буква 1 — знак мнимой части
ℜ ℜ 91 Прописная готическая буква R — знак действительной части
™ ™ тм Знак торговой марки
ℵ ℵ К Древнееврейская буква "алеф" (приме- няется в математике для обозначения кардинальных чисел бесконечных вполне упорядоченных множеств)
Ссылки на символьные объекты, определенные в спецификации HTML 4.01
379
Таблица П1.2 (продолжение)
Мнемоническая подстановка Числовой код Внешний вид символа Описание
&1агг; ← <— Стрелка, направленная влево
↑ ↑ т Стрелка, направленная вверх
→ → —> Стрелка, направленная вправо
↓ ↓ I Стрелка, направленная вниз
↔ ↔ <-> Стрелка, указывающая одновременно вправо и влево
↵ ↵ J Угловая стрелка, указывающая вниз и затем влево (как на клавише <Enter>)
⇐ ⇐ Двойная стрелка, направленная влево
⇑ ⇑ fr Двойная стрелка, направленная вверх
⇒ ⇒ => Двойная стрелка, направленная вправо (применяется в математике в значении "следовательно")
⇓ ⇓ Двойная стрелка, направленная вниз
⇔ ⇔ Двойная стрелка, указывающая одно- временно вправо и влево (применяется в математике в значении "равно- сильно")
∀ ∀ V Квантор всеобщности
∂ ∂ a Знак частной производной
∃ ∃ 3 Квантор существования
∅ ∅ 0 Знак диаметра или пустого множества
∇ ∇ V Набла
∈ ∈ G Знак "принадлежит"
∉ ∉ £ Знак "не принадлежит"
∋ ∋ Э Знак "содержит"
∏ ∏ П Знак произведения
∑ ∑ z Знак суммы
− − — Знак "минус"
∗ ∗ * Звездочка, опущенная относительно линии шрифта до середины строки
380
Приложение 1
Таблица П1.2 (продолжение)
Мнемоническая подстановка Числовой код Внешний вид символа Описание
√ √ V Знак радикала (корня)
&ргор; ∝ GC Знак "пропорционально"
∞ ∞ ©0 Знак бесконечности
∠ ∠ z Знак угла
∧ ∧ A Знак конъюнкции
∨ ∨ V Знак дизъюнкции
∩ ∩ n Знак пересечения
∪ ∪ u Знак объединения
∫ ∫ J Знак интеграла
∴ ∴ Знак следствия
∼ ∼ Тильда, опущенная относительно ли- нии шрифта до середины строки
≅ ≅ Знак "почти равно"
≈ ≈ a Знак "приближенно равно"
≠ ≠ Знак "не равно"
≡ ≡ = Знак "тождественно равно"
≤ ≤ < Знак "меньше либо равно"
≥ ≥ > Знак "больше либо равно"
⊂ ⊂ CZ Знак "является подмножеством"
⊃ ⊃ ZD Знак "является надмножеством"
⊄ £#8836; CZ Знак "не является подмножеством"
⊆ ⊆ c Знак "является подмножеством или совпадает"
⊇ ⊇ о Знак "является надмножеством или совпадает"
⊕ ⊕ Знак "плюс" в окружности (применяется в математике как знак прямой суммы)
Sotimes; ⊗ 0 Знак умножения в окружности (приме- няется в математике как знак тензорно- го произведения)
Ссылки на символьные объекты, определенные в спецификации HTML 4.01
381
Таблица П1.2 (окончание)
Мнемоническая подстановка Числовой код Внешний вид символа Описание
&регр; ⊥ 1 Знак"перпендикулярно"
⋅ ⋅ Точка, приподнятая над линией шриф- та до середины строки (применяется в математике как знак умножения)
⌈ ⌈ г Знак "левый верхний предел"
⌉ ⌉ 1 Знак "правый верхний предел"
&Ifloor; ⌊ L Знак "левый нижний предел"
⌋ ⌋ J Знак "правый нижний предел"
⟨ 〈 < Открывающая угловая скобка
⟩ 〉 > Закрывающая угловая скобка
◊ ◊ 0 Знак в форме контурного ромба
♠ ♠ ф Символ карточной масти "пики" ("вини")
♣ ♣ * Символ карточной масти "трефы" ("кре- сти"); изображение трилистника
♥ ♥ Символ карточной масти "черви"; изо- бражение сердечка
♦ ♦ ♦ Символ карточной масти "бубны"; изо- бражение заполненного ромба
Таблица П1.3. Служебные символы, применяющиеся в конструкциях разметки;
знаки, использующиеся в различных мировых языках
Мнемоническая подстановка Числовой код Внешний вид символа Описание
" " II Прямая ("программистская") двойная кавычка
& & & Амперсанд
& It; < < Знак "меньше"; "программистская" от- крывающая угловая скобка
> > > Знак "больше"; "программистская" за- крывающая угловая скобка
382
Приложение 1
Таблица П1.3 (продолжение)
Мнемоническая подстановка Числовой код Внешний вид символа Описание
Œ Œ СЕ Прописная латинская лигатура ое
œ œ се Строчная латинская лигатура ое
SScaron; Š § Прописная латинская буква S с кароном
š S#353; S Строчная латинская буква s с кароном
Ÿ Ÿ Y Прописная латинская буква Y с умляутом
ˆ ˆ * Циркумфлекс (диакритический знак)
˜ ˜ - Тильда (диакритический знак)
    Полукегельная шпация (пробел шири- ной в половину кегля шрифта)
    Кегельная шпация (пробел с шириной, равной кеглю шрифта)
    Тонкая шпация (пробел шириной в чет- верть кегля шрифта)
& zwn j; ‌ Несоединяющий символ нулевой дли- ны (для арабских языков)
& zw j; s#8205; Соединяющий символ нулевой длины (для арабских языков)
‎ ‎ Знак направления "слева направо" (позволяет разрешать неоднозначность нейтральных знаков в текстах, набран- ных на языках с различными направле- ниями письма)
‏ ‏ Знак направления "справа налево" (позволяет разрешать неоднозначность нейтральных знаков в текстах, набран- ных на языках с различными направле- ниями письма)
– – — Полукегельное (короткое) тире
— — — Кегельное (длинное) тире
‘ ‘ 4 Открывающая одинарная английская кавычка
’ S#8217; Закрывающая одинарная английская кавычка; апостроф
Ссылки на символьные объекты, определенные в спецификации HTML 4.01
383
Таблица П1.3 (окончание)
Мнемоническая подстановка Числовой код Внешний вид символа Описание
‚ ‚ • Открывающая одинарная кавычка- "лапка"
“ “ и Открывающая двойная английская кавычка
” ” II Закрывающая двойная английская кавычка
„ „ Открывающая двойная кавычка-"лапка"
† † t Крест
‡ ‡ t Двойной крест
‰ ‰ %0 Знак промилле (тысячной доли)
‹ ‹ < Открывающая угловая кавычка (поло- вина открывающей кавычки-"елочки")
› › > Закрывающая угловая кавычка (поло- вина закрывающей кавычки-"елочки")
€ € € Знак евро
ПРИЛОЖЕНИЕ 2
Ключевые слова, обозначающие
поименованные цвета,
предусмотренные
спецификацией CSS2
и перспективными версиями CSS
Таблица П2.1. Ключевые слова для обозначения цветов, определенные в CSS2
Ключевое слово Числовой шестнадцате- ричный код Десятичное пред- ставление (красная, зеленая и синяя составляющие) Описание оттенка
aqua #OOffff 0, 255, 255 Цвет морской волны, циан
black #000000 0, 0, 0 Черный
blue #0000ff 0, 0, 255 Синий
fuchsia #ff00ff 255, 0, 255 Пурпурный, фуксин
gray #808080 128, 128, 128 Серый
green #008000 0, 128, 0 Зеленый
lime #OOffOO 0, 255, 0 Ярко-зеленый
maroon #800000 128, 0, 0 Каштановый
navy #000080 0, 0, 128 Темно-синий
olive #808000 128, 128, 0 Оливковый
orange #ffa500 255, 165, 0 Оранжевый (определен в CSS2.1 и выше)
purple #800080 128, 0, 128 Темно-пурпурный
386
Приложение 2
Таблица П2.1 (окончание)
Ключевое слово Числовой шестнадцате- ричный код Десятичное пред- ставление (красная, зеленая и синяя составляющие) Описание оттенка
red #ff0000 255, 0, 0 Красный
silver ttcOcOcO 192, 192, 192 Серебряный (светло-серый)
teal #008080 0, 128, 128 Темный циан
white 255, 255, 255 Белый
yellow #ffffOO 255, 255, 0 Желтый
Таблица П2.2. Ключевые слова для обозначения цветов набора Х11, которые
будут "узаконены" в CSS3
Ключевое слово Числовой шестнадца- теричный код Десятичное представление (красная, зеленая и синяя составля- ющие) Описание оттенка
aliceblue #f0f8ff 240, 248, 255 Г олубовато-ледяной
antiquewhite #faebd7 250, 235, 215 Цвет пожелтевших от времени страниц
aqua, cyan #00ffff 0, 255, 255 Цвет морской волны, циан
aquamarine #7fffd4 127, 255, 212 Аквамарин
azure #fOffff 240, 255, 255 Цвет небесной лазури
beige #f5f5dc 245, 245, 220 Бежевый
bisque #ffe4c4 255, 228, 196 Бисквитный
black #000000 0, 0, 0 Черный
blanchedalmond #ffebcd 255, 235, 205 Очищенный миндаль
blue #0000ff 0, 0, 255 Синий
blueviolet #8a2be2 138, 43, 226 Сине-фиолетовый
brown #a52a2a 165, 42, 42 Коричневый
burlywood #deb887 222, 184, 135 Твердая древесина
cadetblue #5f9ea0 95, 158, 160 Темный зелено-синий
chartreuse #7fff00 127, 255, 0 Зеленовато-желтый
Ключевые слова, обозначающие поименованные цвета
387
Таблица П2.2 (продолжение)
Ключевое слово Числовой шестнадца- теричный код Десятичное представление (красная, зеленая и синяя составля- ющие) Описание оттенка
chocolate #d2691e 210, 105, 30 Шоколадный
coral #ff7f50 255, 127, 80 Коралловый
cornflowerblue #6495ed 100, 149, 237 Васильковый
cornsilk #fff8dc 255, 248, 220 Бледно-бежевый
crimson #dcl43c 220, 20, 60 Кармазинный, кроваво-красный
darkblue #00008b 0, 0, 139 Темно-синий
darkcyan #008b8b 0, 139, 139 Темный циан
darkgoldenrod #b8860b 184, 134, 11 Темный цвет золотарника
darkgray, darkgrey #a9a9a9 169, 169, 169 Темно-серый
darkgreen #006400 0, 100, 0 Темно-зеленый
darkkhaki #bdb76b 189, 183, 107 Темный цвет хаки
darkmagenta #8b008b 139, 0, 139 Темно-пурпурный
darkolivegreen #556b2f 85, 107, 47 Темный оливково- зеленый
darkorange #ff8c00 255, 140, 0 Темно-оранжевый
darkorchid #9932cc 153, 50, 204 Темный цвет орхидеи
darkred #8b0000 139, 0, 0 Темно-красный
darksalmon #e9967a 233, 150, 122 Темно-лососевый
darkseagreen #8fbc8f 143, 188, 143 Темный морской зеленый
darkslateblue #483d8b 72, 61, 139 Темный аспидно-синий
darkslategray, darkslategrey #2f4f4f 47, 79, 79 Темный аспидно-серый
darkturquoise #00cedl 0, 206, 209 Темно-бирюзовый
darkviolet #9400d3 148, 0, 211 Темно-фиолетовый
deeppink #ffl493 255, 20, 147 Глубокий розовый
388
Приложение 2
Таблица П2.2 (продолжение)
Ключевое слово Числовой шестнадца- теричный код Десятичное представление (красная,зеленая и синяя составля- ющие) Описание оттенка
deepskyblue #00bfff 0, 191, 255 Глубокий небесно-синий
dimgray, dimgrey #696969 105, 105, 105 Сумеречно-серый
dodgerblue #le90ff 30, 144, 255 Осветленный синий
firebrick #b22222 178, 34, 34 Цвет огнеупорного кирпича
floralwhite #fffafO 255, 250, 240 Цветочно-белый
forestgreen #228b22 34, 139, 34 Зеленый лес
fuchsia, magenta #ff00ff 255, 0, 255 Пурпурный, фуксин
gainsboro #dcdcdc 220, 220, 220 Бледно-серый
ghostwhite #f8f8ff 248, 248, 255 Призрачно-белый
gold #ffd700 255, 215, 0 Золотой
goldenrod #daa520 218, 165, 32 Цвет золотарника
gray, grey #808080 128, 128, 128 Серый
green #008000 0, 128, 0 Зеленый
greenyellow #adff2f 173, 255, 47 Зелено-желтый
honeydew #fOfffO 240, 255, 240 Цвет медвяной росы
hotpink #ff69b4 255, 105, 180 Интенсивно-розовый
indianred #cd5c5c 205, 92, 92 Киноварь
indigo #4b0082 75, 0, 130 Индиго
ivory 255, 255, 240 Цвет слоновой кости
khaki #f0e68c 240, 230, 140 Цвет хаки
lavender #e6e6fa 230, 230, 250 Лавандовый
lavenderblush #fff0f5 255, 240, 245 Розоватый румянец
lawngreen #7cfc00 124, 252, 0 Т равянисто-зеленый
lemonchiffon #fffacd 255, 250, 205 Бледно-лимонный
lightblue #add8e6 173, 216, 230 Светло-синий
Ключевые слова, обозначающие поименованные цвета
389
Таблица П2.2 (продолжение)
Ключевое слово Числовой шестнадца- теричный код Десятичное представление (красная, зеленая и синяя составля- ющие) Описание оттенка
lightcoral #f08080 240, 128, 128 Светло-коралловый
lightcyan #eOffff 224, 255, 255 Светлый циан
lightgolden- rodyellow #fafad2 250, 250, 210 Светлый цвет золотарника
lightgray, lightgrey #d3d3d3 211, 211, 211 Светло-серый
lightgreen #90ee90 144, 238, 144 Светло-зеленый
lightpink #ffb6cl 255, 182, 193 Светло-розовый
lightsalmon #ffa07a 255, 160, 122 Светло-лососевый
lightseagreen #20b2aa 32, 178, 170 Светлый морской зеленый
lightskyblue #87cefa 135, 206, 250 Светлый небесно-синий
lightslategray, lightslategrey #778899 119, 136, 153 Светлый аспидно- серый
lightsteelblue #b0c4de 176, 196, 222 Стальной светло-синий
lightyellow #ffffeO 255, 255, 224 Бледно-желтый
lime #00ff00 0, 255, 0 Ярко-зеленый
limegreen #32cd32 50, 205, 50 Лаймово-зеленый
linen #faf0e6 250, 240, 230 Льняной
maroon #800000 128, 0, 0 Каштановый
mediumaquamarine #66cdaa 102, 205, 170 Умеренно светлый аквамарин
mediumblue #0000cd 0, 0, 205 Умеренно светлый синий
mediumorchid #ba55d3 186, 85, 211 Умеренно светлый цвет орхидеи
mediumpurple #9370db 147, 112, 219 Умеренно светлый сине-фиолетовый
mediumseagreen #3cb371 60, 179, 113 Умеренно светлый морской зеленый
mediumslateblue #7b68ee 123, 104, 238 Умеренно светлый аспидно-синий
390
Приложение 2
Таблица П2.2 (продолжение)
Ключевое слово Числовой шестнадца- теричный код Десятичное представление (красная, зеленая и синяя составля- ющие) Описание оттенка
mediumspringgreen #00fa9a 0, 250, 154 Умеренно светлый весенне-зеленый
mediumturquoise #48dlcc 72, 209, 204 Умеренно светлый бирюзовый
mediumvioletred #c71585 199, 21, 133 Умеренно светлый фиолетово-красный
midnightblue #191970 25, 25, 112 Полночный синий
mintcream #f5fffa 245, 255, 250 Мятно-кремовый
mistyrose #ffe4el 255, 228, 225 Бледно-розовый
moccasin #ffe4b5 255, 228, 181 Замшевый
navajowhite #ffdead 255, 222, 173 Светло-бежевый
navy #000080 0, 0, 128 Темно-синий
oldlace #fdf5e6 253, 245, 230 Старое кружево
olive #808000 128, 128, 0 Оливковый
olivedrab #6Ь8е23 107, 142, 35 Нежно-оливковый
orange #ffa500 255, 165, 0 Оранжевый
orangered #ff4500 255, 69, 0 Оранжево-красный
orchid #da70d6 218, 112, 214 Цвет орхидеи
palegoldenrod #eee8aa 238, 232, 170 Бледный цвет золотарника
palegreen #98fb98 152, 251, 152 Бледно-зеленый
paleturquoise #afeeee 175, 238, 238 Бледно-бирюзовый
palevioletred #db7093 219, 112, 147 Бледный фиолетово- красный
papayawhip #ffefd5 255, 239, 213 Взбитые сливки с папайей
peachpuff #ffdab9 255, 218, 185 Персиковый
peru #cd853f 205, 133, 63 Светло-коричневый
pink #ffc0cb 255, 192, 203 Розовый
Ключевые слова, обозначающие поименованные цвета
391
Таблица П2.2 (продолжение)
Ключевое слово Числовой шестнадца- теричный код Десятичное представление (красная, зеленая и синяя составля- ющие) Описание оттенка
plum tfddaOdd 221, 160, 221 Сливовый
powderblue #Ь0е0е6 176, 224, 230 Снежно-голубой
purple #800080 128, 0, 128 Темно-пурпурный
red #ff0000 255, 0, 0 Красный
rosybrown #bc8f8f 188, 143, 143 Розово-коричневый
royalblue #4169el 65, 105, 225 Благородный синий
saddlebrown #8Ь4513 139, 69, 19 Цвет седла (коричневый)
salmon #fa8072 250, 128, 114 Лососевый
sandybrown #f4a460 244, 164, 96 Песчано-коричневый
seagreen #2e8b57 46, 139, 87 Морской зеленый
seashell #fff5ee 255, 245, 238 Цвет морской раковины
sienna #a0522d 160, 82, 45 Охра
silver #c0c0c0 192, 192, 192 Серебряный (светло-серый)
skyblue #87ceeb 135, 206, 235 Небесно-синий
slateblue #6a5acd 106, 90, 205 Аспидно-синий
slategray, slategrey #708090 112, 128, 144 Аспидно-серый
snow #fffafa 255, 250, 250 Снежный
springgreen #00ff7f 0, 255, 127 Весенне-зеленый
steelblue #4682b4 70, 130, 180 Стальной синий
tan #d2b48c 210, 180, 140 Желто-коричневый (цвет загара)
teal #008080 0, 128, 128 Темный циан
thistle #d8bfd8 216, 191, 216 Цвет чертополоха
tomato #ff6347 255, 99, 71 Томатно-красный
turquoise #40e0d0 64, 224, 208 Бирюзовый
392
Приложение 2
Таблица П2.2 (окончание)
Ключевое слово Числовой шестнадца- теричный код Десятичное представление (красная, зеленая и синяя составля- ющие) Описание оттенка
violet #ee82ee 238, 130, 238 Фиолетовый
wheat #f5deb3 245, 222, 179 Пшеничный
white 255, 255, 255 Белый
whitesmoke #f5f5f5 245, 245, 245 Дымчато-белый
yellow #ffffOO 255, 255, 0 Желтый
yellowgreen #9acd32 154, 205, 50 Желто-зеленый
Предметный указатель
А
ASP (Active Server Pages) 320
С
С, C++ 322
CD АТА 124
CER (Character Entity References) 71, 85
CERN (Conseil Europeen pour la
Recherche Nucleaire) 41
CGI (Common Gateway Interface) 320
ColdFusion 320
D
DHTML (Dynamic HTML) 323
DNS (Domain Name System):
0 DNS-суффикс 33
0 DNS-сервер:
° Дополнительный DNS-сервер 35
° Предпочтительный DNS-сервер 35
0 Зона 34
° Дополнительные носители зоны 34
° Основной носитель зоны 34
° Передача зоны 35
° Синхронизация зон 34
° Файл зоны 37
DOM (Document Object Model) 324
0 DOMI 324
0 DOM2 324
0 DOM3 324
0 Дочерний объект в DOM 324
0 Корневой объект в DOM 324
0 Родительский объект в DOM 324
0 Узел дерева DOM 324
DTD (Document Type Definition) 64, 77
0 Определение типа документа 64
0 Содержимое файлов DTD 77
Е
ЕСМА (European Computer
Manufacturers Association) 320
0 ECMA-262 321
0 ECMAScript 321
else, предложение 347
Escape-последовательность 334
F
FTP (File Transfer Protocol) 26
G
GIF (Graphics Interchange Format) 105
0 GIF87a 106
0 GIF89a 106
0 GIF-анимация 109
GML (Generalized Markup Language) 64
H
HTML (HyperText Markup Language) 42,
70
0 HTML 2.0 65, 113, 167, 282
402
Предметный указатель
О HTML 3.2 67
О HTML 4.0 68
О HTML-формы 281
О Frameset, тип документов HTML 69
О Strict, тип документов HTML 68
О Transitional, тип документов HTML
68
О Абзацы в HTML 83
О Блочные элементы HTML 81
О Версии языка HTML 65
О Заголовки в HTML 82
О Заголовок HTML-документа 77
О История HTML 63
О Комментарии в HTML 123
О Метки в HTML-документах 98
О Минимальный документ HTML 4 72
О Проверка валидности HTML-кода 73
О Списки в HTML 90
О Структура HTML-документа 71
О Структурирование данных при
помощи HTML 81
О Таблицы в HTML 253
° Вложенные таблицы 272
° Группировка столбцов таблицы
264
° Группировка строк таблицы 269
° Заголовок таблицы 263
° Заголовочные ячейки таблицы 264
° Объединение ячеек таблицы 260
° Правильная таблица 255
° Растяжение ячеек таблицы 260
° Строка таблицы 255
° Ячейка таблицы 255
0 Тело HTML-документа 77
° Типы документов HTML 68
° Формы в HTML 281
° Элемент HTML-документа 72
HTTP (HyperText Transfer Protocol) 26
0 HTTP-запрос 50
0 HTTP-методы 50
° DELETE, HTTP-метод 50
° GET, HTTP-метод 50, 283
° HEAD, HTTP-метод 50
° POST, НТТР-метод 50, 283
° PUT, НТТР-метод 50
0 НТТР-ответ 50
0 HTTP-сообщение 50
° Заголовок HTTP-сообщения 50
° Начальная строка
НТТР-сообщения 50
° Тело НТТР-сообщения 50
0 НТТР-транзакция 42
0 Постоянные соединения в рамках
протокола HTTP 1.1 42
0 Сервер HTTP 42
I
IETF (Internet Engineering Task Force) 19
IP (Internet Protocol) 25
0 IPv4 29
0 IPv6 30
0 IP-адрес 27
0 Разделяемый IP-адрес 37
ISO 16262 321
J
Java 320
0 JavaScript 320
0 JavaScript 1.0 320
0 JavaScript 1.2 321
0 JavaScript 1.3 321
0 JavaScript 1.4 321
0 JavaScript 1.5 321
0 JScript 320
0 JSP (Java Server Pages) 320
JPEG (Joint Photographic Expert Group):
0 JPEG Baseline 106
° JPEG Baseline Optimized 106
0 JPEG Progressive 106
L
LZW (Lempel — Ziv — Welch),
алгоритм сжатия Лемпеля — Зива —
Велча 106
м
MIME (Multipurpose Internet Mail
Extensions) 110
Предметный указатель
403
р
Perl (Practical Extraction and Report
Language) 325
0 PeriScript 325
PHP (Personal Home Page) 320
PNG (Portable Network Graphics) 105
0 Альфа-каналы 107
R
RFC (Request For Comments) 19
s
selected, атрибут 298
SGML (Standard Generalized Markup
Language) 63
T
TCP (Transmission Control Protocol) 25
0 TCP/IP, стек протоколов 24
и
UDP 25
URL (Uniform Resource Locator):
0 Абсолютные URL 94
0 Базовый URL 39
0 Кодировка URL 283
0 Относительные URL 39, 95
0 Полный URL 39
V
VBScript 323
Visual Basic 323
w
W3C (WWW Consortium) 10, 66
0 Рекомендация W3C 66
WAI (Web Accessibility Initiative) 79
X
XForms 282
XHTML (extensible HTML) 69
0 XHTML 1.0 69
0 XHTML 1.1 69
0 XHTML 2.0 70, 110,282
0 Пространство имен XHTML 80
XML (extensible Markup Language) 69
0 Объявление XML 79, 185
404
Предметный указатель
А
Агент пользователя 42
Анализ существующих веб-проектов
перед созданием нового 58
Анкер 233
Антиква 147
Аплет 326
Апостроф 88
Атрибуты:
О Alt-текст 104, 150, 231
° onblur, атрибут 328
° onchange, атрибут 328
° onciick, атрибут 302, 327
° ondblclick, атрибут 327
° onfocus, атрибут 328
° onkeydown, атрибут 327
° onkeypress, атрибут 327
° onkeyup, атрибут 327
° onload, атрибут 328
° onmousedown, атрибут 327
° onmousemove, атрибут 327
° onmouseout, атрибут 327
° onmouseover, атрибут 327
° onmouseup, атрибут 327
° onreset, атрибут 328
° onselect, атрибут 328
° onsubmit, атрибут 328
° onunload, атрибут 328
0 Атрибуты тегов 71
° action, атрибут 282
° alt, атрибут 104
° checked, атрибут 294
° class, атрибут 178
° cols, атрибут 291
° coispan, атрибут 261
° data, атрибут 111
° disabled, атрибут 288
° enctype, атрибут 282
° for, атрибут 303
° height, атрибут 104
° href, атрибут 94
° id, атрибут 100, 178
° label, атрибут 304
° lang, атрибут 79
° language, атрибут 330
° maxlength, атрибут 288
° media, атрибут 131
° method, атрибут 282
° multiple, атрибут 297
° name, атрибут 102, 288
° rows, атрибут 291
° rowspan, атрибут 261
° size, атрибут 288
° span, атрибут 264
° src, атрибут 104, 330
° style, атрибут 124
° target, атрибут 102
° title, атрибут 104
° type, атрибут 110, 286, 330
° value, атрибут 288
° width, атрибут 104
° xml ns, атрибут 81
0 Булевы атрибуты тегов 71
0 Значения атрибутов тегов 71
Б
Базовая эталонная модель
взаимодействия открытых систем
ISO OSI 20
0 Вертикальный срез эталонной модели
ISO OSI 21
0 Горизонтальный срез эталонной
модели ISO OSI 21
Беглое ознакомление 230
Браузер 42
Булевы величины 337
в
Валидатор 73
Ввод информации 281
0 Многострочная текстовая область
ввода 287
0 Однострочное текстовое поле ввода
287
0 Поле ввода пароля 287
0 Поле выбора локального файла 287
0 Пользовательский ввод 281
Веб-браузер 42
0 Адресная строка браузера 229
0 Заголовок окна браузера 229
0 Интерфейс браузера 102
0 Статусная строка браузера 94, 229
Предметный указатель
405
Веб-графика 105
0 Подготовка графики для Web 105
Веб-сервер 42
0 Буфер веб-сервера 51
О Производительность веб-сервера 51
Веб-стандарты 10, 69, 117
Веб-страница 42
О ASP (Active Server Pages) 320
0 JSP (Java Server Pages) 320
О Выбор имен для файлов веб-страниц
71,233
О Вставка изображений в веб-страницу
103
О Главная страница сайта 71, 165, 229
О Динамические веб-страницы 56
О Индексная страница сайта 71
О Макет веб-страницы 59
О Полезная площадь страницы 165
О Рендеринг веб-страницы 55
О Статические веб-страницы 56
О Табличная верстка веб-страниц 254
О Фиксированная ширина страниц 166
О Функциональные области веб-
страницы 164
О Шаблон веб-страницы 60
Веб-технологии 10
О Открытые технологии 66
О Перспективы развития веб-
технологий стороны клиента 68
Веб-формы 281
О Кнопки веб-форм 287
О Обработчик данных веб-формы 282
О Тип содержимого веб-формы 282
Виртуальный узел 37
Возвращаемое значение 333
Вывод информации 281
Выделение текста 152
Выключка 85
Высоконагрузочные сервисы 51
г
Гарнитура 147
Гипермедиа 41,95
Г ипертекст 41
Гипертекстовые ссылки 94
О Внешние ссылки 232
О Внутренние ссылки 232
О Непросмотренные ссылки 232
О Просмотренные ссылки 232
О Подчеркивание 152
° Подчеркивание ссылок 232
О Ссылки в пределах одного документа
98
0 Ссылки на символьные объекты 71,
85
Гольдфарб, Чарльз 64
Графика:
0 Векторная графика 105
0 Растровая графика 105
Гротеск 147
д
Декрементирование 350
Дефис 85
Дизъюнкция 345
Директива:
0 ©import, директива 124
0 ©media, директива 131
Домен:
0 RU-CENTER, регистратор доменов
32
0 Корневой домен 31
0 Полное правомочное доменное имя
33
0 Система доменных имен 30
0 Служба доменных имен 34
ж
Живой журнал 7
3
Зарезервированное слово 335
Засечка 147
Знак минус 86
и
Идентификатор 336
0 Идентификатор сети 28
0 Идентификатор хоста 28
406
Предметный указатель
Индексированная палитра 107, 108
Инкрементирование 350
Интернет 17
0 Коммерциализация Интернета 66
Информационные процессы человека
230
История Всемирной паутины 41
к
Кавычки 88
Капитель 148, 152
Каскад 128
Когнитивная психология 230
Код 53
0 Код статуса 52
0 Конечный код 56
0 Удобочитаемость кода 71, 79, 121,
209, 336
Команда 322
Коммьюнити 47
Конкатенация строк 342
Контейнер 72
О Элемент-контейнер 72
Контент 46
О Доступность контента 47, 168
О Качество контента 47
) Контекст форматирования 180
Конфиденциальность 306
Конъюнкция 345
Кроссбраузерная совместимость 182,
323
л
Рексема 336
Зинейные размеры графических
изображений 187
1ист стилей 54, 64
> CSS (Cascading Style Sheets) 68
° CSS1 68
° CSS2 68, 114
° CSS2.170, 137
° CSS3 70, 120
° CSS-верстка 202
’ DSSSL (Document Style Semantics and
Specification Language) 65
0 Абсолютные единицы измерения в
CSS 140
0 Аппаратно-зависимые стили 130
0 Блочная модель CSS2 68, 169
0 Вес CSS-правил 128
0 Визуальные свойства CSS 130
0 Внедренные листы стилей 122
0 Внешние листы стилей 122
0 Внутренние листы стилей 122
0 Группировка свойств листа стилей
209
0 Единицы измерения в CSS 140
0 Значения свойств CSS 122
0 Комментарии в CSS 123
0 Конфликт правил в CSS 127
0 Локальные объявления стилей 124
0 Местные объявления стилей 124
0 Модель визуального форматирования
CSS2 177
0 Оптимизация CSS-кода 209
0 Относительные единицы измерения в
CSS 140
0 Правило для определения стиля 121
0 Свойства в CSS 122
0 Специфичность CSS-правил 128
0 Стиль кодирования 209
Литерал 337
Логическое структурирование данных
64
Лори, Раймонд 64
м
Маршрутизатор 23
Маска 28
Массив 338
0 Ассоциативный массив 338
0 Динамический массив 338
0 Индекс массива 338
0 Ключ ассоциативного массива 338
Минимализм 113, 167
Мнемонические подстановки 85
Многоточие 88
Модульная сетка 166
Мост 23
Мошер, Эдвард 64
Предметный указатель
407
н
Навигация:
О Блок навигации 164
О Внешняя навигация 229
О Внутренняя навигация 229
О Двухкоординатная система навигации
164
О Система навигации сайта 97, 229
Наследование 338
Наследование значений свойств 137
Начертание 147
О Жирное начертание 148
О Курсивное начертание 148
О Наклонное начертание 148
О Полужирное начертание 148
О Прямое начертание 148
О Растянутое начертание 148
О Сверхжирное начертание 148
О Светлое начертание 148
О Сжатое начертание 148
Некоммерческие веб-проекты 44
Нильсен, Якоб 229
Нормальный поток 176
о
Область:
О Область видимости 337
О Область основного текста 164
О Область просмотра 181
Обработка событий 327
Обработка фотографий 109
Обработчик события 302
0 Атрибуты обработчиков событий 327
0 Объект 338
0 Класс объектов 338
0 Конструктор объектов 338
0 Метод объекта 340
0 Свойство объекта 338
0 Связывание объектов с веб-страницей
ПО
0 Тип содержимого объекта 110
Объектная модель 322
Объектная модель документа 324
Объекты, внедренные в код
веб-страницы 54
Объекты, связанные с веб-страницей 54
Операнд 344
Оператор 329, 344
0 for, оператор 349
0 if, оператор 345
0 new, оператор 338
0 return, оператор 333
0 while, оператор 351
0 Составной оператор 345
0 Условный оператор 345
Операция 344
0 Арифметические операции 344
0 Логические операции 344
0 Приоритеты операций 344
Организация данных:
0 Линейная организация данных 254
0 Последовательная организация
данных 254
0 Табличная организация данных 253
Открытая система 20
Отрицание 345
Отрицательные значения линейных
единиц измерения 145
Очистка формы 300
п
Переключатель единственного выбора
287
Перекрытие отступов 175
Переменная 336
0 Глобальные переменные 337
0 Инициализация переменной 337
0 Локальные переменные 337
0 Нетипизированные переменные 336
0 Объявление переменной 336
0 Присвоение значения переменной
337
0 Типизация 336
° Типизированные переменные 336
Перенос:
0 Мягкий перенос 88
0 Переносы на веб-страницах 88
Пика 141
408
Предметный указатель
Пиксел 141
Подвал 164, 269
Подключаемые модули 95
Подложка 183
О Абсолютное позиционирование 192
О Относительное позиционирование
192
О Статическое позиционирование 192
О Фиксированное позиционирование
192
Пользовательский агент 42
Портал 44
Постановка задачи 58
Потомок 324
Правила текстового набора 86
Предок 324
Представление данных 64
О Управление представлением данных
117
Принцип приоритетности 128
Принцип разделения содержания и
представления 64, 68, 114
Пробел:
О Неразрывный пробел 85
О Расстановка неразрывных пробелов
87
О Расстановка пробелов 86
Программа 322
Протокол 19
О FTP (File Transfer Protocol) 26
0 TCP (Transmission Control Protocol)
25
Псевдокласс 234
0 active, псевдокласс 235
0 focus, псевдокласс 235
0 hover, псевдокласс 235
0 link, псевдокласс 234
0 visited, псевдокласс 234
О Динамический псевдокласс 234
Пункт 140
р
Радиокнопка 287
Разделы CDATA 124
Разделы документа 98
Разметка 63
Разрешающая способность 141
Разрядка 152
Распределенная гипертекстовая система
41
Растяжение графических изображений
187
Расширения Netscape и Microsoft 67, 113
Режим обратной совместимости 184
Ресурс 37
РосНИИРОС (Российский научно-
исследовательский институт развития
общественных сетей) 32
Рост строчных букв 140
с
Сайт 42
0 Веб-сайт 42
° Критерии качества веб-сайтов 7
0 Ввод сайта в эксплуатацию 61
0 Выработка концепции сайта 58
0 Информационные сайты 46
0 Карта сайта 231
0 Классификация веб-сайтов 43
0 Коммерческие веб-сайты 43
0 Логическая структура сайта 229
0 Подготовка начальной порции
информационного наполнения сайта
59
0 Пожизненное сопровождение сайта 61
0 Презентационные сайты 47
0 Сайты-сервисы 49
° Проектирование и реализация
сервисов сайта 61
0 Сборка компонентов сайта 61
0 Текстуальная доступность
содержания сайта 114
0 Тестирование сайта 61
0 Технологическая цепочка создания
сайта 58
0 Эскизе макета сайта 166
Свисания 141
Свойства:
0 background, свойство 145
° background-attachment, свойство
139
Предметный указатель
409
° background-color, свойство 135
° background-image, свойство 139
° background-position, свойство 139
° background-repeat, свойство 139
О border, свойство 170
° border-bottom, свойство 172
° border-bottom-color, свойство 172
° border-bottom-style, свойство 172
° border-bottom-width, свойство 172
° border-collapse, свойство 257
° border-color, свойство 171
° border-left, свойство 172
° border-left-color, свойство 172
° border-left-style, свойство 172
° border-left-width, свойство 172
° border-right, свойство 172
° border-right-color, свойство 172
° border-right-style, свойство 172
° border-right-width, свойство 172
° border-spacing, свойство 259
° border-style, свойство 171
° border-top, свойство 172
° border-top-color, свойство 172
° border-top-style, свойство 172
° border-top-width, свойство 172
° border-width, свойство 171
0 bottom, свойство 192
0 caption-side, свойство 264
0 clear, свойство 201
0 color, свойство 135
0 empty-cell, свойство 259
0 float, свойство 201
0 font, свойство 153
° font-family, свойство 149
° font-size, свойство 150
° font-style, свойство 152
° font-variant, свойство 152
° font-weight, свойство 152
0 height, свойство 181
0 left, свойство 192
0 list-style, свойство 159
° list-style-image, свойство 158
° list-style-position, свойство 159
° list-style-type, свойство 158
0 margin, свойство 170
° margin-bottom, свойство 156, 173
° margin-left, свойство 173
° margin-right, свойство 173
° margin-top, свойство 156, 173
0 max-height, свойство 191
0 max-width, свойство 191
0 min-height, свойство 191
0 min-width, свойство 191
0 overflow, свойство 190
° overflow-x, свойство 190
° overflow-y, свойство 190
0 padding, свойство 170
° padding-bottom, свойство 173
° padding-left, свойство 173
° padding-right, свойство 173
° padding-top, свойство 173
0 position, свойство 191
0 right, свойство 192
0 table-layout, свойство 267
0 text:
° text-align, свойство 153
° text-decoration, свойство 154
° text-indent, свойство 153
° text-transform, свойство 154
0 top, свойство 192
0 white-space, свойство 154
0 width, свойство 181
0 z-index, свойство 196
Селектор 121
0 Комбинированные селекторы 122
0 Селекторы атрибутов 312
0 Селекторы классов 178
0 Селекторы уникальных элементов
178
Семантика 158, 335
0 Семантически нейтральные элементы
155, 178
Сервлет 326
Символы-черточки 85
Синтаксис 335
Скрипт 54, 322
Скрытое поле формы 287
Событие 327
Список:
0 Вложенные списки 92
0 Маркированный список 90
0 Нумерованный список 90
0 Список единственного выбора 287
410
Предметный указатель
Список (прод.)\ 0 <strong> 92
0 Список множественного выбора 287 0 Списки в HTML 90 Средняя длина слова в английском и русском языках 84 Среды и устройства вывода информации 117, 130 Стек 23 0 Стек протоколов TCP/IP 24 Стойка 147 Строка пройденного пути 233 Структурная разметка 64 Структурные единицы текста 82 Сценарий 322 0 <style> 122 0 <table> 255 0 <tbody>269 0 <td> 255 0 <textarea> 286 0 <tfoot> 269 0 <th> 261 0 <thead> 269 0 <title> 72 0 <tr> 255 0 <ul> 90 0 Закрывающий тег 71 0 Открывающий тег 71
т 0 Старт-тег 71 0 Стоп-тег 71
Тег 53, 71 0 <!DOCTYPE> 72 0 <а> 94 0 <body> 77 0 <br> 89 0 <caption> 263 0 <col> 264 0 <colgroup> 264 0 <div>155, 178 0 <em> 92 0 <fieldset> 311 0 <form> 282 0 <hl> — <h6> 82 0 <head> 77 0 <html> 78 0 <img> 103 0 <input> 286 0 <label> 303 0 <legend> 311 0 <li> 90 0 <link> 122 0 <object>110 0 <ol> 90 0 <optgroup> 304 0 <option> 297 0 <p> 76, 83 0 <script> 329 0 <select> 286 0 <span> 155 Типы сред и устройств 130 Тире: 0 Длинное тире 85 0 Короткое тире 86 У Удобочитаемость текста 85 ф Флаговый набор 84 Флажок 287 Формат 47 0 Графические форматы 105 Фотографические изображения 109 0 Функция 331 0 function, ключевое слово 331 0 Аргумент функции 333 0 Значение, возвращаемое функцией 333 0 Тело функции 331 X Хостинг 36 0 Виртуальный хостинг 51 0 Выделенный хостинг 51 Хэш 338
Предметный указатель
411
ц
Целевая аудитория 45
Циклы 349
О Итерация цикла 350
О Тело цикла 351
ш
Шапка 164, 269
Шлюз 23
Шпация:
0 Кегельная шпация 86, 140
О Круглая шпация 86
Шрифт 147
О Акцидентные шрифты 149
О Алфавитно-цифровые шрифты 147
О Декоративные шрифты 147
О Кегль шрифта 82, 86
О Контрастность шрифта 148
О Моноширинные шрифты 148
О Наборные шрифты 149
О Насыщенность шрифта 148
О Пропорциональные шрифты 148
О Рубленые шрифты 147
Штамб 147
Штрих 147
О Основной штрих 147
О Соединительный штрих 147
э
Эйч, Брендан 320
Элементы:
О Блочные элементы HTML 81
О Вложенные элементы 72
О Выносные элементы 141
О Корневой элемент 72
О Линейные размеры элементов 180
0 Отступы вокруг элемента 170
0 Перекрывающиеся элементы 72
О Позиционирование элементов 191
0 Поля вокруг содержимого элемента
170
0 Рамка элемента 170
0 Родительский элемент 137
0 Селекторы уникальных элементов
178
0 Семантически нейтральные элементы
155, 178
0 Содержимое элемента 170
0 Элемент HTML-документа 72
0 Элемент-контейнер 72
я
Язык программирования 321
0 С, C++322
Java 320
0 JavaScript 320
О JavaScript 1.0 320
О JavaScript 1.2 321
О JavaScript 1.3 321
О JavaScript 1.4 321
О JavaScript 1.5 321
О JScript 320
О Алфавит языка программирования
335
О Метаязык 63
О Объектно-ориентированный язык
программирования 322
СЛМ~УЧИТ
^ЬЬу
HTML, CSS, СКРИПТЫ:
практика создания сайтов
Издание адресовано новичкам в веб-разработке, но новичкам увлеченным,
жажлушим познать эту кухню изнутри. Возможно, речь идет о будущих
профессионалах отрасли. На страницах самоучителя нет догматических
пошаговых инструкций, описывающих шаблонные способы "сколачивания"
веб-страниц за пять минут. Напротив, автор склоняет читателя к самосто-
ятельному анализу и творческому осмыслению изложенных концепций.
Книга, сопровождаемая компакт-диском с почти сотней тщательно проте-
стированных практических примеров, научит читателей грамотно и без
посторонней помощи создавать полноценные сайты, осознанно выбирая
технологические решения.
Ломов Артемий Юрьевич, инженер в области сетевых
технологий, практикующий веб-разработчик, препо-
даватель в нескольких московских вузах, автор ряда
тренингов в рамках международной программы
"Обучение и доступ к Интернет" (IATP). Участник га-
лереи "Физиономии русского Интернета" (ezhe.ru/fri).
Автор еженедельных колонок для веб-разработчиков
(web-anatomy.ru), завоевавших второе место на про-
фессиональном конкурсе "РОТОР-2005". Опублико-
вал более 50 статей в журналах Chip, Chip Special
Hard’n'Soft "Компьютерра" и др.
CD содержит
свыше 80 примеров,
включая небольшой
завершенный сайт
и интерактивное
динамическое приложение
БХВ-Петербург
194354- Санкт-Петербург
ул. Есенина, 5Б
E-mail- mail@bhvru
Internet: www.bhv.ru
Тел./факс (812)591-6243