Oppimistehtävä 3
Toteuta mallikuvien mukaisia WWW-sivuja. Kaikille tasoille yhteisiä vaatimuksia ja ohjeita ovat:
- Dokumenttien rakenteen pitää olla järkevä, eli käytä rakenteellisesti oikeita elementtejä.
- Jokaisen dokumentin täytyy noudattaa joko HTML5- tai XHTML 1.0 Strict -dokumenttityyppiä. Dokumenttien on oltava valideja.
- Sivuille ei välttämättä tarvita erillisiä CSS-tiedostoja, vaan kaikki kuvissa näkyvät ulkoasulliset seikat tulevat käytetyistä elementeistä ja niiden attribuuteista.
- Muista lisätä sivuille kuvaavat title-elementit.
- Huomioi, että eri selaimissa sivujen ulkoasu ei ole täysin identtinen. Mallikuvat on otettu Firefox-selaimella. Myös selainikkunan leveys voi vaikuttaa sivujen ulkoasuun.
- Oppimistehtävän palauttaminen:
- Siirrä tekemäsi dokumentit WWW-palvelimelle (esim. users.jyu.fi) ja testaa, että ne toimivat sieltä.
- Pakkaa kaikki tehtävässä tekemäsi ja käyttämäsi tiedostot zip-pakettiin (säilytä myös mahdollinen luomasi hakemistorakenne). Tiedoston maksimikoko saa olla 10 Mt.
- Palauta zip-tiedosto Moodle-aktiviteettiin Oppimistehtävän 3 palauttaminen. Kerro palautuksessa myös Palautuksen lisätiedot -kentässä WWW-osoite, josta tehtävä löytyy sekä palauttamasi tehtävän taso (1, 3 tai 5).
- Palautus on tehtävä viimeistään tiistaina 15.11.2016 klo 23:55. Myöhästyneitä palautuksia ei oteta vastaan.
Taso 1
Tee alle linkitettyjen kuvien mukaiset WWW-sivut.
Ohjeita
- Sivu 1 koostuu siis seuraavista elementeistä:
- kahden tasoisia otsikoita
- tekstikappale, johon kirjoita oma nimesi ja päivämäärä, jolloin teit tehtävän; huomaa myös tekstiin tehdyt korostukset
- kuva
- kaksitasoinen lista, jossa mukana sekä järjestetty lista että järjestämätön lista
- taulukko, jossa mukana sekä otsikkosoluja että tavallisia soluja
- linkki, joka vie tehtävän toiselle sivulle
- Kuvaksi valitse joku omakuva / itse ottamasi kuva (HUOM! ei liian isoa kuvaa). Muista lisätä kuvalle myös vaihtoehtoinen teksti.
- Sivulla 2 on tekstikappale, johon oma nimesi ja päivämäärä, sekä linkki, joka vie tehtävän ensimmäiselle sivulle.
Taso 3
Tee tason 1 tehtävät ja muokkaa sen jälkeen sivua 2 seuraavan kuvan mukaiseksi:
Ohjeita
- Sivulle 2 tulee tehdä hakulomake, joka hakee sivuja vain osoitteesta http://users.jyu.fi/~tunnuksesi/. Lomakkeen teossa voi hyödyntää esim. Googlen hakupalveluita. Huomioi, että haku ei välttämättä löydä yhtään sivua, vaikka se toimisikin teknisesti oikein.
- Sivulle 2 tulee tehdä myös toinen lomake, jossa on käytetty lomake-elementtejä täysin samalla tavalla kuin mallikuvassa. Huomioi, että tultaessa sivulle, kuvissa valittuna olevat lomake-elementit tulee olla valittuna jo valmiiksi. Painettaessa lomakkeen Lähetä tiedot -painiketta, ei tarvitse tapahtua mitään.
- Lomakkeissa label-elementit tulee kytkeä niitä vastaaviin lomake-elementteihin.
Taso 5
Tee tasojen 1 ja 3 tehtävät sekä muokkaa sen jälkeen sivua 2 seuraavan kuvan mukaiseksi:
Ohjeita
- Sivulla 2 oma nimi tulee olla linkitettynä SSI-tekniikalla siten, että nimi sijaitsee todellisuudessa toisessa tiedostossa (esim. tiedostossa nimi.ssi). Myös sivun päivityspäivämäärä (koska sivua on viimeksi muokattu) tulee tehdä SSI-tekniikalla ja muotoilla mallikuvan mukaisesti (HUOM! myös päivämäärän formaatti).
- Sivulle 2 tulee linkittää alla olevasta osoitteesta audiotiedosto käyttäen
HTML5-elementtejä. Audion ohjauspainikkeet tulee laittaa näkyviin.
- http://appro.mit.jyu.fi/2015/syksy/opetusteknologia/luennot/luento1/opetusteknologia1_15.mp3
- Muokkaa sivun lomake-elementtejä mallikuvan mukaisiksi. Käytä apunasi HTML5-elementtejä. Sivulla muuttuneita kohtia ovat siis hakukenttä ja nimikenttä. Hakuun on asetettu pohjalle vihjeteksti ja nimikenttä on asetettu pakolliseksi.
- Sivu 2 tulee olla salasanasuojattu ja sivulle tulee päästä vähintäänkin seuraavalla tunnus-salasanaparilla:
- tunnus: tiep161
- salasana: oma etunimesi pienellä kirjoitettuna (mahdolliset ääkköset muutettuina: ä -> a, ö -> o), eli esimerkiksi: antti
Käyttäjien kommentit