Учебник HTML5 и CSS

HTML5とCSSのチュートリアル

Руководство по HTML5 и CSS3

HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.

В 2014 году официально была завершена работа над новым стандартом - HTML5, который фактически произвел революцию, привнеся в HTML много нового.

Глава 1. Введение в HTML5

Что такое HTML

Элементы и атрибуты

Создание документа

Разновидности синтаксиса

Глава 2. Элементы в HTML5

Элемент head и метаданные веб-страницы

Элементы группировки

Заголовки

Форматирование текста

Работа с изображениями

Списки

Элемент details

Список определений

Таблицы

Ссылки

Элементы figure и figcaption

Фреймы

Глава 3. Работа с формами

Формы

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

Кнопки

Текстовые поля

Метки и автофокус

Элементы для ввода чисел

Флажки и переключатели

Элементы для ввода цвета, url, email, телефона

Элементы для ввода даты и времени

Отправка файлов

Список select

Textarea

Валидация форм

Элементы fieldset и legend

Глава 4. Семантическая структура страницы

Элемент article

Элемент section

Элемент nav

Элементы header, footer и address

Элемент aside

Элемент main

Глава 5. Основы CSS3. Селекторы

Введение в стили

Селекторы

Селекторы потомков

Селекторы дочерних элементов

Селекторы элементов одного уровня

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

Псевдоклассы дочерних элементов

Псевдоклассы форм

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

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

Наследование стилей

Каскадность стилей

Глава 6. Основы CSS3. Свойства

Цвет в CSS

Стилизация шрифтов

Внешние шрифты

Высота шрифта

Форматирование текста

Стилизация абзацев

Стилизация списков

Стилизация таблиц

Блочная модель

Внешние отступы

Внутренние отступы

Границы

Размеры элементов. Box-sizing

Фон элемента

Создание тени у элемента

Контуры элементов

Обтекание элементов

Прокрутка элементов

Линейный градиент

Радиальный градиент

Глава 7. Создание макета страницы и верстка

Блочная верстка. Часть 1

Блочная верстка. Часть 2

Вложенные плавающие блоки

Выравнивание столбцов по высоте

Свойство display

Создание панели навигации

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

Создание простейшего макета

Позиционирование

Фиксированное позиционирование

Глава 8. Трансформации, переходы и анимации

Трансформации

Переходы

Анимация

Глава 9. Адаптивный дизайн

Введение в адаптивный дизайн

Метатег Viewport

Media Query в CSS

Глава 10. Мультимедиа

Видео

Аудио

Media API. Управление видео из JavaScript

Глава 11. Canvas

Доступ к canvas и рисование прямоугольников

Настройка рисования

Фоновые изображения

Создание градиента

Рисование текста

Рисование фигур

Рисование изображений

Добавление теней

Редактирование пикселей

Трансформации

Рисование мышью

Глава 12. Flexbox

Что такое Flexbox. Flex Container

Направление flex-direction

flex-wrap

flex-flow. Порядок элементов

Выравнивание элементов. justify-content

Выравнивание элементов. align-items и align-self

Выравнивание строк и столбцов. align-content

Управление элементами. flex-basis, flex-shrink и flex-grow

Многоколоночный дизайн на Flexbox

Макет страницы на Flexbox

Глава 13. Grid Layout

Что такое Grid Layout. Grid Container

Строки и столбцы

Функция repeat и свойство grid

Размеры строк и столбцов

Отступы между столбцами и строками

Позиционирование элементов

Наложение элементов

Направление и порядок элементов

Именованные grid-линии

Именованные grid-линии и функция repeat

Области грида

Макет страницы в Grid Layout

Глава 14. Дополнительные статьи

Переменные в CSS

Создание тем CSS с помощью переменных