WWW-julkaiseminen - Luento 12

Luennolla käsitellään WWW-julkaisemista eli opetellaan perusteet HTML/XHTML-dokumenttien tuottamisesta. Esimerkkiohjelmana käytetään Amayaa. WWW-sivun ulkoasun muotoilu käsitellään myöhemmillä luennoilla.

Dokumenttityypeistä

Word tallentaa omassa tiedostomuodossaan XHTML-editori tallentaa tekstinä

Wordin tallentamaa tiedostoa pystyy yleensä tulkitsemaan vain ohjelma itse
Word tekee tiedostoon merkintöjä
- Rakenteen merkitsemiseksi
- Ulkoasun määrittämiseksi
- Automaattisia kenttiä varten
WWW-sivua voivat tulkita useat erilaiset selaimet (esim. graafiset selaimet, kännykkäselaimet, ääniselaimet, tekstiselaimet jne.)
- On oltava yhteisiä pelisääntöjä miten WWW-dokumentteja kirjoitetaan.
- On keskityttävä sisällön jälkeen rakenteen merkitsemiseen ja vasta sitten ulkoasuun.
WWW-sivu on pelkkää tekstiä
- Rakenteen merkinnät on kirjoitettava itse
- Merkintöjen kirjoittamiseen on tarkat säännöt (kielioppi), jonka määrittää dokumenttityyppi

Kuka määrittää miten sivuja tehdään?

W3C ( World Wide Web Consortium )

W3C tuottaa spesifikaatioita, ohjeita, ohjelmia ja työkaluja WWW-sivujen yms. tuottamiseen. W3C:n jäseniä ovat kaikki suuret selainvalmistajat ja palveluntarjoajat.

Standardeista lyhyesti

HTML (HyperText Markup Language)

HTML on WWW:ssä käytettävien hypertekstidokumenttien rakenteen määrittelyyn tehty kieli.
XHTML (Extensible HyperText Markup Language)

XHTML on XML:n mukaan määritelty uusin suositus HTML-merkintäkielestä.
HTML5

HTML5 on vielä keskeneräinen uusittu versio HTML-merkintäkielestä
CSS (Cascading Style Sheets)

CSS on XML-dokumenttien ulkoasun muotoilemiseen käytetty kieli.

WWW-sivujen tekeminen

WWW-sivujen tekemisessä voidaan erottaa samat vaiheet kuin tekstinkäsittelydokumentin tekemisessä. Nämä vaiheet ovat:

Sisällön tuottaminen
Rakenteen merkitseminen
Ulkoasun määrittäminen

Editorit

WWW-sivuja voidaan tuottaa niihin erikoistuneilla ohjelmilla, jotka näyttävät suoraan miltä sivu näyttää selaimessa. Sivuja voidaan tuottaa myös kirjoittamalla suoraan XHTML-merkintäkieltä eli WWW-sivujen lähdekoodia.

XHTML-merkintäkieli ei kiinnitä millään tavalla dokumentin ulkoasua vaan ainoastaan dokumentin rakenteen.

Graafisia WYSIWYG (What You See Is What You Get) -editoreita on syytä välttää jos ei ymmärrä rakenteen ja ulkoasun eroa.

Amaya - vapaa, monipuolinen
BlueGriffon
<oXygen/> XML Editor
HTML-kit - tekstieditori

Rakenteen merkitseminen

XHTML-dokumentti on tekstiä, jossa merkitään dokumentin rakenne elementeillä, jotka kirjoitetaan <>-merkkien väliin. Esim. <title>.

Elementeillä on aina aloitus ja lopetus joiden välissä on varsinainen elementin sisältö. esim.

<title>Tietokone ja tietoverkot työvälineenä</title>

<title> on aloituselementti.

</title> on lopetuselementti. Lopetuselementissä on aina /-merkki

Jos elementillä ei ole sisältöä niin lopetuselementti voidaan lyhentää suoraan aloituselementtiin:

Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä tai rivinvaihtoja.

Tavallisimmista XHTML-elementeistä löytyy dokumentti opettelun tueksi.

http://appro.mit.jyu.fi/doc/www/xhtml/

Ominaisuudet eli attribuutit

Elementeillä voi olla ominaisuuksia eli attribuutteja, jotka määrittelevät jotakin elementtiin liittyviä asioita. Esim. hyperlinkin kohde määritellään a-elementtiin tulevalla href-attribuutilla:

<a href="http://www.jyu.fi/">Jyväskylän yliopisto</a>

Dokumentin on oltava hyvin muodostettu

Tuotetun dokumentin pitää olla hyvin muodostettu (engl. well-formed), ettei selaimien tarvitse tehdä tulkitsemisessa arvailuja. Eri elementit eivät siis saa mennä keskenään ristiin eikä lopetusosia saa unohtaa.

Väärin

<p>Tuotetun <strong>dokumentin pitää olla
 hyvin muodostettu
 (<em>engl. well-formed</em>).</p></strong>

Oikein

<p>Tuotetun <strong>dokumentin pitää olla
 hyvin muodostettu
 (<em>engl. well-formed</em>)</strong>.</p>

Dokumentin pitää olla validi

Dokumentin pitää olla myös validi (engl. valid) eli sen rakenne pitää olla jonkin dokumenttityypin mukainen. Dokumenttityyppi määrää mitä elementtejä voi käyttää, mitkä elementit saavat sijaita minkäkin elementtien sisällä ja mitä attribuutteja kuuluu millekin elementille jne.

XHTML 1.0 strict

Käytämme tällä kurssilla XHTML 1.0 strictiä

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML-dokumenttien tarkistamiseen eli validointiin on olemassa ns. HTML-validaattoreita.

Pelkillä www-selaimilla testaamiseen ei voi luottaa koska ne yrittävät hiljaisuudessa ohittaa käyttäjän tekemät virheet jonka tuloksena virheellinen dokumentti toimii kuun asennosta, auringonpilkuista ja käytetystä selaimesta riippuen ehkä joskus tai ei koskaan.

Hyvän XHTML-dokumentin runko

<?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" >

<head>
  <title>Tähän sivun otsikko</title>
  <link href="tahan_tyylintiedoston_nimi.css" rel="StyleSheet" type="text/css" />
</head>

<body>
  <h1>Tähän pääotsikko</h1>
  <p>Tähän tekstiä...</p>
</body>

</html>

xml-elementti kertoo käytetyn XML-standardin version. encoding-ominaisuus (engl. attribute) määrittelee käytetyn merkistön. iso-8859-1 tai iso-8859-15 ( €-merkki mukana) on pohjoismaissa käytettävä merkistö.
DOCTYPE-elementti kertoo käytetyn dokumenttityypin.
head-elementti sisältää kaiken dokumenttiin liittyvän metatiedon.
title-elementti sisältää jonkin hyvin dokumenttia kuvaavan otsikon. Otsikon pitää olla järkevä vaikka se otettaisiin erilleen koko dokumentista.
body-elementti sisältää kaiken varsinaisen WWW-sivulla näkyvän ja dokumentin runkoon kuuluvan informaation.
h1-elementti on korkeimman otsikkotason elementti. Jokaisella sivulla pitäisi aina olla vain ja ainoastaan yksi h1-elementti, joka kertoo koko dokumentin pääotsikon.
p-elementti merkitsee tekstikappaleen.

Amayassa uuden dokumentin voi aloittaa valinnalla File | New | XHTML Document. Valitse sopiva tallennushakemisto, anna tiedostonimeksi index.html ja dokumenttityypiksi XHTML Strict.

Dokumentin perusrakenne

Seuraavassa kuvassa on esitettynä dokumentin perusrakenne. Perusrakenteesta kannattaa huomata seuraavat asiat:

Dokumentissa kuuluu yleensä olla yksi ensimmäisen tason otsikko.
Otsikkotasojen pitää edetä loogisesti (ensimmäinen taso, jonka alla toinen taso).
Jokaisen otsikon jälkeen tulisi olla tekstikappale (ei heti toista otsikkoa).

