Questo e-text  stato gratuitamente scaricato da
                www.liberliber.it
e adattato dalla Fondazione Ezio Galiano per
renderne autonoma la lettura ai privi della vista.
 
Internet 2000: manuale HTML (03 di 03)
manuale HTML
01 | 02 | 03
Costruire una pagina per World Wide Web
I prossimi paragrafi intendono fornire una breve introduzione alla
realizzazione di pagine da inserire su World Wide Web. Come noto, a tale
fine viene utilizzato uno speciale linguaggio denominato HyperText Markup
Language (HTML), ovvero 'linguaggio per la marcatura degli ipertesti'
[125].
Sviluppato inizialmente da Tim Berners Lee (l'inventore del Web), HTML ha
subto una veloce evoluzione. Questa ha determinato nel corso degli anni
il diffondersi di diverse versioni del linguaggio, a cui si sono
affiancate una serie di estensioni (mutuamente incompatibili) introdotte
unilateralmente dalle maggiori aziende produttrici di browser. 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 [126]. Le istruzioni che
illustreremo nelle pagine seguenti sono tutte parte di questo standard.
Prima di procedere, tuttavia,  opportuno fare alcune precisazioni: la
realizzazione di pagine Web non eccessivamente sofisticate  alla portata
di tutti; basta affrontare con un po'di buona volont lo studio dei
fondamenti del linguaggio HTML. Il discorso  diverso se si intende
fornire un vero e proprio servizio informativo, con pagine complesse e
complessi effetti grafici. In questo caso  necessario avere competenze
specifiche, oltre ad una conoscenza approfondita di HTML e, magari, di
linguaggi come Java e Javascript. Se si perseguono risultati professionali
o editoriali,  dunque meglio rivolgersi ad esperti, oppure - avendone la
possibilit - formarsi una competenza specialistica nel campo. In
quest'ultimo caso, come detto, le pagine che seguono forniranno gli
strumenti di base, ma non pensate di imparare i segreti dell'HTML cos in
fretta! Ci sono molte istruzioni delle quali non parleremo e molti punti
che andrebbero approfonditi o integrati. Se intendete perfezionare la
vostra conoscenza di queste tecniche dobbiamo quindi rimandarvi alla
manualistica specifica, parte della quale si trova sulla rete stessa (in
qualche caso anche in italiano). Come al solito, piuttosto che lasciare un
elenco di indirizzi, vi consigliamo di fare un salto alla pagina di Yahoo!
dedicata a World Wide Web [127]. Le voci 'Authoring', 'HTML'e
'Information and documentation'contengono miriadi di rimandi a questo
tipo di risorse. Numerosi sono anche i libri dedicati al tema: basta fare
un salto in libreria e dare una occhiata agli scaffali riservati ai testi
di ambito informatico. Tuttavia si tratta nella maggior parte di
traduzioni che arrivano in Italia con un ritardo notevole, e che spesso
non rispecchiano una situazione in continua evoluzione.
HTML: alcuni concetti di base
HTML, si  detto,  un linguaggio 'di marcatura': un linguaggio cio
costituito da un insieme di istruzioni (che definiamo tag o marcatori) che
vanno inserite all'interno del documento che si intende comporre. 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 codificato in ASCII
che include sia il contenuto che vogliamo far visualizzare al browser, sia
le istruzioni usate per spiegare al programma come elaborare quel
contenuto. Ad esempio:
.h1.Questo  un titolo./h1.
.p.La parola che segue  in .strong.neretto./strong../p.
Come si pu evincere dall'esempio precedente, per distinguere i marcatori
HTML dal contenuto testuale vero e proprio si usa un particolare artificio
sintattico: ogni istruzione (come gi detto, talvolta le istruzioni HTML
vengono chiamate anche marcatori o tag... usiamo tutti i termini, cos da
abituarci) deve essere racchiusa fra parentesi acute, in questo modo:
.marcatore.
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, e uno alla fine. L'identificatore del marcatore
finale  uguale a quello iniziale, solo  preceduto dal carattere '/', in
questo modo:
.marcatore.testo cui si riferisce il marcatore./marcatore.
Gli elementi del secondo tipo, invece, non si riferiscono ad un blocco di
testo, bens individuano dei punti specifici del documento oppure
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.
Molti elementi 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,
all'interno del marcatore (.hr., nel caso specifico) specificheremo
(separato da uno spazio) l'attributo size="5". L'aspetto finale del tag
sar perci .hr size="5".. In generale la sintassi per inserire degli
attributi nei marcatori  la seguente:
.marcatore nomeattributo="valore".
Un elemento pu avere anche molteplici attributi, ognuno con un suo
valore. Il valore degli attributi  normalmente contenuto tra apici
singoli o doppi; apici che possono essere omessi 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.
Il linguaggio HTML fornisce un costrutto sintattico (ereditato da SGML)
che permette di superare questa limitazione: le entit. Una entit 
sostanzialmente una sequenza di caratteri ASCII standard che sta per un
carattere non presente in quell'insieme. Anche per identificare le entit
si usano due caratteri delimitatori, uno all'inizio e uno 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 di HTML 4.0 sono stati distribuiti due elenchi di entit
standard per i caratteri degli alfabeti latini e per i caratteri speciali.
I nomi delle entit standard 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. Queste sono le entit per i caratteri accentati
dell'ortografia italiana:
    &agrave;
    &egrave;
    &eacute;
    &igrave;
    &ograve;
    &ugrave;
    &Agrave;
    &Egrave;
    &Eacute;
    &Igrave;
    &Ograve;
+    &Ugrave
Ed ecco alcuni caratteri speciali che possono tornare utili (da 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)    &copy;
(r)    &reg;
.    &gt;
.    &lt;
&    &amp;
"    &quot;
Per assicurarsi che una pagina Web venga visualizzata correttamente da
qualsiasi browser  sempre opportuno sostituire le lettere accentate con
le corrispondenti entit carattere. Quando le digitate 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 [128]. In caso contrario la cosa pi comoda 
scrivere il testo normalmente e poi operare le sostituzioni con la
funzione 'search and replace'presente in tutti gli editor e i
wordprocessor degni di questo nome; volendo, si potr creare una apposita
macro.
Gli elementi fondamentali per la creazione di un documento Web
Dopo aver visto i concetti di base che sono sottesi alla codifica HTML,
vediamo alcuni degli elementi fondamentali che servono a realizzare una
semplice pagina Web.
La macrostruttura del documento HTML
Ogni documento HTML, in ottemperanza ad un vincolo sintattico di SGML,
deve essere racchiuso dentro un elemento radice che lo identifica come
tale. Tale elemento viene rappresentato dalla coppia di marcatori .html.
(il tag iniziale) e ./html. (il tag finale).
Un altro aspetto che caratterizza tutti i documenti HTML  la loro
macrostruttura, che  articolata in due sezioni: l'intestazione (una sorta
di frontespizio elettronico), codificata con il marcatore .head., seguita
dal corpo, il contenuto vero e proprio, codificato con il marcatore
.body.. Di conseguenza ciascun documento HTML avr la seguente forma:
.html.
.head.
... qui l'intestazione del documento da impaginare ...
./head.
.body.
... qui il contenuto del documento
./body.
./html.
L'elemento .title.
All'interno della intestazione pu essere inserito l'elemento .title. che
contiene il titolo del documento. Questo titolo non viene visualizzato
all'interno della pagina Web, ma compare nella barra superiore della
finestra del browser; inoltre, viene normalmente utilizzato come voce
nella lista dei bookmark 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 seguente esempio ne mostra la sintassi:
...
.head.
.title.Titolo del documento./title.
./head.
...
L'elemento .body.
Di seguito all'intestazione deve essere inserito il corpo del documento,
identificato dal marcatore .body., come nel seguente esempio:
.body...../body.
Il testo del documento va inserito tra questi due marcatori, con annessi
tutti gli altri marcatori con i quali si vorr descriverne la struttura e
la forma. L'elemento '.body.'prevede alcuni attributi che analizzeremo in
seguito.
Per proseguire in questa nostra introduzione, ed evitare di essere troppo
astratti, cominciamo a realizzare subito una semplice pagina Web: la
pagina personale 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 altro aspetto cui  bene fare attenzione  l'estensione che si
assegna al nostro file: di norma un file che contiene un documento HTML
deve avere un nome che termina con '.htm'oppure con '.html'.
Cominciamo, dunque, a comporre la nostra pagina digitando 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
Ad esempio, scegliamo il nome prova.htm. Certo non  molto fantasioso, ma
faremo meglio in seguito... Quindi avviamo il nostro browser e, con i
comandi opportuni [129], apriamo il file che abbiamo appena memorizzato.
La nostra prima prova avr l'aspetto che vediamo nella figura che segue.
figura 154: Il file 'prova.htm'cos come viene visualizzato da Internet
Explorer
Si noti 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 due marcatori .body. e ./body.. Nel
nostro documento abbiamo inoltre inserito altri due elementi su cui ci
apprestiamo a soffermarci.
Gli elementi per i titoli interni
All'interno di ogni documento di norma compaiono dei titoli, che possono
essere articolati su vari livelli gerarchici (titolo di sezione, titolo di
capitolo, titolo di paragrafo etc.). Gli elementi per codificare questi
titoli interni hanno un marcatore della forma .hn.. In HTML sono
disponibili sei diversi livelli di titoli: .h1.  il livello pi alto e
.h6. il pi basso. Il primo viene solitamente utilizzato per marcare il
titolo di un capitolo, o di una sezione importante, e i successivi per
indicare sottosezioni progressivamente pi piccole. Il titolo .h6. di
norma si usa per identificare una nota a pi di pagina, una dichiarazione
di copyright o altro testo che non si vuole in grande evidenza.
Per esaminare l'uso di questi marcatori, modifichiamo il nostro file
'prova.htm'nel modo seguente, e verifichiamone l'effetto con un 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.
Come si vede,  possibile inserire pi titoli all'interno della pagina,
anche dello stesso livello. 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
A titolo di esempio, modifichiamo il primo .h1. aggiungendo l'attributo
appena visto:
.h1 align="center".Home page di Mario Rossi./h1.
L'elemento .p.
In qualsiasi documento, di norma, insieme ai titoli c' del testo
'normale'. Nella stampa su carta, il testo viene diviso in blocchi, i
capoversi (che gli inglesi chiamano paragraph), al fine di dividerlo in
unit concettuali e aumentarne la leggibilit. Anche un documento HTML pu
essere diviso in capoversi: a tale fine va utilizzato l'elemento .p..
L'effetto visivo di questa istruzione  quello di inserire un 'ritorno a
capo'e una riga vuota nel testo a video. Si noti che dopo ogni titolo
.hn. il browser va a capo automaticamente. Prima di andare avanti,
facciamo un esperimento che ci mostrer una peculiarit dell'HTML. Nel
vostro file prova.htm aggiungete le seguenti righe:
.p.Questa riga./p..p.appare spezzata../p.
.p.Quest'altra
riga, invece,
appare scritta tutta
di seguito
nonostante gli a capo../p.
Salvate il file prova.htm e ricaricatelo con il vostro browser. Ecco cosa
vedrete:
Questa riga
appare spezzata.
Quest'altra riga, invece, appare scritta tutta di seguito nonostante gli a
capo.
HTML visualizza i capoversi separandoli in funzione dell'istruzione .p. e
non degli 'a capo'che dovessimo inserire nel nostro file. Anche il
marcatore .p. pu avere degli attributi di tipo 'align'. .p
align="right"., ad esempio, sposter a destra il capoverso.
Un altro marcatore che riguarda la gestione dei salti di linea  .br. (che
sta per break). La sua funzione  quella di provocare un 'ritorno a capo'
senza introdurre una riga vuota e senza interrompere l'unit concettuale
del capoverso (e nemmeno la sua impaginazione; ovvero un capoverso
allineato a destra, ad esempio, continuer ad essere allineato a destra,
fino al marcatore ./p., anche se contiene uno o pi .br.). .br. non ha un
marcatore di chiusura in quanto indica semplicemente il punto in cui
intervenire. Ricorrendo a pi marcatori .br. in sequenza si possono creare
delle spaziature verticali.
Le liste
Oltre ai normali capoversi, in un documento possono comparire anche
elenchi ordinati di voci, o liste. Tali liste possono essere numerate (ad
ogni voce della lista  assegnato automaticamente un numero progressivo) o
non numerate (ogni voce della lista  preceduta da un pallino). HTML
provvede una serie di elementi per inserire liste all'interno di pagine
Web.
La sintassi per le liste non numerate  la seguente:
.ul.
.li.prima voce./li.
.li.seconda voce./li.
.li.terza voce./li.
./ul.
L'elemento .ul. (unordered list) identifica la lista come tale, ed ha un
marcatore iniziale, che va posto all'inizio della lista, e uno finale che
la chiude. Ogni voce della lista va codificata con l'elemento .li. (list
item) anch'esso dotato di entrambi i tag di apertura e chiusura. L'aspetto
a video di questo tipo di liste  il seguente:
. prima voce
. seconda voce
. terza voce
Le liste numerate si costruiscono nello stesso modo, ma il tag di apertura
 .ol. (ordered list) e quello di chiusura, ovviamente, ./ol..
All'interno, ancora una serie di elementi .li.. Ecco la sintassi e quindi
l'aspetto a video di queste liste:
.ol.
.li.prima voce./li.
.li.seconda voce./li.
.li.terza voce./li.
./ol.
. prima voce
. seconda voce
. terza voce
Proseguiamo nella costruzione della nostra pagina Web, per verificare
delle possibili applicazioni pratiche delle liste e, contemporaneamente,
verifichiamo che cosa succede se le 'annidiamo', ovvero se includiamo una
lista in un'altra:
.html.
.head.
.title.La prima pagina Web di Mario Rossi./title.
./head.
.body.
.h1 align="center".Home page di Mario Rossi./h1.
.p.Questa &egrave; la mia prima pagina in HTML../p.
.h3.Il mio tempo libero./h3.
.ul.
.li.letteratura./li.
.li.cinema (qui sotto la classifica dei miei
film preferiti)./li.
.ol.
.li.Blade Runner./li.
.li.Oltre il giardino./li.
.li.Delicatessen./li.
./ol.
.li.sport./li.
./ul.
./body.
./html.
Notate che sotto la voce 'cinema', e prima di chiudere la lista
principale, abbiamo inserito una ordered list, con una breve classifica.
Questa seconda lista  stata leggermente rientrata: si tratta di un
semplice artificio di scrittura che usano anche i programmatori per
migliorare la leggibilit del file sorgente.
Le liste sono uno strumento abbastanza sofisticato, che possono essere
controllate mediante alcuni attributi tra cui:
type="x"
dove x pu assumere uno dei seguenti valori:
1    numerazione normale (impostazione standard)
I    numeri romani maiuscole
i    numeri romani minuscoli
a    lettere minuscole
A    lettere maiuscole
start="n"
dove n  un numero qualunque. Con questo attributo, 
possibile far partire la numerazione della lista dal
numero che vogliamo.
Questi due attributi possono essere applicati contemporaneamente. Ad
esempio .ol type="I" start="6". produce una lista numerata mediante numeri
romani il cui primo elemento ha l'indice 'VI'.
Un terzo tipo di lista  la lista di definizioni (definition list),
codificata con il marcatore .dl.. Essa  composta da una serie di coppie
termine-definizione, codificati rispettivamente mediante gli elementi .dt.
e .dd.. Usiamo una lista di questo tipo per inserire nella nostra pagina
delle informazione relative alle nostre attivit professionali:
.dl.
.dt.Scuola di Giornalismo di Perugia./dt.
.dd.insegno l'applicazione delle nuove tecnologie alla professione di
giornalista./dd.
.dt.Laterza./dt.
.dd.in collaborazione con alcuni colleghi ho scritto un manuale su
Internet./dd.
.dt.RAI./dt.
.dd.ho progettato il sistema informativo della trasmissione
Media/Mente./dd.
./dl.
Nella figura che segue l'effetto a video ( stato anche aggiunto un
titolo, con .h3.Il lavoro./h3.):
figura 155: Ecco l'aspetto di una definition list
Gli stili di carattere
Molto spesso  necessario evidenziare dei segmenti testuali per portarli
con maggiore enfasi all'attenzione del lettore. Per fare questo nella
stampa tradizionale, e di conseguenza nei word processor, si usano i
cosiddetti stili di carattere: corsivo, grassetto, sottolineato. HTML
dispone di due tipi di stili di carattere: stili logici e stili fisici. I
primi sostanzialmente permettono di specificare quale sia la funzione
'logica'di una data sequenza di caratteri, mentre i secondi servono
piuttosto ad indicare come tale sequenza vada resa tipograficamente (o a
video). I principali marcatori HTML per gli stili logici sono i seguenti:
Stili logici
.strong...../strong.    Testo molto rilevante (viene reso di norma in
grassetto)
.em...../em.    Testo enfatizzato (viene reso di norma in corsivo)
.cite...../cite.    Testo citato (viene reso di norma in corsivo)
.address...../address.    Indirizzo (viene reso in corsivo o in grassetto
con un carattere piccolo, oppure impaginato a sinistra).
Ecco invece i marcatori pi noti per gli stili fisici:
Stili fisici
.b...../b.    Grassetto
.u...../u.    Sottolineato
.i...../i.    Italico o corsivo
.big...../big.    carattere pi grande
.small...../small.    carattere pi piccolo
Gli 'stili logici'sono considerati preferibili rispetto agli 'stili
fisici'perch sono indipendenti dalla 'materia scritta'e rispondono
dunque meglio alla filosofia di base propria di un linguaggio di marcatura
'logico'come SGML, che privilegia l'indipendenza dallo strumento di
visualizzazione usato. Ad esempio '.strong.Testo da evidenziare./strong.'
produce in genere un testo in grassetto, ma potrebbe produrre su browser
diversi un testo evidenziato in modi alternativi (ad esempio in grassetto
italico, o in reverse, o colorato in rosso...). Inoltre, in linea di
principio un'istruzione .strong. potrebbe essere usata anche per spiegare
ad un sintetizzatore vocale (es. per la lettura di testi a non vedenti) di
leggere le pagine utilizzando un volume pi alto o una determinata
inflessione di voce.
Gli stili possono essere sommati; ad esempio, per ottenere un testo
corsivo neretto si pu scrivere:
.b..i.Questa riga  in neretto e corsivo./i../b.
Una precisazione ulteriore va fatta per lo stile sottolineato. La
sottolineatura  in genere utilizzata dai browser per segnalare
visivamente il testo 'attivo'attraverso il quale, agendo col mouse, si
pu seguire un legame ipertestuale. Il testo attivo  marcato in genere
anche da un colore particolare, ma qualcuno potrebbe non avere il monitor
a colori. Di conseguenza  meglio evitare il sottolineato.
Le righe orizzontali
L'elemento .hr. ha lo scopo di inserire una linea orizzontale fra blocchi
di testo o immagini all'interno di una pagina Web. Si tratta di un
marcatore che non richiede tag di chiusura. Alcuni attributi applicabili
sono:
size="n"
dove n indica lo spessore della riga (es.: .hr
size="5".
noshade
serve a eliminare l'effetto 'ombra'della linea (es.:
.hr noshade.
width="n% | n"
regola la larghezza della riga, sia in percentuale,
relativamente alla larghezza dello schermo, sia in
assoluto, in pixel (es.: .hr width="50%". oppure .hr
width="250".
align="left | center | right"
allinea la riga rispettivamente a sinistra, al centro
e a destra, ad es.: .hr align="right" width="80%".
(gli effetti di questo attributo, ovviamente, sono
visibili solo se la linea ha una larghezza inferiore
al 100% dello schermo).
L'elemento .div.
Quando si vogliono riunire insieme pi elementi all'interno di un
contenitore strutturale unico, al fine di specificarne caratteristiche
comuni si pu usare l'elemento generico .div.. Molte delle sue funzioni
sono relative a tecniche avanzate di creazione delle pagine Web
(l'applicazioni di stili CSS o l'introduzione di effetti DHTML) che
esulano da questa trattatazione.
Una situazione semplice nella quale questo elemento pu risultare utile 
quando si desidera definire l'allineamento rispetto ai margini della
pagina di pi elementi contemporeneamente. A tale fine si pu usare
l'attributo 'align'. La sintassi  molto semplice, come mostra il seguente
esempio:
.div align="center".
.h1. ... ./h1.
.p. ... ./p.
...
./div.
In questo caso tutti gli elementi sarebbero centrati rispetto ai margini.
Le versioni meno recenti di alcuni browser non riconoscono il comando
.div.. In questo caso per centrare dei blocchi pu essere usato il tag
.center., che per non fa parte delle specifiche HTML ufficiali. Alcuni
impaginatori, per assicurare la massima compatibilit alle proprie pagine,
li inseriscono entrambi. Ad esempio:
.div align="center"..center..p.Prova./p../center../div.
Si noti che, nel nostro esempio, avremmo ottenuto lo stesso effetto con un
assai pi semplice .p align="center".Prova./p..
Sfondi e dimensionamento dei caratteri
Prima di vedere come si inseriscono tabelle, link ipertestuali e immagini,
esaminiamo alcune istruzioni che permettono di ottenere un controllo
maggiore sull'aspetto della pagina Web. Si tratta di comandi non
necessariamente riconosciuti da tutti i browser (ma sicuramente lo somno
dai principali e pi diffusi).
Gli attributi dell'elemento .body.
Il primo gruppo di istruzioni sono degli attributi che possono essere
aggiunti all'elemento .body. per specificare l'aspetto del testo e dello
sfondo in una pagina Web. Eccoli in sequenza:
background="file-grafico"
permette di indicare un file grafico (in formato GIF o
Jpeg) che viene inserito sullo sfondo della pagina; se
l'immagine  pi piccola rispetto alla pagina, essa
viene automaticamente duplicata e affiancata alle sue
copie come mattonelle su una parete
bgcolor=".colore RGB"
permette di assegnare un colore allo sfondo
text=".colore RGB"
indica il colore del testo all'interno della pagina
link=".colore RGB"
indica il colore dei link
vlink=".colore RGB"
indica il colore dei link gi attivati
alink=".colore RGB"
indica il colore dei link mentre si attivano con il
mouse
Ad esempio:
.body bgcolor=".FFFFFF" text=".990000" link="00FF00" vlink=".00AA00"
alink=".FFFF00".
fa s che lo sfondo sia bianco, il testo rosso scuro, i link (cio le
parole 'cliccabili') verdi, i link visited, cio gi visitati, verde scuro
e i link attivi (active link) gialli.
I primi due attributi sono mutuamente esclusivi: o si definisce un colore
o una immagine di sfondo. Nel secondo caso, ovviamente, dobbiamo
precedentemente provvedere a creare, oppure a prelevare da qualche
archivio, l'immagine usata per lo sfondo. Quando si ricorre a un simile
accorgimento, si consideri che la leggibilit del testo impaginato pu
diminuire, specie se i colori dell'immagine non contrastano
sufficientemente con quelli usati per i caratteri. Se dunque nella nostra
pagina vogliamo inserire una immagine di sfondo scrivereremo quanto segue:
.html.
.head.
.title.La prima pagina Web di Mario Rossi./title.
./head.
.body background="stucco.gif".
..
./body.
./html.
Ed ecco il risultato a video:
figura 156: Allo sfondo di colore uniforme si  sostituita una immagine
che vuole ricordare una parete stuccata
Per quanto riguarda la specificazione dei colori, di norma occorre
utilizzare l'indice RGB del colore che si intende applicare (si noti che
questa sintassi va utilizzata con tutti gli altri attributi deputati ad
indicare il colore di un elemento HTML). RGB sta per Red, Green, Blue, i
tre colori fondamentali che, come noto, miscelati opportunamente producono
tutti i colori dello spettro. Nella codifica RGB a ogni colore
fondamentale viene affidato un valore di intensit in una scala che va da
0 a 255. Per motivi strettamente informatici, la specificazione degli
indici RGB avviene in notazione numerica esadecimale (una notazione che ha
base 16, e utilizza le dieci cifre della notazione decimale pi le lettere
fino alla F, ovvero: 0 1 2 3 4 5 6 7 8 9 A B C D E F, dove B, ad esempio,
vale 11, e F vale 15).
Sembra complicato, ma vediamo come risolvere il problema nella pratica.
Immaginiamo di voler ottenere, per il nostro sfondo, un bianco. Tornando
indietro con la memoria ai nostri studi scolastici [130], ricorderemo che
il bianco si ottiene con la somma di tutti i colori dell'iride. Nel nostro
caso perci dovremo assegnare ai nostri 3 indici (red, green, blue) il
massimo valore, che nella notazione esadecimale si scrive FF (255), cio:
.body bgcolor=''.FFFFFF''. (FF per il rosso, FF per il verde, FF per il
blu). Volendo ottenere il nero, ovvero la sottrazione di tutti i colori,
assegneremo ai nostri tre indici il valore pi basso (zero, 00 in
esadecimale), quindi: .body bgcolor=''.000000''.. Ancora, sapendo che il
giallo  ottenuto con la somma di rosso e verde, scriveremo: .body
bgcolor=''.FFFF00''.. Volendo ottenere, infine, un giallo pi pallido,
aggiungeremo un po'di blu nella nostra tavolozza elettronica, passando da
00 a 77: .body bgcolor=''.FFFF77''..
Vi sembra ancora complicato? Niente paura, per fortuna ci sono due
scappatoie. La prima consiste nel ricorso a programmi appositamente
realizzati, come Color Manipulation Device, o a programmi di grafica come
Paint Shop Pro, Corel Photo-Paint o BME (per Macintosh), grazie ai quali 
sufficiente un click del mouse sul colore desiderato per vedersi
restituire il suo valore numerico. L'altra scappatoia consiste nel ricorso
al nome per esteso del colore, secondo questo elenco:
Nome del colore    Descrizione
Aqua    Verde acqua
Black    Nero
Blue    Blu elettrico
Fuchsia    Fucsia
Gray    Grigio
Green    Verde
Lime    Verde limone
Maroon    Bordeaux
Navy    Blu scuro
Olive    Verde oliva
Purple    Viola
Red    Rosso
Silver    Grigio chiaro
Teal    Grigio verde
White    Bianco
Yellow    Giallo
Ad esempio .body bgcolor=''yellow''., produrr uno sfondo giallo canarino.
Quest'ultima soluzione  decisamente la pi semplice, ma riduce a 16 il
numero di colori che possiamo adottare (contro i 16 milioni della
notazione esadecimale).
Dove trovare i programmi che abbiamo citato? Per prelevare una copia di
Color Manipulation Device (shareware Windows), la URL 
http://www.meat.com/software/cmd.html; per prelevare una copia di Paint
Shop Pro (shareware Windows): http://www.jasc.com; per ulteriori
informazioni su Corel Photo-Paint (commerciale Windows):
http://www.corel.com; per prelevare una copia di BME (freeware Macintosh):
http://www.softlogik.com. Se siete nell'imbarazzo della scelta,
consigliamo l'ottimo Paint Shop Pro.
Prima di chiudere questo paragrafo due consigli. In primo luogo, prestate
molta attenzione alla scelta dei colori: c' infatti il rischio di rendere
la pagina illeggibile. In secondo luogo evitate di scegliere per lo sfondo
immagini troppo 'pesanti'(che cio occupano troppa memoria): intasano
inutilmente la rete, e rallentano la visualizzazione della pagina.
Il dimensionamento dei caratteri
Il secondo gruppo di istruzioni che  utile analizzare permette di
controllare la dimensione dei caratteri. Abbiamo gi visto che gli
elementi per i titoli provocano un cambiamento di dimensione del font. Le
istruzioni che elenchiamo ora danno la possibilit di avere un controllo
molto pi raffinato della dimensione del carattere, e permettono di
ottenere effetti grafici molto particolari. Naturalmente questi marcatori
contravvengono a tutti i principi del markup funzionale... ma l'occhio
vuole la sua parte!
La dimensione del carattere in un documento HTML pu essere espressa in
termini assoluti o relativi. Nel primo caso (termini assoluti) si usa il
seguente marcatore:
.font size="n".testo./font.
Dove 'n' un numero che va da 1 a 7, ad es.: .font size="4".testo./font..
La dimensione normale del font  3. Dunque se si usano gli indici 1 o 2 si
ottiene un font ridotto rispetto al testo normale, mentre con 4, 5, 6 e 7
si ottiene un font ingrandito.
Per esprimere la dimensione del font in termini relativi si usa la
seguente marcatura:
.font size="+/- n".testo./font.
In questo caso n pu variare da -2 a +4. Miscelando queste varie direttive
 possibile ottenere effetti come questo:
.font size="+4".C./font..font size="+3".I./font..font
size="-1".A./font..font size="+2".O./font.
che producono:
CIAO
La dimensione normale, espressa in termini assoluti, pu essere modificata
con il marcatore .basefont size="n". inserito subito dopo l'istruzione
.body.. Questa istruzione ha effetto su tutto il documento, non ha bisogno
di tag di chiusura, e influisce sulle eventuali direttive di font
relative. Se, ad esempio, diamo .font size="+1". ad una parola in un
documento con basefont pari a 3 (cio lo standard), avremo dei caratteri
pi piccoli rispetto alla stessa parola, cui viene applicato il medesimo
tag .font size="+1"., ma con basefont pari a 4. Un po'di esercizi saranno
utili per familiarizzare con il meccanismo del dimensionamento relativo. 
infine facile verificare che, in seguito a un basefont, anche il range di
valori utili del dimensionamento relativo pu variare. Ad esempio, con
basefont uguale a 4, il range va da -3 a +3 (e non pi da -2 a +4).
Incorporare immagini
World Wide Web  un sistema di pubblicazione multimediale. Questo
significa che  possibile inserire in un documento informazioni non
testuali, anche se il grado di integrazione di queste informazioni varia
in base al loro tipo. Ad esempio, i browser Web possono gestire
direttamente solo alcuni formati di file grafici, come il formato GIF o il
formato JPEG.
L'elemento che svolge la funzione di includere una immagine all'interno di
un testo ha la seguente sintassi:
.img src="file-grafico".
Ad esempio:
.img src="tigre.gif".
Questo elemento non ha bisogno di un marcatore di chiusura poich non
marca una zona di testo, ma segnala solo la posizione in cui inserire una
immagine. Il valore dell'attributo 'src'pu essere o il pathname [131]
del file grafico, se questo  presente nello stesso computer del file
HTML, o la URL corrispondente a un file grafico contenuto in un qualsiasi
host di Internet (es.: .img
src="http://www.e-text.it/immagini/tigre.gif".).
Normalmente tutti i file che compongono una pagina Web risiedono nel disco
rigido della medesima macchina. Il pathname del file grafico va espresso
in relazione alla collocazione del file HTML. Se, ad esempio, entrambi
sono collocati nella stessa directory, baster specificare come valore di
'src'solo il nome del file, in questo modo: . img src=''tigre.gif''. (
consigliabile, specialmente per i meno esperti, fare in questo modo le
prime volte). Altrimenti si dovranno specificare anche i nomi delle
directory (cartelle nel mondo Macintosh) in modo relativo a quella in cui
si trova il file HTML, separati dalla barra (/) [132]. In questo modo
potremo realizzare siti Web pi ordinati, nei quali ad es. le immagini
siano conservate in directory separate.
Facciamo qualche esempio pratico per chiarirci le idee. Immaginiamo che il
file HTML sul quale stiamo lavorando (prova.htm) si trovi nella directory
'testi'e l'immagine da inserire (tigre.gif) in una directory 'immagini'
contenuta all'interno di 'testi', come dalla figura seguente:
figura 157: In una struttura come questa, la sintassi del comando .img.
contenuto in prova.htm  .img src="immagini/tigre.gif".
Il path in tal caso sar 'immagini/tigre.gif'. Ovvero abbiamo indicato al
browser di 'entrare'nella directory 'immagini'e di cercare l il file
grafico.
Immaginiamo ora una situazione diversa. Le directory 'testi'e 'immagini'
sono allo stesso livello gerarchico (cio 'immagini'non  pi contenuta
all'interno di 'testi'). Come dalla figura seguente:
figura 158: In una struttura come questa, la sintassi del comando .img.
contenuto in prova.htm  .img src="../immagini/tigre.gif".
Questa volta il path - partendo da 'prova.htm'- sar
'../immagini/tigre.gif'. Ovvero abbiamo prima indicato al browser di
uscire dalla directory 'testi'(con '../') e poi gli abbiamo detto di
'entrare'nella directory 'immagini'.
Ovviamente, nel caso in cui la struttura fosse pi ramificata, 
sufficiente da un lato fornire le ulteriori sub-directory (es.: .img
src="immagini/natura/felini/tigre.gif".), dall'altro risalire tante volte
quante necessario (es.: .img src="../immagini/tigre.gif".).
 anche possibile fornire dei pathname assoluti, iniziando il percorso
dalla directory di root. In tal caso, il path dell'esempio riportato in
figura 157 si scriverebbe .img src="/testi/immagini/tigre.gif"., e quello
dell'esempio riportato in figura 158 .img src="/immagini/tigre.gif".. Come
avrete notato, ci che ha reso assoluti i path  stato il carattere '/'
inserito all'inizio.
Di solito  meglio evitare i path assoluti, sia perch legano le nostre
pagine HTML in modo rigido al computer che le ospita, sia perch ci
costringono a ricrearne la struttura all'interno del nostro PC.
Per il nostro file 'prova.htm'adottiamo l'indirizzamento pi semplice,
collochiamo l'immagine 'tigre.gif'nella stessa directory di 'prova.htm'e
aggiungiamo perci la seguente riga:
.img src="tigre.gif".
Gli attributi di .img.
Il tag .img. dispone di svariati attributi. Vediamo i principali:
align="left | right | top | bottom | middle | ecc."
L'attributo 'align'influenza la disposizione
dell'immagine rispetto al testo che la precede e la
segue. Ad esempio 'align="left"'fa s che l'immagine
si collochi alla sinistra del testo. La figura che
segue aiuter a capire meglio la funzione
dell'attributo:
figura 159: Le funzioni dell'attributo align
Da notare che se si vuole centrare una immagine nello
schermo, non si deve ricorrere all'attributo 'align',
ma si deve inserirla in un capoverso centrato (es.: .p
align="center"..img src="tigre.gif"../p.) oppure in
una sezione centrata (es.: .div align="center"..img
src="tigre.gif"../div.).
width="n | n%" e height="n | n%"
Gli attributi 'width'e 'height'servono ad indicare
le dimensioni in pixel dell'immagine: ad esempio .img
src="tigre.gif" width="296" height="181".. Sono molto
utili perch consentono ai browser di ridurre
drasticamente il tempo che trascorre tra la
visualizzazione di tutte le immagini contenute nel
documento (che tipicamente richiedono pi tempo) e la
visualizzazione del testo. Occorre quindi cercare di
indicare sempre le dimensioni delle immagini; molti
programmi per la creazione di pagine HTML, quali Front
Page o Netscape Composer, sono fortunatamente in grado
di calcolare e inserire automaticamente queste cifre
per conto nostro.
Se agli attributi 'width'e 'height'vengono forniti
valori 'errati', ad esempio si scrive che una immagine
larga 200 pixel  invece larga 400, il browser allarga
l'immagine fino al valore indicato, come 'stirandola'.
Non  necessariamente un errore: ad esempio, un metodo
per ottenere delle righe colorate nello schermo
consiste nell'inserire una immagine di 2 pixel per
lato, del colore desiderato, e stirarla alla larghezza
opportuna.
A 'width'e 'height'possono essere forniti anche
valori percentuali. Ricollegandoci con l'esempio
precedente: .img src="quadratino. gif" width="50%"
height="2". fa s che l'immagine 'quadratino.gif'(un
minuscolo quadrato rosso di appena 2 pixel per lato)
si allarghi fino al 50% dello schermo, diventando, in
sostanza, una riga rossa.
alt="descrizione"
L'attributo 'alt'ha lo scopo di inserire una
descrizione dell'immagine (es.: .img src="tigre.gif"
alt="Una tigre".). Tale descrizione viene visualizzata
dai browser mentre l'immagine viene prelevata; si
sostituisce alle immagini se il browser ne ha
disabilitato il prelievo automatico e, infine, appare
sullo schermo ogni qualvolta il puntatore del mouse si
porta sull'immagine. L'attributo  molto utile anche
ai browser non grafici, come quelli per MS-DOS, o
quelli utilizzati dai non vedenti.
border="n"
Quando una immagine  associata a un altro documento
( cio diventata ipertestuale, vedremo in seguito
come si fa) appare circondata da una cornice.
L'attributo 'border'ne determina lo spessore in pixel
(es.: .img src="tigre.gif" border="2".).  possibile
fare in modo che tale cornice non venga visualizzata:
basta assegnare il valore zero all'attributo 'border'
(es.: .img src="tigre.gif" border="0".).
lowsrc=''file-grafico''
Questo attributo  particolarmente utile con le
immagini di grandi dimensioni, che possono richiedere
molti secondi o addirittura minuti per essere
prelevate. Con 'lowsrc'possiamo far s che il
browser, mentre preleva l'immagine principale, ne
visualizzi un'altra, con il medesimo soggetto, ma
molto pi veloce da scaricare perch meno definita o
con un minore numero di colori (es.: .img
src="tigre.gif" lowsrc="tigre-l.gif".).
hspace="n" e vspace="n"".
Abbiamo visto che con 'align'possiamo spostare l'immagine a sinistra e a
destra del testo, abbiamo anche visto per che il testo  immediatamente
adiacente all'immagine, in modo antiestetico. Con 'hspace'e 'vspace'
possiamo determinare la distanza in pixel tra l'immagine e il testo (es.:
.img src="tigre.gif" align="left" hspace="10" vspace="5). La distanza in
senso orizzontale  determinata da 'hspace'(horizontal space), quella in
senso verticale da 'vspace'(vertical space).
Inserire dei link
I link in una pagina Web sono aree attive del testo che ci permettono, con
un click del mouse, di saltare a un documento collegato. La prima cosa che
occorre decidere  dunque quale parte del testo si vuole rendere attiva, e
poi inserire il marcatore per definirla come tale. La sintassi  la
seguente:
.a href="url del documento di destinazione".testo attivo./a.
La 'a'del tag sta per anchor, e l'attributo 'href'sta per 'riferimento
ipertestuale', e contiene la URL completa del documento di destinazione.
Aggiungiamo nella nostra pagina 'prova.htm'un link ipertestuale,
modificando la riga contenente '.li.letteratura./li.'in:
.li.letteratura (visita la .a href="http://www.liberliber.it".biblioteca
telematica./a. di Liber Liber./li.
Da adesso in poi,  sufficiente un click su 'biblioteca telematica'per
collegarsi all'indirizzo Internet 'http://www.liberliber.it'. Con il
medesimo semplice meccanismo, possiamo inserire link ad altri documenti
presenti sul nostro stesso sito, e addirittura a punti specifici di un
documento. La specificazione del path per richiamare un documento
all'interno del nostro stesso sito segue le stesse norme viste per le
immagini. Quindi:
.a href="mario.htm".testo cliccabile./a.
si usa quando il file 'mario.htm'si trova nella stessa
directory nella quale  memorizzato il file che contiene il link
('prova.htm'nel nostro caso).
.a href="biografia/mario.htm".testo cliccabile./a.
si usa quando il file 'mario.htm'si trova in una sub-directory
('biografia'nel nostro caso) di 'prova.htm'.
.a href="../mario.htm".testo cliccabile./a.
si usa se il file 'mario.htm'si trova nella directory superiore
rispetto a quella che contiene 'prova.htm'.
.a href="../biografia/mario.htm".testo cliccabile./a.
si usa se il file 'mario.htm'si trova in una directory
('biografia'nel nostro caso) che  gerarchicamente allo stesso
livello di quella che contiene 'prova.htm'.
Per inserire il link a un punto specifico di un altro documento (o anche a
un punto specifico del documento che si sta leggendo)  necessario
ricorrere preventivamente a un altro attributo dell'elemento .a., cio
'name="testo"'(es.: .a name="start"../a.). La funzione dell'attributo
'name' quella di assegnare un nome a una parte del documento, cos che
in seguito vi si possa far riferimento. Facciamo subito un esempio
pratico, e assegnamo il nome 'start'alla parte iniziale del nostro file
'prova.htm':
.html.
.head.
.title.La prima pagina Web di Mario Rossi./title.
./head.
.body bgcolor=".FFFFFF" text=".990000".
.a name="start"../a.
.h1 align="center".Home page di Mario Rossi./h1.
.p.Questa &egrave; la mia prima pagina in HTML../p.
ecc.
Ora  possibile riferirsi alle prime righe del file 'prova.htm'con il
nome 'start'. La sintassi per riferirsi alla parte di testo chiamata
'start' la seguente: 'URL del file che contiene il riferimento interno'
+ '.'+ 'nome assegnato al riferimento interno'. Ad esempio:
.a href="prova.htm.start".testo cliccabile./a.
Il meccanismo  lo stesso se la URL si riferisce a un altro sito. Ad
esempio:
.a href="http://www.liberliber.it/
support/index.html.iscrizione".testo cliccabile./a.
Oltre che definire link tra documenti di World Wide Web, l'elemento .a.
pu essere usato anche per inserire una URL di tipo 'mailto'che
permetter ai futuri visitatori della nostra pagina di inviarci dei
messaggi di posta elettronica. Questa la sintassi: 'mailto:'+ 'indirizzo
e-mail'. Ad esempio:
.a href="mailto:rossi,liberliber.it".Fai click qui per scrivermi./a.
Prima di proseguire, diamo un'occhiata al nostro file 'prova.htm'cos da
ripassare alcuni degli ultimi comandi visti:
.html.
.head.
.title.La prima pagina Web di Mario Rossi./title.
./head.
.body bgcolor=".FFFFFF" text=".990000".
.a name="start"../a.
.h1 align="center".Home page di Mario Rossi./h1.
.p.Questa &egrave; la mia prima pagina in HTML../p.
.h3.Il mio tempo libero./h3.
.ul.
.li.letteratura (visita la .a
href="http://www.liberliber.it".biblioteca telematica./a. di Liber
Liber)./li.
.li.cinema (qui sotto la classifica dei miei film preferiti)./li.
.ol.
.li.Blade Runner./li.
.li.Oltre il giardino./li.
.li.Delicatessen./li.
./ol.
.li.sport./li.
./ul.
.h3.Il lavoro./h3.
.dl.
.dt.Scuola di Giornalismo di Perugia./dt.
.dd.insegno l'applicazione delle nuove tecnologie alla professione di
giornalista./dd.
.dt.Laterza./dt.
.dd.in collaborazione con alcuni colleghi ho scritto un manuale su
Internet./dd.
.dt.RAI./dt.
.dd.ho progettato il sistema informativo della trasmissione
Media/Mente./dd.
./dl.
.hr width="80%" align="center" noshade.
.p..img src="tigre.gif" width="296" height="181" alt="Foto di una tigre"
hspace="10" vspace="5" align="left"..font size="+1" color=".000000".Te
qualsiasi, testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi
testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo
qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi
testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo
qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi
testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo
qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi
testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi../font../p.
.p align="center"..a href="prova.htm.start".Fai click qui per tornare in
cima al documento../a../p.
.p align="center"..a href="mailto:rossi,liberliber.it".Fai click qui per
scrivermi../a../p.
./body.
./html.
Ecco il risultato a video delle ultime righe in HTML:
figura 160: Un click sulla penultima riga ('Fai click qui per tornare in
cima al documento') riposta a inizio pagina, un click sull'ultima riga
('Fai click qui per scrivermi') consente invece l'invio di una e-mail
all'indirizzo specificato
Le tabelle
Il linguaggio HTML provvede una serie di elementi che servono ad inserire
tabelle all'interno dei documenti. Oltre a servire in tutti i normali casi
in  necessario presentare dei dati in formato tabulare, le tabelle HTML
sono usate anche per la composizione di gabbie grafiche all'interno delle
quali disporre testo e grafica di una pagina Web. Grazie alle tabelle,
infatti, il testo si pu organizzare su pi colonne, si possono creare
zone con sfondi di colore diverso, e molto altro.
Una tabella viene codificata mediante l'elemento .table., ed  composta da
una serie di righe, segnalate mediante l'elemento .tr., a loro volto
articolate in celle, il cui elemento  .td.. Per capire meglio il
meccanismo, creiamo una semplice tabella di una sola riga e due colonne.
Ecco la sintassi:
.table.
.tr..td.prima cella./td..td.seconda cella./td../tr.
./table.
Ed ecco il risultato a video:
prima cella
seconda cella
Per vedere meglio come funziona, aggiungiamo subito un attributo, cos che
il bordo della tabella diventi visibile, cambiando .table. in .table
border="1".. Ecco il risultato a video:
prima cella
seconda cella
Vediamo ora come aggiungere una seconda riga:
.table border="1".
.tr..td.prima cella./td..td.seconda cella./td../tr.
.tr..td.prima cella della seconda riga./td.
.td.seconda cella della seconda riga./td../tr.
./table.
Queste righe di codice vengono visualizzate nel modo seguente:
prima cella
seconda cella
prima cella della seconda riga    seconda cella della seconda riga
Notiamo alcune cose. Innanzitutto il testo appare allineato al bordo
sinistro delle singole celle; inoltre queste ultime, senza la necessit di
ulteriori istruzioni, si sono automaticamente allargate cos da contenere
il testo senza andare a capo.
Vediamo nel dettaglio i singoli tag utilizzati, e poi i numerosi attributi
applicabili:
.table.
ogni tabella inizia con .table. e, come ormai dovrebbe apparirci
intuitivo, si chiude con ./table.. Il tag dispone dei seguenti
attributi:
border="n" (es.: .table border="1".)
come abbiamo gi potuto verificare, rende visibile il
bordo della tabella. Il valore n  in pixel.
cellpadding="n" (es.: .table cellpadding="10".)
 lo spazio tra il bordo della tabella e il testo
contenuto all'interno delle celle.
cellspacing="n" (es.: .table cellspacing="5".)
 la distanza tra una cella e un'altra.
width="n | n%" (es.: .table width="100%". oppure .table
width="250".)
la larghezza della tabella relativamente allo schermo,
espressa con i valori percentuali, oppure in assoluto,
in pixel.
height="n | n%" (es.: .table height="80%". oppure .table
height="100".)
come width, ma relativamente all'altezza della tabella.
bgcolor=".rrggbb" (es.: .table bgcolor=".FF0000". oppure . table
bgcolor="red".)
determina il colore di sfondo della tabella. La
sintassi di rrggbb  la medesima vista per attribuire
colori allo sfondo del documento o ai caratteri. In
alternativa ai valori esadecimali si possono anche qui
usare i nomi dei colori, in inglese (red, green,
ecc.). Questo tag  riconosciuto solo dalle versioni
pi recenti dei browser.
.tr.
 l'abbreviazione di table row, e determina l'inizio di una riga
di una tabella. Si chiude come al solito con ./tr.. Questi i due
attributi applicabili:
align="left | center | right" (es.: .tr align="right".)
left, center e right (rispettivamente: sinistra,
centro, destra) indicano l'allineamento orizzontale di
tutte le celle presenti nella riga.
valign="top | middle | bottom" (es.: .tr valign="bottom".)
top, middle e bottom (rispettivamente: in alto, al
centro, in basso) riguardano l'allineamento verticale
di tutte le celle presenti nella riga.
.td.
si pu usare solo all'interno di .tr../tr. e determina l'inizio
e la fine di una singola cella. Anche questo tag dispone di
alcuni attributi. Eccoli:
align="left | center | right" (es.: .td align="center".)
analogamente a quanto avviene per .tr., left, center e
right indicano l'allineamento orizzontale, ma non di
tutte le celle presenti nella riga, bens delle sole
celle in cui sono presenti.
valign="top | middle | bottom" (es.: .td valign="top".)
top, middle e bottom riguardano l'allineamento
verticale della singola cella.
nowrap (es.: .td nowrap.)
fa s che il testo contenuto nella cella non vada a
capo (pu quindi accadere che la cella diventi pi
larga dello schermo).
width="n | n%" (es.: .td width="50%". oppure .td width= "80".)
determina la larghezza della singola cella. Se ad
esempio in una tabella con due celle si vuole che
abbiano entrambe la stessa larghezza, si potr
scrivere in ognuna .td width="50%".. Se le celle sono
quattro scriveremo .td width="25%"., e cos via.
bgcolor=".rrggbb" (es.: . table bgcolor=".FF0000". oppure .
table bgcolor="red".)
questo attributo lo abbiamo gi visto applicato
all'intera tabella. Inserendolo all'interno di un .td.
facciamo in modo che cambi solo il colore di sfondo
della cella che lo contiene. Questo attributo 
riconosciuto solo dalle versioni pi recenti dei
browser.
rowspan="n" (es.: .td rowspan="2".)
fa s che una cella risulti alta n righe, dove n  un
qualsiasi numero intero (es.: 2). Per maggiore
chiarezza, vediamo una tabella in cui una cella ha
l'attributo 'rowspan="2"':
.table border="1".
.tr..td rowspan="2".prima cella, alta quanto
due./td..td.seconda cella./td../tr.
.tr..td.seconda riga, con una sola cella./td../tr.
./table.
Eccone l'aspetto a video:
prima cella, alta quanto due
seconda cella
seconda riga, con una sola cella
Da notare che nella seconda riga  stata creata una
sola cella. Questo perch la prima cella, della prima
riga,  alta quanto due celle, ed ha reso una
eventuale seconda cella della seconda riga del tutto
inutile!  facile confondersi le idee; prima di
proseguire, se non vi  tutto chiaro, fate qualche
altra prova (ad esempio, provando a costruire una
tabella con una cella alta quanto tre righe [133]).
colspan="n" (es.: .td colspan="2".)
fa s che una cella risulti larga n colonne, dove n 
un qualsiasi numero intero (es.: 2). Per maggiore
chiarezza, vediamo anche nel caso di 'colspan'un
esempio concreto:
.table border="1".
.tr..td colspan="2".prima cella, larga quanto
due./td../tr.
.tr..td.seconda riga, prima cella./td..td.seconda
riga, seconda cella./td../tr.
./table.
A video, queste righe di codice produrranno il
seguente risultato:
prima cella, larga quanto due
seconda riga, prima cella
seconda riga, seconda cella
Come vedete, nella prima riga  stata creata una sola
cella, larga quanto le due celle della seconda riga,
prese insieme. Se non siamo riusciti a confondervi
abbastanza le idee, provate a creare una tabella che
produca a video un risultato di questo tipo [134]...
prima cella, alta due righe
prima riga, seconda cella (centrata)
seconda riga, prima cella
seconda riga, seconda cella
Ora che abbiamo visto come funzionano le tabelle, sfruttiamole per
disporre diversamente le ultime due righe della nostra pagina 'prova.htm'.
Ecco, a titolo di ricapitolazione, il file 'prova.htm'per intero,
comprese le ultime modifiche:
.html.
.head.
.title.La prima pagina Web di Mario Rossi./title.
./head.
.body bgcolor=".FFFFFF" text=".990000".
.a name="start"../a.
.h1 align="center".Home page di Mario Rossi./h1.
.p.Questa &egrave; la mia prima pagina in HTML../p.
.h3.Il mio tempo libero./h3.
.ul.
.li.letteratura (visita la .a href="http://www.liberliber.it".biblioteca
telematica./a. di Liber Liber)./li.
.li.cinema (qui sotto la classifica dei miei film preferiti)./li.
.ol.
.li.Blade Runner./li.
.li.Oltre il giardino./li.
.li.Delicatessen./li.
./ol.
.li.sport./li.
./ul.
.h3.Il lavoro./h3.
.dl.
.dt.Scuola di Giornalismo di Perugia./dt.
.dd.insegno l'applicazione delle nuove tecnologie alla professione di
giornalista./dd.
.dt.Laterza./dt.
.dd.in collaborazione con alcuni colleghi ho scritto un manuale su
Internet./dd.
.dt.RAI./dt.
.dd.ho progettato il sistema informativo della trasmissione
Media/Mente./dd.
./dl.
.hr width="80%" align="center" noshade.
.p..img src="tigre.gif" width="296" height="181" alt="Foto di una tigre"
hspace="10" vspace="5" align="left"..font size="+1" color=".000000".Te
qualsiasi, testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi
testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo
qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi
testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo
qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi
testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo
qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi
testo qualsiasi testo qualsiasi testo qualsiasi testo qualsiasi../font../p.
.table border="0" width="100%".
.tr.
.td align="left"..a href="prova.htm.start".Fai click qui per tornare in
cima al documento./a../td.
.td align="right"..a href="mailto:rossi,liberliber.it".Fai click qui per
scrivermi./a../td.
./tr.
./table.
./body.
./html.
Alcuni elementi secondari
Come gi detto, queste poche pagine sull'HTML non hanno la pretesa di
essere esaustive; ci sono molti elementi e attributi di HTML che non
abbiamo esaminato, per non parlare di tecnologie avanzate come i fogli di
stile, la programmazione con i linguaggi di script, o il Dynamic HTML.
Di seguito elenchiamo brevemente alcuni altri elementi secondari di HTML,
rimandandovi per gli altri alla letteratura specifica, parte della quale
anche disponibile on-line [135].
Elementi secondari per il formato dei caratteri
.sub.testo./sub.
utilizzato per marcare dei caratteri come pedici. Ad esempio,
'H.sub.2./sub.O'appare cos: H2O
.sup.testo./sup.
utilizzato per marcare dei caratteri come apici. Ad esempio,
'12.sup.3./sup.'appare cos: 123
.tt.testo./tt.
da typewriter, visualizza i caratteri a spaziatura fissa
Elementi secondari per i blocchi di testo
.pre.testo./pre.
da preformatted, serve a rendere il testo a video cos come 
scritto, e con un font a spaziatura fissa: inoltre se
all'interno del testo preformatted c' un codice di ritorno a
capo, questo  reso anche a video (contrariamente a quanto
avviene di solito in HTML, dove  necessario un tag .p. oppure
.br. per ottenere un ritorno a capo). Il comando 'pre'ha un
attributo:
width="c" (es.: .pre width="80".)
dove c indica il numero di caratteri oltre il quale il
browser deve inserire comunque un codice di ritorno a
capo
.blockquote.testo./blockquote.
indica le citazioni, rendendole graficamente come capoversi con
un rientro sia a sinistra, sia a destra (di solito il tag 
utilizzato pi in virt del suo effetto a video che del suo
significato)
.nobr.testo./nobr.
disattiva l'a capo automatico dei browser
.wbr.
indica un 'a capo'all'interno del testo marcato con .nobr.
Il meta-elemento .meta.
Un ultimo elemento cui facciamo breve cenno  .meta.. Si tratta di un
elemento che va inserito nell'intestazione (.head.) di un documento e
serve ad inserire nel documento meta-informazioni e istruzioni di vario
tipo, che in genere riguardano l'intero documento, e che non vengono
visualizzate direttamente dal browser. Di norma riguarda applicazioni
piuttosto avanzate di HTML. Facciamo solo un esempio: l'inclusione di
informazioni che riguardano l'autore del documento stesso. La sintassi da
usare  la seguente:
.meta name="AUTHOR" content="nome e cognome".
Ad esempio:
.meta name="AUTHOR" content="Mario Rossi".
Il risultato del tag non appare a video (serve semplicemente a indicare
l'autore della pagina Web), ma pu essere ad esempio utilizzato dal
browser o dai motori di ricerca, al fine di estrarre informazioni relative
all'autore del documento.
Gli editor HTML
Sebbene un documento HTML possa essere realizzato con un semplice editor
di testo, usare degli strumenti pi specifici pu risultare in un notevole
risparmio di tempo e fatica. E di tali strumenti, oggi, ne esistono molti
e molto avanzati. In generale possiamo distinguere due categorie di editor
HTML: editor orientati al codice, ed editor WYSIWYG (What You See Is What
You Get, cio 'ci che vedi  ci che ottieni').
Gli editor 'orientati al codice'permettono di evitare la digitazione di
ogni singolo marcatore grazie a pulsanti o menu a tendina, ma non si
discostano molto come impostazione di lavoro dalla scrittura manuale dei
vari tag. Il testo appare misto ai marcatori HTML, ed ha perci un aspetto
poco familiare per il neofita. Tuttavia questi strumenti sono preferiti
dai pi esperti (specialmente per correggere o raffinare un documento)
perch consentono un controllo minuto sul contenuto della pagina. Con
simili editor, una volta immesso il tag, eventuali correzioni vanno spesso
fatte a mano. Ciononostante, non v' dubbio che programmi di questo tipo
facilitino notevolmente la realizzazione di pagine Web, specialmente per i
pi esperti.
Grazie agli editor HTML con modalit WYSIWYG, invece, si possono
addirittura creare pagine HTML senza conoscerne la sintassi. Infatti il
codice resta invisibile all'utente che interviene sul documento come se
lavorasse con un moderno word processor. I migliori editor WYSIWYG
consentono anche un intervento diretto sul codice.
Forniamo qui di seguito un elenco di alcuni programmi che, nelle due
categorie appena ricordate, si segnalano per potenza e facilit d'uso.
Alcuni di questi editor sono shareware; vi ricordiamo che lo shareware pu
sopravvivere come valida (ed economica) alternativa alla distribuzione
commerciale solo se si rispetta il patto morale di inviare la quota di
registrazione (purtroppo, in Italia, pochissimi si registrano).
Netscape Composer
Uno dei primi editor WYSIWYG  stato quello incluso in Netscape sin dal
1996. La versione pi recente di questo programma, chiamato Netscape
Composer,  inclusa nella suite di Netscape Communicator
(http://www.netscape.com), ed  dunque disponibile assieme a tale
programma nel CD-ROM allegato a questo manuale (programma su CD). Dal
punto di vista delle funzionalit offerte, Netscape Composer non ha la
pretesa di gestire siti complessi, ma ha dalla sua parte il facile
utilizzo e l'essere fornito gratuitamente.
Microsoft FrontPage 2000
Si tratta probabilmente di uno degli editor WYSIWYG pi evoluti e potenti
attualmente disponibili. La versione 2000 del programma, per Windows
95/98/NT e, in versione 1.0, per Macintosh,  stata commercializzata dalla
Microsoft a met del 1999. Il programma  in grado di gestire frame e
form, CSS e Dynamic HTML. Importa documenti di Microsoft Office (Word,
Excel, ecc.) e altri tipi di file (testi in RTF, ASCII, immagini, ecc.) in
modo abbastanza efficiente. Consente di lavorare sia in modalit WYSIWYG,
sia in modalit HTML. Volendo, con questa ultima versione di FrontPage 
possibile disabilitare il controllo automatico della sintassi HTML, cos
da consentire senza problemi l'introduzione di istruzioni non standard
(come i comandi ASP, le procedure JavaScript, ecc.).
Molto utile alla gestione di grandi siti Internet la possibilit di
rinominare un file, o una cartella, e di vedere modificarsi
automaticamente tutte le pagine che facevano riferimento a quel file (o a
quella cartella) dal vecchio nome al nuovo. Una procedura guidata aiuta la
pubblicazione delle pagine, sia verso un comune server Internet, sia verso
un server compatibile con le cosiddette FrontPage extensions. In
quest'ultimo caso  possibile creare molto facilmente pagine con un motore
di ricerca interno;  possibile inserire contatori degli accessi e,
infine,  possibile collegare le proprie pagine HTML a database di vario
tipo (Access, SQL, ecc.). Quest'ultima funzionalit, che comunque richiede
una certa esperienza,  di solito molto apprezzata quando si devono
allestire siti Internet molto complessi, con archivi, cataloghi, listini e
quant'altro.
FrontPage 2000  uno dei pochi editor HTML disponibili anche in lingua
italiana. Apprezzabile la condivisione degli strumenti di correzione di
Office; in questo modo gli utenti della suite Microsoft potranno
effettuare il controllo degli errori di battitura con le stesse modalit
apprese con Word e con gli altri programmi Office.
figura 161: FrontPage 2000
Si deve dire che la versione di FrontPage 2000 disponibile nel momento in
cui scriviamo (estate 1999), soffre di alcuni bug, fortunatamente
abbastanza lievi (ad esempio, il tag .center. e le URL delle immagini
all'interno delle tabelle non sempre vengono gestiti in modo corretto).
Con ogni probabilit, come  gi successo in passato in simili
circostanze, la Microsoft distribuir gratuitamente via Internet un
service pack destinato a correggere questi errori.
Il sito di riferimento per ulteriori informazioni :
http://www.microsoft.com/italy/frontpage/.  utile segnalare che del
programma  disponibile una versione gratuita (con diverse funzionalit in
meno, ovviamente), denominata FrontPage Express, che viene distribuita
insieme al browser Microsoft Internet Explorer, e che  dunque
disponibile, con quest'ultimo, all'interno del nostro CD (programma su CD).
Adobe GoLive
Erede, se cos si pu dire, di PageMill, il cui sviluppo  stato
abbandonato, GoLive  la risposta Adobe a FrontPage. Il programma nasce
per piattaforma Macintosh, ma  disponibile anche per Windows. Si giova di
una ottima interfaccia utente e di comode ed evolute soluzioni per
l'inserimento di immagini e link.
Analogamente a FrontPage, non si limita a fornire gli strumenti per la
creazione delle pagine HTML, ma consente una vera e propria 'gestione del
sito Internet', verificando la correttezza dei collegamenti ipertestuali,
fornendo procedure guidate per la pubblicazione e molto altro. Come
FrontPage  molto attento alle tecnologie Microsoft (supporta bene i
comandi ASP, include un editor VisualBasic, ecc.), cos GoLive spiana la
strada agli utenti Mac (supportando in modo nativo QuickTime, consentendo
l'uso - su server specifici - degli Apple WebObjects, ecc.).
Per ulteriori informazioni, fare riferimento al sito Internet:
http://www.adobe.com/prodindex/golive/main.html
Macromedia Dreamweaver
Macromedia Dreamweaver, a differenza dei due programmi precedenti (con cui
si misura anche sul piano del mercato) non  dotato di funzionalit
particolarmente potenti per la gestione dei siti Internet. Tuttavia come
editor di documenti HTML  forse il migliore, e consente di creare pagine
assai spettacolari. La gestione della grafica  sofisticatissima e
supporta in modo nativo le animazioni vettoriali e interattive create con
Macromedia Flash e Macromedia Shockwave. Consente l'inserimento di
animazioni in Dynamic HTML, realizzando, se si vuole, delle copie delle
pagine per i browser meno recenti che non le supportano. Grazie ai
'modelli',  possibile impaginare tutta una serie di pagine in base a
determinate scelte, e quindi modificarle in blocco semplicemente
intervenendo sul modello di riferimento.
Il sito Internet dove cercare altre informazioni 
http://www.macromedia.com/software/dreamweaver/.
Altri editor HTML
Fortunatamente il panorama dei programmi dedicati alla creazione di pagine
HTML  molto vasto, cos da coprire tutte le esigenze. Per un elenco dei
prodotti disponibili, costantemente aggiornato, fate riferimento a:
http://dir.yahoo.com/Computers_and_
Internet/Software/Internet/World_Wide_Web/HTML_Editors/. Qui di seguito,
citiamo alcuni dei pi noti.
FlexED
FlexED  un prodotto shareware, disponibile sia per Windows 3.x sia per
Windows 95/98/NT. Si tratta di un editor orientato al codice, che tuttavia
include un piccolo browser interno per delle veloci anteprime (
naturalmente possibile ottenere delle anteprime anche con browser esterni,
come Netscape o Internet Explorer). La software house che ha realizzato il
prodotto rilascia periodicamente nuove versioni, con migliorie e
ampliamenti.  indicato anche a chi possiede un computer con prestazioni
non elevate, grazie al fatto che il codice  stato mantenuto il pi
compatto possibile (circa 1 Mb), ciononostante  in grado di gestire e
creare comodamente anche pagine complesse, con il supporto nativo di
funzioni avanzate. Il sito Internet per ulteriori informazioni e per il
prelievo del programma : http://nt.infoflex.com.au/flexed/flexed.htm.
BBedit
Bbedit  il text editor pi usato in ambiente Macintosh.  completamente
programmabile ed ha specifici comandi per inserire marcatori HTML. La URL
per il download (si tratta di un software shareware) e per ulteriori
informazioni  http://www.barebones.com.
HotDog
HotDog  un programma shareware, disponibile per Windows 3.x e 95/98/NT.
Vale la pena citarlo perch  stato uno dei primi editor HTML ad avere
funzioni avanzate, ed  stato perci adottato da molti impaginatori
esperti. La sua URL : http://www.sausage.com.
HotMetal Pro
Anche questo editor viene citato per meriti 'speciali': fa infatti un
accurato controllo della sintassi HTML, segnalando tutte le istruzioni che
non sono aderenti alle direttive standard. Anche per questo motivo,
HotMetal Pro  l'editor d'elezione di molti 'puristi'dell'HTML. Inoltre 
disponibile per Unix, Windows 3.x, Windows 95/98/NT e Macintosh.
Shareware. Il sito Internet di riferimento : http://www.sq.com/ (il sito
ha un mirror in Europa: http://www.softquad.co.uk/).
AsWedit
 un ottimo editor freeware (cio gratuito) per i sistemi X-Window. Gira
perfettamente anche su Linux, il sistema Unix per computer con processori
Intel distribuito gratuitamente su Internet. Appartiene alla categoria
degli editor orientati al codice.
Note
[125] HTML, a sua volta  una particolare applicazione di un potente
metalinguaggio orientato alla descrizione di complesse strutture
documentali, lo Standard Generalized Markup Language, di cui ci siamo
occupati nel capitolo 'Come funziona World Wide Web'.
[126] All'indirizzo http://www.liberliber.it/progetti/html40/ 
disponibile una traduzione in italiano delle specifiche relative all'HTML
4.0.
[127] L'indirizzo preciso 
http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/.
[128] Alcuni editor pi recenti, come FrontPage, invece di ricorrere alle
entit carattere, in alcuni casi memorizzano le lettere accentate e i
caratteri speciali nel set denominato ISO Latin 1, oppure ISO 8859-1,
ovvero nel set di caratteri attualmente pi diffuso. Per dichiarare al
browser questa scelta, gli editor di questo tipo aggiungono la seguente
istruzione nelle pagine HTML: .meta http-equiv=''Content-Type''
content=''text/html; charset=iso-8859-1''..
[129] I comandi possono variare a seconda della versione e del programma
in nostro possesso. Di solito il comando  semplicemente 'open file'
oppure 'apri documento'.
[130] Ricordate il disco di Newton? Si tratta di un disco con sopra
dipinti in proporzioni uguali tutti i colori dell'iride. Facendo ruotare
il disco, i colori spariscono, si "fondono" per la persistenza sulla
nostra retina, e costituiscono il bianco.
[131] Il nome del file, preceduto dal percorso completo per arrivarvi,
'navigando'all'interno delle directory del disco rigido.
[132] I lettori che sono abituati ai file system DOS o Unix non avranno
difficolt a capire come digitare i pathname. Gli utenti DOS per dovranno
fare attenzione ad usare la barra in avanti (/), e non la classica barra
indietro (\) richiesta dal DOS.
[133] In tal caso dovete costruire una tabella di 3 righe. La prima riga
dovr contenere due celle - di cui una alta quanto 3 -, e la seconda e la
terza riga, invece, dovranno contenerne una sola.
[134] In realt  meno complicato di quello che sembra. La prima riga
contiene due celle. La prima di queste due celle ha l'attributo
rowspan=''2'', la seconda ha gli attributi colspan=''2''e
align=''center''. Anche nella seconda riga ci sono due celle, e senza
nessun attributo particolare.
[135] Due indirizzi utili sono:
http://werbach.com/barebones/it_barebone.html, un completo elenco di
comandi HTML con relative - sintetiche - spiegazioni in italiano (le
spiegazioni di solito non sono pi lunghe di una riga). Ideale per chi gi
conosce i fondamenti dell'HTML, ma ha bisogno di un efficiente memorandum.
E poi http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html, una
buona guida all'HTML scritta da Marc Andreessen, in inglese.
... pagina precedente
pagina successiva ...
