Relative og absolutte filbaner

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008

På bakgrunn av endel forvirring rundt filbaner, lager jeg denne tråden for å forklare temaet så inngående som mulig.

Tro meg, når jeg sier at jeg har tuklet og rotet fælt med dette selv, hehe.

Utgangspunktet for filbaner

For å lære hvordan man angir riktig path (filbane), tar vi utgangspunkt i en at vi skal legge inn et bilde via img-taggen i ei HTML-fil, men konseptet gjelder i alle tilfeller hvor du skal legge inn filbaner. Noen eksempler er:

  • <a href="HER"> (HTML-link)
  • background: url('HER'); (Bakgrunn i CSS)

For enkelhetsskyld dropper vi noen attributter vi normalt bruker i img-taggen, og forholder oss kun til:

<img src="" />

Plassering av bildefil på webserver

La oss si du har et webhotell, her har du en katalog (mappe) som heter bilder. I denne katalogen har du bildet meg.jpg.

http_docs      (katalog) [web root]
  index.html   (html-dokument)
  bilder       (katalog)
   meg.jpg     (bildefil)

Merk at katalogen http_docs kan ha et annet navn. Den kan gjerne hete www, web eller www_docs. Poenget er at det er rotmappen, alt du legger i denne mappen blir tilgjengelig på internett via et et eventuelt domene.

Plassering av bildefil på lokal PC

Du har også de samme filene på PCen din lokalt. Her har du lagt dem, feks slik:

(C:/) min_nettside    (katalog)
       index.html     (html-dokument)
       bilder         (katalog)
        meg.jpg       (bildefil)

C:/ angir at katalogen min_nettside ligger på harddisken kalt C.

Absolutte filbaner

Absolutte filbaner er filbaner der hele banen brukes. En absolutt filbane kan feks være en URL, eksakt path på webserveren eller eksakt filbane på den lokale PCen din. Her er forklaringene.

Absolutt filbane

Du kan angi absolutt filbane både på webserveren og lokalt, svakheten er at den absolutte filbanen da kun gjelder på webhotellet eller lokalt. (Såfremt du ikke installerer en webserver på PCen din, mer om dette i slutten av dette innlegget).

Absolutt filbane på webhotell

<img src="/bilder/meg.jpg" />

Legg merke til at vi ikke inkluderer katalogen http_docs i den absolutte filbanen. Grunnen til det er at webserveren ikke ser utenfor denne katalogen, ergo er http_docs web rooten.

Absolutt filbane på lokal PC

<img src="C:/min_nettside/bilder/meg.jpg" />

Laster man opp dette til et webhotell, så vil ikke bildet vises for andre enn deg. Her henviser man til en fil på din lokale datamaskin, ikke på webserveren

Absolutt filbane med URL

Ved å angi full URL til ressursen, så vil det fungere både på webhotellet og lokalt, men det forutsetter at PCen er koblet mot nett (fordi bildet hentes via nettet).

<img src="http://www.domene.com/bilder/meg.jpg" />

Legg også her merke til at vi utelukker http_docs (rotmappen på webhotellet ditt). Dette er igjen fordi webserveren ikke ser utenfor denne katalogen.

Relative filbaner

Alt er relativt, sa en vis mann (tror jeg). Uansett, med relative filbaner mener vi at plasseringen angis i forhold til hverandre.

Relative filbaner fungerer både lokalt og på webhotellet ditt. Bakdelen er at dersom du flytter ei fil, så må du oppdatere alle de relative filbanene i den fila for at de skal virke(!)

Relativ filbane

<img src="./bilder/meg.jpg" />

Om vi anga denne taggen i index.html dokumentet, ville vi finne bildet. Legg merke til punktumet før den første slashen. Det betyr at man skal se fra den katalogen hvor dokumentet som etterspør bildet ligger.

Altså, siden index.html ligger i enten C:/min_nettside (lokalt) eller på webhotellet under / (root), så vil punktummet finne ut hva som gjelder.

Man angir rett og slett plasseringen til kilden (bildet) fra dokumentet (indexfilen) som etterspør kilden.

Bla bakover med relative filbaner

For å forklare relative filbaner inngående, må vi i tillegg til katalogene og filene vi har satt opp i eksemplet, også introdusere noen nye.

La oss si du har følgende filstruktur på den lokale PCen din.

(C:/)   min_nettside    (katalog)
          bilder        (katalog)
           meg.jpg      (bildefil)
          meg           (katalog)
           om-meg.html  (html-dokument)
          index.html    (html-dokument)

Legg merke til at HTML-fila om-meg.html ligger i katalogen meg.

Hvis vi ønsker å bruke bildet meg.jpg i HTML-dokumentet om-meg.html ved hjelp av relative filbaner, så må vi bla bakover.

Vi må da bruke følgende for å sette inn bildet i om-meg.html:

<img src="../bilder/meg.jpg" />

To påfølgende punktum før slash betyr å bla bakover. Det som skjer er at man blar seg ut av katalogen (meg) hvor HTML-dokumentet om-meg.html ligger, for så å bla seg inn i mappa bilder hvor bildet (meg.jpg) ligger.

Best praksis med filbaner

Til slutt vil jeg gi noen gode råd angående bruk av filbaner. Jeg anbefaler å bruke absolutte filbaner av typen:

<img src="/bilder/meg.jpg" />

Haken er at du må sette opp en webserver hjemme, om det skal fungere både lokalt og på webhotellet ditt.

Grunnen er at den absolutte filbanen til ressurser (bilder, dokumenter o.l) må være lik lokalt som på webhotellet.

Det oppnår man ved å installere en webserver på PCen og angi en rotmappe, feks min_nettside til å være rotkatalogen på webserveren.

Kom gjerne med spørsmål, om det er noe du ikke forstår.

razor
razors bilde
Avlogget
Ble med: 11.12.2009
web server

Dette så relativt greit ut, men kommer sikkert med noe fler spørsmål etterhvert ^^

ok, så jeg burde installere en web server på pc`n ?

*Hvordan gjør jeg så dette?

jeg har forresten et web hotell i one.com. har jeg ikke det jeg trenger da?

 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Filbaner på lokal webserver og webhotell

Ja, dette er absolutt overkommelig, bare man setter seg litt inn i det, hehe. :)

Webhotell fra one fungerer ypperlig det, men hvis du bruker absolutte filbaner, slik jeg anbefaler, så forutsetter det at du laster opp HTML-dokumentene og alt annet til webhotellet for at ting skal funke. Bruker du relative filbaner, så funker det både lokalt og og på webhotellet, men hvis du flytter på filene, så vil ikke ting virke lenger. Da er jo de relative filbanene feil.

Installere webserver på lokal maskin

Grunnen til at man ofte installerer webserver lokalt i tillegg til å ha et webhotell, er enkelt og greit fordi man kan drive med webutvikling som ikke er live, for så å laste opp ting så snart man er fornøyd.

Jeg har skrevet kort om hvordan man kan installere webserver, databaseserver og PHP i denne tråden. Hvis du bare driver med HTML og CSS, så trenger du bare Apache (som er webserveren).

I essensen vil en lokal webserver satt opp med Apache virke som et webhotell. Du trenger ikke å bruke FTP for å laste opp filene, fordi webrooten ligger på din lokale maskin.

Etter du har satt opp webserveren, kan du gå til en av disse to adressene i nettleseren for å se om webserveren er riktig installert.

  1. http://localhost
  2. http://127.0.0.1

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.