Итак, мы переходим к видимой части страницы – это теги которые будут находиться внутри тега <body> и здесь уже будет немножко поинтереснее.
Первым делом откройте заметку «Статья про время» - это статья на английском языке. Для изучения HTML она идеально подходит потому что она вас не будет отвлекать, т.е. вы не будете ее читать, здесь мы будем сосредоточены именно на языке HTML. Скопируйте ее и вставьте в наш документ между тегами <body>. Пока мы не указывали никаких форматирующих тегов, давайте посмотрим как браузер отображает эту статью. Здесь она у нас красиво отформатирована, посмотрим, будет ли у нас так же в браузере. И что мы видим? Мы видим сплошную кашу. Почему это произошло? Потому что браузеру все это форматирование безразлично, он на него вообще не смотрит, ему не интересны ни пробелы, ни переносы строк, его интересуют только теги. Если мы посмотрим на статью, то увидим что, она у нас разбита на параграфы, и это дает уже совсем другой вид.
Параграфы
И первый тег который мы выучим – это тег <p> (англ. Параграф), это тоже парный тег, т.е. тегом <p> мы говорим где у нас начинается параграф, а тегом </p> - где он заканчивается. Давайте выделим все наши параграфы таким образом: Даже если мы напишем весь текст в одну строку, браузер нам отобразит текст в соответствие с теми тегами, которые мы ему указали. Обновим нашу страницу и увидим, что теперь каждая строка у нас идет в новом параграфе. Но это еще не все, если мы посмотрим в исходную страницу, то увидим, что у нас тут есть заголовки и подзаголовки.
Заголовки
Как же они создаются? За заголовки отвечают шесть парных тегов: от <h1> (самый крупный) до <h6> (самый маленький). Заголовок <h1> используется для обозначения самого главного заголовка на странице (названия статьи) и соответственно используется на один, максимум два раза. Вот мы этим тегом выделили название статьи:
Дальше у нас идут подзаголовки – это Retyping the same…и Failing to manage… Давайте их обозначим заголовком второго уровня, который чуть поменьше:
Сохраняем, обновляем и видим что первая строка превратилась в огромный заголовок – это самый большой заголовок <h1> (заголовок первого уровня, топовый заголовок), а подзаголовки получились поменьше – они уже уровня <h2>. Можно еще посмотреть заголовки других уровней. Поставьте первому подзаголовку уровень <h3>, а второму уровень <h5>. Сохраняем, обновляем и видим что у нас заголовок <h5> совсем маленький – он даже меньше текста, но в любом случае он жирный. <h3> у нас поменьше, чем <h2> но все-таки крупнее текста. Также можно посмотреть, как выглядят заголовки <h6> и <h4>. На этом все. Что касается заголовков и параграфов мы с вами в этом уроке изучили, при этом эти теги используются очень часто (при создании практически любого документа), поэтому их всегда нужно держать в голове и знать что параграфы создаются с помощью тега <p>, заголовки создаются с помощью тегов <h1>-<h6>. На этом мы остановимся и в следующем уроке продолжим изучение HTML.