Introduktion til Iframes i HTML

Iframes i HTML er intet andet end inline frames, der bruges som et HTML-dokument til at tilføje et andet HTML-dokument til det. Det bruges hovedsageligt i websider eller webudviklingsprocesser til at inkludere noget andet indhold gennem en anden kilde som reklamer på denne webside.

De fleste webdesignere bruger Iframe til at præsentere interaktive applikationer på webstedet eller på websider. Det gøres muligt ved hjælp af javaScript eller ved hjælp af målattributten i HTML.

Hovedformålet med Iframe er at vise en webside på en anden webside. Den indvendige ramme skal vises ved hjælp af et kaldet mærke

  • Det er også muligt at give en vis specifik højde og bredde til vores Iframe i pixelformat som følger:
  • I ovenstående syntaks vil alle ting være det samme, derudover kan vi specificere højde og bredde i pixelsformat, der definerer som

Eksempel:

  • En yderligere metode til at definere højde og bredde til iframe ved hjælp af værdier gennem CSS vises i syntaksen nedenfor:
  • Alle ting er de samme som ovenfor bare ved at ændre sig i specificering af værdier.

Eksempel:

  • En yderligere funktion tilføjes iframe er, at vi kan fjerne allerede definerede rammer til rammen ved hjælp af grænse ingen egenskab. Syntaks for dette er som følger:
  • Ved hjælp af CSS er det også muligt at gøre mange ting med grænsen som at ændre størrelsen på grænsen, anvende noget farve på grænsen osv.

Iframe kan bruges som mål for et link ved hjælp af syntaks:

  • I ovenstående syntaks er src vores normale URL, her målattribut for linket, der henviser til navnattribut i vores iframe-tag.

Eksempel:

Iframes-tagattribut

Der er forskellige attribut tags, der bruges i Iframes, som er som følger:

  • Src: Denne attribut bruges til at indsætte fil, der skal inkluderes i rammen. URL specificerer målwebsiden, der skal indlæses i en iframe.
  • Navn: Navn er en attribut, der bruges til at give et identifikationsnavn til rammen. Det er mest nyttigt, hvor du opretter et link for at åbne en anden webside.
  • allowfullscreen: Denne attribut giver dig mulighed for at vise din ramme i formatet i fuld bredde. så vi er nødt til at indstille værdien for, at denne funktion kan ske
  • Frameborder: Dette er en nyttig attribut, der giver dig mulighed for at vise kant eller ikke at vise kant til rammen. Værdi 1 er at vise kant og 0 for ikke at vise ramme til rammen.
  • Marginbredde: Gør det muligt at definere mellemrum mellem venstre og højre side af rammen
  • Marginheight: Gør det muligt at definere mellemrum mellem toppen og bunden af ​​rammen.
  • Rulning: Disse attributter bruges til at kontrollere, om rullebjælken skal vises eller ikke til rammen. inkluderede værdier er 'ja' eller 'nej' eller 'auto'.
  • Højde: Det bruges til at definere højden til rammen. Vejret i% eller i pixels
  • Bredde: Det bruges til at definere bredde til rammen. Vejret i% eller i pixels
  • Longdesc: Ved hjælp af denne attribut er du i stand til at linke en anden en side, der har en lang beskrivelse af indholdet i din ramme.

Eksempler på Iframes i HTML

Her er nogle eksempler på Iframes i HTML, der er forklaret nedenfor:

Eksempel 1

Lad os overveje et eksempel, hvor vi skal vise, hvordan man opretter en iframe med en bestemt højde og bredde.

Kode:

HTML Iframes-demo


Her viser vi et eksempel på Iframe, der indeholder specifc Højde og bredde i pixelformat

Produktion:

Eksempel 2

Lad os overveje et andet eksempel, hvor vi skal vise, hvordan man opretter en iframe med en bestemt højde og bredde. Men i dette eksempel specificerer vi højde og bredde gennem CSS. Her kan vi se rullebjælken justeres pr. Indholdsstørrelse.

Kode:

HTML Iframes-demo


Her viser vi et eksempel på Iframe, der indeholder specifc Højde og bredde i pixelformat

Produktion:

Eksempel 3

Her overvejer vi et eksempel, hvor vi vil tilføje en grænse til iframe ved at tilføje nogle ekstra CSS-egenskaber til at vise en ændring i størrelsen på grænsen, ændring i farve på grænsen osv. Så vi kan tilføje så meget som stil til vores iframe.

Kode:

HTML Iframes-demo


Her viser vi eksempel på Iframe, der indeholder grænse til nogle yderligere CSS-egenskaber

Produktion:

Eksempel 4

Lad os overveje et andet eksempel, som vi skal vise, hvordan målattributten til at åbne et link på en webside ved hjælp af en iframe.

Kode:

Iframe-demo - Mål efter et link


EDUCBA

Når målet for et link matcher navnet på en iframe, åbnes linket i iframe.

Produktion:

Måloutput:

Som vist ovenfor, eksempel, er vi i stand til at klikke på mållinket EDUCBA, så det åbner den næste webside, der er vist nedenfor.

Konklusion

Fra alle ovennævnte oplysninger konkluderede den, at iframe er en inline ramme, der indeholder et andet HTML-dokument i sig selv. Det betragtes som det mest kraftfulde HTML-element til webdesigningsformål. Ved hjælp af det er du også i stand til at tilføje noget indhold fra en anden kilde. Den bruger forskellige typer HTML-attributter som Globale attributter, Begivenhedsattributter, nogle relaterede sider osv.

Anbefalede artikler

Dette er en guide til Iframes i HTML. Her diskuterer vi syntaks, tagattribut for iframes i HTML sammen med de forskellige eksempler og kodeimplementering. Du kan også se på de følgende artikler for at lære mere -

  1. Selen-kommandoer
  2. HTML-rammer
  3. HTML-tekstlink
  4. Opret tabeller i HTML

Kategori:

Webudviklingsværktøjer