Практическая работа № 29. Вставка рисунков в документ

Практическая работа № 29. Вставка рисунков в документ

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 пикселей.

Практическая работа № 30. Вставка звука и видео в документ

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" показывать элементы управления

ширина проигрывателя в пикселях

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 следующим образом:

<source src="адрес файла"

type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

</video>

Установите размеры окна 320 на 240 пикселей.

9. С помощью тэга video добавьте видеофайл finish.webm из каталога video следующим образом:

<source src="адрес файла"

type='video/webm; codecs="vp8, vorbis"'>

</video>

Установите размеры окна 320 на 240 пикселей.

10. Обновите страницу в браузере и выясните, поддерживает ли ваш браузер тэг video, и с какими форматами он умеет работать.

Ответ:

⇐ Предыдущая 1 2 345 Следующая ⇒