УРОК 2. СОЗДАЕМ ШАБЛОН САЙТА
ОСНОВНЫЕ БЛОКИ
Современные сайты конструируются по принципу блочной верстки.
В HTML5 появились новые элементы, помогающие определять разные части документа и упорядочить его структуру. В HTML5 документ (в отличии от предыдущих версий) делится на несколько основных разделов, и структура сайта практически не зависит от тегов <div> и <table>.
Ключевые слова, используемые в тегах, выбранные для каждого элемента, дают подсказку относительно его назначения.
Большинство современных сайтов построены по следующему шаблону:
Верхняя область сайта (Заголовке), как правило, содержит логотип, название организации, контактную информацию и т.п.
Под заголовком находится меню навигации
В Боковой панели могут содержатся ссылки, виджеты, вертикальное меню и прочее.
В нижней части шаблона (футере) обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация.
С учетом новых элементов HTML5 шаблон будет такой
<header> — ШАПКА
Один из новых элементов HTML5. В отличии от тега <head>, который предназначен для хранения информации обо всем документе, <header> используется только для тела документа или для его разделов. В блоке находится логотип организации, её наименование, контакты и ряд других элементов. См. пример шапки магазина «Эльдорадо»
Зададим заголовок сайта
h1 – заголовок первого уровня
<nav> — НАВИГАЦИЯ
Тег меню сайта <nav> находит после тега <header>. Элемент <nav> предназначен для определения навигационных элементов (главное меню или другие элементы навигации). Используйте его только для этих целей.
Сформируем код меню
Внутри <nav> используются 2 тега:
<ul> — тег списка
<li> — тег элементов списка
<section> — ОСНОВНАЯ ИНФОРМАЦИЯ
В этом блоке находится основной контент страницы (текст, фото, видео)
<aside> — БОКОВАЯ ПАНЕЛЬ
Блок <aside> может располагаться справа и слева, содержать дополнительное меню, баннеры или виджеты. См. пример боковой панели
В нашем случае он будет находиться под блоком <section>.
<footer> — ПОДВАЛ
Подвал (или «футер») — это часть сайта, где обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация, ставится метрика.
Тэг подвала <footer>
Основные блоки шаблона мы прописали