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.
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 pildimärgendisse lisada parameeter border="0":
<a href="/users/mari/" title="Mari koduleht"> <img src="/users/mari/fotod/ mari.jpg" alt="Mari pilt" border="0" /> Mari kodulehekülg </a>
Border-parameetrile saab anda väärtusi 0-st 7-ni - soovi korral saab raamjoone hoopiski paksuks teha (mida suurem number, seda paksem joon) ja nii pildile omapärase välimuse anda.
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 veebilehitseja tagurdusmehhanismi (mida mõnel vanal lehitsejal 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.
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.
2003-2024 Kaido Kikkas.
Käesoleva dokumendi paljundamine, edasiandmine ja/või muutmine on
sätestatud GNU Vaba Dokumentatsiooni Litsentsiga (versioon 1.2 või
uuem).
Litsentsi ingliskeelne täistekst