Lektion 3 - Länkar

En av finesserna med websidor är att man kan länka dem samman på ett sätt som är omöjligt i de flesta andra media. De flesta länkarna leder till en annan sida men det finns också länkar som leder till ett så kallat ankare (en annan plats i samma dokumentet). Slutligen finns det också länkar som leder till en e-mailadress.
Taggen som ordnar länkar är:<A> </A>. Mellan taggarna skrivs koden för det som ska utgöra länken. Det kan vara text eller en bild. Man kan också länka till fler saker än websidor. T ex bilder (då dyker endast bilden upp i webläsaren), komprimerade filer (då frågar webläsaren om du vill spara den), musik.

Länkar till andra dokument

För att berätta var länken ska leda använder du attributet HREF (HypertextREFerence). Ett enkelt exempel kan se ut så här:<A HREF="www.volvo.se">Volvos hemsida</A>
Du kan referera till en sida på två sätt. Absolut referens eller relativ referens. Absolut referens innebär att du anger hela adressen till dokumentet medan du i relativ referens anger hur dokumentet ligger i förhållande till sidan med länken.

Vi kan ta en budbärare som exempel. Ska du skicka honom till andra sidan staden med ett paket måste du ange en adress. Men ska han bara två trappor upp är det bättre att säga: "Du ska två trappor upp" än "Tistelvägen 43b fjärde våningen". Vi kan se referensen i HREF-attributet som en vägbeskrivning för webläsaren. I vissa fall är det lättare att berätta hela adressen och ibland en relativ adress. Låt oss se på några exempel. Vi har en filstruktur som ser ut så här:

Filträd

<A HREF="www.yoursite.se/index.html">En kompis hemsida</A> Absolut referens. Länkar till "vår" sida.

<A HREF="sida2.html">Gå till sida 2</A> Relativ referens. Länkar till filen sida2.html i samma katalog som sidan med länken.

<A HREF="bilar/ferrari.html">Gå till sida 2</A> Relativ referens. Länkar till filen ferrari.html i katalogen bilar.

<A HREF="../index.html">Gå till huvudsidan</A> Relativ referens. Länkar till filen index.html i katalogen under den aktuella. T ex från ferrari.html till index.html.

<A HREF="../bilder/volvo.gif">Se en bild på en volvo</A> Relativ referens. Länkar till filen volvo.gif i katalogen bilder som ligger i katalogen under den aktuella. T ex från ferrari.html till volvo.gif.

Länkar till andra ankare i dokumentet (Interna länkar)

Med interna länkar kan du skapa länkar som leder till olika avsnitt av ditt dokument. Låt säga att du gjort en websida med fakta om svenska statsministrar. Du kan då i början av dokumentet ha en klickbar lista över statsministrarna. Då du klickar på t ex Olof Palme leder den länken till avsnittet om Palme.
För att åstakomma en sådan länk måste du skriva två koder.

Länken
En intern länk är mycket lik en vanlig länk. Så här kan den se ut:
<A HREF="#palme">Olof Palme<A>
Du får nu en länk bestående av texten "Olof Palme" som leder till en annan plats i dokumentet. Denna plats kallas ankare och är i detta fallet "palme". För att visa webläsaren att det är frågan om en intern länk föregås ankarnamnet av ett "#".

Ankaret
Ankaret placeras på den punkten dit du vill att webläsaren ska hoppa. Taggen som lägger ut ankaret kan se ut så här:
<A NAME=palme>Olof Palme</A>
Här har attributet HREF byts ut mot attributet NAME som specifiserar ett ankarnamn. Namnet kan i princip se ut hur som helst. Försök dock undvika svenska tecken och andra specialtecken. Du får inte heller använda stora och små bokstäver hur som helst. Webläsaren skiljer på ankaret "Palme" och "palme".
Du har nu lagt ut ett ankare vid orden "Olof Palme". Ankaret kan också utgöras av t ex en bild.

Länkar till ankare i andra dokument

Man kan även göra en länk som leder till ett ankare i ett annat dokument. Titta på exemplet:
<A HREF="www.internetskola.se/huvud.html#avsnitt4">Gå till avsnitt 4</A>
Exempelkoden skapar en länk som leder till ankaret "avsnitt4" i filen huvud.html som hittas på servern www.internetskola.se.

E-post länk

En länk till en e-postlåda går enkelt att fixa. Så här skriver man: <A HREF="MAILTO:statsministern@rosenbad.se"> E-post till statsministern</A>
Om användaren klickar på länken kommer ett brev automatiskt upp med adressen ifylld. Många sidor har en MAILTO-länk i form av en bild på en postlåda. Istället för texten "E-post till statsministern" har man då infogat en bild.
Man kan dessutom ange vilket ärende (subject) som brevet ska få med koden:

<A HREF="MAILTO:statsministern@rosenbad.se?subject=hej">





  
    
      Huvud-

        meny
      Prov på

        lektionen
      Nästa

        lektion

<A HREF="www.yoursite.se/index.html">En kompis hemsida</A>	Absolut referens. Länkar till "vår" sida.
<A HREF="sida2.html">Gå till sida 2</A>	Relativ referens. Länkar till filen sida2.html i samma katalog som sidan med länken.
<A HREF="bilar/ferrari.html">Gå till sida 2</A>	Relativ referens. Länkar till filen ferrari.html i katalogen bilar.
<A HREF="../index.html">Gå till huvudsidan</A>	Relativ referens. Länkar till filen index.html i katalogen under den aktuella. T ex från ferrari.html till index.html.
<A HREF="../bilder/volvo.gif">Se en bild på en volvo</A>	Relativ referens. Länkar till filen volvo.gif i katalogen bilder som ligger i katalogen under den aktuella. T ex från ferrari.html till volvo.gif.