Выравнивание текста в HTML
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали HTML-теги для работы с текстом. Пришло время разобраться с тем, как выравнивать текст на странице HTML. Если вы обратили внимание, все то, что вы с вами набирали до этого, выравнивается по левому краю браузера, при чем мы ничего не делаем, так устроено по умолчанию.Что же делать для того, чтобы выравнить содержимое, скажем, по центру? Мне в голову приходит устаревший тег <center></center>. На данный момент его я нигде не использую, но, думаю, вам будет полезно его знать. Напишем код нашей страницы и расположим текст по центру. Для этого нужно текст или любой другой элемент (например, картинку) расположить между тегами <center></center>:
<html> <head> <meta charset="utf-8"/> <title>Выравнивание элементов в HTML</title> </head> <body> <p>Текст с левой стороны</p> <center> <p>Центральный текст</p> </center> </body> </html>
После открытия страницы в браузере, мы увидим, что текст действительно расположился по центру страницы.
Хочу обратить ваше внимание вот на какой момент: вы можете решить, что если есть тег <center> - значит должны быть и теги <left>, и <right>. Заключив содержимое в теги <left></left> вы увидите, что текст действительно расположился слева. Но это будет не из-за того, что вы поставили тег <left>, а из-за того, что браузер по умолчанию располагает все элементы слева направо, сверху вниз. Так как браузер не знает тега <left> он просто его пропустил. Тегов <left> и <right> не существует.
Что же нам делать, если мы захотим разместить элементы справа? Давайте рассмотрим понятие контейнера <div>, без знания которого не обойтись при блочной верстке сайта. Существует также и табличная верстка. Эти 2 темы заслуживают особого внимания, поэтому о них поговорим в отдельных статьях.
Элемент <div> является контейнером, который может включать в себя любые другие элементы, также и другие контейнеры <div>. У тега <div> есть атрибут align, который и отвечает за то, как расположить контейнер на странице. У данного атрибута есть значения left, center, right. Давайте напишем код, где расположим элементы в различных частях браузера:
<html> <head> <meta charset="utf-8"/> <title>Выравнивание элементов в HTML</title> </head> <body> <div>Текст, расположенный слева</div> <div align="center">Текст, расположенный по центру</div> <div align="right">Текст, расположенный справа</div> </body> </html>
В данной статье вы научились выравнивать текст на html-странице.
Домашнее задание: выведите в правой части браузера 1 заголовок первого уровня и 1 заголовок второго уровня.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
Возможный вариант домашнего задания:
Выравнивание элементов в HTML
Текст, расположенный слева
Заголовок 1-го уровня
Заголовок 2-го уровня