How to make an ebook pt 3 – Now we are going to get our hands dirty cracking our fingers on the code.
By now, you will have KompoZer downloaded and installed on to your desktop, and example-code-v2.html (Right click and save) We are going to build up on the free ebook template, so that at the end of these tutorials you have a fully formatted manuscript ready to convert to ebook.
Like before, I will provide all the code that we are dealing with on a new file called (Wait for it!) example-code-v3.html (My naming skill is so professional and original!) That will be provided later.
Now, let’s start coding.
I just want to point one thing out. As I am using my own manuscript as an example you will see everything relating to how I formatted my manuscript. At the beginning I have a poem, then after that I start off with Chapter One – Hungry.
With the poem there is nothing different from the other chapters, only that it has no ‘Chapter Class’. You will see what I mean.
Open up your example-code-v2.html in KompoZer. Click on the Source tab of KompoZer and scroll down to the bottom of the code.
On Fig 16. You can see at the end of <!– END_OF_COPYRIGHT –> Line code 79 we drop down a line to line code 81.
On line 81, put your cursor there so it’s flashing. We are doing this so we can see clearly where the code will be added.
Unfortunately, when it comes to saving, KompoZer has a terrible habbit of deleting all the spaces we will put in. So when you go back, the spaces between Line code 80 and 81 will probably disappear. This also happens when you use Preview.
Coffeecup keeps everything very neat. If you had a space between Line codes, it keeps the space. (Show you Coffeecup later on – Let’s just keep to KompoZer)
Add this code.
<!– POEM_IMAGE –>
<p class=”heading”>- THE MAGIC NEVER ENDS -</p>
<p class=”center”><img src=”poem-tree.jpg” alt=”poem tree” />
<!– END_OF_POEM_IMAGE –>
Most of the mistakes are made when one has forgotten to close the code. Don’t forget to add </> at the end.
Either cut and paste the code, or be a dare devil and type it in. That way you will understand the structure more.
After Line 81, I ended up adding a space, just wanted to break the code so you can see more clearly, you can keep it in if you want.
Line 84 we have the <div> tag we have the id to tell us what the id TOC clickable link is called – Again, it can be called anything you want, but it MUST match exactly the same name when we come to creating the TOC file.
Notice the id name has the dash - replacing spaces. If you want a space, you have to use the dash sign -
Line 85 is the <p class heading> If you scroll to the CSS code and look for p.heading you will see what is going to happen.
text-indent: 0em; ( no indent )
font-weight: normal; ( normal standard font )
font-size: 1.5em; ( font size slightly larger than standard font size )
text-align: center; ( centered )
Again, you only have to add p.heading. The eReader will do the hard work and make sure the heading is size 1.5 and centered. (Easy!)
As I am not adding multiple classes, just encase the heading in speech marks ‘ “ ‘ on its own. If I wanted to add another class on the same line, I would have separated the classes by using a space. Before the > ( greater than ) bracket.
I have added the name of my poem – THE MAGIC NEVER ENDS – Closed with </p> Very Important
Line 86. Close using </div> tag. Very important.
Line 88 has the p.center class, then a greater than bracket. I then use a greater than bracket > To close the class, and add code to indicate an image.
This is very important when adding images.
All my images are in the same folder as my html document. When it comes to previewing, the browser or HTML editor will look within the folder where example-code-v3.html is saved. If you have the name of the image ‘poem-tree.jpg’ in the same folder as example-code-v3.html, then the browser will display that image. If you have the images in a different location, you will have to type in exactly that location, so the browser or HTML editor can search for it.
Folder name TEST. Inside this folder is example-code-v3.html. Also, there is another folder (sub-folder) called images. This is where you store all the images. You will have to change the code to tell the HTML editor to look in the folder images. How do we do this, this is what you will have to type.
<img src=”image/poem-tree.jpg” alt=”poem tree” />
You just add the name of the folder ‘images‘ separated with a forward slash ‘/‘ then the name of the image, in my case, ‘poem-tree.jpg‘
Notice, that at the end of the /> there is no <p> Also, you have the alt= this helps with searches and SEO. If you have a name that corrosponds with the image you use, then that can help with people searching for your information.
We then finish the section with of with <!– END_OF_POEM_IMAGE –> Preview in it in the Preview Tab.
The code above will tell KompoZer Editor in Preview mode, to look inside images folder for the image poem-tree.jpg
A visual way to look at this is shown in Fig 19. You have TEST ( Main Folder ) example-code-v3.html ( file ) images ( sub-folder )
We are now going to create a New Section for the Poem text. This section could also be for your first chapter.
I am going to show you a small portion of the poem text here, but I will provide it all on the example-code-v3.html.
First, the new code.
<!– POEM –>
<p class=”indent”>As I sat amongst the trees one day, my eyes were drawn to things that swayed amongst the boughs and leaves. I saw flitting from tree to tree, little bodies with wings that moved so fast the human eyes could not catch.</p>
<p class=”indent”>As I looked a ball of mist appeared as if a meeting had occurred. And in a flash it flew away to hide behind the boughs and leaves that kept all of them safe.</p>
<p class=”indent”>I stared, three little beings came floating down to search me out upon the ground. I felt no fear just a calmness all around, and then a canopy of light covered the ground.</p>
<!– END_OF_POEM –>
Click on the image to see a bigger image.
I know what you are thinking, it looks scary, but take a close look at it and you will see that one line of code has been repeated over and over again.
Let me tell you what is going on.
You understand now the Section <!– –> It keeps things in order. Instead of one great big file of continuous line of code, this breaks the manuscript into easy readable sections. Great!
<div style=”font-style:italic;”> This tells everything below it that I want all the text in italics. Everything in-between <div> and </div>. Yes, well spotted! It is a <div> tag, but because it doesn’t have id associated with it, it won’t be attached to the TOC.
The <div> tag in this case helps us define a section of text, so that it will group ( the poem text ) to format it with the italic style. (Awesome!)
< class=”indent”> This is probably going to be the most repeated line of code in the whole of your manuscript. What does it do?
It simply makes a nice indent on the first line of your paragraph. Look at the CSS code and see how far out the indent goes. 1.25em. Usually, indents in ebooks are between 1.25 and 1.50. Change the numbers and you will see a difference.
Also, I have made the gaps between each line slightly wider. Line-Height. I just didn’t like the standard gaps.
Look at the CSS code.
text-indent: 1.25em; ( how far from the left margin )
line-height:130%; ( how much gap between each line )
Always finishe each paragraph with </p>
I then finished the Poem text with </div> That tells the document that you have finished with italics.
Add <p class=”pagebreak”> For a new page on the ebook.
And <!– END_OF_POEM –> So we know that we have finished with the Poem section of the book.
Click on image for a larger image.
It looks difficult when you just look at the code. But once the explanation is added, you can see how each small bit of code adds to the overall formatting and look of your manuscript.
I hope you have enjoyed how to make an ebook part 3. In part 4, I will show you how to create the Chapter sections, and more links that will help you create a clickable Table of Contents.
If you would like, click on these links for the other parts of the tutorials. As promised, here is example-code-v3.html. (right click mouse, and save as ) This has all the code and text including the whole poem. Download the Poem-image. ( right click, Save As… )
Save it to a place you can easily find, and remeber to change the location of the image in <img src=”image/poem-tree.jpg” alt=”poem tree” />
This next video was actually on the end of part 3. Due to Youtube having a 15min limit, it had to be cut. (now I feel like a directorr!)
It’s a quick Coffeecup Review.
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.
Digg button brought to you by diggZ-Et (WordPress Plugin)Please share this article.