Inntil nå bør bildebeskrivelsen din se omtrent slik ut:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
I img-elementet kan det (og bør det) tilordnes noen attributter. Først og fremst er det alt. Teksten definert her vil vises av nettleseren hvis bildet - av hvilken som helst grunn - ikke kunne lastes.
Dessverre oppstår det ofte misforståelser i forbindelse med alt-attributtet. alt-attributtet brukes faktisk utelukkende i tilfelle bildet ikke vises. Noen nettlesere viser imidlertid verdien av alt-attributtet i et verktøy-tips-vindu når markøren holdes over bildet.
Dette er feil oppførsel. For slike verktøytips er det snarere attributtet tittel. En tilsvarende definisjon ville se slik ut:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logoet til PSD-Tutorials.de" />
I dette tilfellet vil verdien av tittel overvære verdien av alt.
Størrelsesangivelser
I HTML løses mye nå ikke lenger gjennom attributter, men heller ved hjelp av CSS. Imidlertid gjelder ikke dette for angivelse av størrelser. Høyde og bredde defineres uendret gjennom de to attributtene width og height. Her er et eksempel:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logoet til PSD-Tutorials.de" width="200" height="150" />
Hvis du ikke angir en måleenhet for width eller height, vil tallverdiene tolkes som pikselverdier av nettleseren. I det forrige eksempelet er bildet derfor 200 piksler bredt og 150 piksler høyt. En prosentvis angivelse er også mulig.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logoet til PSD-Tutorials.de" width="20%" height="15%" />
Prosentangivelsene refererer til den tilgjengelige visningsområdet. Hvis ingen størrelsesangivelser er gitt, vil nettleserne vise grafikk i originalstørrelse.
Bilder og tekstavsnitt
Når du plasserer bilder sammen med flytende tekst, må du være forsiktig.
<p><img src="logo.png" alt="" width="180" height="150" /> Denne teksten vises ved siden av bildet.</p>
img er et såkalt inline-element. Grafikk kan derfor plasseres direkte i teksten. Hvis grafikken er høyere enn linjehøyden, vil nettleseren justere teksten innenfor linjen. Standardjusteringen av teksten er nederst i forhold til grafikken.
Justeringen kunne påvirkes i eldre HTML-versjoner ved hjelp av attributtet align. Vennligst ikke bruk dette lenger, da det er fjernet fra HTML5-standarden. I stedet bør du bruke de mulighetene CSS tilbyr deg. På den måten kan du for eksempel la bildet omslutte av teksten.
En lang beskrivelse
HTML gir deg muligheten til å legge til en grundig beskrivelse til et bilde. Dette er alltid praktisk når et bilde faktisk krever ytterligere forklaringer. Du kan lagre tilleggsinformasjonen på ulike steder og henvise til den.
<img src="bild1.png" alt="Diagram 1" title="Diagram 1" longdesc="#diagram" />
Her antas det at det finnes en del av siden med ID-en diagram.
Den vanligste varianter er sannsynligvis der informasjon lagres i en ekstern fil.
<img src="bild1.png" alt="Diagram 1" longdesc="diagram1.htm" />
Det er imidlertid fremdeles problemer med nettleserstøtten her. I tillegg virker det som om dette attributtet skaper utfordringer for nettleserleverandørene når det gjelder hvordan de enkelt kan implementere det.
For eksempel, er dette ikke spesielt elegant løst i Firefox. Hvis et bilde har et longdesc-attributt, vil ikke vanlige nettleserbrukere først legge merke til det. De må heller høyreklikke på bildet.
Deretter kan de velge punktet Vis beskrivelse i kontekstmenyen. Som sagt, dette fungerer slik i Firefox, men det er sikkert ikke elegant.
Opera har forresten løst dette på en ganske lignende måte. Klikker man på bildet med høyre museknapp i denne nettleseren, vises oppføringen Lange Beschreibung.
Dette fører deretter til de angitte tilleggsopplysningene.
W3C anbefaler også å angi langbeskrivelsen i form av 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 du ikke har noen erfaring med disse Data-URL-ene ennå, finner du omfattende informasjon om dem på http://de.wikipedia.org/wiki/Data-URL.
Definisjon av bildetekster
Tidligere var det ingen muligheter i HTML for å definere bildetekster og bildegrupper. Akkurat dette aspektet har endret seg med HTML5. Her ble nemlig de to nye elementene figure og figcaption introdusert.
For å si det på forhånd: figure er ikke utelukkende ment å brukes sammen med grafikk. Faktisk kan dette elementet brukes for alle elementer som supplerer et dokument. Dette kan være i tillegg til bilder for eksempel diagrammer, kodeeksempler og videoer.
I tillegg til figure er det også figcaption. Dette lar deg utstyre innhold som ikke er leselig for visse brukergrupper med en alternativ beskrivelse.
Her er et eksempel på bruk av de to elementene figure og figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Dette er vår nye logo.</figcaption> </figure>
Etter å ha sett resultatet i nettleseren får man følgende resultat:
Hvordan nettleserne håndterer de to elementene er i bunn og grunn opp til dem. Generelt kan du imidlertid selvsagt påvirke visningen igjen med CSS.
Inni et figure-element kan du sette inn så mange bilder eller andre elementer du vil. Imidlertid kan et figure-element bare inneholde ett figcaption-element. Her er et annet 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>Dette er vår nye logo.</figcaption> </figure>
På denne måten kan du også sette inn flere bilder i et figure-element.
Spesielt med tanke på den logiske strukturen av nettsider og innhold, har HTML5 mange nyheter. Disse vil du selvfølgelig lære grundig om i løpet av denne serien.
