Il linguaggio html utilizzare le liste

Il linguaggio HTML:

Utilizzare le liste

Introduzione

Nel corso di questa lezione, dedicata all’approfondimento degli

elementi di marcatura base del linguaggio HTML vedremo come

utilizzare i vari tag per inserire delle liste di tipo diverso all’interno

delle nostre pagine web.

Ogni lista menzionata nell’unità introduttiva “Elementi di HTML” ha

il suo formato specifico di visualizzazione:

✦Una lista ordinata (<ol>…</ol>) viene indicata attraverso

l’inserimento di un numero o di una lettera prima dei suoi elementi

singoli.

✦Una lista non ordinata (<ul>…</ul>) viene indicata attraverso

l’inserimento di un “proiettile”, come simbolo base, prima dei suoi

termini.

✦Una lista di definizione (<dl>…</dl>) ha due parti per ogni

elemento: <dt>un termine</dt> e una <dd>definizione o descrizione

di questo</dd>.

Le liste ordinate e non ordinate prevedono differenti opzioni per la

loro visualizzazione finale.

In particolare:

✦ Le liste ordinate possono presentare i singoli elementi preceduti

da:

• Numeri arabi

• Numeri romani (in maiuscolo e in minuscolo)

• Lettere (maiuscole e minuscole)

• Lettere e numeri di altre lingue

✦ Le liste non ordinate possono presentare i loro elementi preceduti

da:

• Differenti tipologie e/o stili di “proiettili”

• Immagini o icone specifiche

Esaminiamo ora le caratteristiche e le modalità di utilizzo di ciascuna

lista.

Liste ordinate

Le liste ordinate, organizzate con numeri o lettere accanto ad ogni

elemento, sono perfette per presentare una sequenza logica di

passaggi e/o attività. Ad esempio una lista numerata può essere

utilizzata per indicare degli specifici passaggi in progressione.

Una lista ordinata può pertanto apparire in questo modo:

1. Usando Internet Explorer, aprire la pagina web che visualizza la

grafica specifica che si desidera visualizzare come wallpaper per il

proprio desktop.

2. Cliccare l’immagine con il tasto destro per aprire il menù di

contenuto.

3. Scegliere l’opzione "imposta come sfondo" per salvare l’immagine

e usarla come wallpaper per il desktop.

Le liste ordinate usano il tag (<ol>) per delimitare l’intera lista e il

tag interno specifico (<li>), relativo ad ogni elemento/passaggio

contenuto.

Nella lista di esempio precedente, l’elenco comprende tre elementi

numerati con numeri arabi. Tale visualizzazione costituisce la resa di

default di una lista ordinata per ogni documento HTML.

Vediamo ad esempio la struttura seguente

<html>

<head>

<title>Esempio lista ordinata</title>

</head>

<body>

<ol>

<li> Usando Internet Explorer, aprire la pagina web che visualizza la grafica

specifica che si desidera visualizzare come wallpaper per il proprio desktop </li>

<li> Cliccare l’immagine con il tasto destro per aprire il menù di contenuto </li>

<li> Scegliere l’opzione “imposta come sfondo” per salvare l’immagine e usarla

come wallpaper per il desktop. </li> </ol>

</body>

</html>

Output

Per indicare un tipo differente di identificatore per ogni elemento

presente in lista è possibile utilizzare un attributo di stile HTML

(style), interno al tag <ol> di apertura della lista, per impostare una

diversa visualizzazione, impiegando in linea la proprietà di stile list-

style.

<html>

<head>

<title>Lista ordinata - lettere</title>

<style type="text/css">

