html56
Corso html 5, sesta lezione.
Roberto Abutzu su uiciechi.it, 2013-03.

Sesta parte: Liste ed elenchi.

`**********`

Liste ed elenchi.

Nelle nostre pagine web, potremmo avere la necessità di dover elencare un numero di elementi in 
sequenza. In questi casi, possiamo utilizzare le liste. Le liste possono essere di tre tipologie 
differenti:

1. Ordinate.

2. Non ordinate.

3. Elenchi di definizione.

Facciamo un po' di chiarezza, spiegando in pratica di cosa si tratta.

Liste ordinate.

Gli elenchi ordinati, facendo il paragone con un editor di testo, corrispondono agli elenchi 
numerati. Possono essere numerici o alfabetici ed esistono svariate possibilità di ordinare 
progressivamente questi elenchi. Essendo questo un attributo che viene assegnato tramite i fogli di 
stile Css, tratterò successivamente la spiegazione di questa caratteristica di formattazione.

I browser, di default, utilizzano l'elenco numerato con i numeri arabi:

``1. Primo elemento. ``

``2. Secondo elemento. ``

``3. Terzo elemento. ``

Questo è un esempio di lista ordinata numericamente. Se al posto dei numeri inseriamo le lettere, 
la lista sarà ordinata alfabeticamente.

Liste non ordinate.

Le liste non ordinate, facendo sempre un paragone con gli editor di testo, sarebbero gli elenchi 
puntati. Questo è un esempio:

``* Primo elemento. ``

``* Secondo elemento. ``

``* Terzo elemento. ``

Liste di definizione.

Le liste di definizione, si differenziano in quanto ogni elemento è suddiviso in due parti: il nome 
dell'elemento e la definizione. Ricorda pressappoco la spiegazione dell'attributo e il suo valore. 
Facciamo un esempio che semplifica il tutto, utilizzando le spiegazioni sulle tag Html che già 
conosciamo. Per agevolare la comprensione, inserirò lo stesso numero per le due parti che 
compongono ogni elemento. Comunque, sarà molto più chiaro quando inseriremo il codice nel file html.

Elenco di una lista di definizione:

Inizio elenco.

``1) Intestazione. `` ``1) Indica un titolo nella pagina. ``

``2) Link. `` ``2) Indica un collegamento in una pagina. ``

``3) Footer. `` ``3) Indica il piè di pagina. ``

Fine elenco.

Facciamo un altro esempio con le tag, semplificando sempre di più la comprensione ed imparando la 
loro costituzione. Questa volta, selezionate le tag che seguono e incollatele all'interno del file 
index.html, esattamente nella riga sotto l'inizio della tag : ``div id="content"``

In questo caso, facciamo l'esempio di dover elencare i colori di alcune cose che conosciamo. Per 
prima cosa, inseriamo un testo descrittivo, quindi, una descrizione di quello che rappresenta la 
lista che segue. Questo testo deve precedere il codice della lista e lo mettiamo in un paragrafo. 
Copiate da qui:

``p`` Ecco il colore di alcune delle cose che conosciamo. ``/p``

``dl``

``dd`` Il sole ``/dd``

``dt`` Il sole è giallo ``/dt``

``dd`` La Luna ``/dd``

``dt`` La luna è bianca ``dt``

``dd`` Il cielo ``/dd``

``dt`` Il cielo è azzurro ``/dt``

``/dl``

Spiegate le differenze tra le tre tipologie di liste, iniziamo a vedere le tag che le compongono. 
In tutti e tre i casi, gli elementi che compongono la lista sono gli stessi e cioè:

1. Si apre la tag Lista.

2. Si inseriscono il nome o le tag di apertura e chiusura per ogni singolo elemento della nostra 
lista.

3. Si chiude la lista.

Ecco grosso modo la sequenza esplicativa degli elementi:

``tipo lista``

``primo elemento``

``secondo elemento``

``terzo elemento``

``chiusura lista``

Tenendo presente la sequenza degli elementi, avremo per ogni lista quanto segue:

Liste Ordinate, "ordered list":

La tag di apertura è: ``ol``

La tag di chiusura è: ``/ol``

All'interno della lista ordinata, ogni elemento è composto dalla tag di apertura, dall'elemento e 
dalla tag di chiusura, quindi avremo: ``li`` elemento ``/li``

