Links på hjemmesider

Links er hele rygraden i den teknologi der ligger bag World Wide Web, som i dag er det de fleste fejlagtigt tror er det samme som internettet. Hvis du ser efter, kan du se, at før web-adressen står der http eller https. Den første, http, er den oprindelige version og står for Hypertext Transfer Protocol, https er når man arbejder med en sikker forbindelse og står for Hypertext Transfer Protocol Secure.

Hypertext'en der refereres til er linksene, og det var det, som var nyskabende ved World Wide Web i forhold til de tidligere protokoller til at navigere på internettet. I stedet for at skulle skrive kommandolinjer for at få fat i en side eller et dokument, kunne man blot klikke på et hyperlink, dvs. det vi i dag tager for givet som et link, og så var man videre til den næste side.

Ud over at tjene som en nem måde at komme fra en side til en anden, tjener links også et andet formål. Når søgemaskiner som Google eller Bing indekserer siderne på en hjemmeside, gør de det ved at følge de links der er på siden, med mindre man beder dem om ikke at gøre det. I praksis betyder det, at hvis der ikke bliver linket til en side, kan søgemaskinerne ikke indeksere siden. En side der ikke er noget link til, kaldes en 'orphan', dvs. en forældreløs.

Den tag man bruger til links hedder <A>. Til den bruger vi attributten HREF til at pege hen på den side linket skal føre til. Et link der fører til hjemmesiden HTML-Hajen vil således være:


A-tag'en og den tilhørende HREF er det søgemaskinerne kigger efter og følger. Hvis man linker til sider der ikke er placeret på ens eget site, er det vigtigt at man husker at skrive http:// (eller https://) foran addressen, ellers tror linket, at din adresse ligger på samme site.

Skrevet som vist lige før, kan man ikke se og klikke på linket på siden, for der er ikke noget til at gøre det synligt. Den synlige del står mellem <A> og </A>. Den klassiske løsning er selvfølgelig noget forklarende tekst, f.eks.


På siden kommer det til at se således ud:


Dette er links med blå skrift og understregning, som vi kender dem fra nettet.

Det behøver selvfølgelig ikke at være tekst, eller kun tekst. Man kan sagtens sætte et billede ind. Billeder er IMG-tag'en, og hvis vi tager vores grinende smiley der er brugt andre steder, ser koden således ud:


og resultatet ser således ud:


Der er som sådan ikke nogen grænse for hvad man kan bruge som link, omend man nok bør overveje hvad man bruger, af hensyn til brugerfladen.

Hvis man skal åbne en side på samme site, som man typisk vil gøre med et navigationspanel, eller f.eks. cookies og privatlivs erklæringen i bunden af siden, bruger man typisk ikke http:// men skriver blot filnavnet. Et link til den side der har filnavnet Side2.htm i samme directory vil derfor se således ud:


Linket behøver ikke at være til en anden HTML-side. Man kan sagtens linke til andre typer filer f.eks. hvis man vil have linket til at åbne et dokument i pdf-format kaldet Dokument1.pdf i det directory der hedder Dokumenter:


Denne måde at lave links på kan ikke anvendes til at lave om på størrelsen og udseendet af vinduet. Vil man gøre dette, skal man anvende den attribut der hedder ONCLICK, som er beskrevet længere nede på siden.

Links i gængs forstand, som søgemaskinerne kan følge, kan man ikke lave på andre måder. Dette er imidlertid ikke det samme som at man ikke kan lave noget der fungerer som et link, hvor man med et klik kan åbne en ny side. Der findes en attribut der hedder ONCLICK, som man kan programmere til bl.a. at åbne en ny side. Metoden har nogle fordele og ulemper i forhold til A-tag'en, hvorfor den med fordel kan anvendes til visse formål. ONCLICK bliver gennemgået længere nede.

Formatteringen af link-tekster gøres langt hen ad vejen som alt andet tekst. A-tag'en kommer med understregning som default, dvs. man skal bruge en STYLE="text-decoration:none" hvis man vil have den fjernet, og den har forskellige farver, alt efter om man holder musen over eller ej, og om man har været på siden der linkes til eller ej.

Farverne styres med det der hedder selectors, og det er noget man skal specificere i enten sit stylesheet eller som STYLE oppe i HEAD-tag'en. Hvis du vil vide mere om selectors, end det der bliver gennemgået om links på denne side, kan du læse om dem her.


Til links har man fem selectors:

Selector	Eksempel	Effekt
:active	a:active	Udvælger det aktive link, dvs. hvordan linket ser ud lige når du klikker på det.
:link	a:link	Udvælger alle links man ikke har klikket på, dvs. links til sider man ikke har besøgt (ifølge de cookies man har liggende i sin browserhistorik, vel at mærke).
:visited	a:visited	Udvælger alle links man har klikket på, dvs. links til sider man har besøgt (ifølge de cookies man har liggende i sin browserhistorik, vel at mærke).
:target	#HeadLine:target	Udvælger det aktive element med #HeadLine, dvs. den formatterer elementet med specificerede ID på siden (som ikke behøver at være et link).
:hover	a:hover	Udvælger elementer/tags som man holder cursoren over (mouse over).

Så, for et site som dette, hvor alle links er sat til at være sorte, uanset om man har besøgt siden der linkes til eller ej, og som lyser op ved klik og mouseover, ser det således ud:


Man kan godt umiddelbart får den idé, at det er overflødigt at specificere A:active, fordi man allerede ved :hover har fået teksten til at ændre farve. MEN, her skal man huske, at smartphones og tablets ikke har en mus og derfor heller ikke mouseover/hover. Her vil et farveskift, når man klikker på linket, fungerer som en visuel indikation af at man vitterligt også har ramt rigtigt på linket.

Som standard åbner et link den nye side i det samme vindue, som man er i. Det er imidlertid ofte hensigtsmæssigt at åbne i et ny vindue eller en ny tab. Som udgangspunkt, kan man ikke bestemme om brugeren åbner siden i et nyt vindue eller en ny tab. Det er noget som styres i browserens opsætning, ikke hjemmesiden. Dette er ikke det samme som at man ikke kan styre det lidt. Hvis man definerer en størrelse på siden, som er forskellig fra full screen, vil browseren automatisk åbne target som et nyt vindue.

Den klassiske løsning til ny side/ny tab er TARGET="_blank". Det hævdes, at med HTML 5 bliver denne fjernet, men den fungerer pt. fint i HTML 5, og der er forlydender om, at løsningen ikke bliver fjernet alligevel. Mulighederne for værdier af TARGET er:

Værdi	Effekt
_blank	Åbner det linkede dokument i et nyt vindue eller en ny tab.
_self	Åbner det linkede dokument i samme vindue eller tab, som siden med linket. Dette er default værdien for TARGET.
_parent	Åbner det linkede dokument i det vindue eller tab som har oprettet siden. Kun relevant hvis siden er genereret med _blank, og kun en variabel der anvendes ved frames.
_top	Åbner det linkede dokument i samme vindue/tab. Hvis linket er indlejret i en frame, bliver dokumentet ikke åbnet i den pågældende frame som ved _self men i hele vinduet/Tab'en.
framename	Åbner dem linkede side i en frame med dette navn. Kun relevant hvis man designer hjemmesider med frames.

Skal vi have linket til HTML-Hajen fra før til at åbne i et nyt vindue eller ny tab, bliver koden så:


Som det ses, er der en del funktionaliteter der refererer til frames. Det er en teknologi som var hot i slutningen af 1990'erne, men som man ikke bruger mere. Se afsnittet om frames og iframes, når det kommer på et tidspunkt.

I stedet for TARGET="_blank" kan man anvende en anden løsning, som hedder ONCLICK="target='newtab'". Det hedder sig, at de to metoder skulle give samme resultat, men dette er ikke tilfældet. For nu at starte med syntaxen, vil vores link fra før se således ud:


Forskellen på de to fremgangsmåder er, at TARGET åbner et nyt vindue/en ny tab, uanset om der allerede er et vindue/en tab der er åbnet med dette link eller ej. Hvis man klikker 10 gange på linket, får man 10 vinduer/tabs. Har man 10 forskellige links med TARGET på en side, åbner de hver sit vindue/sin tab, uafhængigs af hvad der tidligere er klikket på eller ikke klikket på. ONCLICK åbner vinduet/tab'en som et child-objekt, og alle sider bliver åbnet i denne. Det betyder, at uanset hvor mange sider man har links til på en given side, bliver der kun åbnet én side. Hvis denne side er åben, når man klikker på et nyt link på siden, bliver indholdet i child-objektet skiftet ud med den side der linkes til.

I stedet for at anvende HREF, kan man anvende den attribut der hedder ONCLICK sammen med en kommando i JavaScript der hedder window.open. Hvis vi skal lave et link der kan det samme som før med TARGET="_blank", ser koden således ud:


På siden kommer det til at se således ud:


Bemærk, at når man holder musen over linket, lyser linket ikke op som et normalt link og den lille hånd der normalt dukker op, er der ikke. Det er fordi det ikke er et ægte link i HTML-forstand.

Hvis man gerne vil have hånden sat på, skal man bruge attributten ONMOUSEOVER. For at lave lige dette specielle lille trick, skal attributten være sat til ONMOUSEOVER="this.style.cursor='pointer'".

Hvis man vil have den til også at lyse op, med f.eks. rød, kan man enten specificere en klasse i sit style sheet og sætte farven med :hover (se styling af links lige oven over), eller man specificere ONMOUSEOVER med this.style.color='Red'. Bruger man ONMOUSEOVER skal man lige huske at lave en ONMOUSEOUT hvor man sætter farven tilbage til normal tekstfarve, dvs. sort i dette tilfælde, for ellers beholder linket den røde farve når man ikke længere peger på linket. Så ser koden således ud:


På siden kommer det til at se således ud:


Kunsten at lave om på pointere ved links bliver nærmere gennemgået på siden om pointere.

Default for window.open er, at sider åbnes i nyt vindue/tab på samme måde som TARGET="_blank". Man kan selvsagt også få linket til at åbne i samme vindue, analogt med TARGET="_self". Så ser koden således ud:


Ligeledes kan man få vinduet til at åbne i et dattervindue, så der kun kommer det ene nye vindue/tab. Kode bliver så

Attributten ONCLICK giver nogle muligheder for at styre udseendet af det nye vindue man åbner. Man skal her være opmærksom på, at hvis man specificerer noget i det nye vindues udseende, vil man altid få et nyt vindue, uanset om ens browseropsætning er sat til tabs eller ej. Det betyder, at hvis man vil sikre sig, at det er et nyt vindue der bliver åbnet, og ikke en ny tab, kan man blot definere dele af udseendet i sin window.open. Omvendt er det således, at hvis man specificerer, at det skal være samme vindue med '_self', bliver instruktioner om styling ignoreret.

Mulighederne for styling af det nye vindue er flg.:

Værdi	Effekt
width	Vidden af vinduet i pixels. Man specificerer ikke at det er pixels.
height	Højden af vinduet i pixels. Man specificerer ikke at det er pixels.
left	Vinduets afstand fra venstre side af skærmen, i pixels. Man specificerer ikke at det er pixels.
top	Vinduets afstand fra toppen af skærmen, i pixels. Man specificerer ikke at det er pixels.
titlebar	Skal det nye vindue have en titlebar? Her har man kun mulighederne yes og no.
menubar	Skal det nye vindue have en menubar? Her har man kun mulighederne yes og no.
toolbar	Skal det nye vindue have en toolbar? Her har man kun mulighederne yes og no.
location	Skal det nye vindue have en location bar? Her har man kun mulighederne yes og no.
scrollbars	Skal det nye vindue have scrollbars? Her har man kun mulighederne yes og no.
status	Skal det nye vindue have en statusbar? Her har man kun mulighederne yes og no.
resizable	Skal man kunne ændre størrelsen på vinduet? Her har man kun mulighederne yes og no.

Hvis vi vil vise vores nye side fra før, i et lille vindue på 350x300 pixels, uden menubar, uden toolbar, unden scrollbars og med mulighed for at kunne ændre størrelsen på vinduet, kan man gøre et af to:

1. Specificere et navn på vinduet. Eksisterer der ikke ikke allerede et vindue med det navn, bliver det lavet som et nyt vindue. Findes vinduet med det specificerede navn, bliver indholdt ændret, men vinduets udseende forbliver det samme.
2. Specificere en _blank i sin windows.open. Dette fungerer ligesom TARGET="_blank".

Koden for de to løsninger ser således ud:




På siden kommer det til resultaterne til at se således ud:



Herefter kan linket styles med pointer og farver som beskrevet længere oppe på siden.