Slacky.eu - Contributi utente [it]

XHTML 1.1, CSS e Accessibilità da zero

2007-01-03T11:04:16Z

Ninobi: /* Tabelle o non tabelle, questo è il dilemma */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS''' (''Cascade Style Sheets''). In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento ipertestuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, inferiore e sinistro; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div id="barra">
<p class="floatleft pulsanti">::<a href="index.html">home</a></p>
<p class="floatleft pulsanti">pagina 1</p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
</pre>
E, fin qui, tranne per il fatto che, nei menu, ad essere linkata è la home, è praticamente tutto uguale. Poi...
<pre>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="altrostile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quello <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

=== Le briciole di pane ===
Altro accorgimento, sacrosanto anche nell'ottica della cosiddetta ''usabilità'', è quello di inserire nelle pagine le ''briciole di pane'' (è un evidente richiamo a Pollicino...), ovvero l'''itinerario'' dei passaggi che abbiamo fatto, con i link a ritroso. Sarebbe qualcosa del genere, insomma:
<pre>
<a href="index.html">home</a> &rarr; <a href="pagina.html">pagina</a> &rarr; sezione etc.
</pre>

che visualizzerebbe: <span style="font-weight:bold;color:#00f">home</span> → <span style="font-weight:bold;color:#00f">pagina</span> → sezione.

Esistono anche degli script per gestirle. Momentaneamente noi le inseriremo staticamente.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url (se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]

XHTML 1.1, CSS e Accessibilità da zero

2006-09-30T05:36:00Z

Ninobi: /* Primi passi */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS''' (''Cascade Style Sheets''). In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento iper testuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, inferiore e sinistro; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div id="barra">
<p class="floatleft pulsanti">::<a href="index.html">home</a></p>
<p class="floatleft pulsanti">pagina 1</p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
</pre>
E, fin qui, tranne per il fatto che, nei menu, ad essere linkata è la home, è praticamente tutto uguale. Poi...
<pre>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="altrostile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quello <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

=== Le briciole di pane ===
Altro accorgimento, sacrosanto anche nell'ottica della cosiddetta ''usabilità'', è quello di inserire nelle pagine le ''briciole di pane'' (è un evidente richiamo a Pollicino...), ovvero l'''itinerario'' dei passaggi che abbiamo fatto, con i link a ritroso. Sarebbe qualcosa del genere, insomma:
<pre>
<a href="index.html">home</a> &rarr; <a href="pagina.html">pagina</a> &rarr; sezione etc.
</pre>

che visualizzerebbe: <span style="font-weight:bold;color:#00f">home</span> → <span style="font-weight:bold;color:#00f">pagina</span> → sezione.

Esistono anche degli script per gestirle. Momentaneamente noi le inseriremo staticamente.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url (se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]

XHTML 1.1, CSS e Accessibilità da zero

2006-09-29T14:30:12Z

Ninobi: /* Altezza dei blocchi */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS'''. In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento iper testuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, inferiore e sinistro; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div id="barra">
<p class="floatleft pulsanti">::<a href="index.html">home</a></p>
<p class="floatleft pulsanti">pagina 1</p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
</pre>
E, fin qui, tranne per il fatto che, nei menu, ad essere linkata è la home, è praticamente tutto uguale. Poi...
<pre>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="altrostile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quello <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

=== Le briciole di pane ===
Altro accorgimento, sacrosanto anche nell'ottica della cosiddetta ''usabilità'', è quello di inserire nelle pagine le ''briciole di pane'' (è un evidente richiamo a Pollicino...), ovvero l'''itinerario'' dei passaggi che abbiamo fatto, con i link a ritroso. Sarebbe qualcosa del genere, insomma:
<pre>
<a href="index.html">home</a> &rarr; <a href="pagina.html">pagina</a> &rarr; sezione etc.
</pre>

che visualizzerebbe: <span style="font-weight:bold;color:#00f">home</span> → <span style="font-weight:bold;color:#00f">pagina</span> → sezione.

Esistono anche degli script per gestirle. Momentaneamente noi le inseriremo staticamente.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url (se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]

XHTML 1.1, CSS e Accessibilità da zero

2006-09-29T14:29:24Z

Ninobi: /* Pagina 1 */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS'''. In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento iper testuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, sinistro e inferiore; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div id="barra">
<p class="floatleft pulsanti">::<a href="index.html">home</a></p>
<p class="floatleft pulsanti">pagina 1</p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
</pre>
E, fin qui, tranne per il fatto che, nei menu, ad essere linkata è la home, è praticamente tutto uguale. Poi...
<pre>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="altrostile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quello <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

=== Le briciole di pane ===
Altro accorgimento, sacrosanto anche nell'ottica della cosiddetta ''usabilità'', è quello di inserire nelle pagine le ''briciole di pane'' (è un evidente richiamo a Pollicino...), ovvero l'''itinerario'' dei passaggi che abbiamo fatto, con i link a ritroso. Sarebbe qualcosa del genere, insomma:
<pre>
<a href="index.html">home</a> &rarr; <a href="pagina.html">pagina</a> &rarr; sezione etc.
</pre>

che visualizzerebbe: <span style="font-weight:bold;color:#00f">home</span> → <span style="font-weight:bold;color:#00f">pagina</span> → sezione.

Esistono anche degli script per gestirle. Momentaneamente noi le inseriremo staticamente.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url (se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]

XHTML 1.1, CSS e Accessibilità da zero

2006-09-29T06:07:17Z

Ninobi: /* Pop up e nuove finestre */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS'''. In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento iper testuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, sinistro e inferiore; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="altrostile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quello <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

=== Le briciole di pane ===
Altro accorgimento, sacrosanto anche nell'ottica della cosiddetta ''usabilità'', è quello di inserire nelle pagine le ''briciole di pane'' (è un evidente richiamo a Pollicino...), ovvero l'''itinerario'' dei passaggi che abbiamo fatto, con i link a ritroso. Sarebbe qualcosa del genere, insomma:
<pre>
<a href="index.html">home</a> &rarr; <a href="pagina.html">pagina</a> &rarr; sezione etc.
</pre>

che visualizzerebbe: <span style="font-weight:bold;color:#00f">home</span> → <span style="font-weight:bold;color:#00f">pagina</span> → sezione.

Esistono anche degli script per gestirle. Momentaneamente noi le inseriremo staticamente.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url (se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]

XHTML 1.1, CSS e Accessibilità da zero

2006-09-28T06:23:02Z

Ninobi: /* Validare l'XHTML */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS'''. In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento iper testuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, sinistro e inferiore; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="altrostile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quello <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url (se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]

XHTML 1.1, CSS e Accessibilità da zero

2006-09-28T06:17:26Z

Ninobi: /* Pagina 2 */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS'''. In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento iper testuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, sinistro e inferiore; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="altrostile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quello <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url 8se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]

XHTML 1.1, CSS e Accessibilità da zero

2006-09-28T06:16:35Z

Ninobi: /* Pagina 2 */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS'''. In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento iper testuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, sinistro e inferiore; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="altrostile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quel <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url 8se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]

XHTML 1.1, CSS e Accessibilità da zero

2006-09-28T06:16:07Z

Ninobi: /* Pagina 2 */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS'''. In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento iper testuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, sinistro e inferiore; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="st-provv.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quel <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url 8se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]

XHTML 1.1, CSS e Accessibilità da zero

2006-09-28T06:02:18Z

Ninobi: /* Immagini */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS'''. In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento iper testuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, sinistro e inferiore; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="st-provv.css" type="text/css" />
<head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quel <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url 8se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]

XHTML 1.1, CSS e Accessibilità da zero

2006-09-28T05:59:23Z

Ninobi: /* Il float */

[[category:Ufficio e Web]]
Lo scopo di questa guida è di permettere a chi non ha familiarità con il '''web-building''' ''lato source'' di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l''''XHTML 1.1'''. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei '''CSS''', nel rispetto dell''''accessibilità'''.

== Premessa ==
Una caratteristica di questa guida è l'estrema ''stringatezza'' (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

== Primi passi ==
Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...
<pre>
<html></html>
</pre>
<p style="background:#ffb; border:1px solid #aaa; padding:6px">Abituiamoci da subito ad aprire e chiudere i '''tag''' (è una buona norma per non dimenticarli aperti).</p>

Posizionamoci al centro dei due tag e premiamo due volte ''invio'', per ottenere...
<pre>
<html>

</html>
</pre>
Procedendo allo stesso modo, continuiamo...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
</html>
</pre>
Notate come la riga del tag <code>title</code> sia indentata rispetto a <code>head</code>. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...
<pre>
<html>
<head>
<title>La mia prima pagina XHTML</title>
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1.jpg|thumbnail|La prima pagina]]

<p style="background:#ffb; border:1px solid #aaa; padding:6px">Non lasciatevi vincere dalla tentazione del classico ''copia-incolla'' con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.</p>

Bene, salviamo il file come <code>prova1.html</code> (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.

<br style="clear:both" />

Alcuni chiarimenti:

; head : ospita le informazioni di intestazione (il titolo, i ''meta-tag'', i ''link'' a file esterni, etc.).

; body : è il corpo della pagina.

; h1, h2 ... : sono blocchi di intestazione (servono per i titoli...).

; &Egrave; etc. : sono le cosiddette <code>htmlentities</code>, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio [http://www.fauser.edu/fau/html_htm/html4b.htm qui]).

; hr : visualizza una linea.

; p : è un blocco di testo (paragrafo);

; style : serve a definire lo stile del tag. Ecco il nostro primo incontro coi '''CSS'''. In questo caso abbiamo a che fare con css ''in-linea'', ma esistono alternative (lo vedremo...).

; br : serve ad andare a capo nel corso dello stesso blocco.

; em : un tag per rendere ''enfatizzato'' il testo racchiuso (corsivo, in pratica); per il grassetto, useremo '''strong'''; i vecchi tag, ''i'', ''b'' e ''u'' non sono più ammessi (per il sottolineato, si ricorre allo stile).

== Dichiaramoci ==
Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura <code>html</code> mettiamo questo blocco...
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
</pre>
E, nella <code>head</code>, aggiungiamo...
<pre>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</pre>

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è ''dichiaratamente'' XHTML 1.1.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).</div>

== Facciamo conoscenza con i CSS ==
Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...
<pre>
body {background:#ffffaa;}
</pre>
Fermiamoci un attimo: quel <code>#ffffaa</code> è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è <code>00</code>, il massimo è <code>ff</code> (i due estremi sono <code>#000000</code> - il nero - e <code>#ffffff</code> - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:
* che è preferibile usare colori della serie ''web-safe'' (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
* che in questi casi si può adottare la notazione ''breve'', ovvero riducendo la coppia ad un solo carattere (nel caso <code>#ffa</code>).

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile ''consistente'', il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file ''leggeri'' (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).</div>

Torniamo a noi...
<pre>
body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}
</pre>

Precisazioni:
;background : il colore di sfondo (si può optare per un'immagine con <code>background-image:url(percorso/nomeimmagine)</code>).
;color : il colore del carattere.
;font-family : una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: <code>serif</code>, <code>sans-serif</code> e <code>monospace</code>).
; il punto all'inizio di un nome : sta ad indicare che si tratta di una ''classe'', ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un <code>#</code>, sta ad indicare un <code>id</code>, un identificativo ''univoco'', ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come <code>stile.css</code>.

Adesso, nella nostra <code>prova.html</code>, tra i tag <code>head</code> e <code>/head</code>, inseriamo...

<pre>
<link rel="stylesheet" href="stile.css" type="text/css" />
</pre>

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle <code>classi</code> css (quelle che nel file cominciano coun un punto: ad esempio <code>.destra</code>). Quindi, toglieremo <code>style="text-align:right"</code>, sostituendo con <code>class="destra"</code> e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:
<pre>
...
<head>
<style type="text/css>

</style>
...
</head>
</pre>
Ma la cosa sarebbe stata ''improduttiva'': infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<hr />
<p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
<p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
<p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
<p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
</pre>
[[immagine:Xhtml1s.jpg|thumbnail|La prima pagina - con stile]]
Salviamo la pagina con un altro nome: <code>prova1stile.html</code>, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:
* è cambiato il colore di sfondo;
* è cambiato il carattere;
* è cambiato il colore del sottotitolo.
<br style="clear:both" />
Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== I layout ==
Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del ''layout'' da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:
* layout ''proporzionale'';
* layout ''centrato a dimensioni fisse'';
* layout ''posizionato a sinistra a dimensioni fisse''.

Nel '''proporzionale''', le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in <code>%</code>; in quelli a '''dimensioni fisse''', invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in <code>px</code> (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato ''solo'' con quel browser. Vedremo in seguito come evitare questo errore...<br />Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).</div>

=== Tabelle o non tabelle, questo è il dilemma ===
Proviamo con una tabella: cominciamo con lo stile...
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left;
background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}
</pre>
Salviamolo come <code>stile2.css</code>.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile2.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<table summary="layout della pagina">
<tr>
<td colspan="3" id="testatina">
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</td>
</tr>
<tr>
<td id="cellasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</td>
<td id="celladestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
</body>
</html>
</pre>
[[immagine:Xhtml-t.jpg|thumbnail|La prima pagina - con layout]]
Salviamo come <code>prova2.html</code> ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
<br style="clear:both" />
Alcune precisazioni:
; table : una tabella nella pagina - il parametro <code>summary</code> serve a dare una breve descrizione del contenuto della tabella. È uno dei ''dictat'' della cosiddetta '''accessibilità''' (ne riparleremo).
; tr : una nuova riga della tabella.
; td : una cella nella riga - se c'è il parametro <code>colspan="n"</code>, significa che la cella deve raggruppare <code>n</code> colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come <code>rowspan</code> funzionerebbe per le righe.
; a : è uno dei ''tag'' più importanti, in quanto indica un ''collegamento iper testuale'' (il famoso ''link'').

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

=== Il float ===

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati ''tabellari''. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro <code>float</code>.</div>

Riprendiamo il nostro <code>stile2.css</code>, eliminiamo le righe <code>table</code>, <code>td</code>, <code>#testatina</code>, <code>#celladestra</code>, <code>#cellasinistra</code> e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):
<pre>
body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
</pre>

Salviamo come <code>stile3.css</code> (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile3.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
<div id="layout">
<div>
<h1>Benvenuti nella mia prima pagina XHTML</h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<h4>home</h4>
</div>
<div class="floatleft" id="colonnasinistra">
<p>:: home</p>
<p>:: <a href="">pagina 1</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="floatleft" id="colonnacentro">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div id="colonnadestra">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p class="clearer"> </p>
</div>
</body>
</html>
</pre>

Salviamo come <code>prova3.html</code> ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

== Arricchiamo la pagina ==
Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...
=== Immagini ===
Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere?
Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: ''immagini'', ''file'', ''documenti''... Ma ognuno può regolarsi come meglio crede.</div>

Aggiungiamo la seguenti righe nel foglio di stile:
<pre>
img {border:0}
.imgsinistra {margin:4px 6px 0 0}
</pre>

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:
<pre>
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
</pre>
Mentre, dopo <code></h3></code>, inseriamo:
<pre>
<p class="clearer">&nbsp;</p>
</pre>
Che, qualora non si fosse capito, serve ad ''allineare'' il layout dopo dei blocchi con ''float''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Notato l'accorpamento dell classi di stile (<code>class="floatleft imgsinistra"</code>)? Coi i CSS, è conveniente adottare la ''modularità'' e l'''ereditarietà'' dei parametri (sono termini miei, ma credo rendano l'idea): ad esempio, possiamo impostare una caratteristica generale a livello di tag (il <code>padding</code> per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di <code>id</code>.</div>
Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

=== Miglioriamo lo stile ===
Nel foglio di stile, reinseriamo l'''id'' <code>#testatina</code> con <code>background:#000</code>. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per <code>h1</code> e cambiamo quello di <code>h3</code>. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come <code>stile4.css</code>:
<pre>
body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
</pre>

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.</div>

=== Aggiungiamo un pie' di pagina ===

Subito al di sotto dell'ultimo <code>p class="clearer"</code>, inseriamo questa parte:
<pre>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</pre>

=== Altezza dei blocchi ===

Una cosa che salta agli occhi, rispetto alla tabella, è che i '''div''' delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe <code>.colonne</code> (per pulizia, mettiamola nella sezione delle classi):
<pre>
.colonne {min-height:400px; height:auto !important; height:400px}
</pre>
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Normalmente sarebbe bastato il parametro <code>min-height</code> (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, <code>min-height</code> serve per i browser seri, <code>height</code> per IE. Ma <code>height</code>, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una ''minima'') e allora si interpone quell'<code>auto</code> con flag <code>!important</code>, che esclude il successivo e che IE, parimenti, non capisce.<br />
La compatibilità ''cross-browser'' è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.<br />
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del <code>margin:0 auto</code>, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che <code>margin</code> può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, sinistro e inferiore; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore <code>auto</code>, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il <code>body</code>), un <code>text-align:center</code> (che non sarebbe normale, essendo un parametro per il testo).
<br />Un altro accorgimento opportuno, quando si ha a che fare con blocchi <code>float</code>, è quello di impostare il parametro <code>line-height</code> (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
<br />Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al <code>padding</code> dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a <code>0</code> e definire la distanza col <code>margin</code> annidando i paragrafi (ad esempio, dentro un <code>div</code> con <code>padding:0</code>, posizioniamo un <code>p</code>, con <code>margin:6px</code>).
<br />Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli <code>em</code>, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
<br />Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini '''.png''', costringendo i poveri sviluppatori a dover ripiegare sulle .gif.
Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...</div>
Nella pagina, aggiungiamo la classe <code>.colonne</code> alle tre colonne, appunto, ovvero...
<pre>
<div class="colonne floatleft" id="colonnasinistra">
...
<div class="colonne floatleft" id="colonnacentro">
...
<div class="colonne" id="colonnadestra">

</pre>

=== Aggiungiamo un altro menu ===
La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu ''rollover'' in '''javascript''' (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono ''deprecate'' secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie ''lato-client''.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.<br />
Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (''javascript'', ''applet'' e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un <code>plug-in</code>). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?<br />
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag <code>object</code> (per cui rimando alle risorse sull'html citate [[#Collegamenti esterni|sotto]]).
</div>
Nel foglio di stile aggiungiamo, fra i tag...
<pre>
a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */
</pre>
... fra gli id...
<pre>
#barra {background:#900; margin-bottom:1px}
</pre>
...e, tra le classi...
<pre>
.pulsanti {width:120px; background:#009; text-align:center; color:#ffa;
font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link */
</pre>
Ora, nella nostra pagina, subito dopo la chiusura del div <code>testatina</code>, inseriamo:
<pre>
<div id="barra">
<p class="floatleft pulsanti">home</p>
<p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
<p class="clearer">&nbsp;</p>
</div>
</pre>

=== Aggiungiamo dei box ===
Tra le classi del CSS inseriamo:
<pre>
.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}
</pre>
E, nella pagina, all'interno della colonna sinistra (dopo i link)...
<pre>
<div class="box boxgiallo">
<p class="centro">
Bannerino<br/>o sondaggio<br />
o amenit&agrave;<br />varie
</p>
</div>
</pre>
E, nella colonna centrale, dopo il paragrafo testo...
<pre>
<div class="box boxceleste">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>

=== Vediamo i risultati ===
[[immagine:Xhtml-index.jpg|thumbnail|La nostra index]]
Salviamo come <code>prova4.html</code> e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.

<br style="clear:both" />

== Aggiungiamo pagine al nostro sito ==

Cominciamo col rinominare la nostra <code>prova4.html</code> a <code>index.html</code>. Inoltre, nella seconda voce (<code>pagina1</code>) della colonna sinistra, modifichiamo così:
<pre>
<p>:: <a href="pagina1.html">pagina 1</a></p>
</pre>

Dopo aggiungiamo questa riga negli id del CSS:
<pre>
#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}
</pre>

=== Pagina 1 ===
Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce <code>pagina 1</code> dei menu non è linkata, mentre lo è <code>home</code>):
<pre>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>La mia prima pagina XHTML</title>
<link rel="stylesheet" href="stile4.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
<div id="layout">
<div id="testatina">
<img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
<h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
<h3>
&Egrave; un esercizio fatto seguendo l'<em>how-to</em> di
wikislacky.
</h3>
<p class="clearer">&nbsp;</p>
<h4>pagina 1</h4>
</div>
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: pagina 1</p>
<p>:: <a href="">pagina 2</a></p>
</div>
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco2">blocco 2</a></p>
<p>- <a href="#blocco3">blocco 3</a></p>
<p>- <a href="#blocco4">blocco 4</a></p>
<h5><a id="blocco1">blocco 1</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco2">blocco 2</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco3">blocco 3</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<h5><a id="blocco4">blocco 4</a></h5>
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum<br />
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p class="destra"><a href="#top">top &uarr;</a></p>
</div>
<p class="clearer">&nbsp;</p>
<div id="piede">
<p>
Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
</p>
</div>
</div>
</body>
</html>
</pre>
[[immagine:Xhtml-pag1.jpg|thumbnail|Pagina 1]]
Salviamo come <code>pagina1.html</code>.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Praticamente, ci siamo costruiti una specie di ''template'', ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il '''web dinamico''', altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia ''lato server'', sfruttando, in particolare, l'''inclusione'' e la ''modularità''...</div>

Apriamo la nostra <code>index.html</code> e, in uno dei due menu, clicchiamo sulla voce <code>Pagina 1</code>. Vedremo aprirsi la nostra nuova pagina... →

<br style="clear:both" />

==== Le ancore ====
Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello ''interno'' o ''ancora''. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...
<pre>
<a id="nomeparagrafo">Nome paragrafo</a>
</pre>
...al titolo del paragrafo (precedentemente, al posto di <code>id</code> avremmo potuto usare <code>name</code>, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...
<pre>
<a href="#nomeparagrafo">Nome paragrafo in indice</a>
</pre>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso <code>#top</code>).

=== Pagina 2 ===
Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal ''posizionamento assoluto''.

In essa proveremo a costruire anche un semplice <code>form</code>: per ora sarà solo ''estetico'' purtroppo (un form, per funzionare, ha bisogno di tecnologia ''lato-server''), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):
<pre>
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
border:2px dashed #ddd}
</pre>
Salviamo come <code>altrostile.css</code>.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...
<pre>
...
<link rel="stylesheet" href="st-provv.css" type="text/css" />
<head>
<body>
<div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
<p class="titoli" id="titolo">XHTML</p>
<p class="titoli" id="rilievo">XHTML</p>
<p class="titoli" id="ombra">XHTML</p>
<p class="titoli" id="titolo2">1.1</p>
<p class="titoli" id="rilievo2">1.1</p>
<p class="titoli" id="ombra2">1.1</p>
<p class="barra" id="bar2">&nbsp;</p>
<div id="blocco">
<p>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
<p class="barra">&nbsp;</p>
</body>
</html>
</pre>
Salviamo come <code>pagina2.html</code> e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo ''XHTML'' in rilievo e ombreggiato? E dell'''1.1'' addirittura ''incassato''? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre <code>id</code> del titolo una posizione assoluta, con una certa distanza da bordo superiore (<code>top</code>) e una certa distanza dal bordo sinistro (<code>left</code>); abbiamo anche stabilito la ''terza dimensione'', ovvero il <code>layer</code> o ''livello'', rispetto al fondo, con quel <code>z-index</code>.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).<br />
È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.
</div>
==== Un form ====
Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro <code>altrostile.css</code> e salviamolo:
<pre>
fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}
</pre>
Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del <code>p</code>) e scriviamo:
<pre>
<form action="" method="post">
<fieldset>

<fieldset>

<legend>informazioni principali</legend>

<label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
<input class="campi" type="text" name="nome" id="nome" tabindex="1" />
<br class="cl" />

<label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
<input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
<br class="cl" />

<label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
<input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
checked="checked" /> m &nbsp;&nbsp;
<input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
<br class="cl" />

<label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
<input class="campi" type="text" name="username" id="username" tabindex="5" />
<br class="cl" />

<label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
<input class="campi" type="password" name="password" id="password" tabindex="6" />
<br class="cl" />

</fieldset>

<fieldset>

<legend>altre informazioni</legend>

<label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
<select name="impiego" id="impiego" tabindex="7">
<optgroup label="dipendente">
<option value="pubblico" selected="selected">pubblica amministrazione</option>
<option value="privato">privato</option>
</optgroup>
<optgroup label="professionista">
<option value="avvocato">avvocato</option>
<option value="ingegnere">ingegnere</option>
</optgroup>
<optgroup label="imprenditore">
<option value="commercio">commercio</option>
<option value="servizi">servizi</option>
</optgroup>
</select>

<p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8"
tabindex="8" checked="checked" /> informatica
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9"
tabindex="9" checked="checked" /> viaggi
</p>
<p class="piccolo">
<input class="campi" type="checkbox" name="libri" id="libri" accesskey="a"
tabindex="10" checked="checked" /> libri
</p>

<label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
<textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b"
tabindex="11">Intendo registrarmi perché </textarea>

</fieldset>

<fieldset>

<legend>invio</legend>
<p id="invio"><input type="submit" value="invia il modulo" /></p>

</fieldset>

</fieldset>
</form>

</pre>

[[immagine:Xhtml-pag2.jpg|thumbnail|Pagina 2]]
Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una ''maschera vuota'': con il parametro <code>action</code>, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in '''php''' o '''perl''' o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.
<br style="clear:both" />

== Accessibilità ==
Con una definizione un po' semplicistica, possiamo dire che l'''accessibilità'' è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti ''normo-dotati''.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

=== Le access keys ===
Le '''access keys''' non sono altro che delle ''scorciatoie da tastiera'' da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag <code>a</code>, il parametro <code>accesskey="x"</code>, dove <code>x</code> sarà un carattere ''indicativo'' per il link. Ad esempio, metteremo...
<pre>
- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...
</pre>
Il parametro <code>title</code> serve a visualizzare (o far ''dire'' ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà <code>alt+chiave</code> (<code>e invio</code> su certi browser) o <code>ctrl+chiave</code> su ''mac-os''.

=== Sequenze di link ===
Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi <code>p</code> o <code>div</code> diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel <code>::</code> (avremmo potuto usare <code>> _ - | </code> etc.).

=== Immagini - testo alternativo e descrizione ===
Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo '''sempre''' cura di dare una breve descrizione delle stesse con il parametro <code>alt</code>. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro <code>longdesc="nomefile.txt"</code> (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):
<pre>
<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>
</pre>

=== Ordine e sequenzialità ===
Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di <code>tab</code>, guidate da quello che un sintetizzatore vocale può leggere.

=== Ridimensionamento ===
Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito ''bello fico'', per altri possono significare... ''non leggo una mazza...''?

E allora, teniamo presenti due cose fondamentali:
# rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli <code>em</code>, per esempio);
# testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

=== Rispetto della semantica ===
Se una voce di menu richiama una pagina che parla di ''cinema'', eviteremo di scrivere, per esempio, ''La grande illusione''... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico <code>span</code> richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag <code>em</code>, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

=== Form accessibili ===
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in [[#Pagina 2|Pagina 2]]. Qui mi limiterò ad alcuni chiarimenti.</div>
Non faremo mai mancare il tag <code>label</code> (di fatto, un'''etichetta'') ai campi di ''input'' e il parametro <code>tabindex</code> agli stessi input (per impostare la successione degli spostamenti azionando il <code>tab</code>). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle <code>accesskey</code> per le <code>label</code>.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag <code>optgroup</code>.

Le caselle di selezione <code>checkbox</code> o <code>radio</code> dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi <code>textarea</code>, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag <code>fieldset</code> e <code>legend</code> per organizzarlo.

=== Pop up e nuove finestre ===
Il parametro <code>target</code> (che permetteva di dirottare un link in una nuova finestra o in una diversa ''frame'') è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente <code>shift</code> (o una nuova scheda con <code>ctrl</code>, se il suo browser ne è capace).

Allo stesso modo, eviteremo ''come la peste'' i ''pop-up'' e le menate simili.

<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in [[#Collegamenti esterni|Collegamenti esterni]].</div>

== Validazione ==
Il fatto che abbiamo dichiarato la nostra '''DTD''' (''Document Type Definition'') in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del '''W3C''' (''World Wide Web Consortium'') e non solo...

=== Validare l'XHTML ===
Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url 8se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene ''scripting lato-server'').

=== Validare i CSS ===
Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di ''warnings''). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei ''warnings'' debbono essere intesi come consigli per migliorare lo stile.

=== Validare l'accessibilità ===
Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard '''WAI''' (''Web Accessibility Initiative''): '''A''', '''AA''' e '''AAA''' (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

* http://webxact.watchfire.com/
* http://www.contentquality.com/
* http://wave.webaim.org/index.jsp

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

=== Congratulazioni ===
Nel momento in cui i vari validatori ci porgono le loro ''congratulazioni'' per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di ''dare l'esempio'', di stimolare l'''emulazione'' negli altri.
<div style="background:#eee;font-size:90%;padding:6px;border:1px solid #aaa">Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. ''Presumibilmente'', saranno anche conformi agli standard WAI AAA per l'accessibilità.</div>

== Conclusioni ==
Quello che abbiamo fatto si propone di essere solo un ''input'' e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel '''web dinamico''', con particolare riferimento alla coppia ''open-source'' per eccellenza: '''php-mysql'''...

Vorrei, tuttavia, che considerassimo anche ciò che '''non''' abbiamo fatto:
# non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
# non lo abbiamo dato in pasto allo stesso programma o ad altro software per ''affettarlo'' in tante porzioni di immagine (magari <code>.gif</code>), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
# non abbiamo elaborato ulteriormente il tutto con un programma di ''web-authoring'', curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea ''tag per tag'' o, peggio, in obsoleti parametri html.
Eppure, tutto questo costituisce ''routine'' per molti cosiddetti ''professionisti'' del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...
* leggero;
* razionale;
* usabile;
* accessibile.
Se poi è anche bello..., ben venga!

Questo è quanto.

== Collegamenti esterni ==
Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

=== HTML - XHTML ===
* http://xhtml.html.it/
* http://www.w3.org/TR/html4/
* http://weblink.altervista.org/
* http://www.htmlhelp.com/
* http://www.aspide.it/manuale/

=== CSS ===
* http://www.w3.org/Style/CSS/learning
* http://www.w3schools.com/css/
* http://css.html.it/guide/leggi/2/guida-css-di-base/
* http://www.web-link.it/css/css.htm
* http://www.risorse.net/css/

=== Accessibilità ===
* http://www.francocarcillo.it/dive/index.html
* http://www.webxtutti.it/
* http://www.diodati.org/
* http://www.webaccessibile.org/
* http://www.pubbliaccesso.gov.it/index.htm
* http://www.usabile.it/
* http://www.accessifyforum.com/viewtopic.php?p=8123
L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).

----
Autore:[[utente:Ninobi | ninobi]]

<small>
Sul web: http://ninobi.altervista.org.

E-mail: [mailto:aschenaz@gmail.com aschenaz@gmail.com]
</small>

<p style="text-align:right">[[#top|↑ indice]]