---

<!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>

    <!-- Шапка сайта -->
    <header>
        <h1>Мой учебный веб-сайт</h1>
        <nav>
            <a href="#about">О проекте</a>
            <a href="#lists">Списки</a>
            <a href="#table">Таблица данных</a>
            <a href="#gallery">Галерея</a>
        </nav>
    </header>

    <!-- Основное содержимое -->
    <main>

        <!-- Секция со списками -->
        <section id="lists">
            <h2>Примеры списков</h2>

            <h3>Маркированный список (ul) — Технологии:</h3>
            <ul>
                <li>HTML5 (разметка структуры)</li>
                <li>CSS3 (стили и оформление)</li>
                <li>JavaScript (интерактивность)</li>
            </ul>

            <h3>Нумерованный список (ol) — Этапы разработки:</h3>
            <ol>
                <li>Создание структуры (каркаса)</li>
                <li>Наполнение контентом</li>
                <li>Стилизация элементов</li>
            </ol>
        </section>

        <hr> <!-- Разделительная линия -->

        <!-- Секция с таблицей -->
        <section id="table">
            <h2>Пример таблицы данных</h2>

            <table border="1" cellpadding="10" cellspacing="0">
                <thead>
                    <tr>
                        <th>№</th>
                        <th>Наименование тега</th>
                        <th>Назначение тега</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>1</td>
                        <td>&lt;ul&gt;</td>
                        <td>Маркированный список</td>
                    </tr>

                    <tr>
                        <td>2</td>
                        <td>&lt;ol&gt;</td>
                        <td>Нумерованный список</td>
                    </tr>

                    <tr>
                        <td>3</td>
                        <td>&lt;table&gt;</td>
                        <td>Контейнер для таблицы</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <hr>

        <!-- Секция с изображением -->
        <section id="gallery">
            <h2>Работа с изображениями</h2>

            <figure>
                <!-- Замените "photo.jpg" на имя вашего файла с картинкой -->
                <img src="photo.jpg" alt="Пример веб-разработки" width="400">
                <figcaption>Рис. 1 — Пример вставки изображения на страницу</figcaption>
            </figure>
        </section>

    </main>

    <!-- Подвал сайта -->
    <footer>
        <p>&copy; 2026 Практическая работа по HTML. Все права защищены.</p>
    </footer>

</body>
</html>