Календар
«    Квітень 2025    »
ПнВтСрЧтПтСбНд
 123456
78910111213
14151617181920
21222324252627
282930 
img
Хмарина тегів
a Absolute align-items autoplay color container css description display div flex flex-direction Flexbox footer form Google Maps h1 head header height href html id iframe img justify-content li maxlength minlength p pattern placeholder required section src table title ul width пз
Показати всі теґи
Опитування
Оцініть роботу двигуна
Понеділок
жов 28

Урок 1. Вступ до HTML

admin
admin

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

 Уроки HTML  69  0

План уроку: Вступ до HTML (25-30 хвилин)

З цього уроку ви дізнаєтесь, що таке HTML і чому він є основою всіх вебсайтів. Ми розберемося, як виглядає структура HTML-документа, які теги є найважливішими та як браузери розуміють ваш код. Наприкінці уроку ви створите свою першу просту вебсторінку та побачите її в браузері — це буде ваш перший крок у веброзробці!


1. Привітання та мотивація (5 хвилин)

  • Ціль: Захопити учнів і дати їм уявлення про важливість HTML.
  • Що сказати:
    • HTML — це мова, за допомогою якої створюються вебсайти.
    • Пояснити, що HTML — це "кістяк" будь-якого сайту, а CSS — це "одяг", а jаvascript — це "мозок".
    • Запитати учнів, який їх улюблений сайт, і пояснити, що всі ці сайти починаються з HTML.
  • Приклад: "Ви коли-небудь думали, що вебсайт — це як конструктор LEGO, тільки замість цеглинок ми використовуємо HTML-код?"


2. Що таке HTML? (5 хвилин)

  • Ціль: Пояснити поняття HTML і його функцію в веброзробці.
  • Матеріал:
    • HTML — це абревіатура від "HyperText Markup Language" (Мова розмітки гіпертексту).
    • HTML розмічає контент, тобто говорить браузеру, як відображати текст, зображення, посилання тощо.
    • Кожен сайт використовує HTML для побудови структури сторінок.
  • Пояснення з прикладами:
    • Вебсторінка складається з різних блоків, і HTML дозволяє нам визначити, що є заголовком, що є текстом, а що — зображенням.


3. Структура HTML-документа (10 хвилин)

  • Ціль: Ознайомити зі структурою базового HTML-документа та його основними елементами.

  • Кроки:

    • Що таке doctype: Це оголошення, яке повідомляє браузеру, що цей документ — HTML5.


      <!DOCTYPE html>

        • Пояснити, що це обов'язкова частина для всіх сучасних сайтів, щоб вони правильно відображалися.

      • Тег <html>: Це кореневий елемент, в якому знаходиться весь HTML-документ.

      <html>
</html>


      Тег <head>: Це частина документа, яка містить метаінформацію (назва сайту, підключення до CSS, jаvascript тощо). Тут браузер отримує інформацію про саму сторінку, але не показує її користувачу.

      <head>
  <title>Мій перший сайт</title>
</head>


      Тег <body>: Тут знаходиться весь вміст, який бачить користувач (тексти, зображення, посилання, кнопки).

      <body>
  <h1>Вітаю на моєму першому сайті!</h1>
  <p>Це перший абзац на моєму сайті.</p>
</body>


      • Аналогія: Сторінка сайту — це як книга. Тег <!DOCTYPE html> — це як тип книги (наприклад, роман), тег <html> — це сама книга, тег <head> — це обкладинка та інформація про автора, а тег <body> — це сторінки з текстом.


      4. Практика (10-15 хвилин)

      • Ціль: Учні створять свій перший HTML-документ з правильною структурою.
      • Кроки:
        • Попросити учнів відкрити текстовий редактор (можна використати Notepad або VSCode).
        • Створити новий файл і назвати його index.html.
        • Скопіювати наступний базовий шаблон HTML:
      <!DOCTYPE html>
<html>
<head>
  <title>Мій перший сайт</title>
</head>
<body>
  <h1>Привіт, світ!</h1>
  <p>Це мій перший HTML-документ.</p>
</body>
</html>



        • Попросити їх зберегти файл і відкрити його у браузері.
      • Обговорення:
        • Що вони бачать на сторінці?
        • Як кожен елемент HTML відображається в браузері?


      5. Підсумок і запитання (5 хвилин)

      • Ціль: Закріпити знання та відповісти на запитання учнів.
      • Що повторити:
        • HTML — це мова, яка дозволяє створювати структуру вебсайтів.
        • Основна структура HTML-документа: DOCTYPE, html, head, body.
      • Запитання:
        • Що робить тег <title>? (Відповідь: показує назву сторінки в закладці браузера).
        • Для чого потрібен тег <body>? (Відповідь: там розміщується весь видимий контент сторінки).



      Домашнє завдання

      • Створити нову HTML-сторінку з заголовком, кількома абзацами та одним посиланням.

      Цей план уроку допоможе підліткам зрозуміти базові поняття HTML, побудову сторінки та дасть можливість одразу побачити результат власної роботи!



html head body title DOCTYPE






Дивіться також:
{title
Урок 8. Позиціювання: Static, Relative, Absolute, Fixed, Sticky
1-11-2024, 11:05
{title
Ласкаво просимо
16-09-2024, 20:56
{title
Урок 1. Вступ до HTML
28-10-2024, 13:45
{title
Урок 4. Шрифти та типографіка: Задання шрифтів, розмірів, ваги, висоти рядка
30-10-2024, 15:29
{title
Урок 8. Таблиці: Створення таблиць, атрибути table, tr, td, thead, tbody
28-10-2024, 14:11
{title
Урок 6. Мультимедіа: Відео та аудіо на сторінці, атрибути autoplay, controls
28-10-2024, 14:07
Коментарі (0)