December 14, 2024

Теги HTML

Начнём подробнее изучать HTML. Этот язык создаёт каркас сайта. Название расшифровывается как Hyper Text Markup Language.Для размещения на странице любого контента (текст, изображения, видео) заключают в управляющие конструкции — теги.

Обычно HTML-элемент состоит из тегов и размещённого между ними содержания. У любого HTML-тега есть имя и угловые скобки. Например, тег самого главного заголовка носит имя h1. Это сокращение от heading 1, «заголовок первого уровня».

Теги расставляются как дорожные знаки с названием города. На въезде в город знак объявляет его имя, а на выезде перечёркнутое имя сообщает, что город остался позади. Так и в начале HTML-элемента ставят открывающий тег, а в конце — закрывающий тег, где имя будто перечёркнуто косой чертой. Созданный элемент называют по имени тега.

От теории к практике! Код нужно трогать руками, а не теоретизировать о нём.

Сейчас тег заголовка первого уровня написан с ошибкой. Замените его на правильный, чтобы починить разметку. Не забудьте про закрывающий тег!

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Исправляем тег заголовка первого уровня</title>
  </head>
  <body>
    <!— Выполняйте задание тут -->
    <заголовок1>The Life of</заголовок1>
  </body>
</html>

ссылка на codesandbox для выполнения заданий https://codesandbox.io/p/sandbox/dnk39n?file=%2Findex.html%3A13%2C1

Дальше добавим заголовки всех уровней. Всего существует шесть уровней заголовков. Чем больше уровень — тем меньше этот заголовок значит для браузера. Теги для всех уровней похожи, меняется только цифра. Например, второй уровень заголовка — это тег <h2>. Его и добавим ниже, сразу под <h1>. Внутрь положите текст Я Шрэк.

Внутри <h3>положите текст Я Гарри Поттер

Внутри <h4>положите текст Я не Поттер, а Гермиона

Внутри <h5>положите текст Я не любитель этого фильма

Внутри <h6>положите текст Пока Поттеры, свами не интересно, Задроты!!!

Пример:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Добавляем заголовок второго уровня</title>
  </head>
  <body>
    <h1>Я Шрэк</h1>
  </body>
</html>

ссылка на выполнений https://codesandbox.io/p/sandbox/sxhy98?file=%2Findex.html%3A1%2C1-13%2C1

В результате у вас получится 6 строчек текста разного размера.