XHTML-perusteita - Demo 5

HTML-kit
Pohjakoodi
Mallidokumentin rakenteen merkitseminen
Dokumentin validointi
Sisällysluettelo

Näissä demonstraatioissa on tarkoitus tutustua yleisimpiin HTML-elementteihin ja niiden käyttämiseen WWW-dokumenteissa. Työvälineenä käytetään HTML-kit-editoria, jonka perusominaisuudet käydään läpi. Kokeillaan myös HTML-validaattorien toimintaa. Esimerkkejä XHTML-elementtien käyttämisestä voit katsoa luento 5:en materiaalista.

HTML-kit

Kirjaudu sisään AGORANET:iin omalla tunnuksellasi.
Käynnistä HTML-kit (Start|Programs|HTML-kit|HTML-kit)
Valitse Create a new file ja paina OK.
Siirrytään muuttamaan HTML-kitin asetukset järkeviksi. Valitse Edit|Preferences.
- Valitse välilehti Proofing. Poista ruksit kolmesta ylimmäisestä valinnasta niin HTML-kit ei turhaan kiusaa automaattisella oikuluvulla, joka ymmärtää vain englantia.
- Valitse välilehti TIDY. Valitse Output: kohtaan vaihtoehto XML. Tämän valinnan jälkeen HTML-Kitiin sijoitettu HTML-tidy ohjelma osaa tarvittaessa korjata tekemiäsi virheitä ja huomauttaa niistä.
- Hyväksy asetukset painamalla OK.

Pohjakoodi

Kopioi leikepöydälle seuraava dokumentin pohjakoodi ja liitä se HTML-kitin dokumenttiin siellä ennestään olevan dokumenttipohjan tilalle.
```
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<title>Kuvaava otsikko</title>
</head>
<body>
<h1>Otsikko</h1>

</body>
</html>
```
Tätä pohjakoodia sinun kannattaa jatkossa käyttää kaikissa HTML-dokumenteissasi. Saman pohjakoodin voit liittää myös HTML-kitin asetuksiin kohtaan Edit|Preferences|Startup|Insert following text into new documents:. Tämän jälkeen HTML-kit antaa aina valmiina oikean pohjakoodin.
- 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 (euro-merkki mukana) on pohjoismaissa käytettävä merkistö.
- DOCTYPE-elementti kertoo käytetyn dokumenttityypin.
- html-elementti sisältää varsinaisen xhtml-dokumentin. html-elementin attribuuteilla määritellään käytetty nimiavaruus (xmlns), joka pitää olla http://www.w3.org/1999/xhtml sekä dokumentin kieli (xml:lang), joka suomenkielisissä dokumenteissa on fi.
- 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.
Tallenna dokumenttisi U:\tyovaline\demo5\-kansioon demo5.html-nimellä. Tallenna jatkossa kaikki muutkin XHTML-dokumenttisi tähän samaan hakemistoon.

Mallidokumentin rakenteen merkitseminen

Avaa näkyville Word-mallidokumentti demo5.doc. Kopioi koko dokumentin sisältö leikepöydälle.
Liitä dokumentti leikepöydältä HTML-kitissä auki olevaan dokumenttiisi body-elementin sisään.
Tallenna HTML-kitissä oleva dokumenttisi. Kokeile selaimella miltä dokumenttisi näyttää. Painamalla F8-näppäintä saat HTML-kitin avaamaan dokumenttisi oletusselaimeesi. Dokumentin pitäisi olla pelkkää yhtä pötköä, koska dokumentin rakennetta ei ole vielä määritelty.
Määritellään ensimmäiseksi dokumentin otsikko. Kirjoita title-elementin sisään Tietokonevirukset ja muut nykyajan tuholaiset. Tämä teksti tulee näkyviin selainikkunan ylälaitaan.
Dokumentin pääotsikko määritellään h1-elementillä dokumentin rungossa eli body-elementin sisällä.
- Maalaa dokumentin rungon alkuosassa oleva Tietokonevirukset ja muut nykyajan tuholaiset. Maalaaminen onnistuu nopeimmin näppäimistöltä siirtämällä kohdistin rivin alkuun, painamalla SHIFT-näppäin pohjaan ja painamalla nuoli alas -näppäintä. Tällöin koko rivi tulee maalatuksi.
- Paina ALT-INSERT-näppäinyhdistelmää.
- HTML-kit kysyy millä elementillä haluat merkitä valitun alueen. Anna elementiksi h1 eli pääotsikko.
Tallenna dokumenttisi ja kokeile miten selaimesi esittää sen nyt. Siirry HTML-kitin äsken aukaisemaan selaimeen (alt-tab) ja päivitä siellä näkyvä dokumentti Reload- tai Refresh-nappulalla. Pääotsikon pitäisi nyt selkeästi erottua muusta tekstistä.

Toisen tason otsikot (`h2`)

Jatketaan dokumentin rakenteen merkitsemistä. Aukaise HTML-kitin viereen näkyviin Word-dokumentti, josta kopioit äsken tekstit. Etsi Word-dokumentista kaikki toisen tason otsikot joista ensimmäinen on Erilaisia viruksia ja tuholaisia. Hae (CTRL-F aukaisee HTML-kitissä hakudialogin) aina vastaava kohta HTML-kitissä olevasta dokumentistasi ja merkitse se h2-elementillä käyttäen apunasi HTML-kitin ALT-INSERT-näppäinyhdistelmätoimintoa. Merkittyäsi kaikki toisen tason otsikot tallenna dokumenttisi ja katso selaimella miten sen rakenne alkaa hahmottua.

Tekstikappaleet (`p`)

Merkitse seuraavaksi aivan vastaavalla tavalla kaikki dokumentissa olevat yhtenäiset tekstikappaleet p-elementillä (paragraph). Tallenna ja vertaa selaimella alkuperäiseen Word-dokumenttiin.

Listat (`ul` ja `li`)

Lohkotason rakennemerkinnöistä puuttuvat vielä listat
- Muodosta ensimmäiseksi lista dokumentin alussa olevasta virustyyppiluettelosta. Maalaa kaikki listaan kuuluva teksti ja merkitse koko alue ul-elementillä (järjestämätön lista).
- Tämän jälkeen täytyy jokainen listan alkio merkitä vielä li-elementillä (lista-alkio). Tämä onnistuu helpoiten maalaamaalla kaikki listaan kuuluvat rivit ja valitsemalla html-kitin työkalupalkista Tools-välilehdeltä kohta Text ja sieltä edelleen valinta <li>...</li>.
- Kokeile selaimella onnistuiko listan määrittely.
Esimerkki listasta:
```
<ul>
  <li>Listan ensimmäinen alkio</li>
  <li>Listan toinen alkio</li>
  <li>Listan kolmas alkio</li>
</ul>
```
Seuraava lista on aivan samanlainen järjestämätön lista kuin ensimmäinenkin. Merkitse siis se ul- ja li-elementeillä.
Dokumentin kolmas lista on virustorjuntaohjelmia käsittelevässä kappaleessa. Tässä listassa on kaksi sisäkkäistä listaa. Esimerkki sisäkkäisistä listoista:
```
<ul><li>Ulomman listan ensimmäinen alkio, jonka sisällä on sisempi lista
	<ul>
	<li>Ensimmäisen sisemmän listan ensimmäinen alkio</li>
	<li>Ensimmäisen sisemmän listan toinen alkio</li>
	</ul>
</li>
<li>Ulomman listan toinen alkio</li>
<li>Ulomman listan kolmas alkio, jonka sisällä on myös sisempi lsita
	<ul>
	<li>Toisen sisemmän listan ensimmäinen alkio</li>
	<li>Toisen sisemmän listan toinen alkio</li>
	</ul>
</li>
</ul>
```
- Merkitse ensin ulommaisen listan alku ja loppu aivan normaalisti.
- Merkitse jokainen ulomman listan alkio li-elementillä. Ulomman listan yksittäiseen alkioon kuuluu myös kaikki tämän alla olevat sisemmän listan tekstit.
- Merkittyäsi ulomman listan alkiot (kolme (3) kpl) voit lisätä näiden sisään uudet listat normaalisti ul-elementillä.
- Merkitse li-elementeillä sisemmän listan alkiot.

Dokumentin validointi

Koska sisäkkäiset listat ovat hieman monimutkaisia niin dokumenttisi kannattaa tässä vaiheessa validoida eli tarkistaa onko rakenteen merkinnässä tullut virheitä.
- Ensimmäinen tarkistus kannattaa usein tehdä HTML-kitiin rakennetulla Tidyllä, joka ei ole varsinainen validaattori, mutta osaa kuitenkin korjata dokumentin virheitä. Paina F9 niin HTML-kit suorittaa Tidy-tarkistuksen.
- Dokumenttisi viereen aukeaa uusi ikkunassa jossa on dokumenttisi Tidyn muokkaamana. Mahdollisista virheistä tulee maininnat HTML-kitin alalaidassa olevaan status-ikkunaan.
- Klikkaamalla virheilmoitusta HTML-kit hyppää suoraan virheelliseen kohtaan.
  - Jos saat virheilmoituksen: "url is not regocnized", niin joudut korjaamaan WWW-osoitteiden ympärillä olevia pienempi kuin (<) ja suurempi kuin (>) -merkkejä. <-merkin paikalle täytyy kirjoittaa < ja >-merkin paikalle täytyy kirjoittaa >.
- Saat dokumenttisi koko ruudun kokoisena valitsemalla alalaidasta löytyvän editor-välilehden.
- Korjaa Tidyn löytämät virheet ja kokeile sen jälkeen oikeaa validaattoria.
- Jos HTML-kitissä ei ole näkyvissä Actions-työkalupalkkia niin sinun pitää aktivoida se. Actions-työkalupalkki on pikapainikepalkin alla oleva palkki, jossa näkyy useita välilehtiä ([All], Tools, jne). Actions-työkalupalkin saat näkyviin valinnalla View|Actions Bar.
- Valitse palkista välilehti online. Tältä välilehdeltä löytyy vasemmanpuoleisena WDG-validator-nappula. Tallenna ensin dokumenttisi ja sen jälkeen paina WDG-validator-nappulaa.
- Odota hetki ja saat näkyviin dokumenttisi validointituloksen. Jos validaattori löytää virheitä niin se ilmoittaa rivinumeron missä virhe sen mielestä on ja kuvauksen virheestä.
- Lue ilmoitukset ja korjaa ne dokumenttiisi. Voit vaihdella validaattori-ikkunan ja dokumenttisi välillä CTRL-TAB-näppäinyhdistelmällä.
- Jos virheitä tulee paljon niin korjaa vain ensimmäinen ja suorita uusi validointi. Yksi sopiva virhe sopivassa paikassa voi aiheuttaa useamman virheen.
- Jos virhe tulee vielä merkitsemättömistä teksteistä, niin voit jatkaa seuraavassa edelleen dokumentin rakenteen määrittelyä seuraavien tehtävien ohjeiden mukaisesti.

Sisällysluettelo

Jos dokumentin alussa on sisällysluettelo, niin määrittele siitä lista, josta löytyy useampi taso. Muussa tapauksessa käy lisäämässä word-dokumenttiisi sisällysluettelo ja kopioi se xhtml-dokumenttisi alkuun. Voit vaihtoehtoisesti kopioida muutaman otsikon tekstin ja koota niistä sisällysluettelon mutta wordista kopioiminen on nopeampaa. Määrittele vielä loput dokumentissa olevat listat. Voit tehdä näiden listojen merkitsemisen hyvin nopeasti kokeilemalla HTML-kitin Actions-toolbarin Tools-välilehden Text-kohdan työkaluja. Maalaa listaksi haluamasi rivit ja valitse Text-toiminnoista kohta <li>...</li>.
Merkittyäsi nyt koko dokumentin sisällön erilaisilla lohkotason elementeillä voit nyt tarkistaa vielä validaattorilla oletko tehnyt mahdollisesti virheitä tai jättänyt jotakin merkitsemättä.
Korjattuasi dokumentin mahdolliset virheet voit jatkaa dokumentin rakenteen merkitsemistä tekstitason elementeillä. Seuraavaksi täytyy saada sisällysluettelon linkit toimimaan. Ensimmäiseksi täytyy merkitä kohdat joihin linkkien halutaan hyppäävän. Käy lisäämässä jokaiseen h2-elementtiin uniikki tunniste eli id. Tämä voidaan määritellä lisäämällä h2-elementille id-attribuutti eli ominaisuus. id-attribuutin arvojen pitää alkaa kirjaimella.
```
<h2 id="otsikko2">Erilaisia viruksia ja tuholaisia</h2>
```
Anna jokaiselle h2-elementille oma tunniste. Helpointa lienee antaa id:t juoksevana sarjana esim. otsikko1, otsikko2, otsikko3 ...
Lisää nyt dokumentin alussa olevaan sisällysluettelolistaan linkit. Hyperlinkkejä määritellään a-elementillä, jonka href-ominaisuus sisältää tiedon osoitteesta johon halutaan hypätä. a-elementin sisältönä on varsinainen linkkiteksti.
```
<li><a href="#otsikko2">Erilaisia viruksia ja tuholaisia</a></li>
```
Jos linkki on vain dokumentin sisäinen niin linkkiosoite pitää aloittaa #-merkillä. Lisää sisällysluetteloon linkit kaikkiin väliotsikoihin. Tallenna dokumenttisi. Kokeile selaimessa linkkien toiminta. Validoi dokumentti ja korjaa mahdolliset virheet.
Alkuperäisessä dokumentissa on myös paljon linkkejä muihin dokumentteihin. Lisää harjoituksen vuoksi myös muutama tälläinen linkki.
- Siirry dokumentin aivan loppuun (Lähteet) ja etsi siellä olevasta listasta CERT:iä koskeva kohta.
- Tee Certin Nimda-ohjeistuksesta linkki maalaamalla linkkiteksti (http://www.cert.org/advisories/CA-2001-26.html)ja painamalla ALT-INSERT. HTML-kitin pitäisi automaattisesti laittaa HREF-attribuutti oikein.
- Tee linkki samaan osoitteeseen myös tekstistä CERT Advisory CA-2001-26 Nimda Worm.
Tee vastaavalla tavalla linkit myös muista lähteiden kohdista.
Tallenna dokumenttisi ja sulje HTML-kit.