HTML/Pildid

Pildiküllane lehekülg on sageli ilus ja informatiivne. Oskamatu graafikakasutus seevastu võib tulemuseks anda tõelise "Kört-Pärtli särgi", mis näeb kole välja ja kust midagi üles leida ülimalt keeruline. Järgnevalt mõned näpunäited veebigraafikast.

Pane pilt ja pea aru

Veebilehte ei kujuta paljud tänapäeval enam ilma graafikata ettegi. Loomulikult annab oskuslikult valitud ja paigutatud pildimaterjal lehele palju juurde, samas aga meenutagem kaht asja. Esiteks - esimesed veebilehed olid hoopis ilma graafikata ning sisaldasid ainult teksti ja viiteid, ka praegu koostatakse nii mõnedki leheküljed samadel alustel. Teiseks - on palju kasutajaid, kes kas siis tehnilistel (nõrgem arvuti, tekstikuvar, aeglane modemiühendus, tekstibrauser jne) või isiklikel (nägemispuue) põhjustel ei saa graafiliselt esitatud infot kasutada. Seda arvestades tuleks graafika lisamisel järgida põhimõtet "nii palju kui vajalik, nii vähe kui võimalik". Macromedia Flashil põhinevate veebilehtede lai levik on kogu probleemile andnud veel hoopiski uue mõõtme - täiesti Flashi-põhise lehe jaoks tuleb harilikult luua eraldi HTMLis alternatiivversioon.

Tervenisti graafiliste lehekülgede lugejaid kummitavad järgmised probleemid, millest tihtipeale autoril aimu pole:

tekstibrauseri (näiteks Lynx) kasutajad jäävad pahatihti üldse "ukse taha".

lehekülje laadimine lugeja arvutisse võib olla nii aeglane, et too vihaga ühenduse katkestab ja mujale paremat materjali otsima läheb.

Brauserist sõltuvad leheküljed ("Best viewed with") vihastavad paljusid potentsiaalseid lugejaid, kellel mingil põhjusel vastavat brauserit pole (suurim patune on selles kahtlemata MS Internet Explorer).
Suurte piltide paigutamine oma WWW-süsteemi avaleheküljele (ja eriti selle algusesse) tekitab paljudel aeglasema ühendusega lugejatel soovi vajutada "Stop"-nuppu ja minna kuhugi mujale.
Üldkasutatava ja pikemat lugemist eeldava lehekülje (otsimissüsteem, tähtis infoleht) uputamine karjuva graafikaga on kuritegu lugejate nägemiselundite vastu.

Kui mingil põhjusel on ikkagi tarvis luua sedasorti lehekülg, peaks tegija mõtlema ka alternatiivlehekülje loomisele. See sisaldagu kas ainult teksti (s.h. põhilehekülje tähtsamate piltide sõnalisi kirjeldusi) või minimaalselt graafikat.

Lihtgraafika

Tavalise pildi paigutamine veebilehele toimub kõige lihtsamal kujul selliselt (jällegi XHTMLi lühikujul):

<img src="pildifaili nimi" />

Siiski on siin hulk parameetreid praktiliselt kohustuslikud. Kõige rohkem räägitud on neist ilmselt alt - pilti lühidalt kirjeldav alternatiivtekst, mida näeme tekstibrauseris (sisutu teksti [IMAGE] asemel) või ka graafilises veebilehitsejas, kui viime hiirekursori pildile.

<img src="foto.jpg" alt="Foto - mina, vanaema ja meie  kass." />

On ka juhuseid, kus kirjeldamisel ei ole mõtet - näiteks lõigu algust märkivate graafiliste sümbolite (pallikesed, tärnid jms) puhul. "Siin on sinine muna"-sarnane kirjeldus ei ole eriti informeeriv. Sellisel juhul tuleks alt-parameeter ikkagi lisada, vältimaks "[IMAGE]"-märget, kuid jätta kas tühjaks (alt="") või panna kirjelduseks näiteks tärn vms.

Teiseks abistavaks parameetriks alt-i kõrval on longdesc - viide tekstifailile, kus asub pikem tekstiline kirjeldus pildi kohta. Rangelt võttes on see hädavajalik vaid ülisuurt infomahtu kandvate piltide juures, kuid puuetega kasutajate ligipääsunõuded (millel on suur võimalus muutuda lähiajal kohustuslikuks standardiks!) sätestavad ka selle parameetri praktiliselt kohustuslikuna. Niisiis:

<img src="foto.jpg" alt="Foto - mina, vanaema ja meie  kass." 
longdesc="fotokirjeldus.txt" />

Veel on mõistlik uurida välja meie kasutatav pildi mõõtmed pikselites ehk ekraanipunktides (seda saab teha nii veebilehitseja kui enamiku graafikaprogrammide abil) ja anda pildimärgendile parameetriteks ka pildi kõrgus ja laius - sellega vähendame kasutaja brauseri töökoormust ja tulemuseks on pildi kiirem laadimine. Niisiis:

<img src="foto.jpg" alt="Foto - mina, vanaema ja meie  kass." 
longdesc="fotokirjeldus.txt" width="200" height="140" />

Graafikaformaatidest ja pildifailidest

Veebis saab selle kirjatüki kirjutamise ajal kasutada kolme liiki graafikafaile - GIF-, JPEG- ja PNG-tüüpi (tegelikult on ka neljas - Microsofti BMP, mis aga on oma suure mahu tõttu veebi sobimatu). Jämedalt eristatuna on esimene teisest veidi parema kvaliteediga ja võimaldab oma uuemas, 89. aasta modifikatsioonis salvestada ka animatsiooni (vt. täpsemalt allpool), teine aga pastelsema väljanägemise ning väiksema mahuga. PNG on GIF-i sarnane puhaste värvitoonidega formaat, mis aga lubab suuremat värvitoonide arvu. PNG puhul on väikeseks miinuseks vähesem levik kahe esimesega võrreldes - ehkki tänased veebilehitsejad saavad üldiselt kõik ka selle formaadiga hakkama. Seepärast on - jällegi laias laastus - võimalik soovitada GIF-i joonistatud graafika ja väikeste fotode jaoks, JPEG-d aga suurte piltide ja fotode tarvis. Veebipoolseid ettekirjutusi kummagi formaadi kasutamiseks aga ei ole. Ilmselt vahetab millalgi tulevikus PNG GIF-i välja - seda enam, et GIF-i puhul on juba aastaid õhus kohtuvaidlus õiguste üle sellele failiformaadile.

Kõik mainitud formaadid võimaldavad kasutada lisaefekte, millest tuntumad on läbipaistev taust (transparency) ja kihtesitus (interlaced GIF, progressive JPEG - pilt laetakse kihtidena, algne udune kujutis teravustub kiht-kihilt; võimaldab saada pildi sisust aimu varakult ja soovi korral suure pildi laadimine katkestada). GIF 89 -standard laseb luua ka animatsioone - ühte GIF-faili salvestatakse multifilmina rida erinevaid kaadreid ning GIF-i laadimine käivitab animatsiooni.

Lehekülge looma hakates on ilmselt tarvis koguda endale vajaminev graafikamaterjal ning see siis oma veebikataloogi kopeerida. Kui tegu pole just paari-kolme pildiga, oleks otstarbekas luua veebikataloogi alla omaette alamkataloog graafika jaoks - suurtes, sadu pilte sisaldavates süsteemides võiks veel ka graafika ära sorteerida - fotod ühte, taustad teise, joonised kolmandasse, muu pudi-padi neljandasse "kasti". Sellisel juhul tuleb muidugi lisada katalooginimed ka graafikamärgendisse (lühiduse mõttes oleme jätnud suurema osa parameetritest siin kirjutamata, kuid see ei tähenda, et neid ei tuleks lisada!):

<img src="graafika/fotod/mari.jpg" alt= "Mari pilt" />

Nagu viidete puhul, saab ka graafika korral kasutada nii lähi- kui kaugviiteid. Näiteks kui Mari kirjutab oma kodulehele eespooltoodud graafikamärgendi (eeldades, et ta on loonud public_html alla alamkataloogid graafika ja fotod), siis Jüri, kes sooviks panna Mari pilti ka enda lehele, peab sinna lisama sellise rea:

<img src="/users/mari/graafika/fotod/mari.jpg"  alt="Minu pruudi pilt" />

Kui aga Mari pilti tahab oma lehele panna näiteks teises linnas õppiv vend Volli, peab ta kas 1) kopeerima pildifaili mari.jpg oma arvutisse ja kasutama tavalist pildimärgendit, või 2) kasutama kaugviidet Mari pildile. Teise variandi korral näeks Volli lehe graafikamärgend välja selline:

<img src="http://www.ttu.ee/users/mari/fotod/mari.jpg" alt= "Minu õe pilt" />

Tõsi, kaugviiteid tasub kasutada vaid juhul, kui viidatav arvuti ei asu väga kaugel (vastasel juhul võib pildi lugemine võtta mõttetult palju aega) või pildi omanik ei luba mingil põhjusel seda teistel endale kopeerida.

Graafilised viited

Graafikat saab kasutada ka viidete tegemiseks kas siis viite teksti asemel või koos sellega. Selleks tuleb lihtsalt kombineerida graafika- ja viitemärgendid. Näiteks juba meil vaadeldud viide Jüri leheküljelt Mari lehele:

<a href="/users/mari/" title="Mari koduleht">Mari lehekülg</a>

Mari pildile viitamine aga käis nii (jällegi jättes osa parameetreid kirjutamata):

<img src="/users/mari/fotod/mari.jpg" alt="Mari pilt" />

Nüüd paneme need kaks kokku:

<a href="/users/mari/" title="Mari koduleht"><img 
src="/users/mari/fotod/ mari.jpg" alt="Mari pilt"
 />Mari kodulehekülg</a>

Tulemuseks on viide tekstiga "Mari kodulehekülg", mille ees on samuti viitena toimiv Mari foto.

Veel ühe märkusena võib lisada võimaluse eemaldada pildi ümbert sinna vaikimisi pandav viidet tähistav raamjoon - selleks tuleb stiilifaili lisada järgnev deklaratsioon:

a img { border: none }

Aga võib luua ka sellise stiili, et alles hiirega pildi peale minnes ilmub joon nähtavale (külastamata linkidele sinine, külastatud linkidele violetne):

a img { border: solid white }
a:hover img { border: solid blue }
a:visited:hover img { border: solid purple }

Mida teha suurte piltidega?

Kui ennist sai mainitud, et suurte piltide panemine pealeheküljele on halb mõte, siis tuleks nüüd vaadata, mida suurte piltidega teha tuleks. Lihtne variant on teha lehele vastavasse kohta lihtsalt viide:

<a href="pildifaili nimi" title="Minu sünnipäevapilt">Siin on suur 
pilt minu sünnipäevapeost (555 kB)</a>

Nagu näeme, on pildi kirjeldusele lisatud ka pildi suurus - enamik kasutajaid oskab siis hinnata, kas pilt pakub huvi ja kas on aega selle lugemist ära oodata.

Selle variandi miinuseks on asjaolu, et kasutaja, kes valib viite ja vaatab pilti, peab kasutama tagasiminemiseks brauseri tagurdusmehhanismi (mida mõnel vanal brauseril ei ole). Veidi soliidsem variant oleks teha eraldi lehekülg, mis sisaldab ainult pilti ja viidet tagasi alglehele. Seega on esilehel viide:

<a href="fotoleht.html" title="Minu sünnipäevapilt">Siin on suur 
pilt minu sünnipäevapeost (555 kB)</a>

ja pildilehel fotoleht.html pildi all viide tagasi (oletagem, et algleht on index.html):

<a href="index.html" title="Tagasi">Tagasi esilehele</a>

Ehk kõige soliidsem variant, mis nõuab küll veidi tööd graafikaga, on teha suurest pildist vähendatud koopia (inglise keeles kasutatakse terminit thumbnail - "pöidlaküüs") ja panna see graafilise viitena esilehele:

<a href="fotoleht.html" title="Minu sünnipäevapilt"><img 
src="v_foto.gif" alt= "pildilink suurele pildile">Suur pilt minu 
sünnipäevapeost (555 kB)</a>

Selline lahendus annab kasutajale aimu suurest pildist nii viite teksti kui ka väikese pildi kaudu.

Paar sõna animatsioonidest ja multimeediast

Veebianimatsiooni lihtsaim vorm on animeeritud GIF-fail - multifilmisarnane kaadrite kogum. Sel juhul ei erine tema märgendid tavalise graafika omadest. Teised animatsiooniliigid ja muu multimeedia eeldavad reeglina veebilehitsejale lisaks paigaldatud vastavat tarkvara (plugin). Sellisena jääb see teema meie õppematerjali käsitletavast osast välja.

Lihtsakoeliste "liikuvate piltide" lisamine leheküljele annab küll mõningase uudsena näiva efekti esmakordsel lugemisel, pideval lehekülje külastamisel aga muutuvad animatsioonid pahatihti häirivaks (ekstreemse näitena on teada juhuseid, kus need kutsusid epilepsiahaigel esile haigushoo). Seega oleks ehk asjakohane soovitus - maksimaalselt üks animatsioon lehekülje kohta.