Spesso abbiamo bisogno di creare una lista di elementi in una pagina HTML. Ad esempio, se stiamo facendo il sito di un ristorante, potrebbe essere utile fare un elenco con le pietanze del giorno:
- Pasta asciutta
- Secondo Piatto
- Contorno
E così via. In HTML è possibile creare quattro tipi di elenchi:
- Elenco puntato (elenco non ordinato)
- Elenco numerato (Elenco ordinato)
- Elenchi di definizione
- Elenchi strutturati
Vediamo insieme come creare questi elenchi con HTML.
16.1 – Elenchi non ordinati con UL
Iniziamo a vedere come è possibile creare elenchi puntati. Il tag HTML utilizzato per la creazione di elenchi puntati è il tag UL, dall’inglese unordered list, ovvero lista non ordinata.
Il tag UL non è sufficiente, tuttavia, alla creazione degli elenchi. Per creare un elenco, infatti, c’è bisogno di specificare anche gli elementi che vi appartengono. Di fatti il tag UL dice al browser che siamo in presenza di un elenco, ma come gli si dice quali sono gli elementi? A tal proposito esiste il tag LI (list item, elemento della lista). Vediamo un rapido esempio.
<body>
Menu del giorno:
<ul>
<li>Pasta con le vongole</li>
<li>Linguine al sugo</li>
<li>Carciofini arrostiti</li>
<li>Bresaola e scaglie di parmigiano</li>
</ul>
</body>
È possibile vedere l’effetto di questo tag a questo indirizzo: http://www.icefoxgold.it/esempi/html/capitolo16/esempio1.html
Il tag UL è obbligatorio chiuderlo, altrimenti tutto ciò che verrà successivamente sarà interpretato sempre come elenco. Di diverso avviso è il tag LI. Di fatti se avessimo scritto:
<body>
Menu del giorno:
<ul>
<li>Pasta con le vongole
<li>Linguine al sugo
<li>Carciofini arrostiti
<li>Bresaola e scaglie di parmigiano
</ul>
</body>
Avremmo ottenuto lo stesso risultato (provare per credere: http://www.icefoxgold.it/esempi/html/capitolo16/esempio2.html). Questo perché quando definiamo un nuovo elemento LI, in automatico il browser considera completato l’elemento precedente, e lo considera come chiuso. Lo standard W3C, tuttavia, consiglia la chiusura del tag LI.
Il tag UL ammette un attributo, ovvero l’attributo TYPE. Quest’attributo permette di personalizzare lo stile dell’elenco, e ci permette di avere tre tipi di elenchi non ordinati:
- elenco puntato con i quadratini (valore square)
- elenco puntato con i cerchi pieni (valore circle)
- elenco puntato con i cerchi vuoti (valore disc)
Esempio di questi tre tipi lo possiamo creare con il seguente listato:
<body>
Menu del giorno:
<ul type=circle>
<li>Pasta con le vongole
<li>Linguine al sugo
<li>Carciofini arrostiti
<li>Bresaola e scaglie di parmigiano
</ul>
<ul type=square>
<li>Pasta con le vongole
<li>Linguine al sugo
<li>Carciofini arrostiti
<li>Bresaola e scaglie di parmigiano
</ul>
<ul type=disc>
<li>Pasta con le vongole
<li>Linguine al sugo
<li>Carciofini arrostiti
<li>Bresaola e scaglie di parmigiano
</ul>
</body>
Il risultato è disponibile qui: http://www.icefoxgold.it/esempi/html/capitolo16/esempio3.html
16.2 – Elenchi ordinati con il tag OL
Potremmo tuttavia avere la necessità di ordinare un elenco con i numeri. Ad esempio una cosa del genere:
Classifica di piloti:
- Bianchi
- Verdi
- Rossi
Indicando i numeri come indici anziché i pallini. Possiamo ottenere questi elenchi, nella nostra pagina HTML, grazie al tag OL, (ordered list) che crea appunto liste ordinate. Esempio:
<body>
Menu del giorno:
<ol>
<li>Pasta con le vongole
<li>Linguine al sugo
<li>Carciofini arrostiti
<li>Bresaola e scaglie di parmigiano
</ol>
</body>
Il risultato è disponibile qui: http://www.icefoxgold.it/esempi/html/capitolo16/esempio4.html
Anche il tag OL dispone dell’attributo TYPE che ci permette di definire diversi tipi di elenco numerato (ordinato). Esistono infatti diversi tipi di elenco ordinato:
- Elenco numerato, con numeri decimali
- Elenco numerato, con numeri romani minuscoli
- Elenco numerato, con numeri romani maiuscoli
- Elenco alfabetico minuscolo
- Elenco alfabetico maiuscolo
Per ottenere questi, bisogna dare i seguenti valori all’attributo TYPE
- Elenco numerato con numeri decimali: di default;
- Elenco numerato con numeri romani minuscoli: type=i
- Elenco numerato con numeri romani maiuscoli: type=I
- Elenco alfabetico minuscolo: type=a
- Elenco alfabetico maiuscolo: type=A
Vediamo un esempio:
<body>
Menu del giorno:
<ol>
<li>Pasta con le vongole
<li>Linguine al sugo
<li>Carciofini arrostiti
<li>Bresaola e scaglie di parmigiano
</ol>
<ol type=i>
<li>Pasta con le vongole
<li>Linguine al sugo
<li>Carciofini arrostiti
<li>Bresaola e scaglie di parmigiano
</ol>
<ol type=I>
<li>Pasta con le vongole
<li>Linguine al sugo
<li>Carciofini arrostiti
<li>Bresaola e scaglie di parmigiano
</ol>
<ol type=a>
<li>Pasta con le vongole
<li>Linguine al sugo
<li>Carciofini arrostiti
<li>Bresaola e scaglie di parmigiano
</ol>
<ol type=A>
<li>Pasta con le vongole
<li>Linguine al sugo
<li>Carciofini arrostiti
<li>Bresaola e scaglie di parmigiano
</ol>
</body>
Il risultato è disponibile qui: http://www.icefoxgold.it/esempi/html/capitolo16/esempio5.html
Trattandosi di un elenco ordinato, possiamo avere la necessità di decidere noi il valore di inizio dell’elenco. Ad esempio, vorremmo che l’elenco partisse dal valore 3. Questo è possibile grazie ad un attributo del tag LI (non del tag OL!) che, assegnatoli il valore di inizio, provvede a continuare l’elenco. L’attributo si chiama VALUE
Esempio:
<body>
<ol>
<li value=3>Matematica
<li>Informatica
<li>Sistemi
</ol>
</body>
Il risultato è disponibile qui: http://www.icefoxgold.it/esempi/html/capitolo16/esempio6.html
16.3 – Elenchi strutturati
Più che un paragrafo potrebbe essere considerata un’appendice, ma è bene soffermarci qualche istante sugli elenchi strutturati. Questi non sono nient’altro che ELENCHI NEGLI ELENCHI. In pratica è possibile combinare i tag OL e UL (anche gli stessi!) per creare elenchi ancora più specifici. Ad esempio, potremmo creare l’elenco delle regioni italiane:
<body>
<ol>
<li>Valle d’Aosta</li>
<li>Piemonte</li>
<li>Liguria</li>
<li>Lombradia</li>
<li>Emilia Romagna</li>
<li>Trentino Alto Adige</li>
<li>Veneto</li>
<li>Friuli Venezia Giulia</li>
<li>Toscana</li>
<li>Umbria</li>
<li>Marche</li>
<li>Lazio</li>
<li>Abruzzo</li>
<li>Molise</li>
<li>Campania</li>
<li>Puglia</li>
<li>Basilicata</li>
<li>Calabria</li>
<li>Sicilia</li>
<li>Sardegna</li>
</ol>
</body>
Puoi vedere il risultato dell’esempio qui: http://www.icefoxgold.it/esempi/html/capitolo16/esempio7.html
Potremmo passare ad un livello di approfondimento maggiore, distinguendo le regioni d’Italia per il settore d’appartenenza (Nord, Centro, Sud e Isole). Non bisogna fare altro che questo:
<body>
<ol>
<li>NORD ITALIA
<ol>
<li>Valle d’Aosta</li>
<li>Piemonte</li>
<li>Liguria</li>
<li>Lombradia</li>
<li>Emilia Romagna</li>
<li>Trentino Alto Adige</li>
<li>Veneto</li>
<li>Friuli Venezia Giulia</li>
</ol>
<li>CENTRO ITALIA
<ol>
<li>Toscana</li>
<li>Umbria</li>
<li>Marche</li>
<li>Lazio</li>
<li>Abruzzo</li>
<li>Molise</li>
</ol>
<li>SUD ITALIA
<ol>
<li>Campania</li>
<li>Puglia</li>
<li>Basilicata</li>
<li>Calabria</li>
</ol>
<li>ITALIA INSULARE
<ol>
<li>Sicilia</li>
<li>Sardegna</li>
</ol>
</ol>
</body>
È possibile vedere il risultato qui: http://www.icefoxgold.it/esempi/html/capitolo16/esempio8.html
Allo stesso modo è possibile combinare i tag OL e UL per creare liste strutturate ordinate e puntate.
16.4 – Elenchi di definizione
Veniamo ora all’ultimo tipo di elenco che possiamo definire. Supponiamo di fare una pagina glossario con i termini e il loro significato. Ci tornerà utile sicuramente poter creare un elenco in modo che sotto la parola, magari con un leggero rientro, ci fosse il significato della parola stessa. A tal proposito ci viene in aiuto il tag DL (definition list), insieme a due tag elementi che sono il tag DT (definition term) e il tag DD (definition defined). Vediamo un esempio:
<body>
<DL>
<DT>Internet</DT>
<DD>Internet è una rete di computer internazionale attraverso la quale è possibile scambiarsi informazioni</DD>
</DL>
</body>
L’esempio è disponibile qui: http://www.icefoxgold.it/esempi/html/capitolo16/esempio9.html
Anche questo TAG può essere inserito in un elenco strutturato, magari si potrebbe creare un piccolo glossario identificato per categoria (o per lettera) e poi per termine (con il tag definition list).
Potrebbe interessarti anche:
Tuttavia può capitare di perdere il video originale caricato: scaricarlo nuovamente da Facebook non è semplice e, per farlo, possiamo usare un semplice tool messo a disposizione sul web: Facebook Video Downloader. Ecco come funziona il tool.
