## Tavoite
Luo oikea verkkosivu rakentamalla perus HTML-dokumentin rakenne. Tämä rakenne muodostaa jokaisen HTML-sivun perustan ja sisältää olennaiset elementit, joita selaimet tarvitsevat sisällön oikeaan näyttämiseen.

Älä anna verkkosivun yksinkertaisen ulkoasun hämätä. Vaikka rakenne vaikuttaa suoraviivaiselta, on erittäin tärkeää **säilyttää oikea dokumentin rakenne**. Tämä varmistaa, että sivusto pysyy luettavana ja toimivana kaikissa selaimissa.

Huomio

## Tehtävä
Luo perusrakenteinen HTML-dokumentti. Jos tunnet olosi varmaksi, voit jatkaa ilman vaiheittaista ohjetta. Mikäli kuitenkin kaipaat lisäohjausta, vaiheittainen opastus on saatavilla avuksesi.

### Vaihe 1: Aloita HTML-dokumentti
Aloita kirjoittamalla HTML-doctype-määritys, joka kertoo selaimelle, että dokumentti on kirjoitettu HTML:llä. Määrityksen tulee olla HTML-dokumentin ensimmäinen rivi:

### Vaihe 2: Lisää html-avaus- ja sulkutagit
Doctype-määrityksen jälkeen lisää HTML-avaus- ja sulkutagit. Koko HTML-dokumentin rakenne sijoitetaan näiden tagien sisälle. Lisää lisäksi `lang`-attribuutti määrittämään dokumentin kieli:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj48L2h0bWw+

### Vaihe 3: Luo head-osio
Lisää avaus- ja lopetustagit `<head>` HTML-tunnisteiden sisälle. Head-osio sisältää HTML-dokumentin metatietoja, kuten otsikon ja linkit ulkoisiin tyylitiedostoihin:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD48L2hlYWQ+CjwvaHRtbD4=

### Vaihe 4: Lisää otsikko
Lisää `<head>`-tunnisteiden sisälle avaus- ja lopetustagit `<title>`. Näiden tunnisteiden väliin kirjoitettu teksti näkyy verkkosivun otsikkona selaimen otsikkopalkissa tai välilehdessä:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5NeSBXZWJwYWdlPC90aXRsZT4KICA8L2hlYWQ+CjwvaHRtbD4=

### Vaihe 5: Luo body-osio
`<head>`-osion jälkeen lisää avaus- ja sulkevat `<body>`-tagit. Body-osio sisältää verkkosivun näkyvän sisällön:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5NeSBXZWJwYWdlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+PC9ib2R5Pgo8L2h0bWw+

### Vaihe 6: Lisää sisältöä body-osioon
Voit lisätä elementtejä `<body>`-tagien sisälle, kuten otsikoita, kappaleita, kuvia, linkkejä jne. Tässä esimerkki otsikon ja kappaleen lisäämisestä:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5NeSBXZWJwYWdlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aDE+VGhlIHdlYnBhZ2UgbWFpbiBoZWFkaW5nPC9oMT4KICAgIDxwPlNvbWUgY29udGVudC48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

PCEtLSBDcmVhdGUgdGhlIGJhc2ljIGRvY3VtZW50IHN0cnVjdHVyZSAtLT4K

Opi HTML:n (HyperText Markup Language) perusteet, joka on verkkokehityksen perusta. Tämä aloittelijaystävällinen kurssi kattaa tunnisteet, attribuutit, elementit ja verkkosivujen rakenteen. Hanki käytännön taitoja otsikoiden, kappaleiden, listojen, kuvien, linkkien, lomakkeiden ja taulukoiden luomisessa. Tutustu parhaisiin käytäntöihin, optimointiin ja verkkosivustojen saavutettavuuteen. Aloita verkkokehityksen matkasi HTML:n avulla.

Tutki verkon sisäistä toimintaa. Opi, miten data kulkee verkkojen läpi, tutustu protokollien rooliin ja selvitä IP-osoitteiden ja verkkotunnusten mysteerit. Saa korkeatasoinen ymmärrys siitä, miten verkkoselaimet ja palvelimet kommunikoivat toimittaakseen verkkosisältöä.

Tutustu tunnisteiden voimaan sisällön jäsentämisessä, otsikoista ja kappaleista listoihin ja taulukoihin. Opi, kuinka voit parantaa elementtejä attribuuteilla.

HTML-dokumentin rakenteen ydin. Opi HTML-dokumentin osat, mukaan lukien doctype-ilmoitus, head ja body. Ymmärrä kunkin elementin tarkoitus ja miten ne vaikuttavat verkkosivun kokonaisrakenteeseen.

Tee verkkosivusta houkuttelevampi median, kuten kuvien, äänen ja videon avulla. Työskentele jäsennellyn taulukkomuotoisen datan kanssa taulukoiden muodossa.

Tutustu HTML-lomakkeiden monipuolisuuteen. Opi suunnittelemaan intuitiivisia ja käyttäjäystävällisiä lomakkeita hyödyntämällä keskeisiä käsitteitä ja tekniikoita. Selvitä, kuinka lomakkeet mahdollistavat käyttäjän vuorovaikutuksen ja tietojen lähettämisen verkkosivustoilla.

Haaste: Rakenna HTML-dokumentti Oikein

Tavoite

Tehtävä

Vaiheittainen opas

Vaihe 1: Aloita HTML-dokumentti

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

Vaihe 3: Luo head-osio

Vaihe 4: Lisää otsikko

Vaihe 5: Luo body-osio

Vaihe 6: Lisää sisältöä body-osioon

Kokeile itse