XHTML-perusteita - Demo 5

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

Mallivideot

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. Elementtejä ja niiden käyttöä voit kerrata HTML-elementtien pikakertaus -artikkelista. Tarkempia esimerkkejä XHTML-elementtien käyttämisestä voit katsoa luento 5:en materiaalista.

HTML-kit

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.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>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 mallidokumentti virukset.txt. 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älaidan otsikkopalkkiin.
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. 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. Voit myös määritellä tekstinkäsittelyssä käyttämäsi pikanäppäinkomennon (CTRL+2) käyttöön HTML-kitissä. Merkittyäsi kaikki toisen tason otsikot tallenna dokumenttisi ja katso selaimella miten sen rakenne alkaa hahmottua.

Kolmannen tason otsikot (`h3`)

Merkitse myös kaikki kolmannen tason otsikot h3-elementeillä.

Tekstikappaleet (`p`)

Merkitse seuraavaksi aivan vastaavalla tavalla kaikki dokumentissa olevat yhtenäiset tekstikappaleet p-elementillä (paragraph). Älä kuitenkaan määrittele listoja p-elementillä! Tässä vaiheessa kannattaisi viimeistään määritellä pikanäppäinkomennot käyttöön HTML-Kitissä! 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. Halutessasi voit tehdä li-ryhmän määrittelystä pikanäppäinkomennon HTML-kitiin.
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 (<ul>) ja loppu (</ul>) 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.

<li>F-Secure Anti Virus
  o Virustietokannan päivityksen löytyvät seuraavasta osoitteesta...
  o Ohjelmasta löytyy ilmainen kokeiluversio 30 päivän ajaksi...
  o Ohjelmasta on olemassa ilmainen DOS-versio, jonka voi ...
</li>

Merkittyäsi ulomman listan alkiot (kolme (3) kpl) voit lisätä näiden sisään uudet listat normaalisti ul-elementillä.

<li>F-Secure Anti Virus
<ul>
  o Virustietokannan päivityksen löytyvät seuraavasta osoitteesta...
  o Ohjelmasta löytyy ilmainen kokeiluversio 30 päivän ajaksi...
  o Ohjelmasta on olemassa ilmainen DOS-versio, jonka voi ...
</ul>
</li>

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 recognized", 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 >.
    Helpoiten <- ja >-merkkien korjaus onnistuu etsi ja korvaamalla (ctrl-H) <URL-tekstit <URL-tekstillä ja kopioimalla leikepöydälle >-merkit ja liittämällä ne >-merkkien päälle.
- Saat dokumenttisi koko ruudun kokoisena valitsemalla alalaidasta löytyvän editor-välilehden.
- Saat myös valituksen &-merkistä, joka pitää aina kirjoittaa muotoon &.
Korjaa Tidyn löytämät virheet ja kokeile sen jälkeen oikeaa validaattoria seuraavien ohjeiden mukaisesti.
- 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 useita erilaisia validaattoreita joista oikeanpuolimmaisena on W3C-validator. Tallenna ensin dokumenttisi ja sen jälkeen paina W3C-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.

Sisällysluettelo

Kopioi seuraavasta xhtml-dokumenttisi alkuun sisällysluettelo:

Erilaisia viruksia ja tuholaisia
Suojautuminen viruksia vastaan
   Hanki virustorjuntaohjelma ja huolehdi sen päivityksestä
   Huolehdi ohjelmistojen ja käyttöjärjestelmän päivityksestä
   Tarkista aina saamasi dokumentit ennen niiden aukaisemista
   Älä lähetä sovellusohjelmatiedostoja sähköpostitse
   Tarkista dokumentit ennen niiden lähettämistä
   Poista sähköpostiohjelmista liitetiedostojen automaattinen aukaisu
   Makrovirusvaroitukset kannattaa kytkeä päälle
   Pidä torjuntaohjelma aktiivisena
   Virustartunnan vältteleminen
Matovirukset
Lisätietoja

Merkitse sisällysluettelo kahdella sisäkkäisellä listalla. 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>. Toki voit käyttää myös määrittelemääsi pikanäppäinkomentoa.

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 Spammia koskeva kohta.
- Tee Scott Hazen Muellerin Spam-ohjeistuksesta linkki maalaamalla linkkiteksti (http://spam.abuse.net/)ja painamalla ALT-INSERT. Anna käytettäväksi elementiksi a. HTML-kitin pitäisi automaattisesti laittaa HREF-attribuutti oikein.
- Tee linkki samaan osoitteeseen myös tekstistä "Fight Spam on the Internet!".
Tee vastaavalla tavalla linkit myös muista lähteiden kohdista.
Jos sinulle jäi vielä aikaa, niin voit siirtyä tekemään seuraavien demojen tehtäviä. Muussa tapauksessa voit tallentaa dokumenttisi ja sulkea HTML-kitin.

Käyttäjien kommentit

Tyylit, luettelot ja viitteet

WWW-sivun ulkoasu ja WWW-grafiikka