XHTML-perusteita

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

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.

Dokumentin rakenteen merkitseminen

  1. Käynnistä XetorJEdit-editori valitsemlla Start|Programs|JEdit|JEdit
  2. Älä sulje jEdit-komentorivi-ikkunaa, koska se sulkee koko ohjelman.
  3. Valitse File | New. Tämä luo uuden XHTML-dokumentin.
  4. 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>
  5. Tallenna dokumenttisi U:\tyovaline\demo6\-kansioon demo6.html-nimellä. Tallenna jatkossa kaikki muutkin XHTML-dokumenttisi tähän samaan hakemistoon.

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

    Xetor lataa dtd:n dokumentin validoimista varten

  6. 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).
  7. Liitä dokumentti leikepöydältä Xetorissa auki olevaan dokumenttiisi body-elementin sisään.
  8. Xetor huomauttaa heti näytön alalaidassa virheestä, koska dokumentin rakennetta ei ole vielä merkitty. Virheestä ei tarvitse nyt huolestua, koska seuraavaksi merkitään dokumentin rakenne.

    Xetorin errorlist

  9. Tallenna dokumenttisi.
  10. Kokeile selaimella miltä dokumenttisi näyttää. Avaa uusi selainikkuna ja valitse selaimesta File|Open|Browse (IE) 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ä.

  11. Xetorin puu
    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.
  12. 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.
      Dokumentin alku Xetorista katsottuna
  13. 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ä.
    Dokumentin alku selaimessa katsottuna

Toisen tason otsikot (h2)

Jatketaan dokumentin rakenteen merkitsemistä.

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ä!. Tallenna ja vertaa selaimella alkuperäiseen Word-dokumenttiin.

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.

Listat (ul ja li)

  1. 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).
    • 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 lista-alkioiden edestä.
    • Kokeile selaimella onnistuiko listan määrittely.
  2. Seuraavat kaksi listaa ovat samanlaisia järjestämättömiä listoja kuin ensimmäinenkin. Merkitse siis ne ul- ja li-elementeillä.
  3. Harjoittele seuraavaksi sisäkkäisten listojen muodostamista. Sisäkkäisillä listoilla tarkoitetaan seuraavan kaltaista listarakennetta jossa listoja on eritasoisia:
    sisäkkäiset listat

    Lisätään ylläoleva lista aivan dokumentin loppuun:

    • Valitse elementtipuusta (vasemman reunan Structure Browser) dokumenttisi viimeinen p-elementti
    • Valitse p-elementin valinnan jälkeen sen alapuolelle ilmestyvä After-kohta
    • Paina hiiren oikeaa painiketta niin saat listan elementeistä joita voit lisätä tähän kohtaa. Valitse ul
    • Valitse puuhun ilmestynyt uusi ul-elementti ja lisää sen sisään (inside) li-elementti
    • Valitse li-elementti ja kirjoita se sisällöksi (valitse taas inside) makrovirukset vasemman alanurkan tekstilaatikkoon. Päivitä elementin sisältö tekstilaatikon Update-painikkeella.
    • Lisää samalla tavalla vielä kaksi li-elementtiä joiden sisällöksi kirjoitat Madot ja Makrovirukset
    • Nyt pitäisi ulomman listan olla valmis. Seuraavaksi lisätään sisempi lista.
      • Valitse Madot-tekstin sisältävä li-elementti ja siirrä kohdistin Madot-tekstin perään
      • Lisää tähän kohtaa uusi lista eli ul-elementti
      • Lisää ulomman listan tapaan tähän uuteen listaan kolme lista-alkiota (li-elementtejä) ja kirjoita niiden sisällöksi mallin mukaan "Mydoom", "Bagle" ja "MSBlast"
    Valitse lopuksi Plugins|XML Indenter|Indent XML niin edellä tekemäsi listat tulevat koodi-ikkunaan luettavammin järjestettyinä.
  4. Dokumentin neljäs lista on virustorjuntaohjelmia käsittelevässä kappaleessa. Tässä listassa on kaksi sisäkkäistä listaa (vrt. edellä tekemäsi listat). 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.
    • 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. 
      <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>
    • Valitse valikosta Plugins | XML Indenter | Indent XML.
    • Merkittyäsi ulomman listan alkiot voit lisätä näiden sisään uudet listat normaalisti ul-elementillä.

      Voit hahmottaa rakennetta paremmin valitsemalla vasemman laidan Structure Browserista äsken tekemäsi listan ja sieltä haluamasi li-elementin. Saat editoitavaksi pelkästään elementin sisällön pitämällä ctrl-näppäintä pohjassa ja napauttamalla elementin nimeä (li) Structure Browserissa.

      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). Poista myös tekstistä tulleet listamerkit (* ja o). 
      <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>
    • Sisennä listat valinnalla Plugins | XML Indenter | Indent XML.
  5. Dokumentin viimeinen lista on tavallinen järjestämätön lista. Merkitse se ul- ja li-elementeillä, kuten ensimmäisessä listassa tehtiin.

Dokumentin validointi

Xetor validoi eli tarkistaa dokumentin oikeellisuutta sitä mukaa kun dokumenttia kirjoitetaan. Tarkista tässä vaiheessa onko alalaidan virhelistauksessa mitään herjauksia.

Jos Xetor vielä ilmoittaa virheistä niin tarkista, että olet varmasti merkinnyt kaiken tekstin otsikoiksi, kappaleiksi tai listoiksi. Tämä on helpointa tarkistaa vasemman laidan Structure Browserin kautta. Jos body-elementin sisältä löytyy kohtia jotka alkavat merkinnällä Text: niin ne täytyy merkitä esim. kappaleiksi. Merkintä onnistuu helpoiten valitsemalla haluttu kohta Structure Browserista jolloin teksti ilmestyy vasemmassa alakulmassa olevaan laatikkoon josta sen voi merkitä.

Linkit

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

Taulukot

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 lohkotasonelementtiin (p tai ul) ja valitse sen alta kohta After. Lisää tähän kohtaan table-elementti. Nyt voit Structure Browserin kautta lisätä taulukon sisään rivejä ja sarakkeita valitsemalla table-elementin ja sen alta kohdan Inside.

Virustorjuntaohjelmia
OhjelmaTekijä
F-protFrisk
F-secure AntivirusF-secure
VirusScanMcAfee

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

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äyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tyovaline/demot/demo6/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2004-10-25 10:45:27
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto