Вставка графічних об’єктів

Графічні ілюстрації являються невід’ємною частиною Web-документа. Графічні елементи Web-сторінок застосовують два основних формати – GIF та JPEG. Для підготовки зображень можна використовувати любий графічний редактор (наприклад стандартний додаток Paint операційної системи Windows). Рисунки зберігаються на Web-вузлах в окремих файлах, але відображаються як елементи Web-сторінок.

Для вставки рисунку використовується парний тег <IMG> з обов’язковим атрибутом SRC=, який задає адресу файлу з зображенням.

Атрибути WIDHT= та HEIGHT= задають відповідно ширину та висоту рисунку.

Атрибут ALIGN= задає режим взаємодії рисунку з текстом. Наприклад, якщо задано:

¾ ALIGN="LEFT", то зображення розташовується у лівого краю сторінки, текст розміщується праворуч;

¾ ALIGN="RIGHT", то зображення розміщується у правого краю сторінки, а текст – ліворуч від нього

Рекомендується задавати величину відстані від тексту атрибутами HSPACE= (по горизонталі) та VSPACE= (по вертикалі).

Якщо рисунок за якимись обставинами неможливо продивитись, необхідно задати так званий альтернативний текст, який відображається замість зображення і може ознайомити зі змістом рисунку. Альтернативний текст задається атрибутом ALT=

Зображення можуть використовуватись в якості фонового рисунку, який задається атрибутом BACKGROUND= у тегі <BODY>

Приклад 5. Вставка графічних зображень. На Web-сторінку із "Папки фото БД" додати рисунок розміром 100 пікселів по висоті та ширині, який розмістити ліворуч, задати відстань від тексту по вертикалі та горизонталі 20 пікселів. Задати альтернативний текст, який коротко описує вміст рисунку. Порядок виконання розглянуто в попередніх прикладах. Документ зберегти в особистій папці у файлі з ім’ям Вставка рисунків.html

<html>

<head>

<title>Вставка рисунків</title>

</head>

<body>

<img src="Задати шлях до файлу, його ім’я та розширення", widht="100", height="100", align="left", hspace="20", vspace="20", alt="Текст замість зображення">

<p > <font size=+3><i>Це приклад, який показує можливість вставки графічних об’єктів на Web-сторінку </i>

</font>

</body>

</html>

Результат виконання представлено на рисунку 4.

Рис.4 Вікно браузера з рисунком та текстом.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: