скачать книгу бесплатно
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»>
<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-документе, при его отображении браузер автоматически вставляет до и после него отступы.
Оформляем шапку первого типа в CSS
Описать универсальное оформление шапки сайта в CSS на порядок сложнее, чем в HTML, постараюсь указать основное.
Во-первых, нам нужно ограничить контейнер, то есть задать ему максимальную ширину, для каждого макета она своя, а также выравниваем содержимое данного контейнера по середине – margin: auto;
.container {
max-width: 1140px;
margin: auto;
}
В классе header можно поставить универсальное выравнивание элементов по центру, чтобы выровнять логотип соответственно прочим элементам шапки, также универсально распределение элементов органично по длине шапки и пр.
.header {
display: flex; /*выравнивание по центру по вертикали*/
align-items: center; /*раскидываем по сторонам*/
justify-content: space-between;
}
justify-cоntent: space-between; – данное свойство равномерно распределяет элементы по всей строке. Первый и последний элемент прижимаются к соответствующим краям нашего контейнера. В целом про свойство justify-content смотрите далее.
display: flex; – делает все дочерние элементы резиновыми – flex, а не блочными, как было изначально. Если родительский блок содержит, например, графические элементы, они становятся анонимными flex-элементами.
Оформим непосредственно меню, ниже указан пример, отмечу, что при работе над проектом данные вы должны смотреть в своем макете (боковая панель слева).
.menu-link {
font-size: 16px;
line-height: 24px;
color: #2E266F;
text-decoration: none;
margin-right: 45px;
}
Кратко опишу теги, примененные выше в коде
text-decoration: none; – убирает автоматическое подчеркивание в созданном нами списке
font-size: – определяет размер шрифта элемента.
line-height: – высота строки.
color: – определяет цвет текста.
Причем существует несколько цветовых моделей, через которые можно указать значение цвета.
Так зеленый цвет можно вывести в свойстве color как:
– green
– #41AB0D
