Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Haaste: Suunnittele Toimiva HTML-taulukko | Työskentely Median ja Taulukoiden Kanssa
HTML:n Perusteet
course content

Kurssisisältö

HTML:n Perusteet

HTML:n Perusteet

1. Verkkokehityksen Ymmärtäminen
Tervetuloa HTML:n ja Web-kehityksen ParinMikä on Internet?Kuinka Internet Toimii?Ymmärrä, Miten Verkkosivustot ToimivatFrontend- ja Backend-Kehitys Selitettynä
2. HTML-Tunnisteet ja -Attribuutit
HTML-Tunnisteiden YmmärtäminenTyöskentely HTML-Attribuuttien KanssaYmmärrä Parilliset ja Yksittäiset Tunnisteet HTML:ssäTekstin Merkintä ja Muotoilu HTML:ssäHaaste: Luo Ensimmäinen Verkkosivusi KappaleHaaste: Rakenna Henkilökohtainen EsittelysivuHaaste: Suunnittele Elokuvan EsittelysivuLinkkien ja Painikkeiden Käyttäminen HTML:ssäHaaste: Luo Linkkejä Suosittuihin VerkkosivustoihinHTML-Koodin Validointi Parhaiden Käytäntöjen Mukaisesti
3. HTML-Dokumentin Rakenne
Hyvin Jäsenneltyjen Verkkosivujen SalaisuudetHTML-Dokumentin Rakenteen YmmärtäminenAsiakirjan Pään RooliAsiakirjan Virtauksen ja Asettelun HallintaHaaste: Rakenna HTML-Dokumentti OikeinKehittäjätyökalujen Käyttäminen HTML:n Tarkasteluun ja Virheenkorjaukseen
4. Työskentely Median ja Taulukoiden Kanssa
Kuvien Lisääminen HTML:äänHaaste: Työskentele Kuvien KanssaTyöskentely Klikattavien Kuvien, Kuvatekstien ja Optimoinnin KanssaVektori- ja Rasterigrafiikan YmmärtäminenÄänen ja Videon Upottaminen Rikasta Mediaa Sisältöä VartenHaaste: Upota Ääni ja Video HTML:äänTaulukoiden Luominen ja Jäsentäminen HTML:ssäHaaste: Suunnittele Toimiva HTML-taulukko
5. HTML-Lomakkeet ja Käyttäjän Syöte
Johdanto HTML-LomakkeisiinLomakkeiden Luomisen Perusteet HTML:ssäKäyttämällä Nimilappuja Paremman Lomakkeen Saavutettavuuden TakaamiseksiLomakkeiden Parantaminen SyöteattribuuteillaErilaisten Syöttötyyppien Tutkiminen HTML:ssäHaaste: Luo Lomake Syötteillä ja NimikkeilläTyöskentely Textarea-Elementin Kanssa Monirivistä Syöttöä VartenUsing the Select Element for Avattavissa ValikoissaDatalist-Elementin Käyttäminen Ennalta Määritettyihin SyötevihjeisiinLomake-Elementtien Ryhmittely Paremman Rakenteen Saavuttamiseksi

book
Haaste: Suunnittele Toimiva HTML-taulukko

Tavoite

Esittele työntekijätiedot jäsennellyssä taulukkomuodossa käyttämällä sopivia HTML-tageja rivien ja sarakkeiden luomiseen.

Tehtävä

Luo taulukko, jossa on kolme saraketta: Nimi, Tehtävä ja Palkka. Keskity käyttämään sopivia HTML-tageja täyttääksesi taulukon oikeilla riveillä ja sarakkeilla. Tässä on tiedot, jotka tulee sisällyttää:

  1. Nimi: Emma Johnson | Tehtävä: Myyntiedustaja | Palkka: $15.50 per hour.

  2. Nimi: Liam Thompson | Tehtävä: Asiakaspalveluedustaja | Palkka: $14.75 per hour.

  3. Nimi: Olivia Rodriguez | Tehtävä: Markkinointikoordinaattori | Palkka: $18.25 per hour.

  4. Nimi: Noah Smith | Tehtävä: IT-tukihenkilö | Palkka: $20.00 per hour.

  5. Nimi: Ava Davis | Tehtävä: Hallinnollinen avustaja | Palkka: $16.80 per hour.

html

index.html

css

index.css

copy

  1. Käytä table-tagia määrittääksesi taulukon pääsäiliöelementin.

  2. Käytä thead-tagia ryhmitelläksesi taulukon otsikkosisällön, kuten sarakeotsikot.

  3. Käytä tr-tagia määrittääksesi uuden rivin taulukossa.

  4. Käytä th-tagia määrittääksesi kunkin sarakkeen otsikkotekstin.

  5. Käytä tbody-tagia ryhmitelläksesi taulukon pääsisällön, joka sisältää rivit ja datakentät.

  6. Käytä td-tagia määrittääksesi varsinaisen datan tai sisällön kussakin taulukon solussa.

html

index.html

css

index.css

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 8

Kysy tekoälyä

expand
ChatGPT

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

course content

Kurssisisältö

HTML:n Perusteet

HTML:n Perusteet

1. Verkkokehityksen Ymmärtäminen
Tervetuloa HTML:n ja Web-kehityksen ParinMikä on Internet?Kuinka Internet Toimii?Ymmärrä, Miten Verkkosivustot ToimivatFrontend- ja Backend-Kehitys Selitettynä
2. HTML-Tunnisteet ja -Attribuutit
HTML-Tunnisteiden YmmärtäminenTyöskentely HTML-Attribuuttien KanssaYmmärrä Parilliset ja Yksittäiset Tunnisteet HTML:ssäTekstin Merkintä ja Muotoilu HTML:ssäHaaste: Luo Ensimmäinen Verkkosivusi KappaleHaaste: Rakenna Henkilökohtainen EsittelysivuHaaste: Suunnittele Elokuvan EsittelysivuLinkkien ja Painikkeiden Käyttäminen HTML:ssäHaaste: Luo Linkkejä Suosittuihin VerkkosivustoihinHTML-Koodin Validointi Parhaiden Käytäntöjen Mukaisesti
3. HTML-Dokumentin Rakenne
Hyvin Jäsenneltyjen Verkkosivujen SalaisuudetHTML-Dokumentin Rakenteen YmmärtäminenAsiakirjan Pään RooliAsiakirjan Virtauksen ja Asettelun HallintaHaaste: Rakenna HTML-Dokumentti OikeinKehittäjätyökalujen Käyttäminen HTML:n Tarkasteluun ja Virheenkorjaukseen
4. Työskentely Median ja Taulukoiden Kanssa
Kuvien Lisääminen HTML:äänHaaste: Työskentele Kuvien KanssaTyöskentely Klikattavien Kuvien, Kuvatekstien ja Optimoinnin KanssaVektori- ja Rasterigrafiikan YmmärtäminenÄänen ja Videon Upottaminen Rikasta Mediaa Sisältöä VartenHaaste: Upota Ääni ja Video HTML:äänTaulukoiden Luominen ja Jäsentäminen HTML:ssäHaaste: Suunnittele Toimiva HTML-taulukko
5. HTML-Lomakkeet ja Käyttäjän Syöte
Johdanto HTML-LomakkeisiinLomakkeiden Luomisen Perusteet HTML:ssäKäyttämällä Nimilappuja Paremman Lomakkeen Saavutettavuuden TakaamiseksiLomakkeiden Parantaminen SyöteattribuuteillaErilaisten Syöttötyyppien Tutkiminen HTML:ssäHaaste: Luo Lomake Syötteillä ja NimikkeilläTyöskentely Textarea-Elementin Kanssa Monirivistä Syöttöä VartenUsing the Select Element for Avattavissa ValikoissaDatalist-Elementin Käyttäminen Ennalta Määritettyihin SyötevihjeisiinLomake-Elementtien Ryhmittely Paremman Rakenteen Saavuttamiseksi

book
Haaste: Suunnittele Toimiva HTML-taulukko

Tavoite

Esittele työntekijätiedot jäsennellyssä taulukkomuodossa käyttämällä sopivia HTML-tageja rivien ja sarakkeiden luomiseen.

Tehtävä

Luo taulukko, jossa on kolme saraketta: Nimi, Tehtävä ja Palkka. Keskity käyttämään sopivia HTML-tageja täyttääksesi taulukon oikeilla riveillä ja sarakkeilla. Tässä on tiedot, jotka tulee sisällyttää:

  1. Nimi: Emma Johnson | Tehtävä: Myyntiedustaja | Palkka: $15.50 per hour.

  2. Nimi: Liam Thompson | Tehtävä: Asiakaspalveluedustaja | Palkka: $14.75 per hour.

  3. Nimi: Olivia Rodriguez | Tehtävä: Markkinointikoordinaattori | Palkka: $18.25 per hour.

  4. Nimi: Noah Smith | Tehtävä: IT-tukihenkilö | Palkka: $20.00 per hour.

  5. Nimi: Ava Davis | Tehtävä: Hallinnollinen avustaja | Palkka: $16.80 per hour.

html

index.html

css

index.css

copy

  1. Käytä table-tagia määrittääksesi taulukon pääsäiliöelementin.

  2. Käytä thead-tagia ryhmitelläksesi taulukon otsikkosisällön, kuten sarakeotsikot.

  3. Käytä tr-tagia määrittääksesi uuden rivin taulukossa.

  4. Käytä th-tagia määrittääksesi kunkin sarakkeen otsikkotekstin.

  5. Käytä tbody-tagia ryhmitelläksesi taulukon pääsisällön, joka sisältää rivit ja datakentät.

  6. Käytä td-tagia määrittääksesi varsinaisen datan tai sisällön kussakin taulukon solussa.

html

index.html

css

index.css

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 8
Pahoittelemme, että jotain meni pieleen. Mitä tapahtui?
some-alt