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
- Bush 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
- Ensimmäiset HTML-selaimet perustuivat SGML-standardiin
- TIm Berners-Lee, "webin isä"
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
- Aluksi toimittaja merkitsi latojalle kappaleet, lihavoinnit, kursiivit yms. muotoilut käsin tekstiliuskan marginaaliin
- Myöhemmin tätä varten kehitettiin erityinen merkkauskieli, markup language
- Alun perin typografin tekemistä merkinnoistä otettiin mallia ensimmäisiä ladontaohjelmia laadittaessa
- Samat merkinnät ovat periytyneet edelleen html-kieleen (vrt. <p> kappaleen merkkinä )
html-merkkaus ja ulkoasun muotoilu
- html on yksinkertainen ja helposti opittava merkkauskieli
- html-dokumentti koostuu tekstisisällöstä ja dokumentin rakennetta (ja osittain ulkoasua) kuvaavista merkinnöistä
- tyypillinen rakenne näyttää seuraavalta
<!DOCTYPE HTML [käytetyn HTML:n versio]>
<HTML>
<HEAD>
<TITLE>Tähän otsikko</TITLE>
</HEAD>
<BODY>
Sivun sisältö
</BODY>
</HTML> - 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ä
Lisätietoa kiinnostuneille: Jukka K. Korpelan opas Merkkauskielten idea verkossa
Tyylitiedostot
- 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.
html-sivujen 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
Esimerkkejä ja projektiesittelyitä
Lähteet
Jukka K. Korpela ja Tero Linjama: XHTML-käsikirja