Verkkojulkaisun perusteet

Verkkosivujen tuottaminen XHTML-merkkauskielellä

Verkkosivuja tuotetaan käyttämällä nk. XHTML-merkkauskieltä (eXtensible HyperText Markup Language). XHTML-muotoon kirjoitettu verkkosivu koostuu erilaisista elementeistä, joilla merkataan tekstistä eri rakenteita, esimerkiksi otsikoita ja väliotsikoita. Alla on esimerkki siitä, miten verkkosivun pääotsikko voitaisiin merkata h1-elementillä (1-tason otsikko eli heading 1):

<h1>Santa's Little Helper</h1>

XHTML-sivut ovat siis tavallisia tekstitiedostoja, jossa XHTML-kieliset elementit on lisätty tekstin joukkoon määrittämään sisällön eri osia verkkoselainta varten. Luettaessa verkkosivua selaimella, selain tulkitsee verkkosivulla olevan XHTML-koodin ja esittää sivun kuvaillun rakenteen mukaisesti.

XHTML-merkkauskieli mahdollistaa myös erilaisten sisältöjen linkittämisen verkkosivulle. Voit luoda sivullesi linkkejä toisille sivuille tai vaikkapa kuva-, videoleike- tai äänitiedostoihin. Kuvia ja muita tiedostoja ei siis tallenneta itse verkkosivun sisälle, kuten tapahtuu esimerkiksi tekstinkäsittelyohjelmissa: verkkosivuja tehtäessä kuva- ym. sisällöt tallennetaan erillisiin tiedostoihin ja niihin viitataan sivun XHTML-koodista. Seuraavan esimerkin “Take a look at my photos!”-teksti näkyy linkkinä, joka osoittaa photos.htm-nimiselle sivulle:

<a href="photos.htm">Take a look at my photos!</a>

Vaikka XHTML voi kuulostaa alussa monimutkaiselta, totuus on aivan toinen: kielenä XHTML on hyvin yksinkertainen, eikä sivuja tehdäkseen tarvitse osata kuin muutamia XHTML-kielen peruselementtejä. Lisäksi apunasi on toisten ihmisten tuottamien sivujen koodi: voit tarkastella minkä tahansa verkkosivun koodia selaimesta “View source”- tms. käskyn avulla. Esimerkiksi Firefox-selaimessa saat sivun koodin näkyville View (Näytä) -valikon Page Source (Sivun lähdekoodi) -toiminnolla.

Verkkosivuja tuottaessasi sinun tulisi erottaa sivujesi rakenne ja ulkoasu toisistaan. Sivujen ulkoasun määrittämistä varten on järkevää käyttää nk. CSS-tyylejä sen sijaan, että merkkaisit sivun ulkoasun XHTML-koodin joukkoon. CSS-tyylitiedoston käytön periaate on rinnastettavissa mm. diaesityksen tai tekstinkäsittelyohjelman tyyleihin: määritä ulkoasu yhdessä CSS-tiedostossa ja linkitä määrittämäsi tyyli sitten haluamaasi kohtaan sivua: tästä aiheesta kerrotaan lisää Tyylitiedostojen käyttö – CSS -sivulla.

Seuraavilla sivuilla kerrotaan siitä, kuinka voit tehdä oman verkkosivun valmista XHTML-sivupohjaa muokkaamalla. Tutustu kuitenkin ensin välineisiin, joita sivujen tekeminen edellyttää.

Verkkosivujen tuottamisen välineet

Sinun kannattaa aloittaa sivujen luominen tekstieditorilla, esimerkiksi Notepadilla tai emacsilla, jotta pääset sisälle XHTML-kielen perusteisiin. Tuntemalla XHTML-perusteet vältät ja kykenet ratkaisemaan useita julkaisuun liittyviä ongelmia. Lisäksi XHTML-kielen perusteiden tunteminen tekee sivujen editoinnin mahdolliseksi lähes millä tahansa tekstin muokkaamiseen soveltuvalla ohjelmalla.

Edetessäsi pidemmälle verkkosivujen tuottamisessa, sinun kannattaa tutustua myös sivueditoreihin, jotka ovat laajojen sivustojen tuottamiseen kehitettyjä ohjelmia. Sivueditoreissa on erilaisia aputoimintoja mm. XHTML-koodin kirjoittamiseen sekä mahdollisuus muokata sivua näköisnäyttö- eli wysiwyg-tilassa (What You See Is What You Get). Näköisnäyttötilan avulla voit muokata sivua näkemättä XHTML-koodia lainkaan.

Useat eri ohjelmat kykenevät tallentamaan tiedostoja HTML- tai XHTML-muotoon (HTML on XHTML:ää edeltävä merkkauskieli). Esimerkiksi tekstinkäsittelyohjelmien käyttö sivujen luomiseen ei kuitenkaan ole suositeltavaa, koska ne eivät yleensä tee standardinmukaista XHTML-koodia.

Laajempia verkkosivustoja päivitetään nykyään verkkopalvelimella toimivilla sisällönhallinta- ja julkaisujärjestelmillä. Esimerkiksi Helsingin yliopiston Flamma-intranet on laaja sisällönhallintajärjestelmä, jossa on suuri joukko eri henkilöitä sisällön tuottajina. Blogit ja wikit ovat samalla periaatteella toimivia julkaisujärjestelmiä.