раскрутка
сайта -
начинающим!
Заголовки и блоки текста.
Язык гипертекстовой разметки 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>
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно использовать
тэг <BR>!
</pre>В окне браузера видим:
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно использовать
тэг <BR>!