HTML länkar och länkning som ett koncept, är ett av de fundamentalaste koncepten för vad som är internet, utan våra länkar hade vi inte lika lätt kunnat hitta till webbplatser på ett lika effektivt sätt, eller sprida informationen så effektivt som vi kan nu.

Våra webbplatser hade haft svårt att ha menyval som ledde till andra sidor och/eller resurser utan vår förmåga att skapa länkar. Och inte heller hade vi kunnat länka till våra vänners webbsidor eller sprida/spara information vi hittat och ansett vara av värde på internet.

Länkar och länkning för webbutvecklare är ovärderliga av många anledningar, länkning används för att inkludera script, såväl som övriga resurser och filer som bilder t ex. samt för menyval som jag nämnde ovan, men även för att binda samman flertalet webbsidor vilket brukar göras för att skapa hela webbplatser.

Själva HTML länkarna däremot brukar endast användas (för min egen del iaf.) till att binda samman undersidor via menyval för en webbplats, eller för att (numera i sällsynta fall för min del) hjälpa besökare att enkelt öppna upp deras standard e-post klient för att skicka e-post meddelande till en person vars e-post adress var länkad till från en webbsida – utan att besökaren själv behöver skriva in den personens e-post adress (detta gör e-post länken såväl som att ”prompta” deras dator att öppna deras standard e-post klient, om ingen standard klient angiven så får besökaren oftast välja själv i datorns urval av e-post klienter).

Tar vi dagens bloggar som ett praktiskt exempel på användning av HTML länkar för att vägleda besökare vidare till ytterligare innehåll (så de inte ska lämna sidan oftast) – så brukar bloggar ha inlägg som besökare kommer in för att läsa, men vissa bloggar har även s.k. ”relaterade inlägg” som länkas till för att leda besökaren vidare till ytterligare innehåll.

Länkar är också förvånansvärt enkelt att lära sig i HTML, ni har redan i tidigare inlägg (URL:er och länkadresser) fått lära er de grundläggande koncepten för hur själva länkadresserna som används vid länkning är uppbyggda och fungerar för era webbsidor.

Jag är inte helt säker, men jag tror sen även att där kan förekomma en viss laddningstids skillnad om man jämför lokala länkar som direkt navigerar inuti webbserverns utrymme för sidan, respektive globala länkar som först måste slå upp domännamnet innan samma typ av webbserver utrymmes navigering för sidan kan ske som för lokala länkar. (Detta får gärna pålästa läsare kommentera och informera mig om, om ni skulle veta hur detta verkligen ligger till tillsammans med referens till källa för er information, så kan jag sedan uppdatera detta inlägg – mitt antagande här känns för mig logiskt med mina nuvarande kunskaper)

Nog om hur det funkar, vidare till hur vi gör våra länkar dårå ;)

HTML-koden för HTML länkar oavsett lokal/global länkadress

Jag kommer här visa er själva HTML elementet som utgör HTML länkar på webbsidor, såväl som vilka attribut vi bör fokusera på för våra länkar för att kontrollera hur de fungerar. Se nedan kodexempel för en lokal respektive en global HTML länk.

<a href="subpages/undersida1.html" target="">Länktext placeras häremellan (kan vara bild såväl som text)</a>

<a href="http://www.domain.se/subpages/undersida1.html" target="">Länktext...</a>

Notera ovan hur vår globala länkadress har med http://www. såväl som: domain.se, trots att man idag oftast endast behöver ange domain.se för att nå sina eftersökta webbsidor i själva webbläsaren. (Jag skulle gissa på att anledningen att man idag ofta kan komma undan utan att behöva ange http://www. är då webbläsarna antar att man är ute efter en webbsida när de identifierar ord i URL:en)

För att läsa på ytterligare om HTML-länkar ta en titt på: MDN’s referenssida för a-taggen.

