Уроки по HTML 5

Урок 1. Что нового в HTML5?

Предисловие

Рабочая группа под названием «Проект по веб-страницам» (Web Standsrts Project) начала развивать стандарт HTML5 в 2007 году. Цели были амбициозными: разработать такой стандарт HTML, который позволил бы запускать полноценные приложения в самом веб-браузере. Язык HTML5 вводит широкий спектр новых технологий, таких как:

Зачастую казалось, что новый стандарт – язык HTML5 – никогда не будет реализован. Противники с усмешкой говорили, что стандарт хорош на бумаге, но во Всемирной паутине вряд ли будет работать. И тут неожиданно браузер Firefox начал поддерживать элементы HTML5, а сразу вслед за ним это стал делать браузер Safari компании Apple.

Наконец, еще три события подтвердили важность стандарта HTML:

Можно спорить о том, решил ли судьбу стандарта HTML5 выпуск многофункциональных веб-браузеров для мобильных телефоном Phone, Android и WebOS. Однако теперь разработчики мобильных приложений могут создавать сайты, которые превосходят их «настольные» эквиваленты. Весьма нехарактерным оказалось молчание корпорации Microsoft по поводу поддержки языка HTML5. Многие видели медленное умирание браузера Internet Explorer, который должны были вытеснить более проворные технологии. Ситуация поменялась весной 2010 года, когда корпорация Microsoft выпустила 9-у версию браузера Internet Explorer для разработчиков, а в настоящее время присоединилась к рабочей группе HTML5. Сегодня все основные браузеры поддерживают стандарт HTML5.

Задача наших уроков – дать Вам представлением о языке HTML5. Уроки состоят из статей и проектов, которые дополняют друг друга, чтобы в итоге получился на 100% соответствующий стандарту HTML5 веб-сайт.

Язык HTML5 не является технологией-однодневкой. Это основанный на серьезном фундаменте стандарт, которые будет применяться при разработке веб-приложений в течение ближайших 10 лет. И сейчас самое время начать изучение способов использования этого нового стандарта, чтобы привести ваших клиентов в изумление.

Что нового в HTML5?

Из чего состоит язык HTML5

В отличие от предыдущих вариантов стандарта HTML, новые спецификации языка HTML5 охватывают более широкий круг задач, связанных с поддержкой веб-сайтов и веб-программированием. Язык HTML5 можно легко разделить на следующие части:

Структура наших уроков соответствует пяти основным категориям языка HTML5.

Улучшения языка основных тегов

А теперь поднимите руку те, кто хоть строчку написал на языке HTML. Отлично, вас много. Реальное положение дел таково, что большинство из нас выросли на структуре кода, заданной в стандартах HTML4 или XHTML. А тут вдруг появился HTML5! И что, теперь все заново учить? Нет, и это хорошо! Язык HTML5 изящно поддерживает устаревшие методы написания кода, что позволяет перевести код из одного стандарта в другой. Например, следующий XHTML-код будет работать и в HTML5:

<BR/>Первая строка
<BR/>Вторая строка
<BR/>Третья строка

Вы можете написать этот пример с использованием языка HTML5 так, чтобы старые браузеры отображали содержимое. Давайте перепишем его с использованием нового синтаксиса:

<br>Первая строка
<br>Вторая строка
<br>Третья строка

Элемент <br>, задающий перевод строки, в стандарте HTML5 утратил закрывающий слеш, поддерживаемый в стандарте XHTML. Однако такой код будет работать и в XHTML-браузерах.

Конечно, это не означает, что язык HTML5 обратно совместим во всех случаях. Многие новые элементы языка не поддерживаются старыми браузерами. Стандрат HTML5 полностью поддерживают следующие браузеры:

Новые элементы HTML5

Стандарт HTML5 вводит новые элементы для создания кода. Обобщая, можно сказать, что эти элементы охватывают следующие основные функции:

Блочная структура страницы обычно создавалась при помощи сложных таблиц или элемента DIV. Язык HTML5 предлагает несколько новых элементов, которые позволяют легко добавлять блоки содержимого. Имена новых элементов весьма прозрачно говорят о том, какой тип блока они организуют:

Роль новых элементов оформления страницы состоит в том, чтобы точно охарактеризовать различные части документа. Считайте, что новые теги имитируют создание документа в программе Microsoft Word. Обычный документ Word построен из частей, среди которых есть абзацы, врезки и колонтитулы. Новые элементы группирования в языке HTML5 представляют HTML-код в виде логически связанных частей или блоков.

Элемент FORM в языке HTML5 также стал значительно лучше по сравнению с тем, что было. Формы 2.0, как их иногда называют, позволяют Вам добавлять следующие свойства к полям формы:

В формах 2.0 необходимая Вам функциональность встроена в сам язык HTML – технологии Ajax, Flash и подобные им больше не нужны.

Упрощение работы с элементом DOCTYPE

Первая строка HTML-кода веб-страницы указывает на версию языка HTML, лежащего в основе страницы. Этот параметр называется DOCTYPE, например

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

В стандарте XHTML были введены три различных параметра DOCTYPE, разумеется управиться со всем этим сложно. В языке HTML5 существует лишь один параметр DOCTYPE, который выглядит так:

<!DOCTYPE html>

Новый параметр автоматически сообщает браузеру о том, что содержимое страницы написано на языке HTML5. Регистр букв параметра DOCTYPE не важен.

Новые атрибуты в языке HTML5

Атрибут – это настройка, которая позволяет расширить возможности какого-либо элемента.

<section contenteditable="true">
<h1>Поменяйте это</h1>
<p>Здесь Вы можете выделять, редактировать и создавать ваше собственное содержимое.</p>
</section>

Большинство атрибутов из стандартов XHTML и HTML4 по-прежнему применимы.

Что не поддерживается в с стандарте HTML5?

В языке HTML5 опущена поддержка нескольких устаревших и редко используемых HTML-элементов из ранний версий этого языка. Здесь можно заметить тенденцию: многие из «упраздненных» элементов языка ранее использовались для форматирования или внешнего оформления объекта на экране.

Вот список элементов, которые не поддерживаются стандартом HTML5:

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

В HTML5 изменены функции следующих элементов:

В языке HTML5 были также опущены некоторые дублирующие атрибуты элементов:

Атрибут Элемент
align CAPTION, IFRAME, IMG, INPUT, OBJECT, LEGEND, TABLE, HR, DIV, H1, H2, H3, H4, H5, H6, P, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
alink, link, vlink и text BODY
bgcolor TABLE, TR, TD, TH и BODY
border TABLE, IMG, OBJECT
cellpadding и cellspasing TABLE
char и charoff COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
clear BR
compact DL, MENU, OL, UL
frame TABLE
frameborder IFRAME
height TD, TH
hspace, vspace IMG, OBJECT
marginheight, marginwidth FRAME
noshade HR
nowrap TD, TH
rules TABLE
scrolling IFRAME
size HR, INPUT, SELECT
type LI, OL, UL
valign COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD. TR
width HR, TABLE, TD, TH, COL, COLGROUP, PRE

Как перевести сайт на новый стандарт HTML5?

В языке HTML5 появилось много новшеств. Это может огорчить тех веб-разработчиков, которые вынуждены поддерживать такие веб-браузеры, как Microsoft Enternet Explorer версий 6–8. Поэтому должен существовать способ безболезненного перевода существующих сайтов на новые технологии языка HTML5.

К счастью, такое решение существует – это Modernizr. Этот продукт с открытым исходным кодом, который находит на ваших страницах специфичные для HTML5 участки кода, а затем переводит их на язык HTML4, чтобы страницы отображались корректно. Файлы на языке JavaScript можно загрузить с www.modernizr.com.

Добавьте файлы Modernizr в корневой каталог веб-сайта. Внутри веб-страниц ссылка на эти файлы выглядит так:

<!DOCTYPE html>
<html>
<head>
<title>Проверка содержимого при помощи Modernizr</title>
<script src="modernizr.min.js"></script>
</head>
<body>

Теперь, когда сценарий JavaScript привязан к странице, можно написать код, который переключает язык страницы на стандарт HTML5, если браузер поддерживает его, или же оставляет прежний стандарт для устаревших браузеров. Например, на странице есть такой элемент INPUT:

<input type="date" name="DOB" id="DOB">

Добавьте следующий код JavaScript, который ссылается на Modernizr, и участок кода, написанный на языке HTML5, для старых браузеров будет заменен альтернативным кодом языка Ajax.

if (!Modernizr.inputypes.date) {
createDatepicker(document.getElementById(DOB));
}

Использование средств, подобных Modernizr, вселяет уверенность в том, что содержимое сайта будет доступно для всех его посетителей, а новые элементы языка HTML5 дойдут до аудитории.