Læs og forstå IMG- koden

Transkript

1 Læs og forstå IMG- koden Det er nyttigt at kunne lokalisere og forstå den stump kode i en webartikel, som handler om fotoet eller illustrationen. Koden ser i udgangspunktet typisk sådan ud: <img src= width= height= alt= title= /> To af disse såkaldte attributter skal være der: src og alt. De andre kan bruges, hvis de er nødvendige. Det her betyder koden: < Her starter et nyt stykke kode img src width height alt title (Image) her kommer et billede (Source) billedet kommer herfra så følger som regel en URL som viser stien til dér, hvor billedet ligger starter med og slutter med.jpg Så bredt er billedet. Hvis width ikke optræder i koden, betyder det, at bredden bare vises, som den er. Bruges hvis billedet skal vises i en anden størrelse end originalen Så højt er billedet. Hvis height ikke optræder i koden, betyder det, at højden bare vises, som den er. Bruges hvis billedet skal vises i en anden størrelse end originalen Alternativ- teksten læses op af skærm- læsere og læses af Google, som jo ikke kan se billeder. Den er faktisk vigtig at kunne håndtere meningsfuldt. Hvis en browser ikke viser billeder, er det alt- teksten, der kommer op. Supplement, sekundær til alt- teksten. Kommer frem ved mouse- over. Læses af Google /> - Slut på det her stykke kode. Ses også nogle gange som > - den præcise beskrivelse står så mellem citationstegnene. Faktorernes orden er ligegyldig, så de forskellige attributter behøver ikke stå i netop denne rækkefølge. - der findes et par attributter mere, som border og align men de bliver sjældnere og sjældnere, da de erstattes af CSS, dvs. et design- stylesheet, som beskriver hele websitets udseende i stedet for at hvert billede fx får sin egen beskrivelse.

2 Eksempel fra DR.DK: <img width="620" border="0" src="/nr/rdonlyres/e818e A35A- B D4C6/ /9574f f9c94950a457541bb83_fb09d33763f jpg" alt="" title=""> Billedet er 620 pixels bredt. Der er en 0 pixel bred ramme om billedet. Billedet ligger på noget kompliceret, internt server- værk (starter ikke med og har et meget langt og indviklet navn. Der er ingen alt- tekst og der er ingen titel på billedet. Der er en del unødig information i koden. Fx giver det ikke mening af angive en bredde men ikke en højde på et billede. Billedet er sandsynligvcis denne størrelse i sin original, og så er der ingen grund til at skrive kode. En 0 pixel ramme virker også meningsløs. DR bruger hverken alt- tekst eller title, hvilket er meget uheldigt.

3 Eksempel fra POLITIKEN.DK: <img src=" width="630" height="350" alt="kritik. Sydbanks metoder vækker opsigt hos benkekspert Lars Krull fra Aalborg Universitet. - Foto: NIELS HOUGAARD" /> Forstrå koden: Billedet ligger på en web- adresse (starter med og hedder En_masse_aktion_rer_610418y.jpg. Det er sat til en størrelse på 630 pixels bredt og 350 højt. Der er en alt- tekst, som siger det samme som billedteksten. Det virker ikke gennemtænkt.

4 Eksempel fra SN.DK (Frederiksborg Amts Avis, Sjællandske) <img src=" alt="sydbank hjalp kunder med at skjule formuer" title="sydbank hjalp kunder med at skjule formuer" /> Billedet ligger på en URL (starter med og slutter med.jpg). Billedfilen har godt nok et indviklet navn Alt- tekst og title er ens, men de er der dog. Der har ikke været grund til at lave width og height, da billedet bliver vist i sin originale størrelse

5 Eksempel fra BORSEN.DK <img src=" 975.jpg" width="475" alt="sydbank hjalp kunder med at skjule formuer"> Billedet ligger på en URL (starter med og slutter med.jpg). Width er sat til 475 pixels, men det er blot originalstørrelsen på billedet, så width er ikke nødvendig i dette tilfælde. Alt- teksten er den samme som rubrikken på historien. ;- ) Hvis du synes sådan noget med koder er spændende, så kan du lære mere på fx Ole Rode Jensen januar 2011