Lite bilder kan lätta upp en hemsida. För att du ska kunna visa en bild på hemsidan måste den vara i antingen gif- eller jpg-format. Jpg-bilder är bra på det sättet att de är relativt små. Ju större en bild är, desto längre tid tar det att ladda in den. Gif-bilder är något större än jpg-bilder, men har den fördelen att de kan göras "genomskinliga" och man kan spara dem i ett sådant format att de laddas in gradvis med högre och högre upplösning (interlaced gif). Det är bra eftersom man kan se vad bilden föreställer redan innan den är helt laddad. Jag har några bilder vi kan använda:

HTML-koden för bilden av de tre skönheterna är:

<IMG SRC="vacker.jpg" BORDER=1>

IMG (image) talar om att vi vill visa en bild. SRC (source) talar om att källan (bilden) är "vacker.jpg". Man måste ange sökvägen till bilden om den inte ligger i samma katalog som den HTML-sida som anropar den. Om "vacker.jpg" hade legat i en underkatalog som heter "bilder" skulle koden ha blivit:

<IMG SRC="bilder/vacker.jpg" BORDER=1>

Observera att snedstrecket (/) ska luta framåt och inte bakåt som man kanske är van vid från DOS-miljö! BORDER=1 betyder att vi vill ha en ram som är 1 punkt bred runt bilden. Om vi inte vill ha någon ram skriver vi BORDER=0.

En del har Internetläsare som inte kan visa bilder. För att de ändå ska veta vad en bild föreställer kan vi hjälpa dem genom att lägga till lite kod:

<IMG SRC="bilder/vacker.jpg" ALT="Skönheter" BORDER=1>

ALT (alternative) gör att de som inte kan se bilden i stället ser den alternativa texten. Man måste inte använda ALT, men det är hövligt att göra det.

Vi lägger till bilderna på hemsidan:

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
Det här är mitt första försök att 
göra en egen hemsida. Ju mer jag lär mig , desto 
bättre kommer sidan att bli. Ha lite tålamod 
så kommer du att bli rikligt belönad!
</FONT>
<P>
<CENTER>
<H4>Här är mina idoler:</H4>
<P>
<IMG SRC="vacker.jpg" ALT="Skönheter" BORDER=1>
</CENTER>
<P>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.netscape.com">
<IMG SRC="netscape.gif" ALT="Netscape" BORDER=1></A>
<P>
<A HREF="http://www.microsoft.com">
<IMG SRC="microsft.gif" ALT="Microsoft" BORDER=1></A>
</CENTER>
<HR WIDTH="80%">
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:toytiger@swipnet.se">toytiger@swipnet.se</A>
</FONT>
</CENTER>
</BODY>
</HTML>

Jag bytte ut texterna "Netscape" och "Microsoft" mot koden för bilderna! Det betyder att bilderna fungerar som länkar. När man klickar på bilderna blir man länkad till Netscapes eller Microsofts hemsidor! Det är väl snyggt?

Spara sidan under namnet "lektion5.html" och titta hur den ser ut.

Nu börjar det se ut som en riktig hemsida!