Текстовые блоки

После того, как мы научились оформлять отдельные фразы и предложения, мы рассмотрим оформление текстовых блоков: заголовков, абзацев, листингов программ. Заголовки в тексте оформляются с помощью команд <h1>, <h2> ... <h6>. Они делятся на шесть уровней.
Например: <h1> Заголовок первого уровня</h1>.

Заголовок первого уровня

Обратите внимание, что заголовок - это не просто увеличенный жирный шрифт. Часто встречается, например что-то вроде:

<p align="center"><font face="Times New Roman" 
color="#0000A0"><strong><big><big>Московский
 государственный институт</big></big><br>
<big><big>электроники и математики</big></big></strong></font>

Конечно, этот текст был написан не человеком, а сгенерирован WYSIWYG-редактором типа FrontPage, но часто и веб-мастера такое пишут. Всегда когда имеет место быть заголовок делайте оформляйте его именно при помощи команд <hx>. Во-первых, это правильно с точки зрения оформления текста. Во-вторых, многие поисковые машины индексируют заголовки. После заголовка текст начинается с новой строки. Заголовок также может быть выровнен по левому или правому краю и по центру. По умолчанию выравнивание делается по левому краю. Пример выравнивания по правому краю: <h3 align="right">Заголовок прижат к правому краю</h3>:

Заголовок прижат к правому краю

Атрибут align может принимать одно из трех значений: left, center, right.

После заголовка начинается новый абзац. Он задается командой <p>. У этой команды есть атрибут align, который принимает значения: left, center, right, justify. justify означает, что текст будет выровнен по левому и по правому краю, как это делается в печатных изданиях. В Сети часто используется выравнивание по левому краю. Считается, что так читать текст с экрана монитора легче. Это дело вкуса, мне, например, больше нравится выравнивание по обоим краям. Учтите, что броузер сам форматирует документ, и перенос текста на новые строки зависит от размера шрифта и ширины окна броузера. Если вы измените размер окна броузера, то текст автоматически переформатируется, и форматирование будет другим. Всегда проверяйте, как ваш документ смотрится на другом разрешении экрана и мониторах с другой диагональю. Для принудительного перехода на новую строку используйте команду <br>.
Например:

<p align=center>Текст, выровненный<br> по центру.
Текст, выровненный
по центру.

Листинги программ оформляются при помощи команды <pre>. Эта команда позволяет сохранить форматирование текста: пробелы, табуляции и переходы на новые строки. Обычно, броузер оставляет один пробел между словами, несмотря на их реальное количество. Переносы на новую строку игнорируются, если вы только явно не используете команду <br>. Команды <p> и <pre> имеют закрывающие команды </p> и </pre>. Обратите внимание, что хоть форматирование и сохраняется, но знаки <> вам надо указывать через спецсимволы <>. Следите также, чтобы абзаце pre не было слишком длинных строк. В этом случае могут пользователи увидеть у себя горизонтальную пркрутку. Ширина HTML-документа определается максимально широким элементом. Такими элементами, которые нельзя перенес на новуюстроку являютя либо картинки, либо листинги программ. При верстке текста старайтесь, чтобы он отображался в окне броузера шириной в 500 пикселов без линейки прокрутки. Вы никогда не знаете, какое разрешение у пользователся. Есть даже пользователи с карманными компьютерами. Текст на то и текст, чтобы хорошо располагаться и в окне шириной в 1024 пиксела, и в окне в 320 пиксела.
Пример:

<pre>
    // Форматированный      текст.
   if( pWnd && i<10)
    {
     printf("Ok");
    }
</pre>
// Форматированный текст. if( pWnd && i<10) { printf("Ok"); }

Прежде, чем перейти к знакомству с гиперссылками, мы изучим еще несколько команд. <center> имеет закрывающую команду, текст и любые другие элементы будут отцентрированы. <div> тоже имеет закрывающую команду, а также атрибут align=(left, center, right), по которому происходит выравнивание содержимого. <hr> - горизонтальная линейка. Имеет следующие атрибуты:

align = (left, center, right), по умолчанию равно left
size - задает размер по высоте, по умолчанию значение равно 2
width = (150, 33%) - задает длину, может задаваться в пикселях или процентах
noshade не принимает никакого значения, заполняет содержимое цветом

Пример:

   
   <hr>
   <hr align=center size=3 width=50>
   <hr align=right size=4 width=30% noshade>

Упражнения

Оформите какой-либо текст используя, заголовки двух уровней для обозначения глав и параграфов. Текст внутри абзацев выравнивайте по обоим краям.
Перепишите пример номер 2 из предыдущего параграфа так, чтобы одна строчка выравнивалась по левому краю, а вторая - по правому и т.д. Каждые две строчки отделяйте горизонтальной линейкой, шириной 75%.