<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Формулы площадей</title>
<style>
/* Логическая разметка страницы */
h1 {
color: black;
text-align: center;
}
/* Свойства таблицы */
table {
border-collapse: collapse;
margin: 0 auto; /* Выравнивание таблицы по центру */
}
th, td {
border: 2px solid black;
padding: 10px;
text-align: center; /* Выравнивание по горизонтали */
vertical-align: middle; /* Выравнивание по вертикали */
}
/* Таблица стилей для текста внутри ячеек */
td {
color: blue; /* Цвет текста — синий */
}
</style>
</head>
<body>
<h1>Формулы площадей</h1>
<table>
<tr>
<th>Фигура</th>
<th>Площадь</th>
</tr>
<tr>
<td>Прямоугольник</td>
<td>S = a · b</td>
</tr>
<tr>
<td>Квадрат</td>
<td>S = a²</td>
</tr>
<tr>
<td>Ромб</td>
<td>S = 1/2 · d₁ · d₂</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Стихи о весне</title>
<style>
/* Тело документа: фоновое изображение fon.jpg */
body {
background-image: url('fon.jpg');
color: green; /* Цвет текста — зеленый */
}
/* Заголовок первого уровня: выравнивание по центру */
h1 {
text-align: center;
border-bottom: 3px solid darkblue; /* Горизонтальная линия темно-синего цвета */
}
/* Заголовок второго уровня */
h2 {
color: red; /* Красный цвет шрифта */
font-size: 22px; /* Размер шрифта 22 пикселя */
text-align: center;
}
/* Таблица: ширина 100% */
.main-layout {
width: 100%;
border-collapse: collapse;
}
/* Ячейка таблицы: ширина 50%, шрифт 18 пикселей */
.main-layout td {
width: 50%;
font-size: 18px;
vertical-align: top;
padding: 20px;
}
/* Горизонтальная разделительная линия внизу стихов */
.green-line {
width: 50%; /* Ширина — 50% */
border-top: 3px solid green; /* Толщина 3 пикселя, сплошная, зеленого цвета */
margin: 20px auto; /* Выравнивание по центру */
}
/* Форматирование текста стихотворения */
pre {
font-family: inherit;
text-align: center; /* Выравнивание по центру */
}
</style>
</head>
<body>
<h1>Стихи о весне</h1>
<table class="main-layout">
<tr>
<!-- Первая ячейка (50% ширины) -->
<td>
<h2>Весенняя гроза</h2>
<pre>Люблю грозу в начале мая,
Когда весенний, первый гром,
как бы резвяся и играя,
Грохочет в небе голубом.
Гремят раскаты молодые,
Вот дождик брызнул, пыль летит,
Повисли перлы дождевые,
И солнце нити золотит.</pre>
<div class="green-line"></div>
</td>
<!-- Вторая ячейка (50% ширины) -->
<td>
<h2>Уж верба вся пушистая...</h2>
<pre>Уж верба вся пушистая
Раскинулась кругом;
Опять весна душистая
Повеяла крылом.
Стараньем тучки согнаны,
Тепло лучи лиют,
И в душу капли сонные
Приносят и поют.</pre>
<div class="green-line"></div>
</td>
</tr>
</table>
</body>
</html>
