ЛАБОРАТОРНЫЙ ПРАКТИКУМ ПО HTML
Главная
ЛР №1: Структура HTML документа. Дескрипторы.
ЛР №2: Форматирование текста. Графика в HTML.
ЛР №3: Списки и таблицы.
ЛР №4: Гиперсвязи и фреймы.
ЛР №5: Вставка аудио, видео и flash на сайт.
ЛР №6: Технология CSS.
ЛР №7: Создание форм.
ЛР №8: Разработка сайта с нуля.
Зачетная лабораторная работа.
СПРАВОЧНАЯ ИНФОРМАЦИЯ
Копирование текста
Таблица цветов
Словарь HTML
Свойства CSS
РЕКОМЕНДУЕМЫЕ РЕСУРСЫ
Справочник по HTML и CSS. Для тех, кто делает сайты
PHP: Простой учебник - Manual
Профессиональные бесплат-ные шаблоны HTML и CSS
Яндекс.Вебмастер - проверка орфографии сайта
Адвего - проверка орфографии сайта
Поиск для сайта Яндекс
Поиск для сайта Google
Яндекс: «Поделиться» в соцсетях
Плагины JavaScript jQuery UI
Слайд-плагин Highslide JS/jQuery
Слайд-плагин Fancybox JS/jQuery
Слайд-плагин Lightbox JS/jQuery
"Кремлёвская" JS-утилита Masha
JS/jQuery утилита Flot для построения графиков
лр №5 Вставка аудио, видео и flash на сайт
Вставка аудио
Форматы аудио-файлов:
- mp3
- wav
- ogg
Для вставки аудио-плеера используется следующий код:
В браузере Google Chrome плеер будет выглядеть так:
Атрибуты тега <AUDIO> для плеера:
| Атрибут | Значение | Описание |
|---|---|---|
| autoplay | autoplay | Указывает, что аудио должен начать играть, как только будет готов |
| controls | controls | Указывает, что элементы управления воспроизведением должны отображаться |
| loop | loop | Указывает, что аудио должно начаться снова, когда оно будет закончено |
| preload | auto metadata none |
Определяет, должно ли аудио быть загруженным при загрузке страницы |
| src | url | Указывает адрес аудио для проигрывания |
Другие возможности вставки аудио на сайт
| 1 | <a href="имя_файла.mp3">Включи воспроизведение</a> |
|---|---|
| 2 | <bgsound src="имя_файла.wav" loop="5"> |
| *только для форматов: wav, mp3, aiff, wma | |
| 3 | <embed src="имя_файла.mp3" height="40" width="250"> |
В этих случаях используется следующий код:
В браузере Internet Explorer это будет выглядеть так:
Вставка видео
Форматы аудио-файлов:
- MP4
- WebM
- Ogg
Для вставки видео используется следующий код:
В браузере Google Chrome это будет выглядеть так:
Атрибуты тега <VIDEO> для плеера:
| Атрибут | Значение | Описание |
|---|---|---|
| autoplay | autoplay | Если указан, видео начнет играть сразу как только оно будет готово |
| audio | muted | Определяет по умолчанию состояние звука. В настоящий момент только "muted" разрешено |
| controls | controls | Если указан, кнопки управления будут показаны, такие как кнопка воспроизведения |
| height | пиксели | Указывает высоту видео плеера |
| loop | loop | Если указан, видео начнет проигрываться снова, как только закончится |
| poster | url | Указывает URL изображения, представляющего видео |
| preload | auto metadata none |
Если указан, видео будет загружено при загрузке страницы, и готово к запуску. Игнорируется, если "autoplay" указан |
| src | url | Адрес URL видео для проигрывания |
| width | пиксели | Указывает ширину видео плеера |
Другие варианты вставки видео (без плеера):
В браузере Internet Explorer это будет выглядеть так:
| 1 | <a href="имя_файла.avi">Включи и смотри</a> |
|---|---|
| 2 | <img dynsrc="имя_файла.wmv"start = mouseover loop=1> |
| *только для воспроизведения в IE |
Вставка Flash
Для вставки Flash используется следующий код:
В браузере Google Chrome это будет выглядеть так:
Задание
По результатом лабораторной работы №4 у Вас создана заготовка сайта с фреймовой структурой. Проиллюстрируйте каждый файл, открывающийся в окне фрейма (referat.html, proverbs.html и murphy.html) подходящими по контексту звуковыми и видео фрагментами.
