HTML-SKOLA / BILDHANTERING
Att lägga in en bild
För att lägga in en bild på sin sida använder man sig av följande kod:
<IMG SRC="bild.gif"> där IMG står för "IMAGE" och SRC för "SOURCE" som betyder "sökväg" till bild.Ha ni en bild som t.ex. heter just "bild" och är i filformatet "JPG" kanske, så ser alltså koden för detta ut som såhär: <IMG SRC="bild.JPG">.
Men detta är förutsatt att du har bilden liggandes i samma mapp som sidan där du skriver in den här koden. Tips! För att bilden också ska laddas upp så fort som möjligt så bör man också ange bildens höjd och bredd inom IMG-taggen. Detta gör nämligen så att webbläsaren slipper räkna ut själv hur stor bilden är och därav laddas den upp fortare.
Om vi säger att du har en bild som är 200 pixlar i bredd och 100 pixlar i höjd så ser alltså koden för detta ut såhär: <IMG SRC="bild.JPG" WIDTH="200" HEIGHT="100">
Filformat
Vad det gäller filformatet på sin bild så är nog GIF det vanligaste vad det gäller rent grafiska bilder. GIF-format använder sig nämligen inte av lika många färger som t.ex. JPG/JPEG som i nästa tur lämpar sig bättre för fotografier och dylikt. En annan sak man ska ha i åtanke är att det kan ha stor betydelse om en bild heter "bild.GIF" eller "bild.gif", inte för att formatet i sig är ändrat, men om filändelsen står i stora bokstäver och du skriver in bilden med små bokstäver så kan detta resultera i att bilden inte visas överhuvudtaget.
SLUTSATS: GIF = Bilder med mindre färganvändning - därav ngt mindre laddningstid. Lämpar sig bäst för grafiska bilder.
JPG/JPEG = Fler färger, lämpar sig bäst för fotografier.
Ram runt bild (BORDER)
Vill man ha en ram runt sin bild så är det inte alls svårt att få till detta. Säg att du vill ha en svart ram med tjockleken 1 pixel, då skriver du bara in BORDER="1" i IMG-taggen.
Jag använder mig nu av följande kod:<IMG SRC="images/sol.gif" WIDTH="118" HEIGHT="121" BORDER="1">
BORDER="1"
|
BORDER="3"
|
Beskrivning av bild (Funkar endast i IE)
En bild säger mer än 1000 ord sägs det... inte riktigt alltid säger jag. Bilden här nedan t.ex. säger ju inte sådär jättemycket om man frågar mig, och då kan det vara bra att kunna lägga in någon form av beskrivning av bilden för att få besökaren att förstå lite mer. Detta görs genom att skriva in ALT="Beskrivning" i IMG-taggen.
Exempel:
<IMG SRC="bilder/sol.gif" WIDTH="88" HEIGHT="31" ALT="Nån beskrivning av bilden...">
Resultat för att få er att förstå principen:(Beskrivningen visas först när du för pilen över bilden.)
Placering av bilder (ALIGN)
Om du vill få en bild bredvid en text utan att för dens skull behöva använda dig av tabeller så kan man använda sig av följande koder som man lägger in i IMG-taggen:
ALIGN="left" ALIGN="right"
För att få en bild att ligga till höger "i" texten så skriver du alltså såhär:<IMG SRC="bild.gif" ALIGN="right"> Och här har ni resultatet:
Vill ni få större mellanrum mellan text och bild så kan ni t.ex. också lägga in HSPACE="30" ("30" för 30 pixlars mellanrum) inom IMG-taggen.
Exempel: <IMG SRC="bild.gif" ALIGN="right" HSPACE="30">
Resultat:
Länka från bild
Självklart kan ni använda en bild som en länk, men för att läsa vidare om detta så hänvisar jag er till att gå in på "Länkhantering" här på Annice.se.
› Take me there!