Основы веб-верстки: от структуры HTML до стилизации и подготовки к экзамену

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

1. Основы HTML и структура документа: синтаксис, теги и дерево DOM

Основы HTML и структура документа: синтаксис, теги и дерево DOM

Представьте, что вы заходите на сайт, но вместо красивых кнопок и картинок видите бесконечный поток неструктурированного текста. Именно так выглядел бы интернет без HTML (HyperText Markup Language). Это не язык программирования, а язык разметки, который объясняет браузеру, где на странице находится заголовок, где абзац, а где — ссылка на другой ресурс. Если архитектуру здания сравнить с кодом, то HTML — это его фундамент и несущие стены. Без прочного каркаса даже самый дорогой декор (стили) не удержится и здание рухнет.

Анатомия HTML-документа и синтаксис тегов

Работа с HTML начинается с понимания того, как строятся его элементарные частицы — теги. Тег — это зарезервированное слово, заключенное в угловые скобки. Большинство тегов являются парными: у них есть открывающий элемент <tag> и закрывающий </tag>. Все, что находится между ними, называется контентом. Например, чтобы создать кнопку, мы пишем <button>Нажми меня</button>. Если забыть закрыть тег, браузер может «растянуть» его действие на весь последующий контент, что приведет к визуальному хаосу.

Однако существуют и одиночные теги, которые не содержат текста внутри себя, а вставляют объект или несут техническую информацию. К ним относятся, например, <img> для изображений или <br> для переноса строки. Важно помнить, что в современном стандарте HTML5 закрывающий слэш в одиночных тегах (вроде <img />) не является обязательным, но часто используется для совместимости со старыми парсерами.

Помимо имени, теги обладают атрибутами. Атрибуты — это дополнительные настройки, которые всегда пишутся в открывающем теге в формате название="значение". Представьте тег <a> (ссылка). Без атрибута href он бесполезен, так как браузер не поймет, куда именно нужно отправить пользователя. Запись <a href="https://google.com">Поиск</a> четко определяет и текст ссылки, и её цель. Атрибуты позволяют задавать уникальные идентификаторы (id), классы для стилизации (class) или альтернативный текст для картинок (alt), который критически важен для поисковых роботов и людей с нарушениями зрения.

Иерархия и стандартная структура страницы

Любой профессиональный HTML-файл начинается с декларации DOCTYPE. Это не тег в привычном понимании, а инструкция для браузера: «Внимание, перед тобой документ стандарта HTML5». Без этой строки браузер может перейти в «режим совместимости» (quirks mode), и ваш сайт будет отображаться так, будто на дворе 1998 год. Сразу после декларации следует корневой элемент <html>, внутри которого живет всё содержимое страницы.

