Webudviklingens grundprincipper — HTML, CSS og CMS
Det tekniske fundament, du skal kende for at kunne designe til og samarbejde om web
Selvom du som mediegrafiker ikke nødvendigvis skal kode selv, arbejder du tæt sammen med webudviklere — og jo bedre du forstår teknikken bag et website, jo bedre bliver dine designbeslutninger og dit samarbejde. Web er ikke bare et lærred; det er bygget af strukturer, der har egne regler og begrænsninger.
§HTML — indholdets struktur
HTML (HyperText Markup Language) er det sprog, der beskriver indholdets struktur på en webside: hvad der er en overskrift, hvad der er et afsnit, hvad der er en liste eller et billede. HTML fortæller ikke, hvordan noget skal se ud — kun hvad det er. Det er en vigtig skelnen: rigtig brugt HTML gør en side forståelig for både browsere, skærmlæsere og søgemaskiner, uanset hvordan den visuelt er designet.
§CSS — udseende og layout
CSS (Cascading Style Sheets) styrer, hvordan HTML-indholdet skal se ud: farver, skrifttyper, afstand, placering. Fordi udseende og indhold er adskilt, kan det samme HTML-indhold vises helt forskelligt afhængigt af CSS'en — det er blandt andet det, der gør responsivt design muligt, hvor en side tilpasser sit layout til skærmens bredde.
- 01Boksmodellen — hvert HTML-element er en boks med indhold, polstring, kant og margin, som CSS styrer.
- 02Flexbox og grid — moderne CSS-værktøjer til at placere elementer fleksibelt på en side eller i et gitter.
- 03Responsivt design — layoutet tilpasser sig automatisk til skærmstørrelsen, fra en stor computerskærm til en lille mobil.
- 04Breakpoints — de skærmbredder, hvor layoutet skifter fra ét sæt regler til et andet.
§Fra statisk side til CMS
Et rent HTML/CSS-website er statisk: indholdet ændres kun, når en udvikler retter i koden. De fleste websites i dag bygges i stedet på et CMS (content management system) — et system, der adskiller indholdet fra det tekniske design, så en redaktør uden kodekendskab kan opdatere tekst og billeder gennem en brugerflade.
| Type | Kendetegn |
|---|---|
| Statisk HTML/CSS | Ingen database, hurtig og enkel, men kræver en udvikler for at opdatere indhold |
| Traditionelt CMS | Indhold, design og funktioner samlet i ét system, redaktører kan selv opdatere |
| Headless CMS | Indholdet gemmes adskilt fra visningen og kan vises på flere platforme (web, app, skærm) via samme indhold |
| E-handelsplatform | CMS specialiseret til produkter, kurv og betaling |
§Semantisk kode og tilgængelighed
Semantisk HTML betyder at bruge de rigtige elementer til det, de er lavet til — en overskrift som overskrift, en knap som knap, ikke bare en firkant med tekst i, der ligner en knap. Det lyder som en detalje, men det er afgørende for tilgængelighed: en skærmlæser kan kun fortælle en synshæmmet bruger, at 'her er en knap', hvis koden faktisk siger, at det er en knap.
§Samarbejdet med udviklere
Jo mere du forstår om, hvordan et design bliver til kode, jo lettere er samarbejdet med udviklerne. Design, der tager højde for, hvordan tekst kan variere i længde, hvordan billeder skal beskæres på forskellige skærmstørrelser, og hvad der er teknisk realistisk inden for tidsrammen, sparer begge parter for gentagne rettelser sent i et forløb.
“Et flot design, der ikke kan bygges inden for fristen eller ikke virker på en mobil, er ikke et færdigt design — det er en god idé, der mangler sit sidste led.”
— Faglig betragtning om samarbejde mellem design og udvikling