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.