Урок 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> переносит часть текста на следующую строку без дополнительных отступов.

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