sivustolta Daniel Koskinen

Emme yleensä pidä siitä, kun jokin menee pieleen tai ei toimi. Vielä vähemmän pidämme siitä, että meitä syytetään asioista, jotka eivät johdu meistä. Varsinkin suuressa ja ihmeellisessa “ATK-Internetissä” itsesyytökset ovat herkässä, kun jokin ei menekään niin kuin piti.

Tätä tunnetta voi huomattavasti vähentää fiksuilla sanamuodoilla, kuten Twitter tekee, jos viserrys ei jostain syystä mennytkään perille:

Anteeksi! ME teimme jotain väärin.

Syyllisyyden ohjaaminen yksiselitteisesti palveluun helpottaa hitusen käyttäjän oloa ja kannustaa yrittämään uudestaan. Ainakin kerran.

Alkuperäinen kirjoitus: Miten varmistat, ettei käyttäjää suututa niin paljon

sivustolta Daniel Koskinen

Yritin hiljattain varata vuokra-autoa kolmesta eri yhdysvaltalaisesta autonvuokrausfimasta verkon välityksellä. Lopulta vuokraus onnistui, mutta parilta ensimmäiseltä firmalta jäi asiakas saamatta yksinkertaisesti siitä syystä, etten tykkää siitä että minua kiusataan.

Hertz veti pohjat. Varauslomakkeen yhteydessä kysytään paikkakunnan lisäksi, minä päivänä ja mihin aikaan auto halutaan vuokrata. Tämän jälkeen käyttäjälle näytetään lista autonvuokraamoista, jotka sijaitsevat lähellä toivottua paikkaa. Ajan kysymisestä huolimatta lista sisältää myös vuokraamoja, jotka eivät ole auki toivottuna ajankohtana. Epähuomiossa valitsin siis vuokraamon, joka onkin kiinni, ja sain seuraavanlaisen ilmoituksen:

Tässä vaiheessa vain hitusen kiukuttaa.

Eipä tässä mitään, ajattelin, ja napsautin hyödyllisen näköistä “Help me find a location” -linkkiä. Hertzillä on vähän erikoinen käsitys auttamisesta, sillä seuraavalle ruuduilla avautui lista kaikista maailman maista, joissa on autovuokraamoja.

Nyt jurppii oikein kunnolla.

Tässä kohtaa alun suhteellisen miellyttävä käyttökokemus hajosi täysin, ja vaihdoin firmaa. Vinkkinä siis vastaavanlaisia sivustoja toteuttaville: huomioi myös virhetilanteet! Tässäkin tapauksessa olisi suhteellisen yksinkertaista tallentaa muistiin käyttäjän alun perin toivoma sijainti. Tämän tiedon avulla olisi helppo näyttää uudelleen lista vain kyseisellä paikkakunnalla sijaitsevista vuokraamoista. Vieläkin parempi vaihtoehto olisi ehkäistä virhetilanteiden synty alun perin huomioimalla vuokraamojen aukioloajat.

Alkuperäinen kirjoitus: Miten saat käyttäjän suuttumaan

sivustolta Daniel Koskinen

Aki Björklund kirjoitti eilen blogissaan ytimekkään arvion Ethan Marcotten mainiosta Responsive Web Design -kirjasta. Luin saman opuksen toissaviikolla, ja allekirjoitan täysin Akin näkemyksen, että kirja on pakollista luettavaa kaikille verkkopalveluiden suunnittelijoille ja kehittäjille.

Olen pohtinut, mikä olisi hyvä suomenkielinen vaihtoehto responsiiville. Responsive tarkoittaa sanakirjan mukaan vastaanottavaista, myötämielistä ja herkästi reagoivaa. Näistä mikään ei oikein tunnu hyvältä kuvailemaan verkkosivustoja. Itse olen alkanut käyttää ilmaisua mukautuva: Sivusto, joka toimii ja näyttää fiksulta kaiken kokoisilla ruuduilla mukautuu ympäristöönsä (ainakin joiltakin osin). Suunnittelua, joka tähtää tällaisten sivustojen toteuttamiseen voitaneen silloin hyvällä syyllä kutsua mukautuvaksi verkkosuunnitteluksi.

Alkuperäinen kirjoitus: Mukautuvaa verkkosuunnittelua

sivustolta Daniel Koskinen

Siinä on jotain surullista kun yritetään markkinoida jotakin, jonka olen jo ostanut. Amnestyn kuukausilahjoittajaksi pyytävä feissari ei tietenkään voi etukäteen tietää, olenko jo lahjoittaja vai en, mutta Suomen Yrittäjien luulisi tietävän, keille heidän jäsenistään tulee Yrittäjä-lehti, kun siitä erikseen maksetaan.

Jo viime viikolla luukusta tupsahti yrittäjäjärjestön jäsenmaksukaavake sekä tuorein Yrittäjä-lehden numero, jota olen koko ajan tilannut jäsenyyden ohessa. Tänään sitten tupsahti luukusta toinen samanlainen lehti, ja sen mukana evästys siitä että nyt olisi oiva mahdollisuus tilata jäsenmaksun yhteydessä tämä mainio julkaisu!

Toivottavasti kaikkia jäsenmaksuja ei käytetä tällaiseen tuplamarkkinointiin.

Alkuperäinen kirjoitus: Markkinoinnin kohdistaminen

sivustolta Daniel Koskinen

Kirjoittaako suomeksi vai englanniksi? Olen paininut ongelman kanssa monesti ja päätynyt lähinnä kirjoittamaan molemmilla kielillä. Because it’s fun!

Emergent, Canopy and Undergrowth -firman Marko Teräs teki kuitenkin rohkean vedon ja vaihtoi oman bloginsa kielen englannista suomeksi. Aiheina on Markon omien sanojen mukaan

nykypäiväistä oikeanlaista johtajuutta, yksilöiden vastuunottoa omasta elämästään, kaikenlaisten diktatoristen ja ei-millään-perusjärjellä ansaittujen johtajuuspaikkojen ja -mallien purkamista sekä uudenlaisen organisaatiomallien, toimintatapojen ja elämänasenteen sisäistämistä

Hyvä Marko! Jään mielenkiinnolla seuraamaan.

Alkuperäinen kirjoitus: Nykyaikaisista organisaatioista ja johtajuudesta suomeksi

sivustolta Daniel Koskinen

Tulevassa WordPressin 3.2 -versiossa on todennäköisesti luvassa muutamia yllätyksiä.

CSS-päivitykset ovat vielä kesken, joten ylläoleva kuva ei välttämättä vastaa lopullista tyyliä. On toki myös mahdollista, etteivät kaikki uudistukset päädy lopulliseen julkaisuversioon. Käyttöliittymäkehitystä voi seurata Make WordPress UI -blogissa ja kehitysversiota yleisesti WordPress Development Updates -blogissa.

Uutta tulevassa julkaisussa on myös mm. uusi TwentyEleven-teema. Sen asetuksissa on hauska lisä, joka lisää WP:n “oletuspaketin” räätälöitävyyttä:

3.2-julkaisua lupaillaan kesäkuun lopun nurkille, ja saamme suomenkielisenkin version varmasti samoihin aikoihin pihalle. Lisäys: kehitysversiolla on helpointa leikkiä WordPress Beta Tester -lisäosan avulla.

Alkuperäinen kirjoitus: Ulkoasu-uudistuksia tulevassa WordPressissä

sivustolta Daniel Koskinen

Siirryin käyttämään WordPress Multi-Language -lisäosaa blogini erikielisen sisällön erottamiseen. Muutoksen seurauksena pääsivulla on nyt vain englanninkielistä sisältöä, ja suomenkieliset sisällöt löytyvät jatkossa osoitteesta http://danielkoskinen.com/fi/.

Harkitsin pitkään lisäosan käyttöä, mutta päädyin siihen lopulta siksi, että se helpottaa omalla kohdallani varsinkin ei-blogimuotoisen sisällön kääntämistä. Myös aiemmat kokemukset muilta sivustoilta ovat osoittaneet lisäosan erittäin toimivaksi (mm. äskettäin Ponsin kanssa toteutulla Yhteinen Östersundom -sivustolla). WPML on nykyisin kaupallinen, ja siitä saa lisätietoja osoitteesta wpml.org (jos päädyt ostamaan, saan pienen provision).

Tarkista syöte

Saatan jatkossa kirjoittaa osan kirjoituksista molemmilla kielillä. Jos siis käytät syötteenlukijaa, voit valita kielikohtaisen syötteen:

Englanninkieliset: http://feeds.feedburner.com/danielkoskinen_en
Suomenkieliset: http://feeds.feedburner.com/danielkoskinen_fi
Kaikki kirjoitukset: http://feeds.feedburner.com/danielkoskinen

Alkuperäinen kirjoitus: Suomen- ja englanninkielinen sisältö erotettu

sivustolta Daniel Koskinen

Joitakin WordPress-lisäosia

Huom. kaikki tässä mainitut lisäosat voit asentaa yleensä suoraan WordPressin hallintaliittymästä kohdasta Lisäosat > Lisää uusi

• WP DB Backup – WordPressin tietokannan automaattiseen varmuuskopiointiin
  • Varmuuskopiot voi esim. asettaa päivittäisiksi ja lähtemään automaattisesti haluamaasi sähköpostiosoitteeseen
• WP e-Commerce – ilmainen lisäosa verkkokaupan luomista varten
• GigPress – esim. bändin keikkojen tai muiden tapahtumien listaamiseen
• BuddyPress – tee WordPressistä yhteisösivusto, jossa kävijät voivat rekisteröityä, lähettää toisilleen yksityisviestejä, luoda ryhmiä jne.
  • Suomenkielisen kielitiedoston ja ohjeet sen asentamiseen löydät osoitteesta fi.buddypress.org

Kurssilla mainittuja ilmaisia teemoja

