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

Звуковые эффекты на веб-страницах создаются с помощью аудио­файлов. Наиболее распространены следующие форматы:

· wav – стандартный формат Windows-приложений;

· midi – этот формат содержит запись нот и коды музыкальных инст­рументов, по которым синтезируется звук;

· mp3 – этот формат характеризуется высокой степенью сжатия.

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

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

src – задает URL-адрес звукового файла;

loop – определяет количество повторений файла;

volume – задает уровень звука. Может принимать значения от -10000 до 0, т. е. звук можно только приглушать. Значение 0 – макси­мальный уровень звука.

В страницу можно «встроить» аудиоплейер с помощью тега < embed> с атрибутами:

src – URL-адрес звукового файла;

width, height – размеры панели управления проигрывателя (в пик­селах или процентах от полного размера);

autostart – может принимать два значения: true – начало вос­произведения сразу после загрузки страницы и false – включение звука пользователем.

На веб-страницах можно размещать видеофайлы в разных фор­матах:

· MPEG – видеофайлы (расширение.mpg или.mpeg) в этом формате обычно имеют большой размер, обеспечивают высокое качество видео;

· AVI – большинство видео- и аудиофайлов в Windows сохранены в этом формате (расширение файлов. avi);

· QuickTime – небольшой размер файлов в этом формате не требует длительной загрузки по сети (расширение файлов.mov).

Для вставки видеофайлов можно воспользоваться тегом < embed> с атрибутом

src=" URL – адрес видеофайла".

Также можно воспользоваться тегом < img> с атрибутом

dynsrc=" URL – адрес видеофайла".

Задание 5.2. Запишите определения основных понятий в тетрадь.

Коротко о главном

< IMG src=”…” …> — тег для вставки рисунка.

Браузеры поддерживают графические форматы GIF, JPG, PNG.

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

< BGSOUND> – тег для подключения звукозаписи в фоновом режиме.

< EMBED> – тег для загрузки и отображения видео- и аудиофайлов.

< IMG dynsrc=" URL-адрес видеофайла" > — использование тега < img> для вставки видеофайлов.

Задание 5.3.

Ø Скопируйте рисунки с расширениями.gif,.jpg, которые будут размещены на страницах, в свою папку. При необходимости переименуйте их в Fon1.jpg, Ris1.gif, Ris2.jpg.

Ø Отредактируйте, созданный ранее HTML-документ str2F.html (F – первая буква вашей фамилии), в котором будут использованы:

• в качестве фона – рисунок с расширением jpg, например Fon1.jpg;

• заголовок – бегущая строка с текстом «В документ можно встав­лять рисунки формата JPG и GIF»;

• первый рисунок – рисунок с расширением gif, например Ris1.gif;

• текст к первому рисунку: «Рисунки можно размещать справа или слева от текста или других рисунков»;

• второй рисунок – рисунок с расширением jpg, например Ris2.jpg;

• последний рисунок вставить три раза, каждый раз меняя его размер;

• текст ко второму рисунку: «Размеры рисунков можно изменять».

Ø Для этого в открывающий тег < BODY> допишите атрибут background=" Fon1.jpg".

< BODY background=" Fon1.jpg" >

Ø Перед закрывающим тегом < /BODY> вставьте следующую последовательность тегов:

< FONT size=" +5" color=" blue" >

< MARQUEE> B документ можно вставлять рисунки форматов JPG и GIF

< /MARQUEE>

< /FONT>

< HR color=" blue" >

< IMG src=" ris1.gif" align=" right" >

< FONT color= " navy" >

< РРЕ> Рисунки можно размещать

справа или слева

от текста или других рисунков < /PRE>

< /FONT>

< HR>

< IMG src=" ris2.jpg" >

< IMG src=" ris2. jpg " width=" 80" heigth=" 80" >

< IMG src=" ris2. jpg " width=" 160" heigth=" 160" >

< FONT color=" navy" >

< В> Размеры рисунков можно изменять < /В>

< /FONT>

