Параграфы и заголовки в HTML

Добро пожаловать в 4 урок по видеокурсу HTML.
Разобрав в предыдущем видеоуроке элемент DOCTYPE и раздел HEAD, мы приступим к параграфам  P, DIV и заголовкам элементов H. Также рассмотрим их основные атрибуты (что такое атрибут?). Остальные атрибуты будем, проходит по мере прохождения данного курса.

Параграфы в HTML

Тег <p>

Ну что ж, приступим к тегу P и его атрибутам.
Переходим в папку нашего сайта, открываем файл index через Notepad (скачать эту программу вы можете из вводного урока по HTML). Вот документ открыт, и давайте сначала разберемся для чего вообще нужен этот тег P, и его основные особенности. Тег P выполняет роль параграфа, с помощью данного тега и его атрибутов мы можем форматировать наш текст. Например, с помощью атрибута align, мы задаем значение выравнивания текста.

<p align="right"> Добро пожаловать на мой сайт </p>

В данном случае right. Мы можем применить такие значения как center, left, right и выровнять можем по обоим краям justify. Это только атрибут align.

Конечно же у этого тега есть и другие атрибуты. Но для начала я расскажу про особенности тега P и тег center.

Особенность тега Р заключается в том что закрывающий тег </P> делает перенос на следующую строку. И если вам этот перенос не нужен то рекомендую использовать тег <center> например для того что бы текст центрировался

<center> Центрированный текст без использования тега Р </center>  

На начало записи этого урока я хотел рассмотреть и другие атрибуты, но решил сделать это в следующих уроках, так как там будет более понятна работа этих атрибутов.

Давайте посмотрим, что у нас получилось, сохраняем, открываем документ. Как видите центрированный текст без использования тега P отобразился у нас по центру.
Давайте попробуем у атрибута align ввести значение justify. Переходим в код, и в значение атрибута align вводим justify.

Жмем кнопку сохранить, переходим в браузер, обновляем и видим. У меня, почему то не отобразилась работа атрибута align, возможно последняя версия браузера Opera, не поддерживает значение  justify. Но в любом случае, он применяется очень редко, и думаю, вам он не понадобится.

Тег <div>

Теперь переходим к тегу DIV.

Давайте для примера введем еще одну строку

<div>Какой-нибудь текст помещенный в тег </div>

Данный тег имеет атрибут align, который мы уже прошли, а так же он имеет атрибут title. Он означает, что будет дана подсказка, всплывающая, если курсор мыши задержится на содержимом данного блока. Сейчас мы это и посмотрим.

<div title="текст">Какой-нибудь текст помещенный в тег </div>

Сохраняем, обновляем страницу браузера, наводим курсор на текст «Какой-нибудь текст, помещенный в тег», и видим, что всплывает подсказка «текст».

Заголовки в HTML

Переходим к заголовкам H.

Введем еще одну строку нашего кода. Чем меньше уровень от одного и до 6, тем больше заголовок.

<h3> Текст заголовка h3</h3><h2> Текст заголовка h2</h2><h6> Текст заголовка h6</h6>

Проверяем в браузере.
Как видите, тег H тоже делает перенос на следующую строку. Здесь очевидно, что чем меньше цифра, тем больше сам заголовок. Заголовок H6 меньше чем заголовок H3, заголовок H3 меньше, чем заголовок H2, и заголовок H2 меньше, чем заголовок H1.

Заголовки H так же имеет атрибут, который мы уже хорошо разобрали.

На этом мы заканчиваем 4 урок из видеокурса по html.

Подведем итог того что мы разобрали.

А разобрали мы:

• параграфы <div><p></p><h2></h2></div>
• атрибуты align и title

На этом все приступайте к следующему видеоуроку, в котором мы будем разбирать цвета. А именно цвет текста и цвет фона.

До встречи в следующем видеоуроке, посвященном изменению цветов текста и фона! 🙂