HTML — Mauro Torriani

01 Il web e la struttura di una pagina HTML 2 ore ➤

Obiettivi

Comprendere il funzionamento client-server e il ruolo del browser
Riconoscere la struttura minima di un documento HTML
Distinguere tag, elementi e attributi

Esercizi

BaseCreare il primo documento HTML con doctype, head e body
BaseAnalizzare il codice sorgente di una pagina web reale con gli strumenti del browser
IntermedioCorreggere un documento HTML con errori strutturali

02 Testo, titoli e liste 2 ore ➤

Obiettivi

Strutturare un testo con i tag di intestazione h1-h6
Formattare paragrafi ed enfasi testuale
Costruire liste puntate, numerate e annidate

Esercizi

BasePagina di una ricetta con titoli, paragrafi ed enfasi
BaseIndice di un documento con liste annidate
IntermedioRiorganizzazione gerarchica dei titoli di una pagina disordinata

03 Collegamenti e immagini 2 ore ➤

Obiettivi

Creare collegamenti interni ed esterni con il tag a
Inserire immagini con percorsi relativi e assoluti
Usare l'attributo alt in modo corretto

Esercizi

BasePagina con link a sezioni interne (ancore) e a siti esterni
BaseGalleria di immagini con didascalie e testo alternativo
IntermedioVerifica e correzione di percorsi relativi errati in un mini-sito

04 Tabelle 2 ore ➤

Obiettivi

Costruire tabelle con intestazioni e corpo
Unire celle con colspan e rowspan
Scegliere quando una tabella è lo strumento adatto

Esercizi

BaseOrario scolastico settimanale in tabella
IntermedioListino prezzi con celle unite per categorie di prodotto
AvanzatoConversione di un layout impostato a tabelle in una struttura semantica

05 Form e controlli di input 3 ore ➤

Obiettivi

Costruire un form con i principali controlli di input
Associare correttamente label e campi
Distinguere i tipi di input (text, email, radio, checkbox, select)

Esercizi

BaseForm di contatto con nome, email e messaggio
BaseQuestionario con radio button, checkbox e menu a tendina
IntermedioForm di registrazione con validazione nativa (required, pattern)

06 Elementi semantici HTML5 2 ore ➤

Obiettivi

Sostituire i div generici con elementi semantici
Strutturare una pagina con header, nav, main, section, article, footer
Comprendere i vantaggi per accessibilità e SEO

Esercizi

BaseConversione di una pagina a soli div in markup semantico
IntermedioBlog con article e section per ogni contenuto
AvanzatoConfronto tra due versioni della stessa pagina lette da uno screen reader

07 Contenuti multimediali 2 ore ➤

Obiettivi

Inserire audio e video nativi con i relativi controlli
Incorporare contenuti esterni con iframe
Gestire formati e fallback per la compatibilità

Esercizi

BasePagina con un video locale e controlli di riproduzione
BaseIncorporamento di una mappa o di un video esterno con iframe
IntermedioGestione di formati multipli per audio/video con i tag source

08 Attributi globali e accessibilità di base 2 ore ➤

Obiettivi

Usare id, class e data-* in modo coerente
Applicare gli attributi aria essenziali
Verificare il contrasto e la leggibilità di una pagina

Esercizi

BasePagina con attributi data-* usati per organizzare contenuti
IntermedioAggiunta di attributi aria-label a controlli non testuali
AvanzatoAudit di accessibilità di base su una pagina esistente

09 Struttura di un sito multipagina 2 ore ➤

Obiettivi

Organizzare cartelle, file e risorse di un sito
Collegare più pagine tra loro in modo coerente
Configurare meta tag e favicon

Esercizi

BaseSito di 3 pagine collegate con una navigazione comune
BaseOrganizzazione di immagini e fogli di stile in cartelle dedicate
IntermedioAggiunta di meta tag descrittivi e favicon a un sito esistente

10 Validazione e progetto finale 3 ore ➤

Obiettivi

Validare un documento HTML con gli strumenti del W3C
Applicare le buone pratiche viste nel corso
Realizzare un piccolo sito personale multipagina

Esercizi

BaseValidazione e correzione degli errori di un documento HTML fornito
IntermedioChecklist di buone pratiche applicata a una pagina esistente
AvanzatoProgetto finale: sito personale di 3-4 pagine (home, chi sono, contatti)