XHTML-perusteita - Demo 6

• Mallivideot
• Alkuvalmistelut
• Dokumentin rakenne
  • Tekstikappaleet (p)
  • Ensimmäisen tason otsikko (h1)
  • Toisen tason otsikot (h2)
  • Kolmannen tason otsikot (h3)
  • Listat (ul, ol ja li)
  • Sisäkkäiset listat
  • Esimuotoiltu teksti
  • Linkit
  • Korostukset
  • Taulukot
• WWW-sivun julkaisu JYU:ssä
• Lisätehtäviä
  • Adblock plus

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

• Elementtien selitteet löytyvät osoitteesta: http://appro.mit.jyu.fi/doc/www/
• Amaya-XHTML-editorin saat omalle kotikoneellesi osoitteesta http://www.w3.org/Amaya/User/BinDist.html
• Harjoituksessa käytettävä esimerkkidokumentti löytyy osoitteesta http://appro.mit.jyu.fi/tyovaline/demot/demo3/virus05.html
• Jos olet käyttänyt WWW-sivujen tekemiseen aikaisemmin XetorJeditiä niin tutustu vuoden 2005 kevään tehtäviin tai jos olet käyttänyt HTML-kitiä niin tutustu vuoden 2004 tehtäviin.

Alkuvalmistelut

1. Käynnistä Amaya-editori valitsemlla Start | Programs | Amaya 9.51 | Amaya
2. Valitse File | New | New XHTML Document. Tämä luo uuden XHTML-dokumentin.

   

   • Napauta tallennushakemistokohdassa (Directory) kuvaketta . Valitse hakemisto U:\tyovaline, luo sinne uusi hakemisto (Make New Folder) ja vaihda sen nimeksi demo6. Napauta OK:ta.
   • Kirjoita tiedostonimeksi (File) index.html.
   • Valitse Document Profile -kohtaan XHTML Strict.
3. Avaa näkyville mallidokumentti virukset05_d6.txt. Kopioi koko tekstin sisältö leikepöydälle ja liitä se Amayan dokumentti-ikkunaan (nopeiten saat valittua kaikki tekstit näppäinyhdistelmällä CTRL + A). Huomaa, että Amayassa ei toimi kopioidun tekstin liittäminen hiiren oikean napin kautta, vaan liittäminen on tehtävä valikosta Edit | Paste tai näppäinyhdistelmällä CTRL + V.
4. Tallenna dokumenttisi.
5. Tarkista millaista lähdekoodia Amaya tekee puolestasi. Valitse Views | Show source. Vertaa pohjaa luennolla esitettyyn XHTML-dokumentin runkoon. Löydätkö vastaavat määritykset?
6. Kokeile WWW-selaimella (Firefox, Internet Explorer etc.) miltä dokumenttisi näyttää. Avaa uusi selainikkuna (File | New | Window) tai välilehti (File | New Tab). Avaa dokumenttisi selaimeen valinnalla File | Open | Browse (IE) tai File | Open (Opera tai Firefox).
   
   Huom! Internet Explorer 7 -selain ei oletusarvoisesti näytä valikkoja, mutta saat ne näkyviin valitsemalla oikealta Tools | Menubar.

Dokumentin rakenne

• Määritellään seuraavaksi dokumentin otsikko. Valitse valikosta XHTML | Change title... Kirjoita otsikoksi Tietokonevirukset ja muut nykyajan tuholaiset. Tämä teksti tulee näkyviin selainikkunan ylälaidan otsikkopalkkiin.
• Valitse rakennenäkymä valinnalla Views | Show structure.
• Merkitään dokumentin rakenne. Kappaleen saa valittua helpoimmin napauttamalla rakennenäkymässä elementin nimeä (esim. p). Selainnäkymässä kappaleen voi valita viemällä kursorin sen kohdalle ja napauttamalla F2.

Tekstikappaleet (p)

• Yhtenäiset tekstikappaleet on merkittävä p-elementillä (paragraph), mutta Amaya on tehnyt sen jo puolestamme tekstin tuontivaiheessa.
• Kappaleen saa takaisin tekstikappaleeksi tarvittaessa valinnalla XHTML | Paragraph (p)

Ensimmäisen tason otsikko (h1)

• Ensimmäisellä rivillä oleva pääotsikko merkitään h1-elementillä. Otsikkotason valinta voidaan tehdä työkalupalkista H1-, H2- ja H3-painikkeilla.
  
