Cominciamo con l’analizzare la versione che non segue criteri di accessibilità: quella, cioè, realizzata tramite l’uso di elementi e attributi di presentazione dell’HTML (i brani di codice sono tratti dal file tabforma.htm), nonché tramite l’uso di tabelle di impaginazione (“layout tables”, in inglese), pratica tuttora diffusissima per ottenere griglie del tipo di quella in figura 1, mostrata nella lezione precedente.

Di seguito sono riportate le parti principali del codice HTML utilizzato per realizzare il solo menu di navigazione, visibile nella colonna di sinistra della pagina di esempio.

<!DOCTYPE HTML PUBLIC “-//W3C//Dtd HTML 4.01 transitional//EN”
“http://www.w3.org/tr/html4/loose.dtd”>
<html lang=”it”>
<head>
<title>
Esempio di impaginazione realizzato per mezzo di tabelle
</title>
</head>
<body>
<table border=”0″ cellpadding=”0″ cellspacing=”5″ width=
“100%” bgcolor=”#FFFFFF”>
[…]
<tr>
<td width=”25%” valign=”top” bgcolor=”#FFFFFF”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″
width=”100%”>
<tr>
<td width=”100%” bgcolor=”#808080″>
<table border=”0″ cellpadding=”4″ cellspacing=”1″
width=”100%”>
<tr>
<td width=”100%” bgcolor=”#FFFF66″>
<b><font face=”Tahoma”>Menu di
navigazione</font></b>
</td>
</tr>
<tr>
<td width=”100%” bgcolor=”#EEEEEE”>
<b><a href=”tabforma.htm”><font face=
“Tahoma” size=”2″>Voce di menu
n.01</font></a></b>
</td>
</tr>
<tr>
<td width=”100%” bgcolor=”#FFFFFF”>
<b><a href=”tabforma.htm”><font face=
“Tahoma” size=”2″>Voce di menu
n.02</font></a></b>
</td>
</tr>
[…]
<tr>
<td width=”100%” bgcolor=”#EEEEEE”>
<b><a href=”tabforma.htm”><font face=
“Tahoma” size=”2″>Voce di menu
n.11</font></a></b>
</td>
</tr>
<tr>
<td width=”100%” bgcolor=”#FFFFFF”>
<b><a href=”tabforma.htm”><font face=
“Tahoma” size=”2″>Voce di menu
n.12</font></a></b>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
[…]
</table>
</body>
</html>


La prima cosa che si può notare leggendo questo estratto di codice è che, per ottenere il tipo di impaginazione illustrato nella >figura 1, è stato necessario inserire più tabelle l’una dentro l’altra, come in un gioco di scatole cinesi. Nel listato sopra riportato, che riguarda come abbiamo detto il solo menu di navigazione, le tabelle annidate sono tre (gli elementi table sono evidenziati in grassetto su sfondo giallo). In tutta la pagina, come si potrà constatare leggendone il listato integrale, sono state utilizzate ben dodici tabelle di impaginazione.

Se ne sarebbero forse potute utilizzare di meno, ma al costo di ricorrere – per i numerosi bordi da 1 pixel di spessore – all’uso di immagini spaziatrici, inserite ciascuna in un’apposita cella, che avrebbero finito per complicare ulteriormente la già intricata struttura tabellare.

Notiamo poi la ridondante quantità di codice necessaria per realizzare, con una simile tecnica, una singola voce di menu:

<tr>
<td width=”100%” bgcolor=”#FFFFFF”>
<b><a href=”tabforma.htm”><font face=

“Tahoma” size=”2″>Voce di menu

n.02</font></a></b>

</td>

</tr>


Di tutto questo blocco di codice, l’unico testo visibile nella pagina è la scritta “Voce di menu n.02” (evidenziata in grassetto nel listato). Tutto il resto, con la sola esclusione dell’elemento A, serve per specificare la formattazione e va ripetuto pari pari per ogni voce di menu.
16 / 72

L’alternativa accessibile: presentazioni attraverso i CSS 2

I Video di HTML.it

Matteo Collina, MQTT, IoT e i programmatori