Графика и мультимедиа
Теперь пришло время на примерах увидеть, как мы можем позиционировать рисунок и комбинировать его с текстом, который должен обтекать искомое графическое изображение.
Листинг 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.
Рис. 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>