У більшості професійно створених сайтів використовують графічне оформлення, що дає змогу яскраво та наочно подати інформацію. Для цього на веб-сторінках розміщують відповідні графічні файли, які можуть мати відповідні формати. Зображення мають бути розроблені у такий спосіб, щоб допомогти користувачу сприймати текстову інформацію та доповнювати її. Розглянути особливості популярних графічних форматів можна .

Для розміщення малюнків у HTML-документі використовують одинарний тег <IMG>. Він має обов’язковий атрибут SRC, значенням якого є URL- адреса файлу зображення, записана в абсолютній (повністю) або відносній формі (починаючи від поточного каталогу; при цьому «батьківський» каталог позначають за допомогою двох крапок і слешу (../)). Під час відкривання документа браузер завантажує малюнок і відображає його в тому місці документа, де розташований тег <IMG>.

Графічний об’єкт буде показаний на веб-сторінці у своїх реальних розмірах. Якщо є потреба у їх зміні (масштабування об’єкта), нові розміри можна задати за допомогою атрибутів WIDTH та HEIGHT, значення яких визначають відповідну ширину і висоту зображення в пікселях. При цьому необхідно зберегти пропорції малюнка, інакше він матиме вигляд розтягнутого або сплюснутого.

Слід також пам’ятати, що іноді користувачі відключають відображення графіки у вікні браузера, щоб прискорити завантаження документів. Тому, на випадок, коли малюнка на сторінці не буде, бажано повідомити, що на ньому зображено. Для цього використовують альтернативний текст – більш-менш досконалий опис зображення, який задають у тегу <IMG> як значення спеціального атрибута ALT. Якщо браузер не може показати малюнок, він замість нього виводить цей текст. Атрибут ALT використовують також длявідображення альтернативного тексту у спливаючому вікні після наведення вказівника миші на малюнок.

Наприклад,

<IMG SRC=”1.jpg” WIDTH=300 HEIGHT=200 ALT=”Лебеді”>. Це означає,

що малюнок матиме ширину 300 пікселів, а висоту – 200, після наведення вказівника миші на малюнок текст «Лебеді» відображатиметься у спливаючому вікні.

Розміщення зображень у тексті

Зображення можна розмістити у тексті, але при цьому слід визначити, в якийспосіб текст обтікатиме його. Для взаємного розміщення тексту і зображень призначений атрибут ALIGN у тегу <IMG>, який може набувати, зокрема,таких значень:

left – зображення розміщене в лівій частині сторінки, текст обтікає його з правого боку;
right – зображення розміщене в правій частині сторінки, текст обтікає його злівого боку;
top – обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно за верхнею межею малюнка;
bottom – обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно за нижньою межею малюнка;
middle – обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно по середній лінії малюнка;

За умовчанням атрибутALIGN має значенняleft.

Для того, щоб картинка не була розташована впритул до тексту, можна задати відступи. Це роблять за допомогою атрибута <HSPAСE> для бокових полів та атрибута <VSPASE> для верхнього і нижнього полів. Значення аргументів задають у вигляді чисел, що визначають розміри відступів у пікселях.

11 з 22 балів

Вправа

Розмістити малюнок на веб-сторінці ліворуч від тексту, який обтікатиме його. Поля навколо малюнка матимуть розмір 20 пікселів, а при наведенні вказівника миші на малюнок відображатиметься альтернативний текст.

Малюнок попередньо (бажано) оптимізувати в довільному графічному редакторі (Adobe Photoshop, Microsoft Picture Manager, Paint та інші) до об’єму, який дозволить швидше завантажуватись веб-сторінці, а також підібрати відповідне розширення.

Розмір малюнку безпосередньо можна задати відповідними тегами.