Як вставити в HTML iframe: приклад використання

На зорі сайтостроения веб-ресурси широко використовували фрейми для відображення окремих частин сторінок. Але з приходом нової версії HTML 5 все змінилося. Елементи розмітки <frame>, <frameset> І <noframes> Визнані застарілими. Заміною ним став один-єдиний тег - <iframe>. Як додати в html <iframe>? Приклад нижче буде зрозумілий навіть новачкові в програмуванні.

Що таке фрейми?

Фрейм - основа більшості перших веб-сторінок. Якщо перекладати дослівно, дане слово означає «кадр», тобто фрейм представляє собою невелику частину сторінки в браузері. Повсюдне використання фреймів в минулому можна пояснити низькою якістю і дорожнечею інтернет-трафіку. Як правило, сайт розбивався на 3-5 частин, кожна з яких виконувала певне призначення:

• «Шапка» (верхній фрейм по ширині сторінки) - відображення назву ресурсу;
• лівий / правий «стакан» - висновок меню;
• центральний фрейм - показ контенту сайту.

Розбивка сторінки на частини дозволяла перевантажити лише деяку частину при її оновленні. Наприклад, користувач натискав пункт меню, і в центральний фрейм закачувати новий вміст.

Сучасні фрейми в HTML 5

Навіщо потрібен в HTML <iframe>? Приклад - вставка контенту стороннього ресурсу. Класичною є ситуація, коли веб-розробник бажає показати положення об'єкта на карті. Як бути? Малювати план місцевості з нуля? Ні - є більш просте рішення: вбудувати на сторінку елемент Google Map, Яндекс Карти або 2ГІС. Завдання вирішується в чотири дії.

1. Потрібно перейти на сайт будь-якого картографічного сервісу.
2. Знайти бажаний об'єкт. Знаючи точну адресу, можна ввести його у вікні пошуку.
3. За допомогою кнопки «Зберегти і отримати код» (для "Яндекс.Карт") або «Готово» (для карт Google) отримати код для вставки.
4. Залишилося вписати згенеровані теги розмітки на сторінку.

Додатково можна вибрати розмір карти і налаштувати інші опції відображення.

Як ще можна використовувати в HTML <iframe>? Приклад - вставка відеоматеріалів з ресурсу Youtube. Мультимедіа-технології залучають користувачів Інтернету, тому відеоконтент настільки популярний. З установкою ролика розробник впорається швидко.

1. Слід завантажити на Youtube власне відео або знайти сторонній файл для трансляції.
2. Отримати тег, вибравши кнопку «HTML-код»
3. Заключне дію - вставити в код HTML <iframe>. Приклад одержуваного вмісту тега буде розглянуто нижче.

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

синтаксис

Отже, перш ніж приступити до верстці сторінки, необхідно розглянути тег iframe (html): що це таке і як правильно його використовувати.

Перш за все, потрібно відзначити, що тег парний. Між відкривається і закривається елементами вказують вміст, який буде відображатися в браузерах, що не підтримують даний елемент розмітки. Основні атрибути тега:

• width (ширина);
• height (висота);
• src (адреса завантажується ресурсу);
• align (спосіб вирівнювання);
• frameborder;
• allowfullscreen.

Таким чином, отриманий код для <iframe>. HTML-приклад повністю продемонстрований нижче:

<Iframe width = "560" height = "315" src = "https://someserver.com/" frameborder = "0" allowfullscreen> </ iframe>

У наведеній розмітці досить замінити адресу сайту на будь-який інший і, якщо це необхідно, скоригувати розміри фрейма.