Aloitus
Kurssin rakenteen läpikäynti
Jakaudutaan ryhmiin
Internetin ja hypertekstin kehittyminen
Käsitteet: Internet, WWW, hyperteksti
Hyperteksti ja Web
Marcel Proust kirjoitti elämäntyönään hypertekstuaalista kirjaa jo 1871-1922. Kirja ei koskaan valmistunut. Sivuja ja erilaisia lappusia kertyi kuitenkin noin 3000 kappaletta.
Jäsennellymmin hypertekstin 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ä.
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.
1980-luvulla Tim Berners-Lee kehittää ensimmäisen hypertekstiohjelman CERNille.
Vuosina 1985-87 kehiteltiin henkilökohtaisissa koneissa käytettäviä hypertekstiohjelmia, jotka toimivat esikuvina multimediakehittimille ja web-selaimille. 1987 julkistettiin Applen suosittu hypertekstiohjelma HyperCard, joka toimi esikuvana ensimmäisille www-selaimille.
Vuonna 1989 Tim Berners-Lee kehittelee hypertekstijärjestelmää CERNin käyttöön.
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.
...
Vuonna 2004 Tim Berners-Lee sai suomalaisen Millennium-palkinnon webin kehittämisestä.
- Internet History / Freesoft
- A little history of World Wide Web / W3C, "webin isä" ...Standardointi, w3:n synty...
Miten HTML-merkkaus keksittiin?
...
Alun perin typografin tekemistä merkinnoistä otettiin mallia ensimmäisiä ladontaohjelmia laadittaessa. Samat merkinnät ovat periytyneet edelleen html-kieleen.
...
HTML (HyperText Markup Language) on Web-sivujen julkaisukieli.
Se on yksinkertainen ja helposti opittava merkkauskieli, jota käyttämällä voidaan julkaista erilaisia sisältöjä Webissä. HTML ei siis ole ohjelmointikieli.
HTML-dokumentti koostuu tekstisisällöstä ja dokumentin rakennetta (ja osittain ulkoasua) kuvaavista merkinnöistä.
- HTML-kielessä ei käytetä komentoja, vaan tekstin osia merkataan ns. tageilla.
- Tagit erotetaan varsinaisesti sisällöstä alkutagilla < ja lopputagilla >.
- Tagien väliin tulee merkintä, jolla rakenne kuvataan
- Esimerkiksi <TITLE> Otsikko</TITLE>
Tyypillinen HTML-dokumentin rakenne näyttää seuraavalta
...
| Wiki Markup |
|---|
<\!DOCTYPE HTML \[käytetyn HTML:n versio\]>
<HTML>
<HEAD>
<TITLE>Tähän otsikko</TITLE>
</HEAD>
<BODY>
Sivun sisältö
</BODY>
</HTML> |
Tagien avulla HTML-dokumentille luodaan rakenne, jota kutsutaan puurakenteeksi.
HTML on siis loogiselta rakenteeltaan puumainen, vaikka se kirjoitetaan peräkkäistekstinä.
- Kokeillaan html-merkkausta
- Katsotaan erilaisten sivujen lähdekoodia ja ulkoasua
CSS
CSS (cascading style sheet) on yksinkertainen menetelmä, joilla 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ä.
Tyylitiedostot kehittyivät
CSS:n käytön hyödyt
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
- w3.org
HTML-sivujen ja tyylitiedostojen tekeminen
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
- Validointi (johon palataan myöhemmin tarkemmin)
- Eri selaimet ja käyttöjärjestelmät
Esimerkkejä
Taitavaa tyylitiedostojen käyttöä verkossa:
http://www.csszengarden.com/
http://cssmania.com/
http://www.csstea.com/
http://glish.com/css/
Lähteet
...
Jukka K. Korpela ja Tero Linjama: XHTML-käsikirja
Lisätietoa kiinnostuneille: Jukka K. Korpelan opas Merkkauskielten idea verkossa Korpela: CSS verkkosivujen muotoilussa