Il mondo digitale è intrinsecamente visivo e sonoro, e HTML fornisce gli strumenti per incorporare questa ricchezza multimediale nelle pagine web.
In questo articolo, esploreremo il tag <img> per l’inserimento di immagini, discuteremo l’importanza degli attributi src e alt, e scopriremo come incorporare video e audio utilizzando i tag <video> e <audio>.
Tag <img>
Il tag <img> è il pilastro per l’inserimento di immagini nelle pagine HTML.
La sua sintassi di base è semplice:
<img src="url_dell_immagine" alt="descrizione_alternativa">
- Attributo src: Specifica l’URL o il percorso dell’immagine.
Può essere un URL assoluto o relativo. - Attributo alt: Fornisce una descrizione alternativa per l’immagine, importante per l’accessibilità e per i casi in cui l’immagine non può essere visualizzata.
<img src="immagine.jpg" alt="Un tramonto mozzafiato su una spiaggia deserta">
Tag <video>
Il tag <video> consente l’inserimento di contenuti video all’interno di una pagina HTML.
Vediamo un esempio di base:
<video width="600" height="400" controls>
<source src="video.mp4" type="video/mp4">
Il tuo browser non supporta il tag video.
</video>
- Attributo width e height: Definiscono le dimensioni del video nella pagina.
- Attributo controls: Aggiunge i controlli di riproduzione standard come play, pausa e barra di avanzamento.
- Tag <source>: Specifica la sorgente del video e il suo tipo MIME.
Tag <audio>
Il tag <audio> è analogo al tag <video>, ma progettato per l’inserimento di file audio:
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Il tuo browser non supporta il tag audio.
</audio>
Anche qui, l’attributo controls aggiunge i controlli di riproduzione.
Esempi pratici e approfondimenti
Incorporare Immagini Responsively:
<img src="immagine.jpg" alt="Un tramonto mozzafiato su una spiaggia deserta" style="max-width:100%; height:auto;">
Video con tracce multiple:
<video width="600" height="400" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Il tuo browser non supporta il tag video.
</video>
Conclusioni: Un Mondo Multimediale nelle Tue Mani
HTML fornisce gli strumenti essenziali per integrare immagini, video e audio nelle tue pagine web.
La corretta gestione dell’attributo alt per le immagini garantisce accessibilità, mentre i tag <video> e <audio> portano il tuo contenuto multimediale a nuove vette.
Sperimenta con le dimensioni, le descrizioni e i formati per creare esperienze visive e sonore coinvolgenti, portando il tuo sito web al prossimo livello di interattività e coinvolgimento.
