iFrame, o cornici interne, sono un metodo che è possibile utilizzare per visualizzare il contenuto da un'altra pagina sul tuo sito web. Il vostro visitatore vedrà l'URL della pagina principale nel proprio browser, mentre un piccolo, cornice rettangolare carica una pagina aggiuntiva. I codici iFrame di base consentono di scegliere la pagina che visualizza e come apparirà.

Creazione di un iFrame

Qui crea un iFrame, è sufficiente inserire l'URL della pagina che si desidera visualizzare all'interno del tag HTML "iframe", come nel seguente esempio. L'URL può essere uno sul proprio sito web o anche un sito web completamente diverso.

<Iframe src = "iframe.html">
<P> Il tuo browser non supporta iframe. </ P>
</ Iframe>

Se si inserisce contenuti aggiuntivi prima del tag di chiusura "iframe", apparirà al posto del telaio interno se il browser del visitatore non supporta gli iframe.

Impostazione Larghezza

È possibile impostare l'altezza e la larghezza del telaio interno con attributi HTML di base. Se non si utilizza un'etichetta, verrà visualizzata l'altezza in pixel. È inoltre possibile impostare altezza o larghezza tramite percentuale. Un'altezza 100 per cento o larghezza, per esempio, si occupano tutto lo spazio disponibile nel contenitore.

<Iframe src = "iframe.html" width = "50" height =% "300">
<P> Il tuo browser non supporta iframe. </ P>
</ Iframe>

È inoltre possibile utilizzare i CSS per specificare l'altezza e la larghezza del iFrame. Questo metodo è più ampiamente accettata perché convalida come corretta HTML. È necessario utilizzare le unità con i CSS per il codice per convalidare correttamente, tuttavia.

<Iframe src = "iframe.html" style = "width: 50%; height: 300px">
<P> Il tuo browser non supporta iframe. </ P>
</ Iframe>

frontiere

Se si preferisce che il frame in linea appare senza soluzione di continuità sul vostro sito, si vuole eliminare il confine. Come altezza e larghezza, è possibile utilizzare semplice HTML per modificare o rimuovere l'aspetto del confine. Tuttavia, è anche possibile utilizzare i CSS. Impostare il valore "frameborder" a "1" per un bordo o "0" per nessun bordo in HTML.

<Iframe src = "iframe.html" frameborder = "0">
<P> Il tuo browser non supporta iframe. </ P>
</ Iframe>

In alternativa, impostare il confine a "0" con i CSS>

<Iframe src = "iframe.html" style = "border: 0">
<P> Il tuo browser non supporta iframe. </ P>
</ Iframe>

Codici Varie

Ci sono diversi valori che si possono applicare a iFrame con HTML. L'esempio seguente allinea il telaio a destra, non consente lo scorrimento e si applica un margine ancora di 5 pixel tra i bordi del telaio e dei suoi contenuti.

<Iframe src = "iframe.html" frameborder = "0" scrolling = "no" marginwidth = "5" marginwidth = "5" align = "right">
<P> Il tuo browser non supporta iframe. </ P>
</ Iframe>

Per convalidare questo codice, utilizzare la seguente sintassi CSS, invece.

<Iframe src = "iframe.html" style = "border: 0; overflow: hidden; padding: 5px; float: right:">
<P> Il tuo browser non supporta iframe. </ P>
</ Iframe>

Si noti che le proprietà dei margini per i telai interni in realtà corrispondono alla CSS proprietà "padding". Non vi è alcuna proprietà "align" in CSS. È necessario utilizzare la proprietà "float", invece. Per nascondere la barra di scorrimento in CSS, impostare la proprietà "troppo pieno" per nascosto.