НТУУ "КИЇВСЬКИЙ ПОЛІТЕХНІЧНИЙ ІНСТИТУТ"

ЗВІТИ З ПРАКТИЧНИХ РОБІТ

З ДИСЦИПЛІНИ «WEB-ОРІЄНТОВАНІ ТЕХНОЛОГІЇ. FRONTEND РОЗРОБКИ»

Студент: Бахмацький Валентин Володимирович Група: ІМ-31

Фото студента

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

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

Назва web-застосунку: Йосип Store

Мета створення web-застосунку "Йосип Store": Спрощення та прискорення взаємодії між покупцем і продавцем шляхом створення зручної онлайн-платформи для замовлень і управління товарами.

Опис предметного середовища: У web-застосунку Йосип Store користувач (покупець) має можливість взаємодіяти з кількома основними вкладками:

  • «Дім» – містить інформацію про особливі функції магазину (безкоштовна доставка, можливість онлайн-замовлення тощо), рекомендовані товари та банери з вигідними пропозиціями.
  • «Магазин» – розділ з повним асортиментом товарів, доступних для перегляду та замовлення.
  • «Блог» – містить останні новини та модні тренди, що допомагає користувачеві орієнтуватися у світі стилю.
  • «Про нас» – інформація про компанію та сам проєкт.
  • «Контакти» – контактні дані та фізичне розташування магазину/компанії.
  • «Кошик» – тут зберігаються вибрані товари користувача. У цьому розділі він може змінювати кількість товарів, видаляти позиції, бачити ціну кожного товару, вводити купон на знижку, переглядати загальну суму та оформлювати замовлення.

Перегляд товару здійснюється натисканням на його картку. При цьому відкривається вікно з описом товару, його ціною та зображенням.

Бізнес-логіка

Користувач (покупець):

У web-застосунку Йосип Store користувач може здійснювати широкий спектр дій, спрямованих на зручність онлайн-шопінгу. На головній сторінці він ознайомлюється з акційними пропозиціями, новинками та рекомендованими товарами. У каталозі доступний повний перелік продукції.

Перейшовши до конкретного товару, користувач може детально ознайомитися з його описом, фотографіями, ціною. Вибрані товари можна додавати до кошика, де є можливість змінювати їх кількість, видаляти непотрібні позиції та переглядати як проміжну, так і загальну суму замовлення. Додатково користувач може вводити купони на знижку, щоб зменшити кінцеву вартість покупки.

Коли вибір зроблено, покупець переходить до оформлення замовлення, де вказує свої дані для доставки. Крім цього, він може переглядати інформаційні розділи сайту: у «Блозі» читати новини та знайомитися з останніми трендами у світі моди, у вкладці «Про нас» дізнаватися про компанію та її діяльність, а в розділі «Контакти» знаходити адресу, телефони та карту розташування магазину.

Адміністратор:

Адміністратор web-застосунку Йосип Store відповідає за наповнення та підтримку інтернет-магазину. Він має можливість додавати нові товари, вказуючи їх назву, опис, ціну, фото та наявність у каталозі. При потребі адміністратор може редагувати вже існуючі позиції або видаляти товари, що більше не продаються.

Окрім управління каталогом, адміністратор контролює замовлення користувачів: переглядає список нових замовлень, змінює їхній статус (наприклад, «очікує підтвердження», «у дорозі», «доставлено») та опрацьовує деталі доставки. У випадку використання промокодів він також може створювати та керувати купонами на знижку.

Також адміністратор має змогу оновлювати інформаційні розділи сайту. Зокрема, у «Блозі» він може публікувати новини чи матеріали про модні тренди, а в розділі «Про нас» або «Контакти» – редагувати актуальні дані компанії.

UML-діаграма:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Йосип Store</title> </head> <body> <header> <a class="logo" href="#">Йосип</a> <div> <ul id="navbar"> <li><a class="active" href="index.html">Дім</a></li> <li><a href="shop.html">Магазин</a></li> <li><a href="blog.html">Блог</a></li> <li><a href="about.html">Про нас</a></li> <li><a href="contact.html">Контакти</a></li> <li><a href="cart.html"><img class="cart" src="./img/shopping-bag.png" alt="Кошик"></a></li> </ul> </div> </header> <main> <section id="hero"> <h2>Вигідні пропозиції</h2> <h1>На всі товари</h1> <p>Заощадьте більше з купонами та знижками до 70%</p> <button>Магазин</button> </section> <section id="features" class="section-p1"> <div class="fe-box"> <img src="./img/features/f1.png" alt="Безкоштовна доставка"> <h6>Безкоштовна доставка</h6> </div> <div class="fe-box"> <img src="./img/features/f2.png" alt="Онлайн замовлення"> <h6>Онлайн замовлення</h6> </div> <div class="fe-box"> <img src="./img/features/f3.png" alt="Заощаджуйте гроші"> <h6>Заощаджуйте гроші</h6> </div> <div class="fe-box"> <img src="./img/features/f4.png" alt="Акції"> <h6>Акції</h6> </div> <div class="fe-box"> <img src="./img/features/f5.png" alt="Гарний вибір"> <h6>Гарний вибір</h6> </div> <div class="fe-box"> <img src="./img/features/f6.png" alt="Підтримка 24/7"> <h6>Підтримка 24/7</h6> </div> </section> <section class="products section-p1"> <h2>Рекомендовані товари</h2> <p>Літня колекція | Новий сучасний дизайн</p> <div class="pro-container"> <div class="pro"> <img class="product-img" src="./img/products/f1.jpg" alt="Футболка “Cartoon Astronaut”"> <div class="des"> <span>adidas</span> <h5>Футболка “Cartoon Astronaut”</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/f2.jpg" alt="Футболка “Cartoon Astronaut”"> <div class="des"> <span>adidas</span> <h5>Футболка “Cartoon Astronaut”</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/f3.jpg" alt="Футболка “Cartoon Astronaut”"> <div class="des"> <span>adidas</span> <h5>Футболка “Cartoon Astronaut”</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/f4.jpg" alt="Футболка “Cartoon Astronaut”"> <div class="des"> <span>adidas</span> <h5>Футболка “Cartoon Astronaut”</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/f5.jpg" alt="Футболка “Cartoon Astronaut”"> <div class="des"> <span>adidas</span> <h5>Футболка “Cartoon Astronaut”</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/f6.jpg" alt="Футболка “Cartoon Astronaut”"> <div class="des"> <span>adidas</span> <h5>Футболка “Cartoon Astronaut”</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>2062,53 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/f7.jpg" alt="Штани штапель EY-273A300"> <div class="des"> <span>adidas</span> <h5>Штани штапель EY-273A300</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>2103,78 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/f8.jpg" alt="Сорочка жіноча з принтами "> <div class="des"> <span>adidas</span> <h5>Сорочка жіноча з принтами </h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1567,52 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> </div> </section> <section id="banner" class="section-m1"> <h2>Знижки до <span>70%</span> на всі Футболки та Аксесуари</h2> <button class="normal">Дізнатися більше</button> </section> <section class="products section-p1"> <h2>Новинки</h2> <p>Літня колекція | Новий сучасний дизайн</p> <div class="pro-container"> <div class="pro"> <img class="product-img" src="./img/products/n1.jpg" alt="Сорочка “Cartoon Astronaut”"> <div class="des"> <span>adidas</span> <h5>Сорочка “Cartoon Astronaut”</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/n2.jpg" alt="Сорочка Staff ed dark gray2"> <div class="des"> <span>adidas</span> <h5>Сорочка Staff ed dark gray2</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/n3.jpg" alt="Сорочка Staff reb white”"> <div class="des"> <span>adidas</span> <h5>Сорочка Staff reb white</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/n4.jpg" alt="Футболка Essentials Elevated"> <div class="des"> <span>adidas</span> <h5>Футболка Essentials Elevated</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/n5.jpg" alt="Сорочка Staff al blue"> <div class="des"> <span>adidas</span> <h5>Сорочка Staff al blue</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/n6.jpg" alt="Шорти Staff cargo sen light gray"> <div class="des"> <span>adidas</span> <h5>Шорти Staff cargo sen light gray</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>2103,78 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/n7.jpg" alt="Сорочка Staff ind beige"> <div class="des"> <span>adidas</span> <h5>Сорочка Staff ind beige</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>2062,53 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> <div class="pro"> <img class="product-img" src="./img/products/n8.jpg" alt="Сорочка Staff mai black oversize"> <div class="des"> <span>adidas</span> <h5>Сорочка Staff mai black oversize</h5> <div class="stars"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> <img src="./img/star.png" alt="Зірка" class="star-img"> </div> <h4>1980,02 грн</h4> </div> <a href="#"><img src="./img/shopping_cart.png" alt="Додати в кошик" class="shopping-cart-img"></a> </div> </div> </section> <section id="banners" class="section-p1"> <div class="banner-box"> <h2>Найкращі класичні сукні</h2> <span>Купи дві — третя безкоштовно</span> <button class="white">Дізнатися більше</button> </div> <div class="banner-box banner3"> <h2>Нова колекція футболок</h2> <span>Літо закінчується так само швидко, як і дитинство</span> <button class="white">Колекція</button> </div> </section> <section id="banner4"> <div class="banner-box"> <h2>Нова колекція взуття</h2> <h3>Осінь/зима 2025</h3> </div> <div class="banner-box banner5"> <h2>Сезонний розпродаж</h2> <h3>Зимова колекція -50%</h3> </div> </section> </main> <footer class="section-p1"> <div class="column"> <a class="logo" href="#">Йосип</a> <h4>Контакти</h4> <p><strong>Адреса:</strong> м. Київ, вул. Політехнічна, 41</p> <p><strong>Номер телефону:</strong> 044 236 7989</p> <p><strong>Години роботи:</strong> 8:00 - 17:00. Пн — Пт</p> </div> <div class="column"> <h4>Про нас</h4> <a href="#">Інформація про доставку</a> <a href="#">Політика конфіденційності</a> <a href="#">Правила та умови</a> <a href="#">Зв'язатися з нами</a> </div> <div class="column"> <h4>Мій обліковий запис</h4> <a href="#">Увійти</a> <a href="#">Переглянути кошик</a> <a href="#">Відстежити моє замовлення</a> <a href="#">Довідка</a> </div> <div class="column install"> <h4>Встановити застосунок</h4> <p>З App Store або Google Play</p> <div class="row"> <img src="./img/app_store.jpg" alt=""> <img src="./img/google_pay.jpg" alt=""> </div> <p>Захищені платежі</p> <img src="./img/pay.png" alt=""> </div> <div class="copyright"> <p>© 2025 Йосип Store. Всі права захищено.</p> </div> </footer> <script src="index.js"></script>; </body> </html>
<section class="table"> <table> <caption>Доступний товар</caption> <thead> <tr> <th scope="col">№</th> <th scope="col">Бренд</th> <th scope="col">Назва</th> <th scope="col">Відгуки</th> <th scope="col">Ціна|грн</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <th>adidas</th> <th>Сорочка “Cartoon Astronaut”</th> <th>5/5</th> <th>1980,02</th> </tr> <tr> <th scope="row">2</th> <th>adidas</th> <th>Сорочка Staff ed dark gray2</th> <th>5/5</th> <th>1980,02</th> </tr> <tr> <th scope="row">3</th> <th>adidas</th> <th>Сорочка Staff reb white</th> <th>5/5</th> <th>1980,02</th> </tr> <tr> <th scope="row">4</th> <th>adidas</th> <th>Футболка Essentials Elevated</th> <th>5/5</th> <th>1980,02</th> </tr> <tr> <th scope="row">5</th> <th>adidas</th> <th>Сорочка Staff al blue</th> <th>5/5</th> <th>1980,02</th> </tr> <tr> <th scope="row">6</th> <th>adidas</th> <th>Шорти Staff cargo sen light gray</th> <th>5/5</th> <th>2103,78</th> </tr> <tr> <th scope="row">7</th> <th>adidas</th> <th>Сорочка Staff ind beige</th> <th>5/5</th> <th>2062,53</th> </tr> <tr> <th scope="row">8</th> <th>adidas</th> <th>Сорочка Staff mai black oversize</th> <th>5/5</th> <th>1980,02</th> </tr> </tbody> </table> </section>

