Siiamaani peaks teie pildi definitsioon välja nägema umbes järgmiselt:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
img-elemendile võiks (ja tuleks) aga mõned atribuudid määrata. Esimene neist on alt. Siin defineeritud tekst kuvatakse brauseris, kui pilti ei saa mingil põhjusel laadida.
Kahjuks tekib alt-atribuudi kontekstis tihti arusaamatusi. Tegelikult on alt-atribuut mõeldud ainult juhuks, kui pilti ei kuvata. Mõned brauserid aga näitavad alt-atribuudi väärtust tööriistaipäise aknas, kui hiirekursor asetatakse pildile.
See käitumine on vale. Sellisteks tööriistaipäisteks on tegelikult mõeldud atribuut title. Vastav definitsioon näeks välja järgmine:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logo" />
Selles olukorras kattub title'i väärtus alt'iga.
Suuruste määrangud
HTML-is tehakse suurem osa asjadest atribuutide abil, kuid suuruste määrangud ei kuulu nende hulka. Kõrgus ja laius määratakse jätkuvalt kahe atribuudi width ja height abil. Siin näide:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logo" width="200" height="150" />
Kui ei täpsustata ühikut atribuutidel width või height, siis brauser tõlgendab numbrid pikslitena. Eelnevas näites on pilt seega 200 pikselit lai ja 150 pikselit kõrge. Võimalik on ka protsendiväärtus.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logo" width="20%" height="15%" />
Protsendimärkused viitavad ekraani kättesaadavale kuvapinnale. Kui suuruste määranguid pole, kuvavad brauserid graafikud nende originaalsuuruses.
Pildid ja tekstialad
Kui paigutate pilte koos voolava tekstiga, olge ettevaatlikud.
<p><img src="logo.png" alt="" width="180" height="150" /> See tekst kuvatakse pildi kõrval.</p>
img on nn sisseelement. Graafikuid saab seega teksti sees otse paigutada. Kui pilt on kõrgem kui rea kõrgus, joondab brauser teksti rea piires. Vaikimisi joondub tekst allpool pilti.
Teksti joondamist sai mõjutada vanemates HTML-versioonides atribuudi align abil. Palun ärge seda enam kasutage, kuna see eemaldati HTML5-standardist. Kasutage selle asemel CSS-i võimalusi. Nii saate näiteks lasta pildil tekstile ümber pöörelda.
Pika kirjelduse lisamine
HTML pakub võimalust pildile lisada põhjalik kirjeldus. See on alati kasulik, kui pildi juurde on tõepoolest vaja selgitavaid märkusi. Lisateabeid saab salvestada erinevates kohtades ja nende juurde viidata.
Lisateave võib olla erinevates kohtades.
<img src="bild1.png" alt="Diagramm 1" title="Diagramm 1" longdesc="#diagramm" />
Eeldame, et lehel on ID-ga ala nimega diagramm.
Kõige tõenäolisem variant on see, et teabeid hoitakse välises failis.
<img src="bild1.png" alt="Diagramm 1" longdesc="diagramm1.htm" />
Kahjuks on selles osas veel brauserite tugi puudulik. Lisaks tundub, et see atribuut seab brauseritootjad silmitsi küsimusega, kuidas seda lihtsasti rakendada.
Tegelikult pole see näiteks Firefoxis ilus ega iseenesestmõistetav. Kui pildil on longdesc-atribuut, siis tavalised lehekülje külastajad seda alguses ei märka. Pigem peavad nad klõpsama pildil parema hiireklahviga.
Kontekstimenüüs kuvatakse seejärel Kirjeldusega valik. Kui sellele klõpsata, näidatakse longdesc'i atribuudis määratud lisateavet. Nagu öeldud, see töötab Firefoxis niimoodi, aga elegantne see kindlasti pole.
Opera tegi seda muide väga sarnaselt. Kui selles brauseris klõpsate pildil paremklahviga, kuvatakse kirje Pikk kirjeldus.
See viib siis määratud lisateabele.
WC3 soovitab lisaks esitada pikakirjeldusena andme-URL-ina.
<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" />
Kui teil pole nende andme-URL-ide osas veel kogemusi, leiate http://de.wikipedia.org/wiki/Data-URL selle kohta põhjalikku teavet.
Pildikirjelduste määratlemine
Siiamaani polnud HTML-is ühtegi võimalust pildiallkirjade ja pildigruppide määratlemiseks. Just see aspekt muutus HTML5-s. Siin tutvustati kaks uut elementi figure ja figcaption.
Ette jäädes: figure pole mõeldud ainult graafikaga kasutamiseks. Tegelikult saab seda elementi kasutada kõigi dokumenti täiendavate elementide jaoks. Nende hulka võivad lisaks piltidele kuuluda näiteks diagrammid, koodinäited ja videod.
Lisaks figure -le on olemas ka figcaption. Selle abil saab varjatud sisu jaoks anda alternatiivse kirjelduse.
Siin on näide, kuidas kasutada kahte elementi figure ja figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>See on meie uus logo.</figcaption> </figure>
Vaade tulemusele brauseris annab järgmise tulemuse:
Kuidas brauserid nende kahe elemendiga toime tulevad, jääb lõpuks nende otsustada. Üldiselt saate loomulikult kujundust jällegi CSS-i abil mõjutada.
Ühte figure elementi saab sisestada suvaline hulk pilte või muid elemente. Siiski võib ühes figure elemendis olla vaid üks figcaption element. Jällegi näide selle kohta:
<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>See on meie uus logo.</figcaption> </figure>
Nii saate ka mitu pilti panna ühte figure-elementi.
Eriti veebisaitide või sisu loogilise struktureerimise seisukohast on HTML5-s mitmeid uuendusi. Neid õpite loomulikult selle seeria raames ka põhjalikult tundma.
