Модернизация традиционной HTML-формы

Размещено на http://www.allbest.ru/

Министерство транспорта Российской Федерации

Федеральное агентство железнодорожного транспорта федеральное государственное бюджетное образовательное учреждение высшего образования

Омский государственный университет путей сообщения

(ОмГУПС (ОмИИТ))

Кафедра «Автоматика и системы управления»

ОТЧЕТ

по производственной практике

Студент гр. 24З

________Лазарева Н.П.

__________201__г.

Руководитель производственной практики

доцент кафедры АиСУ Д.А.Елизаров

Оценка

Д.А.Е лизаров

__________201__г.

201__/201__ учебный год

Содержание

кодировка преобразование html

Введение

1 Цель отчета

2 История HTML5

3 Простой документ HTML5

3.1 Кодировка символов

3.2 Язык

3.3 Добавление таблицы стилей

3.4 Добавление JavaScript-кода

4 Веб-формы

4.1 Модернизация традиционной HTML-формы

4.2 Добавление подсказок

4.3 Фокус

5 Аудио и видео в HTML5

5.1 Воспроизведение аудио с помощью элемента

5.2 Воспроизведения видео с помощью элемента

Заключение

Библиографический список



Введение

HTML5 (англ. HyperText Markup Language, version 5) -- язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён только в 2014 году (предыдущая, четвёртая, версия опубликована в 1999 году), ещё с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками -- использование рабочего стандарта (англ. HTML Living Standard).

Цель разработки HTML5 -- улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.

HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.

В HTML5 реализовано множество новых синтаксических особенностей, он также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.



1 Цель отчета

Целью моей работы является знакомство с языком HTML5, а так же с его возможностями. Изучить некоторые теоретические сведения, разобрать и рассмотреть конкретные примеры на практике (программном коде).



2 История HTML5

WHATWG начал работу над новым стандартом в 2004 году, когда World Wide Web Consortium (W3C) сосредоточился на будущих разработках XHTML 2.0, а HTML 4.01 не изменялся с 2000 года. В 2009 году W3C признал, что срок работы у рабочей группы XHTML 2.0 истёк, и решил не возобновлять его. Впоследствии W3C и WHATWG совместно разрабатывали HTML5.

Спецификация HTML5 была принята в качестве точки начала работы над новым HTML рабочей группой W3C в 2007 году. Эта рабочая группа опубликовала спецификацию как первый публичный рабочий проект (working draft) 22 января 2008 года. Рабочий проект -- это текущая работа, она оставалась на несколько лет, её части HTML5 были закончены и реализованы в браузерах до того момента, когда вся спецификация достигла финального статуса «Рекомендовано».

В декабре 2009 года WHATWG переключилась на универсальную модель разработки для спецификации HTML5.W3C всё ещё продолжала публиковать снимки со спецификацией HTML5.

14 февраля 2011 года W3C увеличил срок работы для рабочей группы HTML с промежуточными снимками для HTML5. Рабочая группа предполагала продвинуть HTML5 в Last Call, приглашая сообщества к сотрудничеству с W3C, чтобы подтвердить техническое отсутствие дефектов в спецификации в мае 2011 года. Затем группа переключилась на тестирование своей реализации. W3C также разрабатывала всестороннюю проверку, чтобы добиться широкой функциональной совместимости для финальной спецификации 2014 года -- ожидаемой даты для Рекомендации

С 28 октября 2014 года W3C официально рекомендует использовать HTML5 -- это значит, что стандарт окончательно финализирован и готов к широкому использованию.

3 Простой документ HTML5

Рассмотрим один из простейших документов HTML5. Он начинается с указания типа документа с помощью специального кода описания типа документа, после чего задается кодировка и название документа, а потом идет его содержимое. Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.

В данном случае содержимое состоит из одного абзаца текста:

<!DOCTYPE HTML>

<meta charset="utf-8">

<title>Крошечный документ HTML5</title>

<p>Дадим встряску браузеру в стиле HTML5!</p>

Листинг 1 - Пример абзаца текста

Этот простой документ можно упростить еще больше. Например, конечный тег </р> вообще-то не является обязательным в стандарте HTML5, т. к. браузеры знают, как закрывать все открытые элементы в конце документа (а стандарт HTML5 узаконивает это поведение). Но подобное срезание углов вместо упрощения делает разметку более сложной для понимания и может вызвать неожиданные ошибки.

Большинство веб-разработчиков придерживается мнения, что использование традиционных разделов <head> и <body> полезно для облегчения восприятия документа, т.к. они четко разделяют информацию о странице (заголовок страницы) и само содержимое (основная часть страницы). Такая структура особенно полезна, когда к странице добавляются сценарии, таблицы стилей и мета элементы:

<!DOCTYPE HTML>

<head>

<meta charset="utf-8">

<title>Крошечный документ HTML5</title>

</head>

<body>

<p>Дадим встряску браузеру в стиле HTML5!</p>

</body>

Листинг 2 - Пример использования традиционных разделов

Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент <html>, как показано в следующем листинге:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Крошечный документ HTML5</title>

</head>

<body>

<p>Дадим встряску браузеру в стиле HTML5!</p>

</body>

</html>

Листинг 3 - Пример применения элемента <html>

Вплоть до HTML5 в каждой версии официальной спецификации HTML требовалось использование элемента <html>, несмотря на то, что наличие этого элемента никаким образом не влияет на обработку браузером остального кода страницы. В HTML5 использование этого элемента оставлено полностью на личное усмотрение разработчика.

Использование элементов <html>, <head> и <body> является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов <html>, <head> и <body>, даже если разработчик и не использовал их.

3.1 Кодировка символов

кодировка преобразование html

Кодировка -- это стандарт, указывающий компьютеру, каким образом преобразовывать текст в последовательность байтов при записи текста в файл (а также, как выполнять обратное преобразование при открытии файла). По историческим причинам в мире существует множество разных кодировок. В настоящее время практически на всех веб-сайтах используется компактная и быстрая кодировка UTF-8, поддерживающая все символы других алфавитов, которые вам когда-либо могут потребоваться.

Веб-серверы часто настраивают, чтобы сообщать посещающим их браузерам, что предлагаемые сервером страницы имеют определенную кодировку. Но нельзя быть уверенным, что веб-сервер, на котором вы планируете разместить свой веб-сайт, будет настроен таким образом (если только это не ваш собственный сервер). Кроме этого, попытка браузера в таком случае предположить наиболее вероятную используемую кодировку может претерпеть неудачу по причине какого-либо малоизвестного вопроса безопасности. По этим причинам всегда следует вставлять информацию об используемой кодировке в разметку страницы.

HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент <meta> в самом начале блока <head> (или, если элемент <head> не используется, сразу же после кода описания типа документа):

<!DOCTYPE HTML>

<head>

<meta charset="utf-8">

<title>Крошечный документ HTML5</title>

</head>

Листинг 4 - Использование элемента <meta>

Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.

3.2 Язык

Считается хорошим тоном указывать естественный язык веб-страницы. Чтобы указать язык для какого-либо содержимого, используется атрибут lang в любом элементе разметки с заданием кода требуемого языка. Код для русского языка -- ru, а для английского -- en.

Вставить в веб-страницу информацию о языке легче всего через элемент <html>:

<html lang="ru">

Листинг 5 - Пример указания языка

Информация о языке также может быть полезной, если страница содержит текст на разных языках, который нужно прочитать с помощью программы чтения экранного текста. В таком случае атрибут lang с кодом соответствующего языка вставляется в нужном месте документа, например, в элементы <div>, охватывающие текст на разных языках. Таким образом, программа чтения экранного текста способна определить, какой текст она может читать.



3.3 Добавление таблицы стилей

Практически в каждой странице должным образом разработанного профессионального веб-сайта используются таблицы стилей. Для указания требуемой таблицы стилей используется элемент <link> в блоке <head> документа HTML5:

<head>

<meta charset="utf-8">

<title>Крошечный документ HTML5</title>

<link href="style.css" rel="stylesheet">

</head>

Листинг 6 - Пример использования таблицы стилей

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей -- CSS, то в добавлении атрибута type="text/css", который требовался ранее, больше нет надобности.

3.4 Добавление JavaScript-кода

Код JavaScript вставляется в документ HTML5 по большому счету таким же способом, как и в традиционную HTML-страницу. В следующем листинге приводится пример вставки в веб-документ кода JavaScript по ссылке на внешний файл:

<head>

<meta charset="utf-8">

<title>Крошечный документ HTML5</title>

<script src="script.js"></script>

</head>

Листинг 7 - Пример вставки кода JavaScript

Атрибут language="JavaScript" не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript -- единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге </script>. Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web - метка особенности сети) в блок <head> сразу же после строки кодировки. Делается это таким образом:

<head>

<meta charset="utf-8">

<!-- saved from url=(0014)about:internet -->

<title>Крошечный документ HTML5</title>

<script src="script.js"></script>

</head>

Листинг 8 - Пример использования метки MOTW

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку "Разрешить заблокированное содержимое".

Все другие браузеры не обращают внимания на метку MOTW и используют одни и те же настройки безопасности как для страниц, загружаемых с удаленных веб-сайтов, так и для локальных файлов HTML.

4 Веб-формы

Веб-форма -- это набор текстовых полей, списков, кнопок и других активизируемых щелчком мыши элементов управления, посредством которых посетитель страницы может предоставить ей тот или иной вид информации. Формы в Интернете повсюду -- благодаря формам мы можем создавать учетные записи электронной почты, просматривать и покупать товары в интернет-магазинах, осуществлять финансовые транзакции и многое другое. Самая простая форма -- это одинокое текстовое поле поисковых систем, таких как Google:

Рисунок 4 - Поисковая система Google

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

4.1 Модернизация традиционной HTML-формы

Лучший способ обучения работе с формами HTML5 -- это взять типичную современную форму и усовершенствовать ее. Разметка такой формы до предела проста. Прежде всего, весь код формы заключается в элемент <form>.

Элемент <form> удерживает вместе все элементы управления формы, которые также называются полями. Кроме этого, он также указывает браузеру, куда отправить данные после нажатия пользователем кнопки отправки, предоставляя URL в атрибуте action. Но если вся работа будет выполняться на стороне клиента сценариям JavaScript, то для атрибута action можно просто указать значение #.

Хорошо спроектированная форма разделяется на логические фрагменты с помощью элемента <fieldset>. Каждому разделу можно присвоить название, для чего используется элемент <legend>. В следующем листинге приводится разметка формы:

<form action="#">

<p><i>Пожалуйста, заполните форму. Обязательные поля помечены </i><em>*</em></p>

<fieldset>

<legend>Контактная информация</legend>

<label for="name">Имя <em>*</em></label>

<input id="name"><br>

<label for="telephone">Телефон</label>

<input id="telephone"><br>

<label for="email">Email <em>*</em></label>

<input id="email"><br>

</fieldset>

<fieldset>

<legend>Персональная информация</legend>

<label for="age">Возраст<em>*</em></label>

<input id="age"><br>

<label for="gender">Пол</label>

<select id="gender">

<option value="female">Женщина</option>

<option value="male">Мужчина</option>

</select><br>

<label for="comments">Перечислите личные качества</label>

<textarea id="comments"></textarea>

</fieldset>

<fieldset>

<legend>Выберите ваших любимых животных</legend>

<label for="zebra"><input id="zebra" type="checkbox"> Зебра</label>

<label for="cat"><input id="cat" type="checkbox"> Кошак</label>

<label for="anaconda"><input id="anaconda" type="checkbox"> Анаконда</label>

<label for="human"><input id="human" type="checkbox"> Человек</label>

<label for="elephant"><input id="elephant" type="checkbox"> Слон</label>

<label for="wildebeest"><input id="wildebeest" type="checkbox"> Антилопа</label>

<label for="pigeon"><input id="pigeon" type="checkbox"> Голубь</label>

<label for="crab"><input id="crab" type="checkbox"> Краб</label>

</fieldset>

<p><input type="submit" value="Отправить информацию"></p>

</form>

Листинг 9 - Пример разметки формы

Рисунок 4.1 - Результат разметки формы

Как и во всех формах, большая часть работы в нашем примере выполняете универсальным элементом <input>, который собирает данные и создает флажки, переключатели и списки. Для ввода одной строки текста применяется элемент <input>, а для нескольких -- элемент <textarea>; элемент <select> создает выпадающий список.

4.2 Добавление подсказок

Обычно поля новой формы не содержат никаких данных. Для некоторых пользователей такая форма может быть не совсем понятной, в частности, какую именно информацию нужно вводить в конкретное поле. Поэтому часто поля формы содержат пример данных, которые нужно ввести в них. Этот подстановочный текст также называется "водяным знаком", так как он часто отображается шрифтом светло-серого цвета, чтобы отличить его от настоящего, введенного содержимого.

Подстановочный текст для поля создается с помощью атрибута placeholder:

<input id="name" placeholder="Иван Иванов">

...

<input id="telephone" placeholder="+7 (xxx) xxx-xxxx">

Листинг 10 - Пример добавления подсказки

Рисунок 4.2 - Результат добавления подсказки

Браузеры, не поддерживающие подстановочный текст, просто не обращают внимания на атрибут placeholder; особенно грешит этим Internet Explorer. К счастью, это не такая уж и большая проблема, т.к. подстановочный текст -- всего лишь приятная примочка, не обязательная для функционирования формы

