📌 Мета роботи
Навчитися створювати багатосторінкові вебсайти.
Впроваджувати структуру, навігацію та стильове оформлення.
Використовувати гіперпосилання, зображення, мультимедіа та CSS.
🛠️ Необхідні інструменти
Редактор коду: VS Code, Sublime Text або Brackets.
Браузер: Chrome, Firefox для тестування.
Графічні редактори: Figma або Canva для макету сторінок.
Медіафайли: зображення, відео, іконки для сайту.
📂 Етапи створення сайту
1️⃣ Планування та структура
Визначити теми сторінок:
Головна → знайомство з сайтом
Міста / країни → окремі сторінки для напрямків
Галерея → фото та відео подорожей
Контакти → форма зворотного зв’язку
Скласти схему навігації (меню з гіперпосиланнями між сторінками).
2️⃣ Створення HTML-структури
Створити основні файли: index.html, city1.html, gallery.html, contact.html.
Використати стандартні теги: <header>, <nav>, <main>, <footer>.
<header> <h1>Подорожі Україною</h1> <nav> <a href="index.html">Головна</a> <a href="city1.html">Київ</a> <a href="gallery.html">Галерея</a> <a href="contact.html">Контакти</a> </nav> </header>
3️⃣ Додавання стилів (CSS)
Зовнішній файл style.css для оформлення всіх сторінок.
Використати:
Колірну схему та шрифти
Відступи та вирівнювання
Кнопки та меню
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
}
nav a {
text-decoration: none;
padding: 10px;
color: #2c3e50;
}
nav a:hover {
color: #e74c3c;
}
4️⃣ Додавання мультимедіа
Зображення напрямків, галереї, відео про подорожі.
Оптимізація зображень для швидкого завантаження.
<img src="images/kyiv.jpg" alt="Київ" width="600"> <video controls> <source src="video/travel.mp4" type="video/mp4"> </video>
5️⃣ Перевірка навігації та тестування
Перевірити, щоб усі гіперпосилання працювали.
Тест на різних браузерах і пристроях (ПК, планшет, телефон).
6️⃣ Публікація (опційно)
Використати хостинг або локальний сервер для перегляду сайту.
Можна підключити GitHub Pages для демонстрації сайту онлайн.
🎯 Поради
✅ Використовуй одну кольорову палітру та шрифти для всіх сторінок.
✅ Меню має бути зрозумілим і простим.
✅ Оптимізуй картинки та відео для швидкого завантаження.
✅ Роботи роби поетапно: спершу структура → потім стиль → потім мультимедіа.
