Obiettivo della lezione
Inserire contenuti multimediali con controlli, fallback e attenzione a peso e accessibilità.
Spiegazione
HTML5 permette di inserire audio e video senza plugin esterni. È importante usare file ottimizzati e offrire controlli all’utente. Per video informativi è consigliabile prevedere sottotitoli o una trascrizione.
Idea chiave: in HTML devi scegliere il tag in base al significato del contenuto. La grafica verrà gestita in seguito con CSS.
Codice di esempio
Studia il blocco seguente e prova a copiarlo in un file HTML, modificando testi e contenuti.
<video controls width="640">
<source src="video/lezione-html.mp4" type="video/mp4">
Il tuo browser non supporta il video HTML5.
</video>
<audio controls>
<source src="audio/introduzione.mp3" type="audio/mpeg">
</audio>Errori comuni
- Inserire video troppo pesanti.
- Far partire audio o video automaticamente.
- Non fornire alternative testuali per contenuti importanti.
Esercizio pratico
Crea una nuova pagina partendo dalla struttura base. Applica l’argomento di questa lezione a un contenuto reale: una pagina corso, una scheda personale o una piccola pagina informativa.
- Apri il tuo editor.
- Crea o aggiorna un file
.htmlo.asp. - Inserisci il codice della lezione.
- Modifica testi e attributi.
- Apri la pagina nel browser e controlla il risultato.
Lezioni collegate
Continua il laboratorio
Procedi con la lezione successiva oppure passa agli esercizi per consolidare subito i concetti.