Klaanin tunnus ja sivut

Tällä sivulla kerrotaan pelkistetyt ohjeet klaanin tunnuksen tekemiseen Photoshopilla ja Paint Shop Prolla. Muissa ohjelmissa joudutte käyttämään omaa luovaa mielikuvitusta, sillä Reo ei omista muita kuvankäsittelyohjelmia ja käyttääkin näistä vain Photoshopia. Tunnuksen muokkaamiseen ei kannata käyttää Windowsin mukana tulevaa Paintia, sillä ainakaan allekirjoittanut ei löytänyt sieltä keinoa muuttaa pakatun kuvan värejä, joten kuvan muokkauksessa toimivat vain kuvassa jo valmiiksi olevat värit.
Kuten luvattu, sivulla on myös ohjeet www-sivujen tekemiseen.

Klaanin tunnus

Klaanin tunnuksen tekeminen Photoshopilla

Suppeaan ohjeeseen on käytetty Adobe Photoshop CS 8.0:aa. Photoshopin omistajien kannattaa pyytää Reolta alkuperäinen .psp-tiedosto paremman laadun vuoksi.

1. Tallenna haluamasi pohja Sälä-sivulta. Katso, että se tallentuu .gif-muodossa.
2. Avaa kuva Photoshopissa.
3. Klikkaa ylävalikosta kohtaa Image -> Mode -> RGB Color
4. Valitse sitten Layer -> New. Voit nimetä layerin miten mielit.
5. Valitse työkalu Paint Bucket (näppäin G) ja rastita yläpalkista valinta All Layers ja muuta kohdan Tolerance arvoksi 1. Valitse maalipurkkiin haluamasi väri ja maalaa sillä kilven värit mieleisiksesi. Saatat joutua siistimään rajat Brush-työkalulla.
6. Tee uusi layer samaan tapaan kuin edellinen.
7. Valitse työkaluista Brush (näppäin B). Voit halutessasi käyttää myös Penciliä (klikkaa Brush-kuvaketta hiiren oikealla näppäimellä ja valitse Pencil-työkalu). Työkalun kokoa ja kovuutta voit muuttaa klikkaamalla kuvan päällä hiiren oikeaa näppäintä ja muuttamalla asetuksia esiin aukeavasta valikosta.
8. Piirrä klaanin tunnus haluamillasi väreillä.
9. Kun kuva on valmis, klikkaa yläpalkista File -> Save for Web. Muuta esiin aukeavassa ikkunassa olevia arvoja, kunnes kuva on pakattu mieleiseksesi eikä vie liikaa tilaa, sillä raskas kuva on hitaampi ladata kuin kevyt.
10. Siirrä kuva nettiin ja linkitä se klaanin asetuksista.

Klaanin tunnuksen tekeminen Paint Shop Prolla

Suppeaan ohjeeseen on käytetty Jasc Paint Shop Pro 8.0:aa.

1. Tallenna haluamasi pohja Sälä-sivulta. Katso, että se tallentuu .gif-muodossa.
2. Avaa kuva Paint Shop Prossa.
3. Valitse Image -> Increase Color Depth -> 16 Million Colors (24 bit).
4. Valitse sitten Layers -> New Raster Layer. Voit nimetä layerin miten haluat.
5. Siirry alimmalle layerille (lista oikealla. Jos listaa ei ole, paina F8).
6. Valitse työkalu Magic Wand (samassa listassa Selectionin ja Freehand Selectionin kanssa) ja aseta sen tolerance-arvoksi ylhäällä olevasta valikosta 1.
7. Klikkaa haluamaasi aluetta pohjasta ja siirry ylemmälle layerille.
8. Valitse maalipurkkityökalu Flood Fill, valitse haluamasi väri ja väritä sillä valittu alue mieleiseksesi. Toista kohdat 5-8 kunnes olet värittänyt kaikki haluamasi alueet. Saatat joutua siistimään reunoja Paint Brush –työkalulla.
9. Siirry ylimmälle layerille ja luo sitten uusi layer, kuten kohdassa 4. Jos sinulla on yhä jokin alue valittuna Magic Wandilla, klikkaa Magic Wand –työkalulla rajatun alueen ulkopuolelle hiiren oikealla näppäimellä poistaaksesi valinnan.
10. Valitse Paint Brush työkalu (näppäin B), haluamasi väri ja piirrä klaanin tunnus.
11. Kun kuva on valmis, valitse ylhäällä olevasta listasta File -> Export -> GIF Optimizer. Muunna kuvan tallennuslaatu haluamaksesi ilman, että kuvasta tulee erityisen painava, jolloin sen latautuminen ei kestä kauaa. Kuvan yksityiskohdista riippuen pidättäydy yli 10k kuvista ja vältä kymmenen kilonkin saavuttamista.
12. Siirrä kuva nettiin ja linkitä se klaanin asetuksista.
 

WWW-sivujen tekeminen

Tämä on tarkoituksellakin erittäin pohjaa antava selonteko. Kun perusasiat on hallussa, koodaaminen on enää harjoittelemista ja uusiin käskyihin törmäämistä.

Jos et omista mitään koodaamiseen tarkoitettua ohjelmaa, käytä Windowsin Muistiota (Käynnistä-valikko -> Ohjelmat -> Apuohjelmat -> Muistio). Englannin kielisessä Windowsissa sen nimi on Notepad. Älä käytä Wordiä, sillä se sekoittaa koodia. Näissä ohjeissa kaikki tehdään Muistioon, mutta homma ei eroa koodausohjelmista.

Kun edessäsi on tyhjä Muistio, kirjoita siihen seuraava koodi.
<html>
<head>
<title>
tähän otsikko
</title>
jos koodi vaatii head-tagien sisään kirjoittamista, niin se tungetaan tänne
</head>


<body>
tähän sisältö
</body>


</html>

Voit tallentaa tiedoston nyt valitsemalla Tiedosto -> Tallenna. Muuta tallennusmuodoksi "Kaikki tiedostot" ja kirjoita tiedoston nimeksi vaikkapa jaelamahymyilee.html
Nimellä ei ole väliä, mutta tunnus osoittaa sen HTML-tiedostoksi. Voit tarkastella sivua avaamalla sen selaimessasi. Jatkossa voit muokata sitä avaamalla sivun uudelleen Muistiossa.

Hakasulkeiden väliin kirjoitettuja käskyjä kutsutaan tageiksi.
HTML-tagi aloittaa ja lopettaa HTML-dokumentin.
HEAD-tagi sisältää CSS-muotoiluja, kokonaisia tai osittaisia JavaScriptejä ja toisinaan muita härpäkkeitä, jotka eivät suoraan näy valmiissa sivussa.
TITLE-tagiin kirjoitetaan sivun otsikko, joka tulee selaimen yläpalkkiin. BODY-tagi on sivuston näkyvä osa. Sen sisään kirjoitetaan kaikki esiin tuleva teksti, kuvakoodit, framekoodit ja niin edelleen.
Näitä tageja ei ole koskaan kuin yksi pari per tiedosto! Parin ensimmäinen osa, jossa ei ole kauttaviivaa, aloittaa alueen, johon tagi vaikuttaa ja parin viimeinen osa, jossa on kauttaviiva, lopettaa vaikutusalueen. Tagien sisältämät määritelmät vaikuttavat kaikkeen tagien väliin kirjoitettuun. Tagien määritelmät taas kirjoitetaan aloittavan parin hakasulkeiden väliin.
Tagien sisään ja niiden väliin luodaan itse sivusto. Esimerkiksi korvaamalla aloittava body-tagi koodilla
<body background="kuva.jpg" bgcolor="#666666" color="#ffffff" alink="#000000">
määritellään, että sivun taustakuva on kuva.jpg, taustan väri on harmaa (värin hex-arvo on #666666), tekstin väri on valkoinen (#ffffff) ja linkin väri on musta (#000000).

BODY-tagien väliin kirjoitetaan siis kaikki sisältö.
Esimerkiksi kirjoittamalla sinne näin, saadaan koodin alla lukevan esimerkin mukainen lopputulos.
<h1>Hei äiti!</h1>
Tällä sivulla kerron maailman upeimmasta ihmisestä.
<br>Kiitos <b>muori</b>, olet <u>ihana</u>.
<br>
<br>Sinun nuppunöppösi,
<br><i>Reo</i>

Hei äiti!

Olet maailman upein ihminen.
Kiitos muori, olet ihana.

Sinun nuppunöppösi,
Reo

Lienee selvää, mitä mikäkin koodi teki siinä. H-tagit (h1, h2, h3) ovat valmiiksi muotoiltuja, eri kokoisia otsikkotekstejä, joiden jälkeen tulee automaattisesti rivinvaihto. BR-tagi on yksi rivinvaihto. P-tagi tekee isomman rivinvaihdon, mutta sitä ei kannata käyttää, koska eri selaimilla tuo rivinvaihdon korkeus on eri ja P-tagi on aina päätettävä /P-tagilla.
Huom: Älä koodatessasi kirjoita mitään isoilla kirjaimilla, ellei koodin nimen omaan kuulu olla niin. Jo nyt isoilla ja pienillä kirjaimilla on eroa, tulevaisuudessa varmasti vielä enemmän. Tavallisessa HTML-kielessä ei ole olemassa isolla kirjoitettavia käskyjä.


Tällä sivulla ei ole tarkoitus antaa kaikkia mahdollisia koodeja sivun tekemiseen, vaan auttaa välttämättömimpään alkuun. Koodeja löytyy netistä kuollakseen. Erittäin hyvä suomalainen sivusto on Menthal 27. Sieltä löytyy kaiken maailman koodeja ihan alkutaipaleista pätevään koodaamiseen.

Tässä kuitenkin muutama perustarpeellinen koodi elämää varten:
<b></b> = lihavointi <i></i> = kursivointi <u></u> = alleviivaus <font size="2" face="Times New Roman" color="#000000"></font> = fontin koko, käytetty fontti ja fontin väri. Kaikki määritelmät voi kirjoittaa myös erikseen, esimerkiksi <font color="#000000"></font>. <img src="kuva.jpg" width="100" height="50" border="1" align="middle"> = kuvakoodi, joka määrittää kuvan osoitteen, leveyden ja korkeuden pikseleissä, reunuksen ja sijoittumisen. Kuvan laittamiseen riittää myös pelkää <img src="">. Tämä tagi ei tarvitse päättävää paria. <a href="http://www.antanya.net" target="_blank">linkkiteksti</a> = linkki, joka on osoitettu aukeamaan uuteen ikkunaan (_blank). Ilman blank-määrettä linkki aukeaa samaan ikkunaan. <a href="munsivu2.html">linkkiteksti</a> = jos sivu joka linkitetään on samassa paikassa kuin sivu, joka sitä kutsuu, ei kokonaista http-osoitetta tarvita. <a href="tasastaon.html"><img src="tosielamaa.gif"></a> = kuva linkkinä

Sivuston voi siirtää nettiin vaikkapa Geocitiesiin. Ohjeet siitä löytyy esimerkiksi Nawulfin HTML-Geo-oppaasta. Josta muuten löytyy kaikki perusruohonjuuritason Geoiluun.