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

В данной статье рассмотрим, как вставить картинку в HTML.

Вставить картинку в материалы Joomla можно с помощью редактора, но если вы изучаете HTML, надеюсь, эта статья вам будет полезна.

Вначале давайте рассмотрим форматы графических файлов, которые можно использовать для оформления веб-страниц. Это файлы в формате PNG, GIF и JPEG/JPG. Если говорить о преимуществе какого-либо формата для сайта, то конечно, нужно соотносить три критерия – качество, размер, возможности.

Например JPEG картинка меньше весит, чем картинка GIF того же размера, но зато в GIF присутствует поддержка мультипликации и прозрачной графики, чего нет в JPEG. Формат PNG-8 весит гораздо меньше, чем GIF, но при этом тоже поддерживает прозрачность. Вот потому для меня он предпочтительней, чем другие и чаще всего для оформления веб-страниц я использую изображения в формате PNG-8.

 

Вставляем картинку в HTML

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

1. Для вывода изображения в HTML используется тег <img>. Атрибут <src> данного тега - задает путь к картинке.

<img src="/Путь к картинке" >

 

2. Обязательный атрибут <alt> тега <img> служит для описания картинки – это альтернативный текст, который выводится в браузере вместо изображения, если картинка не загрузилась или показ изображений в браузере отключен пользователем.

<img src="/Путь к картинке" alt="Описание картинки" >

 

3. Универсальный атрибут <border> определяет стиль, цвет и толщину границы элемента. Для того чтобы вокруг изображения не появилась рамка, сразу установим нулевое значение.

<img src="/Путь к картинке" alt="Описание картинки" border="0" >

 

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

 

Пример:

В HTML4, HTML5

<img src="/images/joomla/26.gif" alt="Установка Joomla" border="0" align="left">

В XHTML

<img src="/images/joomla/26.gif" alt="Установка Joomla" border="0" align="left" />

 

Дополнительно можно использовать такие атрибуты как align – выравнивание картинки, width – ширина картинки, height – высота картинки и др.

Однако, для оформления стилей картинок, вставленных в статью, лучше использовать CSS, в частности – стилевые классы.

 

В CSS, для стилизации изображений, чаще всего используются следующие свойства:

float - выравнивает изображение, прижимая его к левому или правому краю веб-страницы, с обтеканием его другими элементами по свободной стороне;   

border – определяет границ изображения: цвета, стиля, толщины линий каждой из сторон изображения;  

padding – устанавливает значение полей вокруг содержимого элемента (часто используется для обрамления картинок с целью отделения их друг от друга).

margin – устанавливает величину отступа от каждого края элемента (добавляет отступ картинке от текста).

 

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