Organizzazione delle attività
| Tempo | Attività | Obiettivo |
|---|---|---|
| 10 minuti | Struttura delle liste ordinate | Comprendere il ruolo degli elementi ol e li. |
| 10 minuti | Attributi della lista | Utilizzare type, start, reversed e value. |
| 5 minuti | Liste annidate | Organizzare informazioni su più livelli. |
| 15 minuti | Attività pratica | Realizzare una pagina HTML con differenti liste ordinate. |
| 5 minuti | Verifica e sintesi | Controllare la comprensione dei concetti principali. |
Le liste ordinate
Una lista ordinata permette di rappresentare una sequenza di elementi nella quale la posizione ha un significato. Il browser associa normalmente a ogni elemento un numero progressivo.
Una lista ordinata permette di rappresentare una sequenza di elementi nella quale la posizione ha un significato. Il browser associa normalmente a ogni elemento un numero progressivo.
Le liste ordinate sono quindi appropriate quando è importante mantenere un determinato ordine.
- passaggi di una procedura;
- istruzioni da eseguire in sequenza;
- fasi di un algoritmo;
- classifiche;
- attività ordinate per priorità;
- indici numerati.
Un esempio semplice è una sequenza di operazioni necessarie per sviluppare un programma:
<ol>
<li>Analizzare il problema</li>
<li>Progettare la soluzione</li>
<li>Scrivere il codice</li>
<li>Eseguire i test</li>
</ol>
- Analizzare il problema
- Progettare la soluzione
- Scrivere il codice
- Eseguire i test
Gli elementi ol e li
Una lista ordinata viene costruita principalmente attraverso gli elementi <ol> e <li>.
Una lista ordinata viene costruita principalmente attraverso gli elementi <ol> e <li>.
| Elemento | Significato | Funzione |
|---|---|---|
| <ol> | Ordered List | Definisce il contenitore della lista ordinata. |
| <li> | List Item | Definisce un singolo elemento della lista. |
La struttura fondamentale è:
<ol>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
Il tag <ol> apre e chiude l’intera lista, mentre ogni elemento viene racchiuso tra <li> e </li>.
Non è corretto inserire direttamente il testo degli elementi dentro ol senza utilizzare li.
<!-- Struttura errata -->
<ol>
Primo elemento
Secondo elemento
Terzo elemento
</ol>
La struttura corretta è:
<ol>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
La numerazione automatica
I numeri non devono essere scritti manualmente nel contenuto degli elementi li. Il browser genera automaticamente la numerazione.
I numeri non devono essere scritti manualmente nel contenuto degli elementi li. Il browser genera automaticamente la numerazione.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
- HTML
- CSS
- JavaScript
Se viene aggiunto un nuovo elemento, il browser aggiorna automaticamente la numerazione:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ol>
Il contenuto rimane separato dalla numerazione. Non è quindi necessario correggere manualmente i numeri quando un elemento viene aggiunto, eliminato o spostato.
L’attributo type
Per impostazione predefinita una lista ordinata utilizza numeri decimali. L’attributo type permette di scegliere un tipo differente di marcatore.
Per impostazione predefinita una lista ordinata utilizza numeri decimali. L’attributo type permette di scegliere un tipo differente di marcatore.
| Valore | Tipo di numerazione | Esempio |
|---|---|---|
1 |
Numeri decimali | 1, 2, 3, 4 |
A |
Lettere maiuscole | A, B, C, D |
a |
Lettere minuscole | a, b, c, d |
I |
Numeri romani maiuscoli | I, II, III, IV |
i |
Numeri romani minuscoli | i, ii, iii, iv |
Esempio con lettere maiuscole:
<ol type="A">
<li>Analisi</li>
<li>Progettazione</li>
<li>Implementazione</li>
</ol>
Esempio con numeri romani:
<ol type="I">
<li>Introduzione</li>
<li>Sviluppo</li>
<li>Conclusione</li>
</ol>
L’attributo start
Una lista ordinata inizia normalmente dal valore 1. L’attributo start permette di specificare un valore iniziale differente.
Una lista ordinata inizia normalmente dal valore 1. L’attributo start permette di specificare un valore iniziale differente.
<ol start="5">
<li>Configurare il database</li>
<li>Avviare il server</li>
<li>Eseguire il test</li>
</ol>
- Configurare il database
- Avviare il server
- Eseguire il test
start può essere utile quando una procedura è suddivisa in più parti e la seconda lista deve continuare una numerazione iniziata precedentemente.
L’attributo reversed
L’attributo reversed permette di numerare gli elementi in ordine decrescente.
L’attributo reversed permette di numerare gli elementi in ordine decrescente.
<ol reversed>
<li>Terzo classificato</li>
<li>Secondo classificato</li>
<li>Primo classificato</li>
</ol>
- Terzo classificato
- Secondo classificato
- Primo classificato
reversed è un attributo booleano: la sua presenza attiva il comportamento.
<ol reversed>
...
</ol>
È possibile combinare reversed e start quando si desidera controllare esplicitamente il valore iniziale.
<ol reversed start="10">
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
- Elemento
- Elemento
- Elemento
L’attributo value
L’attributo value può essere applicato a un elemento li per assegnargli uno specifico valore numerico. Gli elementi successivi continuano la numerazione a partire da quel valore.
L’attributo value può essere applicato a un elemento li per assegnargli uno specifico valore numerico. Gli elementi successivi continuano la numerazione a partire da quel valore.
<ol>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li value="10">Decimo elemento</li>
<li>Undicesimo elemento</li>
</ol>
- Primo elemento
- Secondo elemento
- Decimo elemento
- Undicesimo elemento
start appartiene a ol e stabilisce il valore iniziale della lista. value appartiene invece a uno specifico li e modifica la numerazione a partire da quell’elemento.
Liste ordinate annidate
Una lista ordinata può contenere un’altra lista. Questa struttura permette di rappresentare informazioni organizzate su più livelli.
Una lista ordinata può contenere un’altra lista. Questa struttura permette di rappresentare informazioni organizzate su più livelli.
La lista interna deve essere inserita all’interno dell’elemento li a cui appartiene.
<ol>
<li>HTML
<ol type="a">
<li>Struttura del documento</li>
<li>Testo</li>
<li>Immagini</li>
</ol>
</li>
<li>CSS
<ol type="a">
<li>Selettori</li>
<li>Proprietà</li>
</ol>
</li>
</ol>
- HTML
- Struttura del documento
- Testo
- Immagini
- CSS
- Selettori
- Proprietà
Una sottolista deve appartenere a un elemento li. La seguente struttura non è corretta:
<ol>
<li>HTML</li>
<ol>
<li>Tag</li>
<li>Attributi</li>
</ol>
<li>CSS</li>
</ol>
La struttura corretta è:
<ol>
<li>HTML
<ol>
<li>Tag</li>
<li>Attributi</li>
</ol>
</li>
<li>CSS</li>
</ol>
Quando scegliere una lista ordinata
La scelta dell’elemento ol non dipende soltanto dall’aspetto grafico. Una lista ordinata comunica che la sequenza degli elementi è significativa.
La scelta dell’elemento ol non dipende soltanto dall’aspetto grafico. Una lista ordinata comunica che la sequenza degli elementi è significativa.
| Contenuto | Lista ordinata? | Motivazione |
|---|---|---|
| Passaggi per installare un programma | Sì | Le operazioni devono essere eseguite in sequenza. |
| Classifica di una competizione | Sì | La posizione degli elementi ha significato. |
| Fasi di un algoritmo | Sì | L’ordine delle operazioni è rilevante. |
| Elenco di linguaggi di programmazione | Non necessariamente | Se non esiste una priorità, l’ordine potrebbe non avere significato. |
Prima di scegliere ol, prova a cambiare mentalmente l’ordine degli elementi. Se modificando la sequenza cambia anche il significato dell’informazione, una lista ordinata è appropriata.
LABORATORIO
Creare una procedura numerata
L’attività consiste nel realizzare una pagina HTML che descriva le fasi necessarie per creare e verificare una semplice pagina web.
L’attività consiste nel realizzare una pagina HTML che descriva le fasi necessarie per creare e verificare una semplice pagina web.
Passo 1 - Creare il documento
Creare un nuovo file denominato procedura.html e inserire la struttura di base:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Procedura di sviluppo</title>
</head>
<body>
<h1>Creazione di una pagina web</h1>
</body>
</html>
Passo 2 - Inserire la lista ordinata
All’interno di body inserire:
<h2>Procedura</h2>
<ol>
<li>Creare una cartella per il progetto</li>
<li>Creare il file index.html</li>
<li>Scrivere la struttura HTML</li>
<li>Inserire i contenuti</li>
<li>Salvare il documento</li>
<li>Aprire index.html nel browser</li>
<li>Verificare il risultato</li>
</ol>
Il browser deve mostrare sette operazioni numerate automaticamente da 1 a 7.
Passo 3 - Aggiungere una sottolista
Sostituire l’ultimo elemento con una versione contenente una lista annidata:
<li>Verificare il risultato
<ol type="a">
<li>Controllare il titolo della pagina</li>
<li>Controllare i contenuti</li>
<li>Verificare eventuali errori</li>
</ol>
</li>
La lista principale deve mantenere la numerazione decimale, mentre la sottolista deve utilizzare lettere minuscole.
Passo 4 - Provare type
Modificare temporaneamente il tag ol principale:
<ol type="I">
Aggiornare la pagina nel browser e osservare la numerazione romana. Provare successivamente anche i valori A, a e i.
Passo 5 - Provare start
Impostare il valore iniziale a 5:
<ol start="5">
Il primo elemento deve essere numerato con 5 e i successivi devono continuare automaticamente.
Passo 6 - Provare reversed
Creare una seconda lista:
<h2>Conto alla rovescia</h2>
<ol reversed>
<li>Preparazione completata</li>
<li>Controllo finale</li>
<li>Avvio</li>
</ol>
La seconda lista deve utilizzare una numerazione decrescente.
Troubleshooting
| Problema | Possibile causa | Controllo |
|---|---|---|
| Gli elementi non vengono visualizzati come lista | Manca ol oppure la struttura HTML è errata | Controllare apertura e chiusura di ol. |
| Un elemento non viene numerato | Il contenuto non è racchiuso in li | Verificare la presenza di <li> e </li>. |
| La sottolista appare in una posizione errata | È stata inserita fuori dal relativo li | Inserire la sottolista all’interno dell’elemento li padre. |
| La numerazione parte da un valore inatteso | È presente start o value | Controllare gli attributi di ol e li. |
| La numerazione è decrescente | È presente reversed | Rimuovere reversed se non è necessario. |
Quando una lista non produce il risultato previsto, controllare prima la struttura degli elementi ol e li e successivamente gli attributi type, start, reversed e value.
Esercizio finale
Realizzare una pagina denominata algoritmo.html che rappresenti le fasi di sviluppo di un semplice programma.
Realizzare una pagina denominata algoritmo.html che rappresenti le fasi di sviluppo di un semplice programma.
La pagina deve contenere:
- un titolo principale;
- una lista ordinata con almeno cinque fasi;
- una sottolista in almeno uno degli elementi;
- una seconda lista che utilizzi type="A";
- una lista che inizi dal valore 5;
- una lista con numerazione decrescente.
Il codice deve utilizzare correttamente ol e li e mantenere una struttura gerarchica valida per le sottoliste.
Verifica rapida
- Qual è la funzione dell’elemento ol?
- Qual è la funzione dell’elemento li?
- Perché i numeri non devono essere scritti manualmente?
- A cosa serve l’attributo type?
- Qual è la funzione dell’attributo start?
- Che cosa accade utilizzando reversed?
- Qual è la differenza tra start e value?
- Dove deve essere inserita una lista annidata?
- Quando è semanticamente appropriato utilizzare una lista ordinata?