Верстаем на html5

Статья № 5.

Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами.

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

В этом разделе мы:

Cоздадим страницу по стандарту HTML5.
Bоспользуемся новыми семантическими элементами.
Проверим как выводится готовый шаблон на странице.
Немного порисуем на CSS.

Готовим каркас страницы и делим его на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа.
Создайте простой текстовый файл index.html, в кодировке utf-8.

Первая строка — пишем тип документа. Вторая строка — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский. Переходим к заголовку. Указываем — кодировку символов документа. Затем заголовок, для окна браузера. Подключаем файл стиля. В конце, добавим пустой контейнер тела документа.

Листинг 1. Базовая структура документа HTML5

<<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8" />
		<title>Верстаем в HTML5</title>
		<link rel="stylesheet" href="styles.css" />
	</head>
	<body>

	</body>
</html>

Каркас готов, далее — семантические элементы страницы.

Делаем разметку контента

Разместим блоки в контейнере <body></body>. Будем придерживаться следующей последовательности этих элементов:

header
hgroup
nav
article
header
content
section
header
content
footer

В начале у нас будет блок который отвечает за заголовок страницы. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer, в котором мы разместим дополнительную информацию о контенте наших страниц.

Следует отметить, что новые элементы html5 имеют инлайновую природу, т.е. для корректного отображения их необходимо сделать блоками.

Листинг 2. Размещение семантических блоков HTML5

Здесь не приводим полный код страницы, а только то, что должно быть между тегами <body> бла…бла…бла </body>.

<header class="mainH">
	<hgroup>
		<h1>Вёрстка страницы в HTML5</h1>
		<h2>Урок номер 5 Вёрстка</h2>
	</hgroup>
</header>

<nav>
	<ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#">Новости</a></li>
		<li><a href="#">Статьи</a></li>
		<li><a href="#">Рубрики</a></li>
	    <li><a href="#">Уроки HTML</a></li>
		<li><a href="#">Обучение CSS3</a></li>
		<li><a href="#">Обратная связь</a></li>
		<li><a href="#">Контакты</a></li>
		<li><a href="#">О нас</a></li>
	</ul>
</nav>

<article>
	<header>
		<time datetime="2020-08-26" pubdate>
			<span>ИЮНЬ</span> 26
		</time>
		<h1>
			<a href="#" title="Ссылка на новость" rel="bookmark">
				Верстка на HTML5 — разработка быстрее, а код гибче
			</a>
		</h1>
	</header>
	<p>В элементе head мы сначала определяем набор символов и добавляем заглавие. 
	Весьма стандартно, без кавычек. 
	Двигаясь дальше, вставляем условный комментарий, внутрь которого 
	загружаем файл JavaScript, который поможет нам работать 
	с Internet Explorer (IE) 8 и более ранними его версиями</p>
	<p>Условный комментарий – это вид HTML-комментария, который 
	Microsoft использует 
	в IE, по сути, для реализации отдельных (или всех) версий своего браузера. </p>
	<p>Используемый нами здесь комментарий проверяет, является ли браузер, 
	открывающий страницу, Internet Explorer’ом с номером версии менее 9. 
	Другой комментарий, который мы бы использовали, 
	это: < !-- [if lte IE 8] -- >; он проверил бы, является ли открывающий страницу 
	браузер IE версией ниже или равной 
	8. По существу, между этими двумя комментариями нет разницы; 
	они оба направлены на один ряд версий IE, 
	так что можете взять любой.
 <figure><img src="/menu/images/big5.jpg" width="300" alt="HTML5" title="html5"></figure>
	<section>
		<header>
			<h1>Заключение:</h1>
		</header>
		<p>Итак, вот и подошла к завершению первая часть нашей 
		статьи посвящённой верстке сайта на HTML5 и CSS3. 
		Я старался сделать ее настолько короткой, насколько можно, и не тратить 
		слишком много времени на неопределенности в спецификации HTML5, 
		потому что она еще не закончена. 
        Тем временем нам придется полагаться на сообщество и труд «лекарей» HTML5, 
        что станут нашими проводниками по внедрению новых элементов в сайты.
        Спасибо за прочтение и не пропустите вторую часть статьи, где мы обсудим свойства 
        CSS3, используемые для декорирования разметки.</p>
	</section>
</article>

<footer>
	<p>&copy; Powered by Soven 2006-2020</p>
</footer>

Подключаем файл стилей сss

В файле стилей styles.css первое что надо сделать это определиться со шрифтом для всего документа. Лучший шрифт который воспринимается с экрана монитора, это тот у которого нет засечек. Такие шрифты называют sans-serif — (без засечек). К ним относятся, например: Arial, Helvetica, Verdana.

Далее мы добавили такие параметры как:

box-shadow-Данный параметр указывается для блочного элемента страницы, и создаёт тень вокруг него.

text-shadow-Этот параметр по своим настройкам похож на предыдущий, отличие только в отсутствии разброса тени и внутренней тени.

border-radius (-moz-border-radius, -webkit-border-radius)-Радиус скругления у блоков. Углов у блока может быть четыре, соответственно и элементов у этого параметра может быть столько же. Перечисляются по часовой стрелки начиная от верхнего левого угла.

Этот код, вам нужно поместить в файл styles.css.

Листинг 3. CSS для новых семантических элементов HTML5

* {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
 
body {
    width: 960px; margin: 0px auto;
}
 
header.mainH {
    -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
    -webkit-box-shadow: 0 3px 5px 0 #0026FF; 
    -moz-box-shadow: 0 3px 5px 0 #0026FF; box-shadow: 0 3px 5px 0 #0026FF;
    padding: 5px;
    text-align: center;
}
 
header h1 {
    font-size: 36px; margin: 0px;
}
 
header h2 {
    font-size: 18px; margin: 0px; color: #888;
    font-style: italic;
}
 
nav ul {
    list-style: none; padding: 0px; display: block;
    clear: right; background-color: #0094FF;
    padding-left: 4px; height: 24px;
    -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
}
 
nav ul li {
    display: inline; padding: 0px 20px 5px 10px;
    height: 24px; border-right: 1px solid #ccc;
}
 
nav ul li a {
    color: #000000; text-decoration: none;
    font-size: 13px; font-weight: bold;
}
 
nav ul li a:hover {
    color: #fff;
}
 
article > header time {
    font-size: 18px; display: block; width: 36px;
    padding: 2px; text-align: center; background-color: #303030;
    color: #fff; font-weight: bold; -moz-border-radius: 6px;
    -webkit-border-radius: 6px; border-radius: 6px; float: left;
    margin-bottom: 10px;
}
 
article > header time span {
    font-size: 10px; font-weight: normal;
    text-transform: uppercase;
}
 
article > header h1 {
    font-size: 20px; float: left;
    margin-left: 14px; text-shadow: 2px 2px 1px #FFFFFF, 2px 2px 5px #888;
}
 
article > header h1 a {
    color: #303030;
    text-decoration: none;
}
 
article > section header h1 {
    font-size: 16px;
}
 
article p {
    clear: both;
}
 
footer p {
    text-align: center; font-size: 12px;
    color: #888; margin-top: 24px;
}
 
article > section {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius:6px 0 0 0;
    border-radius: 6px 0 0 0;
    box-shadow: 3px 3px 3px 0 #0026FF inset;
    padding: 5px;
    color: #801938;
    margin-top: 40px;
}

Посмотреть пример работы страницы можно ЗДЕСЬ.

В этом разделе мы научились создавать страницу по стандарту HTML5.

Читайте также:

Создано: 26.07.2020.|Обновлено: 21.12.2022.