Скріншот таблиці:

Теорія про теги та атрибути, які я використовував при створенні таблиці:

Теги:

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

Атрибути:

  • scope (для <th>) — вказує, на що поширюється заголовок (col або row).
<section id="features" class="section-p1"> <div class="fe-box"> <img src="./img/features/f1.png" alt="Безкоштовна доставка"> <h6>Безкоштовна доставка</h6> </div> <div class="fe-box"> <img src="./img/features/f2.png" alt="Онлайн замовлення"> <h6>Онлайн замовлення</h6> </div> <div class="fe-box"> <img src="./img/features/f3.png" alt="Заощаджуйте гроші"> <h6>Заощаджуйте гроші</h6> </div> <div class="fe-box"> <img src="./img/features/f4.png" alt="Акції"> <h6>Акції</h6> </div> <div class="fe-box"> <img src="./img/features/f5.png" alt="Гарний вибір"> <h6>Гарний вибір</h6> </div> <div class="fe-box"> <img src="./img/features/f6.png" alt="Підтримка 24/7"> <h6>Підтримка 24/7</h6> </div> </section>

Скріншот зображень:

Теорія про атрибути тегу:
  • "src" (source) – шлях до зображення.
  • "alt" (alternative text) – альтернативний текст, що показується, якщо зображення не завантажилось.
  • "width / height" – задають розміри зображення.
  • "title" – підказка при наведенні курсора.
