Guider · 28. sep. 2026
Hvordan lage gode presentasjoner i HTML
I denne guiden viser vi steg for steg hvordan du bruker HTML til å lage et kraftig presentasjonsverktøy som holder på stilen din over tid.
Laget av Simon + Claude
TL;DR
- HTML er språket alle nettsider er skrevet i, og en HTML-fil åpnes i hvilken som helst nettleser uten at du må installere noe.
- HTML kan brukes til mye mer enn de fleste tror, også til presentasjoner med levende grafer, animasjoner og demoer som kjører.
- Med litt kreativ prompting bygger du ditt eget presentasjonsverktøy, med AI som kreativ sparringspartner. Claude Code skriver koden mens du beskriver hva du vil ha.
Vi har begynt å bygge presentasjonene våre i HTML. De magiske kreftene i HTML handler om hva en nettside kan gjøre som et dokument ikke kan. Her bruker vi de samme kreftene i en presentasjon.
Hvorfor HTML til presentasjoner
En slide i HTML er en nettside og kan inneholde alt en nettside kan. En graf kan tegne seg selv, og en slider kan svare på et hva-om-spørsmål fra salen. En prototype kan kjøre rett på sliden.
Slidene er skrevet som tekst, så Claude Code kan endre mange av dem med en prompt og holde stilen lik.
Presentasjonen under er denne guiden på ni slides. Klikk på den og bruk piltastene, eller trykk F for fullskjerm.
Slide 1 av 9, Tittel
- SveipBla mellom slidene på telefonen
Hvorfor vi bruker byggeklosser
En lang HTML-fil går greit når du lager en presentasjon. Men når du vil lage mange gjenbrukbare presentasjoner over tid, er det smart å bygge en presentasjonspipeline med noen flere byggeklosser. Vi bruker disse fire.
| Byggekloss | Hva den er | Hva den gjør for deg |
|---|---|---|
| React | Et bibliotek | Du lager en kloss en gang og bruker den på alle slidene. |
| Tailwind | Et stilrammeverk | Holder farger, størrelser og avstand like overalt. |
| TypeScript | Språket slidene skrives i | Fanger opp feil i koden mens presentasjonen bygges, for eksempel en slide uten tittel. |
| Vite | Et byggeverktøy | Viser presentasjonen i nettleseren mens du jobber, og med et tillegg pakker den alt i en HTML-fil til slutt. |
Du trenger ikke kunne noen av dem. Claude Code setter dem opp, og du ser resultatet i nettleseren.
DuSett opp et nytt presentasjonsprosjekt med React, Tailwind, TypeScript og Vite der hver presentasjon blir en HTML-fil, og åpne den første presentasjonen i nettleseren min, så jeg kan følge med.
Ditt design
Før den første sliden bestemmer du farger, aksentfarge, skrifttyper, tekststørrelser, avstand og hvor logoen står. Claude Code samler det på ett sted, og Tailwind gjør det om til stilene hver slide bruker.
Endrer du profilfargen en gang, får alle slidene i alle presentasjonene den nye fargen.
DuFør vi lager noen slides, sett opp designet for presentasjonene mine. Bruk fargene våre [farger], skrifttypen vår [skrifttype] og logoen vår. Velg en aksentfarge og faste størrelser for titler, tekst og avstand. Samle alt på ett sted som alle slidene bruker.
Klosser på en slide
En komponent er en kloss du lager en gang og bruker på mange slides, for eksempel en tittel, en punktliste, en graf, et sitat eller et bilde. Et helt oppsett er også en kloss.
Presentasjonen viser en slide om gangen og tilpasser størrelsen til skjermen, så den ser lik ut på den bærbare og på projektoren.
DuBygg en presentasjon som viser en slide om gangen og tilpasser den til størrelsen på vinduet. Lag klosser for en tittel, punkter, en graf og et sitat, to oppsett som kombinerer dem, og tre eksempelslides.
Taster og fullskjerm
En HTML-presentasjon kan også ha hurtigtaster, for eksempel for fullskjerm, for å vise alle slidene i et rutenett eller for å starte en timer.
Nummeret på sliden står i nettadressen. Da kan en link åpne en bestemt slide, og du havner på samme sted når du laster siden på nytt.
DuLegg til tastaturstyring i presentasjonen. Piltastene og mellomromstasten blar mellom slidene, F slår fullskjerm av og på, og G viser alle slidene i et rutenett. Legg nummeret på sliden inn i nettadressen.
Sidepanel og skjulte slides
En praktisk funksjon å legge til er muligheten til å skjule slides og flytte dem rundt. Sidepanelet viser alle slidene som små bilder langs venstre kant, som i PowerPoint. Klikker du på en av dem, kommer du rett til den sliden. Panelet er nyttigst mens du bygger.
Skjulte slides er reserveslidene du har klare til et spørsmål som kan komme. Piltastene hopper over dem, men panelet viser dem i grått.
DuLegg til et sidepanel med alle slidene som små bilder. P åpner og lukker panelet. La meg dra slidene i panelet for å endre rekkefølgen, og merke en slide som skjult. Hopp over den når jeg blar med tastene, og vis den i grått i panelet.
Notater i eget vindu
PowerPoint har en presentasjonsvisning med notater, neste slide og klokke. Med HTML kan du lage akkurat det samme bare ved å be om det, for eksempel et eget vindu som åpnes når du trykker N, og som du drar over til den bærbare.
DuLegg til notater i presentasjonen. N åpner et eget vindu med notatene til sliden som vises, et lite bilde av den neste og en klokke. Oppdater vinduet hver gang jeg bytter slide.
Animasjoner
Fordi en slide er en nettside, kan nesten alt som beveger seg på nettet, også bevege seg på en slide. Her er noen som passer godt i en presentasjon.
I de animerte presentasjonene våre starter animasjonen når sliden vises, og den spilles av på nytt når du kommer tilbake. Presentasjonen øverst har også punkter som kommer ett om gangen.
DuBygg opp slidene steg for steg, så hvert trykk på høyre piltast viser neste punkt før presentasjonen går videre. La hvert punkt tone mykt inn, og vis alt uten bevegelse for dem som har slått av animasjoner.
En figur kan også zoome når du klikker på den. Prøv det på figuren under.
DuGjør figuren på denne sliden klikkbar, så den zoomer inn på detaljen jeg klikker på, og zoomer ut igjen ved neste klikk.
Interaktive grafer
Når du ber Claude Code om en graf, tegner nettleseren den ut fra tallene dine. Den kan også bygges som en interaktiv graf eller et dashbord rett i presentasjonen din.
- Strategi68
- Data47
- Kompetanse37
- Verktøy58
- Kultur57
- Styring26
Edderkoppdiagram over AI-modenheten i Selskap A, eksempeldata, med poeng fra 0 til 10 på seks områder, en linje for i dag og en for målet om 12 måneder. Strategi 6 i dag og 8 som mål. Data 4 i dag og 7 som mål. Kompetanse 3 i dag og 7 som mål. Verktøy 5 i dag og 8 som mål. Kultur 5 i dag og 7 som mål. Styring 2 i dag og 6 som mål. Det største gapet er i kompetanse og styring.
Tallene bak hver graf ligger inne i HTML-filen du sender. Ingen trenger en link til et regneark, og grafen virker uten nett. Men alle som får filen, får også tallene, så ta ut det som ikke skal deles.
DuLag et edderkoppdiagram over AI-modenheten vår ut fra tallene jeg limer inn under, med en linje for i dag og en for målet vårt. Vis det nøyaktige tallet når jeg peker på det, og legg både dataene og diagrammet inn i presentasjonen.
En fil du kan dele
Mens du jobber, er presentasjonen en mappe med filer. Det går fint når du presenterer selv, men en kollega vil ha en fil å åpne.
Ber du Claude Code samle presentasjonen i en fil, får du en HTML-fil med alle slidene, skrifttypene og bildene inni. Den kan sendes på e-post og åpnes med et dobbeltklikk. Vi testet det på en liten presentasjon, og i Chrome virket tastene, en skjult slide og notatvinduet.
DuSamle presentasjonen i en fil jeg kan sende på e-post, med alle slidene, skrifttypene og bildene inni. Åpne den fra skrivebordet mitt og sjekk at tastene, de skjulte slidene og notatvinduet virker.
Trenger noen en PDF, kan du be Claude Code om en knapp som heter Last ned PDF. Den legger hver slide på sin egen side og åpner utskriftsvinduet, så PDF-en alltid er lik presentasjonen du har åpen.
DuLegg til en knapp som heter Last ned PDF. Når jeg klikker på den, legg hver slide på sin egen side i full størrelse med bakgrunnsfarger og ferdige animasjoner, skjul knappene og notatene, og åpne vinduet der jeg lagrer den som PDF.
Hvor begynner du?
Start med en presentasjon du skal holde snart. Be Claude Code lage slidene og tastene først, og legg til resten når du trenger det.
DuLag en HTML-presentasjon av disposisjonen jeg limer inn under, med en idé og notater per slide. Hold stilen lik på alle slidene, og spør meg før du legger til en graf.
Har du ikke bygget noe med en AI-agent før, tar Vibe coding for nybegynnere deg fra den første ideen.
Flere guider
