Länkar i HTML

Innehåll

Denna hemsida förklarar först begreppen URL och URI samt beskriver olika typer av URL:er. Därefter beskrivs hur taggen för länkar ser ut och några av de vanligast förekommande typer av länkar som finns.

• Begreppen URL och URI
• Typer av URL:er
• Länkar till (HTML-)dokument
• Andra typer av länkar
• Länkar inom dokument
• Bilder som länkar

URL - Uniform Resource Locator

En adress till en specifik resurs (dokument) på en specifik webbserver. Vad URL:er kan bestå av, och hur de fungerar, beskrivs på resten av denna hemsida.

URI - Universal Resource Identifier

En form av generell URL. Tanken är att man (i framtiden?) ska kunna begära ett dokument utan att behöva tala om var dokumentet finns. Om dokumentet har replikerats till flera webbservrar så ska någon form av val, dock ej av användaren av webbläsaren, ske för att ladda någon av de replikerade dokumenten.

Innan vi kan börja titta på hur taggen för länkar fungerar så ska vi titta på lite olika typer av URL:er som används i taggen. Vi börjar med att titta på URL:ens delar.

URL:er kan anges på lite olika sätt men alla består av en eller flera av följande delar (som förklaras nedan):

protokoll

- vilken typ av tjänst som ska begäras från webbservern. Vanligast är "http:", d.v.s. att vi vill ha en hemsida. Men även andra finns såsom "ftp:", "nntp:" och "mailto:" (vilka förklaras längre ner på hemsidan). Protokoll kan ofta utelämnas då t.ex. webbläsare ofta förutsätter att det är HTTP-protokollet som ska användas.
 

webbadress

- adressen till webbservern, t.ex. "//www.kiltedviking.net".
 

port

nummer på den port som server svarar på. En dator kan ha flera (mjukvaru-)servrar som exekverar samtidigt. T.ex. kan datorn ha både webbserver och e-postserver igång. För att veta vilken server som klienten begär något från så används s.k. portar. En webbserver brukar svara på port 80, FTP-server på port 21, o.s.v.. Porten kan oftast utelämnas då både webbservrar och webbläsare brukar använda port 80 som standard.
 

sökväg

sökvägen på server till dokumentet som ska visas, t.ex. "/se/www/". Sökvägen i en URL motsvaras ofta av sökvägen i datorns filsystem (dock oftast med start en bit ner i filsystemets hierarki). T.ex. så är sökvägen i filsystemet till "/se/www/" på webbservern "//www.kiltedviking.net" "/home/kiltedviking/public_html/se/www/" (på mitt webbhotells Linux-server).
 

fil.ext

- filnamnet med filändelse (extension) för dokumentet som ska visas, t.ex. index.html.
 

param

eventuella parametrar som ska skickas. Kallas för frågesträng (eng. query string) och består av en eller flera namn/värde-par, t.ex. ?fornamn=Benny&efternamn=Olsson.
 
Parametrar skickas bl.a. från formulär men kan även "hårdkodas" in i en länks URL. Parametrar behandlas mer på hemsidan om formulär.

Några exempel på länkar är

http://www.kiltedviking.net/

URL som pekar på Kilted Vikings startsida.
 

http://www.kiltedviking.net:80/se/www/index.html

URL som pekar på min studiewebb och som talar om att port 80 ska användas (vilket egentligen är onödig information om vi använder en webbläsare då den använder port 80 som standard).

URL:er, och skillnaden mellan URL:er, kan var lite klurigt att reda ut. Men i detta stycke ska jag försöka beskriva olika typer av URL:er samt när, och varför, de kan vara intressanta att använda. Jag utgår ifrån att det finns tre huvudsakliga typer av URL:er (i länkar) och de är:

• fullständiga
• absoluta
• och relativa

Alla kan även innehålla paramerar (eng. query string).

Består av

• protokoll
• webbadress
• sökväg
• och eventuellt även filnamn.

En fullständig URL används oftast då (X)HTML-dokument (som hänvisas till) finns på en annan webbserver (än den som dokument med länken finns på). Exempel på en fullständig adress är:

http://www.kiltedviking.net/se/www/index.html

Ibland kan man utelämna filnamnet, t.ex. om (X)HTML-dokumentet är standarddokumentet på webbservern - d.v.s. den fil som ska visas om inget filnamn angavs. T.ex. så är index.html standarddokumentet på min webbplats och adressen ovan kan därför även skrivas enligt följande:

http://www.kiltedviking.net/se/www/

Består endast av

• sökväg
• och eventuellt filnamn.

Denna typ av URL:er används om (X)HTML-dokumentet finns på samma webbserver (som dokument med länken). Absoluta URL:er utgår alltid från roten på webbservern ("/"). En hemsida på webbservern www.kiltedviking.net kan m.a.o. använda någon av följande URL:er till samma dokument som i exemplet ovan med fullständiga URL:er:

/se/www/index.html
/se/www/

Den första länken säger att webbläsaren ska fråga efter en fil med namnet index.html i sökvägen /se/www/. Mappen se ska finnas i roten på webbservern och mappen www i mappen se. För den andra länken gäller samma sak men att standarddokumentet för webbservern ska begäras istället för just filen index.html.

Består av

• eventuell sökväg
• och/eller eventuellt filnamn

men utan det inledande snedstrecket ("/"). Även denna typ av URL förutsätter att (X)HTML-dokumentet finns på samma webbserver (som dokumentet med länken). URL:erna utgår från samma mapp (där dokumentet med länken finns) när den avgör var det andra dokumentet finns. T.ex. så finns (fanns) det en fil som heter informatik.shtml i sökvägen /personal/ på (tidigare) webbservern www.eki.mdh.se. I denna fil finns (fanns) en länk till min (tidigare) personliga hemsida index.html (d.v.s. i sökvägen /personal/bpn/), vilket ger den relativa URL:en:

bpn/index.html

Länken säger att webbläsaren ska fråga efter en fil med namnet index.html som finns i mappen bpn som ligger i samma mapp (som dokumentet med länken).

Om vi söker filer i mappar som ligger i en annan del av mapphierarkin (för webbservern) så kan vi använda oss av sökvägar som "./" och "../". Nedanstående (3) exempel försöker visar på hur dessa sökvägar fungerar.

Mer om relativa länkar - Exempel 1

Relativa länkar kan även användas för att hänvisa till ett dokument som ligger längre (högre) upp i filsystemets mapphierarki. Om vi har följande mapphierarki på webbservern: (/ är roten på webbserverns mapphierarki i filsystemet.)

/
  mapp1
    mapp1_2
      sida1_2_1.html
      sida1_2_2.html
  mapp2
    mapp2_1
    mapp2_2
    sida2.html
  mapp3
index.html

så skulle en länk från filen sida1_2_1.html till filen sida1_2_2.html bli

<a href="./sida1_2_2.html">Sida 2 i mapp</a>

eller bara

<a href="sida1_2_2.html">Sida 2 i mapp</a>

I den första länken betyder punkten att vi ska börja leta i samma mapp som filen med länken (sida1_2_1.html) finns i. Därefter följer resten av sökvägen till den andra filen (sida1_2_2.html), d.v.s. /sida1_2_2.html. Men eftersom vi ibland kan använda en del genvägar i sökvägar så kan vi utelämna "./" (som i andra exemplet ovan) eftersom filen som länken hänvisar till finns i samma mapp.

Om vi vill ha en länk från filen sida1_2_1.html till startsidan (index.html) blir URL:en

<a href="../../index.html">Till startsida</a>

eller, om index.html är standardfil,

<a href="../../">Till startsida</a>

Filen sida1_2_1.html finns i mappen mapp1_2 och vi vill länka till en mapp två nivåer upp. För att länka till en mapp en nivå upp så blir sökvägen "../", och eftersom vi vill två nivåer upp så blir sökvägen "../../".

Eftersom startsidan finns i roten på webbservern så skulle vi lika gärna ha kunnat använda den absoluta sökvägen "/".

Om vi vill länka från filen sida1_2_1.html till sida2.html så blir koden

<a href="../../mapp2/sida2.html">Till sida 2</a> i 
  mapp 2

Här betyder sökvägen "flytta upp två nivåer och sen ner en nivå till mapp2".

Fullständiga URL:er bör man försöka undvika så mycket som möjligt. Givetvis går inte detta om dokumentet man vill länka till finns på en annan webbserver. :-) Men genom att försöka att endast använda absoluta eller, helst av allt, relativa URL:er så är det lättare att flytta en samling med hemsidor.

De hemsidor du läser på just nu använder t.ex. endast relativa URL:er. Detta gör att jag kan "replikera" dessa hemsidor till de (ca 5) webbservrar (jag kopierat filerna till) utan att anpassa alla länkar till respektive webbserver. Nu ska det nämnas att jag inte har så många länkar som går kors och tvärs - alla exempeldokument t.ex. har inga länkar tillbaka till hemsidan som öppnade dem.

Om hemsidan man länkar till finns på samma server bör man först försöka använda relativa URL:er och sist absoluta URL:er. På så sätt kan man (kanske) flytta en samling med hemsidor inom eller till annan webbplats utan att behöva redigera länkarna.

För att skapa en länk använder man taggen <a> (eng. anchor) och anger vart länken ska "peka" i attributet href. Den synliga delen av länken (t.ex. den understrukna blåa texten) placeras som innehåll för elementet, d.v.s. mellan öppnande och avslutande tagg.

Om vi vill länka till ett andra (X)HTML-dokument, sida2.html, i samma mapp (som (X)HTML-dokumentet med länken finns i) så blir koden följande:

<a href="sida2.html">Till andra sidan</a>

eller

<a href="sida2.html">Till</a> andra sidan

Resultatet blir

Till andra sidan eller Till andra sidan.

I.o.m. XHTML så är inte attributet target längre giltigt i taggen <a>. Men istället kan man använda JavaScript. (Se Öppna länk i nytt fönster.)

Andra typer av länkar är de som startar e-postprogram med t.ex. e-postadress med nytt meddelande och redan ifyll e-postadress till mottagaren. Det kan också vara länkar till filer via FTP och diskussionsgrupper (news).

Observera att länkar till e-postadresser endast fungerar om besökaren angivit e-postprogram i webbläsaren!

<html>
<head>
  <title>L&auml;nkar till annat</title>
</head>
<body>

<p><a href="mailto:bjorn.persson@mdh.se">Skicka e-post 
  till mig Bj&ouml;rn</a></p>

<p><a href="mailto:bjorn.persson@mdh.se?subject=Tjaba!">Skicka e-post till mig Bj&ouml;rn med &auml;mnet Tjaba!</a></p>

<p>Klicka p&aring; l&auml;nkarna ovan f&ouml;r 
  att se resultatet..</p>

</body>
</html>

För att kunna hoppa inom ett dokument så markerar vi även, den plats vi vill hoppa till, med taggen <a> - vi skapar ett "bokmärke" i dokumentet. Men istället för att använda attributet href använder vi attributet name. Observera att den avslutande taggen behövs även om taggen saknar innehåll!

<a name="nagonstans"></a>

<a name="nagonstans">Detta är någonstans</a>

För att länka till ett "bokmärke" i samma dokument som länken så blir koden följande.

<a href="#nagonstans">Till</a> någonstans

Om vi vill länka till ett "bokmärke" i ett annat dokument så lägger vi till namnet på "bokmärket" (med #-tecknet) efter dokumentets namn enligt följande.

<a href="index.html#nagonstans">Någonstans</a> i 
  annat dokument.

<html>
<head>
  <title>L&auml;nkar inom dokument</title>
</head>
<body>

<p><a href="#nagonstans">Till n&aring;gonstans i dokumentet</a></p>

<p><a href="annat.htm#nagonstans">Till n&aring;gonstans i annat dokument</a></p>

<p><a name="nagonstans">H&auml;r finns texten som l&auml;nkas till ovan.</a></p>

</body>
</html>

Vi kan även använda ikoner (GIF-bilder) och bilder (JPG-bilder) som länkar. Istället för att skriva text mellan den öppnade och avslutande taggen så placerar vi img-taggen där. Som standard får ikonerna (och bilderna) en blå kantlinje kring sig för att markera att det är en länk. Vill vi bli av med kantlinjen så måste vi i.o.m. XHTML använda CSS.

<html>
<head>
  <title>Bilder som l&auml;nkar</title>
</head>
<body>
<p>Bild som l&auml;nk (med kantlinje).</p>
<p><a href="index.htm"><img src="bild.jpg"></a></p>
</body>
</html>