eBook Reader with formatted page

There’s a right and a wrong way. Do it right first time.

How to make an ebook or how to create an ebook and get it correctly formatted for Amazon Kindle – Well that’s my task that I’ve set out to do.

The ‘how to convert an ebook to Kindle’ will also be covered later on, using a wonderful free piece of software called Calibre. More later on.

To successfully convert books to Kindle and any other format requires your book to have some HTML and CSS code added to it. (Oh No, no, noooooooo!!!)

I know what you’re saying, “I can’t do that. What’s HTML CSS? Way out of my depth” But you can, you just cut and paste the code I made up for my first book. It works, it has been validated by W3C HTML and CSS Validation service and happy to say no errors found.

It’s clean and your document will not be stuffed full of code.

Most of the code is just repeated.

To convert to ebook may seem at first very technical, but when we break all the steps down, the complexities fall away.

I will give you examples of what I used, where I used it and how it made a difference. At the end you will have an ebook template. If you wish, you can give it away as a free ebook template or just reuse it as many times as you wish.

The code will be given to as a downloadable text, pdf and HTML/XHT file. With the HTML/XHT file, just open it up with your own HTML editor or TXT editor.

Here are the links if you don’t want to go through the whole tutorial. It’s worth it, just to understand what the code does and why.

Here is a link to download the code as Example Code.txt  file and Example-code.html file. You can just open the XHT file in your HTML editor and just start from there. Right clicking the link and in Chrome & Firefox ’Save Link As‘ in Opera ’Save Linked Content As‘

Note: If you download the txt file, open it up in Microsoft Wordpad. It keeps all the formatting as it should look. Microsoft Notepad has no formatting and so you get a continuous line of text. If you already have a HTML editor, then download and open the xht file using the editor.

These instructions are repeated at the end of this tutorial.

This tutorial will also be set out with detailed images and text, so you can see and read what is to be done. Some images may be repeated, not that I can’t count or see properly, but because I probably will be making a point or highlighting something on the image.

How to start

I will start by making a promise. I will try and write this article with as little techno bable as possible. As I know, a lot of you think sometimes the writers of these type of articles are from different planets.

Rest assure, I am from England and not from planet Whacko! (But the way some of us speak, you would be forgiven in thinking we are from a different planet!)

Now, let’s presume you have your finished manuscript in your word processor of choice. I use OpenOffice for everything. It opens Word documents for fun, excel spreadsheets, and everything else I throw at it. It really is good at making pdf files as well.

It doesn’t matter if you use any other word processor, such as: Abiword, Bean GNU TeXmacs, LyX or Ted, which are all free. As well as all the commercial word processing software. As long as you can write with it, then this tutorial will work for you.

Now, to get started.

Before we open up our word processor, you will need to either use windows Notepad or a HTML Editor. There are two HTML editors I recommend.

The first is Free. It’s called KompoZer (KompoZer link)

It’s freeware, which means you download a fully working piece of software and have nothing to pay. It’s not a demo. It’s 100% fully working software. If you really like it, you could bung them some money to say thanks.

The other is what I use, I bought it for $49 (I bet you thought I was going to say Dreamweaver) Not at £442, or if you are a student, £92 (that’s more like it)

No, I use Coffeecup HTML editor. (Coffeecup HTML Editor link) Really good. Great support (makes a change) and very easy to use. I use a lot of Coffeecup software, because what they produce is very good, easy to use and cheap as chips!

Also, on everything they have developed they allow you to download a 30 day version. Which, I have always done. So, you could download HTML editor and actually do what I am about to teach you on the 30 day free trial software. It’s fully working, just stops working after 30 days. As of the 5th April, it got voted Best HTML editor 2012 by About.com. Dreamwever was on that list. So it says a lot for the cheap stuff!

For the sake of this tutorial, I am going to download the Free version – KompoZer. Just to show you what to do. I don’t expect you to go away and purchase anything, and it’s so nice to be shown how to do something on a piece of free software that everyone can download.

Note: If you are using an Apple Mac, then you can downloadable KompoZer for the Apple Mac as well. (Same location on the link above – just scroll down a little)

I’m not advocating that you have to be a Windows user. If you are using Linux, same again. KompoZer is for Linux users as well. (I know what said about techno bable, forgive me! Linux does get me excited)

For this tutorial I will be using a Windows version. Interestingly, as these HTML editors are taking on word processor features, they will come with their own dictionaries. You can also download other dictionaries for KompoZer. At the moment, there are 21 supported languages and 27 dictionaries for KompoZer. (Not bad for a free piece of software!)

Let’s get cracking Gromit!

Fig 1. KompoZer zip file

Fig 1. Download KompoZer. (Click the link) And save it where you can easily find it.

Don’t worry about how it looks on my image. I use WinRar to extraxt. As you can see, it’s a zip file, so Winzip or any other extact program will extract the file.

Fig 2. KompoZer being extracted – WinRar

Fig 2. Extract. I am using WinRar so the image shows you how I am extracting the file. You can see on the image, it asks where do you want to extract it or save it to. Where ever the zip file is, WinRar will automatically highlight the location where it will be extracted. On my example, the zip file is on my Desktop, so it tells me that if I continue, the extracted file will also be on my Desktop.

Download Winrar x86 (32bit) 4.11 Zip file extractor here. For click this WinZip. Clicking these link will open a new tab in your browser.

Fig 3. KompoZer extracted folder

Fig 3. After you have extracted it, you will see the extracted folder on your Desktop. When you open the folder, you will see the folder again. Just click that one.

You will come to what we are after.  A whole bunch of files and folders.

The great thing about this program is that it’s very small. It only takes up about 20 Mb of space hard disk space. For today that is pretty small for a very useful piece of software.

Fig 4. KompoZer exe file

Fig 4. This is what you want to see, if you have downloaded KompoZer. The file we are looking for is Kompozer.exe as is highlighted on the image. Just double click it and wait for it to open.

Open up folder. There is no actual install.

KompoZer will run directly from the KompoZer.exe file. This helps with taking it with you every where you want to go.

The next screen that you will see is where we get our feet wet! The HTML editor. This is where either your nightmares will come true or your ebook formatting dreams will show themselves.

It may seem very sparse, but it’s pretty powerful. The code you add to this screen, you will be able to see the results first, without having to save, uploads or format. It’s a great way of seeing how your work looks before finalising.

Fig 5. KompoZer Opening Screen

Fig 5. Now you see the opening screen of KompoZer.

Please click on image to see it bigger.

It will open on a separate tab of your browser.

As you can see, it’s nice and clean, but it’s time to muck that up and create the code that will help you with all your ebooks in the future.

KompoZer New file

Fig 6. First, I want you to click on File, New, or a keyboard combination CTRL+N.

Make sure the boxes you see on the image are checked and unchecked on your New Page. Click ‘Create’

This will help you create an XHTML file that will meet the strict standards that are expected by the W3C standards committee. More strict than just writing a HTML file. What you are basically doing, is creating a web page, but it is for an eReader.

Fig 7. Now that you are on your new page, just look to the bottom. You will see four tabs. It will set for Normal. Click on Source. Here is where we will add the code to our ebook. (I can’t wait!)

Fig 7. KompoZer Source Tab

Fig 8. After clicking on the Source tab, you will see this code that probably doesn’t mean anything to you. Don’t worry, it’s about standards and the organisation behind the standards. W3 Org. We are going to replace that with own own code, some of it will be the same, some will be different. (Welcome to your first day at school!!)

Fig 8. KompoZer Standard Source Code

You don’t need to concern yourself too much with the rest of the code. The great thing about making your own ebook, and formatting your own ebook is, you don’t have to understand the code through and through. Just understand that where you place it, will add a certain design element to your ebook.

That is where the CSS part of the code comes in. As we start adding it, you will see how it connects with your story to produce the look that you want. (It’s pretty exciting stuff)

Now here is the code that I want you to copy and paste. You will replace the code on Fig 8 completely.

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=utf-8″ >
<title>The Faeries of Birchover Wood – Book 1 – The Bad</title>
<!–[if IE]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

<style type=”text/css”>
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0em; }

Fig 9. This is what the code will look like in KompoZer. Click the image for a larger one in a separate tab.

Fig 9. New KompoZer Source code

It looks like it needs OpenOffice dictionary on it, but that is the correct code.

Once you have cut and paste it, it should look like Fig 9.

Have you noticed the section highlighted. It’s the name of my book, which I will be carrying through this tutorial. Please, don’t forget to add your own title of your book. Keep the name of your book in-between the <title</title> tags.

We are now going to cut and paste some more code. I am doing this in sections so you don’t get confused. (Hopefully)

Place your flashing cursor at the end of Code line 11. ( …Oem; } ) Then press your Return key twice.

You will be on Code line 14. I want you to add this code from Fig 10. Click the image for a larger one in a separate tab.

Fig 10. Kompozer CSS Source code

Fig 10. Shows the code in-between line 13 and 72.

Here is the code to cut and paste.

p.center
{
text-indent: 0em;
text-align: center;
}
p.chapter
{
text-indent: 0em;
font-weight: normal;
font-size: 1.2em;
margin-top:1em;
margin-bottom:2em;
text-align: center;
}
p.copyright
{
font-weight: normal;
font-size: 1em;
margin-top:1em;
margin-bottom:2em;
}
p.heading
{
text-indent: 0em;
font-weight: normal;
font-size: 1.5em;
margin-top:1em;
margin-bottom:2em;
text-align: center;
}
p.indent
{
text-indent: 1.25em;
line-height:130%;
margin-bottom: 0.2em;
}
p.italic
{
font-style: italic;
}
p.pagebreak
{
page-break-after: always;
}
p.title
{
font-weight: normal;
font-size: 1.5em;
margin-top:1em;
margin-bottom:2em;
}
</style>
</head>
<body>
<br>
</body>
</html>

It looks a lot, but the code is going to help you with centering  indenting, extra large headers etc.

On the links provided, you can save the file by right clicking the link and in Chrome & Firefox ‘Save Link As‘ in Opera ‘Save Linked Content As‘

Here is a link to download the code as Example Code.txt  file and Example-code.html file. You can just open the XHT file in your HTML editor and just start from there.

Hope you have enjoyed this first part of ‘How to make an ebook or how to create an ebook’

Article 2 will explain what each part of the CSS code does for you formatting.

(Continue tomorrow)

Here is a video of how to download and install KompoZer, and then how to download and open up the example-code.html file.

 Click the links for parts 2, parts 3, parts 4 and part 5

Return from How to make an ebook to Let’s Get E-Published

Article by Ian S. Rutter

Ian S. Rutter is an indie publisher of a children’s book called ‘The Faeries of Birchover Wood’ He is writing the sequel, a short story and a horror novel. For fun he spends time with his three children and his wife. He loves reading, drawing, walking and daydreaming.

Connect with me on Google+

Digg button brought to you by diggZ-Et (WordPress Plugin)

Be Sociable, Share!

•