Tunnetuin esimerkki hypertekstistä on World Wide Web ja navigointiin liittyvistä ohjelmista ja ohjelmistovaatimuksista ovat erilaiset selainohjelmat (esim. Mozilla, Internet Explorer). Vaikka hypermediaon popularisoitu WWW:n yhteydessä, sen juuret ulottuvat pidemmälle. 1960- ja 1970 lukujen taitteessa Ted Nelson lanseerasi termin hyperteksti. Mutta idean isänä voidaan pitää Vannevar Bushia. Hän esitteli vuonna 1945 Atlantic Monthly lehdessä olevassa artikkelissaan "As We May Think" kuvitteellisen Memex-laitteensa, jonka avulla saatettiin selata ja hallita iso joukko dokumentteja mm. linkkien avulla. Perusajatuksena Bushilla oli, että dokumenttien varastointisysteemin tulisi perustua ihmisten ajattelun malliin ja siksi hän käytti linkkejä. Toinen alkuaikojen hypertekstin ominaispiirre oli käyttäjien linkkien lisäämisen dynaamisyys, näin ollen linkkirakenne kehittyi yhteisön käyttäjien vuorovaikutuksen seurauksena. Hypertekstin ja -median ominaispiirteisiin kuuluukin täten käyttäjän mahdollisuus valita etenemispolkunsa oman ajattelunsa kannalta edullisimman mukaan.

1970- ja 1980-lukujen taitteessa päivän valon sai usea kokeellisen hypertekstin ja hypermedian joukko, saavuttamatta suurempaa suosiota. Paremman käyttöliittymänsä ansiosta Apple julkaisi vuonna 1987 Hypercardin. Kehitys jatkui edelleen aikaisemmin mainittuun,1993 Tim Berners-Leen julkaisemaan World Wide Webbiin.

Hypertekstin luonne

Tekstistä tulee hypertekstiä, kun siihen lisätään assosiaatioita/linkkejä.Hyperteksti ”rikkoo” tekstin lineaarisuutta tarjoamalla vaihtoehtoisia etenemispolkuja. Lineaarinen toteutus ja hypertekstitoteutus voisi näyttää tältä. Lineaarisen tekstin ja hypertekstin erilaisuus perustuu siis solmujen välillä liikkumiseen. Kun lineaarisessatekstissä solmuun voidaan tulla edellisestä solmusta, seuraavasta solmusta tai indeksin perusteella, niin hypertekstissä solmusta voidaan päästä useaan solmuun ja päin vastoin. Chapman ja Chapman kritisoivat, että on yleinen harhaluulo, että ei-lineaarinen selausmahdollisuus on hypertekstille ominainen innovaatio. He lainaavat Nielseniä seuraavasti:"Perinteinen teksti, onpa se sitten tulostetussa tai sähköisessä muodossa, on peräkkäistä. Tämä tarkoittaa sitä, että on olemassa yksinkertainen lineaarinen järjestys, joka määrittelee tekstin lukemisen järjestyksen. Ensin luetaan sivu yksi, sitten sivu kaksi jne."

Poiketen taas edellisestä, jokaisen aikakauslehden kohdalla ei päde tekstin yksinkertaisen lineaarinen järjestys. Aikakauslehden artikkelithan voidaan lukea missä järjestyksessä tahansa ja lukea vain ne kohdat, jotka halutaan. Myös encyclopedia (esim. Wikipedia) on esimerkki ei-lineaarisesta, ristiinviitatusta materiaalista. Tietyt novellitkin käyttävät ei-lineaarista rakennetta, kuten Vladimir Nabokovin "Pale Fire" ja Flann O'Brienin "The Third Policeman".

Linkit ovat hypertekstissä ja -mediassa keskeisessä asemassa. Hypertekstilinkit ovat yhteyksiä solmukohtien välillä. Hypertekstissä linkin alkupistettä kutsutaanlähteeksi ja paikkaa, johon linkki lopulta johtaa kohteeksi. Käyttäjä liikkuu näiden linkkien avulla tiedon osasta toiseen. Linkki on tavallisesti erotettu jollain tavalla, esimerkiksi värien käytöllä. Joskus pelkästään hiirellä osoittaminen kertoo linkin olemassaolon. Linkki voi osoittaa joko saman sivun eri kohtaan tai toiseen sivustoon tai tiedostoon (kuva,animaatio, ääni jne.).

Esimerkkikuvan erilaisista linkkirakenteista löydät täältä

Koska hyperteksti on moninaisempi perinteiseen tekstiin verrattuna, täytyy hypertekstin käyttöliittymää mietittäessä ottaa huomioon muutakin kuin vain ulkonäölliset seikat. Eli huomioitavia asioita ovat: linkin näkyvyys, linkin kohteen saatavuus, perumisen mahdollisuus ja sivustolle eksymisen ehkäisy. Lisäksi täytyy huomioida ohjelmistovaatimukset, jotta sivuston navigointi onnistuu ongelmitta.

Hypertekstistä tulee puolestaan hypermediaa, kun siihen yhdistetään erilaisia elementtejä kuten ääntä, kuvia, animaatiota, liikkuvaa kuvaa ja reaaliaikaistakuvaa. Näistä tulee tarkemmin tämän kurssin myöhemissä osioissa.

Muotoilukielet

Muotoilukielten avulla merkataan dokumentissa olevat eri tyyppiset elementit niin, että dokumenttia käsittelevä ohjelma (esimerkiksi Firefox Mozilla selainohjelma) kykenee näiden merkkausten perusteella tunnistamaan elementin tyypin ja käsittelelemään sitä tarkoituksenmukaisesti.

