Вступ до iframes в HTML

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

Більшість веб-дизайнерів використовують Iframe для презентації інтерактивних додатків на веб-сайті або на веб-сторінках. Це стає можливим за допомогою javaScript або за допомогою атрибута target у HTML.

Основна мета Iframe - відображення веб-сторінки на іншій веб-сторінці. Вбудований кадр повинен відображатися за допомогою тегу під назвою

  • Можна також надати певній висоті та ширині нашому Iframe у форматі пікселів наступним чином:
  • У наведеному вище синтаксисі всі речі будуть ідентичними, крім того, ми можемо вказати висоту та ширину у форматі пікселів, визначаючи як

Приклад:

  • Ще один спосіб визначення висоти та ширини iframe за допомогою значень через CSS показаний у синтаксисі нижче:
  • Усі речі такі самі, як вище, лише змінюючи значення значень.

Приклад:

  • Ще одна функція додається до iframe - ми можемо видалити вже визначені рамки до кадру, використовуючи властивість border none. Синтаксис для цього такий:
  • За допомогою CSS також можна зробити багато речей з облямівкою, як-от зміна розміру кордону, нанесення певного кольору до межі тощо.

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

  • У наведеному вище синтаксисі src - це наша звичайна URL-адреса, тут цільовий атрибут посилання, який буде посилатися на атрибут name в нашому тезі iframe.

Приклад:

Атрибут тегів Iframes

У iframes використовуються різні теги атрибутів, які є наступними:

  • Src: Цей атрибут використовується для вставки файлу, який потрібно включити у кадр. URL-адреса визначає цільову веб-сторінку, яку потрібно завантажувати в рамку iframe.
  • Ім'я: ім'я - це атрибут, який використовується для визначення кадру ідентифікаційного імені. Найбільш корисно, коли ви створюєте одне посилання, щоб відкрити іншу веб-сторінку.
  • Повний екран : Цей атрибут дозволяє відображати ваш кадр у повнорозмірному форматі. тому для встановлення цієї функції ми повинні встановити значення true
  • Кадр: це корисний атрибут, який дозволяє показувати рамку або не показувати рамку для кадру. Значення 1 - показувати межу & 0, щоб не було межі кадру.
  • Marginwidth: Дозволяє визначити пробіл між лівою та правою стороною кадру
  • Marginheight: Дозволяє визначити пробіл між верхньою та нижньою частиною кадру.
  • Прокрутка: ці атрибути використовують для того, щоб контролювати, чи буде смуга прокрутки показувати кадр або ні. Включені значення "так" або "ні" або "автоматично".
  • Висота: використовується для визначення висоти рамки. Погода в% або в пікселях
  • Ширина: використовується для визначення ширини кадру. Погода в% або в пікселях
  • Longdesc: За допомогою цього атрибута ви можете зв’язати ще одну сторінку, яка містить довгий опис вмісту вашого кадру.

Приклади iframes у HTML

Ось кілька прикладів iframes у HTML, які пояснюються нижче:

Приклад №1

Розглянемо один приклад, в якому ми збираємось показати, як створити рамку із заданою висотою та шириною.

Код:

Демонстрація HTML Iframes


Тут ми показуємо приклад Iframe, який містить specifc Висота та ширина у форматі пікселів

Вихід:

Приклад №2

Розглянемо ще один приклад, в якому ми збираємось показати, як створити рамку із заданою висотою та шириною. Але в цьому прикладі ми визначаємо висоту та ширину за допомогою CSS. Тут ми бачимо, що смуга прокрутки регулюється відповідно до розміру вмісту.

Код:

Демонстрація HTML Iframes


Тут ми показуємо приклад Iframe, який містить specifc Висота та ширина у форматі пікселів

Вихід:

Приклад №3

Тут ми розглядаємо один приклад, до якого ми збираємося додати рамку до iframe, додавши деякі додаткові властивості CSS, щоб показати зміну розміру кордону, зміну кольору межі тощо. Отже, ми можемо додати стільки, скільки стиль до нашого iframe.

Код:

Демонстрація HTML Iframes


Тут ми показуємо приклад Iframe, який містить межу з деякими додатковими властивостями CSS

Вихід:

Приклад №4

Розглянемо ще один приклад, в якому ми збираємося показати, як атрибут target відкриває посилання веб-сторінки за допомогою iframe.

Код:

Демонстрація iframe - націлювання на посилання


EDUCBA

Коли мета посилання збігається з іменем iframe, посилання відкриється у кадрі iframe.

Вихід:

Цільовий вихід:

Як показано вище Приклад, ми можемо натиснути на цільове посилання EDUCBA, щоб воно відкрило наступну веб-сторінку, показану нижче.

Висновок

З усієї вищенаведеної інформації було зроблено висновок, що iframe - це вбудований кадр, який включає в себе ще один документ HTML. Він розглядається як найпотужніший HTML-елемент для цілей веб-дизайну. За допомогою нього ви також можете додати деякий вміст з іншого джерела. Він використовує різні види атрибутів HTML, такі як Global Attributes, Атрибути події, деякі пов’язані сторінки тощо.

Рекомендовані статті

Це посібник із iframes у HTML. Тут ми обговорюємо синтаксис, атрибут тегів iframes у HTML разом з різними прикладами та реалізацією коду. Ви також можете переглянути наступні статті, щоб дізнатися більше -

  1. Команди селену
  2. HTML Frames
  3. Текстове посилання HTML
  4. Створіть таблиці в HTML

Категорія:

Інструменти веб-розробки