# Länkar

Länkar är en stor del av webben och är en av de delar som gör webben till webben. Hypertext dokument kan innehålla hyperlänkar som länkar samma flera dokument eller resurser. Nästan alla webbplatser har en eller flera länkar. När en länk klickas så aktiveras den i webbläsaren och skickar användaren vidare till en annan adress(Uniform Resource Locator, **URL**).

Länkar kan leda till sidor eller resurser på den webbplatsen eller till andra sidor. Länkar kan även peka på filer av olika slag, kan de inte visas av webbläsaren så får du en fråga vad du vill ska ske med filen.

## Länk-elementet

Länk elementet skrivs med `<a>`. För att länken ska fungera krävs det att länken har ett mål, det skrivs med attributet `href`.

{% tabs %}
{% tab title="HTML" %}

```markup
<p>För att läsa mer om a-elementet så kan du besöka 
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
  title="Läs mer om a-elementet">MDN</a>
.</p>
```

{% endtab %}
{% endtabs %}

Länk elementet är ett bra exempel på hur ett attribut samspelar med text-innehållet för elementet. I öppningstaggen så skrivs `href` attributet med den länk som ska öppnas när texten MDN klickas. Texten skrivs efter öppningstaggen och innan stängningstaggen.

Denna länk blir inline i `<p>` elementets text.

### Block-länkar

Hela element kan även användas som länkar, ett bra exempel för det är bilder som går att klicka. Då placeras block-elementet inuti a-elementet istället för text.

{% tabs %}
{% tab title="HTML" %}

```markup
<a href="https://www.github.com">
  <img 
    src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
    alt="Octocat">
</a>
```

{% endtab %}
{% endtabs %}

## Att länka mellan dokument

När du skapar länkar på din webbplats är det viktigt att du förstår hur du länkar mellan dokument. Du behöver förstå hur du anger **sökvägen**(engelska **path**). En URL använder sökvägen för att hitta filer i ett filsystem.&#x20;

![Sökvägen till dokument i Windows Utforskaren.](/files/-MHuIPa2cZvZ0Bi7azf_)

För att komma åt filer så används **relativa** sökvägar på webben. Det betyder att du utgår från dokumentet och vars det ligger i filstrukturen. Ofta utgår en sidan från index.html.

{% hint style="warning" %}
Använd aldrig absoluta sökvägar till filer i ditt dokument. Börjar sökvägen med c:\\... så kommer det inte fungera för någon annan.
{% endhint %}

### Länka i samma mapp

Du vill länka från index.html till about.html som ligger i samma mapp.

{% tabs %}
{% tab title="HTML" %}

```markup
<a href="about.html">About</a>
```

{% endtab %}
{% endtabs %}

### Länka till en undermapp

Du vill länka till en fil i en mapp som ligger i samma mapp.&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<a href="gallery/pictures.html">Mitt bildgalleri</a>
```

{% endtab %}
{% endtabs %}

### Länka till en överliggande mapp

Ibland så behöver vi kunna gå upp i mappstrukturen för att komma åt filer som ligger i en annan mapp. Då används `../`

{% tabs %}
{% tab title="HTML" %}

```markup
<p>Vill du ladda ned en pdf med mitt galleri? Klicka då
  <a href="../pdf/bildgalleri.pdf">här</a>.
</p>
```

{% endtab %}
{% endtabs %}

### Länka i ett dokument

Vissa länkar används för att länka mellan sektioner i ett dokument, det kallas för fragment. För att göra det krävs det att ett element har ett `id` attribut och att länken pekar till det. Id markeras med # .

{% tabs %}
{% tab title="HTML" %}

```markup
<p>Klicka för att hoppa till <a href="#kapitel2">Kapitel 2</a>.</p>

<h1 id="kapitel2">Kapitel 2</h1>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Försök att alltid namnge dina filer och mappar med små bokstäver. Undvik även specialtecken(åäö) och mellanslag.
{% endhint %}

## Övning

1. Öppna filen dracula.html som du skapade i kapitlet om [text](/webbutveckling/html/text.md#oevning).
2. Skapa en länk till sidan för [e-boken](https://www.gutenberg.org/files/345/345-h/345-h.htm).
3. Märk upp innehållsförteckningen med länkar till dokument fragment.
   1. Länk till Kapitel 1 och tillhörande id på dess rubrik.
   2. Länk till Kapitel 2 och så vidare.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jens-andreasson.gitbook.io/webbutveckling/html/laenkar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.