Corso di HTML

Le liste

Le liste consentono di organizzare le informazioni e migliorarne l'accessibilitá.

Analizziamo tre tipi di liste:


Una lista ordinata é un elenco numerato di elementi.

Per creare una lista ordinata si utilizza il tag contenitore <ol>; ciascuna voce della lista viene racchiusa entro il tag contenitore <li>.

Ecco un codice d'esempio per creare una lista ordinata:

  <p>Ecco il materiale che lo studente deve portare con sé
  il primo giorno di scuola:</p>
  <ol>
  <li>zaino</li>
  <li>quaderno a quadretti</li>
  <li>diario</li>
  <li>astuccio</li>
  </ol>
  

Ed ecco la pagina corrispondente.

<ol> sta per ordered list e <li> per list item (voce dela lista).

L'attributo start del tag <ol> consente di cominciare la numerazione di una lista con un numero diverso da 1.

Modifichiamo, ad esempio, il precedente codice nel modo che segue:

  <p>Ecco il materiale che lo studente deve portare con sé
  il primo giorno di scuola:</p>
  <ol start="3">
  <li>zaino</li>
  <li>quaderno a quadretti</li>
  <li>diario</li>
  <li>astuccio</li>
  </ol>

Ed ecco la pagina corrispondente.

L'attributo type del tag <ol> consente di definire il tipo di numerazione degli elementi delle liste.

La tabella che segue illustra i tipi di numeri e lettere che possono essere utilizzati per elencare gli elementi di una lista ordinata.


type effetto esempi
A lettere maiuscole A,B,C,D,...
a lettere minuscole a,b,c,d,...
I numeri romani maiuscoli I,II,III,IV,...
i numeri romani minuscoli i,ii,iii,iv,...
1 numeri arabi (default) 1,2,3,4,...

Ed ecco una pagina di esempio.

Gli attributi start e type del tag <ol> sono deprecati.

Le specifiche dell'HTML 4.01 consigliano di utilizzare l'attributo style in luogo dell'attributo type.

Ecco il codice per impostare tramite style la numerazione con le lettere maiuscole:

  <ol style="list-style-type: upper-alpha">
  

La proprietá list-style-type dell'attributo style é impostata al valore upper-alpha.

Nella tabella che segue elenchiamo i valori della proprietá list-style-type equivalenti ai valori dell'attributo type:


list-style-type effetto esempi
upper-alpha lettere maiuscole A,B,C,D,...
lower-alpha lettere minuscole a,b,c,d,...
upper-roman numeri romani maiuscoli I,II,III,IV,...
lower-roman numeri romani minuscoli i,ii,iii,iv,...
decimal numeri arabi (default) 1,2,3,4,...


Una lista non ordinata é un elenco di elementi senza un particolare ordine.

Per creare una lista non ordinata bisogna utilizzare il tag contenitore <ul>.

<ul> sta per unordered list.

Ogni elemento della lista, esattamente come accade per le liste ordinate, é contenuto nel tag <li> e, a livello grafico, é preceduto da un punto.

Ecco un codice d'esempio per creare una lista non ordinata:

  <p>Ecco il materiale che lo studente deve portare con sé
  il primo giorno di scuola:</p>
  <ul>
  <li>zaino</li>
  <li>quaderno a quadretti</li>
  <li>diario</li>
  <li>astuccio</li>
  </ul>
  

Ed ecco la pagina corrispondente.

L'attributo type del tag <ul> consente di cambiare la forma del simbolo che precede gli elementi della lista.

type puó assumere i valori disc (default), circle e square.

L'attributo type del tag <ul> é deprecato ed il W3C consiglia l'utilizzo dell'attributo style.

La sintassi corrispondente é:

  <ul style="list-style-type: circle">
  

La proprietá list-style-type di style assume il valore circle.


Una lista di definizioni contiene un elenco di termini con le relative definizioni.

Le liste di definizioni sono racchiuse all'interno del tag contenitore <dl>.

<dl> sta per definition list.

Ogni elemento di una lista di definizioni é composto da due parti differenti: il termine e la definizione.

Ciascuna di queste parti ha un tag che le identifica.

Il tag contenitore <dt> identifica il termine che deve essere definito;

Il tag contenitore <dd> racchiude la definizione del termine.

<dt> sta per definition term; <dd> sta per define definition .

Ed ecco un esempio di lista di definizioni.