web analytics

How to make an ebook pt 2


eBook Reader Code

How to make an ebook pt 2 – The fun part begins – formatting the way you want it to look.

A continuation from part 1 How to make an ebook. As with that, this will have images and a video to show you what you need to do, to get the look you want for your formatted manuscript. If you want here are the links for part 3part 4 and part 5.

To convert to ebook takes certain repeated steps throughout your manuscript. Each step is small and quick to do. They will have a major impact on the look and style of your manuscript.

After adding your manuscript and then repeating certain pieces of code, the next step will be to convert books to kindle (MOBI) or ePub or any other format you want it to be. The great thing about converting your manuscript to ebook, is once you have the code in place, you can convert your book to as many formats as your want, as many times as you want. I will show you how to do that in a later tutorial.

First, we need to start adding code to the example-code.html file. If you haven’t already got the code, please right click on the link example-code.html and save it to a location you can find it when you need it. Also, if you haven’t done so, please download either KompoZer free HTML editor or Coffecup HTML editor, it’s $49, but you can first download a 30 day trial version. I will show you the difference between the two later on.

Let’s get cracking and coding!

I presume that you have now downloaded KompoZer or Coffeecup and you have them open with the example-code.html file, open. (If not, then go and watch the video on pt1 How to make an ebook – It’s important!) Great!

Now, I am going to use my ebook – The Faeries of Birchover Wood, as the example manuscript. You will just replace my example manuscript with your own. Everything I do is what you will do on your manuscript, if you want. The only real difference is the manuscript. Remember, you might not want to use all the code that I use, but it’s there if you want it.

I’m going to first talk to you about the different parts of the CSS code.

You will see that there are sections that look like this: p.center p.chapter p.copyright. each one is called a ‘Class selector’. For this tutorial, we can call them Class Headings or Class Titles for code. Each ‘Title’ has some code underneath. { that means Open and } means Close. Anything inbetween will only be associated with that ‘Class Title’

So when you use that section of code, an eReader will know what to display and how to display your section of text.

Let me show you.

When you have added chapter of your manuscript to the HTML editor, you will want it to look a certain away. The chapter will have a Chapter Heading or Chapter Title.

To have that chapter heading centered, you will add this: p.center

Following that would be the name of your chapter example Chapter 1 – The beginning. When viewing it, on either the preview of the HTML editor or on an eReader, you will see ‘Chapter 1 – The Beginning‘ centered.

Why? Because adding p.center (title code) tells the eReader to look at the CSS code p.center and it sees that within { and } center means the text is aligned – center, and it is not to be indented

p.center (title code)
{ (open)
text-indent: 0em; (no indent)
text-align: center; (center alignment)
} (close)


Fig 11. KompoZer Author Code

Fig 11. Question – Where do we put the Class Title? (I beat you to it)

Just before your write ‘Chapter 1 – The Beginning’ or whatever the name of your chapter will be.

Let us do this now.

Because I have an ‘Author section’ After my Table of Contents (That starts to get built automatically as you add more code – I’ll explain as I go along) That come first. It doesn’t have to, but it helps if you are giving a sample of your story away for free.

You see firts:<!– AUTHOR –>

The <!– tells the eReader to ignore it. They are comments for the programmer or person who is coding used as reminders. I use it to tell me what section I am coding. This is the Author section. Remember to close it –>

<br > Drops down or breaks the line or text. New line.

<div id=”title-page”> This is very cool. This is the start of your properly formatted Table of Contents. It’s very important. Please, on a piece of paper write down title-page as you will need this later and it changes on every section we do. On an eReader, if you have a clickable TOC, then if you click on Author (title-page) it will take you to the Author section of my book.

You don’t have to call it title-page. You can call it whatever you like, but you must remember what it is and what it is associated with, as later on, you will need to duplicate it for the clickable section of the TOC. Also, don’t have gaps or space, use - if you want a gap or space between words. No numbers, either.

Next, <p class=”center title”> There are actually two Class headings. Center and Title. (Yes, you can add multiple Class headings together – separate them by using a space.)

Can you see, by only adding <p class=””> The browser or e-Reader goes to the Class Heading and knows how to display the text (Brilliant!!)

In this case, I have ‘The Faeries of Birchover Wood’ centered and ‘title‘ makes it a slightly bigger font ‘1.5em‘ We use ‘em‘ for font size in CSS. You can change the number to any number you wish. The bigger the number, the bigger size font you will get. Experiment.

Next we have </p> That means to close that code off. At the beginning we use <p now we use </p> the / closes it.

Underneath, we have </div> Again, we are closing the <div> tag as ‘The Faeries of Birchover Wood‘ is what will be seen on the Table of Contents. You will click it and it will take you to the Authors page.

After that, we repeat the <p class=”class title”> code. We then finish off by adding <!– End_OF_AUTHOR –> Now you have completed your first section of your eBook. Congratulations! Even better, we can preview this as well.


Fig 12. Kompozer-Preview-Tab

Fig 12. On KompoZer, you are on the Source tab, next to it you have the Preview Tab, click it and you will see the Title of your Book proudly displayed in an extra large font and centered and spaced evenly. (Beautiful!)


Fig 13. KompoZer-Preview Book Title

Fig 13. Shows you the end result. Again, if you have changed the text to what the name of your book is, then you will see it with your book details, not mine.

Now we will deal with some more code.


Fig 14. KompoZer Copyright Code

Fig 14. Same again, repeating the same code, but we are going to add the short version of our copyright notice. The long one will go at the end of your book. Why? Again, if you are giving a sample on Amazon, and I’m only talking from experience with Amazon, they allow readers to download 10% of your story.

I would want the reader to have a good 10% filled with story, not fluff. The full Copyright Notice can go at the end of the eBook. There has been too many times I have downloaded a sample, only to find a lot of fluff, yes important fluff, but still fluff that can go to back of the eBook, that has taken up a lot of that precious 10%.

Again, multiple Class Headings. Center and Copyright. Copyright is a smaller font than your book title.

Something slightly different. we have the Page Break. Goes without saying. The equivalent of coming to then of a page and turning it over.

This short version will go onto the Book Title Page. In effect you are using as much space on a digital eBook page to get what would normally be two pages of information on a physical book. (Remember that 10%) Anything before a Page Break will be together.

Now, again Preview what you have done. You should see something like this:


Fig 14. KompoZer Copyright Code


Hope you have liked it so far. Here is the link example-code-v2.html Right Click and Save as. This has what we have complete so far. I am going to finish now, as I think it may be a lot to take in. I will add a video to this as well.

Download Part 2 HD Version

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


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!
Please share this article.
You can leave a response, or trackback from your own site.
Powered by WordPress | Download Free WordPress Themes | Thanks to Themes Gallery, Premium Free WordPress Themes and Free Premium WordPress Themes
%d bloggers like this: