Do zdaj naj bi bila definicija vaše slike videti nekako takole:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Elementu img bi (in bi morali) dodeliti nekaj atributov. Najprej je tu alt. Ta določen tekst se prikaže v brskalniku, če slika - iz kakršnega koli razloga - ni bila naložena.
Na žalost pride v zvezi z alt atributom pogosto do nesporazumov. Atribut alt dejansko služi izključno za primer, kadar se slika ne prikaže. Nekateri brskalniki pa vrednost atributa alt prikažejo v pojavnem oknu, če se miškin kursor zadrži na sliki.
Takšno obnašanje je napačno. Za takšna pojavnite besedila je bolj primeren atribut title. Ustrezen primer definicije bi bil naslednji:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo PSD-Tutorials.de" />
V tem primeru vrednost atributa title presega vrednost alt.
Velikostne nastavitve
V HTML se danes veliko več stvari namesto z atributi reši s CSS. Določanje velikosti pa ne spada sem. Višino in širino še vedno določamo z atributoma width in height. Tukaj je spet primer:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo PSD-Tutorials.de" width="200" height="150" />
Ko pri width ali height ne navedemo enote, brskalnik interpretira številke kot vrednosti v slikovnih pikah. V prejšnjem primeru je slika torej široka 200 slikovnih pik in visoka 150 slikovnih pik. Mogoča je tudi uporaba odstotkov.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo PSD-Tutorials.de" width="20%" height="15%" />
Odstotki se nanašajo na razpoložljiv prostor za prikaz. Če ni določenih velikostnih nastavitev, brskalniki prikažejo grafike v izvirni velikosti.
Slike in odstavki besedila
Ko postavljate slike v kombinaciji s tekstim, bodite previdni.
<p><img src="logo.png" alt="" width="180" height="150" /> Ta tekst se prikazuje ob sliki.</p>
Pri img gre za tako imenovani inline element. Slike lahko neposredno postavite v besedilo. Če je slika višja od višine vrstice, jo brskalnik poravnava v vrstici. Privzeto je besedilo spodaj poravnano glede na sliko.
Poravnavo je bilo mogoče v starejših različicah HTML-ja določiti z atributom align. Tega prosim ne uporabljajte več, ker je bil odstranjen iz standarda HTML5. Namesto tega uporabite možnosti, ki jih ponuja CSS. Na ta način lahko na primer slike obtekajo besedilo.
Dolgo opisovanje
HTML vam omogoča, da dodelite obsežen opis slike. To je vedno uporabno, kadar slika resnično potrebuje nadaljnje pojasnilo. Dodatne informacije lahko shranite na različne načine in nanje usmerite pozornost.
Dodatne informacije so lahko postavljene na različna mesta.
<img src="bild1.png" alt="Diagram 1" title="Diagram 1" longdesc="#diagram" />
Tukaj se predpostavlja, da na strani obstaja območje z ID-jem diagram.
Najbolj pogosta varianta je zagotovo tista, pri kateri so informacije shranjene v zunanji datoteki.
<img src="bild1.png" alt="Diagram 1" longdesc="diagram1.htm" />
Vendar pa tu še nekoliko škriplje z podporo brskalnikov. Poleg tega se zdi, da ta atribut postavlja brskalnične proizvajalce pred vprašanje, kako ga enostavno izvesti.
Ker na primer v Firefox-u to ni res lepo in samoumevno rešeno. Če slika vsebuje atribut longdesc, ga običajni obiskovalci spletnih strani na začetku sploh ne prepoznajo. Sliko morajo namesto tega z desnim miškinim gumbom klikniti.
V kontekstnem meniju nato najdejo možnost Prikaži opis. Če to izberejo, se prikaže dodatne informacije, ki so bile navedene pri longdesc. Kot sem že rekel, to deluje tako v Firefox-u, a zagotovo ni elegantno.
Opera je zadevo rešila na zelo podoben način. Če v tem brskalniku kliknete na sliko z desno tipko miške, je vnos Dolg opis viden.
Od tu se nadaljuje do navedenih dodatnih informacij.
W3C dodatno predlaga, da se Dolgi opis navede v obliki Data-URL.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Če še niste imeli izkušenj s temi Data-URL-ji, boste našli podrobne informacije na povezavi http://de.wikipedia.org/wiki/Data-URL.
Definiranje opisov slik
Doslej v HTML ni bilo nobenih možnosti za določitev podnapisov slik in skupin slik. S HTML5 se je to spremenilo. Tukaj so bili uvedeni dve novi elementi figure in figcaption.
Da ne bi skrivali, figure ni namenjen izključno uporabi v povezavi z grafikami. Pravzaprav lahko ta element uporabimo za vse elemente, ki dopolnjujejo dokument. To so lahko poleg slik na primer tudi diagrami, primeri kode in videoposnetki.
Poleg figure obstaja tudi figcaption. S temi je mogoče opremiti vsebine, ki niso berljive za določene skupine uporabnikov, z alternativnim opisom.
Tukaj je primer uporabe obeh elementov figure in figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>To je naš novi logotip.</figcaption> </figure>
Pogled na rezultat v brskalniku pokaže naslednje:
Kako brskalniki ravna z obema elementoma, je v končni fazi odvisno od njih. V osnovi pa lahko izgled seveda spet nadzorujete s CSS.
Znotraj elementa figure lahko vstavite poljubno število slik ali drugih elementov. Vendar pa v elementu figure sme biti samo en element figcaption. Tudi tu je primer:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>To je naš novi logotip.</figcaption> </figure>
Na ta način lahko v figure element dodate več slik.
Še posebej v zvezi z logično strukturo spletnih strani oziroma vsebin je v HTML5 veliko novosti. Te boste seveda podrobno spoznali med to serijo.
