---

<!-- Заголовок первого уровня -->
<h1>Привет, мир!</h1>

<!-- Абзац текста -->
<p>Это мой первый урок по HTML и CSS. Наведи мышь на заголовок и нажми на него — цвет будет меняться!</p>

<!-- Ссылка на сайт -->
<a href="https://example.com" target="_blank">Перейти на дургой сайта</a>

<!-- Изображение -->
<img src="https://avatars.mds.yandex.net/get-games/1881957/2a000001a0699be6610fde01951a970e7a10//pjpg526x314" alt="Случайная картинка" width="300">

    <!-- Внутренний CSS: стили пишутся прямо в HTML-файле -->
<style>
    /* Базовый стиль для заголовка h1 */
    h1 {
        color: darkblue;              /* цвет текста — тёмно-синий */
        font-size: 48px;                /* размершрифта */
        text-align: center;             /* выравнивание по центру */
        box-shadow: 0px 6px 40px black;/* тень для блока */
        cursor: pointer;                /* курсор превращается в «руку» */
        transition: 300ms;               /* плавная анимация изменений */
    }

    /* Стиль при наведении курсора на h1 (:hover) */
    h1:hover {
        color: crimson;               /* текст становится малиновым */
    }

    /* Стиль в момент нажатия на h1 (:active) */
    h1:active {
        color: gold;                  /* текст становится золотым */
        transform: scale(0.95) translateY(8px);         /* заголовок слегка уменьшается */
    }
</style>