Основы HTML и CSS: Создание веб-сайтов с нуля

1. Введение в HTML: Структура документа, основные теги и семантическая верстка

Введение в HTML: Структура документа, основные теги и семантическая верстка

Добро пожаловать в курс «Основы HTML и CSS: Создание веб-сайтов с нуля». Мы начинаем наше путешествие с самого фундамента интернета — языка HTML. Если представить веб-сайт как дом, то HTML — это его каркас, стены и перекрытия. Без него некуда будет клеить обои (CSS) и некуда проводить электричество (JavaScript).

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

Что такое HTML?

HTML (HyperText Markup Language) — это язык гипертекстовой разметки. Важно понимать: это не язык программирования. Здесь нет переменных, циклов или сложной логики. HTML предназначен для того, чтобы сообщить браузеру, чем является тот или иной кусок текста или медиа-контента на странице.

Когда вы открываете сайт, браузер получает от сервера текстовый файл с кодом HTML. Он читает этот код сверху вниз и превращает (рендерит) его в визуальную страницу, которую вы видите.

!Как браузер превращает код в веб-страницу

Анатомия HTML-тега

Основной строительный блок HTML — это тег. Теги — это ключевые слова, заключенные в угловые скобки. Большинство элементов состоят из открывающего тега, содержимого и закрывающего тега.

Пример классического элемента:

Разберем по частям:

<p> — Открывающий тег. Он говорит браузеру: «Здесь начинается абзац».

Привет, мир! — Контент. Текст, который увидит пользователь.

</p> — Закрывающий тег. Он содержит слэш / и говорит: «Здесь абзац заканчивается».

Существуют также одиночные (пустые) теги, которым не нужно закрытие, так как у них нет текстового содержимого. Например, тег переноса строки <br> или тег изображения <img>.

Атрибуты

Теги могут иметь атрибуты, которые предоставляют дополнительную информацию об элементе. Атрибуты всегда пишутся в открывающем теге и обычно состоят из имени и значения.

В этом примере href — это имя атрибута, а "https://google.com" — его значение. Этот атрибут сообщает браузеру, куда именно должна вести ссылка.

Структура HTML-документа

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

Вот шаблон минимального HTML-документа:

Разберем каждую строку:

<!DOCTYPE html> — Это не тег, а инструкция для браузера. Она сообщает, что мы используем современную версию языка — HTML5. Без этой строчки браузер может перейти в «режим совместимости» и отображать сайт некорректно.

<html> — Корневой элемент. Весь код страницы должен находиться внутри него. Атрибут lang="ru" важен для поисковых систем и скринридеров (программ для чтения с экрана), указывая, что основной язык страницы — русский.

<head> — «Голова» документа. Здесь хранится служебная информация, которая не отображается в окне просмотра браузера напрямую. Здесь подключаются стили, шрифты, скрипты и мета-теги.

<meta charset="UTF-8"> — Критически важный тег. Он устанавливает кодировку UTF-8, которая поддерживает практически все символы всех языков мира, включая кириллицу и эмодзи.

<title> — Заголовок страницы, который отображается на вкладке браузера, а также в результатах поиска Google или Яндекс.

<body> — «Тело» документа. Всё, что вы видите на сайте (текст, картинки, кнопки), пишется именно внутри тега <body>.

Основные теги для разметки текста

Внутри <body> мы используем различные теги для структурирования контента.

Заголовки

В HTML существует 6 уровней заголовков: от <h1> до <h6>.

* <h1> — Самый важный заголовок. Обычно это название статьи или страницы. На странице должен быть только один <h1>. * <h2> — Заголовок раздела. * <h3> — Подзаголовок внутри раздела. * ... и так далее до <h6>.

> Важно: Не используйте заголовки просто для того, чтобы сделать текст жирным или крупным. Используйте их для логической структуры. Это критично для SEO (продвижения в поиске) и доступности.

Абзацы и списки

Для обычного текста используется тег <p> (paragraph). Браузеры автоматически добавляют отступы сверху и снизу от абзацев, чтобы текст было удобно читать.

Списки бывают двух основных видов:

Маркированный (неупорядоченный) список — <ul> (unordered list). Элементы помечаются точками (буллитами).

Нумерованный (упорядоченный) список — <ol> (ordered list). Элементы помечаются цифрами.

Внутри обоих типов списков каждый пункт оборачивается в тег <li> (list item).

Пример:

Ссылки и изображения

Интернет не был бы «паутиной» без ссылок. Для их создания используется тег <a> (anchor — якорь).

* Атрибут href задает адрес перехода. * Атрибут target="_blank" (необязательный) открывает ссылку в новой вкладке.

Для вставки картинок используется одиночный тег <img>.

* Атрибут src (source) — путь к файлу изображения. * Атрибут alt (alternative text) — текстовое описание картинки. Оно появится, если картинка не загрузится, и его читают скринридеры для незрячих пользователей.

Семантическая верстка

До появления HTML5 верстальщики использовали тег <div> практически для всего. <div> — это просто контейнер без смысловой нагрузки. Код выглядел примерно так:

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

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

!Структура семантической разметки страницы

Основные семантические теги HTML5

<header> — «Шапка» сайта или раздела. Обычно содержит логотип, название и поиск.

<nav> — Навигация. Содержит меню с ссылками на другие страницы.

<main> — Основное содержимое страницы. Должен быть уникальным для каждой страницы и не включать повторяющиеся элементы (как шапка или футер).

<article> — Самодостаточный контент. Например, статья в блоге, пост в соцсети или карточка товара. Если вытащить <article> на другой сайт, он должен сохранить смысл.

<section> — Смысловой раздел документа. Обычно у каждой секции есть свой заголовок.

<aside> — Боковая панель. Контент, косвенно связанный с основным (реклама, список рубрик, «читайте также»).

<footer> — «Подвал» сайта. Копирайты, контакты, ссылки на соцсети.

Зачем нужна семантика?

* SEO (Search Engine Optimization): Поисковые системы (Google, Яндекс) лучше понимают структуру вашего сайта. Они точно знают, что текст внутри <main> важнее, чем текст внутри <footer>. * Доступность (Accessibility): Люди с нарушениями зрения используют скринридеры. Эти программы позволяют быстро перепрыгнуть к навигации (<nav>) или основному контенту (<main>), игнорируя ненужные блоки. Используя семантику, вы делаете интернет доступным для всех. * Читаемость кода: Разработчику проще поддерживать код, где написано <header>, чем искать нужный <div> среди сотен других <div>.

Блочные и строчные элементы

Все теги в HTML делятся на две большие группы по тому, как они ведут себя в потоке документа.

Блочные элементы (Block-level)

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

* Примеры: <div>, <p>, <h1>-<h6>, <ul>, <li>, <header>, <footer>.

Строчные элементы (Inline)

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

* Примеры: <a>, <span>, <strong> (жирный текст), <em> (курсив), <img>.

> Примечание: В современном CSS это поведение можно легко изменить, но важно знать, как элементы ведут себя по умолчанию.

Заключение

Мы разобрали фундамент, на котором строится веб. Вы узнали, что HTML — это язык разметки, а не программирования, изучили структуру документа от <!DOCTYPE html> до <body>, познакомились с базовыми тегами для текста и медиа, а также поняли важность семантической верстки.

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

2. Основы CSS: Селекторы, каскадность, работа с цветом и шрифтами

Основы CSS: Селекторы, каскадность, работа с цветом и шрифтами

В предыдущей лекции мы научились создавать структуру веб-страницы с помощью HTML. Мы возвели стены, поставили перегородки и обозначили, где будет дверь, а где — окно. Но пока наш «дом» выглядит серым и неуютным. Пришло время заняться отделкой: покрасить стены, выбрать красивые шрифты и расставить акценты.

За визуальное оформление в вебе отвечает CSS (Cascading Style Sheets) — каскадные таблицы стилей. Если HTML отвечает на вопрос «Что это?», то CSS отвечает на вопрос «Как это выглядит?».

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

Синтаксис CSS и подключение к HTML

Прежде чем писать стили, нужно понять, как браузер понимает, что именно мы хотим изменить. Правило CSS состоит из двух основных частей: селектора и блока объявлений.

!Анатомия CSS-правила: селектор, свойство и значение

* Селектор указывает браузеру, какой HTML-элемент мы хотим стилизовать (например, все заголовки h1). * Свойство — это характеристика, которую мы меняем (например, цвет color). * Значение — это то, как именно мы меняем характеристику (например, синий blue).

Пример кода:

Здесь мы говорим браузеру: «Найди все абзацы (p) и сделай их текст красным, а размер шрифта — 16 пикселей».

Как подключить CSS к HTML?

Существует три способа, но профессиональным стандартом является только один.

Инлайновые стили (Inline): Пишутся прямо в HTML-теге через атрибут style. Это плохая практика, так как смешивает структуру и оформление.

Внутренние стили (Internal): Пишутся в секции <head> внутри тега <style>. Подходит для маленьких одностраничных сайтов.

Внешние стили (External): Стили выносятся в отдельный файл с расширением .css (обычно style.css) и подключаются через тег <link>.

Именно третий способ мы будем использовать в курсе. Он позволяет менять дизайн всего многостраничного сайта, отредактировав всего один файл.

Селекторы: Как найти нужный элемент

Мощь CSS заключается в гибкости селекторов. Рассмотрим самые важные из них.

1. Селекторы тегов

Самый простой тип. Выбирает все элементы с указанным именем тега.

Этот код выровняет по центру все заголовки первого уровня на странице.

2. Селекторы классов

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

HTML:

CSS:

3. Селекторы ID

Идентификаторы (id) должны быть уникальны на странице. Элемент с конкретным id может быть только один. В CSS обозначаются решеткой #.

HTML:

CSS:

> Совет: Старайтесь использовать классы для стилизации, а ID оставлять для JavaScript или якорных ссылок. Классы можно использовать многократно, что делает код более гибким.

4. Универсальный селектор

Звездочка * выбирает вообще все элементы на странице. Часто используется для сброса стандартных отступов браузера.

Каскадность и Наследование

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

Представьте ситуацию:

Какого цвета будет текст <p class="error">Ошибка</p>? Синего или красного?

Здесь вступают в силу три принципа:

Источник: Стили автора сайта важнее настроек браузера по умолчанию.

Специфичность (Вес селектора): Более точный селектор побеждает.

Порядок исходного кода: Если вес одинаковый, побеждает то правило, которое написано ниже в файле.

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

Браузер рассчитывает «вес» каждого селектора, чтобы определить победителя. Можно представить это как баллы:

| Селектор | Вес (условно) | Пример | | :--- | :--- | :--- | | Тег | 1 | p, div | | Класс | 10 | .menu, .btn | | ID | 100 | #header | | Inline-стиль | 1000 | style="..." |

В нашем примере выше: * Селектор p имеет вес 1. * Селектор .error имеет вес 10.

Побеждает .error, текст будет красным.

!Иллюстрация приоритета селекторов: ID тяжелее классов, классы тяжелее тегов

Наследование

Некоторые свойства передаются от родителя к детям. Если вы зададите font-family для тега body, то все абзацы и заголовки внутри body унаследуют этот шрифт, если не переопределить его явно. Однако свойства, связанные с размерами (например, width, margin), обычно не наследуются.

Работа с цветом

Цвет — один из главных инструментов дизайна. В CSS есть несколько способов задать цвет.

Ключевые слова

Самый простой способ — написать название цвета на английском.

В CSS зарезервировано около 140 названий цветов, включая такие экзотические, как tomato, chocolate или aliceblue.

HEX-коды

Самый популярный формат в веб-разработке. Это шестнадцатеричное представление цвета, начинающееся с #. Оно состоит из трех пар символов: красный, зеленый, синий (RGB).

* #000000 — черный * #FFFFFF — белый * #FF0000 — ярко-красный

RGB и RGBA

Формат rgb() позволяет задавать интенсивность красного, зеленого и синего каналов числами от 0 до 255.

Формат rgba() добавляет четвертый параметр — Alpha (прозрачность). Значение варьируется от 0 (полностью прозрачный) до 1 (непрозрачный).

Работа со шрифтами и текстом

Текст составляет 90% контента в интернете. Умение с ним работать критически важно.

Семейство шрифтов (font-family)

Свойство font-family позволяет указать, каким шрифтом отображать текст. Обычно указывают не один шрифт, а «стек» шрифтов через запятую. Если у пользователя нет первого шрифта, браузер попробует второй, и так далее.

В конце списка всегда стоит указывать родовое семейство: * serif — шрифты с засечками (как Times New Roman). Хороши для больших текстов и книг. * sans-serif — шрифты без засечек (как Arial). Считаются более современными и удобными для чтения с экранов. * monospace — моноширинные шрифты (как в редакторах кода).

Размер шрифта (font-size)

Размер можно задавать в разных единицах:

px (пиксели): Абсолютная единица. 16px всегда будут равны 16 пикселям экрана. Просто для понимания, но не всегда хорошо для адаптивности.

rem (root em): Относительная единица. 1rem равен размеру шрифта корневого элемента (html). По умолчанию в браузерах это 16px. Использование rem — современный стандарт, так как позволяет легко масштабировать весь интерфейс.

Насыщенность и стиль

* font-weight: Толщина букв. Может быть задана словами (normal, bold) или числами (400 — обычный, 700 — жирный). * font-style: Позволяет сделать текст курсивным (italic).

Выравнивание и декор

* text-align: Выравнивание текста (left, center, right, justify). * text-decoration: Оформление линий. Часто используется для удаления подчеркивания у ссылок:

Заключение

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

Однако, чтобы создавать полноценные макеты, нам нужно научиться управлять размерами блоков, отступами и их расположением на странице. В следующей статье мы разберем фундаментальную концепцию CSS — Блочную модель (Box Model).

Для более глубокого изучения свойств, рассмотренных сегодня, рекомендую обращаться к справочнику MDN Web Docs по CSS.

3. Блочная модель и позиционирование элементов: Margin, Padding и Border

Блочная модель и позиционирование элементов: Margin, Padding и Border

В предыдущих статьях мы научились создавать каркас страницы с помощью HTML и познакомились с основами стилизации в CSS. Мы уже умеем менять цвет текста, выбирать шрифты и делать текст жирным. Но если вы попробуете сверстать макет сайта прямо сейчас, вы столкнетесь с проблемой: все элементы «липнут» друг к другу или к левому краю экрана. Как отодвинуть кнопку от текста? Как сделать рамку вокруг картинки? Как выровнять блок по центру?

Ответ кроется в одной из самых фундаментальных концепций веб-разработки — Блочной модели (Box Model). Без понимания того, как она работает, невозможно создать даже самую простую разметку.

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

Все есть прямоугольник

Первое правило, которое нужно усвоить: каждый элемент на веб-странице — это прямоугольный ящик (box). Даже если вы видите круглую кнопку, текст или изображение сложной формы, с точки зрения браузера они находятся внутри невидимого прямоугольного контейнера.

Браузер отрисовывает страницу, размещая эти ящики рядом друг с другом или друг под другом, в зависимости от их типа (блочные или строчные).

Анатомия Блочной модели

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

Content (Контент) — содержимое элемента (текст, картинка).

Padding (Внутренний отступ) — прозрачное поле вокруг контента.

Border (Граница) — рамка, идущая вокруг внутреннего отступа.

Margin (Внешний отступ) — прозрачное пространство снаружи рамки, отделяющее элемент от соседей.

!Визуальная схема строения блочной модели: от контента до внешних отступов.

Давайте разберем каждое свойство подробно.

1. Content (Содержимое)

Это сердцевина бокса. Здесь находится текст, изображение или другие вложенные элементы. Размерами этой области мы управляем с помощью свойств width (ширина) и height (высота).

> Важно: По умолчанию фон элемента (background-color) заливает область Content и область Padding, но не распространяется на Margin.

2. Padding (Внутренний отступ)

padding — это пространство между содержимым элемента и его границей. Представьте картину в рамке: между самим полотном и деревянной рамой часто есть картонная прокладка (паспарту). Вот это и есть padding.

Внутренние отступы нужны, чтобы текст не прилипал к краям блока, создавая «воздух» внутри.

Вы можете задавать отступы для каждой стороны отдельно:

* padding-top (сверху) * padding-right (справа) * padding-bottom (снизу) * padding-left (слева)

Или использовать сокращенную запись (shorthand). Это очень популярный прием, который стоит запомнить. Значения перечисляются по часовой стрелке, начиная сверху (Top -> Right -> Bottom -> Left).

3. Border (Граница)

border — это линия, окружающая padding и content. В отличие от отступов, границу можно увидеть, покрасить и изменить ее стиль.

Для создания границы нужно указать три параметра: толщину, стиль и цвет.

Обычно это записывают одной строкой:

Стили границ бывают разными: * solid — сплошная линия (самая частая). * dashed — пунктирная линия. * dotted — точки. * double — двойная линия. * none — нет границы.

4. Margin (Внешний отступ)

margin — это личное пространство элемента. Это пустота снаружи границы, которая отталкивает другие элементы. Марджины всегда прозрачны.

Синтаксис такой же, как у padding (можно задавать отдельно margin-top и т.д., или использовать сокращенную запись).

#### Центрирование блоков

У margin есть уникальное значение auto. Если задать блочному элементу фиксированную ширину и margin-left: auto вместе с margin-right: auto, браузер автоматически поровну распределит свободное пространство слева и справа. В результате элемент встанет ровно по центру родителя.

Проблема расчета размеров (Box-Sizing)

Здесь начинается математика, которая часто сбивает с толку новичков. Представьте, что вы хотите создать блок шириной 300 пикселей. Вы пишете:

Какова будет реальная ширина этого элемента на экране? Интуитивно кажется, что 300px. Но в стандартной модели CSS это не так.

По умолчанию свойство box-sizing имеет значение content-box. Это значит, что свойство width задает ширину только контента. Отступы и границы добавляются сверх этого значения.

Давайте посчитаем реальную ширину элемента на экране, используя формулу:

Где — итоговая ширина элемента на экране, — ширина контента, заданная в CSS, — значения внутреннего отступа (padding), а — толщина границ (border).

Подставим наши значения:

Итого: наш блок займет 350 пикселей. Если у вас было место только для 300 пикселей, верстка «поедет».

Решение: border-box

Чтобы избежать этих сложных расчетов, в современном CSS используют альтернативную модель расчета размеров: box-sizing: border-box.

В этом режиме свойство width определяет общую ширину элемента, включая padding и border. Браузер сам автоматически уменьшит место под контент, чтобы вписаться в заданные рамки.

!Наглядное сравнение того, как рассчитывается ширина в content-box и border-box.

Это настолько удобно, что большинство разработчиков начинают свой CSS-файл с глобального сброса:

Этот код говорит браузеру: «Применяй понятную логику размеров ко всем элементам на странице».

Схлопывание внешних отступов (Margin Collapse)

У margin есть одна особенность поведения, которой нет у padding. Если два блочных элемента стоят друг под другом, их вертикальные отступы не складываются, а «схлопываются». Побеждает больший отступ.

Пример:

Какое расстояние будет между блоками? Не 50px (30 + 20), а 30px. Меньший отступ (20px) просто поглощается большим.

> Примечание: Это работает только для вертикальных отступов обычных блоков. Горизонтальные отступы всегда складываются.

Инструменты разработчика (DevTools)

Вам не нужно гадать, где заканчивается margin и начинается padding. В любом современном браузере (Chrome, Firefox, Safari) есть инструменты разработчика.

Нажмите правой кнопкой мыши на любой элемент страницы.

Выберите «Просмотреть код» (Inspect).

Во вкладке «Elements» найдите раздел «Styles» или «Computed».

Там вы увидите цветную диаграмму блочной модели для выбранного элемента. Это лучший способ отладки верстки.

Практические советы

Используйте margin для разделения соседей. Если вам нужно отодвинуть один блок от другого — это margin.

Используйте padding для внутреннего простора. Если вам нужно, чтобы текст не касался границ кнопки или карточки — это padding.

Сбрасывайте стили браузера. Браузеры по умолчанию добавляют отступы для <body>, <h1>, <p> и других тегов. В профессиональной верстке их часто обнуляют в начале работы:

Заключение

Блочная модель — это основа, на которой держится весь визуальный макет веб-страницы. Понимая разницу между content-box и border-box, а также умело используя margin и padding, вы сможете создавать аккуратные и предсказуемые интерфейсы.

