Aloitusopas
Etkö ole koskaan tehnyt kotisivua? Etkö tiedä, mistä sinun pitäisi aloittaa? Tämä sivu on sinua varten.
Sisällysluettelo
- Yleisiä kysymyksiä
- Sivujen rakentaminen suoraan Internetiin
- Sivujen rakentaminen omalla koneella
- Sivujen rakentaminen suoran koodin avulla
- Apua! En ymmärtänyt asiaa X!
Yleisiä kysymyksiä
Maksaako www-sivujen tekeminen?
Ei maksa. Kaikki kotisivujen tekoon tarvittava on saatavilla aivan ilmaiseksi, vaikka halutessaan ohjelmista ja esimerkiksi kotisivutilasta voi myös maksaa. Tämä ei kuitenkaan ole missään nimessä välttämätöntä.
Mitä kotisivujen tekemiseen tarvitaan?
Kotisivuja voi tehdä monella eri tavalla, ja tämän vuoksi myös sivujen tekemiseen tarvittavat välineet vaihtelevat. Kaikki ohjelmat ja tarvikkeet ovat kuitenkin saatavilla ilmaiseksi.
Yksi tapa on tehdä kotisivut suoraan Internetiin. Tällöin ei tarvita mitään muuta kuin toimiva tietokone, hiiri, näppäimistö, selain (ohjelma, jolla selataan www-sivuja, esimerkiksi Mozilla Firefox tai Internet Explorer) ja Internet-yhteys. Yleensä jokaisesta Internetiin yhdistetystä tietokoneesta löytyvät tarvittavat välineet.
Toinen tapa on tehdä kotisivut omalle tietokoneelle ja siirtää ne myöhemmin Internetiin. Tällöin tarvitaan ohjelma, jolla kotisivuja rakennetaan. Ohjelmia on erityyppisiä, niin maksullisia kuin ilmaisiakin, mutta esimerkiksi Windowsin mukana tuleva Muistio (englanniksi Notepad) kelpaa hyvin. Yleensä koneella on oltava myös ns. ftp-ohjelma sivujen Internetiin siirtämistä varten, mutta sivut voidaan siirtää muillakin tavoilla. Ftp-ohjelma ei siis ole millään muotoa pakollinen.
Sivujen rakentaminen suoraan Internetiin
Sivuja suoraan Internetiin rakennettaessa tietokoneelta ei vaadita mitään erikoisia ohjelmia tai lisukkeita. Käytettävän koneen ei tarvitse olla uusi, nopea tai hieno, mutta nopeasta Internet-yhteydestä on etua.
Käyttäjätunnus ja salasana
Sivuja suoraan nettiin rakennettaessa on ensin hankittava käyttäjätunnus ja salasana johonkin ilmaiseen kotisivupalveluun. Tällaisia palveluita on tarjolla tuhansia, mutta erityisen suosittuja ovat mm. GeoCities ja Freewebs. Molemmat palvelut ovat englanninkielisiä, mutta niiden käytöstä on kirjoitettu suomeksi useita kuvallisia oppaita.
Käyttäjätunnuksen ja salasanan hankkimisen jälkeen on kirjauduttava sisään kotisivupalveluun. Kirjautumisen jälkeen on valittava, miten sivunsa rakentaa, sillä sekä GeoCities että Freewebs tarjoavat kahta eri tapaa rakentaa sivut.
Valmiseditori
Freewebs Easyssa käytetty ulkoasu valitaan valmiista vaihtoehdoista.
Ensimmäinen — ja yleensä aloittelijoille huomattavasti helpompi tapa — on käyttää ns. valmiseditoria. Valmiseditoria käytettäessä ei tarvitse tietää koodeista tai kotisivujen rakentamisen teoriasta mitään, riittää että osaa hippusen englantia. Freewebsin valmiseditorissa (Freeweb Easyssä) valitaan muutamasta vaihtoehdosta sivulle mieleinen ulkoasu ja kirjoitetaan sivulle tuleva sisältö sille varattuun laatikkoon. Tämän jälkeen hyväksytään sivu, ja kaikki on valmista.
GeoCitiesin Page Builder.
GeoCitiesin editori (Page Builder) on hieman toisenlainen: se muistuttaa enemmänkin Microsoft Wordia. Page Builderissa tekstiä voi esimerkiksi lihavoida ja kursivoida nappia painamalla, ja tekstiä voi raahata sivulla paikasta toiseen hiiren avulla. Lopuksi luotu sivu tallennetaan, ja se on kaikkien katseltavana Internetissä.
Suora koodi
Yllä Freewebs Advancedin, alla Geo Cities Advanced Editorin näkymä.
Toinen tapa rakentaa www-sivut Internetiin on käyttää suoraa koodia. Koodi ja sivun sisältö kirjoitetaan kotisivupalvelussa erityiseen sille tarkoitettuun tekstilaatikkoon ja tallennetaan, jonka jälkeen sivu on valmis ja kaikkien vierailtavissa. Sivut voi rakentaa tällä tavalla esimerkiksi Geo Citiesin Advanced Editorin tai Freewebsin Advanced-palvelun avulla.
Kotisivujen rakentaminen koodin avulla on huomattavasti hankalampaa ja vaatii enemmän kärsivällisyyttä kuin valmiseditorin käyttäminen, mutta tuottaa toisaalta paljon joustavampaa ja parempaa jälkeä. Kotisivujen rakentamisesta koodien avulla on enemmän asiaa myöhemmin tässä oppaassa.
File manager
GeoCitiesin File Manager.
Useimmilla kotisivupalveluilla, joille voi tehdä sivut suoraan Internetiin, on myös ns. file manager (suomeksi “tiedostojenhallinta”). File managerissa näkyvät listattuna kaikki sivutilassa olevat tiedostot: sivut, kuvat, CSS-tiedostot ja niin edelleen. File managerin kautta tiedostoja voi poistaa, muokata ja ladata sivutilaan ns. upload-toiminnon avulla.
Takaisin “Oppaat ja esimerkit” -osion etusivulle
Sivujen rakentaminen omalla koneella
Sivujen rakentamiseen on tarjolla monia ohjelmia, niin ilmaisia kuin maksullisiakin. Kuten suoraan Internetiinkin tehtäessä, myös omalle koneelle sivuja rakennettaessa on tämän vuoksi monia tapoja lähestyä ja luoda sivut.
WYSIWYG-ohjelmat
NVU.
Ns. WYSIWYG-ohjelmat eli -editorit muistuttavat hyvin paljon esimerkiksi Geo Citiesin Page Builderia tai Microsoft Wordia. Sivujen rakentamisessa ei tarvita yleensä koodia lainkaan, vaan tekstit, kuvat ja muu sisältö sommitellaan sangen wordmaisesti raahaamalla, nappeja painamalla ja valikkoja käyttämällä. Ohjelma kirjoittaa koodin käyttäjän puolesta (vaikka koodia pääsee yleensä itsekin halutessaan muokkaamaan). Käytännössä WYSIWYG-editorin käyttö ei juuri poikkea paljoakaan esimerkiksi Microsoft Wordin käytöstä.
WYSIWYG-editorien ongelmana on perinteisesti ollut koodin huono laatu. Koska ohjelma kirjoittaa koodin käyttäjän puolesta, siitä tulee helposti todella pitkä, monimutkainen ja huonosti toimiva. Eri selaimet saattavat näyttää saman sivu eri tavoin, ja toisinaan jopa yli 90 % sivun koodista saattaa olla turhaa. Koodin suuri määrä pidentää sivun latausaikaa.
Tunnetuimpia WYSIWYG-editoreja ovat mm. NVU sekä Microsoft FrontPage. Näistä ainakin jälkimmäisen kehitys on sittemmin lopetettu.
Tekstieditorit
Ylempänä Smultron, alempana Notepad++.
Täysveristä tekstieditoria käytettäessä www-sivu tehdään puhtaasti koodia kirjoittamalla ja tallentamalla. Tässä suhteessa tekstieditorit vastaavat esimerkiksi Freewebs Advancedia ja Geo Citiesin Advanced Editoria. Tekstieditorin avulla sivujen rakentaminen on vaivalloisempaa ja hitaampaa kuin WYSIWYG-ohjelmia käytettäessä, mutta turhaa koodia ei synny, ja lopputulos on paremmin hallittavissa. Yleensä kotisivujen rakentajat siirtyvät ennemmin tai myöhemmin tekemään sivunsa käsin koodia kirjoittamalla, koska tämä tapa koetaan yksinkertaisesti paremmaksi.
Www-sivujen rakentamiseen käy esimerkiksi Windowsin mukana tuleva Muistio (englanniksi Notepad). Paljon sivuja tekevät kaipaavat kuitenkin usein tekstieditoriltaan edistyneempiä ominaisuuksia, kuten koodin värjäystä ja välilehtiä. Tällaisia editoreja on saatavilla Internetistä ilmaiseksi, vieläpä suomenkielisinä. Windowsille erinomaisia ilmiasia tekstieditoreja ovat esimerkiksi Notepad++, EditPadLite ja Notepad2. Mac OS X:n puolella ainakin Smultron on kokeilemisen arvoinen.
Välimuodot
WYSIWYG-editorit ja puhtaat tekstieditorit edustavat sivujenteko-ohjelmien ääripäitä. Tarjolla on myös runsaasti ohjelmia, jotka ovat WYSIWYG-ohjelmien ja tekstieditorien välimuotoja. Ohjelma voi esimerkiksi kirjoittaa osan koodista valmiiksi tai päätellä koodin automaattisesti, tai siinä voi olla esimerkiksi valmis esikatseluominaisuus. Monissa ohjelmissa on mukana myös valmis koodikirjasto, josta saa halutessaan sivulleen esimerkiksi valmiin navigaatiovalikon tai javascript-pätkän.
Sivujen siirtäminen Internetiin
FileZilla on suosittu ilmainen ftp-ohjelma.
Kun www-sivusto on rakennettu valmiiksi omalle koneelle, on aika siirtää se Internetiin. Tämä tapahtuu useimmiten ftp:n avulla, vaikka muitakin tapoja on.
Tiedostojen siirtämiselle ftp:n avulla on kolme edellytystä. Ensinnäkin omalle koneelle on oltava asennettuna sopiva ftp-ohjelma, esimerkiksi WS_FTP tai FileZilla (joista jälkimmäinen on ilmainen). Toisekseen sivuja varten on oltava hankittuna kotisivutilaa. Kolmannekseen kotisivutilan tarjoavaan palvelimeen on voitava muodostaa ftp-yhteys. Tämä ei suinkaan ole itsestäänselvyys, sillä kaikki ilmaiset kotisivutilantarjoajat eivät tarjoa ftp-yhteyttä. Eräitä suosittuja ja ilmaisia ftp:tä tukevia palveluita ovat esimerkiksi Freehostia sekä Arkku.net.
Tiedostojen siirtäminen Internetiin tapahtuu siten, että ftp-ohjelmaan syötetään tarvittavat tiedot (ftp-palvelimen osoite, tunnus, salasana ja niin edelleen). Tämän jälkeen otetaan yhteys palvelimeen. Ftp-ohjelmasta riippuen tiedostojen siirtäminen voi tapahtua esimerkiksi raahaamalla halutut tiedostot ikkunasta toiseen tai valitsemalla ne listalta ja painamalla ok. Tämän jälkeen ohjelma kopioi valitut tiedostot Internetiin. Tiedostot eivät missään vaiheessa poistu omalta koneelta, vaan niistä on ftp-siirron jälkeen kopio sekä Internetissä että omalla koneella. Tästä on erityisen paljon hyötyä, mikäli sattuu vahingossa poistamaan jonkin tärkeän tiedoston.
Takaisin “Oppaat ja esimerkit” -osion etusivulle
Sivujen rakentaminen suoran koodin avulla
Nämä ohjeet pätevät kaikkiin suoralla koodilla rakennettaviin sivuihin, oli ne tehty suoraan Internetiin esimerkiksi Geocitiesin Advanced Editor-palvelun avulla tai omalle koneelle pelkkää tekstieditoria käyttäen.
Mistä kannattaa aloittaa?
Www-sivun rakentaminen XHTML- ja CSS-koodien avulla vaatii aina jonkinlaista tietoa kyseisistä kielistä. Aluksi kannattaa perehtyä ainakin yleisiin termeihin sekä tärkeimpiin XHTML-elementteihin. Nämä sekä alla esitelty www-sivun perusrunko kannattaa opetella ulkoa.
Sivun perusrunko
Www-sivun lähdekoodin ensimmäiselle riville merkitään dokumenttityyppi. Aloittelijalle suotuisin XHTML 1:n dokumenttityyppi on Transitional, jolloin tiedoston ensimmäinen rivi näyttää seuraavalta (poista rivinvaihto!).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tämän jälkeen tiedostoon merkitään html-, head-, title- ja body-tagit. Title-tagien väliin merkitään sivun otsikko, näkyvä sisältö (esimerkiksi tekstit ja kuvat) tulevat body-tagien väliin. Tämän jälkeen sivun 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> <head> <title>Sivun otsikko tähän</title> </head> <body> Sivun sisältö (yekstit, kuvat jne.) tähän </body> </html>
Tämä on www-sivun ns. perusrunko. Uutta sivua luodessa tämä runko on aina hyvä kopioida sivulle ensimmäiseksi. Tämän jälkeen runkoon voi lisätä haluamansa sisällön.
Lisätietoa www-sivun perusrungosta on luettavissa täällä.
Entä kun perusteet ovat hallussa?
Kun tärkeimmät XHTML-elementit sekä www-sivun perusrunko ovat hallussa, kannattaa perehtyä XHTML:n kielioppiin. Se ei ole hankalaa (itse asiassa sääntöjä on hyvin vähän). Lukemalla XHTML-osion etusivun pääsee jo pitkälle. Pähkinänkuoressa tärkeimmät säännöt ovat seuraavat:
- Dokumenttityyppi tulee aina ilmoittaa ensimmäisellä koodirivillä. Yleisesti ottaen www-sivulla on aina oltava ylempänä esitelty perusrunko.
- Jos tagin aloittaa, se on myös pääteltävä. Jos siis kirjoittaa <em>, sivulta on löydyttävä myös päättötagi </em>.
- Tagit päätellään päinvastaisessa järjestyksessä kuin ne aloitetaan. Toisin sanoen siis: <em><span><sup>Tekstiä</sup></span></em> on oikein, <em><span><sup>Tekstiä</em></span></sup> väärin.
- Joillain tageilla ei ole päättötagia. Tällöin tagi päätellään itsensä sisällä lisäämällä ennen viimeistä hakasuljetta kauttaviiva: <br />. Tällaisia tapauksia on vain vähän, ja ne on mainittu sivustolla erikseen.
- Valtaosa XHTML-elementeistä kuuluu body-tagien väliin. Jotkin kuuluvat kuitenkin head-tagien väliin, mutta nämä tapaukset on merkitty sivustolla erikseen. Head-tagien sisälle kuuluvia tageja ei saa laittaa bodyn sisälle ja päinvastoin.
- Lohkotason elementti ei saa olla tekstitason elementin sisällä, mutta tekstitason elementti saa olla lohkotason elementin sisällä.
Kun peruskielioppi on hallussa, XHTML-osiosta on melko helppo etsiä sivulle uusia elementtejä ja tageja. Koodipätkät on jaoteltu Menthal27:ssa niiden tyypin mukaan, esimerkiksi Teksti-sivulta löytyvät mm. lihavoinnin, yläindeksin, kappalejaon ja rivinvaihdon aiheuttavat koodipätkät. Tageja on XHTML:ssä paljon, eikä kaikkia opi ulkoa välttämättä koskaan; alkuvaiheessa onkin hyvä käydä XHTML-osio huolellisesti läpi ja tutkia, mitä kaikkea XHTML pitää sisällään.
CSS
Kun XHTML on kutakuinkin tuttu ja sen käyttö ei tuota suuria ongelmia, on hyvä tutustua CSS:ään. CSS:n avulla määritetään www-sivun ulkonäkö, esimerkiksi fonttien ja taustojen värit, reunukset ja niin edelleen. Alkuvaiheessa on hyvä lukea CSS-osion etusivu läpi, jotta termit ja kielioppi käyvät tutuiksi.
CSS-muotoilut yhdistetään XHTML:ään valitsimien avulla. Yksinkertaisimmillaan CSS-pätkä voi näyttää vaikka tältä:
h1 { color:red; }
Kyseinen muotoilu määrittää h1-tagin sisällön värin punaiseksi. Samalla tavalla esimerkiksi body { color:red; } värjää kaiken bodyn sisällä olevan tekstin punaiseksi.
Erilaiset CSS-muotoilut on jaoteltu sivustolla omiin ryhmiinsä, aivan kuten XHTML:kin. Sivuston CSS-osio kannattaa kahlata läpi, jotta saa jonkinlaisen käsityksen CSS:n suomista mahdollisuuksista.
CSS voidaan yhdistää XHTML-sivulle esimerkiksi lisäämällä se head-tagien sisälle seuraavan koodipätkän avulla:
<style type="text/css"> <!-- CSS TÄHÄN --> </style>
Käytännössä www-sivun perusrunko näyttää ylläolevan koodin kanssa tältä:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>Sivun otsikko tähän</title> <style type="text/css"> <!-- CSS TÄHÄN --> </style> </head> <body> Sivun sisältö (yekstit, kuvat jne.) tähän </body> </html>
CSS voidaan liittää XHTML:ään myös muilla tavoilla, mutta tämä tapa on kenties kaikkein aloittajaystävällisin. Muihin tapoihin voi tutustua CSS-osion etusivulla.
Tärkeimpiä CSS-muotoiluja
- Fontin (tekstin) väri, fontin nimi, tekstin koko
- Kursivointi, lihavointi, alleviivaus
- Tekstin tasaus
- Taustaväri, taustakuva
- Reunukset
- Elementin näyttötapa, kelluminen, korkeus ja leveys, paikkamääritykset
CSS on monipuolinen kieli; yllä on vain joitan keskeisimpiä ja tärkeimpiä muotoiluja. CSS:ään perehtymiseen kannattaa käyttää aikaa, ja uusia muotoiluja kannattaa kokeilla rohkeasti. Taidokkaasti käytetty CSS on sivuston suola. Hyvän peruskäsityksen saa lukemalla CSS-osion etusivun ja Valitsimet-osion läpi. Etusivulla on myös ohjeet Menthal27:n CSS-osion merkintöjen lukemiseen. Niihin kannattaa tutustua ennen kuin kopioi sivustolta koodeja.
Takaisin “Oppaat ja esimerkit” -osion etusivulle
Apua! En ymmärtänyt asiaa X!
Kannattaa muistaa, että tämä sivu sisältää lähinnä yksinkertaistetun ja lyhennetyn esityksen www-sivujen tekemisen perusteista. Ennen avun kysymistä kannattaa lukaista sivuston XHTML- ja CSS-osioiden etusivut läpi ja vilkaista, josko Oppaat ja esimerkit -osiossa olisi vastaus mietteisiin. Myös usein kysytyt kysymykset kannattaa selata läpi, ja tarpeen vaatiessa käyttää hakua.
Mikäli jokin jää silti epäselväksi, apua ja selvennystä voi aina pyytää Menthal27:n keskustelualueella tai lähettää ylläpidolle (kiukkuistakin) palautetta. Kaikki palaute luetaan läpi, ja sivustoa pyritään parantamaan sen perusteella.
Lopuksi
Kiitos Essille ja wiipelle oppaassa esiintyneistä GeoCitiesin, FileZillan sekä Notepad++:n kuvakaappauksista.