📌 Завдання для учнів:
- Створити всі файли
- Додати власні фото (або з інтернету) замість слів Фото-0, Фото-1,Фото-2,Фото-3
- Змінити опис локацій
Завдання для 10-12 балів - Додати ще 1 локацію (додаткове завдання ⭐)
- Змінити кольори сайту
project_name
│
├── index.html
├── loc1.html
├── loc2.html
├── loc3.html
├── style.css
1. Головна сторінка (index.html)
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Подорож річкою Південний Буг</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Подорож річкою Південний Буг</h1>
<nav>
<a href="index.html">Головна</a>
<a href="loc1.html">Локація 1</a>
<a href="loc2.html">Локація 2</a>
<a href="loc3.html">Локація 3</a>
</nav>
</header>
<main>
<h2>Про річку</h2>
<p>Південний Буг — одна з найкрасивіших річок України, популярна для відпочинку та подорожей.</p>
<img src="Фото-0" alt="Південний Буг">
<h2>Карта маршруту</h2>
<iframe
src="https://www.google.com/maps?q=Південний+Буг&output=embed"
width="100%" height="400">
</iframe>
</main>
<footer>
<p>© 2026 Навчальний проєкт</p>
</footer>
</body>
</html>
🔹 2. Сторінка локації (loc1.html)
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Локація 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Локація 1 — Відпочинок на природі</h1>
<nav>
<a href="index.html">Головна</a>
<a href="loc2.html">Локація 2</a>
<a href="loc3.html">Локація 3</a>
</nav>
</header>
<main>
<img src="Фото-1" alt="Локація 1">
<p>Чудове місце для кемпінгу, риболовлі та відпочинку з друзями.</p>
</main>
</body>
</html>
🔹 3. loc2.html
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Локація 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Локація 2 — Скелі та краєвиди</h1>
<nav>
<a href="index.html">Головна</a>
<a href="loc1.html">Локація 1</a>
<a href="loc3.html">Локація 3</a>
</nav>
</header>
<main>
<img src="Фото-2" alt="Локація 2">
<p>Місце з красивими скелями та панорамними видами.</p>
</main>
</body>
</html>
🔹 4. loc3.html
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Локація 3</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Локація 3 — Водний туризм</h1>
<nav>
<a href="index.html">Головна</a>
<a href="loc1.html">Локація 1</a>
<a href="loc2.html">Локація 2</a>
</nav>
</header>
<main>
<img src="Фото-3" alt="Локація 3">
<p>Популярне місце для сплавів на байдарках.</p>
</main>
</body>
</html>
🎨 5. CSS файл (style.css)
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f4f4f4;
}
header {
background: #2c7a7b;
color: white;
padding: 15px;
text-align: center;
}
nav a {
margin: 10px;
color: white;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
main {
padding: 20px;
}
img {
width: 100%;
max-width: 600px;
display: block;
margin: 10px auto;
border-radius: 10px;
}
footer {
text-align: center;
padding: 10px;
background: #ddd;
}
Немає коментарів:
Дописати коментар