Kurssisisältö

HTML:n Perusteet

1. Verkkokehityksen Ymmärtäminen

Tervetuloa HTML:n ja Web-kehityksen Parin Mikä on Internet?Kuinka Internet Toimii?Ymmärrä, Miten Verkkosivustot Toimivat Frontend- ja Backend-Kehitys Selitettynä

2. HTML-Tunnisteet ja -Attribuutit

HTML-Tunnisteiden Ymmärtäminen Työskentely HTML-Attribuuttien Kanssa Ymmärrä Parilliset ja Yksittäiset Tunnisteet HTML:ssä Tekstin Merkintä ja Muotoilu HTML:ssä Haaste: Luo Ensimmäinen Verkkosivusi Kappale Haaste: Rakenna Henkilökohtainen Esittelysivu Haaste: Suunnittele Elokuvan Esittelysivu Linkkien ja Painikkeiden Käyttäminen HTML:ssä Haaste: Luo Linkkejä Suosittuihin Verkkosivustoihin HTML-Koodin Validointi Parhaiden Käytäntöjen Mukaisesti

3. HTML-Dokumentin Rakenne

Hyvin Jäsenneltyjen Verkkosivujen Salaisuudet HTML-Dokumentin Rakenteen Ymmärtäminen Asiakirjan Pään Rooli Asiakirjan Virtauksen ja Asettelun Hallinta Haaste: Rakenna HTML-Dokumentti Oikein Kehittäjätyökalujen Käyttäminen HTML:n Tarkasteluun ja Virheenkorjaukseen

4. Työskentely Median ja Taulukoiden Kanssa

Kuvien Lisääminen HTML:ään Haaste: Työskentele Kuvien Kanssa Työskentely Klikattavien Kuvien, Kuvatekstien ja Optimoinnin Kanssa Vektori- ja Rasterigrafiikan Ymmärtäminen Äänen ja Videon Upottaminen Rikasta Mediaa Sisältöä Varten Haaste: Upota Ääni ja Video HTML:ään Taulukoiden Luominen ja Jäsentäminen HTML:ssä Haaste: Suunnittele Toimiva HTML-taulukko

5. HTML-Lomakkeet ja Käyttäjän Syöte

Johdanto HTML-Lomakkeisiin Lomakkeiden Luomisen Perusteet HTML:ssä Käyttämällä Nimilappuja Paremman Lomakkeen Saavutettavuuden Takaamiseksi Lomakkeiden Parantaminen Syöteattribuuteilla Erilaisten Syöttötyyppien Tutkiminen HTML:ssä Haaste: Luo Lomake Syötteillä ja Nimikkeillä Työskentely Textarea-Elementin Kanssa Monirivistä Syöttöä Varten Using the Select Element for Avattavissa Valikoissa Datalist-Elementin Käyttäminen Ennalta Määritettyihin Syötevihjeisiin Lomake-Elementtien Ryhmittely Paremman Rakenteen Saavuttamiseksi

Äänen ja Videon Upottaminen Rikasta Mediaa Sisältöä Varten

Äänen upottaminen

Voit käyttää <audio> elementtiä lisätäksesi äänitiedostoja verkkosivulle. Tarkastellaan esimerkkiä:

index.html

Tässä esimerkissä:

<audio> elementti sisältää <source> elementin, joka määrittää äänitiedoston URL-osoitteen ja tiedostotyypin. Yleisesti tuetut muodot ovat MP3 ja OGG;
controls attribuutti näyttää vakiotoiston hallintalaitteet, kuten toisto, tauko ja äänenvoimakkuus;
Jos käyttäjän selain ei tue audioelementtiä, näytetään varaviesti.

HTML-audioelementin kanssa yleisesti käytettyjä lisäattribuutteja ovat:

autoplay: aloittaa äänitiedoston toiston heti, kun sivu latautuu;
loop: saa äänitiedoston toistumaan jatkuvasti;
muted: mykistää äänen oletuksena;
volume: määrittää äänitiedoston oletusäänenvoimakkuuden, joka vaihtelee välillä 0.0 (hiljainen) - 1.0 (täysi äänenvoimakkuus).

Tässä on esimerkki, joka havainnollistaa kaikkien näiden attribuuttien käyttöä:

index.html

Videon upottaminen

Voit upottaa videotiedostoja verkkosivulle käyttämällä <video>-elementtiä. Tarkastele seuraavaa esimerkkiä:

index.html

Tässä esimerkissä:

<video>-elementti sisältää <source>-elementin, joka määrittää videon URL-osoitteen ja tiedostotyypin. Yleisesti tuettuja formaatteja ovat WebM, MP4 ja OGG;
controls-attribuutti näyttää standardin toistonhallinnan;
Jos käyttäjän selain ei tue videoelementtiä, näytetään varaviesti.

HTML-videoelementin yleisesti käytettyjä attribuutteja ovat:

autoplay: aloittaa videon toiston heti, kun sivu latautuu;
loop: saa videon toistumaan jatkuvasti;
muted: mykistää äänen oletuksena;
volume: määrittää oletusäänenvoimakkuuden tasolle äänitiedostolle, vaihdellen 0.0 (hiljainen) ja 1.0 (täysi äänenvoimakkuus) välillä;
poster: määrittää kuvan URL-osoitteen, joka näytetään videon pikkukuvana ennen kuin video toistetaan;
width ja height: määrittää videon toistimen leveyden ja korkeuden pikseleinä.

Tässä on esimerkki, joka havainnollistaa kaikkien näiden attribuuttien käyttöä:

index.html

Huomautus

Lisäksi on olemassa monia JavaScript-kirjastoja ja API:ita, jotka tarjoavat lisätoimintoja videon toistamiseen ja käsittelyyn verkossa.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 4. Luku 5

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Kurssisisältö

HTML:n Perusteet

1. Verkkokehityksen Ymmärtäminen

Tervetuloa HTML:n ja Web-kehityksen Parin Mikä on Internet?Kuinka Internet Toimii?Ymmärrä, Miten Verkkosivustot Toimivat Frontend- ja Backend-Kehitys Selitettynä

2. HTML-Tunnisteet ja -Attribuutit

3. HTML-Dokumentin Rakenne

4. Työskentely Median ja Taulukoiden Kanssa

5. HTML-Lomakkeet ja Käyttäjän Syöte

Äänen ja Videon Upottaminen Rikasta Mediaa Sisältöä Varten

Äänen upottaminen

Voit käyttää <audio> elementtiä lisätäksesi äänitiedostoja verkkosivulle. Tarkastellaan esimerkkiä:

index.html

Tässä esimerkissä:

<audio> elementti sisältää <source> elementin, joka määrittää äänitiedoston URL-osoitteen ja tiedostotyypin. Yleisesti tuetut muodot ovat MP3 ja OGG;
controls attribuutti näyttää vakiotoiston hallintalaitteet, kuten toisto, tauko ja äänenvoimakkuus;
Jos käyttäjän selain ei tue audioelementtiä, näytetään varaviesti.

HTML-audioelementin kanssa yleisesti käytettyjä lisäattribuutteja ovat:

autoplay: aloittaa äänitiedoston toiston heti, kun sivu latautuu;
loop: saa äänitiedoston toistumaan jatkuvasti;
muted: mykistää äänen oletuksena;
volume: määrittää äänitiedoston oletusäänenvoimakkuuden, joka vaihtelee välillä 0.0 (hiljainen) - 1.0 (täysi äänenvoimakkuus).

Tässä on esimerkki, joka havainnollistaa kaikkien näiden attribuuttien käyttöä:

index.html

Videon upottaminen

Voit upottaa videotiedostoja verkkosivulle käyttämällä <video>-elementtiä. Tarkastele seuraavaa esimerkkiä:

index.html

Tässä esimerkissä:

<video>-elementti sisältää <source>-elementin, joka määrittää videon URL-osoitteen ja tiedostotyypin. Yleisesti tuettuja formaatteja ovat WebM, MP4 ja OGG;
controls-attribuutti näyttää standardin toistonhallinnan;
Jos käyttäjän selain ei tue videoelementtiä, näytetään varaviesti.

HTML-videoelementin yleisesti käytettyjä attribuutteja ovat:

autoplay: aloittaa videon toiston heti, kun sivu latautuu;
loop: saa videon toistumaan jatkuvasti;
muted: mykistää äänen oletuksena;
volume: määrittää oletusäänenvoimakkuuden tasolle äänitiedostolle, vaihdellen 0.0 (hiljainen) ja 1.0 (täysi äänenvoimakkuus) välillä;
poster: määrittää kuvan URL-osoitteen, joka näytetään videon pikkukuvana ennen kuin video toistetaan;
width ja height: määrittää videon toistimen leveyden ja korkeuden pikseleinä.

Tässä on esimerkki, joka havainnollistaa kaikkien näiden attribuuttien käyttöä:

index.html

Huomautus

Lisäksi on olemassa monia JavaScript-kirjastoja ja API:ita, jotka tarjoavat lisätoimintoja videon toistamiseen ja käsittelyyn verkossa.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 4. Luku 5