| Indice | Struttura di un documento HTML |
Questo capitolo è dedicato al linguaggio HTML (HyperText Markup Language) che è lo strumento principale utilizzato per creare le pagine Web. Scopo di questo capitolo è fornire le nozioni di base circa il Word Wide Web e gli strumenti di lavoro da utilizzare per poter realizzare documenti HTML.
L'acronimo HTML sta per HyperText Markup Language e identifica un particolare linguaggio (di programmazione) adatto per la creazione di documenti ipertestuali. Un documento ipertestuale (o ipertesto) è un documento speciale che può contenere collegamenti (link) con altri elementi interni o esterni al documento stesso. Un link individua una parte del documento (ovvero una parte dello schermo dove viene visualizzato il documento) che, se attivata mediante un clic del mouse o selezione da tastiera, permette di eseguire diverse azioni: accedere ad un'altra zona del documento o vedere un altro documento HTML o visualizzare un'immagine o eseguire un file audio/video.
Gli ipertesti sono più versatili dei documenti normali in quanto consentono all'utente di capire le relazioni che esistono tra diversi concetti e di usufruire queste relazioni con un semplice clic di mouse.
Da un punto di vista più tecnico, HTML è un linguaggio a marca (o simboli) della famiglia SGML (Standard Generalized Markup Language). I linguaggi a marca prevedono l'utilizzo di particolari codici (detti appunto marca) per identificare parti di un documento da trattare in modo opportuno. Si deve quindi pensare a un documento HTML come a un documento di testo normale in cui vengono inserite queste marche che identificano le parti del documento e che verranno, in seguito, opportunamente interpretate da programmi appositi (visualizzatori HTML o, più in generale, browser) per 'produrre' il documento finale.
Ad esempio, HTML prevede l'uso della marca <p> per indicare l'inizio di un nuovo paragrafo e la marca </p> per indicare la fine. Scopo fondamentale del linguaggio HTML è individuare le parti logiche (paragrafi, titoli, collegamenti, ecc. ecc.) di un documento lasciando ai browser il compito di come visualizzare queste parti logiche.
Non tutti i browser riconoscono tutte le marche previste dal linguaggio HTML. Questo significa che uno stesso documento HTML può essere visualizzato in modo diverso da browser diversi, anche se il contenuto e la sua struttura logica rimangono invariate. Una marca non riconosciuta da un browser viene semplicemente ignorata, per cui non esiste un concetto stringente di errore di programmazione in HTML: un errore di scrittura di una marca può essere visto come una nuova marca, per cui i browser semplicemente la ignorano.
Un concetto fondamentale del linguaggio HTML è che l'autore è responsabile dei contenuti, mentre il browser è 'responsabile' della sua visualizzazione. L'autore può controllare solo in modo limitato la resa grafica del testo.
Un browser è un programma che interpreta i codici HTML presenti in un documento al fine di fornire una opportuna 'resa' del documento. Solitamente i browser sono applicazioni di tipo grafico e forniscono una visualizzazione su schermo del documento, ma esistono anche browser vocali che permettono di consultare documenti HTML anche alle persone non vedenti.
Visto che la maggioranza dei browser sono grafici, elenchiamo di seguito le principali funzioni che un browser grafico deve fornire per poter garantire una consultazione agevole di documenti HTML:
Mozilla, Netscape, Internet Explorer, Opera e Lynx sono esempi di browser. Da notare che Lynx è un browser di testo, per cui non è in grado di visualizzare immagini ma solo il testo di un documento.
Nel mondo del World Wide Web con il termine URL (Uniform Resource Locator pronunciato "u erre elle") si intende un luogo (o indirizzo Internet) in cui si trova una determinata risorsa che si vuole utilizzare. Un URL è rappresentato in un formato che permette di individuare il luogo e le modalità di accesso in modo corretto ed univoco.
Un URL può puntare a una pagina/documento HTML diverso da quello
corrente o a un particolare componente/parte del documento stesso. Ad
esempio, http://www.scienze.univr.it è l'URL della
pagina iniziale (home page) del sito della Facoltà di
Scienze Matematiche Fisiche e Naturali dell'Università degli Studi
di Verona.
Il linguaggio HTML prevede la marca <a> (àncora) per specificare i collegamenti tra documenti: gli indirizzi utilizzati dal codice <a> sono URL.
Il formato completo di un URL è il seguente:
protocollo://nome del domimio/cammino/nome del file
Ad esempio, nell'URL http://www.scienze.univr.it, il
protocollo è http, il nome del dominio è
www.scienze.univr.it e il cammino e nome del file NON sono
presenti. Questo formato di URL è il formato minimo. Il protocollo
e il dominio sono necessari. Attenzione che alcuni browser sono in grado
di correggere l'errore tipico di dimenticanza del protocollo: quando si
specifica un indirizzo da consultare in un browser e ci si dimentica di
inserire il protocollo, questi browser aggiungono automaticamente il
protocollo http.
Il protocollo indica il tipo di risorse a cui si sta accedendo. Esistono diversi tipi di protocollo; i più importanti sono elencati nella tabella 1.1.
| Protocollo | Esempio | Descrizione |
|---|---|---|
| file | file:///C|indice.htm |
Specifica un file locale presente nello stesso computer dove funziona il browser. In particolare, il file indice.htm deve essere letto dalla directory principale del disco C. Notare che per file ci sono 3 '/' (slash) e che i ':' che servono ad individuare un disco (ad esempio C:) sono sostituiti da '|' per convenzione. |
| ftp | ftp://ftp.sci.univr.it/index.html |
Il protocollo ftp (File Transfer Protocol) permette di
copiare un file dal dominio specificato al computer locale. In
particolare questo comando chiede di copiare il file index.html dal
dominio ftp.sci.univr.it sul computer in cui funziona il
browser. |
| http | http://www.scienze.univr.it/index.html |
Il protocollo http (HyperText Transfer Protocol) permette
di ricercare e visualizzare in locale un documento (in questo caso
index.html) dall'indirizzo specificato. |
| mailto | mailto:nobody@univr.it |
Questo URL fa si che il browser avvii un programma di posta elettronica per inviare una mail all'indirizzo specificato. Si noti che NON si deve utilizzare nessun carattere '/'. |
Il dominio di un URL specifica la posizione fisica dove si trova la risorsa che si vuole recuperare. Un dominio solitamente è un computer dove è presente un programma (server) che gestisce le richieste del protocollo specificato nella prima parte dell'URL.
Il dominio può essere specificato sia dal suo indirizzo IP (Internet Protocol) o utilizzando un nome che corrisponde all'indirizzo IP.
Un indirizzo IP è costituito da una sequenza di 4 numeri (detto
anche ottetti) (ciascuno dei quali varia da 0 a 254), suddivisi
da un punto: aaa.bbb.ccc.ddd.
Data la difficoltà di ricordare i numeri, è stato messo a
punto un meccanismo in grado di associare ad un indirizzo IP un nome di
dominio (servizio DNS, Domain Name Server). I nomi dei domini
sono costituiti da parole suddivise da un punto:
www.sci.univr.it. Solitamente, se si legge un nome di dominio
da sinistra verso destra, ogni parola/nome individua una 'zona' o dominio
sempre più generale rispetto a quella precedente. Ad esempio,
www.sci.univr.it individua il server di nome www
che si trova nella zona sci (scienze), che si trova nella
zona univr (Università di Verona ) che si trova nella
zona it (Italia). L'ultima parola, detta estensione,
è di due o tre caratteri. La tabella 1.2 riporta le estensioni
più note:
| Estensione | Significato |
|---|---|
| edu | Istruzione (siti di scuole o università) |
| com | Organizzazioni commerciali o produttive |
| gov | Istituzioni nazionali, federali o governative |
| org | Organizzazioni varie (di solito senza scopi di lucro) |
| net | Organizzazioni dei fornitori di servizi (ISP o Internet Service Provider) |
| it | Dominio dei siti che si trovano in Italia. Analogamente ci sono estensioni per tutti i paesi del mondo: 'fr' per Francia, 'uk' per Regno Unito, 'de' per Germania, 'es' per Spagna, ecc. |
| eu | Dominio della Unione Europea |
Consideriamo l'URL
http://www.sci.univr.it/documenti/testo.html . L'ultima parte
rappresenta il path e il nome del file. L'ultimo nome, se è un nome
con estensione, generalmente indica un file: nel nostro esempio
testo.html è il nome del file da recuperare. Il resto
è il nome del percorso (nomi di directory) all'interno del server
dove si trova il file da recuperare: nel nostro esempio
documenti/ è il nome della directory che si deve
visitare per trovare testo.html.
Ci sono dei termini specifici di uso frequente che si devono conoscere.
Con il termine 'tag' si individuano le marche HTML che sono racchiusi fra parentesi angolari (< e >). Per esempio, il tag <hr> inserisce una riga orizzontale nel testo. I tag possono essere scritti sia in minuscolo che in maiuscolo. Spesso gli autori preferiscono scrivere i tag in maiuscolo per distinguerli meglio. Visto però che il linguaggio HTML sta evolvendo verso XHTML (versione XML del linguaggio) dove è obbligatorio scrivere i tag in minuscolo, si consiglia di abituarsi fin da subito a scrivere i tag in minuscolo.
Esistono due tipi di tag: tag vuoti e tag contenitori. Ad esempio, <br> è un tag vuoto, perché non deve contenere o racchiudere nulla.
Il tag contenitore è formato da un tag iniziale e da un tag finale. Fra questi due tag si trova il testo che è controllato dal tag contenitore. Un esempio di tag contenitore è <em> che permette di rappresentare in modo enfatizzato il testo che racchiude: se si scrive il seguente pezzo di codice HTML:
l'effetto di questa istruzione è il seguente:
Il tag <em> trasforma in modo enfatizzato (solitamente scritto in italico) il testo racchiuso tra il suo tag iniziale e finale. La rappresentazione effettiva del testo dipende dal browser.
Il tag 'em' inizia con <em> che è simile a un tag vuoto e termina con uno leggermente diverso: '/' (slash) prima del nome del tag (</em>). È molto importante posizionare correttamente i tag finali. In questo caso, se non scrivessimo il tag finale, il browser visualizzerebbe in enfatizzato tutto il testo successivo fino alla fine del documento.
Il formato generale di un tag contenitore è il seguente
<p align="center"> . . . Corpo della paragrafo. . . </p>
|____________| |_______________________________||__|
| | |
attributi dati su cui tag finale
|__________________| opera il tag
|
tag iniziale
I tag (sia vuoti che quelli iniziali dei tag contenitori) possono includere altri elementi HTML, detti attributi. Sono codici in grado di personalizzare l'azione dei tag. Per esempio, il tag paragrafo (<p>) ha un attributo, 'align', che permette di allineare i testi di un paragrafo a sinistra, al centro o a destra della pagina (specificando, rispettivamente, i valori 'left', 'center' o 'right'). La seguente istruzione allinea al centro della pagina il testo contenuto dal tag <p>:
questo testo è al centro della pagina
La specifica del linguaggio HTML raccomanda che i valori degli attributi siano sempre scritti tra doppi apici (").
Come già detto, il linguaggio HTML prevede che in caso di errore di inserimento codici, i visualizzatori debbano ignorare l'errore e proseguire. Questo ha portato alla cattiva abitudine di non inserire i tag di chiusura e di non racchiudere i valori degli attributi tra doppi apici, in quanto i tag di apertura successivi permettono quasi sempre di 'rimediare' all'errore in modo corretto. Alcuni libri suggeriscono addirittura di non utilizzare il tag finale </p> perché il browser sa quando deve chiudere un tag contenitore. Ma questo non è sempre vero. Ci possono essere dei casi in cui la non chiusura di un tag può portare ad una cattiva formattazione. Un buon autore chiude regolarmente i tag contenitori per evitare situazioni non prevedibili.
Il World Wide Web Consortium (W3C) è l'ente che si occupa di definire e controllare gli standard dei protocolli e dei tag HTML. Questo ente internazionale è stato fondato nel 1994 per sostenere l'evoluzione del Web e accogliere tutte le proposte di modifica degli standard. Il W3C è formato da oltre 200 aziende, organizzazioni ed enti. Fisicamente si trova presso il MIT (Massachusetts Institute of Technology) negli USA, l'INRIA (Institute National de Recherche en Informatique et en Automatique) in Europa e l'Università di Keio in Giappone.
Il W3C esegue le revisioni dello standard HTML (ora siamo arrivati alla versione 4.1). Le specifiche HTML vengono presentate prima come working draft (bozze). Se i nuovi tag o protocolli vengono accettati, diventano parte di una serie di proposed recommendations (raccomandazioni proposte). Quando i membri raggiungono l'accordo su una raccomandazione proposta, questa viene promossa a recommendation (raccomandazione). Gli sviluppatori di software utilizzano queste raccomandazioni per sviluppare le nuove versioni dei browser. Dopo la pubblicazione, il W3C si occupa di aggiornare periodicamente la raccomandazione per correggere eventuali errori.
Per scrivere documenti HTML servono soltanto due strumenti: un semplice editor di testi ASCII e il software per visualizzare i documenti HTML.
Il primo strumento necessario per creare delle pagine Web è un editor che genera file di testo ASCII. Il termine ASCII sta per "American Standard Code for Information Interchange". Un editor ASCII è un'applicazione che produce file ASCII standard ovvero un file che contiene soltanto testi, senza alcun codice di formattazione. Molti word processor aggiungono dei codici speciali ai testi per identificare il tipo e le dimensioni dei caratteri o altri attributi. I browser non sono in grado di interpretare questi codici di formattazione.
Per un documento HTML è sufficiente quindi un semplice editor. In un computer con sistema operativo UNIX, potete utilizzare l'editor vi o emacs. Se il computer ha sistema operativo Windows, è possibile utilizzare Blocco note. Molti word processor, come Microsoft Word o WordPerfect, permettono di salvare i file come semplici documenti ASCII; per farlo, basta indicare al programma di salvare il documento corrente come "testo MS-DOS".
Visto l'enorme interesse verso il linguaggio HTML, molte società e gruppi di sviluppo software hanno iniziato a produrre dei programmi appositi che si possono suddividere in: editor HTML per produrre documenti in modo facilitato, convertitori HTML per trasformare file di testo creati con un word processor in documenti HTML e verificatori HTML che controllano i link e la sintassi delle istruzioni HTML al fine di garantire che i documenti HTML funzionino correttamente.
In Internet sono disponibili vari editor HTML, ovvero editor che aiutano nella scrittura di documenti HTML fornendo comandi/bottoni che gestiscono i tag HTML. Alcuni sono gratuiti, altri no. Il meccanismo di funzionamento di questi editor è molto diverso. Alcuni editor mostrano tutti i tag HTML nel documento. L'utente può attivare la finestra di anteprima (preview) per vedere il documento HTML come pagina Web. Il vantaggio di questo tipo di editor è che il documento è più semplice da modificare, perché sono visibili direttamente le istruzioni HTML, non il loro effetto. Uno svantaggio è che serve un altro strumento, browser, per vedere come sarà rappresentato il documento nei Web.
Altri editor usano un approccio differente, in quanto usano una rappresentazione di tipo più grafico che fa vedere direttamente l'effetto dei tag HTML: questi editor si dicono WYSIWYG (What You See Is What You Get per indicare che ciò che si vede è ciò che si ottiene). Uno svantaggio di questo approccio WYSIWYG è che l'utente spesso deve dedurre quali attributi HTML sta utilizzando; inoltre, non c'è la garanzia che tutti gli editor visualizzeranno le istruzioni HTML nello stesso modo così come i browser.
Un editor potente in grado di comportarsi sia da editor HTML standard che WYSIWYG è l'editor di Mozilla 1.0 o Netscape 6.2 (notare le versioni!), disponibili sia per computer Windows che per computer Linux. L'editor HTML, che è incluso nel pacchetto Mozilla/Netscape Communicator, permette di passare con estrema facilità dal browser all'editor e viceversa. La finestra dell'editor mostra i tag HTML e dispone di una serie di menu e pulsanti che semplificano la creazione e la modifica dei documenti HTML. I pulsanti servono a inserire nuovi tag. Gli attributi dei tag possono essere selezionati dagli appositi menu.
Un altro editor molto diffuso è FrontPage di Microsoft. È un editor di tipo WYSIWYG che permette di sviluppare velocemente semplici pagine HTML. L'aspetto 'negativo' di tale editor è che utilizza alcune marche HTML non previste dallo standard e che sono riconosciute solo dai browser della famiglia di Internet Explorer. Un buon autore di documenti HTML non dovrebbe imporre nessun vincolo sul tipo di browser da utilizzare per poter vedere il documento.
Circa la scelta degli editor, è consigliabile scegliere l'editor che fa vedere la maggior parte di codice possibile; operando in questo modo, sarà più semplice capire la relazione fra il codice HTML e la corrispondente rappresentazione nella finestra del browser.
Esistono vari strumenti che possono essere utilizzati per inserire dei codici HTML all'interno di un file di testo e trasformarlo in un documento HTML. Oramai gli stessi word processor offrono la possibilità di salvare un documento in formato HTML. Per esempio, per quanto riguarda Word per Windows, dalla versione 97, è possibile salvare in formato HTML, anche se il file prodotto contiene moltissimi codici HTML che non sono riconosciuti da browser diversi da Internet Explorer. Per 'pulire' tali documenti, sono utili i 'verificatori/validatori'.
Prima di pubblicare una pagina sul World Wide Web, bisogna verificarne il corretto funzionamento. Se la vostra pagina include dei link che non riescono a stabilire un collegamento o dei tag contenitori che non vengono chiusi, gli utenti del Web che leggono la vostra pagina potrebbero ottenere dei risultati errati.
Per risolvere questi problemi, si potrebbe provare i singoli link e controllare tutte le componenti della pagina per verificare che svolgono le operazioni previste. Se il numero di pagine è elevato o contengono un elevato numero di link, questo processo di verifica potrebbe richiedere troppo tempo.
Sul Web sono disponibili alcuni strumenti che permettono di verificare se un documento HTML contiene degli errori, provando i vari link e controllando la sintassi delle istruzioni HTML. Uno dei migliori verificatori HTML è tidy del consorzio W3C.
Esistono vari siti Web che forniscono il software per operare nel linguaggio HTML. Il seguente elenco è soltanto una piccola parte del software disponibile in rete. Come noto, gli indirizzi URL cambiano frequentemente, quindi se qualcuno di questi siti non è più accessibile, provate a ricercarne altri equivalenti.
Mozilla (http://www.mozilla.org). È un browser sviluppato a partire da Netscape quando la società che sviluppava quest'ultimo ha deciso di rendere pubblico il codice sorgente. Mozilla è un browser sviluppato dalla communità internet ed è completamente open-source. La versione 1.0 garantisce piena aderenza allo standard HTML definito dal W3C.
Netscape (http://home.netscape.com). È uno dei browser più utilizzati. Dal sito è possibile scaricare la versione più aggiornata del browser Netscape per varie piattaforme (Macintosh, Windows e altri sistemi operativi).
Internet Explorer (http://www.microsoft.com/windows/ie/default.asp). È il sito Microsoft dal quale è possibile scaricare gratuitamente l'ultima versione del browser Internet Explorer.
Lynx (http://www.ukans.edu/about_lynx/). Si tratta del più diffuso browser di testo, utile se si dispone di un computer che non è in grado di operare in modalità grafica o se la connessione a Internet è severamente limitata
1st Page 2000 (http://www.evrsoft.com/) è un editor HTML completamente free e di ottimo livello. Include anche alcuni tool per generare effetti dinamici e l'utilissimo tool di verifica tidy.
Editor integrato di Mozilla.
Prima di pubblicare sul Web un documento HTML è bene verificare che i suoi link funzionino correttamente e che i codici contenuti non contengano errori di sintassi.
WebLint (http://www.sai.msu.su/cgi-bin/admin/weblint_gw). Consente di immettere un URL per verificare il codice di quel sito.
W3C (http://validator.w3c.org). Il sito del W3C dove verificare i documenti HTML. In questa pagina è anche disponibile il link aggiornato per recuperare il programma 'tidy' che permette di verificare e correggere documenti HTML sul proprio personal computer.
Per conoscere le ultime specifiche dei linguaggio HTML, visitate il sito del W3C al seguente indirizzo: http://www.w3.org/TR/html4
| Indice | Struttura di un documento HTML |