Атлас

Урок 6 из 49 · Месяц 1. HTML5 и CSS3

Планирование вёрстки, шрифты и картинки (PNG, JPG, SVG)

Содержание урока

Вы уже знаете теги, базовые свойства CSS, блочную модель и Flexbox — пора верстать по-настоящему. В этом уроке научимся планировать вёрстку до первой строки кода, подключать собственные шрифты (через Google Fonts и через @font-face) и правильно работать с картинками: разберёмся, чем отличаются PNG, JPG и SVG и какой формат когда выбирать. В конце — практика: соберём небольшой лендинг.

Планирование вёрстки

Новички часто открывают редактор и начинают писать код «сверху вниз», а через час запутываются в классах и отступах. Опытные верстальщики сначала планируют. Это как с ремонтом: сначала план комнат, потом стены.

Шаг 1. Разбейте макет на блоки

Посмотрите на макет (дизайн из Figma или просто картинку) и мысленно обведите крупные части прямоугольниками:

┌───────────────────────────────────────┐
│ header: логотип        меню    кнопка │
├───────────────────────────────────────┤
│ hero: большой заголовок, текст,       │
│       кнопка, картинка справа         │
├───────────────────────────────────────┤
│ features: 3 карточки в ряд            │
├───────────────────────────────────────┤
│ footer: контакты, соцсети             │
└───────────────────────────────────────┘

Каждый такой блок станет семантическим тегом (header, section, footer), а внутри — более мелкие блоки.

Шаг 2. Определите раскладку внутри блоков

Для каждого блока задайте себе вопрос: элементы идут в ряд или в колонку? Если в ряд — понадобится Flexbox. Например, в header три элемента в ряд и space-between, в features — три карточки в ряд с gap.

Шаг 3. Придумайте понятные классы

Называйте классы по смыслу, а не по виду: .card-title, а не .big-red-text. Если завтра заголовок станет синим, класс .big-red-text начнёт врать.

Удобный подход — называть детей по имени блока: .hero, .hero-title, .hero-text, .hero-image. Такой стиль развился в популярную методологию БЭМ (блок, элемент, модификатор) — с ней можно будет познакомиться позже.

Шаг 4. Выпишите общие стили

Перед вёрсткой выпишите из макета повторяющиеся значения:

Шрифт:        Inter (400, 600, 700)
Цвета:        основной #1a202c, акцент #3182ce, фон #f7fafc
Ширина:       контейнер 1140px по центру
Отступы:      между секциями 80px, внутри карточек 24px
Скругления:   12px

Это ваша «шпаргалка», которая сделает страницу аккуратной и единообразной. В уроке CSS-переменные и медиазапросы мы научимся хранить такие значения прямо в CSS.

Шаг 5. Структура папок

landing/
├── index.html
├── css/
│   └── style.css
├── fonts/
│   └── inter-400.woff2
└── images/
    ├── hero.jpg
    ├── logo.svg
    └── icon-check.svg

Картинки — в images, шрифты — в fonts, стили — в css. Когда файлов станет много, вы скажете себе спасибо.

Шрифты

По умолчанию сайт может использовать только шрифты, которые установлены на компьютере пользователя. Если указать font-family: "Inter", а у посетителя его нет, браузер возьмёт запасной. Чтобы все видели одинаковый шрифт, его нужно подключить — загрузить вместе со страницей.

Способ 1. Google Fonts

Google Fonts — бесплатная библиотека шрифтов. Порядок такой:

  1. Найдите шрифт (например, Inter), нажмите Get font, затем Get embed code.
  2. Выберите нужные начертания (веса), например 400, 600 и 700.
  3. Скопируйте код подключения в <head> перед своим style.css.
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Лендинг</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

body {
  font-family: "Inter", Arial, sans-serif;
}
  • preconnect — заранее устанавливает соединение с серверами шрифтов, чтобы они загрузились быстрее;
  • wght@400;600;700 — какие веса скачать (каждый лишний вес — это лишние килобайты);
  • display=swap — пока шрифт грузится, текст показывается запасным шрифтом, а не исчезает;
  • в CSS после "Inter" всё равно пишем запасные шрифты.

Способ 2. Свой файл шрифта и @font-face

Иногда шрифт дают дизайнеры файлом, или вы хотите не зависеть от чужих серверов. Тогда файл кладут в проект и описывают правилом @font-face:

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

h1 {
  font-weight: 700;   /* браузер возьмёт файл inter-700.woff2 */
}
  • font-family в @font-face — имя, под которым шрифт будет доступен в CSS;
  • src — путь к файлу относительно CSS-файла. Стиль лежит в css/, шрифт в fonts/, поэтому ../ — выйти из папки css;
  • font-weight — какой жирности соответствует этот файл. Два правила с одним именем, но разным весом — браузер сам выберет нужный файл;
  • woff2 — современный сжатый формат шрифтов для веба, поддерживается всеми актуальными браузерами.

Картинки: форматы

Все картинки делятся на два больших вида.

  • Растровые — состоят из сетки цветных точек (пикселей), как мозаика. При увеличении становятся размытыми и «ступенчатыми». Это PNG, JPG, WebP, AVIF.
  • Векторные — описаны математически: «линия отсюда досюда, круг такого радиуса». Масштабируются без потери качества. Это SVG.

JPG (JPEG)

  • Сжимает с потерями: часть деталей выбрасывается, зато файл маленький.
  • Не поддерживает прозрачность.
  • Для фотографий: люди, природа, еда, интерьеры.

