Аналогично, если мы зададим высоту изображению с помощью height
<img src=" foto.png» height=«100»>
Примечание: одновременно не следует задавать и широту и высоту в <img>.
Форма поиска по сайту
Запишем отдельно общий пример формы поиска по сайту
<form>
<input type=«search»>
<input type=«submit» value=«Найти»>
</form>
form определяет форму в HTML документе. По сути данный элемент это просто контейнер, внутри которого можно разместить разные надписи, элементы управления и типы входных элементов, флажки, радио-кнопки и пр.
input ключевой элемент тега form, он определяет пользовательское поле для ввода информации. Поле ввода может принимать различный вид, который зависит от атрибута, который применен к input. К примеру, placeholder.
type указывает браузеру, к какому типу относится элемент формы.
placeholder это атрибут тега input, он указывает подсказку, которая описывает ожидаемое значение для ввода в элемент:
email (поле для адреса электронной почты)
password (поле с паролем, в котором скрываются символы)
search (текстовое поле для ввода строки поиска)
text (однострочное текстовое поле).
Пример кода:
<input type=«search» placeholder=«Поиск»>
Зачем нужны секция, контейнер и див-блоки
section (секция) это полочки, разделы, в которых размещается блок какого-то контента, данный блок объединен определенной графикой или картинкой. То есть его предназначение выделять цветовым решением или графикой определенный контент.
container (контейнер) блок, который центрует контент по середине.
Тег div является пустым универсальным контейнером, который наполняется определенным содержанием. Его цель логически объединить любой набор элементов внутри данного тега в единственном блоке.
При этом если мы зададим данному div-блоку определенный класс, то через данный класс далее мы можем вложенные элементы стилизовать средствами CSS, или динамически манипулировать ими с применением скриптов Javascript.
Зачем нужен class
Классы необходимо использовать, когда нужно определить стиль для индивидуального элемента веб-страницы или задать различные стили для одного тега. Отметим, что использовать русские буквы в именах классов нельзя.
Атрибут class указывает одно или несколько имен классов для элемента HTML. Если мы в HTML пишем элементу несколько классов, их мы должны указать просто через пробел.
<h1 class=«title-home office»>
Как видно из примера выше, если класс состоит из несколько слов, частей, то записывается оно через тире, например, title-home, title-1 и т. д.
В целом название класса можно описывать, используя различные направления и правила, ориентируясь на DOM, БЭМ и прочее. Советую вам, если интересно, почитать данную тему отдельно и для самого себя выстроить определенную систему названий, которые для вас и желательно для других разработчиков будут логичны и понятны.
Имя класса может использоваться CSS, как говорилось выше, чтобы задать различные стили для одного тега. Для того, чтобы записать стили для определенного класса, перед его именем ставят точку:
.title-home {
стили
}
В JavaScript имя класса используется для выполнения определенных задач для элементов.
Оформляем шапку сайта в HTML (тип 2)
Второй тип шапки состоит из логотипа, меню навигации сайта и аватар пользователя или какой-либо иной информации
Логотип как правило оформляется в виде картинки:
<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>