Ø Сохраните HTML-документ и посмотрите, что получилось. При необходимости исправьте ошибки.

Задание 5.4.

Ø В своей папке создайте новую папку «Фамилия фрагмент сайта».

Ø Скопируйте изображения, которые будут расположены на страницах вашего сайта.

Ø Создайте три HTML-документа, отличающихся цветом фона, в одном из них в качестве фона используйте рисунок. Создайте гиперссылки с первого документа на второй и третий, со второго – на первый и третий, с третьего – на второй и первый. Со­храните их под именами start.html, str1.html и str2.html со­ответственно.

Например

< HTML>

< HEAD>

< TITLE> Главная< /TITLE>

< /HEAD>

< BODY bgcolor=" blue" text=" yellow" >

< H1> Страничка CTAPT< /H1>

< HR>

< A href=" str1.html" > Страница 1 < /A>

< A href=" str1.html" > Страница 1 < /A>

< /BODY>

< /HTML>

< HTML>

< HEAD>

< ТIТLЕ> Страница 1< /ТIТLЕ>

< /HEAD>

< BODY bgcolor=" cyan" text=" blue" >

< Н1> Страничка 1< /Н1>

< HR>

< A href=" start.html" >

< IMG sгс =" ris2.JPG " align=" left" >

< /A>

< A href=" str2.html" >

< IMG sгс =" ris3.JPG " align=" right" >

< /A>

< /BODY>

< /HTML>

< HTML>

< HEAD>

< ТIТLЕ> Страница 2 < /ТIТLЕ>

< /HEAD>

< BODY bgcolor=" Ris1.jpg" text=" blue" >

< Н1> Страничка 2< /Н1>

< HR>

< A href=" start.html" > Главная < /A>

< A href=" str2.html" > Страница 1 < /A>

< /BODY>

< /HTML>

Задание 5.5.

Ø Скопируйте в свою папку любой звуковой файл формата.mpЗ и переименуйте его в «soundtrack».

Ø Откройте HTML-документ str2.html, созданный в предыдущем задании. Подключите фоновое звуковое сопровождение. Для этого вставьте тег

< bgsound src=" soundtrack.mpЗ" loop=" 2" volume=" -1000" >

где soundtrack.mpЗ – звуковой файл.

Ø Просмотрите результат.

Задание 5.6.

Ø Создайте новую папку «Школьное кафе», в которую скопируйте рисунки для оформления страничек, переименуйте их соответственно в fotofon.jpg, fotofon1.jpg и т.д.

Ø Создайте следующие документы и свяжите их гипертекстовой связью.

Документ main.html

< HTML>

< HEAD>

< TITLE> Школьное кафе< /TITLE>

< /HEAD>

< BODY background=" fotofon.jpg" >

< H1 align=" center" > Школьное кафе «Ласунак»< /Н1>

< HR>

< Н2> Меню на сегодня: < /Н2>

< HR>

< OL>

< LI> < A href =" first.html" > Супы< /А>

< LI> < A href =" second.html" > Горячие блюда< /А>

< LI> < A href =" fast food.html" > Булочки< /А>

< LI> < A href =" other.html" > Сладости< /А>

< /OL>

< /BODY>

< /HTML>

Документ first.html

< HTML>

< HEAD>

< TITLE> Школьное кафе – супы< /TITLE>

< /HEAD>

< BODY background=" fotofon1.jpg" >

< H1 align=" center" > Супы< /Н1>

< HR>

< OL>

< LI> Борщ < /LI>

< LI> Рассольник < /LI>

< LI> Молочный с овощами < /LI>

< /OL>

< A href=" main.html" > Ha главную< /А>

< /BODY>

< /HTML>

Ø Остальные HTML-документы «Школьного кафе» оформите самостоятельно.

Лабораторная работа №6. «Таблицы в HTML-документе»

Задание 6.1. Изучите материал темы «Таблицы в HTML-документе», добавьте новую ось в логико-смысловую модель «Структура HTML-приложения».