Внутри <html> всегда выделяются две «комнаты»:

  • <head> (Голова). Здесь хранится техническая информация. Пользователь не видит содержимое этого блока на самой странице, но оно критически важно. Здесь подключаются шрифты, задается кодировка (почти всегда <meta charset="UTF-8">) и заголовок вкладки браузера <title>.
  • <body> (Тело). Это визуальная часть сайта. Всё, что вы видите в окне браузера — тексты, видео, формы — находится здесь.

    • > Правильная вложенность — залог успеха. HTML напоминает матрешку: вы не можете закрыть внешний тег, пока не закрыли все внутренние. Ошибка вида <div><p>Текст</div></p> является грубым нарушением синтаксиса, которое ломает логику обработки документа браузером.

    Понятие DOM: как браузер видит ваш код

    Когда браузер загружает ваш HTML-файл, он не просто читает его как текстовый документ. Он превращает его в сложную древовидную структуру, которая называется DOM (Document Object Model). В этой модели каждый тег становится «узлом» (node) дерева.

    Вершина дерева — это объект document, от которого отходит корень html. У него есть «дети» — head и body. У body могут быть свои потомки, например, header, main и footer. Понимание DOM принципиально для будущего изучения JavaScript, так как именно через эту модель скрипты меняют содержимое страницы «на лету». Если вы динамически удаляете сообщение из ленты новостей, вы на самом деле удаляете узел из дерева DOM.

    Рассмотрим процесс отрисовки на примере. Если у нас есть код:

    Браузер построит цепочку: body -> section -> (h1 и p). Внутри p будет текстовый узел и еще один дочерний узел b. Если вы случайно закроете section раньше, чем p, дерево «сломается», и браузер попытается починить его самостоятельно, что часто приводит к непредсказуемым сдвигам дизайна.

    Разбор структуры на практике: создание каркаса

    Давайте пошагово разберем создание базового шаблона, который потребуется на экзамене.

    Шаг 1: Объявление типа документа и языка. Мы пишем <!DOCTYPE html> и открываем <html lang="ru">. Атрибут lang сообщает поисковикам и экранным дикторам, на каком языке написан контент. Это база доступности.

    Шаг 2: Наполнение технического блока. Внутри <head> мы обязательно добавляем мета-тег для масштабирования на мобильных устройствах: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Без этого ваш сайт на смартфоне будет выглядеть как микроскопическая копия десктопной версии. Также добавляем <title>Моя первая страница</title>.

    Шаг 3: Организация контента в body. Внутри <body> мы не набрасываем теги кучей. Мы используем структурные блоки. Например, заголовок первого уровня <h1> должен быть только один на странице — это главная тема документа. Для подразделов используем <h2> и далее вниз до <h6>.

    Шаг 4: Работа с текстовыми блоками. Основной текст помещаем в <p> (параграф). Если нужно выделить слово жирным по смыслу (акцент), используем <strong>. Если нужно просто визуально выделить (например, название книги), используем <em> (курсив).

    Шаг 5: Проверка вложенности. Убеждаемся, что каждый открытый тег закрыт в обратном порядке. Если мы открыли <div>, потом <ul>, потом <li>, то закрывать должны сначала </li>, затем </ul>, и только потом </div>.

    Типичные ошибки и их последствия

    Часто начинающие верстальщики используют теги не по назначению. Например, используют <b> (просто жирный шрифт) вместо <strong> (важная информация). С точки зрения визуального отображения разницы может не быть, но для поискового робота Google слово внутри <strong> имеет больший вес при ранжировании.

    Другая проблема — «div-оматоз». Это избыточное использование тега <div> там, где есть специализированные теги. Зачем писать <div class="header">, если существует тег <header>? Использование правильных тегов делает ваш код понятным не только браузеру, но и другим разработчикам, которые будут поддерживать ваш проект.

    Наконец, важно помнить о регистрах. Хотя HTML не чувствителен к регистру (тег <P> сработает так же, как <p>), общепринятым стандартом является использование только строчных букв. Это делает код аккуратным и профессиональным.

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

    2. Семантическая верстка и текстовое наполнение: логика структуры и доступность контента

    Семантическая верстка и текстовое наполнение: логика структуры и доступность контента

    Представьте, что вы читаете газету, где нет заголовков, колонок и выделенных цитат — просто сплошное полотно текста одинакового размера. Найти нужную новость будет практически невозможно. В вебе роль такой структуры играет семантика. Семантическая верстка — это использование HTML-тегов в соответствии с их смысловым значением, а не только ради внешнего вида. Это критически важно для доступности (accessibility) и поисковой оптимизации (SEO).

    Почему семантика важнее дизайна

    В начале 2000-х разработчики верстали сайты с помощью таблиц или бесконечных блоков <div>. Для пользователя в браузере всё выглядело нормально, но для программ-экранных дикторов (скринридеров), которыми пользуются незрячие люди, такой сайт превращался в «кашу». Скринридер просто зачитывал содержимое подряд, не понимая, где навигация, а где основной текст.

    Современный стандарт HTML5 ввел набор семантических тегов, которые дают браузеру и поисковикам четкую карту страницы. Исследования показывают, что сайты с правильной семантикой ранжируются выше, так как роботы Google или Яндекс четко понимают, какой контент является главным. Например, текст внутри тега <main> всегда приоритетнее, чем текст в <aside> (боковой панели).

    Использование семантики также упрощает поддержку кода. Когда вы видите в коде <nav>, вы сразу понимаете, что здесь меню. Если же там написано <div class="top-box-navigation-final">, другому разработчику придется потратить время, чтобы разобраться в вашей логике именования.

    Основные структурные элементы страницы

    Типовая современная страница делится на несколько логических зон, для каждой из которых предусмотрен свой тег:

  • <header>. Это «шапка» сайта или отдельного раздела. Обычно здесь располагается логотип, название сайта и главная навигация. Не путайте его с тегом <head> из первой статьи — header находится внутри body и виден пользователю.
  • <nav>. Секция для навигационных ссылок. Важно: в nav стоит оборачивать только основное меню, а не каждую ссылку в футере.
  • <main>. Главное содержимое документа. Этот тег должен встречаться на странице только один раз. Внутри него находится уникальный контент, ради которого пользователь пришел на сайт.
  • <article>. Самодостаточный раздел контента. Если пост в блоге, новость или карточку товара можно «вырезать» с вашего сайта и вставить на другой, и при этом смысл не потеряется — это article.
  • <section>. Тематический блок внутри страницы или статьи. Например, раздел «Контакты» или «Наши преимущества».
  • <aside>. Дополнительный контент, косвенно связанный с основным. Это могут быть рекламные баннеры, список похожих статей или боковое меню.
  • <footer>. «Подвал» страницы. Здесь обычно пишут авторские права, контактную информацию и ссылки на соцсети.

    • > Семантика — это не про визуальный стиль. Тег <footer> не обязан находиться в самом низу экрана (хотя обычно так и есть), он определяется своим смыслом: завершающая информация блока или страницы.

    Работа с текстом: списки, цитаты и акценты

    Внутри структурных блоков мы работаем с текстовым наполнением. Самый распространенный элемент здесь — списки. Они бывают двух типов:

  • <ul> (Unordered List). Маркированный список для перечислений, где порядок не важен (например, список покупок).
  • <ol> (Ordered List). Нумерованный список для инструкций или рейтингов, где важна последовательность.
    • В обоих случаях каждый элемент списка оборачивается в тег <li> (List Item).

    Для работы с цитатами используются два тега. Если вы приводите длинную цитату из другого источника, используйте <blockquote>. Для коротких цитат внутри предложения подходит тег <q>. Интересный нюанс: браузеры автоматически добавляют кавычки вокруг текста в теге <q>, причем тип кавычек может меняться в зависимости от языка страницы, указанного в атрибуте lang.

    Особое внимание стоит уделить тегам логического выделения. Мы уже упоминали <strong> (сильная важность) и <em> (эмоциональный акцент). Существуют также теги <mark> для выделения текста «маркером» (например, при поиске по странице) и <cite> для указания названия произведения или автора.

    Пошаговый разбор: создание семантического каркаса статьи

    Давайте соберем структуру для типичной страницы блога.

    Шаг 1: Создание общей обертки. Мы начинаем с <header>, где размещаем <h1>Название блога</h1> и <nav> со списком ссылок <ul>. Это дает понять браузеру, где находится управление сайтом.

    Шаг 2: Выделение главной области. Открываем тег <main>. Внутри него будет находиться наша статья.

    Шаг 3: Оформление самой статьи. Используем тег <article>. Внутри него первым делом идет заголовок <h2>Заголовок статьи</h2>. Обратите внимание: h1 уже занят названием сайта, поэтому статья начинается с h2.

    Шаг 4: Группировка контента. Разбиваем статью на смысловые части с помощью <section>. Например, первая секция — «Введение», вторая — «Основная часть». Внутри секций используем <p> для текста и <ul> для перечислений.

    Шаг 5: Добавление подвала статьи. Внутри <article> можно создать свой собственный <footer>. Там мы укажем дату публикации и автора. Это не заменит глобальный футер всей страницы, а будет относиться только к этой статье.

    Шаг 6: Добавление боковой панели и глобального футера. После закрытия <main> добавляем <aside> с виджетом «Популярные посты» и, наконец, глобальный <footer> со ссылками на политику конфиденциальности.

    Доступность и универсальный дизайн

    Соблюдение семантики — это первый шаг к A11y (общепринятое сокращение для Accessibility). Но есть и другие важные правила. Одно из них — обязательное использование атрибута alt у тега <img>. Если картинка несет смысл (например, график), в alt нужно кратко описать этот смысл. Если картинка декоративная (просто узор), атрибут alt должен быть пустым (alt=""), чтобы скринридер просто проигнорировал её и не отвлекал пользователя.

    Еще один аспект — иерархия заголовков. Никогда не выбирайте заголовок по размеру шрифта. Если вам нужен текст поменьше, используйте CSS, но в HTML соблюдайте строгую вложенность: нельзя перепрыгивать с h2 сразу на h4. Это ломает логическую структуру документа для поисковых роботов.

    На экзамене часто проверяют умение отличать <div> от семантических тегов. Помните: если у блока есть имя (шапка, подвал, статья, меню), используйте соответствующий тег. Используйте <div> только тогда, когда блок нужен исключительно для дизайна и не несет никакого смысла.

    Если из этой главы запомнить три вещи — это приоритет семантических тегов над <div>, использование alt для всех изображений и соблюдение строгой иерархии заголовков. Правильный код — это код, который понятен даже без стилей.

    3. Работа с таблицами и сложными формами: структурирование данных и интерактивные элементы

    Работа с таблицами и сложными формами: структурирование данных и интерактивные элементы

    Если семантическая верстка — это скелет страницы, то формы и таблицы — это её органы чувств и системы обработки данных. Без таблиц невозможно представить наглядное сравнение характеристик товаров или расписание занятий, а без форм сайт остается «немым»: пользователь не может ни зарегистрироваться, ни отправить сообщение, ни совершить покупку. В этой главе мы разберем, как структурировать сложные данные и создавать интерактивные интерфейсы, соблюдая стандарты качества.

    Таблицы: не для дизайна, а для данных

    В прошлом таблицы использовали для создания макетов страниц (так называемая «табличная верстка»), но сегодня это считается грубой ошибкой. Таблицы в современном вебе предназначены исключительно для табличных данных.

    Основа любой таблицы — тег <table>. Внутри него структура строится по строкам (<tr> — table row). В каждой строке находятся ячейки. Они бывают двух типов:

  • <th> (table header) — заголовочная ячейка. Текст в ней по умолчанию жирный и центрированный.
  • <td> (table data) — обычная ячейка с данными.

    • Для сложных таблиц используется расширенная семантика: <thead> (голова таблицы), <tbody> (тело) и <tfoot> (подвал, например, для итоговых сумм). Это позволяет браузеру правильно прокручивать содержимое и корректно печатать многостраничные таблицы.

    Особое внимание стоит уделить атрибутам объединения ячеек. Атрибут colspan позволяет растянуть ячейку на несколько колонок, а rowspan — на несколько строк. Например, если в расписании одна дисциплина идет две пары подряд, мы используем <td rowspan="2">.

    Анатомия форм: как собрать данные

    Форма — это область страницы, данные из которой отправляются на сервер. Она ограничивается тегом <form>. У этого тега есть два критически важных атрибута: action (адрес сервера, куда уйдут данные) и method (способ отправки, чаще всего GET или POST).

    Внутри формы живут элементы управления. Самый универсальный из них — <input>. Его поведение полностью зависит от атрибута type.

  • type="text" — обычное поле ввода.
  • type="password" — скрывает вводимые символы точками.
  • type="email" и type="tel" — включают встроенную валидацию и удобную клавиатуру на смартфонах.
  • type="checkbox" и type="radio" — для выбора одного или нескольких вариантов.

    • Однако просто набросать input недостаточно. Каждое поле должно иметь подпись — тег <label>. Это не просто текст рядом. С помощью атрибута for, значение которого совпадает с id инпута, мы связываем их. Теперь при клике на текст «Я согласен с условиями» галочка в чекбоксе поставится автоматически. Это стандарт доступности и удобства.

    Сложные элементы управления и группировка

    Когда вариантов выбора много, лучше использовать выпадающий список <select>. Внутри него каждый пункт оборачивается в <option>. Если же нам нужно поле для ввода длинного текста (например, отзыв), используется тег <textarea>. В отличие от input, это парный тег, и начальное значение текста пишется между тегами.

    Для того чтобы форма не выглядела как хаотичный набор полей, используется группировка с помощью <fieldset>. Тег <legend> внутри него позволяет дать название этой группе (например, «Личные данные» или «Адрес доставки»). Это создает визуальную рамку и помогает скринридерам ориентироваться в структуре формы.

    > Важный нюанс: кнопка отправки. Внутри формы <button type="submit"> автоматически инициирует отправку данных. Если вы укажете type="button", кнопка ничего не сделает, пока вы не напишете для неё скрипт на JavaScript.

    Разбор примера: создание формы регистрации с таблицей тарифов

    Давайте объединим знания и создадим сложный блок.

    Шаг 1: Проектирование таблицы тарифов. Создаем <table>. В <thead> прописываем <tr>, содержащий <th>Тариф</th> и <th>Цена</th>. В <tbody> добавляем строки с данными. Чтобы выделить итоговую строку, используем <tfoot> с ячейкой, где применен colspan="2".

    Шаг 2: Создание основы формы. Пишем <form action="/register" method="POST">. Это гарантирует, что данные пользователя будут отправлены скрыто от посторонних глаз в адресной строке.

    Шаг 3: Группировка полей. Используем <fieldset>. Внутри добавляем <legend>Регистрация</legend>. Это сделает форму профессиональной и понятной.

    Шаг 4: Поля ввода с подсказками. Для каждого поля создаем пару <label> и <input>. Используем атрибут placeholder, чтобы внутри поля написать подсказку, например: «Имя Фамилия». Добавляем атрибут required к обязательным полям — браузер сам не даст отправить форму, если они пусты.

    Шаг 5: Выбор тарифа. Добавляем <select name="plan">, где опции соответствуют названиям из нашей таблицы. Это связывает информационную часть (таблицу) с интерактивной (формой).

    Шаг 6: Финальная кнопка. Добавляем <button type="submit">Зарегистрироваться</button>.

    Валидация и пользовательский опыт

    Современный HTML5 позволяет проверять данные еще до того, как они попадут на сервер. Атрибут pattern позволяет задать регулярное выражение (например, для проверки формата номера карты), а min и max — ограничить числовые значения или даты.

    Частая ошибка новичков — использование таблиц для верстки форм (чтобы поля стояли ровно в ряд). Для этого следует использовать CSS (Flexbox или Grid), о которых мы поговорим позже. В HTML ваша задача — сохранить логическую связь. Если поле ввода относится к адресу, оно должно быть в группе адреса.

    Помните о безопасности: никогда не используйте метод GET для передачи паролей, так как они отобразятся в истории браузера и логах сервера. Только POST. Также всегда добавляйте атрибут name каждому элементу формы — именно под этим именем сервер получит данные. Если у инпута нет name, его значение просто потеряется при отправке.

    Если из этой главы запомнить три вещи — это использование таблиц только для данных, обязательная связь <label> и <input> через id, и правильный выбор типов input для автоматической валидации браузером.

    4. Основы CSS и стилизация элементов: селекторы, каскад и блочная модель

    Основы CSS и стилизация элементов: селекторы, каскад и блочная модель

    Если HTML — это чертеж здания, то CSS (Cascading Style Sheets) — это дизайн интерьера, фасадная отделка и освещение. Без CSS все сайты выглядели бы одинаково: черный текст на белом фоне с синими подчеркнутыми ссылками. CSS позволяет нам превратить голый каркас в уникальный продукт. Понимание того, как стили накладываются друг на друга и как элементы занимают место на экране, — это 90% успеха в верстке.

    Как работают каскад и специфичность

    Само название «Каскадные таблицы стилей» говорит о том, что правила могут накладываться друг на друга. Если вы написали в начале файла, что все заголовки должны быть красными, а в конце — что они должны быть синими, победит последнее правило. Это и есть каскад.

    Однако всё усложняется специфичностью (весом селектора). CSS — это не просто соревнование «кто последний», это иерархия авторитетов.

  • Самый слабый — селектор по тегу (например, p { color: red; }).
  • Сильнее — селектор по классу (.text { color: blue; }).
  • Самый сильный — селектор по идентификатору (#main-title { color: green; }).

    • Если к одному элементу применены все три правила, он станет зеленым, даже если правило с id написано в самом верху файла. Существует еще «ядерная кнопка» — !important, которая перебивает всё, но её использование считается признаком плохого тона, так как она ломает логику каскада и делает код трудноподдерживаемым.

    Блочная модель: фундамент верстки

    Каждый элемент в HTML браузер представляет как прямоугольную коробку. Понимание Box Model (блочной модели) критично для того, чтобы элементы не «разлетались» и не перекрывали друг друга. Любой блок состоит из четырех слоев:

  • Content (Контент). Само содержимое: текст или картинка.
  • Padding (Внутренний отступ). Пространство от контента до границы блока. Если у кнопки текст прилипает к краям, нужно добавить padding.
  • Border (Рамка). Линия, ограничивающая блок.
  • Margin (Внешний отступ). Пространство между этим блоком и соседними.

    • Важнейший нюанс, на котором спотыкаются новички: по умолчанию ширина блока (width) рассчитывается только для контента. Если вы задали width: 100px, добавили padding: 10px и border: 2px, итоговая ширина блока станет пикселя. Это часто ломает сетку сайта. Чтобы избежать этого, профессионалы всегда используют свойство box-sizing: border-box;. С ним ширина всегда будет ровно такой, какую вы указали, а отступы «вдавятся» внутрь.

    Селекторы: как достучаться до элемента

    Чтобы применить стиль, нужно правильно выбрать цель. Мы уже обсудили теги, классы и ID, но CSS предлагает гораздо более мощные инструменты:

  • Контекстные селекторы. Например, nav ul li выберет только те пункты списка, которые находятся внутри навигации.
  • Псевдоклассы. Позволяют стилизовать элементы в зависимости от их состояния. Самый популярный — :hover (стиль при наведении курсора). Также важны :nth-child(n), позволяющий выбрать, например, каждую вторую строку таблицы для «зебры».
  • Псевдоэлементы. Позволяют добавить декоративные элементы без изменения HTML. Например, ::before и ::after часто используются для создания иконок или кавычек.

    • > Используйте классы для стилизации и избегайте ID. Класс можно применить к десяти элементам на странице, а ID — только к одному. Верстка на классах делает код гибким и переиспользуемым.

    Разбор примера: стилизация карточки товара

    Давайте пошагово превратим простой HTML-код в красивый блок.

    Шаг 1: Сброс настроек. Браузеры добавляют свои отступы по умолчанию. Начнем с обнуления:

    Это гарантирует, что наши расчеты будут точными.

    Шаг 2: Оформление контейнера. Для класса .card задаем width: 300px, border: 1px solid #ccc и border-radius: 8px для скругления углов. Добавляем padding: 20px, чтобы текст не касался границ.

    Шаг 3: Работа с типографикой. Для заголовка внутри карточки .card h2 задаем font-family: sans-serif, font-size: 24px и margin-bottom: 15px, чтобы оттолкнуть текст снизу.

    Шаг 4: Стилизация кнопки. Создаем класс .btn. Задаем background-color: #007bff, color: white, убираем стандартную рамку border: none. Чтобы кнопка реагировала на пользователя, добавим:

    Шаг 5: Добавление теней. Чтобы карточка выглядела объемной, используем box-shadow: 0 4px 8px rgba(0,0,0,0.1);. Это придает современный вид «материального дизайна».

    Типичные заблуждения и ошибки

    Многие думают, что margin и padding взаимозаменяемы. Это не так. Главное правило: если вам нужно изменить расстояние до рамки или фонового цвета самого элемента — используйте padding. Если нужно отодвинуть один элемент от другого — используйте margin. Помните об «эффекте схлопывания маржинов»: вертикальные внешние отступы соседних элементов не суммируются, а выбирается максимальный из них.

    Еще одна ошибка — использование инлайновых стилей прямо в HTML (атрибут style="..."). Это делает код грязным и лишает вас преимуществ каскада. Всегда выносите стили в отдельный файл .css и подключайте его в <head> через тег <link>.

    На экзамене часто просят рассчитать итоговый размер элемента с учетом отступов или определить, какой цвет применится к тексту при конфликте селекторов. Тренируйтесь вычислять «вес» селектора: тег = 1 балл, класс = 10 баллов, ID = 100 баллов. Правило с большей суммой баллов побеждает.

    Если из этой главы запомнить три вещи — это принцип работы блочной модели (border-box), важность специфичности селекторов и разделение ответственности между HTML (структура) и CSS (оформление).

    5. Построение макетов и подготовка к экзамену: сетки, позиционирование и чистота кода

    Построение макетов и подготовка к экзамену: сетки, позиционирование и чистота кода

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

    Инструменты раскладки: Flexbox и Grid

    До появления современных стандартов верстальщики использовали свойство float, которое изначально предназначалось для обтекания картинок текстом. Это было мучительно. Сегодня у нас есть два мощных оружия:

  • Flexbox (Flexible Box Layout). Идеален для одномерных раскладок — либо строка, либо колонка. Если вам нужно выровнять элементы в меню или распределить кнопки в карточке, Flexbox — лучший выбор. Главное свойство здесь — display: flex;, которое превращает родительский элемент во флекс-контейнер, а его прямых потомков — во флекс-элементы. С помощью justify-content мы управляем выравниванием по горизонтали, а с помощью align-items — по вертикали.
  • CSS Grid Layout. Предназначен для двумерных структур. Если макет напоминает сложную сетку с колонками и строками разного размера (как главная страница СМИ), используйте Grid. Он позволяет буквально «рисовать» сетку командами вроде grid-template-columns: 1fr 2fr 1fr;, где fr — это гибкая единица измерения, означающая долю свободного пространства.

    • > Золотое правило: Flexbox — для контента (внутренних элементов), Grid — для каркаса всей страницы.

    Позиционирование: когда элементы выходят из потока

    Обычно элементы в HTML идут друг за другом в «нормальном потоке». Но иногда нужно, чтобы кнопка «Наверх» всегда висела в углу экрана или выпадающее меню появлялось поверх текста. Для этого используется свойство position.

  • relative (относительное). Элемент остается в потоке, но его можно чуть-чуть сдвинуть относительно исходного места. Часто используется как «якорь» для вложенных элементов.
  • absolute (абсолютное). Элемент вырывается из потока и позиционируется относительно ближайшего родителя с position: relative;. Если такого родителя нет, он ориентируется на границы окна браузера.
  • fixed (фиксированное). Элемент «приклеивается» к экрану и не двигается при скролле. Типичный пример — липкая шапка сайта.
  • sticky (липкое). Гибрид: элемент ведет себя как обычно, пока не достигнет определенной точки при скролле, после чего «залипает».

    • Адаптивность: макет, который дышит

    На экзамене часто требуют, чтобы сайт не «ломался» при уменьшении окна браузера. Это достигается с помощью медиа-запросов (@media). Это условия, при которых применяются определенные стили.

    Например, мы можем сказать: «Если ширина экрана меньше 768 пикселей, сделай так, чтобы три колонки превратились в одну».

    Такой подход называется Mobile First (сначала для мобильных), если мы пишем базовые стили для смартфонов и расширяем их для десктопов, или наоборот. Главное — использовать относительные единицы измерения (%, vh, vw, rem) вместо жестких пикселей там, где это возможно.

    Пошаговый разбор: верстка экзаменационного макета

    Давайте соберем типовое задание: шапка, две колонки (контент и сайдбар) и футер.

    Шаг 1: Семантическая разметка. Используем <header>, <main>, <aside> и <footer>. Оборачиваем main и aside в общий контейнер <div> с классом .wrapper.

    Шаг 2: Создание сетки. Для .wrapper задаем display: flex;. Теперь контент и сайдбар встали в ряд. Чтобы контент занимал больше места, задаем ему flex: 3;, а сайдбару — flex: 1;.

    Шаг 3: Оформление шапки. Делаем её фиксированной: position: sticky; top: 0;. Добавляем z-index: 10;, чтобы шапка всегда была выше остального контента при прокрутке.

    Шаг 4: Адаптация. Добавляем медиа-запрос, который при ширине менее 600px меняет flex-direction: column; у .wrapper. Теперь на телефонах сайдбар упадет под основной контент.

    Шаг 5: Финальная полировка. Проверяем отступы. Используем переменные CSS для цветов, чтобы их было легко менять: --main-color: #333;. Это показывает ваш профессионализм.

    Подготовка к экзамену: чек-лист чистого кода

    Преподаватели смотрят не только на картинку, но и «под капот». Вот что сделает вашу работу отличной:

  • Валидность. Проверьте код через валидатор W3C. Никаких незакрытых тегов или атрибутов без кавычек.
  • Именование классов. Используйте логичные имена (например, по методологии БЭМ: header__nav, card--featured). Избегайте имен вроде block1, left-side.
  • Отсутствие дублирования. Если у пяти элементов одинаковый шрифт — вынесите его в общий класс или примените к родителю.
  • Комментарии. Разделяйте секции CSS комментариями: / Header styles /, / Main content /.

    • Если из этой главы запомнить три вещи — это различие между Flexbox и Grid, умение пользоваться абсолютным позиционированием и обязательное использование медиа-запросов для базовой адаптивности.

    Верстка — это навык, который приходит с практикой. Не бойтесь, что сначала блоки будут «прыгать». Понимание того, почему они это делают, — и есть путь к мастерству. Удачи на экзамене!