Inserimento di elementi multimediali

Impariamo a inserire immagini, audio e video.

Come si inserisce un'immagine

Per visualizzare un'immagine contenuta nella stessa cartella del file html:

Se l'immagine è contenuta in una sottocartella:

Per inserire l'immagine presente in un altro sito:

 

Testo alternativo

L'attributo alt permette di inserire una descrizione dell'immagine, da usare quando non potrà essere visualizzata (ad esempio in uno screen reader):

 

Larghezza e altezza

Per specificare le dimensioni dell'immagine:

Nota: inserendo solo una delle dimensioni, l'altra viene calcolata in modo da mostrare l'immagine in modo proporzionale.

 

Titolo

Come per i link, è possibile impostare un attributo titolo che fornisce ulteriori informazioni quando ci si ferma con il mouse sopra l'immagine (tooltip):

 

 

Didascalie

HTML5 permette di associare una didascalia a un'immagine:

 

Video

 

Come per il tag img, l'attributo src contiene il percorso del video.

L'attributo controls specifica di visualizzare i controlli per l'avvio e l'arresto del video.

Il paragrafo all'interno dei tag <video> è definito un contenuto di fallback: viene mostrato se il browser non supporta la visualizzazione del video richiesto.

 

Usare formati multipli per migliorare la compatibilità

Dato che alcune piattaforme potrebbero non essere in grado di mostrare il video in un certo formato, è possibile specificare versioni alternative del video in modo che il browser scelga quella che preferisce:

 

Altri attributi del tag video

Quando si visualizza un video in HTML è possibile attivare anche altre funzionalità:

• width e height: specificano le dimensioni del video
• autoplay: chiede di avviare il video non appena la pagina viene caricata, senza che l'utente lo avvii
• loop: il video viene ripetuto
• muted: parte con l'audio disattivato
• poster: l'URL di un'immagine che viene mostrata prima dell'avvio del video
• preload: per file di grandi dimensioni, permette di specificare se dev'essere usato il buffering

 

Audio

Funziona come l'emento <video>:

Naturalmente ci sono alcune piccole differenze: gli attributi width e height ad esempio non sono supportati.

Esercizio: Pet Shop

1. Una home page che rimanda a quattro sezioni: Cani, Gatti, Uccelli, Acquari
2. Ognuna delle quattro sezioni avrà un indice con un elenco di tre prodotti in vendita riferiti a quel tipo di animali: un prodotto per l'alimentazione, uno per l'igiene, uno per il divertimento (ad es. per i gatti potrebbe essere "Croccantini di pollo", "Lettiera", "Grattatoio"... cerca in Internet per trovare qualcosa di adatto ad ogni animale)
3. Per ogni prodotto ci sarà una pagina con titolo, foto, descrizione, e due link: uno per tornare alla home principale, uno per tornare home di quella sezione del sito
4. La struttura delle cartelle dev'essere come nell'esempio: nota che le foto vanno messe in una cartella images

• [04 - Pet Shop]
  • index.html
  • [gatti]
    • index.html
    • croccantini.html
    • lettiera.html
    • grattatoio.html
    • [images]
      • croccantini.jpg
      • lettiera.jpg
      • grattatoio.jpg
  • [cani]
    • ...
  • ...

• HTML