Печать

Основи 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>.

Синтаксис:

<img src="/URL" alt="альтернативний текст">

Атрибути:

align - Визначає як малюнок буде вирівнюватися по краю і спосіб обтікання текстом.

alt - Альтернативний текст для зображення.

border - Товщина рамки навколо зображення.

height - Висота зображення.

hspace - Горизонтальний відступ від зображення до навколишнього контенту.

lowsrc - Адреса зображення низької якості.

src - Шлях до графічного файлу.

vspace - Вертикальний відступ від зображення до навколишнього контенту.

width - Ширина зображення.

Приклад коду сторінки із зображенням:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Тег IMG</title>

</head>

<body> 

<p><a href="/lorem.html"><img src="/images/girl.png" width="189" height="255" alt="lorem"></a>Lorem ipsum dolor sit amet...</p>

</body>

</html>

Додаткові матеріали

 

Практична частина

Створити веб сторінку з символікою школи (зображення можна взяти на сайті школи). Задати заголовок сторінки та підзаголовки (використовуємо теги h1 та h2). Додати текст гімну школи.

Хід виконання:

  1. Створити сторінку  з назвою image.html
  2. У створеному документі створити структуру пустої веб сторінки.
  3. Завантажити із сайту школи зображення герба та прапора школи.
  4. Використовуючи теги заголовків та зображень сформувати сторінку відповідно завдання.
  5. Використовуючи тег створення гіперпосилань <a> прив’язати до заголовку посилання на відповідну сторінку сайту школи.
  6. Зберегти створений документ та перевірити його працездатність.

Завдання

1. Опрацювати статтю та законспектувати основні моменти

2. Виконати практичну частину наведену в кінці стаття

3. Створену веб сторінку заархівувати доступним архіватором та відіслати на перевірку використовуючи E-mail

4. Підготуватися до підсумкового тестування з теми "Основи HTML"