Всем привет, вы на канале "О деньгах в IT", а я автор этого канала - Сергей.
В прошлой статье мы разобрали что такое HTML, как создаются html-документы и из чего они состоят. Сейчас мы разберем создание текста, а также некоторое его форматирование.
Вспомним так же что вся графическая часть отображаемая на сайте прописывается в парном теге <body>
Заголовки
Первое, о чем хотел бы рассказать - это заголовки. Заголовки бывают 6 размеров и прописываются парными тегами:
<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h3>Заголовок</h3>
<h4>Заголовок</h4>
<h5>Заголовок</h5>
<h6>Заголовок</h6>
Где <h1> - самый большой заголовок, а <h6> - самый маленький.
При написании кода присутствует правило размерности заголовков: заголовок<h1> должен быть только один на странице и после него должен идти меньший заголовок. Может быть несколько одинаково меньших заголовков на странице.
К примеру: стоит заголовок <h1>, затем два заголовка <h2> и несколько заголовков <h3>. Писать заголовки в обратной последовательности запрещено, например: не должен идти заголовок <h3> перед <h2> в одном разделе.
Ниже приведены примеры правильной и неправильной расстановки заголовков:
Абзацы
Заголовки конечно хорошо, но ведь это только название раздела, а что будет внутри? Конечно же абзацы с текстом.
Абзацы в HTML прописываются парным тегом <p></p>
Форматирование текста
Теперь поговорим о форматировании нашего текста. Бывают случаи что нам нужно выделить те или иные слова в нашем тексте, для этого есть определенные теги:
- <strong></strong> - выделяет текст жирным начертанием
- <em></em> - выделяет текст курсивом
Оба примера приведены ниже:
Есть много других тегов форматирования: <small>, <s>, <sup>, <sub>, <u> и т.д. С ними, я предлагаю ознакомиться вам самостоятельно в процессе изучения HTML (в дальнейших уроках использовать неизвестные теги форматирования мы не будем).
Перенос строки
Допустим вы хотите отобразить какой ни будь стих на своем сайте, или другой текст, который надо делать построчно, а тег абзаца <p> этого не позволяет.
Согласитесь, выглядит не так красиво, как вы себе это представляли?! Специально для этого в html есть одинарный тег <br>, который добавляет перенос следующей строки.
Мы не добавляем тег <br> на последнюю строчку абзацев, потому что перенос следующей строчки нам не требуется (текста за ним нету), а тег <p> самостоятельно имеет для себя отдельную строчку, поэтому добавляет отступ от других таких же абзацев.
Итог статьи
Теперь когда мы научились писать заголовки, добавлять абзацы и даже форматировать их, можно собрать это всё воедино.
Мы добавим заголовок, возьмём стих в абзацы и отформатируем их. Первый абзац у нас будет выделен жирным шрифтом, а второй курсивом. Так же не забываем про перенос строк.
Вот теперь, это выглядит лучше, чем было изначально.
Советую вам сделать нечто похожее у себя, потому что практика в программировании, лучший способ запомнить и понять информацию. Если у вас остались какие либо вопросы, Welcome в комментарии - там мы обсудим и и решим ваши вопросы.
Заключение
С вами был канал "О деньгах в IT" и я его автор - Сергей. Не забывайте подписываться на наш канал, комментировать и оценивать статьи.
Всем хорошего дня, встретимся в следующей статье.