Новая Школа - онлайн-школа подготовки к ЕГЭ
Задача Задача №3144322
А
Аноним
27 апреля 2025 11:28 · публичный вопрос
А
Аноним

код для создания новостного сайта на 2 страницы в html

Ответ нейросети
27 апреля 2025 11:28

Конечно! Вот пример простого кода для создания новостного сайта на две страницы — главную страницу и страницу отдельного новости. Этот пример использует HTML и немного CSS для оформления.


1. Главная страница (index.html)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Новости</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 15px;
            text-align: center;
        }
        h1 {
            margin: 0;
        }
        .news-list {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .news-item {
            width: 80%;
            border: 1px solid #ccc;
            margin: 10px 0;
            padding: 10px;
            box-shadow: 2px 2px 5px #aaa;
            text-decoration: none;
            color: inherit;
            background-color: #f9f9f9;
        }
        .news-item:hover {
            background-color: #f1f1f1;
        }
        .news-title {
            font-size: 1.2em;
            margin: 0;
        }
        .news-date {
            color: #777;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
<header>
    <h1>Последние новости</h1>
</header>
<div class="news-list">
    <!-- Примеры новостей -->
    <a href="news1.html" class="news-item">
        <div class="news-title">Заголовок новости 1</div>
        <div class="news-date">01.11.2023</div>
        <p>Краткое описание новости 1...</p>
    </a>
    <a href="news2.html" class="news-item">
        <div class="news-title">Заголовок новости 2</div>
        <div class="news-date">02.11.2023</div>
        <p>Краткое описание новости 2...</p>
    </a>
</div>
</body>
</html>

2. Страница отдельной новости (news1.html)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <title>Новость 1</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 15px;
            text-align: center;
        }
        h1 {
            margin: 0;
        }
        article {
            max-width: 800px;
            margin: 20px auto;
        }
        .date {
            color: #777;
            margin-bottom: 20px;
        }
        p {
            line-height: 1.6;
        }
        a {
            display: inline-block;
            margin-top: 20px;
            text-decoration: none;
            color: #333;
            border: 1px solid #ccc;
            padding: 8px 12px;
            background-color: #f9f9f9;
        }
        a:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
<header>
    <h1>Новость 1</h1>
</header>
<article>
    <div class="date">01.11.2023</div>
    <p>Полное содержание новости 1. Здесь можно рассказать подробнее о новости, добавить фотографии, видео и другую информацию.</p>
    <!-- Можно вставить изображение -->
    <!-- <img src="image.jpg" alt="Изображение новости" style="width:100%; max-width:600px;"> -->
</article>
<a href="index.html">Вернуться к списку новостей</a>
</body>
</html>

Как использовать:

  1. Создайте три файла: index.html, news1.html, news2.html.
  2. В index.html разместите новости с ссылками на отдельные страницы.
  3. В news1.html и news2.html — содержимое полных статей.
  4. Можно добавить больше страниц по аналогии.

Если нужно расширить или добавить специальные функции, сообщите!