создание веб страницы практическая работа 7 по информатике, тема драматический театр санкт-петербург

Конечно! Давайте создадим веб-страницу, которая будет содержать описание компьютера, его характеристики и другую полезную информацию.

Вот пример кода для такой страницы:

Практическая работа 7: Создание веб-страницы о компьютере

Цель:

Создать простую информационную веб-страницу с описанием компьютера, его характеристиками, изображениями и контактной информацией для запросов.

Пример кода:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой компьютер</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        header {
            text-align: center;
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            border-radius: 8px;
        }
        h1 {
            margin: 0;
        }
        section {
            margin-top: 30px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            margin-top: 15px;
        }
        footer {
            margin-top: 40px;
            text-align: center;
            color: #555;
        }
        button {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #2c3e50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #34495e;
        }
    </style>
</head>
<body>
    <header>
        <h1>Мой компьютер</h1>
    </header>

    <section>
        <h2>Описание компьютера</h2>
        <p>
            Этот компьютер предназначен для работы, игр и творчества. Он оборудован современными компонентами и может справляться с большинством задач, включая графику и видеомонтаж.
        </p>
        <img src="https://example.com/computer-image.jpg" alt="Компьютер">
    </section>

    <section>
        <h2>Характеристики</h2>
        <ul>
            <li><strong>Процессор:</strong> Intel Core i7-11700K</li>
            <li><strong>Оперативная память:</strong> 16 ГБ DDR4</li>
            <li><strong>Видеокарта:</strong> NVIDIA GeForce RTX 3060</li>
            <li><strong>Жесткий диск:</strong> 1 ТБ SSD</li>
            <li><strong>Материнская плата:</strong> ASUS ROG Strix Z590-E</li>
            <li><strong>Операционная система:</strong> Windows 10</li>
        </ul>
    </section>

    <section>
        <h2>Дополнительная информация</h2>
        <p>Компьютер поддерживает современные игры на высоких настройках и подходит для выполнения сложных графических задач.</p>
    </section>

    <footer>
        <button onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">Вернуть к началу</button>
        <p>&copy; 2023 Мой компьютер</p>
    </footer>
</body>
</html>

Объяснение кода:

• header: название страницы "Мой компьютер".
• Описание: кулон о назначении компьютера.
• Характеристики: список с основными характеристиками системы.
• Изображение: картинку компьютера можно заменить на свою (не забудьте изменить ссылку в src).
• Дополнительная информация: краткое описание функционала.
• footer: кнопка для возврата вверх и авторские права.

Вы можете изменить текст, добавлять дополнительные характеристики или изменять стили по своему усмотрению. Если есть другие пожелания или вопросы — дайте знать!

Конечно! Давайте создадим веб-страницу с указанным вами текстом. Я оформлю это с использованием HTML и CSS, чтобы страница выглядела аккуратно.

Вот пример кода:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Методика освоения новых программ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 20px;
        }
        header {
            text-align: center;
            background-color: #4C8BF5;
            color: white;
            padding: 20px 0;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        h1 {
            margin: 0;
        }
        main {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        p {
            line-height: 1.6;
        }
        footer {
            text-align: center;
            margin-top: 20px;
            color: #555;
        }
    </style>
</head>
<body>
    <header>
        <h1>Методика освоения новых программ</h1>
    </header>

    <main>
        <p>
            Знакомство с примерами, шаблонами и образцами документов. 
        </p>
        <p>
            Для того, чтобы оценить возможности новых программ, лучше всего воспользоваться уже имеющимися образцами документов, создавая их с помощью.
        </p>
        <p>
            Эксперимент с пробными документами. 
        </p>
        <p>
            Цель эксперимента — проверка команд редактирования.
        </p>
    </main>

    <footer>
        <p>&copy; 2023 Методика освоения новых программ</p>
    </footer>
</body>
</html>

Объяснение кода:

• HTML структура:

  • <!DOCTYPE html> определяет тип документа как HTML5.
  • head: включает метаданные о кодировке, названии страницы и стили CSS.
  • body: основной контент сайта, разделенный на header, main, и footer.

• CSS стили:

  • Задают стиль для основного текста, фона, шрифтов и некоторых элементов.
  • header: фоновый цвет, цвет текста, выравнивание по центру.
  • main: фон, тень и закругленные края.
  • footer: простой текст с авторскими правами.

Этот код можно сохранить в файл с расширением .html и открыть в любом браузере для просмотра. Вы можете изменять стили и содержимое по мере необходимости. Если у вас есть другие идеи или вопросы, дайте знать!

Да, конечно! Вы можете скопировать весь приведённый код и вставить его в текстовый редактор (например, Блокнот, Visual Studio Code или любой другой), а затем сохранить файл с расширением .html (например, index.html). После этого вы сможете открыть этот файл в любом веб-браузере (например, Chrome, Firefox и т.д.), и увидите, как выглядит созданная вами веб-страница.

Вот код для удобного копирования:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Методика освоения новых программ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 20px;
        }
        header {
            text-align: center;
            background-color: #4C8BF5;
            color: white;
            padding: 20px 0;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        h1 {
            margin: 0;
        }
        main {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        p {
            line-height: 1.6;
        }
        footer {
            text-align: center;
            margin-top: 20px;
            color: #555;
        }
    </style>
</head>
<body>
    <header>
        <h1>Методика освоения новых программ</h1>
    </header>

    <main>
        <p>
            Знакомство с примерами, шаблонами и образцами документов. 
        </p>
        <p>
            Для того, чтобы оценить возможности новых программ, лучше всего воспользоваться уже имеющимися образцами документов, создавая их с помощью.
        </p>
        <p>
            Эксперимент с пробными документами. 
        </p>
        <p>
            Цель эксперимента — проверка команд редактирования.
        </p>
    </main>

    <footer>
        <p>&copy; 2023 Методика освоения новых программ</p>
    </footer>
</body>
</html>

Если у вас возникнут вопросы или потребуется помощь, не стесняйтесь обращаться!

К сожалению, в текстовом формате ответов здесь у меня нет возможности создать интерактивную кнопку для копирования текста. Однако, я могу показать вам, как вы можете создать кнопку "Копировать" на вашей веб-странице. Эта кнопка будет копировать указанное содержимое в буфер обмена, когда пользователь нажимает на неё.

Вот пример кода с кнопкой для копирования текста:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Методика освоения новых программ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 20px;
        }
        header {
            text-align: center;
            background-color: #4C8BF5;
            color: white;
            padding: 20px 0;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        h1 {
            margin: 0;
        }
        main {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        p {
            line-height: 1.6;
        }
        footer {
            text-align: center;
            margin-top: 20px;
            color: #555;
        }
        button {
            padding: 10px 15px;
            background-color: #4C8BF5;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }
        button:hover {
            background-color: #3a74c2;
        }
    </style>
</head>
<body>
    <header>
        <h1>Методика освоения новых программ</h1>
    </header>

    <main>
        <p id="text-to-copy">
            Знакомство с примерами, шаблонами и образцами документов. 
            Для того, чтобы оценить возможности новых программ, лучше всего воспользоваться уже имеющимися образцами документов, создавая их с помощью.
            Эксперимент с пробными документами. 
            Цель эксперимента — проверка команд редактирования.
        </p>
        <button onclick="copyText()">Скопировать текст</button>
    </main>

    <footer>
        <p>&copy; 2023 Методика освоения новых программ</p>
    </footer>

    <script>
        function copyText() {
            const textElement = document.getElementById("text-to-copy");
            const range = document.createRange();
            range.selectNode(textElement);
            window.getSelection().removeAllRanges(); // Удалить любой ранее выбранный текст
            window.getSelection().addRange(range); // Выбрать текст
            document.execCommand("copy"); // Скопировать текст
            window.getSelection().removeAllRanges(); // Удалить выделение
            alert("Текст скопирован!"); // Оповещение пользователю
        }
    </script>
</body>
</html>

Как это работает:

1. Кнопка "Скопировать текст": Когда пользователь нажимает на кнопку, вызывается функция copyText().
2. Выбор текста: Внутри функции использованы методы для выделения текста, находящегося в элементе с id="text-to-copy".
3. Копирование: Метод document.execCommand("copy") копирует выделенный текст в буфер обмена.
4. Оповещение: После копирования показывается сообщение об успешном копировании.

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

• Скопируйте этот код в текстовый редактор и сохраните файл с расширением .html.
• Откройте файл в браузере. Теперь вы сможете нажать на кнопку и скопировать текст.

Если есть еще вопросы или нужна помощь — дайте знать!