Практична робота № 7 Тема: Створення Web-документів, що містять малюнки, аудіо та відео файли.
Мета: освоїти методику використання малюнків, аудіо та відео файлів на HTML-сторінці.
Програмне забезпечення: Блокнот, Internet Explorer та ОС Windows.
Теоретичні відомості
1. Малюнки
Для вставки малюнка в HTML-сторінку використовується тег <img>. Основним параметром цього тегу є параметр src, за допомогою якого вказується адреса файлу, в якому і зберігається рисунок. Цей же тег також можливо використовувати для показу відео-роликів. В цьому випадку використовується параметр dynsrc, за допомогою якого вказується адреса відео файлу. Найпоширенішими форматами файлів-рисунків є формати jpg, gif, png, а відео файлів - avi.
Відзначимо, що адреса файлумалюнка може бути вказана в абсолютному та відносному форматі. При використані абсолютного формату в адресі повністю визначено комп’ютер, каталог та файл малюнка.
Наприклад, для вставки малюнка, що зберігається в файлі logo.gif за адресою www.picture.com.ua/picture необхідно:
<img src=" www.picture.com.ua/picture/logo.gif">
При використанні відносного формату визначення місцезнаходження файлу-малюнка відбувається з урахуванням місцезнаходження даної HTML-сторінки.
Наприклад, для вставки в HTML-сторінку prim.html малюнка, який зберігається в файлі logo.gif, що знаходиться в одному каталозі з файлом prim.html необхідно:
<img src="logo.gif">
Графічні файли зручно зберігати в окремому каталозі, наприклад, в каталозі з іменем img. В цьому випадку для вставки в HTML-сторінку prim.html малюнка logo.gif необхідно:
<img src="img/logo.gif">
Відзначимо, що каталог img та файл prim.html повинні знаходитись в одному каталозі. Крім обов’язкового параметру src тег <img> має декілька необов’язкових параметрів, див. табл. 7.1.
Таблиця 7.1
Параметри тегу <img>
Назва параметру |
Призначення |
alt |
Визначення альтернативного тексту |
width |
Ширину малюнка в пікселях |
height |
Висоту малюнка в пікселях |
hspace |
Відступ від малюнка до інших об’єктів на HTML-сторінці по вертикалі |
vspace |
Відступ від малюнка до інших об’єктів на HTML-сторінці по горизонталі |
border |
Товщина рамки навколо малюнка |
lowsrc |
Задає файл з альтернативним зображенням |
align |
Вирівнювання малюнка відносно інших об’єктів на HTML-сторінці |
src |
Адреса графічного файлу |
dynsrc |
Адреса відео файлу |
start |
Задає момент початку прокрутки відео ролика. Можливі значення: fileopen ролик починається відразу після завантаження відео файлу, mouseover ролик починається при наведенні миші на зображення. |
loop |
Задає кількість повторів відео - ролика. Якщо значення дорівнює –1, то програвання відбувається безперервно |
Розглянемо призначення вказаних параметрів докладніше. Досить часто при перегляді HTML-сторінок користувачі використовують браузер, що працює в режимі відключення завантаження зображень. Як відомо, цей режим дозволяє зменшити час відображення HTML-сторінки в вікні браузера. В цьому випадку замість зображення на екрані з’являється альтернативний текст, заданий в параметрі alt. Крім цього альтернативний текст відображається в якості підказки при знаходженні курсору "миші" в області малюнка. Приклад використання параметру alt:
<img src="logo.gif" alt="Альтернативний текст" >
Параметри width та height призначені для визначення розмірів малюнка у вікні браузера. Відзначимо, що при зміні розмірів зображення розмір файлу не змінюється, тобто час завантаження малюнка не змінюється. Наведемо приклад застосування параметрів alt, width та height для одного і того малюнка:
<img src="logo.gif" width="184" height ="164" alt="Альтернативний текст" >
<img src="logo.gif" width=" 92 " height =" 82" alt="Альтернативний текст" >
<img src="logo.gif" width=" 150 " height ="40 " alt="Альтернативний текст" >
Відповідне вікно браузера показане на рис. 7.1
Рис. 7.1 Використання параметрів alt, width та height тегу <img>
Слід зазначити, що зміна розмірів малюнка може призвести до втрати якості зображення, особливо за рахунок втрати пропорцій між початковою висотою та шириною. Практичний досвід показує, що навіть при дотримані пропорцій збільшення початкових розмірів зображень-фотографій більш ніж на 10-15% призводить до чуттєвої втрати якості. При цьому зменшення розмірів зображень позначається на якості їх відображення набагато менше, але їх використання не оптимальне з точки зору часу завантаження.
Параметр border дозволяє визначити товщину рамки навколо малюнка. Застосуємо цей параметр із значенням 2 для рисунків попереднього прикладу:
<img src="logo.gif" width="184" height ="164" border="2">
<img src="logo.gif" width=" 92 " height =" 82" border="2" >
<img src="logo.gif" width=" 150 " height ="40 " border="2">
Відповідне вікно браузера показане на рис. 6.2.
Рис. 7.2. Використання параметрів border, width та height тегу <img>
Параметри hspace та vspace дозволяють в пікселях задавати відступи від малюнка до інших об’єктів на HTML-сторінці. Покажемо застосування цих параметрів із значеннями 20 та 20 для попереднього прикладу:
<img src="logo.gif" width="184" height="164" hspace="20" vspace="20" border="2">
<img src="logo.gif" width=" 92 " height =" 82" hspace="20" vspace="20" border="2" >
<img src="logo.gif" width=" 150 " height ="40 " hspace="20" vspace="20" border="2">
Результат застосування показаний на рис. 7.3.
Рис. 7.3. Використання параметрів hspace, vspace, border, width та height тегу <img>
Параметр align використовується для визначення горизонтального або вертикального вирівнювання малюнка відносно інших об’єктів на HTML-сторінці. Параметри вирівнювання залежать від значень параметру align. При використанні цього параметру із значеннями left або right рисунок розміщується відповідно до лівої або правої сторони вікна браузера, а текст "обтікає" зображення з протилежної сторони. Відзначимо, що в цьому випадку текст може займати декілька рядків. Приклад використання параметру align:
<body>
<img src="logo.gif" width="182" height="162" border="1" align="right">
Приклад використання параметру align="right". Рисунок розміщений
біля правої сторони вікна браузера. Текст обтікає зображення з лівої сторони.
</body>
Відповідне вікно браузера показане на рис. 7.4.
Рис. 7.4. Приклад вирівнювання малюнка по правому краю вікна браузера
Крім left та right параметр aling може приймати наступні значення:
top верхня межа зображення вирівнюється по найбільш високому елементу рядка;
texttop верхня межа зображення вирівнюється по найбільш високому текстовому елементу рядка;
middle середина зображення вирівнюється по базовій лінії рядка;
absmiddle середина зображення вирівнюється по середині рядка;
bottom нижня межа зображення вирівнюється по базовій лінії рядка;
absbottom нижня межа зображення вирівнюється по нижній межі рядка.
В цих випадках зображення можна розглядати як звичайний елемент рядка.
Відзначимо, що базова лінія тексту це нижня лінія рядка тексту без врахування нижньої частини деяких символів (р, j, y).
Наведемо приклад використання параметру align тегу <img> з значеннями top, middle та bottom:
<body>
<img src="logo.gif" alt="" width="91" height="81" border="1" align="top">
Приклад використання параметру align="top". <br>
<img src="logo.gif" alt="" width="91" height="81" border="1" align="middle">
Приклад використання параметру align="middle". <br>
<img src="logo.gif" alt="" width="91" height="81" border="1" align="bottom"> Приклад використання параметру align="bottom".
</body>
Відповідне вікно браузера див. на рис. 7.5.
Рис. 7.5. Приклад використання параметру align тегу <img> з значеннями top, middle та bottom