Тег Img для вставки изображений в HTML

Атрибут src должен содержать прямой или относительный путь к изображению:

<img src="/image.jpg" alt="" />
<!-- или -->
<img src="/seoportal.net/image.jpg" alt="" />

В качестве значения атрибута alt указывается альтернативный текст для изображения, отображаемый в случае проблем с отображением самой картинки. Если в альтернативном тексте нет необходимости, то следует оставлять пустое значение атрибута:

<img src="/image.jpg" alt="" />

О влиянии значения атрибута alt на релевантность изображений и текста читайте в материале по ссылке.

В качестве значения атрибута title указывается текст, отображаемый при наведении на картинку в качестве всплывающей подсказки:

<img src="/image.jpg" alt="" title="Всплывающая подсказка" />

На практике это будет выглядеть так (наведите курсор на изображение):

О влиянии значения атрибута title на релевантность изображений и текста читайте в соответствующем материале.

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

<img src="/image.jpg" width="100" height="100" alt="" />
<!-- или -->
<img src="/image.jpg" width="100px" height="100px" alt="" />
<!-- или -->
<img src="/image.jpg" width="100%" alt="" />

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

Для стилизации изображений на сайте, в том числе для указания их размеров можно применять CSS-свойства:

• width (ширина),
• height (высота)
• max-width (максимальная ширина),
• max-height (максимальная высота),
• min-width (минимальная ширина),
• min-height (минимальная высота).

Пример указания размера картинки с помощью CSS в HTML-коде:

<img src="/image.jpg" style="width:100px" alt="" />

Атрибут border должен содержать значение толщины границы вокруг изображения. Стиль и цвет границы определяется посредством CSS:

Атрибут align применяется для выравнивания картинки относительно текста и других строчных элементов:

Чтобы добавить картинку в HTML применяется тег img.

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

<table>
	<tr>
		<td>
		<img src="/image.jpg" alt="" />
		</td>
	</tr>
</table>

Для этого достаточно открыть необходимый HTML-файл в блокноте и в нужном месте прописать тег вставки изображения, в атрибуте src которого следует указать путь к файлу.

Чтобы применить изображение в качестве фона применяются CSS-свойства background и background-image. Тег <img> для таких целей применять не целесообразно.

Для этого необходимо разместить тег <img> в тег a:

<a href="/seoportal.net">
	<img src="/image.jpg" alt="" />
</a>

В результате в качестве анкора ссылки будет применено указанное изображение.

Чтобы выровнять изображение по центру веб-страницы применяются CSS-свойства.

Т. к. img является строчным HTML-элементом, можно прописать родительскому элементу изображения CSS-свойство text-align со значением center:

<p style="text-align:center">
	<img src="/image.jpg" alt="" />
</p>

Также можно переопределить свойства тега img, сделав его блочным с помощью CSS-свойства display со значением block. В результате к элементу изображения можно применить стандартный способ выравнивания блочных элементов по центру:

<img src="/image.jpg" alt="" style="display:block; margin: auto" />