XHTML-perusteita - Demo 7

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.

Alkuvalmistelut

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

    New XHTML Document

    • Napauta tallennushakemistokohdassa (Directory) kuvaketta kansio. Valitse hakemisto U:\tyovaline, luo sinne uusi hakemisto (Make New Folder) ja vaihda sen nimeksi demo7. Napauta OK:ta.
    • Kirjoita tiedostonimeksi (File) index.html hakemistonimen perään.
    • Kirjoita Title-kohtaan Virukset
    • 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:
    <?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>Tähän sivun otsikko</title>
      <link href="tahan_tyylintiedoston_nimi.css" rel="StyleSheet" type="text/css" />
    </head>
    <body>
      <h1>Tähän pääotsikko</h1>
      <p>Tähän tekstiä...</p>
    </body>
    </html>
    Löydätkö vastaavat määritykset?
  6. Kokeile WWW-selaimella (Firefox, Internet Explorer etc.) miltä dokumenttisi näyttää. Avaa selaimessa uusi välilehti. Avaa dokumenttisi välilehteen valinnalla File | Open | Browse (IE) tai File | Open (Opera tai Firefox).

Dokumentin rakenne

Xetorin puu

Tekstikappaleet (p)

Ensimmäisen tason otsikko (h1)

Toisen tason otsikot (h2)

Jatketaan dokumentin rakenteen merkitsemistä.

Kolmannen tason otsikot (h3)

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

Kolmannen tason otsikoita ovat:

Kokeile miltä sivu näyttää selaimessa.

Listat (ul, ol ja li)

Lohkotason rakennemerkinnöistä puuttuvat vielä listat:

Sisäkkäiset listat

Sisäkkäisen listan rakenne

  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) Bulleted list -painiket
  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:

    Sisäkkäiset listat

Esimuotoiltu teksti

pre-elementillä muotoiltu teksti

Linkit

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

Korostukset

Taulukot

Virustorjuntaohjelmia
OhjelmaTekijä
F-protFrisk
F-secure AntivirusF-secure
VirusScanMcAfee
  1. Tehdään esimerkin mukainen taulukko. Tee uusi tyhjä kappale Suojautuminen viruksia vastaan -otsikon alle.
  2. Lisää taulukko työkalupalkista Taulukko-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 Tools | EditTable | Change to Heading Cell (t h) 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.

Sisällysluettelo

Useamman sivun sisältävä WWW-sivusto

Hakemistorakenne

Luodaan kuvitteellinen kotisivusto Nanonano-nimiselle henkilölle. Sivuille halutaan seuraavia osioita:

Jätetään sivuston toiminnallisuuden toteuttaminen myöhempään vaiheeseen ja aloitetaan sivuston hakemistorakenteen suunnittelulla. Koska sivuja (.html-tiedostoja) tulee olemaan useita ja erilaisten sivujen määrä saattaa vielä jatkossakin kasvaa, on hyvä tehdä sivustolle oma hakemistorakenne. Kutakin sivua kohden on järkevä luoda oma hakemistonsa. Tämä helpottaa sivuun liittyvien tiedostojen arkistointia ja yksinkertaistaa WWW-osoitteita.

Hakemistorakenteen luonti

Sivujen rakenne

Lisätään suunnitelman mukaiset tekstit sekä kuvat useammalle sivulle ja muokataan sivujen rakenne kuntoon. Avaa suunnitelma omaan ikkunaan.

Etusivu

Tehdään ensimmäisenä sivuston etusivu, jonne tulevat seuraavat asiat:

  1. Aloita uusi dokumentti ja tallenna se W:-aseman www-hakemistoon nimellä index.html.
  2. Laita title-elementin sisällöksi Nanonano. Hakukoneet löytävät parhaiten title-elementissä olevan tekstin, jolloin sen on syytä olla perusmuodossa.
  3. Lisää sivulle pääotsikko (h1). Kirjoita otsikkoon myös Nanonano.
  4. Kirjoita lyhyt parin lauseen kuvaus siitä, mitä Nanonano harrastaa ja opiskelee. Käytä p-elementtiä.
  5. Laita väliotsikoksi (h2) Yhteystiedot ja kirjoita Nanonanon osoite, puhelinnumero ja sähköpostiosoite. Tiedot löydät suunnitelmasta.
    • Yhteystiedot saat jaettua siististi omille riveilleen br-elementin avulla. Esim.
      <p>Antti Ekonoja<br />
      Ag C522.3<br />
      2746</p>
    • Tee sähköpostiosoitteesta mailto-linkki. mailto: on kirjoitettava itse viitetekstiin, kun kyse on sähköpostiosoitteista. Linkin pitäisi näyttää seuraavan kaltaiselta:
      <a href="mailto:antti.j.ekonoja@jyu.fi">antti.j.ekonoja@jyu.fi</a>
  6. Tallenna esimerkkikuva W:\www\-hakemistoon. Lisää yhteystietojen perään uusi kappale (p) ja sijoita siihen valokuva (img).
    <img src="kuva.png" alt="Antti Ekonoja luennoi CSS-tyylisivuista" title="Luento 2" />
    • src-ominaisuus. Ominaisuus määrittää näytettävän kuvan osoitteen tai pelkän nimen, jos kuva sijaitsee samassa hakemistossa dokumentin kanssa.
    • alt-ominaisuus. Attribuutti kertoo kuvan sisällön niille, jotka eivät lataa kuvia tai joiden selain ei osaa näyttää kuvia.
    • title-ominaisuus. Ominaisuus kertoo kuvan otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri kuvan päälle.
  7. Tallenna dokumenttisi W:-aseman www-hakemistoon index.html-nimelle. index.html on useimmissa WWW-palvelimissa (Apache) oletustiedosto, joka palautetaan pyydettäessä tiettyä kansiota.
  8. Testaa sivun toimivuus Firefoxilla. Avaa sivu suoraan W:-asemalta valinnalla File | Open File.
  9. Valitse Web Developer -työkalupalkista Tools | Validate Local HTML. Tällä valinnalla saat tarkistettua, että dokumenttisi on XHTML-standardin "kieliopin" mukaista. Koodin pitäisi olla virheetöntä, jos olet noudattanut demo-ohjeita tarkasti.
  10. W-asemalle tallennetut sivut näkyvät myös WWW:ssä. Tarkista löydätkö sivusi osoitteesta:

    http://users.jyu.fi/~tunnus/www/

    missä tunnus on Tietohallintokeskuksen käyttäjätunnuksesi. Kokeile sivun toimintaa yo. WWW-osoitteesta.

Opiskelut

  1. Aloita uusi XHTML-dokumentti (samalla tavalla kuin pääsivukin) ja tallenna dokumentti W:\www\opiskelu\-kansioon index.html-nimellä. Ole tarkkana, että tallennat oikeaan kansioon. Älä tallenna vahingossa aiemmin tekemäsi dokumentin päälle.
  2. Keksi opiskeluihin liittyvälle dokumentille body-osaan järkevä pääotsikko (h1) ja head-osaan sopiva title (esim. Opiskelu tai Opiskelu - Nanonano, sivua parhaiten kuvaava sana ensin).
  3. Lisää dokumentiin toisen tason (h2) otsikko Viikkolukujärjestys.
  4. Kirjoita dokumenttiin esimerkin mukainen viikkolukujärjestys taulukkomuodossa. Taulukkojen määrittelyn voit kerrata erillisestä ohjeesta esimerkkien avulla.
    esimerkkikuva taulukosta
  5. Lisää väliotsikko Opintosuoritusote ja sen perään tekstinä Nanonanon suorittamat kurssit. Käytä pre-elementtiä, koska teksti halutaan muotoilemattomana.
  6. Tallenna ja testaa sivua selaimella. Sivun pitäisi näkyä myös osoitteessa:

    http://users.jyu.fi/~tunnus/www/opiskelu/

  7. Validoi sivusi. Valitse tällä kertaa Web Developer -työkalupalkista kohta Tools | Validate HTML, koska haluat tarkistaa WWW:ssä näkyvän WWW-sivun. Ts. Jos avaat dokumenttisi suoraan W:-asemalta on kyseessä lokaali tiedosto. Jos avaat dokumenttisi users.jyu.fi-osoitteen kautta niin silloin avaat WWW:ssä eli julkisessa verkossa kaikille näkyvää tiedostoa

Linkit

Seuraavissa demoissa muotoillaan sivujen ulkoasua.

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/ohjaus/demo7/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2012-08-13 12:33:01
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta