1. INTRODUZIONE AD HTML
L’HTML è una istanza di SGML (Standard Generalized Markup Language) specializzato per gli ipertesti e
adattato alle necessità del Web. Il termina “markup” deriva dai tempi in cui i testi da inviare in stampa venivano
marcati per indicare alla stamperia il font da usare, la dimensione, ecc. I linguaggi basati su marche (Markup
Languages) contengono appunto esplicitamente i comandi di formattazione. Ad esempio, in HTML <B> indicare
di visualizzare ciò che segue in grassetto mentre </B> ripristina la visualizzazione normale. Alti esempi ben noti
di linguaggi con marche sono TeX e troff.
Dal lato opposto dei documenti con marche stanno quelli prodotti con word processor WYSIWYG (What
You See Is What You Get) come Word o Word Perfect. Spesso internamente anche questi prodotti memorizzano i
documenti con delle marche invisibili durante l’elaborazione che indicano come visualizzare il testo. Non tutti
però seguono questo schema. Alcuni, ad esempio, tengono tutti i comandi di formattazione separati dal testo vero
e proprio. Tutti questi sistemi di visualizzazione non possono essere sfruttati per il Web perché il formato interno
dei documenti non è standardizzato e talvolta non consente neanche di riformattare facilmente la pagina in
seguito al cambiamento di risoluzione o numero di colori a disposizione, cosa invece cruciale nel Web dove chi
scrive la pagina non ha idea di quali caratteristiche grafiche avrà il sistema con cui poi verrà letta.
Come l’HTTP, anche l’HTML è in continua evoluzione. Quando Mosaic era l’unico browser HTML 1.0
era lo standard di fatto. Quando uscirono nuovi browser essi aggiunsero nuove caratteristiche che vennero
successivamente standardizzate nell’HTML 2.0. HTML 3.0 aggiunge ad HTML 2.0 molte nuove caratteristiche
come tabelle, barra dei comandi, formule, fogli stile per la definizione del layout delle pagine, ecc ed altre
funzioni che non tutti i browser supportavano.
Tuttavia la standardizzazione dell’HTML non è semplice. I produttori di browser spesso inseriscono
funzionalità in più nella speranza che esse si diffondano e rendano l’adozione di quel browser una scelta
obbligata, come stava succedendo con l’HTML 3.0, la cui approvazione ebbe una storia travagliata.
L’HTML 3.2 introduce le client-side image map e marca un ritorno al ruolo di standardizzazione del Web
Consortium. L’HTML 4.0 introduce il meccanismo dei Cascading Style Sheet, supporto allo scripting e
miglioramenti a frame, tabelle, inclusione di oggetti, direzione del testo da destra a sinistra.
Diamo un’occhiata più da vicino all’HTML. Col diffondersi di editor grafici di pagine Web, la conoscenza del
linguaggio HTML diventa sempre meno essenziale per la scrittura di pagine semplici. Una conoscenza
approfondita è invece necessaria per l’utilizzo di tutte le potenzialità di HTML, in particolare per un buon
controllo degli aspetti visivi e dell’interazione con l’utente.
Una pagina Web consiste di una intestazione e di un corpo racchiusi dai comandi <HTML> e </HTML>,
sebbene la maggior parte dei browser non diano errori quando questi mancano. L’intestazione è racchiusa tra
<HEAD> e </HEAD>, il corpo tra <BODY> e </BODY>. La maggior parte dei comandi HTML hanno questo
formato, ovvero <AAA> per indicare l’inizio di qualcosa e </AAA> per indicarne la fine: essi vengono detti anche
tag.
I tag possono essere scritti indifferentemente in maiuscolo, minuscolo o con una loro combinazione. Il
layout del documento HTML è completamente irrilevante. Il browser ignora tutti gli spazi extra e le andate a
capo riformattando il tutto solo sulla base dei tag HTML. Conseguentemente spazi e ritorno carrelli possono
essere dosati in quantità per rendere il sorgente quanto più leggibile possibile. Inoltre, non possono essere usate
delle linee vuote per separare i paragrafi ma occorre utilizzare un tag appropriato.
Alcuni tag hanno anche dei parametri con nome. Ad esempio <IMG SRC=”abc” ALT=”testo alternativo”> è
un tag con due parametri, SRC e ALT. Per ogni tag lo standard HTML indica quali sono i parametri possibili e il
loro significato. L’ordine con cui essi vengono specificati non ha importanza.
Vediamo ora un esempio di pagina HTML
<HTML> <HEAD> <TITLE> AMALGAMATED WIDGET, INC. </TITLE> <HEAD>
<BODY> <H1> Welcome to AWl’s Home Page </H1>
<IMG SRC="http://www.widget.com/images/logo.gif" ALT="AWI Logo"> <BR>
We are so happy that you have chosen to visit <B> Amalgamated Widget’s</B>
home page. We hope <I> you </I> will find all the information you need here.
<P>Below we have links to information about our many fine products.
You can order electronically (by WWW), by telephone, or by fax. <HR>
<H2> Product information </H2>
<UL>
<LI> <A HREF="http://widget.com/products/big"> Big widgets </A>
<LI> <A HREF="http:I/widget.comlproducts/little"> Little widgets </A>
</UL>
<H2> Telephone numbers </H2>
<UL>
<LI> By telephone: 1-800-WIDGETS
<LI> By fax: 1-415-765-4321
</UL> </BODY> </HTML>
Tecnicamente un documento HTML è scritto col set di caratteri ISO 8859-1 detto anche Latin I. Tuttavia, per
utenti che hanno tastiere che supportano solo il set di carattere ASCII sono presenti dei particolari codici per
l’introduzione di caratteri speciali, quali ad esempio quelli accentati. Ogni codice inizia con una & e finisce con i
due punti. Ad esempio &egrave; produce è mentre &acute; produce é. Poiché >, < e & hanno significati speciali,
possono essere introdotti solo grazie ai loro codici associati, &gt; &lt; e &amp; rispettivamente.
L’elemento principale nell’intestazione è il titolo della pagina, delimitato da <TITLE> e </TITLE>. Non è
visualizzato nella pagina ma alcuni browser lo usano come intestazione della finestra che la contiene. Nel corpo
della pagina molto importanti sono i tag <Hn> dove n varia da 1 a 6. Essi individuano le intestazioni delle varie
sezioni in cui si può dividere una pagina Web: <H1> è l’intestazione più importante, visualizzata quindi col
carattere più grande e visibile, <H6> l’intestazione meno importante. Tutte le decisioni su come esse devono
essere visualizzate sono comunque di competenza del browser e non sono specificate dallo standard HTML.
I tag <B> ed <I> sono usati per i modi grassetto e italico rispettivamente. Invece di specificare stili fisici è
possibile specificare stili logici come <ON> (definizione), <EM> (enfatizzato debole), <STRONG> (enfatizzato
forte) e <VAR> (variabili di programmi). Gli stili logici sono definiti in un documento chiamato foglio di stile. Il
vantaggio nell’usare gli stili logici è che semplicemente cambiando una definizione è possibile modificare
l’aspetto di, ad esempio, tutte le variabili da un font all’altro.
L’HTML ha anche vari meccanismi per la costruzione di liste, anche nidificate. Il tag <UL> indica l’inizio
di una lista non ordinata. I singoli elementi, marcati con <LI>, appaiono preceduti da un simbolo come . Se
<OL> viene usato invece di <UL>, gli elementi della lista vengono numerati. Infine <MENU> produce una lista
più compatta, senza numeri né simboli per ogni elemento.
Tag
Descrizione
<HTML> … </HTML>
Declares the Web page to be written in HTML
<HEAD> … </HEAD>
Delimita l’intestazione della pagina
<TITLE> … </TITLE>
Definisce il titolo (non appare nella pagina)
<BODY> … </BODY>
Delimita il corpo della pagina
<Hn> </Hn>
Delimita il titolo di livello n
<B> … </B>
Mostra … in grassetto
<I> … </I>
Mostra … in corsivo
<TT> … </TT>
Mostra … in carattere a spaziatura fissa
<UL> … </UL>
Delimita una lista non ordinata (con punti)
<OL> … </OL>
Delimita una lista ordinata
<MENU> … </MENU>
Delimita un menu di elementi <LI>
<LI> … </LI>
Indica un elemento di lista
<BR>
A capo linea
<P> … </P>
Paragrafo
<HR>
Riga orizzontale
<PRE>... </PRE>
Testo preformattato, da non formattare
<IMG SRC="…">
Inserisce un immagine
<A HREF="…"> … </A>
Ancora per un iperlink
Figura 1.1 Alcuni dei tag HTML comuni.
Il tag <DIR> può essere usato per costruire brevi tabelle. Un altro interessante meccanismo per le liste è <DL> per
la creazione di glossari. Ogni elemento del glossario è formato da due parti, delimitate da <DT> e <DD>
rispettivamente. La prima parte indica il termine da definire, la seconda la definizione stessa. Tutte queste
caratteristiche sono comunque rese obsolete dal ben più generale meccanismo per la creazione di tabelle che
vedremo in seguito.
I tag <BR>, <P> e <HR> servono invece a specificare suddivisioni tra varie parti del testo. <BR> forza una
interruzione di linea. Tipicamente i browser non inseriscono nessuna linea vuota dopo <BR>. Il tag <P> indica
invece l’inizio di un nuovo paragrafo, di solito visualizzato indentato e separato da quello precedente da una
linea bianca. <HR>, infine, forza una interruzione di linea e traccia una riga orizzontale di separazione.
2
Tag
Descrizione
Esempio
<DFN>
per definire un termine. Normalmente
mostrato in corsivo.
HTML è un linguaggio SGML
<EM>
per enfasi. Normalmente mostrato in
corsivo.
È consigliabile usare gli stili logici
<CITE>
per titoli di libri, film, ecc. Normalmente
mostrato in corsivo.
A Beginner's Guide to HTML
<CODE>
per listato di programmi. Viene usata
fonte a spaziatura fissa.
Includere il file <stdio.h>
<KBD>
per input di utente da tastiera. Viene
usata fonte a spaziatura fissa.
Inserire passwd per cambiare la
password
<SAMP>
per una sequenza di caratteri. Viene usata
fonte a spaziatura fissa.
Segmentation fault: Core
dumped
<STRONG>
per un’enfasi maggiore. Normalmente
mostrato in grassetto.
NOTA: Controllare sempre i propri link
<VAR>
per una variabile, da sostituire con valori
specifici. Normalmente mostrata in
corsivo.
rm filename cancella il file
Figura 1.2 Gli stili logici.
Visto che l’HTML 1.0 non prevedeva la possibilità di inserire tabelle o simili, è stato dotato della possibilità di
inserire testo preformattato, che va inserito tra i tag <PRE> e </PRE>. Esso viene visualizzato così come è scritto
nel file: tutti gli spazi, i ritorni carrello, le tabulazioni, ecc. sono significativi. Spesso viene utilizzato allo scopo
un font a larghezza fissa che consente di mantenere al meglio la formattazione originale.
Il tag <IMG> consente di inserire una immagine nella posizione corrente della pagina. Il parametro SRC
specifica l’URL dell’immagine. Lo standard HTML non specifica il tipo di immagini supportate ma in pratica
tutti i browser supportano almeno GIF e JPEG. Altri parametri di <IMG> sono ALIGN che controlla
l’allineamento dell’immagine rispetto alla linea base del testo ( TOP, MIDDLE, BOTTOM), ALT per fornire un
testo alternativo che verrà visualizzato quando il browser non è in grado di visualizzare l’immagine (formato non
supportato, immagini disabilitate dall’utente, ecc.) e ISMAP che indica che l’immagine è in realtà una mappa
attiva, in grado di rispondere in maniera a seconda del punto su cui viene cliccata.
Infine, è possibile inserire nella pagine i famosi link ipertestuali, grazie ai tag <A> (ancora) e </A>. Alcuni
dei possibili parametri sono HREF (l’URL della pagina destinazione), NAME (il nome del link) e METHODS
(metodo di accesso). Il browser visualizzato il testo tra <A> e </A> e salta alla pagina specificata quando l’utente
clicca su di esso. È possibile anche inserire un tag <IMG> dentro la coppia <A> e </A> per trasformare una
immagine in un collegamento ipertestuale.
Per esempio, consideriamo questo frammento di HTML:
<A HREF="http://www.nasa.gov”> NASA’s home page </A>
Sullo schermo apparirà:
NASA’s home page
Se l’utente clicca sul testo, il browser carica la pagina la cui URL è http://www.nasa.gov e la mostra. Invece, se
scriviamo:
<A HREF="http://www.nasa.gov"> <IMO SRC="shuttle.gif" ALT=”NASA”> </A>
apparirà un’immagine (es. dello space shuttle). Cliccando sulla immagine si salta sulla pagina della NASA,
esattamente come nel caso precedente. Se però l’utente ha disabilitato la visualizzazione delle immagini, la scritta
NASA apparirà al posto dell’immagine.
Il tag <A> può avere un parametro NAME per inserire un iperlink che può venire riferito dall’interno della
pagina. Per esempio, in certe pagine si può creare una tavola dei contenuti. Cliccando su un elemento della tavola
si salta alla corrispondente sezione del documento.
3
1.1.1 Tabelle
Le tabelle sono state inserite al linguaggio HTML nella sua terza revisione. Una tabella consiste di una o più
righe, ognuna formata da una o più celle. Ogni cella può contenere testo, immagini o anche altre tabelle. Le celle
possono anche essere fuse tra di loro. L’autore della pagina ha un certo controllo sul layout della tabella come
l’allineamento o lo stile dei bordi ma la parola finale spetta comunque al browser.
Ecco un esempio di tabella in HTML
<HTML> <HEAD> <TITLE> Esempio di tabella </TITLE> <HEAD>
<BODY>
<TABLE BORDER=ALL RULES=ALL>
<CAPTION ALIGN=BOTTOM > Differenze tra le varie versioni di HTML </CAPTION>
<COL ALIGN=LEFT> <COL ALIGN=CENTER> <COL ALIGN=CENTER> <COL ALIGN=CENTER>
<COL ALIGN=CENTER>
<TR> <TH> Caratteristica
<TH> HTML 1 <TH> HTML 2 <TH> HTML 3 <TH> HTML 4
<TR> <TH> Collegamenti ipertestuali
<TD> x <TD> x <TD> x <TD> x
<TR> <TH> Immagini
<TD> x <TD> x <TD> x <TD> x
<TR> <TH> Liste
<TD> x <TD> x <TD> x <TD> x
<TR> <TH> Frame
<TD> <TD> x <TD> x <TD> x
<TR> <TH> Mappe e immagini attive
<TD> <TD> x <TD> x <TD> x
<TR> <TH> Form
<TD> <TD> x <TD> x <TD> x
<TR> <TH> Tabelle
<TD> <TD> <TD> x <TD> x
<TR> <TH> Equazioni
<TD> <TD> <TD> x <TD> x
<TR> <TH> Barre con pulsanti
<TD> <TD> <TD> x <TD> x
<TR> <TH> Mappe lato cliente
<TD> <TD> <TD> <TD> x
<TR> <TH> Cascading Style Sheet
<TD> <TD> <TD> <TD> x
</TABLE> </BODY> </HTML>
che viene visualizzata più o meno come segue
Caratteristica
Collegamenti ipertestuali
Immagini
Liste
Frame
Mappe e immagini attive
Form
Tabelle
Equazioni
Barre con pulsanti
Mappe lato cliente
Cascading Style Sheet
HTML 1
x
x
x
HTML 2
x
x
x
x
x
x
HTML 3
x
x
x
x
x
x
x
x
x
x
HTML 4
x
x
x
x
x
x
x
x
x
x
x
Figura 1.3 Differenze tra le varie versioni di HTML
Le tabelle iniziano con il tag <TABLE> che specifica anche alcune proprietà generali della tabella. Il tag
<CAPTION> serve a specificare un titolo per la tabella. Ogni riga inizia col tag <TR> (Table Row) mentre le
singole celle vengano marcate con <TH> (Table Header) o <TD> (Table Data). La differenza consente ai
browser di usare font diversi nei due casi.
1.1.2 Mappe
Le image map sono immagini che contengono aree a cui sono associati dei riferimenti ipertestuali. Cliccando in
una di queste aree, si segue il link ad essa associato. Per la realizzazione di questo meccanismo, fino alla
versione HTML 2, era necessario utilizzare degli script sul server tramite l’opzione ISMAP. HTML 3 introduce
le mappe sul lato cliente (client-side map), di cui vediamo qui un esempio. L’attributo usemap serve ad indicare
la mappa da usare per individuare i link.
<IMG src="images/contenuti.gif" border=0 usemap="#topics"
alt="Contenuti" border="0">
<MAP NAME="topics">
<AREA SHAPE=RECT COORDS="125,120,350,170" HREF=why.html>
<AREA SHAPE=RECT COORDS="125,200,350,250" HREF=what.html>
4
<AREA SHAPE=RECT COORDS="125,280,350,330" HREF=how.html>
</MAP>
Per calcolare le coordinate delle aree cliccabili, esistono diversi strumenti (es. Mapedit,
http://www.boutell.com/mapedit) che consentono di costruirle interattivamente ed farsi produrre il codice
HTML.
1.1.3 Frame
1.1.4 Cascading Style Sheet
1.1.5 Form
L’HTML 1.0 era un linguaggio progettato per una comunicazione a senso unico: non era possibile spedire
informazioni dal browser al server. Quando il Web si iniziò a diffondere presso organizzazioni commerciali
iniziò a nascere prepotentemente l’esigenza di una comunicazione bidirezionale, ad esempio per l’acquisizione
di ordini in remoto, la registrazione automatica del software, l’immissione di password per l’accesso a siti
riservati. Tutto ciò portò all’introduzione delle form nell’HTML 2.0.
Le form contengono pulsanti e spazio per l’inserimento di testi in modo che l’utente possa effettuare delle
scelte, inserire dei dati e rimandare tutto all’autore della pagina. Allo scopo viene definito il nuovo tag <INPUT>,
dotato di tutta una serie di parametri per specificare dimensione, tipo e utilizzo dei campi di immissione
visualizzati. I tipi più comuni sono campi vuoti per l’inserimento di testo, checkbox, mappe attive e pulsanti di
sottomissione. Ecco un esempio di form.
<FORM ACTION=”http://widget.com/cig-bin/widgetorder” METHOD=POST>
Nome <INPUT NAME=”cliente” SIZE=46> <P>
Indirizzo <INPUT NAME=”indirizzo” SIZE=40> <P>
Citt&agrave <INPUT NAME=”citta” SIZE=20>
Stato <INPUT STATO=”stato” SIZE=15> <P>
Carta di Credito <INPUT NAME=”carta” TYPE=PASSWORD SIZE=10>
Data scandenza <INPUT NAME=”data” SIZE=10> <P>
M/C <INPUT NAME=”cc” TYPE=RADIO VALUE=”mastercard”>
Visa <INPUT NAME=”cc” TYPE=RADIO VALUE=”visa”>
<INPUT TYPE=SUBMIT VALUE=”Invia ordine”> <P>
</FORM>
Tutte le form sono racchiuse tra i tag <FORM> e </FORM>. Il testo all’interno è visualizzato come al solito e
tutti i comandi di formattazione sono disponibili. Questa form utilizza tre tipi di campi di input, ed apparirà così:
Figura 1.4 Esempio di form.
I primi sei campi specificati dal comando <INPUT> sono di tipo testo e servono all’immissione di testo. Il
parametro NAME serve al browser quando spedisce il risultato della form al server. Ne vedremo l’utilizzo in
seguito. Il parametro SIZE specifica invece il numero di caratteri massimo ammessi nel campo di input. Il
parametro TYPE, se presente, consente di specificare tipi diversi di campi di immissione. Il tag <P> indica come
al solito di andare a capo.
Il primo campo della form è di 46 caratteri ed appare sulla prima riga a fianco dell’etichetta Nome, segue
poi una linea che richiede la Indirizzo, lungo 40 caratteri, poi la Città e lo Stato sulla stessa riga, poi Carta di
Credito e Data scadenza. Per il campo Carta di Credito si indica il tipo PASSWORD, in modo che il testo non
appaia sullo schermo.
5
Nell’ultima riga della form sono inseriti due radio button. Il fatto che due pulsanti radio abbiano lo stesso
nome indica che appartengono allo stesso gruppo e quindi sono mutuamente esclusivi. Il campo VALUE serve al
pari di NAME durante la trasmissione del risultato al server. A seconda di quale delle due opzioni ha scelto
l’utente, la variabile cc avrà come valore la stringa “mastercard” oppure “visa”.
Il browser si occupa di visualizzare i radio button in maniera da consentire all’utente di selezionarli e
deselezoinarli cliccandoci sopra (o usando la tastiera). La presentazione visuale sarà consistente con l’interfaccia
utente del sistema utilizzato: il risultato sarà dunque diverso nel caso si operi sotto Windows, MacOS, Motif o
altro. Una campo di tipo CHECKBOX è simile al RADIO ma i vari box appartenenti allo stesso gruppo possono
essere abilitati o disabilitati indipendentemente l’uno dagli altri.
Nel caso la scelta debba avvenire tra una lista molto lunga di alternative, i radio buttons e i checkbox non
sono i più adatti. Sono da preferire invece i tag <SELECT> e </SELECT>, all’interno dei quali va specificata una
lista di alternative possibili. La semantica è quella dei radio button (scelte mutuamente esclusive) a meno che
non si usi il parametro MULTIPLE, nel qual caso si usa la semantica dei checkbox. Tipicamente i browser
visualizzano un campo di questo tipo come un menù popup.
Per l’immissione di testo sono disponibili altri campi di input oltre allo standard che è TEXT. Il tipo
PASSWORD è simile a TEXT ma i caratteri non sono visualizzati su schermo quando vengono premuti. Una
campo TEXTAREA si differenzia invece da TEXT perché accenta input contenenti più di una linea. Si noti che la
trasmissione di password, numeri di carte di credito e simili via Internet pone notevoli problemi di sicurezza e
dovrebbe avvenire solo quando sono presenti adeguate misure di sicurezza, come cifrature.
Infine, una campo di tipo SUBMIT, che si presenta esteticamente come un pulsante, quando viene premuto
provoca l’invio della form riempita al server HTTP. Il campo VALUE in questo caso è l’etichetta che viene
visualizzata sul pulsante. Un altro tipo di pulsante è il RESET che ripristina la form con i valori che aveva prima
delle modifiche apportate dell’utente.
Ancora, abbiamo i campi di tipo HIDDEN. Sono campi di testo ma dedicato esclusivamente all’output.
Vengono di solito utilizzati nel caso di form consecutive per ricordare all’utente eventuali scelte fatte in
precedenza. Infine IMAGE è per le immagini attive. Quando l’utente clicca sull’immagine, le coordinate (x, y)
del pixel selezionato (ovvero la posizione corrente del puntatore del mouse) sono memorizzate in opportune
variabili e la form viene spedita al server.
In sostanza ci sono tre modi per inviare una form al server: l’uso di un pulsante SUBMIT, di una immagine
cliccabile o premendo ENTER in una form composta da un solo campo di tipo testuale. Il metodo con cui i dati
vengono spediti dipende dal parametro METHOD specificato col tag <FORM> e il destinatario è indicato dal
parametro ACTION.
Se si specifica GET come metodo, l’unico modo per far conoscere al server il contenuto di una form è
appendere all’URL di una pagina una serie di associazioni variabili/valori, separate da un punto interrogativo dal
resto dell’URL. Questo metodo porta ad avere URL lunghe centinaia di caratteri ma è molto usato per la sua
estrema semplicità. Se il metodo specificato è POST, viene invece spedito al server un messaggio il cui corpo
contiene le associazioni tra variabili e valori. In entrambi i casi, la & è usata per separare i campi mentre +
rappresenta uno spazio. Per esempio, la risposta alla form di prima potrebbe essere
cliente=Mario+Rossi&indirizzo=piazza+Giulio+Cesare+100&citta=Roma&stato=Italia
&carta=1234567890&data=21/12/1998&cc=mastercard
La stringa viene spedita al server in una singola linea. Se nessun checkbox in un gruppo è selezionato, l’intero
gruppo viene omesso dalla risposta.
Chiaramente, il compito di dare un senso a queste risposte è totale appannaggio del server. Per fortuna uno
standard in questo settore è già ben definito ed è chiamato CGI (Common Gateway Interface).
1.2 Gli script CGI
Gli script CGI (Common Gateway Interface) sono programmi esterni che girano sul server Web, utilizzati per
creare pagine altamente interattive. Gli sviluppatori del CGI hanno voluto creare qualcosa di estremamente
potente ed estensibile che nel contempo fosse completamente invisibile dal lato del fruitore delle pagine. Il
lettore, infatti, deve solo cliccare su un collegamento, su una immagine attiva o su un pulsante SUBMIT di una
form per attivare l’esecuzione anche di script molto complessi: tutto ciò di cui lui verrà a conoscenza è il
risultato dell’elaborazione, che sembrerà apparire sullo schermo automaticamente. Quello che però sta
accadendo realmente è ben più complesso. Sintetizzando:
Il browser manda gli input al server Web,
Il server a sua volta passa gli input allo script CGI,
Lo script CGI elabora gli input, li passa eventualmente ad altre applicazioni, e manda il risultato al server
Web,
Il server Web passa l’output di nuovo al browser. L’output può essere qualunque cosa dal risultato di una
ricerca in un database ad una pagina completamente nuova.
6
Sui sistemi UNIX gli script risiedono in una directory particolare chiamata cgi-bin sotto /usr. Sugli altri sistemi la
posizione degli script può in generale essere diversa ma basta consultare il manuale del server Web per scoprirla.
Quello che è comunque necessario per un corretto funzionamento degli script CGI è che qualsiasi accesso ad un
file che stia nella directory riservata a questi script non provochi la spedizione del file al client ma l’esecuzione
dello stesso. Gli script possono essere scritti in un linguaggio qualunque: shell dei comandi per sistemi UNIX, C,
Tcl, Perl, ecc. In genere il linguaggio da preferire dipenderà dai compiti che deve svolgere lo script: quando si
richieda grande velocità o elaborazioni numeriche è conveniente usare il C ma per complesse elaborazioni di
testo è probabilmente preferibile orientarsi su linguaggi magari più lenti ma che dispongono di sofisticate
funzioni di elaborazione di stringhe quali il Perl.
In generale, gli usi comuni per un server CGI sono:
tenere traccia del numero dei visitatori di una pagina Web,
elaborare gli input di una form, tipicamente stringhe da ricercare in qualche database, e visualizzare i
risultati della ricerca,
identificare l’utente con l’inserimento di password e consentirne l’accesso ad aree ristrette del Web,
elaborare l’input dalle immagini attive e dirigere il lettore sul documento associato,
generare documenti basati sul tipo del browser impiegato dall’utente
1.2.1 Input agli script CGI
Quando un utente attiva uno script CGI, il browser manda degli input al server Web. Questi raggiungeranno lo
script sotto varie forme: variabili d’ambiente, linea di comando, standard input. La forma più comune di input
agli script è proprio tramite variabili d’ambiente. Vediamone alcune standard.
CONTENT_LENGTH: contiene il numero di caratteri passati allo script CGI tramite lo standard input
CONTENT_TYPE: indica il tipo MIME dei dati sullo standard input nella classica forma type/subtype.
HTTP_USER_AGENT: identifica il tipo di browser che ha mandato la richiesta, nella forma software
type/version. As esempio Mozilla/2.0 identifica il NetScape 2.0.
PATH_INFO: specifica informazioni di percorso addizionali che possono essere usate per mandare
informazioni allo script. L’informazione extra segue l’URL dello script. Se ad esempio si
accede ad uno script tramite l’URL /usr/cgi-bin/formparse.pl/home.html la variabile
PATH_INFO avrà valore /home.html.
QUERY_STRING: specifica una stringa codificata secondo le regole viste nella sezione precedente per le
query originate dall’uso delle form. Quando uno script viene acceduto con una URL che
contiene al suo interno un punto interrogativo, tutto quello che segue tale simbolo di
interpunzione viene prelevato e passato allo script tramite questa variabile di ambiente. È il
metodo usato dalle form con METHOD pari a GET per passare allo script il contenuto dei vari
campi.
REQUEST_METHOD: indica il metodo con il quale la richiesta è avvenuta. I più usati sono GET, HEAD e
POST.
Quando il metodo per la richiesta è HEAD o GET di solito non viene passato nessun dato allo standard input
dello script. Diversamente, se il metodo è POST, il messaggio spedito dal browser al Web viene passato nello
standard input allo script. È questo il caso, ad esempio, delle form con METHOD pari a POST.
La linea di comando di uno script CGI viene usata molto raramente, in congiunzione con le query di tipo
ISINDEX di cui però noi non parleremo.
7