Dokumentin rakenne puumaisena esityksenä

Amaya:ssa dokumentin rakenteen saa näkyviin View | Show structure.

Hyvä rakenne - otsikkotasot löytyvät Huono rakenne - ei otsikkotasoja ja liian syvä Xetor-ohjelman rakennenäkymä

XHTML:n elementit

Seuraavassa kaaviossa pyritään selventämään XHTML-elementtien suhdetta toisiinsa XHTML 1.1:ssä. Kaaviosta puuttuu hyvin paljon elementtejä ja kaavio ei ilmaise täysin elementtien välisiä riippuvuuksia.
XHTML-elementtien rakennekaavio

XHTML-elementtien rakennekaavio

Lohkotason elementit

Lohkotason elementtejä voi sijoittaa suoraan body-elementin sisään.

Useimmat lohkotason elementit voivat sisältää joko pelkkää tekstiä tai merkkitason elementtejä.

Otsikkoelementit - (h1 - h6)

<h1>Ensimmäisen tason otsikko</h1>

  <p>Tämä on tekstikappale</p>

<h2>Toisen Tason otsikko</h2>

  <p>Tämä on tekstikappale</p>

Amayassa otsikon saa valitsemalla kappaleen F2-painikkeella ja valitsemalla työkalupalkista H1, H2 tai H3.

Tekstikappale - p

<p>
  Tämä on tekstikappale
</p>
<p> Tämä on tekstikappale </p>

Amayassa kappaleesta saa tavallisen tekstikappaleen F2-painikkeella ja valikosta valinnalla XHTML | Paragraph (p).

Erilaiset listat

Listat ovat myös lohkotason elementtejä. Listojen sisään voi sijoittaa sekä merkkitason elementtejä että toisia lohkotason elementtejä

Amayassa listat saa maalaamalla halutut kappaleet ja valitsemalla työkalupalkista Bulleted List tai Numbered List. Tällöin kappaleista tulee listakohtia. Sisemmän listan saa luotua menemällä jonkin listakohdan loppuun, painamalla enteriä ja valitsemalla työkalupalkista uudelleen listarakenteen. Sisemmästä listasta pääsee ulompaan listaan painamalla useamman kerran enteriä.

Seuraavassa on esimerkkien avulla käsitelty järjestämätön ja järjestetty lista sekä määritelmälista.

Järjestämätön lista - ul

Järjestämättömän listan ensimmäinen alkio
Järjestämättömän listan toinen alkio
Järjestämättömän listan kolmas alkio
Järjestämättömän listan neljäs alkio

<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li>
  <li>Järjestämättömän listan toinen alkio</li>
  <li>Järjestämättömän listan kolmas alkio</li>
  <li>Järjestämättömän listan neljäs alkio</li>
</ul>

Järjestetty lista - ol

Järjestetyn listan ensimmäinen alkio
Järjestetyn listan toinen alkio
Järjestetyn listan kolmas alkio
Järjestetyn listan neljäs alkio

<ol>
  <li>Järjestetyn listan ensimmäinen alkio</li>
  <li>Järjestetyn listan toinen alkio</li>
  <li>Järjestetyn listan kolmas alkio</li>
  <li>Järjestetyn listan neljäs alkio</li>
</ol>

Sisäkkäiset listat

Järjestetyn listan ensimmäinen alkio
- Järjestämättömän listan ensimmäinen alkio
- Järjestämättömän listan toinen alkio
  1. Järjestetyn listan ensimmäinen alkio
  2. Järjestetyn listan toinen alkio
- Järjestämättömän listan kolmas alkio
Järjestetyn listan toinen alkio
Järjestetyn listan kolmas alkio
- Järjestämättömän listan ensimmäinen alkio
- Järjestämättömän listan toinen alkio
- Järjestämättömän listan kolmas alkio
  - Järjestämättömän listan ensimmäinen alkio
  - Järjestämättömän listan toinen alkio
- Järjestämättömän listan neljäs alkio

<ol>
<li>Järjestetyn listan ensimmäinen alkio
<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li>
  <li>Järjestämättömän listan toinen alkio
    <ol>
      <li>Järjestetyn listan ensimmäinen alkio</li>
      <li>Järjestetyn listan toinen alkio</li>
    </ol>
  </li>
  <li>Järjestämättömän listan kolmas alkio</li>
</ul>
</li>
<li>Järjestetyn listan toinen alkio</li>
<li>Järjestetyn listan kolmas alkio
<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li>
  <li>Järjestämättömän listan toinen alkio</li>
  <li>Järjestämättömän listan kolmas alkio
  <ul>
    <li>Järjestämättömän listan ensimmäinen alkio</li>
    <li>Järjestämättömän listan toinen alkio</li>
  </ul>
  </li>
  <li>Järjestämättömän listan neljäs alkio</li>
</ul>
</li>
</ol>

Taulukot

table-elementti muodostaa taulukon
tr-elementti aloittaa uuden rivin taulukossa
th-elementti määrittelee rivi- tai sarakeotsikon
td-elementti määrittelee taulukon solun

Amayassa taulukon saa luotua tekemällä tyhjän kappaleen ja valitsemalla työkalupalkista Table-painikkeen. Taulukon solujen ominaisuuksia voi muokata valikosta XHTML | Table

Taulukoita rakennettaessa kannattaa huomata seuraavia asioita:

Taulukkoon laitetaan ainoastaan taulukkomuodossa olevaa dataa.
Taulukoilla ei saa taittaa sivua!

Seuraavassa yksinkertainen esimerkki taulukosta, jossa on neljä riviä ja kaksi saraketta.

Taulukkoon liittyvä otsikko
Esimmäisen sarakkeen otsikko	Toisen sarakkeen otsikko
1. rivin 1. solu	1. rivin 2. solu
2. rivin 1. solu	2. rivin 2. solu
3. rivin 1. solu	3. rivin 2. solu

<table summary="Tekstikuvaus taulukon sisällöstä">
<caption>Taulukkoon liittyvä otsikko</caption>
<tr>
  <th>Esimmäisen sarakkeen otsikko</th>
  <th>Toisen sarakkeen otsikko</th>
</tr>
<tr>
  <td>1. rivin 1. solu</td>
  <td>1. rivin 2. solu</td>
</tr>
<tr>
  <td>2. rivin 1. solu</td>
  <td>2. rivin 2. solu</td>
</tr>
<tr>
  <td>3. rivin 1. solu</td>
  <td>3. rivin 2. solu</td>
</tr>
</table>

Ensimmäinen otsikko	Toinen otsikko	Kolmas otsikko
1. rivin 1.	1. rivin 2.	1. rivin 3.
2. rivin 1.	2. rivin 2.	2. rivin 3.
3. rivin 1.	3. rivin 2.	3. rivin 3.
4. rivin 1. solu kolmen sarakkeen alueelle
5. rivin 1.	5. rivin 2.kahdella riville	5. rivin 3.
6. rivin 1.	5. rivin 2.kahdella riville	6. rivin 3.

<table  summary="tekstikuvaus taulukon tarkoituksesta ja sisällöstä" >
<tr>
 <th>Ensimmäinen otsikko</th> <th>Toinen otsikko</th> <th>Kolmas otsikko</th>
</tr>
<tr>
 <td>1. rivin 1.</td> <td>1. rivin 2.</td> <td>1. rivin 3.</td>
</tr>
<tr>
 <td>2. rivin 1.</td> <td>2. rivin 2.</td> <td>2. rivin 3.</td>
</tr>
<tr>
 <td>3. rivin 1.</td> <td>3. rivin 2.</td> <td>3. rivin 3.</td>
</tr>
<tr>
 <td colspan="3">4. rivin 1. joka laajenee kolmen sarakkeen alueelle</td>
</tr>
<tr>
 <td>5. rivin 1.</td> <td rowspan="2">5. rivin 2. kahdella riville</td> <td>5. rivin 3.</td>
</tr>
<tr>
 <td>6. rivin 1.</td>  <td>6. rivin 3.</td>
</tr>
</table>

Korvattavat elementit

Korvattavia elementtejä voidaan sijoittaa lohko- tai tekstitason elementtien sisään.

img - Kuva

src-attribuutin määrittelemä kuva ilmestyy img-elementin paikalle dokumenttiin.
img-elementti pitää sijoittaa aina jonkin kappaletason elementin (p, li, h1, h2 jne) sisään.
img-elementille ei ole normaalia lopetuselementtiä joten se pitää korvata lisäämällä aivan elementin loppuun välilyönti ja /-merkki.

Seuraavassa esimerkki img-elementin käytöstä.

Käytettävä kuva voi sijaita millä tahansa www-palvelimella jos kuvan osoitteeksi kirjoitetaan kokonainen URI:

<p>
<img src="http://appro.mit.jyu.fi/images/appro2_p.png" alt=" " title="Appro-logo" />
</p>

Useimmiten kuvat sijaitsevat samalla palvelimella ja samassa kansiossa kuin xhtml-dokumenttikin. Tällöin on järkevintä käyttää suhteellista osoitusta kuvaan:

<p>
<img src="appro2.png" alt=" " title="Appro-logo" />
</p>

Amayassa samassa hakemistossa olevan kuvan saa helposti lisätty työkalupalkin Image-painikkeella.

Kuvalle pitää keksiä korvaava tekstikuvaus alt-attribuutin arvoksi. alt-attribuutin sisältö näytetään jos kuvaa ei pystytä esittämään.

Hämähäkki lämmittelee auringossa rinkan päällä

<p>
<img
  src="http://hazor.iki.fi/2002/jotunheimen/tommi/thumbs/DSCN4283-H%E4m%E4h%E4kki.jpg"
  alt="Hämähäkki lämmittelee auringossa rinkan päällä"
  title="Hämähäkki lämmittelee auringossa" />
</p>

br - pakotettu rivinvaihto

br - pakotettu rivinvaihto. br-elementillä ei saa yrittää tehdä tyhjää tilaa (vrt. ylimääräiset rivinvaihdot tekstinkäsittelyssä).

<address>
yliopistonopettaja <a href="mailto:tommi.j.lahtonen@jyu.fi">Tommi Lahtonen</a><br />
Sähköposti: <a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a><br />
Kotisivu: <URL: <a href="http://hazor.iki.fi/">http://hazor.iki.fi/</a>><br />
Työhuone: AgC431.2<br />
Puhelin: (014) 260 2746<br />
Fax: (014) 260 2731</address>

br-elementillä ei myöskään ole normaalia lopetuselementtiä vaan se korvataan laittamalla aivan elementin loppuun välilyönti ja /-merkki. vrt. img.

Tekstitason elementit

Seuraavaan on kerätty listaksi tekstitason elementit.

Hyperlinkit - a

a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman dokumentin toiseen kohtaan. a-elementti pitää sijoittaa jonkun lohkotason elementin sisälle.

Absoluuttisella osoitteella oleva linkki kurssin kotisivulle:

<p>Absoluuttisella osoitteella oleva linkki kurssin
<a title="WWW-julkaiseminen kurssin kotisivu"
href="http://appro.mit.jyu.fi/www/">kotisivulle</a></p>

Puoliabsoluuttisella osoitteella oleva linkki kurssin toiselle luennolle:

<p>Puoliabsoluuttisella osoitteella oleva linkki kurssin

<a href="/www/luennot/luento2/">toiselle luennolle</a></p>

Suhteellisella osoitteella oleva linkki kurssin ensimmäisiin demoihin:

<p>Suhteellisella osoitteella oleva linkki kurssin
<a href="../../demot/demo1/">ensimmäisiin demoihin</a></p>

Suhteellisella viittauksella voit viitata mihin tahansa oman hakemistorakenteen tiedostoon:

href=

"muuli.html"       Tämän hakemiston muuli.html-tiedosto
                   (hakemisto, missä viittaava dokumentti sijaitsee)
"testi/"           Tämän hakemiston alihakemisto testi
                   (oletuksena näytetään sivu index.html)
"testi/muuli.html" Tämän hakemiston testi-alihakemiston muuli.html-tiedosto
                   (ei kannata käyttää)
"testi/kuva.png"   Viite testi-alihakemiston kuva.png-tiedostoon
                   (kuvat kannattaa säilyttää dokumentin kanssa samassa hakemistossa)
"../"              Isähakemisto
                   (hakemisto, jossa nykyinen hakemisto sijaitsee)
"../testi/"        Isähakemiston alihakemisto testi

Absoluuttista ja suhteellista viittausta käsitellään lisään kurssin komentoriviluennoilla.

Linkki tämän dokumentin hyperlinkeistä kertovaan lukuun Hyperlinkit - a
```
Linkki tämän dokumentin hyperlinkeistä kertovaan lukuun
<a href="#hyper">Hyperlinkit - a</a>
```
Otsikkoon, jonne dokumentin sisäinen linkki osoittaa, täytyy olla määriteltynä id-attribuutilla yksikäsitteinen arvo.
```
<h3 id="hyper">Hyperlinkit - a</h3>
```
strong - erittäin tärkeät asiat
em - tärkeät asiat
Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat tärkeitä, toiset sanat ovat erittäin tärkeitä.
```

Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat tärkeitä, toiset
sanat ovat erittäin tärkeitä.

```
Amayassa tärkeitä asioita voi korostaa maalaamalla tekstistä sanoja ja valitsemalla työkalupalkista painikkeen Emphasis ja Strong.

Yleisimmät virheet XHTML-dokumentissa

Elementit väärässä järjestyksessä.
Kappaletason elementti tekstitason elementin sisällä.
Väärin kirjoitettu dokumenttityyppi.
Attribuuttien arvot ilman lainausmerkkejä.
Elementtien ja attribuuttien nimet pitää kirjoittaa pienellä.
Epätyhjät elementit pitää lopettaa lopetuselementillä ..
Tyhjät elementit pitää lopettaa kauttaviivalla <img .. />

XHTML-dokumentin tuottamisen vaiheet

Kirjoita dokumentin sisältö
Määrittele dokumentin rakenne
Validoi dokumentti
- Virallinen validaattori löytyy osoitteesta http://validator.w3.org/
Testaa dokumentti jollakin selaimella
Määrittele dokumentin ulkoasu (CSS)
Validoi CSS
Testaa ulkoasu selaimilla
Siirrä dokumentti WWW-palvelimelle

XHTML-dokumentin kirjoittamiseen voi käyttää haluamaansa tekstieditoria (esim. Notepad) tai jotakin erityisesti XML:n kirjoittamiseen kehitettyä editoria (esim. HTML-Kit).

WWW-sivun julkaisu JYU:ssä

Voit julkaista sivusi tallentamalla sen W:-asemalle. Jos W:-asemaa ei ole suoraan käytettävissä joudut toimimaan seuraavan ohjeen mukaan:

Tee ensimmäisellä kerralla seuraavat alkuvalmistelut:
- Aktivoi WWW-hakemistosi salasana.jyu.fi-palvelun kautta. Aktivoi myös Unix-käyttöoikeutesi.
- Ota SSH-pääteyhteys jalava-koneeseen esim. Puttylla
  Linkitä WWW-tilasi kotihakemistoosi kirjoittamalla komento:
```
ln -s /wwwhome$HOME/html $HOME/html
```
Ota jollakin SFTP-ohjelmalla yhteys jalava-koneeseen
Kopioi Filezillalla haluamasi tiedostot html-kansioon

Sivusi löytyy osoitteesta http://users.jyu.fi/~omatunnus/

Käyttäjien kommentit

Kuvankäsittely

Seuraava