Создай Свой Веб-сайт с Помощью 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 (фрагмент)
<h2>Мы рады, что вы погрузились на наш классный сайт!</h2>
<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> 
<div id="bodycontent">
<h2>Мы рады, что вы погрузились на наш классный сайт! </h2>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="Группа дайверов тренируется"/></p>
<p>Круто, что вы заглянули и поделитесь с нами воздухом! Благодаря
вашему классному умению ориентироваться под водой вы успешно нашли
путь к стартовой точке — в данном случае к нашей главной
странице.</p>
<h3>О нас</h3>
<p>Bubble Under — группа энтузиастов дайвинга, основанная
на юго-востоке Великобритании, которая регулярно встречается
для дайвинг-вылазок в летние месяцы, когда погода хорошая
и по воде плывут барашки. Мы проводим уик-энд, собираясь
небольшими группами, чтобы сократить расходы на проживание
и проезд, а также быть уверенными, что каждый получает
надежного напарника.</p>
<p>Хотя мы располагаемся на юго-западе, мы не ограничиваемся только
нашей территорией: в последних поездках мы посетили реку Скапа
в Шотландии и Мальту.</p>
<p>Когда мы не занимаемся дайвингом, мы часто встречаемся в местных
пабах, чтобы поболтать о грядущих приключениях (на самом деле это
только повод, да?).</p>
<h3>Наши контакты</h3>
<p>Чтобы узнать больше, свяжитесь с секретарем клуба Бобом Добалина
bob@bubbleunder.com.</p>
</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 Удалите разделы «О нас» и «Свяжитесь с нами» (вместе с заголовками и сле-
дующими за ними абз

Язык

Создай Свой Веб-сайт с Помощью 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

Глава 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