HTML Изображения

Элемент <img> – размещает простое изображение на Web – странице.

Это элемент не имеет текстового содержимого или закрывающего тега, для использования которого требуется минимум один атрибут src. Атрибут src – содержит путь, указывающий на изображение, которое вы хотите встроить в странице, которая может быть абсолютной или относительной URL, так же, как атрибут – href, значения атрибутов в элементах.

Графика делает Web – страницу более насыщенной и привлекательной. Изображение помогают передать смысл содержания html – страницы, изображения имеют несколько графических форматов.

gif – Имеет 256 цветов , может поддерживать прозрачность и может содержать анимацию.

jpeg – При сжатии теряет качество фотографии, анимация и прозрачность не поддерживается.

png – хранит графику при сжатии без потерь. Поддерживает прозрачность.

Разместить изображение на Web – странице можно с помощью одинарного тега <img>, тег нужно размещать внутри блочных элементов, <p> или <div> и т.д.

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

src – URL – адрес файла графического изображения.

<img src="foto.gif" alt="Текст подсказки">

<img src="http://www.mysite.ru/foto.gif" alt="Текст подсказки">

alt – При помощи этого атрибута на страницу будет выведен текст, если изображение не загрузилось на Web – страницу.

<img src="foto.gif" alt="Текст подсказки">

width – Ширина изображения в пикселях.

<img src="foto.gif" width="480" alt="Текст подсказки">

height – Высота изображения в пикселях .

<img src="foto.gif" width="480" height="60" alt="Текст подсказки">

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

Выравнивание изображения

Свойство float:left – Выравнивает изображение по левому краю, а текст обтекает его с правой стороны :

<p><img src="foto.png" style="float:left" width="225" height="225" alt="Текст подсказки">Изображение выравнивается по левому краю .</p>

Открыть пример в новом окне

Изображение выравнивается по левому краю

Свойство float:right – Изображение выравненное по правому краю текст обтекает с лева:

<p><img src="foto.png" style="float:right" width="225" height="225" alt="Текст подсказки">Изображение выравненное по правому краю .</p>

Открыть пример в новом окне

Изображение выравненное по правому краю

Свойство text-align:center – Изображение выравненное по центру:

<p style="text-align:center"><img src="foto.png" width="225" height="225" alt="Текст подсказки"></p>
<p>Изображение выравненное по центру .</p>

Открыть пример в новом окне

Изображение выравненное по центру

Изображение в качестве фона

Параметр background – позволяет задать фоновый рисунок для страницы, цвет следует указывать близкий к цвету фонового изображения.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Изображение в качестве фона</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
body {     /* Стиль для всего документа */
     font-size: 12pt;     /* Размер шрифта */
     font-family: "Verdana", sans-serif;    /* Название шрифта */
   }
h1 {
    color: blue;   /* Цвет шрифта */
}

  </style> 
  </head>
  <body style="background: gray url(foto.gif) repeat">
<h1>Изображение в качестве фона</h1>
 <p>Изображение выравненное по центру .</p> 
</body>
</html>

Открыть пример в новом окне

Изображение в качестве фона

Рекомендуемые материалы

Спецификации