Aloitus

Kurssin rakenteen läpikäynti
Jakaudutaan ryhmiin

Internetin ja hypertekstin kehittyminen

Käsitteet: Internet, WWW, hyperteksti

Hyperteksti ja Web

Hypertekstin ajatusta kehiteltiin jo 1800 luvulta, mutta jäsennellymmin ajatus kehittyi vuodesta 1945 eteenpäin

Tuolloin tutkija Vannevar Bush julkaisi artikkelin As We May Think, jossa hän ennusti massamuistit ja nopean tiedonsiirron

Artikkelissa kuvataan myös Memex-niminen laite, joka mahdollistaisi kirjojen ym. dokumenttien tallentamisen ja jakamisen toisten koneiden kesken.

Vannevar Bushia pidetään hypertekstin isänä

60-luvulla kehiteltiin alkeellisia hypertekstiohjelmia

1985-87 kehiteltiin henkilökohtaisissa koneissa käytettäviä hypertekstiohjelmia, jotka toimivat esikuvina multimediakehittimille ja web-selaimille

1990-luvulla hypertekstiin perustuvien web-selainten käyttö lisääntyi, koska helppokäyttöiset ja monipuoliset selaimet yleistyivät

Web teki Internetistä tunnetun

Tim Berners-Lee, "webin isä" ...

Standardointi, w3:n synty...

Miten html-merkkaus keksittiin?

html on merkkauskieli, joka on kehittynyt tekstin merkkauskielistä kirjapainoladonnassa

Alun perin pelkkää tekstin muotoilua, nykyisin HTML sisältää jo paljon muutakin

Aikoinaan typografi piirsi tekstin muotoilua koskevan suunnitelman ja ohjeet latojalle

Latoja kokosi kokosi tekstin ohjeiden mukaan käsin kuumaladontaa käyttäen

Valoladontalaitteet yleistyivät 40-50 -luvulla, 70-luvulta lähtien ne olivat tietokoneohjattuja

Tällöin tekstin muotoilua varten kehitettiin erityinen merkkauskieli, markup language, jonka avulla tietokone osasi muotoilla tekstin oikealla tavalla

Alun perin typografin tekemistä merkinnoistä otettiin mallia ensimmäisiä ladontaohjelmia laadittaessa. Samat merkinnät ovat periytyneet edelleen html-kieleen.

html-merkkaus ja ulkoasun muotoilu

html (hypertext markup language) on yksinkertainen ja helposti opittava merkkauskieli

html-dokumentti koostuu tekstisisällöstä ja dokumentin rakennetta (ja osittain ulkoasua) kuvaavista merkinnöistä

Tyypillinen html-dokumentin rakenne näyttää seuraavalta

html-kielessä ei käytetä komentoja, vaan tekstin osia merkataan ns. tageilla

Tagien avulla html-dokumentille luodaan rakenne, jota kutsutaan puurakenteeksi

html on siis loogiselta rakenteeltaan puumainen, vaikka se kirjoitetaan peräkkäistekstinä

CSS

CSS (cascading style sheet) on merkintäjärjestelmä, jonka avulla voi esittää selaimille dokumenttien ulkoasua koskevia ehdotuksia

Ehdotusten kokonaisuutta kutsutaan tyyliohjeeksi tai tyylisäännöksi

Tyyliohjetta voi verrata lappuseen, jolla ennen annettiin latojalle ohjeita siitä, mitä kirjasinlajeja käytetään, miten teksti asemoidaan jne.

Aikaisemmin ulkoasua koskevat määritykset tehtiin html-merkkauksen joukkoon

Tällöin

•  tyyliohjeen idea ja käytön hyödyt, lyhyt historia
• miten ulkoasua voi säädellä?
• mitä css:llä voi tehdä ja mitä ei voi tehdä?

Miksi on tärkeää opiskella HTML:ää ja CSS:ää systemaattisesti?

Usein www-sivujen suunnittelijat oppivat html:n ja tyylitiedostojen käytön yrityksen ja erehdyksen kautta sekä kopioimalla muiden tekemiä verkkosivustoja.

Tällöin helposti ei edes ymmärretä, miten tietty tagi tai deklaraatio toimii, vaan ollaan tyytyväisiä siitä, että sivusto toimii sillä hetkellä käytössä olevilla selaimilla ja siinä kontekstissa, johon kopioitu koodinpätkä on asetettu. Selainten päivittyessä epästandardi koodi saattaa kuitenkin lakata toimimasta halutulla tavalla, tai sivustoa myöhemmin päivitettäessä ei enää muisteta, mistä oikein oli kysymys.

Html:n tunteminen on tärkeää kaikille, jotka tekevät web-sivuja. Myös sivunteko-ohjelmia käytettäessä joudutaan usein korjaamaan ohjelman tekemää html:ää tai etsittävä syitä virhetilanteisiin html:n joukosta.

Myös CSS:n käyttö on helppoa aloittaa kopioimalla yksinkertaisia rakenteita, mutta vaativammassa käytössä CSS:n käsitteet saattavat olla vaikeita omaksua ja soveltaa. Käsitteet toimivat osittain eri logiikalla kuin html:ssä, vaikka niistä käytettäisiin samoja nimiäkin.

Html:n ja CSS:n yksityiskohtia ei kannata opetella ulkoa, vaan niiden rakenteet ja käytetyt elementit voi tarkistaa erilaisista tietokoosteista. 

Esimerkiksi

• w3c
  *

html-sivujen ja tyylitiedostojen tekeminen

Käsitteet: Palvelin ja selain

Tavoite

• kohderyhmä
• käyttötarkoitus
• käyttäjien tekniset valmiudet
• rajattu vai yleinen käyttö?
• vuorovaikutteisuuden määrä

Sivujen teko

• WYSIWYG-ohjelmat: sivu nähdään muotoiltuna
• editorit
• muunnosohjelmat

Apuohjelmat

• FTP-ohjelmat
• grafiikkaohjelmat

Tarkistukset ja testaus

Esimerkkejä ja projektiesittelyitä

Lähteet ja lisätietoa

Jukka K. Korpela ja Tero Linjama: XHTML-käsikirja

Lisätietoa kiinnostuneille: Jukka K. Korpelan opas Merkkauskielten idea verkossa