Обтекание HTML картинки текстом с примерами

или подробно о процессе обтекания HTML картинок и текстов

Глава содержит примеры обтекания текста картинкой из области Гипертекстовой разметки.

В меню слева вы найдете современные и очень подробные уроки по HTML.

Они позволят вам создать свой сайт с чистого листа, а пока смотрим немного ниже.

В данной главе мы рассмотрим

Восход и развитие интернет сети: новые формы общения, обучения, торговли и развлечений
HTML обтекание картинки текстом: теория и практика
Рассмотрим способы горизонтального обтекания HTML текста
Пример HTML обтекания текста картинкой справа

Прежде, чем приступить к HTML обтеканию, предлагаю ознакомиться с информацией.

Это может быть интересно.

Восход и развитие сети интернет

Интернет непрерывно расширяется. Он становится глобальной сетью за счет того, что к нему постоянно присоединяются отдельные частные лица и крупные коммерческие структуры, локальные и региональные компьютерные сети со всего Мира. В 1993 году была разработана технология Word Wide Web, которая превратилась в одну из самых важных служб в рамках Всемирной паутины. Данная структура спровоцировала рост популярности технологии интернет, вызвала небывалый интерес со стороны будущих веб-дизайнеров и разработчиков, со стороны миллионов людей, которые впоследствии занялись созданием сайтов для своего собственного удовольствия и на благо общества. Интернет стал неотъемлемой частью современной цивилизации. Проникая в сферу образования, торговли, связи, услуг, Глобальная сеть создает новые формы общения, способы обучения, торговли и развлечений. Интернет-поколение является настоящим социокультурным феноменом наших дней и это поколение не может представить себе жизнь без Всемирной сети.

HTML обтекание картинки текстом

Пример:

<title>Пример ХТМЛ обтекания картинок текстом</title>

          </head>

          <body>

          <p><img src="../images/2121.png" width="128" height="128" align="top" />Текст вверху картинки</p>

          <p><img src="../images/2121.png" width="128" height="128" align="middle" /> Текст по середине</p>

          <p><img src="../images/2121.png" width="128" height="128" align="bottom" /> Текст снизу картинки</p>

          </body>

Результат:

sposob obtekanija teksta kartinkoj

Посмотреть в новом окне: HTML картинка с обтеканием

Атрибуты и значения

align="top" – выравнивает картинку и текст по верху.
align="middle" – выравнивает картинку и текст по центру, по вертикали.
align="bottom" – выравнивает картинку и текст по низу.

Обратите внимание на способ подгрузки изображения: ../images/2121.png. Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самой картинки.

Способы горизонтального обтекания HTML текста

Пример:

<title>HTML текст обтекает картинку справа</title>

          </head>

          <body>

          <img src="../images/2121.png" align="left" width="128" height="128" />

          <p>Изображение обтекает текст слева</p>

          <p>Изображение обтекает текст слева</p>

          <p>Изображение обтекает текст слева</p>

          <p>Изображение обтекает текст слева</p>

          </body>

Результат:

obtekanie

Посмотреть в новом окне: HTML картинка и текст

Пример HTML обтекания текста картинкой справа

Пример:

<title>HTML картинка справа – текст слева</title>

          </head>

          <body>

          <img src="../images/2121.png" align="right" width="128" height="128" />

          <p>Изображение обтекает текст справа</p>

          <p>Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа</p>

          </body>

Результат:

obtekanie kartinki

Посмотреть в новом окне: Обтекание HTML текста и картинки справа

1 3 4 5 6 7 8 9 10 11 12

Автор проекта - Вася Митин | Дата публикации: Июль 2011 | Обновление: Ноябрь 2018

HTML изображение HTML обтекание текста и картинки