Тема: ТЕГИ ТА АТРИБУТИ HTML-ДОКУМЕНТА. СТРУКТУРНА РОЗМІТКА. GIT.GITHUB. РОБОТА З РЕПОЗИТОРІЯМИ. ОПИС ЛОГІКИ ВЛАСНОГО WEB-ЗАСТОСУНКУ.
Мета: придбати практичні навички роботи з GitHub, репозиторіями, HTML-документом, таблицями, зображеннями, посиланнями, списками, формами. Створити шаблон звітного HTML-документа для відображення результатів роботи всіх лабораторних робіт.
Посилання на завдання:
Репозиторій власного вебзастосунка Жива сторінка власного вебзастосунка Репозиторій звітного HTML-документа Жива сторінка звітного HTML-документа Репозиторій із самостійними роботами Жива сторінка із самостійними роботамиНазва web-застосунку: Йосип Store
Мета створення web-застосунку "Йосип Store": Спрощення та прискорення взаємодії між покупцем і продавцем шляхом створення зручної онлайн-платформи для замовлень і управління товарами.
Опис предметного середовища: У web-застосунку Йосип Store користувач (покупець) має можливість взаємодіяти з кількома основними вкладками:
- «Дім» – містить інформацію про особливі функції магазину (безкоштовна доставка, можливість онлайн-замовлення тощо), рекомендовані товари та банери з вигідними пропозиціями.
- «Магазин» – розділ з повним асортиментом товарів, доступних для перегляду та замовлення.
- «Блог» – містить останні новини та модні тренди, що допомагає користувачеві орієнтуватися у світі стилю.
- «Про нас» – інформація про компанію та сам проєкт.
- «Контакти» – контактні дані та фізичне розташування магазину/компанії.
- «Кошик» – тут зберігаються вибрані товари користувача. У цьому розділі він може змінювати кількість товарів, видаляти позиції, бачити ціну кожного товару, вводити купон на знижку, переглядати загальну суму та оформлювати замовлення.
Перегляд товару здійснюється натисканням на його картку. При цьому відкривається вікно з описом товару, його ціною та зображенням.
Користувач (покупець):
У web-застосунку Йосип Store користувач може здійснювати широкий спектр дій, спрямованих на зручність онлайн-шопінгу. На головній сторінці він ознайомлюється з акційними пропозиціями, новинками та рекомендованими товарами. У каталозі доступний повний перелік продукції.
Перейшовши до конкретного товару, користувач може детально ознайомитися з його описом, фотографіями, ціною. Вибрані товари можна додавати до кошика, де є можливість змінювати їх кількість, видаляти непотрібні позиції та переглядати як проміжну, так і загальну суму замовлення. Додатково користувач може вводити купони на знижку, щоб зменшити кінцеву вартість покупки.
Коли вибір зроблено, покупець переходить до оформлення замовлення, де вказує свої дані для доставки. Крім цього, він може переглядати інформаційні розділи сайту: у «Блозі» читати новини та знайомитися з останніми трендами у світі моди, у вкладці «Про нас» дізнаватися про компанію та її діяльність, а в розділі «Контакти» знаходити адресу, телефони та карту розташування магазину.
Адміністратор:
Адміністратор web-застосунку Йосип Store відповідає за наповнення та підтримку інтернет-магазину. Він має можливість додавати нові товари, вказуючи їх назву, опис, ціну, фото та наявність у каталозі. При потребі адміністратор може редагувати вже існуючі позиції або видаляти товари, що більше не продаються.
Окрім управління каталогом, адміністратор контролює замовлення користувачів: переглядає список нових замовлень, змінює їхній статус (наприклад, «очікує підтвердження», «у дорозі», «доставлено») та опрацьовує деталі доставки. У випадку використання промокодів він також може створювати та керувати купонами на знижку.
Також адміністратор має змогу оновлювати інформаційні розділи сайту. Зокрема, у «Блозі» він може публікувати новини чи матеріали про модні тренди, а в розділі «Про нас» або «Контакти» – редагувати актуальні дані компанії.
UML-діаграма:

Вигідні пропозиції
На всі товари
Заощадьте більше з купонами та знижками до 70%

Безкоштовна доставка

Онлайн замовлення

Заощаджуйте гроші

Акції

Гарний вибір

Підтримка 24/7
Рекомендовані товари
Літня колекція | Новий сучасний дизайн
Новинки
Літня колекція | Новий сучасний дизайн
№ | Бренд | Назва | Відгуки | Ціна|грн |
---|---|---|---|---|
1 | adidas | Сорочка “Cartoon Astronaut” | 5/5 | 1980,02 |
2 | adidas | Сорочка Staff ed dark gray2 | 5/5 | 1980,02 |
3 | adidas | Сорочка Staff reb white | 5/5 | 1980,02 |
4 | adidas | Футболка Essentials Elevated | 5/5 | 1980,02 |
5 | adidas | Сорочка Staff al blue | 5/5 | 1980,02 |
6 | adidas | Шорти Staff cargo sen light gray | 5/5 | 2103,78 |
7 | adidas | Сорочка Staff ind beige | 5/5 | 2062,53 |
8 | adidas | Сорочка Staff mai black oversize | 5/5 | 1980,02 |
Скріншот таблиці:

Теги:
- <table> — контейнер таблиці.
- <caption> — заголовок таблиці (відображається зверху).
- <thead> — секція із заголовком (шапкою) таблиці.
- <tbody> — основна частина таблиці (рядки з даними).
- <tr> (table row) — рядок таблиці.
- <th> (table header) — комірка-заголовок (текст автоматично виділяється жирним
Атрибути:
- scope (для <th>) — вказує, на що поширюється заголовок (col або row).

Безкоштовна доставка

Онлайн замовлення

Заощаджуйте гроші

Акції

Гарний вибір

Підтримка 24/7
Скріншот зображень:

- "src" (source) – шлях до зображення.
- "alt" (alternative text) – альтернативний текст, що показується, якщо зображення не завантажилось.
- "width / height" – задають розміри зображення.
- "title" – підказка при наведенні курсора.
Форма
Скріншот форми:

Списки
- Сорочка “Cartoon Astronaut”
- Сорочка Staff ed dark gray2
- Сорочка Staff reb white
- Футболка Essentials Elevated
- Сорочка Staff al blue
- Шорти Staff cargo sen light gray
- Сорочка Staff ind beige
- Сорочка Staff mai black oversize
Скріншот списків:

Ненумерований список:
- Тег <ul> (unordered list) – маркований список.
- Елементи списку – <li> (list item).
Нумерований список:
- Тег <ol> (ordered list) – пронумерований список.
- Елементи списку – <li> (list item).
Основні атрибути:
- "type" – стиль нумерації (1, A, a, I, i).
- "start" – з якого номера починати.
- "reversed" – зворотна нумерація.
- "value" (для <li>) - для конкретного номера.
У процесі виконання практичної роботи я ознайомився з основами створення HTML-документів, структурною розміткою сторінок та використанням основних тегів і атрибутів. Було розглянуто теги для створення заголовків, таблиць, списків, форм, зображень і посилань, а також їх практичне застосування.
У ході роботи я створив шаблон звітного HTML-документа, де відобразив усі необхідні елементи: таблиці, списки, зображення, посилання та опис предметної галузі.
Окремо було опрацьовано роботу з Git і GitHub, включаючи створення репозиторіїв та налаштування живих сторінок.
Також я ознайомився з інструментом Figma, виконав базові навчальні уроки та створив макет власного вебзастосунка.