## Mål
Skab en engagerende multimedieoplevelse for webstedets besøgende ved at inkorporere både lyd- og videoindhold.

## Opgave
Tag webstedet til det næste niveau ved at fordybe brugerne i en fængslende multimedieoplevelse. Din opgave er at:

**For lyden**: indlejre en lydfil, der skaber en beroligende atmosfære for brugerne at slappe af. Brug følgende link til lyden:

<!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>

**For videoen**: integrer en video, der lader brugerne nyde skønheden af naturens skabninger. Brug følgende link til videoen:

<!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>

Tilføj afspilningskontroller som afspil og pause.<br>
Tilføj filtyper.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICJBcmlhbCIsIHNhbnMtc2VyaWY7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKfQoKaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiAjZmZmOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4IDA7Cn0KCnNlY3Rpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50Owp9CgpkaXYgewogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgYm94LXNoYWRvdzogMHB4IDVweCAxNXB4IHJnYmEoMCwgMCwgMCwgMC4yKTsKfQoKYXVkaW8gewogIGJvcmRlci1yYWRpdXM6IDEwcHg7Cn0KCnZpZGVvIHsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKfQ==

1. Brug `audio`-tagget til at angive et lydelement.
2. Brug `video`-tagget til at angive et videoelement.
3. Brug `controls`-attributten for at give brugerne mulighed for at styre lyd- eller videoplayback.
4. Brug `src`-attributten til at angive filens placering. Sørg for nøjagtig kopiering af links fra opgaven.
5. Brug `type="audio/mp3"` for at angive den korrekte filtype for lyden.
6. Brug `type="video/mp4"` for at angive den korrekte filtype for videoen.

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

Lær det grundlæggende i HTML (HyperText Markup Language), fundamentet for webudvikling. Dette begynder-venlige kursus dækker tags, attributter, elementer og strukturering af websider. Få praktiske færdigheder i at skabe overskrifter, afsnit, lister, billeder, links, formularer og tabeller. Udforsk bedste praksis, optimering og webtilgængelighed. Start din webudviklingsrejse med HTML.

Udforsk internettets indre funktioner. Lær hvordan data rejser over netværk, opdag protokollernes rolle, og afslør mysterierne bag IP-adresser og domænenavne. Få en overordnet forståelse af, hvordan webbrowsere og servere kommunikerer for at levere webindhold.

Opdag kraften i tags til at strukturere indhold, fra overskrifter og afsnit til lister og tabeller. Lær hvordan du forbedrer elementerne med attributter.

Kernen i HTML-dokumentstrukturen. Lær komponenterne i et HTML-dokument, inklusive doctype-deklarationen, head og body. Forstå formålet med hvert element, og hvordan de bidrager til den overordnede struktur af en webside.

Gør en webside mere attraktiv ved hjælp af medier som billeder, lyd og video. Arbejd med strukturerede tabeldata i form af tabeller.

Udforsk alsidigheden af HTML-formularer. Lær at designe intuitive og brugervenlige formularer ved at udnytte nøglekoncepter og teknikker. Opdag, hvordan formularer muliggør brugerinteraktion og dataindsendelse på hjemmesider.

Udfordring: Indlejr Lyd og Video i HTML

Mål

Opgave

Udfordring: Indlejr Lyd og Video i HTML

Mål

Opgave