Создай Свой Веб-сайт с Помощью HTML и Css

ББК 32.988.
02-018
УДК 004.738.5
Л67
Ллойд Йен
Л67 Создай свой веб-сайт с помощью HTML и CSS. — СПб.: Питер, 2013. — 416 с.: ил.
ISBN 978-5-496-00510-4
Благодаря этой книге вы научитесь создавать профессиональные сайты, которые будут легко обнов-
ляться и функционировать в любых браузерах. В этом вам помогут практические авторские примеры
использования популярных инструментов веб-разработки HTML и CSS.
Из книги вы узнаете:
— как профессионально разрабатывать сайты;
— как оформлять текст и управлять макетом страницы с помощью CSS;
— как создавать и оптимизировать графику для работы в Сети;
— как делать сайты интерактивными, добавляя на них формы;
— как внедрять поиск по сайту и страницы для обратной связи с пользователем;
— как отслеживать посетителей с помощью сайта Google Analytics;
— как добавлять на сайт потрясающие возможности благодаря HTML5 и CSS3;
— как применять диагностические и отладочные инструменты для поиска возможных проблем.
12+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ.)
ББК 32.988.02-018
УДК 004.738.5
Права на издание получены по соглашению с Sitepoint. Все права защищены. Никакая часть данной книги не
может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских
прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как на-
дежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может
гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные
ошибки, связанные с использованием книги.
ISBN 978-0987090850 англ. Copyright © 2011 SitePoint Pty. Ltd.

Authorized Russian translation of the English edition of Build Your Own
Website The Right Way Using HTML & CSS, 3rd Edition © 2011 SitePoint
Pty. Ltd. This translation is published and sold by permission of O’Reilly
Media, Inc., the owner of all rights to publish and sell the same.
ISBN 978-5-496-00510-4 © Перевод на русский язык ООО Издательство «Питер», 2013
© Издание на русском языке, оформление
ООО Издательство «Питер», 2013
Краткое содержание
Предисловие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
От издательства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Глава 1. Приготовьте инструменты!. . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Глава 2. Ваши первые веб-страницы . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Глава 3. Добавляем стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Глава 4. Преображение с CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Глава 5. Начинаем рисовать! Используем на сайте изображения . . . . 173

Глава 6. Таблицы: средства для организации данных . . . . . . . . . . . . 210
Глава 7. Формы: взаимодействие с аудиторией . . . . . . . . . . . . . . . . . 229
Глава 8. Размещение сайта в Сети. . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Глава 9. Совершенствуем сайт с HTML5 и CSS3 . . . . . . . . . . . . . . . . . 302
Глава 10. Добавляем интерактивности с помощью

библиотеки jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Глава 11. Что делать, если что-то идет не так . . . . . . . . . . . . . . . . . . 350

Глава 12. Страничку на прокачку! Инструменты, которые вы можете
добавить бесплатно. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Глава 13. А что теперь? Что вы можете изучать дальше . . . . . . . . . . 398
Оглавление
Предисловие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Что такое браузер?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Для кого эта книга. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Чему вас научит книга. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Как вы будете учиться создавать собственный сайт . . . . . . . . . . . . 25
HTML, CSS, разметка… Азы терминологии! . . . . . . . . . . . . . . 26
Создание учебного сайта. . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Чего нет в этой книге. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Содержание книги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Где получить помощь. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Форумы SitePoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Сайт книги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Рассылка издательства SitePoint. . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Подкаст SitePoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Обратная связь . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Благодарности. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Оглавление 7
Обозначения, использованные в книге. . . . . . . . . . . . . . . . . . . . . . 32

Обозначения разметки. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Советы, примечания и предупреждения. . . . . . . . . . . . . . . . 33
От издательства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Глава 1. Приготовьте инструменты!. . . . . . . . . . . . . . . . . . . . . . . . . 35

1.1. Основные инструменты, которые вам нужны . . . . . . . . . . . . . . 35
Базовые инструменты Windows. . . . . . . . . . . . . . . . . . . . . . . 36
Базовые инструменты в Mac OS X. . . . . . . . . . . . . . . . . . . . . 38
1.2. Дополнительные инструменты. . . . . . . . . . . . . . . . . . . . . . . . . 39
Инструменты Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Инструменты Mac OS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
1.3. Не только текст. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Инструменты Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Инструменты Mac OS X. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
1.4. Online-редакторы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
1.5. Создайте место для своего сайта. . . . . . . . . . . . . . . . . . . . . . . 48
Windows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
1.6. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Глава 2. Ваши первые веб-страницы. . . . . . . . . . . . . . . . . . . . . . . . 52

2.1. Приятно познакомиться, HTML! . . . . . . . . . . . . . . . . . . . . . . . . 52
Анатомия веб-страницы. . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Посмотрим на исходный код. . . . . . . . . . . . . . . . . . . . . . . . . 53
Базовые требования к веб-странице. . . . . . . . . . . . . . . . . . . 54
Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
8 Оглавление
Элемент html. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Элемент head. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Элемент title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Элемент meta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Другие элементы, входящие в head . . . . . . . . . . . . . . . . . . . 60
Элемент body. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Самая простая в мире веб-страница. . . . . . . . . . . . . . . . . . . 61
Заголовки и структура документа. . . . . . . . . . . . . . . . . . . . . 63
Абзацы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Для тех, кто любит списки. . . . . . . . . . . . . . . . . . . . . . . . . . 64
Комментарии в HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Символы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
2.2. Погружение в сайт . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Главная страница: начальная точка всех сайтов . . . . . . . . . 70
Разбивка страниц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Связь между новыми страницами. . . . . . . . . . . . . . . . . . . . . 86
Цитата (А кто это сказал?). . . . . . . . . . . . . . . . . . . . . . . . . . 89
Элемент сite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Элементы strong и em . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Небольшой перерыв . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
2.3. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Глава 3. Добавляем стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

3.1. Что такое CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
3.2. Встроенные стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Добавление встроенных стилей . . . . . . . . . . . . . . . . . . . . . . 94
Элемент span. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
3.3. Внутренние таблицы стилей . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Непонятно? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Почему внутренние таблицы стилей лучше
встроенных стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
3.4. Внешние таблицы стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Почему внешние таблицы стилей лучше внутренних . . . . . . 98
Создание файла с внешними таблицами стилей . . . . . . . . . . 99
Привязка CSS к веб-странице. . . . . . . . . . . . . . . . . . . . . . . 100
3.5. Начинаем строить таблицу стилей. . . . . . . . . . . . . . . . . . . . . 101
Оформление заголовков . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Расширим стилизацию. . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Попробуем новый стиль. . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Начальный набор инструментов для оформления. . . . . . . . 109
Резюме: история изменений стиля . . . . . . . . . . . . . . . . . . . 110
Рассмотрим элементы в контексте . . . . . . . . . . . . . . . . . . . 113
Контекстные селекторы. . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Объединение стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Какое правило победит? . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Оценим прогресс . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Оформление ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Селекторы классов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Оформление части текста с использованием
элемента span . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
3.6. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Глава 4. Преображение с CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

4.1. Блочные элементы против встроенных . . . . . . . . . . . . . . . . . 127
Блочные элементы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Встроенные элементы . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Вложение встроенных элементов друг в друга . . . . . . . . . . 130

Встроенные элементы никогда не содержат блочные . . . . . 131
Оформление встроенных и блочных элементов . . . . . . . . . 132
4.2. Изменение размера блоков . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Установление ширины . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Установление высоты . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
4.3. Добавление границ блочным элементам . . . . . . . . . . . . . . . . 136
Примеры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Оформление отдельных сторон элемента. . . . . . . . . . . . . . 140
Быстрое оформление границ . . . . . . . . . . . . . . . . . . . . . . . 141
Доступные стили границ . . . . . . . . . . . . . . . . . . . . . . . . . . 141
4.4. Установка форм и размеров для сайта дайверов . . . . . . . . . . 142
Добавление отступов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Использование отступов в учебном сайте. . . . . . . . . . . . . . 147
Поля . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Блочная модель. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
4.5. Свободное расположение элементов на странице . . . . . . . . . 150
Отображение структуры. . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Абсолютное позиционирование . . . . . . . . . . . . . . . . . . . . . 152
4.6. Другие параметры разметки . . . . . . . . . . . . . . . . . . . . . . . . . 162
Абсолютное позиционирование — следующий
уровень! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Относительное позиционирование . . . . . . . . . . . . . . . . . . . 164
Плавающее позиционирование . . . . . . . . . . . . . . . . . . . . . 167
4.7. Оформление списков. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
4.8. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

Глава 5. Начинаем рисовать! Используем

на сайте изображения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
5.1. Внутристрочные изображения. . . . . . . . . . . . . . . . . . . . . . . . 173
Структура элемента img. . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Веб-доступность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
5.2. JPEG, GIF или PNG? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
5.3. Прозрачность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
5.4. Создание галереи изображений. . . . . . . . . . . . . . . . . . . . . . . 180
Обновление навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Добавление новой страницы для фотогалереи . . . . . . . . . . 181
Добавление первого изображения . . . . . . . . . . . . . . . . . . . 182
Форматирование рисунков
с использованием CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Именование изображений . . . . . . . . . . . . . . . . . . . . . . . . . 185
5.5. Основы редактирования изображений. . . . . . . . . . . . . . . . . . 190
Обрезка изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Специальные эффекты . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Уменьшение больших изображений . . . . . . . . . . . . . . . . . . 194
Другое программное обеспечение . . . . . . . . . . . . . . . . . . . 196
5.6. Наполнение галереи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
5.7. Поиск изображений для вашего сайта . . . . . . . . . . . . . . . . . . 198

5.8. Фоновые изображения в CSS. . . . . . . . . . . . . . . . . . . . . . . . . 199
Повторяющееся изображение . . . . . . . . . . . . . . . . . . . . . . 199
Неповторяющиеся изображения . . . . . . . . . . . . . . . . . . . . 203
Сокращенная запись фонового изображения . . . . . . . . . . . 204
Фиксированная высота и ширина . . . . . . . . . . . . . . . . . . . . 204

Установим фоновый рисунок для навигации. . . . . . . . . . . . 205
5.9. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Глава 6. Таблицы: средства для организации данных . . . . . . . . . 210

6.1. Что такое таблица?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
6.2. Структура таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
6.3. Оформление таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Границы, интервалы и выравнивание. . . . . . . . . . . . . . . . . 215
Классификация ваших таблиц . . . . . . . . . . . . . . . . . . . . . . 217
6.4. Веб-доступность таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Линеаризация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Summary. Итоги?.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Подписи к таблицам. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Добавление таблицы клубных мероприятий . . . . . . . . . . . . 219
Оформление ячеек таблицы. . . . . . . . . . . . . . . . . . . . . . . . 224
6.5. Сложные таблицы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Объединение ячеек . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Продвинутый уровень веб-доступности . . . . . . . . . . . . . . . 226
6.6. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Глава 7. Формы: взаимодействие с аудиторией . . . . . . . . . . . . . . 229

7.1. Структура формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
7.2. Простая форма . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
7.3. Составные элементы формы . . . . . . . . . . . . . . . . . . . . . . . . . 231
Элемент form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Элементы fieldset и legend . . . . . . . . . . . . . . . . . . . . . . . . . 232
Элемент label. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Элемент input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Элемент select . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Элемент textarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Кнопка Submit (Отправить запрос). . . . . . . . . . . . . . . . . . . 241
Стандартное представление элементов формы . . . . . . . . . 242
7.4. Создание контактной формы . . . . . . . . . . . . . . . . . . . . . . . . . 245
Редактирование страницы «Свяжитесь с нами» . . . . . . . . . 245
Добавление формы и элемента fieldset. . . . . . . . . . . . . . . . 245
Стилизация fieldset и legend в CSS . . . . . . . . . . . . . . . . . . . 248
Добавление текстовых полей ввода . . . . . . . . . . . . . . . . . . 249
Наведем порядок в метках с помощью CSS. . . . . . . . . . . . . 252
Добавление элемента select. . . . . . . . . . . . . . . . . . . . . . . . 254
Добавление элемента textarea . . . . . . . . . . . . . . . . . . . . . . 256
Добавление флажков и переключателя . . . . . . . . . . . . . . . 257
И напоследок: кнопка отправки запроса. . . . . . . . . . . . . . . 259
7.5. Обработка введенных в форму данных . . . . . . . . . . . . . . . . . 261
Регистрация для обработки формы . . . . . . . . . . . . . . . . . . 262
Вставка кода формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Обратная связь по электронной почте . . . . . . . . . . . . . . . . 273
7.6. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Глава 8. Размещение сайта в Сети . . . . . . . . . . . . . . . . . . . . . . . . 276

8.1. Модель «клиент — сервер». . . . . . . . . . . . . . . . . . . . . . . . . . 276
8.2. Глоссарий веб-хостинга. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
8.3. Хостинг сайта, или Где найти пространство для сервера . . . . 278
Бесплатный хостинг — где подвох? . . . . . . . . . . . . . . . . . . 278

Веб-хостинг у вашего провайдера . . . . . . . . . . . . . . . . . . . 279
Бесплатный хостинг с платным доменным именем . . . . . . . 279
8.4. Веб-переадресация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
8.5. Платный веб-хостинг. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
8.6. Необходимые элементы хостинга. . . . . . . . . . . . . . . . . . . . . . 282
FTP-доступ к вашему серверу. . . . . . . . . . . . . . . . . . . . . . . 282
Пространство для хранения файлов. . . . . . . . . . . . . . . . . . 282
Допустимая ширина полосы. . . . . . . . . . . . . . . . . . . . . . . . 284
8.7. Дополнительные бонусы . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Электронная почта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Серверные включения (Server Side Includes, или SSIs) . . . . 285
Поддержка сценарных языков и баз данных. . . . . . . . . . . . 286
8.8. Предполетная проверка: как ваши веб-страницы выглядят
в разных браузерах?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
8.9. Загрузка ваших файлов на сервер. . . . . . . . . . . . . . . . . . . . . 288
Настройки FTP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Загрузка с FileZilla для Windows . . . . . . . . . . . . . . . . . . . . . 288
Загрузка с Cyberduck для Mac OS X . . . . . . . . . . . . . . . . . . 292
Другие инструменты для загрузки . . . . . . . . . . . . . . . . . . . 294
8.10. Где находится ваш сайт? . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Проверка ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Валидация веб-страниц . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
8.11. Раскрутка сайта. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Продвигайте сайт в поисковых системах . . . . . . . . . . . . . . 299
Расскажите о сайте своим друзьям и коллегам . . . . . . . . . . 300
Добавьте информацию о сайте

в подпись электронной почты . . . . . . . . . . . . . . . . . . . . 300
Сообщите о себе на соответствующем форуме . . . . . . . . . . 300
Обмен ссылками . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
8.12. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Глава 9. Совершенствуем сайт с HTML5 и CSS3 . . . . . . . . . . . . . . 302

9.1. HTML5: краткая история . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Прокладка козьих троп . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Браузеры с поддержкой HTML5 . . . . . . . . . . . . . . . . . . . . . 304
Замещение div-элементов HTML5-элементами . . . . . . . . . . 306
Разметка основного контента. . . . . . . . . . . . . . . . . . . . . . . 311
Элемент aside . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Элемент footer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Элемент article. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Элементы figure и figcaption. . . . . . . . . . . . . . . . . . . . . . . . 315
И это еще не все в HTML5!. . . . . . . . . . . . . . . . . . . . . . . . . 318
9.2. CSS3… CSS2… В чем отличие? . . . . . . . . . . . . . . . . . . . . . . . . 319
CSS3 отнюдь не универсален. . . . . . . . . . . . . . . . . . . . . . . 320
Хорошие новости о CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Прощайте, острые углы! . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Детали в тени . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
От box-shadow к text-shadow . . . . . . . . . . . . . . . . . . . . . . . 327
А вашего шрифта у нас нет!. . . . . . . . . . . . . . . . . . . . . . . . 329
Другие новые функции CSS3 . . . . . . . . . . . . . . . . . . . . . . . 335
9.3. Internet Explorer — отдыхает! . . . . . . . . . . . . . . . . . . . . . . . . 335
9.4. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Глава 10. Добавляем интерактивности с помощью

библиотеки jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
10.1. JavaScript? jQuery? В чем разница?. . . . . . . . . . . . . . . . . . . . 337
Стандартный сценарий JavaScript по сравнению с jQuery:

простой пример. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Где найти jQuery и как ею пользоваться? . . . . . . . . . . . . . . 339
Один момент! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
jQuery: к старту готов!. . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
10.2. Использование jQuery на учебном сайте . . . . . . . . . . . . . . . 343
Установка ссылок на jQuery . . . . . . . . . . . . . . . . . . . . . . . . 343
Добавление значений по умолчанию . . . . . . . . . . . . . . . . . 344
Отображение подписей к галерее при наведении

указателя мыши . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
10.3. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Глава 11. Что делать, если что-то идет не так . . . . . . . . . . . . . . 350

11.1. Вступительное слово. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Во время разработки держите открытыми

несколько браузеров . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Валидация HTML и CSS в процессе работы . . . . . . . . . . . . . 352
Изучайте ошибки браузеров. . . . . . . . . . . . . . . . . . . . . . . . 354
Приготовьте браузер к бою — расширения! . . . . . . . . . . . . 355
11.2. Исследование проблем с Firebug . . . . . . . . . . . . . . . . . . . . . 360
11.3. Web Developer Toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Отключение CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Отключение JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Обзор элементов на странице . . . . . . . . . . . . . . . . . . . . . . 367

Скрытие рисунка для отображения атрибутов alt . . . . . . . . 368

Просмотр информации о CSS и JavaScript . . . . . . . . . . . . . . 370
И это еще не все…. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
11.4. Как использовать XRAY . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
11.5. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Глава 12. Страничку на прокачку! Инструменты, которые

вы можете добавить бесплатно . . . . . . . . . . . . . . . . . . . . . . . . 376
12.1. Узнайте все о своих посетителях . . . . . . . . . . . . . . . . . . . . . 377
Выбор статистического сервиса . . . . . . . . . . . . . . . . . . . . . 377
Регистрация учетной записи Google . . . . . . . . . . . . . . . . . . 378
Добавление кода на ваши веб-страницы . . . . . . . . . . . . . . 381
12.2. Поиск на вашем сайте . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
12.3. Поиск по жанру. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
12.4. Развитие поиска с помощью jQuery . . . . . . . . . . . . . . . . . . . 393
12.5. Дискуссионные форумы. . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
12.6. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
Глава 13. А что теперь? Что вы можете изучать дальше. . . . . . . 398

13.1. Совершенствование HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Официальная документация . . . . . . . . . . . . . . . . . . . . . . . 400
Другие ресурсы о HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
13.2. Расширение ваших знаний о СSS . . . . . . . . . . . . . . . . . . . . . 402
Официальная документация . . . . . . . . . . . . . . . . . . . . . . . 403
The Ultimate CSS Reference. . . . . . . . . . . . . . . . . . . . . . . . . 404
HTML Dog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
CSS3.info . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Дискуссионные листы СSS . . . . . . . . . . . . . . . . . . . . . . . . . 405

Сопутствующий сайт CSS Discuss List . . . . . . . . . . . . . . . . . 406
13.3. Изучение JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
13.4. Путь к мастерству в jQuery . . . . . . . . . . . . . . . . . . . . . . . . . 408
13.5. Оптимизация производительности сайта . . . . . . . . . . . . . . . 408
13.6. Изучение программирования на серверной стороне . . . . . . . 409
Краткий обзор сценарных языков. . . . . . . . . . . . . . . . . . . . 410
Изучение PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
13.7. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Посвящается Манде, моей «лучшей половине».
Эта книга не была бы написана без твоей посто-
янной поддержки.
С любовью, Ллойди
Предисловие
Поздравляю вас с покупкой этой книги! О, минутку, может, вы только собираетесь
купить ее? Может, вы остановились полистать ее в своем местном книжном мага-
зине и пытаетесь решить, нужна ли она вам? Почему эта книга должна оказаться
на вашей книжной полке? Ответ в заглавии. В ней есть все самое необходимое,
чтобы сделать работу правильно с первого раза, не приобретая вредных привычек,
от которых позднее придется избавляться. Иными словами, в книге вы найдете все
для быстрого достижения результата.
Отвлечемся и посмотрим на какое-нибудь другое умение, которое большинство
людей осваивает в определенный момент жизни, например вождение автомобиля.
Приношу свои извинения, если у вас пока не было такого опыта, но все же просле-
дите за моей мыслью. Большинству людей их первый урок вождения казался по-
зорным: нужно было постоянно помнить, какие педали и в какой последователь-
ности нажимать, следовало проехать, ничего не задев. Казалось, что другие, более
опытные люди просто запрыгивали в машины, нажимали на газ и добирались из
точки А в точку Б, вообще не думая о своих действиях. Эти водители, может, и при-
обрели впоследствии какие-то плохие привычки, но, начав занятия с хорошим
инструктором, скорее всего, сразу изучили все верно, следуя строгим правилам
обеспечения безопасности.
Инструктор по вождению учит постоянно смотреть в зеркала, следить за ско-
ростным режимом и стараться не срезать углы. Однако вообразите, что инструктор
велел вам наплевать на знаки ограничения скорости, вдавить педаль газа в пол
потому, что дорога пустая, или потому, что знаки «не действуют сейчас, в ночное
время». Если вы каким-то чудом получите права, то эти вредные привычки оста-
нутся с вами навсегда (или по крайней мере до тех пор, пока вы ухитритесь сохра-
нять водительское удостоверение).
Изучение принципов создания веб-страниц очень похоже на это.
Я занимаюсь разработкой сайтов уже более десяти лет, но до сих пор помню
свой восторг после создания первого сайта. Если честно, он был довольно непри-
глядным, но на тот момент это было достижение — я опубликовал его, я оказался
способен создать его, используя минимум инструментов. Это дало мне невероят-
ное чувство удовлетворения и вдохновило учиться дальше и делать лучшие
сайты.
В то время было очень мало изданий, из которых я мог бы получить нужные
знания, но я хватал все, что мог найти, извлекал какие-то приемы из книг, черпая
22 Предисловие
идеи с других сайтов. Но затем я обнаружил, что все это было неправильно. Книги
давали мне советы, которые позже оказывались плохими, сайты создавались людь-
ми, изучающими те же книги и, следовательно, использующими подобные плохие
методы. Что же было не так?
В первые годы распространения Интернета, когда люди только начинали осваи-
вать технологии, публикуя свои домашние страницы или создавая сайты-визитки
для своих компаний, все разработчики быстро поняли, что возможности среды
ограничены. Потребность — мать изобретения, поэтому веб-разработчики начали
выдумывать разные трюки и выводить на веб-страницы технологии, совершенно
не предназначенные для этого. Развитие браузеров способствовало этому, добавляя
новые возможности для такой работы.
В то время было написано огромное количество книг на тему веб-дизайна и веб-
программирования. Кроме того, в Интернете предлагалось множество бесплатных
уроков. Многие из них основывались на том, что тогда казалось передовым опытом,
однако авторы были ограничены возможностями браузеров, которые по-разному
отображали одинаково написанные хорошие веб-страницы. Это вынуждало авторов
книг и уроков прибегать к злоупотреблению особенностями браузеров: например,
для верстки страниц использовались таблицы. Конечно, все это помогло многим
разработчикам создать их первую страницу в Интернете, но подобная неправильная
практика, применяемая на ранней стадии изучения, прочно укоренилась, и немало
людей по сей день использует эти неэффективные приемы.
Веб-разработчики во всем мире (включая меня) приобрели эти вредные при-
вычки и сейчас вынуждены отучаться от них. Несмотря на то что уже давно по
явились возможности избежать применения устоявшихся неправильных приемов,
многие люди создают некрасивые, медленно загружающиеся и неудобные в исполь-
зовании страницы, но не хотят менять свои привычки, полагая это слишком труд-
ным. Совсем как ученик плохого инструктора по вождению, который ездит с нару-
шением правил, потому что это долгое время сходило ему с рук.
С тех пор как несколько лет назад у меня на все это открылись глаза, я пытаюсь
переучить столько людей, сколько могу. Но новички по-прежнему учатся по старым
книгам, продвигающим все те же старые и неправильные идеи. Это просто должно
прекратиться, причем здесь и сейчас.
С этой книгой вы не приобретете ни одной плохой привычки.
Моя книга научит вас правильным способам разработки сайтов. Если есть пло-
хой метод решения какой-то задачи — «срезающий углы», чтобы сэкономить время,
но предлагающий неэффективные технологии, — я даже не буду вам о нем расска-
зывать. Даже в виде «впрочем, вы можете попробовать и вот так…». Нет необходи-
мости занимать этим вашу голову — таким образом я забочусь о вас!
Что такое браузер?

Если вы используете операционную систему Microsoft��
��
Windows��
��
(��
Windows ��
7, Vis-
��
ta или XP), то, наверное, знаете, что браузер — это маленькая синяя буква «е» на
Рабочем столе (рис. 0.1), обычно называемая ��
Internet��
Explorer��
��
. Огромное количе-
ство людей заблуждается относительно предназначения этой программы, которое
Что такое браузер? 23
заключается в отображении веб-страниц. Они думают, что Internet Explorer и есть

Интернет.
Рис. 0.1. Internet Explorer — маленькая синяя буква «е» на Рабочем столе
Internet Explorer (или IE, как мы будем его сокращать отныне) — наиболее
распространенный браузер, в основном по той причине, что компания Microsoft
включает его в комплект операционной системы, начиная с Windows 95. Именно
через него огромное количество людей стало пользоваться Интернетом, и многие
до сих предпочитают Internet Explorer.
Однако есть и другие браузеры, которые вы можете использовать вместо Inter- ��
net Explorer. В последнее время набирает популярность Firefox1 — альтернативный
браузер c множеством интересных возможностей, отсутствующих в IE (на время
написания книги). Кроме того, он куда лучше Internet��
��
Explorer��
��
отображает неко-
торые веб-страницы. На момент выхода книги появился и за короткое время стал
очень популярным браузер Chrome компании Google (о которой вы наверняка
слышали). И ��
Firefox��
, и Google��
��
могут использоваться под операционными система-
ми Windows, Mac OS X и Linux, в отличие от Internet Explorer, который работает
только под Windows.
Скриншоты, которые вы увидите в этой книге, были сделаны из Firefox под
Windows 7, если не указано иное. Я очень рекомендую вам скачать и установить
Firefox��
по двум причинам: он является кросс-платформенным и идеально поддер-
живает стандарты. Кроме того, советую вам выполнять в этом браузере упражнения
из книги.
Кроме Firefox или Chrome, можете попробовать и другие браузеры, которые
поддерживают веб-стандарты (о них мы очень скоро поговорим). Для пользовате-
лей Windows браузер Opera2 предлагает идеальную поддержку стандартов и уни-
кальный набор возможностей. Как и Firefox��
��
, Opera��
��
 — бесплатный браузер. Люби-
тели Mac также могут установить Opera или просто пользоваться браузером Apple,
установленным по умолчанию, либо Safari, который тоже отлично поддерживает
веб-стандарты. Набор ярлыков браузеров под Mac показан на рис. 0.2.
Возможно, вы полностью довольны своим нынешним браузером. Если вы поль-
зователь Windows и предпочли бы иметь дело с тем, что вам знакомо, то можете
продолжать работать в ��
Internet��
��
Explorer��
. Так поступает множество людей, поль-
зующихся Интернетом.
1
http://www.mozilla.com/en-US/firefox/new/.
2
http://www.opera.com/download/.
Рис. 0.2. Ярлыки браузеров, отображаемые в Mac dock1
Будьте уверены, что почти все описанное в этой книге будет работать в любых
известных браузерах, по вашему желанию и без каких-либо серьезных проблем.
Я сказал «почти»? Это потому, что до сих пор есть некоторые различия в том,
как в браузерах организована обработка новейших технологий, например CSS3.
Но и это нормально, если вы заранее знаете, где ждать различий. Я расскажу о них
в следующих главах — там не будет неприятных сюрпризов, гарантирую!
Для кого эта книга

Отвечаете ли вы каким-либо из следующих критериев?
Вы абсолютный новичок, по крайней мере в создании веб-страниц.
Вы уверенный пользователь компьютера, но не можете назвать себя продвину-
тым пользователем.
Вы часто выходите в Интернет, наслаждаетесь сайтами, созданными другими
людьми, и хотите создать свой как хобби или для развития сообщества, в кото-
рое входите.
Вы не понимаете жаргон, на котором говорят компьютерщики, когда вы пыта
етесь обсудить техническую проблему.
Ваc немного смущает мысль о получении новых навыков, но вы все еще страст
но хотите учиться (с некоторой долей дружеской поддержки).
Если некоторые из этих описаний вам подходят, несите книгу на кассу. Вы быст-
ро изучите материал и через очень короткое время будете создавать веб-страницы
как профессионал!
Пусть вас не волнует, что ваш 15-летний племянник способен засыпать вас
непонятными терминами, когда вы спрашиваете его о создании сайтов. Я предпо-
лагал, что читатели могут не иметь теоретических знаний, и поэтому постарался
построить изложение так, чтобы провести вас через весь процесс создания сайта
с нуля. К концу чтения книги вы узнаете, как создать сайт, как получить хостинг,
как сделать сайт популярным и поддерживать его в рабочем состоянии. А самое
главное — вам никогда не придется отказываться от того, что вы узнаете в этой
книге. Вы будете с самого начала учиться создавать сайты правильно.
1
На момент перевода последняя версия — Firefox 12.0. http://www.mozilla.org/en-US/
firefox/all.html. — Примеч. пер.
Как вы будете учиться создавать собственный сайт 25
Чему вас научит книга

К тому моменту, когда вы закончите чтение и попробуете выполнить все предла-
гаемые упражнения, вы будете способны создать полноценный сайт — правиль-
ным путем! — без оплаты дорогого программного обеспечения (ПО) или веб-
хостинга.
Описывая пример создания сайта, я проведу вас сквозь весь процесс разработ-
ки веб-страниц с нуля. Все великое начинается с малого! К концу книги вы научи-
тесь создавать сайты, обладающие таким функционалом1, как:
удобная и простая навигация;
профессионально сделанная главная часть;
страница «Свяжитесь с нами»;
таблицы — представление данных в аккуратно оформленных сетках;
красивые веб-формы;
простая галерея изображений;
поисковый движок, охватывающий ваш сайт и родственные сайты;
простая статистика, которую вы сможете использовать, например, чтобы по-
смотреть, кто посещает ваш сайт, как они его нашли и т. п.
Вы также узнаете, как без большого количества рутинной работы или тех-
нических премудростей эффективно организовать свой сайт. Я покажу, как
можно:
установить собственный адрес вида .com, .net, .org;
найти площадку для размещения сайта (хостинг);
загрузить файлы на сайт;
получать отзывы от гостей, избегая получения спама.
Как вы будете учиться создавать

собственный сайт
С этой книгой вы пройдете каждую тему шаг за шагом. Я предлагаю сочетание
примеров и практических упражнений, с помощью которых вы очень скоро почув-
ствуете себя вполне уверенно — по крайней мере, для того, чтобы попробовать
написать какой-нибудь HTML-код для себя.
1
Функционал (feature) — возможность, особенность, имеющаяся функция, сленговое
понятие в IT, которое вряд ли можно коротко и точно перевести на русский язык, поэто-
му на жаргоне специалистов употребляется калька с английского «фича». Известно,
например, выражение «это не баг, а фича!», когда программист или веб-разработчик
пытаются доказать, что хоть и отошли от требований документации к ПО или сайту, но
не ухудшили, а улучшили этим проект. — Примеч. пер.
HTML, CSS, разметка… Азы терминологии!

Отныне вы будете все чаще встречать эти термины. Но что они означают?
HTML — язык разметки гипертекста (��
Hypertext��
Markup��
��
Language��
��
). Это основ-
ной язык, который применяется для создания веб-страниц. К концу чтения книги
вы будете очень хорошо его знать. Мы будем использовать HTML5 — последнюю
версию языка. Есть много принципов написания кода на HTML5, обеспечивающих
его валидность, — от ленивых и небрежных до строгих и упорядоченных. В этой
книге при создании учебного сайта мы будем придерживаться формального син-
таксиса XHTML��
��
и избегать «небрежного» написания кода. Это будет способство-
вать выработке навыка правильного написания кода и разметки, а также развитию
логического мышления, что пригодится вам при дальнейшем обучении. Разница
между HTML и XHTML объясняется на странице SitePoint HTML Reference
(http://reference.sitepoint.com/html/html-vs-xhtml)1.
Разметка. Представьте, что вы редактор газеты. Вам дали текст новости, но
он — от начала до конца — одного размера, а заголовки, абзацы, цитаты и другие
текстовые элементы никак не выделены. Это просто один огромный блок текста.
Для начала можно было бы выделить заголовки (например, полужирным шрифтом
или курсивом, прописными буквами или восклицательными знаками, если вы
пишете для таблоида). Как редактор, вы, наверное, возьмете карандаш и начнете
делать на распечатке заметки: h будет означать заголовок (heading), p — места, где
начинаются и заканчиваются абзацы (paragraph), q — цитаты.
Это и есть то главное, что делает разметка. Иными словами, это набор простых
меток (тегов), которые задают структуру документа: эта секция — заголовок, эта —
отдельный абзац и т. д. Мы подробно рассмотрим разнообразные HTML-теги чуть
позднее.
РАЗМЕТКА — НЕ КОД!
Разметка — не то же самое, что программный код. Часто люди ошибочно считают разметку
обычным кодом, но понятие кода куда более широкое. Используя программный код, вы мо-
жете создавать программы и делать веб-страницу более динамичной, в то время как размет-
ка просто определяет структуру страницы. Так что, если вы хотите удивить своих друзей и род-
ственников, различайте понятия кода и разметки. Видите, я же говорил, что буду учить вас
хорошим привычкам!
CSS — каскадные таблицы стилей (Cascading Style Sheets). При создании сайтов
мы будем использовать CSS и HTML вместе. CSS — язык, который позволяет
контролировать отображение страницы. Чуть позже мы поговорим о нем подробнее.
Пока достаточно, чтобы вы запомнили расшифровку аббревиатуры. Вы также
узнаете, что CSS, как и HTML, эволюционирует со временем. В этой книге мы
1
На русском языке здесь: http://ru.wikipedia.org/wiki/XHTML. Вообще, HTML и XHTML
основаны на языке XML, но XHTML ближе к нему, он более строгий, в нем не «проща-
ются» некоторые неточности, как в HTML. Например, в XHTML недопустимы незакры-
тые теги, что практически решает проблему кросс-браузерности и кросс-платформенно-
сти. — Примеч. пер.
Чего нет в этой книге 27
рассмотрим несколько особенностей новейшей версии CSS3 и объясним, как они

работают в разных браузерах, в то время как большая часть ��
CSS��
-кода будет отно-
ситься к CSS2 (или к CSS2.1 — дополнительному обновлению). Не беспокойтесь,
не нужно запоминать номера версий — в конце книги нет теста!
Веб-стандарты пропагандируют лучшие методы создания сайтов. Термин «веб-
стандарт» может быть использован для описания множества подходов и специфи-
каций, но в этой книге я главным образом буду ссылаться на рекомендации, опуб-
ликованные World Wide Web Consortium (W3C) (Консорциум W3C). По их
собственным словам, «сообщество, где между собой сотрудничают организации,
собственные сотрудники и общественность… приведет веб-разработку к реализации
максимума своего потенциала».
С практической точки зрения следование веб-стандартам означает разработку
сайтов в соответствии с принципами и рекомендациями ��
W��
3��
C��
в области использо-
вания HTML, XHTML, CSS, а также реализацию доступности.
Создание учебного сайта

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

Наверное, заманчиво звучит обещание попытаться впихнуть все в одну книгу
и утверждение, что после прочтения читатель станет мастером на все руки за очень
короткое время, но, увы, правда жизни заключается в том, что не каждому это «все»
необходимо.
Я не намерен даже пытаться вложить в вашу голову абсолютно все, что нужно
знать о создании веб-страниц. Вместо этого мы сосредоточимся на изучении основ,
которыми вы будете пользоваться постоянно, снова и снова.
Эта книга не охватывает:

JavaScript ни в каком виде (я только слегка коснусь некоторых несложных
JavaScript-эффектов с использованием библиотеки jQuery, лишь указывая на-
правление дальнейшего изучения);
серверного программирования и сценарных языков (ASP, PHP, RUBY);
создания Flash-элементов;
технологий оптимизации поискового движка.
К тому времени, как вы прочтете книгу и сможете создать собственный сайт,
вы можете захотеть улучшить свои знания о разработке сайтов. При необходимости
на протяжении всей книги я буду давать рекомендации и предлагать другие ресур-
сы, которые вы могли бы использовать.
Что ж, мы пришли к точке, где знакомство оканчивается и начинается учебный
процесс — будем учиться правильным принципам создания сайтов. Добро пожало-
вать на этот путь, дамы и господа…
Содержание книги
Глава 1. Приготовьте инструменты! В этой главе вы убедитесь, что у вас есть
все инструменты, которые могут понадобиться для создания сайта. Я расскажу,
где вы можете найти нужные средства — совершенно бесплатные! К концу гла-
вы вы будете готовы приступить к работе над своим первым сайтом.
Глава 2. Ваши первые веб-страницы. Здесь вы узнаете, как создаются веб-
страницы. Вы исследуете HTML-код, усвоите базовые требования к каждой
веб-странице и изучите основные элементы, которые можно встретить на боль-
шинстве страниц. Затем вы попробуете создать веб-страницу самостоятельно.
Фактически к концу этой главы у вас будет готова основа вашего первого
сайта.
Глава 3. Добавляем стили. Здесь вы начнете наводить красоту на страницах,
которые создадите в главе 2. Вы узнаете, что такое CSS и чем хороша эта техно-
логия, а затем попробуете ее применить. По мере изучения главы вы увидите,
как преображается учебный сайт благодаря применению фонов и заливок, из-
менению цветов и шрифтов, созданию ссылок, изменяющих свой вид в зависи-
мости от того, открывал ли уже пользователь эти страницы.
Глава 4. Преображение с CSS. В этой главе продолжается изучение возмож-
ностей CSS по изменению цветов и стилей текста. Вы также узнаете, как менять
стили границ и компоновать страницу в целом. Мы рассмотрим все возможные
рамки, которые можно применить к таким элементам, как заголовки и абзацы.
Мы будем экспериментировать с пунктирными и сплошными границами, а так-
же с другими эффектами. Во второй половине главы вы узнаете, как использо-
вать CSS для размещения элементов на веб-странице — включая блоки навига-
ции — в любом месте экрана.
Глава 5. Начинаем рисовать! Используем на сайте изображения. Как понятно
из названия главы, она посвящена рисункам. Мы рассмотрим различия между
Содержание книги 29
встроенными и фоновыми изображениями и поговорим о том, как сделать

рисунки доступными для слепых и слабовидящих пользователей Интернета.
Вы научитесь обрабатывать картинки с помощью программ, которые установи-
те еще в главе 1. Затем вы воспользуетесь всеми приобретенными знаниями
и создадите на сайте фотогалерею.
Глава 6. Таблицы: средства для организации данных. Здесь вы узнаете, когда
таблицы должны использоваться и когда не должны (что, возможно, даже важ-
нее). Кроме того, я покажу, как с помощью CSS можно вдохнуть жизнь в скуч-
ную таблицу, чтобы сделать ее более привлекательной.
Глава 7. Формы: взаимодействие с аудиторией. В главе 7 вы найдете всю ин-
формацию о формах: для чего они используются, что нужно для создания формы
и что можно делать с данными, собранными с помощью формы. Я расскажу вам
про различные элементы формы: текстовые поля, переключатели, флажки
и т. д., а также покажу, как применять CSS, чтобы сделать форму красивой.
В заключение вы узнаете, как пользоваться бесплатными веб-сервисами, чтобы
получать на электронную почту данные, которые были введены в вашу форму.
Глава 8. Размещение сайта в Сети. Хорошо создать сайт просто в качестве
хобби, но нужен способ показать его другим людям — именно этому посвящена
данная глава. Мы рассмотрим план поиска хостинга и обсудим плюсы и мину-
сы использования бесплатных сервисов. Вы узнаете, какие инструменты пона-
добятся вам для переноса файлов с вашего компьютера на веб-сервер, где сайт
станет общедоступным.
Глава 9. Совершенствуем сайт с HTML5 и CSS3. К этому моменту вы уже
попробуете работать с HTML5 и будете неплохо знать основы CSS, но есть
и другие HTML5- и CSS-функции, которые вам точно понравятся. В этой главе
вы добавите некоторые HTML5- и CSS3-функции, улучшающие сайт, а также
узнаете, какие подводные камни могут подстерегать вас при работе с этими
новыми технологиями.
Глава 10. Добавляем интерактивности с помощью библиотеки jQuery. Време-
на статичных сайтов давно минули. Наверняка вы хотите создать динамичный,
интерактивный сайт, который дает пользователям ощущение сопричастности,
не говоря уже о некоторых действительно впечатляющих эффектах. Как до-
бавить эти важные элементы «поведения» сайта? Здесь может помочь jQuery —
бесплатная библиотека JavaScript, предоставляющая разнообразные возмож-
ности.
Глава 11. Что делать, если что-то идет не так. В предыдущих главах вы прошли
через все этапы, необходимые для создания сайта. Однако, начав создавать
собственный сайт, вы наверняка столкнетесь с некоторыми проблемами. В этой
главе мы рассмотрим инструменты, которые можно использовать в браузере,
чтобы диагностировать проблему, выявить ее источник и затем решить ее.
Глава 12. Страничку на прокачку! Инструменты, которые вы можете добавить
бесплатно. Вы слышали про шоу на MTV под названием «Тачка на прокачку»
(Pimp My Ride)? Нет? Каждую неделю ребята берут обычный автомобиль и пре-
ображают его — несколькими продуманными и безопасными, сугубо внешними
трансформациями — в настоящее чудо на колесах. Такова и цель этой главы

в отношении вашего сайта! Вы увидите, что существует множество разных ин-
струментов, плагинов, надстроек, которые можно добавить на сайт, чтобы
сделать его лучше и полезнее для вас и ваших гостей. Среди них будут поисковые
функции, статистические программы и инструменты для онлайн-дискуссий —
форумы.
Глава 13. А что теперь? Что вы можете изучать дальше. В последней главе мы
подытожим знания, усвоенные вами при чтении, а затем рассмотрим возмож-
ности для их расширения. Я порекомендую вам сайты, которые будут уже ка-
чественно иными — в хорошем смысле слова, и книги, которые обязательно
должны быть на вашей полке — или на вашем компьютере! Я хочу быть уверен-
ным, что вы продолжите идти правильным путем и после того, как закроете эту
книгу.
Где получить помощь

SitePoint — бурно развивающееся сообщество веб-дизайнеров и разработчиков,
готовых помочь вам, если вы столкнулись с проблемой. Здесь мы также составля-
ем список опечаток, о которых стало известно после выхода книги и с которыми
вы можете ознакомиться.
Форумы SitePoint
Форумы SitePoint1 — это онлайн-дискуссии, где можно задать вопросы обо всем
связанном с веб-разработкой. Вы можете, конечно, и сами отвечать на вопросы
других. Так и работают форумы — одни люди спрашивают, другие отвечают, боль-
шинство делают и то и другое. Желание людей делиться знаниями делает сообще-
ство более сплоченным. Многие опытные веб-дизайнеры «зависают» здесь. Это
хороший способ изучить новую функцию, быстро найти ответы на вопросы да
и в общем получить удовольствие.
Сайт книги
Сайт размещается по адресу http://www.sitepoint.com/books/html3. Там доступно сле-
дующее.
Архив кода. В процессе обучения по книге вы постоянно будете встречать
ссылки на архив кода. Это простой ZIP-архив, который можно скачать. Там есть
каждая строка кода, приведенного в книге. Если вы хотите смошенничать (или
уберечься от лучезапястного синдрома), то идите по ссылкам и скачивайте ар-
хив2. Он также включает копию сайта Bubble Under, который мы будем исполь-
зовать в качестве примера на протяжении всей книги.
1
http://www.sitepoint.com/forums/.
2
http://www.sitepoint.com/books/html3/code.php.
Благодарности 31
Обновления и опечатки. Ни одна книга не идеальна, и я подозреваю, что наблю-

дательные читатели выявили по крайней мере одну или две ошибки уже до
этого места. Страница «Опечатки» (Errata page)1 на сайте книги всегда содержит
последнюю информацию о типографских ошибках и ошибках в коде и обновля-
ется по мере необходимости в соответствии с новыми версиями браузеров и веб-
стандартов.
В дополнение к официальной странице, размещенной на SitePoint, я добавил
кое-что полезное на сайт http://beginningwebdesign.com. Здесь вы можете найти ссыл-
ки на учетные записи книги в Twitter и Facebook, а также многое другое.
Рассылка издательства SitePoint

В дополнение к книгам наподобие этой SitePoint публикует бесплатную рассылку
по электронной почте, например SitePoint Tech Times, SitePoint Tribune, SitePoint
Deign View. В них можно прочитать о последних новостях, релизах продуктов,
трендах и технологиях во всех областях веб-разработки. Загружайте архивы рас-
сылки или подписывайтесь на любую из них на нашем сайте2.
Подкаст SitePoint
Приглашаю вас присоединиться к команде SitePoint ��
Podcast��
для получения ново-
стей, интервью, мнений и свежих мыслей для веб-разработчиков и дизайнеров.
Мы обсуждаем самые последние новости веб-индустрии, представляем гостей, бе-
рем интервью у лучших специалистов в нашей области. Вы можете найти все под-
касты на сайте или подписаться через iTunes.
Обратная связь
Если не получилось найти ответ на форумах или вы просто хотите связаться с SitePoint
по какой-то другой причине, лучше всего написать по адресу books@sitepoint.com.
Наша система поддержки по электронной почте ответит на ваш вопрос или перешлет
его прямо нам. Предложения по улучшению и указания на любые ошибки, которые
вы найдете, особенно приветствуются. Кроме того, вы можете связаться со мной через
Facebook (но предупреждаю: я бываю там не слишком часто).
Благодарности
Несмотря на то что написание книги кажется сольным проектом, ее выход из печа-
ти стал возможен благодаря большому количеству людей. Ничего этого не было
бы, если бы однажды я не обнаружил сайт http://webmonkey.com — представленные
1
http://www.sitepoint.com/books/html3/errata.php.
2
http://www.sitepoint.com/newsletter/.
там обучающие материалы по CSS помогли мне прозреть, а также если бы не Джеф-
фри Зельдман (Jeffrey Zeldman), Молли Хольцшлаг (Molly Holzschlag) и Эрик
Мейер (Eric Meyer), чья новаторская работа очень помогла мне и многим другим.
Однако, если бы я взялся перечислять всех, кто вдохновлял меня последние не-
сколько лет, этот раздел был бы напечатан очень-очень мелким шрифтом. Ребята,
вы знаете, кто вы, продолжайте свое классное дело!
Я хотел бы отметить работу, проделанную Web Standarts Project1 (в которой
я тоже принимал участие), особенно команды InterAct на Web Standarts Curriculum.
Я хочу также передать привет моим коллегам из Britpackers — носите те штаны
Union Jack с гордостью, ребята!
Спасибо всем участникам SitePoint, которые помогали мне с выпусками каж-
дого из изданий этой книги все эти годы: это Саймон Мэки (Simon Mackie), Марк
Гарретт (Marc Garrett), Мэтью Мэгейн (Matthew Magain), Эндрю Тетлоу (Andrew
Tetlaw), Джорджина Лэдлоу (Georgina Laidlaw), Джулиан Кэрролл (Julian Carroll),
Келли Стил (Kelly Steele), Алекс Уокер (Alex Walker), Лиза Лэнг (Lisa Lang) и Том
Мьюсез (Tom Museth).
Наконец, спасибо Манде за понимание во время дедлайнов, когда я практически
выпадал из цивилизации, чтобы сдать главы вовремя. Социальное общение? Ах да,
кажется, припоминаю… В то время казалось, что это никогда не закончится, но в фи-
нале мы оба увидели плоды моего труда.
Обозначения, использованные в книге

Вы заметите, что мы использовали в тексте определенные типографские и стилевые
приемы, чтобы выделить разные типы информации. Посмотрите на следующие
примеры.
Обозначения разметки
Любая разметка — ��
HTML��
или ��
CSS��
 — будет показываться с использованием моно-
ширинного шрифта, как здесь:
webpage.html (фрагмент)
<h1>Прекрасный летний день</h1>
<p>Это был прекрасный день для прогулки в парке. Пели птицы,
а все дети еще были в школе.</p>
Если код может быть найден в архиве кода для книги, то название файла будет
отображаться вверху листинга, как здесь:
example.css
.footer {
background-color: #CCC;
border-top: 1px solid #333;
}
1
http://interact.webstandards.org/.
Обозначения, использованные в книге 33
Если показана только часть файла, это будет помечено словом «фрагмент»:
example.css (фрагмент)
Если в показанный ранее пример нужно внести какие-то дополнения, то новый
код будет выделен полужирным шрифтом:
.footer {
background-color: #CCC;
padding: 5px;
}
Если приведенный ранее код необходим по контексту, то вместо повторения
всего примера мы заменим второстепенную часть вертикальным многоточием:
.footer {

margin: 5px;
}
Иногда нам нужно будет разделить код, который должен записываться в одну
строку, на несколько из-за ограничения размера страницы книги. Знак будет
означать разрыв строки, который необходим лишь из-за форматирования и должен
быть проигнорирован:
URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she
ets-come-of-age/");
Советы, примечания и предупреждения
ЭЙ, ВЫ!
Советы, приведенные в таких врезках, послужат для вас полезными ориентирами в опреде-
ленных ситуациях.
ХМ, ПРОСТИТЕ…
Эти примечания приводятся отдельно и не имеют критического значения для рассматрива
емого материала. Их можно считать дополнительной информацией.
УБЕДИТЕСЬ, ЧТО ВЫ ВСЕГДА…

… обращаете внимание на важные моменты.
БЕРЕГИТЕСЬ!
Такими предупреждениями будут выделяться любые критически важные моменты, с которы-
ми вы можете столкнуться в работе.
От издательства
Ваши замечания, предложения и вопросы отправляйте по адресу электронной поч-
ты vinitski@minsk.piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На сайте издательства http://www.piter.com вы найдете подробную информацию
о наших книгах.
1 Приготовьте
инструменты!
Перед тем как создавать свой первый сайт, вы должны настроить компьютер, под-
готовить для работы, которую предстоит выполнить. Нужно убедиться, что у вас
установлены все инструменты и вы готовы приступать.
Если вы пролистаете несколько компьютерных книг в ближайшем книжном
магазине, то наверняка решите, что программы, нужные для создания сайта, слиш-
ком дороги. На самом деле большинство необходимых инструментов уже установ-
лено на ваш компьютер. Вы не замечали их, потому что не пытались искать. Одна-
ко, если даже их у вас нет, найдется по меньшей мере одна бесплатная программа,
которая поможет решить каждую конкретную задачу.
Я полагаю, что на вашем компьютере настроено подключение к Интернету.
Ничего страшного, если у вас медленное соединение: это не повлияет ни на какие
задания, которые мы будем выполнять по ходу чтения книги. Это всего лишь будет
значить, что некоторые из предлагаемых загрузок в Интернет или из Интернета
займут больше времени.
ПЛАННИНГ, ШМАННИНГ…
В этом месте было бы интересно подумать о ваших мотивах к созданию сайта. У вас есть план
проекта? Каких целей вы хотите достигнуть с помощью сайта?
Вы наверняка уже прикинули, сколько времени понадобится для создания сайта, но пока
отложим основы планирования проектов. Это очень важная тема, но, вероятно, если вы
взяли в руки книгу под названием «Создай свой веб-сайт с помощью HTML и CSS», то снача-
ла хотите как следует разобраться с технической частью.
Поскольку это ваш первый сайт, пусть он будет совсем простым, чтобы не пришлось ломать
голову над некоторыми особенностями планирования. Позже, когда вы усвоите все основы
создания сайтов, вы будете готовы распланировать большой, технически продвинутый сайт.
Когда придет время, правильное планирование станет важнейшей частью работы. Но сейчас
просто приготовимся к созданию первого простого сайта.
1.1. Основные инструменты,

которые вам нужны
Как я уже упоминал, большинство инструментов для создания сайта уже есть на
вашем компьютере. Что же вам понадобится?
36 Глава 1. Приготовьте инструменты!
Первое и самое основное — текстовый редактор — программа, которая позво-

ляет создавать и редактировать простые текстовые файлы. Вы будете исполь-
зовать его для написания веб-страниц.
Написав разметку веб-страницы, нужно будет узнать, как она выглядит. Для это-
го придется открыть страницу в браузере — приложении, которое использует-
ся для просмотра сайтов.
И наконец, став счастливым автором новой веб-страницы, вы можете выложить
ее в Интернет с помощью FTP-клиента. Это утилита, которая поможет вам
передавать файлы по Сети, используя FTP-протокол. Работа с FTP поначалу
может показаться сложной, но, к счастью, вам не придется использовать его
слишком часто. Мы подробно рассмотрим FTP-клиенты в главе 8.
Осталось найти эти программы на вашем компьютере.
Базовые инструменты Windows

В следующем разделе (и на протяжении всей книги), ссылаясь на операционную
систему Windows, я буду иметь в виду Windows 7. Любые инструкции или скрин-
шоты будут сделаны для Windows 7. Однако я позаботился и о тех, кто использует
более старые версии Windows. На самом деле много людей работает в ХР или Vista,
поэтому, если инструкции для Windows 7 отличаются от инструкций для ранних
версий, я отмечу это.
Ваш текстовый редактор: Блокнот

Сначала рассмотрим текстовый редактор. По умолчанию в Windows встроен самый
простой текстовый редактор, который называется Блокнот. Многие профессиональ-
ные веб-дизайнеры, работающие со сложным программным обеспечением, когда-то
начинали с Блокнота; более того, многие профессионалы, пользующиеся дорогими
программами, время от времени обращаются к Блокноту, просто чтобы сэкономить
время. Почему? Да потому, что это просто и сбои в работе маловероятны. Кроме
того, Блокнот работает куда быстрее, чем многофункциональные программы для
веб-дизайна. Никаких прибамбасов в нем, конечно, нет1.
Вы можете найти Блокнот в меню ПускВсе программыСтандартные.
ЯРЛЫК ДЛЯ БЛОКНОТА

Чтобы обеспечить быстрый доступ к Блокноту, создайте его ярлык на Рабочем столе. Открыв
меню ПускВсе программыСтандартные, наведите указатель мыши на значок Блокнота,
нажмите клавишу Ctrl, а затем кнопку мыши. Не отпуская клавишу и кнопку мыши, перенеси-
те значок Блокнота на Рабочий стол. Когда вы отпустите кнопку мыши, ярлык приложения
появится на вашем Рабочем столе (рис. 1.1). Такой прием работает для любого приложения
в Windows.
Блокнот — одно из самых простых приложений, которое не содержит ничего

лишнего (рис. 1.2).
1
На жаргоне айтишников (а по-английски — bells and whistles) так называются разные наво-
роты в программах, носящие декоративно-развлекательный характер. — Примеч. пер.
1.1. Основные инструменты, которые вам нужны 37
Рис. 1.1. Ярлык Блокнота Рис. 1.2. Блокнот: возможно, простейшая

пользовательская программа в мире
Ваш браузер: Internet Explorer

Как только вы создадите в Блокноте веб-страницу, вам захочется посмотреть, что
получилось. Как вы помните, в предисловии я предлагал для просмотра веб-стра-
ниц использовать Internet Explorer. Вот и наш способ. Как показано на рис. 1.3,
Internet Explorer находится в папке Программы (доступен также через ПускВсе
Рис. 1.3. Internet Explorer: лучший браузер от Microsoft

программы, около логотипа Windows). Скорее всего, ярлык для него на Рабочем
столе уже есть.
Базовые инструменты в Mac OS X

Как и Windows, операционная система Mac OS (в частности, Mac OS X — мы не
будем обращаться к предыдущим версиям Mac) имеет несколько инструментов,
которые вы можете использовать прямо сейчас. Они практически аналогичны про-
граммам Windows, упомянутым выше.
Ваш текстовый редактор: TextEdit

Аналогично Блокноту в W��
��
indows в Mac��
��
есть TextEdit, который можно найти в пап-
ке Applications (Приложения), как показано на рис. 1.4.
Рис. 1.4. TextEdit по умолчанию входит в комплект Mac OS
В отличие от Блокнота, TextEdit работает как полноценный текстовый редактор,

то есть позволяет менять шрифты, делать текст полужирным или курсивным
и т. д. Однако вам нужно использовать TextEdit как простой текстовый редактор,
поэтому придется отключить некоторые функции. Запустите TextEdit и выберите
меню TextEdit Preferences (TextEditНастройки), дождитесь открытия окна
Preferences (Настройки). В меню New Document Attributes (Атрибуты нового доку-
мента) выберите Plain Text (Обычный текст), затем закройте окно Preferences (На-
стройки). В следующий раз, когда вы создадите в TextEdit новый файл, это будет
простой текстовый документ.
1.2. Дополнительные инструменты 39
Ваш браузер: Safari

По умолчанию браузером для пользователей Mac��
��
является Safari. Вы можете най-
ти его на панели приложений Dock (в наборе значков внизу экрана) или загрузить
из папки Applications (Приложения), как показано на рис. 1.5.
ВЫВЕДИТЕ ЭТО НА ПАНЕЛЬ ПРИЛОЖЕНИЙ

В Windows вы могли перетянуть ярлыки программ на Рабочий стол, можете так же добавлять
программы в ��
Dock��
Mac OS X. Для этого просто перетащите ярлык из папки Applications (При-
ложения) на Dock. Приложение легко запустить, как только оно вам понадобится.
Рис. 1.5. Safari доступен через папку Mac Applications (Приложения)
Если вы работаете с какой-либо ранней версией Mac, то также можете иметь

копию Internet Explorer. Хотите совет, как использовать Internet Explorer в Mac?
Отправьте его в корзину! Версия Internet Explorer для Mac была разработана
Microsoft много лет назад, давно устарела, редко обновляется и мало кем исполь-
зуется в мире. Новые версии Mac не содержат этого приложения, да и сходства
с аналогом в Windows у него очень мало, что важно для тех, кто привык работать
с Internet Explorer.
1.2. Дополнительные инструменты

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

двинутые приложения мы рассмотрим в этой книге чуть позже.
Некоторые текстовые редакторы и браузеры можно скачать, многие из них
бесплатны. Я подробно опишу те приложения, которые пригодились мне в прош
лом, так что вы тоже можете скачать их и с удовольствием использовать. И пом-
ните: все они бесплатны!
Инструменты Windows
NoteTab
Окно этой программы содержит множество вкладок, что позволяет работать с боль-
шим количеством разных файлов одновременно, не открывая несколько окон
(рис. 1.6). Файлы, которые вы открыли, сохраняются, даже если вы закрыли про-
грамму и открыли ее снова позднее. Это очень удобно, если вы работаете с набором
файлов в течение многих дней.
Программу NoteTab (в том числе ее версию Light) можно скачать на сайте
http://www.notetab.com.
Рис. 1.6. Окно NoteTab Light
Firefox
Firefox — популярная альтернатива браузеру Internet Explorer, и, как вы убеди-
тесь по ходу чтения книги, по многим причинам лучше пользоваться именно им.
1.2. Дополнительные инструменты 41
Как и NoteTab, Firefox имеет вкладочный интерфейс, который позволяет рабо-

тать, не открывая много окон (рис. 1.7). Вы можете скачать Firefox по адресу
http://www.mozilla.com/firefox.
Рис. 1.7. Firefox: программа, которой полезно обзавестись
Инструменты Mac OS
Действительно, бесплатных программ для операционных систем Mac меньше, чем
для Windows. Однако, кроме базовых, есть несколько программ, которые вы може-
те рассмотреть.
TextWrangler
TextWrangler — это бесплатный и простой текстовый редактор, разработанный
BareBones Software. Как и NoteTab для Windows, TextWrangler помогает оптими-
зировать рабочее пространство, позволяя открывать несколько текстовых фай-
лов одновременно (документы отображаются списком справа от окна программы
(рис. 1.8), реже на вкладках). Вы можете загрузить TextWrangler с сайта BareBones
Software1 или из магазина Mac App Store.
1
http://www.barebones.com/products/textwrangler/.
Рис. 1.8. TextWrangler — бесплатный текстовый редактор от BareBones Software
Firefox
Firefox популярен и среди пользователей Mac, многие из которых предпочитают
его браузеру Safari (чаще всего благодаря возможности установки дополнительных
функций, называемых расширениями — add-on, которые могут быть загружены
в браузер). Веб-страница, отображаемая в Firefox, должна выглядеть одинаково
в любой операционной системе: Windows, Mac��
��
или Linux��
��
(это бесплатная опера-
ционная система с открытым кодом, чаще всего предпочитаемая людьми с техни-
ческим складом ума, которые любят повозиться со своими компьютерами). Самое
главное достоинство Firefox — предсказуемость. Это еще одна очень важная при-
чина, по которой мы будем использовать в основном Firefox в примерах книги.
1.3. Не только текст

Вы можете построить хороший сайт, используя инструменты, описанные выше, но
он не станет самым крутым сайтом в Интернете, пока на нем не будет изображений.
Все программы, которые мы рассматривали до этого, предназначены для работы
с простым текстом или для просмотра веб-страниц. Если вы хотите получить при-
влекательный внешне сайт, то придется создавать или редактировать изображения.
Это могут быть фотографии, сделанные вами, или рисунки, которые вы имеете
право использовать на своем сайте.
К сожалению, когда дело доходит до редактирования изображений, приходится
платить за инструменты. Профессиональные программы для редактирования изо-
бражений, например Photoshop или Fireworks, которые вы можете установить на
свой компьютер, стоят сотни долларов. И хотя они предлагают очень широкие
возможности, я рекомендовал бы вам покупать их, только если вы твердо уверены,
что без них не обойтись. Если у вас уже есть копия одной из них или другой подоб-
ной программы для обработки изображений, конечно же, используйте их, экспе-
риментируйте с ними. Программы наподобие PaintShop Photo Pro X3 от Photoshop
Elements (урезанная версия Photoshop) имеют более разумную цену. Однако в рам-
1.3. Не только текст 43
ках книги мы рассмотрим только бесплатные программы, которые могут дать вам
представление о возможностях обработки изображений.
Отслеживайте, какие бесплатные редакторы обработки изображений предлага-
ются в Сети, в компьютерных или дизайнерских журналах. Владельцы компаний
обычно раздают таким образом старые версии своего ПО в надежде, что пользова-
тели в дальнейшем захотят обновить версию. Поищите PaintShop Photo Pro X3
(с таким громким именем потеряться нелегко!) или другие редакторы изображений,
которые поддерживают слои (��
layers��
) — технологию создания картинки путем на-
кладывания нескольких изображений одно на другое. На протяжении книги мы
будем выполнять простую обработку изображений, но на самом деле очень важно
все время отслеживать бесплатные (и полнофункциональные!) программы для
работы с иллюстрациями, так как подобные предложения обычно существуют
недолго.
БЕРЕМ НА БОРТ КРУТЫХ ПАРНЕЙ

Наиболее популярные программные пакеты обработки изображений доступны для тестового
использования (загрузки). Они довольно много весят (сотни мегабайт), поэтому лучше все-
го поставить их на закачку на ночь, даже при широкополосном соединении.
Тестовые версии обычно доступны для использования в течение 30 дней; по истечении этого
срока вы должны будете решить, нужно ли вам покупать полноценное ПО или прекратить
работать с программой. Эти 30 дней, однако, дадут вам достаточно времени, чтобы успеть
проработать материал книги.
yy Adobe Photoshop. Тестовая версия последнего пакета доступна для загрузки1. Если вы
выбрали более легкий вариант Photoshop Elements, то тестовая версия будет работать под
Windows2 и Mac3.
yy Adobe Fireworks. Тестовую версию программы можно найти на сайте Adobe4.
yy PaintShop Photo Pro X3. PaintShop Photo Pro X3 работает только под Windows. Чтобы
загрузить тестовую версию, посетите сайт Corel5 и щелкните на ссылке Free Trials на нави-
гационной панели.
Инструменты Windows
Стандартный пакет установки ��
Windows��
не всегда содержал программы для редак-
тирования изображений. Так продолжалось до выхода Windows XP, хотя если вы
покупали компьютер вместе со сканером и цифровой камерой, то у вас могла заод-
но появиться и программа для обработки получившихся изображений (зайдите
в меню ПускВсе программы, чтобы узнать, какие приложения есть у вас).
Приложение Фотогалерея в Windows ��
Vista��
значительно расширило свой функ-
ционал по сравнению с предшественником в XP: были добавлены несколько
простых, но полезных инструментов обработки изображений, включая обрезку,
1
http://www.adobe.com/products/photoshop/.
2
http://www.adobe.com/products/photoshopelwin/.
3
http://www.adobe.com/products/photoshopelmac/.
4
http://www.adobe.com/products/fireworks/.
5
http://www.corel.com/servlet/Satellite/au/en/Content/1150905725000.
работу с цветом и контрастностью. Приложение Фотогалерея можно найти через

меню Пуск.
В Windows 7, однако, эти настройки изображения снова отсутствуют, по край-
ней мере в комплектации по умолчанию. Вы можете открыть изображение из
Средства для просмотра фотографий в Windows в Paint, где есть весьма скудный набор
инструментов для работы с рисунками — обрезка, вращение (рис. 1.9). Кроме того,
вы можете установить бесплатную Windows-программу Фотоальбом1.
Рис. 1.9. Фотогалерея позволяет вам открыть изображение в Paint
1
http://explore.live.com/windows-live-photo-gallery?os=mac.
1.3. Не только текст 45
Picasa. Работаете ли вы в Windows 7, Vista или XP, возможности, предлагаемые

встроенными в них программами, могут показаться весьма ограниченными. Если
так, воспользуйтесь бесплатными приложениями, предлагаемыми Google. Суще-
ствует программа под названием Picasa (ее могут использовать и любители Mac),
которая поможет вам решить множество задач по обработке изображений во время
создания сайта. Загрузите копию Picasa c сайта программы, и вскоре вы сможете
обрезать изображения, вращать их, добавлять специальные эффекты и даже сор-
тировать по папкам снимки, расположенные на вашем компьютере (рис. 1.10).
Рис. 1.10. Picasa: полнофункциональное приложение Google для обработки изображений
Инструменты Mac OS X
Считается, что Mac предпочитают творческие личности, например дизайнеры,
и эта платформа предлагает много инструментов для начинающего художника.
Однако их цена, как правило, превышает стоимость аналогичных средств Windows.
Впрочем, посмотрим, какие бесплатные средства мы можем использовать в Mac,
учитывая, что нам нужна более долговечная программа, чем 30-дневная лицензия
PhotoShop или Fireworks.
Preview
Preview — программа, установленная на любом современном компьютере Mac. Она
выполняет большинство простых задач обработки изображений, таких как обрезка
и повороты (рис. 1.11), хотя, скорее всего, вам она знакома как «приложение, ко-
торое открывает PDF». В главе 5 мы подробно рассмотрим, как с ней работать.
Рис. 1.11. Preview справляется с базовыми задачами редактирования изображений
iPhoto
Эта прекрасная программа также включена в Mac OS X��
��
и не нуждается в представ-
лении для опытных пользователей Mac. Ее нельзя назвать полноценным редактором
обработки изображений — она создана для просмотра и сортировки большого коли-
чества изображений, находящихся на компьютере. С ее помощью очень удобно соз-
давать фотоальбомы, но, в принципе, iPhoto имеет и определенные возможности ре-
дактирования, что отличает ее от средств, обеспечивающих лишь каталогизацию.
Изображения можно поворачивать на произвольный угол (с помощью инстру-
мента Straighten в режиме редактирования), доступно несколько инструментов для
работы с цветом (рис. 1.12). iPhoto можно найти в папке Applications (Приложения)
или на панели приложений.
Рис. 1.12. Использование средств обработки изображений в iPhoto

1.4. Online-редакторы 47
1.4. Online-редакторы
Я рассказал о программах для обработки изображений, которые вы можете скачать
и установить на свой компьютер, но есть и другой путь. Вы поразитесь, какой широ-
кий набор инструментов предоставляют средства редактирования в режиме онлайн1.
Редактор Adobe’s Photoshop Express доступен в навигационном меню в раскрыва
ющемся списке Online Tools (рис. 1.13). Как только вы загрузите изображение, которое
хотите редактировать, вы обнаружите большое разнообразие настроек. Можно
убрать красные глаза, сгладить дефекты, увеличить или уменьшить резкость частей
изображения — и все это доступно в режиме онлайн (рис. 1.14). Затем, если вы удов-
летворены результатом, можете снова сохранить файл на свой компьютер.
Рис. 1.13. Открытие Photoshop Express Editor
Рис. 1.14. Использование Photoshop Express для обрезки изображения
1
http://www.photoshop.com/tools?wf=editor.
1.5. Создайте место

для своего сайта
Итак, мы рассмотрели большинство инструментов, которые понадобятся для соз-
дания сайта. Вы ознакомились с доступными программами и узнали, где их можно
найти на компьютере. Если этих программ недостаточно, то теперь вы знаете, какие
еще приложения доступны для скачивания и использования. Наша следующая
задача — выделить пространство под сайт на жестком диске.
Windows
Лучшее место для хранения файлов вашего сайта — выделенный каталог, кото-
рый можно найти в библиотеке Документы (или Мои документы). Ее легко обнару-
жить, щелкнув на ярлыке Проводника Windows на Панели задач (ярлык представ-
ляет собой желтую папку с вкладками). В Windows Vista папку Документы можно
найти по адресу C:\Users\имя_пользователя, а в XP — в C:\Documents and Settings\
имя_пользователя.
Сейчас создайте новую папку под названием Web, выбрав меню ФайлСоз-
датьПапку (рис. 1.15).
Рис. 1.15. Библиотека Документы в Windows 7, содержащая новую папку Web

1.5. Создайте место для своего сайта 49
ОТОБРАЖЕНИЕ ПАПКИ USER

ИЛИ МОИ ДОКУМЕНТЫ
Не можете найти вашу папку в Windows 7 или Wista? Потеряли папку Мои документы в XP?
Вы могли удалить значок случайно, или, скорее всего, он никогда и не был создан. Рассмот-
рим, как вернуть ярлык папки на ваш Рабочий стол.
1. Выберите Панель управления в меню Пуск.
2. Выберите пункт Персонализация (или Оформление и темы в XP).
3. Для пользователей Windows 7 и Vista: выберите Персонализация, а затем в списке в левом
верхнем углу — Параметры значков рабочего стола. Откроется новое диалоговое окно.
Установите флажок Файлы пользователя в области Значки рабочего стола и нажмите
кнопку ОК. Закройте окно Персонализация. Вы также можете получить доступ к этим на-
стройкам через контекстное меню, как показано на рис. 1.16.
4. Для пользователей XP: выберите задание Изменить фоновый рисунок рабочего стола и в но-
вом окне Свойства: Экран нажмите кнопку Настройка рабочего стола. В открывшемся диа-
логовом окне установите флажок Мои документы и нажмите кнопку ОК. В окне Свойства:
Экран нажмите кнопку Применить, а затем ОК. Закройте окно Оформление и темы.
5. Теперь ваша пользовательская папка окажется на Рабочем столе.
Рис. 1.16. Доступ к персональным настройкам Windows 7 можно получить

через контекстное меню, открываемое щелчком правой кнопкой мыши
на Рабочем столе
Mac OS X
В Mac OS X уже есть специальное место для хранения ваших файлов: папка Sites
(рис. 1.17). Откройте свой каталог Home (Личное) (из Finder выберите GoHome
(ПерейтиЛичное)).
Очень легко добавить папку Sites (Сайты) на боковую панель (рис. 1.18) для
быстрого доступа: просто перетащите туда папку, как вы добавляете элементы на
панель приложений.
Рис. 1.17. Отображение папки Sites (Сайты) в Mac OS X
Рис. 1.18. Папка Sites (Сайты) сейчас размещается на боковой панели

1.6. Резюме 51
1.6. Резюме
Хотите верьте, хотите нет, но теперь у вас есть все, что нужно для создания сай-
та, — и��
 ��
совершенно бесплатно! Так произошло не только потому, что вы восполь-
зовались самыми простыми инструментами — текстовым редактором (Блокнот или
TextEdit) и браузером (Internet Explorer либо Safari). Ведь вы уже знаете, где взять
более сложные программы.
Мы рассмотрели также несколько простых и бесплатных программ обработки
изображений, которые могут помочь украсить ваши сайты: Picasa для Windows,
а также Preview и iPhoto в Mac. Упомянули и некоторые более богатые возможно-
стями (и более дорогие) программы, такие как Photoshop или PaintShop Pro X3.
А сейчас, когда у вас есть инструменты, пора начать их использовать!
2 Ваши первые
веб-страницы
Мудрый Лао-Цзы когда-то сказал, что путь в тысячу миль начинается с одного
шага 1. В этой главе вы (метафорически) сделаете первый шаг на своем пути
к просвещению в области веб-разработки и создадите первую веб-страницу.
К концу главы вы сможете ее продублировать, начав создавать многостраничный
сайт.
2.1. Приятно познакомиться, HTML!

Мы уже немного говорили о том, что представляет собой HTML. В этой главе мы
рассмотрим основы HTML, периодически устраивая самопроверку в браузере,
и постепенно изучим разнообразные HTML-элементы — основные «кирпичики»
HTML. Элементы «говорят» браузеру, что представляет собой каждый объект на
странице: абзац, заголовок, цитату и т. д. Как вы вскоре увидите, эти элементы
содержат всю информацию, которая требуется браузеру.
Анатомия веб-страницы
В предисловии я рассказывал, что изучение HTML��
��
похоже на урок вождения. Про-
должая аналогию, вообразите, что веб-страница — это машина, на которой вы бу-
дете учиться ездить. Некоторые функции очень важны для вождения, в отличие от
других, более декоративных дополнений.
Чтобы ехать на машине, нужны колеса (включая рулевое колесо) и кресло во-
дителя. Для движения автомобиля необходим двигатель, а также кузов (элегантный,
хоть это и несущественно), в котором все это находится. Кроме того, нужна под-
веска, которая крепится к кузову. Удалите что-то одно — и у вас останется лишь
набор красивых, но бесполезных запасных частей.
Как и машина, ваша веб-страница тоже нуждается в чем-то вроде подвески:
нужна базовая структура, к ней будет достраиваться все остальное. Но что может
быть этой гипотетической подвеской? Лучший способ узнать это — засучить рука-
ва и посмотреть, что происходит за кулисами.
1
http://www.quotationspage.com/quote/24004.html.
2.1. Приятно познакомиться, HTML! 53
Посмотрим на исходный код

При изучении создания сайтов очень важна возможность посмотреть исходный код
страниц, разработанных другими людьми. Вы можете научиться многому, просто рас-
сматривая, как была построена чья-то классная веб-страница… Но как это сделать?
Для просмотра исходного кода веб-страницы в HTML выполните следующее.
1. Загрузите какую-нибудь страницу, например главную страницу Web Standard
Project (WaSP)1. Это группа, которая пропагандирует правильные принципы
веб-дизайна и объясняет их преимущество, так что вы можете быть уверены,
что с их собственным сайтом все в порядке.
2. Наведите указатель мыши на страницу (не на изображение!) и щелкните правой
кнопкой (или нажмите Ctrl и щелкните кнопкой мыши, если вы в Mac��
��
). Откро-
ется контекстное меню.
3. Выберите команду Просмотр HTML-кода (IE) или Исходный код страницы (Firefox)
(рис. 2.1) и просмотрите в открывшемся окне разметку страницы2.
Рис. 2.1. Выбор команды для просмотра исходного кода в Internet Explorer и Firefox
1
http://webstandards.org/.
2
Позволю себе рекомендовать проделать подобную операцию в Google Chrome, который
успел набрать популярность ко времени перевода книги на русский язык: код отобра-
зится структурированным в виде списка, раскрывающегося на каждом уровне. Кроме
того, щелкнув правой кнопкой мыши на отдельном элементе, можно выбрать команду
Просмотр кода элемента и сразу увидеть строку, относящуюся к нему, а не искать ее по
всему коду. — Примеч. пер.
54 Глава 2. Ваши первые веб-страницы
На этом этапе мы не будем отвлекаться на анализ разметки, но начинающему

разработчику полезно знать, как она осуществляется.
ВЫБИРАЙТЕ, КОМУ ДОВЕРЯТЬ!

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

Как я уже говорил, есть обязательные элементы, которые должны присутствовать
на любой веб-странице. Их можно увидеть в разметке, появляющейся при откры-
тии исходного кода:
doctype — тип документа;
тег <html>;
тег <head>;
тег <title>;
тег <body>.
Эти элементы создают основной «скелет» веб-страницы. Это подвеска нашего
автомобиля с каким-то бесцветным кузовом, но без колес и сидений. Автомобиль-
ный энтузиаст мог бы сказать, что это проект — мощная основа, требующая какого-
то количества дополнительных усилий для ее превращения в нечто работающее.
То же самое относится и к веб-странице. Вот как выглядят эти базовые элементы,
будучи скомбинированными в простейшую веб-страницу:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled document</title>
<meta charset="windows-1251"/>
</head>
<body>
</body>
</html>
Самые наблюдательные из вас, наверное, заметили тег <meta> в начале разметки.

Я знаю, что упомянул его впервые, но вскоре мы поговорим о нем подробно. Сейчас
просто запомните, что, хотя тег <meta> и не относится к обязательным элементам
«скелета» веб-страницы, он содержит много полезной информации.
Разметка выше описывает самую незамысловатую веб-страницу, которую вы
здесь увидите. Она не содержит практически ничего (по крайней мере с точки
зрения пользователя, который смотрит на нее в браузере). Но если вы понимаете,
что она означает, — это круто. Рассмотрим ее подробнее.
Doctype
<!DOCTYPE html>
Этот элемент известен как doctype (тип документа) — сокращение от Document

Type Definition (описание типа документа)1. Это должен быть первый элемент
веб-страницы, который указывается даже перед любыми пробелами или табуля-
цией. В ранних версиях этой книги мы обращались к типу документа XHTML 1.1
Strict (строгий). Это был далеко не лучший вариант, учитывая, что это ваше первое
знакомство с HTML. Почему? Вот что нам приходилось постоянно указывать:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Попробуйте запомнить это!

Честно говоря, мы можем использовать и более простой тип документа HTML5,
и все будет нормально работать. Но что это за тип?
Случалось ли вам когда-либо пытаться открыть документ, созданный в ��
Micro-
soft Word 2007, в более ранней версии — Word 2000? Внезапно оказывалось, что,
если вы не позаботились сохранить файл для использования в ранних версиях, то
открыть его невозможно. Это потому, что Word 2007 включает в себя функции,
о которых Билл Гейтс и его команда в 2000 году даже не мечтали, так что Microsoft
пришлось создать новую версию своего файлового формата, чтобы встроить туда
новые возможности.
Точно так же существует много различных версий HTML, вышедших в разное
время, например HTML 3.2, HTML 4, XHTML 1.1 и нынешняя HTML5. К счастью,
разные версии ��
HTML��
разрабатывались без таких жутких проблем с совместимо-
стью2, как это получилось у Word. Если вы попробуете выполнить HTML5-код
в старом браузере, который «не поймет, что такое ему дали», то содержимое веб-
страницы отобразится в виде простого неформатированного текста. С другой
стороны, новые браузеры справляются со старой разметкой (созданной в преды-
дущих версиях HTML), даже с теми HTML-элементами, которые потеряли по
пулярность (или устарели, выражаясь официально). Задача <doctype> — определить,
какая версия HTML��
��
передается браузеру для отображения. Далее браузер исполь-
зует эту информацию, чтобы решить, как он должен разместить элементы на экра-
не. Существует много типов документов, которые вы можете использовать, однако,
поверьте мне, лучше просто работать с тем, что предлагает ��
HTML��
5. И да, мои на-
блюдательные друзья, вы правы — этот тип документа нельзя назвать версией
HTML в точном смысле слова, в отличие от предыдущих. Я не буду углубляться
в излишние подробности, если в этом нет необходимости; постарайтесь просто
запомнить это.
1
http://reference.sitepoint.com/html/doctypes/.
2
Оказывается, для обозначения жутких проблем с совместимостью в английском языке
есть емкое выражение compatibility gremlins. Русскоязычные веб-разработчики так, судя
по всему, не говорят, а жаль. — Примеч. пер.
Элемент html
Итак, тип документа сообщил браузеру, какую версию HTML ему ожидать. Что
идет дальше? Сам HTML!
HTML��
-документ строится с использованием элементов. Помните, элемен-
ты — это кирпичики, которые создают структуру, а она, в свою очередь, обеспечи-
вает целостность веб-страницы. Но что такое элемент? Как элемент выглядит
и какова его цель?
HTML-элемент начинается и заканчивается открывающим и закрывающим
тегами.
Тег состоит из открывающей угловой скобки (<), какого-то текста и закрыва
ющей скобки (>).
Внутри тега находится имя тега. Там также может быть один или несколько
атрибутов.
Посмотрим на первый элемент веб-страницы: элемент html (рис. 2.2).
Рис. 2.2. Компоненты типичного HTML-элемента
Сначала идет открывающий тег, определяющий начало элемента:

<html lang="en">
Затем мы видим закрывающий тег, определяющий конец элемента.
</html>
Посмотрим на эту строку снова с именем тега, выделенным полужирным
шрифтом:
<html lang="en">
А здесь выделено имя атрибута в открывающем теге:
<html lang="en">
ЧТО ТАКОЕ АТРИБУТ?

HTML-элементы могут иметь один или несколько атрибутов, зависящих от того, к какому
элементу они применяются. Каждый атрибут имеет название и значение, которые пишутся
так: название="значение". В примере выше можно видеть атрибут lang, использованный для
определения языка (language) документа, — в данном случае его значение "en" говорит о том,
что выбран английский язык.
Одни атрибуты опциональны, а другие обязательны, но все они дают браузеру важную ин-
формацию — куда шире, чем предлагает сам элемент. Например, элемент изображения (о нем
мы еще поговорим) имеет обязательный атрибут "��
image��
source��
��
", значением которого являет-
ся путь к файлу изображения. Атрибуты указываются только в открывающих тегах любых
элементов. В дальнейшем, во время разработки проекта, вы увидите много атрибутов, и, по
крайней мере на начальном этапе, я буду обязательно их объяснять, чтобы вы постепенно
с ними знакомились.
Вернемся к назначению элемента html. Он содержит в себе практически всю

веб-страницу. Все остальное, кроме doctype, находится внутри этого контейнера.
Заглянем поглубже и посмотрим, что скрывается в контейнере.
Там находятся два главных раздела элемента html : head (заголовок) и body
(тело).
Элемент head
Элемент head1 содержит сведения о странице, но ничего из этой информации не бу-
дет показано на самой странице. Например, он включает в себя элемент title
(название), который сообщает браузеру, что нужно отобразить в заголовке веб-
страницы (выводится в строке заголовка — самой верхней части окна браузера, на
которой еще содержатся кнопки Свернуть, Развернуть и Закрыть):
<head>
</head>
Элемент title2
Открывающий <title> и закрывающий </title> охватывают слова Untitled document
в разметке, показанной выше. Обратите внимание: тег <title> означает начало,
а </title> — конец заголовка. Вот так работают закрывающие теги: у них есть слеш
(/) после первой скобки (<).
Заголовок Untitled document (Документ без названия) — просто отправная точка,
с которой вы начинаете творить свою первую веб-страницу; можно изменить эти
слова. Как показано на рис. 2.3, действительно очень важно снабжать веб-страницу
осмысленным заголовком — и не только ради посетителей вашего сайта.
Содержимое элемента title используется и для других целей.
Это название, появляющееся на Панели задач Windows — полоске внизу Рабо-
чего стола, которая отображает открытые в настоящее время окна (рис. 2.4).
То же самое происходит и на панели приложений в Mac (рис. 2.5). Когда у вас
открыто несколько окон, вам очень пригодятся информативные названия!
1
http://reference.sitepoint.com/html/head/.
2
http://reference.sitepoint.com/html/title/.
Рис. 2.3. Документ без названия — не самый удачный заголовок
Рис. 2.4. Название окна на Панели задач Windows
Рис. 2.5. Название окна на панели приложений Mac
Если пользователи захотят добавить страницу в Закладки (или в Избранное),

то заголовок послужит названием для закладки (рис. 2.6).
Рис. 2.6. Страница Untitled document, сохраненная в Избранном Internet Explorer
Элемент title применяется поисковыми системами для обработки содержимо-

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

Некоторые разработчики привыкли добавлять дополнительную информацию, не ото-
бражающуюся на странице, для поисковых систем. Кстати, имя автора страницы или
примечание о правах (символ копирайта) могут быть включены в элемент meta.
В примере выше этот элемент сообщает браузеру, какую кодировку нужно исполь-
зовать.
ВАЖНОСТЬ КОДИРОВКИ
Если, сохраняя свои файлы, вы не уделяете должного внимания выбору кодировки, то навер-
няка просто не представляете его важности. Но, когда другой пользователь, говорящий на
другом языке, попробует открыть ваш сайт, он, скорее всего, увидит страницу с абракадаброй.
Почему? Потому что его компьютер настроен для отображения текста из символов, свойствен-
ных его языку, в то время как ваш — для отображения текста на английском языке. Кодировка
UTF��
-8 справляется с символами практически любого языка (включая специальные), и большин-
ство компьютеров смогут прочитать его. Но для русскоязычных сайтов подходящей будет ко-
дировка windows-1251, которая и будет указываться далее в примерах этой книги.
У тега meta много возможностей, но большинство из них не оказывают заметно-

го влияния на вид страницы, поэтому, вероятно, они не очень интересны для
вас — по крайней мере на данном этапе.
САМОЗАКРЫВАЮЩИЕСЯ ЭЛЕМЕНТЫ
Элемент ��
meta��
 — пример самозакрывающегося элемента (также называемого пустым). В от-
личие от title, между закрывающим и открывающим тегами элемент meta может не содержать
вообще ничего, поэтому нужно было бы писать вот так:
<meta charset="windows-1251"></meta>
Язык HTML содержит значительное количество пустых элементов. Разработчики, создававшие
HTML, решили, что все время ставить ненужные закрывающие теги довольно утомительно,
поэтому придумали самозакрывающиеся элементы, которые заканчиваются вот так: />. Наш
пример будет выглядеть таким образом:
ЗАПОМИНАЛКА: КАК СПРАВИТЬСЯ СО СЛОЖНОЙ РАЗМЕТКОЙ

Вам сложно запомнить всю информацию об элементе ��
meta��
? Если вы думаете, что все осталь-
ные люди держат это в голове, то ошибаетесь. Даже профессиональным программистам было
бы тяжело помнить в точности все обо всех элементах; поэтому они обычно копируют эле-
менты из источников, в правильности которых уверены, например из предыдущего проекта.
Вы можете делать то же самое, потому что у вас есть файлы проекта для этой книги.
Другие элементы,
входящие в head
В head могут присутствовать и другие элементы, например таблицы стилей CSS
или код на языке JavaScript. Мы поговорим о них, когда придет время.
Элемент body
Ура, мы добрались до места! Элемент body содержит почти все, что вы видите, от-
крывая сайт: заголовки, абзацы, изображения, необходимые элементы навигации
и нижние колонтитулы.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Самая простая в мире веб-страница

Вообще-то, здесь я вас слегка обманул: мы уже рассматривали самую-самую простую
веб-страницу, не содержащую совсем ничего. Однако, чтобы понять, как все это ра-
ботает, надо увидеть страницу с каким-то реальным содержимым. Посмотрим?
Откройте текстовый редактор и в новом пустом документе напечатайте следу
ющее (или скопируйте код из файлового архива, если не хотите печатать):
chapter2\examples\01_basic_web_page\basic.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Самая простая в мире веб-страница</title>
</head>
<body>
<h1>Самая простая в мире веб-страница </h1>
<p>Это очень простая веб-страница — самое то для начала.
На ней вы можете увидеть, как разметка соотносится с конечным
результатом, отображающимся в браузере.</p>
<p>А это — другой абзац. Просто чтобы показать, как все это
работает.</p>
</body>
</html>
Теперь сохраните файл под именем basic.html.

Если вы используете программу Блокнот в Windows, сделайте следующее.
1. Выполните команду ФайлСохранить как и выберите папку Web (создайте ее
в папке Документы).
2. Введите имя файла basic.html.
3. В раскрывающемся списке Кодировка выберите ANSI.
4. Нажмите кнопку Сохранить.
Если вы работаете в TextEdit��
��
в ��
Mac��
, то сначала убедитесь, что у вас неформа-
тированный текст. Затем сделайте следующее.
1. Выберите меню FileSave As (ФайлСохранить как).
2. Найдите папку Sites и введите имя файла basic.html.
3. Выберите кодировку Unicode в раскрывающемся списке Plain Text Encoding (Ко-
дировка обычного текста).
4. Нажмите кнопку Save (Сохранить).
5. TextEdit предупредит вас, что вы собираетесь сохранить неформатированный
текст с расширением, отличным от TXT. Вам нужно сохранить его в формате
HTML, поэтому нажмите кнопку Don't append (Не прикреплять), и ваш файл
будет сохранен.
Затем, используя Проводник или Finder, найдите файл и дважды щелкните на

нем, чтобы открыть в браузере. На рис. 2.7 показано, как должна отобразиться
страница.
Рис. 2.7. Отображение самой простой страницы
Анализ веб-страницы. На этой простой странице вы видите два новых элемен-

та: заголовок и несколько абзацев, выделенных тегами <h1>1 и <p>2 соответственно.
Вы заметили, как соотносится набранная вами разметка с тем, что потом отобра-
жается в браузере? Рисунок 2.8 поможет вам сравнить два этих документа.
Рис. 2.8. Сравнение исходной разметки с отображением в браузере
1
http://reference.sitepoint.com/html/h1/.
2
http://reference.sitepoint.com/html/p/.
Открывающий <h1> и закрывающий </h1> теги обрамляют слова Самая простая

в мире веб-страница, формируя заголовок. Таким же образом элемент р создает
в тексте два абзаца.
РЕГИСТРЫ И РАЗМЕТКА
Теги написаны в нижнем регистре, и имена атрибутов будут писаться так же. Работая с типом
документа HTML5, вы можете вольно обращаться со стилем разметки (например, смешивать
верхний и нижний регистры, не ставить кавычки в атрибутах и многое другое). Ключевое
слово — «можете». Вообще-то, хорошим тоном считается следование строгим правилам раз-
метки XHTML��
��
, даже если вы не используете тип документа ��
XHTML��
, потому что это упорядо-
ченный, логический стиль разметки. Так что в книге, используя тип документа HTML5, мы
будем следовать правилам более скрупулезного XHTML. Подробнее о различиях синтаксиса
HTML и XHTML вы можете почитать на сайте SitePoint1.
Заголовки и структура документа

В примере выше мы применили элемент h1, чтобы выделить основной заголо-
вок. Если необходимо добавить подзаголовки внутри текста, нужно использо-
вать элемент h2. Подзаголовок внутри h2 можно ввести с применением элемен-
та h3 и т. д. до h6 . Чем ниже иерархический уровень заголовка, тем ниже его
важность и размер шрифта (кроме случаев использования ��
CSS��
, о чем мы погово-
рим в главе 3).
Очень важно соблюдать порядок появления заголовков. Иными словами, вы
должны начать с заголовка первого уровня и один за другим понижать уровень.
Вы можете вернуться с более низкого уровня заголовка на более высокий при усло-
вии, что текст под более высоким уровнем никак не соотносится с тем, что рассмат-
ривалось под предыдущим, более низким. Полезно визуализировать заголовки
в виде списка.
Основной заголовок (первого уровня).
yy Заголовок второго уровня.
yy Заголовок второго уровня.
 Заголовок третьего уровня.
Основной заголовок (первого уровня).
yyЗаголовок второго уровня.
В HTML этот пример выглядит так:
<h1>Основной заголовок</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h1>Основной заголовок</h1>
1
http://reference.sitepoint.com/html/html-xhtml-syntax.
Абзацы
Конечно, никто не хочет читать документ, который содержит только заголовки,
поэтому нужно вложить в него и какой-то текст. Элемент, который применяется
для выделения текстовых блоков, — p. Просто запомните: р значит абзац (��
para-
graph). Это важно, потому что вы будете использовать этот элемент куда чаще, чем
остальные. В этом вся прелесть HTML��
��
: часто используемые элементы очень про-
сты и их легко запомнить.
Для тех, кто любит списки

Представьте, что вам требуется добавить на веб-страницу список. Чтобы составить
нумерованный список элементов, нужно использовать элемент ol, маркирован-
ный — ul. В обоих случаях каждый элемент списка выделяется элементом li.
Таким образом, мы применяем ol для нумерованного списка, ul для маркирован-
ного и li для каждого элемента списка.
Чтобы увидеть эту разметку в действии, в новом текстовом документе напе-
чатайте следующий код, сохраните файл как lists.html и посмотрите в браузере,
что получилось. Для просмотра нужно дважды щелкнуть на значке сохраненного
файла.
chapter2\examples\02_lists\lists.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Списки — представление</title>
</head>
<body>
<h1>Списки — представление </h1>
<p>Это абзац. Хорошенький маленький симпатичный абзац.</p>
<p>А это еще один. За ним идет подзаголовок.</p>
<h2>Вот и подзаголовок!</h2>
<p>А сейчас список или два</p>
<ul>
<li>Это маркированный список.</li>
<li>В нем не указана нумерация элементов.</li>
<li>Мы хотим видеть просто точечки.</li>
</ul>
<p>А это нумерованный список:</p>
<ol>
<li>Это первый элемент…</li>
<li>Следующий за ним второй…</li>
<li>И т. д., сколько угодно </li>
</ol>
</body>
</html>
Что вы об этом думаете? Вы напечатали весь код? Не забывайте, что все при-
меры можно найти в архиве кода. Учтите, однако, что копирование и вставка раз-
метки, а затем сохранение и запуск файла не дадут вам настоящего ощущения, что
вы сами делаете свой сайт; учиться следует на практике. Даже если вы сделали
ошибку — прекрасно, это лучший способ запомнить, как должно быть правильно
(к тому же вы будете довольны собой, найдя и исправив ее самостоятельно).
Посмотрите, как эта разметка должна отобразиться в браузере (рис. 2.9).
Рис. 2.9. Использование маркированных и нумерованных списков

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

Мы рассмотрим большинство из них, постепенно продвигаясь в разработке сайта.
Однако не все элементы так очевидны и просты в использовании, как эти.
Комментарии в HTML
Вернемся к автомобильной аналогии. Вы выполнили для своей «машины» небольшую
работу, и если вы собираетесь прикрутить новые детали к старому каркасу, то за-
метите, что детали не скреплены болтами, а приклеены к автомобилю суперклеем.
Наверное, для этого были веские причины, но вы не можете их вспомнить. Беда

в том, что если вы когда-то приклеили детали суперклеем, то, наверное, нужно так
сделать снова. Наверное, было бы здорово, если бы вы тогда оставили себе записку
с объяснением причин использования суперклея вместо болтов. С другой стороны,
ваша машина станет выглядеть странновато, если вся будет обклеена стикерами
с заметками. Да уж, это дилемма!
Работая над сайтом, можно оказаться в аналогичной ситуации. Вы можете
спроектировать сайт, а потом не прикасаться к нему полгода. Затем, вернувшись
к работе, вы обнаружите, что не получается разобраться в собственном творении.
К счастью, эту проблему легко решить.
HTML, как и большинство языков программирования, позволяет добавлять
комментарии1. Это отличный способ делать пометки во время работы. Кроме того,
хотя комментарии включены в ваш код, они никак не влияют на отображение
страницы на экране. Вот пример комментария:
chapter2\examples\03_comments\comments.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Пример комментария</title>
</head>
<body>
<p>Я очень, <em>очень</em> люблю этот инструмент HTML!</p>

</body>
</html>
На рис. 2.10 показано, как страница отображается в браузере.

Комментарии должны начинаться с символов .
Вы заметили, что я ввел еще один новый элемент, чтобы выделить слово?
Он обозначается тегами <em> и </em> и используется везде, где… да нужно ли это
объяснять? Ну вот, последний вопрос как раз и проясняет этот момент. Вы заме-
тили, что слово «нужно» выделено курсивом? Прочитайте снова эту часть и обра-
тите внимание на интонацию. Теперь вы знаете, как использовать элемент em .
Мы подробно рассмотрим его в конце главы.
Использование комментариев для временного скрытия разметки от браузе-
ра. В комментариях вы можете написать сколько угодно информации, поэтому
они нередко используются для того, чтобы временно скрыть часть элементов
страницы. Это лучше, чем удаление, потому что позднее вы можете решить вернуть
информацию на страницу. Если она была просто выведена в комментарий, вам
1
http://reference.sitepoint.com/html/html-xhtml-syntax#html-xhtml-syntax__sect-comments.
Рис. 2.10. Комментарий остается скрытым при выводе страницы на экран
не придется ее снова печатать. Это называется комментированием разметки. Вот

пример:
chapter2\examples\04_commenting_out_markup\commentout.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Как закомментировать разметку в XHTML</title>
</head>
<body>
<h1>Магазин</h1>
<p>Следующие элементы выстраиваются по порядку:</p>
<ul>
<li>Темно-серая тонировка для окон</li>
<li>Бронзовая тонировка для окон</li>

</ul>
</body>
</html>
На рис. 2.11 показано, как эта страница выглядит в Firefox.
Рис. 2.11. Закомментированные элементы списка не видны
Запомните, вы пишете комментарий примерно так:

.
Символы
Порой вам может понадобиться включить в текст веб-страницы символы «боль-
ше» (>) или «меньше» (<). Это проблема, так как эти символы уже применяются
для обозначения тегов в HTML. Что же делать? К счастью, вместо них в тексте
можно использовать специальные кодирующие последовательности. Например,
символ > может быть представлен в виде последовательности &qt;, которую мы
вставляем в текст, как показано в примере ниже. Результат разметки можно уви-
деть на рис. 2.12.
chapter2\examples\05_symbols\entity.html
<!DOCTYPE html>
<html lang="en">
<head>
2.2. Погружение в сайт 69
<title>Магазин: заметка</title>
</head>
<body>
<p>Сейчас в магазине ножей >
НЕТ (могут поступить через 3 дня)</p>
</body>
</html>
Рис. 2.12. Последовательность > отображается в браузере как >
Много различных последовательностей существует для представления широ-

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

Последовательность (используется в разметке) Символ (отображается в браузере)
> >
< <
& &
£ ₤
© ©
™ тм
2.2. Погружение в сайт

Что ж, мы рассмотрели несколько простейших веб-страниц, чтобы вы лучше поня-
ли процесс создания вашей собственной ��
HTML��
-разметки. Может быть, вы напе-
чатали ее или открыли эти страницы из архива кода, а затем запустили в браузере.
Может быть, вы даже попробовали поэкспериментировать самостоятельно — это
здорово! Все эти примеры можно не оставлять, хотя… Эти страницы не понадобят-
ся снова по ходу чтения, но вы можете использовать идеи из них. Мы разработаем
вымышленный проект, который будет завершен вместе с книгой: сайт местного
дайвинг-клуба.
В состав дайвинг-клуба входит группа энтузиастов. Он должен предоставлять
своим членам следующие возможности:
делиться фотографиями из предыдущих поездок;
обмениваться информацией о предстоящих поездках;
распространять информацию о встречах;

читать ответы и статьи других участников;
писать новости клуба.
Кроме того, у сайта следующие цели:
привлекать новых членов клуба;
приводить ссылки на сайты дружественных сообществ по дайвингу;
предлагать способ поиска общей информации по дайвингу.
Аудитория сайта может быть небольшой, но постоянные пользователи и члены
клуба должны быть увлечены сайтом. Это должен быть классный сайт, на который
люди будут возвращаться снова и снова, поэтому он станет отличным проектом
для работы. Осталось его создать! Начнем разработку первой страницы: главной
страницы сайта.
Главная страница: начальная точка всех сайтов

В начале главы мы рассмотрели простую веб-страницу, не содержащую ничего (одна
только подвеска автомобиля, без кузова и салона). Вы сохранили файл basic.html.
Откройте этот файл в текстовом редакторе и удалите следующее:
текст, расположенный между открывающим <title> и закрывающим </title>;
все, что содержится между открывающим <body> и закрывающим </body>.
Сохраните файл под именем index.html.
Вот что должно у вас получиться:
chapter2\website_files\01_skeleton\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
А сейчас приступим к созданию сайта. Поехали?
Сделаем заголовок
Припомнив изученное ранее, внесите небольшие изменения в этот документ.
1. Поменяйте заголовок веб-страницы на «Bubble Under — дайвинг-клуб на
юго-западе Великобритании».
2. Добавьте заголовок первого уровня «BubbleUnder.com».
3. Сразу после заголовка добавьте абзац: «Дайвинг-клуб на юго-западе Велико-
британии — сделай плюх с нами!» Внимание: это как бы ваш маркетинговый
слоган — теглайн (tagline).
Как только вы внесете эти изменения, ваша разметка должна выглядеть вот так
(новый код выделен полужирным шрифтом):
chapter2\website_files\02_setting_a_title\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubble Under — дайвинг-клуб на юго-западе
Великобритании</title>
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Дайвинг-клуб на юго-западе Великобритании — сделай плюх с нами!</p>
</body>
</html>
Сохраните страницу и затем откройте ее в браузере. На рис. 2.13 показан ре-
зультат, который вы должны увидеть.
Рис. 2.13. Результат работы над главной страницей
Приветствие для новых посетителей

Теперь предлагаю немного расширить слоган. Добавьте на страницу заголовок
второго уровня, под которым поместите приветственный текст.
chapter2\website_files\03_welcoming_new_visitors\index.html (фрагмент)
<body>
<h2>Мы рады, что вы погрузились на наш классный сайт!</h2>
<p>Круто, что вы заглянули и поделитесь с нами воздухом! Благодаря вашему
классному умению ориентироваться под водой вы успешно нашли путь
к стартовой точке — в данном случае к нашей главной странице.</p>
</body>
ОЙ! А ОТКУДА ЭТО ВЗЯЛОСЬ?

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

посмотрите, как она выглядит в браузере (или просто нажмите кнопку Обновить).
Страница будет примерно такой, как на рис. 2.14.
Рис. 2.14. Главная страница, принявшая новый вид
Ну вот, ваша страница уже почти похожа на множество главных страниц других
сайтов: на ней есть простой текст, приветствующий новых посетителей, но, правда,
больше ничего нет. О чем конкретно этот сайт или, если быть более точным, для
чего именно он создавался?
О чем наш сайт?

Запомните: несмотря на добавленные вами заголовки и абзацы, по-прежнему не-
понятно, о чем этот сайт. Все посетители пока знают лишь то, что сайт о дайвинге.
Добавим на страницу еще немного поясняющего текста, а также некоторые кон-
тактные данные.
1. После уже имеющегося контента1 страницы добавьте еще один заголовок, на
этот раз третьего уровня: «О нас» (помните о необходимости и открывающего
и закрывающего тега для заголовка).
1
От англ. content — «содержание», в данном случае — наполнение, смысловая часть веб-
страницы. В сфере IT укоренилась практика употребления английских терминов в рус-
ской речи для точности и мгновенного отличия от множества русских синонимов. —
Примеч. пер.
2. Затем добавьте такой текст:

«Bubble Under — группа энтузиастов дайвинга, основанная на юго-востоке
Великобритании, которая регулярно встречается для дайвинг-вылазок в лет-
ние месяцы, когда погода хорошая и по воде плывут барашки. Мы проводим
уик-энд, собираясь небольшими группами, чтобы сократить расходы на про-
живание и проезд, а также быть уверенными, что каждый получает надеж-
ного напарника.
Хотя мы располагаемся на юго-западе, мы не ограничиваемся только нашей
территорией: в последних поездках мы посетили реку Скапа в Шотландии
и Мальту.
Когда мы не занимаемся дайвингом, мы часто встречаемся в местных пабах,
чтобы поболтать о грядущих приключениях (на самом деле это только по-
вод, да?)».
3. Затем добавьте раздел «Наши контакты», обозначив его заголовком третьего
уровня.
4. И наконец, добавьте какие-нибудь контакты для примера:
«Чтобы узнать больше, свяжитесь с секретарем клуба Бобом Добалина по те-
лефону 01793 641207 или по электронной почте bob@bubbleunder.com».
КАК ОБЛЕГЧИТЬ СЕБЕ ЖИЗНЬ

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

и параграфов, находящихся внутри документа. Если это понятно, то разметка
должна получиться вот такой:
chapter2\website_files\04_whats_it_all_about\index.html (фрагмент)
<p>Круто, что вы заглянули и поделитесь с нами воздухом! Благодаря вашему
классному умению ориентироваться под водой вы успешно нашли путь
к стартовой точке — в данном случае к нашей главной странице.</p>
<h3>О нас</h3>
<p>Bubble Under — группа энтузиастов дайвинга, основанная на юго-востоке
Великобритании, которая регулярно встречается для дайвинг-вылазок
в летние месяцы, когда погода хорошая и по воде плывут барашки. Мы
проводим уик-энд, собираясь небольшими группами, чтобы сократить
расходы на проживание и проезд, а также быть уверенными, что
каждый получает надежного напарника.</p>
<p> Хотя мы располагаемся на юго-западе, мы не ограничиваемся только

нашей территорией: в последних поездках мы посетили реку Скапа
в Шотландии и Мальту.</p>
<p> Когда мы не занимаемся дайвингом, мы часто встречаемся в местных
пабах, чтобы поболтать о грядущих приключениях (на самом деле это
только повод, да?).</p>
<h3>Наши контакты</h3>
<p> Чтобы узнать больше, свяжитесь с секретарем клуба Бобом Добалина
по телефону 01793 641207 или по электронной почте
bob@bubbleunder.com.</p>
Главная страница показана на рис. 2.15.
Рис. 2.15. Отображение файла index.html
Ничего сверхъестественного, да? Поверьте мне, это еще не все. Сейчас следует
сконцентрироваться на контенте сайта и на том, как он должен быть структуриро-
ван. Мы только подбираемся к обширным вопросам структуры документа, обсудив
лишь использование уровней заголовков. В главе 3 вы увидите, как можно офор-
мить документ, то есть изменить шрифт, цвет, отступы и т. д., но сейчас сосредото-
чимся на содержании и структуре.
КЛИКАБЕЛЬНЫЕ АДРЕСА ЭЛЕКТРОННОЙ ПОЧТЫ

Удобно, когда на странице указан адрес электронной почты, но это не лучший выход. Чтобы
написать по этому адресу, посетитель должен его скопировать, вставить в адресную строку
письма… Есть путь попроще. Вот он:
<p>Чтобы узнать больше, свяжитесь с секретарем клуба Бобом Добалина
<a href="mailto:bob@bubbleunder.com"> bob@bubbleunder.com</a>.</p>
Этот кликабельный адрес создан с помощью элемента а, который служит для добавления
на веб-страницу ссылок (и будет описан чуть позже в этой главе). Префикс mailto: говорит
браузеру, что ссылку надо обработать как электронный адрес (открыть почтовый клиент
по щелчку на этой ссылке). В теге должен быть указан верный электронный адрес вида
username@domain.
Добавьте этот код на вашу веб-страницу, сохраните и обновите страницу в браузере. Попро-
буйте щелкнуть на подчеркнутом тексте; должен открыться почтовый клиент с заполненной
строкой To: (Кому).
Пока страница выглядит немного скучноватой, да? Украсим ее немного. Напри-

мер, добавим цвета — вставим в документ изображение, воспользовавшись элементом
img. Он используется для вставки изображения на веб-страницу, а атрибуты src, alt,
width, height описывают параметры рисунка. Атрибут src (от source — «источник») —
имя файла изображения. В данном случае это divers-circle.jpg, который вы можете
взять из архива кода. Атрибут alt — альтернативный текст. Если по каким-то при-
чинам изображение не загрузилось, вместо него будет показан альтернативный текст.
Это полезно для слабовидящих посетителей вашего сайта, поисковых систем, поль-
зователей с медленной скоростью интернет-соединения. И наконец, width и height —
соответственно ширина и высота изображения в пикселах (точках). Мы еще погово-
рим о пикселах, когда будем подробно обсуждать изображения.
Найдите изображение в архиве с кодом и поместите его в папку сайта. Изобра-
жение показано на рис. 2.16.
Рис. 2.16. Дайверы собираются в круг

Откройте файл index.html в своем редакторе и добавьте следующую разметку

сразу после заголовка второго уровня (h2):
chapter2\website_files\05_clickable_email_and_image\index.html (фрагмент)
<p><img src="divers-circle.jpg" width="200" height="162"
alt="Группа дайверов тренируется"/></p>
Сохраните изменения и посмотрите, как страница выглядит в браузере. Она
должна отображаться, как показано на рис. 2.17.
Рис. 2.17. Отображение главной страницы в браузере
Структурирование
Абзацы? Нет проблем. Заголовки? Запросто! Фактически вы уже сейчас можете
создать веб-страницу с простейшей структурой. Небольшой набор элементов, ко-
торые мы сейчас обсуждали, легко запомнить: их наименования очевидны (пом-
ните: p — paragraph?). Но что за зверь — div?
Элемент div (от divide — «делить») служит для разделения веб-страницы на

части. В сочетании с CSS он дает удивительный эффект.
Когда вы помещаете какой-то контент в элемент div, это не оказывает явного
влияния на отображение самого текста, в том числе не добавляет разрыв до и после
него. В отличие от p, элемент div не добавляет никаких полей или отступов.
Сравните следующее:
<p>Это абзац.</p>
<p>Это еще один абзац.</p>
<p>А это еще один абзац.</p>
<p>И еще один абзац!</p>
<div>А это div!</div>

<div>Контент каждого элемента div отображается с новой строки.</div>
<div>Но, в отличие от абзаца, у него нет отступа.</div>
<div>Элемент div — просто блочный контейнер.</div>
Разница видна на рис. 2.18.
Рис. 2.18. У абзацев есть соответствующие отступы, в отличие от div
Иными словами, функция div заключается в разделении страницы на отдель-

ные секции — без какого-либо оформления в базовом варианте. Внутри этих
секций p может быть использован для создания абзацев текста.
ИСПОЛЬЗУЙТЕ ЭЛЕМЕНТЫ HTML ПО НАЗНАЧЕНИЮ

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

элемента div, как здесь:
<div>
<p>Это абзац внутри элемента div.</p>
<p>Как и здесь.</p>
</div>
Вы можете помещать сколько угодно абзацев внутри элемента div, но помните,
что нельзя поместить div внутри абзаца. Считайте div просто контейнером, который
должен объединять связанные между собой элементы.
При просмотре главной страницы в браузере можно выделить области с общи-
ми задачами. У нас есть:
заголовочная часть, которая включает:
yyназвание сайта;
yyслоган;
область основного контента.
На рис. 2.19 показано, как можно выделить эти области.
Рис. 2.19. Выделенные на базовой странице области
Откройте в текстовом редакторе главную страницу (index.html) и расставьте

теги <div> и </div> вокруг секций, обведенных на рис. 2.19. После этого в каждом
открывающем теге укажите атрибут id, давая, например, имена header (заголовок),
sitebranding (представление сайта), tagline (теглайн) и bodycontent (основной

контент)1. Помните, что наименования атрибутов должны быть написаны в нижнем
регистре и заключены в кавычки.
НИКАКИХ ОБЩИХ ID
Атрибут ��
id��
используется в HTML��
��
для уникального обозначения элементов, поэтому два эле-
мента не могут иметь одинаковый id. Когда вы будете работать с CSS и JavaScript, атрибуты
id вам пригодятся.
H1, HEADER И HEAD

Не стоит путать значение атрибута id = "header" с названиями элементов-заголовков страни-
цы (h1, h2 и т. д.). Значение id с таким же успехом может быть равно topstuff или pageheader.
Это неважно — название атрибута просто описывает назначение секции для постороннего
человека (или для вас самих спустя 12 месяцев, когда вы уже давно забыли, для чего вводи-
ли это определение).
НОВЫЙ ЭЛЕМЕНТ — HEADER

Новшество HTML��
��
5 — элемент ��
header��
, который мы рассмотрим в следующих главах. Факти-
чески введение этого элемента означает признание широкого распространения атрибута
id = "header". Его использование стало стандартной практикой. Было бы удобно добавлять его
в наших примерах, но применение новых элементов HTML5 может вызвать другие сложности
и проблемы. В целях предосторожности мы сначала изучим старые надежные элементы, что-
бы использовать их на первых порах, а затем завершим создание сайта переходом на HTML5.
Это поможет вам понять, как изменился HTML с течением времени, и избежать при этом
лишних трудностей в начале обучения.
Чтобы вам проще было начать, я поработал над первой частью страницы. В приме-
ре ниже показан измененный раздел с введенным id-атрибутом для элемента div:
chapter2\website_files\06_adding_structure_with_divs\index.html (фрагмент)
<div id="header">
<p> Дайвинг-клуб на юго-западе Великобритании — сделай плюх с нами!</p>
</div> 
Сейчас попробуйте сделать то же самое: добавьте элементы div для выделенных
частей контента и идентифицируйте их как site branding или tagline.
Поговорим о вложениях
Вы уже знаете, что элементы div могут содержать абзацы, но, кроме этого, они
могут включать в себя и какое-то количество других элементов div. Тогда они на-
зываются вложенными (nested) div-элементами. Один div просто вкладывается
1
В отличие от текста контента, элементы самой разметки, в том числе атрибуты id, name
и др., следует писать только на английском языке. Исключение можно сделать для ком-
ментариев, да и то это считается дурным тоном, как и запись русских слов латиницей. —
в другой. Только не забывайте закрывать теги. Вложенные элементы div могут

помочь логически сгруппировать разделы веб-страницы, как вы можете, к примеру,
положить несколько маленьких коробок с похожим содержимым внутрь одной
большой.
В качестве примера возьмите следующий код; посмотрите, как мы вложили
элементы div и p в другой элемент div с id = "outer" (внешний). Значения id помо-
гают понять иерархию элементов.
<div id="outer">
<div id="nested1">
<p>Абзац внутри первого вложенного элемента div.</p>
</div>
<div id="nested2">
<p>Абзац внутри второго вложенного элемента div.</p>
</div>
</div>
Как показано на рис. 2.19, некоторые элементы div вложены — элементы

с id-атрибутами "site branding" и "tagline" вложены внутрь элемента div с атри-
бутом "header".
Структурированная страница: все поделено!

Если все хорошо, то ваш HTML-код должен выглядеть так.
chapter2\website_files\06_adding_structure_with_divs\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubble Under — дайвинг-клуб на юго-западе Великобритании</title>
</head>
<body>
<div id="header">
<div id="sitebranding">
</div>
<div id="tagline">
<p>Дайвинг-клуб на юго-западе Великобритании — сделай плюх
с нами!</p>
</div>
<div id="bodycontent">
<h2>Мы рады, что вы погрузились на наш классный сайт! </h2>
<p>Круто, что вы заглянули и поделитесь с нами воздухом! Благодаря
вашему классному умению ориентироваться под водой вы успешно нашли
путь к стартовой точке — в данном случае к нашей главной
странице.</p>
<h3>О нас</h3>
<p>Bubble Under — группа энтузиастов дайвинга, основанная
на юго-востоке Великобритании, которая регулярно встречается
для дайвинг-вылазок в летние месяцы, когда погода хорошая
и по воде плывут барашки. Мы проводим уик-энд, собираясь
небольшими группами, чтобы сократить расходы на проживание
и проезд, а также быть уверенными, что каждый получает
надежного напарника.</p>
<p>Хотя мы располагаемся на юго-западе, мы не ограничиваемся только
<p>Когда мы не занимаемся дайвингом, мы часто встречаемся в местных
<h3>Наши контакты</h3>
</div> 
</body>
</html>
ОТСТУПЫ В ВАШЕЙ РАЗМЕТКЕ

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

добавлены комментарии. Они необязательны, но, повторюсь, комментирова-
ние — отличная привычка, предупреждающая появление проблем впоследствии.
Часто невозможно найти соответствующие друг другу открывающие и закрыва
ющие теги <div> в больших блоках HTML. Если у вас несколько вложенных тегов
<div>, то в конце разметки должно быть что-то вроде этого:
</div>
</div>
</div>
В таких случаях будет трудно понять, какой закрывающий тег что закрывает.
Пока вам может быть не совсем понятно, почему это так важно, но когда мы начнем
изучать ��
CSS��
, ошибки в ��
HTML��
-коде будут очень сильно портить вам жизнь. Доба-
вив несколько комментариев, можно значительно упростить себе работу по отлад-
ке в дальнейшем.
</div> 
</div> 
</div> 
ФОРМАТИРОВАНИЕ СТАНОВИТСЯ ПРОЩЕ

Если вы используете не простой текстовый редактор, а специальный редактор HTML, то,
скорее всего, можете автоматически форматировать разметку и исправлять ошибки. Вот,
например, программа Dreamweaver: можно выбрать CommandsApply��
Source��
��
Formatting��
��
(Ко-
мандыПрименить исходное форматирование). По-моему, это волшебство! Просто посмот-
рите на разметку «до и после» на рис. 2.20.
Рис. 2.20. Оригинальный HTML-код в Dreamweaver до (слева)

и после (справа) форматирования исходного кода
Как выглядит веб-страница? Я не буду приводить тут скриншот, так как добав-

ление div-элементов никак не проявляется при отображении. Изменения, которые
мы сделали, касаются структуры документа, по-настоящему они понадобятся нам
позднее.
НЕ СТОИТ ПЕРЕБАРЩИВАТЬ
Избегайте излишнего употребления элементов div. Некоторые разработчики увлекаются
секционированием страниц с использованием div, расставляя их и тут и там. Излишний
энтузиазм в использовании этого элемента приведет лишь к тому, что страница будет усея-
на элементами div, как пенек опятами, без всякого практического смысла. Так что будьте
осторожны, не стоит без нужды вводить этот элемент только потому, что теперь вы это
умеете.
Разбивка страниц
На текущий момент вы добились значительного прогресса в создании сайта.
Но что это за сайт, у которого только одна страница? Честно говоря, сайт может
состоять из одной страницы, как и предложение из одного слова. Но вы, навер-
ное, не купили бы эту книгу, чтобы узнать, как создать всего одну страницу сайта,
не правда ли?
Посмотрим, как можно разделить страницу, над которой вы работали, на не-

сколько отдельных страниц, и как они будут соотноситься друг с другом.
Во-первых, удостоверьтесь, что с вашей страницей все в порядке, прежде чем
пойдете дальше. Разметка страницы должна соответствовать большому блоку
кода, показанному на предыдущих страницах (после того как мы ввели элемен-
ты div). Если это не так, возьмите в архиве кода версию, содержащую div: (\chapter2\
website_files\06_adding_structure_with_divs\index.html). Сохраните файл под именем
index.html в каталоге с вашим сайтом (если увидите предупреждение с вопросом,
хотите ли вы переписать существующий файл, нажмите кнопку Да).
Файл готов? Нужно разбить его на три страницы. Сначала сделайте три
копии.
1. Выделите ярлык файла index.html в Проводнике или Finder.
2. Чтобы скопировать файл, выберите меню ПравкаКопировать.
3. Чтобы сделать копию в том же каталоге, выберите ПравкаВставить.
4. Повторите все это еще раз.
У вас должно получиться три HTML-файла в каталоге, где находятся файлы
вашего сайта. Файл index.html оставьте как есть, а другие два нужно переименовать
(помня о нижнем регистре). Выделите каждый из них по очереди и выберите меню
ФайлПереименовать, если работаете в Windows. Пользователи Mac могут просто
выделить файл, щелкнув на нем, и нажать Return для изменения имени.
Переименуйте один файл в contact.html, а другой — в about.html.
ГДЕ ЖЕ РАСШИРЕНИЕ?
Если имя вашего файла отображается в Проводнике просто как ��
index��
, это значит, что систе-
ма не показывает расширения файлов (с помощью которых Windows определяет их тип).
Чтобы отобразить расширение, сделайте следующее.
1. Откройте Проводник Windows.
2. Если вы пользователь Windows 7 и Vista, выберите СервисКаталоги и поиск. Пользова-
тели XP должны выбрать СервисСвойства папки.
3. Перейдите на вкладку Вид.
4. В области Дополнительные параметры в группе Файлы и папки снимите флажок Скрывать
расширения для зарегистрированных типов файлов.
Итак, у вас есть три идентичные копии вашей HTML-страницы. А сейчас

нужно отредактировать их содержимое в соответствии с названиями каждого из
файлов.
Откройте существующий файл в Блокноте, выполнив команду ФайлОткрыть,
и в появившемся окне измените Тип файла на Все файлы. Сейчас, открыв свой ка-
талог Web, вы увидите в нем все файлы, которые можно открыть.
Файлы в TextEdit открываются почти так же. Выполните команду FileOpen
(ФайлОткрыть) (убедитесь, что установлен флажок Ignore rich text command
(Игнорировать команды для оформления насыщенного текста)).
Откройте в своем текстовом редакторе все файлы по очереди и отредактируйте

их, как описано в табл. 2.2 (помните, что перед тем, как открыть новый файл, необ-
ходимо сохранить предыдущий).
Таблица 2.2. Изменения для файлов

Имя файла Действие
index.html Удалите разделы «О нас» и «Свяжитесь с нами» (вместе с заголовками и сле-
дующими за ними абзацами), проследив, чтобы остальная часть разметки не
изменилась. Будьте осторожны — не удалите теги <div> и </div>, касающиеся
содержания основной части (body)
about.html Удалите приветственную часть (заголовок второго уровня и связанные с ним абзацы,
включая изображение) и раздел «Свяжитесь с нами» (включая заголовок и абзацы)
contact.html Наверное, вы уже поняли, что сейчас нужно убрать приветственный раздел и часть
«О нас» (если вы не уверены в правильности своих действий, читайте дальше)
Сейчас каждый из трех файлов содержит контент в соответствии со своим на-

званием, но в два вновь созданных файла требуется внести небольшие изменения.
Откройте about.html в текстовом редакторе и выполните следующее.
1. Измените значение элемента title на О BubbleUnder.com: кто мы и о чем этот
сайт.
2. Сделайте заголовок третьего уровня «О нас» заголовком второго уровня. В про-
цессе редактирования оригинальной главной страницы мы потеряли один из
уровней заголовков. В частности, заголовки «О нас» и «Свяжитесь с нами» были
помечены как заголовки третьего уровня, подчиняющиеся заголовку второго
уровня «Добро пожаловать». Не следует пропускать уровни заголовков.
За заголовком первого уровня (h1) должен следовать заголовок второго (h2),
а не третьего (h3) уровня.
Затем откройте файл contact.html в текстовом редакторе и выполните следу
ющее.
1. Замените содержимое элемента title на Свяжитесь с нами через BubbleUnder.
2. Измените третий уровень заголовка на второй, как в предыдущем файле about.
html.
Если все идет по плану, то у вас получилось три файла: index.html, about.html
и contact.html.
Разметка должна выглядеть вот так.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="header">
</div>
<div id="tagline">
с нами!</p>
</div>
<h2> Мы рады, что вы погрузились на наш классный сайт!</h2>
<p><img src="divers-circle.jpg"
alt=»Группа дайверов тренируется»
width="200" height="162"/></p>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>О BubbleUnder.com: кто мы и о чем этот сайт</title>
</head>
<body>
<div id="header">
</div>
<div id="tagline">
с нами!</p>
</div>
<h2>О нас</h2>
<p>Bubble Under — группа энтузиастов дайвинга, основанная
для дайвинг-вылазок в летние месяцы, когда погода хорошая
и по воде плывут барашки. Мы проводим уик-энд, собираясь
небольшими группами, чтобы сократить расходы на проживание
и проезд, а также быть уверенными, что каждый получает
<p>Когда мы не занимаемся дайвингом, мы часто встречаемся в местных

</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Свяжитесь с нами через BubbleUnder</title>
</head>
<body>
<div id="header">
</div>
<div id="tagline">
с нами!</p>
</div>
<h2>Свяжитесь с нами </h2>
</body>
</html>
Связь между новыми страницами

Мы успешно создали трехстраничный сайт, но остается небольшая проблема:
нет никаких ссылок между страницами. Убедитесь сами. Откройте файл index.html
в браузере и посмотрите на экран. Как вы перейдете от одной страницы к другой?
Чтобы посетители сайта могли как-то ориентироваться, следует добавить нави-
гацию. Для этого предназначены теги привязки (��
anchors��
), но более распространен-
ное название — ссылки (��
links��
). ��
HTML��
-команда для привязки (или ссылки) выгля-
дит так:
<a href="filename.html">Link text here</a>
Элемент а (где а означает anchor) может быть менее интуитивно понятен, чем
p (paragraph) или li (list item), но вы быстро запомните его — в конце концов,
именно на нем и держится весь Интернет. Элемент а содержит текст ссылки, на
котором можно щелкнуть (по умолчанию он отображается на экране шрифтом
голубого цвета с подчеркиванием).
Атрибут href отсылает пользователя на страницу, куда ведет ссылка (будь то

файл на вашем компьютере или страница в Интернете). К сожалению, href не так
просто запоминается (от hyper reference — «гиперссылка»), но вы будете применять
его так часто, что очень скоро запомните.
НЕ ЩЕЛКАЙТЕ ЗДЕСЬ!
Текст ссылки — слова внутри элемента <а>, которые выделяются шрифтом голубого цвета
и подчеркиваются в браузере, — просто краткое указание, куда ведет ссылка (например,
электронная почта bob@bubbleunder.com). Вы, наверное, часто видели ссылки с текстом «Щелк-
ните здесь, чтобы уведомить нас об изменении вашего адреса», или «Загрузить изображе-
ние», или «Предупредите нас об изменении вашего адреса». Никогда не используйте названия
наподобие «Щелкните здесь» — это очень плохо с точки зрения удобства и доступности1.
Нужно сделать простое меню для навигации, с помощью которого можно пере-
ходить со страницы на страницу. Навигация будет представлять собой обычный
маркированный список с использованием элементов ul и li из трех ссылок.
Разметка будет такой:
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="contact.html">Свяжитесь с нами</a></li>
</ul>
Поместите ее внутрь элемента div, чтобы было легко понять, для чего нужен
этот HTML-блок.
<div id="navigation">
<ul>
<<li><a href="index.html">Главная страница</a></li>
<<li><a href="about.html">О нас</a></li>
<<li><a href="contact.html">Свяжитесь с нами</a></li>
</ul>
</div> 
Затем вставьте эту разметку в соответствующее место на каждой странице. Луч-
ше всего добавляйте ее сразу после заголовка, перед началом основного контента.
В приведенном ниже коде блок навигации появляется на главной странице.
chapter2\website_files\07_linking_between_pages\index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
1
Эта проблема подробно рассмотрена в статье Юкка Корпела Why “Click here” is bad
linking practice («Почему “Щелкните здесь” — плохой вариант ссылки») (http://www.
cs.tut.fi/~jkorpela/www/click.html). — Примеч. авт.
<div id="header">
</div>
<div id="tagline">
с нами!</p>
</div>
<ul>
</ul>
</body>
</html>
Результат показан на рис. 2.21.
Рис. 2.21. Страница с простой навигацией

Добавьте блок ссылок в файлы contact.html и about.html и попробуйте походить

по ним. Получится перемещаться между всеми тремя страницами, как показано на
рис. 2.22.
Рис. 2.22. Веб-страницы, связанные навигацией
Вы только что прошли важный этап. Отныне вы — создатель работающего сай-
та с навигацией. Обсудим еще несколько HTML-элементов, которые вы можете
добавить на свои страницы.
Цитата (А кто это сказал?)

Предлагаю добавить на страницу «О нас» цитату. Вот эти строки:
«Счастье — это поплавать в океане, а затем выпить один или два бокала холодненького
пива! И я разрешаю меня цитировать!»
Добавьте цитату сразу за последним абзацем в файле about.html, используя

элемент blockquote (цитата). Вот какая разметка вам понадобится:
chapter2\website_files\08_blockquote\about.html (фрагмент)
<blockquote>
<p>"Счастье — это поплавать в океане, а затем выпить один или два
бокала холодненького пива! И я разрешаю меня цитировать!"</p>
</blockquote>
Стоп, а кто это говорит? Ага, это наш дорогой (вымышленный) секретарь клуба,
Боб Добалина.
chapter2\website_files\08_blockquote\about.html (фрагмент)
<p>Или как говорит наш Боб Добалина:</p>
<blockquote>

</blockquote>
Цитата может содержать сколько угодно абзацев, но не забывайте правильно

расставлять их теги, а также закрывать тег <blockquote>.
На рис. 2.23 показано, как цитата отображается на странице.
Рис. 2.23. Страница с цитатой
ОТОБРАЖЕНИЕ ЭЛЕМЕНТОВ QUOTE

В большинстве браузеров цитируемый текст помечается отступом с левой стороны. Этот
эффект может быть изменен, и мы рассмотрим это позднее. Но запомните: никогда не ис-
пользуйте тег цитаты для создания отступа с левой стороны! Используйте этот элемент толь-
ко по прямому назначению: для выделения чьих-то высказываний. Существуют другие пра-
вильные способы создания отступов — с помощью CSS.
Элемент сite
Если цитата, на которую вы ссылались, опубликована где-то еще: в журнале,
в книге или даже на вашем собственном сайте, то можете добавить ссылку на
источник. Один из способов — использовать элемент сite (от citation — «цити-
рование»). По умолчанию он сделает шрифт курсивным. Вот как должна выгля-

деть разметка:
<p>Я помню, как читал <cite>Жребий</cite> Стивена Кинга, когда был ребенком,
и боялся потом темноты несколько дней.</p>
Но что делать, если текст включает в себя и цитату (��

quote��
), и цитирование (��
cita-
tion)? Все просто — у элемента blockquote есть атрибут cite:
<blockquote cite="http://www.petermoore.net/sftb/chapter1.htm">
<p>Мой распорядок дня описать просто: когда они уходят на работу, я все
еще в постели. А когда приходят домой, обнаруживают меня сидящим
на диване, пьющим пиво и смотрящим мыльные оперы.</p>
</blockquote>
На сайте о дайвинге мы не будем использовать ни элемент, ни атрибут cite, но

вы можете счесть его полезным для собственных проектов.
Элементы strong и em

Мы уже упоминали элемент em. Это, наверное, самый легкий элемент. Выделяя
какие-то слова во время беседы, вы так или иначе делаете это интонационно, ста-
вите на них ударение (��
em��
= ��
emphasis��
). Если вы хотите подчеркнуть важность и зна-
чительность чего-то, то ваши слова должны выделяться. Для этого предназначен
элемент strong.
По умолчанию элемент em делает шрифт текста курсивным, а strong — полужир-
ным. Вы можете их комбинировать, если хотите, но обычно достаточно одного.
Пример ниже поясняет, как они используются. На рис. 2.24 показан результат
выполнения этого кода в браузере.
<p>Хотя Джимми обещал <strong>больше никогда</strong> не засовывать руку
в выхлопную трубу, недавно он <em>снова</em> сделал это!</p>
Рис. 2.24. Отображение разных эмоциональных стилей в браузере
Небольшой перерыв
Осталось рассмотреть всего один элемент — элемент br1, который позволяет до-
бавлять разрыв строки. Представьте, что происходит, когда вы передвигаете ка-
ретку на старинной печатной машинке. Элемент br работает так же. Чтобы начать
новый абзац, вы дважды нажимаете Enter для создания необходимого интервала.
В HTML, создавая абзац с помощью тегов <p> и </p>, вы даете браузеру команду
1
http://reference.sitepoint.com/html/br/.
автоматически создать отступы ниже и выше абзаца. Однако, если вы просто хо-
тите начать новую строку, а не новый абзац, вам нужен элемент <br>. Рассмотрим
его работу на таком примере:
<p>Бедный мальчик из города Тарту<br/>
Всем показывал пальцем на карту<br/>
И аскал на билет,<br/>
Сигарет и котлет,<br/>
Xоть и не был он вовсе из Тарту.</p>1
ИЗБЕГАЙТЕ НЕСКОЛЬКИХ РАЗРЫВОВ

Слишком велик соблазн сделать на веб-странице несколько разрывов, чтобы достигнуть со-
ответствующего визуального эффекта. Если вам захочется такое сделать, то помните: есть
более подходящие технологии (позднее мы поговорим о них). Элемент ��
br��
плохо взаимодей-
ствует со стилями, а порой их вовсе невозможно применить. Обычно он используется для
стихов (как показано выше) или для создания новой строки в почтовом адресе. Так что будь-
те осторожны с элементом br.
Запомните, что br — пустой элемент, примерно как meta или img, поэтому он
пишется в HTML так: <br/>.
2.3. Резюме
Ура! Вы неплохо начали. В этой главе вы сделали три связанные друг с другом
страницы из одной. Вы познакомились с большинством основных тегов HTML,
многие из которых применили на новой веб-странице. Но, несмотря на все усердие,
веб-страницы выглядят бледными и скучными. Не расстраивайтесь — это только
вторая глава! Очень скоро вы это исправите. В следующей главе вы все раскрасите,
и ваша страница будет больше похожа на яркий сайт дайверов, чем на скучный
документ Word.
1
Лимерик Ольги Арефьевой: http://www.ark.ru/ins/pocherk/limeriki.html. У Ллойди был
вот такой:
<p>The limerick packs laughs anatomical,<br/>
Into space that is quite economical.<br/>
But the good ones I’ve seen,<br/>
So seldom are clean,<br/>
And the clean ones so seldom are comical.</p>
3 Добавляем
стили
Из глав 1 и 2 вы узнали, как настроить компьютер, чтобы разрабатывать на нем
сайты, и изучили основы создания веб-страниц. Теперь у вас есть чем поразить
друзей и родных! Но вот незадача: посмотрев на творение ваших рук, они почему-
то не выглядят восхищенными. Почему? Что не так?
Действительно, ваш сайт сейчас выглядит не очень впечатляюще, но его внут-
ренняя структура хороша и надежна. Вернемся к автомобильной аналогии: на
данный момент у вас имеется отличное шасси и немного кузовных элементов,
а совсем скоро получится настоящий Maybach. Очень скоро вы покажете знакомым,
во что превратится эта пустая оболочка на колесиках!
В этой главе мы поговорим о том, как сделать сайт ярче, привлекательнее и удоб-
нее. Ваш рабочий инструмент — CSS. Поговорим о его широких возможностях.
3.1. Что такое CSS?

Об этом, собственно, и пойдет речь на протяжении всей главы. Для начала просто
обсудим, что представляют собой CSS и как вы можете их использовать. Как вы
помните, CSS расшифровывается как Cascading Style Sheets — каскадные таблицы
стилей, но для большинства людей это название слишком длинное и они обходят-
ся аббревиатурой. Мы не будем слишком подробно касаться различий в версиях
CSS. Между CSS2 и CSS2.1 есть небольшая разница, но вы можете не беспокоить-
ся о ней, пока не станете суперпрофессионалом в этом вопросе. Большинство при-
меров в книге написаны на CSS2 или CSS2.1. О различиях между версиями мы
немного поговорим в главе 9, рассматривая браузерную поддержку CSS: некоторые
дополнительные функции требуют особого внимания с этой точки зрения.
Итак, CSS — это язык, который позволяет изменять внешний вид элементов на
странице: размер, шрифт и цвет текста; цвет фона; вид и цвет различных границ;
даже расположение элементов на странице. Посмотрим на CSS в действии: начнем
изучение с внутренних стилей.
3.2. Встроенные стили

Если вам приходилось составлять какие-то объявления, флаеры, рассылку и дру-
гие документы, то вы, вероятно, знакомы с программой Microsoft Word (или
аналогичными текстовыми редакторами). Работая с документом, вы, наверное,
94 Глава 3. Добавляем стили
использовали форматирование текста, например, чтобы выделить цветом какие-то

его части. Такого же эффекта можно добиться с помощью встроенных стилей CSS
в HTML. Вот как это выглядит:
<p style="color: red;">Съешь еще этих мягких французских булок да выпей
чаю.</p>
В примере выше мы использовали атрибут style внутри тега <p>. Если к опре-
деленному HTML-элементу стиль применяется таким образом, он называется
встроенным стилем.
ПОГОДИТЕ МИНУТУ — ЧТО ЕЩЕ ЗА ВСТРОЕННЫЕ СТИЛИ?

Если вы сталкивались с CSS раньше, то, наверное, думаете сейчас: «Но ведь это не лучший
способ изменить стиль!» На что я отвечу: «Подождите совсем немного, и очень скоро я все
объясню». Мы просто должны рассмотреть некоторые базовые понятия, прежде чем двигать-
ся дальше.
Атрибут style может содержать одно или несколько объявлений внутри своего
блока. Объявление состоит из двух частей: свойства и его значения. В примере
выше объявлением можно считать текст color: red, где color (цвет) — это свойство,
а red (красный) — его значение.
Если хотите, можете добавить еще одно объявление в код, приведенный выше.
Например, вы можете сделать так, чтобы шрифт текста стал не только красным, но
и полужирным. Свойство, контролирующее этот эффект, называется font-weight
(вес шрифта). У него есть несколько допустимых значений, но в основном вы
будете использовать normal (обычный) или bold (полужирный). Итак, добавьте
следующую разметку для отображения абзаца полужирным шрифтом красного
цвета:
<p style="color: red; font-weight: bold;"> Съешь еще этих мягких французских
булок да выпей чаю </p>
Обратите внимание, что два объявления сейчас разделяются точкой с запятой.
Можно и дальше применять стили таким способом, но все-таки это не лучший
вариант. Есть другие возможности оформления, и очень скоро вы в этом убеди-
тесь.
Добавление встроенных стилей

Откройте в текстовом редакторе файл about.html и добавьте встроенный стиль.
Попробуйте сделать шрифт текста первого абзаца после заголовка «О нас» голубым
и полужирным. После того как закончите, сверьтесь с предыдущим примером.
Ваша разметка должна выглядеть вот так:
<p style="color: blue; font-weight: bold;">Bubble Under — группа
энтузиастов дайвинга, основанная на юго-востоке Великобритании,
которая регулярно встречается для дайвинг-вылазок
в летние месяцы, когда погода хорошая и по воде плывут барашки.
Мы проводим уик-энд, собираясь небольшими группами,
3.2. Встроенные стили 95
чтобы сократить расходы на проживание и проезд,

а также быть уверенными, что каждый получает
Если все хорошо, сохраните файл и откройте его в браузере. Результат должен
быть таким, как на рис. 3.1.
Рис. 3.1. Контент отображается полужирным шрифтом голубого цвета
Элемент span
Как вы убедились, можно легко раскрасить целый абзац. Но, скорее всего, куда чаще
вам понадобится выделять слова внутри абзаца. Пользуйтесь для этого элементом
span (интервал, диапазон). В отличие от р, выделяющего абзац, или blockquote, выде-
ляющего цитату, тег span не выполняет действий. Он не более чем инструмент для
выделения начала и конца какого-либо раздела, к которому вы хотите применить
стиль. Вместо окрашивания всего абзаца в голубой цвет вам может быть нужно вы-
делить всего два первых слова — Bubble Under — голубым цветом и полужирным
шрифтом. Вот как можно использовать для этого тег <span>:
<p><span style="color: blue; font-weight: bold;">BubbleUnder</span> — группа
а также быть уверенными, что каждый получает надежного напарника.</p>
Открыв эту разметку в браузере, например Firefox, вы увидите результат, пока-

занный на рис. 3.2.
Рис. 3.2. Использование элемента span для применения стиля к отдельным словам
Кратко рассмотрим другие способы применения встроенных стилей (это отдель-

ная часть нашего учебного сайта, поэтому не стесняйтесь экспериментировать).
<p style="font-style: italic">Съешь еще этих мягких французских булок
да выпей чаю.</p>
Новый стиль сделал курсивным весь текст абзаца.
А вот другой пример, в котором элемент span использован для выделения не-
скольких отдельных слов:
<p> Съешь еще этих мягких французских булок
<span style="font-style: italic; font-weight: bold">да выпей
чаю</span>.</p>
3.3. Внутренние таблицы стилей

Использование встроенных стилей — простой и быстрый способ применить какие-
либо CSS-эффекты к отдельным элементам документа. Но есть и другие пути
оформления страниц. Куда удобнее один раз описать все стили в одном месте, а не
набирать их каждый раз заново.
Внутренние таблицы стилей — следующий логический шаг. Это фрагмент кода
в начале веб-страницы, где созданы все стили, которые будут на ней применяться.
3.3. Внутренние таблицы стилей 97
Для создания такого фрагмента нужно воспользоваться элементом <style>, который

располагается внутри заголовка <head>:
<head>
<style type="text/css">
p {
font-weight: bold;
}
</style>
</head>
В показанной выше разметке мы превратили встроенный стиль во внутреннюю
таблицу стилей, которая начинается с тега <style type="text/css"> и, конечно, закры-
вается тегом </style>. Объявление самого стиля заключается в пару фигурных
скобок: {}. Тег p, стоящий перед первой фигурной скобкой, указывает браузеру, к чему
именно применяется стиль: в данном случае мы делаем полужирным любой текст,
заключенный внутри тега <p>. Элемент р в таком случае называется селектором.
Это прекрасный инструмент для быстрого и простого изменения вида множе-
ства элементов на вашей странице. Селектор дает браузеру команду применить
к определенным элементам тот стиль, объявление которого заключено в фигурные
скобки ниже. Селектор, фигурные скобки и объявление образуют форму, которая
называется правилом стиля.
В данном случае таблица стилей содержит такое правило: «Стиль для всех
абзацев на этой странице: текст выделяется полужирным шрифтом».
Можете добавить в это правило и больше объявлений. Если вы захотите сделать
свой шрифт полужирным и голубым, то в правило надо добавить color: blue.
p {
font-weight: bold;
color: blue;
}
</style>
Непонятно?
Ладно, ладно, до сих пор, наверное, было слишком много страшных непонятных
слов. Рисунок 3.3 все расставит на свои места.
Рис. 3.3. Структура правила стиля

Почему внутренние таблицы стилей лучше

встроенных стилей
В примере, приведенном на рис. 3.3, текст всех абзацев отображается полужирным
шрифтом голубого цвета. Это избавляет вас от необходимости набирать вручную
код <p style="font-weight: bold; color: blue"> каждый раз, когда вы начинаете
новый абзац — это очевидное достоинство внутренней таблицы стилей.
Если вам захочется изменить цвет шрифта всех абзацев на красный, то нужно
будет лишь изменить значение атрибута color один раз вверху страницы:
p {
font-weight: bold;
color: red;
}
</style>
Здесь мы говорим о вашей продуктивности — она решает все! По этой причине
внутренняя таблица стилей значительно удобнее встроенного стиля. Но что делать,
если ваш сайт содержит много страниц? Если вы хотите вносить изменения сразу
для всего сайта, то внутренние таблицы стилей, используемые таким способом,
не гарантируют идеального решения. Почему? Да потому, что для изменения все-
го сайта целиком вам придется редактировать таблицу стилей на каждой отдельной
странице этого сайта. Так что самое лучшее решение — использование внешних
таблиц стилей.
3.4. Внешние таблицы стилей

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

В прошлом, в недобрые старые времена, как я их называю, приходилось постра-
нично создавать сайты и стилизовать их, используя порой просто жуткие техноло-
гии, о которых я и говорить не хочу. Иногда эти сайты превосходили самые смелые
фантазии веб-мастеров. «Фантастика! — радовались они. — Мой сайт включает
в себя больше 200 страниц! Да я скоро обгоню Microsoft!» А пару месяцев спустя,
когда мастеру приходила идея изменить дизайн сайта, фантастика превращалась
в сущий кошмар: ведь надо было раз за разом внести одни и те же изменения в каж
дую из 200 страниц! А на каждой странице требовалось произвести в среднем
20 различных изменений. Конечно, несколько страниц терялись, пропускались,
3.4. Внешние таблицы стилей 99
план по изменению дизайна напрочь срывался. Сайт становился намного уродли-

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

Подавляющее большинство браузеров, которые используются сегодня, без проблем
поддерживают CSS. Так было не всегда, поэтому многие разработчики с трудом
адаптировались к применению каскадных таблиц стилей. Одни браузеры «пугают-
ся» наиболее продвинутых функций CSS, выдавая на странице непредсказуемые
результаты, а другие просто игнорируют ваши изысканные стили (из двух зол,
конечно, лучше последнее). Но, в принципе, вы можете оформлять свои веб-стра-
ницы с помощью CSS и быть уверенными, что примерно 99,5 % пользователей
видят их так же, как и вы.
CSS дает возможность собрать все правила стиля в одном месте. Когда вам за-
хочется внести изменения в сайт, вы просто сделаете их один раз в одном месте,
и весь ваш сайт поменяется целиком в соответствии с новым стилем.
Создание файла с внешними таблицами стилей

Если вы хотите в полной мере ощутить все прелести использования внешних таб-
лиц стилей, то сначала нужно создать CSS-файл, который будет общим для всех
страниц вашего сайта. Откройте текстовый редактор и введите в новый документ
следующий код:
chapter3\website_files\04_style_sheet_link\style1.css
/*
CSS для сайта Bubble Under
*/
p {
font-weight: bold;
color: blue;
}
Сохраните файл в каталоге, где находятся ваши HTML-файлы, назвав его

style1.css. Сохранять его нужно тем же способом, что и HTML-файлы.
Заметьте, что первые несколько строк CSS-файла не делают ровным счетом
ничего. Как и HTML, CSS допускает использование комментариев. Очевидно,
что теги для HTML-комментариев отличаются от CSS-собратьев, но их функция
аналогична: они позволяют вам делать заметки о работе, которые не влияют на
отображение страницы в браузере. В CSS комментарий начинается с символов
/* и заканчивается */. Браузер игнорирует все, что находится между этими сим-
волами. Выше мы ввели комментарий просто для того, чтобы уточнить предна-
значение файла, указав, что это CSS для сайта Bubble Under. Кроме того, мы
добавили правило: все абзацы отображаются полужирным шрифтом голубого
цвета.
Привязка CSS к веб-странице

Прежде чем CSS-файл окажет какое-то влияние на вашу веб-страницу, следует
привязать таблицу стилей к страницам, стиль которых вы описывали. Для этого
добавьте элемент link1 в заголовок (head) каждой страницы, которая должна быть
оформлена с помощью таблиц стилей. Сайт пока содержит только три страницы,
поэтому сделать это будет легко. Элемент link просто связывает файл со страницей,
на которой появляются элементы. В данном случае связанный файл — это таблица
стилей.
В примере ниже видно, что на веб-странице появилась новая строка:
chapter3\website_files\04_style_sheet_link\index.html (фрагмент)
<head>
<title>Bubble Under — Дайвинг-клуб на юго-западе Великобритании</title>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
Поговорим о том, что значит эта разметка.

Атрибут href сообщает браузеру, где находится файл с таблицами стиля
(style1.css). Таким же образом этот атрибут используется для указания пути, куда
ведет ссылка (например, <a href="home.htm">Домой</a>).
Элементы rel="stylesheet" и type="text/css" сообщают браузеру, с каким типом
файла нужно связаться и как браузер должен обработать контент. Выполняя при-
вязку, всегда указывайте эти важные элементы.
ПОМНИТЕ О ПУСТЫХ ЭЛЕМЕНТАХ!

Элемент link — еще один элемент, который может быть пустым (мы обсуждали такие в гла-
ве 2) — для него открывающий и закрывающий теги не различаются. Согласно правилам
синтаксиса XHTML link заканчивается пробелом, обратным слешем и закрывающей угловой
скобкой.
Теперь, когда вы знаете, как привязать файл CSS к веб-страницам, попробуйте

привязать его к учебному сайту.
Откройте каждую из ваших веб-страниц — index.html, about.html и contact.
html — в текстовом редакторе. Добавьте следующую строку перед закрывающим
тегом </head> в каждом файле:
Убедитесь, что каждая страница сохранена. Затем попробуйте открыть их в брау-

зере.
Все ваши абзацы должны отобразиться полужирным шрифтом голубого цве-
та. Если это так, поздравляю — вам удалось привязать одну таблицу стилей к трем
разным страницам. Если вы измените цвет в CSS-файле, например, с голубого
1
http://reference.sitepoint.com/html/link/.
3.5. Начинаем строить таблицу стилей 101
на красный, то, открыв страницы заново, увидите, что они снова изменились.
Попробуйте!
Итак, использование голубого полужирного шрифта — хороший способ убе-
диться, что таблицы стилей успешно привязаны, но это не тот дизайнерский
эффект, которым можно гордиться. Удалите правило р (оставив комментарий) из
CSS-файла, и мы начнем делать настоящую таблицу стилей.
3.5. Начинаем строить таблицу стилей

Таблица, по сути, готова. Она сохранена в нужном месте, а ваши веб-страницы правиль-
но с нею связаны. Сейчас настало время поместить в таблицу описание стилей.
При изменении стиля сайта в первую очередь обычно меняют тип шрифта.
В Windows большинство браузеров по умолчанию используют Times New Roman,
как вы видели на приведенных ранее скриншотах. Шрифт очень легко изменить
с помощью свойства font-family.
Лучше всего применить новый шрифт ко всему содержимому раздела body,
поэтому сделаем так.
chapter3\website_files\05_body_verdana\style1.css
/*
*/
body {
font-family: Verdana;
}
Здесь выбран шрифт Verdana. Он применяется к элементу body, так как body
содержит все элементы, отображаемые на странице. Получается, что любой
текст, находящийся внутри тега body, будет выводиться этим шрифтом (разве что
мы установим для отдельных элементов особый шрифт, но об этом поговорим
позже).
Итак, у нас теперь Verdana! Но что, если у пользователя, который захочет по-
смотреть на ваш сайт, на компьютере не установлен этот шрифт? Если кратко —
браузер постарается отобразить страницу наилучшим образом, но, конечно, не
способен догадаться, что получится. Но, к счастью, свойство font-familу может
иметь несколько значений. Можно указать несколько шрифтов, и браузер отобра-
зит первый из имеющихся на компьютере. Поэтому запишем следующее:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Переведу: «Стиль всего содержимого body на моей веб-странице: текст отобра-
жается шрифтом Verdana. Если его нет, используй Helvetica. А если и его нет,
то Arial. Если не установлен ни один из этих шрифтов, то используй любой из до
ступных стилей семейства sans-serif».
Этот прием называется созданием стека шрифтов. Позднее вы можете иссле-

довать его возможности. Если же не хотите ждать, прочитайте статью Аарона
Будмана (Aaron Boodman) 8 DefinitiveWeb Font Stacks1.
В данном случае для сайта о дайвинге мы используем три вида шрифтов (и пол-
ностью семейство sans-serif). Проверим работу этой разметки на практике.
1. Введите приведенный выше код в файл style1.css.
2. Сохраните файл, а затем откройте домашнюю страницу index.html в браузере.
Если все идет по плану, то ваша веб-страница (вернее, все три) не должна отли-
чаться от того, что получилось перед этим (рис. 3.4).
Рис. 3.4. Эффект от изменения шрифта в таблицах стиля
СЕМЕЙСТВО ШРИФТОВ SANS-SERIF:

ЛУЧШЕЕ ДЛЯ ОТОБРАЖЕНИЯ НА ЭКРАНЕ
Шрифты serif (с засечками) — это шрифты с маленькими черточками на кончиках каждой бук-
вы (рис. 3.5). Эти черточки называются засечками (serif). Такие шрифты лучше всего подходят
для печати на бумаге, так как придают форму словам, упрощая их зрительное восприятие.
Однако на экране, особенно небольшом, шрифты с засечками могут выглядеть немного не-
ряшливо, так как большинство экранов теряют пикселы, которые должны отображать эти
черточки. По этой причине на большинстве сайтов применяются шрифты семейства sans-serif
(что переводится с французского как «без засечек»), особенно если необходимо использовать
шрифт маленького размера.
1
Вопреки обыкновению, Йен не привел ссылку: http://www.sitepoint.com/eight-definitive-
font-stacks. Статья, конечно, не переводилась на русский язык, но смысл будет понятен
даже тем, кто не знает английского. — Примеч. пер.
Помните: чтобы сослаться на семейство шрифтов без засечек в CSS, надо указать
следующие два слова: sans-serif.
Рис. 3.5. Засечки в шрифте Georgia
ИССЛЕДОВАНИЕ МИРА ШРИФТОВ

Возможно, вы сейчас читаете и думаете: «Все это очень хорошо, но я-то люблю совсем дру-
гие, крутые и стильные шрифты». Конечно, есть способы отображения в браузерах нестан-
дартных шрифтов, но это сложный процесс в связи с тем, что сами браузеры по-разному их
поддерживают. Есть большое количество сервисов в Интернете, которые помогут вам упро-
стить этот процесс. Более подробно мы поговорим о них в главе 9.
Оформление заголовков
Первый элемент, который мы оформим, — заголовок первого уровня, обозначен-
ный элементами h1. Посмотрим, что можно сделать с заголовками в таблице CSS.
Добавьте в файл style1.css следующий код:
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
Сохраните CSS-файл и обновите веб-страницу в браузере. Видите, что измени-

лось? Все заголовки первого уровня сейчас выводятся шрифтом Trebuchet MS, а все
остальное — шрифтом Verdana.
Мы выбрали другой шрифт из семейства sans-serif, но он заметно отличается от
шрифта абзацев, как видно на рис. 3.6.
НЕКОТОРЫЕ НАЗВАНИЯ ШРИФТОВ НУЖНО БРАТЬ В КАВЫЧКИ

В примере выше название Trebushet MS заключено в кавычки. Так нужно поступать со всеми
названиями шрифтов, состоящими из нескольких слов, например Courier New или Times New
Roman. А название из одного слова, например Arial или Verdana, заключать в кавычки не обя-
зательно.
Просмотрите сайт целиком, и вы убедитесь, что изменения применились ко всем

веб-страницам.
Рис. 3.6. Заголовок первого уровня отображается одним шрифтом

семейства sans-serif (Trebushet MS), а абзацы — другим (Verdana)
НИЧЕГО НЕ МЕНЯЕТСЯ! ЧТО СЛУЧИЛОСЬ?

Если вы обновили страницу в браузере и ничего не изменилось, то убедитесь, что вы сохра-
нили изменения, которые внесли в CSS-файл. Если это так, удостоверьтесь, что вы ввели
CSS-код точно так, как написано в книге. Если все сделано верно, но изменения не видны, то
проблема в кэше вашего браузера.
Браузеры сохраняют некоторое содержимое в кэш. Это означает, что, впервые отобразив
какую-то страницу, браузер сохраняет ее на жесткий диск. Когда вы снова посетите эту стра-
ницу, браузер загрузит ее элементы с жесткого диска вместо того, чтобы снова скачивать их
из Интернета. Например, вы ввели какой-то URL-адрес, браузер показал страницу — или
отдельные ее элементы, например изображения, — и сохранил в кэш. Это ускоряет процесс
отображения страниц, которые загружаются заново. К сожалению, вскоре данные из кэша
становятся неактуальными, и тогда страница может не отображать новейшие данные.
Наиболее часто такое происходит с изображениями, но может случиться и с CSS-файлом.
Но не все так страшно: кэшем браузера управляете вы, поэтому можно просто изменить
предельный размер кэша — место на жестком диске, которое занимает кэш (как только оно
полностью заполнено, старые данные заменяются новыми). Вы можете найти это в настрой-
ках браузера: функции обычно называются Кэш или Временные интернет-файлы. Однако
большинство пользователей предпочитают не менять настройки по умолчанию.
Если вы точно уверены, что правильно изменили свой CSS-файл и сохранили его, то, возмож-
но, нужно перезагрузить в браузере сам CSS-файл. Чтобы заставить браузер поменять версию
этого файла на более новую, просто нажмите кнопку Обновить (или Перезагрузить), удержи-
вая нажатой клавишу Shift.
Расширим стилизацию
Внесем изменения в представление файла — добавим больше стиля содержимому
основной части (body) и изменим отображение навигации. Введите приведенный
ниже код в файл style1.css (или скопируйте его из архива кода).
chapter3\website_files\07_blue_background\style1.css
/*
*/
body {
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
li {
font-size: small;
}
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
p {
font-size: small;
color: navy;
}
Сохраните CSS-файл, а затем нажмите кнопку Обновить (или Перезагрузить) в брау-
зере. Если все хорошо, то ваша страница должна выглядеть, как показано на рис. 3.7.
Рис. 3.7. Применение разных эффектов изменения стиля шрифта в CSS

Попробуем новый стиль

Выше было приведено несколько примеров объявлений стиля. Рассмотрим их по
порядку.
chapter3\website_files\07_blue_background\style1.css (фрагмент)
body {
line-height: 125%;
padding: 15px;
}
Свойство background-color (цвет фона) будет применено к большинству элемен-

тов на странице. Его можно задать разными способами. Один из них — указать
названия цветов1: navy (темно-синий), blue (голубой), red (красный), yellow (желтый)
и т. д. Это очень легко и запомнить, и написать, но лишь небольшая часть цветов
имеет такого рода бытовые названия. Другой способ указания цвета — по шест
надцатеричной системе кодов цвета. Звучит жутко. Да и выглядит тоже, посмот-
рите хотя бы на это:
Невозможно догадаться, что это значит. Но на самом деле все просто. Эта абра-
кадабра — просто код светло-голубого цвета. Однако нет необходимости гадать,
что значит этот код. К счастью, в Интернете есть множество сервисов, которые
помогут вам выбрать цвет из палитры и затем дадут его код. Поищите эти сервисы,
и вскоре вы сможете легко подбирать шестнадцатеричные коды для создания иде-
альных цветовых схем2.
ШЕСТНАДЦАТЕРИЧНАЯ СИСТЕМА
Итак, цвета в HTML могут быть записаны в шестнадцатеричной системе цветовых кодов.
Шестнадцатеричная система — это система счисления, где цифр 16, а не 10. Вот как в ней
выглядит цифровой ряд:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12 …
Достигнув 9, мы проходим буквенный ряд: A, B, C, D, E, F, прежде чем перейти к 10. Это дает
нам шесть дополнительных цифр, которые можно использовать для записи чисел. Звучит
страшновато? Да, но ничего: в шестнадцатеричной системе компьютеры считают куда лучше
человека!
Запомните главное — любые числа, которые вы хорошо знаете в десятичной системе, напри-
мер 2748, 15 000 000 и 42, могут быть представлены в шестнадцатеричной. Убедитесь в этом
(табл. 3.1)!
1
http://reference.sitepoint.com/html/color-names.
2
Хороший набор ссылок на такие инструменты находится по адресу http://www.clagnut.
com/blog/260/.
Таблица 3.1. Преобразование чисел из десятичной системы в шестнадцатеричную

Десятичная Шестнадцатеричная
7 7
15 F
2748 ABC
15 000 000 E4E1C0
42 2A
Когда цвет записан в шестнадцатеричной системе, как, например, ff0000, фактически это
число означает три величины, соединенные вместе. Эти величины — количество красного
цвета (ff), зеленого (первые два нуля) и голубого (вторые два нуля), которые, соединяясь
вместе, образуют определенный цвет. Эти три основных цвета комбинируются для отобра-
жения на экране абсолютно любого цвета, почти как на экране телевизора1. В нашем приме-
ре ff — это максимальная величина красного цвета, а количество зеленого и синего равны
нулю, так что легко запомнить — код #ff0000 дает красный цвет.
Существует очень интересное свойство line-height. Увеличивая его значения

(в примере указано 125 %), вы можете расширить пространство между строками
(интерлиньяж), за счет чего текст будет лучше восприниматься. Попробуйте
поэкспериментировать со значениями данного свойства, сохраняя CSS-файл,
и посмотрите, как это влияет на отображение текста.
Свойство padding используется для расширения пространства между внешним
краем элемента и содержанием внутри его. Поскольку мы говорим об элементе body,
можно предположить, что речь идет о верхнем, нижнем и боковых полях окна
браузера — той части, где отображается веб-страница, исключая панели инстру-
ментов браузера, меню и полосы прокрутки. Более подробно отступы мы рассмот-
рим в главе 4.
Значение, которое мы устанавливаем для этого свойства, определяет, какое про-
странство останется между внешними краями окна и контентом. В данном случае
мы задали 15 px, то есть 15 пикселов. Я уже упоминал пикселы, говоря о размере
изображений, но что оно значит? Если попросту, то пиксел — это одна из тех точек,
что образуют изображение, которое вы видите на экране компьютера. Экран состоит
из сотен тысяч таких точек, так что 15-пиксельная граница не займет много места!
Рассмотрим стиль абзацев текста.
p {
font-size: small;
color: navy;
}
1
Существует ошибочное мнение, что основные цвета — это красный, зеленый и желтый. Это
не так! Ознакомьтесь со статьей в «Википедии»: http://en.wikipedia.org/wiki/Primary_color,
где описаны аддитивные и субтрактивные методы синтеза цветов.
Вы уже видели, что можно изменить цвет текста в абзаце. Сейчас установлен
синий цвет.
Посмотрим, что изменилось в стиле отображения элементов списка.
li {
font-size: small;
}
Благодаря свойству font-size размер шрифта каждого пункта списка незна-

чительно изменился. Здесь мы решили изменить его с помощью ключевого
слова small, но точно так же могли использовать проценты или пикселы. Как
видите, есть много способов изменить вид ваших страниц с помощью CSS!
Значения ключевых слов варьируются от xx-small до xx-large , с их помощью
удобно быстро форматировать текст. К сожалению, интерпретация этих клю-
чевых слов немного различается в разных браузерах, нельзя, например, гаранти-
ровать, что шрифт xx-large в разных браузерах будет одного размера. Но если вас
не заботит точный размер шрифта в пикселах, то эти ключевые слова вполне
подойдут1.
Мы также сделали новое правило для элемента h1 (главный заголовок веб-стра-
ницы, который отображается как название сайта) и опять же установили свойство
font-size для определения размеров текста (очень большой).
h1 {
font-size: x-large;
}
Элемент h2 теперь тоже немного преобразился.

h2 {
color: blue;
font-size: medium;
}
Браузеры обычно отображают заголовки полужирным шрифтом, но можно

задать нормальное начертание, установив для свойства font-weight значение
normal.
1
По многим причинам, обсуждать которые здесь незачем, определение размеров текста
в CSS вызывает оживленные споры. Начав знакомиться с CSS, вы наверняка захотите
больше узнать о разных техниках установления размеров текста. Начать можно с фору-
ма CSS на сайте SitePoint: http://www.sitepoint.com/launch/cssforum/.
Начальный набор инструментов

для оформления
Мы рассмотрели несколько примеров стиля, которые можно применить к веб-
страницам с помощью CSS, но получилось немного сумбурно. А ведь возможно-
стей намного больше — слишком много, чтобы привести здесь их все! И все-таки
попробую перечислить основные свойства и их возможные значения, с кото-
рыми вы можете экспериментировать (табл. 3.2). Делайте все, что вам угодно.
И помните, что этот список отнюдь не исчерпывающий, мы его значительно рас-
ширим в дальнейшем!1
Таблица 3.2. Основные свойства CSS

Свойство Описание
color и background-color Значения этих свойств могут быть ключевыми словами (как red, blue,
green) или кодами цветов в шестнадцатеричной системе (как #ff0000)
font-family Значение этого свойства — список шрифтов, которые вы выбрали,
в порядке предпочтения. Выбирайте распространенные шрифты, кото-
рые, скорее всего, установлены на компьютерах большинства поль-
зователей (например, Arial, Verdana). Список должен заканчиваться
названием семейства шрифтов, например serif или sans-serif, которое
опознает любой браузер с поддержкой CSS
font-size Значением этого свойства могут быть:
ключевые слова размера шрифтов (по возрастанию размера):
xx-small, x-small, small, medium, large, x-large, xx-large;
относительные размеры текста: проценты (например, 140 %); едини-
цы em (например, 1.2 em; 1 em — высота заглавной буквы исходного
текста);
абсолютные единицы: пикселы (например, 20px); типографские точки
(например, 12pt).
Фиксированные размеры шрифтов могут вызывать проблемы.
Например, они не масштабируются в старых браузерах вроде Internet
Explorer 6. Если вы установили размер шрифта, скажем, 10 пикселов,
то, даже когда пользователь поставит максимальный размер, это
не даст ровным счетом никакого эффекта. К счастью, в новых версиях
Internet Explorer эта проблема устранена. В большинстве браузе-
ров размер шрифта увеличивается, если пользователь увеличивает
масштаб отображения страницы. Но все же не забывайте об этой
мелочи на тот случай, если придется делать сайт для кого-то, кто еще
пользуется Internet Explorer 61
font-weight bold или normal
font-style normal или italic
text-decoration none, underline, overline, line-through
1
Вы точно услышите или уже слышали от веб-разработчиков леденящие душу истории
о поддержке этого старого, проблемного и неповоротливого браузера. Подтверждаю:
я тоже сталкивался с этим, у меня есть доказательства!
НЕ ЗАБЫВАЙТЕ О РЕЗЕРВНЫХ КОПИЯХ

Перед тем как начать экспериментировать с CSS, сделайте резервную копию CSS-файла
на тот случай, если запутаетесь и не будете знать, как все вернуть обратно. Помните, что
вы всегда можете загрузить все примеры из архива кода, если значительно измените свой
CSS-файл. Если такое произошло, не беспокойтесь, это нормальная часть учебного процес-
са. Будьте уверены — ни одно живое существо не пострадает в процессе эксперимен-
тов!
Резюме: история изменений стиля

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

Чтобы выделить на странице отдельные слова, выполните следующее.
1. Откройте файл about.html в текстовом редакторе.
2. Найдите абзац о встречах в местном пабе и добавьте элемент em, как показано
здесь:
chapter3\website_files\08_emphasis_italics\about.html (фрагмент)
< p>Когда мы не занимаемся дайвингом, мы часто встречаемся в местных пабах,
чтобы поболтать о грядущих приключениях (на самом деле это <em>только
повод</em>, да?).</p>
3. Сохраните страницу, а затем откройте ее в браузере. Предполагаемый результат

показан на рис. 3.8. Как вы можете видеть, по умолчанию em отображается кур-
сивом. Предлагаю использовать CSS для изменения этого стиля.
Откройте style1.css (если вы еще не открыли его для редактирования) и до-
бавьте в самом конце следующее правило:
chapter3\website_files\09_emphasis_capitals\style1.css (фрагмент)
em {
font-style: normal;
text-transform: uppercase;
}
Сохраните CSS-файл и обновите страницу «О нас» в браузере. Ваша страница

должна выглядеть так, как показано на рис. 3.9.
Сейчас, если вы добавите на какую-нибудь страницу вашего сайта элемент em
(конечно, страница должна быть связана с файлом style1.css), текст в тегах <em>
будет отображаться прописными буквами, но не курсивом. Здесь, однако, возни-
кает интересный вопрос: а зачем нужно менять заданный по умолчанию стиль?
Рис. 3.8. Элемент em по умолчанию задает курсивный шрифт
Рис. 3.9. Содержимое элемента em выводится в верхнем регистре
Наверное, стили по умолчанию, которые используются в браузерах, тщательно

выбирались. Можем ли мы быть уверены, что их нужно менять? Курсив ведь под-
ходит для обозначения логического ударения? Вполне. Так что занимайтесь таки-
ми вещами с осторожностью. Возможность изменения стиля по умолчанию не зна-
чит, что это всегда нужно делать.
Впрочем, пойдем на компромисс. Оставим em в виде курсива, но еще и пропис-

ными буквами. Нужно просто убрать объявление font-style, и элемент em вернется
к своему обычному курсиву, как показано на рис. 3.10.
chapter3\website_files\10_emphasis_capitals_italics\style1.css (фрагмент)
em {
text-transform: uppercase;
}
Рис. 3.10. Содержимое элемента em отображается курсивом в верхнем регистре
Курсив или em? Полужирный или strong?

Вы можете задать вполне справедливый вопрос: если нужен курсив, почему не ис-
пользовать просто курсив (i) вместо em? Вообще-то элемент i и введен специально
для этой цели, но для новичка, возможно, это неочевидно. Почему? Пометка текста
курсивом (i) ничего не говорит о том, для чего это сделано и что значит: это просто
способ отображения текста на экране, а не эмоционального выделения текста. А ис-
пользование em, согласно документации, «обозначает фрагмент текста как выделен-
ный интонацией, иной, чем в остальной речи». Так что применяйте теги <em></em>
для обозначения эмоционального выделения, а <i></i> — для технических терми-
нов, идиом или, например, для названия лодки:
<p>Мы едем веселиться на <i>QE2</i>, ура!</p>
<p>Спорим, что был некий <i>je ne sais quoi</i>, а?</p>
Аналогично элемент b (bold — «полужирный»), другой старый инструмент

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

пользуйтесь элементами h (h1, h2 и т. д.), а затем оформляйте их по своему выбору
с помощью CSS. Очень распространенная ошибка — выделять полужирным обыч-
ный абзац, чтобы казалось, будто это заголовок, — не делайте так, пожалуйста.
Используйте элемент bold лишь для того, чтобы выделить слово или фразу из ок-
ружающего их текста, например:
<p>На каждой коробке написали <b>НЕ КАНТОВАТЬ!</b> и приготовились грузить
на корабль.</p>
Зачем знать различия между i/em и b/strong? Может показаться, что не так уж
важно, как именно вы добьетесь отображения текста в браузере курсивом. Но пред-
ставьте, что вы плохо видите и пользуетесь специальной программой, которая
читает для вас текст с веб-страниц вместо того, чтобы выводить его на экране.
Такая программа (она называется «экранный диктор») должна читать текст,
помеченный элементом em, используя эмоциональное выделение, а текст, поме-
ченный strong, — с усилением голоса (хотя это может незначительно варьиро-
ваться в зависимости от вида программы). И что будет, если текст выделен про-
сто i или b? Поскольку никакого эмоционального значения эти элементы не несут,
их содержимое будет прочитано без каких-либо особенностей в интонации, а это
может привести к тому, что потеряются оттенки смысла, который вы пытались
донести.
Поисковая система (например, Google или Yahoo!) может давать больший
приоритет значениям, соответствующим запросу пользователя и заключенным
в эмоциональные элементы, чем просто выделенным полужирным или курсивным
шрифтом (хотя кто знает, как на самом деле работают эти поисковые системы, —
компании не выдают своих секретов!).
Еще один элемент, который вы можете увидеть у других, но сами никогда не
должны использовать, — это u. Если вы запишете какой-то текст в тегах <u></u>, то
он отобразится подчеркнутым, но вы добьетесь только того, что собьете пользова-
телей с толку. В Интернете подчеркнутый текст практически всегда означает, что
это гиперссылка — но элемент u подчеркивает текст, и только!
Рассмотрим элементы в контексте

У меня есть для вас загадка. Что значит английское слово pen? Человек, хорошо
знающий язык, первым делом спросит: в каком контексте? В предложении про
офис или учебу в школе это слово, как вы знаете из школьных уроков английского,
означает шариковую ручку. А если мы говорим о деревне и приключениях на све-
жем воздухе, то, вероятнее всего, речь идет о небольшом загоне для скота или пти-
цы. Вот так-то!
Контекст, конечно, очень сильно влияет, и мы можем использовать это в CSS
в своих целях, выделяя элемент различными способами в зависимости от его по-
ложения в тексте. Запомните это, а сейчас предлагаю вернуться к сайту и изучить
кое-что еще. Ну-ка, все внимание сюда!
Мы оформляли абзацы: они отображаются шрифтами семейства sans-serif

(в частности, Verdana) синего цвета, как и практически все остальное на стра-
нице:
chapter3\website_files\10_emphasis_capitals_italics\style1.css (фрагмент)
body {
}
p {
font-size: small;
color: navy;
}
Все это очень хорошо, но у нас есть один абзац, который отличается от остальных.
Вы не догадываетесь, что это? Это наш первый абзац — слоган. Вот HTML-размет-
ка этого раздела:
<div id="tagline">
</div>
Он заметно отличается от остального текста, поэтому логично было бы выбрать

для этого абзаца другой стиль. Слоган заключен в специальный div-элемент —
с id-атрибутом tagline, и это нам поможет. Имея специальный элемент div для
объекта на странице, можно установить особый стиль только для него.
1. Откройте CSS-файл для редактирования и добавьте следующее правило после
первого абзаца.
chapter3\website_files\11_styled_tagline\style1.css (фрагмент)
# tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
}
2. Сохраните файл и обновите страницу «О нас» (или любую из трех — это не име-
ет значения) в браузере. Ваша страница должна выглядеть, как показано на
рис. 3.11.
Как это получилось? Наверное, я должен объяснить. Это CSS-правило означа-
ет: «Для всех абзацев, заключенных внутри элемента с идентификатором (атрибу-
том id) tagline, установить курсивное начертание и шрифт Georgia, Times или
любой другой из семейства serif, если нет этих».
КАК ПРИДУМАТЬ ХОРОШИЙ ID?

Символ # в CSS означает обращение к элементу со специфическим id-атрибутом — в данном
случае tagline. В следующих главах мы подробнее поговорим о выборе идентификаторов
и управлении ими.
Рис. 3.11. Слоган выделен курсивом
Контекстные селекторы
#tagline — это контекстный селектор. Рассмотрим еще несколько примеров.
#navigation a {
text-decoration: none;
}
Перевод: для любой ссылки, находящейся внутри блока навигации — элемента
с идентификатором navigation, — применить нормальное начертание шрифта,
то есть убрать подчеркивание (другие ссылки на этой странице останутся под-
черкнутыми).
#footer p {
line-height: 150%;
}
Перевод: установить отступ между строками в абзацах внутри элементов
с id-атрибутом footer в размере 150 %. Это изменяет параметр 100 %, выстав-
ляемый браузером по умолчанию, или иные величины отступа, которые могли
быть применены ранее, например, для всего содержимого body.
h1 b {
color: red;
}
Перевод: для любого текста внутри заголовка первого уровня, который помечен
как b (то есть должен выделяться полужирным шрифтом), установить красный
цвет шрифта (элементы, помеченные как strong, не будут отображаться красным
цветом).
h2 a {
}
Перевод: не подчеркивать ссылки, находящиеся внутри заголовков второго
уровня (по умолчанию любые ссылки подчеркиваются, так что остальные ссыл-
ки на этой странице будут отображаться с подчеркиванием).
Объединение стилей
Если вы хотите применить один и тот же стиль к нескольким разным элементам
веб-страницы, то нет необходимости повторяться. Допустим, вам нужно устано-
вить для заголовков с первого по третий уровень желтый цвет шрифта и черный
цвет фона. Вы написали что-то вроде этого:
h1 {
color: yellow;
background-color: black;
}
h2 {
color: yellow;
}
h3 {
color: yellow;
}
Это слишком громоздко, пожалуй. Да и стилей на странице многовато, что тя-
жело для восприятия. Можно ли избавиться от части работы? Да, можно! Вот
так:
h1, h2, h3 {
color: yellow;
}
Перевод: если элемент — заголовок первого, второго или третьего уровня, то
отображать его нужно шрифтом желтого цвета на черном фоне.
ЗАПЯТАЯ ЗНАЧИТ «ИЛИ»

Запятая в селекторах CSS аналогична логическому оператору ИЛИ.
Попробуйте сгруппировать некоторые стили в учебном сайте. Пока у вас нет

заголовков третьего уровня, но сейчас они появятся.
1. Отредактируйте свой CSS-файл следующим образом.
chapter3\website_files\12_grouped_headings\style1.css (фрагмент)
h 1, h2, h3 {
background-color: navy;
color: white;
}
2. Сохраните файл и в браузере обновите страницу «О нас». Вы должны увидеть
страницу, показанную на рис. 3.12.
Рис. 3.12. Отображение заголовков в новом стиле
Этот CSS-код и правда убивает нескольких зайцев одним выстрелом (образно

выражаясь, конечно же; как я и обещал, ни одно животное от наших инструментов
не пострадает). Кроме того, что вы управляете стилем нескольких страниц из од-
ного файла, вы еще можете управлять стилем нескольких элементов одной коман-
дой. Ваши CSS-стили становятся проще и организованнее, а сайт вследствие этого
быстрее загружается.
ИМЕНА ФАЙЛОВ ДЛЯ ТАБЛИЦ СТИЛЕЙ

Вы уже довольно долго работаете с файлом style1.css и, возможно, задумывались, почему
я выбрал для него именно такое название. Оно не случайно. Позднее вы можете захотеть
добавить на сайт другой стиль, и нумерация — самый простой способ поддерживать порядок
в последовательности стилей, которые вы можете применить к сайту.
Казалось бы, почему не назвать стиль, например, marine.css1? В конце концов, на странице
используются синие цвета, перекликающиеся с морскими пейзажами, и вообще… Хороший
вопрос, но важно запомнить, что вы всегда можете изменить стиль, и в какой-то момент со-
держимое CSS-файла вполне может перестать соответствовать его названию. Например, вы
можете отредактировать файл marine.css так, что все цвета на вашем сайте изменятся на
коричневые оттенки. А ведь возможность изменить весь дизайн сайта в одном файле — одна
из важнейших особенностей CSS! С новым дизайном внешний вид вашего сайта будет ассо-
циироваться с пустыней, песочными пляжами, но для ваших 200 или больше страниц табли-
ца стилей все еще будет называться marine.css. Нехорошо. Вот почему я предпочитаю выби-
рать для CSS-файлов абстрактные имена, и вам рекомендую поступать так же.
Тем временем в вашем CSS-файле получилось нечто интересное: кажется, у вас

конфликт правил. Как это произошло?
1
Marine — «морской». На всякий случай напомню: для названий файлов не надо исполь-
зовать кириллицу или транслитерацию (наподобие morskoi.css), так как это дурной
тон. — Примеч. пер.
Какое правило победит?

Добавив групповое объявление стиля заголовков, вы изменили несколько стилей,
объявленных перед этим. Посмотрите: для заголовков второго уровня установлены
правила, предписывающие им отображаться и в синем и в белом цветах.
chapter3\website_files\12_grouped_headings\style1.css (фрагмент)
h2 {
color: blue;
font-size: medium;
}
h1, h2, h3 {
color: white;
}
Поскольку объявление, устанавливающее белый цвет, идет ниже, то оно пере-
определяет более раннее указание о синем цвете. Так что, даже если вы сто раз
указали, что заголовок второго уровня (h2) должен отображаться синим шрифтом,
это не имеет значения, — если последнее объявление говорит о белом, то заголовок
будет белым.
Оценим прогресс
Время для еще одной передышки. Итак, вы изучили еще несколько стилей, которые
можно применить в CSS, увидели, как можно оформлять элементы в зависимости
от контекста, и, наконец, узнали, как группировать элементы, подлежащие одина-
ковому оформлению. Но есть одна вещь, которой мы лишь слегка коснулись, а ведь
ее роль в Интернете невозможно переоценить — она представляет собой просто
фундамент всех функций Сети. Я говорю о ссылках.
Оформление ссылок
Ссылки в Интернете — везде! Они — основа всего, что мы видим в Сети. Сейчас
преобладают замысловато разукрашенные веб-страницы, снабженные огромным
количеством изображений и разных функций. Но, может быть, кто-то еще помнит,
что совсем недавно весь Интернет был чуть более чем собранием документов, свя-
занных друг с другом гиперссылками. Вернитесь к древним браузерам, и вы уви-
дите — ссылки в них подчеркивались, что сохранилось и в наши дни. По умолчанию
большинство браузеров имеют следующую цветовую схему для ссылок:
голубой цвет — ссылка, которую еще не открывали (unvisited);
фиолетовый цвет — ссылка на страницу, которую вы уже посещали (visited);
красный цвет — активная ссылка (active), на которой вы в данный момент щел-
каете кнопкой мыши; на мгновение можно увидеть, как ссылка вспыхивает
красным цветом.
Эта цветовая схема не всем по вкусу, но такова реальность на данный момент.

Или, точнее, она была таковой, пока нельзя было использовать CSS для изменения
этих цветов.
По сути, CSS-правило для ссылок может выглядеть примерно так:
a {
font-weight: bold;
color: black;
}
Сейчас вместо шрифта голубого цвета нормального начертания ваши ссылки
приобретут полужирный шрифт черного цвета. Попробуйте добавить это правило
в файл style1.css, сохраните его и посмотрите, как это повлияет на отображение
веб-страницы (рис. 3.13).
Рис. 3.13. Оформление всех ссылок полужирным черным шрифтом
Статус ссылок. Как я уже говорил, есть несколько типов ссылок (непосещенные,
посещенные, активные), отображаемых на веб-странице. Есть еще один статус,
о котором я не говорил, но с которым вы, вероятно, знакомы: статус наведения
(hover), возникающий в тот момент, когда вы наводите на ссылку указатель мыши.
В CSS можно изменить стиль всех этих статусов ссылки, используя так называемые
псевдоклассы. Звучит устрашающе, но на самом деле все очень просто. Это лишь
внутренний класс, который браузер автоматически применяет к ссылке, когда она
находится в том или ином состоянии. Вот как выглядит CSS-код, который задает
цветовую и стилевую схему для разных статусов ссылки:
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
color: white;
}
a:active {
color: aqua;
}
Различные состояния обрабатываются в CSS с помощью селектора. Для этого
нужно добавить двоеточие (:) и псевдокласс: link (ссылка), visited (посещенная),
hover (наведение), active (момент щелчка кнопкой мыши на ссылке). Добавление
псевдокласса в вашу таблицу стилей означает, что браузер применит установленное
правило, когда элемент будет находиться в состоянии, указанном в псевдоклассе.
ДЕРЖИТЕ СОСТОЯНИЯ ВАШИХ ССЫЛОК В ПОРЯДКЕ

Вообще-то для браузеров не имеет значения порядок, в котором вы указываете правила в CSS-
файле, но ссылки всегда должны перечисляться, как показано выше: link, visited, hover, active.
Попробуйте запомнить аббревиатуру LVHA. Если вы не склонны к романтике, можете упро-
стить себе процедуру запоминания с помощью такого выражения: «Love? Ha!1» За эту чудес-
ную фразу мы должны сказать спасибо Джеффри Зельдману (Jeffrey Zeldman)2.
Измените стиль отображения ссылок в различных состояниях на учебном сайте.

1. Откройте CSS-файл и добавьте в конце указанный выше код.
2. Сохраните CSS-файл.
3. Откройте любую из трех веб-страниц в браузере (или нажмите кнопку Обновить),
чтобы увидеть, как изменился вид ссылок.
Рисунок 3.14 показывает три статуса ссылки: Свяжитесь с нами — не посещена,
О нас — посещена, она отображается светло-серым цветом, а на ссылку Главная
страница наведен указатель мыши.
Рис. 3.14. Оформление трех разных статусов ссылки с использованием CSS
1
С англ. — «Любовь? Ха!» — Примеч. пер.
2
Designing With Web Standards (Berkeley: New Riders, 2003).
Не бойтесь экспериментировать с CSS-файлом. Используйте разные цвета

отображения элементов и их фона, а также другие способы форматирования текста,
которые были описаны в табл. 3.1.
ОЧИЩАЙТЕ ИСТОРИЮ
Ваш браузер автоматически сохраняет часть истории ваших переходов между страницами
в Интернете и использует эту информацию, чтобы решить, посещалась ссылка либо еще нет
(и, в зависимости от этого, как ее нужно отобразить). Если вы делаете сайт и проверяете
ссылки, то должны посмотреть, как выглядит непосещенная ссылка, но из-за наличия истории
они все будут казаться посещенными! И уж, конечно, это произойдет с нашим трехстраничным
учебным сайтом — скорее всего, все ссылки в вашем навигационном списке светло-серые.
Чтобы это исправить, очистите в браузере историю.
В Internet Explorer выберите меню СервисСвойства обозревателя. Вы увидите кнопку Уда-
лить в области История просмотра. Нажмите ее, откроется диалоговое окно Удаление истории
обзора с большим количеством настроек, как показано на рис. 3.15. Убедитесь, что установ-
лен флажок Журнал (или История в Firefox), и нажмите кнопку Удалить. После этого снова
откройте веб-страницу. В старых версиях браузера процесс удаления истории еще проще —
в окне Свойства обозревателя есть диалог, который так и называется: Удалить историю.
Рис. 3.15. Очистка истории в браузере — посещенные ссылки снова отобразятся

как непосещенные
Настройки других браузеров очень похожи. Обычно их можно найти, выполнив примерно такие
команды: ToolsOptions (СервисПараметры) или PreferencesPrivacy (СвойстваБезопас-
ность). Я не буду приводить здесь способы удаления истории для всех браузеров, вы и сами
легко с этим справитесь.
Селекторы классов
На текущий момент мы рассмотрели способы оформления различных элементов,
например абзацев и заголовков. Вы также увидели, как можно оформлять элемен-
ты в отдельных областях страницы, используя идентификаторы. Однако слиш-
ком широкое применение стиля (как окраска текста во всех абзацах в синий
цвет) — это грубый подход с точки зрения дизайна. Что, если вам нужно выделить
лишь несколько абзацев (или каких-то других элементов)? Используйте селек-
торы классов.
Селектор класса позволяет разработать стиль, который может быть применен
снова и снова ко многим различным элементам. Например, вы хотите выделить
отдельные фрагменты текста, чтобы они выглядели более привлекательно и забав-
но, чем остальная часть документа.
Введите в своем CSS-файле такой код:
.fun {
color: #339999;
letter-spacing: 0.05em;
}
Вы только что создали правило стиля для класса fun. Точка перед названием
класса говорит о том, что перед вами селектор класса. В это правило вы добавили
новое свойство letter-spacing , которое задает пробел между буквами. Здесь
установлена величина 0.05 em. Значение 1 em определяет высоту символа М для
любого шрифта, поэтому 0,05 означает 5 % от этой высоты. Казалось бы, это
свойство почти изменит внешний вид текста, но, когда документ отправится
в типографию, самые небольшие изменения будут бросаться в глаза. Впрочем,
вы можете сами попробовать увеличить это значение и посмотреть, что полу-
чится.
Чтобы использовать стиль, после того как он был внесен в таблицу, добавьте
такой атрибут class="fun":
<p class="fun">Парень идет в бар или ноги сами его туда несут?<p>
А сейчас попробуйте применить классы к учебному сайту. Сначала нужно до-
бавить правило стиля, показанное выше, к таблице стилей.
1. Откройте style1.css и добавьте в конце файла код из предыдущего листинга.
2. Сохраните файл и откройте в текстовом редакторе страницу about.html.
3. Найдите абзац, который содержит элемент цитаты (blockquote).
4. Добавьте в открывающий тег абзаца атрибут class="fun".
Разметка будет выглядеть следующим образом:
<blockquote>
<p class="fun">"Счастье — это поплавать в океане, а затем выпить один
или два бокала холодненького пива! И я разрешаю меня цитировать!"</p>
</blockquote>
Заметьте: атрибут class применен на уровне абзаца (не цитаты). Если наш Боб
разговорится на несколько абзацев, это будет выглядеть так:
<blockquote>
<p class="fun">"Счастье — это поплавать в океане, а затем выпить один
или два бокала холодненького пива! И я разрешаю меня цитировать!"</p>
<p class="fun">"Присоединяйтесь к нам на следующих выходных, и вскоре
у вас появится много новых друзей!"</p>
<p class="fun">"По крайней мере на какое-то время я обзавелся
действительно классной работой."</p>
</blockquote>
Получилось много повторов. Наверное, есть более аккуратный способ применить
этот стиль? Да, конечно, вот он:
<blockquote class="fun">
<p>"Присоединяйтесь к нам на следующих выходных, и вскоре у вас появится
много новых друзей!"</p>
<p>"По крайней мере на какое-то время я обзавелся действительно классной
работой."</p>
</blockquote>
В этом примере к элементу применен класс fun, так что теперь все содержимое
элемента будет отображаться в стиле родительского контейнера. Это избавит вас от
необходимости применять разные классы ко всем вашим страницам. В общем, это
очень похоже на логику работы с элементами div, которую мы обсуждали в главе 2.
КЛАСС ИЛИ ID?

Итак, мы рассмотрели селекторы классов (которые обознаются точкой — «.») и id-селекторы
(которые обозначаются значком решетки #). Вас это смущает? Да, эти элементы похожи,
но у них есть одно серьезное различие: специфический id можно применить только к од-
ному HTML-элементу. Например, на любой веб-странице может быть лишь один элемент
с id="mainnavigation", и лишь один с id="header". А класс, в отличие от id, может быть при-
менен столько раз, сколько требуется.
ОГРАНИЧЕНИЯ КЛАССОВ ДЛЯ ОПРЕДЕЛЕННЫХ ЭЛЕМЕНТОВ

Допустим, вы хотите, чтобы элементы blockquote с атрибутом class="fun" отображались кур-
сивом, но это не касалось бы других элементов данного класса. Звучит сложно? А в CSS все
просто, посмотрите на этот код:
.fun {
color: #339999;
letter-spacing: 0.05em;
}
blockquote.fun {
font-style: italic;
}
Теперь��
��
любой��
��
текст��
��
внутри��
��
тегов��
<blockquote class=��
"��
fun��
"��
> и��
��
</blockquote> ��
будет��
��
отображать-
ся курсивом.
Сочетая селектор класса с именем элемента, вы сообщаете браузеру, что нужно применить
следующее объявление стиля только к комбинации этого элемента и класса. Это очень про-
сто: element.class. Помните только, что между их названиями нельзя ставить пробелы.
И НАКОНЕЦ
Самые наблюдательные из вас, наверное, заметили, что не все правила класса .fun из пре-
дыдущего примера применились к цитате. Правила font-family и letter-spacing сработали, а из-
менение цвета — нет! Почему? Чтобы это понять, рассмотрим феномен «приоритетности».
Эта концепция означает лишь то, что срабатывает самое приоритетное правило. Определе-
ние, какое правило, более приоритетно, вполне доступно для понимания. В вашей таблице
стилей приоритет определить легко: правило .fun применено к цитате, а свойства относят-
ся к абзацам, поэтому они срабатывают только в том случае, если нет других объявлений
для абзацев. А у вас есть другое объявление о цветах на учебном сайте — вы добавили его
еще в начале главы. В нем говорится, что все абзацы должны отображаться синим цветом
(navy):
p {
color: navy;
}
Правило для элемента с селектором p более приоритетно для таких элементов, потому что
селектор обращается к ним напрямую, в отличие от правила класса .fun. Допустим, вы доба-
вили новое правило, к примеру такое:
.fun p {
color: green;
}
В результате синим будет весь текст, кроме находящегося внутри элементов p с классом fun.
Текст, относящийся к этому классу, будет зеленым, так как селектор .fun p более приоритетен
для таких абзацев. Заметьте, что, в отличие от конфликта правил, который мы рассматрива-
ли в подразделе «Какое правило победит?», эту битву выигрывают более приоритетные
правила стилей, независимо от того, в каком порядке они появляются в таблице стилей.
Приоритетность может здорово усложнить жизнь, поэтому хорошенько разберитесь с этим
понятием. Сейчас достаточно лишь усвоить концепцию и понять причину, почему один из
ваших стилей не срабатывает, хотя должен. Приоритетность много обсуждали на фору-
мах SitePoint CSS Reference. Ознакомьтесь с этой информацией, если хотите лучше разо-
браться1.
Оформление части текста

с использованием элемента span
Итак, класс можно применить в разных ситуациях — будь то отдельный абзац, блок
из нескольких абзацев, находящийся внутри цитаты, или элемент div, который
включает в себя различное содержимое. Но что делать, если вы хотите применить
стиль к очень маленькому фрагменту текста — может быть, к нескольким словам
или даже нескольким буквам внутри абзаца? Для этого, конечно же, нужно исполь-
зовать элемент span.
Ранее в этой главе я показывал, как можно применять элемент span во внутрен-
них стилях, чтобы выделить и оформить отдельные слова внутри абзаца. Точно
такая же техника может быть использована и для классов: просто поместите от-
1
http://reference.sitepoint.com/css/specificity/.

На русском языке можно поискать в Интернете по запросам «приоритетность css» или
«специфичность css». — Примеч. пер.
крывающий тег <span> туда, откуда хотите начать выделение, и закрывающий </span>
туда, где хотите его закончить. Преимущество этого метода перед применением
внутреннего стиля было показано выше: вы можете добавить класс fun любым
элементам на любых страницах с минимальными затратами. Когда вам захочется
иметь различные виды класса fun (если можно так выразиться), то нужно будет
лишь изменить таблицу стилей style1.css, и новый стиль применится к вашему
сайту:
<p><span class="fun">Bubble Under</span> — группа энтузиастов дайвинга,
основанная на юго-востоке Великобритании, которая регулярно
встречается для дайвинг-вылазок в летние месяцы,
когда погода хорошая и по воде плывут барашки.
Примените элемент span, как показано в этом коде, к вашей странице «О нас».
Если вы сохраните изменения и посмотрите на них в браузере (помните, что нуж-
но нажать кнопку Обновить), ваша страница будет выглядеть, как показано на
рис. 3.16.
Рис. 3.16. Применение класса fun к двум словам
НЕ ЗЛОУПОТРЕБЛЯЙТЕ ЭЛЕМЕНТОМ SPAN

Обычно элемент span используется с атрибутом class. Вы не так часто будете применять span
в своем HTML-коде без атрибутов class или id.
Перед тем как применить span к какому-либо элементу на веб-странице, остановитесь на
минутку и подумайте, нет ли другого инструмента, более точно соответствующего поставлен-
ной задаче. Например, в этом случае:
<p>Сделай это <span class="shouty">сейчас</span>!</p>
целесообразнее использовать элемент strong:
<p>Сделай это <strong>сейчас</strong>!</p>
Всегда думайте о смысле того, что вы пишете, и выбирайте для своих задач наиболее подхо-
дящие HTML-элементы. Другими примерами в данном случае могут быть элементы em, cite,
blockquote.
3.6. Резюме
Это была еще одна сложная глава, но посмотрите, как преобразился ваш сайт! Гла-
вой или двумя ранее вы не могли даже создать веб-страницу, а сейчас знаете, как
раскрасить ее, как преобразить любой HTML-элемент, любую часть веб-страницы
в зависимости от ее идентификатора или любой объект — иногда в разных мес-
тах — с помощью селекторов классов.
Сайт постепенно становится более ярким, но все же макет пока довольно простой.
В следующей главе вы увидите, как с помощью CSS можно изменить разметку
элементов на веб-странице: их положение, размер, форму и др. Оформление текста?
Плавали, знаем! Перейдем на следующий уровень!
4 Преображение
с CSS
В течение многих лет веб-разработчики относились к CSS как к отличному инстру-
менту для форматирования текста на веб-страницах, а также для их раскрашива-
ния. И долгое время это действительно было так, потому что браузеры не поддер-
живали CSS как следует. К счастью, наконец-то можно отметить прогресс!
В экспериментах с CSS вы сейчас достигли точки, на которой многие способные
веб-дизайнеры останавливаются. Но не вы! В этой главе вы еще подробнее озна-
комитесь с возможностями CSS, чтобы:
изменять размер и форму различных областей содержимого страницы;
изменять вид фона и границ;
располагать элементы в любых местах веб-страницы.
Начнем с первого пункта — посмотрим, как можно использовать CSS для
изменения формы и размера элементов веб-страницы. Однако перед тем, как
изучить эту технику, следует уяснить разницу между встроенными и блочными
элементами.
4.1. Блочные элементы

против встроенных
Любая веб-страница содержит два типа элементов: встроенные и блочные. Очень
важно понимать разницу между ними, особенно когда вы работаете с CSS.
ОСНОВНЫЕ ПРАВИЛА РАБОТЫ С БЛОЧНЫМИ И ВСТРОЕННЫМИ

ЭЛЕМЕНТАМИ
Объясняя разницу между этими двумя типами элементов, я приведу в пример упаковочные
коробки. Вы, наверное, видели такой набор из пяти штук — они обычно упакованы одна в дру-
гую. Вы можете их все вытащить, поставить одну на другую, построив башню, или сложить
рядышком на полу, но вы не можете положить большую коробку внутрь маленькой — это
противоречит законам физики!
Блочные элементы очень похожи на эти коробки. Они могут содержать внутри себя другие
такие же элементы, возможно углубляясь при этом на несколько уровней. Тем не менее
существуют определенные правила — они устанавливают, какие блочные элементы могут
128 Глава 4. Преображение с CSS
вкладываться внутрь других, играющих роль контейнеров. Как большая коробка не поместит-
ся в маленькую, так и вы не можете поместить элемент div внутрь p, зато можете поступить
наоборот. Постепенно вы разберетесь в этом, ведь в дальнейшем у вас будет возможность
проверить свои знания.
С блочными элементами разобрались. А что такое встроенные? Думайте о них как о безде-
лушках и других мелочах, которые обычно хранят в таких коробках. Они могут быть встроены
внутрь этих коробок, втиснуты между ними или разбросаны вокруг, но никогда не смогут
содержать в себе коробки — это невозможно. Поэтому, возвращаясь к CSS, встроенные эле-
менты не могут включать в себя блочные.
Подведем итог.
yy Блочные элементы могут содержать в себе другие блочные элементы, а также встро-
енные.
yy Встроенные элементы могут включать в себя только другие встроенные элементы.
Блочные элементы
Блочный элемент — любой, который может включать в себя другие элементы (блоч-
ные или встроенные). Опознать блочные элементы очень легко, так как они:
обычно идут отдельной строкой или занимают несколько строк (другие элемен-
ты располагаются выше или ниже, но не сбоку — по крайней мере по умол-
чанию);
служат контейнерами для других элементов.
Вот несколько примеров блочных элементов:
h1, h2, h3 и т. д. до h6;
p;
div;
blockquote;
ul и ol;
form1.
Когда вы создаете абзац, нет необходимости говорить браузеру, чтобы добавил
разрыв строки. Теги <p> и </p> сделают это за вас. Рассмотрим текст, который ото-
бражается на странице «О нас»:
chapter4\website_files\01_block_level_elements\about.html (фрагмент)
<h2>О нас</h2>
<p><span class="fun">Bubble Under</span> — группа
чтобы сократить расходы на проживание и проезд,
1
Формы мы рассмотрим в главе 7. — Примеч. авт.
4.1. Блочные элементы против встроенных 129

в Шотландии и Мальту.</p>
<p>Когда мы не занимаемся дайвингом, мы часто встречаемся в местных пабах,
чтобы поболтать о грядущих приключениях (на самом деле это <em>только
повод</em>, да?).</p>
<p>Или как говорит наш Боб Добалина:</p>
<blockquote class="fun">
<p>"Счастье — это поплавать в океане, а затем выпить один или два
</blockquote>
Заголовок (h2 ) и три абзаца — это блочные элементы. Они представляют

собой блок какого-то контента, где ясно обозначены разрывы до и после каж-
дого блока. Это четко видно на рис. 4.1, где каждый блочный элемент обведен
рамкой.
Рис. 4.1. Блоки контента HTML-страницы
Встроенные элементы
Легкий способ отличить встроенный элемент — запомнить, что он находится
внутри другого элемента. Как вы поняли из аналогии с коробками, можно иметь
коробку с множеством старых фотографий или коробку только с одним снимком,
но нельзя иметь фотографию, полную коробок, — это физически невозможно!
Вообще-то, попытка поместить блочный элемент внутрь встроенного противоре-
чит спецификации. Хороший пример встроенного элемента — span (описанный
в главе 3), который используется для группирования слов для задания им обще-

го стиля.
chapter4\website_files\01_block_level_elements\about.html (фрагмент)
<p><span class="fun">Bubble Under</span> — группа
Другие примеры встроенных элементов:
em;
strong;
cite;
a.
В примере ниже все встроенные элементы могут относиться к словам «Bubble
Under»:
<p><em>Bubble Under</em> — группа энтузиастов дайвинга...</p>
<p><strong>Bubble Under</strong> — группа энтузиастов дайвинга...</p>
<p><cite>Bubble Under</cite> — группа энтузиастов дайвинга...</p>
<p><a href="http://www.bubbleunder.com/">Bubble Under</a> —
группа энтузиастов дайвинга...</p>
Фактически даже элемент img — встроенный, хотя мы его используем немного
не так, как другие встроенные элементы. Этот элемент не предоставляет браузеру
никакой информации о том, как следует рассматривать текст, а лишь добавляет
изображение.
Вложение встроенных элементов друг в друга

Вложить один встроенный элемент внутрь другого — совершенно нормально.
Вот пример встроенного элемента span, который содержит внутри элемент a:
<p><span class="fun"><a href="http://www.bubbleunder.com/">Bubble
Under</a></span> — группа энтузиастов дайвинга,
основанная на юго-востоке Великобритании,
На самом деле даже следующий пример будет корректным и валидным (хотя
он может казаться перегруженным):
<p><strong><em><cite><a href="http://www.bubbleunder.com/">Bubble
Under</a></cite></em></strong> — группа энтузиастов дайвинга…</p>
4.1. Блочные элементы против встроенных 131
СЛЕДИТЕ ЗА СИММЕТРИЕЙ
Одно из правил XHTML-синтаксиса — обязательное наличие открывающего и закрывающего
симметричных тегов. Если вы открываете теги, они должны закрываться, причем в обратном
порядке. В примере выше теги правильно открыты и закрыты. Нагляднее видно здесь:
<strong>
<em>
<cite>
<a href="http://www.bubbleunder.com/">
Bubble Under
</a>
</cite>
</em>
</strong>
Правило симметрии применяется к любому типу элементов — блочным или встроенным —
и может быть проверено с использованием валидаторов (см. главу 8).
Встроенные элементы никогда

не содержат блочные
Предыдущий пример прекрасно проиллюстрировал приемлемый вариант помеще-
ния одних встроенных элементов внутрь других. А сейчас я покажу вам, как ни
в коем случае нельзя делать:
<span class="fun"><p>Bubble Under — группа энтузиастов дайвинга, основанная
для дайвинг-вылазок в летние месяцы, когда погода хорошая и по воде
плывут барашки. Мы проводим уик-энд, собираясь небольшими группами,
чтобы сократить расходы на проживание и проезд, а также быть уверенными,
что каждый получает надежного напарникa.</p></span>
Почему это неправильно? Да потому, что здесь встроенный элемент span вклю-
чает в себя блочный элемент p. Никуда не годная разметка! Как я и обещал, мы
обсудим валидацию в подразделе «Валидация веб-страниц» главы 8. А сейчас
просто запомните: блочные элементы можно вкладывать только в другие блочные
элементы.
Ну хорошо, почти… Есть исключение из этого правила, представленное в HTML5.
Вы можете помещать несколько разных элементов внутрь ссылки, только не за-
будьте, что документ должен иметь тип HTML5. Вот как это можно сделать:
<a href="monkey.htm"><h1>Мартышкин домик</h1>
<div>Поставщики лучшей обезьяньей продукции</div></a>
Если вы укажете здесь тип документа <!DOCTYPE html>, то эта разметка будет
абсолютно корректной.
Если я уже давно надоел вам своими объяснениями о двух типах элементов,
примите мои извинения. Я делаю это только потому, что слишком часто люди
ошибаются именно в данном вопросе — путают блочные и встроенные элементы.
А это очень, очень важно, потому что эти два типа работают совершенно по-разно-
му, когда в дело вступает CSS. Рассмотрим это в деталях.
Оформление встроенных и блочных элементов

Встроенные элементы поддерживают небольшое количество вариантов оформле-
ния (подробно мы обсуждали это в главе 3):
цвета (текста и фона);
свойства шрифта (размер, семейство шрифтов, подчеркивание и другие деко-
ративные эффекты).
Все это, конечно, чисто внешние, декоративные эффекты. Зато блочные элемен-
ты гораздо более функциональны при работе с CSS, например:
блоку текста можно задать определенную ширину или высоту;
текст можно растянуть и прижать к одному из краев блока, в котором он нахо-
дится;
можно передвинуть блок в любое место веб-страницы, независимо от его пози-
ции в разметке.
В этой главе вы увидите примеры использования всех этих методов. Разметка,
как обычно, доступна в архиве кода. А сейчас попробуйте применить эти техники
к проекту вашего сайта. Начните с изменения формы и размера контента.
4.2. Изменение размера блоков

По умолчанию блочный элемент занимает 100 % доступной ширины — будь то
размер родительского контейнера, другого div-элемента или даже сектора body —
и необходимую для отображения ширину. Именно так выводятся и созданные вами
абзацы текста, но, если хотите, можете это изменить.
Установление ширины
Допустим, у вас есть документ с множеством абзацев и вы хотите выделить какой-
то один из них особым способом. Для начала попробуйте изменить ширину абзаца.
Вот как это сделать с помощью CSS (аналогично с установлением полужирного
начертания):
.attentiongrab {
width: 50%;
font-weight: bold;
}
Здесь используется селектор класса. Вы наверняка помните, что это такое, из

предыдущей главы. Так, можно применить этот стиль столько раз, сколько вам
угодно. Вот как это сделать:
<p>Мы жили в нескольких кемпингах и палаточных лагерях последние пару
месяцев, и я начал замечать, что, кажется, тут есть некие неписаные
правила проживания в таких местах. Неписаные до сих пор!</p>
<p>Все будут подготовлены и экипированы лучше вас. Это факт. Не важно,
4.2. Изменение размера блоков 133
сколько сверх нормы вам придется нести, через пару переправ кто-то все
равно окажется лучше. Возможно, это будет риф.</p>
<p class="attentiongrab">Когда вы будете парковаться впервые, расстояние
между вашей выхлопной трубой и ближайшим пнем окажется равным двум
дюймам, но вы узнаете об этом, только выйдя из машины.</p>
<p>В один из самых жарких вечеров вы будете парковаться за каким-нибудь
круто упакованным красавчиком на дорогущей новой машине. Вы будете
чувствовать себя ужасно, зависть еще больше нагреет жаркий воздух
и даже перегреет жидкость в вашем радиаторе.</p>
Рисунок 4.2 показывает отображение этого текста на экране.
Рис. 4.2. Уменьшение ширины абзаца на 50 % по сравнению с остальными
Установление высоты
Установить высоту блока контента так же просто, как и ширину. Впрочем, скорее
всего, вы будете использовать эту функцию реже, чем настройку ширины. Это может
вам понадобиться, например, для блока навигации, если элементов слишком мно-
го и их количество различается для разных страниц.
Посмотрите на эту HTML-разметку:
<div id="mainnavigation">
<h3>Навигация сайта</h3>
<ul>
<li><a href="home.html">Главная страница</a></li>
<li><a href="recent.html">Текущие проекты</a></li>
<li><a href="portfolio.html">Портфолио</a></li>
<li><a href="testimonials.html">Отзывы</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</div>
Как и на учебном сайте, навигация заключена внутри элемента div с идентифи-
катором mainnavigation. Как я уже говорил в начале главы, div — это блочный
элемент, поэтому можно с ним поэкспериментировать. Установите для него высо-

ту и ширину в CSS-коде:
#mainnavigation {
background-color: #ffcc33;
color: navy;
font-weight: bold;
width: 200px;
height: 400px;
}
Заметьте, что установлен цвет фона (#ffcc33), чтобы было проще найти блок
с измененным размером.
В CSS-коде мы задали свойства height и width, установив их значения в пикселах,
как стороны прямоугольника. На рис. 4.3 показано, как страница будет выглядеть
в браузере.
Рис. 4.3. Отображение блока навигации

c установленными размерами 200 пикселов в ширину и 400 в высоту
4.2. Изменение размера блоков 135
А ЧТО, ЕСЛИ ОБЛАСТЬ НАВИГАЦИИ СТАНЕТ СЛИШКОМ БОЛЬШОЙ?

Я говорил, что можно установить фиксированную высоту области навигации в том случае,
если количество элементов в ней не слишком различается на разных страницах. Но что де-
лать, если навигация разрастется и выйдет за пределы установленной высоты? Ответ на вопрос
зависит от браузера.
yy В Firefox, Internet Explorer 7 и выше атрибут height сохраняет свое значение, а элементы
списка выходят за его пределы без желтого фона.
yy В более старых версиях Internet Explorer (6 и ниже) желтая область растягивается верти-
кально с разрастанием навигационного блока.
Различия показаны на рис. 4.4.
Рис. 4.4. Firefox 3 и Internet Explorer 8 (слева) отличаются

от Internet Explorer 6 (справа) тем, что контент может выйти за содержащую его область
Казалось бы, поведение Internet Explorer 6, а именно игнорирование заданной высоты div
и растяжение его до размеров содержимого, — более предпочтительная реакция, но при этом
нарушаются CSS-стандарты. Поэтому по возможности просто учитывайте ситуации, когда
содержимое может выйти за пределы контейнеров. С другой стороны, вы можете установить
высоту и забыть об этом, и впоследствии это не причинит вам никакого беспокойства. Вся
прелесть CSS проявится в том, что вы легко сможете все исправить, и структура вашего сай-
та не пострадает1.
1
Существует CSS-свойство, которое вы можете использовать для контроля за поведени-
ем контента, выходящего за пределы области с четко определенными размерами. Луч-
ше всего возможности этого свойства проявляются на разделенной на части веб-стра-
нице, если количество контента в отдельных частях сильно различается. Подробнее об
этом читайте на SitePoint’s CSS Reference по адресу http://reference.sitepoint.com/css/
overflow.
4.3. Добавление границ

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

На рис. 4.5 установлена самая простая граница: черная сплошная линия шириной
5 пикселов.
Рис. 4.5. Простая черная граница
Этот эффект получен при выполнении такого кода CSS:

.highlight {
border-width: 5px;
border-style: solid;
border-color: black;
}
НАИМЕНОВАНИЯ КЛАССОВ
Вы заметили, что я использовал для названия класса слово highlight (подсветка)? Я выбрал
его потому, что представил себе гипотетическую ситуацию: я хочу подсветить отдельный
абзац, выделить его на странице. Основное правило выбора имен — они должны описывать
цель или значение содержимого класса, к которому применяются.
Напрашивается, конечно, мысль называть класс соответственно внешнему эффекту, который
мы намереваемся создать. В частности, для примера выше я мог бы использовать название
blackborder (черная граница). Почему я этого не сделал? По очень простой причине. Что, если
в один прекрасный день я решу выбрать красный цвет? А используя название highlight, я могу
менять способ подсветки или выделения абзацев как мне угодно и не путаться между именем
класса и его содержимым. Кроме того, не придется создавать новый класс для каждого ново-
го вида дизайна HTML.
Объемная внутренняя граница

Если вам не нравится простая сплошная линия, попробуйте границу другого вида,
дающую эффект объема (рис. 4.6).
4.3. Добавление границ блочным элементам 137
Рис. 4.6. Объемная вдавленная граница
Здесь используется светло-серый цвет; его код задан в шестнадцатеричной

системе:
.highlight {
border-width: 10px;
border-style: inset;
border-color: #999999;
}
Цветная выпуклая граница

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

.highlight {
border-width: 10px;
border-style: ridge;
border-color: red;
}
Прерывистые границы
Вы вовсе не обязаны применять для границ только сплошные линии. Примеры на
рис. 4.8 и 4.9 показывают, что можно сделать точечную или штриховую границу.
Обе границы фиолетового цвета и толщиной 10 пикселов.
Рис. 4.8. Толстая граница из точек

.highlight {
border-width: 10px;
border-style: dotted;
border-color: purple;
}
Рис. 4.9. Толстая пунктирная граница
.highlight {
border-width: 10px;
border-style: dashed;
border-color: purple;
}
Обе границы очень яркие и заметные. Рассмотрим примеры, менее бросающие
ся в глаза.
Простая серая граница

Пример, показанный на рис. 4.10, — простая серая граница толщиной 1 пиксел.
Рис. 4.10. Простая серая граница
Вот CSS-код, с помощью которого можно достигнуть такого эффекта:

.highlight {
border-width: 1px;
border-color: gray;
}
Простая серая граница (еще один вариант)

На рис. 4.11 граница немного толще (2 пиксела), но так как мы сделали цвет свет-
лее (silver вместо gray), она не кажется слишком толстой.
Рис. 4.11. Простая серая граница (еще один вариант)

И CSS-код для нее:

.highlight {
border-width: 2px;
border-color: silver;
}
Красная точечная граница

Красная граница, показанная на рис. 4.12, не слишком резкая, так как толщиной
она всего 1 пиксел; кроме того, она не сплошная, а состоит из точек, из-за чего
становится еще невесомее.
Рис. 4.12. Точечная красная граница
Вот CSS для нее:

.highlight {
border-width: 1px;
border-style: dotted;
border-color: red;
}
Штриховая серая граница

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

.highlight {
border-width: 1px;
border-style: dashed;
border-color: gray;
}
Двойные границы
Вы можете также заключить блочные элементы в двойную границу, как показано
на рис. 4.14.
Рис. 4.14. Двойная граница
Вот разметка, которая создает такой эффект:

.highlight {
border-width: 5px;
border-style: double;
border-color: silver;
}
Оформление отдельных
сторон элемента
В придачу к добавлению границ для каждой стороны блочного элемента вы мо-
жете применить стиль к отдельным его краям, используя свойства border-top,
border-bottom, border-left и border-right. Вот пример блока, у которого в отдельно-
сти оформлена каждая сторона:
.highlight {
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: blue;
border-left-width: 5px;
border-left-style: dashed;
border-left-color: yellow;
border-right-width: 7px;
border-right-style: double;
border-right-color: fuchsia;
}
Если честно, такая конструкция выглядит просто уродливо (рис. 4.15). Однако

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

Быстрое оформление границ

Как видно из предыдущего примера, количество объявлений CSS огромно. Вот
было бы здорово сделать границу, используя всего одно объявление вместо трех!
Хорошая новость — понадобится лишь такой код:
.highlight {
border: 5px solid black;
}
Это быстрый метод оформления границы, который браузеры без проблем под-
держивают. Он экономит ваше время, а также снижает размер CSS-файла, который
требуется подгружать. Я рекомендую вам применять для оформления границ
именно такой метод. Вы можете использовать упомянутые выше свойства border-
top, border-bottom, border-left и border-right точно таким же методом «на скорую
руку», чтобы оформить отдельные части границы.
Доступные стили границ

В приведенных выше примерах показано большинство стилей, которые вы можете
использовать. Ниже я привел список всех доступных свойств. Экспериментируйте
на здоровье, используйте любые комбинации на свой вкус!
Толщина границы
Определяется в следующих единицах измерения: пикселы (px), точки (pt) или em.
Кроме того, вы можете просто указать одно из ключевых слов для толщины грани-
цы: thin — тонкая, medium — средняя или thick — толстая.
Вид границы
Граница может быть одного из следующих видов:
solid — сплошная (по умолчанию);
double — двойная;
dotted — точечная;
dashed — штриховая;
groove — желобок;
ridge — бороздка;
inset — вдавленная;
outset — выпуклая.
Цвет границы
Определяется точно так же, как цвет любого другого элемента — кодом в шестна-
дцатеричной системе или одним из ключевых слов.
До сих пор я использовал обобщенные примеры, чтобы показать все доступ-
ные возможности. А сейчас попробуйте применить некоторые из этих стилей
к учебному сайту, используя полученные знания. Однако будьте осторожны: зло-

употребление границами может сделать сайт слишком «фрагментарным» и, следо-
вательно, уродливым.
4.4. Установка форм и размеров

для сайта дайверов
Внесите небольшие изменения в проект сайта, начав с элемента body. Откройте
файл style1.css и найдите правило для элемента body (оно написано сразу после
комментария). Добавьте объявление стиля границы для всей страницы.
chapter4\website_files\02_page_border\style1.css (фрагмент)
body {
padding: 15px;
line-height: 125%;
border: 4px solid navy;
}
Теперь ваши страницы будут выглядеть в браузере примерно так, как показано
на рис. 4.16.
Рис. 4.16. Обрамление всей веб-страницы
Теперь внесите некоторые изменения в раздел навигации. Вспомните главу 2,

где я предлагал добавить идентификаторы ко всем ключевым разделам веб-стра-
ницы. Вот сейчас они нам и пригодятся.
4.4. Установка форм и размеров для сайта дайверов 143
В файле style1.css добавьте новое правило для id-атрибута элемента навигации.

Установите ширину раздела 200 пикселов1 и добавьте точечную синюю рамку
толщиной 1 пиксел. Вот как будет выглядеть ваша таблица стилей:
chapter4\website_files\03_navigation_border\style1.css (фрагмент)
#navigation {
width: 180px;
border: 1px dotted navy;
}
Сохраните файл style1.css, а затем посмотрите, что получилось (рис. 4.17).
Рис. 4.17. Область навигации выделена рамкой
Еще немного исправьте навигацию: измените цвет фона этого раздела.

chapter4\website_files\04_navigation_bgcolor\style1.css (фрагмент)
#navigation {
width: 180px;
border: 1px dotted navy;
background-color: #7da5d8;
}
1
В этом месте мне пришлось самовольно увеличить ширину раздела на 20 пикселов
(в оригинале, у Ллойда, было 180), так как русские слова длиннее английских и не по-
мещались. Краткость английских слов — жуткая головная боль всех веб-дизайнеров,
которые имеют счастье работать над обеспечением переключения языка на сайтах. —
Здесь выбран другой оттенок голубого цвета (помните, что в главе 3 есть ссыл-
ка на сервисы для определения шестнадцатеричного кода цвета). Результат показан
на рис. 4.18.
Рис. 4.18. Область навигации представляет собой отдельную функциональную

часть веб-страницы
Это уже лучше, но выбранный цвет делает посещенную ссылку (visited) труд-
ной для восприятия. Исправьте это, выбрав более темный цвет посещенных
ссылок. Найдите правило для отображения таких ссылок и измените на следу
ющее:
a:visited {
color: navy;
}
Вот так намного лучше! Теперь измените оформление слогана, причем не толь-
ко поменяйте цвет фона и добавьте границу. В таблице стилей найдите разметку,
задающую стиль слогана, и добавьте следующие объявления, показанные ниже
полужирным шрифтом:
chapter4\website_files\05_tagline_border\style1.css (фрагмент)
#tagline p {н
font-style: italic;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
}
На рис. 4.19 показано, что отобразится в браузере.
Рис. 4.19. Выделение слогана и изменение цвета фона
Наконец, измените заголовки второго уровня, чтобы они отличались от заго-

ловков первого уровня (не будем перебарщивать с темными цветами). Вот, кстати,
хорошая возможность навести порядок в правилах, особенно в тех, которые вы
только что добавили в конец файла. Ведь они перечисляются без всякого логиче-
ского порядка. Переставьте все правила для заголовков так, чтобы они располага-
лись вместе, — их легче будет найти:
h1, h2, h3 {
}
h1 {
font-size: x-large;
color: white;
}
h2 {
color: navy;
font-size: 130%;
}
Здесь для заголовков второго уровня выбрана новая высота шрифта — 130 %,
которая в большинстве браузеров чуть превышает large, но немного меньше, чем
x-large. Новый вид страницы показан на рис. 4.20.
Рис. 4.20. Разнообразие стилей заголовков
Добавление отступов
Если вы внимательно посмотрите на заголовки проектного сайта, которые я демон-
стрировал ранее в этой главе, то заметите, что текст примыкает к границе. Это не
очень красиво, вы согласны? Чтобы исправить это, добавим отступ — дополнитель-
ное пространство между границей и текстом. Это CSS-свойство так и называет-
ся — padding.
Отступы к блочному элементу можно применить тремя различными способами:
используя пикселы, значения em или проценты:
.pixelpadding {
padding: 30px;
border: 1px dashed gray;
}
.empadding {
padding: 2em;
}
.percentagepadding {
padding: 5%;
}
На рис. 4.21 показано, как этот CSS-стиль выглядит на экране.

Рис. 4.21. Три способа задания отступа дают один и тот же результат на экране
КАКАЯ ЕДИНИЦА ИЗМЕРЕНИЯ ЛУЧШЕ?

В чем вы предпочитаете измерять отступы: в пикселах, em или процентах? Если нет разницы
в получаемом эффекте, то, вероятно, это не имеет значения? Вовсе нет. Все зависит от того,
какого результата вы ожидаете от своего дизайна.
Например, если вы желаете, чтобы дизайн изменялся вместе с размерами окна браузера,
следует задавать отступы в процентах. Любые величины, указанные в процентах, будут ме-
няться соответственно изменению окна браузера. Чем больше вы растягиваете окно, тем
больше становится отступ.
Если вы хотите, чтобы ваш дизайн масштабировался соответственно выбору разного размера
шрифта, включая (это ключевой момент!) Internet Explorer 6, надо использовать em, потому
что единицы измерения будут зависеть от размера шрифта, выбранного пользователем в брау-
зере. Если вы используете пикселы (px) или точки (pt), то большинство браузеров также
позволят вам увеличивать и уменьшать отступ в зависимости от размера шрифта, но Internet
Explorer 6 будет это игнорировать, поэтому лучше использовать em.
Если вы создаете точнейший дизайн, где графические элементы расположены линия в линию,
независимо от настроек шрифта в браузере, очевидно, нужно указывать пикселы. Пиксел —
это фактически точка на экране компьютера пользователя. Почему фактически? Потому что
большинство браузеров имеют функцию масштабирования, которая увеличивает пропорцио-
нально размеры всех элементов и создает таким образом лишние точки, которыми вы не
можете управлять.
Помните, что масштабирование страницы — это то же самое, что изменение размеров шриф-
та. Масштаб увеличивает (или уменьшает) пропорционально все элементы, а настройка
шрифта влияет только на текст, заключенный внутри различных контейнеров, что часто
приводит к самым неожиданным результатам. Чуть позже вы в этом убедитесь.
Использование отступов в учебном сайте

Добавление отступов в границы блочных элементов сделает эти элементы немно-
го изящнее. Исправьте маленький графический недочет сайта — в частности, заго-
ловки первого уровня.
Найдите таблицу стилей в style1.css, где вы изменяли цвет заголовка и размер

шрифта, и добавьте свойства padding, как показано ниже.
chapter4\website_files\07_heading_padding\style1.css (фрагмент)
h1 {
font-size: x-large;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
}
Затем немного разграничьте заголовки.
h2 {
color: navy;
font-size: 130%;
padding-top: 15px;
}
Теперь найдите слоган и добавьте отступы и туда. Используйте значения, при-
веденные ниже.
#tagline p {
font-style: italic;
padding-top: .2em;
padding-left: .8em;
}
Обновите страницы в браузере, и вы увидите, что получилось (рис. 4.22).
Рис. 4.22. До и после: добавление дополнительных отступов

Поля
Итак, вы уже знаете, как изменить размер блочного элемента, задать для него гра-
ницу по своему вкусу и добавить дополнительные отступы, чтобы сместить со-
держимое элемента от края границы. Рассмотрим еще одно полезное CSS-свой
ство — margin.
Свойство margin позволяет задать величину свободного пространства снаружи
от границы элемента. Единственная разница в CSS-коде для двух абзацев, пока-
занных на рис. 4.23, — добавление свойства margin: 30px для второго из них.
Рис. 4.23. Разница между отступами и полями видна яснее, когда есть граница
Изменим поля для двух элементов: ul и h2. Различные браузеры задают разные
значения по умолчанию для полей этих элементов. Не будем на них полагаться
и зададим собственное значение 15px, одинаковое для обоих элементов.
h2, ul {
margin-top: 15px;
}
Блочная модель
Рассмотрим сейчас модель, похожую на вложенные коробки. Вид блочного эле-
мента можно изменять, используя комбинацию свойств margin, border, padding,
height и width. На рис. 4.24 показано, как можно представить их графически.
Рис. 4.24. Представление блочной модели

ОШИБКА В БЛОЧНОЙ МОДЕЛИ

Если вы используете Internet Explorer версии 6 или ниже (проверить это можно, выбрав меню
СправкаО программе), то можете столкнуться с проблемами. Изменение размеров и мани-
пуляция блочными элементами, о которых я говорил выше, могут привести к трудностям, если
в начале документа вы укажете DOCTYPE (тип документа). Без указания типа документа
Internet Explorer работает в режиме совместимости.
В этом режиме Internet Explorer вычисляет ширину и высоту, используя особый — и при этом
неправильный — метод. Эта проблема возникла потому, что в Internet Explorer 4 и 5, которые
были практически первыми браузерами с поддержкой CSS, отдельные функции были непра-
вильно реализованы (среди них и блочная модель). Компания Microsoft исправила эти проб
лемы в Internet��
��
��
Explorer��
 6, но, несмотря на это, очень много сайтов в Интернете были напи-
саны с поддержкой некорректной интерпретации правил CSS. Microsoft оказалась в непростой
ситуации: профессиональные разработчики требовали исправления проблем, но это привело
бы к тому, что пострадали бы обычные пользователи: ведь большинство веб-страниц откры-
вались бы некорректно, не так, как задумывали их авторы.
Microsoft нашла следующий выход: использование техники doctype switching (переключение
типа документа). Если разработчики прописывали DOCTYPE, то веб-страницы должны были
отображаться согласно правилам. Страницы без DOCTYPE (а это большинство страниц в Ин-
тернете в наше время) отображались в режиме совместимости — так, как они открывались
в Internet Explorer 5.
Если вы последуете советам, которые я вам даю в этой книге, и начнете углубленно изучать
HTML-разметку, то, несомненно, еще столкнетесь с проблемами режима совместимости. Если
вы видите отличия в отображении сайта в Internet Explorer 6 и других браузерах, то, скорее
всего, это связано с «ошибками в блочной модели». Если так, зайдите на форум SitePoint’s
CSS и задайте там свои вопросы1.
4.5. Свободное расположение

элементов на странице
Не имея особых указаний, браузер размещает элементы на странице в том порядке,
в каком они указаны в исходнике. Так что, если у вас в разметке есть заголовок, за
которым следует раздел навигации, затем заголовок второго уровня, три абзаца
текста и цитата, то в точности так вы и увидите это на экране. До этого момента все
именно так и было, и мы создавали контент сайта, добавляя элементы в том поряд-
ке, в каком хотели видеть их на странице. Но в этой главе я расскажу вам, как
применять действительно мощные эффекты CSS: вы можете, например, установить
для некоторых элементов определенное место на экране.
Если говорить о работе с макетами, в которых используется CSS, то есть очень
много способов решения такой задачи. К сожалению, в этой книге я не могу рас-
смотреть каждый метод в отдельности. Если вы хотите изучить эту тему углублен-
но, то прочтите книгу, вышедшую в издательстве SitePoint: HTML Utopia: Designing
Without Tables Using CSS2.
1
http://www.sitepoint.com/launch/cssforum.
2
http://www.sitepoint.com/books/css2.
4.5. Свободное расположение элементов на странице 151
Отображение структуры
Вспомним, какие разделы есть на нашем сайте:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Свяжитесь с нами через BubbleUnder</title>
</head>
<body>
<div id="header">
</div>
<div id="tagline">
с нами!</p>
</div>
<ul>
</ul>
<h2>Свяжитесь с нами </h2>
bob@bubbleunder.com. </p>
</body>
</html>
СЛЕДИТЕ ЗА ГРАНИЦАМИ
Собираясь «перекроить» свою страницу с помощью CSS, запомните полезное правило: до-
бавьте временную границу к каждому разделу, который планируете передвинуть. С граница-
ми увидеть эффекты от ваших действий будет куда проще. А затем, как только надобность
в них отпадет, вы без труда уберете этот временный стиль.
Добавьте новое — временное! — правило в таблицу стилей (style1.css), уста-

навливающее границу для каждого элемента. Добавьте его в конец таблицы — таким
образом оно переопределит все стили границ, которые вы установили ранее.
chapter4\website_files\08_page_structure\style1.css (фрагмент)
#header, #sitebranding, #tagline, #navigation, #bodycontent {
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
}
Здесь��
применяются��
��
небольшие��
��
отступы��
��
, ��
а��
также��
��
нижние��
��
поля��
��
, ��
делающие��
отобра-
��
жение содержимого нагляднее (ведь, например, разделы sitebranding и tagline нахо-
��
дятся внутри header). На рис. 4.25 показано, как документ выглядит в браузере.
Рис. 4.25. Выделение структуры страницы с помощью красных границ
Выглядит немного уродливо. Ничего, скоро будет еще хуже, но ненадолго — пока
мы будем перекомпоновывать текст. Это примерно как переставлять в доме мебель:
в разгаре процесса вы в панике от царящего вокруг хаоса, но конец все же наступа-
ет и воцаряются красота и порядок. Именно так сейчас все и будет на нашем учеб-
ном сайте. Итак, начинаем двигать коробки!
Абсолютное позиционирование
Наверное, самый простой метод размещения элементов на странице с помощью
CSS — абсолютное позиционирование. Используя его, мы определяем позиции
(или координаты) верхней левой точки каждого элемента. Примерно как в мага-
зине. Вам случалось говорить продавцу нечто вроде: «Покажите, пожалуйста, часы
пятые слева и третьи сверху»?
Использовать абсолютное позиционирование очень просто, нужно лишь доба-

вить в CSS-код свойство position: absolute, а затем определить, где вы хотите по-
местить элемент. В показанном ниже примере мы определяем, что элемент должен
смещаться на 200 пикселов вниз от верхнего края окна браузера и на 200 пикселов
вправо от левого края с помощью свойств top и left:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Абсолютное позиционирование</title>
#redblock {
position: absolute;
top: 200px;
left: 200px;
color: white;
background-color: red;
width: 90px;
height: 90px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Абсолютное позиционирование</h1>
<div id="redblock">Это красный блок.</div>
<p>Красный блок смещен на 200 пикселов сверху и на 200 слева.</p>
</body>
</html>
Рис. 4.26. Абсолютное позиционирование в действии

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

элемент вашей страницы в окне браузера, используя фиксированные координаты.
Для начала придется потратить какое-то время, чтобы отменить некоторые сделан-
ные ранее изменения стилей. Нужно удалить свойства padding и border, добавленные
ранее.
1. Откройте файл style1.css и удалите объявления padding и border в правиле сти-
ля для элемента body.
2. В том же месте добавьте два новых объявления для установки значений padding
и margin равными нулю.
Правило стиля для элемента body будет таким:
chapter4\website_files\09_body_no_padding_or_margin\style1.css (фрагмент)
body {
line-height: 125%;
padding: 0;
margin: 0;
}
НИЧЕГО — ЭТО ЛИШЬ НИЧЕГО!

Какая разница между 0 футами, 0 метрами и 0 фарлонгами1? Никакой. Все они означают
нулевое расстояние, поэтому единица измерения не важна.
Этот принцип работает и в CSS — в данном случае можно не указывать единицу измерения
для значений свойств margin и padding.
Обновите страницу в вашем браузере, и вы увидите, как она выглядит (рис. 4.27).

Заголовки страницы — BubbleUnder.com (h1) и О нас (h2) — обрамлены полями,
размеры которых браузер определил по умолчанию, так как явно они не указаны.
Убрать эти поля — хорошая идея, ведь мы стремимся к тому, чтобы слегка «растря-
сти жирок» — расположить каждый заголовок как можно ближе к краям содержа-
щего его div-элемента. Это нужно для упрощения перемещений заголовка, а также
для обеспечения одинакового отображения страницы во всех браузерах.
1. Прокрутите содержимое файла style1.css и найдите правило стиля для заго-
ловка h1.
2. Добавьте объявление для присвоения свойству margin значения 0.
chapter4\website_files\10_headings_no_margin\style1.css (фрагмент)
h1 {
font-size: x-large;
color: white;
1
Хотя разницы никакой нет, 1 фарлонг составляет около 200 м. Эта единица измерения
используется в основном на скачках в Англии, США и Ирландии. — Примеч. пер.
Рис. 4.27. Отступы и границы удалены из правила стиля для body
padding-top: 2em;
padding-left: .4em;
margin: 0;
}
3. Найдите правило #tagline p и сделайте там то же самое.

chapter4\website_files\10_headings_no_margin\style1.css (фрагмент)
#tagline p {
font-style: italic;
padding-top: .2em;
padding-left: .8em;
margin: 0;
}
4. Обновите страницу в браузере. Пустое пространство, ранее располагавшееся

до и после заголовков, сейчас исчезло, как и показано на рис. 4.28.
Рис. 4.28. Убираем пустое пространство вокруг заголовков
Приготовьтесь. Сейчас все станет не просто уродливо, а ужасно! Но поверьте

мне, я проведу вас через эти неприятные процедуры быстро и безопасно (вы пой-
мете, зачем нужно было добавлять красные границы элементам страниц, пока их
положение не установлено окончательно).
1. Добавьте следующее правило в конец вашего CSS-файла.
chapter4\website_files\11_absolute_mess\style1.css (фрагмент)
#navigation, #bodycontent, #header {
position: absolute;
}
2. Сохраните файл style1.css.

3. Обновите страницу в браузере.
4. Сумейте пережить шок, когда вы увидите, как ужасно выглядит страница!
Ваша страница должна выглядеть так, будто ее подняли высоко в небо, по-
болтали в воздухе и уронили на землю. Все части смешались в кучу (рис. 4.29).
Но не беспокойтесь — это нормально!
Рис. 4.29. Абсолютное позиционирование вносит на страницу хаос
ЗАЧЕМ ВСЕ ЭТО?

Вы, наверное, недоумеваете, зачем сейчас умышленно поломали всю разметку и нужно ли
делать так каждый раз, когда вы создаете сайт. Не переживайте. Большинство веб-дизайне-
ров пропускают этот промежуточный шаг и просто сразу задают нужные позиции элементов.
Это умение приходит с опытом. Я уделил внимание этому этапу для лучшего понимания все-
го процесса.
Итак, что же произошло? Три раздела страницы расположены один на другом,

у всех задана абсолютная позиция — левый верхний угол браузера. Почему? По-
тому что вы велели браузеру именно так и поступить. Вы сказали, что позиция
абсолютная, но не упомянули, где она должна располагаться. Поэтому все оказалось
в куче: снизу заголовок — раздел header, затем блок навигации и в конце концов
область основного контента (bodycontent), царь горы!
Сейчас начнем наводить порядок, передвигая раздел навигации и область основ-
ного контента так, чтобы они располагались под заголовком. В файле style1.css
добавьте следующее правило:
chapter4\website_files\12_header_visible\style1.css (фрагмент)
#navigation, #bodycontent {
top: 120px;
}
Теперь блоки окажутся сдвинутыми вниз и заголовок не будет больше ничем
перекрыт, как видно на рис. 4.30.
Рис. 4.30. Сдвигание блока навигации и блока основного контента вниз на 120 пикселов

ликвидирует перекрытие заголовка
Что вы сейчас сделали? Вы указали браузеру сдвинуть блоки навигации и основ-

ного контента вниз на 120 пикселов — абсолютное значение относительно окна
браузера. Браузер беспрекословно выполнил это указание. А теперь нужно выдать
ему еще одно задание: сдвинуть блок основного контента вправо, чтобы он не пе-
рекрывал блок навигации. Поскольку ранее вы установили ширину блока навига-
ции равной 200 пикселам, сдвиньте раздел bodycontent вправо на 220. Это обеспечит
вам чистый сдвиг (и некоторый зазор между разделом основного контента и нави-
гационным блоком).
В файл style1.css нужно добавить следующий код. На всякий случай я полно-
стью привожу все шаги по позиционированию, так что заодно проверьте, все ли
в порядке с вашей таблицей стилей.
chapter4\website_files\13_body_content_positioned\style1.css (фрагмент)
position: absolute;
}
top: 120px;
}
#bodycontent {
left: 220px;
}
Посмотрите в браузере, что получилось. На рис. 4.31 показано, как должна вы-
глядеть ваша страница.
Рис. 4.31. Использование позиционирования для разграничения навигации

и основного контента
Осталось исправить небольшие недочеты, чтобы страница выглядела как по-

лагается:
заголовок и слоган не растянуты и не заполняют собой всю страницу;
есть немного неиспользованного пространства вокруг заголовка h1 и слогана;
красные границы и отступы между блочными элементами надо убрать, они уже
выполнили свою функцию;
нужно добавить комментарии в CSS-код, чтобы объяснить, что там было изме-
нено.
Сейчас вы все это сделаете одним махом. Вообще-то вы уже должны быть уве-
рены в том, что сможете сделать это самостоятельно. Попробуйте, но, как всегда,
не беспокойтесь — решение ждет вас далее. Сделайте этот сайт по-настоящему
крутым!
1. Позиция блоков навигации и основного контента должна быть на 107 пикселов
ниже верхнего края страницы вместо 120 — это обеспечит точнейшее совпадение
размеров после того, как вы уберете красные границы.
2. Затем укажите браузеру, что div-элемент, содержащий заголовок header, должен
занимать всю доступную ширину (то есть 100 % доступной ширины).
3. Красные границы, ранее применявшиеся ко всем элементам, нужно убрать — уда-
лите соответствующее правило.
4. И наконец, надо добавить комментарии к части кода, относящейся к позицио-

нированию элементов, чтобы затем вы вспомнили, что собирались делать. Это
позволит вам быстро припомнить назначение раздела и понять, что он опреде-
ляет размещение блоков на странице, а не добавляет какие-то «косметические»
эффекты.
Есть ли у вас мысли, как решить эту задачу? Далее приведена обновленная
таблица стилей — вернее, ее часть, относящаяся к размещению на странице эле-
ментов. Самое важное выделено полужирным шрифтом.
chapter4\website_files\14_almost_done\style1.css (фрагмент)
/*
Этот раздел определяет размещение элементов на странице. Здесь использовано абсо-
лютное позиционирование — координаты x и y контента заданы относительно левого
верхнего угла браузера.
*/

position: absolute;
}
top: 107px;
}
#bodycontent {
left: 200px;
}
#header {
width: 100%;
}
Самый главный вопрос: что эта разметка сделает с сайтом? Посмотрим. Соот-
ветствует ли результат в вашем браузере тому, что показано на рис. 4.32?
Ну, я почти счастлив. А вы? Заголовки и слоган лучше дополняют друг друга
благодаря сочетающимся границам. Задайте для заголовка (header) верхнюю гра-
ницу шириной 3 пиксела и установите для нее какой-нибудь светло-голубой цвет —
например, такой, как использовали для слогана. И, пожалуй, уберите точечную
рамку вокруг навигационного блока — сейчас, с новым красивым дизайном, она
не нужна.
chapter4\website_files\15_final_layout\style1.css (фрагмент)
#navigation {
width: 180px;
background-color: #7da5d8;
}
#header {
}
Рис. 4.32. Традиционный вид веб-страницы
Сохраните изменения в файле style1.css, обновите страницу в браузере и срав-

ните результат с рис. 4.33 — я очень надеюсь, что они совпадут!
Рис. 4.33. Готовый макет веб-страницы
Наконец страница выглядит так, как надо. Навигация — слева, именно там, где
все привыкли ее видеть, основное содержимое — справа, а заголовок растягивается
сверху на всю ширину окна браузера. Вам удалось создать полноценный CSS-макет,
который очень пригодится вам в будущем, когда захочется изменить вид сайта,
ведь макет применяется к каждой странице.
Вы заметили, что на протяжении всей главы вы не затрагивали ни HTML, ни
содержимое страницы? Все изменения вы выполняли лишь в CSS-коде. Вы убеди-
лись, что можно манипулировать контентом, используя комбинации границ, от-
ступов, ширины, размеров и позиционирования с помощью CSS. Представьте
только, что ваш проект будет существовать несколько лет, иметь много страниц
с разным содержимым — и изменить его дизайн будет все так же просто!
Вы хотите, чтобы блок навигации располагался с правой стороны? Нет проблем.
Просто поменяйте координаты этого раздела в CSS, сдвинув содержимое влево,
как вы меняете местами элементы мозаики, и вид сайта изменится, прежде чем вы
успеете об этом подумать. В этом и заключается могущество CSS в создании сай-
тов — и вы выучили только правильные способы!
4.6. Другие параметры разметки

Как я уже говорил, есть много способов изменить CSS-разметку. В этой книге я рас-
скажу о простейших методах, чтобы познакомить вас с самой идеей. С моей сторо-
ны было бы неразумно не упомянуть о других техниках размещения элементов,
которые вы можете использовать. Не беспокойтесь, я не собираюсь заставлять вас
переверстать сайт заново. Вместо этого я просто приведу несколько общих примеров,
как сделал это в начале главы. Но перед этим рассмотрим еще одну особенность,
связанную с абсолютным позиционированием, которую вы должны знать.
Абсолютное позиционирование — следующий

уровень!
До сих пор все ваше позиционирование было привязано к экрану. Когда вы хотите
определить позицию какого-то элемента, вы привязываете его к левому верхнему
углу страницы в окне браузера. Но когда вы начинаете экспериментировать с аб-
солютным позиционированием, например накладывая элементы друг на друга,
требуется другой подход.
Чтобы проиллюстрировать это, возьмем красный квадрат, показанный в при-
мере выше, и добавим к нему желтый квадрат:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Абсолютное позиционирование</title>
#redblock {
position: absolute;
top: 200px;
4.6. Другие параметры разметки 163
left: 200px;
background-color: red;
width: 120px;
height: 120px;
}
#yellowblock {
position: absolute;
top: 25px;
left: 25px;
background-color: yellow;
color: red;
width: 60px;
height: 60px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Абсолютное позиционирование</h1>
<div id="redblock">
<div id="yellowblock">Желтый!</div>
</div>
<p>Абсолютное позиционирование красного квадрата — смещение
на 200 пикселов сверху и 200 слева.</p>
<p>Желтый квадрат расположен внутри красного, на 20 пикселов
сверху вниз от него и на 20 пикселов слева направо.</p>
</body>
</html>
Сейчас мы поместили элемент div с id-атрибутом yellowblock внутрь элемента
div с id-атрибутом redblock, а затем задали для него абсолютное позиционирова-
ние — смещение на 20 пикселов сверху вниз и еще на 20 — слева направо. Как вы
думаете, где окажется желтый квадрат? Результат показан на рис. 4.34.
Рис. 4.34. Желтый блок отображается внутри красного

Как это получилось? Когда вы позиционируете элемент абсолютно (как наш

красный квадрат), все внутри него (в данном случае желтый квадрат) позициони-
руется относительно родительского элемента. Звучит, конечно, не очень логич-
но — вообще-то это уже следующий шаг, но мы не будем использовать такую
технику на учебном сайте. Я должен был рассказать о ней, чтобы вы могли ее при-
менять, создавая свои собственные сайты.
Относительное позиционирование
Применяя абсолютное позиционирование, мы размещаем все элементы относи-
тельно определенной точки начала координат: левого верхнего угла окна браузера
либо левого верхнего угла родительского элемента. С относительным позициони-
рованием любая величина смещения, которую вы укажете, будет применяться
относительно исходного местоположения элемента, до того, как вы примените
правило стиля. Вот несколько примеров правил стилей. Обратите внимание на
правило, которое применяется к элементам класса nudged:
p {
background-color: #ccc;
}
.nudged {
position: relative;
top: 10px;
left: 10px;
}
Далее я приведу HTML-код, в котором класс под названием nudged применен
к среднему абзацу:
<p>Наконец мы перешли к массажу, которого я ждал. Все началось с висков.
Затем парикмахер принялся перетаскивать верхнюю половину моего лица
к челюстям и обратно своими крупными сильными руками. Это, наверное,
хорошо для вас, но вовсе не подходит для меня, я уверен. Затем он
перешел к моим плечам и принялся скручивать меня так, что я визжал, как
поросенок. Это было отнюдь не расслабляюще, о нет! Мне было больно,
я был практически завязан в узел, но приходилось терпеть — должно быть,
так было нужно.</p>
<p class="nudged">Потом он схватил мою голову и с заметным треском изо всех
сил повернул ее вправо. А затем влево — уже без треска. И это был еще
не конец…</p>
<p>В заключение парикмахер взял большие щипцы, обмотал их ватой,
смоченной в чем-то вроде спирта, поджег и принялся вращать
их вокруг моей головы и ушей. Несколько волосков на голове
и ушах опалило огнем.</p>
Этот класс можно было бы применить к любому абзацу (и вообще к любому
блочному элементу). На рис. 4.35 показан текст с изначальным местоположе-
нием среднего абзаца, а затем — результат применения класса nudged к элемен-
ту р.
Рис. 4.35. Средний абзац оформлен так же, как остальные абзацы (слева), а затем расположен
относительно предыдущего местоположения (справа)
Заметьте, что разметка сдвинула абзац вниз и вправо на 10 пикселов так, что
левая и правая его границы теперь не соответствуют границам других абзацев. Это
действительно был толчок, а не просто отступ с левой стороны.
Кстати, если вам интересно, текст в этом примере расписывает «прелести» тра-
диционного турецкого бритья. Это приятно… если, конечно, вы любите удоволь-
ствия подобного рода!
Преимущества относительного позиционирования. В некоторых случаях от-
носительное позиционирование может быть лучше абсолютного, которое я пред-
ложил для нашего учебного сайта. Я сказал «в некоторых случаях», ибо это зависит
от компоновки вашей страницы, от браузера. Здесь нет четких правил. Например,
при выборе относительного позиционирования форматирование текста лучше
адаптируется к изменению размера шрифта в браузере (в Internet Explorer ис-
пользуется команда ВидРазмер текстаКрупный или Самый крупный). С фиксиро-
ванным размером области заголовка (в нашем случае 107 пикселов) значительное
увеличение шрифта текста может повредить его, приведя к тому, что текст выйдет
за пределы отведенного ему пространства и «наедет» на область навигации, как
показано на рис. 4.36. Однако, как упоминалось ранее в этой главе, большинство
браузеров в наше время увеличивают всю страницу пропорционально, а не одни
только текстовые области. Если же вы хотите масштабировать только текст, то
нужно залезть немного глубже в настройки браузера, чтобы найти этот параметр.
Посетители сайта также вряд ли будут тратить свое время на поиски способа уве-
личить только текст, так что эта проблема со временем теряет актуальность.
И все-таки почему мы использовали абсолютное, а не относительное позицио-
нирование в нашем учебном сайте? Дело в том, что относительное позициониро-
вание в CSS довольно сложно, и вы могли бы даже оставить свои намерения стать
веб-дизайнером, безрезультатно провозившись с ним долгое время. Опытные веб-
дизайнеры используют в работе сочетание абсолютного, относительного и плава
ющего позиционирования. К каждому проекту необходим свой индивидуальный
подход. С опытом вам достаточно будет взглянуть на макет страницы, чтобы при-
кинуть, какая схема лучше подойдет.
Рис. 4.36. Иногда очень большой размер шрифта

и фиксированное позиционирование плохо сочетаются друг с другом
РЕЗИНОВЫЙ ДИЗАЙН: РАСПРАВЬТЕ КРЫЛЬЯ

Существует подход к разработке веб-страниц, называемый резиновым дизайном, когда все
измерения задаются с использованием единиц em — границы, поля, отступы — все! Это уже
область профессионалов, и мы не будем рассматривать такой подход. Но для того, чтобы
познакомиться с возможностями резинового дизайна, попробуйте внести маленькое измене-
ние в проектную таблицу стилей.
Найдите место, где устанавливается позиция блока навигации и области основного контен-
та — 107 пикселов сверху вниз, и замените его следующим:
chapter4\website_files\16_em_based_positioning\style1.css (фрагмент)
# navigation, #bodycontent {
top: 6.54em;
}
Сохраните файл и обновите страницу в браузере. Видимых глазу изменений вы не заметите
до тех пор, пока не попробуете поменять размер шрифта. Теперь, поскольку div-элементы
позиционированы с использованием em, дизайн намного лучше сохраняет свой вид даже при
очень больших размерах шрифта. Выбор числа 6,54 кажется случайным. Я определил его
методом проб и ошибок, стремясь к сохранению расстояния от верхней части окна браузера
до нижней границы слогана, независимо от используемого размера шрифта.
Ранее в этой главе мы обсуждали тонкости выбора единиц измерения. Это и есть пример,
когда лучшим выбором будет использование em. Вы можете прочитать об этом подробнее
в статье Патрика Гриффита (Patrick Griffith) о резиновом дизайне1.
1
http://www.alistapart.com/articles/elastic.
Плавающее позиционирование
Техника, любимая многими веб-дизайнерами, — применение плавающих1 эле-
ментов, когда верстка страницы осуществляется с использованием свойства float.
Все просто: когда нам требуется обтекание какого-то элемента остальным содер-
жимым страницы, мы закрепляем одну его сторону, позволяя другим элементам
располагаться вокруг. Точно планируя, можно создать несколько плавающих эле-
ментов на странице и добиться эффекта верстки нескольких колонок, как в газете.
Рассмотрим простой пример:
#nav {
float: right;
width: 300px;
}
Здесь блок с id-атрибутом nav прикрепляется к правой части веб-страницы,

занимая 300 пикселов в ширину. Следующий за ним текст сдвигается, занимая все
свободное пространство, кроме float-элемента. Посмотрите, как этот эффект до
стигается с использованием HTML:
<div id="nav">
<ul>
<li><a href="index.html">Это область навигации — плавающий элемент,
зафиксированный справа</a></li>
<li><a href="turkish.html">История бритья по-турецки</a></li>
<li><a href="http://www.bubbleunder.com/">Рассказы дайверов</a></li>
</ul>
</div> 
<h1>История бритья по-турецки</h1>
перешел к моим плечам и принялся скручивать меня так, что я визжал,
как поросенок. Это было отнюдь не расслабляюще, о нет! Мне было больно,
<p>Потом он схватил мою голову и с заметным треском изо всех сил повернул ее
вправо. А затем влево — уже без треска. И это был еще не конец…</p>
На рис. 4.37 показано, как это выглядит в браузере.

1
Правильнее, конечно, было бы говорить «обтекаемые элементы», потому что элемент
не плавает, а как бы обтекается другим содержимым, как, например, картинка текстом.
Однако в русском языке прижился именно термин «плавающий». — Примеч. пер.
Рис. 4.37. Простой плавающий элемент в действии
Если вы не хотите, чтобы текст принимал форму буквы L и обтекал блок нави-
гации, добавьте в CSS свойство padding. В примере выше для блока навигации
установлена ширина 300 пикселов, так что, если вы добавите отступ шириной
310 пикселов с правой стороны для текста, он должен сделать свое дело. Вот об-
новленная версия файла:
#nav {
float: right;
width: 300px;
}
.contentconstrained {
padding-right: 310px;
}
Значение свойства класса contentconstrained должно применяться к div-элементу,
включающему в себя абзацы, вот так:
<div id="nav">
<ul>
<li><a href="index.html">Это область навигации — плавающий элемент,
зафиксированный справа</a></li>
<li><a href="turkish.html">История бритья по-турецки</a></li>
<li><a href="http://www.bubbleunder.com/">Рассказы дайверов</a></li>
</ul>
</div> 
<div class="contentconstrained">
<h1>История бритья по-турецки</h1>

перешел к моим плечам и принялся скручивать меня так, что я визжал,
как поросенок. Это было отнюдь не расслабляюще, о нет! Мне было больно,
<p>Потом он схватил мою голову и с заметным треском изо всех сил повернул ее
вправо. А затем влево — уже без треска. И это был еще не конец…</p>
</div> 
На рис. 4.38 показано, что должно получиться.
Рис. 4.38. Более аккуратный вид плавающего элемента
Мы используем плавающие элементы для учебного сайта лишь однажды — сде-

лаем плавающим изображение дайверов (помните о нем из главы 2?) на главной
странице. Однако, поскольку нам не нужно, чтобы «плавало» каждое изображение
на сайте, не следует применять CSS-правило ко всем элементам img. Мы напишем
правило стиля для нашего изображения c классом feature и назовем так элемент img,
используя селектор класса. Мы также зададим для него поля, что позволит распо-
ложить приветственный текст более красиво.
Отредактируйте главную страницу (файл index.html), сделав следующие изме-

нения в разметке:
<p><img src="divers-circle.jpg" class="feature" width="200"
height="162" alt="Группа дайверов тренируется"/></p>
Затем добавьте следующее правило в таблицу стилей, чтобы зафиксировать
изображение с правой стороны:
chapter4\website_files\17_floated_image\style1.css (фрагмент)
.feature {
float: right;
margin: 10px;
}
Сохраните изменения и посмотрите, как главная страница выглядит в браузере
(рис. 4.39).
Рис. 4.39. Изображение дайверов стало плавающим
Это, в общем-то, все, что я хотел рассказать вам о плавающих элементах. У них
есть неприятная особенность: приходится повозиться, чтобы добиться корректно-
го отображения нескольких плавающих элементов на странице. Если вы хотите
больше о них узнать, почитайте следующие книги издательства SitePoint: The CSS
Anthology: 101 Essential Tips, Tricks & Hacks1 и в особенности HTML Utopia: Designing
Without Tables Using CSS2.
1
http://www.sitepoint.com/books/cssant2/.
2
http://www.sitepoint.com/books/css2/.
4.7. Оформление списков 171
4.7. Оформление списков

Наш стандартный список элементов навигации может быть немного улучшен.
По умолчанию маркеры списка отображаются в виде маленьких черных кружоч-
ков, но можно придать им любую форму. Поэкспериментируем с нашей проектной
таблицей стилей.
1. В файле style1.css найдите селектор элемента li.
2. Добавьте туда следующее объявление (дополнение выделено полужирным
шрифтом):
style1.css (фрагмент)
li {
font-size: small;
list-style-type: circle;
}
3. Сохраните CSS-файл и обновите страницу в браузере.
4. Попробуйте изменить значение свойства list-style-type на disc, square и none,
каждый раз сохраняя файл и проверяя, как страница отображается в браузере.
Пожалуй, остановимся на значении none для сайта, и теперь навигационный
блок будет выглядеть, как показано на рис. 4.40.
Рис. 4.40. Отсутствие маркеров списка
К спискам можно применить и оригинальные решения, например:

сделать ссылки в виде кнопок, используя CSS-свойства border и padding;
создать большую кликабельную область для ссылки (которая не будет тек-
стом);
расположить элементы списка горизонтально.
Все эти интересные и сложные техники подробно рассматриваются в книге

Рейчел Эндрю (Rachel Andrew) The CSS Anthology: 101 Essential Tips, Tricks & Hacks1.
В издании почти целая глава уделена оформлению навигации, где предлагается
много стилей, которые вы можете испробовать. Я очень рекомендую вам прочесть
эту книгу, если вы хотите узнать множество крутых CSS-приемов (конечно, после
того, как вы усвоите основы!).
4.8. Резюме
Итак, это была еще одна очень важная глава. Вы изучили различия между внутрен-
ними и блочными элементами, затем рассмотрели разнообразные способы оформ-
ления блочных элементов, например добавление границ, отступов, изменение раз-
меров. Вы перешли от теории к практике, применив некоторые стили к учебному
сайту. И наконец, вы узнали, как может быть изменена внутренняя структура веб-
страницы с использованием CSS-позиционирования, а также ознакомились с ва-
риантами оформления списков.
Я надеюсь, вы получили личный опыт в использовании всех перечисленных
правил, а сейчас я приготовил для вас небольшой бонус. В следующей главе мы
рассмотрим, как можно быстро и просто применять все эти техники.
Далее мы поработаем с рисунками: вы узнаете, как с помощью CSS установить
фоновое изображение и внутренние изображения, которые могут быть помещены
на страницу как часть ее содержимого (например, фотография с дайверами из
главы 2).
1
http://www.sitepoint.com/books/cssant2/.
5 Начинаем рисовать!
Используем на сайте
изображения
Помните, в главе 2 мы пошли на некоторые компромиссы, чтобы наш сайт не вы-
глядел слишком скучно и бесцветно: добавили фотографию дайверов, используя
элемент img1. Это было сделано не просто так. Сеть — это в первую очередь визу-
альный канал передачи информации. Тексты без оформления могут удержать вни-
мание пользователей, только если они поистине выдающиеся, в то время как изо-
бражение «заменяет тысячу слов». К сожалению, тогда мы лишь слегка затронули
огромный пласт возможностей, связанных со вставкой изображений, чтобы поско-
рее добавить на страницу наш первый визуальный элемент.
В этой главе мы исправим это упущение и обсудим, как с помощью изображений
оживить сайт, а также как работать с фоновыми картинками. Кроме того, я объяс-
ню вам несколько простых техник для организации и обработки изображений
с использованием программ, которые предлагал установить в разделе «Не только
текст» главы 1.
Начнем с того, что рассмотрим внутристрочные изображения.
5.1. Внутристрочные изображения

Для добавления внутристрочного изображения используется такая разметка:
<img src="divers-circle.jpg" width="200" height="162"
alt="Группа дайверов тренируется"/>
Вы несколько раз видели эту строку в главе 2, но, наверное, не обращали на нее
особого внимания. Рассмотрим по порядку все части этой разметки.
Структура элемента img

Элемент, добавляющий на страницу изображение, содержит следующие компо-
ненты.
img — название элемента. Помните, что это — пустой элемент, и соответствующий
закрывающий тег2 для него не требуется. Закрывающий слеш / нужен здесь для
1
http://reference.sitepoint.com/html/img/.
2
Просматривая исходный код других сайтов, вы можете встретить тег img без закрыва
ющего слеша /. В ранних версиях HTML (4.01, например) не требовалось закрывать тег
таким образом. — Примеч. авт.
174 Глава 5. Начинаем рисовать! Используем на сайте изображения
того, чтобы удовлетворять правилам синтаксиса XHTML, и обозначает, что этот

элемент — «самозакрывающийся». С использованием типа документа HTML5,
который мы выбрали для учебного сайта, можно опустить закрывающий слеш
без вреда для разметки.
src — атрибут, указывающий источник изображения: расположение и название
файла, к которому должен обратиться браузер, чтобы показать изображение.
В нашем примере файл носит имя divers-circle.jpg.
alt — очень важный атрибут, о котором мы поговорим чуть позже.
height и width — эти атрибуты сообщают браузеру размеры, в которых должно
быть показано изображение. Это особенно важно для пользователей с медленным
интернет-соединением: браузер может как бы заранее «зарезервировать» место,
необходимое для загрузки изображения. Если вам когда-либо приходилось
загружать страницы с изображениями на небольшой скорости, то вы видели,
как страница «перестраивается» в ожидании рисунка с неуказанными высотой
и шириной. Это неприятно.
Атрибуты height и width очень важны, но, в отличие от src и alt, не являются
необходимыми. Однако ввиду их полезности большинство разработчиков исполь-
зуют эти атрибуты.
Атрибут alt, с которым изображение становится доступным каждому. В нашем
проектном сайте элемент img имеет атрибут alt со значением Группа дайверов тре-
нируется. Для чего он нужен? Все просто: атрибут alt представляет собой альтер-
нативную текстовую версию изображения, которую большинство людей увидят на
экране. Я сказал «большинство», так как есть люди, которые не смогут увидеть само
изображение. Например:
слепые или слабовидящие пользователи Интернета (см. пункт «Экранные дик-
торы: Интернет можно слушать» подраздела «Веб-доступность» этого раздела);
пользователи с медленным интернет-соединением, у которых изображения
загружаются долго (до окончания загрузки вместо рисунка отображается текст
из атрибута alt);
пользователи с очень медленным интернет-соединением — настолько медлен-
ным, что изображения могут не загрузиться вообще.
Во всех этих примерах атрибут alt предлагает пользователям альтернативный
путь получения нужной им информации. На рис. 5.1 показано, что увидят пользо-
ватели из второго и третьего пунктов списка.
Если у пользователей сайта медленное интернет-соединение, а страница загру-
зится в виде, показанном на рис. 5.1, то они смогут прочитать альтернативный текст
и, основываясь на этом описании, решить, ждать загрузки изображения или перей-
ти по ссылкам куда-нибудь еще. Этот атрибут помогает также тем, кто установил
в браузере флажок Не загружать изображения. Если описание интересно, то пользо-
ватель сможет загрузить рисунок (в Internet Explorer зайдите в СервисСвойства
обозревателяДополнительно и в разделе Мультимедиа установите флажок Показывать
изображения).
5.1. Внутристрочные изображения 175
Рис. 5.1. Вот что отображается вместо рисунка при медленном интернет-соединении
Для слепых и слабовидящих пользователей эта настройка необходима. Она

позволяет им получить полную информацию о содержимом страницы.
Веб-доступность1
Практика присвоения элементу img атрибута alt берет свое начало от одного из
главных принципов веб-доступности. Это область веб-дизайна и программиро-
вания, на которой специализируется много людей. Работать с этой областью не-
просто, но я постараюсь дать вам общее представление о ней. По-настоящему
доступный сайт открыт для всех и может быть использован даже людьми с огра-
ниченными возможностями.
Есть несколько категорий пользователей с ограниченными возможностями.
Они могут столкнуться с определенными проблемами.
Слабовидящие люди. Не слишком ли мелок шрифт вашего сайта? Может ли он
увеличиться?
Слепые люди. Присутствуют ли атрибуты alt и достаточно ли исчерпывающе
они описывают изображения?
Глухие люди. Если вы применяете на сайте звуковые элементы, например
аудиоинтервью, есть ли у него альтернативная текстовая версия?
Люди с ограниченными двигательными возможностями. Может ли такой посе-
титель свободно двигать мышью? Если нет, может ли он использовать навигацию
сайта с помощью одной только клавиатуры?
Люди, имеющие проблемы с чтением. Не слишком ли сложны для восприятия
тексты на вашем сайте? Смогут ли их понять люди, страдающие дислексией,
или те, для кого язык сайта — неродной?
1
Web Accesibilty (англ). К сожалению, на русском языке информации по этой теме прак-
тически нет (на момент перевода книги) и искать нужные сведения придется на англий-
ском. — Примеч. пер.
Это очень сложная и глубокая тема, выходящая за рамки данной книги, по-
этому я не буду приводить здесь детальные описания решений проблем, пере-
численных выше. Попробуйте подумать над ними сами. Впрочем, достаточ-
но лишь аккуратно использовать атрибуты alt, и это сделает ваш сайт более
доступным.
Если вы хотите больше узнать о веб-доступности, то посетите сайт Dive Into
Accessibility1 — бесплатный и надежный источник знаний.
Экранные дикторы: Интернет можно слушать

В старые времена слепые люди читали печатные издания, написанные шрифтом
Брайля, или просили своих друзей прочитать им какие-либо тексты вслух. С на-
ступлением эпохи электронных медиа и развитием веб-страниц они получили
альтернативу: экранные дикторы. Так называют программное обеспечение, ко-
торое основывается на звуковом, а не визуальном отображении веб-страницы —
читает вслух тексты, появляющиеся на экране. Одни экранные дикторы предна-
значены только для веб-страниц, а другие помогают в работе с операционной
системой и разнообразными приложениями, включая почтовые клиенты и офис-
ные продукты.
Для заботы о слепых и слабовидящих пользователях очень важно внимательно
относиться к атрибутам alt. Экранный диктор будет читать их вслух, переходя от
изображения к изображению на вашей веб-странице. Как показано на рис. 5.2,
изображение без описания либо с неинформативным описанием (например, содер-
жащим одно только слово IMAGE) совершенно бесполезно.
Рис. 5.2. Бесполезный атрибут alt
Если вы хотите сами исследовать работу экранных дикторов, особенно ка-

сательно обработки изображений, то можете установить симулятор програм-
1
http://diveintoaccessibility.info/.
5.1. Внутристрочные изображения 177
мы WebAIM Screen Reader1. Если же вы хотите опробовать экранный диктор на

собственном сайте, скачайте пробную версию программы JAWS (для Windows)2.
Что может дать хороший атрибут alt?

Я уже много писал об alt-атрибутах, возможно, с некоторой долей субъективизма.
У разных людей разные мнения относительно того, какое описание следует считать
исчерпывающим и полным. К счастью, существует несколько простых правил,
которыми вы можете руководствоваться.
Если в изображении представлена важная информация, старайтесь описать его
точно, но кратко. Например, сравните рис. 5.3 и код, приведенный ниже:
Рис. 5.3. Опишите это изображение!
<img src="sydney.jpg" width="500" height="354"

alt="Оперный театр в Сиднее ночью на фоне моста Харбор Бридж"/>
Если изображение чисто декоративное и не несет никакой полезной информа-

ции, используйте пустой атрибут alt. Таким образом вы сообщите экранному
диктору, что изображение второстепенно и нет необходимости его описывать.
Но помните, что пустой атрибут alt не эквивалентен отсутствию такового!
Если рисунок будет применяться в качестве ссылки, не надо описывать то, что
на нем изображено; опишите его функцию. Например, если изображение сид-
нейского оперного театра используется как вызов какой-то функции, отразите
это в атрибуте alt. Посмотрите, как этот атрибут на рис. 5.4 применяется для
описания такой функции:
<a href="win-holiday.html"><img src="win-a-trip.jpg"
width="500" height="354" alt="Выиграй поездку в Сидней!"/></a>
1
http://www.webaim.org/simulations/screenreader/.
2
http://www.freedomscientific.com/products/fs/jaws-product-page.asp.
Рис. 5.4. Использование изображения в качестве ссылки
Существует очень много других особенностей веб-доступности, и, возможно,

вы когда-нибудь познакомитесь с ними поближе. А для начала будет достаточно
обращать внимание на атрибуты alt.
5.2. JPEG, GIF или PNG?

Возможно, вам интересно, почему изображения имеют разные расширения: GIF,
JPG или PNG. Сейчас я объясню их отличия — это важно.
JPEG, GIF и PNG — наиболее широко применяемые в Интернете форматы
изображений. Каждый из них имеет свои преимущества. Вот краткая информация
о том, как оптимально использовать эти форматы.
JPEG — лучший формат для фотографий. Такие изображения не слишком
много весят из-за использования «сжатия с потерями» (lossy compression), что
значит потерю некоторых деталей оригинального изображения в процессе
уменьшения размера. Для фотографий эффект потери деталей минимален,
а вот изображения, содержащие четкие, резкие линии (например, логотипы
или графические иллюстрации) при таком способе сжатия могут стать размы-
тыми.
GIF — идеален для логотипов и иллюстраций — изображений, имеющих большие
одноцветные фрагменты. Однако для фотографий это не лучший выбор, так как
GIF отображается только в 256 цветах. Это число кажется большим, но обычная
цветная фотография может содержать миллионы разных цветов! Формат GIF
также позволяет сделать часть изображения прозрачной (мы очень скоро пого-
ворим об этом).
5.3. Прозрачность 179
PNG — сочетает в себе преимущества обоих предыдущих форматов (миллионы

цветов и прозрачность) и имеет собственные достоинства. Правда, у него есть
один недостаток: PNG не поддерживается в полной мере в Internet Explorer 6.
Учитывая, что актуальная в настоящее время версия — Internet Explorer 9, эта
проблема не так уж страшна, но все же кто-то еще продолжает пользоваться
Internet Explorer 6, и для них PNG-иллюстрации будут отображаться не совсем
корректно.
5.3. Прозрачность
При сохранении изображение становится прямоугольным и заполняет все доступ-
ное пространство. Но представьте, что ваша картинка имеет другую форму — на-
пример, овальную, как логотип компании на рис. 5.5. Прямые углы изображения
не позволят красиво установить его в качестве фонового рисунка, но это можно
сделать с помощью формата GIF. Из 256 цветов, поддерживаемых этим форматом,
один используется для создания прозрачности, как показано на рис. 5.5.
Рис. 5.5. Различия между поддержкой прозрачности в форматах JPG и GIF
Да, GIF поддерживает прозрачность, но, пожалуй, неидеально. Изображение

имеет как бы «матовый» оттенок вокруг прозрачной области. Поскольку только
один из 256 цветов может быть прозрачным, то, когда мы располагаем GIF-изобра-
жение на разноцветном фоне, прозрачность будет идеальной лишь в определенных
местах. Если вы посмотрите на верхнее изображение (см. архив кода, chapter 5\
examples\04_transparency), то заметите эффект наложения фона логотипа на нижнюю
часть баннера. Наверное, можно подобрать лучший тип рисунка?
Прозрачность в PNG. Несомненно, лучший формат изображений для создания
эффекта прозрачности — PNG, потому что в нем прозрачность создается с помощью
альфа-канала1. Это значит, что PNG использует разные уровни прозрачности, а не

просто включает или отключает ее, как GIF.
Хороший пример — сайт, над которым я какое-то время работал вместе с дизай-
нером Джоном Хиксом (Jon Hicks). В верхней части страницы — изображение
машины скорой помощи с замечательным эффектом прозрачности, включая легкую
тень под автомобилем. Все современные браузеры прекрасно справляются с обра-
боткой этого изображения, чего нельзя сказать о старом добром Internet Explorer 6, —
в нем вокруг машины появляется фон (маска). Работая над сайтом, мы изучили
статистику применения различных браузеров и выяснили, что пользователей
Internet Explorer 6 — около 1 %. Поэтому вполне приемлемо оставить вариант, при
котором картинка идеально отображается для остальных 99 % пользователей, ведь
функциональность сайта доступна для всех.
Рис. 5.6. Internet Explorer 6 с некорректным отображением прозрачности (справа)

и Firefox 3.6 с корректным (слева)
5.4. Создание галереи изображений

Одно из невероятных удовольствий в дайвинге — наблюдать за удивительными
существами, живущими в море. Вы можете попробовать описать эти чудеса че-
ловеку, далекому от дайвинга, но слушатель вряд ли получит полное представ-
ление.
Настало время немного расширить учебный сайт, добавив ему новую страницу:
простую галерею изображений. Прежде чем мы перейдем непосредственно к ней,
нужно немного изменить существующие веб-страницы, чтобы добавить к ним
новую.
1
Еще известен как маска-канал. — Примеч. пер.
5.4. Создание галереи изображений 181
Обновление навигации
Для того чтобы добавить новый элемент навигации, выполните следующее.
1. Откройте страницу index.html в текстовом редакторе.
2. Найдите блок навигации и добавьте в него еще одну ссылку:
<ul>
<li><a href="gallery.html">Фотогалерея</a></li>
</ul>
3. Сохраните файл и проверьте в браузере, что ссылка вставлена правильно.
4. Повторите процедуру для файлов about.html и contact.html.
Навигация на всех ваших страницах должна выглядеть, как показано на
рис. 5.7.
Рис. 5.7. Добавление фотогалереи в навигацию
У нас возникла одна маленькая проблема. Фотогалереи пока не существует!

Займемся ею.
Добавление новой страницы для фотогалереи

Для создания страницы фотогалереи сделайте следующее.
1. Создайте копию файла contact.html и назовите его gallery.html, как делали
в главе 2.
2. Откройте вновь созданный файл gallery.html в текстовом редакторе и измени-
те содержимое элемента h2 (заголовок второго уровня) на Фотогалерея.
3. Уберите единственный абзац текста, который находится ниже заголовка, и за-
мените его следующим.
chapter5\website_files\01_link_in_nav\gallery.html (фрагмент)
<p>Здесь представлены самые впечатляющие фотографии, когда-либо сделанные
членами клуба на пленочную или цифровую фотокамеру.</p>
<p>Если вы хотите добавить сюда свое фото,
<a href="mailto:bob@bubbleunder.com"> напишите мне</a> (Боб).</p>
4. Измените содержимое элемента title на: Фотогалерея. Подводные фотографии.
5. Сохраните изменения и проверьте в браузере, что получилось.
Добавление первого изображения

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

в конце концов, это действительно интересно, не так ли? Фотография заслужи-
вает более подробного описания, чем просто «Изображение черепахи», которое
не несет никакой информации. Вот разметка, которую мы используем для этого
изображения:
<p><img src="gallery/turtle-bite.jpg" width="400" height="258"
alt="Черепаха отлично себя чувствует, плавая среди кораллов,
несмотря на старую травму от зубов акулы"/></p>
ГДЕ ВЗЯТЬ КАРТИНКУ?

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

ный слеш / сообщает браузеру, что изображение находится внутри папки. В данном
случае gallery/turtle-bite.jpg информирует браузер о том, что файл turtle-bite.jpg
находится внутри папки gallery. Поэтому, прежде чем добавлять изображение в гале-
рею, создайте папку gallery внутри папки, где хранятся файлы вашего сайта (как это
сделать, описано в главе 1). В Windows выполните команду ФайлСоздатьНовая
папка; в Mac — FileNew Folder (ФайлНовая папка). Затем поместите изображение
в новую папку.
После этого добавьте следующую разметку в файл gallery.html.
chapter5\website_files\01_link_in_nav\gallery.html (фрагмент)
<h2>Фотогалерея</h2>
<p>Здесь представлены самые впечатляющие фотографии, когда-либо сделанные
членами клуба на пленочную или цифровую фотокамеру.</p>
<p>Если вы хотите добавить сюда свое фото,
<a href="mailto:bob@bubbleunder.com"> напишите мне</a> (Боб).</p>
<p><img src="gallery/turtle-bite.jpg" width="400" height="258"
несмотря на старую травму от зубов акулы"/></p>
Сохраните страницу и убедитесь, что она правильно отображается в браузере,
как показано на рис. 5.9.
Рис. 5.9. Фотогалерея обретает форму

Форматирование рисунков
с использованием CSS
При создании галереи изображений многие люди делают одну и ту же распростра-
ненную ошибку: применяют графические программы для создания границ вокруг
изображений. Как вы помните из главы��
 ��
3, для создания разнообразных рамок мож-
но использовать CSS. Применим сейчас эту технику! Как насчет тонкой белой
границы, как на снимках Polaroid?
1. Откройте файл style1.css и добавьте новое правило для элементов img.
chapter5\website_files\03_polaroid_effect\style1.css (фрагмент)
img {
border: 15px solid white;
}
2. Сохраните CSS-файл и обновите в браузере веб-страницу gallery.html. Она

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

ментировать с эффектами, которые мы рассматривали в главе 4. Для проектного
сайта я выбрал белую границу — возможно, это слишком консервативно, но вы
сможете изменить этот стиль, как только вам захочется.
ОСТЕРЕГАЙТЕСЬ ЭФФЕКТА ДОМИНО

Если сейчас вы посмотрите на главную страницу, то убедитесь, что фотография дайверов
тоже обведена толстой белой рамкой. Верно, мы определили это правило для всех изобра-
жений и браузер лишь следует нашим указаниям. Если вы хотите применить правило только
для одного изображения, просто добавьте более приоритетный селектор. Не отвлекайтесь на
это сейчас, но запомните на будущее, так как мы вернемся к данной проблеме в разделе
«Основы редактирования изображений».
Именование изображений
Возьмите любую газету, пролистайте ее, и вы убедитесь, что все фотографии там
снабжены подписями. Это стандартная практика, и сейчас я собираюсь показать
вам, как можно добавить подписи к изображениям на нашем сайте. Сначала по-
думаем, какая информация должна появиться под фотографиями. Наверное,
это должно быть описание снимка, включающее место съемки и имя фотографа.
Все эти элементы нужно единообразно отформатировать, для чего я собираюсь
использовать два новых стиля.
КОГДА CAPTION — ЭТО НЕ НАЗВАНИЕ?

Вообще-то в HTML не всегда была возможность добавления подписей рисункам. Существует
элемент, который называется просто caption, однако он используется для именования таблиц,
которые мы будем рассматривать в главе 6.
Два новых элемента, появившихся в HTML5, называются figure и figcaption. Работа с их появ-
лением стала бы прекрасна, если бы не старина Internet Explorer 6. Здесь придется дать не-
которые разъяснения, что я и сделаю в главе 9, а сейчас будем использовать технику, которая
отлично работает во всех браузерах и соответствует стандартам HTML.
1. В файле gallery.html удалите открывающий и закрывающий теги абзацев,

которые заключают в себя картинку черепахи, и замените их тегами <div
class="galleryphoto"> и </div>.
chapter5\website_files\04_unstyled_caption\gallery.html (фрагмент)
<div class="galleryphoto">
<img src="gallery/turtle-bite.jpg" width="400"
height="258" alt=" <img src="gallery/turtle-bite.jpg"
width="400" height="258"
несмотря на старую травму от зубов акулы"/>
</div>
2. Затем добавьте абзац после изображения (внутри контейнера div).

<img src="gallery/turtle-bite.jpg" width="400"
height="258" alt="Черепаха отлично себя чувствует, плавая среди
кораллов, несмотря на старую травму от зубов акулы"/>

<p>Эта черепаха довольно грациозно плавала у Большого Барьерного Рифа
(Квинсленд, Австралия), несмотря на отсутствующий с правой стороны
фрагмент панциря, предположительно после атаки акулы.
[Фотограф: Йен Ллойд]</p>
</div>
3. Добавьте элемент span вокруг имени фотографа, чтобы оформить его от
дельно.
<span class="photocredit">[Фотограф: Йен Ллойд]</span></p>
4. Сохраните файл gallery.html и проверьте результат в браузере. Страница долж-

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

Общее правило для подписей картинок — их шрифт должен отличаться от ос-

новного текста документа. Это касается в том числе насыщенности и размера
шрифта. Кроме того, пространство между текстом и фотографией слишком велико,
и я сейчас покажу вам, как исправить это с помощью свойства margin. И наконец,
я собираюсь немного изменить фон подписи, что поможет нам, когда придет время
добавить больше фотографий в галерею.
1. Откройте файл style.css и добавьте следующее правило.
chapter5\website_files\05_styled_caption\style1.css (фрагмент)
.galleryphoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}
Правило стилей вносит необходимые изменения шрифта, увеличивая ширину

подписи для того, чтобы ее легче было читать, убирает пробелы перед абзацем,
описывающим фото, и сокращает расстояние между строками для большей
компактности.
2. Теперь добавьте новое правило для класса photocredit.
.photocredit {
color: gray;
}
Это правило применится лишь к тексту, находящемуся внутри элемента

span.
ЕСТЬ И ДРУГОЙ ПОДХОД

Конечно же, вы можете использовать и другие селекторы, чтобы достичь того же эффекта,
не вводя отдельный класс photocredit. Например, так:
.galleryphoto p span {
color: gray;
}
Этот контекстуальный селектор означает: для каждого элемента span внутри элемента p, ко-
торый находится внутри элемента класса galleryphoto, шрифт должен быть серого цвета
и нормального начертания. Если вы остановитесь на этом варианте, то можете убрать атрибут
class из элемента span. Я предложил использовать селектор класса с далеко идущими целями,
например, если вы захотите добавить имена фотографов где-то еще на сайте, а не только
в фотогалерее.
3. Сохраните CSS-файл, обновите страницу еще раз и полюбуйтесь на свою рабо-

ту. Страница должна выглядеть, как показано на рис. 5.12.
Рис. 5.12. Подпись — теперь в новом стиле
Сейчас вспомним о том, что наша прекрасная белая рамка для фотографий га-
лереи применяется ко всем изображениям на сайте. Эту проблему очень легко
решить. Тег <img> для снимков галереи сейчас размещается внутри элемента div,
у которого есть класс galleryphoto.
Можно использовать это имя класса в селекторе правила, которое применяется
к рамке:
.galleryphoto img {
}
Если вы внесете это изменение в разметку, то белой рамкой будут обведены

только фотографии галереи. Проблема решена! Разве CSS не удивительная
штука?
В заключение добавим несколько стилевых объявлений в правило .galleryphoto.

Внесем изменения в код элемента div, который содержит изображения и подписи
к ним.
Этот класс поможет нам отделить друг от друга много разных фотографий,
которые будут загружены на страницу.
1. Добавьте следующий код в файл style1.css.
chapter5\website_files\07_custom_divider\style1.css (фрагмент)
.galleryphoto {
padding-bottom: 20px;
border-bottom: 1px solid navy;
margin-bottom: 10px;
}
2. Сохраните файл и обновите страницу в браузере. Она должна выглядеть, как

показано на рис. 5.13.
Рис. 5.13. Отдельный элемент создает разделительную черту

между фотографиями
5.5. Основы редактирования

изображений
Обрезка изображений
При подготовке изображений для загрузки на веб-страницу легко повредить их, стре-
мясь, чтобы они вместились в определенное пространство, но пренебрегая обрезкой.
Очень распространенная ошибка — значительное уменьшение изображений с сохра-
нением всего их содержимого. После того как изображение уменьшено, мелкие
и крупные детали сливаются воедино и становится сложно разобрать суть. Гораздо
лучше сначала обрезать картинку, выделив главное, а уже затем изменить размер
(о чем мы поговорим чуть позже). На изображении, показанном на рис. 5.14, про-
странство голубой воды вокруг рыбки лишнее. Мы можем сделать это изображение
меньше, сохранив размер самой рыбки, — для этого нужно выполнить обрезку.
Рис. 5.14. Изображение рыбки до обрезки
Picasa
В главе 1 я советовал пользователям Windows скачать и установить программу
Picasa, предназначенную для редактирования изображений (как собственных
снимков, так и фотографий для сайта). Кроме этого, Picasa позволяет одним нажа-
тием кнопки применять к снимкам специальные эффекты. Представьте, что мы
увеличим втрое папку gallery, добавив туда еще два снимка! После того как вы уста-
новите Picasa, любое изображение, добавленное в эту папку, будет автоматически
появляться в библиотеке Picasa (рис. 5.15).
Двойной щелчок кнопкой мыши на любом из изображений откроет панель
инструментов для обработки, расположенную с левой стороны (рис. 5.16).
Наверное, один из самых важных инструментов здесь — Crop (Обрезка). Вы мо-
жете убрать все ненужное по краям фотографии, чтобы выделить основную часть
изображения.
5.5. Основы редактирования изображений 191
Рис. 5.15. Picasa — расширение галереи изображений
Рис. 5.16. Набор основных инструментов для обработки изображений,

предлагаемых Picasa
Нажмите кнопку Crop (Обрезка) и выделите мышью прямоугольную область,

которую хотите оставить от исходного изображения (рис. 5.17). Вы можете также
задать обрезку в заранее подобранных пропорциях, нажав одну из следующих
кнопок: 10 × 15, 13 × 18, 20 × 25. Выбрав размер, нажмите кнопку Apply (Применить),
чтобы окончательно обрезать фотографию.
Рис. 5.17. Изображение рыбки отлично обрезано — выделено самое главное
Preview
В главе 1 я упоминал небольшую удобную программу для пользователей Mac,
которая называется Preview. Она по умолчанию открывает в Mac PDF-документы,
но также имеет несколько встроенных функций для редактирования изображе-
ний. Я никогда не убираю Preview с панели быстрого доступа — это мое любимое
приложение для обработки изображений. Я просто выделяю в Finder изобра-
жения, которые хочу отредактировать, и перетаскиваю их на ярлык Preview.
Они открываются в этой программе в таком виде: уменьшенные эскизы изобра-
жений справа и выбранное изображение слева. Чтобы обрезать изображение,
я щелкаю на нем кнопкой мыши и выделяю область, которую хочу оставить,
а затем нажимаю сочетание клавиш Command+K (или выбираю меню ToolsCrop
(ИнструментыОбрезка)). Программа Preview обрезает изображение, но — это
важно! — не  сохраняет файл. Можете сохранить его, выбрав команду FileSave
(ФайлСохранить). Если же у вас много изображений, требующих обрезки, сде-
лайте следующее.
1. Пройдитесь по всем изображениям, обрезая их, как вам нужно.
2. Как только вся обрезка выполнена, выберите меню FileSave All (ФайлСохра-
нить все). После закрытия Preview вы можете быть уверены, что ничего не по-
теряли. Программа напомнит вам, что вы сделали много изменений, и спросит,

хотите вы сохранить их или отменить. Это много раз спасало мою работу, чест-
ное слово!
Чтобы обрезать изображение, откройте его и выберите инструмент Selection
(Выделение) из списка, расположенного справа от вашего рисунка. Нажмите кноп-
ку мыши и растягивайте область, которую хотите сохранить. Затем выберите в меню
команду EditTrim Selection (ПравкаОбрезать выделенное) (рис. 5.18). Вуаля!
Рис. 5.18. Обрезка изображений в программе Preview
Специальные эффекты
Программы вроде Photoshop предлагают огромное количество специальных эф-
фектов, а обо всех доступных там техниках написано множество книг. Нужно ли
объяснять, что в этой книге нет возможности дать полное описание таких техник,
но даже те программы, которые мы рассмотрели, располагают подходящими функ-
циями. Исследуем их!
Picasa
На рис. 5.19 показан скриншот нашей успешно обрезанной картинки с рыбкой.
В левой части окна на вкладке Effects (Эффекты) приведен список различных
эффектов, которые можно применить к рисунку. Доступны, например, сепия, чер-
но-белые цвета, мягкий фокус и т. п.
Рис. 5.19. Специальные эффекты в Picasa
Я, пожалуй, оставлю это изображение как есть. Вы теперь знаете, где найти
набор разнообразных эффектов, — попробуйте поэкспериментировать!
Preview
Preview никогда не позиционировалась как графическая программа. Но если в ва-
шем распоряжении нет iPhoto, воспользуйтесь Preview, расположенной в папке
Applications (Приложения). Хотя это и не полноценный графический редактор, про-
грамма имеет некоторые полезные функции, заслуживающие внимания.
Preview отлично справляется с конвертацией файловых форматов. Я часто от-
крываю изображение в Preview и выбираю команду Save As (Сохранить как).
Например, откройте BMP-файл (растровое изображение) и сохраните его как
PDF. Таким образом, если ваше изображение не годится для размещения в Ин-
тернете, с помощью Preview вы можете преобразовать его в GIF, JPG или PNG.
Preview позволяет не только обрезать, но и вращать изображения, поворачивать
их вокруг вертикальной или горизонтальной оси, настраивать цвета (причем на
высоком уровне).
Кроме того, в Preview вы можете аннотировать изображения. Инструменты для
этого незамысловаты, но все же позволяют поместить на изображение текст,
а также выбрать для него шрифт, размер, цвет и другие основные свойства.
Ничего особенного, но минимальными усилиями вы можете добиться неплохих
результатов и сохранить их в формате по своему выбору.
Уменьшение больших изображений

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

изображения называется jellyfish.jpg. Это огромная фотография — 1359 пикселов
в ширину, поэтому ее нужно значительно уменьшить. Вот как вы можете сделать
это в различных программах.
Picasa
Если где-то на жестком диске у вас уже есть изображения, они автоматически по
явятся в библиотеке Picasa. Ниже описан простой способ создать подходящее для
веб-страницы изображение из большой фотографии.
1. Найдите нужное изображение в галерее Picasa и щелкните на нем кнопкой
мыши.
2. Выберите в меню команду FileExport Picture to Folder (ФайлЭкспортировать
картинку в каталог).
3. Откроется диалоговое окно (рис. 5.20), которое позволит вам выбрать ширину
из предлагаемого перечня подходящих для Интернета размеров: 320, 480, 640,
800 и 1024 пикселов. Вместо этого введите в текстовое поле значение 400. Вы мо-
жете также выбрать способ JPEG-сжатия в списке Image Quality control (Управ-
ление качеством изображения). Чем ниже число, тем меньше размер изображе-
ния и… тем хуже выглядит ваша фотография.
Рис. 5.20. Экспорт большого изображения в Интернет с помощью Picasa
4. Нажмите кнопку Browse (Обзор) и выберите папку Web, где лежат файлы для
вашего сайта. Но не выбирайте папку gallery! Если вы это сделаете, Picasa создаст
вторую папку gallery внутри первой.
5. В поле Name of exported folder (Имя экспортированного каталога) введите назва-

ние папки, куда вы хотите сохранить измененное изображение. В данном случае
нужно ввести gallery.
6. Нажмите кнопку OK, и измененное изображение будет сохранено.
Preview
Для уменьшения снимка в программе Preview нужно выполнить следующее.
1. В меню выберите ToolsAdjust Size (ИнструментыКорректировать размер).
2. Откроется новое диалоговое окно для выбора размеров изображения. В каче
стве единиц измерения могут быть указаны сантиметры или другие единицы.
Но вы работаете с изображениями для Интернета и, в принципе, для отображе-
ния на экране, поэтому выберите в списке пикселы.
3. Введите значение 400 (высота будет уменьшена пропорционально). Нажмите
кнопку OK.
4. Сохраните файл командой FileSave (ФайлСохранить).
Другое программное обеспечение

Я привел инструкции только для Picasa (Windows) и Preview (Mac), но с этими
задачами справится и множество других программ. Если вы не можете понять, как
выполнить подобную процедуру в вашем графическом редакторе, попробуйте вос-
пользоваться справкой или поищите обучающие материалы в Интернете (напри-
мер, по запросу уменьшение изображений Photoshop).
ПОИСК ОБУЧАЮЩИХ МАТЕРИАЛОВ

Быстрый поиск в Google предлагает следующие материалы:
yy видео на YouTube: Photoshop Tutorial: How to Recize an Image (http://www.youtube.com/
watch?v=qu5adJfxuhw);
yy статью How to Resize an Image in Paint Shop Pro Photo (http://www.ehow.com/how_2322677_
resize-image-paint-shop-pro.html);
yy отличный обучающий материал по iPhoto от Apple’s (http://www.apple.com/support/iphoto/
tutorial/).
5.6. Наполнение галереи

По мановению волшебной палочки — сделаем вид, что мы вовсе не пользовались
HTML, CSS и редактированием изображений — мы можем легко завершить соз-
дание галереи. Результат показан на рис. 5.21. И, конечно, вы всегда можете найти
файлы в архиве кода.
chapter5\website_files\08_complete_gallery\gallery.html (фрагмент)
<img src="gallery/turtle-bite.jpg" width="400" height="258"
5.6. Наполнение галереи 197
несмотря на старую травму от зубов акулы"/>

<span class="photocredit">[Фотограф: Йен Ллойд]</span></p>
</div>
<img src="gallery/jellyfish.jpg" width="400" height="300"
alt="Большая рыба преследует маленькую"/>
<p>Джилл сделала эту фотографию, плавая всего лишь с маской и трубкой.
Медузы собрались в паре футов от поверхности, и свет был отличный.
Джилл уверяет, что у медуз не было противных колыхающихся плавников!
<span class="photocredit">[Фотограф: Джилл Смит]</span></p>
</div>
<img src="gallery/turtle-face.jpg" width="400" height="300"
alt="Черепаха, закусывающая кораллами, макросъемка"/>
<p>"Я был рядом с ней, когда она отведала на обед несколько кораллов —
что это были за звуки!
<span class="photocredit">[Фотограф: Пол Спенсер]</span></p>
</div>
<img src="gallery/what-a-star.jpg" width="400" height="318"
alt="Морская звезда, раскрашенная в черный и белый цвета"/>
<p>Ты звезда — и никто не сможет возразить!
<span class="photocredit">[Фотограф: Хелен Гринфилд]</span></p>
</div>
<img src="gallery/reef2.jpg" width="400" height="285"
alt="Еще один прекрасный снимок Большого Барьерного Рифа"/>
<p>Еще один впечатляющий снимок от Марка.
<span class="photocredit">[Фотограф: Марк Вильямс]</span></p>
</div>
БОЛЕЕ СЛОЖНЫЕ ПРИЕМЫ РАБОТЫ С ГАЛЕРЕЕЙ

Это был простой пример галереи изображений. Но, по мере того как вы добавляете изобра-
жения, время загрузки увеличивается. По этой причине многие разработчики выбирают ди-
зайн в двух частях: страница, содержащая полные версии изображений, и страница со спис
ком эскизов — маленьких копий каждого изображения, которые связаны ссылками с полной
версией. Однако, если вы планируете в дальнейшем расширять галерею, понадобится авто-
матизированная система управления. Их много, и некоторые из них бесплатны.
Поищите в Интернете thumbnail gallery generator (генератор галерей эскизов) или что-то похо-
жее. Этот поиск даст множество результатов1. Пользователи Mac, если у них есть iPhoto, могут
задействовать Export (в более поздних версиях — Share) для создания галереи эскизов.
Простой пошаговый видеоурок, посвященный созданию галереи эскизов, находится по адре-
су http://www.youtube.com/watch?v=RqZTXj0Mudw. Это короткое видео от Луиса Эстрады (Luis
Estrada).
1
Хорошие коллекции перечислены здесь: http://freewarehome.com/Graphics/Graphic_
Manipulation/.
Рис. 5.21. Полноценная галерея
5.7. Поиск изображений

для вашего сайта
Создание онлайн-галереи — несложное дело, если у вас есть много подходящих
фотографий. Но что делать, если нужных снимков в вашей коллекции нет? Суще-
ствуют сайты, например iStockphoto1 и Fotosearch2, которые предлагают скачать
и использовать разные фотографии без лицензионных отчислений. Это означает,
что, после того как вы купили изображение, оно свободно для использования — вы
1
http://www.istockphoto.com/.
2
http://www.fotosearch.com/.
5.8. Фоновые изображения в CSS 199
не обязаны вносить никаких дополнительных выплат владельцу фото (обычно речь

идет о процентах с продаж). Это, впрочем, не означает, что само фото можно сво-
бодно использовать. Но если речь идет об одноразовой уплате комиссии, а изобра-
жение великолепное — не стоит экономить на нем, тем более что плата будет не-
большой.
Другой возможный источник изображений — Flickr, где вы можете искать изо-
бражения по назначенным заранее ключевым словам, которые более известны как
теги. Например, вы можете поискать фотографии по слову «акваланг»1 (scuba)
и выбрать из результатов поиска наиболее подходящий.
ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЙ С FLICKR

Flickr — это сервис для обмена фотографиями, а не профессиональное стоковое хранилище.
Каждый участник сообщества сам устанавливает, как можно использовать его фото. Детали
указаны на каждой странице с фотографией. Но даже если там написано All Rights Reserved
(«Все права защищены»), вы можете попробовать связаться с фотографом — многие люди
с удовольствием позволяют использовать свои изображения, если речь не идет о получении
коммерческой выгоды (кроме того, они будут польщены тем, что на их фотографии обратили
внимание).
5.8. Фоновые изображения в CSS

До сих пор мы использовали только внутристрочные изображения, которые явля-
лись частью содержимого страницы. Но есть и другой способ применить изобра-
жения на сайте: как фоновые рисунки для украшения и оживления страницы.
Из предыдущей главы вы узнали, как установить цвет фона для любого вложен-
ного элемента. Точно таким же путем можно добавить фоновое изображение.
Собственно говоря, допустимо сделать и то и другое: установить фоновое изобра-
жение для пользователей с быстрым интернет-соединением и фоновый цвет для
пользователей с небольшой скоростью подключения. Фоновый цвет будет отобра-
жаться и для первой группы пользователей, пока не загрузится фоновый рисунок.
Рассмотрим простой пример.
Повторяющееся изображение
В CSS-файле можно добавить свойство background-image и установить его значе-
ние:
#repeatedclouds {
padding: 20px;
background-color: #aebbdb;
background-image: url(clouds.jpg);
}
1
http://www.flickr.com/photos/tags/scuba/.
А вот HTML-код, связанный с этим правилом стилей:

<div id="repeatedclouds">
<p>Здесь будет какой-то контент.</p>
<p>А здесь — еще какой-то.</p>
</div>
Используя CSS-код, приведенный выше, браузер будет повторять выбранное

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

заполняя свободное пространство
Заметьте, что это правило включает также фоновый цвет. Всегда, устанавливая
фоновое изображение, выбирайте также альтернативный фоновый цвет на тот
случай, если изображение не загрузится. Если браузер найдет изображение, кото-
рое вы указали, он использует его; если нет, то вместо него отобразится заданный
фоновый цвет, как показано на рис. 5.23. Это очень важно. Представьте, что в ка-
ком-то месте на вашей странице белый текст располагается на темном фоновом
рисунке. На случай, если изображение повреждено или не загрузилось, вам обяза-
тельно нужен темный фоновый цвет для этого раздела, иначе у пользователей на
белом фоне отобразится белый текст, который невозможно будет прочесть.
Рис. 5.23. Отображение фонового цвета вместо фонового рисунка
Рисунки, повторяющиеся горизонтально

Можно установить фоновый рисунок, который будет повторяться только в од-
ном направлении — например, слева направо. Этот процесс аналогичен по-
строению диаграммы по X-оси (горизонтально) или по Y-оси (вертикально).
Мы используем такие же указания х и у для обозначения направлений в CSS.

Например, следующий код установит повторение изображения по горизонталь-
ной оси:
#verticalfade {
padding: 20px;
padding-top: 300px;
background-color: #e3e3e3;
background-image: url(vert-fade.gif);
background-repeat: repeat-x;
}
Эффект показан на рис. 5.24.
Рис. 5.24. Повторение фонового изображения по горизонтальной оси
Любопытно, что изображение, которое вы повторяете по горизонтальной оси,

чаще всего должно быть высоким и узким. Это позволяет создать очень интересные
эффекты с изображениями небольшого объема (с точки зрения загрузки). Рисунок,
использованный в примере, показан на рис. 5.25.
Когда фоновые изображения повторяются только в одном направлении, уста-
новка альтернативного цвета фона приобретает еще большее значение. Представь-
те, что произойдет, если мы уберем фоновый цвет из предыдущего примера
(результат показан на рис. 5.26). Если не установлено никакого фонового цвета,
то применится фоновый цвет браузера, заданный по умолчанию. Обычно это белый,
но пользователи могут изменить цвет в настройках браузера. Как вы можете видеть,
за пределами фонового изображения показывается фоновый цвет, поэтому важно
удостовериться, что цвета дополняют друг друга.
Рис. 5.25. Вертикальный рисунок, используемый для повторения по горизонтальной оси
Рис. 5.26. Горизонтальное повторение без фонового цвета
Рисунки, повторяющиеся вертикально

Точно так же можно создать эффект повторения фонового рисунка по вертикали:
#horizontalfade {
background-color: white;
background-image: url(hori-fade.gif);
background-repeat: repeat-y;
padding: 20px;
padding-left: 180px;
}
Рис. 5.27. Вертикальное повторение фонового изображения
Неповторяющиеся изображения
Возможно, вы хотите показать фоновое изображение только один раз. Например,
поместить за текстом логотип компании наподобие водяного знака. Что ж, и это
можно осуществить с помощью CSS так же легко и просто, как в предыдущих при-
мерах. В этом случае вам нужно установить значение no-repeat, чтобы сообщить
браузеру, что картинку не нужно повторять, а также указать место, где изображение
должно появиться.
Вот как это сделать:
#palmtree {
background-color: white;
background-image: url(palm-trees.jpg);
background-repeat: no-repeat;
background-position: right top;
padding: 60px;
}
Рис. 5.28. Изображение не повторяется
Свойству background-position необходимы два значения: размещение по го-

ризонтали (left — слева, center — в центре или right — справа) и по вертикали
(top — вверху, center — в центре или bottom — внизу). Если вы используете значение
no-repeat без указания background-position, то браузер по умолчанию поместит
изображение в левом верхнем углу.
Сокращенная запись фонового изображения

Можно объявить правило для фонового изображения точно так же, как для цвета,
стиля и толщины границы, используя сокращенную запись одной строкой.
#repeatedclouds {
padding: 20px;
background: #aebbdb url(clouds.jpg);
}
#palmtree {
background: white url(palm-trees.jpg) no-repeat right top;
padding: 60px;
}
Фиксированная высота и ширина

Рассмотрим последний пример, прежде чем попробовать добавить эти приемы
к проектному сайту: художественный эффект применения размеров. В главе 4 вы
видели, как придать блочному элементу фиксированные размеры. А сейчас я по-
кажу вам, как достигнуть аналогичной цели, используя фоновое изображение,
а не просто заливку сплошного цвета. Сочетая фоновый рисунок с красивым цве-
том текста, можно достичь очень интересных эффектов (помните, что в этом при-
мере я использовал свойство padding для того, чтобы сдвинуть строки текста вниз
от границ контейнера div). Вот какой у нас будет CSS-код:
.sunset {
color: white;
font-weight: bold;
font-size: 200%;
background: black url(sunset.jpg);
width: 650px;
height: 125px;
padding-left: 50px;
padding-top: 400px;
}
И вот такой HTML-код:

<div class="sunset">Закаты — это подарок природы.</div>
Результат взаимодействия HTML и CSS показан на рис. 5.29.
Рис. 5.29. Содержимое раздела div с заданными размерами

и использованием фонового изображения
Эффект, кажется, неплох, как и сама фотография заката?

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

Эволюция нашего сайта продолжается! Сначала я хотел бы приукрасить область
навигации. Изображение, которое я собираюсь использовать, показано на рис. 5.30.
Его можно найти в архиве кода.
Я знаю, что вы сейчас думаете: это изображение нормальной ширины, но слиш-
ком длинное для нашей навигационной области. Однако размер навигационного
раздела очень легко изменить с помощью CSS, чтобы он соответствовал новому
фоновому изображению. Вот измененная разметка:
#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}
На рис. 5.31 показан результат выполнения кода.

Рис. 5.30. Декоративный фоновый рисунок для области навигации
Рис. 5.31. Новый вид навигационного блока

Градиентный фон для слогана

Слоган под областью заголовка отлично справляется со своей задачей, но выглядит,
пожалуй, простовато. Один из способов исправить эту прискорбную ситуацию —
применить фоновое изображение с использованием эффекта градиента. Возьмем
основу для градиента, как на рис. 5.32.
Рис. 5.32. Фоновое изображение для слогана
Чтобы достичь такого результата, изображение должно быть расположено с пра-

вой стороны на уровне абзаца, в котором заключен слоган. Это легко сделать с по-
мощью CSS.
style1.css (фрагмент)
#tagline p {
font-style: italic;
padding-top: .2em;
padding-left: .8em;
margin: 0;
background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y right;
}
Значение right — все, что нужно, чтобы изображение расположилось с правой
стороны окна браузера на уровне слогана. А свойство repeat-y означает, что изо-
бражение будет повторяться сверху вниз (вертикально), если увеличится размер
шрифта. В таком случае область слогана тоже увеличится.
Украсим область основного заголовка

Сейчас я собираюсь показать вам, как сделать более привлекательной область за-
головка, используя все ту же технику. Я снова выбрал изображение, которое по
явится с правой стороны. В то же время это уже не градиент, и рисунок не будет
повторяться. Используем изображение, показанное на рис. 5.33, но в заголовке
будет видна только его часть.
Рис. 5.33. Фоновое изображение для области заголовка

Общий тон рисунка довольно темный, поэтому белый шрифт заголовка будет
на нем хорошо читаться, а левая часть незаметно перейдет в синий фоновый цвет,
который использован для заголовка h1. Мы обсуждали эту технику, применяя
градуированный фон для слогана. Лучший способ ее оценить — попробовать на
практике! Напечатайте приведенный ниже код или скопируйте его из архива кода.
Я советую вам попробовать поменять размер окна браузера, чтобы оценить пере-
мены, вызванные применением фоновых изображений.
Здесь выбрано изображение, которое длиннее, чем заголовок главной страни-
цы. Таким образом мы гарантируем, что страница отобразится корректно, даже
если пользователи значительно увеличат шрифт и размер элемента возрастет.
Да-да, нужно учитывать и такую возможность!
Напишите CSS-код для достижения этого эффекта. Убедитесь, что пишете его
после общего правила для заголовков h1, h2, h3, ведь требуется заменить простую
синюю заливку, которую вы применили в главе 4. Дополните правило для заголов-
ка h1 новой строкой.
chapter5\website_files\11_heading_background\style1.css (фрагмент)
h1 {
font-size: x-large;
color: white;
padding-top: 2em;
padding-left: .4em;
margin: 0;
background: navy url(backgrounds/header-bg.jpg) repeat-y right;
}
Эффект продемонстрирован на рис. 5.34.
Рис. 5.34. Фоновые изображения преображают сайт

5.9. Резюме
В этой главе вы научились искать бесплатные изображения в Интернете и обраба-
тывать собственные фотографии, чтобы наполнять галерею изображений для
сайта. Мы обсудили процедуру изменения размера изображений и применение
различных эффектов. Я также рассказал, как можно задействовать CSS, чтобы
добавлять разнообразные эффекты к изображениям (например, разноцветные рам-
ки) без применения редакторов для обработки изображений, а также об использо-
вании изображений в качестве фоновых рисунков для украшения страницы.
Правда, впечатляет, как преображается сайт с использованием рисунков? Всего
парой глав ранее это был просто скучный набор текстов, а сейчас он уже немного
похож на настоящий современный сайт, который вы к тому же легко можете пре-
образить, лишь немного изменив CSS-файл.
Из главы 6 вы узнаете все о таблицах. Я покажу, как с их помощью можно вы-
водить данные в аккуратном, простом для восприятия виде.
6 Таблицы: средства
для организации
данных
Название этой книги — «Создай свой веб-сайт с помощью HTML и CSS». Я хотел
бы это подчеркнуть перед разговором о таблицах, так как в недобрые старые вре-
мена именно с таблиц начиналась бы книга об HTML-верстке, а автор учил бы вас,
как с их помощью компоновать страницу! Запомните раз и навсегда: это очень,
очень, очень плохой подход. Тем не менее — что бы вы думали? — и в наше время
выходят книги о том, как использовать таблицы для верстки. Надеюсь, что они не
попали вам в руки!
Как и заявлено в названии, таблицы разработаны для представления упорядо-
ченных данных, например:
календаря событий;
баланса денежных средств;
списка контактов;
и т. д.
Во многих отношениях использование таблиц — наилучший вариант, но ком-
поновка элементов веб-страницы — не тот случай!
6.1. Что такое таблица?

В предыдущих главах я пару раз сравнивал веб-технологии со средствами, кото-
рыми вы пользуетесь в Microsoft Word. Процесс создания таблиц тоже в чем-то
похож на работу в текстовом редакторе. Если вы используете эту программу, то,
должно быть, уже выполняли команду Вставить таблицу, как показано на рис. 6.1.
С помощью этой команды вы можете легко и быстро создать, например, такую
таблицу (табл. 6.1):
Таблица 6.1. Пример таблицы
Имя Домашний телефон Рабочий телефон Место жительства
Джейн Бредли 02380 123123 02380 577566 Саутгемптон
Фред Бредли 01273 177166 01273 946376 Брайтон
Лайонел Рундель 01793 641207 01793 626696 Суиндон
6.1. Что такое таблица? 211
Рис. 6.1. Значок Вставить таблицу в Microsoft Word
Таблица — это самый подходящий способ аккуратно организовать данные та-

кого рода. Вы можете быстро просмотреть содержимое всего столбца или всей
строки, а также проверить, что это за данные. Точно такого же эффекта можно
достигнуть и на веб-странице.
Прежде чем приступать к созданию таблицы, внесем небольшие изменения
в проектный сайт, чтобы приготовить место для таблиц. Какие данные могут быть
представлены в виде таблиц на сайте о дайвинге? Как насчет таблицы ближайших
клубных мероприятий? Отлично подойдет!
1. Сначала добавим новые ссылки во все файлы сайта. Нужно изменить кое-что
в блоке навигации, находящемся с левой стороны страницы. Я думаю, этот
новый элемент должен появиться между ссылками О нас и Свяжитесь с нами.
Убедитесь, что добавили его во все файлы сайта, как показано здесь:
<ul>
<li><a href="events.html">События</a></li>
</ul>
2. Затем сделайте копию файла index.html и переименуйте его в Internet Explorer
(или в Finder, если вы работаете в Mac) в events.html.
212 Глава 6. Таблицы: средства для организации данных
Откройте events.html и сделайте в нем следующее:

измените содержимое тегов <title></title> на Ближайшие клубные мероприятия
и поездки с Bubble Under;
измените заголовок страницы (заголовок второго уровня h2) на Ближайшие клуб-
ные мероприятия;
удалите все, кроме заголовка h2 , внутри раздела div c идентификатором
bodycontent;
после заголовка добавьте новый абзац:
Члены клуба Bubble Under любят совместные поездки по стране. Ниже приведено
расписание поездок, которые мы планируем в ближайшее время. Чтобы получить
подробную информацию о каждой из них, свяжитесь с организатором поездки.
Когда закончите, код должен выглядеть таким образом:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ближайшие клубные мероприятия и поездки с Bubble Under</title>
</head>
<body>
<div id="header">
</div>
<div id="tagline">
с нами!</p>
</div>
<ul>
<li><a href="events.html">События</a></li>
</ul>
<h2> Ближайшие клубные мероприятия</h2>
<p>Члены клуба Bubble Under любят совместные поездки по стране.
Ниже приведено расписание поездок, которые мы планируем в ближайшее
время. Чтобы получить подробную информацию о каждой из них,
свяжитесь с организатором поездки</p>
</body>
</html>
6.1. Что такое таблица? 213
ПОЧЕМУ ТАБЛИЦЫ — ЭТО ПЛОХО, А CSS — ОЧЕНЬ ХОРОШО

Пришло время для небольшого исторического экскурса.
Веб-дизайнеры привыкли использовать таблицы для верстки веб-страниц по очень простой
причине. На заре веб-разработки разбиение на таблицы было единственным способом соз-
дания такого макета страницы, который применяется в журнале или газете. Дизайнеры хоте-
ли поместить вверху страницы заголовок, с левой стороны — колонку с навигацией, посере-
дине — основное содержимое, а третью колонку — справа — оставить для разных ссылок.
Для достижения этого эффекта требовалось большое количество кода, но в то время другого
пути не было, и поэтому такой подход считался нормальным.
В наши дни язык CSS настолько развит, что нет ни малейшей необходимости использовать
для верстки таблицы. По всем признакам CSS — наилучший инструмент для работы. И тем
не менее многие сайты по-прежнему создаются с помощью таблиц. Но это просто пережиток
прошлого, который потихоньку отмирает, как ему и положено. Вы тоже можете внести по-
сильный вклад в развитие прогресса. Но перед этим рассмотрим преимущества CSS перед
таблицами.
yy Быстрое и простое изменение дизайна. Разметка, основанная на CSS, гарантирует, что все
ваши правила стилей (от декоративных мелких штрихов вроде изменения шрифта до
крупных стилей, структурирующих страницу) собраны в одном месте. Измените правило
в таблице стилей — и поменяется каждая связанная с ней страница. Использование обыч-
ных таблиц «запирает» дизайн в рамках самой страницы, поэтому его изменение превра-
щается в настоящую проблему, которая не решается простым редактированием пары строк
в таблице стилей.
yy Поддержка доступности. Таблица предназначена только для хранения данных в упорядо-
ченной форме. По этой причине такие вспомогательные устройства, как экранные дикторы
(которые мы рассматриваали в пункте «Экранные дикторы: Интернет можно слушать»
в главе 5), могут работать некорректно, если контент страницы не соответствует форме,
в которой он представлен. Другими словами, такого рода устройства ожидают, что в таб-
лицах будут упорядоченные данные; а если таблица используется для иных целей, то
в первую очередь страдает веб-доступность. Если вы выполнили разметку с помощью
обычной таблицы, то страница, которая нормально выглядит на экране, будет совершенно
нелогичной с точки зрения экранного диктора. Этот феномен, известный как табличная
линеаризация, мы подробно рассмотрим в разделе «Веб-доступность таблиц» текущей
главы.
yy Высокая скорость загрузки. Страница с табличной версткой почти всегда будет загружать-
ся медленнее, чем аналогичная страница с CSS-версткой. Это особенно касается страниц
с большим количеством контента. Во-первых, табличная верстка всегда занимает намного
больше строк разметки, чем элементы div. Дополнительные строки увеличивают размер
файла страницы и, соответственно, количество времени, которое занимает загрузка фай-
ла. Вторая причина — восприятие пользователем процесса загрузки. Ведь браузеры не
загружают страницу одним махом. Отправляя запрос, они получают часть информации
о странице и пытаются отобразить ее. Например, загружая наш сайт, браузер сначала
отобразит заголовок, потом навигацию и, наконец, основной контент. Если скорость со-
единения такая маленькая, что и основной контент придется загружать по частям, то
браузер по крайней мере будет показывать то, что есть. В случае страницы с табличной
версткой браузеру нужно загрузить все содержимое таблицы (которая воспринимается как
неделимый элемент) и показать его на экране. Поэтому страница, сверстанная на основе
CSS, будет отображаться на экране быстрее, чем сверстанная на основе таблицы.
Итак, самый важный вывод: не верьте, что табличная верстка — это круто. Таблицы нельзя
применять для разметки страниц (откуда и пошла их дурная слава), но можно и нужно — для
представления информации в упорядоченном виде, что и��
 ��
является их прямым предназначе-
нием.
6.2. Структура таблицы

Перед тем как создавать таблицы на странице с клубными мероприятиями, немно-
го вернемся назад и рассмотрим пример, представленный в табл. 6.1, — простую
таблицу с телефонными номерами. Мы можем выделить в ней несколько отдель-
ных областей, например заголовки, строки, столбцы и ячейки. На рис. 6.2 эти эле-
менты показаны схематично.
Хотя я упомянул столбцы, в HTML нет нужды их выделять. В принципе,
таблица составляется на основе команд, выдаваемых браузеру и описывающих,
где начать новую строку или новую ячейку в текущей строке. Поэтому столбцы
получаются здесь автоматически и нет необходимости выделять каждый новый
столбец.
Рис. 6.2. Структура таблицы
Области, показанные на рис. 6.2, соответствуют следующим тегам в HTML:

table1 — содержит таблицу;
tr2 — описывает отдельную строку таблицы;
th3 — означает ячейку с заголовком;
td4 — ячейка.
Рассмотрим пример таблицы в HTML:
<table>
<tr>
<th>Имя</th>
<th>Домашний телефон</th>
<th>Рабочий телефон</th>
<th>Место жительства</th>
</tr>
1
http://reference.sitepoint.com/html/table/.
2
http://reference.sitepoint.com/html/tr/.
3
http://reference.sitepoint.com/html/th/.
4
http://reference.sitepoint.com/html/td/.
6.3. Оформление таблиц 215
<tr>
<td>Джейн Бредли</td>
<td>02380 123123</td>
<td>02380 577566</td>
<td>Саутгемптон</td>
</tr>
<tr>
<td>Фред Бредли</td>
<td>01273 177166</td>
<td>01273 946376</td>
<td>Брайтон</td>
</tr>
<tr>
<td>Лайонел Рундель</td>
<td>01793 641207</td>
<td>01793 626696</td>
<td>Суиндон</td>
</tr>
</table>
Видите, как все складно? Элементы, составляющие таблицу, на первый взгляд
могут показаться сложными, но их названия легко запомнить, как и названия
большинства других HTML-элементов.
6.3. Оформление таблиц

Элемент table очень прост: он содержит все данные, которые составляют таблицу,
но, как видно из рис. 6.3, это не слишком привлекательно.
Рис. 6.3. Представление таблицы по умолчанию
Как мы можем это изменить? Если вы подумали о CSS, ставьте себе пятер-
ку, — именно они нам и помогут!
Границы, интервалы и выравнивание

Начнем с того, что добавим границы вокруг ячеек:
td {
}
Рис. 6.4. Однопиксельная граница вокруг каждой ячейки
Наверное, это не то, чего вы ожидали. Интервалы между ячейками могут быть
удалены свойством border-collapse: collapse, добавленным в правило для элемента
table.
Уберем интервалы между ячейками и немного украсим нашу таблицу. Устано-
вим левостороннее выравнивание для заголовков. По умолчанию содержимое
ячеек с заголовками (th) выравнивается по центру, что может выглядеть нелогич-
но по отношению к другим ячейкам, которые изначально выровнены по левому
краю. На рис. 6.5 показаны результаты следующих изменений (и некоторых других
мелких доработок):
table {
border-collapse: collapse;
}
th {
text-align: left;
background: gray;
color: white;
padding: 0.2em;
}
td {
padding: 0.2em;
}
Ну что, уже немного получше, не так ли?
Рис. 6.5. Правила стилей применены к таблице

6.4. Веб-доступность таблиц 217
Классификация ваших таблиц

Таблицы могут использоваться для различных целей, и каждая требует своего под-
хода в оформлении. По этой причине очень правильно было бы применять для
таблиц селекторы классов.
Например, представьте, что на сайте есть следующие типы таблиц:
расценки (rates);
расписание (schedule);
события (events).
Вы можете применить разные правила стилей для каждого типа таблиц:
table.rates {
/* объявления для таблиц рейтинга */
}
table.schedule {
/* объявления для таблиц с расписанием */
}
table.events {
/* объявления для таблиц событий */
}
Затем, когда вы добавите таблицу в HTML-разметку, останется задать соответ-
ствующий атрибут class:
<table class="rates">
Предусмотрительность — очень полезное качество.
6.4. Веб-доступность таблиц

Я уже объяснял понятие веб-доступности в одноименном подразделе в главе 5,
когда подчеркивал важность атрибута alt для элементов img. Работая с таблицами,
также важно позаботиться о веб-доступности. Вопрос, который в таких случаях
задают себе все веб-дизайнеры: «Как экранный диктор будет читать таблицу?»
Линеаризация
Читая содержимое таблицы, экранный диктор линеаризует ее. Что это означает?
Всего-навсего то, что экранный диктор читает содержимое таблицы ячейка за ячей-
кой в том порядке, в каком они появляются в разметке. В качестве примера рас-
смотрите табл. 6.2, которая представляет собой программу телепередач. Визуально
совсем несложно связать время и соответствующую передачу.
Таблица 6.2. Пример отображения телепрограммы в виде таблицы
21.30–22.00 22.00–23.00 23.00–23.45
Новости регионов «Хор» «Безумцы»
Нам легко понять, в какое время начинается и заканчивается каждая передача.

Посмотрим на разметку:
<table>
<tr>
<td>21.30–22.00</td>
<td>22.00–23.00</td>
<td>23.00–23.45</td>
</tr>
<tr>
<td>Новости регионов</td>
<td>"Хор"</td>
<td>"Безумцы"</td>
</tr>
</table>
Линеаризованная версия будет такова: «21.30–22.00, 22.00–23.00, 23.00–23.45,
Новости регионов, “Хор”, “Безумцы”». Чем больше содержимое таблицы, тем
сложнее будет что-нибудь понять! Мы можем исправить эту проблему, изменив
ориентацию таблицы, то есть поместив время в левом столбце сверху вниз, а на-
звания телепередач — в правом соответственно.
Можно также просто пометить в разметке ячейки с названиями передач как th
вместо td и добавить атрибут scope1 каждому элементу th. Второе решение мы
рассмотрим чуть позже в этой главе, обсуждая продвинутый уровень создания
таблиц.
Summary. Итоги?..
Нет-нет, я не собираюсь подводить итоги до окончания главы! Я просто хочу пред-
ставить вам новый атрибут — summary. Он никак не отображается на экране или,
например, на бумаге при печати веб-страницы, но используется для предоставле-
ния дополнительной информации о таблице для читающих устройств. Вот пример
summary:
<table summary="Региональные представители и их телефонные номера">
Старайтесь, чтобы содержимое summary было кратким, но информативным. Этот
атрибут используется аналогично alt в отношении изображений: будьте лаконич-
ны, но выражайтесь ясно.
Подписи к таблицам
Если вы думаете, что на написание атрибута summary только впустую тратится вре-
мя, так как его содержимое не выводится на экране, то не волнуйтесь. Для отобра-
жения на экране у нас есть элемент caption. Он должен находиться внутри элемен-
та table. Можете использовать CSS, чтобы оформлять этот элемент точно так же,
как и заголовки. Вот как будет выглядеть разметка:
1
http://reference.sitepoint.com/html/th/scope/.
<table summary="Региональные представители и их телефонные номера">

<caption>Контактная информация</caption>
<tr>
<th>Имя</th>
<th>Домашний телефон</th>
<th>Рабочий телефон</th>
<th>Место жительства</th>
</tr>
Важный момент: применение caption — правильный способ добавления заго-
ловка таблицы, но надпись может по-разному отображаться в различных браузерах.
Это небольшая проблема — в конце концов, прекрасно, что есть некоторые разли-
чия в отображении страниц разными браузерами. Тем не менее, если в каком-то
проекте все совсем плохо с этим элементом, разработчик может от него отказаться
и установить обычный заголовок, например h2 или h3. Это вполне приемлемо — за-
головки определяют структуру страницы, помогают поисковым системам работать
с ее содержимым и обеспечивают веб-доступность. Но если можно использовать
caption и как следует оформить его, то нужно поступать именно так.
Итак, мы рассмотрели основы работы с таблицами и обсудили несколько при-
меров, чтобы прояснить базовые принципы. Я продемонстрировал, как использовать
CSS, чтобы оформлять содержимое таблицы, и как сделать ее контент удобным для
работы. Но лучше всего изучить все это на практике. Вернемся к нашему проект-
ному сайту и посмотрим, как мы можем применить новые знания.
Добавление таблицы клубных мероприятий

Вы изучили элементы, составляющие таблицу, а сейчас попробуйте применить их
сами.
1. Откройте файл events.html в текстовом редакторе.
2. Добавьте следующий код под абзацем, который вы ввели ранее:
chapter6\website_files\02_events_table\events.html (фрагмент)
<table class="events" summary="Планируемые клубные мероприятия и поездки">
<caption>Клубные мероприятия/выезды на дайвинг на ближайшее
полугодие:</caption>
<tr>
<th>Дата</th>
<th>Событие</th>
<th>Стоимость</th>
<th>Контакты</th>
</tr>
<tr>
<td>12 июля</td>
<td>Общая встреча, обсуждение планов на следующий год</td>
<td>N/A</td>
<td>Боб Добалина</td>
</tr>
<tr>
<td>7-дневная поездка в Хургаду (все включено) — места ограничены</td>

<td>£260 pp (все включено), отель Лютон</td>
</tr>
<tr>
<td>5 августа</td>
<td>Океан & Курсы спортивного дайвинга</td>
<td>Детали по телефону</td>
<td>Джефф Эджели</td>
</tr>
<tr>
<td>12 августа</td>
<td>Игра в расследование убийства (не дайвинг!)</td>
<td>£65 pp (включая проживание)</td>
<td>Джилл Смит</td>
</tr>
</table>
Помните, что вы не обязаны печатать все это самостоятельно — можете найти
разметку в архиве кода.
Все возможности, рассмотренные в этой главе, здесь присутствуют: атрибут
summary, элемент caption, заголовки таблицы и базовые элементы table, tr, td, кото-
рые применяются в каждой таблице. Но как это выглядит в браузере? Рисунок 6.6
прояснит это.
Рис. 6.6. Простая, неоформленная таблица

По-моему, результат может быть описан одним словом: тьфу! Как и неоформ-
ленная таблица, которую вы уже видели, получившаяся таблица выглядит очень
некрасиво и воспринимается с трудом. К счастью, у вас есть CSS! И первая ваша
задача — сделать таблицу более читабельной и добавить ей границы.
Откройте файл style1.css и добавьте новые правила для элементов th и td. Вот
как они должны выглядеть.
chapter6\website_files\03_events_table_borders\style1.css (фрагмент)
table.events {
border-collapse: collapse;
}
table.events th, table.events td {

padding: 4px;
border: 1px solid #000066;
}
table.events th {
font-size: x-small;
}
table.events td {
font-size: small;
}
Получилось четыре правила стилей.
Первое касается всех элементов table, которые имеют атрибут class со значени-
ем events. Это правило указывает свойству border-collapse удалить пробелы между
ячейками.
Второе правило использует селекторы: table.events th, table.events td влияет
на все элементы th и td между тегами <tableclass="events"> и </table>. К сожа-
лению, более простое объявление, например table.events th, td повлияет на
элементы th внутри таблицы и на все элементы td. Зато мы здесь убиваем сразу
двух зайцев (второй заяц — граница (border) и отступы (padding) вокруг каждой
ячейки).
Последние два правила устанавливают размер шрифта для ячеек и заголов-
ков.
На рис. 6.7 показан результат работы этого CSS-кода на веб-странице.
Исправим выравнивание заголовков таблицы. Как я уже говорил, по умолчанию
для заголовков задано выравнивание по центру, в то время как для информации
в ячейках — по левому краю. Это нелепо, я знаю. Изменим это.
В файле style1.css исправьте объявление для заголовков.
chapter6\website_files\03_events_table_borders\style1.css (фрагмент)
table.events th {
font-size: x-small;
text-align: left;
}
Рис. 6.7. Границы улучшают восприятие таблицы
Это решит проблему, но пойдем немного дальше и сделаем заголовок еще при-
влекательнее.
1. Добавьте новые объявления в правило стилей для table.events th — измените
цвет текста на белый, добавьте фоновое изображение и отступы.
chapter6\website_files\04_styled_table_header\style1.css (фрагмент)
table.events th {
font-size: x-small;
text-align: left;
background: #241374 url(backgrounds/header-bg.jpg);
color: #ffffff;
padding-top: 0;
padding-bottom: 0;
padding-left: 2px;
padding-right: 2px;
}
2. Заодно оформите подпись таблицы.
chapter6\website_files\04_styled_table_header\style1.css (фрагмент)
table.events caption {
color: #000066;
font-size: small;
text-align: left;
padding-bottom: 5px;
font-weight: bold;
}
3. Сохраните таблицу стилей и обновите страницу в браузере. Сравните вашу
работу с рис. 6.8.
Рис. 6.8. Шапка таблицы выглядит гораздо лучше
Я хочу обратить ваше внимание на два момента. Во-первых, фоновое изображе-

ние — в точности то же самое, что мы использовали в заголовке страницы (большой
коралловый риф, на фоне которого находится надпись BubbleUnder.com), но оно
выглядит совершенно по-другому. Почему? В заголовке страницы мы расположи-
ли рисунок так, что его правый верхний угол скрыт. А в объявлении для элементов th
никакого положения для рисунка не указано, поэтому мы видим его, как бы начи-
ная с левого верхнего угла. Повторное использование рисунка, который уже встре-
чался где-либо на сайте, сокращает время загрузки страницы, так как картинка уже
имеется и компьютеру не нужно запрашивать другую картинку для фона шапки
таблицы.
Во-вторых, я хочу поговорить о цвете текста. Здесь я указал цвет #ffffff. Это
код белого цвета в шестнадцатеричной системе. Хотя гораздо проще запомнить
слово white, чем длинный непонятный набор символов, очень важно разбираться
с часто встречающимися кодами шестнадцатеричной системы. Другой код, который
будет вам часто попадаться, — #000000, то есть черный цвет (это значит, что коли-
чество красного, зеленого и синего цветов в нем 0, 0 и 0, другими словами, здесь
вообще нет цвета).
Оформление ячеек таблицы

У меня осталось всего одно предложение для улучшения таблицы клубных меро-
приятий. Хотя она уже выглядит прекрасно, я хочу добавить еще один штрих. Мне
хочется снова применить фоновое изображение для создания эффекта полупро-
зрачного, едва заметного фона вверху каждой ячейки. Вот какой будет разметка.
chapter6\website_files\05_stylish_table_cells\style1.css (фрагмент)
table.events td {
font-size: small;
background: #e2edff url(backgrounds/td.jpg) repeat-x top;
}
Этот фоновый цвет — еще один мудреный шестнадцатеричный код — бледно-
голубой. Точно такого же цвета верхняя часть изображения. Изображение повто-
ряется горизонтально (как демонстрировалось в главе 5) и расположено в верхней
части ячейки, в результате чего создает эффект блеска, показанный на рис. 6.9.
Только от вас зависит, как далеко можно зайти в оформлении таблиц. Вы огра-
ничены лишь своим изображением — или, в моем случае, умением использовать
графические редакторы!
Рис. 6.9. Окончательный вид таблицы

6.5. Сложные таблицы 225
6.5. Сложные таблицы

В примерах этой главы вы видели очень простую структуру таблиц: прямые стро-
ки и столбцы, никаких усложненных элементов. Но с какими сложностями мы
потенциально можем столкнуться?
Объединение ячеек
Самое частое усложнение структуры таблиц — объединение ячеек. Снова посмот-
рим на таблицу клубных мероприятий нашего учебного сайта и попробуем пред-
ставить для нее более сложную структуру — как в табл. 6.3 (я временно убрал фор-
матирование для лучшего восприятия).
Таблица 6.3. Более сложная структура таблицы

Дата Событие Контакты
Описание Стоимость
12 июля Общая встреча, обсуждение Недоступно Боб Добалина
планов на следующий год
19 июля 7-дневная поездка в Хургаду £260 рр (все включе- Боб Добалина
(все включено) — места огра- но), отель Лютон
ничены
5 августа Океан & Курсы спортивного Детали по телефону Джефф Эджели
дайвинга
12 августа Игра в расследование убийства £65 рр (проживание Джилл Смит
(не дайвинг!) включено)
rowspan и colspan. В этом примере заголовки первого и последнего столбцов

(«Дата» и «Контакты») состоят из двух вертикально объединенных ячеек. Заголо-
вок «Событие» состоит из двух ячеек, объединенных горизонтально. Для достиже-
ния этого эффекта понадобились следующие HTML-атрибуты:
rowspan1;
colspan2.
Разметка будет выглядеть таким образом (код частично сокращен):
<table>
<tr>
<th rowspan="2">Дата</th>
<th colspan="2">Событие</th>
<th rowspan="2">Контакты</th>
</tr>
<tr>
<th>Описание</th>
<th>Стоимость</th>
1
http://reference.sitepoint.com/html/td/rowspan/.
2
http://reference.sitepoint.com/html/td/colspan/.
</tr>
<tr>
<td>Общая встреча, обсуждение планов на следующий год</td>
<td>N/A</td>
</tr>
Казалось бы, первая строка состоит из трех ячеек (одна ячейка + две объеди-
ненные + одна ячейка = четыре), а вторая содержит всего два заголовка, но, по-
скольку крайние левая и правая ячейки уже обозначены как объединенные в пре-
дыдущей строке с помощью атрибута rowspan="2" , размеры строк совпадают
и таблица получается верной.
Вам это кажется очень трудным? Не расстраивайтесь, вы не одиноки! Многие
веб-дизайнеры пугались этих сложных конструкций в начале своей карьеры. Если
допустить ошибку в математике rowspan и colspan, то таблица отобразится в непри-
глядном виде. Вот почему я поместил этот пример в отдельном разделе.
Если вы хотите объединить ячейки таблицы, используйте один из двух спо-
собов:
применяйте специальные инструменты для веб-разработки, в которых есть
возможность конструировать таблицы с визуальным контролем (например,
Dreamweaver)1;
просто нарисуйте таблицу на бумаге. Начните с простой таблицы без всяких
объединений, где будут только столбцы и строки в нужном вам количестве.
После того как вы это сделаете, пометьте номера столбцов и строк, которые вам
нужно объединить. Закончив макет на бумаге, переведите его на язык HTML —
и все!
Продвинутый уровень веб-доступности

Плохо сконструированные таблицы — одна из самых больших проблем с точки
зрения веб-доступности. Хотя рассказ обо всех нюансах веб-доступности выходит
за рамки этой книги, я хотел бы остановиться на еще одной технике, которая
улучшит читабельность ваших таблиц для устройств наподобие экранных дик-
торов.
Атрибут scope. Видя таблицу на экране, очень легко мельком взглянуть на за-
головок и просмотреть столбец, в котором находятся данные, относящиеся к это-
му заголовку. Но для слепых пользователей, которые запускают экранные дик-
торы для чтения данных из таблицы, может быть сложно соотносить сведения из
середины столбца с соответствующим заголовком. Атрибут scope2 может испра-
вить это.
Указанный атрибут применяется к заголовку и может иметь два значения: row
и col. Иначе говоря, он как бы сообщает браузеру (и прочим технологиям, обра-
щающимся к нему): «Эй, видишь эту заглавную ячейку? Все, что ниже, отно-
1
http://www.adobe.com/products/dreamweaver/.
2
http://reference.sitepoint.com/html/th/scope/.
6.5. Сложные таблицы 227
сится к ней, не забывай это!» В коде ниже вы можете видеть, как это выглядит
формально:
<tr>
<th scope="col">Дата</th>
<th scope="col">Событие</th>
<th scope="col">Стоимость</th>
<th scope="col">Контакты</th>
</tr>
Таблица нашего проектного сайта содержит заглавные ячейки только для столб-
цов, но вам может попасться и таблица с наименованиями строк, например, пока-
занная на рис. 6.10.
Рис. 6.10. Применение атрибутов scope="row" и scope="col" к заглавным ячейкам таблицы
Вот HTML-код для этого примера:

<table>
<caption>Расписание поездов</caption>
<tr>
<td></td> 
<th scope="col">Время отправления</th>
<th scope="col">Платформа</th>
<th scope="col">Вагон-ресторан</th>
</tr>
<tr>
<th scope="row">Саутгемптон</th>
<td>13:03</td>
<td>12</td>
<td>Да</td>
</tr>
<tr>
<th scope="row">Эдинбург</th>
<td>14:47</td>
<td>4</td>
<td>Да</td>
</tr>
<tr>
<th scope="row">Ньюкастл</th>
<td>15:55</td>
<td>7</td>
<td>Нет</td>
</tr>
</table>
Если вы объедините ячейки с помощью colspan и rowspan, то будет сложнее по-

метить столбцы и строки для обеспечения доступности. Для этого предназначены
такие инструменты, как атрибут headers и идентификаторы. О них хорошо написа-
но в статье Bring on the Tables Роджера Йоханссона (Roger Johansson)1.
Я, в свою очередь, скажу — старайтесь делать таблицы как можно более про-
стыми. Если вы сконструировали очень сложную таблицу с использованием
rowspan, colspan, headers и id-атрибутов, то устройства наподобие экранных дикторов
могут обрабатывать ее не совсем корректно. Даже если эти устройства поддержи-
вают восприятие комплексных таблиц, пользователю нужно уметь работать со
специальными методами, позволяющими получить доступ к такой информации.
Поэтому относитесь критически к тому, чему я вас только что научил.
6.6. Резюме
Итак, когда вам нужно представить информацию в аккуратном, упорядоченном
виде, таблица — наилучший вариант, а в HTML есть много важных инструментов
для работы с ней. В этой главе мы рассмотрели, как с помощью простейших HTML-
элементов расположить данные в необходимом порядке, а также использовать CSS
для придания таблицам привлекательного внешнего вида. Мы также затронули
вопрос о том, как сделать таблицу доступной для всех.
Теперь, уделив необходимое внимание таблицам, пора двигаться дальше — к тех-
нологиям, позволяющим людям общаться друг с другом на вашем сайте, а также
взаимодействовать с самим сайтом. Все эти возможности предоставляют формы.
Следующая глава посвящена именно им!
1
http://www.456bereastreet.com/archive/200410/bring_on_the_tables/.
7 Формы: взаимодействие
с аудиторией
Одно из огромных преимуществ Интернета — бесконечный поток информации.
Термин веб-серфинг появился не случайно: как и��
 ��
настоящие серферы, пользовате-
ли никогда не знают заранее, где они окажутся в конце концов; если тема им инте-
ресна, они продолжают ее изучать. Но простое чтение, переход по ссылкам и снова
чтение, пожалуй, слишком пассивны. Пользователи не вовлечены в процесс непо-
средственно, они просто воспринимают информацию. И в какой-то момент они
понимают: им нужно общение, обмен данными с сайтом.
Представьте ситуацию: вы планируете отпуск, например хотите заказать поезд-
ку на дайвинг или серфинг. Вы приступаете к сбору информации о курортах,
читаете отзывы других людей, знакомитесь с фотообзорами. Выбрав место, вы
отправляетесь на поиски сайта, где можно купить путевку, оплатить перелет
и т. п. В процессе бронирования вы должны ввести данные о себе: имя или адрес.
Скорее всего, вы также выберете даты путешествия из раскрывающегося списка
или укажете какие-то особенности тура, установив нужные флажки. Такие данные
вносятся через HTML-форму.
В этой главе вы познакомитесь с разными элементами форм, узнаете, в каких
случаях те или иные нужно (и не нужно) использовать и как обрабатывать инфор-
мацию, отправленную через форму. Для закрепления материала вы добавите про-
стую форму на проектный сайт клуба дайверов: она позволит посетителям отправ-
лять веб-мастеру запросы о будущих дайверских мероприятиях. Но для начала
просто познакомимся с составляющими формы.
7.1. Структура формы

Вас, наверное, не удивит, что форма начинается открывающим тегом <form> и окан-
чивается закрывающим </form>. Внутри элемента form1 браузер, очевидно, ожидает
обнаружить какие-то HTML-элементы, определенным образом передающие или
принимающие данные. Хотя у form нет никаких визуальных характеристик, это
блочный элемент, поэтому браузер добавляет разрывы строки до и после откры-
вающего и закрывающего тегов.
1
http://reference.sitepoint.com/html/form/.
230 Глава 7. Формы: взаимодействие с аудиторией
Перед началом разговора о том, как работает форма, рассмотрим типичную

форму, которую часто можно увидеть в браузере. Обратите внимание на рис. 7.1.
Рис. 7.1. Базовая структура формы
Элемент form — особенный вид контейнера. Он содержит несколько HTML-

элементов, которые могут существовать только внутри формы, например:
fieldset — область для группировки элементов формы;
legend — легенда;
input — поле ввода;
textarea — область ввода;
select — раскрывающийся список.
Все эти элементы мы рассмотрим в текущей главе, а пока начнем с простой
формы, которую вы можете создать самостоятельно (рис. 7.2).
7.2. Простая форма

Для начала я хочу объяснить, что делает форма и для чего она нужна. Откройте
текстовый редактор и введите следующий код.
chapter7\examples\01_simple_form\simpleform.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Простая форма</title>
7.3. Составные элементы формы 231
Рис. 7.2. Предельно простая форма
</head>
<body>
<h1>Простая форма</h1>
<form method="get" action="simpleform.html">
<p>
<label for="yourname">Введите ваше имя:</label>
<input type="text" name="yourname" id="yourname"/>
</p>
<p><input type="submit"/></p>
</form>
</body>
</html>
Введите свое имя в текстовое поле и нажмите кнопку (обычно она помечается
как Submit1 (Отправить запрос)). Страница перезагрузится, а ваше имя исчезнет из
текстового поля. Если вы посмотрите на адресную строку, то увидите, что введен-
ные вами данные появились в адресе страницы. Это должно выглядеть вот так:
file:///C:/Documents%20and%20Settings/Bob%20Dobalina/My%20Document
s/Web/simpleform.html?yourname=Bob
Пока мы никак не используем введенную информацию, но даже на этом пре-
дельно простом примере вы видите, что данные вводятся и доступны для исполь-
зования.
Посмотрим на другие элементы, которые можно поместить в форму.
7.3. Составные элементы формы

Элемент form
Как вы уже поняли, форма начинается элементом form. Следующие важные атри-
буты включаются в открывающий тег form.
method2 — сообщает браузеру, как нужно отправлять данные, когда пользователь
нажимает кнопку Submit (Отправить запрос). Значения могут быть get или
1
Если вы хотите изменить название кнопки, например, чтобы оно было на русском
языке: Отправить, нужно добавить в тег input атрибут value="name" (целиком получит-
ся: <input type="submit" value="Отправить">). — Примеч. пер.
2
http://reference.sitepoint.com/html/form/method/.
post — зависит от того, что вы собираетесь делать с данными (см. врезку «Get
или post?» ниже). В примере выше я указал get.
action1 — говорит браузеру, куда отправить данные, собранные в форме. Обыч-
но это другая веб-страница, которая считывает и интерпретирует введенные
данные.
GET ИЛИ POST?

Решение, когда использовать в элементе form значение get, а когда — post, принимается
вовсе не произвольно, если, конечно, вы хотите обойтись без дополнительного кода для
обработки формы. Как станет понятно в дальнейшем, иногда необходимо применять сторон-
ние обработчики введенных в форму данных и от этого будет зависеть выбор метода. Одна-
ко полезно узнать особенности обоих вариантов.
yy При выборе метода get данные, введенные в форму, будут появляться в адресной строке
той страницы, куда их ввели. Это может быть полезно, если вы хотите добавить страницу
в закладки (или в Избранное, если пользуетесь Internet��
��
��
Explorer��
) со всей введенной ин-
формацией. Например, форма со строкой поиска ��
Google��
создана по методу ��
get��
. Вы може-
те сохранить результаты поиска по своему запросу, например cake shops Southampton
(«кондитерские Саутгемптон). Когда вы откроете закладку в следующий раз, ��
Google��
пока-
жет вам обновленные результаты поиска кондитерских в Саутгемптоне.
yy Иногда необходимо предотвратить возможность сохранения пользователями введенных
данных или убедиться, что эта информация недоступна для других. Например, это важно
для формы авторизации на странице интернет-банкинга. Нужно быть уверенным, что толь-
ко владелец учетной записи может зайти на свою страницу (а не другой член его семьи,
например, который пользуется тем же компьютером). Вы должны также позаботиться
о том, чтобы введенный пароль был скрыт от других. В таких случаях следует использовать
метод post. Кроме того, объем или количество данных, которые могут быть отправлены
методом get��
��
, ограничено, особенно для старых браузеров. Поэтому при передаче большо-
го количества данных придется использовать метод post.
Конечно, эта тема куда шире вышеизложенного. Начать ее подробное изучение лучше всего
со статьи Юкки Корпела (Jukka Korpela) «Методы GET��
��
и POST��
��
в ��
HTML��
-формах — в чем разни-
ца?»2 Но мы тоже еще поговорим об этих методах.
Элементы fieldset и legend

Эти два элемента используются в связке. Элемент fieldset группирует сходные
элементы форм вместе (рисуя рамку вокруг них), а legend позволяет озаглавить эту
группу. Вот как это выглядит на практике:
<form method="get" action="simpleform.html">
<fieldset>
<legend>Все о вас</legend>
<p>
</p>
1
http://reference.sitepoint.com/html/form/action/.
2
Methods GET and POST in HTML Forms — what’s the difference? (http://www.cs.tut.
fi/~jkorpela/forms/methods.html).
</fieldset>
</form>
На рис. 7.3 показано, как выглядит форма с добавлением этих новых элемен-
тов.
Рис. 7.3. Форма с элементами fieldset и legend
ВЛОЖЕНИЕ FIELDSET
Вы ничем не ограничены в использовании fieldset1 и legend2. В сложной форме вы можете
вкладывать эти элементы друг в друга, чтобы логически поделить ее на области, как показа-
но на рис. 7.4.
Рис. 7.4. Элементы fieldset вложены друг в друга

для логической организации полей ввода
Элемент label
Элементы управления — это фрагменты формы, с помощью которых пользователь
может ввести данные (например, текстовые поля ввода) или выбрать параметры.
Элемент label3 подсказывает пользователю, какие данные требуются в каждом из
элементов управления.
1
http://reference.sitepoint.com/html/fieldset/.
2
http://reference.sitepoint.com/html/legend/.
3
http://reference.sitepoint.com/html/label/.
Элемент label строго связан с каждым полем ввода, к которому он относится,

с помощью атрибута for1. Значение этого атрибута должно быть эквивалентно
значению атрибута id элемента input. Элемент label также позволяет пользователю
выбрать одно из положений переключателя или установить флажки. Кроме того,
с его помощью можно отправить фокус ввода в элементы input или раскрывающий-
ся список (select).
Элемент input
Итак, вступление закончено, перейдем к практическому использованию элементов
формы. В этом разделе вы научитесь получать данные от пользователей. Первый
элемент, на котором мы остановимся, — input2. К этому типу относятся все элемен-
ты управления, с помощью которых пользователь взаимодействует с формой.
Элементы input очень разнообразны. Их вид и функция сильно меняются в за-
висимости от значения атрибута type3. Вот какие они могут быть:
text — поле ввода текста;
password — поле для ввода пароля;
checkbox — флажок;
radio — переключатель;
hidden — скрытое поле;
submit — кнопка отправки формы.
Каждое из этих значений помещает на страницу уникальный элемент управле-
ния. Начнем с самого часто встречающегося элемента — текстового поля ввода.
Текстовое поле ввода

Вы много раз видели этот элемент на веб-страницах. Текстовое поле ввода, пока-
занное на рис. 7.5, — самый простой тип элемента управления, куда пользователи
могут внести данные.
Рис. 7.5. Простое текстовое поле ввода
HTML-код для этого элемента несложен:

<p>
</p>
1
http://reference.sitepoint.com/html/label/for.
2
http://reference.sitepoint.com/html/input/.
3
http://reference.sitepoint.com/html/input/type/.
Рассмотрим каждый компонент.

Элемент label применяется в качестве подписи элемента, чтобы пользователь
мог понять, какие данные нужно вводить в поле.
Атрибут type со значением text говорит о том, что этот input — простое текстовое
поле ввода.
Атрибут name1 определяет имя. Вы помните, что в нашей простой форме введен-
ное имя появляется в конце адресной строки после отправки формы? Адресная
строка будет такой:
file:///C:/Documents%20and%20Settings/Bob%20Dobalina/My%20Docum
ents/Web/simpleform.html?yourname=Bob
Часть yourname взята из атрибута name элемента input и используется для иден-
тификации данных из каждого поля формы.
Атрибут id. На первый взгляд он аналогичен name, и для некоторых элементов
управления это так. Однако, как вы увидите позднее, разные элементы могут
иметь одно и то же имя, поэтому атрибуты id используются для различения
элементов на странице.
Кроме того, с помощью id-атрибута связываются элементы label и input. В об-
щем, он может быть использован для нескольких целей. Вы уже видели в этой
книге, что id-атрибут применяется при оформлении макетов с помощью CSS.
Но в данном примере его основная функция — предоставление ссылки для
связи input и label.
К элементу input можно также применить следующие атрибуты:
size2 — сообщает браузеру, какой длины должно быть текстовое поле, то есть
какое максимальное количество символов должно в нем отображаться (в идеа-
ле, конечно, следует указывать это с помощью CSS);
maxlength3 — устанавливает максимальное количество символов, которое можно
ввести в текстовое поле.
Установка исходного значения для текстового поля

Если вы хотите, чтобы при загрузке страницы в текстовом поле уже отображалось
какое-то значение, его можно задать в атрибуте value. Если добавить этот атрибут
в элемент input, как показано ниже, то в браузере при открытии страницы в тексто-
вом поле будет написано Bob.
<p>
<input type="text" name="yourname" id="yourname" value="Bob"/>
</p>
1
http://reference.sitepoint.com/html/input/name/.
2
http://reference.sitepoint.com/html/input/size/.
3
http://reference.sitepoint.com/html/input/maxlength/.
Поле для ввода пароля

Элемент password input практически аналогичен элементу text input, но с одним
важным исключением: символы, вводимые в это поле, не отображаются на экране.
Вместо этого они заменяются звездочками или точками (рис. 7.6):
<p>
<label for="password">Ваш пароль:</label>
<input type="password" id="password" name="password"/>
</p>
Рис. 7.6. Поле для ввода пароля показывает

введенные символы в виде точек
ПОЛЕ ДЛЯ ВВОДА ПАРОЛЯ

НЕ ОБЕСПЕЧИВАЕТ БЕЗОПАСНОСТИ!
Хотя такое поле не позволяет потенциальным мошенникам перехватить пароль во время
ввода, оно никак не влияет на защищенность процесса передачи данных. Поэтому вы должны
сами более тщательно позаботиться о безопасности данных. Чтобы быть уверенным, что при
пересылке данные защищены, нужно использовать протокол передачи данных HTPPS. Может
быть, вы этого не знали, но именно он используется для передачи данных, которые вы ука-
зываете на коммерческих сайтах, например Amazon или Ebay, — обычно в адресной строке
перед адресом страницы появляется маленькое изображение замочка.
Поле для скрытого ввода

Как понятно из названия, поле для скрытого ввода вообще не появляется на стра-
нице. Такие поля обычно используются для того, чтобы отправить в обработку
формы дополнительные данные. Они могут быть заполнены автором формы (или
автоматически через дополнительное приложение), реже — пользователем. Допол-
нительное приложение может вставлять в скрытое поле дату и время (реже спра-
шивая пользователя о текущем времени), но подробно осветить этот процесс в дан-
ной книге нет возможности.
Позднее в этой главе вы добавите скрытые поля, чтобы идентифицировать
форму для последующей обработки сторонним обработчиком. А пока просто за-
помните: такая разметка ровным счетом ничего не изменит на экране.
<input type="hidden" name="peekaboo" value="hereiam"/>
Однако она будет отправлена обработчику форм вместе с остальными вве-

денными данными, когда пользователь нажмет кнопку Submit (Отправить за-
прос):
file:///C:/Documents%20and%20Settings/Bob%20Dobalina/My%20Document
s/Web/hidden.html?peekaboo=hereiam
Флажок1
Элемент checkbox очень хорош, когда нужно получить ответы вида «да/нет». В то
время как текстовое поле ввода доступно для написания любого текста, с флажком
у пользователя есть только два варианта ответа: да или нет (рис. 7.7).
Рис. 7.7. Флажки в форме
А вот как достигнуть этого эффекта с помощью HTML:

<p>
<input type="checkbox" name="terms" id="terms"/>
<label for="terms">Я прочитал условия использования сервиса.</label>
</p>
<p>
<input type="checkbox" name="newsletter" id="newsletter"/>
<label for="newsletter">Я хочу подписаться на еженедельную рассылку.
</label>
</p>
<p>
<input type="checkbox" name="offers" id="offers"/>
<label for="offers">Я согласен получать в будущем специальные
предложения.</label>
</p>
Установка флажков по умолчанию

Иногда, работая с флажками, целесообразно сделать некоторые из них установлен-
ными по умолчанию, а пользователи по своему усмотрению смогут их снять.
Для этого используйте атрибут checked. Как ни странно, но значение для него,
определяющее установленный флажок, точно такое же — checked (в отличие от
более ожидаемого checked="yes" или checked="true").
<p>
<input type="checkbox" name="terms" id="terms"/>
<label for="terms">Я прочитал условия использования сервиса.</label>
</p>
<p>
1
В среде разработчиков (не только HTML) принято называть эти термины простой каль-
кой с английского: «чекбокс», «инпут» и т. п., поэтому старайтесь запоминать и англий-
ские термины. — Примеч. пер.
<input type="checkbox" name="newsletter" id="newsletter"/>

<label for="newsletter">Я хочу подписаться на еженедельную рассылку.
</label>
</p>
<p>
<input type="checkbox" name="offers" id="offers" checked="checked"/>
<label for="offers">Я согласен получать в будущем специальные
предложения.</label>
</p>
Переключатель
Флажки применяются, когда вы можете позволить пользователю выбрать несколь-
ко ответов. Но что делать, если допускается выбор лишь одного варианта в каждый
момент времени? В этом случае следует использовать переключатели (рис. 7.8).
Рис. 7.8. Переключатель
Этот элемент создает следующий код:

<p>
<input type="radio" name="timeslot" id="morning"
value="morning"/>
<label for="morning">Утром</label>
<br/>
<input type="radio" name="timeslot" id="afternoon"
value="afternoon"/>
<label for="afternoon">Днем</label>
<br/>
<input type="radio" name="timeslot" id="evening"
value="evening"/>
<label for="evening ">Вечером</label>
</p>
Ключевое различие между переключателем и флажком состоит в том, что для

переключателя описаны три положения, но атрибут name для них один и тот же.
Еще раз подчеркну: этот атрибут связывает вместе три элемента. У них один и тот
же атрибут name, но разные атрибуты value. Когда пользователь устанавливает пе-
реключатель в одно из положений и отправляет форму, соответствующее значение
отсылается на сервер.
Другая важная особенность — каждое поле ввода имеет отдельный id-атрибут.
Фактически любой id-атрибут в документе должен быть уникальным, будь то
элемент формы, изображение или другой элемент. В данном случае он нужен еще
и для связи с элементами label, которые соотносятся с соответствующим положе-
нием переключателя через уникальный идентификатор.
ПРИ ЧЕМ ЗДЕСЬ РАДИО?

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

Технология, которая применяется для того, чтобы по умолчанию установить то
или иное положение переключателя, аналогична той, что работает для флажков.
<p>
<input type="radio" name="timeslot" id="morning" value="morning"
checked="checked"/>
<br/>
<input type="radio" name="timeslot" id="afternoon"
value="afternoon"/>
<br/>
<input type="radio" name="timeslot" id="evening"
value="evening"/>
<label for="evening ">Вечером</label>
</p>
Элемент select
Переключатели позволяют выбирать только один вариант из нескольких, что очень
полезно… до какого-то момента. Что, если для выбора предлагается 20 или более
пунктов? Вы на самом деле хотите, чтобы они все отображались на странице, в то
время как выбрать можно только один? Наверное, нет. Гораздо лучше использовать
раскрывающийся список1. Этот элемент управления дает возможность пользова-
телю выбрать один вариант, но занимает на веб-странице куда меньше места. Соб-
ственно говоря, он помещается в одну строку, а пользователь видит все варианты,
когда нажимает маленькую кнопку рядом со списком (обычно в виде треугольни-
ка). Вы тысячи раз видели элемент, показанный на рис. 7.9!
Рис. 7.9. Элемент select создает в форме раскрывающийся список
1
http://reference.sitepoint.com/html/select/.
Элемент select содержит набор элементов option. Каждый элемент option — это
пункт раскрывающегося списка. Вот HTML��
��
-код для этого типа элемента управ-
ления:
<p>
<label for="role">Что лучше всего описывает вас?</label>
<select name="role" id="role">
<option>Секретарь</option>
<option>Веб-разработчик</option>
<option>Менеджер</option>
<option>Уборщик</option>
<option>Другое</option>
</select>
</p>
Выбранный по умолчанию пункт списка. Как и в случае с переключателем или
флажком, можно выбрать по умолчанию один из пунктов раскрывающегося списка.
Для этого понадобится атрибут selected со значением selected.
Вот HTML-код, показанный выше, с выбранным по умолчанию пунктом Веб-
дизайнер:
<p>
<label for="role">Что лучше всего описывает вас?</label>
<select name="role" id="role">
<option>Секретарь</option>
<option selected="selected">Веб-разработчик</option>
<option>Менеджер</option>
<option>Уборщик</option>
<option>Другое</option>
</select>
</p>
ВЫБОР НЕСКОЛЬКИХ ВАРИАНТОВ ОТВЕТА

Технически допустимо создать раскрывающийся список с возможностью выбора нескольких
вариантов ответа, но большинство специалистов по юзабилити1 не одобряют такую техно-
логию. В этом случае пользователю требуется щелкать на пунктах списка, удерживая нажатой
клавишу ��
Ctrl��
, что не совсем очевидно. Кроме того, это невозможно для пользователей, рабо-
тающих без мыши. В большинстве случаев флажки гораздо целесообразнее раскрывающихся
списков с возможностью множественного выбора.
Элемент textarea
Текстовое поле ввода хорошо подходит для ввода и отправки кратких сообщений,
но неэффективно для больших текстовых фрагментов. Видимая область поля по-
казывает минимальное количество текста, как вы, вероятно, знаете из опыта ис-
1
Этот термин не имеет однозначного короткого перевода на русский язык и в общем
случае означает удобство использования. Относительно программных продуктов (в част
ности, веб-страниц) он описывает легкость нахождения нужных кнопок или ссылок,
интуитивную понятность интерфейса, приятность в использовании, минимальное ко-
личество ошибок, которые может сделать пользователь. — Примеч. пер.
пользования поисковых систем: после ввода определенного количества символов

в строку поиска слова в начале строки скрываются. По этой причине для больших
объемов текста целесообразнее использовать элемент textarea1 (рис. 7.10).
Рис. 7.10. Использование элемента textarea для ввода больших объемов текста
Вот какой для этого нужен код:

<p><label for="hobbies">Расскажите нам о ваших хобби:</label></p>
<p><textarea name="hobbies" rows="7" cols="40"
id="hobbies"></textarea></p>
<p><input type="submit" />
Кнопка Submit (Отправить запрос)

Чтобы отправить данные, которые пользователь вводит в поля формы, следует
нажать кнопку Submit (Отправить запрос). Как ни странно, это тоже элемент input,
хотя в него и нельзя ничего ввести! Все, что вы можете сделать, — активизировать
кнопку и нажать ее.
Хотя кнопка Submit (Отправить запрос) и использует тег input, я оставил ее
напоследок, отделив от текстового поля ввода, поля для ввода пароля, переключа-
телей и флажков. Я сделал это лишь потому, что кнопка Submit (Отправить) прак-
тически всегда является последним элементом формы.
Вставить кнопку Submit (Отправить запрос) очень просто. В результате добав-
ления приведенного ниже кода получится кнопка, показанная на рис. 7.11:
Рис. 7.11. Непритязательная кнопка Submit (Отправить запрос)
Подпись этой кнопки не очень понятная, потому что мы не использовали атри-

бут value и браузер установил название по умолчанию. Добавление value сделает
назначение кнопки понятнее для пользователя (рис. 7.12):
<p><input type="submit" value="Отправьте нам ваше мнение"/></p>
1
http://reference.sitepoint.com/html/textarea/.
Рис. 7.12. Кнопка с интуитивно понятным названием
МЫШИ НЕ ТРЕБУЮТСЯ
Наиболее привычный способ отправки формы — нажатие кнопки с помощью мыши, но он не
единственный. Вместо этого можно просто ввести данные во все поля формы и нажать кла-
вишу Enter.
Стандартное представление
элементов формы
К сожалению, в разных браузерах и разных операционных системах формы ото-
бражаются по-разному. В этой книге для большинства скриншотов я использовал
Firefox и Windows, но вам важно представлять, как будут видеть вашу форму люди,
которые используют другие браузеры или операционные системы. Представьте,
что мы собрали в одной форме все возможные элементы и хотим посмотреть, как
с ней справятся различные браузеры.
На рис. 7.13 показано представление такой формы в Firefox в Windows.
Рис. 7.13. Элементы формы в Firefox для Windows

Очень похоже отображает форму ��

Internet��
��
Explorer��
. Есть только несколько не-
значительных отличий — например, скругленные углы рамки элемента fieldset
или чуть больший размер кнопки Submit (Подача запроса). На рис. 7.14 показано
отображение формы в Internet Explorer 9 для Windows 7; однако, как упоминалось
ранее, между версиями Internet Explorer 6, 7 и 8 есть небольшие различия.
Рис. 7.14. Форма в Internet Explorer 9 незначительно отличается от формы в Firefox
Firefox для Mac OS X напоминает его собрата в Windows, но более изящен, как
и все компоненты в Mac (рис. 7.15)1.
Отображение формы в браузере Safari почти идентично отображению в Firefox
для Mac OS X. Раскрывающийся список также изменен характерным для Mac
образом, а кнопка Submit (Отправить запрос) имеет красивую полукруглую форму
(рис. 7.16).
Как видите, есть небольшие различия в отображении элементов управления
разными браузерами. Хотя можно многое настроить с помощью CSS, отображение
флажков, переключателей и раскрывающихся списков сильно зависит от операци-
онной системы пользователя. Нужно всегда помнить об этой особенности, так как
очень трудно настроить идентичное отображение формы во всех браузерах. Да здрав-
ствуют различия — вот и все.
1
На рис. 7.15 и 7.16 показаны оригинальные варианты форм. — Примеч. ред.
Рис. 7.15. Форма в Firefox под Mac OS X
Рис. 7.16. Форма в Safari

7.4. Создание контактной формы 245
7.4. Создание контактной формы

Предлагаю вам применить некоторые из новоприобретенных знаний для добавле-
ния контактной формы на учебный сайт. Я покажу, как можно задействовать CSS
для настройки отображения HTML��
��
-элементов. В этот раз, вместо того чтобы до-
бавлять новые страницы на проектный сайт, просто расширим страницу «Свяжи-
тесь с нами».
ОБРАБОТКА ДАННЫХ: ВРЕМЯ НАСТАЛО!

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

Итак, изменим страницу контактов. Для этого сделайте следующее.
1. Откройте в текстовом редакторе файл contact.html.
2. Нужно отредактировать текст в области body. Полезно иметь на странице теле-
фонный номер, а не только адрес электронной почты — возможно, пользовате-
ли предпочтут связаться с вами именно по телефону. Поэтому замените прежний
абзац на следующие два:
chapter7\website_files\01_new_paragraph\contact.html (фрагмент)
<p>Чтобы уведомить нас о готовящемся дайвинг-мероприятии, используйте,
пожалуйста, форму ниже.</p>
<p>Если вам нужно срочно связаться с нами, звоните Бобу Добалина
по телефону 01793 641207. По остальным вопросам пишите нам
<a href="mailto:bob@bubbleunder.com">на электронную почту</a>.</p>
Добавление формы и элемента fieldset

Для начала создадим основу формы с помощью элементов form, fieldset и legend.
1. В файле contact.html добавьте открывающий тег <form> и закрывающий </form>
между двумя абзацами, которые только что добавили на страницу.
В открывающий тег <form> добавьте следующие атрибуты:
yy action="" (мы заполним его позже);
yy method="post" (мы применяем метод post, так как собираемся отправлять
через форму значительное количество данных);
yy class="contact" (мы используем этот атрибут, когда придет время применить

к форме стили).
2. Затем добавьте элементы legend и fieldset. Помните, что fieldset должен нахо-
диться внутри элемента form, а legend — следовать непосредственно за откры-
вающим тегом fieldset.
3. Для элемента legend укажите фразу «Расскажите нам о дайвинг-мероприятии».
Вот каким получится HTML-код:
chapter7\website_files\02_form_and_fieldset\contact.html (фрагмент)
<p> Чтобы уведомить нас о готовящемся дайвинг-мероприятии, используйте,
пожалуйста, форму ниже.</p>
<form action="" method="post" class="contact">
<fieldset>
<legend>Расскажите нам о дайвинг-мероприятии</legend>
</fieldset>
</form>
<p>Если вам нужно срочно связаться с нами, звоните Бобу Добалина
по телефону 01793 641207. По остальным вопросам пишите нам:
<a href="mailto:bob@bubbleunder.com"> на электронную почту</a>.</p>
Если все правильно, сохраните файл и откройте его в браузере. Он должен

отобразиться таким, как показано на рис. 7.17.
Рис. 7.17. Пустая форма

INTERNET EXPLORER
И ПУСТЫЕ ЭЛЕМЕНТЫ FIELDSET
Если вы используете Internet Explorer старше 8-й версии, скорее всего, у вас не отобразится
граница элемента ��
fieldset��
. В ��
Internet��
Explorer��
��
 7 и предыдущих версиях граница элемента field-
��
set не выводится, если внутри ничего нет, кроме legend. Другие браузеры будут показывать
границу, даже если элемент fieldset пустой.
Если вы работаете в Internet Explorer 7 (или старше), добавьте любой временный контент в эле-
мент fieldset, чтобы увидеть границу. Примерно так:
chapter7\website_files\03_temporary_form_content\contact.html (фрагмент)
<fieldset>

<p>Здесь будут элементы формы</p>
</fieldset>
</form>
На рис. 7.18 показано, как нестилизованный элемент fieldset отображается

в Internet Explorer под Windows Vista.
Рис. 7.18. Отображение неоформленного элемента fieldset

в Internet Explorer
Стилизация fieldset и legend в CSS

Если хотите, то можете оставить стилизацию на последний момент, когда вся фор-
ма будет готова, а элементы — расставлены на свои места. Но я предпочитаю при-
менять стили к элементам формы по мере их добавления, в основном потому, что
использую CSS��
��
для установления ширины текста и подобных изменений. Соот-
ветственно, я хочу быть уверенным, что каждая часть выглядит как надо, прежде
чем перейду к следующей.
Хотя стандартное представление fieldset неплохо смотрится (рис. 7.19), другие
браузеры могут не показать скругленную рамку, отображаемую в Internet Explorer,
так что в результате все будет выглядеть немного скучно. Однако благодаря CSS
есть возможность применить несколько стилей, чтобы исправить это и заставить
страницу отображаться одинаково во всех браузерах. Сейчас мы решим эту проб
лему одним движением руки. Откройте в текстовом редакторе файл style1.css
и добавьте следующие правила стиля:
chapter7\website_files\04_styled_fieldset\style1.css (фрагмент)
form.contact fieldset {
border: 2px solid navy;
padding: 10px;
}
form.contact legend {
font-weight: bold;
font-size: small;
color: navy;
padding: 5px;
}
Сохраните файл style1.css и посмотрите, как выглядит страница в браузере.

CLASS-ИФИКАЦИЯ ФОРМ
Для стилизации элементов формы я использовал класс contact так же, как использовал класс
events��
для оформления таблицы в главе 6. Я сделал так на тот случай, если позднее понадо-
бится добавить на сайт другие формы или таблицы. Например, можно создать в будущем
форму поиска, которая внешне должна отличаться от контактной.
Все хорошо, и единственная проблема, которую я вижу на странице, — слишком

много пустого места между первым абзацем и формой. Это можно исправить с по-
мощью отрицательного значения полей (margin), которые мы применим к форме
таким образом:
chapter7\website_files\05_contact_name\style1.css (фрагмент)
form.contact {
padding: 0;
Рис. 7.19. Элемент fieldset, стилизованный в CSS
margin: 0;
margin-top: -15px;
line-height: 150%;
}
В этом объявлении я еще добавил правило, убирающее любые значения отсту-

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

Сейчас добавим в форму несколько элементов, которые позволят получать от по-
сетителей информацию: имя, номер телефона и т. д.
1. В файле contact.html вставьте элемент div сразу после legend. Если вы добавля-
ли какой-то временный контент для Internet Explorer, то сейчас его нужно
удалить.
2. Внутри div добавьте input с атрибутом type="text".
3. Задайте элементу input атрибуты id и name, значения которых должны быть
равны contactname.
4. Перед элементом input добавьте элемент label со значением Имя контакта. Пом-
ните, что необходимо указать атрибут for c��
��
о значением, совпадающим с содер-
жимым id-атрибута элемента input.
5. Сохраните веб-страницу и откройте ее в браузере.
Что получилось? Появилось ли текстовое поле? Если нет, проверьте свой
HTML-код.
chapter7\website_files\05_contact_name\contact.html (фрагмент)
<fieldset>
<div>
<label for="contactname">Имя</label>
<input type="text" name="contactname" id="contactname"/>
</div>
</fieldset>
</form>
Контейнер div будет удерживать все эти элементы вместе и добавит отступы до
и после них. Аналогично мы будем поступать, добавляя на страницу и другие эле-
менты.
ЧТО ЛУЧШЕ ДЛЯ ВЕРСТКИ СТРАНИЦЫ: DIV ИЛИ P?

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

небольших изменений показаны на рис. 7.20.
chapter7\website_files\05_contact_name\style1.css (фрагмент)
form.contact label {
font-weight: bold;
font-size: small;
color: blue;
}
Сейчас вы одним махом добавите сразу много полей ввода. Вот что у вас долж-
но получиться (новые фрагменты выделены полужирным):
chapter7\website_files\06_other_controls\contact.html (фрагмент)
<fieldset>
Рис. 7.20. Стилизация метки Имя
<div>
<label for="contactname">Имя</label>
</div>
<div>
<label for="telephone">Номер телефона</label>
<input type="text" name="telephone" id="telephone"/>
</div>
<div>
<label for="email">Адрес электронной почты</label>
<input type="text" name="email" id="email"/>
</div>
<div>
<label for="eventname">Название мероприятия</label>
<input type="text" name="eventname" id="eventname"/>
</div>
<div>
<label for="eventdate">Дата мероприятия</label>
<input type="text" name="eventdate" id="eventdate"/>
</div>
</fieldset>
</form>
На рис. 7.21 показано, что получилось.
Рис. 7.21. Добавление в форму нескольких полей ввода
Наведем порядок в метках

с помощью CSS
Получившаяся у нас форма неплоха, но беспорядочное расположение назва-
ний полей выглядит немного неряшливо. К счастью, эту проблему можно ре-
шить с помощью каскадных таблиц стилей. Вместо того чтобы стилизовать все
элементы label внутри формы, добавим атрибут class тем элементам, которые
находятся в форме сейчас, и стилизуем только их (позднее понадобится при
менить иной стиль к другим меткам). Итак, добавьте следующий код в файл
style1.css:
chapter7\website_files\07_aligned_inputs\style1.css (фрагмент)
form.contact label.fixedwidth {
display: block;
width: 240px;
float: left;
}
Затем добавьте атрибут class всем элементам label, которые сейчас находятся
в файле contact.html. Ваш HTML-код будет выглядеть так:
chapter7\website_files\07_aligned_inputs\contact.html (фрагмент)
<fieldset>
<div>
<label for="contactname" class="fixedwidth">Имя</label>
</div>
<div>
<label for="telephone" class="fixedwidth">Номер телефона</label>
<input type="text" name="telephone" id="telephone"/>
</div>
<div>
<label for="email" class="fixedwidth">Электронный адрес</label>
<input type="text" name="email" id="email"/>
</div>
<div>
<label for="eventname" class="fixedwidth">Название мероприятия</label>
<input type="text" name="eventname" id="eventname"/>
</div>
<div>
<label for="eventdate" class="fixedwidth">Дата мероприятия</label>
<input type="text" name="eventdate" id="eventdate"/>
</div>
</fieldset>
</form>
Обновите вашу страницу в браузере. Она должна выглядеть, как показано на

рис. 7.22.
КАК ЭТО ПОЛУЧИЛОСЬ?

Прошу прощения — я здесь навел красоту без всяких объяснений! На самом деле мы только
что перешли к более продвинутому уровню использования CSS. То, что мы сделали, было
довольно хитро: мы велели браузеру отобразить следующее.
yy display: block — это объявление конвертирует встроенный элемент (каковым является мет-
ка label) в блочный. С этого момента мы можем обращаться с ним куда более свободно,
в частности установить ширину.
yy width: 240px — определяя ширину, мы выделяем какое-то пространство специально под
текст метки label. Это ничего не нарушает в отображении метки, зато теперь у нас есть
отступы, как до и после блочного элемента.
yy float: left — мы использовали это свойство на главной странице, передвигая ключевое
изображение вправо. Сейчас же мы добавляем его, чтобы сдвинуть метку label влево.
Элементы, следующие за меткой, выравниваются с правой стороны таким же образом, как
текст газетной статьи обрамляет фотографию. Без этого объявления текстовое поле вво-
да отображалось бы под меткой.
Рис. 7.22. Более упорядоченные названия полей
Добавление элемента select

Теперь добавим элемент select. Для чего его можно использовать? Хотя бы для
возможности выбора региона страны, где будет проходить мероприятие.
1. Добавьте еще один элемент div в конце элемента form в файле contact.html.
2. Вставьте элемент select в элемент div, который вы только что добавили.
3. Присвойте элементу select атрибуты id и name со значениями region.
4. Добавьте метку label с соответствующим текстом.
5. Добавьте элементы option внутри элемента select для каждого региона:
yy Юго-запад;
yy Юго-восток;
yy Мидлендс;
yy Центральный регион;
yy Лондон;
yy Восток;
yy Север;
yy Шотландия;
yy Северная Ирландия;
yy Уэльс;
yy Другая страна (детали см. ниже).
Вот каким получится ваш HTML-код:
<div>
<label for="region" class="fixedwidth">В каком регионе будет
мероприятие?</label>
<select name="region" id="region">
<option> Юго-запад </option>
<option>Юго-восток</option>
<option>Мидлендс</option>
<option>Центральный регион</option>
<option>Лондон</option>
<option>Восток</option>
<option>Север</option>
<option>Шотландия</option>
<option>Северная Ирландия</option>
<option>Уэльс</option>
<option>Другая страна (детали см. ниже) </option>
</select>
</div>
На рис. 7.23 показан скриншот получившейся веб-страницы.
Рис. 7.23. Активизация раскрывающегося списка (или элемента select)

Добавление элемента textarea

Итак, все основное у нас есть. Теперь позволим пользователям проявить творче-
ство! Отойдем немного от жесткого формата наших текстовых полей ввода, кото-
рые мы недавно создали, и добавим элемент textarea, который позволит посетите-
лям ввести любой объем текста. Но сначала следует выделить под этот элемент
дополнительное пространство.
Поскольку не совсем понятно, для чего нужна текстовая область, добавим перед
ней небольшой объяснительный текст, где укажем, что пользователи могут написать
в этой области:
«Здесь можно добавить любые дополнительные детали (запишите их в текстовую
область ввода ниже). Укажите их, чтобы избежать дополнительных звонков или писем
с уточнениями, а также любых накладок».
Добавьте текстовую область ввода на форму.

1. В файле contact.html добавьте открывающий тег <textarea> и закрывающий
</textarea>. Удостоверьтесь, что между ними нет пробелов, так как любые про-
белы и абзацы в исходном коде появятся внутри текстовой области ввода, что
может раздражать пользователей.
2. Добавьте следующие атрибуты с указанными значениями:
yy id="details";
yy name="details";
yy cols="30";
yy rows="7".
3. Как и ранее, вставьте элемент label сразу после textarea. Свяжите его с элемен-
том textarea с помощью атрибутов id и name (используйте значение details).
4. Присвойте метке атрибут class со значением fixedwidth.
5. Сохраните работу и посмотрите в браузере, что получилось.
Вот каким должен быть HTML-код:
chapter7\website_files\09_text_area\contact.html (фрагмент)
<div>
<p> Здесь можно добавить любые дополнительные детали (введите их
в текстовую область ввода ниже). Укажите их, чтобы избежать
дополнительных звонков или писем с уточнениями, а также любых
накладок.</p>
<label for="details" class="fixedwidth">Больше деталей (указывайте
столько, сколько нужно!)</label>
<textarea id="details" name="details" cols="30"
rows="7"></textarea>
</div>
На рис. 7.24 показан результат открытия веб-страницы в браузере.

Рис. 7.24. Текстовая область ввода
Форма почти готова. Честно говоря, это и сейчас достаточно подробная форма
ввода, но лучше увидеть в деле все элементы управления формой, которые мы
рассмотрели; поэтому быстренько выполним последнее задание: добавим флажки
и переключатель.
Добавление флажков и переключателя

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

время для звонка (если информация, отправленная через форму, неясна). А флаж-
ки понадобятся для подтверждения, что информация, отправленная через форму,
общедоступна — очень частый случай их использования.
Как я уже говорил, вы быстро справитесь с этой задачей. Вот какой HTML-код
нужно вставить в файл, чтобы добавить переключатель.
chapter7\website_files\10_radios_and_checkboxes\contact.html (фрагмент)
<div>
<p>Мы можем позвонить вам для уточнения информации. Какое время для звонка
вы предпочитаете?</p>
<input type="radio" name="timetocall" id="morning"
value="Morning"/>
<br/>
<input type="radio" name="timetocall" id="afternoon"
value="Afternoon"/>
<br/>
<input type="radio" name="timetocall" id="evening"
value="Evening"/>
<label for="evening">Вечером</label>
<br/>
<input type="radio" name="timetocall" id="never" value="Never"
checked="checked"/>
<label for="never">Не звоните мне, пожалуйста</label>
</div>
И наконец, последняя часть кода, с помощью которой мы добавим флажки:

chapter7\website_files\10_radios_and_checkboxes\contact.html (фрагмент)
<div>
<p>Bubble Under может поделиться вашей информацией с другими
заинтересованными лицами или сайтами для рекламы мероприятия.
Подтвердите, что вы согласны с этим.</p>
<input type="checkbox" name="publicize" id="publicize"
checked="checked"/>
<label for="publicize">Я согласен на публикацию информации о событии
за пределами Bubble Under, если это необходимо.</label>
</div>
На рис. 7.25 показано, как форма выглядит в Firefox.

А сейчас завершим нашу работу! Хотя минутку: здесь есть кое-что, чего вы
еще не видели. Когда вы используете флажки и переключатели, они предшеству-
ют поясняющему их тексту. Это общее правило для форм (по соображениям
веб-доступности), поэтому постарайтесь не нарушать его, указывая текст впереди
элемента, как бы вам этого ни хотелось. Как видите, я сознательно не добавил новым
Рис. 7.25. Флажки и переключатель, добавленные на форму
меткам класс fixedwidth, в отличие от элементов input, чтобы избежать их преобра-

зования в блочные элементы или изменения выравнивания1.
И напоследок: кнопка отправки запроса

Это и в самом деле последний шаг, который займет совсем немного времени. Вставь-
те следующую разметку перед закрывающим тегом </fieldset>:
<div class="buttonarea">
<input type="submit" value="Отправить информацию"/>
</div>
Я добавил атрибут class со значением buttonarea к элементу div, который содер-

жит кнопку отправки данных. Благодаря этому область кнопки можно будет сти-
лизовать с помощью CSS — сделаем ее более заметной на странице.
1. В файле style1.css добавьте новый контекстуальный селектор для кнопки.
Нужно, чтобы приведенный ниже стиль влиял на элемент div, у которого есть
атрибут class со значением buttonarea.
1
Читайте на сайте http://webstandards.org/learn/tutorials/accessible-forms/01-accessible-
forms.html о том, как расположение меток влияет на веб-доступность формы.
2. Установите цвет фона navy (темно-синий).

3. Задайте белый цвет шрифта.
4. Сделайте шрифт полужирным.
5. Добавьте небольшие отступы вокруг кнопки — 5 пикселов будет достаточно.
6. И наконец, добавьте однопиксельную рамку вокруг кнопки — сплошную и бе-
лого цвета.
Вот каким должен получиться CSS-код:
chapter7\website_files\11_submit_button\style1.css (фрагмент)
form.contact .buttonarea input {
background: navy;
color: white;
font-weight: bold;
padding: 5px;
}
Проверьте результат, сохранив файл style1.css и обновив страницу в браузе-

ре. Вы видите, что кнопка из серой превратилась в синюю? Если она серая, воз-
можно, вы используете старую версию Safari��
��
. Помните, что многие браузеры не под-
держивают оформление всех видов элементов управления. Internet Explorer,
Firefox, Chrome и Opera должны отображать цвета, как указано в нашей таблице
стилей.
Кнопка немного теряется на странице, вам так не кажется? Не сделать ли нам
специальную область для кнопок вроде этой? Это будет завершающая часть ра-
боты над формой. Более того, обособляя кнопку, мы сразу привлекаем к ней
внимание.
Добавьте специальный селектор класса для области кнопки:
form.contact .buttonarea {
text-align: center;
padding: 4px;
background-color: #0066ff;
}
Сейчас кнопка располагается в середине хорошо заметной синей полосы, вместо

того чтобы сиротливо находиться внизу формы. На рис. 7.26 показана полностью
готовая форма.
Итак, вы узнали, для чего используются разные элементы формы и какие их
типы лучше всего применять в каждом конкретном случае. Мы вместе прошли от
начала до конца процесс создания формы, а затем стилизовали ее с помощью CSS.
Но что теперь? Куда отправятся введенные данные?
В последнем разделе этой главы я расскажу, как можно подключить бесплатный
сервис для обработки данных, отправленных через форму.
7.5. Обработка введенных в форму данных 261
Рис. 7.26. Кнопка для отправки данных формы выделена с помощью CSS
7.5. Обработка введенных в форму данных

Как я уже говорил ранее, обработка введенных в форму данных требует некоторых
навыков в программировании. К сожалению, я не могу научить вас программиро-
вать на PHP, Perl или других сценарных языках, которые позволяют обрабатывать
эти данные, потому что тогда потребуется написать еще одну книгу. К счастью, уже
давно известно, насколько актуальны простые сервисы для обработки данных, по
возможности бесплатные или недорогие.
Существует много сервисов, которыми вы можете пользоваться, но я собираюсь
рассказать вам о Freedback.com. Я выбрал его потому, что он предлагает бесплатную
услугу (соответственно названию free feedback — «бесплатная обратная связь»)
с небольшими ограничениями. На момент написания книги это несложный в ис-
пользовании сайт, который легко проведет вас через весь процесс обработки фор-
мы. Бесплатно вы можете обрабатывать только одну форму. Если в дальнейшем
вам понадобится добавить еще одну форму для других целей, то придется перейти
к платной учетной записи. Такого рода сервисов довольно много, и, если предла-
гаемые ими возможности не устраивают вас, попробуйте поискать в Сети другие
сайты по запросу free form email service.
Регистрация для обработки формы

Шаг за шагом я объясню вам весь процесс настройки формы для нашего проект-
ного сайта. Разумеется, для вашего собственного сайта придется зарегистрировать-
ся отдельно.
Зайдите на сайт Freedback.com и зарегистрируйтесь — это займет всего пару
минут. Затем нажмите кнопку Create a Form Now (Создать форму) (рис. 7.27).
Необходимо ввести действительный адрес электронной почты, чтобы подтвердить
регистрацию.
Рис. 7.27. Главная страница Freedback
Сделав это, вы попадете на страницу, где можете начать создание своей формы.
Система управления будет на этой же странице; в противном случае нажмите
кнопку New Form (Новая форма) (рис. 7.28). Если вы начали работу, прервали ее,
не закончив, а затем вернулись на сайт, то увидите свою форму внизу экрана. В этом
случае нажмите кнопку Questions (Вопросы), чтобы редактировать существующую

форму, и продолжайте.
Рис. 7.28. Интерфейс создания формы в Freedback
Сервис автоматически заполняет поля имени пользователя и электронный

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

После добавления полей формы нужно будет выбрать еще несколько парамет-
ров. Установите флажок Show our "Thank You" Page (Показать нашу страницу «Спа-
сибо»), что позволит отображать страницу благодарности Feedback. Вместо этого,
впрочем, можно посылать пользователю настроенную вами страницу благодарно-
сти, которую вы сделаете позднее, если захотите. Вы можете также установить
флажок Email (Электронная почта), в результате чего будете получать копию каж-
дого заполнения формы (рис. 7.30), иначе в этой услуге просто нет смысла!
Рис. 7.30. Указание контактов для отсылки формы
Как только вы закончите работу, Freedback продемонстрирует вам разметку,

которая по логике сайта нужна для вашей формы (рис. 7.31). Я сказал «по логике
сайта», так как нам придется немного скорректировать ее для себя — она должна
соответствовать нашим высоким стандартам!
Рис. 7.31. HTML-код для формы, который предлагает Freedback

X, Y И Z В ПОЛЯХ ФОРМЫ
Еще один важный момент, который я хотел бы отметить, прежде чем вы начнете ломать го-
лову, что не так с вашей работой, — во всех моих примерах далее значения для полей acctid
и formid заданы как XXXXXXXXXXX, YYYYYYY, ZZZZZZZZZZZZ и т. д. Что это значит? Абсолютно
ничего! Они приведены там только для того, чтобы обратить ваше внимание на необходи-
мость войти в Freedback под своей учетной записью и ввести корректные данные. А это
только примеры для книги! В предыдущих изданиях я использовал реальные данные для
собственной формы, в результате чего получал сотни форм, направленных прямиком мне,
а не их автору. Так и вижу веб-разработчика, проверяющего по книге разметку и удивля
ющегося: «Здесь же все правильно! Почему тогда моя форма не приходит мне?» Да потому,
что в форму были введены не его, а мои входные данные и форма приходила на мою почту.
Внимательно проверяйте все значения!
На рисунке вы, наверное, заметили предупреждение не редактировать HTML-

код. Мы его проигнорируем! Догадываетесь почему? Во-первых, эта разметка по-
лучена табличным способом (очень плохо!), там нет элементов label (еще хуже),
а использование тегов <font> — просто гнусное преступление! Вместо того чтобы
приводить эту разметку в должный вид, мы просто возьмем там все нужное и вста-
вим в построенную ранее форму.
Вставка кода формы

Freedback сгенерировал для нас законченную работоспособную разметку (правда,
ради экономии места я удалил пробелы и отступы). Мы скопируем оттуда необхо-
димые нам фрагменты и вставим их в разметку собственной формы. Нужное вы-
делено полужирным шрифтом:
Сгенерированная Freedback разметка (фрагмент)


<form enctype="multipart/form-data" method="post"
action="http://www.freedback.com/mail.php" accept-charset="WINDOWS-1251">
<div>
<input type="hidden" name="acctid" id="acctid"
value="XXXXXXXXXXXX"/>
<input type="hidden" name="formid" id="formid" value="YYYYYYY"/>
<input type="hidden" name="required_vars" id="required_vars"
value="name,email,field-ZZZZZZZZZZZZZ"/>
</div>
<table cellspacing="5" cellpadding="5" border="0">
<tr>
<td valign="top">
<strong>Имя</strong>
</td>
<td valign="top">
<input type="text" name="name" id="name" size="40" value=""/>
</td>
</tr>
<tr>
<td valign="top">
<strong>Номер телефона</strong>
</td>
<td valign="top">
<input type="text" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" size="40" value=""/>
</td>
</tr>
<tr>
<td valign="top">
<strong>Адрес электронной почты</strong>
</td>
<td valign="top">
<input type="text" name="email" id="email" size="40" value=""/>
</td>
</tr>
<tr>
<td valign="top">
<strong>Название мероприятия</strong>
</td>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<strong>Дата мероприятия</strong>
</td>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<strong>В каком регионе будет мероприятие?</strong>
</td>
<td valign="top">
<select name="field-ZZZZZZZZZZZZZ" id="field-ZZZZZZZZZZZZZ">
<option value="South-west">Юго-запад</option>
<option value="South-east">Юго-восток</option>
<option value="Midlands">Мидлендс</option>
<option value="Central">Центральный регион</option>
<option value="London">Лондон</option>
<option value="East">Восток</option>
<option value="North">Север</option>
<option value="Scotland">Шотландия</option>
<option value="Northern Ireland">Северная Ирландия</option>
<option value="International (see details below)">Другая страна

(детали см. ниже)</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<strong>Больше деталей (указывайте столько, сколько нужно!)</strong>
</td>
<td valign="top">
<textarea name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" rows="6" cols="40"></textarea>
</td>
</tr>
<tr>
<td valign="top">
<strong>Мы можем позвонить вам для уточнения информации. Какое время
для звонка вы предпочитаете?</strong>
</td>
<td valign="top">
<input type="radio" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="In the morning"/>Утром<br/>
id="field-ZZZZZZZZZZZZZ" value="In the afternoon"/>Днем<br/>
id="field-ZZZZZZZZZZZZZ" value="In the evening"/>Вечером<br/>
id="field-ZZZZZZZZZZZZZ" value="No calls please"/>
Не звоните мне, пожалуйста<br/>
</td>
</tr>
<tr>
<td valign="top">
<strong>Bubble Under может поделиться вашей информацией с другими
заинтересованными лицами или сайтами для рекламы мероприятия.
Подтвердите, что вы согласны с этим.</strong>
</td>
<td valign="top">
<input type="checkbox" name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" value="I am happy for this event to
be publicised outside of and beyond BubbleUnder.com where
possible"/>Я согласен на публикацию информации о событии за пределами
Bubble Under, если это необходимо.<br/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit Form"/>
</td>
</tr>
</table>
</form>
<br><center><font face="Arial, Helvetica" size="1"><b>
<a href="http://www.freedback.com">create web form</a>
</b></font></center>

Сейчас будем взламывать код! Откройте файл contact.html в текстовом редак-

торе.
Сначала возьмите открывающий тег <form> из кода Freedback и вставьте его
вместо открывающего тега <form> в файле contact.html. Скопируйте все скрытые
поля ввода (hidden) из кода Freedback и вставьте их в элемент div сразу после от-
крывающего тега <form> в файле contact.html . Должно получиться следующее
(кроме значений атрибутов acctid, formid и required_vars — туда нужно ввести уни-
кальные значения, которые Freedback��
��
назначит вашей форме; внимательно следи-
те за тем, чтобы не скопировать случайно величины из кода ниже):
contact.html (фрагмент)
<div>
<input type="hidden" name="acctid"
id="acctid" value="XXXXXXXXXXXX"/>
<input type="hidden" name="required_vars" id="required_vars"
value="name,email,field-ZZZZZZZZZZZZZ"/>
</div>
<fieldset>
Теперь пройдитесь по полям формы — телефонный номер, удобное время для

звонка и т. д., взяв оттуда части разметки, на которые я ранее обратил ваше внима-
ние. Копируйте эти фрагменты и вставляйте их вместо соответствующих разделов
нашей контактной формы. Пусть вас не смущает, что текст появляется после эле-
ментов управления формы; просто копируйте и вставляйте соответствующие
элементы input, select и textarea. Как только закончите, ваша форма должна вы-
глядеть примерно так (и снова я говорю «примерно», поскольку значения id-атри-
бутов должны быть уникальными для вашей учетной записи и вашей формы):
<div>
<input type="hidden" name="acctid"id="acctid"
value="XXXXXXXXXXXX"/>
<input type="hidden" name="required_vars"
id="required_vars" value="name,email,field-ZZZZZZZZZZZZZ"/>
</div>
<fieldset>
<div>
<label for="contactname" class="fixedwidth">Имя</label>
</div>
<div>
<label for="telephone" class="fixedwidth">Номер телефона</label>
</div>
<div>
<label for="email" class="fixedwidth"> Адрес электронной почты </label>
</div>
<div>
<label for="eventname" class="fixedwidth"> Название мероприятия </label>
</div>
<div>
<label for="eventdate" class="fixedwidth"> Дата мероприятия</label>
</div>
<div>
<label for="region" class="fixedwidth">В каком регионе
будет мероприятие?</label>
<option value="International (see details below)">Другая страна (детали
см. ниже)</option>
</select>
</div>
<div>
<p>Здесь можно добавить любые дополнительные детали (введите их в текстовую
область ввода ниже). Укажите их, чтобы избежать дополнительных звонков
или писем с уточнениями, а также любых накладок.</p>
<label for="details" class="fixedwidth">
Больше деталей (указывайте столько, сколько нужно!)</label>
<textarea name="field-ZZZZZZZZZZZZZ"
id="field-ZZZZZZZZZZZZZ" rows="6" cols="40"></textarea>
</div>
<div>
<p> Мы можем позвонить вам для уточнения информации. Какое время для звонка
id="field-ZZZZZZZZZZZZZ" value="In the morning"/>
<br/>
id="field-ZZZZZZZZZZZZZ" value="In the afternoon"/>
<br/>
id="field-ZZZZZZZZZZZZZ" value="In the evening"/>
<label for="evening">Вечером</label>
<br/>
<label for="never">Не звоните мне, пожалуйста</label>
</div>
<div>
заинтересованными лицами или сайтами для рекламы мероприятия. Подтвердите,
что вы согласны с этим.</p>
possible""/>
<label for="publicize">Я согласен на публикацию информации о событии
за пределами Bubble Under, если это необходимо.</label>
</div>
</div>
</fieldset>
</form>
Почти все готово, но вы, наверное, разглядываете разметку выше и думаете:

«Что-то здесь не так». Совершенно верно! В приведенном блоке кода действительно
кое-что не так. Ранее в этой главе я подчеркивал, что каждый элемент управления
формы должен иметь соответствующую ему метку (label), которая связывается
с элементом через атрибут for и id-атрибут элемента управления. После обработки
формы на Freedback.com для управления ею были сгенерированы уникальные
id-атрибуты, но они не совпадают с атрибутами, присвоенными нами ранее. С этим
ничего нельзя поделать, поэтому придется просто изменить все атрибуты для каж
дого элемента управления. В разметке ниже я выделил фрагменты, которые нужно
изменить (как и прежде, значения должны быть уникальными для вас):
<div>
<input type="hidden" name="acctid"
id="acctid" value="XXXXXXXXXXXX"/>
<input type="hidden" name="formid"
id="formid" value="YYYYYYY"/>
<input type="hidden" name="required_vars"
id="required_vars" value="name,email,field-ZZZZZZZZZZZZZ"/>
</div>
<fieldset>
<div>
<label for="name" class="fixedwidth">Имя</label>
</div>
<div>
<label for="field-ZZZZZZZZZZZZZ"
class="fixedwidth">Номер телефона</label>
</div>
<div>
<label for="email" class="fixedwidth">Адрес электронной почты</label>
</div>
<div>
class="fixedwidth">Название мероприятия</label>
</div>
<div>
class="fixedwidth">Дата мероприятия</label>
</div>
<div>
class="fixedwidth">В каком регионе будет мероприятие?</label>
<option value="International (see details below)">Другая страна (детали
см. ниже)</option>
</select>
</div>
<div>
<p>Здесь можно добавить любые дополнительные детали (введите их в текстовую
область ввода ниже). Укажите их, чтобы избежать дополнительных звонков или писем
с уточнениями, а также любых накладок.</p>
<label for="field-ZZZZZZZZZZZZZ" class="fixedwidth">
Больше деталей (указывайте столько, сколько нужно!)</label>
<textarea name="field-ZZZZZZZZZZZZZ" id="field-ZZZZZZZZZZZZZ"
rows="6" cols="40"></textarea>
</div>
<div>
<p>Мы можем позвонить вам для уточнения информации. Какое время для звонка
id="field-ZZZZZZZZZZZZZ" value="In the morning"/>
<label for="field-ZZZZZZZZZZZZZ">Утром</label><br/>
id="field-ZZZZZZZZZZZZZ" value= "In the afternoon"/>
<label for="field-ZZZZZZZZZZZZZ">Днем</label><br/>
id="field-ZZZZZZZZZZZZZ" value="In the evening"/>
<label for="field-ZZZZZZZZZZZZZ">Вечером</label><br/>
<label for="field-ZZZZZZZZZZZZZ">Не звоните мне, пожалуйста</label>
</div>
<div>
заинтересованными лицами или сайтами для рекламы мероприятия. Подтвердите,
что вы согласны с этим.</p>
possible"/>
<label for="field-ZZZZZZZZZZZZZ">Я согласен на публикацию информации
о событии за пределами Bubble Under, если это необходимо.</label>
</div>
</div>
</fieldset>
</form>
Вы наверняка заметили, что ��
Freedback��
применил к текстовым полям ввода ат-
рибут size="40". Ничего страшного, если вы его уберете, тем более что гораздо
лучше установить ширину полей с помощью CSS, а не атрибута size.
Сохраните страницу и попробуйте открыть ее в браузере — настало время сделать
это по-настоящему! Введите данные и отправьте форму (разумеется, предвари-
тельно подключившись к Интернету). Если вы все сделали правильно, то попаде-
те на страницу подтверждения, показанную на рис. 7.32. И здесь-то вы увидите
единственный весомый недостаток использования такого метода — страница со-
держит огромное рекламное объявление под маленьким индикатором состояния

и ссылкой Continue (Продолжить).
Рис. 7.32. Freedback сообщает, что форма была отправлена
Обратная связь по электронной почте

Вы сконструировали форму и отправили через нее данные. Теперь откройте свой
почтовый клиент и ждите, пока придет новое письмо. При использовании постро-
енной в этой главе формы и выбранного сервиса обработки данных вы можете
ожидать письмо, подобное этому:
Имя: Джилл Смит
Номер телефона: 01793 654834
Адрес электронной почты: jsmith@someisp.net
Название мероприятия: Игра в расследование убийства
Дата мероприятия: 12-е августа
В каком регионе будет мероприятие? Юго-запад
Больше деталей (указывайте столько, сколько нужно!): Игра в расследование убийства,

Котсволдс (не дайвинг!). 65 фунтов с человека, жилье включено.
Мы можем позвонить вам для уточнения информации. Какое время для звонка вы
предпочитаете? Вечером
Bubble Under может поделиться вашей информацией с другими заинтересованными лицами

или сайтами для рекламы мероприятия. Подтвердите, что вы согласны с этим. Я согласен
на публикацию информации о событии за пределами Bubble Under, если это необходимо.
--
Date/Time: 2008-08-09 11:40:09 PDT
Sender IP: 81.109.255.237 [United Kingdom] | 4784f33t1rcqs0ic
Referrer:1
В общем, этих данных достаточно, чтобы вы обладали полной информацией.

Но вы можете изменить некоторые настройки. Обратите внимание на последнюю
часть, где пользователь соглашается поделиться своей информацией. Один малень-
кий флажок на веб-странице создает в письме так много букв! Посмотрите сами:
Bubble Under может поделиться вашей информацией с другими заинтересованными лицами
или сайтами для рекламы мероприятия. Подтвердите, что вы согласны с этим. Я согласен
на публикацию информации о событии за пределами Bubble Under, если это необходимо.
Лучше бы это отображалось примерно так:

"T&Cs accepted: yes" (Условия приняты: да)
Вы можете настроить для этого код формы, изменив атрибут value. Сравните
код ниже с предыдущей версией:
id="field-ZZZZZZZZZZZZZ" value="yes"/> <label
for="field-ZZZZZZZZZZZZZ">Я согласен на публикацию информации
о событии за пределами Bubble Under, если это необходимо.
</label>
Таким образом вы можете редактировать любые ответы в Freedback.com, чтобы

в письме с отчетом вам отправлялось меньшее количество текста; это не повлияет
на отображение формы для посетителей сайта. Если вы хотите, чтобы состояние
флажка отображалось в письме как T&Cs accepted: yes, нужно внести правки в вопрос,
как показано на рис. 7.33.
Как только обработчик формы правильно настроен, вы получили необходимые
значения, о которых мы говорили выше, и вставили их в код формы — можете
продолжить редактирование вопросов в Freedback до тех пор, пока форма отчета
вас не устроит. Не упустите возможность поэкспериментировать!
1
Сервис конвертирует результаты заполнения формы через атрибут value (как будет
видно из текста ниже), а в атрибутах и вообще в разметке, как уже было сказано выше,
нежелательно использовать кириллицу. Поэтому для русскоязычных читателей письма
с информацией будут приходить либо наполовину, либо полностью на английском язы-
ке, увы. — Примеч. пер.
Рис. 7.33. Изменение существующего вопроса для краткости
И последняя очень полезная функция в Freedback. Если с вашим почтовым

клиентом что-то не так и несколько писем потерялось (а такое случается), вы мо-
жете зайти в Freedback и просмотреть отчеты там. Они хранятся на сервере
шесть месяцев.
7.6. Резюме
В этой главе мы рассмотрели различные типы элементов форм, обсудили, как и за-
чем их можно использовать. Вы шаг за шагом изучили процесс создания формы
вплоть до ее стилизации с помощью CSS��
��
. И наконец, вы узнали, что не обязатель-
но быть программистом, чтобы обрабатывать отправленные через форму данные.
Но если вы хотите самостоятельно управлять вашими данными, то можете изучить
какой-нибудь язык программирования, например PHP. В издательстве SitePoint
по этой теме вышла книга Кевина Янка (Kevin Yank) Build Your Own Database
DrivenWebsite Using PHP & MySQL («Создай сайт на основе базы данных, используя
PHP и MySQL»)1 — может быть, она вас заинтересует.
На этом заканчивается огромный кусок работы над проектным сайтом. У вас
есть контент, несколько красивых картинок, информация в таблицах и действующая
форма для обработки данных — и все это стилизовано с помощью CSS с широкими
возможностями для оформления в будущем. Теперь вы можете показать эти фай-
лы всему миру!
1
http://www.sitepoint.com/books/phpmysql1/.
8 Размещение сайта
в Сети
Создавать веб-страницы очень интересно. Научиться этому относительно легко

(во всяком случае, по сравнению с трепанацией черепа или проектированием
ракет) — можно много экспериментировать, для чего достаточно обыкновенного
компьютера и умения ловко печатать. Проводите сколько угодно времени, раз-
рабатывая и просматривая веб-страницы, но помните: в конце концов нужно от-
пустить их на волю, то есть выложить в Интернет. Как этого достичь и какие
инструменты вам понадобятся, я объясню в этой главе. Начнем с основ: освежим
в памяти некоторые базовые понятия об Интернете и просмотре разных веб-
страниц.
8.1. Модель «клиент — сервер»

Отношения между браузером, который вы используете, и сайтом, который вы про-
сматриваете, в технических кругах известны как модель «клиент — сервер». Она
проиллюстрирована на рис. 8.1.
Клиент — это вы (точнее, ваш браузер). И вы хотите посмотреть на веб-страни-
цу. Вы отправляете запрос на нее через свой ISP (Internet Service Provider — про-
вайдер интернет-услуг), который предоставляет услугу соединения вас и сер-
вера.
Сервер — это противоположная сторона. Да, это просто другой компьютер
(обычно достаточно мощный), задача которого — обрабатывать все ваши запро-
сы к веб-страницам.
Вот в чем заключается эта взаимосвязь. Вы и все остальные пользователи Ин-
тернета можете запросить на сервере множество разных веб-страниц одновремен-
но, поэтому сервер всегда чем-то занят. Чем популярнее сайт, тем выше нагрузка
на сервер и тем дороже он становится; но подобная проблема может возникнуть,
лишь когда количество посетителей сайта превысит определенное значение. Сейчас
не беспокойтесь об этом — особые траты вам пока не грозят.
8.2. Глоссарий веб-хостинга 277
Рис. 8.1. Модель «клиент — сервер»
8.2. Глоссарий веб-хостинга

Для начала познакомьтесь с некоторыми терминами, принятыми в среде разработ-
чиков. Эти термины помогут вам понимать дальнейший материал (позже мы по
дробно остановимся на каждом из них).
Полоса — это ширина воображаемого канала, связывающего клиент с сервером
и передающего все типы данных. Чем шире этот канал, тем больше данных
в него поместится в каждый момент времени. Ширина канала обычно измеря-
ется в мегабайтах или гигабайтах в месяц. Теперь вы понимаете, откуда взялся
термин «широкополосное подключение»? Это просто очень широкий канал
трафика!
FTP — это метод передачи данных от клиента к серверу и наоборот. Он понадо-
бится вам для того, чтобы поместить сайт на сервер. FTP означает File Transfer
Protocol (протокол передачи файлов).
Доменное имя — это часть bubbleunder.com в адресе http://www.bubbleunder.com.
Вы можете купить права на использование доменного имени на определенный
период — обычно на год или два за один раз, потом этот срок снова можно будет
продлить. Такое действие называется регистрацией домена.
278 Глава 8. Размещение сайта в Сети
Хостинг — хранилище файлов вашего сайта на сервере с выходом в Интернет.

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

пространство для сервера
Выражение насчет бесплатного сыра — сущая правда… почти всегда. В Интерне-
те много бесплатных сервисов, в том числе можно найти и бесплатный хостинг.
Ну, почти бесплатный. Но будем реалистами. Стоимость веб-хостинга обычно
составляет от десяти до сотен и тысяч долларов в месяц. И, надо сказать, вы сами
решаете, сколько (и за что) вам платить.
Дешевый хостинг-план обычно имеет ограниченный трафик в месяц и, как
правило, никаких дополнительных возможностей. Например, там нет веб-ана-
литической статистики, которая сообщает вам о количестве посетителей и по-
добные данные.
Более дорогой хостинг-план основан на базовом и включает в себя дополни-
тельные возможности — ту же статистику. Его лучше использовать при развитии
сайта с возрастанием ваших знаний в веб-разработке.
Впрочем, в любом случае не стоит инвестировать в функции или пропускную
способность, которые вам не понадобятся, особенно если ваш сайт невелик и вы
пока не ждете массового наплыва посетителей. Это все равно, что отправить вашу
тетю, которая просто хочет ездить каждый день на работу и обратно, на курсы вож
дения грузовиков. Я уверен, что на первых порах вам понадобится не так много
инструментов.
Бесплатный хостинг — где подвох?

Для начала вполне разумно будет зарегистрироваться на бесплатном хостинг-
сервисе. Условия, конечно, диктует держатель хостинга. Возможно, вашим
пользователям придется мириться с внезапно появляющимися всплывающи-
ми окнами с рекламой или на ваш сайт нужно будет поставить рекламную ссыл-
ку хостинг-компании. В большинстве случаев это не создаст особых проблем,
но всегда внимательно читайте договор перед регистрацией. Если, например, всплы-
вающих окон с рекламой будет слишком много, то большинство посетителей про-
сто закроют окно сайта и никогда не вернутся. В любом случае, бесплатный хос-
тинг — это хороший старт. С его помощью вы можете показать свой сайт другим
людям.
8.3. Хостинг сайта, или Где найти пространство для сервера 279
Придется присмотреться и к ценам на платный хостинг. Впрочем, попробуйте

отправить поисковой системе запрос free hosting «no ads», то есть бесплатный хос-
тинг «без рекламы» (не забудьте взять в кавычки слова «no ads» или «без рекламы»)
и изучите результаты. Помните, что все меняется и многие компании, которые
предлагали бесплатный хостинг, закрыли свои виртуальные двери, набрав доста-
точное количество зарегистрированных пользователей. Кто не успел, тот опо-
здал!
БУДЬТЕ ВНИМАТЕЛЬНЫ ПРИ ВЫБОРЕ АДРЕСА

Если вы выбрали бесплатный хостинг, может оказаться, что адрес, где находятся файлы ваше-
го сайта, выглядит ужасно, например вот так: http://www.freespaceforall.net/users/~bubbleunder/.
Есть способы замаскировать это безобразие — я расскажу о них позже, в разделе «Веб-пере-
адресация», так что пусть это не смущает вас при использовании веб-хостинга.
Веб-хостинг у вашего провайдера

Если у вас есть интернет-соединение, возможно, ваш провайдер предложит вам
какое-то количество свободного интернет-пространства. Вы можете возразить, что
это не так уж бесплатно, но вы же все равно платите за интернет-соединение, так
что по крайней мере у вас почти не будет нужды в переплатах. Почти? Ну да —
вы наверняка получите безобразное доменное имя, но эта проблема решается
с помощью технологий веб-переадресации.
ЗАЙДИТЕ НА ФОРУМ!
Нет нужды «изобретать велосипед», когда это уже сделано. Посетите форумы SitePoint, где
вы найдете тему, посвященную веб-хостингу1.
Бесплатный хостинг
с платным доменным именем
Другой вариант — использовать бесплатный хостинг с условием предварительной
регистрации доменного имени в этой же компании. Это может быть вполне прак-
тично с учетом того, что рано или поздно вам придется развиваться и платить за
доменное имя. Это неизбежно, если только вам не посчастливилось поймать вы-
годное предложение бесплатного хостинга с адекватным доменным именем напо-
добие упомянутых выше.
Здесь есть нюанс. Сервис может предлагать бесплатный хостинг с учетом реги-
страции доменного имени у данного провайдера, но плата за регистрацию может
превышать обычную стоимость оплаты хостинга. В общем, порой слово «бесплат-
но» означает нечто совершенно иное.
1
http://www.sitepoint.com/launch/webhostingforum/.
8.4. Веб-переадресация
Если вы выбрали бесплатный или недорогой хостинг, то, наверное, получили, так
сказать, «недружественный для пользователей» адрес, то есть неудобный для
чтения и запоминания (вроде выдуманного мной http://www.freespaceforall.net/
users/~bubbleunder). Язык можно сломать, правда?
Веб-переадресация помогает без оплаты хостинга зарегистрировать приемлемое
доменное имя, указывающее туда, где на самом деле находятся ваши веб-страницы.
Посетителям будет казаться, что адрес вашего сайта короткий и легко запомина
ющийся (например, www.bubbleunder.com), и они будут успешно открывать ваши
страницы. Многие небольшие предприятия (например, семейный бизнес) исполь-
зуют веб-переадресацию, запуская свой первый сайт. Недорогой (или бесплатный)
хостинг, сочетающийся с платным доменным именем, вполне экономичен. Однако,
хоть это и кажется оптимальным решением на первый взгляд, здесь есть несколько
проблем, о которых вы должны знать.
Недостатки веб-переадресации. Часто при веб-переадресации используется
старая функция HTML под названием фрейм (frame — «конструкция, фрагмент»)1.
Обычно она применяется для того, чтобы разделить окно браузера на несколько
областей, примерно как при нарезке пирога. Фреймы используются все реже и реже
и даже не рассматриваются в этой книге (самые компетентные разработчики со-
гласятся со мной, что применение фреймов — это плохой подход, причем по многим
причинам)2. Если вы используете сервисы веб-переадресации, то ваш сайт — неза-
висимо от того, сколько страниц он включает в себя, — отобразится как единая
область, то есть один фрейм. С одной стороны, это удобно для наблюдателя (рис. 8.2).
Но на самом деле вас ждет несколько сюрпризов.
На рис. 8.2 есть несколько дефектов, которые внимательные читатели не могли
не заметить. Посмотрите на URL: как правило, название файла каждой страницы
появляется в конце, после доменного имени. Например, адрес страницы расписания
клубных мероприятий (events.html) будет таким: http://www.bubbleunder.com/events.
html. Однако веб-переадресация с использованием фреймирования будет означать,
что все ваши страницы будут иметь одинаковый адрес: http://www.bubbleunder.com.
Это влечет за собой определенные проблемы:
когда посетитель сохраняет в закладки любую из страниц сайта, вместо них
сохраняется главная страница;
сложно поставить на других сайтах ссылку на определенную страницу вашего
сайта;
когда посетитель нажимает кнопку Обновить, независимо от того, на какой стра-
нице он находился, открывается главная страница.
Другой дефект — заголовок, который мы так старательно прописывали для каж-
дой страницы сайта. Если мы используем сервис веб-переадресации, то посетитель
1
http://reference.sitepoint.com/html/frame.
2
Роджер Йоханссон Who framed the web: Frames and usability («Кто разделил Сеть: Фрей-
мы и юзабилити») (http://www.456bereastreet.com/archive/200411/who_framed_the_
web_frames_and_usability/) — хорошая дискуссия о недостатках фреймов.
8.5. Платный веб-хостинг 281
Рис. 8.2. Сайт BubbleUnder и бесплатный хостинг
видит один и тот же заголовок на всех страницах сайта — с этим ничего нельзя по-
делать. Некоторые сервисы могут даже самостоятельно изменить заголовок сайта на
какую-нибудь ерунду, как в нашем примере, — Дешевые домены от $9,95.
И наконец, если еще недостаточно причин, чтобы дважды подумать перед тем,
как использовать веб-переадресацию, то вот вам решающий факт. Некоторые по-
исковые системы могут не индексировать контент вашего сайта, если он представ-
лен в виде фрейма подобным образом, или просто не «доверяют» ему так же, как
тем сайтам, где нет элементов frameset. Поэтому, если вы хотите, чтобы ваш сайт
было легко найти, держите в уме это ограничение.
С учетом всего вышесказанного цена за веб-хостинг уже не кажется такой
высокой.
8.5. Платный веб-хостинг

Если вы действительно собираетесь платить за хостинг, то ваше положение ста-
новится куда более привлекательным. Вас не будут волновать ограничения
наподобие принудительных ссылок, непонятного поведения адресной строки
или обязательной регистрации домена. Пусть вас не пугает, что хостинг — это
очень дорого и только крупные компании могут его себе позволить. Вовсе нет.
В наши дни предлагается много отличных хостинг-планов по вполне разумной
цене (менее $10 в месяц), и вы можете найти для себя подходящий вариант.
Конечно, чем выше цена, тем больше возможностей вам будет доступно, многие
из которых, впрочем, выглядят странными, если вы новичок в этой области.
Однако, как я уже говорил, нет нужды платить за набор функций, большинство
из которых вам никогда не понадобятся (помните — ездить на работу и обратно,
а не водить грузовик!).
Основываясь на том, что вы изучили в этой книге и что может понадобиться
вам с собственным сайтом, я немного расскажу о возможностях, на которые следу-
ет обратить внимание при выборе хостинга.
8.6. Необходимые элементы хостинга

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

Итак, FTP — это протокол передачи файлов, но его редко называют полностью.
Это все равно, что говорить Automated Teller Machine (банкомат) вместо ATM.
Запомните аббревиатуру, и этого будет достаточно. Но что это такое — FTP?
FTP — метод передачи данных по сети, и это основной способ обмена файлами
между сервером (где размещен сайт) и персональным компьютером. Используя
FTP-клиент — программу, которая помогает работать с такой передачей данных, —
вы можете переносить файлы на сервер так же легко, как переносите их с места на
место на жестком диске (может быть, несколько медленнее). В этой главе я покажу,
как загрузить ваши файлы на сервер с помощью FTP-клиента. Вы можете также
встретить термин SFTP, характеризующий более защищенный вариант передачи
данных, где S означает Secure («безопасный»).
Последний, конечно, лучший из двух, но у вас может не быть выбора: некоторые
веб-хостинги не предоставят вам возможности использования SFTP, да и некото-
рые FTP-клиенты его не поддерживают. Но если вам повезло в обоих случаях,
смело выбирайте SFTP.
Пространство для хранения файлов

Как только вы закончили создание своего сайта, хорошо бы подсчитать общий
размер всех файлов, относящихся к нему. Это очень легко сделать.
В Windows��
��
щелкните правой кнопкой на папке, которую создали в главе 1 и ко-
торая содержит все файлы, относящиеся к вашему сайту (каталог Web в библиоте-
ке Документы или в папке Мои документы в XP/Vista). Выберите пункт Свойства,
откроется диалоговое окно наподобие изображенного на рис. 8.3.
8.6. Необходимые элементы хостинга 283
Рис. 8.3. Диалоговое окно Свойства
Посмотрите на число около метки Размер. Не путайте только с размером На дис-

ке — это число показывает, насколько эффективно файлы были сохранены на
жесткий диск.
В Finder выберите каталог, в котором находятся файлы вашего сайта, и вы-
полните команду FileGet Info (ФайлПолучить информацию). В диалоговом
окне Sites Info (Информация о сайте) в Mac будет видно, сколько места занимают
файлы.
Теперь вы знаете, сколько места занимают файлы вашего сайта, и можете при-
мерно подсчитать, до каких размеров он может развиться в будущем. Конечно,
точно этого никогда не вычислить. Рассмотрим базовый метод расчета.
Умножьте общий размер файлов вашего сайта на десять и добавьте еще немно-
го на всякий случай. Удостоверьтесь, что ваш хостинг предоставит вам такое ко-
личество пространства. В наши дни большинство хостингов предлагают гораздо
больше места, чем требуется для первого сайта. Бесплатный хостинг может пре-
доставить около 30 Мбайт, а недорогой платный сервис — гигабайты серверного
пространства.
ПОДСЧЕТ РАЗМЕРА ФАЙЛОВ

В примере выше общий размер файлов, относящихся к сайту, был равен 690 Кбайт. Ни одна
хостинговая компания не скажет вам, сколько места в килобайтах она предлагает; вам назо-
вут цифру в мегабайтах (Мбайт) или даже скорее в гигабайтах (Гбайт). Если вы собираетесь
сравнить эти величины, держите в голове следующие соотношения:
yy 1 Кбайт = 1024 байт;
yy 1 Мбайт = 1024 Кбайт;
yy 1 Гбайт = 1024 Мбайт.
Допустимая ширина полосы

Это понятие уже сложнее. Если у вас 20 Мбайт файлов сайта и вы обращаетесь
к каждому из них один раз в месяц, то вам понадобится 20 Мбайт трафика ежеме-
сячно. Но это, кажется, немного не то, чего вы хотите, ведь вы ждете большого
количества посетителей, которые смогут просматривать ваш сайт столько, сколько
им нужно. Но сколько их будет? Десять? Сотня? Тысяча? Что случится, если на
другом сайте поместят ссылку на ваш и вы внезапно получите тысячи посетителей
за один день? Ваш трафик взлетит до неба — вот что случится!
Лучше всего заказать месячную величину трафика около 5 Гбайт. Это вполне
разумный объем для первого сайта, если только люди не будут загружать с ваших
страниц большие фотографии или видеофайлы.
Остерегайтесь превышения лимита трафика (хотя, конечно, это вам полностью
не подконтрольно — другие люди, заходя на сайт, увеличивают трафик). Некоторые
хостинг-компании не выдают никаких предупреждений о том, что вы превысили
месячный лимит, а просто блокируют доступ к вашему сайту до следующего ка-
лендарного месяца или иного расчетного периода. Другие будут позволять вам
превышать трафик, но возьмут с вас дополнительную «плату за гибкость» — словом,
вы заплатите за то, что написано в договоре мелким шрифтом. Большинство хос-
тинг-компаний будут предупреждать вас, что вы превысили лимит трафика, пред-
лагая купить еще какое-то количество, чтобы справиться с вашей неожиданно
обретенной популярностью.
8.7. Дополнительные бонусы

Электронная почта
Бесплатный хостинг-сервис может предложить вам несколько адресов электрон-
ной почты, но, как и доменные имена, эти адреса будут выглядеть непрофессио-
нально. Посмотрите, например, какой адрес выглядит лучше:
bob.bubbleunder@freespaceforall.net;
bob@bubbleunder.com.
Это, конечно, забавно, но даже такая банальная вещь, как электронный адрес,
может многое сказать о вас людям. (Признаю: я сноб и позволяю себе судить о лю-
8.7. Дополнительные бонусы 285
дях по их электронным адресам. «��

Hotmail��
.��
com��
? Пфффф!») Вот вам причина, что-
бы заказать на хостинге такую услугу.
Если вы приняли решение купить у провайдера адрес электронной почты, удо-
стоверьтесь, что услуга предоставляет следующие возможности.
POP3/IMAP — если хостер поддерживает эти сервисы (а так и должно быть),
у вас будет возможность пользоваться своей почтой с компьютера с помощью
почтового клиента, например Outlook Express, Thunderbird или Apple Mail, либо
с помощью соответствующего программного обеспечения на вашем смартфоне,
что очень удобно.
Webmail — на случай, если вам понадобится быть на связи, находясь вдали от
вашего компьютера, удостоверьтесь, что хост поддерживает сервис Webmail.
Это позволит вам авторизоваться на сайте и проверить почту с любого ком-
пьютера точно так же, как почту на Yahoo! или Hotmail.
Переадресация электронной почты — если у вас уже есть электронная почта,
возможно, вы хотите, чтобы письма, приходящие на ваш новый адрес, просто
пересылались на уже существующий. Это называется переадресацией. Подобная
ситуация возникает, когда вы переезжаете на новое место и заказываете пере-
сылку корреспонденции, но с неограниченным сроком действия. Преимуще-
ство этого сервиса очевидно — нет необходимости проверять несколько элек-
тронных ящиков. А недостаток заключается в том, что, когда кто-то пишет вам
письмо на адрес электронной почты, указанный на сайте (bob@bubbleunder.com,
например), и вы отвечаете, адресат видит ваш реальный (и, возможно, более
неприглядный) электронный адрес. Это может выглядеть не совсем профессио-
нально и смутить получателя.
Серверные включения
(Server Side Includes, или SSIs)
Вы, наверное, уже поняли, что создание сайта требует множества действий по ко-
пированию и вставке — например, изменение навигационного блока в одном фай-
ле требует аналогичных изменений во всех остальных. С этим не будет проблем,
если страниц немного, но, если вы планируете, что ваш сайт будет бурно развивать-
ся, любые изменения могут стать очень трудоемкими.
Одним из решений могут быть серверные включения, которые позволят вам
создать файл, автоматически включаемый во все ваши веб-страницы. Изменение
одного этого файла затронет все страницы вашего сайта. Это очень полезная функ-
ция, помогающая сберечь много времени, но вам придется изучать технологию
настройки вашего персонального компьютера для работы в качестве веб-сервера.
Это не сверхсложная задача, но придется потратить на нее какое-то количество сил
и времени. У пользователей Windows есть хорошая возможность попробовать
такую технологию на примере веб-сервера Apache1. Apache — продукт с открытым
кодом, который применяется для запуска веб-серверов с сайтами любых размеров.
1
http://httpd.apache.org/.
Пользователи Mac OS X уже имеют в своем распоряжении Apache. Если у вас Mac,
можете установить флажок Personal Web Sharing (Общий веб-доступ), который
доступен в окне Sharing (Общий доступ) в области System Preferences (Системные
настройки).
Пока просто запомните, что SSI существуют и могут упростить редактирова-
ние. Хорошее описание SSI и технологии их работы в Apache доступны на сайте
yourhtmlsource.com.
Поддержка сценарных языков и баз данных

Если вы хотите сделать свой сайт более динамичным, то можете использовать на
серверной стороне какой-нибудь сценарный язык, например PHP (который лишь
упоминается в этой книге). Серверные сценарии позволяют применять к веб-стра-
ницам различные условия, от которых будет зависеть отображаемый контент.
Например (это не настоящий код, я подчеркиваю, а только пример):
If time is between 8pm and 6am then
Show the night-time image
Else
Show the day-time image
End1
Сложно найти хостинг, который не поддерживает сценарные языки. Большин-
ство хостингов позволяют использовать много языков, из которых можно выбирать.
Даже если вы пока не умеете писать сценарии, на всякий случай выберите хостинг,
допускающий их использование, — возможно, в будущем вы захотите упростить
себе жизнь и добавить на сайт динамический контент.
Часто поддержка баз данных неотделима от сценарных языков. Если вы начали
экспериментировать со сценариями, то, вероятнее всего, обнаружите, что вам нуж-
но куда-то сохранять данные и затем их оттуда считывать, то есть требуется база
данных. База данных — это хранилище информации, доступ к которой можно
получить разными способами. Например, база данных о покупателях может быть
отсортирована на веб-странице разными способами: по их месту жительства, по
сумме покупки и т. п. — очень полезная возможность! Вы можете обновлять базу
данных с любой из ваших веб-страниц, а вновь созданные страницы могут получать
доступ к информации, хранящейся в базе.
Если вы хотите больше узнать о создании динамических сайтов — SitePoint
к вашим услугам. Вы можете учиться в режиме онлайн в нашем сообществе (на-
пример, читать разделы форума PHP2 и Databases & MySQL3) или узнать все сразу в от-
личной книге для начинающих «Создание веб-управляемой базы данных с исполь-
зованием PHP и MySQL»4, написанной Кевином Янком.
1
Если текущее время между 8 вечера и 6 утра, то показать изображение для ночного вре-
мени; иначе показать изображение для дневного времени; конец. — Примеч. пер.
2
http://www.sitepoint.com/launch/phpforum.
3
http://www.sitepoint.com/forums/forumdisplay.php?88-Databases-amp-MySQL.
4
Kevin Yank’s Build Your Own Database Driven Website Using PHP & MySQL http://
www.sitepoint.com/books/phpmysql1/.
8.8. Предполетная проверка: как ваши веб-страницы выглядят в разных браузерах? 287
Разумеется, самые дешевые хостинг-сервисы (как и большинство бесплатных)

вряд ли обеспечат поддержку базы данных или сценарных языков.
ЧТО ДЕЛАТЬ, ЕСЛИ ВАШИ ТРЕБОВАНИЯ К ХОСТИНГУ ИЗМЕНИЛИСЬ?

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

как ваши веб-страницы выглядят
в разных браузерах?
Если вы создали свои веб-страницы в соответствии с веб-стандартами (если вы
следовали советам моей книги, то это так), значит, ваш сайт будет отлично отобра-
жаться в большинстве браузеров — никаких проблем! И все же проверьте свои
страницы — чем раньше, тем лучше, на тот случай, если что-нибудь вдруг оказа-
лось не так. Лучше подправить прототип или шаблон, проверив их в максимально
возможном количестве браузеров, прежде чем на их основе создавать множество
веб-страниц. Кроме того, весь сайт необходимо проверить во всех доступных вам
браузерах, прежде чем выложить на хостинг и запустить в Сеть, где его увидят все.
Ниже приведен список браузеров, в которых я рекомендую вам протестировать
страницы. Наиболее важные из них указаны в начале списка (для каждой опера-
ционной системы). Версии актуальны на момент написания книги, но, если вы
обнаружите более новую версию, используйте ее.
Windows:
Internet Explorer 9 (http://www.microsoft.com/windows/ie/). Помните, что многие
пользователи применяют более старые версии Internet Explorer, так как Internet
Explorer 9 не работает в системе Windows XP, которая очень распространена.
Проверяйте свои страницы в том числе в Internet Explorer 6, 7, и 8;
Firefox 5 (http://www.mozilla.com/firefox/);
Chrome 12 (http://www.google.com/chrome);
Opera 11 (http://www.opera.com/).
Mac OS X:
Safari 5 (http://www.apple.com/safari/);
Firefox 5 (http://www.mozilla.com/firefox/);
Chrome 12 (http://www.google.com/chrome);
Opera 11 (http://www.opera.com).
САМОСТОЯТЕЛЬНЫЙ CHROME
Большинство браузеров уведомляют пользователей о необходимости обновления и запраши-
вают на это подтверждение. Но Google Chrome обновляется автоматически.
8.9. Загрузка ваших файлов на сервер

Итак, вы нашли хостинг и выбрали тарифный план, который предоставляет вам
все необходимые функции. Вы заполнили кучу разных анкет и получили множе-
ство подтверждающих электронных писем со всевозможной информацией от сво-
его хостинг-сервиса. Немного разберемся в них и в особенностях FTP-доступа.
Настройки FTP
Провайдер вашего хостинга пришлет вам FTP-детали, которые будут выглядеть
примерно так, как показано ниже. В этом примере приведены вымышленные настрой-
ки для сайта Bubble Under (помните об этом, вводя реальные данные) (табл. 8.1):
Таблица 8.1. Настройки сайта Bubble Under
По-английски По-русски
Hello Bob Dobalina, Здравствуйте, Боб Добалина.
Your FTP account 'bubbleunder' has just been Ваша учетная запись FTP 'bubbleunder' успешно
activated, and you can begin uploading your активизирована, и вы можете начать загрузку
website's files to it. файлов вашего сайта на сервер. Когда вы
When you have your software and are ready to приготовите ваше ПО, для подключения вам
connect, you will need to provide it with a few понадобятся следующие данные: имя пользо-
settings: your username, password, and where вателя, пароль и точка, к которой вы хотите
you want it to connect to. подключиться.
Hostname: ftp.bubbleunder.com Хостинг: ftp.bubbleunder.com
Username: bobdobalina Имя пользователя: bobdobalina
Password: fl1bbertyg1bbet Пароль: fl1bbertyg1bbet
Path: /home/bobdobalina Путь: /home/bobdobalina
Имя хостинга, имя пользователя и пароль будут указаны всегда, а вот путь —
не обязательно; на самом деле он даже не всегда должен предоставляться. Просто
внимательно следуйте инструкциям вашего хостинга.
Сейчас, когда у вас есть вся нужная информация, загрузите несколько файлов.
Загрузка с FileZilla для Windows

Вы можете попробовать множество бесплатных FTP-клиентов для Windows,
однако один из самых популярных — программа с открытым кодом FileZilla Client
(есть еще FileZilla Server, но она вам пока не нужна). Чтобы установить ее, зайдите
на главную страницу сайта FileZilla1 и щелкните на ссылке Download FileZilla Client.
1
http://filezilla.sourceforge.net/.
8.9. Загрузка ваших файлов на сервер 289
Вы перейдете на страницу загрузки клиента, как показано на рис. 8.4. Нас интересу-

ет только программа установки. Щелкните на ссылке на файл FileZilla_x_y_z_setup.exe
(где X, Y, Z — номер версии).
Рис. 8.4. Страница загрузки FileZilla
Как только вы загрузите этот файл, запустите установку FileZilla. В большин-

стве случаев подходят настройки, задаваемые по умолчанию. После завершения
установки запустите программу через меню Пуск. Окно программы FileZilla пока-
зано на рис. 8.5.
Чтобы подключиться к вашему ��
FTP��
-серверу, введите имя хостинга, имя поль-
зователя и пароль в поля Host (Хост), Username (Имя пользователя) и Password
(Пароль), которые находятся в верхней части окна программы, а затем нажмите
кнопку Quickconnect (Быстрое соединение). Поле Port (Порт) будет заполнено ав-
томатически.
После этого вы подключитесь к FTP-серверу. Файлы, которые находятся на
вашем компьютере, отобразятся в левой части окна, под заголовком Local Site (Ло-
кальная машина); а файлы на FTP-сервере — в правой, под заголовком Remote Site
(Удаленная машина), как показано на рис. 8.6.
Рис. 8.5. Интерфейс FileZilla Client
Рис. 8.6. FileZilla показывает файлы компьютера слева, а сервера — справа

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

1. Укажите путь к файлам, которые нужно загрузить, используя панель с правой
стороны (папка Web в библиотеке Документы).
2. На панели справа укажите папку на сервере, в которую нужно их поместить
(используйте для этого инструкции, полученные от хостинговой компании, но
если вы видите папки с названиями web, htdocs, public_html, смело отправляйте
файлы туда).
3. Чтобы загрузить файлы на сервер, щелкните на них кнопкой мыши и перета-
щите с левой панели на правую, как копируете файлы в Проводнике Windows.
Процесс передачи файлов будет отображаться в нижней части окна (рис. 8.7).
Вы можете также перетащить целую папку. Все, что находится внутри ее, ско-
пируется на сервер.
Рис. 8.7. FileZilla загружает папку backgrounds
QUICKCONNECT RECENT SERVERS LIST (ИСТОРИЯ СЕРВЕРОВ)

Очень удобный инструмент в FileZilla — QuickConnect Recent Servers List (История серверов).
Он запоминает входные данные для последних десяти подключений к FTP-серверам, поэтому
нет необходимости вводить их каждый раз, когда вы хотите обновить сайт. Чтобы активи-
зировать этот список, просто щелкните на направленной вниз стрелке рядом с кнопкой
Quickconnect (Быстрое соединение) и выберите нужный пункт списка — в нашем случае это
будет bobdobalina@ftp.bubbleunder.com.
Загрузка с Cyberduck для Mac OS X

Mac предлагает меньше бесплатных FTP-клиентов, но есть один отличный ин-
струмент с забавным ярлыком под названием Cyberduck1. Как и FileZilla (если
вы прочли предыдущий раздел, уважаемый пользователь Mac), Cyberduck умеет
запоминать ваши входные данные, но сначала придется создать FTP-закладку. Вот
как это сделать.
1. Открыв Cyberduck, вы сразу увидите сохраненные закладки. Если это первый
запуск, то список будет пуст (рис. 8.8).
Рис. 8.8. Пустой список Bookmarks (Закладки) в Cyberduck
2. Добавьте закладку. Нажмите маленькую кнопку + в нижней части приложения,

и вы увидите диалоговое окно, показанное на рис. 8.9.
Рис. 8.9. Настройки FTP-сервера в Cyberduck
1
http://cyberduck.ch/.
3. Введите свои FTP-данные (которые вы получили по электронной почте от

провайдера) в поля Server (Сервер), Path (Путь) (для этого щелкните на ссылке
More Options (Дополнительные параметры)) и Username (Имя пользователя).
Если вы не знаете путь, оставьте соответствующее поле пустым. Измените
Nickname (Ник) на любое имя по желанию — это название, которое будет пока-
зано в списке Bookmarks (Закладки). Сделав это, закройте диалоговое окно, и за-
кладки сохранятся для последующего использования.
4. Чтобы подключиться к серверу, дважды щелкните на закладке. Вы можете по-
лучить предупреждение, что подключаетесь к неизвестному хостингу (Hosting
is unknown) (рис. 8.10). Не беспокойтесь. Если оно появится, просто нажмите
кнопку Allow (Разрешить) или Always (Всегда).
Рис. 8.10. Cyberduck предупреждает о неизвестном хостинг-подключении
5. Затем вы можете увидеть сообщение о том, что входные данные некорректны

(Login failed), так как вы не указали пароль. Введите пароль здесь и, если хотите
сохранить его для использования в будущем, установите флажок Add to Keychain
(Добавить к связке ключей) (рис. 8.11).
Рис. 8.11. Ввод пароля в Cyberduck
6. Если входные данные указаны верно, вы подключитесь к серверу, главное

окно Cyberduck изменится и покажет папки и файлы, хранящиеся на сервере
(рис. 8.12).
Рис. 8.12. Папка web на сервере, показанная в окне Cyberduck
Загрузка информации на сервер выполняется путем перетаскивания файлов

или папок прямо в окно Cyberduck. Делайте это в точности так же, как в Finder.
Другие инструменты для загрузки

Как я уже говорил, есть много автономных FTP-клиентов, которые вы можете
применять (под автономными я понимаю программы, которые разработаны спе-
циально для FTP-загрузки). Существуют и многофункциональные программы для
веб-разработки. Dreamweaver среди прочего включает в себя функции ��
FTP��
-менед-
жера1. Процедура загрузки файлов с использованием такого ПО полностью анало-
гична описанным выше процессам. Только удостоверьтесь, что вы верно указали
входные данные, предоставленные хостинг-компанией, и ввели их в нужные поля
диалогового окна программы.
8.10. Где находится ваш сайт?

Где же он? В Интернете, конечно! Если вы установили и запустили FTP-клиент,
а затем загрузили файлы, то они сейчас доступны для просмотра в Сети. Но рабо-
та еще не закончена: вы должны быть уверены, что все ссылки действительны,
а ваши HTML- и СSS-файлы успешно связаны друг с другом.
Проверка ссылок
На нашем проектном сайте немного ссылок и изображений, однако совсем ничего
не стоит допустить опечатку, чтобы нарушить связь между ссылками на веб-стра-
ницы или изображения. Многие программы для веб-дизайна или разработки вклю-
чают встроенные проверки ссылок (линк-чекеры), но нет необходимости покупать
1
http://www.adobe.com/products/dreamweaver/.
8.10. Где находится ваш сайт? 295
для этих целей дорогое ПО. Существует достаточно бесплатных линк-чекеров,

которые можно загрузить или применять в режиме онлайн.
Лучше всего использовать для проверки веб-страниц W3C Link Checker1. Вве-
дите в окно адрес вашего сайта и нажмите кнопку Check (Проверить). Для этого
примера я проверил мой собственный сайт для SitePoint’s Ultimate HTML Reference2
(который вообще не содержит ошибок, иначе я сгорел бы со стыда) (рис. 8.13).
Рис. 8.13. Сервис W3C Link Checker
Сервис проверит все ваши ссылки и составит отчет обо всех найденных ссылках.
И самое главное — там будут указаны все ссылки, оказавшиеся поврежденными.
ПРОСМАТРИВАЙТЕ КРАТКУЮ ВЕРСИЮ

Отчет может быть очень длинным, если у вас много веб-страниц, рисунков, таблиц стилей
или других документов, связанных с проверяемыми веб-страницами. В таком случае можете
установить флажок Summary Only (Краткая версия) — тогда вы увидите в отчете только пе-
речень поврежденных ссылок.
Валидация веб-страниц
Другой важный шаг, который надо сделать перед тем, как рассказать всем о новом
сайте, — выполнить валидацию веб-страниц. Это процесс проверки вашей размет-
ки на соответствие правилам языка, которые указаны в объявлении типа докумен-
та (иначе говоря, в doctype).
1
http://validator.w3.org/checklink/.
2
http://htmlreferencebook.com/.
В главе 2 я говорил, что тип документа указывается в первой строке HTML-

файла.
Chapter8\website_files\index.html (фрагмент)
<!DOCTYPE html>
Для проектного сайта мы использовали тип документа HTML5, который не-
сколько проще своих предшественников (их список доступен на сайте SitePoint1).
C помощью валидации сайта вы убедитесь, что ваши веб-страницы соответствуют всем
правилам HTML и не содержат ошибок, влияющих на отображение в различных
браузерах. Очень важно это проверить, так как веб-страница может корректно отобра-
жаться у вас на компьютере, но, если в HTML-документе есть ошибки, пользователь
в другом браузере увидит ее в искаженном виде. Валидация предупредит вас обо всем,
что может быть не так в других браузерах, в которых вы не проверили свой сайт.
Другая причина, почему важно валидировать HTML-код, — неразрывная связь
CSS и HTML. Ошибка в HTML может вызвать проблемы в CSS — от мелких вро-
де неправильного цвета ссылки до гораздо более важных, как, например, нарушения
в верстке страницы.
Как валидировать веб-страницу

В специальные программы для веб-разработки наподобие Dreamweaver встроена
соответствующая функция, но если у вас нет такого инструмента, всегда можно
воспользоваться W3C Markup Validation Service2. Как и в линк-чекере, просто
введите в поле Address (Адрес) адрес веб-страницы, которую хотите проверить,
и нажмите кнопку Check (Проверить). Если вы следовали инструкциям из этой
книги, то увидите чудесное сообщение (рис. 8.14).
Рис. 8.14. Разметка на отлично!
1
http://reference.sitepoint.com/html/doctypes.
2
http://validator.w3.org/.
8.10. Где находится ваш сайт? 297
Если вы его не увидели (в том числе прокрутив страницу), возможно, ваша веб-
страница содержит ошибки, которые нужно исправить. Хорошая новость — вали-
датор пометит эти ошибки и приведет их краткое объяснение. Типичный вид со-
общения валидации показан на рис. 8.15.
Рис. 8.15. Объяснение ошибок
К сожалению, за один раз можно проверить только одну страницу, поэтому

операцию придется повторить несколько раз. Нельзя пропустить через вали-
датор целый сайт. Для гарантии, что ваш сайт полностью валидный, нужно
проверять каждую страницу индивидуально. Впрочем, можно использовать
не только онлайн-инструмент W3C Walidator; существует программа HTML
Validator, разработанная Web Design Group, которая способна проверить весь
сайт целиком. Она также выделяет ошибки и выдает рекомендации по их исправ-
лению.
ПРЯМИКОМ НА ВАЛИДАЦИЮ!
С W3C Walidator вы можете проверить свою разметку до того, как она будет загружена
в Сеть и станет общедоступной. Он также содержит функцию Direct Input (Непосредственный
ввод), которая означает, что вы можете скопировать и вставить HTML-код с любой страницы
и валидировать его. Попробуйте валидировать любую страницу проектного сайта, например
галерею. Вот к чему это приведет.
yy Появится сообщение, что страница валидна (это хорошо).
yy Вы получите предупреждение о типе документа HTML: Using experimental feature: HTML5
Conformance��
Checker��
��
(Использование экспериментальной функции: проверка на соответ-
ствие HTML5). Это не значит, что на странице есть ошибки. Может быть, к тому времени,
когда вы будете читать этот текст, такие сообщения уже не будут появляться. Поскольку
HTML5 все еще находится в стадии разработки, валидатор проверяет на соответствие
стандартам и саму разметку. Так что это сообщение означает лишь то, что валидатор
сделал все от него зависящее, но не уверен на 100 %!
ИСПОЛЬЗОВАНИЕ СТОРОННЕЙ РАЗМЕТКИ

Если вы использовали фрагмент сторонней разметки — например, для вставки кнопки Like!
на Facebook, — вероятно, там найдутся одна или две ошибки. Иногда в такой сторонней раз-
метке можно навести порядок, чаще — нет, и лучше оставить все как есть.
В примере с Like! найдутся три ошибки из-за использования нестандартных атрибутов в теге
iframe. Если вы не уверены в результате удаления или изменения этих тегов, лучше ничего
не трогайте (в конце концов, вина за то, что эта страница не прошла валидацию, лежит не
на вас, а на разработчиках Facebook). Скорее всего, попытка добиться 100 % валидации
в данном случае приведет к обратному эффекту и причинению большего вреда, хотя, по сути
дела, эта разметка отлично работает во всех современных браузерах. Я искренне ненавижу
некорректную разметку, но бывают моменты, когда просто не нужно слишком далеко захо-
дить в стремлении к идеалу.
Проверяйте все!
Валидация касается не только HTML — вы можете (и должны) валидировать CSS,
используя W3C’s CSS Validator1. Вы даже можете запустить автоматический тест,
чтобы убедиться, что ваша страница доступна для людей с ограниченными возмож-
ностями2. Однако хочу заметить, что автоматические тесты лишь обращают ваше
внимание на области возможных проблем, а не подтверждают, что страница на
самом деле доступна.
Если вам покажется, что отчеты слишком подробны и трудны для понимания
(это распространенная проблема), обратитесь за разъяснениями на форум. Форум-
чане SitePoint’s CSS3 могут объяснить вам большинство пунктов в валидационном
отчете по CSS. Для разъяснений проблем, связанных с веб-доступностью, зареги-
стрируйтесь на Accessify Forum4 и разместите там свой вопрос.
ЧТО ЭТО ЗА ОШИБКИ?

Автоматическая валидация полностью механистична. Если вы спросите ее: «Как выглядят
мои волосы?» — она бесстрастно ответит: «Вообще-то не очень, неровно на затылке, вихры
здесь, здесь и еще здесь, а цвет просто ужасный». Я думаю, что отчеты таких автоматических
сервисов не надо понимать буквально, ведь там регистрируются все дефекты и ошибки уже
по факту наличия.
Пусть эти ошибки вас не расстраивают! Они есть у всех веб-дизайнеров и программистов.
И не переживайте, если не понимаете всего, что написано в отчете, — какая-то информация
вполне может оказаться избыточной.
Самое важное — первым делом исправить наиболее очевидные ошибки, которые вы с легко-
стью обнаружите. Затем, после того как вы обновите исправленные страницы, повторно за-
пустите валидацию. Может оказаться, что исправление одних ошибок позволило снять заод-
но и другие, которые были с ними связаны: зачастую один простой дефект порождает много
разных проблем.
1
http://jigsaw.w3.org/css-validator/.
2
Cynthia Says [http://www.contentquality.com/] — самый популярный accessability-вали-
датор.
3
http://www.sitepoint.com/launch/cssforum/.
4
http://www.accessifyforum.com/.
8.11. Раскрутка сайта 299
Если вам все-таки не удается пройти валидацию, направляйтесь на форумы SitePoint, в част-
ности на форум HTML1, и разместите там свои вопросы. Объясните форумчанам, что вы но-
вичок и нуждаетесь в помощи, и тогда обязательно получите ответы на свои вопросы и по-
мощь, чего валидатор, к моему великому сожалению, сделать не может!
8.11. Раскрутка сайта

Если вы получили подтверждение, что ваши CSS- и HTML-файлы валидны, и уве-
рены, что ваши страницы веб-доступны и хорошо выглядят в разных браузерах,
пришло время позаботиться о раскрутке сайта.
Это дело может стать отдельным проектом. SitePoint��
��
предлагает для этого спе-
циальные маркетинговые планы, например «План раскрутки поисковых систем»2
или «Бизнес-план по веб-дизайну»3. Для новичка в мире веб-дизайна они, вероят-
но, слишком масштабны; я упомянул их лишь для иллюстрации размаха этой темы
(а вовсе не в качестве маркетингового хода!). Но какие действия вы можете пред-
принять, не влезая в огромные расходы?
Продвигайте сайт
в поисковых системах
Подавляющая часть посетителей моих собственных сайтов приходит туда из по-
исковых систем, таких как Google, Bing или Yahoo! (в этом же порядке), и то же
самое будет справедливо для вашего сайта. Однако поисковые системы пока не
знают о существовании вашего сайта. Вот как это можно изменить.
На других сайтах, известных поисковым системам, есть ссылки на ваш (именно
так поисковики прощупывают Интернет — находят ссылки на страницах, кото-
рые им известны, и добавляют их в свою базу страниц).
Вы можете заполнить форму в поисковых системах, чтобы пригласить их посе-
тить ваш сайт и проиндексировать его контент (Google4, Bing5 и Yahoo!6 пред-
лагают такие страницы).
Другая отличная возможность для начала продвижения — Open Directory Pro
ject7, который претендует на роль всеобъемлющего справочника в Интернете.
Он структурирован иерархически, и вам придется как следует поработать, чтобы
ваш сайт занял высокое место в иерархии8.
1
http://www.sitepoint.com/launch/htmlforum/.
2
http://www.sitepoint.com/books/sem1/.
3
http://www.sitepoint.com/books/freelance1/.
4
http://www.google.com/addurl/.
5
http://www.bing.com/.
6
http://search.yahoo.com/info/submit.html.
7
http://dmoz.org/add.html.
8
http://www.sitepoint.com/forums/internet-marketing-2/.
ЧЕМ АККУРАТНЕЕ РАЗМЕТКА,

ТЕМ ЛУЧШЕ ПОИСКОВЫЕ РЕЗУЛЬТАТЫ
Следует отметить, что веб-страницы, которые точно соответствуют стандартам, имеют высо-
кий уровень веб-доступности и более компактны, занимают высокие позиции в поиске. Не вда-
ваясь в детали, скажу, что поисковым системам проще получать информацию с хорошо струк-
турированной страницы, чем с той, которая никак не соответствует стандартам. Вы можете
подробнее узнать об этом на упомянутых выше форумах.
Расскажите о сайте
своим друзьям и коллегам
Эта идея очевидна, но о ней стоит упомянуть. Друзья и коллеги должны быть ва-
шими самыми преданными фанатами, даже если они никогда не видели вашего
сайта. А если вы не сообщите им адрес, то никогда не узнаете, сколько раз они
посетят ваш сайт или в разговоре с кем упомянут его.
Добавьте информацию о сайте в подпись

электронной почты
Создайте в почтовом клиенте подпись, автоматически прикрепляющуюся к любо-
му отправляемому письму. Это давно известная маркетинговая технология. Стро-
ка или две в конце письма могут вызвать неожиданный эффект и привлечь на ваш
сайт немалое количество посетителей:
Привет, папа,
Во сколько ты придешь к нам на обед во вторник? Да, и ты заходил на мой новый
сайт? Как он тебе?
--
Боб Добалина
Президент Bubble Under — клуба дайверов на юго-западе Великобритании
Заходите на наш сайт http://www.bubbleunder.com/
Этот метод не потребует никаких дополнительных усилий, кроме добавления
пары строк в подпись, зато теперь любое отправленное вами письмо будет привле-
кать на ваш сайт нового посетителя!
Сообщите о себе
на соответствующем форуме
Аналогично вы можете добавить сайт в подпись к постам, которые пишете, участ-
вуя в дискуссиях на форумах по проблемам, сходным с тематикой вашего сайта.
Она может включать даже активную ссылку на ваш сайт. Преимущество данного
метода в том, что другие посетители, которые пишут и читают посты на этом фо-
руме, имеют подобные интересы. Таким образом реклама сайта сразу попадает
к тем, кто в ней заинтересован.
8.12. Резюме 301
Обмен ссылками
И наконец, я рекомендую вам обратить внимание на обмен ссылками с сайтами
похожей тематики. Будьте хорошим партнером; вряд ли электронное письмо на-
подобие: «Эй, чуваки, поставьте ссылку на мой сайт, он реально классный!» — вы-
зовет интерес. Но если вы уже добавили у себя ссылку на другой сайт, ничто не
мешает попросить его администрацию разместить у себя ссылку на ваш.
Есть программы, которые автоматизируют обмен ссылками, но я не рекомендую
ими пользоваться. Вы не можете быть уверены в качестве ссылок, которые добав-
ляете на свой сайт, как и в репутации сайтов, размещающих у себя вашу ссылку.
Кроме того, такие программы часто требуют от вас размещать безобразные банне-
ры или всплывающую рекламу, отчего сайт выглядит непрофессионально. Лучше
проявить разборчивость и держать свой сайт под личным контролем.
8.12. Резюме
В этой главе мы подробно рассмотрели процесс размещения сайта в Сети: от вы-
бора хостинга для сайта до мельчайших деталей копирования файлов на сервер.
Я объяснил, как вы можете использовать бесплатные онлайн-сервисы для провер-
ки валидности ваших страниц, и предложил несколько способов раскрутить ваш
сайт, после того как он стал доступен в Сети.
Надеюсь, вам было приятно создавать сайт. Возможно, в какой-то момент вам
показалось, что это нелегко, но вы преодолели трудности и каким-то образом до
стигли результата. Но конец ли это разработки сайта? Наверное, нет — через ко-
роткое время после размещения файлов в Интернете вы, без сомнения, задумаетесь
о дополнениях. К счастью, следующая глава целиком посвящена добавлению на
ваш сайт некоторых приятных функций. Итак, чего же мы ждем?
9 Совершенствуем сайт
с HTML5 и CSS3
Может быть, вы не знали или забыли, что на протяжении книги мы уже создавали
HTML5-документы. Но это означает лишь то, что мы указывали тип документа
HTML5. Во всех остальных случаях мы применяли элементы HTML4 (или более
ранних версий) и писали разметку с использованием синтаксиса XHTML. Этот
синтаксис предписывает указывать теги и атрибуты в нижнем регистре, а также
строго соблюдать симметричность открывающих и закрывающих тегов.
Пока мы воздерживались от использования новейших классных элементов
HTML5, но в этой главе все изменится. Кроме того, ранее я избегал упоминания
новых инструментов CSS, которые набрали популярность в мире веб-дизайна,
а именно не рассказывал о CSS3. Как и HTML, весь CSS, что вы изучили до этого
момента, был простым и предсказуемым: в конце концов, это новый для вас мате-
риал. Уж чего я точно не хотел — чтобы на самой ранней стадии вы перегрузились
новым материалом и выкинули книгу в окно.
Но в этой главе мы начнем изучение HTML5 и CSS3 и попробуем применить
их на проектном сайте. Вы также узнаете, как разные браузеры обрабатывают эти
новые элементы и выполняют их функции (и, что важно, вы научитесь сглаживать
различия в отображении элементов в разных браузерах). Начнем с небольшого
обзора — что новенького встретится вам в HTML5?
9.1. HTML5: краткая история

Я мог бы написать целый трактат о разных вехах в истории HTML��
��
5, включая по-
литику, драки и скандалы. Это, конечно, были не те скандалы, что делают тираж
популярной газеты вашего города, но вам, вероятно, и не нужно знать все подроб-
ности1. Вот мое суперсжатое резюме: в 1998 году W3C (организация, ответственная
за разработку стандартов и документации в Интернете2) успешно выпустила вер-
1
Но если вас интересуют подробности, можете найти их здесь http://diveintohtml5.org/
past.html и http://en.wikipedia.org/wiki/HTML5.
2
Это, кстати, еще одно распространенное заблуждение. На самом деле W3C не создает
стандарты, а лишь разрабатывает «рекомендации», но большинство людей понимает их
именно как законы. С технической точки зрения это неверно, но по крайней мере люди
таким образом понимают друг друга. И это здорово!
9.1. HTML5: краткая история 303
сию HTML 4.01. Вслед за этим появилась спецификация XHTML, но это было

просто обновление ��
HTML��
до синтаксиса и правил XHTML��
��
. Затем началась рабо-
та над спецификацией XHTML2.0, но ей не хватало обратной совместимости.
Стремление к созданию более жесткой системы требований означало, что им ни-
когда не смогут соответствовать более старые документы, содержащие небрежную
разметку. Поэтому, если браузеры будут открывать только документы, строго со-
ответствующие стандарту XHTML2.0, то половина сайтов в Интернете окажется
недоступной для просмотра. Даже больше половины, если говорить честно.

Создай Свой Веб-сайт с Помощью HTML и Css

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Создай Свой Веб-сайт с Помощью HTML и Css

Загружено:

Авторское право:

Доступные форматы

ББК 32.988.

12+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ.)

ISBN 978-0987090850 англ. Copyright © 2011 SitePoint Pty. Ltd.

Глава 4. Преображение с CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Глава 5. Начинаем рисовать! Используем на сайте изображения . . . . 173

Глава 10. Добавляем интерактивности с помощью

Глава 11. Что делать, если что-то идет не так . . . . . . . . . . . . . . . . . . 350

Обозначения, использованные в книге. . . . . . . . . . . . . . . . . . . . . . 32

Глава 1. Приготовьте инструменты!. . . . . . . . . . . . . . . . . . . . . . . . . 35

Глава 2. Ваши первые веб-страницы. . . . . . . . . . . . . . . . . . . . . . . . 52

Глава 3. Добавляем стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

3.3. Внутренние таблицы стилей . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Глава 4. Преображение с CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Вложение встроенных элементов друг в друга . . . . . . . . . . 130

Относительное позиционирование . . . . . . . . . . . . . . . . . . . 164

Плавающее позиционирование . . . . . . . . . . . . . . . . . . . . . 167

4.7. Оформление списков. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

4.8. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

Глава 5. Начинаем рисовать! Используем

Структура элемента img. . . . . . . . . . . . . . . . . . . . . . . . . . . 173

5.2. JPEG, GIF или PNG? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

5.3. Прозрачность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

5.4. Создание галереи изображений. . . . . . . . . . . . . . . . . . . . . . . 180

Обновление навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Добавление новой страницы для фотогалереи . . . . . . . . . . 181

Добавление первого изображения . . . . . . . . . . . . . . . . . . . 182

Именование изображений . . . . . . . . . . . . . . . . . . . . . . . . . 185

5.5. Основы редактирования изображений. . . . . . . . . . . . . . . . . . 190

Обрезка изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

Специальные эффекты . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Уменьшение больших изображений . . . . . . . . . . . . . . . . . . 194

Другое программное обеспечение . . . . . . . . . . . . . . . . . . . 196

5.6. Наполнение галереи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

5.7. Поиск изображений для вашего сайта . . . . . . . . . . . . . . . . . . 198

Фиксированная высота и ширина . . . . . . . . . . . . . . . . . . . . 204

Глава 6. Таблицы: средства для организации данных . . . . . . . . . 210

Глава 7. Формы: взаимодействие с аудиторией . . . . . . . . . . . . . . 229

Элемент label. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Глава 8. Размещение сайта в Сети . . . . . . . . . . . . . . . . . . . . . . . . 276

Бесплатный хостинг — где подвох? . . . . . . . . . . . . . . . . . . 278

Добавьте информацию о сайте

Глава 9. Совершенствуем сайт с HTML5 и CSS3 . . . . . . . . . . . . . . 302

Глава 10. Добавляем интерактивности с помощью

Стандартный сценарий JavaScript по сравнению с jQuery:

Где найти jQuery и как ею пользоваться? . . . . . . . . . . . . . . 339

Один момент! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

jQuery: к старту готов!. . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

10.2. Использование jQuery на учебном сайте . . . . . . . . . . . . . . . 343

Установка ссылок на jQuery . . . . . . . . . . . . . . . . . . . . . . . . 343

Добавление значений по умолчанию . . . . . . . . . . . . . . . . . 344

Отображение подписей к галерее при наведении

10.3. Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

Глава 11. Что делать, если что-то идет не так . . . . . . . . . . . . . . 350

Во время разработки держите открытыми

Валидация HTML и CSS в процессе работы . . . . . . . . . . . . . 352

Изучайте ошибки браузеров. . . . . . . . . . . . . . . . . . . . . . . . 354

Приготовьте браузер к бою — расширения! . . . . . . . . . . . . 355

11.2. Исследование проблем с Firebug . . . . . . . . . . . . . . . . . . . . . 360

11.3. Web Developer Toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

Отключение CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

Отключение JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

Обзор элементов на странице . . . . . . . . . . . . . . . . . . . . . . 367

Скрытие рисунка для отображения атрибутов alt . . . . . . . . 368

Глава 12. Страничку на прокачку! Инструменты, которые

Глава 4. Преображение с CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Глава 5. Начинаем рисовать! Используем на сайте изображения . . . . 173

Глава 10. Добавляем интерактивности с помощью

Глава 11. Что делать, если что-то идет не так . . . . . . . . . . . . . . . . . . 350

Обозначения, использованные в книге. . . . . . . . . . . . . . . . . . . . . . 32

Глава 1. Приготовьте инструменты!. . . . . . . . . . . . . . . . . . . . . . . . . 35

Глава 2. Ваши первые веб-страницы. . . . . . . . . . . . . . . . . . . . . . . . 52

Глава 3. Добавляем стили . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Глава 4. Преображение с CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Вложение встроенных элементов друг в друга . . . . . . . . . . 130

Глава 5. Начинаем рисовать! Используем

Фиксированная высота и ширина . . . . . . . . . . . . . . . . . . . . 204

Глава 6. Таблицы: средства для организации данных . . . . . . . . . 210

Глава 7. Формы: взаимодействие с аудиторией . . . . . . . . . . . . . . 229

Глава 8. Размещение сайта в Сети . . . . . . . . . . . . . . . . . . . . . . . . 276

Бесплатный хостинг — где подвох? . . . . . . . . . . . . . . . . . . 278

Добавьте информацию о сайте

Глава 9. Совершенствуем сайт с HTML5 и CSS3 . . . . . . . . . . . . . . 302

Глава 10. Добавляем интерактивности с помощью

Стандартный сценарий JavaScript по сравнению с jQuery:

Где найти jQuery и как ею пользоваться? . . . . . . . . . . . . . . 339

jQuery: к старту готов!. . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

10.2. Использование jQuery на учебном сайте . . . . . . . . . . . . . . . 343

Установка ссылок на jQuery . . . . . . . . . . . . . . . . . . . . . . . . 343

Добавление значений по умолчанию . . . . . . . . . . . . . . . . . 344

Отображение подписей к галерее при наведении

Глава 11. Что делать, если что-то идет не так . . . . . . . . . . . . . . 350

Валидация HTML и CSS в процессе работы . . . . . . . . . . . . . 352

Приготовьте браузер к бою — расширения! . . . . . . . . . . . . 355

11.2. Исследование проблем с Firebug . . . . . . . . . . . . . . . . . . . . . 360

Обзор элементов на странице . . . . . . . . . . . . . . . . . . . . . . 367

Глава 12. Страничку на прокачку! Инструменты, которые

Глава 13. А что теперь? Что вы можете изучать дальше. . . . . . . 398

Рис. 0.1. Internet Explorer — маленькая синяя буква «е» на Рабочем столе

Рис. 0.2. Ярлыки браузеров, отображаемые в Mac dock1

Чего нет в этой книге

трансформациями — в настоящее чудо на колесах. Такова и цель этой главы

Обновления и опечатки. Ни одна книга не идеальна, и я подозреваю, что наблю-

Обозначения, использованные в книге

Советы, примечания и предупреждения

Первое и самое основное — текстовый редактор — программа, которая позво-

Блокнот — одно из самых простых приложений, которое не содержит ничего

Рис. 1.1. Ярлык Блокнота Рис. 1.2. Блокнот: возможно, простейшая

Рис. 1.3. Internet Explorer: лучший браузер от Microsoft

Базовые инструменты в Mac OS X

Рис. 1.4. TextEdit по умолчанию входит в комплект Mac OS

Рис. 1.5. Safari доступен через папку Mac Applications (Приложения)

Рис. 1.6. Окно NoteTab Light

Как и NoteTab, Firefox имеет вкладочный интерфейс, который позволяет рабо-

Рис. 1.7. Firefox: программа, которой полезно обзавестись

Рис. 1.8. TextWrangler — бесплатный текстовый редактор от BareBones Software

работу с цветом и контрастностью. Приложение Фотогалерея можно найти через

Рис. 1.9. Фотогалерея позволяет вам открыть изображение в Paint

Picasa. Работаете ли вы в Windows 7, Vista или XP, возможности, предлагаемые

Рис. 1.10. Picasa: полнофункциональное приложение Google для обработки изображений

Рис. 1.11. Preview справляется с базовыми задачами редактирования изображений

Рис. 1.12. Использование средств обработки изображений в iPhoto

Рис. 1.13. Открытие Photoshop Express Editor

Рис. 1.14. Использование Photoshop Express для обрезки изображения

Рис. 1.15. Библиотека Документы в Windows 7, содержащая новую папку Web

Рис. 1.16. Доступ к персональным настройкам Windows 7 можно получить

Рис. 1.17. Отображение папки Sites (Сайты) в Mac OS X

Рис. 1.18. Папка Sites (Сайты) сейчас размещается на боковой панели

Базовые требования к веб-странице

Этот элемент известен как doctype (тип документа) — сокращение от Document

Рис. 2.2. Компоненты типичного HTML-элемента