- О HTML-тегах заголовков и горизонтальной черты
<hr> - Видео по HTML-тегам заголовков и горизонтальной черты
<hr> - Повторение пройденного материала по HTML
- Тег заголовка
<h1>..<h6> - Тег горизонтальной линии
<hr> - Задание по использованию HTML-тегов заголовков и горизонтальной черты
<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-теги.
