Видео-уроки HTML. Часть 5. Теги заголовков h1…h6 и горизонтальной черты hr



О HTML-тегах заголовков и горизонтальной черты <hr>

Это пятое видео, в котором мы повторим то, что уже узнали из предыдущих видео и конечно узнаем что-то новое. Новым будет материал по заголовкам (теги <h1>..<h6>), которые можно прописывать в HTML и про тег горизонтальной линии (тег <hr> - horizontal rule), который позволяет явно отделять разные части текста друг от друга.

Видео по HTML-тегам заголовков и горизонтальной черты <hr>

Повторение пройденного материала

Для всех кто хочет повторить пройденный материал в виде экспресс-процедуры, создайте HTML-документ с повторяемыми тегами в видео:

Мы знаем, что лучше при написании HTML-документа пользоваться простыми правилами Codestyle:

  • все теги, требующие закрытия должны быть закрыты,
  • вкладывать одни контейнеры в другие с отступом в 2 пробела.

Также помним, что HTML-документ состоит из главного контейнера <html>, в который вложены контейнеры <head> (голова) и <body> (тело).

Есть тег заголовка документа <title>, который должен лежать в контейнере <head>.

В контейнере <body> находится собственно сам текст, который мы размечаем с помощью тегов. А мы уже знаем теги:

  • <!-- -->Комментариев, которые не отображаются в браузере.
  • Тегом <p> мы размечаем абзацы, которые при отображении отделяются друг от друга горизонтальным отступом.
  • Если нужно просто отобразить перевод на новую строку, для этого служит тег <br>.
  • Тег <blockquote> выделяет при отображении в браузере блок текста не только горизонтальными, но и вертикальными отступами.
  • Ну и, если есть текст, который нужно вывести «как есть» (со всеми пробелами и переводами строк), то для этого можно использовать тег <pre>.

В конце статьи будет ссылка с архивом HTML-документов этого урока.

Итак, мы уже умеем разбивать текст на абзацы. Но текст часто бывает длиннее пары абзацев. Люди иногда пишут, пишут много, и иногда столько, что хватает на целую книгу.

Для того, чтобы было проще воспринимать длинные тексты, их дробят на более мелкие фрагменты. Тома, части, главы, подглавы, пункты, подпункты и тому подобное.

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

HTML позволяет производить разбивку текста на логические части, вложенные друг в друга с помощью заголовков различного уровня. Уровень 1 – самый верхний уровень [как, например, название книги или тома]. Уровень 6 – самый нижний уровень [как, например, название подглавы]. Промежуточные уровни 2, 3, 4, 5 позволяют грамотно и логично разбить любой текст на усмотрение автора.

Тег заголовка <h1>..<h6>

Заголовок в HTML начинается с буквы h за которой сразу указывается уровень (от одного до щести).

ВАЖНО: Каждый заголовок начинается с тега <h1>..<h6> и заканчивается закрывающим тегом </h1>..</h6>.

Пример разметки заголовков

Вернёмся к нашей песенке и выделим её название в виде заголовка <h1>. В тег <h2> внесём слова «Детская песенка».

В результате получим ещё более чёткую разметку при отображении текста песенки, где текст – это текст, а названия – это названия.

Восприятие информации с монитора и из печатной книжки отличается, но логика восприятия заголовков, подзаголовков и основного текста остаётся неизменной. Поэтому заголовками пользоваться не только можно, но и нужно!

<html>
  <head>
    <title>Песенка</title>
  </head>

  <body>
    <h1>До чего дошёл прогресс.</h1>
    <h2>Детская песенка</h2>

    <p>До чего дошел прогресс!<br>
    Было времени в обрез,<br>
    А теперь гуляй по свету —<br>
    Хочешь с песней, хочешь без!</p>

    <p>Позабыты хлопоты,<br>
    Остановлен бег.<br>
    Вкалывают роботы,<br>
    Счастлив человек!</p>
  </body>

</html>

Тег горизонтальной линии <hr>

Иногда хочется как-то явно отделить одну часть информации от другой. Для этого можно воспользоваться тегом <hr>. Тег <hr> выводит горизонтальную черту:


ВАЖНО: Тег <hr> одинарный, т.е. закрывать его, как и тег <br>, не нужно.

Пример разметки с помощью тега <hr>

Вернувшись к нашей песенке, можно добавить горизонтальную черту после заголовков и после текста песенки. Это ещё более явно выделит сам текст при отображении на странице браузера.

<html>
  <head>
    <title>Песенка</title>
  </head>

  <body>
    <h1>До чего дошёл прогресс.</h1>
    <h2>Детская песенка</h2>

    <hr>

    <p>До чего дошел прогресс!<br>
    Было времени в обрез,<br>
    А теперь гуляй по свету —<br>
    Хочешь с песней, хочешь без!</p>

    <p>Позабыты хлопоты,<br>
    Остановлен бег.<br>
    Вкалывают роботы,<br>
    Счастлив человек!</p>

    <hr>

  </body>

</html>

Задание по использованию HTML-тегов заголовков и горизонтальной черты <hr>.

Для того, чтобы закрепить увиденное, предлагаю вам самостоятельно создать HTML-документ, в котором будут использоваться теги заголовков и тег горизонтальной черты.

Если что-то не получается, то по этой ссылке можно скачать примеры из этого видео. Они находится в zip-архиве, так он скачается. Иначе файлы просто открывались бы в браузере. И конечно всегда можете задавать свои вопросы.


В следующем видео продолжим знакомство с другими возможностями форматирования вывода текста, которые позволяют HTML-теги.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Старт! Горячий старт на просторы интернета
Старт! Горячий старт на просторы интернета
Старт! Меню