HTML länkar

HTML använder hypertextlänkar för att gå från en sida till en annan.

Exempel:

Elementet <a>

Till hypertextlänkar används elementet <a>, som står för ”ankare”. Dessa länkar kan peka till en annan HTML sida, en bild, en ljudfil, en film etc.

HTML kod

<a href="url">text att klicka på...</a>
<a href="url"><img src="bild.jpg"  /></a>

Attributet ”href” används för att ange var länken ska peka och innehållet mellan taggarna <a> och </a> är det som visas som en länk.

Innehållet mellan <a> taggarna kan både vara en bit text, en bild eller något annat inline element. Innehållet får däremot inte vara ett blockelement som exempelvis rubriker <h1> eller paragrafer <p>.

Absoluta och relativa länkar

Det finns två sorters länkar man kan använda. Absoluta länkar tillhandahåller en fullständig specifik adress till länkens mål medan en relativ länk enbart pekar på vart målet är i förhållande till sidan som länken är på.

HTML kod

<a href="http://www.exempel.se/index.htm">
Absolut länk
</a>
<a href="sida2.htm">Relativ länk</a>

Relativa länkar kan enbart peka på dokument som ligger på samma domän som den sida där länken är. Däremot kan de peka på ett dokument i andra kataloger.

För att peka på ett dokument i en underkatalog relativt sett till länkens dokument är läggs katalognamnet till innan filnamnet.

HTML kod

<a href="underkatalog/sida1.htm">Länktext</a>

För att peka på ett dokument i en katalog som är förälder till den katalog där länkens dokument befinner sig skrivs ”../” innan filnamnet.

HTML kod

<a href="../sida2.htm">Länktext</a>
<a href="../../sida3.htm">Länktext</a>
<a href="../annanmapp/sida4.htm">Länktext</a>

Om inget filnamn anges så visar servern en standardsida som ofta kallas index.htm (eller index.php, index.asp etc.). Adressen ”http://www.exempelsida.se/index.htm” visar alltså samma sida som ”http://www.exempelsida.se/”

En länktext visas vanligtvis med en understykning men detta går att ändra med stilmallar (css).

Öppna ett dokument i ett nytt fönster

Med attributet ”target” kan man bestämma var det nya dokumentet ska öppnas. Värdet ”_blank” gör att det nya dokumentet öppnas i ett nytt fönster.

Exempel: Öppna denna sida i ett nytt fönster

HTML kod

<ahref="index.htm" target="_blank" >Länktext</a>

Länka till ett mål inne i ett dokument

Det går att länka till ett mål inuti ett dokument.

Exempel: Gå till toppen av sidan

Detta görs genom att ge länken följande kod.

HTML kod

<a href="#top">Gå till toppen av sidan</a>

Stora eller små bokstäver?
Om webbsidan ligger på en windowsserver så spelar det ingen roll om filnamnet i adressen har små eller stora bokstäver. Om den däremot ligger på en linuxserver så är sidorna MINSIDA.HTM, Minsida.htm och minsida.htm inte samma.

Målet för länken är denna sidas huvudrubrik <h1> som tilldelats attributet ”id” med värdet ”toppen”.

HTML kod

<h1 id="toppen">HTML länkar</h1>

Alla typer av element innanför body taggarna kan vara mål för en länk. Det enda som är viktigt är att id-attributets värde ska vara unikt i dokumentet.

Det går också att länka till en id-tagg i ett annat dokument.

HTML kod

<a href="http://www.exempel.se/sida2.htm#">
Länktext
</a>

Elementlista för länkar

Element	Beskrivning	Övrigt
<a>	Definierar ett ankare	-