Добавление изображений

Изображения делают страницу привлекательной. Теги изображений представляет собой исключение из правил - для них них не требуется закрывающего тега, зато у них есть ряд важных атрибутов. Теги изображения состоят из тега <img> и источника изображения (адрес графического файла), указанного в атрибуте src. В качестве адреса графического файла указывается либо URL-адрес, либо имя файла (возможно с указанием пути). Например,

<IMG SRC="images/"Tourgojk_lake.jpg>

Рекомендуется включать в тег следующие атрибуты для каждого изображения:

width="x". Определяет ширину изображения
heigth="x". Определяет высоту изображения
border="x". Значение x в данном случае определяет толщину рамки, которую броузер будет рисовать вокруг изображения.

Совет

Для этого атрибута нужно использовать значение,не равное нулю.

alt="x". Атрибут alt позволяет вводить описание изображения. Это очень полезно для людей, отключающих изображение.

Например, при добавлении этой информации к приведенному примеру, получится такое изображение:

<IMG SRC="images/Tourgojk_lake_2.jpg" width="584" heigth="397" border="10" 
alt="Озеро Тургояк, УРАЛ">

Возврат в начало страницы Возврат на главную страницу сайта

Увеличение скорости загрузки изображения

Для увеличения скорости передачи графического изображения в теге< IMG> можно использовать атрибут lowsrc, который принимает в качестве аргумента адрес графического файла. Для использования этого атрибута необходимо создать два файла: один с высоким разрешением (формат JPG), другой - с низким (формат GIF). Тогда тег

<img src = "images/big_flower.jpg" align="middle" 
lowsrc="images/small_flower.gif">

предпишет броузеру сначала загрузить файл small_flower.gif, а затем по мере приема заменить его файлом big_flower.jpg.

Другой способ ускорения загрузки заключается в задании размеров изображения с помощью атрибутов width (ширина) и heigth (высота), измеряемые в пикселах. Если указать эти атрибуты, то броузер сначала выделит место под графику, подготовит макет документа, отобразит текст, и только потом загрузит графику. При этом броузер сжимает или растягивает изображение, встраивая его в рамки указанного размера.

Возврат в начало страницы

Обтекание текстом изображения

При создании HTML-документа, вы можете выбрать как используемое вами изображение будет расположено относительно текста, а именно:

в одну линию с текстом;
слева от текста;
справа от текста.

Для управления расположением изображения относительно текста используется аттрибут align. Этот атрибут может принимать значения: left - изображение выравнивается по левому полю, right - изображение выравнивается по правому полю, middle - посередине.

<p><img src="/images/renoire-monet.jpg" 
alt="Ренуар. Портрет Клода Моне."
width="160" height="202" align="left"> Этот текст будет находиться 
справа от изображения. Этот текст будет находиться 
справа от изображения. Этот текст будет находиться 
справа от изображения. Этот текст будет находиться 
справа от изображения. Этот текст будет находиться 
справа от изображения. Этот текст будет находиться 
справа от изображения. Этот текст будет находиться 
справа от изображения.</p>

Посмотрим, как это будет выглядеть:

Ренуар. Портрет Клода Моне Этот текст будет находиться справа от изображения. Этот текст будет находиться справа от изображения. Этот текст будет находиться справа от изображения. Этот текст будет находиться справа от изображения. Этот текст будет находиться справа от изображения. Этот текст будет находиться справа от изображения. Этот текст будет находиться справа от изображения.

Не кажется ли вам, что текст букально "наезжает" на изображение?
Для того, чтобы этого избежать можно задать пустые поля вокруг изображения. Поля создаются с помощью атрибутов vspase для верхнего и нижнего полей и hspase для боковых полей в теге<img>.

Теперь используем атрибут тега align="right"

<p><img src="images/renoire-monet.jpg" 
alt="Ренуар. Портрет Клода Моне"
width="32" height="21" align="right">Этот текст будет находиться 
слева от изображения. <BR clear=all></p>
Этот текст будет находиться 
слева от изображения.Этот текст будет находиться 
слева от изображения. Этот текст будет находиться 
слева от изображения.</p>

Вы заметили тег <BR> с новым атрибутом clear?
Этот атрибут отменяет возможность обтекания текстом графики. Возможные значения атрибута: none, left, right, all По умолчанию используется атрибут none.

Ренуар. Портрет Клода Моне Этот текст будет находиться слева от изображения.
Этот текст будет находиться слева от изображения. Этот текст будет находиться слева от изображения.Этот текст будет находиться слева от изображения.

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

Ренуар. Портрет Клода Моне Этот текст будет находиться на одной линии с серединой изображения.

Этот код HTML записан так:

<P class=example><IMG height=202 alt="Ренуар. Портрет Клода Моне" 
src="images/renoire-monet.jpg" width=160 align="middle" title="Ренуар. Портрет Моне."> 
Этот текст будет находиться на одной линии с серединой изображения.

Посмотрите внимательно на вышеприведенный код.
Здесь вы видете новый атрибут title. Он позволяет делать подпись к изображению, которая появляется в тот момент, когда пользователь подводит курсор к изображению. Попробовали?

Возврат в начало страницы Возврат на главную страницу сайта

Хостинг от uCoz