Методический материал по темам HTML и CSS

1. Что такое верстка

Верстка — это создание внешнего вида веб-страницы с помощью HTML и CSS. HTML отвечает за структуру и смысл элементов, CSS отвечает за оформление: цвет, размер, отступы, расположение, фон, шрифты и визуальные состояния.

Главный принцип

Сначала создают понятную HTML-структуру, затем подключают стили и постепенно оформляют каждый блок. Не стоит начинать с цвета и теней, пока не понятно, из каких частей состоит страница.

2. Структура файлов сайта

Файлы сайта лучше раскладывать по папкам. Так проект проще читать, переносить, проверять и дорабатывать. Обычно HTML-страница лежит в корне проекта, стили — в папке css, изображения — в images, шрифты — в fonts, скрипты — в js.

3. Базовая структура HTML-документа

Любая HTML-страница начинается с каркаса. Он сообщает браузеру тип документа, язык страницы, кодировку, настройки отображения и заголовок вкладки.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Название страницы</title>
  </head>
  <body>
    <!-- Видимая часть страницы -->
  </body>
</html>

4. Подключение CSS-файлов

CSS-файлы подключаются в блоке <head> с помощью тега <link>. Через атрибут href указывается путь к файлу со стилями.

<link rel="stylesheet" href="./src/css/normalize.css" />
<link rel="stylesheet" href="./src/css/index.css" />
<link rel="stylesheet" href="./src/css/main_page.css" />

Порядок подключения

CSS читается сверху вниз. Поэтому сначала обычно подключают файл нормализации, затем общие стили, затем стили конкретной страницы или конкретного блока.

5. Семантические теги

Семантические теги показывают смысл части страницы. Они нужны не только для красоты кода, но и для доступности, поисковых систем и удобства чтения проекта.

Если у блока есть понятная роль, лучше выбрать семантический тег. Если блок нужен только для группировки и оформления, подходит <div>.

6. Шапка страницы

Шапка сайта обычно содержит элементы, которые помогают пользователю быстро понять, где он находится, и выполнить главное действие. В интерфейсах там часто размещают логотип, поиск, кнопку фильтра, информацию о пользователе или кнопку входа.

<header class="header">
  <div class="header__logo">
    <img src="./src/images/logo.svg" alt="Логотип" />
  </div>

  <form class="header__search">
    <input type="text" placeholder="Поиск" />
    <button type="submit">Найти</button>
  </form>

  <div class="header__profile">Профиль</div>
</header>

Что важно в шапке

• Элементы должны быть выровнены по одной линии или понятной сетке.
• Поиск лучше оформлять через form, input и button.
• Иконки должны иметь корректный путь в src.
• Если картинка несет смысл, у нее должен быть нормальный alt.
• Для больших блоков удобно использовать классы по смыслу: header, header__logo, header__search.

7. Flexbox

Flexbox — это способ расположить элементы в строку или колонку и управлять расстоянием между ними. Он особенно удобен для шапок, меню, кнопок, карточек и небольших групп элементов.

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

8. Навигация

Навигация — это блок, с помощью которого пользователь переходит между разделами. Для нее используют тег <nav>. Внутри могут быть ссылки, кнопки, иконки и подписи.

<nav class="sidebar-nav">
  <a class="sidebar-nav__item sidebar-nav__item_active" href="#">Главная</a>
  <a class="sidebar-nav__item" href="#">Поиск</a>
  <a class="sidebar-nav__item" href="#">Настройки</a>
</nav>

Состояния пунктов меню

У элементов навигации часто бывают разные состояния: обычное, при наведении, активное и отключенное. Активный пункт показывает, где пользователь находится сейчас.

.sidebar-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-nav__item:hover {
  background: #f1f5f9;
}

.sidebar-nav__item_active {
  font-weight: 700;
}

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

Псевдоэлементы позволяют добавить декоративный элемент через CSS, не добавляя лишний тег в HTML. Самые частые псевдоэлементы — ::before и ::after.

.menu-button_active {
  position: relative;
}

.menu-button_active::before {
  content: "";
  position: absolute;
  left: -12px;
  width: 4px;
  height: 32px;
  border-radius: 999px;
  background: #18333e;
}

10. Карточки

Карточка — это повторяющийся блок интерфейса. В ней обычно есть изображение, заголовок, описание, дополнительная информация и кнопка или ссылка. Карточки удобны, когда нужно показать несколько похожих объектов.

<article class="card">
  <img class="card__image" src="./src/images/place.png" alt="Горный пейзаж" />
  <div class="card__content">
    <h3 class="card__title">Название места</h3>
    <p class="card__text">Краткое описание карточки.</p>
  </div>
