Web-графіка
Важливу роль в оформленні Web-сторінок відіграють графічні зображення. Швидкість появи зображення на екрані залежить від розміру файла зображення. Графіка, яка повільно завантажується, може «відлякати» відвідувачів сторінок. Для зменшення розміру файла необхідно використовувати зображення типу JPEG або GIF. Конвертацію графіки у ці формати можна здійснити за допомогою редакторів растрових зображень. Допустимими зображеннями є такі, розмір яких не перевищує 40-50 Кбайт. На HTML-сторінках графіку можна розміщувати різними способами. Вбудовані зображення — це графічні зображення, які завжди залишаються в одному і тому самому місці сторінки (справа від тексту чи іншого об’єкта, що безпосередньо передує зображенню) і не обрамлюються текстом. Для того, щоб помістити на Web-сторінці вбудоване зображення використовується елемент < IMG SRC=URL_3o6paження>. Дескриптор < IMG> є одиночним. В атрибуті SRC (від слова source) необхідно вказати повну або відносну URL-адресу файла зображення. Наприклад, код: < Р> Це зображення нової моделі модема < IMG SRC=”modem8.jpg”> цей текст розміщується одразу після малюнка використано для розміщення на сторінці зображення, файл якого знаходиться в тому самому каталозі, що і сам HTML-файл (рис. 30).
Рис. 30 За замовчуванням текст вирівнюється по нижній частині зображення. Для зміни типу вирівнювання використовують дескриптор IMG з атрибутом ALIGN. Нижче наведені значення, які можна присвоїти цьому атрибуту:
Наведемо код документа, що вміщує три зображення, для кожного з яких використовується один з варіантів вирівнювання. На рис. 31 подано Web-сторінку, створену на основі цього, коду. < HTML> < HEAD> < TITLE> Використання атрибута ALIGN в дескрипторі IMG < /TITLE> < /HEAD> < BODY> < P> < IMG SRC=”modem.jpg” ALIGN=TOP> Цей текст вирівнюється по верхньому краю зображення < /P> < P> < IMG SRC=”modem.jpg” ALIGN=MIDDLE> Цей текст вирівнюється по середній частині зображення < /P> < P> < IMG SRC=”modem.jpg” ALIGN=BOTTOM> Цей текст вирівнюється по нижньому краю зображення < /P> < /BODY> < /HTML>
Рис. 31 Плаваючі зображення — це зображення, що не прив’язуються до одного рядка тексту, а ніби «плавають» вздовж одного з полів і обрамлюються текстом. Для створення плаваючих зображень використовується дескриптор < IMG> з атрибутом ALIGN. Для плаваючих зображень значення цього атрибута можуть бути LEFT (зображення плаває вздовж лівого краю тексту) або RIGHT (зображення плаває вздовж правого краю тексту). Наприклад: < IMG SRC=”amd.jpg” ALIGN=LEFT> Нижче наводиться код HTML-документа, в якому поміщено плаваюче зображення. < HEAD> < TITLE> Використання атрибута ALIGN в дескрипторі IMG < /TITLE> < /HEAD> < BODY> < P> < IMG SRC=”modem.jpg” ALIGN=LEFT> < /P> Цей текст розміщується праворуч від зображення і нижче < BR> Цей текст розміщується праворуч від зображення і нижче< BR> Цей текст розміщується праворуч від зображення і нижче< BR> Цей текст розміщується праворуч від зображення і нижче< BR> Цей текст розміщується праворуч від зображення і нижче< BR> Цей текст розміщується праворуч від зображення і нижче< BR> Цей текст розміщується праворуч від зображення і нижче< BR> Цей текст розміщується праворуч від зображення і нижче < /BODY> < /HTML> На рис. 32 подано інтерпретацію цього коду броузером.
Рис. 32 У дескрипторі < IMG> можна використовувати атрибути HEIGHT і WIDTH для визначення висоти та ширини зображення. За допомогою цих атрибутів «повідомляється» розмір зображення. Це дозволяє броузеру підготувати макет сторінки та розмістити текст до того, як будуть завантажені всі зображення. За Допомогою цих атрибутів можна також змінювати розміри зображення. Так, наприклад, для збільшення зображення необхідно в атрибутах HEIGHT і WIDTH вказати більші величини, ніж реальні розміри зображення (які можна визначити з допомогою графічного редактора). Зауважимо, що зменшувати розмір зображення таким методом не доцільно, оскільки розмір файла, а отже і час завантаження при цьому не змінюються. За допомогою атрибута BGCOLOR дескриптора < BODY> можна визначити колір фону сторінки, вказавши у ньому шестицифрове шістнадцяткове число. Цей атрибут має такий формат: < BODY BGCOLOR=#rrggbb> rr, gg, bb — двоцифрові шістнадцяткові числа, які визначають відповідно червону, зелену та голубу складові кольору фону. Наприклад: < BODY BGCOLOR=#000000> <! —задається чорний колір фонуà < BODY BGCOLOR=#ffffff> <! —задається білий колір фону à < BODY BGCOLOR=#ffOOOO> <! —задається червоний колір фонуà < BODY BGCOLOR=#00ff00> <! —задається зелений колір фону à < BODY BGCOLOR=#0000ff> <! —задається синій колір фону à Для визначення основних кольорів можна використовувати також зарезервовані імена.
|
