HTML-Hajen

Links på hjemmesider









Hvad er links?

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 grundliggende link-tag

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 HREF="https://html-hajen.dk"></A>

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.

<A HREF="https://html-hajen.dk">HTML-Hajen</A>

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:

<A HREF="https://html-hajen.dk"><IMG SRC="../Graphics/Laugh.gif"></A>

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:

<A HREF="Side2.htm">Side 2</A>

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:

<A HREF="Dokumenter/Dokument1.pdf">Dokument 1</A>

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.


Styling af links

Links er fra naturens hånd lavet til at være med en lysende blå skrift med understregning. Det behøver den ikke at være. Især ved navigationspanelet er man naturligt mere interesseret i at have almindelig skrift, men også ved visse baggrundsfarver, er det praktisk med en anden farve, af hensyn til læsevenligheden af teksten.


Åbning af link i nyt vindue/ny tab

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ærdiEffekt
_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å:

<A HREF="https://html-hajen.dk" TARGET="_blank">HTML-Hajen</A>

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:

<A HREF="https://html-hajen.dk" ONCLICK="target='newtab'">HTML-Hajen</A>

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.


Åbning af link med ONCLICK

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:

<A ONCLICK="window.open('http://html-hajen.dk')">HTML-Hajen</A>

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:

<A ONCLICK="window.open('http://html-hajen.dk')" ONMOUSEOVER="this.style.cursor='pointer'; this.style.color='Red'" ONMOUSEOUT="this.style.color='Black'">HTML-Hajen</A>

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:

<A ONCLICK="window.open('http://html-hajen.dk', '_self')">HTML-Hajen</A>

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

<A ONCLICK="window.open('http://html-hajen.dk', 'newtab')">HTML-Hajen</A>



Styling af nyt vindue med ONCLICK

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ærdiEffekt
widthVidden af vinduet i pixels. Man specificerer ikke at det er pixels.
heightHøjden af vinduet i pixels. Man specificerer ikke at det er pixels.
leftVinduets afstand fra venstre side af skærmen, i pixels. Man specificerer ikke at det er pixels.
topVinduets afstand fra toppen af skærmen, i pixels. Man specificerer ikke at det er pixels.
titlebarSkal det nye vindue have en titlebar? Her har man kun mulighederne yes og no.
menubarSkal det nye vindue have en menubar? Her har man kun mulighederne yes og no.
toolbarSkal det nye vindue have en toolbar? Her har man kun mulighederne yes og no.
locationSkal det nye vindue have en location bar? Her har man kun mulighederne yes og no.
scrollbarsSkal det nye vindue have scrollbars? Her har man kun mulighederne yes og no.
statusSkal det nye vindue have en statusbar? Her har man kun mulighederne yes og no.
resizableSkal 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:

<A ONCLICK="window.open('http://html-hajen.dk', 'Navn på vindue', 'width=300, height=350, resizable=yes, menubar=no, toolbar=no, scrollbars=no')">Link med navn på vindue</A>

<A ONCLICK="window.open('http://html-hajen.dk', '_blank', 'width=300, height=350, resizable=yes, menubar=no, toolbar=no, scrollbars=no')">Link med _blank</A>


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.