HTML un CSS iesācējiem (daļa 09): Attēli tiešsaistei (01)

Ja ievietojat attēlus grafiskajā programmā, vienmēr ir pieejami dažādi grafikas formāti. Tomēr kuru no tiem vajadzētu izvēlēties, ja jāievieto attēls tīmekļa lapā?



Ja vēlaties ievietot attēlu savā tīmekļa vietnē, jums ir jāizvēlas starp trim formātiem.

• GIF

• JPEG

• PNG

Taču kādu formātu izvēlēties konkrētam mērķim? Vai fotogrāfijām labāk izmantot GIF vai PNG? Vispirms īss pārskats par katras formāta iespējām.

Šis mazais pārskats jau parāda dažādos formātu īpašumus. Tāpēc nav pārsteidzošs, ka noteikti formāti ir piemērotāki konkrētiem mērķiem nekā citi. Tiek skaidrots, kad vislabāk ir izmantot katru formātu.

Fotogrāfijas

Nav šaubu, fotogrāfijām izmanto JPEG. Šeit attēli var labi saspiest, un ir iespējams izvēlēties mainīgu kvalitāti. Šeit ir atrasta pareizā līdzsvars starp kvalitāti un saspiešanas ātrumu.

Ekrānuzņēmumi/Diagrammas

Šādiem nolūkiem labāk piemērots ir PNG formāts. PNG ir interesants arī tehnikas zīmējumiem, pamatplāniem u.c. PNG var izmantot arī attēliem, kur strādā ar caurspīdīgiem apgabaliem.

Fonti/Logotipi

Ja jūsu logotipā ir teksts vai vispār vēlaties attēlot rakstzīmes, jums vajadzētu izmantot GIF vai PNG. Taču parasti labāk izvēlēties PNG, ņemot vērā labāku veiktspēju. JPEG nav piemērots rakstzīmju attēlošanai, jo malas tiks rādītas neapstrādātas.

Caurspīdīgums

Ja runa ir par caurspīdīgiem apgabaliem, JPEG jau sākumā izkrīt. Paliek tikai GIF un PNG. Tomēr kuru no šiem diviem formātiem izmantot, ja tieši caurspīdīgums ir svarīgs? GIF teorētiski var strādāt ar caurspīdību, taču rezultāti parasti ir nekārtīgi. GIF formātā pikseļus var padarīt pilnīgi redzamus vai pilnīgi caurspīdīgus. PNG gadījumā šāds fenomens nenotiek. Šī formāta ir papildu alfa kanāls, pateicoties tam var panākt labākus caurspīdīguma rezultātus.

Attēlu ievietošana

Grafikas attēlus var ievietot, izmantojot img elementu. (Lūdzu, ņemiet vērā, ka šobrīd attēli bieži tiek ievietoti, izmantojot CSS. Detalizēta informācija par CSS noteikti seko. Tomēr redzamais HTML ceļš ir pilnīgi standarta un to var lietot HTML5 nedaudz šaubu nejauši.)

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

Ar img ir saistīts Standalone elementu. Attēls var tikt aprakstīts tuvāk, izmantojot atbilstošos atribūtus. Vis svarīgākais atribūts ir, protams, src. Jo, izmantojot to norādīt bildi, kas jāievieto. Šajā piemērā es pieņemu, ka grafika logo.png atrodas tajā pašā mapē kā HTML failā, kurā tika definēts img elements.


• Absolūti ceļi

• Absolūtas ceļa norādes attiecībā pret bāzes adresi

• Relatīvas ceļa norādes attiecībā pret bāzes adresi

labo peles pogu, izvēloties Kopēt attēla URL.

Tas, kas tiek ielādēts starppamatā, beigās izskatās šādi:

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

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

Citiet src-atribūtam pilno ceļu uz attēlu.

Tomēr šai absolūtajai ceļa norādei beigu beigās ir problēma, ka jums nav patiesas kontroles pār iekļautajiem satura elementiem. Ja jūs saistītajam serverim tiek dzēsta vai pārvietota grafika, rodas kļūda parādīšanā.





Tāpēc šāda absolūta saistīšana patiesībā vajadzētu būt izņēmumam.

Absolūtās ceļa norādes attiecībā pret bāzes adresi

Šis variants ir piemērots vienmēr, kad attēls un HTML fails atrodas tajā pašā datorā/serverī un ir sasniedzams pašreizējā protokolā. Tas izklausās sarežģīti, bet tā nav.

Piemērs:

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


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

Šis absolūtais ceļa norādījums attiecas relativi uz bāzes adresi http://4eck-media.de.

Relatīvās ceļa norādes attiecībā pret bāzes adresi

Šis iepazīstinātais variants ir droši viens no izplatītākajiem. Šajā gadījumā vienmēr ņemat vērā pašreizējo ceļu kā atsauci, no kuras galu galā tiek adresēts. Šeit ir vēl daži piemēri. Pieņemsim, ka ir fails index.htm, kurā vēlaties iekļaut attēlu. Turklāt tajā pašā līmenī pastāv images mape, kur attiecīgais attēls atrodas.

index.htm
images
--logo.png

Zvanīt src-atribūtam šajā gadījumā izskatītos šādi:

src="images/logo.png"

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

index.htm atrodas vienu mapi zemāk nekā jāiekļauj logo.png.

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

images un rādieties logo.png.

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

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

logo.png šajā gadījumā atrodas divas mapes augstāk par index.htm mapē images.