Теперь, когда мы умеем создавать блоки и задавать им размеры и отступы, возникает следующий вопрос: как расположить эти блоки не просто друг под другом, а, например, в две колонки? Или как прижать футер к низу экрана? В следующих уроках мы перейдем к более продвинутым методам компоновки.

4. Современные методы верстки: Flexbox и CSS Grid Layout

Современные методы верстки: Flexbox и CSS Grid Layout

В предыдущей статье мы разобрали блочную модель (Box Model). Вы узнали, что каждый элемент — это прямоугольник с отступами и границами. Мы научились задавать размеры блокам и отодвигать их друг от друга с помощью margin. Но как только дело доходит до создания макета страницы — например, разместить меню в одну строку или создать сетку товаров — стандартная блочная модель становится неудобной.

Раньше верстальщики использовали «костыли»: таблицы, свойства float (обтекание) и inline-block. Это было сложно, ненадежно и требовало много математических расчетов. К счастью, в современном CSS появились два мощных инструмента, созданных специально для управления макетом: Flexbox и Grid Layout.

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

Flexbox: Одномерная верстка

Flexbox (Flexible Box Layout) — это модуль макета гибкого контейнера. Его главная суперсила — умение управлять элементами в одном измерении: либо в строку, либо в столбец.

Представьте, что у вас есть бусы на нитке. Вы можете сдвинуть их все влево, вправо, распределить равномерно по всей длине нитки или прижать к центру. Flexbox работает именно так.

Основные понятия Flexbox

Чтобы начать использовать Flexbox, нужно понимать два термина:

Flex-контейнер (Flex Container): Родительский элемент, в котором происходит магия.

Flex-элементы (Flex Items): Дочерние элементы, которые находятся внутри контейнера.

Чтобы активировать Flexbox, достаточно одной строчки CSS для родителя:

Как только вы это напишете, все дочерние элементы (например, div внутри контейнера) автоматически выстроятся в один ряд слева направо, даже если раньше они были блочными и стояли друг под другом.

Оси: Главная и Поперечная

В основе Flexbox лежит концепция двух осей. Понимание этого критически важно для управления выравниванием.

!Главная и поперечная оси во Flexbox определяют направление выравнивания элементов

* Главная ось (Main Axis): По умолчанию идет горизонтально слева направо. Вдоль нее элементы выстраиваются в ряд. * Поперечная ось (Cross Axis): По умолчанию идет вертикально сверху вниз. Она перпендикулярна главной оси.

Вы можете изменить направление главной оси с помощью свойства flex-direction:

* row (по умолчанию): в строку. * column: в колонку (тогда главная ось станет вертикальной). * row-reverse / column-reverse: в обратном порядке.

Выравнивание элементов

Самое приятное во Flexbox — это легкость выравнивания. Забудьте про margin: 0 auto для вертикального центрирования.

#### 1. Выравнивание по Главной оси (justify-content)

Свойство justify-content управляет тем, как элементы распределяются вдоль главной оси (обычно горизонтально).

* flex-start: Прижать к началу (по умолчанию). * flex-end: Прижать к концу. * center: Выровнять по центру. * space-between: Крайние элементы прижаты к краям, свободное место распределено между элементами. * space-around: Свободное место распределено вокруг элементов (включая края).

#### 2. Выравнивание по Поперечной оси (align-items)

Свойство align-items управляет выравниванием перпендикулярно главной оси (обычно вертикально).

* stretch: Растянуть элементы на всю высоту контейнера (по умолчанию). * flex-start: Прижать к верху. * flex-end: Прижать к низу. * center: Выровнять по центру.

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

Перенос строк (flex-wrap)

По умолчанию Flexbox пытается втиснуть все элементы в одну строку, даже если их очень много (он просто будет их сжимать). Чтобы разрешить перенос на новую строку, используйте свойство flex-wrap.

Теперь, если элементам не хватает места, они перепрыгнут на следующий «этаж».

CSS Grid Layout: Двумерная верстка

Если Flexbox — это бусы на нитке (1D), то Grid — это шахматная доска или таблица Excel (2D). Grid позволяет управлять расположением элементов одновременно и по строкам, и по столбцам.

Grid идеально подходит для создания общего каркаса страницы (шапка, сайдбар, контент, подвал) и сложных галерей.

Создание сетки

