WWW-sivujen tekeminen

WWW-julkaisemisen perusteet

Internetin käytetyin osa, World Wide Web (WWW), koostuu WWW-sivuista. WWW-sivuja on yrityksillä, oppilaitoksilla, yksityisillä ihmisillä jne. WWW-sivut eivät ole vaikeita tehdä, helpoimmillaan niitä voi tehdä lähes tekstinkäsittelyn tavoin. Tässä luvussa opiskellaan periaatteet myös "ammattimaisemmasta" WWW-julkaisemisesta, eli WWW-sivujen tekemisestä koodia kirjoittamalla. Rinnalla käydään läpi myös WWW-sivujen tekemistä "tekstinkäsittelyn tapaan". Itse tekemiään WWW-sivuja voi katsoa omalta tietokoneelta. Jotta sivut näkyisivät Internetissä, tarvitaan palvelintilaa WWW-sivuille, jota tarjoavat useat firmat, muun muassa teleoperaattorit. Usein Internet-yhteyden mukana tulee jo valmiiksi tietyn verran tilaa kotisivuille. Nykyään useat firmat (esimerkiksi Nettihotelli.fi) tarjoavat melko edullisesti myös nettihotellipalveluita. Niissä saa usein WWW-sivujen palvelintilan lisäksi sivut omaan domainiin, jolloin sivujen WWW-osoitteeksi voi valita esimerkiksi www.etunimisukunimi.net.

WWW-sivuja voi tuottaa HTML-kielellä (HyperText Markup Language) tai XHTML-kielellä (The Extensible HyperText Markup Language). Molemmat ovat kuvauskieliä WWW-sivujen tuottamiseen. Suurin ero kielissä on se, että XHTML täyttää XML:n (Extensible Markup Language) muotovaatimukset ja on näin ollen hiukan monikäyttöisempi, mutta samalla myös standardeiltaan tiukempi. HTML-kielestä on parhaillaan viimeistelyvaiheessa uusi versio, HTML5. Viralliseksi versioksi se vahvistunee vasta vuonna 2014, mutta jo nyt sitäkin voi siis käyttää. Tällä hetkellä onkin lähinnä makuasia, tekeekö sivut HTML5- vai XHTML-kielellä. Viimeistään HTML5-kielen lopullisen valmistumisen jälkeen viisainta on siirtyä käyttämään sitä. Perusperiaatteet molemmissa kielissä ovat täysin samat, joten kun toisen kielen osaa, on erittäin helppo siirtyä myös toiseen kieleen. Tässä oppimateriaalissa esimerkeissä käytetään XHTML-kieltä ja sen versiota 1.0 Strict.

Useasti WWW-sivuista puhutaan yleisnimellä HTML-sivu riippumatta siitä, onko sivu HTML- vai XHTML-pohjainen. Normaali WWW-selailija ei käytettyä kuvauskieltä pysty edes huomaamaan lukematta sivun koodia. WWW-sivujen tiedostopäätteeksi tulee joko html tai htm. Tiedostonimessä ei saa olla ääkkösiä, erikoismerkkejä tai välilyöntejä, sillä ne voivat aiheuttaa ongelmia sivujen selailussa joillakin selaimilla. Myös kyseisistä tiedostoista puhutaan usein yleisnimellä HTML-tiedosto riippumatta siitä, onko tiedosto HTML- vai XHTML-koodia. WWW-sivuja voidaan katsella millä tahansa Internet-selaimella. Dynaamisten WWW-sivujen (sivujen sisältö voi riippua käyttäjien toiminnoista) luomiseksi tarvitaan HTML:n tai XHTML:n lisäksi WWW-käyttöön soveltuvia ohjelmointikieliä. Näitä kieliä ovat esimerkiksi JavaScript, PHP, ASP ja Perl, mutta niihin ei perehdytä tässä oppimateriaalissa.

Ohjelmana WWW-sivujen tekemisessä voi käyttää periaatteessa mitä tahansa tekstieditoria. Tässä luvussa käytämme ohjelmana ilmaista Amaya-ohjelmaa (versio 11.4.4). Amayan voi ladata itselleen verkosta osoitteesta: http://www.w3.org/Amaya/. Amayan suomennos on paikoin hiukan kömpelö, mutta muuten ohjelma on pätevä WWW-sivujen tuottamiseen. Amayalla voi tuottaa WWW-sivuja joko itse koodia kirjoittamalla tai vaihtoehtoisesti "tekstinkäsittelyn tavoin" valikkokomentojen avulla.

Amayan käytön perusteet

Amayan perustoiminnoissa pätevät samat ohjelmien käytön yleiset ohjeet, joita käytiin läpi luvussa Tietotekniikan perusteet -> Ohjelmat. Myös leikepöytä ja pikanäppäimet toimivat Amayassa muiden Windows-ohjelmien tapaan. Seuraavassa kuvassa esitetään Amayan perusnäkymä.

Kuva: Amaya-ohjelman perusnäkymä jaetussa näkymässä

Amayassa näkymät ovat tärkeässä osassa WWW-sivuja tehdessä. Oletuksena Amayassa näkyy vain normaalinäkymä koko ikkunassa. Normaalinäkymässä sivu näkyy kuten selaimet sen näyttäisivät, joten näkymää voi pitää eräänlaisena esikatseluna. Normaalinäkymässä sivua voi kuitenkin myös muokata lähes tekstinkäsittelyn tavoin. Eri elementtejä ja muotoiluja voi lisätä sivulle tekstinkäsittelyn tapaan valikoista ja työkaluriveiltä.

Tehokkaammin Amayaa voi käyttää jaetun näkymän avulla. Siinä ikkuna jaetaan kahteen näkymään joko vaakasuuntaisesti tai pystysuuntaisesti. Tavasta riippuen joko ylemmässä tai vasemmanpuoleisessa näkymässä näkyy aina normaalinäkymä. Toisen näkymän voi itse valita Näytä-valikon (Views) kautta. Toiseksi näkymäksi on usein parasta valita lähdekoodinäkymä, jolloin näkee kerralla sekä sivun esitystavan selaimessa että sivun lähdekoodin.

Jaetun näkymän saa päälle valitsemalla Näytä-valikosta (Views) joko Split view horizontally tai Split view vertically riippuen siitä, haluaako ikkunan jakaa vaaka- vai pystysuunnassa. Tämän jälkeen toisessa näkymässä pysyy normaalinäkymä ja toiseen tulee joku vaihtoehtoinen näkymä. Esimerkiksi lähdekoodinäkymän vaihtoehtoiseksi näkymäksi saa valinnalla Näytä | Näytä lähdekoodi (Views | Show source).

Kumpaankin näkymään on mahdollista tehdä muokkauksia. Normaalinäkymässä muokkaukset tehdään siis tekstinkäsittelyn tapaan valikkoja ja työkalurivejä hyväksi käyttäen, kun taas lähdekoodinäkymässä kirjoitetaan itse koodia. Näkymät päivittyvät ajan tasalle (eli esimerkiksi normaalinäkymässä tehty muokkaus tulee näkyviin lähdekoodinäkymään ja päinvastoin) aina klikattaessa hiirellä sitä näkymää, jota ei parhaillaan muokata, tai tallennettaessa sivu. Sivu kannattaakin tallentaa usein.

Kuva: Uuden WWW-sivun luominen Amayassa

Uuden WWW-sivun luominen tapahtuu Amayassa seuraavasti:

• Valitse Tiedosto | Uusi | Uusi dokumentti (File | New | New document).
• Avautuvassa ikkunassa valitse dokumentin tallennushakemisto ja tiedostonimi, merkistö (Charset) ja profiili (Document profile). Merkistöksi oikea valinta on iso-8859-1 ja profiiliksi XHTML Strict (kun käytetään XHTML-kieltä.
• Kirjoita lisäksi sivulle haluamasi otsikko (Title).
• Asetusten ollessa kunnossa klikkaa Luo (Create), jolloin uusi tyhjä sivu avautuu.

Jatkossa tässä oppimateriaalissa keskitytään ohjeistamaan, miten WWW-sivuja tehdään ja muokataan lähdekoodia kirjoittamalla. Mikään ei kuitenkaan estä tekemästä ja muokkaamasta sivuja myös normaalinäkymässä. Molemmilla tavoilla lopputuloksen pitäisi olla samanlainen. Esimerkiksi toisen tason otsikon (h2-elementti) lisääminen eri tavoilla tapahtuisi seuraavasti (samalla idealla mahdollista lisätä mitä tahansa elementtejä):

• Normaalinäkymässä: Kirjoitetaan otsikon teksti haluttuun kohtaan sivulla ja maalataan teksti hiirellä. Tämän jälkeen valitaan Amayan ohjelmaikkunan oikean laidan XHTML-elementtivalikosta h2-elementti () ja otsikko on valmis.
• Lähdekoodinäkymässä: Kirjoitetaan koodiin haluttuun väliin koodi <h2>Tähän otsikon teksti</h2> ja otsikko on valmis. Koodissa kohtaan Tähän otsikon teksti kirjoitetaan luonnollisesti otsikoksi haluttava teksti.

WWW-sivun (XHTML) rakenne

Seuraavissa kappaleissa kerrotaan, millainen on XHTML-sivun rakenne lähdekoodipuolella. Esimerkeissä käytetään XHTML 1.0 Strict määrityksiä, jotka ovat tällä hetkellä paljon käytössä olevia XHTML-sivujen määrityksiä. Niiden avulla WWW-sivusta saadaan validi, jolloin Internet-selaimet osaavat näyttää sivun varmasti oikein.

Elementit:

XHTML-dokumentti koostuu tekstistä, jossa merkitään dokumentin rakenne elementeillä (tageilla), jotka kirjoitetaan < > -merkkien väliin. Esimerkiksi ensimmäisen tason otsikko merkattaisiin seuraavasti: <h1>. Elementeillä on aina aloitus- ja lopetustagi, joiden välissä on varsinainen elementin sisältö. Esimerkiksi edellä mainitun otsikon tapauksessa sisältö esitettäisiin seuraavasti: <h1>Tieto- ja viestintätekniikka<h1>. <h1> on aloitustagi. Vastaavasti </h1> on lopetustagi. Lopetustagissa on aina /-merkki.

Jos elementillä ei ole sisältöä, niin lopetustagi lyhennetään suoraan aloitustagiin. Esimerkiksi pakotetun rivinvaihdon tapauksessa merkittäisiin: <br />. Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä, sarkaimia ja rivinvaihtoja. Niillä ei ole merkitystä elementin sisällön ulkoasuun. Jos siis esimerkiksi halutaan tekstiin enemmän kuin yksi välilyönti peräkkäin, täytyy ylimääräiset välilyönnit koodata erikoismerkeillä (esimerkiksi välilyönnin koodi on &nbsp;).

Attribuutit:

Elementeillä voi olla ominaisuuksia eli attribuutteja, joilla määritellään elementtiin liittyviä ominaisuuksia. Esimerkiksi kuvan tapauksessa kuvan osoite, kuvan vaihtoehtoinen teksti ja kuvan otsikko määritellään img-elementtiin (kuva) tulevilla src (kuvan osoite), alt (kuvan vaihtoehtoinen teksti) ja title (kuvan otsikko) -attribuuteilla seuraavasti: <img src="kuvat/kuva.jpg" alt="Kuva tietokoneesta" title="Tietokone" />. Attribuutin arvo siis syötetään lainausmerkkeihin = -merkin jälkeen. Ominaisuuksien lukumäärää ei ole rajoitettu.

Eräs paljon käytetty attribuutti on style, jolla voidaan antaa XHTML-elementeille tyylimäärityksiä CSS-tyylikielellä (CSS = Cascading Style Sheets). Esimerkiksi tekstikappaleen (p-elementti) väri määrättäisiin punaiseksi ja tekstin tasaus oikeaan reunaan seuraavasti style-attribuutin avulla: <p style="color: red; text-align: right">Esimerkkitekstiä</p>. Esimerkistä huomataan, että style-attribuutille voi antaa kerralla useita eri tyylimäärityksiä. Eri tyylimääritykset tulee erotella toisistaan puolipisteellä.

Pakolliset elementit ja attribuutit:

Jokaisella XHTML-sivulla on pakollisia elementtejä ja attribuutteja. Seuraavassa on kuvattuna kehystettynä tyhjän XHTML-sivun koodi, eli jokaisella XHTML-sivulla pitää olla vähintään nämä rivit. Koodiesimerkin jälkeen selvennetään eri koodirivien merkitystä.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<title>Tähän sivun otsikko</title>
</head>
<body>
Tähän sivun sisältö
</body>
</html>

• Xml-elementti kertoo käytetyn XML-standardin version.
• Encoding-ominaisuus määrittelee käytetyn merkistön.
• DOCTYPE-elementti kertoo käytetyn dokumenttityypin.
• Xmlns-attribuutti kertoo elementtien nimiavaruuden.
• Xml:lang-attribuutti kertoo käytetyn oletuskielen.

Muiden koodirivien merkitys selviää luvussa Tarvittavia XHTML-elementtejä.

Kuten tämän luvun alussa todettiin, XHTML:n erot HTML5-kieleen eivät ole merkittäviä. Vertailun vuoksi tyhjän HTML5-sivun koodi näyttää seuraavanlaiselta:

<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="iso-8859-1">
<title>Tähän sivun otsikko</title>
</head>
<body>
Tähän sivun sisältö
</body>
</html>

Kokonainen WWW-sivusto

Esimerkiksi jonkun firman tai yksityisen henkilön Internet-sivut koostuvat erittäin harvoin vain yhdestä HTML- tai XHTML-sivusta. WWW-sivusto rakennetaankin tekemällä useita HTML- tai XHTML-sivuja, joista viitataan toisiin sivuihin linkeillä (a-elementti). Sivuston pohjalle on järkevää luoda myös hakemistorakenne, eli kaikki sivut eivät sijaitse samassa hakemistossa, vaan loogisesti jaoteltuina eri hakemistoihin. Hakemistorakenteen luonnissa voi käyttää samoja periaatteita kuin Resurssienhallinnassa kansioita luodessa (katso tämän oppimateriaalin luku Resurssienhallinta ja leikepöytä). Myös kuvat kannattaa sijoittaa omaan hakemistoonsa. Eri hakemistoihin ja hakemistoissa sijaitseviin tiedostoihin viittaaminen tapahtuu seuraavalla periaatteella:

• Absoluuttiseen viittaukseen merkitään viitattavan kohteen koko Internet-osoite. Sitä kannattaa käyttää vain oman sivuston ulkopuolelle menevissä viittauksissa.
• Suhteellisella viittauksella viitataan mihin tahansa oman sivuston hakemistoon tai tiedostoon seuraavilla periaatteilla:
  • "etusivu.html" viittaisi saman hakemiston etusivu.html-tiedostoon.
  • "kuvat/" viittaisi saman hakemiston kuvat-nimiseen alihakemistoon (oletuksena hakemistosta näytettäisiin sivu index.html, jos sellainen löytyisi).
  • "kuvat/logo.jpg" viittaisi saman hakemiston kuvat-alihakemistossa olevaan logo.jpg-tiedostoon.
  • "../" viittaisi isähakemistoon (hakemisto, jossa aktiivinen hakemisto sijaitsee).
  • "../sivut/" viittaisi isähakemistossa sijaitsevaan sivut-nimiseen alihakemistoon.
• Suhteellisten viittausten hyötyjä ovat viittausten toimivuus millä tahansa palvelimella ja viittausten pituus (ovat lyhempiä kuin absoluuttiset viittaukset).

Tarvittavia XHTML-elementtejä

Seuraavassa taulukossa kuvataan yleisimmät elementit (tagit), joita tarvitaan XHTML-sivuja luodessa. XHTML-elementin merkitys -sarakkeessa kerrotaan, mihin ja miten kyseistä elementtiä käytetään.

Muotoilujen tekeminen

Seuraavassa taulukossa kuvataan usein tarvittavien muotoilujen tekeminen XHTML-sivulla. Toteutus-sarakkeessa kerrotaan, miten ja millä elementeillä kyseinen muotoilu toteutetaan. Esimerkki-sarakkeessa on koodiesimerkkejä kyseisen muotoilun tekemisestä.

Koodiesimerkkejä

Seuraavassa esitetään esimerkkejä eri WWW-sivuilla usein tarvittavista XHTML-elementeistä (tekstikappaleet, otsikot, taulukot, listat, linkit, kuvat, jne.) ja niiden muotoiluista CSS-tyylimääritysten avulla. Jokaisessa esimerkissä näkyy koodipätkä ja se, miltä kyseinen koodipätkä näyttää Internet-selaimessa. Eri selaimissa voi olla pieniä eroja.

Koodeissa eri osia (elementit, attribuutit, näkyvä teksti jne.) on havainnollistettu eri väreillä. Sinisellä värillä on kuvattu elementit ja attribuutit, vihreällä värillä attribuuttien arvot (esim. tyylimääritykset) ja mustalla värillä sivulle näkyviin tuleva teksti. Näiden koodiesimerkkien perusteella pystyy jo luomaan hyvin monipuolisiakin XHTML-sivuja. Jokaisen koodiesimerkin perässä on linkki, jota klikkaamalla selaimeesi aukeaa uusi sivu tai välilehti, jossa voit editoida kyseistä koodia ja näet heti, miten editointi vaikuttaa sivuun.

Kuva ja teksti rinnakkain sivulla, marginaali sekä kappaleen sisäinen muotoilu:

Editoi koodiesimerkkiä
(avautuu uuteen ikkunaan/välilehteen)

Taulukko reunaviivoilla ja solujen keskityksellä:

Editoi koodiesimerkkiä
(avautuu uuteen ikkunaan/välilehteen)

Kaksitasoinen lista ja lihavointi:

Editoi koodiesimerkkiä
(avautuu uuteen ikkunaan/välilehteen)

Tekstikehys, sisäreunus, leveys sekä kursivointi:

Editoi koodiesimerkkiä
(avautuu uuteen ikkunaan/välilehteen)

Otsikot linkkeinä sekä fonttimuotoilut:

Editoi koodiesimerkkiä
(avautuu uuteen ikkunaan/välilehteen)

h2 {
  font-family: Georgia;
  color: blue;
  background-color: yellow;
  text-align: center;
}
.vasen {
  float: left;
  margin: 2em;
  border: 1px solid black;
}

<p class="vasen">Tekstikappaleen teksti</p>

<link rel="StyleSheet" href="tyylitiedoston_nimi.css" type="text/css" />

Lisätietoa

HTML-tiedoston validisuuden tarkistaminen:

WWW-sivuja tehdessä koodiin voi helposti tulla virheitä. Esimerkiksi tietyn elementin lopputagi voi unohtua melko helposti. WWW-sivun "kieliopin" oikeellisuuden eli validisuuden voi onneksi tarkistaa helposti Internetissä olevan palvelun (validaattorin) avulla. Tarkistaminen tapahtuu seuraavasti:

• Mene WWW-osoitteeseen http://validator.w3.org/.
• Syötä sen WWW-sivun WWW-osoite, jonka validisuuden haluat tarkistaa, kohtaan Address ja paina painiketta Check. Voit myös ladata tiedoston tarkistettavaksi omalta koneeltasi, se tapahtuu välilehden Validate by File Upload kautta.
• Hetken kuluttua avautuu WWW-sivu, joka kertoo englanniksi oliko sivullasi virheitä. Validaattori kertoo virheiden lukumäärän ja sen, millaisia mahdolliset virheet ovat.
• Saadun informaation perusteella pystyt tarvittaessa korjaamaan WWW-sivusi validiksi. Tarkista korjausten jälkeen sivusi validaattorilla vielä uudestaan.

Kuva: Validaattori on tarkistanut sivun

Edellä mainittu validaattori tarkistaa sivun HTML-koodin, eikä se puutu mahdollisiin CSS-tyylivirheisiin. Niiden tarkistamiseen on myös oma validaattori Internetissä, jolla tarkistaminen tapahtuu seuraavasti:

• Mene WWW-osoitteeseen http://jigsaw.w3.org/css-validator/.
• Syötä sen WWW-sivun WWW-osoite, jonka tyylimääritysten validisuuden haluat tarkistaa, kohtaan Address ja paina painiketta Check. Voit myös ladata tiedoston tarkistettavaksi omalta koneeltasi, se tapahtuu välilehden By File Upload kautta. Jos olet tehnyt tyylimääritykset erilliseen CSS-tyylitiedostoon, voit syöttää WWW-osoitteeksi myös kyseisen tiedoston osoitteen tai ladata kyseisen tiedoston omalta koneeltasi tarkistettavaksi.
• Hetken kuluttua avautuu WWW-sivu, joka kertoo englanniksi oliko sivusi tyylimäärityksissä virheitä. Validaattori kertoo virheiden lukumäärän ja sen, millaisia mahdolliset virheet ovat.
• Saadun informaation perusteella pystyt tarvittaessa korjaamaan sivusi tyylimääritykset validiksi. Tarkista korjausten jälkeen tyylimäärityksesi validaattorilla vielä uudestaan.