www.kaminskiy-web.com | contact@kaminskiy-web.com
Статьи для веб-мастера - Kaminskiy-web

Главная страницаОбо мнеКонтактная информация
Статьи HTML и CSS JavaScript PHP и MySQL Раскрутка сайтов Хостинг Рейтинг украинского хостинга Анекдоты Анекдотов стрит

Картинка в HTML – все о теге IMG

Автор статьи: Сергей Каминский

Сейчас почти ни один сайт не обходится без использования картинок в HTML-страницах, ведь как гласит народная мудрость: «Лучше один раз увидеть, чем сто раз услышать». Прочитав данную статью вы узнаете как использовать тег IMG, с помощью которого добавляются изображения на страницы сайта. Мы будем рассматривать примеры для HTML 5, но они будут работать в том числе для более ранних версий языка гипертекстовой разметки.

Как вставить картинку в HTML-страницу

Для вставки картинки в страницу используется HTML-тег IMG. Для изображения должно быть указано как минимум два атрибута src (путь к файлу с картинкой) и alt (альтернативный текст, который видит пользователь если изображение не загрузилось). Атрибут alt может быть пустым, но должен присутствовать обязательно. Также можно задать атрибут title и тогда при наведении курсора на изображение будет отображаться заданный в данном атрибуте текст.

Если файл с изображением находится в той же папке что и страница, на которую оно загружается, то в атрибуте src можно указать только имя файла, например:

<img src="logo.jpg" alt="Альтернативный текст" title="Текст при наведении курсора" />

Если страница находится по адресу http://www.kaminskiy-web.com/page.html, а изображение http://www.kaminskiy-web.com/images/logo.jpg, то тогда путь к изображению указывается таким образом:

<img src="images/logo.jpg" alt="Альтернативный текст" title="Текст при наведении курсора" />

Если страница находится в папке http://www.kaminskiy-web.com/html/, а картинка находится по адресу http://www.kaminskiy-web.com/logo.jpg, то путь будет таким:

<img src="../logo.jpg" alt="Альтернативный текст" title="Текст при наведении курсора" />

Если картинка находится в папке http://www.kaminskiy-web.com/images/, то независимо от того в какой папке находится страница на том же сайте, в которую вставляется изображение, путь к файлу можно указать следующим образом:

<img src="/images/logo.jpg" alt="Альтернативный текст" 
title="Текст при наведении курсора" />

Либо можно указать полный путь к файлу картинки, если он расположен на другом сайте:

<img src="http://www.kaminskiy-web.com/images/logo.jpg" 
alt="Альтернативный текст" title="Текст при наведении курсора" />

Ширина (width) и высота (height) изображения

В более ранних версиях HTML высота и ширина задавались с помощью атрибутов width и height, но сейчас все что влияет на отображение картинки задается с помощью CSS в атрибуте style. Чаще всего ширина и высота задаются в пикселях:

<img src="/images/logo.jpg" alt="Альтернативный текст" 
style="width: 200px; height: 100px;" />

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

Также ширину и высоту можно указывать в % от ширины или высоты окна браузера или какого-либо блочного элемента, внутри которого находится изображение:

<img src="/images/logo.jpg" alt="Альтернативный текст" style="width: 50%;" />

Обтекание картинки в тексте и отступы

По-умолчанию текст отображается под изображением. Для того чтобы текст обтекал картинку используется CSS свойство float, которое заменяет атрибут align. Если мы хотим чтобы картинка была слева от текста, а текст обтекал ее справа и снизу, то тогда задается значение left для CSS свойства float, а если картинка должна быть справа, то тогда указывается значение right:

<p><img src="/images/logo.jpg" alt="Альтернативный текст" 
style="width: 200px; height: 100px; float: left;" />Здесь идет текст параграфа</p>

Картинка в HTML – все о теге IMG

Также можно задать отступы сверху, справа, снизу и слева от картинки:

<img src="/images/logo.jpg" alt="Альтернативный текст" 
style="float: left; margin-top: 10px; margin-right: 8px; 
margin-bottom: 5px; margin-left: 7px;" />

То же самое можно задать в сокращенной форме:

<img src="/images/logo.jpg" alt="Альтернативный текст" 
style="float: left; margin: 10px 8px 5px 7px;" />

Либо можно задать отступы по вертикали и по горизонтали двумя значениями свойства margin вместо устаревших атрибутов vspace и hspace. Допустим нам нужно чтобы сверху и снизу был отступ 10 пикселей, а слева и справа 8 пикселей:

<img src="/images/logo.jpg" alt="Альтернативный текст" 
style="float: left; margin: 10px 8px;" />

Как сделать картинку ссылкой на страницу

Для того чтобы сделать картинку ссылкой ее нужно просто поместить внутри ссылки, то-есть внутри тега <a>...</a>, при этом вокруг изображения появится рамка, чтобы ее убрать устанавливаем значение для рамки 0px:

<a href="http://www.kaminskiy-web.com/"><img src="/images/logo.jpg" 
alt="Альтернативный текст" style="border: 0px;" /></a>

Либо мы можем задать свои цвет, тип и толщину рамки картинки:

<a href="http://www.kaminskiy-web.com/"><img src="/images/logo.jpg" 
alt="Альтернативный текст" style="border: solid 1px #df0000;" /></a>

Форматы изображений для веб

Обычно на веб-сайтах используется несколько форматов изображений. Для фотографий используется формат JPEG, если же нужно чтобы изображение было с прозрачным фоном, то используется формат PNG. Ранее вместо формата PNG использовался GIF, но он уже устарел – единственным его преимуществом является возможность создания анимированных изображений. Обычно PNG и GIF используются только как элементы дизайна, да и то в случаях когда нужно чтобы у изображения были прозрачные участки или оно должно быть полупрозрачным. Так как файлы в этих форматах получаются очень большими по размеру, то их не рекомендуется использовать для обычных фотографий – для этого есть формат JPEG. Перед загрузкой изображений на сайт стоит уменьшить их по ширине и высоте до того размера в котором они будут выводиться на сайте, чтобы они загружались быстрее у пользователей.

Другие записи по теме в разделе статьи по HTML и CSS

Копирование статьи запрещено.