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

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

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

Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Команда вывода графики будет иметь вид <IMG src=./pic/img.gif>.

Атрибут alt=“текст_надписи”

Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt.

Например, выполняя команду:

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

браузер, не найдя картинку выведет на экран такой рисунок:

Атрибут altрекомендуется использовать всегда.Даже если картинка найдется браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию.

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

Эти атрибуты задают ширину (width) и высоту (height) (в пикселях) прямоугольника, в который выводится картинка. Если атрибуты не заданы, картинка рисуется в естественных размерах. Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины. Рекомендуется всегда записывать эти атрибуты и указывать в них естественные размеры картинки. Если размеры указываются неверно – картинка выводится браузером с искажением.

Если указание размеров вовсе проходит – на экране происходит маленькое «землетрясение» в момент прихода картинки из сети. Ведь не зная размеров изображения, браузер оставляет под него на экране стандартный прямоугольник, продолжая строить остальные элементы. Когда картинка загружена, браузеру приходится полностью перерисовывать экран.

Атрибут 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>

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