Tämän kurssin tarkoituksena on opastaa web-sivujen teossa. Kurssin sivuilla kerrotaan, miten päästä alkuun sivujen teossa, miten HTML-kielen tagit toimivat sekä miten sisältö ja ulkoasu tulisi suunnitella. Lisäksi kurssi sisältää muutamia vinkkejä useita sivuja sisältävän kokonaisuuden järjestämiseksi ja hiomiseksi. Suurin osa materiaalista on alun perin kirjoitettu vuonna 1996. Koko kurssin sisätö on viimeksi käyty läpi ja tarkistettu joulukuussa 2003.
Ihmiset käyttävät erilaisia selaimia, jotka toimivat kukin omalla tavallaan. Kehoitus lukea sivu tietyllä selaimella tarkoittaa, että sivun tekijä ei ole osannut tehdä sivua, joka toimisi kaikilla selaimilla. Käyttäjän pitäisi itse saada valita selaimensa, sen käyttämät kirjasimet, ikkunan koko ja näytön resoluutio sen mukaan, kuinka hänelle sopii. Siksi tämä kurssi opettaa tekemään sivuja, jotka toimivat kaikilla selaimilla ja asetuksilla.
Web-sivuja on helppo tehdä. Kun vuonna 1997 kerroin opiskelukavereilleni vetäväni kotisivukurssia aikuisopiskelijoille, he ihmettelivät, mitä opettamista kotisivujen teossa on. Itse olen sitä mieltä, että liian moni tekee sivuja helpolla editorilla tai kopioiden toisten sivuja. Tällöin tekijä harvemmin ymmärtää HTML-kielen tarkoitusta ja tekee sivuja jotka näyttävät hienoilta hänen ruudullaan, mutta eivät toimi lainkaan eri kokoisella näytöllä, eri asetuksilla, eri selaimella tai selaimen vanhemmalla versiolla katsottaessa. Myös esimerkiksi tekstin muotoilussa sekä kuvien ja värien käytössä pitäisi ottaa huomioon useita seikkoja, jotka vaikuttavat sivun luettavuuteen.
Mielestäni kotisivujen tekoa voi oppia, ja näin ollen myös opettaa. Toivon, että mahdollisimman moni kurssiini tutustuneista oppii jotain tai ainakin huomaa, että tiettyihin asioihin voi kiinnittää huomiota. Tällöin he toivottavasti suunnittelevat ja tekevät parempia sivuja ja vaikuttavat osaltaan webin kehitykseen. Tästä hyötyvät kaikki webin käyttäjät. Myös minä.
Web-sivut perustuvat HTML-kieleen (Hypertext Markup Language). Se on merkintäkieli, jonka avulla voidaan merkitä tiedon rakennetta. HTML sisältää paljon esitystapaan liittyviä asioita, esim. mahdollisuuksia merkitä tekstin kokoa, korostuksia, listoja, linkkejä, sijoittaa dokumenttiin kuvia jne. Nämä ohjeet ovat usein suhteellisia, esimerkiksi suurempaa tekstiä haluttaessa ei voida määrätä tarkoin, kuinka paljon suurempaa tekstin tulisi olla. Jotkut seikat voidaan määrätä tarkasti, esimerkiksi kuvan leveys ja korkeus pikseleinä. Ulkoasun ja esitystavan muotoiluun kannattaa käyttää HTML:n sijaan erillisiä CSS-tyylitiedostoja.
HTML koostuu usein englannin kielestä
johdetuista komennoista, elementeistä, joita
merkitään tageilla. Tagit erotetaan muusta
tekstistä <- ja
>-merkeillä. Useilla
elementeillä on sekä alku- että lopputagi. Jotkut
elementit ovat "tyhjiä" eli niitä merkitään
vain yhdellä tagilla.
Esimerkiksi ylimmän tason otsikko voidan merkitään
elementillä h1, tekstikappale
elementillä p ja rivinvaihto elementillä
<br />.
Elementeillä h1 ja p on sekä alku- että lopputagi.
Tyhjän elementin br loppumista ilmaiseva kauttaviiva on
XHTML:ää käytettäessä ainoan tagin
sisällä:
<h1>otsikko</h1> <p>kappale, joka sisältää <br /> rivinvaihdon.</p>
Vanhemmissa HTML-versioissa rivinvaihtoa merkittiin tagilla <BR> ilman tyhjästä elementistä kertovaa kauttaviivaa. Vanhoissa versioissa oli myös mahdollista jättää lopputagit merkitsemättä tietyiltä elementeiltä.
HTML ei suinkaan ole valmis. Se kasvaa ja muuttuu jatkuvasti; uusia elementtejä keksivät sekä web-sivujen tekjät että selainohjelmien valmistajat. Kielen kehitystä ohjailee W3C, kehityksessä mukana olevien yritysten konsortio. Uusin W3C:n suosittelema HTML-versio löytyy osoitteesta http://www.w3.org/TR/html/.
Alun perin HTML perustui SGML-metakieleen, mutta vuosituhanteen vaihteen paikkeilla siitä kehitettiin XML-yhteensopiva versio, XHTML. Uusimmissa (X)HTML-versioissa pyritään vielä aiempia versioita enemmän erottamaan tiedon rakenne ja esitystapa toisistaan ja mahdollistaa pääsy samaan materiaaliin hyvinkin erilaisilla päätelaitteilla (normaalin tietokoneen lisäksi esimerkiksi matkapuhelimet, kämmentietokoneet jne.)
Web-sivut on HTML-dokumentteja. Dokumentit koostuvat tekstistä ja HTML-kielen elementeistä. Elementtien avulla on mahdollista merkitä tekstin rakennetta - listoja, taulukoita jne. - sekä liittää sivulle linkkejä, kuvia tms. Elementtejä merkitään tageilla, jotka erotetaan muusta tekstistä <- ja >-merkein. Koska HTML-dokumentti sisältää pelkkää tekstiä, sitä voi muokata tavallisella tekstieditorilla. Web-sivujen tekoon on kehitetty myös erilaisia HTML-editoreita.
Joitain editoreita mainostetaan kirjainyhdistelmällä WYSIWYG (what you see is what you get). Ne piilottavat HTML-tagit käyttäjältä, jolloin tämän ei tarvitse osata itse HTML-kieltä. WYSIWYG-periaate ei kuitenkaan toimi HTML-kielen yhteydessä, sillä HTML-dokumentteja eli web-sivuja katsotaan eri selaimilla ja eri ympäristöissä, eikä sama sivu siksi näytä aina samalta. Näin ollen WYSINWOG - what you see is not what others get.
Jotkut tekstinkäsittely- ja julkaisuohjelmat tarjoavat myös mahdollisuuden tallentaa niillä tehdyt dokumentit HTML-muodossa. Tulos ei kuitenkaan yleensä ole käyttäjän tahtoma, sillä HTML-kieli on tarkoitettu sisällön merkitsemiseen eikä tekstinkäsittely- ja julkaisuohjelmissa käytettävä ulkoasun tarkka määrittäminen onnistu HTML-kielellä. Myös muun tyyppiset ohjelmat tarjoavat yhä useammin mahdollisuuden tallentaa tietoa HTML-muodossa. Yleensä tulos ei ole suoraan julkaisukelpoinen vaan vaatii käsin muokkausta.
HTML-dokumentissa olevat välilyönnit ja rivinvaihdot tulkitaan vain tyhjäksi tilaksi, ja ne näkyvät niiden oikeasta lukumäärästä riippumatta yleensä vain yhtenä välilyöntinä, blankona. Toisaalta suoraan tagin perässä olevan välilyönnin ei pitäisi näkyä lainkaan. Täten vaikka joka sanan voi kirjoittaa omalle rivilleen tai vastaavasti koko dokumentin yhdelle riville. Selainohjelman ikkunassa teksti täyttää ikkunan laidasta laitaan ja siirtyy seuraavalle riville.
Seuraavassa XHTML-esimerkissä pätkä tekstiä on merkitty kappaleeksi p-elementillä (paragraph). Lisäksi tekstiin on merkitty rivinvaihto tiettyyn kohtaan br-elementillä:
<p> Kuinka monella rivillä<br /> tämä teksti näkyy?</p>
Kyseinen XHTML-koodi näyttää selaimellasi tältä:
Kuinka monella
rivillä
tämä
teksti
näkyy?
Esimerkissä P-tagin jälkeinen rivinvaihto ei aiheuta blankoa, mutta muut peräkkäiset välilyönnit sekä rivinvaihdot näkyvät aina vain yhtenä blankona, ja rivi jatkuu, kunnes se katkaistaan br-tagilla.
Monissa web-selaimissa ei ole tavutusta, vaan rivi vaihtuu
kahden sanan välistä, välilyönnin kohdalta.
Mikäli kahden sanan tahdotaan aina pysyvän samalla
rivillä, voidaan niiden välissä
käyttää välilyönnin sijaan
"rikkoutumatonta väliä"
(non-breaking space).
Esimerkiksi puhelinnumeron voi merkitä
(09) 123 4567,
jolloin sen pitäisi aina näkyä yhdellä rivillä:
(09) 123 4567.
Tagit kannattaa kirjoittaa pienillä kirjaimilla (gemenoilla).
XHTML:ssä pienten kirjainten käyttö on pakollista.
Vanhemmissa HTML-versioissa tagit sai kirjoittaa myös isoilla
kirjaimilla (VERSAALEILLA). Osoitteet ja tiedostonimet on
yleensä kirjoitettava täsmälleen oikein.
Esimerkiksi kuva.jpg ei ole sama kuin
kuva.JPG - paitsi joillakin web-palvelimilla,
joiden käyttöjärjestelmä ei tee eroa tiedostonimien
pienten ja isojen kirjainten välillä.
Koska HTML on yhä kehittyvä kieli, siitä on julkaistu useita eri versioita. Microsoft on määritellyt elementtejä, joita vain sen oma Internet Explorer -selain tukee. Samoin Netscapella on omia, Navigatorin tukemia elementtejä. Nykyään kuitenkin selainten valmistajat noudattavat aika hyvin W3-konsortion määrittämiä HTML-standardeja.
Jokaisesta HTML-dokumentista tulisi näkyä,
mitä HTML-kielen versiota se noudattaa.
Tämä ilmoitetaan document type definition
-määrityksellä dokumentin alussa.
Käytettäessä versiota 3.2, kyseinen
määritys on:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
Uudemman, HTML 4.01 -version mukainen
määritys on:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
Tämän kurssin sivut käyttävät
uusimmissa matkapuhelimissakin toimivaa, pelkistettyä
XHTML Basic -versiota:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
DTD-määrityksen jälkeen tulee
html-elementti, jonka lopputagi tulee dokumentin
loppuun. html-alku- ja lopputagin väliin
jäävä osa jaetaan päähän
(head) ja ruumiiseen
(body).
head-elementtiin voi laittaa tietoa sivusta,
body-osaan tulee varsinainen, lukijan
nähtäväksi tarkoitettu tieto.
head-osaan kuuluu pakollisena dokumentin otsikko
title-elementillä määriteltynä.
Dokumentin käyttämä merkistö kannattaa ilmoittaa
meta-elementillä, ellei WWW-palvelin osaa kertoa merkistöä
oikeissa HTTP-otsikkotiedoissa. Näin ollen XHTML Basic -dokumentin
pakollinen osa näyttää seuraavalta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Raportti lehtien kellastumisesta</title>
</head>
<body>
</body>
</html>
Vanhoissa HTML-versioissa
html, head- ja
body-tagitkin voi jättää pois,
sillä jokaisen selaimen pitäisi osata täydentää
ne itse oikeisiin paikkoihin. Tällöin pakollisiksi
elementeiksi jäävät enää document type
definition ja title.
body-osaan voidaan laittaa linkkejä,
listoja, lomakkeita, taulukoita ja paljon muuta sopivia elementtejä
käyttäen. Kurssiin kuuluvalla
esimerkkisivulla käytetään
paljon eri elementtejä. Lisäksi olen koonnut kaikki
XHTML Basic -elementit
suomenkielisine selityksineen omalle sivulleen.
Alla on esimerkki web-sivun lähdekoodista, eli
XHTML-dokumentista. Dokumentti noudattaa
HTML-kielen versiota XHTML Basic,
mikä on kerrottu ensimmäisellä rivillä.
head-osassa on kerrottu otsikon
lisäksi dokumentin tekijä ja päivä, jona
dokumenttia on viimeksi muutettu.
body-osassa on ensin sivun
pääotsake, sitten kappale eri tavoin muotoiltua tekstiä,
sisäkkäisiä listoja ja taulukko. Lopuksi sivulla on
vielä kuva. Skandinaaviset merkit (ä ja ö) on korvattu
standardinmukaisilla korvikkeilla
ä (a + umlaut) ja
ö (o + umlaut).
Jos tahdot käyttää esimerkkisivua oman sivusi
pohjana, kopioi alla oleva koodi haluamaasi tekstieditoriin ja tallenna se
nimellä esim.html.
Älä kuitenkaan tallenna tämän sivun
lähdekoodia, sillä siinä esimerkkisivun tagit on
määritelty <- ja
>-merkeillä, jotta ne
näkyisivät selaimessa oikein.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./tyylit.css" />
<title>Esimerkkisivu</title>
</head>
<body>
<h1>Esimerkkisivu</h1>
<p>Tällä sivullä esitellään XHTML-elementtejä.</p>
<p>Tässä kappaleessa on
linkki <a href="http://w3.org/TR/html">uusimpaan HTML-versioon</a>.</p>
<h2>Listat</h2>
<ul>
<li>yksi</li>
<li>toinen</li>
</ul>
<h3>Järjestysnumeroilla</h3>
<ol>
<li>ensimmäinen</li>
<li>toinen</li>
</ol>
<h2>Taulukko</h2>
<table summary="lyhyt kuvaus taulukon sisällöstä">
<caption>Taulukon otsikko</caption>
<tr><th>1. sarakkeen otsikko</th><th>2. sarakkeen otsikko</th></tr>
<tr><td>1. rivin 1. sarake</td><td>1. rivin 2. sarake</td></tr>
<tr><td>2. rivin 1. sarake</td><td>2. rivin 2. sarake</td></tr>
</table>
<h2>Oma osio kuvalle</h2>
<div>
<img alt="oma kuva" src="omakuva.jpg" width="60" height="100" />
</div>
</body>
</html>
Tälle sivulle olen koonnut kaikki XHTML Basic -elementit kaikkine standardin mukaisine määreineen. Elementit ovat aakkosjärjestyksessä, minkä lisäksi alussa on erillinen hakemisto niiden käyttötarkoituksen mukaan. Hakemisto on järjestetty moduuleittain samalla tavalla kuin W3C:n virallisella XHTML Basic -sivulla.
Kunkin elementin kohdalla on listattu kaikki kyseisen elementin
standardin mukaiset lisämääreet.
Mikäli jollakin elementillä ei ole tällä
sivulla lopputagia, se on ns. tyhjä elementti, joka ei koskaan
saa lopputagia. Tyhjät elementit sisältävät
XHTML:ssä lopputagin kauttaviivan
itsessään, esim. <br />.
Kaikkia tässä lueteltuja elementtejä voi käyttää myös HTML 4.01 -version mukaisissa dokumenteissa. Tällöin tyhjistä elementeistä pitää jättää sulkeva kauttaviiva pois.
Itse asiassa HTML 4.01 on tällä hetkellä
suositeltavin HTML-versio tavallisten www-sivujen tekoon. XHTML Basic
-dokumentteja ei pitäisi
määritysten
mukaan tarjoilla selaimille HTML-tiedostoina (tiedostotyypillä
text/html) vaan oman sisältötyypin
application/xhtml+xml
mukaisina. Internet Explorer -selain ei ainakaan vielä (versio
6) tue application/xhtml+xml-tyyppiä. Itse suosimani vaihtoehto on vaihtaa XHTML Basic -sivuille dokumenttityypin määritykseksi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ja lähettää ne
text/html-tyyppisinä, jos selaimena
on Internet Explorer tai muu uudempaa tyyppiä osaamaton
selain.
Katso myös, mitä kohdassa validointi on kerrottu HTML:n ja XHTML:n eroista virheitä käsiteltäessä.
<a
accesskey="..."
charset="..."
class="..."
href="..."
hreflang="..."
id="..."
rel="..."
rev="..."
tabindex="..."
title="..."
type="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</a>
a eli ankkuri (Anchor) on hypertekstilinkkien
merkitsemistä varten. Esimerkiksi
<a
href="http://www.iki.fi/~samuel/kurssi/sisalto.html">Sivukurssi</a>
määrittäisi linkin sanasta
Sivukurssi kurssi-hakemistossa olevaan tiedostoon
sisalto.html.
Esimerkiksi sivun ensimmäiseen otsikkoon voi tehdä
ankkurin
<h1><a id="top">Otsikko</a></h1>
minkä jälkeen siihen voi viitata linkillä
<a href="#top">Alkuun</a>
Toisaalta XHTML:ssä mille tahansa elementille voi määritellä yksilöivän id:n, joten ankkurin voisi tehdä helpomminkin:
<h1 id="top">Otsikko</h1>
<a href="mailto:samuel@iki.fi">Lähetä
postia!</a> tekee linkin, josta voi
lähettää minulle sähköpostia.
title antaa linkille nimen, jonka selain voi esittää
esimerkiksi tooltip-vihjeenä:
<a href="tagit.html" title="Kaikki XHTML Basic
-elementit selityksineen">XHTML Basic</a>
rel ja rev määrittävät linkkien välisiä suhteita (related to ja revised from). Katso myös link. Vain harva selain hyödyntää näitä mihinkään.
<abbr
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</abbr>
<acronym
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</acronym>
<address
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</address>
Tätä elementtiä voidaan käyttää osoitetietojen ilmoittamiseen. Monet selainohjelmat näyttävät address-tagien sisällä olevan tekstin tietyllä tavalla (esim. kursiivilla ja sisennettynä), jolloin sivun lukijan on helppo erottaa osoitetiedot muusta yhteydestä.
<base
href="..."
xmlns="http://www.w3.org/1999/xhtml" />
base-elementin href-attribuutin avulla
voidaan ilmoittaa perusosoite, johon kaikki sivulla olevat relatiiviset
URL-viittaukset suhteutetaan. Jos esimerkiksi merkitään
<base href="http://iki.fi/samuel/kurssi/" />
ja myöhemmin sivulla esiintyy linkki <a
href="tagit.html">XHTML Basic -elementit</a>,
linkki ohjautuu aina osoitteeseen http://iki.fi/samuel/kurssi/tagit.html, vaikka
itse HTML-sivu sijaitsisi missä tahansa. base-elementti
on tyhjä elementti eli sillä ei ole lopputagia. base
esiintyy HTML-tiedoston head-osion
sisällä.
<blockquote
cite="..."
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</blockquote>
blockquote merkitsee lainauksen, jonka selainohjelma näyttää tietyllä tavalla (esim. kursiivina ja sisennettynä tai sähköpostissa käytetyn lainausmerkinnän mukaisesti >-merkein merkittynä).
<body
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</body>
body määrittää dokumentin varsinaisen näkyvän osan. Kaiken sivun materiaalin tulee olla joko head- tai body-osassa.
HTML-dokumentissa saa esiintyä vain yksi body-elementti.
<br
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml" />
br-tagi katkaisee rivin (line BReak). Mikäli sivun vasemmassa reunassa on esimerkiksi kuva, clear="left" aiheuttaa seuraavan rivin alun siirtyvän kuvan alapuolelle. clear="right" siirtää uuden rivin alun oikeassa laidassa olevien elementtien alapuolelle ja clear="all" varmistaa, ettei kummassakaan laidassa ole muita elementtejä.
<caption
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</caption>
caption määrittää taulukolle (table) kuvatekstiä vastaavan kuvauksen. align määrittää tekstin sijainnin.
<cite
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</cite>
cite-elementin alku- ja lopputagin välissä oleva teksti ymmärretään sitaatiksi ja näytetään tietyllä tavalla (usein kursiivilla).
<code
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</code>
code-elementin alku- ja lopputagin
välissä oleva teksti ymmärretään
tietokonekoodiksi tai vastaavaksi ja
näytetään tietyllä tavalla; usein kirjasimella, jossa
kaikki kirjaimet ovat yhtä leveitä
(monospaced font).
<dd
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</dd>
dd merkitsee määritelmän määritelmälistauksessa (dl). dd-elementtiä ennen tulee aina olla ainakin yksi DT-elementti.
<dfn
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</dfn>
dfn tarkoittaa, että sen sisältämä teksti on jonkin asian määritelmä (definition). Elementtiä käytetään esimerkiksi tietyn termin esiintyessä tekstissä ensimmäistä kertaa.
<div
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</div>
div-elementillä dokumentti voidaan jakaa loogisiin osiin (division). Sillä ei ole muuta semanttista merkitystä. Sitä käytetään yleisesti merkitsemään jollekin tietylle lohkolle attribuutti id tai class, joiden kautta lohkon sisältöä voidaan käsitellä esimerkiksi CSS:n tai skriptien avulla. Katso span.
<dl
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</dl>
dl muodostaa määrittelylistan (Definition List), joka koostuu dt-elementeillä merkityistä jäsenistä ja niiden dd-elementeillä merkityistä määritelmistä. dt voi esiintyä ilman dd-elementtiä, mutta dd-elementin edellä on aina oltava dt-elementti, jota dd määrittää.
<dt
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</dt>
dt on dl-listan jäsen, jolle voidaan antaa määritelmä dd-elementillä.
<em
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</em>
em korostaa (emphasize) sen alku- ja lopputagin välissä olevan tekstin. (Usein teksti on kursivoitu.) Katso strong.
<em
action="..."
class="..."
enctype="..."
id="..."
method="get|post"
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</em>
form-elementillä luodaan sivun lukijan täytettäväksi lomake. Lomakkeessa voidaan käyttää input, select/option ja textarea -kenttiä, joiden määrittämät nimi (name) ja arvo (value) -parit lähetetään CGI (Common Gateway Interface) -ohjelmalle käsiteltäviksi. text-tyyppisissä input-kentissä ja textarea-kentissä value voi olla esitäytetty, mutta käyttäjä pääsee yleensä muokkaamaan sitä. select-listoissa sekä checkbox- ja radio-tyyppisissä input-kentissä käyttäjän on tarkoitus valita ennalta määrätyistä vaihtoehdoista.
action kertoo ohjelman osoitteen, method="get" ja method="post" ovat tietojen lähetysmenetelmiä. post on suositeltavampi menetelmä, jos tietojen lähettäminen muuttaa jotakin (eli lomaketta käytetään esimerkiksi tietokannassa olevien tietojen ylläpitämiseen).
enctype määrittelee, millä tavalla selaimen
pitää lähettää tiedot palvelimelle. Jos
lomakkeella lähetetään tiedostoja
(<input type="file" />), arvoksi pitää
laittaa multipart/form-data. Oletusarvo on
application/x-www-form-urlencoded.
<h1
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</h1>
h1 on kaikkein suurin otsake, sivun pääotsikko. Tämän sivun yläreunassa lukeva "Sivukurssi" on h1-otsake.
<h2
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</h2>
h2 on toiseksi suurin otsake. "Sivukurssin" alapuolella lukeva "Rakenne" on h2-otsake.
<h3
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</h3>
h3 on kolmanneksi suurin otsake. "XHTML Basic -elementit" tämän sivun yläosassa on h3-otsake.
<h4
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</h4>
h4 on neljänneksi suurin otsake. Tämän kohdan aloittava "h4" on h4-otsake.
<h5
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</h5>
h5 on viidenneksi suurin (toiseksi pienin) otsake.
<h6
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</h6>
h6 on pienin otsake.
<head
profile="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</head>
head määrittää dokumentin sen osan, jossa on tietoa sivusta selain- tai hakuohjelmalle. Selainohjelma ei yleensä näytä head-osassa olevaa tietoa. HTML-dokumentissa saa esiintyä vain yksi head-elementti.
<html
version="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</html>
html-avaustagin tulee standardin mukaan olla dokumentissa ensimmäisenä DTD-rivin jälkeen ja lopputagin koko dokumentin viimeisenä merkintänä.
HTML-dokumentissa saa esiintyä vain yksi html-elementti.
<img
alt="..."
class="..."
height="..."
id="..."
longdesc="..."
src="..."
title="..."
width="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml" />
img-elementin avulla web-sivuille voi liittää kuvia. src-kohdassa määritetään halutun kuvan tiedostonimi, esimerkiksi src="poroja.gif". alt määrittää, mitä kuvan tilalla näkyy silloin, kun selainohjelma ei pysty näyttämään kuvaa, esimerkiksi alt="Porotokka Ounasvaaralla". height ja width määrittelevät kuvan koon (korkeus ja leveys) pikseleinä.
<input
accesskey="..."
checked="..."
class="..."
id="..."
maxlength="..."
name="..."
size="..."
src="..."
title="..."
type="text|password|checkbox|radio|submit|reset|file|hidden"
value="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</h1>
input-elementti liittyy lomakkeisiin (form). type="text" tarjoaa rivin, jonka sivun lukija voi täyttää. Rivin pituuden voi määrätä size-optiolla, mutta rajatun pituiselle riville voi kirjoittaa enemmänkin tekstiä kirjoitetun liukuessa alta pois. Tekstin kokonaispituuden voi rajoittaa maxlength-optiolla. type="password" toimii kuin type="text", mutta lomakkeen täyttäjä ei näe kirjoittamaansa tekstiä, vaan se näkyy esimerkiksi asteriskeina (********).
type="checkbox" tarjoaa lomakkeen täyttäjälle mahdollisuuden valita määrättyjä vaihtoehtoja päälle tai pois. type="radio" on samanlainen, mutta vaihtoehdoista voi valita vain yhden. Lisäämällä optio checked radio- tai checkbox-tyyppiseen input-kenttään kyseinen vaihtoehto on ennalta valittu päälle.
type="submit" luo lähetyspainikkeen, jonka tekstin voi määrätä value-optiolla. Lähetyspainikkeeksi voi myös määrätä kuvan src-optiolla. Tällöin tulee kuitenkin käyttää lisäksi value-optiota, joka näkyy selaimilla, jotka eivät näytä kuvia. type="reset" tarjoaa nollausspainikkeen, joka palauttaa kaikki lomakkeen kentät siihen tilaan, missä ne olivat sivua ladattaessa.
name-option avulla lomakkeen käsittelevä CGI-ohjelma erottaa eri tiedot toisistaan. value-tagissa annettu arvo näkyy tekstinä vapaasti täytettävissä kentissä (type="text") sekä lähetys- ja nollauspainikkeissa.
<kbd
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</kbd>
kbd-elementin sisällä oleva teksti
ymmärretään lukijan kirjoitettavaksi tarkoitetuksi
tekstiksi (KeyBoarD input). Esimerkiksi
<P>Ohjelman loppuun pitää kirjoittaa
<kbd>goto 20</kbd></P>.
<label
accesskey="..."
class="..."
for="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</label>
label-elementillä voidaan yhdistää
lomakkeen syöttökenttiä kuvaavat nimet kenttiin.
input-elementille on tällöin annettava
id-attribuutti, johon viitataan label-elementin
for-attribuutilla:
<input type="radio" name="maku"
value="mansikka" id="makumansikka" />
<label for="makumansikka">Mansikka</label>
<input type="radio" name="maku"
value="mustikka" id="makumustikka" />
<label for="makumustikka">Mustikka</label>
<li
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</li>
li merkitsee listan (ul, ol) jäsenen.
<link
charset="..."
class="..."
href="..."
hreflang="..."
id="..."
media="..."
rel="..."
rev="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml" />
link-elementtiä voi käyttää dokumenttien välisten suhteiden määrittämiseen rev ja rel -optioilla. Esim. <link rev="parent" href="..." title="Sivun nimi">.
Lisäksi sen avulla voi määrittää sivun tekijän <link rev="Made" title="Tekijän Nimi" ref="mailto:tunnus@domain.maa" /> tai omistajan <link rev="Owns" ... />.
Yleisin käyttö liittynee kuitenkin CSS-tyylisivujen liittämiseen sivuille: <link rel="stylesheet" type="text/css" media="print" href="print.css" />
<meta
content="..."
http-equiv="..."
name="..."
scheme="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml" />
meta-elementillä voi dokumentin head-osaan liittää tietoa
sivusta. Esimerkiksi sivun tekijän nimi: <meta
name="Author" content="Samuel Rinnetmaki">,
koska dokumenttia on viimeksi muutettu: <meta
name="review" content="12 10 1996">,
hakusanoja name=keywords, dokumentin kuvaus
name=description tai tietoa dokumentin
ikääntymisestä: <meta
http-equiv="Expires" content="Sat, 01 Jan 2000 00:00:00
GMT">.
Viimeisen avulla esimerkiksi selainohjelma tietää hakea sivusta uuden version sen vanhentuessa vuosituhannen vaihtuessa. Vain harvat selaimet käyttävät hyväksi meta-elementin avulla annettuja tietoja. Toisaalta useat hakupalvelinten robotit osaavat hyödyntää keywords- ja description-tietoja.
<object
archive="..."
class="..."
classid="..."
codebase="..."
codetype="..."
data="..."
declare="declare"
height="..."
id="..."
name="..."
standby="..."
tabindex="..."
title="..."
type="..."
width="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</object>
object-elementin avulla HTML-sivulle voidaan sisällyttää erikoisempaa sisältöä kuten Java-appletteja, Flash- tai Shockwave-animaatioita jne.
<ol
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</ol>
ol muodostaa järjestetyn eli numeroidun listan (Ordered List), joka koostuu li-elementeillä merkityistä osista. Osat numeroidaan alkaen numerosta 1. Numerointitapaa voi vaihtaa käyttämällä CSS-tyylitiedostoja.
<option
class="..."
id="..."
selected="selected"
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</option>
option-elementillä määritellään lomakkeen (form) select-elementin vaihtoehdot. selected-optiolla määritelty vaihtoehto on valmiiksi valittu.
<p
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</p>
p merkitsee kappaleen.
<param
id="..."
name="..."
type="..."
value="..."
valuetype="data|ref|object"
xmlns="http://www.w3.org/1999/xhtml">...</param>
param-elementtiä käytetään object-elementin kanssa. name-optiolla määritellään objektin käyttämän muuttujan nimi ja value-optiolla muuttujan arvo.
<pre
class="..."
id="..."
title="..."
xml:lang="..."
xml:space="preserve"
xmlns="http://www.w3.org/1999/xhtml">...</pre>
pre tarjoaa mahdollisuuden sisällyttää HTML-dokumenttiin valmiiksi muotoiltua tekstiä (preformatted text). Tavallisesti selain tulkitsee perättäiset välilyönnit ja rivinvaihdot vain tyhjäksi tilaksi ja tiivistää tyhjän tilan aina yhdeksi välilyönniksi.
pre-elementillä merkityn alueen välilyönnit ja rivinvaihdot näkyvät sivulla samalla tavalla, kuin ne on kirjoitettu lähdekoodissa. Tekstiin käytetään yleensä kirjasinta, jossa kaikki kirjaimet ovat yhtä leveitä (monospaced font).
<q
cite="..."
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</q>
q merkitsee lainauksen. cite-attribuutissa voidaan esittää esimerkiksi URL-viittaus lainauksen lähteeseen.
<samp
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</samp>
samp-elementillä merkitty teksti ymmärretään näytteeksi (sample) ohjelmien tms. ulosannista. Selainohjelma voi näyttää samp-elementillä merkityn tekstin tietyllä tavalla.
<select
class="..."
id="..."
multiple="multiple"
name="..."
size="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</select>
select tarjoaa lomakkeen (form) täyttäjälle mahdollisuuden valita annetuista vaihtoehdoista (option). size-optio määrittää select-listassa näkyvien vaihtoehtojen määrän, name nimeää listan ja multiple="multiple" sallii lomakkeen täyttäjän valita yhtä aikaa useita vaihtoehtoja. Ellei attribuuttia multiple="multiple" löydy, ensimmäinen select-elementin sisällä määritellyistä vaihtoehdoista on yleensä oletusarvona valittu.
Esimerkki select-listan
käytöstä:
<select name="väri" size=4>
<option value="g">vihreä</option>
<option value="b">sininen</option>
<option value="y">keltainen</option>
<option value="r">punainen</option>
</select>
Esimerkissä käyttäjälle näkyvät selväkieliset värien nimet, mutta lomakkeen käsittelevälle ohjelmalle lähetetään valitun värin yksikirjaiminen koodi.
<span
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</span>
span on div-elementin
tavoin tyhjä tai merkityksetön elementti, jota voidaan
käyttää esimerkiksi lisäämään
CSS-tyylitiedostoa varten luokitus tiettyihin sanoihin. Esim.
Ero div-elementtiin on, että span on ns. inline-elementti, eli se voi sisältä vain tekstiä ja muita inline-elementtejä.
<strong
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</strong>
strong näyttää sen alku- ja lopputagin väliin jäävän tekstin vahvennettuna, mikäli se selainohjelman puolesta onnistuu. strong-elementillä määritellyn vahvennuksen tulisi olla voimakkaampi kuin em-elementillä. Yleensä strong on lihavoitu.
<table
class="..."
id="..."
summary="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</table>
table-elementin avulla sivulle voi luoda taulukoita. Attribuutilla summary voi kertoa tiivistelmän taulukon sisällöstä.
Esimerkki taulukosta:
<table>
<caption>Syys-lokakuun tulos</caption>
<tr>
<th>Syyskuu</th>
<td>120.000,00</td>
</tr>
<tr>
<th>Lokakuu</th>
<td>131.000,00</td>
</tr>
</table>
<td
abbr="..."
align="left|center|right"
axis="..."
class="..."
colspan="..."
headers="..."
id="..."
rowspan="..."
scope="col|row"
title="..."
valign="top|middle|bottom"
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</td>
td määrittää taulukon (table) tietosolun (Table Data cell). rowspan ja colspan määrittävät, kuinka monta taulukon vaaka- ja pystyriviä td-solu peittää. align ja valign määräävät solun sisällä olevan tekstin vaaka- ja pystysuorasta sijoittelusta.
abbr-attribuutilla voi esittää selaimelle vihjeen solun lyhenteeksi. axis, headers ja scope liittyvät monimutkaisempiin "moniulotteisiin" taulukoihin. Niiden avulla voi kertoa, miten otsikko- ja datasolut liittyvät toisiinsa.
<textarea
accesskey="..."
class="..."
cols="..."
id="..."
name="..."
rows="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</textarea>
textarea määrittää lomakkeessa (form) useamman rivin täytettävän alueen. rows-optio määrää rivien määrän, cols niiden pituuden. name määrittää alueelle nimen.
<th
abbr="..."
align="left|center|right"
axis="..."
class="..."
colspan="..."
headers="..."
id="..."
rowspan="..."
scope="col|row"
title="..."
valign="top|middle|bottom"
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</th>
th määrittää taulukon (table) otsakesolun (Table Header cell). Attribuutit ovat samat kuin td-elementillä.
<title
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</title>
title määrittää dokumentin nimen. Siitä tulee käydä selvästi ilmi, mitä kyseinen sivu pitää sisällään. Esim. <title>Esko Hukkasen artikkeli pääkaupunkiseudun metsittymisestä</title>. Nimen ei pitäisi olla yli 60 merkin pituinen. HTML-dokumentissa saa esiintyä vain yksi title-elementti. Kuitenkin useille elementeille voi antaa title-attribuutin.
<tr
align="..."
class="..."
id="..."
title="..."
valign="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</tr>
tr määrittää taulukon (table) solurivin (Table Row). align ja valign määräävät rivin solujen sisällä olevan tekstin vaaka- ja pystysuorasta sijoittelusta.
<ul
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</ul>
ul muodostaa järjestämättömän eli numeroimattoman listan (Unordered List), joka koostuu li-elementeillä merkityistä osista.
<var
class="..."
id="..."
title="..."
xml:lang="..."
xmlns="http://www.w3.org/1999/xhtml">...</varl>
var-elementin sisällä oleva teksti ymmärretään muuttujaksi (variable) tai komennon argumentiksi. Selainohjelma näyttää var-elementin sisällä olevan tekstin tietyllä tavalla.
HTML-kielessä useimmat elementit ovat joko kappale- tai tekstitason elementtejä. Kappaletason (block) elementit muodostavat "blokkeja", eli yleensä ennen niitä ja niiden jälkeen sivulla vaihtuu rivi. Tekstitason elementtejä (inline) käytetään tyypillisesti kappaleiden sisällä olevassa tekstissä esiintyvien yksittäisten sanojen tai lyhyiden pätkien merkitsemiseen.
Kappale-elementit voivat pitää sisällään sekä toisia kappale-elementtejä että tekstielementtejä, kun taas tekstielementit voivat sisältää vain tekstiä ja toisia tekstielementtejä.
XHTML Basic -versiossa kappale-elementtejä ovat:
Tekstielementtejä ovat:
Jotkut elementit eivät kuulu selvästi kappale- tai tekstitason elementteihin. Tällaisia ovat esimerkiksi:
Huomaa, että XHTML Basic -versiossa ei sallita sisäkkäisiä taulukoita, kuten muissa HTML-versioissa.
Itse kukin tekee silloin tällöin kirjoitusvirheitä. Ihmisten kielillä viestittäessä virheet ovat harvoin kohtalokkaita; joskus niitä ei kukaan edes huomaa. HTML-kieltä tulkitsevat koneet, jotka ymmärtävät vain oikein kirjoitettua ja loogista kieltä. Vanhemmat HTML-versiot antoivat selaimelle mahdollisuuden tulkita virheellisen dokumentin parhaan ymmärryksensä mukaan. Selainten tulkinnat tietenkin poikkesivat toisistaan, mistä syystä sivut saattoivat toimia eri selaimissa hyvinkin eri tavalla. (Surullisen kuuluisa esimerkki on puuttuva taulukon lopputagi </table> - Internet Explorer osaa yleensä näyttää sivun oikein, vaikka taulukon lopputagi puuttuisikin, mutta Netscapella saattaa näkyä vain tyhjää.)
Uudet, XML:ään perustuvat XHTML-versiot määrittelevät virheiden
käsittelyn toisin: jos XHTML-tiedosto lähetetään
application/xhtml+xml-tyyppisenä ja se
sisältää virheitä, selain ei saa
näyttää tiedoston sisältöä
vaan sen pitää ilmoittaa virheestä.
XHTML:ää tukevat selaimet (esim. Mozilla) ovatkin
hyvä apu sivujen tekijälle, koska ne tarkistavat sivun
oikeellisuuden aina sivua katsottaessa. Toinen mahdollisuus on
käyttää oikolukijaohjelmaa tarkastamaan dokumentti
ja huomauttamaan virheistä.
Tehtävään voi käyttää esimerkiksi jotakin netistä löytyvää ilmaista validointipalvelua. Validaattori ajaa sille ilmoitetun dokumentin SGML- tai XML-jäsentimen läpi ja vertaa dokumenttia valittuun dokumenttityyppiin (esimerkiksi HTML 4.01 Transitional, XHTML Basic, HTML 2.0 tms). Jäsennin huomaa esimerkiksi standardin vastaiset, väärin kirjoitetut ja väärässä paikassa sijaitsevat tagit sekä puuttuvat lopputagit tai lainausmerkit.
Monien validaattorien antama palaute on niihin ensi kertaa tutustuvalle varsin vaikeaselkoista, mutta esimerkiksi Lehtori kertoo ongelman selväksi suomeksi. Englannin kieltä taitavalle esimerkiksi W3C Markup Validation Service on mainio apuväline.
Kuten kaikessa viestinnässä, myös web-sivuja tehtäessä on ensin ratkaistava, mikä viesti lukijalle tahdotaan tarjota. Sen perusteella valitaan käytettävä materiaali: sanat, kuvat ja mahdolliset muut välineet, joilla viesti esitetään.
Perinnäisesti viestintä on syntynyt tarpeesta kertoa jokin viesti jollekin yleisölle. Nykyään, informaatioyhteiskunnan aikakaudella suuri osa viestinnästä syntyy tarpeesta viestiä; suurin osa kotisivuista sisältää tietoa, jolla on merkitystä vain tuottajalleen.
Suosittu kotisivun malli on kertoa pari faktaa itsestään ja listata sadoittain kivoina tai hauskoina pitämiään linkkejä. Tällöin luodaan hyvin vähän uutta tietoa ja runsaasti pseudotietoa, pelkkiä viittauksia tietoon.
Monet surffaajat kiitävät netissä häiriintyneen kiireisesti, pysähtyen todella lukemaan vain pientä osaa selaamistaan sivuista. Jotkut seuraavat aina sivun ensimmäistä linkkiä toiselle sivulle, sieltä taas ensimmäistä linkkiä jne. - koskaan palaamatta sivulle, jolta aloittivat. Vain äärimmäisen harvat dokumentit luetaan alusta loppuun.
Eräs suuntaus verkon sisältötuotannossa pyrkii sitomaan lukijat omalle sivustolle. Jos käyttäjä voi vapaasti koska tahansa poistua sivulta, hänet on joka lauseella houkuteltava lukemaan vielä seuraava lause tai klikkaamaan linkkiä seuraavalle sivulle. Muille sivustoille johtavia linkkejä vältetään, koska pelätään käyttäjän lähtevän niitä seuraten pois. Vastakkainen lähtökohta voisi olla puhtaan tiedon tarjoaminen, sellaisena kuin se on, esimerkiksi yksinkertainen linkkilista. Tällöin lukija voi kokea, että tiedosta on vaikeaa saada otetta ja että sivun tekijä ei itse tuo tietoon mitään lisäarvoa.
Kompromissina edellisistä saadaan viesti, joka pitää minkä lupaa. Lukijaa voi houkutella otsikoin ja alkusanoin, jos todella on tarjoamassa lupaamaansa tietoa. Useimmiten parhaat sisällöt syntyvät yhdistelmästä omaa tuotantoa ja linkkejä muille sivuille. Toisaalta weblogit eli blogit, jotka tarjoavat juuri kyseistä yhdistelmää, voivat olla aika sekavia, jos niillä ei ole selkeätä teemaa tai rajattua aihealuetta.
Jokainen on varmaankin Internetissä törmännyt valtavaan tiedon määrään, josta vain pieni osa on oikeasti kiinnostavaa. Jos ei itselleenkään osaa selvittää, mitä tietoa tarjoaa tai miksi, voi miettiä sen merkitystä muille. Puhuminen on hopeaa, mutta joskus on syytä muistaa, mitä vaikenemisesta sanotaan.
Web-sivuilla viesti kannattaa esittää tiiviinä, uutismaisena pakettina. Pitkät asiakokonaisuudet on usein syytä jakaa pienempiin, omilla sivuillaan esitettyihin osiin.
Tietokoneen ruudulta lukeminen on todettu paperilta lukemista vaivalloisemmaksi ja hitaammaksi. Web-sivut, joita ei ole jaettu palstoihin, vaativat enemmän liikettä silmiltä ja ovat siksi yhä hitaampia lukea. Ihmisten selailutottumuksia kartoittavissa tutkimuksissa on todettu, että harvat ihmiset lukevat sivusta enempää, kuin mitä mahtuu kerralla selaimen ikkunaan. Siksi verkkojulkaisemisessa pyritään yleensä lyhyeen ja ytimekkääseen ilmaisuun.
Sivun keskeisen sisällön pitäisi näkyä heti sen ilmestyessä selaimen ikkunaan. Otsakkeiden ja muun ensin näkyvän informaation tulee selkeästi ilmaista sivun lukijalle, onko sivu lukemisen arvoinen. Tärkein asia kannattaa tiivistää heti sivun ensimmäisiin lauseisiin. Otsikon tulisi kuvata sivun sisältöä mahdollisimman hyvin herättäen samalla lukijan mielenkiinto.
Melko hyvän esimerkin web-sivuilla hyväksi todetusta sisällön rakenteesta saa sanomalehden uutisista. Otsikko kiinnittää huomion, ingressiin on koottu tärkein asia, sitten kerrotaan varsinainen tapahtumien kulku tai vastaava pääasia ja vasta lopuksi juttuun vaikuttaneet taustatekijät. Aikajärjestys on rikottu, kirjoitus aloitetaan yleensä lopputuloksesta tai ratkaisusta. Johdannot ja loppulauseet jätetään yleensä pois. Väliotsakkeilla voi kuvata seuraavia kappaleita, mutta kuten kirjoitettaessa yleensä, leipäteksti tulee kirjoittaa ikään kuin otsakkeita ei olisi.
Tällaista rakennetta noudattavaa sivua voi lukea haluamaansa kohtaan asti ja siirtyä pois tarvitsematta pelätä, että jää paitsi jostain ehdottoman tärkeästä. Ne, joita kiinnostaa kaikki asiaan liittyvä, lukevat dokumentin loppuun asti, kiireisimmät vain pari ensimmäistä lausetta.
Hypertekstin linkit tekevät sivulta toiselle liikkumisen niin helpoksi, että kaikkea samaan aiheeseen liittyvää ei yleensä tarvitse pitää samalla sivulla. Yhdellä sivulla voi esittää aiheen pääkohdat ja erillisillä sivuilla selitykset ja selvennykset. Tai suuren kokonaisuuden voi jakaa pieniin osiin, jotka luetellaan yksinkertaisessa hakemistossa. Yhden pitkän sivun etuna on, että sen kerran latauduttua tekstin kohdasta toiseen pääsee liikkumaan nopeasti. Pienet sivut sitä vastoin jakavat odotusajan osiin ja ovat monien mielestä miellyttävämpiä lukea.
Ihmisen käyttäytymistä tutkittaessa on huomattu, että ihminen ei yleensä jaksa odottaa montakaan sekuntia käskyn antamisesta siihen reagointiin. Kun nappia painaa, tahtoo nähdä jotain tapahtuvan. Tiettyjen asioiden suhteen olemme kuitenkin pitkämielisempiä: esimerkiksi ovikelloa soitettuaan, puhelimessa vastausta odottaessaan tai web-sivuja ladatessaan moni on valmis odottamaan jopa kymmeniä sekunteja. Nykyään kuitenkin laajakaistayhteydet ovat yhä yleisempiä ja usean sekunnin viivettä sivujen latautumisessa ei enää suvaita yhtä helposti kuin ennen. Hitaasti latautuvat sivut aiheuttavat hermostumista, ja lukija on yleensä todella kiinnostunut aiheesta, josta kertovaa sivua odottaa puoli minuuttia.
Web-sivujen lukijoiden ja tekijöiden keskuudessa 90-luvulla käytössä olleen säännön mukaan sivun lataamisen ei pitäisi kestää yli 10 sekuntia 14 400 bps -nopeuksista modeemia käytettäessä. Toisen säännön mukaan sivun kaikkien elementtien yhteisen koon tulisi olla alle 30 kb, josta grafiikka saa kuluttaa puolet. Nykyään yhteydet ovat toisaalta yleisesti nopeutuneet, mutta toisaalta jo monet käyttäjät käyttävät nettiä esim. sylimikrolla matkapuhelimen kautta. Kännykkäyhteyksiä käytettäessä nopeudet ovat usein yli 30 kertaa hitaampia kuin nopealla laajakaistayhteydellä.
Linkkejä tehtäessä huomiota voi kiinnittää ainakin linkin tarkoitukseen, tarpeellisuuteen ja "kuumaan alueeseen". Suurista kohteista on syytä varoittaa.
Hypertekstin suurin ero perinnäiseen tekstiin ovat linkit. Parhaimmillaan linkkejä seuraamalla pääsee helposti ja nopeasti tarkastamaan sivulla käytettyjen lainausten lähteitä tai saa tarkennuksen tai selityksen jollekin sanalle tai käsitteelle. Usein hypertekstilinkit vastaavat vain sivun kääntämistä paperiviestimissä.
Kaikista sanoista ei tarvitse tehdä linkkejä, vaikka se olisikin mahdollista. Itse esimerkiksi mainitsen tämän kurssin sivuilla useita kertoja eri selainten nimiä. En ole tehnyt nimistä linkkejä selainten kotisivuille, sillä oletan, että ihmiset tietävät niistä tarpeeksi, eikä selainten kotisivuihin tutustuminen mielestäni liity kurssiin riittävän tiiviisti.
Toisaalta monta kertaa jonkin tagin mainitessani olen tehnyt siitä linkin sivulle, jolla selostan tarkemmin tagin käyttöä ja toimintaa. Samoin kerron linkin kera, mistä löytyvät mainitsemani XHTML Basic -standardi, validaattori jne. aina, kun pidän sitä tarpeellisena.
Linkistä tulisi aina käydä selville, minne se vie. Mieluiten tämän tiedon pitäisi olla linkin kuuma alue. Kuuma alue on se, jota lukija esimerkiksi klikkaa seuratakseen linkkiä. Onko seuraavilla linkeillä mielestäsi eroa?
Kaikki linkit ajavat saman asian, mutta eri tavoin. Viimeisessä linkissä kuuma alue ilmoittaa, mitä linkkiä seuraamalla löytää. Muissa tiedon joutuu etsimään lähiympäristöstä. Kahdessa ensimmäisessä kuumana alueena on linkkiin itseensä viittaava sana. Yleensä linkkitekstien tulisi olla substantiivityyppisiä - niissä tulisi vain kuvata linkin kohde. Linkin seuraamiseen liittyvät kehotteet tai muut käyttäjän toimintaa kuvaavat tai ohjeistavat tekstit ovat yleensä turhia. Lisäksi voi huomata, että kaikki eivät klikkaa. Eri selaimissa linkkejä voi seurata esimerkiksi nuolinäppäimillä tai enter- eli return-näppäimellä (rivinvaihto).
HTML-koodissa linkkiä merkitsevään
a-elementiin voi liittää title-attribuutin, jonka avulla voi
kertoa lisää linkin kohteesta. Esimerkiksi:
<a
href="http://iki.fi/samuel/kurssi/"
title="Samuelin sivukurssi">ohjeita
WWW-sivujen tekoon</a>
Useimmat selaimet näyttävät title-tekstin vaalean
keltaisena tooltip-vihjeenä, kun hiiren osoittimen
vie linkin päälle hetkeksi.
Joitain asioita on vaikeaa tai mahdotonta tiivistää niin pieneen kokoon. Tällöin on syytä huomauttaa asiasta kohteeseen vievän linkin yhteydessä. Esimerkiksi lokitiedosto 1990 - 1996 (2,4 MB) tai Star Wars -tunnusmusiikki (starwars.wav, 401 kB).
Erillinen huomautus linkin yhteydessä on yleensä myös suositeltava, jos linkin kohde ei ole tavallinen HTML-sivu vaan esim. PDF- tai Word-dokumentti. Tällöin kannattaa myös ottaa huomioon, että lukijalla ei välttämättä ole mahdollisuutta nähdä kyseisiä tiedostoja tai asentaa niiden katselemiseen vaadittuja ohjelmia. Kannattaa harkita, jos tiedon voisi tarjota myös HTML-muodossa.
Äänen ja videon liittämistä web-sivuille kannattaa yleensä harkita tarkoin, sillä järkevän kokoisiksi pakattujen näytteiden laatuun pikemminkin vihastuu kuin ihastuu.
Monia web-sivuja yritetään erottaa muista käyttämällä mahdollisimman paljon eri värejä sekä vilkkuvia ja juoksevia animaatioita. Usein selkeä ja harkittu ratkaisu on toimivampi.
Kotisivuja katsellessa tulee usein mieleen, että tekijä on opetellut HTML-kieltä kokeilemalla kaikkia mahdollisia tageja, jotka sitten ovat jääneet sivulle. Harvoin kyseessä on ollut viestinnällinen ajatus, jonka esiin tuomiseen on käytetty HTML-kieltä. Sivujen tekijöistä (ja lukijoista) visualistit ja strukturalistit sotivatkin HTML-kielen oikeasta käyttötavasta.
Strukturalistien mielestä HTML on tarkoitettu yksinomaan sisällön merkitsemiseen, visualistit tahtovat tehdä esteettisiä ja näyttäviä sivuja. Itse pidän sisältöä pääosassa, mutta ymmärrän myös ulkoasun vaikutuksen luettavuuteen ja miellyttävyyteen. Kuvat ja muu grafiikka ovat omiaan piristämään muuten harmaita sivuja, ja usein niillä voi olla myös viestinnällinen tarkoitus. Niiden hyödyntämiseen tarvitaan kuitenkin oma oaamisensa. Tämän kurssin sivujen pelkistetty ulkoasu johtuu lähinnä siitä, että mielestäni sisältö ei kaipaa tämän enempää väritystä tai koristelua.
Koska jokainen kuva aina hidastaa sivun latautumista, niillä kaikilla tulisi olla hyvä syy olla sivulla. Muutenkin sivun ulkoasuun vaikuttavilla tekijöillä tulisi olla jokin tarkoitus. Strukturalistit vastustavat taulukoiden (table) käyttöä muuhun kuin taulukoiden esittämiseen. Itse käytän joskus taulukoita sivun "asemointiin" - en kuitenkaan vain siksi, että osaan käyttää niitä.
Moni web-sivujen tekoa opettava teos mainostaa kertovansa, kuinka lukija oppii 3D-grafiikkaa, gif-animaatioita ja värikästä tekstiä käyttäen tekemään Internetin cooleimpia sivuja. Näitä verkon viileimpiä on varmaan mukava katsella, mutta mahdollisen sisällön lukeminen ei oikein ota onnistuakseen kuvien kieppuessa ja lauseiden välkkyessä. Usein voisi kysyä, miksi kirjekuori avautuu, sulkeutuu ja pyörii tai miksi "new" välkkyy vetäen huomion pois uudesta asiasta. Yleensä vastausta ei löydy.
Sivuja ei kannata tunkea täyteen tavaraa. Lukija hahmottaa vain tietyn määrän elementtejä kerrallaan. Tyhjällä tilalla on tärkeä osa sommittelussa.
Web-sivujen ulkoasua suunniteltaessa kannattaa muistaa, että HTML-kielen avulla ei voi määrätä tarkasti elementtien (tekstin, grafiikan ja kuvien) sijaintia, kirjasinkokoja eikä värejä. Selainohjelmat tai niiden käyttäjät päättävät, miten mikäkin HTML-tagi vaikuttaa; selaimia käytetään eri ympäristöissä ja eri asetuksilla.
Vaikka tarkkaan sommitteluun ei päästäkään, joitain seikkoja voi toki suunnitella. Sommittelu lähtee liikkeelle yksinkertaisista asioista: pisteistä, viivoista, geometrisista kuvioista, rajauksista ja elementtien välisistä suhteista. Työn alla olevasta sivusta voi silloin tällöin yrittää löytää näitä elementtejä ja miettiä niiden suhteita toisiinsa.
Havainnoidessaan ihminen pyrkii järjestämään esillä olevia elementtejä. Parhaiten tämä onnistuu, kun elementtejä on 3 - 7. Myös elementtien liikesuunta on tärkeä niiden vaikutuksen kannalta. Siksi usein "eteenpäin" vievät linkit sijoitetaan sivun oikeaan reunaan ja "takaisin" vievät vasempaan.
Harvat, tarkkaan valitut värit voittavat yleensä liiallisen väriloiston. Kontrastit ja vastavärit vaikuttavat sivun luettavuuteen.
Kotisivuja voisi verrata karamellipusseihin kaupan hyllyssä. Niistä yritetään tehdä toinen toistaan värikkäämpiä ja kuvioidumpia, mutta harva kieltänee Fazerin sinisen pelkistetyn kaksivärisen pakkauksen vetovoimaa.
Graafisen suunnittelun parissa työskentelevät ihmiset ovat oppineet, että sivun voi suunnitella ensin mustavalkoisena, ja lisätä värit viimeiseksi. Tällöin suunnittelussa säilytetään riittävä kontrasti eri elementtien välillä.
Web-sivuille värejä valittaessa monet suosivat vaaleaa taustaa ja tummaa tekstiä. Myös päinvastaisella asettelulla voi päästä tehokkaaseen vaikutelmaan, kunhan taustan ja tekstin välillä on riittävä kontrasti.
Monissa selaimissa on mahdollisuus käyttää lukijan itse valitsemia taustan, tekstin ja linkkien värejä, sivun tekijän valitsemista välittämättä. Tämä ei kuitenkaan vaikuta sivulla olevaan grafiikkaan tai tekstiin, jonka väriä on muutettu erillisellä komennolla. Koska kirjasimen värin vaihto saattaa aiheuttaa ongelmia, siihen pitää aina löytyä painava syy.
Yli 16 miljoonaa värisävyä käyttävä kuvatiedosto on huomattavasti esimerkiksi 256-väristä suurempi. Näytöllä, joka ikänsä tai asetustensa vuoksi ei pysty näyttämään kuin 256 väriä kerrallaan, 16 miljoonan värin kuva näyttää usein huonolta, kun kuvan sisältämiä värisävyjä vaihdetaan "lähimpiin käytössä oleviin" sävyihin. Webissä julkaistavien kuvien värimäärää onkin tapana karsia alle 256:n. Yleisesti käytetään 216 värin palettia, joka saadaan annettaessa kullekin perusvärille (punainen, vihreä, sininen) heksaväriarvoja 00, 33, 66, 99, CC, FF (desimaalilukujärjestelmässä 51:n kerrannaisia: 0, 51, 102, 153, 204, 255). Esimerkiksi sininen on 0000FF, keltainen FFFF00 ja tumman harmaa 666666. Näin saadaan aikaan ns. Color Cube tai web-safe palette. Useat selaimet muuttavat kaikki värit näihin Color Cube -arvoihin, mikäli käytetään 256-väristä näyttötilaa.
Usein värejä valittaessa unohdetaan, että esimerkiksi punavihersokeus on yllättävän yleistä. On olemassa muitakin värisokeuden muotoja, minkä vuoksi kaikkien parasta ajatteleva sivuntekijä ei käytä värejä niin määräävässä asemassa, että värejä näkemätön ei ymmärrä sivun sanomaa.
Kuva kertoo enemmän kuin tuhat sanaa. Kuvaa luetaan nopeammin kuin tekstiä, kuva kiinnittää huomiota ja usein miellyttää silmää enemmän kuin teksti. Kuvien näyttävyyttä voi vielä lisätä yksinkertaisilla tehosteilla.
Varsinkin pitkät, pelkkää tekstiä sisältävät sivut ovat usein tylsän näköisiä ja raskaita lukea. Niiden ilmettä on mahdollista keventää sopivalla määrällä grafiikkaa. Grafiikka ei aina tarkoita kuvia vaan käsittää myös ainakin tekstin osiin jakavat viivat, listojen jäseniä merkitsevät kuviot, nuolet ja vastaavat symbolit, sekä grafiikkana esitetyn tekstin.
Web-sivulla kuva on usein linkki. Tällöin, samoin kuin sanoja käytettäessä, kuvan tulisi kertoa, minne linkkiä seuraamalla pääsee. Yhä suuremman osan WWW:n kuvatarjonnasta varastavista mainoksista jotkut esittävät tarjouksen, esimerkiksi: "Haluatko ansaita rahaa? - Klikkaa tätä!" Tällöin mainostaja luottaa ihmisen uteliaisuuteen enemmän kuin oman logonsa tai tuotemerkkinsä houkuttelevuuteen. Tällaisten mainosten tehosta ei vielä ole saatu juuri mitään tutkimustuloksia.
Vakiokokoisia (esimerkiksi 468 x 60, 125 x 125 tai 90 x 30) "bannereita" näkee jo lähes jokaisella palvelua tarjoavalla sivulla. Mainosten suurin vika on, että ne ovat usein animaatioita, jotka vilkkuessaan vetävät katsetta puoleensa. Minä en ainakaan haluaisi omalle sivulleni mainosta, joka häiritsee sivun lukemista ja houkuttelee lukijat pois siltä. Sivukurssilla ei ole - eikä tule - vilkkuvaa sponsoria.
Web-sivujen kuvilla on usein "varjo", joka tuo ne irti sivun taustasta. Jotkut kuvat tavoittelevat kolmiulotteisuutta pakopisteen avulla. Myös läpinäkyvällä taustalla varustetut gif-kuvat ovat yleisiä. Viimemainituilla on etenkin yksivärisinä vaara näkyä huonosti, mikäli joku on määrittänyt selaimensa taustan saman väriseksi.
Kuvissa määrän sijasta kannattaa panostaa laatuun ja tarkoituksenmukaisuuteen. Sivun lukija ei yleensä paljoa kostu kuvista, joiden sisältö on "Java-free zone!", "You are visitor number 0000049" tai "Nerdscape Now!".
Useita sivuja käsittävää kokonaisuutta laadittaessa on ratkaistava koko joukko uusia ongelmia. Lukijan pitäisi koko ajan tietää, millä sivulla on, ja mihin kokonaisuuteen sivu kuuluu. Samoin joka sivulta pitäisi olla helposti löytyvä linkki mahdolliselle pääsivulle tai sisällysluetteloon. Linkkien nimeämiseen kannattaa kiinnittää huomiota.
Laajoilla kokonaisuuksilla on yleensä yksi yleinen kaava, jota kaikki siihen liittyvät sivut noudattavat. Jos kaikki sivut sijaitsevat samassa hakemistossa, ensimmäinen sivu on yleensä nimeltään index.html, jonka selain lataa automaattisesti, jos sille antaa vain hakemiston nimen. Tältä sivulta pääsee sitten kokonaisuuden muille sivuille. Lukijat eivät kuitenkaan aina tule sivuille tämän "kansilehden" kautta, vaan esimerkiksi hakupalvelimelta.
Monet opastavat lukijaa sivuillaan nuolilla. Oikealle osoittava nuoli vie "seuraavalle" sivulle, vasemmalle vievä nuoli "takaisin". Joskus käytetään myös vastaavia sanoja. Lineaarinen järjestelmä, jossa jokaisella sivulla on edeltäjä ja seuraaja, on periytynyt paperiviestinnästä, mutta on linkitetylle hypertekstille vieras.
Koska sivulle voi tulla mistä hyvänsä eikä seuraava sivu kuulu web-sivuihin, "takaisin" ja "eteenpäin" vieviä linkkejä tulee välttää. Miksei nimetä linkkejä niiden todellisen kohteen mukaan - esimerkiksi "hakemisto" ja "piparkakkuohje". Näin lukija tietää aina, minne linkkiä seuraamalla pääsee.
Useiden sivujen välisen järjestyksen voi toteuttaa monella tavalla. Hyvän suunnittelun eräänä merkkinä pidetään, että lukija pääsee kokonaisuuden miltä hyvänsä sivulta mille tahansa sivulle kahdella linkillä.
Sivut voivat noudattaa esimerkiksi suku- tai hakemistopuun rakennetta, jossa pääsivu on ensimmäisenä, sillä on muutama alasivu, joilla taas omia alaisia jne. Joskus rakenteen voi jakaa useampaan runkoon, jotka etenevät rinnakkain. Näillä rungoilla voi olla omia ja yhteisiä "oksia", haarautuvia linkkejä. Joskus sivukokonaisuus on pakko esittää lineaarisessa järjestyksessä, jolloin yhdellä sivulla on aina määrätty edeltäjä ja seuraaja.
Sivujen rakenteesta voi laatia lukijalle myös kartan, josta näkee, miten sivut suhtautuvat toisiinsa. Tämä kartta voi toimia myös kokonaisuuden ensimmäisenä sivuna, sisällysluettelona tai hakemistona. Kokonaisuuden rakennetta suunnitellessa on keksitty vaatimus, että lukijan pitää päästä joka sivulta mille tahansa toiselle sivulle kahta linkkiä seuraamalla. Tähän ei kuitenkaan tarvitse suhtautua niin ehdottomana lakina, että tinkisi muuten selkeästä rakenteesta mahdollistaakseen kahden linkin siirtymisen.
Linkkejä tehdessä voi yrittää tehdä eroa saman sivun toiseen kohtaan, kokonaisuuden toiselle sivulle ja kokonaisuuden ulkopuolelle vievien linkkien kanssa. Sivun sisäiset linkit ovat harvinaisia, ja voivat siksi hämmentää lukijaa. Samoin tietyn kokonaisuuden ulkopuolelle vahingossa eksyminen voi hämmentää.
Useimmin minulle esitetty kysymys on, miten pääsee mahdollisimman helposti alkuun weppisivujen teossa. Ohjelmointikieliin tutustuttaessa on tapana tehdä ensin "Hello World" -ohjelma, joka vain tulostaa ruudulle sanat Hello World. Tehdään HTML-kielellä Hello World -sivu.
Valitse ensin tekstieditori, jota tahdot
käyttää. Tekstieditoreita ovat esimerkiksi Muistio,
Notepad, Wordpad, Teksturi, Ed, CEd, pico, emacs, xedit jne. Kirjoita
editoriin seuraavat rivit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html>
<head>
<title>Esimerkkisivu</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Kirjoittamassasi HTML-kielen pätkässä määritellään kielen käytetty versio (HTML Basic), head-osassa selainohjelmalle sivun otsikko (Terve maailma!) sekä body-osassa sivulle näkyviin tuleva teksti (Hello World). Tallenna sivu haluamaasi hakemistoon nimellä hello.html.
Käynnistä nyt selainohjelma, esimerkiksi Netscape Communicator/Navigator, Internet Explorer, Lynx, Mosaic tms. Etsi selainohjelmasta toiminto, jolla voi avata tiedoston. (Esim. Open File..., Open Page..., Read Local File tms.) Valitse tämän jälkeen äsken tallettamasi hello.html-tiedosto oikeasta hakemistosta. Selainohjelman ruudulle pitäisi tulla sanat Hello World.
Tästä on helppo jatkaa lisäämällä sivulle tekstin esitykseen vaikuttavia elementtejä, listoja, taulukoita, linkkejä jne. Voit myös tutustua tähän kurssiin liittyvään esimerkkisivuun ja kyseisestä dokumentista löytyviin elementteihin.
Toiseksi yleisimmin kuulemani kysymys on: "Miksi sivuni ei toimi?" Joskus selainohjelma ei suostu lainkaan näyttämään sivua, joskus linkistä ei pääse minnekään, joskus teksti ja kuvat näkyvät eri tavalla kuin sivun tekijä tahtoisi. Yleensä ongelmasta selviää, kun tarkistaa seuraavat asiat:
file:// ja
julkisten http://. Tämän jälkeen tulee
sivun osoite kokonaisuudessaan. Esimerkiksi
file:///C:\files/internet/html/kotisivu.htm tai
http://www.palvelin.fi/~tunnus/kotisivu.html.
Verkkopalvelimella sijaitsevan sivun pitää yleensä
sijaita public_html-nimisessä hakemistossa, johon
osoitteessa viitataan matomerkillä (~) sekä
käyttäjän tunnuksella.public_html-hakemistoon
komennolla cd public_html.
Määrää sen jälkeen kaikille oikeus
lukea haluamaasi tiedostoa, esimerkiksi
chmod a+r index.html tai
chmod omakuva.gif a+r.
Palvelimesta riippuen komennolle chmod
annettavien määreiden (tiedostonimi ja
a+r-määritys) järjestys voi vaihdella.
Oikea järjestys löytyy kokeilemalla.TABLE), mutta niilläkään ei
aina saa määrättyä kuvien ja tekstin suhteita
täysin haluamikseen. Paras tapa saada sivunsa "toimimaan" on
merkitä sivun sisältöä ja jättää
ulkoasu selainohjelman muotoiltavaksi. Siihen HTML on
mitä mainioin työkalu.Unix-ympäristössä, johon Internet ja WWW pitkälti perustuvat, tiedostonimissä olevat pienet ja suuret kirjaimet ovat merkityksellisiä (case-sensitive). Esimerkiksi MS-DOS tai Windows-ympäristössä index.htm tarkoittaa samaa tiedostoa kuin Index.HTM. Unixissa ne ovat kaksi eri merkkijonoa. Jos HTML-dokumentissa viitataan kuvaan kuva.jpg ja hakemistossa on tiedosto kuva.JPG, kuvaa ei löydy. Itse olen huomannut säästyväni paljolta harmilta, kun käytän tiedostonimissä aina vain pieniä kirjaimia.
Monet tahtovat tietää, millä editorilla sivut kannattaa tehdä. Oma mielipiteeni on, että mikäli HTML on hallussa, kannattaa unohtaa frontpaget, pagemillit, composerit ja vastaavat. Parhaaseen tulokseen pääsee editorilla, jossa näkee tuottamansa tekstin ja HTML:n. Aputoiminnot, jotka lisäävät tagit alku- ja loppumerkkeineen, voivat helpottaa työskentelyä, kun niitä oppii käyttämään, muttei tagien käsin kirjoittaminenkaan mahdotonta ole.
Kannattaa itse kokeilla eri vaihtoehtoja, niin löytää varmasti sopivimman. Useissa uusissa tekstieditoreissa on mahdollisuus näyttää HTML-koodi värikoodein korostettuna, esimerkiksi siten, että elementtien ja attribuuttien nimet näkyvät omilla väreillään. Väritys voi helpottaa koodin sekaan eksyvien virheiden havaitsemista.
Monet ihmiset luulevat, että Netscape on ainoa web-sivujen selaamiseen tarkoitettu ohjelma. Jotkut tuntevat myös Internet Explorerin. Todellisuudessa selaimia ja niiden eri versioita on satoja.
Olen jonkin verran tutkinut eri palvelinten käyttötilastoja, ja tehnyt summittaisen arvion, jonka mukaan Netscapen eri versioita käyttää n. 70 - 75 %, Exploreria n. 15 - 20 % ja Lynxiä 1 - 5 % lukijoista. Kymmenen suosituimman selaimen joukkoon mahtuu usein myös pari hakupalvelimen robottia.
Vaikka muita selaimia tilastojen valossa näyttäisi olevan häviävän vähän, miljoonien käyntien joukossa puoli prosenttia merkitsee jo useita satoja. Vähemmistöryhmien syrjintä on syrjintää netissäkin, joten on vähintään asiallista tehdä sivuja, jotka toimivat kaikilla selaimilla, eikä toivottaa sivuillaan: "Olet tervetullut vain, jos käytät Nerdscapen uusinta versiota!" Yleistä standardia noudattavat sivut ovat myös helpompia hakuroboteille, joten hyvin tehdyt sivut näkyvät paremmin myös hakujen tuloksissa.
Lynx on selain, joka näyttää web-sivut pelkkänä tekstinä. Kuvien paikalla näkyy kuville (mahdollisesti) määritelty ALT-teksti. Lynxiä käyttävät hitailla yhteyksillä tai heikkotehoisilla päätteillä surffaavat.
Useat sivut mainostavat olevansa optimoituja tietylle selaimelle. Tietenkin mahdollisimman laajan lukijakunnan miellyttämiseksi kannattaa optimoida sivut sille selaimelle ja versiolle sekä sille resoluutiolle, jota enemmistö käyttää.
Sivuja katsellaan (joissain harvoissa tapauksissa myös kuunnellaan tai tunnustellaan) erilaisissa ympäristöissä. Tietokoneen ruutu on paljon yleisempi kuin puhesyntetisaattorit tai pistekirjoitus. Useimmat lukijat käyttävät Internet Exploreria, useat heistä uusinta versiota. Useimpien ruudun resoluutio lienee 1024 x 800, selainohjelmaa käytetään koko ruudun kokoisena, JavaScript ja evästeet on sallittu. Tätä kurssia alun perin kirjoittaessani yleisin selain oli Netscape Communicator, yleisin ruudun resoluutio 640 x 400 ja värejä useimmiten käytössä 256. JavaScriptia ja evästeitä ei juurikaan käytetty - ainakaan mihinkään hyödylliseen. Jos siis suunnittelet sivusi tietylle selainversiolle ja tietylle resoluutiolle, varaudu päivittämään sivujesi määrityksiä usein.
Seuraavista osoitteista saattaa löytyä tilastotietoja yleisimmistä selaimista:
Erityisesti kannattaa huomioida, että yhteen laskettuna ne käyttäjät, jotka eivät käytä yleisimmän selaimen yleisintä versiota yleisimmällä resoluutiolla, muodostavat hyvinkin merkittävän osan käyttäjistä. Siksi sivut kannattaa optimoida mille tahansa selaimelle! (Katso Toimii millä tahansa selaimella -kampanja.)
Kirjasimen kokoa ja tyyliä voi vaihtaa vanhoissa HTML-määrityksissä esiintyneen FONT-elementin SIZE ja FACE-lisämääreillä. Nykyaikaisempi vaihtoehto on käyttää Cascading Style Sheets -määrityksiä.
HTML kehitettiin alunperin tiedepiireissä, joissa oli tarve vain sisällön merkitsemiseen. Style Sheets on järjestelmä, jonka avulla voidaan vaikuttaa sivujen ulkoasuun, esimerkiksi käytettävän kirjasimen tyyliin ja kokoon, väreihin sekä asemointiin. Lisää tietoa saa osoitteesta http://www.w3.org/Style/.
Tyylilakanat sotivat monien mielestä HTML:n perusajatusta - ympäristöstä riippumatonta julkaisemista - vastaan. Toisten mielestä ne auttavat tekemään parempia ja helpommin luettavia sivuja. Suosittelen lukemaan Jacob Nielsenin (http://www.useit.com/alertbox/9707a.html) ja Jukka Korpelan (http://www.hut.fi/~jkorpela/styles/harmful.html) sivuja aiheesta.
Selaimen ikkunan voi jakaa osiin FRAMESET- ja FRAME-tageilla (lisätty HTML:n versioon 4). Tällöin on hyvä määrittää myös NOFRAMES-vaihtoehto selaimille, jotka eivät tue kyseisiä komentoja.
"Framessa" olevaa linkkiä seurattaessa kohdesivu ilmestyy yleensä samaan "frameen". Tämän voi välttää antamalla ankkurille A lisämääreen TARGET="_top". Esimerkiksi suunnistuspainikkeissa tarvittavat ikkunoiden väliset linkit tehdään lisäämällä TARGET="frame1", jossa frame1 on kohdeikkunan nimi. Kokonaan uuden selainikkunan voi avata lisämääreellä TARGET="_new" tai TARGET="_blank". Nämäkin ovat Netscapen omia laajennuksia.
Huom! Jos tahdot poistaa Netscapen selaimilla kehysten väliin jäävän muutaman pikselin kokoisen välin, jokaisessa kehyksessä olevan sivun BODY-tagille on annettava (standardissa määrittelemättömät) attribuutit MARGINHEIGHT=0 ja MARGINWIDTH=0.
Musiikkia sivuille voi lisätä ainakin WAV- ja MIDI-muodossa. MIDI-muodossa musiikista on talletettu vain ohjeet musiikin soittamiseen, ikään kuin nuotit. Sivun lukijan koneen tehtäväksi jää huolehtia soittimista. WAV-tiedostot ovat puolestaan digitoitua ääntä. Microsoft lienee kehittänyt mahdollisuuden lisätä jollain (Internet Explorerin tukemalla) tagilla sivulle taustamusiikki. Netscape-laajennus EMBED mahdollistaa MIDI-musiikin lisäämisen.
Äänten laittaminen sivuille on yleensä sekä turhaa että turhauttavaa. Joissakin tietokoneissa ääniä (ns. PC-speakeria) ei saa edes kytkettyä pois päältä, joten avuttomasta kaiuttimesta sirisevä MIDI-rallatus saa helposti lukijan vaihtamaan maisemaa. WAV-tiedostoja voi laittaa tavallisiksi linkeiksi. Koska kaikilla ei ole mahdollisuutta kuulla niitä, niiden ei pitäisi sisältää tärkeää tietoa, jota ei saisi selville muin keinoin.
Useimmat sivut näkyvät Netscapella ja Internet Explorerilla vallan mainiosti, vaikka tekijä olisi käyttänyt standardiin kuulumattomia tageja ja vaikka document type -määritelmä puuttuisi. Jos kerran näitä selaimia käyttää yli 90 % sivujen lukijoista, mitä väliä muilla on?
Ihmiset löytävät sivuja nykyään yhä useammin suoraan hakupalvelimen (esim. Altavista, Lycos, Yahoo) kautta. Tämän vuoksi on tärkeää, että sivut näkyvät oikein näissä palvelimissa. Parhaiten näkyvät luonnollisesti sivut, joita ei ole suunniteltu vain yhdelle tietylle selaimelle, vaan myös esim. hakurobottien ymmärrettäviksi. Siis standardin mukaiset sivut.
Henkilökohtaiset kotisivunsa voi kukin tehdä miten tahtoo, mutta yrityksillä ja yhteisöillä ei pitäisi olla varaa syrjiä edes muutamaa prosenttia mahdollisista asiakkaista tai jäsenistä. Tekstivaihtoehdot kuville, taulukoiden huolellinen suunnittelu ja muutenkin eri tyyppisten selainten huomiointi ilmaisee sivujen tekijän kykenevän ajattelemaan "asiakaslähtöisesti".
Tämän kohdan kysymykseen voisi esittää vastakysymyksen: "Miksi ei tehdä standardin mukaisia sivuja?" Vaikka sivujen kunnollinen suunnittelu ja validointi tuntuisi aluksi vaivalloiselta, tekemällä oppii ja ajatuksen kanssa suunnitellut sivut ovat myös selkeämpiä.
Jos näistä kysymyksistä ei löydy vastausta mieltäsi painavaan ongelmaan, kirjoitapa sähköpostia, niin yritän etsiä vastauksen. Ja mikäli kysymyksesi on hyvä, lisään sen vastauksineen tälle listalle.