Основные HTML теги форматирования текста

Основные HTML теги форматирования текста

Если Вы хотите, чтобы люди читали то, что Вы написали, то надо уделить время для форматирования текста. Люди не любят читать широкие и длинные абзацы текста на страницах сайтов, если они не разбиты на более мелкие. В этой статье вы узнаете основные HTML-теги форматирования текста.


Пробелы и пустые строки

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

Если Вы считаете, что если сделаете несколько последовательных пробелов между двух слов и эти пробелы появятся этими словами на экране браузера, то это не так. По умолчанию будет отображаться только один пробел. Поэтому необходимо использовать специальные HTML-теги для создания нескольких пробелов.

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


Создание заголовков (h1 - h6)

Любая страница начинается с заголовка. С помощью тегов форматирования мы можем использовать разные размеры заголовков. HTML имеет шесть уровней заголовков, которые представлены тегами: <h1>, <h2>, <h3>, <h4>, <h5>, и <h6>. При отображении любого заголовка, браузер добавляет одну пустую строку до и после заголовка.

Примеры заголовков:

<h1>заголовок 1</h1>
<h2>заголовок 2</h2>
<h3>заголовок 3</h3>
<h4>заголовок 4</h4>
<h5>заголовок 5</h5>
<h6>заголовок 6</h6>

Браузер покажет это так:

Это заголовок 1

Это заголовок 2

Это заголовок 3

Это заголовок 4

Это заголовок 5

Это заголовок 6


Тег <p>, параграф 

Тег <p> помогает структурировать свой текст. В HTML, параграф - это абзац. Каждый абзац текста должен быть размещен между тегами <p> и </p>, как показано ниже в примере:

<p>Первый абзац текста.</p>
<p>Второй абзац текста.</p>
<p>Третий абзац текста.</p>

В браузере Вы увидите следующее:

Первый абзац текста.

Второй абзац текста.

Третий абзац текста.

Вы можете использовать атрибут выравнивания абзацев align:

<p align="left">Выравнивание по левому краю.</p>
<p align="center">Это выравнивание по центру.</p>
<p align="right">По правому краю.</p>
<p align="justify">Это работает, когда у вас есть несколько строк в абзаце.</p>

В браузере будет следующий результат:

Выравнивание по левому краю.

Это выравнивание по центру.

По правой стороне.

Это работает, когда у вас есть несколько строк в абзаце.


Тег <br />, перевод строки 

Всякий раз, когда вы используете тег <br />, после него текст начинается на следующей строке. Этот тег является примером пустого элемента, который не имеет закрывающий тег, поскольку он не несет никакой информации, а только сообщает браузеру о переводе строк.

Примечание: тег <br /> содержит пробел между символами "br" и "/". Если вы пропустите этот пробел, то старые браузеры будут иметь проблемы с подготовкой обрыва строки.

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

Здравствуйте<br />Вы читаете мою статью.<br />Спасибо.<br />С уважением админ сайта.

В браузере Вы увидите такое:

Здравствуйте

Вы читаете мою статью.

Спасибо.

С уважением админ сайта.


Тег <center>, выравнивание текста по центру,

Вы можете использовать тег <center>, чтобы выровнять любой текст по центру страницы или в любой ячейке таблицы:

<p>Это не по центру.</p>
<center>
<p>Это по центру.</p>
</center>

Вид в браузере такой:

Это по центру.

Это не по центру.


Элемент (&nbsp;), неразрывный пробел

Предположим, вы решили использовать фразу "только на сайте wmz-mail.at.ua". И Вы не хотите, чтобы браузер разбил ее на две строки эту фразу:

Я изучаю язык разметки HTML "только на сайте wmz-mail.at.ua"

Итак, в тех случаях, когда Вы не хотите, чтобы браузер перервал текст, нужно использовать неразрывный пробел (&nbsp;) вместо обычного пробела. Для этого нужно использовать следующий код:

<p>Я изучаю язык разметки HTML "только&nbsp;на&nbsp;сайте&nbsp;wmz-mail.at.ua"</p>

Элемент (&shy;), мягкий перенос

Бывают такие случаи, когда Вы хотите чтобы браузер переносил длинные слова для того, чтоб сделать абзац более визуально эстетичным. Давайте рассмотрим пример. Имеем следующий код:

<p>HTML - это не язык программирования, а язык разметки гипертекста.</p>

Давайте сделаем перенос слов "программирования" и "гипертекста". Для этого мы должны проставить элемент (&shy;) в нужном для нас месте слова. Теперь код абзаца будет таким: 

<p>HTML - это не язык программи&shy;рования, а язык разметки гипер&shy;текста.</p>

Теперь абзац будет иметь следующий вид:

HTML - это не язык программи-рования, а язык разметки гипер-текста.

Тег <pre>, исходное форматирование текста

Для того чтобы сохранить исходное форматирование текста нужно использовать тег <pre>. Рассмотрим пример:

<pre>HTML - это язык разметки гипертекста. Изучайте его и делайте Ваш сайт лучше.</pre>
Что же мы увидим в итоге? Текст, который находится в средине тегов <pre> и </pre> будет отображен так называемым "моноширинным" шрифтом, который является основным и общепринятым шрифтом в html-документах. Таким образом наше предложение будет иметь такой вид:
HTML - это язык разметки гипертекста. Изучайте его и делайте Ваш сайт лучше.

Тег <hr />, горизонтальная линия 

Горизонтальные линии используются для того, чтобы визуально разбить разделы текста на веб-странице. Данный тег создает горизонтальную линию от левого до правого края страницы в пределах контента. Например, имеем следующий код:

<p>Это первый абзац с текстом</p><hr /><p>Это второй абзац с текстом</p>

Результат будет таким:

Это первый абзац с текстом

Это второй абзац с текстом

<<< Предыдущая статья Меню категории Следующая статья >>>

Ставив лайк Вы помогаете сайту :)

Статьи по теме:
Рейтинг:
5.0/5 из 2
Категория: Учебник HTML | Добавил: zaharchuk (04.03.2014)
Просмотров: 16154
Комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]