Язык гипертекстовой разметки (HTML) был основной технологией Интернета с начала 1990-х годов. Тим Бернерс-Ли создал HTML в 1989 году как простой, но эффективный способ кодирования электронных документов. Фактически, первоначальная цель веб-браузера заключалась в том, чтобы служить средством чтения таких документов. Два десятилетия спустя сам браузер превратился в портал в мир онлайн-медиа. Вот почему HTML5 - это не просто еще одна версия HTML, а всеобъемлющий стандарт работы веб-страниц .
Чтобы лучше понять, что делает HTML5 уникальным, давайте немного повернем время назад. Еще в 1994 году HTML все еще находился в своей первой редакции, Mosaic и Netscape доминировали на рынке браузеров, и большинству людей еще не приходилось сталкиваться с этой новой вещью, называемой World Wide Web. В том же году создатель HTML Бернерс-Ли возглавил недавно созданную группу веб-стандартов, известную как World Wide Web Consortium (W3C).
Хотя W3C сегодня является уважаемым органом в области стандартов, коммерческие игроки на рынке браузеров 1990-х годов в значительной степени игнорировали эти стандарты и прокладывали свой собственный путь. К 1995 году W3C опубликовал вторую редакцию стандарта HTML, а новичок в Интернете - компания Microsoft - набирала обороты со своим браузером Internet Explorer (IE). Microsoft в значительной степени игнорировала стандарты, и Netscape изо всех сил пыталась сохранить респектабельную долю рынка, в то время как IE начал доминировать [источник: Харрис].
Во время этих ранних войн браузеров перед веб-разработчиками стояла задача поддерживать совместимость своих сайтов с каждой новой версией основных браузеров, а также с менее популярными браузерами Opera и Apple Safari. Несмотря на то, что W3C опубликовал HTML 3.2 в 1997 году, а затем HTML 4 в 1998 году, соблюдение стандартов казалось менее важным, чем соблюдение специфических для браузера функций. Так продолжалось до 2003 года, когда Mozilla Foundation сломала эту тенденцию. После первого выпуска браузера Mozilla, а затем браузера Firefox в 2004 году, Mozilla быстро взломала доминирующее положение IE. Кроме того, эти новые браузеры фактически следовали существующим стандартам W3C при этом.
В то время как Mozilla Firefox продолжал развиваться с использованием устаревшего стандарта HTML 4, Mozilla присоединилась к Apple и Opera в 2004 году, чтобы сформировать группу под названием Рабочая группа по технологиям веб-гипертекстовых приложений (WHATWG). Цель WHATWG - поддержать развитие HTML. В 2006 году W3C присоединился к возрождению HTML, хотя сначала он колебался. Вместе WHATWG и W3C объединили существующие спецификации для HTML и XHTML и доработали их, чтобы создать новую спецификацию HTML5. Эта спецификация в настоящее время поддерживается и публикуется W3C [источник: W3C , WHATWG ].
В этой статье исследуется эта новая технология HTML5. Мы рассмотрим XHTML и другие технологии, которые вошли в HTML5, и рассмотрим основные моменты использования HTML5 для создания привлекательного, соответствующего стандартам веб-контента. Мы также рассмотрим некоторые интересные способы использования HTML5 в Интернете. Давайте начнем с рассмотрения целей HTML5 и того, почему это больше, чем просто HTML.
- HTML5 выходит за рамки HTML
- HTML5 Foundation Technologies
- Базовый HTML-контент
- Формы
- Семантические элементы
- Медиа-элементы и соперничество с Flash
- Холст
- Создание образа с помощью CSS3
- JavaScript как центральный компонент
- Технологии веб-приложений
- Новаторские доказательства концепции
HTML5 выходит за рамки HTML
Сам по себе HTML ориентирован на представление статических документов, то есть текста, ссылок и прочего. В HTML 4 стандарт HTML был таким же, как и синтаксис HTML, используемый для достижения этой цели. Стандарт HTML5 имеет гораздо более широкую цель - описать контент, стили и интерфейсы приложений за веб-страницей, когда она загружается в вашем браузере. В частности, HTML5 устанавливает единый синтаксис для взаимодействия со всеми элементами, которые веб-страница загрузила в память вашего компьютера.
Существует потенциальная путаница, которую нам следует прояснить в отношении термина «HTML5», прежде чем мы продолжим. Есть новая версия самого языка разметки под названием HTML5. Однако этот язык является лишь частью более широкого стандарта, носящего название HTML5. В этой статье рассматриваются все компоненты стандарта HTML5, центральным элементом которого является язык HTML5.
Имея в виду это различие, как браузер загружает страницу, написанную в соответствии с новым стандартом HTML5, а не давно существующим языком HTML 4? В конце концов, мы обычно просто полагаемся на наши браузеры для загрузки веб-страниц, не беспокоясь о скрытом за ними HTML. Ответ прост: пока сам браузер поддерживает HTML5, он может обрабатывать все, что вы ему бросаете, без необходимости различать версии HTML.
Чтобы это волшебство произошло, стандарт HTML5 объединяет новые версии нескольких технологий, работающих вместе для достижения общих целей. Эти цели включают следующее:
- Язык должен быть простым и интуитивно понятным
- Обеспечение простоты чтения и поддержки кода
- Адресация страниц как интерактивных приложений, а не статических документов
- Использование каскадных таблиц стилей (CSS) для стилизации содержимого
- Признание JavaScript в качестве центрального компонента сценариев для веб-страниц
- Использование динамического контента из серверных технологий, таких как PHP и ASP.
Теперь, когда вы знаете, что HTML5 - это больше, чем сама разметка HTML, давайте рассмотрим базовые технологии в стандарте.
HTML5 Foundation Technologies
Язык разметки использует серию тегов для маркировки элементов в файле. Разметка опирается на какую-то модель, которая определяет, что это за элементы и как их использовать. Поскольку HTML всегда был для кодирования документов, он полагается на нечто, называемое объектной моделью документа (DOM). Модель DOM встроена в само приложение веб-браузера. Таким образом, язык разметки - это просто способ дать браузеру инструкции на основе модели, которую он уже понимает.
Чтобы лучше понять взаимосвязь между DOM и HTML, подумайте о DOM как о коробке резиновых штампов. Каждый штамп - это отдельный элемент в модели DOM. Каждая страница, написанная в HTML, представляет собой просто серию отпечатков, сделанных с штампов, которые заполняются вашим собственным пользовательским контентом. Веб-браузер может отображать все, что создано из штампов в этом поле.
С технической точки зрения DOM - это интерфейс прикладного программирования (API), обеспечивающий платформо-нейтральный способ обработки документов HTML или XML. (Extensible Markup Language, или XML, похож на HTML, но позволяет программисту добавлять настраиваемый набор элементов, которые вы можете использовать в документе.) Стандарт HTML5 требует DOM, известного как DOM5 HTML. Последние версии браузеров Chrome , Firefox , IE, Safari и Opera, подготовленные к развитию HTML5, могут обрабатывать страницы в DOM5 HTML.
Еще одна важная основа для HTML5 - связанные с ним типы многоцелевых расширений электронной почты ( MIME ). MIME - это стандарт инженерной группы Интернета (IETF) для оповещения программного обеспечения с доступом в Интернет о том, какой тип контента оно пытается обработать. Обычно это соответствует определенному типу файла, например документу HTML или аудиофайлу MP3.
Веб-разработчики указывают типы MIME при кодировании веб-страницы. Это побуждает браузер загрузить соответствующие файлы в соответствии с их типами. Существует два типа MIME, которые присоединяются к DOM5 HTML и составляют основу нового стандарта HTML5: тип MIME HTML (text / html) и тип MIME XML (application / xhtml + xml). HTML5 включает обновления синтаксиса для обоих этих типов MIME.
Короче говоря, фундаментальные технологии в стандарте HTML5 - это DOM5 HTML и HTML5-совместимые типы MIME для HTML и XML. Далее, давайте перейдем к тому, как собрать веб-страницу с помощью HTML5.
Базовый HTML-контент
Как минимум, HTML5 включает версию 5 основного синтаксиса HTML. Пример кода на боковой панели на этой странице показывает, как этот HTML-код может выглядеть для базовой веб-страницы. Когда вы просматриваете Интернет, используйте «Просмотр исходного кода» или аналогичный параметр в вашем браузере, чтобы увидеть HTML (и другой код), загруженный для создания страницы, которую вы просматриваете в данный момент. Весь код, показанный в нашем примере, также обратно совместим с HTML 4, что означает, что он не имеет каких-либо новых дополнений, доступных в HTML5.
Хотя он присутствует не на всех веб-страницах, рекомендуется начинать свой HTML-файл с объявления типа документа (doctype), как показано в примере. Это подтверждает, что браузер должен ожидать стандартный HTML при интерпретации документа. Некоторые разработчики полагаются на расширения стандарта HTML, которые используют файлы определения типа документа (DTD). В этом случае разработчик указывает расположение DTD как часть этого документа.
Помимо doctype, оставшийся код в примере представляет собой стандартный синтаксис HTML. Если вы не знакомы с этим синтаксисом, см. Нашу статью Как работают веб-страницы .
Итак, что нового в этих основных элементах HTML5? Вот список, и мы более подробно рассмотрим каждую на следующих страницах.
- Новые и обновленные элементы формы - макет структуры формы и обработка ввода формы от пользователя
- Семантические элементы - идентификация контента на основе его роли на веб-странице.
- Медиа-элементы - встраивание аудио, видео и других интерактивных медиа без необходимости использования сторонних расширений браузера.
- Элементы Ruby - поддержка интернационализации веб-страниц на азиатских языках
Формы
Хотя формы (разделы веб-сайта, где пользователи могут вводить определенные данные, такие как имена, адреса и т. Д.) Были частью первых элементов, доступных в HTML, им не хватало многих полезных функций до HTML5. Чтобы компенсировать это, сторонние разработчики создали программное обеспечение для веб-форм, благодаря которому базовые HTML-формы кажутся почти устаревшими. Однако HTML5 вдохнул новую жизнь в формы с новыми элементами форм, типами ввода и атрибутами для существующих элементов.
Не делая различия между старым и новым синтаксисом, давайте рассмотрим общий подход к созданию формы для вашей веб-страницы с использованием HTML5. Вот несколько рекомендуемых шагов для начала:
- Создайте блок формы, используя
- Обозначьте блок полей в форме, используя
- Разместите каждое поле в наборе полей с помощью
- В каждом теге метки добавьте имя поля, как вы хотите, чтобы оно отображалось, а также тег для самого поля.
- Используйте атрибут type во входном теге (), который предлагает браузеру проверить ввод пользователя на основе этого типа. Это устраняет необходимость в дополнительном коде для обработки проверки и запроса на повторный вход. HTML5 включает следующие типы ввода: дата, время, datetime, местное время, месяц, неделя, число, электронная почта, тел, URL, диапазон, цвет и поиск. Вы также можете использовать атрибут шаблона с регулярным выражением для создания настраиваемого шаблона проверки.
- Укажите обязательные поля, добавив обязательный атрибут для элемента ввода.
- Используйте атрибут autofocus, чтобы установить конкретный элемент ввода в качестве первого элемента в форме. Здесь веб-браузер автоматически поместит курсор пользователя после загрузки формы.
- Используйте атрибут placeholder, если хотите добавить текстовые подсказки о том, что вводить в данное поле.
- Установите стили CSS для «: required» и «: invalid», чтобы у пользователя была визуальная подсказка к отсутствующей информации или вводу, который не будет подтвержден для данного типа ввода.
Полный список элементов формы и их атрибутов можно найти в актуальном справочном руководстве по HTML5. Также обратите внимание, что поддержка некоторых полей формы зависит от веб-браузеров. Обязательно протестируйте свою форму в каждом браузере, который должен поддерживать ваш веб-сайт.
В то время как элементы формы HTML имеют больше возможностей в версии 5, следующий тип элемента является полностью новым в HTML5.
Семантические элементы
Семантические элементы в HTML5, как следует из их названия, относятся к значению определенного контента. Недостаточно просто использовать только теги, поскольку большинство веб-сайтов сегодня содержат несколько различных типов контента на одной странице. Веб-разработчикам необходимо применять отдельные правила для того, как каждый тип контента должен выглядеть или вести себя.
Без семантических элементов веб-разработчики использовали
Со временем определенные типы контента стали очень распространенными на веб-сайтах, например верхние и нижние колонтитулы, меню и точки навигации. HTML5 включает их, добавляя стандартные семантические элементы. Это означает, что вы можете разбить свой блок на полезные семантические элементы, а не на серию
Ниже приводится список семантических элементов страницы с кратким определением каждого из них. Обязательно найдите ссылку HTML5, которой вы можете доверять, чтобы получить полный список допустимых атрибутов и дочерних элементов для каждого семантического элемента.
Элементы блока:
- раздел - общее разделение страницы, которое помогает разбить более крупный блок контента.
- article - контент, изначально полученный из внешнего источника, иногда добавляемый динамически при загрузке страницы с помощью сценария агрегатора.
- верхний и нижний колонтитулы - блоки, которые появляются вверху и внизу каждой страницы.
- hgroup - группа нескольких связанных заголовков, таких как заголовок и подзаголовок
- menu - список команд (см. элемент команды) и атрибутов, определяющих поведение меню
- nav - определяет блок, предназначенный исключительно для навигации по веб-сайту, обычно это неупорядоченный список ссылок на другие страницы сайта.
- адрес - включает в себя контактную информацию об авторе контента в блоке, например статьи, раздела или всего тела страницы.
- в сторону - указывает, что контент следует рассматривать как боковую панель
Встроенные элементы:
- Сводка и подробности - переключение между тизером / сводкой и полной информацией для одного и того же контента
- figure и figcaption - элементы, используемые для применения общего поведения к изображениям, независимо от того, какие медиа-элементы (img, svg или canvas) используются для их включения
- время - текст, представляющий календарную дату, время на часах или и то, и другое, отформатированный так, чтобы браузер мог при необходимости корректировать разницу часовых поясов
- команда - метка и поведение, связанное с этой меткой, когда вы используете клавиатуру или мышь для взаимодействия с ней, обычно используется внутри блока меню
- dfn - термин, который определяется в контенте
- wbr - тег, указывающий допустимое место для разрыва текста в слове, когда он переносится на несколько строк
Семантические элементы были созданы как усовершенствование по сравнению с более общими элементами HTML. Однако следующий новый тип элемента призван полностью заменить сторонние мультимедийные расширения в веб-браузерах.
Пространство или нет места?
Возможно, вы заметили, что когда мы ссылаемся на другие версии HTML, такие как HTML 4, перед числом стоит пробел, тогда как в ссылках на HTML5 пробела нет. В сообществе HTML было много дискуссий и дебатов по этому поводу, но в конечном итоге и WHATWG, и W3C приняли HTML5 в качестве официального написания, чтобы документация была согласованной.
Медиа-элементы и соперничество с Flash
Одна из самых обсуждаемых особенностей HTML5 - это новый подход к встраиванию мультимедиа на веб-страницу . Позже в этой статье мы рассмотрим некоторые удивительные применения этой функции HTML5. HTML5 выполняет это встраивание, не требуя внешнего подключаемого модуля браузера. В HTML5 доступны следующие мультимедийные элементы:
- audio - встраивает звук на страницу и включает атрибуты, определяющие, как его воспроизводить; поддерживаемые форматы файлов будут различаться в зависимости от веб-браузера.
- видео - внедряет видео на страницу и включает атрибуты, определяющие, как его воспроизводить; поддерживаемые форматы файлов будут различаться в зависимости от веб-браузера.
- источник - используется с аудио или видео элементами для идентификации источника; для одного элемента можно указать несколько источников
- embed - встраивает и указывает тип мультимедиа для контента, который может не поддерживать в других элементах мультимедиа
- холст - выделяет часть страницы или экран компьютера, на котором JavaScript может рисовать изображения; в ближайшее время мы узнаем больше о том, как работает эта важная новая функция.
- svg - встраивать векторную графику, закодированную с помощью языка разметки SVG, что позволяет динамически масштабировать ее до области страницы, в которую они загружены, без потери качества графики.
По мере развития HTML5 эксперты рынка сомневались, сможет ли он заменить Flash, который в настоящее время контролируется Adobe. Flash - это медиаплеер, который вы можете добавить в качестве подключаемого модуля к своему веб-браузеру. Поскольку Flash имеет все функции, необходимые для встраивания на сайт различных типов мультимедиа, такие сайты, как YouTube, зависели от него в течение многих лет. Есть даже некоторые веб-приложения, которые полностью полагаются на Flash в своих интерактивных интерфейсах. В 2007 году использование Flash было настолько широко распространено, что после выпуска долгожданного Apple iPhone многие потребители были расстроены, узнав, что его операционная система Apple iOS не поддерживает Flash.
Когда Google , возможно, крупнейший бренд в Интернете, с головой погрузился в разработку своих приложений с использованием HTML5, сторонники Flash обратили на это внимание. До HTML5 единственной угрозой доминированию Flash были разработчики веб-приложений, желающие создавать и поддерживать собственные альтернативы HTML / JavaScript. С HTML5 такие громоздкие настройки больше не нужны при создании интерактивного мультимедийного интерфейса, конкурирующего с технологией Flash.
Итак, кто победит: Flash или HTML5? Короткий ответ: «Ни то, ни другое». У каждой технологии есть свои особенности, преимущества и недостатки. Кроме того, Adobe и Google работали над инструментами преобразования Flash в HTML5. На момент написания этой статьи казалось, что, хотя HTML5 набирает статус, Flash, вероятно, тоже какое-то время сохранит свою популярность.
Перейдите на следующую страницу, где мы разберем элемент холста и способы его использования на веб-страницах HTML5.
Холст
Одна из самых важных новых функций HTML5 - холст. Функция холста позволяет идентифицировать раздел веб-страницы , рисовать в нем контент и добавлять интерактивные функции. Все это возможно с помощью комбинации кода HTML и JavaScript . Давайте рассмотрим три части, которые вам понадобятся для настройки холста в HTML5:
Часть 1. Используйте
width = "400"
height = "300>
Если вы видите этот текст, ваш браузер
не поддерживает холст HTML5.
Часть 2: Создайте JavaScript, который рисует контент на холсте. Позже мы узнаем, как добавлять и управлять кодом JavaScript, связанным с веб-страницей HTML5. Здесь давайте просто рассмотрим пример кода JavaScript, который вы можете использовать для объектов холста. Следующий код рисует прямоугольник на холсте выше:
function drawRectangle () {
var targetCanvas = document.getElementById ("sampleCanvas");
var rectContext = sampleCanvas.getContext ("2d");
rectContext.fillStyle = "синий";
rectContext.fillRect (50, 25, 150, 100);
}
Эта функция рисует на холсте сплошной синий прямоугольник. Две строки «var» создают переменные, которые вы можете использовать. Первый (targetCanvas) идентифицирует целевой элемент холста, используя его идентификатор из HTML. Второй (rectContext) устанавливает двумерный контекст для рисования. Думайте о контексте как о прозрачном слое стекла, положенном поверх холста, и вы вызываете функции для рисования на этом стекле.
Строка fillStyle идентифицирует синий цвет по имени, который HTML распознает и связывает с одним из названных цветов. Вы также можете использовать любой цвет, узор или градиент, как при написании кода стиля в HTML или CSS. Линия fillRect рисует прямоугольник, начиная со смещения от верхнего левого угла, первые два числа представляют собой смещения x и y, как если бы верхний левый угол холста находился в координатах (0,0). Вторые два числа указывают ширину и высоту прямоугольника соответственно.
Часть 3. Вызов функции JavaScript из HTML-кода. Это связывает две части вместе. Вы можете вызвать функцию сразу после загрузки веб-страницы, что имеет смысл, если вы используете холст для рисования интерактивного содержимого страницы, которое должно появиться, как только страница загрузится. Другой вариант - создать кнопку, меню или другой элемент в HTML, который запускает событие рисования. Ниже приведен пример кнопки, которую можно использовать для запуска приведенного выше примера сценария:
Dive Into HTML5 содержит простое руководство по созданию элементов холста для ваших веб-страниц. Кроме того, надежный справочник HTML5 должен предоставить обширные ресурсы для рисования сложной графики, как неподвижной, так и движущейся. Если вы хотите широко использовать холст в HTML5, вам необходимо уметь программировать на JavaScript. Затем давайте исследуем, как CSS3 создает внешний вид веб-страницы HTML5.
Создание образа с помощью CSS3
Каждый элемент HTML имеет ряд атрибутов, которые вы используете в коде для изменения внешнего вида или функции этого элемента. Стиль и связанные атрибуты регулируют размер, цвет, размещение, границы и другие физические аспекты элемента. За годы существования Интернета разработчики сайтов широко применяли практику отделения стиля от содержания. Делая это разделение, разработчики получают следующие преимущества:
- Меньше кода для поддержки: несколько элементов на нескольких веб-страницах могут использовать одни и те же стили без повторения кода стилизации для каждого из них.
- Более легкое обслуживание с течением времени: обновление до нового стиля или исправление существующего означает изменение только одного фрагмента кода стиля, а не обновление каждого элемента с помощью этого кода.
Следовательно, хотя стили можно согласовать с кодом HTML, более популярным выбором для веб-разработчиков является использование каскадных таблиц стилей (CSS) для управления всем кодом стилей, связанным с веб-сайтом. HTML для каждой страницы может ссылаться на одну или несколько таблиц стилей, которые ваш браузер должен загружать при загрузке страницы. Эти таблицы стилей в виде файлов CSS предназначены для имитации того, что вы можете ввести, используя
