На главной странице любого Интернет-ресурса присутствует так называемая «шапка», где размещены основные категории сайта. Именно с нее и начинается верстка, ведь код идет снизу-вверх, а наверху располагается только «шапка». Но как же ее создать? И как разместить в ней основные блоки с категориями? Для этого нужно иметь чёткий план по созданию сайта.

HTML

Стоит знать, что каждый код HTML начинается с<!DOCTYPE HTML!>. Это значит, что данная страница сделана с помощью HTML-кода. Далее идет двойной тег <html>. В нем расположено все наполнение сайта.

Не будем останавливаться на разделе <head> и сразу перейдем к <body> – «телу» сайта.

Как написать «шапку»?

При создании и оформлении шапки используется парный тег <div>. Он говорит браузеру о блоках, где размещена разная информация. Хоть он и используется везде, для более конкретного предназначения ему задают классы, которые и обозначают ту или иную функцию тега.

Чтобы в общем обозначить «шапку» сайта, используется класс <pageheader>, в котором пишутся два других класса:

.header-top – данный класс используется для обозначения верхней шапки сайта (логотип, категории и так далее);
.promo – этот класс используется для рекламных блоков. Например, если девиз сайта «Не смотри, а покупай!», то он будет расположен здесь.

Важно! HTML-код должен быть сохранен на компьютере под названием index.html. Так браузеру будет проще его просматривать.

Внимание! Для просмотра полученной работы лучше использовать такие браузера: Google Chrome, Mozila Firefoks, Internet Explower. Они не выдают ошибки в случае неправильного написания кода.

Доктайп, заголовок, кодировка и подключение внешних стилей

Все эти элементы пишутся при создании шапки. Почему? Все очень просто! Для определения языка страницы предназначен атрибут lang, который пишется у тега <html>. Ну, а так как этот тег второй в кодировке сайта, соответственно, и определение языка расположено наверху.

Определение языка нужно обязательно использовать, так как без него браузер не сможет определить язык страницы и переводчик или голосовой перевод не сможет выполнить свою функцию. Поэтому к тегу <html> нужно дописать lang=”язык страницы (ru, en и так далее)”. Это и не сложно, и поднимет сайт по сравнению с другими «не определенными» страницами.

При прописывании кодировки важно помнить, что писать ее нужно над заголовком, потому что если ее написать ниже, то браузер не сможет прочесть, что расположено в <title>. Она задается с помощью кода utf-8.