Kotisivut - www - HTML - CSS

1. Johdanto - Aloitustehtävä

Netistä löytyy monenlaisia www-sivuja, toiset tyylikkäämpiä, toiset vähemmän tyylikkäitä.

Tehtävä 1: Tutustu erilaisiin www-sivuihin. Mikä tekee sivusta mielestäsi hyvän? Millainen on huono sivu?
Listaa molemmista sekä hyvistä että huonoista 8 esimerkkiä otsikoiden "Hyviä yksityisten www-sivuja" ja "Huonoja yksityisten www-sivuja" sekä "Hyviä organisaatioiden www-sivuja" ja "Huonoja organisaatioiden www-sivuja" alle.

Merkitse sivuista
a) Sivuston nimi/tekijä
b) www-osoite hyperlinkkinä
c) Perustelut, miksi sivu on hyvä/huono

HUOM! Liitä työhösi myös kuvankaappaukset jokaisen kohdan viidestä parhaimmasta/huonoimmasta sivusta. Kuvankaappauksia tulee työhösi siis 4x5 kpl = 20 kpl!

HUOM! Samalta www-sivustolta (Esim. MikroBitin käyttäjät) saat poimia maksimissaan kaksi eri sivua listaasi.

Tehtävä 2. Listaa ilmaisia www-palveluja, joissa on mahdollista tehdä omia www-sivuja. Asennettavat ohjelmat eivät siis kelpaa. Kerro jokaisesta löytämästäsi sivustosta nimi, www-osoite sekä mahdollisimman paljon yleistä tietoa. Otsikoi tämä osa "Ilmaisia www-palveluja nettisivujen tekoon".

Tallenna nimellä oma_nimi_www-sivut_johdantoa.

- - - - - - - - -

Lisätehtävä 1. www-sivujen tekoon löytyy ilmaisia ohjelmia. Tee mahdollisimman kattava lista em. ohjelmista.

Lisätehtävä 2. Omakohtaiset www-sivujen teko-kokemukset. Kerro itse tekemistäsi www-sivuista. Miten teit? Mistä sait ohjeita? Mitä ominaisuuuksia sivuillasi on? jne. jne.

- - - - - - - - -

2. Aiheen valinta ja tiedonkeruu

1. Selaile erilaisia www-sivuja sinua kiinnostavista aiheista.

2. Valitse aihe.

3. Mieti sivustosi alaotsikot ja listaa ne. Alaotsikoita tulee olla 6 kpl.

Esim.
Aihe: Iron Maiden
Alaotsikot: Historia, Julkaisut, ....

Tallenna nimellä oma_nimi_www-aihe.docx

Tiedonkeruu

Hae materiaalia (tekstiä, kuvia jne.) valitsemastasi aiheesta. Jaottele tieto jo hakuvaiheessa eri alaotsikoiden alle (ks. aloitustehtävä).

HUOM! Tallenna kuvat kuvatiedostoina omaan kansioosi!

HUOM! Merkitse ylös jokainen sivu, jolta haet jotakin materiaalia www-sivuillesi.

Tallenna nimellä oma_nimi_www-materiaali.docx

Johdantoa

www-sivuja

Yleisiä vinkkejä - LUE HUOLELLA!

HUOM! Tee navigointi käyttäen suhteellista (ei absoluuttista) linkkiä/viittausta! Näin sivustosi on siirrettävissä mille tahansa palvelimelle.

HUOM! Kannattaa suunnitella ensin yksi hyvä sivupohja (etusivu) ja siihen navigointi. Tämän jälkeen muiden sivujen kopiointi resurssienhallinnassa (Win+E) on helppoa ja nopeaa. Kopio etusivu ja liitä se useaan kertaan ja nimeä uudelleen. TAI: sivupohjan voi kopioida myös NVU-ohjelmassa valitsemalla File --> Save As ja antamalla nimeksi uuden sivun nimen.

Katso loistava esimerkki: http://koti.mbnet.fi/jusylin/XHTML/esimerkkisivu01/
Esimerkkejä muistiolla tehdyistä tätä tehtävää vaatimattomammista kotisivuista löytyy osoitteesta: http://www.peda.net/veraja/uurainen/koulukeskus/oppiaineet/vuosiluokat79/tietotekniikka/oppilastoita/html
TUTUSTU! Pääset katsomaan sivujen lähdekoodia valitsemalla Näytä --> Sivun lähdekoodi tai Näytä --> Lähdekoodi.

Esimerkki käsintehdystä sivustosta, jossa on käytössä CSS-tyylitiedosto, on: http://koti.mbnet.fi/jusylin/

OHJE OPETTAJALLE
< ja > -merkkien lisäys Pedaan Jos haluat lisätä tekstimoduuliin erikoismerkkejä kuten, <, käytä alla näkyvää koodia sitä varten. Merkki Koodi
<	<
>	>
&	&