1. Introduzione ad HTML
annuncio pubblicitario
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
