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: Rakenna HTML-Dokumentti Oikein

Tavoite

Rakenna oikea verkkosivu luomalla perus HTML-dokumenttirakenne. Tämä rakenne on jokaisen HTML-sivun selkäranka ja koostuu olennaisista elementeistä, joita selaimet tarvitsevat sisällön oikeaan näyttämiseen.

Huomautus

Älä anna verkkosivun suunnittelun näennäisen yksinkertaisuuden hämätä. Vaikka se saattaa vaikuttaa suoraviivaiselta, on ensiarvoisen tärkeää ylläpitää oikea dokumenttirakenne. Tämä varmistaa, että verkkosivusto säilyttää luettavuuden ja toiminnallisuuden kaikissa selaimissa.

Tehtävä

Luo perus HTML-dokumentin rakenne. Jos olet jo varma taidoistasi, voit jatkaa ilman vaiheittaista opasta. Jos kuitenkin haluat hieman enemmän ohjausta, vaiheittainen opastus on saatavilla auttamaan sinua eteenpäin.

Vaiheittainen opas

Vaihe 1: Aloita HTML-dokumentti

Aloita kirjoittamalla HTML-doctype-ilmoitus, joka kertoo selaimelle, että dokumentti on kirjoitettu HTML:llä. Ilmoituksen tulisi olla HTML-dokumenttisi ensimmäinen rivi:

index.html

Vaihe 2: Lisää html-avaus- ja sulkemistagit

Doctype-määrittelyn jälkeen lisää avaus- ja sulkemis-HTML-tagit. Koko HTML-dokumentin rakenne sisältyy näiden tagien sisään. Lisäksi lisää lang-attribuutti määrittämään dokumentin kieli:

index.html

Vaihe 3: Luo head-osio

Lisää avaus- ja sulkemis <head>-tagit HTML-tagien sisälle. Head-osio sisältää metatietoja HTML-dokumentista, kuten otsikon ja linkit ulkoisiin tyylitiedostoihin:

index.html

Vaihe 4: Lisää Otsikko

<head>-tagien sisälle lisää avaus- ja sulkemis <title>-tagit. Teksti, jonka syötät näiden tagien väliin, näytetään verkkosivun otsikkona selaimen otsikkopalkissa tai välilehdessä:

index.html

Vaihe 5: Luo body-osio

<head>-osion jälkeen lisää avaus- ja sulkemis-<body>-tagit. Body-osio sisältää verkkosivun näkyvän sisällön:

index.html

Vaihe 6: Lisää sisältöä bodyyn

Voit lisätä elementtejä <body>-tagien sisälle, kuten otsikoita, kappaleita, kuvia, linkkejä jne. Tässä on esimerkki otsikon ja kappaleen lisäämisestä:

index.html

Kokeile itse

index.html

Oliko kaikki selvää?

Kiitos palautteestasi!

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

Haaste: Rakenna HTML-Dokumentti Oikein

Tavoite

Huomautus

Älä anna verkkosivun suunnittelun näennäisen yksinkertaisuuden hämätä. Vaikka se saattaa vaikuttaa suoraviivaiselta, on ensiarvoisen tärkeää ylläpitää oikea dokumenttirakenne. Tämä varmistaa, että verkkosivusto säilyttää luettavuuden ja toiminnallisuuden kaikissa selaimissa.

Tehtävä

Vaiheittainen opas

Vaihe 1: Aloita HTML-dokumentti

Aloita kirjoittamalla HTML-doctype-ilmoitus, joka kertoo selaimelle, että dokumentti on kirjoitettu HTML:llä. Ilmoituksen tulisi olla HTML-dokumenttisi ensimmäinen rivi:

index.html

Vaihe 2: Lisää html-avaus- ja sulkemistagit

index.html

Vaihe 3: Luo head-osio

Lisää avaus- ja sulkemis <head>-tagit HTML-tagien sisälle. Head-osio sisältää metatietoja HTML-dokumentista, kuten otsikon ja linkit ulkoisiin tyylitiedostoihin:

index.html

Vaihe 4: Lisää Otsikko

<head>-tagien sisälle lisää avaus- ja sulkemis <title>-tagit. Teksti, jonka syötät näiden tagien väliin, näytetään verkkosivun otsikkona selaimen otsikkopalkissa tai välilehdessä:

index.html

Vaihe 5: Luo body-osio

<head>-osion jälkeen lisää avaus- ja sulkemis-<body>-tagit. Body-osio sisältää verkkosivun näkyvän sisällön:

index.html

Vaihe 6: Lisää sisältöä bodyyn

Voit lisätä elementtejä <body>-tagien sisälle, kuten otsikoita, kappaleita, kuvia, linkkejä jne. Tässä on esimerkki otsikon ja kappaleen lisäämisestä:

index.html

Kokeile itse

index.html

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 3. Luku 5