Billeder og Links i HTML
Hvordan man indsætter billeder og Links i HTML.
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:
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: