Как вставить картинку в 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 – устанавливает величину отступа от каждого края элемента (добавляет отступ картинке от текста).