Книга «HTML, CSS, скрипты: практика создания сайтов»

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

Моя книга, как и многие другие, адресована новичкам в области веб-разработки. Но новичкам увлеченным, жаждущим познать эту кухню изнутри — если хотите, будущим профессионалам отрасли. У меня вы днем с огнем не найдете ни сухого пересказа официальных спецификаций, ни догматических «пошаговых инструкций», описывающих шаблонные способы «сколачивания» сайта за пять минут. Напротив, я стремлюсь склонить читателей к самостоятельному анализу и творческому осмыслению принципов и фактов.

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

Все примеры, размещенные на компакт-диске, сопровождающем книгу (а их более 80), проверены валидатором и строго соответствуют букве стандартов.

Официальная аннотация

Обложка книги «HTML, CSS, скрипты: практика создания сайтов»

Ломов А. Ю. HTML, CSS, скрипты: практика создания сайтов. — СПб: БХВ-Петербург, 2006. — 416 с.: ил.

ISBN 5-94157-698-6

Рассматриваются современные веб-технологии клиентской стороны: языки разметки HTML 4.01 и XHTML 1.x в сочетании с каскадными листами стилей CSS2, а также язык сценариев JavaScript. По мере прочтения книги складывается целостное представление о технологической цепочке создания веб-сайтов и формируется понимание актуальных тенденций развития веб-технологий. Обилие практических примеров и скриншотов делает знакомство с материалом интересным и увлекательным. Среди примеров имеется ряд вполне завершенных разработок, обладающих самостоятельной практической ценностью: несколько вариантов шаблонов веб-страниц, сверстанных при помощи блоков, небольшой законченный сайт, интерактивное приложение — тест на знание HTML и др. В результате читатели смогут самостоятельно создавать вполне работоспособные сайты информационной направленности. К книге прилагается компакт-диск со всеми примерами.

Для веб-разработчиков.

