Lezione 2 · 45-60 minuti

📃 Liste e nuove pagine

Obiettivo: creare una seconda pagina del tuo sito e imparare le liste puntate e numerate.

🎒 Ci serve

L'editor di testo e il browser della Lezione 1
La cartella mio-primo-sito, con dentro chi-sono.html

🧠 Un po' di teoria

Un sito web è quasi sempre fatto di più pagine, collegate tra loro: ogni pagina è un file .html a sé. Oggi ne crei una seconda, ripartendo dallo stesso scheletro della Lezione 1, e impari un nuovo modo per organizzare il contenuto: le liste.

🔨 Costruisci: la pagina dei tuoi hobby

Nella cartella mio-primo-sito, duplica chi-sono.html (copia-incolla: CTRL+C poi CTRL+V) e rinomina la copia in hobby.html (selezionala e premi F2).

Apri hobby.html con l'editor. Hai ottenuto una nuova pagina web in cui parlare dei tuoi hobby! Cambia il title e il contenuto del body: metti un titolo con h1 (per esempio "I miei hobby"), magari un sottotitolo con h2 e qualche paragrafo con p.

Inserisci una lista dei tuoi hobby preferiti. Usa il tag ul e racchiudi ogni hobby in un elemento li, così:

<ul>
  <li>Partecipare al CoderDojo</li>
  <li>Imparare a programmare</li>
  <li>...</li>
</ul>

Salva e aggiorna il browser.

Fai la classifica dei tuoi preferiti! Trasforma la lista in una lista numerata, cambiando il tag ul in ol — sia nell'apertura che nella chiusura:

<ol>
  <li>Partecipare al CoderDojo</li>
  <li>Imparare a programmare</li>
  <li>...</li>
</ol>

     Cosa cambia?

Hai imparato come rappresentare le liste in HTML: li indica un elemento di una lista, ul una lista NON ordinata ("u" sta per "unordered"), ol una lista ordinata ("o" sta per "ordered"). Ricorda di cambiare sempre sia il tag di apertura che quello di chiusura.

Se dimentichi di chiudere un </li> o un </ul>, il browser spesso "aggiusta" da solo la pagina — ma il codice resta scorretto, e prima o poi ti darà un problema. Abituati a chiudere sempre ogni tag che apri.

🚀 Sfide

⭐ Stella

Aggiungi una seconda lista (puntata o numerata) con i tuoi cibi preferiti.

⭐⭐ Cometa

In una delle liste, evidenzia con strong l'elemento che ti piace di più.

⭐⭐⭐ Razzo

Prova a creare una "sotto-lista": incastra un intero <ul>...</ul> dentro un elemento <li> di un'altra lista. Come la mostra il browser?

📝 Quiz: mettiti alla prova

Cosa rappresenta il tag <ul>?

Una lista non ordinata.

Un titolo.

Un'immagine.

Cosa rappresenta il tag <ol>?

Un paragrafo.

Una lista ordinata, numerata.

Un collegamento.

Dentro quale tag va racchiuso ogni elemento di una lista?

<li>

<p>

<h2>

📚 Da guardare o leggere

Il tag ul su MDN e il tag ol su MDN — con altri esempi ed elenchi annidati.