Virtuaalimaailma tänään

Tämä postaus sisältää kirjoitukseni ht.netin ketjuun kuinka niin ‘virtuaalimaailma’. Lähinnä omaksi ilokseni.

–

Olen sitä mieltä, että nykyiset virtuaaliharrastajat ovat hemmoteltuja pentuja, jotka eivät osaa tehdä mitään itse. Olen myös sitä mieltä, että suurin osa virtuaaliharrastajista käyttää liikaa aikaa menestyksen tavoitteluun tietämättä edes, mitä menestys on.

Maailmassa on paljon harrastuksia, jotka maksavat. Itse asiassa ainoa ilmainen harrastus lienee haaveilu. Siis nimenomaan oman pään sisällä tapahtuva haaveilu, virtuaalihevoset ovat kokonaan toinen juttu. Jos haluat harrastaa virtuaalihevosia, joudut aluksi hankkimaan itsellesi tietokoneen ja nettiyhteyden ja maksamaan sähkölaskut. Jos voit käyttää jonkun toisen nettiä ilmaiseksi, hyvä sinulle.

Jos haluat vain tehdä jotain kivaa ilmaiseksi, kulusi jäävät siihen. Voit ladata ilmaisia ohjelmia ja käyttää vapaasti kopioitavia kuvia ja ulkoasuja. Sinun ei tarvitse koskaan maksaa kenellekään euroakaan, eikä edes kisoja, tekstejä, kuvia tai leiskoja.

Jokaisella on oikeus päättää itse, haluaako maksaa enemmän. Kukaan ei pakota sinua ostamaan domainia tai hankkimaan tallillesi toisen ihmisen tekemää ulkoasua/valokuvaa/tekstiä/kisakalenteria.

Mielestäni kenelläkään, joka ei tee kaikkea tallilleen itse, ei ole oikeutta valittaa hintojen tasosta. Hinnat ovat mitä ovat ja kaikki tietävät ne jo ennen ostopäätöstä. Jos päätät ostaa 5 € tai 20 sijoituksen tai 4 rakennekuvan ulkoasun, se on oma valintasi. Kukaan ei pakota. Voisit ihan yhtä hyvin jättää ostamatta tai päättää, että ostat vasta, kun saat samantasoisen 3 eurolla, 10 sijoituksella tai 2 rakennekuvalla.

Hinnoista valitus kuulostaa minusta vain hemmoteltujen pikkupentujen ruikutukselta. Kyllä, tämä on virtuaalimaailma, mutta se ei tarkoita, että kenelläkään muulla olisi täällä velvollisuus pureskella sinun ruokasi puolestasi.

–

Itse olen harrastanut virtuaalihevosia noin 9 vuotta. Tämä on sen verran tärkeä harrastus, että olen valmis maksamaan, jos saan sillä, mitä haluan. Tällä hetkellä tiedän, ettei juuri kukaan (leiskantekijä, valokuvaaja) pysty tarjoamaan miulle sitä, mitä haluaisin, joten en maksa.

–

“jos on olevinaan virtuaalimaailma, eikö kaiken pitäisi olla virtuaalista, ettei mikään tapahtuisi oikeasti?”

Miksi pitäisi? Onko joku miun huomaamattani säätänyt virtuaalimaailmaan jotain lakeja, jotka määräävät, kuinka tätä pitäisi harrastaa?

“jos kaikki alkaisivat pyytää leiskoistaan rahaa, niin sitten sellaiset, joilla ei ole mahdollisuutta (…), eivät saisi leiskoja, jos eivät itse osaisi tehdä.”

Mitä sitten? Jokaisella on mahdollisuus oppia tekemään leiskoja samoin kuin jokaisella on oikeus oppia lukemaan tai laskemaan.

Jos 6-vuotias pikkusiskosi, joka ei vielä ole koulussa eikä osaa lukea, päättäisi haluta alkaa harrastaa virtuaalitalleja, istuisitko hänen vieressään koneella kuusi tuntia päivässä lukien hänelle kaikki hänen haluamansa sivut alusta loppuun vain, koska jokaisella pitää olla yhtäläinen oikeus harrastaa, osasi lukea tai ei?

Sitä paitsi ilmaisia ulkoasuja on olemassa.

–

“miksi mun elämäntehtävän pitäisi olla toisille ihmisille hyvän mielen tuottaminen? Ja ennenkaikkea, miks tuottasin hyvää mieltä sellasille ihmisille, jotka on liian laiskoja tehdäkseen itse.”

Juuri niin. Miulla ei ole oikeastaan mitään sitä vastaan, että auttaisin jotakuta ihmistä. Se tuottaisi hyvän mielen sekä autettavalle että itselle - jos tuottaisi. Mutta kun ei tuota.

Kahdeksan vuotta sitten useampi ihminen pyysi, että laittaisin heidän talleilleen framet (jotka olivat silloin kuumempi juttu kuin liekitetty jäätelö Helvetissä). Niinpä sitten muutin heidän talliensa ulkoasut framemuotoon ja kävin laittamassa koodit GeoCitiesin FileManageriin (ne, jotka eivät käyttäneet sitä, olivat urpompia kuin nykyiset suntuubilaiset). Tallin omistaja hyppi riemusta, kiitti, luki ohjeistukseni framejen käytöstä (”muista laittaa linkkeihin target=’isokehys’”), eli tallinsa kanssa onnellisena, oppi siinä sivussa käyttämään frameja ja parin viikon kuluttua laittoi itse seuraavalle

Jos nyt tekisin jollekulle ulkoasun tai koodauksen, vastaukseksi tulee “kiitos, odotan vielä, haluaako joku muu yrittää” tai “kiitos yrityksestä, mutta olisin halunnut punaiset linkit, otan mieluummin xxx:n tekemän” (en tietääkseni ole niin huono koodaaja, etten osaisi vaihtaa niitä punaisiksi) tai lyhyt ja ytimekäs “kiitos, et varmaan halua palkkaa näin pienestä jutusta”. Sen jälkeen avunpyytäjä nostelisi foorumiketjuaan vielä viikon toivoen, josko paikalle pelmahtaisi joku superhyperübermegaihmeleiskantekijä, joka tekisi hänelle ulkoasun, joka nostaa tallin kävijämäärän kattoon, keksii parannuskeinon syöpään, on täysin ilmainen ja tekijä lupaa vielä kisata pyytäjälle 1 000 sijoitustakin kaupan päälle, ja tekee lopuksi pyytäjän matematiikan kotitehtävät hyppien yhdellä jalalla, viheltäen porilaisten marssia ja soittaen vasemman käden peukalonkynnellä Paranoidia sähkökitaralla. Sellaista ei ilmesty (kuka ei arvannut tätä?), joten pyytäjä päättää, että itse asiassa hänen tallinsa olisikin parempi, jos sillä olisi punainen ulkoasu / otsikossa rajattu shettiksen pää arabin asemesta / mitä tahansa muuta, ja koska muutos tietysti vaikuttaa kaikkeen muuhunkin, on hankittava uusi ulkoasu, uudet hevoset uusine luonteineen ja sukuselvityksineen, uudet kuvat…

On erityisen mieltäylentävää tulla foorumiin ja huomata, että se tyyppi, jolle koodasin viime viikolla validin XHTMLCSSPHPJSwhatever-ulkoasun kuudella yhtä korkealla div-kolumnilla, raksuvan poksuvilla superlinkkivalikoilla ja neljä tuntia kuvankäsittelyä vaativilla jokaisen yksittäisen jouhen ympäri rajatuilla grafiikoilla, onkin nyt kyllästynyt talliinsa ja etsii piristykseksi uutta ulkoasua.

Tietysti jokaisella on lupa vaihtaa ulkoasunsa vaikka kerran tunnissa, mutta siitä ei välity kuvaa leiskantekijän työn arvostuksesta. Siksi miuta ei juuri kiinnosta tehdä leiskoja virtuaalihevostelijoille.

–

En tarkoita, että ihmiset olisivat tahallaan epäkohteliaita. Tarkoitan lähinnä sitä, että ihmiset eivät ajattele, että pyyntöjen täyttäminen olisi toisille työtä.

Aika moni ajattellee ainakin alitajuisesti, että ht.net on olemassa sitä varten, että kun sinne laittaa ruinausviestin, joku superhyperüberosaaja tulee ja tekee homman yhdellä taikasauvan heilautuksella. (Jos osaa tehdä ulkoasun, se tarkoittaa tietysti sitä, että osaa tehdä ihan minkälaisen ulkoasun tahansa ihan tuosta vaan. Eihän siinä ole enää mitään miettimistä tai kokeilemista, jos kerran osaa.)

Käytännössä leiskantekijä on 15-vuotias yläkoululainen, joka on koodannut HTML:ää vuoden, eikä oikeastaan ole koskaan kuullutkaan puolista CSS-komennoista, mutta saa kuitenkin aikaan jotain toimivaa niin kauan kuin siinä ei ole asioita x, y ja z, joita hän ei vielä osaa, ja joka tekee grafiikkansa kuvankäsittelyohjelmalla a, joka ei ole ihan niin hyvä kuin Kallis Huippuohjelma b, eikä sen takia pysty tekemään asiaa c, eikä osaa käyttää ohjelmaansa ihan niin hyvin, että osaisi tehdä asiaa d tai asiaa e kovin hyvin. Leiskanteko tarkoittaa paljon kokeiluja, yrityksiä ja erehdyksiä, mutta lopulta ulos sylkeytyy jotakin, josta tekijä on ylpeä.

Leiskan pyytäjä näkee sen sijaan vain jotakin, joka on periaatteessa ihan kiva, muttei kuitenkaan yhtä hieno kuin Virtuaalimaailman Parhaalla Tallilla, ja koska hänen tavoitteensa on tehdä omasta tallistaan vielä parempi kuin Virtuaalimaailman Paras Talli, se ei ihan kelpaa. Kiitos yrityksestä, mutta odotan vielä.

Miusta olisi paljon mukavampaa, jos ihmiset tekisivät itse omat ulkoasunsa. Silloin jokainen voisi kehittää taitojaan rauhassa omaan tahtiinsa, ja kun joku haluaa lähteä kilpailemaan Virtuaalimaailman Parhaan Tallin kanssa (tai ainakin nostamaan tallinsa henkilökohtaisen Hyvän Tallin rajansa yli), hän rasittaisi siinä vain itseään, ei kahtakymmentäkuutta leiskantekijää, joista yhdenkään tekeleet eivät kuitenkaan kelpaisi.

Parin päivän takaisen postauksen jälkeen löytyi vielä enemmänkin mielenkiintoisia pohjia, esimerkiksi ht.netistä Rosetten ketjusta Ulkoasupohjalle kritiikkiä. Kyseinen pohja kertoo sivun asettelusta täsmälleen sen verran, että sivun reunoilla on oranssia ja sivun yläreunassa otsikko ja linkit. Käytännössä sivun varsinaisen sisällön eli tekstit ja kuvat voi asetella sivulle vielä noin miljoonalla tavalla. Pohja ei myöskään anna paljon vinkkejä tulevista tyylimuotoiluista, koosta tai oikeastaan mistään muustakaan.

Siksi jäinkin ihmettelemään SanniS.:n kommenttia “mapatut linkit”. Siis mitä? Eihän tuossa pohjassa määritellä mitenkään, että linkkien tulisi olla mapatut eli toteutettu asiakaspuolen (suomennetaanhan “client-side” niin?) kuvakarttana. Linkit voisi yhtä hyvin leikata omiksi kuvikseen ja toteuttaa kuvalinkkeinä, tai, nihilistisesti, jättää aivan tavallisiksi tekstilinkeiksi. Ottamalla vielä hieman läheisempää kontaktia pilkkuun voidaan huomauttaa, ettei pohjassa itse asiassa edes kerrota kyseisten sanojen olevan linkkejä. Katsojat vain olettavat niin.

Draco huomautti otsikon fontin olevan epäselvä. Ehkä pohjassa, mutta kuka tietää, kuinka paljon oikean sivun otsikkoa on tarkoitus kasvattaa.

Onneksi Rosette teki pohjan itselleen ja koodasikin sen itse. Muuten olisi saanut taas yksi koodaaja itkeä.

Sarjamme virtuaalimaailman sananselityksiä jatkuu. Tällä kertaa mietimme pohjien eli pidemmin ulkoasupohjien tai leiskapohjien syvintä olemusta.

Fyysinen olemus: Suuri kuvatiedosto.

Tarkoitus:

1) Pakottaa ulkoasun koodaaja käsittelemään kuvia.
Esimerkki: Kuka tekis ulkoasuun pohjan?, kirj. wesputin. Ulkoasu olisi ollut mahdollista koodata taittomallin (puhekielessä “Paint-malli”), värikoodien ja kuvien pohjalta. Kuvien ja värien liittäminen pohjaan aiheuttaa tulevalle koodaajalle ylimääräistä työtä, sillä sen sijaan, että hän voisi vain avata editorinsa ja koodata, hän joutuu ensin käyttämään kuvankäsittelyohjelmaa kuvien leikkaamiseen irti pohjasta (kai kaikki tietävät jo, ettei pohjalla oikeasti tehdä koodatessa mitään, se on pelkkä malli samalla tavalla kuin Paint-mallikin, vain hieman suuritöisempi?) ja värikoodien selvittämiseen.

2) Pakottaa koodaaja keksimään kaikki muotoilut omasta päästään.
Esimerkki: huutokauppaan, annan…, kirj. ninnuli. Kaikki kolme huutokaupan olevat pohjat ovat pelkkiä sivuille tulevia kuvia. Pohjasta on jotain hyötyä vain silloin, kun koodaaja pystyy sitä katsomalla ymmärtämään, mitä hänen pitää koodata. Tämä pohja kertoo, että sivulle tulee kaksi kolumnia ja kolme kuvaa. Jos koodaaja koodaa sivulle kaksi kolumnia ja kolme kuvaa, onko tilaaja tyytyväinen? Todennäköisesti ei, sillä hän saa selaimen perusfontin, tavalliset alleviivatut siniset linkit, oletusmarginaalit, -sisennytkset ja -reunukset, muotoilemattomat otsikot, listat, taulukot ja niin edelleen - eli hän joutuu koodaamaan itse kolme kertaa enemmän kuin varsinainen koodaaja saadakseen sivun näyttämään siltä, miltä mielessään ajatteli sen näyttävän. Siis nimenomaan ajatteli, koska pohjaan ei ole merkitty mitään muotoiluohjeita. Käytännössä koodaajat kuitenkin alkavat arvailla ja keksivät omasta päästään muuhun pohjaan sopivat muotoilut - ja tekevät kymmenen kertaa enemmän työtä kuin jos ohjeet olisi laitettu pohjaan.

Koodaajat, älkää alistuko! Sanokaa ei huonoille pohjille!

Tervetuloa oppimaan nettisivujen tekemistä Meepun kesäkursseille. Kursseja järjestetään kaksi: XHTML-kurssilla opetellaan XHTML-merkintäkieltä ja CSS-tyylipohjia, ja heinäkuussa alkavalla PHP-kurssilla tutustutaan PHP-webohjelmointikieleen ja MySQL-tietokantoihin. Kurssit on suunniteltu virtuaalitallien omistajille ja ne ovat vaikeustasoltaan sellaisia, että yläasteikäisen pitäisi selviytyä niistä. Mitään ikärajaa tai tallinomistuspakkoa ei kuitenkaan ole.

Kurssi pidetään tässä blogissa. Tätä ensimmäistä oppituntia lukuunottamatta oppituntien merkinnät ovat salasanasuojattuja. Tähän on parikin syytä. Ensinnäkin en halua häiritä niitä ihmisiä, jotka ovat täällä vain lukeakseen tavallisia blogimerkintöjäni. Toiseksi haluan tietää, ketkä kurssia seuraavat, missä tahdissa ja millä menestyksellä. On tärkeää, että saan tietää, mitkä kurssin asioista ovat lukijoille vaikeita ja mitkä helppoja, jotta voin tarvittaessa selittää oleelliset kohdat paremmin, käyttää vähemmän aikaa turhiin asioihin ja opettaa sellaista, mistä on hyötyä mahdollisimman monelle.

Jokainen oppitunti koostuu teoriaosasta ja tehtävistä. Kun olet lukenut teoriaosan, tee tehtävät ja kokoa vastaukset yhdelle nettisivulle. Siirrä sivu nettiin omaan sivutilaasi (tämä opetetaan jo tällä oppitunnilla) ja jätä sivun osoite kommenttina oppitunnin merkinnän perään. Muista jättää kommenttiin sähköpostiosoitteesi sille varattuun kenttään, sillä lähetän sinulle sähköpostitse seuraavan oppitunnin salasanan. Jos seuraava oppitunti ei ole vielä ilmestynyt, saat salasanan heti sen tullessa nettiin. Jos seuraava oppitunti on jo ilmestynyt, saat salasanan, kun seuraavan kerran päivitän blogia, todennäköisesti kahden päivän sisällä. Osallistujamäärää ei ole rajoitettu.

Oppitunteja saa suorittaa haluamassaan tahdissa. Uusia oppitunteja tulee sattumanvaraisesti, tavoite on julkaista niitä muutaman päivän välein. Kurssi loppuu, kun kaikki oleelliset asiat on käsitelty.

–

Oppitunti 1: Ensimmäinen XHTML-sivu

Tarvittavat ohjelmat

Nettisivujen tekemiseen tarvitset tietokoneen, jossa on selain ja tekstinkäsittelyohjelma. Tekstinkäsittelyohjelmaksi suosittelen Windowsiin EditPad Litea, mutta Muistio (Notepad) riittää loistavasti. Linuxissa ja Unixissa on yleensä hyvä valikoima nimenomaan koodaukseen tarkoitettuja tekstieditoreita, voit käyttää mitä haluat. Selaimia kannattaa hankkia mahdollisimman monta, sillä on aina syytä testata, näyttävätkö sivut samalta kaikilla selaimilla. Jokaisella tulisi olla vähintään Firefox, Opera ja Internet Explorer.

Sinun on luonnollisesti osattava käyttää tekstinkäsittelyohjelmaasi ja selaimiasi. Tärkeä selaintoiminto on lähdekoodin katselu. Useimmissa selaimissa sivua klikataan hiiren oikealla painikkeella ja valitaan valikosta lähde, lähdekoodi, näytä lähdekoodi, view source tai vastaava vaihtoehto. Näin voit katsella ja tarvittaessa kopioida sivun koodia. Kokeile.

Koodin kirjoittaminen

Nettisivuja muokataan aina koodimuodossa tekstieditorissa. Sivut avataan kuin tavalliset tekstitiedostot. Kun olet tehnyt koodiin haluamasi muutokset, tallenna sivu ja avaa se selaimessa. Jos haluat tehdä lisää muutoksia, palaa tekstieditoriin tekemään muutokset, tallenna ja katso sitä uudestaan selaimessa.

Firefoxiin on saatavana lisäosia (add-on), joilla sivun koodia voi muokata suoraan selaimessa. Paras tietämäni on Web Developer. Lisäosille on kuitenkin käyttöä lähinnä yksittäisten virheiden etsimisessä. Kokonaisia sivuja niillä ei kannata yrittää koodata.

Sivua tallentaessa tiedostomuodoksi on syytä vaihtaa “kaikki tiedostot” ja sivun nimen loppuun liittää .html-pääte. Tiedostonimen perusteella ei voi päätellä, onko sivu koodattu XHTML:llä vai HTML:llä. Sivuston etusivun nimi on aina index.html (”aina” on suhteellinen sana, joka tarkoittaa tässä sitä, että jos sinulla ei ole leikkikaluna ikiomaa palvelinta, joudut tottelemaan).

Sivuille tulevia muita tiedostoja käsitellään omissa ohjelmissaan: kuvia kuvankäsittelyohjelmissa, videoita video-ohjelmissa, Java-appletteja omana koodinaan ja niin edelleen.

Editoreista

On olemassa ns. WYSIWYG-editoreita, jotka kirjoittavat koodin puolestasi, kun asettelet elementit ohjelmassa paikoilleen vetämällä niitä hiirellä. WYSIWYG on lyhenne sanoista what you see is what you get eli saat sitä mitä näet. Ohjelmat tunnetaan myös kuvaavammalla lyhenteellä WYSBANRTWYG, what you see bears absolutely no relation to what you get eli sillä mitä näet ei todellakaan ole mitään tekemistä sen kanssa mitä saat. Emme käytä tällä kurssilla editoreja siitä yksinkertaisesta syystä, etteivät ne toimi tarpeeksi hyvin.

HTML, XHTML ja CSS

Sivut tehdään kurssilla XHTML-kielellä. XHTML on lyhenne sanoista eXtensible HyperText Markup Language eli laajennettava hypertekstin merkintäkieli. XHTML on HTML:n seuraaja, jonka merkintätavat poikkeavat hieman edeltäjästään. On suositeltavampaa opetella XHTML kuin HTML, sillä HTML:n kehittäminen on jo (melkein) lopetettu kun taas XHTML:n uusia versioita valmistellaan koko ajan. Jokainen, joka osaa XHTML:n, osaa myös HTML:n.

XHTML:n ja HTML:n merkittävimmät erot ovat seuraavat: (tarkoitettu luettavaksi lähinnä niille, jotka osaavat jo HTML:ää)

• Kaikki tagit ja attribuutit kirjoitetaan pienillä kirjaimilla. Oikein: <a href=”url”>Linkki</a> Väärin: <A Href=”">Linkki</A>
• Tyhjät tagit on päätettävä. Oikein: <img alt=”kuva” /> Oikein: <img alt=”kuva”></img> Väärin: <img alt=”kuva”>
• Tagit on suljettava avausjärjestyksessä. Oikein: <p><strong>Tekstiä</strong></p> Väärin: <p><strong>Tekstiä</p></strong>
• Kaikki parametrit esitetään lainausmerkeissä. Oikein: <a href=”osoite”> Väärin: <a href=osoite>

XHTML:llä luodaan sivun semanttinen koodaus eli merkitään sivun rakenneosat ja niiden suhteet toisiinsa. Ulkoasua määritellään CSS-kielellä eli porrastetuilla tyyliarkkeilla. Käytännössä: XHTML määrittelee, että tietty osa sivusta on otsikko, CSS määrittelee, että se esitetään muuta tekstiä suuremmalla fontilla.

Hieman sanastoa

Elementti on sivulla esiintyvä kokonaisuus. Elementti voi tilanteesta riippuen olla tekstikappale, useita tekstikappaleita, kuva, taulukko tai joskus jopa koko sivu.

Tagi on yksi XHTML-koodi, esimerkiksi <a> tai <img>.

Attribuutti on XHTML-koodiin liittyvä määre. Koodissa <a href=”url”> a:lla on attribuutti href.

Parametri on attribuutin arvo. Koodissa <a href=”url”> href:n parametri on url.

Kirjoitussääntöjä

Tagit ja attribuutit kirjoitetaan aina pienillä kirjaimilla. Parametrin arvo kirjoitetaan yleensä pienillä kirjaimilla, ellei arvossa ole loogista käyttää myös isoja kirjaimia, kuten esimerkiksi määriteltäessä kuvalle vaihtoehtoinen teksti: <img src=”mattijamaija.jpg” alt=”Tässä kuvassa ovat ystäväni Matti ja Maija.” />

Useimmat tageista esiintyvät pareittain. Elementti alkaa <tagi> ja päättyy </tagi>. Tagin vaikutusalue on aloitus- ja ja lopetustagien välinen alue. On olemassa myös muutama tyhjä tagi, jotka päätetään kauttaviivalla: <img />

Selaimet eivät huomioi koodiin tehtyjä rivinvaihtoja ja ylimääräisiä välilyöntejä. Sisennysten käyttäminen helpottaa koodin luettavuutta.

Sivupohja

Jokaiselta XHTML-sivulta löytyvät samat peruselementit: <html>-elementti, header- ja body-osat, sivun nimi sekä tieto sivun käyttämästä koodauksesta. Käytännössä ne näyttävät tältä:

Tarkistettu ja korjattu 4.6.2008. Kukaan koodausta aiemmin harrastaneistakaan ei sitten nähnyt tarpeelliseksi huomauttaa siitä törkeästä virheestä…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<title>Sivun otsikko</title>
</head>
<body>
</body>
</html>

<!DOCTYPE> määrittää sivun käyttämän koodauksen, tässä tapauksessa XHTML:n versio 1.1. Se kertoo selaimelle, mistä kielen DTD (document type definition, dokumentin tyyppimäärittely) löytyy. Doctypeä on turha opetella ulkoa, riittää kun sen kopioi joka sivun alkuun.

<html> sisältää kaiken sivulle tulevan sisällön. Sen ulkopuolelle ei saa jättää muuta kuin !DOCTYPEn ja mahdollisesti kommentteja. Attribuutteina määritellään XML:n nimiavaruus ja sivun käyttämä kieli.

Header eli <head> ja </head> -tagien välistä löytyvä osa sisältää sivua kuvaavia tietoja, jotka eivät näy sivulla suoraan. Yksi tällainen on <title>-elementti, joka määrittää sivun otsikon. Otsikko näkyy selaimen yläreunassa.

Bodyyn eli <body> ja </body> -tagien väliin tulee kaikki sivulla näkyvä: tekstit, kuvat ja muut elementit.

Tekstin kirjoittaminen sivulle

Teksti kirjoitetaan sivulle kappaleittain. Kappale luodaan <p>-tagilla.

<p>Ensimmäinen kappale</p>
<p>Toinen kappale</p>

Kappaleiden väliin jää erottimeksi tyhjää tilaa. Jos halutaan siirtää tekstiä vain rivin verran alaspäin, käytetään rivinvaihtotagia <br />.

<p>Ensimmäinen rivi<br />
Lisää tekstiä seuraavalla rivillä.</p>

Otsikot

XHTML:ssä on kuusi otsikkotasoa: <h1>, <h2>, <h3>, <h4>, <h5> ja <h6>. h1 on suurin ja h6 pienin. Sivun pääotsikko merkitään h1:llä, alaotsikkoa h2:lla, alaotsikon alaotsikkoa h3:lla ja niin edelleen. Pääotsikkoa ei kannata merkitä muulla kuin h1:lla vaikka h1 näyttäisi liian suurelta, sillä sen kokoa voi aina vaihtaa CSS:llä. Vaikka sivulla olisi otsikkokuva, sivulla on silti syytä käyttää otsikkoa, sillä silloin esimerkiksi hakukoneet ymmärtävät sitä paremmin.

Kommentit

Koodin sekaan voi mihin tahansa kohtaan lisätä kommentteja. Ne näkyvät pelkästään lähdekoodissa, eivät valmiilla sivulla. Kommentointi on erittäin hyvä tapa, joka säästää ennen kaikkea omia hermojasi. Kun myöhemmin törmäät monta vuotta sitten koodattuihin sivuihin, ymmärrät itseäsi paljon paremmin, jos olet myös kommentoinut sivut.

Kommentin koodi on <!– Kommentti on tässä. –>. Kommentti ei saa sisältää kahta peräkkäistä viivaa.

Sivut nettiin, mistä tilaa?

Netissä on useita palveluita, jotka tarjoavat ilmaista kotisivutilaa. Jotkut palvelut ovat parempia kuin toiset, mutta mikä niistä on paras, riippuu kokonaan sivustosta. Yksi tarvitsee paljon sivutilaa, toinen paljon kaistaa, kolmas webohjelmointiominaisuuksia.

Jos sivusto on suuri, tärkeä tai kaupallinen, kannattaa harkita maksullisen palvelun hankkimista ja lukea Domainin osto -tutoriaali.

Sivutilantarjoajien sivuilta löytyy yleensä selkeät ohjeet tunnuksen rekisteröintiin. Jos kyseessä on ulkomainen yritys, sanakirja käteen. Apua saa tarvittaessa kysyä, mutta koska ilmaisen sivutilan tarjoajia on satoja (pieni lista) ja maksullisia vieläkin enemmän, mielestäni on turhaa kirjoittaa täydellisiä ohjeita yhteen tiettyyn paikkaan. Konikomista löytyy muiden kirjoittamia ohjeita Awardspaceen ja Freewebsiin.

FTP

Tavallisimmat tavat siirtää sivut omalta koneelta nettiin ovat FTP ja HTTP. FTP (file transfer protocol, tiedostonsiirtoprotokolla) on tarkoitettu nimenomaan tiedostojen siirtämiseen ja on HTTP:tä nopeampi. Sitä käytetään yleensä erillisen ohjelman kautta. Netistä löytyy useita ilmaisia FTP-ohjelmia. Niiden käyttö on yleensä helppoa: kun yhteys on avattu, siirrettävät tiedostot vedetään yhdestä ikkunasta toiseen. FTP-osoitteen, -tunnuksen ja -salasanan saat sivutilantarjoajaltasi. Ohjeet SmartFTP:n käyttöön.

HTTP

HTTP-pohjainen (hypertext transfer protocol, hypertekstinsiirtoprotokolla) siirto tapahtuu HTTP-sivujen (eli ihan tavallisten nettisivujen) kautta: nettisivulla on lomake, jolla lähetät sivusi nettiin. Yleensä tällaista järjestelmää kutsutaan FileManageriksi. Myös nimeä WebFTP käytetään.

Tehtävät
1. Hanki itsellesi sivutilaa. Tyyli on vapaa: voit rekisteröityä ilmaispalveluun, ostaa tai vaikka ruinata.
2. Luo omalla koneellasi sivu nimeltä sivu.html. Laita sivulle otsikko ja tekstikappale. Ota näytönkaappaus (ohjeet).
3. Nimeä sivu uudelleen index.html:ksi ja siirrä se nettiin sivutilaasi joko FTP:llä tai FileManagerilla.
4. Siirrä ottamasi näytönkaappauskuva nettiin sivutilaasi.
5. Lisää sivulle koodi <p><img src=”vaihda tähän näytönkaappauskuvan osoite” alt=”Näytönkaappaus” /></p> ja siirrä päivitetty sivu nettiin. Jos käytät FTP:tä, ohjelma saattaa kysyä, haluatko ylikirjoittaa (overwrite) vanhan sivun. Haluat.
6. Tarkista, että näet nyt näytönkaappauskuvan sivullasi. Jos se on isokokoinen, ei haittaa.
7. Lisää sivulle seuraavat kysymykset ja vastaukset niihin. Käytä kappaleita ja rivinvaihtoja.
- Oletko ennen tehnyt nettisivuja? Miten ja millaisia?
- Oletko ennen koodannut (X)HTML:ää? Näyttöä koodaamistasi sivuista? Ei tarvitse olla ujo.
8. Kirjoita tähän merkintään kommentti, jossa kerrot sivusi osoitteen. Muista kirjoittaa myös sähköpostiosoitteesi sille varattuun kenttään, muuten en voi lähettää sinulle salasanaa. Koska jotkut ihmiset eivät vain osaa, täsmennetään vielä: samasta kommentista tulee löytyä sekä nimesi, sähköpostiosoitteesi että tekemäsi sivun osoite.

Apua voi kysellä kommentoimalla tätä merkintää, vastailen sähköpostitse.

WYSIWYG, tuttavallisemmin WYSMBWYG tai läheisten ystävien kesken WYSBANRTWYG. Jos minulta olisi kysytty viitisen vuotta takaperin, haluanko enää koskaan nähdä WYSIWYG-editorilla tehtyjä virtuaalitalleja, huutoni olisi kuulunut Iijoelle asti. Nyt huolestutan itsenikin miettimällä, olisiko virtuaalimaailma sittenkin parempi paikka, jos ihmiset käyttäisivät edelleen GeoCitiesin PageBuilderia ja Microsoft FrontPagea.

Vuosituhannen vaihteessa suurin osa virtuaalitalleista sijaitsi Expagessa. Nuoremman polven harrastajille kerrottakoon, että Expagessa ei pystynyt koodaamaan koko sivua alusta loppuun itse, mutta sivulle pystyi liittämään haluamiaan HTML-koodeja. Sivujen tekeminen onnistui melko hyvin myös ilman HTML:n käyttöä. Vuosien 2000 ja 2001 aikana suurin osa talleista siirtyi pois Expagesta, lähinnä GeoCitiesiin. Freewebs oli jo tuolloin olemassa, mutta juuri kukaan ei ollut siitä kuullutkaan. GeoCities tarjosi sivujen tekemiseen kolme vaihtoehtoa. Yksinkertaisinta PageWizardsia ei käyttänyt juuri kukaan, ja vain pieni osa virtuaalihevostelijoista opetteli tässä vaiheessa koodaamaan ja käyttämään File Manageria tai FTP:tä (jota GeoCities ei valitettavasti ole tarjonnut enää vuosiin). Suurin osa valitsi GeoCitiesin WYSIWYG-editorin, PageBuilderin. WYSIWYG on lyhenne sanoista what you see is what you get, se, mitä näet, on se, mitä saat. Ohjelma toimi taitto-ohjelman tapaan: työkaluvalikosta klikattiin esimerkiksi kuvapainiketta ja sitten kuva vedettiin oikeaan paikkaan sivulle. Lopputuloksena oli sivu, jonka pitäisi näyttää selaimessa katseltuna samanlaiselta kuin ohjelmassa. PageBuilder toimi kokonaan netissä, jotkut asensivat omalle koneelleen samalla tavalla toimivan, jonkin verran edistyneemmän Microsoft FrontPagen.

WYSIWYG-editorien ongelmat eivät tietenkään jääneet huomaamatta virtuaalihevostelijoiltakaan. Oikeasti WYSIWYG-sivut näyttävät jokaisella eri koneella katsottuina aivan erilaisilta. Tämä johtuu siitä, että elementtien paikat määritetään absoluuttisesti - tuhannen pikselin päässä ruudun vasemmasta reunasta oleva kuva on suurella resoluutiolla suunnilleen keskellä näyttöä, pienellä resoluutiolla niin kaukana oikealla, että sivua joutuu vierittämään vaakasuunnassa. Tästä WYSIWYG sai lisänimikseen WYSMBWYG, what you see might be what you get, se, mitä näet, saattaa olla se, mitä saat, ja WYSBANRTWYG, what you see bears absolutely no relation to what you get, sillä, mitä näet, ei ole yhtään mitään tekemistä sen kanssa, mitä saat. Tämän lisäksi WYSIWYG-editorien tuottama koodi on niin rumaa ja pitkää, ettei ihminen jaksa lukea tai muokata sitä.

Kehysten muotiintulo vuosituhannen alussa sai ensimmäiset ihmiset opettelemaan oikeaa HTML-koodausta. WYSIWYG-editorit eivät nimittäin suoriutuneet kehysten luomisesta. Varsinainen koodausvimma käynnistyi kuitenkin mielestäni vasta myöhemmin, vuosina 2002-2003, ja syy siihen oli valmisleiskakulttuuri. Valmiita ulkoasuja tarjoavia sivustoja nousi hetken kuin sieniä sateella, ja valmisleiskoja pidettiin paljon tyylikkäämpinä kuin itse PageBuilderilla luotuja. Tietysti silloinkin oli olemassa joukko elitistejä, jotka kelpuuttivat vain omat, valmisleiskoja hienommat tekeleensä, mutta suurin osa virtuaalitallien omistajista siirsi tallinsa kiltisti File Manageriin, jotta pystyi liittämään sivuilleen valmisleiskan koodin. En ole tehnyt asiasta minkäänlaista tutkimusta, mutta veikkaan, että suurin osa nykyisistä koodaustaitoisista harrastajista alkoi oppia HTML:ää juuri tällä tavalla ja näihin aikoihin: ensin File Manageriin kopioitiin valmiin ulkoasun koodi ja sitten siitä alettiin muokata omalle tallille sopivampaa.

Jos valmisulkoasut eivät olisi tulleet muotiin, en usko, että koodaustaito olisi kehittynyt virtuaalihevostelijoiden keskuudessa läheskään samalla tavalla. Valitettavasti asiassa on myös varjopuolensa: WYSIWYG-editorit on tallottu niin pahasti jalkoihin, että nykyään virtuaalihevostelijalla ei ole mitään muuta mahdollisuutta kuin opetella koodaamaan ulkoasunsa alusta asti itse tai ruinata itselleen ulkoasu ja yrittää opetella koodaamaan sen verran, että pystyy käyttämään sitä sivuillaan. (Kuinkahan moni tilausleiska jää käyttämättä sen takia, että tilaaja ei sen saatuaan osaakaan laittaa sitä sivuilleen ja liittää kaikkea tallin sisältöä siihen?)

WYSIWYG-editorit olivat sen verran helppokäyttöisiä, että kuka tahansa pystyi luomaan tallilleen etusivun viidessä minuutissa ja muut sivut kymmenessä. Tästä syntyy tietysti mielikuva nopeasti hutaistuista tusinatalleista, mutta ainakin omakohtaisesti olen huomannut, että mitä nopeammin tallin saa tehtyä, sitä nopeammin pääsee järjestämään varsinaista toimintaa. Lopetusprosentti ei tuohon aikaan ollut todennäköisesti sen korkeampi kuin nykyäänkään. Sen sijaan aloituskynnys on nykyään kamala: aloittelija joutuu ruinaamaan foorumeista ulkoasua jopa viikkoja, ennen kuin voi edes aloittaa tallinsa tekemisen. Toinen vaihtoehto on alkaa opetella heprealta vaikuttavaa koodikieltä, jonka alkeita saa tankata tovin jos toisenkin ennen kuin saa aikaan mitään hienolle tallille soveltuvaa.

Kumpi on lopulta suurempi paha, WYSIWYGit vai ruinaus?