Наявність зображень на веб-сторінках покращує їх зовнішній вигляд, привертає увагу, а також сприяє кращому сприйняттю текстів. Обтікання картинки текстом html дозволяє зв`язати контент з ілюстраціями і раціонально розмістити матеріал. Постійно розробляються нові способи створення зображень, що дозволяють втілювати творчі ідеї. При цьому нові стилі макетів засновані на одних і тих же способах, що створюють безмежний простір фантазії.
Позиціонування картинок щодо тексту може проводитися в html або за допомогою властивостей CSS.
Теги html: обтікання картинки текстом
Картинки розташовують на сторінці трьома способами:
- центральне положення;
- обтікання текстом;
- вставка в поле.
При великому розмірі картинку розташовують посередині сторінки, спочатку помістивши в контейнер lt; p> тега img, після чого для нього встановлюють атрибут align = "center". Якщо часто використовують зображення, слід застосовувати стиль CSS до тегу lt; p>.
Коли зображення невелике, поруч мають текст. Спосіб є найбільш поширеним. Обтікання текстом роблять декількома способами. Але спочатку картинку потрібно вивести на екран. Якщо до неї відомий шлях, наприклад, "foto1.jpg", її вставляють на html сторінку за допомогою наступної записи:
lt; p> lt; img src = "foto1.jpg"> lt; / P>
Приклад відповідає випадку, коли файли html і малюнка знаходяться в одній папці.
Якщо за зображенням слід текст, він буде розташовуватися нижче. Це не завжди зручно, оскільки з боків будуть залишатися порожні місця, Тому сторінку оформляють так, щоб створити обтікання картинки текстом html. Для цього у тега img існує атрибут align, що задає розташування фото або малюнка щодо тексту. Від цього параметра залежить, з якого краю сторінки розташовується графічний матеріал і яким чином його обтікає текст. 
Атрибуту можна задавати такі значення:
- left - переміщення картинки вліво при обтіканні текстом справа;
- right - обтікання зображення зліва при його розміщенні справа;
- bottom - значення за замовчуванням, коли картинка розташовується зліва, перший рядок тексту починається на рівні нижньої її частини;
- top - зображення розміщується аналогічно попередньому значенню, але перший рядок розташована по його верхньому рівню;
- middle - початкова рядок тексту проходить навпроти середини зображення.
У тега img є параметри, якими можна задавати відстань від тексту до картинки (hspace і vspace). Без їх застосування текст буде розташовуватися до картинки впритул. Крім того, вибираються габаритні розміри малюнка width і height. При цьому повинна дотримуватися пропорція між шириною і висотою. Якщо габарити не ставити, за замовчуванням малюнок переноситься з розмірами исходника, що не завжди зручно.
Переміщення зображення до лівого краю з його обтіканням текстом можна зробити за допомогою запису:
lt; p> lt; img src = "foto1.jpg" align = "left" width = 150 height = 100 hspace = 5 vspace = 5> Текстlt; / P>
застосування таблиць
Обтікання картинки текстом html легко робити за допомогою таблиці, всередині осередки якої міститься зображення. Тут властивість align застосовується для тега table. Таблиці мають більше керованих параметрів, що створює для них переваги:
lt; table width = 170 height = 120 border = 0 align = left cellpadding = 0 cellspacing = 0>
lt; img src = "foto2.jpg" width = 150 height = 100>
lt; / Table>
Кордон таблиці робиться невидимої і не дозволяє тексту наблизитися до зображення. Відступи між осередками і всередині них можуть регулюватися.
Використання стилів
З попередніх прикладів видно, як просто зробити обтікання картинки текстом html. CSS дозволяє досягти аналогічних результатів. Обтікання створюють за допомогою властивості float. Тут також вирівнювання забезпечується значеннями left і right.
Для цього створюється клас і йому присвоюються стилі CSS:
lt; style>
.fotoleft {
float: left;
margin: 5px 12px 3px 0px;
}
lt; / Style>
Потім стильова властивість float додається до селектора img:
lt; img src = "foto1.jpg" class = "fotoleft">
Крім вирівнювання зображення за допомогою значення left, тут також встановлюються відступи тексту від картинки властивістю margin. Аналогічно робиться обтікання тексту зліва, якщо застосувати властивість right.
Стилі дозволяють накладати текст безпосередньо на зображення. Для цього текст вставляється в блок з напівпрозорим фоном, який накладається на картинку.
Робити ефектне обтікання текстом і його накладання на зображення не так уже й важко, оскільки цього домагаються послідовними експериментами.
Обтікання зображень округлої форми текстом html
Веб-сторінки складаються переважно з прямокутних областей. Всім відомо, як зробити обтікання картинки текстом в html. Стилі застосовують для створення геометричних фігур, але вони не пов`язані з укладанням контенту всередині або зовні елементів. Можна малюнок розділити на 2 частини і розмістити по обидва боки блоки відступів різної ширини. За ними відразу розташовується текст.
Процес створення подібного обтікання є трудомістким, і його треба робити окремо для кожного нового малюнка.
Обтікання текстом складних фігур
Шляхом розробки нової специфікації CSS Shapes вдалося вплинути на існуючий дизайн і надати йому нові перспективи. Тепер контент може обтікати складні фігури і криволінійні області.
Специфікація підтримується браузером Chrome Canary, і зараз намагаються реалізувати її на інших. Вона дозволяє створювати складні конструкції без допомоги редакторів графіки.
Обтікання круглої картинки текстом html забезпечується за допомогою наступної записи:
#circle
{
shape-outside: circle (-300px, -300px, 300px) - / * (x, y, radius) * /
float: left;
}
lt; p> Приклад текстаlt; / P>
Код створює коло, ідеально обтічний текстом.
Аналогічно буде створюватися будь-яка неправильна форма, завдяки підтримці Photoshop, який дозволить отримати CSS код фігури.
висновок
При побудові макетів сторінок із застосуванням різних способів розміщення на них зображень і тексту можна створювати унікальний дизайн. Для цього необхідно освоїти основні правила верстки, що забезпечують обтікання картинки текстом html.