PNG

  • Сжимает без потерь, поэтому файлы фотографий получаются тяжёлыми.
  • Поддерживает прозрачность — фон может быть «пустым».
  • Для скриншотов, графики с чёткими краями, картинок с прозрачным фоном (например, товар без фона).

SVG

  • Это векторный формат, а по сути — текстовый файл с XML-кодом. Его можно открыть в VS Code.
  • Чёткий на любом экране и при любом размере, весит очень мало.
  • Для логотипов, иконок, простых иллюстраций. Для фотографий не подходит.

WebP и AVIF

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

Как выбрать

Что на картинке Формат
Фотография JPG или WebP
Скриншот, график, нужен прозрачный фон PNG или WebP
Логотип, иконка, простая иллюстрация SVG

Картинки в HTML

<img src="images/hero.jpg" alt="Девушка работает за ноутбуком в кафе" width="600" height="400">
  • width и height — исходные пропорции картинки. Браузер заранее резервирует место, и страница не «прыгает», когда картинка загрузится.
  • Если картинка ниже первого экрана, добавьте loading="lazy" — она загрузится, только когда пользователь до неё долистает.
<img src="images/gallery-1.jpg" alt="Интерьер кафе" width="800" height="600" loading="lazy">

Картинка не должна вылезать за блок

Большая картинка в узком блоке вылезет за его границы. Стандартное правило, которое пишут почти в каждом проекте:

img {
  max-width: 100%;
  height: auto;
  display: block;
}
  • max-width: 100% — не шире родителя;
  • height: auto — высота меняется пропорционально, картинка не сплющивается;
  • display: block — убирает маленький зазор снизу, который появляется у строчных картинок.

SVG: три способа вставки

1. Через <img> — как обычную картинку:

<img src="images/logo.svg" alt="Atlas" width="120" height="40">

2. Прямо в HTML (inline SVG) — код SVG вставляется в разметку:

<button class="btn">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    Готово
</button>

.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3182ce;
}

.btn:hover {
  color: #1a365d;   /* иконка меняет цвет вместе с текстом */
}
  • viewBox="0 0 24 24" — «холст» иконки 24×24 единицы, который масштабируется до width/height;
  • polyline — ломаная линия по точкам, здесь — галочка;
  • stroke="currentColor" — цвет линии берётся из CSS-свойства color. Поэтому при наведении иконка перекрашивается вместе с текстом;
  • aria-hidden="true" — иконка декоративная, программы чтения с экрана её пропустят.

Это главное преимущество inline SVG: его можно стилизовать через CSS.

3. Как фон через background-image — разберём в следующем уроке.

Собираем hero-блок по плану

Соберём hero-блок (первый экран сайта) по шагам планирования.

<section class="hero">
    <div class="hero-content">
        <h1 class="hero-title">Научитесь верстать за месяц</h1>
        <p class="hero-text">HTML, CSS и Flexbox с нуля — на понятных примерах.</p>
        <a class="hero-btn" href="#">Начать</a>
    </div>
    <img class="hero-image" src="images/hero.jpg" alt="Студент верстает сайт" width="560" height="400">
</section>

.hero {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 80px 16px;
}

.hero-content {
  flex: 1;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
}

.hero-text {
  font-size: 1.25rem;
  color: #4a5568;
  margin: 0 0 32px;
}

.hero-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 12px;
  background-color: #3182ce;
  color: white;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s;
}

.hero-btn:hover {
  background-color: #2b6cb0;
}

.hero-image {
  flex: 1;
  max-width: 50%;
  height: auto;
  border-radius: 16px;
}

Здесь display: inline-block у ссылки позволяет задать ей отступы как у блока, но оставить в строке. Текстовая колонка и картинка делят ряд поровну через flex: 1.

Практика

  1. План. Возьмите главную страницу любого знакомого сайта и нарисуйте на бумаге или в текстовом файле её схему из блоков, как в шаге 1. Результат: список секций и какая раскладка (ряд/колонка) в каждой.
  2. Google Fonts. Подключите два шрифта: один для заголовков (например, Montserrat), другой для текста (например, Inter). Результат: в DevTools → Computed → Rendered Fonts видны именно эти шрифты.
  3. @font-face. Скачайте файл woff2 любого шрифта из Google Fonts и подключите его локально через @font-face. Результат: шрифт работает даже без интернета.
  4. Форматы. Подготовьте одну фотографию в JPG, логотип в SVG и картинку с прозрачным фоном в PNG и выведите их на страницу. Результат: прозрачный PNG без белого прямоугольника, SVG чёткий при width="400".
  5. Hero-блок. Сверстайте hero из урока со своим текстом, кнопкой с иконкой inline SVG и картинкой. Результат: иконка меняет цвет при наведении на кнопку, картинка не вылезает за границы.

Итоги

  • Перед вёрсткой разбейте макет на блоки, решите раскладку и выпишите общие стили.
  • Классы называют по смыслу; файлы раскладывают по папкам css, fonts, images.
  • Шрифты подключают через Google Fonts или @font-face с файлом woff2; всегда указывайте запасные.
  • JPG — фото, PNG — прозрачность и чёткая графика, SVG — логотипы и иконки.
  • Сжимайте картинки, пишите alt, width/height и img { max-width: 100%; height: auto; }.
  • Inline SVG с currentColor можно перекрашивать через CSS.
Отзыв