XHTML-perusteita - Demo 1

• Mallivideot
• Alkuvalmistelut
• Sivuston rakenne
  • Hakemistorakenteen luonti
• Sivujen rakenne
  • Etusivu
  • Opiskelut
  • Linkit
  • Artikkelit
• Tyylit
• Lisätehtäviä

Näissä demonstraatioissa on tarkoitus tutustua yleisimpiin XHTML-elementteihin ja niiden käyttämiseen WWW-dokumenteissa. Kokeillaan dokumentin muotoilua CSS:llä. Aloitetaan pienen sivuston tekeminen. Demotehtävät on suunniteltu Amaya-editorille, mutta myös XetorjEdit tai HTML-kit käy. Yleisimmät käytettävät elementit esimerkkien kera löydät erillisestä dokumentista tai luento 1:en materiaalista

Alkuvalmistelut

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

1. Mene Web Developer -laajennoksen asennussivulle.
2. Napauta Install Now ja sama myös esiin tulevasta ikkunasta.
3. Käynnistä Mozilla Firefox uudelleen
4. Työkalupalkin saa näkyviin valinnalla View | Toolbars | Web Developer Toolbar

Demoissa käytettävän XHTML-editorin saa kotikoneelle osoitteesta:

http://www.w3.org/Amaya/User/BinDist.html

Sivuston rakenne

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

• Etusivu, joka sisältää lyhyen kuvauksen henkilöstä, yhteystiedot, valokuvan.
• Artikkelisivu, johon henkilö voi kirjoittaa dokumentteja yleisesti kiinnostavista aiheista.
• Opiskelusivut, jolta löytyy henkilön lukujärjestys, tiedot suoritetuista kursseista ja kurssien harjoitustyöt.
• Töihin liittyvä sivut, jonne sijoitetaan mm. henkilön CV ja työtehtäviin liittyviä kiinnostuksen kohteita.
• Harrastussivut, josta löytyy tietoa henkilön erilaisista harrastuksiksi
• Kuvagalleriasivut, johon sijoitetaan digikameralla otettuja tai skannattuja valokuvia.
• Linkkisivu, jonne sijoitetaan suosikkilinkit ja linkit kaverien sivustoille.
• Vieraskirjasivu, johon kävijät saavat käydä laittamassa kommenttejaan.
• Navigointi sivuista toisille niin, että sivulta toiselle liikkuminen on helppoa.

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

1. Avaa Windows Explorer (suom. resurssienhallinta) ja luo ylläolevaa kuvaa vastaava hakemistorakenne V:-asemalle.

Sivujen rakenne

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

Käynnistä Amaya-editori valinnalla Start | All Programs | Amaya | Amaya 9.22

Etusivu

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

1. Aloita uusi dokumentti ja tallenna se V:-aseman www-hakemistoon nimellä index.html. Valitse dokumentin tyypiksi XHTML 1.1.
2. Valitse Views | Show source. Avaa selaimeen luennolla 1 esitetty XHTML-dokumentin pohja selitteineen. Tutki mitä osia pohjassa on. XetorjEdit- ja HTML-kit-editoreissa joudut itse kopioimaan pohjan dokumentin alkuun.
3. Laita title-elementin sisällöksi Nanonano. Hakukoneet löytävät parhaiten title-elementissä olevan tekstin, jolloin sen on syytä olla perusmuodossa. Amayassa title-elementtiä voi muokata valinnalla XHTML | Change Title...
4. Lisää sivulle pääotsikko (h1). Kirjoita otsikkoon myös Nanonano.
5. Kirjoita lyhyt parin lauseen kuvaus siitä mitä Nanonano harrastaa ja opiskelee.
6. Laita väliotsikoksi (h2) Yhteystiedot ja kirjoita sen osoite, puhelinnumero ja sähköpostiosoite. Tiedot löydät suunnitelmasta.
   • Yhteystiedot saat jaettua siististi omille riveilleen br-elementin avulla. Esim.

     <p> Tommi Lahtonen<br />
     AgC431.2<br />
     2746<br />
     </p>

     br-elementin saat lisättyä valinnalla XHTML | Break (br)
   • Tee sähköpostiosoitteesta mailto-linkki. Linkin voit luoda maalaamalla linkkitekstin ja valitsemalla Links | Create or change link. mailto: on kirjoitettava itse viitetekstiin, kun kyse on sähköpostiosoitteista. Koodinäkymissä linkin pitäisi näyttää seuraavan kaltaiselta:

     <a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a>

7. Tallenna esimerkkikuva V:\www\-hakemistoon. Lisää yhteystietojen perään uusi kappale (p) ja sijoita siihen valokuva (img).

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

   • Amayassa kuvan voi lisätä työkalupalkin -painikkeella.
   • Lisää title-ominaisuuteen jokin sopiva teksti. Kuvan ominaisuudet näkyvät nyt työkalupalkin Attributes-kohdan alla.
     • 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.
8. 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>

   • address-elementin saa valinnalla XHTML | address
   • Linkkien ominaisuuksia pystyy muokkaamaan työkalupalkin Attributes-kohdan alta kunhan vie kursorin ensin linkkitekstin kohdalle ja napauttaa F2
   • Elementtejä voi myös valita rakennenäkymästä (Views | Show structure). Huomaa, että pelkkä tekstin maalaaminen ei useinkaan valitse itse elementtiä!
9. Tallenna dokumenttisi V:-aseman www-hakemistoon index.html-nimelle. index.html on useimmissa www-palvelimissa (Apache) oletustiedosto, joka palautetaan pyydettäessä tiettyä hakemistoa. Esimerkkikuva havainnollistaa millä WWW-osoitteilla esimerkiksi people.cc.jyu.fi-palvelimelle sijoitettuihin tiedostoihin viitataan:

   

10. Testaa sivun toimivuus jollakin selaimella. Avaa sivu suoraan V:-asemalta valinnalla File | Open file.
11. Valitse Web Developer -työkalupalkista Tools | Validate Local HTML. Tällä valinnalla saat tarkistettua, että dokumenttisi on XHTML-standardin "kieliopin" mukaista. Amayan pitäisi tuottaa dokumentteja virheettömästi, mutta esimerkiksi koodinäkymässä tehtyjä muutoksia se ei pysty tarkistamaan.
12. V-asemalle tallennetut sivut näkyvät myös internetiin. Tarkista löydätkö sivusi osoitteesta:

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

    missä tunnus on ATK-keskuksen käyttäjätunnus. Kokeile sivun toimintaa yo. WWW-osoitteesta.

Opiskelut

1. Aloita uusi XHTML 1.1 -dokumentti ja tallenna dokumentti V:\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 otsikko Viikkolukujärjestys.
4. Kirjoita dokumenttiin esimerkin mukainen viikkolukujärjestys taulukkomuodossa. Taulukkojen määrittelyn voit kerrata Tietokone ja tietoverkot työvälineenä -kurssin demoista 6.
   
5. Lisää väliotsikko Opintosuoriteote ja sen perään tekstinä Nanonanon suorittamat kurssit. Käytä pre-elementtiä, koska teksti halutaan muotoilemattomana. pre-elementin saat valinnalla XHTML | Preformatted (pre)
6. Tallenna ja testaa sivua selaimella. Sivun pitäisi näkyä myös osoitteessa:

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

7. Validoi sivusi. Valitse tällä kertaa Web Developer -työkalupalkista kohta Tools | Validate HTML, koska haluat tarkistaa internetiin näkyvän WWW-sivun.

Linkit

1. Aloita taas uusi dokumentti Dokumenttiin lisätään suosikkilinkit. Tallenna tiedosto index.html-nimellä linkit-hakemistoon.
2. Lisää asianmukainen otsikot (title ja h1)
3. Keksi sopivat linkkitekstit ja lisää suunnitelman kiinnostavat linkit sivulle järjestämättömänä listana (ul).
   • Listan saa aloitettua -painikkeella.
   • Kunkin listakohdan jälkeen on napautettava kaksi kertaa enteriä niin saa luotua uuden listakohdan.
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.

Artikkelit

1. Aloita uusi dokumentti. Tallenna tiedosto artikkelit-hakemiston it-alihakemistoon nimellä index.html.
2. Lisää otsikko IT ja tietoliikenne: kurkistus tulevaisuuteen. Keksi myös sopiva teksti title-elementtiin. Esim.

   IT ja tietoliikenne: kurkistus tulevaisuuteen - Artikkelit - Nanonano

3. Lisää artikkeliin 10 kappaletta (paragraphs) tekstiä Lorem Ipsum -generaattorilla. Palvelu tuottaa latinan kielistä tekstiä, jota käytetään usein tekstidokumenttien testitekstinä.
4. Liitä teksti dokumenttiin. Tarkista, että kukin kokonainen kappale on merkitty p-elementillä. Poista ylimääräiset tyhjät tekstikappaleet (<p></p>).
5. Lisää väliin muutama toisen tason otsikko vaikkapa teksteillä Vertebra cervicalis ja Dorsum tergum.
6. Tallenna kaavio.png -kuva it-hakemistoon. Lisää johonkin kohtaa dokumenttia uusi tyhjä kappale (p) ja kappaleen sisälle kaaviokuva.
7. Tallenna dokumentti ja testaa selaimella.
8. Tee kokkaus-hakemistoon uusi dokumentti index.html-nimellä. Lisää looginen title, esimerkiksi:

   Kuinka valmistaa hyvää opiskelijaruokaa halvalla? - Artikkelit - Nanonano

   Lisää myös sopiva h1-otsikko, mutta muutoin dokumentin tekemisen voi jättää alkutekijöihin.
9. Tee uusi dokumentti artikkelit-hakemiston alle index.html-nimellä.
   • Lisää dokumentin otsikoksi Artikkelit ja title-elementtiin esimerkiksi

     Artikkelit - Nanonano

   • Aloita järjestämätön lista artikkeleista ja lisää listakohdiksi artikkelien nimet.
   • Tee artikkeleista linkkejä valinnalla Links | Create or change link. Sijoita viitetekstiksi (href-attribuutti) suhteellinen viite kyseiseen artikkeliin.
     • Voit viitata artikkelin sisältävään hakemistoon, koska WWW-palvelin tarjoaa ensimmäisenä hakemistossa olevaa index.html-tiedostoa.
     • Suhteellisesta viittauksesta Tietokone ja tietoverkot työvälineenä -kurssin Unix-luennolla.
     • Viittaukset tehdään suhteessa artikkelit-hakemistoon, jossa viittaava dokumentti sijaitsee. Esimerkkejä suhteellisesta viittauksesta:

       "foo.html"       Tämän hakemiston foo.html-tiedosto.
       "testi/bar.html" Tämän hakemiston testi-alihakemiston bar.html-tiedosto.
       "testi/"         Alihakemisto testi, josta näytetään sivu index.html.
       "../"            Isähakemisto (ylempi taso, jossa nykyinen hakemisto sijaitsee).
       "../testi/"      Isähakemiston alihakemisto testi.
       

10. Tallenna dokumentti. Kokeile sivua suoraan avaamalla sivu selaimessa valinnan File | Open file... kautta sekä suoraan WWW-osoitteesta. Kokeile molemmissa tapauksissa tekemiäsi linkkejä. Mieti miksi linkit vievät erinäköisille sivuille vaikka kyseessä onkin sama dokumentti.
11. Validoi tekemäsi sivut.

Tyylit

Kokeile vaihtaa etusivun tyyliä muuttamalla head-elementissä olevan CSS-linkin (link) viitettä (href) muuhun tyylitiedostoon. Amayassa link-elementin voi lisätä valinnalla Style | Link. Huomaa, että valinta ei vaihda tyylitiedostoa vaan lisää aina uuden, joten vanha on ensin poistettava valinnalla Style | Remove. Kokeile esimerkiksi seuraavia tyylitiedostoja:

• http://www.danielgreene.com/styles/pretty.css
• http://www.danielgreene.com/styles/photo.css
• http://www.danielgreene.com/styles/oldstyle.css
• http://www.danielgreene.com/styles/typewriter.css

Lisää esimerkkejä sivuston ulkoasun muuttamisesta löydät CSS Zen Garden -sivustolta. Demossa 2 muokkaamme itse sivuston ulkoasua CSS-tyyleillä.

Lisätehtäviä

Laajaa sivustoa päivitetään yleensä ajan kanssa. Suunnitelmassa on vielä useita kohtia, joista ei ole tehty omia sivuja. Luo harkintasi mukaan sivut suunnitelman pohjalta ja tallenna ne sopiviin hakemistoihin. Ainakin seuraaville kohdille voisi vielä luoda omat sivunsa:

• Harrastussivut ja niiden alisivut.
• Harkkasivut opiskelukansiossa. Harjoitustöitä eri kursseilta.
• Työsivut. CV ja esimerkkejä osaamisalueista.
• Reseptejä ja kokkausta. Suosikkireseptejä nimen mukaan hakemistoihin jaoiteltuna.
• Galleria ja vieraskirja. Nämä toteutetaan myöhemmissä demoissa.