ITED
bootcamp

Основы HTML и CSS

Проектирование web-сайтов

План лекции

  • История HTML и CSS
  • Спецификации и количество тегов
  • Структура документа и основные теги
  • Основы CSS: селекторы, стили, вёрстка
  • Кратко: Flexbox, Grid, адаптивность, позиционирование
  • Современные тенденции HTML
2 / 37
Проектирование web-сайтов

Краткий экскурс в историю

  • HTML создан для обмена научными документами
  • 1991 год — первая версия
  • Идея: гипертекст по ссылкам между страницами
Место создания CERN

Место создания CERN

3 / 37
Проектирование web-сайтов
Тим Бернерс-Ли

Тим Бернерс-Ли

Кто и где придумал HTML

  • Тим Бернерс-Ли, учёный CERN
  • Цель: обмен данными между институтами
  • Первый браузер и первый веб-сервер — там же
4 / 37
Проектирование web-сайтов

Первая версия HTML

  • 18 тегов всего
  • Только текст, заголовки, ссылки
  • Никаких таблиц и сложной вёрстки
Первый в мире сайт

Первый в мире сайт

5 / 37
Проектирование web-сайтов

HTML5 и Living Standard

  • WHATWG (Web Hypertext Application Technology Working Group) — рабочая группа, в которую входят представители Apple, Mozilla, Google, Microsoft и других. Появилась в 2004 году из-за недовольства темпом развития W3C: производители браузеров хотели развивать HTML под реальные задачи веба. С тех пор WHATWG ведёт «живой» стандарт HTML. HTML5 — рекомендация W3C с 2014 года. W3C и WHATWG долго вели разработку параллельно: W3C делал «снимки» стандарта (HTML5, затем HTML5.1, 5.2), WHATWG — единый живой документ.
  • Противоречия между консорциумом и редакторами WHATWG привели к расколу; браузеры ориентировались в основном на WHATWG.
  • В 2019 году стороны пришли к соглашению: W3C и WHATWG объявили о совместной работе. Сейчас HTML описывается как Living Standard (WHATWG), а W3C публикует снимки для целей совместимости и патентования.
  • Стандарт обновляется постоянно, без нумерации версий — правки вносятся по мере необходимости.
Развитие спецификаций HTML

Развитие спецификаций HTML

6 / 37
Проектирование web-сайтов

Сколько тегов в HTML

  • В актуальной спецификации — более 100 элементов
  • Часто используют около 30–40 тегов
  • Остальные — для особых задач и доступности
HTML Living Standard (WHATWG)

HTML Living Standard (WHATWG)

7 / 37
Проектирование web-сайтов

Категории тегов

  • Корень и секции документа: html, head, body
  • Метаданные документа: title, meta, link, base, style, script
  • Секционирование: article, section, nav, aside, header, footer, main
  • Заголовки и текст: h1–h6, p, blockquote, pre, ul, ol, li, dl, dt, dd
  • Семантика текста (строчные): a, em, strong, code, span, br
  • Медиа и встраивание: img, iframe, video, audio, picture, source
  • Таблицы: table, thead, tbody, tr, th, td
  • Формы: form, input, button, label, select, textarea
8 / 37
Проектирование web-сайтов

Структура HTML-документа

  • <!DOCTYPE html> — объявление типа документа (обязательно первая строка)
  • <html> — корневой элемент, один на страницу; атрибут lang задаёт язык
  • <head> — метаданные: кодировка (meta charset), title, viewport, подключение стилей и скриптов
  • <body> — видимое содержимое страницы: заголовки, параграфы, блоки, медиа
Схема структуры HTML-документа

Схема структуры HTML-документа

9 / 37
Проектирование web-сайтов

DOCTYPE и тег html

  • <!DOCTYPE html> — для HTML5
  • Один тег <html> на страницу
  • lang="ru" — язык страницы
Пример DOCTYPE и html

Минимальный пример с DOCTYPE и <html lang="ru">

10 / 37
Проектирование web-сайтов

Секция head

  • title — заголовок вкладки браузера (обязателен, один на страницу)
  • meta charset="utf-8" — кодировка документа
  • meta name="viewport" — настройки отображения на мобильных (width=device-width, initial-scale=1)
  • meta name="description" — краткое описание страницы для поисковиков
  • meta name="keywords" — ключевые слова (устаревает, не обязателен)
  • link rel="stylesheet" href="..." — подключение CSS
  • link rel="icon" — иконка вкладки (favicon)
  • script и style — встроенные скрипты и стили (лучше выносить во внешние файлы)
11 / 37
Проектирование web-сайтов

Заголовки h1–h6

  • h1 — один на страницу, главный заголовок
  • h2–h6 — подзаголовки по уровню вложенности
  • Влияют на структуру документа, доступность (навигация по заголовкам) и SEO
12 / 37
Проектирование web-сайтов

Параграфы и текст

  • p — абзац (блочный)
  • br — перенос строки (пустой тег)
  • strong — сильное выделение (важность), b — визуально жирный
  • em — смысловой акцент (ударение), i — визуально курсив
  • code — фрагмент кода, kbd — ввод с клавиатуры
  • mark — выделение (подсветка), small — мелкий текст (оговорки)
  • sub, sup — нижний и верхний индекс; span — универсальный строчный контейнер
13 / 37
Проектирование web-сайтов

Списки

  • ul — маркированный список (unordered), ol — нумерованный (ordered), li — элемент списка
  • У ol: атрибут type (1, A, a, I, i) — вид нумерации; start — с какого числа/буквы начать; reversed — обратный порядок
  • У ul/ol: атрибут compact не поддерживается в HTML5; вид маркера задаётся через CSS (list-style-type)
  • Вложенные списки: внутри li можно размещать новый ul или ol
  • dl, dt, dd — список определений (термин и описание)
Нумерованный и маркированный списки

Нумерованный и маркированный списки

14 / 37
Проектирование web-сайтов
Ссылка

Ссылка

Ссылки и изображения

  • a href="..." — ссылка; target="_blank" — в новой вкладке; target="_self" — в текущей
  • img src="..." alt="..." — картинка, alt обязателен для доступности
15 / 37
Проектирование web-сайтов

Таблицы (основы)

  • table — таблица
  • tr — строка, td — ячейка
  • th — заголовок ячейки
Изображения в HTML
16 / 37
Проектирование web-сайтов

Формы

  • form — форма с action и method
  • input — поле (text, email, submit)
  • button — кнопка отправки
Списки в HTML
17 / 37
Проектирование web-сайтов

Семантика HTML5

  • header — шапка страницы или блока (логотип, навигация); footer — подвал (контакты, копирайт)
  • main — основное содержимое страницы, один на документ; не включать повторяющиеся блоки (шапка, сайдбар)
  • article — самостоятельный контент (статья, пост); section — тематический раздел
  • nav — блок навигации по сайту или разделу; aside — боковая колонка, доп. информация
  • Семантика улучшает доступность (скринридеры), SEO и понятность разметки
Схема семантики HTML5

Схема страницы: header, main, footer, nav, section, article

18 / 37
Проектирование web-сайтов

Блочные и строчные элементы

  • Блочные (display: block по умолчанию): с новой строки, занимают всю ширину родителя — div, p, h1–h6, ul, ol, li, section, article, header, footer
  • Строчные (inline): в одной строке с текстом, не задают ширину/высоту — span, a, strong, em, img, code
  • inline-block: в строке, но можно задать ширину и высоту
  • div — блочный универсальный контейнер; span — строчный контейнер для фрагментов текста
  • Тип отображения можно менять в CSS: display: block | inline | inline-block | flex и др.
19 / 37
Проектирование web-сайтов

Атрибуты тегов

  • Имя="значение" в открывающем теге
  • class — для стилей и скриптов
  • id — уникальный идентификатор
Пример тега с атрибутами class и id

Рис.: пример тега с атрибутами class и id, подсвеченными.

20 / 37
Проектирование web-сайтов

Что такое CSS

  • Каскадные таблицы стилей
  • Оформление: цвет, шрифт, отступы, сетка
  • Отдельно от HTML — легче поддерживать
Одна и та же разметка без стилей и со стилями (до/после)

Рис.: одна и та же разметка без стилей и со стилями (до/после).

21 / 37
Проектирование web-сайтов
Эволюция подходов к CSS: от базового CSS до Styled Components

Рис.: временная шкала CSS 1, 2, 3 и модули.

История CSS

  • 1996 — CSS Level 1, затем CSS2, CSS3 (модули). Сейчас — живые спецификации W3C.
  • SASS (Syntactically Awesome Stylesheets) — препроцессор: переменные, вложенность, миксины, импорты. Удобнее писать и поддерживать большие стили.
  • BEM (Блок–Элемент–Модификатор) — методология именования классов. Структурирует стили, уменьшает конфликты имён, облегчает поддержку.
  • CSS Modules — стили привязаны к компоненту, имена классов уникальны при сборке. Инкапсуляция без глобального «загрязнения».
  • Styled Components (и аналоги) — CSS-in-JS: стили пишутся в JavaScript, тесно связаны с компонентом, поддержка тем и динамических значений.
22 / 37
Проектирование web-сайтов

Синтаксис CSS

  • Селектор { свойство: значение; }
  • Несколько свойств — через точку с запятой
  • Комментарии: /* текст */
Структура правила CSS: селектор, свойства, значения

Рис.: пример правила с селектором, свойством и значением с подписями.

23 / 37
Проектирование web-сайтов

Подключение стилей

  • <link rel="stylesheet" href="style.css">
  • <style> внутри страницы
  • Инлайн style="..." — редко, для исключений
24 / 37
Проектирование web-сайтов

Селекторы: элемент, класс, id

  • p — по тегу
  • .class — по классу (много элементов)
  • #id — по id (один элемент)
25 / 37
Проектирование web-сайтов
Дерево элементов HTML и наследование стилей

Рис.: дерево элементов со стрелками наследования (родитель → потомки).

Каскад и наследование

  • Позже объявленные правила перекрывают ранние (каскад).
  • Наследуются (от родителя к потомкам): font-family, font-size, color, line-height, text-align, letter-spacing и др. — то, что относится к тексту и шрифту.
  • Не наследуются: margin, padding, border, width, height, display, background — блочная модель и расположение задаются для каждого элемента отдельно.
26 / 37
Проектирование web-сайтов

Блочная модель документа

  • content — содержимое
  • padding — внутренний отступ
  • border — граница, margin — внешний отступ
Блочная модель: content, padding, border, margin

Рис.: схема блочной модели (content, padding, border, margin — концентрические прямоугольники).

27 / 37
Проектирование web-сайтов
content-box и border-box при одинаковой width

Рис.: один блок с content-box и один с border-box при одинаковой width.

box-sizing

  • content-box — ширина только для содержимого
  • border-box — ширина включая padding и border
  • Удобно: * { box-sizing: border-box; }
29 / 37
Проектирование web-сайтов

Flexbox в двух словах

  • display: flex у родителя
  • Выравнивание: justify-content, align-items
  • Гибкие колонки и ряды без float
Flexbox: главная и поперечная оси, перенос элементов

Рис.: контейнер flex с элементами и подписями осей (main, cross).

29 / 37
Проектирование web-сайтов
CSS Grid: сетка 3×3

Рис.: сетка 3 на 3.

CSS Grid в двух словах

  • grid-template-columns и rows
  • Единица fr, grid-area
  • Двумерная сетка для макетов
30 / 37
Проектирование web-сайтов

Адаптивность

  • @media (max-width: 768px) { ... }
  • Разные стили под ширину экрана
  • Mobile first — удобный подход
Один макет на десктопе и на мобильном

Рис.: один макет на десктопе и на мобильном (два варианта экрана).

31 / 37
Проектирование web-сайтов

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

  • static, relative, absolute, fixed, sticky
  • top, right, bottom, left
  • z-index — порядок по оси Z
position: static, relative, absolute, fixed

Рис.: схема слоёв (z-index) или примеры relative/absolute/fixed.

32 / 37
Проектирование web-сайтов

Совместная работа и Git

  • Версии кода в репозитории
  • Ветки, коммиты, Pull Request
  • Вёрстка и код-ревью в команде
Схема веток Git

Рис.: схема веток.

33 / 37
Проектирование web-сайтов
Web Components и Custom Elements

Рис.: веб компоненты и кастомные элементы.

Современные тенденции HTML

  • Web Components — набор стандартов браузера (Custom Elements, Shadow DOM, HTML Templates), позволяющий создавать переиспользуемые инкапсулированные виджеты. Появились в обсуждениях с 2011 года, поддержка в браузерах нарастала с 2014–2016.
  • Custom Elements — возможность определять свои HTML-теги с поведением на JavaScript; элемент регистрируется через customElements.define(). Стили и разметка внутри элемента можно изолировать через Shadow DOM.
  • Declarative Shadow DOM — объявление теневого дерева прямо в HTML (без JS), удобно для серверного рендеринга компонентов.
  • ARIA и семантика — атрибуты и роли для доступности (скринридеры, навигация), плюс семантические теги (main, nav, article) улучшают понимание структуры страницы.
34 / 37
Проектирование web-сайтов

Живой стандарт и новое в HTML

  • HTML развивается как Living Standard (WHATWG): правки вносятся постоянно, без жёсткой нумерации версий. Новые элементы и атрибуты появляются по мере потребностей разработчиков и браузеров.
  • dialog — нативный модальный диалог (showModal(), закрытие, ловушка фокуса). popover — всплывающие блоки без перекрытия всей страницы, с управлением через атрибуты.
  • Инлайновые фреймы и встраивание контента продолжают уточняться (безопасность, sandbox, разрешения).
  • Упор на доступность (ARIA, семантика, управление фокусом) и производительность (ленивая загрузка, приоритеты загрузки ресурсов).
35 / 37
Проектирование web-сайтов

Итоги

  • HTML — структура, CSS — оформление
  • Спецификации живые, тегов больше 100
  • Flexbox, Grid, адаптивность — база вёрстки
  • Практика и валидация — залог качества
36 / 37
Проектирование web-сайтов

Вопросы и ответы

37 / 37