Konsepter - Filbaner i HTML og CSS

Når du bygger nettsider må du koble sammen ulike filer: vise bilder, hente inn stilark (CSS), laste skrifttyper og lage lenker mellom nettsidene dine. For at nettleseren skal finne riktig fil, må du oppgi en filbane (filsti). Dette gjelder i like stor grad for både HTML og CSS.

Hvor bruker vi filbaner?

I HTML refererer vi vanligvis til filer via attributtene src eller href, mens vi i CSS henter filer med funksjonen url(...) eller @import:

Språk	Element / Egenskap	Eksempel	Formål
HTML	`<a href="...">`	`href="/"` eller `href="/om"`	Navigere til andre sider eller rot
HTML	`<img src="...">`	`src="/bilder/logo.png"`	Vise et bilde på siden
HTML	`<link href="...">`	`href="css/stil.css"`	Koble et eksternt CSS-stilark til HTML
CSS	`background-image`	`url("/bilder/bakgrunn.jpg")`	Sette bakgrunnsbilde på et element
CSS	`@font-face`	`src: url("../fonts/minfont.woff2")`	Laste inn en egendefinert fontfil

1. Absolutte filbaner

En absolutt filbane peker direkte til en fast plassering, uavhengig av hvor filen du skriver koden i befinner seg. Det finnes to hovedtyper:

A. Fra nettsidens rotmappe (starter med `/`)

Når en bane starter med en skråstrek (/), betyr det: "Start fra toppen/roten av nettstedet og gå derfra". Dette er spesielt nyttig fordi du kan flytte HTML- eller CSS-filen din uten at stien slutter å fungere!

<!-- 1. Peker til rot-siden (+page.svelte under
                            routes i SvelteKit) -->
 <a href="/">Til forsiden</a>

 <!-- 2. Peker til en underside
                            (/routes/om/+page.svelte) -->
 <a href="/om">Om oss</a>

 <!-- 3. Henter bilde fra rot (f.eks.
                            static/bilder/ i SvelteKit) -->
 <img src="/bilder/logo.png" alt="Logo" />

/* 1. Henter bakgrunnsbilde fra rot */
 background-image: url("/bilder/logo.png");

 /* 2. Henter ikon fra rotmappen */
 list-style-image: url("/ikoner/stjerne.svg");

💡 Viktig om SvelteKit: I SvelteKit peker href="/" til rot-siden (den øverste +page.svelte-filen direkte under src/routes/). Filer du legger i mappen static/ (som bilder eller ikoner) serveres direkte fra roten som /filnavn.png.

B. Full nettadresse (URL som starter med `https://`)

Brukes når du skal hente en ressurs eller lenke til et annet nettsted på internett:

<!-- Lenke til ekstern nettside -->
 <a href="https://vg.no" target="_blank">
   Gå til VG
 </a>

 <!-- Eksternt bilde -->
 <img src="https://eksempel.no/logo.png" alt="Logo" />

/* Eksternt bakgrunnsbilde */
 background-image:
   url("https://eksempel.no/bilder/bg.jpg");

 /* Laste ekstern font (Google Fonts) */
 @import url("https://fonts.googleapis.com/...");

2. Relative filbaner

En relativ filbane peker til en fil basert på hvor den aktive filen befinner seg i mappehierarkiet. Nettleseren tar utgangspunkt i filen koden skrives i og navigerer derfra.

filnavn.jpg eller ./filnavn.jpg

Samme mappe: Filen ligger i nøyaktig samme mappe som den aktive HTML- eller CSS-filen.

mappe/filnavn.jpg

Undermappe: Gå inn i en mappe som ligger i samme mappe som den aktive filen.

../filnavn.jpg

Ett nivå opp: Gå ut av den gjeldende mappen og opp til foreldermappen (ett trinn opp).

../../filnavn.jpg

To nivåer opp: Gå to trinn opp i mappestrukturen.

<!-- 1. Samme mappe: ./ eller direkte navn -->
 <img src="banner.jpg" alt="Banner" />

 <!-- 2. Inn i undermappe -->
 <img src="bilder/logo.png" alt="Logo" />

 <!-- 3. Ett nivå opp: ../ -->
 <a href="../index.html">Tilbake</a>

 <!-- 4. To nivåer opp: ../../ -->
 <link rel="stylesheet" href="../../css/stil.css" />

/* 1. Samme mappe: ./ eller direkte navn */
 background-image: url("bakgrunn.jpg");

 /* 2. Inn i undermappe */
 background-image: url("bilder/bakgrunn.jpg");

 /* 3. Ett nivå opp: ../ */
 background-image: url("../bilder/bakgrunn.jpg");

 /* 4. To nivåer opp: ../../ */
 background-image: url("../../assets/bakgrunn.jpg");

3. Spesielt om filbaner i SvelteKit

I moderne rammeverk som SvelteKit er fil- og mappestrukturen organisert litt annerledes enn i enkle HTML/CSS-prosjekter:

🧭 Sider og ruter (`src/routes/`)

SvelteKit bruker filbasert ruting. Hver mappe under src/routes/ som inneholder en +page.svelte blir en URL på nettsiden:

src/routes/+page.svelte → pekes til med href="/"
src/routes/om/+page.svelte → pekes til med href="/om"
src/routes/nettsideutvikling/konsepter/filbaner/+page.svelte → pekes til med href="/nettsideutvikling/konsepter/filbaner"

I SvelteKit bruker vi derfor nesten alltid absolutte stier for navigasjonslenker (f.eks. href="/" eller href="/kontakt").

📁 Statiske ressurser (`static/`)

Bilder, ikoner, PDF-er og fonter legges i mappen static/ på prosjektets rotnivå:

Filen static/bilder/logo.png serveres som /bilder/logo.png.
Filen static/favicon.png serveres direkte som /favicon.png.

Både i HTML og CSS henter du disse med en skråstrek fra roten:

<img src="/bilder/logo.png" alt="Logo" />

background-image: url("/bilder/logo.png");

🗝️ Sentrale Huskeregler for Filbaner

href="/": Peker til roten av nettstedet (i SvelteKit: første +page.svelte i routes/).
/mappe/fil (Absolutt fra rot): Starter alltid fra toppen av webserveren/prosjektet uansett hvor filen du koder i ligger.
https://... (Full URL): Peker til en ekstern nettadresse på internett.
./ eller bare filnavn (Relativ): Ser etter filen i samme mappe som filen du står i.
../ (Relativ - ett nivå opp): Går ut av den gjeldende mappen og opp til overordnet mappe.
../../ (Relativ - to nivåer opp): Går to mapper opp i hierarkiet.

Konsepter - Filbaner i HTML og CSS

Hvor bruker vi filbaner?

1. Absolutte filbaner

A. Fra nettsidens rotmappe (starter med /)

B. Full nettadresse (URL som starter med https://)

2. Relative filbaner

3. Spesielt om filbaner i SvelteKit

🧭 Sider og ruter (src/routes/)

📁 Statiske ressurser (static/)

🗝️ Sentrale Huskeregler for Filbaner

A. Fra nettsidens rotmappe (starter med `/`)

B. Full nettadresse (URL som starter med `https://`)

🧭 Sider og ruter (`src/routes/`)

📁 Statiske ressurser (`static/`)