Опубликовано: 2016-01-27 Дополнено: 2017-05-25

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

Просмотров Комментариев 2

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

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

  img

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

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

кот на кровати img

Синтаксис:

Синтаксис для 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

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

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

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

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

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

 

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

кот на кровати img

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

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" />

кот на кровати img

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

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

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

кот на кровати img

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

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

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

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

кот на кровати img

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

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

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

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

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

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

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

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

Комментарии ()

  1. 1krasavthik1 10 февраля 2016, 16:56 # 0
    спасибо создателю темы.совсем недавно столкнулся с проблемой как вставить картинку на веб сайт.облазал кучу форумов, но толком понять ничего не смог.случайно наткнулся на эту статью в интернете.к моему удивлению все было доступно и понятно разъяснено.(сам чайник в этих делах).прочитал статью и вуаля, все встало как надо. 5+. так же не могу не отметить еще полезные статьи на вашем сайте.
    1. Игорь Николаевич 06 апреля 2016, 08:33 # 0
      Не все форумы разрешают использовать атрибуты для этого тэга. В итоге приходится иной раз сохранять где-нибудь изображения в трёх-четырёх размерах и ставить разные ссылки на маленькие и большие картинки.