также внутри <html> должен обязательно быть тег <body>, в нем отражен основной текст, который и виден на экране браузера.
В теге <head> должны быть тег <title>, он задает название страницы, в браузере, тег <meta>, задающий кодировку страницы (в атрибуте charset, как правило, это значение utf-8).
Также перед тегом <html> пишется конструкция doctype, она указывает на версию языка HTML, на которой сделан сайт. В настоящее время актуальна версия, которую выражает <!DOCTYPE html>.
Структура любой страницы имеет общую структуру, которая в целом выглядит так:
<!DOCTYPE html>
<html lang=«en»>
<head>
<meta charset=«UTF-8»>
<meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
<title> Заголовок страницы </title>
<link rel=«stylesheet» href=«style. css»> // подключаем CSS
</head>
<body>
<header> шапка сайта </header>
<main class=«main»> основная часть </main>
<footer class=«footer»> подвал сайта </footer>
</body>
</html>
Пишем шапку сайта
Что такое шапка сайта? Это верхняя часть сайта, где размещены логотип компании, контактные данные компании и панель навигации. Рассмотрим ниже два самых распространенных типа шапки сайта.
В HTML шапку сайта оформляют с помощью тега header, это парный тег.
Тег это специальное зарезервированное слово в языке HTML, его ключевая составляющая. Именно тегом начинается код и им же заканчивается. Внутри тега располагается информация, которая отображается на веб-странице.
Теги могут быть парными и одиночными. Парный тег состоит из открывающего и закрывающего тегов. Открывающий тег изображается с помощью знаков < и ">». У закрывающего тега перед именем стоит слэш /».
Например, <header> открывающий тег, </header> закрывающий.
Как правило, в 99% случаев шапка сайта сделана стандартно, с позиции языка HTML, поэтому нам, новичкам, следует только несколько раз повторить код указанный ниже на реальных примерах, на практике, чтобы понять как данная шапка с позиции HTML устроена и идти по пути обучения верстке далее.
Начинающему верстальщику для того, чтобы лучше запомнить теги и свойства, а также чтобы лучше ориентироваться в своем коде, необходимо писать комментарии, что и как мы делаем. Комментарии в оформляются следующим образом:
<! Здесь мы пишем комментарий >
Так как контент сайта расположен по середине, а по бокам у него имеется пространство, можно предположить, что все содержимое сайта помещено в контейнер это некий блок, в которым расположена вся информация веб-страницы.
<header>
<div class=«container»> // весь контент, вся информация располагается в контейнере
</div>
</header>
Далее верстаем шапку.
Оформляем шапку сайта в HTML (тип 1)
Первый тип состоит из логотипа, формы поиска, аватар пользователя.
Стандартный 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 содержит наше форму поиска, рассмотрим ее подробнее далее.
Ширина изображения
По умолчанию изображения отображаются реальным размером, однако мы можем изменить его размер через атрибут width, который задает ширину изображению
<img src="foto.png» width=«100»>
Если мы, например, зададим ширину 100, а реальные размеры изображения были 200Х200 пикселей, то изображение станет 100Х100, так как вследствие изменения ширины, изменилась и наша высота, чтобы пропорции изображения не исказились.