раздел 01

HTML: структура страницы

HTML - это разметка. Ты берёшь содержание (текст, картинки) и помечаешь, что есть что: вот заголовок, вот абзац, вот ссылка. Браузер читает эти пометки и рисует страницу.

Теги и элементы

Пометки называются тегами. Тег - это слово в угловых скобках. Почти всегда тегов два: открывающий и закрывающий, а между ними содержимое. Открывающий тег p, текст, закрывающий тег - вместе это элемент (в данном случае абзац).

Закрывающий тег отличается косой чертой. Картинки закрывающего тега не требуют - там нечего оборачивать.

Из чего собрана страница

Самые частые элементы, которые ты будешь узнавать:

Заголовки

От самого крупного до мелкого. Главный заголовок страницы - один, подзаголовки - сколько нужно.

Абзацы

Обычный текст. Каждый кусок текста живёт в своём абзаце.

Ссылки

Кликабельный текст, который ведёт на другую страницу или сайт.

Картинки

Изображение со ссылкой на файл и подписью на случай, если картинка не загрузится.

Списки

Маркированные (точки) и нумерованные. Пункты внутри - отдельные элементы.

Кнопки

То, на что нажимают: отправить форму, открыть меню, что-то запустить.

Короткий пример

Вот как выглядит крошечный кусок страницы. Читать его несложно, даже если ты никогда такого не писал:

<h1>Привет</h1>
<p>Это абзац текста на странице.</p>

<a href="https://ai-community.com">Перейти на сайт</a>

<img src="cat.jpg" alt="Рыжий кот" />

<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ul>

<button>Нажми меня</button>

Видно логику: h1 - крупный заголовок, p - абзац, a - ссылка (адрес лежит в href), img - картинка (файл в src, подпись в alt), ul - список с пунктами li, button - кнопка.

Не зубрить, а узнавать

Не надо запоминать все теги наизусть - их сотни, и ИИ расставит их сам. Задача проще: открыв сгенерированный код, узнавать знакомое. Увидел h1 - понятно, это заголовок. Увидел button - кнопка. Этого хватает, чтобы ориентироваться и точечно вмешиваться.