Практическое занятие №7
Тема: Вставка видео и аудио файлов. Работа с фреймами
Цель работы: научиться использовать мультимедийные файлы и фреймы
Приобретаемые умения и навыки: Умение работать с языком программирования HTML
Норма времени: 2 часа.
Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet
Теоретический материал
Вставка аудио файлов на страницу
Тег добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src. Внутри контейнера можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
Синтаксис
src="URL"
Атрибуты
autoplay - Звук начинает играть сразу после загрузки страницы.
audio autoplay="autoplay"
controls - Добавляет панель управления к аудиофайлу. controls="controls"
loop - Повторяет воспроизведение звука с начала после его завершения.
loop="loop"
preload - Используется для загрузки файла вместе с загрузкой веб-страницы. preload="none | metadata | auto"
src - Указывает путь к воспроизводимому файлу. src="URL"
Вставка видео файлов на страницу
Тег video добавляет, воспроизводит и управляет настройками видеозаписи на веб-странице Путь к файлу задается через атрибут src или вложенный тег .
Синтаксис
video
source src="URL"
video
Атрибуты
controls - Добавляет панель управления к видеоролику.
height - Задает высоту области для воспроизведения видеоролика.
Src - Указывает путь к воспроизводимому видеоролику.
width - Задает ширину области для воспроизведения видеоролика.
Пример использования атрибутов
Фреймы
Для создания фрейма используется тег , который заменяет тег в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги , которые указывают на HTML-документ, предназначенный для загрузки в область
При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов.
Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (пример 1).
Пример 1. Файл index.html
В данном примере окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.
В теге задается имя HTML-файла, загружаемого в указанную область с помощью атрибута src. В левое окно будет загружен файл, названный menu.html (пример 2), а в правое — content.html (пример 3). Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью атрибута name.
Пример 2. Файл menu.html
Пример 3. Файл content.html
В данном случае опять используется тег , но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows, где для разнообразия применяется процентная запись (пример 4).
Пример 4. Три фрейма
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один , который повторяет уже известную вам структуру.
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один , который повторяет уже известную вам структуру
Бегущая строка
Тег создает бегущую строку на странице. На самом деле содержимое контейнера не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.
Атрибуты
bgcolor - Цвет фона. marquee bgcolor="цвет"...marquee
direction - Указывает направление движения содержимого контейнера .
Синтаксис
direction="down | left | right | up"...
Значения
Down - Движение сверху вниз.
Left - Движение справа налево.
Right - Движение в правую сторону.
Up - Движение вверх.
Линия разделения
Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
Атрибуты
align - Определяет выравнивание линии.
color - Цвет линии. hr color="цвет"
size - Толщина линии. hr size="число"
width - Ширина линии hr width="число%"
Создание фона сайта
Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта.
Синтаксис
body background="URL"...body
Ход работы
Задание: С помощью тегов приведенных в теоретическом материале и изученный ранее создать простой сайт по примеру. Результат сайта представлен ниже. Материалы для практической работы вам предоставит преподаватель.
Результат
Контрольные вопросы
Что такое фреймы?
Опишите способ вставки аудио и видео файлов?