Размещение графики в HTML-документах

Графические изображения размещаются в HTML-документах с помощью метки <img>.

Параметр src предназначен для задания имени файла рисунка, который должен располагаться в той же папке, что и HTML-документ. Если рисунки располагаются в других папках, то в этом случае необходимо указать путь к файлу рисунка. Например:

<IMG SRC="pictures/picl.jpg">

Рисунок picl.jpg находится в папке pictures, которая расположена в той же папке, что и HTML-документ.

Рисунки могут располагаться и на других ресурсах сети Интернет. В этом случае необходимо указать адрес ресурса, путь к файлу и имя файла рисунка. Например:

<img src=http://www.mysitel.ru/pictures/picl.jpg> Параметр src является обязательным. Кроме него могут использоваться следующие параметры метки <img>:

о alt="текст" — позволяет задать альтернативный текст, который будет воспроизводиться браузером, если загрузка рисунка невозможна. Кроме того, этот текст будет отображаться в виде всплывающей подсказки при наведении курсора на рисунок;

о align="значение" — задает выравнивание текста, идущего за меткой <img>, относительно рисунка. Параметр align может принимать следующие значения:

• тор — самый высокий элемент строки (не обязательно текстовый) выравнивается по верхней границе изображения;

• техттор — самый высокий текстовый элемент строки выравнивается по верхней границе изображения;

• middle — базовая линия строки выравнивается посередине изображения;

• absmiddle — середина строки выравнивается посередине изображения;

• bottom — базовая линия строки выравнивается по нижней границе изображения (действует по умолчанию);

• absbottom — нижняя граница строки выравнивается по нижней границе изображения.

В состав строки, идущей за рисунком, входит уменьшенная копия того же рисунка (параметром width уменьшена ширина до 50 рх). Строка выравнивается по верхнему краю уменьшенного рисунка.

При использовании перечисленных значений параметра align, справа от рисунка выводится только одна строка. Чтобы текст обтекал рисунок, можно использовать следующие значения:

о left — изображение располагается слева, текст обтекает его справа;

о right — изображение располагается справа, текст обтекает его слева.

Прервать обтекание рисунка текстом можно меткой <br> с параметром clear, который принимает значения left и right в зависимости от значения параметра align.

Другие параметры метки <img>:

о width= "значение" — ширина изображения в пикселях или в процентах от ширины элемента, в котором находится изображение (полное окно, ячейка таблицы);

о неight="значение" — высота изображения в пикселях или в процентах от высоты элемента, в котором находится изображение, если высота элемента определена;

о hspace="значение" — зазор между текстом и изображением в пикселях по горизонтали;

о vspace="значение" — зазор между текстом и изображением в пикселях по вертикали;

о border= "значение" — толщина рамки вокруг изображения.

Изменяя размеры изображения, следует использовать только один из параметров width или height. Другой параметр изменится автоматически пропорционально первому. Одновременное изменение двух параметров в случае нарушения пропорций приведет к искажению изображения.

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

Параметры hspace и vspace необходимо использовать для увеличения зазоров между рисунком и текстом, который по умолчанию слишком мал. Так в последнем примере следовало бы задать hspace=io и vspace=7.

Рамки вокруг рисунков устанавливаются редко, но в одном случае параметр border может пригодиться. Если по рисунку осуществляется ссылка, то вокруг него появится рамка. Чтобы избавиться от нее можно использовать параметр border=o.

По рисункам можно осуществлять ссылки не только на другие HTML-документы, но и на другие ресурсы сети Интернет. Для создания ссылок по рисункам применяются те же способы, что и для гипертекста. Разница заключается лишь в том, что вместо гипертекста должна быть вставлена метка рисунка.