Файловый архив студентов. Файловый архив студентов.
1299 вузов, 5060 предметов.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Белорусский государственный университет
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
yazyk_HTML_laboratornye_raboty.docx
Скачиваний:
0
Добавлен:
26.02.2020
Размер:
366 Кб
Скачать
☆
►Содержание►

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

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

  • 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-документы «Школьного кафе» оформите самостоятельно.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности