Mistä kerron? | Miten? | Suunnittelu | Työkalut | Rakentaminen | Julkaisu

Varsinainen HTML-ohje tämä ei ole, sillä niitä löytyy internetistä aivan riittävästi. Toivottavasti tämän lukeminen antaa sinulle kuitenkin jotain mitä et ehkä ole ottanut huomioon sivuja suunnitellessa.
Yritykset kertovat omista tuotteistaan ja/tai palveluistaan joten heille ei aihe eikä välttämättä käytetty tekniikka tuota niinkään päänvaivaa, muut asiat kylläkin.

Useimmilla ihmisillä on jotain sellaista sanottavaa jonka haluaisi kertoa suuremmalle ihmisjoukolle. Eräs keino tähän on rakentaa kotisivut ja julkaista ne internetissä.
Jos tunnet kuuluvasi tähän ryhmään, et ole vielä rakentanut sivuja, mutta tunnet siihen tarvetta niin tämän sivun lukeminen saattaa antaa sinulle joitain vinkkejä.

On tietysti selvää, että ellei ole mitään tähdellistä sanottavaa niin parempi jättää sivut rakentamatta tai ainakin julkaisematta ja jättää ne oman koneen kiintolevylle.
Verkko on turvoksissa "Tässä on minun kissani/koirani, sen nimi on..." -tyylisiä sivuja.
Tämä ei tarkoita sitä, ettei henkilökohtaisista asioista kuten työstä, harrastuksista, lemmikkieläimistä yms. saisi kertoa. Jos aihe kuitenkin on tuiki tavallinen ja se on sivujen ainoa sisältö voi olla varma, ettei se kiinnosta kuin korkeintaan lähintä tuttavapiiriä, eikä heitäkään kuin sen yhden ainokaisen kerran kun he surffaavat katsomaan sivujasi, joiden julkaisusta olet heille juuri kertonut.

Toinen asia joka kannattaa ennen varsinaisen sivuston suunnitteluun alkamista on huomioida, ettei sivustoa rakenneta hetken mielijohteesta, julkaista ja unohdeta sitten verkon syövereihin pölyttymään.
On ikävää lukea sivuja joiden sisältö on selvästikin jo vanhentunutta tietoa, ulkoiset linkit ovat aikoja sitten katkenneet, viimeinen päivitys kerrotaan tehdyn joskus pari kolme vuotta sitten ja mikä pahinta - sivuston rakentaja on saattanut jo poistua joukostamme.

Mistä kerron?

Aiheen ei kuitenkaan tarvitse ole hyperavaruudesta vaan jostain sellaisesta joka kiinnostaa useampaa kuin yhtä tai kahta lukijaa ja josta ei ennestään löydy kunnollista tai tarpeeksi perusteellista tai halutulla kielellä olevaa tietoa jo olemassa olevilta verkkosivuilta. Kun aihe on mietitty on aika kokeilla hakukoneilla löytyykö siitä riittävän kattavaa tietoa jo ennestään. Jos haluamasi aihe saa tuhat tarkkaa vastausta hyvällä hakukoneella ja haluamallasi kielellä on ehkä viisainta vaihtaa aihetta tai ainakin kertoa aiheesta jotain sellaista mitä toiset eivät ole tehneet - ainakaan vielä.

Hyviä aiheita ovat mm. kaikki ajankohtaiset asiat ja ilmiöt sekä kaikki erikoisuudet joista ei löydy juuri mitään tietoa, mutta niistä puhutaan. Tässä on tilaus esim. sivustolle joka käsittelee vaikkapa kissa- tai koirarotua jonka edustajia Suomessa on vain kourallinen tai harrastukselle joka on juuri rantautumassa suuresta maailmasta Suomeen.
Toki aihe voi olla mikä tahansa muukin kunhan siihen uppoudutaan pintaa syvemmälle ja jos kyseessä ovat asiasivut täytyy tiedon edes pääosin olla faktaa eikä mitään "mutu" -juttuja.

Miten?

Asiat voidaan kertoa niin monella eri tavalla. Joko niin ettei sitä seuraavana päivänä ymmärrä edes sen kirjoittaja tai niin, että uhraa asialle aikaa, jolloin kerronnan voi toteuttaa muidenkin ymmärtämällä tavalla. Hyvä ja yleinen tapa on luetuttaa teksti ainakin yhdellä sellaisella henkilöllä joka ei ole missään tekemisissä sisällön tuottamisen ja sitä käsittelevän aiheen kanssa. Jos sisällössä viljellään runsaasti erikoissanastoa voi tekstin tarkistaja, asiaan vihkiytymätön henkilö, kyselyillään saada aikaiseksi asioiden selkeämmän kuvauksen. Lisäksi esim. mahdolliset kirjoitusvirheet tulevat paremmin huomatuiksi.

Sisällön tuottajan ei tarvitse olla yliopiston äidinkielen lehtori saadakseen aikaan ymmärrettävää tekstiä - talonpoikaisjärjellä pärjää varsin mainiosti.
Lue tekstisi aina "kärpäsenä katossa".

Suunnittelu

Kun aihe on varmistunut on aika suunnitella sivujen runko. Tekstisisällön voi tässä vaiheessa pitää vielä täysin erillään. Sehän on voitu kirjoittaa jo aiemmin jotain toista mediaa varten eli teksti voi olla esim. tekstinkäsittelyohjelmalla kirjoitettu tiedosto tai se voi piirtoheitinkalvoilla tussilla kirjoitettuna. Mahdollisia kuviakaan ei kannata heti ensimmäisenä olla sivuille linkittämässä, toki ne voidaan etsiä/skannata tässä vaiheessa jo valmiiksi. Selkeä tapa on käyttää samaa sivupohjaa kaikilla sivuilla jos se vain on suinkin mahdollista. Näin käyttäjä oppii nopeasti muistamaan esim. navigointilinkkien paikat olivat ne sitten tekstinä, kuvina, painikkeina tai toteutettu miten muuten tahansa. Voit piirtää paperille sivupohjan luonnoksen ja jopa värittää sen. Nyt sinulla on jo web-sivun paperiversio. Tästä on hyvä jatkaa suunnittelua.

Jos sivusto ei välttämättä vaadi runsasta kuvitusta on niiden käyttö syytä pitää kohtuuden rajoissa. Syitä on pari, toinen on sivujen latautumisen nopeutuminen selaimeen ja toinen se, ettei varsinainen sisältö huku kuviin, varsinkin jos ne eivät liity asiaan kovin saumattomasti.

Nyt on hyvä tuumia käyttääkö sivuilla taulukointia vai ei. Ikävä kyllä se on vielä ainoa, käytännössä toimiva tapa, saada sivujen elementtien asemointi tulostumaan vähän vanhemmillakin selaimella edes suurin piirtein saman näköisinä. Nettiin on alkanut ilmestyä uusilla selaimilla hyvin toimivia sivuja joissa taulukointi on korvattu tyylejä (CSS 1 ja 2) hyväksi käyttäen. Tässäkin sivustossa taulukoiden käyttöä on rajoitettu.

Onpa taulukointi käytössä tai ei, niin joka tapauksessa on muistettava, että näyttöjä, niissä käytettyjä kuvatarkkuuksia ja ennen kaikkea meitä ihmisiä on monenlaisia.
Täytyy siis ottaa huomioon pieniresoluutioiset näytöt ja heikkonäköiset ihmiset. On tosi ikävää jos sivulla on vaakavierityspalkki koska sivun leveys on määritelty liian leveäksi tai siinä on suuri kuva joka ohittaa elementin leveysmäärityksen. Myös teksti on voitu tyylejä käyttäen määritellä erittäin pienikokoiseksi ja siten, ettei sitä voi kaikkien selainten (esim. Internet Explorer) asetuksilla suurentaa.

Värit antavat sivulle elävyyttä ja ilmettä, mutta niillä voidaan myös pilata sivu. Järjen käyttö on tässäkin sallittua eli esim. sateenkaaren ominaisuuksia kuvatessa on hyvä käyttää värejä avokätisesti. Nyrkkisääntönä voidaan pitää 3-5 eri värin käyttöä jos valkoista ja mustaa ei lasketa väreiksi. Ei kuitenkaan mitään räikeitä värejä, ei ainakaan useita samalle sivulle. Mielellään hillittyjä sävyjä jottei varsinainen sisältö ole taas vaarassa jäädä toisarvoiseksi asiaksi.

Kaikenlaisten "hilavitkuttimien" käyttö on myös pidettävä kohtuullisena. Tähän joukkoon kuuluvat mm. gif- ja flash-animaatiot, kaikenlaiset käyttäjän toivomusta kyselemättömät äänet, vierivä/kimpoileva/pomppiva yms. teksti ja muut tosi "Coolit" tehosteet.

Jos et halua ensimmäistä sivustoasi tehdessäsi perehtyä tyyleihin niin tee se viimeistään siinä vaiheessa kun päätät rakentaa sivuston alusta asti uudestaan. Tyylien käyttö nopeuttaa ja selkeyttää rakennuspuuhia ja mikä tärkeintä; kirjasinten, värien ym. ominaisuuksien vaihtaminen onnistuu niillä käden käänteessä.

Työkalut

Jos kyseessä on ensimmäinen sivustosi on varmaan viisain tapa käyttää jotain ns. WYSIWYG -editoria = What You See Is What You Get, jossa sivut nähdään suoraan valmiin näköisinä. Jos koneellesi on Ms Office on sen mukana, paketin laajuudesta riippuen, voinut tulla FrontPage ohjelma jolla ensisivut on helppo tehdä. Jos tätä ei ole, voit kaivella internetistä vastaavanlaisen ilmaisen ohjelman. Yksityiskäytössä ilmaisia, erittäin hyviä HTML editoreita löytyy internetistä vähintään kymmeniä.

Vinkkejä: Hae wywiwyg-editoreita alla olevan rivin hakasanoilla:
"free wysiwyg html editor"
...sitaattien kera Googlella näin.
Jos et ole aivan aloittelija tai jostain muusta syystä haluat käyttää tekstipohjaista editoria sivujen teossa niin kirjoita hakusanoiksi alla oleva rivi:
"free html editor" -wysiwyg
...sitaattien kera Googlella näin.

En lähde tässä sen kummemmin suosittelemaan mitään kaupallista kuin ilmaislevityksessä olevaa ohjelmaa koska ihmisiä ja mieltymyksiä on niin monenlaisia. Sitä paitsi - nyt vasta kokeillaan miltä homma maistuu. Pääasia on, että vaikka käyttäisit wysiwyg-editoria niin vilkaiset välillä millaista lähdekoodia se on kirjoittanut jotta hahmottaisit sivunkuvauksen idean mahdollisimman varhain. Kylmä totuus kuitenkin on, että selkeän, siistin ja (X)HTML -kieliopillisesti oikein kirjoitetun koodin saa parhaiten käsityönä. Toki se on ehkä hiukan hitaampaa, mutta sitäkin antoisampaa ja palkitsevampaa sekä takaa sen, että sivut toimivat oikein kaikilla W3C:n standardeja noudattavilla selaimilla.

Olisi hyvä jos käytössäsi olisi myös kuvankäsittelyohjelma. Vähintään sellainen jolla voi ainakin rajata ja pakata yleisesti netissä käytettyjä bittikarttaformaatteja kuten jpg, png ja gif.
Vinkki: Hae ilmaisia kuvankäsittelyohjelmia alla olevan rivin hakasanoilla:
"free graphic editor"
...sitaattien kera Googlella näin.

Rakentaminen

Nyt kun jo tiedät mitä haluat sivuillasi kertoa ja miten idean toteutat on aika aloittaa varsinainen työ valitsemallasi työkalulla. Ensimmäisille kotisivuillesi ei välttämättä kannata kovin tarkkaa kansiorakennetta miettiä, mutta ainakin kuvat olisi hyvä tallentaa omaan kansioonsa jo pelkästään selkeyden vuoksi.

Heti kun olet aloittanut ensimmäisen sivun rakentamisen tallennetaan tiedosto esim. nimellä sivupohja.html. Näin uusia sivuja luodessasi on "tyhjä" pohja aina valmiina johon sitten vain lisäät haluamasi sisällön ja tallennat tiedoston eri nimellä.

Todennäköisesti aloitat etusivusta (kotisivu) joten sen nimi täytyy olla index.html (tai index.htm todella vanhoja käyttöjärjestelmiä/ selaimia varten) jotta palvelin osaa avata sen kun sivustoosi tullaan ilman aloitussivun tiedostonimeä (esim. www.lapinlahti.net). Jos index -tiedostoa ei ole, palvelin näyttää hakemistolistauksen jos sitä ei jollain tekniikalla ole estetty. Listaus sallittu ja estetty.
Muiden sivujen (web-sivut) nimet kannattaa määrittää sivujen sisältöä kuvaaviksi jo pelkästään hakukoneiden vuoksi.

Jos käytät sivujen kuvauksia (description) ja hakusanoja (keywords) on niidenkin oltava sisältöä kuvaavia. META -määritteet eivät ole pakollisia, kyllä nykyiset selaimet osaavat tulkita sivusi ilman niitäkin. Myöhemmin, jos tämä uusi harrastuksesi jatkuu ja kehittyy, huomaat kyllä niidenkin tarpeellisuuden.

Käytetty kirjasinperhe (font-family) ja/tai -tyyppi (font-style) saisi olla mielellään joku yleinen, esim. Times New Roman, Arial, Georgia, Verdana tms.
Kirjasinkoot (font-size) kannattaa määritellä suhteellisilla mitoilla (%, em, ex ja px), välttäen absoluuttisia mittoja (in, cm, mm, pt, ja pc) jotta sivujen katseltavuus useimmilla selaimilla ja näytöillä olisi yhtäläisempi. Tämän sivuston kirjasinkoot on määritelty suhteellisilla mitoilla % ja em.

Kuvien leveydet (width) ja korkeudet (height) on hyvä ilmoittaa. Kun selain tulkitsee sivusi koodia osaa se tällöin jättää kuvalle riittävästi tilaa jo latausvaiheessa ja näin sivu avautuu "rauhallisemmin." Standardin mukaan kuvan alt -määrite on pakollinen, tosin sen arvon voi jättää tyhjäksi. Määritteen tarkoitus on kertoa tekstinä se mitä kuva esittää - sellaisilla selaimilla jotka eivät kuvia näytä. Tällainen selain voi olla esim. tekstipohjainen Lynx tai se voi olla myös graafinen, mutta käyttäjä, syystä tai toisesta on selaimen asetuksissa määritellyt ettei kuvia näytetä. IE -selain näyttää alt -määritteeseen kirjoitetun tekstin kun hiiren osoitin viedään kuvan päälle, mutta se on vain IE:n ominaisuus. Jos haluat, että kuvateksti näkyy kaikilla selaimilla käytä alt -määritteen lisäksi title -määritettä.

Julkaisu

Internetyhteyden tarjoajasi on todennäköisesti antanut sinulle palvelimeltaan levytilaa käyttöösi. Jos näin ei ole, on sivuston sijoituspaikka etsittävä muualta. Web-hotelleja löytyy suomesta runsaasti. Etsi sivustosi sijoituspaikka esim. Webhotellit.com - suomalaisten webhotellien vertailusta.

Katso kuvakaappauksin varustettu ohje FTP-yhteyden luomiseen Windows XP:n verkkotyökalulla.

ICT/Softa -sivulta löydät linkkejä työkalujen lataussivuille ja Linkit/ICT -sivulta linkkejä varsinaisiin (X)HTML- CSS-oppaisiin yms.

Toivon Sinulle miellyttäviä hetkiä kotisivujen rakennuspuuhassa!