Лабораторна робота №3, Використання рисунків, відео та звуку на HTML-сторінці

« Назад

Хід роботи

1. Копіюємо у теку HTML видані викладачем графічні файли 1.jpg та 1a.gif.

2. У теці HTML створюємо текстовий документ з назвою picture.html, відкриваємо його за допомогою браузера та переходимо до редагування HTML-коду.

3. Створимо заготовку для HTML-коду Web-сторінки:

 

4. Додамо HTML-код для відображення на сторінці 4 однакових рисунків з різними розмірами:

5. Вигляд сторінки у браузері повинен відповідати рис.3.1

Рис. 1. Рисунки з різними розмірами

6. Розглянемо можливість використання границь навколо рисунків. Для цього додамо наступний HTML-код:

Відповідне відображення у вікні браузера подане на рис. 2.

Рис. 2. Використання границь рисунків

7. Розглянемо можливість визначення альтернативного тексту у тегах рисунків. Для цього модифікуємо останній фрагмент HTML-коду:

Відключимо показ рисунків у вікні браузера та проведемо оновлення нашої сторінки (рис. 3).

Рис. 3. Відображення альтернативного тексту при перегляді сайта з відключеним показом рисунків

8. Відновимо показ рисунків у браузері та проведемо оновлення нашої HTML-сторінки.

9. Розглянемо можливості вертикального вирівнювання рисунків відносно тексту.

9.1. Додамо HTML-код для визначення тексту та рисунків, вирівняних відносно: верхньої межі:

Відповідне вікно браузера зображене на рис. 4.

Рис. 4. Вирівнювання рисунків відносно верхньої межі

9.2. Додамо HTML-код для визначення тексту та рисунків, вирівняних відносно середини рядка:

Відповідне вікно браузера подане на рис. 5.

Рис. 3.5. Вирівнювання рисунків відносно середини рядка

9.3. Додамо HTML-код для визначення тексту та рисунків, вирівняних відносно нижньої межі:

Відповідне вікно браузера подане на рис. 6.

Рис. 6. Вирівнювання рисунків відносно нижньої межі рядка

10. Розглянемо можливість визначення плаваючих рисунків, тобто рисунків, вирівняних по лівому або правому краю рядка. Для цього додамо HTML-код:

Відповідне вікно браузера подане на рис. 7.

Рис. 7. Плаваючі рисунки

11. Розглянемо можливості відокремлення тексту від рисунків за рахунок визначення горизонтальних та вертикальних відступів. Для цього додамо HTML-код:

Відповідне вікно браузера зображене на рис. 8.

Рис. 8. Відокремлення тексту від рисунків за рахунок відступів

12. Додамо HTML-код для визначення альтернативного зображення:

13. Розглянемо можливість використання на сайтах відеозображень. Для цього необхідно у папку HTML вставити файл з відео, наприклад CLOCK.AVI, та додати у файл picture.html HTML-код:

Моментальний знімок перегляду відео з файлу показано на рис. 9.

Рис. 9. Перегляд відео у вікні браузера

14. Модифікуємо HTML-код для прокрутки відео ролика CLOCK.AVI два рази:

Провести оновлення вікна браузера.

15. Модифікуємо HTML-код для прокрутки відео ролика CLOCK.AVI два рази, при цьому показ починався після наведення миші на рисунок:

Провести оновлення вікна браузера.

16. Модифікуємо HTML-код для того, щоб відеоролик CLOCK.AVI прокручувався постійно:

Провести оновлення вікна браузера.

17. Розглянемо можливість використання на сайтах звуку. Для цього необхідно у папку HTML вставити звуковий файл, наприклад START.WAV та додати у файл picture.html HTML-код:

Провести оновлення вікна браузера.