Если вы или ваш ребенок получили домашнее задание — написать сайт на HTML, но совершенно не знаете, с чего начать, это руководство поможет вам разобраться! Вот подробная инструкция по созданию сайта из 5 страниц о птицах средней полосы России с шапкой, подвалом, сайдбаром, текстом, изображениями и таблицей.
Структура проекта
birds-website/
│
├── index.html # Главная страница
├── species.html # Виды птиц
├── habitats.html # Места обитания
├── migration.html # Миграция птиц
├── protection.html # Охрана птиц
├── images/ # Папка с изображениями
│ ├── bird1.jpg
│ ├── bird2.jpg
│ └── ...
└── styles.css # Файл стилей1. Создаем базовую структуру HTML
Начнем с создания файла index.html:
Если Создание HTML-файла (index.html) вызывает затруднения – здесь статья с подробной инструкцией. Создайте файл и возвращайтесь сюда ))
Итак, в файле index.html размещаем следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Птицы средней полосы России</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Шапка сайта -->
<header>
<h1>Птицы средней полосы России</h1>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="species.html">Виды птиц</a></li>
<li><a href="habitats.html">Места обитания</a></li>
<li><a href="migration.html">Миграция</a></li>
<li><a href="protection.html">Охрана птиц</a></li>
</ul>
</nav>
</header>
<!-- Основное содержимое и сайдбар -->
<div class="container">
<main>
<h2>Добро пожаловать на сайт о птицах!</h2>
<img src="images/birds-main.jpg" alt="Разные птицы на ветке" class="main-image">
<p>Средняя полоса России богата разнообразными видами птиц. На этом сайте вы узнаете о самых распространенных пернатых, их образе жизни, местах обитания и особенностях поведения.</p>
</main>
<aside>
<h3>Интересные факты</h3>
<p>Знаете ли вы, что соловей весит всего 25 грамм, а его песня состоит из 24 колен?</p>
<h3>Новости</h3>
<p>В этом году орнитологи зафиксировали ранний прилет грачей в Подмосковье.</p>
</aside>
</div>
<!-- Подвал сайта -->
<footer>
<p>© 2023 Сайт о птицах средней полосы России</p>
<p>Контактный email: birds@example.com</p>
</footer>
</body>
</html>Страница будет выглядеть так:
2. Создаем файл стилей styles.css
Инструкция, как это сделать ЗДЕСЬ
В файле прописываем наши стили:
/* Общие стили */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
}
/* Шапка */
header {
background-color: #4CAF50;
color: white;
padding: 1rem;
text-align: center;
}
header nav ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
background-color: #333;
}
header nav ul li {
margin: 0 1rem;
}
header nav ul li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
header nav ul li a:hover {
background-color: #4CAF50;
}
/* Основной контент и сайдбар */
.container {
display: flex;
margin: 1rem;
}
main {
flex: 3;
padding: 1rem;
}
.main-image {
max-width: 100%;
height: auto;
margin: 1rem 0;
}
aside {
flex: 1;
padding: 1rem;
background-color: #f4f4f4;
margin-left: 1rem;
}
/* Таблицы */
table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 0.5rem;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Подвал */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
margin-top: 1rem;
}После добавления стилей страница преобразится:
3. Создаем страницу species.html (Виды птиц)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Виды птиц средней полосы</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Виды птиц средней полосы России</h1>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="species.html">Виды птиц</a></li>
<li><a href="habitats.html">Места обитания</a></li>
<li><a href="migration.html">Миграция</a></li>
<li><a href="protection.html">Охрана птиц</a></li>
</ul>
</nav>
</header>
<div class="container">
<main>
<h2>Распространенные виды птиц</h2>
<table>
<tr>
<th>Название</th>
<th>Описание</th>
<th>Фото</th>
</tr>
<tr>
<td>Скворец</td>
<td>Небольшая певчая птица с черным оперением с металлическим отливом. Длина тела около 20 см.</td>
<td><img src="images/starling.jpg" alt="Скворец" style="width:100px;"></td>
</tr>
<tr>
<td>Синица</td>
<td>Маленькая птичка с желтым брюшком и черной "шапочкой". Питается насекомыми и семенами.</td>
<td><img src="images/tit.jpg" alt="Синица" style="width:100px;"></td>
</tr>
<tr>
<td>Дятел</td>
<td>Древесная птица с крепким клювом. Издает характерный стук по дереву в поисках насекомых.</td>
<td><img src="images/woodpecker.jpg" alt="Дятел" style="width:100px;"></td>
</tr>
<tr>
<td>Снегирь</td>
<td>Яркая птица с красной грудью у самцов. Часто встречается зимой на рябиновых деревьях.</td>
<td><img src="images/bullfinch.jpg" alt="Снегирь" style="width:100px;"></td>
</tr>
</table>
<h3>Певчие птицы</h3>
<p>Средняя полоса России славится своими певчими птицами. Соловей, зарянка, зяблик - их голоса создают неповторимую атмосферу весеннего леса.</p>
<img src="images/singing-bird.jpg" alt="Певчая птица" class="main-image">
</main>
<aside>
<h3>Редкие виды</h3>
<p>В средней полосе можно встретить и редкие виды, такие как орлан-белохвост или черный аист.</p>
<h3>Совет</h3>
<p>Для наблюдения за птицами лучше использовать бинокль и определитель птиц.</p>
</aside>
</div>
<footer>
<p>© 2023 Сайт о птицах средней полосы России</p>
<p>Контактный email: birds@example.com</p>
</footer>
</body>
</html>Внешний вид страницы будет таким:
4. Создаем страницу habitats.html (Места обитания)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Места обитания птиц</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Места обитания птиц средней полосы</h1>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="species.html">Виды птиц</a></li>
<li><a href="habitats.html">Места обитания</a></li>
<li><a href="migration.html">Миграция</a></li>
<li><a href="protection.html">Охрана птиц</a></li>
</ul>
</nav>
</header>
<div class="container">
<main>
<h2>Где живут птицы средней полосы</h2>
<img src="images/forest.jpg" alt="Лес - место обитания птиц" class="main-image">
<h3>Леса</h3>
<p>Лиственные и смешанные леса - дом для большинства птиц средней полосы. Здесь они находят пищу, укрытие и места для гнездования.</p>
<h3>Водоемы</h3>
<p>Реки, озера и болота привлекают водоплавающих птиц - уток, цапель, чаек. В камышах гнездятся камышевки и выпь.</p>
<h3>Города и села</h3>
<p>Многие птицы приспособились жить рядом с человеком. Воробьи, голуби, ласточки и стрижи стали постоянными обитателями населенных пунктов.</p>
</main>
<aside>
<h3>Лучшие места для наблюдения</h3>
<ul>
<li>Национальный парк "Лосиный остров"</li>
<li>Приокско-Террасный заповедник</li>
<li>Долина реки Москвы</li>
</ul>
</aside>
</div>
<footer>
<p>© 2023 Сайт о птицах средней полосы России</p>
<p>Контактный email: birds@example.com</p>
</footer>
</body>
</html>
5. Создаем страницу migration.html (Миграция птиц)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Миграция птиц</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Миграция птиц средней полосы</h1>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="species.html">Виды птиц</a></li>
<li><a href="habitats.html">Места обитания</a></li>
<li><a href="migration.html">Миграция</a></li>
<li><a href="protection.html">Охрана птиц</a></li>
</ul>
</nav>
</header>
<div class="container">
<main>
<h2>Перелетные и зимующие птицы</h2>
<img src="images/migration.jpg" alt="Стая перелетных птиц" class="main-image">
<h3>Перелетные птицы</h3>
<p>Многие птицы средней полосы улетают на зиму в теплые края. К ним относятся ласточки, стрижи, соловьи, кукушки и многие другие.</p>
<h3>Зимующие птицы</h3>
<p>Некоторые виды остаются зимовать в средней полосе. Это синицы, воробьи, снегири, дятлы. Они приспособились находить пищу даже в холодное время года.</p>
<h3>График миграции</h3>
<table>
<tr>
<th>Птица</th>
<th>Отлет на юг</th>
<th>Возвращение</th>
</tr>
<tr>
<td>Ласточка</td>
<td>Сентябрь</td>
<td>Апрель</td>
</tr>
<tr>
<td>Скворец</td>
<td>Октябрь</td>
<td>Март</td>
</tr>
<tr>
<td>Кукушка</td>
<td>Август</td>
<td>Май</td>
</tr>
</table>
</main>
<aside>
<h3>Интересный факт</h3>
<p>Некоторые мелкие птицы летят ночью, ориентируясь по звездам, а днем останавливаются для отдыха и кормежки.</p>
</aside>
</div>
<footer>
<p>© 2023 Сайт о птицах средней полосы России</p>
<p>Контактный email: birds@example.com</p>
</footer>
</body>
</html>
6. Создаем страницу protection.html (Охрана птиц)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Охрана птиц</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Охрана птиц средней полосы</h1>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="species.html">Виды птиц</a></li>
<li><a href="habitats.html">Места обитания</a></li>
<li><a href="migration.html">Миграция</a></li>
<li><a href="protection.html">Охрана птиц</a></li>
</ul>
</nav>
</header>
<div class="container">
<main>
<h2>Как мы можем помочь птицам</h2>
<img src="images/bird-protection.jpg" alt="Защита птиц" class="main-image">
<h3>Кормушки и скворечники</h3>
<p>Зимой птицы особенно нуждаются в помощи. Развешивание кормушек и регулярная подкормка могут спасти многие жизни. Весной скворечники помогут птицам найти место для гнезда.</p>
<h3>Защита мест обитания</h3>
<p>Сохранение лесов, парков и водоемов критически важно для птиц. Каждый может внести вклад, участвуя в экологических акциях или просто бережно относясь к природе.</p>
<h3>Красная книга</h3>
<p>Некоторые птицы средней полосы занесены в Красную книгу России. Вот некоторые из них:</p>
<ul>
<li>Орлан-белохвост</li>
<li>Черный аист</li>
<li>Филин</li>
<li>Серый сорокопут</li>
</ul>
</main>
<aside>
<h3>Как помочь птицам зимой</h3>
<ol>
<li>Сделать кормушку</li>
<li>Наполнять ее нежареными семечками, несоленым салом</li>
<li>Не давать хлеб (он вреден для птиц)</li>
<li>Развешивать кормушки в безопасных местах</li>
</ol>
</aside>
</div>
<footer>
<p>© 2023 Сайт о птицах средней полосы России</p>
<p>Контактный email: birds@example.com</p>
</footer>
</body>
</html>
Инструкция по созданию сайта
- Создайте папку проекта (например,
birds-website) - Создайте файлы:
index.html– главная страницаspecies.html– виды птицhabitats.html– места обитанияmigration.html– миграция птицprotection.html– охрана птицstyles.css– файл стилей
- Создайте папку
imagesи добавьте в нее изображения птиц (можно скачать из интернета или нарисовать самому) - Заполните страницы контентом:
- Добавьте текст о птицах
- Вставьте изображения
- Создайте таблицы с информацией
- Добавьте интересные факты в сайдбар
- Проверьте работу сайта:
- Откройте
index.htmlв браузере - Проверьте переходы между страницами
- Убедитесь, что все изображения отображаются
- Проверьте корректность таблиц
- Откройте
Советы по улучшению сайта
- Добавьте больше интерактивности с помощью JavaScript (например, галерею изображений)
- Сделайте адаптивный дизайн для мобильных устройств
- Добавьте форму обратной связи на странице контактов
- Включите аудиозаписи птичьих голосов
- Добавьте карту с местами обитания птиц
Если вам нужен сайт другой тематики. скажем о домашних животных или природных ископаемых, то вам необходимо будет внести изменения в названия страниц и контент (текст и фото). Разобраться какая строчка кода что означает вам поможет еще одна наша статья., которая находится ЗДЕСЬ
Создать сайт на HTML не сложно, даже если вы никогда этого не делали! Следуйте этому руководству, и у вас получится отличный проект для школы.
Готовый пример сайта о птицах
Вы можете скачать полный код (5 страниц + CSS + картинки) и использовать его как шаблон для школьного проекта.