Nyt tutustumme HTML-koodaukseen, eli toisinsanoen kirjoitamme yksinkertaisen nettisivun käyttäen html-koodausta.
Opettaja näyttää perusteita taululla aluksi ja sen jälkeen on tarkoitus itsenäisesti koodata html-sivu. Jotta tämä tapahtuisi koulunomaisesti asetetaan tehtävälle jotain vaatimuksia, niitä seuraavassa:
- oma sivuotsikko (head)
- oma taustaväri tai taustakuva
- ainakin kolme linkkiä
- ainakin kaksi kuvaa
- jonkin tekstinosan muotoilua muuksikin kuin perustekstiksi (esim. otsikko)
- lista tai taulukko
Toimi seuraavasti:
- Avaa notepad/muistio kirjoita sivukoodisi.
- Tallenna (jo keskeneräinenkin teksti välillä) "kaikki tiedostot" vaihtoehdolla tiedostosi nimellä "omanimiHTML.html".
- Pääset katselemaan keskeneräistä sivuasi selaimen "avaa tiedosto"-toiminnolla (muista päivittää näkymä muutosten jälkeen).
- Kun olet tyytyväinen sivuusi, tallenna tiedostot. Kaikkien html-tiedostojen ja niihin liittyvien kuvien yms. kannattaa olla samassa "omat tiedostot"-kansion alikansiossa, jonka nimi on vaikka "omanimiHTML"
- Ota sivustasi näytönkaappauskuva(print screen-napilla) ja lataa se blogiisi saatetekstin kera (mitä meni pieleen, mitä pitäisi lisätä jne.
Hyödyllisiä linkkejä:
Älä hätäile, pyri hyvään työhön!
... JatQ...
VastaaPoistaKun olet saanut yhden sivun nyt tehtyä, niin suunnittele kolmen sivun kokonaisuus jostakin aiheesta niin, että saat "pääsivulta" jotakin kohdetta klikkaamalla auki toisen selainikkunan, jossa näytät "sivun2".
Sivu 3 puolestaan aukeaa pääsivulta samaan ikkunaan, jossa pääsivua selataan, mutta sieltä johtaa myös linkki takaisin pääsivulle.
Kokeile myös erilaisia taustoja joka sivulla. Googlettamalla löytyy taustagrafiikoita.
Jokaisella sivulla olisi oltava pari kuvaa ja tekstiäkin, linkkejä myös omien sivujen ulkopuolelle.
Kokeile edelleen käyttää kuvia linkkeinä ja ellet jo ensimmäisellä sivulla kokeillut tehdä linkkinä toimivaa kuvaa, joka vaihtuu sen mukaan, onko hiiren osoitin päällä vai ei, tee se nyt.
Mieti onko linkki parempi avata uudessa ikkunassa vai samassa ikkunassa?
Huomasin että joku idiootti on hakkeroinut ja tuhonnut tuon html-opassivuston. Tässä muutama lisää...
http://users8.jabry.com/mikaves/html/
http://people.uta.fi/~la19672/htmlopas/htmlopas.htm
http://www.sivut.org/html/
http://www.htmlhelp.com/reference/html40/olist.html