Урок 14. Робота з іфреймами: Вбудовування іншого контенту на сторінку (iframe)

План уроку: Робота з іфреймами (iframe) — вбудовування іншого контенту на сторінку (25-30 хвилин)

1. Вступ: Що таке <iframe> і для чого він потрібен? (2-3 хвилини)

• З цього уроку ви дізнаєтесь, що тег <iframe> (inline frame) дозволяє вбудовувати в вашу вебсторінку сторонній контент — це може бути відео з YouTube, карта з Google Maps, інший HTML-документ або навіть цілий вебсайт.
• <iframe> створює на сторінці "віконце", в якому буде відображатися контент, що зберігається на іншому сервері. Це особливо зручно для інтеграції мультимедійних елементів або сервісів.

2. Створення базового іфрейму (5 хвилин)

• Ціль: Показати базову структуру тега <iframe> та його обов'язкові атрибути.

Синтаксис:

<iframe src="URL" width="600" height="400"></iframe>

Основні атрибути:

• src: Вказує на URL ресурсу, який буде вбудовано в сторінку.

• width і height: Встановлюють ширину та висоту іфрейму (в пікселях).

• Приклад:

  <iframe src="https://example.com" width="600" height="400"></iframe>
  

• Пояснення: Цей іфрейм буде відображати сторінку "https://example.com" у вікні розміром 600 пікселів завширшки та 400 пікселів заввишки.

3. Вбудовування відео та карт за допомогою іфрейму (8 хвилин)

• Ціль: Навчити учнів, як вбудовувати відео з YouTube та карти з Google Maps.

Відео з YouTube:

• Вбудовування відео з YouTube можна реалізувати через іфрейм, використовуючи URL відео.

  • Приклад:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/ID_VIDEO" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    

• Тут ID_VIDEO — це унікальний ідентифікатор відео, який можна знайти у посиланні на YouTube.

Google Maps:

• Вбудовування карти з Google Maps також можна здійснити за допомогою іфрейму. Це дуже зручно для показу розташування бізнесу або іншої локації на сайті.

  • Приклад:

    
    

    <iframe src="https://www.google.com/maps/embed?pb=YOUR_MAP_DATA" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    

• Тут YOUR_MAP_DATA — це спеціальний код, який генерується Google Maps при створенні карти для вбудовування.

4. Налаштування іфреймів та безпека (7 хвилин)

• Ціль: Пояснити, як налаштувати іфрейми для кращого вигляду на сторінці та як обмежити їхній доступ до певних ресурсів.

Атрибут frameborder:

• Встановлює наявність або відсутність рамки навколо іфрейму.
  • Приклад: <iframe src="..." frameborder="0"></iframe>

Атрибут allowfullscreen:

• Дозволяє відображати вбудований контент на весь екран (наприклад, для відео).
  • Приклад: <iframe src="..." allowfullscreen></iframe>

Атрибут sandbox:

• Обмежує можливості іфрейму (наприклад, забороняє виконувати скрипти, використовувати спливаючі вікна і т.д.). Це важливо для підвищення безпеки сторінки.

  • Приклад:
    

    <iframe src="..." sandbox="allow-scripts allow-same-origin"></iframe>
    

• Пояснення: Цей атрибут дає можливість заборонити виконання потенційно небезпечного коду в іфреймі.

5. Практична вправа: Додавання іфреймів на сторінку (7 хвилин)

• Завдання: Створити HTML-сторінку, на якій буде розміщено:
  • Іфрейм з відео з YouTube.
  • Іфрейм з картою з Google Maps.
  • Іфрейм зі сторінкою іншого сайту.

Приклад:

6. Підсумок і обговорення (5 хвилин)

• Що повторити:

  • Що таке <iframe> і які можливості він надає.
  • Як налаштовувати атрибути іфрейму (ширина, висота, рамка, налаштування безпеки).
  • Як вставити відео з YouTube або карту з Google Maps.
    
    

• Запитання для обговорення:

  • Як ви можете використовувати іфрейми на власних вебсторінках?
  • Які ризики можуть виникати при використанні іфреймів і як їх можна мінімізувати?

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

• Створити вебсторінку, яка використовує три іфрейми:
  • Один для відео з YouTube.
  • Один для карти з Google Maps.
  • Один для іншого вебсайту.

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