XHTML-perusteita - Demo 1

Mallivideot

Ongelmia videoiden katselussa?

Näissä demonstraatioissa on tarkoitus tutustua yleisimpiin HTML-elementteihin ja niiden käyttämiseen WWW-dokumenteissa. Tuotetaan pienimuotoinen sivusto, johon tehdään navigointi. Työvälineenä käytetään HTML-kit-editoria, jonka perusominaisuudet käydään läpi. Kokeillaan myös HTML-validaattorien toimintaa ja kokeillaan dokumentin muotoilua CSS:llä.

Esimerkkejä XHTML-elementtien käyttämisestä voit katsoa luento 1:en materiaalista.

HTML-kit

HTML-kit - mallivideo

Tarkista, että seuraavat asetukset ovat HTML-kitissä kunnossa. Olet saattanut tehdä osan muutoksista jo Tietokone ja tietoverkot työvälineenä -kurssin demoissa.

  1. Käynnistä HTML-kit (Start|Programs|HTML-kit|HTML-kit)
  2. Peruuta ensimmäinen ikkuna valinnalla Cancel. Ikkunasta voitaisiin myös valita tehdäänkö uusi XHTML-dokumentti vai avataanko jokin vanha.
  3. Siirrytään muuttamaan HTML-kitin asetukset järkeviksi. Valitse Edit|Preferences.
    • Valitse välilehti Proofing. Poista ruksit kolmesta ylimmäisestä valinnasta niin HTML-kit ei turhaan kiusaa automaattisella oikuluvulla, joka ymmärtää vain englantia.

      HTML-kitin asetusten proofing-välilehti

    • Valitse välilehti TIDY. Valitse Input:-kohtaan XML ja Output:-kohtaan vaihtoehto XHTML. Tämän valinnan jälkeen HTML-Kitiin sijoitettu HTML-TIDY ohjelma osaa tarvittaessa korjata tekemiäsi virheitä ja huomauttaa niistä. Valitse vielä alhaalla olevaan Wrap at-kohtaan 60 merkkiä. Valinta rivittää TIDYn antamat ehdotukset useammalle riville.

      HTML-kitin asetusten TIDY-välilehti

    • Valitse välilehti Editor. Laita päälle valinta Wrap at column. Valinta rivittää tekstin useammalle riville mikäli rivin pituus ylittää määrätyn merkkimäärän. Laita merkkimääräksi 0, jolloin teksti rivittyy ikkunan koon mukaan.

      HTML-kitin asetusten Editor-välilehti

    • Kopioi leikepöydälle seuraava dokumentin pohjakoodi. 
      <?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<title>Sivustoa kuvaava otsikko</title>
<link rel="StyleSheet" href="http://appro.mit.jyu.fi/www/demot/demo1/malli.css"
 type="text/css" />
</head>
<body>

<h1>Dokumentin pääotsikko</h1>

</body>
</html>
      Tätä pohjakoodia sinun kannattaa jatkossa käyttää kaikissa HTML-dokumenteissasi. Liitä pohjakoodi HTML-kitin asetuksissa Startup-välilehden kohtaan Insert following text into new documents:. Liittäminen tapahtuu maalaamalla edellinen pohjakoodi ja painamalla näppäinyhdistelmää CTRL + V. Tämän jälkeen HTML-kit antaa aina valmiina oikean pohjakoodin. Pohjakoodista löytyvät seuraavat määritykset:
      • xml-elementti kertoo käytetyn XML-standardin version. encoding-ominaisuus (engl. attribute) määrittelee käytetyn merkistön. iso-8859-1 tai iso-8859-15 (euro-merkki mukana) on pohjoismaissa käytettävä merkistö.
      • DOCTYPE-elementti kertoo käytetyn dokumenttityypin.
      • html-elementti sisältää varsinaisen xhtml-dokumentin. html-elementin attribuuteilla määritellään käytetty nimiavaruus (xmlns), joka pitää olla http://www.w3.org/1999/xhtml sekä dokumentin kieli (xml:lang), joka suomenkielisissä dokumenteissa on fi.
      • head-elementti sisältää kaiken dokumenttiin liittyvän metatiedon.
      • link-elementti määrittelee ulkoisen tyylitiedoston.
      • title-elementti sisältää jonkin hyvin dokumenttia kuvaavan otsikon. Otsikon pitää olla järkevä vaikka se otettaisiin erilleen koko dokumentista.
      • body-elementti sisältää kaiken varsinaisen WWW-sivulla näkyvän ja dokumentin runkoon kuuluvan informaation.
      • h1-elementti on korkeimman otsikkotason elementti. Jokaisella sivulla pitäisi aina olla vain ja ainoastaan yksi h1-elementti, joka kertoo koko dokumentin pääotsikon.
    • Hyväksy kaikki asetukset painamalla OK.
  4. Tee html-kitiin myös sopivat lyhytvalinnat ohjeen mukaan. Voit tehdä niitä myös myöhemmin demojen aikana heti kun koet niille tarvetta. Jos HTML-kitin ominaisuudet ja tehokas käyttäminen ei ole sinulle ennestään tuttua niin tutustu Tietokone ja tietoverkot työvälineenä -kurssin demoihin (pakollinen esitieto!).

Sivuston rakenne

Hakemistot - mallivideo

  1. Luodaan kuvitteellinen kotisivusto, johon 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.
  2. Olkoon henkilön nimi Nanonano. Sivuille tulevat tiedot löydät suunnitelmasta.

    Hakemistorakenne

  3. 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. Hakemisto on hyvä luoda kullekin aihepiirille jos samaan aiheeseen liittyy useampia sivuja ja kullekin yksittäisille sivulle jos sivuun liittyy useampia tiedostoja, esim. kuvia. Luo seuraavan näköinen hakemistorakenne W:-asemalle. Jos et löydä W:-asemaa niin saat sen näkyviin agoranet FAQ:n ohjeen avulla. Mikä on W:-asema?.

Sivujen rakenne

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

Etusivu

Etusivu - mallivideo

Aloita HTML-kitillä uusi dokumentti. Dokumentissasi pitäisi olla nyt XHTML 1.1 -dokumenttityypin mukainen pohjakoodi. Kirjoita ensimmäisenä sivuston etusivu, jolle tulevat seuraavat asiat:

  1. Laita title-elementin sisällöksi Nanonano. Hakukoneet löytävät parhaiten title-elementissä olevan tekstin, jolloin sen on syytä olla perusmuodossa (vielä ainakin :) ).
  2. Sivun pääotsikoksi tulee myös Nanonano.
  3. Kirjoita lyhyt parin lauseen kuvaus siitä mitä Nanonano harrastaa ja opiskelee.
  4. Laita väliotsikoksi 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>
    • Tee sähköpostiosoitteesta mailto-linkki. esim. 
      <a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a>
  5. Yhteystietojen perään lisää uusi kappale (p) ja sijoita siihen valokuva (img). Käytä esimerkkikuvaa. Tallenna kuva W:\www\-hakemistoon.
    • Lisää tekstikappaleen sisään img-elementti, johon liität seuraavat ominaisuudet:
      • src-ominaisuus määrittää näytettävän kuvan osoitteen tai pelkän nimen, jos kuva sijaitsee samassa hakemistossa dokumentin kanssa. esim. <img src="kuva.jpg" alt="Tommi Lahtonen luennoi CSS-tyylisivuista" title="Luento 2" />
      • alt-ominaisuus kertoo kuvan sisällön niille, jotka eivät lataa kuvia tai joiden selain ei osaa näyttää kuvia. esim.<img src="kuva.jpg" alt="Tommi Lahtonen luennoi CSS-tyylisivuista" title="Luento 2" />
      • title-ominaisuus kertoo kuvan otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri kuvan päälle. esim.<img src="kuva.jpg" alt="Tommi Lahtonen luennoi CSS-tyylisivuista" title="Luento 2" />
    • Kirjoita liittämällesi kuvalle järkevät title- ja alt-tekstit.
  6. Aivan dokumentin loppuun kirjoita vielä 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>
  7. Tallenna dokumenttisi W:\www\-hakemistoon nimellä index.html. index.html on useimmissa www-palvelimissa (Apache) oletustiedosto, joka palautetaan pyydettäessä tiettyä hakemistoa (esim. http://www.mit.jyu.fi/tjlahton/kuvat/).
  8. Validoi dokumentti (Tietokone ja tietoverkot työvälineenä -kurssin ohjeet) ja korjaa mahdolliset virheet.
  9. Testaa sivun toimivuus jollakin selaimella. Testaa sivu suoraan W:-asemalta ja osoitteesta http://www.it.jyu.fi/users/tunnus/www/.

Opiskelut

Opiskelut - mallivideo

Aloita uusi dokumentti. Käytä aina uusissa dokumenteissa samaa pohjakoodia.

  1. Tallenna dokumentti index.html-nimellä W:\www\opiskelu\-kansioon. 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 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äärittelystä voit katsoa esimerkkejä luentosivulta.
    esimerkkikuva taulukosta
  5. Lisää väliotsikko Opintosuoriteote ja sen perään tekstinä Nanonanon suorittamat kurssit. Käytä pre-elementtiä, koska teksti halutaan muotoilemattomana.
  6. Tallenna, validoi, korjaa virheet ja testaa selaimella.

Linkit

Linkit - mallivideo

  1. Aloita taas uusi dokumentti. Dokumenttiin lisätään suosikkilinkit.
    • Keksi dokumentille hyvä pääotsikko ja title.
    • Tallenna tiedosto nimellä index.html linkit-hakemistoon.
  2. Lisää sopivat otsikot ja suunnitelman kiinnostavat linkit sivulle järjestämättömänä listana (ul).
  3. Merkitse linkit a-elementillä ja laita href-attribuuttiin viite kyseiseen osoitteeseen.

Artikkelit

Artikkelit - mallivideo

  1. Aloita uusi dokumentti. Lisää otsikko IT ja tietoliikenne: kurkistus tulevaisuuteen. Keksi myös sopiva teksti title-elementtiin. (esim. IT ja tietoliikenne: kurkistus tulevaisuuteen - Artikkelit - Nanonano)
  2. Tallenna tiedosto artikkelit-hakemiston it-alihakemistoon nimellä index.html.
  3. Lisää artikkeliin 10 kappaletta (paragraphs) tekstiä Lorem Ipsum -generaattorilla. Palvelu tuottaa latinan kielistä tekstiä, jota käytetään usein tekstidokumenttien testitekstinä.
  4. Kopioi teksti body-elementtiin ja merkitse kappaleet p-elementillä. Lisää väliin muutama toisen tason otsikko (vaikkapa teksteillä Vertebra cervicalis ja Dorsum tergum).
  5. Tallenna kaavio.png -kuva it-hakemistoon. Lisää johonkin kohtaa dokumenttia uusi tyhjä kappale (p) ja kappaleen sisälle kaaviokuva img- elementillä.
  6. Tallenna, validoi, korjaa virheet ja testaa selaimella.
  7. Aloittele myös dokumenttia Kuinka valmistaa maistuvaa opiskelijaruokaa halvalla?. Lisää h1-otsikko ja title. Tallenna tiedosto hakemistoon kokkaus nimellä index.html.
  8. Tee uusi dokumentti artikkelit-hakemiston alle index.html-nimellä.
    • Lisää dokumentin otsikoksi Artikkelit ja title-elementtiin esimerkiksi Artikkelit - Nanonano.
    • Tee body-elementtiin järjestämätön lista artikkeleista (2 kpl).
    • Merkitse artikkelien nimet a-elementillä. Sijoita href-attribuuttiin 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). Esimerkkejä suhteellisesta viittauksesta: 
      "x.html"       Tämän hakemiston x.html-tiedosto.
"testi/"       Tämän hakemiston alihakemisto testi.
"testi/x.html" Tämän hakemiston testi-alihakemiston x.html-tiedosto.
"../"          Isähakemisto (hakemisto, jossa nykyinen hakemisto sijaitsee).
"../testi/"    Isähakemiston alihakemisto testi.
    • Tallenna ja validoi dokumentti.

Navigointi

Navigointi - mallivideo

Tarkoituksena on luoda jokaiselle sivulle navigointi. Navigointi koostuu kahdesta osasta. Sivun yläreunaan halutaan palkki, joka kertoo missä sivu sijaitsee sivuston hierarkiarakenteessa. Kustakin navigointipalkin tekstin osasta tehdään linkki kyseiselle sivulle paitsi tietenkin viimeisestä, koska se viittaa sivulle, jota parhaillaan selataan.

Ylänavigointi

Lisäksi sivun toiseen laitaan halutaan yleisnavigointi, josta löytyy sivuston pääkohdat. Kustakin listan kohdasta tehdään linkki kyseiselle sivulle. Navigointipalkkien muotoilu tehdään myöhemmissä demoissa. Tässä vaiheessa keskitytään määrittämään palkkien sisältö ja rakenne.

Esimerkki navigointipalkista

  1. Avaa etusivu-dokumentti. Lisää body-elementin alkuun div-elementti, jolle annat attribuutin class arvoksi navbartop.
  2. Lisää lohkon sisään järjestämätön lista (ul) ja ainoaksi lista-alkioksi (li) pieni kuva nanonanosta.
  3. Tee ensimmäisen div-elementin jälkeen toinen div-lohko. Sijoita tämän lohkon class-attribuutin arvoksi navbar.
  4. Lisää lohkoon järjestämätön lista (ul) ja siihen lista-alkioksi kaikki tarjolle olevat alasivut (Artikkelit, Galleria, Harrastukset, Linkit, Opiskelu, Työt, Vieraskirja).
  5. Tee kohdista Opiskelu, Linkit ja Artikkelit linkit kyseisiin alihakemistoihin. Muihin kohtiin ei tehdä vielä linkkejä, koska kyseiset sivut eivät ole vielä valmiina.
  6. Kopioi molemmat lohkot leikepöydälle ja avaa alihakemistojen index.html- tiedostot muokkaamista varten.
    • Liitä div-lohkot leikepöydältä kunkin dokumentin body-elementin alkuun.
    • Muokkaa kussakin tiedostossa ensimmäistä div-lohkoa siten, että lisäät listakohdaksi alasivujen otsikot. Esimerkiksi kokkaus-hakemiston dokumenttiin (index.html-tiedostoon) tulisi siis lista:
      • Nanonanon kuva Nanonanon kuva ylänavigoinnissa.
      • Artikkelit
      • Kuinka valmistaa maistuvaa opiskelijaruokaa halvalla?
    • Tee listakohdista linkit haluttuihin sivuihin. Nanonanon kuvasta tehdään linkki etusivulle. Viimeisestä kohdasta ei tehdä linkkiä. Käytä suhteellista viittausta. Esimerkiksi kokkaus-hakemiston index.html-tiedoston body-elementin alkuun tulisi: 
      <div class="navbartop">
