Как правильно верстать страницу? — HTML и CSS — Aduca

Раздел №4. Вёрстка страниц

Вёрстка начинается с макета: шапка, контент, подвал. Сначала HTML-структура и семантика, затем CSS.

Не верстайте «картинкой» — используйте текст и стили.

Схема

header → nav
main → sections
footer

Игра Упражнение

Бесплатно, вход не требуется

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

Всего: 43 глав

Книга, игра и упражнения доступны без регистрации и покупки.

Раздел №1. ВведениеЛюбая страница в браузере — это HTML-документ, стили CSS и при необходимости скрипты JavaScript. Браузер загружает файлы с сервера, строит DOM-дерево и отображает результат на экране.Откройте инструмен...

Читать главу

Игра Упражнение

Раздел №2. Изучаем HTMLДля вёрстки удобно использовать редактор кода с подсветкой синтаксиса. Популярный бесплатный вариант — Visual Studio Code: установите его с официального сайта и добавьте расширения для HTML и CSS.С...

Читать главу

Игра Упражнение

Минимальная страница содержит объявление `<!doctype html>`, корневой тег `<html>`, секции `<head>` и `<body>`. В `<head>` указывают кодировку и заголовок вкладки, в `<body>` — видимый...

Читать главу

Игра Упражнение

Заголовки `<h1>`–`<h6>` задают иерархию текста: один `<h1>` — главный заголовок страницы, далее подзаголовки уровней 2–6. Не пропускайте уровни без необходимости — так проще навигация и SEO.Заголовки бл...

Читать главу

Игра Упражнение

Абзацы оформляют тегом `<p>`, перенос строки — `<br>`. Для акцента: `<strong>` (важное), `<em>` (выделение), `<mark>` (подсветка). Тег `<span>` — строчный контейнер без смысловой нагру...

Читать главу

Игра Упражнение

Маркированный список — `<ul>` с пунктами `<li>`, нумерованный — `<ol>`. Списки определений: `<dl>`, `<dt>` (термин), `<dd>` (описание).Списки удобны для меню, шагов инструкции и перечи...

Читать главу

Игра Упражнение

Изображение вставляют тегом `<img>` с атрибутами `src` (путь к файлу) и `alt` (описание для доступности). Можно задать `width` и `height`, чтобы страница не «прыгала» при загрузке.Храните картинки в папке проекта и...

Читать главу

Игра Упражнение

Ссылки создаются тегом `<a href="...">`. Атрибут `href` может указывать на другую страницу, якорь `#id`, email `mailto:` или телефон `tel:`.Текст ссылки должен быть понятным: «Скачать программу», а не «на...

Читать главу

Игра Упражнение

Контент группируют блочными `<div>` и строчными `<span>`. В HTML5 есть семантические теги: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer&g...

Читать главу

Игра Упражнение

Тег `<iframe>` встраивает другую HTML-страницу или виджет внутрь вашей: карту, видео с другого сервиса, форму. Атрибут `src` указывает адрес встраиваемого документа.Не злоупотребляйте iframe без необходимости — это...

Читать главу

Игра Упражнение

Таблицы строят из `<table>`, строк `<tr>`, ячеек `<td>` и заголовков `<th>`. Для подписи используйте `<caption>`. Таблицы подходят для табличных данных, а не для всей вёрстки страницы.Группи...

Читать главу

Игра Упражнение

Форма `<form>` отправляет данные на сервер. Поля: `<input>`, `<textarea>`, `<select>`, кнопки `<button>`. Атрибуты `action` и `method` задают адрес и способ отправки (GET или POST).Связывайт...

Читать главу

Игра Упражнение

HTML5-тег `<video>` воспроизводит ролики. Атрибут `controls` показывает панель управления, `poster` — картинку до старта. Источники задают через `<source src="..." type="video/mp4">`.Добав...

Читать главу

Игра Упражнение

Тег `<audio>` работает аналогично `<video>`, но для звука. Атрибуты `controls`, `loop`, `muted` управляют воспроизведением. Форматы часто: MP3, OGG, WAV.Для подкастов и фоновой музыки на лендингах используйте...

Читать главу

Игра Упражнение

Favicon — маленькая иконка во вкладке браузера. Подключают в `<head>` через `<link rel="icon" href="favicon.ico" type="image/x-icon">`. Можно использовать PNG или SVG.Подготовьте...

Читать главу

Игра Упражнение

Спецсимволы в HTML записывают мнемониками: `<` → `&lt;`, `>` → `&gt;`, `&` → `&amp;`, неразрывный пробел → `&nbsp;`, копирайт → `&copy;`.Мнемоники нужны, чтобы браузер не воспринимал символы...

Читать главу

Игра Упражнение

