Пять вещей, которые надо знать об HTML5


Содержание

Сайт о телевидении

Технология html5. Пять вещей, которые надо знать об HTML5. Что такое хранилище сессии и как его создать

Откуда взялся HTML5?
Я не буду вдаваться глубоко в историю HTML и HTML5 — это тема для отдельного большого рассказа, но суть вопроса вот в чем.
Сама история HTML имеет весьма давние корни, начиная с языка GML (Generalized Markup Language), родившегося в недрах IBM в конце 60х годов, продолжая стандартизированным в первой половине 80х языком SGML (Standard Generalized Markup Language) и переходя непосредственно к работам в начале 90х, которые и вылились в первые наброски HyperText и HTML и первую официальную стандартную версию HTML 2.0 в 1995 г.

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

В конце-концов уже в течение года эта активность дала дорогу HTML 3.2, довольно быстро перешедшему в состояние официальной рекомендации W3C.
Появлялись новые идеи, стандарт продолжал усложняться и в 1997 г. был выработан и утвержден HTML 4.0, спустя 2 года обновившийся до ревизии HTML 4.01.
Это последняя полностью утвержденная версия HTML, которой мы продолжаем активно пользоваться и на базе которой построены практически все страницы современного интернета. Это был 1999 год и это было более 11 лет назад.

Волнующий многих вопрос: а что же дальше? А дальше нужно вернуться на несколько лет назад — в 1996 г., когда появился первый черновик нового языка разметки — знакомый сегодня всем разработчикам язык XML (eXtensible Markup Language), довольно быстро (по сегодняшним меркам) стандартизированный и нашедший огромное применение во множестве сфер благодаря своей универсальности и формализму, крайне удобному при машинной обработки данных.
Не оказался неподвластным влиянию XML и наш любимый HTML, что, как вы уже догадались, вылилось в XML-версию HTML, известную как XHTML. В новом статусе язык обретает новые возможности, получает модульность и… развитие самого языка разметки практически прекращается.
Не менее интересен и браузерный фон происходящих событий — наступает царство IE5.5 и далее IE6, рынок практически остается без серьезной конкуренции, традиционно являющейся ключевым элементом устойчивого развития.
Фокус W3C тем временем смещается в новые области, особенно завязанные на развитие и использование XML — от языков разметки специализированных данных до языков обработки XML.

С возвратом конкуренции в середине 2000х и накоплением довольно большого опыта в работе с XML в W3C появляется новый проект — XHTML 2.0, на практике явивший собой несовместимую со старыми версию языка для разметки веб-страниц — хотя и со множеством новых идей, но преимущественно в силу обозначенного недостатка, не принятый активно в сообществе.
В конечном счете в 2009 работа над XHTML 2.0 была заморожена, а в конце 2010 перестала работать и соответствующая рабочая группа.
Параллельно со всем этим процессом шла активная работа по разработке новой версии HTML, совместимой с HTML 4.01. Начиная с новой версии веб-форм WebForms 2.0, разрабатываемой Яном Хиксоном (Ian Hickson) и внесенной в 2005 г. на рассмотрение в W3C, годом позже формально принятой в качестве черновика, — и переходя к новым возможностям для создания веб-приложений Web Applications 1.0. Вместе оба документа вылились в черновик стандарта HTML5, в начале 2008 г. внесенный на рассмотрение в W3C.
(Надо отметить, что работа над стандартом изначально велась в рамках рабочей группы WHATWG и впоследствии проходила и сегодня проходит в параллельном режиме в W3C и WHATWG. Группы имеют несколько разные подходы к работе, но обе версии стандарта синхронизируются между собой и у них также общий редактор — Ян Хиксон.)

На сегодня HTML5 находится в стадии Last Call Working Draft и в целом уже устоялся и находит активную поддержку как среди производителей браузеров, так и в сообществе разработчиков.
Спецификация HTML5 значительна по объему — она в три раза больше описания HTML 4.01. Но пусть вас не смущает размер: значительная часть спецификации адресована разработчикам браузеров и нацелена на обеспечение совместимости реализаций HTML5, выполненных различными производителями.

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

Ну хорошо, сегодня у нас есть HTML5, что с того? Зачем он взялся и зачем он нужен?
Что происходило, пока HTML спал?
Если кратко, то весь фоновый (хотя какой он фоновый? он как раз самый что ни на есть активный!) мной уже описан в одном из предыдущих постов с вот этой картинкой:

Фактически, пока спал HTML и спали или подремывали сопутствующие технологии (главным образом, CSS и javascript), интернет продолжал активно развиваться, требовал новых возможностей и находил способы их воплощения.

Подумайте, в рамках стандартного четвертого HTML и тогда еще не окончательно принятого CSS 2.1 и предыдущего стандарта javascript — ECMAScript 3, вооруженные мощностью плагинов (прежде всего, Flash и позднее Silverlight), веб-разработчики совершили целую революцию в интернете:

  • Насыщенные интернет-приложения (RIA) и вообще веб-приложения, работающие целиком в браузере
  • Асинхронное взаимодействие (AJAX — хотя технология XMLHTTPRequest, лежащая в его основе появилась еще в IE 5.5, но только с 2004 этот подход начал активное шествие по вебу)
  • Web 2.0, социальные сети
  • Онлайновое видео и аудио в браузере, живой стриминг
  • Общение через веб-камеру и микрофон прямо в браузере
  • Расцвет мобильного веба и специфических возможностей вроде геолокации
  • Драматическое ускорение javascript (за последние несколько лет это увеличение на порядок)

И многое чего еще — и не забываем, что компьютерная техника также сильно обновилась, включая появление возможности аппаратного ускорения за счет ресурсов видео-карты и приход многоядерных процессов даже в небольших нетбуках.
Веб изменился. А HTML все спал и спал:) Тут самое время сказать: дождались!

Если вы читаете этот пост, вы наверняка уже много слышали про HTML5. А то и вовсе вам уже приелось слышать из всех углов истории про HTML5 и увлекательные рассказы разработчиков браузеров про всеобщую любовь к HTML5?
И ведь сегодня действительно очень многие воодушевлены приходом HTML5. И это не просто слова, радостный маркетинг или восторженная истерия на пустом месте (без них, конечно, тоже не обходится). За HTML5 и правда стоит ряд принципиальных нововведений, подчеркивающих и направляющих дальнейшее развитие веб-стандартов.

Давайте уже к сути?
Почему HTML5 — это мега-мега-круто?
(Это тонкий момент, на котором я не буду останавливаться подробно в этой статье, но будьте уверены — расширения браузеров в виде плагинов еще рано списывать со счетов и во многих сценариях их возможности на несколько лет впереди того, что сегодня может предложить семейство HTML5.)
HTML5, на мой взгляд, дает три основных преимущества на концептуальном уровне, которые важно понимать прежде, чем мы перейдем к деталям:
1. Нативная поддержка. Браузеры, поддерживающие HTML5 (а на сегодня это современные версии всех популярных браузеров), делают это нативно, из коробки, то есть без необходимости устанавливать дополнительные плагины. Функционал из коробки — это всегда хорошо, если он работает не хуже того, что в принципе можно доставить сверху. За надежность и интеграцию встроеного функционала отвечает производитель браузера, он же следит за обеспечением безопасности и приватности. Для встроенного функционала проще обеспечить доступ к системным ресурсам — будь то данные или вычислительные мощности.
2. Полноправные элементы. В отличие от плагинов, работающих как черный ящик, вставленный на страницу и в лучшем случае взаимодействующий с ней через специальные интерфейсы на javascript, встроенный в браузер функционал полноправно интегрируется во всю экосистему технологий и поддерживаемых стандартов. Например, это означает, что видео-элементы HTML5 можно стилизовать через CSS, к ним можно напрямую обращаться через DOM и javascript. Это единая хорошо связанная экосистема.
3. Открытые технологии. Открытость — штука двоякая и есть палка о двух концах. Открытые стандарты, доступные любому для изучения, использования и реализации, — с одной стороны, и необходимость в стандартизации и стремлении к совместимости разных реализаций — с другой. И вместе с этим относительно легкий доступ к коду (благо в каждом уважающем себя браузере сегодня есть встроенные средства разработки, ну или популярный плагин:)). Открытость, да! Да, с побочными эффектами.

Так что там нового?
Как я уже писал выше, спецификация HTML5 несет в себе множество изменений разного уровня и разной важности. Принципиально, ключевые изменения можно разделить на 5 блоков:

  • Семантика. В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц. Это включает как блочные теги вроде header, footer, article, так и теги для разметки текста, например, mark, ruby, details. Ряд существующих тегов HTML4 признан устаревшим, отдельные теги поменяли свое значение, определенные изменения претерпели атрибуты.
  • Мультимедиа. HTML5 добавляет нативную поддержку мультимедийного контента (аудио и видео) прямо в HMTL-разметке — с соответствующим API для управления воспроизведением (и некоторыми заморочками с кодеками).
  • Графика. Работать с графикой на стороне клиента стало заметно проще. В HTML5 добавлен элемент canvas и специальный API на javascript для работы с ним. Canvas представляет собой динамическую «поверхность», поверх которой можно программного рисовать. Также в HTML5 официально включен тег svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом (SVG, Scalable Vector Graphics).
  • Веб-формы. Новые элементы веб-формы: как типы, так и атрибуты, позволяющие расширить возможности традиционных форм встроенными средствами без использования дополнительных библиотек — от подсказок в поле ввода (placeholder) и проверки вводимых значений до специальных элементов для ввода дат и цвета.
  • javascript APIs. Как обозначенные выше API для работы с графикой и мульмедиа, так новые возможности по перемещению объектов (Drag & Drop) и работе с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.

HTML5 — это спецификация. HTML5 — это и зонтичный термин, объядиняющий в себе целое семейство спецификаций, или даже, как правильнее будет сказать, новое поколение веб-стандартов.
Вы это наверняка слышали и, наверняка, еще много раз услышите — “HTML5” — это и про верстку, и про новые стили CSS, и про множество новых API, и даже про новую версию javascript — ECMAScript5.

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

И в этом контексте, абсолютно все равно, будете ли вы называть левую и правую части соответственно HTML5 и все остальное, или смотреть на них как стандарт HTML5 и большой маркетинговый “HTML5”, или вполне справедливо полагать первое просто HTML5, а второе каким-нибудь “HTML5 Extended” или “HTML5+” или “HTML5*” или как вам больше нравится.

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

Как известно, HTML (HyperText Markup Language ) — это язык разметки веб-страниц. Его главная задача — интерпретация передаваемой по сети информации в виде читабельного контента. Посредством HTML мы видим интернет именно таким, какой он есть на сегодняшний день, т.е. красивым, цветастым и многогранным. Ну а появление новой версии HTML — это бесспорно великое событие, которое еще долгое время будет будоражить умы интернет сообщества.

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

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

К примеру, в HTML5 можно наблюдать определенное количество новых элементов — появились section, nav, header, article и footer . Напомним, что ранее существовал только один элемент — div . Стандартный img , теперь дополнен тэгами audio и video . Один из самых важных атрибутов id дополнен tabindex и repeat . Помимо этого полностью упраздняются давно вышедшие из моды элементы типа font, center и т.п.

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

Теперь давайте немного остановимся на структуре и разметке языка HTML5.

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

  • header (не путаем с head) — можно задавать не только заголовок страницы, но и подзаголовки;
  • nav — элемент предназначен исключительно для ссылок навигации, что в высшей степени удобно при создании внутристраничной навигации по сайту, а так же и для межстраничных переходов.
  • section — данный элемент интерпретируется как секция общего пользования. Допустим, его можно использовать тогда, когда требуется в заранее определенном блоке текста задать специальный заголовок или параграф.
  • article — посредством этого элемента можно задать независимые зоны текстового наполнения страницы. К примеру, выделение важных публикаций из архива, трансляция текущих новостей, последние сообщения на форуме и т.д. и т.п. Помимо этого, элемент article можно использовать и в обычном режиме — т.е. определять им весь контент страницы.
  • footer — самый нижний элемент страницы или же «завершающий блок секции». Представляется в виде колонтитула. Там могут размещаться информационные сообщения касательно вышеопубликованного контета (например, копирайты) и т.п. вещи.

Теперь несколько слов про новшества, которые касаются элементов блокового уровня. Таких новшеств замечено несколько:

  • aside — этот контейнер можно использовать для материалов, которые считаются вспомогательными. К примеру, цитаты, сноски отделенные от основного повествования, колонки с пояснительным текстом и т.п.
  • dialog — контейнер, позволяющий красиво оформить диалог.
  • figure — контейнер, позволяющий описать любое графическое изображение с текстовой подписью.

А как насчет нескольких слов касательно мультимедийных элементов?

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

Другой момент — посредством этих элементов отпадает потребность в использовании сторонних продуктов (плагинов) для просмотра и прослушивания мультимедийного контента.

Касательно интерактива, HTML5 тоже не остался в долгу — тут тоже появились новые элементы. Вот некоторые из них:

  • details — посредством этого элемента можно паковать необязательную информацию.
  • datagrid — используется для демонстрации данных таблицы. От стандартных таблиц отличается тем, что посетитель страницы может самостоятельно управлять отображением информации, т.е. убирать таблицу, перемещать колонки и т.п.
  • menu, command — элементы, которые непосредственно относятся к визуальному представлению всех менюшек имеющихся на сайте.

Еще одно новшество — это элементы отвечающие за уровень текста. К примеру, в новой версии можно задавать такие параметры, как, скажем, прогресс какого-либо процесса (progress ), динамическое отображение времени (time ), дат и т.п.

Ну и в заключение парочка слов про новшества связанные с API!

Первым делом бросается в глаза расширение существующих DOM интерфейсов и добавление новых API — данные можно хранить в браузере, реализована технология Drag-and-drop, стало доступным рисование в онлайне и т.д.

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

