Visualizzare Liste

Abbiamo visto come è possibile formattare del testo con il tag <pre>, ora immaginiamo di volre visualizzare una lista ordinata di articoli. Con un pò di pazienza riusciremo nel nostro intento senza problemi. Per agevolare questo tipo di formattazione è stato introdotto un tag ad hoc, anzi per la verità, ne sono stati introdotti due: uno per per liste ordinate <ol>; uno per liste non ordinate <ul>. La prima inserisce automaticamente un numero crescente ad ogni articolo <li> della lista (ordinata), mentre la seconda inserisce semplicemente un simbolo grafico che per default è un pallino pieno.

Esempio di lista ordinata:

<ol>
<li>Primo elemento
<li>Secondo elemento
<li>Terzo elemento
<li>Quarto elemento
<li>Quinto elemento
</ol>

che darà il risultato che vedete sotto

1. Primo elemento
2. Secondo elemento
3. Terzo elemento
4. Quarto elemento
5. Quinto elemento

Esempio di lista non ordinata:

<ul>
<li>Primo elemento
<li>Secondo elemento
<li>Terzo elemento
<li>Quarto elemento
<li>Quinto elemento
</ul>

che darà il risultato che segue

• Primo elemento
• Secondo elemento
• Terzo elemento
• Quarto elemento
• Quinto elemento

Notate che il tag che identifica gli elementi della lista è identico per i due tipi di liste. Parliamo adesso delle possibili varianti di queste liste che sostanzialmente riguardano l'elemento grafico delle stesse. Per quanto riguarda una lista ordinata oltre numero arabo progressivo di default, possiamo con l'attributo "type=" ordinare gli elementi della lista con i numeri romani piuttosto che con le lettere dell'alfabeto, secondo la seguente tabella:

Numeri Arabi	Numeri Romani	Romani Minuscole	Lettere Maiuscole	Lettere Minuscole
<ol type="1">	<ol type="I">	<ol type="i">	<ol type="A">	<ol type="a">
1. Primo elemento	I. Primo elemento	i. Primo elemento	A. Primo elemento	a. Primo elemento
2. Secondo elemento	II. Secondo elemento	ii. Secondo elemento	B. Secondo elemento	b. Secondo elemento
3. Terzo elemento	III. Terzo elemento	iii. Terzo elemento	C. Terzo elemento	c. Terzo elemento
4. Quarto elemento	IV. Quarto elemento	iv. Quarto elemento	D. Quarto elemento	d. Quarto elemento

Per la lista non ordinata invece possiamo scegliere tra gli elementi di quest'altra tabella:

Pallino pieno	Pallino vuoto	Quadretto pieno
<ul type="disc">	<ul type="circle">	<ul type="square">
Primo elemento Secondo elemento Terzo elemento Quarto elemento	Primo elemento Secondo elemento Terzo elemento Quarto elemento	Primo elemento Secondo elemento Terzo elemento Quarto elemento

Nidificazione

Introduciamo adesso il concetto di nidificazione che ogni buon programmatore conosce bene. Con questo termine intendiamo un processo inserito all'interno di un altro. Il processo nidificato però deve necessariamente terminare prima della conclusione dell'altro che lo contiene. Se il concetto così enunciato sembra astruso, l'aiuto di un esempio pratico applicato alle nostre liste, lo renderà immediatamente comprensibile:

1. Primo elemento
   • Primo nidificato
   • Secondo nidificato
   • Terzo nidificato
2. Secondo elemento
   • Seconda lista nidificata
   • Seconda lista nidificata
   • Seconda lista nidificata
3. Terzo elemento
   • Terza lista nidificata
   • Terza lista nidificata
   • Terza lista nidificata

La lista su visualizzata è stata ottenuta con la seguente programmazione (anche se i puristi non la ritengono tale):

<ol>
<li>Primo elemento
<ul type="disc">
<li>Primo nidificato
<li>Secondo nidificato
<li>Terzo nidificato
</ul>
<li>Secondo elemento
<ul type="square">
<li>Seconda lista nidificata
<li>Seconda lista nidificata
<li>Seconda lista nidificata
</ul>
<li>Terzo elemento
<ul type="circle">
<li>Terza lista nidificata
<li>Terza lista nidificata
<li>Terza lista nidificata
</ul>
</ol>

credo che il listato si commenti da sè, e quindi non è necessaria altra spiegazione, se non per farvi notare che la lista può essere complicata a piacimento senza limiti, con la sola accortezza di rispettare la regola della nidificazione.

Lista di Definizione

Oltre le due liste su illustrate ne esiste una terza detta di definizione che viene utilizzata per bibbliografie o sommari e indici. Questo tipo di lista non contrassegna i vari elementi con numeri o simboli, in quanto uno dei suoi componenti funge da motivo di indentazione o Titolo.
Esempio:

Titolo 1

Definizione 1

Titolo 2

Definizione 2

Titolo 3

Definizione 3

la stessa è stata ottenuta con il seguente listato, dove <dl> - <dt> - <dd> stanno ad identificare rispettivamente i termini: DefinitionList, DefinitionTitle, DefinitionData.

<dl>
<dt>Titolo 1
<dd>Definizione 1
<dt>Titolo 2
<dd>Definizione 2
<dt>Titolo 3
<dd>Definizione 3
</dl>

anche questo tipo di lista può essere nidificata in combinazione con le altre prima viste.
Bene con questo abbiamo esaurito il capitolo delle liste, buon divertimento e arrivederci al prossimo tutorial!