HTML links

HTML bruker superlenker for å koble til et annet dokument på nettet.

Lenker kan finnes nesten i alle nettsider. Ved å klikke på lenken kan du hoppe fra en side til en annen.

Eksempel

Opprett superlenke
Dette eksempelet viser hvordan du lager lenker i et HTML-dokument.
Bruk bilde som lenke
Dette eksempelet viser hvordan du kan bruke et bilde som lenke.

(Du kan finne flere eksempler nedenfor på denne siden.)

HTML-superlenker (lenker)

En hyperlink kan være et ord, et ordforbruk eller flere ord, eller et bilde. Du kan klikke på disse elementene for å hoppe til en ny dokument eller en bestemt del av det nåværende dokumentet.

Når du flytter musepekeren over en lenke på en nettside, endres peiken til en liten hånd.

Vi opretter lenker ved å bruke <a>-tagget i HTML.

Der er to måder at bruge <a>-tagget på:

  1. Ved at bruge href-attributten - opretter links til andre dokumenter
  2. Ved at bruge name-attributten - opretter dokumentinterne bogmærker

Læs mere:Hvad er hypertext?

HTML-link syntaks

HTML-link kode er meget simpel. Det ser sådan ud:

<a href="url">Linktekst</a>

Href-attributten definerer målet for linket.

Teksten mellem start- og slutetiketterne vises som en hyperlink.

Eksempel

<a href="http://www.codew3c.com/">Besøg CodeW3C.com</a>

Denne linje vises som følger:Besøg CodeW3C.com

Klik på denne hyperlink vil føre brugeren til CodeW3C.com's startside.

Tip:"Linktekst" behøver ikke nødvendigvis at være tekst. Billeder eller andre HTML-elementer kan også bruges som links.

HTML-link - target-attributten

Ved at bruge Target-attributten kan du definere, hvor det linkede dokument skal vises.

Denne linje vil åbne dokumentet i et nyt vindue:

<a href="http://www.codew3c.com/" target="_blank">Besøg CodeW3C.com!</a>

Prøv det selv

HTML-link - name-attributten

Name-attributten definerer navnet på ankeret (anchor).

Du kan oprette bogmærker i HTML-sider ved hjælp af name-attributten.

Bogmærker vises ikke på nogen særlig måde, de er utilgængelige for læseren.

Når vi bruger navngivne anker (named anchors), kan vi oprette links, der direkte hopper til dette navngivne anker (f.eks. til en bestemt sektion på siden), så brugeren ikke behøver at skrollere hele tiden for at finde den information, de har brug for.

Syntaks for navngivne anker:

<a name="label">Anker (tekst der vises på siden)</a>

Tip:Ankerets navn kan være hvad du vil.

Tip:Du kan erstatte name-attributten med id-attributten, og navngivning af anker fungerer også effektivt.

Eksempel

Først og fremmest navngiver vi ankeret i HTML-dokumentet (opret en bogmærke):

<a name="tips">Bæste opmærksomhed - nyttefulde tips</a>

Opret derefter et link til denne anker i samme dokument:

<a href="#tips">Nyttige tips</a>

Du kan også oprette et link til denne anker på andre sider:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">Useful tips</a>

In the above code, we add the # symbol and anchor name to the end of the URL to directly link to the 'tips' named anchor.

Specific effect:Useful tips

Basic precautions - useful tips:

Note:Always add a forward slash to the subfolder. If you write the link like this: href="http://www.codew3c.com/html", it will generate two HTTP requests to the server. This is because the server will add a forward slash to this address and then create a new request, like this: href="http://www.codew3c.com/html/".

Tip:Named anchors are often used to create a table of contents at the beginning of a large document. You can assign a named anchor to each chapter and then place the links to these anchors at the top of the document. If you often visit Baidu Encyclopedia, you will find that almost every entry uses such a navigation method.

Tip:If the browser cannot find the defined named anchor, it will locate to the top of the document. No error will occur.

More examples

Open links in a new browser window
This example demonstrates how to open a page in a new browser window so that visitors do not have to leave your site.
Link to different locations on the same page
This example demonstrates how to use links to jump to another part of the document.
Jump out of the frame
This example demonstrates how to jump out of the frame if your page is fixed within a frame.
Create email link
This example demonstrates how to link to an email. (This example will only work after the email client program is installed.)
Create email link 2
This example demonstrates a more complex email link.

HTML link tag

Tag Description
<a> Define anchor.