1 HTML - I Frame Laboratorio di Applicazioni Informatiche II mod. A

2 I frame (o riquadri) sono strumenti entrati da tempo nella consuetudine del Web, e gestiti perfettamente da tutti i browser. Essi consentono di visualizzare più di un documento HTML nella stessa finestra del browser. Ogni documento visualizzato è chiamato frame, e ciascuno di essi è indipendente dagli altri. I frame sono utili in quanto evitano di caricare le stesse immagini, e mantengono ordinata la struttura e i contenuti di un sito. Per contro lo sviluppatore deve tenere traccia di più documenti HTML, ed può risultare difficile stampare lintera pagina. Ecco un esempio familiare: Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri)

3

4 Naturalmente abusare dei frame può portare a risultati di pessima resa grafica, giungendo a un risultato opposto a quello preventivato. Un punto certamente a sfavore dei frame è la loro incompatibilità con i programmi di navigazione per i non vedenti, che davanti a tali strumenti si bloccano, non permettendo la lettura delle pagine. Una buona soluzione è quella di creare una versione con frame e una senza frame. Vediamo i comandi HTML per la gestione dei frame. Laboratorio di Applicazioni Informatiche II mod. A HTML- I frame (riquadri)

5 I valori delle colonne (o delle righe) indicano la quantità di area di schermo che sarà occupata da ciascuna colonna o riga. Lesempio precedente imposta un frame con due colonne, la prima al 25% della larghezza della finestra del browser, la seconda al 75%. Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) I tag che implementano i frame sono: Il tag definisce come dividere la finestra in più frame, impostando un gruppo di righe o di colonne. Esso sostituisce il tag, e viene chiuso dal tag. Ad esempio, la suddivisione della pagina Web precedente si può ottenere con un tag del tipo:

6 Vi sono altri modi per indicare la larghezza delle colonne o laltezza delle righe. In particolare: un numero rappresenta la larghezza della colonna o laltezza della riga in pixel; un asterisco (*) indica che la colonna o la riga si estendono in tutto lo spazio rimanente. Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) Questaltro esempio imposta un frame con tre righe, la prima al 25%, la seconda al 50%, la terza al 25% dellaltezza della finestra

7 Altri attributi di sono: frameborder - framespacing (o border ) - bordercolor Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) frameborder determina se vi saranno bordi tridimensionali tra i frame (se ha valore yes oppure 1), o se non vi saranno (se ha valore no o 0). Il valore di default è yes. framespacing (o border ) determina quanto spazio viene lasciato tra i frame, ossia lo spessore dei bordi. Per impostare frame senza bordi, si scriverà quindi: oppure bordercolor : accetta come valore il colore del bordo. Esempio:

8 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) Il tag definisce, attraverso largomento src, quale documento.html sarà inserito in ciascun frameset. Il seguente esempio inserisce il documento frame_a.html nella prima colonna, e il documento frame_b.html nella seconda di un frameset definito in precedenza: Dopo avere diviso la pagina in due o più frame, è necessario riempire ciascuno di essi con un file avente per estensione.html. Ciascuno di tali file viene richiamato, allinterno del file principale, da un tag (privo del tag di chiusura).

9 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) Un file con frame ridotto al minimo potrebbe essere il seguente: Come si vede, il codice del frame è racchiuso tra i tag e, che si comportano come gli usuali tag e. Questo file richiede, naturalmente, che insieme a esso siano presenti nella stesa cartella i file frame_a.html e frame_b.html.

10 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) scrolling: accetta uno dei valori yes (inserisce comunque una barra di scorrimento); no (non fa inserire una barra di scorrimento); auto (fa inserire una barra di scorrimento se necessaria). noresize (senza alcun valore) impedisce che un client possa ridimensionare un frame. Lelemento accetta i seguenti attributi (opzionali):

11 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) In tal modo il frame può essere indicato come il punto di arrivo di un link presente in un altro documento, e avente la forma: name : serve per assegnare un nome al frame. Esempio: marginheight: è simile a marginwidth, ma controlla i margini superiore e inferiore. marginwidth: accetta un valore assoluto in pixel e forza il corrispondente rientro dei margini sinistro e destro. Esempio:

12 Questo documento richiede un browser in grado di rappresentare i frame. Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) Per creare un contenuto alternativo per i browser che non siano in grado di visualizzare i frame, si usa lelemento. Infatti questi browser ignorano gli elementi e, ma visualizzano qualsiasi elemento sia racchiuso tra gli elementi e. Un utilizzo di è indicato nellesempio seguente:

13 Vediamo come si deve impostare il codice HTML del documento a seconda del numero e della posizione dei frame che si intendono creare. Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) Supponiamo di volere creare una finestra divisa in due frame orizzontali (righe) come da figura.

14 Nel frame in alto caricheremo il file top.htm e in quello centrale il file central.htm (da creare a parte). Come abbiamo detto, questi due file saranno richiamati dal file principale, che ripartisce la pagina in due parti e colloca in ciascuna di esse il file corretto. Ecco il codice di questo file principale: Laboratorio di Applicazioni Informatiche II mod. A HTML- I frame La grandezza dei frame, ossia lo spazio che ognuno di essi deve occupare) è stabilita dal primo tag, che indica che il frame alto (che è una riga, rows ) deve essere di 80 pixel, mentre lasterisco (*) indica che tutto il resto deve essere assegnato al frame centrale.

15 La prima riga del file precedente si poteva, ovviamente, scrivere anche: Impostati i due parametri e, al loro interno si definiscono i nomi e i file da richiamare nei due frame creati. È necessario dare un nome al frame ( name="alto" ) e indicare il file HTML che dovrà essere caricato dentro al frame ( src="top.htm" ). Si devono quindi creare a parte due file di nome "top.htm" e "central.htm". Notiamo come sia importante la posizione all'interno del codice per la corretta interpretazione da parte del browser. Se infatti si invertono gli ordini in questo modo: Laboratorio di Applicazioni Informatiche II mod. A HTML- I frame

16 Laboratorio di Applicazioni Informatiche II mod. A HTML- I frame il browser invertirà l'ordine di assegnazione e caricherà il file "central.htm" nel frame superiore e il file "top.htm" nel frame centrale.

17 Frame del Surf Un esempio funzionante è costituito dal seguente listato, che utilizza i due file Home3.html e MenuTabella.html : EsempioFrame.html EsempioFrame.html Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri)

18 Per creare due frame verticali di questo tipo è sufficiente sostituire allattributo rows lattributo cols : Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri)

19 È possibile adottare contemporaneamente una divisione sia in righe ( rows ) sia in colonne ( cols ), in modo da creare una finestra divisa in più frame. Vediamo come si deve operare sul codice HTML del documento a seconda del numero e della posizione dei frame che si intendono creare. Per avere laspetto seguente: alto sinistro centrale Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri)

20 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) si può scrivere:

21 Si opera nello stesso modo se la colonna di sinistra deve occupare tutta laltezza dello schermo: sinistro alto centrale scrivendo, per esempio: Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri)

22 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri)

23 Analogamente, per avere laspetto seguente Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) si può scrivere :

24 Per suddividere il frame centrale in più righe Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) si scriverà un codice del tipo:

25 Una tecnica analoga si usa per ottenere una colonna destra che occupi tutta laltezza dello schermo, facendo sempre attenzione a dove aprire e dove chiudere i frame. Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) Ecco il codice relativo:

26 Osserviamo, infine, la seguente possibilità: Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri) Essa si può ottenere con:

27 Quindi, ricapitolando… Laboratorio di Applicazioni Informatiche II mod. A HTML – I Frame (riquadri)

28 Laboratorio di Applicazioni Informatiche II mod. A HTML- I frame

29 Laboratorio di Applicazioni Informatiche II mod. A HTML- I frame

30 Laboratorio di Applicazioni Informatiche II mod. A HTML- I frame

31 Laboratorio di Applicazioni Informatiche II mod. A HTML- I frame