Lektion 5


Bilder

Lite bilder kan lätta upp en hemsida. För att du ska kunna visa en bild på hemsidan bör den vara i antingen gif-, jpg- eller png-format. Ju större en bild är, desto längre tid tar det att ladda in den. Gif-bilder 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. Png-bilder kan också göras genomskinliga. Vi ska tala mer om bilder senare. Här är några bilder vi kan använda till hemsidan:

Tre skönheter

Aktieguiden  iFokus

HTML-koden för de tre skönheterna på översta bilden ä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) heter vacker.jpg. Du 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 du kanske är van vid från en del datorer. BORDER=1 betyder att vi vill ha en ram som är 1 pixel bred runt bilden. Om du inte vill ha någon ram skriver du BORDER=0.


En del har webbläsare som inte kan visa bilder, exempelvis synskadade som använder skärmläsare. 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. Du måste inte använda ALT, men det är hövligt att göra det. Dessutom är det bra för sökmotorer, som inte heller kan se vad bilder föreställer.

Vi lägger till bilderna på hemsidan från lektion 4:

<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#7DBDE3" TEXT="#000000"
LINK="#0000FF" VLINK="#333333" ALINK="#FFFF80">
<CENTER>
<H1>Välkommen till min hemsida!</H1>
</CENTER>
<HR WIDTH="100%" />
<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å blir du rikligt belönad!
</FONT>
</P>
<P>
<CENTER>
<H4>Här är mina idoler:</H4>
<P>
<IMG SRC="vacker.jpg" ALT="Skönheter" BORDER=1>
</P>
</CENTER>
</P>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.ifokus.se">
<IMG SRC="ifokus.gif" ALT="iFokus" BORDER=0>
</A>
<A HREF="http://www.aktieguiden.com">
<IMG SRC="aktieguiden.gif" ALT="Aktieguiden" BORDER=0></A>
</P>
</CENTER>
<HR WIDTH="100%" />
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:ingenreklam@bokstavligt.com"> ingenreklam@bokstavligt.com</A>
</FONT>
</CENTER>
</BODY>
</HTML>

Jag bytte ut texterna iFokus och Aktieguiden mot koden för bilderna. Det betyder att bilderna fungerar som länkar. När man klickar på bilderna blir man skickad till iFokus eller Aktieguidens hemsidor. Det är väl snyggt?

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

 

Lektion 5 - HTML på svenska

Klicka för att förstora

Ålrajt, nu börjar det se ut som en riktig hemsida! Vi fortsätter till lektion 6.