PassagenHjälp « Tillbaka till förstasidan




Passagens HTML-guide: Bilder i ett HTML-dokument


Nu ska vi ta och lägga in bilder på din hemsida. För att länka till en bild på en URL, så används kommandot:

<IMG SRC= "URL">

Det finns många kommandon att välja emellan efter SRC. Du kan ha en vanlig url som länkar till en sida med en bild (alltså en http-adress). Vanligen har man bilden på sin hårddisk, och om bilden ligger i samma mapp som html-dokumentet, och heter DEMO.GIF så ser taggen ut så här t.ex.:

<IMG SRC="DEMO.GIF">

Nu har vi den här bilden nedan, den ser ut såhär:



Den var lite stor, och då kan man ändra storleken med hjälp av olika kommandon. I taggen lägger man in HEIGHT=x eller x% och WIDTH=x eller x%. Vi provar det på ovanstående bild. Den här taggen:

<IMG SRC="DEMO.GIF" HEIGHT=5% WIDTH=5%>

gör bilden ser ut såhär:



Om man använder kommandot:

<IMG SRC="DEMO.GIF" HEIGHT=5 WIDTH=5>

så gör det att bilden ser ut såhär:



Den får då 5 pixlars storlek. Man kan även "dra ut" bilden så att den blir avlång.

<IMG SRC="DEMO.GIF" HEIGHT=5 WIDTH=300>



Om du sen vill ha text bredvid bilden, hur ser det ut? Om du skriver en tagg som ser ut så här:

<IMG SRC="DEMO.GIF" HEIGHT=30 WIDTH=30> Min lilla bild.

så kommer det att se ut såhär:

Min lilla bild.

Taggarna WIDTH och HEIGHT används dock i första han för att hjälpa Netscape att ladda ned sidan fortare, genom att få hjälp med att räkna ut layouten på sidan på en gång, man skriver alltså den verkliga vidden och höjden på den bild man har.

Textens baslinje hamnar i höjd med bildens baslinje, för att ändra på det kan man använda sig av kommandot:

ALIGN=MIDDLE MIDDLE centrerar bilden i förhållande till textens baslinje.
ALIGN=ABSMIDDLE Centrerar bilden till textens mittlinje.
ALIGN=LEFT Om du vill att bilden ska flyta till vänster om texten.
ALIGN=RIGHT När du vill att bilden ska flyta till höger om texten.
ALIGN=BASELINE Gör så att bildens nederkant kommer i höjd med textens baslinje.
ALIGN=BOTTOM Ger samma resultat som ovanstående kommando.
ALIGN=ABSBOTTOM Placerar bilden i nivå med den lägsta punkten på textraden, t.ex så hamnar ju j, g q under baslinjen.
ALIGN=TOP
ALIGN=TEXTTOP 		TOP läger bilden i nivå med med den övre gränsen på den högsta "saken" på raden, TEXTTOP placerar bildens överkant i höjd med överkanten på den högsta bokstaven på raden.

Vi provar:

<IMG SRC="DEMO.GIF" HEIGHT=30 WIDTH=30 ALIGN=ABSMIDDLE>

Min lilla bild.

De bilder som används ska vara i formatet GIF eller JPEG. Bilder i GIF-format har högre bildkvalitet, men bilder i JPEG-format går fortare att ladda ned, en smaksak alltså.
Det finns också ett tilläggskommando för bilder som heter:

ALT="text"

Detta kommando används för att ha en alternativ text bakom bilden, för dem som har en web-läsare utan bildhantering, eller om man har stängt av Auto Load Images i Netscape.

Övriga tilläggskommandon:

ISMAP

Talar om att bilden är en imagemap, en bild som du kan klicka på och som har flera länkar till flera olika ställen. För att göra imagemaps så man speciella Imagemap-program. Vill du veta mer? Gå till Yahoo's sida med länkar om Imagemaps.

LOWSRC="URL"

När du skriver det här tillägget i IMG-taggen, betyder det att du kan ha en alternativ bild, som är t.ex. en hårt komprimerad version av originalbilden, som laddas ned först, så att den som ska titta på sidan får en uppfattning om vad det är för bild. Först när sidan är färdig, så laddas originalbilden ned.

BORDER=x

Om du använder bilden som en länk, kan det hända att du vill ta bort kanten, eller ändra tjockleken på den. BORDER=0 tar bort kanten helt, och sen blir kanten bredare ju högre siffra du skriver.

VSPACE=x

Om man låter en bild flyta bredvid texten, så används det här tilläggskommandot, för att bestämma det vertikala avståndet till texten.

HSPACE=x

Samma som ovan, men den här taggen bestämmer det horisontella avståndet.

Passagen Hjälp:  Abuse  Chat  Debatt  Driftinfo  Hemsida  Dejting  Medlemskap  Mejl