В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>,<header>, <nav>, которые заменяют в некоторых случаях привычный <div>. Хотя кажется, что особой разницы между тегами <div class="header"> и <header> нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают <div class="header">, для них это типовой тег разметки — замени его на <div class="abrakadabra">и смысл не поменяется. Другое дело <header>, робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.
Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.
Давайте для начала сделаем шапку сайта с помощью тега <header> (пример 6.2).
Попытка добавить в стилях фон к тегу <header> ни к чему не привела, фон в некоторых браузерах отображаться не желает. Все новые теги следует сделать вначале блочными через свойство display, тогда они начнут корректно выводиться (пример 6.3).
Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в <head> такой код.
Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторять строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 6.4).
Пример 6.4. Скрипт для IE
<!--[if lt IE 9]> <script> var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script><![endif]-->
Сам скрипт заключается в условные комментарии, чтобы выполнялся только для IE версии 8.0 и ниже. В IE9 поддержка новых тегов HTML5 уже включена.
Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 6.5.
Все указанные скрипты должны располагаться в коде перед CSS.
Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:
1. установить доктайп <!DOCTYPE html>;
2. включить скрипт из примера 6.4 или 6.5;
3. в стилях для новых тегов установить display: block.
Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.
<article>
Задаёт содержание сайта вроде новости, статьи, записи блога, форума или др. В примере 6.6 показано добавление тега <article>.
Пример 6.6. Использование тега <article>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>article</title> </head> <body> <header><h1>Следы невиданных зверей</h1></header> <article> История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось. </article> </body> </html>
<aside>
Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации (пример 6.7). Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».
Пример 6.7. Использование <aside>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>aside</title> <script> document.createElement('aside'); document.createElement('article'); </script> <style> aside { background: #f0f0f0; /* Цвет фона */ padding: 10px; /* Поля */ width: 200px; /* Ширина сайдбара */ float: right; /* Обтекание слева */ } article { margin-right: 240px; /* Отступ справа */ display: block; /* Блочный элемент */ } </style> </head> <body> <aside> <p>Экономьте электричество</p> <p>Хороший язык</p> <p>Чья палка больше</p> </aside> <article> История о том, как приходилось экономить электричество, какие меры для этого принимались, и куда оно на самом деле уходило. </article> </body> </html>
<figure>
Используется для группирования любых элементов, например, изображений и подписей к ним (пример 6.8).
Пример 6.8. Использование <figure>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>figure</title> <script> document.createElement('figure'); document.createElement('figcaption'); </script> <style> figure { background: #5f6a72; /* Цвет фона */ padding: 10px; /* Поля вокруг */ display: block; /* Блочный элемент */ width: 150px; /* Ширина */ float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ } figcaption { color: #fff; /* Цвет текста */ } </style> </head> <body> <article> <figure> <p><img src="images/thumb1.jpg" alt=""></p> <figcaption>Софийский собор</figcaption> </figure> <figure> <p><img src="images/thumb2.jpg" alt=""></p> <figcaption>Польский костёл</figcaption> </figure> </article> </body></html>
<figcaption>
Содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе.
<footer>
Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация (пример 6.9).
Задаёт навигацию по сайту (пример 6.11). Если на странице несколько блоков ссылок, то в <nav>обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.
Определяет раздел документа, который может включать в себя заголовки, шапку, подвал и текст (пример 6.12). Допускается вкладывать один тег <section> внутрь другого.
Пример 6.12. Использование <section>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>section</title> </head> <body> <section> <h2>Съёмки фильма Полипропилен</h2> <p>История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.</p> </section> <section> <h2>Хороший язык</h2> <p>История о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.</p> </section> </body></html>
<time>
Помечает текст внутри тега <time> как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime(пример 6.13).
Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 6.1.
Табл. 6.1. Форматы даты и времени
Значение
Формат
Пример
Год
ГГГГ
Месяц и год
ГГГГ-ММ
2012-12
Полная дата
ГГГГ-ММ-ДД
2012-12-23
Дата и время с минутами
ГГГГ-ММ-ДДTчч:мм
2004-07-24T18:18
Дата и время с секундами
ГГГГ-ММ-ДДTчч:мм:сс
2004-07-24T18:18:18
Дата и время с часовым поясом
ГГГГ-ММ-ДДTчч:мм:сс±чч:мм
2004-07-24T18:18:18+04:00
Для каждой единицы существует своя заданная форма и ограничения.
Год — задается четырьмя цифрами (1860).
Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
День — две цифры от 01 до 31.
Час — две цифры от 00 до 23.
Минуты — две цифры от 00 до 59.
Секунды — две цифры от 00 до 59.
Часовой пояс — часы и минуты с указанием знака плюс или минус.
Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.
Пример 6.13. Использование <time>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>time</title> </head> <body> <article> <p>Опубликовано: <time datetime="2012-12-23T08:23:11+07:00">сегодня</time></p> <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p> <p><time>1960-08-19</time> первый полёт собак в космос.</p> <p><time>1961-04-12</time> первый полёт человека в космос.</p> <p><time>1963-06-16</time> первый полёет женщины-космонавта.</p> <p><time>1969-07-21</time> высадка человека на Луну.</p></article> </body> </html>
Макет сайта
Чтобы получить подробное представление о вёрстке на HTML5 пройдем весь процесс работы, начиная с получения графического макета и заканчивая публикацией сайта. В качестве примера сверстаем страницы сайта lionindesert.ru
представленные на рис. 6.1.
а. Главная страница сайта
б. Внутренняя страница
Рис. 6.1. Макеты сайта lionindesert.ru
Дизайнер подготовил макеты в программе Adobe Illustrator и одновременно экспортировал их в формат PSD (Adobe Photoshop), так что все необходимые начальные изображения у нас имеются. Здесь надо учесть, что вёрстка это процесс творческий и возможно несколько решений одной задачи, поэтому с графикой придётся работать активно, готовя изображения под своё решение. Один большой PSD-файл надо превратить в набор небольших рисунков, которые будут выводиться в браузере с использованием HTML и CSS. Предполагаем, что верстальщик владеет программой Photoshop и может в ней выполнить какие-то типовые действия вроде вырезания фрагмента картинки и сохранения его в подходящем для веба формате. Либо верстальщик работает в паре с дизайнером и чётко указывает ему, что надо получить.
Для систематизации работы разобьём её на ряд задач по виду макета (рис. 6.2). Но и так хорошо заметно, что страница делится на три главные группы: шапка, основная часть, где располагается весь контент и подвал. «Шапка» и «подвал» это жаргонные выражения для обозначения заголовка страницы и её нижней части. Также применяются термины «хедер» и «футер», являющиеся калькой с английских слов header и footer.
Рис. 6.2. Задачи для вёрстки
Макет комбинированный, шапка и подвал занимают всю ширину веб-страницы, а основная часть имеет фиксированную ширину 760 пикселов.
Верхняя часть кода для всех страниц будет идентичной, за исключением тега <title>, он определяет заголовок страницы.
Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.
Рис. 6.3. Ширина шапки
Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента <header>.
header {
display: block; /* Для старых браузеров */
height: 405px; /* Высота шапки */
background: url(images/header-bg.png) no-repeat center bottom;
}
В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.
Рис. 6.4. Совмещение изображения по горизонтали
На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).
header {
display: block;
height: 405px;
background: url(images/header-bg.png) repeat-x center bottom;
}
На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).
Рис. 6.5. Фоновая картинка для шапки
В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.
Оптимизация шапки
Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.
Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.
Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)
Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.
Два рисунка для фона шапки подготовлены, пишем код HTML.
<header>
<div class="header-bg">
<img src="images/header-title.png" alt="Как поймать льва в пустыне">
background: url(images/header-animal.png) repeat-x center bottom;
height: 405px;
}
В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.
Название сайта
Название написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.
1. Использовать формат PNG-24 при сохранении прозрачности.
2. Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.
Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.
Выравнивание по центру делается через свойство text-align, добавляемое к родителю тега <img>, а сдвиг вниз через свойство top. Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative.
На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:
<a href="/"><img src="images/header-title.png" alt="Как поймать льва в пустыне"></a>
Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.
Окончательный код для шапки приведён в примере 6.14.
<img src="images/header-title.png" alt="Как поймать льва в пустыне"
width="456" height="166">
</div>
</header>
</body>
</html>
Основная часть
В этой части страницы располагается контент в белой рамке с декоративными границами, а также градиент, с которого мы и начнём.
Градиент
Вначале подготовим изображение градиента в графическом редакторе. Рисунок имеет высоту 457 пикселов и состоит из плавного перехода от цвета #f9db94 (сверху) до #f9f2e3 (снизу). Сам градиент с указанием цветов представлен на рис. 6.8.
Рис. 6.8. Градиент для основной части
Содержание на каждой странице может быть разным, соответственно высота основной части также варьируется, поэтому сделать градиент с учётом высоты проблематично. Пойдём на хитрость и установим цвет фона основной части как #f9f2e3, т.е. совпадающим с нижним цветом градиента. Получится, что цвет от тёмного оттенка плавно переходит в цвет фона.
Здесь цвет и фоновый рисунок установлен через универсальное свойство background, оно же указывает повторение фона по горизонтали.
Декоративная рамка
Для центральной части требуется подготовить фоновое изображение с декоративными границами. Оно должно иметь ширину 760 пикселов и содержать прозрачные участки для наложения на градиент (рис. 6.9). В качестве графического формата лучше всего подойдёт PNG-24.
Рис. 6.9. Фоновая картинка для создания границ
В стилях указываем ширину макета, выравнивание по центру и фон с повторением по вертикали.
.content-bg {
width: 760px; /* Ширина макета */
margin: auto; /* Выравнивание по центру */
background: url(images/content-bg.png) repeat-y; /* Фон с границами */
}
Текст добавлять пока нельзя, потому что не определены поля (padding), так что текст будет накладываться прямо на границу. В принципе, ничего не мешает включить их для слоя content-bg, подкорректировав ширину, но надо принять во внимание вот какой момент. Белый цвет фона получается путём вставки фонового рисунка и у пользователя, отключившего показ изображений в браузере, никакого белого фона не будет. Надо бы предусмотреть такую ситуацию и добавить ещё один слой, у которого будет белый цвет фона, необходимые отступы и поля.
.content-white {
background: #fff; /* Белый цвет фона */
margin: 0 11px; /* Отступы по горизонтали */
padding: 20px 40px; /* Поля */
text-align: justify; /* Выравнивание по ширине */
}
Значение margin подобрано, исходя из ширины «зубчиков» границы, padding же по желанию. Заодно добавлено выравнивание текста по ширине. Окончательный код показан в примере 6.15.
Пример 6.15. Основная часть страницы
<div class="content-gradient">
<div class="content-bg">
<div class="content-white">
<p>Перед вами учебный сайт для демонстрации возможностей HTML и CSS по
созданию своего ресурса и его публикации в Интернете. Поскольку
любой сайт должен содержать полезную или интересную информацию, мы
выбрали тему ловли льва в пустыне, которая будет, без всяких сомнений,
полезна любому посетителю. Так, на всякий случай.</p>
</div>
</div>
</div>
Свойство text-align наследуется, поэтому не имеет значения, к какому слою оно добавляется.
Подвал страницы
В подвале у нас располагается рисунок лежащего льва и контактная информация. Если проанализировать изображение, видно, что оно не однородное — трава слева, справа и по центру различается. Также она накладывается поверх линии (рис. 6.10).
Рис. 6.10. Трава отображается поверх границы
Ещё один момент, который следует учесть заранее — как отображать подвал при небольшом объёме контента. Возможен «висящий» подвал, внизу которого отображается фон веб-страницы (рис. 6.11а) или подвал, заполненный до нижнего края окна (рис. 6.11б).
а. Висящий подвал
б. Подвал прижат к краю
Рис. 6.11. Разновидности подвала
В действительности прижимать подвал к нижнему краю не придётся, достаточно заполнить пустое пространство под подвалом тем же цветом, что и у травы. За счёт такого трюка будет создаваться впечатление, что подвал занимает всё оставшееся пространство.
Способов добавления рисунка травы для подвала несколько, пойдём самым простым путём и сделаем его фоном. Изображение, чтобы оно корректно смотрелась на разных разрешениях, придётся задать достаточно большим, 2000 пикселов по ширине. Картинка ставится через свойство background и в параметрах её положение указывается по центру значением 50% 0.
Рисунок с травой специально выполнен узким и имеет высоту 27 пикселов, что явно недостаточно для высоты нашего подвала, поэтому дополним рисунок тем же фоновым цветом #e2ed9c. Для этого добавим слой с именем footer-bg и для него укажем необходимый цвет фона.
.footer-bg {
background: #e2ed9c; /* Цвет фона */
}
Код HTML будет простым.
<footer>
<div class="footer-bg">
Copyright
</div>
</footer>
Ширина этих слоёв явно не указана, поэтому она занимает всю доступную ширину, так что текст будет выравниваться по левому краю. Необходимо ограничить текст нашим макетом, для этого включим дополнительный слой copyright и для него укажем ширину и выравнивание по центру.
.copyright {
width: 740px; /* Ширина макета без полей */
padding: 0 10px 10px; /* Поля */
margin: auto; /* Выравнивание по центру */
color: #526118; /* Цвет текста */
}
.copyright p {
margin: 0 0 5px 170px; /* Отступы текста */
}
Здесь к ширине контента (width) добавляется значение padding слева и справа, что в итоге и даёт ширину нашего макета в 760px. Текст сдвигается вправо с помощью универсального свойства margin, добавляемого к селектору P. Код для создания подвала и текста:
<footer>
<div class="footer-bg">
<div class="copyright">
<p><strong>Учебный сайт «Как поймать льва в пустыне»</strong></p>
Осталось только включить рисунок с лежащим львом и окончательно подкорректировать стили. Льва добавим в виде обычного изображения через тег <img>, а чтобы управлять его положением поместим рисунок в <div> с классом lion. Впрочем, этот класс можно также установить напрямую тегу <img>. Окончательный код нашего подвала представлен в примере 6.16.
Положение льва укажем с помощью позиционирования. Для этого родительскому элементу <footer>следует указать свойство position как relative, а элементу lion как absolute. В таком случае свойства leftи top управляют координатами относительно родителя, т.е.<footer>. Однако здесь есть одна сложность,<footer> занимает всю ширину страницы, а льва надо установить относительно макета в 760px. Значение для left указать нельзя, потому что мы не знаем, чему в пикселах равно расстояние от левого края браузера до левого края макета. Воспользуемся следующим трюком: для left установим50%, что выровняет край рисунка по центральной оси, и относительно этого положения будем сдвигать рисунок свойством margin-left с отрицательным (влево) или положительным (вправо) значением.
Значения margin-left и top подбираются опытным путём, чтобы добиться наилучшего результата.
Добавление рисунка вносит путаницу с фоновыми рисунками, и они начинают накладываться друг на друга, так что пора восстановить их исконное место. Для начала сдвинем рисунок с травой вниз на 53 пиксела. Это число получилось вычитанием из высоты рисунка льва (80px) высоты рисунка травы (27px). И подымем наш подвал целиком вверх на 77–80 пикселов. Во-первых, поднять надо, потому что из-за рисунка льва подвал опускается вниз, во-вторых, получим наложение подвала на границу макета, как показано на рис. 6.10.
К сожалению, все эти действия не имеют никакого смысла, потому что из-за эффекта схлопывающихся отступов положение элементов считается совсем иначе. Отменить этот эффект можно разными способами, к примеру, с помощью полей, границ, абсолютного позиционирования, но в конкретном случае они не подходят. Здесь поля и границы окажутся лишними. Так что вспомним ещё один метод и добавим свойство overflow со значением auto. Вообще-то это свойство при необходимости добавляет полосы прокрутки, если контент не помещается в заданные размеры. Но сейчас overflow нам нужно только для одного — отменить схлопывающиеся отступы.
Осталось решить последний вопрос, делать подвал висящим или нет (см. рис. 6.11). Вся реализация, показанная выше, направлена на висящий подвал, изменить поведение можно всего-навсего перенесяbackground из footer-bg в BODY. Хотя это действие установит зелёный цвет фона для всей страницы целиком, заметно это будет только там, где видно пространство под подвалом. Для остальных разделов вроде шапки, основной части задан свой собственный цвет фона, поэтому включение фона для селектора BODY на них не повлияет.
