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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Лабораторная работа CSS</title>

    <!-- Подключение CSS -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <!-- Объемный заголовок -->
    <div class="title-box">
        <h1 class="shadow">НЕМНОГО ИСТОРИИ</h1>
        <h1 class="main-title">НЕМНОГО ИСТОРИИ</h1>
    </div>

    <p>
        В течение многих лет предпринималось немало попыток разработать
        концепцию универсальной информационной базы данных, в которой можно
        было бы не только получать информацию из любой точки земного шара,
        но и иметь удобный способ связи информационных сегментов друг с другом,
        так чтобы наиболее важные данные могли быть быстро найдены.
    </p>

    <p>
        В 60-е годы исследования в этой области породили понятие
        «информационной Вселенной», которая преобразила бы всю информационную
        деятельность.
    </p>

    <div class="box">
        Этот абзац оформлен курсивом и имеет выпуклую трехмерную рамку.
    </div>

    <h2>WWW — "ВСЕМИРНАЯ ПАУТИНА"</h2>

    <p>
        WWW — это аббревиатура от "World Wide Web" ("Всемирная паутина").
        Официальное определение World Wide Web звучит как мировая виртуальная
        файловая система — широкомасштабная гипермедиа-среда.
    </p>

    <p>
        Проект WWW возник в начале 1989 года в Европейской лаборатории физики
        элементарных частиц (CERN) в Женеве.
    </p>

    <!-- Ссылки между страницами -->
    <div class="links">
        <a href="page2.html">Перейти на страницу 2</a>
    </div>

</body>
</html>



/* Фон страницы */
body {
    background-color: gray;
    margin: 20px;
}

/* Заголовок первого уровня */
h1 {
    font-family: "Times New Roman";
    font-size: 26pt;
    color: blue;
    text-align: center;
    margin: 0;
}

/* Объемный эффект */
.title-box {
    position: relative;
    height: 70px;
}

.shadow {
    position: absolute;
    top: 4px;
    left: 4px;
    color: darkgray;
}

.main-title {
    position: absolute;
    top: 0;
    left: 0;
}

/* Заголовок второго уровня */
h2 {
    font-family: Arial;
    font-size: 20pt;
    color: green;
    text-align: right;
}

/* Абзацы */
p {
    color: red;
    background-color: yellow;
    text-align: justify;
    text-indent: 40px;
    padding: 10px;
    font-size: 16px;
}

/* Абзац с рамкой */
.box {
    font-style: italic;
    border-style: outset;
    border-width: 5px;
    border-color: black;
    padding: 15px;
    margin: 20px 0;
    background-color: white;
}

/* Ссылки */
.links {
    margin-top: 30px;
}

a {
    font-size: 18px;
    color: darkblue;
    text-decoration: none;
}

a:hover {
    color: white;
}




<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Страница 2</title>

    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <h1>ВТОРАЯ СТРАНИЦА</h1>

    <p>
        Это вторая HTML-страница, связанная гиперссылкой с первой страницей.
    </p>

    <h2>CSS</h2>

    <p>
        CSS используется для оформления внешнего вида веб-страниц.
    </p>

    <div class="box">
        Пример блока с трехмерной рамкой.
    </div>

    <div class="links">
        <a href="index.html">Вернуться назад</a>
    </div>

</body>
</html>