XHTML-perusteita

Mallivideot
Alkuvalmistelut
Dokumentin rakenne
Lisätehtäviä
- Adblock

Elementtien selitteet löytyvät osoitteesta: http://appro.mit.jyu.fi/doc/www/

Mallivideot

xhtml1.wmv 1.1M
xhtml2.wmv 2.1M
listat.wmv 2.2M
listat2.wmv 1.3M
pre.wmv 1.1M
p.wmv 941K
strong.wmv 553K
linkit.wmv 565K
taulukot.wmv 729K

XetorjEdit-editorin uusimman version (Windows-käyttöjärjestelmille) saat kotikoneelle osoitteesta:

http://appro.mit.jyu.fi/doc/xetor/

Näissä demonstraatioissa on tarkoitus tutustua yleisimpiin HTML-elementteihin ja niiden käyttämiseen WWW-dokumenteissa. Työvälineenä käytetään Xetor-editoria, jonka perusominaisuudet käydään läpi.

Alkuvalmistelut

Käynnistä XetorJEdit-editori valitsemlla Start|Programs|JEdit|JEdit
Älä sulje jEdit-komentorivi-ikkunaa, koska se sulkee koko ohjelman.
Valitse File | New. Tämä luo uuden XHTML-dokumentin.

Kopioi dokumentin pohjaksi seuraava teksti:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//JYU//DTD XHTML 1.0 Simple//EN"
 "http://appro.mit.jyu.fi/dtd/xhtml1-simple.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" >
<head>
    <title>Tähän sivun otsikko</title>
</head>
<body>

</body>
</html>

Tallenna dokumenttisi U:\tyovaline\demo6\-kansioon index.html-nimellä.
- Tallennusdialogissa löydät U:-aseman tuplanapauttamalla roots-kohtaa. Uuden kansion luominen löytyy dialogin oikeasta yläkulmasta.
- Tallennuksen jälkeen Xetor havaitsee, että kyseessä on xhtml-dokumentti ja haluaa ladata dokumenttiin liittyvän dokumenttityyppimäärityksen, jota tarvitaan dokumentin oikeellisuuden tarkistamiseen (validointiin). Vastaa Xetorin kysymykseen "Yes".
Avaa näkyville mallidokumentti virukset04k_d6.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ä Xetorissa auki olevaan dokumenttiisi body-elementin sisään.
Xetor huomauttaa heti näytön alalaidassa virheestä, koska dokumentin rakennetta ei ole vielä merkitty. Dokumentin oikeellisuuden tarkistamista sanotaan validoinniksi. Virheestä ei tarvitse nyt huolestua, koska seuraavaksi merkitään dokumentin rakenne.
Tallenna dokumenttisi.
Jos rivien lopussa on ylimääräisiä punaisia pisteitä niin nämä saa pois näkyvistä valikosta Utilities | Global Options | Text Area, ottamalla ruksin pois kohdasta End of line markers ja napauttamalla OK. Punaiset pisteet ovat merkitsevät rivinvaihtoja. Pitkien rivien rivityksen saa päälle valinnalla saman ikkunan Editing-välilehdeltä laittamalla kohtaan Word Wrap arvon soft.
Kokeile selaimella miltä dokumenttisi näyttää. Avaa uusi selainikkuna ja valitse selaimesta File|Open|Browse (IE) tai File|Open (Mozilla tai Firefox) niin voit avata dokumenttisi näkyville. Dokumentti on luultavastikin pelkkää yhtä pötköä, koska dokumentin rakennetta ei ole vielä määritelty.
Huomaathan, että selain ei herjaa mitään dokumentin rakenteesta vaikka se on vielä tällä hetkellä pielessä. Selain vain yrittää näyttää sivun sinnepäin virheistä välittämättä.

Dokumentin rakenne

Suurenna Xetorin ikkuna vaikka koko ruudun levyiseksi, että näet kunnolla koko dokumentin. Rakenteen merkitseminen on hankalaa jos joudut toimimaan liian ahtaassa tilassa.
Määritellään Seuraavaksi dokumentin otsikko. Kirjoita title-elementin sisään Tietokonevirukset ja muut nykyajan tuholaiset. Tämä teksti tulee näkyviin selainikkunan ylälaidan otsikkopalkkiin. Voit kirjoittaa tekstin joko suoraan Xetorin tekstinäkymään (keskiosa) tai hakea vasemmassa reunassa olevasta puusta title-elementin ja kirjoittaa sen sisällön vasemman alalaidan laatikkoon.
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.
- Valitse h1-elementti Xetorin oikean yläkulman elementtilistauksesta.
Tallenna dokumenttisi ja kokeile miten selaimesi esittää sen nyt. Päivitä selaimessasi 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ä.

Merkitse XHTML-dokumentissasi kaikki toisen tason otsikot h2-elementillä käyttäen apunasi edellä h1-elementin yhteydessä käytettyä tapaa. Toisen tason otsikoita ovat:
- Erilaisia viruksia ja tuholaisia
- Suojautuminen viruksia vastaan
- Nykyiset virukset
Kokeile miltä sivu näyttää selaimessa.

Kolmannen tason otsikot (`h3`)

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

Kolmannen tason otsikoita ovat:

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

Kokeile miltä sivu näyttää selaimessa.

Listat (`ul`, `ol` ja `li`)

Viruksentorjuntaohjelmat -lista Numeroitu luettelo viruksista

Lohkotason rakennemerkinnöistä puuttuvat vielä listat:

Maalaa ensin kuhunkin listaan kuuluva teksti ja merkitse koko alue ul-elementillä (engl. unordered list). Kuhunkin listaan kuuluu 2-3 lista-kohtaa.
Merkitse dokumentin lopussa oleva numeroitu luettelo (engl. ordered list) ol-elementillä.
Tämän jälkeen kunkin listan jokainen listan alkio (listakohta) on merkittävät vielä li-elementillä (lista-alkio).
- Listakohtien sisään ei saa tulla listan aloittavan ja päättävän elementin osasia, esim. <ul>, </ul>, <ol> tai </ol>.
- Listakohtien ulkopuolelle ei saa jäädä mitään tekstiä.
- Xetor valittaa alalaidan ikkunassa jos tällaisia validiteettivirheitä tulee.
Valitse merkinnän jälkeen valikosta Plugins | XML Indenter | Indent XML. Tämä sisentää kaikki merkityt elementit, joilloin näet koodi-ikkunasta paremmin dokumentin rakenteen.
Poista turhat *-merkit ja numerot lista-alkioiden edestä. Nämä tulevat automaattisesti.
Kokeile selaimella onnistuiko listan määrittely.

Sisäkkäiset listat

Sisäkkäiset listat rakennenäkymässä

Lisätään vielä täsmennyksiä viruksentorjunta-ohjelmiin liittyen. Tällöin tarvitaan sisäkkäisiä listoja (kts. malli yllä)
Siirrä kursori koodi-ikkunassa F-Secure-sanan loppuun ja paina enteriä. Katso, että kohdistin on <li> ... </li> -lohkon sisällä.
Lisää oikeasta laidasta uusi ul-elementti.
Valitse vasemmasta laidan Structure browserista ul-elementin alta kohta Inside. Napauta oikeasta laidasta li. Valitse li:n sisältä Inside ja kirjoita vasempaan alalaitaan teksti
```
Päivitykset osoitteesta http://www.f-secure.com/download-purchase/updates.shtml
```
ja paina Update.
Valitse vasemmasta laidasta edellä lisäämäsi li-elementti ja tämän jälkeen jälkeen tuleva kohta After. Lisää tähänkin li. Valitse tämän li:n sisältä inside ja lisää toisen kohdan teksti samaan tapaan:
```
Kokeiluversio osoitteesta http://www.f-secure.com/download-purchase/
```
Mene McAfee-sanan perään ja paina enter. Lisää ul ja tämän sisään ensin yksi li:tä, jonka sisälle teksti
```
http://download.mcafee.com/us/
```
ja tämän jälkeen (After...) toinen li, johon teksti:
```
http://www.mcafeesecurity.com/us/downloads/evals/
```

Jäsennä koodinäkymäsi valitsemalla Plugins | XML Indenter | Indent XML. Jos jäsennin toimii oikein niin jäsennetyn koodin pitäisi näyttää seuraavalta:

<ul>
  <li>F-Secure Anti Virus
    <ul>
      <li>Päivitykset osoitteesta http://www.f-secure.com/download-purchase/updates.shtml</li>
      <li>Kokeiluversio osoitteesta http://www.f-secure.com/download-purchase/</li>
    </ul>
  </li>
  <li>McAfee
    <ul>
      <li>http://download.mcafee.com/us/</li>
      <li>http://www.mcafeesecurity.com/us/downloads/evals/</li>
    </ul>
  </li>
  <li>Symantec Antivirus</li>