<section class="form"> <h2>Форма</h2> <form action="#" method="post" enctype="multipart/form-data" novalidate> <div> <label for="name">Ім'я</label> <input id="name" name="name" type="text" placeholder="Ваше ім'я" required> </div> <div> <label for="email">Email</label> <input id="email" name="email" type="email" placeholder="name@example.com" required> </div> <div> <label for="service">Послуга</label> <select id="service" name="service" required> <option value="">-- виберіть --</option> <option value="free_shipping">Безкоштовна доставка</option> <option value="online_ordering">Онлайн замовлення</option> <option value="save_money">Заощаджуйте гроші</option> <option value="special_offers">Акції</option> <option value="great_selection">Гарний вибір</option> <option value="support">Підтримка 24/7</option> </select> </div> <div class="row"> <label for="message">Коментар</label> <textarea id="message" placeholder="Ваше повідомлення..."></textarea> </div> <div class="row"> <label></label> <button type="submit">Відправити</button> </div> </form> </section>

Скріншот форми:

<section class="lists"> <h2>Списки</h2> <ul> <li>Сорочка “Cartoon Astronaut”</li> <li>Сорочка Staff ed dark gray2</li> <li>Сорочка Staff reb white</li> <li>Футболка Essentials Elevated</li> </ul> <ol> <li>Сорочка Staff al blue</li> <li>Шорти Staff cargo sen light gray</li> <li>Сорочка Staff ind beige</li> <li>Сорочка Staff mai black oversize</li> </ol> </section>

Скріншот списків:

Теорія про теги та атрибути, які застосовуються при створенні списків:

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

  • Тег <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, виконав базові навчальні уроки та створив макет власного вебзастосунка.