Ülesanded

10^A klass
2005/06 õppeaasta, III periood

Üldised juhised

Ülesannete osa koosneb 14 alaülesandest.

Esmalt moodusta enda kausta alamkaust Perenimi HTML ning kopeeri fail ylesanne.htm sellesse alamkausta.

Eemalda faililt ylesanne.htm kirjutuskaitse.

Ülesannete lahendamisel tekib sageli vajadus luua uus fail. Üks võimalik lahendus oleks:
- ava nüüd uus fail (seega yl5.htm) ning kliki teksti peal hiire parema nupuga. Vali View Source. Võid kasutada ka käsklust View ® Source
- vii sisse vajalikud muudatused (Notepadis). Salvestamiseks vali Notepadis File ® Save. Selle toiminguga salvestasid enda muudatused
- tehtud muudatuste nägemiseks pead htm faili üle laadima (näiteks vajutades klahvile F5). Sa võid kasutada ka käsklust View ® Refresh.
Kui "kõik on nässus", välju tööd salvestamata ja ava oma vastav htm fail uuesti. Kui oled iga oma kordaläinud sammu järel salvestanud, ei tule kuigi palju topelt tööd teha.
Iga lahendatud ülesanne salvesta eraldi failina, näiteks har1.htm, har2.htm jne. omanimelisse kataloogi Perenimi HTML. Ülesannete lahendamise järjekord ei ole oluline. Kokku peaks olema selles kataloogis vähemalt 13 faili, lisaks pildifailid.
Esialgu on lihtsaim viis minu tekst asendada, jättes alles ainult vajaliku tekstiosa.
Ära unusta nendes ülesannetes lisamast (muutmast) autori nime, st. asenda minu nimi enda omaga. Tulemust näed vasakul pool üleval sinisel ribal. Seega on iga ülesande lahendus Sinu poolt autoriseeritud.
Sul on lihtsam oma tööst aru saada, kui kasutad struktureerimist (liigendamist).
Kõige esimene avatav fail (hiljem selgub, et see on tiitelleht) peab kandma nime index.html
Paiguta töös kõik vajalikud failid ainult ühte kausta nimega Perenimi HTML.
Kasuta faili nimede ja laiendite puhul ainult väikesi tähti. Faili nimedes püüa hakkama saada ilma täpitähtedeta.
Kui kõik ülesanded on valmis, esita flopil kataloog Perenimi HTML mulle hindamiseks.

Igasugused ettepanekud ülesannete osas on teretulnud.

Ülesande 1 lahendus (yl1.htm) võiks välja näha sellisena:

Ülesanne 1

Sisesta üks normaalstiilis tekstilõik, milles annad lühikese ülevaate endast: nimi, klass, kool, hobid, kodu, sõbrad jne.

Ülesanne 2

Pealkirjad on üks lõigustiilidest, sealjuures õige laialdase kasutusega. Kindlasti juba märkasid, et HTML-keele juhendis on kasutatud mitme erineva suurusega (tasemega) pealkirju. Pole midagi lihtsamat kui tekitada hulgaliselt pealkirju.

Muuda tekstis "See on pealkiri tasemega x", kusjuures x = tase, lõigustiili nii, et see vastaks kirjapandule, st et "See on pealkiri tasemega 1" oleks 1 tasemega pealkiri.

See on pealkiri tasemega 1
See on pealkiri tasemega 2
See on pealkiri tasemega 3
See on pealkiri tasemega 4
See on pealkiri tasemega 5
See on pealkiri tasemega 6

Ülesanne 3

Eelmises ülesandes kasutasid teksti (kirja) suuruse muutmiseks pealkirjastiili tasemetega H1 kuni H6. See moodus on aga sobimatu või ebamugav kui näiteks tahame kogu failis teksti pisut suurendada või vähendada või sõnas mingit tähte suurendada või vähendada jne.

Tee näidis kirja kõikvõimalike suuruste demonstreerimiseks. Baaskiri on siin baasiks, mille suhtes toimub suurendamine või vähendamine. See tähendab, et "Baaskiri - 1" on "Baaskiri" suhtes 1 võrra väiksem jne. Siin Sa ei saa kasutada H1 - H6 pealkirju.

Baaskiri - 2
Baaskiri - 1
Baaskiri
Baaskiri + 1
Baaskiri + 2
Baaskiri + 3

Ülesanne 4

Järgmisena kasutame aadressistiili. Aadressistiilis soovitatakse kirjutada dokumendi lõpus olev info - tavaliselt nn copyright - info ning andmed lehekülje tegija kohta (n e-posti aadress), viimane muutmise aeg jne.

Lisa siia link võimalusega Sulle e-post HTG serverisse saata. Kujutan asja ette nii, et klikates siin Sinu nimel avaneb mul võimalus Sulle kiri saata HTG-sse, kusjuures HTG mailiaadressi ma siin otseselt näha ei soovi.
Kirjuta selle ülesande lahenduse lõppu andmed ülesande täitja kohta aadressistiilis.