"list item", che significa lista di elementi.

Anche questa lista ha una tag di apertura ed una tag di chiusura. Tra queste due tag, come abbiamo 
visto per la lista precedente, abbiamo gli elementi che la compongono. Insomma, ogni lista si apre 
e si chiude, mentre al suo interno ha gli elementi elencati. Man mano che si vedranno le varie 
liste con le tag che le compongono, diventa sempre più semplice capire e scriverle, perché ci si 
rende conto che seguono per la maggior parte la stessa filosofia di composizione del codice html.

Continuiamo con degli esempi esplicativi. Anche questo codice che segue lo copiamo e lo incolliamo 
sotto alla lista precedente. Vi consiglio di visualizzare  e scorrere poi gli elementi delle liste 
nella nostra pagina index.html con lo screen-reader, perché aiuta a capire meglio la struttura di 
queste liste.

Ecco un esempio di una lista che elenca l'ordine di arrivo di un Gran Premio di Formula Uno:

``p`` Ordine di arrivo gran premio F1 di Montecarlo ``/p``

``ol``

``li`` Alonso-Ferrari ``/li``

``li`` Hamilton-Mercedes ``/li``

``li`` Vettel-Red bull ``/li``

``li`` Raikonen-Lotus renault ``/li``

``/ol``

Come detto precedentemente, la progressione delle liste ordinate, viene assegnata con una tag Type, 
oramai inserita prevalentemente nei fogli di stile, che vedremo in seguito. Comunque sappiate per 
ora che è possibile utilizzare:

- Numeri arabi.
- Numeri romani, sia maiuscoli che minuscoli.
- Lettere, anch'esse maiuscole e minuscole.

Liste non ordinate, "unordered list".

Conosciuti anche come elenchi puntati, "unordered list". Di solito queste liste vengono 
rappresentate di default dai browser con un pallino pieno, anche se questo segno grafico può essere 
sostituito con altro segno oppure,  può essere anche eliminato tramite i css.

La tag di apertura della lista non ordinata è: ``ul``

La tag di chiusura è: ``/ul``

Gli elementi, come nella lista ordinata, vengono identificati come elementi composti da una tag di 
apertura, dall'elemento e dalla tag di chiusura, quindi avremo: ``li`` Elemento ``/li``

Ecco un altro esempio da copiare, sempre all'interno del file index.html, sotto la lista precedente:

``p`` Ecco cosa vende il centro commerciale. ``/p``

``ul``

``li`` lavatrici ``/li``

``li`` televisori ``/li``

``li`` alimentari ``/li``

``li`` scarpe/ ``li``

``li`` abbigliamento ``/li``

``/ul``

Elenchi di definizione.

Gli elenchi di definizione, come già accennato,  oltre che per la tag di apertura e dalla tag di 
chiusura, si differenziano dalla caratteristica che ogni elemento è suddiviso in due parti: Il nome 
e la sua definizione. Riprendiamo l'esempio precedente e analizziamo le tag:

``p`` Ecco il colore di alcune delle cose che conosciamo. ``/p``

``dl``

``dd`` Il sole ``/dd`` ``dt`` il sole è giallo ``/dt``

``dd`` la Luna ``/dd`` ``dt`` la luna è bianca ``dt``

``dd`` il cielo ``/dd`` ``dt`` il cielo è azzurro ``/dt``

``/dl``

Quindi:

``dl`` e ``/dl`` sono le tag di apertura e chiusura, "Definition list", ovvero, definizione della 
lista.

``dt`` e ``/dt`` con al suo interno il "definition term", ovvero,  il termine da definire.

``dd`` e ``dd`` con al suo interno la "definition description", ovvero, la definizione del termine 
indicato con la tag precedente.

Durante la creazione del nostro sito, inseriremo parecchie liste, esercitandoci per apprendere 
meglio. Consiglio di utilizzare la copia della Index che vi avevo fatto creare, o di crearne altre, 
e provare a inserire liste a vostro piacimento. La scrittura del codice fatela sempre con il blocco 
note, salvate e POI aprite con Internet Explorer per verificare con lo screen-reader. Qualora vi 
fosse scappata qualche errore di digitazione o di codice di qualche tag, riaprite il file con 
blocco note, correggete e riaprite il file per verificare gli effetti e le correzioni eseguite.

Dopo aver fatto esercizio, magari con una copia del nostro file index.html, apriamo il nostro file 
Index.html e inseriamo una lista che indicherà il nostro menu principale. Ovviamente, inseriamo per 
ora solo l'elenco delle voci del menu. Poi, nelle lezioni successive faremo diventare ogni elemento 
un link.

Da tener presente che questa lista è da inserire all'interno della tag "nav", partendo dalla riga 
successiva della tag stessa. Copiate da qui:

``ul``

``li`` home page ``/li``
``li`` chi siamo ``/li``

``li`` lezioni ``/li``

``li`` html 5 ``/li``

``li`` css ``/li``

``li`` download ``/li``

``/ul``

Ovviamente, come spesso ripeto in questo scritto, per quanto diventi lungo e magari anche 
inizialmente scocciante, invece di copiare ed incollare, è consigliabile scrivere direttamente il 
codice con il blocco note, leggendolo da questi articoli. Solo scrivendo continuamente codice si 
impara a scriverlo senza copiare da nessuna parte.

Altra lista da copiare o scrivere, stavolta all'interno della tag "Footer", che è il contenitore 
del Piè di pagina. Subito dopo l'apertura di questa tag, ``footer``, inserite:

``dl``

``dt`` Created by: ``/dt``

``dd`` www.evyweb.it ``/dd``

``dt`` Webmaster ``/dt``

``dd`` roberto@evyweb.it ``/dd``

``/dl``

Salvate e riaprite con Internet Explorer. In fondo alla pagina, leggerete:

Created by: www.evyweb.it

web master

roberto@evyweb.it

Sono l'indirizzo web di un altro mio sito, e il mio indirizzo di posta elettronica. Ognuno di voi 
metterà al posto dei miei riferimenti quelli suoi. I riferimenti non sono attualmente funzionanti 
come link, in quanto non ho inserito la tag del link. Questo solo per non confondervi le idee con 
la tag link che non abbiamo ancora visto nei dettagli. Quando affronteremo i Link, inseriremo le 
tag corrette anche qui.

Ultimo sforzo di questa lunga lezione. Nella nostra cartella sito, dovete creare i seguenti file, 
esattamente come li scrivo io, quindi, scorreteli con le frecce per leggerli correttamente. I file 
sono:

- chi_siamo.html
- css.html
- download.html
- html_5.html
- Create anche una cartella, chiamatela Lezioni, e all'interno inserite una copia del file 
index.html

Attenzione! E' molto importante non usare lettere maiuscole e spazi quando scriviamo i nomi dei 
file e delle cartelle del sito. Quando il nome di un file html è formato da due o più parole, 
bisogna eliminare gli spazi. Se abbiamo bisogno di far leggere correttamente le parole di cui è 
composto il nome del file, sostituire gli spazi con caratteri che non vengono letti, per esempio,il 
carattere di sottolineatura o un trattino (segno meno).

Tutti i file da creare e che vi ho indicati sopra, saranno alcuni dei file del sito che stiamo 
costruendo e che sarà il corso che stiamo trattando in versione On-line.

Sono certo che vi siete resi conto della scarsità di terminologia specifica in questa trattazione. 
Non è per niente una lacuna e verrà comunque introdotta gradualmente, man mano che andremo avanti 
con gli argomenti. E' stato deciso così, solo perché in tutti i manuali che ho studiato, nella 
prima parte ho sempre trovato tutto il massiccio uso di termini, teorici e in lingua inglese con 
abbreviazioni comprese, che mi hanno sempre generato una tale confusione che mi è venuta sempre la 
tentazione di non proseguire.

In conclusione, lo scopo preciso è quello di semplificare al massimo le spiegazioni. Però, preciso 
che, nonostante sarà una trattazione lunga, è da considerarsi ugualmente di livello base. 
Nonostante più avanti sarà affrontata tutta la terminologia, trattando accuratamente quella di 
base, lasceremo a chi vorrà approfondire  la ricerca in rete di informazioni più dettagliate.

Vi rimando alla prossima parte, Nella quale inizieremo a conoscere in modo particolareggiato di 
cosa è composto un link.

Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu roberto@evyweb.it`_