Логотип сайту
Інформатика 8 клас

Тема 2: «Створення та публікація вебресурсів». Урок № 13. (До § 10)

Графічні зображення та гіперпосилання на вебсторінці

Інтерактивний план-конспект уроку для 8 класу НУШ

🎯 Мета уроку

  • Освітня: Ознайомити учнів із засобами HTML для вставляння зображень та створення гіперпосилань на вебсторінці.
  • Розвивальна: Розвивати навички роботи з графічними елементами та навігацією, вміння інтегрувати різні типи контенту.
  • Виховна: Формувати уважність до деталей та розуміння важливості юзабіліті у веб-дизайні.

✅ Очікувані результати

Після уроку учні зможуть:

  • вставляти зображення на вебсторінку за допомогою тегу `<img>`;
  • задавати розміри зображень та їхнє обтікання текстом;
  • створювати гіперпосилання за допомогою тегу `<a>`;
  • розрізняти види гіперпосилань (на інший документ, на фрагмент документа);
  • додавати зображення як гіперпосилання.

📊 Групи результатів (НУШ)

Візуалізація важливості груп результатів для цього уроку.

Учень / учениця:

  • ГР1 – працює з інформацією, даними, моделями;

  • ГР2 – створює інформаційні продукти;

  • ГР3 – працює в цифровому середовищі;

  • ГР4 – безпечно та відповідально працює з інформаційними технологіями.

📚 Тип уроку

Урок вивчення нового матеріалу з елементами практичної роботи.

💻 Обладнання та ПЗ

  • Персональні комп’ютери, підключені до мережі Інтернет.
  • Підручник «Інформатика 8 клас» О. О. Бондаренко, В. В. Ластовецький, О. П. Пилипчук, Є. А. Шестопалов.
  • Текстовий редактор (Блокнот, Notepad++, Sublime Text тощо).
  • Браузер для перегляду HTML-файлів.

🔗 Міжпредметні зв'язки

  • Українська мова: Робота з текстом, його структура.
  • Мистецтво: Візуальне оформлення вебсторінок.

ПОВТОРЮЄМО

Актуалізація опорних знань

  1. Що таке HTML?
  2. Наведіть приклади парних та непарних тегів.
  3. Назвіть складові структури HTML-документа.
  4. Що таке атрибут тегу?
  5. Якими засобами HTML можна змінити колір тла вебсторінки сайту?
  6. Які теги використовуються для створення списків?
Знак питання

Джерело: Підручник з інформатики для 8 класу (стор. 52-56)

Практичний блок уроку

Вправа 1: Зіставте атрибути тегу `<img>` з їхнім призначенням.

Перетягніть атрибут до відповідного призначення.

Вказує шлях до файлу зображення.
Надає альтернативний текст для зображення.
Визначає ширину зображення.
Визначає висоту зображення.
Визначає розташування зображення та обтікання текстом.
Визначає товщину рамки навколо зображення.

Вправа 2: Який тег використовується для створення гіперпосилань на інший фрагмент того самого HTML-документа (закладки)?

Виберіть єдиний правильний варіант.

Вправа 3: Виберіть правильний HTML-код для створення гіперпосилання, де зображення є клікабельним елементом.

Відмітьте єдиний правильний варіант.

Перевірка знань

Натисніть на картку, щоб побачити відповідь.

  • 1. Як вставити зображення на вебсторінку?
    Для вставляння зображення використовується тег `<img src="шлях_до_файлу">`, де `src` вказує на розташування файлу зображення.
  • 2. У чому відмінність значень атрибутів для вставляння малюнка з внутрішньої та зовнішньої папок?
    Для **внутрішньої папки** шлях виглядає як `images/my.jpg`, для **зовнішньої** — `../images/my.jpg`.
  • 3. Як вирівняти зображення за правим краєм браузера?
    Для вирівнювання за правим краєм використовується атрибут `align="right"` в тегу `<img>`.
  • 4. Як задати розмір малюнка? Що означає розмір у відсотках?
    Розмір задається атрибутами `width` і `height`. Розмір у відсотках (`height="20%"`) означає 20% від висоти робочої області вікна браузера.
  • 5. Як створити гіперпосилання?
    Гіперпосилання створюється за допомогою тегу `<a href="шлях_до_файлу_або_URL">Текст посилання</a>`.
  • 6. Як додати до малюнка гіперпосилання на іншу вебсторінку?
    Щоб зробити зображення посиланням, його тег `<img>` потрібно помістити всередину тегів `<a>`: `<a href="page.html"><img src="image.jpg"></a>`.

Джерело: Підручник з інформатики для 8 класу (стор. 57-60)

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

1. Теоретична частина:

  • Опрацювати § 10 (стор. 57-60).

2. Практична частина:

  • Виконати вправу № 10 (стор. 59-60).

3. Завдання за бажанням (для закріплення):

Учні з книгами або комп'ютерами

Додаткові матеріали