Як обернути текст навколо зображення

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

Додати текст та зображення на веб-сайти дуже просто. Текст додається стандартними тегами HTML, такими як абзаци, заголовки та списки, а зображення розміщуються на сторінці з елементом < img >. Однак після того, як ви додали зображення на свою веб-сторінку, ви можете захотіти, щоб текст розташовувався поруч із зображенням, а не вирівнювався під ним (це спосіб, який використовується за замовчуванням для зображення, що додається до коду HTML, у переглядачі). Технічно, ви можете досягти цього двома способами: за допомогою CSS (рекомендується) або шляхом додавання візуальних інструкцій безпосередньо в HTML (не рекомендується, оскільки ви хочете зберегти поділ стилю і структури для вашого сайта).

Використання CSS

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

1. Спочатку додайте своє зображення на свою веб-сторінку. Не забудьте виключити будь-які візуальні характеристики (такі як значення ширини і висоти) з цього HTML. Це важливо, особливо для адаптивного веб-сайту, розмір якого залежить від браузера. Певне програмне забезпечення, наприклад Adobe Dreamweaver, буде додавати інформацію про ширину та висоту до зображень, що вставляються за допомогою цього інструменту, тому обов'язково видаліть цю інформацію з коду HTML! Не забудьте, але увімкніть відповідний альтернативний текст. Ось приклад того, як може виглядати ваш HTML-код:

< img src = «»/images/team-photo.jpg« »alt =« »Фотографія наших співробітників« »>

2. Для стилізації ви також можете додати клас до зображення. Це значення класу - те, що ми будемо використовувати в нашому файлі CSS. Зверніть увагу, що значення, яке ми тут використовуємо, є довільним, хоча для цього конкретного стилю ми схильні використовувати значення «left» або «right», залежно від того, яким чином ми хочемо, щоб наше зображення вирівнялося. Ми знаходимо, що цей простий синтаксис працює добре і легко для інших, яким, можливо, доведеться керувати сайтом в майбутньому, щоб зрозуміти, але ви могли б дати цьому будь-яке значення класу, яке захочете.

< img src = «»/images/team-photo.jpg« »alt =« »Фотографія наших співробітників« »class =« »left« »>

Саме по собі це значення класу нічого не зробить. Зображення не буде автоматично вирівняно по лівому краю тексту. Для цього нам тепер потрібно звернутися до нашого файлу CSS.

3. Тепер у свою таблицю стилів ви можете додати наступний стиль:

.оставили {

плисти наліво;

відступи: 0 20px 20px 0;

}

Тут ви використовуєте CSS-властивість float, яка витягуватиме зображення зі звичайного потоку документів (спосіб, яким зображення зазвичай відображається, з текстом, вирівненим під ним), і вирівнює його по лівій стороні контейнера. Текст, який йде після нього в HTML-розмітці, тепер переноситься навколо нього. Ми також додали деякі значення відступів, щоб цей текст розташовувався прямо навпроти зображення. Замість цього у нього буде хороший інтервал, який буде візуально привабливим у дизайні сторінки. У скороченому CSS-коді для заповнення ми додали 0 значень у верхню і ліву частини зображення і 20 пікселів у його ліву і нижню частини. Пам'ятайте, що потрібно додати відступи до правої сторони вирівняного ліворуч зображення. Вирівняне по правому краю зображення (яке ми розглянемо трохи пізніше) матиме ^, що накладається на його ліву сторону.

4. Якщо ви переглядаєте свою веб-сторінку в переглядачі, ви повинні побачити, що ваше зображення вирівняно по лівій стороні сторінки, і текст красиво обертається навколо неї. Ще один спосіб сказати, що зображення «плаває вліво».
5. Якщо ви хочете змінити це зображення, щоб воно було вирівняно праворуч (як у прикладі з фотографією, що супроводжує цю статтю), це було б просто. По-перше, ви повинні переконатися, що на додаток до стилю, який ми тільки що додали в наш CSS для значення класу «left», у нас також є один для вирівнювання по правому краю. Це буде виглядати так:

.верно {

плавати: правильно;

відступи: 0 0 20px 20px;

}

Ви можете бачити, що це майже ідентично першому CSS, який ми написали. Єдина різниця - це значення, яке ми використовуємо для властивості «float», і значення відступів, які ми використовуємо (додаючи деякі до лівої сторони нашого зображення замість правої).

6. Нарешті, ви повинні змінити значення класу зображення з «лівого» на «правий» у своєму HTML:

< img src = «»/images/team-photo.jpg« »alt =« »Фотографія наших співробітників« »class =« »right« »>

7. Подивіться на свою сторінку в браузері зараз, і ваше зображення повинно бути вирівняно по правому краю, а текст акуратно обернуть навколо нього. Ми схильні додавати обидва ці стилі, «лівий» і «правий», до всіх наших таблиць стилів, щоб ми могли використовувати ці візуальні стилі в міру необхідності при створенні веб-сторінок. Ці два стилі стають хорошими, багаторазово використовуваними функціями, до яких ми можемо звертатися щоразу, коли нам потрібно стилізувати зображення з обтіканням тексту навколо них.

Використання HTML замість CSS (і чому ви не повинні цього робити)

Незважаючи на те, що можна обернути текст навколо зображення за допомогою HTML, веб-стандарти наказують, що CSS (і кроки, представлені вище) - це шлях, за яким ми можемо підтримувати поділ структури (HTML) і стилю (CSS). Це особливо важливо, якщо врахувати, що для деяких пристроїв і макетів цей текст може не потребувати обтікання зображення. Для невеликих екранів адаптивний макет веб-сайту може вимагати, щоб текст дійсно вирівнювався під зображенням і щоб зображення розтягувалося на всю ширину екрану. Це легко зробити за допомогою медіа-запитів якщо ваші стилі відокремлені від розмітки HTML. У сучасному світі з кількома пристроями, де зображення і текст будуть відображатися по-різному для різних відвідувачів і на різних екранах, цей поділ необхідно для довгострокового успіху і управління веб-сторінкою.