Le liste

Le liste

Di inHTML Tag , , , , , , ,

Ci sono molte occasioni dove vorremmo fare una lista, pensiamo alla spesa o alle cose da fare.

Nella scrittura di un documento per il web, HTML ci mette a disposizione tre diversi tipi che serviranno per creare:

liste ordinate, cioè liste dove ogni elemento è ordinato numericamente.

liste non ordinate, liste che iniziano con un punto o un simbolo.

liste di definizione, sono costruite su un set di termini con la definizione per ognuna di questi (proprio come un dizionario con le definizioni delle parole).

Vediamoli nel dettaglio:

liste ordinate

<ol> – tag per creare una lista ordinata

<li> – tag contenente ogni elemento della lista

Esempio ricetta:

  1. mettere l’acqua sul fuoco
  2. salare l’acqua
  3. quando bolle buttare la pasta nell’acqua salata
  4. a cottura terminata, saltare il padella con il sugo
  5. servire

Questo lo possiamo ottenere scrivendo (ricordiamoci di chiudere i tag anche se HTML5 riesce a capire quando finisce un particolare tag):

<ol>
  <li>mettere l'acqua sul fuoco</li>
  <li>salare l'acqua</li>
  <li>quando bolle buttare la pasta nell acqua salata</li>
  <li>a cottura terminata, saltare il padella con il sugo</li>
  <li>servire</li>
</ol>

il tag ol ha due attributi: type e start. Type identifica il tipo di numero e start indica da che numero iniziare a contare:

Valore di type Descrizione
type=”1″ numeri interi “arabi” (valore di default)
type=”a” ordine alfabetico minuscolo
type=”A” ordine alfabetico maiuscolo
type=”i” numeri romani minuscoli
type=”I” numeri romani maiuscoli

Quindi per cambiare il comportamento della lista basta inserire l’attributo che più ci interessa e da quale numero iniziare a contare.

<ol type="I" start="5">

avremo la lista ordinata secondo i numeri romani che iniziano dal numero 5.

Se vogliamo cambiare la numerazione all’interno della lista (solo nelle liste ordinate) possiamo inserire l’attributo value al tag desiderato:

<li value="20">Ventesimo elemento</li>

Il successivo elemento sarà il numero 21.

Liste non ordinate

Le liste non ordinate potrebbero essere le liste della spesa dove l’ordine non è importante.

Si utilizza il tag <ul> e il tag <li> per gli elementi

  • pane
  • olio
  • farina
  • insalata
  • carne
  • uova

Questo si ottiene scrivendo nel codice:

<ul>
  <li>pane</li>
  <li>olio</li>
  <li>farina</li>
  <li>insalata</li>
  <li>carne</li>
  <li>uova</li>
</ul>

Nelle liste non ordinate possiamo cambiare solo il simbolo che precede gli elementi della lista usando una definizione di stile (CSS in linea):

Valore Descrizione
disc setta il simbolo come un dischetto nero (valore di default)
circle setta il simbolo come un cerchio
square setta il simbolo come un quadrato nero
none nessun simbolo

Quindi cambiare il simbolo per ottenere un cerchio scriveremo:

<ul style="list-style-type:disc;">

Liste di definizione

Le liste di definizione sono liste di termini con la loro descrizione.

<dl> è il tag per la creazione delle liste di definizione, <dt> contiene il termine da definire e <dd> contiene la definizione.

Vediamo subito un esempio:

<dd>Quei bravi ragazzi</dd>
  <dt>Regista</dt>
  <dd>Martin Scorsese </dd> 
  <dt>Attori</dt>
  <dd>Robert De Niro</dd>
  <dd>Ray Liotta</dd>
  <dd>Joe Pesci</dd>
  <dd>Lorraine Bracco</dd>
  <dd>Paul Sorvino</dd>
  <dd>Frank Adonis</dd>
</dl>
Da cui otterremo:
Quei bravi ragazzi
Regista
Martin Scorsese
Attori
Robert De Niro
Ray Liotta
Joe Pesci
Lorraine Bracco
Paul Sorvino
Frank Adonis

Liste annidate

Puoi inserire altre liste all’interno di un elemento <li> per creare una sottolista o lista annidata:

<ul>
  <li>Pasticceria</li>
  <ul>
    <li>Croissant</li>
    <li>Mille foglie</li>
    <li>Profitterol</li>
</ul>

In questo esempio due liste non ordinate annidate o nidificate da cui otterremo:

  • Pasticceria
    • Croissant
    • Mille foglie
    • Profitterole
Filippo