Linkets anatomi. Koden ser i udgangspunktet sådan ud: <a href= URL >Linktekst</a> Det betyder koden: < Her starter et nyt stykke kode

Transkript

1 Linkets anatomi Links er i internettets DNA. Det er en af byggestenene i hele den store, store web- krop. Det er nyttigt at kunne spotte, forstå og håndtere et link, når du ser det i HTML- koden. Koden ser i udgangspunktet sådan ud: <a href= URL >Linktekst</a> Det betyder koden: < Her starter et nyt stykke kode a href (Anchor) her følger et link Linket henviser til denne URL starter med > Det var første del af link- koden Så følger typisk den tekst (her vist som Linktekst) som er linket, ofte vist med en anden farve eller med understregning. Men det kan også være et billede, som er linket. </a> Slut på hele link- koden Koden kan også se sådan ud lidt længere og med flere attributter: <a href= URL target = _blank title= >Linktekst</a> Det betyder koden: target title Skal linket åbne i et nyt vindue eller i samme vindue? Hvis du ikke bruger target, vil den nye side åbne i samme vindue. Hvis du vil åbne i et nyt vindue, skriver du target= _blank Giver ekstra information om linket. Browsere vil vise informationen i en lille tekstkasse ved mouseover

2 Eksempel fra JP.DK: Sådan ser koden ud: <a href=" hjalp med at skjule formuer</a> Forstå koden: LÆS OGSÅ er bare almindelig tekst. Teksten Sydbank hjalp med at skjule formuer linker til en URL, som begynder med Der er ikke brugt title- attribut, dvs. der kommer ikke en lille box frem ved mouseover, som fortæller hvad det er for et link. Der er ikke givet et target- attribut. Dvs. linket åbner i samme vindue.

3 Eksempel fra B.DK (Berlingske): Sådan ser koden ud: <p>kulturminister Uffe Elbæk (R) har onsdag udpeget en ny bestyrelse for det Kongelige Teater. </p> <p>ny bestyrelsesformand bliver tidligere Tryg- direktør <a href=" paa- toppen">stine Bosse</a>, der afløser Lars Pallesen, som har siddet på posten siden 2008.</p> <p><strong>skal spare 100 millioner</strong></p> <p>nationalscenen står over for en række besparelser, der blandt andet betyder, at omkring <a href=" end- ventet- skal- fyres- paa- det- kgl">50 personer skal fyres</a>. </p> Forstå koden: Her er lagt to links ind i teksten. Det ene linker til en tidligere artikel om Stine Bosse, den anden til en tidligere artikel om fyringerne på Det kongelige Teater. Der er ikke brugt nogen title- attribut, dvs. der kommer ikke et lille skilt op ved mouseover, som fortæller, hvad linket gør. Der er ikke givet et target- attribut. Dvs. linket åbner i samme vindue.

4 En særlig slags links: Ankre Et anker er et internt link eller et bogmærke i en artikel. Et almindeligt link linker fra én webside til en anden, fra én URL til en anden Ankre linker frem og tilbage mellem dele af samme artikel, på samme URL Et eksempel på et anker kan være, at man i en længere artikel ønsker at kunne springe fra et afsnit til et andet. Det kan være nyttigt frem for at skulle scrolle frem og tilbage gennem en lang artikel. Sådan fungerer ankre i teksten: Eksempel på tekst: Forklaring og Rubrik Her starter artiklen x xxxxx xxxxxxxxx xx x xxxxxxx xxxx xxxxxxx x xxxxxxx xxx xx xxxx xxxxx xxxxx Gå til nyttige tips xxxxxxx x xxxxxxx xxx xx xxxx xxxxx xxxxxxxxx xx x xxxxxxx xxxx xxxxxxx x xxxxxxx xxx xx xxxx xxxxx xxxxxxxxx xx x xxxxxxx xxxx xxxxxxx x xxxxxxx xxx xx xxxx Xx x xxxxxxx xxxx xxxxxxx x xxxxxxx xxx xx xxxx xxxxx xxxxxxxxx xx x xxxxxxx xxxx xxxxxxx x xxxxxxx xxx xx xxxx xxxxxxx x xxxxxxx xxx xx xxxx xxxxx xxxxxxxxx xx x xxxxxxx xxxx xxxxxxx x xxxxxxx xxx xx xxxx xxxxx xxxxxxxxx xx x xxxxxxx xxxx xxxxxxx x xxxxxxx xxx xx xxxx Nyttige tips xxxxxxx x xxxxxxx xxx xx xxxx xxxxx xxxxxxxxx xxxxx xxxxxxxxx xx x xxxxxxx xxxx xxxxxxx x xxxxxxx xxx xx xxxx xxxxxxx x xxxxxxx xxx xx xxxx xxxxx xxxxxxx x xxxxxxx xxx xx xxxx Til toppen Teksten gøres til et anker med denne <a name= top >Her starter artiklen</a> Teksten linker til et anker med denne <a href= #tips >Gå til nyttige tips</a> Teksten gøres til et anker med denne <a name= tips >Nyttige tips</a> Teksten linker til et anker med denne <a href= #top >Til toppen</a>

5 Sådan laver du et anker: Markér den tekst, du vil gøre til et anker. Markeringen bliver ikke synlig for læseren: <a name= ankernavn >Ankertekst</a> Ankernavn er det navn, du giver ankret Ankertekst er den stump tekst, du vil gøre til et anker Sådan linker du til et anker: Markér den tekst, du vil gøre til et link. Markeringen bliver synlig for læseren som et link: <a href= #ankernavn >Linktekst</a> Ankernavn er det navn, du giver ankret Linktekst er den stump tekst, du vil gøre til et link Husk når du bruger ankre: Browserens tilbageknap tager dig tilbage til den foregående URL ikke til det foregående anker ;- ) Hvis du synes sådan noget med koder er spændende, så kan du lære mere på fx Ole Rode Jensen januar 2011

6 En særlig slags links: Mailto Gør fx din byline til et mailto- link. Dvs. når nogen klikker på bylinen, starter brugerens mailprogram automatisk og skriver dig ind i modtager- feltet Eksempel: Af Ole Rode Jensen Koden ser sådan ud: <a href= mailto:orj@dmjx.dk >Ole Rode Jensen</a> I stedet for URL en skriver du mailto: og så - adressen Eksempel fra B.DK (Berlingske): Koden ser sådan ud: Af <a href="mailto:lodr@berlingske.dk">louise Lyck Dreehsen</a>