Anledningen till att vi måste ange detta för globala länkar är för att informera webbläsare att länken leder till en utanförstående webbsida (oftast, kan även leda till samma sida trots global länkformatering – ett scenario då detta kan förekomma är för dynamisk PHP-kodning av webbsidor), webbsidor hämtas och presenteras med hjälp av det s.k. Hyper Text Transfer Protokollet vilket http indikerar, och www står för World Wide Web som är lite mer komplicerat att beskriva varför den står med i URL:en, man skulle kunna tro att det är någon form av ”rotmapp” till alla Internets existerande domännamn, fast är ni intresserade av att verkligen veta mer om vad det fyller för funktion så hittade jag följande superuser forumpost som kanske kan förklara det lite mer i detalj.

Brädstreck (#) som ”Dummy-URL” för testsyfte- eller tills riktig URL skall läggas in

Brädstrecket kan anges till <a> taggens href attribut för att hänvisa till den egna sidan man befinner sig på! Vilket kan vara användbart om man ska testa CSS-stilar för de olika ”lägena” en HTML länk kan befinna sig i (mer om detta i inlägg om CSS framöver). Om man inte skulle ange # som ”dummy-URL” för en HTML länks href attribut, så finns risken att det blir svårt att testa länkarna och man blir hänvisad till felmeddelande-sidor då länkadress saknas och ens besökare i värsta fall blir allmänt förvirrade av hur de kastas omkring till sidor som inte existerar (om testsidan t ex. av någon anledning skulle vara publicerad för allmänheten/utvalda få att ta del av). Då är det betydligt bättre att låta länkarna hänvisa till den egna sidan som man befinner sig på, så kommer inte potentiella besökare bli lidande av att man testar eller har ”icke-aktiva” HTML länkar.

Praktiskt exempel på hur jag menar att man använder brädstreck som ”Dummy-URL” kan ses nedan:

<a href="#" target="_top">Länktext placeras här (eller länkbild)</a>

Ni kan även se i tidigare inlägg där jag skrev om hur ID attributet kan hänvisas till som ankarlänkar på specifika sidor, och att dessa kan besökas genom att ange URL:en för sidan där ID attributet existerar, tillsammans med ett brädstreck (#) direkt efter URL:en för sidan, tillsammans med värdet för ID attributet.

Till exempel: http://www.min-webbsida.se/index.html#paragraph2

Där index.html är sidan där ID attributet för en paragraf är ”paragraph2”.

Detta kanske förklarar lite vad brädstrecket är till för när vi talar om länkadresser.

HTML-länkars ”target”-attribut och funktionen det fyller

Notera i ovan textstycke att jag lämnade target attributet utan värde, detta var av anledning att jag inte ännu förklarat vad attributet gör/fyller för funktion.

Där var lite debatt för target som ett länkattribut när HTML5 skulle introduceras, tydligen så togs attributet bort under en tid från specifikationen, vilket gjorde att man fick krångla till det med massa JavaScript för att efterapa samma funktion som tidigare fyllts av ett väldigt simpelt attribut som target faktiskt är och har varit i alla år.

Vad target attributet då gör är alltså att tala om för webbläsaren hur en specifik länk är tänkt att öppnas… Skall den öppnas som ersättande av den sidan som besökaren befinner sig på, eller ska länken öppnas i en ny flik/nytt fönster?

Där finns sammanlagt 4 st. värden för attributet, dock har jag någonsin endast behövt använda mig utav 2 av dessa. För att läsa på om samtliga attribut och allmänt få mer information om dem, så kan ni se ovan länkade MDN referenssida.

Anledningen att jag bara använt- och använder mig av 2 av de 4 tillgängliga attributvärdena, är då de resterande 2 attributvärdena som jag inte använder fyller funktioner som jag ännu inte stött på ett behov av för mina webbsidor jag skapat tidigare. Vad jag kan förstå från MDN’s referenssidan så kan de resterande två attributen vara användbara för länkar från inuti ramar/frames av olika typer som behöver förmedla länkadresserna till ramar/frames utanför den ramen som länken är placerad i. Och idag används knappt (om ens alls) ramar överhuvudtaget, finns bättre och flexiblare sätt att koda webbsidor på idag.

Undantaget är väl kanske iFrames som vi kommer skriva om lite mer i detalj framöver, för att kort bara nämna vad skillnaden mellan iFrames och Frames är, så kan jag ju säga att iFrames är en typ av ”ram” som man lägger på sin webbsida – lite som om ni tänker er en sandlåda som läggs på er tomt (webbsidans body är tomten), därefter har man möjlighet att visa andra webbsidor, PDF:er eller liknande inuti den ramen, medan Frames förr istället användes mycket för att bygga upp strukturen för hela webbsidor som täckte hela webbläsarfönstret (oftast).

Det kan vara bra att veta översiktligt att där finns 4 st. attributvärden för target, och vad respektive gör, men jag kommer bara gå igenom de två som brukar vara populärast att utvecklare använder, nämligen:

1. _top
2. _blank

Det första attributvärdet _top ersätter den sidan besökaren tittar på just nu med den sidan som länken leder till.

Det andra attributvärdet _blank öppnar istället upp länken i en ny flik/nytt fönster, sen flikar introducerades och blev desto populärare för modern webbläsare-browsing så är det mer sällan att _blank länkar öppnas i nya webbläsarfönster, oftast öppnas de till nya flikar! Själv är jag inte helt säker på utifall det går eller ej utan JavaScript, att tala om för en länk via HTML att en länk skall öppnas exklusivt i en helt ny webbläsarfönster hellre än en enkel ny flik. Kan hända att jag kollar upp även detta till framöver inlägg som jag tänkt skriva till den här sidan :)

Mailto URL – För att hjälpa besökare skicka e-post med HTML-länkar från ens webbsida

Där finns ett sätt att hjälpa besökare lättare kontakta webbplatsens ägare och liknande, och det är genom att ange en länkadress med inledningen mailto: följt av en giltig e-post adress till webbplats administratören/ägaren. Se praktiskt exempel på en länk som kan hjälpa att skicka e-post till adressen adress@mail.com:

<a href="mailto:adress@mail.com">Nå mig på e-post</a>

Vad som då kommer hända när en sådan länk klickas, är att besökarens dator kommer försöka öppna vilket än program som datorn har angivet som ”standard e-post klient”, för att kunna göra ett nytt e-post meddelande att skicka, och i ”Till:”-fältet för det e-post meddelandet kommer där att vara förifyllt den e-post adressen som ni kodade in i er mailto-länk.

Webbsidor som inte använder PHP och där denna typ av begränsad kontaktmöjlighet/hjälp på traven är OK, duger detta, däremot om man vill ha lite mer sofistikerade sätt att skicka e-post på från sin webbsida, bör man läsa på om PHP eller liknande back-end språk som kan behandla kontaktformulär och skicka ifylld data direkt från webbservern till en inprogrammerad e-post adress.

Slutkläm

Jag ser nu att där finns en hel del attribut som jag inte går igenom här för HTML-länkar på MDN’s referenssida, och anledningen till det är dels för att detta skall vara pure basics, och dels för att jag själv ännu inte använt något annat än det jag gått igenom i detta inlägget för mina egna sidor genom åren, och därför tror jag det kan räcka med att bara gå igenom dessa detaljer för HTML länkar för den här gången :)

Kan hända att vi går in lite mer på djupet i framtida inlägg om ni skulle vara intresserade av detta, men annars tror jag att jag kommer gå vidare och fokusera på att få klart inlägg om grunderna först och främst.

Kunskaperna vi gått igenom i detta inlägg bör vara tillräckliga för att ni själva ska kunna sammanlänka era egna undersidor, såväl som att länka till era kompisars eller andra utanförstående webbsidor från era egna webbplatser! Samt hjälpa era besökare någotsånär enklare skicka e-post från era webbsidor.

Länkar är väldigt bra att känna till och ni kommer att ha användning för kunskapen genomgången i detta inlägg för samtliga av era egna webbsidor ni själva utvecklar i framtiden.

Alla webbsidor jag själv stött på såhär långt har haft någon form av länkning på ett eller annat vis, och för detta används alltid HTML-länkar som grund! Enjoy :)