Как и во Flexbox, мы начинаем с создания контейнера:

Но само по себе это ничего не изменит. Нам нужно явно задать шаблон сетки: сколько будет колонок и рядов.

Колонки и ряды

Используем свойства grid-template-columns и grid-template-rows.

Единица измерения fr

В Grid появилась новая единица измерения — fr (fraction — доля). Она позволяет гибко распределять свободное пространство. Это гораздо удобнее процентов.

В этом примере:

Вся ширина контейнера делится на 4 части (1 + 2 + 1 = 4).

Первая и третья колонки занимают по 1 части.

Средняя колонка занимает 2 части (то есть 50% ширины).

!Распределение пространства в Grid с помощью единиц fr

Отступы (Gap)

В Grid (и в современном Flexbox тоже) очень легко делать отступы между ячейками без использования margin. Свойство gap создает «дорожки» между колонками и рядами.

Размещение элементов

Самое мощное в Grid — возможность сказать элементу: «Займи место с первой по третью колонку и с первого по второй ряд».

Для этого используются свойства дочерних элементов: * grid-column-start / grid-column-end * grid-row-start / grid-row-end

Или сокращенная запись:

> Важно: В Grid мы считаем не ячейки, а линии сетки. Если у нас 3 колонки, то линий будет 4 (начало, между 1 и 2, между 2 и 3, конец).

Flexbox или Grid: Что выбрать?

Новички часто спорят, что лучше. Правильный ответ: нужно знать и использовать оба метода, так как они решают разные задачи.

Комбинированный подход

На практике эти технологии работают вместе. Обычно Grid используется для глобальной разметки страницы (Header, Sidebar, Main, Footer), а внутри этих блоков используется Flexbox для выравнивания мелких деталей (например, иконка и текст внутри кнопки).

Пример структуры:

Заключение

Мы рассмотрели два столпа современной верстки. Flexbox спас нас от мучений с выравниванием элементов в ряд и по центру. Grid Layout подарил нам возможность создавать сложные сетки без лишних оберток и математики.

Теперь вы можете сверстать практически любой макет, который нарисует дизайнер. Но как сделать так, чтобы этот макет хорошо смотрелся и на огромном мониторе, и на маленьком экране смартфона? Об этом мы поговорим в следующей статье, посвященной Адаптивной верстке и Медиа-запросам.

5. Адаптивный дизайн, медиа-запросы и лучшие практики веб-доступности

Адаптивный дизайн, медиа-запросы и лучшие практики веб-доступности

В предыдущих статьях мы прошли большой путь: от создания каркаса на HTML до построения сложных сеток с помощью Flexbox и Grid. Ваш сайт уже выглядит отлично на вашем мониторе. Но что произойдет, если открыть его на смартфоне? Скорее всего, текст станет слишком мелким, горизонтальная прокрутка сломает верстку, а кнопки окажутся такими крошечными, что по ним невозможно будет попасть пальцем.

Сегодня мы живем в мире, где мобильный трафик превышает десктопный. Это значит, что умение создавать адаптивный дизайн (Responsive Web Design) — это не просто бонус, а обязательное требование к любому веб-разработчику.

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

Что такое адаптивный дизайн?

Адаптивный дизайн — это подход к веб-разработке, при котором сайт «реагирует» на размер экрана устройства и подстраивается под него. Это не создание отдельной мобильной версии сайта (как делали в 2010-м), а использование одного и того же HTML-кода, который по-разному отображается благодаря CSS.

Мета-тег Viewport

Всё начинается с одной строчки в head вашего HTML-документа. Без неё адаптивность работать не будет.

Разберем, что она делает: * width=device-width: Говорит браузеру, что ширина области просмотра (viewport) должна быть равна реальной ширине экрана устройства. Без этого смартфон попытается сжать огромный десктопный сайт до размеров своего экрана, сделав всё микроскопическим. * initial-scale=1.0: Устанавливает начальный масштаб 1:1 (без зума).

Медиа-запросы (Media Queries)

Сердце адаптивного дизайна — это медиа-запросы в CSS. Они работают как условные операторы (если... то...). Мы говорим браузеру: «Если ширина экрана меньше 600 пикселей, примени эти стили».

Синтаксис выглядит так:

В этом примере, если вы уменьшите окно браузера до 600px, фон станет серым, а шрифт уменьшится.

Контрольные точки (Breakpoints)

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

* 320px - 480px: Мобильные телефоны. * 481px - 768px: Планшеты и большие телефоны в горизонтальной ориентации. * 769px - 1024px: Ноутбуки и маленькие десктопы. * 1025px и выше: Большие мониторы.

!Иллюстрация того, как один и тот же контент перестраивается на разных экранах с помощью медиа-запросов.

Стратегия Mobile First

Существует два подхода к написанию адаптивных стилей:

Desktop First: Сначала пишем стили для большого экрана, а потом с помощью @media (max-width: ...) упрощаем их для мобильных.

Mobile First: Сначала пишем стили для мобильных устройств (как базовые), а потом с помощью @media (min-width: ...) усложняем их для больших экранов.

Современный стандарт — это Mobile First. Почему? Потому что проще добавить колонку на большом экране, чем пытаться «впихнуть» сложную таблицу в экран телефона. Кроме того, код для мобильных устройств обычно проще, и браузеру на телефоне легче его обработать.

Пример Mobile First:

Гибкие сетки и изображения

Медиа-запросы меняют макет скачкообразно. Но между контрольными точками (например, между 500px и 700px) сайт тоже должен выглядеть хорошо. Для этого используются относительные единицы измерения.

Проценты вместо пикселей

Вместо жесткой ширины width: 300px лучше использовать width: 33% или width: 100%. Это позволяет элементам растягиваться и сжиматься, заполняя доступное пространство.

Адаптивные изображения

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

* max-width: 100%: Картинка никогда не будет шире своего родительского контейнера. Если контейнер сужается, картинка тоже уменьшается. * height: auto: Пропорции картинки сохраняются (она не сплющивается).

Веб-доступность (Accessibility / a11y)

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

Интересный факт: доступный сайт удобен всем. Например, высокий контраст текста помогает не только слабовидящим, но и тем, кто читает с телефона на ярком солнце.

Основные принципы доступности

#### 1. Семантическая верстка

Это база, которую мы обсуждали в первой лекции. Скринридеры (программы, читающие экран вслух для незрячих) ориентируются именно на теги.

* Используйте <button> для кнопок, а не <div class="btn">. Кнопка по умолчанию доступна с клавиатуры (клавиша Tab), а div — нет. * Используйте заголовки <h1>-<h6> строго по порядку, не перепрыгивая уровни. * Используйте <nav>, <main>, <footer> для обозначения областей страницы.

#### 2. Альтернативный текст для изображений

Атрибут alt у тега <img> обязателен.

* Плохо: <img src="cat.jpg"> (Скринридер скажет просто "изображение" или прочитает имя файла). * Хорошо: <img src="cat.jpg" alt="Рыжий кот спит на подоконнике">.

Если картинка чисто декоративная (например, фоновый узор), оставьте атрибут пустым: alt="". Тогда скринридер её проигнорирует.

#### 3. Контрастность цветов

Текст должен хорошо читаться на фоне. Светло-серый текст на белом фоне выглядит стильно, но читать его невозможно. Существуют специальные инструменты (например, в Chrome DevTools), которые проверяют коэффициент контрастности.

#### 4. Управление с клавиатуры

Многие люди не могут пользоваться мышью. Они перемещаются по сайту с помощью клавиши Tab. Убедитесь, что: * Все интерактивные элементы (ссылки, кнопки, формы) получают фокус. * Фокус виден визуально. Никогда не пишите outline: none в CSS, если не заменяете его своим стилем фокуса.

Заключение

Адаптивный дизайн и доступность — это не «фичи», которые можно добавить в конце разработки. Это фундамент современного веба. Используя мета-тег viewport, медиа-запросы, стратегию Mobile First и семантический HTML, вы создаете продукты, которые удобны для всех пользователей, независимо от того, какое у них устройство или физические возможности.

Теперь у вас есть полный набор инструментов: HTML для структуры, CSS для стиля, Flexbox/Grid для макета и Media Queries для адаптивности. В следующей части курса мы перейдем к практике и попробуем сверстать полноценный лендинг, применяя все полученные знания.