</article>

.card {
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.card__image {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.card__content {
  padding: 20px;
}

Почему карточкам нужны классы

Классы позволяют одинаково оформить все карточки и отдельно управлять их частями. Например, можно отдельно стилизовать изображение, заголовок, текст и нижнюю панель карточки.

11. Изображения и пути

Изображения подключаются через тег <img>. В атрибуте src указывается путь к файлу, а в alt — текстовое описание изображения.

<img src="./src/images/logo.svg" alt="Логотип сайта" />

Атрибут alt

alt нужен для доступности и случаев, когда изображение не загрузилось. Если изображение декоративное и не несет смысла, alt можно оставить пустым: alt="". Если изображение важно для понимания страницы, описание должно быть осмысленным.

12. Шрифты

Шрифты можно использовать системные, подключать из внешних сервисов или хранить локально в проекте. Локальное подключение удобно, когда нужно, чтобы сайт не зависел от стороннего сервиса.

@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/Baloo_2/Baloo2-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
}

body {
  font-family: "Baloo 2", Arial, sans-serif;
}

13. CSS-селекторы

Селектор показывает, к каким HTML-элементам применится CSS-правило. Чем понятнее селекторы, тем проще читать и поддерживать стили.

Специфичность

Специфичность — это сила селектора. Селектор по классу сильнее селектора по тегу. Селектор с несколькими классами сильнее одного класса. Если правила равны по силе, обычно побеждает то, которое написано ниже.

14. Размеры и отступы

Размеры и отступы формируют внешний вид страницы. Без них блоки будут прилипать друг к другу, текст будет читаться хуже, а интерфейс будет выглядеть неаккуратно.

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

* {
  box-sizing: border-box;
}

С box-sizing: border-box ширина элемента включает контент, внутренние отступы и границу. Это часто делает верстку предсказуемее.

15. Частые ошибки

1. Неправильный путь к файлу. Если картинка или CSS не загружается, сначала проверяют путь в src или href.
2. Забыли подключить CSS. HTML может быть правильным, но без <link rel="stylesheet"> стили не появятся.
3. Путают margin и padding. margin двигает сам блок, padding двигает содержимое внутри блока.
4. Пишут слишком много безымянных div. Если блок нужно стилизовать или найти в коде, ему лучше дать класс.
5. Ломают вложенность тегов. Каждый открытый тег должен быть закрыт в правильном месте.
6. Используют огромные фиксированные размеры. Это может вызвать горизонтальную прокрутку и проблемы на маленьких экранах.
7. Ставят z-index без понимания позиционирования. z-index работает предсказуемо только вместе с контекстом наложения и позиционированием.
8. Не проверяют страницу после маленьких изменений. Верстку лучше проверять часто, а не только в конце.
9. Оставляют важные изображения без alt. Это ухудшает доступность страницы.
10. Не используют единый стиль именования классов. Из-за этого CSS быстро становится хаотичным.

16. Вопросы для самопроверки

1. Что такое верстка?
2. За что отвечает HTML?
3. За что отвечает CSS?
4. Для чего нужен <!doctype html>?
5. Что делает <meta charset="UTF-8">?
6. Зачем нужен viewport?
7. Почему CSS-файлы подключаются в <head>?
8. Почему normalize.css подключают раньше основных стилей?
9. Чем семантический тег отличается от обычного div?
10. Для чего используется тег <nav>?
11. Что делает display: flex?
12. Чем отличается flex-direction: row от flex-direction: column?
13. Что делает justify-content: space-between?
14. Что делает align-items: center?
15. Для чего нужен gap?
16. Чем отличается margin от padding?
17. Что означает единица vw?
18. Что означает единица vh?
19. Как работает относительный путь ./src/images/logo.svg?
20. Для чего нужен атрибут alt у картинки?
21. Что делает правило @font-face?
22. Что выбирает селектор nav > a?
23. Что делает псевдокласс :hover?
24. Для чего нужен псевдоэлемент ::before?
25. Почему декоративный элемент часто лучше делать через CSS, а не отдельным HTML-тегом?
26. Что такое специфичность CSS-селектора?
27. Что нужно проверить, если изображение не отображается?
28. Почему полезно давать класс каждому важному блоку?
29. Что делает box-sizing: border-box?
30. Почему страницу нужно проверять в браузере после небольших изменений?

Краткий итог

HTML и CSS работают вместе. HTML задает структуру и смысл страницы, CSS превращает эту структуру в аккуратный интерфейс. Для уверенной верстки нужно понимать каркас HTML-документа, семантические теги, подключение стилей, flexbox, работу с изображениями, шрифтами, селекторами и отступами.