Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

Billeder og Links i HTML

Hvordan man indsætter billeder og Links i HTML.

Redigeret: 2015-05-15 14:14

HTML living stadard logo anden orange udgave.

Indsættelse af billeder og links, foregår ved brugen af img og a elementerne.

Img står for image, og bliver brugt til at indsætte billeder. a står for anchor, og bliver brugt til at lave links.

Anchor betyder "anker" oversat til dansk, og når man smider et anker i vandet, bliver det på en måde et link til bunden. På samme måde er A elementer links til andre sider, eller sektioner på samme side.

Billeder

Ved brug af Img Taget indsætter man billeder. IMG er et inline-element, og i HTML har IMG tagget ikke noget lukke tag. Attributten src bliver brugt til at angive adressen for billedet, også kaldet URL'en. Den anden Attribut er alt, hvilket bliver brugt til at angive en alternativ tekst, som vil blive vist i nogle browsere. Skærmoplæsere bruger for eksempel alt teksten til at beskrive billedet for brugerne.

Et eksempel på hvordan man indsætter Billeder ses nedenfor:

<p><img src="/billeder/MitBillede.jpg" alt="Et Billede"></p>

Læg mærke til adressen som er en root relativ adresse. Adressen som er brugt i billedet ovenfor, svare til adressen vist nedenfor:

http://www.brugbart.dk/billeder/MitBillede.jpg

Hvis du vil vide mere om hvordan man angiver adresser, så læs Artiklen: Absolutte og Relative Stier

Links

Når man indsætter links bruges A Taget, hvilket også er et inline-element. En god regl er, at inkludere navigation-links i usorterede eller sorterede lister, hvilket skulle øge brugervenligheden for folk som bruger skærmoplæsere. Man kan også inkludere dem i paragrafer, eksempel ses nedenfor:

<p><a href="http://www.brugbart.dk/">Test Link</a></p>

Billede som Link

For at bruge et billede som link, kan man inkludere IMG inden i A elementet, eksempel ses nedenfor:

<p><a href="http://www.brugbart.dk/"><img src="/saek/mappen-billeder/brugbartL_Normal.png" alt="Brugbart.dk"></a></p>

Hvilket resultere i noget lignede:

Et billede der viser hvordan billeder som links, får tilføjet en grim kant.

Problemet med det er, at billedet vil have en grim blå kant udenom, som sandsynligvis slet ikke passer ind i dit layout. Derfor må vi bruge en lille smule CSS, for at få fjernet kanten. Til det er border egenskaben perfekt.

<p><a href="http://www.brugbart.dk/"><img src="/saek/mappen-billeder/brugbartL_Normal.png" alt="Brugbart.dk" style="boder:0;"></a></p>

Og det efterfølgende rasultat:

Et billede der viser hvordan billeder brugt som links, med border egenskaben sat til 0 vil se ud.

Paragraffer og Overskrifter i HTML - Tabeller i HTML