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


Графические изображения размещаются в 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-документы, но и на другие ресурсы сети Интернет. Для создания ссылок по рисункам применяются те же способы, что и для гипертекста. Разница заключается лишь в том, что вместо гипертекста должна быть вставлена метка рисунка.