How to Create an EPUB File from HTML (and XML)

Technology Networking & Internet
By Technology
106 42


An EPUB file is the other type of ebook file that is popular. If you are planning on writing or publishing an ebook, you should save your HTML as a Mobipocket file, and also as an EPUB. In some ways, an epub file is a lot easier to build than a Mobi file. Since EPUB is based on XML, you simply need to create your XML files, collect them together, and call it an epub. These are the steps you should take to create an epub file:

  1. Build Your HTML
    Your book is written in HTML, with CSS for styling. But, it's not just HTML, it's XHTML. So, if you don't normally write in XHTML (closing your elements, using quotes around all attributes, and so on) you will need to convert your HTML to XHTML. You can use one or more XHTML files for your books. Most people separate the chapters into separate XHTML files. Once you have all the XHTML files, put them in a folder all together.
  2. Create a MIME Type File
    In your text editor, open a new document and type:
    application/epub+zip
    Save the file as “mimetype” without any extension. Place that file in the folder with your XHTML files.
  3. Add your style sheets
    You should create two style sheets for your book one for the pages called page_styles.css:
    @page {
      margin-bottom: 5pt;
      margin-top: 5pt
    }
    And one for the book styles called stylesheet.css. You can give them other names, you'll just need to remember what they are. Save these files in the same directory with your XHTML and mimetype files.


  1. Add your cover image
    Your cover image should be a JPG file no more than 64KB. The smaller you can make it the better, but keep it good looking. Small images can be very hard to read, and the cover is where you do your marketing of your book.
  2. Build your title page
    You don't have to use the cover image as your title page, but most people do. To add your title page, create an XHTML file called titlepage.xhtml. Here is an example of a title page using SVG for the image. Change the highlighted part to point to your cover image:
    <?xml version='1.0' encoding='utf-8'?>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Cover</title>
    <style type="text/css" title="override_css">
    @page {padding: 0pt; margin:0pt}
    body { text-align: center; padding:0pt; margin: 0pt; }
    </style>
    </head>
    <body>
    <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 425 616" preserveAspectRatio="none">
    <image width="425" height="616" xlink:href="cover.jpeg"/>
    </svg>
    </div>
    </body>
    </html>
  3. Build Your Table of Contents
    Create a file called toc.ncx in your text editor. This is an XML file, and it should point to all your HTML files in your book. Here is a sample with two elements in the table of contents. Change the highlighted parts to your book, and add additional navPoint elements for additional sections:
    <?xml version='1.0' encoding='utf-8'?>
    <ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="eng">
    <head>
    <meta content="0c159d12-f5fe-4323-8194-f5c652b89f5c" name="dtb:uid"/>
    <meta content="2" name="dtb:depth"/>
    <meta content="calibre (0.8.68)" name="dtb:generator"/>
    <meta content="0" name="dtb:totalPageCount"/>
    <meta content="0" name="dtb:maxPageNumber"/>
    </head>
    <docTitle>
    <text>How to Build a Website</text>
    </docTitle>
    <navMap>
    <navPoint id="a1" playOrder="0">
    <navLabel>
    <text>Hosting</text>
    </navLabel>
    <content src="build_website.html#step1"/>
    </navPoint>
    <navPoint id="a2" playOrder="1">
    <navLabel>
    <text>Do You Need a Domain Name?</text>
    </navLabel>
    <content src="build_website.html#step2"/>
    </navPoint>
    </navMap>
    </ncx>
  4. Add a container XML file
    In your text editor, create a file called container.xml and save it in a sub-directory below your HTML files called META-INF. The file should read:
    <?xml version="1.0"?>
    <container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
    <rootfiles>
    <rootfile full-path="content.opf" media-type="application/oebps-package+xml"/>

    </rootfiles>
    </container>
  5. Create the contents list — called content.opf
    This is the file that explains what your epub book is. It includes meta data about the book (like the author, publish date, and genre). Here is a sample, you should change the parts in yellow to reflect your book:
    <?xml version='1.0' encoding='utf-8'?>
    <package xmlns="http://www.idpf.org/2007/opf" version="2.0" unique-identifier="uuid_id">
    <metadata xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:opf="http://www.idpf.org/2007/opf" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:calibre="http://calibre.kovidgoyal.net/2009/metadata" xmlns:dc="http://purl.org/dc/elements/1.1/">
    <dc:language>en</dc:language>
    <dc:title>How to Build a Website</dc:title>
    <dc:creator opf:file-as="Kyrnin, Jennifer" opf:role="aut">Jennifer Kyrnin</dc:creator>
    <meta name="cover" content="cover"/>
    <dc:date>0101-01-01T00:00:00+00:00</dc:date>
    <dc:contributor opf:role="bkp"></dc:contributor>
    <dc:identifier id="uuid_id" opf:scheme="uuid">0c159d12-f5fe-4323-8194-f5c652b89f5c</dc:identifier>
    </metadata>
    <manifest>
    <item href="cover.jpeg" id="cover" media-type="image/jpeg"/>
    <item href="build_website.html" id="id1" media-type="application/xhtml+xml"/>
    <item href="page_styles.css" id="page_css" media-type="text/css"/>
    <item href="stylesheet.css" id="css" media-type="text/css"/>
    <item href="titlepage.xhtml" id="titlepage" media-type="application/xhtml+xml"/>
    <item href="toc.ncx" media-type="application/x-dtbncx+xml" id="ncx"/>
    </manifest>
    <spine toc="ncx">
    <itemref idref="titlepage"/>
    <itemref idref="id1"/>
    </spine>
    <guide>
    <reference href="titlepage.xhtml" type="cover" title="Cover"/>
    </guide>
    </package>
  6. That's all the files you need, they should all be in a directory together (except for container.xml which goes in a sub-directory META-INF). I like to then go to the container directory and make sure it has a name that reflects the title and author names.
  7. Once you have the directory of files named how you want it you should use a Zip archive program to zip the directory. My sample directory ends up as a zip file named “How to Build a Website - Jennifer Kyrnin.zip”
  8. Finally, change the file name extension from .zip to .epub. Your operating system may protest, but go ahead with it. You want this to have an epub extension.
  9. Lastly, Test Your Book
    It's hard to get the epub format correct on the first try, so you should always test your file. Open it in an epub reader like Calibre. And if it doesn't display correctly, you can use Calibre to correct problems.
Source...
Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time
You might also like on "Technology"

Leave A Reply

Your email address will not be published.