Создать
Мой контент
Аккаунт
Каталог
Система
Приложение и соцсети
Правовая информация
Наши проекты
Создание веб-страницы с мультимедийными объектами (HTML, CSS)
Практическая работа «Создание веб-страницы, включающей
мультимедийные объекты (рисунки, звуковые данные, видео)»
Цель: научиться добавлять мультимедиа на веб-страницы.
Ход работы
Часть 1. Вставка рисунков
1. Скопируйте на свой компьютер каталог IMG. Откройте файл img.htm в
редакторе.
Ваша задача – оформить веб-страницу про некоторые направления в
музыке XX века. Для оформления нужно использовать рисунки из
подкаталога images.
2. Добавьте заголовок страницы (TITLE), укажите там название документа
и фамилию автора, например:
Веб-страница с рисунками: работа Василия Пупкина
3. Найдите и выделите соответствующими тэгами заголовок документа и
заголовки разделов.
4. Разбейте текст на абзацы.
5. Замените верхние кавычки на «ёлочки».
6. Замените везде знаки «минус» на тире, сделайте так, чтобы тире не
отрывались от предыдущих слов.
7. Создайте стилевой файл mystyle.css и подключите его к веб-странице. С
помощью стилевого файла:
а) Установите в качестве фона страницы рисунок back.jpg;
б) Выберите соответствующий цвет текста.
в) Создайте класс name, определите для него жирный шрифт, курсив и
свой цвет, и выделите имена и фамилии, названия ансамблей,
фильмов, песен (тэг SPAN).
8. Добавьте на страницу рисунки, расположенные в подкаталоге images.
9. Установите для рисунков выравнивание (с обтеканием текстом) и
всплывающие подсказки. Рисунки лучше ставить в шахматном порядке
0
(один налево, следующий – направо и т.д.)
10.С помощью стилевого файла установите для рисунков внешний отступ
(margin) 10 пикселей.
0
Часть 2. Вставка звуковых файлов и видео
1. Скопируйте на свой компьютер каталог MEDIA. Откройте файл
media.htm в редакторе. Ваша задача – научиться добавлять на веб-
страницу звуковые файлы, флэш-анимацию и видеоролики. Для этого
нужно использовать мультимедийные данные из подкаталогов audio,
flash и video. Места вставки медиафайлов вы легко определите из текста
файла media.htm.
2. Добавьте на веб-страницу звуковой файл hcopter.wav из каталога audio
(шум вертолёта). Используйте тэг embed, отключите автозапуск
проигрывания, установите ширину проигрывателя 300 пикселей и высоту
20 пикселей.
3. Добавьте на веб-страницу звуковой файл nature.mp3 из каталога audio
(звуки природы). Используйте тэг embed, укажите те же атрибуты, что и
в предыдущем случае.
4. Добавьте на веб-страницу звуковой файл nature.ogg из каталога audio
(звуки природы). Используйте тэг audio, укажите его атрибуты:
src="адрес файла" ссылка на файл-источник
controls="controls" показывать элементы управления
width="300" ширина проигрывателя в пикселях
height="20" высота проигрывателя в пикселях
Откройте веб-страницу в браузере и выясните, поддерживает ли ваш браузер
тэг audio.
Ответ:
5. С помощью тэге embed добавьте на страницу флэш-ролик cube.swf
(вращающийся кубик) из каталога flash. Установите размеры 257 на 200
0
пикселей.
6. С помощью тэге embed добавьте на страницу флэш-ролик lightbot.swf
(игра Lightbot) из каталога flash. Установите размеры 640 на 480
пикселей. Откройте веб-страницу в браузере и посмотрите, как работает
флэш-анимация.
7. Зайдите на сервис youtube.com, с помощью поиска по сайту найдите
ролик по теме «HTML5» и вставьте на веб-страницу. Для этого нужно
щелкнуть по кнопке Поделиться под роликом, затем – по строчке HTML-
код. После этого остается просто скопировать код, появившийся в
текстовом окне, на веб-страницу.
8. С помощью тэга video добавьте на страницу видеофайл finish.mp4 из
каталога video следующим образом:
<video width="ширина" height="высота" controls="controls">
0
<source src="адрес файла"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
Установите размеры окна 320 на 240 пикселей.
9. С помощью тэга video добавьте видеофайл finish.webm из каталога video
следующим образом:
<video width="ширина" height="высота" controls="controls">
<source src="адрес файла"
type='video/webm; codecs="vp8, vorbis"'>
</video>
Установите размеры окна 320 на 240 пикселей.
10.Обновите страницу в браузере и выясните, поддерживает ли ваш браузер
тэг video, и с какими форматами он умеет работать.
0
Название файлов:
В первой папке IMG-
IMG.HTML(В НЕМ ТЕСКТ: Музыка XX века
Классическая музыка
XX век - время новаторства в классической музыке. Одним из известнейших
композиторов был Альфред Шнитке (р. 1934). В концепционной музыке
Шнитке традиционный музыкальный язык сосуществует с многообразием
современной композиционной техники.
Новые направления
В нашем веке появились многие новые направления в музыке, корни которых,
тем не менее, уходят в глубь истории. Одним из самых значительных явлений
стало появление четверки "Битлз", которая определила не только
музыкальные увлечения, но и стиль жизни целого поколения молодежи 60-70
годов. Главное в песнях "Битлз" - чудесные мелодии, которые музыканты
называют "evergreen" - вечнозеленые. Лучшей мелодией 70-х годов стала
песня "Yesterday" группы "Битлз".
Открытием 80-х годов стала группа "Queen". Ее песня "Show must go on" по
сей день остается популярной и любимой. В отличие от песен многих
современных групп, важное значение в песнях "Queen" играют тексты -
философская попытка осмысления жизни и своей роли в ней.
Авторская песня
В Советском Союзе в период "оттепели" возникло новое направление в поэзии
и музыке - авторская песня. Его создали люди разных профессий - актеры,
журналисты, физики, литераторы - которые сами писали стихи и музыку и
сами исполняли свои песни. Одним из самых любимых и известных авторов
был актер Владимир Высоцкий (1938-1980). С 1964 года Высоцкий работал в
Московском театре драмы и комедии на Таганке. Он стал широко известен
благодаря фильмам "Вертикаль" (1967), "Короткие встречи" (1968),
телефильму "Место встречи изменить нельзя" (1979).)
MYSTYLE.CSS(ПУСТОЙ)
MYSTYLE.HTML(ПУСТОЙ)
ТАКЖЕ В ПАПКЕ IMG ПАПКА IMAGES(НАЗВАНИЕ ФАЙЛОВ ВНУТРИ-
BACK.JPG,BEATLES.JPG,QUEEN.JPG,SHNITKE.JPG,VYSOT)
Во второй папке media:
Папка audio(hcopter.wav,nature.mp3,nature.ogg)
Папка flash(cube.sfw,lightbot.swf)
Папка video(finish.mp4,finish.webm)
Media.htm
реши практическую
мультимедийные объекты (рисунки, звуковые данные, видео)»
Цель: научиться добавлять мультимедиа на веб-страницы.
Ход работы
Часть 1. Вставка рисунков
1. Скопируйте на свой компьютер каталог IMG. Откройте файл img.htm в
редакторе.
Ваша задача – оформить веб-страницу про некоторые направления в
музыке XX века. Для оформления нужно использовать рисунки из
подкаталога images.
2. Добавьте заголовок страницы (TITLE), укажите там название документа
и фамилию автора, например:
Веб-страница с рисунками: работа Василия Пупкина
3. Найдите и выделите соответствующими тэгами заголовок документа и
заголовки разделов.
4. Разбейте текст на абзацы.
5. Замените верхние кавычки на «ёлочки».
6. Замените везде знаки «минус» на тире, сделайте так, чтобы тире не
отрывались от предыдущих слов.
7. Создайте стилевой файл mystyle.css и подключите его к веб-странице. С
помощью стилевого файла:
а) Установите в качестве фона страницы рисунок back.jpg;
б) Выберите соответствующий цвет текста.
в) Создайте класс name, определите для него жирный шрифт, курсив и
свой цвет, и выделите имена и фамилии, названия ансамблей,
фильмов, песен (тэг SPAN).
8. Добавьте на страницу рисунки, расположенные в подкаталоге images.
9. Установите для рисунков выравнивание (с обтеканием текстом) и
всплывающие подсказки. Рисунки лучше ставить в шахматном порядке
0
(один налево, следующий – направо и т.д.)
10.С помощью стилевого файла установите для рисунков внешний отступ
(margin) 10 пикселей.
0
Часть 2. Вставка звуковых файлов и видео
1. Скопируйте на свой компьютер каталог MEDIA. Откройте файл
media.htm в редакторе. Ваша задача – научиться добавлять на веб-
страницу звуковые файлы, флэш-анимацию и видеоролики. Для этого
нужно использовать мультимедийные данные из подкаталогов audio,
flash и video. Места вставки медиафайлов вы легко определите из текста
файла media.htm.
2. Добавьте на веб-страницу звуковой файл hcopter.wav из каталога audio
(шум вертолёта). Используйте тэг embed, отключите автозапуск
проигрывания, установите ширину проигрывателя 300 пикселей и высоту
20 пикселей.
3. Добавьте на веб-страницу звуковой файл nature.mp3 из каталога audio
(звуки природы). Используйте тэг embed, укажите те же атрибуты, что и
в предыдущем случае.
4. Добавьте на веб-страницу звуковой файл nature.ogg из каталога audio
(звуки природы). Используйте тэг audio, укажите его атрибуты:
src="адрес файла" ссылка на файл-источник
controls="controls" показывать элементы управления
width="300" ширина проигрывателя в пикселях
height="20" высота проигрывателя в пикселях
Откройте веб-страницу в браузере и выясните, поддерживает ли ваш браузер
тэг audio.
Ответ:
5. С помощью тэге embed добавьте на страницу флэш-ролик cube.swf
(вращающийся кубик) из каталога flash. Установите размеры 257 на 200
0
пикселей.
6. С помощью тэге embed добавьте на страницу флэш-ролик lightbot.swf
(игра Lightbot) из каталога flash. Установите размеры 640 на 480
пикселей. Откройте веб-страницу в браузере и посмотрите, как работает
флэш-анимация.
7. Зайдите на сервис youtube.com, с помощью поиска по сайту найдите
ролик по теме «HTML5» и вставьте на веб-страницу. Для этого нужно
щелкнуть по кнопке Поделиться под роликом, затем – по строчке HTML-
код. После этого остается просто скопировать код, появившийся в
текстовом окне, на веб-страницу.
8. С помощью тэга video добавьте на страницу видеофайл finish.mp4 из
каталога video следующим образом:
<video width="ширина" height="высота" controls="controls">
0
<source src="адрес файла"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
Установите размеры окна 320 на 240 пикселей.
9. С помощью тэга video добавьте видеофайл finish.webm из каталога video
следующим образом:
<video width="ширина" height="высота" controls="controls">
<source src="адрес файла"
type='video/webm; codecs="vp8, vorbis"'>
</video>
Установите размеры окна 320 на 240 пикселей.
10.Обновите страницу в браузере и выясните, поддерживает ли ваш браузер
тэг video, и с какими форматами он умеет работать.
0
Название файлов:
В первой папке IMG-
IMG.HTML(В НЕМ ТЕСКТ: Музыка XX века
Классическая музыка
XX век - время новаторства в классической музыке. Одним из известнейших
композиторов был Альфред Шнитке (р. 1934). В концепционной музыке
Шнитке традиционный музыкальный язык сосуществует с многообразием
современной композиционной техники.
Новые направления
В нашем веке появились многие новые направления в музыке, корни которых,
тем не менее, уходят в глубь истории. Одним из самых значительных явлений
стало появление четверки "Битлз", которая определила не только
музыкальные увлечения, но и стиль жизни целого поколения молодежи 60-70
годов. Главное в песнях "Битлз" - чудесные мелодии, которые музыканты
называют "evergreen" - вечнозеленые. Лучшей мелодией 70-х годов стала
песня "Yesterday" группы "Битлз".
Открытием 80-х годов стала группа "Queen". Ее песня "Show must go on" по
сей день остается популярной и любимой. В отличие от песен многих
современных групп, важное значение в песнях "Queen" играют тексты -
философская попытка осмысления жизни и своей роли в ней.
Авторская песня
В Советском Союзе в период "оттепели" возникло новое направление в поэзии
и музыке - авторская песня. Его создали люди разных профессий - актеры,
журналисты, физики, литераторы - которые сами писали стихи и музыку и
сами исполняли свои песни. Одним из самых любимых и известных авторов
был актер Владимир Высоцкий (1938-1980). С 1964 года Высоцкий работал в
Московском театре драмы и комедии на Таганке. Он стал широко известен
благодаря фильмам "Вертикаль" (1967), "Короткие встречи" (1968),
телефильму "Место встречи изменить нельзя" (1979).)
MYSTYLE.CSS(ПУСТОЙ)
MYSTYLE.HTML(ПУСТОЙ)
ТАКЖЕ В ПАПКЕ IMG ПАПКА IMAGES(НАЗВАНИЕ ФАЙЛОВ ВНУТРИ-
BACK.JPG,BEATLES.JPG,QUEEN.JPG,SHNITKE.JPG,VYSOT)
Во второй папке media:
Папка audio(hcopter.wav,nature.mp3,nature.ogg)
Папка flash(cube.sfw,lightbot.swf)
Папка video(finish.mp4,finish.webm)
Media.htm
реши практическую
Практическая работа «Создание веб-страницы с мультимедийными объектами» 📱🎵🎬
Давайте разберем решение этой практической работы по частям.
Часть 1: Вставка рисунков 🖼️
Сначала создадим файл mystyle.css и настроим его для оформления страницы:
body {
background-image: url('images/back.jpg');
color: #333; /* Темно-серый цвет текста для лучшей читаемости */
}
.name {
font-weight: bold;
font-style: italic;
color: #800000; /* Бордовый цвет для выделения */
}
img {
margin: 10px;
}
Теперь отредактируем файл img.htm:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Веб-страница с рисунками: работа [Ваша фамилия]</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Музыка XX века</h1>
<h2>Классическая музыка</h2>
<p>
<img src="images/shnitke.jpg" alt="Альфред Шнитке" title="Альфред Шнитке" align="left">
XX век — время новаторства в классической музыке. Одним из известнейших композиторов был <span class="name">Альфред Шнитке</span> (р. 1934). В концепционной музыке Шнитке традиционный музыкальный язык сосуществует с многообразием современной композиционной техники.
</p>
<h2>Новые направления</h2>
<p>
<img src="images/beatles.jpg" alt="Битлз" title="Группа Битлз" align="right">
В нашем веке появились многие новые направления в музыке, корни которых, тем не менее, уходят в глубь истории. Одним из самых значительных явлений стало появление четверки «<span class="name">Битлз</span>», которая определила не только музыкальные увлечения, но и стиль жизни целого поколения молодежи 60-70 годов. Главное в песнях «Битлз» — чудесные мелодии, которые музыканты называют «<span class="name">evergreen</span>» — вечнозеленые. Лучшей мелодией 70-х годов стала песня «<span class="name">Yesterday</span>» группы «Битлз».
</p>
<p>
<img src="images/queen.jpg" alt="Queen" title="Группа Queen" align="left">
Открытием 80-х годов стала группа «<span class="name">Queen</span>». Ее песня «<span class="name">Show must go on</span>» по сей день остается популярной и любимой. В отличие от песен многих современных групп, важное значение в песнях «Queen» играют тексты — философская попытка осмысления жизни и своей роли в ней.
</p>
<h2>Авторская песня</h2>
<p>
<img src="images/vysot.jpg" alt="Владимир Высоцкий" title="Владимир Высоцкий" align="right">
В Советском Союзе в период «оттепели» возникло новое направление в поэзии и музыке — авторская песня. Его создали люди разных профессий — актеры, журналисты, физики, литераторы — которые сами писали стихи и музыку и сами исполняли свои песни. Одним из самых любимых и известных авторов был актер <span class="name">Владимир Высоцкий</span> (1938-1980). С 1964 года Высоцкий работал в Московском театре драмы и комедии на Таганке. Он стал широко известен благодаря фильмам «<span class="name">Вертикаль</span>» (1967), «<span class="name">Короткие встречи</span>» (1968), телефильму «<span class="name">Место встречи изменить нельзя</span>» (1979).
</p>
</body>
</html>
Часть 2: Вставка звуковых файлов и видео 🎵🎬
Теперь отредактируем файл media.htm:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Веб-страница с мультимедиа: работа [Ваша фамилия]</title>
</head>
<body>
<h1>Работа с мультимедийными объектами</h1>
<h2>Звуковые файлы</h2>
<h3>Звук вертолёта (формат WAV)</h3>
<embed src="audio/hcopter.wav" width="300" height="20" autostart="false"></embed>
<h3>Звуки природы (формат MP3)</h3>
<embed src="audio/nature.mp3" width="300" height="20" autostart="false"></embed>
<h3>Звуки природы (формат OGG)</h3>
<audio src="audio/nature.ogg" controls="controls" width="300" height="20"></audio>
<h2>Флэш-анимация</h2>
<h3>Вращающийся кубик</h3>
<embed src="flash/cube.swf" width="257" height="200"></embed>
<h3>Игра Lightbot</h3>
<embed src="flash/lightbot.swf" width="640" height="480"></embed>
<h2>Видеоролики</h2>
<h3>Видео с YouTube по теме HTML5</h3>
<!-- Здесь будет код вставки с YouTube, который вы получите при поиске ролика -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
<h3>Видео в формате MP4</h3>
<video width="320" height="240" controls="controls">
<source src="video/finish.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<h3>Видео в формате WebM</h3>
<video width="320" height="240" controls="controls">
<source src="video/finish.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
</body>
</html>
Пояснения к решению 📝
Часть 1: Вставка рисунков
-
Создание CSS-файла: Мы создали файл
mystyle.cssс настройками для фона, текста и изображений. -
Оформление HTML-документа:
- Добавили заголовок страницы (тег<title>)
- Выделили заголовки документа (теги<h1>,<h2>)
- Разбили текст на абзацы (теги<p>)
- Заменили кавычки на «ёлочки»
- Заменили знаки «минус» на тире
- Подключили стилевой файл -
Работа с изображениями:
- Добавили изображения с помощью тега<img>
- Установили выравнивание с обтеканием текстом (атрибутalign)
- Добавили всплывающие подсказки (атрибутtitle)
- Расположили изображения в шахматном порядке (чередуяalign="left"иalign="right")
- Установили отступы для изображений через CSS
Часть 2: Вставка звуковых файлов и видео
-
Добавление звуковых файлов:
- Использовали тег<embed>для WAV и MP3 файлов
- Использовали тег<audio>для OGG файла -
Добавление флэш-анимации:
- Использовали тег<embed>для SWF файлов -
Добавление видео:
- Добавили видео с YouTube через тег<iframe>
- Добавили локальные видеофайлы через тег<video>с вложенным тегом<source>
Важные замечания ⚠️
-
В реальном коде для YouTube-видео вместо
VIDEO_IDнужно вставить идентификатор конкретного видео, который вы получите при копировании кода встраивания с YouTube. -
Современные браузеры могут не поддерживать Flash-контент (файлы .swf), так как эта технология устарела и больше не поддерживается.
-
Для полной совместимости с разными браузерами рекомендуется предоставлять видео в нескольких форматах (как в примере с MP4 и WebM).
-
В современной разработке вместо атрибута
alignдля изображений рекомендуется использовать CSS-свойства для позиционирования.
реши практическую-Практическая работа «Создание веб-страницы, включающей
мультимедийные объекты (рисунки, звуковые данные, видео)»
Цель: научиться добавлять мультимедиа на веб-страницы.
Ход работы
Часть 1. Вставка рисунков
1. Скопируйте на свой компьютер каталог IMG. Откройте файл img.htm в
редакторе.
Ваша задача – оформить веб-страницу про некоторые направления в
музыке XX века. Для оформления нужно использовать рисунки из
подкаталога images.
2. Добавьте заголовок страницы (TITLE), укажите там название документа
и фамилию автора, например:
Веб-страница с рисунками: работа Василия Пупкина
3. Найдите и выделите соответствующими тэгами заголовок документа и
заголовки разделов.
4. Разбейте текст на абзацы.
5. Замените верхние кавычки на «ёлочки».
6. Замените везде знаки «минус» на тире, сделайте так, чтобы тире не
отрывались от предыдущих слов.
7. Создайте стилевой файл mystyle.css и подключите его к веб-странице. С
помощью стилевого файла:
а) Установите в качестве фона страницы рисунок back.jpg;
б) Выберите соответствующий цвет текста.
в) Создайте класс name, определите для него жирный шрифт, курсив и
свой цвет, и выделите имена и фамилии, названия ансамблей,
фильмов, песен (тэг SPAN).
8. Добавьте на страницу рисунки, расположенные в подкаталоге images.
9. Установите для рисунков выравнивание (с обтеканием текстом) и
всплывающие подсказки. Рисунки лучше ставить в шахматном порядке
(один налево, следующий – направо и т.д.)
10.С помощью стилевого файла установите для рисунков внешний отступ
(margin) 10 пикселей.
0
Часть 2. Вставка звуковых файлов и видео
1. Скопируйте на свой компьютер каталог MEDIA. Откройте файл
media.htm в редакторе. Ваша задача – научиться добавлять на веб-
страницу звуковые файлы, флэш-анимацию и видеоролики. Для этого
нужно использовать мультимедийные данные из подкаталогов audio,
flash и video. Места вставки медиафайлов вы легко определите из текста
файла media.htm.
2. Добавьте на веб-страницу звуковой файл hcopter.wav из каталога audio
(шум вертолёта). Используйте тэг embed, отключите автозапуск
проигрывания, установите ширину проигрывателя 300 пикселей и высоту
20 пикселей.
3. Добавьте на веб-страницу звуковой файл nature.mp3 из каталога audio
(звуки природы). Используйте тэг embed, укажите те же атрибуты, что и
в предыдущем случае.
4. Добавьте на веб-страницу звуковой файл nature.ogg из каталога audio
(звуки природы). Используйте тэг audio, укажите его атрибуты:
src="адрес файла" ссылка на файл-источник
controls="controls" показывать элементы управления
width="300" ширина проигрывателя в пикселях
height="20" высота проигрывателя в пикселях
Откройте веб-страницу в браузере и выясните, поддерживает ли ваш браузер
тэг audio.
Ответ:
5. С помощью тэге embed добавьте на страницу флэш-ролик cube.swf
(вращающийся кубик) из каталога flash. Установите размеры 257 на 200
пикселей.
6. С помощью тэге embed добавьте на страницу флэш-ролик lightbot.swf
(игра Lightbot) из каталога flash. Установите размеры 640 на 480
пикселей. Откройте веб-страницу в браузере и посмотрите, как работает
флэш-анимация.
7. Зайдите на сервис youtube.com, с помощью поиска по сайту найдите
ролик по теме «HTML5» и вставьте на веб-страницу. Для этого нужно
щелкнуть по кнопке Поделиться под роликом, затем – по строчке HTML-
код. После этого остается просто скопировать код, появившийся в
текстовом окне, на веб-страницу.
8. С помощью тэга video добавьте на страницу видеофайл finish.mp4 из
каталога video следующим образом:
<video width="ширина" height="высота" controls="controls">
0
<source src="адрес файла"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
Установите размеры окна 320 на 240 пикселей.
9. С помощью тэга video добавьте видеофайл finish.webm из каталога video
следующим образом:
<video width="ширина" height="высота" controls="controls">
<source src="адрес файла"
type='video/webm; codecs="vp8, vorbis"'>
</video>
Установите размеры окна 320 на 240 пикселей.
10.Обновите страницу в браузере и выясните, поддерживает ли ваш браузер
тэг video, и с какими форматами он умеет работать.
Название файлов:
В первой папке IMG-
IMG.HTML(В НЕМ ТЕСКТ: Музыка XX века
Классическая музыка
XX век - время новаторства в классической музыке. Одним из известнейших композиторов был Альфред Шнитке (р. 1934). В концепционной музыке Шнитке традиционный музыкальный язык сосуществует с многообразием современной композиционной техники.
Новые направления
В нашем веке появились многие новые направления в музыке, корни которых, тем не менее, уходят в глубь истории. Одним из самых значительных явлений стало появление четверки "Битлз", которая определила не только музыкальные увлечения, но и стиль жизни целого поколения молодежи 60-70 годов. Главное в песнях "Битлз" - чудесные мелодии, которые музыканты называют "evergreen" - вечнозеленые. Лучшей мелодией 70-х годов стала песня "Yesterday" группы "Битлз".
Открытием 80-х годов стала группа "Queen". Ее песня "Show must go on" по сей день остается популярной и любимой. В отличие от песен многих современных групп, важное значение в песнях "Queen" играют тексты - философская попытка осмысления жизни и своей роли в ней.
Авторская песня
В Советском Союзе в период "оттепели" возникло новое направление в поэзии и музыке - авторская песня. Его создали люди разных профессий - актеры, журналисты, физики, литераторы - которые сами писали стихи и музыку и сами исполняли свои песни. Одним из самых любимых и известных авторов был актер Владимир Высоцкий (1938-1980). С 1964 года Высоцкий работал в Московском театре драмы и комедии на Таганке. Он стал широко известен благодаря фильмам "Вертикаль" (1967), "Короткие встречи" (1968), телефильму "Место встречи изменить нельзя" (1979).)
MYSTYLE.CSS(ПУСТОЙ)
MYSTYLE.HTML(ПУСТОЙ)
ТАКЖЕ В ПАПКЕ IMG ПАПКА IMAGES(НАЗВАНИЕ ФАЙЛОВ ВНУТРИ-BACK.JPG,BEATLES.JPG,QUEEN.JPG,SHNITKE.JPG,VYSOT)
Во второй папке media:
Папка audio(hcopter.wav,nature.mp3,nature.ogg)
Папка flash(cube.sfw,lightbot.swf)
Папка video(finish.mp4,finish.webm)
Media.htm(там такой текст:
</p>
<p>формат OGG:
</p>
<h2>Флэш-ролики</h2>
<p>Флэш-анимация с кубом, который вращается с помощью мыши:<br />
</p>
<p>Это логическая игра <i>Lightbot</i>, с помощью которой дети
могут научится основам программирования (с сайта <a href="http://noplay.ru/logic/light_bot.htm">noplay.ru</a>):<br />
</p>
<h2>Видео</h2>
<p>Ролик с сервиса Youtube:<br />
</p>
<p>Видео в формате MP4:<br />
</p>
<p>Видео в формате WebM:<br />
</p>)
мультимедийные объекты (рисунки, звуковые данные, видео)»
Цель: научиться добавлять мультимедиа на веб-страницы.
Ход работы
Часть 1. Вставка рисунков
1. Скопируйте на свой компьютер каталог IMG. Откройте файл img.htm в
редакторе.
Ваша задача – оформить веб-страницу про некоторые направления в
музыке XX века. Для оформления нужно использовать рисунки из
подкаталога images.
2. Добавьте заголовок страницы (TITLE), укажите там название документа
и фамилию автора, например:
Веб-страница с рисунками: работа Василия Пупкина
3. Найдите и выделите соответствующими тэгами заголовок документа и
заголовки разделов.
4. Разбейте текст на абзацы.
5. Замените верхние кавычки на «ёлочки».
6. Замените везде знаки «минус» на тире, сделайте так, чтобы тире не
отрывались от предыдущих слов.
7. Создайте стилевой файл mystyle.css и подключите его к веб-странице. С
помощью стилевого файла:
а) Установите в качестве фона страницы рисунок back.jpg;
б) Выберите соответствующий цвет текста.
в) Создайте класс name, определите для него жирный шрифт, курсив и
свой цвет, и выделите имена и фамилии, названия ансамблей,
фильмов, песен (тэг SPAN).
8. Добавьте на страницу рисунки, расположенные в подкаталоге images.
9. Установите для рисунков выравнивание (с обтеканием текстом) и
всплывающие подсказки. Рисунки лучше ставить в шахматном порядке
(один налево, следующий – направо и т.д.)
10.С помощью стилевого файла установите для рисунков внешний отступ
(margin) 10 пикселей.
0
Часть 2. Вставка звуковых файлов и видео
1. Скопируйте на свой компьютер каталог MEDIA. Откройте файл
media.htm в редакторе. Ваша задача – научиться добавлять на веб-
страницу звуковые файлы, флэш-анимацию и видеоролики. Для этого
нужно использовать мультимедийные данные из подкаталогов audio,
flash и video. Места вставки медиафайлов вы легко определите из текста
файла media.htm.
2. Добавьте на веб-страницу звуковой файл hcopter.wav из каталога audio
(шум вертолёта). Используйте тэг embed, отключите автозапуск
проигрывания, установите ширину проигрывателя 300 пикселей и высоту
20 пикселей.
3. Добавьте на веб-страницу звуковой файл nature.mp3 из каталога audio
(звуки природы). Используйте тэг embed, укажите те же атрибуты, что и
в предыдущем случае.
4. Добавьте на веб-страницу звуковой файл nature.ogg из каталога audio
(звуки природы). Используйте тэг audio, укажите его атрибуты:
src="адрес файла" ссылка на файл-источник
controls="controls" показывать элементы управления
width="300" ширина проигрывателя в пикселях
height="20" высота проигрывателя в пикселях
Откройте веб-страницу в браузере и выясните, поддерживает ли ваш браузер
тэг audio.
Ответ:
5. С помощью тэге embed добавьте на страницу флэш-ролик cube.swf
(вращающийся кубик) из каталога flash. Установите размеры 257 на 200
пикселей.
6. С помощью тэге embed добавьте на страницу флэш-ролик lightbot.swf
(игра Lightbot) из каталога flash. Установите размеры 640 на 480
пикселей. Откройте веб-страницу в браузере и посмотрите, как работает
флэш-анимация.
7. Зайдите на сервис youtube.com, с помощью поиска по сайту найдите
ролик по теме «HTML5» и вставьте на веб-страницу. Для этого нужно
щелкнуть по кнопке Поделиться под роликом, затем – по строчке HTML-
код. После этого остается просто скопировать код, появившийся в
текстовом окне, на веб-страницу.
8. С помощью тэга video добавьте на страницу видеофайл finish.mp4 из
каталога video следующим образом:
<video width="ширина" height="высота" controls="controls">
0
<source src="адрес файла"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
Установите размеры окна 320 на 240 пикселей.
9. С помощью тэга video добавьте видеофайл finish.webm из каталога video
следующим образом:
<video width="ширина" height="высота" controls="controls">
<source src="адрес файла"
type='video/webm; codecs="vp8, vorbis"'>
</video>
Установите размеры окна 320 на 240 пикселей.
10.Обновите страницу в браузере и выясните, поддерживает ли ваш браузер
тэг video, и с какими форматами он умеет работать.
Название файлов:
В первой папке IMG-
IMG.HTML(В НЕМ ТЕСКТ: Музыка XX века
Классическая музыка
XX век - время новаторства в классической музыке. Одним из известнейших композиторов был Альфред Шнитке (р. 1934). В концепционной музыке Шнитке традиционный музыкальный язык сосуществует с многообразием современной композиционной техники.
Новые направления
В нашем веке появились многие новые направления в музыке, корни которых, тем не менее, уходят в глубь истории. Одним из самых значительных явлений стало появление четверки "Битлз", которая определила не только музыкальные увлечения, но и стиль жизни целого поколения молодежи 60-70 годов. Главное в песнях "Битлз" - чудесные мелодии, которые музыканты называют "evergreen" - вечнозеленые. Лучшей мелодией 70-х годов стала песня "Yesterday" группы "Битлз".
Открытием 80-х годов стала группа "Queen". Ее песня "Show must go on" по сей день остается популярной и любимой. В отличие от песен многих современных групп, важное значение в песнях "Queen" играют тексты - философская попытка осмысления жизни и своей роли в ней.
Авторская песня
В Советском Союзе в период "оттепели" возникло новое направление в поэзии и музыке - авторская песня. Его создали люди разных профессий - актеры, журналисты, физики, литераторы - которые сами писали стихи и музыку и сами исполняли свои песни. Одним из самых любимых и известных авторов был актер Владимир Высоцкий (1938-1980). С 1964 года Высоцкий работал в Московском театре драмы и комедии на Таганке. Он стал широко известен благодаря фильмам "Вертикаль" (1967), "Короткие встречи" (1968), телефильму "Место встречи изменить нельзя" (1979).)
MYSTYLE.CSS(ПУСТОЙ)
MYSTYLE.HTML(ПУСТОЙ)
ТАКЖЕ В ПАПКЕ IMG ПАПКА IMAGES(НАЗВАНИЕ ФАЙЛОВ ВНУТРИ-BACK.JPG,BEATLES.JPG,QUEEN.JPG,SHNITKE.JPG,VYSOT)
Во второй папке media:
Папка audio(hcopter.wav,nature.mp3,nature.ogg)
Папка flash(cube.sfw,lightbot.swf)
Папка video(finish.mp4,finish.webm)
Media.htm(там такой текст:
</p>
<p>формат OGG:
</p>
<h2>Флэш-ролики</h2>
<p>Флэш-анимация с кубом, который вращается с помощью мыши:<br />
</p>
<p>Это логическая игра <i>Lightbot</i>, с помощью которой дети
могут научится основам программирования (с сайта <a href="http://noplay.ru/logic/light_bot.htm">noplay.ru</a>):<br />
</p>
<h2>Видео</h2>
<p>Ролик с сервиса Youtube:<br />
</p>
<p>Видео в формате MP4:<br />
</p>
<p>Видео в формате WebM:<br />
</p>)
Практическая работа «Создание веб-страницы с мультимедийными объектами» 🖼️🎵🎬
Решим практическую работу пошагово, разделив её на две части согласно заданию.
Часть 1: Вставка рисунков
Шаг 1: Создание стилевого файла mystyle.css
Создадим файл mystyle.css со следующим содержимым:
body {
background-image: url('images/back.jpg');
color: #333333; /* Тёмно-серый цвет текста для лучшей читаемости */
}
.name {
font-weight: bold;
font-style: italic;
color: #800000; /* Бордовый цвет для выделения */
}
img {
margin: 10px;
}
Шаг 2: Редактирование файла img.htm
Отредактируем файл img.htm, добавив необходимые теги и атрибуты:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Веб-страница с рисунками: работа Иванова Ивана</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Музыка XX века</h1>
<h2>Классическая музыка</h2>
<p>
<img src="images/shnitke.jpg" alt="Альфред Шнитке" title="Альфред Шнитке" align="left">
XX век — время новаторства в классической музыке. Одним из известнейших композиторов был <span class="name">Альфред Шнитке</span> (р. 1934). В концепционной музыке Шнитке традиционный музыкальный язык сосуществует с многообразием современной композиционной техники.
</p>
<h2>Новые направления</h2>
<p>
<img src="images/beatles.jpg" alt="Битлз" title="Группа Битлз" align="right">
В нашем веке появились многие новые направления в музыке, корни которых, тем не менее, уходят в глубь истории. Одним из самых значительных явлений стало появление четверки «<span class="name">Битлз</span>», которая определила не только музыкальные увлечения, но и стиль жизни целого поколения молодежи 60-70 годов. Главное в песнях «Битлз» — чудесные мелодии, которые музыканты называют «<span class="name">evergreen</span>» — вечнозеленые. Лучшей мелодией 70-х годов стала песня «<span class="name">Yesterday</span>» группы «Битлз».
</p>
<p>
<img src="images/queen.jpg" alt="Queen" title="Группа Queen" align="left">
Открытием 80-х годов стала группа «<span class="name">Queen</span>». Ее песня «<span class="name">Show must go on</span>» по сей день остается популярной и любимой. В отличие от песен многих современных групп, важное значение в песнях «Queen» играют тексты — философская попытка осмысления жизни и своей роли в ней.
</p>
<h2>Авторская песня</h2>
<p>
<img src="images/vysot.jpg" alt="Владимир Высоцкий" title="Владимир Высоцкий" align="right">
В Советском Союзе в период «оттепели» возникло новое направление в поэзии и музыке — авторская песня. Его создали люди разных профессий — актеры, журналисты, физики, литераторы — которые сами писали стихи и музыку и сами исполняли свои песни. Одним из самых любимых и известных авторов был актер <span class="name">Владимир Высоцкий</span> (1938-1980). С 1964 года Высоцкий работал в Московском театре драмы и комедии на Таганке. Он стал широко известен благодаря фильмам «<span class="name">Вертикаль</span>» (1967), «<span class="name">Короткие встречи</span>» (1968), телефильму «<span class="name">Место встречи изменить нельзя</span>» (1979).
</p>
</body>
</html>
Часть 2: Вставка звуковых файлов и видео
Шаг 1: Редактирование файла media.htm
Отредактируем файл media.htm, добавив необходимые мультимедийные элементы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Веб-страница с мультимедиа: работа Иванова Ивана</title>
</head>
<body>
<h1>Работа с мультимедийными объектами</h1>
<h2>Звуковые файлы</h2>
<p>Шум вертолёта (формат WAV):
<embed src="audio/hcopter.wav" width="300" height="20" autostart="false"></embed>
</p>
<p>Звуки природы (формат MP3):
<embed src="audio/nature.mp3" width="300" height="20" autostart="false"></embed>
</p>
<p>Формат OGG:
<audio src="audio/nature.ogg" controls="controls" width="300" height="20"></audio>
</p>
<h2>Флэш-ролики</h2>
<p>Флэш-анимация с кубом, который вращается с помощью мыши:<br>
<embed src="flash/cube.swf" width="257" height="200"></embed>
</p>
<p>Это логическая игра <i>Lightbot</i>, с помощью которой дети могут научится основам программирования (с сайта <a href="http://noplay.ru/logic/light_bot.htm">noplay.ru</a>):<br>
<embed src="flash/lightbot.swf" width="640" height="480"></embed>
</p>
<h2>Видео</h2>
<p>Ролик с сервиса Youtube:<br>
<!-- Здесь будет код вставки с YouTube, который вы получите при поиске ролика -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</p>
<p>Видео в формате MP4:<br>
<video width="320" height="240" controls="controls">
<source src="video/finish.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
</p>
<p>Видео в формате WebM:<br>
<video width="320" height="240" controls="controls">
<source src="video/finish.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
</p>
</body>
</html>
Пояснения к решению
Часть 1: Вставка рисунков
-
Создание структуры HTML-документа:
- Добавлен DOCTYPE и основная структура HTML
- Добавлен заголовок страницы (тег<title>)
- Подключен стилевой файлmystyle.css -
Форматирование текста:
- Выделены заголовки документа (теги<h1>,<h2>)
- Текст разбит на абзацы (теги<p>)
- Кавычки заменены на «ёлочки»
- Знаки «минус» заменены на тире (—)
- Тире не отрываются от предыдущих слов (используется неразрывный пробел) -
Стилевое оформление:
- Установлен фоновый рисунокback.jpg
- Выбран цвет текста для лучшей читаемости
- Создан классnameдля выделения имен, названий и т.д.
- Установлены отступы для изображений -
Работа с изображениями:
- Добавлены изображения с помощью тега<img>
- Установлено выравнивание с обтеканием текстом (атрибутalign)
- Добавлены всплывающие подсказки (атрибутtitle)
- Изображения расположены в шахматном порядке
Часть 2: Вставка звуковых файлов и видео
-
Добавление звуковых файлов:
- Использован тег<embed>для WAV и MP3 файлов с отключенным автозапуском
- Использован тег<audio>для OGG файла с элементами управления -
Добавление флэш-анимации:
- Использован тег<embed>для SWF файлов с указанными размерами -
Добавление видео:
- Добавлен код для вставки видео с YouTube (нужно заменить VIDEO_ID на реальный идентификатор)
- Добавлены локальные видеофайлы через тег<video>с вложенным тегом<source>
Важные замечания
-
В реальном коде для YouTube-видео вместо
VIDEO_IDнужно вставить идентификатор конкретного видео, который вы получите при копировании кода встраивания с YouTube. -
Современные браузеры могут не поддерживать Flash-контент (файлы .swf), так как эта технология устарела и больше не поддерживается большинством браузеров.
-
Для проверки поддержки тегов
<audio>и<video>нужно открыть страницу в браузере и посмотреть, отображаются ли элементы управления и воспроизводится ли контент. -
В примере кода используется имя «Иванов Иван» — замените его на свое имя и фамилию.
Текст скопирован
Готово
Ошибка
×
![]()
