Verkkosivut ja ohjelmointi

Johdanto

Internetin käytetyin osa, World Wide Web (WWW), koostuu verkkosivuista. Verkkosivut taas koostuvat HTML-tiedostoista. Itse tehtyjä verkkosivuja voidaan katsoa omalta tietokoneelta verkkoselaimella. Jotta sivut näkyisivät kaikille internetissä, tarvitaan verkkosivuille palvelintilaa. Palvelintilaa tarjoavat useat yritykset, muun muassa teleoperaattorit. Useat yritykset (esimerkiksi nettihotelli.fi) tarjoavat melko edullisesti myös nettihotellipalveluita. Niissä on mahdollista saada verkkosivujen palvelintilan lisäksi oma domain eli verkkotunnus, jolloin verkkosivun WWW-osoitteeksi eli verkko-osoitteeksi voidaan valita omavalintainen osoite, esimerkiksi www.etunimisukunimi.net.

Tässä jaksossa käsitellään kolmea verkkosivujen tekemiseen liittyvää osa-aluetta: HTML:ää, CSS:ää ja JavaScriptiä. HTML (HyperText Markup Language) on verkkosivujen hypertekstin merkintäkieli eli niin sanottu työkalu verkkosivujen tekemiseen. CSS (Cascading Style Sheet) tarkoittaa verkkosivun tyyliohjeita eli sen avulla määritellään verkkosivun ulkoasu. Toisin sanoen HTML-merkintäkielellä tehdään verkkosivuille rakenne ja sisältö, mutta CSS:n avulla verkkosivujen muotoilu ja asettelu saadaan halutunlaiseksi. JavaScript on sen sijaan ohjelmointikieli, jolla voidaan lisätä verkkosivuille toiminnallisuutta ja vuorovaikutteisuutta.

Valmistelut

TIM-kirjautuminen

Luvusta 3 eteenpäin osa tehtävistä tehdään TIM-ohjelmointiympäristössä. Interaktiivisten tehtävien tekemiseksi TIM-ympäristöön tulee kirjautua sisään. Jos tunnuksia ei ole, ne voi helposti luoda syöttämällä sähköpostiosoitteen ylälaidassa olevan "Log In" -painikkeen takaa löytyvän "Sign up" -painikkeen kautta löytyvään kenttään. Tämän jälkeen TIM lähettää sinulle kertakäyttöisen salasanan syöttämääsi sähköpostiosoitteeseen. Kirjautuessasi sisään, TIM kysyy uutta salasanaa. Syötä samalla järjestelmään oma nimesi, mikäli TIM ei pysty sitä asettamaan oikein sähköpostiosoitteesi perusteella.

Tallennuskansio

Projektitehtäviä varten kannattaa luoda html-niminen kansio, johon tallennetaan kaikki verkkosivustoon liittyvät tiedostot. Kansioon tallennetaan myös projektitehtävässä käytettävät kuvat ja videot.

Tekstieditori

HTML-merkintäkieltä kirjoitetaan tekstieditoriohjelmalla (ei tekstinkäsittelyohjelmalla). Koodin kirjoittamista varten kannattaa asentaa erillinen tekstieditori, joka tukee syntaksiväritystä ja automaattista sisennystä. Syntaksiväritys tarkoittaa, että merkintöjä selkeytetään erilaisin värimerkinnöin. Automaattinen sisennys taas tarkoittaa, että ohjelma sisentää elementit automaattisesti koodin lukemisen helpottamiseksi. Molemmat ovat merkintäkielen kirjoittamista helpottavia ominaisuuksia, jotka löytyvät yleensä internetistä ladattavista ilmaisista tekstieditoriohjelmista. Koodia voidaan kirjoittaa myös tietokoneen käyttöjärjestelmän omilla tekstieditoreilla, mutta niiden ominaisuuksista on yleensä karsittu pois syntaksikorostus ja automaattinen sisennys.

Tiedoston esikatselu selaimessa

Merkintäkielellä luotua tiedostoa on mahdollista esikatsella verkkoselaimella jo kirjoittamisen aikana. Voit avata html-kansioon tallennetun tiedoston selaimella ja halutessasi sijoittaa tekstieditorin ja selaimen ikkunan vierekkäin näytölle. Tämä helpottaa erityisesti muotoilujen hahmottamista.