• TwentyTen, WP:n oletusteema (valmiina WP:ssä).
  • Opas oman teeman luomiseen TwentyTenin pohjalta, luomalla ns. lapsiteeman (child theme): How to Create a TwentyTen Child Theme
  • Yleisesti lapsiteemoista, joka on suositelluin tapa tehdä muutoksia olemassaolevaan teemaan: Child Themes
• Platform, melko joustava, hallintaliittymästä muokattava teema (olemassa myös maksullinen Pro-versio)
• Autofocus, erinomainen ja minimalistinen valokuvablogiteema

Alkuperäinen kirjoitus: WordPress-linkkejä

sivustolta Daniel Koskinen

WordPress-sivustojen kehittämisessä on hyödyllistä asentaa oma paikallinen testiympäristö, eli omalle koneelleen. Uusien ominaisuuksien testaus on siten helpompaa eikä tiedostoja tarvitse jatkuvasti siirrellä FTP:llä palvelimelle.

Käyn tässä läpi, miten voit asentaa WordPressin Mac OS X:ään. Vaiheet:

1. Lataa ja asenna MAMP
2. Muokkaa /etc/hosts-tiedostoasi (valinnainen)
3. Lataa WordPress ja siirrä tiedostot palvelimen juurihakemistoon
4. Avaa sivusto selaimeesi ja asenna WordPress

Vaihe 1: Lataa ja asenna MAMP

WordPressin asentaminen edellyttää tukea PHP-kielelle ja MySQL-tietokannoille. OS X sisältää jo oman version edellä mainituista ohjelmistoista, mutta tyypillistä web-tuotantoympäristöä vastaavan kokonaisuuden saat helpoiten asentamalla MAMP-ohjelmiston, joka on lyhenne sanoista “Mac, Apache, MySQL, PHP”.

Lataa MAMP.

Asenna MAMP raahaamalla MAMP-kansio Ohjelmat-kansioosi.

Käynnistä MAMP. Tämä avaa automaattisesti selaimeen MAMP-aloitussivun, joka toimii samalla vahvistuksena sille, että palvelin toimii normaalisti. Sivulla on myös linkit phpMyAdmin-ohjelmistoon, jota käytetään tietokannan hallinnoinnissa.

Jos sinulla ei ole muita web-palvelimia asennettuna koneellesi, kannattaa ohjelman asetuksista (Preferences) valita välilehti Ports ja klikata painiketta, jossa lukee “Set to default Apache and MySQL ports”.

Voit myös halutessasi muuttaa Apache-välilehdeltä palvelimen juurihakemiston sijaintia.

Avaa sen jälkeen phpMyAdmin MAMP-aloitussivulta ja luo uusi tietokanta WordPressiä varten. Pistä tietokannan nimi muistiin.

Vaihe 2: Muokkaa /etc/hosts-tiedostoasi (valinnainen)

Jos haluat WordPress-asennuksellesi yksilöllisemmän paikallisen URL:n, joudut muokkaamaan /etc/hosts-tiedostoa. Avaa tätä varten Pääte (Terminal).

Syötä seuraava komento:

sudo nano /etc/hosts

Tämä avaa hosts-tiedoston muokattavaksi. Joudut syöttämään järjestelmänvalvojan salasanan.

Lisää hosts-tiedoston loppuun tyhjä rivi ja kirjoita siihen seuraava sisältö, käyttäen tabulaattoria erottimena:

Syötä seuraava komento:

127.0.0.1      wp.dev

Huom! Valitsemasi URL voi olla mikä tahansa (tässä tapauksessa wp.dev). Käytä jotain lyhyttä ja helposti muistettavaa.

Tallenna tiedosto painamalla Control + O ja paina Enteriä. Testaa osoitteen toimivuutta avaamalla selaimeen edellä valitsemasi URL:in.

Vaihe 3: Siirrä WordPress-tiedostot palvelimen juurihakemistoon

Lataa WordPress ja siirrä puretun zip-paketin sisältö palvelimen juureen, joka on oletusarvoisesti /Ohjelmat/MAMP/htdocs/ (/Applications/MAMP/htdocs/). Jos muutit vaiheessa 1 Apachen juurihakemiston sijaintia, siirrä WordPress-tiedostot sinne.

Vaihe 4: Avaa sivusto selaimeesi ja asenna WordPress

Helpoin tapa asentaa WordPress on vain avata se selaimeen ja vastata kysymyksiin. Syötä tietokannan nimeksi aikaisemmin luomasi tietokannan nimi. Tietokannan käyttäjän tunnus on root ja salasana root. Tietokantapalvelimen osoite on yksinkertaisesti localhost. Valitse itsellesi sopiva käyttäjätunnus ja anna palaa. Sinulla on nyt oma testi-WordPress!

Alkuperäinen kirjoitus: Asenna WordPress omalle koneellesi (Mac)

sivustolta Daniel Koskinen

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.

Alkuperäinen kirjoitus: Johdanto: HTML, CSS ja Javascript