Creating an e-book. Part 3.

Continuing the series about how to create an e-book. Today we’ll have a much shorter post. Specifically, we’ll look at how to create the Title page.

So, what is a Title Page? According to dictionary.com, Title Page is: “the page at the beginning of a volume that indicates the title, author’s or editor’s name, and the publication information, usually the publisher and the place and date of publication.”

If you’ll search Google Images for “title page”, you see lots of examples of how a Title Page looks like. And, it seems to be the easiest to create. Technically speaking, a bunch of paragraphs and that’s it.

Ok, following dictionary.com’s description, let’s create our Title Page. We will need the following:

  • Book title: I will use “My Book’s Title”
  • Author name: this is simple, “Vitalie Ciobanu”
  • Publisher info: I do not have one so I will use “Lorem Ipsum Publishing Inc.”
  • Place and date of publication: “Madagascar 2018”. I still want to visit this island…

Open mybook.html page in Notepad and add above details right before your first chapter (which should be <h2> tag); each detail on different row and inside a paragraph element (<p></p>). Here is my <body> element now (trimmed):

[code language=”html”]
<body>My Book’s Title

Vitalie Ciobanu

Lorem Ipsum Publishing. All rights reserved.

Madagascar 2018
<h2>Lorem Ipsum</h2>
<h3>What is Lorem Ipsum?</h3>
<p class="first">Lorem ipsum dolor sit….</p>
<p class="quote">Nullam tortor orci…..</p>

Curabitur ligula tortor, ullamcorper….

</body>
[/code]

And here’s my page viewed in a browser:

Because we have p selector defined in our stylesheet file, you see above we have some formatting applied already. Let’s add additional selectors to the stylesheet to make Title page information differently looking. So, let’s add some different formatting for book title, author, publisher and date of publication. Here’s just some basic CSS added to my epub.css file:

[code language=”css”]
p.booktitle {
    text-indent:0em;
    text-align:center;
    margin-top:5em;
    font-weight:bold;
    font-size:150%;
}

p.bookauthor {
    text-indent:0em;
    text-align:center;
    margin-top:1em;
    font-weight:bold;
    font-size:130%;
}

p.bookpublisher {
    text-indent:0em;
    text-align:center;
    margin-top:3em;
    font-weight:bold;
    font-size:100%;
}

p.bookpublished {
    text-indent:0em;
    text-align:center;
    margin-top:1em;
    font-weight:bold;
    font-size:100%;
}
[/code]

For each selector I wanted no indentation so I added “text-indent:0em”. Also, everything is centered and bold. Font size is different, with Book Title being the biggest one, 150%em. Lastly, I added different top margins to visibly separate each line. Afterwards, I updated the class details on my newly added paragraphs in html file.

[code language=”html”]
<body>
<p class="booktitle">My Book’s Title</p>
<p class="bookauthor">Vitalie Ciobanu</p>
<p class="bookpublisher">Lorem Ipsum Publishing. All rights reserved.</p>
<p class="bookpublished">Madagascar 2018</p>

<h2>Lorem Ipsum</h2>
<h3>What is Lorem Ipsum?</h3>
<p class="first">Lorem ipsum dolor sit….</p>
<p class="quote">Nullam tortor orci…..</p>

Curabitur ligula tortor, ullamcorper….

</body>
[/code]

Here’s the updated view in browser.

Creating an e-book. Part 2.

Following on from previous post about creating an e-book, today we will make that “black on white” text look nicer and we will do it using CSS (Cascading Style Sheets).

I will not detail on what CSS is because this is not the purpose of this post. If you need to refresh your knowledge, please head over to W3School’s page.

Very shortly though, CSS helps HTML look nicer and it does so by defining how each HTML element should be displayed in a browser.

By now, we know that an e-book is basically HTML. Plain HTML documents can be read by most browsers in the same way, which is not the case about e-books. Because e-books can be read on e-readers, computers, tablets, phones etc., screen sizes will differ, same will font size, page width etc. With this in mind, we need to ensure that we use relative sizes and not sizes in pixel (PX); so we’ll use either percentage (%) or em (EM).

    Quoting W3Schools: What is the difference between PX, EM and Percent?

Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). Look at CSS Units for more measurement units.

Again, very shortly, 1em equals to current device’s font size, 100%. 1.5em will be 150% of current font size. 2em will be 200%…, you got the idea.

Although we can add CSS properties and selectors inside .html file, we will create a separate .css file and will link it from .html file. This way, you can very easily use same CSS file as template for other books, instead of copy/pasting specific text from inside .html file.

OK, let’s open a blank notepad file and save it as epub.css in the same folder where mybook.html. Let’s add one additional line to our .html file so that it knows where to look for this .css file.

Right click mybook.html file and open it with notepad. Add one new line after <meta> and before <title> tags and add: <link rel=”stylesheet” href=”epub.css” />

[code language=”html”]
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="epub.css" />
<title>My Book’s Title</title>
[/code]

As mentioned previously, out of all HTML tags, we will use Headings and Paragraphs the most in any e-book, throughout the entire book. Let’s then start with defining Headings because we need them for Chapter titles and subtitles. Again, using CSS we can design our HTML to look awesome and each of you will have your own definition of awesome and, why not, design skills, which I surely lack.

Let’s say in our e-book we want Chapter Title to be 1) aligned to the right and 2) have an additional 2 free lines from the previous block of text. To accomplish all this, in our epub.css file we will write below code for h2:

[code language=”css”]
h2 {
text-align:right;
margin-top:2em;
}
[/code]

Save .css file and leave it open. Now open mybook.html in a browser. See how our Chapter Title changed from left to right and the space before and after it? Just to show you how easy it is to change something using CSS, let’s say we want Chapter Title to be in red… in epub.css add color:red; text on the next line after margin-top:2em;. Save the file and then refresh html file in your browser. Your title should now be in red.

Now think about it a little. What if you would have a book with hundreds of pages, with hundreds of Chapter Titles? With one line added the CSS file, you changed the look of all Chapter Titles. How cool is that?! Let your imagination flow and modify your CSS file as you wish to make your e-book look great!

Ok, before going on, let’s remove the line with red color, unless you want to leave it of course.

Regarding Chapter Subtitles, let’s say we want them also 1) right-aligned but 2) style should be italic. Below is the code to make this happen:

[code language=”css”]
h3 {
text-align:right;
font-style:italic;
}
[/code]

Regarding paragraphs, as you recall, I added 3 paragraphs in my .html file; I did this because I wanted to show you 3 different examples of paragraphs modified through CSS styles. So, let’s make all default paragraphs justified, first line indented by 2em, without any margins on left or right (because we want to use as much space as possible) but we do want to have a little bit of size before next paragraph starts. Here’s how we can accomplish this:

[code language=”css”]
p {
text-indent:2em;
text-align:justify;
margin:0em;
margin-bottom:0.25em;
}
[/code]

Next, we will also use a paragraph but with a purpose. For example, when we will want to quote something or add few lines of text that is totally different from other paragraphs etc. We’ll make it center aligned, italic and will add some space before and after so that it is visible and distinguished.

[code language=”css”]
p.quote {
text-align:center;
margin-top:0.5em;
margin-bottom:0.5em;
font-style:italic;
}
[/code]

In the above code you will notice a small addition to our CSS style. By adding p.quote, we’re just specifying that any paragraph with quote
class, should have these additional changes applied (for example, if we will not add text-align:center;, this paragraph will remain justified because this is what text-align for all paragraphs says).

If you’re more curious… similarly, if you will add only .quote for example, that means any HTML tag where you will add quote class will have those changes applied.

Seems easy and straightforward to me. Again, think about how easy you can modify an entire book?! You can take same .html file and only make changes in the CSS file to get a completely different book. Think about how easy you can create books for readers with low vision, blindness or visual impairments! Try and play with the menu from W3Schools and you’ll be amazed of what you can do with CSS.

