If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Chiunque conosca l’HTML sa (o dovrebbe sapere) come rappresentare le liste, che possono essere
non ordinate:
<ul> <li>Rosso</li> <li>Nero</li> <li>Arancione</li> </ul>
oppure ordinate:
<ol>
<li>Rosso</li>
<li>Nero</li>
<li>Arancione</li>
</ol>
Le liste servono per elencare i colori preferiti, gli ultimi dischi ascoltati, le cose da comperare al supermercato oppure le pagine di un sito (ed ovviamente molto altro). La sostanziale differenza tra le liste ordinate e quelle non ordinate consiste nell’importanza che viene data all’ordine in cui gli oggetti compaiono nella lista. Per esempio, la lista di azioni che devo seguire per fare una torta sarà una lista ordinata (le azioni devono essere fatte in un ordine preciso).
Un oggetto di una lista può contenere un’altra lista e così all’infinito:
<ul>
<li>Monitor
<ul>
<li>CRT</li>
<li>LCD
<ul>
<li>15 pollici</li>
<li>17 pollici</li>
<li>19 pollici</li>
</ul>
</li>
</ul>
</li>
<li>Fotocamere
<ul>
<li>Digitali</li>
<li>Analogiche</li>
</ul>
</li>
</ul>
ottenendo un effetto di questo tipo:
- Monitor
- CRT
- LCD
- 15 pollici
- 17 pollici
- 19 pollici
- Fotocamere
- Digitali
- Analogiche
Le liste sono molto potenti anche in virtù del fatto che all’interno di un tag li ci può stare un qualunque elemento “block” (per esempio div, h1, h2, p…) e gli elementi “inline” (a, img , strong).
dalle DTD XHTML strict (%Flow sono grossomodo gli elementi block + gli elementi inline):
< !ELEMENT ul (li)+> < !ELEMENT ol (li)+> < !ELEMENT li %Flow;>
(i tag UL e OL possono contenere solo un numero imprecisato di LI, ogni elementi LI può contenere un po’ di tutto).
Fatte queste premesse vediamo come sono strutturare e che cosa ci possono offrire le “definition list”.
Partiamo da un esempio:
<dl> <dt>proteine</dt> <dd>polimero costituito da amminoacidi</dd> <dt>ormone</dt> <dd>sostanza che modula il metabolismo</dd> </dl>
Con il codice sopra si ottiene qualcosa del genere (senza applicare CSS particolari):
- proteine
- polimero costituito da amminoacidi
- ormone
- sostanza che modula il metabolismo
I mattoni della definition list sono:
<dl> la definition list <dt> la definition term <dd> definition description
Quindi, la DL raccoglie coppie di termini / descrizioni (domanda / risposta, parola / significato, parola / sinonimo, acronimo / spiegazione).
Diamo un occhio ancora alla DTD per scroprire due cose molto importanti:
< !ELEMENT dl (dt|dd)+> < !ELEMENT dt %Inline;> < !ELEMENT dd %Flow;>
La prima constatazione è che una DL può contenere una qualunque combinazione di DT e DD. Quindi la “definition list” permette di esprimere definizioni del tipo N/M:
1/M
<dl> <dt>internet</dt> <dd>la più grande rete telematica mondiale</dd> <dd>la rete globale</dd> <dd>rete logica di enorme complessità</dd> </dl>
N/1
<dl> <dt>www</dt> <dt>Web</dt> <dd>rete di risorse di informazioni</dd> </dl>
Un esempio N/M inventatevelo voi. Spero abbiate capito l’antifona.
La seconda constatazione è che il tag DD può contenere tutto quello che contengono le LI (quindi oggetti block ed inline), mentre all’interno di un DT ci possono stare solo elementi “inline”.
Questa potrebbe essere una grossa limitazione, ma è una conseguenza logica di come è stato definito l’utilizzo delle “liste di definizioni”.
Nel prossimo articolo vedremo come ottenere diversi effetti applicando stili CSS. »»