Blogg

Bilder

Med bilder kan du ge din hemsida dom grafiska element som behövs och pigga upp din text. För att infoga en bild i ett .html dokument använder man sig utav <img> taggen. Såhär ser taggen ut i action. Då vi kodar i XHTML så stänger vi taggen med ett / (slash).

<img src=”bilden.jpg” alt=”En bild” width=”100” height=”100” />

Src – Där skriver du in sökvägen och bildens namn. I detta fall ligger bildfilen ”bilden.jpg” i samma mapp som .html filen.

Alt – Är en kort beskrivande text om bilden, detta är viktigt för sökmotorer och blinda besökare.

Både src och alt attributen är ett krav att finnas i <img> taggen.

Width / height – Sätter en bestämd storlek på bilden, men det trycker bara ihop bilden. Så om du har en bild med storleken 2000x2000 (pixlar) och sätter width och height på 100 (pixlar) som vi har gjort, så är det samma stora bild, fast hoptryckt vilket resulterar i onödigt långa laddningstider.

I förra avsnittet av html skolan gick vi igenom länkar, och det är ingen ovanlighet att man länkar bilder. För att göra det, skriver man såhär:

<a href=”en_sida.html”><img src=”bilden.jpg” alt=”En bild” /></a>

Som standard får bilder i en länk en ful ram runt sig, vilket inte är så fint. För att få bort den använder vi oss helt enkelt utav CSS.

img { 
    border: none;
}

Med denna kod kommer varje <img> tagg vara utan en border. Men ibland kanske man vill ha en liten vit ram runt bilden så det får en liten old school fotografi känsla, som jag använder på vissa bilder i bloggen.

img .ram { 
    padding:3px; 
    border: 1px solid #e8e8e8;
}

Detta kanske ser lite lurigt ut med två selectorer som det är nu, men det som händer är, att alla <img> taggar med classen ”ram” får den här stilen, så om du har en annan tagg med classen ”ram” så får den inte stilen.

Såhär ser XHTML koden ut

<img class=”ram” src=”bilden.jpg” alt=”En bild” />

Kategori: XHTML-CSS     0 Kommentarer