Тема 4. Робота з зображеннями
3.1. Використання зображень на web - сторінці
Швидкість передачі інформації в мережі Інтернет має велике значення, тому мінімізація розміру web-сторінки є нагальною проблемою. Зображення зазвичай займають багато місця, потрібно їх використовувати лише коли вони дійсно необхідні, зменшувати розмір зображень за рахунок використання відповідних графічних форматів. На теперішній час, найбільш розповсюдженими є такі формати графічних файлів:
Формат JPEG (Joint Photographic Expert Group – об’єднана група експертів фотографії) – використовується переважно для збереження багатоколірних зображень, забезпечує ущільнення практично без зменшення кількості кольорів за рахунок зменшення кількості пікселів.
Формат GIF (Graphics Interchange Format – формат обміну графічною інформацією) застосовується тоді, коли не потребується значної кількості кольорів, ущільнення відбувається за рахунок зменшення кількості кольорів до 256 (іноді до 2).
Формат PNG (Portable Network Graphics – портативна мережна графіка) дозволяє виконати ущільнення або за рахунок зменшення кількості пікселів, або кількості кольорів, використовується більш рідко, оскільки файли цього формату займають більше місця, ніж файли форматів JPEG і GIF.
Для розташування зображення на web-сторінці використовується тег <IMG>, який має наступні атрибути:
Атрибут SRC – визначає місце розташування та ім’я файлу – зображення (імена папок відокремлюються символом slach / ).
Наприклад, <IMG SRC="picture.jpg" >
<IMG SRC="C:/Зображення/picture.jpg" >
Атрибути WIDTH і HEIGHT дозволяють встановити відповідно ширину та висоту зображення. Ці атрибути використовуються в першу чергу для того, щоб зарезервувати місце на сторінці для зображення. Рисунок займе на сторінці стільки місця скільки потребують його реальні розміри.
Атрибут ALT додає коментар, який відображується, якщо покажчик миші буде встановлено на рисунку.
Атрибут BORDER визначає товщину рамки навколо зображення.
Атрибут ALIGN надає можливість встановити спосіб вирівнювання зображення на сторінці, може приймати значення: для вирівнювання по горизонталі left - вирівнювання ліворуч та right – праворуч, для вирівнювання по вертикалі top – вирівнювання по верхньому краю рядка відносно тексту, middle – по центру, bottom – по нижньому краю. Щоб встановити вирівнювання по центру по горизонталі можна помістити зображення в абзац, для якого значення атрибуту ALIGN визначити як center.
Приклад використання зображення:
<HTML>
<HEAD>
<TITLE>
Приклад роботи з зображеннями
</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF TEXT=#0000FF TOPMARGIN=20 BOTTOMMARGIN=20 LEFTMARGIN=20 RIGHTMARGIN=20>
<BASEFONT SIZE=4>
<H1> <I>
Це моя улюблена картинка:
</I> </H1>
<P ALIGN=CENTER>
Дивіться
<IMG SRC="picture.jpg" ALT="Морська черепаха" BORDER=3 ALIGN=MIDDLE>
</P>
</BODY>
</HTML>
Рисунок 4.1 – Впровадження зображення у HTML - документ
Зображення можна
також зробити фоном сторінки за допомогою
атрибуту BACKGROUND тегу <BODY>. У якості
фону доцільно використовувати невеликі
зображення, оскільки браузер буде
копіювати їх щоб повністю заповнити
сторінку. Наприклад, можна за допомогою
програми Paint створити таке зображення
,
зберегти його у файлі з ім’ям Фон.jpg.
Після виконання тегу
<BODY BACKGROUND="Фон.jpg" TEXT=#000000 >
ф
он
сторінки матиме вигляд .