Il tuo sito ha qualcosa in più.

15 minuti

1. Apri in VS Code la cartella il-mio-sito, con index.html e style.css. Conservane prima una copia chiamata copia-21-ottobre.
2. Apri index.html nel browser. Controlla titolo, due servizi con prezzi, orari e menu.
3. Se manca qualcosa, usa la lezione di ieri. Prima completa questi pezzi.

Oggi continui sulla stessa attività inventata. Non ricominciare da una pagina vuota. Dopo ogni modifica salva con Ctrl+S e aggiorna il browser.

<main>
  <section id="servizi">
    <h2>I nostri servizi</h2>
    <p>Ripariamo biciclette.</p>
  </section>
</main>

25 minuti · scopri figure, img e figcaption

Prima pensa: quale immagine aiuta a capire cosa offre il tuo negozio? Scegli una tua immagine o una fornita dal docente. Non usare foto dei compagni.

1. Crea la cartella img dentro il-mio-sito. Salva lì l’immagine; per questo esempio usiamo officina.jpg. Se il tuo file è .png, usa quel nome anche nel codice: cambiare estensione non converte l’immagine.
2. Aggiungi il blocco qui sotto dentro <main>, dopo la presentazione.
3. Riscrivi descrizione e didascalia per la tua immagine.

<figure>
  <img src="img/officina.jpg"
       alt="Banco da lavoro con ruote e attrezzi per riparare biciclette">
  <figcaption>Il banco dove prepariamo le bici per il prossimo giro.</figcaption>
</figure>

<figure>

Il contenitore dell’immagine e della sua didascalia. Si chiude dopo figcaption.

<img>

Mostra l’immagine. src indica il percorso del file; alt descrive ciò che si vede, per chi usa un lettore di schermo o se il file non si carica. Non scrivere </img>: questo elemento non ha contenuto interno né tag di chiusura.

<figcaption>

La didascalia visibile che accompagna l’immagine. Sta dentro figure. Può spiegare il contesto; alt descrive invece il contenuto dell’immagine.

figure raggruppa immagine e didascalia. figcaption è il testo visibile sotto la foto. alt descrive il contenuto dell’immagine anche a chi non la vede.

figure { margin: 24px 0; }
figure img { max-width: 100%; height: auto; display: block; }
figcaption { margin-top: 8px; }

Prova: restringi la finestra. La foto deve restringersi senza uscire dal bordo. Per un momento scrivi un nome di file sbagliato: quale testo appare? Poi ripristina il percorso corretto.

15 minuti · scopri ol, strong ed em

Ieri hai usato ul per i servizi. Oggi spiega come lavorate in tre passaggi, con un elenco numerato ol. Prima di provare, prevedi cosa cambierà rispetto a ul.

Dentro main, prima di </main>:

<section id="come-lavoriamo">
  <h2>Come lavoriamo</h2>
  <ol>
    <li>Ascoltiamo il problema della bici.</li>
    <li>Concordiamo <strong>il prezzo prima della riparazione</strong>.</li>
    <li>Controlliamo il risultato <em>insieme a te</em>.</li>
  </ol>
</section>

<section>

Tiene insieme il titolo e l’elenco. id="come-lavoriamo" è il nome di questa sezione, da usare anche in un link del menu.

<h2>

Il titolo della sezione: qui “Come lavoriamo”.

<ol>

Elenco ordinato: il browser numera le voci. Apri ol prima della lista e chiudilo dopo l’ultima voce.

<li>

Una singola voce dell’elenco. Ogni passaggio ha il proprio <li>…</li>; sta dentro ol oppure ul.

<strong>

Una parte importante del testo. Il browser di solito la mostra in grassetto: qui evidenzia che concordiamo il prezzo prima.

<em>

Una parte da leggere con enfasi. Di solito appare in corsivo: qui mette l’accento su “insieme a te”.

strong indica un’informazione importante; em mette enfasi su una parte della frase. Non servono a creare titoli: per quelli usa h1, h2 e h3.

Prova: aggiungi un quarto passaggio, poi spostalo al secondo posto. Devi riscrivere i numeri? Spiega perché questo elenco ha un ordine, mentre quello dei servizi può non averlo.

25 minuti · scopri table, caption, tr, th e td

Prima pensa: come mostreresti tre giorni con orari diversi? Una tabella mette in relazione giorni e orari. Non usarla per disporre tutta la pagina.

Nella sezione id="orari" conserva il titolo h2. Sostituisci solo il vecchio paragrafo degli orari con:

<table>
  <caption>Orari di apertura</caption>
  <tr>
    <th scope="col">Giorno</th>
    <th scope="col">Orario</th>
  </tr>
  <tr>
    <th scope="row">Lunedì</th>
    <td>Chiuso</td>
  </tr>
  <tr>
    <th scope="row">Martedì–venerdì</th>
    <td>9:00–18:00</td>
  </tr>
  <tr>
    <th scope="row">Sabato</th>
    <td>9:00–12:00</td>
  </tr>
</table>

<table>

Il contenitore di tutta la tabella. Aprilo prima di caption, chiudilo dopo l’ultima riga.

<caption>

Il titolo che spiega il contenuto della tabella. Qui è “Orari di apertura”; va dentro table, prima delle righe.

<tr>

Una riga: contiene le sue celle. Il browser le dispone una accanto all’altra. Poi un nuovo tr comincia una nuova riga.

<th>

Una cella di intestazione: spiega che cosa significano i dati. scope="col" descrive la colonna sotto; scope="row" descrive la riga accanto.

<td>

Una cella con un dato, per esempio “Chiuso” o “9:00–18:00”. Sta dentro tr, allo stesso livello delle altre celle.

table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: 8px; }
th, td { border: 1px solid #9aafa7; padding: 10px; text-align: left; }
th { background: #e4f3eb; }

Prova: cambia gli orari e aggiungi la domenica. Ogni riga deve mantenere due celle. Fai trovare a un compagno l’orario del sabato senza indicargli dove guardare.

20 minuti · controllo e correzioni

1. Su una finestra stretta, leggi didascalia, prezzi e orari senza scorrere a destra.
2. Chiedi a un compagno di trovare: che cosa offri, cosa succede prima della riparazione e quando apri il sabato.
3. Correggi una difficoltà che hai osservato. Poi fate la stessa prova di nuovo.

Non cancellare i servizi di ieri. Se hai creato una nuova sezione, aggiungi il collegamento nel menu e provalo.

Scegli una sola estensione:

• Una seconda pagina: sposta “Come lavoriamo” in un file separato e crea i collegamenti per andare e tornare. Aiuto di ieri.
• Domande frequenti: usa details e summary per tre domande reali dei clienti. Esempio da riprendere.
• Un confronto: crea una piccola tabella con servizio, prezzo e durata. Scrivi intestazioni chiare e controlla la vista stretta.

<details>
  <summary>Devo prenotare?</summary>
  <p>Sì, chiamaci prima di portare la bici.</p>
</details>

Salva e spiega

Ultimi 20 minuti: recupero dei passaggi mancanti, salvataggio e spiegazione

Salva index.html, style.css e la cartella img. Riapri il sito dal PC. Mostra al docente un nuovo tag, il suo effetto e una prova che hai fatto. Se manca tempo, termina bene un’aggiunta e conserva il resto per la prossima lezione.