4.3 Фокус

Так как форма предназначена для ввода информации, первым делом после ее загрузки пользователи захотят вводить эту информацию. К сожалению, делать это они не смогут до тех пор, пока не щелкнут мышью по первому полю или выделят его с помощью клавиши <Tab>, установив, таким образом, фокус на этом поле.

Пользователю можно помочь в этом, установив фокус на нужном начальном поле автоматически. Это можно сделать с помощью JavaScript, вызывая метод focus() требуемого элемента <input>. Но этот подход требует лишней строки кода и иногда может вызывать раздражающие неувязки.

На этой идее основан новый HTML5-атрибут autofocus, который можно вставить в элемент <input> или <textarea> (но только в один элемент формы), как показано в следующем примере:

<input id="name" placeholder="Иван Иванов" autofocus>

Листинг 11 - Пример настройки фокуса

Уровень поддержки браузерами атрибута autofocus примерно такой же, как и атрибута placeholder, и означает, что практически все браузеры поддерживают его, за исключением Internet Explorer.



5 Аудио и видео в HTML5

Поддержка видео и аудио HTML5 основана на простой идее. Точно так же, как с помощью элемента <img> в веб-страницу можно вставлять изображения, в нее должно быть возможным вставить звук посредством элемента <audio> и видео с помощью элемента <video>. Вполне логично, HTML5 позволяет вставлять оба эти типа мультимедиа.

К сожалению, некоторые аспекты воспроизведения мультимедиа находятся вне досягаемости новых аудио- и видеовозможностей HTML5. Для следующего содержимого и/или способов его воспроизведения нужно опять обращаться к Flash (по крайней мере, на данный момент):

-- лицензированное содержимое. Видеофайлы HTML5 не используют никакой системы для защиты от копирования.

-- потоковое аудио или видео. В HTML5 нет способа для передачи аудио или видео от одного компьютера к другому в потоковом режиме. Поэтому, разработчикам чат-программ, в которых посетители веб-страницы используют микрофон и/или веб-камеру, придется продолжать работать с Flash.

-- адаптивное потоковое видео. Для продвинутых веб-сайтов с большими объемами видеосодержимого, наподобие YouTube, требуется многоуровневое управление буферизацией и пересылкой видеопотока. Им нужно предоставлять видео в разных разрешениях, видеособытий реального времени, а также настраивать качество видео под пропускную возможность интернет-подключения пользователя. До тех пор пока HTML5 не сможет предоставлять эти возможности, видеообменные сайты могут добавить поддержку HTML5 только как опцию, но полностью переходить на него с Flash не будут.

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

-- динамическое создание или редактирование аудио. Новые стандарты, такие как Audio Data API, разрабатываемые под спонсорством Firefox, состязаются в добавлении возможностей этого типа к HTML5-аудио, но в настоящее время они еще не доступны.

5.1 Воспроизведение аудио с помощью элемента <audio>

В следующем коде приведен простейший пример использования элемента <audio>:

<p>Зацените новую песню <cite>Avicii - Wake Me Up</cite></p>

<audio src="mysong.mp3" controls></audio>

Листинг 12 - Пример использования элемента <audio>

Атрибут src содержит имя аудиофайла для воспроизведения, а атрибут controls указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением. Своим внешним видом эти элементы управления слегка отличаются от браузера к браузеру, но все они имеют одинаковое назначение: разрешают пользователю начинать и останавливать воспроизведение, переходить в другое место записи и регулировать громкость:



Рисунок 5.1 - Вид воспроизведения аудио в браузере

Элементы <audio> и <video> должны иметь как открывающий, так и закрывающий тег. Использование синтаксиса пустых элементов (например, <audio/>) не допускается.

Кроме атрибута controls элемент <audio> поддерживает еще три атрибута: preload, auotoplay и loop. Атрибут preload указывает браузеру способ загрузки аудиофайла. Значение auto этого атрибута указывает браузеру загружать аудиофайл полностью, чтобы он был доступен, когда пользователь нажмет кнопку воспроизведения.

Атрибут preload может принимать еще два значения. Значение metadata указывает браузеру загрузить первую небольшую часть файла, достаточную, чтобы определить некоторые его основные характеристики (например, общий размер файла). Значение none указывает браузеру не загружать аудиофайл автоматически. Эти опции можно использовать для того, чтобы сэкономить пропускную способность подключения, например, если страница содержит большое число элементов <audio>, но ожидается, что пользователь будет проигрывать лишь некоторые из них:

