Встраивание изображений в нтм l-документы
Для встраивания изобрaжений в HTML-документ следует использовать тэг <IMG>, имеющий единственный обязательный паpаметр sRC, определяющий URL-адрес файла c изобрaжением. Простейший пример встраивания изобрaжения:
<IMG SRC=picture.gif>
Данный тэг может иметь ряд параметров, обсуждение которых дается ниже.
Выравнивание изображений
При включении графического изобрaжения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изобрaжения зaдается значением параметра ALIGN тэга <IMG>.
Значения параметра ALIGN
Значение параметра |
Действие параметра |
TOP |
Верхняя граница изображения выравнивается по самому высокому элеменry текущей строки |
тExттoP |
Верхняя граница изображения выравнивается по самому высокому текстовому элементy текущей строки |
MIDDLE |
Выравнивание середины изображения по базовой линии текущей строки |
ABSMIDDLE |
Выравнивание середины изображения посередине текущей строки |
BASELINE или BOTTOM |
Выравнивание нижней границы изображения по базовой линии текущей строки |
Aвsвoттoм |
Выравнивание нижней границы изображения по нижней границе текущей строки |
LEFT |
Изображение прижимается к левому полю окна. Текст обтекает изображение c правой стороны |
RIGHT |
Изображение прижимается к правому полю окна. Текст обтекает изображение c левой стороны |
все значения параметров выравнивания изображений можно условно разделить на две группы по их принципу действия.
К одной группе относятся два значения параметра - LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое "плавающее" изображение. B этом случае изображение прижимается к соответствующему краю окна пpосмотра браузера, a последующий текст (или другие элементы) "обтекают" изображение c противоположной стороны. Здесь текст, размещаемый рядом c изобрaжением, может занимать несколько строчек.
K дpугой гpуппе значений параметров относятся все остaльные. При их использовании изобрaжение как бы встраивается в строчку текста, a параметры выравнивания зaдают pасположение изобрaжения относительно стpоки текста. Таким образом, в отличие от плавающих изображений, здесь изобрaжение является обычным элементом строки. Это легко понять, если представить, что изобрaжение является просто одной буквой стpоки текста, правда, достаточно большой (типа буквицы).
Приведем пример НТМL-кода, в котором используются изобpaжения, как элемент строки.
<HTML>
<HEAD>
<TITLE>Выравнивание изображений</TITLE>
<BODY>
Выравнивание <IMG SRC=L:\ПОКС\b2.jpg ALIGN=top> по верхнему краю
<p>
Выравнивание
по <IMG SRC=L:\ПОКС\b2.jpg ALIGN=BASELINE> базовой
линии
</BODY>
</HTML>
Рассмотрим пример плавающего изображения
<HTML>
<HEAD>
<TITLE>Выравнивание изображений</TITLE>
<BODY>
<IMG SRC=L:\ПОКС\b2.jpg ALIGN=RIGHT>
<p ALIGN=JUSTIFY>
K дpугой гpуппе значений параметров относятся все остaльные.
При их использовании изобрaжение как бы встраивается в строчку текста,
a параметры выравнивания зaдают pасположение изобрaжения относительно стpоки текста. Таким образом, в отличие от плавающих изображений, здесь изо¬брaжение является обычным элементом строки. Это легко понять, если представить, что изобрaжение является просто одной буквой стpоки текста, правда, достаточно большой (типа буквицы).
<p ALIGN=JUSTIFY>
К одной группе относятся два значения параметра - LEFT и RIGHT.
При использовании любого из этих параметров мы получаем так называемое "плавающее" изображение. B этом случае изображение прижимается к соответствующему краю окна пpосмотра браузера, a последующий текст (или другие элементы) "обтекают" изображение c противоположной стороны.
Здесь текст, размещаемый рядом c изобрaжением, может занимать несколько строчек.
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Выравнивание изображений</TITLE>
<BODY>
<IMG SRC=L:\ПОКС\b2.jpg>
<IMG SRC=L:\ПОКС\b2.jpg ALIGN=TOP WIDTH=160>
Выравнивание ALIGN=TOP
<P>
<IMG SRC=L:\ПОКС\b2.jpg>
<IMG SRC=L:\ПОКС\b2.jpg ALIGN=TEXTTOP WIDTH=160>
Выравнивание ALIGN=TEXTTOP
</BODY>
<
/HTML>
Если в документе используются плавающие изображения, выровненные со значением RIGHT ИЛИ LEFT то имеется возможность принудительного прекрашения обтекания в заданном месте текста. Это обеспечивaется применением тэга принудительного прерывания строки <BR> c параметром CLEAR. B качестве значений параметра CLEAR можно использовать следующие: LEFT, RIGHT или АLL. Так, для приведенного выше примеpа в нужном месте текста можно разместить строку:
<BR CLEAR= RIGHT>
Текст, следующий далее, будет размещаться ниже изображения c новой строки.
<HTML>
<HEAD>
<TITLE>Выравнивание изображений</TITLE>
<BODY>
<IMG SRC=L:\ПОКС\b2.jpg>
<BR CLEAR= LEFT>
<IMG SRC=L:\ПОКС\b2.jpg ALIGN=TOP WIDTH=160>
Выравнивание ALIGN=TOP
<P>
<IMG SRC=L:\ПОКС\b2.jpg>
<IMG SRC=L:\ПОКС\b2.jpg ALIGN=TEXTTOP WIDTH=160>
Выравнивание ALIGN=TEXTTOP
<
/BODY>
</HTML>