Ülesanne 5

Selles ülesandes vaatleme veel üht lõigustiilidest, nimelt eelformaaditud tekstilõiku. Tema eripäraks on see, et tekst väljastatakse ekraanile jäigasammulises kirjas (nagu Courier), kus kõik kirjamärgid, tühik kaasa arvatud, on ühesuguse laiusega. Eelformaaditud stiilis sisestatud tekst, ka veerud, "jäävad paigale", tekst oleks nagu eelnevalt formaaditud ehk teisisõnu: tekst tuleb ekraanile nii, nagu Sa selle sisestasid.
Eelformaaditud teksti korral ei ole vaja sisestada HTML-keele tühiku märki.
Eelformaaditud teksti algusse kirjuta käsklus <PRE> ja lõppu </PRE>. Soovitav on kasutada fonti COURIER.

Kujunda järgmine tekst eelformaaditud tekstina.
Xa klassis on õpilased: Peeter J., Krista P., Juss K. ja Mari M.
Xb klassis on õpilased: Villu U., Joonas J. ja Juta P.
Xc klassis on õpilased: Jaan V. ja Juta A.
Xd klassis on õpilased: Krista K., Jüri J., Marju S. ja Joosu P.

HTG parimad
netiotsijad on:

Xa: Xb:
Peeter J. Villu U.
Krista P. Joonas J.
Juss K. Juta P.
Mari M.

Xc: Xd:
Jaan V. Krista K.
Juta A. Jüri J.
Marju S.
Joosu P.

Selle ülesnde lahendus näeb välja selline:

Ülesanne 6

Sageli tuleb esitada mitmesuguseid nimekirju, loetelusid jms. Keerulisemad nendest on mitmetasemelised loetelud.
Loetelude moodustamise võimalused:

nummerdamata loetelu
nummerdatud loetelu
määratlus- ehk definitsiooniloend
hierarhilised loendid

Tee nummerdatud loetelu produktidest, mis ema palus osta:
4 juustukuklit hommikusöögiks, 4 õunaampsu hommikusöögiks, 1 leib, 400 g liha, ca 1 kg viinamarju, ca 2 kg õunu, väikevennale jäätist ja õlu isale.

Tee nummerdamata loetelu produktidest, mis Sa tegelikult ostsid:
4 juustukuklit hommikusöögiks, 4 magusat koogikest hommikusöögiks, 0,5 leiba, 1 l piima, 400 g hakkliha, 1 kg õunu, 4,5 l jäätist, 2 kg tomatit, 2 p nätsu, 1 kg kommi ja 1 CD muusika jaoks.
Lisa siia veel 4 asja, mis Sa ostsid.

Ülesanne 7

Loo dokument (fail), mille sisuks on klassi kaasõpilastele jäetavad teated (nummerdatud või nummerdamata loetelustiilis). Faili nimeks pane teated.htm ning salvesta samasse kataloogi, kus asuvad sinu ülejäänud vastusefailid. Teadete leheküljel olgu kindlasti ka pealkiri, näiteks "Klassi teated". Sinu kirjutatud teated olgu ikka mingid teated.

Ülesanne 8

Tekstide kujundamisel on sageli tarvis mõnda osa eriliselt esile tõsta. Selleks võid kasutada stiili Bold, Italic, Underline ja muidugi ka nende ühiskombinatsioone.

Sinu ülesandeks järgneva tekstiga

"HTG-s õppides ei õpi ma mitte kooli vaid elu enda jaoks!"

läbi proovida ükshaaval ja omavahel kombineerituna need kolm teksti esiletõstmise stiili - igaüks eri real. Esimesel real olgu võrdluseks normaalstiilis tekst.
Seega peaks kokku saama 1 + 6 erinevat rida.

Ülesanne 9

Lõiku saab rajastada vasakule, keskele või paremale.

Kopeeri siia ülesandes 8 jutumärkide vahel olev lause ning rajasta ta:

keskele,
vasakule,
paremale.

Ülesanne 10

Ülesanne sisaldab 2 ülesannet.
Sageli on tegemist pikkade dokumendifailidega, kus tekib vajadus pärast mingit lõiku suunata lugeja uude kohta. HTML-dokumentides kasutatakse sageli ka viitamist faili lõpust algusesse või sisukorrale.

A

Tee oma töö tiitelleht (see on siis fail index.html) juhindudes järgmisest:

Tiitellehel peab olema järgmine tekst:
- kool (HTG),
- HTML-keele ülesannete lahendused
- Koostas: (märgi oma ees-, perekonnanimi ning klass)
- õppeaasta,
- võid lisada ka muud vajalikku (Sinu arvates).
Tee viit järgmisele lehele Sisukorra juurde (näiteks: Siit saad sisukorra juurde).

