В HTML5 имеются специальные теги для управления начертанием букв.
Тег <b> … </ b > задаёт полужирное начертания шрифта, без указания на его важность.
Тег <strong> … </ strong > указывает, что текст требует дополнительного внимания. Обычно отображается полужирным шрифтом.
Тег <i> … </ i > обычно отображает шрифт курсивом.
Тег <em> … </ em > отображает шрифт курсивом, придавая тексту значимость.
Тег <small> … </small> уменьшает размер шрифта на единицу по отношению к обычному тексту.
Тег <sub> … </sub> используется для создания нижних индексов, а тег <sup> … </sup> для создания верхних индексов.
Тег <ins> … </ins> подчеркивает текст, а <del> … </del> перечеркивает его.
7.Теги оформления цитат и определений
Тег <q> … </q> используется для выделения коротких цитат. Текст заключается в кавычки.
Тег <cite> … </cite> применяется для выделения цитат, названий произведений, сносок на другие документы.
Тег < blockquote > … < blockquote > выделяет цитаты внутри документа, отделяя их отступами и переносами строк.
Для вывода текста программ используются теги <code>, <kbd>, <samp>, <var>, <pre>
Тег <abbr> … <abbr> применяется для форматирования аббревиатур. Браузером такой текст обычно подчёркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, указанного в теле начального тега. Расшифровка аббревиатуры появляется при наведении в браузере курсора мыши на текст.
Примечание. Часто для оформления текста дополнительно используются CSS.
Примеры вывода текста
HTML документ, демонстрирующий теги:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Book</title>
<meta charset="utf-8">
<meta name="description" content="Обложка книги">
<meta name="keywords" content="Роберт Стивенсон, Остров сокровищ">
<title></title>
</head>
<body>
<div align="center"><h3>Роберт Льюис Стивенсон</h3></div><br />
<div align="center"><h2>Остров Сокровищ</h2></div><br />
<div align="center"><hr /><h3>Лабиринт, 2018</h3></div>
</body>
</html>
</html>
Задание 2.
Скопируйте выше приведённый текст в Блокнот и сохраните файл с расширением .html. Запустите файл. В результате на экране монитора должен появится текст (рис. 3).
Рис. 3
Выравнивание текста осуществляется с помощью атрибута align. Другие значения атрибута align – это “left” (влево), “right” (вправо), “justify’ (равномерно).
Для того, чтобы сделать текст цветным, скорректируем раздел <body> так
<body>
<div style="color:#ff0000" align="center"><h3 >Роберт Льюис Стивенсон</h3></div><br />
<div style="color:#00ff00" align="center"><h2 >Остров Сокровищ</h2></div><br />
<div style="color:#0000ff" align="center"><hr /><h3 >Лабиринт, 2018</h3></div>
</body>
Цвет устанавливается шестнадцатеричным числом с цветовой схемой RGB. Каждый из базовых цветов может принимать значения от 0 до 255 или в шеснадцетиричной нотации (#rr,#gg,#bb) от #00 до #ff. Например, #ffffff – белый цвет, а #000000 - чёрный. В старой версии интернет документов цвет может быть указан триадой как #fff.
Цвет можно указывать и словами, зная английское название цветов.
Изменённый HTML файл раскрасит текст (рис. 4).
Рис. 4
Для примера воспользуемся некоторыми элементами CSS для оформления текста.. Создадим вокруг текста цветной фон. Кроме того сделаем темнее текст названия произведения (#00с000).
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Book</title>
<meta charset="utf-8">
<meta name="description" content="Обложка книги">
<meta name="keywords" content="Роберт Стивенсон, Остров сокровищ">
<title>Рамка вокруг текста</title>
<style >
div {
width: 40%; height: 15%;
background: #ffcc00;
outline: #000000;
display: inline-block;
}
</style>
</head>
<body>
<div style="color:#ff0000" align="center"><h3>Роберт Льюис Стивенсон</h3></div><br />
<div style="color:#00с000" align="center"><h2>Остров Сокровищ</h2></div><br />
<div style="color:#0000ff" align="center"><hr /><h3>Лабиринт, 2018</h3></div>
</body>
</html>
Параметры оформления в стиле CSS располагаются в разделе <style>. Параметры ширины (width) и высоты (height) могут быть в пикселях (px) или в процентах от размеров экрана. Средство background задаёт цвет фона, а outline устанавливает цвет, стиль и толщину внешней границы. Результат запуска HTML документа показана на рис. 5.
Рис. 5
Задание 3
Наберите и сохраните HTML документ, представленный ниже. Запустите его.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Выравнивание слоя по центру</title>
<style>
.center {
width: 200px; /* Ширина элемента в пикселах */
padding: 10px; /* Поля вокруг текста */
margin: auto; /* Выравниваем по центру */
background: #fc0; /* Цвет фона */
}
</style>
</head>
<body>
<div class="center"><h3 style="color:#ff0000" align="center">Роберт Льюис Стивенсон</h3><br />
<h2 style="color:#00с000" align="center">Остров Сокровищ</h2><br /><hr />
<h3 style="color:#0000ff" align="center">Лабиринт, 2018</h3>
</div>
</body>
</html>
В разделе <style> описан класс .center, который используется для форматирования раздела <div>. В документе показана нестандартная форма комментариев, в стиле языка С - /* */. Браузер все равно воспринимает их как комментарии.
HTML редакторы
С помощью программы Блокнот в принципе можно создать любой гипертекстовый документ. Однако существую специальные редакторы HTML, в которых набирать гипертекст гораздо удобнее. Наиболее популярные редакторы гипертекста Notepad++, Brackets, Coffecup, NoteTab, Eclipse, HTML-Online, BlueGriffon, Emacs и Atom. Указанные редакторы либо бесплатны, либо имеют бесплатные версии.
Из перечисленных выше можно выбрать любой редактор. В данном пособии будем использовать программу CoffeeCup Free HTML Editor. Скачать бесплатную версию программы можно на сайте
https://www.coffeecup.com/free-editor/
После скачивания (zip файл) программу нужно разархивировать и установить. После установки на рабочем столе появится значок (рис. 6)
Рис. 6
При первом запуске программы необходимо настроить её на русский язык. Для этого в меню Tools- Preferences - Customization - Modify Highlighting... - Charset - Russian - ОК.
Стартовое окно в программе имеет вид (рис. 7)
Рис. 7
Если нажать кнопку New Blank Page (новая страница), то на экране монитора будет шаблон для создания HTML документа (рис. 8)
Рис. 8
В шаблон нужно внести некоторые изменения, например, в теге <html> заменить английский язык на русский, например:
<html lang=”ru”>
Строку <meta name=”generator”> можно убрать, если Вы не хотите указывать программу, использованную для разработки документа.
В теге <meta name="description" content="… ">после слова content в кавычках следует описать содержимое страницы, а в теге <meta name="keywords" content=" …"> ключевые слова через запятую. Ключевые слова используются в интернет поисковыми машинами. Есть шанс, что когда-нибудь поисковой запрос изобразит заголовок Вашего документа на чьем-то компьютере для ссылки.
Как помним в документе имеется один раздел < body >. Первый раздел < body > в примере закоментирован и браузером не рассматривается. Если его разкоментировать (удалить <!- - и - ->), то второй <body>, расположенный ниже, надо будет убрать.
В первом <body> приведены инструкции в стиле CSS, для оформления документа. Их можно использовать не изменяя или изменить цвет фона, указать URl файла фонового рисунка.
Закрашенный серым цветом фрагмент – это обращение к скрипту, написанном на JavaScript. Его можно удалить, если вы не пользуетесь скриптами.
Для создания собственного HTML документа целесообразно щёлкнуть на закладке Code в левой стороне экрана. Тогда в левом столбце появится список всех тегов (рис. 9).
Рис. 9
Любой тег будет перенесён в документ (в место, указанное курсором), если по тегу дважды щёлкнуть мышью.
При наборе тегов выпадает дополнительное меню, позволяющие выбирать необходимые атрибуты, ускоряя набор.
Задание 4
Очистите рабочее окно редактора CoffeeCup Free HTML Editor. Скопируйте текст HTML из параграфа 7 в рабочее окно. Имейте ввиду то, двойные кавычки в текстовых редакторах (исключая Блокнот) отличаются от кавычек в HTML. Кавычки в HTML прямые ("), а в текстовых редакторах изогнутые (“). В документе, скопированном HTML редактор все кавычки необходимо перебить! Теперь текст в рабочем окне можно редактировать, добавлять теги, изменять текст и т.д.
Проверить внесённые изменения можно без сохранения файла. В закладке меню Tools можно выбрать Test With Default Browser (рис. 10) или просто на клавиши Ctrl+F9 одновременно. Можно найти и альтернативный браузер, выбрав Aditional Browser в закладке Tools.
Рис. 10
Сохраните файл с расширением .html.
Таблицы
Тег <table> … </ table> служит контейнером для создания таблиц. Другие теги для создания таблицы это:<caption> - заголовок таблицы, <th> - ячейка заголовка таблицы, <tr> - строки таблицы, <td> - ячейки, <border> граница ячеек и всей таблицы.
В теге <table> ширина таблицы задаётся атрибутом width. По умолчанию таблица занимает всю ширину или width : 100%.
Фиксированную ширину таблицы можно задать и в пикселях. В этом случае таблица становится «жёсткой», не изменяемой от разрешения экрана. При низком разрешении таблица будет большой, высоком - маленькой. Например:
<table width: 600px >
Сразу за тегом <table> следует тег <caption>.
<table>
<caption> Перечень изделий </caption>
Ячейки заголовка таблицы описываются после заголовка
<tr>
<th> № п/п </th>
<th> Наименование </th>
<th> Количесто </th>
<th> Цена за ед. товара </th>
<th> Стоимость </th>
</tr>
Две строки таблицы в качестве примера
<tr>
<td> 1 </td>
<td> Термос </td>
<td> 2 </td>
<td> 300 </td>
<td> 600 </td>
</tr>
<tr>
<td> 2 </td>
<td> Электрочайник </td>
<td> 3 </td>
<td> 900 <td>
<td> 2700 </td>
</tr>
Тег <th> предназначен для ячейки заголовка, а <td> - тела таблицы.
Выравнивание текста по горизонтали внутри отдельной ячейки можноь задать атрибутами left (влево), rigth (вправо), center (по центру), justify (равномерно). Аналогично выравнивание по вертикали осуществляться атрибутами top (в верх), bottom (в низ), middle (по средине), baseline (линии выравниваются по высоте во всех горизонтальных ячейках одинаково).
Полный вариант документа HTL с таблицей
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Сб, 19 янв 2019 01:22:50 GMT">
<meta name="description" content="Пример таблицы">
<meta name="keywords" content="Table, goods">
<title></title>
</head>
<body>
<table width: 600px >
<caption> <h3>Перечень изделий</h3> </caption>
<tr>
<th> № п/п </th>
<th> Наименование </th>
<th> Количесто </th>
<th> Цена за ед. товара </th>
<th> Стоимость </th>
</tr>
<tr>
<td align=center> 1 </td>
<td align=center> Термос </td>
<td align=center> 2 </td>
<td align=center> 300 </td>
<td align=center> 600 </td>
</tr>
<tr>
<td align=center> 2 </td>
<td align=center> Электрочайник </td>
<td align=center> 3 </td>
<td align=center> 900 </td>
<td align=center> 2700 </td>
</tr>
</table>
</body>
</html>
Задание 5
Перенесите текст HTML документа с таблицей в CoffeeCup Free HTML Editor. Нажмите Ctrl + F9 и проанализируйте таблицу
По умолчанию таблица и ячейки не имеют границ. Их можно задать с помощью атрибута border . Установите границу шириной 1px, изменив тег <table> в тексте документа в самом редакторе.
<table width: 600px border="1px">
Проверьте изменения в CoffeeCup Free HTML Editor
Элемент <colgroup> создаёт структурную группу столбцов для одинакового стиля. Тег <col> объединяет строки таблицы в разделы, благодаря чему каждый из разделов может иметь свой стиль.
Задание 6
Скопируйте HTML документ в редактор и нажмите Ctrl+F9. Проанализируйте полученную таблицу.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Сб, 19 янв 2019 01:22:50 GMT">
<meta name="description" content="Пример таблицы">
<meta name="keywords" content="Table, goods">
<title></title>
</head>
<body>
<table width: 600px border="1px">
<colgroup>
<col span="2" style="background-color:Khaki">
<col style="background-color:LightCyan">
</colgroup>
<tr>
<th>Город</th>
<th>Улица</th>
<th>Дом </th>
</tr>
<tr>
<td>Воронеж</td>
<td>Улица Генерала Лизюкова</td>
<td align="center">27</td>
</tr>
<tr>
<td>Кондапога</td>
<td>Бумажников </td>
<td align="center"> 1</td>
</tr>
</table>
</body>
</html>
Скопируйте ниже приведённый текст в редактор и нажмите Ctrl+F9. Проанализируйте результат.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Ср, 23 янв 2019 15:18:12 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
</head>
<body>
<table width: 600px border="3px">
<caption> <h3>Перечень ячеек</h3> </caption>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
</tr>
<tr>
<td>Ячейка 1.1</td>
<td>Ячейка 1.2</td>
<td>Ячейка 1.3</td>
</tr>
<tr>
<td colspan="2" style ="text-align: right">Ячейка 2.1</td>
<td>Ячейка 2.2</td>
</tr>
</body>
</html>
Здесь первая и вторая ячейка нижней строки таблицы объединены, и текст сдвинут вправо.
Примечание. Разделы таблицы можно группировать с помощью тегов <thead>, <tfoot>, <tbody>. Теги должны располагаться именно в таком порядке, после тегов <table>, <caption>, <colgroup>. Тег <thead> создает группу строк для заголовков, а тег <tfoot> - строки итогов в таблице. Соответсвенно <tbody> группирует основное содержание таблицы.
Если не копировать текст и методического указания, а набирать <table >, <tr >, <td >, то после набора < CoffeeCup Free HTML Editor предложит список тегов для дальнейшего ввода. Аналогично и после ввода пробела после имени тега, редактор предложит ряд атрибутов. Если, например, выбрать атрибут <style>, то после ввода букв редактор покажет атрибуты, которые можно использовать для стиля оформления. Описание всех атрибутов потребовало бы очень много места. К счастью назначение атрибутов можно понять по их названию. Например используя соответствующие атрибуты, можно задать цвет шрифта и цвет фона, установить ширину и цвет границы, задать выравнивание текста и т.д.
11.Тег <a> - anchor (якорь). Создание ссылок
Тег < a > … </ a > определяет ссылки. HTML ссылки связывают между собой миллиарды web-страниц и миллионы сайтов. Без ссылок нет интернета. В HTML документе могут быть ссылки, указывающие на связь,:
l Внутри документа;
l С другим документам сайта на том же компьютере;
l С другим документом в сети интернет.
Ссылка состоит из двух частей — указателя и адресной части. Для указателя используется атрибут id , который устанавливает метку. Например, метка в теге абзаца
<p id=”lebel”>
Внутри документа обратится к метке можно с помощью тега
<a href=”#lebel”>
Обязательным параметром тега<a>является атрибут href, который задаёт адрес метки.
Например, для ссылки на файлы, в том числе и лежащих на других сайтах, используются URl (единый указатель ресурсов). В общем виде URl имеющий следующий формат:
метод доступа://имя сервера:порт/путь
Метод доступа - это file , http , https , ftp , mailto, и др. Методы http , https , ftp используются для ссылок на внешние сайты. http и https - стандартные протоколы интернета, ftp - протокол передачи файлов.
Ссылка на внешний сайт
<a href=”http://site/index.html”> </a>
Внешний HTML документ может быть запущенным в новом окне и в старом, в окне документа. За это отвечает атрибут target. Если target ="_ blank", то открывается новое окно, например,
<a href=”http://site/index.html” target=”_blank”> </a>
Для открытия документа в старом окне target ="_ self ", в полноэкранном размере target ="_ top "
Если в адресе имя сервера не указано, то ссылка считается локальной, т.е. она относится к документу на том компьютере, на которой находится исходный HTML-документ.
<p><a href="page2.html">Переходим на документ page2.html в той же папке, где расположен исходный документ</a>/p>
<p><a href="/page3.html">Переходим на документ page3.html в папке, где расположенной папки с исходным документ</a>/p>
<p><a href=”/c:/images/page4.html"> На текущем компьютере переходим на документ page4.html, путь к которому указан от корневой папки компьютера </a></p>
Для ссылки на документ на локальном сайте можно использовать протокол file.
<p><a href="file:/C:/Users/p001/Desktop/HTML5/A4.html/" target="_blank"> Обращение к документу A4.html</a></p>
Примечание Существуют специальные ссылки, позволяющие вызвать программу электронной почты (mailto :), набрать телефонный номер (tel :), вызвать по скайпу (skype :) и т.д.
Вставка изображений
Тег < img > служит для представления изображений в браузере. Тег < img > не имеет конечного тега! Обязательными атрибутами тега являются src и alt. Значением src является абсолютный или относительный путь к изображению. Атрибут alt - это резервный контент. Если по каким либо причинам изображение не может быть показано, то выводится просто текст, указанный атрибутом alt.
<img src=”image.png” alt=”Изображение не может быть выведено”>
Без задания размеров изображение отображается на странице в реальном размере, как в исходном файле. Отредактировать размеры изображения можно с помощью атрибутов width и height. Ширина и высота задаётся в пикселях или %.
<img src="/C:/Users/p001/HTML5/flowers.png" alt="Цветы" width: 200px heght: 300px>
Изображения в интернет могут иметь следующие форматы: jpeg , gif , png , apng , svg , bmp , ico. Файлы gif и anpg могут содержать элементы анимации.
Иногда на изображении необходимо выделить область, нажав на которую, будет осуществлён переход на метку в самом документе или вызван файл из интернета. Для создания активной области используются теги <map> и <area>.
Тег <map> служит для представления графического изображения в виде карты с активными областями. Тег <map> должен быть связан с тегом <img> посредством имени
<img scr="flowers.png" usename="#карта_цветы">
<map name="карта_цветы">
<area атрибуты>
</map>
Для описания активной области используется тег <area>. Он не имеет закрывающего тега. На одном рисунке может быть несколько активных областей. Выделенная область может быть в виде прямоугольника, круга, многоугольника.
Активная область - прямоугольник 100х100 с верхним левым углом в точке 400, 3. В случае попадания в активную область в новом окне вызывается статья из википедии «Лист».
<area shape="rect" coords="400, 3, 500, 103" href="https://ru.wikipedia.org/wiki/Лист" alt=”Статья Лист" target="_blank">
Активная область - окружность радиусом 40 с центром в 450, 50.
<area shape="circle" coords="450, 50, 40" href="https://ru.wikipedia.org/wiki/Стебель" alt="Статья Стебель" target="_blank">
Активная область многоугольник с углами в указанных точках.
<area shape="poly" coords="190,1,240,90,140,90,190,13" href="https://ru.wikipedia.org/wiki/Цветок" alt="Статья цветок" target="_blank">
Задание 7
С помощью CoffeeCup Free HTML Editor создайте HTML документ, при запуске которого загрузится файл изображения. Задайте на изображении активные зоны, при нажатии на которых откроется новое окно и в него загрузится статья из википедии.
Внедрение Аудио
Тег <audio> используется для внедрения звуковых файлов. Например
<audio src="music_file.mp3" сontrols autoplay loop>
Здесь music _ file . mp 3 звуковой фай, атрибут с ontrols выводит элементы управления воспроизведением(кнопку Play, полосу прокрутки).
Атрибут autoplay указывает, что воспроизведение звукового файла начнётся сразу после загрузки HTML-документа.
Многократное проигрывание файла задаёт атрибут loop.
Тег <muted> отключает звук, но не останавливает проигрывания файла
В интернет используются звуковые файлы с различными расширениями - mp 3, mp 4, webm , wav , ogg vorbis. К сожалению ни один из популярных браузеров не воспроизводит файлы всех форматов. Есть вероятность, что на каком-либо компьютере в сети звуковой файл воспроизводится не будет.
Для доступности контента максимально широкой аудитории рекомендуется включать несколько источников звука, представленных с использованием атрибута src элемента < source >. Одновременно можно добавить резервный контент с тегом <a> для браузеров, которые не поддерживают элемент <audio>.
<audio controls>
<source src=”name.ogg” type=”audio/ogg”>
<source src=”name.mp3” type=”audio/mpeg”>
<source src=”name.webm” type=”audio/webm”>
<a href=”/c:/User/p001/sounds/name.wav>
</audio>
Примечание Для воспроизведения звуковых файлов используются аудио кодеки. Они нужны для сжатия звуковой информации для уменьшения объёма и увеличение скорости передачи. Наиболее распространённые аудио кодеки: MP3, ACC, Ogg Vorbis. Большинство аудиокодеков - это программы, которые взаимодействуют с аудиоплеером. Имеются и аппаратные аудиокодеки, устанавливаемые на материнскую плату или звуковую карту.Если на компьютере нет требуемого звуковым файлом аудио кодека, файл воспроизводится не будет.Возможно потребуется установка нового кодека.
Задание 6
Создайте HTML документ с вызовом звукового файла.
Примечание. Чтобы услышать звук надо подключить колонки или наушники ☺
Внедрение Видео
Тег <video> атрибутами очень похож на тег < img >, а проблемой с кодеками на тег <audio>. Дополнительным значимым атрибутом является атрибут poster, который указывает на местонахождения файла изображения, который загружается в окно как заполнитель перед началом воспроизведения видео.
<video src=”/moves/cinderalla.ogv” heght=”480” poster=”mainimg.jpg” type=”video/ogg codecs=’theora, vorbis’”>
Ваш браузер не поддерживает элемент <code>video</code>
</video>
Если на компьютере отсутствует указанный кодек, будет выведен только текст.
В теге<video> можно использовать атрибуты autoplay , loop , muted.
Любой видеофайл является файловым контейнером. В нем хранятся в аудио- и видеодорожки, титры, субтитры и др.
Приложение . К популярным форматам видеоконтейнеров относятся следующие:
1.Ogg (.ogv, .oga, .ogx, .ogg)- контейнер. для видеокодека Theora и аудио -Vorbis. Работает в Firefox, Chrome и Opera. MIME-тип: video/ogg.
2.MPEG 4 (.mp4) - контейнер для видеокодека H.264 и аудиокодека AAC. Работает в Safari и Chrome. Кодирует видео для всех устройств, таких как iPhone, Android. MIME-тип: video/mp4.
3.WebM (.webm) - контейнер видеокодека VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player.
MIME-тип: video/webm.
4.Audio Video Interleave (.avi) - предназначен для записи звука и изображений, соответствующих спецификации RIFF. MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo.
Matroska (.mkv) - видеоконтейнер, который может содержать видео в формате H.264, VP8 или Theora.MIME-тип: video/x-matroska, audio/x-matroska .
Авторы понимают, что даже простое перечисление типов видеоконтейнеров может вызвать лёгкое головокружение. Однако не все так плохо.
В основном используются три основных формата, которые поддерживаются основными браузерами.
| Формат видео файла | Видео кодек | Аудио кодек |
| .mp4 | H.264 | ACC |
| .ogg/.ogv | Theora | Vorbis |
| .webm | VP8 | Vorbis |
К сожалению файлы с популярным расширением .avi в HTML5 не поддерживаются. Их надо преобразовать с помощью одного из конверторов, типа Movavi или Online-convert. Конвертор Online-convert работает в интернете и его устанавливать не нужно.
Для размещения видео на сайте необходимо выполнить следующие действия.
Декодируйте видео файл конвертором c соответствующими видео- и аудио кодеками:
| Файл | A / V Кодеки |
| .mp4 | H.264 / ACC |
| .webm | VP8 / Vorbis |
| .ogv | Theora / Vorbis |
Создадим файл .htaccess с содержанием
AddType video/ogg ogv
AddType video/mp4 mp4
AddType video/webm webm
Файл должен быть расположен в той папке, где и HTML документ.
<video controls height="538" poster="/examples/media/film.png" preload="none">
<source src="/examples/media/film.mp4" type="video/mp4">
<source src="/examples/media/film.webm" type="video/webm">
<source src="/examples/media/film.ogv" type="video/ogg">
</video>
Тег <video> со всем содержимым можно обернуть в контейнер (например, <div>), а в теге контейнера указать размеры окна видеоплейера и его положение на странице.
Введение ролика с YouTube
На YouTube находятся миллионы видеороликов и можно воспользоваться ими для украшения Вашего сайта (Не забутьте об авторских правах!).Выберите понравившиеся видео на YouTube. Нажмите на надпись Поделиться (рис. 11).
Рис. 11
В выпавшем окне выберите значок <> (Встроить) (рис. 12).
Рис. 12
Выделите текст, заключенныq в теге <iframe> … </iframee> (рис. 13) и, вместе с ограничивающими тегами, вставьте его в HTML документ в раздел <body>.
Рис. 13
Текст HTML документа приведён ниже.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Сб, 19 янв 2019 01:22:50 GMT">
<meta name="description" content="Видео с YouTube">
<meta name="keywords" content="Video">
<title>Exemple Video</title>
</head>
<body>
<iframe height="315" src="https://www.youtube.com/embed/4n8mrWEOJ_s"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</video>
</body>
</html>
Тег <iframe> … </iframe> создаёт встроенный фрейм (рамку), загружая в текущий HTML документ другой документ. В данном случае видеоролик.
Задание 7
Создайте HTML документ с видеороликом из YouTube.
Дата: 2019-04-23, просмотров: 186.
