Galleria immagini

Traccia

Inserisci una galleria con immagini ottimizzate, didascalie e testi alternativi.

Requisiti richiesti

• Usa figure e figcaption per ogni immagine importante.
• Scrivi alt descrittivi e non ripetitivi.
• Organizza la galleria dentro una sezione con titolo.
• Verifica percorsi e nomi file.

Procedura guidata

1. Crea un nuovo file con nome chiaro, ad esempio 09-galleria-immagini.html.
2. Inserisci la struttura base del documento o lavora dentro il main se il layout è già pronto.
3. Aggiungi titoli, paragrafi, liste, immagini o form richiesti dalla traccia.
4. Apri il file nel browser e verifica che i contenuti siano nell’ordine corretto.
5. Valida il codice e correggi eventuali tag non chiusi o attributi mancanti.

Base di partenza

Il codice seguente non è l’unica soluzione possibile: usalo come riferimento e personalizzalo.

<section>
  <h1>Galleria del laboratorio</h1>
  <figure>
    <img src="img/aula-html.jpg" alt="Studenti durante un laboratorio HTML in aula informatica">
    <figcaption>Laboratorio pratico sulla struttura delle pagine.</figcaption>
  </figure>
  <figure>
    <img src="img/editor-codice.jpg" alt="Schermo con editor di codice aperto su un documento HTML">
    <figcaption>Scrittura e controllo del codice nel browser.</figcaption>
  </figure>
</section>

Checklist di controllo

• ✓Semantica: i tag descrivono il ruolo reale dei contenuti.
• ✓Accessibilità: immagini, form e link sono comprensibili anche fuori dal contesto visivo.
• ✓Ordine: c’è un solo h1 e i titoli non saltano livello senza motivo.
• ✓Percorsi: link, immagini e file collegati usano nomi corretti.