Лабораторна робота 3 на тему Використання рисунків, відео та звуку на HTML-сторінці з курсу Сучасні Internet-технології, НУДПСУ
« Назад
Лабораторна робота № 3 Використання рисунків, відео та звуку на HTML-сторінціМета роботи: освоїти методику використання рисунків на HTML-сторінці. Хід роботи 1. Копіюємо у теку HTML видані викладачем графічні файли 1.jpg та 1a.gif. 2. У теці HTML створюємо текстовий документ з назвою picture.html, відкриваємо його за допомогою браузера та переходимо до редагування HTML-коду. 3. Створимо заготовку для HTML-коду Web-сторінки: <html> <head> <title>Рисунки</title> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> </head> <body> </body> </html> 4. Додамо HTML-код для відображення на сторінці 4 однакових рисунків з різними розмірами: <body> <h2 align=center>Зміна розмірів рисунків</h2> <img src="1.jpg"> <img src="1.jpg" width="260" height="220"> <img src="1.jpg" width="130" height="110"> <img src="1.jpg" width="300" height="250"> </body> </html> 5. Вигляд сторінки у браузері повинен відповідати рис. 3.1 6. Розглянемо можливість використання границь навколо рисунків. Для цього додамо наступний HTML-код: ... <h2 align=center>Границі рисунків</h2> <img src="1.jpg" width="130" height="110" > <img src="1.jpg" width="130" height="110" border="1"> <img src="1.jpg" width="130" height="110" border="3"> </body> 7. Відповідне відображення у вікні браузера подане на рис. 2. 8. Розглянемо можливість визначення альтернативного тексту у тегах рисунків. Для цього модифікуємо останній фрагмент HTML-коду: ... <img src="1.jpg" width="130" height="110" alt="Рисунок. Границь нема"> <img src="1.jpg" width="130" height="110" border="1" alt="Рисунок. Товщина границь 1 піксель"> <img src="1.jpg" width="130" height="110" border="3" alt="Рисунок. Товщина границь 3 пікселі"> </body> Відключимо показ рисунків у вікні браузера та проведемо оновлення нашої сторінки (рис. 3). Відновимо показ рисунків у браузері та проведемо оновлення нашої HTML-сторінки. 9. Розглянемо можливості вертикального вирівнювання рисунків відносно тексту. 9.1. Додамо HTML-код для визначення тексту та рисунків, вирівняних відносно верхньої межі: ... <h2 align=center>Вирівнювання рисунків відносно тексту </h2> <h3 align=center>Вирівнювання рисунків відносно верхнього межі рядка </h3> <p> <img src="1.jpg" width="130" height="110" border="3" alt="Вага"> <img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="top"> По верхній межі найвищого елемента рядка </p> <p> <img src="1.jpg" width="130" height="110" border="3" alt="Вага"> <img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="texttop"> По верхній межі найвищого текстового елемента рядка </p> </body> Відповідне вікно браузера зображене на рис. 4. 9.2. Додамо HTML-код для визначення тексту та рисунків, вирівняних відносно середини рядка: ... <h3> Вирівнювання рисунків відносно середини рядка </h3> <p> <img src="1.jpg" width="130" height="110" border="3" alt="Вага"> <img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="middle"> По базовій лінії рядка </p> <p> <img src="1.jpg" width="130" height="110" border="3" alt="Вага"> <img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="absmiddle"> По середині рядка </p> </body> Відповідне вікно браузера подане на рис. 5. 9.3. Додамо HTML-код для визначення тексту та рисунків, вирівняних відносно нижньої межі: ... <h3 align=center> Вирівнювання рисунків відносно нижнього краю рядка </h3> <p> <img src="1.jpg" width="130" height="110" border="3" alt="Вага"> <img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="bottom"> Вирівнювання рисунків по базовій лінії рядка </p> <p> <img src="1.jpg" width="130" height="110" border="3" alt="Вага"> <img src="1.jpg" width="65" height="55" border="3" alt="Вага" align="absbottom"> Вирівнювання рисунків по нижній межі рядка </p> </body> Відповідне вікно браузера подане на рис. 6. 10. Розглянемо можливість визначення плаваючих рисунків, тобто рисунків, вирівняних по лівому або правому краю рядка. Для цього додамо HTML-код: ... <h3 align=center>"Плаваючі" рисунки</h3> <p> <img src="1.jpg" width="130" height="110" border="3" alt="Вага" align="left"> По лівому краю рядка </p> <br><br><br><br><br> <p> <img src="1.jpg" width="130" height="110" border="3" alt="Вага" align="right"> По правому краю рядка </p> </body> Відповідне вікно браузера подане на рис. 7. 11. Розглянемо можливості відокремлення тексту від рисунків за рахунок визначення горизонтальних та ввертикальних відступів. Для цього додамо HTML-код: ... <h2 align="center">Відокремлення рисунків від тексту</h2> <img src="1.jpg" width="130" height="110" border="3" hspace="20" vspace="20" align="top" alt="Вага"> Відстань до тексту 20 пікселів <br> <img src="1.jpg" width="130" height="110" border="3" hspace="1" vspace="1" align="top" alt="Вага"> Відстань до тексту 1 піксель </body> Відповідне вікно браузера зображене на рис. 8. 12. Додамо HTML-код для визначення альтернативного зображення: ... <h2>Використання мініатюр</h2> <img src="1.jpg" lowsrc="1a.gif" width="130" height="110" border="3" alt="Вага" > </body> 13. Розглянемо можливість використаня на сайтах відеозображень. Для цього необхідно у папку HTML вставити файл з відео, наприклад CLOCK.AVI, та додати у файл picture.html HTML-код: ... <h2>Використання відеозображень</h2> <img width="100" height="100" border="2" dynsrc="CLOCK.AVI"> </body> Моментальний знімок перегляду відео з файлу показано на рис. 9. 14. Модифікуємо HTML-код для прокрутки відео ролика CLOCK.AVI два рази: <img width="100" height="100" border="2" dynsrc="CLOCK.AVI" loop="2"> Провести оновлення вікна браузера. 15. Модифікуємо HTML-код для прокрутки відео ролика CLOCK.AVI два рази, при цьому показ починався після наведення миші на рисунок: <img width="100" height="100" border="2" dynsrc="CLOCK.AVI" loop="2" start="mouseover"> Провести оновлення вікна браузера. 16. Модифікуємо HTML-код для того, щоб відеоролик CLOCK.AVI прокручувався постійно: <img width="100" height="100" border="2" dynsrc="CLOCK.AVI" loop="-1"> Провести оновлення вікна браузера. 17. Розглянемо можливість використаня на сайтах звуку. Для цього необхідно у папку HTML вставити звуковий файл, наприклад START.WAV та додати у файл picture.html HTML-код: ... <embed src="START.WAV" hidden="true" autostart="true" loop="True"> </body> Провести оновлення вікна браузера. Завдання для самостійної роботи 1. Оформити у вигляді HTML-документа фотоальбом з тематики, вказаної викладачем. 2. Оформити звіт. Питання для самоперевірки
З повагою ІЦ “KURSOVIKS”! |