Virtuaalimaailma tänään

This post is password protected. To view it please enter your password below:

Password:

This post is password protected. To view it please enter your password below:

Password:

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.