Лабораторна робота №1

Тема, мета, місце розташування

Тема

ТЕГИ ТА АТРИБУТИ HTML-ДОКУМЕНТА. СТРУКТУРНА РОЗМІТКА. GIT.GITHUB. РОБОТА З РЕПОЗИТОРІЯМИ. ОПИС ЛОГІКИ ВЛАСНОГО WEB-ЗАСТОСУНКУ.

Мета

Придбати практичні навички роботи з GitHub, репозиторіями, HTML-документом, таблицями, зображеннями, посиланнями, списками, формами. Створити шаблон звітного HTML-документом для відображення результатів роботи всіх лабораторних робіт.

Місце розташування

Репозиторій WEB-застосунку BookShelf project Жива сторінка WEB-застосунку GitHub Pages Репозиторій звітного документу Report website Жива сторінка звітного документу GitHub Pages

Опис предметного середовища

Проект "BookShelf"

BookShelf — це веб-застосунок для ведення особистої цифрової бібліотеки.

Основні цілі проекту:

Створення зручного інструменту для каталогізації особистої колекції книг
Надання можливості оцінювати та рецензувати прочитані книги
Ведення статистики читання
Допомога у виборі нових книг на основі вподобань

Цільова аудиторія:

Студенти та науковці
Книгомани та колекціонери
Люди, які хочуть відстежувати свій прогрес у читанні
Бібліотеки та книжкові клуби

Опис бізнес-логіки

Функціональні вимоги

Керування книгами (додавання, редагування, видалення)
Пошук та фільтрація за різними критеріями
Статистика та аналітика бібліотеки

Нефункціональні вимоги

Вимога	Опис
Продуктивність	Завантаження сторінки < 3 секунди
Масштабованість	Підтримка до 10 000 книг
Використання	Інтуїтивно зрозумілий інтерфейс
Крос-платформеність	Робота на ПК, планшетах, смартфонах

Головна сторінка веб-застосунку

Код головної сторінки веб-застосунку

HTML-код файлу index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BookShelf | Особиста цифрова бібліотека</title>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
</head>

<body>
    <div id="app">
        <header id="header">
            <h1 id="app-title">BookShelf</h1>
            <nav id="main-nav">
                <ul id="nav-list">
                    <li class="nav-item">
                        <button data-page="library">Моя бібліотека</button>
                    </li>
                    <li class="nav-item">
                        <button data-page="add-book">Додати книгу</button>
                    </li>
                    <li class="nav-item">
                        <button data-page="search">Пошук</button>
                    </li>
                    <li class="nav-item">
                        <a href="about.html" class="nav-link">Про проект</a>
                    </li>
                </ul>
            </nav>
        </header>

        <main id="main-content">
            <section id="library-section" class="page-section active">
                <h2 class="section-title">
                    <img src="pictures/books.svg" alt="Іконка бібліотеки" width="32" height="32" style="vertical-align: middle; margin-right: 3px;">
                    Моя бібліотека
                </h2>
                
                <div id="filters-container">
                    <form id="filter-form">
                        <input type="text" id="filter-search" placeholder="Фільтрувати книги...">
                        <select id="filter-genre">
                            <option value="">Всі жанри</option>
                        </select>
                        <button type="button" id="apply-filters">Застосувати</button>
                    </form>
                </div>

                <div id="library-table-container">
                    <table id="books-table" border="1">
                        <thead id="table-header">
                            <tr>
                                <th>ID</th>
                                <th>Назва книги</th>
                                <th>Автор</th>
                                <th>Жанр</th>
                                <th>Рік</th>
                                <th>Дії</th>
                            </tr>
                        </thead>
                        <tbody id="books-table-body">
                        </tbody>
                    </table>
                </div>

                <div id="stats-container">
                    <h3>Статистика бібліотеки</h3>
                    <ol id="stats-list">
                        <li>Загальна кількість книг: 0</li>
                        <li>Кількість жанрів: 0</li>
                        <li>Найдавніша книга: -</li>
                        <li>Найновіша книга: -</li>
                    </ol>
                </div>
            </section>

            <section id="add-book-section" class="page-section">
                <h2 class="section-title">Додати нову книгу</h2>
                
                <form id="add-book-form">
                    <div class="form-group">
                        <label for="book-title">Назва книги:</label>
                        <input type="text" id="book-title" name="title" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="book-author">Автор:</label>
                        <input type="text" id="book-author" name="author" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="book-genre">Жанр:</label>
                        <select id="book-genre" name="genre" required>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="book-year">Рік видання:</label>
                        <input type="number" id="book-year" name="year" min="1000" max="2025">
                    </div>
                    
                    <div class="form-group">
                        <label for="book-description">Опис:</label>
                        <textarea id="book-description" name="description" rows="4"></textarea>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" id="save-book">Зберегти книгу</button>
                        <button type="reset" id="reset-form">Очистити</button>
                    </div>
                </form>
            </section>

            <section id="search-section" class="page-section">
                <h2 class="section-title">Пошук книг</h2>
                
                <form id="search-form">
                    <input type="text" id="search-input" placeholder="Введіть назву, автора або опис...">
                    <button type="submit">🔍 Пошук</button>
                </form>
                
                <div id="search-results">
                    <h3>Результати пошуку</h3>
                    <ul id="results-list">
                    </ul>
                </div>
            </section>
        </main>

        <footer id="app-footer">
            <div id="footer-content">
                <p id="copyright">© 2025 BookShelf. Особиста цифрова бібліотека.</p>
                <p id="lab-info">Лабораторна робота №1: Структура HTML-документа</p>
                <div id="footer-links">
                    <a href="about.html">Про проект</a>
                </div>
            </div>
        </footer>
    </div>

    <!-- <script src="js/script.js"></script> -->
</body>
</html>                        
                        

HTML-код таблиць

Код таблиці з книгами:

<table id="books-table" border="1">
    <thead id="table-header">
        <tr>
            <th>ID</th>
            <th>Назва книги</th>
            <th>Автор</th>
            <th>Жанр</th>
            <th>Рік</th>
            <th>Дії</th>
        </tr>
    </thead>
    <tbody id="books-table-body">
    </tbody>
</table>
                        

HTML-код зображень

Код зображення:

<h2 class="section-title">
    <img src="pictures/books.svg" alt="Іконка бібліотеки" width="32" height="32" style="vertical-align: middle; margin-right: 3px;">
    Моя бібліотека
</h2>
                        

HTML-код списків

Маркований список:

<ul id="nav-list">
    <li class="nav-item"><button data-page="library">Моя бібліотека</button></li>
    <li class="nav-item"><button data-page="add-book">Додати книгу</button></li>
    <li class="nav-item"><button data-page="search">Пошук</button></li>
    <li class="nav-item"><a href="about.html" class="nav-link">Про проект</a></li>
</ul>
                        

<ul id="results-list">
</ul>
                        

Нумерований список:

<ol id="stats-list">
    <li>Загальна кількість книг: 0</li>
    <li>Кількість жанрів: 0</li>
    <li>Найдавніша книга: -</li>
    <li>Найновіша книга: -</li>
</ol>
                        

HTML-код форм

Код форми для додавання книги:

<form id="add-book-form">
    <div class="form-group">
        <label for="book-title">Назва книги:</label>
        <input type="text" id="book-title" name="title" required>
    </div>
    
    <div class="form-group">
        <label for="book-author">Автор:</label>
        <input type="text" id="book-author" name="author" required>
    </div>
    
    <div class="form-group">
        <label for="book-genre">Жанр:</label>
        <select id="book-genre" name="genre" required>
        </select>
    </div>
    
    <div class="form-group">
        <label for="book-year">Рік видання:</label>
        <input type="number" id="book-year" name="year" min="1000" max="2025">
    </div>
    
    <div class="form-group">
        <label for="book-description">Опис:</label>
        <textarea id="book-description" name="description" rows="4"></textarea>
    </div>
    
    <div class="form-actions">
        <button type="submit" id="save-book">Зберегти книгу</button>
        <button type="reset" id="reset-form">Очистити</button>
    </div>
</form>
                        

Висновки

Висновки до лабораторної роботи №1

Під час виконання лабораторної роботи №1 було успішно освоєно основи роботи з HTML-документами та системою контролю версій Git/GitHub. Основні практичні навички, отримані в результаті роботи:

Створено повноцінний HTML-документ з правильною структурою, що включає всі необхідні елементи: заголовки різних рівнів, таблиці для організації даних, зображення для візуального оформлення, різні типи списків (нумеровані та марковані) та інтерактивні форми для взаємодії з користувачем.

Опановано роботу з платформою GitHub: створено репозиторій для веб-застосунку BookShelf, налаштовано GitHub Pages для автоматичного хостингу, освоєно базові операції з комітами та пушами. Це дозволило організувати контроль версій проекту та забезпечити доступність веб-застосунку через живу сторінку.

Загальний висновок: Виконання лабораторної роботи дозволило отримати фундаментальні практичні навички роботи з основними веб-технологіями, закріпити теоретичні знання про структуру HTML-документів та навчитися використовувати сучасні інструменти розробки для керування проектами. Отриманий досвід становить міцну основу для подальшого вивчення CSS та JavaScript.