I frame (“riquadri”) comparvero per la prima volta con Netscape Navigator 2: si tratta della possibilità di suddividere una medesima finestra del browser in vari riquadri indipendenti.
Questa soluzione all’epoca si rivelò un successo, dal momento che permetteva notevoli vantaggi:
Tutte queste caratteristiche hanno causato un vero e proprio boom dei frames, tanto che subito dopo l’invenzione della Netscape, anche Microsoft si trovò a “copiare” la possibilità di strutturare le pagine in questo modo; in seguito (con l’HTML 4) i frames divennero una specifica ufficiale del W3C.
Per utilizzare i frame, è necessario creare una pagina che contenga la dichiarazione della struttura che vogliamo utilizzare. Vediamo subito il codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML.it</title>
</head>
<frameset rows="50%,50%" cols="50%, 50%">
<frame src="prima.html">
<frame src="seconda.html">
<frame src="terza.html">
<frame src="quarta.html">
<noframes>
<p>Qui può essere indicato il link a
<a href="senzaFrame.html"> una versione del sito</a>
che non utilizzi un layout a frame
</p>
</noframes>
</frameset>
</html>
L’esempio completo si trova qui.
Come vi sarete accorti, rispetto alle pagine che abbiamo studiato finora cambiano alcune cose. In primo luogo cambia il doctype, cioè il tipo di documento di riferimento.
All’inizio del documento al posto di questa riga:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
compare ora infatti questa dicitura:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">
stiamo indicando semplicemente al browser che facciamo riferimento alle specifiche che servono per regolare il comportamento dei frame.
Avrete notato inoltre che scompare il tag <body> e al suo posto troviamo il tag <frameset> (“set di riquadri”), che ci permette di indicare come devono essere indicati i frames all’interno della pagina
Il tag <frameset> ha sostanzialmente due importanti attributi: rows e cols:
<frameset cols="33%, 33%,*">
<frameset rows="33%, 33%,*">
Nell’indicare la grandezza di ciascuna riga (o colonna) possiamo poi lasciare che una o più righe si auto-dimensionino, occupando tutto lo spazio che rimane, in questo caso utilizzeremo l’asterisco (“wild card”); normalmente invece potremo esprimere la grandezza dei riquadri secondo uno dei seguenti sistemi di misura (da scegliere a nostra discrezione):
|
Una volta creata la nostra griglia con il tag <frameset>, incrociando le righe e le colonne, dobbiamo specificare dove si trova il file di origine di ciascun frame. Possiamo farlo con la sintassi:
<frame src="prima.html">
come si può vedere l’origine di ciascun frame è un documento HTML standard (come quelli che abbiamo analizzato finora): avrà dunque la sua dichiarazione di documento, la sua <head> e il suo <body>.
Se le dimensioni del riquadro non sono sufficienti a mostrare il documento nella sua interezza, il frame avrà delle barre di scorrimento, a meno che non sia stato esplicitamente specificato il contrario negli attributi (che vedremo tra breve).
Per visualizzare il codice HTML di ciascun frame è sufficiente andare nel riquadro desiderato e poi digitare il tasto destro del mouse. Quindi:
È possibile anche individuare un frame in modo più preciso, assegnandogli un nome:
<frame id=”primoRiquadro” name=”primoRiquadro” src="prima.html">
la sintassi corretta per dare un nome a un frame dovrebbe essere:
id=”primoRiquadro”
tuttavia per questioni di retro-compatibilità (con Netscape 4) è oramai entrato nell’uso utilizzare anche name=”primoRiquadro”.
È possibile annidare diversi frames l’uno dentro l’altro. In questo caso, al posto di uno dei tag <frame> è sufficiente includere le indicazioni del nuovo frameset.
|