Come utilizzare il tag iframe

Il tag iframe viene utilizzato per inserire all’interno di una pagina web, altri pezzetti di pagine del tutto indipendenti.

I codici da utilizzare sono due:

Questo è il link che ci farà aprire il nostro iframe.

<a href="http://nomesito.it/pagina1.htm"target="nome_frame">PAGINA1</a>

Mentre questo è il nostro iframe che ci farà vedere le pagine esterne:

<iframe src="http://nomesito.it/pagina1.htm" width="400" height="300" name="nome_frame"></iframe>

Mentre se vogliamo creare un menù con 4 link e di conseguenza vogliamo che nella stessa pagina si aprino 4 iframe, dobbiamo scegliere la seguente soluzione. Per vedere un esempio clicca qui. In questo esempio vediamo il menù laterale a destra ed un riquadro colorato (lì dentro sono inseriti i nostri iframe). Cliccando sulle varie pagine del menù, si aprono le varie finestrelle.

Vediamo come è strutturata questa pagina… codice-iframe

Nel menù della mia pagina di prova abbiamo il seguente codice:

    <div style='position:absolute;left:30px;top:15px;width:160px;height:256px;' align='left' valign='top'><font color="red">.::Menù::.</font>
    <br>
    -<a href="http://ladispensa.altervista.org/demo/home-iframe.htm" target="nome_frame">PAGINA INIZIALE</a><br><br>
    -<a href="http://ladispensa.altervista.org/demo/iframe-1.htm" target="nome_frame">PRIMA pagina</a><br><br>
    -<a href="http://ladispensa.altervista.org/demo/iframe-2.htm" target="nome_frame">SECONDA pagina</a><br><br>
    -<a href="http://ladispensa.altervista.org/demo/iframe-3.htm" target="nome_frame">TERZA pagina</a><br>
    <br><br>
    <center><font color="blue" face="Comic Sans MS">Questa è una pagina di prova su come utilizzare il tag iframe. Per vedere l'articolo di guida con tutte le spiegazioni <a href="http://ladispensa.altervista.org/articolo-guida/come-utilizzare-il-tag-iframe" title="come utilizzare il tag iframe">Clicca qui</a></font>
    <br><br><br><br>
    <a href="/" title="Vai all'home page di LaDispensa!" target="_blank">ladispensa.altervista.org</a>
    </center>
    </div>

Nel tag div :

<div style='position:absolute;left:30px;top:15px;width:160px;height:256px;' align='left' valign='top'>

Abbiamo lo style con left il quale ci indica a quanti pixel dal bordo lateriore sinistro, deve essere posizionato il contenuto del <div> (in questo caso il contenuto del nostro menù).
Top ci indica a quanti pixel dal bordo superiore deve distare il nostro menù.
Width è la larghezza del menù, espressa in pixel, ma può essere espressa anche in percentuale (es. width=”50%”).
Heigth è l’altezza del menù (idem al width per quanto riguardo l’unità di misura).
Align significa allineamento, quindi il contenuto se deve essere allineato a destra (align=”right”, può essere scritto anche con le medesime virgolette align=’right’), a sinistra (align=”left”) o nel centro (align=”center”).

Quindi nel menù dovrete essenzialmente mettere:

    <a href="http://nomesito.it/home.htm" target="pinguino">Home page</a>
    <a href="http://nomesito.it/prova1.htm" target="pinguino">prova1</a>
    <a href="http://nomesito.it/prova2.htm" target="pinguino">prova2</a>
    <a href="http://nomesito.it/prova3.htm" target="pinguino">prova3</a>

Nel target possiamo inserire qualunque nome, l’importante che sia identico a tutti gli altri nomi dei target.

Passiamo all’altra parte della pagina. Sempre guardando la nostra pagina di prova vediamo che c’è un riquadro arancione. Quella è la nostra pagina iniziale, ovvero la pagina che vedremo apprarire. Cliccando su prima pagina vediamo un riquadro giallo, su seconda pagina un riquadro rosso e nella terza pagina un riquadro verde. I riquardi non sono altro che i nostri iframe dove all’interno saranno visualizzate le nostre pagine home.htm, prova1.htm, prova2.htm, prova3.htm. Adesso vediamo come crearli.

Innanzitutto creaiamo la nostra pagina iniziale home.htm magari utilizzando un editor.
Scriviamo dentro tutto quello che vogliamo (es. della pagina naturale home.htm senza iframe).
Creiamo allo stesso modo le pagine prova1.htm, prova2.htm, prova3.htm

Quindi ritorniamo alla prima pagina, ovvero dove è stato inserito il menù, vediamo il resto del codice della mia pagina di prova:

<div style='position:absolute;left:250px;top:45px;width:471px;height:281px;' align='left' valign='top'>
<iframe src="http://ladispensa.altervista.org/demo/home-iframe.htm" width="400" height="300" name="nome_frame">
</iframe></div>

Il significato del tag div è stato spiegato già in precedenza, invece adesso concentriamoci sul tag iframe .
Quindi nella vostra pagina, dopo il codice del menù, dovrete mettere:

<iframe src="http://nomesito.it/home.htm" width="400" height="300" name="pinguino">
</iframe>

RIEPILOGHIAMO!!!

Create le pagine home.htm, prova1.htm, prova2.htm, prova3.htm, …
Create la pagina che raccoglierà sia il menù che le finestrelle con iframe (es. ciao.htm), le quali conterranno le vostre pagine grazie al tag iframe.
Inserite all’interno del file ciao.htm i seguenti due codici (il primo per il menù, il secondo per le finestrelle iframe) che ovviamente andrete a personalizzare voi:

    <a href="http://nomesito.it/home.htm" target="pinguino">Home page</a>
    <a href="http://nomesito.it/prova1.htm" target="pinguino">prova1</a>
    <a href="http://nomesito.it/prova2.htm" target="pinguino">prova2</a>
    <a href="http://nomesito.it/prova3.htm" target="pinguino">prova3</a>

  <iframe src="http://nomesito.it/home.htm" width="400" height="300" name="pinguino">
</iframe>

Alla fine andate su www.nomesito.it/ciao.htm e vedrete lo stesso risultato della mia pagina di prova.
N.B. www.nomesito.it è lindirizzo che andrete a sostituire con il vostro.

Per concludere, possiamo personalizzare il nostro tag iframe inserendo anche:
lo scrolling (yes o no), il frameborder (se non lo vogliamo mettiamo il numero 0):

<iframe src="http://nomesito.it/home.htm" width="400" height="300" scrolling="no" frameborder="1" name="pinguino">
</iframe>