Загрузка данных

Вот готовый код для файла 1.html. Я подобрал стили так, чтобы они максимально точно повторяли оформление с вашей фотографии (шрифты с засечками, выравнивание по центру, римские цифры).

### Код файла 1.html:<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Палеозойская эра</title>
    <style>
        /* Имитация печатного листа учебника */
        body {
            background-color: #dcdcdc; /* Серый фон вокруг страницы */
            font-family: "Times New Roman", Times, serif;
            display: flex;
            justify-content: center;
            padding: 20px;
            margin: 0;
        }

        .page-container {
            background-color: #ececec; /* Фон самого "листа" */
            border: 1px solid #444;
            width: 450px;
            padding: 30px;
            box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
            text-align: center; /* Центрируем заголовки */
        }

        .file-name {
            font-size: 18px;
            margin-bottom: 25px;
        }

        h1 {
            font-size: 24px;
            font-weight: bold;
            text-decoration: underline;
            margin: 0;
        }

        h2, h3 {
            font-size: 22px;
            font-weight: bold;
            font-style: italic;
            margin: 5px 0;
        }

        /* Список с римскими цифрами */
        ol {
            display: inline-block; /* Чтобы список центрировался как блок */
            text-align: left;      /* Но текст внутри был по левому краю */
            font-size: 20px;
            margin-top: 20px;
            padding-left: 40px;    /* Отступ для цифр */
            line-height: 1.4;
        }

        li {
            margin-bottom: 5px;
            padding-left: 15px; /* Расстояние между цифрой и текстом */
        }

        /* Футер со ссылкой */
        .footer-link {
            text-align: left;
            margin-top: 40px;
            font-size: 20px;
        }

        .footer-link a {
            color: #000;
            text-decoration: underline;
            font-weight: bold;
        }

        .note {
            font-style: italic;
        }
    </style>
</head>
<body>

<div class="page-container">
    <div class="file-name">файл 1.html</div>

    <h1>Эпоха динозавров</h1>
    <h2>Палеозойская эра</h2>
    <h3>Периоды:</h3>

    <!-- Список с типом "I" для римских цифр -->
    <ol type="I">
        <li>Кембрийский</li>
        <li>Ордовикский</li>
        <li>Силурийский</li>
        <li>Девонский</li>
        <li>Каменноугольный</li>
        <li>Пермский</li>
    </ol>

    <div class="footer-link">
        <a href="index.html">На главную</a> 
        <span class="note">(ссылка на index.html)</span>
    </div>
</div>

</body>
</html>

### Основные моменты:
1.  Римские цифры: В теге <ol type="I"> атрибут type="I" автоматически превращает обычный список в нумерованный римскими заглавными буквами.
2.  Шрифты: Используется стандартный Times New Roman, который обычно применяется в таких распечатках.
3.  Оформление заголовков: 
    *   Главный заголовок подчеркнут (text-decoration: underline).
    *   Подзаголовки сделаны курсивом (font-style: italic).
4.  Сендвич-структура: Контент центрирован, но сам список выровнен по левому краю внутри центрального блока, чтобы цифры стояли ровно друг под другом.