<audio src="mysong.mp3" controls preload="metadata"></audio>

Листинг 13 - Пример использования атрибута preload

Когда атрибуту preload задано значение none или metadata, загрузка аудиофайла начинается после того, как пользователь нажмет кнопку воспроизведения.

Если значение атрибута preload не установлено, то браузеры действуют по своему индивидуальному усмотрению. Большинство браузеров предполагает auto в качестве значения по умолчанию, но в Firefox это metadata. Кроме этого, важно помнить, что атрибут preload не является обязательным для выполнения правилом, а рекомендацией браузеру желаемого действия, которую он может игнорировать зависимости от других обстоятельств. А некоторые устаревшие браузеры вообще не обращают внимания на атрибут preload.

Если вставить в разметку несколько элементов <audio>, то браузер создаст отдельную полосу элементов управления воспроизведением для каждого из них. Посетитель веб-страницы может прослушивать аудио на одном из них или на всех сразу.

Атрибут autoplay указывает браузеру начать воспроизведение сразу же после завершения загрузки страницы:

<audio src="mysong.mp3" autoplay controls></audio>

Листинг 14 - Пример использования атрибута autoplay

Если этот атрибут не используется, пользователь должен нажать кнопку запуска, чтобы начать воспроизведение.

Элемент <audio> можно использовать для того, чтобы проигрывать фоновую музыку или обеспечить звуковые эффекты в игре с браузерным интерфейсом. Для этого из него нужно убрать атрибут controls и вставить атрибут autoplay (или же осуществлять воспроизведения посредством кода JavaScript). Но будьте осторожны в применении этого подхода и не забывайте, что для такой страницы все равно требуется какой-либо способ для прекращения воспроизведения.

Наконец, атрибут loop указывает браузеру повторять воспроизведение:

<audio src="mysong.mp3" controls loop></audio>

Листинг 15 - Пример использования атрибута loop

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

5.2 Воспроизведения видео с помощью элемента <video>

С элементом <audio> хорошо идет в паре элемент <video>. Он применяет такие же атрибуты src, controls, autoplay и loop. Пример использования этого элемента показан в следующем коде:

<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>

<video src="video.mp4" controls></video>

Листинг 15 - Пример использования элемента <video>

Как и в случае с элементом <audio>, атрибут controls указывает браузеру создать набор элементов управления воспроизведением. В большинстве браузеров эти элементы скрываются при щелчке где-нибудь в области страницы и отображаются опять при наведении курсора мыши на область видеоплеера:

Рисунок 5.2 - Вид воспроизведения видео в браузере

Кроме общих с элементом <audio> атрибутов, элемент <video> имеет три своих собственных атрибута: height, width и poster.

Атрибуты height и width устанавливают высоту и ширину окна воспроизведения в пикселах, соответственно. Следующий код показывает пример создания область воспроизведения размером 600x400 пикселов:

<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>

<video src="video.mp4" controls width="600" height="400"></video>

Листинг 16 - Пример создания области воспроизведения

Размеры окна воспроизведения должны совпадать с размером видео, но лучше явно указать их, чтобы оформление страницы не искажалось до того, как видеофайл загрузится (или если видеофайл вовсе не загружается).

Наконец, атрибут poster позволяет указать изображение, которое можно использоваться вместо видео:

<p>Зацените новый клип <cite>Avicii - Wake Me Up</cite></p>

<video src="video.mp4" controls poster="poster.jpg"></video>

Листинг 17 - Пример использования атрибута poster

Браузеры показывают это изображение в трех ситуациях: когда первый кадр видео еще не загрузился, атрибуту preload присвоено значение none или указанный видеофайл отсутствует.



Заключение

В данной работе был предоставлен краткий обзор работы с языком HTML5. В ходе изучения данного материала были усвоены очень важные аспекты программирования, с помощью которых мы теперь cможем работать в области HTML5.



Библиографический список

1 HTML5 [Электронный ресурс] / Электрон. текстовые дан. - Режим доступа: https://ru.wikipedia.org/wiki/HTML5.

2 Питер Лабберс, Брайан Олберс, Фрэнк Салим. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development./ М.: Вильямс, 2011. 272 с.

3 Стивен Хольцнер. HTML5 за 10 минут, 5-е издание = Sams Teach Yourself HTML5 in 10 Minutes, 5th Edition. ./ М.: Вильямс, 2011.

4 СТП ОмГУПС-1.2-2005 / Г. М. Фалалеева, А. Ю. Тэттэр, Б. Б. Сергеев.

Размещено на Allbest.ru

...