Учимся пользоваться HTML тегом img

В этой статье вы найдете информацию, которая поможет Вам ознакомиться с html-тегом IMG.

IMG или img - это универсальный html-тег, который используется для вставки графических элементов на страницах web-сайтов. Формат этих картинок может быть различным, но чаще всего используются jpg, jpeg, png, gif.

Внутри тега обязательно присутствует атрибут SRC, который указывает на расположение файла (адрес файла на сервере).

<img src="http://www.radikal.kz/images_news/2015/06/09/Animals18.jpg">

Синтаксис:

Синтаксис для HTML <img src="/images_news/Animals18s.jpg" alt="необходимый альтернативный текст">

Синтаксис для XHML <img src="/images_news/Animals18s.jpg" alt="необходимый альтернативный текст" />

Как вставить ссылку с картинки?

Часто картинки на сайтах используются в качестве ссылок, для этого применяют конструкцию <a> </a>, внутрь которого помещается тег картинки img. Атрибут href задает адрес ссылки.

<a href="/novosti/НУЖНАЯ ССЫЛКА"><img src="/images_news/Animals18s.jpg" /></a>

Атрибуты применимые для <img>

Выравнивание изображения в тексте.

align - от него зависит выравнивание рисунка на странице, а также его положение относительно окружающего текста.

Доступные варианты:

• left - по левому краю,
• center - по центру,
• right - по правому краю,
• justify - по левому и правому краю.

<img src="/news/images_news/Animals18s.jpg" align="center" />

Указать альтернативный текст картинки.

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

<img src="/images_news/Animals18s.jpg" alt="КОТ на КРОВАТИ" />

Указать путь к файлу картинки.

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

<img src="/images_news/Animals18s.jpg" />

Задать толщину рамки вокруг картинки.

border - определяет толщину рамки в пикселях вокруг изображения.

<img src="/images_news/Animals18s.jpg" border="3" align="center" />

Как задать высоту и ширину изображения?

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

<img src="/images_news/Animals18s.jpg" height="95" align="center" />

width - ширина изображения, аналогичен атрибуту height.

Как указать CSS стиль для картинки?

style - с помощью этого атрибута можно указать любой CSS стиль для картинки, например тень, отступы, размер и прочие.

<img src="/images_news/Animals18s.jpg" style="box-shadow: 0 2px 10px 1px #7D7A7A;" align="center">

Редко используемые атрибуты:

longdesc - указываем url к файлу с аннотацией к картинке.

lowsrc - используется если необходимо указать, где находится изображения низкого качества.

ismap - определяет картинку как карту-изображение.

usemap - указываем координаты для карты-изображения.

hspace - горизонтальный отступ (устаревший, поддерживается старыми версиями браузеров)

vspace - вертикальный отступ (устаревший, поддерживается старыми версиями браузеров)

Если Вам понравилась эта статья и вы интересуетесь всем, что касается разработки web-сайтов, то Вас точно заинтересует посещение сайта http://web-program.su/