Применение HTML5 на практике

Теперь, после знакомства с тегами HTML5, продолжим изменять наш сайт lionindesert.ru с XHTML на HTML5. Верхняя часть для всех страниц будет идентичной, за исключением тега <title>, он

определяет заголовок страницы. В примере 9.14 показано содержимое тега <head>.

Пример 9.14. Тег <head>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Как поймать льва в пустыне?</title> <link rel="stylesheet" href="style.css" /> <!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

</head>

Здесь применяется сокращённая форма тега <meta> для указания кодировки и <link> для ссылки на стилевой файл. Для браузера IE до версии 8.0 включительно работает скрипт, чтобы IE распознавал новые теги HTML5.

Заголовок сайта с тегом <header> был показан в примере 9.2, поэтому перейдём непосредственно к

основной части главной странице. На ней располагаются ссылки на страницы с их описанием. Оформим их с помощью тегов <section> и <header> (пример 9.15).

Пример 9.15. Ссылки в основной части

<section>

<header><h1><a href="assumption.html">Допущения</a></h1></header> <p>Для упрощения расчетов некоторые реальные величины заменяются их приближенным аналогом, которые хотя и влияют на точность

результата, находятся в пределах допустимой погрешности вычисления.</p>

</section>

<section>

<header><h1><a href="simple-iteration.html">Метод простых итераций</a></h1></header>

<p>Самый простой метод поиска льва основанный на переборе.</p>

</section>

Каждый блок со ссылкой и её описанием обрамлён тегом <section>, сама ссылка располагается внутри тега <h1>, который в свою очередь находится внутри <header>. Такая логика может показаться странной — зачем нам <header>, когда на странице он уже есть, и к чему столько тегов <h1>? В HTML5

своя логика построения структуры документа, которая отличается от привычной схемы HTML4. В предыдущей версии HTML иерархия блоков строилась на основе тегов <h1>...<h6>. Соответственно, <h1> задавал заголовок страницы, <h2> и <h3> подзаголовки. Чтобы схема документа строилась правильно, на странице должен быть только один <h1>. Спецификация HTML5 устанавливает алгоритм

генерации схемы документа, включающий в себя новые семантические теги. Этот алгоритм говорит, что теги <article> и <section> создают новый раздел. А в HTML5 каждый раздел может содержать собственный тег <h1>.

Проверить схему построения документа HTML можно с помощью сервиса HTML5 Outliner. Вы загружаете HTML-файл для проверки, либо указываете его адрес. Результат проверки показан на рис. 9.1.

Рис. 9.1. Схема документа

Под «Untitled Section» подразумевается первый <header>, в котором находится заголовок сайта. В нём

нет текста, только картинка с названием сайта, поэтому раздел озаглавлен «неназванным». Остальные разделы получены от тегов <h1> расположенных внутри <section>.

Переходим к подвалу, здесь аналогично шапке, мы вставляем тег <footer>, как показано в примере 9.16.

Пример 9.16. Подвал страницы

<footer>

<div class="lion"><img src="images/lion.png" alt="" width="130" height="80" /></div>

<div class="footer-bg"> <div class="copyright">

<p><strong>Учебный сайт «Как поймать льва в пустыне»</strong></p> <p>© Влад Мержевич</p>

</div>

</div>

</footer>

Теперь собираем вместе все наши разделы и получаем окончательный код главной страницы сайта

(пример 9.17).

Пример 9.17. Главная страница HTML 5 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Как поймать льва в пустыне?</title> <link rel="stylesheet" href="style.css" /> <!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

</head>

<body>

<header>

<div class="header-bg">

<img src="images/header-title.png" alt="Как поймать льва в пустыне" width="456" height="166" />

</div>

</header>

<div class="content-gradient"> <div class="content-bg">

<div class="content-white">

<p>Перед вами учебный сайт для демонстрации возможностей HTML и CSS по созданию своего ресурса и его публикации в Интернете. Поскольку любой сайт должен содержать полезную или интересную информацию, мы выбрали тему ловли льва в пустыне, которая будет, без всяких сомнений, полезна любому посетителю. Так, на всякий случай.</p>

<section class="warning">

<header><h1><img src="images/warning-title.png" alt="Предупреждение" width="137" height="30" /></h1></header>

<p>Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Авторы не гарантируют вашей безопасности при их использовании и снимают с

себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!</p>

</section>

<section>

<header><h1><a href="assumption.html">Допущения</a></h1></header> <p>Для упрощения расчетов некоторые реальные величины заменяются их

приближенным аналогом, которые хотя и влияют на точность результата, находятся в пределах допустимой погрешности вычисления.</p>

</section>

</div>

</div>

</div>

<footer>

<div class="lion"><img src="images/lion.png" alt="" width="130" height="80" /></div>

<div class="footer-bg"> <div class="copyright">

<p><strong>Учебный сайт «Как поймать льва в пустыне»</strong></p> <p>© Влад Мержевич</p>

