Читать книгу Шпаргалки для начинающего верстальщика HTML/CSS - Елена Эберт - Страница 11

Второй тип шапки состоит из логотипа, меню – навигации сайта и аватар пользователя или какой-либо иной информации

Логотип как правило оформляется в виде картинки:

<img src="img/Logo.png» alt=«logo» class=«logo»>

Данную картинку-логотип мы скачиваем в формате png с макета в Photoshop и Figma или другой программе, в которой работал дизайнер.

<nav> – это тег навигации сайта, в него входит меню сайта в виде списка ссылок:

<nav class=«menu-list»>

<a href=«#» class=«menu-link»> </a>

<a href=«#» class=«menu-link»> </a>

<a href=«#» class=«menu-link»> </a>

<a href=«#» class=«menu-link»> </a>

</nav>

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

Далее идет аватарка пользователя, во многом схожая с шапкой первого типа:

<div class=«user»>

<img src=«img/User Картинка» alt=«user» class=«user-icon»>

<p class=«user-text»> User </p>

</div>

В целом код шапки второго типа получился такой:

<header>

<div class=«container»>

<div class=«header»>

<img src="img/Logo.png» alt=«logo» class=«logo»>

<nav class=«menu-list»>

<a href=«#» class=«menu-link»> Menu One </a>

<a href=«#» class=«menu-link»> Menu Two </a>

<a href=«#» class=«menu-link»> Menu Three </a>

<a href=«#» class=«menu-link»> Menu Four </a>

</nav>

<div class=«user»>

<img src=«img/User icon.png» alt=«user» class=«user-icon»>

<p class=«user-text»> User </p>

</div>

</div>

</div>

</header>

Кратко опишу теги, примененные выше в коде

<a href=«»> Menu </a> – это тег ссылки. Нажимая на ссылку, мы можем перейти на другую страницу сайта или на другой сайт. В данном теге обязательно должен быть атрибут href, в него записывают адрес страницы, на которую ведет ссылка.

Лайфхак к ссылке: когда мы только пишем код, на любые ссылки необходимо ставить «затычки» #:

<a href=«#»> </a>

<nav> – используют для обозначения содержимого в форме основных навигационных ссылок. Документ может иметь несколько данных элементов, к примеру, один для навигации по сайту, а второй для навигации по странице.

<p> – определяет абзац в HTML-документе, при его отображении браузер автоматически вставляет до и после него отступы.