TIEA361 Tietotekniikan opettajan työvälineitä

Oppimistehtävä 3 (tehtävänanto)

Kuvaus oppimistilanteesta

Oppimistehtävän 2 yhteydessä puhuttiin LibreOffice Impress -ohjelmalla tehtävästä esityksestä, minkä avulla esiteltäisiin muulle luokalle oman ryhmän oppilastyötä: mitä tehtiin, miten tehtiin, millaisia tuloksia saatiin ja mitä tulokset kertovat. Toteutetaan kyseinen esitys oppimistehtävässä 3 yksinkertaisen www-sivun muodossa.


Tavoitteet (www-tuottaminen)

Oppiainekohtaiset tavoitteet on esitelty oppimistehtävässä 2. Mainitaan tässä yhteydessä kuitenkin sen verran, että esitys perustuu tutkivan opetuksen ja oppimisen malliin, missä myös tutkimustulosten julkistaminen ja niistä viestiminen nähdään oleellisena osana tieteen tekemistä ja tieteen oppimista.

WWW-tuottamisen osalta tavoitteeksi asetetaan html5-validi sivu, missä on käytetty seuraavia elementtejä:


Tehtävänannossa on tehty seuraavia oletuksia:

Tehtävänanto

Edellisellä tunnilla tekemistänne mittauksista on tällä kertaa tarkoitus tehdä lyhyt esitys www-sivun muodossa. Tehdään tämä Linux-käyttöjärjestelmän yksinkertaisella gedit -tietokoneohjelmalla. Windows-ympäristössä vastaava ohjelma on nimeltään Notepad tai Muistio ja ne käyvät tähän työhön myös hyvin.

Käynnistetään ohjelma, jolloin aukeaa kuvan 1 mukainen tyhjä ikkuna.

gedit -tekstinkäsittelyohjelman aloitusnäyttö
Kuva 1: gedit-tekstinkäsittelyohjelman aloitusnäyttö

Kopioi dokumenttisi pohjaksi seuraava teksti:

 
<!DOCTYPE html>
<html lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=WINDOWS-1252" />
<link href="tyyli.css" rel="StyleSheet" type="text/css" />
<title>www-sivun otsikko</title>
</head>
 
<body>

<h1>Pääotsikko</h1>

<h2>Väliotsikko</h2>

<h2>Väliotsikko</h2>

</body>
</html>

Testataan sivun toimivuutta ja katsellaan, miltä se tässä vaiheessa näyttää. Tallenna tiedosto verkkoasemallesi mielestäsi sopivalla nimellä (esimerkiksi kaasutyo.html) ja avaa se sitten millä tahansa internetselaimella (Firefox, Chrome tai Internet Explorer). Selainikkunan pitäisi näyttää kutakuinkin kuvan 2 mukaiselta.

Tyhjä www-sivu.
Kuva 2: Tyhjä www-sivu valmiina muokattavaksi.

Kohtaan www-sivun otsikko kirjoittamasi teksti näkyy ikkunan ylälaidassa. Vastaavasti tämän ohjesivun ylälaidassa lukee teksti "TIEA361 Oppimistehtävä 3". Kyseiseen kohtaan voit kirjoittaa osuvan otsikon www-sivullesi (esimerkiksi tylsähkösti "Esitys oppilastyön tuloksista: Ryhmä 2"). Kohtaan Sivun sisältö tähän.. koodataan kaikki sivulle tuleva sisältö eli tekstit ja kuvat.

Muuta kohta Pääotsikko tekemäänne työtä kuvailevaksi. Lisätkää itse kohtia Väliotsikko ja nimetkää ne seuraavasti:

Kirjoittakaa näiden otsikoiden alle kutakin vaihetta kuvailevat tekstit käyttämällä p-elementtejä <p>teksti tähän</p>.

Lisätkää kuvia haluamiinne paikkoihin. Kopioikaa koodi 
 
<figure>
<img src="kuvatiedostonNimi.pääte" style="width:50%; height: 50%;" alt="Kuvaa kuvaileva teksti.">
<figcaption> Kuvan kuvateksti.</figcaption>
</figure>

ja vaihtakaa kuvatiedoston nimi ja muut tekstit kuviin sopiviksi. Lopputuloksen pitäisi olla kutakuinkin esimerkkituotoksen näköinen.


Mallituotos

Mallituotos löytyy osoitteesta http://users.jyu.fi/~matjohva/TIEA361/OT3/mallisivu.html.