Доброго времени суток, читатели публикации! Все онлайн-ресурсы в своем арсенале используют мультимедийные файлы (изображения, видео и т.д.), которые делают сайт интереснее для пользователей и в некоторых случаях нагляднее презентуют информацию. Поэтому я расскажу вам как сделать обтекание текста html.
В первую очередь вы узнаете, что это за механизм и зачем он нужен. А после прочтения статьи сможете ловко оперировать полученными знаниями и корректировать расположение картинок на своем веб-ресурсе. Пожалуй, приступим!
Что означает «обтекание» и для чего оно используется?
Для начала разберемся с самим термином «обтекание».
На одной веб-странице может быть собрана информация разных форматов: текстовая, графическая, анимационная и т.д. Веб-дизайнеры или разработчики определенным образом ее систематизируют и распределяют по экрану для последующего удобного пользования ею читателями.
Я уверен, что каждый из вас видел, как какое-либо изображение находится внутри текстового контента или наоборот располагается сбоку от других объектов. Такой принцип размещения информации называется обтеканием.
Например, рисунок, который со всех сторон окружают предложения, говорят: «Изображение, обтекаемое текстом».
Разновидности обтекания текстом
В зависимости от вашего персонального желания, обтекание изображений можно установить абсолютно разным: слева, справа, со всех сторон, расположить картинку строго по центру и обрамить ее контентом только сверху и снизу. И таких вариантов бесконечное множество.
Для того чтобы легко форматировать информационное наполнение веб-страниц, вам необходимо знать некоторые встроенные инструменты языков html и css.
Начнем с атрибутов тега <img>. Напомню, что элемент img является одинарным и используется для отображения графического контента на интернет-ресурсах. Среди его атрибутов есть несколько полезных нам на данный момент. Их я перечислил в таблице, представленной ниже.
Атрибут | Предназначение |
align | Задает расположение рисунка на странице и соответственно стороны обтекания его контентом. |
hspace | Отвечает за отступ от границы изображения до блока с текстом по горизонтали. |
vspace | Отвечает за отступ от границы изображения до блока с текстом по вертикали. |
src | Через него указывается анкор на графический ресурс. |
alt | В случае невозможности отобразить картинку высвечивается текст, вписанный в этот параметр. |
Теперь я представлю шаблон кода, который мы будем использовать во всех примерах:
2ef46b772b8402fae8d314107255f935000
Если запустить пример в браузере на данном этапе, то вслед за картинкой пойдут предложения абзаца. Чтоб этого не было, я воспользуюсь описанными выше параметрами и сдвину изображение вправо, отступив по горизонтали 10 единиц.
Добавьте к текущему объявлению тега <img> атрибуты align="right" vspace="0" hspace="10".
У вас должна сформироваться вот такая строка:
<img src="https://zhivotnue.ru/image/glavnaya/1.jpg" alt="Тигренок" align="right" vspace="0" hspace="10">
Следующим механизмом перемещения картинки по странице и установки способа обтекания контентом является свойство float. С его помощью изображение можно двигать по горизонтали (right и left) или задавать значения объекта-предка (inherit).
Чтобы опробовать float на практике, необходимо вернуть объявлению тега <img> первозданный вид (<img src="https://zhivotnue.ru/image/glavnaya/1.jpg" alt="Тигренок">) и после элемента <title> вставить код:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Рисунок в тексте</title> </head> <body> <p><img src="https://romanchueshov.ru/wp-content/uploads/2016/07/1.jpg" alt="Тигренок"> Здесь расположен текст о милейшем создании – тигренке, который изначально по размерам напоминает домашних котов. Однако со временем он достигает почти 300 килограмм.</p> </body> </html> |
Фотография тигренка сдвинется влево, а текст переместится вправо.
Теперь я хочу расположить картинку так, чтобы она по бокам обрамлялась текстовой информацией. Для этого можно использовать как таблицы и поместить все в колонки, так и стилевое оформление, которое я и выбрал.
Так как я не использовал объекты неправильной формы, весь контент аккуратно разместится по экрану. Код реализованного примера представлен ниже.
1 2 3 4 5 6 | <style> img { float: left; padding-right: 25px; } </style> |
Теперь вы знаете, как выглядит обтекание контентом, и владеете основными единицами языков html и css для управления расположением объектов на веб-ресурсах. Не забывайте подписываться на обновления блога и делиться ссылкой с коллегами и знакомыми.
Пока-пока!
С уважением, Роман Чуешов