XHTML

Verkkosivut

Pakkaa sivustosi yhteen tiedostoon (.zip, .tar.gz tms) ja palauta palautuskansioon.

Pakkaaminen esimerkiksi näin:
zip -r tiedostonimi pakattava_kansio
zip -r epunverkkosivut.zip ~/Asiakirjat/Verkkosivut

Palauta kuva tai muu tiedosto
Palauta merkintä
Palauta linkki

Sinulla ei ole tarvittavia oikeuksia lähettää mitään.

Tehtävät

Sitä maukkaammalta maistuu mitä hankalampi hankkia.
Publilius Syrus

Saat kurssin tästä osasta arvosanan tekemällä nämä tehtävät sekä yhden laajemman harjoitustyön. Tehtäviä ratkaistessasi saat käyttää vapaasti kaikkia saatavia tietolähteitä. Tehtävissä oletetaan, että osaat jo käyttää internetin hakupalveluja.

Suosittelen, että teet nämä tehtävät numerojärjestyksessä. Tee myös jokaisesta tehtävästä erillinen HTML-tiedosto, ellei toisin mainita.

Tavoitteet

Hankaluuden keskellä lojuu mahdollisuus.
Albert Einstein

Kurssilla harjoitellaan HTML-kuvailukielen perusrakenteita ja opetellaan käyttämään porrastettuja tyyliarkkeja (CSS) sivustojen ulkoasun muotoiluun.

Tätä sivustoa ei ole tarkoitettu kattavaksi kurssimateriaaliksi tai HTML-kielen ja tyyliarkkien oppaaksi. Tarkoitus on, että oppija kokoaa tarvitsemansa ohjeet itse internetistä ja ratkaisee tehtävät itsenäisesti. Opettaja ohjaa tarvittaessa tiedonhaussa ja tehtävien suorittamisessa.

Kurssin tärkein tavoite on oppia kohtuullisella vaivalla tekemään selkeitä ja helposti muutettavia WWW-sivuja. Tietoverkkoja käytetään yhä enemmän oppimismateriaalin ja muun tiedon välittämiseen ja esittämiseen. Kurssilla saat sellaiset perustaidot, että oman materiaalin luominen ja uusien menetelmien oppiminen on helppoa käyttöympäristöstä ja saatavilla olevista työkaluista riippumatta.

Työkalut

Apu lapsest; ko kalan perka ni kaks syä.

HTML-tiedosto voidaan kirjoittaa millä tahansa tekstinmuokkausohjelmalla, vaikkapa Windowsin Muistio-apuohjelmalla. Älä käytä tekstinkäsittelyohjelmaa, kuten Word, koska ne lisäävät tekstin joukkoon omia muotoilumerkintöjään. Jos kuitenkin kirjoitat HTML-koodia tekstinkäsittelyohjelmalla, muista tallentaa tiedosto tekstitiedostona.

Ole myös huolellinen valitessasi tiedostonimeä ja tunnistetta. Käyttöympäristöstä ja ohjelmista riippuen tiedoston tunnisteosa voi olla esimerkiksi *.html, *.htm tai *.xhtml. Unix-ympäristössä ja uusissa Windows-versioissa tiedostonimien isot ja pienet kirjaimet erotetaan toisistaan. Linkit tiedostojen välillä eivät toimi, elleivät tiedostonimet ole viittauksissa tarkalleen oikein. Kirjoita johdonmukaisesti kaikki tiedostonimet kokonaan pienillä kirjaimilla, niin säästyt asian pohtimiselta. Älä myöskään käytä aksenttimerkkejä (å,ä,ö) tiedostonimissä, koska niiden toimivuudesta eri ympäristöissä ei ole takeita. Älä käytä välilyöntejä tiedostonimissä, vaan korvaa ne väli- tai alaviivalla: hirmu_mutkikas_nimi-123.html.

HTML-tiedostojen kirjoittamiseen ja WWW-julkaisuun on tarjolla myös kirjava joukko HTML-editoreja. Yksinkertaisimmilla voi nopeuttaa koodinkirjoittamista valikkojen tai painikkeiden avulla. Graafiset WYSIWYG^*-editorit esittävät tekstin suoraan samantapaisessa muodossa kuin selaimet ja muistuttavat toiminnaltaan tekstinkäsittelyohjelmia. Kehittyneellä editorilla voi tehdä WWW-sivuja osaamatta lainkaan HTML-koodia mutta tuloksena on yleensä raskasta ja hitaasti latautuvaa koodia, jota joutuu siivoamaan jälkeen päin.

WYSIWYG-editorilla voi kirjoittaa muotoiltua tekstiä melkein ilman harjoittelua, jos on tutustunut tekstinkäsittelyyn. Myös tekstinkäsittelyohjelmat voivat muuttaa asiakirjan HTML-sivuiksi. Ohjelmien tuottama HTML-koodi on kuitenkin usein suttuista ja lyhytkin tekstinpätkä on helppo saada täyteen tarpeettomia fonttimäärityksiä. Tässä kurssissa tutustumme graafisiin editoreihin vasta sitten kun osaamme kirjoittaa peruskoodia ominkin päin.

WYSIWYG = What You See Is What You Get. Kun kirjoitat HTML-koodia itse, keskityt merkitykseen. WYSIWYM = What You See Is What You Mean.

Selain on ohjelma, joka tulkitsee HTML-koodia, esittää sivun sisällön ja mahdollistaa liikkumisen WWW-sivulta toiselle. Standardista huolimatta selaimet tulkitsevat koodia eri tavalla ja sen vuoksi sama sivu näyttää lähes väistämättä eri selaimissa erilaiselta. Lisäksi selainvalmistajat ovat tehneet HTML-standardiin omia lisäyksiään, jotka eivät toimi toisissa selaimissa. Näiden laajennusten käyttöä on siksi syytä välttää. Sivuston on oltava käyttökelpoinen mahdollisimman monenlaisissa käyttöympäristöissä. Toisaalta sivustoa suunniteltaessa on hyväksyttävä se tosiasia, ettei sivun ulkoasua voi joka tilanteessa määrätä millintarkasti.

Tehtävä

Etsi internetistä HTML-tiedostojen kirjoittamiseen tarkoitettuja työkaluja. Kirjoita muistiinpanot Muistio-ohjelmalla tekstitiedostoon. Kirjaa ohjelman nimi ja ohjelman esittelysivun osoite. Katso myös, voiko toimivan ohjelman tai kokeiluversion imuroida ja paljonko täydellinen versio maksaa, vai onko ohjelma avointa lähdekoodia. (Kokeile useita eri hakusanoja.)

S31:n koneisiin on asennettu editoriksi Geany.

Koulussa: Tutki, onko Linux-projektiläppäriisi asennettu Geany ja Vim.

Kotona: Asenna Windows-koneeseen Geany-tekstieditori lataamalla asennushjelma: https://www.geany.org/download/releases/
Linuxissa asennat pakettienhallinnan kautta paketin geany.
Vim (Vi IMproved) on suosittu koodauseditori. Windows-koneeseen voit asentaa Vimin täältä: https://www.vim.org/download.php
Vim löytyy usemmista Linux-jakeluista valmiiksi asennettuna, tai sitten voit asentaa sen pakettienhallinnan kautta.

HTML-tiedoston perusrakenne

Tottahan siinä aikaa kluttaantuu, kuk kierästä kyliestä alakaa.

HTML-kielen tunnisteet eli komennot (tag) kuvaavat asiakirjan rakenteen osia. Tunnisteet kirjoitetaan väkäsulkuihin ("<" eli pienempi kuin ja ">" eli suurempi kuin). Useimmat tunnisteet toimivat pareina, jolloin muotoiltava teksti on tunnisteparin välissä: <h1>Johdanto</h1> tekee otsikon. Jotkin koodit toimivat yksinään, kuten rivinvaihto <br />.

Esimerkeissä näytetään ensin HTML-koodi ja sitten malli siitä, miten selain koodin esittää. Ota huomioon, että tekstin lopulliseen ulkoasuun vaikuttaa sekä tyylin määrittely tyyliarkilla että selaimen tapa tulkita se.

Tässä on yksinkertainen esimerkki toimivasta HTML-sivusta. Käytä tätä pohjana, kun teet uusia tiedostoja.

<html>
  <head>

    <meta charset="UTF-8"> 

    <title>Minun oma sivuni</title>
  </head>
  <body>
    <h1>Minun otsikkoni</h1>
    <p>Tekstikappale. Ei ole asiaa mutta kirjoitan silti.</p>
    <p>Lisää tekstiä. Jotain järkevää pitää keksiä. Mutta mitä?</p>

    <!-- Muistutus itselle: tähän pitää myöhemmin lisätä jotain -->
  </body>
</html>

<html> kertoo, että asiakirjassa on HTML-kielen rakenteita, jotka selaimen pitää tulkita.

<head>-osiossa on yleistietoja asiakirjasta. Se ei saa sisältää esitettäväksi tarkoitettua tekstiä eikä tekstin muotoiluja. Yleisiä koodeja head-osiossa ovat <title>, <meta> ja <link>.

<meta> antaa selaimelle tietoa siitä, miten sivun dataa pitää tulkita. Esimerkissä määritellään käytetty merkistö (Unicode), jolloin diakriittiset merkit (ä, ö jne.) tulostuvat oikein.

<title> kertoo dokumentin nimen, joka näkyy yleensä selainikkunassa välilehden otsikkona.

<body>-osioon tulee dokumentin varsinainen sisältö: tekstikappaleet, otsikot, kuvat ja taulukot.

Koodia voi selventää kommenteilla. Kommentit eivät näy sivun lukijalle, mutta niistä on apua, kun yritetään tulkita koodia. Kommentti alkaa merkeillä .

Sisennysten tarkoitus on selventää rakennetta: mikä määritys kuuluu minkäkin kokonaisuuden sisään. Se ei näy sivun lukijalle, mutta helpottaa koodaajan työtä.

Tehtävät

a) Aseta Geanyssa asiakirjan tyyppi, niin saat tarkistusta auttavat värit käyttöön:
Asiakirja/Aseta tiedostotyyppi/Kuvauskielet/HTML-document
Ota myös rivitys käyttöön joko tässä asiakirjassa
Asiakirja/Rivitystai pysyvästi
Muokkaa/Asetukset/Editori/Rivitys

b) Etsi internetistä suomenkielisiä HTML-oppaita. Valikoi sellaisia, joissa on selkeä sisällysluettelo ja joista on helppo löytää yksittäisen tunnisteen kuvaus ja esimerkkejä käytöstä. Kirjoita hyvien oppaiden URL-osoitteet muistiin.

c) Tarkastele jonkin yksikertaisen sivun HTML-koodia. Näpäytä tekstin päällä hiirenoikeanpuoleista näppäintä ja valitse pudotusvalikosta Näytä lähdekoodi tai View frame source. Selvitä oppaista, mitä eri tunnisteet tarkoittavat ja mihin niitä tarvitaan.

Kappale ja rivinvaihto

Mikä on kirjoitettu ilman vaivannäköä, se tavallisesti luetaan ilman kiinnostusta.
Samuel Johnson

Tekstikappale kirjoitetaan <p>- ja </p>-koodien väliin. Selain sijoittaa kappaleen jälkeen yleensä tyhjän rivin (p=paragraph). Jos jätät kappaleen loppukoodin </p> pois, tyyliarkeilla tehdyt kappaleen ulkoasumääritykset eivät yleensä toimi.

Muista, että tekstissä olevat rivinvaihdot näkyvät pelkkänä välilyöntinä. Niillä voi kuitenkin helpottaa koodin kirjoittamista.

Koodi:

<p>Fennis mira feritas, foeda paupertas: non arma, non equi, non penates; victui herba, vestitui pelles, cubile humus:
solae in sagittis spes, quas inopia ferri ossibus asperant.

Idemque venatus viros pariter ac feminas

alit; passim enim comitantur partemque praedae petunt.
Nec aliud infantibus ferarum imbriumque suffugium quam ut in aliquo ramorum nexu contegantur: huc redeunt iuvenes, hoc senum receptaculum. Sed beatius arbitrantur quam ingemere agris, inlaborare domibus, suas alienasque fortunas spe metuque versare: securi adversus homines, securi adversus deos rem difficillimam adsecuti sunt, ut illis ne voto quidem opus esset.</p> <p>Cetera iam fabulosa: Hellusios et Oxionas ora hominum voltusque, corpora atque artus ferarum gerere: quod ego ut incompertum in medio relinquam. <br /><em>(Tacitus: Germania)</em></p>

Lopputulos:

Fennis mira feritas, foeda paupertas: non arma, non equi, non penates; victui herba, vestitui pelles, cubile humus: solae in sagittis spes, quas inopia ferri ossibus asperant. Idemque venatus viros pariter ac feminas alit; passim enim comitantur partemque praedae petunt. Nec aliud infantibus ferarum imbriumque suffugium quam ut in aliquo ramorum nexu contegantur: huc redeunt iuvenes, hoc senum receptaculum. Sed beatius arbitrantur quam ingemere agris, inlaborare domibus, suas alienasque fortunas spe metuque versare: securi adversus homines, securi adversus deos rem difficillimam adsecuti sunt, ut illis ne voto quidem opus esset.

Cetera iam fabulosa: Hellusios et Oxionas ora hominum voltusque, corpora atque artus ferarum gerere: quod ego ut incompertum in medio relinquam.
(Tacitus: Germania)

Rivin voi katkaista ilman kappaleväliä tunnisteella <br /> (br=line break). Tämä on tarpeen esimerkiksi runotekstissä. Jos kirjoitat

<p> Hyväpä täss' on miesten olla, armas naistenki elellä.
Ei tässä surulla syöä, ei eletä huolen kanssa;
tässä syöähän surutta, eletähän huoletoinna
iällä tämän isännän, elinajalla emännän.
<em>(Elias Lönnrot: Kalevala)</em></p>

teksti on selaimessa yhtä pötköä:

Hyväpä täss' on miesten olla, armas naistenki elellä. Ei tässä surulla syöä, ei eletä huolen kanssa; tässä syöähän surutta, eletähän huoletoinna iällä tämän isännän, elinajalla emännän. (Elias Lönnrot: Kalevala)

Jos kirjoitat koodin näin

<p> Olipa kystä kyllin syöä, kyllin syöä, kyllin juoa<br/ >
punaisissa purtiloissa, kaunoisissa kaukaloissa:<br />
pirotella piirahia, murotella voimuruja,<br />
sirotella siikasia, lohkota lohikaloja<br />
veitsellä hope'isella, kuraksella kultaisella. <br />
<em>(Elias Lönnrot: Kalevala)</em></p>

tekstin tunnistaa runoksi:

Olipa kystä kyllin syöä, kyllin syöä, kyllin juoa
punaisissa purtiloissa, kaunoisissa kaukaloissa:
pirotella piirahia, murotella voimuruja,
sirotella siikasia, lohkota lohikaloja
veitsellä hope'isella, kuraksella kultaisella.
(Elias Lönnrot: Kalevala)

Käytä rivin katkaisua (<br />) vain erityistapauksissa. Kun haluat vain aloittaa uuden kappaleen, käytä <p>-tunnistetta. Listat ja luettelot kannattaa tehdä niille tarkoitetuilla tunnisteilla.

Tehtävä

Kirjoita runo, laulu tai räppi, jossa on vähintään kaksi säkeistöä (kappaletta). Katko säkeistöt riveiksi rivinkatkaisulla.

Otsikot

Yrittäessäni olla lyhytsanainen käyn epäselväksi.
Horatius

Otsikoita on kuutta eri tasoa. Otsikkotunnisteessa <hn>...</hn> luku n kuvaa otsikon tasoa: 1 = pääotsikko 2 = alaotsikko jne. (h=header)
<h1>Tosi iso otsikko</h1>
<h2>Vähän pienenempi </h2>
<h3></h3>

Tämän sivuston ulkoasu ja myös otsikoiden ulkoasu on määritelty tyyliarkilla. Tällaisilta otsikot näyttävät oletusmuotoiluilla:

Älä sekoita tekstin otsikointia <head>- ja <title>-tunnisteisiin.

Linkit

Kysyen kylän löytää.

Linkit ovat viittauksia toisille sivuille tai saman sivun eri osiin. Linkkinä toimivateksti tai kuva sijoitetaan <a> ja </a>-koodienväliin. (a=anchor)

<a>-tunnisteen tarkenne href kertoo kohteen sijainnin.Yksinkertainen tekstilinkki toiselle sivulle voisi olla tällainen:

Kokeile tätä: <a href="https://areena.yle.fi">YLE Areena</a>

Selaimessa tulos näyttää tältä:

Kokeile tätä: YLE Areena

Tarkenteella target kerrotaan mihin kehykseen tai ikkunaan uusi sivu avautuu (katso luku Kehykset). Selvitä kokeilemalla, mitä seuraavat koodinpätkät tekevät. Takaisin testisivulta pääset painamalla selaimen Edellinen-painiketta (=Takaisin=Back). Jos linkin painaminen luo uuden ikkunan, voit sulkea sen normaalisti.

<a href="http://hmpg.net/" target="uutukainen">Kokeile</a> Kokeile

<a href="http://hmpg.net/" target="_self">Kokeile</a> Kokeile

<a href="http://hmpg.net/" target="_top">Kokeile</a> Kokeile

Kohde "_top" tarkoittaa "avaa sivu koko ikkunassa" ja "_self" "avaa sivu tähän samaan kehykseen". Uuden ikkunan nimi "uutukainen" on linkin kirjoittajan määrittelemä.

Tehtävä

Kirjoita HTML-sivu, johon teet linkit löytämiisi HTML-oppaisiin. Anna sivulle nimeksi HTML-oppaat.html ja tallenna se omaan työkansioosi. Kopioi sivun runko tästä:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>HTML-oppaita</title></head><body><p><a href="https://peda.net/p/petri.nousiainen/X/xhtml">Kotisivukurssin materiaali</a></p></body></html>

Kirjoita jokainen linkki omalle rivilleen ja lisää kunkin loppuun lyhyt arvio oppaasta. Älä kirjoita arviota linkin sisään!

Lisää sivulle otsikko (koko <h1>) ja lyhyt selitys siitä, miten löysit listalla olevat linkit.

Tekstin korostus

Ei kaekki viärät ou värkkipuita.

Loogisilla korostuksilla määritellään tekstin tehtävä. Niistä käytetyimmät ovat korostettu <em>...</em> (emphasis), jonka selaimet yleensä näyttävät kursivoituna, ja vahvennettu <strong>...</strong>, joka tavallisesti näyttää lihavoidulta.

Hyödyllisiä muotoiluja ovat myös <sup> (yläindeksi: 10³)ja <sub> (alaindeksi: H₂O).

HTML sisältää myös fyysisiä korostuksia, jotka määräävät tekstin ulkoasun. HTML on kuitenkin tarkoitettu rakenteen eikä ulkoasun määrittelyyn. Ulkoasu kuvataan erikseen tyyliarkeilla. Käytä siksi vain loogisia korostuksia. Loogiset tyylit saadaan erottumaan toisistaan esimerkiksi fontin muotoilulla ja väreillä.

Tehtävät

Lisää jo kirjoittamaasi tekstiin korostettuja ja vahvennettuja sanoja.
Ota selvää, mihin on tarkoitettu korostukset <dfn>, <cite>ja <blockquote>. Tutki myös, miten selaimesi esittää ne.

Luettelot

Johdonmukaisuus on mielikuvituksettoman viimeinen pakopaikka.
Oscar Wilde

Järjestämätön luettelo sijoitetaan <ul>ja </ul>-koodienväliin. (ul=unordered list.) Jokainen lueteltava asiamerkitään <li>-koodilla.

Akun veljenpoikien lakin väri
<ul>
<li>Tupu: sininen
<li>Hupu: vihreä
<li>Lupu:punainen
</ul>

Akun veljenpoikien lakin väri

Tupu: sininen
Hupu: vihreä
Lupu:punainen

Tunnisteen <ul> tarkenne type kertoo, millaista luettelomerkkiä käytetään. Tarkenne compact kertoo selaimelle,että luettelon voi esittää tiiviisti.

<ul type="square" compact>
<li>Tupu: sininen
<li>Hupu: vihreä
<li>Lupu:punainen
</ul>

Numeroitu luettelo sijoitetaan <ol> ja </ol>-koodien väliin.(ol=ordered list.) Tarkenteella type voi määrätä luettelon numerointitavan ja tarkenteella start aloittavan numeron, mutta nämä muotoilut eivät toimi kaikissa selaimissa.

<ol>
<li>Akun veljenpojat
<ul>
<li>Tupu: sininen lakki
<li>Hupu: vihreä lakki
<li>Lupu:punainen lakki
</ol>
<li>Iineksen siskontytöt
<ol type="a" start=10>
<li>Tiinu: vaaleanpunainen rusetti
<li>Leenu: vaaleanpunainen, valkopilkkuinen rusetti
<li>Liinu: vaaleanpunainen, mustapilkkuinen rusetti
</ol>
</ol>

Akun veljenpojat

Tupu: sininen lakki
Hupu: vihreä lakki
Lupu: punainen lakki

Iineksen siskontytöt

Tiinu: vaaleanpunainen rusetti
Leenu: vaaleanpunainen, valkopilkkuinen rusetti
Liinu: vaaleanpunainen, mustapilkkuinen rusetti

Esimerkin määritelmälistan (<dl>...</dl>) käytöstä näet luvussa Peruskäsitteitä. Tutki sivun koodia selvittääksesi, miten luettelo on tehty.

<dl>
<dt>Määriteltävä asia</dt>
<dd>Määritelmä eli lyhyt kuvaileva teksti.</dd>
<dt>Määritelmälistan muotoilu</dt>
<dd>Määritelmä esitetään yleensä sisennettynä ja määriteltävä asia sisentämättä, joskus jotenkin korostettuna.</dd>
<dd>Määritelmätekstissä voi olla useampikin kappale.</dd>
</dl>

Määriteltävä asia: Määritelmä eli lyhyt kuvaileva teksti.
Määritelmälistan muotoilu: Määritelmä esitetään yleensä sisennettynä ja määriteltävä asia sisentämättä, joskus jotenkin korostettuna.; Määritelmätekstissä voi olla useampikin kappale.

Älä käytä määritelmälistaa tekstin sisennykseen tai väliotsikointiin. Sisennyksen voi hoitaa tyylimäärityksillä.

Tehtävä

a) Numeroitu luettelo <ol>. Laadi sivu, jossa luettelet viisi asiaa (TOP5), joista pidät, sekä viisi asiaa, joita inhoat.

b) Järjestämätön luettelo <ul>. Lisää sivulle lista asioista, joita olet aina aikonut tehdä mutta et ole saanut aikaiseksi. (Vähintään kahdeksan asiaa.)

c) Lisää samalle sivulle vielä monitasoinen luettelo, jossa pääasiat on numeroitu roomalaisilla numeroilla (I,II,...), seuraava taso on merkitty isoilla kirjaimilla (A,B...) ja viimeinen taso arabialaisin numeroin (1, 2...). Luettelon aiheen saat keksiä itse. Otsikoi kaikki luettelot.

Taulukot

Yksi kuolema on tragedia, miljoona on tilastoja.
Josif Stalin

Taulukon määrittelee koodi <table>...</table>. Aloituskoodin tarkenteilla voi vaikuttaa taulukon ulkoasuun. Tarkenne border määrittelee reunaviivan leveyden: koodilla <table border=0> saat näkymättömän taulukon.

Taulukon rivin määrittelee <tr>... </tr> (table row) ja yksittäisen solun <td>... </td> (table data).

<table>
<tr>
<td>
Tänään
</td>
<td>
Huomenna
</td>
</tr>
<tr>
<td>
12,3
</td>
<td>
29,9
</td>
</tr>
</table>

Tänään	Huomenna
12,3	29,9

Taulukkoon sekä riveihin ja soluihin voi liittää kohdistukseen ja taustaan liittyviä tarkenteita.

Rivinvaihdot ja sisennykset eivät taaskaan vaikuta koodin tulkintaan selaimessa, mutta monimutkaisten sisäkkäisten rakenteiden luominen ja muuttaminen on huomattavasti helpompaa, kun vaivaudut hieman muotoilemaan koodia.

Taulukoita käytetään joskus sivujen taittoon asettelemalla sivulle tulevat kuvat ja tekstit näkymättömän taulukon soluihin. Älä itse käytä taulukoita sivun asetteluun, koska rakenne ei silloin mukaudu erilaisiin ikkunoihin ja eri laittteille. Parempi vaihtoehto on käyttää taittoon lohkoja ja tyylimäärityksiä.

Tehtävät

Kopioi luettelotehtäväsi uuteen tiedostoon nimellä taulukko.html ja muunna kaikki luettelot taulukoiksi.
Muunna alla oleva teksti taulukoksi. Korosta otsikoita väreillä:

Raaka-aine  määrä    kg/l   määrä   yksikköhinta hinta
                              kg       e/kg        e
--------------------------------------------------------
voi         0,600 kg  0,35   0,600      4,11      2,47
sokeri      0,450 l   0,85   0,383      1,09      0,42
kardemumma  0,015 l   0,50   0,007     39,87      0,28
kananmuna   0,150 kg  1,00   0,150      1,76      0,26
omenasose   0,450 kg  1.00   0,450      3,02      1,36
vehnäjauho  1,050 l   0,60   0,630      0,62      0,39
kevytkerma  0,450 l   1,00   0,450      3,11      1,40
leivinjauhe 0,020 l   0,80   0,016      4,03      0,06
--------------------------------------------------------
Yhteensä                                          6,64

Kuvat

Kaekki on kaanista ku vuan silimä tottuu.

WWW-sivujen kuvat ovat erillisissä tiedostoissa. Kuva lisätään sivulle <img>-komennolla. Tarkenne src kertoo kuvatiedoston polun ja nimen, height ja width kuvan korkeuden ja leveyden kuvapisteinä. Tarkenne alt määrittelee tekstin, joka näytetään silloin, kun selain ei näytä kuvaa (alt=alternate). Joissakin selaimissa alt-teksti näkyy, kun hiirtä pidetään jonkin aikaa kuvan päällä. Tarkenne border määrittelee kuvan reunaviivan paksuuden ja align kuvan kohdistuksen tekstiin nähden.

Suositeltavimmat tiedostomuodot kuvien esittämiseen WWW-sivuilla ovat JPEG (tunnus .jpg tai .jpeg) valokuville ja maalauksille sekä PNG (tunnus .png) piirroksille.

Kuvan leveys ja korkeus kannattaa ilmoittaa, jos ne vain suinkin ovat tiedossa. Selaimet varaavat silloin kuvalle sopivan tilan jo ennen lataamista eikä sivun asettelu muutu, kun kuva latautuu. Kuvien asetteluun tekstin suhteen voi tarvittaessa käyttää lohkoja.

Kuvan varaama tila muistissa ja siirtonopeus tietoverkossa eivät pienene vaikka määrittelisit HTML-koodissa kuvan alkuperäistä pienemmäksi. Muokkaa kuva sopivan kokoiseksi kuvankäsittelyohjelmalla ja pane muistiin sen koko kuvapisteinä.

Esimerkki:

<p><img src="kuvat/naama.png" width="80"height="93" border=0 align="top" alt="Rane edestä"> Rane etupuolelta.</p>

Rane etupuolelta.

Mitä tarkoittaa align="top"? Mitä muita vaihtoehtoja tasaukselle on?

Tekstin saa kiertämään kuvaa lisäämällä tyyliarkkiin määrityksen float. Laita tyyliarkkiin esimerkiksi rivi

img.oikea{float:right}

ja html-koodiin kuvan määritys

(Pää ja lamput sumussa on tehty PovRay-ohjelmalla, jolla voi luoda kolmeulotteisia kappaleita esittäviä rasterikuvia.)

Tehtävä

Selvitä, miten tiedostomuodot PNG ja JPEG eroavat toisistaan ja millaisten kuvien esitykseen ne sopivat parhaiten.
Miten kuvan ominaisuudet vaikuttavat kuvan latautumisaikaan? Miten niihin voi vaikuttaa?
Kuvaa itsesi digitaalikameralla. Muokkaa kuvaa niin, ettei sen koko ylitä viittä kilotavua.

Tyyliarkit

Tyyli on yksi valheen laji. Se on koriste, joka peittää rakenteen.
Peter Ustinov

Porrastetuilla tyyliarkeilla (CSS, Cascaded Style Sheets) määritellään WWW-sivujen ulkoasu. Niiden avulla on helppo määritellä laajoillekin sivustoille yhtenäinen muoto. Kun ulkoasu ja asiakirjojen sisältö ovat erillään, sivujen ylläpito on helpompaa ja HTML-koodi on yksinkertaista ja nopeasti latautuvaa. CSS-standardi sisältää myös muotoiluja, jotka puuttuvat HTML-määrittelystä.

Jokaiseen HTML-asiakirjan rakenteeseen eli elementtiin (kappaleet, otsikot, taulukon solut jne.) voidaan liittää useita tyylimäärittelyjä. Seuraava tyylisääntö määrittelee otsikkotyypeille <h1> ja <h2> punaisen värin ja kohdistuksen keskelle:

h1, h2 {color: #ff6600; text-align: center}

Määrittelyt erotetaan toisistaan puolipisteillä. Välilyönneillä ja rivinvaihdoilla ei ole tulkinnan kannalta merkitystä, mutta niillä voi selventää koodia.

Tyylimäärittely voidaan liittää dokumenttiin eri tavoin. Koko asiakirjan tyyli voidaan määritellä style-rakenteella <head>-osiossa. Tyylimäärittelyjä voi myös liittää yksittäiseen asiakirjan rakenteeseen. Suositeltavin tapa on kuitenkin määritellä koko sivun tyyli linkittämällä ulkoinen tyylitiedosto. Näin useampi sivu voi käyttää samoja tyylimäärityksiä. Kun tyylimääritys ja tekstit ovat eri tiedostoissa, niiden muuttaminen erikseen on helpompaa.

Tämän sivun <head>-osiossa määritellään ulkoinen tyylitiedosto teksti.css:

<head>
<title>Porrastetut tyyliarkit</title>
<link rel="stylesheet" type="text/css" href="css/teksti.css">
</head>

Kuten linkissäkin, tyylitiedoston viittauksen on oltava täsmälleen oikein. Tässä käytetään suhteellista viittausta: tiedosto on tämän hakemiston alihakemistossa nimeltä css.

Tyylitiedostoon voit kirjoittaa kommentteja, joilla muistutat itsellesi, mikä kirjoittamiesi komentojen tarkoitus on.

/* Kommentit tiedostoa lukevalle kirjoitetaan näin. */

Tässä on esimerkki erillisestä tyyliarkista. Voit kopioida sen leikepöydälle ja tallentaa omaan kansioosi muokattavaksi. Kun muutat sisältöä, muista muuttaa myös kommentit tai poista ne kokonaan.

/* Ei marginaalia, taustaväri valkoinen */
html {margin:0; background:#ffffff}
/* Marginaali määritellään järjestyksessä ylhäältä alkaen vastapäivään: ylä- ja alareunassa 2 m-kirjaimen leveyttä, oikealla ja vasemmalla 10 % sivun leveydestä. Sama fontti on käytössä koko sivulla. */
body {margin:2em 10% 2em 10%; color:#000000; background:transparent; font:1em "Verdana" "Tahoma" "Arial" "Helvetica" sans-serif}
/* Määritellään linkkien ulkoasu. Kun hiiri viedään linkin päälle, se vaihtaa väriä */
a, a:link, a:visited{color:#003366; background:transparent; text-decoration:underline}
a:hover, a:focus, a:active {color:#0000ff; background:transparent; text-decoration:underline}
/*Otsikot: määritellään tila otsikon ylä- ja alapuolelle; fontin koko suhteessa normaalin tekstin kokoon;pääotsikko keskitetty, valkoinen sinisellä pohjalla. */
h1 {margin:0 1em 1em 0em; text-align:center; font:200%; color:#ffffff; background:#003366}
h2 {margin:1em 0em 2em 0em; font:180%}
h3 {margin:2em 0em 1em 0em; font:150%}
h4 {margin:2em 0em 1em 0em; font:120%}
h5 {margin:2em 0em 1em 0em; font:italic 110%}
h6 {margin:2em 0em 1em 0em; font:80%}
/*Kuvat kelluvat oikeassa reunassa. Teksti kiertää kuvan ympäri.*/
img {float:right; margin:1em 0 1em 2em}
/*Tekstikappaleessa riviväli on 1,5. Kappale tasataan molemmista reunoista (tasaus ei toimi hyvin, jos ikkuna on kapea.)*/
p {margin:1em 0em 1em 0em; text-align:justify; font:1em/150%}
td {line-height:1}
/* Luetteloissa tekstin koko on normaali ja riviväli 1.*/
ul {margin:0em 0em 0em 3em; font:1em/100%}
ol {margin:0em 0em 0em 3em; list-style:decimal; font:1em/100%}

Tehtävä: CSS-oppaat

Tehtävä: Tutki tyylimalleja

Värit

Minä en ou muuta vastaan ku punasta körttiröijyä.

Tietokoneen näytöllä värit esitetään kolmen perusvärin, punaisen, vihreän ja sinisen avulla. Jokainen perusväri voi saada arvoja 0...255. Yhdistelmiä on siis 256³= 16 777 216 kappaletta.

HTML-koodissa värit ilmoitetaan heksa- eli 16-kantaisen järjestelmän lukuina. Heksajärjestelmässä kymmenjärjestelmän lukuja 10...15 vastaavat kirjaimet A...F. Luku 6A tarkoittaa siis kymmenjärjestelmän lukua 6^.16 + 10 = 106. Jotkin värit voi ilmoittaa myös nimellä (red, maroon, lime), mutta heksakoodien käyttö on yleensä helpompaa ja varmempaa.

Tekstin ja taustojen värit sekä taustakuvat kannattaa määritellä tyyliarkeilla eikä HTML-koodissa.

Värit eivät näy eri tietokoneilla ja eri näytöillä samanlaisina. Sama laitteistokin eri tavalla säädettynä esittää samat värit erilaisina. Näyttö, jonka värisyvyys on 24 bittiä, pystyy esittämään yli 16 miljoona väriä, 16-bittinen näyttö 65 536 väriä. Näytölle, jonka värisyvyys on 8 bittiä (256 väriä), useimmat värit on pakko sävyttää (dithering) eli vierekkäisiin kuvapisteisiin laitetaan järjestelmäpaletin eri värejä ja lopullinen värisävy sekoittuu vasta silmässä.

16777216 väriä

=Sävytys=>

216 väriä

HTML-sivun värit voi valita 216 värin paletista (browser safe color, web safe colors, Netscape color cube), johon on valittu PC:n ja Macintoshin 256 värin systeemipaleteista ne värit, joita ei tarvitse sävyttää kummassakaan käyttöympäristössä. Nykyiset näytönohjaimet ja näytöt esittävät värit riittävän tarkasti, joten web safe-väreihin ei ole pakko tyytyä.

Websafe-paletti

Kokeile värikoodeja (JavaScript)

Lohkot

Lohkoilla <div>...</div> (division) voidaan luoda sivulle looginen rakenne. Lohkojen paikka, koko ja ulkoasu määrätään tietenkin CSS-tyyliarkilla.

Sivun taiton suunnittelu lohkojen ja CSS:n avulla on suositeltavampaa kuin taulukkotaitto tai kehysten käyttö. Lohkoissa loogisesti yhteen kuuluvat asiat ovat samassa kohdassa koodia. Taulukkotaitossa koodista tulee vaikeaselkoista ja usein sivu asettuu selainikkunaan eri tavalla kuin on suunniteltu.

Ota selaimessasi tämän sivun lähdekoodi näkyviin ja mieti, mikä merkitys <div>-lohkoilla on. Tutki myös lohkojen määrittelyä tyyliarkissa teksti.css.

Lohkon sisältö erotetaan aina omaksi kappaleekseen. Jos haluat muotoilla tekstiä poikkeavasti kappaleen sisällä, käytä komentoa <span>.

Arvostele muiden sivuja

Vain mitättömyydet säästyvät kritiikiltä.
Fredrik Wislöff

Etsi Internetistä kaksi julkista yrityksen tai laitoksen ylläpitämää sivustoa tai portaalia, jotka ovat mielestäsi erityisen hyviä. Luo suoraan muistikirjaan uusi sivu (Verkkosivujen suunnittelu/Arvostelu) ja kirjoita sinne lyhyt kuvaus kustakin sivusta ja perustele valintasi. Muista laittaa näkyviin sivun osoite. Kiinnitä huomiota seuraaviin asioihin:

ulkoasu

miellyttävä
selkeä
helppo hahmottaa, helppolukuinen
vain tarpeellista esillä
toimivat osat (kuten linkit) erottuvat muusta sisällöstä

käytettävyys

sivustossa on helppo liikkua
pääsivulle pääsee helposti mistä vain
etsimäsi asian löytäminen on helppoa
on helppoa ymmärtää, miten sivut toimivat; sivujen käyttöä ei tarvitse erikseen opetella
sivut latautuvat nopeasti
kuinka monta valintaa tarvitaan, että pääset jonnekin?
onko sivulla toimintavirheitä?
tarvitaanko selaimeen lisäosia, että sivu näkyisi kunnolla?
avautuuko näyttöön ylimääräisiä ikkunoita, mainoksia tms. jotka haittaavat liikkumista tai hidastavat latautumista?

sisältö

pääasiat hyvin esillä
asia kiinnostava
sisältö luotettavaa
kertooko sivusto jotain uutta ja omaa? (eikä kopioi valmiita lähteitä, varsinkaan muita sivustoja)
näkyykö tekijä?
milloin sivut on viimeksi päivitetty?
lisäävätkö kuvat, animaatiot, videot jne. sivun arvoa?

Tätä luetteloa voit myös käyttää muistilistana, kun suunnittelet omia sivujasi.

Sivuston suunnittelu

Alakuperänen piirrustus ei ollu tämmönen, sano Manninen poejastaan.

WWW-sivun laatiminen on viestintää. Laaditpa sitten nimikkosivua lemmikkimonnillesi tai laajaa tutkielmaa homesienistä, tuotoksesi on aina tarkoitettu jonkun toisen katseltavaksi. Ota huomioon internetin käyttäjien tottumukset sekäihmisen havaintokyvyn ja tekniikan rajoitukset. Ei ole synti tehdä asioita samoin kuin muut, ellei sivujesi tarkoitus ole nimen omaan mullistaa viestintää.

Säännöt on tarkoitettu rikottaviksi. Näistä ohjeista voi ja kannattaa poiketa, jos tiedät, mitä olet tekemässä. Tärkeintä on, että harkitset tarkkaan, mitä teet ja miksi. Opettele ensin perusasiat kunnolla.

Motiivi

Parempi vähä annettu ku paljo luvattu.

Selvitä ensin itsellesi, miksi olet tekemässä sivuja. Jos sinulla ei ole sanottavaa, ei kannata luoda sivujakaan. Internet on pullollaan sivuja, joiden ainoa sisältö on "katsokaa kaikki, minä olen netissä!" Mieti, miksi sinun sivusi ovat kiinnostavampia kuin sata muuta.

Yksi sannoo ystävälle, ystävä koko kylälle.

Päätä, ketkä kuuluvat sivustosi kohderyhmään ja kohdista viestisi heille. Keskity asioihin, jotka tunnet ja osaat. Lopputuloksen ei tarvitsekaan kiinnostaa ja miellyttää kaikkia.

Suunnitelma

Mittoo kahesti, sahhoo kerran.

Tee paperille suunnitelma siitä, mitä sivusi pitävät sisällään. Tässä vaiheessa kannattaa päättää sivujen hakemistorakenne, koska sitä voi olla vaikea muuttaa jälkeenpäin. Voit myös hahmotella sivujen asettemointia, millaisiin osiin jaat asian ja niin edelleen. Sisällön puutteita ja rakenteen heikkouksia eivät mitkään animaatiot ja taustaäänet korvaa. Koristeita voi kyllä aina lisätä myöhemminkin.

Älä laita keskeneräisiä sivuja verkkoon. Kun alat laatia sivustoa tai vaikka yksittäistä sivua tee suunnitelma etukäteen. Kaoottisen sivuvalikoiman järjestäminen jälkeenpäin on työlästä. Pahimmassa tapauksessa joku toinen joutuu muuttamaan kokonaisuutta, josta edes sinä itse et saisi enää selvää.

Luettavuus

Enempi on mualimoo ku ikkunasta näkkyy.

Sivujen pitäisi toimia jollain lailla kaikilla selaimilla. Vaikka jokainen selain esittää koodin hieman eri tavalla, vähimmäisvaatimus on, että sivua pystyy katselemaan ja sivustossa voi liikkua. Älä käytä selainkohtaisia HTML-komentoja vaan pysy tiukasti standardissa.

Jos yksittäisestä sivusta tulee suuri, jaa se pienempiin osiin. Joskus on kuitenkin perusteltua julkaista laaja kokonaisuus, kuten käyttöopas, yhdellä sivulla. Silloin lukija voi helposti hyödyntää selaimen tekstihakutoimintoa ja halutessaan vaikka tallentaa sivun omalle koneelleen.

Varmista, että sivu on luettavissa vaikka ikkunan kokoa tai näytön erotuskykyä muutetaan, erityisesti jos käytät rinnakkaista asettelua. Et voi tietää, millaisella näytöllä tai minkä kokoisessa ikkunassa sivuasi luetaan. Älä sijoita sivuille leveitä taulukoita tai kuvia. Kaikkein epämiellyttävintä on joutua vierittämään tekstiä vaakasuunnassa. Tekstin palstoitus on tahallista kiusantekoa.

Ulkoasu

Parempi suora ja sillee ku rumasti ruusattu.

Tutustu tietokoneiden värijärjestelmiin. Räikeillä väreillä varmistat vain, ettei kukaan viitsi katsella sivujasi pitkään. Kun suunnittelet sivuston ulkoasua, perustaksi riittää kolme tai neljä väriä. Suunnittele ulkoasu aiheen ja todennäköisen yleisön tottumusten pohjalta: hevibändin fanisivujen värimaailma on toisenlainen kuin morsiuspukuliikkeen tai ruokakaupan sivujen. Erityisesti leipätekstin pitää olla helppolukuista: emme mahda mitään sille, että musta teksti valkoisella pohjalla erottuu parhaiten.

Kuvien lataaminen on aina hidasta. Pidä kuvat pieninä. Älä laita isoja kuvia sivun alkuun tai lukija peruuttaa sivultasi ennen kuin on nähnyt edes otsikon. Jos välttämättä haluat laittaa saataville jättikokoisen täysvärikuvan, sijoita se linkin taakse ja laita näkyviin pienennös kuvastasi. Silloin selaaja voi valita, katsooko täysikokoista kuvaa vai ei. Jos käytät taustakuvia, pidä huolta, etteivät ne haittaa tekstin lukemista.

Matki

Ei köyhän laina kauvas kerkee.

Tutki paljon erilaisia ja eri tarkoituksiin tehtyjä WWW-sivuja ja mieti, mikä niissä toimii hyvin ja mikä huonosti. Ota kursailematta mallia hyvinä pitämistäsi sivuista. Ajan myötä sulatat lainat omaan tyyliisi niin, ettet enää tiedä, mitä olet kopioinut ja mitä keksinyt itse. Salli itsellesi myös oikeus muuttaa mieltäsi ja mieltymyksiäsi.

Älä kuitenkaan kopioi tekstiä tai kuvia suoraan toisten sivuilta. Tekijänoikeudet pätevät verkossakin. Netissä on myös paljon sellaista materiaalia, joka on vapaasti kopioitavissa, mutta siltikin kannattaa ensin miettiä, voisitko helposti tehdä vastaavan itse. Yksityishenkilön kotisivu on kuin äitienpäiväkortti: itse tuherrettu on arvokkaampi kuin kaupan hyllyltä nypätty.

Tehtävä: Arvostele muiden sivuja

Kehykset

- Nykyään voi näköjään pistää kehyksiin mitä roskaa vaan.
- Anteeksi, katsotte peiliin.

HUOM! Kehysten käyttö on vanhentunuttta tekniikkaa. Kehykset haittaavat sivujen mobiilikäyttöä ja sulkevat ulos käyttäjäryhmiä (esim. näkövammaiset). Tämä luku on mukana historiallisista syistä, koska joillakin sivustoilla kehyksiä vielä näkee. Käytä mieluummin lohkoja ja tyylimäärityksiä. Tehtävän voi tehdä ylimääräisenä harrastustehtävänä. Tavoitteena on ymmärtää, miten kehykset toimivat ja miksi niitä ei kannata käyttää.

Selaimen ikkuna voidaan jakaa kehyksiin, joihin jokaiseen ladataan jokin HTML-sivu. Kehysten määrittelyjä varten tehdään oma HTML-tiedosto. <frameset>-rakennemäärittelee kehyssarjan asetukset. Useita <frameset>-rakenteita voi laittaa sisäkkäin. Komento <frame> määrittelee yksittäisen kehyksen asetukset.

Tutki esimerkkikoodia ja selvitä

miksi <frameset>-määrityksessä on sekä border- että frameborder-tarkenne
mihin src-, name-, target- ja scrolling-tarkenteita tarvitaan
mihin <noframes>-rakennetta tarvitaan

<html>

<head>
<title>Kaikkea kaikille</title>
</head>

<frameset framespacing="0" border="0" frameborder="0"cols="200,*">
<frame src="sisus.php" name="sisus"target="teksti" scrolling="auto">
<frame src="johdanto.php" name="teksti"scrolling="auto">
<noframes>
<body>
<h1>Kaikkea kaikille</h1>
<p><a href="sisus.php">Siirry sisällysluetteloon.</a></p>
</body>
</noframes>
</frameset>

</html>

Kehyksillä tavallisesti erotetaan sisällysluettelo tai valikko varsinaisesta asiasta. Sivuston ylläpito on helppoa, kun valikkoa ja muita pysyviä elementtejä ei tarvitse lisätä ja muuttaa erikseen jokaisella sivulla. Tämän voi toteuttaa ilman kehyksiäkin esimerkiksi PHP-ohjelmointikielellä..

Sivuston lukijalle tulee ongelmia, jos hän ei tulekaan sivustolle pääsivun kautta vaan esimerkiksi hakupalvelun linkistä. Silloin hän ei välttämättä näe kehysten kokonaisuutta vaan vain yksittäisen kehyksen sisällön. Siksi pitäisi huolehtia siitä, että jokaiselta sivulta on linkki ainakin sivuston aloitussivulle tai sisällysluetteloon. Parempi vaihtoehto kehysten käytölle ovat loogiset lohkot.

Kehykset vaikuttavat myös selaimen toimintaan; esimerkiksi Takaisin-painike ei toimi samalla tavalla kuin kehyksettömillä sivuilla. Selain ei myöskään näytä osoiterivillä sen sivun osoitetta, jossa lukijan etsimä tieto on, vaan kehystiedoston osoitteen.

Tehtävä

Laadi kehysten määrittelyyn HTML-tiedosto, joka jakaa selainikkunan kolmeen kehykseen:

20 % valikko	tehtävät
Nimesi, korkeus 80 px

Tarvitset kaksi <frameset>-määritystä sisäkkäin, ensimmäisen jakaaksesi ikkunan kahteen riviin ja toisen jakaaksesi ylemmän rivin sarakkeisiin.

Laadi valikkotiedosto, josta voi valita, mikä tekemistäsi tehtävien ratkaisuista latautuu viereiseen kehykseen.

Vektorigrafiikka

Vektorigrafiikka tarkoittaa kuvia, joissa osat määritellään matemaattisina lauseina. Kuviot voivat koostua esimerkiksi ympyröistä, suorakulmioista ja monikulmioista. SVG (Scalable Vector Graphics) on vektorikuvien kuvailukieli, joka muistuttaa rakenteeltaan tuttua HTML:ää.

Koska vektorikuva ei koostu kuvapisteistä, se on skaalautuva eli sen laatu ei kärsi koon muuttamisesta ja sen pystyy esittämään erilaisilla näyttölaitteilla ja tulosteissa. Lisäksi vektorikuva vie paljon vähemmän säilytystilaa ja siirtokapasiteettia kuin rasterikuva. Esimerkiksi ympyrää ei määritellä luettelemalla jokainen siihen kuuluva piste vaan pelkästään ilmoittamalla mitat (x- ja y-koordinaatti sekä säde, siis vain kolme lukua).

Mikäli tässä ei näy kuvaa (merimaisema) tarvitset jonkin SVG:n esittamiseen tarkoitetun apuohjelman. Jos kuva näkyy, kokeile, miten voit lähentää ja loitontaa kuvaa. Vaikuttaako zoomaus kuvan tarkkuuteen?

vene.svg
Tutki kuvan lähdekoodia ja selvitä, mitä komennot tekevät.

Peruskäsitteitä

Jos teet jotakin, tee se hyvin. Jos taas et osaa tai et halua tehdä työtäsi hyvin, on parempi ettet tee sitä ollenkaan.
Leo Tolstoi

Kokosin tähän keskeisimpiä käsitteitä, joita tässä kurssissa joudumme käyttämään. Usein näitä sanoja käytetään uuraasti ajattelematta sen tarkemmin niiden sisältöä.

Hyperteksti: Teksti, joka sisältää viittauksia eli linkkejä toiseen tekstiin tai saman tekstin eri osaan. Idea on tuttu tietosanakirjoista, joiden artikkeleissa on usein viittauksia saman kirjan toisiin hakusanoihin. Hypertekstin perusideana on mahdollisuus liikkua tekstissä vapaasti omien päähänpistojen mukaan tarvitsematta kahlata sitä järjestyksessä A:sta Ö:hön.
Multimedia: on esitys, jossa on yhdistetty tekstiä, kuvaa ja ääntä.
Hypermedia: yhdistää multimediaan hypertekstin verkkorakenteen. Hypermediasta aletaan mielellään puhua heti, kun tekstin joukkoon saadaan lisättyä yksi vipattava animaatio. Kuitenkin sen olennaisin piirre on vuorovaikutteisuus.
Internet: Internet on kymmenien tuhansien yhteen liitettyjen tietokoneverkkojen kokonaisuus. Koulumme tietokoneet on yhdistetty toisiinsa lähiverkoksi. Kun laajat tietoverkot yhdistetään toisiinsa yhä suuremmiksi ryhmiksi ne muodostavat lopulta kokonaisuuden, jota kutsutaan internetiksi. Kukaan ei omista eikä valvo internetiä, vaan jokainen aliverkko vastaa omasta hallinnoinnistaan. (Kielitoimisto suosittelee kirjoittamaan internetin pienellä alkukirjaimella, koska verkkokokonaisuuksia voi olla useita.)
WWW (World Wide Web): Hypermediapohjainen palvelujärjestelmä, joka on suunniteltu helpottamaan internetissä liikkumista. Vaikka WWW kattaa koko Internetin, se on silti vain sen osa. WWW-sivuja nimitetään kotisivuiksi, siitä tämän kurssin nimi. Joskus kotisivulla tarkoitetaan sivuston pääsivua.
HTML (Hypertext Markup Language): Asiakirjojen kuvauskieli, jolla suurin osa WWW-sivuista on suunniteltu. HTML kuvaa selainohjelmalle tekstin rakenteen: missä on otsikoita, kuvia, linkkejä, korostettua tekstiä
CSS (Cascaded Style Sheets, porrastetut tyyliarkit): Porrastetuilla tyyliarkeilla määritellään WWW-sivujen ulkoasu. Niiden avulla on helppo määritellä laajoillekin sivustoille yhtenäinen muoto. Kun ulkoasu ja asiakirjojen rakenne ovat erillään, sivujen ylläpito on helpompaa ja HTML-koodi on yksinkertaista ja nopeasti latautuvaa.
DHTML (Dynamic HTML): Tekniikka, joka mahdollistaa HTML-asiakirjan sisällön muuttumisen ilman että sivua tarvitsee ladata uudelleen. HTML:ään yhdistetään esimerkiksi Javascript-koodia ja tyylimäärityksiä, joiden tulokset näkyvät käyttäjälle tietyn ajan kuluttua tai vastauksena tämän valintoihin.
Tag: Tunniste eli HTML-kielen komentokoodi.

Tehtävä

1. Kopioi luettelo uuteen tiedostoon sanoja.html. Käytä luettelon sanoja hakusanoina ja täydennä tässä annettuja lyhyenlaisia kuvauksia.

Käytä seuraavaa rakennetta:

<dl> <!––Määritelmäluettelo alkaa––>
<dt>Määriteltävä asia</dt>
<dd>Pitkä ja kattava selitys</dd>
<dt>Toinen avainsana</dt>
<dd>Toinen lavea selitys</dd>
<dl><!––Määritelmäluettelo päättyy––>

2. Etsi internetistä HTML-tiedostojen kirjoittamiseen tarkoitettuja työkaluja. Kirjaa ohjelman nimi ja ohjelman esittelysivun osoite. Katso myös, voiko toimivan ohjelman taikokeiluversion imuroida ja paljonko täydellinen versio maksaa. (Kokeile useita erihakusanoja.)

Pikakertaus

`<html>`	Asiakirja alkaa
`<head>`		Tietoja selainohjelmalle
`<title>`Sivun otsikko`</title>`	Sivun otsikko näkyy selaimen otsikkorivillä
`<link rel="stylesheet" type="text/css" href="`tyyliarkin osoite`">`	Tyyliarkin osoite määrittää sen nimen ja paikan hakemistopuussa. Tyyliarkilla määrätään sivun ulkoasu.
`</head>`
`<body>`		Asiakirjan sisältö: tekstit, otsikot, kuvat, taulukot, luettelot
`<h1>`Pääotsikko`</h1>`	Otsikkotasot numeroidaan 1...6
`<h2>`Alaotsikko`</h2>`	Otsikkotasot numeroidaan 1...6
`<p>`Tekstikappale`</p>`	Kappalekomentoja ei voi jättää pois. Muista myös lopetuskomennot!
`<a href="`linkin osoite`">`Linkkiteksti`</a>`	Linkin osoite kertoo täsmälleen, mihin tiedostoon linkki viittaa (esim. http://www.firma.com/hinnasto.php). Linkkiteksti näkyy sivun lukijalle sinisenä ja alleviivattuna. Myös kuva voi toimia linkkinä.
`<img src="`kuvan osoite`" width="`leveys`" height="`korkeus`" alt="`teksti`">`	Kuvan osoite määrittää kuvatiedoston nimen ja paikan hakemistopuussa. Leveys ja korkeus ovat lukuja (kuvapisteiden lukumäärä näytöllä). Alt-teksti näkyy, jos kuva ei lataudu.
`</body>`
`</html>`	Asiakirja päättyy

Lue myös WWW-sivujen toteuttaminen esteettömästi.