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

Предисловие . .. . .. . .. .. . .. . ... . . .. .. . .. . .. . .. .. .. . .. . . VВВЕДЕНИЕ. ИЗУЧАЙТЕ HTML И CSS . . . . ....... . .. . ... .. xvИнтернет и WWW ..................................... XVЧто представляет собой веб-сайт? . . . . . . . . . . . . . . . . . . . . . . XVIЧто такое HTML и CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XVIВеб-сервер. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIXДинамические веб-страницы. . . . . . . . . . . . . . . . . . . . . . . . . . . ХХСкрипты на стороне клиента . . . . . . . . . . . . . . . . . . . . . . . . . . . XXIКак меняется интернет ................................ XXIIСамые распространенные веб-браузеры ............. . . . . XXIIIГЛАВА 1. ВЕБ-САЙТ. ОБЩИЙ ОБЗОР . . . . .... . . ....... ....1Веб-страницы и веб-сайты ....2Технологии обмена информацией .. .. ...... . ........ . ... . ....3Веб-сайт ......... ............ . ............. . ....... . .. . .......... ....4Что такое веб-сайт ....4Домашняя страница .. ........................ . ... . . ....4Что такое веб-страница . . .. . .. . .. .. .. .. . .. . .. . .. . .. .. . ....5HTML и CSS ... . .. .. ...... . ...... . ... . ... . ... . .. . ... . ...... .. .. . ....6HTML . .... .. .. ........ . .. .. . .. .. . .. .. .... .. ..... .. . . ....6CSS . .. . .. . .. . .. .. . .. .. . .. . .. .. . .. .. . .. . .. .. . .. .. . .. . ....7Веб-браузеры и веб-сайты . ..... .. ... . .. . ... . .. .. .. . ... . ... . .. . ....8Что такое веб-браузер? .... .. .... ......... . .. . .. .. ..... ....8Веб-браузеры и веб-сайты . . . .. .. . .. .. .. .. . . .. .. . .. . .. . .. ....9Серверы и клиенты ....................... . .. . ....... . .......... . 1 ОЧто такое веб-сервер? .................................. 1 ОПрограммное обеспечение для веб-серверов .. . ..... .. . .. . . 1 ОВзаимодействие с веб-серверами . .. . ... . ..... . .. .. . .. . .. ....11Базы данных ....12Что такое база данных? . .. . . ... . .. .. . . ............ . .. .. ....12Веб-технологии и базы данных .. . .. . ... . .. . .. . .. . .. . ....13Cookie .. . ... . ... . ...... ........... . ... .. .. . .. .. ...... . .. . ....... ....14Что такое cookie .. . ............... .. . ..... . ......... . ....14Как работают cookie .. .. ........... .. . ............ . ....15Домен и URL .... . .............. . ...... . ... . ...... .. .. . .......... ....16Домен . .. .. .... ......... . .. . .. . .. .. ..... . ..... .. . .. ....16gTLD ..... .. . .. .. . .. .. . . .. .. . .. . .. .. . ..... .. . .. . .. .. . ....16Пример полного URL ....17Протокол .................... . ....17Для особо любознательных ~ Пока спецификация W3C не завершена ....18ОСНОВЫ HTML . ................ ....... .. ....19Основы HTML ....20Элементы DOCTYPE и URL ......... . .. .. . .. . .. . .. .. .. . .. ....21Об актуальной версии HTML ............ . .. . .......... ... ..... .. ....22HTML Living Standard ............... . ....22Преемственность HTML5 . ......... .. . .. . ..... . ..... .. .. ....23Создание файлов HTML ........ . .......... . .. ... ..... . ....... . .. ....24Создание файлов HTML ....24Теги, элементы и атрибуты . .. .. . .. .. .. .. . .. ... . ...... . ....... . ....26Теги и элементы .. . .. .. ........ . .. . .. .. ........ .. . .. . ....26Атрибуты и значения ....27Вложенные элементы и комментарии . .. . .. .. ... . .. . ... . ...... . ....28Вложенные элементы .. . ........ .. .. . .. . ..... . .. .. .. . .. ....28Комментарии ....29Атрибуты и их назначение ...... . ....... . .. .. ......... .. ...... . ....30id и class . .. . .. . ...... .. . ..... . .. . .. . ..... .. .. .. . .. . ....30Объявление DOCTYPE и спецификация кодов символов . .. ... . .. ....32Декларация DOCTYPE ..... . ....... . ....32Задание кодов символов ... .. .. . .. . ..... .. ..... .. .... .. ....33Абсолютные и относительные адреса URL . ....... . .. . .......... ....34URL ....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Для особо любознательных ~ Первый в мире и первыйв Японии веб-сайт ~ .. . .. .. . . ... . ........ . ... . ....156JAVASCRIPT . .. ... ..... ...... . ...... . ..... 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? Ничего страшного! Книга очень похожа на комикс, а разобраться с веб-разработкой вам помогут огромное количество иллюстраций и персонаж по имени Закладка, который сопровождает текст понятными и смешными комментариями. Вы сразу приступите к созданию веб-страницы и точно не будете скучать. Главное - практика!