## Tavoite
Luo kiinnostava multimediasisältö verkkosivuston kävijöille sisällyttämällä sekä ääni- että videosisältöä.

## Tehtävä
Vie verkkosivusto uudelle tasolle upottamalla käyttäjät mukaansatempaavaan multimediasisältöön. Tehtävänäsi on:

**Äänisisällön osalta**: upota äänitiedosto, joka luo rauhoittavan tunnelman käyttäjille rentoutumista varten. Käytä seuraavaa linkkiä äänitiedostoon:

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

**Videosisällön osalta**: lisää video, jonka avulla käyttäjät voivat nauttia luonnon eläinten kauneudesta. Käytä seuraavaa linkkiä videoon:

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

Lisää toiston hallintapainikkeet, kuten toista ja tauko.<br>
Lisää tiedostotyypit.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICJBcmlhbCIsIHNhbnMtc2VyaWY7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKfQoKaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiAjZmZmOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBwYWRkaW5nOiAyMHB4IDA7Cn0KCnNlY3Rpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50Owp9CgpkaXYgewogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgYm94LXNoYWRvdzogMHB4IDVweCAxNXB4IHJnYmEoMCwgMCwgMCwgMC4yKTsKfQoKYXVkaW8gewogIGJvcmRlci1yYWRpdXM6IDEwcHg7Cn0KCnZpZGVvIHsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKfQ==

1. Käytä `audio`-tägiä määrittääksesi äänielementin.
2. Käytä `video`-tägiä määrittääksesi videoelementin.
3. Käytä `controls`-attribuuttia, jotta käyttäjät voivat hallita äänen tai videon toistoa.
4. Käytä `src`-attribuuttia tiedoston sijainnin määrittämiseen. Varmista linkkien tarkka kopiointi tehtävästä.
5. Käytä `type="audio/mp3"` määrittääksesi oikean tiedostotyypin äänelle.
6. Käytä `type="video/mp4"` määrittääksesi oikean tiedostotyypin videolle.

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

Opi HTML:n (HyperText Markup Language) perusteet, joka on verkkokehityksen perusta. Tämä aloittelijaystävällinen kurssi kattaa tunnisteet, attribuutit, elementit ja verkkosivujen rakenteen. Hanki käytännön taitoja otsikoiden, kappaleiden, listojen, kuvien, linkkien, lomakkeiden ja taulukoiden luomisessa. Tutustu parhaisiin käytäntöihin, optimointiin ja verkkosivustojen saavutettavuuteen. Aloita verkkokehityksen matkasi HTML:n avulla.

Tutki verkon sisäistä toimintaa. Opi, miten data kulkee verkkojen läpi, tutustu protokollien rooliin ja selvitä IP-osoitteiden ja verkkotunnusten mysteerit. Saa korkeatasoinen ymmärrys siitä, miten verkkoselaimet ja palvelimet kommunikoivat toimittaakseen verkkosisältöä.

Tutustu tunnisteiden voimaan sisällön jäsentämisessä, otsikoista ja kappaleista listoihin ja taulukoihin. Opi, kuinka voit parantaa elementtejä attribuuteilla.

HTML-dokumentin rakenteen ydin. Opi HTML-dokumentin osat, mukaan lukien doctype-ilmoitus, head ja body. Ymmärrä kunkin elementin tarkoitus ja miten ne vaikuttavat verkkosivun kokonaisrakenteeseen.

Tee verkkosivusta houkuttelevampi median, kuten kuvien, äänen ja videon avulla. Työskentele jäsennellyn taulukkomuotoisen datan kanssa taulukoiden muodossa.

Tutustu HTML-lomakkeiden monipuolisuuteen. Opi suunnittelemaan intuitiivisia ja käyttäjäystävällisiä lomakkeita hyödyntämällä keskeisiä käsitteitä ja tekniikoita. Selvitä, kuinka lomakkeet mahdollistavat käyttäjän vuorovaikutuksen ja tietojen lähettämisen verkkosivustoilla.

Haaste: Upota Ääni ja Video HTML:ään

Tavoite

Tehtävä

Haaste: Upota Ääni ja Video HTML:ään

Tavoite

Tehtävä