Esercizi Liste HTML

Codegrind Team•Jul 16 2023

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>