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.

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.

Med Gemini

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.

1 Ladda upp pdf-filen som ska bli en hemsida.

.2 Prompt 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.
Skapa en högupplöst webbdesign-layout för en hemsida baserad på pdf-filen. Använd ett minimalistiskt gränssnitt, behåll färgpaletten i pdf-filen. 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-filen

Även i PRO-läget klarar Gemini bara av några sidor åt gången. Är det en lång text på över fyra sidor måste det ske i omgångar.

1 Först ber du Gemini att skapa en design för en hemsida baserad på lärobokens innehåll.

2 Sedan kan en prompt för 20 sidor se ut: Nu vill jag att vi fyller på den första sektionen. Skapa HTML-kod för sektionen om 'Det nordamerikanska frihetskriget'. Använd all text från sida 24 till 29 i PDF:en. Uteslut ingenting. Behåll rubriker och struktur. 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.

3 Sedan: Nu lägger vi till nästa del. Skapa HTML-kod för sidorna 30–33 (om kvinnor, slavar och ursprungsbefolkningen). Ta med all text ordagrant. 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.

4 Slutligen: Nu lägger vi till den sista delen. Skapa HTML-kod för 'Franska revolutionen' (sida 38 och framåt). Ta med all text ordagrant. 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.