Выравнивание текста в html
Для правильного и симпатичного отображения информации на Вашей страничке Вам
потребуется не только правильно расставить абзацы, в нужном месте перевести
строку, но и выравнивать текст по левому краю или по центру. На все эти
случаи в языке HTML существуют соответствующие теги. Рассмотрим некоторые
из них, наиболее часто употребляемые. На этой страничке мы поговорим о параграфах.
Параграфы вводятся тэгом:
<p></p>
С помощью параграфов мы можем центрировать текст:
<p align="center">текст</p>
Выравнивать текст по левому краю:
<p align="left">текст</p>
По правому краю документа:
<p align="right">текст</p>
По обоим краям документа:
<p align="justify">текст</p>
Теперь введем параграфы в наш документ и посмотрим наглядно, что получится
(в свой пример я подставил параграф с атрибутом центрирования текста)
align="center".
| |
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
<font color="#009933">Это моя первая страница.</font>
<br>
У меня все получится.</p>
<br>
<hr color="#FF0033">
</body>
</html>
посмотреть
|
Одно надо запомнить, раз и навсегда, никогда нельзя вводить в документ подобную
конструкцию:
<p></p>
Пустые элементы <p> без какого-либо содержания (других тэгов или текста)
будут игнорироваться браузерами. Если не задавать параграфы, по умолчанию текст
всегда выравнивается по левому краю.
И еще одно не удобство, происходит после закрывающего тега </p>
автоматический перенос строки. Но что делать, если вам этот перенос не нужен?
В этом случае в Html предусмотрен тег <center>
<center> текст </center>
| |
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<font color="#009933">Это моя первая страница.</font>
<br>
У меня все получится.</center>
<br>
<hr color="#FF0033">
</body>
</html>
посмотреть
|
Тэг <center> центрирует текст вашего документа. Возникает вопрос, как
быть с выравниванием в других направлениях. Все очень просто тег <div> </div>,
одно из назначений которого выравнивание содержимого вашего документа.
Все четыре значения атрибута align можно употреблять с <div>
<div align="center"> текст </div>
<div align="left"> текст </div>
<div align="right"> текст </div>
<div align="justify"> текст </div>
| |
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
Это моя первая страница.
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<div align="Justify">
<font color="#CCCCFF">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного
дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули
лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул
молодой человек весьма примечательной наружности. Он словно сошел с картинки
парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный
чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с
белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным
же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира,
сколько импозантная, можно даже сказать, эффектная внешность. Молодой человек
был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему
необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные
волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>
</body>
</html>
посмотреть
|
Из данного примера видно, что при помощи тега <div>, атрибута align
и параметра Justify основной текст выровнен по обеим сторонам равномерно, а имя
автора выровнено по правому краю, то есть тег <div> может содержать
в себе параграфы <p>
<div align="Justify">Основной текст
<p align="right">Имя автора</p>
</div>
Параграф не может содержать в себе другие параграфы, и также тэг <div></div>.
Следующие конструкции будут не верны.
<p align="right">
<p>текст</p>
<p>текст</p>
<p>текст</p>
</p>
или
<p align="right">
<p>текст</p>
<div>текст</div>
</p>
Материал взят со страницы >>>
|