HTML on kieli, jolla nettisivujen sisältö kirjoitetaan. HTML koostuu tageista:

<p>Esimerkki!</p>

Tässä näkyy p-elementin avaava tagi, elementin sisältö (eli "Esimerkki!") ja sen lopettava tagi. P-elementti tarkoittaa leipätekstikappaletta. Tämä HTML-koodipätkä siis tuottaa nettisivulle näkyviin yhden tekstikappaleen, jossa lukee "Esimerkki!".

Tietyn elementin sisältö täytyy laittaa sen avaus- ja lopetustagin väliin, muuten sisältö ei kuulu elementtiin. Tagit ja sisällön voi myös laittaa eri riveille:

<p>
    Tässä toinen kappale.
</p>

Tässä on lista muutamasta erilaisesta HTML-elementtityypistä.

Nettisivun rakenne

Nyt kun tiedämme mitä HTML-elementit ovat, voimme tutustua yksinkertaisen nettisivun rakenteeseen:

nettisivu.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Pieni nettisivu</title>
    </head>
    <body>
        <h1>Mun reseptejä</h1>
        <p>Tässä lista mun lemppariresepteistä.</p>
        <ul>
            <li><a href="https://sipu.li/">Kalakeitto</a></li>
            <li><a href="https://sipu.li/">Paistettu riisi</a></li>
            <li><a href="https://sipu.li/">Linssikeitto</a></li>
            <li><a href="https://sipu.li/">Perunamuussi</a></li>
        </ul>
        <img src="/images/cakes.webp">
    </body>
</html>

Koodi tuottaa tämän näköisen nettisivun:

Nettisivu ei vielä näytä kovin kummoiselta, mutta tämä johtuu siitä, että HTML:än tehtävä on sivun rakenteen määrittely, eikä niinkään sen ulkoasun. Pian tutustumme CSS-kieleen, jolla voimme muokata sivun värejä ja muita ulkoasuun liittyviä asioita.

Jos ja kun koitat html-koodausta omalla koneellasi, niin sinun täytyy tallentaa html-tiedosto .html-päätteen kanssa. Kun tiedostossa on .html-pääte, niin sen voi avata selaimessa tuplaklikkaamalla sitä. Tiedostosta tehdään html-muotoinen niin, että kun tallennat tiedoston tekstieditorissa, valitse Muoto-valikosta "Kaikki tiedostot" ja lisää tiedoston nimeen .html-pääte:

Käydään läpi sivuston HTML-koodi.

<!DOCTYPE html>

Tiedoston ensimmäinen rivi ei oikeastaan ole HTML:ää. Se kertoo selaimelle mikä tiedoston tyyppi on, jotta selain osaa näyttää sivuston oikein.

<html>

Nettisivu alkaa tältä riviltä, ja loppuu </html>-riviin.

<head>

Head-elementin sisälle ei laiteta mitään sivulla näkyvää, vaan se sisältää tietoa sivustosta ja linkkejä toisiin tiedostoihin (esimerkiksi CSS-tiedostoihin, jotka määrittelevät sivun ulkoasun).

<meta charset="utf-8">

Tämä tagi määrää sen, että sivustolla käytetään utf-8-merkkejä. Ei haittaa, jos et tiedä mitä tämä tarkoittaa. Sillä ei oikeastaan ole muuten väliä, kuin että ilman tätä tagia esim. ääkköset eivät välttämättä näy sivulla oikein.

<title>Pieni nettisivu</title>

Title-elementti määrittelee välilehden nimen. Välilehden nimi näkyy selaimen yläpalkissa.

<body>

Body-elementti sisältää kaiken, joka näkyy sivustolla. Sen sisälle laitetaan siis kaikki teksti ja muu sivuston sisältö.

<h1>Mun reseptejä</h1>

Tämä on sivuston otsikko. Otsikkoja kannattaa olla vain yksi. Väliotsikot voi tehdä esimerkiksi h2-tageilla. Muut vielä pienemmät väliotsikon koot ovat h3, h4, h5 ja h6.

<p>Tässä lista mun lemppariresepteistä.</p>

Kuten artikkelin alussa kerrottin, p-tagi tarkoittaa tavallista tekstikappaletta.

<ul>

ul tarkoittaa listaa (unordered list). On olemassa myös toisenlainen lista, ol (ordered list), jonka jäsenten vieressä ei ole palluraa, vaan numerot.

<li><a href="https://sipu.li/">Kalakeitto</a></li>

Tällä rivillä on kaksi sisäkkäistä elementtiä: li ja a. li tarkoittaa listan jäsentä, ja a on linkki. a-tagilla on myös attribuutti:

href="https://sipu.li/"

Attribuutit kertovat lisäinfoa elementeistään. Href-attribuuttin tarkoittaa linkin osoitettta. Attribuutin arvon kannattaa olla lainausmerkeissä. Tässä esimerkkejä eri attribuuteista:

Koodissa on vielä yksi elementti:

<img src="/images/cakes.webp">

Img-tagi tarkoittaa kuvaa. Kuva-tagilla ei ole sisältöä, eikä se tarvitse sulkevaa tagia. Src-attribuutti tarkoittaa kuvan osoitetta. Osoite voi olla nettiosoite, tai se voi olla polku samassa kansiossa olevaan kuvaan.

Tässä yksityiskohtaisempi ohje kuvien lisäämiseen, jos tarvitset lisäohjeita.

Sitten voidaan tutustua CSS:ään.