L�nkar: L�r dig hur man g�r l�nkar i HTML

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

Relaterat:
Hj�lpdelen
om l�nkar

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:[email protected]">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:[email protected]?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.zip p� http://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">  </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">  </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:[email protected]&subject=Rubrik&body=Inneh�ll">Maila mig</A>
<A HREF="mailto:[email protected]?subject=Rubrik?body=Inneh�ll">Maila mig</A>
<A HREF="mailto:[email protected]?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