</ul>

Esimuotoiltu teksti

Merkitse pre-elementillä kaikki englanninkieliset huumoritekstit.
pre-elementin sisällä olevat tekstit toistuvat juuri kuten ne on kirjoitettu dokumenttiin. Tämän vuoksi kappale ei rivity automaattisesti. Jaa pitkä vitsi riveihin painamalla muutaman kerran enteriä tekstin keskellä.
Testaa miltä nämä kappaleet näyttävät selaimessa.

Tekstikappaleet (`p`)

Kappaleet p-elementillä

Merkitse seuraavaksi aivan vastaavalla tavalla kaikki dokumentissa olevat yhtenäiset tekstikappaleet p-elementillä (paragraph).

Helpointa kappaleiden merkitseminen on vasemman reunan dokumenttipuun (Structure Browser) kautta. Valitse dokumenttipuusta Body ja käy läpi sen sisällä olevia elementtejä. Kohdat jotka alkavat Text ovat mahdollisia kappaleita tai listoja. Valittuasi haluamasi kohdan ilmestyy sen sisältämä teksti vasemman alanurkan ikkunaan josta voit sen maalata ja merkitä p-elementillä.

Voit selventää koodia sisentämällä elementit valikosta valinnalla Plugins | XML Indenter | Indent XML.

Linkit

Dokumentista on myös linkkejä muihin dokumentteihin. Lisätään muutama tälläinen linkki.

Etsi dokumentista sana F-Secure.
Tee linkki F-secure-nimestä osoitteeseen http://www.f-secure.com/
- Kopioi edellämainittu linkki ensin leikepöydälle (maalaa ja CTRL-C).
- Merkitse linkkisana (F-secure) a-elementillä.
- Valitse vasemman laidan structure browserista äsken lisäämäsi a-elementti hiiren oikealla painikkeella ja valitse kontekstivalikosta Edit
- Seuraavassa dialogissa voidaan määritellä elementille ominaisuuksia. Laita raksi href-attribuutin Set-sarakkeeseen. Liitä leikepöydältä sivun osoite Value-kohtaan (CTRL-V liittää). Value-kohtaa pitää tuplanapauttaa jotta siihen voi liittää tekstiä.
Tallenna dokumenttisi ja kokeile linkin toimivuutta selaimella.
Tee listassa olevista muista WWW-osoitteista linkit niin, että niitä napauttamalla pääsee kyseiseen osoitteeseen.
- Kopioi osoite leikepöydälle (CTRL-C)
- Valitse maalatulle tekstille a-elementti
- Lisää href-ominaisuuteen sama teksti kuin mitä linkkitekstissäkin on. Tuplanapauta Edit-dialogissa href-arvon Value-kenttää ja liitä linkkiteksti CTRL-V-näppäinyhdistelmällä.

Korostukset

Maalaa tekstikappaleiden sisältä seuraavat sanat ja merkitse ne strong-elementillä
- Sovellusohjelmavirukset
- Mato
- Spam
Merkitse em-elementillä seuraava lause Päivitykset ovat erityisen tärkeitä
Merkitse lopun luettelon listakohtien sisällä suluissa olevat prosenttiluvut samp-elementillä (esimerkki).
Kokeile selaimella miltä dokumentti näyttää näiden tekstitason merkintöjen jälkeen.

Taulukot

Taulukko rakennenäkymässä

Virustorjuntaohjelmia
Ohjelma	Tekijä
F-prot	Frisk
F-secure Antivirus	F-secure
VirusScan	McAfee

Katso luentosivulta mallia kuinka XHTML:ssä tehdään taulukoita. Yritä edellä oppimassa ja luentomallin perusteella tehdä seuraavan mukainen taulukko (kaksi saraketta, yksi otsikkorivi ja kolme tavallista riviä) xhtml-dokumenttisi loppuun. Taulukko on helpointa tehdä esim. Structure Browserilla:

Siirry Structure Browserissa dokumenttisi viimeiseen lohkotason elementtiin (pre) ja valitse sen alta kohta After.
Lisää tähän kohtaan table-elementti.
Valitse Tablen alta Inside. Lisää taulukon sisään tarvittava määrä rivejä tr-elementeillä.
Lisää ensimmäiseen rivin (tr) sisään taulukko-otsikoita (th)
Lisää muiden rivien sisään tavallisia soluja (td).
Kirjoita näiden solujen sisään taulukon tekstit. Testaa taulukon toimintaa selaimella.

