Задание 1. Форматирование текста

Используя CSS и стилевой файл отформатируйте текст так, как представлено на образце:

Разместите в приведенном ниже тексте теги <p>,<span>,<em>,<strong>,<pre>,<h1>,<h2> и определите им необходимые стили. Экранируйте в документе все теги символами &lt и &gt.

Текст для форматирования:

Форматированный текст в HTML
Абзац и формирующий его тег <p>
Для разбиения текста на абзацы в HTML используется элемент «Абзац», который формируется парным тегом <p> (от англ. paragraph – абзац). И хотя в некоторых случаях спецификация допускает отсутствие закрывающего тега, мы будем применять его всегда, явно формируя элемент «Абзац». Добавим, что абзац относится к блочным элементам, поэтому по умолчанию начинается с новой строки и отделяется от остального содержимого вертикальными отступами.
 
Создание заголовков. Теги <h1>-<h6>
Если возникает необходимость как-то назвать часть текста (например, параграф или раздел) и выделить его относительную важность, можно воспользоваться одним из шести заголовков разного уровня, которые формируются парными тегами от <h1> до <h6> (от англ. heading – заголовок) и также относятся к блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, остальные - поменьше, по мере убывания своей важности.
 
Преформатированный текст. Тег <pre>
А что если нам нужно вывести исходный текст на экран без форматирования? Такая ситуация случается, например, когда нужно сохранить подряд идущие пробелы и переносы строк или просто сохранить исходное форматирование при отображении тех же примеров кода.
 
Например, вот так:
 
  p {
    text-align: justify;
    font-size: 14px;
  }
В таких случаях можно применить элемент «преформатированный текст», который формируется парным тегом <pre> (от англ. preformatted text – предварительно форматированный текст). Браузеры отображают его как блочный элемент.

Лекция для ознакомления: Использование CSS для форматирования текста

Направление: