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

Опрацюйте теоретичний матеріал:

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” – висота зображення.

Виконайте інтерактивні вправи.

Скрін виконаних вправ прикріпіть до цього завдання (2 вправи=2 скріни)