Liste annidate

Le liste fanno parte degli elementi HTML che possono essere annidati tra loro. Questo significa che vi possono essere liste nelle liste, che vengono visualizzate a video con u’impaginazione gerarchica resa tramite l’aumento dell’indentazione. Per esempio, per realizzare una lista di questo genere:
1. Caratteristiche del prodotto:
a. colore bianco
b. materiale plastico
c. lenti infrangibili
2. Misure disponibili:
a. small
b. medium
c. large
s i deve realizzare un elenco principale di tipo <ol> (di cui fanno parte i punti 1 e 2) e due sottoelenchi, sempre di tipo <ol>), in ogni riga. In HTML si usa un codice creato in questo modo:


<body bgcolor="#ffffff">
<h1>Elenchi indentati</h1>
<ol>
<li>Caratteristiche del prodotto:
<ol type="a">
<li>colore bianco</li>
<li>materiale plastico</li>
<li>lenti inflangibili</li>
</ol>
</li>
</ol>
</body>

La stessa cosa vale per gli elenchi puntati, con identiche modalità. Dovendo realizzare un elenco come il seguente:

  • Caratteristiche del prodotto:
  • colore bianco
  • materiale plastico
  • lenti infrangibili
  • Misure disponibili:
  • small
  • medium
  • large

si dovrà ricorrere al seguente codice:

<body bgcolor="#ffffff">
<h1>Elenchi indentati</h1>
<ul>
<li>Caratteristiche del prodotto:
<ul type="square">
<li>colore bianco</li>
<li>materiale plastico</li>
<li>lenti infrangibili</li>
<ul>
</li>
<li>Misure disponibili:
<ul type "square">
<li>small</li>
<li>medium</li>
<li>large</li>
</ul>
</li>
</ul>
</body>

Sempre con lo stesso meccanismo è possibile annidare gli elenchi a più livelli e mescolare vari tipi di liste. Ecco un esempio riepilogativo delle varie possibilità:


<body bgcolor="#ffffff">
<h1>Elenchi indentati</h1>
<ul>
<li>Caratteristiche del prodotto:
<ol type="a">
<li>colore bianco</li>
<li>materiali
<ol>
<li>plastica</li>
<li>titanio</li>
<li>celluloide</li>
</ol>
</li>
<li>Misure disponibili:
<ol type="a">
<li>small</li>
<li>medium</li>
<li>large</li>
</ol>
<li>
<li>Nomi degli articoli:
<dl>
<dt>Ice</dt>
<dd>un modello giovane e sportivo,
ideale sulla nece</dd>
<dt>Water</dt>
<dd>un modello studiato per il mare, per
non passare inosservati sulla spiaggi</dd>
</dl>
</lI>
</ul>
</body>

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...