artemate

CORSO HTML - parte seconda

11. LE TABELLE

12. I FRAMES

13. I MODULI

11. LE TABELLE

La larghezza e l'altezza complessiva di una tabella viene indicata all'interno dell'attributo <TABLE>, il quale appunto e' quello che deve aprire e chiudere una tabella. Le dimensioni vengono definite con WIDTH (larghezza) e HEIGHT (altezza) e possono essere espresse in pixel o in percentuale della pagina:

In questo esempio di codice la larghezza della tabella viene espressa in pixel, in questo caso 500. Se si sceglie questa opzione, a qualsiasi risoluzione venga vista la pagina, la misura della tabella rimmarra' invariata, cioe' di 500 pixel.
Cosa diversa accade nel momento in cui si sceglie una grandezza in percentuali della pagina

<TABLE WIDTH=50%>

In questo caso la larghezza della tabella sara' diversa a seconda della risoluzione video di colui, o colei, che ne esamini il contenuto.
Per esempio chi ha una risoluzione video di 640x480 vedra' un tabella di circa 320 pixels (perche' abbiamo impostato la tabella di una grandezza pari al 50% della pagina), mentr

esempio:tabella con due righe e tre colonne

<TR><TH >TITOLOUNO</TH><TH >TITOLODUE</TH></TR>

</TABLE>

esempio:tabella con due righe e tre colonne

<TR><TH WIDTH=150>TITOLOUNO</TH><TH WIDTH=150 >TITOLODUE</TH></TR>

</TABLE>

L'attributo <TABLE> genera la tabella mentre con <TD> si definiscono i campi presenti all'interno di tale tabella.
Ecco come il disegno puo' essere trasformato in codice e quindi in una vera e propria tabella

<TR>DEFINISCE LA RIGA

Lo spazio tra i vari campi di una tabella e' definito all'interno del comando </TABLE> con CELLSPACING=X e CELLPADDING=X (dove X e' la distanza in pixel):

La posizione del testo o delle immagini all'interno dei vari campi <TD> della tabella puo' essere modicata in diversi modi:

<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 VALIGN=TOP> prova </TD>

<TD WIDTH=100 VALIGN=BOTTOM> Prova </TD>

<TD WIDTH=100 VALIGN=MIDDLE> Prova </TD>

</TABLE>

<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 ALIGN=RIGHT> prova </TD>

<TD WIDTH=100 ALIGN=CENTER> Prova </TD>

<TD WIDTH=100 ALIGN=LEFT> Prova </TD>

</TABLE>

Ogni campo puo' avere un colore di background diverso dagli altri ed addirittura uno sfondo come delle normali pagine web (gli sfondi possono essere sostituiti da GIF animate):

<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 BGCOLOR="red"> prova </TD>

<TD WIDTH=100 BGCOLOR="yellow"> Prova </TD>

<TD WIDTH=100 BGCOLOR="gray"> Prova </TD>

</TABLE>

<TABLE WIDTH=300 HEIGHT=230>

<TD width=100 BACKGROUND="sfondo15.jpg">
prova </TD>

<TD WIDTH=100 BACKGROUND="sfondo26.jpg">
Prova </TD>

<TD WIDTH=100 BACKGROUND="sfondo61.jpg">
Prova </TD>

</TABLE>

12. I FRAMES

I frames sono strumenti entrati ormai nella consuetudine del web, e perfettamente gestiti da tutti i browser. I detrattori dei frames affermano l'inutilita' di suddividere ulteriormente le pagine web; pagine che in ultima analisi possono risultare poco leggibili. Altri, come me, pensano che i frames possano rendersi utilissimi evitando di caricare le stesse immagini e mantenendo ordinata la struttura e i contenuti del sito. Naturalmente abusare dei frames puo' portare a traguardi di pessima impostazione grafica, giungendo ad un risultato opposto rispetto a quello preventivato.
Un punto certamente a sfavore dei frames e' la loro incompatibilita' con i programmi di navigazione dei non vedenti che davanti a tali strumenti si bloccano, non permettendo la lettura delle pagine.
Una buona soluzione e' quella di creare una versione frame ed una versione senza frame (come questa stessa guida ha fatto).

Come si creano i frames?
Prima di tutto diamo uno sguardo ai comandi HTML per la gestione dei frame.

Documento Frame <FRAMESET></FRAMESET> (al posto di <BODY>)
altezza in righe <FRAMESET ROWS=,,,></FRAMESET> (pixel o %)
altezza in righe <FRAMESET ROWS=*></FRAMESET> (* = misura relativa)
larghezza in colonne <FRAMESET COLS=,,,></FRAMESET> (pixel o %)
larghezza in colonne <FRAMESET COLS=*></FRAMESET> (* = misura relativa)
larghezza della cornice <FRAMESET BORDER=?>
cornice <FRAMESET FRAMEBORDER="yes|no">
colore della cornice <FRAMESET BORDERCOLOR="#$$$$$$">
Definizione del Frame <FRAME> (contenuto di ogni singolo riquadro)
documento da visualizzare <FRAME SRC="URL">
denominazione del frame <FRAME NAME="***"|_blank|_self| _parent|_top>
larghezza dei margini <FRAME MARGINWIDTH=?> (margine destro e sinistro)
altezza dei margini <FRAME MARGINHEIGHT=?> (margine alto e basso)
barra di scorrimento? <FRAME SCROLLING="YES|NO|AUTO">
dimensione non modificabile <FRAME NORESIZE>
cornice <FRAME FRAMEBORDER="yes|no">
colore della cornice <FRAME BORDERCOLOR="#$$$$$$">
contenuto in assenza di frame <NOFRAMES></NOFRAMES> (per i vecchi browsers)

Per creare una pagina divisa in frame e' necessario creare piu' files HTML richiamati da un file principale che e' poi quello che ne permette la gestione. Prima di tutto quindi bisogna impostare questo file "sorgente", e poi successivamente gli altri files che compongono il frame.

Consideriamo di dover creare una finestra divisa in frame come da figura, con un frame in alto fisso (nel quale caricheremo il file "top.htm" da creare a parte)e un frame centrale (nel quale caricheremo il file "central.htm" da creare a parte) il quale cambi a seconda della pagina che si dovra' visualizzare. Come scritto sopra questi due frames devono essere gestiti da un terzo files il quale dovra' richiamarli assegnando loro una parte della pagina. Ecco il codice di questa pagina:

Come si vede il codice del frame e' racchiuso tra i comandi <FRAMESET></FRAMESET> che si comportano come gli usuali comandi <HTML></HTML>.
La grandezza dei frame (o meglio lo spazio che ognuno di essi deve occupare della pagina) e' stabilita dal comando rows="80,*, che sta a significare che il frame alto (che in questo caso e' una riga, "rows") deve essere di 80 pixels, mentre quel "*" sta a significare che tutto il resto deve essere assegnato al frame centrale. Avremmo potuto esprimere anche in percentuali le grandezze dei frames, in questo modo:

<FRAMESET rows="20%,*">

Impostati i due parametri <FRAMESET></FRAMESET> all'interno di essi si definiscono i nomi e i files da richiamare nei due frames creati. E' necessario dare un nome al frames (name="alto") e indicare il file HTML che dentro al frame dovra' essere caricato (SRC="top.htm"). Si devono quindi previamente creare due files di nome "top.htm" e "central.htm".
Nota 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:

Il browser invertira' l'ordine di assegnazione e carichera' il file "central.htm" nel frame superiore e il file "top.htm" nel frame centrale.

Per creare due frame verticali e' sufficiente sostituire a "rows" il termine "cols":

I vecchi browsers non supportavano i frames per cui, nella prospettiva che le pagine vengano visualizzate da uno di questi "vecchi" software, e' utile inserire del codice che avverta della presenza di frames e della impossibilita' da parte del browser di visualizzarle. Ecco il codice da inserire:

Attenzione. Il tuo browser non supporta l'opzione dei frame. Per visualizzare queste pagine e' necessario scaricare un borwser che supporti tali opzioni. Ti consiglio Netscape 3.0 o superiore.

</body>
</html>

</noframe>

Per eliminare il bordo grigio dei frames si deve inserire il seguente codice:
<frameset cols="20%,60%,20%" border=0>

Per impedire che i frames vengano ridimensionati dal visitatore:
<frame name="alto" src="top.htm" noresize>

Per eliminare sempre le barre di scorrimento (scrollbars):
<frame name="alto" src="top.htm" scrolling="no">

Per renderle sempre visibili:
<frame name="alto" src="top.htm" scrolling="yes">

Per renderle visibili solo quando servono:
<frame name="alto" src="top.htm" scrolling="auto">

Per regolare la distanza dal contenuto del frame dal margine alto (manginheight) e sinistro e destro (marginwidth):
<frame name="alto" src="top.htm" marginheight=2 marginwidth=5>

Per quanto riguarda i links all'interno dei frames (cioe' come caricare una pagina in una frame diverso da quello in cui si trova il link) si deve far riferimento al nome che in fase di realizzazione abbiamo assegnato ai vari frames. Nome che non si riferisce al file ma a quanto scritto dopo "name=". In questo caso, per esempio:

il nome assegnato e' "alto".

Consideriamo la seguente pagina divisa in frames:

Consideriamo che da un link presente su "SX", dobbiamo caricare un'altra pagina sul frame "Centrale".

Se il link, presente sul frame "SX", fosse semplicemente:

<A HREF="nuova.htm">Clicca</A>

la pagina verrebbe caricata all'interno dello stesso frame (cioe' "SX"), perche' in assenza di comandi adatti il browser capisce di dover caricare la nuova pagina nello stesso frame in cui e' presente il link.

L'esatto codice e':

<A HREF="nuova.htm" TARGET="centrale">Clicca</A>

Altro uso fondamentale del comando <TARGET> e' quello di richiamare un link ad un'altra pagina la quale verra' visualizzata a pieno schermo, eliminando tutti i frame preesistenti.
Ecco il codice:

<A HREF="nuova.htm" TARGET="_parent">Clicca</A>

Se inserisci il codice:

in testa al documento HTML tutti i link presenti nella pagine elimineranno i frame esistenti, senza necessita' di inserirli in ogni link.

Un'altra necessita' puo' essere quella di caricare, con un solo click, due o piu' frames (naturalmente la finestra deve essere divisa in almeno tre frames).
Consideriamo una pagina suddivisa così

La nostra necessita' e' di inserire un solo link nel frame di "SX" che carichi contemporaneamente due pagine diverse nei due frames di destra: "alto" e "centrale". Per fare questo e' necessario inserire qualche riga di codice javascript.

La prima parte del codice va inserita tra <HEAD></HEAD>:
Mentre la seconda parte va inserita tra <BODY></BODY> dove si vuole inserire il link:

<HEAD>
<script language="JavaScript">

</script>
</HEAD>

<BODY>
<FORM NAME="buttons">

<INPUT TYPE="button" VALUE="Clicca"
onClick="loadtwo('nuovo1.htm','nuovo2.htm')">
</FORM>
</BODY>
<BODY>
<FORM NAME="buttons">

<INPUT TYPE="button" VALUE="Clicca"
onClick="loadtwo('nuovo1.htm','nuovo2.htm')">
</FORM>
</BODY>

13. I MODULI

Prima di passare alla trattazione degli argomenti, e' bene precisare che le difficolta' di comprensione dei moduli HTML sono giustificabili con la singolarita' che essi costituiscono nella normale programmazione ipertestuale. Il grosso degli elementi messi a disposizione da HTML, infatti, permette al visitatore di visualizzare i contenuti del nostro sito, ma non di interagire con esso. In altre parole il rapporto utente/pagina diventa unidirezionale e statico. Con i moduli, al contrario, l'utente puo' interagire con il sito spedendo un proprio commento, avanzando richieste senza necessita' di scrivere via e-mail, firmando guestbook, rispondendo a sondaggi e cosi' via. Tutto questo rende il rapporto bidirezionale ed e' possibile solo grazie all'intervento di programmi residenti su server, che prendono il nome di CGI (Common Gateway Interface). Questi programmi rendono possibile cio' che altrimenti non lo sarebbe agendo dal lato client. Questo vuol dire che in realta' la gestione dei moduli dipende in misura preponderante dal server, piuttosto che dalla programmazione HTML in se' e per se'.

Perche' un form HTML funzioni e' necessario disporre di un CGI residente sul proprio server o su altro sito.

Il Web, come al solito, non lesina servizi gratuiti indirizzati proprio a questo scopo. Spesso si tratta di CGI gratuiti messi a disposizione dei propri cittadini da comunita' virtuali (Geocities, Tripod, Xoom ecc.), ma non mancano servizi specifici svincolati da tali comunita'. Per i piu' smaliziati e' consigliato rivolgersi alla fonte, ed impostare in prima persona sul proprio server uno dei tanti programmi CGI distribuiti gratuitamente dai propri creatori e raccolti in siti specifici.

A dire il vero, un form puo' essere creato anche evitando il passaggio per un CGI, ma con svantaggi e limiti che non possono essere taciuti, e che rendono un tale utilizzo l'estrema ratio da adottare solo in casi di assoluta necessita'. Nelle pagine seguenti parleremo nel dettaglio anche di questa possibilita'.

La creazione di un modulo consta di due fasi:

1) impostazione dei tag per la creazione del modulo, dei campi e del tasto di spedizione;
2) creazione di uno script CGI su server (o richiamo di uno script gia' impostato)

I moduli sono stati introdotti dalla versione HTML 2.0.
Vediamo, nel particolare, tutti i tag che HTML 4.0 prevede per la creazione di form.

<FORM> </FORM>

Questo tag apre e chiude il modulo e raccoglie il contenuto dello stesso, che puo' variare a seconda dei tag che vedremo oltre. Non e' possibile inserire un modulo all'interno di un altro. In altre parole i form non permettono nidificazioni.

La sintassi usuale dei tag analizzati e' la seguente:

Se method="get"cioè e' impostato come get i dati vengono spediti al server e separati in due variabili. Per questo metodo il numero massimo di caratteri contenuti nel form e' di 255.
Utilizzando invece "method=post" i dati vengono ricevuti direttamente dallo script CGI senza un preventivo processo di decodifica. Questa caratteristica fa si' che lo script possa leggere una quantita' illimitata di caratteri.

action specifica l'indirizzo della pagina *.cgi che riceverà il form.

Impostato il primo tag <FORM> del modulo e' possibile, sempre che lo script CGI lo permetta, creare alcuni elementi molto utili al fine di una corretta gestione dei dati:

Questo codice determina il titolo (subject) del messaggio che riceverai via e-mail, e che conterra' il contenuto del form. E' molto utile ricevere messaggi con un proprio titolo, soprattutto per chi usa dei filtri per la posta, ma anche per l'indicizzazione della corrispondenza.

Questo codice e' molto utile, in quanto una volta compilato e spedito correttamente il form, da' in risposta una pagina HTML successiva, all'interno della quale e' possibile inserire qualsiasi commento. La cosa piu' ovvia da fare e' visualizzare una pagina di conferma "il tuo form e' stato correttamente inoltrato", ma si puo' anche rimandare direttamente alla pagina principale del sito. Si tratta di comandi non standardizzati che variano a seconda del CGI utilizzato. Quindi il codice riportato sopra non funziona universalmente, ma solo con l'esempio pratico che piu' oltre andremo a dimostrare.

Il tag di base per la definizione degli elementi di un form e' <INPUT>, che viene utilizzato per aggiungere pulsanti, menu di scelta, password ecc. a <INPUT> possono venire assegnati 8 valori differenti, che andiamo a spiegare.

type="TEXT"	<INPUT type="TEXT" name="nome" maxlength="40" size="33" value="Il tuo nome"> Questo valore crea i tipici campi di testo, dove usualmente vengono richiesti dati quali il nome o l'indirizzo e-mail. E' un valore usato soprattutto per informazioni non predefinite che variano di volta in volta. TEXT ha tre attributi aggiuntivi presenti anche nell'esempio: maxlength (il numero massimo di caratteri inseribili nel campo, oltre il quale non e' possibile aggiungere), size (la larghezza della stringa all'interno della pagina) e value (visualizza un testo di default all'interno della stringa).
type="PASSWORD"	<INPUT type="PASSWORD" name="nome" maxlength="40" size="33"> Questo campo funziona similmente a TEXT visto in precedenza, ma con una piccola differenza che ne giustifica il nome: quando si digita all'interno della stringa bianca, non appaiono le lettere ma i classici asterischi delle password. In realta' i dati non vengono in alcun modo codificati, per cui rimane un'insicurezza di fondo che questo comando non elimina.
type="CHECKBOX"	<INPUT type="CHECKBOX" name="età" value="yes" checked> Questo attributo viene solitamente utilizzato per informazioni del tipo "si/no" e "vero/falso". Crea delle piccole caselle quadrate da spuntare o da lasciare in bianco. Se la casella e' spuntata, input restituisce un valore al CGI, al contrario non restituisce alcun valore. Value impostato su "yes" significa che di default la casella e' spuntata. Checked controlla lo stato iniziale della casella, all'atto del caricamento della pagina.
type="RADIO"	<INPUT type="RADIO" name="giudizio" value="sufficiente"> <INPUT type="RADIO" name="giudizio" value="buono"> <INPUT type="RADIO" name="giudizio" value="ottimo"> Questo attributo ha funzioni simili a quello visto in precedenza, ma presenta piu' scelte possibili. Selezionando una voce tra quelle presenti, qualora abbiano tutte valore "name" identico, si deselezionano automaticamente le altre.
type="SUBMIT"	<INPUT type="SUBMIT" value="spedisci"> Il classico bottone che invia il form con tutti i suoi contenuti. La grandezza del bottone dipende dalla lunghezza del testo.
type="RESET"	<INPUT type="RESET" value="Ricomincia"> Bottone che reimposta l'intero form eliminando i dati inseriti.
type="IMAGE"	<INPUT type="IMAGE" src="pulsante.gif"> Funzione simile a quella del tasto "SUBMIT" ma con la differenza che al posto del bottone di default, viene visualizzata un'immagine.
TEXTAREA	<TEXTAREA cols=40 rows=5 WRAP="physical" name="commento"></textarea> Textarea e' utilizzato per commenti o campi che prevedono l'inserimento di molto testo. La larghezza e' impostata da "cols" e l'altezza da "rows". WRAP="physical" stabilisce che qualora il testo inserito superi la larghezza della finestra, venga automaticamente riportato a capo.
SELECT	<SELECT size=1 cols=4 NAME="giudizio"> <OPTION selected Value=nessuna> <OPTION value=buono> Buono <OPTION value=sufficiente> Sufficiente <OPTION Value=ottimo> Ottimo </select> Select e' un elemento che permette la creazione di elenchi a discesa con varie possibilita' di scelta.