Mattia.sala: Crea Lezione 2: Liste e nuove pagine (da PDF Sushi Card)

2026-08-03T20:53:28Z

Crea Lezione 2: Liste e nuove pagine (da PDF Sushi Card)

Nuova pagina

{{Corso/Pagina|corso=webdesign|1=Lezione 2 · 45-60 minuti|2=📃 Liste e nuove pagine|obiettivo=Obiettivo: '''creare una seconda pagina del tuo sito e imparare le liste puntate e numerate.'''}}
== 🎒 Ci serve ==

{{Corso/Materiali}}
*L'editor di testo e il browser della Lezione 1
*La cartella <code>mio-primo-sito</code>, con dentro <code>chi-sono.html</code>
{{Corso/FineMateriali}}

== 🧠 Un po' di teoria ==

Un sito web è quasi sempre fatto di più pagine, collegate tra loro: ogni pagina è un file <code>.html</code> 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 ==

{{Corso/Passi}}
{{Corso/Passo|1=
Nella cartella <code>mio-primo-sito</code>, duplica <code>chi-sono.html</code> (copia-incolla: CTRL+C poi CTRL+V) e rinomina la copia in <code>hobby.html</code> (selezionala e premi F2).
}}
{{Corso/Passo|1=
Apri <code>hobby.html</code> con l'editor. Hai ottenuto una nuova pagina web in cui parlare dei tuoi hobby! Cambia il <code>title</code> e il contenuto del <code>body</code>: metti un titolo con <code>h1</code> (per esempio "I miei hobby"), magari un sottotitolo con <code>h2</code> e qualche paragrafo con <code>p</code>.
}}
{{Corso/Passo|1=
Inserisci una lista dei tuoi hobby preferiti. Usa il tag <code>ul</code> e racchiudi ogni hobby in un elemento <code>li</code>, così:
<pre>
<ul>
<li>Partecipare al CoderDojo</li>
<li>Imparare a programmare</li>
<li>...</li>
</ul>
</pre>
Salva e aggiorna il browser.
}}
{{Corso/Passo|1=
Fai la classifica dei tuoi preferiti! Trasforma la lista in una lista numerata, cambiando il tag <code>ul</code> in <code>ol</code> — sia nell'apertura che nella chiusura:
<pre>
<ol>
<li>Partecipare al CoderDojo</li>
<li>Imparare a programmare</li>
<li>...</li>
</ol>
</pre>
Cosa cambia?
{{Corso/Tip|1=Hai imparato come rappresentare le liste in HTML: <code>li</code> indica un elemento di una lista, <code>ul</code> una lista NON ordinata ("u" sta per "unordered"), <code>ol</code> una lista ordinata ("o" sta per "ordered"). Ricorda di cambiare sempre sia il tag di apertura che quello di chiusura.}}
}}
{{Corso/FinePassi}}

{{Corso/Warn|1=Se dimentichi di chiudere un <code></li></code> o un <code></ul></code>, 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 ==

{{Corso/Sfida|1=stella|2=
Aggiungi una seconda lista (puntata o numerata) con i tuoi cibi preferiti.
}}

{{Corso/Sfida|1=cometa|2=
In una delle liste, evidenzia con <code>strong</code> l'elemento che ti piace di più.
}}

{{Corso/Sfida|1=razzo|2=
Prova a creare una "sotto-lista": incastra un intero <code><ul>...</ul></code> dentro un elemento <code><li></code> di un'altra lista. Come la mostra il browser?
}}

== 📝 Quiz: mettiti alla prova ==

{{Corso/Quiz|domanda=Cosa rappresenta il tag <ul>?|A=Una lista non ordinata.|B=Un titolo.|C=Un'immagine.|risposta=A|ok=Sì! "u" sta per "unordered".|riprova=Riprova!}}

{{Corso/Quiz|domanda=Cosa rappresenta il tag <ol>?|A=Un paragrafo.|B=Una lista ordinata, numerata.|C=Un collegamento.|risposta=B|ok=Esatto: "o" sta per "ordered".|riprova=Riprova!}}

{{Corso/Quiz|domanda=Dentro quale tag va racchiuso ogni elemento di una lista?|A=<li>|B=<p>|C=<h2>|risposta=A|ok=Sì! li sta per "list item".|riprova=Riprova!}}

== 📚 Da guardare o leggere ==

{{Corso/Fonte|1=
[https://developer.mozilla.org/it/docs/Web/HTML/Element/ul Il tag ul su MDN] e [https://developer.mozilla.org/it/docs/Web/HTML/Element/ol il tag ol su MDN] — con altri esempi ed elenchi annidati.
}}

{{Corso/FinePagina|prev=[[Corsi/Web design/Lezione 1|Lezione 1: Il tuo primo tag HTML]]|next=[[Corsi/Web design/Lezione 3|Lezione 3: Le immagini]]}}

Corsi/Web design/Lezione 2 - Cronologia

Mattia.sala: Crea Lezione 2: Liste e nuove pagine (da PDF Sushi Card)