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

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

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

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

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

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

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

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

  1. Восход и развитие интернет сети: новые формы общения, обучения, торговли и развлечений
  2. HTML обтекание картинки текстом: теория и практика
  3. Рассмотрим способы горизонтального обтекания HTML текста
  4. Пример 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 картинка с обтеканием

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

Обратите внимание на способ подгрузки изображения: ../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 | Обновление: Август 2014

HTML коды: вопросы и ответы   HTML обтекание текста картинкой

    Сохранить в сервисы и закладки