---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Алгоритмы интернет-поиска</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Исследование алгоритмов интернет-поиска</h1>
        <p>Как поисковые системы находят нужные сайты</p>
    </header>

    <nav>
        <a href="#intro">Введение</a>
        <a href="#algorithms">Алгоритмы</a>
        <a href="#ranking">Ранжирование</a>
        <a href="#demo">Демо-поиск</a>
    </nav>

    <main>
        <section id="intro">
            <h2>Введение</h2>
            <p>
                Поисковые системы (Google, Яндекс, Bing) ежедневно обрабатывают миллиарды запросов.
                В основе их работы лежат сложные алгоритмы: обход сайтов (краулинг), индексация,
                ранжирование и выдача результатов.
            </p>
        </section>

        <section id="algorithms">
            <h2>Основные алгоритмы</h2>
            <div class="cards">
                <div class="card">
                    <h3>Краулинг</h3>
                    <p>Роботы-пауки обходят страницы по ссылкам и собирают данные.</p>
                </div>
                <div class="card">
                    <h3>Индексация</h3>
                    <p>Собранная информация структурируется и сохраняется в базу данных.</p>
                </div>
                <div class="card">
                    <h3>Ранжирование</h3>
                    <p>Страницы сортируются по релевантности с помощью алгоритмов (PageRank, BM25, нейросети).</p>
                </div>
                <div class="card">
                    <h3>Выдача</h3>
                    <p>Пользователь получает список наиболее подходящих результатов.</p>
                </div>
            </div>
        </section>

        <section id="ranking">
            <h2>Факторы ранжирования</h2>
            <ul>
                <li>Релевантность контента запросу</li>
                <li>Качество и количество обратных ссылок</li>
                <li>Скорость загрузки сайта</li>
                <li>Мобильная адаптация</li>
                <li>Поведенческие факторы (CTR, время на странице)</li>
                <li>Свежесть контента</li>
            </ul>
        </section>

        <section id="demo">
            <h2>Демо: мини-поисковик</h2>
            <p>Введи запрос и посмотри, как работает простейший алгоритм ранжирования:</p>
            <div class="search-box">
                <input type="text" id="query" placeholder="Например: алгоритм поиска">
                <button onclick="search()">Найти</button>
            </div>
            <div id="results"></div>
        </section>
    </main>

    <footer>
        <p>Учебный проект по исследованию алгоритмов поиска</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>