Cамоучитель по созданию сайтов


Абзацный отступ



Абзацный отступ

Далее, в основном тексте рассказов у нас были абзацные отступы, сделанные с помощью серии неразрывных пробелов (&nbsp;) — способ не самый изящный. С помощью стилевого свойства text-indent можно определить абзацный отступ в любых единицах. Правда, придется отказаться от деления на абзацы с помощью тега <BR>, поскольку он “не поймет” указаний сделать отступ. Можно делить текст на абзацы “официальным” способом — <Р> , однако, чтобы избежать пропуска строки, мы воспользуемся тегом <DIV> :

<DIV STYLE="text-align: justify; text-indent: 2em;">

Здесь мы определили абзацный отступ, равный двум символам максимальной ширины в данном шрифте.

После текста рассказа все повторяется — та же горизонтальная линия, для которой мы укажем отступ сверху, опять заголовок, эпиграф и текст. Посмотрим, что получается в целом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<ТIТLЕ>Домашняя страница Сергея Сергеева.</TITLE>

</HEAD>

<BODY STYLE="background-color: #BABAAO; color: rgb(29,29,24);" LINK="#634438" VLINK="#634438" ALINK="Black" >

<H1 STYLE="text-align: center;">Домашняя страница Сергея Сергеева</Н1>

<DIV STYLE="text-align: center;">

<A HREF="#skazka">CKА3KА &laquo;Иван-царевич и серый зaяц&raquo;</A>&nbsp;

<A HREF="#rasskaz">PАССKА3 &laquo;МОЛОТОК&raquo;</A>

</DIV>

<BR>

<DIV STYLE="font-size: larger;">

<SPAN STYLE="font-weight: bold;,>Сергей Сергеев</SPAN> &mdash; писатель-авангардист, автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр.<ВR><ВR>

Некоторые его рассказы вы можете прочитать прямо здесь. </DIV>

<HR STYLE="margin-top: 24px; width: 75%;">

<Н2 STYLE="text-align: center;"XA NAME="skazka">ИBAH-ЦAPEBИЧ И СЕРЫЙ ЗАЯЦ</А><ВR>

<SPAN STYLE="font-style: italic; ">CKА3KА</SPAN></H2> <DIV STYLE”"text-align: right;">

<DIV STYLE="text-align: justify; font-size: smaller; width: 130;">

Ну, погоди!..

<DIV STYLE="font-style: italic; text-align: right;">(Из мультфильма)</DIV>

</DIV> </DIV>

<BR>

<DIV STYLE="text-align: justify; text-indent: 2ет;">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера. </DIV>

<DIV STYLE="text-align: justify; text-indent: 2em;"> Долго ли, коротко ли, ...</DIV>

<DIV STYLE="text-align: justify; text-indent: 2em;"> ...И они жили долго и счастливо и умерли в один день.</DIV>

<HR STYLE="margin-top: 24px; width: 75%;">

<Н2 STYLE="text-align: center;"><A NAME="rasskaz">МОЛОТОК</A> <BR>

<SPAN STYLE="font-style: italic; ">paccкaз</SPAN>

</H2> <DIV STYLE="text-align: right;">

<DIV STYLE="text-align: justify; font-size: smaller; width: 130;">

Мы кузнецы, и дух наш молод.

<DIV STYLE="font-style: italic; text-align: right;">(Из песни) </DIV>

</DIV>

</DIV>

<BR>

<DIV STYLE="text-align: justify; text-indent: 2ет;">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>

</BODY>

</HTML>

Результат показан на Рисунок 4.4. Вы можете заметить, что он практически не отличим от веб-страницы, представленной на Рисунок 2.8, если не считать немного “исправленных” эпиграфов и абзацных отступов.

Таким образом, мы переписали страничку в соответствии с требованиями HTML 4.0, а попутно рассмотрели еще некоторые дополнительные воз можности, предоставляемые CSS.



- Начало - - Назад - - Вперед -