У цій статті розглянемо, як вставити картинку в HTML.
Наприклад JPEG картинка менше важить, ніж картинка GIF того ж розміру, але зате в GIF є підтримка мультиплікації і прозорою графіки, чого немає в JPEG. Формат PNG-8 важить набагато менше, ніж GIF, але при цьому теж підтримує прозорість. Ось тому для мене він краще, ніж інші і найчастіше для оформлення веб-сторінок я використовую зображення у форматі PNG-8.
Вставляємо картинку в HTML
Для того, щоб вставити картинку в статтю, спочатку потрібно цю картинку завантажити в папку для зображень на сервері. Тепер розглянемо, які теги і атрибути служать для виведення картинки на веб-сторінку.
1. Для виведення зображення в HTML використовується тег . Атрибут
2. Обов'язковий атрибут служить для опису картинки - це альтернативний текст, який виводиться в браузері замість зображення, якщо картинка не завантажилася або показ зображень в браузері відключений користувачем.
3. Універсальний атрибут
Додатково можна використовувати такі атрибути як align - вирівнювання картинки, width - ширина картинки, height - висота картинки і ін.
Однак, для оформлення стилів картинок, вставлених до статті, краще використовувати CSS, зокрема - стильові класи.
В CSS, для стилізації зображень, найчастіше використовуються наступні властивості:
float - вирівнює зображення, притискаючи його до лівого або правого краю веб-сторінки, з обтіканням його іншими елементами по вільному боці;
border - визначає меж зображення: кольору, стилю, товщини ліній кожної зі сторін зображення;
padding - встановлює значення полів навколо вмісту елементу (часто використовується для обрамлення картинок з метою відокремлення їх один від одного).
margin - встановлює величину відступу від кожного краю елемента (додає відступ зображенні від тексту).