ITV0110 1. töö: Html põhioskused
 |
Esimese praktikumi ülesanne on teha väike veebisait iseenda kohta.
Kuidas teha?
Lehti tehes pead tingimata kasutama kõiki alltoodud tehnoloogiaid ja tegema ära kõik nõutud osad: sisuline eesmärk praktikumil on õppida neidsamu baastehnoloogiaid (reavahed, pealkirjad, lingid, värvid, tabelid, pildid jms) kasutama. Uuri kursuse põhilehel viidatud sissejuhatavatest tutorialitest, mis tagidega ja kuidas sa neid asju teha saad.
Kui oled varem teinud veebilehti, siis need varasemad selle praktikumi tulemuseks ei kvalifitseeru (küll aga oskad sel juhul ülesande väga ruttu valmis saada).
Igati sobiv ja soovitav on lehtedele lisada muid mõistlikke ja huvitavaid asju ka omal initsiatiivil.
Lehed tuleb luua hariliku teksti(programmeerimis)redaktoriga (soovitavad näiteks Notepad++ või scite, mitte puhtalt visuaalse redaktoriga. Esitamisel peab oskama juhendajale seletada, mida konkreetsed htmli markupi osad sinu lehel teevad ja miks nad seal on. Sulle arusaamatuid htmli markupe elemente ei tohi kasutada (st enne kasutamist tuleb nendega mõne htmli õppematerjali abil tutvuda!). CSS ja javascript on lubatud (vaja neid siin praksis ei ole!), aga ainult juhul, kui oskad seletada, kuidas nad täpselt töötavad.
Loodud lehti võib selles ülesandes hoida lihtsalt arvuti failisüsteemis: nad ei pea olema laetud serverisse.
Soovitav on teha lehed järgmiste etappidena, kuid esitada tuleb töö tervikuna, st kui kõik etapid valmis.
Abiks on mõistlik kasutada Raggetti (html 4 standardi peatoimetaja) klassikalisi tutoriale (esimene ja teine) või w3schoolsi põhjalikumat html tutorialit. Kui soovid lehti kenamaks teha (ei ole selles ülesandes veel kohustuslik), siis on hea mõte järgida neid soovitusi.
Mis veel: kirjuta kõik tagid väikeste tähtedega, sest nii on kombeks. Kui kasutad HTML-s päist (ei ole selles praksis kohustuslik), siis kasuta juba HTML5 päist, st <!DOCTYPE HTML> ilma selle PUBLIC jne pika jututa lõpus.
Esimene etapp
Kirjuta teksti(programmeerimis)redaktoriga 5 html lehte, mis on omavahel lingitud ja sisaldavad infot sinu enda kohta (ei pea olema tõene info!). Pealehel olgu mh menüü, näiteks: Minust, Sõbrad, Lingid, Hobid jne.
Teine etapp
Joonista mõne graafikaprogrammiga 5 pilti (mõned neist võivad olla ka sinu enda tehtud fotod, osad peavad aga olema joonistatud), salvestage neist osad PNG või GIF ja osad JPEG formaati ning lisage nad koduleheküljele eelmisest ülesandest (5 html lehte, omavahel lingitud). Kõigil lehtedel olgu siis mõni ise joonistatud/pildistatud PNG või GIF või JPEG formaatides pilt.
Neile lehtedele tuleb järgmisena panna osadele taustavärv ning osadele taustapildid. Samuti tuleb ära muuta tavaliste ning külastatud linkide värvid (vaikimisi on need üldiselt sinised ning lillad) muutes nad endale meeldivaks.
Kolmas etapp
Tee alltoodud sorti tabel, kasuta tabeli päises taustavärve ja püüa tõepoolest süveneda tabeli tegemise põhimõtetesse (mitte lihtsalt copy-paste kuskilt näite järgi), sest sul on kindlasti vaja oskust tabeli html-teksti käsitsi parandada.
Tabeli sisu peab olema reaalne või väljamõeldud info sinu enda või mingite sinu lemmikasjade kohta.
Nr Nimi Matemaatika Inglise keel 1 Aleksei Matiisen 95 77 2 Lea Kuusik 88 99 3 Leo Roost 32 83 4 Tarmo Eessaar 100 100
Soovitusi
Failid ja neile viitamine
Failid pane mistahes kataloogi oma masinas. Kõige lihtsam on hoida kõik failid ühes kataloogis ja viidata neile nii: <a href="minufail.html">minu link</a>. Seepeale püüab brauser leida faili minufail.html samast kataloogist kus sisselaetud fail. Kui oled mõne lehe pannud aga näiteks alamkataloogi nimega alam, siis viita talle nii: <a href="alam/minufail.html">minu link</a> kus kaldkriips peab olema tõusev. Seepeale otsitakse sisselaetud faili kataloogist alamkataloogi alam ja sealt juba faili minufail.html.
Tähestik
Tähestiku kodeeringu osas pane tähele järgmist:
- latin1 ehk iso-8859-1 sobib enamuse euroopa tähtede jaoks, aga näiteks läti ja vene tähti seal kodeerida ei saa.
- utf-8 on universaalne kodeering, mis sobib kõigi tähestike jaoks.
- peale universaalse iso-8859-1 ja euroopa standard-iso-8859-1 on olemas veel suur hulk muid kodeeringuid eri tähestike jaoks: nende asemel on aga praktilisem kasutada utf-8
- redaktoris saad seada, et mis kodeeringus redaktor täpitähti salvestab: näiteks scites otsi menüüst File->Encoding ja sealt vali kas "code page property" (see teeb üldjuhul latin1 ehk iso-8859-1) või utf-8 (see teeb siis muidugi utf-8)
- kui sa ei ütle <head>...</head> sees, mis tähestiku-kodeering html-s on, arvab brauser tüüpiliselt ise, et küllap on see nn latin1 ehk iso-8859-1.
- brauserile saab konkreetse tähestiku öelda, kui teed oma lehel struktuuri, kus oluline osa tähestiku jaoks on charset=UTF-8 (selle asemel võid vajaduse järgi kasutada siis näiteks iso-8859-1 vms):
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head <body> ... </body> </html>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> asemel saad kasutada ka <meta charset="UTF-8">
CSS
CSS-i osas tasub arvestada, et:
Enamust kujundusnüansse on lihtne teha CSS-ga. CSSi on kõige lihtsam kasutada nn inline-css-na, st sead oma lehe osade väljanägemist tagiparameetritega a la style="color: green" või style="font-family: Arial, Helvetica, sans-serif" näiteks nii: <body style="font-family: Arial, Helvetica, sans-serif"> . Aga, nagu öeldud, kõiki siin praksis nõutud asju saab ka ilma css-ta teha.
Praksi esitamine ja hindamine
Kirjuta mõnele lehele selgelt nähtavalt oma nimi ja matriklinumber, siis leiab praksijuhendaja need üles ja ei pea küsima.
Kui lehed valmis, kutsu praksijuhendaja kohale (või kui töö sinu oma laptopis, vii tema juurde) ja näita lehed ette.
Esimese praksi eest saad - kui kõik osad tehtud - alati täispunktid, v.a. juhul, kui esitamisega hiljaks jääd (siis saad ainult pooled punktid). Kui mõned nõutud osad on puudu, siis suunab juhendaja sind lihtsalt neid lisama ja ei võta enne praksi vastu.
Meeldetuletuseks, et mis peab lehtedel olema:
- Kokku vähemalt viis lingitud lehte.
- Esilehel menüü.
- Vähemalt viis pilti, mis on su enda tehtud (fotod või joonistatud).
- Vähemalt üks enda joonistatud pilt.
- Tabel mingi sisulise sinuga seotud infoga.
- Sama tabeli päis taustavärviga.
- Üks leht taustavärviga.
- Üks leht taustapildiga.
- Vähemalt ühel lehel muudetud värvidega (mitte vaikimisi sinine) lingid.