ISBN 0

133.95 грн.

  

Рассмотрено в книге Самоучитель HTML  совместное применение HTML и CSS для решения практи­ческих задач верстки веб-страниц. Технологии описаны на современном уровне и опираются на действующие в настоящее время стандарты Консор­циума W3C. Уделено внимание совместимости страниц с популярными браузерами, удобству их практического использования и оптимизации для поисковых систем. Приведены профессиональные приемы создания и ре­дактирования кода HTML и CSS, использования инструментов разработки, тестирования и контроля качества веб-страниц. Обсуждаются перспективы развития веб-технологий в ближайшем будущем.

 

оглавление книги

Самоучитель HTML и CSS. Современные технологии. Чебыкин

 

Введение

Следите за обновлениями

Благодарности

О моей предыдущей книге

Условные обозначения

 

ЧАСТЬ I. ПЕРВЫЕ ШАГИ

 

Глава 1. Предварительная подготовка

   1.1. Представление данных в компьютере

      1.1.1. Двоичный код

      1.1.2. Калькулятор Windows

   1.2. Аппаратное и программное обеспечение

      1.2.1. Аппаратное обеспечение

Видеорежим

Подключение к Интернету

      1.2.2. Программное обеспечение

Операционная система

Безопасность компьютера

Файловая система

Браузеры

Программы для разработки веб-страниц

   1.3. Эффективная работа с текстовым редактором

      1.3.1. Слепой десятипальцевый метод набора Особенности набора кода

      1.3.2. Стандартные операции редактирования

Часто встречающиеся затруднения

Курсор и текущая позиция

Перемещение курсора

Выделение фрагментов текста

Копирование, вырезание, вставка

Удаление символов

Эффективное использование клавиатуры

 

Глава 2. Элементарные операции с файлами HTML и CSS

   2.1. Как работать с файлами HTML

      2.1.1. Как просматривать код HTML на действующих сайтах

      2.1.2. Как создать файл HTML

Имена файлов и каталогов (папок)

      2.1.3. Как наполнить содержанием файл HTML

      2.1.4. Как просмотреть файл HTML в браузере

      2.1.5. Как редактировать файл HTML

      2.1.6. Как проверить файл HTML с помощью валидатора

   2.2. Как работать с файлами CSS

      2.2.1. Как создать файл CSS

      2.2.2. Как подключить файл CSS к файлу HTML

      2.2.3. Как редактировать файл CSS

      2.2.4. Как проверить файл CSS с помощью валидатора

   2.3. Как избежать ошибок

      2.3.1. Ошибки при работе с файлами и каталогами (папками)

      2.3.2. Ошибки при наборе символов

      2.3.3. Ошибки в настройках компьютера

      2.3.4. Если ничего не помогает

   2.4. Операции с файлами HTML и CSS в Adobe Dreamweaver

      2.4.1. Как настроить свойства нового документа по умолчанию

      2.4.2. Как создать стандартный шаблон файла HTML

      2.4.3. Как работать с файлами HTML и CSS

      2.4.4. Как настроить сочетания клавиш

 

Глава 3. Основы синтаксиса HTML и CSS

   3.1. Символы

      3.1.1. Как вводить символы, которых нет на клавиатуре

Таблица символов

Сочетания клавиш с Alt

Настройка сочетаний клавиш в среде разработки

      3.1.2. Типографские символы

Неразрывный пробел

Дефисы

Знак ударения

      3.1.3. Подстановки символов

Как не надо применять подстановки

      3.1.4. Unicode и кодировки символов

Кодировки символов Unicode

Устаревшие кодировки символов

Где указывать кодировку символов

Как настроить шрифт в текстовом редакторе

   3.2. Основные конструкции языка HTML

      3.2.1. Документ HTML. Символьные данные и разметка

      3.2.2. Тэги

      3.2.3. Элементы

Дерево документа

      3.2.4. Атрибуты

      3.2.5. Стандарты HTML

Консорциум W3CОбъявление типа документа

Определение типа документа

Официальные стандарты HTML

Документация по HTML на сайтах браузеров

   3.3. Основные конструкции языка CSS

      3.3.1. Таблица стилей

      3.3.2. Правила, свойства, значения

      3.3.3. Стандарты CSS

 

Глава 4. Структурные элементы HTML

   4.1. Элемент html — веб-страница

      4.1.1. Атрибуты lang и xml.lang— естественный язык

      4.1.2. Атрибут xmlns — пространство имён XML

   4.2. Элемент head— служебная часть страницы

      4.2.1. Элемент title — заглавие веб-страницы

Как составлять заглавия страниц

      4.2.2. Элемент meta — сведения о кодировке

      4.2.3. Элемент link — подключение файла CSS

   4.3. Элемент body — основная часть веб-страницы

 

Глава 5. Текстовые элементы HTML

   5.1. Заголовки

      5.1.1. Элемент hi — заголовок 1 -го уровня

      5.1.2. Элементы h2-h6— заголовки 2-6 уровней

      5.1.3. Как составлять заголовки

   5.2. Текстовые блоки

      5.2.1. Элементр— абзац текста

      5.2.2. Элемент address — короткая надпись

   5.3. Выделения в тексте

      5.3.1. Элемент ет — логическое выделение (курсив)

      5.3.2. Элемент strong— графическое выделение (полужирный шрифт)....

   5.4. Цитаты и сокращения

      5.4.1. Элемент blockquote — блочная цитата

      5.4.2. Элемент cite— название

      5.4.3. Элемент q — строчная цитата

      5.4.4. Элемент abbr — сокращение

Элемент acronym и типографские нормы

   5.5. Особые выделения

      5.5.1. Элементы code, dfn, kbd, samp, var

      5.5.2. Элементы sub к sup— нижний и верхний индексы

      5.5.3. Элементы ins и del — добавленный и удалённый фрагменты

      5.5.4. Элементы b, big, i, small, tt

   5.6. Пробельные символы и перевод строки

      5.6.1. Пробельные символы

Обычный пробел

Табуляция

Перевод строки

Стандартный режим обработки пробельных символов

      5.6.2. Автоматический и принудительный перевод строки

Элемент br — принудительный перевод строки

      5.6.3. Элемент pre — текст с предварительным форматированием

      5.6.4. Свойство white-space — режим обработки пробельных символов

   5.7. Как использовать текстовые элементы

 

Глава 6. Цвет

   6.1. Цветовая модель RGB

   6.2. Свойство color — цвет текста

      6.2.1. Примеры цветов

      6.2.2. «Безопасные» цвета

   6.3. Свойство background— цвет фона

   6.4. Как использовать цвет

   6.5. Как предотвратить проблемы пользователей

 

Глава 7. Линии и рамки

   7.1. Горизонтальные и вертикальные линии

      7.1.1. Свойства border-top-width, border-right-width, border-bottom-width, border-left-width — толщина линии

      7.1.2. Свойства border-top-color, border-right-color, border-bottom-color, border-left-color — цвет линии

      7.1.3. Свойства border-top-style, border-right-style, border-bottom-style, border-left-style — стиль линии

      7.1.4. Собирательные свойства border-top, border-right, border-bottom, border-left — линия с одной стороны

Эффекты линий

   7.2. Рамки

      7.2.1. Собирательное свойство border — рамка

      7.2.2. Собирательные свойства border-width, border-color, border-style — толщина, цвет и стиль рамки

   7.3. Как использовать линии и рамки

 

Глава 8. Списки (перечни)

   8.1. Элементы списков в HTML

      8.1.1. Элемент м/ — ненумерованный список

      8.1.2. Элемент о/— нумерованный список

      8.1.3. Элемент //' — пункт списка

      8.1.4. Элементы dl, dt, dd— список определений и его пункты

      8.1.5. Многоуровневые списки

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

      8.2.1. Свойство list-style-type — вид маркеров списка

      8.2.2. Свойство list-style-position — положение маркеров списка

      8.2.3. Собирательное свойство list-style — параметры маркеров списка Свойство list-style-image — маркер-изображение

      8.2.4. Расширенные возможности оформления списков

      8.2.5. Недостатки оформления списков в CSS

   8.3. Как использовать списки

 

