Hvordan lage hjemmeside?

Lag hjemmeside med HTML/CSS, WordPress, eller Wix. Lær grunnleggende kode, velg domene, host på Netlify/Vercel. Gratis ressurser.

Velg tilnærming: Kode selv eller bruk builder

1. Website builders (ingen koding): Wix, Squarespace, WordPress.com. Dra-og-slipp-grensesnitt, enkelt, men mindre fleksibelt.

2. Kode fra bunnen (HTML/CSS): Full kontroll, gratis, lærerikt, men krever tid å lære.

3. Hybrid (CMS): WordPress.org, Ghost. Rammeverk hvor du kan tilpasse med kode.

For nybegynnere: Start med HTML/CSS hvis du vil lære webutvikling, eller bruk Wix/Squarespace hvis du bare vil ha en side oppe raskt.

Metode 1: Kode fra bunnen (HTML/CSS)

Hva du trenger:

Lær HTML – strukturen

HTML (HyperText Markup Language) er skjelettet til nettsiden.

Enkleste HTML-side:

<!DOCTYPE html>
<html>
<head>
  <title>Min første nettside</title>
</head>
<body>
  <h1>Hei verden!</h1>
  <p>Dette er min nettside.</p>
</body>
</html>

Lagre som index.html og åpne i nettleser.

Lær CSS – stilen

CSS (Cascading Style Sheets) styler nettsiden (farger, fonter, layout).

Eksempel CSS:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
}
h1 {
  color: #0066cc;
}

Legg CSS i en <style>-tag i HTML eller i separat fil.

Ressurser for å lære HTML/CSS

Forvent 2-4 uker å lære grunnleggende HTML/CSS (hvis du øver 1 time daglig).

Metode 2: WordPress (populært CMS)

WordPress.com (enklere, begrenset) vs. WordPress.org (full kontroll, men krever hosting).

Fordeler:

Ulemper:

Slik starter du: Gå til WordPress.com, registrer gratis konto, velg tema, tilpass innhold. Publiser.

Metode 3: Website builders (Wix, Squarespace)

Wix: Dra-og-slipp builder. Gratis plan (med Wix-annonser), betalt fra ~100 kr/måned.

Squarespace: Elegant design, bedre for porteføljer/kreative. Fra ~150 kr/måned.

Fordeler:

Ulemper:

Velg og registrer domenenavn

Domenenavn er adressen til nettsiden (f.eks. mittfirma.no).

Hvor kjøpe:

Kostnader: .no ~100-150 kr/år, .com ~100-200 kr/år.

Tips: Velg kort, minneverdig navn. Unngå tall og bindestreker hvis mulig.

Velg hosting (hvis du koder selv)

Hosting er hvor filene til nettsiden ligger.

Gratis hosting (for statiske sider):

Betalt hosting (for WordPress eller dynamiske sider):

Last opp nettsiden

For statiske HTML-sider (Netlify/Vercel):

  1. Gå til Netlify.com
  2. Dra hele prosjektmappen (med index.html) til dashboardet
  3. Nettsiden er live på random-name.netlify.app
  4. Koble til eget domene i innstillinger

For WordPress: Installeres automatisk via hosting-leverandør (One.com har "1-click WordPress install").

Viktige elementer på nettsiden

Navigasjon: Meny øverst med lenker til viktige sider (Hjem, Om oss, Kontakt).

Responsivt design: Nettsiden må fungere på mobil. Bruk CSS media queries eller framework som Bootstrap.

Rask lastetid: Optimaliser bilder (bruk WebP-format, komprimer), minimer CSS/JS.

Kontaktinformasjon: E-post, telefon, eller kontaktskjema.

SEO – bli funnet på Google

Søkemotoroptimalisering hjelper nettsiden å rangere på Google.

Grunnleggende SEO:

Registrer nettsiden i Google Search Console for å spore ytelse.

Legg til Google Analytics (valgfritt)

Spor besøkende, hvilke sider de ser, hvor de kommer fra.

  1. Gå til analytics.google.com
  2. Opprett konto og eiendom
  3. Kopier tracking-kode
  4. Lim inn i <head>-seksjonen på alle sider

Sikkerhet

HTTPS: Krypter trafikk. Netlify/Vercel gir gratis HTTPS automatisk. For andre hosts: Bruk Let's Encrypt (gratis SSL).

Hold programvare oppdatert: Hvis du bruker WordPress, oppdater plugins og tema regelmessig (sikkerhetshull).

Backup: Ta backup av nettsiden månedlig. Mange hosts tilbyr automatisk backup.

Vanlige nybegynnerfeil

For kompleks første side: Start enkelt. En side med litt tekst og noen bilder. Utvid senere.

Ikke mobiloptimalisert: Over 60% av trafikk er mobil. Test på telefon.

For treg: Store bilder (5 MB+) gjør siden treg. Komprimer til under 200 KB per bilde.

Ingen call-to-action: Hva vil du at besøkende skal gjøre? Kjøpe? Kontakte? Registrere? Gjør det tydelig.

Kostnader oppsummert

Gratis alternativ:

Betalt alternativ:

Hva etter du har lansert?

Læringsressurser