Урок - Форматирование текста.

Главная » Курсы » Курс HTML5, Быстрый старт » Урок - Форматирование текста.

Обучающий онлайн курс
HTML5, Быстрый старт

Лицензия: Копирование запрещено.

На этом уроке мы познакомимся со следующими тегами:

  1. <h1>,<h2>,<h3>,<h4>,<h5>,<h6> - заголовки различных уровней.
  2. <p> - выделение абзацев.
  3. <br> - переход на новую строку.
  4. <center> - центрирование текста.
  5. <blockquote> - отступ.
  6. <pre> - преформатирование.

Теги заголовков <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

В HTML 5 имеется 6 уровней заголовков разделов страницы.

Заголовок высшего уровня имеет номер 1 - тег <h1></h1>. Заголовок низшего уровня имеет номер 6 - тег <h6></h6>.

Теги заголовков отличаются между собой стилем (размером шрифта, толщиной букв). Текст заголовка <H1> имеет наибольшую высоту (по умолчанию)

Абзацы - тег <p>.

Абзацы в тексте выделяются тэгами <p></p>. При отображении бразуером абзацы отделяются друг от друга пустой строкой.

Переход на новую строку - тег <br>.

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

<p>
    Хорошо! Всё будет хорошо!<br>
    Всё будет хорошо я это знаю, знаю!<br>
    Хорошо! Всё будет хорошо!<br>
</p>

Центрирование текста тегом <center>.

Выравнивать текст по центру можно с помощью тега <center></center>.

Например:

<center>
    Солнце, два облака и Луна
</center>

Отступ <blockquote>

Парный тег <blockquote></blockquote> указывает браузеру установить отступ со всех сторон блока, например:

...
<blockquote>
    <p>
        Хорошо! Всё будет хорошо!<br>
        Всё будет хорошо я это знаю, знаю!<br>
        Хорошо! Всё будет хорошо!<br>
    </p>
</blockquote>
...

Преформатирование <pre>

Парный тег <pre></pre> указывает браузеры воводить текст как указано (т.е. сохраняя проблельные символы). Браузеры при отображении HTML-документа игнорируют множественные пробелы, табуляцию и символы конца строки, т.е. рассмтаривают несклько идущих пробельных символов, как один пробел.

При использовании тега <pre> мы указываем браузеру, что необходимо выводить текст так, как указано между тегами, например:

<pre>     Текст песни Все будет хорошо     муз.         А. Данилко     сл.         А. Данилко </pre>

 

выведет:

    Текст песни Все будет хорошо
    муз.
        А. Данилко
    сл.
        А. Данилко