Элемент <img> – размещает простое изображение на Web – странице.
Это элемент не имеет текстового содержимого или закрывающего тега, для использования которого требуется минимум один атрибут src. Атрибут src – содержит путь , указывающий на изображение , которое вы хотите встроить в странице, которая может быть абсолютной или относительной URL , так же, как атрибут – href , значения атрибутов в элементах.
Графика делает Web – страницу более насыщенной и привлекательной . Изображение помогают передать смысл содержания html – страницы , изображения имеют несколько графических форматов .
gif – Имеет 256 цветов , может поддерживать прозрачность и может содержать анимацию .
jpeg – При сжатии теряет качество фотографии , анимация и прозрачность не поддерживается .
png – хранит графику при сжатии без потерь . Поддерживает прозрачность .
Разместить изображение на Web – странице можно с помощью одинарного тега <img> , тег нужно размещать внутри блочных элементов , <p> или <div> и т.д .
Атрибуты тега <img>
src – URL – адрес файла графического изображения .
Всегда указывайте значения параметров width и height , так как это позволит Web - браузеру отформатировать Web - страницу до загрузки изображения . В противном случае загрузка каждого изображения приведет к необходимости произвести форматирование еще раз , что в свою очередь приведет к перемещению других элементов Web - страницы . В результате картинка в окне Web - браузера будет дергаться .
Выравнивание изображения
Свойство float:left – Выравнивает изображение по левому краю , а текст обтекает его с правой стороны :
<p><imgsrc="foto.png"style="float:left"width="225"height="225"alt="Текст подсказки">Изображение выравнивается по левому краю .</p>
Параметр background – позволяет задать фоновый рисунок для страницы , цвет следует указывать близкий к цвету фонового изображения .
<!doctype html><htmllang="ru">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1">
<title>Изображение в качестве фона</title>
<styletype="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>
<bodystyle="background: gray url(foto.gif) repeat">
<h1>Изображение в качестве фона</h1>
<p>Изображение выравненное по центру .</p>
</body>
</html>
