Простейшее форматирование текста
В разделе 1.2 мы начали знакомиться с тем, как пишется код веб-страницы, и увидели, что ничего принципиально сложного в этом нет. Давайте сейчас продолжим знакомство с языком HTML. Для начала попробуем отформатировать текст на нашей гипотетической страничке так, чтобы его было более или менее удобно и приятно воспринимать.
В качестве примера продолжим форматирование страницы нашего несуществующего писателя Сергея Сергеева. Предположим, что за вступительным текстом, который мы начали форматировать в разделе 1.2, мы должны расположить два его рассказа (он же писатель!). Каждый рассказ имеет название, подзаголовок и небольшой эпиграф.
Известно, что в книгах названия рассказов обычно располагают по центру страницы, а эпиграф – у ее правого края. Давайте попробуем осуществить это на веб-странице. Для этого вначале введем понятие атрибутов тега. Дело в том, что почти каждый тег HTML может употребляться не только “сам по себе”. Внутри негр (то есть между угловыми скобками), кроме названия тега могут задаваться еще несколько его свойств, называемых атрибутами. Например, атрибутом разных тегов может являться цвет текста, размер шрифта и т. д.
Управление выравниванием текста
В данном случае нам потребуется такой атрибут, как выравнивание (выключка) текста. Он может употребляться с разными тегами. Поскольку на нашей страничке и заголовок, и эпиграф должны быть отделены друг от друга и от основного текста, имеет смысл употребить тег <Р>. Каждый фрагмент текста, заключенный между тегами <Р> и </Р>, будет представлять собой отдельный абзац:
<P>Это первый абзац.</P><P>Это второй абзац.</P><P>Это третий абзац и т. д.</P>Чтобы выровнять заголовок по центру страницы, можно написать следующее:
<P ALIGN="center">ЗАГОЛОВОК РАССКАЗА №!</P>Вы, очевидно, уже поняли, что атрибут ALIGN= означает выравнивание. Ему присвоено значение "center" для выравнивания текста по центру страницы. Между атрибутом и его значением всегда должен стоять знак равенства. Для того чтобы расположить эпиграф по правому краю, надо, соответственно, атрибуту ALIGN= присвоить значение "right":
<P ALIGN="right">ЭПИГРАФ</P>Теперь давайте посмотрим, как будет выглядеть вся страничка целиком.
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> <TITLE>Домашняя страница Сергея Сергеева</TITLE></HEAD> <BODY> <FONT FACE="Times New Roman"><P>Домашняя страница Сергея Сергеева<BR><BR>Сергей Сергеев - писатель-авангардист, автор 20 рассказов.<BR>В жизни большой любитель собак и компьютерных игр.<BR><BR>Некоторые его рассказы вы можете прочитать прямо здесь. </P><P ALIGN="CENTER">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<BR>сказка</P></P><P ALIGN="RIGHT">Ну, погоди!.. <BR>(Из мультфильма)</P><P>Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.<BR>Долго ли, коротко ли,... (тут располагается еще несколько абзацев, разделенных тегом BR, хотя это не единственный способ разделения абзацев)...<BR>И они жили долго и счастливо и умерли в один день. </P><P ALIGN="CENTER">МОЛОТОК<BR>рассказ</P><P ALIGN="RIGHT">Мы кузнецы, и дух наш молод.<BR>(Из песни)</P><P>Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </P></FONT></BODY> </HTML>Результат показан на рис. 2.1. Как видите, это весьма похоже на то, что было задумано. Однако сразу бросаются в глаза несколько недостатков. Во-первых, абзацы в основном тексте на вид плохо отделены друг от друга, хотя и разделены тегом <BR>.
Рис. 2.1. Иллюстрация применения атрибута ALIGN