</div>

</div>

</footer>

</body>

</html>

Код HTML завершён, но страница находится в совершенно непотребном виде из-за введения новых тегов. Поэтому необходимо также отредактировать стилевой файл style.css и внести в него необходимые изменения.

Для начала необходимо указать, что теги <header>, <section>, <footer>, <aside>, <nav>,

<article> являются блочными. Это необходимо для корректного применения к ним стилей.

header, section, footer, aside, nav, article { }display: block; /* Блочный элемент */

Класс header меняем на селектор header, а класс footer на footer.

header {

}background: #00B0D8 url(images/header-gradient.png) repeat-x; /* Градиент */

footer {

background: url(images/grass.png) 50% 53px no-repeat; /* Фоновый рисунок */ margin-top: -77px; /* Поднимаем вверх */

overflow: auto; /* Отменяем схлопывающиеся отступы */ }position: relative; /* Относительное позиционирование */

На этом основные разделы сайта приобретают задуманный вид. Неприятность поджидает с тегом

<section> (рис. 9.2).

Рис. 9.2. Вид заголовка раздела

Тег <header> используется внутри <section> и для него работает тот же стиль, что и для шапки

страницы, поэтому виден тот же голубой фон. Для начала необходимо избавиться от фона, не затрагивая при этом шапку. Так как <header> родительским элементом выступает <section>, то

добавим такой стиль.

section header {

}background: none; /* Убираем фон */

Фон исчезает, но картинка с надписью «Предупреждение» сдвинута вниз. На неё действует селектор header img, поэтому для изображения header-title.png требуется ввести отдельный класс и применять стиль для него, либо изменить контекст применения стиля. Для этого меняем селектор на .header-bg

img.

.header-bg img {

position: relative; /* Относительное позиционирование */ }top: 40px; /* Сдвигаем картинку вниз */

Остаётся только изменить размер текста <h1> в заголовке.

section h1 {

font-size: 1.5em; /* Размер текста */ font-weight: normal; /* Нормальное начертание */

}margin-bottom: 0; /* Отступ снизу */

Переходим от главной странице к остальным. Они содержат контент слева, сайдбар справа и навигацию в нём. Тег <div class="sidebar"> меняем на <aside>, а в стилях класс sidebar на селектор aside.

aside {

width: 200px; /* Ширина правой колонки */

}float: right; /* Обтекание */

Аналогичное действие проделываем с контентом, <div class="content"> заменяем на <article>, а в стилях класс content на селектор article.

article {

}margin-right: 240px; /* Отступ справа */

Теперь навигация. Она сделана в виде списка (тег <ul>), а нам нужен тег <nav>. Поэтому используем такое вложение.

В этом случае соблюдается семантика кода и не придётся жертвовать нашим уже настроенным списком.

Окончательно основная часть внутренней страницы представлена в примере 9.18.

Пример 9.18. Внутренняя страница

<div class="content-gradient"> <div class="content-bg">

<div class="content-white">

<aside>

<nav>

<ul class="menu">

<li><a href="/">Главная страница</a></li>

<li class="current"><span>Допущения</span></li>

<li><a href="simple-iteration.html">Метод простых итераций</a></li> <li><a href="random-number.html">Метод случайных чисел</a></li> <li><a href="dixotomia.html">Метод дихотомии</a></li>

<li><a href="golden-section.html">Метод золотого сечения</a></li>

</ul>

</nav>

<div class="interest">

<h3><img src="images/interest-title.png" alt="Интересная информация" width="164" height="30" /></h3>

<p>Средний самец льва имеет длину около трех метров и весит от 180 до 230 килограмм.</p>

<p>Львы питаются не только убитыми животными, они также не брезгуют падалью.</p>

</div>

</aside>

<article> <h1>Допущения</h1>

<p>Для упрощения расчетов некоторые реальные величины заменяются их приближенным аналогом, которые хотя и влияют на точность результата, находятся в пределах допустимой погрешности вычисления. </p>

</article>

</div>

</div>

</div>

Что ещё можно сделать, чтобы наш код стал ближе к HTML5? В статьях для иллюстрации материала используются рисунки с подписью, для них можно указать комбинацию тегов <figure> и <figcaption>.

<figure>

<p><img src="images/fig2-1.png" alt="Рис. 1" height="252" width="381" /></p>

<figcaption>Рис. 1. Разбиение пустыни на N элементарных прямоугольников</figcaption>

</figure>

Здесь тег <figure> включает в себя сам рисунок и подпись к нему в виде тега <figcaption>, для них включим такой стиль.

figure {

}text-align: center; /* Выравнивание по центру */

figcaption {

font: italic 1em Georgia, "Times New Roman", Times, serif; /* Шрифт */ display: block; /* Блочный элемент */

}margin: 0 0 1.5em; /* Отступы */

На этом перевод сайта на HTML5 завершён, результат можно посмотреть по адресу lionindesert.ru.