Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

...

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ä.

Ks. Youtubesta: Memex Animation

60-luvulla kehiteltiin alkeellisia hypertekstiohjelmia.Ted Nelson visioi maailmanlaajuista hypermediavarastoa Xanadua, jota kehitellään edelleen. Nykyisin projekti kehittyy eri periaatteella kuin Internet.

Ks. Youtubesta: Ted Nelson demonstrates Xanadu Space

Termi hyperteksti otettiin käyttöön 1965. 

...

Vuonna 1990 termi "World Wide Web" lanseerataan. 

Ks, Youtubesta: The Invention of the World Wide Web

1990-luvulla hypertekstiin perustuvien web-selainten käyttö lisääntyi räjähdysmäisesti, koska helppokäyttöiset ja monipuoliset selaimet yleistyivät. Ensimmäiset suomalaiset web-sivut julkaistiin 1993.

...

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

Ulkoasun muotoilu CSS:llä

CSS

CSS (cascading style sheet) on yksinkertainen menetelmä, jolla muotoillaan web-sivujen ulkoasu.

Se 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 web-sivun ulkoasua koskevat määritykset tehtiin HTML-merkkauksen joukkoon. Kun sivustoista tuli yhä vain laajempia, sivustojen ylläpito alkoi käydä rasittavaksi. Jos sivuston taustaväriä haluttiin muuttaa, se täytyi käydä erikseen muuttamassa jokaiseen dokumenttiin, jotta sivuston ulkoasu pysyisi yhtenäisenä.

CSS:n käytön hyödyt

Monet CSS:llä tehtävät asiat voidaan tehdä myös HTML:llä HTML-koodin joukkoon.

CSS on kuitenkin joustavampi useiden määritysten suhteen. Esimerkiksi taustavärin voi html:ssä määritellä vain sivulle, taulukolle tai taulukon solulle. CSS:llä taustavärin voi määritellä mille tahansa elementille.

CSS on myös monipuolisempi ja tarjoaa ulkoasun muotoiluun enemmän mahdollisuuksia kuin HTML. CSS on suunniteltu ulkoasun säätelyyn. HTML on alunperin suunniteltu nimenomaan tekstin loogisen rakenteen merkkaukseen. Tällä hetkellä HTML:ää kehitetään taas siihen suuntaan, että HTML toimii vain rakenteen merkkauksena ja kaikki ulkoasua koskevat määritykset tehdään CSS:llä.

CSS:n avulla on myös helpompaa hallita suurten sivustojen tyylejä, koska tyylimääritykset voidaan kirjoittaa vain yhteen tiedostoon, johon viitataan jokaiselta sivulta.

Web-suunnittelija voi itsekin tarjota useita tyylitiedostoja erityyppisiin päätelaitteisiin. 

Esimerkkejä:

Taitavaa tyylitiedostojen käyttöä verkossa:

http://www.csszengarden.com/
http://cssmania.com/
http://www.csstea.com/
http://glish.com/css/

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.

Lähteet

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