Зображення в тексті

Влад Мержевич

Ілюстрації завжди використовувалися для наочного подання потрібної інформації читачеві, для оформлення сторінок сайту та включення в текст різноманітних графіків, діаграм та схем. Загалом, область використання зображень на сайтах досить велика. При цьому існує кілька способів додавання малюнків до тексту веб-сторінки, які далі розглянемо.

Малюнок по центру

Для вирівнювання зображення по центру колонки тексту, тег <img> поміщається в контейнер <p>, для якого встановлюється атрибут align="center". Проте, якщо передбачається активне використання ілюстрацій, то краще створити новий стильовий клас, назвемо його fig, і застосуємо його до потрібних абзаців, як показано в прикладі 1.

Приклад 1. Вирівнювання зображення по центру

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Малюнок по центру</title>
  <style type="text/css">
   P.fig {
    text-align: center; /* Вирівнювання по центру */
   }
  </style>
 </head>
 <body> 
  <p class="fig">
   <img src="images/sample.gif" width="200" height="100" alt="Ілюстрація">
  </p>
 </body>
</html>

У цьому прикладі клас fig додається до селектору P, а спосіб вирівнювання визначається властивістю text-align. Положення зображення відносно тексту схематично показано на рис. 1.

Обтікання зображення текстом

Обтікання зображення текстом - один з популярних прийомів верстки веб-сторінок, коли зображення розміщується по краю вікна браузера, а текст обходить його з інших сторін (рис. 2). Для створення обтікання зображення текстом існує кілька способів, пов'язаних як з можливістю тегів HTML, так і з використанням стилів.

Так, у тега <img> є атрибут align, який визначає вирівнювання зображення. Цей атрибут задає, біля якого краю вікна буде розміщуватися малюнок, одночасно встановлюючи і спосіб обтікання тексту. Для вирівнювання зображення по правому краю і встановлення обтікання зліва, використовують значення right, для вирівнювання по лівому краю застосовують left. Атрибут align часто використовують у сполученні з іншими атрибутами тега <img> - vspace і hspace. Вони визначають відстань від обтіканого тексту до зображення. Без цих атрибутів зображення і текст будуть занадто тісно прилягати один до одного (приклад 2).

Приклад 2. Використання властивостей тега <img>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Зображення в тексті</title>
 </head>
 <body> 
  <p><img src="images/sample.gif" width="100" height="200" 
  alt="Ілюстрація" align="left" 
  vspace="5" hspace="5">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

Горизонтальний відступ від картинки до тексту керується атрибутом hspace, він додає порожній простір одночасно зліва і справа від зображення. Тому в даному прикладі малюнок не прилягає до краю вікна, а відстоїть від нього на величину, зазначену значенням hspace.

Для обтікання зображення текстом також можна застосувати стилеве властивість float. Значення right буде вирівнювати зображення по правому краю вікна браузера, а текст змушує обтікати зображення зліва (приклад 3). Значення left, навпаки, вирівнює зображення по лівому краю, а текст - справа від зображення.

Приклад 3. Використання стилів 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Зображення в тексті</title>
  <style type="text/css">
   IMG.fig {
    float: right; /* Обтікання зображення по лівому краю */
    padding-left: 10px; /* Відступ зліва */
    padding-bottom: 10px; /* Відступ знизу */
   }
  </style>
 </head>
 <body> 
  <p><img src="images/sample.gif" width="100" height="200" 
  alt="Ілюстрація" class="fig">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

У цьому прикладі до тегу <img> додається клас fig, для якого встановлено вирівнювання по правому краю і, відповідно, обтікання зображення зліва. Щоб текст не прилягав тісно до зображення, використовуються властивості padding-left та padding-bottom.

Малюнок на полі

За такої схеми зображення розміщується праворуч або ліворуч від тексту, при цьому його обтікання відбувається лише з одного боку. Фактично це нагадує дві колонки, в одній з них знаходиться малюнок, а в іншій текст (рис. 3).

Існує кілька методів досягнення подібного результату. Розглянемо два з них - використання таблиці та застосування стилевої властивості margin.

Використання таблиць

Таблиці зручні тим, що дозволяють легко створити структуру колонок за допомогою комірок. Знадобиться таблиця з трьома комірками, в одній буде розміщуватися зображення, в другій текст, а третя потрібна, щоб створити відступ між ними. Можна також обійтися і двома комірками, а потрібну відстань задати через стилі або за допомогою атрибута width тега <td>. У прикладі 4 показано створення зазначеної таблиці.

Приклад 4. Створення малюнка на полі за допомогою таблиць

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Малюнок на полі</title>
  <style type="text/css">
   TD.leftcol {
    width: 110px; /* Ширина лівої колонки з малюнком */
    vertical-align: top; /* Вирівнювання по верхньому краю */
   }
  </style>
 </head>
 <body>
  <table width="100%" cellspacing="0" cellpadding="0">
   <tr> 
    <td class="leftcol"><img src="images/igels.png" 
    width="90" height="78" alt="Ви не повірите, але це їжак"></td>
    <td valign="top">Їжаки захищені від зовнішньої агресії колючим панцирем, який врятує їх від тих, хто хоче поїсти смачним і ніжним м'ясом їжака. Але не варто вважати це твариною абсолютно беззахисною, все-таки це хижак. Так, він не харчується вовками і лисицями, але тільки через те, що по розмірах поступається їм. А от закусити черв'ячком або навіть змією йому цілком по силам.</td>
   </tr>
  </table>
 </body>
</html>

Результат прикладу показано на рис. 4.

Зображення ліворуч від тексту

Рис. 4. Зображення ліворуч від тексту

У даному прикладі ширина зображення складає 90 пікселів, а ширина колонки, де воно розміщується - 110 пікселів. Різниця між ними забезпечує потрібну відстань від тексту до картинки. Щоб атрибути таблиці cellspacing та cellpadding не втручалися у процес, їх значення краще обнулити. Зверніть увагу, що в комірках задається вирівнювання по висоті.

Використання стилів

У цьому випадку знадобиться дв

Часті запитання