Раздел №3. Изучаем CSSCSS-правило: селектор и блок { свойство: значение; }. Селектор указывает, к каким элементам применить стили.CSS отделяет оформление от HTML-разметки.CSSp { color: #333; font-size: 16px; }

Читать главу

Игра Упражнение

Три способа: внешний файл через link, блок style в head, inline style на элементе. Для проектов лучше внешний файл — проще поддерживать и кешировать.HTML<link rel="stylesheet" href="css/style.css"&...

Читать главу

Игра Упражнение

Шрифт задают свойством font-family. Можно подключить файл через @font-face или Google Fonts. Указывайте запасные шрифты: Roboto, Arial, sans-serif.CSS@font-face { font-family: "MyFont"; src: url("fonts/myf...

Читать главу

Игра Упражнение

Оформление текста: font-size, font-weight, line-height, text-align, text-decoration, color. Межстрочный интервал line-height: 1.5 улучшает читаемость.CSSh1 { font-size: 2rem; font-weight: 700; text-align: center; } p { l...

Читать главу

Игра Упражнение

Частые единицы: px, %, em, rem, vw и vh. rem удобен для масштабируемых интерфейсов — считается от корневого font-size.CSS.box { width: 80%; padding: 1rem; font-size: 1.125rem; }

Читать главу

Игра Упражнение

Селектор по тегу, классу (.menu), id (#header). Комбинаторы: nav a, ul > li. Псевдоклассы: :hover, :focus, :nth-child().CSS.btn { padding: 8px 16px; } .btn:hover { background: #2563eb; } nav a { text-decoration: none;...

Читать главу

Игра Упражнение

Списки оформляют через list-style-type и list-style-image. list-style: none часто используют для меню навигации.CSSul.menu { list-style: none; padding: 0; } ul.menu li { display: inline-block; margin-right: 16px; }

Читать главу

Игра Упражнение

Блоковая модель: width, height, margin, padding, border. box-sizing: border-box включает padding и border в заданную ширину.CSS.card { width: 300px; padding: 20px; margin: 16px auto; border: 1px solid #ddd; box-sizing: b...

Читать главу

Игра Упражнение

Фон блока: background-color, background-image, background-size, background-position, background-repeat.CSS.hero { background-color: #1e293b; background-image: url("bg.jpg"); background-size: cover; background-p...

Читать главу

Игра Упражнение

Линейный градиент: linear-gradient. Радиальный: radial-gradient. Градиенты задают через background или background-image.CSS.banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }

Читать главу

Игра Упражнение

float: left или right заставляет блок обтекаться текстом. clear: both сбрасывает обтекание. Для макетов чаще Flexbox и Grid.CSSimg.float-left { float: left; margin: 0 16px 16px 0; } .clearfix::after { content: "&quo...

Читать главу

Игра Упражнение

position: static, relative, absolute, fixed, sticky. Свойства top, left, right, bottom смещают элемент. z-index управляет слоями.CSS.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); } .badge { position: abs...

Читать главу

Игра Упражнение

Анимации через @keyframes и animation. Плавные переходы — transition при изменении свойств, например при :hover.CSS@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .box { animation: fadeIn 0.5s ease; transit...

Читать главу

Игра Упражнение

transform: translate, rotate, scale, skew. transform-origin задаёт точку трансформации. Не путайте с transition и animation.CSS.icon { transform: rotate(-10deg) scale(1.2); transform-origin: center; }

Читать главу

Игра Упражнение

Раздел №4. Вёрстка страницВёрстка начинается с макета: шапка, контент, подвал. Сначала HTML-структура и семантика, затем CSS.Не верстайте «картинкой» — используйте текст и стили.Схемаheader → nav main → sections footer

Читать главу

Игра Упражнение

Создайте index.html, css/style.css, папки images и fonts. Задайте box-sizing: border-box и сброс margin у body.CSS*, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; }

Читать главу

Игра Упражнение

Меню в header и nav. Ссылки ul/li/a оформляют через Flexbox: display flex и gap.CSSnav ul { display: flex; list-style: none; gap: 1rem; padding: 0; }

Читать главу

Игра Упражнение

Поле input type="file" выбирает файл. Атрибут accept ограничивает типы: image/* или .pdf.HTML<label>Загрузить фото<input type="file" name="photo" accept="image/*"></...

Читать главу

Игра Упражнение

Галерею собирают на CSS Grid с repeat(auto-fit, minmax(200px, 1fr)). Ячейка — figure с img и figcaption.CSS.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

Читать главу

Игра Упражнение

Подвал footer содержит копирайт и контакты. После просмотра этих уроков у вас уже будет полное понимание того, как верстаются web-страницы, и вы сможете легко верстать несложные сайты.Закрепите навыки: сверстайте лендинг...

Читать главу

Игра Упражнение

Раздел №6. Адаптивная вёрсткаАдаптивная вёрстка подстраивает макет под ширину экрана. Используют %, max-width, Flexbox, Grid и медиа-запросы. Mobile-first: база для узкого экрана, расширения через min-width.CSS.container...

Читать главу

Игра Упражнение

Медиа-запрос @media (min-width: 768px) применяет стили от заданной ширины. Можно проверять ориентацию и prefers-reduced-motion.CSS@media (min-width: 768px) { .menu { flex-direction: row; } } @media (max-width: 767px) { ....

Читать главу

Игра Упражнение

На mobile меню сворачивают в бургер или вертикальный список. Уменьшайте padding и font-size в медиа-запросах.CSS@media (max-width: 767px) { header { padding: 12px; } nav ul { flex-direction: column; } }

Читать главу

Игра Упражнение

На телефоне — одна колонка, на десктопе — две-три. Картинки: max-width 100% и height auto.CSSimg { max-width: 100%; height: auto; } @media (min-width: 992px) { .content { display: grid; grid-template-columns: 2fr 1fr; ga...

Читать главу

Игра Упражнение

Пагинация должна быть удобна на touch: зона нажатия около 44px. На узком экране сокращайте число видимых пунктов.CSS.pagination a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; text-align:...

Читать главу

Игра Упражнение

Footer на mobile: колонки становятся вертикальным стеком. Увеличьте line-height и отступы между блоками.CSS@media (max-width: 767px) { footer .columns { flex-direction: column; gap: 24px; } }

Читать главу

Игра Упражнение

Вы прошли путь от первой HTML-страницы до адаптивной вёрстки. Практикуйтесь: сверстайте лендинг и проверьте в DevTools.Дальше — JavaScript, фреймворки или Bootstrap.Чек-лист✓ Семантический HTML ✓ Отдельный CSS ✓ Адаптив...

Читать главу

Игра Упражнение

Предыдущий урок

К содержанию курса

Следующий урок

Курс

Все главы Интерактивная игра

© 2026 Aduca — Все права защищены.

Политика конфиденциальности