Шаблон №1

Шаблон №1

Ранее мы уже построили шаблон документа HTML5. Он включал в себя необходимые элементы для определения структуры нашего документа, однако для того, чтобы подготовить его к стилизации с помощью CSS и применению традиционной блочной модели, требуются некоторые усовершенствования.

Традиционная блочная модель требует наличия оберток вокруг блоков, для того чтобы их можно было размещать горизонтально. Поскольку все содержимое тела документа создается из группы блоков, которые должны быть определенным образом выровнены и подогнаны по размеру, следует всегда добавлять элемент <div> в качестве обертки.

Новый шаблон будет выглядеть так.

Листинг 2.25. Новый шаблон HTML5, готовый к добавлению стилей CSS

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<meta name="description" content^^™ пример HTML5">

<meta name="keywords" content="HTML5, CSS3, JavaScript"> ^^^>Этот текст — заголовок документа<^^^>

<link rel="stylesheet" href="mystyles. css">

</head>

<body>

<div id="wrapper">

<header id="main_header">

<И1>Это главный заголовок веб-сайта</И1>

</header>

<nav id="main_menu">

<ul>

<li>домой</li>

<li>фотографии</li>

<Н>видео</Н>

<Н>контакты</Н>

</ul>

</nav>

<section id="main_section">

<article>

<header>

<hgroup>

<h1>Заголовок статьи 1</h1>

<h2>подзаголовок статьи 1</h2>

</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>

<h1>Заголовок статьи 2</h1>

<h2>подзаголовок статьи 2</h2>

</hgroup>

<time datetime="2011-12-15" pubdate>оnубликовано 15.12.2011</time>

</header>

Это текст моей второй статьи <footer>

<p>комментарии (0)</p>

</footer>

</article>

</section>

<aside id="main_aside">

<blockquote>Статья номер один</blockquote>

<blockquote>Статья номер два</blockquote>

</aside>

<footer id="main_footer">

Copyright &copy 2010-2011 </footer>

</div>

</body>

</html>

В листинге 2.25 содержится новый шаблон, готовый к добавлению стилей. В этом коде можно заметить два важных изменения по сравнению с листингом 1.18. Во-первых, присутствует несколько элементов с атрибутами id и class. Это означает, что теперь у нас есть возможность сослаться на конкретный элемент по значению его атрибута id, а также модифицировать одновременно несколько элементов, указав в правилах CSS значение их атрибута class.

Второе важное изменение по сравнению с предыдущим шаблоном заключается в добавлении элемента <div>, упомянутого ранее. Этот элемент идентифицируется атрибутом id="wrapper", а в конце тела документа закрывается тегом </div>. Данная обертка позволяет связать блочную модель с содержимым тела документа и определить горизонтальное расположение элементов.

Сравните код из листинга 1.18 с кодом из листинга 2.25 и найдите открывающий и закрывающий теги элемента <div>, который мы добавили в качестве обертки. Также проверьте, какие элементы теперь идентифицируются атрибутом id, а какие — атрибутом class. Удостоверьтесь в том, что значения атрибутов id уникальны во всем документе.

Кроме того, вам нужно будет заменить код в созданном ранее HTML-файле кодом из листинга 2.25.

Теперь, когда HTML-документ готов, настало время создать собственную таблицу стилей.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *