Oppiskele Haaste: Rakenna HTML-Dokumentti Oikein

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.

Huomio

Älä anna verkkosivun yksinkertaisen ulkoasun hämätä. Vaikka rakenne vaikuttaa suoraviivaiselta, oikean dokumenttirakenteen säilyttäminen on edelleen ensiarvoisen tärkeää. Tämä varmistaa, että verkkosivusto säilyttää luettavuutensa ja toiminnallisuutensa kaikilla selaimilla.

Tehtävä

Luo perus HTML-dokumentin rakenne. Jos tunnet olosi jo varmaksi, voit jatkaa ilman vaiheittaista ohjetta. Mikäli kuitenkin kaipaat lisäopastusta, vaiheittainen opastus on saatavilla tueksesi.

Vaiheittainen opas

Vaihe 1: Aloita HTML-dokumentti

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

index.html

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:

index.html

Vaihe 3: Luo head-osio

Lisää avaus- ja sulku <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>-tägin sisälle lisätään avaus- ja lopetus-<title>-tagit. Teksti, jonka kirjoitat näiden tagien väliin, näkyy verkkosivun otsikkona selaimen otsikkopalkissa tai välilehdessä:

index.html

Vaihe 5: Luo body-osio

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

index.html

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

Voit lisätä <body>-tagien sisälle elementtejä, kuten otsikoita, kappaleita, kuvia, linkkejä jne. Tässä 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

Suggested prompts:

Can you show me an example of a complete basic HTML document?

What should I put as the title of the webpage?

Can you explain the purpose of each section in the HTML structure?

Pyyhkäise näyttääksesi valikon

Tavoite

Huomio

Tehtävä

Luo perus HTML-dokumentin rakenne. Jos tunnet olosi jo varmaksi, voit jatkaa ilman vaiheittaista ohjetta. Mikäli kuitenkin kaipaat lisäopastusta, vaiheittainen opastus on saatavilla tueksesi.

Vaiheittainen opas

Vaihe 1: Aloita HTML-dokumentti

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

index.html

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

index.html

Vaihe 3: Luo head-osio

Lisää avaus- ja sulku <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>-tägin sisälle lisätään avaus- ja lopetus-<title>-tagit. Teksti, jonka kirjoitat näiden tagien väliin, näkyy verkkosivun otsikkona selaimen otsikkopalkissa tai välilehdessä:

index.html

Vaihe 5: Luo body-osio

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

index.html

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

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

index.html

Kokeile itse

index.html

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 3. Luku 5