🗓️ Scaletta della lezione

0–5'Ripasso
5–14'Liste ul, ol, dl
14–24'Tabelle
24–33'Laboratorio: orario e glossario
33–38'Quiz

📋 Cosa devi sapere alla fine della lezione

1. Tre tipi di elenco

liste 
<ul>
  <li>Tastiera</li>
  <li>Mouse</li>
</ul>

<ol>
  <li>Accendi il computer</li>
  <li>Apri l'editor</li>
  <li>Salva il file con estensione .html</li>
</ol>

<dl>
  <dt>CPU</dt>
  <dd>Unità centrale di elaborazione: esegue le istruzioni.</dd>
  <dt>RAM</dt>
  <dd>Memoria di lavoro volatile.</dd>
</dl>

Le liste si possono annidare: un <ul> va dentro un <li>, mai direttamente dentro un altro <ul>. Su <ol> puoi usare gli attributi start="5", reversed e type="A".

2. Le tabelle: righe e celle

Una tabella si costruisce riga per riga: prima la riga (<tr>, table row), poi dentro le celle da sinistra a destra.

tabella 
<table>
  <caption>Orario di Informatica</caption>
  <thead>
    <tr>
      <th>Giorno</th>
      <th>Ora</th>
      <th>Aula</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lunedì</td>
      <td>3ª</td>
      <td>Lab. 2</td>
    </tr>
    <tr>
      <td>Giovedì</td>
      <td colspan="2">Uscita didattica</td>
    </tr>
  </tbody>
</table>
♿ Tabelle accessibili

Le celle <th> non servono solo a mettere in grassetto: permettono a un lettore vocale di annunciare “Giorno: Lunedì, Ora: 3ª”. E le tabelle si usano solo per dati tabellari, mai per impaginare la pagina.

3. Laboratorio: orario e glossario

✍️ Compito (9 minuti)
  1. Nel playground completa la tabella con il tuo orario delle lezioni di indirizzo (almeno 3 righe).
  2. Usa colspan o rowspan almeno una volta (es. due ore consecutive).
  3. Sotto la tabella crea un glossario <dl> con 4 termini visti finora (HTML, tag, attributo, DOCTYPE).
  4. Copia il glossario nel tuo appunti.html: crescerà a ogni lezione.
🧪 Playground: orario e glossario Apri a schermo intero ↗

Il codice che scrivi resta salvato in questo browser. Usa 💾 Esporta .html per scaricarlo e consegnarlo.

🎯 Quiz di Autovalutazione (10 Domande)

Seleziona una risposta per ogni domanda e premi il pulsante finale per vedere il punteggio, l'esito e le spiegazioni.

1. Quale lista useresti per i passaggi di una procedura?
2. Quale tag rappresenta una voce di elenco in ul e ol?
3. In un glossario <dl>, cosa contiene <dd>?
4. Cosa rappresenta <tr>?
5. Che differenza c'è tra <th> e <td>?
6. Quale attributo unisce una cella su due colonne?
7. A cosa serve <caption>?
8. Si possono usare le tabelle per impaginare un intero sito?
9. Come si crea un elenco dentro un altro elenco?
10. Quale attributo di <ol> fa partire la numerazione da 5?

Esito Finale del Questionario

0 / 10

← Torna all'Indice Generale Lezioni