§ 9. Мультимедиа на веб-страницах

9.1. Графика на веб-страницах

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

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

Если фоновое изображение меньше размера веб-страницы, оно будет размножено по горизонтали и вертикали.

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

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

Чтобы поместить изображение на веб-страницу как фон, нужно установить в теге <body> атрибут background со значением, содержащим полное имя файла с изображением (пример 9.2).

Для добавления иллюстрации на страницу используется непарный тег источника изображения:
<img src=”nолное имя файла”>,
где src — обязательный атрибут тега
img.

Тег <img> предназначен для отображения на веб-странице изображений графических форматов GIF, JPEG, PNG или SVG.

Основные свойства CSS, применяемые к тегу <img>:
• width — ширина изображения;
• height — высота изображения;
• padding — отступы от изображения;
• float — выравнивание изображения;
• border — рамка вокруг изображения.

Свойства width и height используются для изменения размеров изображения (пример 9.3). Значения этих свойств можно задавать в пикселах или процентах. Добавление только одного из этих свойств позволит сохранить пропорции изображения.

По умолчанию текст на веб-странице располагается вплотную к изображению, что нарушает эстетическое восприятие контента. Этого можно избежать, задав для изображения невидимые отступы по горизонтали (слева и справа) и вертикали (сверху и снизу). Отступы для изображений задаются так же, как для блоков, — значениями в пикселях для свойства padding (пример 9.4).

Добавить на страницу изображения так, чтобы они полностью обтекались текстом, можно с помощью стилевого свойства float. Значение right будет выравнивать изображение по правому краю окна браузера или блока, а left — по левому краю. Обтекание при этом происходит по другим, свободным сторонам. В примере 9.5 изображение и текст размещаются в блоке.

К тегу <img> можно применять атрибут alt, который устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений (пример 9.6).

Изображение на веб-странице можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. Если при этом вокруг изображения отображается рамка, то убрать ее можно, определив значение none для стилевого свойства border (пример 9.7).

9.2. Звук и видео на веб-страницах

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

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

Звук на веб-странице можно использовать как один из декоративных компонентов. Однако встречаются веб-сайты, на которых он превращается из декоративного компонента в основной (сайты музыкальной тема¬тики, музыкальные архивы).

Контейнер <audio> добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src (пример 9.8).

Атрибуты тега <audio>:

  • src — указывает путь к воспроизводимому файлу;
  • autoplay — звук воспроизводится сразу после загрузки страницы;
  • controls — добавляет панель управления звуком;
  • loop — повторяет воспроизведение звука после его завершения;
  • preload — используется для загрузки файла вместе с загрузкой веб-страницы.

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

Контейнер <video> добавляет, воспроизводит видеоролик и управляет его настройками на веб-странице. Путь к файлу задается так же, как и при использовании звука (пример 9.9).

Атрибуты тега <video>:

  • src — указывает путь к воспроизводимому файлу;
  • autoplay — видео начинает воспроизводиться автоматически после загрузки страницы;
  • controls — добавляет панель управления к видеоролику;
  • loop — повторяет воспроизведение видео после его завершения;
  • height — задает высоту области для воспроизведения;
  • width — задает ширину области;
  • preload — используется для загрузки видео вместе с загрузкой веб-страницы.

Необходимо всегда включать в тег <video> атрибуты ширины и/или высоты. Если значения этих атрибутов не заданы, браузеру не известен размер видео. В этом случае страница начнет обновляться при загрузке видео, и будет создаваться эффект мерцания.

Любое видео, размещенное на веб-сервисе YouTube, также можно добавить на создаваемую веб-страницу. Для этого нужно нажать кнопку Поделиться и выбрать Встроить, а затем скопировать полученный html-код в любое место html-документа (пример 9.10).

Пример 9.1. Использование фонового изображения.

Размер изображения 1920 • 1200 px:

Размер изображения 225 • 225 px:

Пример 9.2. Разметка фонового изо-бражения.

Файл с изображением находится в одной папке с html-файлом:

<body background = “fon.jpg”>

Файл с изображением находится в папке с именем img:

<body background = “img/fon.jpg “>

Пример 9.3. Добавление свойства width к изображению.

img {
width: 300px;
/* Ширина в пикселях */
}

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

img {
width: 80 %;
/*Ширина в процентах */
}

Пример 9.4. Отступы для изображения.

img {
padding: 10px;
/* Одинаковые отступы со всех сторон */
}

Отображение в браузере:

Пример 9.5. Выравнивание изображения по отношению к тексту.

img {
float: left;
/* Изображение слева от текста */
padding: 5px;
/* Отступ */
}
Отображение в браузере:
img {
float: right;
/* Изображение слева от текста */
padding: 5px;
/* Отступ */
}
Отображение в браузере:
Пример 9.6. Альтернативный текст.
<img src = “ozero.jpg” alt = “Нарач”>
Пример 9.7. Использование изображения в качестве ссылки.

Стилевое описание:

img {border: none}

Html-код:

<a href = ”sample.htm”>
<img src = ‘link.png” alt = ‘Пример“>
</a>
Атрибутов, которые могут быть использованы в теге <img>, и свойств, используемых при стилевом описании, большое количество. С ними можно познакомиться на ресурсе http://htmlbook.ru/content.
При включении мультимедийных элементов на страницу необходимо хорошо представлять, будут ли оправданы затраты времени, идущие на загрузку. Мультимедийные файлы занимают много памяти. Самые большие из них — видеофайлы, минутный фрагмент может занимать более 10 Мбайт памяти. Звуковые файлы требуют немного меньше места — трехминутная запись высокого качества может занимать до 3,5 Мбайт.

Для добавления звука на веб-страницы предпочтительнее использовать файлы с расширением .mp3. Данные в таких файлах упакованы с учетом особенностей восприятия человеческим ухом.

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

WebM — открытый формат для мультимедиа-файлов, представленный компанией Google. Не требует лицензионных соглашений.

Пример 9.8. Добавление звука.

<audio controls width = “190px” src = ” muz.mp3”>
Тег audio не поддерживается вашим браузером.
</audio>

Пример 9.9. Добавление видеоролика.

<video controls width = “190px” src = “vid.mp4”>
</video>

Для универсального воспроизведе­ния в различных браузерах аудио и ви­део кодируют с помощью разных коде­ков и одновременно во вложенном теге <source> добавляют ссылки на файлы разных форматов:

video width = ”40 ” controls = “controls”>
<source src = “duel.mp4” type = ‘video/mp4; codecs = “avc1.42E01E, mp4a.40.2”>
<source src = “video/duel.webm” type = ‘video/webm; codecs = “vp8, vorbis”>
</video>

Пример 9.10. Добавление видеоролика с сервиса YouTube.

Утреннее пение птиц в лесу. Звуки природы без музыки.

 
1. В каком качестве можно использовать графику на веб-страницах?
2. Каким должно быть изображение, используемое как фон веб-страницы?
3. В каком теге и с помощью какого атрибута на веб-страницу добавляется фоновое изображение?
4. Какой тег позволяет добавить на веб-страницу иллюстрацию?
5. Каким образом определяется положение иллюстрации на веб-странице?
6. Для чего предназначен атрибут alt?
7. Как сделать изображение ссылкой?
8. С помощью каких тегов на веб-страницу добавляется звук и видео?
9. Как на веб-страницу добавить видео с веб-сервиса?

Упражнения

1. Создайте веб-страницу следующей структуры:


Сохраните результат как файл index.html. Все рисунки, используемые на веб-странице, сохраняйте в отдельной папке.

2 Для каждой фигуры из упражнения 1 создайте веб-страницу следующей структуры:

Стилевое описание выполните в отдельном файле. Подключите стилевой файл к каждой странице. Сохраните страницы как 1.html, 2.html, 3.html, 4.html.

3 Свяжите страницу index.html и страницы, созданные в упражнении 2, с помощью перекрестных гиперссылок. В качестве ссылок на странице index.html используйте изображения фигур, а на страницах второго уровня — текстовые элементы абзаца.

4 Добавьте на страницу index.html звук (воспроизведение при загрузке).

5 На одну из страниц упражнения 2 добавьте видеоролик соответствующей тематики. Для поиска видеоролика воспользуйтесь веб-сервисом YouTube.

 

Проверь себя