Till Startsidan
JavaScript.nu / HTML-kurs / Länkar

Länkar

I detta kapitel:
Textlänk
Bildlänk
En bild länkar till olika sidor
Länka inom sidan
Länka till en bild
E-mail
Länka till olika kataloger
Länka till en fil
Meddelande i statusraden
Javascript-länkar
   Back och forward
   Reload
   Stop
   Print
   Home
   Find
   Open
   Close
   Alla
View source
About
understrykning
Färg
Länka med frames (target)
Test



Som du säkert märkt genom ditt surfande är internet fullt utav länkar. En länk kan användas för att en besökare ska kunna skickas till en websites olika sidor, eller för att skicka en besökare till en annan website.
Att göra en länk är busenkelt, och kan göras enligt två principer:
<A HREF="sida.html">Text</A>
<A HREF="http://www.javascript.nu/">Text</A>

Som du ser innehåller det ena exemplet en hel adress (http://www.javascript.nu/). Att trycka på en sådan länk är samma sak som att skriva in hela adressen direkt i din webbläsares adressfält.
Det du ska använda dig av då du gör länkar till olika dokument i din hemsida är den översta varianten då du alltså bara anger filnamnet till din hemsida.

Som du säkert minns ska din första hemsida heta "index.html". Vill du sedan skapa en till sida med t.ex. dina länkar så kan du exempelvis döpa denna till "lankar.html". För att din besökare som befinner sig på "index.html" ska kunna hitta fram till "lankar.html" så skapar du en länk i "index.html" enligt denna model:
<A HREF="lankar.html">Besök mina länkar</A>

Om din besökare nu trycker på texten "Besök mina länkar" så kommer han/hon förflyttas till filen "lankar.html".
Givetvis måste du först skapa filen "lankar.html". Denna skapar du på exakt samma sätt du skapade "index.html".

Vill du på denna sida länka till t.ex. http://www.JavaScript.nu/ så måste du på denna sida ha en länk av typen:
<A HREF="http://www.javascript.nu/">Besök www.JavaScript.nu</A>
A
A står för "Anchor" (=ankare) och skapar en länk eller ett ankare på sidan.
Attribut
HREF   Detta skapar en länk: Värdet är adressen till den fil (kan vara såväl ett HTML-dokument, en bild eller en annan fil) som ska laddas in om man trycker på länken.
TARGET   Bara för länkar: Värdet är namnet på den frame i vilken länken ska öppnas. Värdet gör skillnad på STORA och små bokstäver.
NAME   Detta skapar ett ankare: Namnet är värdet på ankaret i dokumentet. Värdet gör skillnad på STORA och små bokstäver.


Vill du ha en bildlänk, dvs. så att man trycker på en bildlänk för att komma till den nya sidan så får du ha koden nedan. Detta kan vara användbart t.ex. i en meny som ska bestå av bilder:
<A HREF="sida.html"><IMG SRC="bild.gif"></A>

Bilden "bild.gif" måste ligga i samma katalog som själva sidan med länken. Har du alltså HTML-koden ovan i "C:/Mina Hemsidor/lankar.html", så båste bilden finnas på "C:/Mina Hemsidor/bild.gif".


Något som är överkurs är hur man får en bild att länka till olika sidor. Det tas upp här.
Du kan också göra en länk från en del av sidan till en annan del av sidan. Tänk dig att du har en sida med tusen artistnamn. Du kanske då vill att man ska kunna trycka på bostaven "k" för att man ska komma till den del av sidan som visar alla artister som börjar på "k". Det kan du åstadkomma med ett "ankare".

Där du ska trycka skriver du:
<A HREF="#ankare1">texten man ska trycka på</A>

Där du ska komma upp ska du skriva:
<A NAME="ankare1"></A>

Har du fler ankare ska du döpa dem till olika saker. I mitt exempel kan det vara klokt med "artistA", "artistB", "artistC" etc.

Här har jag ett exempel:
Tryck här för att komma till denna sidas topp.


För att göra en länk till en bild, dvs. så man kommer till en bild när man trycker på länken så ska du ha denna HTML-kod:
<A HREF="hus.gif">Se min sommarstuga</A>

Bilden dyker nu upp i en sida med vit bakgrund och utan text.


För att den som tittar på sidan ska kunna skicka mail till dig skriver du:
<A HREF="mailto:dittnamn@dinmail.com">Maila mig</A>

För att ett "subject" (rubrik på brevet) redan ska vara ifyllt när man trycker på länken skriver du:
<A HREF="mailto:dittnamn@dinmail.com?subject=Detta kommer att bli brevets rubrik">Maila mig</A>

Skulle du vilja att det står något speciellt i själva brevet ska du skriva:
<A HREF="mailto:din_e-mail@något.com?subject=En rubrik på e-mailet&body=Texten som finns i brevet">Maila mig</A>


För att länka till något i en annan UNDERkatalog skriver man:
<A HREF="katalognamn/fil.shtml">tryck här</A>

Skulle jag ha en sådan länk på denna sida...
http://www.server.se/~din_katalog/
...Så skulle den länka till:
http://www.server.se/~din_katalog/katalognamn/fil.shtml

Tänk dig att besökaren besöker en sida med namnet url.shtml, alltså är den egentliga adressen:
http://www.server.se/~din_katalog/url.shtml
Datorn struntar i att filen (sidan) som besökaren då befinner dig i heter url.shtml, alltså hamnar man på sidan
http://www.server.se/~din_katalog/katalognamn/fil.shtml

Om du vill kan du skriva hela länken direkt, alltså:
<A HREF="http://www.server.se/~din_katalog/katalognamn/fil.shtml">tryck här</A>

Nackdelen med detta är att när du gör hemsidan på hårddisken så befinner du dig (vanligtvis) på C:, detta gör att en direktlänk till...
http://www.server.se/~din_katalog/katalognamn/fil.shtml
...Skulle göra så att din webbläsare skulle gå till
http://www.server.se/~din_katalog/katalognamn/fil.shtml,
inte till filen som befinner sig på din hårddisk. Dessutom brukar man inte vara uppkopplad när man gör en hemsida, eftersom det skulle kosta otroligt mycket i telefonräkning.
Så jag rekommenderar STARKT att du skriver...:
<A HREF="katalognamn/fil.shtml">tryck här</A>
...Istället för:
<A HREF="http://www.server.se/~din_katalog/katalognamn/fil.shtml">tryck här</A>

Om du vill länka till en fil i en ÖVERkatalog skriver du:
<A HREF="../fil.shtml">tryck här</A>

Skulle det skrivas på denna sida...
http://www.server.se/~din_katalog/
...Så skulle den hänvisa till:
http://www.server.se/fil.shtml

Naturligtvis kan du länka flera kataloger "bakåt" genom att skriva:
<A HREF="../../../fil.shtml">tryck här</A>

Du kan även länka fram OCH tillbaka i kataloger genom att skriva t.ex:
<A HREF="../../katalognamn/spel/action/fil.shtml">tryck här</A>


För att ladda ner filer från ett ställe kan man göra en länk till filen man vill ladda ner. För att ladda ner en fil som heter filnamn.ziphttp://www.adress.com/xxx/ gör du en länk till http://www.adress.com/xxx/ och sedan filnamnet (fil_namn.zip). En korrekt tag skulle alltså vara:
<A HREF="http://www.adress.com/xxx/filnamn.zip">en text</A>
För att man ska få ett meddelande i statusraden när man drar musen över en länk (gäller både textlänkar och bildlänkar) skriver man:
<A HREF="http://www.JavaScript.nu/"
onMouseOver="self.status='DENNA TEXT KOMMER ATT SYNAS LÄNGST NED PÅ SKÄRMEN'; return true">
texten/bilden man drar musen över</A>.
Vill du även att texten som synts i statusraden ska tas bort då man flyttar musen från länken så skriver du:
<A HREF="http://www.JavaScript.nu/"
onMouseOver="self.status='DENNA TEXT KOMMER ATT SYNAS LÄNGST NED PÅ SKÄRMEN'; return true"
onMouseOut="self.status=''; return true">
texten/bilden man drar musen över</A>.
Nu har du lärt dig det viktigaste man bör kunna om länkar. Allt under denna text är något av en överkurs och kan hoppas över utan problem.

Ett sätt att ha "back-" och "forwardknappar" på sidan är genom dessa länkar (man kan bestämma hur många steg man ska förflytta sig).
För att länka någon 1 steg bakåt skriver man:
<A HREF="javascript:history.go(-1)">Text man ska trycka på</A>

Genom att byta "-1" mot t.ex. "-3" så länkas man 3 sidor tillbaka, alltså där man var för 3 sidor sen. Om man inte varit någonstans för 3 sidor sen så händer inget.
Om man vill länka framåt någon så byter man -1 mot t.ex. 2, då länkas man fram 2 sidor.
Observera att man inte sätter + (plus) när man länkar framåt men - (minus) när man länkar bakåt.


För att länka till en sida man är på (genom en "reload") skriver man:
<A HREF="javascript:window.location.reload()">Text man ska trycka på</A>

Vill du testa? Tryck här (kom ihåg vart i dokumentet du är nu, du kommer nämligen till toppen av detta dokument)!


För att få en sida att sluta ladda skriver du:
<A HREF="javascript:stop()">Text man ska trycka på</A>
OBS: Fungerar bara för Netscape-användare.
För att printa ut en sida kan man skriva:
<A HREF="javascript:print()">Text man ska trycka på</A>

Vill du testa? Tryck här.


För att låta en besökare besöka sitt eget "home" så skriver du:
<A HREF="javascript:home()">Text man ska trycka på</A>

Glöm inte bort att "TARGET" ALLTID blir "_top" om du länkar besökaren till sitt home (även om du skriver t.ex. TARGET="_self").

Vill du testa? Tryck då här (glöm inte att trycka på "back" och komma tillbaka ;-) ).

OBS: Fungerar bara för Netscape-användare.


För att hitta något på en sida kan du skriva (öppnar "Find" (CTRL+F)):
<A HREF="javascript:find()">Text man ska trycka på</A>

Vill du testa? Tryck då här.
OBS: Fungerar bara för Netscape-användare.


För att öppna ett nytt fönster skriver du:
<A HREF="javascript:open()">Text man ska trycka på</A>

Detta kan sedan utvecklas med andra JavaScript-attribut, som du kan lära dig i min JavaScriptkurs.

Här kan du testa hur det blir.


För att stänga ett fönster skriver du:
<A HREF="javascript:top.close()">Text man ska trycka på</A>

Vill du testa detta? Tryck då här.
OBS: Detta kommer att stänga ner webbläsare!


Dessa är alltså alla värden man kan sätta som:
<A HREF="javascript:...">Text man ska trycka på</A>

history.go(-2)
history.go(3)
window.location.reload()
stop()                     För Netscape
print()
home()                     För Netscape
find()                     För Netscape
open()
top.close()

Vill du titta på en sidas HTML-kod? Kanske vill du se hur något från den personens sida är gjort, då kan du skriva:
view-source:http://www.adress.com/namn/
...Så ser du hur han har kodat sin sida.
OBS: Dessa "about-funktioner" fungerar endast med Netscape.

För att se vad du har under din CACHE skriver du...:
about:cache
...I adressfältet. Du ser då de sidor och bilder som du tidigare har sett medan du surfat (dessa lagras på din hårddisk och tas bort av sig själva).

Vill du se din CACHE måste du skriva in adressen ovan i ditt adressfält själv, man kan inte länka till någons cache.

Istället för about:cache kan du skriva t.ex. about:plugins (info. om olika plugin), about:license (om ditt licens (=tråkigt avtalstext)) eller bara about: (info. om vilken webbläsare, version etc. man har). Andra saker man kan skriva är t.ex. about:document. Med en TARGET="_top" (om du inte vet vad det är, strunta i det) till din "about:document" kan du se huvudsidans information.
Slutligen finns about:global som vissar alla sidor man varit på. Liksom about:cache måste man skriva detta direkt i adressfältet, det går inte att länka till about:global.


Som du vet så får länkar automatiskt en understrykning, vilket är bra för att besökaren lättare ska hitta länkarna och veta vad som är en länk.
Vill du trots detta ta bort länkarna skriver du detta i HEAD-taggen:
<STYLE TYPE="text/css">
<!--
a:link {text-decoration: none}
//-->
</STYLE>

...så blir dina länkar utan understrykningar.

Vill du att inget händer då man trycker in (håller in) en länk skriver du även:
a:active {text-decoration: none}

Vill du att inget händer då man tryckt på en länk så skriver du även:
a:visited {text-decoration: none}

För att få alla funktioner skriver du alltså:
<STYLE TYPE="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
//-->
</STYLE>

Om du vill ha en enda länk utan understrykning skriver du style="text-decoration: none" i din A-tagg.
Det kan t.ex. se ut såhär:
<A HREF="hemsida.shtml" style="text-decoration: none">text</A> aaaaaaaa

Allt detta gör man med Style Sheets, vars kapitel finns under "Andra programspråk"/"style sheets".


Som du vet så ändras länkarnas färg i BODY-taggen, men vad ska du göra om du vill ändra färg på en enstaka länk?

Vanliga länkfärger ändrar du med följande attribut i BODY-taggen;

LINK="färgnamn"     (Länkarnas vanliga färg.)
VLINK="färgnamn"    (Länkarnas färg då de har blivit nedtryckta.)
ALINK="färgnamn"    (Länkarnas färg då de är nedtryckta.)

Alltså ändrar du färgen på länken med LINK-attributen, men vad ska du göra om du vill att en enstaka länk på en sida ska byta färg?
Jo, man använder helt enkelt något som kallas Style Sheets.
Skriv bara såhär:
<A HREF="adress.shtml" STYLE="color: red">text/bild</A>
Red kan ändras till någon annan färg, t.ex. blue, #4488ff, #cc66cc etc.


Har du frames och vill länka till olika ramar så ska du använda TARGET (OBS: om du inte vet vad frames är så hoppa över detta.)

Test
I slutet av varje kapitel i HTML-kursen finns några frågor som du ska svara på för att testa dina kunskaper inom HTML. Om du har fått alla rätt så är det bara att gå vidare, fast har du haft något fel kan det kanske vara klokt att försöka lista ut vad som kan ha varit fel. Givetvis kan du gå vidare även om du inte svarar rätt på alla frågor.
Hur gör du en länk?
<A HREF="sida.html">Text<A>
<A HREF="sida.html">Text</A>
<A NAME="sida.html">Text</A>

Vad är skillnaden mellan <A HREF="sida.html">Text</A> och <A HREF="#sida">Text</A>?
Den ena länken länkar till filen "sida.html" och den andra till filen "#sida".
Den ena länken länkar till filen "sida.html" och den andra till ett ankare på sidan som heter "#sida".
Den ena länken länkar till filen "sida.html" och den andra till ett ankare på sidan som heter "sida".

Hur ser en korrekt mail-länk ut?
<A HREF="mailto:mail@mail.com&subject=Rubrik&body=Innehåll">Maila mig</A>
<A HREF="mailto:mail@mail.com?subject=Rubrik?body=Innehåll">Maila mig</A>
<A HREF="mailto:mail@mail.com?subject=Rubrik&body=Innehåll">Maila mig</A>

Vad gör <A HREF="sida.html#ankare">Text</A>?
Länkar till den del av sidan "sida.html" som innehåller <A NAME="ankare"></A>.
Inget, denna tagg är felaktig.
"#ankare" ignoreras och man tas till sida.html precis som med <A HREF="sida.html">Text</A>

Filen "C:/Mina Hemsidor/lankar.html" länkar med <A HREF="katalog/sida.html">Text</A>. Vart leder länken?
C:/Mina Hemsidor/sida.html
C:/katalog/sida.html
C:/Mina Hemsidor/katalog/sida.html

Filen "C:/Mina Hemsidor/lankar.html" länkar med <A HREF="../katalog/sida.html">Text</A>. Vart leder länken?
C:/Mina Hemsidor/sida.html
C:/katalog/sida.html
C:/Mina Hemsidor/katalog/sida.html







Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]