Використання зображень у �веб-документах

Повторення:

• Для чого призначені аудіо- та відеоредактори? Чим вони відрізняються від програм-граберів?
• Які дані належать до мультимедійних?
• Які технології опрацювання мультимедійних даних ви знаєте?
• Які приклади використання електронних мультимедійних засобів ви знаєте?

​

​

• Красиві веб-сторінки обов'язково містять графічні зображення, часто приваблюють погляд веселими анімаційними картинками, а інколи пропонують прослухати музику чи переглянути кліп або фільм.
• Ви ознайомитеся з форматами зображень, аудіо-та відеофайлів, які використовують в Інтернеті, дізнаєтеся про те, як вставляти на веб-сторінки малюнки. Навчитеся створювати анімовані зображення та імпортувати їх у веб-документи, а також розміщувати на своїх сайтах мультимедійну інформацію.

​

Графіка, аудіо- та відеоінформація на веб-сторінках

Продовження…

• У більшості професійно створених сайтів використовують графічне оформлення, що дає змогу яскраво та наочно подати інформацію. Для цього на веб-сторінках розміщують відповідні графічні файли, які можуть мати різні формати.
• Зображення мають бути розроблені у такий спосіб, щоб допомогти користувачу сприймати текстову інформацію та доповнювати її. Розглянемо особливості популярних графічних форматів, а також засоби розміщення та вирівнювання зображень на веб-сторінках.

​

Формати зображень, які використовують в Інтернеті

Найбільш розповсюдженими в Інтернеті та найкомпактніші формати збереження графіки є:

​

• файли формату GIF
• файли формату JPG (JPEG)
• файли формату PNG

​

Формат GIF (.gif)

• Формат GIF почали використовувати з 1987 року для обміну малюнками через канали зв'язку глобальної мережі. Він зберігає зображення, що можуть містити не більш ніж 256 кольорів, і не залежить від апаратного забезпечення комп'ютера. Окрім цього, під час завантаження таких файлів на веб-сторінку може бути використаний режим interlaced (рядки малюнка відображаються через один).
• Ця технологія дає змогу побачити приблизний вміст картинки до її повного відтворення і в разі необхідності скасувати завантаження. У GIF-файлах можна зробити один чи більше кольорів прозорими: вони будуть невидимими у вікні браузера та деяких інших програм. Також є можливість зберігати в одному файлі кілька картинок, задавши час показу кожної, тобто застосовувати анімацію. На сьогодні фахівцями розроблено чимало готових анімаційних GIF-файлів, які можна використовувати на своїх веб-сторінках.

Формат PNG (.png)

• Формат PNG (переносні мережні графічні дані) є одним із перспективних форматів графіки для Інтернету, який створено з метою заміни GIF. Формат PNG забезпечує високу якість графіки та прийнятні розмі­ри файлів. Зображення може зберігатися як у реальних кольорах, так і в 256-колірній GIF-палітрі.

​

Формат JPEG (.jpg)

• Формат JPEG був створений для того, щоб позбутись обмежень, властивих формату GIF. Два попередніх формати орієнтовані на рисовану і креслену графіку. Формат JPEG призначений для збереження повноколірних реалістичних фотозображень. Він має потужні засоби для стиснення зображень, щоправда шляхом зниження їхньої якості. JPEG-зображення зберігаються у файлах із розширенням .jpg.
• Оскільки цей формат спеціально розробляли для збереження ілюстрацій, що містять велику кількість кольорів, він є найприйнятнішим для деяких типів графічних даних. Це кольорові фотографії, графічні дані з градієнтним заповненням частин зображення, фотознімки з відтінками одного кольору. Ілюстрації відіграють важливу роль в оформленні веб-сторінок: їх використовують як тло, виводять на екран як окремо від тексту, так і разом із ним. Малюнки зберігаються в окремих файлах поза HTML-документами, але відображаються браузером всередині веб-сторінки.

​

Створення тла веб-сторінки

Зазвичай для тла вибирають зображення невеликого розміру та неяскравих кольорів, а його файл роблять маленького розміру, що дає змогу швидко завантажувати сторінки. Текст на тлі повинен легко читатись. Для формування тла у вигляді малюнка у тегу

використовують атрибут BACKGROUND, значенням якого є URL-адреса файлу зображення.�

Вставлення зображень на веб-сторінку