For last paragraph mainly I want to make you interested in “what else can I do easily?”. Let’s modify only first paragraph in any chapter so that it has a visual delimiter from Chapter Subtitle.

[code language=”css”]
p.first {
margin-top:1em;
}
[/code]

At this point, I have defined my 3 paragraphs like this: First is first obviously; Second is a quotation-like and Third is just a normal paragraph. Here is my html code inside <body> tags (I’ve cut the text in code to make it shorter but it is visible in the screenshot in its full width):

[code language=”html”]
<body>
<h2>Lorem Ipsum</h2>
<h3>What is Lorem Ipsum?</h3>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="quote">Nullam tortor orci, dictum id vulputate ut, sagittis vel arcu.</p>
<p>Curabitur ligula tortor, ullamcorper placerat commodo eu, efficitur ut dui.</p>
</body>
[/code]

Here’s my webpage in IE:

Creating an e-book. Part 1.

As explained in Ok, E-Books post, this topic became of an interest just recently. I have never created an e-book so you will not see me saying that I’m usually doing it this way or that way or other crap like this. No, cards on the table. I’m just as curious as you are about e-books; I read quite a few online articles and even bought an e-book about how to create an e-book…

Following that book I was able to turn one of my procedure document from work into a fully working e-book. I uploaded it to Amazon’s Kindle Direct Publishing and it din’t complain at all. At KDP I reached the step where I could download a sample book file to see how it will look like. So, it works. fine In these series of posts, I’m just trying to put down the steps needed to create a simple e-book in .epub format. You’ll be free to further enhance it as much as your design and HTML skills are.

Just so this is clear from the beginning, an e-book is just a transformed XHTML, CSS and XML files. Because few people may not know what XHTML is, I quickly wrote HTML vs XHTML post yesterday. Regarding XML, I will show you later what it is for and how to create it.

Before we start, I’d like to tell those few basic HTML tags that we will use. I want you to understand  them, not just using them blindly.

  • Headings are defined with the <h1> to <h6> tags, with <h1> being the biggest heading and <h6> the smallest. Headings are really-really important because they will define your book’s Table of Contents. We will not use <h1> for Book Title mainly because we don’t need Book Title in the Table of Contents; we will use <h2> for Chapter Titles and <h3> for Chapter Subtitles.
  • A paragraph is defined using <p> tag only. We’ll see later how we can have differently formatted paragraphs using CSS.
  • We will also use <div> tag for other HTML elements, specifically when we will want to define specific blocks or divisions of text.
  • We will also use CSS a lot to format different blocks of text and images.

With that said, let’s get started.

  1. First and foremost, you need to write something. An article, a novel, something. Or take any document that you can test with. Format doesn’t matter now, it can be a text file, word file, anything.
  2. Again, we’ll use XHTML Strict so our html file will be well formatted. Initial code is nothing fancy, just basic html code. Copy below code to a notepad file and save it as mybook.html in a new folder [leave notepad file open]. Below is what I have so far in my file. Note that I added “My Book’s Title” as a page title, see line 7.

    [code language=”html” highlight=”7″]
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>My Book’s Title</title>
    </head>

    <body>

    </body>
    </html>
    [/code]

  3. Suppose you have your manuscript by hand. To start with, copy the contents of one chapter only and paste it exactly inside the <body> tag. Save the file.

    [code language=”html”]
    <body>
    Paste your first Chapter here.
    </body>
    [/code]

  4. Go to the folder where you have mybook.html file and double click it so that it opens in your default browser.
  5. For testing purposes, I used www.lipsum.com website to generate 3 paragraphs of dummy text. I placed this text inside the <body> tag and saved the file. If I run mybook.html now, my browser will show nothing except clear text; no breaks, no new lines, nothing.
    This is because we need to tell our browser where to start a new line, a new paragraph, where to put a heading and so on. This is done using tags described in the beginning.
  6. Next, we’ll add your chapter’s title and paragraphs. Going back to your notepad file, right where your chapter title begins, add <h2> tag. Where your chapter title ends, add </h2>. Backslash key is to tell the browser that here we are closing the previously opened tag, <h2> in our case.
    Now, if you have chapter subtitles, do something similar. Right before your chapter subtitle starts, add <h3> tag. Where your chapter subtitle ends, add </h3>.
    Similarly, where your paragraph starts, add <p> tag. Where your paragraph ends, close the tag with </p>. Do the same for all other paragraphs you have. Save the file and run it again in your browser. Looks nicer, isn’t it? Here’s what I have:As you can see, there seems to be a default space between chapter title, subtitle and the paragraphs. Also, everything is left centered and there are no other formatted elements. This is what we will work on in the next post.

Ok, e-books

Let’s start with some bullshit talk to tell you how this topic started. Feel free to skip it if you’re not curious.
Personally, I’m not the kind of person who reads books not related to IT; think I can count all books I read throughout my lifetime and there are no more than 10, but this is not something to be proud of. Anyway, since all my books are IT related and I mainly read them in front of a computer, after having some sleep issues last year, I decided I need to read something else before going to bed. Well, before falling asleep… So, I bought a Kindle e-book reader, yey!

Next issue, what a hell to read?! My wife only reads crime novels, so she couldn’t help in this matter. Although I thought about reading what she reads, mainly to see if she’ll prepare me something to eat from a crime book we’re good though, just had our 9th wedding anniversary!
I remember that when I was a kid I read something from Jules Verne, in Russian, and I liked it… Searching the web for some e-books I found a very nice webstore (www.bestseller.md) from Moldova that offers lots of free e-books. I downloaded a few and started reading in bed. That’s what I started with, Jules verne. It was so boring, I started falling asleep within minutes; mission accomplished!
After few chapters things started to get interesting in the book so I was reading more and more each day. I finished the book and I was proud of my fantastic achievement, lol.

I started the second book, also from Jules Verne, downloaded from same website (thanks, guys!). Here things started moving from reading side to IT side… mainly because first book I read had a nice handy feature that let me know how many minutes I have from current chapter or book. The second one, didn’t. It only said how much I have till end of the book. Well, well, well… why, what’s wrong?! I started digging… and this means I was no longer reading before going to bed, instead I was web-ing over this issue. Apparently, this second .mobi file was not formatted properly, specifically its chapters. Hmm…

Reading more and more about e-books, and how they’re created and published, seemed interestingly so I started testing how this works. I found no real step by step guide on how to do it. Lot’s of general articles covering this on a high level with steps to follow, blah, blah and in the end asking you to buy their e-books where they explain everything step by step. Well, gracias, what can I say.

Then I stumbled upon one publisher’s website with some info online (posted way back in 2013) and the rest of it in the e-book sold on Amazon (updated in January 2018). It was cheap, so I bought it. Of course, my eagle eyes immediately found many typos and errors in the book, that I emailed author about but… anyway, let’s get back to the point. Overall, that book is enough to get you started. Since I’m an IT guy, it was easy for me to understand everything, especially HTML and CSS things. Reading that book, I understood that this is what an e-book is all about – HTML, CSS and some XML. In fact, did you know that if you take an .epub file and change the extension to .zip, you will have an archive with everything in it (css file, html file, table of contents etc.)!? When I found out about it, I felt just like I did last decade – holy cow! This was when Microsoft first introduced their new XML based files (docx, xlsx etc.), and someone showed in a training that if you rename .docx to .zip, you get a nice structured zip file. technology, I love it!
Enough talking, let’s get started. Head of over to my next post, Creating an e-book. Part 1.

Getting back online

After many years, giving this blog a rebirth.

I lost my backup files and only found very few posts and those mainly about ConfigMgr 2012. Will post them below anyway; better few than nothing.

Next planned articles will be about e-books and plain html maybe, we shall see Smile Stay tuned!

Also need to create/update “About” page. Things have happened, so to speak… jobs changed, places changed etc.