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

Первый тип состоит из логотипа, формы поиска, аватар пользователя.

Стандартный HTML-код для первого типа шапки сайта будет выглядеть так:

<header class=«header»>

<div class=«logo»> Логотип </div>

<! – Здесь форма поиска – >

<form action=" " class=«search»>

<input type=«search» class=«search-input» placeholder=«Поиск»>

<button type=«submet» class=«search-button»>

<img src="img/search-icon.svg» alt=«search-icon»>

</button>

</form>

<! – Здесь аватар пользователя – >

<div class=«user»>

<img src=«img/Изображение – Иконка.svg» alt=«bookmark» class=«bookmark»>

<img src=«img/Аватарка пользователя.png» alt=«avatar» class=«avatar»>

</div>

</header>

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

button – данный тег создает кликабельную кнопку.

img – добавляет на веб-страницу HTML-изображения. Это одиночный тег. У него есть обязательный атрибут src, который указывает путь к изображению, и необязательный атрибут alt, который содержит в себе резервный контент. То есть если на веб-странице по какой-либо причине не откроется изображение, на ней будет указана информация, которую содержит атрибут alt.

Пример кода:

<img src=«img/Иконка (или фотография).svg» alt=«Иконка (Фото)»>

form содержит наше форму поиска, рассмотрим ее подробнее далее.