## Obiettivo
Creazione di un'esperienza multimediale coinvolgente per i visitatori del sito web, integrando contenuti audio e video.

## Attività
Portare il sito web a un livello superiore immergendo gli utenti in un'esperienza multimediale coinvolgente. Attività richiesta:

**Per l'audio**: incorporare un file audio che offra un'atmosfera rilassante per gli utenti. Utilizzare il seguente link per l'audio:
```
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/just-relax-audio.mp3
```

**Per il video**: integrare un video che permetta agli utenti di ammirare la bellezza delle creature della natura. Utilizzare il seguente link per il video:
```
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/tiger-video.mp4
```

Aggiungere controlli di riproduzione come play e pausa.<br>
Aggiungere tipi di file.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gTXVsdGltZWRpYTwvaDE+CiAgICAgIDxwPkVuam95IHRoZSBhdWRpbyBhbmQgdmlkZW8gY29udGVudCBiZWxvdyE8L3A+CiAgICA8L2hlYWRlcj4KCiAgICA8c2VjdGlvbj4KICAgICAgPGRpdj4KICAgICAgICA8IS0tIEluc2VydCBhdWRpbyBmaWxlIC0tPgogICAgICAgIDxfX18gX19fPgogICAgICAgICA8c291cmNlIHNyYz0iX19fIiB0eXBlPSJfX18iIC8+CiAgICAgICAgPC9fX18+CiAgICAgIDwvZGl2PgogICAgPC9zZWN0aW9uPgoKICAgIDxzZWN0aW9uPgogICAgICA8ZGl2PgogICAgICAgIDwhLS0gSW5zZXJ0IHZpZGVvIGZpbGUgLS0+CiAgICAgICAgPF9fXyBfX18+CiAgICAgICAgIDxzb3VyY2Ugc3JjPSJfX18iIHR5cGU9Il9fXyIgLz4KICAgICAgICA8L19fXz4KICAgICAgPC9kaXY+CiAgICA8L3NlY3Rpb24+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICJBcmlhbCIsIHNhbnMtc2VyaWY7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKfQoKaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiAjZmZmOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4IDA7Cn0KCnNlY3Rpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50Owp9CgpkaXYgewogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgYm94LXNoYWRvdzogMHB4IDVweCAxNXB4IHJnYmEoMCwgMCwgMCwgMC4yKTsKfQoKYXVkaW8gewogIGJvcmRlci1yYWRpdXM6IDEwcHg7Cn0KCnZpZGVvIHsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKfQ==

1. Utilizzare il tag `<audio>` per specificare un elemento audio;
2. Utilizzare il tag `<video>` per specificare un elemento video;
3. Utilizzare l'attributo `controls` per permettere agli utenti di gestire la riproduzione di audio o video;
4. Utilizzare l'attributo `src` per specificare la posizione del file. Assicurarsi che i link siano copiati correttamente dal compito;
5. Utilizzare `type="audio/mp3"` per specificare il tipo di file corretto per l'audio;
6. Utilizzare `type="video/mp4"` per specificare il tipo di file corretto per il video.


Suggerimento

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <header>
      <h1>Welcome to Multimedia</h1>
      <p>Enjoy the audio and video content below!</p>
    </header>

    <section>
      <div>
        
        <audio controls>
          <source
            src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/just-relax-audio.mp3"
            type="audio/mp3"
          />
        </audio>
      </div>
    </section>

    <section>
      <div>
        
        <video controls>
          <source
            src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/tiger-video.mp4"
            type="video/mp4"
          />
        </video>
      </div>
    </section>
  </body>
</html>
```

Soluzione

Impara le basi dell'HTML (HyperText Markup Language), la base dello sviluppo web. Questo corso adatto ai principianti copre tag, attributi, elementi e strutturazione delle pagine web. Acquisisci competenze pratiche nella creazione di intestazioni, paragrafi, elenchi, immagini, link, moduli e tabelle. Esplora le migliori pratiche, l'ottimizzazione e l'accessibilità web. Inizia il tuo percorso di sviluppo web con HTML.

Esplora il funzionamento interno del web. Scopri come i dati viaggiano attraverso le reti, scopri il ruolo dei protocolli e svela i misteri degli indirizzi IP e dei nomi di dominio. Ottieni una comprensione a livello generale di come i browser web e i server comunicano per fornire contenuti web.

Scopri il potere dei tag per strutturare il contenuto, dai titoli e paragrafi a elenchi e tabelle. Impara come migliorare gli elementi con gli attributi.

Il nucleo della struttura del documento HTML. Impara i componenti di un documento HTML, inclusa la dichiarazione doctype, head e body. Comprendi lo scopo di ciascun elemento e come contribuiscono alla struttura complessiva di una pagina web.

Rendi una pagina web più attraente con l'aiuto di media come immagini, audio e video. Lavora con dati tabulari strutturati sotto forma di tabelle.

Esplora la versatilità dei moduli HTML. Impara a progettare moduli intuitivi e facili da usare sfruttando concetti e tecniche chiave. Scopri come i moduli consentono l'interazione dell'utente e l'invio di dati sui siti web.

Sfida: Incorporare audio e video in HTML

Obiettivo

Attività