Bilder på hemsidan

©ilj@flowsim.se
BILDER
iMG-taggen
<img src ="bild.fil">

Om bildfilen ligger i samma katalog som HTML-filen skriver man helt enkelt, på det ställe där man vill ha bilden, så här:

<IMG SRC ="svart.gif">

Och så här ser det ut:

Om du skriver koden i XHTML ska bildtaggarna alltid sluta med /> och se ut så här:

<IMG SRC ="svart.gif" />

(mer om skillnaden mellan HTML och XHTML finns under huvudrubriken HTML)

Den HTML-kod som behövs för en enkel hemsida med en bild mitt på sidan och lite text under bilden ser alltså ut så här:

<HTML>
<HEAD>
<TITLE>sidans titel</TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC ="svart.gif">
<BR>
text under bilden
</CENTER>
</BODY>
</HTML>

Om man vill snabba upp nedladdningstiden och framför allt få all text på plats så snabbt som möjligt, bör man också skriva ut bildernas WIDTH (bredd) och HEIGHT (höjd). Så här skriver man:

<IMG SRC ="svart.gif"
WIDTH ="30"
HEIGHT ="30">

Så här ser det ut:

Om man öppnar bildfilen i ett ritprogram, t ex Paint Shop Pro, och för muspekaren över bilden kan man se bildens bredd och höjd i fönstrets underkant. Exempelbildens bredd och höjd är 30 pixel.

Man kan också ange text som alternativ till bilden. Det innebär att webbläsare som inte klarar av att visa bilder i stället visar texten. I webbläsare som klarar av att visa bilder visas texten medan bilderna håller på att laddas. I många webbläsare syns den här texten också när man för muspekaren över bilden. Så här skriver man:

<IMG SRC ="svart.gif"
WIDTH ="30"
HEIGHT ="30"
ALT ="en svart triangel">

Och så här ser det ut (testa med muspekaren om det händer något):

Man kan förse bilden med en ram; siffran efter BORDER bestämmer ramens bredd (i pixel):

<IMG SRC ="svart.gif"
WIDTH ="30"
HEIGHT ="30"
ALT ="en svart triangel"
BORDER ="1">

Här följer några olika sätt att placera bilder.

1 Så här ser det ut:

så här gör man om man vill placera en bild

mitt i text text text text text text text text text text text text text text text text text text text text text text

1 Och så här skriver man:

så här gör man om man vill placera en bild
<IMG SRC ="svart.gif"> mitt i text text text text text text text text text text text text text text text text text text text text text text

2 Så här ser det ut:

så här gör man om man vill placera en bild

mitt i text text text text text text text text text text text text text text text text text text text text text text

2 Och så här skriver man:

så här gör man om man vill placera en bild
<IMG SRC ="svart.gif" ALIGN ="top"> mitt i text text text text text text text text text text text text text text text text text text text text text text

3 Så här ser det ut:

så här gör man om man vill placera en bild

mitt i text text text text text text text text text text text text text text text text text text text text text text text text text text

3 Och så här skriver man:

så här gör man om man vill placera en bild
<IMG SRC ="svart.gif" ALIGN ="right"> mitt i text text text text text text text text text text text text text text text text text text text text text

4 Så här ser det ut:

så här kan man göra om man vill ha tomrum över

och under bilder

4 Och så här skriver man:

så här kan man göra om man vill ha tomrum över<BR>
<IMG SRC ="svart.gif"
VSPACE ="30">
<BR> och under bilder

Man kan också använda stilmallar för att bestämma var en bild ska placeras, hur mycket tomrum som ska omge den och om den ska förses med en ram eller inte. Exempel:

<IMG SRC ="svart.gif" STYLE=" border:1px solid black">

Allt om det under STYLESHEETS

Mer om bilder på hemsidan:

klickbara bilder 1 - om hur man gör en bild klickbar

klickbara bilder 2 - om hur man gör olika delar av en bild klickbara (image maps)

Sidan gjordes av

ilj@flowsim.se

Senast ändrad 22 mars 2004.

Den här sidan hör hemma i ett tredelat ramsystem
hos:
http://www.flowsim.se
Bilder på hemsidan