Вопрос от Анонимного юзера 28 июля 2025 07:19
Создание веб страницы практическая работа 7 по информатике, тема драматический театр санкт-петербург
Ответ нейросети
28 июля 2025 07:19
Конечно! Ниже приведен пример создания базовой веб-страницы для практической работы по информатике, связанной с темой "Драматический театр Санкт-Петербурга". Я подготовлю структуру HTML, добавлю стили CSS для оформления и возможные интерактивные элементы, если потребуется.
Практическая работа 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);
}
.gallery {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 15px;
}
.gallery img {
width: 200px;
height: auto;
border-radius: 4px;
border: 1px solid #ccc;
transition: transform 0.2s;
}
.gallery img:hover {
transform: scale(1.05);
}
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>
Драматический театр Санкт-Петербурга — один из старейших театров города, основанный в 19 веке. За свою историю он стал центром культурной жизни города, став местом постановки классических и современных пьес, а также местом работы выдающихся актеров и режиссеров.
</p>
</section>
<section>
<h2>Фотогалерея</h2>
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Marinsky-Theatre-Alexander-Gribayev-2.jpg" alt="Здание театра 1">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Marinsky_Theatre.jpg" alt="Здание театра 2">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Marinsky_Theatre_inside_view.jpg" alt="Интерьер театра">
</div>
</section>
<section>
<h2>Контактная информация</h2>
<p>Адрес: Итальянская улица, д. 23, Санкт-Петербург</p>
<p>Телефон: +7 (812) 123-45-67</p>
<p>Время работы: с 10:00 до 20:00</p>
</section>
<footer>
<button onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">Вернуть к началу</button>
<p>© 2023 Драматический театр Санкт-Петербурга</p>
</footer>
</body>
</html>
Объяснение кода:
- DOCTYPE и html: объявляют язык документа и структуру.
- head: содержит метатеги, название страницы и встроенные стили для оформления.
- body: основной контент сайта.
header: заглавная часть, название театра.- Несколько
<section>блоков для разной информации:- История театра.
- Фото галерея с изображениями (можно заменить на свои).
- Контакты.
footer: кнопка для возврата наверх и авторские права.
- CSS стили: задают оформление элементов, например, цвета, отступы, шрифты.
Если нужно добавить больше функций или изменить содержание — скажите!
Понравился ответ?
Задай свой вопрос
Напиши любую задачу или вопрос, а нейросеть её решит
