Изображения

Для размещения изображений в HTML-документах используется элемент <img/>. Следует учитывать, что вы добавляете ссылку на файл, содержащий эту картинку, при этом сам файл может находиться на жестком диске сервера в каталоге вашего сайта или где-то в Сети.

Изображения – это файлы определенных форматов, которые распознаются браузерами и графическими приложениями. В Сети используются форматы JPEG, GIF и PNG. Если ваши файлы других форматов, их следует преобразовать в один из этих форматов с помощью графического редактора. Следует учесть, что большие по размеру графические файлы увеличивают время загрузки страницы.

Элемент <img/>

Формат элемента:

<img src="адрес_изображения"/>

Пример:

<p> <img src="portrait.gif"/> Наш коллектив</p>

(если картинка в том же каталоге, что и страница.)

<p> <img src="/images/portrait.gif"/> Наш коллектив</p>

если картинка в подкаталоге images корневого каталога сайта.)

Адрес изображения может задаваться абсолютной ссылкой.

<p> <img src="http://www.mycorporation.com/images/portrait.gif"/> Наш коллектив</p>

В том случае, когда у пользователя нет графического браузера либо он отключает просмотр графики, вместо рисунков можно на странице разместить альтернативный текст с помощью атрибута alt элемента img.

<img src="graph1.gif" alt="Здесь картинка"/>

Для размещения картинок совместно с поясняющими их текстом используется атрибут align элемента img:

<img align="значение" src="адрес_изображения"/>

Возможные значения атрибута: top (текст располагается рядом с верхней границей изображения), middle (рядом с серединой) и bottom (рядом с нижней границей).

Пример:

<p><img align="top" src="graph1.gif" alt="Наш офис"/>Наш офис</p>

На экране

Наш офис

Атрибут align может принимать значения right (справа) и left (слева), которые переводят изображения в разряд плавающих. Картинки появятся не в том месте, где расположен элемент <img/>, а рядом с указанным полем (левым или правым).

У элемента <img/> есть еще два атрибута: width (ширина) и height (высота). Эти атрибуты позволяют изменять реальный размер изображений и тем самым влиять на скорость загрузки страницы в окне браузера. Значения задаются в пикселах или процентах.

<img src="graph1.gif" width="150" height="75"/>