Оглавление

  • Введение
    • Цели и задачи этой книги
    • Для кого предназначена книга
    • Чему научит книга
    • Краткий экскурс по главам и приложениям
    • Благодарности
  • Часть I. Технологические основы
    • Глава 1. Устройство сайта
      • Интернет: что внутри?
        • Протоколы
        • Эталонная модель взаимодействия открытых систем ISO OSI
        • Стек протоколов TCP/IP
        • Адресация на сетевом уровне
        • Система и служба доменных имен
        • Публикация сайта
        • Идентификация ресурсов
      • Всемирная паутина как прикладная служба Интернета
        • Сервис, затмивший все
      • Описание сущности сайтов
        • Коммерческие и некоммерческие сайты
        • Информационные и презентационные сайты
        • Сайт в действии
      • Устройство веб-страницы: взгляд внутрь
        • Исследование исходного кода страниц
        • Статика и динамика
      • Стадии разработки сайта
        • Начало — половина дела
        • Рождение и жизнь проекта
    • Глава 2. Создание простейших страниц с помощью языка разметки HTML
      • Экскурс в историю Всемирной паутины
        • SGML и основы теории разметки
        • HTML на грани кризиса
      • Настоящее и будущее веб-технологий
      • Построение HTML-документа
        • Минимальный HTML-документ
        • Время «X»: создание простейшего документа при помощи XHTML
        • С прицелом на будущее
      • Структурирование данных
        • Заголовки
        • Абзацы
        • Принудительный разрыв строки
        • Списки
        • Логическое выделение
      • Гипертекстовые ссылки
        • Абсолютные ссылки
        • Относительные ссылки
        • Ссылки на разделы одного документа
        • Открытие ссылок в новом окне
      • Вставка изображений и других объектов в веб-страницу
        • Анатомия веб-графики
        • Использование тега <object>
      • Практические примеры — простейшие веб-страницы
    • Глава 3. Оформление веб-страниц с использованием каскадных листов стилей
      • Назначение и возможности CSS
      • Синтаксис конструкций CSS и связь листа стилей с веб-страницей
        • Селекторы, свойства и значения
        • Внешние и внутренние листы стилей
        • Внутри или снаружи — «против» и «за»
        • Индивидуальные правила представления контента для различных сред и устройств вывода
      • Цвет текста и фона
      • Фоновое изображение
        • Линейные единицы измерения в CSS
        • Подготовка фоновых изображений
      • Форматирование текстовых блоков
        • Свойства шрифта
        • Свойства текстового набора
        • Свойства списков
      • Практические примеры — веб-страницы, оформленные при помощи CSS
  • Часть II. Применение веб-технологий стороны клиента для создания сайтов
    • Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц
      • Организация пространства страницы информационного сайта
        • И снова о минимализме
      • Оформление прямоугольных блоков средствами CSS
        • Свойства рамок
        • Поля и отступы
      • Взаимное размещение нескольких блоков
        • Селекторы классов и уникальных элементов
        • Линейные размеры элементов
        • Виды позиционирования
        • Обтекаемые элементы
      • Практический пример — веб-страница с горизонтально ориентированным блоком навигации
      • Практический пример — веб-страница с вертикально ориентированным блоком навигации
      • Системы навигации сайтов
        • Внутренняя навигация
        • Внешняя навигация
      • Интерактивное меню навигации средствами CSS
      • Практический пример — завершенный сайт
        • Лист стилей готового сайта
        • Типы страниц
        • Примеры к этой главе, размещенные на компакт-диске
    • Глава 5. Таблицы в HTML
      • Для чего нужны таблицы и почему об этом нужно говорить особо?
      • Создание простой «правильной» таблицы
      • Оформление таблиц
      • Сложные таблицы с объединением ячеек
      • Заголовки таблиц, заголовочные ячейки, группировка столбцов и строк
      • Вложенные таблицы
      • Табличная верстка макета сайта: «за» и «против»
      • Практические примеры таблиц
    • Глава 6. Формы в HTML
      • Веб-формы как средство обратной связи с пользователем
        • Наши методы
        • Основные элементы форм
      • Текстовые поля ввода
      • Богатство выбора
        • «Радиокнопки» и флажки
        • Списки единственного и множественного выбора
      • Кнопки
      • Специальные возможности веб-форм
        • Использование тега <label>
        • Иерархические списки
        • Поля ввода пароля
        • Скрытые поля
        • Поля для выбора файла
        • Группировка элементов форм
      • Оформление HTML-форм
      • Практические примеры форм
    • Глава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript и динамического HTML
      • Сценарии на стороне клиента — ключ к интерактивности
        • Назначение и ключевые особенности JavaScript
        • Понятие объектной модели документа и динамического HTML
        • Почему JavaScript?
      • Обработчики событий
      • Связь скриптов с веб-страницей
      • JavaScript как язык программирования
        • Основы синтаксиса, переменные и базовые типы данных
        • Введение в объектно-ориентированное программирование
        • Инструменты первой необходимости
        • Отладка сценариев
      • Практический пример — интерактивный тест на знание HTML
        • Вместо заключения
  • Приложения
    • Приложение 1. Ссылки на символьные объекты, определенные в спецификации HTML 4.01
    • Приложение 2. Ключевые слова, обозначающие поименованные цвета, предусмотренные спецификацией CSS2 и перспективными версиями CSS
    • Приложение 3. Описание компакт-диска
  • Предметный указатель

Замеченные опечатки

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

Тем не менее, некоторые, на взгляд стороннего наблюдателя, «мелочи» заметно огорчили меня.

Большинство моих сетований относится к типографике и стилистике.

Так, кавычки в форме «елочек» и „лапок“ во всем моем авторском тексте были старательно заменены редакцией на "программистские" прямые кавычки. Причем даже в таких местах, как приложение 1, иллюстрирующее ссылки на символьные объекты, предопределенные спецификацией HTML (с. 371—383), а также пункт «Азы текстового набора» подраздела «Абзацы» главы 2 (с. 88).

Время от времени попадаются скобки, набранные курсивом вместе с размещенными внутри них выделенными словами, ну и прочие подобные нелепицы.

В отпечатанной книжке можно кое-где встретить формулировки, которые я никогда бы не употребил в авторском тексте — скажем, «благодаря Всемирной паутине сети Интернет» (с. 7), «графика для Веб» (с. 107).

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

Впрочем, редакции нужно отдать должное — содержание глав подверглось, в общем и целом, лишь незначительным, косметическим изменениям. Более других досталось разделу «Интернет: что внутри?» главы 1 — как мне представляется, в результате сокращения он приобрел в сухости и академичности, но потерял в связности и доступности для неподготовленного читателя.

