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

должны быть тег , он задает название страницы, в браузере, тег , задающий кодировку страницы (в атрибуте charset, как правило, это значение utf-8).

Также перед тегом пишется конструкция doctype, она указывает на версию языка HTML, на которой сделан сайт. В настоящее время актуальна версия, которую выражает .

Структура любой страницы имеет общую структуру, которая в целом выглядит так:

// подключаем CSS

шапка сайта основная часть подвал сайта

Что такое шапка сайта? Это верхняя часть сайта, где размещены логотип компании, контактные данные компании и панель навигации. Рассмотрим ниже два самых распространенных типа шапки сайта.

В HTML шапку сайта оформляют с помощью тега header, это парный тег.

Тег – это специальное зарезервированное слово в языке HTML, его ключевая составляющая. Именно тегом начинается код и им же заканчивается. Внутри тега располагается информация, которая отображается на веб-странице.

Теги могут быть парными и одиночными. Парный тег состоит из открывающего и закрывающего тегов. Открывающий тег изображается с помощью знаков “ <���” и ">». У закрывающего тега перед именем стоит слэш “/».

Например,

– открывающий тег, – закрывающий.

Как правило, в 99% случаев шапка сайта сделана стандартно, с позиции языка HTML, поэтому нам, новичкам, следует только несколько раз повторить код указанный ниже на реальных примерах, на практике, чтобы понять как данная шапка с позиции HTML устроена и идти по пути обучения верстке далее.

Начинающему верстальщику для того, чтобы лучше запомнить теги и свойства, а также чтобы лучше ориентироваться в своем коде, необходимо писать комментарии, что и как мы делаем. Комментарии в оформляются следующим образом:

Так как контент сайта расположен по середине, а по бокам у него имеется пространство, можно предположить, что все содержимое сайта помещено в контейнер – это некий блок, в которым расположена вся информация веб-страницы.

Далее верстаем шапку.

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

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

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

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

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

Пример кода:

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

По умолчанию изображения отображаются реальным размером, однако мы можем изменить его размер через атрибут width, который задает ширину изображению

Примечание: одновременно не следует задавать и широту и высоту в .

Запишем отдельно общий пример формы поиска по сайту

form – определяет форму в HTML документе. По сути данный элемент – это просто контейнер, внутри которого можно разместить разные надписи, элементы управления и типы входных элементов, флажки, радио-кнопки и пр.

input – ключевой элемент тега form, он определяет пользовательское поле для ввода информации. Поле ввода может принимать различный вид, который зависит от атрибута, который применен к input. К примеру, placeholder.

type – указывает браузеру, к какому типу относится элемент формы.

placeholder – это атрибут тега input, он указывает подсказку, которая описывает ожидаемое значение для ввода в элемент:

– email (поле для адреса электронной почты)

– password (поле с паролем, в котором скрываются символы)

– search (текстовое поле для ввода строки поиска)

– text (однострочное текстовое поле).

Пример кода:

section (секция) – это полочки, разделы, в которых размещается блок какого-то контента, данный блок объединен определенной графикой или картинкой. То есть его предназначение – выделять цветовым решением или графикой определенный контент.

Читать дальше