Создание и раскрутка сайта - начинающим! |
|
|
|
Заголовки и блоки текста.Язык гипертекстовой разметки 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> описывает горизонтальную линию. Может включать атрибуты:
Пример использования тэгов <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>! |
|