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

Erilaisten Syöttötyyppien Tutkiminen HTML:ssä

HTML tarjoaa erilaisia <input> elementtejä, joiden avulla voit kerätä käyttäjiltä erilaisia tietotyyppejä. Tutustutaanpa joihinkin yleisesti käytettyihin syöttötyyppeihin:

sähköposti ja salasana

type="email": käytetään sähköpostikentissä, jotka vaativat kelvollisen sähköpostiosoitteen. Selain validoi automaattisesti sähköpostiosoitteen ja kehottaa käyttäjää korjaamaan virheelliset syötteet;
type="password": käytetään salasanakentissä, joissa syötetty teksti on peitetty turvallisuuden vuoksi. Voit myös määrittää minLength ja maxLength attribuutit asettaaksesi salasanan pituusvaatimukset.

index.html

number

type="number": käytetään numeeriseen syötteeseen. Voit määrittää tietyn alueen min ja max attribuuteilla ja asettaa tietyn askelarvon step attribuutilla.

index.html

telephone

type="tel": tarkoitettu puhelinnumeroiden syöttämiseen, mutta se ei suorita mitään syötteen validointia. Kehittäjän vastuulla on validoida syöte ja varmistaa, että se on kelvollinen puhelinnumero.

index.html

valintaruutu

type="checkbox": sallii käyttäjän valita yhden tai useamman vaihtoehdon ennalta määritellyistä valinnoista. checked-attribuutti tekee valintaruudusta oletuksena valitun.

index.html

radio

type="radio": luo joukon vaihtoehtoja, joista vain yksi voidaan valita. Jokainen vaihtoehto esitetään valintanappina, ja yhden valitseminen poistaa automaattisesti muiden valinnan. Jokaisella valintanapilla tulisi olla yksilöllinen value-attribuutti sen tunnistamiseksi.

index.html

range

type="range": luo liukusäätimen, jonka avulla käyttäjät voivat valita arvon tietyltä alueelta. Voit käyttää min, max, step ja value -attribuutteja määrittämään sen toimintaa.

index.html

index.js

Huomio

JavaScript ei ole tämän kurssin keskipiste, joten sen logiikka ohitetaan.

päivämäärä ja aika

type="date": sallii käyttäjien valita päivämäärän kalenterin ponnahdusikkunasta;
type="time": sallii käyttäjien syöttää ajan 24-tunnin muodossa;
type="datetime-local": yhdistää ajan ja päivämäärän syötteet.

Esimerkki:

index.html

Huomautus

Jotta tyylit olisivat yhdenmukaisia eri laitteilla, käytetään usein valmiita ratkaisuja ponnahdusikkunoiden kalentereille ja aika-syötteille.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. 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

Erilaisten Syöttötyyppien Tutkiminen HTML:ssä

HTML tarjoaa erilaisia <input> elementtejä, joiden avulla voit kerätä käyttäjiltä erilaisia tietotyyppejä. Tutustutaanpa joihinkin yleisesti käytettyihin syöttötyyppeihin:

sähköposti ja salasana

type="email": käytetään sähköpostikentissä, jotka vaativat kelvollisen sähköpostiosoitteen. Selain validoi automaattisesti sähköpostiosoitteen ja kehottaa käyttäjää korjaamaan virheelliset syötteet;
type="password": käytetään salasanakentissä, joissa syötetty teksti on peitetty turvallisuuden vuoksi. Voit myös määrittää minLength ja maxLength attribuutit asettaaksesi salasanan pituusvaatimukset.

index.html

number

type="number": käytetään numeeriseen syötteeseen. Voit määrittää tietyn alueen min ja max attribuuteilla ja asettaa tietyn askelarvon step attribuutilla.

index.html

telephone

index.html

valintaruutu

type="checkbox": sallii käyttäjän valita yhden tai useamman vaihtoehdon ennalta määritellyistä valinnoista. checked-attribuutti tekee valintaruudusta oletuksena valitun.

index.html

radio

index.html

range

type="range": luo liukusäätimen, jonka avulla käyttäjät voivat valita arvon tietyltä alueelta. Voit käyttää min, max, step ja value -attribuutteja määrittämään sen toimintaa.

index.html

index.js

Huomio

JavaScript ei ole tämän kurssin keskipiste, joten sen logiikka ohitetaan.

päivämäärä ja aika

type="date": sallii käyttäjien valita päivämäärän kalenterin ponnahdusikkunasta;
type="time": sallii käyttäjien syöttää ajan 24-tunnin muodossa;
type="datetime-local": yhdistää ajan ja päivämäärän syötteet.

Esimerkki:

index.html

Huomautus

Jotta tyylit olisivat yhdenmukaisia eri laitteilla, käytetään usein valmiita ratkaisuja ponnahdusikkunoiden kalentereille ja aika-syötteille.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 5