🧱

Модуль 1. Введение и HTML

Занятие 3
Структура HTML-документа

Сегодня мы разберёмся, из каких частей состоит HTML-документ, и сделаем страницу «О себе» с заголовками разных уровней.

👀

Сегодня сделаем вот такое

✉️

Страница как письмо

📮 Конверт
<html>
🏷 Адрес и марка
<head> — служебное
📝 Письмо
<body> — то, что читают

У всех страниц мира одинаковый «конверт».

🦴

Каркас HTML-документа

  • <!DOCTYPE html> — «это HTML5»
  • <html lang="ru"> — корень, язык русский
  • <head> — служебная часть
  • <body> — видимая часть
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>О себе</title>
  </head>
  <body>
    <h1>Привет, я Маша!</h1>
  </body>
</html>
🔤

Зачем meta charset и title

charset="UTF-8" — чтобы русские буквы не превратились в:

Привет, РјРёСЂ! 😱

title — надпись на вкладке браузера, в закладках и в поиске.

🪆

Вложенность — как матрёшка

  • Внешний тег — родитель, вложенный — ребёнок
  • Закрываем в обратном порядке
  • Детей пишем с отступом

✅ <p><strong>да</strong></p>
❌ <p><strong>нет</p></strong>

📚

Заголовки h1–h6

  • h1 — название книги (один на странице)
  • h2 — главы
  • h3 — параграфы в главе

Выбираем по важности, а не по размеру!

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
🙋

Пример: страница «О себе»

Заголовки выстраиваются в понятный план:

  • h1 — кто я
  • h2 — разделы
  • h3 — подробности
<h1>Привет, я Маша!</h1>
<h2>Мои увлечения</h2>
<h3>Рисование</h3>
<h3>Плавание</h3>
<h2>Моя мечта</h2>
<h3>Сделать свою игру</h3>
🐞

Найди ошибки

В этом коде 3 ошибки. Найдёшь все?

Подсказка: смотри на head, на порядок заголовков и на закрывающие теги.

<html lang="ru">
<head>
  <title>О себе</title>
  <h1>Привет!</h1>
</head>
<body>
  <h2>Хобби</h2>
  <h5>Футбол</h5>
</html>
🃏

Запомни!

  • <!DOCTYPE html>Тип документа
  • <html lang="ru">Корень страницы, язык — русский
  • <head>Служебная часть
  • <meta charset="UTF-8">Кодировка, чтобы не было «кракозябр»
  • <title>Название вкладки
  • <body>Видимая часть
  • <h1>…<h6>Заголовки 1–6 уровня
⌨️

Практика: Страница «О себе» с заголовками

  1. Напиши в <title> своё имя — оно появится на вкладке.
  2. Добавь заголовок h1 «Привет, я …».
  3. Добавь три заголовка h2: «Мои увлечения», «Мой класс», «Моя мечта».
  4. Под одним из h2 добавь два заголовка h3 (например, «Спорт» и «Музыка»).

🚀 Со звёздочкой: Добавь все шесть уровней заголовков и сравни их размер. Как ты думаешь, зачем нужен h6?

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Придумай план своей страницы «О себе»: какие будут разделы (h2) и подразделы (h3).