Личный кабинет

Новшества HTML5

Порою хочется сделать нечто большее, нежели просто сайт. Например, создать кроссплатформенную игру без применения технологии Flash. Или же презентацию с удивительными переходами и эффектами без использования сторонних программ, таких как: Microsoft PowerPoint, Open Office Impress и т.д. HTML5 поможет в этом деле!

Анастасия Кулакова

08 Январь 2015

3851

Обучайся бесплатно с WAYUP Premiere сегодня вечером

О главном

HTML5 – это совершенно новая платформа, при помощи которой можно проектировать не только сайты, но и довольно мощные веб-приложения. Эта новая технология принесла разработчикам множество полезных тэгов, хотя с точки зрения синтаксиса он такой же, как и предшественники (HTML 4.01, XHTML 1.0). Этот плюс заключается в том, что front-end-специалистам не придется привыкать к новым «обычаям» HTML5.

Так что же привносит этот ничем не примечательный, на первый взгляд, HTML5?

Скелет по-новому

Я думаю, что вы когда-нибудь строили сетки для сайтов. Помните, как приходилось разграничивать каждый блок? Примерно вот так: <div class=”box”></div>. И каждый такой элемент на странице пришлось бы оборачивать в блок div с одним или несколькими классами. Основные части страницы (шапка, сайдбар, главная часть, подвал) называются на всех сайтах, как правило, одинаково (header, aside, article, footer соответственно). Эти названия так часто используются в наименовании классов, что их превратили в отдельные теги HTML5. Список в студию!

<header></header> - шапка страницы

<article></article> - главная часть страницы

<aside></aside> - сайдбар

<footer></footer> - подвал страницы

Технически, эти тэги равносильно тэгу <div class=”…”></div>, где многоточие – шапка, главная часть страницы, сайдбар, или же подвал страницы. И, конечно же, вы теперь понимаете, почему лучше написать для шапки тэг <header></header> нежели чем <div class=”header”></div>. Во-первых, такая запись короче; во-вторых - уменьшает шанс допустить ошибку в коде (если в старых версиях HTML каждый блок приходилось заключать ТОЛЬКО в div, а их может быть несколько десятков и можно довольно-таки просто запутаться в местах открытия и закрытия тэга, то в HTML5 эти тэги быстро бросаются в глаза и дают понять, где место открытия и закрытия тэга). И, в-третьих, использование классов будет все же сокращено.

Задача для гениев

Мой учитель постоянно говорил, что «проектирование макета сайта – самая сложная часть в создании сайта». А вот я, например, считаю, что самая сложная часть в создании сайта – написать код для определения типа документа. Серьёзно. Только человек с феноменальной памятью сможет запомнить код для определения того или иного типа документа. Теперь проблема исчерпана с HTML5, так как он сокращает длиннющий код до двух словечек: <!DOCTYPE html>. Просто, и сложно забыть.

Мощный медиа-друг

Серьёзной проблемой до появления HTML5 была вставка файлов медиа в веб-страничку. Приходилось для этих целей применять либо тег object (с несколькими параметрами; в итоге для вставки файла строчек кода было многовато), либо вставить Flash-проигрыватель (так же приходилось для места под проигрыватель создавать тэг object). Но на дворе XXI век, к чему нам сложности? HTML5 сделает за нас всю грязную работу. А, точнее, тэги <audio> и <video>, которые позволяют добавить на страницу музыку и видео соответственно.

Ну, и последнее на сегодня. Вы уже знаете, что картинки в HTML’е можно вставить, используя тэг <img>. А если мы хотим не импортировать картинку, а рисовать, создавать свое искусство прямо в HTML? HTML5 решил и эту задачу, введя новый тэг <canvas>.

Стоит отметить, что "рисовать" придется при помощи кода JavaScript. В этой связи разработчики начали применять эту возможность не только для создания графики, но и для всевозможных игр и красивых эффектов. Один тэг – а сколько полезностей!

Резюме

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

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

Дерзайте и используйте HTML5 уже сегодня, проходя очередное занятие!