<ul>
  <li><a href="../../"><img src="../../nanonano.png" alt="Nanonano" /></a></li>
  <li><a href="../">Artikkelit</a></li>
  <li>Kuinka valmistaa maistuvaa opiskelijaruokaa halvalla?</li>
</ul>
</div>
    • Muokkaa kunkin tiedoston toisen div-lohkon linkit viittaamaan oikeaan paikkaan. Merkitse linkit niihin kohtiin, jotka ovat valmiina. Älä poista listakohtia vaikka niihin ei vielä tulisikaan linkkiä. Luonnollisesti linkkiä ei tarvitse, mikäli se viittaa itseensä (esim. opiskelu-sivulta opiskelu-sivulle). Esimerkiksi ruokaohjeita koskevaan artikkeliin tulisi seuraavanlaiset linkit: 
      <div class="navbar">
<ul>
  <li><a href="../">Artikkelit</a></li>
  <li>Galleria</li>
  <li>Harrastukset</li>
  <li><a href="../../linkit/">Linkit</a></li>
  <li><a href="../../opiskelu/">Opiskelu</a></li>
  <li>Työt</li>
  <li>Vieraskirja</li>
</ul>
</div>
  7. Testaa koko sivuston toimivuus jollakin selaimella. Testaa sivu suoraan W:-asemalta ja osoitteesta http://www.it.jyu.fi/users/tunnus/www/. Miksi linkit toimivat eri tavalla suoraan W:-asemalta käytettyinä kuin www.it.jyu.fi:n kautta?

Tyylit

Tyylit - mallivideo

Kokeile vaihtaa etusivun tyyliä muuttamalla head-elementissä olevan CSS-linkin (link) viitettä (href) muuhun tyylitiedostoon. Kokeile esimerkiksi seuraavia tyylitiedostoja:

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

Lisätehtäviä

Suunnitelmassa on vielä muutamia kohtia, joista ei ole tehty omia sivuja. Luo sivut suunnitelman pohjalta ja tallenna ne sopiviin hakemistoihin. Ainakin seuraaville kohdille voisi vielä luoda omat sivunsa:

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/www/demot/demo1/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2004-05-18 10:59:32
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto