Mettere informazione in rete - Realizzare pagine per Internet
HTML
Cominciamo richiamando alcune nozioni che abbiamo già introdotto. HTML sta per HyperText Markup Language, ovvero "linguaggio per la marcatura degli ipertesti": una particolare applicazione di un potente metalinguaggio orientato alla descrizione di complesse strutture informative, lo Standard Generalized Markup Language.
Sviluppato per la prima volta nei laboratori del CERN, l'HTML ha subìto una veloce evoluzione. Questa ha determinato il diffondersi di diverse versioni del linguaggio, che coesistono con una serie di estensioni introdotte unilateralmente dalle maggiori aziende produttrici di browser, talvolta non compatibili tra loro. Ad esempio, alcune delle estensioni introdotte dalla Netscape non sono interpretate dal browser della Microsoft (Internet Explorer), e viceversa. Attualmente la versione ufficiale dello standard, promosso dal W3C (World Wide Web Consortium), è quella denominata HTML 4.0, e tutti i browser più recenti condividono la capacità di interpretare in modo coerente la maggior parte delle istruzioni specificate in questo standard (con l'eccezione, purtroppo, dei fogli di stile, che Netscape ancora non supporta correttamente).

Alcuni concetti di base
HTML è un linguaggio di marcatura: un linguaggio cioè composto di istruzioni (che si definiscono tag o marcatori) che vanno inserite all'interno del testo da impaginare. Tali istruzioni informeranno il browser, ad esempio, su quale parte del testo sia un titolo, quale parte vada interpretata come un link ipertestuale, in che punto della pagina vadano visualizzate le immagini (e quali immagini occorra visualizzare), e così via. In termini tecnici i marcatori descrivono gli elementi di cui un documento è composto.
Sia il testo, sia i marcatori vanno memorizzati nel semplice formato ASCII. Se ad esempio stiamo utilizzando un qualsiasi word processor per creare pagine HTML, dobbiamo ricordarci di salvare il file in modalità solo testo, e non nel formato proprietario del word processor utilizzato. Un documento HTML è dunque un unico file ASCII che include sia il contenuto che vogliamo far visualizzare al browser, sia le istruzioni HTML usate per spiegare al programma come visualizzare quel contenuto. Ad esempio:
la parola che segue è in <strong>neretto</strong>
è una riga contenente sia le istruzioni HTML, sia il testo da impaginare. L'aspetto corrispondente è:
la parola che segue è in neretto Per distinguere le istruzioni HTML dal contenuto testuale vero e proprio si usa un particolare artificio sintattico: ogni istruzione deve essere racchiusa fra parentesi acute, in questo modo:
<tag>
Ci sono due tipi di elementi nel linguaggio HTML. Il primo tipo assegna ad una data stringa o blocco di testo una particolare funzione. È un po' come se si dichiarasse: questo è un titolo, questo è un paragrafo, questo è un link, e così via. Gli elementi di questo tipo vengono rappresentati con due marcatori: un marcatore all'inizio della stringa o del blocco di testo cui ci si riferisce, ed uno alla fine. Il marcatore finale è uguale a quello iniziale, solo è preceduto dal carattere "/", così:
<tag>testo cui si riferisce il tag</tag>
Gli elementi del secondo tipo, invece, non si riferiscono ad un blocco di testo, bensì descrivono delle operazioni che il browser deve effettuare: ad esempio, inserire una immagine, o disegnare una linea, o ancora spezzare una riga. Questi elementi, ovviamente, non hanno bisogno di un marcatore di chiusura.
Molte delle istruzioni HTML prevedono l'aggiunta di attributi. Può capitare, ad esempio, di voler inserire nel nostro documento una riga di separazione, ma di volerla di uno spessore particolare. In tale circostanza, oltre all'istruzione (<hr>) aggiungeremo un attributo, ad esempio size="5". L'aspetto finale del tag sarà perciò <hr size="5">. Notare che l'attributo size="5" è stato inserito all'interno delle parentesi acute e che è separato da uno spazio dall'istruzione. Più in generale:
<tag nomeattributo="valore">
Un elemento può avere anche molteplici attributi, ognuno con un suo valore. Il valore degli attributi è normalmente contenuto tra virgolette doppie; virgolette che possono essere omesse se il valore non contiene degli spazi bianchi, ma che è comunque sempre consigliabile utilizzare.
 

Le lettere accentate
Un ultimo aspetto preliminare che occorre conoscere per la creazione di documenti in HTML riguarda le lettere accentate e i caratteri speciali. Tutti i browser Web con interfacce grafiche sono in grado di visualizzarli. Ma per essere trasmessa e ricevuta correttamente da qualunque server e client, su qualsiasi piattaforma, una pagina HTML dovrebbe limitarsi a usare la sola codifica ASCII standard, che non contiene nessuna delle lettere accentate.
I linguaggi SGML, come HTML, forniscono uno strumento sintattico che permette di superare questa limitazione: le entità carattere. Una entità è sostanzialmente una sequenza di caratteri ASCII standard che rappresenta un carattere non presente in quell'insieme. Per identificare queste entità si usano due caratteri delimitatori all'inizio ed alla fine: la e commerciale (&), e il punto e virgola (;). Tra questi due delimitatori possono occorrere un numero qualsiasi di caratteri. In allegato alle specifiche dello HTML sono state distribuite due liste ufficiali di entità per i caratteri degli alfabeti latini e per i caratteri speciali. I nomi delle entità per i caratteri sono stati creati con un artificio molto semplice e comodo da ricordare: il carattere stesso, cui si aggiungono le stringhe "grave" per indicare la versione con accento grave, "acute" per indicare la versione con accento acuto, "uml" per indicare la versione con Umlaut, e così via. La distinzione tra maiuscolo e minuscolo è rilevante.
Ecco la lista delle entità per i caratteri accentati dell'ortografia italiana:

à	à	ò	ò	É	É
è	è	ù	ù	Ì	Ì
é	é	À	À	Ò	Ò
ì	ì	È	È	Ù	Ù

Ed ecco alcuni caratteri speciali che possono tornare utili (notare che le virgolette, i simboli di maggiore e minore e la '&' richiedono un carattere speciale, per non essere confusi con parte di istruzioni HTML):

(c)	©
(r)	®
>	>
<	&lt;
&	&amp;
"	&quot;

Per fare in modo che una pagina Web venga visualizzata correttamente da qualsiasi client è dunque necessario sostituire le lettere accentate con le corrispondenti entità carattere. Quando le scrivete non dimenticate il punto e virgola: indica al browser dove finisce la sequenza di controllo!
I migliori editor HTML hanno dei meccanismi di traduzione automatica da carattere esteso a entità. In caso contrario la cosa più comoda è scrivere il testo normalmente e poi operare le sostituzioni con la funzione "Trova e sostituisci" presente in tutti gli editor e i wordprocessor degni di questo nome; volendo, ci si potrà creare una apposita macro.

Gli elementi principali di un documento Web
Il tag <html>
In primo luogo, si consideri che ogni documento HTML deve iniziare con il tag <html> e deve chiudersi con </html>. Ovvero:
<html>
... qui tutto il documento da impaginare ...
</html>
Questo primo (e ultimo) elemento serve ad identificare un file HTML come tale: una specie di meta-elemento.

Il tag <head>
Altra costante: tutte la pagine HTML sono divise in due sezioni: una intestazione, ovvero una sorta di copertina, e un corpo, ovvero il documento vero e proprio. L'intestazione viene codificata con il marcatore <head>, il corpo con il marcatore <body >. Ad esempio:
<head>
... qui l'intestazione del documento da impaginare ...
</head>

Il tag <title>
All'interno della intestazione del documento può essere inserito il marcatore <title> che dà un titolo alla pagina. Questo titolo non viene visualizzato all'interno della pagina, ma compare nella barra superiore della finestra del browser; inoltre, viene normalmente utilizzato dalla funzione "add bookmark" (aggiungi segnalibro) dei principali browser. Per questo va scelto con una certa oculatezza: né tanto lungo da non entrare nella barra del browser e nel menu dei bookmark, né tanto corto da essere incomprensibile. Il comando relativo, se aggiungiamo i marcatori dell'intestazione, è:
<head>
<title>... qui il titolo che abbiamo scelto per il nostro documento ...</title>
</head>

Il tag <body>
Dopo l'intestazione possiamo finalmente inserire il corpo del documento, che viene delimitato dal marcatore <body>, così:
<body>...</body>
Il testo del documento HTML che si intende pubblicare va inserito tra questi due marcatori, con annessi tutti gli altri marcatori con i quali si vorrà descriverne la struttura e la forma. Il tag <body> prevede alcuni attributi che analizzeremo in seguito.
Cominciamo a realizzare subito una semplice pagina Web: una pagina personale (home page) di un ipotetico sig. Mario Rossi. Vi suggeriamo per il momento di non ricorrere a editor specifici per l'HTML, così come sconsiglieremmo l'uso della calcolatrice a chi volesse imparare le addizioni. Usate piuttosto dei semplici editor di testo, o dei wordprocessor, con l'accortezza però di salvare i file in modalità solo testo. È bene sottolineare quest'ultimo punto: è infatti un errore comune non badare, le prime volte, al formato di memorizzazione del file. Con alcuni editor (come il Blocco note di Windows) non è necessario badare al formato di memorizzazione, in quanto salvano sempre in modalità solo testo. Un'altra cosa cui è bene fare caso è il suffisso da assegnare al nostro file: è buona norma far sì che il file che contiene le nostre pagine Web abbia un nome che termina con .htm oppure con .html (se il nostro sistema operativo lo consente. Windows 3.x consente solo .htm).
Cominciamo, dunque, e - una volta lanciato il nostro editor di testi - scriviamo quanto segue:
<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body>
<h1>Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
</body>
</html>
A questo punto, memorizziamo il file assegnandogli un nome a nostra scelta, badando però che il nome termini con .htm e che il file sia in modalità solo testo. Ad esempio "prova.htm".
Quindi lanciamo un qualsiasi browser, ad esempio Netscape oppure Internet Explorer e, con i comandi opportuni, apriamo il file che abbiamo appena memorizzato. La prima prova avrà l'aspetto che vediamo nella figura che segue.

Notiamo che, come previsto, ciò che abbiamo scritto fra i marcatori <title> e </title> non è comparso all'interno della pagina, bensì sulla barra superiore del browser, e che nel riquadro principale è comparso tutto ciò che abbiamo scritto tra i marcatori <body> e </body>. Questo comportamento sarà caratteristico di tutte le pagine Web che realizzeremo.
Nel nostro documento abbiamo inoltre inserito altri due tag di cui non avevamo precedentemente parlato: <h1> e <p> (e relativi marcatori di chiusura).
 

Il tag <hn>
Il marcatore <h1> indica i titoli della pagina. Ci sono 6 livelli di titoli, dove <h1> è il massimo livello e <h6> il livello più basso ('h' è l'iniziale del termine inglese header). <h1> viene solitamente utilizzato per marcare il titolo di un capitolo, o di una sezione importante, <h6> per identificare una nota a piè di pagina, un copyright o altro testo che non si vuole in grande evidenza. Modificate il vostro file prova.htm nel modo seguente, e verificatene l'effetto con il browser:
<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body>
<h1>Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
<h1>Intestazione di primo livello</h1>
<h2>Intestazione di secondo livello</h2>
<h3>Intestazione di terzo livello</h3>
<h4>Intestazione di quarto livello</h4>
<h5>Intestazione di quinto livello</h5>
<h6>Intestazione di sesto livello</h6>
</body>
</html>
È possibile inserire più titoli all'interno della pagina, anche dello stesso livello (ci sono due <h1>). Tutti i marcatori di questi titoli interni supportano un attributo che permette di specificare l'allineamento del testo. Il nome dell'attributo è "'align", e i valori possibili, che specificano il tipo di allineamento, sono:

• center
• left
• right

Questa riga

appare spezzata.

Quest'altra riga, invece, appare scritta tutta di seguito nonostante gli a capo.