nmk

Лабораторне заняття №2 (2 години). Побудова семантичного каркаса веб-сторінки.

Мета

Навчитися проєктувати правильну структуру HTML-документа, використовуючи сучасні семантичні теги HTML5. Закласти фундамент наскрізного проєкту курсу — інтернет-магазину.

План

  1. Створення файлової структури візитки/магазину (продовження).
  2. Написання базової структури index.html (теги html, head, body).
  3. Використання семантичних тегів (<header>, <nav>, <main>, <section>, <article>, <footer>).
  4. Додавання базового контенту (заголовки, тексти, списки, заглушки для зображень).
  5. Збереження прогресу в Git.

Хід роботи

Увага: Всі практичні роботи у цьому курсі є наскрізними. Ви будете створювати один великий проєкт (наприклад, Інтернет-магазин “TechShop”) крок за кроком.

  1. Підготовка репозиторію:
    • Відкрийте папку вашого проєкту (створеного на Практичній №1) у VS Code.
    • Створіть нову гілку для цієї роботи: git checkout -b feature/html-structure.
  2. Базова структура:
    • У файлі index.html напишіть базовий шаблон HTML5 (можна використати сніпет ! + Tab у VS Code).
    • Вкажіть правильну мову сторінки (<html lang="uk">).
    • Змініть <title> на “TechShop - Магазин гаджетів”.
  3. Семантичний каркас: Створіть у <body> наступні логічні блоки, але поки що без CSS-класів (лише чисті теги):
    • <header>: міститиме логотип (текстом <h1>), та блок <nav> з посиланнями (Головна, Товари, Про нас, Контакти, Кошик).
    • <main>: головний вміст сторінки.
      • <section> (Баннер/Герой сторінки): заголовок <h2>Новинки 2025</h2> та заклик до дії (тег <a> у вигляді кнопки).
      • <section> (Список товарів): заголовок “Популярні товари”. Всередині додайте 3-4 теги <article> (це будуть наші картки товарів). В кожній картці:
        • Зображення товару (<img>, поки вставте лінки на placeholder, наприклад https://via.placeholder.com/150).
        • Назва товару (<h3>).
        • Опис товару (<p>).
        • Ціна та кнопка “Купити”.
    • <footer>: Контактна інформація, копірайт (&copy; 2025 TechShop), соціальні мережі (списком <ul>).
  4. Розмітка форм (опціонально для цієї роботи, але корисно):
    • У футері додайте форму підписки на розсилку: тег <form>, <input type="email">, <button>Підписатися</button>.
  5. Збереження та відправка (Commit & Push):
    • Перевірте відображення сторінки через Live Server у браузері (вона буде негарною, без стилів — це нормально).
    • Зробіть коміт: 
      git add .
git commit -m "Add basic semantic HTML5 structure"
    • Відправте гілку на GitHub: git push origin feature/html-structure.
    • На сайті GitHub створіть Pull Request і злийте його в main (або просто виконайте git merge локально, як ви робили на ПР №1).

Результат

У вашому репозиторії на екрані повинна бути “гола” розмітка магазину з правильною ієрархією заголовків (від H1 до H3) та семантичними тегами, доступна на GitHub Pages.

Контрольні питання

  1. Чому важливо використовувати семантичні теги (header, main, footer), а не просто <div id="header">? На що це впливає?
  2. У чому різниця між тегами <section> та <article>? Де їх доречно використовувати?
  3. Який тег слід використовувати для головної навігації сайту?
  4. Навіщо атрибут alt для тегу <img>? Що буде, якщо його не вказати?
  5. Назвіть 3 способи, якими можна імітувати кнопку за допомогою HTML-тегів. Який правильний для виконання дії (напр., купити товар), а який для переходу на іншу сторінку?