Урок 2.1: Параграфы и перенос строк

Форматирование текста один из важных моментов при сайтостроении. Ведь читать сплошной текст без абзацев не очень удобно. Скажет прямо - нудно.

Один из вариантов разделения текстов - парный тег <p>. Этот тег разбивает текст на блоки.

Пример:

<html>
 <head>
  <title>Стихотворение А. С. Пушкна - Узник"</title>
 </head>
 <body>
  <p>"Узник"</p>
  <p>Сижу за решеткой в темнице сырой.</p>
  <p>Вскормленный в неволе орел молодой,</p>
  <p>Мой грустный товарищ, махая крылом,</p>
  <p>Кровавую пищу клюет под окном,</p>
  <p>Клюет, и бросает, и смотрит в окно,</p>
  <p>Как будто со мною задумал одно;</p>
  <p>Зовет меня взглядом и криком своим</p>
  <p>И вымолвить хочет: "Давай улетим!</p>
  <p>Мы вольные птицы; пора, брат, пора!</p>
  <p>Туда, где за тучей белеет гора,</p>
  <p>Туда, где синеют морские края,</p>
  <p>Туда, где гуляем лишь ветер... да я!.."</p>
  <p>1822 Пушкин А.С.</p>
 </body>
</html>

Результат:

Результат разбиения текста на блоки

В этом примере каждая строка стихотворения имеет слишком большой отступ, что не очень удобно. Для более удобного переноса строк существует тег <br>.

<html>
 <head>
  <title>Стихотворение А. С. Пушкна - Узник"</title>
 </head>
 <body>
  <p>"Узник"</p>

  <p>Сижу за решеткой в темнице сырой.<br>
  Вскормленный в неволе орел молодой,<br>
  Мой грустный товарищ, махая крылом,<br>
  Кровавую пищу клюет под окном,<br>
  Клюет, и бросает, и смотрит в окно,<br>
  Как будто со мною задумал одно;<br>
  Зовет меня взглядом и криком своим<br>
  И вымолвить хочет: "Давай улетим!<br>
  Мы вольные птицы; пора, брат, пора!<br>
  Туда, где за тучей белеет гора,<br>
  Туда, где синеют морские края,<br>
  Туда, где гуляем лишь ветер... да я!.."</p>

  <p>1822 Пушкин А.С.</p>
 </body>
</html>

Результат:

Параграфы и перенос строк

Уже лучше - стихотворение смотрица цельным блоком и отделено от автора и названия. Но можно сделать еще лучше:

<html>
 <head>
  <title>Стихотворение А. С. Пушкна - Узник"</title>
 </head>
 <body>
  <p>"Узник"</p>

  <p>Сижу за решеткой в темнице сырой.<br>
  Вскормленный в неволе орел молодой,<br>
  Мой грустный товарищ, махая крылом,<br>
  Кровавую пищу клюет под окном,</p>

  <p>Клюет, и бросает, и смотрит в окно,<br>
  Как будто со мною задумал одно;<br>
  Зовет меня взглядом и криком своим<br>
  И вымолвить хочет: "Давай улетим!</p>

  <p>Мы вольные птицы; пора, брат, пора!<br>
  Туда, где за тучей белеет гора,<br>
  Туда, где синеют морские края,<br>
  Туда, где гуляем лишь ветер... да я!.."</p>

  <p>1822 Пушкин А.С.</p>
 </body>
</html>

Результат

Идеальный вариант параграфов и переноса строк

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

Пример здесь

Подведем итог: парный тег <p> разбивает текст на блоки. Одинарный тег <br> переносит часть текста на следующую строку без дополнительных отступов.

Перечень уроков