Простой минималистичный шаблон HTML5 для создания сайта
11.12.2021 Программирование
При создании сайта с нуля, вам необходима будет верстка (шаблон) сайта. Можно взять готовый сверстанный шаблон сайта, но тут есть проблемы, вам придется переделывать его под себя. По этому наилучшим выходом будет взять просто готовый шаблон верстки сайта с использованием стандарта HTML5.
Большинство сайтов состоят из следующих блоков: шапки, контентной зоны, сайдбара и подвала. Т.е. базовая часть верстки сайта представляет из себя такой вот каркас:
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Мой шаблон HTML5</title> </head> <body> Простой пример верстки сайта </body> </html>
Основные блоки сайта
В HTML5 введено несколько новых тегов: <article>, <aside>, <footer>, <section>, <header>, <nav>, которые заменяют в некоторых случаях привычный тег <div>.
Использование тегов в блоках
Для «шапки» (верхняя часть сайта) обычно используют тег <header>, в это блоке обычно находятся логотип сайта и часть меню. Для блока «контентная зона» используется тег <article>, который как раз и отвечает за содержимое сайта. Для «сайдбар» используется тег <aside> Для подвала используется тег <footer> Для других блоков обычно используют <section>
Тег <nav>, используется для меню и обычно используется внутри выше перечисленных тегов.
Шаблон HTML5
С учетом выше перечисленных подходов у нас получается вот такая вот заготовка верстки под наш сайт:
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Мой сайта</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header>Шапка сайта</header> <aside> Сайдбар <section> Какой то блок в сайдбаре <section> </aside> <article> <nav>Меню навигации</nav> Контентая зона </article> <footer> Подвал сайта </footer> </body> </html>
css" />
</head>
<body>
<header>Шапка сайта</header>
<aside>
Сайдбар
<section>
Какой то блок в сайдбаре
<section>
</aside>
<article>
<nav>Меню навигации</nav>
Контентая зона
</article>
<footer>
Подвал сайта
</footer>
</body>
</html>
На основании этого шаблона уже можно дальше выстраивать сайт, добавляя новые блоки в структуру шаблона.
Упрощение написания DOCTYPE
Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Теперь же запись минимальна, проще, наверное некуда :
<!doctype html>
Похожие упрощения произошли и с остальными тегами, так что переход на стандарт HTML5 существенно облегчает написание.
Необязательные теги в HTML5
Новый стандарт принес много послаблений верстальщикам.
Трактовка русского языка lang=»ru» как основного языка HTML документа
Тег определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.
В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».
Шаблон №1 | Учебник HTML5
Шаблон №1
Ранее мы уже построили шаблон документа HTML5.
>
<link rel=»stylesheet» href=»mystyles. css»>
</head>
<body>
<div>
<header>
<И1>Это главный заголовок веб-сайта</И1>
</header>
<nav>
<ul>
<li>домой</li>
<li>фотографии</li>
<Н>видео</Н>
<Н>контакты</Н>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h2>Заголовок статьи 1</h2>
<h3>подзаголовок статьи 1</h3>
</hgroup>
<time datetime=»2011-12-10″ pubdate>оnубликовано 10.12.2011</time>
</header>
Этот текст моей первой статьи <figure>
<img src=»http://minkbooks.com/content/myimage.jpg»> <figcaption>
Это изображение для первой статьи </figcaption>
</figure>
<footer>
<p>комментарии (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h2>Заголовок статьи 2</h2>
<h3>подзаголовок статьи 2</h3>
</hgroup>
<time datetime=»2011-12-15″ pubdate>оnубликовано 15.
12.2011</time>
</header>
Это текст моей второй статьи <footer>
<p>комментарии (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Статья номер один</blockquote>
<blockquote>Статья номер два</blockquote>
</aside>
<footer>
Copyright © 2010-2011 </footer>
</div>
</body>
</html>
В листинге 2.25 содержится новый шаблон, готовый к добавлению стилей. В этом коде можно заметить два важных изменения по сравнению с листингом 1.18. Во-первых, присутствует несколько элементов с атрибутами id и class. Это означает, что теперь у нас есть возможность сослаться на конкретный элемент по значению его атрибута id, а также модифицировать одновременно несколько элементов, указав в правилах CSS значение их атрибута class.
Второе важное изменение по сравнению с предыдущим шаблоном заключается в добавлении элемента <div>, упомянутого ранее.
Этот элемент идентифицируется атрибутом, а в конце тела документа закрывается тегом </div>. Данная обертка позволяет связать блочную модель с содержимым тела документа и определить горизонтальное расположение элементов.
Сравните код из листинга 1.18 с кодом из листинга 2.25 и найдите открывающий и закрывающий теги элемента <div>, который мы добавили в качестве обертки. Также проверьте, какие элементы теперь идентифицируются атрибутом id, а какие — атрибутом class. Удостоверьтесь в том, что значения атрибутов id уникальны во всем документе.
Кроме того, вам нужно будет заменить код в созданном ранее HTML-файле кодом из листинга 2.25.
Теперь, когда HTML-документ готов, настало время создать собственную таблицу стилей.
шаблонов HTML
Все эти HTML-шаблоны можно загрузить бесплатно и использовать по своему усмотрению. Большинство из них являются шаблонами HTML5. Шаблоны HTML5 используют элементы, которые были представлены в HTML5, такие как
, , ,