HTML: frame

I frame

I FRAME sono dei riquadri all' interno di una pagina HTML dove  è possibile caricare dei contenuti diversi, consentendo al browser web di non dover ricaricare l' intera pagina ma solo una parte.

Questo rende i FRAME un valido strumento per velocizzare la navigazione. Vennero introdotti da NETSCAPE NAVIGATOR 2 e poì divennero una specifica W3C. Recentemente grazie all' utilizzo di linguaggi server side come il PHP (Hypertext Preprocessor, preprocessore di ipertesti) utilizzato per realizzare siti dinamici, i frame sono entrati  in disuso, in quanto al posto dei riquadri per caricare le pagine HTML,  vengono utilizzati strumenti come gli include PHP (inclusori).

Per utilizzare un FRAME bisogna creare un FRAMESET, cioè una pagina madre che conterrà i riquadri:

<!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>webgab.eu</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>

Guarda il risultato che scaturisce  dal codice esempio precedente.

L'esempio ci mostra subito alcune differenze rispetto ad una pagina HTML standard:

  • il DOCTYPE cambia dicitura per indicare al browser web che si tratta di una pagina formata da FRAME,  quindi bisognerà far riferimento alle specifiche di questo tipi di costrutti HTML;
  • al posto del TAG BODY viene utilizzato il TAG FRAMESET (set di riquadri), che indica la struttura dove verranno realizzati i FRAME e dove saranno caricate le pagine (prima.html, seconda.html, terza.html, quarta.html)

Gli attributi di FRAMESET

  • L'attributo COLS serve per indicare il numero e la larghezza delle colonne, se non viene inserito nel codice significa che il FAMESET sarà costituito solo da colonne

    <frameset cols=”33%, 33%,*”>

    Guarda l'esempio
     
  • l'attributo ROWS specifica il numero e le grandezze delle righe, se viene omesso allora il FRAMESET sarà costituito solo da righe

    <frameset rows=”33%, 33%,*”>

    Guarda l'esempio
     
  • FRAMEBORDER: permette la visualizzazione o meno di un bordo nei frame impostando il valore su YES o NO

    <frameset frameborder=”no” cols=”25%,75%”>

    Guarda l'esempio
     
  • BORDER: questo attributo permette di far visualizzare i bordi di un FRAME, può essere impostato con 0,1, 2 in pixel (= annulla i bordi)

    <frameset border=”10”> 
     
  • BORDERCOLOR: permette ad un bordo visualizzaoto, quindi con un valore maffiore di zero o impostato a YES, di avere un colore

    <frameset border=”10″ bordercolor=”#FF0000”>
     
  • FRAMESPACING / BORDER: permette di settare lo spazio tra i FRAME, ha quindi lo stessa funzione di BORDER. Dato che non è visualizzabile su tutti i browser, viene utilizzato insieme a BORDER

    <frameset border=”10″ framespacing=”10″ bordercolor=”#FF0000” cols=”25%,75%”>

Se vogliamo specificare la grandezza della riga o della colonna possiamo utilizzare l'asterisco * al posto del valore, facendo in modo che la grandezza si autoridimensioni. Se invece vogliamo dare una dimensione alla grandezza possiamo assegnarle un valore secondo i seguenti parametri:

Guarda l'esempio

  • valore in pixel: indicherà la grandezza della riga o della colonna, con una dimensione esatta;

    <frameset rows=”33%, 33%,*”>
     
  • valore in percentuale: indichera la grandezza di una riga o di una colonna, con un valore percentuale che si adatterà alla grandezza dello schermo

    <frameset rows=”20%,80%” cols=”25%,25%,50%”>
     
  • valore proporzionale: la grandezza delle colonne e delle righe si ripartisce in modo proporzionale alla grandezza dello schermo

    <frameset rows=”1*,3*” cols=”3*,2*,1*”>;

Una volta che la griglia di FRAMSET è stata creata, bisognerà generare le varie pagine HTML, che si andranno ad aprire in ogni riquadro: prima.html, seconda.hmtl, ecc..

Attributi del TAG FRAME

  • ID e NAME: servono per indicare un frame in maniera più precisa, è possibile utilizzare anche soltanto ID.

    <frame id=”primoRiquadro” name=”primoRiquadro” src=”prima.html”>
     
  • SCROLLING: permette o meno la visualizzazione della scrollbar (barra di scorrimento). Lo scroller può essere impostato AUTO e comparirà solo se necessario

    <frame src=”prima.html” scrolling=”no”>

    <frame src=”prima.html” scrolling=”auto”>

    Guarda l'esempio
     
  • NORESIZE: nega al singolo frame di essere ridemensionato

    <frame src=”prima.html” scrolling=”no”>

    <frame src=”prima.html” scrolling=”no” noresize>

    Guarda l'esempio
     
  • MARGINHEIGHT e MARGINWIDTH: consentono di definire il margine di spazio tra il FRAME ed il suo contenuto

    <frame marginwidth=”50″ marginheight=”50″ src=”prima.html”>

    Guarda l'esempio

I LINK nei FRAME

L'attributo TARGET di un link in un FRAME ci consente di far visualizzare la pagina facendola aprire su uno dei riquadri oppure a tutta pagina. TARGET assume  diversi valori a seconda della posizione dove si vuole far apparire la pagina:

  • _BLANK: apre il link in una nuova finestra

    <a href="seconda.html" target="_blank">link esterno con target="_blank"</a>
     
  • _SELF: apre il link nella stessa pagina, è il valore di default

    <a href="seconda.html" target="_self">link nel frame stesso con target="_self"</a>
     
  • _PARENT: la pagina web  viene caricata nel FRAMESET precedente a quello corrente (il frame madre)

    <a href="terza.html" target="_top">link che sostituisce  il frameset di livello più alto in assoluto </a>
     
  • _TOP: la pagina web viene caricata nella finestra originale, eliminando tutta la struttura a frame. Se si guarda il codice HTML si noterà che la pagina caricata andrà a caricarsi sul FRAME superiore

    <a href="seconda.html" target="_top">link che sostituisce tutto il frameset con target="_top"</a>

    Guarda l'esempio

Se abbiamo molti link che rindirizzano la pagina web tutti sullo stesso FRAME, possiamo utilizzare il TAG BASE per scrivere una sola volta il TARGET:

<base href=”http://www.html.it” target=”_blank”>

Il TAG NOFRAMES

Questo TAG, che abbiamo già inserito negli esempi precedenti di codice,  è utilizzato principalmente per due motivi:

  • permette ai browser web obsoleti, che non leggono il codice dei frame, di sostituirlo con codice HTML mostrando quindi un contenuto alternativo ai FRAME;
  • inserendo la descrizione del sito in NOFRAMES nelle pagine che contengono FRAME, avremo un miglior posizionamento della pagina stessa sui motori di ricerca.