Щоб упорядкувати зображення та текст у HTML, ви можете використовувати CSS (каскадні таблиці стилів). Ви можете використовуйте властивість float, щоб розмістити зображення та текст поручабо скористайтеся властивістю position, щоб розмістити їх у певному місці на сторінці.
Найпростіший спосіб розмістити текст поруч із зображенням — за допомогою використовуючи тег <img> для зображення та тег <p> для абзацу тексту. Давайте розглянемо це як базову конструкцію Lego – два блоки, які ми хочемо поставити поруч. У цьому коді src означає «джерело», яке є розташуванням вашого файлу зображення.
Якщо ви хочете розмістити зображення та текст в одному рядку на сторінці HTML, ви можете це зробити використовуйте тег <p> з атрибутом style, встановленим як display:inline-block . Це відобразить зображення та текст в одному рядку.
Щоб розмістити просте зображення на веб-сторінці, ми використовуємо елемент <img>. Це недійсний елемент (це означає, що він не може мати дочірній вміст і не може мати кінцевий тег), для використання якого потрібні два атрибути: src і alt. Атрибут src містить URL-адресу, яка вказує на зображення, яке потрібно вставити на сторінку.
Це досягається за допомогою навколо зображення та тексту в HTML-тезі <div>. Потім установіть позицію div як відносну, а для позиції тексту – як абсолютну. Абсолютні елементи впорядковані навколо батьківського (div).
Використовуйте код розмітки <BR CLEAR="left" /> для обведення текстом зображень на протилежних сторонах веб-сторінок.