1.3.4 Форматы видеофайлов, внедрение видео
При создании Web-страниц используются следующие форматы видеофайлов:
MPEG (Moving Picture Expert Group – «группа экспертов по движущимся изображениям», расширение .mpg или .mpeg) – формат предназначен для сжатия как аудио, так и видеофайлов. Обеспечивает высокое качество и является стандартом в цифровом видео. Недостаток – большой размер.
AVI (Audio Video Interleaved, расширение .avi) – применяется для хранения и воспроизведения аудио- и видеоданных. Наиболее распространенный формат.
QuickTime (расширение .mov) – популярный формат, не требует длительной загрузки по сети.
Для внедрения видео в Web-страницу используется тег <EMBED>. Формат записи:
< EMBED SRC="URL-адрес">
Атрибуты и их значения для рассматриваемого тега такие же как и в случае внедрения аудиофайлов (см. п. 1.3.3).
Примером внедрения на страницу так называемого секундомера может служить следующая HTML-программа:
<HTML>
<HEAD>
<TITLE>Использование видео на Web-страницах</TITLE>
</ HEAD>
<BODY bgcolor="silver" topmargin=14 leftmargin=14 bottommargin=14 right-magin=14>
<FONT color="maroon"> <H1 align="center">Пример внедрения видеофайла</H1>
<EMBED src="C:\WINDOWS\clock.avi"> </EMBED>
</BODY>
</HTML>
В
ид
полученной страницы представлен на
рисунке 10.
Рисунок 10 – Вид Web-страницы с внедренным видеофайлом
1.3.5 Задания для самостоятельной работы
Задача 1
Выполните задание по предложенному ниже алгоритму.
Откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.
В графическом редакторе Paint подготовьте рисунок, размером 150x150 пикселей.
Используя пункт меню Рисунок, снимите флажок с команды Непрозрачный фон.
Сохраните файл под именем picture1.gif
В документе first.htm введите тег: <IMG SRC="picture1.gif">
Запустите приложение Internet Explorer.
Откройте файл first.htm
Убедитесь в том, что созданный рисунок отобразился на странице.
Откройте файл first.htm в Блокноте и отредактируйте вашу программу, добавив в нее 4-5 строк, расположенных после тега вставки рисунка,
Примените к тегу <IMG> атрибут ALIGN, проверив все его возможные значения, обратив особое внимание на расположение рисунка относительно текста.
Вернитесь в программу Блокнот и добавьте в тег <IMG> атрибуты HSPACE и VSPACE, соответственно со значениями 100 и 100.
Вернитесь в браузер и обновите содержимое окна, нажав на пиктограмму Обновить на панели инструментов. Убедитесь, что размер рисунка изменился.
Вернитесь в Блокнот и добавьте в тегу <IMG> атрибут ALT, сделав его значением произвольный текст.
В браузере просмотрите изменения, совершив операцию зависания курсора мыши над рисунком.
Вернитесь в приложение Блокнот и заключите тег <IMG> в тег <A> со значением атрибута HREF="link.htm ",
В браузере убедитесь в том, что рисунок заключился в синюю рамку и является гиперссылкой на файл link.htm,
В графическом редакторе создайте рисунок image.jpg.
В программу HTML-кода внесите изменения, добавив к тегу <BODY> атрибут BACKGRAUND= " image.jpg".
Откройте браузер Internet Explorer и убедитесь в том, что рисунок image.jpg стал фоном страницы.
Задача 2
Создайте Web- сайт, состоящий из трех страниц, посвященных одной теме.
Первая страница должна быть главной и содержать общее название; фоном ее является самостоятельно созданный рисунок.
На второй странице необходимо расположить два рисунка: слева и справа. Фоном страницы является серый цвет, а текст страницы имеет красный цвет. Текст должен содержать не меньше 10 строк.
Третья страница должна содержать, по крайней мере, один рисунок в любом месте страницы, причем он должен располагаться в 20 пикселах от основного текста, как по вертикали, так и по горизонтали.
Все три страницы должны быть связаны гиперссылками, а именно: на первой странице должны располагаться ссылки на вторую и третью страницы, а последняя страница должна содержать ссылку на первую.
Цвет текста и фона для первой и второй страницы выбрать самостоятельно.
Для каждого рисунка сайта создайте альтернативный текст.
Задача 3
Создать Web-страницу, в которую внедрена схема должностной структуры некоторого предприятия с именами возможных специалистов. Схема должна быть создана самостоятельно в графическом редакторе. Озвучьте страницу.