Oppimistehtävä 2

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 XHTML 1.0 Strict- tai HTML5-dokumenttityyppiä. Dokumenttien on oltava valideja.
Sivuille ei tarvita erillisiä CSS-tiedostoja, vaan kaikki kuvissa näkyvät ulkoasulliset seikat tulevat käytetyistä elementeistä.
Muista lisätä sivuille kuvaavat title-elementit.
Huomioi, että eri selaimissa sivujen ulkoasu ei ole täysin identtinen. Mallikuvat on otettu tasoilla 1 sekä 3 Firefox-selaimella ja tasolla 5 Google Chromella.
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 2 palauttaminen. Kerro palautuksessa myös Muistiinpanot-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 10.4.2012 klo 24:00. Myöhästyneitä palautuksia ei oteta vastaan.

Taso 1

Tee alle linkitettyjen kuvien mukaiset WWW-sivut.

Sivu 1 koostuu siis seuraavista elementeistä:
- kahden tasoisia otsikoita
- tekstikappale, johon kirjoita oma nimesi
- 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
Sivulla 1 olevan kuvan saat ladattua täältä: appro.png. Muista lisätä kuvalle myös vaihtoehtoinen teksti.
Sivulla 2 on tekstikappale, jossa oma nimesi, sekä linkki, joka vie tehtävän ensimmäiselle sivulle.

Tee tason 1 tehtävät ja muokkaa sen jälkeen sivua 2 seuraavan kuvan mukaiseksi:

Sivulle 2 tulee tehdä hakulomake, joka hakee sivuja vain osoitteesta http://users.jyu.fi/~tunnuksesi/. Lomakkeen teossa voi hyödyntää esim. Googlen hakupalveluja. 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ä!-painiketta, ei tarvitse tapahtua mitään.
Lomakkeissa label-elementit tulee kytkeä niitä vastaaviin lomake-elementteihin.

Tee tasojen 1 ja 3 tehtävät sekä lisäksi alle linkitetyn kuvan mukainen WWW-sivu.

Sivulle 3 tulee linkittää SSI-tekniikalla oma nimi, joka sijaitsee todellisuudessa toisessa tiedostossa (esim. tiedostossa nimi.ssi), sekä sivun päivityspäivämäärä, joka on muotoiltu mallikuvan mukaisesti.
Sivulle 3 tulee tehdät linkit, joista pääsee oppimistehtävän muille sivuille.
Sivulle 3 tulee linkittää alla olevista osoitteista video- ja audiotiedostot käyttäen HTML5-elementtejä. Videon ja audion ohjauspainikkeet tulee laittaa näkyviin. Video tulee skaalata kokoon 480x360 pikseliä.
- http://appro.mit.jyu.fi/opetusteknologia/luennot/luento1/opetusteknologia1.mp4
- http://appro.mit.jyu.fi/opetusteknologia/luennot/luento1/opetusteknologia1.mp3
Sivu 3 tulee olla salasanasuojattu ja sivulle tulee päästä vähintäänkin seuraavalla tunnus-salasanaparilla:
- tunnus: opetusteknologia
- salasana: TIEP161

Käyttäjien kommentit