Из предыдущего урока мы поняли, что контент сайта состоит из блоков, а каждый блок содержит в себе заголовки, текст, картинки и ссылки. Сегодня я расскажу как работать с текстом в HTML.
Понятно, что текст содержит заголовки, подзаголовки и абзацы.
Заголовки.
Заголовки имеют 6 уровней.
Самым верхним уровнем является уровень 1 (тег <h1>), а самым нижним — уровень 6 (тег <h6>).
Чем выше уровень, тем больше размер шрифта заголовка.
<html>
<head>
<meta charset="utf-8">
<title>Заголовки</title>
</head>
<body>
<h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
</body>
</html>
В браузере этот код выглядит вот так:
Абзац.
Абзац заключается в тег <p></p>.
Абзацы можно разделить горизонтальной линией <hr>.
Для переноса части текста на другую строку, используется тег <br>.
Теги <hr> и <br> закрывать не нужно.
<html>
<head>
<meta charset="utf-8">
<title>Абзац</title>
</head>
<body>
<p>
Здесь располагается текст первого абзаца.
</p>
<hr>
<p>
А здесь располагается текст следующего абзаца.
</p>
<hr>
<p>
А так можно написать стихи:
<br>
Мороз и солнце
<br>
День чудесный
</p>
</body>
</html>
В браузере это выглядит вот так:
Свободное форматирование.
Свободное форматирование текста заключается в тег <pre></pre>.
<html>
<head>
<meta charset="utf-8">
<title>Свободное форматирование</title>
</head>
<body>
<pre>
+OOO++OOO+
OOOOOOOOOO
+OOOOOOOO+
++OOOOOO++
+++OOOO+++
++++OO++++
</pre>
</body>
</html>
В браузере это выглядит так:
Выделение слов внутри текста.
Для того, чтобы выделить слово курсивом, это слово оборачивается парным тегом <em></em>.
<html>
<head>
<meta charset= "utf-8">
<title>курсив</title>
</head>
<body>
<p>
Это абзац текста, в котором некоторое слово выделено <em>курсивом</em>.
</p>
</body>
</html>
Чтобы выделить слово жирным, оборачиваем его в тег <strong></strong>.
Нередко при работе с текстом в HTML возникает необходимость использовать верхние и нижние индексы, например в формулах.
<sub>нижний индекс</sub><sup>верхний индекс</sup>
Чтобы добавить слову какой-нибудь стиль, то оборачиваем его в тег <span></span>, а сами стили прописываем в файле CSS.
Как оформить текст с помощью CSS читайте здесь
В следующем уроке мы научимся создавать списки с помощью HTML.