XHTML-perusteita - Demo 7
Näissä demonstraatioissa on tarkoitus tutustua yleisimpiin XHTML-elementteihin ja niiden käyttämiseen WWW-dokumenteissa. Työvälineenä käytetään Amaya-editoria, jonka perusominaisuudet käydään läpi.
- Elementtien selitteet löytyvät osoitteesta: http://appro.mit.jyu.fi/doc/www/
- Amaya-XHTML-editorin saat omalle kotikoneellesi osoitteesta http://www.w3.org/Amaya/User/BinDist.html. Jos Amaya asentuu vääränkielisenä (esim. ranska), saat vaihdettua kielen Edit-valikon kohdasta Preferences. Tällä kurssilla kannattaa käyttää englantia.
- Harjoituksessa käytettävä esimerkkidokumentti löytyy osoitteesta http://appro.mit.jyu.fi/tyovaline/demot/demo3/virus05.html
Alkuvalmistelut
- Käynnistä Amaya-editori valitsemlla Start | Programs | Amaya
- Valitse File | New | New Document. Tämä luo uuden
XHTML-dokumentin.
- Napauta tallennushakemistokohdassa (Directory) kuvaketta . Valitse hakemisto U:\tyovaline, luo sinne uusi hakemisto (Make New Folder) ja vaihda sen nimeksi demo7. Napauta OK:ta.
- Kirjoita tiedostonimeksi (File) index.html hakemistonimen perään.
- Kirjoita Title-kohtaan Virukset
- Valitse Document Profile -kohtaan XHTML Strict.
- Avaa näkyville mallidokumentti virukset05_d6.txt. Kopioi koko tekstin sisältö leikepöydälle ja liitä se Amayan dokumentti-ikkunaan (nopeiten saat valittua kaikki tekstit näppäinyhdistelmällä CTRL + A). Huomaa, että Amayassa ei toimi kopioidun tekstin liittäminen hiiren oikean napin kautta, vaan liittäminen on tehtävä valikosta Edit | Paste tai näppäinyhdistelmällä CTRL + V.
- Tallenna dokumenttisi.
- Tarkista millaista lähdekoodia Amaya tekee puolestasi. Valitse Views | Show source.
Vertaa pohjaa luennolla esitettyyn XHTML-dokumentin runkoon:
Löydätkö vastaavat määritykset?<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" > <head> <title>Tähän sivun otsikko</title> <link href="tahan_tyylintiedoston_nimi.css" rel="StyleSheet" type="text/css" /> </head> <body> <h1>Tähän pääotsikko</h1> <p>Tähän tekstiä...</p> </body> </html>
- Kokeile WWW-selaimella (Firefox, Internet Explorer etc.) miltä dokumenttisi näyttää. Avaa selaimessa uusi välilehti. Avaa dokumenttisi välilehteen valinnalla File | Open | Browse (IE) tai File | Open (Opera tai Firefox).
Dokumentin rakenne
- Määritellään seuraavaksi dokumentin otsikko. Valitse valikosta Tools | Change title... Kirjoita otsikoksi Tietokonevirukset ja muut nykyajan tuholaiset. Tämä teksti tulee näkyviin selainikkunan ylälaidan otsikkopalkkiin.
- Valitse rakennenäkymä valinnalla Views | Show structure.
- Merkitään dokumentin rakenne. Kappaleen saa valittua helpoimmin napauttamalla rakennenäkymässä elementin nimeä (esim. p). Selainnäkymässä kappaleen voi valita viemällä kursorin sen kohdalle ja napauttamalla F2.
Tekstikappaleet (p
)
- Yhtenäiset tekstikappaleet on merkittävä
p
-elementillä (paragraph), mutta Amaya on tehnyt sen jo puolestamme tekstin tuontivaiheessa. - Kappaleen saa tekstikappaleeksi tarvittaessa valinnalla Insert | Paragraph (p)
Ensimmäisen tason otsikko (h1
)
- Ensimmäisellä rivillä oleva pääotsikko merkitään
h1
-elementillä. Otsikkotason valinta voidaan tehdä oikean laidan työkalupalkista T1-, T2- ja T3-painikkeilla. - Tallenna ja päivitä selaimessasi näkyvä dokumentti tai -painikkeella. Pääotsikon pitäisi nyt selkeästi erottua muusta tekstistä.
Toisen tason otsikot (h2
)
Jatketaan dokumentin rakenteen merkitsemistä.
-
Merkitse XHTML-dokumentissasi kaikki toisen tason otsikot
h2
-elementillä käyttäen apunasi edellä h1-elementin yhteydessä käytettyä tapaa. Toisen tason otsikoita ovat:- Erilaisia viruksia ja tuholaisia
- Suojautuminen viruksia vastaan
- Nykyiset virukset
- Kokeile miltä sivu näyttää selaimessa.
Kolmannen tason otsikot (h3
)
Merkitse myös kaikki kolmannen tason otsikot h3
-elementeillä.
Kolmannen tason otsikoita ovat:
- Hanki virustorjuntaohjelma ja huolehdi sen päivityksestä
- Huolehdi ohjelmistojen ja käyttöjärjestelmän päivityksestä
- Tarkista aina saamasi dokumentit ennen niiden aukaisemista
- Älä lähetä sovellusohjelmatiedostoja sähköpostitse
- Tarkista dokumentit ennen niiden lähettämistä
- Poista sähköpostiohjelmista liitetiedostojen automaattinen aukaisu
- Makrovirusvaroitukset kannattaa kytkeä päälle
- Pidä torjuntaohjelma aktiivisena
- Virustartunnan vältteleminen
Kokeile miltä sivu näyttää selaimessa.
Listat (ul
, ol
ja li
)
Lohkotason rakennemerkinnöistä puuttuvat vielä listat:
- Maalaa ensin kuhunkin listaan kuuluvat kappaleet ja napauta Bulleted list -painiketta .
- Maalaa dokumentin lopussa oleva numeroitu luettelo ja napauta
Numbered list-painiketta .
- Katso rakennenäkymästä miten Amaya merkitsee listat
- Listan aloitus ja lopetus merkitään
ul
- (engl. unordered list) taiol
-elementillä (engl. ordered list) - Listan kukin kohta merkitään
li
-elementillä. - Listakohdan (
li
) sisällä voi olla toinen, sisempi lista (ul
,ol
). - Listakohtien ulkopuolelle ei saa jäädä mitään tekstiä.
- Listan aloitus ja lopetus merkitään
- Poista lista-alkioiden edestä valmiina olleet ylimääräiset *-listamerkit ja numerot.
- Kokeile selaimella onnistuiko listan määrittely.
Sisäkkäiset listat
- Lisätään vielä täsmennyksiä viruksentorjunta-ohjelmiin liittyen. Tällöin tarvitaan sisäkkäisiä listoja (kts. mallit)
- Siirrä kursori selainnäkymässä F-Secure Anti Virus -tekstin loppuun ja paina Enteriä.
- Lisää työkalupalkista uusi merkitty lista (engl. Bulleted list)
- Nyt saat uuden listakohdan ensimmäisen kohdan alakohdaksi. Kopioi tähän teksti
Päivitykset osoitteesta http://www.f-secure.com/download-purchase/updates.shtml
- Napauta kaksi kertaa Enter-painiketta niin saat toisen alalistakohdan. Lisää tähän
teksti
Kokeiluversio osoitteesta http://www.f-secure.com/download-purchase/
- Mene McAfee-sanan perään ja paina Enter. Lisää Bulleted list ja alakohdaksi teksti
http://download.mcafee.com/us/
- Lisää tämän jälkeen kahden Enterin avulla toiseksi listakohdaksi teksti
http://www.mcafeesecurity.com/us/downloads/evals/
- Napauta neljä kertaa Enter-painiketta ja katso rakennenäkymästä mitä kukin painallus tekee.
Nyt sinun pitäisi päästä lisäämään uutta listakohtaa uloimmalle tasolle. Kirjoita teksti
Symantec Antivirus
- Sisäkkäisen listan pitäisi näyttää selaimessa seuraavalta:
Esimuotoiltu teksti
- Merkitse pre-elementillä kaikki englanninkieliset huumoritekstit. pre-elementin saa valikosta valinnalla Insert | Preformatted (pre)
- pre-elementin sisällä olevat tekstit toistuvat juuri kuten ne on kirjoitettu dokumenttiin. Tämän vuoksi kappale ei rivity automaattisesti. Jaa pitkä vitsi riveihin painamalla muutaman kerran enteriä tekstin keskellä. Selainnäkymä päivittyy vasta kun painat enterin jälkeen jotain muuta näppäintä.
- Testaa miltä nämä kappaleet näyttävät selaimessa.
Linkit
Dokumentista on myös linkkejä muihin dokumentteihin. Lisätään muutama tälläinen linkki.
- Etsi dokumentista sana F-Secure Anti Virus.
- Tee linkki F-secure Anti Virus-tekstistä osoitteeseen
http://www.f-secure.com/
- Maalaa tekstistä F-secure Anti Virus ja valitse Links | Create or change link
- Kopioi edellä mainittu linkki ensin leikepöydälle (maalaa ja CTRL-C).
- Liitä linkki leikepöydältä osoiteikkunaan (CTRL+V) ja valitse Confirm
- Tallenna dokumenttisi ja kokeile linkin toimivuutta selaimella.
- Tee listassa olevista muista WWW-osoitteista linkit niin, että niitä napauttamalla pääsee kyseiseen osoitteeseen.
- Maalaa osoite ja kopioi leikepöydälle (CTRL-C).
- Lisää linkki kuten edellä.
- Lisää leikepöydältä (CTRL+V) Insert the URI -kohtaan viitetekstiksi sama kuin mitä linkkitekstissäkin on.
Korostukset
- Maalaa tekstikappaleiden sisältä seuraavat sanat ja merkitse ne
strong-elementillä (työkalupalkin A -painike)
- Sovellusohjelmavirukset
- Mato
- Spam
- Merkitse em-elementillä (työkalupalkin E - uudemmassa Amayassa A kursiivina) seuraava lause Päivitykset ovat erityisen tärkeitä
- Kokeile selaimella miltä dokumentti näyttää näiden tekstitason merkintöjen jälkeen.
Taulukot
Ohjelma | Tekijä |
---|---|
F-prot | Frisk |
F-secure Antivirus | F-secure |
VirusScan | McAfee |
- Tehdään esimerkin mukainen taulukko. Tee uusi tyhjä kappale Suojautuminen viruksia vastaan -otsikon alle.
- Lisää taulukko työkalupalkista -painikkeella. Lisää 2 saraketta ja 4 riviä.
- Kirjoita tai kopioi esimerkin mukaiset tekstit soluihin.
- Napauta takaisin ensimmäisen rivin soluihin ja napauta kaksi kertaa F2-painiketta. Näin saat rivin valituksi.
- Valitse valikosta Tools | EditTable | Change to Heading Cell (t h) niin saat ensimmäisen rivin soluista otsikoita.
- Tarkastele rakennenäkymästä mistä osista ja elementeistä taulukko koostuu. Apua saat myös luentosivun taulukko-osuudesta.
Älä kiinnitä huomiota taulukon väreihin ja reunuksiin. Ulkoasuun paneudutaan seuraavissa demoissa.
Sisällysluettelo
- Siirry aivan dokumentin alkuun
- Lisää sisällysluettelo valinnalla Tools|Add/Update table of contents
- Tutki Structure-näkymästä millaisella xhtml-koodilla sisällysluettelo muodostettiin. Sisällysluettelossa on dokumentin sisäisiä linkkejä. Katso mitä sisällysluettelossa kunkin väliotsikon osoitteena lukee ja tutki mitä vastaavaan väliotsikkoon on lisätty.
Useamman sivun sisältävä WWW-sivusto
Luodaan kuvitteellinen kotisivusto Nanonano-nimiselle henkilölle. Sivuille halutaan seuraavia osioita:
- Etusivu, joka sisältää lyhyen kuvauksen henkilöstä, yhteystiedot ja valokuvan.
- Opiskelusivu, jolta löytyy henkilön lukujärjestys, tiedot suoritetuista kursseista ja kurssien harjoitustyöt.
- Kuvagalleriasivu, johon sijoitetaan digikameralla otettuja tai skannattuja valokuvia.
- 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
- Avaa Windows Explorer (suom. Resurssienhallinta) ja luo ylläolevaa kuvaa vastaava hakemistorakenne W:-asemalle. Jos W:-asemaa ei ole käytössä niin käy salasana.jyu.fi-palvelussa aktivoimassa WWW- ja Unix-palvelut ja kirjaudu koneelle uudelleen.
Sivujen rakenne
Lisätään suunnitelman mukaiset tekstit sekä kuvat useammalle sivulle ja muokataan sivujen rakenne kuntoon. Avaa suunnitelma omaan ikkunaan.
Etusivu
Tehdään ensimmäisenä sivuston etusivu, jonne tulevat seuraavat asiat:
- Aloita uusi dokumentti ja tallenna se W:-aseman www-hakemistoon nimellä index.html.
- 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.
- Tallenna dokumenttisi W:-aseman www-hakemistoon index.html-nimelle. index.html on useimmissa WWW-palvelimissa (Apache) oletustiedosto, joka palautetaan pyydettäessä tiettyä kansiota.
- Testaa sivun toimivuus Firefoxilla. 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
WWW:ssä. 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 WWW:ssä näkyvän WWW-sivun. Ts. Jos avaat dokumenttisi suoraan W:-asemalta on kyseessä lokaali tiedosto. Jos avaat dokumenttisi users.jyu.fi-osoitteen kautta niin silloin avaat WWW:ssä eli julkisessa verkossa kaikille näkyvää tiedostoa
Linkit
- Lisää etusivulle linkki Opiskelut-sivuun. Tee linkistä suhteellinen linkki.
- Voit viitata suoraan Opiskelut-sivun sisältävään kansioon, koska WWW-palvelin tarjoaa automaattisesti kansiossa olevaa index.html-tiedostoa.
-
Suhteellisella viittauksella voit viitata mihin tahansa oman hakemistorakenteen tiedostoon. Suhteellinen viittaus lasketaan aina samasta kansiosta lukien kuin missä on dokumentti johon viittaus on kirjoitettu:
href= "muuli.html" Tämän kansion muuli.html-tiedosto (kansio, missä viittaava dokumentti sijaitsee) "testi/" Tämän kansion alikansio testi (oletuksena näytetään sivu index.html) "testi/muuli.html" Tämän kansion testi-alikansion muuli.html-tiedosto (ei kannata käyttää) "testi/kuva.png" Viite testi-alikansion kuva.png-tiedostoon (kuvat kannattaa säilyttää dokumentin kanssa samassa kansiossa) "../" Isäkansio (kansio, jossa nykyinen kansio sijaitsee) "../testi/" Isäkansion alikansio testi
- Absoluuttisella osoitteella oleva linkki kurssin kotisivulle:
<p>Absoluuttisella osoitteella oleva linkki kurssin <a title="WWW-julkaiseminen kurssin kotisivu" href="http://appro.mit.jyu.fi/www/">kotisivulle</a></p>
- Puoliabsoluuttisella osoitteella oleva linkki kurssin toiselle luennolle:
<p>Puoliabsoluuttisella osoitteella oleva linkki kurssin <a href="/www/luennot/luento2/">toiselle luennolle</a></p>
Absoluuttista ja suhteellista viittausta käsitellään lisää kurssin komentoriviluennoilla.
- Kokeile toimiiko linkki. Kokeile suoraan www-palvelimen kautta eli users.jyu.fi:stä
- Lisää myös Opiskelu-dokumenttiin linkki, joka vie pääsivulle. Tee tästäkin linkistä suhteellinen linkki.
- Yritä lisätä vastaavat linkit kuin edellä mutta absoluuttisina ja puoliabsoluuttisina versioina. Sinulla pitäisi lopulta olla kummallakin sivulla kolme linkkiä (pääsivulta kolme linkkiä Opiskelu-sivulle ja Opiskelusivulta kolme linkkiä pääsivulle), jotka kaikki toimivat samalla tavalla vaikka kukin niistä on toteutettu eri tavalla.
- Suhteellisia linkkejä kannattaa käyttää lähes aina kuin mahdollista. Miksi? Kokeile seuraavia:
- Muuta www-kansion nimeksi esim. web? Mitkä linkit toimivat edelleen?
- Mitä jos teet W:-aseman juureen uuden kansion nimeltään testi ja siirrät koko www-kansion kaikkine sisältöineen testi-kansion alle. Mitkä linkit toimivat?
- Mitä tapahtuu jos sivusto siirretään kokonaan toiselle www-palvelimelle? Mitkä linkit toimivat edelleen?
- Muista tallentaa dokumenttisi
Seuraavissa demoissa muotoillaan sivujen ulkoasua.
Käyttäjien kommentit