Graafika.

Sissejuhatus.

Graafika kasutamise võimalust on raske üle hinnata suvalises meediaväljaandes sealhulgas ka interneti dokumentides. Ilma illustratsioonideta on dokumendid üksluised, tuimad ja igavad. Kaalutletult valitud ja sobivalt dokumenti paigutatud graafika teeb selle visuaalselt meeldivamaks ja mis kõige tähtsam annab edasi ühe dokumendi põhiideedest.

Illustratsioonid võivad teie dokumendi teksti teha enam sisukaks. Kujutage endale ette mingisugust tehnilist vahendit kirjeldavat kasutusjuhendit. Kui see koosneks ainult tekstist, siis tunduks ta teile igavana ja paiguti ka mõistmatuna. Kui aga teda sisustada vajalikesse kohtadesse paigutatud illustratsioonidega, siis muutub dokument loetavamaks ja visuaalselt meeldivamaks.

Pildid aitavad paremini edasi anda dokumendi põhiideed ja sisu. Kas te saaksite endale ette kujutada raamatut, milles polekski pilte? Vaevalt te seda ostaksite ja raamatu kirjastajal poleks teile esitada mingeid pretensioone. Tuletage meelde ütlust - "Parem üks kord näha kui sada korda kuulda." (antud juhul lugeda).

Ent kõiges on vajalik siiski mingil määral tunda mõõtu. See reegel saab kinnituse iga kord kui te satute servates internetis leheküljele, mille autor on selle ülekoormanud mitmesuguste eredavärviliste foonimustritega, mõttetute piltidega ja tarbetult paljude vilkuvate ja hüppavate animatsioonidega (mõnel on isegi korduvad helid).

Planeerides paigutada oma leheküljele pilte veenduge selles, et see on tõepoolest vajalik. Kui trükimeedia lugemisel ei ole mingi vaev keerata lehekülge, siis tuleb interneti lehekülgedel tihtipeale oodata kuni leht laaditakse täielikult teie arvutisse ja alles seejärel saab edasi servida.

Graafikaga ülekoormatus on sama, mis ka graafika täielik puudumine.

Asja teeb veelgi raskemaks igasugune reklaam internetis, mis ilmub paljudele interneti saitidele värviliste plakatitena (reklaami bannerid), mis reeglina asuvad enne dokumentide sisulist osa. Reeglina reageerib keskmine internetis servija reklaamile umbes samuti nagu reageerite sellele teie kui teie lemmiksaate, jalgpalli otseülekande või lemmikfilmi katkestab reklaam.

Üldised alused.

Vaatleme ette üldised küsimused, mis tekivad graafiliste kujutiste interneti lehekülgedel kasutamise esimesel etapil. Võttes vastu otsuse selle või teise illustratsiooni kasutamise otstarbekust oma interneti leheküljel tuleb silmas pidada järgmist.

1. Graafilistel failidel võivad olla küllalti suured mõõtmed, mis nõuab aega nende allalaadimiseks. Graafikaga ülekoormatus võib põhjustada suured lubamatud ajakulud vajalike dokumentide saamisel, eriti kui see toimub veel arhailise modemiga ühenduse teel madalatel ühenduskiirustel. Teiselt poolt võib paljude kasutajate samaaegne töö teie serveris asuva graafikaga ülekoormatud dokumendiga esile kutsuda serveri ülekoormatuse.
2. Paljud kasutajad töötavad internetis graafika allalaadimiskeelu seadega, (lehitsejas saab graafika allalaadimise ära keelata) selleks et kiirendada internetist allalaadimise kiirust. Üsna suur osa kasutajatest kasutab siiamaani ainult tekstipõhiset lehitsejat. Mõlemal juhul jääb allalaaditavast dokumendist alles vaid tekstiosa, mis peab andma edasi informatsiooni dokumendi sisulise osa kohta.
3. Otsimissüsteemid ei indekseeri graafikat. Seepärast kui teie leheküljel asuvad vaid illustratsioonid ilma tekstiliste selgitustega, siis lugejad kasutades tänapäevaseid otsimissüsteeme selliseid lehekülgi ei leia.
4. Tuleb meeles pidada, et kasutajad võivad oma arvutis töötada erinevate kuvari resolutsioonidega ja erineva värvisügavusastmega. Leheküljed, mis näevad ideaalselt välja ühe resolutsiooni puhul (1024*768), siis võib juhtuda, et teisel resolutsioonil (800*600) muutub see lehekülg kui mitte täiesti loetamatuks, siis vähemalt raskesti loetavaks. Tänapäeval kirjutavad juba paljud interneti lehekülgede loomise meistrid oma lehekülgedele lihtsa hoiatuse, et nende lehekülg on parim sellel või teisel resolutsioonil.
5. Samas tuleb meeles pidada asjaolu, et paljud illustratsioonid, pildid jne on kaitstud autoriõigusi kaitsva seadusega. Nende avaldamine ilma autori loata võib endaga kaasata "ebameeldivusi".

Üldiselt võib graafilisi kujutisi kasutada interneti lehekülgedel kahel põhilisel moodusel - taustakujutisena, millel asuvad kõik teised dokumendi põhielemendid ja - illustratsioonidena, mis asuvad dokumendis endas.

Kujutiste salvestamise moodused

Vaadates kujutist kuvaril näete te tegelikult vaid suurt hulka värvilisi punkte (pikseleid), mis koos moodustavad mingi pildi. Siit järeldub, et graafiline fail peab endas sisaldama informatsiooni selle kohta kus peavad need punktil kuval asuma. On olemas palju meetodeid graafilise informatsiooni kirjeldamiseks, vastavalt on olemas ka palju graafiliste failide salvestamise formaate - umbes paarkümmend.

Kõik graafilise informatsiooni salvestamise formaadid võib aga jagada kahte suurde rühma - vektorgraafika ja rastergraafika.

Vektorgraafikafailid sisaldavad matemaatilisi andmeid selle kohta, kuidas üle joonistada kujutist sirgete (vektorite) abil selle kuvamisel. Kuvamise protsess nõuab seega lisaaega. Kuid samas on sellisel graafika esitamise moodusel tähtis eelis - kujutise mastaapi võib muuta ilma kvaliteedikadudeta kuna ei ole olemas fikseeritud seost kujutise esitamise kuval punktidena ja selle salvestamise formaadiga failis. Rastergraafika mõõtmete muutmisel reeglina kutsub esile lahutusvõime kaod, mis omakorda kutsub esile kujutise kvaliteedi olulise languse.

Vektorgraafikat kasutatakse reeglina selgete geomeetriliste piirjoontega kujutiste jaoks. Selle näitena võib tuua automaatprojekteerimissüsteemid (CAD). Vektorgraafikat kasutatakse ka mõnede šriftitüüpide salvestamiseks.

Rastergraafika - eeldab kujutise iga punkti kohta käiva informatsiooni salvestamist. Rastergraafika kuvamiseks ei ole vaja keerulisi matemaatilisi valemeid, piisab sellest kui saadakse andmed iga punkti kohta selle kujutamiseks kuvari ekraanil.

Interneti lehekülgedel on valdavas enamuses kasutusel rastergraafika kahes põhiformaadis: GIF ja JPG. Just neid kahte formaati toetab tänapäeval valdav enamus lehitsejatest samas kui paljude teiste formaatide kasutamiseks on tihitipeale vajalikud ka spetsiaalsed vahendid.

Formaat BMP on Microsoft Windowsi standard ja seda toetab lehitseja Internet Explorer, kuid selle kasutamine ei ole soovitatav kuna see formaat ei toeta andmete pakkimist.

Üsna hiljuti loodud formaat PNG oli loodud selleks, et asendada rasterformaati GIF, kuid vaatamata tema ilmsetele eelistele ei ole ta saanud tänapäeval veel levinuks.

Teisi graafilisi formaate (peale GIF ja JPG) www serverites praktiliselt ei esine, kuigi nende kasutamine on võimalik. Nende formaatide kasutamist ei soovitata järgmistel põhjustel:

1. Ainult formaatidele GIF ja JPG on olemas enamuse lehitsejate sisseprogrammeeritud tugi. (teiste formaatide kuvamiseks tuleb kasutaja arvutil käivitada lisatarkvara)
2. GIF ja JPG formaatide struktuur on failide edastamiseks internetis väga hästi sobiv ja on sõltumatu platvormist (Windows, Unix, Linux, Mac jne.).

Foonimuster.

Interneti lehekülje loojad võivad määratleda oma dokumentide tausta värvi kuid samas võivad nad kasutada tausta kujundamisel ka graafilisi kujutisi.

Ülesanne 1. Avame kaustast dokumendi ja salvestame selle uue nimega.

1. Avage oma töölaual olev kaust "HTML40"
2. Käivitage Notepad (Start-Programs-Accessories-Notepad) või intelligentsem tee Notepad käivitamiseks (Start - Run…; kirjutame lahtrisse notepad ja klõpsame korraldusnupul OK).
3. Avage Notepad abiga kaustast "HTML40" dokument "uus.htm".
4. Salvestage dokument samasse kausta uue nimega "graafika-1.htm".
5. Avage uus dokument "graafika-1.htm" ka lehitseja abil.

Taustamustrite idee on teile (Windows operatsioonisüsteemi kasutajatele) juba hästi tuttav. Windowsis on selleks ette nähtud töölaua parameetrite seadete dialoogiaken Display Properties. Selles süsteemis saab töölaua kuvamise parameetrina kasutada nii ühetooniline värvi, foonimustreid kui ka taustapilte.

Paljuski analoogiline sellega on taustamustrite parameetrite seadmine ka HTML dokumendi jaoks. Foonivärvi määramise jaoks kasutatakse teegi <BODY> parameetrit BGCOLOR.

Ülesanne 2. Muudame dokumendi foonivärvi ja lisame pealkirja.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
2. Pöörake tähelepanu sellele, et teegis <BODY> on juba parameetril BGCOLOR olemas väärtus, see on valge värvi kood formaadis #RRGGBB.
3. Asendage see väärtus näiteks inglisekeelse nimetusega: yellow. (kui Teile ei meeldi kollane, siis sisestage mingi muu värvi inglisekeelne nimetus)
4. Trükkige nüüd HTML dokumendi sisulisse ossa pealkirjaks: Graafika. Ja vormindage see esimese taseme pealkirjade teegi abil.
5. Joondage nüüd pealkiri ka keskele (kasutage vastavat konteiner teeki CENTER).
6. Salvestage muudatus Notepadis (File - Save) ja värskendage lehitseja kuva (nupp tööriistaribal - Refresh).

Kuid samas võib teeki <BODY> kasutada ka taustapildi lisamiseks HTML dokumendile. Nagu oli juba mainitud eelpool peab taustapildi formaat olema kas JPG või GIF. Taustamuster HTML dokumendis täidab alati kogu tausta [erinevalt Windowsi töölauast, kus saab määrata nii, et taustapilt kuvatakse näiteks töölaua keskel või venitatakse (surutakse kokku) töölauale nii, et kogu pilt täidab kogu töölaua]. Kui taustapildi mõõtmed on väiksemad kui kuva mõõtmed, siis "paljundatakse" taustapilt kuval nii, et tekib nn. "tapeet" või "mosaiik". Seepärast peab väikese taustapildi valima selliselt, et nende kuvamisel ei oleks silmaga nähtavaid "liitekohti". See ülesanne on analoogiline toa tapeetimisel mustertapeediga, kus peab tapeedi lõikama nii, et muster oleks ühtlane.

Harilikult kasutatakse foonimustrina väikeseid pildikesi, mille allalaadimine ei võta kaua aega. Internetis on olemas spetsiaalsed leheküljed kus on olemas tohutu hulk taustakujutisi vabaks kasutamiseks.

Ülesanne 3. Taustapildi otsimine ja salvestamine. Klõpsake sellel viitel.

Teiseks üsna levinuks tausta vormindamise mooduseks on foonimuster kahvatu reljeefse logotüübi kujul. Selline graafika identifitseerib lehekülge selgesti ja ei sega selle sisuga tutvumisel.

Ülesanne 4. Kasutame taustamustrit.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
2. Lisage teegile <BODY> parameeter BACKGROUND.
3. Sisestage parameetri väärtuseks allalaaditud ja kausta "HTML40" salvestatud kujutise täpne nimi koos laiendiga nii:
   
   BACKGROUND=XXX.YYY. (kus XXX.YYY on faili täpne nimi)
   
   (selge, et Windowsi seadetes peab olema sisse lülitatud failide laiendite kuvamisreţiim)
   
   
4. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Märkus: parameetrite BACKGROUND ja BGCOLOR samaaegne kasutamine teegis <BODY> ei ole kohustuslik. Suvaline nendest parameetritest või isegi mõlemad parameetrid võivad teegis <BODY> ka puududa.

Esmapilgul võib tunduda, et foonivärvi määramine on liigne kui on kasutusel foonimuster. Tegelikult on kõik aga vastupidi. Kui määratakse foonimuster tuleb alati kasutada ka foonivärvi. Probleemi sisu seisneb selles, et dokumendi kuvamisel laaditakse internetist eelkõige dokumendi sisuline tekstiline osa ja alles järgmise sammuna laaditakse kuvale ka pildid ja taustamuster. Täieliku allalaadimise momendini ja taustamustri kuvamiseni näidatakse kuval dokumendi foonina parameetriga BGCOLOR määratud taustavärvi või siis kuvatakse lehitseja poolt vaikimisi määratud taustavärvi. Kogemus töötamisel internetist allalaadivate HTML dokumentidega on näidanud, et taustamustri allalaadimiseks kulub mõnigi kord küllaltki palju aega, mille jooksul saab lugeja juba tutvuma hakata dokumendi sisuga. Ja kui siis mingil ootamatul ajamomendil ilmub viimaks taustamuster muutub järsult kogu dokumendi värvigamma. Seega tuleb taustavärv valida nii, et ei toimuks sellist järsku häirivat gammamuutust. Foonivärv ja taustamuster peavad olema võimalikult lähedal oma värvigamma poolest.

Teiseks põhjuseks miks on alati soovitatav kasutada foonivärvi on, see et kasutaja võib graafika allalaadimise üldse välja lülitada, siis sellisel juhul ei laadita taustamustrit ka kuvale ja dokumendi fooniks jääbki parameetriga BGCOLOR määratud värv.

Kujutiste lisamine HTML dokumentidele.

Teek <IMG>.

Selleks, et sisestada illustratsioone HTML dokumenti kasutame teeki <IMG>, millel on üksainus kohustuslik parameeter SRC, mis määratleb sisestava kujutise URL aadressi.

Ülesanne 5. Piltide otsimine ja salvestamine. Klõpsake sellel viitel.

Ülesanne 6. Lisame oma HTML dokumendile 3. pilti.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
2. Sisestage oma HTML dokumendi sisulisse ossa teek <IMG>, nii:
   
   <IMG SRC=XXX.YYY>
   <IMG SRC=XXX.YYY>
   <IMG SRC=XXX.YYY> (kus XXX.YYY on failide täpsed nimed)
   
   
3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
   
   Nüüd on meie HTML dokumendis kolm üksteise all asuvat pilti.

Antud teegil on rida parameetreid, mida vaatleme järgnevalt ka lähemalt.

Kujutiste joondamine.

Graafilise kujutise lisamisel dokumenti võib määratleda selle paigutuse teksti või lehekülje teiste elementide suhtes. Kujutise joondamise moodus antakse teegi <IMG> parameetriga ALIGN.

Selgitame siinkohas natuke tabelis esitatud joondamise parameetrite olemust. Tuleb kohe märkida, et joondamise parameetrid jagunevad kahte rühma oma töö mehhanismi poolest. Esimesse rühma kuuluvad parameetri kaks väärtust left ja right - nende parameetrite kasutamisel saavutame kuvale nn ujuva pildi, igal juhul surutakse pilt vastava kuva ääre külge ja tekst "voolab" selle pildi teist külge pidi seda piirates. Tekst võib olla siis ka mitmerealine. Teise rühma kuuluvad siis kõik teised väärtused - nende kasutamisel kujutis justkui lisatakse teksti. Siin on kujutis tekstiosaks - seda on kerge mõista kui kujutada endale ette kujutist kui sümbolit, tähte, õigust küll see on siis ka väga suur täht.

Ülesanne 7. Lisame piltidele selgitava teksti.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
2. Lisage iga pildi järele uuelt realt kommentaar selle pildi kohta. Vormindage need kommentaarid kaldkirja teegiga ja joondage ploki teegiga.
3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
   
   Kuna pildi teegis <IMG> peale parameetri SRC ei ole teisi parameetreid, siis on lisamata parameetri ALIGN väärtuseks vaikimisi baseline. Teksti ja pildi alumine äärejoon on kohakuti.

Ülesanne 8. Parameetri ALIGN väärtuste selgitus.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
2. Lisame nüüd teekidele ka parameetrid ALIGN ja nende esimesed väärtused top nii:
   
   <IMG SRC=XXX.YYY ALIGN="top">
   
   
3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
   
   Kujutise ülemine äärejoon joondatakse jooksva rea kõige kõrgema elemendi järgi.
   
   
4. Muudame nüüd parameetri ALIGN väärtust, uueks väärtuseks sisestame: texttop.
5. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
   
   Tegelikult ei muutu kuvas suurt midagi? Sellepärast, et jooksev rida koosnebki enamalt tekstist. ;=)
   
   
6. Muudame nüüd parameetri ALIGN väärtust, uueks väärtuseks sisestame: middle.
7. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
   
   Kujutise keskosa joondatakse jooksva rea horisontaalse keskjoone järgi.
   
   
8. Muudame nüüd parameetri ALIGN väärtust, uueks väärtuseks sisestame: absmiddle.
9. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
   
   Kujutise keskosa joondatakse jooksva rea keskele.
   
   
10. Muudame nüüd parameetri ALIGN väärtust, uueks väärtuseks sisestame: bottom.
11. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
    
    Kujutise alumine äärejoon joondatakse jooksva rea horisontaalse keskjoone järgi.
    
    
12. Muudame nüüd parameetri ALIGN väärtust, uueks väärtuseks sisestame: absbottom.
13. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
    
    Kujutise alumine äärejoon joondatakse jooksva rea alumise äärejoone järgi. Kui tekst on küllalti väike, siis pole kahe viimase väärtuse puhul erinevus "palja" silmaga nähtavgi. ;=)
    
    
14. Kuid, muudame siis teksti suuremaks, lisame dokumendi algusesse teegi, mis muudab kogu temale järgneva teksti suurust. See teek oli BASEFONT. Sisestame dokumendi sisulise osa algusesse teegi: <BASEFONT SIZE=6>
15. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
    
    No nii, nüüd on tekst piisavalt suur, et näha seda et kujutise alumine äärejoon joondatakse jooksva rea alumise äärejoone järgi.
    
    
16. Muudame nüüd parameetri ALIGN väärtust, uueks väärtuseks sisestame uuesti: bottom.
17. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
    
    Nüüd oli muutus silmnähtav!
    
    
18. Muudame nüüd parameetri ALIGN väärtust, uueks väärtuseks sisestame: left.
19. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
    
    Kujutis hoiab end kuva vasaku serva äärde, tekst piirab kujutist paremalt poolt ja samas tekst justkui voolab ümber pildi.
    
    
20. Muudame nüüd parameetri ALIGN väärtust, uueks väärtuseks sisestame: right.
21. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
    
    Kujutis hoiab end kuva parema serva äärde, tekst piirab kujutist vasakult poolt ja samas tekst justkui voolab ümber pildi.

Kui dokumendis kasutatakse ujuvaid kujutisi, mis on joondatud väärtustega left ja right, siis on olemas võimalus selle teksti voolamine ümber pildi ka ära keelata. See kindlustatakse sundreavahetusteegi <BR> kasutamisega, millele lisatakse parameeter CLEAR. Selle parameetri väärtusteks võivad olla: left, right ja all.

Ülesanne 9. Lisame teegile <BR> parameetri.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
2. Lisage teegile <BR> teise tekstirea lõpus parameeter CLEAR väärtusega left: nii <BR CLEAR=left>
3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Kuvatava kujutise suuruse juhtimine.

