Section outline

  • Collapse Expand

    Collapse all Expand all

    Метою вивчення дисципліни є формування у студентів знань щодо правил побудови документів HTML та властивостей каскадних таблиць стилів.

    Основними завданнями є вивчення додаткових тегів, атрибутів та словників мікророзмітки (зокрема Schema.org), що надають пошуковим системам інформацію про зміст сторінки та покращують її SEO-показники.

  • Collapse Expand

    Змістовий модуль 1. Основи HTML5 та архітектура документа

    •    
             

      🟧Основи мови HTML5

         
         
             

      Ключові теми: Правила побудови документів, теги форматування тексту, створення списків та таблиць.

             
                  <!DOCTYPE html>
                  <html lang="uk">
                  <body> Ваш контент тут </body>        
             

      🎯 Мета: Навчитися створювати валідну структуру вебсторінки.

         
    • Лекція 1 File
    • Лабораторна робота №1 Assignment
    • Самостійна робота 1 Assignment
    • Тест 1 (10 балів) Quiz
  • Collapse Expand

    Змістовий модуль 2. Основи CSS та стилізація

    🟦 Змістовий модуль 2. Основи CSS та візуалізація

    Ключові теми: Селектори, каскадність (Box Model), оформлення тексту та робота з пріоритетами стилів.

    .selector {
      color: #3498db;
      margin: 20px;
    }

    🎨 Порада: Використовуйте зовнішні таблиці стилів для чистоти коду.

  • Collapse Expand

    Змістовий модуль 3. Семантична розмітка HTML-тегами

    🟩 Змістовий модуль 3. Семантична розмітка

    Ключові теми: Теги HTML5 (<main>, <article>), призначення мікророзмітки та аналіз структури веб-ресурсів.

    🚀 SEO-ефект: Семантика допомагає пошуковим роботам краще розуміти ваш контент.

    🔗 Інструмент: W3C Validator для перевірки валідності.

  • Collapse Expand

    Змістовий модуль 4. Словники мікророзмітки

    🎓

    Змістовий модуль 4. Словники мікророзмітки

    Повний гайд: від теоретичних основ синтаксисів до практичного впровадження та SEO-оптимізації метаданих.

    1. Концепція та вплив на SEO

    🔍 Для пошукових систем

    Мікророзмітка перетворює неструктурований контент на машинозчитувані дані. Це дозволяє Google формувати Rich Snippets (зірочки рейтингу, ціни, наявність товару, тривалість відео), що підвищує CTR (клікабельність) на 20-30%.

    📱 Для соціальних мереж

    Використання словників типу Open Graph керує тим, як ваше посилання виглядає у Telegram, Viber чи Facebook. Без метаданих соцмережа підтягує випадкове зображення та текст.

    2. Порівняльний аналіз синтаксисів

    Критерій JSON-LD Microdata RDFa
    Розміщення Окремий блок <script> Всередині HTML-тегів Всередині HTML-тегів
    Зручність Найвища (рекомендовано) Середня Складно для новачків
    Підтримка Google Пріоритетна підтримка Повна підтримка Обмежена (переважно OG)

    3. Еталонні зразки коду

    example.html
    <!-- Словник Schema.org у синтаксисі JSON-LD -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Цифрові мультимедійні технології",
  "educationalCredentialAwarded": "Сертифікат ЗНУ",
  "description": "Курс присвячений вивченню мікророзмітки та SEO.",
  "provider": {
    "@type": "Organization",
    "name": "Zaporizhzhia National University"
  }
}
</script>

    🚨 Лабораторія помилок: Чого НЕ варто робити?

    ❌ Помилка 1: Невалідний JSON

    Студенти часто забувають про кому після останнього елемента в об'єкті або використовують «парні» лапки з Word. Браузер ігнорує весь блок.

    ❌ Помилка 2: Фантомні дані

    Розмітка ціни в 100$ через Schema.org, тоді як на самій сторінці написано 150$. Пошукові системи вважають це спамом та знижують рейтинг.

    ❌ Помилка 3: Змішування синтаксисів

    Спроба закрити тег Microdata (itemprop) всередині блоку JSON-LD. Це різні методи, вони не змішуються!

    ❌ Помилка 4: Дублювання OG

    Декілька тегів og:image. Соцмережі оберуть випадковий або останній, що призведе до некоректного прев'ю.

    Завершили впровадження коду? Перевірте його результативність тут:

    Матеріал підготовлено для студентів ЗНУ. © 2026 Всі права захищені.
  • Collapse Expand

    Змістовий модуль 5. Мікророзмітка Schema.org

    🟪 Змістовий модуль 5. Schema.org: Структура та типи

    Ключові теми: Типи даних Schema.org, розмітка контенту та проєктування складних об'єктів.

    Сутності для вивчення:
    • Person • Organization • Event • Course • Product

  • Collapse Expand

    Змістовий модуль 6. Автоматизація мікророзмітки

    🟥 Змістовий модуль 6. Автоматизація мікророзмітки

    Ключові теми: Інструментальні засоби, використання плагінів для автоматизації та порівняльний аналіз результатів.

    🛠️ Практика: Використання плагінів CMS для генерування структурованих даних.

    📊 Аналіз: Порівняння точності ручної розмітки проти автоматизованих рішень.

    • Лабораторна робота №5 Assignment
    • Самостійна робота №6 Assignment

      Тема: Порівняльний аналіз результатів ручної та автоматизованої мікророзмітки контенту.

      Мета: Навчитися виявляти обмеження автоматизованих засобів та обґрунтовувати вибір методу впровадження структурованих даних.

      I. Зміст завдання

      Провести порівняльний аналіз двох ідентичних за змістом блоків мікророзмітки: створеного власноруч у ЛР №4 та згенерованого за допомогою автоматичних засобів у ЛР №5.

      Етапи аналізу:

      1. Порівняти кількість властивостей (properties), які були додані вручну, з тими, що запропонував генератор.
      2. Перевірити обидва коди через Schema Markup Validator. Зафіксувати наявність попереджень (Warnings) щодо рекомендованих, але відсутніх полів у кожному з варіантів.
      3. Проаналізувати структуру коду.
      4. Визначити, чи створюють обидва варіанти однаковий «розширений сніпет» у результатах пошуку (через інструмент попереднього перегляду Google).

       

      II. Зразок оформлення висновку

      Для звіту студенти можуть використовувати таку структуру порівняння:

      Об’єкт аналізу: Розмітка типу Course (Курс).

      • Ручна розмітка. Дозволила точно вказати специфічні поля, такі як educationalCredentialAwarded (сертифікат).
      • Авто-розмітка. Швидко згенерувала базові поля, але додала зайвий блок offers, який не був потрібний для безкоштовного курсу.
      • Висновок. Для стандартних сторінок (новини) доцільна автоматизація, для унікальних продуктів (курси ЗНУ) — комбінований підхід.

       

      III. Практичне завдання (Case Study)

      Знайдіть у мережі приклад сайту, де автоматична розмітка працює некоректно (наприклад, замість ціни товару підтягується ціна доставки). Опишіть який тег або властивість спричинили помилку? Як би ви виправили цей код вручну?

       

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

      1. Які ризики несе використання застарілих плагінів для автоматичної розмітки?
      2. Чи може автоматична розмітка негативно вплинути на SEO, якщо вона дублює контент?
      3. У яких випадках ручна корекція автоматично згенерованого JSON-LD є обов'язковою?
  • Collapse Expand

    Змістовий модуль 7. Мікророзмітка OpenGraph

    🟦 Змістовий модуль 7. Протокол OpenGraph

    Ключові теми: Налаштування прев'ю сторінок для соцмереж, валідація мета-тегів та адаптація під різні платформи.

    <meta property="og:type" content="website">
    <meta property="og:title" content="Назва сторінки">

    📱 Ефект: Контроль відображення посилань у Telegram, Facebook та Viber.

  • Collapse Expand

    Змістовий модуль 8. Валідація та інструменти перевірки

    🟨 Змістовий модуль 8. Інструменти перевірки даних

    Ключові теми: Валідація розмітки, інструменти тестування розширених результатів Google та фінальне налагодження.

    ✅ Готовність: Перевірка відсутності критичних помилок у Schema.org та OpenGraph.

    🔍 Контроль: Використання Google Rich Results Test для отримання статусу "Valid".

  • Collapse Expand

    Розділ 2 Розробка web-сторінок зі стильовим оформленням

  • Collapse Expand

    Індивідуальне завдання

  • Collapse Expand

    Підсумковий контроль

  • Collapse Expand

    ЗАОЧНА ФОРМА ЗДОБУТТЯ ОСВІТИ

    Для заочної форми навчання викладач: Просяна Дар'я Ігорівна

     Кафедра: комп'ютерних наук
     E-mail: prsjana.darja.i@gmail.com

    Заняття у Просяної Д.І. за розкладом через платформу Zoom.

    Ідентифікатор конференції: 981 316 3044
    Код доступу: 12345
    вхід після прийняття учасника організатором

    HTML5 - MDN
    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

    HTML специфікація
    https://html.spec.whatwg.org/ 

    HTML <!DOCTYPE>
    https://www.w3schools.com/tags/ref_html_dtd.asp

    HTML cheat sheet
    https://www.december.com/html/spec/HTML5-Cheat-Sheet.pdf

    HTML: interactive cheat sheet
    https://digital.com/tools/html-cheatsheet/ 

    Несемантична і семантична ррозмітка

    розмітка

    Not available unless: You belong to 6.122-з