Detta inlägget skriver jag i syfte om att informera er läsare som sysslar med- och är intresserade utav webbdesign/webbutveckling eller kanske bara datorer och internet i allmänhet och någon gång stött på länkadresser i något sammanhang.
För många som använder internet idag så känner de säkert igen länkar / URL:er som ser ut som t ex: http://www.domain.se , eller www.domain.se eller domain.se .
Alla ovan är giltiga länkar som tar med olika delar, för webbutvecklingssyfte brukar man använda sig av 2 typer av navigerings-länkadresser när man hänvisar till material som skall användas på sidan, eller hämtas in från utomstående källor: Globala/Absoluta resp. Lokala adresser.
Absoluta/Globala länkadresser
Den första är den absoluta/globala länkadressen, som inkluderar http://www , vilket är den del av en länkadress som indikerar bl. a. vilket protokoll som används för kommunikationen webbläsaren hanterar. Protokoll är utanför det jag tänkt gå igenom, men kan åtminstone nämna att http är HyperText Transfer Protocol. Och som jag nämnt vid ett tidigare tillfälle är i stort sett ”hypertext” = webbinnehåll. Vilket då gör att protokollet på svenska skulle kunna kallas webbinnehålls överförings protokoll.
Som ni säkert också noterat så är absoluta/globala länkadresser ofta inkluderande domännamnet för själva webbsidan som länken leder till.. Exempel: www.domain.se
Hur som helst, det var en typ av adresser som används, och den brukar användas speciellt om man hänvisar till innehåll från externa, eller utomstående källor annat än ens egna webbsida.
ATT OBSERVERA! När dessa länkadresser används så hänvisar ni till någon annans webbserver/webbhotell, vilket innebär att ni ”lånar/snor” deras resurser för att kunna ladda det externa innehållet till er webbplats – i vissa fall anses detta som okej, i andra, inte lika okej.. Det är upp till er även här att ha koll på när det är lämpligt att använda sådana adresser, speciellt om ni gör webbprojekt åt kunder, då kan det vara extra viktigt(!).
Lokala länkadresser
Lokala länkadresser är den andra typen av länkadress som är populär att använda sig utav när man pysslar med webbutveckling. Lokala länkadresser utgår från själva källkods/webbdokuments-filen som skall hänvisa till innehåll via länkadress. Som exempel för detta kan ni föreställa er att vi har vår index.html webbdokuments fil som har en <img> tagg källa (src) som skall peka på en bild i en undermapp som vi har på vår webbserver eller webbhotells domän inuti en undermapp.
För att lättare förstå Lokala länkadresser kan det vara behjälpligt att se hierarkin framför sig, därför har jag tagit en screenshot av en exempel-hierarki som ni kan jämföra med och se hur jag menar, se nedan:
Mapp-hierarki för webbutvecklings projekt
Som ni då kan se i ovan bild så har vi index.html i den s.k. ”rotmappen” – högsta hierarkiska lagret i projektmappen, och sedan har vi en bild: fruit.png inuti mappen bilder.
Med detta vill jag då visa och jämföra att en Lokal länkadress hade bara sett ut som följer: bilder/fruit.png då den utgår från källkodsfilen som skall hänvisa till bilden och navigerar inuti egna webbservern skulle man kunna säga. http://www. har man inte med som ni ser, och inte heller själva domännamnet i fråga för webbsidan. För lokala länkar är allt som behövs navigering utifrån filen man länkar från inuti ens egna server/domän.
Globala/absoluta länkar vs. lokala länkar
Global/absolut länk:
http://www.domain.se/bilder/fruit.png
Lokal länk:
bilder/fruit.png
Om din webbsida finns på www.domain.se räcker det att ni använder er av lokala länkar, medan om www.domain.se inte är er domän, så bör ni använda globala/absoluta länkar (antaget att ni tänkt igenom just ert scenario och övervägt tillåtelse för användning, etc.).
Länkmekanik – Navigeringskommandon och funktion
Både Lokala såväl som Globala länkar har gemensamma möjligheter att navigera sig fram till olika filer och undermappar, detta tack vare båda typerna av länkar hänvisar till webbservrar, vare sig det är ens egen, en hyrd, eller någon annans.
Ni kan föreställa er länkmekanik som det sättet ni själva använder när ni navigerar er bland era egna mappar på er egna dator – fast istället för att göra det med muspekaren, så kommer vi använda kommandon i textform – typ såsom man kan göra via konsollfönster/CMD i Windows.
Gå in i undermappar
För att gå in i undermappar från en nivå ovanför den undermappen, så kan man använda mappnamnet + snedstreck (/) som t ex. ger: bilder/ för att gå in i bilder-undermappen som ni ser på screenshotten av en exempel hierarki ovan.
För att gå in i först en undermapp, och därefter ytterligare en undermapp inuti den första undermappen man gick in i, upprepar man bara samma kommando som då kan se ut såhär exempelvis: 1:a undermappnamnet + snedstreck (/) + 2:a undermappnamn + snedstreck (/), vilket då kan resultera i: bilder/slideshow/ <- om vi antar att vi hade haft en undermapp vid namn slideshow inuti bilder.
För att komma åt filer i undermappar
Så skriver ni filnamn + filtyp direkt efter snedstrecket (/) som tog er in i en undermapp där filen ni är ute efter befinner sig.
Exempel: bilder/fruit.png
För att komma åt fruit.png inuti bilder-undermappen.
Backa ur en undermapp
För att ”backa ur” en undermapp så använder man ett kommando bestående utav 2 st. punkter (.) + ett snedstreck (/), ser ut som följer: ../
Så om ni föreställer er att vi har gått in i undermappen bilder i ovan exempel, och vill ta oss tillbaka till rotmappen, så skriver vi: bilder/../ <- vilket i det här fallet är samma sak som +/- 0, med andra ord, ganska meningslöst.
När är detta användbart då om det i stort sett är meningslöst för ovan demonstrerade scenario? Jo, om ni tänker er att vi vill länka till en bild från vår styles.css stilmalls fil som ligger inuti undermappen css så måste vi först ta oss ur css-undermappen för att sen kunna gå in i bilder-undermappen för att komma åt bilden vi vill hänvisa till.
Exempel på detta (tänk er att vi länkar från styles.css): ../bilder/fruit.png <- ger oss en utmärkt lokal länkadress för att kunna komma åt bilden fruit.png från vår styles.css stilmalls fil.
1) ../ först tar vi oss ur css-undermappen. 2) bilder/ sen går vi in i bilder-undermappen. 3) fruit.png slutligen kommer vi åt fruit.png bilden i bilder-undermappen.