Mistä nettisivut rakentuvat

Omien nettisivujen koodaus on eräs helpoimmista tavoista aloittaa koodauksen opettelu. Tarvitset vain minkä tahansa tekstieditorin ja nettiselaimen. Mutta mistä nettisivut oikeastaan rakentuvat? Useimmat nettisivut koostuvat kolmesta eri rakennusmateriaalista, joita ovat HTML, CSS ja JavaScript. Ei hätää, vaikka nämä olisivat täysin outoja termejä. Tämän kirjoituksen loppuun mennessä olet takuulla jo päässyt jyvälle!

Kooditalo

Talo on hyvä vertauskuva netin ohjelmointikielten ymmärtämiseen. HTML on kieli, jolla koodari kertoo mistä osista nettisivu koostuu  ja missä järjestyksessä osat suunnilleen ovat. CSS puolestaan kertoo miltä osien tulee näyttää ja miten ne on järjestelty. Lopuksi JavaScript (JS) on vähän kuin talon sähköt ja vedet. Mitään ei tapahdu ilman niitä. Useimmat nettisivujen toiminnot, kuten se mitä napeista tapahtuu, on tehty JS:llä.

Kuva 1: Kooditalon rakennusmateriaalit

Seuraavaksi aletaan rakentamaan taloa.

Rakennuspalikat

Nettisivujen runko koostuu HTML-koodikielellä kirjoitetuista osista. Osia kutsutaan tageiksi, ja ne näyttävät tältä:

<h1>Hei, tässä on otsikkotagi!</h1>

Kooditalossamme HTML:llä kirjoitetut tagit edustavat esimerkiksi seiniä, pylväitä ja huonekaluja. Jos jättäisimme kooditalomme rakentamisen pelkkään HTML:ään, se näyttäisi siltä kuin joku olisi tiputtanut tontille kaikki rakennusmateriaalit siistiin riviin:

Kuva 2: Kooditalo pelkällä HTML-koodilla.

Nyt on aika laittaa osat ruotuun ja kokeilla miltä ne voisivat näyttää.

Väriä pintaan

CSS on tehty varta vasten nettisivun osien tyylien muuttamiseen. Sillä voi kertoa muun muassa, että haluamme tekstin olevan pinkkiä, ja taustan vaaleansinistä. Voimme myös muuttaa vaikkapa tekstin kokoa. Esimerkiksi aiemman kappaleen otsikkotagin (h1) tyyliä muutetaan tähän tapaan:

h1 {
color: pink;
background-color: lightblue;
font-size: 48px;
}

Voimme myös kertoa CSS:llä minkä kokoisia ja missä kohdassa nettisivuamme haluaisimme osien olevan. Kooditalomme voisi näyttää CSS:n jälkeen tältä:

Aiemman kuvan elementit on muotoiltu talon muotoiseksi, jossa on keskellä pöytä, sekä edessä kaksi valopylvästä.
Kuva 3: Kooditalo, jossa HTML-koodiin on lisätty CSS-tyylit.

Yhdistämällä HTML:ssä määritellyt osaset ja CSS:n tyylit, päästään jo aika pitkälle kooditalon rakennuksessa! Meillä saattaa olla mukana jopa valokatkaisija, mutta ilman JavaScriptia siitä ei vielä tapahdu mitään.

Viimeistelyä vaille valmis

Kooditaloon voisi jo melkein asettua taloksi. Nykyihminen kuitenkin kaipaa taloonsa hiukan toiminnallisuutta, ja niin kaipaavat nettisivujen käyttäjätkin. Siksi meillä on JavaScript! JavaScriptilla voisimme kooditalomme tapauksessa vaikka tehdä automaattisesti syttyvät ulkovalot, ovikellon ja katkaisijasta sytytettävät sisävalot. Se voisi näyttää vaikka tältä:

Samanlainen kuva kuin aiemmin, mutta pöydän päällä ja talon edessä olevissa lampuissa palaa valo.
Kuva 4: Kooditalo, jossa HTML:ään ja CSS:ään on lisätty JavaScriptilla valot.

Kaikki talossa tapahtuva automatiikka on siis luotu JavaScriptilla. Esimerkiksi automaattisesi syttyvien valojen koodi voisi olla seuraavanlainen:

if (liikeHavaittu) {
sytytäValot();
}

Taustalla on toki paljon muutakin, mutta ei mitään erityisen vaikeaa. Kertauksena siis HTML:ssä kirjoitetaan tarvittavat osat järjestykseen, CSS:ssä asetetaan tyylit ja paikat, ja JavaScriptilla tehdään toiminnallisuus.

Toivottavasti sait kirjoituksen avulla paremman käsityksen siitä, millaisista rakennusmateriaaleista nettisivut koostuvat. Kuka tahansa voi oppia JavaScriptia. Pug Fix -peli on helppo ja hauska tapa päästä alkuun, ja miksei vähän pidemmällekin! Voit kokeilla Pug Fixia ilmaiseksi.

Latest posts by Matti Haapamäki (see all)

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *