«Розміщення графіки, аудіо- та відеоінформації на веб-сторінках»

Для чого використовують графіку на web-сторінках? Зображення можуть нести певну інформацію, та і просто надають Web-сторінці привабливому вигляду. Приведемо найбільш поширені випадки застосування зображень: логотип компанії на діловій сторінці; графіка для рекламного оголошення; різні малюнки; діаграми і графіки; художні шрифти; підпис автора сторінки; застосування графічного рядка як горизонтальна розділова лінія; застосування графічних маркерів для створення красивих маркірованих списків.

Графічні формати web-сторінок. Основними форматами рисунків, що відображаються програмами браузерів, є GIF (скорочення від «Graphics Interchange Format» — графічний формат обміну) і JPEG (скорочення від «Joint Photographic Experts Group» — об’єднана група експертів фотографії).

Файли формату GIF (розширення.gif) мають малий обсяг завдяки тому, що в них використовується палітра з 256 кольорів і застосовується алгоритм стиснення без втрат Лемпеля — Зіва. Цей алгоритм особливо ефективний під час обробки простих ілюстрацій з великими ділянками одного кольору. Формат GIF широко застосовується для створення «прозорих» рисунків, а також зображень, що завантажуються черезрядковим методом. Приклади черезрядкового завантаження ви, напевно, бачили при перегляді Web-сторінок в Інтернеті: спочатку завантажується простий варіант рисунка з великим розміром точок зображення, потім у процесі завантаження рисунка точки зображення зменшуються, і рисунок ніби виявляється.

Ще однією перевагою GIF-формату є можливість використання анімації. У файлі GIF можна створити послідовність рисунків — кадрів «мультфільму», що є найпростішим способом додавання анімації на Web-сторінки. Інший графічний формат, JPEG (розширення .jpg або .jpeg), звичайно застосовується для зображень з більшою кількістю кольорів, наприклад, для фотографій. У цьому форматі застосований метод стиснення з втратами. При збереженні високоякісних зображень JPEG займає на диску набагато менше місця, ніж GIF. Однак формат JPEG не підтримує функції прозорості й анімації.

Існує ще один формат створення рисунків для Web-сторінок — це PNG (скорочення від «Portable Network Graphics» — мережна графіка, що переноситься). Подання зображень у вигляді PNG-файлів застосовується як альтернатива формату GIF і є перспективним для застосування в мережних додатках. Перевагою цього формату порівняно з форматом GIF є компактність файлів і достатня якість передачі кольорів. На жаль, формат PNG підтримується поки що не всіма браузерами.

Використання графіки в HTML Тепер розглянемо як вставити зображення в Web-сторінку. Тегом HTML, який примушує браузер виводити зображення, є з обов’язковим атрибутом SRC (Sou. RCe, джерело). Ім’я файлу є ім’ям графічного файлу, що виводиться. Замикаючий тег не потрібний. Приклад вставки зображення:

Атрибути і їх аргументи Тег зображення має один обов’язковий атрибут SRC і необов’язкові: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT. Атрибут SRC- Указує файл зображення і шлях до нього; зображення повинне бути завантажене в браузер і розміщене в тому місці документа, де розташований тег зображення. Атрибут ALT- Дозволяє вказати текст, який виводитиметься замість зображення браузерамі, нездібними представляти графіку. В деяких випадках при недостатній пропускній спроможності ліній зв’язку користувачі відключають відображення графіки. Наявність назв замість картинок полегшує сприйняття Web-сторінок в такому режимі. Атрибут АLIGN- Визначає положення зображення щодо оточуючого його тексту. Можливі значення аргументу – [„left” | „right” | „top” | „middle”| „bottom”. ALIGN=”left” визначає зображення, що огинається текстом. Зображення розташовується уздовж лівої межі документа, а подальші рядки тексту огинають його справа.

Атрибут BORDER- Цілочисельне значення аргументу визначає товщину рамки навколо зображення. Якщо значення рівне нулю, рамка відсутня. Щоб не вводити користувачів в оману, не варто задіювати BORDER=0 в зображеннях, які є частиною елементу якоря, оскільки малюнки, вживані як гіперпосилання, зазвичай виділяються кольоровою рамкою. Атрибут HSPACE- Цілочисельне значення цього атрибуту задає горизонтальну відстань між вертикальною межею сторінки і зображенням, а також між зображенням і огинаючим його текстом. Атрибут VSPACE- Цілочисельне значення цього атрибуту задає вертикальну відстань між рядками тексту і зображенням.

Атрибути WIDTH і HEIGHT- обидва атрибути задають цілочисельні значення розмірів зображення по горизонталі і по вертикалі відповідно. Це дозволяє зменшити час завантаження сторінки з графікою. Браузер відразу відводить рамку для зображення і продовжує завантажувати текст на сторінку. Поки завантажується графіка, користувач може почати читати текст. Визначити розмір зображення неважко, для цього досить скористатися будь-якою програмою перегляду графічних файлів, наприклад ACDSee або графічним редактором Corel Photo. Paint або Adobe Photoshop. Відкрийте файл в графічному редакторові і визначте розмір картинки в пікселах. У тегі зображення слід вказати ширину і висоту картинки. .

Мультимедійні дані на веб-сторінках Розміщення та відтворення на веб-сторінках мультимедійних даних. Для програвання звукових файлів на комп'ютері повинна бути встановлена звукова карта та програма для відтворення звуку. Створення фонового звучання. Тег задає фонові звуки чи музику при перегляді документу (аудіо- об’єкти повинні мати такі розширення: .mp3,. WAV, . AU, MIDI). Інші параметри задаються атрибутами даного тега: src==”URL адреса аудіо-об’єкта”; LOOP=n Визначає частоту програвання відео- кліпу (скільки разів). Якщо n=-1, або LOOP=INFINITE, то кліп програється безперервно.

Вставка на веб-сторінку відео- об’єктів. Для перегляду відеоматеріалів на компютері повинна бути встановлена відео карта та відповідне програмне забезпечення. На веб-сторінку можна вставити невеликі за обсягом відео-кліпи, що мають розширення .avi, .flv. Для їх вставки використовують вже відомий тег та відповідні атрибути: Приклад вставки відео- об’єкта на веб-сторінку: Рухомий текстовий рядок.... Behavior= поведінка рядка (Scroll - звичайна прокрутка, Slide - рядок добігає до кінця і зупиняється, Alternate - рядок рухатиметься від краю до краю).

Привіт! Це мій перший сайт!

ЗАВДАННЯ:1. Який має обов’язковий атрибут тег зображення?2. Дайте визначення обов’язковому атрибуту3. Наведіть приклад вставки зображень в Web-сторінку