Järgmisel lehel ("Sisukord" - on eraldi fail) peab olema võimalik vastaval ülesandel klikates vaadata Sinu poolt koostatud lahendust. Sisukorras puudub ilmselt ülesanne 9, kuna see on ju avafail.
Kujundamise suhtes piiranguid pole, lase oma vaimul ja fantaasial "lennata".

Ülesanne 11

Välisviida panekul peame üldjuhul teadma viidatava faili URL-aadressi. Samas kataloogis asuvate failide puhul piisab vaid viidatava faili nimest.

Moodusta kolm viita.

Viit failile, millega saab vaadata HTML juhendit (HTML juhend -> index.html, asub HTG serveris ja on võimalik vaadata ainult internetiühenduse olemasolul.)
Viit omaloodud failile teated.htm. Kuna fail asub samas kataloogis, siis internetiühendust vaja ei ole.
Viit kooli kodulehele (http://www.htg.tartu.ee/index.php, on võimalik vaadata ainult internetiühenduse olemasolul.)

Klikkamiseks ära kasuta pikka nime, vaid lühikest. Näiteks: HTML juhendi leiad siit.

Ülesanne 12

Skaneeri arvutisse oma viimase aasta "talutav" pilt. Tee sellest pildist nn. "thumbnail" ja kasuta seda lingina, mis viib suurema pildi juurde. Esimene pilt peaks olema "väike" (selline pilti laetakse arvutisse kiiresti) ja teine pilt "suur", aga mahtuma ikkagi arvuti 17'' ekraanile. Seega on siin vaja 2-te erineva suurustega pilti.
Joonista Paint-ga või muu samalaadse graafikaprogrammiga (väike) pilt, salvestades laiendiga jpg. Konverdi see pilt GIF formaati ning muuda tagapõhi "läbipaistvaks". Paiguta antud pilt eelmises punktis mainitud pildi alla lehe keskele. Seda, kas sinu joonistatud pildi tagune on ikka "läbipaistvaks", saad konrollida, kui muudad oma lehe taustavärvi.

Ära unusta, et kõik pildid pead salvestama/kopeerima ka oma vastavasse kataloogi.

Ülesanne 13

Muutsin teksti sisestamise eel baasvärvi. Tundub siiski, et tekst pole selgesti loetav.
See on rahulikum värvitoon, iseasi, kuidas ta kellelegi meeldib.
Jälle uus värvivalik, seekord punane.

Nüüd panen proovile Sinu värvitunnetuse. Värvi järgnev "nullide riba" vikerkaarevärvides (punane, oranž, kollane, ..., lilla). Iga järgnev nullide rida olgu uut värvi. Tee kokku 7 rida.

OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

Ülesanne 14

Ülesanne sisaldab 2 ülesannet.
Tabeleid kasutatakse HTML dokumentides sagedamini, kui seda esialgu arvata oskame. Põhjuseks on see, et lisaks tavapärasele kasutusele saab tabelite abil lehekülgi ka kujundada (vaatluskeskkonnas olles ei saa raamide puudumisel arugi, et tegemist on tabeliga).

Moodustasin siia alla 8-realise ja 6-veerulise kollase tabeli.

Tulemus on esialgu õige hirmuäratav, aga paraneb kohe, kui sisestada lahtritesse mingid andmed. Mina sisestasin lahtrisse tühiku sümboli:  .

Kellaaeg	Esmaspäev	Teisipäev	Kolmapäev	Neljapäev	Reede

Tabeli värvimiseks peab võimalused järjestama nii, et ülimuslik on lahtri värv ja madalaima staatusega tabeli värv. Seega ei teki mingit lahkheli ka siis, kui mingis tabelis on näiteks erinevalt värvitud kogu tabel, esimene rida ja esirea viimane lahter.

Igal usinal HTG õpilasel on kodus värviline tabel - nädalaplaan - kus sarnased õppeained on sama värvi. Äsjaõpitud vahend võimaldab kergesti teha ja muuta sedalaadi tabeleid.

Koosta oma nädalatunniplaan. ESMASPÄEV (kuna sellel päeval on tundide ajad muudetud) aga eraldi failina. Jäta esmaspäeva tunniplaan tühjaks ja kujunda see päev mingi pildiga (peab näha olema tervikuna üle esmaspäeva). Klikates nüüd esmaspäevase päeva pildi peal, ilmub ekraanile ainult selle päeva (ESMASPÄEVA) tunniplaan.

Lõpetuseks

Asi ei olnud üldsegi nii raske, nagu algul tundus.

Vaata oma töö veel kord kriitilise pilguga üle, kas kõik "asjad" ikka töötavad.
"Väga hea" hinde saamiseks tuleb ikka vaeva näha.
Järsku Sul tekkis nüüd soov ka oma kodukas valmis teha. Palju asju saad ju siit juba võtta.

EDU SULLE!

Kui soovid endale tõsiselt head kodukat teha, siis soovitakisn Sul valida valikainena "IF6 - HTML-keele kursus".