XHTML-perusteita - Demo 1
Mallivideot
- hakemisto.wmv 3.8M
- etusivu.wmv 5.3M
- opiskelut.wmv 3.7M
- linkit.wmv 2.5M
- artikkelit.wmv 7.4M
- tyylit.wmv 2.3M
Ongelmia videon katselussa?
Näissä demonstraatioissa on tarkoitus tutustua yleisimpiin XHTML-elementteihin ja niiden käyttämiseen WWW-dokumenteissa. Lisäksi kokeillaan dokumentin muotoilua CSS:llä ja aloitetaan pienen sivuston tekeminen. Demotehtävät voi tehdä millä tahansa editorilla, esimerkiksi HTML-Kit-editorilla, Amaya-editorilla tai vaikka Windowsin Notepadilla. Mallivideoissa käytetään HTML-Kit-editoria. Yleisimmät käytettävät elementit esimerkkien kera löydät erillisestä dokumentista tai luento 1:en materiaalista.
Suositeltava WWW-selain käytettäväksi demojen yhteydessä on Mozilla Firefox, johon saa asennettua demoissa käytettäviä laajennuksia.
Alkuvalmistelut
Kotikoneelle kannattaa ladata joku aiemmin mainituista editoreista. Lataaminen onnistuu aiemmin mainituilta editorien esittelysivuilta. Luennoilla esimerkit näytetään yleensä HTML-Kit-editorilla.
Mozilla Firefox -selaimeen kannattaa asentaa hyödyllisiä lisätyökaluja; ainakin Web Developer ja FireBug.
Web Developer -asennus:
- Mene Web Developer -laajennoksen asennussivulle.
- Napauta sivulta Add to Firefox ja sen jälkeen Install Now esiin tulevasta ikkunasta.
- Käynnistä Mozilla Firefox uudelleen.
- Työkalupalkin saa näkyviin valinnalla View | Toolbars | Web Developer Toolbar.
FireBug-asennus:
- Mene FireBug-laajennoksen asennussivulle.
- Napauta sivulta Add to Firefox ja sen jälkeen Install Now esiin tulevasta ikkunasta.
- Käynnistä Mozilla Firefox uudelleen.
- Laajennokseen pääset käsiksi valinnalla Tools | FireBug | ...
Sivuston rakenne
Luodaan kuvitteellinen kotisivusto Nanonano-nimiselle henkilölle. Sivuille halutaan seuraavia osioita:
- Etusivu, joka sisältää lyhyen kuvauksen henkilöstä, yhteystiedot ja valokuvan.
- Artikkelisivu, johon henkilö voi kirjoittaa dokumentteja yleisesti kiinnostavista aiheista.
- Opiskelusivut, joilta löytyy henkilön lukujärjestys, tiedot suoritetuista kursseista ja kurssien harjoitustyöt.
- Töihin liittyvät sivut, jonne sijoitetaan mm. henkilön CV ja työtehtäviin liittyviä kiinnostuksen kohteita.
- Harrastussivut, joista löytyy tietoa henkilön erilaisista harrastuksista.
- 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.
HUOM! Demo-ohjeissa oletetaan, että ne tehdään Agoran mikroluokissa, jolloin tiedostot voidaan siirtää suoraan Resurssienhallinnan kautta W-asemalle. Jos tehtäviä tekee kotikoneelta, siirtoon täytyy käyttää SSH-ohjelmaa, jonka käyttöä WWW-sivujen julkaisussa ohjeistetaan esimerkiksi Tietotekniikan opettajan työvälineitä -kurssin demossa 1.
Hakemistorakenteen luonti
- Avaa Windows Explorer (suom. Resurssienhallinta) ja luo ylläolevaa kuvaa vastaava hakemistorakenne W:-asemalle. Jos et löydä omaa W:-asemaa, niin tee tarvittavat alkutoimenpiteet, joihin löytyy ohjeistus Tietotekniikan opettajan työvälineitä -kurssin demosta 1. Toimenpiteiden jälkeen W-aseman pitäisi tulla näkyviin seuraavalla koneelle kirjautumiskerralla.
- HUOM! Jos et alkutoimenpiteiden jälkeenkään löydä W:-asemaa, voit kokeilla muuttaa salasanasi salasana.jyu.fi-palvelussa. Se on auttanut ongelmaan useimmilla. Salasanan muuttamisen jälkeen koneelta täytyy kirjautua ulos ja sen jälkeen kirjautua uudelleen sisälle, jotta W:-asema tulee näkyviin.
Sivujen rakenne
Lisätään suunnitelman mukaiset tekstit sekä kuvat useammalle sivulle ja muokataan sivujen rakenne kuntoon. Avaa suunnitelma omaan ikkunaan.
Käynnistä haluamasi editori.
Etusivu
Tehdään ensimmäisenä sivuston etusivu, jonne tulevat seuraavat asiat:
- Aloita uusi dokumentti ja tallenna se W:-aseman www-hakemistoon nimellä index.html.
- Avaa selaimeen luennolla 1 esitetty XHTML-dokumentin pohja selitteineen. Tutki mitä eri osia pohjassa on. Kopioi pohja dokumentin alkuun (poista editorin oletuksena antamat tekstit).
- Laita title-elementin sisällöksi Nanonano. Hakukoneet löytävät parhaiten title-elementissä olevan tekstin, jolloin sen on syytä olla perusmuodossa.
- Lisää sivulle pääotsikko (h1). Kirjoita otsikkoon myös Nanonano.
- Kirjoita lyhyt parin lauseen kuvaus siitä, mitä Nanonano harrastaa ja opiskelee. Käytä p-elementtiä.
- 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>
- Yhteystiedot saat jaettua siististi omille riveilleen br-elementin
avulla.
Esim.
-
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.
- 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://users.jyu.fi/~kayttajatunnus/"> Matti Meikäläinen</a> (<a title="Sivun ylläpitäjän sähköpostiosoite" href="mailto:etunimi.x.sukunimi@jyu.fi"> etunimi.x.sukunimi@jyu.fi</a>) <strong>2011-01-13 14:48</strong> </address>
href
-ominaisuus. Ominaisuus määrittää linkin osoitteen.title
-ominaisuus. Ominaisuus kertoo linkin otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri linkin päälle.
- Tallenna dokumenttisi W:-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 (ei enää käytössä) sijoitettuihin tiedostoihin viitataan (peoplessa www-kansio oli oletuskansio, johon WWW-tiedostot laitettiin):
- Testaa sivun toimivuus jollakin selaimella. Avaa sivu suoraan W:-asemalta valinnalla File | Open File.
- 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.
- W-asemalle tallennetut sivut näkyvät myös
Internetiin. 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
- 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.
- Keksi opiskeluihin liittyvälle dokumentille
body
-osaan järkevä pääotsikko (h1
) jahead
-osaan sopivatitle
(esim. Opiskelu tai Opiskelu - Nanonano, sivua parhaiten kuvaava sana ensin). - Lisää dokumentiin toisen tason (
h2
) otsikko Viikkolukujärjestys. - Kirjoita dokumenttiin esimerkin mukainen viikkolukujärjestys taulukkomuodossa. Taulukkojen
määrittelyn voit kerrata erillisestä
ohjeesta esimerkkien avulla.
- Lisää väliotsikko Opintosuoritusote ja sen perään
tekstinä Nanonanon suorittamat kurssit. Käytä
pre
-elementtiä, koska teksti halutaan muotoilemattomana. - Tallenna ja testaa sivua selaimella. Sivun pitäisi näkyä myös
osoitteessa:
http://users.jyu.fi/~tunnus/www/opiskelu/
- Validoi sivusi. Valitse tällä kertaa Web Developer -työkalupalkista kohta Tools | Validate HTML, koska haluat tarkistaa Internetiin näkyvän WWW-sivun.
Linkit
- Aloita taas uusi dokumentti. Dokumenttiin lisätään suosikkilinkit. Tallenna tiedosto index.html-nimellä linkit-hakemistoon.
- Lisää asianmukaiset otsikot (
title
jah1
). - Keksi sopivat linkkitekstit ja lisää suunnitelman kiinnostavat linkit
sivulle järjestämättömänä listana (
ul
).- Listojen määrityksiä voit kerrata erillisestä ohjeesta esimerkkien avulla.
- Tee linkkiteksteistä hyperlinkkejä. Laita viitetekstiksi
kyseisen sivun WWW-osoite (
a
-elementinhref
-attribuutti).<a href="http://www.osoite.example/">Linkkiteksti</a>
- Testaa sivua selaimella ja validoi se.
Artikkelit
- Aloita uusi dokumentti. Tallenna tiedosto artikkelit-hakemiston it-alihakemistoon nimellä index.html.
- Lisää otsikko IT ja tietoliikenne: kurkistus tulevaisuuteen.
Keksi myös sopiva teksti title-elementtiin. Esim.
IT ja tietoliikenne: kurkistus tulevaisuuteen - Artikkelit - Nanonano
- Lisää artikkeliin 10 kappaletta (paragraphs) tekstiä Lorem Ipsum -generaattorilla. Palvelu tuottaa latinan kielistä tekstiä, jota käytetään usein tekstidokumenttien testitekstinä.
- Liitä teksti dokumenttiin. Tarkista, että kukin kokonainen kappale on merkitty p-elementillä. Poista mahdolliset editorin luomat ylimääräiset tyhjät tekstikappaleet (<p></p>).
- Lisää väliin muutama toisen tason otsikko vaikkapa teksteillä Vertebra cervicalis ja Dorsum tergum.
- Tallenna kaavio.png-kuva it-hakemistoon. Lisää johonkin kohtaan dokumenttia uusi tyhjä kappale (p) ja kappaleen sisälle kaaviokuva.
- Tallenna dokumentti ja testaa selaimella.
- 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. - Tee uusi dokumentti artikkelit-hakemiston alle index.html-nimellä.
- Lisää dokumentin otsikoksi Artikkelit ja
title
-elementtiin esimerkiksiArtikkelit - Nanonano
- Aloita järjestämätön lista artikkeleista ja lisää listakohdiksi artikkelien nimet.
- Tee artikkeleista linkkejä. 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 löytyy tietoa ensimmäiseltä luennolta.
- 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.
- Lisää dokumentin otsikoksi Artikkelit ja
- 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.
- Validoi tekemäsi sivut.
Tyylit
Kokeile vaihtaa etusivun tyyliä muuttamalla
head
-elementissä olevan CSS-linkin (link
)
viitettä (href
) muuhun tyylitiedostoon. Oletuksena käytössä pitäisi
olla malli.css, mutta koska sitä ei ole tehty, niin todellisuudessa tyylitiedostoa
ei ole käytössä vielä ollenkaan, vaan käytetään selaimen oletustyylejä.
Kokeile esimerkiksi seuraavia tyylitiedostoja, jolloin saat tyylit todellisuudessa
käyttöön:
- http://www.freecsstemplates.org/previews/memoranda/style.css
- http://www.freecsstemplates.org/previews/predilection/style.css
- http://www.freecsstemplates.org/previews/undertaking/default.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 jaoteltuina.
- Galleria ja vieraskirja. Nämä toteutetaan myöhemmissä demoissa.
Käyttäjien kommentit
Seuraavia linkkejä ei ilmeisesti enää ole...? # 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
Näyttävät kyseiset tyylitiedostot tosiaan kadonneen. Vaihdoin tilalle muutaman muun esimerkkityylitiedoston.