Alkuperäinen artikkeli: The Web Standards model: HTML, CSS & Javascript (Jonathan Lane). Sekä alkuperäisen että tämän käännöksen oikeudet : Creative Commons Attribution, Non Commercial – Share Alike 2.5.
Miksi erikseen?
Yleensä ensimmäinen kysymys, mitä web-standardeihin liittyen nousee esiin on se, miksi sisältö, tyylit ja toiminnallisuus pitäisi erottaa toisistaan. Sisällön, tyylittelyt ja asettelut on mahdollista toteuttaa pelkkiä HTML-fonttielementtejä ja taulukoita käyttäen, joten miksi pitäisi vaivautua? Vanhoina huonoina aikoina HTML:n taulukkoelementtejä käytettiin yleisesti web-sivujen taittoon, ja jotkut tekevät niin edelleen. Näitä menetelmiä ei kuitenkaan käsitellä tässä. Tässä joitakin tärkeimpiä syitä CSS:n ja HTML:n käyttöön vanhojen menetelmien sijasta:
Koodin tehokkuus: Mitä suurempi tiedosto on, sitä pitempään sen lataaminen palvelimelta kestää. Hitaasti latautuvat sivut heikentävät käyttökokemusta ja voivat aiheuttaa kävijöille jopa lisäkustannuksia (mm. vanhojen modeemien varassa oleville sekä monille mobiilikäyttäjille). Ei siis kannata tuhlata kaistaa suuriin sivuihin jotka sisältävät tyyli- ja asetteluinformaatiota jokaisessa HTML-sivussa. Paljon parempi vaihtoehto on tehdä HTML-tiedostoista mahdollisimman lyhyitä ja siistejä, ja sisällyttää kaikki tyyli-informaatio vain kerran ladattavaan, erilliseen CSS-tiedostoon. Hyvä käytännön esimerkki on A List Apartin toteuttama suositun uutissivuston uudelleenkoodaus HTML/CSS:ää käyttäen: the A List Apart Slashdot rewrite article (http://www.alistapart.com/articles/slashdot/).
Ylläpidon helppous: Edellisestä seuraa myös se, että sinun tarvitsee tehdä muutokset vain yhteen paikkaan, jos olet keskittänyt tyylitiedot yhteen tiedostoon.
Saavutettavuus: Näkövammaiset webin käyttävät voivat käyttää ruudunlukijaohjelmistoa webbisivujen selaamiseen. Näiden lisäksi monet liikuntarajoitteiset käyttävät puheohjattuja ohjelmia, jotka hyötyvät hyvin rakennetuista semanttisista web-sivuista. Mitä vähemmän vain ulkoasuun liittyvää koodia seassa on, sitä helpommin ruudunlukijat ja muut avustavat teknologiat pääsevät “itse asiaan” eli sisältöön käsiksi. Ruudunlukijat eivät pääse käsiksi kuviin upotettuihin teksteihin, eivätkä aina ymmärrä kaikkea JavaScriptin käyttötapoja. Varmista että tärkein sisältösi on kaikkien saatavilla!
Laiteyhteensopivuus: Koska HTML-sivusi sisältää vain sisällön merkkausta, ei ulkoasuun viittaavia elementtejä, sama sisältö voidaan esittää useissa erilaisissa päätelaitteissa, pelkkää CSS-tyylitiedostoa vaihtamalla. CSS tukee myös natiivisti erilaisten tyylisääntöjen luomisen eri esitystavoille, kuten näyttökatseluun, tulosteisiin ja mobiililaitteille.
Hakukoneet: Todennäköisesti haluat hakukoneiden löytävän sisältösi. Jos hakukoneen hakurobotilla on vaikeuksia sivustosi selaamisessa esimerkiksi siksi, ettei otsikoita ole koodissa määritelty oikein, hakusijoituksesi todennäköisesti kärsii siitä.
Se on vain hyvä tapa: Tämä ei ole mikään erityisen painava syy, mutta kysypä keneltä tahansa standardeista perillä olevalta web-suunnittelun ammattilaiselta asiasta, niin saat vastaukseksi että sisällön, ulkoasun ja toiminnallisuuden erottaminen on yksinkertaisesti paras tapa kehittää ohjelmistoja ja web-palveluita.
Paha esimerkki: Microsoft Wordin tuottama yksinkertainen www-sivu
Koodi, jokaisen sivuston perusta
HTML ja XHTML ovat merkkauskieliä, jotka koostuvat elementeistä, jotka sisältävät attribuutteja. Jotkut näistä elementeistä ja attribuuteista ovat pakollisia, toiset eivät. Näillä elementeillä merkitään asiakirjan sisältämät eri sisällöt, ja määritellään mm. mitkä osat siitä ovat otsikoita, listoja ja tekstikappaleita.
Kuten saatat arvata, elementit määrittelevät varsinaisen tietotyypin, ja attribuuteilla määritellään lisätietoja kuten yksilöivä ID tai linkin osoite. Huomaa että merkkauksen eli koodin pitäisi olla mahdollisimman semanttista, ts. sen pitäisi kuvata sisällön merkitystä niin hyvin kuin mahdollista.
Mitä on XHTML?
XHTML:n X-kirjain on lyhenne sanasta “extensible”. Yksi yleisimmistä aloittelijoiden kysymyksistä liittyy siihen, pitäisikö käyttää HTML:ää vai XHTML:ää. Molemmat tekevät pitkälti samaa asiaa, isoin ero on rakenteessa.
En huolehtisi aluksi liikaa siitä, kumpaa käytät. Uusi HTML5-standardi sallii kummatkin merkkaustavat, joten voit valita sen mikä tuntuu itsestäsi selkeimmältä.
Mitä on validointi?
Koska HTML, XHTML ja CSS ovat standardeja, niitä valvova taho World Wide Web Consortium (W3C) on luonut validaattoreita, joita voit käyttää tarkistaaksesi koodin oikeellisuuden. Ne huomauttavat esimerkiksi puuttuvista sulkutageista (puhutaan näistä myöhemmin…) tai lainausmerkeistä attribuuttien ympärillä. HTML-validaattori löytyy osoitteesta http://validator.w3.org CSS-koodisi voit tarkistaa osoitteessa
http://jigsaw.w3.org/css-validator/
CSS
Cascading Style Sheet -tyylikielellä voit säätää hyvin tarkasti sivusi ulkonäköä ja asettelua. Voit muuttaa ja lisätä värejä, taustakuvia, muuttaa fonttikokoja ja tyylejä ja jopa asetella elementit haluamallasi tavalla sivulle. Tyylien määrittelyyn on kolme pääasiallista tapaa: elementin uudelleenmäärittely, tyylin määrittely jollekin ID:lle tai tyylin määrittely luokalle.
1. Elementin uudelleenmäärittely. Voit muuttaa tapaa, jolla mikä tahansa HTML-elementti esitetään määrittelemällä sille tyylisäännön. Jos haluat kaikkiin tekstikappaleisiisi kaksinkertaisen rivivälin ja vihreän tekstin, tekisit CSS-tiedostoosi seuraavanlaisen säännön:
p {
line-height: 2;
color: green;
}
Nyt kaikki teksti, joka on <p></p> -tagien sisällä näytetään kaksinkertaisella rivivälillä ja vihreällä tekstivärillä. 2. ID:n määrittely. Voit antaa mille tahansa elementille ID-attribuutin, joka määrittelee sen yksilöllisesti. Sama ID-arvo voi esiintyä samalla sivulla vain yhden kerran, esim. id=”valikko”. Näin voit tarkemmin hallita sivun ulkoasua, jos haluatkin esim. vain yhden tekstikappaleen tuplarivivälillä ja vihreällä värillä. Annetaan ensin haluamallemme elementille ID:
<p id="korostus">Korostettava tekstikappale</p>
Sitten määritellään vastaava CSS-sääntö:
#korostus {
line-height: 2;
color: green;
}
Huomaa #-merkki, jota käytetään CSS:ssä (mutta ei HTML:ssä) id:n merkitsemiseen.
3. Luokan määrittely. Luokat (class) toimivat samalla tavoin kuin id:t, sillä erotuksella että luokan voi määritellä useammalle elementille. Esim. näin:
<p>Yksi korostettu tekstikappale.</p> <p>Toinenkin korostettu tekstikappale.</p>
CSS-sääntö tehdään vastaavasti, mutta luokkaa merkitsemään laitetaan eteen piste (.):
.korostus {
line-height: 2;
color: green;
}
JavaScript – toiminnallisuuden lisääminen web-sivulle
Lopuksi, JavaScript on ohjelmointikieli, jolla voit lisätä toiminnallisuutta web-sivuillesi. Voit esimerkiksi tarkistaa web-lomakkeeseen syötetyt tiedot ennen kuin ne lähetetään eteenpäin, luoda raahaa- ja pudota -toimintoja, muuttaa sivun tyylejä lennossa, animoida sivulla olevia elementtejä ja miljoona muuta asiaa. Moderni JavaScript toimii yleensä samalla idealla kuin CSS, eli etsitään kohde-elementti ja tehdään sille jotakin. Sen toimintapa ja kirjoitusmuoto ovat kuitenkin varsin erilaiset. JavaScript on hyvin laaja aihe, ja yksinkertaisuuden vuoksi sitä ei tulla käsittelemään seuraavissa esimerkeissä.
Esimerkkisivu
Jätin tarkoituksella käymättä läpi useita yksityiskohtia, mutta niihin palataan myöhemmin. Otetaan tähän väliin oikea esimerkkisivu, jotta saat käsityksen siitä minkä tyyppisten juttujen parissa tulet kurssin aikana puuhastelemaan. Alla oleva esimerkkisivu on lista viitteistä, joka voisi löytyä esimerkiksi jonkin raportin tai tutkielman lopusta. Lataa esimerkkikoodi.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>References</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="bggraphic"></div>
<div id="header">
<h1>References</h1>
</div>
<div id="references">
<cite>Adams, J. R. (2008). The Benefits of Valid Markup:
A Post-Modernistic Approach to Developing Web Sites.
<em>The Journal of Awesome Web Standards, 15:7,</em> 57-62.</cite>
<cite>Baker, S. (2006). <em>Validate Your Pages.... Or Else!.</em>
Detroit, MI: Are you out of your mind publishers.</cite>
<cite>Lane, J. C. (2007). Dude, HTML 4, that's like so 2000.
<em>The Journal that Publishes Genius, 1:2, </em> 12-34.</cite>
<cite>Smith, J. Q. (2005). <em>Web Standards and You.</em>
Retrieved May 3, 2007 from Web standards and you.</cite>
</div>
<div id="footer">
<p>The content of this page is copyright © 2007
<a href="mailto:jonathan.lane@gmail.com">J. Lane</a>
</p>
</div>
</body>
</html>
En lähde ylläolevaa ruotimaan rivi riviltä, mutta muutamaan seikkaan voit kiinnittää nyt huomiota:
Rivillä yksi on ns. dokumenttityyppi, Document Type Declaration, tai ihan lyhyesti vain “doctype”. Tässä tapauksessa dokumenttityyppi on uuden HTML5-standardiehdotuksen mukainen. Se määrittelee mitä sääntöjä koodisi tulisi noudattaa, jotta validaattori osaa tarkistaa sivun oikein.
Rivillä 8 viitataan tyylitiedostoon, jossa olevia tyylisääntöjä sovelletaan tämän sivun näyttämiseen.
Jokaiselle viitetyypille (merkitty ‘cite’ -elementeillä) on merkitty oma luokkansa. Näin voin määritellä niille jokaiselle oman tyylisääntönsä.
Vilkaistaanpa ylläolevaa sivua varten tehtyjä CSS-tyylejä:
styles.css
body {
background: #fff url('images/gradbg.jpg') top left repeat-x;
color: #000;
margin: 0;
padding:0;
border: 0;
font-family: Verdana, Arial, sans-serif; font-size: 1em;
}
div {
width: 800px;
margin: 0 auto;
}
#bggraphic {
background: url('images/pen.png') top left no-repeat;
height: 278px;
width: 362px;
position: absolute;
left: 50%;
z-index: 100;
}
h1 {
text-align: center;
text-transform: uppercase;
font-size: 1.5em;
margin-bottom: 30px;
background: url('images/headbg.png') top left repeat;
padding: 10px 0;
}
#references cite {
margin: 1em 0 0 3em;
text-indent: -3em;
display: block;
font-style: normal;
padding-right: 3px;
}
.website {
border-right: 5px solid blue;
}
.book {
border-right: 5px solid red;
}
.article {
border-right: 5px solid green;
}
#footer {
font-size: 0.5em;
border-top: 1px solid #000;
margin-top: 20px;
}
#footer a {
color: #000;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
Tyylien luomisessa lähti vähän mopo käsistä, mutta saat niistä aavistuksen, mitä kaikkea CSS:llä on mahdollista tehdä.
Rivillä yksi määritellään joitakin oletusasetuksia kuten tekstin ja taustan värit, tekstin ympärille tulevan reunan leveys jne. Kaikki eivät välttämättä vaivaudu määrittelemään tällaisia oletusasetuksia, ja käytännössä kaikki modernit web-selaimet määrittelevät omat oletustyylinsä. Se on kuitenkin hyvä ajatus, sillä voit tarkemmin kontrolloida miltä sivusi näyttää eri selaimissa.
Seuraavalla rivillä olen määritellyt sivun leveydeksi 800px (tässä voisi olla prosenttiarvo, jolloin sivun leveys riippuisi selainikkunan leveydestä). Asettamani marginaaliarvo (margin) varmistaa että sisältö pysyy keskitettynä.
Tarkastellaan seuraavaksi sivulla käytettyjä taustakuvia (määritelty background: url -säännöillä). Sivulla on kolme erilaista taustaelementtiä. Ensimmäinen on liukuväri, joka toistuu sivun yläosassa. Toisena olen käyttänyt puoliksi läpinäkyvää PNG-tiedostoa kynää esittävässä kuvassa. Osittain läpinäkyvät kuvat eivät toimi Internet Explorerin versioissa 6 tai sitä vanhemmissa selaimissa, mutta toimivat lähes kaikissa moderneissa selaimissa. Lopuksi, olen käyttänyt toista puoliläpinäkyvää PNG-tiedostoa otsikon taustakuvana. Se antaa otsikolle hieman lisää kontrastia.
HTML:ssä, CSS:ssä ja Javascriptissä ei ole mitään mystistä. Standardien mukaisella merkintätavalla saat kaikkein varmimmin aikaiseksi sivuja, jotka toimivat jatkossakin eri selainversioilla ja lukuisilla uusilla web-selaukseen käytetyillä laitteilla.
Daniel Koskinen 
Leave a Reply