Book Design
Ebook Formatting – Part 6 – Hyper-textual Content

Ebook Formatting – Part 6 – Hyper-textual Content

If you need to add links to your text there is a simple way to do it, so that you can show a piece of highlighted text that can be clicked and lead to an external website.

Of course this will only work if the reading device has a browser and a way to connect to the Internet.

Here is the code:

<a href=”address”>Your text here</a>

Where in place of address you have to type the full URL of the web page you want to link to (usually starting with http:// or https:// – if you don’t add that part the link won’t work) and in place of Your text here you’ll put the name of your link.

Let’s make a quick example.

Usually you’ll use this to add a link to your website or social profile so let’s see what I write if I want to link to my main site:

<a href=”https://www.allisonwadefantasy.com/”>Allison Wade Fantasy</a>

And this is how it will show up in your text:

Allison Wade Fantasy


But links are not only for external sites. You can add links to other parts of your book, to chapters, notes, etc. without needing any Internet connection.

This is how you navigate from the Table of Contents to the various chapters, for example.

If you write this:

<a href=”Chapter1.xhtml”>Go to Chapter 1</a>

The link will send you directly to the file called Chapter1.xhtml, where your Chapter 1 is supposed to be (if that’s the name you gave it). In this case you don’t need to add the path to the text folder (../text/) because both files are in the same folder.

If you want to link to a specific part of the text, for example a sub chapter or a paragraph that are not at the top of the page, you’ll need to add an “anchor” which gives a name to that specific part of text so that you can easily reach it.

This is how you do it. Let’s say we have a quote in the middle of Chapter 4, and in another part of the book you want to add a link back to that quote.

Double click on the xhtml file that contains your chapter to open it (let assume it’s called Chapther4.xhtml). Now go to the point where your quote starts and add this code:

<a id=”cit”></a> 

Instead of cit you can write whatever you like, just be sure it’s unique, because IDs must be unique (so if you have more than one you can call them cit1, cit2, etc.). You don’t need to add anything else inside the tag, it will work fine like this.

Now go to the other place where you want your link to be and add this code:

<a href=”Chapter4.xhtml#cit”>Important quote</a>

It’s the same code as before, but to the “href” attribute we added a bit of extra code #cit which is the hashtag and the name of your anchor. This way, when you click the link, you’ll be brought directly to the exact position of your quote.

In this case, the link points to a specific text file (which is different from the one where your link is), but if the link and the anchor are in the same file, it’s even easier, since you’ll just have to write the hashtag and anchor name, like this:

<a href=”#cit”>Important quote</a>


Adding Images

To add an image to your text you’ll use the tag <img />. But since the image is an external file, it is necessary to do a few more things.

First you have to physically add the image to the ePub archive. To do this you can go to the Images folder (on the left column, called Book Browser) and right-click, then select Add Existing Files… You can then select the image from your PC (I hope you have it saved on your computer first), and it will be added to the folder.

Now go back to your text file and click on the line where you want your image to be. Then write the code (I know there is a button that can do this for you, but it’s better to see how the code works):

<img alt=”name” src=”../images/image.jpg”/>

In place of name you’ll put the alternative name of your image (you choose) – this will show up if for some reason your image cannot be displayed. And in place of image.jpg you’ll write the actual name of your image file (beware of the extension file and check that everything matches or the image won’t show up).

The <img /> tag is self-closing so you don’t need to add anything else.

Now let’s see more in dept what every part does:

alt= is the alternative name, as we said above; src= is the source, or the path that leads to your image. That’s why we wrote ../images/image.jpg because we are saying, “go out of this folder (we are in the text folder now) and go into the images folder and search for the file called image.jpg“.

There are other things you can add inside your tag, to define the image size: height= and width= that can be expressed both in pixels or percentage (the number must always be in “quotes”).

For example: height=”100%” means that the image will show up on the page covering its full height, this is particularly useful for the cover image to avoid it being cropped out of the screen if it’s too big.

But to better define the placement and other characteristics of your image is better to use the style sheet, as we’ll see in another part of this guide.


Other tags

There are another couple of tags I should mention that could be useful or you will find already in your converted ePub, which are <div> and <span>.

<div> is a general block of something, will it be text, image container, part of a page, etc. it can be anything. While <span> is used for smaller sections of text.

They don’t seem to be particularly useful now, explained like that, but you’ll see they have a purpose when we’ll talk about the style and classes.

Don’t worry, the time will come. But for now, I think we covered enough.

See you in the next episode! 😀

Leave a Reply

Your email address will not be published.