Особенности стандарта HTML5

Байкальский государственный  университет экономики и права

 

Кафедра информатики и  кибернетики

 

 

 

КУРСОВАЯ РАБОТА

 

«Особенности  стандарта HTML5»

 

 

 

 

Работу выполнил: студент группы ИС-09-2

Михайлова А.М.

Руководитель: Артамонов И.В.           

 

 

 

 

 

 

Иркутск

2012г.

 

Содержание 

 

Введение 3

1.    История появления HTML5 4

2. Особенности HTML5 6

3. Отличия HTML5 от предыдущих версий. Сравнительный анализ плюсов и минусов 10

3.1 Преимущества HTML5 10

3.2 Недостатки HTML5 14

4. Примеры реализации на HTML5 16

5. Примеры зарубежных и российских сайтов на HTML5 17

6. Сравнение браузеров (HTML5) 20

Заключение 23

Список литературы 24

Приложения 25

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Введение

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

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

Самые заметные HTML5 возможности – это появление таких тегов как aside, footer, header, nav и article и полная поддержка новейших типов полей ввода в формах, включая атрибут placeholder (подсказывает подсказку в поле ввода), phone и email (которые обеспечивают правильную валидацию), а также ряд новейших медиа-элементов, которые включают audio, video и canvas, позволяющий динамически менять или рисовать контент.

HTML5 стремиться сделать интернет-сайты боле семантически правильными, более интерактивными, более быстрыми. Новый HTML стандарт включает функции, которые раньше требовали Flash или Javascript, а это значит, что сайты станут менее зависимы и смогут работать на многих платформах. [1]

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

 

 

 

 

 

 

 

 

 

1. История появления HTML5

Стандарт HTML прошел долгий эволюционный путь. Его  первая версия была опубликована в 1993 году в виде черновой спецификации для Интернета. В 90-е годы HTML оказался в центре всеобщего внимания. Очередные  версии быстро сменяли друг друга. Вскоре после выпуска версии 2.0 вышла  версия 3.2, затем — 4.0 (и это на протяжении всего лишь одного года) и, наконец, в 1999 году— версия HTML 4.01. Контроль за разработкой соответствующих спецификаций по мере развития языка осуществляет международный консорциум W3C¹ (Википедия, свободная энциклопедия: [сайт]. URL: http://ru.wikipedia.org/wiki/Консорциум_Всемирной_паутины ).

Период  стремительного развития сменился затишьем, и будущее HTML стало казаться довольно туманным. Фокус веб-стандартизации сместился в сторону XML и XHTML, в  то время как HTML оказался оттесненным  на задний план. Однако HTML вовсе не собирался  умирать, и на нем по-прежнему базировалась значительная часть веб-контента. Для  перехода к веб-приложениям нового типа и преодоления имеющихся  недостатков HTML нуждался в новых  средствах и спецификациях.

В 2004 году по инициативе небольшой группы специалистов, представлявших ряд крупных  производителей браузеров и заинтересованных в поднятии веб-платформы на новый технологический уровень, было основано сообщество WHATWG (Web Hypertext Application Working Group). Благодаря усилиям его участников и появилась спецификация HTML5. Они же инициировали и разработку новых средств, специально предназначенных для веб-приложений, поскольку ясно осознавали, насколько велика потребность в таких средствах. Именно в то время все чаще стали употреблять термин "Web 2.0". Все это давало основания полагать, что мы действительно являемся свидетелями второго возрождения Интернета, если первым считать период, когда статические веб-сайты уступили место более динамичным и социально направленным веб-сайтам, нуждавшимся в гораздо большем разнообразии различных средств в своем арсенале.

В 2006 году к работе над HTML вновь подключился  Консорциум W3C и начали появляться постоянные ссылки или временные на различные ресурсы, в результате чего в 2008 году свет увидел первый рабочий вариант проекта рекомендаций по HTML5 , тогда как рабочая группа, занимавшаяся до этого разработкой спецификации XHTML 2, в 2009 году прекратила свою деятельность. Поскольку HTML5 (как вскоре будет показано) решает ряд важных практических проблем, производители браузеров ведут активную работу по внедрению новых возможностей, и это несмотря на то, что до выпуска окончательного варианта спецификации еще очень далеко. В свою очередь, апробация спецификации в эксплуатируемых браузерах служит источником ценной информации, которая используется для улучшения самой спецификации. HTML5 быстро развивается, шагая в ногу со все возрастающими требованиями к веб-платформам. [2]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Особенности HTML5

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

Основная  идея разработчиков HTML 5 — сделать  жизнеспособный язык разметки, который  будет работать на практике, и приносить пользу посетителям и разработчикам сайтов. Один из принципов, положенных в основу стандарта: на первом месте стоят интересы реальных пользователей, затем — создателей сайтов, затем — разработчиков браузеров и других приложений, затем — авторов самого стандарта,   и только потом — теоретические и идеологические соображения, которые Консорциум безуспешно продвигал   последние  десять  лет.    HTML 5 должен    стать     преемником   как    HTML 4.0, так и XHTML 1.0²(Википедия, свободная энциклопедия: [сайт]. URL: http://ru.wikipedia.org/wiki/XHTML), поэтому  в стандарте   уделяется большое внимание обратной совместимости. С одной стороны, новый язык не полностью совместим с предыдущими версиями, но, с другой стороны, не уходит в радикальный отрыв, как XHTML 2.0.

HTML5 существует в двух вариациях — как разновидность XHTML и как модификация «исторического» HTML. Создатели веб-страниц могут применять любую из этих вариаций. В первой вариации новый язык полностью согласован с XML 1.0, так что разработчикам доступны все преимущества XML и смежных технологий. Во второй вариации HTML5 покончил с кошмарным наследием прошлого — формальной совместимостью с SGML³(Википедия, свободная энциклопедия: [сайт]. URL: http://ru.wikipedia.org/wiki/SGML). Все предыдущие стандарты HTML претендовали на эту совместимость, но ни один браузер не обрабатывал код HTML по замысловатым правилам SGML. Вместо этого использовались простые алгоритмы, распознающие набор конкретных элементов и атрибутов. HTML 5 узаконил такое поведение браузеров. Новый стандарт не оглядывается на SGML, а описывает частные правила для интерпретации конкретных тэгов и других синтаксических конструкций. По сути, HTML 5 документирует принципы, по которым браузеры уже обрабатывают код последние пятнадцать лет.

 В  отличие от предыдущих стандартов, предназначенных в основном для разработчиков кода, HTML5 строго и подробно описывает поведение браузеров. Он требует от браузеров обрабатывать не только грамотный код, но и по возможности корректировать ошибки, вплоть до употребления отсутствующих в стандарте элементов. Например, HTML 5 не позволяет авторам кода использовать элементы nobr или marquee, но описывает, как браузер должен поступать, если они все-таки встретятся в документе. Это соответствует очередному генеральному принципу HTML5 — максимальной совместимости с уже существующим наполнением сети. Миллионы действующих сайтов не должны пострадать от появления нового языка и поддерживающих его браузеров.

 Ещё  одна особенность нового стандарта:  он описывает документ HTML в терминах  объектной модели (DOM)⁴ (2002–2012 Влад Мержевич «htmlbook.ru – для тех, кто делает сайты: [сайт]. URL: http://htmlbook.ru/). Перед тем, как отображать веб-страницу, браузер формирует древовидную структуру её элементов и других объектов. Предыдущие стандарты стыдливо замалчивали этот этап, а HTML5, наоборот, во многом опирается именно на такое представление документа. Это позволяет включить в спецификацию объекты, свойства и методы DOM, которые широко используются с незапамятных времён, однако никогда не были стандартизованы: window.open(), alert(), prompt(), document.links, document.images, innerHTML, contentEditable и так далее. Наконец, в HTML 5 официально включён элемент embed⁵ (2002–2012 Влад Мержевич «htmlbook.ru – для тех, кто делает сайты: [сайт]. URL: http://htmlbook.ru/).

Однако HTML5 впитал не всё, что поддерживается в браузерах. Некоторые элементы, наоборот, удалены из стандарта: acronym, applet, basefont, big, center, dir, font, isindex, s, strike, tt, u. Убраны фреймы (frame, frameset, noframes), хотя остался элемент iframe. Нет больше атрибутов, которыми почти никто не пользовался (accesskey, longdesc и др.) или которыми не имеет смысла пользоваться (align, border, valign, cellpadding, cellspacing и др.). Некоторые старые элементы переосмыслены: например, i и b теперь обозначают разные формы смыслового выделения, а не курсив и полужирный шрифт; hr отвечает за разрыв в структуре документа. Элемент menu обрел вторую молодость и позволяет создавать настоящие меню, а address ущемлён в правах и предназначен строго для контактной информации в узком контексте.

Наконец, в HTML5 добавилось много нового. Для статей, блогов, документации и подобных материалов будут полезны элементы article и section, а также новая система заголовков и рубрикации. «Шапка» и «подвал», панель навигации и боковая панель обозначаются элементами header, footer, nav и aside. Для мультимедийного содержания появились элементы audio и video. Они внедряют в страницу соответствующий ресурс и обеспечивают стандартные элементы управления — кнопки запуска, паузы и остановки, проматывание, регулятор громкости. Для тех браузеров, где эти элементы не поддерживаются, HTML5 позволяет дополнить их альтернативным содержанием — например, роликом Flash, с помощью которого сейчас внедряется большинство аудио- и видеозаписей. В продвинутых браузерах полноценно сработает элемент audio или video, а во всех остальных — альтернативный ролик, так что все пользователи останутся довольны. (см. Приложение 1)

Здесь проявляется ещё один генеральный  принцип — новые возможности HTML5 должны создавать как можно меньше проблем в тех браузерах, где они не поддерживаются. Почти все новшества языка устроены так, что для старых браузеров можно обеспечить их реализацию с помощью альтернативного содержания, CSS, JavaScript и других технологий. Отдельного упоминания заслуживает элемент canvas, который предоставляет область для рисования изображений «на лету» средствами JavaScript. Собственно, массовый интерес к HTML 5 начался после того, как Firefox и Opera решили поддерживать этот элемент.

Формы в HTML5 изменились до неузнаваемости. Примитивные процедуры заполнения и отправки формы, описанные в прежних версиях HTML, уже сейчас никого не устраивают, поэтому разработчики сайтов выдумывают собственные расширения интерфейса, средства проверки, самодельные элементы управления. В HTML5 эта самодеятельность урегулирована стандартными элементами, атрибутами и интерфейсами DOM. В дополнение к обычным текстовым полям, появились поля для ввода определённых данных. Например, input type="number" — это поле для ввода числа, а input type="range" — ползунок для регулирования громкости или чего-то похожего. Атрибуты min, max и step определяют диапазон и точность допустимых значений в поле. Элемент datalist обеспечивает поле со списком, а элемент output — область для вывода динамически генерируемых результатов. Атрибут required для элемента управления обозначает, что этот элемент обязателен для заполнения, так что без него форма не будет отправлена. Атрибут autofocus позволяет установить фокус ввода в данный элемент. Метод checkValidity() проверяет правильность заполнения полей. До сих пор эти возможности имитировались на сайтах с помощью кустарных сценариев JavaScript.

В стандарте  предлагается элемент datagrid для организации  динамических структур данных, элемент command для вызова пользовательских команд, элемент progress — индикатор хода выполнения операции, а также средства DOM для  редактирования содержания прямо на веб-странице, перетаскивания, выделения, работы с буфером обмена и многого  другого. Это отвечает общей тенденции  развития Всемирной Паутины: если раньше сайты были чем-то вроде публикаций, то теперь они превратились в полноценные  приложения, требующие функционального  и удобного пользовательского интерфейса. Соответственно, новый HTML также должен стать не столько языком публикаций, сколько языком описания приложений. [4]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. Отличия HTML5 от предыдущих версий. Сравнительный анализ плюсов и минусов
1. Преимущества HTML5
1. Повышенная безопасность

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