WWW (World Wide Web)
Linguaggi per la descrizione astratta di documenti.
Ad esempio Word
Definizione del tipo di documento - Questa e' un'implementazione specifica della decrizione di documento fatta usando SGML.
HTML è un DTD di SGML
I documenti HTML sono in semplice formato testo e possono essere creati usando un qualsiasi editor di testo.
Per i nostri esempi useremo il Notepad di Windows. Comunque, le ultime versioni di alcuni browser includono degli appositi editor. Sono disponibili editor HTML anche per i sistemi DOS/Windows ed Apple. Ex. HTMLed (MSWin) oppure HTML HyperEdit Toolbook (MSWin) o anche HTML Assistant (MSWIN). Un altro potente editor in ambiente WYSIWYG è HoTMetaL.
I documenti scritti vengono verificati semplicemente leggendoli con un browser.
Un documento HTML è formato da elementi (ad esempio, tabelle, paragrafi, liste).
Ogni elemento è individuato da una etichetta. In HTML una etichetta è formata da:
< nome_etichetta >
Le etichette sono usate normalmente in coppia.
Alcune etichette possono avere degli attributi.
Ad esempio, <B> Corso </B> indica che la parola Corso deve essere presentata in grassetto.
Questo è un semplice esempio di documento HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Giuseppe Anastasi"> <META NAME="GENERATOR" CONTENT="Mozilla/3.01b1Gold (Win16; I) [Netscape]"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <H1>Questo è un piccolo documento HTML</H1> </BODY> </HTML>
Nota: HTML non distingue tra maiuscole e minuscole. <title> è completamente equivalente a <TITLE> o <TiTlE>.
<P ALIGN=right>Benvenuti al mondo di HTML.</P> <CENTER><P>Questo è il primo paragrafo</P></CENTER>
<P>Benvenuti al mondo di HTML.<BR> Questo è il primo paragrafo</P>
Ogni ipertesto HTML dovrebbe avere un titolo. Un titolo è generalmente mostrato separatamente dal documento ed è usato principalmente per l'identificazione del documento in altri contesti.
Un buon titolo dovrebbe essere composto da almeno sei parole che descrivano le finalità del documento.
HTML ha sei livelli di intestazioni (numerati da 1 a 6), con 1 quello più evidenziato. La sintassi dell'intestazione è:
<Hy>Testo dell'intestazione</Hy>
dove y è un numero tra 1 e 6 che specifica il livello di grandezza.
A differenza di molti documenti nei principali Word Processors, il ritorno carrello (a capo) e lo spazio bianco nei files HTML sono insignificanti.
Importante: Ciascun paragrafo deve essere terminato con <P>. Il browser ignora ogni indentazione o linea bianca nel testo sorgente. Senza l'etichetta <P>, il documento diviene un unico largo paragrafo.
<P ALIGN=right>Benvenuti al mondo di HTML.</P> <CENTER><P>Questo è il primo paragrafo</P></CENTER>
Eccezione: testo preformattato
Esempio:
<PRE> #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * </PRE>
Nota Bene: Per preservare la leggibilità nei file HTML, le intestazioni dovrebbero essere su linee separate, e i paragrafi dovrebbero essere separati da linee bianche.
In HTML è possibile definire liste non numerate, numerate e di definizioni.
Per gli elementi delle liste, nessun separatore di paragrafo è richiesto.
Le etichette per gli argomenti nella lista determinano la fine di ciascun elemento della lista stessa.
Esempio:
<UL> <LI> arance <LI> banane </UL>
Supponiamo di voler spostare un elemento della lista al centro e lasciare l'altro a sinistra.
<UL> <DIV ALIGN=right> <LI>arance</LI> </DIV> <LI>banane </LI> </UL>
NOTA BENE: differenti browser possono mostrare una lista non ordinata in modo differente.
Esempio:
<OL> <LI> giallo <LI> rosso <LI> verde </OL>
Esempio:
<DL>
<DT><FONT COLOR="#0000FF"><FONT SIZE=+2> DII </FONT></FONT>
<DD> Il DII è il Dipartimento di Ingegneria della Informazione
ed è situato all'interno della Facoltà di Ingegneria
<DT> <FONT COLOR="#0000FF"><FONT SIZE=+2> CERN </FONT></FONT>
<DD> Il laboratorio Europeo per lo studio della Fisica delle
particelle(CERN) è situato in Svizzera.
È quì che è nata l'idea dell'utilizzo a scopi informativi
e didattici del protocollo http, dell'architettura CLIENT/SERVER
e di HTML.
</DL>
NOTA BENE: I campi <DT> e <DD> possono contenere paragrafi multipli (separati da <P>), liste, o altre informazioni.
L'attributo COMPACT può essere usato quando i termini sono molto brevi. L'uso dell'attributo forza a il browser a porre la definizione nella stessa riga del termine.
<DL COMPACT>
<DT><FONT COLOR="#0000FF"><FONT SIZE=+2> -i </FONT></FONT>
<DD> Invoca.....
<DT> <FONT COLOR="#0000FF"><FONT SIZE=+2> -h </FONT></FONT>
<DD> Invoca ....
<DL COMPACT>
<DT><FONT COLOR="#0000FF"><FONT SIZE=+2> -g </FONT></FONT>
<DD> Invoca.....
<DT> <FONT COLOR="#0000FF"><FONT SIZE=+2> -r </FONT></FONT>
<DD> Invoca ....
</DL>
</DL>
Come visto nel precedente esempio, le liste possono essere annidate.
Un esempio di liste annidate è il seguente:
<UL>
<LI> <FONT COLOR="#0000FF"> Le province dell'Umbria:</FONT>
<UL>
<LI> Perugia
<LI> Terni
</UL>
<LI> <FONT COLOR="#0000FF"> Le province della Basilicata: </FONT>
<UL>
<LI> Potenza
<LI> Matera
</UL>
</UL>
Le etichette <BLOCKQUOTE> e </BLOCKQUOTE> vengono usate per includere un margine di indentazione al testo.
ESEMPIO:
<BLOCKQUOTE>
<P>Ometti le parole non necessarie</P>
<BLOCKQUOTE>
<P> Sono non necessarie tutte le parole superflue </P>
</BLOCKQUOTE>
<P> Lo stile vigoroso è coinciso </P>
</BLOCKQUOTE>
L'etichetta <ADDRESS> è generalmente usata nei documenti HTML per specificarne l'autore e provvedere a lasciare un modo per contattarlo (ex., un indirizzo e-mail). Questa è generalmente l'ultima etichetta-direttiva in un file e viene posta su una nuova linea, giustificata a sinistra.
Per esempio, l'ultima parte del file HTML di questa guida potrebbe essere:
<ADDRESS> Una guida ad HTML / Giuseppe Anastasi / anastasi@iet.unipi.it / rivisto Novembre 96 </ADDRESS>
HTML ha due tipi di stili per le parole o le frasi: logico e fisico.
Lo stile logico etichetta il testo con riferimento al suo significato. Lo stile logico è configurato direttamente dal browser. Ad esempio, l'etichetta <CITE>, che viene utilizzata quando sono citati titoli di libri, puo' essere definita come lo stile italico dal browser. Ogni volta che una parola (o un insieme di parole) è inserita tra <CITE> e </CITE> il browser la mostra in italico.
Lo stile fisico indica direttamente la specifica apparenza richiesta. Ad esempio, porre una parola tra <I> e </I> indica al browser di visualizzarla in italico.
Parallelo: definire un nuovo stile oppure definire un paragrafo alla volta in WORD.
Particolari sequenze di caratteri (ESCAPE SEQUENCE) possono essere usate per:
Nel primo caso rientrano le parentesi angolari a sinistra (<) e a destra (>), e la e commerciale (&).
Le parentesi angolari sono usate per specificare le etichette HTML (come mostrato sopra), mentre la e commerciale è usata come meccanismo di escape per questi ed altri caratteri:
Nel secondo caso rientrano, ad esempio
Altre notizie su questo argomento sono disponibili in un listato presso CERN http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html.
La potenza espressiva del linguaggio HTML è dovuta soprattutto alla possibilità di collegare il testo o/e un'immagine (ipertesto) di un documento al testo e/o un'immagine dello stesso documento o ad un altro documento. Un browser segnala il testo o l'immagine collegata con un colore differente da quello normalmente utilizzato o con una sottolineatura.
L'etichetta che identifica un ipertesto è <A>, dove A è l'abbreviazione di ANCHOR.
Per includere un'ancora nel documento si procede nel modo seguente:
Un esempio di ipertesto è il seguente:
<A HREF="MioLink.htm"> MioLink</A>
"Mio Link" rappresenta l'ipertesto collegato al
documento MioLink.htm.
IMPORTANTE
I collegamenti ad un documento possono essere espressi attraverso collegamenti relativi (HREF="../MioLink.htm") oppure collegamenti assoluti (HREF="http://www.iet.unipi.it/general.htm).
In generale, dovrebbero essere utilizzati i collegamenti relativi per le seguenti ragioni:
Uniform Resource Locator (URL) è il formato usato dai documenti WWW per localizzare altri file. Un URL ci indica il tipo di risorsa alla quale stiamo accedendo (ex., http, gopher, ftp), il server che la possiede, il cammino per ritrovarla ed il suo nome. Il formato usato è:
scheme://host.domain[:port]/path/filename
dove scheme è uno tra:
Il numero della porta viene generalmente omesso.
Ad esempio, il collegamento al Televideo disponibile al Dipartimento di Ingegneria della Informazione può essere espresso come
<A HREF="http://www.iet.unipi.it/~tlv/index.html"> Televideo</A>
TELEVIDEO
Vedi anche il documento Addressing preparato dal CERN per informazioni addizionali riguardo gli URL. A Beginner's Guide to URLs è posizionata sul NCSA Mosaic Help menu.
Le ancore possono anche essere usate per spostare il lettore ad una particolare sezione di un documento (anche dello stesso). Questo tipo di ancore sono chiamate ancore nominate perchè per creare i collegamenti si devono inserire i nomi all'interno del documento.
Si supponga che si voglia creare un collegamento tra un ipertesto in un documento A.htm ad una sezione in un documento B.htm (ad esempio quella che inizia con la frase "Sezione B.3".
ATTENZIONE
La tecnica è esattamente la stessa tranne che il nome del file è ora omesso.
Nota Bene
Il bottone BACK non funziona quando si rimane nello stesso documento.
Un lettore può essere facilitato nell'inviare una e-mail nel modo seguente:
<A HREF="mailto:anastasi@iet.unipi.it"> Per scrivere a Giuseppe Anastasi</A>
L'ipertesto Per scrivere a Giuseppe Anastasi crea una finestra per spedire una e-mail.
I browser più evoluti possono visualizzare immagini. NCSA Mosaic e Netscape, in particolare, possono visualizzare le immagini in formato X Bitmap (XBM), GIF e JPEG.
L'uso delle immagini dovrebbe essere valutato attentamente perchè la visualizzazione di un'immagine può richiedere molto tempo. Usare una particolare immagine più volte in un documento è una maniera intelligente di limitare al minimo il rallentamento del processo di caricamento.
NOTA: L'etichetta <IMG> è stata implementata per la prima volta in NCSA Mosaic. Tale etichetta è presente anche in Netscape ma non è implementata in tutti i World Wide Web browsers.
Per includere un immagine in un documento viene utilizzato il seguente formato:
<IMG SRC="filename.gif" HEIGHT=100 WIDTH=65>
Normalmente il
bordo inferiore di un'immagine è allineato con il testo.
Questo testo è allineato con la cima dell'immagine ( <IMG
SRC= "phone.gif" ALIGN=top>).
Questo testo è allineato con il centro dell'immagine ( <IMG
SRC= "phone.gif" ALIGN=center>).
ATTENZIONE
Alcuni browser (ad esempio quelli che vengono eseguiti su terminali VT100) non possono visualizzare immagini. Per risolvere questo problema HTML fornisce l'attributo ALT che permette di visualizzare un testo alternativo all'immagine.
<IMG SRC= "freccia.gif" ALT = "UP">
Le versioni più recenti di alcuni browser possono caricare un'immagine ed usarla come sfondo.
L'etichetta per includere un'immagine come sfondo è inclusa come un attributo in <BODY>.
<BODY BACKGROUND="phone.gif">
Il colore dello sfondo, del testo e dell'ipertesto può essere cambiato nel modo seguente
<BODY TEXT="#FFFFFF" BGCOLOR="#000000" LINK="#9690CC">
Le combinazioni di lettere e numeri rappresentano le gradazioni dei colori RGB (Red, Green, Blue).
Un'immagine può essere anche aperta su un documento separato, quando un utilizzatore attiva un ipertesto.
Questa è considerata un'immagine esterna ed è particolarmente utile se si desidera non rallentare il caricamento del documento con troppe immagini.
Per includere un riferimento ad un grafico in un documento esterno, si usa
<A HREF = "filename.gif">link anchor</A>
Assicurarsi che l'immagine sia in formato GIF, TIFF, JPEG, RGB, o HDF.
<CENTER><TABLE BORDER=2 BGCOLOR="#FFFFFF" > <CAPTION> <P>Tabella di prova </P> </CAPTION> <TR> <TH>Nome </TH> <TH>Data di nascita</TH> <TH>Luogo di Nascita</TH> </TR> <TR> <TD>Franco Rossi</TD> <TD>9/10/1968</TD> <TD>Pisa</TD> </TR> </TABLE></CENTER>
<H1>Questo è <A name="foo">HTML errato.</H1></A>
Dal momento che molti decodificatori HTML non sono molto
bravi nel maneggiare i file HTML errati, è meglio evitare che le
etichette entrino in conflitto.
I form sono modelli che vengono utilizzati per l'inserzione di dati. I form permettono ad un utente di inserire delle informazioni ed inviarle indietro al proprietario della pagina. L'etichetta <INPUT> è usata per questo scopo.
<H1> Modello Acquisto </H1> <FORM ACTION="" METHOD=POST> Nome <INPUT NAME= "customer" SIZE=46> <P> Indirizzo <INPUT NAME="address" SIZE=40> <P> Città <INPUT NAME="city" SIZE=20> Stato <INPUT NAME="state" SIZE=4> Paese <INPUT NAME="country" SIZE=10> <P> Numero di Carta di Credito <INPUT NAME= "cardno" SIZE=10> Scadenza <INPUT NAME="expires" SIZE=4> M/C <INPUT NAME= "cc" TYPE= RADIO VALUE="mastercard"> VISA <INPUT NAME= "cc" TYPE= RADIO VALUE="visacard"> <P> <INPUT TYPE= SUBMIT VALUE="Submit order"> <P> </FORM>
<ACTION> Specifica lo URL a cui sottomettere le informazioni
<METHOD> Specifica il metodo da usare.
Ad esempio la risposta allo schema precedente potrebbe essere:
customer=Giuseppe+anastasi&address=via+Diotisalvi+2 &city=Pisa&state=Italia &cardno=9889&expires=1997&cc=mastercard
Standard per gestire i dati di un form.
Supponiamo che si voglia rendere una base di dati interessante disponibile ad utenti WWW.
Il modo CGI di fare questo è di scrivere uno script che interfaccia la base di dati al WWW.
Allo script è dato un URL e per convenzione è posto nella directory cgi-bin.
I server HTTP sanno che quando è richiesta l'invocazione di un metodo nella directory cgi-bin devono interpretare il nome del file come quello di un programma eseguibile e lanciarlo.
Quando l'utente preme il bottone SUBMIT, il browser stabilisce una connessione TCP allo URL identificato in ACTION. Il browser quindi invoca l'operazione richiesta in METHOD. Il risultato è che lo script è eseguito con il blocco del messaggio passato come parametro. Inoltre, diverse variabili ambiente sono inizializzate.
Tipicamente, gli script iniziano il loro lavoro controllando i parametri e riportandoli ad una forma più adatta per usarli facilmente.
CGI script possono essere anche usati per produrre uscite in formato grafico.
Maggiori informazioni su HTML sono disponibili attraverso i seguenti hyperlinks.