Obiettivo
Descrivere un evento in modo completo usando tag semantici e contenuti facili da scansionare.
Traccia
Prepara una pagina evento con data, luogo, programma e informazioni pratiche.
Requisiti richiesti
- Usa
articleper l’evento. - Inserisci data e ora con
time datetime. - Crea una sezione programma con lista ordinata.
- Aggiungi luogo e link di approfondimento.
Consiglio: prima scrivi il contenuto in modo semplice, poi controlla la gerarchia dei titoli e solo alla fine pensa alla grafica.
Procedura guidata
- Crea un nuovo file con nome chiaro, ad esempio
05-pagina-evento.html. - Inserisci la struttura base del documento o lavora dentro il
mainse il layout è già pronto. - Aggiungi titoli, paragrafi, liste, immagini o form richiesti dalla traccia.
- Apri il file nel browser e verifica che i contenuti siano nell’ordine corretto.
- 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.
<article>
<header>
<h1>Workshop HTML5 dal vivo</h1>
<p><time datetime="2026-06-15T15:00">15 giugno 2026, ore 15:00</time></p>
</header>
<section>
<h2>Programma</h2>
<ol>
<li>Introduzione alla struttura HTML</li>
<li>Esercizio guidato</li>
<li>Domande finali</li>
</ol>
</section>
<section>
<h2>Luogo</h2>
<p>Aula informatica, Via Roma 10.</p>
</section>
</article>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
h1e i titoli non saltano livello senza motivo. - ✓Percorsi: link, immagini e file collegati usano nomi corretti.
Continua gli esercizi
Passa alla traccia precedente o successiva mantenendo lo stesso metodo: struttura, controllo, miglioramento.