• Tallenna ja päivitä selaimessasi näkyvä dokumentti tai -painikkeella. 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 kuuluvat kappaleet ja napauta Bulleted list -painiketta .
  
• Maalaa dokumentin lopussa oleva numeroitu luettelo ja napauta Numbered list-painiketta .
  
• Katso rakennenäkymästä miten Amaya merkitsee listat
  • Listan aloitus ja lopetus merkitään ul- (engl. unordered list) tai ol-elementillä (engl. ordered list)
  • Listan kukin kohta merkitään li-elementillä.
  • Listakohdan (li) sisällä voi olla toinen, sisempi lista (ul, ol).
  • Listakohtien ulkopuolelle ei saa jäädä mitään tekstiä.
• Poista lista-alkioiden edestä turhat *-listamerkit ja numerot, jotka saadaan automaattisesti.
• Kokeile selaimella onnistuiko listan määrittely.

Sisäkkäiset listat

1. Lisätään vielä täsmennyksiä viruksentorjunta-ohjelmiin liittyen. Tällöin tarvitaan sisäkkäisiä listoja (kts. mallit)
2. Siirrä kursori selainnäkymässä F-Secure Anti Virus -tekstin loppuun ja paina Enteriä.
3. Lisää työkalupalkista uusi merkitty lista (engl. Bulleted list)
4. Nyt saat uuden listakohdan ensimmäisen kohdan alakohdaksi. Kopioi tähän teksti

   Päivitykset osoitteesta http://www.f-secure.com/download-purchase/updates.shtml

5. Napauta kaksi kertaa Enter-painiketta niin saat toisen alalistakohdan. Lisää tähän teksti

   Kokeiluversio osoitteesta http://www.f-secure.com/download-purchase/

6. Mene McAfee-sanan perään ja paina Enter. Lisää Bulleted list ja alakohdaksi teksti

   http://download.mcafee.com/us/

7. Lisää tämän jälkeen kahden Enterin avulla toiseksi listakohdaksi teksti

   http://www.mcafeesecurity.com/us/downloads/evals/

8. Napauta neljä kertaa Enter-painiketta ja katso rakennenäkymästä mitä kukin painallus tekee. Nyt sinun pitäisi päästä lisäämään uutta listakohtaa uloimmalle tasolle. Kirjoita teksti

   Symantec Antivirus

9. Sisäkkäisen listan pitäisi näyttää selaimessa seuraavalta:

   

Esimuotoiltu teksti

• Merkitse pre-elementillä kaikki englanninkieliset huumoritekstit. pre-elementin saa valikosta valinnalla XHTML | Preformatted (pre)
• 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ä. Selainnäkymä päivittyy vasta kun painat enterin jälkeen jotain muuta näppäintä.
• Testaa miltä nämä kappaleet näyttävät selaimessa.

Linkit

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

• Etsi dokumentista sana F-Secure Anti Virus.
• Tee linkki F-secure Anti Virus-tekstistä osoitteeseen http://www.f-secure.com/
  • Maalaa tekstistä F-secure Anti Virus ja valitse Links | Create or change link
  • Kopioi edellä mainittu linkki ensin leikepöydälle (maalaa ja CTRL-C).
  • Liitä linkki leikepöydältä osoiteikkunaan (CTRL+V) ja valitse Confirm
    
• Tallenna dokumenttisi ja kokeile linkin toimivuutta selaimella.
• Tee listassa olevista muista WWW-osoitteista linkit niin, että niitä napauttamalla pääsee kyseiseen osoitteeseen.
  • Maalaa osoite ja kopioi leikepöydälle (CTRL-C).
  • Lisää linkki kuten edellä.
  • Lisää leikepöydältä (CTRL+V) Insert the URI -kohtaan viitetekstiksi sama kuin mitä linkkitekstissäkin on.

Korostukset

• Maalaa tekstikappaleiden sisältä seuraavat sanat ja merkitse ne strong-elementillä (työkalupalkin S)
  
  • Sovellusohjelmavirukset
  • Mato
  • Spam
• Merkitse em-elementillä (työkalupalkin E) seuraava lause Päivitykset ovat erityisen tärkeitä
• Kokeile selaimella miltä dokumentti näyttää näiden tekstitason merkintöjen jälkeen.

Taulukot

1. Tehdään esimerkin mukainen taulukko. Tee uusi tyhjä kappale Suojautuminen viruksia vastaan -otsikon alle.
2. Lisää taulukko työkalupalkista -painikkeella. Lisää 2 saraketta ja 4 riviä.
3. Kirjoita tai kopioi esimerkin mukaiset tekstit soluihin.
4. Napauta takaisin ensimmäisen rivin soluihin ja napauta kaksi kertaa F2-painiketta. Näin saat rivin valituksi.
5. Valitse valikosta XHTML | Table | Change to Heading Cell (th) niin saat ensimmäisen rivin soluista otsikoita.
6. Tarkastele rakennenäkymästä mistä osista ja elementeistä taulukko koostuu. Apua saat myös luentosivun taulukko-osuudesta.

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

WWW-sivun julkaisu JYU:ssä

Voit julkaista sivusi tallentamalla sen W:-asemalle. Jos W:-asemaa ei ole käytettävissä joudut toimimaan seuraavan ohjeen mukaan:

1. Tee ensimmäisellä kerralla seuraavat alkuvalmistelut:
   • Aktivoi WWW-hakemistosi salasana.jyu.fi-palvelun kautta. Aktivoi myös Unix-käyttöoikeutesi.
   • Ota SSH-pääteyhteys jalava-koneeseen esim. Puttylla

     Linkitä WWW-tilasi kotihakemistoosi kirjoittamalla komento:

     ln -s /wwwhome$HOME/html $HOME/html

2. Ota jollakin SFTP-ohjelmalla yhteys jalava-koneeseen
3. Kopioi Filezillalla haluamasi tiedostot html-kansioon
4. Tarkista, että kaikilla on lukuoikeus tiedostoihin. Valitse tiedosto hiiren oikealla painikkeella, valitse kontekstivalikosta file permissions ja anna kaikille (group ja public) lukuoikeudet (read).
   

Sivusi löytyy osoitteesta http://users.jyu.fi/~omatunnus/

Lisätietoja WWW-sivujen julkaisemisesta löytyy tietohallintokeskuksen Henkilökohtaiset kotisivut -ohjeesta.

Lisätehtäviä

Adblock plus

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 plus on Firefox- ja Mozilla-selaimissa toimiva ohjelma, jolla voi suodattaa mainoksia ja muuta häiritsevää sisältöä www-sivuilta.

Laajennoksen asennus

1. Käynnistä Mozilla Firefox-selain valinnalla Start | All programs | Mozilla Firefox | Mozilla Firefox.
2. Valitse Tools | Add-ons ja katso löytyykö listalta Adblock Plus jo valmiiksi asennettuna. Tällöin voit hypätä ohjeissa eteenpäin kohtaan "Mainoksien suodattaminen". Mikäli listassa ei ole mainintaa Adblockista, napauta ikkunan oikeassa alareunassa olevaa linkkiä Get Extensions.
3. Etsi sivuston haun avulla Adblock plus ja valitse sen kohdalta Add to Firefox.
4. Firefox pyytää asennusluvan. Valitse Install
   
   • Mikäli asennusikkunan sijaan ikkunan ylälaitaan tulee kirkas palkki niin käy säätämässä Firefoxin turvallisuusasetukset eri ohjeen avulla.
5. Sulje Firefox ja käynnistä se uudelleen.

Mainoksien suodattaminen

Nyt Adblock plus on käytössä ja vaatii enää opettamista.

1. Asennuksen jälkeen adblock plus kysyy, että haluatko tilata valmiin mainossuodatinlistan. Valitse tarjolla olevista ensimmäinen (Easylist).
2. Käy kokeilemassa esim. osoitetta http://www.mtv3.fi Internet Explorerilla ja Mozilla Firefoxilla. Vertaa miten suodatus vaikuttaa sivun ulkoasuun.
3. 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 plus: Block Image.
4. Adblock antaa nyt näkyville kuvan osoitteen ja valitsemalla OK kuva suodattuu. Voit suodatuksen yhteydessä käyttää myös jokerimerkkejä, jolloin saat suodatettua useampia kuvia kerralla, esim. http://track.adform.net/*
5. Käy jollain muulla sivulla, jossa on mainoksia. Napauta CTRL+SHIFT+V tai valitse valikoista View|Adblock plus: Blockable items, joka aukaisee näkyville listan sivuston kaikista osista joita voi suodattaa.
6. 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