Давайте теперь изучим основные теги, которые используются на странице. В примерах далее я для простоты не буду приводить структуру всей страницы, считайте, что мы всегда работаем внутри тега body, если не указано иное.
Абзацы
Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге - каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).
Абзац создается с помощью тега <p> таким образом:
<p> Это абзац. </p> <p> Это еще один абзац. </p> <p> И еще один абзац. </p>
Задание №1
Создайте на вашей странице 5 абзацев с каким-нибудь текстом. Посмотрите, как эти абзацы будут выглядеть в браузере.
Заголовки страницы
Кроме абзацев важное значение на странице имеют заголовки. Их также можно сравнить с заголовками из книги - каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.
Заголовки создаются с помощью тегов <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, в h2 - название блоков страницы, в h3 - название подблоков и так далее.
Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Для примера сделаем заголовки всех уровней:
<h1>Заголовок h1</h1> <h2>Заголовок h2</h2> <h3>Заголовок h3</h3> <h4>Заголовок h4</h4> <h5>Заголовок h5</h5> <h6>Заголовок h6</h6>
Задание №2
Скопируйте приведенный выше код себе и запустите его в браузере. Посмотрите, как отличаются размеры заголовков.
Задание №3
Сделайте заголовок h1. Ниже сделайте заголовок h2, а под ним - абзац с текстом. После абзацев сделайте еще один заголовок h2, а под ним - 2 абзаца с текстом.
Жирный
Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст - достаточно взять его в тег <b>. Смотрите пример:
<p> Это обычный текст,
а это <b>жирный</b>
текст. </p>
Задание №4
Проверьте работу тега <b> на вашей странице.
Курсив
Кроме жирного можно сделать также и курсив с помощью тега <i>:
<p> Это обычный текст,
а это <i>курсивный</i>
текст. </p>
Задание №5
Проверьте работу тега <i> на вашей странице.
Замечания
Обратите внимание на то, что теги <b> и <i> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а указанные теги делают жирным или курсивом отдельные кусочки текста.
Сделайте скрин экрана компьютера и вышлите результат в это телеграмм канал:
Подпишитесь на Телеграмм канал и Скрин отправьте комментарием в закреплённом сообщении канала.