Demo 3 - WWW-sivuston luominen ja WWW-lomakkeet
Mallivideot
- sahkopostilomake.wmv 42M
- sahkopostilomake.mp4 H.264-pakkaus, 54M
Ongelmia videon katselussa?
Näissä demoissa opetellaan WWW-sivujen luomiseen ja WWW-lomakkeisiin liittyviä asioita.
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 demossa 1.
Monipuolisen WWW-sivuston luominen
Alkuvalmistelut
Mozilla Firefox -selaimeen kannattaa asentaa hyödyllisiä lisätyökaluja; vähintäänkin Web Developer.
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.
Hakemistorakenteen luonti
- Avaa Windows Explorer (suom. Resurssienhallinta) ja luo alla olevaa kuvaa vastaava hakemistorakenne W:-asemalle. Huomaa, että WWW-hakemistojen nimiin ei koskaan kannata laittaa erikoismerkkejä, isoja kirjaimia, ääkkösiä tai välilyöntejä.
Etusivu
Tehdään ensimmäisenä etusivu (mallikuva valmiista esimerkkisivusta):
- Aloita uusi dokumentti haluamallasi editorilla ja tallenna se W:-aseman opetusteknologia-hakemistoon nimellä index.html.
- Avaa selaimeen HTML5-dokumentin pohja tai XHTML-dokumentin pohja. Voit siis valita kummalla kuvauskielellä teet sivut. Kopioi pohja dokumentin alkuun (poista mahdolliset editorin oletuksena antamat tekstit).
- Laita title-elementin sisällöksi Opetusteknologia-kurssisivusto. Hakukoneet löytävät parhaiten title-elementissä olevan tekstin, jolloin sen on syytä olla perusmuodossa.
- Lisää sivulle pääotsikko (Opetusteknologia-kurssisivusto). Kirjoita otsikkoon myös oma nimesi.
- Kirjoita lyhyt parin lauseen kuvaus siitä, millaisesta kurssista on kyse. Käytä p-elementtiä.
- Laita väliotsikoksi (h2) Yhteystiedot ja kirjoita
siihen omat yhteystietosi.
- Yhteystiedot saat jaettua siististi omille riveilleen br-elementin
avulla.
Esim.
<p>Antti Ekonoja<br /> Ag C522.3<br /> antti.j.ekonoja@jyu.fi</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.
- Lisää yhteystietojen perään uusi kappale (
p
) ja sijoita siihen valokuva (img
). Voit käyttää omaa kuvaasi tai esimerkkikuvaa. Tallenna kuva opetusteknologia-hakemistoon.<img src="antti.jpg" alt="Antti Ekonoja" title="Antti Ekonoja" />
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.
- Lisää uusi väliotsikko (h2) Kurssitehtävät ja tee sen alle lista (ul), jonka listakohtina (li)
ovat Demot ja Oppimistehtävät. Demot-kohdalle tee myös alalista, jonka listakohdaksi laita Demo 3. Ole tarkkana
sisäkkäisen listan syntaksin kanssa.
* Demot - Demo 3 * Oppimistehtävät
- Tee jokaisesta listakohdasta linkki kyseiselle sivulle hakemistorakenteessa. Käytä suhteellista tai puoliabsoluuttista viittausta.
Koska sivut tallennetaan hakemistoihin index.html-nimillä, ei linkin osoitteessa tarvitse olla ollenkaan tiedostonimeä, vaan hakemiston nimi
riittää. Esimerkiksi linkki hakemistoon demo3 suhteellisella viittauksella:
<li><a href="demot/demo3/">Demo 3</a></li>
href
-ominaisuus. Ominaisuus määrittää linkin osoitteen.
- 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>2012-02-27 10:48</strong> </address>
title
-ominaisuus. Ominaisuus kertoo linkin otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri linkin päälle.
- 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 HTML5- tai XHTML-standardin "kieliopin" mukaista. Koodin pitäisi olla virheetöntä, jos olet noudattanut demo-ohjeita tarkasti. Korjaa mahdolliset validaattorin löytämät virheet.
- W-asemalle tallennetut sivut näkyvät myös
Internetiin. Tarkista löydätkö sivusi osoitteesta:
http://users.jyu.fi/~tunnus/opetusteknologia/
missä tunnus on yliopiston käyttäjätunnuksesi. Kokeile sivun toimintaa yo. WWW-osoitteesta.
Demosivu
Tehdään seuraavaksi Demot-sivu:
- Aloita uusi dokumentti ja tallenna se demot-hakemistoon nimellä index.html.
- Kopioi sivulle HTML5- tai XHTML-dokumentin pohja ja lisää siihen sivun aiheeseen sopiva title ja pääotsikko (h1).
- Lisää sivulle tekstikappale (p), johon sisällöksi Kurssin demojen aiheet. Merkitse teksti strong-elementillä.
- Lisää seuraavaksi taulukko, johon laita 3 ensimmäisen demon osalta niiden aiheet. Laita eri demot omille riveilleen (tr), katso mallia mallikuvasta. Merkkaa demojen nimet th-elementillä ja kuvaukset td-elementillä. Taulukkoon saat halutessasi reunaviivat helpoiten antamalla taulukolle attribuutin border="1".
- Tee demosta 3 linkki (a) kyseiselle sivulle.
- Lisää lopuksi sivun loppuun tekstikappaleen sisään linkki etusivulle.
- Avaa sivu menemällä selaimella osoitteeseen http://users.jyu.fi/~tunnus/opetusteknologia/demot/. Validoi sivu valitsemalla Web Developer -työkalupalkista Tools | Validate HTML. Korjaa mahdollisesti löytyneet virheet.
Haku omalle sivulle
Googlen avulla on helppoa lisätä haku omalle sivulle. Google ei kovin avoimesti mainosta, että haun voi kohdistaa vain tiettyyn osoitteeseen.
- Aloita uusi dokumentti ja tallenna se oppimistehtavat-hakemistoon nimellä index.html.
- Kopioi sivulle HTML5- tai XHTML-dokumentin pohja ja lisää siihen sivun aiheeseen sopiva title ja pääotsikko (h1).
- Aloitetaan hakulomakkeen tekeminen lisäämällä sivulle normaali hakulomake:
<div class="haku"> <form action="http://www.google.com/search" method="get"> <div> <label for="hakusanat">Hakusanat </label> <input type="text" size="20" id="hakusanat" name="q" value="" /> <input type="submit" value="Hae oppimistehtäviä" /> </div> </form> </div>
- Lomakkeen
action="http://www.google.com/search"
viittaa Googlen hakuohjelmaan. - Tekstikentän
name="q"
viittaa hakusanoihin, jotka välitetään hakuohjelmalle. - Kokeile miten haku toimii.
- Lomakkeen
- Lisätään lomakkeen sisemmän
div
-elementin sisälle vielä muutama lisämääritys:<input type="hidden" name="ie" value="iso-8859-1" /> <input type="hidden" name="oe" value="iso-8859-1" /> <input type="hidden" name="hl" value="fi" /> <input type="hidden" name="lr" value="lang_fi" />
- Näillä määrityksillä tekstin koodaus saadaan sopimaan suomalaiseen merkistöön ja haun sekä Googlen käyttöliittymän kieleksi määrätään suomi.
- Kokeile miten hakusivu muuttuu.
- Hakutuloksiin tulee vielä paljon muitakin sivuja kuin omia oppimistehtäviäsi. Rajoitetaan hakua lisäämällä
seuraava parametri:
<input type="hidden" name="as_q" value="site:users.jyu.fi/~tunnuksesi/opetusteknologia/oppimistehtavat" />
- as_q-niminen muuttuja lisää muiden hakusanojen lisäksi uuden hakutermin
site:users.jyu.fi/~tunnuksesi/opetusteknologia/oppimistehtavat
. site
-määreellä voidaan rajoittaa hakua vain tiettyyn WWW-sivuun tai sivustoon. Sivun osoite on tultava heti kaksoispisteen jälkeen.- Kokeile hakulomakkeen toimintaa. Luultavasti Google ei löydä mitään, koska sinulla ei välttämättä vielä ole yhtään oppimistehtävää, ja vaikka olisikin, niin Google tuskin olisi käynyt indeksoimassa demotehtäväsivujasi. Tämä johtuu siitä, että sivuillesi ei ole mistään linkkejä, ja vaikka olisikin, niin hakuroboteilla kestää aikansa ennenkuin ne ehtivät vierailemaan sivuillasi.
- Voit kokeilla lomakkeen toimintaa vaihtamalla haun kohteeksi esim.
site:appro.mit.jyu.fi/opetusteknologia
.
- as_q-niminen muuttuja lisää muiden hakusanojen lisäksi uuden hakutermin
- Validoi lopuksi sivu ja korjaa mahdolliset virheet.
Sähköpostilomake
Tehdään sähköpostin lähettämiseen tarkoitettu lomake. Esimerkkejä lomake-elementtien tekemiseen löydät luennolta 2. Lomakkeen rakenteesta halutaan oikeassa laidassa olevan kuvan kaltainen (kuvaa klikkaamalla näet sen suurempana). Ulkoasu määrätään vasta lomakkeen luonnin jälkeen myöhemmissä demoissa, joten ulkoasusta ei kannata tässä vaiheessa vielä välittää.
- Tallenna lomake.css aiemmin luotuun /opetusteknologia/demot/demo3-hakemistoon.
- Aloita uusi HTML-dokumentti. Laita nimeksi index.html ja tallennushakemistoksi äsken mainittu demo3-hakemisto.
- Lisää linkki CSS-tyylitiedostoon lomake.css.
- Muokkaa sivun
title
- jah1
-elementit sopiviksi. - Lisää HTML-sivulle lomake (
form
). Älä toistaiseksi laita mitäänaction
-attribuuttiin. - Lisätään lomakkeelle tekstikenttä. Lisää ensin
label
-elementti. Kirjoita otsikkotekstiksi Aihe. Lisää otsikkotekstin jälkeen tekstikenttä (input
-elementti). Laita lopuksilabel
-elementti jainput
-elementti samanp
-elementin sisään. - Lisää
input
-elementilleid
-ominaisuuteen oma, yksilöllinen arvo. - Yhdistä
label
-elementti ja lomakekenttä toisiinsafor
-ominaisuudella. - Tallenna dokumentti. Avaa lomake selaimessa ja testaa, että
label
- jainput
-elementit ovat yhdistettyinä napauttamalla lomakekentän otsikkoa. Nyt kursorin pitäisi mennä siihen lomakekenttään, johon yhdistäminen on tehty. - Lisää
input
-elementillename
-ominaisuus. Ominaisuus kertoo kentän nimen lomakkeen käsittelijälle (voi olla eri kuinid
-attribuutti!). - Kokeile sivua selaimella. Laita tekstikentille vielä kiinteä esityspituus
size
-ominaisuudella:<p><label for="aihe">Aihe:</label> <input type="text" id="aihe" name="aihe" size="40" /></p>
- Tee uusi kappale (
p
). Lisää kappaleen sisäänlabel
-elementti, johon teksti Prioriteetti. - Lisää kappaleen sisään
label
-elementin jälkeen valintalista (select
). - Kirjoita
option
-elementteihin vaihtoehdot Korkea, Normaali ja Alhainen.<option>Normaali</option>
- Valitse vaihtoehdoista Normaali valituksi oletuksena (
selected="selected"
). - Yhdistä
label
- jaselect
-elementti toisiinsafor
- jaid
-ominaisuuksilla. Annaselect
-elementillename
-ominaisuuteen jokin järkevä arvo. - Tee uusi kappale (
p
). Lisää edelliseen tapaan kappaleen sisälle uusilabel
, jonka sisällöksi kirjoitat Vastaanottaja, ja valintalista (select
). - Lisää valintalistan sisään valintaryhmä (
optgroup
). Anna valintaryhmälle otsikoksi (label
) opettajat. - Lisää valintaryhmään kolme valintaa (
option
):- Antti Ekonoja
- Jukka Mäntylä
- Tommi Lahtonen
- Lisää toinen valintaryhmä, jolle annat otsikoksi (
label
) tuntiopet ja lisää valinnat (option
):- Mikko Aarnio
- Jaakko Kaski
- Kokeile lomakkeen toimintaa selaimella.
- Lisää jokaisen edellä lisätyn valinnan (
option
)value
-ominaisuuden arvoksi kyseisen henkilön sähköpostiosoite:- Antti: antti.j.ekonoja@jyu.fi
- Jukka: jmantyla@iki.fi
- Tommi: tommi.j.lahtonen@jyu.fi
- Mikko: mipeaarn@jyu.fi
- Jaakko: jkaski@jyu.fi
<option value="antti.j.ekonoja@jyu.fi">Antti Ekonoja</option>
- Muuta vielä valintalistalle mahdollisuus valita useampi vastaanottaja. Laita siis
valintalistan
multiple
-ominaisuuden arvoksimultiple
. Laita myös valintalistanname
-ominaisuuden arvoksi vastaanottaja.<select name="vastaanottaja" id="vastaanottaja" multiple="multiple">
- Kokeile selaimella lomakkeen toimintaa. CTRL- ja SHIFT-näppäimien avulla voit valita useamman vastaanottajan.
- Tehdään valintanappi-lista
formaatin valinnalle. Lisää uusi
p
-elementti, jonka sisään laitalabel
-elementti, jonka sisälle lisäät suoraanradio
-painikkeen, ja vasta tämän jälkeen otsikkotekstiksi Teksti.<p><label><input type="radio" value="" />Teksti</label></p>
- Nyt label- ja input-elementti liittyvät
suoraan toisiinsa ilman
for
-ominaisuutta. Lisää vielä kaksilabel
- jainput
-paria (molemmat omanp
-elementin sisään). Laita otsikoiksi HTML ja XML. - Lisää kaikille valintanapeille sama arvo
name
-attribuuttiin. - Anna kullekin valintanapille oma arvo
value
-attribuuttiin, joka näkyy lomakkeen käsittelijälle tietoja lähetettäessä. - Valitse oletusvalinnaksi Teksti lisäämällä kyseiselle
input
-elementille määrechecked="checked"
. Ryhmän otsikko Formaatti lisätään myöhemmin.<p><label><input type="radio" name="formaatti" checked="checked" value="teksti" />Teksti</label></p>
- Lisää uusi
p
-elementti, jonka sisään laitalabel
, jonka otsikoksi kirjoita Lähetä myös tekstiviesti. Lisäälabel
:in sisälle valintaruutu (checkbox
). - Aseta valintaruudun
name
-ominaisuuden arvoksi tekstiviesti javalue
-ominaisuuden arvoksi Kyllä. - Lisää vielä toinenkin
p
-elementti ja sen sisään valintaruutu otsikon (label
) kera. Kirjoita otsikoksi Lähetä myös tavallinen kirje. Keksi tälle valintaruudulle järkevät arvotvalue
- janame
-ominaisuuksiin. - Tee uusi kappale (
p
-elementti). Lisää kappaleen sisään ensinlabel
-elementti tekstillä Viesti. - Täydennä lomake varsinaisella tekstialueella
(
textarea
, lisää se samanp
-elementin sisään, missälabel
-elementtikin on). Laita tekstialueelle näkymään 20 riviä (rows
), joista kunkin pituudeksi 50 merkkiä (cols
). Nimeä tekstialue antamallaname
-ominaisuuteen jokin sopiva arvo. Yhdistä tekstialue otsikkoonid
- jafor
-attribuuttien avulla. - Lisää loppuun vielä yksi
p
-elementti ja sen sisälle Lähetä viesti -painike (submit
). Anna painikkeen teksti kirjoittamalla sopiva arvovalue
-ominaisuuteen. - Ryhmittele lomakkeen osat
fieldset
- jalegend
-elementeillä. Katso mallia demon alussa olevasta mallikuvasta (Otsikkotiedot ja Viestiosa siis omiksi ryhmikseen). Kirjoita ryhmän alkuun<fieldset>
ja loppuun</fieldset>
. Ryhmittelyt tulevatform
-elementin sisälle. - Ryhmän otsikko lisätään
fieldset
-elementin sisälle<legend> ... </legend>
-elementillä. Laita osien otsikoiksi Otsikkotiedot ja Viestiosa. - Lisää viestiosan (
fieldset
) sisälle toinenfieldset
-ryhmä, jonka sisälle rajaat formaatti-valintanapit. Anna alueen nimeksi Formaattilegend
-elementillä. - Lisää viestiosan (
fieldset
) sisälle myös toinenfieldset
-ryhmä, jonka sisälle rajaat Lähetä myös tekstiviesti ja Lähetä myös tavallinen kirje -valintaruudut. Anna alueen nimeksi Lisäasetuksetlegend
-elementillä. - Muokkaa seuraavaksi
form
-elementin ominaisuuksia:action
-attribuutti kertoo miten tai millä ohjelmalla lomakkeen lähetetyt tiedot käsitellään. Laita tähän http://appro.mit.jyu.fi/cgi-bin/view.cgi.method
-attribuutti kertoo tavan, jolla lomakkeen tiedot lähetetään. Laita arvoksipost
.
- Tallenna ja testaa lomaketta selaimella. Kokeile lähettää lomake painamalla Lähetä viesti -painiketta, niin näet millaisia tietoja lomake lähettää lomakkeen käsittelijälle.
- Validoi HTML-tiedostosi ja korjaa mahdolliset virheet.
Käyttäjien kommentit