HTML описывает, ИЗ ЧЕГО состоит страница, CSS — КАК она выглядит. Разметку и оформление держат раздельно: структура в HTML, стили в CSS.
Что нужно знать
- Каркас: <!DOCTYPE html> → html → head (title, meta, link на CSS) → body (видимое содержимое).
- Теги: h1–h6 (заголовки), p, a href="…" (ссылка), img src="…" alt="…", ul/ol + li (списки), table/tr/td, form + input/textarea/button.
- Семантика: header, nav, main, article, footer — смысл частей страницы; div и span — контейнеры без смысла.
- Селекторы: p (тег), .класс, #id, a:hover (псевдокласс), nav a (вложенность).
- Каскад: при равной специфичности побеждает правило, записанное позже; id специфичнее класса, класс — тега.
- Блочные (div, p, h1, ul) — с новой строки на всю ширину; строчные (span, a, strong) — внутри текста.
- Блочная модель: содержимое → padding → border → margin. Полная ширина = width + padding + border (если не box-sizing: border-box).
- position: relative — сдвиг от своего места; absolute — от ближайшего позиционированного предка. Адаптивность — @media (max-width: …).
Где чаще всего ошибаются
- Забывать атрибут alt у изображений.
- Путать padding (внутри рамки) и margin (снаружи).
- Считать ширину блока равной width, забывая отступы и рамку.
- Оформлять текст устаревшими тегами вместо CSS.
Проверить себя
По этой же теме курса есть проверочная работа из 15 заданий на 25 минут. Проверка автоматическая, результат виден сразу — и по работе целиком, и по каждой теме.
Web-дизайн · 7–9 классы · HTML-разметка и каскадные таблицы стилей