Вставка графических изображений

Вставка на страницу графического изображения из файла графического формата (GIF, JPG, BMP и др.) производится с помощью тэга <IMG>с указанием адреса файла в качестве аргумента атрибута SRC:

<IMG SRC=”адрес_графического_файла”>

Адрес графического файла – это либо URL-адрес, либо имя файла, возможно с указанием пути.

Для предварительного формирования структуры страницы следует указать размеры изображения с помощью атрибутов WIDTH (ширина) и HEIGHT(высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Например, <IMG SRC=”logotip.gif” WIDTH=40 HEIGHT=20>

Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга <IMG> с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежании этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSPACE для верхнего и нижнего полей и HSPACE для боковых полей в тэге <IMG>. Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг <BG CLEAR=…>.

Следующий тэг задаёт обтекание графики из файла LOGOTIP.JPG справа (картинка будет находиться слева от текста):

<IMG SRC=”logotip.gif” ALIGN=LEFT>

Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGNприсвоить аргумент RIGHT:

<IMG SRC=”logotip.gif” ALIGN=RIGHT >

Чтобы задать поля вокруг картинки, надо написать тэг вида:

<IMG SRC=”logotip.gif” ALIGN=LEFT HSPACE =20 VSPACE =10>

Широкие возможности точного позиционирования изображения (как и других элементов) на странице предоставляют таблицы и стили. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.

Рис. 19. Использование графики с обтекание её текстом слева и справа

Рис. 20. Пример использования графики