Osuuskunta Sange — Internet-asiantuntijat



Verkkosivujen teko-ohje

Verkkosivujen tekoon on olemassa paljon erilaisia ohjelmia, mutta yleensä niillä saatava lopputulos on teknisesti huonolaatuinen. Paras tapa tehdä verkkosivuja on kirjoittaa kuvauskoodi käsin. HTML-koodaaminen voi alkuksi vaikuttaa hankalalta, mutta pienen alkuopettelun jälkeen se on niin helppoa, että 10-vuotiaat lapsetkin osaavat sitä. Hyvä tapa oppia html-koodia on lukea muiden sivujen lähdekoodeja.

Jos kuitenkin välttämättä tarvitset html-editoria, suosittelemme käytettäväksi Nvu:ta.

Näin teet laadukkaat kotisivut

Kopioi ensin sopiva pohja joltakin toiselta sivulta. Voit hyvin valita pohjaksi uusimman standardin mukaisen xhtml-dokumentin, sillä html-standardit ovat taaksepäin yhteensopivia (eli uudet tekniikat toimivat tavallaan myös vanhoissa selainohjelmissa).

Hyvät verkkosivut teet seuraavilla periaatteilla:

  1. Tee ensin oikein jäsennelty sisältö (ei ulkonäköä)
  2. Luo vasta sitten ulkonäkö CSS:llä
  3. Tarkista sivun laatu erilaisilla työkaluilla ja kokeilemalla sivua mahdollisimman monessa selainohjelmassa.

Tee ensin sisältö

Aloita www-sivun teko kirjoittamalla sisältö ilman ylimääräisiä koristeita, eli käyttäen ainoastaan sisältöä määritteleviä elementtejä.

Esimerkki yksinkertaisen sivun koodista:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
  <title>Esimerkkisivun otsikkorivin teksti</title>
</head>
<body>
 <h1>Esimerkkisivun otsikko</h1>
   <p>Ensimmäinen tekstikappale, jossa <strong>korostus</strong>.</p>
   <p>Toinen tekstikappale, jossa <a href="http://www.sange.fi/">linkki Sangen sivuille</a>.</p>
</body>
</html>

Näytä esimerkkisivu

Käytä tekstissä vain elementtejä, jotka kertovat tekstin rakenteesta, kuten esim <p>, <h1>, <h2>, <cite>, <em>, <dfn>, <blockquote>, <samp>, <kbd>, <var>, <abbr>, <acronym> jne. Listaukset tulisi toteuttaa <ul>/<ol> ja <li> -määritteillä. <table> -määrite on tarkoitettu ainoastaan taulukkojen tekemiseen, ei sivuston ulkonäön jäsentelyyn. Suositellut elementit voi tarkistaa esim. W3C:n HTML 4.01 standardista.

Tarkista html-koodin oikeellisuus

Tarkista että sivu on W3C:n standardin mukaista xhtml:ää http://validator.w3.org/ -palvelulla. Korjaa virheet ja tarkista uudestaan kunnes sivu on virheetön.

Tarkista miltä sivu näyttää nyt (ilman koristeltua ulkonäköä)

Mieti, että tämän sivun tulee näkemään hakukoneet, vanhat selaimet, kännykkäselaimet jne. Sivun tulisi olla jotenkuten järkevä tällaisenaan, eli ilman ulkonäkömuotoiluja.

Jäsentele sisältö ja nimeä osat

Kun varsinaisen informaation sisältämä perussivu on valmis, voi aloittaa koristeellisemman ulkonäön teon CSS:llä. Jäsentele ensin sisältö <div>-elementein ja anna elementeille tunnisteet id-määritteellä. Samantyyliset elementit voi nimetä class-määritteellä.

Esimerkki pätkästä sivun sisältöä:

<div id="ekapalsta">
 <h1>Esimerkkisivun otsikko</h1>
   <p>Ensimmäinen tekstikappale, jossa <strong>korostus</strong>.</p>
   <p class="punainen">Punaista tekstiä.</p>
<div>

<div id="tokapalsta">
<h2>Esimerkkisivun otsikko</h2>
   <p>Tekstikappale, jossa vain normaalia tekstiä.</p>
   <p class="punainen">Punaista tekstiä.</p>
<div>

<div id="kolmaspalsta">
<h2>Esimerkkisivun otsikko</h2>
   <p>Tekstikappale, jossa vain normaalia tekstiä.</p>
   <p>Tekstikappale, jossa vain normaalia tekstiä.</p>
<div>

Näytä esimerkkisivu

Kun asiasisältö on valmis, lisää ulkonäkömuotoilut

Ulkonäkömuotoilut kannattaa laittaa erilliseen tiedostoon jota kutsutaan html-asiakirjasta head-elementin sisällä olevalla rivillä:

<link rel="stylesheet" type="text/css" media="all" href="tyylitiedosto.css" />

Tyylitiedoston sisältö voi olla esimerkiksi:


body {
	margin: 0.5em;
	background: white;
}

a {	text-decoration: underline; }
a:link { color: #6d91b4; }
a:active { color: #3c566e; }
a:visited { color: #2f4b66; }

h1 {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 170%;
}

.punainen {
	color: red;
}

#tokapalsta {
	background: blue;
	color: #fff;
}

Näytä esimerkkisivu

Esimerkissä asetetaan hieman ulkonäkömuotoiluja taustalle, linkeille ja <h1>-otsikolle. Lisäksi määritellään miltä class="punainen"-elementit näyttävät sekä asetetaan id="tokapalsta"-elementille sininen tausta ja valkoinen tekstiväri.

Lisää CSS-määritteitä opit lukemalla muiden sivujen lähdekoodia tai varsinaisen W3C:n CSS-standardin.

Tarkista css-koodin oikeellisuus

Myös CSS-koodin oikeellisuuteen löytyy automaattinen tarkistuspalvelu osoitteesta http://jigsaw.w3.org/css-validator/. Korjaa virheet ja tarkista uudestaan kunnes sivu on virheetön.

Laajat sivut kannattaa toteuttaa ohjelmoiden

Ohjelmoidut, dynaamiset sivut, helpottavat ylläpitoa. Se on yksinkertaisimmillaan sitä, että sivuston ylä- ja alaosa sijaitsevat omissa tiedostoissaan joista ne liitetään sisällön ympärille esimerkiksi PHP-skriptillä.

Esimerkiksi sivu.phtml voisi sisältää koodin:

<?PHP include_once('alku.inc'); ?>
<h2>Otsikko</h2>
<p>tekstiä tekstiä tekstiä</p>
<?PHP include_once('loppu.inc'); ?>

Näinollen jos ylläpitäjä muuttaa jotakin sivujen yhteisessä alku- tai loppuosassa esiintyvää asiaa, tarvitsee hänen muokata vain alku.inc ja loppu.inc -tiedostojen sisältöä eikä kaikkia yksittäisiä sivuja. Yksittäisiä sivuja vastaavissa tiedostoissa olisi vain ja ainoastaan kyseiseen sivuun liittyvät asiat.

Syvennä laatuajattelua

Kun olet tehnyt verkkosivujen jonkin verran, kannattaa sinun syventää tietämystäsi verkkosivujen laadusta. Aloita lukemalla Sangen Verkkosivujen laatuohje.

Esimerkkejä

Hyvin toteutettuja sivuja ovat esimerkiksi:

Näille sivuille on yhtenäistä se, että niiden sisältö on selkeää, grafiikka on kevyttä ja skaalautuvaa, sivut toimivat kaikilla selaimilla sekä niiden html- ja css-koodi noudattavat standardeja. Suomi.fi ja Tumsan.fi käyttävät edelleen table-elementtiä ulkonäön jäsentelyyn, mutta kuitenkin maltillisesti niin, että sivusto toimii myös teksti- tai ääni-selaimella.

Lisätietoja

Tarvitsetteko koulutusta?

Osuuskunta Sangelta voit pyytää tarjousta verkkosivujen teon kouluttamisesta.



YhteystiedotSivukarttaPävitetyt sivut

Osuuskunta Sange • PL 197, 00131 Helsinki • info@sange.fi