Иллюстрированный самоучитель по Adobe GoLive 6

Графика и мультимедиа

Теперь пришло время на примерах увидеть, как мы можем позиционировать рисунок и комбинировать его с текстом, который должен обтекать искомое графическое изображение.

Листинг 1.11

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm!4/strict.dtd">
<html>
  
<head>
    <title>Рисунки и Текст</title>
</head>
  
<body>
    <p>Это текст, который обтекает рисунок.
        <img src="redhood.gif">Это текст, который обтекает рисунок. Это текст, который обтекает рисунок. Это текст, который обтекает рисунок.</p>
</body>
  
</html>

Внешний вид этого HTML-документа при отображении его с помощью браузера показан на рис. 1.11.

Иллюстрированный самоучитель по Adobe GoLive 6 › Язык HTML › Графика и мультимедиа
Рис. 1.11. Окно браузера с результатом отображения файла, приведенного в листинге 1.11

В этом примере мы использовали чистый тег вставки изображения без каких-либо дополнительных параметров. Как мы можем видеть, изображение вставляется сразу после первого предложения, там, где мы и разместили тег <img>. При этом, если мы уменьшим размеры окна просмотра браузера по горизонтали так, чтобы первое предложение и рисунок не смогли бы поместиться там на одной строке, то сначала было бы отображено предложение, а уже под ним рисунок, прижатый к левому краю окна просмотра. Справа от него начиналось бы отображение следующего за ним текста таким образом, что базовая линия строки совпадала бы с нижним краем рисунка.

А теперь добавим к тегу отображения рисунка параметр горизонтального выравнивания. Получившийся код приведен в листинге 1.12.

Листинг 1.12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  
<head>
    <title>Рисунки и текст</title>
</head>
  
<body>
    <p>Это текст, который обтекает рисунок.
        <img src="redhood.gif" align="ieft">Это текст, который обтекает рисунок. Это текст, который обтекает рисунок. Это текст, который обтекает рисунок.</p>
</body>
  
</html>
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.