Заключение
Мы сверстали две страницы сайта — главную и внутреннюю, но это в действительности не означает, что на сайте их столько же. Это всего лишь шаблоны, которые задают типовой вид документов. Далее шаблон используется для CMS (content management system, система управления контентом), чтобы автоматизировать процесс создания новых страниц на сайте. Тема CMS выходит за рамки этой книги, поэтому сайт сделан по старинке — с помощью набора HTML-файлов. Окончательно его можно посмотреть по адресу http://liondesert.narod.ru. Сайт расположен на бесплатном хостинге Narod.ru, у которого есть две особенности, о которых следует знать:
1. для страниц используется кодировка Windows-1251;
2. на страницы автоматически добавляется рекламный баннер, который «портит» наш код, в итоге он перестаёт быть валидным.
Все примеры в книге даются в кодировке UTF-8 как наиболее прогрессивной и универсальной, но в подобных условиях от прогресса приходится отказываться, приспосабливаясь под имеющиеся условия. Поэтому примеры перед публикацией на сайте пришлось слегка изменить.
Главная страница сайта в браузере выглядит следующим образом (рис. 8.18).
Рис. 8.18. Готовый сайт
Если вы хотите использовать для сайта CMS, кодировку UTF-8 и выводить только свои желаемые баннеры или не показывать их вообще, следует обратить внимание на платный хостинг, предоставляющий эти возможности. В частности, сайт http://lionindesert.ru являющийся копией сайта на Народе, расположен на платном хостинге. Его основное отличие в том, что он свёрстан на HTML5, о котором пойдёт речь в следующей главе.
Глава IX
Использование
HTML5
Использование HTML5
Примеры в этой книге преимущественно были сделаны на XHTML, он хорошо подходит для обучения и вырабатывания правильной манеры вёрстки благодаря своим формальным правилам и более жёсткому, по сравнению с HTML синтаксису. Однако за десять лет, прошедших со дня выпуска, XHTML морально устарел и уже не соответствует современным условиям. В частности, нет штатных средств для проигрывания аудио и видеороликов, нет поддержки геолокации, возможности рисовать непосредственно в браузере, не хватает некоторых элементов форм и много другого. Конечно, часть этих проблем давно решается через сторонние плагины к браузеру, например, Adobe Flash воспроизводит видео, Google Gears реализует локальные базы данных и запуск скриптов в фоновом режиме. Язык программирования JavaScript позволяет реализовать недостающий функционал форм и различные эффекты на странице. Но все эти технологии имеют определённые ограничения — плагины нужно устанавливать дополнительно, при этом они могут не работать, как Flash на iPhone и iPad, далеко не всё умеет и JavaScript. Популярность мобильных устройств, развитие каналов связи переместило акцент веб-технологий на мультимедиа, т.е. воспроизведение потокового аудио и видео, а также соответствующих файлов. Ничего этого в XHTML нет.
W3 Consortium, разработчик спецификаций HTML и XHTML, начал работать над XHTML 2.0, в котором указанные недостатки предыдущей версии бы обходились. В результате этот проект оказался замороженным и не завершён. Обеспокоенные медленным ходом работ разработчики браузеров Safari, Firefox и Opera основали свою собственную организацию WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по разработке гипертекстовых приложений Интернета), которая подхватила упавшее знамя. Идеи W3C, современные потребности пользователей и мнение вебразработчиков воплотилось в новом языке разметки названном HTML5.
Следует понимать, что, несмотря на схожесть названий, HTML5 не является преемником HTML4 или XHTML. Скорее речь идёт о новом языке Web Applications 1.0, который в маркетинговых целях назван знакомой аббревиатурой и построен на базе HTML.
Официально стандарт HTML5 ещё не завершён, но современные браузеры уже умеют частично с ним работать. Итак, что же интересного нам даёт HTML5? Вот некоторые его возможности.
Поддержка геолокации — определение местоположения пользователя на карте и использование этой информации для вычисления маршрута его движения, вывода близлежащих магазинов, кинотеатров, кафе и других данных.
Воспроизведение видеороликов.
Воспроизведение аудиофайлов.
Локальное хранилище — позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже.
Фоновые вычисления — стандартный способ запуска JavaScript в браузере в фоновом режиме.
Оффлайновые приложения — страницы, которые могут работать при отключении Интернета.
Рисование — внутри тега <canvas> с помощью JavaScript можно рисовать фигуры, линии, создавать градиенты и трансформировать объекты на лету.
Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.
Кроме этих возможностей в HTML5 включены новые теги для разметки документа, выброшены устаревшие теги и модифицированы некоторые другие. Для вёрстки веб-страниц в первую очередь необходимо понять, что поменялось и как перевести страницу с XHTML на HTML5.
Структура кода
Любой код разметки начинается с доктайпа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. Также доктайп переводит браузер в один из возможных режимов: стандартный, почти стандартный и режим совместимости. В HTML5 нет подобных делений, доктайп один единственный и при его наличии браузер работает в стандартном режиме.
<!DOCTYPE html>
Из всех видов это самый короткий доктайп, его легко запомнить и набирать по памяти.
Изменения претерпели и другие теги, так, у тега <html> нет атрибута xmlns, а кодировка документа сократилась до такой записи.
<meta charset="utf-8" />
Впрочем, старый способ указать кодировку также остался.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Атрибут type у тега <script> и <style> можно опустить, браузер автоматически понимает содержимое этих тегов и ему уже не требуется явно об этом напоминать. Простейший код приведён в примере 9.1.
Пример 9.1. Код на HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <title>Пример страницы</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>Страница на HTML5</p>
</body>
</html>
Синтаксис HTML5
HTML5 одновременно поддерживает два разных синтаксиса: HTML и XHTML, соответственно, имеется две манеры вёрстки. В случае использования синтаксиса HTML разрешается писать теги заглавными буквами, не закрывать некоторые теги, атрибуты писать без кавычек. При соблюдении синтаксиса XHTML следует придерживаться следующих правил.
Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами).
Значения любых атрибутов необходимо заключать в кавычки.
Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег. 
Нельзя использовать сокращенные атрибуты тегов.
Чтобы браузер различал, в каком виде ему отдаётся документ, сервер сообщает ему MIME-тип файла с расширением .html. Для сериализации HTML применяется тип text/html, а для сериализации XHTML, которая иногда называется XHTML5, тип application/xhtml+xml. Если у вас установлен веб-сервер Apache, то вы можете указать тип через директиву AddType, добавив следующую строку в файл
.htaccess, расположенный в корне сайта.
AddType application/xhtml+xml .html
В данном случае мы говорим, что все файлы с расширением .html отдавать как application/xhtml+xml. Если документы формируются через PHP, то можно отдавать заголовок следующим образом:
header ("Content-type: application/xhtml+xml");
Учтите, что эта строка должна идти до вывода любого текста на странице.
Выбор сериализации зависит от ряда условий. Перечислим их основные преимущества.
HTML5
Обратная совместимость с существующими браузерами.
Снисходительный синтаксис позволяет некоторые ошибки и отображает страницу даже при их наличии.
Допускает вольную манеру написания кода — некоторые теги можно не закрывать, значения указывать не всегда, кавычками в значения не пользоваться.
XHTML5
Строгий синтаксис поощряет авторов писать правильный код.
Напрямую интегрируется с другими XML-технологиями вроде SVG и MathML.
Используется с серверным обработчиком XML для хранения и представления данных в этом формате.
В действительности, application/xhtml+xml на практике используется достаточно редко, в первую очередь из-за проблем с совместимостью браузеров, поэтому тип text/html применяется повсеместно. В этом случае выбор синтаксиса не играет особой роли, поэтому вы вообще можете писать нечто вроде этого:
<IMG src= 1.jpg alt="" width="160" height=50 />
Отсутствие кавычек у некоторых атрибутов и большие буквы в теге говорят, что это HTML, но закрывающий тег взят из XHTML. Такая форма записи в HTML5 абсолютно корректна и проходит валидацию. Но это пример ужасного кода и плохой стиль вёрстки, поэтому его лучше избегать.
Так как большая часть примеров у нас написана на XHTML, то логично использовать именно этот язык как основу для переделки работ на HTML5. Таким образом, HTML-файл будет отправляться как text/html, но стиль кода у нас будет XHTML.