web analytics

How to make an ebook pt 5


How to make an ebook pt 5

How to make an ebook pt 5 – Clickable Table of Contents – Navigation within an ebook – A map of your ebook at your fingertips.

If you need to recap, then click on the links to go back Part 1 - Part 2 - Part 3 - Part 4.

Part 5 has to be the most exciting part of all the tutorials for me personally. (I do get excited over silly things!)

Holding back my language, it really gets up my nose when I find out after purchasing an ebook, that it has no clickable Table of Contents. Does not even have a TOC, to me that’s a cardinal sin.

We all like to know how many chapters, how far we are in a book, how much more to go. We all do it. The TOC helps us, it relaxes us, it answers questions for us. Not to have one, well it would never sell in a traditional book shop.

Let’s not waste time, let’s get on.

TOC, here we come!!!

Before we dive right in, I want us to think about adding a proper Copyright Notice. Remember, at the beginning of How to make an ebook pt 2, we added a very short version of our copyright notice.


Fig 14. KompoZer Copyright Notice – short version

Now, we are going to add the longer version. The proper one that you have for your ebook. I will show you mine (If you show me yours – sorry just had to write that in)

Here it is:


Fig 37. Copyright Notice Full Version

Click on the image to make it bigger

<!– Full Copyright Notice –>

<div id=”copyright”>
<p class=”center”>Copyright Notice</p>

<br />

<p class=”center”>Copyright &copy; 2012 by Ian S. Rutter</p>

<p class=”center”><a href=”http://www.iansrutter.co.uk”>My Website</a></p>

<p class=”center”><a href=”mailto:ian@iansrutter.co.uk”>My email</a></p>

<br />

<p class=”center”>The Faeries of Birchover Wood Book 1 The Bad</p>

<br />

<p class=”center”>These stories are works of fiction.</p>

<p class=”center”>Names, characters and incidents are either products of the author’s imagination or used fictitiously. The places mentioned are entirely real and have been used with great respect.</p>

<p class=”center”>Any resemblance to actual events, locales, or persons, living or dead, is entirely coincidental.</p>

<p class=”center”><b>IMPORTANT</b>: You have my permission to reproduce and/or transmit in any form or by any means, electronic or mechanical.</p>

<br />
<p class=”center”>All rights reserved.</p>

<p class=”center”>Cover art by Ian S. Rutter</p>

<p class=”center”>Images on chapters: 2, 6, 9, 13, 15, 16, 17, 18, 20, 21, 22 and on the Extra section, created by Ian S. Rutter.</p>

<p class=”center”>The rest are clipart.</p>

<p class=”center”>Cover art by Ian S. Rutter</p>

<p class=”center”>Edited by Ian S. Rutter with contributions from Hilary Johnson Author’s Advisory service</p>



That’s my Copyright notice. Simple, gives a lot a way, but I am happy with that. You must alter it according to what you want.

After that, we can now concentrate on the Table of Contents!!

NOTE: After this tutorial, I will have a couple of short cut codes that will help you massively, in both time and in the finger ache department! More later on (You will probably kill me after you find out)

Clickable Table of Contents – in my book (No pun intended) very important for any ebook. It only takes a little planning, a little work but will produce a great feature in your ebook that will satisfy your reader.

This is my Table of Contents.

The Faeries of Birchover Wood Table of Contents

Fig 38. Table of Contents

Click on the image to make it bigger

(I know, it’s a monster!) Yours does not have to be that big. I just wanted to give a lot away in my first ebook ‘The Faeries of Birchover Wood’

I have added some information such as the history of the area that my book is based in. Some photographs. A preview of book 2. Author’s notes. Dedication page and my Copyright Notice at the end.

You can add anything into your ebook, as much or as little as you want. The rules that you have learn’t from these tutorials all apply.

Let me show you how it’s done.

Remember the <div id=””> tag? This is what helps create the above table, but we need a little more coding before we get the results.

Let’s say that you have finished the five chapters from example-code-v4.html. And you are at the end of the last line of code and the your cursor is flashing, waiting to do something. We need to add this.

At the very of your last line of code -


Fig 39. Ch 5 Text

<!– END OF ….. –>

I want you to add this:

<p class”heading”>Table of Contents</p>

<br />

<p><a href=”#title-page”>The Faeries of Birchover Wood</a></p>

<p><a href=”#poem-the-magic-never-ends”>Poem</a></p>

<p><a href=”#Chapter01″>Ch 1 – Hungry</a></p>

<p><a href=”#Chapter02″>Ch 2 – Sightings</a></p>

<p><a href=”#Chapter03″>Ch 3 – The Meeting</a></p>

<p><a href=”#Chapter04″>Ch 4 – The Battle</a></p>

<p><a href=”#Chapter05″>Ch 5 – Myths, Legends and Folklore’s Celebration</a></p>

<p><a href=”#copyright”>Copyright Notice</a></p>


Below the code is:




Fig 40. Table of Contents code



That’s it. No fireworks! No ‘going out all guns blazing! (A bit of an anti-climax.)

Let me explain what is happening.

Again, you have created a Section <!– START OF TABLE OF CONTENTS –>

Then we have added Table of Contents within a p class heading. So this will be a standard heading, centred.

<p class=”heading”>Table of Contents</p> is centred

Here comes the really clever part.

Remember when I told you to remember the exact spelling of your id chapter names, eg. title-page, poem-the-magic-never-dies.

I said that they link to the TOC. This is where we link them.

So to link the title-page we need to create a clickable link or hyper-link.

<p>< a href=”This tells the browser that it needs to be a clickable link. ) # ( This helps to link your chapters ) title-page ( div id ) “>The Faeries of Birhcover Wood ( The actual text that will be clickable ) </a> ( Close the string of code ) </p> ( Close the p tag )

That has created a clickable link. On the Table of Contents you will see The Faeries of Birchover Wood. You move your cursor to it, click, and you will be taken to the Page-Title.


Fig 15. Book Title


Can you see how it works? It’s simple, sweet and very powerful. It creates Navigation within your ebook. Awesome!

Kindle Table of Contents-small.jpg

Kindle Table of Contents & Progress Bar

There is very little coding. The reason is that you have been building it up, by adding chapters and giving them names using <div id>. You really have saved yourself a huge job and taken the hassle of going through your chapters later on.

Valid CSS!

Valid CSS!

I had example-code-v5.html checked by http://validator.w3.org/#validate_by_upload and the result came back as error free.


HTML Validated – W3C Standard

Click on image to make it bigger

Also, the CSS code has been validated.


CSS Validated

Click on image to make it bigger

This first video is adding your Copyright Notice. How to make an ebook part 5a – I had to split the video in two parts.



This second video shows you how to add the clickable Table of Contents. Then we test it in the KomoZer’s Preview window, and then in Google Chrome Web Browser.


 If you want to read any of the other parts then click the respective link. Part 1Part 2Part 3Part 4

Here is Example-code-v5.html. ( Right click… ) It has all the code from V1 plus the Full Version of my copyright notice, and the clickable content code.

Links to download the HD versions of the videos – Part 5a and Part 5b.

 Return from How to make an ebook pt 5 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!
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: