CSS oppikoulu osa 2: webselain

CSS on yksi kolmesta tärkeästä webin teknologiasta (muut ovat HTML ja JavaScript). Kaikki edellämainitut ovat lopulta vain tekstiä, joka tallennetaan tiedostoihin. Miten teknologiat sitten eroavat toisistaan?

Jotta ymmärrämme paremmin CSS:n roolin, tehdään pikakatsaus näiden kolmen teknologian saumaamiseksi.

HTML, CSS ja JavaScript ovat myös kaikki standardeja, joista löytyy kattava dokumentaatio.

Miten websivu muodostuu näytölle?

Web-sivu tulkitaan HTML- ja CSS-lähdetiedostojen avulla. Web-serveri (palvelin) säilöö tiedostoja, jotka ohjelmoija on tehnyt.

Kun netin käyttäjä kirjoittaa selaimeen osoitteen (ns URLin), selain lähettää HTTP-protokollaa käyttäen pyynnön dokumentin saamiseksi palvelimelta. HTTP “GET” on komento, jolla dokumentti pyydetään. Palvelin palauttaa HTML-tiedoston. Toisin sanoen, HTML sitoo eri komponentit yhteen. HTML on siis kuin sovelluksen kuoret; se sisältää suoraan tai linkkeinä muutkin osaset.

CSS:llä sen sijaan luodaan graafinen ulkoasu ja monia hyödyllisiä efektejä, animaatioita yms.

JavaScript puolestaan on varsinainen sovelluksen logiikka, eli “koodi”; sillä kerrotaan tarkkaan ottaen miten sovellus toimii. JavaScriptillä mm.

  • käsitellään tekstin syöttö lomakkeen kenttiin ja muihin sivun alueisiin
  • käsitellään klikkaukset (“click handlers“): napit, menut
  • tehdään lomakkeiden kenttien tarkistukset (form validation)
  • voidaan tehdä ajastettuja toimintoja
  • voidaan suorittaa laskutoimituksia, peleissä ja hyötysovelluksissa

Jäikö jotain mietityttämään tässä vaiheessa? Kommentoi tänne blogiin, tai anna palautetta esimerkiksi kysymällä Twitterissä. Myös Facebookissa Jukkasoftin ympärillä on oma ryhmä.

Published by jukkasoft

Me: a code enthusiasta, technology optimist, but also a realist. In my blog something like 80% of the articles are technology related - mostly in English and Finnish. I like to envision and ponder about things, how life could be, what we are doing wrong today, and so on. "Invented" a facebook -like system in 2000, as a short product pamphlet. Haven't yet realized the 20+ ideas that might have become big things. Maybe learning this skill one of these days!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: