Використання картинок в html-сторінці завжди більш інформативно і наочно, по-порівнянні з суцільним текстом.
- вирівнювання зображення по центру
- обтікання зображення текстом
- розміщення зображення в поле
Вирівнювання зображення по центру
Для вирівнювання зображення по центру колонки тексту, найпростіше тег <img> помістити в контейнер <p>, для якого ставиться атрибут align = »center». Якщо очікується часте використання картинок, то оптимальніше буде застосування CSS стилю для тега <p>. Як це реалізовано, дивіться в прикладі 1.
Приклад 1. Вирівнювання малюнка по центру
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <! 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.cimg {text-align: center; / * Вирівнювання по центру * /} </ style> </ head> <body> <p class = "cimg"> <img src = "images / sample.gif" width = "200" height = "100" alt = "Ілюстрація"> </ p> </ body> </ html><! 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.cimg {text-align: center; / * Вирівнювання по центру * /} </ style> </ head> <body> <p class = "cimg"> <img src = "images / sample.gif" width = "200" height = "100" alt = "Ілюстрація"> </ p> </ body> </ html>
В даному прикладі до контейнера <p> додаємо CSS-клас cimg, в якому прописується вирівнювання по центру рядка. Те, як це буде схематично виглядати - показано на малюнку 1.
Мал. 1. Малюнок в центрі колонки тексту
Обтікання зображення текстом
Обтікання зображення текстом - один з найбільш розповсюдженний способів верстки HTML-сторінок, який дозволяє ефективно використовувати весь вільний простір. популярних прийомів верстки веб-сторінок, коли зображення розташовується по краю вікна браузера, а текст обходить його з інших сторін (рис. 2). Для того щоб налаштувати обтікання зображення текстом можна використовувати кілька способів, заснованих як і на HTML так і на CSS.
Мал. 2. Малюнок вирівняний по лівому краю сторінки і обтекается текстом справа
Для того, щоб здійснити обтікання зображення текстом за допомогою HTML потрібно пам'ятати, що у тега <img> є атрибут align, який визначає вирівнювання зображення в документі і при цьому вказує спосіб обтікання зображення текстом. Для того, щоб зробити вирівнювання зображення по правому краю і задати обтікання зліва, потрібно використовувати align = "right", для вирівнювання по лівому краю і обтікання текстом справа використовуємо align = "left". Тут також корисно використовувати атрибути тега <img> - vspace і hspace, які вказують на якій відстані текст буде обтікати зображення по вертикалі і горизонталі. Без вказівки цих атрибутів текст буде впритул прилягати до зображення (приклад 2).
Приклад 2. Обтікання зображення текстом з використанням HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 <! 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><! 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>
Для того щоб налаштувати обтікання зображення за допомогою CSS стилів будемо керуватися правилом float. float: right - вирівнює зображення по правому краю документа і робить обтікання текстом зліва, а float: left робить вирівнює зображення по лівому краю документа і обтікання текстом праворуч від зображення (приклад 3).
Приклад 3. Обтікання зображення текстом з використанням CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <! 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.cimg {float: right; / * Обтікання картинки по лівому краю * / padding-left: 10px; / * Відступ зліва * / padding-bottom: 10px; / * Відступ знизу * /} </ style> </ head> <body> <p> <img src = "images / sample.gif" width = "100" height = "200" alt = "Ілюстрація" class = " cimg "> 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><! 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.cimg {float: right; / * Обтікання картинки по лівому краю * / padding-left: 10px; / * Відступ зліва * / padding-bottom: 10px; / * Відступ знизу * /} </ style> </ head> <body> <p> <img src = "images / sample.gif" width = "100" height = "200" alt = "Ілюстрація" class = " cimg "> 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> додається клас cimg, у якого встановлено вирівнювання по правому краю float: right, а обтікання картинки зліва і знизу задано властивостями padding-left: 10px і padding-bottom: 10px.
Зображення на поле
При такому форматі розміщення зображення в документі обтікання зображення відбувається тільки з одного боку. Даний спосіб розміщення нагадує двох колоночную структуру, де в одній колонці розміщується картинка, а в другій - текст.
При такій схемі зображення розташовується праворуч або ліворуч від тексту, причому його обтікання відбувається тільки з одного боку. Фактично це нагадує дві колонки, в одній з них знаходиться малюнок, а в інший текст (рисунок 3).
Мал. 3. Розміщення зображення в поле зліва від тексту
Я знаю два способи створити подібну структуру - за допомогою HTML-тегів <table> і за допомогою CSS-правила margin. Розглянемо ці два способи:
Таблиці: даний спосіб зручний тим, що легко і зрозуміло дозволяють організувати колоночную структуру за допомогою осередків. Даний спосіб є олдскульний і його застосування не особливо вітається в сучасному веб-дизайні. Вважається що цей спосіб надлишковий і складний в правці. Але всі новачки через нього проходять. Для такої структури нам буде потрібно таблиця з трьома колонками, в першій колонці буде саме зображення, у третій текст, а між ними ми вкажемо відступ - у другій колонці. Можна обійтися і двома колонками, а відступ вказати через CSS-стилі або за допомогою атрибута width тега (приклад 4).
Приклад 4. Розміщення зображення на поле за допомогою таблиць
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <! 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><! 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. Зображення на поле зліва від тексту
У прикладі 4 ширина зображення становить 90 пікселів, а ширина колонки, де він розташовується - 110 пікселів. Різниця між ними забезпечує нам потрібний відступ від тексту до картинки. Щоб атрибути таблиці cellspacing і cellpadding не втручалися в процес, їх значення краще обнулити. Зверніть увагу, що в осередках задається вирівнювання по висоті - vertical-align: top.
CSS-стилі: Даний приклад більш кращий і оптимальний. Тут нам потрібно два шари <div>, параметри яких ми вкажемо через CSS. В одному шарі буде знаходитися зображення, а в іншому текст. Як це працює, дивіться в прикладі 5:
Приклад 5. Розміщення зображення на поле з шарів і CSS-стилів
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <code> <! 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"> #pic {float: left; / * Обтікання картинки текстом * /} #text {margin-left: 110px; / * Відступ від лівого краю * /} </ style> </ head> <body> <div id = "pic"> <img src = "images / igels.png" width = "90" height = "78" alt = "Ви не повірите, але це їжачок"> </ div> <div id = "text"> Їжачки захищені від зовнішньої агресії колючим панциром, який рятує їх від тих, хто хоче поживитися смачним і ніжним м'ясом їжака. Але не варто вважати це тварина і абсолютно нешкідливим, все-таки це хижак. Так, він не харчується вовками і лисицями, але тільки тому, що поступається їм в розмірах. А ось закусити черв'ячком або навіть змією йому цілком під силу. </ Div> </ body> </ html> </ code><Code> <! 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"> #pic {float: left; / * Обтікання картинки текстом * /} #text {margin-left: 110px; / * Відступ від лівого краю * /} </ style> </ head> <body> <div id = "pic"> <img src = "images / igels.png" width = "90" height = "78" alt = "Ви не повірите, але це їжачок"> </ div> <div id = "text"> Їжачки захищені від зовнішньої агресії колючим панциром, який рятує їх від тих, хто хоче поживитися смачним і ніжним м'ясом їжака. Але не варто вважати це тварина і абсолютно нешкідливим, все-таки це хижак. Так, він не харчується вовками і лисицями, але тільки тому, що поступається їм в розмірах. А ось закусити черв'ячком або навіть змією йому цілком під силу. </ Div> </ body> </ html> </ code>
Властивість float: left для шару #pic потрібно, щоб задати примикання зображення до лівого краю документа, а верхній рядок тексту збігалася з верхнім рядком зображення. Без цієї властивості шар #text опускається вниз на висоту зображення. Також для шару #text вказуємо відступ зліва margin-left: 110px на відстань 110 пікселів, щоб там текст не налазить на зображення. Якщо зображення потрібно розмістити в правому полі, то вказуємо float: right для #pic і margin-right: 110px для #text.
PS: Згідно зі специфікацією HTML4 зображення повинні поміщатися всередині блочних елементів таких як div або p.
