XHTML-perusteita - Demo 5

Mallivideot
HTML-kit
Dokumentin 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)
Peruuta ensimmäinen ikkuna valinnalla Cancel. Ikkunasta voitaisiin myös valita tehdäänkö uusi XHTML-dokumentti vai avataanko jokin vanha.
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ä.
- Valitse välilehti Editor. Laita päälle valinta Wrap at column. Valinta rivittää tekstin useammalle riville mikäli rivin pituus ylittää määrätyn merkkimäärän. Laita merkkimääräksi esimerkiksi 80 (noin puoli ruutua) tai 150 (täysi ruutu).
- Kopioi leikepöydälle seuraava dokumentin pohjakoodi.
```
<?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. Liitä pohjakoodi HTML-kitin asetuksissa Startup-välilehden kohtaan Insert following text into new documents:. Liittäminen tapahtuu maalaamalla edellinen pohjakoodi ja painamalla näppäinyhdistelmää CTRL + V. Tämän jälkeen HTML-kit antaa aina valmiina oikean pohjakoodin. Pohjakoodista löytyvät seuraavat määritykset:
  - 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.
- Hyväksy kaikki asetukset painamalla OK.

Dokumentin rakenteen merkitseminen

Valitse File|New Document. Tämä luo uuden XHTML-dokumentin.
Tallenna dokumenttisi U:\tyovaline\demo5\-kansioon demo5.html-nimellä. Tallenna jatkossa kaikki muutkin XHTML-dokumenttisi tähän samaan hakemistoon.
Avaa näkyville mallidokumentti virukset.txt. Kopioi koko dokumentin sisältö leikepöydälle (nopeiten saat valittua kaikki tekstit näppäinyhdistelmällä CTRL + A).
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. Dokumentti on luultavastikin 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 napauttamalla 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 (kierrätyskuvake). 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. Merkitse se XHTML-dokumentissasi h2-elementillä käyttäen apunasi HTML-kitin ALT-INSERT-näppäinyhdistelmätoimintoa. Toista sama kaikille toisen tason otsikoille.

Seuraavat toimenpiteet voivat nopeuttaa merkitsemistä ja etsimistä (käytä harkinnan mukaan):

Word-dokumentissa voi etsiä tyylien perusteella tekstin eri osia. Valitse valikosta Edit|Find. More-painikkeen alta löytyy painike Format, josta kohta Style antaa tyylivalikoiman. Valitse tässä tapauksessa Heading 2. Find Next-näppäin antaa seuraavan toisen tason otsikon. Tekstin voi kopioida valitsemalla valikosta Edit|Copy tai näppäinyhdistelmällä CTRL + C. HTML-kitissä hakuikkunan saa auki valikosta Edit|Find tai näppäinyhdistelmällä CTRL + F. Löydetyn tekstin voi kopioida hakudialogiin näppäinyhdistelmällä CTRL + V. Painikkeella Find Next saat haettua tämän tekstin ja merkittyä sen heti sopivalla elementillä käyttäen näppäinyhdistelmää ALT + Insert.
Voit myös määritellä tekstinkäsittelyssä käyttämäsi pikanäppäinkomennot käyttöön HTML-kitissä. Näin voit merkitä esimerkiksi toisen tason otsikot suoraan näppäinyhdistelmällä CTRL + 2.

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ä! Merkitsemisen nopeuttamiseksi voit 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 maalaamalla kaikki listaan kuuluvat rivit ja valitsemalla HTML-kitin työkalupalkista Tools-välilehdeltä kohta Text ja sieltä edelleen valinta <li>...</li>.
  Huomaa, että maalatun alueen on alettava ensimmäisen listarivin alusta ja päätyttävä viimeistä listariviä seuraavan rivin alkuun! Huomioi myös, etteivät <ul>- tai </ul>-elementit saa tulla mukaan maalatulle alueelle tai muuten ul- ja li-elementit menevät ristikkäin! Tekstityökalu tekee siis kukin valitun rivin alkuun merkinnän <li> ja loppuun merkinnän </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>
```
Seuraavat kaksi listaa ovat samanlaisia järjestämättömiä listoja kuin ensimmäinenkin. Merkitse siis ne ul- ja li-elementeillä.
Dokumentin neljäs lista on virustorjuntaohjelmia käsittelevässä kappaleessa. Ennen listan rakenteen merkitsemistä täytyy tekstissä olevat < ja > -merkit koodata muotoon < ja > . Nopein keino merkkien muuntamiseen on maalata koko lista ja käyttää HTML-kitin Tools-välilehden Text-työkaluista vaihtoehtoa < to < and > to >. Toimenpidettä ei voi tehdä jälkikäteen, koska myös elementteihin kuuluvat < ja > -merkit muuttuisivat koodatuiksi merkeiksi!

Nyt voimme määritellä listan rakenteen. 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> normaalisti. Maalaa siis koko lista, käytä näppäinyhdistelmää ALT + Insert, kirjoita ul ja paina enteriä.
- Merkitse jokainen (3 kpl) ulomman listan alkio li-elementillä. Ulomman listan yksittäiseen alkioon sisältyy kaikki tämän alla olevat sisemmän listan tekstit. Käytä näppäinyhdistelmää ALT + Insert.
```
<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 voit lisätä näiden sisään uudet listat normaalisti ul-elementillä. Katso, että ul-elementti tulee kokonaisuudessaan li-elementin sisään.
```
<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ä sisempien listojen alkiot (8 kpl). Voit käyttää tekstityökalua <li> ... </li> 2-3 lista-alkio merkitsemiseksi kerrallaan tai merkitsemällä kukin lista-alkio yksi kerrallaan ALT+INSERT-näppäinyhdistelmällä. Poista myös tekstistä tulleet listamerkit (* ja o), koska selain tekee listamerkinnät automaattisesti kun listan rakenne on määritetty.
```
<li>F-Secure Anti Virus
<ul>
  <li>Virustietokannan päivityksen löytyvät seuraavasta osoitteesta...</li>
  <li>Ohjelmasta löytyy ilmainen kokeiluversio 30 päivän ajaksi...</li>
  <li>Ohjelmasta on olemassa ilmainen DOS-versio, jonka voi ...</li>
</ul>
</li>
```
Dokumentin viimeinen lista on tavallinen järjestämätön lista. Merkitse siis ne ul- ja li-elementeillä, kuten ensimmäisessä listassa tehtiin.

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. Tidyn ehdotuksiin ei kannata luottaa, mutta HTML-kitin alalaitaan mahdollisesti tulevia virhemainintoja kannattaa katsoa. Virheilmoitukset eivät aina kerro koko totuutta virheestä, mutta ainakin kannattaa selvittää millä rivillä ongelma suurinpiirtein sijaitsee ja tutkiskella sieltä. Kannattaa myös selvittää virheet aina järjestyksessä, koska ensimmäinen virhe saattaa aiheuttaa virheiden ketjun.
- 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 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ä. Jos dokumenttisi on kunnossa, niin saat ilmoituksen, että dokumenttisi on virheetön.
- Mikäli virheitä tulee, niin 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 virhe voi aiheuttaa useamman virheen.

Sisällysluettelo

Kopioi seuraavasta xhtml-dokumenttisi alkuun body-elementin sisälle 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	
Suojautuminen käynnistyslohkoviruksilta

Merkitse sisällysluettelo kahdella sisäkkäisellä listalla. Sisemmän listaan lista-alkioiden (li) merkitsemiseen voi käyttää ALT + Insert -näppäinyhdistelmän sijaan myös HTML-kitin Actions-toolbarin Tools-välilehden Text-kohdan työkaluja. Maalaa listaksi haluamasi rivit ja valitse Text-toiminnoista kohta <li>...</li>. Tarkista kuitenkin, että kaikki rivit tulivat merkityiksi ja <li> ja </li>-elementit pysyvät ul-elementin sisällä. Listojen merkitsemiseen voi käyttää myös itse asettamiaan pikanäppäinkomentoja.

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 yksilöllinen 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. h2-tason otsikoille otsikko1, otsikko2, otsikko3, ... ja h3-otsikoille otsikko2.1, otsikko2.2, otsikko2.3, ... Voit myös keksiä omat tunnisteet, mutta muista että tunnisteessa ei saa olla välejä tai skandinaavisia merkkejä.
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. Jos linkki on vain dokumentin sisäinen niin linkkiosoite pitää aloittaa #-merkillä.
```
<li><a href="#otsikko2">Erilaisia viruksia ja tuholaisia</a></li>
```
Lisää sisällysluetteloon linkit kaikkiin väliotsikoihin. Maalaa li-elementin sisällä oleva teksti, paina ALT + Insert ja kirjoita elementiksi a. Täydennä href-ominaisuuden arvo ylläolevan ohjeen mukaan. Toista sama muihin sisällysluettelon osiin. Tallenna dokumenttisi. Validoi dokumentti ja korjaa mahdolliset virheet. Kokeile selaimessa linkkien toiminta.
Alkuperäisessä dokumentissa on myös linkkejä muihin dokumentteihin. Lisätään muutama tälläinen linkki.
- Etsi dokumentista sisäkkäinen lista, jossa on lueteltu viruksentorjuntaohjelmia. Sisemmän listan ensimmäisessä alkiossa on linkki F-Securen sivuille.
- Tee linkki osoitteesta http://www.f-secure.com/download-purchase/updates.shtml maalaamalla se ja painamalla ALT-INSERT. Valitse alasvetovalikosta kohta a href="{{SELTEXT}}". Tämän avulla saat saman osoitteen myös href-ominaisuuden arvoksi.
- Tee vastaavalla tavalla linkit myös muihin virustorjuntaohjelmien sivuihin.
- Tee linkki sanasta Symantec osoitteeseen http://www.symantec.com/ ja sanasta Antivirus osoitteeseen http://www.symantec.com/nav/nav_9xnt/. Maalaa ensin sana Symantec, käytä näppäinyhdistelmää ALT + Insert ja valitse alkuelementiksi a href="", jolloin loppuelementiksi pitäisi tulla pelkkä a. Tee sama myös sanalle Antivirus. Täydennä nyt linkkien href-attribuuttien arvoiksi osoitteet mihin kyseiset linkit viittaavat.
Validoi dokumenttisi ja kokeile linkkien toimivuutta selaimella.
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