Indtil videre skal din billeddefinition se omtrent sådan ud:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Imidlertid bør visse attributter tildeles img-elementet (og det bør også gøres). Først og fremmest er der alt. Den definerede tekst vises af browseren, hvis billedet af en eller anden grund ikke kunne indlæses.
Desværre opstår der ofte misforståelser i forbindelse med alt-attributet. Alt-attributtet tjener faktisk kun til tilfælde, hvor billedet ikke vises. Nogle browsere viser dog værdien af alt-attributtet i en værktøjstip, når man holder musen over billedet.
Dette er en forkert opførsel. Til sådanne værktøjstips bruges attributtet title. En passende definition ville se således ud:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de's logo" />
I dette tilfælde overskriver værdien af title værdien af alt.
Størrelsesangivelser
I HTML bruges størrelsesangivelser nu primært ikke længere gennem attributter, men i stedet løses det med CSS. Definering af størrelser er dog ikke en del af dette. Bredde og højde defineres uændret gennem attributterne width og height. Her er et eksempel:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de's logo" width="200" height="150" />
Hvis der ikke angives enhed for width eller height, fortolkes tallene af browseren som pixelangivelser. I det foregående eksempel er billedet derfor 200 pixels bredt og 150 pixels højt. Det er også muligt at angive procenter.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de's logo" width="20%" height="15%" />
Procentangivelserne refererer til den tilgængelige visningsplads. Hvis der ikke angives størrelsesangivelser, vil browsere vise grafikken i dens originale størrelse.
Billeder og tekstafsnit
Hvis I placerer billeder sammen med flydende tekst, skal I være opmærksomme.
<p><img src="logo.png" alt="" width="180" height="150" /> Denne tekst vises ved siden af billedet.</p>
img er et såkaldt inline-element. Grafikken kan placeres direkte i teksten. Hvis grafikken er højere end linjehøjden, justerer browseren teksten inden for linjen. Standardmæssigt justeres teksten nederst i forhold til grafikken.
Justeringen kunne påvirkes i ældre HTML-versioner gennem attributten align. Brug venligst ikke dette længere, da det er blevet fjernet fra HTML5-standard. Brug i stedet de muligheder, som CSS tilbyder. På den måde kan I for eksempel lade teksten flyde rundt om billedet.
En lang beskrivelse
HTML giver jer mulighed for at angive en detaljeret beskrivelse til et billede. Dette er praktisk, når billedet faktisk kræver yderligere forklaringer. I kan gemme yderligere informationer på forskellige steder og henvise til dem.
Yderligere informationer kan placeres på forskellige steder.
<img src="bild1.png" alt="Diagram 1" title="Diagram 1" longdesc="#diagram" />
Her antages det, at der findes et område på siden med ID'et diagram.
Den mest almindelige metode er sandsynligvis en, hvor informationerne gemmes i en ekstern fil.
<img src="bild1.png" alt="Diagram 1" longdesc="diagram1.htm" />
Der er imidlertid stadig problemer med browsersupporten her. Derudover synes denne attribut at stille browserproducenterne overfor spørgsmålet om, hvordan de kan implementere den nemt.
For eksempel ser det ikke særlig godt og selvforklarende ud i Firefox. Hvis et billede har et longdesc-attribut, vil almindelige brugere i første omgang ikke opdage det. De skal derimod højreklikke på billedet.
Derefter vises indstillingen Vis beskrivelse i kontekstmenuen. Hvis man klikker på denne, vises den yderligere information, der er angivet ved longdesc. Som sagt fungerer det på denne måde i Firefox, men det er sandsynligvis ikke særlig elegant.
Opera har faktiskt løst det på meget lignende vis. Når man højreklikker på billedet i denne browser, vises posten Lang beskrivelse.
Dette fører så til de angivne supplerende oplysninger.
WC3 foreslår også at angive langbeskrivelsen i form af en 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" />
Hvis I endnu ikke har erfaring med disse data-URL'er, kan I finde detaljerede oplysninger om dem på http://de.wikipedia.org/wiki/Data-URL.
Definér billedbeskrivelser
Indtil videre har der ikke været nogen mulighed for at definere billedtekster og billedgrupperinger i HTML. Præcis denne aspekt er ændret med HTML5. Her blev de to nye elementer figure og figcaption introduceret.
For at antyde det: figure er ikke kun beregnet til brug i forbindelse med grafik. Faktisk kan dette element bruges til alle elementer, der supplerer et dokument. Dette kan ud over billeder også være diagrammer, kodeeksempler og videoer, for eksempel.
Ud over figure er der også figcaption. Det gør det muligt at forsyne indhold, der ikke er læsbart for visse brugergrupper, med en alternativ beskrivelse.
Her er et eksempel på brugen af de to elementer figure og figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Det er vores nye logo.</figcaption> </figure>
Et kig på resultatet i browseren viser følgende resultat:
Hvordan browsere håndterer de to elementer, er i sidste ende op til dem. Generelt kan I selvfølgelig påvirke visningen igen med CSS.
I et figure-element kan der indsættes vilkårligt mange billeder eller andre elementer. Der må dog kun være ét figcaption-element i et figure-element. Her er igen et eksempel:
<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>Det er vores nye logo.</figcaption> </figure>
På denne måde kan I også placere flere billeder i et figure-element.
Især med hensyn til den logiske struktur af websider eller indhold er der mange nyheder i HTML5. Disse vil I naturligvis også lære detaljeret om i løbet af denne serie.
