HTML:n Perusteet

Kurssisisältö

HTML:n Perusteet

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: Rakenna Henkilökohtainen Esittelysivu

Tavoite

Esittele itsesi maailmalle luomalla verkkosivu, jossa on useita otsikkoelementtejä (<h1>, <h2>) ja kappale-elementtejä (<p>).

Tehtävä

Käytä seuraavia elementtejä luodaksesi kiehtovan esittelyn:

Käytä <h1>-elementtiä pääotsikolle. Tekstin tulisi olla Welcome to My Website.
Käytä <h2>-elementtiä alaotsikolle. Tekstin tulisi olla About Me.
Käytä <p>-elementtiä kirjoittaaksesi lyhyen kappaleen, jossa esittelet itsesi, mukaan lukien:
- Nimesi;
- Harrastuksesi.

index.html

Käytä h1-tagia luodaksesi pääotsikon.
Käytä h2-tagia luodaksesi alaotsikon.
Käytä p-tagia luodaksesi kappaleen.

index.html

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 6

Kysy tekoälyä

Kysy tekoälyä

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

Kurssisisältö

HTML:n Perusteet

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: Rakenna Henkilökohtainen Esittelysivu

Tavoite

Esittele itsesi maailmalle luomalla verkkosivu, jossa on useita otsikkoelementtejä (<h1>, <h2>) ja kappale-elementtejä (<p>).

Tehtävä

Käytä seuraavia elementtejä luodaksesi kiehtovan esittelyn:

Käytä <h1>-elementtiä pääotsikolle. Tekstin tulisi olla Welcome to My Website.
Käytä <h2>-elementtiä alaotsikolle. Tekstin tulisi olla About Me.
Käytä <p>-elementtiä kirjoittaaksesi lyhyen kappaleen, jossa esittelet itsesi, mukaan lukien:
- Nimesi;
- Harrastuksesi.

index.html

Käytä h1-tagia luodaksesi pääotsikon.
Käytä h2-tagia luodaksesi alaotsikon.
Käytä p-tagia luodaksesi kappaleen.

index.html

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 6

some-alt