HTML5П. Лабберс, Бр. Олберс, Ф. Салим.html5 для профессионалов: мощные инструменты для разработки современных веб-приложений - М.: "Вильямс", 2011. - 121 с. - это технология, позволяющая делать более усовершенствованные сайты, упрощает их написания, а также делает их доступнее и ярче! HTML5 был создан, как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API (набор готовых функций, приложений и т.д.) для сложных веб-приложений.

HTML5 будет иметь два синтаксиса - HTML и XML.html синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок"). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html.

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG (описание двумерной графики) и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования стороннихAPIплагинов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое страницы.

Новые элементы в HTML5HTMLBOOK.ru [Электронныйресурс] / Основный элементы в html5 - 2016 - Режим доступа: http: //htmlbook.ru/html5 (дата обращения: 19. 04.2017) :

· Section - представляет часть документа или раздел;

· Article - представляет независимую часть содержания для включения в документ статей;

· Aside - представляет часть содержания, которая только частично связана с остальной страницей;

· Header - представляет заголовок section;

· Footer - нижний колонтитул, может содержать информацию об авторе, авторском праве и так далее;

· Nav - представляет раздел документа, предназначенный для навигации;

· Dialog - может использоваться для выделения диалогов;

· Figure - может использоваться для связи заголовка с медиа контентом;

· Audio и video для мультимедиа. Оба обеспечивают соответствующий API. Таким образом разработчики могут писать скрипты собственного пользовательского интерфейса, но также предусмотрен способ вызова стандартного API пользовательского агента. Вместе с этими элементами может быть использован source, если есть возможность организовать параллельные потоки;

· Embed - используется для контента plugin'ов;

· Meter - для представления единиц измерений;

· Time - дата и/или время;

· Canvas - используется для динамической отрисовки графики;

· Command - представляет команду, которую может вызвать пользователь;

· Datagrid - интерактивное представление списка типа "дерево" или табличных данных;

· details представляет дополнительную информацию, которую пользователь может получить по требованию.

· datalist вместе с новым атрибутом list используется чтобы сделать combobox;

· Datatemplate, rule, и nest обеспечиваютмеханизмшаблонов (templating mechanism) для HTML;

· Event-source используется для перехвата событий, посланных сервером;

· Output - представляет определенный тип вывода, например, от вычислений, сделанных через скрипт;

· Progress - представляет ход выполнения задачи, например, загрузки;

· Атрибут type элемента input теперь имеет следующие новые значения:

o Datetime;

o datetime-local;

o date;

o month;

o week;

o time;

o number;

o range;

o email;

o url;

Идея относительно этих новых типов состоит в том, что пользовательский агент может обеспечить интерфейс для таких объектов как календарь (выбор даты), интеграции с адресной книгой и предоставить серверу данные в определенном формате. Это дает определенные преимущества как пользователям, так и разработчикам, поскольку пользовательский ввод проверяется перед посылкой на сервер браузером. Это означает, что разработчикам нет необходимости расходовать ресурсы на проверку введенных данных, что, в свою очередь, приводит к сокращению времени ожидания ответа.

Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён. Некоторые элементы, например <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы. API и DOM стали основными частями спецификации HTML5.html5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.

Нововведённые атрибуты в HTML5, для элементов, которые уже входили в HTML4.01.:

· элемент area теперь имеет атрибуты hreflang и rel;

· base получил атрибут target;

· атрибут value для li и атрибут start для элемента ol больше не deprecated;

· meta получил атрибут charset;

· новый атрибут autofocus может быть определен у input (кроме тех случаев, когда type атрибут - hidden), select, textarea и button. Это обеспечивает способ передачи управления;

· форме во время загрузки страницы;

· атрибут form для input, output, select, textarea, button и fieldset позволяет связать элемент с более чем одной формой;

· input, button и form получили атрибут replace, который определяет, что будет с элементом после отправки формы;

· form, select и datalist имеют атрибут data, который учитывает автоматическое предзаполнение, в случае заполнения данными с сервера;

· новый атрибут required применяется к input (кроме тех случаев, когда type атрибут - hidden, image или кнопка) и textarea. Он указывает обязательные для заполнения поля;

· input и textarea имеют новый атрибут inputmode, который дает подсказку пользовательскому интерфейсу относительно того, какие данные ожидаются для ввода;

· теперь можно disable (отключить) сразу целый fieldset, что не было возможно прежде;

· элемент input имеет несколько новых атрибутов для определения ограничений: autocomplete, min, max, pattern и step, а также list, который может использоваться вместе с элементами select и datalist;

· input и button также получили новый атрибут template, который может использоваться для шаблонов повторения;

· элемент menu имеет три новых атрибута: type, label и autosubmit;

· script имеет новый атрибут async, который влияет на загрузку и выполнение сценария;

· элемент html имеет новый атрибут manifest, который указывает на кэш приложений, используемый вместе с API для автономных Web приложений;

Несколько атрибутов из HTML 4 применяют ко всем элементам, поэтому их называют глобальными атрибутами: class, dir, id, lang, tabindex и title;

Появились также несколько новых глобальных атрибутов:

· атрибут contenteditable указывает, что элемент доступен для редактирования;

· contextmenu может использоваться для указания на контекстное меню, созданное автором;

· draggable может использоваться вместе с новым drag&drop API;

· irrelevant указывает, что элемент еще или больше не актуален;

Атрибуты для модели повторения (repetition model):

· repeat;

· repeat-start;

· repeat-min;

· repeat-max;

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

· возможность применения более простого кода, где div заменены усовершенствованными элементами;

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

· возможность использования новых полей ввода для различных целей, включая поиск;

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

· использование элементов HTML5 позволяет сделать более видимым семантическое ядро каждой страницы. Для реализации такой задумки отныне используются только стандартные коды;

· улучшенное юзабилити. Теперь возможносоздание сайтов с HTML5, используя новые элементы, включая <canvas>, <audio>, <video>. Выполнены улучшения для интеграции с содержимым SVG. Таким образом, при использовании новых элементов отпала необходимость в установке таких плагинов, как Flash.

· музыку, чарты, видео и рисунки можно встраивать без посторонних программ, поскольку такая функция разработана в самом браузере. При желании можно использовать старую систему интеграции аудио и видеофайлов;

· улучшение структурирования документов, для этого используются новые теги, например, <header>, <section> и <article>;

· при помощи HTML5 удалось значительно улучшить клиентскую часть приложений;

· благодаря уменьшению размера куки разработчики смогли существенно увеличить скорость отклика страницы. В HTML5 этого удалось добиться за счет использования хранилищ данных localStorage и sessionStorage, которые стали качественной частичной заменой куки;

· Geolocation API для определения местоположения, полученная информация может использоваться в веб-приложениях.

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

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

Тег video позволит вставить в выбранное место странички видеофайл. При помощи тега canvas появилась возможность размещения на страничках динамических изображений и карт. Для введения метрических данных используется тег meter, а для выделения даты и времени теперь применяется time. Подробная информация об объекте обозначается тегом details, процесс выполнения в динамике обозначен тегом progress.

Выбрав создание сайтов с HTML5, можно ощутить преимущества использования таких тегов, как menu, который служит для системы меню, и datagrid, который представляет собой таблицу, построенную через динамический источник данных. Тег command позволяет определить действие, которое осуществляется при активации объекта. Кроме того, в новую версию HTML добавлены формы полей, включая email, datetime, url, time, number, datetime-local и множество других.

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

2.2 Разработка проекта с помощью HTML5