Demo 3 - WWW-sivuston luominen ja WWW-lomakkeet

Mallivideot

Videot eivät sisällä ääntä.
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. Sama työkalu löytyy myös Chromelle ja Operalle.

Web Developer -asennus Firefoxiin:

  1. Mene Web Developer -laajennoksen asennussivulle.
  2. Napauta sivulta Add to Firefox ja sen jälkeen Install Now esiin tulevasta ikkunasta.
  3. Käynnistä Mozilla Firefox uudelleen.
  4. Työkalupalkin saa näkyviin valinnalla View | Toolbars | Web Developer Toolbar.

Hakemistorakenteen luonti

Hakemistorakenteen kuva

Etusivu

Tehdään ensimmäisenä etusivu (mallikuva valmiista esimerkkisivusta):

  1. Aloita uusi dokumentti haluamallasi editorilla (esim. HTML-Kit tai Notepad++) ja tallenna se W:-aseman opetusteknologia-hakemistoon nimellä index.html.
  2. Avaa selaimeen HTML5-dokumentin pohja (suositus) tai XHTML-dokumentin pohja. Voit siis valita kummalla kuvauskielellä teet sivut. Kopioi pohja dokumentin alkuun (poista mahdolliset editorin oletuksena antamat tekstit).
  3. Laita title-elementin sisällöksi Opetusteknologia-kurssisivusto. Hakukoneet löytävät parhaiten title-elementissä olevan tekstin, jolloin sen on syytä olla perusmuodossa.
  4. Lisää sivulle pääotsikko (Opetusteknologia-kurssisivusto). Kirjoita otsikkoon myös oma nimesi.
  5. Kirjoita lyhyt parin lauseen kuvaus siitä, millaisesta kurssista on kyse. Käytä p-elementtiä.
  6. 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>
  7. 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.
  8. 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
    
  9. 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.
  10. 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.
  11. Testaa sivun toimivuus jollakin selaimella. Avaa sivu suoraan W:-asemalta valinnalla File | Open File.
  12. 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.
  13. 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:

  1. Aloita uusi dokumentti ja tallenna se demot-hakemistoon nimellä index.html.
  2. Kopioi sivulle HTML5- tai XHTML-dokumentin pohja ja lisää siihen sivun aiheeseen sopiva title ja pääotsikko (h1).
  3. Lisää sivulle tekstikappale (p), johon sisällöksi Kurssin demojen aiheet. Merkitse teksti strong-elementillä.
  4. 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".
  5. Tee demosta 3 linkki (a) kyseiselle sivulle.
  6. Lisää lopuksi sivun loppuun tekstikappaleen sisään linkki etusivulle.
  7. 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.

  1. Aloita uusi dokumentti ja tallenna se oppimistehtavat-hakemistoon nimellä index.html.
  2. Kopioi sivulle HTML5- tai XHTML-dokumentin pohja ja lisää siihen sivun aiheeseen sopiva title ja pääotsikko (h1).
  3. 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.
  4. 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.
  5. 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.
  6. Validoi lopuksi sivu ja korjaa mahdolliset virheet.

Sähköpostilomake

Viestin lähettämislomake

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ää.

  1. Tallenna lomake.css aiemmin luotuun /opetusteknologia/demot/demo3-hakemistoon.
  2. Aloita uusi HTML-dokumentti. Laita nimeksi index.html ja tallennushakemistoksi äsken mainittu demo3-hakemisto.
  3. Lisää linkki CSS-tyylitiedostoon lomake.css.
  4. Muokkaa sivun title- ja h1-elementit sopiviksi.
  5. Lisää HTML-sivulle lomake (form). Älä toistaiseksi laita mitään action-attribuuttiin.
  6. Lisätään lomakkeelle tekstikenttä. Lisää ensin label-elementti. Kirjoita otsikkotekstiksi Aihe. Lisää otsikkotekstin jälkeen tekstikenttä (input-elementti). Laita lopuksi label-elementti ja input-elementti saman p-elementin sisään.
  7. Lisää input-elementille id-ominaisuuteen oma, yksilöllinen arvo.
  8. Yhdistä label-elementti ja lomakekenttä toisiinsa for-ominaisuudella.
  9. Tallenna dokumentti. Avaa lomake selaimessa ja testaa, että label- ja input-elementit ovat yhdistettyinä napauttamalla lomakekentän otsikkoa. Nyt kursorin pitäisi mennä siihen lomakekenttään, johon yhdistäminen on tehty.
  10. Lisää input-elementille name-ominaisuus. Ominaisuus kertoo kentän nimen lomakkeen käsittelijälle (voi olla eri kuin id-attribuutti!).
  11. 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>
  12. Tee uusi kappale (p). Lisää kappaleen sisään label-elementti, johon teksti Prioriteetti.
  13. Lisää kappaleen sisään label-elementin jälkeen valintalista (select).
  14. Kirjoita option-elementteihin vaihtoehdot Korkea, Normaali ja Alhainen.
    <option>Normaali</option>
  15. Valitse vaihtoehdoista Normaali valituksi oletuksena (selected="selected").
  16. Yhdistä label- ja select-elementti toisiinsa for- ja id-ominaisuuksilla. Anna select-elementille name-ominaisuuteen jokin järkevä arvo.
  17. Tee uusi kappale (p). Lisää edelliseen tapaan kappaleen sisälle uusi label, jonka sisällöksi kirjoitat Vastaanottaja, ja valintalista (select).
  18. Lisää valintalistan sisään valintaryhmä (optgroup). Anna valintaryhmälle otsikoksi (label) opettajat.
  19. Lisää valintaryhmään kolme valintaa (option):
    • Antti Ekonoja
    • Jukka Mäntylä
    • Tommi Lahtonen
  20. Lisää toinen valintaryhmä, jolle annat otsikoksi (label) tuntiopet ja lisää valinnat (option):
    • Mikko Aarnio
    • Jaakko Kaski
  21. Kokeile lomakkeen toimintaa selaimella.
  22. 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>
  23. Muuta vielä valintalistalle mahdollisuus valita useampi vastaanottaja. Laita siis valintalistan multiple-ominaisuuden arvoksi multiple. Laita myös valintalistan name-ominaisuuden arvoksi vastaanottaja.
    <select name="vastaanottaja" id="vastaanottaja" multiple="multiple">
  24. Kokeile selaimella lomakkeen toimintaa. CTRL- ja SHIFT-näppäimien avulla voit valita useamman vastaanottajan.
  25. Tehdään valintanappi-lista formaatin valinnalle. Lisää uusi p-elementti, jonka sisään laita label-elementti, jonka sisälle lisäät suoraan radio-painikkeen, ja vasta tämän jälkeen otsikkotekstiksi Teksti.
    <p><label><input type="radio" value="" />Teksti</label></p>
  26. Nyt label- ja input-elementti liittyvät suoraan toisiinsa ilman for-ominaisuutta. Lisää vielä kaksi label- ja input-paria (molemmat oman p-elementin sisään). Laita otsikoiksi HTML ja XML.
  27. Lisää kaikille valintanapeille sama arvo name-attribuuttiin.
  28. Anna kullekin valintanapille oma arvo value-attribuuttiin, joka näkyy lomakkeen käsittelijälle tietoja lähetettäessä.
  29. Valitse oletusvalinnaksi Teksti lisäämällä kyseiselle input-elementille määre checked="checked". Ryhmän otsikko Formaatti lisätään myöhemmin.
    <p><label><input type="radio" name="formaatti" checked="checked" value="teksti" />Teksti</label></p>
  30. Lisää uusi p-elementti, jonka sisään laita label, jonka otsikoksi kirjoita Lähetä myös tekstiviesti. Lisää label:in sisälle valintaruutu (checkbox).
  31. Aseta valintaruudun name-ominaisuuden arvoksi tekstiviesti ja value-ominaisuuden arvoksi Kyllä.
  32. 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 arvot value- ja name-ominaisuuksiin.
  33. Tee uusi kappale (p-elementti). Lisää kappaleen sisään ensin label-elementti tekstillä Viesti.
  34. Täydennä lomake varsinaisella tekstialueella (textarea; lisää se saman p-elementin sisään, missä label-elementtikin on). Laita tekstialueelle näkymään 20 riviä (rows), joista kunkin pituudeksi 50 merkkiä (cols). Nimeä tekstialue antamalla name-ominaisuuteen jokin sopiva arvo. Yhdistä tekstialue otsikkoon id- ja for-attribuuttien avulla.
  35. Lisää loppuun vielä yksi p-elementti ja sen sisälle Lähetä viesti -painike (submit). Anna painikkeen teksti kirjoittamalla sopiva arvo value-ominaisuuteen.
  36. Ryhmittele lomakkeen osat fieldset- ja legend-elementeillä. Katso mallia demon alussa olevasta mallikuvasta (Otsikkotiedot ja Viestiosa siis omiksi ryhmikseen). Kirjoita ryhmän alkuun <fieldset> ja loppuun </fieldset>. Ryhmittelyt tulevat form-elementin sisälle.
  37. Ryhmän otsikko lisätään fieldset-elementin sisälle <legend> ... </legend> -elementillä. Laita osien otsikoiksi Otsikkotiedot ja Viestiosa.
  38. Lisää viestiosan (fieldset) sisälle toinen fieldset-ryhmä, jonka sisälle rajaat formaatti-valintanapit. Anna alueen nimeksi Formaatti legend-elementillä.
  39. Lisää viestiosan (fieldset) sisälle myös toinen fieldset-ryhmä, jonka sisälle rajaat Lähetä myös tekstiviesti ja Lähetä myös tavallinen kirje -valintaruudut. Anna alueen nimeksi Lisäasetukset legend-elementillä.
  40. 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 arvoksi post.
  41. 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.
  42. Validoi HTML-tiedostosi ja korjaa mahdolliset virheet.

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/opetusteknologia/demot/demo3/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
2016-11-02 11:37:18
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta