Tag correlati ai media

Questo articolo spiega i tag relativi ai media.

Spiega come descrivere immagini, video, audio, ecc. in HTML, così come elementi comprimibili e frame inline.

YouTube Video

Tag correlati ai media

Tag <img>

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• Il tag <img> viene utilizzato per incorporare immagini. L'attributo src specifica il percorso dell'immagine, mentre l'attributo alt fornisce una descrizione quando l'immagine non può essere visualizzata.

Tag <figure> e <figcaption>

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• Il tag <figure> raggruppa contenuti multimediali come immagini o illustrazioni insieme a una didascalia utilizzando il tag <figcaption>.

Tag <picture>

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• Il tag <picture> viene utilizzato per supportare immagini reattive, permettendo di selezionare l'immagine appropriata in base a diverse condizioni di visualizzazione.

• L'attributo media specifica condizioni nello stesso formato delle query multimediali CSS.

  • Puoi specificare condizioni come la larghezza minima (min-width), la larghezza massima (max-width) o l'orientamento dello schermo (orientation).

• In questo esempio, le seguenti immagini vengono visualizzate a seconda della larghezza dello schermo.

  • Se la larghezza dello schermo è di 800px o più, viene visualizzato large.jpg.
  • Se la larghezza dello schermo è di 400px o più ma inferiore a 800px, viene visualizzato medium.jpg.
  • Se la larghezza dello schermo è inferiore a 400px, viene visualizzato small.jpg (l'immagine nel tag <img>).

Tag <canvas>

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• Il tag <canvas> fornisce un'area in cui è possibile disegnare grafica dinamica utilizzando JavaScript.

Tag <map>

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• Il tag <map> viene utilizzato per definire una mappa immagine. Le aree cliccabili all'interno della mappa sono definite utilizzando il tag <area>. Questo consente a parti specifiche di un'immagine di essere cliccabili, portando a un link.
• Specifica il nome dell'elemento mappa associato (tag <map>) nell'attributo usemap del tag <img>, preceduto da #.
• Specificando correttamente l'attributo alt del tag <area>, puoi migliorare l'accessibilità per gli utenti con disabilità visive.

Tag <embed>

1<embed src="movie.mp4" width="300" height="200">

• Il tag <embed> viene utilizzato per incorporare contenuti esterni come PDF, video o audio.

Tag <video>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• Il tag <video> viene utilizzato per incorporare contenuti video. Puoi specificare più formati utilizzando il tag <source>.

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• L'attributo preload consente di specificare quanto del video deve essere caricato dal browser prima che inizi la riproduzione.
  • auto indica al browser di pre-caricare l'intero file multimediale. Può ridurre il ritardo all'inizio della riproduzione, ma i dati potrebbero essere scaricati anche se l'utente non riproduce il file multimediale.
  • metadata carica solo i metadati del file multimediale (ad es., durata, informazioni sulle tracce). I dati multimediali non vengono caricati fino a quando l'utente non avvia la riproduzione. Questo è adatto quando si ha bisogno di informazioni sintetiche sul file multimediale.
  • none non pre-carica il file multimediale. Il file multimediale non scarica risorse fino all'inizio della riproduzione. Questo è adatto quando si desidera minimizzare l'uso dei dati.

Tag <audio>

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• Il tag <audio> viene utilizzato per incorporare contenuti audio. Il tag <source> supporta più formati.
• Come con il tag <video>, l'attributo preload può essere utilizzato per specificare quanto audio deve essere caricato prima che inizi la riproduzione.

Tag <track>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• Il tag <track> viene utilizzato per specificare tracce di testo come sottotitoli e didascalie. Può essere utilizzato all'interno dei tag <audio> o <video>.
• L'attributo kind consente di specificare lo scopo della traccia (ad es., sottotitoli, didascalie, capitoli, ecc.). Puoi specificare i seguenti valori.
  • subtitles fornisce sottotitoli che traducono il contenuto dei video o audio o lo rendono più comprensibile per gli spettatori. Il suo scopo principale è la traduzione diretta dell'audio.
  • captions fornisce informazioni aggiuntive come musica ed effetti sonori per persone sorde o con difficoltà uditive, oltre all'audio.
  • descriptions sono tracce che descrivono il contenuto visivo di un video, come azioni e scenari, per persone non vedenti o ipovedenti.
  • chapters fornisce marcatori di capitoli (titoli dei capitoli) per indicare punti specifici all'interno del video.
  • metadata fornisce informazioni aggiuntive per l'analisi o l'elaborazione del file multimediale ma non è visualizzato agli utenti.

Tag <iframe>

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• Il tag <iframe> viene utilizzato per incorporare altre pagine HTML o contenuti esterni (come siti web, video o documenti) nella pagina corrente. Viene spesso utilizzato per incorporare video di YouTube in una pagina.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video