Liste in html: liste ordinate, non ordinate, di definizione e liste annidate.

Liste in HTML sono utilizzati per  raggruppare  informazioni correlate. Ci sono tre principali tipi di elenchi:

  1. Lista non ordinata - <ul> - ogni voce dell'elenco viene indicata con il tag <li> e evidenziata con  un marcatore
  2. lista numerata - <ol> - ogni voce dell'elenco viene indicata con il tag <li> e prima del testo viene numerazione
  3. elenco con  descrizione - <dl> - è costituito da coppie di tag  <dt> - <dd> dove .nel tag <dd ></dd> viene racchiusa la descrizione

 

Ogni lista posiamo dire che un  contenitore all'interno del quale si trovano gli elementi della  lista e o  descrizione come aviene nelle liste con descrizione. Elementi della llista si comportano come elementi Block, quindi occupano sempre una nuova riga per tutta la larghezza del blocco  e ogni nuova voce della lista si ritrova sotto la precedente . Ogni elemento della lista ha un marcatore che si trova sul lato sinistro,  che puo essere un numero(nella lista numerata)  un  simbolo (nella lista non numerata) o un disegno 

Come creare un elenco o una lista in HTML.

1. Lista non ordinata

Elenco non ordinato è una lista non numerata  (dall'inglese. Unordered List ). Viene creato utilizzando la coppia di tag <ul> </ ul>. Come marcatura di varie elementi della lista non ordinata può essere un cerchio vuoto o un quadrato pieno.
Ogni browser come da parametri predefiniti aggiunge proprie stili  per un elenco non ordinato, esempio :

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Quindi se non ti piace potresti sempre  inventare gli  stili proprie 

Ogni elemento della lista viene creato con la coppia di tag <li> </ li> (dall'inglese. List Item).

<ul>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ul>

  • Microsoft
  • Google
  • Apple
  • IBM

2. Liste ordinate o liste numerate

Un elenco numerato viene creato utilizzando la coppia di tag <ol> </ ol>. Ogni elemento della lista viene creato usando sempre  copia di tag <li></li>. Durante la visualizzazione sul browser  ogni elemento viene numerato in maniera automatica e se si rimove uno di  elementi il suo numero passa a quello successivo.

Anche liste numerati hanno i propri stili predefiniti per ogni browser:

 

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Attributi delle liste 

Per il tag <li> è disponibile  attributo  value , che permette di cambiare il numero di partenza di conteggio predefinito per la voce di elenco selezionato. Ad esempio, se per il primo elemento della lista impostare <li value = "10">, la numerazione sarà ricalcolato partendo dal 10

Per il tag <ol> sono disponibili i seguenti atributi
reversed  -questo atributo imposta la visualizzazione della numerazione in ordine inverso  (ad esempio, 9, 8, 7 ...).

start- questo atributo imosta il numero di partenza di numerazione per esempio <ol start="10"> e possibile anche impostare contemporaneamente tipo di ordinazione <ol type="I" start="10">

type- L'attributo type specifica il tipo di marcatore da utilizzare nella lista (in forma di lettere o numeri). I valori accettati sono :

1 - il valore di default, numerazione decimale.

A - numerazione dell'elenco in alfabetico, lettere maiuscole (A, B, C, D).

a - la numerazione della lista in ordine alfabetico, lettere minuscole (a, b, c, d).

I - numerazione numeri  romani maiuscole (I, II, III, IV).
i - numerazione numeri romani minuscoli (i, ii, iii, iv ).

Markup HTML

<ol>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ol>

  1. Microsoft
  2. Google
  3. Apple
  4. IBM

Guarda il video  dal nostro corso gratuito Linguaggio HTML

animatedDude

video prevui

3. Liste di definizione

Le liste di definizioni vengono creati utilizzando il tag <dl> </ dl>. Per aggiungere un elemento si utilizza il tag  <dt> </ dt>, e per inserire una definizione - tag <dd> </ dd>.

Anche le liste con definizione hanno gli propri stili in ogni browser:

dl {margin-top: 1em; margin-bottom: 1em;}

Esempio

<dl>
  <dt>Film </dt>
    <dd>”Ultimo estate</dd>
  <dt>Attori</dt>
    <dd>Pipo Palino </dd>
    <dd>Marco Palino </dd>
    <dd>Andrea Palino</dd>
    <dd>Angela Riva</dd>
</dl>

4. Liste annidate

Spesso, una semplice lista non è sufficiente, ad esempio, quando si crea una tabella di contenuti non potrai fare a meno di elementi nidificati. Il codice per la lista annidata sarà come segue:

<ul>
 <li>Capitolo1.</li>
  <li>Capitolo 2.
    <ul>
      <li>Sotto capitolo 2.1.</li>
       <li> Sotto capitolo 2.2.     
        <ul>
          <li> Sotto capitolo 2.2.1.</li>
          <li> Sotto capitolo 2.2.2.</li>
          </ul>
       </li>          
      <li> Sotto capitolo 2.3.</li>
    </ul>
  </li>
 <li>Capitolo 3.</li>
</ul>

  • Capitolo1.
  • Capitolo 2.
    • Sotto capitolo 2.1.
    • Sotto capitolo 2.2.
      • Sotto capitolo 2.2.1.
      • Sotto capitolo 2.2.2.
    • Sotto capitolo 2.3.
  • Capitolo 3.

5. Liste numerate a multi-level

Lista Multi-level è usata per visualizzare l'elenco degli elementi a diversi livelli con diversi margini. Il codice per l'elenco numerato multilivello è la seguente:

<ol>
  <li></li> <!-1.->
  <li>Sezione          
    <ol>
      <li>Sezione</li> <!-2.1.->
      <li>Sezione</li> <!-2.2.->
      <li> Sezione
        <ol>
          <li>Sezione</li> <!-2.3.1.->
          <li>Sezione</li> <!-2.3.2.->
          <li>Sezione</li> <!-2.3.3.-> 
        </ol>
      </li> <!-2.3.->
      <li>Sezione</li> <!-2.4.->  
    </ol>
  </li> <!-2.->
  <li>Sezione</li> <!-3.->        
  <li>Sezione</li> <!-4.->        
</ol>

Questo markup creerà per ogni elenco nidificato una nuova numerazione a partire da uno. Per fare una numerazione diversa, si deve utilizzare le seguenti proprietà:
counter-reset - azzera uno o più contatori, impostando il valore per azzerare(o inizilare della lista che segue);
counter-increment imposta il valore di incremento del contatore, ossia, con il quale passo sarà numerato ogni elemento successivo;
content – genera contenuto, in questo caso è responsabile per assegnazione di un numero prima d'ogni elemento dell'elenco.

ol {list-style: none; /*eliminiamo stili predefiniti per le liste dal browser in uso */
/*  Valore iniziale del contatore non è impostato quindi si parte da 0  */ 
counter-reset: li; /* eliminiamo la numerazione standart */
}
li:before {
/* Definiamo elemento che sara numerato è il "li". Pseudo elemento  :before indica che il contenuto introdotto con la proprietà content vera posizionato prima del elemento nella lista . E sempre qui indichimo il valore del incremento del contatore  (da default è uguale a 1). */
counter-increment: li; 
/* Con aiuto della proprietà content visualizziamo il numero del elemento della lista :counters() significa, che il testo generato rappresenta valore di tutti i contatori con questo nome. Il punto fra le virgolette aggiunge un punto di divisione tra i numeri e il punto con lo spazio vine aggiunto prima del contenuto di ogni elemento della lista */
content: counters(li,".") ". "; 
}

 

  1. Sezione
    1. Sezione
    2. Sezione
    3. Sezione
  2. Sezione
    1. Sezione
    2. Sezione

Vediamo anche il codice di questa lista a molti livelli, qui gia utilizzeremo linguaggio CSS

Stili CSS
<style >
li {
  /* tolgo la numerazione */
  list-style-type: none !important;  
  /* Lasci numerazione per IE6 e piu vecchie ancora */
  list-style-type: decimal;
}
  /* Facciamo partire contatore  */
  ol {
  counter-reset: list1;
}
ol li:before {
  /* Aumentiamo valore del contatore  */
  counter-increment: list1;
  /* Visualizziamo valore  */
  content: counter(list1) ". ";
}
ol ol {
  /* Facciamo partire contatore del elenco annidato */
  counter-reset: list2; }
ol ol li:before {
   /* Aumentiamo valore del contatore */
  counter-increment: list2;
  /* Visualizziamo valore del tipo 2.1, 2.2,... */
  content: counter(list1) "." counter(list2) ". ";
}
</style>
 
 
Markup HTMl
<ol>
  <li>Sezione
  <ol>
    <li>Sezione</li>
    <li>Sezione</li>
    <li>Sezione</li>
  </ol>
  </li>
  <li>Sezione
  <ol>
    <li>Sezione</li>
    <li>Sezione</li>
  </ol>
  </li>
</ol>
 

E nelle prosime lezioni vediamo qualche esempio di decorazione delle liste

 

Letto 1611 volte
Altro in questa categoria: « Forme nel HTML5 HTML5 video »