К сожалению, не обошлось и без явных опечаток, искажающих смысл текста.

Где Напечатано Следует читать
С. 23 Стандарты данной архитектуры (ISO 7598) являются рекомендуемыми, факультативными для реализации. Стандарты данной архитектуры (ISO 7498) являются рекомендуемыми, факультативными для реализации.
С. 30 Для снятия упомянутых ограничений в сети Интернет была предложена схема именования, получившая названия системы доменных имен (Domain Name System, DNS). Для снятия упомянутых ограничений в сети Интернет была предложена схема именования, получившая название системы доменных имен (Domain Name System, DNS).
С. 34 Служба DNS представляет собой распределенную базу данных, содержащую информацию об IP-адресах и соответствующих им доменных имен. Служба DNS представляет собой распределенную базу данных, содержащую информацию об IP-адресах и соответствующих им доменных именах.
С. 60 Монолитные макеты режутся на фрагменты, которые сохраняются в общепринятых для использования в графических форматах Всемирной паутины. Монолитные макеты режутся на фрагменты, которые сохраняются в общепринятых для использования во Всемирной паутине графических форматах.
С. 81 Листинг 2.4. «Минимальный» XHML-документ Листинг 2.4. «Минимальный» XHTML-документ
С. 88 В русском языке некоторые редакции для набора традиционно применяют французские кавычки («елочки»), а для вложенных кавычек — немецкие „лапки“. В русском языке для набора традиционно применяются французские кавычки («елочки»), а в качестве вложенных кавычек — немецкие („лапки“).
С. 166 «Резиновый» шаблон верстать сложнее, да и вряд ли какая-либо другая композиция будет выглядеть сбалансированно при возможном изменении ее ширины в два с лишним раза от расчетной. «Резиновый» шаблон верстать сложнее, да и вряд ли какая бы то ни было композиция будет выглядеть сбалансированно при возможном изменении ее ширины в два с лишним раза от расчетной.
С. 171 Следует отметить, что не все браузеры корректно отображают перечисленные типы рамок. Так, например, IE5 (да и IE6) заменяет прерывистые рамки на сплошные, а также почти не делает различий между двумя разными типами «вдавленных» и «выпуклых» рамок. Следует отметить, что не все браузеры корректно отображают перечисленные типы рамок. Так, например, IE5 заменяет прерывистые рамки на сплошные, а также почти не делает различий между двумя разными типами «вдавленных» и «выпуклых» рамок. Последнее, впрочем, справедливо и для IE6.
С. 241, пример на CD #text ul, text ol { #text ul, #text ol {
С. 360, пример на CD 
<h2>4. Какие теги из перечисленных ниже определяют блочные элементы?</h2>
<p><input type="checkbox" id="choice41" /> <label for="choice31">&lt;a&gt;</label></p>
<p><input type="checkbox" id="choice42" /> <label for="choice32">&lt;div&gt;</label></p>
<p><input type="checkbox" id="choice43" /> <label for="choice33">&lt;p&gt;</label></p>
<p><input type="checkbox" id="choice44" /> <label for="choice34">&lt;span&gt;</label></p>

<h2>4. Какие теги из перечисленных ниже определяют блочные элементы?</h2>
<p><input type="checkbox" id="choice41" /> <label for="choice41">&lt;a&gt;</label></p>
<p><input type="checkbox" id="choice42" /> <label for="choice42">&lt;div&gt;</label></p>
<p><input type="checkbox" id="choice43" /> <label for="choice43">&lt;p&gt;</label></p>
<p><input type="checkbox" id="choice44" /> <label for="choice44">&lt;span&gt;</label></p>
С. 371 Разработчик имеет право применять любые символы из набора Unicode, отдавая себе отчет в том, что некоторые из этих знаков могут быть реально отображены пользовательскими агентами. Разработчик имеет право применять любые символы из набора Unicode, отдавая себе отчет в том, что лишь малая толика этих знаков может быть реально отображена пользовательскими агентами.

В бочке меда, увы, не без ложки дегтя… Но в целом первый блин получился вполне себе румяным и вкусным.