Rakennetta mukaan (HTML)

Sisällys

• Mikä HTML on?
• Johdanto: esimerkkejä saman jutun eri esitysasuista
• Miten mukautuvuus saavutetaan
• Peruskäsitteet: elementit ja tägit
• Keskeisimpiä elementtejä
• Erilaisia listoja (luetelmia)

Mikä HTML on?

HTML on lyhyesti sanottuna eräs rakenteinen dokumenttien muoto, joka on käsiteltävissä mitä erilaisimmissa tilanteissa, kuten näytettävissä isolla tai pienellä kuvaruudulla, esitettävissä ääneen tai sokeainkirjoituksella ja analysoitavissa ohjelmilla, jotka laativat tietokantoja dokumenttien sisällöstä. HTML-dokumentti sisältää tekstiä, rakenteen osoittavaa merkkausta (esim. <h2>Rakennetta mukaan (HTML)</h2> merkkaa tekstin 2. tason otsikoksi) sekä erityyppisiä viittauksia muihin dokumentteihin, jotka voivat olla myös esim. kuva- tai äänidataa. HTML:n yksityiskohtainen kuvaus sisältyy HTML 4 -spesifikaatioon.

HTML:ää kutsutaan usein kieleksi (language), tarkemmin sanoen merkkauskieleksi (markup language); itse nimi HTML johtuu alun perin sanoista HyperText Markup Language. ATK-alalla käytetty kieli-nimitys on usein varsin harhaanjohtava, etenkin, jos HTML sekoitetaan ohjelmointikieliin tms. Selvempi on siis puhua HTML:stä tiedostomuotona tai tarkemmin sanoen dataformaattina, jossa tekstin oheen on liitetty sen rakennetta osoittavia merkintöjä.

Tarkkoja ollaksemme HTML:n uusin virallinen versio on XHTML 1.0. Kyseessä on kuitenkin vain HTML 4:n uudelleenmäärittely käyttäen XML-metakieltä; itse kielen sisällön osalta se viittaa edellä mainittuun HTML 4 -spesifikaatioon. Tähän sisältyy lähinnä joukko rajoituksia, kuten se, että jotkin asiat pitää kirjoittaa pienin kirjaimin, kun ennen saattoi käyttää isojakin. XML:stä kertoo esimerkiksi Jouni Heikniemen juttu Mikä on XML?

Virallisin tietolähde HTML:ää koskevissa asioissa on W3C:n HTML-aiheinen sivusto, josta siis kannattaa tarkistaa kulloinkin tilanne, jos epäselvyyttä syntyy. HTML:stä olemassa myös virallinen kansainvälinen standardi, nimittäin ISO 15445, joka on määritelty HTML 4.0:n Strict-version osajoukkona; sen käytännön merkitys lienee varsin pieni. Ja mainitaksemme asian, joka vähentää sekavuutta: erinomainen HTML 4:n kuvaus, joka on monin osin helppolukuisempi kuin virallinen spesifikaatio, on WDG:n HTML 4.0 Reference. Tosin se on HTML 4.0:n tasolla, kun uusin versio on 4.01, mutta erot ovat melkoisen pieniä.

HTML:n luonteen ja mahdollisuuksien ymmärtäminen edellyttää, että nähdään, miksi HTML on suunniteltu sellaiseksi kuin on - jossakin mielessä hyvin alkeelliseksi ja rajoittuneeksi. Muutoin sen monet vahvuudet näyttävät heikkouksilta ja puutteilta. Niinpä tämä luku alkaakin kuvauksella siitä, mitä HTML:n yksinkertaisuus mahdollistaa.

Johdanto: esimerkkejä saman jutun eri esitysasuista

Muunnamme edellä mainitun reseptitekstin HTML-muotoiseksi dokumentiksi. Tässä vaiheessa ehkä jo haluat vilkaista, miltä tulos näyttää selaimellasi; se on osoitteessa http://jkorpela.fi/webjulk/jambalaya.html
Seuraavassa on lisäksi kaksi esimerkkiä siitä, miltä dokumentin alku saattaa näyttää muilla selaimilla. Tässä on tarkoituksellisesti valittu selaimen ikkuna melko kapeaksi. Vasemmalla on esitysasu Opera-selaimella eräin asetuksin, oikealla taas Netscape 4:n käyttämä esitysmuoto.

Kuvat havainnollistavat sitä, että HTML-dokumentti mukautuu erilaisiin esitystilanteisiin, esimerkiksi erilevyisiin ikkunoihin. Selaimet saattavat esittää esimerkiksi otsikot ja luetelmat ulkonaisesti eri tavoilla. Kirjasinlajit ja -koot voivat vaihdella, samoin sisennykset, värit jne.

Seuraavassa on vertailun vuoksi sivun alkuosan esitys suunnilleen sellaisena, kuin eräs ensisijaisesti tekstipohjaiseen selailuun suunniteltu ohjelma, Lynx, sen näyttää:

                           Jambalaya suomalaiseen makuun à la Yucca (p1 of 2)

Jambalaya suomalaiseen makuun à la Yucca

   Tämä on miedohko, suomalaiseen makuun sopiva muunnelma jambalayasta. Tässä
   se valmistetaan kahdessa eri astiassa siten, että ruuan perusosa on
   lastenkin mieleen ja toinen osa sisältää voimakkaammasta mausta pitäville
   lisän, joka voidaan yhdistää perusosaan lautasella.

  Ainekset (määrät neljään annokseen)

     * 2 dl pitkäjyväistä riisiä (risottoriisiä)
     * 2 sipulia

Ja vielä yksi esimerkki: kuva siitä, miltä sivun alku voisi näyttää WebTV:ssä (näyte on tehty WebTV:tä simuloivalla PC WebTV Viewer -ohjelmalla):

Jokin muu selain voisi esittää tekstin kirjasinlajien suhteen vielä karummin, ilman lihavointejakin, mutta esittäen eritasoiset otsikot eri väreillä. Vielä yhtenä tapana esittää HTML-dokumentin voi mainita ääneen lukemisen, jolla on suuri merkitys näkövammaisille. Ja eikö olisi mukavaa, jos voisit käskeä "selaimen" lukemaan sinulle reseptiä ääneen, kun teet sen mukaan ruokaa? Tietenkin niin, että voit käskeä sitä pitämään taukoa.

Viime kädessä on jokaisen lukijan tai katsojan päätettävissä, miten haluaa selaimen muotoilevan dokumentit, joita hän katselee. Hän voi valita itseään miellyttävän kirjasinlajin (niistä vaihtoehdoista, joita hänen koneessaan on), asettaa kirjasinkoon sopivaksi, määrätä taustavärin jne. - tietenkin niissä puitteissa, jotka käytettävä laite ja ohjelma tarjoavat.

Miten mukautuvuus saavutetaan

Miten edellä havainnollistettu on saavutettu? Yksinkertaisuudella ja loogisuudella. HTML-dokumentti sisältää varsinaisen tekstin lisäksi merkintöjä, jotka mm. ilmoittavat eri tekstipalasten rakenteellisen aseman - puuttumatta mitenkään siihen, mikä niiden ulkoisen esitysasun pitäisi olla.

Seuraavassa käsittelemme muutamia keskeisiä edellä mainituista merkinnöistä eli merkkauksesta (markup). Sitä ennen kuitenkin huomautus: Mukautuvuus ei toki ole ehdotonta. Esimerkiksi ikkunaa ei voida supistaa mielivaltaisen kapeaksi ilman, että luettavuus kärsii vakavasti. Riippuu jutun rakenteesta, missä määrin se asettaa joitakin vähimmäisvaatimuksia. Nämä vaatimukset kannattaa tietysti pitää niin vähäisinä kuin mahdollista. Mutta esimerkiksi tällä sivulla on edellä esimerkkikuvia, jopa kaksi kuvaa rinnakkain (taulukossa). Tämä tekee väistämättä lukemisen kapeasta ikkunasta hankalaksi, koska käyttäjä voi joutua "skrollaamaan vaakasuorassa" nähdäkseen kuvat kokonaan. Aiheesta on hiukan lisää WDG:n Web Authoring FAQ:n kohdassa For what screen size should I write?

Yksinkertainen mutta tärkeä osa mukautuvuutta on kappaleiden muotoilu. Kun selain käsittelee dokumentissa olevan tekstikappaleen, se ei kiinnitä huomiota siihen, miten teksti jakautuu eri riveille HTML-dokumentissa. Rivijaolla siinä ei ole mitään tekemistä sen kanssa, miten teksti rivittyy kuvaruudulle tai paperille. Sen sijaan selain sisäisesti jäsentää tekstin sanojen jonoksi ja "latoo" tekstin niin, että kullekin riville tulee sen verran sanoja kuin sille mahtuu. Tämä tietenkin merkitsee, että käyttäjän kannattaa pitää selaimen ikkuna niin leveänä, että teksti on mukavaa lukea.

Tarkkaavaisen lukijan mieleen ehkä tulee parikin kysymystä. Eikö olisi parempi, että käyttäjä voi säätää tekstipalstan leveyden pienemmäksi kuin ikkunan leveys? Silloinhan sivu, jolla on esim. leveitä kuvia tai taulukoita, olisi paremmin luettavissa. Ja eikö olisi parempi, että selain jakaisi pitkiä sanoja eri riveille? Molempiin kysymyksiin vastaus on, että niin olisi, mutta toistaiseksi niihin ei juurikaan ole toimivia teknisiä ratkaisuja.

Peruskäsitteet: elementit ja tägit

Esimerkkidokumentissamme pääotsikko on merkitty seuraavasti:

<h1>Jambalaya suomalaiseen makuun à la Yucca</h1>

Tämä ilmoittaa, että kyseessä on 1. tason otsikko, englanniksi heading. (Otsikkotasoja käsitellään seuraavassa alaluvussa.) Merkintä <h2> eli h2-elementin alkutägi aloittaa rakenteen ja merkintä </h2> eli kyseisen elementin lopputägi lopettaa sen. Niiden välissä on elementin sisältö. Yleisesti HTML:ssä elementti koostuu alkutägistä, elementin sisällöstä ja lopputägistä. (Tähän on muutama poikkeus: eräät elementit kuten br koostuvat pelkästä alkutägistä. Nämä ns. tyhjät elementit ovat HTML 4.0:ssa seuraavat: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param.)

Otsikkotekstissä esiintyvän aksentillisen kirjaimen à tuottamista käsitellään jäljempänä kohdassa "Ääkköset" ja muut ISO Latin 1 -merkit.

Keskeisimpiä elementtejä

Esimerkkidokumenttimme varsinaisessa sisällössä tulemme toimeen aivan muutamalla elementtityypillä:

h1

ensimmäisen tason otsikko (heading)

h2

toisen tason otsikko

h3

kolmannen tason otsikko

p

kappale (paragraph)

ul

luetelma eli "järjestämätön" lista (unordered list)

ol

numeroitu eli "järjestetty" lista (ordered list)

li

listan alkio (list item)

Kaikki nämä elementit ovat samaa muotoa, kuin edellä esitettiin: alkutägi, sisältö, lopputägi.

Näistä ul- ja ol-elementit ovat sikäli muista poikkeavia, että niiden sisältönä ei ole tavallista tekstiä vaan sisältö koostuu li-elementeistä - joiden sisällä sitten on tekstiä. Esimerkki:

<ul>
<li>iso paistinpannu, miel. korkealaitainen ja kannellinen</li>
<li>keskikokoinen paistinpannu.</li>
</ul>

Tässä on yksi ul-elementti, jonka sisältönä on kaksi li-elementti. Siis luetelma, jossa on kaksi alkiota.

Lopputägi ei useinkaan ole pakollinen. On kuitenkin helpompi opetella kirjoittamaan aina lopputägi kuin opetella melko mutkikkaat säännöt siitä, milloin sen saa jättää pois ja milloin ei. Sitä paitsi XHTML:ssä lopputägi on pakollinen.

Nyt voitkin rauhassa tutustua esimerkkidokumentin varsinaiseen sisältöön HTML-koodina. Se on osoitteessa http://jkorpela.fi/webjulk/jambabody.html, ja alkaa seuraavasti:

Erilaisia listoja (luetelmia)

Edellä kuvattiin lyhyesti eräs listarakenne, ul-elementti. Se sopii hyvin moniin tarkoituksiin ja vastaa "ranskalaisten viivojen" käyttöä, paitsi että selain tyypillisesti ei käytä viivoja vaan pallukoita. Kannattaa kuitenkin katsoa, missä yhteyksissä luetelmia käyttää. Jos luetelma olisi lyhyt, voisi olla sujuvampaa kirjoittaa se normaaliksi tekstiksi. Vertaa seuraavia:

Muita vaihtoehtoja luetelmien esittämiseen ovat

• numeroitu lista eli ol-elementti, joka vastaa ul-elementtiä muutoin, mutta selain liittää listan alkioihin juoksevan numeroinnin 1, 2,...
• peräkkäisiä kappaleita (p-elementtejä) tai jopa osia, joista kukin koostuu otsikkoelementistä ja yhdestä tai useammasta kappaleesta; tämäntapaista yksinkertaista peräkkäisyyttä kannattaa harkita sitä vakavammin, mitä laajemmiksi luetelman kohdat muodostuisivat
• taulukot, jotka sopivat erityisesti silloin, kun luetelman eri osilla on sama sisäinen rakenne; ks. erityisesti kohtaa Taulukot ja luettelot
• määritelmälista eli dl-elementti, jonka sisällä on (yleensä vuorotellen) dt-elementtejä ja dd-elementtejä, jotka sisältävät määriteltäviä termejä (definition term) ja niiden määritelmiä (definition data).

Valinta näiden välillä on usein makuasia ja voi riippua myös käytännön näkökohdista kuten siitä, millaisena selaimet oletusarvoisesti esittävät eri rakenteet. Erityisesti huomattakoon, että määritelmälistan tyypillinen esitysasu sopii huonohkosti lyhyiden määritelmien esittämiseen.

Jos vaihtoehtojen moninaisuus hämää, niin voi noudattaa yksinkertaista sääntöä: luetelma ul-elementiksi, ellei ole ilmeistä syytä, miksi se olisi huono ratkaisu.