Ohjelmointi

HTM-kielestä

HTM-tiedoston tulee toimia ilman CSSää ja Java-scriptiä

• CSSllä lisätään tyylimääritteet
• Java-scriptillä lisätään toiminnallisuutta

Hakukoneista

Hakukoneilla suoritetut hakutulokset esitetään muodossa:

1. Sivun title otsikko, joka toimii linkkinä (< title>)
2. Sivun pääotsikko (<h1>)
3. Sivun ensimmäisen kappaleen tekstiä (< p>)
4. Sivun internet osoite ( http:// www...)

HTM -merkkauksesta

Tehtäessä HTM-merkkausta se kannattaa tehdä huolella ja ennen kaikkea oikein. Käytännössä tämä tarkoittaa, että käytettyjen elementtien ja atribuuttien tulee vastata ilmoitettua HTM/ XHTM versiota, eli olla käytetyssä versiossa hyväksyttyjä. Tämän lisäksi elementtejä ja atribuutteja tulee käyttää vain elementtien ja atribuuttien määrityksissä sallituissa yhteyksissä. Tämän lisäksi merkkausta tehtäessä on sisällölle hyvä antaa riittävä määrä tunnisteita, joita sitten voidaan käyttää hyväksi sivustoa linkitettäessä. Samalla se antaa paremmat mahdollisuudet hyväksikäyttää CSS:n laajaa ja monipuolista rakenne- ja ulkoasumuotoilua. Lisäksi merkkauksiin ja tunnisteisiin voidaan myös helposti viitata Java-Scriptillä.

Merkkausta tehtäessä on samalla järkevää luoda dokumentaatiota käytetyistä merkkauksista ja tunnisteista. Sillä se helpottaa jatkossa työskentelyä, kun aloitetaan merkitsemään rakenne- ja tyyliasumäärityksiä. Niin ei tarvitse jatkuvasti käydä katsomassa HTM-dokumentista, miten on jonkin asian tullut merkinneeksi.

Tarkistuksista

Ennen sivujen palvelimelle julkaisua tulisi asiasisältö tarkastaa kielioppi- ja asiavirheiden välttämiseksi, sekä lisäksi suorittaa ohjelmalliset oikeellisuus ja esteettömyys tarkistukset. Näin toimien voidaan välttyä julkaisemasta selkeästi keskeneräistä tai pahimmillaan jopa teknisesti toimimatonta sivustoa.

On kuitenkin aina syytä muistaa, että parhaimminkaan toteutettu sivu itsessään ei ole kuin vain väline tiedon tarkastelemiseen. Tästä syystä johtuen sisältöön tulee kiinnittää erityistä huomiota. Optimaalisesti tarkasteltuna paras tulos saavutetaan silloin, kun hyvää ja huolella laadittua sisältöä tukee tasokkaasti toteutettu käyttäjänkannalta järkeväsivusto.

CSS-merkkauksesta

Merkkauksella saavutettavat edut

Samaa dokumenttia voidaan käyttää erilaisilta alustoilta esimerkiksi selaimet, pienlaitteet ja tulostimet. Tällöin voidaan käyttää samaa sisällön rakennetta kaikille laitteille ja ainoastaan tarvitsee tarjota kyseisille laitteille sopivan ulkoasun sisältävät tyyliasuehdotukset. Lisäksi samaa tyyliasuehdotusta voidaan samanaikaisesti käyttää useisiin dokumentteihin. Tämä taas johtaa siihen, että dokumenttien koko pienenee, jolloin dokumenttien siirrettävyys sekä latautuvuus nopeutuvat tiedostokoon pienenemisen myötä.

Dokumentin luominen yksinkertaistuu, sillä ulkoasun määritteleminen voidaan jättää viimeiseksi. Myös dokumenttien ulkoasun muuttaminen helpottuu, sillä ulkoasuun vaikuttavat määritteet löytyvät samasta paikasta. Ja koska samoja ulkoasumääritteitä voidaan käyttää useaan dokumenttiin niin riittää, että ulkoasua koskevat muutokset tekee yhteen paikkaan.

Ulkoasusta

HTM-sivulla käyttäjälle voidaan tarjota CSS-tyyliehdotusta sivun ulkoasuksi, tästä huolimatta sivun ulkoasu muodostuu seuraavista tekijöistä, jotka voivat yksin tai yhdessä vaikuttaa sivun lopulliseen ulkoasuun.

• asiakasohjelman oletustyylit
• dokumentin tekijän tyyliehdotukset
• käyttäjän omat tyyliehdotukset

Asemointi ja muut ulkoasulliset määritteet kannattaa kirjoittaa omiin tiedostoihinsa. Samoin myös eri mediat esimerkiksi print. Tällöin tyylitiedostoista saadaan kooltaan pienempiä, joka nopeuttaa sivujen latautumista. Lisäksi näin ne myös muodostavat omat selkeät osakokonaisuutensa. Mikä edesauttaa itse koodin muokkaamista, koska silloin ei tarvitse erikseen pohtia mihin kyseinen koodi vaikuttaa.

CSS HTM-sivulla

CSS-koodi voidaan liittää HTM-dokumenttiin käyttäen seuraavia menetelmiä.

1. Upottaa koodi osaksi HTM-elementtiä.
   Ei ole missään tapauksessa suositeltavaa käyttää tätä niin sanottua hard-koodausta ulkoasua määritettäessä.

   <font color="#ff0000"></font>

2. Upottaa koodi HTM-sivun head osioon.
   Ei ole suositeltavaa käyttää tätä sivukohtaista merkkaustapaa ulkoasua määriteltäessä.

   <style type="text/css">
   div {color: red;}
   </style>

3. Hakea koodi HTM-sivulle head osioon sijoittuvalla linkillä.
   Ei ole suositeltavaa käyttää tätä tapaa noutaa ulkoasu määrityksiä.

   <link rel="stylesheet" type="text/css" href="tyyli.css"  />

4. Hakea koodi HTM-sivulle head osioon sijoittuvalla linkillä.
   Tämä on suositeltava tapa noutaa ulkoasumäärityksiä.
   Samalla mahdollistuvat dokumenttikohtaiset määritykset, joita tulee käyttää ainoastaan poikkeus tapauksissa.

   <style type="text/css" xml:space="preserve" media="screen,print">
   @import "tyyli.css";
   /*Jos tyyli.css tiedostoon on määritelty div-elementissä teksti väriksi sininen,
   niin tähän alapuolelle merkitty koodi määritelmä korvaa sen punaisella*/
   div {color: red;}
   </style>
   

CSS-painoarvot

CSS-koodin määrityksillä on omat painoarvonsa, ne määrittelevät ristiriitatilanteissa, mitä sääntöä kulloinkin noudatetaan. Jos ristiriitatilanteessa osapuolilla on molemmilla sama painoarvo, niin silloin viimeksi määritelty jää voimaan. Tästä kaskadointijärjestys ominaisuudesta Cascayding style sheet merkkauskieli on saanut nimensä.

Lisäksi tapa, jolla CSS-koodi liitetään HTM-dokumenttiin antaa painoarvon.

<style type="text/css" xml:space="preserve" media="screen,print">
@import "tyyli.css";
</style>

<link rel="stylesheet" type="text/css" href="tyyli.css"  />

Kommentointi, tunniste- ja luokkanimet

Koodia kirjoitettaessa on aina syytä lisätä koodin sekaan riittävästi kommentteja, jotta koodin luku helpottuu (tunnisteet = id ja luokat = class). Näillä voidaan viitata tiettyyn kohtaan HTM-koodissa. Tästä syystä kannattaa ne nimetä siten, että käytetyistä nimistä voidaan päätellä mikä on koodin käyttökohde.

Mallipohjista

Valmiita sivunulkoasu pohjia löytyy internetistä. Käytettäessä esimerkki pohjia tulee huomioida missä selain ympäristössä ne toimivat, mikäli halutaan saavuttaa mahdollisimman kattava selaintuki.

Valmiita mallipohjia valittaessa voit seuraavilla toimenpiteillä todeta mallipohjanulkoasun toimivuuden helposti. Sama testaus pätee tietysti mihin tahansa HTM-sivuun.

• Validoi HTM, jos sivu validoituu on se kunnossa.
• Validoi CSS, jos sivun CSS validoituu on se kunnossa.
• Ota selaimesta käyttöön suuri fonttikoko esimerkiksi 28 pixeliä ja muuta sitten fonttikokoa käyttäen näppäimistöltä control ja + painiketta kasvattaaksesi tekstikoon maksimikokoon. Sitten pienennä tekstikoko minimiin käyttäen näppäimistöltä control ja - näppäintä. Jos sivunulkoasu ei hajoa ja tekstit pysyvät lukukelpoisina on kaikki kunnossa.
• Muuta selain ikkunan kokoa niin, että se on selkeästi liianpieni dokumentinkokoon nähden ja saa aikaan vierityspalkit. Katso hajoaako sivu, ei toivotulla tavalla. Jos näin ei käy on kaikki kunnossa. Samoin voit tehdä suurentamalla ikkunakoon maksimiin katsoen hajoaako sivu, ei toivotulla tavalla. Jos näin ei käy on kaikki kunnossa.
• Toista nämä kaksi viimeistä toimenpidettä käyttäen eri selaimia/selainversioita. Jos kaikki tuntuu toimivan ilman suurempia komplikaatioita, niin kyseinen sivu on laadukkaasti toteutettu ja siten soveltuu mallipohjaksi. Mikäli näin ei ole kyseisen sivun kohdalla eli se siis ei läpäise tätä testiä niin älä käytä mallipohjaa vaan koita löytää parempi.

Java-Script ohjelmointi

Java-Scriptistä

Yleisiä Java-Scriptin käyttö kohteita ovat tekstien, kuvien sekä objektien tuominen HTM-dokumenttiin. Java-Scriptiä voidaan myös käyttää muun muassa uusien selainikkunoiden avaamiseen, navigointiin, lomaketietojen käsittelyyn. Erityisen tarpeellinen se on silloin, kun käsiteltäessä tietoa tarvitaan muuttujia.

Java-Script koostuu ohjelmointi koodista, joka pitää sisällään:

• Käskyjä
• Operaattoreita
• Objekteja

Nämä ovat, joko käyttäjän itse määrittelemiä tai sisäänrakennettuja funktioita ja objekteja.

Kirjoitettaessa Java-Scriptiä

Java-Script koodia kirjoitettaessa on aina syytä koodin sekaan lisätä riittävästi kommentteja, jotta muutkin voivat ymmärtää mistä koodissa oikein on kyse. Ja varsinkin itse myös osaa sitä lukea, sillä kommentit auttavat koodin selaamisessa ja kertovat mitä mikin osa koodista tekee. Kun koodin luomisesta on kulunut jonkin verran aikaa, niin usein se hieno toiminta idea pääsee unohtumaan. Tällöin koodin uudestaan ymmärtäminen saattaa vastata sen uudelleen kirjoittamista.

Java-Script HTM-sivulla

On olemassa kaksi tapaa littää Java-Script osaksi HTM-dokumenttia:

• Se voi sijaita upotettuna itse isäntä dokumentissa.
  HTM-sivulla koodi Java-Script sijoitetaan <script> tagien väliin <head> tagien sisälle. Ja itse tapahtuman laukaiseva osuus (tapahtumamääritteet) sijoitetaan <body> osioon oikealle paikalleen.
• Java-Script koodi voidaan kutsua erillisestä tiedostosta.
  HTM-sivulla <head> tagien sisällä olevalla linkillä voidaan hakea Java-Script koodi. Ja itse tapahtuman laukaiseva osuus (tapahtumamääritteet) sijoitetaan <body> osioon oikealle paikalleen.

Erillistä Java-Script tiedostoa tulee käyttää aina, kun samaa koodia käytetään useammin kuin kerran tai samaa koodia käytetään useammalla kuin yhdellä HTM-sivulla.

Sivuston laatija Kimmo Kaila © 6.4.2006, revisio 0  

• Sivukartta
• Käsikirjoittaminen
• Rakenne- ja käyttöliittymä
• Tekijänoikeudet
• Digivalokuvaus
• Bittigrafiikka
• Vektorigrafiikka
• Vektorianimaatio
• Digitaalinen ääni
• Digitaalinen videoeditointi
• Ohjelmointi
• Vuorovaikutustaidot
• Mediatuntemus
• Projektisuunnitelma
• Ylläpitosuunnitelma
• Tuotantoraportti

Kimmo Kaila © 2006