Nyeste it-job

[ Forrige | Indhold | Næste ]

Lektion 8: Links

Velkommen til lektion 8. I denne lektion lærer du at lave links mellem sider.

Hvad skal jeg bruge?

Til at lave links skal du bruge det, du altid bruger når du koder HTML: et tag. Et simpelt lille tag med ét element og én attribut, og du kan linke til alt og alle. Her er et eksempel på hvordan et link til html.dk ville se ud:

Eksempel 1:

<a href="http://www.html.dk">Her er et link til html.dk</a>

Ville se sådan ud i browseren:

Her er et link til html.dk

 

Elementet a står for "anchor", som er engelsk for "anker". Attributten href er en forkortelse af " Hypertext REFerence", hvilket betyder "Det er her linket går til" (sådan cirka).

href sættes lig "http://www.html.dk", hvilket er den fulde adresse på html.dk, og kaldes en URL (Uniform Resource Locator) (bemærk "http://", der også skal medtages). Sætningen "Her er et link til html.dk" er det der ses i browseren som et link. Husk at lukke taget med et </a>.

Hvad med links mellem mine egne sider

Hvis du linker mellem sider der deler placering, behøver du ikke skrive hele adressen (URL'en). Hvis du f.eks. har lavet to sider (side1.htm & side2.htm) og gemt dem i samme folder (f.eks. under "Dokumenter" på harddisken), kan du linke fra den ene side til den anden med kun navnet på siden. Et link fra side1.htm til side2.htm ville derfor se sådan ud:

Eksempel 2:

<a href="side2.htm">Et link til side 2</a>

 

Ligger side 2 i en underfolder (navngivet "underfolder"), kan linket se sådan ud:

Eksempel 3:

<a href="underfolder/side2.htm">Et link til side 2</a>

 

Et link den anden vej fra side 2 (i underfolderen) til side 1 vil da se sådan ud:

Eksempel 4:

<a href="../side1.htm">Et link til side 1</a>

"../side1.htm" gør at der hoppes et niveau tilbage før der kigges efter filen. Man kan også hoppe to niveauer tilbage, så ser det sådan ud: "../../side1.htm".

Forstod du systemet? Ellers kan du selvfølgelig altid bruge den fulde adresse (URL'en).

Og hvad med links internt på en side

Vil man have links internt på sine sider, kan det også sagtens lade sig gøre. F.eks. en indholdsfortegnelse øverst med links til hvert afsnit nedenfor. Du skal blot bruge attributten id. Med id-attributten kan du give tag en unik identifikation.

Eksempel 5:

<h1 id="overskrift1">Overskrift 1</h1>

Du kan nu linke til det specifikke tag. I linket skrives blot et "#" (så ved browseren at den skal blive på samme side) efterfulgt af det id du vil linke til:

Eksempel 6:

<html>
  
  <head>
  </head>

  <body>

    <p><a href="#overskrift1">Link til overskrift 1</a></p>
    <p><a href="#overskrift2">Link til overskrift 2</a></p>

    <h1 id="overskrift1">Overskrift 1</h1>
    <p>Tekst tekst tekst tekst</p>

    <h1 id="overskrift2">Overskrift 2</h1>
    <p>Tekst tekst tekst tekst</p>
  
  </body>

</html>

Vil se sådan ud i browseren (prøv at klikke på de to links):

Link til overskrift 1

Link til overskrift 2

Overskrift 1

Tekst tekst tekst tekst

Overskrift 2

Tekst tekst tekst tekst

 

Kan man også linke til en e-mail adresse?

Ja, man kan godt linke til en e-mail adresse. Måden at gøre det på er den samme, som når du linker til en side:

Eksempel 7:

<a href="mailto:info@html.dk">Send en e-mail til html.dk</a>

Vil se sådan ud i browseren:

Send en e-mail til html.dk

 

Forskellen er, at du i stedet for at skrive adressen på en side, skriver et "mailto:" efterfulgt af e-mail adresse. Når du klikker på linket, åbner du automatisk dit e-mail program med en ny besked adresseret til info@html.dk. Denne funktion vil dog kun virke, hvis der er installeret et e-mail program på computeren. Prøv.

Er der flere attributter, jeg bør kende?

For at lave et link skal du altid bruge href. Herudover kan du bl.a. også sætte en titel på dit link:

Eksempel 8:

<a href="http://www.html.dk" title="Link til html.dk">Her er et link til html.dk</a>

Ville se sådan ud i browseren:

Her er et link til html.dk

 

Attributten title kan bruges til at skrive et kort beskrivelse af linket. Hvis du  - uden at klikke - holder musen henover linket, vil du se at teksten "Link til html.dk" kommer frem.

 

[ Forrige | Indhold | Næste ]

 

This HTML tutorial is now avaliable in English

You can find this lesson and the rest of this HTML tutorial in English at HTML.net.

Relateret materiale på HTML.dk
Relaterede nyhedsgrupper på Usenet
Relaterede links om emnet

Nyhedsbrev
Tilmeld dig HTML.dk's nyhedsbrev


Er du jobsøgende?

 Ja
 Nej
Se det foreløbige resultat når du har stemt!


Se tidligere afstemninger

 Community
Brugernavn

Adgangskode

Husk

 *  Bliv medlem her
 *  Glemt password?


Om HTML.dk | Oplysninger om ophavsret | Politik om persondata | Annoncer på HTML.dk | RSS

Valid XHTML 1.1! Valid CSS! Powered by Scannet