Kujutise teegil on kaks mittekohustuslikku parameetrit, mis osutavad kuvatava kujutise mõõtmetele - WIDTH ja HEIGHT, kusjuures nende parameetrite väärtuse võib anda nii pikselites kui ka protsentides kuva kõrgusest.

Laiuse ja pikkuse parameetrid võivad mitte kokku langeda kujutise reaalsete mõõtmetega. Sellel juhul teostab lehitseja automaatselt kujutise allalaadimisel sellele ka mõõtmete - mastaabi muutmise. Tuleb märkida, et lohakas parameetrite määratlemine võib esile kutsuda esile kujutise proportsioonide muutumise ja seega ka kujutise moonutamise.

Suvaline nendest parameetritest võib olla ka välja jäetud. Kui on antud ainult üks parameeter, siis arvutatakse teine parameeter kujutise kuvamisel automaatselt kujutise proportsioonide säilimise tingimusel. Kujutiste mõõtmete muutmine parameetrite abil võib olla mõeldav illustratsioonide vaatamiseks vähendatud kujul, kuid selline lähenemine ei vähenda mingil määral nende piltide allalaadimiseks kuluvat aega.

Kui ei ole vaja lahendada kujutise mõõtmete muutmise ülesannet soovitan siiski tungivalt kasutada parameetreid WIDTH ja HEIGHT, sisestades teeki <IMG> kujutise reaalsed laiuse ja kõrguse.

Reaalse laiuse ja kõrguse sisestamine võimaldab:

1. Lõppkasutajal, kes töötab graafika keelurežiimis saada ettekujutust allalaaditavate piltide reaalsetest mõõtmetest tühja ristküliku järgi, mis kuvatakse siis illustratsiooni asemel.
2. Kiirendada dokumendi vormindamist kuval. Reeglina peavad lehitsejad alla laadima kõik kujutised enne kui nad saavad kujundada teksti paigutust ekraanil. Kujutiste mõõtmete ette andmine võimaldab lehitsejal kujundada dokument juba enne graafikafailide täielikku allalaadimist.

Märkus: kui mõõtmed ei ole ette antud siis kuvatakse sellise kujutise asemel algul väike ruuduke ja seega rikutakse kogu dokumendi kujundus, milles on arvestatud piltide reaalsete mõõtmetega.

Ülesanne 10. Muudame illustratsioonide mõõtmeid.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
2. Sisestage esimese pildi teeki <IMG> parameeter HEIGHT nii:
   
   HEIGHT=100
   
   
3. Sisestage teise pildi teeki <IMG> parameeter WIDTH nii:
   
   WIDTH=200
   
   
4. Enne kui määrame kolmanda pildi mõõtmed, saame teada selle pildi tegelikud mõõtmed nii: avage lehitseja kuva, klõpsake pildil hiire parempoolset klahvi, valige ilmunud kontekstmenüüst korraldus Properties - avanevas dialoogiaknas ongi näha selle pildi tegelikud mõõtmed - Dimensions XXX x YYY pixels, kus XXX on laius ja YYY kõrgus pikselites.
   
   
5. Sisestage kolmanda pildi teeki <IMG> parameetrid WIDTH ja HEIGHT nii:
   
   WIDTH=XXX HEIGHT=YYY (teie pildi laius XXX ja kõrgus YYY)
   
   
6. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
   
   Esimene ja teine pilt muutusid oma proportsioone säilitades kas suuremaks või väiksemaks kolmas pilt aga ei muutunudki.

Kujutise eraldamine tekstist.

Teegile <IMG> võib anda parameetrid HSPACE ja VSPACE, mille väärtused määratlevad selle kui suur on piltide ja ülejäänud HTML dokumentide (või piltide omavaheline) vaheline kaugus, vastavalt horisontaal- ja vertikaalsuunas. See kindlustab, et teksti ja kujutise vahele jääb normaalseks tajumiseks vajalikku vaba ruumi.

Ülesanne 11. Muudame tühja vahemaa laiust kujutiste ümber.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
2. Sisestage teekidesse <IMG> parameetrid HSPACE ja VSPACE, mille väärtusteks sisestage arv 20: HSPACE=20 VSPACE=20.
3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Raam kujutise ümber.

Kuvatava kujutise võib ümbritseda mitmesuguse erineva laiusega raamiga. Selleks on teegis <IMG> olemas parameeter BORDER. Parameetri väärtustena kasutatakse arvu, mis määrab raami paksuse pikselites. Vaikimisi ei kuvata kujutiste ümber raami. Erandiks sellest reeglist on pilt-viited.

Ülesanne 12. Raamime oma kujutised.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
2. Sisestage teekidesse <IMG> parameeter BORDER vastavalt väärtustega: 1, 5 ja 10.
3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Märkus: kui mõni pilt on viiteks ümbritseb lehitseja Internet Explorer selle sinise raamiga. Raami ilmumist võib ka vältida andes raami paksuse väärtuseks nulli: BORDER=0.

Alternatiivne tekst.

Üheks teegi <IMG> parameetriks on parameeter ALT, mis võimaldab sisestada alternatiivset teksti. Alternatiivne tekst annab võimaluse mittegraafiliste lehitsejate ja lehitsejate, kus on väljalülitatud graafika allalaadimine, kasutajatel saada HTML leheküljele sisestatud piltide kohta tekstiinformatsiooni.

Piltide allalaadimise keelu korral kuvatakse piltide asemel parameetris ALT olev asendustekst. Selle parameetri lisamisel on mõtet ka siis kui toimub piltide alla laadimine. Kuna pildid laaditakse alla teises järjekorras (esimesena laaditakse alla tekstiinfo), siis ilmub kuvale teksti asemel kohe selgitav tekst ja siis piltide allalaadimise protsessis asendatakse asendustekstid omakorda piltidega.

Ülesanne 13. Lisame piltidele asendusteksti.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
2. Lisage teekidele <IMG> parameetrid ALT nii: ALT="ZZZ" (kus ZZZ on teie sisestatud asendustekst).
3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Tänapäeva lehitsejad kasutavad parameetri ALT sisu ka spikri näitamiseks kui kasutaja osutab hiirega kujutisele.

Kujutise kasutamine viitena.

Graafilised kujutised võivad olla mitte ainult illustratsioonideks vaid ka hüperteksti viide osutiteks. Selleks, et kindlustada kujutise töö viitena teistele interneti ressurssidele piisab sellest kui sulgeda kujutise teek <IMG> viite konteiner teegi <A> </A> sisse.

Ülesanne 14. Muudame nüüd kõik kolm pilti ka viideteks.

1. Avage või aktiveerige Notepad dokumendiga "gfraafika-1.htm".
   
   Neil kes on tublilt teinud kaasa kõik eelnevad tunnid on töölaual kaustas olemas järgmised HTML dokumendid: "uus.htm", "loendid.htm", "loogilinevormindamine.htm", "fyysilinevormindamine.htm" ja "pealkirjadekasutamine.htm" ja muidugi ka "gfraafika-1.htm". Neil, kes on juba alustanud ka oma isikliku interneti lehekülje loomist on HTML dokumente loomulikult rohkem. ;=)
   
   
2. Sulgeme nüüd oma kujutiste teegid <IMG> konteiner teegi <A> </A> sisse. Viitamisel kasutame suhtelist URL aadressit kuna kõik HTML dokumendid asuvad kõik ühes kaustas.
   
   <A HREF="My_doc.htm"><IMG koos kõigi parameetritega ja nende väärtustega></A> (kus My_doc.htm on teie kaustas "HTML40" oleva suvalise HTML dokumendi täielik nimi koos laiendiga htm)
   
   
3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
   
   Proovige ka linkide tööd. Tagasi esialgsele lehele saate lehitseja tööriistaribal asuva nupu Back abil.
   
   
4. Juhul kui teile ei meeldi raam pilt viite ümber, siis muutke parameetri BORDER väärtuseks 0.
5. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Sellise pildi kogu pind muutub viite osutiks. On olemas võimalus anda ette kujutise, mille üksikud fragmendid osutaksid erinevatele interneti ressurssidele, so nn kaart-kujutised (map). Kuid seda võimalust õpime selle kursuse raames hiljem.