Spara och dela en HTML-fil
Lär dig hur du sparar AI-genererad kod som en HTML-fil, testar den i webbläsaren och delar den med kollegor.
Du har precis fått AI:n att generera ett häftigt quiz eller ett interaktivt spel. Nu ser du en massa text med spetsiga parenteser och konstiga ord. Det är HTML-kod — och om du följer stegen i den här guiden förvandlar du den texten till en fungerande webbsida på under fem minuter.
Vad är en HTML-fil?
En HTML-fil är i grunden en vanlig textfil med filändelsen .html i stället för .txt. Det är ingenting märkligare än så. Skillnaden är att när du dubbelklickar på en .html-fil vet webbläsaren (Chrome, Edge, Firefox) att den ska läsa innehållet och visa det som en färdig webbsida — med knappar, färger, animationer och allt annat.
Alla interaktiva resurser på VibeTeacher är HTML-filer. De är självständiga: allt som behövs för att resursen ska fungera finns inbakat i en och samma fil. Det gör dem enkla att skicka vidare, ladda upp och dela.
Ingen installation krävs
Du behöver inte installera något program för att öppna eller skapa HTML-filer. En vanlig textredigerare och en webbläsare räcker — och det har du redan på din dator.
Steg 1: Kopiera koden från AI-verktyget
Innan du kan spara filen behöver du ha all kod på klippbordet.
Hitta kodblocket i AI-svaret
AI:n presenterar HTML-kod i ett avgränsat kodblock — en grå eller mörk ruta med monospace-text. Hela koden börjar nästan alltid med <!DOCTYPE html> eller <html> och slutar med </html>. Det är just det blocket du vill kopiera.
Använd kopieringsknappen
De flesta AI-verktyg har en liten "Copy"- eller "Kopiera"-knapp i det övre högra hörnet av kodblocket. Klicka på den. I Claude visas koden i en artefakt-panel med en kopieringsknapp längst upp till höger. I ChatGPT hittar du "Copy code" på samma ställe.
Kontrollera att du har all kod
Klistra in koden i ett tomt textdokument och bläddra till slutet. Se till att texten slutar med </html>. Om koden verkar klippt av mitt i — be AI:n: "Fortsätt koden från där du slutade" och kopiera resten, sedan fogar du ihop dem.
Om det inte finns någon kopieringsknapp
Klicka i kodblocket, tryck Ctrl+A (Windows) eller Cmd+A (Mac) för att markera allt, och sedan Ctrl+C / Cmd+C för att kopiera. Kontrollera ändå att du fångat hela koden.
Steg 2: Skapa en ny fil
Nu ska du klistra in koden i en textredigerare och spara den med rätt filändelse.
Öppna en textredigerare
Du behöver ett program som sparar ren text — inte Word eller Google Docs, som lägger till osynlig formatering.
- Windows: Öppna Anteckningar (sök på "Anteckningar" i Start-menyn, eller hitta den via Tillbehör).
- Mac: Öppna TextEdit. Viktigt: gå till Format → Gör till oformaterad text innan du klistrar in. Annars sparar TextEdit filen som RTF, och det fungerar inte.
Klistra in koden
Klicka i det tomma dokumentet och tryck Ctrl+V (Windows) eller Cmd+V (Mac). Du ska nu se hela HTML-koden i textredigeraren.
Spara filen med rätt filändelse
Tryck Ctrl+S (Windows) eller Cmd+S (Mac) för att spara. Här är det viktiga steget:
- Ge filen ett beskrivande namn, till exempel
frukter-memory.htmlellergeografi-quiz.html. - Undvik mellanslag i filnamnet — använd bindestreck i stället.
Windows: välj 'Alla filer' i dialogrutan
I Anteckningar på Windows finns en lista som heter "Filformat" eller "Filtyp" längst ned i spara-dialogrutan. Den är som standard inställd på "Textdokument (*.txt)". Ändra den till "Alla filer (*.*)" — annars sparas filen som quiz.html.txt i stället för quiz.html, och webbläsaren förstår inte att det är en webbsida.
Mac: TextEdit sparar som RTF som standard
I TextEdit måste du välja Format → Gör till oformaterad text innan du sparar. Du kan också gå till TextEdit-inställningar och ändra standardformatet till "Oformaterad text" permanent, så slipper du göra det varje gång.
Steg 3: Öppna i webbläsaren
Nu är det dags att se om det fungerar.
Hitta filen i Utforskaren (Windows) eller Finder (Mac) och dubbelklicka på den. Filen öppnas automatiskt i din standardwebbläsare. Du kan också dra och släppa filen direkt till ett öppet webbläsarfönster.
Ser du resursen? Bra — du är klar! Adressen i webbläsarens adressfält börjar med file:// i stället för https://, vilket är helt normalt när du öppnar en lokal fil.
Fungerar i alla moderna webbläsare
Chrome, Edge och Firefox fungerar alla utmärkt för att öppna lokala HTML-filer. Safari på Mac fungerar också, men kan ibland blockera vissa JavaScript-funktioner i lokala filer. Om något verkar konstigt, prova att öppna filen i Chrome eller Edge i stället.
Steg 4: Felsökning
Fungerar det inte som förväntat? Här är de vanligaste problemen och hur du löser dem.
Filen öppnas som text i stället för som webbsida
Det här händer nästan alltid på Windows när filen råkat sparas som .html.txt. Högerklicka på filen och välj "Egenskaper" — under "Filtyp" ser du om den heter "HTML-fil" eller "Textdokument". Om det är ett textdokument: öppna filen i Anteckningar igen, välj Spara som och se till att ändra filformat till "Alla filer" den här gången.
Svenska tecken visas konstigt — å, ä, ö blir frågetecken eller märkliga symboler
Det handlar om teckenkodning. HTML-filer ska sparas som UTF-8. I Anteckningar på Windows väljer du "UTF-8" i rullgardinsmenyn "Kodning" längst ned i spara-dialogrutan (inte "ANSI" eller "Unicode"). Om AI:n har skrivit <meta charset="UTF-8"> i kodens <head>-sektion är halva jobbet redan gjort — du behöver bara se till att även Anteckningar sparar som UTF-8.
Helt tom sida eller bara vit skärm
Det betyder oftast att HTML-koden saknar grundstrukturen. Öppna filen i Anteckningar och kontrollera att den börjar med <!DOCTYPE html> och innehåller taggarna <html>, <head> och <body>. Om koden verkar ofullständig — gå tillbaka till AI-verktyget och be om den fullständiga HTML-koden igen.
Dela med kollegor
En av de finaste sakerna med HTML-filer är att de är helt självständiga. Allt som behövs för att resursen ska fungera finns i den enda filen. Det gör delning enkelt.
Dina alternativ:
- Mejla filen direkt. Bifoga
.html-filen som en bilaga. Mottagaren sparar den och dubbelklickar för att öppna. Klart. - Ladda upp på VibeTeacher. Gå till "Dela" i menyn, ladda upp din HTML-fil, lägg till ämne och beskrivning. Resursen blir sökbar för alla lärare på plattformen.
- Dela via Google Drive eller OneDrive. Ladda upp filen till din molnlagring och skicka en länk. Observera att Google Drive inte kör HTML-filer direkt i webbläsaren — mottagaren behöver ladda ned filen och öppna den lokalt.
- Skicka via lärplattformen. I Skolon, Google Classroom, Canvas eller Unikum kan du bifoga filen som ett material till en uppgift.
GDPR: HTML-filer innehåller ingen elevdata
En HTML-fil du skapat med AI innehåller normalt ingen personinformation — det är kod och innehåll, inte elevuppgifter. Du kan dela den fritt med kollegor utan GDPR-bekymmer. Däremot bör du tänka på var du sparar elevernas svar och resultat om resursen samlar in sådant. Mer om det finns i guiden om GDPR för lärare.
Bonus: Testa på mobilen
Vill du se hur resursen ser ut på en elevs telefon eller surfplatta? Det är enklare än du tror.
- Mejla filen till dig själv. Öppna mejlet i din telefons mejlapp och tryck på bifogad fil.
- Öppna i mobilwebbläsaren. På Android öppnas
.html-filer ofta direkt i Chrome. På iPhone kan du behöva välja "Öppna i Safari" eller en annan webbläsare från delningsmenyn. - Testa interaktiviteten. Fungerar knappar, formulär och animationer? Är texten tillräckligt stor? Det är bra att veta innan du använder resursen i klassrummet.
Om något inte fungerar på mobilen är det oftast ett tecken på att resursen behöver anpassas för touch-skärmar. Det kan du enkelt be AI:n om: "Anpassa den här resursen för mobilanvändning med touch-skärm."
En HTML-fil är en vanlig textfil med filändelsen .html. Spara koden i Anteckningar (Windows) eller TextEdit (Mac), kom ihåg att välja "Alla filer" och UTF-8-kodning på Windows, och dubbelklicka sedan för att öppna i webbläsaren. Filen är självständig och kan mejlas, delas via molnlagring eller laddas upp direkt på VibeTeacher.
Publicera på VibeTeacher
Nästa steg: lär dig hur du laddar upp din HTML-fil och gör den sökbar för alla lärare på plattformen.
GDPR för lärare
Vad du behöver tänka på kring integritet, elevdata och säker delning av undervisningsresurser.