Урок 16. Графіка для веб-середовища.

1. Для чого використовують графіку на web-сторінках?

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

2.Графічні формати 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 є компактність файлів і достатня якість передачі кольорів.

Основний синтаксис додавання зображень на сторінку:

<img src=”шлях/до/зображення.jpg” атрибути>

<img> – непарний тег, і “src” – обов’язковий атрибут з адресою зображення.

Також часто використовують атрибути: “alt”, “title”, “width”, “height”, і т.д.
“alt” – альтернативний текст для зображення, тобто текст, який буде показуватись, якщо картинка не може бути завантажена.
“title” – текст, який буде показано, при наведенні вказівника миші на картинку.
“width” – довжина зображення.
“height” – висота зображення.

Атрибути

align	Визначає як малюнок буде вирівнюватися по краю і спосіб обтікання текстом
alt	Альтернативний текст для зображення.
border	Товщина рамки навколо зображення.
height	Висота зображення.
hspace	Горизонтальний відступ від зображення до навколишнього контенту.
ismap	Каже браузеру, що картинка є серверної картою-зображенням.
longdesc	Вказує адресу документа, де міститься анотація до картинки.
lowsrc	Адреса зображення низької якості.
width	Ширина зображення.
src	Шлях до графічного файлу.
vspace	Вертикальний відступ від зображення до навколишнього контенту.
usemap	Посилання на тег <map> , що містить координати для клієнтської карти-зображення.

 

Джерела використаної інформації:

ВікіФізмат

Інформатика в школі