Давайте начнем создание шапки нашего сайта и первое, что мы сделаем - это создадим простой html-файл, который будет содержать html-каркас для будущей шапки сайта.
Давайте назовем этот файл index.html и вставим в него базовую html разметку.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
И в элементе body, создаем каркас для будущей шапки. Первый элемент, который нам понадобиться - это элемент section. Этим элементом мы сообщаем о том, что мы создаем некий раздел на веб-странице и этот раздел будет являться нашей шапкой.
<section class="header"> <div class="header-body"> <div class="container"> <h1>Заголовок</h1> <h2>Подзаголовок</h2> </div> </div> </section>
И давайте добавим для этого раздела class = "header" и внутри создадим блок div c классом header-body. Т.е. это будет внутреннее содержимое шапки сайта. Оно нужно для того, чтобы в будущем мы могли создать внутренние отступы от содержимого, которое будет находится в этой шапке. Это основное назначение этого блока.
И внутри блока header-body создаем еще один блок div container. Этот блок будет нужен для того, чтобы адаптировать отображение содержимого внутри шапки на мобильных устройствах.
Контейнер - это область которая будет ограничивать размеры того пространства, которое будет занимать внутреннее содержимое шапки, чтобы текст удобнее читался на больших мониторах и на малых. Он будет у нас ограничивать ширину содержимого, которое будет находится внутри элемента header.
И внутри размещаем заголовок и подзаголовок.
Это вся разметка, которая нужна пока на этом этапе.
Сделайте такую же структуру у себя, чтобы мы могли работать в следующих видео с одними и теми же классами, чтобы у нас был одинаковый результат.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти
Или зарегистрируйтесь через социальные сети: