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.

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

En URL (Uniform Resource Locator) är en adress till en resurs (t.ex. HTML-dokument), t.ex. adressen till denna sida nedan.

https://kiltedviking.net/se/www/html/del3.html

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://värdnamn:port/sökväg/fil.ext?param

protokoll

- vilken typ av tjänst som ska begäras från webbservern. Vanligast är https:, 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.

värdnamn

- adress till webbserver, 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 denna fil på webbserver, /se/www/html/del3.html, något i stil med /home/kiltedviking/public_html/se/www/html/del3.html i filsystemet (om i Linux).

fil.ext

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

param

eventuella parametrar som ska bifogas. 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å URL:er

Startsida för webbplatsen Kilted Viking (min webbplats).

https://www.kiltedviking.net/

Startsida för Björns studiewebb samt inkluderar protokoll (https:), port (80) och fil (index.html). Protokoll och port kan utelämnas då webbläsare och -server lär använda dessa protokoll och port som standard samt fil utelämnas då då webbserver letar efter fil med namnet index.html om filnman utelämnas.

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

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å 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:

Ibland kan man utelämna filnamnet, t.ex. om 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:

Består endast av

• sökväg
• och eventuellt filnamn.

Denna typ av URL:er används om 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 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:

html/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_2_1.html
  mapp3
  index.html

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

eller bara

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

eller, om index.html är standardfil,

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_2_1.html så blir koden

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 HTML-dokument, sida2.html, i samma mapp (som HTML-dokumentet med länken finns i) så blir koden som i exempel till höger (eller nendan).

Kod

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

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

Resultat

Till andra sidan

Till andra sidan.

Attribut

href

Adress till destination som ska navigeras till vid klick på länk.

Fler attribut

target

Hur ny webbsida ska öppnas. Vanligast är värdet _blank för att öppna i nytt fönster/flik och standard är _self.

rel

Relation mellan dokument med länk i och destinationen. Ett praktiskt värde för länkar till obetrodda sidor är noopener för att ange att det inte finns någon relation mellan dokumenten samt att inget "webbläsarkontext" ska bifogas till destination (något som verktyg som Googles Lighthouse tidgare rekommenderar). (Värdet noopener är överflödigt om attributet target har värdet _blank.)

(Tidigare, länkar hade ett attribut name som används som en destination, d.v.s. en namngiven plats i dokument, vilket inte längre kan användas. Använd istället attributet id på t.ex. en rubrik eller annat element att länka till.)

Kod

<a href="ny_sida.html">Ny sida</a>
<a href="nytt_fonster.html"
  target="_blank">Nytt fönster</a>
<a href="orelaterad_sida.html"
  rel="noopener">Orelaterad sida</a>

<a href="https://kiltedviking.net/se/www/index.html">Till
  Bj&ouml;rns studiewebb - fullst&auml;ndig 
  s&ouml;kv&auml;g</a>

<a href="/se/www/index.html">Till Bj&ouml;rns studiewebb -
  absolut s&ouml;kv&auml;g</a>

<a href="../index.html">Till Bj&ouml;rns studiewebb - relativ
  s&ouml;kv&auml;g</a>

Första länken fungerar alltid. Men övriga l&auml;nkarna fungerar endast om dessa hemsidor finns på webbservern kiltedviking.net.

(I XHTML togs attributet target bort, men i HTML 5 så ansågs attributet OK igen.)

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!

För att kunna hoppa inom ett dokument så markerar vi en tagg på plats vi vill hoppa till med attributet id - vi skapar ett "bokmärke" i dokumentet.

<h2 id="nagonstans">Någonstans i ett
  dokument</h2>

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">Till</a>
  någonstans i annat dokument.

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.

(Tidigare fick ikonerna/bilderna en blå kantlinje kring sig för att markera att det är en länk, men så är inte längre fallet.)

Kod

<a href="index.html">
  <img src="WadeBridge.jpg" width="195"
    height="147" alt="Bro byggd av ...">
</a>

Resultat