что такое seo — введение в seo seo термины — обзор терминов и понятий, непосредственно касающихся c seo полезные термины — обзор терминов и понятиев, связаных с seo

От автора: привет друзья! В данной статье я хочу немного рассказать вам про html5. Рассказать, что такое html5, что в нем нового. Какие новые возможности он предоставляет разработчикам. HTML5 очень широкое понятие. И некоторые технологии, которые называют в HTML5, вообще говоря, не являются html5, но обо всем по порядку…

Первое — это стандарт HTML5, документ, лежащий на сайте W3C, в котором описаны все новые теги, атрибуты, новые API, и ряд сопутствующих документов, в которые вынесены некоторые дополнительные детали, вроде API для Canvas.

Второе — это «большой», маркетинговый, трендовый HTML5, зонтик для целого поколения новых технологий, включающий как непосредственно спецификацию HTML5, так и множество модулей CSS3, различные API для JavaScript, да и сам новый стандарт для JavaScript — ECMAScript5.

Рассмотрим некоторые ключевые особенности html5:

Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.

Он предоставляет стандартные элементы для медиа объектов, которые ранее требовали установки отдельных плагинов, которые приходилось постоянно обновлять.

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

Что дает HTML5?

Для разработчиков html5 помогает писать понятный семантический код. Позволяет управлять многими процессами на странице своими стандартными методами, без использования javascript или сторонних плагинов и сервисов. Это означает, что решаются некоторые проблемы кроссбраузерности, поскольку браузеры одинаково реализуют новые возможности.

Также html5 делает удобной работу в сети и для обычных пользователей. Например, увеличивается скорость работы, использование браузера становится более удобным. Для того, чтобы смотреть ролики из youtube не нужно устанавливать дополнительные плагины и постоянно обновлять их.

Цели HTML5

Кратко цели html5 можно назвать так:

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

Илон Маск рекомендует:  Структуры с меняющимися размерами данных

Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых html5 элементов.

Обеспечение согласованности между браузерами и устройствами.

Сделать все это настолько прозрачным, насколько это возможно.

Новые возможности HTML5

Новых функциональных возможностей в html5 очень много. Сегодня даже самые последние версии современных браузеров поддерживают полностью все функции html5. Поэтому в данной статье мы рассмотрим лишь основные возможности html5.

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

Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:


Article Header

Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.

Article Subhead

Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.

Copyright Your Name Here 2014. All Rights Reserved.

Пять вещей, которые надо знать об HTML5. Что такое HTML5 и почему про него так много говорят

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

Как известно, HTML (HyperText Markup Language ) — это язык разметки веб-страниц. Его главная задача — интерпретация передаваемой по сети информации в виде читабельного контента. Посредством HTML мы видим интернет именно таким, какой он есть на сегодняшний день, т.е. красивым, цветастым и многогранным. Ну а появление новой версии HTML — это бесспорно великое событие, которое еще долгое время будет будоражить умы интернет сообщества.

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

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

К примеру, в HTML5 можно наблюдать определенное количество новых элементов — появились section, nav, header, article и footer . Напомним, что ранее существовал только один элемент — div . Стандартный img , теперь дополнен тэгами audio и video . Один из самых важных атрибутов id дополнен tabindex и repeat . Помимо этого полностью упраздняются давно вышедшие из моды элементы типа font, center и т.п.

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

Теперь давайте немного остановимся на структуре и разметке языка HTML5.

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

  • header (не путаем с head) — можно задавать не только заголовок страницы, но и подзаголовки;
  • nav — элемент предназначен исключительно для ссылок навигации, что в высшей степени удобно при создании внутристраничной навигации по сайту, а так же и для межстраничных переходов.
  • section — данный элемент интерпретируется как секция общего пользования. Допустим, его можно использовать тогда, когда требуется в заранее определенном блоке текста задать специальный заголовок или параграф.
  • article — посредством этого элемента можно задать независимые зоны текстового наполнения страницы. К примеру, выделение важных публикаций из архива, трансляция текущих новостей, последние сообщения на форуме и т.д. и т.п. Помимо этого, элемент article можно использовать и в обычном режиме — т.е. определять им весь контент страницы.
  • footer — самый нижний элемент страницы или же «завершающий блок секции». Представляется в виде колонтитула. Там могут размещаться информационные сообщения касательно вышеопубликованного контета (например, копирайты) и т.п. вещи.

Теперь несколько слов про новшества, которые касаются элементов блокового уровня. Таких новшеств замечено несколько:

  • aside — этот контейнер можно использовать для материалов, которые считаются вспомогательными. К примеру, цитаты, сноски отделенные от основного повествования, колонки с пояснительным текстом и т.п.
  • dialog — контейнер, позволяющий красиво оформить диалог.
  • figure — контейнер, позволяющий описать любое графическое изображение с текстовой подписью.

А как насчет нескольких слов касательно мультимедийных элементов?

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

Другой момент — посредством этих элементов отпадает потребность в использовании сторонних продуктов (плагинов) для просмотра и прослушивания мультимедийного контента.

Касательно интерактива, HTML5 тоже не остался в долгу — тут тоже появились новые элементы. Вот некоторые из них:

  • details — посредством этого элемента можно паковать необязательную информацию.
  • datagrid — используется для демонстрации данных таблицы. От стандартных таблиц отличается тем, что посетитель страницы может самостоятельно управлять отображением информации, т.е. убирать таблицу, перемещать колонки и т.п.
  • menu, command — элементы, которые непосредственно относятся к визуальному представлению всех менюшек имеющихся на сайте.

Еще одно новшество — это элементы отвечающие за уровень текста. К примеру, в новой версии можно задавать такие параметры, как, скажем, прогресс какого-либо процесса (progress ), динамическое отображение времени (time ), дат и т.п.

Ну и в заключение парочка слов про новшества связанные с API!

Первым делом бросается в глаза расширение существующих DOM интерфейсов и добавление новых API — данные можно хранить в браузере, реализована технология Drag-and-drop, стало доступным рисование в онлайне и т.д.

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

что такое seo — введение в seo seo термины — обзор терминов и понятий, непосредственно касающихся c seo полезные термины — обзор терминов и понятиев, связаных с seo

От автора: привет друзья! В данной статье я хочу немного рассказать вам про html5. Рассказать, что такое html5, что в нем нового. Какие новые возможности он предоставляет разработчикам. HTML5 очень широкое понятие. И некоторые технологии, которые называют в HTML5, вообще говоря, не являются html5, но обо всем по порядку…

Первое — это стандарт HTML5, документ, лежащий на сайте W3C, в котором описаны все новые теги, атрибуты, новые API, и ряд сопутствующих документов, в которые вынесены некоторые дополнительные детали, вроде API для Canvas.

Второе — это «большой», маркетинговый, трендовый HTML5, зонтик для целого поколения новых технологий, включающий как непосредственно спецификацию HTML5, так и множество модулей CSS3, различные API для JavaScript, да и сам новый стандарт для JavaScript — ECMAScript5.

Рассмотрим некоторые ключевые особенности html5:

Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.

Он предоставляет стандартные элементы для медиа объектов, которые ранее требовали установки отдельных плагинов, которые приходилось постоянно обновлять.

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

Что дает HTML5?

Для разработчиков html5 помогает писать понятный семантический код. Позволяет управлять многими процессами на странице своими стандартными методами, без использования javascript или сторонних плагинов и сервисов. Это означает, что решаются некоторые проблемы кроссбраузерности, поскольку браузеры одинаково реализуют новые возможности.

Также html5 делает удобной работу в сети и для обычных пользователей. Например, увеличивается скорость работы, использование браузера становится более удобным. Для того, чтобы смотреть ролики из youtube не нужно устанавливать дополнительные плагины и постоянно обновлять их.

Цели HTML5

Кратко цели html5 можно назвать так:

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

Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых html5 элементов.

Обеспечение согласованности между браузерами и устройствами.

Сделать все это настолько прозрачным, насколько это возможно.

Новые возможности HTML5

Новых функциональных возможностей в html5 очень много. Сегодня даже самые последние версии современных браузеров поддерживают полностью все функции html5. Поэтому в данной статье мы рассмотрим лишь основные возможности html5.

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

Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:

Article Header

Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.

Article Subhead

Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.

Copyright Your Name Here 2014. All Rights Reserved.

Пять вещей, которые надо знать об HTML5. Что такое HTML5 и почему про него так много говорят

Перевод: Влад Мержевич

1. Это не одна большая вещь

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

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег , он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега .

2. Вам не надо откидывать имеющееся

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

Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type=»email» , поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.

3. Легко начать


«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:

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

4. Это уже работает

Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом , видео, геолокацией, локальным хранилищем и др. Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.

Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.

5. Он уже здесь

Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:

Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.

HTML5 уже здесь. Давайте погрузимся в него.

Это — не статья для супер-гуру-вебмастеров. И даже не для начинающих веб-разработчиков. Эта статья задумывалась как памятка об HTML5 для журналистов и аналитиков.

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

Также важно не забывать, что так называемые «демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.

Зачем придумали HTML5?

HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.

Как много браузеров поддерживают HTML5?

Смотря как посмотреть. Если исходить из того, что HTML5 произошел от HTML4, то все барузеры поддерживают какие-то свойства HTML5.

А с другой стороны, если вы хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно.

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

Кто является движущей силой HTML5?

Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.

Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.

Кто пользуется HTML5?

Множество людей и компаний: Boston Globe Newspaper ; Nationwide Building Society , Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.

Когда будет завершена работа над HTML5?

Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.

Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.

Правда ли, что HTML5 несовместим с Internet Explorer?

Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.

Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.

Правда ли, что HTML5 предназначен для мобильных устройств?

Совершенно нет. В основе HTML5 лежат определенные принципы разработки , один из которых гласит о повсеместном его применении:

«Элементы должны разрабатываться для повсеместного использования. Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»

С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).

Также преимуществом является возможность использовать элемент canvas для отображения анимации устройствами, которые по той или иной причине не могут использовать Flash.

Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.

Вытеснит ли HTML5 Adobe Flash?

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

Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.

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

Комментарии

  1. емеля
    4 октября 2011 в 22:29

html1 *THUMBS UP*

Olga Ответ:
октября 5, 2011 at 11:26 дп

Wdtime.ru Ответ:
февраля 20, 2020 at 10:32 пп

Полный список структурных тегов HTML 5 — wdtime.ru/blog/strukturnye-tegi-html-5

маргарита
5 октября 2011 в 14:01

емеля — дурачок, вы что, сказки не читали? :-D

Бублик
25 ноября 2011 в 14:47

жаль что некоторые пользователи немогут понять что есть браузеры лучше internet explorera:(

Olga Ответ:
ноября 25, 2011 at 4:03 пп

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

Бублик Ответ:
ноября 25, 2011 at 4:11 пп

Введение

Я, разработчик ASP.NET MVC , недавно искал работу, и на собеседовании много вопросов из тех, что мне задавали, касались HTML5 и его особенностей.

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

Эти вопросы не являются ключом к успеху при поиске работы, но они, несомненно, помогут вам ориентироваться в теме.


Какая связь между SGML, HTML, XML и XHTML?

SGML ( Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

HTML – это язык разметки, который описывается с помощью SGML.

Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию «DOCTYPE » в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.

Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “” ).

XHML был создан из XML и использовался в HTML 4.0 . Поэтому, например, в HTML, основанном на SGML, тег
недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:

Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.

Что такое HTML 5?

HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.

HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В HTML 5 нам не нужно DTD. Почему?

HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.

Если я не вставлю в документ , будет ли работать HTML 5?
Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.

Какие браузеры поддерживают HTML 5?

Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.

Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?

Обычно веб-страница содержит заголовки, подвал, навигацию, основной контент и боковой блок. Поэтому когда мы хотим представить эти блоки в HTML 4 с подходящим наименованием, мы, скорее всего, будем использовать теги DIV . Но в HTML 5 введены более понятные элементы для этих блоков, что позволило сделать код HTML более читаемым.

Илон Маск рекомендует:  Примитивы и механизм доступа

Что такое элемент datalist в HTML 5?

Элемент datalist в HTML 5 помогает реализовать функцию автозаполнения в поле для ввода, как показано на рисунке ниже:

Ниже приведён код HTML для элемента DataList:

Какие новые элементы форм введены в HTML 5?

В HTML 5 введены десять новых важных элементов форм:

Давайте разберём эти элементы по порядку.

Если вы хотите отобразить диалоговое окно выбора цвета:

Если вы хотите отобразить диалоговое окно календаря:

Если вы хотите отобразить календарь с локальным временем:

Если вы хотите создать HTML поле для ввода с проверкой адреса электронной почты, можно задать тип поля «email »:

Для проверки URL-адреса используйте тип «url », как показано ниже:

Если вы хотите отобразить поле для ввода чисел в заданном диапазоне, используйте тип «number »:

Если вы хотите отобразить ползунок, используйте тип «range »:

Хотите сделать поле для поиска:

Хотите принимать только время:

Если вы хотите сделать поле для ввода номеров телефона:

Что такое элемент output в HTML 5?

Элемент output требуется, когда вы хотите отобразить сумму двух введённых чисел в виде текста.

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

Ниже приведён пример использования элемента output в HTML 5:

Вы можете заменить «parseInt » на «valueAsNumber » для простоты. Также вы можете использовать атрибут «for» элемента output для повышения читаемости.

Что такое SVG?

SVG означает scalable vector graphics (масштабируемая векторная графика). Это текстовой язык графики, с помощью которого можно рисовать изображения в виде текста, линий, точек и т.п., что позволяет создавать лёгкие и быстро обрабатываемые браузером изображения.

Можно ли сделать простое SVG изображение, используя HTML 5?

Допустим, мы хотим отобразить простую линию, как показано на рисунке ниже, используя HTML 5 и SVG:

Ниже приведён код HTML 5. Вы можете видеть тэг SVG, который заключает в себя тэг line , отображающий линию:

Что такое канва в HTML 5?

Канва – это область HTML документа, в которой вы можете рисовать.

Итак, как же нарисовать простую линию при помощи канвы?

  • Определите область канвы;
  • Получите доступ к контексту канвы;
  • Нарисуйте изображение.

Определение области канвы

Чтобы определить область канвы, вам потребуется следующий HTML код. Он определяет область, в которой вы можете рисовать:

Получение доступа к области канвы

Прежде чем приступить к рисованию в области канвы, нужно получить ссылку на контекст канвы. Ниже приведён код, позволяющий это сделать:

Рисование изображения

Теперь, когда у вас есть доступ к контексту объекта, можно начинать рисовать по канве. Поэтому сначала вызываем метод «move » и начинаем с точки 10, 10, используем метод «line », чтобы нарисовать линию, и, наконец, применяем к ней штриховку:

Пять вещей, которые надо знать об HTML5.

От автора: привет друзья! В данной статье я хочу немного рассказать вам про html5. Рассказать, что такое html5, что в нем нового. Какие новые возможности он предоставляет разработчикам. HTML5 очень широкое понятие. И некоторые технологии, которые называют в HTML5, вообще говоря, не являются html5, но обо всем по порядку…

Первое — это стандарт HTML5, документ, лежащий на сайте W3C, в котором описаны все новые теги, атрибуты, новые API, и ряд сопутствующих документов, в которые вынесены некоторые дополнительные детали, вроде API для Canvas.

Второе — это «большой», маркетинговый, трендовый HTML5, зонтик для целого поколения новых технологий, включающий как непосредственно спецификацию HTML5, так и множество модулей CSS3, различные API для JavaScript, да и сам новый стандарт для JavaScript — ECMAScript5.

Рассмотрим некоторые ключевые особенности html5:

Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.


Он предоставляет стандартные элементы для медиа объектов, которые ранее требовали установки отдельных плагинов, которые приходилось постоянно обновлять.

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

Что дает HTML5?

Для разработчиков html5 помогает писать понятный семантический код. Позволяет управлять многими процессами на странице своими стандартными методами, без использования javascript или сторонних плагинов и сервисов. Это означает, что решаются некоторые проблемы кроссбраузерности, поскольку браузеры одинаково реализуют новые возможности.

Также html5 делает удобной работу в сети и для обычных пользователей. Например, увеличивается скорость работы, использование браузера становится более удобным. Для того, чтобы смотреть ролики из youtube не нужно устанавливать дополнительные плагины и постоянно обновлять их.

Цели HTML5

Кратко цели html5 можно назвать так:

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

Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых html5 элементов.

Обеспечение согласованности между браузерами и устройствами.

Сделать все это настолько прозрачным, насколько это возможно.

Новые возможности HTML5

Новых функциональных возможностей в html5 очень много. Сегодня даже самые последние версии современных браузеров поддерживают полностью все функции html5. Поэтому в данной статье мы рассмотрим лишь основные возможности html5.

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

Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:

Article Header

Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.

Article Subhead

Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.

Copyright Your Name Here 2014. All Rights Reserved.

40 важных вопросов и ответов по HTML5

Введение

Я, разработчик ASP.NET MVC , недавно искал работу, и на собеседовании много вопросов из тех, что мне задавали, касались HTML5 и его особенностей.

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

Эти вопросы не являются ключом к успеху при поиске работы, но они, несомненно, помогут вам ориентироваться в теме.

Какая связь между SGML, HTML, XML и XHTML?

SGML ( Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

HTML – это язык разметки, который описывается с помощью SGML.

Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию « DOCTYPE » в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.

Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “” ).

XHML был создан из XML и использовался в HTML 4.0 . Поэтому, например, в HTML, основанном на SGML, тег
недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:

Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.

Что такое HTML 5?

HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.

HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В HTML 5 нам не нужно DTD. Почему?

HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.

Если я не вставлю в документ , будет ли работать HTML 5?
Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.

Какие браузеры поддерживают HTML 5?

Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.

Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?

Обычно веб-страница содержит заголовки, подвал, навигацию, основной контент и боковой блок. Поэтому когда мы хотим представить эти блоки в HTML 4 с подходящим наименованием, мы, скорее всего, будем использовать теги DIV . Но в HTML 5 введены более понятные элементы для этих блоков, что позволило сделать код HTML более читаемым.

Ниже приведено описание этих элементов HTML 5 из разметки на рисунке:

  • : Представляет блок заголовка страницы;
  • : Подвал страницы;

АВТОМИР

Введение

Я, разработчик ASP.NET MVC , недавно искал работу, и на собеседовании много вопросов из тех, что мне задавали, касались HTML5 и его особенностей.

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

Эти вопросы не являются ключом к успеху при поиске работы, но они, несомненно, помогут вам ориентироваться в теме.

Какая связь между SGML, HTML, XML и XHTML?

SGML ( Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

HTML – это язык разметки, который описывается с помощью SGML.

Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию «DOCTYPE » в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.

Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “” ).

XHML был создан из XML и использовался в HTML 4.0 . Поэтому, например, в HTML, основанном на SGML, тег
недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:

Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.


Что такое HTML 5?

HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.

HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В HTML 5 нам не нужно DTD. Почему?

HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.

Если я не вставлю в документ , будет ли работать HTML 5?
Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.

Какие браузеры поддерживают HTML 5?

Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.

Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?

Обычно веб-страница содержит заголовки, подвал, навигацию, основной контент и боковой блок. Поэтому когда мы хотим представить эти блоки в HTML 4 с подходящим наименованием, мы, скорее всего, будем использовать теги DIV . Но в HTML 5 введены более понятные элементы для этих блоков, что позволило сделать код HTML более читаемым.

Что такое элемент datalist в HTML 5?

Элемент datalist в HTML 5 помогает реализовать функцию автозаполнения в поле для ввода, как показано на рисунке ниже:

Ниже приведён код HTML для элемента DataList:

Какие новые элементы форм введены в HTML 5?

В HTML 5 введены десять новых важных элементов форм:

Давайте разберём эти элементы по порядку.

Если вы хотите отобразить диалоговое окно выбора цвета:

Если вы хотите отобразить диалоговое окно календаря:

Если вы хотите отобразить календарь с локальным временем:

Если вы хотите создать HTML поле для ввода с проверкой адреса электронной почты, можно задать тип поля «email »:

Для проверки URL-адреса используйте тип «url », как показано ниже:

Если вы хотите отобразить поле для ввода чисел в заданном диапазоне, используйте тип «number »:

Если вы хотите отобразить ползунок, используйте тип «range »:

Хотите сделать поле для поиска:

Хотите принимать только время:

Если вы хотите сделать поле для ввода номеров телефона:

Что такое элемент output в HTML 5?

Элемент output требуется, когда вы хотите отобразить сумму двух введённых чисел в виде текста.

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

Ниже приведён пример использования элемента output в HTML 5:

Вы можете заменить «parseInt » на «valueAsNumber » для простоты. Также вы можете использовать атрибут «for» элемента output для повышения читаемости.

Что такое SVG?

SVG означает scalable vector graphics (масштабируемая векторная графика). Это текстовой язык графики, с помощью которого можно рисовать изображения в виде текста, линий, точек и т.п., что позволяет создавать лёгкие и быстро обрабатываемые браузером изображения.

Можно ли сделать простое SVG изображение, используя HTML 5?

Допустим, мы хотим отобразить простую линию, как показано на рисунке ниже, используя HTML 5 и SVG:

Ниже приведён код HTML 5. Вы можете видеть тэг SVG, который заключает в себя тэг line , отображающий линию:

Что такое канва в HTML 5?

Канва – это область HTML документа, в которой вы можете рисовать.

Итак, как же нарисовать простую линию при помощи канвы?

  • Определите область канвы;
  • Получите доступ к контексту канвы;
  • Нарисуйте изображение.

Определение области канвы

Чтобы определить область канвы, вам потребуется следующий HTML код. Он определяет область, в которой вы можете рисовать:

Получение доступа к области канвы

Прежде чем приступить к рисованию в области канвы, нужно получить ссылку на контекст канвы. Ниже приведён код, позволяющий это сделать:

Рисование изображения

Теперь, когда у вас есть доступ к контексту объекта, можно начинать рисовать по канве. Поэтому сначала вызываем метод «move » и начинаем с точки 10, 10, используем метод «line », чтобы нарисовать линию, и, наконец, применяем к ней штриховку:

Зачем нам нужен HTML5: пять простых ответов

13 августа 2013

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

1. HTML5 – новый подход к разметке: мультимедиа внутри

В отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.

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

Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это – «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.

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

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

Для интеграции аудио или видео в HTML5 достаточно использовать простой набор тэгов, описывающих, какой тип контента вы намерены поместить («video» или «audio»), и обычные ссылки на соответствующие медиафайлы.

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

2. Проблема обратной совместимости: сначала HTML, потом плагины

К сожалению, в мире остаётся значительная часть пользователей, у которых установлены устаревшие браузеры, вполне их устраивающие, но не поддерживающие все возможности HTML5. Прежде всего, речь идёт об Internet Explorer версии 8, до сих пор считающейся самой популярной для этого браузера. Последующие версии – IE 9 и 10 – уже практически полностью поддерживают HTML5. Что касается Chrome, Opera и Safari, то они уже в течение нескольких лет способны обрабатывать теги «video» и «audio».


Тем не менее для обеспечения обратной совместимость в HTML5 сохраняется поддержка использования плагинов (тега «object»), но по схеме «сначала HTML, а потом уже плагины». Это означает, что браузер должен сначала осуществлять рендеринг страницы с использованием тегов «video» и «audio» – и лишь при невозможности сделать это применять код плагинов.

Для обеспечения правильного функционирования такого подхода можно использовать одну из множества доступных библиотек JavaScript, часть из которых предоставляет полностью интегрированный программный интерфейс (API) для управления как HTML-контентом, так и встроенными объектами. Среди них, в частности, можно назвать Projekktor или программный видеоплеер Video.js, обеспечивающие полную совместимость как с HTML5, так и со старыми браузерами, в которых применяются плагины.

3. Единый подход к десктопным и мобильным платформам

Поддержка нового стандарта HTML5 обеспечивается и практически на всех современных мобильных устройствах, включая iOS, Android и Windows Phone, в чём заключается ещё одно его важное достоинство. Веб-мастеру уже не нужно размещать несколько версий медиаконтента для «полноценных» компьютеров и мобильных устройств. Известно, что iOS полностью несовместима с Flash, а ОС Android совместима лишь частично. В случае с HTML5 эта проблема полностью снимается.

Кроме того, многие современные мобильные устройства поддерживают аппаратное декодирование видео в широко распространённом формате H.264, что вновь избавляет веб-мастеров от лишней работы и необходимости выкладывания видео в нескольких разных кодеках. Владельцы же таких устройств получают низкую нагрузку на систему и длительное время автономной работы.

4. Поддержка разных форматов видео и звука

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

Самые популярные контейнеры для интернет-видео – это AVI, MP4, FLV и WebM, а основных «сетевых» видеокодеков всего три: H.264, Ogg Theora и VP8. При этом каждому кодеку обычно (но далеко не всегда) лучше всего соответствует свой формат контейнера: H.264 – MP4, Theora – OGG, VP8 – WebV.

Кодек H.264 сжимает видео с потерями, чтобы получить файл высокого качества, но небольшого размера. При этом спецификация предусматривает несколько профилей с разным качеством и степенью сжатия, чтобы на маломощные мобильные устройства можно было транслировать «лёгкие» файлы, а на десктопы с широкополосными доступом – более качественное видео.

Хотя H.264 – коммерческий кодек, то есть предполагает лицензионные отчисления, он наиболее универсален: его встроенная поддержка есть в Internet Explorer, Chrome, Firefox, Safari, iOS и Android, а отсутствует лишь в Opera, где такое видео декодируется только через внешний плагин.

Кодек Ogg Theora, изначально рассчитанный на системы под Linux, вначале тоже был коммерческим, но теперь лицензируется бесплатно. Встроенная поддержка имеется в браузерах Chrome, Firefox и Opera, в Internet Explorer и Safari доступен только через плагины.

Кодек VP8, ориентированный на мобильные устройства, распространяется Google на условиях Open Source и обеспечивает качество, сходное с H.264, при меньшей сложности декодирования. Встроенная поддержка есть в Chrome, Firefox и Opera, а также в мобильных устройствах под управлением Android.

Таким образом, чтобы обеспечить воспроизведение видеоконтента практически на всех существующих системах, достаточно выкладывать файлы в контейнерах MP4 в стандарте кодирования H.264 и в формате WebM с кодеком VP8. Поскольку изо всех современных десктопных браузеров встроенная поддержка H.264 отсутствует только в Opera, такие сочетания будут самыми универсальными.

5. Существует обширная общедоступная документация

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

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

На сайте разработчиков Mozilla приводится справочник тэгов, причём элементы, которые были добавлены в HTML5, выделены особо.

Подробные описания подхода к интеграции видео в HTML5 можно найти здесь и здесь (тоже на английском языке).

На русском языке краткий справочник HTML5 с примерами применения новых элементов имеется на сайте Puzzleweb.ru.

Кроме того, на русский язык переведено уже довольно много книг по HTML5, среди которых, например, «HTML5 для профессионалов», «Погружение в HTML5» или «Самоучитель HTML5».

Что нужно знать при создании приложений с применением HTML5

Брэндон Сэтром

Продукты и технологии:

Internet Explorer, WebMatrix, Visual Studio 2010, Expression Web 4, Modernizr В

В статье рассматриваются:

HTML5 уже появился, и Web уже никогда не будет прежней.

Несомненно, вы уже слышали об этом. Догадываюсь, что, когда вы это услышали, вы заволновались, закатили глаза или пробормотали «с какой стати?» и слегка нахмурились. А может, вы испытали все эти эмоции.

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

Это первая статья из целой серии для журнала «MSDN Magazine», цель которой — дать полную картину того, почему первая фраза в этой статье является правильной (и важной). На протяжении нескольких месяцев я попытаюсь помочь вам понять, что HTML5 означает для вас — как для веб-разработчика, так и для разработчика, использующего инструментарий и технологии Microsoft. Я надеюсь упростить некоторые сложности, окружающие HTML5, и развеять многие мифы, возникшие на волне общей шумихи вокруг HTML5. Я также познакомлю вас с некоторыми средствами HTML5, доступными в настоящее время, и рядом интересных технологий, которые, хоть и не достигли должного уровня зрелости, заслуживают пристального внимания. Наконец, я дам кое-какие рекомендации, которые помогут вам задействовать технологии HTML5 уже сейчас, несмотря на то, что вы все еще ведете разработки с учетом пользователей более старых браузеров.

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

Что такое HTML5?

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

И, если честно, такому разнообразию толкований можно найти оправдание. HTML5 огромен! Формально определенный организацией международных стандартов World Wide Web Consortium (W3C), HTML5 состоит из более чем 100 спецификаций, относящихся к веб-технологиям нового поколения. Хотя охватить разом столь широкое понятие, как HTML5, и недвусмысленно определить его очень трудно, я считаю, что W3C пыталась ввести HTML5 как обобщающую концепцию перемен, происходящих в Web.

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

Вот и все. HTML5 — это совокупные изменения в HTML, CSS и JavaScript. Эти три термина описывают всю широту и масштаб HTML5. Вы по-прежнему думаете, что это некоторое упрощение? Возможно, но, как вы вскоре увидите, исчерпывающее определение HTML5 не столь значимо по сравнению с технологиями, которые вы выбираете и считаете заслуживающими вашего времени и сил в освоении.

Покончив с определением, потратим несколько минут на позицию Microsoft в отношении HTML5.

HTML5 и Internet Explorer

Как я уже упоминал, набором спецификаций, образующих HTML5, управляет W3C. W3C состоит из персонала, организаций и индивидуальных лиц, заинтересованных в развитии и определении будущего Web. WC3 действует на основе консенсуса и, как правило, формирует комитеты (называемые рабочими группами) для деления работы над спецификациями на части. Спецификации могут предлагаться любым членом, и все спецификации, которыми владеет W3C — их куда больше тех, что относятся к общему термину HTML5, — проходят пятиступенчатый процесс от первого чернового варианта до официальной рекомендации.

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

В этом контексте подход Microsoft сводится к четырем пунктам.

  1. Обеспечить реализацию HTML5 уже сегодня (site-ready HTML5) через Internet Explorer 9.
  2. Предоставлять будущую функциональность разработчикам через Internet Explorer Platform Preview.
  3. Активно участвовать в обеспечении совместимости через тесты, передаваемые W3C.
  4. Создавать прототипы неустоявшихся стандартов через лаборатории HTML5.

Под термином «Site-Ready HTML5» Microsoft подразумевает технологии HTML5, которые можно использовать уже сегодня благодаря широкой поддержке со стороны всех основных браузеров. Технологии вроде новых HTML-тегов, Canvas, Scalable Vector Graphics, Audio and Video, Geolocation, Web Storage и многих новых модулей CSS3 — все попадают под эту категорию, и все они реализованы в Internet Explorer 9, равно как и в других мейнстримовых браузерах. Я предполагаю отвести в этой серии статей немалое время на обсуждение данных технологий, а также тому, как вы можете внедрять их уже сегодня.

Помимо того, что доступно в настоящее время, Microsoft использует общедоступные Platform Preview для информирования разработчиков о том, что появится в следующей версии браузера, и сбора замечаний и предложений. В случае Internet Explorer 9 компания Microsoft выпускала Platform Preview через каждые шесть-восемь недель, объявляя при этом о новых усовершенствованиях, функционале и повышении быстродействия HTML5 и предлагая разработчикам самим опробовать и оценить очередную предварительную версию. Internet Explorer 9 был выпущен в марте, а уже в начале июля Microsoft выпустила две Platform Preview для Internet Explorer 10, сигнализируя тем самым, что Microsoft продолжает регулярный выпуск предварительных версий новых наработок для Internet Explorer. Как разработчик вы наверняка захотите посмотреть новейшие наработки, чтобы проверить их в деле и повлиять на дальнейшее развитие этого браузера. Вы можете скачать новейшую предварительную версию платформы Internet Explorer с сайта IETestDrive.com.

Чтобы добиться согласованной работы HTML5 между всеми браузерами, Microsoft вносит активный вклад в обеспечение совместимости, создавая и передавая в W3C единый крупнейший набор тестов, относящихся к HTML5. Впервые этот набор будет использоваться W3C как авторитетный источник при проверке «готовности» HTML5 в каждом браузере. В конечном счете результат таков, что мы можем один раз внедрить и реализовать технологии HTML5, а потом быть уверенными, что они будут согласованно работать во всех браузерах. Подробнее о работах Microsoft в этой области см. по ссылке bit.ly/dxB12S.

Хотя некоторые технологии HTML5 уже имеются в Internet Explorer 9, а другие заявлены для Internet Explorer 10 через Internet Explorer Platform Previews, некоторые популярные и важные спецификации нуждаются в доработке W3C и поставщиками браузеров до того, как они будут готовы к реализации в наших приложениях. Один из примеров — Web Sockets, потрясающе интересная спецификация, которая позволяет разработчикам устанавливать двухсторонние коммуникационные каналы с внутренними серверами (back-end servers), что открывает веб-приложениям недоступные прежде возможности поддержки соединений уровня «реального времени». Как разработчик вы, несомненно, можете вообразить бесчисленные области применения Web Sockets даже в тех приложениях, которые вы создаете прямо сейчас. Но спецификация Web Sockets все еще быстро меняется, ее ключевые аспекты активно обсуждаются в W3C. С учетом этой ситуации на данный момент эту технологию было бы затруднительно реализовать согласованно и надежно в разных браузерах.

Для неустоявшихся или развивающихся спецификаций вроде Web Sockets (которые я подробно рассмотрю в следующей статье) Microsoft создала HTML5 Labs — сайт для разработчиков, где можно поэкспериментировать с черновыми реализациями этих технологий. Этот сайт предоставляет прототипы, которые можно скачать и опробовать локально, а некоторые спецификации можно посмотреть в виде демонстраций. Цель — создать такое место, где можно самостоятельно экспериментировать с этими спецификациями и сообщать свои замечания как Microsoft, так и W3C. Подробнее о HTML5 Labs см. на сайте html5labs.com.

HTML5 и средства разработки Microsoft

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

В начале 2011 года Microsoft обновила два своих инструмента разработки: Visual Studio 2010 и Expression Web 4. В пакеты обновлений была включен тип документов HTML5 для проверки, а также поддержка IntelliSense для новых тегов и атрибутов HTML5. Если вы используете Visual Studio 2010 SP1, то можете включить HTML5 Schema, выбрав Tools | Options | Text Editor | HTML | Validation, а затем указав HTML5 в раскрывающемся списке Target, как показано на рис. 1. Вы также можете установить HTML5 как схему по умолчанию из HTML Source Editing Toolbar в любом HTML-файле (рис. 2).

Рис. 1. Включение HTML5 Schema через диалог Options

Рис. 2. Задание HTML5 Schema в HTML Source Editing Toolbar

Задав схему по умолчанию, вы получите поддержку IntelliSense в Visual Studio для 28 новых семантических HTML-тегов, а также новых глобальных и специфических для конкретных тегов атрибутов (рис. 3).

Рис. 3. HTML5 IntelliSense в Visual Studio 2010 SP1

Очередное обновление поддержки HTML5 произошло в июне 2011 года с выпуском Web Standards Update for Microsoft Visual Studio 2010 SP1. Это расширение, работающее со всеми редакциями Visual Studio 2010, добавляет дополнительную поддержку HTML5 IntelliSense и проверки в Visual Studio, включает JavaScript IntelliSense для новых возможностей браузера вроде Geolocation и DOM Storage, а также предоставляет обширную поддержку CSS3 IntelliSense и проверку. Вы можете скачать это обновление, которое будет регулярно обновляться с целью совершенствования инструментария для разработки под HTML5, по ссылке bit.ly/m7OB13.

В Expression Web 4 SP1 предлагается та же поддержка IntelliSense, если вы укажете схему HTML5 в Tools | Page Options, а также CSS3 IntelliSense для нескольких черновых модулей CSS3.

Если вы используете WebMatrix (web.ms/WebMatrix), то, вероятно, заметили, что все новые документы .html, .cshtml или .vbhtml, создаваемые вами, содержат разметку по умолчанию, подобную той, которую вы видите на рис. 4. Как будет рассказано в следующей статье, это базовый допустимый документ HTML5. Самое примечательное заключается в том, что теги doctype и meta charset потеряли много своего хлама. Использование этого простого doctype инициирует включение режима HTML5 во всех современных браузерах, и WebMatrix облегчает эту работу, предоставляя документ HTML5 по умолчанию.

Рис. 4. HTML-документ по умолчанию в WebMatrix

Что нового в HTML5 и почему лучше на него переходить

Многие наверняка знакомы или хотя бы слышали о HTML5. О нём говорят как о чём-то новом, современном и очень крутом. Какое-то время он мелькал в интернете везде, а веб-мастеры в свою очередь предлагали свои услуги с использованием HTML5 очень охотно, и, кстати, весьма успешно.


Так что же в нём особенного?

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

Многие говорят, что этот стандарт ещё слишком сырой — слишком много браузеров не способны поддерживать его и смысл тогда его использовать? С этим нельзя поспорить, но стоит сделать поправку — всё больше браузеров начинают поддерживать этот стандарт по ряду причин, главная из которых — борьба с конкурентами.

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

HTML5 не только следит за взаимодействием своих тегов, но и взаимодействия всех наших JS скриптах, видеофайлах в теге с помощью объектной модели документа — DOM.

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

Что нового в HTML5

Первое, что можно заметить — это чистота кода. Пожалуй, это очень приятный бонус как для веб-разработчика, так и для браузера.

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

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

Новинка в HTML5:

    Великолепные формы . Дополнительные возможности к функционалу и внешнему виду форм — вот что нового подготовил для нас новый HTML. Были добавлены множество новых значений, которые значительно упрощают работу с формой. Многие из них способны заменить собой некоторые скрипты и сделать код чище, не теряя в валидности. Среди прочих можно увидеть такие сочные новинки как: ползунок для прокрутки, выбор даты — неплохо, правда? Появился подсказывающий текст, позволяющий создать вполне уютный интерфейс формы. Он активируется во время активации формы и исчезает по истечению времени, либо по клику на него.Проблема формы email-почты частенько была проблемой у устаревших браузеров — они просто отказывались работать с ней. Теперь же этот приятный элемент доступен для всех, а если ваш браузер неактуален — будет выведена простая текстовая форма, взамен формы с типом email.

Таким образом, мы ничего не теряем в использовании и получаем взамен очень удобную фичу.

  • Танк мультимедии — canvas . Canvas — это новый тег в HTML5. Его возможности многогранны. Пожалуй, это прорыв и главный огромный жирный плюс для этого стандарта. Этот тег позволяет делать такие крутые элементы как:
    • рисование
    • проигрывание видео
    • построение оффлайновых веб-приложения
    • создание и работа с геолокацией
    • создание локального хранилища
    • и даже создание игр!

    Несомненно — вы поражены, если не знали об этих возможностях до сих пор!

    Все эти возможности до HTML5 можно было реализовать только за счёт громоздкого Flash, Gears или же JavaScript. Теперь это доступно без применения этих плагинов и скриптов! Только чистый html без сложностей и нагрузки на сайте.

    Самое интересное, что всё это УЖЕ доступно даже на IE9! Более того, уже идёт разговор о решении проблемы поддержки Canvas устаревшими браузерами.

    Я обязательно сделаю ещё один пост про создание игр на HTML5 — это будет очень круто, я уверен! Можете посмотреть пример игры по этой ссылке . Впечатляет, не правда ли?
    Автофокус. Наверняка все мы замечали поисковую форму Google, при заходе на неё . Как только мы зашли на страницу — форма поиска уже активирована и готова к набору поискового запроса.Раньше этот эффект создавался только с помощью JavaScript. В HTML5 это стало гораздо проще и надёжнее: достаточно указать к нужной форме данный атрибут:

    Основы HTML5 или учимся верстать на HTML5

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

    Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.

    Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.

    Верстка div (старая)

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

    Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

    Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.

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

    Теги HTML5

    Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:

    — данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.

    — данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.

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

    — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

    — в этот тег должен входить низ Вашего сайта (Футер)

    — в данный тег входят групы заголовков сайтов, например

    — данный тег включает в себя всю навигацию на сайте (меню).

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

    Вот мы и рассмотрели самые основные теги. Теперь давайте посмотрим теги, которые используются не часто или же в зависимости от тематики сайта:

    — данный тег выводит аудио на сайте.

    — данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.

    — в этот тег должны входить список меню, например ul li.

    — сюда входят время и дата на сайте. Например на блогах дата размещения поста.

    — вставляет видео на страницу.

    — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу
    .

    Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

    А вот как он выглядит по новому:

    Ну как Вам разница? :-) По моему существенная. Так же ещё проще стал тег . Он был такой:

    Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.

    Верстка (новая)

    Перед тем как приступить к вёрстке нам между тегами и нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

    Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:

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

    Как видите, что я просто некоторые div поменял на новые теги, опять повторюсь тут ничего сложного нет, главное знать какой класс за какой участок на сайте отвечает.

    Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div с классом headerInner —

    И не забываем поставить закрывающий тег , а также удалить закрывающий div.

    Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом . В старой вёрстке этот главный блок выглядел так

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

    Вывод

    Друзья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.

    Опять рекомендую Вам переходить Вам на новую технологию.

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

    Илон Маск рекомендует:  mysql_pconnect - Устанавливает постоянное соединение с сервером MySQL.
  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL