Formatering af links
Links er uden tvivl rygraden i World Wide Web. Klik på et link, og du bliver straks stillet om til en anden webside på dit eget webhotel eller – sandsynligvis – på et webhotel på en server i Tokio, i San Francisco eller Kiev. Du ved det ikke, og det er også lige meget. Du har klikket for at læse en bestemt side et andet sted på nettet, og det kommer du til.
Links på dine sider er dels interne for webstedet – der vil sige fra en side til en anden side på samme websted – og dels eksterne, det vil sige links til websteder, der kan indeholde oplysninger af interesse for læserne af din webside.
Et link skabes af a-markøren, således:
<p><a href="http://webdesign101.dk" title="Jørgen Farum Jensens webdesign notesbog"> Webdesign 101</a></p>
Link-markøren er en inline-markør og skal derfor være indeholdt i et blokelement, her et afsnitselement (p).
href-attributten indeholder URI'en – webadressen, tidligere kaldt URL (for Uniform Ressource Locator i stedet for det mere nutidige Uniform Ressource Indicator) – til den webside, vi ønsker at indlæse i browservinduet. Dernæst følger title-attributten med et indhold, der relaterer sig til den webside, der linkes til. Det er en nyttig oplysning for søgerobotter og andre tekstanalyseværktøjer.
title-attributten er også nyttig for den, der læser websiden, hvis linkteksten i sig selv ikke er helt beskrivende for den side, der linkes til. title-attributten vises nemlig som en lille tekstboble under linket, hvis man et øjeblik lader musen hvile på linkteksten.
Som inline-markør vil linkteksten mellem markørens begyndelse og lukning få samme skrift og skriftstørrelse som forældremarkøren p. Derudover har linket nogle visuelle egenskaber, der markerer det som et link:
Når musen er over et link ændres markøren til en lille hånd. Linket er understreget. Og linket har forskellige farver, alt efter dets tilstand.
De tilstande, der er tale om, kaldes pseudoklasser, og er følgende
- Linket har ikke været brugt (til at indlæse til en anden side). (a:link-tilstanden).
- Linket har været brugt til at besøge en anden side (a:visited-tilstanden).
- Musemarkøren befinder sig over linket (:hover-tilstanden)
- Linket er i fokus (:focus-tilstanden)
- Linket er aktivt (a:active-tilstanden)
I et stylesheet kan opstilles formdeklarationer for hver af disse tilstande:
a {text-decoration:underline; background-color:transparent;}
a:link {color:blue;}
a:visited {color:purple;}
a:focus {color:maroon; text-decoration:none;}
a:hover {color:maroon; text-decoration:none;}
[a:active {color:black;}]
I et stylesheet er den orden, hvori du opstiller dine formdeklarationer, som regel ligegyldig, men det gælder ikke lige her. Du skal bruge den orden jeg har anvendt i ovenstående oversigt. Hvis du for eksempel bytter om på a:visited og a:hover vil de du ikke få :hover-tilstand til besøgte links.
Ifølge W3C-standarden skal ethvert element kunne bringes i hover-stand, ganske som et link. Det er imidlertid ikke tilfældet for Internet Explorer 6 og tidligere. Har du brug for dette er det nødvendigt at ty til en JavaScript eller JScript løsning, for eksempel Peter Nederlofs csshover.htc-fil.
a:active er tilstanden hvor musetasten er trykket ned, men ikke sluppet. Den er der ikke noget at bruge til i praksis, dels fordi den ikke tilfører websiden nogen nyttig funktionalitet, og dels fordi Internet Explorer viser denne tilstand helt forkert.
Forskellige udformninger af links
På en webside har du som regel brug for at kunne formatere links på mindst to forskellige måder: links, der indgår i artikelteksten og links, der er en del af et navigationsapparat.
For så vidt angår det sidste har jeg skrevet et utal af artikler om dette, se blot Introduktion til stylesheet-formaterede menuer. Så det vil jeg ikke bruge plads på her.
For så vidt angår det første, har jeg den opfattelse at links i en almindelig artikeltekst
i det store og hele skal have den standardudforming, der ligger implicit i W3C-standarden.
Det vil sige, at linkteksten skal bruge den samme skrift i den samme størrelse som artikelteksten i øvrigt,
at links skal være understregede, at ikke-besøgte links skal være blå og besøgte links lilla. Jeg synes den normale blå (blue, #0000ff) er lige fersk nok, så jeg bruger ofte farven navy eller en mere grumset blå (#225577).
Jeg kan ikke lige huske om der findes nogen standard eller sædvane for linkets øvrige tilstande, men under alle omstændigheder er der her råderum for en smule kreativitet, i hvert fald for så vidt farve og understregning.
:focus og :hover tilstandene
:hover-tilstanden opnås, når musemarkøren befinder sig over linkets aktive område. I en artikeltekst vil det typisk svare til linkteksten.
:focus-tilstanden indtræder, når brugeren har brugt tastaturet til at tabulere sig frem til linket.
Hvor førstnævnte påkalder sig betydelig interesse fra alle der beskæftiger sig med at konstruere hjemmesider, kniber det en smule med den sidste. Det er synd. Folk med motoriske funktionsnedsættelser er lige så interesserede i at bruge internettet som vi andre mere heldige. De er tilgodeset med den :focus formdeklaration jeg har lavet i ovenstående, hvor links i dene artikel bliver rødbrune uanset om musen er over dem eller om der er tabuleret frem til dem.
Browseren har sit eget signal for focus-tilstanden, idet et link, der er valgt med tastaturet får en stiplet linje rundt om – en slags outline-funktion. Den kan fjernes med en stump JavaScript, men det er ikke noget jeg vil anbefale: Websidekonstruktion går ud på at tilføje websiden form og funktionalitet, ikke at fjerne form og funktionalitet.
Hvorfor formatere a:link?
a-markøren har én anden funktion end at være link, nemlig funktionen som bogmærke (anker):
Har du på en webside et bogmærke som for eksempel <a name= "sektion4">Sektion 4</a>
vil du kunne linke til dette bogmærke ved hjælp af linket
<a href="#sektion4">Gå til sektion 4</a>. Men hvis du har en farve for a-markøren, vil
denne farve være gældende for begge de to udformninger og ikke kun for linket.
Billeder som links
Der er intet i vejen for at bruge et billede i stedet for en linktekst:
<a title="Firefox er en bedre browser" href="http://www.mozilla-europe.org/da/"> <img src="/www/res/getfirefox.gif" width="110" height="32" alt="Firefox er en bedre browser" /></a>
Den blå/lilla kant rundt om billedet signalerer med de almindelige linkfarver
at der et tale om et link. De er imidlertid så forfærdeligt grimme, at de så godt som altid
fjernes med en formdeklaration i det globale stylesheet: img {border: none;}.
Men dermed risikerer jeg jo at læseren slet ikke opdager at der er tale om et klikbart element.
Læren af det er at man kun skal bruge billeder i stedet for linktekster med en vis omtanke
for hvorledes læseren opfatter det.
Det er en lidt anden sag, når grafiske elementer anvendes som en del af en egentlig menu. I artiklen Grafisk rollover kun med CSS skriver jeg noget mere om dette.
Du kan oprette et såkaldt Image Map på et billede. Derved gør du en del af billedet til et klikbart område, et såkaldt hotspot. Jeg vil ikke skrive mere om dette her, emnet er udførligt behandlet i min bog “Webdesign – illustreret håndbog”.
Jeg vil dog her pege på en meget snild udnyttelse af et image map til en grafisk menu: Grafisk rollover med ringe båndbredde.
Dokumentinterne links
Du kan linke til et vilkårligt element på websiden ved at give det pågældende element en id og oprette et link på følgende form:
<p><a href="#sidehoved" title="Gå til toppen af websiden"> Gå til toppen af websiden</a></p>
Ovenstående vil få følgende udseende:
Linkets øvrige attributter
Et link kan have andre attributter end lige href-attributten og title-attributten. De mest interessante af disse er:
- Tabindex-attributten
som afgør hvilken orden der kan tabuleres frem igennem de links, der optræder på siden.
Artiklen Tabindex-attributten beskriver nærmere denne attribut og dens anvendelse.
- Accesskey-attributten
der tildeler et link et tal eller et bogstav, der gør det muligt at vælge et link ved hjælp af kontroltasten ALT og linkets tal eller bogstav.
Artiklen Accesskey-attributten beskriver nærmere denne attribut og dens anvendelse.
November 2009