Älä kiinnitä huomiota taulukon väreihin ja reunuksiin. Ulkoasuun paneudutaan seuraavissa demoissa.

Lisätehtäviä

Adblock

WWW-sivuihin liittyvät tänä päivänä myös mainokset. Valitettavasti WWW-mainokset ovat monesti varsinaisen asian lukemista häiritseviä vilkkuvia ja liikkuvia objekteja. Onneksi www-sivun sisältöä on helpompaa muokata kuin paperilehtien. Turhista mainoksista pääsee helposti eroon Adblock-ohjelman avulla.

Adblock on Firefox- ja Mozilla-selaimissa toimiva ohjelma, jolla voi suodattaa mainoksia ja muuta häiritsevää sisältöä www-sivuilta.

Käynnistä Mozilla Firebird-selain (Firefoxin edeltäjä) valinnalla Start | All programs | Mozilla Firebird.
Avaa tämän demon Adblock-tehtävät Firebirdillä eli mene osoitteeseen:
http://appro.mit.jyu.fi/tyovaline/demot/demo6/#adblock
Saatat joutua luomaan uuden profiilin ennen käynnistystä valinnalla Create Profile. Napauta Next ja Finish.
Asenna adblock napauttamalla edelläolevaa linkkiä Firebirdissä.
Firebird pyytää asennusluvan. Valitse Install
- Kotikoneelle asennettava uudempi Firefox-selain saattaa herjata turvallisuusasetuksista. Valitse tällöin Edit Options
  
  Lisää firefoxin ehdottama osoite asennuksia sallivien osoitteiden joukkoon
Sulje Firebird ja käynnistä se uudelleen.
Nyt Adblock on käytössä ja vaatii enää opettamista. Ensimmäiseksi kannattaa adblockiin lisätä valmis ohje useimpien mainosten suodattamiseksi. Tallenna tiedosto adblock.txt U:-asemalle.
Valitse Tools|Adblock|Preferences
Valitse Adblock options|Import filters
Etsi nyt edellä tallentamasi adblock.txt-tiedosto
Valitse Done
Käy kokeilemassa esim. osoitetta http://www.mtv3.fi sekä Internet Explorerilla, joka näyttää edelleen kaikki mainokset, että edellä käyttämälläsi Mozilla Firebirdillä (kotona Firefoxilla tai Mozillalla), jotka piilottavat nyt mainoksia. Vertaile sivun ulkoasua eri selainten välillä.
Voit itse opettaa Adblockille mitä sivuston osia sen pitää piilottaa. Valitse MTV3:n sivulta jokin kuva ja paina sen kohdalla hiiren oikeaa painiketta ja valitse ponnahdusvalikosta Adblock Image
Adblock antaa nyt näkyville kuvan osoitteen ja valitsemalla OK adblock suodattaa tämän kuvan.
Paina mtv3:n sivulla CTRL+SHIFT+A, joka aukaisee näkyville listan sivuston kaikista osista joita voi suodattaa. Saman listauksen saat valinnalla Tools|Adblock|List All Blockable elements
Valitse listasta jokin elementti. Selaimen pitäisi nyt välkyttää tämän elementin reunoja jolloin näet havainnollisemmin mistä elementistä on kyse. Suodatetut elementit näytetään listauksessa kursivoituina.
Voit valita haluamasi elementin ja suodattaa sen valitsemalla OK
Valmiiksi suodatetuissa elementeissä näkyy myös monia ihmisten www-selailun seuraamiseen ja tilastointiin tarkoitettuja elementtejä kuten esim. imrworldwide.comiin viittavaa kuva (img).
Käy vielä sivulla http://www.nelonen.fi. Valitse oikeasta reunasta mainos oikealla hiiren näppäimellä ja valitse kohta Adblock Image. Nyt Adblock tarjoaa piilotettavan kuvan osoitetta, mutta poista osoitteesta ensimmäisen varsinaisen kauttaviivan jälkeen kaikki ja vaihda tilalle jokerimerkki *. Esim.
```
http://adimages.sanomawsoy.fi/*
```
Nyt useimpien mainoksien pitäisi poistua samantien sivulta, koska Adblock estää kaikkien niiden kuvien näkymisen, joiden kuvaviitteen osoite alkaa http://adimages.sanomawsoy.fi/