Главная страница

Веб-мастеринг на 100%. Ббк 32. 988. 02-018 удк 004. 72 К49


Скачать 13.49 Mb.
НазваниеБбк 32. 988. 02-018 удк 004. 72 К49
АнкорВеб-мастеринг на 100%.pdf
Дата23.06.2017
Размер13.49 Mb.
Формат файлаpdf
Имя файлаVeb-mastering_na_100.pdf
оригинальный pdf просмотр
ТипКраткое содержание
#34973
страница1 из 36
Каталогandreev.daand

С этим файлом связано 53 файл(ов). Среди них: Потенциал пляжа по России.doc, 2_Lakshmi_Bkhaskaran_Dizayn_i_vremya_v_sovremenno.pdf, Formalnaya_kompozitsia_-_Chernyshev_O_V.pdf, Меркулов А., Савохин К. - Монетизация сайта. Се...doc и ещё 43 файл(а).
Показать все связанные файлы
  1   2   3   4   5   6   7   8   9   ...   36

ББК 32.988.02-018
УДК 004.72
К49
Клименко Р. А.
К49 Веб-мастеринг на 100%. — СПб.: Питер, 2013. — 512 с.: ил.
ISBN
978-5-496-00079-6
Данная книга предназначена для тех, кто хочет научиться веб-мастерингу и стать специалистом по созданию веб-сайтов на профессиональном уровне. В издании описываются самые популярные и востребованные веб-технологии — HTML5, CSS3, JavaScript, jQuery, Ajax, PHP, а также приемы работы с системой управления содержимым сайта CMS Drupal и секреты раскрутки сайта (SEO). С помощью этих средств вы сможете создавать сайты любого назначения: от «визиток» и блогов до интерактив- ных интернет-магазинов и порталов с непрерывно обновляемыми новостями. Прочитав эту книгу, вы станете настоящим веб-мастером, готовым к работе над любыми проектами на 100%.
ББК
32.988.02-018
УДК
004.72
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как на- дежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги.
ISBN 978-5-496-00079-6
© ООО Издательство «Питер», 2013

Краткое содержание
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
От издательства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Глава 1. HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Глава 2. CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Глава 3. JavaScript, jQuery, Ajax
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Глава 4. PHP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Глава 5. CMS Drupal
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Глава 6. Раскрутка сайта
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Приложение 1. Описание сообщений, отображаемых валидаторами на основе HTML Tidy
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
Приложение 2. Популярные спецсимволы
. . . . . . . . . . . . . . . . . . . . . . . . 487
Приложение 3. Список тегов, версии браузеров и спецификации HTML, в которых работают перечисленные теги
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
Приложение 4. Свойства CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501

Оглавление
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
От издательства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Глава 1. HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Подготавливаем шаблон . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Расширение HTML-документа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Имя HTML-документа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Версии HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Выбираем DOCTYPE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Подготавливаем HTML-шаблон . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Сохраняем HTML-документ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Просматриваем наш документ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Редакторы для верстки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Валидаторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Графические редакторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Другие программы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Структура документа HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Основные понятия . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Основной синтаксис . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Семантическая верстка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Содержимое тега head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Другие теги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Работаем с макетом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Контейнеры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Оглавление
5
Тег div (контейнер) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Тег span (контейнер) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Верстаем макет . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Работаем с текстом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Тег p (абзац) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Тег br (перенос строки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Теги h1–h6 (заголовки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Тег center (центрирование) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Теги strong и em (полужирное и курсивное начертания) . . . . . . . . . . . . . . . . . . 60
Теги sub и sup (подстрочный и надстрочный) . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Тег pre (код) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Комментарии . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Атрибут title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Верстаем макет — добавляем текст . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Изображения и ссылки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Тег img (изображение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Тег hr (горизонтальная линия) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Тег a (ссылка) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Адреса в Интернете . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Верстаем макет — добавляем изображения . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Теги ul и ol (списки) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Тег dl (список определений) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Верстаем макет — создаем пункты меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Тег tr (строки таблицы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Тег td (столбцы таблицы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Общий синтаксис . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Теги thead и th (заголовки для столбцов таблицы) . . . . . . . . . . . . . . . . . . . . . . . 88
Тег tfoot (подвал таблицы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Тег caption (заголовок таблицы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Объединение строк и столбцов таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Верстаем макет — табличная верстка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Форма и ее элементы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Тег form (создаем форму) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Элементы формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Кнопка отправки формы (submit) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Оглавление
6
Текстовое поле (text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Поле ввода пароля (password) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Тег textarea (текстовая область) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Тег select (раскрывающийся список) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Флажки (checkbox) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Переключатели (radio) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Скрытый элемент (hidden) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Другие варианты тега input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Используем Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Нововведения HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Контейнеры в HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Работа с текстом в HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Изображения и ссылки в HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Возможности мультимедиа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Интерактивные возможности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Глава 2. CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Базовые понятия . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Селекторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Свойства CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Подключение CSS к HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Программное обеспечение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Редакторы CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Валидация CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Вспомогательные сервисы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
CSS-хаки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Условные комментарии . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Mozilla Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Opera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Google Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Смешанные хаки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Изучаем свойства: отступ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
margin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Отступы по умолчанию . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

Оглавление
7
Изучаем свойства: тип тега . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Изучаем свойства: границы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Закругление границ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Тени . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Изучаем свойства: размер . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
min-height и min-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
max-height и max-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
overflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Изучаем свойства: позиционирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
text-align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Центрирование блока . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
left, right, top, bottom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
z-index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
zoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
clear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Верстаем макет страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Центрирование блока . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Создание двух колонок, вариант 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Создание двух колонок, вариант 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Создание трех колонок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Изучаем свойства: списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
list-style-type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
list-style-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
list-style-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Верстаем горизонтальное меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Левостороннее меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Центрированное меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Изучаем свойства: фон . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Оглавление
8
background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
background-attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Изучаем свойства: текст . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
font-size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
font-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
font-weight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
line-height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
letter-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
white-space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
text-indent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
text-decoration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
text-transform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
font-variant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
word-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
unicode-bidi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
quotes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
font-family . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Использование нестандартных шрифтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Выбираем шрифт . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Определение шрифта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Тень под текстом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Градиентный текст для Cufon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Другие возможности Cufon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Верстаем макет: меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Дополнительное горизонтальное меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Главное меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Изучаем свойства: таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
vertical-align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
border-collapse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
border-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
caption-side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
empty-cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
table-layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Изучаем свойства: печать . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
orphans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Оглавление
9
widows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
page-break-inside . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
page-break-before . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
page-break-after . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Изучаем свойства: другое . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Дизайн прокрутки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Нововведения CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Новые свойства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Новые значения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Глава 3. JavaScript, jQuery, Ajax
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Создаем и подключаем сценарии . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
В HTML-документе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
В JS-файле . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
События . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Ошибки в JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Синтаксис JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Переменные . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Типы переменных . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Конвертирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Свойства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Методы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Массивы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Арифметические операции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Условные операторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
Циклы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Работаем с DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Объекты DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Примеры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Работа с jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Подключение jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Первые шаги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Доступ к элементам веб-страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Работа с набором элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Существование элемента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355

Оглавление
10
Работа со свойствами CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Изменяем содержимое тега . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Изменяем атрибуты тега . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Удаление тегов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Управление тегом select . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Анимация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Работа с событиями . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Используем Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Справочник jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Готовые сценарии . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Темизация (изменение) полосы прокрутки (jScrollPane .js) . . . . . . . . . . . . . . . 391
Тень под текстом (jquery .dropshadow .js или text-shadow .min .js) . . . . . . . . . . 393
Темизация списков (ui .dropdownchecklist .js) . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Анимация цвета (jquery .color .js) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Всплывающие окна (ColorBox) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Счетчик обратного отсчета (actions .js) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
PNG24 для Internet Explorer 6 (DD_belatedPNG .js) . . . . . . . . . . . . . . . . . . . . . . 401
Предзагрузка изображений (preloadCssImages .jQuery_v5 .js) . . . . . . . . . . . . 402
Слайдер (jcarousellite .js) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Глава 4. PHP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Установка набора Denwer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Файлы PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Используем PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Вывод на экран . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Переменные в PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Проверка содержимого . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Конвертирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
Массивы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Условные операторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Циклы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Глава 5. CMS Drupal
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Устанавливаем CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
Модули . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Стандартные модули . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Сторонние модули . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

Оглавление
11
Основные понятия . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
Тема оформления . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
Блоки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
Форматы ввода . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Роли и разрешения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
Типы материалов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Поля . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
Таксономия . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Глава 6. Раскрутка сайта
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Поисковые системы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Добавляем сайт . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Файл sitemaps .xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Основные правила SEO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
Каталоги сайтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
Рейтинговые системы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Прочие разновидности сервисов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Активная реклама . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Приложение 1. Описание сообщений, отображаемых валидаторами на основе HTML Tidy
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
Приложение 2. Популярные спецсимволы
. . . . . . . . . . . . . . . . . . . . . . . . 487
Приложение 3. Список тегов, версии браузеров и спецификации HTML, в которых работают перечисленные теги
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
Приложение 4. Свойства CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501

Введение
Лет десять назад создание сайтов было несложным занятием. Достаточно было потратить несколько вечеров на изучение базовых возможностей HTML, и дело было сделано — вы могли смело называть себя веб-мастером. Однако за последние десять лет в сайтостроении многое изменилось. Сайты стали намного красивее и интерактивнее. Возможности разработчиков возросли. Но вместе с тем сложность создания сайтов возросла во много раз. Прогресс не стоит на месте, и количество знаний, которыми должен обладать разработчик, увеличилось многократно.
Теперь для разработки полноценного сайта недостаточно знать HTML. Чтобы создать красивый и функциональный сайт, нужно разбираться в таких технологи- ях, как CSS, JavaScript, PHP. Необходимо уметь работать с графическим пакетом
Adobe Photoshop и желательно иметь навыки создания баннеров и flash-объектов.
А чтобы не провести остаток жизни за созданием своего сайта, желательно также уметь работать с какой-либо CMS (Content Management System) — системой управ- ления сайтом.
Чтобы досконально изучить все перечисленные технологии, потребуется не один месяц и не одна книга. Но практика показывает, что дотошно изучать эти техноло- гии не нужно. HTML, CSS, JavaScript, PHP… — в своей повседневной жизни рядо- вой веб-программист использует лишь малую часть всех их возможностей. Более того, на свете есть очень и очень мало людей, которые наизусть помнят все возмож- ности тех же HTML и CSS.
В современном мире профессионализм веб-разработчика оценивается не количе- ством его навыков, а умением выходить из нестандартных ситуаций, знанием изюминок программирования. Что толку от того, что вы можете без запинки назвать все теги языка HTML, если вы не способны реализовать вывод трех колонок маке- та сайта, одинаково отображающийся в популярных браузерах. Какой смысл от всех ваших познаний в CSS, если вы не можете воплотить градиентный текст, за- думанный дизайнером в макете.

13
Данная книга не заменит десятка книг с полным описанием синтаксиса и команд языков HTML, JavaScript и PHP. Но она поможет вам стать профессиональным веб-разработчиком. С ее помощью вы изучите все, что необходимо в повседневной работе веб-разработчика. Вы овладеете тонкостями разработки сайта: правильным позиционированием объектов при верстке, размещением элементов дизайна внизу экрана, работой с нестандартными шрифтами, созданием теней и градиентного текста, закруглением уголков элементов HTML-макета и многим другим.
После изучения основных технологий, применяемых веб-разработчиками при создании сайта, мы рассмотрим, как работать с CMS Drupal: создадим тему офор- мления для данной CMS на основе верстки, выполненной нами в предыдущих главах. После чего разработаем настоящий сайт, и даже полноценный интернет- магазин.
В конце книги мы поговорим о раскрутке созданного сайта в поисковых системах.
На странице книги на сайте издательства «Питер» (http://www.piter.com) вы може- те скачать дополнительные материалы к книге.
От издательства
Ваши замечания, предложения и вопросы отправляйте по адресу электронной поч- ты halickaya@minsk.piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На сайте издательства http://www.piter.com вы найдете подробную информацию о наших книгах.
От издательства

Глава 1
HTML
Подготавливаем шаблон
Структура документа HTML
Работаем с макетом
Контейнеры
Работаем с текстом
Изображения и ссылки
Списки
Таблицы
Форма и ее элементы
Используем Flash
Нововведения HTML5

15
Первый язык, который мы с вами изучим, называется HTML (HyperText Markup
Language, язык разметки гипертекста). Он дает возможность указать, в какой части веб-страницы будет находиться тот или иной элемент: текст, таблица, кар- тинка.
Раньше HTML применялся для форматирования текста и изменения цвета эле- ментов страницы. Но сейчас для этих целей служат каскадные таблицы стилей
(Cascading Style Sheets, CSS), о которых будет рассказано в главе 2.
После прочтения этой и следующей глав вы сможете называть себя верстальщиком сайтов, то есть человеком, выполняющим верстку HTML-документа.
Верстка — это создание структуры HTML-документа таким образом, чтобы во всех браузерах веб-страница выглядела точно так же, как и на предоставленном дизай- нером макете.
Макет — разработанный в формате PSD вид будущей HTML-страницы, определя- ющий расположение элементов и изображения, которые должны на ней отобра- жаться. Реже макеты создают в векторных форматах AI и CDR. Еще реже в каче стве макета выступает JPG-картинка или PDF-документ.
Подготавливаем шаблон
Самое сложное в любом деле — начать. При разработке сайта начало всегда одина- ковое — нужно создать текстовый документ с расширением HTML, HTM или PHP, после чего внести в него общий каркас HTML-документа. Ведь HTML-документ — это не что иное, как обычный текстовый документ, но только со специальным расширением. Вы легко можете создать его в любом текстовом редакторе, даже в Блокноте.
Расширение HTML-документа
Между расширениями HTML и HTM нет разницы, поэтому вы можете использо- вать любое из них. А вот расширение PHP можно применять только в том случае, если вы создаете сайт на каком-либо хостинге (локальном или хостинге в Интер- нете) с установленным языком PHP.
Расширение PHP мы будем применять после главы 4, посвященной языку PHP.
До этого все наши веб-документы будут иметь расширение HTML.
Подготавливаем шаблон

Глава 1 . HTML
16
Имя HTML-документа
В принципе, HTML-документ может иметь любое имя, состоящее из латинских букв и цифр (но первой в имени должна идти буква). Но если вы хотите, чтобы
HTML-документ открывался при вводе в адресной строке браузера адреса вашего сайта, нужно дать HTML-документу специальное имя.
Например, вы приобрели домен example.com, после чего разместили на нем набор
HTML-документов. Какой HTML-документ будет открываться, если посетитель введет в адресной строке браузера URL-адрес http://example.com (то есть адрес сайта без указания документа, который хочет просмотреть)?
В этом случае веб-сервер попытается открыть HTML-документ с именем index.html или main.html. Чаще всего самый главный HTML-документ называют index.html.
Вы, наверное, знакомы с таким понятием, как «домашняя страница». На многих сайтах есть логотип со ссылкой на нее, или «хлебные крошки»
1
, которые начина- ются с нее. Как правило, домашняя страница — это и есть файл index.html, index.htm или index.php.
Итак, создайте текстовый документ с расширением HTML.
Версии HTML
Первая версия языка HTML — HTML 2.0 — была утверждена еще в 1995 году.
Процесс создания сайтов на ней не подчинялся никаким правилам — разработчи- ки могли использовать любой регистр, и сайты на HTML 2.0 грешили огромным количеством ошибок.
В 1997 году появились сразу две новые версии языка HTML — 3.2 и 4.
Еще через два года, в 1999 году, возникла версия HTML 4.01, содержащая большое количество нововведений.
А на следующий год была выпущена версия XHTML 1.0, которая долгое время использовалась для создания сайтов. И лишь недавно появилась HTML5 — самая последняя версия языка разметки. Версия HTML5 является попыткой объединить
XHTML 1.0 и HTML 4.01.
Чем же отличались старые версии HTML от более новых? Естественно, в новых версиях появлялись новые теги и атрибуты. Однако это не все изменения.
1
Навигационная цепочка, в которой перечислены ссылки на все разделы сайта, начиная с главной страницы, которые нужно было последовательно посетить, чтобы попасть на от- крытую в данный момент страницу сайта.

17
Иногда использовавшиеся ранее теги или атрибуты признавались устаревшими и не рекомендуемыми для применения. От этого теги/атрибуты не теряли своей функциональности — иначе пострадала бы обратная совместимость. Но применять их не рекомендовалось.
Чаще всего теги и атрибуты признавались устаревшими по той причине, что для них появилась более подходящая замена. Так стали устаревшими атрибуты изме- нения цвета элемента, а также тег
FONT — на их место пришли каскадные таблицы стилей. Но изредка замены для устаревшего тега не находилось. Например, уста- ревший тег
CENTER еще долгое время жил за гранью закона — разработчики вы- нуждены были его использовать, не находя адекватной замены.
Иногда теги, которые ранее были признаны устаревшими, в новой версии HTML опять становились рекомендуемыми для применения. Как и любая развивающая- ся система, язык HTML старался соответствовать текущему времени и текущим нуждам разработчиков.
Но основная тенденция развития языка HTML заключалась в стандартизации синтаксиса и верстки HTML-документа. Из-за многочисленных условностей при верстке допускалось большое количество ошибок. Было принято решение бороть- ся с этим. В результате синтаксис языка HTML стал более строгим. Но об этом мы поговорим далее в книге.
Вернемся к нашим дням. На данный момент последняя версия HTML имеет номер 5.
HTML5 отличается от XHTML 1.0 только наличием новых тегов. Причем эти теги не поддерживаются старыми версиями браузеров. Под старыми версиями имеют- ся в виду версии браузеров, которые были выпущены год и более назад. В Интер- нете существует огромное количество пользователей, которые до сих пор исполь- зуют старые версии браузеров. По этой причине новые теги HTML5 пока лучше не применять. А если учесть, что абсолютное большинство заказчиков еще в 2010 году требовало от разработчиков сайтов совместимости верстки с браузером Internet
Explorer 6.0 (то есть чтобы в устаревшем браузере Internet Explorer 6.0 верстка отображалась точно так же, как и в более новых версиях браузера), то время воз- можностей HTML5 наступит еще очень нескоро.
Именно поэтому в данной книге мы начнем изучение HTML с возможностей языка
XHTML. И только в последних главах начнем применять возможности HTML5.
Выбираем DOCTYPE
Каждый HTML-документ должен начинаться со строки
DOCTYPE. Она говорит браузеру, какую версию HTML вы планируете использовать при создании HTML- страницы.
Подготавливаем шаблон

Глава 1 . HTML
18
Это очень важный момент, поскольку строка
DOCTYPE влияет на большое коли- чество мелочей: от поведения различных тегов до размера границ, расстояния по умолчанию, высоты и ширины тегов. Поэтому указывать строку
DOCTYPE следует осознанно. Но поскольку мы с вами только начали изучение языка HTML, нам остается лишь выбрать
DOCTYPE последней версии HTML и учиться верстать для данной версии.
Если вы не укажете строку
DOCTYPE или сделаете это неверно, различные брау зеры будут вести себя по-разному. Браузер Opera будет считать, что вы верстаете в самой новой версии HTML, а браузеры Internet Explorer и Mozilla, наоборот, — что для самой старой версии. Соответственно, ваша веб-страница будет по-разному выгля- деть в разных браузерах, что категорически недопустимо.
Итак, откройте в Блокноте HTML-файл, который мы создали ранее. И в первой строке этого файла введите строку:
Это
DOCTYPE для HTML5. Именно его мы и будем использовать в дальнейшем.
Помимо данного
DOCTYPE, можно встретить следующие:
‰
www.w3.org/TR/html4/strict.dtd"> — DOCTYPE для стандарта HTML 4.01
Strict (строгий);
‰
EN" "http://www.w3.org/TR/html4/loose.dtd"> — DOCTYPE для стан- дарта HTML 4.01 Transitional (переходный);
‰
"http://www.w3.org/TR/html4/frameset.dtd"> — DOCTYPE для стан- дарта HTML 4.01 Frameset (с фреймами);
‰
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> — DOCTYPE для стандарта XHTML 1.0 Strict (строгий);
‰
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd"> — DOCTYPE для стандарта XHTML 1.0 Transitional (переходный);
‰
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> —
DOCTYPE для стандарта XHTML 1.0 Frameset (с фреймами);
‰
www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> — DOCTYPE для стандарта
XHTML 1.1.

19
Как видите, запись
DOCTYPE для HTML5 самая простая: в ней нет никаких непо- нятных адресов. И для него, как и для XHTML 1.1, нет разновидностей Transitional,
Frameset и Strict.
От Transitional, Frameset и Strict также зависит, как будут выводиться те или иные элементы языка HTML, а также какие из этих элементов будут считаться устарев- шими.
Разновидность Transitional, как следует из названия, является переходным
‰
вариантом от прошлой версии языка HTML к новой. Если в новой версии HTML какие-то теги были признаны устаревшими, то в стандарте Transitional они по- прежнему остаются рекомендуемыми для применения. То есть при использо- вании варианта Transitional сайт, скорее всего, будет выводиться так же, как и при применении более старой версии HTML.
Разновидность Frameset аналогична Transitional, кроме того, в Frameset также
‰
разрешено применять теги для создания фреймов.
Разновидность Strict используется в том случае, если код документа полностью
‰
соответствует выбранной версии HTML. В Strict оформление и содержание полностью разделены между HTML и CSS.
Если по каким-то причинам вы не можете применить
, то луч- ше всего использовать
DOCTYPE предыдущей версии HTML:
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">.
Запоминать, как пишется
DOCTYPE, не стоит. Лучше создать шаблон HTML- документа с нужным
DOCTYPE, после чего использовать этот шаблон в своих проектах.
Подготавливаем HTML-шаблон
После того как вы определились с нужным
DOCTYPE, следует составить базовую структуру HTML-документа. В HTML все теги представляют собой иерархическую систему. Они могут быть вложены только в определенные теги.
Так, самым первым тегом в HTML-документе должен быть
HTML, объявление ко- торого идет сразу после
DOCTYPE. В этом теге могут находиться только теги HEAD или
BODY. Сам документ должен располагаться внутри тега BODY, а информация, описывающая документ, — в теге
HEAD.
Если вы не создаете страницу с фреймами, то базовая структура всегда будет одинакова. Для HTML5 базовая структура HTML-документа представлена в лис- тинге 1.1.
Подготавливаем шаблон

Глава 1 . HTML
20
Листинг 1.1. Базовая структура HTML-документа версии HTML5
  1   2   3   4   5   6   7   8   9   ...   36

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