Создание и
раскрутка
сайта -
начинающим!
 




Заголовки и блоки текста.

Язык гипертекстовой разметки HTML

Урок 3

Не будет преувеличением сказать, что самое главное на сайте - это текст, и текст этот должен читаться легко и комфортно. Вот и рассмотрим в этом уроке форматирование блоков текста.

В самом общем случае текст разбивается на абзацы и содержит заголовки, которые позволяют лучше понять структуру статьи или страницы.

Заголовки <h1>...<h6>

HTML имеет 6 уровней заголовков разделов страницы, имеющих номера от 1 до 6. Заголовок высшего уровня имеет номер 1. Отличаются заголовки от текста и между собой толщиной и высотой букв, в заголовке первого уровня <h1> самые крупные символы. Тэги: <h1>..</h1>, <h2>..</h2>, ... , <h6>..</h6> (от английского слова header - заголовок)

Следует соблюдать порядок заголовков. Т.е. самый главный - заголовок первого уровня <h1>, внутри него могут быть один или несколько подзаголовков <h2>, а те уже в свою очередь могут содержать внутри себя подзаголовки <h3>, и т.д. до шестого уровня. Нельзя написать сразу заголовок, например, <h2>, а за ним <h5> только из-за того, что «так красиво» - поисковики это не оценят.

Абзацы <p>

Абзацы в тексте выделяются тэгами <p>..</p> (сокращение от английского paragraph). При просмотре браузером абзацы отделяются друг от друга пустым пространством (так называемой отбивкой). Это позволяет читателю легче отыскивать взглядом новые абзацы. С точки зрения дизайна в этом тоже есть некоторые плюсы — подобное пустое пространство улучшает вид текста и документа в целом.

И заголовки, и абзацы в HTML по умолчанию выключены влево (т.е. выравниваются по левому краю). Атрибут align позволяет выключить текст по центру или вправо. Синтаксис: <p align="right">, может принимать 4 значения left (влево), center (по центру), right (вправо) и justify (по ширине, т.е. одновременно по левому и правому краю). Пример:

<p>Этот абзац расположен слева</p>
<p align="center">Этот абзац по центру</p>
<p align="right">А вот этот абзац справа</p>

Что дает при просмотре:

Этот абзац расположен слева

Этот абзац по центру

А вот этот абзац справа

Аналогично выравниваются и заголовки, например: <h1 align="right">..</h1> и т.д.

А вот этот абзац - это пример выравнивания текста по ширине (justify). Надо сказать, что выравнивание по ширине таит в себе некоторые сюрпризы. Чтобы обеспечить выравнивание блока текста по обеим сторонам, браузеру приходится увеличивать пробелы между словами, удлиняя таким образом текстовые строки. Из-за этого в некоторых местах появляются некрасивые "дыры", которые портят общее впечатление и снижают читабельность текста. Особенно это заметно в текстовых блоках небольшой ширины.

Выравнивание по центру <center>

В HTML существует ещё один способ выравнивания по центру - это использование тэгов <center>..<center>. Всё, что находится между этими тегами, будет выравниваться по центру. Так можно легко отформатировать сразу несколько заголовков и абзацев. Например:

<center>
<h1>Заголовок страницы</h1>
<h2>Подзаголовок</h2>
<p>Абзац 1.</p>
<p>Абзац 2.</p>
</center>

В результате заголовок, подзаголовок и оба абзаца будут выключены по центру.

Но! Этот тег является устаревшим, и его использование является нежелательным. Зачем я тогда написал про него? Ну, чтобы знали, что был такой.

Разрыв <break>

Чтобы перейти на новую строку, не прерывая абзаца (т.е., чтобы не вставлять пустую строку между абзацами), применяется тэг <br> (от английского break - разрыв). Закрывающего тэга у него нет. Некоторые пишут этот тег так: <br />. Так не следует делать - если такой код проверить в валидаторе, то получим ошибку.

Неразрывная строка <nobr>

Нередко встречается обратная ситуация, когда надо, чтобы строка не разрывалась. Для этой цели рекомендуют использовать тег <nobr>...</nobr> (от английского no break - не разрывать). Однако, несмотря на широкую поддержку этого тега браузерами, он никогда не был в стандарте HTML. Поэтому вместо него лучше использовать css-свойство white-space. Например, так:

Звоните нам по телефону <span style="white-space: nowrap;">+1 (222) 333-44-55</span>

Теперь номер телефона при любой ширине экрана будет написан в одну строку, что выглядит значительно красивее.

Горизонтальная линия <hr>

Тэг <hr> описывает горизонтальную линию. Может включать атрибуты:

  • size - толщина линии в пикселах;
  • width - длина линии в пикселах или процентах от ширины экрана;
  • align - выравнивание линии, может принимать значения left, center, right;
  • color - цвет линии;
  • noshade - линия рисуется без тени.

Пример использования тэгов <br> и <hr>:

Стишок-нескладуха
<hr noshade width="250" align="left">
Нет приятнее занятья,<br>
Чем в носу поковырять:<br>
Всем ужасно интересно,<br>
Что там спрятано внутри.<br>
А кому смотреть противно,<br>
Тот пускай и не глядит -<br>
Мы же в нос к нему не лезем,<br>
Пусть и он не пристает!<br>
<hr size=4 width="50%">

Получаем:

Стишок-нескладуха
Нет приятнее занятья,
Чем в носу поковырять:
Всем ужасно интересно,
Что там спрятано внутри.
А кому смотреть противно,
Тот пускай и не глядит -
Мы же в нос к нему не лезем,
Пусть и он не пристает!

Цитата <blockquote>

Метки <blockquote></blockquote> (в переводе с английского - цитата) добавляют к выделенному ими тексту со всех четырёх сторон поля (сверху и снизу - по пустой строке, слева и справа - шириной в 5 знаков). Пример - этот абзац, он заключён в теги <blockquote>

Преформатированный текст <pre>

Еще один способ форматирования текста - использование меток <pre>..</pre> (от английского prefomatted text - предварительно форматированный текст). Обычно браузеры игнорируют множественные пробелы и символы конца строки в коде. Однако с использованием тега <pre> текст выводится в окне браузера точно в том виде, как он есть в исходном HTML-документе.

Пример. В тексте:

<pre>
Чтобы стихотворение красиво
      смотрелось в окне браузера,
            вовсе необязательно использовать
                     тэг &lt;BR&gt;!
</pre>

В окне браузера видим:

Чтобы стихотворение красиво
      смотрелось в окне браузера,
            вовсе необязательно использовать
                     тэг <BR>!