Лаборатория по работе с изображениями видео-аудио в html

Download 268,77 Kb.

Sana	02.07.2022
Hajmi	268,77 Kb.
	#732906

Bog'liq
1653649835 (3)

Лаборатория по работе с изображениями видео-аудио в HTML
Форматы аудио-файлов:

Для вставки аудио-плеера используется следующий код:

В браузере Google Chrome плеер будет выглядеть:

Атрибуты тега

Атрибут	Значение	Описание
autoplay	autoplay	Указывает, что аудио должен начать играть, как только будет готов
controls	controls	Указывает, что элементы управления воспроизведением должны отображаться
loop	loop	Указывает, что аудио должно начаться снова, когда оно будет закончено
preload	auto metadata none	Определяет, должно ли аудио быть загруженным при загрузке страницы
src	url	Указывает адрес аудио для проигрывания

Другие возможности вставки аудио на сайт

<a href="имя_файла.mp3">Щелкни a>

*только для форматов: wav, mp3, aiff, wma

Вставка видео

Формат видео-файлов:

MP4
WebM
Ogg

Результат в браузере:

Атрибуты тега

Атрибут	Значение	Описание
audio	muted	Определяет по умолчанию состояние звука. В настоящий момент только "muted" разрешено
autoplay	autoplay	Если указан, видео начнет играть сразу как только оно будет готово
controls	controls	Если указан, кнопки управления будут показаны, такие как кнопка воспроизведения
height	пиксели	Указывает высоту видео плеера
loop	loop	Если указан, видео начнет проигрываться снова, как только закончится
poster	url	Указывает URL изображения, представляющего видео
preload	auto metadata none	Если указан, видео будет загружено при загрузке страницы, и готово к запуску. Игнорируется, если "autoplay" указан
src	url	Адрес URL видео для проигрывания
width	пиксели	Указывает ширину видео плеера

Пример:

Другой вариант вставки видео (без плеера):

<a href="имя_файла.avi">Щелкни и смотриa>

<a href="ocean.qt"> Видеоклип 1 Мбa>

* для форматов mpeg, avi

Фавикон Favicon

Фавиконка отображается в адресной строке браузера перед URL страницы, также Фавикон можно заметить во вкладке браузера страницы. Поисковые системы передают Favicon вместе с результатами поиска.

файлы с расширением .ico
Семантические теги обычно несут смысловую нагрузку и не имеют никакого внешнего оформления в html. Но их можно и нужно оформлять стилями CSS. Такие теги важны для удобства читаемости кода и влияют на выдачу поисковиков.

Рассмотрим примеры семантических тегов и их использования:

<html>
<head>
<meta charset="utf-8">
<title>Заголовокtitle>
head>
<body>

header элемент - здесь следует какая-то информация в заголовке сайта. Обычно это лого компании и иногда дополнительная навигация по сайту.

<h1>Главный заголовок страницыh1>

Секция 1

Статья 1

Статья 2

Статья 3

Секция 2

Статья 4

Статья 5

Статья 6

<div>Обычный div, блочный элементdiv>

размер 16×16 пикселей

Сервис для преобразования в ico-формат: http://image.online-convert.com/

<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
head>

HTML 5: семантические теги

Download 268,77 Kb.

Do'stlaringiz bilan baham: