Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Ohjetta voidaan käyttää sivupohjien luonnin apuna, on kuitenkin suositeltavaa että käytetään pääasiassa video-ohjeita jotka löytyvät osoitteesta: http://www.youtube.com/user/tiedonvalityshanke. Ensimmäiset pari sivua keskittyy kuvaamaan sivupohjien käytön perusteita. Sen jälkeen kuvataan kotisivujen luontia yksinkertaisemman sivupohjan avulla. Tämän jälkeen käydään läpi sivujen siirto palvelimelle. Aivan lopusta löydät kokoelman tärkeimmistä koodielementeistä. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon, joten siihen ei ole välttämättä tarve koskea. Kotisivujen luonti sivupohjien avulla sujuu taatusti kaikilta joilla on hallussa tietokoneen peruskäyttötaidot. Sivupohjien rakenne Kun aloitat tekemään oman yhdistyksesi kotisivuja sivupohjien avulla, ota sivupohjat sisältävä paketti kotisivulta. Paketit on pakattu rar tai zip -pakkauksella, ja sivulta löydät ohjeet niiden purkamiseen ja käyttöönottoon. Aloita yksinkertaisemmasta sivupohjapaketista jos et omaa aikaisempaa kokemusta kotisivujen tekemisestä, toki voit ottaa osia laajemmasta paketista käyttöön vaikka samantien. Suositeltavaa onkin ottaa sieltä vähintään kalenteriliitäntä. Yksinkertainen sivupohja sisältää seuraavat tiedostot: - index.html - ajankohtaista.html - kyla.html - yhdistys.html - yhteystiedot.html - tyyli.css Huomaa että jokainen tiedosto on oma selaimessa avattava sivu. Aloita muokkaamaan niitä yksi kerrallaan ohjeen avulla ja kun olet päässyt ohjeen loppuun, olet luonut yhdistyksellesi kotisivut. Tämän jälkeen tarvii ainoastaan siirtää ne palvelimelle jossa ne ovat kaikien saatavilla. Kun muokkaat sivuja, avaa kyseinen sivu myös selaimeesi, tuplaklikkaamalla tiedostoa se avautuu selaimessa, klikkaamassa oikealla napilla voit valita millä ohjelmalla sen avaat, valitsemalla muistio (notepad) tai textpad (jos olet päätynyt asentamaan sen) voit muokata sitä. Muokkaa tiedostoa, tallenna, ja tarkista aina selaimessa miltä muutoksesi näyttää (päivitä sivu F5-näppäimellä tai ctrl+r näppäinyhdistelmällä).
Kotisivujen tekemisen perusteet Kotisivut ovat kokoelma muotoilematonta tekstiä.html formaatissa. Ilman tyylimuotoiluja ja tekstin jaottelua erilaisilla lohkoelementeillä ne näyttäisivät normaalilta tekstiartikkelilta ilman otsikkojen korostuksia ja muotoiluja. Näillä elementeillä sivuista saadaan kuitenkin helpompia lukea ja niihin voidaan luoda haluttu rakenne ja ulkoasu. Tässä ohjeessa on kuvattu niiden lohkoelementtien käyttö, joita sivupohjilla tehdyillä sivuilla vähintään tarvitsee. Jos taidot ovat karttavammat, sivupohjista voi toki muokata juuri sen näköiset kuin haluaa. HTML-sivun perusteet Html-sivu on aina seuraavaa muotoa: <html> <head> <title> Kotisivun nimi </title> </head> <body> </body> </html> <p> Kotisivun sisältö.</p> Jos tarkastellaan yllä olevaa listaa tarkemmin, huomataan että löydetään aina kaksi vastaavaa elementtiä. Samalla tavalla kuin laskutoimituksen sulkumerkit (), elementeissä <> ja </> avaavat ja sulkevat sen. Sivua luodessa täytyy olla tarkkana että jokaisella avatulla elementillä on myös lopetuselementtinsä. Ohjeen lopusta löydät kuvauksia tärkeimmistä elementeistä. Esimerkkejä löydät sivupohja-esimerkeistä
Sivupohjien täyttö suppeat sivupohjat Tässä kuvataan sivupohjien muokkaus askelittain yksinkertaisemman sivupohjan avulla. Tätä ohjetta tunnollisesti seuraamalla saat aikaan yksinkertaiset, mutta toimivat kotisivut yhdistyksellesi. Ohjeessa on käytetty kaikkein yksinkertaista ulkoasua. Keskity siihen vasta kun kaikki tarvittava tieto on sivuillasi. Avaa aina muokattava sivutiedosto editorissa ja selaimessa. Selaimessa sen avaat tuplaklikkaamalla tiedostoa, editorissa avaat klikkaamalla tiedostoa hiiren oikealla napilla ja valitsemalla avaa ohjelmalla -> muistio, eng. notepad (tai ohjelmalla textpad jos olet sen asentanut käyttöön). Sivupohjan etusivu (index.html) Etusivu on aina oltava muotoa index.html, onkin tärkeää että sitä ei nimetä uudelleen. Sivun koodaus ja <head></head> -lohko Sivun aivan yläosaan tulee aina yllä kuvattu sivun määrittely. Siinä mm. valitaan sivuston koodaus ja käytettävä kieli. Älä tee siihen muutoksia jos et ole aivan varma mitä olet tekemässä. <head> </head> elementtiin joudut jo tekemään joitakin muutoksia. Siellä määritellään sivun otsikko ja joitakin metatietoja. description-kohtaan voit lisätä jotakin kuvaavia termejä, nämä auttavat hakukoneita löytämään sivusi. Huomaa, että niiden on tultava aina lainausmerkkien sisään ja ne erotellaan pilkulla. Esim: kirkonkylän kyläsivut, kyläsivut, kyläyhdistys. Title-elementin sisälle tulee kotisivujen otsikko joka näkyy selaimen otsikkorivillä. Pidä se lyhyenä ja kuvaavana. Esimerkki:
Tulos: <body> -elementin alku ja sivun yläbanneri Lisää tähän <h1> </h1> -otsikkoelementtiin yhdistyksesi nimi. Maksimipituus noin 40 merkkiä. Jos nimestä tulee pidempi eikä se näytä siistiltä otsikkopalkissa, joudut muokata tyylitiedostoon tekstin kokoa. Katso ohjeet siitä css-osiosta. Jos haluat banneriksi kuvan, vaikkapa kyläraitin tai kylätalon kuvan, ohjeet myös siihen löytyvät laajemman sivumallin ohjeesta. Esimerkki:
Tulos: Navigointipalkki Tässä luodaan yläosan navigointipalkki. Jos säilytät sivun sisällön sivupohjien mukaisena, näitä ei tarvitse muokata. Muokkaamista ei suositella, mutta jos sivusi sitä edellyttävät, se on kuvattu laajempien kotisivujen ohjeissa.
Sivun tekstiosat Kotisivun tekstiosat on jaettu kahteen eri sarakkeeseen. Vasemmanpuolimmainen joka on sivukoodissa ensimmäisenä käsittää ¾ sivun koosta (n. 660px) ja on varsinaista tekstiosaa varten. Oikeanpuoleinen osa on ¼ sivun koosta (n. 190px). Sivun koko leveyssuunnassa on yhteensä 900 pikseliä, joten sen käyttö on matkapuhelimella ja muilla mobiililaitteilla helppoa. Ensimmäisenä käsittelyssä on vasemmanpuoleinen tekstiosa: Sivu on itseasiassa jaettu taulukolla kahteen eri kokoiseen soluun. Tässä aloitetaan taulukko aloituselementillä, ja siihen ei ole tarvetta koskea. Ole kuitenkin huolellinen että nämä elementit säilyvät sivupohjissa oikeilla paikoillaan että sivuston rakenteellisuus säilyy.
Yllä on vasen osa kokonaisuudessaan. Ylimmällä koodirivillä määritellään osan kooksi 75% koko taulukon leveydestä. Seuraavana on tekstiosan otsikko. Huomaa että <h1> </h1> -otsikkoa käytetään vaan kerran kussakin solussa. Jaa tekstiä alaotsikolla niin moneen osaan kuin haluat, <h2> </h2> on seuraavan tason otsikko, <h3> </h3> on pienin mallissa käytetty otsikkotaso. Muista että teksti täytyy tulla kappale-elementtien sisälle eli: <p> Tekstiä. </p>. Kappale-elementtien sisällä tehdyt tekstin ulkoasun muokkaukset eivät näy selainikkunassa, kaikki muotoilu tulee käyttää elementtejä käyttäen, sijoita jokainen kappale siis oman kappale-elementtinsä sisälle. Muista, että kappaleelementitkin ovat vain tekstiä, joten kun kirjoitat niitä, ole tarkkana että merkki tulee oikein hakasineen. Esimerkkisivulla tekstin sisään on lisätty jonkin verran linkkejä muualle esimerkkisivustoon. Linkki on aina muotoa <a href= linkin osoite > linkin kuvaus </a>. Pidä huolta että linkin osoite tulee lainausmerkkien sisälle. Huomaa taas että koodin muotoilu editorissa ei näy selainikkunassa. Esimerkki:
Otsikkojen ja kappaleiden määrää ei ole mitenkään rajattu, myöskin linkkejä ja kuvia voi tekstin sisään lisätä. Yleensä kuitenkin vähemmän on parempi, varsinkin etusivu tulisi avautua kokonaisuudessaan selainikkunassa ensimmäisellä avauksella. Voit sijoittaa loput materiaaleista sitten muualle sivustolle. Tulos:
Seuraavaksi käsitellään oikeanpuoleinen sarake. Se on varsin monikäyttöinen ja siihen voi lisätä monenlaisia tietoja, kuten yhteystietoja, tietoiskuja, linkkejä aineistoihin, tai vaikkapa pieniä kuvia elämöittämään sivuja. Käyttöä ei ole mitenkään rajattu, mutta kuvien maksimikoko on rajattu 190 pikseliin leveyssuunnassa. Myös pitkät sähköpostiosoitteet, nimet ja vastaavat voivat aiheuttaa ulkoasun vääristymää jos niissä ei ole välilyöntejä että selain pystyy ne automaattisesti rivittämään. Tarkista siis aina selainikkunassa että ulkoasu näyttää siistiltä. Huomaa että henkilökohtaiset yhteystiedot on paras laittaa aina sivuille kuvana, että tietoturva säilyy. Jos lisäät yhdistyksen sähköpostiosoitteen sellaisenaan sivulle, tulee olla varma siitä että sähköpostipalvelussa on käytössä tarvittavat roskapostisuodatukset. Muista aina pyytää asianomaiselta lupa ennen kuin lisäät mitään henkilöön liittyviä tietoja sivuille. Lisää etusivulle vähimmäistietoina yhdistyksen virallinen nimi ja Y-tunnus, yhdistyksen puhelinnumero ja sähköpostiosoite. Jos yhdistyksen puhelinnumerona on yksityisnumero, lisää myös henkilön nimi ja asema yhdistyksessä, sekä ajat, jolloin numerosta voi henkilöä tavoitella. Voit lisätä tiedot sivulle monella eri tavalla, alla on yksi esimerkki. Esimerkki:
Jäsentelyssä on käytetty <br /> -elementtiä, joka aiheuttaa tekstissä pakotetun rivinvaihdon. Älä kuitenkaan käytä tätä jäsentelemään normaalia tekstiä, sitä varten on kappale-elementit. Voit kuitenkin käyttää niitä varovaisesti luomaan listoja, jos et halua käyttää varsinaisia luetteloelementtejä <ul> </ul> numeroimattoman tai <ol> </ol> numeroidun listan luomiseksi Tulos:
Seuraavana koodissa päätetään tekstiosat sisältävä taulukko sekä sivun pääosan elementti. Ole tarkkana että nämä lohkopäätökset säilyvät oikeassa paikassaan, muuten sivun rakenteellisuus rikkoontuu ja sivu ei välttämättä toimi selaimessa. Viimeisenä elementtinä koodissa on alabanneri. Alabanneria käytetään kuitenkin vain joissakin tyylitiedostoissa luomassa ulkoasukokonaisuuksia ja silloinkin sitä tarvitsee harvoin muokata. Niiden eroista löydät ohjeet kyseisten tyylitiedostojen kansioista sivupohja-paketeissa. Muissa ulkoasuissa siihen ei tarvitse tehdä muutoksia. Viimeisenä koodissa on päätöselementit, joilla lopetetaan sivun runko </body> Sekä lopullinen selaimessa näkyvä nettisivu sidotaan paketiksi </html>. Päätöselementti päättää aina verkkosivun. Olet saanut ensimmäisen sivun valmiiksi, tarkista siis selaimessasi että se näyttää toimivalta ja oikealta. Jos sisältö näyttää oikealta, mutta ulkoasu ei miellytä silmääsi, älä tässä vaiheessa huolehdi siitä, sillä sitä muokataan myöhemmin kun sivut ovat muutoin valmiit. Tärkeintä on että saat kaikki tarvittavat ja tärkeät tiedot sivuillesi. Jatka seuraavan sivun muokkausta. Se ei ole yhtään sen vaikeampi kuin ensimmäinenkään. Olet nyt oppinut tekemään kotisivuja.
Toinen alasivu (ajankohtaista.html) Olet saanut valmiiksi ensimmäisen sivun kokonaisuudessaan. Jatko onkin helpompaa sillä suuri osa sivujen sisällöstä on sama kuin etusivulla. Näin luodaan yhtenäinen rakenne koko sivustolle. Muuta siis: head, banner ja navi osat vastaamaan etusivun vastaavia. Jos haluat eritellä sivut toisistaan, voit muuttaa head-lohkon title-kohdan Kirkonkylän kyläsivut vaikka muotoon Kirkonkylän kyläsivut - ajankohtaista. Muutoin jatketaan main-lohkon sisältä. Tässä sivun sisällöksi on luotu yksinkertainen tapahtumalista. Jäsentelyyn ei ole käytetty mitään muuta kuin yksinkertaisia muotoiluelementtejä. Huomaa että on käytetty <strong> </strong> -elementtiä jolla päivämäärät on erotettu tekstistä. Muuten tapahtumat on jaoteltu yksittäisiin kappaleisiin. Luo uusi tapahtuma kopioimalla ja liittämällä koko kappale, muuttamalla päivämäärä ja muokkaamalla tekstiksi haluamasi sisältö. Voit lisätä linkkejä tapahtumien omille sivuille ja vastaaviin sisältöihin. Tämä on helpoin tapa tehdä tapahtumalista, mutta käytä sitä vain, jos yhdistykselläsi on muutama tapahtuma vuodessa, sillä tapahtumat on lisättävä listaan aina muokkaamalla itse sivukoodia. Jos tapahtumia on enemmän tai yhdistykselläsi on mm. kylätalon tai muiden kiinteistöjen varauksia, joita tarvitsee myös listata, on syytä etsiä joku toinen ratkaisu. Laajempien sivupohjien esimerkeissä on esitelty Google-kalenteripalvelun upottaminen sivulle, se onkin äärimmäisen suositeltavaa helppouden ja käytettävyyden kannalta. Muista että vanhat tapahtumamerkinnät on syytä poistaa, muuten sivustolla annetaan lukijoille kuva ettei siitä huolehdita. Google-kalenteripalvelu toimii tässäkin tapauksessa paremmin, sillä se näyttää vain ajankohtaisen sisällön ensimmäisellä avauksella.
Voit aina aloittaa yksinkertaisella tapahtumalistalla ja vaihtaa myöhemmin. Esimerkki: Tulos: Sivulla on vielä oikeanpuolinmainen sarake. Voit käyttää sitä vaikka muistuttamaan tärkeimmistä tapahtumista jotka tiedetään jo hyvissä ajoin etukäteen. Käyttöä sarakkeelle voi olla monenlaista, joten sovella sitä mielesi mukaan.
Tässä on lisätty tiedot tulevista kesän markkinoista. Tekstissä on linkki kuvitteelliselle markkinasivulle. Voit tehdä aina samaan kansioon oman sivun tapahtumaa tai tilaisuutta varten. Nimeä se omaksi tiedostoksiin, lisää sivustolle linkki sinne. Voit myös käyttää toista ulkoasua tarvittaessa erottamaan sitä muusta sivustosta. Voit vaikka nimetä jonkun valinnaisen tyylitiedoston tyyli2.css nimiseksi ja muokata <head> -lohkossa sisältämä linkki johtamaan sinne. Esimerkki: Tulos:
Kolmas alasivu (kyla.html) Kolmannen alasivun muokkaaminen aloitetaan taas muuttamalla head, banner ja navi osat vastaamaan etusivun vastaavia. Sivun runko-osat ovat yleensä ainoat, jotka vaativat jotain muutoksia, sillä sivuston looginen rakenne halutaan säilyttää jokaisella alasivulla. Huomaa ettei tiedostonnimiin tule ääkkösiä. Kylästä tulee siis kyla jne. Yksinkertaisemmassa mallissa kaikki kylää koskevat tiedot on liitetty yhden sivun alle, tämä ei kuitenkaan ole välttämättä tarkoituksenmukaista, varsinkin jos halutaan liittää enemmän kylää koskevia asioita. Jos sivusto pidetään hyvin kevyenä, pärjätään tosin tälläkin. Laajemmassa versiossa kyläsivu on jaettu useampaan alasivuun ja se onkin ehkä paras tapa tehdä tämä kyseinen sivuston osa. Tässä vaiheessa osaat jo muokata sivupohjien tekstiä. Jos asia vielä tuottaa päänvaivaa, katso ohjeen alusta index.hml -sivun muokkauksen ohjeesta. Kirjoita laajemmat tekstikappaleet aluksi normaaleiksi
tekstitiedostoiksi, sen jälkeen kopioi ne sivupohjaan (ole tarkkana että ne tulevat oikeaan kohtaan taulukon solun sisälle, korvaa siis esimerkissä olevat otsikko- ja kappale-elementit omalla tekstilläsi). Sen jälkeen lisää otsikoiden ympärille sopivan tason otsikkoelementti ja lisää tekstin kappaleiden ympärille kappaleelementti. Tällöin teksti säilyy kotisivullasi suurin osin samannäköisenä kuin tekstitiedostossasi. Toimi siis seuraavasti: Tämä on otsikko Tämä on kappaleen tekstiä. Tämä on toisen kappaleen tekstiä. Tämä on alaotsikko Kopioi -> liitä ja muokkaa: Tämä on kappaleen tekstiä. <h1>tämä on otsikko</h1> <p>tämä on kappaleen tekstiä.</p> <p>tämä on toisen kappaleen tekstiä.</p> <h2>tämä on alaotsikko</h2> <p>tämä on kappaleen tekstiä.</p> Tällä tavalla teet nopeasti sivuille sisältöä varsinkin jos sinulla on valmiita tekstidokumentteja joissa on sopivaa sisältöä. Tällä sivulla ei haittaa vaikka tekstiä on enemmänkin, ja se ei avaudu ensimmäisessä ikkunassa. Liitä tänne kaikki kylää koskevat tiedot, yhdistystä koskeville tiedoille on oma sivunsa. Jos käytät pohjaa jonkun muun kuin kyläyhdistyksen käyttöön, voit tehdä tästä sivusta omasi yksinkertaisesti korvaamalla kaikki kylään liittyvät maininnat omalla otsikollasi, myös siis tiedostonnimen sekä navigaatiopalkeissa olevat viittaukset.
Neljäs alasivu (yhdistys.html) Neljäs alasivu on luotu yhdistyksen toimintaa varten. Sitä voit käyttää yhdistyksen sisäistä tiedotusta varten, lisätä sinne tietoja juuri yhdistyksesi, ei kyläsi, toiminnasta. Lisää vasemmanpuoleiseen osaan haluamasi tiedot toiminnasta. Jaa tekstiä alaotsikoihin ja käytä halutessasi apuna kuvia tai muita havainnollistavia elementtejä. Ohjeen kuvan lisäämiseksi löydät seuraavan otsikon alta. Oikeanpuoleinen palsta on tässä tapauksessa käytetty listaamaan erilaisia yhdistystoiminnassa tarvittavia dokumentteja, suunnitelmia ja pöytäkirjoja. Se onkin hyvä paikka säilyttää ja julkistaa näitä tarvittavia dokumentteja. Ohjelmakoodissa ne on toteutettu seuraavasti: Otsikot ja listaukset ovat ohjelmakoodissa vain esimerkkejä, lisää siis juuri ne tiedot mitä yhdistyksesi tarvitsee. Tässä tapauksessa listat on luotu pakotetuilla rivinvaihdoilla, silloin niiden ulkoasu pysyy hyvin samankaltaisena muun tekstin kanssa.
Esimerkki: Huomaa, että tässä tapauksessa linkki osoittaa tämän sivun kanssa samassa kansiossa olevaan dokumenttiin, jos olet epävarma minne linkki osoittaa, voit kirjoittaa lainausmerkkien sisään suoraan täydellisen osoitteen (esim. muotoa http://www.epk.fi/kirkonkyla/kkyhdistys_vuosikokouspk.pdf). Vältä tiedostojen nimissä seuraavia: - ääkköset ja muut erikoiskirjaimet, kuten å, ö, ä - isot kirjaimet, tiedostonnimi tulisi kirjoittaa pienellä aina kun mahdollista - erikoismerkit ja välilyönnit, käytä välilyöntien sijaan alaviivaa _ Linkkiä luodessa täytyy olla myös tarkkana että käytetään tiedoston täydellistä nimeä, tämä tarkoittaa myös tiedostopäätettä. Paras muoto dokumenteille on.pdf. Tulos:
Neljäs alasivu (yhteystiedot.html) Viimeinen alasivu käsittää yhdistyksen yhteystiedot. Oikea tapa lisätä yhteystiedot on lisätä ne kuvana. Tämä tapahtuu luomalla.jpeg kuva, esimerkiksi MS Paint -ohjelmalla, johon kirjataan henkilöt yhteystietoineen. Syy tähän on tietoturvassa, sillä se poistaa riskin sähköpostiosoitteiden kaappaamisesta roskapostitarkoituksiin lähes kokonaan. Kuva on myös helppo vaihtaa kun yhteystietoja tarvitsee muuttaa. Erillistä palaute- tai yhteydenottolomaketta ei kannata luoda, sillä sen väärinkäyttö on hyvin helppoa ja se sisältää myös tietoturvariskin. Paras tapa on luoda sähköpostitili tätä tarkoitusta varten, jota käytetään yhdistyksen "virallisena" sähköpostiosoitteena. Tilin käyttöoikeus voi olla useammalla ihmisellä, ja koska kyse ei ole henkilökohtaisesta tilistä, säilyvät postiarkistot yhdistyksen käytössä vaikka yhdistystoimijat vaihtuisivatkin. Sivupohjiin on siis luotu valmiiksi paikka yhteystiedoille. Koodia ei tarvitse tästä kohdin muuttaa, riittää että luodaan kuva jonka leveys on 660 pikseliä ja jonka tiedostonnimi on yhteystiedot.jpg. Kuvan korkeutta voidaan muuttaa niin paljon kuin tarpeellista (on muutettava koodista myös height attribuutin arvoa), mutta leveämpää kuvaa ei ulkoasua rikkomatta voida lisätä.
Nyt sivut ovat valmiit. Niihin on lisätty aivan vähimmäissisältö, seuraavaksi kiinnitetään huomio siihen, tarvitaanko muita alasivuja, mitä muutoksia ulkoasuun tehdää, hienosäädetään sisältöä ja tarkistetaan että kaikki linkit, kuvat ja muut vastaavat toimivat. Paras tapa tarkistaa on avata etusivu selaimessa ja selata koko sivusto läpi, testaten kaikki ennen kuin sivut siirretään palvelimelle. Huomaa, että jos linkit toimivat omalla koneellasi vain jos ne on luotu viemään samassa kansiossa tai sen alikansioissa oleviin tiedostoihin. Tarkista muut linkit siis siirrettyäsi tiedostot palvelimelle. Ulkoasun muuttamisesta, lisäpalveluiden liittämisestä sivuille, alasivujen lisäämisestä ja muista monimutkaisemmista toimenpideistä löydät kuvaukset video-ohjeista. Sivujen siirto palvelimelle Seuraavaksi suoritetaan sivujen käyttöönotto. Jos yhdistyksesi on Eteläpohjalaiset Kylät ry:n jäsenyhdistys, se saa pienen, mutta kuitenkin yhdistyksien käyttöön riittävän sivutilan jäsenpalveluna. Tätä sivutilaa voit kysellä sähköpostiosoitteesta info@epk.fi. Saat palvelimelle seuraavat tiedot: isäntä (host) -nimen joka on palvelimen tunnus, käyttäjänimen (username) joka on oma tunnuksesi palvelimelle, salasanan (password) ja portinnumeron (gate). Kaikkia näitä neljää tietoa tarvitset että pystyt tiedostot siirtämään palvelimelle. Tarvitset siirtoa varten ftp-tiedostonsiirto-ohjelman. Suurin osa selaimista myös osaa listata ja siirtää tiedostoja ftp-palvelimelle, joten voit kirjoittaa suoraan selaimen otsikkoriville saamasi isäntänimen, minkä jälkeen palvelin kysyy käyttäjätunnustasi ja salasanaasi. Parempi on kuitenkin käyttää varta vasten luotua tiedostonsiirto-ohjelmaa. Tähän käyttöön FileZilla Client (http://filezilla-project.org/) soveltuu hyvin, se on ilmainen ja sen saa myös suomenkielisenä. Aloitetaan tiedostojen siirto: Kirjoitetaan otsikkoriville isäntänimi, käyttäjänimi, salasana ja portti, ja painetaan nappia pikayhdistä. Tämä myös tallentaa osoite- ja salasanatiedot ohjelmaan, jos koneesi on siis yleisessä käytössä, tyhjennä nämä tiedot aina ennen kuin suljet ohjelman (muokkaa -> tyhjennä yksityisyystiedot). Jos jätät tiedot koneellesi, tarvitsee vain napsauttaa oikeassa reunassa olevaa nuolta josta valitset haluamasi palvelimen.
Ohjelmaan avautuu työkansiosi. Varmista palvelimen ylläpitäjältä mikä on oma työkansiosi. Jos oikean alakulman ikkunaan avautuu tyhjä kansio jossa ei ole alikansioita, olet valmiiksi oikeassa paikassa. Kotisivusi index-kansio saattaa olla esim. muotoa httpdocs, www, jne., palveluntarjojastasi riippumatta. Navigoi tiedostorakennetta pitkin oikeaan palvelimen kansioon jos et vielä siellä ole. Huomioi että ohjelman vasemman puolen ikkunat sisältävät oman tietokoneesi hakemistot ja oikean puolen ikkunat palvelimen hakemistot. Etsi molemmista hakemistorakenteista oikea hakemisto, sen jälkeen yksinkertaisesti siirrä haluamasi tiedostot vasemmalta hakemistosta oikealle hakemistoon. Tämä kopioi ne palvelimelle. Esimerkki: Olet nyt luonut kotisivut jotka löydät selaimellasi osoitteestasi, esim http://www.epk.fi/kkyhdistys/. Sivut näkyvät selaimessasi aivan samalla tavalla palvelimen hakemistossa kuin avatessasi ne oman kotitietokoneesi hakemistosta selaimella. Kotisivut ovat valmiit. Kun päivität niitä, tee muutokset kotikansiosi sivuihin ja siirrä uusi sivu palvelimelle. Jos sivuja päivittää useampi kuin yksi, siirrä alkuperäinen sivu palvelimelta kotikansioosi, muokkaa sitä ja siirrä se takaisin palvelimelle, näin kaikkien tekemät muutokset säilyvät sivuilla.
Tärkeimmät lohkoelementit <html> </html> Elementti on sivun juurielementti, joka täytyy löytyä sivun alusta ja lopusta että selain tunnistaa sen html-sivuksi. Tätä elementtiä ei sivupohjissa ole yleensä tarvetta muokata. <head> </head> Tähän elementtiin määrittelemme sivun otsikkotiedot. Käyttö on tarkemmin kuvattu myöhemmin kun tarkastellaan sivupohjien täyttöä. <body> </body> Elementti käsittää sivun varsinaisen sisällön. Kaikki mikä näkyy selainikkunassa tulee tämän lohkon sisään. <div> </div> Tätä elementtiä käytetään yleensä rakenteellistamaan sivua, sillä erotellaan sivun osia toisistaan mm. ulkoasun muokkausta varten. Sivupohjissa ulkoasu määritellään div-elementillä. Sivu on jaettu kolmeen neljään pääosaan, tässä mm.: banneri, navi ja main -osiin. Näistä ensimmäinen käsittää otsikkopalkin, toinen navigointipalkin ja kolmas varsinaisen tekstiosan. <h1> </h1> Otsikkoelementti. Tällä kuvataan ensimmäisen tason otsikkoa, joka yleensä löytyy vain kerran sivulta tai taulukon soluun jaetusta tekstiosasta. <h2> </h2> Otsikkoelementti. Tällä kuvataan toisen tason otsikkoa, jota käytetään rakenteellistamaan tekstiä. <h3> </h3> Otsikkoelementti. Tällä kuvataan kolmannen tason otsikkoa, joka on sivupohjissa käytetty kaikkein pienin otsikkotyyppi. <p> </p> Kappale-elementti. Kaikki kirjoitettu normaali teksti tulee olla kappaleelementin sisällä. Se on käytetyin yksittäinen elementti. <a> </a> Linkki. Käyttö: <a href= linkin osoite >Linkin kuvaus.</a>. Ole tarkka että linkin osoite tulee lainausmerkkien sisälle ja että linkkiin tulee tarkalleen oikea osoite. Osoite: index.html osoittaa samalla palvelimella olevan saman kansion index.html tiedostoon, kun taas linkin osoite http://www.epk.fi/hanke/index.html osoittaa juuri tuossa osoitteessa olevaan
tiedostoon ja siihen voidaan viitata mistä tahansa. Jos olet epävarma, lisää aina linkin osoite kokonaisuudessaan, siitä ei ole mitään haittaakaan. <img></img> tai <img /> Kuva. Käyttö: <img alt="kuva" src="kuva.jpg" width="210" height="300" />. Attribuutti alt= tarkoittaa tekstiä joka näytetään jos kuvaa ei jostain syystä voida ladata, vaikka silloin jos se on sijoitettu väärän hakemistoon. src= määrittää kuvan osoitteen, eli se vastaa ylemmässä linkin määritelmässä href= attribuuttia. Jos käytetään viittausta kuvannimi.jpg on sen sijaittava samassa hakemistossa kuin sivu jossa kuvaa käytetään. width= attribuutti määrittelee kuvan leveyden, height= kuvan korkeuden. Vaikka kuva olisi suurempi, näytetään se juuri siinä koossa kun tässä määritellään, ole tarkkana että kuvasuhteet säilyvät eikä se vääristy. Huomaa että lopussa ennen hakasulkua täytyy olla / -merkki joka päättää linkin. Tässä tapauksessa ei tarvita päättöelementtiä. Kuvalinkki. Käyttö: <a href="kuvannimi.jpg"><img alt="kuva" src="kuvannimi.jpg" width="210" height="158" /></a>. Tässä tapauksessa kuva näytetään 210x158 kokoisena, kuitenkin kuvaa klikkaamalla se avautuu ikkunassa alkuperäiskokoisena. Tämä onkin hyvä tapa käyttää tärkeitä kuvia, joista haluat täysikokoisen version näkyville. Se on kuitenkin raskas tapa käyttää ja alkuperäisen kuvan koon olisi hyvä olla maksimissaan noin 900x900 pikseliä. Enimmillään yhdelle sivustolle kannattaa laittaa noin 4-5 kuvaa, jos on tarve näyttää enemmän, lisätään ne ulkopuoliseen kuvapalveluun ja lisätään linkki sivulle. <ul> </ul> Lista. Käyttö: <ul> <li> ensimmäinen </li> <li> toinen </li> </ul>. ensimmäinen toinen <ol></ol> Numeroitu lista. Käyttö: <ol> <li> ensimmäinen </li> <li> toinen </li> </ol>. 1. ensimmäinen 2. toinen
<table> </table> Taulukkoelementti. Vältä käyttöä mahdollisimman paljon. Käyttö: <table> <tr> <th>päivä</th> <th>tapahtuma</th> </tr> <tr> <td>10.10.2012</td> <td>talkoot</td> </tr> </table> <- taulukon aloitus <- ensimmäinen rivi alkaa <- ensimmäisen solun otsikko <- toisen solun otsikko, poista nämä jos et tarvi <- ensimmäinen rivi päättyy <- toinen rivi alkaa <- toisen rivin ensimmäinen solu <- toisen rivin toinen solu <- toinen rivi päättyy <- taulukko päättyy Päivä Tapahtuma 10.10.2012 Talkoot <strong> </strong> Strong-elementti. Tällä korostetaan tekstiä. Vaikutus on sama kuin tekstin boldaus tekstieditorissa. Käyttö: <p> Tämä kappale vaatii <strong>korostettua</strong> tekstiä.</p> Tämä kappale vaatii korostettua tekstiä. <br /> Pakotettu rivinvaihto. Käyttöä ei yleensä suositella, mutta voit käyttää sitä harkiten. Älä kuitenkaan koskaan käytä sitä kappaleiden luontiin, vaan tee ne <p></p> -elementillä. Huomaa että elementti päättyy itseenseä, lopussa täytyy siis olla / -merkki jota ennen on välilyönti. Käyttö: <p>tämä <br /> kappale <br /> vaatii <br /> rivinvaihtoja.</p> Tämä kappale vaatii rivinvaihtoja. <pre> </pre> Tämä elementti on siitä erikoinen että sen väliin kirjoitettu teksti näkyy selainikkunassa juuri sellaisenaan, eli se pakottaa siihen muotoilut. Voit käyttää kokeillen, mutta älä kuitenkaan luo sillä suuria tekstikappaleita. Yleisimmin sitä käytetään erottamaan tekstistä esimerkiksi viittauksia. Lisää elementtejä löydät mm. englanniksi osoitteesta: http://www.w3schools.com/