Spesso su una pagina web si ha la necessità di descrivere voci o altro sottoforma di elenchi, html offre questa possibilità con il tag <LI> (voce dell'elenco) che in abbinamento con uno degli altri tags permette di ottenere un prodotto finale molto simile a quello che offrono programmi di videoscrittura.
<LI>
Elemento voce dell'elenco, da solo serve a poco, deve essere combinato con altri elementi descritti sotto.
<DIR>...</DIR>
L'elemento <DIR> può essere utilizzato per un elenco di voci disposte su colonne, per default la larghezza è di 24 caratteri, al suo interno si adopera <LI> come voce dell'elenco.
<DIR>
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</DIR>
|
Questo il risultato:
|
<DL>...</DL>
L'elemento <DL> accetta al suo interno gli elementi <DT> e <DD> come voci dell'elenco. L'elemento <DT> riserva un terzo dello schermo per la voce descritta, mentre il restante è assegnato all'elemento <DD> che porta la descrizione una riga sotto.
<DL>
<DT>WebLink<DD>Tutto per la tua home page
<DT>CSS <DD>Cascading Style Sheets
<DT>META <DD>Comandi Speciali
<DT>FAQ <DD>Le domande frequenti
</DL>
|
Questo il risultato:
|
E' possibile ridurre lo spazio fra le righe nel caso in cui l'elenco fosse molto lungo, per fare questo si adopera l'attributo COMPACT nel tag <DL>
<DL COMPACT>
|
Questo il risultato:
|
<MENU>...</MENU>
L'elemento <MENU> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione compatta di un elenco puntato. Personalmente non vedo molte differenze con l'elemento <DIR>
<MENU>
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</MENU>
| Questo il risultato: |
<OL>...</OL>
L'elemento <OL> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione ordinata e numerata di un elenco puntato.
<OL>
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</OL>
|
Questo il risultato:
|
Anche <OL> accetta l'attributo COMPACT per una visualizzazione più compatta. Per default la numerazione segue 1, 2 , 3, e così via ma grazie all'attributo TYPE si possono cambiare le voci dell'elenco in uno dei seguenti modi:
TYPE=A Lettere maiuscole, ad esempio : A , B, C, ...
TYPE=a Lettere minuscole, ad esempio : a, b, c, ...
TYPE=I Numerazione romana maiuscola, ad esempio: I, II, III, ...
TYPE=i Numerazione romana minuscola, ad esempio: i, ii, iii, ...
TYPE=l I numeri come da default: 1, 2, 3, ...
<OL TYPE="a">
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</OL>
| Questo il risultato:
|
Nel caso in cui si volesse partire da un qualsiasi numero diverso da "1", o da una lettera diversa da "a", sarà sufficiente fare uso dell'attributo START impostando il numero da cui iniziare l'incremento.
<OL START="3">
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</OL>
| Questo il risultato:
|
Vediamo un esempio anche nel caso in cui si adoperino le lettere. Dovendo iniziare dalla lettera "C" ed essendo questa la terza lettera dell'alfabeto, si dovrà inserire il numero "3":
<OL TYPE="a" START="3">
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</OL>
| Questo il risultato:
|
<UL>...</UL>
L'elemento <UL> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione non ordinata di un elenco puntato.
<UL>
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</UL>
|
Questo il risultato:
|
Anche <UL> accetta l'attributo COMPACT per una visualizzazione più compatta. A questo tipo di elenco sono assegnati dei simboli che variano man mano che ci si sposta di livello, i simboli adoperati sono: disco solido, cerchio, quadrato. Volendo si possono cambiare, è sufficiente specificarlo nell'attributo TYPE:
TYPE=disc disco solido
TYPE=circle cerchietto
TYPE=square quadrato
<UL TYPE="circle">
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</UL>
| Questo il risultato:
|
Nel caso in cui ci fosse la necessità di cambiare segno, si potrà farlo con l'attributo TYPE anche dall'interno dei vari TAGS <UL>.
<UL TYPE="square">
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</UL>
| Questo il risultato:
|