body {background : #E9967A}

ol {font-weight: bold; color: #8B0000;}

</style>

</head>

<body>

<ol style="list-style: upper-alpha">

<li> Usando Internet Explorer, aprire la pagina web che visualizza la grafica

specifica che si desidera visualizzare come wallpaper per il proprio desktop </li>

<li> Cliccare l’immagine con il tasto destro per aprire il menù di contenuto </li>

<li> Scegliere l’opzione "imposta come sfondo" per salvare l’immagine e usarla

come wallpaper per il desktop </li> </ol>

</body>

</html>

Output

La proprietà list-style, utilizzata in linea nell’esempio precedente,

supporta i seguenti valori:

✦ decimal

✦ decimal-leading-zero

✦lower-roman

✦upper-roman

✦lower-greek

✦lower-alpha

✦lower-latin

✦upper-alpha

✦upper-latin

✦hebrew

✦armenian

✦georgian

✦cjk-ideographic

✦hiragana

✦katakana

✦hiragana-iroha

✦katakana-iroha

✦none

Alcuni di questi valori dipendono anche dalla famiglia di font e dal

font singolo scelto nella propria struttura HTML. Ad esempio usando

un valore “hiragana” con un font latin-based, la corretta

visualizzazione finale potrebbe non essere correttamente supportata.

Per fare una scelta adeguata bisogna far si che le opzioni di

linguaggio e i caratteri scelti nella propria struttura supportino il

valore specificato dalla lista.

Le liste ordinate supportano anche la proprietà list-style-position con

dei valori necessari ad indicare il posizionamento dei singoli elementi

di lista.

Con questa proprietà è possibile controllare dove i numeri o i caratteri

precedenti ogni elemento dovranno apparire. Tale proprietà prevede

l’indicazione di due possibili valori:

✦outside - Con questo valore il numero o il carattere verrà

visualizzato fuori dal margine sinistro del contenitore di lista.

✦inside - Con questo valore il numero o il carattere verrà

visualizzato internamente al margine sinistro del contenitore di lista.

Il valore di default per questa proprietà è: outside.

Versioni HTML precedenti permettevano anche l’uso dell’attributo

start internamente al tag <ol> per specificare con quale numero o

lettera una data lista ordinata sarebbe dovuta iniziare.

Ad esempio la seguente struttura inizia con il numero decimale 12:

<html>

<head>



body {background : yellow}

ol {font-weight: bold; color: #8B0000;}

ol {list-style-position: inside; }

</style>

</head>

<body>

<ol start="12" style="list-style: decimal">

<li> Rimuovere la pellicola protettiva</li>

<li>Rimuovere la linguetta gialla di protezione</li>

<li>Alloggiare nell’apposito scomparto</li> </ol>

</body>

</html>

Output

Attualmente l’attributo start in relazione al tag <ol> è stato deprecato

e rimpiazzato da uno stile CSS. Tuttavia è ancora possibile utilizzare

in questo modo l’attributo start, verificando sempre la sua corretta

visualizzazione attraverso browser diversi.

L’esempio seguente mostra come utilizzare uno stile (CSS) per

ottenere lo stesso effetto visto con l’utilizzo dell’attributo start.

Pertanto anche nella struttura seguente e nel relativo output la lista

ordinata comincerà sempre con il numero decimale 12.

Esempio

<html>

<head>



body {background : yellow}

ol {list-style-position: outside; }

ol { counter-reset: list 11; } li { list-style-type: none; } li:before {

content: counter(list,decimal) "."; counter-increment: list; }

</style>

</head>

<body>

<ol>

<li> Rimuovere la pellicola protettiva</li>

<li>Rimuovere la linguetta gialla di protezione</li>

<li>Alloggiare nell’apposito scomparto</li>

</ol>

</body>

</html>

Output

La codifica evidenziata in questo esempio introduce alcuni concetti di

stile relativi agli attuali CSS 2.

Analizziamoli singolarmente:

✦ La marcatura ol, attraverso la proprietà di stile counter-reset,

utilizzata proprio per determinare le impostazioni di inizializzazione

di una lista, comincerà con il numero 12 (bisogna sempre specificare

il numero precedente a quello desiderato per far partire la lista e, in

questo caso, l’11).

✦ In questo caso la proprietà list-style-type non specifica una

visualizzazione particolare dal momento che viene indicato il valore

none. Altrimenti, utilizzando questa stessa proprietà, è possibile

associare dei simboli specifici oppure lettere e numeri agli elementi

della lista. I valori associabili a questa proprietà di stile sono gli stessi

della proprietà list-style, elencati in precedenza.

✦ La definizione li:before fa si che: 1) l’"elemento contatore" della

lista venga visualizzato prima di ogni singolo elemento dell’elenco

(usando lo pseudo-elemento “before” e la proprietà “content”)

insieme ad un punto e uno spazio.

2) il contatore venga incrementato. Tale incremento durante

l’applicazione di uno stile e l’inserimento della lista, avviene

immediatamente prima della sua visualizzazione. Per questo motivo è

necessario impostare il contatore ad un livello (numero o lettera)

inferiore rispetto a quello di partenza desiderato.

Usando lo stile menzionato nell’esempio precedente, anche la

seguente struttura di lista visualizzerà un elenco con degli elementi

numerati da 12 a 15:

Es.

<html>

<head>

<title>Lista ordinata</title>


body {background : #98FB98}

ol { counter-reset: list 11; } li { list-style-type: none; } li:before {

content: counter(list,decimal) "."; counter-increment: list; }

</style>

</head>

<body>

<ol>

<li> Passaggio 12</li>




</ol>

</body>

</html>

Output

Nel modulo successivo, dedicato ai CSS attuali analizzeremo in

dettaglio tutte le modalità di applicazione di regole di stile alle liste

HTML.

Alcune proprietà di stile associabili all’elemento lista possono essere

definite insieme attraverso l’utilizzo della proprietà abbreviata list-

style, associabile agli elementi <ol> e <ul>. Questa proprietà veloce

permette di impostare dei valori per tre proprietà di lista differenti :

list-style: (1) list-style-type (2) list-style-image e (3) list-style-

position.

Tale sintassi indica insieme i valori delle singole proprietà in un

ordine preciso.

Pertanto utilizzando questa proprietà di stile abbreviata sarà

necessario indicare prima il valore di list-style-type, poi quello della

proprietà list-style-image e infine il valore relativo alla posizione.

E’ ovviamente possibile utilizzare questa singola proprietà per

specificare uno, due o tutte e tre le proprietà di stile in una singola

dichiarazione.

Ad esempio, per definire una lista ordinata con lettere minuscole, e

posizionamento interno al contenuto di lista è possibile utilizzare la

seguente struttura in linea:

<ol style="list-style: lower-alpha inside;">

oppure:

ol {list-style: lower-alpha inside;}

Attraverso la proprietà list-style-image, finora non menzionata, è

possibile associare un’immagine specifica ad un elemento della lista,

secondo la seguente sintassi:

ol oppure ul{list-style-image: url(immagine_lista.jpg);}

Inserendo un tipo di simbolo (list-style-type) per gli elementi e anche

un’immagine per questi, nella visualizzazione finale prevarrà sempre

l’utilizzo dell’immagine indicata.

Alla proprietà singola list-style-image è possibile anche associare il

valore none per non far comparire un’immagine eventualmente

impostata in precedenza.

ol oppure ul{list-style-image: none;}

Vediamo ora l’utilizzo congiunto delle proprietà di stile analizzate

finora nella seguente struttura di esempio.

Esempio 1

<html>

<head>

<title>Proprietà list-style</title>


body {background : #E9967A}

ol li {list-style: square inside; } // E’ possibile indicare sia la marcatura relativa al

tipo di lista (in questo caso ol) che quella

contenente i suoi singoli elementi (li).

</style>

</head>

<body>

<ol>

<li> Infornare a forno preriscaldato a 200° circa </li>

<li> Sfornare dopo almeno 20 minuti </li>

<li> Decorare a piacere con gocce di cioccolata o codette di zucchero </li>

</ol>

</body>

</html>

Output

Esempio 2

<html>

<head>

<title>Proprietà list-style con immagine</title>


ol {color: red; }

ol {list-style: url(segnalista.png) outside; }

</style>

</head>

<body>

<ol>

<li> Infornare a forno preriscaldato a 200° circa </li>

<li> Sfornare dopo almeno 20 minuti </li>

<li> Decorare a piacere con gocce di cioccolata o codette di zucchero </li>

</ol>

</body>

</html>

Output

Liste non ordinate

Le liste non ordinate sono simili a quelle ordinate ma utilizzano dei

“proiettili” o simboli base per identificare i singoli componenti della

lista.

Liste di questo tipo dovrebbero essere utilizzare per raggruppare degli

elementi diversi, senza una sequenza logica particolare come

nell’esempio seguente.

Gusti:

✦Vaniglia

✦Cioccolato

✦Fragola

Una lista non ordinata viene delimitata interamente attraverso il tag

(<ul>) mentre, come anche nel caso della lista ordinata, ogni

elemento interno alla lista stessa sarà racchiuso nei tag <li>…</li>.

Nella struttura seguente e nel relativo output vediamo un esempio di

lista non ordinata nella sua visualizzazione standard.

<html>

<head>

<title>Esempio di lista non ordinata</title>


body {background-color: #40E0D0; }

ul {font-style: italic; color: red; }

</style>

</head>

<body>

<ul>

<li><b>Vaniglia</b></li>

<li><b>Cioccolato</b></li>

<li><b>Fragola</b</li>

</ul>

</body>

</html>

Output

Anche le liste non ordinate supportano la proprietà list-style-type ma

con alcune differenze riguardanti i suoi valori, che sono

esclusivamente i seguenti:

✦disc

✦circle

✦square

✦none

Il simbolo di default del cosiddetto “proiettile” corrisponde al valore

“disc”. Tuttavia browser differenti possono visualizzare anche in

maniera leggermente diversa tale simbolo di default.

Così come per le liste ordinate è possibile definire l’utilizzo della

proprietà di stile list-style-position che nel caso delle liste non

ordinate controlla dove i “proiettili” compariranno”:

outside: fuori dal margine sinistro dell’oggetto lista

inside: dentro al margine sinistro dell’oggetto lista

Ad esempio per far comparire i “proiettili” o altri simboli

internamente ai margini è possibile utilizzare la seguente regola di

stile:

<html>

<head>

<title>Esempio di lista non ordinata</title>


body {background-color: #40E0D0; }

ul { list-style: circle inside; color: green; }// proprietà abbreviata list-style con

indicazione dei valori di tipo e

posizione

</style>

</head>

<body>

<ul>

<li><b>Crema</b></li>

<li><b>Pistacchio</b></li>

<li><b>Nocciola</b</li>

</ul>

</body>

</html>

Output

Anche le liste non ordinate supportano l’utilizzo di immagini

specifiche per identificare i singoli elementi di lista. Tuttavia le

immagini devono rispettare i seguenti criteri per essere correttamente

utilizzate:

✦Essere sempre accessibili al documento via HTTP.

✦Avere un formato adeguato (generalmente .jpg, .gif, oppure .png).

✦Avere delle dimensioni appropriate per essere un simbolo di lista.

Per specificare un’immagine per una lista non ordinata è sempre

possibile utilizzare la proprietà list-style-image con la relativa URL

oppure utilizzare la proprietà abbreviata list-style.

Esempio:

<html>

<head>

<title>Lista non ordinata e immagini</title>


ul { list-style: url(cono.png) outside; color: green; }

</style>

</head>

<body>

<ul>

<li><b>Cocco</b></li>

<li><b>Melone</b></li>

<li><b>Anguria</b</li>

</ul>

</body>

</html>

Output

Liste di definizione

Al contrario delle due tipologie di liste finora analizzate, le liste di

definizione presentano meno opzioni di formattazione.

Vediamo la seguente struttura base di una lista di definizione.

<html>

<head>

<title>Esempio lista di definizione</title>

</head>

<body>

<dl>

<dt>Internet Explorer</dt> // termine di lista

<dd> Sviluppato dalla Microsoft e incluso in Windows </dd> // definizione

<dt>Mozilla</dt>

<dd> Sviluppato dal progetto Mozilla, un browser open-source per diverse

piattaforme </dd>

<dt>Safari</dt>

<dd> Sviluppato dalla Apple per il sistema operativo OSX</dd>

</dl>

</body>

</html>

Output

I diversi componenti della lista di definizione (<dl>…</dl>) sono:

a) i suoi termini specifici (es. <dt>Explorer</dt>) che possono essere

codificati anche attraverso semplici “proiettili” e b) le sue definizioni

(<dd>…</dd>).

Per conferire maggior chiarezza alle liste di definizione è bene

applicare a queste delle regole di stile specifiche, volte a differenziare

proprio i singoli termini dalle rispettive definizioni. Tali

differenziazioni possono essere realizzate con accorgimenti diversi:

ad esempio modificando il font, il suo stile, i colori, a seconda del

componente della lista scelto.

Ad esempio nella seguente struttura i termini di definizione saranno

resi in rosso e in corsivo.

<html>

<head>



dt { color: red; font-style: italic; font-weight: bold }

span { font-style: italic; }

</style>

</head>

<body>

<dl>

<dt>Internet Explorer</dt>

<dd> Sviluppato dalla Microsoft e incluso in Windows </dd>

<dt>Mozilla</dt>

<dd> Sviluppato dal progetto Mozilla, un browser <span>open-source</span> per

diverse piattaforme </dd>

<dt>Safari</dt>


</dl>

</body>

</html>

Output

Naturalmente è possibile personalizzare ulteriormente le liste in

questione (così come le liste ordinate e non ordinate) utilizzando

quegli elementi di marcatura base HTML analizzati nell’unità

precedente.

Ad esempio per diversificare i termini dalla loro definizione è

possibile utilizzare l’attributo class per applicare uno stile particolare

solo ad alcune sezioni della lista.

Esempio

<html>

<head>



body {background-color: #F5F5DC; }

dt {color: red; font-style: italic; font-weight: bold }

.sfondo {background-color: #FFEBCD; }

#base {background-color: #FFE4C4; }


</style>

</head>

<body>

<dl id="base">


<dd class="sfondo"> Sviluppato dalla Microsoft e incluso in Windows </dd>

<dt>Mozilla</dt>

<dd class="sfondo"> Sviluppato dal progetto Mozilla, un browser <span>open-

source</span> per diverse piattaforme </dd>

<dt>Safari</dt>

<dd class="sfondo"> Sviluppato dalla Apple per il sistema operativo OSX</dd>

</dl>

</body>

</html>

Output

E’ inoltre possibile personalizzare ulteriormente le liste inserendo dei

bordi a racchiudere quegli elementi che si vogliono mettere in

evidenza.

Ad esempio nella seguente struttura la lista di definizione sembra

quasi inserita in una tabella. Per ottenere questo effetto è stata

specificata l’ampiezza del contenitore stesso della lista e sono stati

applicati bordi colorati diversi per gli elementi dl e dt/dd.

Esempio

<html>

<head>



body {background-color: #FFE4C4; }


dl{background-color: #FFF8DC; width: 450 px; ; border: solid red;}

dt{font-weight: bold; font-style: italic; color: red; border: 1px solid red; }

dd {border: 1px solid red;}

</style>

</head>

<body>

<dl>


<dd> Sviluppato dalla Microsoft e incluso in Windows </dd>

<dt>Mozilla</dt>

<dd> Sviluppato dal progetto Mozilla, un browser <span>open-source</span> per

diverse piattaforme </dd>

<dt>Safari</dt>


</dl>

</body>

</html>

Output

Liste annidate

Infine è opportuno ricordare che le liste HTML, di qualunque tipo

esse siano, possono essere annidate.

Supponiamo di aver già creato una lista generica (o non ordinata)

all’interno della quale vogliamo inserire un’ulteriore lista di tipo

ordinato, come nell’esempio seguente.

✦ Inviate attraverso questo indirizzo di posta una lettera riguardante

il problema, specificando anche:

1. Nome

2. Codice identificativo dell’ordine

3. Informazioni di contatto

4. Una descrizione dettagliata del problema

In questo caso sarà necessario inserire una lista ordinata all’interno

della marcatura corrispondente ad una lista non ordinata, come

evidenziato nella struttura seguente.

<html>

<head>

<title>Liste annidate</title>


body {background-color: #DCDCDC; }

ul {list-style: disc; }

ol {list-style: decimal; }

</style>

</head>

<body>

<ul>

<li>

Inviate attraverso <a href="mailto:[email protected]">questo</a>

indirizzo di posta una lettera riguardante il problema, specificando anche:</li>

<ol>

<li> Nome </li>

<li> Codice identificativo dell’ordine </li>

<li> Informazioni di contatto </li>

<li> Una descrizione dettagliata del problema </li>

</ol>

</ul>

</body>

</html>

Output

E’ bene ricordare che è possibile annidare tra loro tutte le tipologie di

liste finora analizzate.

Nell’esempio seguente una lista di definizione base è stata inserita

all’interno di una lista ordinate (<ol>…</ol>)

Esempio

<html>

<head>

<title>Liste annidate</title>


body {background-color: #F8F8FF; }

ol {list-style: square; color: red}

li {font-weight: bold; }

dd {color: brown; }

dt {font-style: italic; }

</style>

</head>

<body>

<ol>

<li>Tematiche prima giornata</li>

<dl>

<dt>Pasta brisee</dt>

<dd>Storia - Ingredienti e lavorazione </dd>

<dt>Pasta sfoglia</dt>

<dd>Storia - Ingredienti e lavorazione</dd>

</dl>

<li> Seconda giornata </li>

<dl>

<dt>Pasta frolla</dt>

<dd>Storia - Ingredienti e lavorazione </dd>

<dt>Bisquit</dt>

<dd>Storia - Ingredienti e lavorazione</dd>

</dl>

</ol>

</body>

</html>

Output

FINE LEZIONE

Il linguaggio html utilizzare le liste

Documents

Transcript of Il linguaggio html utilizzare le liste