Автор:WebForMySelf
HTML 5 предоставляет более широкие функциональные возможности и упрощает процесс создания сайтов. Сразу стоит отметить, что HTML 5 - это не полностью новая технология или полностью новый стандарт, html5 - это дополненный новыми возможностями html4. Поэтому все что работало в html 4 будет работать и в html5. Конечно, есть некоторые конструкции, которые уже устарели и в html5 не вошли, но об этом мы детально поговорим в самом курсе.
Урок 1. Структура документа HTML5
В первом уроке курса мы начнем говорить о том, что такое html5. При изучении html5 важно понимать, что это новый стандарт и не все его функции в полном объему могут поддерживаться в том или ином браузере. В уроке мы рассмотрим два сервиса, которые помогут нам определять, какие новшества html5 в каких браузерах поддерживаются. Так же рассмотрим структуру документа html5, проанализируем новый синтаксис тегов.
Урок 2. Тег header и footer
В данном уроке мы продолжим изучать HTML5 и начнем изучение новых семантических тегов. Рассмотрим группу тегов, которые формируют разметку страницы. Более подробно рассмотрим теги header и footer. Рассмотрим на реальных примерах где и как применяются данные теги.
Урок 3. Тег article
В третьем уроке курса мы рассмотрим тег article. Данный тег предназначен для выделения независимой части контента. В уроке мы рассмотрим, чем могут быть независимые части контента, рассмотрим несколько примеров использования тега article, а также я расскажу вам про универсальный способ, которые позволяет определить, стоит ли к участку контента применять тег article или нет.
Урок 4. Тег section
В данном уроке мы рассмотрим тег section, который очень похож на тег article, рассмотренный мы изучили в предыдущем уроке. Узнаем как его использовать в работе. Вообще говоря, тег article является частным случаем тега section и поэтому возникает путаница при использовании данных тегов. В уроке мы с вами подробно разберем использование тега section, а также рассмотрим его отличия и сходства с тегом article. Рассмотрим использование этих двух тегов на реальных примерах, чтобы все окончательно стало понятно.
Урок 5. Теги nav, main и aside
В уроке мы продолжаем изучать семантические теги html5. Рассмотрим сразу три несложных тега nav, main и aside. И, хотя названия тегов говорят сами за себя, есть некоторые особенности из применения, о которых стоит рассказать. Так же мы рассмотрим несколько реальных примеров использования данных тегов, чтобы их применение стало окончательно понятным.
Урок 6. Теги figure и figcaption
Для того, чтобы объединить несколько связных элементов, например, изображение и пояснение к изображению, нам необходимо было оборачивать их в абстрактный блок div. В html5 для этого есть специальные теги figure и figcaption. В уроке мы с вами познакомимся с данными тегами, рассмотрим пример использования данных тегов, а также узнаем о всех особенностях данных тегов.
Урок 7. Кроссбраузерное оформление HTML5 тегов
Как я уже говорил в начале нашего курса, не все новшества html 5 поддерживаются всеми браузерами в полном объеме. Более того, если говорить о старых версиях IE, то он вообще не понимает новых тегов, а соответственно для данных тегов мы не сможем назначать стили.
Урок 8. Тег input. Новые типы тега в html 5. Часть 1
Тег input в HTML 5 имеет гораздо больше типов. Появились новые типы input для ввода email, для ввода номера телефона, для ввода чисел и др. Так же появилась возможность проверять указанием атрибута для тега input обязательно ли поле для заполнения и соответствуют ли введенные пользователем данные необходимому формату записи. В этом уроке мы с вами рассмотрим все эти возможности HTML 5 на примерах.
Урок 9. Тег input. Новые типы тега в html 5. Часть 2
В предыдущем уроке мы начали рассматривать новые типы для тега input. Стоит отметить, что все типы тега input рассмотренные в предыдущем уроке обладают хорошей поддержкой браузеров и их уже можно широко использовать. Но тег input в HTML 5 имеет еще несколько новых типов, которые пока поддерживаются не всеми (даже современными) браузерами, но они открывают для нас действительно широкие возможности. В данном уроке мы рассмотрим как раз такие типы для тега input.
Урок 10. HTML 5 video. Вставка видео на сайт
С появлением нового тега video в html5 установить видео на сайт стало достаточно просто. Однако есть некоторые нюансы, которые нужно учесть для того, чтобы видео гарантировано проигрывалось во всех браузерах. В данном уроке мы рассмотрим, как правильно вставить видео на сайт, что при этом нужно учесть. Так же рассмотрим атрибута тега video, которые расширяют и дополняют возможности для проигрывания видео на сайте.
Урок 11. HTML 5 audio. Вставка аудио на сайт
Аналогично вставке видео на сайт, которую мы рассмотрели в предыдущем уроке, в html5 появилась возможность вставить аудио на сайт. Для установки аудио на сайт в html5 появился новый тег audio. Используя его, можно очень быстро и просто вставить аудио на сайт. В данном уроке мы рассмотрим, как это сделать, что при этом нужно учесть. Так же рассмотрим атрибуты тега audio, которые расширяют его и дополняют новыми возможностями.
Урок 12. HTML 5 canvas. Рисование в HTML 5
С помощью тега canvas в html5 можно рисовать различные объекты на странице. Тег canvas создает область на странице, на которой при помощи команд javascript можно рисовать различные изображения. Использование тега canvas не ограничивается только рисованием. Используя canvas можно создавать анимации и даже игры. В данном уроке мы с вами познакомимся с тегом canvas, рассмотрим html5 canvas примеры и, кончено, порисуем в нем используя команды javascript.
Урок 13. HTML5 geolocation. Определение местоположения в HTML 5
В html5 есть еще одна новая возможность, которая позволяет определить текущее местоположение пользователя. Наиболее точно определяется позиция для пользователей мобильных устройств, в которых есть GPS. И поскольку количество посетителей сайтов с мобильных устройств становится все больше и больше, данную возможность можно использовать на некоторых сайтах, на странице контактов. В данном уроке мы с вами познакомимся с геолокацией в html5, рассмотрим html5 geolocation пример, в котором определим свое текущее местоположение.
Было полезно? Ставь лайк
#html5 #html #верстка сайтов #верстальщик #программирование для начинающих
Верстка сайта для начинающих ->
zen.yandex.ru/...271bd21e52
Учебник по основам CSS для начинающих->
zen.yandex.ru/...524bff358e
Учебник по основам HTML для начинающих->
zen.yandex.ru/...0f235fce3e