ВЁРСТКА ШАПКИ

Здравствуйте все читающие данную статью! Сегодня вы узнаете, как можно сверстать шапку (необходимую вещь любого сайта), без необходимости лишний раз узнавать новые технологии или языки (к примеру, SCSS или SASS).

Если вы прямо сейчас зайдёте в интернет и введёте «Как сверстать шапку» или как «Сделать подвал сайта», то 80% из них будут вас учить сначала правилами и необходимыми знаниями, и только потом показывать, как это делать. В своей статье я решил развернуться на 180° и сделать абсолютно наоборот: сразу показать код, а только потом показывать, что вам нужно для этого сделать. Вы, возможно, спросите: «Какая разница?» Сейчас я аргументирую такой подход:

1. На примере уже готового фрагмента вы будете видеть сразу весь «пазл» кода, а не наоборот, когда вас заставляют пытаться увидеть код, который изначально не структурирован и не готов. Это может помочь профессионалам, но не новичкам, поскольку, увы, у вас пока нет достаточного опыта.
2. Вы сможете лично для себя остановиться только на тех моментах, о которых не знали. Таким образом можно на готовом коде пропустить не нужные вам части, что очень актуально, когда вы имеете опыт программирования.
3. Это сэкономит и ваше и мое время.

Данная статья подразумевает что вы уже на базовом минимальном уровне знаете html и css. И так, начнём!

Нам нужно сверстать шапку, при этом нельзя использовать никакие вспомогательные css языки по типу (SCSS, SASS и так далее), также нам запрещено использовать bootstrap все зависимости от их версий. Что же нам делать? Ну логично что нам нужно использовать css свойства и правила, но какие? Для этого давайте определим, что такое шапка.

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

Приступаем! Для разделения элемента шапки от других элементов и создания шапки мы должны прописывать определенному селектору (селектор если грубо это на что мы указываем) правила.

Исходя из верхнего объяснения, «Шапка – это горизонтальная часть сайта». И так нам нужно сделать чтобы селектор был в горизонт, и естественно последующие элементы шли в ряд в горизонтальной плоскости. Для этого существует css правило:

display: flex;

flex-direction: row;

display – указывает на то что данный элемент будет идти в ряд, а в flex-direction мы указываем что он будет идти в горизонтальной стороне, то есть в горизонтальный ряд.

Хорошо, а куда же это вставлять? Для этого в html создаём элемент с любым названием желательно через id, почему же не class? Всё просто, id позволяет прописывать правила только для одного элемента, class для неограниченного количества раз, «А какая разница?» в том, что вы можете по ошибке лишний раз прописать данное правило другому элементу, и у вас произойдёт ошибка инициализации (обработки), и вид вашего сайта может стать похожим на сайт из 2000-x годов, что учитывая сколько изменений и требований появилось сейчас в современности (по край мере в 2022 году), на ваш сайт никто не зайдёт, а если вы фрилансер то оплату вы получите только в мечтах, но я увлёкся, в общем запомните если вы подразумеваете или собирайтесь прописывать правило только для одного элемента к примеру шапка или подвал (они же находятся в сайте в единоличном варианте) то  используйте id если для несколько, к примеру карточки товаров то class, чтобы несколько раз не переписывать правила и не растягивать ваш код, и ваше время.

И так создаём div элемент

<div id=”navbar”></div>

Прекрасно, но если сейчас вы зайдёте на ваш сайт, то вы ничего не увидите, во-первых, вы создали объект (div элементы я обычно их так называю хотя это не считается правильно) но ничего в них пока что не вставили, а во-вторых, вы же забыли подключить css файл? Каждый раз при создании css файла вы должны в обязательном порядке подключать их каждый раз в html документе.

<link rel=”style/stylesheet” href=”style.css”>

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

Теперь пора наконец то добавить элементы к нашей шапке

<div id=”navbar”>

<h1>Logo</h1>

<p>Добро пожаловать!</p>

<p>О нас</p>

<p>Ваш аккаунт</p>

<p>Ваша корзина</p>

</div>

Прописывать именно всё тег в тег необязательно, прописываете контент только тот, который нужен вам. Теперь у нас есть шапка с контентом (корзиной, о нас, ваш аккаунт, и с подписью названия компании (логотип)).

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

# = id для html

#navbar{

display: flex;

flex-direction: row;

align-items: center – элементы с первого начинают идти с центра экрана монитора (сайта).

text-align: center – текст центрированный, это нужно для того чтобы текст был одинаково похож на друг друга на горизонтальной плоскости

justify-content: center – расположение самих элементов идёт с центра, заметьте, это не тоже самое что align-items, align-items всего лишь прописывает расположение элементов по отношению к друг другу, и какое отношение по расположению они должны иметь к друг другу, а justify-content указывает расположение по всей горизонтальной поверхностей в самом главном элементе (navbar).

flex-wrap: wrap – очень важное css правило которое сильно облегчит вам жизнь когда вы будете тестировать ваш сайт на разных разрешениях экранов. Не устройств, для сайта нету разницы на каком устройстве вы находитесь, его «интересует» лишь ваш размер экрана в ширину и высоту.

background-color: green – для примера мы поставим всему нашему объекту зелёный цвет.

color: white – Ставим цвет текста белый.

font-size: 25px – увеличиваем размер текста на 25 пикселей.

font-weight: bold – по желанию, устанавливает лёгкую жирность тексту.

}

#navbar p{

margin: 25px; - это нужно для того чтобы каждый элемент p «отодвинулся» по отношению к друг другу.

}

Как должен выглядеть весь наш css файл

#navbar{

display: flex;

flex-direction: row;

align-item: center;

text-align: center;

justify-content: center;

flex-wrap: wrap;

background-color: green;

color: white;

font-size: 25px;

font-weight: bold (по желанию)

}

#navbar p{

margin: 25px;

Как должен выглядеть наш html документ

<div id=”navbar”>

<h1>Logo</h1>

<p>Добро пожаловать!</p>

<p>О нас</p>

<p>Ваш аккаунт</p>

<p>Ваша корзина</p>

</div>

В принципе этих базовых правил вам хватит для создания вашей первой шапки. Удачи в ваших начинаниях!

Список литературы:

1. Быков В.П. Визуальное обеспечение сайта. — Изд-во Информационные технологии, 2019 ISBN: 5-217-00556-4
2. ГОСТ Р 34.601-20 Информационные технологии. Комплекс стандартов на автоматизированные системы. Автоматизированные системы. Стадии создания
3. ГОСТ Р 57647-24765-2020 Systems and software engineering — Vocabulary. — 2020.
4. Тарасик В.П. Компьютерное моделирование технических систем. Учебник для вузов. — Изд-во Дизайн-ПРО, 2021. 640 с.