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

Категория: Технические советы

– Автор: Игорь (Администратор)

В рамках данной статьи, я расскажу вам как вставить в html картинку, а так же некоторые особенности.

Язык html поддерживает много различных тегов, поэтому нет ничего удивительного в том, что далеко не все сразу понимают как можно вставить изображение. А делается это все очень просто - используется специальный тег IMG. Адрес к картинке задается в атрибуте src, который является обязательным для этого тега.

Важно знать, что в качестве картинок поддерживаются только файлы с форматом png, jpg и gif. Если же у вас картинка другого формата, то перед использованием ее необходимо преобразовать с помощью любого графического редактора. В принципе, это касается практически любого изображения в вебе.

Вот пример вставки самой простой картинки:

<img src="http://site.ru/catalog/image.png" />

Вот такой код можно вставлять в любое место html и там отобразиться картинка в исходном размере, если конечно не применяются стили CSS или же не выставлены другие атрибуты тега IMG. Важно знать, что сегодня в конце не обязательно ставить именно "/>", так как многие браузеры легко интерпретируют и обычное ">". Однако, вариант со слешом более предпочтительней (так, например, это требуется в xhtml).

Основные атрибуты тега и их назначение:

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

2. title - как и у других тегов, данный атрибут позволяет выводить небольшую подсказку в случае, если навести курсор мыши на тег (в данном случае на картинку).

3. width и height -данные атрибуты позволяют указывать размер картинки по ширине и высоте. Важно знать, что можно указывать и процент, а не только количество пикселей. Так же, если задан только один атрибут, картинка уменьшается пропорционально по другой оси. Например, если картинка была 100 на 100, а в атрибуте width указать 20, то картинка отобразиться размером 20 на 20, если же задать в width 20, а в height 40, то картинка отобразиться размером 20 на 40.

4. border - здесь задается толщина рамки картинки. Если не задано, то рамки не будет.

5. align - установка данного атрибута указывает выравнивание картинки (left, center, right)

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

Теперь, вы знаете как вставляются изображения в html, а так же атрибуты и особенности.