Teksti on keskeisessä asemassa hypermediassa. Suunnitellessa ja toteuttaessa www-sivuja meidän tulee miettiä mm., kuinka asemoimme tekstin kuvaruudulle, millaista kappalejakoa noudatamme,kuinka toteutamme otsikot ja listat jne. Edellisen lisäksi tekstin avulla voidaan kuvata www-sivun rakennetta. Tässä yhteydessä puhutaan ns. tekstipohjaisesta muotoilukielestä (Markup Languages), kuten HTML ja XML.

Tekstiä voidaan käsitellä

• kuvana, jolloin kaikki kuvankäsittelyn mahdollisuudet ovat käytettävissä
• tekstinä, jolloin kaikki tekstinkäsittelyn mahdollisuudet ovat käytettävissä.

Vaikka WWW-sivujen tekeminen merkkauskielillä (tag-pohjaisilla) onkin pääsääntöisesti ongelmatonta, on siinä omat haittansakin, kuten:

• mikä näkyy ruudulla merkkausta kirjoittaessa, ei ole se, miltä lopullinen dokumentti näyttää
• merkkauksen kanssa oltava huolellinen, tietokone ei tunnista merkkausta
• merkkaussäännöt pitää muistaa tai tarkistaa jostain dokumentista.

Edellinen onkin luonut markkinan graafisiin HTML-editoreihin, joille on ominaista se, että mitä näet saat myös tuloksena eli "What You See Is What You Get" (WYSIWYG). Microsoft® Expression® WEb Designer on esimerkkejä tähän tarkoitetusta ohjelmasta. Adoben inDEsign on sivuntaitto-ohjelma. Tag-pohjaisuus on ollut enemmäkin akateemisen ja teknisen sektorin käytössä, mutta HTML on tuonut sen laajemman yleisön tietoisuuteen.

HTML

World Wide Web -järjestelmän hypertekstiominaisuudet perustuvat ns.HTML-sivunkuvauskielen (Hypertext Markup Language)käyttöön. HTML-dokumenttien nimet loppuvat merkkeihin .html tai .htm. Näissä dokumenteissa voi olla ns. hypertekstilinkkejä saman dokumentin eri osiin tai kokonaan muihin dokumentteihin. Täten hypertekstilinkki voisi viitata esimerkiksi tämän dokumentin alkuun.

HTML:n tarkoituksena on esittää dokumentin rakenne, ei niinkään ulkoasua. HTML perustuu muotoilulippuihin (tag), joilla kerrotaan, kuinka teksti ja muut elementit halutaan esittää .HTML sisältää valmiit muotoiluliput, mutta ei tapaa luoda uusia lippuja. HTML jakaa dokumentin elementteihin, jotka tunnistetaan alkulipun ja loppulipun avulla. Lippujen välillä on elementin sisältö. Esimerkiksi tagilla <p> merkataan tekstikappaleen alkuaja tekstikappaleen loppuminen merkataan puolestaan tagilla </p>.

SGML

Vastauksena valtavien dokumenttimassojen käsittelyyn on kehitetty Standard GeneralizedMarkup Language (SGML), joka on yleinen standardi merkkauskielten määrittelyyn ja on HTML:n kaltainen metakieli. SGML kuvaa dokumenttien tietosisältöä dokumenttien ulkoasun sijasta, ja on rakennettu niin, että dokumentti on laajasti käytettävissä eli sama dokumentti voidaan näyttää verkossa, tulostaa paperille, tehdä esityskalvoiksi tai taittaa käyttöohjeeksi. Tieto säilyy samana, esitysmuoto muuttuu.

XML

Extensible Markup Language (XML) on Kehitetty Webbiin monimuotoisten tietoaineistojen esittämiseenja on merkkauskielten määrittelystandardi. XML pohjautuu aikaisemmin mainittuun SGML:ään, muttaon suppeampi. XML antaa mahdollisuuden luoda omia muotoilulippuja.

Miten teen WWW-sivut?

WWW-sivusto koostuu siis HTML-kielisestä tiedostoista, kuva- ja/tai äänitiedostoista. Sivustolla voi olla tekstiä, kuvia, ääntä jne. WWW-sivuja voidaan tehdä käyttäen yksinkertaisia editoreja (esim Telnet-yhteyden kautta pico-editoria) tai paikallisesti esim. muistiota (Notepad, Textpad). Toinen tapa on käyttää erillisiä HTML-editoreja, kuten FrontPage tai DreamWeaver.

WWW-sivun tekemiseen löytyy monipuolisia ohjeita tarvittaessa niin kirjallisuudesta kuin verkostakin. Myös tämän sivuston lopussa on joitakin vinkkejä verkossa oleviin HTML-oppaisiin.

Tähän osioon kuuluva lyhyt oppimäärä HTML-ohjelmoinnin saloihin löytyy täältä.

Käsiteltäviä asioita ovat: teksti, HTML-dokumentin rakenteellisuus, otsikot, linkit, listat, kuvien lisääminen jataulukot sekä tekstitason korostus ja muut elementit.

Kuinka saan omat sivuni verkkoon?

Ennen kuin sivusi ovat kaikkien nähtävillä, tulee ne siirtää ns. webbipalvelimelle. Siihen löytyvät pikaohjeet täältä

Lisämateriaalia

• Chapman N ja J: Digital Multimedia (luku 8 ja luku 9)
• HTML-oppaita:
  • W3C HTML spesifikaatio
  • w3schoolsin sivuilta löytyy mm. hyviä esimerkkejä HTML:stä.
  • Jukka Korpelan ohjeita WWW-sivujen tekemiseen
  • Markku Immosen, HTML-elementit
  • HTMLgoodies
• Käytettävyysguru Nielsenin artikkeleita liittyen www-suunnitteluun