Вставка ілюстрацій

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

Атрибут src=ім'я_файлу

Найголовнішим атрибутом команди є атрибут src, за допомогою якого можна задати ім'я файлу з картинкою. Команда виведення графіки матиме вигляд < IMG src=. /pic/img.gif>.

Атрибут alt="текст_напису"

Якщо браузер не знаходить картинки у вказаному місці на диску, він замість неї малює на екрані маленький прямокутник і вписує в нього напис, який заданий атрибутом alt.

Наприклад, виконуючи команду:

< IMG src=./pic/monstr.jpg alt=«Страшный зверь»>

браузер, не знайшовши картинку виведе на екран такий малюнок:

Атрибут alt рекомендується використовувати завжди. Навіть якщо картинка знайдеться браузером, завдання напису не буде зайвим: варто користувачеві зупинити курсор на картинці, як напис з'явиться в маленькому віконці і повідомить додаткову інформацію.

Атрибути width=n і height=m

Ці атрибути задають ширину (width) і висоту(у пікселях) прямокутника, в який виводиться картинка. Якщо атрибути не задані, картинка малюється в природних розмірах. Коли розміри прямокутника не співпадають з розмірами картинки, браузер проводить масштабування картинки, підганяючи її під вказані величини. Рекомендується завжди записувати ці атрибути і вказувати в них природні розміри картинки. Якщо розміри вказуються невірно - картинка виводиться браузером із спотворенням.

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

стю перемальовувати екран.

Атрибут border=n

Атрибут дозволяє задати рамку навколо ілюстрації завтовшки в n пікселів. За відсутності атрибуту або при значенні n=0 рамка не малюється. Проте, щоб не вводити користувачів в оману в зображеннях, які є гіперпосиланнями не варто задавати border=0, оскільки малюнки, вживані в якості гіперпосилань, зазвичай виділяються кольоровою рамкою.

Атрибути hspace=n vspace=n

Атрибути hspace і vspace визначають вільний простір ліворуч і справа (hspace), над і під (vspace) картинкою.

Атрибут align

Визначає положення зображення тексту, що відносно оточує його.

align=top - вирівнює верх зображення по верхньому краю найвищого елементу в рядку навколишнього тексту.

align=middle - вирівнює центр зображення по базовій лінії рядка навколишнього тексту.

align=bottom вирівнює нижній край зображення по базовій лінії рядка навколишнього тексту.

align=left визначає зображення, що огинається текстом. Зображення розташовується уздовж лівої межі документу, а наступні рядки тексту огинають його справа.

align=right визначає зображення, що огинається текстом. Зображення розташовується уздовж правої межі документу, а наступні рядки тексту огинають його ліворуч.

Окрім основних значень атрибуту align="ключове слово" існує ще ряд аргументів, які розширюють можливості взаємного розміщення графіки і тексту.

align=textop вирівнює верх зображення по верхньому краю найвищого текстового символу в рядку навколишнього тексту. Дія цього аргументу у більшості випадків, але не завжди, подібно до дії аргументу align=top.

align=absmiddle вирівнює центр зображення по центру рядка навколишнього тексту. Дія цього аргументу у більшості випадків, але не завжди, подібно до дії аргументу align=middle.

align=baseline вирівнює нижній край зображення по базисній лінії рядка навколишнього тексту, тобто виконує таку ж дію, як і align=bottom.

align=absbottom вирівнює нижній край зображення по нижньому краю рядка навколишнього тексту.

Для припинення обтікання тексту ліворуч і праворуч від картинки використовуються теги <BR clean=left> і <BR clean=right>

Картинка як посилання

Дуже легко змусити картинку працювати як гіперпосилання. досить вкласти команду <IMG> всередину команди <A>:

< A href =перехід .><IMG src =файл .></A>

Курсор при попаданні на картинку-посилання міняє свою форму. Клацання миші по картинці примушує браузер виконувати перехід. Картинка-посилання не підкреслюється, як текстове посилання, і не виділяється кольором, а обрамляється в рамочку.

Поиск по сайту: