3.5.6 Робота із графічними зображеннями

Графічні файли включаються в HTML-документи за допомогою команди <IMG>. Допускається використання файлів у форматі GIF або JPG/JPEG (для систем, що працюють під MS Windows, допускаються також файли формату BMP).

C тегом <IMG> можуть бути використані атрибути:

SRC= “URL” – визначає URL-адресу або ім'я графічного файлу.

Наприклад:

<IMG SRC=/img/narjad3.jpg >,

<IMG SRC="http://www/podruga.net/img/narjad3.jpg" >.

ALT= – атрибут, який вказує, що ставити на місце графічного об’єкта, якщо браузер не в змозі показувати графічні файли або внаслідок повільної швидкості перекачування даних не було одержано відповідних даних (рис. 33).

HEIGHT= n – задає висоту контуру (n – кількість пікселів), у якому буде розміщене зображення.

WIDTH= n – задає ширину контуру (n – кількість пікселів), у якому буде розміщене зображення.

Наприклад, на рисунку 33 показано, як буде відображений об'єкт, описаний у нижченаведеному фрагменті HTML-коду.

<IMG SRC="rogd03.jpg" WIDTH=250 HEIGHT=113 ALT="New Year">

Рисунок 33

Якщо розміри контуру, зазначені атрибутами, не збігаються з розмірами графічного файлу, то останній масштабується. Масштабування може привести до різкого погіршення якості графічного файлу, тому рекомендується задавати розміри, що відповідають розмірам графічного файлу.

Рекомендується для великих графічних файлів (більше 10 Kb) завжди задавати їхні розміри, для збільшення швидкості роботи браузера. Якщо розміри не задані, то, зустрівши графічний файл, браузер припиняє виведення тексту й чекає, поки закачається вся картинка, щоб визначити її розміри.

HSPACE=т – ширина чистих полів у пікселах ліворуч і праворуч зображення.

VSPACE = т – ширина чистих полів у пікселах зверху й знизу зображення.

BORDER= n – ширина рамки зображення.

Покажемо, як впливає на відображення графічного об’єкта у вікні браузера застосування тегу IMG з атрибутами HSPACE, VSPACE, BORDER. Припустимо, що в тілі певного HTML-документа присутня команда

<IMG SRC="rogd03.jpg" HSPACE="20" VSPACE="20" BORDER= "2" ALIGN="left">.

Тоді у вікні браузера HTML-документ буде мати такий вигляд, як показано на рисунку 34.

Рисунок 34

Якщо тег IMG використовується без атрибутів HSPACE, VSPACE, BORDER тоді той самий документ буде мати такий вигляд, як показано на рисунку 35.

Рисунок 35

Якщо використовувати атрибут ALIGN зі значеннями LEFT або RIGHT, можна створити "плаваючу" картинку, яку буде обтікати текст. Наприкінці плаваючого об'єкта обов'язково повинна бути присутня команда <BR> з атрибутом CLEAR=, що припиняє обтікання картинки. Після цієї команди текст виводиться нижче графічного файлу.

Наприклад, наступний фрагмент HTML-коду у вікні браузера буде мати такий вигляд, як показано на рисунку 36.

“<IMG SRC="rogd03.jpg" ALIGN=LEFT HSPACE=4> Цей текст, необхідно розмiстити праворуч, поруч iз картинкою. Текст повинен обтiкати картинку. <BR CLEAR=LEFT>А цей текст повинен знаходитись нижче картинки...”

Кілька порад при роботі із графікою:

Завжди використовуйте атрибути задання розміру картинки. У цьому випадку браузер буде продовжувати показувати web-документ, а не чекати доки закачається вся картинка.

Рисунок 36

Використовуйте картинки, переважно у форматі JPEG/JPG (картинки у форматі GIF мають велику кількість деталей, що повільно відображаються на не дуже потужних машинах).

Якщо бажаєте, щоб користувач із інтересом читав ваші сторінки, то не вставляйте в документ картинки, розмір яких більший 40 Kb. Для об'єктів більшого розміру використовуйте посилання з обов'язковою вказівкою розміру.

Не зловживайте анімаційними GIF'ами – це сильно заважає перегляду сторінки.