Jukka Tujulan sivusto / Tietokonerävellys: Johdanto kotisivujen tekemiseen

Johdanto kotisivujen tekemiseen

Toimivat sivut lyhyt oppimäärä

Tämä aikanaan varsin suosittu artikkeli on kirjoitettu pääosin 90-luvun lopussa, enkä päivitä sitä muuten kuin tarkistamalla linkit satunnaisesti. Kirjoituksen tarkoituksena on ollut opastaa tekemään toimivia perussivustoja.

Sisältö:

Mitä tarvitset?

Tarvittavat ohjeet ja ohjelmat saat ilmaiseksi webistä.

Kotisivuja tehdään HTML-kielellä (HyperText Markup Language), joten ensin on hyvä lukea HTML-kielen perusteet, tässä tapauksessa Juhani Marttilan tiivis esitys aiheesta.

Web-julkaisemisen opas on Jukka Korpelan kirjoittama asiantunteva sivustojen tekoa kokonaisuudessaan käsittelevä opas. Varsinkin sen ensimmäinen osa sopii hyvin aloittelijalle, mutta myöskin monelle uusmedia-ammattilaiselle tekisi hyvää perehtyä tähän laajaan ja perusteelliseen oppaaseen.

Sivuja voi tehdä aivan hyvin Windowsin Muistiolla (Notepad), mutta parempi on valita tehtävään siihen tarkoitettu työkalu. On olemassa hyviä kotisivujen tekemiseen tarkoitettuja tekstieditoreja, esimerkiksi Arachnophilia ja HTML-Kit, jolla voi paitsi tehdä sivuja myös tarkistaa lähdekoodin. Annetun ulkoasun perusteella valmista koodia tekevää ns. wysiwyg -editoria (esimerkiksi FrontPage Express) ei kannata käyttää, jos haluaa päästä jyvälle hommasta. Sitten kun perusteet ovat hallussa voi jokainen valita mieleisensä apuvälineen: teksti- tai wysiwyg -editorin.

Jos ei ole omaa nettiyhteyttä ja sen mukana tulevaa tilaa kotisivuja varten, niin ilmaista tilaa voi etsiä esimerkiksi FreeWebspace.netistä. Kannattaa valita palvelu, joka ei pistä sivuille häiritseviä mainosikkunoita eli pop-uppeja. Yleensä sivut lähetetään palvelimelle ftp-ohjelmalla.

Sivujen sisältö

Content is King, eli sisältö rulettaa.

Liikkeelle lähdetään sivuston sisällöstä ja tähän kannattaa todella panostaa. Sisältö on usein tekstiä, mutta se voi olla myös esimerkiksi valokuvia, grafiikkaa tai musiikkia. Hyvä ulkoasu voi tuoda sisällön paremmin esille, mutta sisällötön sivu on turha oli se minkä näköinen hyvänsä. Sivujen aihe voi olla mikä tahansa, mutta on parempi kertoa jostain suppeasta aiheesta kaikki, kuin kaikesta vähän. Erityisesti ei kannata tehdä teiniportaalia eli sivua joille on linkitetty päivän uutiset, säätiedot, TV-ohjelmatiedot yms. Miksi kukaan menisi katsomaan näitä asioita jonkun yksityisen henkilön sivuilta, kun yrityksillä on ylivoimaiset resurssit ylläpitää yleisportaaleja? Suppealla erikoisalalla taas kuka tahansa pääsee melko helposti guruksi tekemällä aiheesta kattavan selvityksen sivuilleen.

Kotisivuilla voi esitellä itseään, harrastuksiaan tai mielipiteitään eri asioista, tai sitten käyttää koko sivut jonkin itseä kiinnostavan asiakokonaisuuden kunnianhimoiseen esittelyyn. Webistä löytää lähes mistä tahansa aiheesta sivustoja, mutta ei useinkaan hyviä eikä varsinkaan suomeksi, joten näihin kannattaisi panostaa. Itse asiassa etsittäessä tietoja jostain hyvin tunnetusta asiasta - esimerkiksi The Beatles - ja vielä eniten linkitetyiltä sivuilta saa varautua käymään runsaasti sivustoja läpi ennen kuin löytää edes kaikki perusasiat. Joten kuka tahansa riittävän motivoitunut henkilö pystyy tekemään webin parhaat The Beatles sivut!

Oman persoonallisen jäljen tulisi näkyä sisällössä, olipa se sitten pakinoita, valokuvia, kotipaikan historiaa, juttua putkiradioista tai Tarzanin kielen sanakirja. Ei ole kuitenkaan huono ajatus tehdä kotisivua, jolla on ainoastaan oma nimi, valokuva ja yhteystiedot. Tällaisella sivulla on tietoa, jota ei muualta webistä ole saatavissa, ja siitä voi olla hyötyä ihmisille. Kannattaa siis tehdä sivut aiheesta, josta kukaan muu ei ole hyviä sivuja tehnyt ja josta tietää jotain, sekä nähdä vaivaa sisällön suhteen. Tämä voi olla esimerkiksi webissä tai kirjastossa tehtävää lähdeaineiston tutkimista.

Nuorison suosimat coolit saitit eli peelosivut sisältävät usein tietokoneeni-, MP3-, linkit-, vieraskirja-, näin saat rahaa helposti- ja postituslistasivut, jotka ovat vielä täynnä mainosbannereita sekä webistä imuroituja animaatioita ja scriptejä. Siis tehdään useita sivuja ilman minkäänlaista itse tehtyä sisältöä. Linkit ovat myös usein samoja: Google, MikroBitti, MTV3... Oikeinkirjoitus näillä kotskasivuilla on usein sellaista, että yhdyssanat on kirjoitettu erikseen, eikä isoja kirjaimia - ainakaan oikeissa paikoissa - käytetä (ns. lappeen Ranta -syndrooma). Tällaisissa sivuissa on aina myös framet, jolloin hakukoneiden tuloksissa näkyy noframes -osion sisältö tyyliin:

1. Juho "Sigismundo" Virtasen kotisivut
SELAIMESI EI TUE KEHYKSIÄ! HANKI KUNNON SELAIN HOMO!
URL: koti.mbnet.fi/~sigismundo/
Viimeksi muutettu: 15.01.2000 - sivun koko: 444 tavua - kieli: suomi.

Itsensä esitteleminen idioottina kuuluu toki kansalaisen perusoikeuksiin, mutta saattaisi olla järkevää tehdä se jollain pienemmällä foorumilla kuin webissä.

Varsinkin etusivulle tungetaan usein paljon turhaa, niin että pääasia eli sisältö kärsii. Seuraavassa muutamia asioita, joita sivuilleen ei pidä laittaa.

Esimerkkejä sisällöltään hyvistä sivuista:

Millaiset sivut?

On helppo tehdä toimivat sivut, toimimattomat vaativat jo enemmän työtä ja vaivaa.

Pelkkä hyvä sisältö ei kuitenkaan riitä, vaan pitää myös antaa halukkaille mahdollisuus tutustua siihen. Toimivuus erilaisissa ympäristöissä ja käytettävyys ovatkin sisällön jälkeen tärkeimmät asiat. Jokainen saa tietysti omista kotisivuistaan tehdä niin toimimattomat kuin haluaa, mutta jos sivuston tehtävä on antaa informaatiota tai tuoda rahaa on syytä tehdä sivut, joiden sisältöön mahdollisimman moni pääsee tutustumaan.

Hyvään käytettävyyteen päästään tekemällä sivuista riittävän yksinkertaiset ja selkeät, jotta niiltä löytää helposti etsimänsä tiedot. Toki sivuston tekijä ne itse löytää, mutta muillekin pitäisi antaa mahdollisuus. Yleinen virhe on se, että sivulta ei pääse pois! Selaimellakaan ei voi peruuttaa etusivulle, jos ei ole sieltä koskaan tullut. Henkilökohtaisilla kotisivuilla riittävä navigoitavuus saavutetaan useimmiten niin, että pääsivulta on linkit muille sivuille ja muilta sivuilta pääsivulle.

Sivujen ulkoasun määräämiseksi samaksi kaikissa katseluympäristöissä nähdään usein paljon vaivaa, vaikka paljon hyödyllisempää olisi panostaa toimivuuteen eri ympäristöissä. HTML:n vahvuuksia ei useinkaan ymmärretä: Ajatellaan, että HTML on hyvin rajoittunut sivun taittokieli, vaikka se on tarkoitettu sivujen loogisen rakenteen kuvaamiseen. Jos rakenne on kuvattu oikein ja sivut ovat riittävän yksinkertaiset toimivuus erilaisissa ohjelma- ja laiteympäristöissä saavutetaan. Se mitä luullaan heikkoudeksi onkin vahvuus: Sivut mukautuvat erikokoisiin selainikkunoihin, eri fonttikokoihin, eri resoluutioihin, erilaisiin laitteistoihin jne.

Useat sivut ovat niin täynnä erilaista teknistä kikkailua kuten selainriippuvaista HTML:ää, yhdelle ikkuna- ja fonttikoolle optimoituja taulukoita tai frameja, JavaScriptiä, Java-appletteja, Flashia ym, että ne eivät toimi kenenkään muun kuin tekijänsä koneessa. Kannattaa ensin opetella perusasiat oikein, ja käyttää sivuillaan ainoastaan otsikko- ja kappale-elementtejä, luetteloita, linkkejä ja loogisia korostuksia. Hyvin suuressa osassa sivustoja tehdään näissä perusteissakin virheitä. Vasta tämän jälkeen voi halutessaan lisätä erilaisia näyttäviä kikkoja sivuilleen. Sivuston pitäisi kuitenkin toimia edelleen myös ilman näitä kikkailuja, eli selaimissa jotka eivät niitä tue tai joissa tuki on kytketty pois päältä.

Sivuston tekijä ei voi tietää minkä kokoista fonttia lukija haluaa lukea, eikä myöskään sitä minkä kokoisena hänen valitsemansa fonttikoko lukijan näytöllä näkyy. Niinpä leipätekstin fonttikokoa ei pidä mennä määrittelemään, mutta vähemmän tärkeää tekstiä voidaan pienentää suhteessa leipätekstiin. Koska kuitenkin useat haluavat käyttää sivuillaan lukukelvottoman pientä fonttia käyttävät monet selaimissaan asetusta, joka ohittaa web-sivuilla määritetyt fonttikoot. Tästä taas seuraa se, että sivuilla joilla otsikko on tehty virheellisesti fonttikoko määrityksillä, eikä käyttämällä otsikkoelementtiä, otsikko näkyy samankokoisena muun tekstin kanssa.

Otsikkoelementti: <H1>Otsikko</H1>
Väärä tapa: <FONT size="+5">Otsikko</FONT>

CSS eli tyylisäännöstö on suositeltava tapa vaikuttaa sivujen ulkonäköön, kuten esimerkiksi fontteihin ja marginaaleihin. On kuitenkin huomattava, että kaikki selaimet eivät sitä tue ainakaan samalla tavalla ja kävijä voi jättää huomioimatta sivuston CSS:n. Niinpä CSS on vain tapa ehdottaa sivun ulkonäköä ja sivun tulee olla luettavissa myös ilman sitä. Tämän sivun ulkoasu on ehdotettu tyylisäännöstössä, joka on erillisessä tiedostossa perus.css. Selaimissa joissa CSS-tukea ei saa pois päältä voi katsoa tätä sivua ilman tyylisäännöstöä kopioimalla sivun, ilman tyylitiedostoa eli pelkän HTML -osan, omalle koneelle.

Kannattaa tehdä sivuista selainikkunan kokoon mukautuvat eli skaalautuvat. Itse asiassa sivuista tulee sellaiset automaattisesti, jos niitä ei pyritä optimoimaan jollekin ikkunakoolle määrättyyn leveyteen pakottamalla: Paperisten julkaisujen rajoituksia on turha siirtää webbiin. Ei myöskään kannata pohtia onko yleisin näytön resoluutio 800 x 600 vai 1024 x 768, koska selainta ei läheskään aina käytetä koko näytön kokoisena. Niinpä leveydeltään kiinteää sivua katsottaessa selainikkuna on lähes aina väärän kokoinen: Näytöllä on hukkatilaa tai sisältö ei vierittämättä näy koko leveydeltään.

Taulukoiden väärinkäyttö, eli niiden käyttäminen sivujen taittoon ei yleensä aiheuta pahoja ongelmia, jos taulukkoa ei pakoteta johonkin määrättyyn leveyteen. Kiinteä taulukon leveys saattaa tehdä sivusta lukukelvottoman käytettäessä suurta fonttikokoa. Ei myöskään kannata matkia sanomalehteä ja taulukoilla taittaa tekstiä usealle kapealle palstalle, sillä on aivan eri asia taittaa tekstiä lehteen kuin näytölle. Jokainen tietää minkä levyiseltä paperilta ja minkä kokoisella fontilla luen Hesarin, mutta minkä levyisestä ikkunasta ja minkä kokoisella fontilla luen web-sivuja ei ole muiden tiedossa, eikä varsinkaan muiden määrättävissä.

Kehykset eli framet ovat yleensä haitallisia. Kehyksien haittoja voidaan jonkin verran vähentää oikeaoppisella toteutuksella. Erityisen ärsyttäviä ovat framet, joissa joutuu käyttämään alareunassa olevaa vierityspalkkia, jotta saisi tekstin luettua. Myöskin moniframesysteemi, jossa on tehty ruudun keskelle pieni ikkuna rassaa, koska usein teksti ei mahdu kokonaan ikkunaan ja jos vierityskin on estetty, lukeminen on mahdollista ainoastaan avaamalla frame uuteen ikkunaan. Mitä useampi frame, sitä todennäköisemmin sivut ovat lukukelvottomat. Kymmenen suosituimman sivun joukossa ei ole yhtään kehyksellistä (huhtikuu 1999).

Linkkien toteuttaminen JavaScriptillä on typerää, koska kaikilla ei ole JavaScript-tuki selaimissaan aktivoituna. Tämä johtuu siitä, että surffailu helpottuu ilman sitä. JavaScript-linkit voi tosin tehdä tavalla, joka toimii kaikissa selaimissa. Linkkien tekeminen alaslaskuvalikoilla on lähes poikkeuksetta haitallista, mutta jos niitä haluaa käyttää on syytä tässäkin valita toteutustapa, joka toimii myös ilman JavaScript-tukea. Ei myöskään pidä toteuttaa linkkejä niin, että ne avaavat uuden selainikkunan, koska käytettävyyden kannalta tärkeällä back-nappulalla ei tällöin pääse takaisin lähtösivulle. Kävijähän voi itse halutessaan avata linkin uuteen ikkunaan. Linkkien tunnistaminen linkeiksi on usein ongelma, koska monet haluavat poistaa alleviivauksen niistä. Selkeintä on varata korostuskeinoista alleviivaus linkeille.

Monet käyttävät kotisivuillaan sisääntulosivua, jonka sisältö on tyypillisesti: "Tervetuloa sivuilleni, klikkaa tästä." Tällaiset turhat ovimattosivut karkottavat kävijät tehokkaasti, jos niiden latautuminen kestää kauan. Vielä tehokkaammin pääsee sivuille tulijoista eroon toteuttamalla ovimaton linkki JavaScriptillä. Suositeltavaa on tehdä etusivu, josta selviää sivuston tarkoitus ja sisältö.

Muuta muistettavaa.

Tarkistukset

Validi HTML on hyvä päänalunen.

Kun sivut on tehty valmiiksi niiden toimivuus ja lähdekoodin oikeellisuus kannattaa tarkistaa. Jälkimmäiseen käytetään validaattoria, kuten WDG HTML Validator, jolla voi tarkistaa koko sivuston lähdekoodin yhdellä kertaa. Tarkistuksen kannalta oleellista on dokumenttityyppi, jonka määritelmään validaattori sivustoa vertaa. Yleensä käytetään uusinta HTML versiota, ja sen sallivampaa transitional muotoa. Käytettävä versio määritellään koodin ensimmäisellä rivillä.

Esim. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Virheetön koodi on ensimmäinen edellytys sivuston toimimiselle eri ympäristöissä, sillä ei ole mahdollista kokeilla sivuja kaikilla olemassa olevilla, eikä varsinkaan tulevilla selaimilla. Epävalidi koodi voi aivan hyvin toimia yleisimpien selainten nykyisissä versioissa, mutta jokaisen uuden selainversion ilmestyminen on riski sivun toimivuuden kannalta. Jos validaattori kertoo sivuilla olevan runsaasti virheitä, syy voi olla siinä että tekstitason elementin sisällä on lohkotason elementti. Kaikki lopputagit eivät ole pakollisia, mutta niitä kannattaa opetella käyttämään alusta asti, koska niillä useissa tapauksissa on vaikutusta sivun näkymiseen selaimissa.

Esim. <P> -alkutagiin kannattaa aina liittää lopputagi: <P>Tekstiä</P>

Tyylisäännöstön tarkistus on tehtävä erikseen, siihen on apuväline CSSCheck. Yleisen virheen välttää, kun määrittää sekä taustan, että tekstin värin.

Esim. H1 {background: #EAADEA; color: #000}

Sivujen toimivuutta kannattaa testata eri selaimilla (IE, Netscape, Firefox, Opera ja Lynx). Lynx -tekstiselaimella - tai webin kautta Lynx Viewerillä - on hyvä testata sivuja, koska oikein tehdyt sivut näkyvät myös sillä, mutta virheellisesti tehtyjä sivuja ei usein saa sillä näkymään. Tämä ei suinkaan tarkoita sitä, että sivuilla ei saisi olla muuta kuin tekstiä, vaan että sivujen tulee näkyä ja navigoinnin toimia myös pelkkänä tekstinä. Sivuista voi myös tehdä erikseen tekstiversion, mutta koska on mahdollista tehdä sivut jotka toimivat kaikissa selaimissa ei ole syytä ensisijaisesti suosia tätä ratkaisua.

CSS-tuki poikkeaa eri selaimissa huomattavasti toisistaan. Ongelmana eivät niinkään ole selaimet jotka eivät CSS:ä tue, vaan selaimet jotka tukevat sitä väärin. Sivujen toimivuus ilman CSS-tukea on helppo testata, mutta jos haluaa sivujen toimivan kaikissa selaimissa on syytä testata sivut Netscape 4 selaimella, jonka CSS-tuki on lähinnä katastrofi.

Toimivuutta selainten eri asetuksilla voi testata valitsemalla eri fonttikokoja ja samalla eri kokoisia selainikkunoita. Tällaisen testauksen puuttumisen havaitsee usein sivuilla, kun tekstiä ei saa millään kokonaan näkyviin.

Oikeinkirjoituksen tarkistamiseen voi käyttää MS Wordin "Kieliasun tarkistus" -toimintoa. Käytännössä tämä tapahtuu niin, että otetaan tiedostosta kopio, joka avataan Wordiin ja samalla löydetyt virheet korjataan editorilla toisessa ikkunassa. Suoraan Wordissa tapahtuva editointi ei onnistu, koska ohjelma tekee omia lisäyksiään lähdekoodiin

Linkkien toimivuus kannattaa luonnollisesti tarkistaa, tähän on kätevä väline ohjelma nimeltä Xenu's Link Sleuth, jolla tosin voi tarkistaa vain sen että linkki vie jonnekin, mutta nopeus on jopa satoja linkkejä minuutissa.

Jos itsellä on nopea internetyhteys sivujen latautumisaika modeemiyhteyttä käytettäessä pitää selvittää. Jo viidentoista sekunnin odotusta voidaan pitää liian pitkänä, vaikka joidenkin web designereiden tuotokset latautuvat jopa kymmenen kertaa tuota kauemmin. Sivun latautumiseen kuluvaan aikaan vaikuttaa ratkaisevasti kuvien määrä ja koko. Kuvien toiminnasta kannattaa tarkistaa kaksi asiaa: Se että kaikki kuvat on lähetetty palvelimelle, ja että dokumentin lähdekoodissa ei ole määritetty kuvien sijainniksi tekijän oman koneen kiintolevyä.

Linkkejä

Nielsen, ja muut gurut.

Artikkeleita

Ohjeita

Ohjelmia Windowsiin

Palveluita


Kirjoittaminen aloitettu joulukuussa 1998.
Toimimattomat linkit poistettu 3.2.2011.
Jukka Tujula, jukka.tujula@mbnet.fi