Aloittelijan opas: XHTML & Www-sivun rakentaminen

Tämän oppaan tarkoitus on perehdyttää sinut XHTML:ään ja sen käyttöön www-sivuilla ja ulkoasussa.

HUOM: Opas on auttamattomasti vanhentunut, eikä tällä mitään moderneja sivustoja saa aikaan. Tein oppaan kouluaikoina tietotekniikan kurssia varten noin tunnissa, jonka avulla pääsin koko kurssin kerrasta läpi tarvitsematta istua tunneilla. Oli silloin melkolailla ajantasainen, mutta nykyään on tullut HTML5 ja monet muut hienommat tekniikat, joten en suosittele enää käyttämään tämän oppaan ohjeita.

Olen jättänyt oppaan nettiin arkistollisista syistä. Jos haluat oikeita sivustoja tai tietää verkkosivujen tekemisestä muuten vain, ota yhteyttä roni@dude.fi. — 28.7.2014

Grafiikattoman ulkoasun tekeminen

Vähänkin edistynyt saa XHTML ja CSS-kielien avulla saa vallan mainiosti hienonkin ulkoasun käyttämättä ollenkaan grafiikkaa. Sivun saa näyttämään hyvältä pelkästään CSS (Cascading Style Sheets -tyylimäärittelyjen avulla. Yksi hyvä esimerkki on tämä sivu jota parhaillaan katsot.

Aloittaminen on helppoa: Ensin sinun pitää valita mitä tekstipohjaista ohjelmaa käytät. Olet varmaan kuullutkin joistakin ohjelmista, joissa ei tarvitse kuin rakennella ulkoasu palikoista: niitä ei kannata käyttää, sillä ne eivät tee standardin mukaista jälkeä ja tunkevat omaa koodia sekaan ja et saa itsesi näköistä sivua vaikka kuinka yrittäisit. Tekstipohjaisista ohjelmista suosituin ja kevyin on Notepad, joka löytyy sinunkin tietokoneestasi (olettaen että käytät Windows-käyttöjärjestelmää) C:/Windows/Notepad.exe. Muitakin hyviä ohjelmia on olemassa, kuten ConText ja HTML-Kit. Itse käytän ConTextiä ja Notepadia.

Käytätpä mitä yksinkertaista tekstinkäsittelyohjelmaa tahansa, tässä oppaassa neuvon Windowsin Notepadin mukaan. Tekstiähän se vain on. Voit käyttää lempiohjelmaasi yhtä lailla.

Ensimmäisenä tee itsellesi kansio koneellesi. Minulla www-sivut ovat kaikki omassa kansiossaan hakemistossa E:\Web\Websites\. Voit päättää kansion paikan ja nimen itse. Jos et keksi paikkaa, tee vaikka työpöydälle uusi kansio omalla nimelläsi varustettuna. (Huom! Tietokoneen paikallista hakemistoa ei tule sekoittaa julkisen www-sivun hakemistoon, paina se päähäsi jo tässä vaiheessa!)

Uuden kansion luominen: Hiiren oikea näppäin > Uusi > Kansio

Uuden html-tiedoston luominen: Hiiren oikea näppäin > Uusi > HTML-Tiedosto

Uuden html-tiedoston luominen jos listassa ei ole suoraan "Luo uusi HTML-Tiedosto": Hiiren oikea click > Uusi > Tekstitiedosto ja varmistathan että tunnettujen tiedostotyyppien tunnisteet eivät ole piilotettuna! Mikä tahansa kansio > Asetukset/Tools > Kansion Asetukset / Folder Options > (välilehti:) Näytä / View > Piilota tunnettujen tiedostojen tunnisteet / Hide extensions for known filetypes (ruksi pois) Kun olet luonut uuden tekstitiedoston ja näet .txt-päätteen, nimeä tiedosto index.html-nimiseksi painamalla tiedosto valittuna F2 tai Oikea hiiren näppäin > Nimeä uudelleen.

Nyt sinulla pitäisi olla oma kansio työpöydällä, jossa on tekemäsi tyhjä index.html-tiedosto. Etusivun nimi on aina index.html, sillä selain tunnistaa muiden saman kansion sivujen nimistä index-nimen ja siirtyy sinne ensimmäisenä. Avaa tiedosto Windowsin Notepadilla (Hiiren oikea näppäin > Avaa > Notepad) tai jollain muulla haluamallasi raakatekstinkäsittelyohjelmalla (Wordpad tai Word -tyyppiset ohjelmat soveltuvat tähän huonosti!).
Ennen kuin lähdetään koodaamaan on syytä pitää mielessä että XHTML-kielen tagit kirjoitetaan aina pienellä (<body>) toisin kuin perinteisen HTML-kielen tagit voi kirjoittaa myös isolla (<BODY>). Itse XHTML-koodi on helppoa ja loogista. XHTML-sivu tarvitsee tietyt pakolliset määritelmät, jotta selain osaa lukea sitä. Sivu aloitetaan yleensä dokumenttityypin määrittelyllä ja <html>-tagilla. Tässä esimerkissä käytämme dokumenttityyppiä XHTML 1.0 Transitional, joka on yksi suosituimmista. Transitional on yleensä aina vapaampi kuin Strict, mikä myös yksi syy sen suosioon, sillä koodin ei tarvitse olla niin pikkutarkkaa verrattuna Strictiin ja silti se on yhtä toimiva.

Ensin siis luodaan dokumenttityyppi ja html-dokumentin määritelmä:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

W3.orgin linkit ovat vain varmisteita siitä että sivu tulee xhtml-kieliopillisesti tarkastetuksi.

Head-osa, eli sivun pää:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<title>Otsikko</title>

<link rel="stylesheet" href="tyylit.css" type="text/css" />

<link rel="icon" href="favicon.gif" type="image/gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="bookmark icon" href="favicon.ico" type="image/x-icon" />

</head>

Head sisältää paljon erilaisia sivun kokonaisuuteen vaikuttavia määritelmiä, joista tärkeimpiä on mm. tyylitiedoston määrittäminen. Aivan ensimmäisenä säädetään se pakollinen: Character Set, eli kirjaimien koodaus, skandit. Charset auttaa user agenttia, eli usein selainta tai käyttöjärjestelmää ymmärtämään tekstiä. Yleensä käytetään utf-8:aa, sillä se on käyttäjäystävällisempi ainakin niille ketkä käyttää useampia kieliä sivuillaan. Jos sivulla on utf-8 käytössä, se ei ymmärrä automaattisesti Ä eikä Ö kirjaimia koodissa, vaan tulostaa ne kysymysmerkkeinä tai epämääräisenä Ã¤ tai Ã¶ -merkkeinä, joten erikoismerkit pitää merkata koodiin tietyillä merkeillä. Siksi myös muitakin charsettejä voi harkita. Meillä eurooppalaisilla suosittu on usein iso-8859-1 tai iso-8859-2 (iso-8859-?).

Head tagien väliin laitetaan yleensä meta-määritelmiä (hakusanoja ja tietoja), tyylimääritelmiä, scriptimääritelmiä, tai vaikkapa pieniä kuvakkeita, kuten ylläolevassa esimerkissä. Polut ovat suhteessa samaan kansioon, ellei toisin määritetä.

Seuraavaksi on vuorossa Body- eli ruumisosa, johon laitetaan sisältö ja ulkoasulliset rakenteet. Huomaathan että tavalliset rivinvaihdot eivät tulostu html-sivulla rivinvaihdoiksi!

Aloituskoodi näyttää siis yleensä (kokonaisuudessaan) tältä:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<title>Otsikko</title>

<link rel="stylesheet" href="tyylit.css" type="text/css" />

<link rel="icon" href="favicon.gif" type="image/gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="bookmark icon" href="favicon.ico" type="image/x-icon" />

</head>
<body>

</body>
</html>
Tässä vaiheessa olet luultavasti saanut aloituskoodin kokoon html-tiedostoosi. Tallenna tiedosto ja katsele sitä selaimellasi: Avaa selain (mitä sitten käytätkin) ja kansio, jossa on html-tiedostosi. Raahaa/siirrä index.html hiirelläsi selainikkunaan ja sivun pitäisi aueta. Tässä vaiheessa et näe vielä mitään muuta kuin valkoisen sivun, jonka otsikkona on Otsikko. Jos kaikki meni näin, olet hyvässä vaiheessa! (joissakin html-tekstieditoreissa on oma esikatseluikkuna, mutta jos sinun käyttämässäsi ei ole edellä opetettu keino tulee tarpeeseen)

Seuraavaksi on aika luoda sivulle rakenne, sisältö ja ulkoasu. Kaikki nämä tehdään sivun <body>-tagejen väliin. Ulkoasussa ensimmäisenä on yleensä aina ns. "header", sivun ylin osa, mutta nyt kun luomme grafiikatonta ulkoasua, headerin sijaan voidaan hypätä suoraan sisältöön. Luodaan siis uusi <div> <body>-tagin sisään:
<div class="loota">

<div class="boksi">

<h1>Otsikko</h1>

Minun ensimmäinen sivuni.

</div>
</div>
<div> on rakenteellinen elementti. Ennen käytettiin <table>-tageja, eli taulukoita joiden käyttäminen ulkoasussa ei ole nykyään niin standardien mukaista. class on tyylimääritelmä ja antaa diville tyylimääritelmän nimen tyylitiedostossa, tälläkertaa loota. Jatkossa voit nimetä eri tagit miksi haluat.

<h1>-tagi on suurin otsikkotagi. Muita tageja ovat ainakin <h2>, <h3> ja <h4>.

Sivusi pitäisi näyttää nyt jotakuinkin tältä:

Otsikko
Minun ensimmäinen sivuni.

Älä vielä huolehdi sivusi ulkonäöstä! Fontit ja taustat ovat oletuksia, tausta valkoinen, fontti musta Times New Roman (tai joku muu käyttöjärjestelmästä riippuen). Tyylit luodaan myöhemmin. Pysy vain mukana.

Tässä vaiheessa sivuille voi luoda muuta sisältöä. Jos sisältöä ei vielä ole ja halutaan vain nähdä miltä sivu näyttää, sivuntekijät lisäävät usein Lorem Ipsum -nimistä liirumlaarumia. Lorem Ipsumia voi luoda generaattorilla osoitteessa lipsum.com. Tälle sivulle luomme huvin vuoksi 4 kappaletta (paragraphs) tekstiä, jotta näkisimme miltä se näyttää sisällössä. Eli korvataan "Minun ensimmäinen sivuni."-teksti "Lorem ipsum...."-tekstillä ja lopputulos näyttää tältä:

Otsikko
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eros libero, lacinia sed, facilisis ut, ultrices in, felis. Pellentesque sit amet odio. Praesent suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin est. Maecenas vel orci. Curabitur ipsum. Suspendisse sit amet leo. Praesent suscipit. Cras ante. Maecenas ultrices adipiscing leo. Mauris aliquet aliquam orci. Aliquam suscipit dignissim lacus. Phasellus id tellus. In hac habitasse platea dictumst. Morbi adipiscing, turpis quis cursus aliquet, elit quam tempor nisl, feugiat iaculis ipsum neque non nulla. Nullam odio ligula, convallis vitae, lobortis fringilla, aliquam eu, magna. Proin at pede nec magna vulputate blandit. Vestibulum aliquet sollicitudin est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam sit amet leo vitae magna ornare ultrices. Sed in ante.
Avaa sivu varmistaaksesi sen ulkonäkö >
Nyt olemme luonee perussivun. Seuraavaksi luomme yksinkertaisen valikon. Nykyisten standardien mukaan valikot ovat listassa. Luomme siis uuden linkkilistan, josta sovellamme valikon CSS-tyylimääritelmillä. Emme myöskään käytä mitään monimutkaisempaa valikkomuotoa, vaan teemme kaiken yksinkertaisesti jotta asia pysyisi mahdollisimman helppona. Lisätään siis seuraavanlainen koodi ennen otsikkoa:
<ul class="valikko">
<li><a href="sivu1.html">Sivu 1</a></li>
<li><a href="sivu2.html">Sivu 2</a></li>
<li><a href="sivu3.html">Sivu 3</a></li>
</ul>
Huom! voit päättää sivujen nimet itse, mutta tässä esimerkissä sivut ovat sivu1.html, sivu2.html ja sivu3.html ja niiden täytyy olla juuri sen nimisiä miksi ne on määritelty. Koko sivun lähdekoodi näyttää tältä:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<title>Otsikko</title>

<link rel="stylesheet" href="tyylit.css" type="text/css" />

<link rel="icon" href="favicon.gif" type="image/gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="bookmark icon" href="favicon.ico" type="image/x-icon" />

</head>
<body>

<ul class="valikko">
<li><a href="sivu1.html">Sivu 1</a></li>
<li><a href="sivu2.html">Sivu 2</a></li>
<li><a href="sivu3.html">Sivu 3</a></li>
</ul>

<div class="loota">

<div class="boksi">

<h1>Otsikko</h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eros libero, lacinia sed, facilisis ut, ultrices in, felis. Pellentesque sit amet odio. Praesent suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin est. Maecenas vel orci. Curabitur ipsum. Suspendisse sit amet leo. Praesent suscipit. Cras ante. Maecenas ultrices adipiscing leo.

Mauris aliquet aliquam orci. Aliquam suscipit dignissim lacus. Phasellus id tellus. In hac habitasse platea dictumst. Morbi adipiscing, turpis quis cursus aliquet, elit quam tempor nisl, feugiat iaculis ipsum neque non nulla. Nullam odio ligula, convallis vitae, lobortis fringilla, aliquam eu, magna. Proin at pede nec magna vulputate blandit. Vestibulum aliquet sollicitudin est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam sit amet leo vitae magna ornare ultrices. Sed in ante.

</div>
</div>

</body>
</html>
...ja katseltuna sivu näyttää jotakuinkin tältä.

Valikon tyylimäärittelyt jatkuvat alempana, mutta kannattaa tehdä asiat järjestyksessä ettet mene sekaisin.
CSS-määritelmiä on paljon. Pystyisin selittämään kaikki, mutta se veisi liikaa aikaa ja silloin tämä opas paisuisi älyttömän pitkäksi. Siksi pyydänkin sinua käyttämään näitä CSS-ominaisuuslistoja samalla kun teet: CSS Properties | HTML Dog (loistava), All CSS Properties Listed Alphapetically (ihan hyvä), Cascading Style Sheet Properties (hyvä), W3: Full property table (w3:n oma klassinen lista, ihan hyvä), W3Schools Online (loistava).

Tyylitiedosto tehdään samalla tavalla kuin html-tiedosto, eli uusi tiedosto (mikä tahansa). Nimeä tiedosto: tyyli.css. Avaa tyyli.css tekstieditorilla. Yleensä ensimmäisenä luodaan tyylimääritelmät <body>-tagille, eli käytännössä koko sivulle:
body {
font-family:geneva, verdana, tahoma, georgia, arial;
font-size:small;
color:#00800A;
line-height:18px;
background:#222222;
width:600px;
margin:30px auto;
}
Ylläolevat pienet tyylimäärittelyt muuttavat jo paljon sivun ulkonäköä. Voit seurata sivun kehitystä päivittämällä sitä (tai HTMLKitissä esikatseluikkunasta katselemalla).

font-family (nimensä mukaisesti) määrittää fonttityypin. Ensimmäinen fontti on ensisijainen fontti, jos sitä ei löydy, seuraava fontti tulee voimaan, jos sitäkään ei löydy, siitä seuraava ja niin edelleen. Jos mitään määritettyjä fontteja ei löydy, järjestelmän oletusfontti tulee voimaan (windowsissa yleensä Times New Roman). Yleisiä toimivia fontteja ovat ainakin arial, times new roman, sans-serif, serif, courier new, times, times new roman, georgia, monospace, verdana

font-size (nimensä mukaisesti) määrittää fontin koon. Kokomuuttujia ovat pikselit (esim. 17px), em-yksiköt (1em = noin 16px, esim. 1.2em) ja xx-small (pienin), x-small (pienempi), small (pieni), normal (tavallinen), large (suuri), x-large (suurempi), xx-large (suurin).

color määrittää värin. Väri muodostetaan HEX-arvoista tai yleisistä väreistä kirjoitettuna (black, blue, yellow, red...). Väriarvot menevät RGB kaavan mukaan; #FF0000 on kirkkaan punainen, #00FF00 on kirkkaan vihreä, #0000FF on kirkkaan sininen. Näitä sekoittamalla saadaan muita värejä (esim. #FFFF00 on keltainen). Kirkkain arvo on F ja mitä pienin numero, sitä tummempi väri (esim. #FFFFFF on valkoinen, #666666 on vaalea harmaa, #999999 vaaleampi harmaa). Netissä on paljon hyviä värikarttoja, kuten HC-Codes-värikartat.

line-height on (taas nimensä mukaisesti) rivin korkeus eli riviväli. Teksti erottuu paremmin jos riviväli on tarpeeksi iso. Sopiva on yleensä jo 17 pikseliä (17px), mutta esim. blogeissa suositaan isompaa riviväliä.

background on tausta. Taustavärin voi myös määritellä background-color määritelmällä, mutta säästää aikaa kun kirjoittaa pelkän backgroundin, sillä se kattaa myös värit. Jos haluaa taustakuvan JA -värin sivuillensa, voi käyttää kahta eri merkkaamistapaa. Nopeampi tapa ei ole niin selkeä hahmottaa, mutta toimii.
Esimerkkejä:
background:url(http://sivusi-osoite.net/tausta.jpg) #222222 right no-repeat;
Sama järjestelmällisemmin:
background-color:#222222;
background-image:url(http://sivu.fi/tausta.jpg);
background-position:right;
background-repeat:no-repeat;

width määrittelee leveyden, kun taas height sen korkeuden. Jos halutaan kohde venymään, kiinteää kokoa ei määritellä vaan se jätetään määrittelemättä.

margin määrittää marginaalin, ylimääräisen tilan kohteen reunoilla. Margin on tärkeä monimutkaisempien ja rakenteellisempien ulkoasujen tekemisessä. Tässä ulkoasussa 30px auto 30px on vertikaalinen marginaali ja auto on horisontaalinen marginaali. Kuten mitä tahansa muuta css-tagia margintakin voidaan käyttää kahdella eri tavalla, esimerkki:
margin:10px 12px 24px 8px;
Ylläolevan esimerkin peräkkäiset numerot menevät myötäpäivään ylhäältä aloittaen: margin:top right bottom left, kun taas tässä esimerkissä näin:
margin-top:10px;
margin-right:12px;
margin-bottom:24px;
margin-left:8px;

*
Jatketaanpa. Oletuslinkit ovat häiritsevän sinisiä. Muutetaanpa niitä hieman paremmannäköisiksi:
a, a:link {
color:#777777;
text-decoration:none;
font-style:none;
}
a:visited {
text-decoration:line-through;
color:#666666;
}
a:hover, a:active {
color:#999999;
text-decoration:none;
}
a on mikä tahansa linkki, oli se sitten linkitetty kuva tai jokin muu elementti. a:link on tavallinen linkki. a:visited on vierailtu linkki. a:hover on linkki, jonka päällä on hiiri. a:active on linkki jota klikataan juuri. Tässä esimerkissä käytämme samanlaista efektiä, jota käytän tällä sivulla (vierailtu linkki: text-decoration:line-through). Muita CSS-muuttujia ovat ainakin underline (alleviivaus), none (ei mitään).

Nyt sivu on saanut kokonaan uudenlaisen ilmeen!

Tässä kohtaa luomme hieman unohtuneen valikon loppuun:
ul.valikko {
background:#121212;
margin:0;
padding:5px;
font-size:18px;
}
ul.valikko li {
display:inline;
list-style-type:none;
list-style:none;
padding:0 0 0 10px;
}
ul.valikko li:after {
content:" /";
}
background laitettiin valikkoon hieman vaaleammaksi, jotta se näyttää erottuvan sivun taustasta. margin ja padding ovat 0, koska ei nyt haluta mitään ylimääräisiä välejä (ellet itse halua kokeilla). Jos joku on 0, se ei tarvitse välttämättä yksikköä (esim. px) peräänsä.

display:inline pakottaa listan vaakatasoon. Näin saadaan standardinmukainen horisontaalinen lista. list-style-type:none ja list-style:none poistavat luettelomerkit. padding:0 0 0 10px laittaa kymmenen pikselin välin jokaisen listan elementin oikealle puolelle.

:after ja :before määritelmät ovat niinsanottuja pseudo-elementtejä, joita käytetään hienosäätöön silloin kun ei haluta koskea html-sisältöön. Siispä ul.valikko li:after määrittelyissä content:" /" luo jokaisen listaelementin jälkeen kauttaviivan kahdella välilyönnillä. Näin saadaan mukavannäköinen valikko.

Ja sivuhan näyttää tässä vaiheessa tältä.
Sivu näyttää jo nyt aika perushyvältä. Vielä tarvitaan pari välttämätöntä elementtiä, jotta sivu täyttäisi perus grafiikattoman sivun edellytykset. Eli luodaan yksinkertaiset tyylimääritelmät lootalle ja boksille:
div.loota {
background:#333333;
}
div.boksi {
padding:10px;
}
Voilá! Katso mitä olet saanut aikaan.

Headeria, eli sivun yläosaa emme luoneet, mutta tämä olikin vain grafiikaton esimerkki. Yksinkertaisen footerin saat lisäämällä <div>in sivun loppuun ennen sivun viimeisiä lopetustageja:
<div class="footer">
© Matti Meikäläinen 2007
</div>
...ja tyylit:
.footer {
color:#444444;
font-size:11px;
padding:3px 0 0 15px;
}
Laitetaanpa samalla hienosäädöt otsikoille:
h1 {
font-family:georgia, times;
font-weight:lighter;
color:#6EB886;
font-size:30px;
text-transform:lowercase;
}
Täydellinen lopputulos!
Usein sivut pitäisi saada nettiin. Netissä on monia hyviä hosting-paikkoja, joista yksi on http://freehostia.com. Mene sivuille ja klikkaa vasemmassa laidassa olevaa "Free Hosting"-linkkiä, rullaa alas, paina "Sign Up Now >>" ja täytä kaikki kentät (paitsi optional). Tämän jälkeen lue Terms and Conditions ja paina "Place the Order". Huom! Freehostian lomake ei hyväksy ä tai ö -kirjaimia, joten Jyväskylä on kirjoitettava a-kirjaimilla: "Jyvaskyla". Lomakkeessa on pakollinen "State"-kohta, laita siihen "Alabama" ja Zip-numberiin Alabaman numero "35291". Freehostia tarjoaa ilmaiseksi 250 MB levytilaa ja 5 GB trafiikkia. Saat pian sähköpostia freehostialta, jossa on tarvittavat tiedot sivujen nettiin saamiseksi (jos et halua freehostiaa, voit etsiä lisää Googlesta tai vaikkapa tältä sivulta).

Sivut siirretään nettiin FTP:n avulla. Hyviä FTP-ohjelmia ovat mm. FileZilla (paras), CoreFTP (hyvä), SmartFTP (hyvä), WS_FTP (vanha, mutta toimiva). Voit ladata ohjelmat ilmaiseksi heidän sivuiltaan. Itse suosittelen FileZillaa.

Kun laitat sivuja nettiin, sinun täytyy tietää
1. Isäntäpalvelin (filezillassa "Address" / "Host" -kohta) mihin yhdistät (esim. esimerkkisivu.freehostia.com) ja portti (usein 21)
2. Salasana ja käyttäjä

Kun olet saanut tiedot sähköpostiin, olet vapaa siirtämään tiedostoja sivuillesi. Laitat vain oikeat tiedot FTP-ohjelmasi lomakkeisiin ja yhdistät.

Ulkoasun tekeminen Photoshopilla

tyhjä(jotta kakkonen tulee ekana)
Nyt kokeilemme graafisen ulkoasun luomista. Koska ulkoasu voi olla sinun esikoisesi, luomme sen käyttämällä kiinteää kokoa. Näytön erityispuitteita tukeva venyvä graafinen ulkoasu vie aikaa ja on vaativampi toteuttaa.

Aivan ensimmäiseksi ennen kuin aloitat, paina X ja sen jälkeen perään D -näppäintä. Näin varmistat että foreground ja background- ( edusta ja tausta-)värit asettuvat oletukseksi (jos sinä tai joku muu on käyttänyt ohjelmaa aikaisemmin ja muistiin on jäänyt vanhoja värejä).

Ensimmäisenä sinun täytyy tietysti luoda uusi tiedosto klikkamalla valikosta File > New tai painamalla näppäinyhdistelmää CTRL + N. Eteesi avautuu ikkuna, johon määritellään uuden työn koko pikseleissä, resoluutio ja taustaväri. Resoluutio saa yleensä olla oletus (riippuen siitä mikä kentässä nyt sitten onkaan), mutta laitetaan taustaväri valmiiksi valkoiseksi, jotta sitä ei tarvitse erikseen värjätä. Kokona käytettäköön 900 x 900 pikseliä.

Nyt sinulla pitäisi olla edessäsi 900 x 900 pixelin kokoinen valkoinen kenttä. Photoshop yleensä pienentää isommat työt asteen pienemmäksi, joten valitse Zoom Tool (eli suurennuslasi) tai paina Z ja klikkaa ylhäältä Actual Pixels tai mallaa painamalla kerran CTRL ja + -näppäinyhdistelmää, jos se on nopeampaa. Tarkista että Photoshopin ohjelman otsikkopalkissa näkyy "100%" ennen kuin lähdet piirtämään ulkoasua.

Seuraavaksi luodaan uusi taso, eli layeri (onnistuu myös nopeammin painamalla CTRL + SHIFT + N). Tason luominen auttaa graafisten elementtien erottelussa ja niitä luodaan, jotta olisi aina vain helpompi palata takaisin tekemään muutoksia. Hyvässä ulkoasussa on kymmenittäin, ehkä jopa sadoittain erilaisia tasoja eri elementeillä.

Layerin luomisen jälkeen luodaan päärakenne. Seuraavaksi otetaan Rounded Rectangle Tool tai vaihtoehtoisesti mikä tahansa muu muoto, mutta monimutkaisempia muotoja, kuten ellipsiä, polygonia ja mukautettua ei kannata käyttää ulkoasun päärakenteessa, sillä esimerkiksi ympyränmuotoinen sivu on epäselkeä ja aloittelijalle hankalasti toteutettavissa.

Seuraavaksi määritellään Rectangle-objektille kiinteä koko (vaikka usein olenkin tottunut vetämään koon lonkalta). Laitetaan kooksi modernit 600 x 700 pikseliä:

Mallaa Rectangle hiirelläsi johonkin keskelle työtä. Musta väri on aluksi sen takia että näemme missä objekti on.

Blending options sisältää jokaisen tason kaikki mahdolliset piirteet ja niitä on todella helppo muokata hienon näköisiksi. Klikkaa siis oikealla hiiren näppäimellä tasoasi (Layer 1, jonka voi nimetä halutessaan uudelleen "Layer Properties" -kohdasta) ja valitse Blending options. Tässä vaiheessa kannattaa värjätä objekti valkoiseksi menemällä Blending Optionsissa kohtaan Color Overlay ja valitsemalla valkoisen värin TAI valitsemalla itse objekti Rectangular Margue Toolilla ja painamalla CTRL + BACKSPACE, jotta musta väri häviää. Seuraavaksi mene kohtaan Outer Glow ja laita seuraavat asetukset (klikkaa kuvaa isommaksi):

Nyt meillä on erittäin simppeli rakenne. Sitten luomme kuuluisan headerin, eli sivun yläosan. Hain netistä satunnaisen Mario-aiheisen taustakuvan, jota käytämme headerissa. Valitsin kuvan koska se on värikäs. Huom! Kuva voi olla mikä tahansa kuva, se kannattaa olla itse tehty graafinen luomus, logo, sovellus tai mikä tahansa, mutta esimerkissä käytämme valmiita kuvaa ajan säästämiseksi! Pienensin sitä vähän jo valmiiksi, koska alkuperäinen oli niin iso. Kopioi kuva ja liitä se photoshoppiin painamalla CTRL + V. Sitten paina CTRL + T tai Rectangular Margue Tool (vasen ylänurkka työkaluissa) valittuna oikeaa hiiren clickiä ja "Free Transform":

Vedä vasemmasta ylänurkasta mariota SHIFT-näppäin pohjassa pienemmäksi ja paina sen jälkeen Move Toolia (V) työkalupakin oikeassa ylänurkassa ja Apply. Jos Mario kutistui liian pieneksi, paina valikosta Edit > Step Backwards tai näppäimiä CTRL + ALT + Z ja yritä uudestaan. Ideana on saada mario näkymään headerissa pienentämällä sitä sopivan kokoiseksi. Reunat voivat mennä vähän yli, sillä kuvaa trimmataan vielä.

Siirrä Mario siten että sen pää on melkein kiinni työn yläosassa ja reunat ovat noin sentin yli molemmilta puolilta rakennetta:

Seuraavaksi paina CTRL-näppäin pohjaan ja klikkaa Layer 1:stä, jossa on tekemämme rakenne, jolloin Layer 1:sen sisältö eli rakenne pitäisi tulla valituksi:

Tämän jälkeen valitse Rectangular Margue Tool - ellei se ole vielä valittuna - ja paina ALT-näppäin pohjaan ja vedä noin 3/4 rakenteesta pois, jotta valituksi jää rakenteen yläosa eli header:

Muistithan tallentaa hyvissä ajoin? Minä tallensin tiedoston "ulkoasu.psd":ksi.

Sitten siirry tasoon, jossa Mario on (todennäköisesti Layer 2) ja paina CTRL + SHIFT + I (eli oikea hiiren click > Select Inverse), paina Delete ja paina CTRL + D (eli oikea hiiren click > Deselect). Jotta saadaan headeriin lisää tyyliä, laitetaan pari määritelmää (klikkaa kuvaa isommaksi):

Seuraavaksi luomme sisältötilan. Valitse Layer 1, jossa rakenteesi on ja klikkaa sitä CTRL pohjassa samalla tavalla kuin aikaisemmin. Mene Select > Modify > Contract ja laita arvoksi 4 pikseliä.

Tämän jälkeen paina CTRL ja ALT näppäimet (molemmat siis) pohjaan ja paina Layer 2:sta, jossa header on. Näin saamme headerin poistettua valinnasta. Sitten luodaan uusi layer painamalla CTRL + SHIFT + N:ää tai toista ikonia vasemmalla roskakorin vieressä (ks. aloitus). Kun uusi layer on luotu ja valinta on edelleen samassa kohtaa, painetaan CTRL + BACKSPACE (backspace: enterin yläpuolella oleva näppäin), jotta valinta saadaan maalattua valkoiseksi ja näin vakinaistettua. Layer 3 on sisältötasomme, johon luomme vielä joitakin reunuksia tyyliksi:

Graafista sivupalkkia on vähän turha ruveta tekemään näin pieneen tilaan, mutta halutessaan sen saa koodattua CSS:llä.

Perussivu olisi nyt koodausta vaille valmis, mutta graafinen valikko on vielä luomatta. Kirjoitin valikon esimerkkitekstit "etusivu infosivu linkkisivu pelit" yhteen putkeen laittamalla jokaisen väliin 7 välilyöntiä. Valitsin fontiksi Georgian, koska se on tyylikäs. Laitoin -100 kerningiä, eli kirjainten väliä, koska se näyttää tyylikkäämmältä. Väriksi valitsin osuvan vihreän keltaista vasten:

Sitten siirrytään taas Blending Optionsiin muokkaamaan valikosta hienon näköisen. Ensin laitetaan vähän Gradient Overlayta, jotta saadaan siitä kristallisen ja loistavan näköisen:

Sitten laitetaan legendaariset reunukset koristamaan valikkoa:

Työn voisi taas tallentaa, ettei kaikki valu hukkaan. Seuraavaksi pilkomme ulkoasun koodausta varten. Ensimmäisenä piilota valikko! Tallennuksen jälkeen kaikki tasot täytyy merkata samaan tasoon (paitsi valikko) (Layer > Flatten Image). Kun näet vain yhden layerin, joka on Background, valitse Crop tool työkalupalkista tai paina C. Croppaa tyhjä tila pois jättämällä hieman tilaa rakenteen varjoille:

Huom! Jos teet kaiken perässä, töistämme ei ehkä tule pikseliltään samankokoisia, mutta sillä ei ole mitää merkitystä jos seuraat ohjeita, sillä kaiken pitäisi silloin mennä oikein.

Rajauksen jälkeen painat taas Move Toolia (V) ja klikkaat "Crop". Siinä on ulkoasusi, tallenna se jpg-muotoon menemällä File > Save for Web... nimellä "kokonaisuus.jpg". Minun kokonaisuuteni näyttää tältä (klikkaa isommaksi):

Muistathan että tallensit tiedoston juuri erilliseksi tiedostoksi, eli sinulla on vieläkin vanha projekti auki. Sulje se, ÄLÄ TALLENNA, sillä tallensit yksitasoisen kuvan juuri erilliseen tiedostoon "kokonaisuus.jpg", anna monitasoisen projektin säilyä!. Avaa seuraavaksi kokonaisuus.jpg photoshopilla siirtämällä se photoshop-ikkunaan. Muistathan taas että koko on 100%, eli ei zoomattuna kuten se tavallisesti on avatessa. Nyt ulkoasu on helppo pilkkoa osiin koodausta varten.

Ota taas Crop Tool (C) ja rajaa yläosa. Ota rajaukseen mukaan sisällön himmeän keltaisen reunuksen yläosa! onhan kyseessä yläosa.

Tallenna header (File > Save for Web...) nimellä header.jpg ja paina sen jälkeen CTRL + ALT + Z tai valikosta Edit > Step Backward. Centeriä, eli keskiosaa ei tarvitse rajata kuin pieni pätkä vertikaalisesti, sillä pystysuunnassa se on jatkumoa:

Tallenna myös center (File > Save for Web...) tälläkertaa nimellä center.jpg. Palaa sen jälkeen takaisin CTRL + ALT + Z tai valikosta Edit > Step Backward ja rajaa footer:

...ja tallenna footer nimellä footer.jpg. Nyt meillä on kolme eri osaa sivusta (klikkaa isommaksi):

Näitä osia käytämme hyväksi koodauksessa. Sulje kokonaisuus.jpg tallentamatta sitä! Avaa työsi, jonka olet tallentanut (ulkoasu.psd), varmista että valikkotekstit ovat tälläkertaa näkyvissä ja tee koko jutusta taas yksitasoinen (Layer > Flatten Image). Valitse Crop Tool (C) ja rajaa valikko:

Et ehkä tässä vaiheessa tajua ideaa, mutta tajuat myöhemmin. NYT EI VIELÄ TALLENNETA, vaan nostetaan valikon korkeutta valitsemalla valikosta Image > Canvas Size. Cm vaihdetaan px -yksiköiksi eli pikseleiksi. Minulla koko oli 32px, jonka kaksinkertaistin 64 pikseliin (tarkista oma kokosi ja tuplaa korkeus:

Background-layer on lukittu, joten valitse kaikki painamalla CTRL + A ja leikkaa valikko painamalla CTRL + X ja sitten liitä se uuteen layeriin painamalla CTRL + V. Tämän jälkeen siirrä valikko ylälaitaan. Tallenna valikko tässä vaiheessa (File > Save As...) seuraavan näköisenä nimellä menu.psd (HUOM PSD):

Luo Layer 1:stä duplikaatti eli kopio painamalla CTRL + J tai oikealla hiiren klikkauksella Duplicate Layer... Siirrä duplikaatti jutun alalaitaan ja tarkista oikea kohta painamalla CTRL pohjassa toista layeria. Ota Burn Tool (O), varmista että exposure on 100% ja käsittele "alemman valikon" tekstejä niin että lopputulos on seuraavanlainen:

Tallenna tiedosto (File > Save for Web...) nimellä "menu.jpg". Nyt valikkokuvasi on valmis. Ylempi on tavallinen ja alempi hover-valikko (kun hiiri menee kohteen päälle).
All done! No ei sinnepäinkään. Useimmille ihmisille vaikein (mutta loppujen lopuksi helppo) vaihe on edessä, eli koodaustyö.

Ensiksi luodaan MELKEIN samanlainen pohja kuin grafiikattomassa ulkoasussa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<title>Otsikko</title>

<link rel="stylesheet" href="style.css" type="text/css" />

<link rel="icon" href="favicon.gif" type="image/gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="bookmark icon" href="favicon.ico" type="image/x-icon" />

</head>
<body>

<div id="header"></div>
<div id="content">

<div class="container">

<h1>Minun sivuni</h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eros libero, lacinia sed, facilisis ut, ultrices in, felis. Pellentesque sit amet odio. Praesent suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin est. Maecenas vel orci. Curabitur ipsum. Suspendisse sit amet leo. Praesent suscipit. Cras ante. Maecenas ultrices adipiscing leo.<br /><br />

Mauris aliquet aliquam orci. Aliquam suscipit dignissim lacus. Phasellus id tellus. In hac habitasse platea dictumst. Morbi adipiscing, turpis quis cursus aliquet, elit quam tempor nisl, feugiat iaculis ipsum neque non nulla. Nullam odio ligula, convallis vitae, lobortis fringilla, aliquam eu, magna. Proin at pede nec magna vulputate blandit. Vestibulum aliquet sollicitudin est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam sit amet leo vitae magna ornare ultrices. Sed in ante.

</div>
</div>

<div id="footer"></div>

</body>
</html>
Ainoat mitä peruspohjaan on lisätty (kun verrataan grafiikattomaan) ovat <div>-tagit header, content, container ja footer. id on tyylimääritelmä, jota saa käyttää vain kerran. class on tyylimääritelmä jota saa käyttää monta kertaa.

Seuraavaksi luomme tyylitiedoston, jonka nimi on tälläkertaa style.css. Tyylitiedoston ensimmäiset rivit ovat seuraavan näköisiä:
body {
background:#ffffff;
margin:20px auto;
text-align:center;
}
Tässä on määritelty taustaväri (#ffffff) ja sivu on keskitetty horizontaalisesti marginilla ja text-alignilla.

Katso headerin koko kansiostasi:

ja tee seuraavanlainen pätkä CSS-tiedostoon:
#header {
background:url(header.jpg) no-repeat;
width:639px;
height:211px;
text-align:left;
}
id-määritelmät luodaan käyttämällä risuaitaa (#) ja class-määritelmät käyttämällä pistettä (.) Nyt kun tiedät headerin koon, lisää myös pituus bodyn määritelmiin, jotta sivu varmasti keskittyy:
width:639px;

eli koko body on nyt tämän näköinen:
body {
background:#ffffff;
margin:20px auto;
text-align:center;
width:639px;
}
Sitten luomme loppujen elementtien määritelmät:
#content {
background:url(center.jpg) repeat-y;
width:639px;
}
.container {
color:#777777;
font-size:13px;
padding:0 30px 0 30px;
text-align:left;
}
#footer {
background:url(footer.jpg) no-repeat;
width:639px;
height:43px;
}
h1 {
margin:0 0 10px 0;
padding:0;
color:#5E8E5E;
font-weight:lighter;
font-family:georgia, tahoma, times;
text-transform:lowercase;
}
ja tallennettuna sivu näyttää tältä.
Sivu näyttää hyvältä ilman valikkoakin. Mutta valikko pitää saada, siispä koodaamme sen. Lisätään html-koodiin valikko listaan headerin sisään:
<div id="menu">
<ul id="nav">
<li id="etusivu"><a href="#">Etusivu</a></li>
<li id="infosivu"><a href="#">Infosivu</a></li>
<li id="linkkisivu"><a href="#">Linkkisivu</a></li>
<li id="pelit"><a href="#">Pelit</a></li>
</ul>
</div>

jolloin koko koodi näyttää tältä:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<title>Otsikko</title>

<link rel="stylesheet" href="style.css" type="text/css" />

<link rel="icon" href="favicon.gif" type="image/gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="bookmark icon" href="favicon.ico" type="image/x-icon" />

</head>
<body>

<div id="header">

<div id="menu">
<ul id="nav">
<li id="etusivu"><a href="#">Etusivu</a></li>
<li id="infosivu"><a href="#">Infosivu</a></li>
<li id="linkkisivu"><a href="#">Linkkisivu</a></li>
<li id="pelit"><a href="#">Pelit</a></li>
</ul>
</div>

</div>
<div id="content">

<div class="container">

<h1>Minun sivuni</h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eros libero, lacinia sed, facilisis ut, ultrices in, felis. Pellentesque sit amet odio. Praesent suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin est. Maecenas vel orci. Curabitur ipsum. Suspendisse sit amet leo. Praesent suscipit. Cras ante. Maecenas ultrices adipiscing leo.<br /><br />

Mauris aliquet aliquam orci. Aliquam suscipit dignissim lacus. Phasellus id tellus. In hac habitasse platea dictumst. Morbi adipiscing, turpis quis cursus aliquet, elit quam tempor nisl, feugiat iaculis ipsum neque non nulla. Nullam odio ligula, convallis vitae, lobortis fringilla, aliquam eu, magna. Proin at pede nec magna vulputate blandit. Vestibulum aliquet sollicitudin est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam sit amet leo vitae magna ornare ultrices. Sed in ante.

</div>
</div>

<div id="footer"></div>

</body>
</html>
Seuraavaksi räätälöidään listasta valikko tyylimääritelmillä:
div#menu {
padding: 170px 0 0 37px;
}
ul#nav {
position: relative;
top: 0px;
left: 0px;
width: 257px;
height: 32px;
list-style-type: none;
list-style:none;
}
ul#nav li a {
position: absolute;
top: 0;
height:32px;
padding:0;
text-indent: -9000px;
overflow: hidden;
background: transparent url(menu.jpg) no-repeat;
}
body li#etusivu a {
background-position: 0px 0px;
width:69px;
left: 0px;
}
ul#nav li#etusivu a:hover {
background-position: 0px -32px;
}
body li#infosivu a {
background-position: -133px 0px;
width:69px;
left: 138px;
}
body li#infosivu a:hover {
background-position: -133px -32px;
}
body li#linkkisivu a {
background-position: -69px 0px;
width:64px;
left: 69px;
}
body li#linkkisivu a:hover {
background-position: -69px -32px;
}
body li#pelit a {
background-position: -207px 0px;
width:69px;
left: 213px;
}
body li#pelit a:hover {
background-position: -207px -32px;
}
Heti ensimmäisenä huomaa, että valikon määritelmät ovat minun tekemälleni kuvalle ja sinun kuvan koko saattaa poiketa huomattavastikin oppaassa olevasta valikosta, joten muokkaathan esim. koon uudestaan koodiin katsomalla menukuva-tiedostosta oikean koon.

Menikö ohi? Todennäköisesti. Tätä menetelmää sanotaan Matrix -menetelmäksi (myös tunnettu Matrix Reloadedina). Näillä tyylinpätkillä luodaan tavallisesta listasta graafinen valikko. Peruspiirteittäin valikko hakee valikkokuvamme (menu.jpg) ja sijoittelee palaset oikeille kohdille listassa. Vaatii paljon aikaa sommitella valikko pikseli pikseliltä kohdalleen mahdollisen taustan kanssa.

Hyvänä esimerkkinä toimii nundroon navigation matrix -esimerkki, josta voi ottaa mallia!

div#menu (voisi myös yhtä hyvin olla pelkkä #menu, div edessä vain varmistaa asian) määrittelee valikon ympäristön. Tässä tapauksessa valikko on sijoitettu paddingilla alemmas ja hieman oikealle, oikeaan kohtaan (padding: 170px 0 0 37px).

ul#nav (myös #nav) sisältää valikkomme määritelmät. Valikkoon on määritelty kiinteä koko (katso kansiosta menu.jpg:n koko) ja poistettu listausmerkki (list-style-type: none, list-style: none)

ul#nav li a sisältää jokaisen valikkolistan linkin tyylimääritelmät. Vain koko on määritelty kiinteäksi (32px), koska ei haluta jokaisen olevan saman levysiä (esim. valikon "linkkisivu"-kohta on pidempi kuin "pelit"-kohta, mutta kaikki ovat yhtä korkeita). text-indent: -9000px ja overflow: hidden piilottavat tekstin pois tieltä. background: transparent url(menu.jpg) no-repeat määrittelee valikkomme taustan, joka on edelleen menu.jpg. ul#nav li a:lla on absoluuttinen sijainti, jotta valikon eri osat saataisiin järjestykseen (ks. seuraava kohta).

body li#etusivu a määrittelee etusivun linkille kuvan paikan ja kiinteän pituuden (background-position: 0px 0px; width:69px)

ul#nav li#etusivu a:hover määrittää hoverin tyylit (eli hiirieleen, kun hiiri menee etusivu-linkin ylle) eli tyylimääritelmä hakee taustan oikean kohdan jälleen menu.jpg:stä (aiemmin määritelty jokaisen valikkolistan linkkiin) yksinkertaisesti: background-position: 0px -32px

body li#infosivu a määrittelee sitten seuraavan valikon kohdan, infosivun kohdan. Se on vähän edempänä, joten sitä pitää siirtää käyttämällä absoluuttista sijaintia hyväksi: left: 138px (eli paljonko vasemmalta siirtyy oikealle -> pitää mallata pikseli pikseliltä oikea kohta)

Sitten sama juttu jokaiselle. leftiä tulee aina lisää sitä mukaa kun objekteja halutaan saada oikeammalle. Koska kiinteä korkeus on määritelty niin matalaksi valikko taipuu automaattisesti vaakatasoon ilman mitään rivitysmääritelmiä, mikä olisi display: inline.

Täydellinen lopputulos!
Se olikin sitten siinä. Vielä voi tehdä joitakin pikku muutoksia mitä mieleen tulee ja tärkeää on tarkistaa että sivu on validi. Minun lopputulokseni tarkistui Validiksi XHTML 1.0 Transitionaliksi ensiyrittämällä.

Kun sisältö ja muut sivut ovat kunnossa, onkin aika julkaista sivu netissä.

Toivottavasti opit jotain uutta :) koodailemisiin!

Aloittelijan opas: XHTML & Www-sivun rakentaminen

Sisältö

Grafiikattoman ulkoasun tekeminen

Otsikko

Otsikko

Ulkoasun tekeminen Photoshopilla