Omvandla en pdf-fil till en hemsida med AI

Om du använder Gemini eller Claude så ta den version som är anpassad för kodning.

Det enkla sättet

Prompt

Du är specialist på att koda och designa websidor och hemsidor. Den här pdf-filen ska göras om till en hemsida. All text ska läggas in i rätt storts taggar.

för paragraf och så vidare. Om texten i pdf-filen blivit förvrängd ska du se till att den läggs in som normal text. Alla ord i pdf-filen ska vara kvar i html texten. Alla bilder ska placeras i egna kort som bryter av textflödet och med bildtext under.
Nu bör hemsidan med texten skapas tillsammans med hållare för bilderna. Öppna ett textbehandlingsprogram och klistra in koden. Spara den med ett namn som slutar på .html

Bilder

Bilderna från pdf-filen måste också in på hemsidan. De sparas i samma mapp som html-filen. Den jobbiga vägen är att öppna pdf-filen och kopiera bilderna, en i taget. Enklast är att ge bilderna namn som sidnummer_ordning.jpg dvs. första bilden på sida 31 får nummer 31_1.jpg och andra bilden på samma sida 31_2.jpg så vet du var bilderna ska passa in redan på namnet.

Se filen lokalt

Öppna webläsaren och skriv file:///C:/ om du sitter på en PC med Windows. Därifrån får du söka dig fram i filträdet till din sparade html-fil.

Se filen online

Det är inte lika självklart att se filen online. Du måste hyra in dig på ett webhotell. Sedan kan du ladda upp html-filen, tillsammans med bilderna, där.

Det avancerade sättet

I dagsläget (dec. 2025) fungerar Gemini bäst, men det kan ändras. Gemini har fler möjligheter till detta än andra AI. Gör så här: Ställ först in Gemini på att använda Canvas och PRO-läget. Även i PRO-läget klarar Gemini bara av några sidor åt gången. Är det en lång text på över fyra-sex sidor måste det ske i omgångar. Vill du vara säker på så hög kvalitet som möjligt får du ta ett uppslag, två sidor, åt gången.

1 Ladda upp PDF:en som ska bli en hemsida.

2 Prompt: Skapa en högupplöst webbdesign-layout för en hemsida baserad på PDF:en jag laddat upp. Använd ett minimalistiskt gränssnitt, behåll färgpaletten i PDF:en. Försök placera bilder på ungefär samma plats i förhållande till texten. Lägg in en avgränsare med sidnummer mellan varje sida som även finns i PDF:en. Sidan ska se lika bra ut i en mobil som på en stor datorskärm. Text och bild har ett pedagogiskt upplägg där det är viktigt att text och bild samarbetar för att en elev som läser texten ska kunna lära sig så mycket som möjligt. All text som eleven ser ska vara på svenska.

3 Sedan kan en prompt för två sidor, eller ett uppslag i en lärobok, se ut:

{FROM}sidafrån{/FROM}

{TO}sidatill{/TO}

Töm designen på allt innehåll på sidorna {FROM} till {TO} men behåll sidans struktur. Nu vill jag att istället att vi fyller på sidan med innehåll från PDF:en. Skapa HTML-kod för sida {FROM} och {TO} i PDF:en. Texten i HTML-koden ska vara identisk med texten i PDF:en, uteslut ingenting av innehållet i PDF:en. Behåll rubriker och struktur. Alla bilder ska ha en titel. Om en bild inte kan laddas visar du istället en grå ruta med texten "Bild saknas" och bildens titel istället för att det bara ser trasigt ut. lägg in en kommentar i början av sektionen och en i slutet så att det är lätt för en användare att se vilken kod som ska kopieras in i webdesignen du skapade först.

3 Är det istället en prompt för bara den ena sidan i uppslaget får du justera prompten: Töm designen på sida {FROM} på allt innehåll. Nu vill jag att istället att vi fyller på sidan med innehåll från PDF:en. Skapa HTML-kod för sida {FROM} i PDF:en. Texten i HTML-koden ska vara identisk med texten i PDF:en, uteslut ingenting av innehållet i PDF:en. Behåll rubriker och struktur. Alla bilder ska ha en titel. Om en bild inte kan laddas visar du istället en grå ruta med texten "Bild saknas" och bildens titel istället för att det bara ser trasigt ut. lägg in en kommentar i början av sektionen och en i slutet så att det är lätt för en användare att se vilken kod som ska kopieras in i webdesignen du skapade först.

Efter varje inkopierat uppslag får du endera öppna ett program för att redigera texter, klistra in det AI:n skapat, spara filen (som .html) och öppna den i en webbläsare för att se att den ser bra ut. Eller så går du igenom alla sidorna innan du sparar. Ofta finns inte bilderna med men eftersom du har bildhållarna i koden är de rätt lätt att ersätta.