Введение
HTML5 – это новая версия HTML. Наиболее интересные нововведения HTML5:
- поддержка видео и аудио (элементы video и audio);
- возможности рисования на веб-страницах произвольных объектов (элемент canvas);
- улучшение форм (новые значения type для <input> и множество новых элементов и атрибутов);
- добавление семантических тэгов, позволяющих сделать веб-страницы более понятными для поисковых систем, браузеров и других программ и устройств, читающих веб-страницы (элементы footer, header, nav, article и др.);
- DOM-хранилища – более функциональная альтернатива cookie.
HTML5 содержит специальный тэг, позволяющий встраивать в веб-страницы видео файлы:
HTML5 
<video>
Атрибут src тэга:
HTML5 
<audio>
позволяет указать путь к видео файлу, атрибут controls отображает в плеере кнопки управления видео, a атрибуты height (высота) и width (ширина) задают размеры плеера. Например:
HTML5 
<video src=video.ogv" width="300" height="200" controls="controls"></video>
С помощью нового HTML5 элемента <audio> можно добавить на вебстраницу музыкальную композицию. Атрибут src тэга <audio> позволяет указать путь к аудио файлу, а атрибут controls добавляет кнопки управления. Например,
HTML5 
<audio src="stop.ogv" controls="controls"> </audio>
Лабораторные работы:
Лабораторная работа 1
Задания
Задание 1. Создать новую веб-страницу. Вставит заголовок в центре страницы «Я, ФИО, изучаю HTML5». Подсветить ФИО с помощью тега <mark>.
Задание 2. Вставить аудио и видео файлы.
Задание 3.
Перейти
Лабораторная работа 2
Задания
Задание 1. Создайте гистограмму, используя элемент Canvas.
Порядок выполнения:
1. Создайте чистый лист для рисования. Определите функцию (например, drawgist).
2. Используя moveTo() и lineTo(), начертите оси.
3. Используя fillText(), добавьте обозначения. Задайте тексту размер, начертание, шрифт.
Перейти
Лабораторная работа 3
Задания
Задание 1. Открыть свою веб-страницу, созданную в предыдущей работе. Создать на странице форму с новыми элементами и атрибутами, перечисленными выше.
Задание 2. Оформить страницу с помощью семантических тэгов: footer, header, nav. Тег footer должен содержать данные автора (ФИО, курс, группа, телефон и email). Телефон и email взять из соответствующих элементов формы.
Перейти