Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Haaste: Luo Linkkejä Suosittuihin Verkkosivustoihin | HTML-Tunnisteet ja -Attribuutit
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: Luo Linkkejä Suosittuihin Verkkosivustoihin

Tavoite

Luo kiehtova verkkosivu, joka sisältää järjestämättömän listan (<ul>) linkeillä (<a>) kolmeen suosittuun verkkosivustoon. Taika piilee siinä, että nämä linkit avautuvat uusiin välilehtiin, kun niitä klikataan, parantaen käyttäjäkokemusta ja antaen heidän tutkia kutakin kohdetta vaivattomasti.

Tehtävä

Käytä seuraavia elementtejä luodaksesi jännittävän verkkoseikkailukokemuksen:

  1. Luo järjestämätön lista, jossa on kolme kohdetta käyttämällä <ul>-elementtiä.
  2. Jokaisen listakohdan tulee sisältää linkki (<a>) suosittuun verkkosivustoon ja sen nimi.
  3. Listan tulee sisältää seuraavat kohteet:
    • "Apple" - Linkki Applen verkkosivustolle: https://www.apple.com/;
    • "Amazon" - Linkki Amazonin verkkosivustolle: https://www.amazon.com/;
    • "Netflix" - Linkki Netflixin verkkosivustolle: https://www.netflix.com/.
index.html

index.html

copy
  1. Käytä ul-tagia luodaksesi järjestämättömän listan.
  2. Käytä li-tagia luodaksesi listaelementtejä jokaiselle verkkosivuston linkille.
  3. Käytä a-tagia luodaksesi linkkejä ja määritä verkkosivuston URL-osoite href-attribuutilla.
  4. Jotta linkit avautuvat uusiin välilehtiin, lisää target="_blank"-attribuutti a-tagin sisälle.
index.html

index.html

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 9

Kysy tekoälyä

expand

Kysy tekoälyä

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: Luo Linkkejä Suosittuihin Verkkosivustoihin

Tavoite

Luo kiehtova verkkosivu, joka sisältää järjestämättömän listan (<ul>) linkeillä (<a>) kolmeen suosittuun verkkosivustoon. Taika piilee siinä, että nämä linkit avautuvat uusiin välilehtiin, kun niitä klikataan, parantaen käyttäjäkokemusta ja antaen heidän tutkia kutakin kohdetta vaivattomasti.

Tehtävä

Käytä seuraavia elementtejä luodaksesi jännittävän verkkoseikkailukokemuksen:

  1. Luo järjestämätön lista, jossa on kolme kohdetta käyttämällä <ul>-elementtiä.
  2. Jokaisen listakohdan tulee sisältää linkki (<a>) suosittuun verkkosivustoon ja sen nimi.
  3. Listan tulee sisältää seuraavat kohteet:
    • "Apple" - Linkki Applen verkkosivustolle: https://www.apple.com/;
    • "Amazon" - Linkki Amazonin verkkosivustolle: https://www.amazon.com/;
    • "Netflix" - Linkki Netflixin verkkosivustolle: https://www.netflix.com/.
index.html

index.html

copy
  1. Käytä ul-tagia luodaksesi järjestämättömän listan.
  2. Käytä li-tagia luodaksesi listaelementtejä jokaiselle verkkosivuston linkille.
  3. Käytä a-tagia luodaksesi linkkejä ja määritä verkkosivuston URL-osoite href-attribuutilla.
  4. Jotta linkit avautuvat uusiin välilehtiin, lisää target="_blank"-attribuutti a-tagin sisälle.
index.html

index.html

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 9
some-alt