Definitionen av referenser görs i HTML via a-elementet. Innan jag visar er dess användning, några allmänna anvisningar om hyperlänkar. Tänk noga på bra referenstexter. Med en tråkig tillbaka hjälper du vanligtvis ingen. (Om en besökare kommer från en extern sida, vet han vanligtvis inte vad som menas med tillbaka). Försök att välja beskrivande referenstexter.
Hyperlänkar följer alltid samma princip i HTML.
<a href="videos.html">Aktuella videor</a>
Atributet href tilldelas a-elementet. Detta href förväntar sig i sin tur målet för referensen som värde. I det föregående exemplet refererades till filen videos.html. Denna finns i samma katalog som HTML-filen där hyperlänken definierades.
Vid definitionen av hyperlänkar gäller annars reglerna som även presenterades i samband med att infoga bilder.
Ni kan för övrigt inte bara definiera interna projektreferenser. Hyperlänkar kan också ställas in till externa filer och domäner.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Texten mellan öppnande <a> och stängande </a> är slutligen referenstexten. Som standard visas denna text understruken av webbläsarna.
Ange målfönster
När man klickar på en hyperlänk öppnas referensmålet i det aktuella webbläsarfönstret. Det är vanligtvis helt i sin ordning. Det kan dock hända att man till exempel har satt en referens till en extern domän. Om en besökare klickar på den här länken bör referensmålet öppnas i en ny webbläsare eller flik. Fördelen med detta alternativ: Er webbplats förblir öppen i bakgrunden.
Ni bör dock inte öppna varje länk på er sida i ett externt fönster, eftersom besökarna snabbt blir irriterade av det.
Med attributet target för a-elementet kan man bestämma målfönstret där det respektive referensmålet ska öppnas. HTML erbjuder initialt tre standardvärden för target.
• _blank – Referensmålet visas i ett nytt webbläsarfönster.
• _self – Öppnar referensmålet i det aktuella webbläsarfönstret.
• _parent – Här kan man bryta ut från ramen. (Observera att ramar inte stöds i HTML5. I vilket fall borde man inte längre använda den tekniken eftersom det idag finns bättre alternativ. Om ni vill veta mer om ramar, hittar ni information exempelvis på sidan http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top – Används också i samband med ramar. Ni kan använda detta för att öppna referensmålet utanför ramuppsättningen.
Här är ett exempel på hur man använder target-attributet:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
I det här fallet skulle referensmålet http://www.psd-tutorials.de då öppnas i ett nytt fönster/flik. Samma effekt skulle man för övrigt uppnå även om man istället för det reserverade namnet _blank använde ett fantasinamn som halligalli. Om ni använder target rekommenderar jag dock faktiskt att ni använder ett av de reserverade namnen.
Bestäm referensbasen
Ni kan definiera en referensbas i head-delen av HTML-filen. En sådan referensbas gör att alla referensmål visas i ett specifikt webbläsarfönster. Detta är naturligtvis återigen främst intressant i samband med ramar.
Dock är det också praktiskt om ni till exempel vill låta alla länkar öppnas i ett nytt webbläsarfönster med _blank>. Ställ er då en länklista. Om referensmålen ska öppnas i ett nytt fönster skulle det se ut så här:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Ni skulle därför behöva tilldela varje a-definition ett target-attribut.
Det är inte särskilt effektivt, som ni ser. Ännu mindre effektivt blir det sedan om ni om några månader bestämmer att referensmålen inte längre ska öppnas i ett nytt fönster. Då skulle ni behöva justera target-attributen för alla länkar. Detta kan förhindras genom ovan nämnda referensbas. Den definieras med hjälp av elementet base inuti head. Man tilldelar base-elementet attributet target med det önskade värdet. Här är ett exempel på hur det kan se ut:
<!DOCTYPE html> <html lang="sv"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Det sparar er en hel del tangentarbete.
Definiera ankare
Hur ni kan sätta hyperlänkar till andra filer har ni redan sett. På samma sätt kan man dock också definiera s.k. ankare inom en HTML-fil. Därefter kan ni skapa referenser till just dessa ankare. Praktiskt är det exempelvis på omfattande sidor. På så sätt kan man definiera ett innehållsförteckning i början av dokumentet, där besökarna kan hoppa till de relevanta delarna för dem utan att behöva scrolla genom webbläsarfönstret.
Ankare skapas med a-elementet. Dock tilldelas ankardifinitionerna inte ett href-attribut, utan ett name-attribut.
<a name="seitenanfang">Innehåll</a> <a name="kapitel1">Innehåll Kapitel 1</a> <p>Här följer mycket text.</p> <a name="kapitel2">Innehåll Kapitel 2</a> <p>Här följer mycket text.</p>
Ni kan fritt välja ankarnamn. Jag rekommenderar dock att ni håller dem så korta som möjligt, endast använder gemener och undviker specialtecken.
För att referera till ett ankare, definierar man en vanlig hyperlänk, precis som visades i början av denna handledning.
<a href="#seitenanfang">Till början av sidan</a>
I href-attributet tilldelas ankarnamnet som värde. Det avgörande här är att en fyrkantssymbol läggs framför ankarnamnet.
Ni kan även skapa referenser till ankare över filgränser. I följande exempel utgår jag från att det finns en fil news.htm som ligger i samma katalog som den faktiska HTML-filen. Inom news.htm har ankaret seitenanfang definierats. För att referera till detta, skrivs ett fyrkantstecken efter namnet på målfilen (news.htm). Efter det följer ankarnamnet.
<a href="news.htm#seitenanfang">Till början av sidan</a>
Så enkelt kan ni alltså skapa referenser till ankare i vilken som helst fil.
