Онлайн-расчёт
kwomaster7@gmail.com

Прием заявок осуществляется: Пн-Пт с 9:00 по 17:00. Сб-Вс - выходной!

8(068)95-13-385 8(050)95-13-385

Вы здесь: главная / полезное / HTML Теги Форматирования Текста

Василий Кулик
08.02.2020
12 просмотров
Дата обновления: 08.02.2020

HTML Теги Форматирования Текста

Вступление:

На очереди HTML теги форматирования текста (h1-h6, p, br, em, i, b, strong и др.). Безусловно Вы работали с редактором текста Microsoft Word и форматировали текст, предавали более читаемый вид, форматируя его. Указывали заголовки, списки, размер, курсивность.

Язык HTML имееет все возможности форматирования текста аналогичные Microsoft Word. В ворде Вы выделяли текст и форматировали лёгким движением мыши, а на ВЕБ-странице нужно оборачивать в html-теги форматирования. Сам процес более длинный и для некоторых может показаться сложным и скушным.

Возможности тегов форматирования текста:

h1-h6 - теги заголовков

Перед начало создания любого сайта, первый обязательный этап - написание начальной структуры html-документа. Между тегами <body> вставляем теги форматирования текста

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Создание сайтов</title>
</head>
<body>

</body>
</html>

Начальная структура есть. Заголовки выглядят так:

<!DOCTYPE html>
<html lang="ru">
<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>

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

При создании сайтов, на практике Вы можете пользоваться заголовками так:

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Создание сайтов</title>
</head>
<body>
 <h1>Продукт Хурма</h1>
 <h2>Польза Хурмы</h2>
 <h3>Вред Хурмы</h3>
 <h4>Рецепты из хурмы</h4>
 <h5>Стоимость хурмы</h5>
 <h6>Отзывы</h6>
</body>
</html>

p - абзац

Все послушные ученики из школы знают значение и смысл абзаца. Тег p позволит разбивать текст на абзацы:

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Создание сайтов</title>
</head>
<body>
 <p>Первый абзац, с смыслом</p>
 <p>Второй абзац, с смыслом</p>
 <p>Третий абзац, с смыслом</p>
</body>
</html>

br - переход на новую строку

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Создание сайтов</title>
</head>
<body>
 <p>В этом тексте есть переход на новую строку, <br>при этом абзац один.</p>
</body>
</html>

i - курсивное начертание

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Создание сайтов</title>
</head>
<body>
 <p>Текст статьи, а вот <i>курсивное начертание</i></p>
</body>
</html>

Текст, "курсивное начертание" будет отображаться курсивом, поскольку заключен в тег i

b - жирное начертание, без придания ему особой важности

Углубимся чуть подробнее. Для продвижения сайта в поисковых системах необходимо, для начало, писать текст. Иногда бывает надобность выделить жирным наччертанием кусок текста, чтобы он бросался в глаза посетителю. Выделяя кусок текста тегом b - поисковая система будет понимать, что выделенный фрагмент не несет никакой важности.

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Создание сайтов</title>
</head>
<body>
 <p>Текст статьи, а вот <b>жирное начертание без придания особой важности</b></p>
</body>
</html>

strong - жирное начертание, определяет важность отмеченного текста

Тег strong выделает текст жирным наертанием, но дополнительно говорит поисковой системе: это кусок текста имеет особую важность.

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Создание сайтов</title>
</head>
<body>
 <p>Текст статьи, а вот <strong>жирное начертание с приданием особой важности</strong></p>
</body>
</html>

ul - маркированный список

Со списками всё, как у Ворде. Нет смысла комментировать, просто привожу размерку кода.

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Создание сайтов</title>
</head>
<body>
 <ul>
  <li>06:00: Проснулся и устал</li>
  <li>06:05: Разминка и утренняя гимнастика</li>
  <li>06:15: Завтрак</li>
  <li>07:00: Дорога на работу</li>
  <li>16:00: Дорога домой</li>
  <li>16:45: Ужин</li>
  <li>17:00: отдых, занятие хобби</li>
  <li>21:00: Вечерняя гигиена, сон</li>
 </ul>
</body>
</html>

ol - номерованный список

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Создание сайтов</title>
</head>
<body>
 <ol>
  <li>Выбор семен для посева</li>
  <li>Подготовка почвы к посеву</li>
  <li>Посев и ухаживание</li>
  <li>Обработка от болезней</li>
  <li>Сбор урожая</li>
 </ol>
</body>
</html>

Выводы

Вот так можно легко форматировать текст для ВЕБ-страниц. Ваше задание скопировать участки кода по очереди, открыв в браузере посмотреть на результат. HTML теги форматирования текста (h1-h6, p, br, em, i, b, strong и др.) Вы обязаны знать на наизусть. Как Вам информация без "воды"? Напишите в комментариях!

Закрепить полученные знания онлайн

Комментариев нет!

Будьте первым, кто оставит комментарий / своё мнение / задаст вопрос...

Предложить комментарий