Глава 9. Технология и культура разработки кода

   9.1. Общие вопросы разработки сайтов

      9.1.1. Три главных вопроса

      9.1.2. Процесс разработки сайта

Разработка требований

Проектирование содержания

Художественное оформление

Техническая реализация

Тестирование и контроль качества

Сопровождение

      9.1.3. Как стать профессионалом

   9.2. Какими источниками информации надо пользоваться

      9.2.1. Пользуйтесь официальными источниками

      9.2.2. Пользуйтесь современными источниками

      9.2.3. Пользуйтесь компетентными источниками

   9.3. Как тестировать веб-страницы

      9.3.1. Просматривайте страницу в разных браузерах

      9.3.2. Проверяйте код с помощью валидатора

Как работать с валидатором

      9.3.3. Просматривайте страницу при разной ширине окна браузера

      9.3.4. Просматривайте страницу при разных размерах шрифта

   9.4. Эффективные приёмы разработки кода

      9.4.1. Порядок набора конструкций HTML и CSS

Главное правило набора

Тэги

Атрибуты

Непустые элементы

Правила CSS

      9.4.2. Пробельные символы в коде HTML и CSS

Стиль кодирования HTML

Стиль кодирования CSS

Объём кода и оптимизация

   9.5. Комментарии

      9.5.1. Комментарии HTML

      9.5.2. Комментарии CSS

      9.5.3. Условные комментарии в Internet Explorer

 

ЧАСТЬ II. ОТ ПРОСТОГО К СЛОЖНОМУ

 

Глава 10. Гиперссылки

10.1. Элемент а — гиперссылка

   10.1.1. Порядок набора гиперссылки

   10.1.2. Атрибут href—адрес гиперссылки

Абсолютный адрес

Относительный адрес

   10.1.3. Гиперссылка на определённый элемент

Атрибут id— метка элемента

   10.1.4. Атрибуты гиперссылок

Атрибут tide — описание гиперссылки

Другие атрибуты гиперссылки

   10.2. Оформление гиперссылок

      10.2.1. Псевдоклассы гиперссылок

      10.2.2. Свойство text-decoration — подчёркивание и другие текстовые эффекты

   10.3. Панели навигации

      10.3.1. Вертикальные панели навигации

      10.3.2. Горизонтальные панели навигации

«Хлебные крошки»

   10.4. Как использовать гиперссылки

      10.4.1. Не злоупотребляйте гиперссылками

      10.4.2. Гиперссылка должна быть заметной

      10.4.3. Гиперссылка должна быть понятной

      10.4.4. Гиперссылка должна быть доступной

      10.4.5. Гиперссылка должна бытьдействующей

      10.4.6. Гиперссылка должна быть предсказуемой

 

Глава 11. Изображения в HTML

   11.1. Форматы изображений

      11.1.1. Растровая и векторная графика

Оптимизация изображений

      11.1.2. JPEG

      11.1.3. GIF

      11.1.4. PNG

Оптимизация PNG

   11.2. Элемент img — изображение

      11.2.1. Атрибут src — адрес изображения

      11.2.2. Атрибут alt — текстовое описание изображения

Атрибут alt и поисковые системы

Отображение атрибута alt

      11.2.3. Атрибут style — размеры изображения

   11.3. Особенности работы с изображениями

      11.3.1. Зазоры вокруг изображений

      11.3.2. Изображения-гиперссылки

      11.3.3. Изображения-карты

   11.4. Как использовать изображения

      11.4.1. Не заключайте текст в изображения

      11.4.2. Не используйте изображения там, где лучше подходит текст

      11.4.3. Применяйте кадрирование при изготовлении уменьшенных копий

      11.4.4. Просматривайте страницу при отключённых изображениях

 

Глава 12. Типы отображения областей элементов

   12.1. Области элементов

   12.2. Строчные и блочные области

      12.2.1. Области элементов

      12.2.2. Безымянные области

   12.3. Группы Inline и Block в определении типа документа

      12.3.1. Правила иерархии элементов

      12.3.2. Модель содержания элементов

   12.4. Элементы span и div

      12.4.1. Элемент span — универсальный строчный элемент

      12.4.2. Элемент div — универсальный блочный элемент

   12.5. Свойство display — тип отображения области

      12.5.1. Значения inline и block

      12.5.2. Значение list-item

      12.5.3. Другие значения

 

Глава 13. Таблицы

   13.1. Основные элементы таблиц

      13.1.1. Элемент table — таблица

      13.1.2. Элемент tr — строка таблицы

      13.1.3. Элементы th и td— ячейки таблицы

Пример: разметка простой таблицы

Атрибуты colspan и rowspan — объединение ячеек

Разметка сложных таблиц

   13.2. Дополнительные элементы таблиц

      13.2.1. Элементы thead и {foot — «шапка» и «подвал» таблицы

      13.2.2. Элемент tbody — основная часть таблицы

Совместное использование элементов thead, tfoot и tbody

      13.2.3. Элемент caption — заголовок таблицы

      13.2.4. Элементы со/ и colgroup — графы (столбцы) таблицы

Оформление граф таблицы

Пример: разметка таблицы с дополнительными элементами

   13.3. Рамки в таблицах

Свойство border-collapse — режим соединения рамок

      13.3.1. Другие свойства таблиц

   13.4. Как использовать таблицы

      13.4.1. Не растягивайте таблицу

      13.4.2. Не злоупотребляйте рамками

 

Глава 14. Оформление текста

   14.1. Компьютерные шрифты

      14.1.1. Принципы отображения текста

      14.1.2. Классификация шрифтов

Семейства шрифтов в CSS

      14.1.3. Стандартные шрифты Windows

   14.2. Свойства шрифта

      14.2.1. Свойство font-family — гарнитура шрифта

      14.2.2. Свойство font-size — кегль шрифта

      14.2.3. Свойство font-weight— насыщенность шрифта

      14.2.4. Свойство font-style — наклон шрифта

      14.2.5. Собирательное свойство font— параметры шрифта Свойство font-variant — капитель

      14.2.6. Свойство text-transform — регистр символов

   14.3. Оформление строчных областей

      14.3.1. Свойство line-height — высота строки

      14.3.2. Свойство letter-spacing— межбуквенный интервал

      14.3.3. Свойство word-spacing— междусловный интервал

      14.4. Как использовать шрифты

      14.4.1. Не злоупотребляйте разнообразием шрифтов

      14.4.2. Учитывайте отличия сайтов от печатных изданий

 

Глава 15. Выравнивание

   15.1. Свойство text-align — горизонтальное выравнивание

   15.2. Свойство vertical-align — вертикальное выравнивание

      15.2.1. Вертикальное выравнивание строчных элементов

Значение по умолчанию baseline

Значения middle, sub, super

Значения top, bottom, text-top, text-bottom

Значения в единицах длины и процентах

      15.2.2. Вертикальное выравнивание в ячейках таблицы

 

Глава 16. Основы компоновки областей

   16.1. Основные понятия компоновки областей

      16.1.1. Область просмотра и область страницы

      16.1.2. Контейнеры областей

      16.2.1. Поле содержания

Свойство width — ширина поля содержания

Свойство height — высота поля содержания

Свойства min-width, max-width, nun-height, max-height — минимальные и максимальные размеры поля содержания

Свойство text-indent — абзацный отступ

   16.2. поля областей элементов

      16.2.1. Поле внутреннего отступа

Свойства padding-top, padding-right, padding-bottom, padding-left —

внутренний отступ с одной стороны

Собирательное свойство padding — внутренние отступы со всех сторон

      16.2.2. Поле внешнего отступа

Свойства margin-top, margin-right, margin-bottom, margin-left —

внешний отступ с одной стороны

Собирательное свойство margin — внешние отступы со всех сторон.....

   16.3. Совместное применение свойств полей областей

      16.3.1. Регулирование ширины и горизонтальных отступов

      16.3.2. Регулирование высоты

Как «растянуть» страницу по высоте окна

Как центрировать содержание относительно страницы

   16.4. Переполнение поля содержания

      16.4.1. Свойство overflow — режим переполнения поля содержания

      16.4.2. Свойства overflow-x, overftow-y — переполнение в одном измерении

 

Глава 17. Селекторы CSS

   17.1. Простые селекторы

      17.1.1. Селекторы по типу элемента

      17.1.2. Универсальный селектор

      17.1.3. Селектор по id

      17.1.4. Селектор по class

Расширенное использование атрибута class

Не злоупотребляйте атрибутами id и classl

      17.1.5. Селекторы атрибутов

Селектор существования атрибута [ ]

Селектор равенства атрибута [=]

Селектор атрибута с пробелами [~=]

Селектор атрибута с дефисом [|=]

Селектор префикса атрибута [Л=]

Селектор суффикса атрибута [$=]

Селектор подстроки атрибута [*=]

      17.1.6. Псевдоклассы

Динамические псевдоклассы

Структурный псевдокласс .first-child

Другие псевдоклассы

      17.1.7. Последовательность простых селекторов

   17.2. Псевдоэлементы

      17.2.1. Псевдоэлементы :.[first-letter и ::first-line

      17.2.2. Другие псевдоэлементы

      17.2.3. Употребление псевдоэлементов

   17.3. Комбинаторы

      17.3.1. Комбинатор элемента-потомка — пробел

      17.3.2. Комбинатор дочернего элемента >

      17.3.3. Комбинатор ближайшего смежного элемента +

      17.3.4. Комбинатор произвольного смежного элемента-

Не применяйте «трюки» с селекторами

   17.4. Группировка селекторов

 

Глава 18. Вёрстка страниц с помощью таблиц

   18.1. Постановка задачи

      18.1.1. Макет страницы

      18.1.2. Спецификация

Спецификация должна быть хорошей

   18.2. Основные этапы вёрстки

      18.2.1. Составление схемы страницы по графическому макету

      18.2.2. Определение структуры таблиц

      18.2.3. Составление кода HTML в соответствии со структурой таблиц

      18.2.4. Задание оформления CSS для страницы и элементов таблиц

      18.2.5. Заполнение содержанием и оформление ячеек таблиц

Логотип

Адрес

Панель навигации

Текст

Остальные ячейки

   18.3. Готовая работа

   18.4. Особенности табличной вёрстки

   18.5. О «недостатках» табличной вёрстки

 

Глава 19. Плавающие элементы

   19.1. Свойство float — обтекание

      19.1.1. Поведение плавающих элементов

      19.1.2. Примеры плавающих элементов

   19.2. Свойство clear — запрет обтекания

   19.3. Применение плавающих элементов для вёрстки страниц

      19.3.1. Пример вёрстки

Верхний колонтитул

Основная часть

      19.3.2. Готовая работа

Как избежать злоупотреблений

      19.3.3. Сравнение табличной и бестабличной вёрстки

Объём кода

Сложность кода

Масштабируемость

Выводы

 

ЧАСТЬ III. ВЫСШИЙ ПИЛОТАЖ

 

Глава 20. Формы

   20.1. Как работают формы

   20.2. Элементы форм

      20.2.1. Элемент form— форма

      20.2.2. Элемент input — различные элементы управления

input type="text"— поле для ввода текста

input type=''password"— поле для ввода текста

input type=" checkbox" — флажок

input type="radio"— переключатель

input type="file"— поле для выбора