Il linguaggio html utilizzare le liste

Page 1

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 liststyle.

<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> <title>Lista ordinata - lettere</title> <style type="text/css"> 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> <title>Lista ordinata - lettere</title> <style type="text/css"> 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> <style type="text/css"> 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> <li> Passaggio 13</li> <li> Passaggio 14</li> <li> Passaggio 15</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 liststyle, 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-styleposition. 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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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> <style type="text/css"> 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> <title>Esempio lista di definizione</title> <style type="text/css"> 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> <dd> Sviluppato dalla Apple per il sistema operativo OSX</dd> </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> <title>Esempio lista di definizione</title> <style type="text/css">

body {background-color: #F5F5DC; } dt {color: red; font-style: italic; font-weight: bold } .sfondo {background-color: #FFEBCD; } #base {background-color: #FFE4C4; } span { font-style: italic; } </style> </head> <body> <dl id="base"> <dt>Internet Explorer</dt> <dd class="sfondo"> Sviluppato dalla Microsoft e incluso in Windows </dd> <dt>Mozilla</dt> <dd class="sfondo"> Sviluppato dal progetto Mozilla, un browser <span>opensource</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> <title>Esempio lista di definizione</title> <style type="text/css">

body {background-color: #FFE4C4; } span { font-style: italic; } 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> <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>

<dd> Sviluppato dalla Apple per il sistema operativo OSX</dd> </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> <style type="text/css"> body {background-color: #DCDCDC; } ul {list-style: disc; }

ol {list-style: decimal; } </style> </head> <body> <ul> <li> Inviate attraverso <a href="mailto:elearning@areasoftwarecpu.it">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> <style type="text/css"> 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

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.