Lab 99 Web Design

Skip the navigation

How to Create an Ebook, Part 3: Creating a Chapter Page

We will begin by assuming that you have followed the instructions in How to Create an Ebook, Part 2: Formatting the Text, and have created a short document, containing a <h1>title</h1> and several <p>paragraphs</p>, that has been given a name with an .html extension, such as chapter01.html.

We will now add the various extra bits of code that are necessary to make this document function as part of an ebook.

The HTML declaration

The first thing to do is to place this line of code at the beginning of the document:

<html xmlns="http://www.w3.org/1999/xhtml">

and this line of code at the end of the document:

</html>

To avoid making mistakes with this and other lines of code, you may want to highlight the text and copy and paste it into your document.

The document now looks something like this:

<html xmlns="http://www.w3.org/1999/xhtml">

    <h1>Chapter One</h1>

    <p>This is the first paragraph of chapter 1.</p>

    <p>This is the last paragraph of chapter 1.</p>

</html>

You may notice that some of the lines have been indented. This is purely to make the document easier for you to follow, and is entirely optional. You can use the space bar or the ‘Tab’ key, or you can insert extra line breaks; whatever works best for you.

Indenting the text in this document will not cause the text in the finished ebook to be indented; that is done by a different process. Apart from single spaces, nothing you type into this document will have any effect on the final appearance of the ebook.

The Body Tags

Now we need to enclose the text within <body> and </body> tags:

<html xmlns="http://www.w3.org/1999/xhtml">

    <body>

        <h1>Chapter One</h1>

        <p>This is the first paragraph of chapter 1.</p>

        <p>This is the last paragraph of chapter 1.</p>

    </body>

</html>

The Head Tags

Immediately before the <body> tag, we need to add another pair of tags, the <head> and </head> tags:

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    </head>

    <body>

        <h1>Chapter One</h1>

        <p>This is the first paragraph of chapter 1.</p>

        <p>This is the last paragraph of chapter 1.</p>

    </body>

</html>

Between the <head> and </head> tags, we need to place two more lines of code. This is the first line:

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

It is a long line, and it may wrap itself around so that it looks as though it occupies two lines, but it is in fact only one line.

This is the second line:

<title></title>

This is how the document looks now:

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

        <title></title>

    </head>

    <body>

        <h1>Chapter One</h1>

        <p>This is the first paragraph of chapter 1.</p>

        <p>This is the last paragraph of chapter 1.</p>

    </body>

</html>

Between the <title> and </title> tags, write the title of the chapter, or any other wording you think is appropriate. Whatever you write between these two tags will appear at the top of the screen when someone reads your ebook, just as the title of the web page you are reading now appears at the top of your web browser’s window. In both cases there is only a limited amount of room, so it is best not to make the text too long.

Overview

The text of a chapter is placed between the <body> and </body> tags, and the title of the chapter is placed between the <title> and </title> tags. Everything else stays as it is, and will be identical for every chapter of your ebook. There are some optional lines that can be added to the <head> section, a topic which will be dealt with in a later article.

Other Pages

You will probably want your ebook to contain documents other than the main text of the book, such as a title page, a copyright page or a table of contents page. Most ebook–reading software will create a table of contents automatically, even for books which would not normally contain one in their printed form, such as novels. Some authors and publishers prefer to create a separate document for this, so that they can control what goes into it. If an ebook contains a ready–made table of contents page, most ebook–reading software will not create its own version.

All of these pages are constructed in exactly the same way as the chapter files. Although each may only occupy one page in a printed book, each will be an individual HTML document in an ebook, and will be equivalent to a chapter.

A table of contents page will make use of a fundamental feature of the web that ebooks are able to benefit from: hyperlinks.

Links to Ebook Pages and Web Pages

Creating a link from one document to another is straightforward. The code comes in two parts: <a href=""> and </a>. Place this code either side of the text that you want to contain the link, and write the name of the HTML document that you want the link to go to, like this:

<p>Go to <a href="chapter02.html">Chapter Two</a>.</p>

In this case, the text in the finished ebook will look something like this:

Go to Chapter Two.

(Don’t bother clicking on that link; it will only take you back to the top of this page!)

Some ebook–reading software will display a link’s title attribute just as visual web browsers do. The title attribute is an optional feature of the link element, and was intended to be read aloud by screen–reader software to web users with poor eyesight. It is usually displayed when you hover over a piece of linked text. Your code might look like this:

<p>Go to <a href="chapter02.html" title="Chapter Two">Chapter Two</a>.</p>

Of course, you can also include links to websites, if that is relevant to your ebook. When creating a link to a web page, you must include the entire URL, or web address, of that page. For example, a link to the page you are reading now might look something like this:

<p>Find out <a href="http://www.lab99.com/web-advice/how-to-create-an-ebook-part-3" title="How to Create an Ebook, Part 3">how to create an ebook</a> at the Lab 99 Web Design site.</p>

Find out how to create an ebook at the Lab 99 Web Design site.

Example Table of Contents Page

Here is an example of a basic table of contents page:

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

        <title>Table of Contents</title>

    </head>

    <body>

        <h1>Table of Contents</h1>

        <ul>

            <li><a href="copyright.html">Copyright</a></li>

            <li><a href="preface.html">Preface</a></li>

            <li><a href="chapter01.html">Chapter 1</a></li>

            <li><a href="chapter02.html">Chapter 2</a></li>

            <li><a href="chapter03.html">Chapter 3</a></li>

        </ul>

    </body>

</html>

Technically, of course, an ordered or numbered list (<ol></ol>) is the appropriate element to use here, since the order of the items is important. The numbering that the ebook–reading software would apply to the list could then be removed or adjusted using CSS layout code. In practice, however, ebook–reading software does not always render CSS code accurately or predictably. Using an unordered or bullet–point list (<ul></ul>), though technically incorrect, is a reasonable compromise.

The Cover Page

Your ebook does not need to have a cover image, but there are good reasons to include one:

If you want your ebook to have a cover, or if you want to include images within the text of your ebook, continue reading. If you do not want your ebook to have a cover or to include other images, feel free to move on to the next article: Creating the Technical Pages.

The Benefits of a Good Cover Image

Potential readers will very often be obliged to judge an ebook by its cover, because they will have little else to go on. A high–quality cover can make a significant difference to the sales of an ebook, and is something that non–specialists are unlikely to be able to produce. Creating the cover image is beyond the scope of these instructions, largely because you cannot produce a good cover simply by following instructions.

A good book–cover designer is rarely cheap, but his or her services are a worthwhile investment if you hope to make money from your ebook. Of course, hoping to make money from an ebook is not the same thing as actually making money from an ebook, something which few authors manage to do.

There are online services which will allow you to create cover images for ebooks and printed books, sometimes free of charge. They are worth checking out, but you will probably find that they rely on templates and cheesy stock photos, and that the final result is a bit amateurish.

Creating the Cover Page

We will assume that you have a suitable image, in .jpg format, named cover.jpg. It is advisable that the image is named cover.jpg; some ebook–reading software will not display the image if it has a different name.

Different publishing formats have different requirements for the dimensions and formats of ebook cover images. Amazon’s current requirements and suggestions can be found at https://kdp.amazon.com/en_US/help/topic/G200645690.

To allow the ebook–reading software to display the cover image, you will need to create a page to accommodate the image. The cover page is like a simpler version of a chapter page. Open a new document in your text editor and write this:

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

        <title>Cover</title>

        <style type="text/css">

            <img { max-width: 100%; }

        </style>

    </head>

    <body>

        <img src="cover.jpg" alt="My Book Title" />

    </body>

</html>

Find the phrase alt="My Book Title" and replace the words My Book Title with the title of your ebook.

Save the document as cover.html and place it and the image in the same folder as your chapter pages.

Images Within the Text

Ebooks can of course contain images within the text. If your ebook contains more than a handful of images, you may find that the easiest way to keep track of things is to place all the images in a separate folder. Create a folder, give it a name, and place it with the chapter pages. You may give the folder any name you like, but images is a good candidate. Now do two things:

Inserting the Image

Inserting an image into the text is straightforward, and the method should be obvious if you look at the code for the cover.html page. Firstly, take this code

        <style type="text/css">

            <img { max-width: 100%; }

        </style>

and add it to the <head> section of a chapter page. It doesn’t matter whether this code is placed above or below the <title> line, but it is important that it is placed below the <meta> line:

    <head>

        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

        <style type="text/css">

            <img { max-width: 100%; }

        </style>

        <title>Chapter One</title>

    </head>

Then add the code for the image or images wherever you want it or them to appear. Your chapter page might look something like this:

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

        <style type="text/css">

            <img { max-width: 100%; }

        </style>

        <title>Chapter One</title>

    </head>

    <body>

        <h1>Chapter One</h1>

        <p>This is the first paragraph of chapter 1.</p>

        <img src="my-image.jpg" alt="My Nice Image" />

        <p>This is the last paragraph of chapter 1.</p>

    </body>

</html>

Problems with Images

You should be aware that the variety of ebook–reading software, combined with the variety of display sizes, can cause images to render unpredictably. Images which look fine on one device can look strange on another. In particular, large images which should appear towards the bottom of a page may be pushed onto the next page, and the paragraph of text that should appear below the image can appear above it. At the moment, unfortunately, there isn’t a lot that we can do about this problem.

Next …

Continue with the next article: Creating the Technical Pages.

[This tutorial is part 3 of a series by Jeremy Bojczuk, showing you how to code an ebook.]