Viies kodutöö

Viies kodutöö


Viies kodutöö on ühtlasi ka viimane, millesse tuli siduda praktiliselt kõik oskused, mis olin eelnevate tundide ja tööde käigus omandanud. 

Tulemust saab näha siit. 

Kolmas kodutöö

Kolmandaks kodutööks oli JavaScriptis teha kolm kalkulaatorit vabalt valitud teemal. Kalkulaatori kõrvale tuli paigutada pilt ja kaustada InnerHTML võimalust. Kalkulaatori valmiseks tuli koostada eraldi nupud. 


Mida tegin? 

1. Esmalt koostasin kolm erinevat faili. 
2. Igasse faili tegin erinevad kalkulaatorid ja lisasin InnerHTMLi abil pildid. 
3. Tegin neljanda faili, kuhu n-ö sidusin kokku erinevate nuppude alla kõik eelnevalt valminud lehed, panin hüpikaknas avanema. 

Lisaks tunnis õpitule otsisin lisamaterjali veebist: 
http://www.w3schools.com/js/DEFAULT.asp
http://metshein.com/index.php/veeb/javascript

Aega kulus selle töö tegemiseks 8-9 tundi. 

Tulemus siin. 

Teine kodutöö

Teiseks kodutööks oli eelmise kodutööna koostatud veebilehe kujundamine: 

• erifontide kasutamine, 
• korduv taustapilt, 
• pseudoklasside kasutamine, 
• jm mis sai tunnis läbi proovitud. 

Töö koostamisel kasutasin lisaks eelmisel tunnil õpitule ka õppejõu konspekti. 

Mida tegin? 

1. Tegin eraldi .css faili ja linkisin selle .html failiga.

2. Lisasin korduva taustapildi. 

3. Muutsin pealkirjade fonte, selleks leidisin veebist sobilikke. Erifontide kasutamisel tasuks arvestada, et tähed õ, ä, ö ,ü võivad jääda muutmata või neid mõne fondi puhul üldse ei kuvata. 

4. Muutsin pealkirjade ja põhitekstide värvusi taustapildiga sobivaks, fontide suurusi (pealkirjad suuremaks) ning pealkirjade paiknemist (keskel, vasakul, paremal). 

5. Lisasin sektsioonidele valge tausta (läbipaistvust ei kasutanud), serva äärised (muutsin ka joonte värvust), esimese ja viimase sektsiooni nurkade raadiusi.

6. Paigutasin sektsioonid lehe keskele, määrasin sobiliku laiuse ja "polsterduse".

7. Kolmandas sektsioonis kasutasin tausta astmetäidet, mis tekitas tausta värvuse sujuva ülemineku valgest roosani.  

8. Lisaisn nurkadesse ja viimase sektsiooni alaserva keskmisesse ossa eripilte. 

9. Teise, kolmanda ja neljanda sektsiooni pealkirjadele lisasin efekti (hiirega teksti peale liikudes muudab viimane värvi). 

10. Muutsin esimese sektsiooni põhiteksti esimese tähe fonti, selle värvust ja suurust. 

11. Lisasin teises sektsioonis olevatele piltidele efekti (hiirega pildile liikudes liigub pilt esile ja pöörab). 

12. Tabelis muutsin päise tausta ning lisasin efekti (hiirega tabelile liikudes muutub selle taust värvi). 

13. Lingi efekti kasutamiseks lisasin esmalt oma veebilehele ühe lingi. Eriefekti käigus hiirega lingile liikudes muutub selle tekst valgeks ja taust tumelillaks.  

Tulemus siin. 

Töö tegemisel soovisin kasutada konspektis kirjeldatud pseudoklassi tabelis tühjade lahtrite taustavärvi muutmiseks. Konspektis lk 10 on selleks pseudoklassi soovitus: 

td:empty

{

background-color:grey;

}

See pseudoklass peaks muutma tabeli tühjad lahtrid halliks. Minul see millegipärast ei töötanud. 

Esimene kodutöö

Esimeseks kodutööks oli koostada veebileht, mis sisaldaks järgmist: 

• HTML5.
• Kujundust ei tee, ainult sisu.
• Sisaldab vähemalt 2 sektsiooni (section) – üks õpetab, seletab, näitab ette, teine sisaldab ülesannet.
• Vaja pealkirju (h1, h2 …). Tekst kenasti lõikudes (p) ja loendites (ul, ol).
• Püüdke võimalusel lisada üks tabel.
• Kindlasti mõned pildid ja võimaluse korral ka audio ja video.

Veebilehe tegemisel kasutasin Macil töötavaid TextWrangler'it ja ClassicFTP'd.

Minu kodutöö on nähtav siin.

Valideerimiseks kasutasin keskkonda http://validator.w3.org, mis andis viis errorit: 

1. kõikidele (neljale) fotodele sama viga, milleks oli laiuse % määramine;

2. video puhul soovitab kasutada CSSi. 

Kujundust ei olnud lubatud teha, kuid proovisin ikka. Muutsin kirja fondi stiili ja tausta värvust. Valideerimisel selgus, et nende puhul tasuks kasutada CSSi, misjärel ma kustutasin ikkagi need koodid ära. Eks siis järgmisel korral :)