10 Liste

Argomenti

  1. Introduzione alle liste
  2. Liste non ordinate (UL), liste ordinate (OL), ed elementi della lista (LI)
  3. Liste di definizioni: gli elementi DL, DT, e DD
    1. Visualizzazione delle liste
  4. Gli elementi DIR e MENU

10.1 Introduzione alle liste

HTML offre agli autori diversi meccanismi per specificare liste di informazioni. Ogni lista deve contenere uno o più elementi della lista. Le liste possono contenere:

La lista precedente, per esempio, è una lista non ordinata, creata con l'elemento UL:


<UL>
<LI>Informazioni non ordinate. 
<LI>Informazioni ordinate. 
<LI>Definizioni. 
</UL>

Una lista ordinata, creata usando l'elemento OL, deve contenere informazioni in cui l'ordine deve essere evidenziato, come in una ricetta:

  1. Mescolare a fondo gli ingredienti non liquidi.
  2. Versare gli ingredienti liquidi.
  3. Mescolare per 10 minuti.
  4. Cuocere per un'ora a 300 gradi.

Le liste di definizioni, create usando l'elemento DL, generalmente consistono di una serie di coppie termini/definizioni (benché le liste di definizioni possano avere altre applicazioni). Così, pubblicizzando un prodotto, si può usare una lista di definizioni:

Costo inferiore
La nuova versione di questo prodotto costa significativamente meno della precedente!
Più semplice da usare
Abbiamo modificato il prodotto perché così è più semplice da usare!
Sicuro per i bambini
Puoi lasciare i tuoi bambini soli in una stanza con questo prodotto e non si faranno male (non è una garanzia).

definito in HTML come:


<DL>
<DT><STRONG>Costo inferiore</STRONG>
<DD>La nuova versione di questo prodotto costa significativamente meno della
precedente!
<DT><STRONG>Più semplice da usare</STRONG>
<DD>Abbiamo modificato il prodotto perché così è più semplice da usare!
<DT><STRONG>Sicuro per i bambini</STRONG>
<DD>Puoi lasciare i tuoi bambini soli in una stanza con questo prodotto e
non si faranno male (non è una garanzia).
</DL>

Le liste possono anche essere annidate e tipi differenti di liste possono essere usati insieme, come nel seguente esempio, che è una lista di definizioni che contiene una lista non ordinata (gli ingredienti) e una lista ordinata (la procedura):

Gli ingredienti:
La procedura:
  1. Mescolare a fondo gli ingredienti non liquidi.
  2. Versare gli ingredienti liquidi.
  3. Mescolare per 10 minuti.
  4. Cuocere per un'ora a 300 gradi.
Note:
La ricetta può essere migliorata aggiungendo uva passa.

L'esatta visualizzazione dei tre tipi di lista dipende dall'interprete. Si scoraggiano gli autori dall'uso di liste per il semplice rientro del testo. Questo riguarda lo stile e va gestito con i fogli di stile.

10.2 Liste non ordinate (UL), liste ordinate (OL), ed elementi della lista (LI)


<!ELEMENT UL - - (LI)+                 -- lista non ordinata -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT OL - - (LI)+                 -- lista ordinata -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Tag iniziale: richiesto, Tag finale: richiesto


<!ELEMENT LI - O (%flow;)*             -- elemento della lista -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Tag iniziale: richiesto, Tag finale: facoltativo

Definizioni degli attributi

type =  style-information [CI]
Disapprovato. Questo attributo imposta lo stile di un elemento della lista. I valori attualmente disponibili sono rivolti agli interpreti HTML visuali. I valori possibili sono descritti sotto (assieme alle informazioni sulle maiuscole).
start = number [CN]
Disapprovato. Solo per OL. Questo attributo specifica il numero di partenza del primo elemento di una lista ordinata. Il numero d'inizio predefinito è "1". Notare che mentre il valore di questo attributo è n intero, l'etichetta corrispondente può essere non numerica. Così, quando lo stile dell'elemento della lista e una lettera maiuscola (A, B, C, ...), start=3 significa "C". Quando lo stile è un numero romano minuscolo, start=3 significa "iii", ecc.
value = number [CN]
Disapprovato. Solo per LI. Questo attributo imposta il numero dell'elemento corrente della lista. Notare che mentre il valore di questo attributo è in intero, l'etichetta corrispondente può essere non numerica (vedere l'attributo start).
compact [CI]
Disapprovato. Quando impostato, questo attributo booleano suggerisce agli interpreti HTML visuali di mostrare la lista in un modo più compatto. L'interpretazione di questo attributo dipende dall'interprete HTML.

Attributi definiti altrove

Le liste ordinate e non ordinate sono mostrate in modo identico tranne per il fatto che gli interpreti HTML visuali numerano gli elementi delle liste ordinate. Gli interpreti HTML possono presentare questi numeri in vari modi. Gli elementi delle liste non ordinate non sono numerati.

Entrambi i tipi di liste sono costituiti da sequenze di elementi di lista definiti dall'elemento LI (di cui può essere omesso il tag finale).

Questo esempio illustra la struttura di base di una lista.


<UL>
   <LI> ... primo elemento della lista...
   <LI> ... secondo elemento della lista...
   ...
</UL>

Le liste possono anche essere annidate:

ESEMPIO DISAPPROVATO:


<UL>
     <LI> ... Livello uno, numero uno...
     <OL> 
        <LI> ... Livello due, numero uno...
        <LI> ... Livello due, numero due...
        <OL start="10"> 
           <LI> ... Livello tre, numero uno...
        </OL> 
        <LI> ... Livello due, numero tre...
     </OL> 
     <LI> ... Livello uno, numero due...
</UL>

Dettagli sulla numerazione. Nelle liste ordinate, non è possibile continuare automaticamente la numerazione della lista da una lista precedente o nascondere la numerazione di alcuni elementi. Comunque gli autori possono reimpostare il numero di un elemento della lista settando il suo attributo value. La numerazione continua dal nuovo valore per l'elemento successivo della lista. Per esempio:


<ol>
<li value="30"> crea l'elemento numero 30.
<li value="40"> crea l'elemento numero 40.
<li> crea l'elemento numero 41.
</ol>

10.3 Liste di definizioni: gli elementi DL, DT, e DD


<!-- liste di definizioni - DT per il termine, DD per la sua definizione -->

<!ELEMENT DL - - (DT|DD)+              -- lista di definizioni -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Tag Iniziale: richiesto, Tag Finale: richiesto


<!ELEMENT DT - O (%inline;)*           -- termine della definizione -->
<!ELEMENT DD - O (%flow;)*             -- descrizione della definizione -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Tag iniziale: richiesto, Tag finale: facoltativo

Attributi definiti altrove

Le liste di definizioni variano solo leggermente dagli altri tipi di lista in cui un elemento della lista consiste di due parti: un termine e una descrizione. Il termine è dato dall'elemento DT ed è ristretto a un contenuto in linea. La descrizione è data con un elemento DD che ospita un contenuto a livello blocco.

Ecco un esempio:

  

<DL>
  <DT>Dweeb
  <DD>persona giovane eccitabile che può maturare
    in un <EM>Nerd</EM> o <EM>Geek</EM>

  <DT>Cracker
  <DD>hacker in Internet

  <DT>Nerd
  <DD>uomo così nella Rete che dimentica il
    compleanno di sua moglie
</DL>

Ecco un esempio con termini e descrizioni multiple:


<DL>
   <DT>Center
   <DT>Centre
   <DD> Un punto equidistante da tutti i punti
              della superficie di una sfera.
   <DD> In alcuni sport all'aperto, il giocatore che
              occupa la posizione centrale del campo, court,
              o linea d'attacco.
</DL>

Un'altra applicazione di DL, per esempio, è per scrivere dialoghi, con ogni DT che dà un nome alla persona che parla, e ogni DD che contiene le sue parole.

10.3.1 Visualizzazione delle liste

Nota.La seguente è una descrizione informativa del comportamento di alcuni interpreti HTML visuali attuali nella composizione delle liste. I fogli di stile consentono un migliore controllo della composizione delle liste (ad esempio, per la numerazione, le convenzioni dipendenti dalla lingua, i rientri, ecc.).

Gli interpreti HTML visuali generalmente rientrano le liste annidate rispetto al livello corrente di annidamento.

Per entrambi OL e UL, l'attributo type specifica le opzioni di visualizzazione per gli interpreti HTML visuali.

Per l'elemento UL, valori possibili per l'attributo type sono disc, square, e circle. Il valore predefinito dipende dal livello di annidamento della lista corrente. Questi valori sono maiuscolo indifferenti.

Come ogni valore viene mostrato dipende dall'interprete HTML. Esso deve tentare di visualizzare un "disc" come un piccolo cerchio pieno, un "circle" come un piccolo cerchio vuoto, e uno "square" come un piccolo quadrato vuoto.

Un interprete HTML grafico può mostrarli così:

Una possibile visualizzazione di un disco per il valore "disc"
Una possibile visualizzazione di un cerchio per il valore "circle"
Una possibile visualizzazione di un quadrato per il valore "square"

Per l'elemento OL, i possibili valori per l'attributo type sono riassunti nella tabella sotto (sono maiuscolo significativi):

TypeStile di numerazione
1numeri arabi1, 2, 3, ...
alettere minuscolea, b, c, ...
Alettere maiuscoleA, B, C, ...
inumeri romani minuscolii, ii, iii, ...
Inumeri romani maiuscoliI, II, III, ...

Notare che l'attributo type è disapprovato e gli stili delle liste dovrebbero essere gestiti mediante i fogli di stile.

Per esempio, usando CSS, si può specificare che lo stile dei numeri degli elementi di una lista numerata deve essere con numeri romani minuscoli. Nel brano sotto, ogni elemento OL appartenente alla classe "withroman" vuole un numero romano davanti ai suoi elementi.


<STYLE type="text/css">
OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> Passo uno ...  
<LI> Passo due ...
</OL>
</BODY>

La visualizzazione di una lista di definizioni dipende anche dall'interprete HTML. L'esempio:

  

<DL>
  <DT>Dweeb
  <DD>persona giovane eccitabile che può maturare
    in un <EM>Nerd</EM> o <EM>Geek</EM>

  <DT>Cracker
  <DD>hacker in Internet

  <DT>Nerd
  <DD>uomo così nella Rete che dimentica il
    compleanno di sua moglie
</DL>

potrebbe essere visualizzato così:


Dweeb
       persona giovane eccitabile che può maturare in un Nerd o Geek

Cracker
       hacker in Internet

Nerd
       uomo così nella Rete che dimentica il compleanno di sua moglie

10.4 Gli elementi DIR e MENU

DIR e MENU sono disapprovati.

Vedere la DTD transitoria per la definizione formale.

Attributi definiti altrove

L'elemento DIR è stato progettato per creare il listato di una directory multicolonna. L'elemento MENU è stato progettato per essere usato per le liste con una singola colonna. Entrambi gli elementi hanno la stessa struttura di UL, ma una visualizzazione differente. In pratica, un interprete HTML mostra una lista DIR o MENU esattamente come una lista UL.

Si raccomanda fortemente di usare UL invece di questi elementi.