Изменение выравнивания текста и графики
Поскольку на большинстве Web-страниц присутствует как текст, так и графические изображения, выравнивание графики и текста в окне браузера представляет собой существенный элемент дизайна Web-страниц. По умолчанию Web-браузер размещает объекты HTML-документа в том же порядке, в котором он их находит. Более того, браузер помещает объекты на экран один за другим слева направо и снизу вверх.
Предположим, например, вы хотите, чтобы браузер отображал рисунок над строкой текста, которая описывает рисунок. Если вы просто поместите в HTML-документ дескриптор <img>, а затем наберете строку текста, браузер отобразит текст рядом с документом (то есть справа от него), а не под рисунком. Помните, Web-браузер отображает элементы HTML-документа на экране один за другим слева направо. Браузер ставит элемент на новой строке слева, только достигнув правого поля текущей строки на странице.
В приведенном ниже коде показан порядок расположения графических и тек- стовых элементов. Дескриптор <p> дает браузеру указание отобразить текст, иду- щий после рисунка, на строке под рисунком:
<html><head>
<title>Пример размещения текста и графики</title>
</head><body>
<img src="flower. jpg"
<p>Покаэанные цветы - это дикорастущие растения равнин Канэаса</p>
</body></html>
Дескриптор <img>, помещенный в HTML-документ перед текстом, дает Web-браузеру указание отобразить рисунок перед тем, как отображать текст. Помещение дескриптора <p> между рисунком и текстом заставляет Web-браузер вставить символ перевода строки (то есть перейти на следующую строку на странице) и вставить пустую строку после вывода рисунка и перед выводом текста, который идет после рисунка в HTML-коде Web-страницы. На рис. 1.16 показано, как Web-браузер отобразит рисунок по отношению к тексту в данном примере.
Обратите внимание, что правильно вставленный дескриптор <p> выравнивает рисунок и текст по вертикали. Однако вы можете также захотеть, чтобы браузер расположил рисунок и текст по центру между левым и правым полями Web-страницы. Для работы с горизонтальным выравниванием объектов на Web-странице язык HTML предусматривает начальный и конечный дескрипторы выравнивания по центру (<center></center>). Нужно понимать, что, хотя дескрипторы выравнивания по центру все еще используются, эти дескрипторы являются нерекомендованными, а значит, существует возможность того, что в будущем браузеры перестанут их поддерживать. Предпочтительнее выравнивать текста и графику с помощью CSS-правил, о чем речь идет в главе 4.
Рис. 1.16. Без выравнивания текст и графика сдвигаются в левую сторону окна браузера
ПРАКТИКУМ
По умолчанию Web-браузер выравнивает первый объект на каждой строке, сдвигая его к левому краю Web-страницы. Для того чтобы изменить выравнивание по умолчанию и, таким образом, изменить горизонтальное положение объекта на строке или группе строк, применяется дескриптор <center>. Начальный и конечный дескрипторы выравнивания по центру (<center></center>) дают Web-браузеру указание отцентрировать изображение и текст, заключенные между дескрипторами, между левым й правым полями Web-страницы, как показано на рис. 1.17:
Рис. 1.17. Начальный и конечный дескрипторы выравнивания по центру дают Web-браузеру указание отобразить графический и текстовый элементы
по центру между левым и правым полями Web-страницы
<html><head>
<title>Пример размещения текста и графики</title>
</head><body>
<center><imgsrc="flower.jpg"<p>Покаэанные цветы - это дикорастущие растения равнин Канзаса</p></center>
</body></html>