## Mål
Skapa en engagerande multimediaupplevelse för webbplatsbesökare genom att integrera både ljud- och videoinnehåll.

## Uppgift
Ta webbplatsen till nästa nivå genom att fördjupa användarna i en fängslande multimediaupplevelse. Din uppgift är att:

**För ljudet**: bädda in en ljudfil som ger en lugnande atmosfär för användarna att slappna av. Använd följande länk för ljudet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      
      <textarea class="text-field" id="Your id" style="height: 70px; max-width: 100%">
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/just-relax-audio.mp3</textarea>
      
      <button class="copy-button" onclick="handleClick('Your id', 'widget1-notify')">
        <svg width="20" height="20" x="0" y="0" viewBox="0 0 32 32" style="enable-background: new 0 0 512 512" xml:space="preserve" class="">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6" opacity="1" data-original="#000000" class=""></path>
          </g>
        </svg>
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

**För videon**: integrera en video som låter användare njuta av naturens skönhet. Använd följande länk för videon:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      
      <textarea class="text-field" id="Your id" style="height: 70px; max-width: 100%">
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/tiger-video.mp4</textarea>
      
      <button class="copy-button" onclick="handleClick('Your id', 'widget1-notify')">
        <svg width="20" height="20" x="0" y="0" viewBox="0 0 32 32" style="enable-background: new 0 0 512 512" xml:space="preserve" class="">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6" opacity="1" data-original="#000000" class=""></path>
          </g>
        </svg>
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Lägg till uppspelningskontroller som spela och pausa.<br>
Lägg till filtyper.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICJBcmlhbCIsIHNhbnMtc2VyaWY7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKfQoKaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiAjZmZmOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4IDA7Cn0KCnNlY3Rpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50Owp9CgpkaXYgewogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgYm94LXNoYWRvdzogMHB4IDVweCAxNXB4IHJnYmEoMCwgMCwgMCwgMC4yKTsKfQoKYXVkaW8gewogIGJvcmRlci1yYWRpdXM6IDEwcHg7Cn0KCnZpZGVvIHsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKfQ==

1. Använd `audio`-taggen för att specificera ett ljudelement.
2. Använd `video`-taggen för att specificera ett videoelement.
3. Använd attributet `controls` för att låta användare hantera ljud- eller videouppspelning.
4. Använd attributet `src` för att specificera filens plats. Säkerställ korrekt kopiering av länkar från uppgiften.
5. Använd `type="audio/mp3"` för att specificera rätt filtyp för ljudet.
6. Använd `type="video/mp4"` för att specificera rätt filtyp för videon.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gTXVsdGltZWRpYTwvaDE+CiAgICAgIDxwPkVuam95IHRoZSBhdWRpbyBhbmQgdmlkZW8gY29udGVudCBiZWxvdyE8L3A+CiAgICA8L2hlYWRlcj4KCiAgICA8c2VjdGlvbj4KICAgICAgPGRpdj4KICAgICAgICA8IS0tIEF1ZGlvIGZpbGUgLS0+CiAgICAgICAgPGF1ZGlvIGNvbnRyb2xzPgogICAgICAgICAgPHNvdXJjZQogICAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS91bHRpbWF0ZS1odG1sL21lZGlhK2FuZCt0YWJsZXMvanVzdC1yZWxheC1hdWRpby5tcDMiCiAgICAgICAgICAgIHR5cGU9ImF1ZGlvL21wMyIKICAgICAgICAgIC8+CiAgICAgICAgPC9hdWRpbz4KICAgICAgPC9kaXY+CiAgICA8L3NlY3Rpb24+CgogICAgPHNlY3Rpb24+CiAgICAgIDxkaXY+CiAgICAgICAgPCEtLSBWaWRlbyBmaWxlIC0tPgogICAgICAgIDx2aWRlbyBjb250cm9scz4KICAgICAgICAgIDxzb3VyY2UKICAgICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdWx0aW1hdGUtaHRtbC9tZWRpYSthbmQrdGFibGVzL3RpZ2VyLXZpZGVvLm1wNCIKICAgICAgICAgICAgdHlwZT0idmlkZW8vbXA0IgogICAgICAgICAgLz4KICAgICAgICA8L3ZpZGVvPgogICAgICA8L2Rpdj4KICAgIDwvc2VjdGlvbj4KICA8L2JvZHk+CjwvaHRtbD4=

Lär dig grunderna i HTML (HyperText Markup Language), grunden för webbutveckling. Denna nybörjarvänliga kurs täcker taggar, attribut, element och strukturering av webbsidor. Få praktiska färdigheter i att skapa rubriker, stycken, listor, bilder, länkar, formulär och tabeller. Utforska bästa praxis, optimering och webbtillgänglighet. Börja din webbutvecklingsresa med HTML.

Utforska webben inre funktioner. Lär dig hur data färdas över nätverk, upptäck protokollens roll och lös mysterierna med IP-adresser och domännamn. Få en övergripande förståelse för hur webbläsare och servrar kommunicerar för att leverera webb-innehåll.

Upptäck kraften i taggar för att strukturera innehåll, från rubriker och stycken till listor och tabeller. Lär dig hur du förbättrar elementen med attribut.

Kärnan i HTML-dokumentstrukturen. Lär dig komponenterna i ett HTML-dokument, inklusive doctype-deklarationen, head och body. Förstå syftet med varje element och hur de bidrar till den övergripande strukturen på en webbsida.

Gör en webbsida mer tilltalande med hjälp av media som bilder, ljud och video. Arbeta med strukturerad tabulär data i form av tabeller.

Utforska mångsidigheten hos HTML-formulär. Lär dig att designa intuitiva och användarvänliga formulär genom att utnyttja viktiga koncept och tekniker. Upptäck hur formulär möjliggör användarinteraktion och dataöverföring på webbplatser.

Utmaning: Bädda in Ljud och Video i HTML

Mål

Uppgift

Awesome!

Utmaning: Bädda in Ljud och Video i HTML

Mål

Uppgift