Шпаргалки для начинающего верстальщика HTML/CSS

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>

<div class=«container»>

<div class=«header»>

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

<nav class=«menu-list»>