INFOGA BILDER

Infoga bild

Hemsidan blir ofta lite roligare om man lägger in några bilder. För att lägga in en bild skriver man:

<IMG SRC="bildnamn.gif">

I detta fall måste bilden ligga i samma katalog som hemsidedokumentet. Annars hittar inte webläsaren bilden. Det brukar ofta bli rätt många bilder och dokument till en hel "site". Då är det bra att skapa underkataloger till sina bilder.

Om bilden ligger i en underkatalog som heter "bilder", skriver du så här:

<IMG SRC="bilder/bildnamn.gif">

Observera att det skall vara ett "/" och inte ett "\". Annars fungerar det inte på vissa servrar.

Tips!: Skriv gärna alla katalog och bildnamn med små bokstäver. De flesta webservrarna är känsliga för gemener och versaler. Katalogerna och bilderna måste heta och stavas precis som det står i html-dokumentet.

Andra bildattribut

Om man vill vara "nästan" säker på att layouten bibehålls även om bildvisningen är avstängd i webläsaren, så bör man lägga till attribut för bredd och höjd på bilden. Då syns ofta en tom ruta i rätt storlek åtminstone. Detta medför även att bildnedladdningen blir en aning snabbare i vissa fall.

Observera att bilden blir den storleken du skriver in. Skriver du fel blir bilden förvrängd.

<IMG SRC="bilder/bildnamn.gif" WIDTH="300" HEIGHT="200">

Man bör även lägga till en ALT-tag så att de som inte kan eller vill se bilden ändå vet vad det är. Texten syns då inom bildrutan.

<IMG SRC="bilder/semester.jpg" WIDTH="300" HEIGHT="200" ALT="En bild på båten!">

Ibland kan det behövas lite "luft" mellan bilden och omkringliggande text. Horisontellt eller vertikalt. Eller man kanske vill ha en ram runt sin bild.

<IMG SRC="bilder/semester.jpg" WIDTH="300" HEIGHT="200" ALT="En bild på båten!" HSPACE="5" VSPACE="15" BORDER="3">

Bildens justering

En bild är som standard alltid justerad till vänster i fönstret och texten "flyter" inte runt bilden automatiskt. Det finns en mängd attribut för att justera bilden i förhållande till texten.

Här är en kort beskrivning av de vanligaste:

<IMG ALIGN="left" SRC="...> Bilden ligger till vänster och texten flyter runt bilden.
<IMG ALIGN="right" SRC="...>    Bilden ligger till höger och texten flyter runt bilden.
<IMG ALIGN="top" SRC="...> Texten börjar i bildens överkant. Texten flödar inte.
<IMG ALIGN="middle" SRC="...>   Texten börjar i mitten av bilden. Texten flödar inte.
<IMG ALIGN="bottom" SRC="...>   Texten börjar i bildens underkant.

De två första är bra när man vill ha en text som omger en bild. De tre senare är främst bra att ha vid bildtexter eller beskrivningar.

Dessa attribut kan vara rätt svåra att hantera om man har mycket text. Det är bara att prova sig fram så förstår man bättre hur de fungerar.