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

Haaste: Luo Lomake Syötteillä ja Nimikkeillä

Tavoite

Paranna verkkosivuston käyttäjäkokemusta luomalla interaktiivinen lomake, joka vaatii syötteitä nimelle, sähköpostille ja salasanalle, täydentäen ne vastaavilla nimikkeillä.

Tehtävä

Sisällytä käyttäjäystävällinen lomake verkkosivustollesi, parantaen käyttäjän sitoutumista ja vuorovaikutusta. Tehtäväsi on:

Nimen syöte: luo tekstisyöte, joka kerää käyttäjien nimet. Käytä oikeita attribuutteja saumattoman kokemuksen varmistamiseksi.
1. Määritä oikea type tekstisyötteelle;
2. Aseta placeholder arvoon John;
3. Varmista, että syöte on oletuksena valittuna.
Sähköpostin syöte: luo sähköpostisyöte, joka kerää käyttäjien sähköpostiosoitteet. Varmista tietojen tarkkuus käyttämällä oikeita attribuutteja.
1. Määritä oikea type sähköpostisyötteelle;
2. Aseta placeholder arvoon example@gmail.com;
3. Merkitse kenttä pakolliseksi.
Salasanan syöte: luo turvallinen salasanasyöte, joka pitää käyttäjätiedot turvassa. Käytä oikeita attribuutteja tietoturvan parantamiseksi.
1. Määritä oikea type salasanasyötteelle;
2. Tee kentästä pakollinen.

index.html

index.css

autofocus: kohdistaa automaattisesti syöttökenttään, kun sivu latautuu.
required: merkitsee syöttökentän pakolliseksi, estäen lomakkeen lähettämisen, jos se jätetään tyhjäksi.
placeholder: tarjoaa vihjeen tai esimerkkitekstin syöttökenttään.
for ja id: yhdistää etiketin syöttökenttään parantaen saavutettavuutta.
type: määrittää syöttökentässä odotetun datan tyypin (esim. text, email, password).

index.html

index.css

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 6

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

Haaste: Luo Lomake Syötteillä ja Nimikkeillä

Tavoite

Paranna verkkosivuston käyttäjäkokemusta luomalla interaktiivinen lomake, joka vaatii syötteitä nimelle, sähköpostille ja salasanalle, täydentäen ne vastaavilla nimikkeillä.

Tehtävä

Sisällytä käyttäjäystävällinen lomake verkkosivustollesi, parantaen käyttäjän sitoutumista ja vuorovaikutusta. Tehtäväsi on:

Nimen syöte: luo tekstisyöte, joka kerää käyttäjien nimet. Käytä oikeita attribuutteja saumattoman kokemuksen varmistamiseksi.
1. Määritä oikea type tekstisyötteelle;
2. Aseta placeholder arvoon John;
3. Varmista, että syöte on oletuksena valittuna.
Sähköpostin syöte: luo sähköpostisyöte, joka kerää käyttäjien sähköpostiosoitteet. Varmista tietojen tarkkuus käyttämällä oikeita attribuutteja.
1. Määritä oikea type sähköpostisyötteelle;
2. Aseta placeholder arvoon example@gmail.com;
3. Merkitse kenttä pakolliseksi.
Salasanan syöte: luo turvallinen salasanasyöte, joka pitää käyttäjätiedot turvassa. Käytä oikeita attribuutteja tietoturvan parantamiseksi.
1. Määritä oikea type salasanasyötteelle;
2. Tee kentästä pakollinen.

index.html

index.css

autofocus: kohdistaa automaattisesti syöttökenttään, kun sivu latautuu.
required: merkitsee syöttökentän pakolliseksi, estäen lomakkeen lähettämisen, jos se jätetään tyhjäksi.
placeholder: tarjoaa vihjeen tai esimerkkitekstin syöttökenttään.
for ja id: yhdistää etiketin syöttökenttään parantaen saavutettavuutta.
type: määrittää syöttökentässä odotetun datan tyypin (esim. text, email, password).

index.html

index.css

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 6