Lektion 9


Tips & tricks

Bakgrundsbilder

Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt är att använda bakgrundsbilder. Vi behöver en bild:

 Rand

Enkel, men den duger i utbildningssyfte. HTML-koden för bakgrundsbilder är ganska lik den för bakgrundsfärg.

BACKGROUND="rand.gif"

Du talar helt enkelt om vilken bild du vill ha som bakgrund. Om bilden inte ligger i samma katalog som HTML-dokumentet måste du ange sökvägen till bilden också, till exempel BACKGROUND=”bild/rand.gif” om bilden ligger i en underkatalog som heter bild.

Nu lägger vi till koden i dokumentet från lektion 6:

<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<CENTER>
<BODY BACKGROUND="rand.gif" BGCOLOR="#7DBDE3"
TEXT="#000000" LINK="#0000FF" VLINK="#333333" ALINK="#FFFF80">
<TABLE WIDTH="900">
<TR>
<TD>
<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>
<P>
<CENTER>
<TABLE BORDER=2 WIDTH="80%">
<TR>
<TH COLSPAN=2>Fler favoritlänkar:</TH>
</TR>
<TR>
<TD>
<A HREF="http://www.bokstavligt.com/"> Bokstavligt Förlag </A>
</TD>
<TD>
Ger ut fackböcker, exempelvis HTML på svenska och Sökmotoroptimering.
</TD>
</TR>
<TR>
<TD>
<A HREF="http://www.tongoys.com/">Tongoys</A>
</TD>
<TD>
Leksaken vuxna önskar fanns när de var små.
En bra anledning att skaffa barn. :-) 
</TD>
</TR>
</TABLE>
</CENTER>
</P>
<HR WIDTH="100%" />
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:ingenreklam@bokstavligt.com"> ingenreklam@bokstavligt.com</A>
</FONT>
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Som du ser ska BACKGROUND ligga innanför samma <> som BODY. Tänk på att stora bakgrundsbilder tar längre tid att läsa in. Så här ser vår hemsida ut nu.

Lektion 9 - HTML på svenska

Klicka för att förstora

Specialtecken – character entities

Å, ä och ö är specialtecken som ingår i den svenska teckenuppsättningen, men som inte finns i till exempel den amerikanska. Det betyder att specialtecken kommer att visas som helt andra tecken hos dem som har en annan tecken-uppsättning än vi. Därför finns det HTML-koder (character entities) som vi kan (bör) använda i stället för specialtecken. Koden för å är &aring;. Man skiljer på stora och små bokstäver: Å heter &Aring;. Här är en lista med fler character entities:

Tecken

Character entity

å

&aring;

Å

&Aring;

ä

&auml;

Ä

&Auml;

ö

&ouml;

Ö

&Ouml;

<

&lt;

>

&gt;

&

&amp;

&quot;

æ

&aelig;

Æ

&AElig;

ø

&oslash;

Ø

&Oslash;

©

&copy;

Det finns fler, men detta är några av de mest användbara med svensk teckenuppsättning. Att ersätta specialtecken med character entities kan vara ganska tidsödande. Det är faktiskt ett jobb som en enkel ordbehandlare eller texteditor kan hjälpa till med. De flesta ordbehandlare och texteditorer har en funktion som heter någonting i stil med “sök & ersätt” (find & replace). Den kan man använda till att säga “sök alla å och ersätt med &aring;” och så vidare. Då går det ganska fort. Den som är duktig på att bygga makron i ordbehandlare kan lätt sätta ihop ett makro som ersätter alla specialtecken med character entities.

Glöm inte inte att ändra alla specialtecken på din hemsida! Vi gör det på vår sida. Då ser koden ut så här:

<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BACKGROUND="rand.gif" BGCOLOR="#7DBDE3"
TEXT="#000000" LINK="#0000FF" VLINK="#333333" ALINK="#FFFF80">
<CENTER>
<TABLE WIDTH="900">
<TR>
<TD>
<CENTER>
<H1>V&auml;lkommen till min hemsida!</H1>
</CENTER>
<HR WIDTH="100%" />
<P>
<FONT SIZE=4>
Det h&auml;&auml;r mitt f&ouml;rsta f&ouml;rs&ouml;k att g&ouml;ra en
egen hemsida. Ju mer jag l&auml;r mig, desto b&auml;ttre kommer sidan att
bli. Ha lite t&aring;lamod s&aring; blir du rikligt bel&ouml;nad!
</FONT>
</P>
<P>
<CENTER>
<H4>H&auml;&auml;r mina idoler:</H4>
<P>
<IMG SRC="vacker.jpg" ALT="Sk&ouml;nheter" BORDER=1>
</P>
</CENTER>
</P>
<CENTER>
<H4>Mina favoritl&auml;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>
<P>
<CENTER>
<TABLE BORDER=2 WIDTH="80%">
<TR>
<TH COLSPAN=2>Fler favoritl&auml;nkar:</TH>
</TR>
<TR>
<TD>
<A HREF="http://www.bokstavligt.com/">
Bokstavligt F&ouml;rlag </A>
</TD>
<TD>
Ger ut l&auml;rob&ouml;cker, exempelvis HTML p&aring; svenska och
S&ouml;kmotoroptimering.
</TD>
</TR>
<TR>
<TD>
<A HREF="http://www.tongoys.com/">Tongoys</A>
</TD>
<TD>
Leksaken vuxna &ouml;nskar fanns n&auml;r de var sm&aring;. En bra
anledning att skaffa barn. :-) 
</TD>
</TR>
</TABLE>
</CENTER>
</P>
<HR WIDTH="100%" />
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:ingenreklam@bokstavligt.com"> ingenreklam@bokstavligt.com</A>
</FONT>
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Listor

Ibland vill man ställa upp saker i punktform. Det finns några funktioner i HTML som är till för just det. Börja med att tala om att du vill göra en punktlista. Det gör du med <UL> (unnumbered list). Starta varje listrad med <LI> (list item) och avsluta dem med</LI>. Vi gör en enkel lista:

<UL>
<LI>Rad ett i vår lista</LI>
<LI>Rad två i vår lista</LI>
<LI>Rad tre i vår lista</LI>
<LI>Och så vidare ...</LI>
</UL>

Så här ser ovanstående ut:

  • Rad ett i vår lista

  • Rad två i vår lista

  • Rad tre i vår lista

  • Och så vidare …

Nu gör vi samma sak, men byter ut <UL> mot <OL> så att vi får en numrerad lista (ordered list):

<OL>
<LI>Rad ett i vår lista</LI>
<LI>Rad två i vår lista</LI>
<LI>Rad tre i vår lista</LI>
<LI>Och så vidare ...</LI>
</OL>

Det ser ut så här när du är färdig:

  1. Rad ett i vår lista

  2. Rad två i vår lista

  3. Rad tre i vår lista

  4. Och så vidare …

Vi går vidare och gör en lista med flera nivåer. Det går till på det viset att vi lägger flera listor i varandra:

<OL>
<LI>Rad ett i första nivån<LI>
<LI>Rad två i första nivån<LI>
<UL>
<LI>Rad ett i andra nivån<LI>
<LI>Rad två i andra nivån<LI>
</UL>
</OL>

Lägg märke till att den andra listan ligger före den första listans avslutande </OL>. Så här ser den ut:

  1. Rad ett i första nivån

  2. Rad två i första nivån

  • Rad ett i andra nivån

  • Rad två i andra nivån

Det finns en del andra sätt att definiera listor, men vi nöjer oss med det vi har gått igenom. Det kommer du långt med.

Interna länkar

I stora sidor är det ofta bra att kunna hoppa snabbt mellan olika ställen inom sidan. Det gör du med interna länkar. För att kunna hoppa till ett ställe inom sidan måste du sätta ett så kallat “ankare” på den plats du vill kunna hoppa till. Ett ankare kan se ut till exempel så här:

<A NAME="ankare">

Byt ut ankare mot vilket namn du vill så länge det bara används en gång på samma sida. När du har ett ankare är det lätt att göra en länk till den platsen på sidan:

<A HREF="#ankare">

# betyder att länken refererar till ett ankare. Interna länkar kan även användas för förflyttning från en sida till ett namngivet ställe på en annan sida. En sådan länk kan se ut så här:

<A HREF="annan_sida.htm#ankare">

Eller om den ligger i en annan domän:

<A HREF="http://annan.domän.se/annan_sida.htm#ankare">

Ett bra användningsområde är innehållsförteckningar. Där kan du göra länkar från de olika innehållsposterna till rätt plats på sidan.

Nu har vi gått igenom alla lektionerna. Vill du lära dig mer föreslår jag att du fortsätter med fördjupningsavsnitten. Annars kan du lära dig hur du tjänar pengar på din hemsida:

Tjäna pengar på din blogg