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? Ничего страшного! Книга очень похожа на комикс, а разобраться с веб-разработкой вам помогут огромное количество иллюстраций и персонаж по имени Закладка, который сопровождает текст понятными и смешными комментариями. Вы сразу приступите к созданию веб-страницы и точно не будете скучать. Главное - практика!