INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Guida XHTML

Design di siti Web con HTML e CSS
Disegno di siti Web con HTML, CSS e Dynamic HTML.

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Introduzione all'XHTML

L'HTML è un linguaggio pieno di imperfezioni a cui i browser concedono molotissima libertà di scrivere il codice in maniera non perfetta, senza rispettare gli standard dell'ultima versione ufficiale del linguaggio, la 4.0.

Questa libertà non va interpretata come un vantaggio, bensì come un limite dell'HTML.

Da qualche anno è stato introdotto sul Web un nuovo standard, chiamato XHTML, dove X sta per eXtensible, ispirandosi al rigore, alla rigidità ed alla precisione lessicale dell'XML, linguaggio standard per lo scambio dei dati.

Come ogni cosa anche l'XHTML ha i suoi pro ed i suoi contro.

I contro, anzi, IL contro, è semplice: ci si dimentichi di poter scrivere codice scorretto, anche se all'apparenza, da un punto di vista ottico, funziona tutto.

I pro sono molteplici.

Con la sua rigidità e precisione l'XHTML permette di scrivere pagine Web accessibili perfettamente da qualsiasi browser e da qualsiasi piattaforma, quindi da browser di PC, cellulari, palmari, PDA, e cosi via.

E' inoltre importante specificare che l'XHTML è un requisito richiesto in qualsiasi bando di gara di enti pubblici e pubbliche amministrazioni, ed è inoltre un valore aggiunto anche agli occhi di un privato.

C'è comunque da considerare il fatto che l'HTML tradizionale non smetterà mai di esistere, quindi passare ad XHTML è una sana scelta, non un obbligo.

Differenze tra HTML ed XHTML

Nel paragrafo precedente abbiamo appurato che ci sono delle differenze tra l'HTML tradizionale e lo standard XHTML.

Da questo capitolo iniziamo a scoprire quali sono a livello di codice.

Vediamo un semplice esempio di pagina HTML:

<html>
<head>
<title>Pagina HTML</title>
</head>
<body>

<p>Testo...</p>

</body>
</html>
Vediamo come scrivere lo stesso codice in XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Pagina XHTML</title>
<meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1"/>
</head>
<body>

<p>Ciao Mondo!</p>

</body>
</html>
Abbiamo innanzitutto un'intestazione data dalla DOCTYPE (che affronteremo più avanti nel corso dell'articolo) ed il tag <html> ha dei riferimenti alle specifiche del linguaggio XHTML direttamente sul sito del W3C (sigla del World Wide Web Consortium) che è l'ente di riferimento degli standard relativi al Web.

Nell'intestazione della pagina troviamo un meta tag con la specifica della codifica ISO del carattere da utilizzare.

Possiamo anche notare che, essendo il meta un tag vuoto, prima della fine del tag stesso si specifica uno slash, come spiegheremo più approfonditamente nei prossimi capitoli.

Nota: il meta tag è stato mandato a capo per questioni di spazio, ma va scritto su di una sola riga!

Per verificare la validità della pagina XHTML di esempio è possibile recarsi sul sito del W3C ed utilizzare l'apposito validatore:

http://validator.w3.org/

utilizzando magari l'area di testo in cui incollare il codice da verificare.

In HTML i tag possono essere scritti indifferentemente in maiuscolo, in minuscolo o in modo promiscuo; per l'XHTML il discorso è diverso: il minuscolo è obbligatorio!

Quindi:
<esempio> Corretto
<Esempio> Scorretto
<ESEMPIO> Scorretto
Le DOCTYPE e la modularità

Le DOCTYPE svolgono un ruolo fondamentale in una pagina XHTML al fine di stabilire il tipo di documento in uso; senza di queste, infatti, il W3C non sarà in grado di validarle.

Esistono tre tipi di DOCTYPE: Strict, Transitional e Frameset. Vediamole in dettaglio.

La DOCTYPE Strict è la forma più rigida di definizione di un documento XHTML che non permette di utilizzare alcuno stile interno al documento: il tutto dev'essere definito il un file CSS esterno.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
La DOCTYPE Transitional ammette l'utilizzo di stilizzazioni interne al documento, ma è consigliabile limitarle a favore di documenti CSS esterni.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
La DOCTYPE Frameset è la versione per documenti che utilizzano frame o frame in linea (iframe).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Oltre alla definizione del tipo di documento è importante capire il concetto di modularità degli elementi di una pagina Web, i quali possono essere divisi in gruppi (o moduli) logici i quali, tuttavia, sono definiti implicitamente e non comportano differenze di codice tra XHTML ed HTML, se non quelle esplicitamente spiegate negli altri paragrafi di questo articolo.

Esistono 4 moduli.

Lo Structure Module raggruppa i tag che definiscono la struttura di base di un documento XHTML come <html>, <head>, <title>, <body> e relativi tag di chiusura.

Il Text Module raggruppa i tag XHTML che strutturano gli elementi testuali di un documento come <h1>, <p>, <div>, <span> ed altri, con relativi tag di chiusura.

L'Hypertext Module raggruppa i tag che definiscono gli elementi ipertestuali di un documento XHTML (i link).

Il List Module raggruppa i tag che definiscono le liste, ovvero <ul>, <ol>, <li> e cosi via, con relativi tag di chiusura.

Gestione dei tag e degli atributi vuoti

In HTML esistono tag che prevedono l'omonimo tag di chiusura ed altri che non lo prevedono, ed esistono anche attributi di alcuni tag che accettano un valore ed altri che non lo accettano perchè di tipo booleano, ovvero se specificati rappresentano "vero", altrimenti rappresentano "falso".

In XHTML la gestione di questi elementi è diversa che in HTML classico, ma lo sforzo peradeguarsi è davvero minimo: i tag vuoti prevedono l'inserimento di uno slash (/) prima della fine del tag stesso, mentre gli attributi vuoti vanno valorizzati con "true" o "false".

Vediamo un esempio di tag vuoto:
<img src="immagine.gif" alt="Testo alternativo"/>
Ricordo che per le immagini le immagini l'attributo alt è obbligatorio.

Vediamo adesso come gestire un attributo vuoto:
<input type="radio" id="M" name="sesso" value="M" cheched="true"/>
In HTML sarebbe bastato specificare "checked", ma in XHTML lo impostiamo su true, altrimenti sarebbe bastato non specificarlo.

Ricordo anche che gli elementi dei form richiedono l'attributo ID obbligatoriamente, come vedremo anche più avanti nel corso in un paragrafo dedicato alla gestione dei moduli.

Approfitto per accennare all'utilizzo dei tag <style> e <script> per la gestione, relativamente, dei CSS e degli script JS o VB.

L'attributo obbligatorio per la specifica del linguaggio è type che va impostato come segue:
<style type="text/css">
e:
<script type="text/javascript">
Gestione dei caratteri speciali

Le specifiche dell'XHTML impongono l'utilizzo dei caratteri speciali per la definizione di elementi come le lettere accentate, la & commerciale ed altri caratteri "particolari" che danno "fastidio" alla DOCTYPE del W3C.

Vanno sostituiti dalle sequenze riportate di seguito:
&
&amp;

à
&aacute;

è
&eacute;

ì
&iacute;

ò
&oacute;

ù
&uacute;
Ad esempio:
<div>Come si chiama il tuo pap&aacute;?</div>
restituisce:
Come si chiama il tuo papà?
Gestione dei form

Come abbiamo visto nelle precedenti lezioni, parlando di tag ed attributi vuoti, in XHTML la gestione dei form è semplice ma articolata.

Vediamo dunque quali sono le caratteristiche da rispettare.

Il tag form e tutti gli elementi fisici dei moduli, devono riportare sempre la specifica dell'ID e del nome:
<form id="modulo" name="modulo" method="" action="">
Gli elementi vuoti, tag ed attributi, devono sempre riportare, rispettivamente, lo slash (/) finale e la specifica "vero" o "falso":
<input type="radio" id="M" name="sesso" value="M" cheched="true"/>
Prendiamo adesso il modulo della lezione sui form in HTML e rendiamolo valido XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>I form in XHTML</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
</head>
<body>

<form id="modulo" name="modulo" method="post" action="esegui.asp">
Nome<br/>
<input type="text" id="nome" name="nome"/><br/>
Cognome<br/>
<input type="text" id="cognome" name="cognome"/><br/>
Paese<br/>
<select id="paese" name="paese">
<option value="I">Italia</option>
<option value="E">Estero</option>
</select><br/>
Sesso<br/>
<input type="radio" id="m" name="sesso" value="M"/> M<br/>
<input type="radio" id="f" name="sesso" value="F"/> F<br/>
Hobby<br/>
<input type="checkbox" id="s" name="hobby" value="S"/> Sport<br/>
<input type="checkbox" id="l" name="hobby" value="L"/> Lettura<br/>
<input type="checkbox" id="c" name="hobby" value="C"/> Cinema<br/>
<input type="checkbox" id="i" name="hobby" value="I"/> Internet<br/>
Commento<br/>
<textarea id="commento" name="commento" rows="5" cols="30"></textarea>
<br/><br/>
<input type="submit" id="invia" name="invia" value="Invia i dati"/>
</form>

</body>
</html>
XHTML e accessibilità

Oltre al principio della portabilità su diversi browser Web e diverse piattaforme, come spiegato nell'introduzione di questo articolo, l'XHTML vuole conferire al Web un nuovo concetto, quello dell'accessibilità, oltre che dell'usabilità.

Per usabilità si intende un principio astratto per rendere un sito semplice da navigare ed intuitivo nel funzionamento, ma si tratta di un principio di design e di struttura che prescinde da XHTML.

L'accessibilità, invece, è un principio reale che si basa su delle regole e su degli specifici comandi per la gestione di determinati elementi delle pagine Web, come i menu ed i link in generale, ed i form, allo scopo di favorire i disabili nella navigazione, sia che usino browser studiati appositamente per questa categoria di persone meno fortunate da un punto di vista motorio, sia che usino browser tradizionali.

Il primo principio di accessibilità è dato dalla creazione di layout table-less (utilizzando i div ed i CSS senza le classiche table HTML).

Vediamo dunque due sistemi per la gestione del principio dell'accessibilità; il primo è legato ai form HTML ed il secondo ai menu.

Parliamo quindi di accesskey, ovvero chiavi di accesso attraverso i tasti di selezione rapida, o shortcut.

Immaginiamo di voler accedere ad una casella di testo senza dover utilizzare il mouse, senza spostare il puntatore all'interno della casella e senza doverci cliccare dentro, ma semplicemente utilizzando una combinazione di tasti.

Vediamo uno spezzone di codice:
<u>N</u>ome
<input type="text" id="nome" name="nome" accesskey="n"/>
Impostiamo l'attributo accesskey in modo da specificare la lettera che andrà utilizzata come shortcut e starà poi a noi essere bravi ad indicare all'utente la lettera da utilizzare, ad esempio sottolineandola.

La combinazione di accesso a questa casella di testo è:
[Alt] + [N]
Un altro esempio consiste nell'offrire agli utenti la possibilità di selezionare un'opzione (singola o multipla) cliccando anche sul testo descrittivo piuttosto che sul solo elemento, attraverso l'utilizzo del tag label che, a sua volta, utilizza l'attributo for che fa riferimento all'ID dell'opzione che si desidera selezionare.

Vediamo uno spezzone di codice:
<input type="radio" id="M" name="sesso" value="M"/>
<label for="M">Maschio</label>
Vediamo adesso come utilizzare le accesskey per un menu:
<a href="index.html" accesskey="h"><u>H</u>omepage</a>
Dunque anche il tag a supporta l'attributo accesskey.

La combinazione di accesso a questo link è:
[Alt] + [H]

IN EVIDENZA