Основи HTML. Робота із зображеннями
Використання зображень у веб-документах
У більшості професійно створених сайтів використовують графічне оформлення, що дає змогу яскраво та наочно подати інформацію. Для цього на веб-сторінках розміщують відповідні графічні файли, які можуть мати різні формати. Зображення мають бути розроблені у такий спосіб, щоб допомогти користувачу сприймати текстову інформацію та доповнювати її.
Розглянемо особливості популярних графічних форматів, а також засоби розміщення та вирівнювання зображень на веб-сторінках.
Формати зображень, які використовують в Інтернеті
Найбільш розповсюдженими в Інтернеті є файли форматів GIF, JPG (JPEG) та PNG. Це найкомпактніші формати збереження графіки.
Формат GIF (.gif)
Формат GIF (Graphics Interchange Format — формат обміну графічними даними) почали використовувати з 1987 року для обміну малюнками через канали зв'язку глобальної мережі. Він зберігає зображення, що можуть містити не більш ніж 256 кольорів, і не залежить від апаратного забезпечення комп'ютера. Окрім цього, під час завантаження таких файлів на веб-сторінку може бути використаний режим interlaced (рядки малюнка відображаються через один). Ця технологія дає змогу побачити приблизний вміст картинки до її повного відтворення і в разі необхідності скасувати завантаження.
У GIF-файлах можна зробити один чи більше кольорів прозорими: вони будуть невидимими у вікні браузера та деяких інших програм. Також є можливість зберігати в одному файлі кілька кар¬тинок, задавши час показу кожної, тобто застосовувати анімацію. На сьогодні фахівцями розроблено чимало готових анімаційних GIF-файлів, які можна використовувати на своїх веб-сторінках.
Формат PNG (.png)
Формат PNG (Portable Network Graphic — переносні мережні графічні дані) є одним із перспективних форматів графіки для Інтернету, який створено з метою заміни GIF.
Формат PNG забезпечує високу якість графіки та прийнятні розміри файлів. Зображення може зберігатися як у реальних кольорах, так і в 256-колірній GIF-палітрі.
Формат JPEG (.jpg)
Формат JPEG (Joint Photographic Experts Group — об'єднана гру¬па експертів у галузі фотографії) був створений для того, щоб позбутись обмежень, властивих формату GIF.
Два попередніх формати орієнтовані на рисовану і креслену графіку. Формат JPEG призначений для збереження повноколірних реалістичних фотозображень. Він має потужні засоби для стиснення зображень, щоправда шляхом зниження їхньої якості.
JPEG-зображення зберігаються у файлах із розширенням .jpg. Оскільки цей формат спеціально розробляли для збереження ілюстрацій, що містять велику кількість кольорів, він є найприйнятнішим для деяких типів графічних даних. Це кольорові фотогра¬фії, графічні дані з градієнтним заповненням частин зображення, фотознімки з відтінками одного кольору тощо.
Розміщення і вирівнювання зображень на веб-сторінках
Ілюстрації відіграють важливу роль в оформленні веб-сторінок: їх використовують як тло, виводять на екран як окремо від тексту, так і разом із ним. Малюнки зберігаються в окремих файлах поза HTML-документами, але відображаються браузером всередині веб-сторінки.
Теги для роботи з графікою:
Тег <img> призначений для відображення на веб-сторінці зображень в графічному форматі GIF, JPEG або PNG. Адреса файлу з картинкою задається через атрибут src. Якщо необхідно, то малюнок можна зробити посиланням на інший файл, помістивши тег <img> в контейнер <a>. При цьому навколо зображення відображається рамка, яку можна прибрати, додавши атрибут border = "0" в тег <img>.
Синтаксис:
Атрибути:
align - Визначає як малюнок буде вирівнюватися по краю і спосіб обтікання текстом.
alt - Альтернативний текст для зображення.
border - Товщина рамки навколо зображення.
height - Висота зображення.
hspace - Горизонтальний відступ від зображення до навколишнього контенту.
lowsrc - Адреса зображення низької якості.
src - Шлях до графічного файлу.
vspace - Вертикальний відступ від зображення до навколишнього контенту.
width - Ширина зображення.
Немає коментарів:
Нові коментарі наразі не дозволено.