0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>22 апр 2024</li>
2
<ul><li>22 апр 2024</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Не путать с head! Знакомимся с тегом и учимся верстать шапку сайта.</p>
4
</ul><p>Не путать с head! Знакомимся с тегом и учимся верстать шапку сайта.</p>
5
<p>Иллюстрация: Катя Павловская для Skillbox Media</p>
5
<p>Иллюстрация: Катя Павловская для Skillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>Верхняя часть многих сайтов состоит из логотипа, меню, строки поиска и других подобных элементов. Обычно эти элементы собраны в один блок, который называется шапкой сайта. Чтобы сделать шапку сайта нужен HTML-тег <header>.</p>
7
<p>Верхняя часть многих сайтов состоит из логотипа, меню, строки поиска и других подобных элементов. Обычно эти элементы собраны в один блок, который называется шапкой сайта. Чтобы сделать шапку сайта нужен HTML-тег <header>.</p>
8
<p>Тег <header> появился в <a>HTML5</a> - это современная версия языка гипертекстовой разметки. До этого шапку сайта верстали с помощью тега <div>. Сейчас такая практика устарела, и из статьи вы узнаете почему. Мы познакомимся с хедером и сверстаем две шапки сайта для закрепления теории. Исходники для вёрстки сможете найти ниже. Можете их скачать и попрактиковаться с нами.</p>
8
<p>Тег <header> появился в <a>HTML5</a> - это современная версия языка гипертекстовой разметки. До этого шапку сайта верстали с помощью тега <div>. Сейчас такая практика устарела, и из статьи вы узнаете почему. Мы познакомимся с хедером и сверстаем две шапки сайта для закрепления теории. Исходники для вёрстки сможете найти ниже. Можете их скачать и попрактиковаться с нами.</p>
9
<p><strong>Содержание</strong></p>
9
<p><strong>Содержание</strong></p>
10
<ul><li><a>Пример реализации</a></li>
10
<ul><li><a>Пример реализации</a></li>
11
<li><a>Предназначение тега</a></li>
11
<li><a>Предназначение тега</a></li>
12
<li><a>Атрибуты</a></li>
12
<li><a>Атрибуты</a></li>
13
<li><a>Как сделать шапку сайта</a></li>
13
<li><a>Как сделать шапку сайта</a></li>
14
</ul><ul><li><a>Первый кейс: шапка сайта с логотипом и меню</a></li>
14
</ul><ul><li><a>Первый кейс: шапка сайта с логотипом и меню</a></li>
15
<li><a>Второй кейс: шапка сайта с меню, фоновым изображением и текстом</a></li>
15
<li><a>Второй кейс: шапка сайта с меню, фоновым изображением и текстом</a></li>
16
</ul><p>Шапку сайта можно оформить по-разному. Её вид будет зависеть от элементов, которые разработчик добавит внутрь парного тега <header>. Какие конкретно это будут элементы - зависит от индивидуальных предпочтений разработчика.</p>
16
</ul><p>Шапку сайта можно оформить по-разному. Её вид будет зависеть от элементов, которые разработчик добавит внутрь парного тега <header>. Какие конкретно это будут элементы - зависит от индивидуальных предпочтений разработчика.</p>
17
<p>Представьте макет первого экрана сайта: сверху располагается логотип, под ним меню, ещё ниже - фоновое изображение с небольшим текстовым блоком. Один разработчик добавит в шапку только логотип. Другой - логотип и меню. Третий - весь первый экран. Все варианты допустимы и нет какого-то более правильного. Поэтому разработчики верстают шапки сайтов, опираясь на опыт и детали макета.</p>
17
<p>Представьте макет первого экрана сайта: сверху располагается логотип, под ним меню, ещё ниже - фоновое изображение с небольшим текстовым блоком. Один разработчик добавит в шапку только логотип. Другой - логотип и меню. Третий - весь первый экран. Все варианты допустимы и нет какого-то более правильного. Поэтому разработчики верстают шапки сайтов, опираясь на опыт и детали макета.</p>
18
<p>Пример шапки сайта с логотипом и меню:</p>
18
<p>Пример шапки сайта с логотипом и меню:</p>
19
<header> <img src="logo.png" alt="Логотип"> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </header><p>Тег <header> не нужно путать с созвучным тегом <head>. Тег <header> создаёт шапку сайта и находится внутри тега <body>. Тег <body> отвечает за видимую часть страницы - то есть содержит весь HTML-код, который отобразит браузер.</p>
19
<header> <img src="logo.png" alt="Логотип"> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </header><p>Тег <header> не нужно путать с созвучным тегом <head>. Тег <header> создаёт шапку сайта и находится внутри тега <body>. Тег <body> отвечает за видимую часть страницы - то есть содержит весь HTML-код, который отобразит браузер.</p>
20
<p>Тег <head> стоит перед <body>. Он содержит служебную информацию, которая помогает отображать страницу в браузере. Пользователи такой код не видят.</p>
20
<p>Тег <head> стоит перед <body>. Он содержит служебную информацию, которая помогает отображать страницу в браузере. Пользователи такой код не видят.</p>
21
<p>Пример страницы с тегами <head> и <header>:</p>
21
<p>Пример страницы с тегами <head> и <header>:</p>
22
<!DOCTYPE html> <html lang="ru"> <head> <!-- Тег <head> содержит служебную информацию --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мой сайт</title> </head> <body> <!-- Тег <body> содержит видимую часть страницы --> <header> <!-- Тег <header> нужен для создания шапки сайта --> <img src="logo.png" alt="Логотип"> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </header> </body> </html><p>Обычно тег <header> ассоциируется с шапкой сайта. Однако его можно использовать в качестве шапки для отдельных страниц или частей страницы.</p>
22
<!DOCTYPE html> <html lang="ru"> <head> <!-- Тег <head> содержит служебную информацию --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мой сайт</title> </head> <body> <!-- Тег <body> содержит видимую часть страницы --> <header> <!-- Тег <header> нужен для создания шапки сайта --> <img src="logo.png" alt="Логотип"> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </header> </body> </html><p>Обычно тег <header> ассоциируется с шапкой сайта. Однако его можно использовать в качестве шапки для отдельных страниц или частей страницы.</p>
23
<p>Возьмём страницу с каталогом, которая находится под шапкой сайта. Каталог состоит из карточек товаров и панели управления. В панель управления входит меню, поисковая строка и фильтры для подбора товаров. Так вот содержимое панели управления можно добавить в тег <header> и сделать шапкой страницы.</p>
23
<p>Возьмём страницу с каталогом, которая находится под шапкой сайта. Каталог состоит из карточек товаров и панели управления. В панель управления входит меню, поисковая строка и фильтры для подбора товаров. Так вот содержимое панели управления можно добавить в тег <header> и сделать шапкой страницы.</p>
24
<p>На странице может находиться множество хедеров. Однако для сохранения структуры документа их не стоит вкладывать в <footer>, <address> и другой тег <header>. Иначе страница может непредсказуемо отображаться в браузерах.</p>
24
<p>На странице может находиться множество хедеров. Однако для сохранения структуры документа их не стоит вкладывать в <footer>, <address> и другой тег <header>. Иначе страница может непредсказуемо отображаться в браузерах.</p>
25
<p>Пример страницы с шапкой сайта и шапкой каталога:</p>
25
<p>Пример страницы с шапкой сайта и шапкой каталога:</p>
26
<!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> <header> <!-- Шапка сайта --> <img src="logo.png" alt="Логотип"> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </header> <main> <section class="catalog"> <header> <!-- Шапка каталога --> <h2>Каталог товаров</h2> <div class="controls"> <input type="text" placeholder="Поиск"> <select> <option>Фильтр 1</option> <option>Фильтр 2</option> <option>Фильтр 3</option> </select> </div> </header> <div class="product-cards"> <div class="product-card"> </div> <div class="product-card"> </div> </div> </section> </main> <footer> <p>Copyright (c) 2024. Все права защищены.</p> </footer> </body> </html><p>Заменим каталог товаров на блог. У каждой записи будет заголовок, подзаголовок и содержимое. Заголовок и подзаголовок можно объединить в теге <header> и использовать как шапку для части страницы - то есть для всех записей в блоге.</p>
26
<!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> <header> <!-- Шапка сайта --> <img src="logo.png" alt="Логотип"> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </header> <main> <section class="catalog"> <header> <!-- Шапка каталога --> <h2>Каталог товаров</h2> <div class="controls"> <input type="text" placeholder="Поиск"> <select> <option>Фильтр 1</option> <option>Фильтр 2</option> <option>Фильтр 3</option> </select> </div> </header> <div class="product-cards"> <div class="product-card"> </div> <div class="product-card"> </div> </div> </section> </main> <footer> <p>Copyright (c) 2024. Все права защищены.</p> </footer> </body> </html><p>Заменим каталог товаров на блог. У каждой записи будет заголовок, подзаголовок и содержимое. Заголовок и подзаголовок можно объединить в теге <header> и использовать как шапку для части страницы - то есть для всех записей в блоге.</p>
27
<p>Пример страницы с шапкой сайта и тремя шапками для записей в блоге:</p>
27
<p>Пример страницы с шапкой сайта и тремя шапками для записей в блоге:</p>
28
<!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> <header> <!-- Шапка сайта --> <img src="logo.png" alt="Логотип"> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </header> <main> <article> <header> <!-- Шапка первой статьи --> <h2>Заголовок первой статьи</h2> <p>Подзаголовок первой статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> <article> <header> <!-- Шапка второй статьи --> <h2>Заголовок второй статьи</h2> <p>Подзаголовок второй статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> <article> <header> <!-- Шапка третьей статьи --> <h2>Заголовок третьей статьи</h2> <p>Подзаголовок третьей статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> </main> <footer> <p>Copyright (c) 2024. Все права защищены.</p> </footer> </body> </html>Схема использования тега <header> для всего сайта и для части страницы<em>Изображение: Майя Мальгина для Skillbox Media</em><p>HTML-теги делятся на блочные и строчные. Тег <header> относится к блочным тегам и появился в <a>HTML5</a>. Ранее шапку верстали с помощью блочного тега <div>.</p>
28
<!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> <header> <!-- Шапка сайта --> <img src="logo.png" alt="Логотип"> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </header> <main> <article> <header> <!-- Шапка первой статьи --> <h2>Заголовок первой статьи</h2> <p>Подзаголовок первой статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> <article> <header> <!-- Шапка второй статьи --> <h2>Заголовок второй статьи</h2> <p>Подзаголовок второй статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> <article> <header> <!-- Шапка третьей статьи --> <h2>Заголовок третьей статьи</h2> <p>Подзаголовок третьей статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> </main> <footer> <p>Copyright (c) 2024. Все права защищены.</p> </footer> </body> </html>Схема использования тега <header> для всего сайта и для части страницы<em>Изображение: Майя Мальгина для Skillbox Media</em><p>HTML-теги делятся на блочные и строчные. Тег <header> относится к блочным тегам и появился в <a>HTML5</a>. Ранее шапку верстали с помощью блочного тега <div>.</p>
29
<p>Если взять любой HTML-документ и заменить <header> на <div>, то с вёрсткой ничего не случится. Сайт будет корректно отображаться во всех браузерах. Дело в том, что <div> и <header> выполняют схожую функцию - создают обёртку для упорядочивания других тегов. Они как шкаф с полочками для хранения вещей.</p>
29
<p>Если взять любой HTML-документ и заменить <header> на <div>, то с вёрсткой ничего не случится. Сайт будет корректно отображаться во всех браузерах. Дело в том, что <div> и <header> выполняют схожую функцию - создают обёртку для упорядочивания других тегов. Они как шкаф с полочками для хранения вещей.</p>
30
<p>В современной вёрстке <header> не заменяют на <div>. Причина в стандарте<a>HTML5</a>, который<a>ввёл концепцию семантической разметки</a>. Теги должны не просто формировать структуру страницы, но и передавать смысл содержимого: описывать значения основных блоков и уточнять суть определённых элементов.</p>
30
<p>В современной вёрстке <header> не заменяют на <div>. Причина в стандарте<a>HTML5</a>, который<a>ввёл концепцию семантической разметки</a>. Теги должны не просто формировать структуру страницы, но и передавать смысл содержимого: описывать значения основных блоков и уточнять суть определённых элементов.</p>
31
<p>Семантика превратила <div> в <header>. Появились и другие<a>семантические теги</a>, которые ранее были обёрнуты в <div>. Например, с помощью тега <nav> можно создать навигационное меню, а в <footer> добавить контент для нижней части сайта. По одному названию таких тегов понятно, какой код в них содержится.</p>
31
<p>Семантика превратила <div> в <header>. Появились и другие<a>семантические теги</a>, которые ранее были обёрнуты в <div>. Например, с помощью тега <nav> можно создать навигационное меню, а в <footer> добавить контент для нижней части сайта. По одному названию таких тегов понятно, какой код в них содержится.</p>
32
<p>Семантическая разметка стимулирует разработчиков писать структурированный код, который легко читать и поддерживать. Также она помогает поисковым роботам и людям с ограниченными возможностями ориентироваться на сайте.</p>
32
<p>Семантическая разметка стимулирует разработчиков писать структурированный код, который легко читать и поддерживать. Также она помогает поисковым роботам и людям с ограниченными возможностями ориентироваться на сайте.</p>
33
<p>Поисковые роботы не умеют визуально анализировать страницы сайтов, поэтому без семантической разметки им сложно определять расположение элементов. И наоборот: разметка позволяет быстро сканировать страницы, считывать структуру и оценивать содержимое. Так сайты лучше видны поисковым системам.</p>
33
<p>Поисковые роботы не умеют визуально анализировать страницы сайтов, поэтому без семантической разметки им сложно определять расположение элементов. И наоборот: разметка позволяет быстро сканировать страницы, считывать структуру и оценивать содержимое. Так сайты лучше видны поисковым системам.</p>
34
<p>Люди с ограниченным зрением изучают сайты через скринридеры - устройства или приложения, которые голосом воспроизводят контент и элементы страницы.</p>
34
<p>Люди с ограниченным зрением изучают сайты через скринридеры - устройства или приложения, которые голосом воспроизводят контент и элементы страницы.</p>
35
<p>Скринридеры помогают прослушивать навигацию сайта, быстро перемещаться между блоками и находить информацию. Семантическая разметка как раз способствует тому, чтобы голосовые программы могли корректно отличать шапку сайта от основного содержимого и других элементов на странице. Это часть концепции цифровой доступности, которую поддерживает команда Chrome.</p>
35
<p>Скринридеры помогают прослушивать навигацию сайта, быстро перемещаться между блоками и находить информацию. Семантическая разметка как раз способствует тому, чтобы голосовые программы могли корректно отличать шапку сайта от основного содержимого и других элементов на странице. Это часть концепции цифровой доступности, которую поддерживает команда Chrome.</p>
36
<p>?<a>Руководство по доступности сайтов от членов команды Chrome</a></p>
36
<p>?<a>Руководство по доступности сайтов от членов команды Chrome</a></p>
37
Схема слева - HTML4: чтобы не запутаться в <div>, разработчикам приходилось добавлять id или class. Схема справа - HTML5: по названию тегов понятно, какую часть сайта они представляют<em>Изображение: Майя Мальгина для Skillbox Media</em><p>Для тега <header> нет специальных атрибутов, но к нему можно применить<a>глобальные атрибуты</a> - общие для всех HTML-элементов. Например, с помощью глобального атрибута "title" можно любому тегу добавить всплывающую подсказку.</p>
37
Схема слева - HTML4: чтобы не запутаться в <div>, разработчикам приходилось добавлять id или class. Схема справа - HTML5: по названию тегов понятно, какую часть сайта они представляют<em>Изображение: Майя Мальгина для Skillbox Media</em><p>Для тега <header> нет специальных атрибутов, но к нему можно применить<a>глобальные атрибуты</a> - общие для всех HTML-элементов. Например, с помощью глобального атрибута "title" можно любому тегу добавить всплывающую подсказку.</p>
38
<header title="Я - глобальный атрибут 'title'! Я покажу этот текст, когда кто-то наведёт курсор на заголовок."> <h1>Заголовок сайта</h1> </header><p>Из всех глобальных атрибутов к тегу <header> чаще всего применяют атрибут "class". В нём пишут имя, по которому можно обратиться к тегу в таблице стилей.</p>
38
<header title="Я - глобальный атрибут 'title'! Я покажу этот текст, когда кто-то наведёт курсор на заголовок."> <h1>Заголовок сайта</h1> </header><p>Из всех глобальных атрибутов к тегу <header> чаще всего применяют атрибут "class". В нём пишут имя, по которому можно обратиться к тегу в таблице стилей.</p>
39
<p>Добавим на страницу три шапки для записей в блоге. Присвоим каждой класс с именем и через таблицу стилей изменим цвет фона. Сделаем фон первой шапки красным, фон второй - жёлтым, а фон третьей - зелёным.</p>
39
<p>Добавим на страницу три шапки для записей в блоге. Присвоим каждой класс с именем и через таблицу стилей изменим цвет фона. Сделаем фон первой шапки красным, фон второй - жёлтым, а фон третьей - зелёным.</p>
40
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Articles</title> </head> <body> <main> <article> <!-- Шапка первой статьи --> <header class="header-one"> <!-- Добавляем класс для первой шапки статьи --> <h2>Заголовок первой статьи</h2> <p>Подзаголовок первой статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> <article> <!-- Шапка второй статьи --> <header class="header-two"> <!-- Добавляем класс для второй шапки статьи --> <h2>Заголовок второй статьи</h2> <p>Подзаголовок второй статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> <article> <!-- Шапка третьей статьи --> <header class="header-three"> <!-- Добавляем класс для третьей шапки статьи --> <h2>Заголовок третьей статьи</h2> <p>Подзаголовок третьей статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> </main> <footer> <p>Copyright (c) 2024. Все права защищены.</p> </footer> </body> </html>/* Стилизуем первую шапку статьи по имени класса */ .header-one { background-color: red; } /* Стилизуем вторую шапку статьи по имени класса */ .header-two { background-color: yellow; } /* Стилизуем третью шапку статьи по имени класса */ .header-three { background-color: green; }<p>Тегам можно присваивать любые имена классов -<a>HTML-спецификация</a>позволяет. Однако есть<a>рекомендация</a>: давать имена классам по названию семантических элементов. Если элемент <header>, то и класс желательно называть "header". Есть даже сайты со списками слов, которыми часто называют классы. Например,<a>Common words</a>.</p>
40
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Articles</title> </head> <body> <main> <article> <!-- Шапка первой статьи --> <header class="header-one"> <!-- Добавляем класс для первой шапки статьи --> <h2>Заголовок первой статьи</h2> <p>Подзаголовок первой статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> <article> <!-- Шапка второй статьи --> <header class="header-two"> <!-- Добавляем класс для второй шапки статьи --> <h2>Заголовок второй статьи</h2> <p>Подзаголовок второй статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> <article> <!-- Шапка третьей статьи --> <header class="header-three"> <!-- Добавляем класс для третьей шапки статьи --> <h2>Заголовок третьей статьи</h2> <p>Подзаголовок третьей статьи</p> </header> <p>Текст абзаца</p> <p>Текст абзаца</p> <p>Текст абзаца</p> </article> </main> <footer> <p>Copyright (c) 2024. Все права защищены.</p> </footer> </body> </html>/* Стилизуем первую шапку статьи по имени класса */ .header-one { background-color: red; } /* Стилизуем вторую шапку статьи по имени класса */ .header-two { background-color: yellow; } /* Стилизуем третью шапку статьи по имени класса */ .header-three { background-color: green; }<p>Тегам можно присваивать любые имена классов -<a>HTML-спецификация</a>позволяет. Однако есть<a>рекомендация</a>: давать имена классам по названию семантических элементов. Если элемент <header>, то и класс желательно называть "header". Есть даже сайты со списками слов, которыми часто называют классы. Например,<a>Common words</a>.</p>
41
<p>Общепринятые названия имён классов делают код понятным и единообразным. Для наглядности зададим классу произвольное имя, например "top-of-page-content". Альтернатива: "header". Понятное имя, которое не нужно расшифровывать.</p>
41
<p>Общепринятые названия имён классов делают код понятным и единообразным. Для наглядности зададим классу произвольное имя, например "top-of-page-content". Альтернатива: "header". Понятное имя, которое не нужно расшифровывать.</p>
42
Пример часто используемых имён классов для названий блоков страницы<em>Скриншот:<a>GitHub</a>/ Skillbox Media</em><p>При совместной разработке не всегда получается давать классам общепринятые имена. Нужны специфические названия, которые предотвращают конфликт имён между частями проекта. Для этого созданы разные методологии, например<a>БЭМ</a>от компании "Яндекс". Вёрстка по БЭМ предполагает добавление имён ко всем тегам. Если на странице несколько тегов <header>, то каждому необходим class.</p>
42
Пример часто используемых имён классов для названий блоков страницы<em>Скриншот:<a>GitHub</a>/ Skillbox Media</em><p>При совместной разработке не всегда получается давать классам общепринятые имена. Нужны специфические названия, которые предотвращают конфликт имён между частями проекта. Для этого созданы разные методологии, например<a>БЭМ</a>от компании "Яндекс". Вёрстка по БЭМ предполагает добавление имён ко всем тегам. Если на странице несколько тегов <header>, то каждому необходим class.</p>
43
<p>Имена классов должны соответствовать набору правил, которые сейчас мы рассматривать не будем. Подробно про БЭМ у нас есть отдельная статья. Однако суть подхода в том, чтобы раздробить код на самодостаточные блоки с понятными названиями. В следующем разделе мы попрактикуемся и углубимся в объяснение.</p>
43
<p>Имена классов должны соответствовать набору правил, которые сейчас мы рассматривать не будем. Подробно про БЭМ у нас есть отдельная статья. Однако суть подхода в том, чтобы раздробить код на самодостаточные блоки с понятными названиями. В следующем разделе мы попрактикуемся и углубимся в объяснение.</p>
44
Схема разметки шапки сайта по БЭМ<em>Изображение: "<a>БЭМ</a>" / "Яндекс"</em><p>Вы уже знаете, что каждый разработчик на своё усмотрение выбирает элементы для шапки сайта. На процесс вёрстки это не влияет. Однако могут появиться вложенные блоки, которые вместе с БЭМ-неймингом иногда путают новичков.</p>
44
Схема разметки шапки сайта по БЭМ<em>Изображение: "<a>БЭМ</a>" / "Яндекс"</em><p>Вы уже знаете, что каждый разработчик на своё усмотрение выбирает элементы для шапки сайта. На процесс вёрстки это не влияет. Однако могут появиться вложенные блоки, которые вместе с БЭМ-неймингом иногда путают новичков.</p>
45
<p>Мы сверстаем две шапки сайта и разберёмся, какой блок зачем нужен. В первой шапке будет логотип и меню. Во второй - меню и фоновое изображение с коротким текстом. Если захотите попрактиковаться - можете<a>скачать исходники</a>или на своё усмотрение подобрать макет. Для подбора рекомендует<a>freepik.com</a>.</p>
45
<p>Мы сверстаем две шапки сайта и разберёмся, какой блок зачем нужен. В первой шапке будет логотип и меню. Во второй - меню и фоновое изображение с коротким текстом. Если захотите попрактиковаться - можете<a>скачать исходники</a>или на своё усмотрение подобрать макет. Для подбора рекомендует<a>freepik.com</a>.</p>
46
<p>В этом разделе: план вёрстки, схема и код с комментариями.</p>
46
<p>В этом разделе: план вёрстки, схема и код с комментариями.</p>
47
<p>План вёрстки:</p>
47
<p>План вёрстки:</p>
48
<ul><li>Создаём тег <header>. В нём будет находиться всё содержимое нашей шапки.</li>
48
<ul><li>Создаём тег <header>. В нём будет находиться всё содержимое нашей шапки.</li>
49
<li>В тег <header> вкладываем тег <div> с классом "container". Этот блок нужен для ограничения ширины контента на странице - чтобы на широкоформатных мониторах сайт не растягивался. Контейнер относится к переиспользуемым блокам, которые применяют к разным разделам страницы. Поэтому он отвечает только за два свойства: за ширину и центрирование контента.</li>
49
<li>В тег <header> вкладываем тег <div> с классом "container". Этот блок нужен для ограничения ширины контента на странице - чтобы на широкоформатных мониторах сайт не растягивался. Контейнер относится к переиспользуемым блокам, которые применяют к разным разделам страницы. Поэтому он отвечает только за два свойства: за ширину и центрирование контента.</li>
50
<li>В контейнер вкладываем внутреннюю обёртку. В коде это будет тег <div> с классом "header__inner". Запись через нижнее подчёркивание - это нейминг по БЭМ. Так мы указываем, что обёртка является элементом блока <header>. К внутренней обёртке мы применим<a>технологию Flexbox</a>и сможем управлять расположением вложенных элементов.</li>
50
<li>В контейнер вкладываем внутреннюю обёртку. В коде это будет тег <div> с классом "header__inner". Запись через нижнее подчёркивание - это нейминг по БЭМ. Так мы указываем, что обёртка является элементом блока <header>. К внутренней обёртке мы применим<a>технологию Flexbox</a>и сможем управлять расположением вложенных элементов.</li>
51
<li>Помещаем логотип и меню во внутреннюю обёртку. В нашем кейсе это самодостаточные блоки, которые можно переиспользовать на странице.</li>
51
<li>Помещаем логотип и меню во внутреннюю обёртку. В нашем кейсе это самодостаточные блоки, которые можно переиспользовать на странице.</li>
52
</ul>Схема вёрстки шапки сайта с логотипом и меню<em>Изображение: Майя Мальгина для Skillbox Media</em><!-- Определяем тип HTML-документа для браузера --> <!DOCTYPE html> <!-- Задаём язык контента страницы (русский язык) --> <html lang="ru"> <head> <!-- Устанавливаем кодировку символов --> <meta charset="UTF-8" /> <!-- Добавляем настройку для адаптивности страницы на различных устройствах --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Прописываем заголовок страницы --> <title>Шапка сайта с логотипом и меню</title> <!-- Подключаем через Google Fonts шрифт Montserrat. Ссылка для выбора шрифта: https://fonts.google.com/ --> <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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" /> <!-- Подключаем нормализацию стилей для единообразного отображения страницы в разных браузерах. Ссылка для подключения: https://cdnjs.com/libraries/normalize --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> <!-- Подключаем файл со стилями --> <link rel="stylesheet" href="css/style.css" /> </head> <body> <!-- Добавляем шапку сайта --> <header class="header"> <!-- Добавляем контейнер --> <div class="container"> <!-- Добавляем внутреннюю обёртку для выравнивания логотипа и меню --> <div class="header__inner"> <!-- Создаём логотип сайта --> <a class="logo" href="#">Logo</a> <!-- С помощью списка создаём навигационное меню --> <nav class="menu"> <ul class="menu__list"> <li class="menu__list-item"> <a class="menu__list-link" href="#">Цены</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Услуги</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Скидки</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Контакты</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Блог</a> </li> </ul> </nav> </div> </div> </header> <!-- Место для основного контента на сайте --> </body> </html>Шапка сайта с логотипом и меню после добавления HTML-разметки<em>Скриншот: Skillbox Media</em>/* Определяем блочную модель */ html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } /* Убираем стандартное подчёркивание у ссылок */ a { text-decoration: none; } /* Устанавливаем минимальный размер экрана и добавляем фоновое изображение */ body { min-height: 100vh; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; font-family: "Montserrat", sans-serif; /* Используем шрифт Montserrat */ } /* Стилизуем контейнер */ .container { max-width: 1190px; padding: 0 15px; /* Увеличиваем боковые отступы */ margin: 0 auto; /* Центрируем контейнер по горизонтали */ } /* Стилизуем шапку сайта */ .header { padding-top: 30px; /* Увеличиваем верхний отступ шапки, чтобы логотип и меню не прилипали к экрану */ } /* Стилизуем внутренний контейнер шапки */ .header__inner { display: flex; /* Выстраиваем элементы внутри контейнера в строку */ justify-content: space-between; /* Распределяем элементы по ширине контейнера */ align-items: center; /* Выравниваем элементы по вертикали */ } /* Стилизуем логотип */ .logo { text-transform: uppercase; /* Преобразуем текст в верхний регистр */ font-size: 28px; /* Устанавливаем размер шрифта */ font-weight: 900; /* Устанавливаем жирное начертание шрифта */ color: #ccebfd; /* Устанавливаем цвет логотипа */ } /* Стилизуем списки меню */ .menu__list { display: flex; /* Отображаем элементы списка в строку */ list-style: none; /* Убираем стандартные маркеры (чёрные точки) */ } /* Стилизуем пункты меню */ .menu__list-item { margin-right: 20px; /* Добавляем отступ между пунктами меню */ } /* Стилизуем ссылки в меню */ .menu__list-link { padding: 10px 20px; /* Увеличиваем вертикальный и горизонтальный отступы */ font-size: 20px; /* Уменьшаем размер шрифта */ color: #dcf5fe; /* Устанавливаем цвет ссылок */ cursor: pointer; /* Задаём изменение вида курсора при наведении на пункты меню */ transition: all 0.3s; /* Добавляем плавное изменение стилей при наведении */ } /* Добавляем стилизацию ссылок в меню при наведении курсора */ .menu__list-link:hover { color: #eb3e30; /* Задаём изменение цвета ссылок при наведении курсора */ }Шапка сайта с логотипом и меню после добавления CSS-стилей<em>Изображение: pikisuperstar / Freepik / Skillbox Media</em><p>В этом кейсе шапка сайта занимает весь первый экран. Нам предстоит не просто упорядочить блоки внутри такого объёмного хедера, но и предусмотреть ситуацию, чтобы вёрстка не сломалась в случае добавления нового контента.</p>
52
</ul>Схема вёрстки шапки сайта с логотипом и меню<em>Изображение: Майя Мальгина для Skillbox Media</em><!-- Определяем тип HTML-документа для браузера --> <!DOCTYPE html> <!-- Задаём язык контента страницы (русский язык) --> <html lang="ru"> <head> <!-- Устанавливаем кодировку символов --> <meta charset="UTF-8" /> <!-- Добавляем настройку для адаптивности страницы на различных устройствах --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Прописываем заголовок страницы --> <title>Шапка сайта с логотипом и меню</title> <!-- Подключаем через Google Fonts шрифт Montserrat. Ссылка для выбора шрифта: https://fonts.google.com/ --> <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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" /> <!-- Подключаем нормализацию стилей для единообразного отображения страницы в разных браузерах. Ссылка для подключения: https://cdnjs.com/libraries/normalize --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> <!-- Подключаем файл со стилями --> <link rel="stylesheet" href="css/style.css" /> </head> <body> <!-- Добавляем шапку сайта --> <header class="header"> <!-- Добавляем контейнер --> <div class="container"> <!-- Добавляем внутреннюю обёртку для выравнивания логотипа и меню --> <div class="header__inner"> <!-- Создаём логотип сайта --> <a class="logo" href="#">Logo</a> <!-- С помощью списка создаём навигационное меню --> <nav class="menu"> <ul class="menu__list"> <li class="menu__list-item"> <a class="menu__list-link" href="#">Цены</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Услуги</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Скидки</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Контакты</a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Блог</a> </li> </ul> </nav> </div> </div> </header> <!-- Место для основного контента на сайте --> </body> </html>Шапка сайта с логотипом и меню после добавления HTML-разметки<em>Скриншот: Skillbox Media</em>/* Определяем блочную модель */ html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } /* Убираем стандартное подчёркивание у ссылок */ a { text-decoration: none; } /* Устанавливаем минимальный размер экрана и добавляем фоновое изображение */ body { min-height: 100vh; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; font-family: "Montserrat", sans-serif; /* Используем шрифт Montserrat */ } /* Стилизуем контейнер */ .container { max-width: 1190px; padding: 0 15px; /* Увеличиваем боковые отступы */ margin: 0 auto; /* Центрируем контейнер по горизонтали */ } /* Стилизуем шапку сайта */ .header { padding-top: 30px; /* Увеличиваем верхний отступ шапки, чтобы логотип и меню не прилипали к экрану */ } /* Стилизуем внутренний контейнер шапки */ .header__inner { display: flex; /* Выстраиваем элементы внутри контейнера в строку */ justify-content: space-between; /* Распределяем элементы по ширине контейнера */ align-items: center; /* Выравниваем элементы по вертикали */ } /* Стилизуем логотип */ .logo { text-transform: uppercase; /* Преобразуем текст в верхний регистр */ font-size: 28px; /* Устанавливаем размер шрифта */ font-weight: 900; /* Устанавливаем жирное начертание шрифта */ color: #ccebfd; /* Устанавливаем цвет логотипа */ } /* Стилизуем списки меню */ .menu__list { display: flex; /* Отображаем элементы списка в строку */ list-style: none; /* Убираем стандартные маркеры (чёрные точки) */ } /* Стилизуем пункты меню */ .menu__list-item { margin-right: 20px; /* Добавляем отступ между пунктами меню */ } /* Стилизуем ссылки в меню */ .menu__list-link { padding: 10px 20px; /* Увеличиваем вертикальный и горизонтальный отступы */ font-size: 20px; /* Уменьшаем размер шрифта */ color: #dcf5fe; /* Устанавливаем цвет ссылок */ cursor: pointer; /* Задаём изменение вида курсора при наведении на пункты меню */ transition: all 0.3s; /* Добавляем плавное изменение стилей при наведении */ } /* Добавляем стилизацию ссылок в меню при наведении курсора */ .menu__list-link:hover { color: #eb3e30; /* Задаём изменение цвета ссылок при наведении курсора */ }Шапка сайта с логотипом и меню после добавления CSS-стилей<em>Изображение: pikisuperstar / Freepik / Skillbox Media</em><p>В этом кейсе шапка сайта занимает весь первый экран. Нам предстоит не просто упорядочить блоки внутри такого объёмного хедера, но и предусмотреть ситуацию, чтобы вёрстка не сломалась в случае добавления нового контента.</p>
53
<p>Начнём с плана:</p>
53
<p>Начнём с плана:</p>
54
<ul><li>Создаём <header>.</li>
54
<ul><li>Создаём <header>.</li>
55
<li>Делим <header> на две зоны: верхнюю с меню и нижнюю с контентом. Верхнюю зону называем "<header__top>", а нижнюю - "<header__content>".</li>
55
<li>Делим <header> на две зоны: верхнюю с меню и нижнюю с контентом. Верхнюю зону называем "<header__top>", а нижнюю - "<header__content>".</li>
56
<li>Верстаем "<header__top>".</li>
56
<li>Верстаем "<header__top>".</li>
57
</ul><ul><li>Создаём контейнер.</li>
57
</ul><ul><li>Создаём контейнер.</li>
58
<li>В контейнере создаём внутреннюю обёртку - тег <div> с классом "header__top-inner". В макете с одним меню эта обёртка нам не понадобится. Однако если вы заходите добавить в верхнюю зону логотип или другой элемент, то к этой обёртке можно будет применить<a>Flexbox</a>.</li>
58
<li>В контейнере создаём внутреннюю обёртку - тег <div> с классом "header__top-inner". В макете с одним меню эта обёртка нам не понадобится. Однако если вы заходите добавить в верхнюю зону логотип или другой элемент, то к этой обёртке можно будет применить<a>Flexbox</a>.</li>
59
<li>Добавляем во внутреннюю обёртку меню.</li>
59
<li>Добавляем во внутреннюю обёртку меню.</li>
60
</ul><ul><li>Верстаем "<header__content>".</li>
60
</ul><ul><li>Верстаем "<header__content>".</li>
61
</ul><ul><li>Создаём контейнер.</li>
61
</ul><ul><li>Создаём контейнер.</li>
62
<li>В контейнере создаём внутреннюю обёртку. В коде это <div> с классом "header__content-inner". К обёртке мы применим<a>технологию Flexbox</a>.</li>
62
<li>В контейнере создаём внутреннюю обёртку. В коде это <div> с классом "header__content-inner". К обёртке мы применим<a>технологию Flexbox</a>.</li>
63
<li>Вкладываем во внутреннюю обёртку заголовок и иконку.</li>
63
<li>Вкладываем во внутреннюю обёртку заголовок и иконку.</li>
64
</ul>Схема вёрстки шапки сайта с меню, фоновым изображением и текстом<em>Изображение: Майя Мальгина для Skillbox Media</em><!-- Определяем тип HTML-документа для браузера --> <!DOCTYPE html> <!-- Задаём язык контента страницы (русский язык) --> <html lang="ru"> <head> <!-- Устанавливаем кодировку символов --> <meta charset="UTF-8" /> <!-- Добавляем настройку для адаптивности страницы на различных устройствах --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Прописываем заголовок страницы --> <title>Шапка сайта с меню, фоновым изображением и текстом</title> <!-- Подключаем через Google Fonts шрифт Poppins. Ссылка для выбора шрифта: https://fonts.google.com/ --> <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" /> <!-- Подключаем нормализацию стилей для единообразного отображения страницы в разных браузерах. Ссылка для подключения: https://cdnjs.com/libraries/normalize --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> <!-- Подключаем файл со стилями --> <link rel="stylesheet" href="css/style.css" /> </head> <body> <!-- Добавляем шапку сайта --> <header class="header"> <!-- Добавляем верхнюю обёртку --> <div class="header__top"> <!-- Добавляем контейнер --> <div class="container"> <!-- Добавляем верхнюю внутреннюю обёртку на случай добавления логотипа и других элементов--> <div class="header__top-inner"> <!-- С помощью списка создаём навигационное меню --> <nav class="menu"> <ul class="menu__list"> <li class="menu__list-item"> <a class="menu__list-link" href="#" >Поздравления <span></span ></a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#" >Праздники <span></span ></a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Акции <span></span></a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Подарки <span></span></a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Контакты <span></span></a> </li> </ul> </nav> </div> </div> </div> <!-- Добавляем обёртку для контента --> <div class="header__content"> <!-- Добавляем контейнер --> <div class="container"> <div class="header__content-inner"> <h1 class="header__title">Merry<br />Christmas</h1> <a class="header__icon" href="#"> <img src="/images/mouse.svg" alt="mouse icon" /> </a> </div> </div> </div> </header> </body> </html>Шапка сайта с меню, фоновым изображением и текстом после добавления HTML-разметки<em>Скриншот: Skillbox Media</em>/* Определяем блочную модель */ html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } /* Убираем стандартное подчёркивание у ссылок */ a { text-decoration: none; } /* Устанавливаем минимальный размер экрана и добавляем фоновое изображение */ body { min-height: 100vh; font-family: "Poppins", sans-serif; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } /* Стилизуем контейнер */ .container { max-width: 1190px; padding: 0 15px; /* Увеличиваем боковые отступы */ margin: 0 auto; /* Центрируем контейнер по горизонтали */ } /* Стилизуем верхнюю часть шапки */ .header__top { padding: 30px; } /* Стилизуем меню */ .menu__list { display: flex; justify-content: center; list-style: none; } .menu__list-item { margin: 0 10px; } .menu__list-link { position: relative; color: #fffee7; font-size: 1.1em; text-decoration: none; padding: 6px 20px; cursor: pointer; } .menu__list-link span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 7px; transform: scale(0); opacity: 0; transition: transform 0.5s; } .menu__list-link:hover span { transform: scale(1); opacity: 1; } /* Стилизуем обёртку для контента */ .header__content-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 80vh; } .header__title { font-size: 9em; text-align: center; -webkit-text-stroke: 1px #fff; color: transparent; background: url(/images/back-text.png); -webkit-background-clip: text; background-position: 0 0; animation: backText 20s linear infinite alternate; } /* Анимируем текст в заголовке */ @keyframes backText { 100% { background-position: 2000px 0; } }Шапка сайта с меню, фоновым изображением и текстом после добавления CSS-стилей<em>Изображение: artroomstudio / Freepik / Skillbox Media</em><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>
64
</ul>Схема вёрстки шапки сайта с меню, фоновым изображением и текстом<em>Изображение: Майя Мальгина для Skillbox Media</em><!-- Определяем тип HTML-документа для браузера --> <!DOCTYPE html> <!-- Задаём язык контента страницы (русский язык) --> <html lang="ru"> <head> <!-- Устанавливаем кодировку символов --> <meta charset="UTF-8" /> <!-- Добавляем настройку для адаптивности страницы на различных устройствах --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Прописываем заголовок страницы --> <title>Шапка сайта с меню, фоновым изображением и текстом</title> <!-- Подключаем через Google Fonts шрифт Poppins. Ссылка для выбора шрифта: https://fonts.google.com/ --> <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" /> <!-- Подключаем нормализацию стилей для единообразного отображения страницы в разных браузерах. Ссылка для подключения: https://cdnjs.com/libraries/normalize --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> <!-- Подключаем файл со стилями --> <link rel="stylesheet" href="css/style.css" /> </head> <body> <!-- Добавляем шапку сайта --> <header class="header"> <!-- Добавляем верхнюю обёртку --> <div class="header__top"> <!-- Добавляем контейнер --> <div class="container"> <!-- Добавляем верхнюю внутреннюю обёртку на случай добавления логотипа и других элементов--> <div class="header__top-inner"> <!-- С помощью списка создаём навигационное меню --> <nav class="menu"> <ul class="menu__list"> <li class="menu__list-item"> <a class="menu__list-link" href="#" >Поздравления <span></span ></a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#" >Праздники <span></span ></a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Акции <span></span></a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Подарки <span></span></a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#">Контакты <span></span></a> </li> </ul> </nav> </div> </div> </div> <!-- Добавляем обёртку для контента --> <div class="header__content"> <!-- Добавляем контейнер --> <div class="container"> <div class="header__content-inner"> <h1 class="header__title">Merry<br />Christmas</h1> <a class="header__icon" href="#"> <img src="/images/mouse.svg" alt="mouse icon" /> </a> </div> </div> </div> </header> </body> </html>Шапка сайта с меню, фоновым изображением и текстом после добавления HTML-разметки<em>Скриншот: Skillbox Media</em>/* Определяем блочную модель */ html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } /* Убираем стандартное подчёркивание у ссылок */ a { text-decoration: none; } /* Устанавливаем минимальный размер экрана и добавляем фоновое изображение */ body { min-height: 100vh; font-family: "Poppins", sans-serif; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } /* Стилизуем контейнер */ .container { max-width: 1190px; padding: 0 15px; /* Увеличиваем боковые отступы */ margin: 0 auto; /* Центрируем контейнер по горизонтали */ } /* Стилизуем верхнюю часть шапки */ .header__top { padding: 30px; } /* Стилизуем меню */ .menu__list { display: flex; justify-content: center; list-style: none; } .menu__list-item { margin: 0 10px; } .menu__list-link { position: relative; color: #fffee7; font-size: 1.1em; text-decoration: none; padding: 6px 20px; cursor: pointer; } .menu__list-link span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 7px; transform: scale(0); opacity: 0; transition: transform 0.5s; } .menu__list-link:hover span { transform: scale(1); opacity: 1; } /* Стилизуем обёртку для контента */ .header__content-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 80vh; } .header__title { font-size: 9em; text-align: center; -webkit-text-stroke: 1px #fff; color: transparent; background: url(/images/back-text.png); -webkit-background-clip: text; background-position: 0 0; animation: backText 20s linear infinite alternate; } /* Анимируем текст в заголовке */ @keyframes backText { 100% { background-position: 2000px 0; } }Шапка сайта с меню, фоновым изображением и текстом после добавления CSS-стилей<em>Изображение: artroomstudio / Freepik / Skillbox Media</em><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>