XHTML-perusteita
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
)
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
- 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
)
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
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:
- 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.
Nyt useimpien mainoksien pitäisi poistua samantien sivulta, koska Adblock estää kaikkien niiden kuvien näkymisen, joiden kuvaviitteen osoite alkaa http://adimages.sanomawsoy.fi/http://adimages.sanomawsoy.fi/*
Käyttäjien kommentit