Поскольку HTML — это язык, который управляет Интернетом, чтобы по-настоящему использовать возможности Интернета, вам необходимо понимать HTML5. В этой последней версии HTML представлены значительные улучшения, которые изменяют способ отображения страниц и доставки интерактивности. Это также снижает потребность в подключаемых модулях браузера. Когда вы освоите HTML5, вы сможете создавать динамичные, мощные веб-сайты, которые одинаково хорошо работают как на настольном устройстве, так и на смартфоне или планшете.
Начало HTML5
Нет сомнений в том, что обилие устройств, а также ожидания пользователей и владельцев сайтов в отношении очень интерактивных и привлекательных сайтов привели к необходимости HTML5. В 2006 году Консорциум World Wide Web (W3C) и Рабочая группа по технологиям веб-гипертекстовых приложений (WHATWG) объединили свои усилия для его создания. Проект начался с параметров, которые включали:
- Снижение необходимости и зависимости от плагинов браузера, таких как Flash, для доставки контента.
- Используйте меньше сценариев, вместо этого замените сценарии разметкой.
- Наличие функций на основе HTML, CSS, DOM и JavaScript
- Обеспечение независимости языка разметки от устройства
Что предлагает HTML5
Нет плагинов
Одним из ключевых компонентов HTML5 является концепция, согласно которой браузеры не должны полагаться на плагины для отображения содержимого. Изменения в языке разметки были необходимы, чтобы приспособиться к ситуациям, которые в прошлом можно было решить только с помощью плагина. По этой причине HTML5 включает новые теги с их атрибутами и свойствами, предназначенными для обработки всего, от анимации до фильмов в Интернете.
Независимость от устройства
Другой важной частью системы является то, что она является кросс-платформенной, а это означает, что HTML5 работает на различных устройствах, включая нетбуки, смарт-телевизоры, ноутбуки и даже смартфоны. Благодаря этому важному усовершенствованию дизайнерам стало проще создавать сайты с более широким набором функций. Новый стандарт убрал около дюжины устаревших тегов .
Поддержка браузера
Хотя теоретически все основные браузеры поддерживают HTML5, на практике работа над ним еще не завершена. Каждый из пяти основных браузеров (Internet Explorer, Firefox, Chrome, Safari и Opera) реализует больше функций HTML5 с каждой версией, которую они выпускают.
Больше контроля страницы
Изменения, созданные в HTML5, сосредоточены вокруг нескольких основных тем, в том числе:
- Дополнительные параметры структурного контента
- Новые теги для размещения различных вариантов мультимедиа
- Интерактивные теги, такие как холст, которые включают в себя возможности JavaScript.
- Новые элементы для форм, улучшающие дизайн и удобство использования
Пять советов и хитростей
Хотя было бы невозможно объяснить все, что предлагает HTML5, в одной статье, есть важные изменения, которые вы захотите изучить, в том числе пять перечисленных ниже. Эффективный метод изучения всех новых стандартов состоит в том, чтобы разделить их на управляемые сегменты и освоить концепции каждого модуля, прежде чем переходить к следующему.
1. Центрирование изображения
С удалением из HTML5 тега <center> центрирование изображения теперь выполняется по-другому. Несколько способов сделать это:
- IMG {маржа:авто;дисплей:блок;}
- Создайте <div> и настройте его с помощью text-align:center : div.center-image {text-align:center}
2. Аудио
Тег audio определяет аудиофайлы, такие как MP3, Wav и Ogg. Поддержка этих форматов зависит от браузера, но если вы используете файлы Ogg и MP3, будут доступны пять основных браузеров. Атрибут src обязателен, остальные пять нет. К ним относятся: автовоспроизведение, элементы управления, цикл, отключение звука и предварительная загрузка. Всегда включайте текст между тегом включения/выключения, так как он будет отображаться в браузерах, не поддерживающих тег audio.
<управление звуком>
src=»horse.ogg» type=»аудио/ogg»>
src=»лошадь.mp3″ тип=»аудио/mpeg»>
Ваш браузер не поддерживает тег audio.
</аудио>
3. Видео
Тег видео обозначает контент, такой как видеоклипы или потоковое видео. В настоящее время тег поддерживает три формата: MP4, WebM и Ogg. Все основные браузеры поддерживают один или несколько форматов, а Chrome поддерживает все три. Как и в случае с тегом audio, любой текст, помещенный между тегом on/off, будет отображаться в браузере, который не поддерживает этот тег. В дополнение к необязательным атрибутам тега аудио, тег видео также имеет атрибуты ширины и высоты для управления размером видеоплеера и атрибут плаката, который можно использовать для отображения изображения при загрузке видео.
<видео ширина=»320″ высота=»240″ элементы управления>
src=»фильм.mp4″ тип=»видео/mp4″>
src=»movie.ogg» type=»video/ogg»>
Ваш браузер не поддерживает видео тег.
</видео>
4. Холст
Функция холста позволяет пользователю в реальном времени изменять изображение или графику внутри своего браузера. Например, пользователь может щелкнуть точку данных, и сценарий обработает действия пользователя и отобразит графику, созданную этими действиями.
5. Геолокация
Этот стандарт, который использует API геолокации HTML5 для определения географического местоположения пользователей, является мощным инструментом, особенно для смартфонов и мобильных сайтов. Код внутри HTML-документа использует метод программирования для доступа к API и заключает функцию в теги скрипта. Из-за потенциальных проблем с конфиденциальностью пользователи должны разрешить доступ и раскрытие своего местоположения.
Освоение изменений
Если вы хотите полностью изучить изменения и начать их использовать, лучше всего начать с учебных пособий, предлагаемых W3Schools.com и Udemy . Редактор Try-It от W3schools позволяет вам поэкспериментировать с кодированием, чтобы лучше понять новый стандарт. Курс Udemy HTML5 дает вам доступ к 37 лекциям (от 5 до 30 минут каждая) и викторинам для повышения уровня ваших навыков.