HTML ja CSS ovat termejä, joita moni meistä on kuullut käytettävän useastikin. Tiedämme, että ne hämärästi liittyvät koodaamiseen ja siinä kohtaa ymmärrys loppuukin. Fakta kuitenkin on, että moni hyötyisi sekä HTML:n ja CSS:n perusasioiden osaamisesta.
Miksi opetella HTML ja CSS -kieliä?
Yhä laajemmalti alkaa olla vallalla käsitys, että ohjelmistojen luomisen ja ohjelmoinnin perustaidot kuuluvat yleissivistykseen, jota pitäisi jo opiskella peruskoulussa aivan kuten maantieto, matematiikkaa ja musiikkiakin. Kaikki nämä auttavat meitä ymmärtämään maailmaa jossa elämme ja fakta on, että elämme suurelta osin elektronisessa maailmassa, jossa tietokoneohjelmat auttavat meitä läpi päivän.
Ohjelmointikielen hallitseminen ei tee meistä välttämättä koodaajaa, mutta siitä on hyötyä monessa eri ammatissa. Lääkäri voi nikkaroida itselleen apuohjelman potilastietojen syöttämistä varten tai yrityksen markkinoinnista vastaava voi tehdä pienen korjauksen itse yrityksen nettisivulle.
Mitä ovat HTML ja CSS?
HTML on merkintäkieli, jolla esitetään sisältöä nettisivulla eli jolla nettisivut on kirjoitettu. Kaikessa yksinkertaisuudessaan HTML-file on vain teksti-file, ja sen luomiseen tarvitaan ainoastaan yksinkertainen tekstieditori.
CSS eli Cascadin Style Sheets taas on se tyyli, millä tuo sisältö on esitetty. CSS on kasa ohjeita siitä, millä tyylillä sivu esitetään. Sillä voidaan kuvata esitystapaa monipuolisesti, mutta sen esittämät säännöt ovat ehdotus, jotka voidaan myös kiertää.
Kumpaisenkin kehittämisestä vastaa World Wide Web Consortium, joka tehtävänä on kehitellä protokollia ja yleisohjeita, jotka takaavat netin pitkän aikavälin kasvun ja kehittymisen. Consortiumin päämaja sijaitsee Mssachussets Institute of Technologyssa eli MIT:ssa.
HTML-kielen alkeet
Html-kielen kirjoittamiseen kelpaa kaikkein yksinkertaisin tekstieditori, joka kaikista käyttöjärjestelmistä löytyy. Itse asiassa mitä yksinkertaisempi, sitä parempi, sillä esimerkiksi Adobe Dreamweaver saattaa sisällyttää omaa koodiaan tekstiisi, koska haluavat auttaa sinua.
Voit kokeilla kirjoittaa täysin yksinkertaisen kolmen sanan lauseen ja tallentaa sen. Tässä on syytä olla tarkkana, sillä file täytyy tallentaa .html-muodossa, eikä esimerkiksi .txt-muodossa, joka on oletusarvona joissain tekstieditoreissa.
Nyt voi käydä kurkistamassa, miltä kolmen sanan lauseesi näyttää netissä. Avaa vain jokin nettiselain ja kirjoita osoitekenttään vasta luomasi filen paikka. Jos tallensit sen nimellä ’osaan koodata’, kirjoita osoitekenttään esimerkiksi c:\html\osaankoodata.html ja siinä se on, ensimmäinen nettisivusi.
Tägejä ja elementtejä
HTML-kielen perusrakenne sisältää aina tägejä eli tunnisteita. Nämä tunnisteet merkitään kulmasulkein ja ne määrittelevät elementin tyypin. Tavallisesti elementissä on sekä aloitustunniste että lopetustunniste, josta jälkimmäinen merkitään vinoviivalla.
Jos otetaan esimerkkinä aikaisempi kolmen sanan lause, sen voisi kirjoittaa merkintäkielellä näin:
<!DOCTYPE html>
<html>
<body>
kolmen sanan lause
</body>
</html>
Tallenna tämä ja voit käydä jälleen kurkkaamassa selaimessa, miltä tämä näyttää. Fakta on, että mitään ei ole muuttunut, mutta nyt tekstisi kertoo selaimellesi erittäin oleellisia asioita. Tämä on tärkeää, jotta nettisivusi näyttäisi siltä kuin sen pitääkin.
Yllä olevan koodin ensimmäinen rivi kertoo, minkälaisesta dokumentista on kyse ja mitä html-tyyppiä käytät. Seuraava rivi kertoo että sen ja jälkimmäisen html-tägin välistä löytyy hyml-dokumentti. Body-osuus taas kertoo, että sen välistä löytyy se sisältö, joka tulee nettisivulle.
Aloitustägeissä eli aloitustunnisteissa voi olla myös attribuutteja, jotka määrittelevät sitä seuraavan elementin sisältöä enemmän kuin sen nimi. Kaikissa elementeissä ei ole ollenkaan sisältöä, tästä esimerkkinä olkoon rivinvaihto eli <br />, joka on myös itsensä sulkeva tägi eli ei siis tarvitse lopetustunnistetta.
Hieman CSS:stä
Kun HTML on pelkkää sisältöä eli useimmiten tekstiä, määrittelee CSS sen, miten tämä sisältö esitetään. Kun html-kielessä on tägejä, on css:ssä taas valitsimia. Valitsimien lisäksi löytyy css-syntaksista ominaisuuksia ja arvoja. Näitä voi laittaa useamman peräkkäin valitsimen sisään erottamalla ne puolipisteellä, kun taas kaikki valitsimen arvot ja ominaisuudet suljetaan aaltosulkeiden sisään.
Esimerkiksi HTML-valitsimet ovat yksinkertaisesti HTML-tägejä, ja niitä käytetään muuntamaan sitä, miltä elementti näyttää. CSS:llä voidaan muun muassa määritellä väri, tekstityyppi, marginaalit, reunukset sekä asemointi.
Viimeisimmät versiot
Uusin versio HTML-kielestä on HTML5, joka julkaistiin vuoden 2014 lokakuussa ja jota suositellaan nyt käyttämään nettisivujen merkintäkielenä. Uutta aikaisempiin versioihin verrattuna siinä on muun muassa video ja audio-elementit sekä sovellusliittymät, joilla voidaan tuoda dokumentteihin sovellusmaisuutta ja toteuttaa vuorovaikutteisuutta.
Erityisesti tämän version video-elementtiä verrataan Adoben Flashiin, johon jotkin nettisivut pohjautuvat. Flashissa on kuitenkin useita ongelmia ja esimerkiksi hakukoneet eivät tunnista avainsanoja niistä. Hakukoneoptimointia tehdessä HTML-kieli onkin ehdoton, sillä hakukonealgoritmit ymmärtävät sitä. Video-elementin tulo merkintäkieleen tuo siis uusia mahdollisuuksia luoda nettisivuja ja harjoittaa hakukoneoptimointia.
CSS3 on taas viimeisin versio CSS:stä ja sen uusiin ominaisuuksiin kuuluvat muun muassa animointi, elementtien käänteleminen, fontin venyttäminen, laatikoiden kääntäminen sekä puheominaisuudet. Myös tämä versio on suunniteltu korvaamaan Flash, jota Adobe ei aio enää jakaa tai tukea vuoden 2020 jälkeen.
Sekä HTML että CSS ovat työkaluja ja kommunikaation välineitä, joiden tehtävä on luoda parhaat mahdolliset nettisivut.