Yksinkertaiset hahmosivut

Löydettyäsi mielenkiintoiselta vaikuttavan roolipelin lue ihan ensiksi kyseisen ropen säännöt ja vaatimukset huolella lävitse, niin tiedät mihin olet ryhtymässä. Useissa roolipeleissä oman hahmon esittely laitetaan suoraan foorumille, mutta jotkut vaativat jokaiselle hahmolle omaa nettisivua, josta esittely sitten löytyy. Jos juuri halajamasi rope kuuluu viimeksi mainittuun ryhmään, voit aloittaa sivunrakennuksen vaikkapa rekisteröitymällä >> Websille, joka on oikein mainio paikka aloittelijatason sivuille. Jos tahdot hieman apua Websiin rekisteröitymisessä tai sen käyttämisessä, vilkaise ihan ensiksi >> tätä.

Rakentaaksesi itsellesi hahmosivut on sinun saatava sivutilallesi kolme asiaa: etusivu, hahmon esittelysivu ja hahmon kuva. Olet hahmoa suunnitellessasi varmasti miettinyt sille ulkonäköä, mutta onko koneellasi hahmosta valmista kuvaa? Voit skannata itse piirtämäsi kuvan, piirtää kuvan tietokoneella tai muokata hahmon ulkonäön valmiiseen pohjaan, joita löytyy esimerkiksi Saarivaltiostakin. (>> Tästä Saarivaltion omiin kuvapohjiin.) Kun kuva on valmis, tallenna se .jpg, .gif tai .png muotoon, ei .bmp, koska se latautuu hyvin hitaasti! Tämän jälkeen voit ladata kuvan sivutilallesi: jos käytät Websiä, valitse "Single File Uploader" -toiminto saadaksesi kuvasi nettiin.

Seuraavaksi voit tehdä hahmollesi esittelysivun. Luo sivutilallesi uusi sivu, jonka nimeät hahmon nimellä, esimerkiksi "vercere.htm". Avaa juuri luomasi sivu (Websissä kynäpainikkeesta) ja kopioi >> tämä koodi kokonaisuudessaan sivulle, jolloin sivu tulee näyttämään >> tältä. Muokkaa isolla kirjoitettuihin kohtiin kaikki hahmosi tiedot, kuten nimi, luonne ja menneisyys. Lisää myös nettiin lataamasi esittelykuvan osoite kohtaan, jossa sitä pyydetään. Voit halutessasi kokeilla muokata sivun värejä vaihtamalla "WHITE" ja "BLACK" -kohtiin erilaisia englanninkielisiä värinnimiä ja katsoa, miellyttääkö lopputulos silmää. Kun sivu on valmis, se voi näyttää vaikkapa >> tältä.

Nyt hahmosi on valmis, mutta jotta saisit aikaan varsinaisen sivuston, on sinun luotava vielä etusivu eli index-sivu. Tai oikeastaan sitä ei ole tarpeen luoda, koska se on jo olemassa valmiiksi; sinun tulee kuitenkin muokata sitä hahmosivustolle sopivaksi. Poista index-sivulla ennestään olevat koodit ja liitä sinne >> tämä, jolloin sivusta tulee >> tämän näköinen. Muokkaa sivulle nyt nimesi, hahmosi nimi sekä hahmosi esittelyn osoite. Jos omaat vasta yhden hahmon, voit poistaa toisen ja kolmannen hahmon sivuihin viittaavat linkit sivulta. Jälleen voit halutessasi muokata sivun värejä, jolloin lopputulos voi olla esimerkiksi >> tämän näköinen.

Nyt hahmosivustosi on valmis! Muista kuitenkin päivittää sitä ja pitää tietoja ajan tasalla, sekä lisätä mahdolliset uudet hahmot aina myös index-sivulle. Muista kuitenkin, ettet saa poistaa sivuilta "Sivupohja © hitodama" -merkintää. Muutoin voit muokata sivujasi ihan niin paljon kuin haluat - vain oma mielikuvituksesi on rajana! Seuraavaksi kuitenkin muutamia esimerkkejä siitä, miten voit sivustoasi lähteä kehittämään.

Värit

Mustavalkoinen sivusto voi pitkän päälle olla melko tylsää katseltavaa, joten onneksi niin tekstin, taustan kuin erilaisten viivojenkin värien muokkaaminen on vaivatonta kuin perunoiden keittäminen! Värien säätelyyn on kuitenkin olemassa useita tapoja, joista nyt käsittelemme kahta yleisintä: sanoihin perustuvaa koodausta ja ns. heksakoodeihin perustuvaa koodausta.

Sanoihin perustuvaan koodaukseen viitattiin lyhyesti jo aikaisemminkin. Se toimii käytännössä siis seuraavalla tavalla:
<body bgcolor="WHITE" link="BLACK" alink="BLACK" vlink="BLACK">

Edellisessä koodissa alleviivattu sana white (=valkoinen) määrittää sivun taustan värin. Sen paikalle voit vaihtaa jonkin toisen englanninkielisen värinnimen, kuten green (=vihreä), silver (=hopea) tai teal (=sinivihreä). Listoja käytettävissä olevista värinnimistä löydät helposti laittamalla hakukoneeseen, esimerkiksi >> Googleen, vaikkapa sanan "värikoodit". Ongelmana tässä koodaustavassa kuitenkin on, että kaikki värit eivät välttämättä näy kaikilla internetselainversioilla täysin samalla tavalla.

Sanallista koodausta tarkempi ja luotettavampi, mutta hieman hankalammin käsiteltävä tapa määritellä värejä ovat heksakoodit. Ne toimivat tähän tapaan:
<body bgcolor=#e35e87 link="BLACK" alink="BLACK" vlink="BLACK">

Tässä taustan väri on siis määritelty tuollaisella siansaksalta vaikuttavalla merkkisarjalla, joka koostuu risuaidasta (#) ja kuudesta muusta merkistä. Sinun ei ole välttämättä tarpeen tietää mitä mikin merkki tarkoittaa, vaan ainoastaan se, missä saat muutettua haluamasi värin tuollaiseksi merkkisarjaksi. Tämä onnistuu useissa kuvankäsittelyohjelmissa, kuten Gimpissä, mutta myös netissä on erilaisia vempaimia tähän tarkoitukseen. Niitä löydät laittamalla hakukoneeseen esimerkiksi sanan "värikoodi".

Taustakuva

Mikäli tahdot sivustosi taustaksi pelkän tasaisen värin sijasta jonkinlaista kuviointia, täytyy sinun laittaa sivuillesi taustakuva. Piirrä haluamasilainen tausta ja lataa se nettiin, jonka jälkeen muokkaat sivustosi koodin taustaväriä määrittelevää kohtaa:
<body bgcolor="WHITE" link="BLACK" alink="BLACK" vlink="BLACK">

Taustakuvan saat paikoilleen muuttamalla alleviivatun kohdan seuraavanlaiseksi:
<body background="TAUSTAKUVAN OSOITE" link="BLACK alink="BLACK" vlink="BLACK">

Taustakuvan osoite tarkoittaa osoitetta, josta sivulle haluamasi taustakuva löytyy.

Viivat

Sivustollasi on lähinnä kahdenlaisia viivoja: tekstialuetta rajaavat reunaviivat sekä tekstialueen poikki kulkevat viivat.

Reunaviivojen tiedot löytyvät seuraavanlaisesta kohdasta:
<table border="1" bordercolor="BLACK" style="border-collapse: collapse;" align="center" cellpadding="10" width="750">

"Border" kertoo reunan paksuuden - mitä suurempi numero, sen paksumpi reunus. Jos laitat kohtaan nollan, ei reunuksia tule sivulle lainkaan. "Bordercolor" sen sijaan määrittää reunan värin ja sitä voit vaihdella Värit-otsikon alla kerrotulla tavalla.

Tekstialueen halki kulkevien viivojen koodi näyttää vastaavasti tältä:
<hr size="1" width="550" align="left" color="BLACK" noshade>

"Size" kertoo tämän viivan paksuuden, "color" taas värin. "Width" määrittää sen, kuinka pitkä viiva on, siinä missä "align" taas kertoo mihin suuntaan viiva on keskitetty. Vaihtoehtoja keskittämisessä ovat left, center ja right (= vasemmalle, keskelle ja oikealle).

Tekstin ulkomuoto

Tekstien ulkomuodossa on yleensä kolme kohtaa, joita voit muokata mielesi mukaan: väri, koko ja tyyli. Tämän lisäksi voit tarvittaessa mm. lihavoida, kursivoida ja alleviivata tekstiä.

Tekstin ulkonäköä määrittelevä koodi näyttää tältä:
<font size="3" color="BLACK" face="Times New Roman">TEKSTIÄ</font>

"Size" määrittää tekstin koon - mitä suurempi numero, sen suurempi teksti. Suurinta teksti on yleensä otsikoissa. "Color" taas määrittelee värin ja sitä voit muokata Värit-otsikon alla kerrotulla tavalla. "Face" kertoo fontin, eli kirjainten ulkomuodon. Kannattaa pitäytyä yleisimmissä fonteissa, koska erikoiset fontit eivät näy kaikilla kävijöillä oikein. Yleisimpiä fontteja ovat esimerkiksi Arial, Times New Roman, Comic Sans MS, Courier New, Tahoma, Verdana, Trebuchet MS, Book Antiqua, Georgia ja Garamond.

Lihavoiminen, kursivoiminen ja alleviivaaminen tapahtuvat varsinaisen tekstin ulkomuotoa määrittelevän koodin ulkopuolella. Esimerkiksi lihavoiminen sujuu tähän tapaan:
<font size="3" color="BLACK" face="Times New Roman"><b>TEKSTIÄ<b></font>

Tekstin ympärille lisätään siis <b> ja </b> -tagit. Vastaavasti kursivoinnissa lisätään samaan kohtaan <i> ja </i> ja alleviivaamisessa <u> ja </u> -tagit.

Tekstilinkit

Jos haluat luoda tekstilinkin, joka vie kävijän johonkin toiseen paikkaan sivustollasi (esimerkiksi etusivulle), lisäät sivullesi seuraavanlaisen koodin:
<a href="OSOITE">LINKKITEKSTI</a>
Osoite-kohtaan kirjoitat sen osoitteen, johon tahdot kävijän linkkiä painamalla päätyvän. Linkkiteksti taas on se teksti, jota kävijän on painettava. Tämä koodi avaa linkin samaan ikkunan, kuin missä kävijä jo on.

Jos tahdot tehdä linkin, josta pääsee esimerkiksi jollekin toiselle sivustolle, on linkki hyvä laitta aukeamaan uuteen ikkunaan. Silloin linkitys tapahtuu tällä tavalla:
<a href="OSOITE" target="_blank">LINKKITEKSTI</a>
Myös tässä osoite on avautuvan sivun osoite ja linkkiteksti se teksti, jota kävijän on painettava.

Linkkitekstien väri määritellään eri paikassa, kuin muun tekstin väri. Se löytyy seuraavanlaisesta kohdasta:
<body bgcolor="WHITE" link="BLACK" alink="BLACK" vlink="BLACK">
Värejä voit muokata Värit-otsikon alla neuvotulla tavalla. "Link"-kohdan väri kertoo sen, minkä värinen linkki yleensä on. "Alink" kertoo sen sijaan minkä väriseksi linkki muuttuu klikkaamisen aikana ja "vlink" sen, minkä värisenä joskus aikaisemmin klikattu linkki myöhemmin näkyy.

Kuvat

Kuvan lisääminen sivulle on hyvin helppoa ja onnistuu tällaisella koodilla:
<img src="KUVAN OSOITE" align="left">
Kuvan osoite on luonnollisesti sen kuvan osoite, joka sivulla on tarkoitus saada näkymään. "Align" kertoo sen, mihin suuntaan kuva on keskitetty: vasemmalle (left), keskelle (center) vai oikealle (right). Koodi toimii myös kokonaan ilman "align"-kohtaa.

Jos tahdot, että kuva toimii samalla myös linkkinä (=kuvalinkki) lisäätkin sivuille tällaisen suhteellisen pitkän koodin:
<a href="AVAUTUVAN KUVAN/SIVUN OSOITE" target="_blank"><img src="LINKKIKUVAN OSOITE" border="0" alt="" title="HALUAMASI KUVATEKSTI"></a>
Kuten nimikin kertoo, lisäät "avautuvan kuvan/sivun osoite" -kohtaan sen sivun tai kuvan osoitteen, jonka tahdot linkkikuvaa klikkaamalla aukeavan. Linkkikuvan osoite taas on sen kuvan osoite, jota kävijän tulee klikata. "Border" määrittää linkkikuvan reunuksen paksuuden - jos arvoksi laittaa nollan, ylimääräistä reunusta ei tule lainkaan. "Haluamasi kuvateksti" -kohtaan kirjoitat sen tekstin, jonka tahdot näkyvän silloin, kun kävijä pitää hiiren osoitinta linkkikuvan päällä.

Valikko

Mikäli tahdot sivustollesi erillisen valikon, >> tällaisen, joudut muokkaamaan sivujesi koodia useammastakin kohtaa. Tarvittavat koodit löydät >> täältä. Kiinnitä erityisesti huomiota punaisella merkittyihin kohtiin, sillä muutokset tapahtuvat pääosin juuri niissä. Vaikkei erillisen valikon hallitseminen ja tekeminen olekaan vaikeaa, on se kuitenkin valikottoman sivuston hallintaa himpun verran monimutkaisempaa. Voikin siksi olla hyvä, että kokeilet valikon lisäämistä vasta sitten, kun olet hieman päässyt jyvälle sivustoltasi löytyvien erilaisten koodien tarkoituksesta ja tehtävistä.

Ideoita hahmosivuston kehittämiseen

Varsin moni on halukas haalimaan hahmosivuilleen muutakin sisältöä, kuin ainoastaan hahmojen perustietoja. Yleisimpiä lisäyksiä hahmojen esittelysivuille ovat varmastikin kuvagalleria ja lista hahmolla pelatuista peleistä. Kuvagalleriaan voit lisätä sinun ja muiden pelaajien piirtämiä kuvia hahmoosi liittyen Kuvat-otsikon alla kerrotuilla tavoilla. Pelattujen pelien lista taas auttaa sinua ja kanssapelaajiasi muistamaan mitä kaikkea hahmo onkaan peliuransa aikana tehnyt. Toinen muistia tukeva listaus on luettelo hahmon peleissä tapaamista tuttavuuksista. Tässä listassa on usein tapana kertoa hahmojen nimien ja pelaajien lisäksi myös se, millainen suhde sinun hahmollasi mihinkin hahmoon on: ovatko he ystäviä vai vihollisia tai vaikkapa sukulaisia keskenään. Suosittuja ekstratietoja ovat lisäksi mm. kertomus hahmon luomisesta, pelaajan oma mielipide hahmosta, listaukset hahmon heikkouksista ja vahvuuksista sekä jonkin hahmoa kuvaavan musiikkikappaleen sanoitukset.

Myös hahmon esittelysivun ulkopuolelle lisäillään toisinaan varsin paljon tavaraa. Etusivulle voi laittaa kävijälaskurin, jonka voi hankkia esimerkiksi laskuri.tiedot.netistä, sekä lisätä linkin vaikkapa Freebokista hankittuun vieraskirjaan. Vieraskirjaan kävijät voivat helposti jättää sinulle palautetta sivustostasi ja hahmoistasi. Voit halutessasi tehdä myös kuvagallerian, johon keräät kaikki roolipeleihin liittyvät kuvat, jotka olet piirtänyt. Lisäksi voit laatia tietosivun itsestäsi ja roolipeliurastasi sekä sellaisista hahmoistasi, joilla et enää nykyään pelaa.

Vaikka muokkaisit hahmosivujasi kuinka paljon ja keksisit sinne täysin uudenlaisiakin osioita, pidä kuitenkin aina mielessä tekijänoikeuksien tärkeys! Et voi kopioida tekstejä, kuvia tai ideoita hahmoihin tai hahmosivuihin suoraan toisten pelaajien hahmosivuilta, vaan sinun tulee käyttää omaa aineistoasi tai sellaista muiden tarjoamaa aineistoa, jota on lupa kopioida. Tekijänoikeuksien takia sinun on myös muistettava yhäkin pitää sivuillasi "Sivupohja © hitodama" -merkintä näkyvissä, jos alkuperäinen sivupohja - oli se sitten kuinka muokattu tahansa - on Saarivaltiosta hankittu.