Billeder og Links i HTML

Postet Den: 27/08/2008 Kl: 14:37

Denne vejledning beskriver hvordan du indsætter billeder, bruger dem som links, og laver tekst-links, i HTML.

Billeder

Ved brug af Img Taget indsætter man billeder. IMG er et inline-element, og i HTML skal IMG Taget ikke lukkes. Atributten src bliver brugt til at angive addressen for billedet, også kaldet URL'en. Den anden Atribut er alt, hvilket bliver brugt til at angive en alternativ tekst, som vil blive vist i nogle browsere. Skærmoplæsere bruger alt teksten til at beskrive billedet.

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, hvilket svare til den abselutte adresse: http://www.brugbart.dk/billeder/MitBillede.jpg

Links

Når man indsætter links bruges A Taget, hvilket er et inline-element, en god regl er at inkludere links i usoterede eller soterede lister, hvilket skulle øge brugervenligheden for folk som bruger skærmoplæsere. Man kan også inkludere dem i paragrapher, 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, eksempel ses nedenfor:

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

Hvilket rasultere i noget ligende: brugbart.dk For at slippe af med kanten omkring billedet, bruges CSS border Egenskab, et hurtigt eksempel kan ses nedenfor:

<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 følgende rasultat: brugbart.dk

Tilbage

Forfatter: BlueBoden

Kommentarer: [0]

© Brugbart Webdesign