HTML-dokumentti koostuu useista osista, jotka yhdessä määrittävät, miten verkkosivu näytetään selaimessa. HTML-dokumentti alkaa 

-määrittelystä, joka kertoo selaimelle, että kyseessä on HTML5-dokumentti. Tämän jälkeen seuraa 

 -elementti, joka kertoo selaimelle, että kaikki dokumentin sisältö on HTML-koodia.

Head-elementti sisältää tiedot, jotka eivät näy selaimessa, mutta ovat tärkeitä dokumentin rakentamisen kannalta. Esimerkiksi head-elementtiin voidaan lisätä meta-tunnisteita, joiden avulla voidaan määrittää sivun kieli ja käyttämä merkistö. Lisäksi head-elementtiin voidaan lisätä linkki- ja script-elementtejä, joilla tuodaan CSS-tyylitiedostoja ja JavaScript-koodia sivulle.

Body-elementti sisältää kaiken sen sisällön, joka näkyy selaimessa. Sivun tekstin ja muun sisällön lisäksi body-elementtiin voidaan lisätä erilaisia HTML-elementtejä, kuten kuvia, linkkejä, taulukoita, listoja ja lomakkeita. HTML-dokumentin lopetusmerkintänä käytetään </html> -tunnistetta.

Seuraava on esimerkki yksinkertaisesta HTML-dokumentista, joka sisältää perus-rakenteen:

Älä välitä jos et vielä ymmärrä kaikkien tagien tarkoitusta, tulemme niihin kyllä. Oleellista on nyt saada perus idea HTML-dokumentin rakenteesta.

Tässä kuitenkin lyhyesti jos olet utelias:

head-osion sisällä olevat meta-tagit määrittävät dokumentin merkistön jotta esimerkiksi ääkköset toimisivat oikein, sekä kertovat selaimelle että sivustoa tulisi skaalata ruudun koon mukaan.

head-osion sisällä oleva title-tagi määrittää selaimen välilehdessä näkyvän tekstin.

head-osion sisällä oleva link-tagi linkittää dokumenttiin tyylitiedoston josta tulee sivustolle esimerkiksi värejä ja fontteja.

body-osion sisällä oleva script-tagi lataa sivulle JavaScript-tiedoston ja suorittaa sen koodin.

HTML-dokumentti koostuu useista osista, jotka yhdessä määrittävät, miten verkkosivu näytetään selaimessa. HTML-dokumentti alkaa **<!DOCTYPE html> **-määrittelystä, joka kertoo selaimelle, että kyseessä on HTML5-dokumentti. Tämän jälkeen seuraa **<html>** -elementti, joka kertoo selaimelle, että kaikki dokumentin sisältö on HTML-koodia.

Seuraavaksi tulevat **<head>** ja **<body>** -elementit.

## HTML Head

Head-elementti sisältää tiedot, jotka eivät näy selaimessa, mutta ovat tärkeitä dokumentin rakentamisen kannalta. Esimerkiksi head-elementtiin voidaan lisätä meta-tunnisteita, joiden avulla voidaan määrittää sivun kieli ja käyttämä merkistö. Lisäksi head-elementtiin voidaan lisätä linkki- ja script-elementtejä, joilla tuodaan CSS-tyylitiedostoja ja JavaScript-koodia sivulle.

---

## HTML Body

Body-elementti sisältää kaiken sen sisällön, joka näkyy selaimessa. Sivun tekstin ja muun sisällön lisäksi body-elementtiin voidaan lisätä erilaisia HTML-elementtejä, kuten kuvia, linkkejä, taulukoita, listoja ja lomakkeita. HTML-dokumentin lopetusmerkintänä käytetään </html> -tunnistetta.

---

## Laitetaan palaset yhteen

Seuraava on esimerkki yksinkertaisesta HTML-dokumentista, joka sisältää perus-rakenteen:

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>HTML-dokumentti</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  Tämä on oikean muotoinen HTML-sivu.
  <script src="script.js"></script>
</body>

</html>
```

Älä välitä jos et vielä ymmärrä kaikkien tagien tarkoitusta, tulemme niihin kyllä. Oleellista on nyt saada perus idea HTML-dokumentin rakenteesta.

Tässä kuitenkin lyhyesti jos olet utelias:

- head-osion sisällä olevat meta-tagit määrittävät dokumentin merkistön jotta esimerkiksi ääkköset toimisivat oikein, sekä kertovat selaimelle että sivustoa tulisi skaalata ruudun koon mukaan.
- head-osion sisällä oleva title-tagi määrittää selaimen välilehdessä näkyvän tekstin.
- head-osion sisällä oleva link-tagi linkittää dokumenttiin tyylitiedoston josta tulee sivustolle esimerkiksi värejä ja fontteja.
- body-osion sisällä oleva script-tagi lataa sivulle JavaScript-tiedoston ja suorittaa sen koodin.

---

## Harjoittele

@embed 8212e5e38b2a


HTML-Dokumentin Rakenne

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy HTML:n, CSS:n, JavaScriptin ja taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa opiskelijoille tarvittavat taidot ja tietämys, jotta he voivat suunnitella ja kehittää ja ymmärtää yksinkertaisia web-sovelluksia.

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy verkkosivustojen peruspalikoiden, eli HTML:n, CSS:n ja JavaScriptin sekä taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa sinulle tarvittavat taidot ja tietämys, jotta voit suunnitella ja kehittää yksinkertaisia full-stack web-sovelluksia, sekä ymmärtää muiden tekemiä web-sovelluksia.

Ensimmäisessä osassa opiskellaa HTML:ää joka on verkkosivustojen rakentamisessa käytetty merkintäkieli.


Toisessa osassa opiskellaan CSS:n perusteita, kuten tyylitiedoston käyttöä, sääntöjä, selektoreita ja muotoilua. Käsitellään myös CSS:n edistyneitä ominaisuuksia, kuten animaatioita ja responsiivista suunnittelua.


Kolmannessa osassa opiskellaan JavaScriptia joka on nykyisin valtavan tärkeä työkalu sekä frontend että backend -kehityksessä ja sitä kautta myös tietoturvassa ja eettisessä hakkeroinnissa.

Viimeisessä osassa opiskellaan rakentamaan taustajärjestelmiä Python Flask sovelluskehyksellä. Opit taustajärjestelmien perusteet, kuten tietokantojen käytön, autentikoinnin, istunnonhallinnan sekä pääsynhallinnan.

Voit tehdä kurssin tehtäviä omalla koneellasi jos haluat, mutta jokaisessa koodiesimerkissä on nappi jolla voit suoraan selaimessa ajaa kyseisen koodin ja nähdä miltä sivu näyttää, tai mitä skripti tulostaa. Sinun ei siis tarvitse asentaa mitään, mutta voit jos haluat.

On suositeltavaa mutta vapaaehtoista tehdä tili replit.com palvelussa, tällöin voit vain klikata "Fork" koodiesimerkeissä niin saat niistä kopion itsellesi jolla voit leikkiä

HTML-Dokumentin Rakenne

HTML Head

Hakkeroinnin oppiminen alkaa tästä