Тема, мета та місце розташування
Тема: Структура HTML-документа
Мета: Навчитися працювати з елементами HTML: таблицями, формами, зображеннями, структурою документа.
Місце розташування: GitHub
Опис предметного середовища
Розробка вебзастосунку для онлайн-платформи SweetLife, що представляє інтернет-кондитерську з каталогом солодощів, тортів та десертів із можливістю перегляду деталей, фільтрації за категоріями, оформлення замовлень та додавання улюблених товарів у “Мої замовлення”. Мета проєкту — створити зручний вебсайт для замовлення солодощів онлайн, де користувачі можуть швидко знайти потрібний десерт, дізнатися склад, ціну, вагу та оформити покупку. Ціль — забезпечити комфортний онлайн-шопінг для клієнтів кондитерської, популяризувати бренд SweetLife і спростити процес замовлення солодких виробів. Сценарій використання сайту: Користувач заходить на сайт і бачить каталог продукції з фото, назвою, коротким описом та ціною. Він може скористатися пошуком або фільтрами, щоб знайти, наприклад, “торти на день народження”, “веганські десерти” чи “печиво без цукру”. Обравши товар, користувач переходить на детальну сторінку, де відображаються: склад продукту, вага, ціна, наявність, а також можливість додати товар у кошик або до списку “Мої замовлення”. Зареєстрований користувач має змогу: 1. оформлювати замовлення та переглядати історію покупок; 2. додавати улюблені товари у “Мої замовлення” для швидкого повторного замовлення; 3. залишати відгуки про товари. Адміністратор сайту може: 1. додавати нові товари та редагувати існуючі; 2. переглядати всі замовлення та керувати їх статусом; 3. керувати категоріями продукції (торти, тістечка, печиво, десерти тощо) та контролювати наявність на складі.
Структура документа
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>SweetLife — Онлайн-кондитерська</title>
</head>
<body>
...
</body>
</html>
HTML-код таблиць
Результат
| Назва | Категорія |
|---|---|
| Полуничний торт, Шоколадний торт, Весільний торт | Торти |
| Шоколадна насолода, Карамелька, Полунична мрія | Пончики |
| Шоколадні капкейки, Фруктові капкейки, Лимонні капкейки, Набір капкейків | Капкейки |
| Сирний пиріг, М'ясний пиріг, Солодкий пиріг, Сливовий пиріг | Пироги |
HTML-код
<table border="1">
<tr><th>Назва</th><th>Категорія</th></tr>
<tr><td>Полуничний торт, Шоколадний торт, Весільний торт</td><td>Торти</td></tr>
<tr><td>Шоколадна насолода, Карамелька, Полунична мрія</td><td>Пончики</td></tr>
<tr><td>Шоколадні капкейки, Фруктові капкейки, Лимонні капкейки, Набір капкейків</td><td>Капкейки</td></tr>
<tr><td>Сирний пиріг, М'ясний пиріг, Солодкий пиріг, Сливовий пиріг</td><td>Пироги</td></tr>
</table>
HTML-код форми
Результат
HTML-код
<form>
<label for="name">Ім’я:</label><br>
<input id="name" type="text" placeholder="Введіть ваше ім’я"><br>
<label for="email">Номер телефону:</label><br>
<input id="email" type="text"><br>
<label for="message">Коментар:</label><br>
<textarea id="message" placeholder="Ваш текст..."></textarea><br>
<button>Підтвердити замовлення</button>
</form>
HTML-код зображення
Приклад додавання зображення страви:
Результат
HTML-код
<img src="../img/pirog" width="200" alt="Приклад додавання зображення страви:">
Висновки
Під час виконання лабораторної роботи було вивчено структуру HTML-документа , розглянула основні теги, створила таблицю, форму зворотного зв’язку та вставила зображення. Отримані знання є базовими для подальшого вивчення CSS і JavaScript.