Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. 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. Ohjeen tässä osassa käydään läpi perusteita ja elementtejä, voit siirtyä suoraan muokkaamaan sivupohjia seuraavan otsikon alta löytyvään ohjeeseen ja palata tähän takaisin aina kun kohtaat jonkun ongelman. Sivupohjien rakenne Kun aloitat tekemään oman yhdistyksesi kotisivuja sivupohjien avulla, ota sivupohjat sisältävä paketti kotisivulta. Paketit on pakattu rar ja 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. 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ä. Seuraavaksi esitellään tarvittavia elementtejä. Esimerkkejä löydät sivupohja-esimerkeistä.
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 border="1"> <tr> <th>päivä</th> <th>tapahtuma</th> </tr> <tr> <td>10.10.2012</td> <td>talkoot</td> </tr> </table> <- taulun aloitus, border= 1 tekee reunuksen <- 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/