Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo delle liste ordinate <ol>
e non ordinate <ul>
in HTML.
Esercizio 1
Crea una lista non ordinata con almeno 3 elementi.
<!DOCTYPE html><html> <head> <title>Titolo della pagina</title> </head> <body> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul> </body></html>
Esercizio 2
Crea una lista ordinata con almeno 3 elementi.
<!DOCTYPE html><html> <head> <title>Titolo della pagina</title> </head> <body> <ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ol> </body></html>
Esercizio 3
Crea una lista non ordinata con una lista ordinata annidata al suo interno.
<!DOCTYPE html><html> <head> <title>Titolo della pagina</title> </head> <body> <ul> <li> Elemento 1 <ol> <li>Sottoelemento 1</li> <li>Sottoelemento 2</li> <li>Sottoelemento 3</li> </ol> </li> <li>Elemento 2</li> <li>Elemento 3</li> </ul> </body></html>
Esercizio 4
Crea una lista ordinata utilizzando diversi tipi di numerazione o marcatori (es. numeri, lettere, romani).
<!DOCTYPE html><html> <head> <title>Titolo della pagina</title> </head> <body> <ol type="1"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ol> <ol type="A"> <li>Elemento A</li> <li>Elemento B</li> <li>Elemento C</li> </ol> <ol type="I"> <li>Elemento I</li> <li>Elemento II</li> <li>Elemento III</li> </ol> </body></html>
Esercizio 5
Crea una lista ordinata che inizi da un numero diverso da 1.
<!DOCTYPE html><html> <head> <title>Titolo della pagina</title> </head> <body> <ol start="5"> <li>Elemento 5</li> <li>Elemento 6</li> <li>Elemento 7</li> </ol> </body></html>
Esercizio 6
Crea una lista di definizioni utilizzando gli elementi dl, dt, dd.
<!DOCTYPE html><html> <head> <title>Titolo della pagina</title> </head> <body> <dl> <dt>Parola 1</dt> <dd>Definizione 1</dd> <dt>Parola 2</dt> <dd>Definizione 2</dd> <dt>Parola 3</dt> <dd>Definizione 3</dd> </dl> </body></html>
Esercizio 7
Crea una lista di descrizione anagrafica personale utilizzando gli elementi , - ,
- .
<!DOCTYPE html><html> <head> <title>Titolo della pagina</title> </head> <body> <dl> <dt>Nome:</dt> <dd>John Doe</dd> <dt>EtĂ :</dt> <dd>25 anni</dd> <dt>Professione:</dt> <dd>Programmatore</dd> </dl> </body></html>
Esercizio 8
Crea una lista di definizioni annidata utilizzando gli elementi , - ,
- .
<!DOCTYPE html><html> <head> <title>Titolo della pagina</title> </head> <body> <dl> <dt>Animale</dt> <dd> <dl> <dt>Specie</dt> <dd>Tigre</dd> <dt>EtĂ </dt> <dd>10 anni</dd> </dl> </dd> <dt>Piante</dt> <dd> <dl> <dt>Specie</dt> <dd>Rosa</dd> <dt>Colore</dt> <dd>Rosso</dd> </dl> </dd> </dl> </body></html>
Esercizio 9 (difficile con CSS)
Crea una lista non ordinata senza punti elenco utilizzando l'attributo style.
<!DOCTYPE html><html> <head> <title>Titolo della pagina</title> </head> <body> <ul style="list-style-type: none;"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul> </body></html>