HTML/CSS. Вся веб-разработка в схемах и иллюстрациях

Предисловие . .. . .. . .. .. . .. . ... . . .. .. . .. . .. . .. .. .. . .. . . V
ВВЕДЕНИЕ. ИЗУЧАЙТЕ HTML И CSS . . . . ....... . .. . ... .. xv
Интернет и WWW ..................................... XV
Что представляет собой веб-сайт? . . . . . . . . . . . . . . . . . . . . . . XVI
Что такое HTML и CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XVI
Веб-сервер. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIX
Динамические веб-страницы. . . . . . . . . . . . . . . . . . . . . . . . . . . ХХ
Скрипты на стороне клиента . . . . . . . . . . . . . . . . . . . . . . . . . . . XXI
Как меняется интернет ................................ XXII
Самые распространенные веб-браузеры ............. . . . . XXIII
ГЛАВА 1. ВЕБ-САЙТ. ОБЩИЙ ОБЗОР . . . . .... . . ....... . 1
Веб-страницы и веб-сайты ................................ 2
Технологии обмена информацией .. .. ...... . ........ . ... . .. 3
Веб-сайт ......... ............ . ............. . ....... . .. . .......... . 4
Что такое веб-сайт ...................................... 4
Домашняя страница .. ........................ . ... . . ..... 4
Что такое веб-страница . . .. . .. . .. .. .. .. . .. . .. . .. . .. .. . ... 5
HTML и CSS ... . .. .. ...... . ...... . ... . ... . ... . .. . ... . ...... .. .. . ... 6
HTML . .... .. .. ........ . .. .. . .. .. . .. .. .... .. ..... .. . . .. 6
CSS . .. . .. . .. . .. .. . .. .. . .. . .. .. . .. .. . .. . .. .. . .. .. . .. . .. 7
Веб-браузеры и веб-сайты . ..... .. ... . .. . ... . .. .. .. . ... . ... . .. . ... 8
Что такое веб-браузер? .... .. .... ......... . .. . .. .. ..... .. 8
Веб-браузеры и веб-сайты . . . .. .. . .. .. .. .. . . .. .. . .. . .. . .. . 9
Серверы и клиенты ....................... . .. . ....... . .......... . 1 О
Что такое веб-сервер? .................................. 1 О
Программное обеспечение для веб-серверов .. . ..... .. . .. . . 1 О
Взаимодействие с веб-серверами . .. . ... . ..... . .. .. . .. . .. . 11
Базы данных ..................................................... 12
Что такое база данных? . .. . . ... . .. .. . . ............ . .. .. . 12
Веб-технологии и базы данных .. . .. . ... . .. . .. . .. . .. . ..... 13
Cookie .. . ... . ... . ...... ........... . ... .. .. . .. .. ...... . .. . ....... . 14
Что такое cookie .. . ............... .. . ..... . ......... . .. 14
Как работают cookie .. .. ........... .. . ............ . ..... 15
Домен и URL .... . .............. . ...... . ... . ...... .. .. . .......... . 16
Домен . .. .. .... ......... . .. . .. . .. .. ..... . ..... .. . .. .. 16
gTLD ..... .. . .. .. . .. .. . . .. .. . .. . .. .. . ..... .. . .. . .. .. . . 16
Пример полного URL ................................... 17
Протокол .................... . ........................ 17
Для особо любознательных ~ Пока спецификация W3C не завершена .... 18
ОСНОВЫ HTML . ................ ....... .. .. 19
Основы HTML ......................................... 20
Элементы DOCTYPE и URL ......... . .. .. . .. . .. . .. .. .. . .. . 21
Об актуальной версии HTML ............ . .. . .......... ... ..... .. .. 22
HTML Living Standard ............... . ................... 22
Преемственность HTML5 . ......... .. . .. . ..... . ..... .. .. . 23
Создание файлов HTML ........ . .......... . .. ... ..... . ....... . .. . 24
Создание файлов HTML ................................. 24
Теги, элементы и атрибуты . .. .. . .. .. .. .. . .. ... . ...... . ....... . ... 26
Теги и элементы .. . .. .. ........ . .. . .. .. ........ .. . .. . .. 26
Атрибуты и значения ................................... 27
Вложенные элементы и комментарии . .. . .. .. ... . .. . ... . ...... . ... 28
Вложенные элементы .. . ........ .. .. . .. . ..... . .. .. .. . .. . 28
Комментарии .......................................... 29
Атрибуты и их назначение ...... . ....... . .. .. ......... .. ...... . ... 30
id и class . .. . .. . ...... .. . ..... . .. . .. . ..... .. .. .. . .. . .. 30
Объявление DOCTYPE и спецификация кодов символов . .. ... . .. .. 32
Декларация DOCTYPE ..... . ....... . ..................... 32
Задание кодов символов ... .. .. . .. . ..... .. ..... .. .... .. . 33
Абсолютные и относительные адреса URL . ....... . .. . .......... .. 34
URL .................................................. 34
Абсолютные и относительные URL ........................ 34
Для особо любознательных ~Модель содержимого~ . .. . .. .. 36
ЭЛЕМЕНТЫ HTML . ........ . ....... . ....... 37
Теги и атрибуты ......... . ............... . ... . ... . ..... . 38
Три важных тега .. . .. . .. .. . .. .. . .. . .. . .. .. .. . .. . .. . .. . . 38
О таблицах и формах ................................... 39
Основные элементы документа . ...... .... . ... .. .. . .. .. .. . .. .. .. . 40
Элементы основной структуры документа . ..... . .. .. . .. . ... 40
Основная информация о документе . .. . .. . . .. .. . ...... . .. . 41
Теги, определяющие состав документа . . ... ... . ... . ...... .. ...... 42
Структура веб-страницы .. .. .. . .. . .. . .. .. . .. .. .. . .. . .. . . .42
Элементы документа .. . .. . .. . .. . . .. .. . .. .. .. . .. . .. .. . .. 43
Теги разметки структуры текста (1) . .. . ... . .. .. .. .. .. . ...... . ..... 44
Теги заголовка ..... . ... . .. . ........ . ... . .. .. . .. .... .. .. 44
Теги начала абзаца и длинных цитат . .. . .. ..... . .. .. . .. . .. . 45
Теги разметки структуры текста (2) . .. ...... .. ... . .. . ...... . ..... 46
Теги , обозначающие смен у темы . . .. .. . .. . .. . .. .. .. . .. . .. .46
Отформатированный текст . .. . ... . .. . .. . . .. .. . .. . ... . .. .46
Списки .. . . . ...... . .. . ..... .. ..... .. ........ . .. . ... . . . 47
Теги для разметки блоков . ..... . ...... . . ..... . ... .. .. . .. .. .. ... .. 48
Теги общего назначения ... . .. .. . ..... .. . . .. .. . ...... . .. . 48
Теги div и span . . .. . . . . .... . .. . .. . .. .. .. . .. .. . .. . .. .. . . . 48
Теги для оформления текста (1) . ..... . ...... .. ...... . ...... . ... .. 50
Акценты в тексте .. . .. .. . .. .. . .. . .. . .. . .. .. .. .. . .. . .. . .. 50
Теги для оформления текста (2) . .. ... . ...... .. ...... . ...... .. .. .. 52
Отсылки и цитаты ........... . .. . ..... .. ..... . ...... . .. . 52
Теги для оформления текста (3) . ..... .. ..... . .... . .. . ...... .. .. .. 54
Осмысление текста ..... . ......... . ............ . .. . ..... 54
Теги для ссылок и изображений .. ..... . .......... . ............... 56
Теги для размещения ссылок ............................ 56
Тег и дл я размещения изображений . .. .. .. . .. .. . .. . .. . .. . . 57
Таблицы .................................... ........... . ......... 58
Тег таблицы ................ . ................... . ...... 58
Формы .. ... . . .... ... ..... ..... . .. ... . .. .. . . ... .. . . . ... . .. .. . .... . 60
Форма .. . .. .. . .. . .. ... . . .. .... .. .. . .. .. .. . .. . ..... . .. 60
Тег form .............................................. 60
Примеры обработки простых форм ... . ..... . .. . .......... 61
Теги элементов форм (1) ...... . .. ....... . ........... . ....... . .... 62
Элементы формы .......... . ........................ . .. 62
Тег поля ввода (iпput) ................................... 63
Теги элементов форм (2) . . ............ . .. . ... . ...... . ....... . .... 64
Значения атрибута type ..... .. .... .. .. . .. .. . . ... . ..... . . 64
Теги элементов форм (З) . ... . .. . ....... .. .. . .. . .................. 66
Кнопка (buttoп) .. .. . . .. .. .. .. .... . .. . .. .. . ... . .. . .. . .. . 66
Элемент textarea . . .. .. . .. .. .. .. . . .. ..... . .. .. . .. . .. .. . . 66
Список (select) ........................................ 67
Теги элементов форм (4) ....... . ...... . ...... . ...... . ... . ... . .... 68
Тег label . .. . .. . ...... .. . . .. . . . . ..... .. .. . .. . .. .. . .. .. . 68
Тег и fieldset и legeпd .................................... 69
От теории - к практике .. ...... . ... . ... . ..... .. ...... . ...... .. .. .. 70
Для особо любознательных ~Об элементе МЕТА~ .. . .. . . . .. . 72
основы css .... ... .... ... ... .... .... ... .. 73
Что такое CSS? .. . .. . .. .. .. .. . . . . .. . .. . .. .. . .. .. . . .. .. . 7 4
Основы написания CSS .. . .. .. .. . . .. .. . .. . .. . .. .. . .. .. .. 75
Что же такое CSS? ... ... . ... . .. . ... . .... ....... . ... ... . ... ... . ... 76
Что представляет собой CSS .... .. ..... .. ...... . ......... 76
Преемственность версий CSS .. . .. . ... . .. . .. . . . . .. . .. .. .. 77
Простой пример CSS .. . .. . .... . . . .. . . . . .. . ...... . .. .. . . 77
Где живет CSS (1) . .. . ... . ... . .. . ... . .......... .. ... .. .... ... .. .. . 78
Как задать стиль в атрибуте style ...... . .. . .. . . . . .. . .. .. .. 78
Как задать стили в файле HTML (тег style) .. . ... . . . . .. . . . . .. 79
Где живет CSS (2) . .. .. .. . .. .. .. .. .. . ... . .. . ... . . ..... ...... . ... .. 80
Внешние файл ы CSS .. .. . .. .. . . . . .. . .. . .. . .. . ... . .. .. . . 80
Преимущества использования внешних файлов .... . ..... . .. 81
Приоритет ..... . ..... .. .... . .... . . . ... . .. . ..... . ... . .. 81
Основы верстки с помощью CSS . . . .. . ....... . .......... . ....... .. 82
Базовый формат CSS .. . .. . . . . .. . . . . .. . ... . .. . .. . .. .. . .. 82
Значение по умолчанию ... . .. . .. . .. . .. .. .. . .. . .. . .. .. . .. 83
Как писать комментарии ..... .. ... ...... ............... . 83
Область применения стилей (1) ... . .. .. ...... . ....... . .. . .. .. ... .. 84
Как присвоить один и тот же стиль нескольким элементам .... 84
Как присвоить одинаковый стиль всем элементам ... . . ...... 84
Область применения стилей (2) .... . ... ... . .. . ... . .. .. . .. ....... .. 86
Как присвоить одинаковый стиль нескольким элементам ... .. 86
Как задать стиль конкретного элемента . .. . .. . .. . ... . .. . .. . 87
Область применения стилей (3) ... . .. . ... . ... . .......... . ....... .. 88
Изменение стиля при наведении указателя мыши .. . .. ... ... 88
Изменение стиля при щелчке на гиперссылке .. . .. . . . . .. . ... 89
Как указать цвет и длину . .... . ... . .. . ... . ... . ... . ...... . ...... .. . 90
Как задать цвет .......... . ............................. 90
Как указать размеры элемента ............. . ............. 91
Для особо любознательных - Отображение специальных символов . 92
СВОЙСТВА CSS (1) . ...... . ......... ....... 93
Использование свойств CSS на практике .. .. .... .. .. . .. . ... 94
Знакомимся с блочной моделью ............ . .... . ........ 95
Свойства текста (1) .. ............... . ....... . .......... . ....... .. 96
Параметры расположения текста .. . .. . .. . .. . .. . ... . .. . .. . 96
Свойства текста (2) . . . ... . .. ..... . .. . ... . ... . .. .. .. . ... . .. . .. ... . 98
Интервал между символами и словами . .. .. .. . . .. . .. .. . .. . 98
Украшаем текст . .. . .. . .. .. . .. .. . .. . ..... .. .. . .. . .. . .. . . 99
Свойства шрифта . . .. . ... . ... . ... . .. . ... . ...... .. .. . ... . ...... . . 100
Цвет текста .......................................... 100
Курсивное начертание .... . ..... .. . .. .. . . .. ............ 100
Насыщенность шрифта ...... . . . ........ . . . ............ 100
Размер шрифта (кегль) .... .. ..... . ..... . ...... . ....... 101
Тип шрифта . .. .... . ... . .. . .. . ..... . ... . .. .. . .. .... .. . 101
Блочная модель .. ...... ................... . .. . ....... . ......... . 102
Что такое блочная модель .. . ... . .. . .. . .. .. . .. . .. .. . .. . . 102
Свойства блока (1) .. . .. .. ...... . ... . .. . ... . .. .. .. .... . ... . .. . .. . 104
Ширина и высота области содержимого .. .. . .. . .. .. . .. . .. 104
Отступы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. .. . .. . 1 05
Свойства блока (2) .. . .. .... . .. .. ...... . ... . .. .. .. .. . .. ... . .. . .. . 106
Граница .. . ..... . ... .. .... . ...... . .. . .. . ...... . ..... . 106
Свойства блока (З) ..... ................... . .. . ....... . ......... . 108
Элементы, размеры которых можно менять ............... 108
Закругленные углы ................ . ... . ........ . ..... . 109
Свойства фона (1) ...... ........ . .......... . .. . ....... . ......... . 11 О
Цвет фона ...... . ... . ...... . ..... . ..... .. ........... . 11 О
Фоновое изображение (1) .............................. 11 О
Свойства фона (2) . ..... ........ . ...... . ... . .. . .... . .. . ......... . 112
Фоновое изображение (2) . . .. .. . .. .. . .. . .. . .. . .. .. .. . . . 112
Отображение и размещение (1 ) ............... ............... . . . . 114
Свойства, определяющие формат отображения .... .. . .. .. . 114
Свойства, определяющие положение элементов . . ... . .. . .. . 115
Отображение и размещение (2) ... . ... ... . ... .. . ... . . ... ...... . . . 116
Порядок наложения элементов ... . ...... . ..... . ...... . .. 116
Обтекание элементов текстом . . .. .. . .. .. .. . .. . .. . .. . .. .. 117
Списки и таблицы ... . .. .... .... . .. .. .. . ... . .. .. ... .. . . ... . .. . .. . 118
Маркеры или номера пунктов списка .................. . .. 118
Параметры таблицы .. .. .. .. . .. .. .. . .. .. .. . .. . .. . .. . ... 119
От теории - к практике . .. .. . ... . .. .. .. .. .. . .. .. ... . .. . ... . ... . .. 120
Для особо любознательных ~Н а полях~ ................. 122
СВОЙСТВА CSS (2) ............. . ...... ... 123
Гибкая компоновка блоков .. . ... . .. . .. .. . . .. ... . . .. . .. . . 124
Движение ....................................... . ... 125
Многоколоночная верстка ...... . ....... . .. . ....... . .. . ... . ... . .. 126
Верстка в несколько колонок .. .. . . . . . .. . . .. .. .... .. . .. .. 126
Разделители колонок .................................. 127
Флексбокс ...... . ...... .... . ... . ...... . ... . .. . .... . .. . ... . ..... . 128
Что такое флексбокс? .. . .. . ... . .. . .. .. . . .. .. .. . .. . .. . . 128
Задаем свойство flexbox ................................ 128
Прозрачность и градиент ......... . .. . ....... . .......... . ....... . 130
Как задать прозрачность .......... . .................... 130
Переходы .. .. .... .. .. .... . .. .... . ...... .. ...... . .......... . ... .. 132
Что такое переходы? . . .. .. . .. ............... . ........ . 132
Как задать свойства перехода . ..... . .................... 132
Анимация ... . .... .. .. . .. .. .. ... .. ... . .. .. ...... . .... . .. ... . ... .. 134
Что такое СSS-анимация? . . .. . ............... . ........ . 134
Запуск анимации ..................................... 134
Пример (1) ........................................... 136
Пример (2) .. ..... . .. . .. . ............... . .. .. . . ... . .. . 138
Для особо любознательных ~О наследовании стилей~ . . .. . 140
АДАПТИВНЫЙ ДИЗАЙН . ... ... ..... .. ..... 141
В одну колонку или в несколько? . ....................... 142
Адаптивный дизайн ................................... 143
Схема расположения . ............... . ... . ...... . ....... . ...... .. 144
Колонки . . .... .. ..... . ................ . .. . ......... . . 144
Типовые схемы расположения блоков .................... 145
Как создать МНОГОКОЛОНОЧНЫЙ макет . ........................... 146
Верстаем в несколько колонок . .. .. . . ... . . .. .. .. . .. . .. . . 146
Устройства и пользовательский интерфейс . .. ... .. . ... . .. . ..... . 148
Что представляет собой устройство? . ..... . .............. 148
Что такое пользовательский интерфейс? .................. 149
Адаптивный дизайн (1) . ...... . ................................ .. 150
Проблемы при работе с интернетом на разных устройствах .. 150
Поддержка нескольких устройств . ........ . .. .. .. . ..... .. 150
Настройки видимой области экрана ..... . .. .. . .. . .. .. . .. 151
Адаптивный дизайн (2) . ......................................... 152
Медиазапросы ...................................... . 152
Практический пример ... ... . .......... .. ..... .. .. . ............. . 154
Для особо любознательных ~ Первый в мире и первый
в Японии веб-сайт ~ .. . .. .. . . ... . ........ . ... . ......... 156
JAVASCRIPT . .. ... ..... ...... . ...... . ..... 15 7
Что такое JavaScript . . .. . .. . ... . .. . .. . .. . .. . .. . ... . .. . . 158
Работа с элементами и стилями в JavaScript ............. .. 159
Язык JavaScript ... . ... . .. .... . ... . .. . ... . ...... . ...... . ...... . .. 160
Что такое JavaScript? . .. . .. . ... . .. . .. . .. . .. . .. . ... . .. .. 160
Особенности JavaScript . . .. .. . .. . .. .. .. . .. . .... .. ... . .. 161
Здравствуй, мир! .. . ... . .. . ... . .. .. .. . .. .. ... ... . ... . .. . ... . .... . 162
Код JavaScript .. . ...... . .. . .. .. . . .. . ...... . .. . .. .. . .. . 162
Отображение диалогового окна . . . ... .. . . .. .. .... .. . .. .. 163
Где писать JavaScript . . . ............................... . ........ . 164
Внутри тега body . ...... . .. . .. .. . .. . .. . .. .. . ...... . .. . . 164
Внутри тега head .. . .. .. . .. . ... . . ... . . .. . .. . .. .. .. . . .. . 164
Во внешнем файле .................................... 165
Привязка сценария к событию .......................... 165
Что можно делать с помощью JavaScript ....... . .. . ............ . 166
Манипуляции с элементами и стилями . .................. . 166
Разработка приложений ................................ 167
Для особо любознательных ~ Ajax ~ .. .. . .. . .. . ... . .. . .. . 168
ПРИЛОЖЕНИЕ .. ..................................... 169
Собираем все вместе . . . ..... . ... . . .. . .. . ........ . ..... . .... .... . 170
Процесс создания сайта . . .. .. .. . . ... . .. . .. . .. . .. .. . . ... 170
Публикация веб-сайта . . .... .... . ....... . . .. .. .. ...... . ... . .. .. .. 172
Подготовка веб-сервера ............. . .................. 172
Загрузка по FTP ........ . ...... . ..... .. .... .. ..... . ... 173
Использование FТР .. . .. . .. . ... . .. . .. .. . . .. .. .. . .. . .... 173
Получение собственного доменного имени . . .............. 174
Форматы изображений . .. ...... . ...... .. .. . .......... .. ...... . .. 175
Форматы графических файлов .. . .. . ... . .. . .. . .. .. . .. . .. 175
Среды, помогающие создавать веб-сайты ...................... . 177
Различные способы создания сайтов .. . ......... . ..... . .. 177
На что обратить внимание при создании веб-сайта . ... . ... ..... . 178
Удобство и опасность идут рука об руку ............... . .. . 178

 Создание веб-страницы с продуманным дизайном и полезными функциями требует технических навыков и знания языков программирования. Язык HTML передает структуру документа веб-браузеру с помощью разметки, а таблицы стилей CSS определяют макет и дизайн веб-страницы.
 У вас нет опыта работы с HTML и CSS? Ничего страшного! Книга очень похожа на комикс, а разобраться с веб-разработкой вам помогут огромное количество иллюстраций и персонаж по имени Закладка, который сопровождает текст понятными и смешными комментариями. Вы сразу приступите к созданию веб-страницы и точно не будете скучать. Главное - практика!