A-Tag

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

A-Tag er den funktion i HTML / CSS Kodningen som oftest bruges til at referere til noget andet. Det kunne fx være en anden side på domænet.

Anvendelse af A-Tag

A-Tag startes ud som alle andre tags, hvor den åbnes med <a href="url">, så skal den have et Tag-indhold og så lukkes den med </a>. Det kan f.x. være på følgende måde <a href="url">En tekst her</a>

Der hvor man lægger en tekst ind bliver det bare til et standard link, men man kan også lægge andre tags ind som f.x. et billede, hvor man så placerer sit img-Tag inde i a-Tagget.

Eksempel

Når man linker til en anden hjemmeside, så skal man skrive den fuldstændige sti til siden, som den er angivet i browserens navigations-linje (bliver til dels anonymiseret i nyere browsere). Et link af denne type kaldes et absolut link, og skal normalt kun anvendes når man linker uden or sit eget domæne.

<a href="http://www.dinhjemmeside.dk">Linkets navn</a>

Linket.png <-- Sådan vil det se ud med kodningen ovenfor

Når man opbygger et site anvender man relative links inde i siden, så man kun behøver at skrive stien internt på serveren som vist her:

<a href="index.html">Forsiden</a>

Forside.png <-- Sådan vil det se ud ved intern visning, man kan altså ikke se forskellen, andet end på teksten

Forskellen

Forskellen på det øverste eksempel er at i det øverste tilfælde vil man kunne dirigere besøgeden på din side videre fra fx. facebook til youtube, hvor man i den nederste vil kunne "guide" besøgende på din side videre til en anden side på samme domæne fx fra forsiden til galleriet.

Relative links

Hele den måde at henvise internt på serveren kaldes relative links, og giver rigtig god mening, når man arbejder med en hjemmeside. Det betyder nemlig at man kan flytte hele sin hjemmeside til en undermappe, eller endda til et helt andet domæne, uden at man skal ændre sine links.

Når man anvender en mappestruktur til sine filer på serveren, så kan man stadig henvise til filer, både i undermapper og i mapper der ligger i overliggende mapper.

Henvisning til en fil i samme mappe gøres ved blot at henvise til filnavnet:

<a href="index.html">Forsiden</a>

Denne henvisning kan også skrives ved at angive at det er i samme mappe, ved at skrive ./ foran filnavnet:

<a href="./index.html">Forsiden</a>

Henvisning fra en fil placeret i en undermappe til en fil i en mappe der ligger i mappen over gør man ved at skrive ../ foran filnavnet:

<a href="../index.html">Forsiden</a>

Vil man henvise fra en overordnet mappe til en fil der er placeret i en undermappe, så skriver man mappenavnet/ foran filnavnet:

<a href="sider/side2.html">Side 2</a>

Dette kan så kombineres på forskellig vis, så man kan henvise relativt ned gennem flere niveauer og ind i flere undermapper.

Eksempel på relative henvisninger

Her illustreres hvordan der på et relativt simpelt site, kan henvises mellem forskellige filer ved hjælp af relative henvisninger. Sitet ligger med rod i mappen Site, og indeholder de viste mapper og filer:

Site-filer.png
Illustration af filer i et site

Nedenstående tabel viser hvordan man kan henvise fra de forskellige filer til andre filer i alle kombinationier

Fra side Til side/fil Henvisning
index.html logo.jpg i Images src="Images/logo.jpg"
index.html side2.html i Sider href="Sider/side2.html"
index.html kilde1.html i undermappen Kilder href="Sider/Kilder/kilde1.html"
side1.html i Sider side2.html i Sider href="side2.html"
side1.html i Sider kilde1.html i undermappen Kilder href="Kilder/kilde1.html"
side1.html i Sider logo.jpg i mappen Images src="../Images/logo.jpg"
side1.html i Sider index.html href="../index.html"
kilde1.html i undermappen Kilder index.html href="../../index.html"
kilde1.html i undermappen Kilder side3.html i Sider href="../side3.html"
kilde1.html i undermappen Kilder logo.jpg i Images src="../../Images/logo.jpg"

Ny side / fane

I nogle sammenhænge ønske designeren af siden, at man ikke kommer væk fra siden, selvom man klikker på et link. Til at løse dette kan man bruge en ekstra egenskab target, og sætte den til _blank som det er vist her:

<a href="http://www.dinhjemmeside.dk" target="_blank">Linkets navn</a>

Det der vil ske er, at linket åbner et nyt browservindue, eller hvis man har indstillet browseren til det, så åbner den blot siden i et nyt faneblad, sådan at man kommer ind på den nye side, men man forlader ikke den gamle side, da den stadig står i det faneblad/browservindue man forlod.

Det har tidligere være angivet på w3schools, at den måde at gøre det på var forældet, og ville forsvinde med HTML5, men da det ikke står der længere, så må det antages at metoden stadig er i orden.

Henvisning internt på siden

På sider der har meget tekstindhold, og som bliver mange skærme med visning, vil man normalt dele det i flere sider for læsbarhedens skyld, men man kan i nogle situationer (specielt hvor det er sider der skal kunne printes ud i sammenhæng) vælge at det hele står samlet på en side.

I disse tilfælde er det praktisk at kunne henvise til andre steder på den samme side - det gør man også med et a-Tag, men hvor man sætter # foran det sted man henviser til, som vist her:

<a href="#Kapitel3">Link til Kapitel3</a>

Det vil blive vist som et normalt link, men der skal selvfølgelig også være et sted det skal henvise til, og det er i dag blevet til at man sætter et id på det sted man vil henvise til, det kunne typisk være en overskrift (et header-Tag), der kunne se ud som følger:

<h2 id="Kapitel3">Kapitel 3 om hestens vanding</h2>

Man vil ikke kunne se id'et - det vil bare ligne en normal overskrift, men man kan henvise til det.

Dette er en ny måde at gøre det på, hvor man førhen skulle gøre det ved at sætte et name på et tomt a-Tag. Det ville have præcist den samme visning og den samme funktion (og vil sikkert have det lang tid endnu). Det blev skrevet som følger:

<a name="Kapitel3"></a>
<h2>Kapitel 3 om hestens vanding</h2>

Henvisning til et punkt fra en anden side

Man kan fra et andet websted / domæne henvise til et punkt nede på en side.

Her skal man selvfølgelig angive sidens navn og sti på webstedet (kaldet et dybt link), og detefter angiver man det sted på siden man vil henvise til. Det kunne se ud som følger:

<a href="http://www.dinhjemmeside.dk/mappe/side.html#Kapitel3" >Linkets navn til Kapitel 3</a>

Dette vil vises som et helt normalt link, men det vil finde webstedet (domænet) "www.dinhjemmeside.dk", og i roden af det websted vil det finde ind i mappen der her så genialt er døbt "mappe" og ind og finde filen der er døbt "side.html", hvor det kan finde ned til ankerpunktet "Kapitel3".

Det er observeret at det ikke virker ude fra, når man bruger id at henvise til i Internet Explorer 9, men det fungerer i FireFox og Chrome. Funktionen virker med det gamle name i alle browsere.