Главная HTML Изображение HTML (картинка)

Изображение HTML (картинка)

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

<img src="адрес_графического_файла">
<img src="images/picture.jpg">

Атрибуты тега <img>

Атрибут Значение
src = URL
URL - адрес или имя файла изображения
width = "число"
Ширина изображения
height = "число"
Высота изображения
alt = "текст"
Альтернатавный текст, который будет появлятся вместо графического изображения в рехиме "отключения загрузки графики".
align Атрибут align тега <img> используется для выравнивания изображения относительно текста.

= absbottom
Выравнивание нижней границы изображения по нижней границе текущей строки.

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

= baseline
Выравнивание нижней границы изображения по базовой линии текущей строки.

= bottom
То же, что и baseline.

= top
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.

= texttop
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

= left
Изображение располагается у левого края окна;
текст и другие элементы обтекают изображение справа.

= right
Изображение располагается у правого края окна;
текст и другие элементы обтекают изображение слева.

Для прекращения выравнивания изображения, заданного с помощью align=left или align=right, относительно текста используют тег <br> перевода строки с атрибутом clear

Прекращение обтекания текстом изображений, выровненых по левому краю:
<br clear=left>

Прекращение обтекания текстом изображений, выровненых по правому краю:
<br clear=right>

Прекращение обтекания текстом изображений, выровненых либо по левому краю, либо по правому краю:
<br clear=all>

border = "число"
Толщина черной рамки вокруг изображения.
Если атрибут не указан, то рамка не отображается.
Если рисунок оформлен как ссылка, то для того, чтобы браузер (по умолчанию) не выделял рамку надо указать border=0
vspace = "число"
Размер верхнего и нижнего пустого поля вокруг изображения.
hspace = "число"
Размер пустого бокового поля вокруг изображения.

 

Обтекание картинки текстом в HTML

Обтекание картинки текстом справа
1 
<img src="http:picture.jpg" align="left" hspace="10" vspace="4">

Изображение без подписи снабжено атрибутом align="left" тега img, а чтобы обеспечить отступ от текста по горизонтали и вертикали на указанное число пикселей, используют числовые атрибуты hspace и vspace, соответственно.
<br clear=left>
Результат примера
1
тег img Изображение без подписи снабжено атрибутом align="left" тега img, а чтобы обеспечить отступ от текста по горизонтали и вертикали на указанное число пикселей, используют числовые атрибуты hspace и vspace, соответственно.
Обтекание картинки текстом слева
2 
<img src="http:picture.jpg" align="right" hspace="10" vspace="4"
style="text-align: justify">

Изображение без подписи снабжено атрибутом align="right" тега img, а чтобы обеспечить отступ от текста по горизонтали и вертикали на указанное число пикселей, используют числовые атрибуты hspace и vspace, соответственно.
<br clear=right>
Результат примера
2
тег img
Изображение без подписи снабжено атрибутом align="right" тега img, а чтобы обеспечить отступ от текста по горизонтали и вертикали на указанное число пикселей, используют числовые атрибуты hspace и vspace, соответственно.

 

Как добавить подпись под картинкой?

Для изображения с подписью надо заключить картинку и ее подпись в блок <div>

3

тег img
Сочи-2014
Снежный барс - талисман XXII зимних Олимпийских игр 2014 года в Сочи.
Впервые в истории олимпийского движения талисман выбран всенародным голосованием. Во время телевизионного шоу «Талисмания», которое прошло в прямом эфире Первого канала жители страны выбрали талисманы зимних Олимпийских и Паралимпийских Игр 2014. 

<div style="float: left; padding-right:20px;">               
  <div style="border: 1px solid #c0c0c0; padding:5px;"> 
    <img src="picture.jpg"> Подпись к картинке  
  </div>
</div>
<div> текст ... </div>