Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Transform a PDF into a website...

Featured Replies

Hi guys

 

i have just registered on WDF, because i have been spending most of today trying to figure out how to transform a 2 pages pdf file into a website. :unknw:

 

the pdf has a border image and text in the moddle of the pages, also with few images, and i would like to have the border image as b-ground and the text scrolling in the middle, avoiding having a long page or 2 webpages.

 

i have tried slicing this image ion photshop and using CSS trying to fix it into position, but i had no joy at all: i need help desperately! :bangb::cray:

 

i believe you need to use xhtml, which i have no clue at all , but i have a basic knowledge of CSS and HTLM.

 

i would like to create something similar to this site, so i hope someone will be able to give me some tips.

 

thanks in advance for all the answers. :clapping:

 

Ciao

Fel

Welcome to WDF!

 

The only way to do this is create the site from scratch using the content from the PDF. You can extract the text from the PDF easily enough, some images may be easy to copy from screenshots.

Don't worry about XHTML, it's just HTML with a few more rules, for example some tags are no longer allowed and you are supposed to close all tags. Unless you are defining your page as XHTML you don't need to use it, so ignore this for now.

 

HTML & CSS can do what you want to. You need to extract the text and slice up the images as you said and stick it all back together again in HTML & CSS.

 

It sounds like you have gotten this far, so why not post some code or some more specific details of what you are stuck on and we'll try to help :)

  • 1 month later...

First you slice this image without any text.

then on HTML page you can create some table where you insert or add background(where the text appear) image one by one and where the background is white or some other color, you add same color on this table or td.

First you slice this image without any text.

then on HTML page you can create some table where you insert or add background(where the text appear) image one by one and where the background is white or some other color, you add same color on this table or td.

 

This would of been ok 10 years ago but its CSS now

Hey Fel :hi:

 

Welcome to the forum....

 

You can use a table based layout which will be easier for you to work. And right now it will be better if you think just to implement you layout into Browser and then if you face any problem post here so that we can explain where you were wrong.

Be careful when you copy the text out of the PDF as it can go screwy (believe me I've converted thousands of PDF to XHTML). Because PDFs store the text in a kind of database structure (so I'm simplifying - shoot me!) and then 'query' each section for display - you can get some weird results when you copy the text out. It can be really bad if the PDF comes from a scan because what you see can be an image but the underlying text you physically copy can be jumbled OCR garbage.

But, for accessibility, SEO and repurposing it's definitely worth the hassle to convert. For these reasons it can be well worth some design compromises in not being able to reproduce it exactly. Web users are quite comfortable with seeing a slightly different XHTML version when compared to a 'print layout' PDF.

  • 2 weeks later...

Personally,

 

I would try to start of going for css/xhtml,

 

the reason i suggest this is, for a while i was using tables, and just slicing sites up, but when it came to having to move to a table - less design, my old habbits where hard to break,

 

 

so now no matter how small a job is i go for the xhtml route just so i dont get lazy and fall back to the old route :)

 

just my 2 cents :)

For this I will be talking from experience. So for work, I get sent a zip file containing a set of pdf files. The first thing I do is screenshot the image and convert it to a high quality image. Then using Paint or other image editing software, I slice up the image and then begin to code it.

 

Once you convert it to an image, it becomes fairly easy to code.

  • 1 month later...

dont know if this would help but try a PDF - Word converter. google it. im not sure if that will allow you to retain the the border images and design though. goodluck hope i helped

  • 4 weeks later...
  • 2 months later...

thanks guys....i have almost 83 pages that i want to convert it to HTMl from the pdf. does anyone know the software please

thanks guys....i have almost 83 pages that i want to convert it to HTMl from the pdf. does anyone know the software please

 

Hi there,

As people have been explaining on this thread, there is no automatic way to convert PDF's into HTML, you need to do it by hand.

There are ways to convert the text to a more manageable format, such as a Word document, but you will need to write the corresponding HTML yourself.

Welcome to WDF!

 

The only way to do this is create the site from scratch using the content from the PDF. You can extract the text from the PDF easily enough, some images may be easy to copy from screenshots.

i was shocked to see the post! i thought how can somebody convert a PDF to web-site??? i thought i have wasted 3 years as a designer. thanx god you guys have saved me the misery of having pity at myself

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.