Техника Web-дизайна для студента
Размещение графики в HTML-документах
Графические изображения размещаются в HTML-документах с помощью метки <img>. Пример записи:
<IMG ЗЕС="имя файла рисунка">
Параметр src предназначен для задания имени файла рисунка, который должен располагаться в той же папке, что и HTML - документ. Если рисунки располагаются в других папках, то в этом случае необходимо указать путь к файлу рисунка. Например:
<IMG SRC="pictures/picl. jpg">
Рисунок pic 1 -jpg находится в папке pictures, которая расположена в той же папке, что и HTML-документ.
Рисунки могут располагаться и на других ресурсах сети Интернет. В этом случае необходимо указать адрес ресурса, путь к файлу и имя файла рисунка. Например:
<IMG SRC=Http://www. mysitel. ru/pictures/picl. jpg>
Параметр src является обязательным. Кроме него могут использоваться следующие параметры метки <img>:
О alt="текст" — позволяет задать альтернативный текст, который будет воспроизводиться браузером, если загрузка рисунка невозможна. Кроме того, этот текст будет отображаться в виде всплывающей подсказки при наведении курсора на рисунок;
О align="значение" — задает выравнивание текста, идущего за меткой <img>, относительно рисунка. Параметр align может принимать следующие значения:
• top — самый высокий элемент строки (не обязательно текстовый) выравнивается по верхней границе изображения;
• техттор — самый высокий текстовый элемент строки выравнивается по верхней границе изображения;
• middle — базовая линия строки выравнивается посередине изображения;
• absmiddle — середина строки выравнивается посередине изображения;
• bottom — базовая линия строки выравнивается по нижней границе изображения (действует по умолчанию);
• ABSBOTTOM — нижняя граница строки выравнивается по нижней границе изображения.
В качестве примера рассмотрим следующий документ (листинг 3.1).
Листинг 3.1. Размещение изображения в НТМ1_-документе. Строка, идущая за изображением, выравнивается по его верхней границе
<HTML>
<HEAD>
<TITLE>
Графика
</TITLE>
</HEAD>
<BODY>
<IMG SRC=1.jpg ALT="Петродворец" ALIGN=top>
Эта строка <IMG SRC=l. jpg ALT="Петродворец" WIDTH=50> располагается за рисунком и выравнивается параметром ALIGN со значением ТОР.
</BODY>
</HTML>
В состав строки, идущей за рисунком, входит уменьшенная копия того же рисунка (параметром width уменьшена ширина до 50 рх). Строка выравнивается по верхнему краю уменьшенного рисунка. Результат в окне браузера показан на рис. 3.1.
|
За рисунком и выравнивается параметром ALIGN со значением ТОР Рис. 3.1. Пример выравнивания самого высокого элемента строки по верхней границе изображения |
|
_1 |
При использовании перечисленных значений параметра align, справа от рисунка выводится только одна строка. Чтобы текст обтекал рисунок, можно использовать следующие значения:
О left — изображение располагается слева, текст обтекает его справа;
О right — изображение располагается справа, текст обтекает его слева.
Прервать обтекание рисунка текстом можно меткой <br> с параметром CLEAR, который Принимает значения LEFT И RIGHT В зависимости от значения параметра align (листинг 3.2).
Листинг 3.2. Размещение изображения в НТМ1_-документе, текст обтекает рисунок справа
<НТМ1>
<НЕАО>
<Т1^Е>
Графика
</т1та£>
</НЕАО>
<BODY>
<IMG SRC=1.jpg ALT="Петродворец" ALIGN=left>
Этот текст располагается за рисунком и выравнивается параметром ALIGN со значением LEFT. Текст обтекает рисунок справа. <BR CLEAR=LEFT> В этом месте обтекание прерывается.
</BODY>
|
</HTML> |
|
В браузере это будет выглядеть так, как показано на рис. 3.2. |
 |
|
|
Другие параметры метки <1мо:
О иютн="значение" — ширина изображения в пикселях или в процентах от ширины элемента, в котором находится изображение (полное окно, ячейка таблицы);
О НЕ 1СНТ="значение" — высота изображения в пикселях или в процентах от высоты элемента, в котором находится изображение, если высота элемента определена;
О НЗРАСЕ="значение" — зазор между текстом и изображением в пикселях по горизонтали;
О V3 РАСЕ=" значение " — зазор между текстом и изображением в пикселях по вертикали;
О BORDER= "значение " — толщина рамки вокруг изображения.
Изменяя размеры изображения, следует использовать только один из параметров width или height. Другой параметр изменится автоматически пропорционально первому. Одновременное изменение двух параметров в случае нарушения пропорций приведет к искажению изображения.
^ Примечание ^
Если предполагается всегда выводить изображение с уменьшенными размерами, то лучше предварительно уменьшить размеры исходного рисунка, а не прибегать к использованию параметров width или height. Это позволит уменьшить размер передаваемого по сети файла.
Параметры hspace и vs расе необходимо использовать для увеличения зазоров между рисунком и текстом, который по умолчанию слишком мал. Так в последнем примере следовало бы задать hspace=io и vspace=7.
Рамки вокруг рисунков устанавливаются редко, но в одном случае параметр border может пригодиться. Если по рисунку осуществляется ссылка, то вокруг него появится рамка. Чтобы избавиться от нее можно использовать параметр border=o.
По рисункам можно осуществлять ссылки не только на другие HTML-документы, но и на другие ресурсы сети Интернет. Для создания ссылок по рисункам применяются те же способы, что и для гипертекста. Разница заключается лишь в том, что вместо гипертекста должна быть вставлена метка рисунка. Например:
<А HREF="doc. htm"XIMG SRC=l. gif BORDER=Ox/A>
Ссылка осуществляется по рисунку 1 .gif на документ doc. htm.
