W e b - м а с т е р у: 
  В с е   о   х о с т и н г е: 
  Р е к о м е н д у е м: 
  Р е к л а м а: 





  Р е к л а м а: 











  Главная > Уроки по HTML в примерах > Изображения в HTML документе

Google   
 


Профессиональный хостинг от REG.RU - от 99 рублей за месяц!!!
  • 10 Гб дискового пространства
  • Бесплатный трафик
  • До 30 размещенных сайтов на одном хостинге
  • Неограниченное количество почтовых ящиков и многое другое!

>> Смотреть подробнее






Изображения в HTML документе

Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):

<IMG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">

Элемент IMG
Используется для вставки в тело документа графического изображения. Под графическим изображением подразумевают: схемы, рисунки, графические объекты и карты изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Последние версии браузеров позволяют также использовать формат PNG, но до тех пор пока они не устареют от применения PNG лучше воздержаться.
Элемент IMG не имеет конечного тэга.

Имеет атрибуты:

Атрибут: Src
Этот атрибут является обязательным параметром. Указывает адрес (URL-адрес) графического файла с расширением (поддерживаются *.jpg, *.gif, *.png).

Записывается так:

<img src="http://site.ru/images/kartinka.gif">

Атрибут: Width
Определяет ширину изображения в пикселях.

Записывается так:

<img src="http://site.ru/images/kartinka.gif" width="150">

Атрибут: Height
Определяет высоту изображения в пикселях.

Записывается так:

<img src="http://site.ru/images/kartinka.gif" Height="130">

Важно! Обязательно задавайте значения параметров "width" и "heght", резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это просто отвратительно смотрится.


Атрибут: Hspace
Определяет отступ картинки (в пикселах) по горизонтали от других объектов документа. Просто необходим при обтекании изображения текстом.

Записывается так:

<img src="http://site.ru/images/kartinka.gif" hspace="30">

Атрибут: Vspace
Определяет отступ картинки (в пикселах) по вертикали от других объектов документа. Так же необходим при обтекании изображения текстом.

Записывается так:

<img src="http://site.ru/images/kartinka.gif" Vspace="20">

Здесь можно посмотреть примеры применения этих атрибутов.

Важно! Указывайте значения параметров Hspace и Vspace, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.

Атрибут: Align
Обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

left
Выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.

right
Выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.

top и texttop
Выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

middle
Выравнивает базовую линию текущей текстовой строки с центром изображения.

absmiddle
Выравнивает центр текущей текстовой строки с центром изображения.

bottom и baseline
Выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.

absbottom
Выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

Записывается так:

<img src="http://site.ru/images/kartinka.gif" align="left">

Здесь можно посмотреть действие всех значений атрибута "Align" элемента <Img>.

Атрибут: Name
Определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.
Для обычного изображения, не связанного ни с чем, этот параметр совсем не обязательный.

Записывается так:

<img src="http://site.ru/images/kartinka.gif" name="risunok">


Атрибут: Alt
Это сообщение, которое выводится вместо картинки, если браузер по какой либо причине не смог отобразить изображение (не найдена или пользователь настроил свой Обозреватель так, что тот не показывает картинки). Кроме того, вы увидите этот текст в виде подсказки, когда курсор мыши находится на рисунке.

Записывается так:

<img src="http://site.ru/images/kartinka.gif" alt="Это сообщение, которое выводится вместо картинки">


Атрибут: Border
Определяет ширину рамки вокруг изображения в пикселах. Если этот атрибут не указан в теге <Img> рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение Border обычно указывают равным нулю.

Записывается так:

<img src="http://site.ru/images/kartinka.gif" border="2">


Атрибут: Lowsrc
Указывает адрес (URL) графического файла с расширением с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

Записывается так:

<img lowsrc="http://site.ru/images/mini.gif" src="http://site.ru/images/ kartinka.gif">





[Рекомендовать другу]  [Содержание  


Вывоз мусора в Уфе на автомобилях ГАЗель, Услуги грузчиков, Утилизация старой мебели


Щелкните здесь, чтобы узнать, как повысить тИЦ и Page Rank Вашего сайта. Бесплатно!

© Rusws™ 2007-2012. Разработка и техническая поддержка: RUSWS.RU
Хостинг от SpaceWeb

Перепечатка любых материалов с портала www.rusws.ru только с письменного разрешения администрации и с размещением ссылки на портал!

Техническая поддержка: rusws[собака]mail.ru
Rambler's Top100