Formatting your eBook (Part 1)

It’s taken awhile for me to post this because I realized explaining this takes careful consideration. One doesn’t necesaarily have to understand HTML or CSS to do this, but I still had to weigh how much you need to know or understand to follow what I’m saying. Hopefully, I’ve balanced this well enough, but if you’re not understanding something then just leave a comment and I’ll get back to you.

FIRST THING’S FIRST

Get the right tools. For Mac users try Macromates or Jedit. Jedit can also be used for Window users. Now, personally, I prefer Notepad++. I find it easy to use and it’s the one I’m most familiar with, and when you see screenshots of my HTML you’ll see it in Notepadd++.

You will also need Calibre, though many of you probably already have it. Calibre is an awesome software that converts your book into a variety of ebook formats such as .lit, .epub, .mobi, and a lot more.

  1. So, download your text-editor (Macromates, Jedit, or Notepad++).
  2. Download Calibre if you haven’t already.

Next, I’m going to explain some basic info about HTML and CSS so that it won’t look scary or unfamiliar to you when you see it.

HTML

Now let’s get into the nitty gritty. If you know HTML and CSS then none of this should be a problem for you (and you can probably skip ahead to later posts). However, if you don’t then read ahead but be extra careful when carrying out the transformation process in the next posts.

HTML is used to structure a document. Here is a very basic look at HTML:

<!–DOCTYPE html>–>
<html>
<body>

<h1>My First Heading

<p>My first paragraph.</p>

</body>
</html>

And here’s what that looks like in a browser:

What HTML looks like in browser

Click to enlarge.

HTML is used to display web pages in your browser and on other devices. Think of a coloring book where you just have a white page of paper with black lines creating a teddy bear. That would be the HTML–the structure of a document. The CSS is what styles that HTML to look fancy. CSS would be using crayons to color that teddy bear.

Now there is no styling in the HTML I’ve done so far. The way the heading looks taller and bold is because every broswer and e-reading device has a preset of commands installed to designated a header or, in this case, h1 to look a specific way. And the same goes for all other tags such as the paragraph element or . HTML always uses these little < > around tags. A tag is some of the HTML lingo you see up above (see image 1) such as html, p, body. When you begin to transform your  manuscript you will see a lot of them. Now, I’m not going to begin to try to teach anyone HTML or CSS, because, while I make and run my own website off it I don’t think I’m an expert. I won’t begin to try to explain everything. I am simply explaining what I think you will need to know in order to transform your document.

THE CSS

In the case of an ebook, you’re going to embed a CSS stylesheet to make your book look fancy. How we do this is by adding this into our HTML:

<style type=“text/css”>

p {

text-indent: 15px;

}

</style>

What this CSS does is tells our HTML to render all paragraphs (that’s the element you see there) as having an indent (that’s first line of a paragraph from the left) at 15px. Pixels are a unit of measure and you’ve probably heard of it. You will insert this stylesheet which starts with

<style type=“text/css”>

and ends with </style> after the <html> tag and before the <body> tag like this:

Click to enlarge

Note that CSS looks and is laid out differently than HTML. CSS uses a framework of {curly brackets} and semi-colons. NOTE: be very careful when we get into actually altering your manuscript that you always have the semi-colons where they should be and that your HTML tags are always closed.

<p>A sentence, paragraph, or heading, or anything, should always have a closed tag. A closed tag looks just like the beginning tag of <p> but has a back slash like this.</p>

Say you want your heading 1 or <h1> to all be colored white. Then the CSS for that would look like this.

h1 {

font-color: #fff;

}

This CSS tells the HTML to render all heading 1’s as having a font color of white. (Too much? Too scary? I hope not!)

HOW THIS WILL WORK

In the next posts, we will convert your document into an HTML file. Don’t worry, no harm will come to it, just save a new copy and work from that one if you want to. Then we will proceed to add in a CSS stylesheet, which will look like it does above. You will have to download the free software mentioned above in order to do this if you want to give it a try! And why not? If you can get it to work like I have, then you can have a neat looking book!

ONE LAST THING

I’ve combined all of the examples I’ve shown you above. But, instead of just a header and single paragraph, I’ve added some filler paragraphs so you can really see what this very basic HTML and CSS compilation looks like.

This is our HTML page with just a text-indent of 15 pixels.

A shot of the HTML:

What the HTML looks like with filler paragraphs as text.

HTML displayed with CSS in browser

Now, here is what that text turns into when displayed in my browser. We could do more to this. Change the background-color, the font-color and size, adjust the line-height, etc., etc. But that will be for next time!

Soon, and with a little bit of work, your book could look like this (or better!):

3-page spread look

 Thanks for reading!
For you Kategan Alphas fans, you can pre-order Tempting Whispers (book 6) now!
 
Take care everyone,
Facebook (friend me!)

4 thoughts on “Formatting your eBook (Part 1)

    • I just realized something weird is going on with the formatting in this article. I’m going to try to fix it. Thanks, Hallie! I hope to get the next post out soon! 😀

Write something awesome here....

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s