Hyperlänkar - Att länka till en annan sida
H:et i HTML betydde ju hypertext, vilket i sin tur betydde att man kunde länka samman olika sidor med varandra. För att göra det kommer vi att behöva ytterligare en ny tagg.
Grund för exempel
Vi utgår ifrån det exempel vi jobbat med hitintills, där vi ha en sida som heter demo.html och en bildfil som heter demo.jpg.
Låt oss nu skapa en tredje fil i vår exempelkatalog, ”demo2.html”. Denna sida ska ha följande innehåll:
Vi vill nu lägga till kod så att ordet ”här” kommer att leda till ”demo.html”-sidan. Detta gör vi genom att använda oss av a-taggen.
Att ha ord som t.ex. "här" som länkade ord kan vara lite dumt. De som använder sig av en screenreader kommer att få en lista på alla länkar som finns på sidan upplästa. Det kan då vara lite svårt att fatta vad länken "här" egentligen leder till. Kanske det hade varit bättre att använda ordet; "huvudsidan" som länk istället. Då hade det blivit lättare att förstå vart vår länk leder.
<a>
a-taggen används för att skapa hyperlänkar, dvs länkar som leder från en ”plats” till en annan. A-taggen har en handfull egna attribut. Det enda som vi bekymrar oss om just nu är ”href”. Detta är en förkortning för ”Hyper Reference” och det används för att ange URL:en till den resurs till vilken vi vill länka. Denna tagg kräver en sluttagg som markerar var elementet tar slut. Allt som innesluts i taggparet, dvs det kompletta a-elementet, kommer att vara klickbart och leda till den resurs vi anger.
I vårt demofall, skulle vi behöva ändra vår kod så att den ser ut som följer:
<p>Klicka <a href="demo.html">här</a> för att komma till huvudsidan.</p>
Detta gör att ordet ”här” kommer att vara klickbart och om vi klickar på det så kommer sidan ”demo.html” att laddas in.
Vi har skapat en relativ länk till ett dokument som finns lokalt på vår server (eller i vårt filsystem). Den angivna URL:en är så minimalistisk som en URL kan bli, det finns ingenting förutom filnamnet angivet. Eftersom vare sig schema eller auktoritet är angivet, måste resursen finnas på samma plats där vi hämtat den HTML-fil som innehåller länken. Vi anger heller ingen katalog-sökväg. Att inte ange någon sökväg alls, som i detta fallet, är den enklaste relativa sökvägen vi kan ange, då den bara anger att resurser finns i samma katalog som vår sida.
Här finns exemplet om du vill provköra utan att skriva någon kod själv...
Att länka till en extern sajt
Låt oss säga att vi vill lägga till en extra rad,med en länk som skulle ta oss till Webblingsajten. Då skulle vi kunna göra något i stil med detta:
<p>Gå till <a href="http://webbling.se/">Webbling</a>.</p>
Här har vi lagt till en schema-del till vår URL. Det betyder i de flesta fall att man länkar till en extern resurs. I det här fallet har vi angett att vi vill hämta något ifrån servern ”webbling.se”.
Då vi inte har angett något filnamn på den resurs vi ska hämta, så kommer webbservern att returnera den default-sida som finns angiven på sajten. Vad som är default-sida kan vi inte styra ifrån klientens sida, det är enbart på webbservern man kan konfigurera något sådant. Det vanligaste är dock att man får den sida som heter ”index.html”, eller möjligen ”index.htm”, då detta är standardinställningarna på de flesta webbservrar.
Om servern har https tillgängligt, dvs kryptering, så bör vi använda oss av det. Då får användaren dels en säker förbindelse till vår sida, dels visar webbläsaren att sajten ifråga är verifierad och korrekt. Vi kan länka till en dylik sida med:
<p>Gå till <a href="https://webbling.se/">Webbling</a>.</p>
Bilder som länkar
Skulle vi vilja att vår bild, ”demo.jpg”, ska vara klickbar, skulle vi kunna göra något i stil med:
<a href="https://exempel.webbling.se/exempel.html">
<img src="demo.jpg" alt="En demobild">
</a>
Eftersom vårt a-element i det här fallet innehåller en bild, så skulle vi alltså få en klickbar bild. När vi klickar på den skulle webbläsaren försöka läsa in dokumentet "exempel.html" ifrån servern "exempel.webbling.se" med hjälp av ”https”-protokollet. På liknande sätt kan man göra det mesta i en webbsida klickbart och länkat till någon typ av resurs.
Här finns ett exempel som inkluderar dessa länkningstyper.
Fragment
Man kan även ange vad som kallas för ett fragment när man anger en URL. Ett fragment är ett URL-tillägg som pekar på en specifik position i en webbsida. Det vill säga vi behöver inte nödvändigtvis starta ifrån toppen av en sida. Med hjälp av fragment kan vi även navigera inom en och samma sida.
Fragment anges genom att man lägger till ett ”#”-tecken i slutet av en URL. Efter detta skriver man sen namnet på ett id som finns i sidan. Ett id är ett specifikt och unikt namn som enbart får förekomma en gång i varje sida. Vi kommer att gå in mycket mer på id och klasser senare.
För att skapa ett id lägger man till det globala attributet ”id” i en tagg. Låt oss säga att vi vill ge vår exempelbild ett specifikt id. Det skulle kunna se ut så här:
<img id="demobild" src="demo.jpg" alt="En demobild">
I och med detta har vi skapat ett unikt id, som är associerat med vår bild. Därmed har vi även skapat en plats till vilken vi kan länka med hjälp av ett URL-fragment.
För att skapa en länk som leder direkt till vår bild, skulle man kunna göra så här:
<a href="demo.html#demobild">Se bild</a>
Om man klickar på den länk som skulle bli resultatet av ovanstående kod, skulle sidan ”demo.html” laddas in och webbläsaren skulle scrolla i innehållet så att bilden med id ”demobild” skulle hamna längst upp.
Att länka inom en och samma sida
Om man vill skapa länkar som leder till andra platser i ett och samma dokument, kan man använda sig av fragment. Precis som i ovanstående exempel skapar man de id:s till vilka man ska kunna hoppa. Sedan adresserar man sin ”href” till att peka på en URL med enbart fragment-delen, t.ex.
<a href="#demobild">Se bild</a>
Ovanstående kod skulle resultera i en länk som leder till id:n ”demobild” i samma dokument som länken finns i. Oftast hanterar webbläsarna en sådan länk genom att hålla kvar samma sida och enbart scrolla i sidan så att passagen som har det sökta id:t hamnar i toppen av sidan.