Тема 18-19. Створення односторінкового вебсайту «Книжковий Рай» | 8 клас | Тріщук

8 клас. Практичні завдання з інформатики за підручником І.Тріщук 2025 року (НУШ)

Тема 18-19. Створення односторінкового вебсайту (лендинг) «Книжковий Рай».
Проєкт 1.
Мета проєкту Створити привабливий та функціональний вебсайт для книжкової бібліотеки «Книжковий Рай», який дозволяє користувачам ознайомитися з бібліотекою, переглядати колекцію книг та підписатися на розсилку новин.
Зразок:
Етап 1. Аналіз вимог
1. Визначення цільової аудиторії:
Бібліофіли та любителі читання.
Учні, студенти та науковці, які шукають літературу для навчання.
Місцеві жителі, які шукають місце для читання та відпочинку.
2. Визначення основних функцій сайту:
Презентація бібліотеки.
Перегляд колекції книг.
Підписка на розсилку новин.
3. Контактна інформація та можливість зв’язатися з бібліотекою.
Етап 2. Проектування
1. Створення макету або вивчення готового макету сайту:
• Головна сторінка з логотипом, назвою та кнопкою для отримання додаткової інформації.
• Секція з інформацією про бібліотеку та засновника.
• Секція з рекомендованими книгами.
• Футер з формою підписки на розсилку та контактною інформацією.
2. Визначення структури сторінки та розташування елементів:
• Головна секція з логотипом та заголовком.
• Секція з текстовим описом та зображеннями.
• Секція з рекомендованими книгами.
• Футер з формою підписки та контактами.
3. Вибір кольорової схеми та шрифтів:
• Основні кольори: зелений (#556b2f), світло-зелений (#8fbc8f), сірий (#666), білий (#fff).
• Шрифти: 'Lora’ для заголовків, ’Roboto’ для тексту.
Етап 3. Розробка
1. Підготовка до розробки:
• Створіть папку Book heaven, в якій буде папка img для зображень файл index.html для розмітки сайту та файл style.css для стилів сайту.
• Знайдіть потрібні зображення для сайту та збережіть їх у папці img (або використовувати UKL-адреси зображень) (або використати зображення із зразка у файлах до підручника).
• За потреби завантажте стилі Roboto та Lora (або використовувати посилання на шрифти без завантаження).
2. Написання HTML коду:
• Створення структури сторінки за допомогою HTML тегів.
Створіть стандартну структуру html, head, body та назвіть caйт «Книжковий Рай».
Оскільки макет складається з чотирьох секцій, створіть чотири блоки main, section, section та footer, відповідно з класами section-main, second-section, third-section, footer.
• Додавання контенту сайту (заголовки, текст, зображення та кнопки).
Блок main. Цей блок складається з чотирьох елементів: логотипу — зображення без фону з книжкою , головного заголовку h1 з текстом «Книжковий Рай», підзаголовка h2 з текстом «Відкрий для себе наступну чудову книгу» та кнопки з текстом «Дізнатися більше». Для кожного елемента задайте класи, відповідно section-main-logo, section-main-title, section-main-subtitle, section-main-button.
Блок second-section.
Блок footer.
3. Стилізація сторінки за допомогою CSS:
• Підключення файлу зі стилями до html-документу.
• Підключення head шрифти Roboto та Lora.
• Встановлення загальних стилів для тіла сторінки.
Стилізація головної секції section-main.
• Стилізація секції second-section.
• Стилізація секції third-section.
• Стилізація секції footer.
Етап 4. Тестування
1. Перевірка сумісності з різними браузерами:
2. Виправлення знайдених помилок:
Аналіз та виправлення всіх знайдених помилок та неточностей.
Етап 5. Впровадження
1. Розміщення сайту на GitHub:

Timecode
00:00 HTML
31:26 CSS
01:14 Завантаження на GitHub

Завантажити текст практичного завдання: https://drive.google.com/drive/folder...

Підтримати мою роботу: https://donatello.to/TaskInformatics