• Для розміщення малюнків у HTML-документі використовують одинарний тег <IMG>. Він має обов'язковий атрибут SRC, значенням якого є URL-адреса файлу зображення, записана в абсолютній (повністю) або відносній формі (починаючи від поточного каталогу; при цьому «батьківський» каталог позначають за допомогою двох крапок і слешу (. . /)).�Під час відкривання документа браузер завантажує малюнок і відображає його в тому місці документа, де розташований тег <IMG>.�

Продовження…

Графічний об'єкт буде показаний на веб-сторінці у своїх реальних розмірах. Якщо є потреба у їх зміні, нові розміри можна задати за допомогою атрибутів WIDTH та HEIGHT, значення яких визначають відповідно ширину та висоту зображення в пікселах. При цьому необхідно зберегти пропорції малюнка, інакше він матиме вигляд розтягнутого або сплюснутого. Слід також пам'ятати, що іноді користувачі відключають відображення графіки у вікні браузера, щоб прискорити завантаження документів. Тому, на випадок, коли малюнка на сторінці не буде, бажано повідомити, що на ньому зображено. Для цього використовують альтернативний текст — більш-менш докладний опис зображення, який задають у тегу <IMG> як значення спеціального атрибута ALT.�

Продовження…

Якщо браузер не може показати малюнок, він замість нього виводить цей текст.�Розглянемо HTML-документ, в якому використаємо малюнок flamingo.jpg, де зображено фламінго. У тегу <IMG> задамо атрибути WIDTH, HEIGHT та ALT�

<html>�<title>Малюнок</title>�<body>�<img src="flamingo_1.jpg" width=300 height=200 alt="фламінго">�</body>�</html>�

Продовження…

Після наведення вказівника миші на малюнок альтернативний текст відображається у спливаючому вікні.�У режимі відключення графіки буде показано лише порожню рамку зображення з альтернативним текстом.�

Розміщення зображень у тексті

• Зображення можна розмістити у тексті, але при цьому слід визначити, в який спосіб текст обтікатиме його.�Для взаємного розміщення тексту і зображень призначений атрибут ALIGN у тегу <IMG>, який може набувати, зокрема, таких значень:
• left — зображення розміщене в лівій частині сторінки, текст обтікає його з правого боку;
• right — зображення розміщене у правій частині сторінки, текст обтікає його з лівого боку;
• top — обтікання немає, зображення розміщене в тексті, відпо­відний рядок якого вирівняно за верхньою межею малюнка;
• bottom — обтікання немає, зображення розміщене в тексті,.відповідний рядок якого вирівняно за нижньою межею малюнка;
• middle — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно по середній лінії малюнка.

​

Продовження…

За умовчанням атрибут ALIGN має значення left.�Для того щоб картинка не була розташована впритул до тексту, можна задати відступи. Це роблять за допомогою атрибута HSPASE для бокових полів та атрибута VSPASE для верхнього і нижнього полів. Значення аргументів задають у вигляді чисел, що визначають розміри відступів у пікселах. У прикладі наведемо такі значення атрибутів, що малюнок розміщується ліворуч від тексту, який обтікатиме його. Поля навколо малюнка матимуть розмір 10 пікселів.�

HTML>�<TITLE>

МАЛЮНОК <BODY BACKGROUND="1.jpg">�<IMG SRC="flamingo.jpg" ALIGN=left HSPACE=10 VSPASE=10>�Блакитні води океану та коралові рифи, ласкаве сонце і білосніжний прибережний пісок,фантастичний підводний світ і казкові птахи, буяння барв сходів і заходів, непрохідні ліси і п'янкий запах орхідей...�Сприятливий клімат Острова Свободи дає можливість туристам відвідувати його цілий рік. Тут немає зайвої вологості, а спека не така страшна завдяки постійним подувам бризів із океану. Середньорічна температура повітря й води становить + 2 6—28°С.�</BODY>�</HTML>�

Графічні гіперпосилання

Зображення, як і текст, можна використовувати як посилання. Для цього тег <IMG> необхідно помістити між тегами <А> і </А>. Зображення-посилання має синю рамку, а після наведення на нього вказівника миші той набуває такої самої форми, що й у випадку текстового посилання. Використання зображень як посилань.�<HTML>�<TITLE>Птахи</TITLE>�<BODY BACKGROUND="1.jpg">�<А HREF = "gorobci.html"><IMG SRC = "gorobci.jpg"></A>�<A HREF="flamingo.html"><IMG SRC="flamingo.jpg"></A>�</BODY>�</HTML>�Малюнок gorobci.jpg пов'язаний із файлом gorobci.html, а малюнок flamingo.jpg — із файлом flamingo.html.

​