Ілюстрації відіграють важливу роль в оформленні веб-сторінок: їх використовують як тіло, виводять на екран як окремо від тексту, так і разом із ним. Малюнки зберігаються в окремих файлах поза HTML-документами, але відображаються браузером всередині веб-сторінки.
Створення тіла веб-сторінки
Зазвичай для тіла вибирають зображення невеликого розміру та неяскравих кольорів, а його файл роблять маленького розміру, що дає змогу швидко завантажувати сторінки. Текст на тілі повинен легко читатись.
Для формування тіла у вигляді малюнка у тегу <BODY> використовують атрибут BACKGROUND, значенням якого є URL-адреса файлу зображення. Наприклад, тег <BODY BACKGROUND="1. jpg"> визначає, що для фонового заповнення веб-сторінки буде використано файл 1.jpg.
Далі наведено приклад HTML-коду сторінки, в якої тіло оформлене у вигляді малюнка, що міститься у файлі mone.jpg.
<HTML>
<TITLE>Моя фірма</TITLE>
<BODY BACKGROUND="mone.jpg">
<H1><A HREF="l.html">Наша продукція</АХ/Н1>
<H1><A HREF="2.html">Наші замовники</АХ/Н1>
</BODY>
</HTML>
інший приклад,
задавши в атрибуті BACKGROUND зображення невеликого розміру gorobci.jpg, яке у вигляді мозаїки заповнить екран.
<HTML>
<TITLE>Моя фірма</TITLE>
<BODY BACKGROUND="gorobci.jpg">
</BODY>
</HTML>
У цьому прикладі на веб-сторінці немає тексту, однак на практиці так не буває. З огляду на це тіло рідко роблять у вигляді фотографій, оскільки для них непросто підібрати відповідний колір тексту.
Можливість відповідної обробки зображень для перетворення їх на фонові забезпечують багато графічних редакторів, зокрема популярний Adobe PhotoShop. Відкривши у ньому потрібний файл (командою File • Open (Файл • Відкрити)), слід вибрати команду Image • Adjustments • Hue/Saturation (Зображення • Параметри • Тон/ Насиченість) і за допомогою шкали Lightness (Освітленість) освітлити малюнок тла.
Але найчастіше підбирають рисунок, який нагадує шпалери, адже текст на тілі має виділятись і легко читатись, тобто привертати увагу відвідувача сайту.
ВправаУ програмі Adobe PhotoShop створимо і відредагуємо малюнок, призначений для заповнення тла веб-сторінки.
1. Відкрийте вікно програми. Простежте, щоб палітри Tools(Інструменти) і Swatches (Зразки) відображалися на екрані. Якщо це не так, виберіть назви цих палітр у меню Window(Вікно).
2. Створіть новий файл за допомогою коман и File• New(Файл • Новий). У діалоговому вікні, що відкриється, задайте такі параметри зображення: Width(Ширина) — 150пікселів. Height
3.За допомогою інструмента Paint Bucket(Заливка) на палітрі кольорів Swatches(Зразки) виберіть бажаний колір і зафарбуйте зображення, клацнувши всередині нього.
4. Виконайте команду меню Filter > Texture > Texturizer(Фільтр • Текстура • Текстуризатор). У діалоговому вікні, що відкриється, виберіть зі списку Texture(Текстура) значення Canvas (Полотно) і настройте параметри Scaling(Шкала), Relief(Рельєф) та Light Direction(Напрям освітлення) Для корекції отриманого малюнка (надання йому блідого тону) можна скористатися командою Image • Adjustments > Hue/Saturation(Зображення • Параметри • Тон/Насиченість) і настроїти освітленість за допомогою шкали Lightness(Освітленість), як це описано раніше.
5. Збережіть цей малюнок у файлі з іменем 1.jpg,розмістивши його у папці з веб-сторінками. Закрийте програму Adobe PhotoShop.
6. Створіть HTML-документ, в якому за допомогою атрибута BACKGR0UND="1. j p g " тегу <BODY> оформіть тло сторінки.
<HTML>
<ТІТLЕ>Моя фірма</ТІТLЕ>
<BODY BACKGR0UND="1.jpg">
<Н1><А HREF="l.html">Наша продукція</А></Н1>
<H1><A HREF="2.html">Haші замовники</А></Н1>
</BODY>
</HTML>
Вставлення зображень на веб-сторінку
Для розміщення малюнків у HTML-документі використовують одинарний тег <IMG>. Він має обов'язковий атрибут SRC, значенням якого є URL-адреса файлу зображення, записана в абсолютній (повністю) або відносній формі (починаючи від поточного каталогу;
при цьому «батьківський» каталог позначають за допомогою двох крапок і слешу (. . /)). Під час відкривання документа браузер завантажує малюнок і відображає його в тому місці документа, де розташований тег <IMG>. Графічний об'єкт буде показаний на веб-сторінці у своїх реальних розмірах. Якщо є потреба у їх зміні (масштабуванні об'єкта), нові розміри можна задати за допомогою атрибутів WIDT та HEIGHT, значення яких визначають відповідно ширину та висоту зображення в пікселах. При цьому необхідно зберегти пропорції малюнка, інакше він матиме вигляд розтягнутого або сплюснутого.
Слід також пам'ятати, що іноді користувачі відключають відображення графіки у вікні браузера, щоб прискорити завантаження документів. Тому, на випадок, коли малюнка на сторінці не буде, бажано повідомити, що на ньому зображено. Для цього використовують альтернативний текст — більш-менш докладний опис зображення, який задають у тегу <IMG> як значення спеціального атрибута ALT. Якщо браузер не може показати малюнок, він замість нього виводить цей текст.
Розглянемо HTML-документ, в якому використаємо малюнок flamingo. jpg, де зображено фламінго. У тегу <IMG> задамо атрибути
Після наведення вказівника миші на малюнок альтернативний текст відображається у спливаючому вікні. У режимі відключення графіки буде показано лише порожню рамку зображення з альтернативним текстом.