Introduzione agli Iframe in HTML

Gli iframe in HTML non sono altro che frame incorporati che vengono utilizzati come documento HTML per aggiungere un altro documento HTML al suo interno. Viene utilizzato principalmente nelle pagine Web o nei processi di sviluppo Web per includere altri contenuti attraverso un'altra fonte come pubblicità su quella pagina Web.

La maggior parte dei web designer utilizza Iframe per presentare applicazioni interattive sul sito Web o nelle pagine Web. È reso possibile utilizzando javaScript o utilizzando l'attributo target in HTML.

Lo scopo principale di Iframe è visualizzare una pagina Web all'interno di un'altra pagina Web. La cornice in linea dovrebbe essere visualizzata usando un tag chiamato

  • È anche possibile dare un'altezza e una larghezza specifiche al nostro Iframe in formato pixel come segue:
  • Nella sintassi sopra, tutte le cose andranno allo stesso modo, inoltre, possiamo specificare l'altezza e la larghezza in formato pixel definendo come

Esempio:

  • Un altro metodo per definire l'altezza e la larghezza dell'iframe utilizzando i valori tramite CSS è mostrato nella sintassi seguente:
  • Tutte le cose sono le stesse di cui sopra facendo solo cambiamenti nello specificare i valori.

Esempio:

  • Un'altra funzione viene aggiunta a iframe è che possiamo rimuovere i bordi già definiti nel frame usando la proprietà border none. La sintassi per questo è la seguente:
  • Con l'aiuto del CSS, è anche possibile fare molte cose con il bordo come cambiare la dimensione del bordo, applicare un po 'di colore al bordo, ecc.

Iframe può essere utilizzato come Target per un collegamento utilizzando la sintassi:

  • Nella sintassi sopra, src è il nostro normale URL, qui l'attributo target del link farà riferimento all'attributo name nel nostro tag iframe.

Esempio:

Attributo tag Iframes

Esistono diversi tag di attributo utilizzati negli Iframe che sono i seguenti:

  • Src: questo attributo viene utilizzato per inserire il file che deve essere incluso nel frame. URL specifica la pagina Web di destinazione da caricare all'interno di un iframe.
  • Nome: Nome è un attributo utilizzato per assegnare un nome identificativo al frame. È molto utile dove stai creando un link per aprire un'altra pagina web.
  • allowfullscreen: questo attributo ti consente di visualizzare la cornice nel formato a larghezza intera. quindi dobbiamo impostare il valore vero per eseguire questa funzione
  • Frameborder: questo è un attributo utile che ti consente di mostrare il bordo o di non mostrare il bordo al telaio. Il valore 1 è mostrare il bordo e 0 per non mostrare il bordo al riquadro.
  • Larghezza di margine: consente di definire lo spazio tra il lato sinistro e destro del riquadro
  • Marginheight: consente di definire lo spazio tra la parte superiore e inferiore della cornice.
  • Scorrimento: questi attributi consentono di controllare se la barra di scorrimento verrà mostrata o meno al frame. i valori inclusi sono 'yes' o 'no' o 'auto'.
  • Altezza: utilizzato per definire l'altezza della cornice. Meteo in% o in pixel
  • Larghezza: usato per definire la larghezza della cornice. Meteo in% o in pixel
  • Longdesc: con l'aiuto di questo attributo sei in grado di collegare un'altra pagina con una lunga descrizione del contenuto della cornice.

Esempi di Iframe in HTML

Ecco alcuni esempi di Iframe in HTML che sono spiegati di seguito:

Esempio 1

Consideriamo un esempio in cui mostreremo come creare un iframe con altezza e larghezza specifiche.

Codice:

Demo HTML Iframes


Qui mostriamo un esempio di Iframe che contiene altezza e larghezza specifiche in formato pixel

Produzione:

Esempio n. 2

Consideriamo un altro esempio in cui mostreremo come creare un iframe con altezza e larghezza specifiche. Ma in questo esempio, stiamo specificando altezza e larghezza tramite CSS. Qui possiamo vedere che la barra di scorrimento viene regolata in base alle dimensioni del contenuto.

Codice:

Demo HTML Iframes


Qui mostriamo un esempio di Iframe che contiene altezza e larghezza specifiche in formato pixel

Produzione:

Esempio n. 3

Qui stiamo prendendo in considerazione un esempio in cui aggiungeremo un bordo a iframe aggiungendo alcune proprietà CSS aggiuntive per mostrare un cambiamento nella dimensione del bordo, un cambiamento nel colore del bordo, ecc. Quindi possiamo aggiungere fino a stile per il nostro iframe.

Codice:

Demo HTML Iframes


Qui stiamo mostrando un esempio di Iframe che contiene il bordo con alcune proprietà CSS aggiuntive

Produzione:

Esempio n. 4

Consideriamo un altro esempio in cui mostreremo come l'attributo target apre un collegamento di una pagina Web usando un iframe.

Codice:

Iframe Demo- Target per un collegamento


EDUCBA

Quando la destinazione di un collegamento corrisponde al nome di un iframe, il collegamento si aprirà nell'iframe.

Produzione:

Uscita target:

Come mostrato sopra Esempio siamo in grado di fare clic sul link di destinazione EDUCBA in modo da aprire la pagina Web successiva mostrata di seguito.

Conclusione

Da tutte le informazioni di cui sopra, ha concluso che iframe è un frame incorporato che include un altro documento HTML in sé. Considerato come il più potente elemento HTML ai fini della progettazione web. Con l'aiuto di esso, puoi aggiungere anche alcuni contenuti da un'altra fonte. Utilizza diversi tipi di attributi HTML come Global Attributes, Event Attributes, alcune pagine correlate, ecc.

Articoli consigliati

Questa è una guida agli Iframe in HTML. Qui discutiamo la sintassi, l'attributo tag di iframe in HTML insieme ai vari esempi e l'implementazione del codice. Puoi anche consultare i seguenti articoli per saperne di più -

  1. Comandi al selenio
  2. Frame HTML
  3. Link al testo HTML
  4. Crea tabelle in HTML

Categoria:

Strumenti di sviluppo Web