HTML ja CSS algajatele (Osa 09): Graafika veebis (01)

Kui salvestate pilte graafikaprogrammis, saate valida erinevate graafikavormingute vahel. Millist neist aga valida, kui soovite pilti veebisaidile lisada?



Kui soovite oma veebisaidil pilti esitleda, on teil valida kolme vormingu vahel.

• GIF

• JPEG

• PNG

Millist vormingut aga valida millise olukorra jaoks? Kas fotode puhul tasub eelistada GIF-i või PNG-d? Alustuseks lühike ülevaade vormingute võimalustest.

See lühike ülevaade näitab juba erinevaid vormingute omadusi. Pole üllatav, et teatud vormingud sobivad teatud olukordadeks paremini kui teised. Just selles punktis jätkab järgnev jaotis. Seal näidatakse, millal kasutada parimat vormingut.

Fotod

Fotode puhul kasutage kindlasti JPEG-vormingut. Siin on võimalik pilte väga hästi kokku suruda, valides kvaliteedi muutuva. Siin leitakse õige tasakaal kvaliteedi ja kokkusurumissuhte vahel.

Ekraanipildid/Diagrammid

Selleks sobib kõige paremini PNG-vorming. PNG on huvitav ka tehniliste jooniste, põhiplaanide jne jaoks. PNG-d saab kasutada ka piltidel, kus töötatakse läbipaistvate aladega.

Fontid/Logod

Kui teie logol on teksti või soovite üldse kirja kuvada, peaksite kasutama GIF-i või PNG-d. Parema jõudluse tõttu eelistatakse tavaliselt PNG-d. JPEG pole kirjade esitamiseks igal juhul sobiv, kuna servad on udused.

Läbipaistvus

Kui on vaja kujutada läbipaistvaid alasid, lükatakse JPEG juba algusest peale välja. Järele jäävad GIF ja PNG. Aga millist neist kahest vormingust kasutada nüüd, kui oluline on läbipaistvus? Teoreetiliselt võib GIF töödelda läbipaistvusega, kuid tulemused on tavaliselt udused. Üks piksel võib GIF-vormingus olla kas täiesti nähtav või täiesti läbipaistev. PNG puhul seda nähtust ei esine. Sellel vormingul on täiendav alfa-kanal, tänu millele saavutatakse peenem läbipaistvuse tulemus.

Piltide lisamine

Graafikaid saab lisada img-elementi kaudu. (Pange tähele, et pilte lisatakse tänapäeval sageli CSS-i abil. Üksikasjalikud juhised CSS-i kohta järgnevad loomulikult veel. Kuvatud HTML-tee on aga täiesti standardne ja seda saab kasutada ka HTML5 puhul muretult.)

<img src="logo.png" alt="PSD-Tutorials.de" />

img on iseseisev element. Pildi täpsemaks kirjeldamiseks saab kasutada vastavaid atribuute. Kõige olulisem atribuut on kahtlemata src. Selle kaudu määratakse ära pilt, mis tuleb lisada. Antud näites eeldatakse, et graafika logo.png asub samas kaustas kui HTML-fail, kus img-element on määratletud.

Et pildid tegelikult kuvataks, tuleb nende teele õigesti viidata. HTML pakub selleks erinevaid võimalusi.

• Absoluutsed teed

• Baasadressi suhtes absoluutsed teed

• Baasadressi suhtes suhtelised teed

Esmalt absoluutsetest teedest. Seda varianti kasutatakse tavaliselt siis, kui pilt ei asu oma serveris. Eeldades, et soovite oma veebisaidile lisada PSD-Tutorials.de-lt tuntud liblikat. Siis võiksite selle teoreetiliselt otse laadida sellelt serverilt, kus see asub. Kõigepealt määrake pildi tee. Kõige lihtsam on see teha, paremklõpsates pilti brauseris ja valides seejärel Kopeeri pildi URL.

Mis laaditakse lõpuks lõikelauale, peaks lõpptulemusena välja nägema umbes järgmiselt:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Tegu on pildi täieliku aadressiga. See info on piisav, et pilt lisada.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Antud juhul antakse src atribuudile täielik piltide tee.

Kuid probleem absoluutsete teedega on lõppkokkuvõttes see, et sa ei kontrolli tõesti sisu, mis on lisatud. Kui teie poolt viidatud graafika kustutatakse serverist või viiakse mujale kataloogi, tekib kuvavea.





Sellepärast peaks selline absoluutne viitamine tegelikult olema erandlik.

Absoluutsed põhipunkti suhtes asukohaparameetrid

See variant on sobilik alati, kui graafika asub samal arvutil/serveril kui HTML-fail ja on saavutatav läbi praeguse protokolli. See kõlab keeruliselt, kuid tegelikult pole see nii.

Näide:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Siin on täielik aadress. Järgnev osa on absoluutne asukohaparameeter.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

See absoluutne asukohaparameeter viitab suhteliselt baasadressile http://4eck-media.de.

Relatiivsed põhipunkti suhtes asukohaparameetrid

Nüüd tutvustatud variant on kindlasti kõige levinum. Siin peetakse alati hetkelist asukohta lähtekohana, millest lõppkokkuvõttes viidata. Siin on mõned näited. Eeldame, et on fail index.htm, millesse soovite lisada pildi. Lisaks eksisteerib samal tasemel kataloog images, kus pilt asub.

index.htm
images
--logo.png

Kutsung src atribuudis näeks sel juhul välja järgmine:

src="images/logo.png"

Kuidas aga välja näeks kui pilt asub kataloogis, mis on HTML-failist kõrgemal tasemel?

projekt
--images
-----logo.png
--archiv
-----index.htm

Antud juhul asub index.htm kataloogis üks allpool pilti mida lisatakse logo.png.

src="../images/logo.png"

Süntaks tähendab siin seega: Liigu üks tase üles, mine sinna kataloogi images ja näita logo.png.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

Siin näeb süntaks välja järgmine:

src="../../images/logo.png"

Pilt logo.png asub sel juhul kaks taset ülevalpool index.htm kataloogis images.

Relatiivsete asukohaparameetrite eelis on nende paindlikkus. Näiteks saate projekti arendada kohalikult ja seejärel "tõelise" serverisse kopeerida. Pärast seda jäävad teed muutumatuks.