Распечатать страницу
Главная \ База готовых работ \ Готовые работы по компьютерным дисциплинам \ WEB-программирование \ 715. Лабораторна робота №3, Використання рисунків, відео та звуку на HTML-сторінці

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

« Назад

Код роботи: 715

Вид роботи: Лабораторна робота

Предмет: Web-програмування

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

Кількість сторінок: 1

Дата виконання: 2015

Мова написання: українська

Ціна: 150 грн

Хід роботи

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

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

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

 

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

715,2

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

715,1-Рисунки-з-різними-розмірами

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

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

715,3

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

715,2-Використання-границь-рисунків

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

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

715,4

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

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

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

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

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

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

715,5

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

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

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

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

715,6

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

715,5-Вирівнювання-рисунків-відносно-середини-рядка

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

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

715,7

715,8

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

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

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

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

715,9

715,10

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

715,7-Плаваючі-рисунки

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

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

715,11

715,12

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

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

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

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

715,13

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

715,14

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

715,9-Перегляд-відео-у-вікні-браузера

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

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

715,15

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

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

715,16

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

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

715,17

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

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

715,18

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