Графические изображения размещаются в HTML-документах с помощью метки <img>. Пример записи:
<img SRC =»имя файла рисунка»>
Параметр src предназначен для задания имени файла рисунка, который должен располагаться в той же папке, что и HTML-документ. Если рисунки располагаются в других папках, то в этом случае необходимо указать путь к файлу рисунка.
Например:
<img SRC=»pictures/pic1.jpg»>
Рисунок pic1.jpg находится в папке pictures, которая расположена в той же папке, что и HTML-документ.
Рисунки могут располагаться и на других ресурсах сети Интернет. В этом случае необходимо указать адрес ресурса, путь к файлу и имя файла рисунка. Например:
<img src=http://www.mysite.ru/pictures/pic1.jpg>
Параметр src является обязательным. Кроме него могут использоваться следующие параметры метки <img>:
- alt=»текст» — позволяет задать альтернативный текст, который будет воспроизводиться браузером, если загрузка рисунка невозможна. Кроме того, этот текст будет отображаться в виде всплывающей подсказки при наведении курсора на рисунок;
- align=»значение» — задает выравнивание текста, идущего за меткой <img>, относительно рисунка. Параметр align может принимать следующие значения:
- тор — самый высокий элемент строки (не обязательно текстовый) выравнивается по верхней границе изображения;
- texttop — самый высокий текстовый элемент строки выравнивается по верхней границе изображения;
- middle — базовая линия строки выравнивается посередине изображения;
- absmiddle — середина строки выравнивается посередине изображения;
- bottom — базовая линия строки выравнивается по нижней границе изображения (действует по умолчанию);
- absbottom — нижняя граница строки выравнивается по нижней границе изображения.
При использовании перечисленных значений параметра align, справа от рисунка выводится только одна строка. Чтобы текст обтекал рисунок, можно использовать следующие значения:
- left — изображение располагается слева, текст обтекает его справа;
- right — изображение располагается справа, текст обтекает его слева.
Прервать обтекание рисунка текстом можно меткой <br> с параметром clear, который принимает значения left и right в зависимости от значения параметра align <BR CLEAR=LEFT> В этом месте обтекание прерывается.
Другие параметры метки <img>:
- width =»значение» — ширина изображения в пикселях или в процентах от ширины элемента, в котором находится изображение (полное окно, ячейка таблицы);
- height =»значение» — высота изображения в пикселях или в процентах от высоты элемента, в котором находится изображение, если высота элемента определена;
- hspace=»значение» — зазор между текстом и изображением в пикселях по горизонтали;
- vspace=»значение» — зазор между текстом и изображением в пикселях по вертикали;
- border =»значение» — толщина рамки вокруг изображения.
Изменяя размеры изображения, следует использовать только один из параметров. Другой параметр изменится автоматически пропорционально первому. Одновременное изменение двух параметров в случае нарушения пропорций приведет к искажению изображения.
Если предполагается всегда выводить изображение с уменьшенными размерами, то лучше предварительно уменьшить размеры исходного рисунка, а не прибегать к использованию параметров width или height. Это позволит уменьшить размер передаваемого по сети файла.
Параметры hspace и vspace необходимо использовать для увеличения зазоров между рисунком и текстом, который по умолчанию слишком мал. Так в последнем примере следовало бы задать hspace=io и vspace=7.
Рамки вокруг рисунков устанавливаются редко, но в одном случае параметр border может пригодиться. Если по рисунку осуществляется ссылка, то вокруг него появится рамка. Чтобы избавиться от нее можно использовать параметр border=o.
По рисункам можно осуществлять ссылки не только на другие HTML-документы, но и на другие ресурсы сети Интернет. Для создания ссылок по рисункам применяются те же способы, что и для гипертекста. Разница заключается лишь в том, что вместо гипертекста должна быть вставлена метка рисунка.