HTML

Länkar

Det är länkar som gör HTML till riktigt användbart och ger oss tillgång till så mycket information.

Förklaring Att följa en länk kan liknas vid att använda fjärrkontrollen till din TV, fast knapparna på kontrollen blir nya för varje ny kanal du bläddrar till. Vis de fasta kontroller (knappar) som finns i menyraden på din webbläsare kan du även backa och gå framåt bland ett antal HTML-sidor som du precis besökt, precis som bland TV-kanalerna med hjälp av din fjärrkontroll.

Man kan använda sig av text, bilder eller andra element i HTML för att skapa länkar.

Vi ska länka ett par av orden på sidan till andra dokument på Internet. Vi väljer att göra detta med Elliegården, namnet på kenneln, och namnet på hundrasen som är Hovawart. Dessa länkar vidare till hemsidan för Elliegårdens kennel respektive Svenska Hovawartklubbens hemsida.

En länk kallas ankare, A, i HTML och kräver attributet HREF som beskriver vad ankaret ska länkas till. HREF är alltså den adress som länken pekar ut. Adressen kallas också för URL (Uniform Resource Locator) och är en helt unik adress. En URL består av ett schema, ett servernamn och ett filnamn och pekar oftast ut en fil eller katalog på Internet. Schemat beskriver vilket slags protokoll som datorn ska prata med. För vanliga webbsidor används oftast HTTP (vilket du säkert har sett många gånger fast kanske inte tänkt på vad det betyder). Då börjar adressen med HTTP:// och sen följer server och filnamn efter det. Servernamnet pekar ut en dator på Internet och filnamnet är sökvägen till en speciell fil eller katalog på just den datorn. Med i URL:en finns också ett domännamn som anger vilken kategori eller landstillhörighet en webbsida har. Några exempel på domännamn är se (Sverige), uk (Storbritannien), net (nätoperatörer), com (komersiella) och edu (utbildning). Nedan går att se delarna i adressen till Elliegårdens kennel.

Webbadress HTTP i en URL WWW i en URL Domännamn i en URL Toppdömenen i en URL

Hur en url till en tänkt index-sida till IDA (Institutionen för Datavetenskap) på Linköpings univeristet är uppbygd förklaras här:

URL till LIU

FörklaringEn URL är som en vanlig bostadsadress. Om vi tittar på adressen www.stockholm.se/Norrmalmstorg99 kan vi tänka oss att serverdatorn pekas ut av stockholm och se (som i Sverige), och att den adress som vi ska leta upp i Stockholm har adressen Norrmalstorg 99. Hade vi bara skrivit Norrmalmstorg99 hade det kunnat vara i vilken stad som helst...

Det här exemplet beskriver en absolut länk som är unik i hela världen. Det finns bara en plats som har adressen Sverige, Stockholm, Norrmalmstorg 99. Men det finns också relativa länkar som man kan använda sig av på den egna servern. Då tänker man sig utgångspunkten där man står och ger en vägbeskrivning med det som utgångspunkt. Nu går det alltså bra att säga Norrmalmstorg 99, bara man själv befinner sig i Stockholm.

I detta fallet kommer det de två länkarna att se ut enligt följande :


 <A HREF="http://www.elliegarden.se">Elliegården</A>.

 <A HREF="http://www.hovawartklubben.com">Hovawart</A>.

Den första länken har domänen se och den andra com. Men egentligen säger detta mest var ägaren har valt att lägga sin webbplats och inte så mycket om innehållet. De flesta länkar har www först för att visa att det är en webbadress, men det finns också exempel på sidor som inte har det. Några sådana är http://sv.wikipedia.org/ och http://validator.w3.org/.

Ordet, eller bilden osv, som ska utgöra den klickbara länken läggs innanför märket A. Värdet på HREF ska vara den http-adress som man vill länka till. Det går också att länka till sidor som ligger på den egna datorn eller servern och man behöver då inte använda sig av http utan bara den lokala adressen till filen (alltså en relativ länk).

Det går också att länka till en e-postadress för att det lätt ska gå att skicka e-post till en speciell adress utan att avsändaren behöver skriva in adressen för hand. Det gör man genom att sätta HREF till värdet mailto:mittnam@mindomän. Det kan se ut såhär i koden :

<a href="mailto:bjorn@webbprogrammering.se">Min e-post</a>
och får följande utseende

Min e-post

När du klickar på länken öppnas förmodligen det e-postprogram som du vanligen använder (eller det som datorn har som förval). Ofta (men inte i alla e-postprogram) läggs även den adress som är angiven i mailto till som mottagaradress.

En länk är i grundfallet understruken och visas i blått. När man för muspekaren över länken brukar muspekaren och ibland länken ändra skepnad för att visa att det är något som går att klicka på.

Prova följande i din webbläsare i exemplet nedan : För muspekaren över länkarna och se vad som händer. Prova även att klicka på någon av länkarna.

Resultat

Resultat

Provade du att klicka på länkarna? Om du gjorde det märkte du nog att den sida som länken pekade ut öppnades i samma fönster som länken låg i. Din webbläsare läste alltså in en ny adress och visar nu den istället. Det går också att skapa länkar som öppnar ett nytt webbläsarfönster. Det finns även webbläsare som istället öppnar en flik. För att skapa en länk som öppnas i ett nytt fönster lägger man till attributet <TARGET> med värdet BLANK. Koden ser ut enligt följande :

<a href="http://www.google.se" target="blank">Google</a>

och här följer länken för den som vill prova.

Google

Exempel på när denna sorts länk används är länkarna till kod och resultat på dessa sidor.

Övning Prova nu att göra om länkarna på sidan om Nike så att sidorna som länkas till öppnas i egna fönster. Prova också att lägga till ett par egna länkar som öppnas på olika sätt.