Lektion 4


Länkar

En av de saker som gör hemsidor så spännande är att man kan placera länkar från en sida till en annan och på det sättet hoppa mellan olika sidor. Du kan till exempel göra en länk från en sida i Sverige till en sida i Australien. Det enda som krävs är att du har adressen till den sida du vill länka till. Man kan naturligtvis även göra länkar mellan egna sidor, eller till och med inom en sida. Det går att använda länkar till annat också. Vi ska snart titta på det.


Vilka är våra favoritlänkar? iFokus och Aktieguiden är ganska bra. Då behöver vi veta vilka adresser, eller URL:er (Uniform Resource Locator), de har. iFokus har www.ifokus.se och Aktieguiden har www.aktieguiden.com. Länken till iFokus blir:

<A HREF="http://www.ifokus.se">iFokus</A>

Vi måste skriva http:// före adresserna. Vad betyder detta? Länkar har koden <A>. HREF (Hypertext REFerence) talar om vilken typ av länk det är, nämligen en hyperreferens till en annan sida. Efter adress-koden talar du om vad det ska stå på länken: iFokus. Sedan avslutar vi länken med </A>. Det var väl inte så svårt? Nu ska vi skapa länken till Aktieguiden. Vi börjar med att tala om vilken typ av länk vi vill göra:

<A HREF=

Sedan anger vi adressen till Aktieguiden:

<A HREF="http://www.aktieguiden.com">

Vad ska ska det stå på länken?

<A HREF="http://www.aktieguiden.com"> Aktieguiden

Och avslutningskoden:

<A HREF="http://www.aktieguiden.com"> Aktieguiden</A>

Klart! Nu lägger vi till dem på hemsidan:

<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>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.ifokus.se">iFokus</A>
<A HREF="http://www.aktieguiden.com"> Aktieguiden</A>
</P>
</CENTER>
<HR WIDTH="100%" />
</BODY>
</HTML>

Visst är det trevligt att få post! Därför ska vi lägga till en e-postlänk, så att den som besöker hemsidan kan skicka några rader. Allt vi behöver är din e-postadress. Här använder vi ingenreklam@bokstavligt.com. Vi bygger upp länken steg för steg:

<A HREF=

Inga konstigheter så långt. Vi går vidare:

<A HREF="mailto:

Vänta nu, vad var det där? Jo, mailto: talar om att webb-läsaren ska öppna sin e-post-funktion. Nu måste vi tala om vem vi vill skicka e-post till:

<A HREF="mailto:ingenreklam@bokstavligt.com">

Vad ska det stå på länken? För tydlighetens skull skriver vi e-postadressen:

<A HREF="mailto:ingenreklam@bokstavligt.com"> ingenreklam@bokstavligt.com</A>

Jag lade till slutkoden </A> på en gång. Du vet ju hur det fungerar nu. Vi sätter in den här raden och lite formatering på hemsidan:

<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>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.ifokus.se">iFokus</A>
<A HREF="http://www.aktieguiden.com"> Aktieguiden</A>
</P>
</CENTER>
<HR WIDTH="100%" />
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:ingenreklam@bokstavligt.com"> ingenreklam@bokstavligt.com</A>
</FONT>
</CENTER>
</BODY>
</HTML>

Spara dokumentet under namnet lektion4.htm. I nästa lektion ska vi använda bilder. Så här ser sidan från den här lektionen ut nu.

Lektion 4 - HTML på svenska

Klicka för att förstora