Redazione
a- a+

Da HTML a XHTML: ecco come convertire una pagina web in xhtml e validarla con gli standard W3C

In questo articolo vedremo un semplice caso pratico, prenderemo una pagina web scritta in un HTML volutamente maldestro, tipico delle pagine web di 5 e più anni fa, mostreremo quindi come trasformarla prima in documento XHTML-TRANSITIONAL e quindi in un documento XHTML-STRICT.

 

La pagina in HTML maldestro

I browser attuali per la piattaforma PC sono molto tolleranti dal punto di vista della sintassi delle pagine HTML, forse anche troppo. Per esempio la pagina scritta per questo articolo intende riassumere in poche righe gli esempi più importanti di codice HTML correttamente visualizzato dai browser attuali, ma sostanzialmente scorretto dal punto di vista dello standard XHTML.

 

<HTML>
<HEAD><TITLE>Pagina correttamente visualizzata dai browser</TITLE></HEAD>
<BODY>
<IMG SRC="titolo.jpg" BORDER=0 WIDTH=100 HEIGHT=20 ALIGN=right>
<B><U>Cosa è <I>&lt XHTML &gt</B></I></U>
<CENTER>
<P><B>XHTML</B> è un linguaggio derivato da <I>HTML</I>, a cui sono state applicate le regole univoche e rigorose di <I>XML</I>.
</CENTER>
<P>La vera potenza di questo approccio è che un documento XHTML valido e ben formato è ancora correttamente visualizzato e perfettamente compatibile con i browser attualmente più diffusi.
<BR>Si ricordi che, Come per HTML, la specifica del linguaggio è stata definita dal <A HREF="http://www.w3c.org">W3C</A>

<P><I><FONT FACE="Verdana" SIZE="-1" COLOR=#0000ff>Lo scopo finale di questo nuovo standard è garantire l'accessibilità delle informazioni da parte di dispositivi diversi dal PC o da parte di portatori di handicap.</FONT></I>
</BODY></HTML>

 

Il lettore con un minimo di confidenza con il linguaggio HTML, anche se completamente digiuno di XHTML, non farà fatica a individuare tutta una serie di scorrettezze del codice sopra riportato. Ciò che invece non appare evidente, è che le pagine scritte con questo genere di HTML sono la stragrande maggioranza, e non è evidente perchà? i browser per PC sono in grado di tollerare egregiamente le scorrettezze presenti, garantendo quasi sempre una visualizzazione perfetta.

 

La trasformazione in XHTML-TRANSITIONAL

La specifica XHTML denominata TRANSITIONAL è stata creata per favorire la conversione da HTML a XHTML di queste pagine web in un certo senso imperfette, con il minor sforzo possibile, e per introdurre gradualmente gli autori di pagine HTML all'uso di XHTML. La specifica ricalca infatti in tutto e per tutto quella di HTML 4, cui aggiunge solamente la rigorosità della struttura di XML.

Vediamo adesso come applicare la conversione alla pagina sopra riportata:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html>
<head><title>Pagina conforme a XHTML 1.0 transitional</title></head>
<body>

<img src="titolo.jpg" border="0" width="100" height="20" align="right" />
<b><u>Cosa è <i>&lt; XHTML &gt;</i></u></b>

<center>
<p><b>XHTML</b> è un linguaggio derivato da <i>HTML</i>, a cui sono state applicate le regole univoche e rigorose di <i>XML</i>.</p>
</center>

<p>La vera potenza di questo approccio è che un documento XHTML valido e ben formato è ancora correttamente visualizzato e perfettamente compatibile con i browser attualmente più diffusi.
<br />Si ricordi che, Come per HTML, la specifica del linguaggio è stata definita dal <a href="http://www.w3c.org">W3C</a>.</p>

<p><i><font face="Verdana" size="-1" color="#0000ff">Lo scopo finale di questo nuovo standard è garantire l'accessibilità delle informazioni da parte di dispositivi diversi dal PC o da parte di portatori di handicap.</font></i></p>

</body></html>

 

Le differenze sono sostanzialmente queste:

  • Il documento inizia con la dichiarazione DOCTYPE, che identifica lo standard a cui intende essere conforme.
  • I marcatori sono tutti in caratteri minuscoli.
  • I marcatori <b>, <i> e <u> sono adesso nidificati in modo corretto, senza incroci tra di loro.
  • I caratteri speciali &lt; e &gt; sono terminati con il punto e virgola.
  • Tutti i marcatori hanno adesso il corrispondente marcatore di chiusura (<p> </p>) e quelli singoli sono terminati con un barra (per esempio <br />).
  • Tutti gli attributi sono inclusi tra doppie virgolette.

L'applicazione al documento originario di queste poche regole risulta abbastanza semplice e immediato, e cosa ancor più importante ne lascia praticamente inalterata la struttura. Può sembrare strano, se non addirittura assurdo, fare un sforzo di questo tipo per ottenere una visualizzazione sul browser praticamente identica alla precedente, tuttavia non bisogna dimenticare che lo scopo primario di questo nuovo standard è garantire l'accessibilità?

Passare a XHTML-STRICT

Se il passaggio da HTML a XHTML-TRANSITIONAL è risultato semplice e intuitivo, il passo ulteriore verso la specifica XHTML-STRICT è di fatto un po' più complicato. La caratteristica peculiare della specifica STRICT è che tutti gli attributi di formattazione precedentemente inseriti nel codice HTML, devono adesso essere obbligatoriamente rimossi e implementati nella forma dei fogli di stile. Questo impone una serie di modifiche radicali al codice, che deve essere depurato dai marcatori di formattazione e ristrutturato per accogliere la modalità di formattazione tramite foglio di stile.

Il risultato è questo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Pagina conforme a XHTML 1.0 strict</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="miostile.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div><img src="titolo.jpg" width="100" height="20" alt="" />
<span class="bold"><span class="underline">Cosa è <span class="italic">&lt; XHTML &gt;</span></span></span></div>

<p id="inizio"><span class="bold">XHTML</span> è un linguaggio derivato da <span class="italic">HTML</span>, a cui sono state applicate le regole univoche e rigorose di <span class="italic">XML</span>.</p>

<p>La vera potenza di questo approccio è che un documento XHTML valido e ben formato è ancora correttamente visualizzato e perfettamente compatibile con i browser attualmente più diffusi.
<br />Si ricordi che, Come per HTML, la specifica del linguaggio è stata definita dal <a href="http://www.w3c.org">W3C</a>.</p>

<p id="chiusura">Lo scopo finale di questo nuovo standard è garantire l'accessibilità? delle informazioni da parte di dispositivi diversi dal PC o da parte di portatori di handicap.</p>

</body></html>

 

Analizziamo le differenze una ad una:

  • E' stato inserito un blocco <META> per specificare la codifica utilizzata, elemento essenziale per la corretta interpretazione di una pagina XHTML.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  • E' stato creato il foglio di stile MIOSTILE.CSS che definisce classi e stili di formattazione poi utilizzati nella pagina stessa.
<link href="miostile.css" rel="stylesheet" type="text/css" />
  • Poichè tutti gli elementi della pagina devono essere contenuti in un blocco, si è dovuto inserire un blocco <DIV></DIV>. All'interno di esso il marcatore singolo <IMG> è stato terminato con una sbarra "/" e sono stati rimossi gli attributi di formattazione del bordo e dell'allineamento (vedremo dopo come sono stati implementati). Anche in marcatori per grassetto, corsivo e sottolineato sono stati praticamente rimpiazzati da blocchi <SPAN> della classe opportuna (si veda il foglio di stile per i dettagli).
<div><img src="titolo.jpg" width="100" height="20" alt="" />
<span class="bold"><span class="underline">Cosa è <span class="italic">&lt; XHTML &gt;</span></span></span></div>
  • Il blocco <P> è stato terminato con il relativo marcatore di chiusura </P> e il marcatore di formattazione del paragrafo con testo centrato è stato rimossa. Per centrare il testo si è impostato l'attributo ID del blocco <P> con un nome specifico (INIZIO) che all'interno del foglio di stile corrisponde alla formattazione voluta.
<p id="inizio"><span class="bold">XHTML</span> è un linguaggio derivato da <span class="italic">HTML</span>, a cui sono state applicate le regole univoche e rigorose di <span class="italic">XML</span>.</p>
  • In modo analogo, la formattazione del tipo, delle dimensioni e del colore del carattere usato nell'ultimo blocco <P></P> sono stati rimossi ed implementati nel foglio di stile, facendovi riferimento attraverso l'attributo ID del blocco <P> (impostato a CHIUSURA).
<p id="chiusura">Lo scopo finale di questo nuovo standard è garantire l'accessibilità delle informazioni da parte di dispositivi diversi dal PC o da parte di portatori di handicap.</p>

Vediamo adesso il foglio di stile utilizzato dalla pagina:

 

.bold { font-weight: bold;}
.italic { font-style: italic; }
.underline { text-decoration: underline; }

img { border-width: 0 0 0 0;
 float: right;
    }

#inizio { text-align: center;}

#chiusura {  font-family: Verdana;
             font-size: smaller;
             font-style: italic;
             color: #0000ff;
          }

 

  • Le tre classi BOLD, ITALIC e UNDERLINE, applicate ad un blocco <SPAN>, sono servite per sostituire i marcatori <B>, <I> e <U>.
  • Si è specificato che tutti i marcatori <IMG> dovessero avere bordo nullo ed essere allineati a destra.
  • Sono stati definiti due tipologie di formattazione, INIZIO e CHIUSURA, utilizzate da blocchi specifici, quelli con attributo ID impostato con tali nomi.


La validazione delle pagine XHTML
La specifica del linguaggio XHTML richiede allo scrittore di pagine web una correttezza assoluta, nasce quindi la necessità di verificare se una certa pagina è conforme allo standard. A tale scopo il W3C mette a disposizione sul proprio sito web un validatore automatico di pagine.
[IMG2.JPG]

All'indirizzo http://validator.w3.org/ il visitatore può sottoporre a validazione una pagina web fornendone l'indirizzo oppure indicandone la collocazione sul proprio hard disk.

Nel caso in cui la pagina contenga errori, il validatore oltre a dichiarare la non conformità, elenca gli errori trovati specificandone il genere, spiegandone la natura e quando possibile indicando le possibili soluzioni. Prendiamo ad esempio la pagina STRICT valida e introduciamo volutamente degli errori, in particolare togliamo la terminazione al marcatore singolo <IMG> e togliamo un marcatore di chiusura di <SPAN>, quindi sottoponiamo la pagina con errori alla validazione.
Sottoponendo a validazione il listato XHTML-TRANSITIONAL si può rapidamente verificare la conformità allo standard dichiarato e la stessa verifica può essere fatta con il listato conforme alla specifica STRICT. In caso di conformità viene fornito un codice XHTML valido da inserire all'interno della pagina stessa per visualizzare il logo di conformità.



Ti potrebbe interessare anche

commenta la notizia

Ci sono 1 commenti
Anonimo
Se effettuo un controllo di questa pagina sul link http://validator.w3.org/ escono fuori 14 errors e 4 warnings.