XHTML-perusteita - Demo 1

• Alkuvalmistelut
• Sivuston rakenne
• Etusivu
• Opiskelut
• Linkit
• Navigointi

Näissä demonstraatioissa on tarkoitus tutustua yleisimpiin XHTML-elementteihin ja niiden käyttämiseen WWW-dokumenteissa.

Jos olet käynyt kurssin ITKY202 WWW-julkaiseminen äskettäin niin lyhyt kertaus vähemmän tutuista elementeistä, entiteeteistä ja suhteellisesta viittauksesta riittää.

Jos et ole koskaan tehnyt WWW-sivuja niin aloita ITKP101-kurssin demotehtävillä.

Alkuvalmistelut

Mozilla Firefox -selaimeen kannattaa asentaa erittäin hyödyllinen työkalu Web Developer Toolbar.

Nämä demotehtävät voi tehdä haluamallaan WWW-sivueditorilla, mutta suositeltavia ovat Amaya, HTML-kit tai XetorjEdit. Nämä kaikki ohjelmat löytyvät Agoran mikroluokista. Seuraavilla ohjeilla pääset alkuun XHTML-dokumenttien luonnissa:

• Amaya -aloitusohje
• HTML-kit -aloitusohje
• XetorjEdit -aloitusohje

Tehtävissä voit käyttää apunasi listausta Yleisimmin käytetyistä elementeistä yhdessä luento 1:en materiaalin kera.

Sivuston rakenne

Luodaan kuvitteellinen kotisivusto Nanonano-nimiselle henkilölle.

Avaa Windows Explorer (suom. resurssienhallinta) ja luo viereistä kuvaa vastaava hakemistorakenne V:-asemalle johonkin alihakemistoon.

Etusivu

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

1. Aloita uusi dokumentti ja tallenna se luomasi alihakemistoon juureen index.html -nimellä. index.html on useimmissa www-palvelimissa (Apache) oletustiedosto, joka palautetaan pyydettäessä tiettyä hakemistoa (esim. http://people.cc.jyu.fi/~tunnus/hakemisto/).
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 Nanonanosta.
5. Lisää pari väliotsikkoa (h2) Työt ja Harrastukset. Kirjoita näiden väliin muutama tekstikappale, jotka kuvaavat Nanonanon vapaa-ajan harrastuksia. Tekstin voit kopioida suunnitelmasta.
6. Korosta muutamia tekstejä:
   • Vahvenna (strong) hinta 8000e.
   • Korosta (em) "muut kolmikirjaimisen lyhenteet"
   • Merkitse aikatuloste samp-elementillä
   • Täsmennä jokin kolmikirjaiminen lyhenne abbr-elementillä. Aseta abbr-elementin title-ominaisuuden arvoksi lyhennelmän selitys.
7. Lisää lyhyt määritelmälista (dl), johon määrittelet (dd) suunnitelmassa esitetyt lyhenteet (dt).
8. Tallenna esimerkkikuva demohakemistosi juureen. Lisää dokumenttiisi johonkin sopivaan väliin uusi kappale (p) ja sijoita sen sisälle kuva (img).

   <img src="kuva.png" alt="Tommi Lahtonen luennoi CSS-tyylisivuista" title="Luento 2" />

   • Lisää title-ominaisuuteen jokin sopiva teksti.
     • 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.
9. Kirjoita vielä dokumentin loppuun tiedot sivun ylläpitäjästä ja sivun päivitysajankohdasta seuraavan esimerkin mukaan:

   <address>
   <a title="Sivun ylläpitäjä" href="http://www.cc.jyu.fi/%7ekäyttäjätunnus/">
    Matti Meikäläinen</a>
   (<a title="Sivun ylläpitäjän sähköpostiosoite" href="mailto:tunnus@cc.jyu.fi">
    tunnus@cc.jyu.fi</a>)
   <strong>2000-09-18 12:47</strong>
   </address>

   • Yhteystiedot saat jaettua siististi omille riveilleen br-elementin avulla.
   • Tee sähköpostiosoitteesta mailto-linkki.
10. Tallenna dokumenttisi. Testaa sivun toimivuus Firefox-selaimella. Avaa sivu suoraan V:-asemalta valinnalla File | Open file.
    • Kokeile samaa Internet Explorerilla (versio 5 tai 6). Mitä tapahtuu? IE ei osaa näyttää text/xml tai application/xhtml+xml -tyyppistä tietoa oikein.
11. Valitse Firefox-selaimeen asentamastasi Web Developer -työkalupalkista Tools | Validate Local HTML. Tällä valinnalla saat tarkistettua, että dokumenttisi on XHTML-standardin kieliopin mukaista.
12. V-asemalle tallennetut sivut näkyvät myös osoitteesta:

    http://www.ad.jyu.fi/users/tunnuksen_1._kirjain/tunnus/hakemisto/

    missä tunnus on ATK-keskuksen käyttäjätunnus. Kokeile sivun toimintaa yo. WWW-osoitteesta.
    • Kokeile sivun toimintaa Internet Explorerilla. Miksi sivu toimiikin nyt? Palvelin lähettää sivun text/html-tyyppisenä ja IE käsittelee sivun HTML:nä ja näyttää lähes oikein.
13. Siirrä sivusi ja tekemäsi hakemistot SSH Secure File Transfer -ohjelmalla people.cc.jyu.fi-palvelimen www-hakemiston kokonaisuudessaan. Testaa sivua osoitteesta:

    http://people.cc.jyu.fi/~tunnus/hakemisto/

    Kokeile validointi suoraan kyseisestä osoitteesta valitsemalla Web Developer Toolbarista kohta Tools | Validate HTML

Opiskelut

1. Aloita uusi XHTML-dokumentti ja tallenna dokumentti opiskelu-hakemistoon 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 otsikko Viikkolukujärjestys.
4. Kirjoita dokumenttiin esimerkin mukainen viikkolukujärjestys taulukkomuodossa. Taulukkojen määrittelyn voit kerrata esimerkkisivulta.
   
5. Lisää väliotsikko Opintosuoriteote ja sen perään tekstinä Nanonanon suorittamat kurssit. Käytä pre-elementtiä, koska teksti halutaan muotoilemattomana.
6. Tallenna ja testaa sivua selaimella.
7. Validoi sivusi.
8. Mikäli sait virheilmoituksia niin kyse on luultavasti siitä, että et ole koodannut tekstissä käytettyjä < ja > -merkkejä. Näillä on erityiasema XHTML-koodissa, ne erottavat elementtejä pelkästä tekstistä. Käytä entiteettejä &lt; ja &gt; näiden merkkien tilalla.

Linkit

1. Aloita taas uusi dokumentti. Tallenna tiedosto index.html-nimellä linkit-hakemistoon.
2. Lisää asianmukaiset otsikot (title ja h1)
3. Keksi sopivat linkkitekstit ja lisää suunnitelman kiinnostavat linkit sivulle järjestämättömänä listana (ul).
4. Tee linkkiteksteistä hyperlinkkejä. Laita viitetekstiksi kyseisen sivun www-osoite (a-elementin href-attribuutti)

   <a href="http://www.osoite.example/">Linkkiteksti</a>

5. Testaa sivua selaimella ja validoi se.
6. Mikäli saat virheen niin se voi johtua siitä, että et ole koodannut & -merkkiä. & -merkki aloittaa entiteetin XHTML-koodissa. Jos haluat normaalin & -merkin niin sen tilalla on käytettävä entiteettiä &amp;

Navigointi

1. Lisää ensimmäisen tekemäsi dokumentin alkuun lista (ul), johon listakohdat teksteiksi Opiskelu ja Linkit.
2. Tee näistä teksteistä linkit opiskelu- ja linkit-alihakemistoihin. Käytä suhteellista viittausta. Viittaa hakemistoon, ei siis suoraan tiedostoon:
   • VÄÄRIN: ../kuvat/index.html
   • VÄÄRIN: kuvat/omatkuvat.html
   • OIKEIN: ../kuvat/
   • OIKEIN: kuvat/omatkuvat/
3. Tee opiskelu-hakemistossa olevan dokumentin alkuun kahden kohdan linkkilista Nanonano-sivulle ja linkkeihin. Käytä suhteellista viittausta.
4. Tee linkit-hakemistossa olevan dokumentin alkuun kahden kohdan linkkilista Nanonano-sivulle ja opiskeluihin. Käytä suhteellista viittausta.
5. Kokeile navigoida sivujen välillä alussa olevien linkkien avulla. Mitä vikaa nykyisessä linkkilistassa on käytettävyyden kannalta?
6. Tee etusivulle sisäiset linkit sivun väliotsikoihin (h2)