Før i tiden krevde det møysommelig koding iHTML for å bygge en nettside. Selv om dette var hverdagskost for webdesignere, ble det ofte et mareritt for dem som skulle drifte og oppdatere siden i etterkant.
I dag har vi heldigvis CMS-systemer (Content Management Systems) som gjør jobben langt enklere. Nå trenger du ikke lenger å skrive en eneste linje kode; i stedet kan du bruke«dra-og-slipp»-funksjonalitet for å plassere elementer som bilder, tekstbokser, skjema og knapper akkurat der du vil ha dem.
Du kan se på hvert element som en ferdigprodusert «pakke» med HTML. Selv om koden ligger skjult i bakgrunnen, har du full kontroll over utseendet via et visuelt stylingpanel. Her kan du enkelt justere ting som f.eks.:
Selv om moderne systemer er gode, hender det at man støter på en liten «bug» eller begrensning i stylingpanelet som hindrer deg i å få det nøyaktige resultatet du ønsker. I slike tilfeller er det gull verdt å ha en grunnleggende forståelse for hva som skjer under panseret.
Jeg har derfor samlet noen nyttige tips om hva du bør vite for å ta full kontroll over designet – også når systemet ikke helt spiller på lag.
HTML (HyperText Markup Language) er koden som bestemmer strukturen og rekkefølgen av elementer på en side.
HTML bruker «tagger» (merkelapper) for å fortelle nettleseren din (som Chrome eller Safari) hva slags type innhold som vises. En tag skrives vanligvis med en start-tag < > og en slutt-tag </ >. Eks:<div> innholdet</div> Du behøver ikke å kjenne til alle slags HTML tagger, men det kan være kjekt å vite om noen av dem.
De fleste CMS stystem bruker WYSIWYG editor (What you see is what you get) der du har muligheten til å legge HTML og CSS inn. Når du ønsker å legge inn en <br> gjør du det i Kode editoren.
Her er et eksempel fra Kode editoren i Elementor:
For å style en HTML tag, f.eks gi den en bakgrunnsfarge, eller justere størrelsen på tekst, bruker vi i dag CSS.
CSS, eller Cascading Style Sheets, er selve"sminken" til internett. Hvis HTML er skjelettet som holder strukturen på en nettside, er CSS det som bestemmer hvordan alt faktisk ser ut– fra farger og fonter til hvor knappene er plassert.
I et CMS system behøver du ikke å skrive CSS eller HTML selv. De har som regel et stylingpanel, der du enkelt velger farger, font, marger og padding m.m.
Men, noe ganger kan det være kjekt å kunne overstyre noe med litt CSS.
I Elementor hender det f.eks. noen ganger at et bakgrunnsbilde ikke justerer seg etter containeren det ligger i selv om det er satt til COVER i stylingpanelet. Da kan du overstyre stylingpanelet ved å legge inn følgende CSS:
.bg-img {
background-image: url(https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}Her ser du en av stedene du kan legge inn CSS i Elementor:
I CSS brukes både ID og Class for å peke ut elementer du vil style, men de har to vidt forskjellige roller. Den enkleste måten å huske forskjellen på er: En ID er et unikt navn (som et personnummer), mens en Class er en kategori (som en profesjon).
Du kan kalle både en id og en class hva du vil, men det kan være kjekt å bruke et navn som beskriver hva den skal style. (bruk engelske ord. Du kan ikke bruke æ,ø eller å).
For eksempel, om du vil at knapper du legger inn på nettsiden skal skilles i en lys versjon og en mørk versjon, kan du gi den lyse knappens class navnet . light-button og den mørke knappen .dark-button og så style dem med forskjellige farger slik:
.light-button {
background-color: f0e9e9;
}
.dark-button {
background-color:#000000;
}
Alle knappene som har .light-button som class name, vil da bli stylet lysegrå, mens de som har .dark-button som class name blir sorte.
Et annet eksempel er at du har en container og inne i den containeren har du flere tekstelementer som alle skal ha samme utseende. Men, siden det eksisterer flere av disse tekstelementene et annet sted på nettsiden som skal ha en annen styling, kan du ved å bruke en id på foreldrecontaineren, style kun de tekst elementene som ligger inne i den containeren.
Her er et eksempel på hvordan det ser ut i CSS: (skriv ID føst og deretter Class)
#stor-container .text-element {
Font-size: 1.25rem;Color: #000000;
}
CSS fungerer ved at du velger et element i HTML-koden din (en selector) og gir det noen instruksjoner (declarations).
En typisk regel ser slik ut:
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
Her sier vi til nettleseren: "Finn alle overskrifter av typen h1, gjør dem blå, sett størrelsen til 24 piksler og midtstill dem."
Navnet "Cascading" (som betyr "fallende" eller "i trappetrinn") refererer til hvordan stiler prioriteres. Hvis du gir en knapp to forskjellige fargebeskjeder, følger nettleseren et sett med regler for å finne ut hvilken som vinner:
I gamledager brukte man tabeller for å lage layout, noe som var et mareritt. I dag har vi fantastiske verktøy som:
Uten CSS ville internett sett ut som et kjedelig tekstdokument. Det skiller innhold (HTML) fra presentasjon (CSS), noe som gjør det mye lettere å bygge og vedlikeholde moderne, vakre nettsider.
<div>-taggen er en av de mest fundamentale byggeklossene i moderne webutvikling. Navnet er en forkortelse for "division", og dens hovedoppgave er å gruppere sammen andre HTML-elementer for å skape struktur og orden.
I CMS systemer legger du som regel inn div elementet som et container element, og så putter du tekst, bilder osv inne i den.
1. En "tom" beholder
I seg selv gjør ikke en <div> noen ting med utseendet på nettsiden. Den har ingen medfødt stil (som f.eks. <h1> som gir stor tekst, eller <a> som gir en lenke). Den fungerer som en usynlig boks eller beholder som du legger ting oppi.
2. Et blokk-element (Block-level)
En <div> er et blokk-element. Det betyr to ting:
3. Bruksområder
Vi bruker hovedsakelig <div> til to ting:
Overskrifter rangerer i størrelse fra H1 – H6, der H1 er størst. En gylden regel er at det kun skal være en H1 overskrift på en side, mens du kan bruke de 5 andre så mange ganger du vil. Men, for at Google skal forstå rekkefølgen av ting på siden, bør overskriftene brukes riktig. For eksempel kan du ha et avsnitt der du bruker en H2 tag. Du ønsker så å ha et underpunkt under denne teksten med egen overskrift. For at Google skal forstå at underteksten er relatert til hovedteksen, bør du bruke en H3 tag på undertekstens overskrift.
Som regel er størrelsen nedad stigende fra H1 (størst) til H6 (minst), men du kan gjøre en H2 overskrift større enn en H1 overskrift dersom det passer til designet på nettsiden din. Det er rekkefølgen som er viktigst for at Google skal forstå hvordan siden er bygget opp.
<p>-taggen (paragraph) brukes til å definere et avsnitt med tekst.
Når du pakker tekst inn i en <p>-tagg, forteller du nettleseren at dette er et sammenhengende avsnitt. Nettlesere legger automatisk til litt luft (margin) over og under elementet, slik at teksten ikke klistrer seg til det som kommer før eller etter. Margen (luften) kan du regulere ved bruk av CSS.
<p>Dette er det første avsnittet mitt.</p>
<p>Dette er det andre avsnittet mitt</p>
I CMS systemer behøver du ikke å bruke p taggen selv, da du kan legge et ferdig tekst element inn på siden. P-taggen er allerede er på plass i tekst elementet. Så alt du behøver å gjøre er å style teksten slik som du ønsker.
Det er et par ting man ofte gjør feil i starten:
<a> taggen gjelder for lenker
For at en lenke skal fungere, trenger de nattributtet href (hypertext reference), som forteller nettleseren hvor brukeren skal sendes.
<a href="https://www.google.no">Besøk Google</a>
Det finnes noen tilleggskommandoer man ofte bruker sammen med <a>:
<a href="lnken til siden du vil nå med lenken" target="_blank">navnet på linken</a>
<a>-taggenbrukes til mer enn bare nettsider:
Interne hopp (Ankere):
Du kan lenke til en spesifikk del av samme side ved å bruke en i
<a href="#kontakt">Gå til kontaktinfo</a>
Linken går til kontakt seksjonen på siden. Men, du må ha lagt inn et anker/id rett over kontaktseksjonen for at det skal fungere.I dette tilfellet ville den være <a id="kontakt">
E-post: Åpner brukerens e-postprogram.
<a href="mailto:hallo@eksempel.no">Send oss en e-post</a>
Telefon: Nyttig for mobilbrukere
<a href="tel:12345678">Ring oss</a>
Når du skal skrive teksten til linken, så ikke bruk f.eks. Les mer, klikk her eller liknende. Bruk et beskrivende navn slik at man tydelig kan se hvor linken går eller hva den gjelder. Bruk heller ikke selve url som navn.
Så, istedenfor dette: <a href="https://www.annec.no">https://www.annec.no</a>
Skriver du dette: <a href="https://www.annec.no">AnnecDesign</a>
Dårlig: Klikk her for å se prislisten.
Bra: Se vår oppdaterte prisliste for 2026.
Dette hjelper både skjermlesere for svaksynte og søkemotorer som Google med å forstå hva siden du lenker til faktisk handler om.
Img er taggen for bilde. <img>. Du kan linke til et bilde ved å skrive slik:
<img src="bilde.jpg" alt="En beskrivende tekst">
I CMS systemer finnes det bilde elementer som du legger inn på siden, så du behøver ikke å skrive img taggen selv. Men, det er enkelte ting som kan være greit å vite likevel:
src (source): Stien til bildefilen.
alt (alternativ tekst): Ekstremt viktig! Dette gjør siden tilgjengelig for skjermlesere og vises hvis bildet ikke laster. Det hjelper også på SEO (søkemotoroptimalisering).
Lazy loading: Ved å legge til loading="lazy" forteller du nettleseren at den ikke trenger å lastebildet før brukeren faktisk scroller ned til det. Men, ikke legg lazy loading på bilder over folden, dvs de bildene som vises med en gang nettsiden åpnes. Det vil sinke innlastingstiden.
Eager loading på bilder betyr at nettleseren får beskjed om å laste ned bildet med en gang siden åpnes, uavhengig av om bildet er synlig på skjermen eller ikke. Her er et eksempel:
<img src="hero-bilde.jpg" alt="Beskrivelse" loading="eager">
Dette er det motsatte av den mer moderne standarden loading="lazy".
Above the Fold: Bilder som er synlig emed en gang brukeren lander på siden (f.eks. et stort banner eller en logo),bør alltid lastes "eager".
LCP (Largest Contentfu lPaint): Dette er et viktig måltall for Google. Hvis det største elementet på siden din er et bilde, vil loading="eager" hjelpe deg med å få en bedre score fordi bildet dukker opp raskere.
Viktige ikoner: Små grafiske elementer som er essensielle for navigasjon.
Du kan også legge inn et bilde ved å bruke CSS Da har du muligheten til å legge tekst oppå bildet. Slik skriver du CSS for et bakgrunnsbilde
.min-boks {
background-image: url('bakgrunn.jpg');
background-size: cover; /* Fyller hele boksen uten å bli strukket */
background-position: center; /* Sentrerer bildet */
background-repeat: no-repeat; /* Hindrer bildet i å gjenta seg */
}Les også om bildeoptimalisering her og Hvor du kanfinne bilder her
En annen viktig ting som er greit å kunne for å tilpasse innholdet på nettsiden til skjermbredden man ser den på, er viewports.
En viewport viser innholdet i en bestemt bredde, som regel fra bredde - til bredde. (for eksempel fra 1201px til 1500px ) Du tilpasser innholdet for hver viewport bredde (skjermbredde). Dersom man ikke hadde viewports, ville f.eks teksten du ser på PC være enormt stor på mobil. Men fordi du kan sette tekst størrelsen i den viewporten som vises på mobil, kan du skreddersy nettsiden til forskjellige skjermbredder.
Her er en kjapp gjennomgang av hvorfor dette er så viktig for moderne webdesign:
Siden vi surfer på alt fra bittesmå smartklokker til massive 4K-skjermer, er ikke viewporten en fast størrelse.
Før i tiden prøvde mobiler å vise "skrivebordsversjonen" av nettsider ved å zoome helt ut, noe som gjorde teksten uleselig liten. For å fikse dette bruker utviklere en spesiell kodebit i HTML-en:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Denne linjen forteller nettleseren: "Tilpass bredden på siden til bredden på skjermen, og ikke zoom ut." Dette er selve fundamentet for responsivt design.
Du behøver ikke å legge denne inn i HTML selv. Den er allerede lagt inn i CMS plattformen du bruker. Men det kan være greit å vite hvordanlegge hvordan du kan legge inn en viewport i CSS. Det er nyttig dersom du skulle ha behov for å legge til en ekstra viewport for enkelte elementer. Her er et eksempel:
/*TABLET PORTRET*/
@media only screen and (min-width: 881px) and (max-width: 1024px) { }Da kan du legge CSS koder mellom { og } slik:
/*TABLET PORTRET*/
@media only screen and (min-width: 881px) and (max-width: 1024px) {
.my-box {
width: 350px;
height: auto;
}
}Vi har egne måleenheter som baserer seg direkte på viewporten i stedet for piksler:
Dette er supernyttig hvis du for eksempel vil at et bilde skal dekke nøyaktig hele skjermen uansett hvilken enhet gjesten bruker.
Uten kontroll på viewporten ville nettsider sett helt kaos ut på telefonen din. Det er broen mellom det statiske innholdet og den dynamiske virkeligheten av dingser vi bærer i lomma. Du kan lese mer om viewports og nresponsive desigh her.
