Въведение в iframes в HTML

Iframes в HTML не е нищо друго освен вградени рамки, които се използват като HTML документ за добавяне на друг HTML документ в него. Използва се най-вече в уеб страници или процеси за уеб разработка, за да включва някакво друго съдържание чрез друг източник като реклами на тази уеб страница.

Повечето от уеб дизайнерите използват Iframe, за да представят интерактивни приложения на уебсайта или в уеб страниците. Това става възможно чрез използване на javaScript или чрез използване на целевия атрибут в HTML.

Основната цел на Iframe е да показва уеб страница в друга уеб страница. Вградената рамка трябва да бъде показана чрез използване на етикет, наречен

  • Възможно е също така да се даде определена височина и ширина на нашия Iframe във формат пиксели, както следва:
  • В горния синтаксис всички неща ще бъдат същите, освен това можем да определим височина и ширина във формат пиксели, определящи като

Пример:

  • Още един метод за определяне на височината и ширината на iframe чрез използване на стойности чрез CSS е показан в синтаксиса по-долу:
  • Всички неща са същите като по-горе, просто правите промяна в посочването на стойности.

Пример:

  • Още една функция се добавя към iframe е, че можем да премахнем вече дефинираните граници към рамката, като използваме свойство border none. Синтаксисът за това е следният:
  • С помощта на CSS също е възможно да правите много неща с границата като промяна на размера на рамката, прилагане на някакъв цвят към границата и т.н.

Iframe може да се използва като Target за връзка чрез използване на синтаксиса:

  • В горния синтаксис src е нашият нормален URL адрес, тук целевият атрибут на връзката ще препраща атрибут име в нашия маркер iframe.

Пример:

Атрибут на маркери на iframes

В iframes се използват различни тагове за атрибут, които са както следва:

  • Src: Този атрибут се използва за вмъкване на файл, който трябва да бъде включен в рамката. URL адресът определя целевата уеб страница, която ще бъде заредена в рамките на рамка.
  • Име: Името е атрибут, който се използва за даване на някакво идентифициращо име на рамката. Най-полезно е, когато създавате една връзка, за да отворите друга уеб страница.
  • разрешен екран: Този атрибут ви позволява да показвате рамката си във формат с пълна ширина. така че трябва да зададем стойност true, за да се случи тази функция
  • Frameborder: Това е полезен атрибут, който ви позволява да показвате рамка или да не показвате рамка към рамката. Стойност 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 Demo - Насочване към връзка


EDUCBA

Когато целта на дадена връзка съвпада с името на кадър, тя ще се отвори в рамката на рамката.

изход:

Целеви изход:

Както е показано по-горе Пример, ние можем да кликнете върху целевата връзка EDUCBA, така че тя ще отвори следващата уеб страница, показана по-долу.

заключение

От цялата горепосочена информация се стигна до заключението, че iframe е вградена рамка, която включва друг HTML документ в себе си. Той се счита за най-мощен HTML елемент за целите на уеб дизайна. С помощта на него можете да добавите и малко съдържание от друг източник. Той използва различни видове HTML атрибути като Global Attributes, Event Attributes, някои свързани страници и т.н.

Препоръчителни статии

Това е ръководство за iframes в HTML. Тук обсъждаме синтаксиса, атрибута на етикет на iframes в HTML заедно с различните примери и реализация на код. Можете също да разгледате следните статии, за да научите повече -

  1. Селенови команди
  2. HTML рамки
  3. HTML текстова връзка
  4. Създайте таблици в HTML

Категория:

Инструменти за уеб разработка