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. Työvälineenä käytetään XetorjEdit-editoria, jonka perusominaisuudet käydään läpi. Kokeillaan dokumentin muotoilua CSS:llä.

Yleisimmät elementit löydät osoitteesta:

http://appro.mit.jyu.fi/doc/www/

ja esimerkkejä yleisimmistä elementeistä löydät osoitteesta:

http://appro.mit.jyu.fi/doc/www/esim.html

sekä luento 1:en materiaalista.

XetorjEdit

Xetor - mallivideo

  1. Kopioi leikepöydälle seuraava dokumentin pohjakoodi. 
    <?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.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 XHTML-dokumenteissasi.
    • 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.
  2. Käynnistä XetorjEdit valinnalla Start | All Programs | jEdit | jEdit.
  3. Aloita uusi dokumentti valinnalla File | New. Liitä pohjakoodi leikepöydältä koodi-ikkunaan.
  4. Tallenna dokumentti pohja10.html-nimellä V-asemalle. Huomaa, että koko tiedoston nimi mukaanlukien .html-pääte on itse kirjoitettava File Name -kohtaan. Jatkossa kaikki tallennukset tehdään V-asemalle.
  5. Nyt XetorjEdit huomaa, että käsittelet XHTML-muotoista tietoa. Xetor kysyy haetaanko dokumenttityypin määritys netistä. Kysymyksiä tulee useita. Vastaa Yes kaikkiin kohtiin. Jos et vastaa kaikkiin myöntävästi niin dokumenttisi validointi ei onnistu ja Xetorin alalaidan virhelistauksessa on omituisia valituksia DTD:stä. Asian saa korjattua valitsemalla Plugins|XML|Clear Resource Cache ja Plugins|XML|Reload Catalogs ja tallentamalla dokumentin.
  6. Nyt Xetor on toimintakunnossa ja tekee tarkistuksia ja tarjoaa elementtejä. Lue Xetorin käytöstä seuraava lyhyt käyttöopastus:

    http://appro.mit.jyu.fi/doc/xetor/

    Kokeile Xetorin eri toimintoja. Xetorin käyttöä on opeteltu myös Tietokone ja tietoverkot työvälineenä -kurssin demoissa 6 ja 7 (kurssin pakollinen esitieto).

Sivuston rakenne

Hakemistot - mallivideo

  1. Luodaan kuvitteellinen kotisivusto, johon halutaan seuraavia osioita:

    Hakemistorakenne

    • 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. Avaa suunnitelma uuteen selainikkunaan. Suunnitelmasta siirretään vaiheittain tietoa Nanonanon kotisivulle.
  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. Kutakin sivua kohden on hyvä luoda oma hakemistonsa. Tämä helpottaa sivuun liittyvien tiedostojen arkistointia ja yksinkertaistaa WWW-osoitteita. 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.

Etusivu

Etusivu - mallivideo

Aloita uusi dokumentti ja liitä koodi-ikkunaan äsken kopioimasi pohjakoodi. Tallenna dokumentti V:-aseman www-hakemistoon nimellä index.html. 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>
      br-elementtejä on helpointa lisäillä vasemman alalaidan tekstinäkymästä.
    • 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 V:\www\-hakemistoon.
    • Lisää tekstikappaleen sisään img-elementti. Muokkaa img-elementin ominaisuuksia valitsemalla elementin puusta oikealla hiiren napilla ja napauttamalla kohtaa Edit. Täydennä seuraavat ominaisuudet
      • src-ominaisuus. 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. Attribuutti 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. 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" />
  6. 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>
  7. 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:

    Hakemistorakenne peoplessa ja vastaavat WWW-osoitteet

  8. Testaa sivun toimivuus jollakin selaimella. Avaa sivu suoraan V:-asemalta valinnalla File | Open file. Tallentamasi sivu näkyy myös osoitteessa:

    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

Opiskelut - mallivideo

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

  1. Tallenna dokumentti index.html-nimellä V:\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 (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äärittelystä voit katsoa esimerkkejä seuraavasta dokumentista.
    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, korjaa mahdolliset Xetorin ilmoittamat virheet ja testaa selaimella. Sivun pitäisi näkyä myös osoitteessa:

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

Linkit

Linkit - mallivideo

  1. Aloita taas uusi dokumentti ja kopioi siihen pohjakoodi. Dokumenttiin lisätään suosikkilinkit.
    • Keksi dokumentille hyvä pääotsikko ja title.
    • Tallenna tiedosto nimellä index.html linkit-hakemistoon.
  2. Keksi sopivat linkkitekstit ja lisää suunnitelman kiinnostavat linkit sivulle järjestämättömänä listana (ul).
  3. Merkitse linkit a-elementillä ja laita href-attribuuttiin viite kyseiseen osoitteeseen. 
    <a href="http://www.osoite.example/">Linkkiteksti</a>
  4. Katso alareunan Error list-palkista, ettei sivulle ole tullut virheitä. Kokeile sivua selaimella.

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, korjaa mahdolliset 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 (josta oletuksena näytetään sivu index.html).
"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 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.

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/>
2005-01-14 18:24:55
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto