Take pride in your eBook formatting (Part IV)
This is the fourth installment of a series of articles. To read the previous one, please click here
The basics of HTML
Finally, with all the preliminaries out of the way, we are finally ready to descend into the real machinations of eBook creation, but since we will be working with HTML for the next few chapters, let me explain some of the basics first. I will keep this very short because ultimately it is not all that relevant to creating eBooks but it certainly helps understand why things work the way they do. I’m an inquiring mind by nature and I always feel more comfortable doing things when I fully understand what is going on under the hood, and why. It is the reason why I always loved machine code programming because it truly lets you get down to the wire… but I’m straying.
When working with HTML there are two basic layers of information that you need to be aware of because they need to be kept separate for best results. The first layer deals with the structure of the information in an HTML document while the second one deals with its visual presentation.
The structure defines, for example, the titles of a chapter and the actual text of that chapter. If your book is a bit more complex, the structure will also define where images might be embedded in the text. But that’s usually as far as it goes. The facts, only, Ma’am, if you please…
The second layer, the one that is responsible for the visual representation, then takes that structural information and determines how it should look like on a screen, whether you chapter title is in bold typeface, for example, and whether it should be somewhat enlarged, perhaps. It is in charge of creating proper page breaks, indentations and line feeds, as well as possibly margins around your text. It will determine exactly how to place the images embedded in the text, whether text should flow around them or if they should be centered on the page, breaking up the text flow. All these things that are responsible for how your book will look like are handled by this second layer.
As you will learn, the separation of these two layers is crucial because not only will it create in more robust HTML files, it will also make your life a lot easier.
The structural layer
HTML is a basic mark-up language that allows you to insert certain information into text to give it certain properties. All HTML tags are bracketed by < and > signs. One of the easiest ways to understand this is perhaps the following example.
This is an example for <strong>bold</strong> text
As you can see, we have inserted the tag <strong> before the word “bold.” The <strong> tag tells the display device that we want the text following the tag to appear in a “strong” typeface – what exactly that is we will discuss later. For the time begin, let’s just say, it means we make it bold. On the device, the result of this line will look something like this…
This is an example for bold text
Naturally, we will also need to tell the display when to switch back to the regular typeface, and we can simply do that by inserting a </strong> tag. It is like a toggle. Turn bold typeface on… write… turn bold typeface off.
Most of HTML works this way, as you will see. An opening tag starts an action, a closing tag ends it. Look at the following example and I am sure you will understand what it does as soon as I tell you that the <em> tag means “emphasize,” which in HTML is equivalent with italic.
This is an example for <em>italic</em> text
Yeah, I assume you see how this works, don’t you? In your eBook reader, the result of this line you look a lot like this
This is an example for italic text
Let’s try something a little harder. Make this more interesting, so to speak.
One of the major elements of a book are paragraphs. A number of sentences that we bunched together and that we usually want to appears as some kind of unified block. The best way to tell HTML that it is dealing with a paragraph is by using the <p> tag.
<p>This is a paragraph. It might be a short one, but computers are intrinsically stupid and surely won’t care.</p>
Note the opening <p> and the closing </p> tags that tell the display device exactly where we are beginning and ending our paragraph. With this knowledge, we can later tell the device exactly how we want it to treat and display these paragraphs.
Another very important HTML tag that you will most likely come across when building eBooks is <img>, used to embed an image in a document. Its use looks something like this.
<img src=“/images/cover.jpg” alt=“Cover” />
Its usage is very simple. All we do, is tell the device where to find the actual image file — the file “cover.jpg” in the subdirectoy “images” in this case. Unlike HTML you would create for web pages usually, when we create HTML for eBooks we need to be a little more mindful of some of the smaller details. The alt parameter, for example, is essential in eBooks and cannot be left out — unless you want to create a flawed, broken eBook file that will be rejected by various distribution outlets. So, simply include a brief one- or two-word description of the image. It doesn’t really matter what you say here, as long as you have the parameter included. If you wish you can even leave it empty, and make it look like this
<img src=“/images/cover.jpg” alt=“” />
In addition always make sure to close the tag properly with the slash at the end, like such “/>”. eBook readers are very picky about these small details, so make sure you do it right the first time around and turn it into a habit.
For the most part, these are the key tags we will be using to build our eBooks. While there are many other tags in the HTML vocabulary, from my experience, the ones I just showed you are pretty much the core of what you will need. For certain, more specific tasks you might have to make use of others, but I prefer to introduce and tell you about those as we get to them over the course of this series. It will be easier to understand and memorize them when you see them within their proper context and in actual use.
For now this will suffice and as you can see, this has been very easy and straight-forward, has it not? Like I said, easy as burning a marshmallow over an open fire.
In the next installment of the series we will begin to take a closer look at the second layer of HTML where I will show you how to affect the actual look and layout of the text elements we discussed above.
Part I • Part II • Part III • Part IV • Part V • Part VI • Part VII • Part VIII • Part IX
If you want to keep up with my eBook formatting work, don’t forget to subscribe to my Newsletter. That way I can keep you updated about the latest developments, updates to my books, code snippets, techniques and formatting tips.
Also, don’t forget to check out my book Zen of eBook Formatting that is filled with tips, techniques and valuable information about the eBook formatting process.
I just have to say again that this is brilliant! Thank you SO much for doing this series! This is stuff I’ve always wanted to know and now that you’ve explained it, it seems easy. 🙂
Guido, hi!
This guide is absolutely fantastic! I’m following it step by step to prepare my book for sale on Amazon – but I’ve hit a slight inconvenience and was wondering if you had any suggestions.
I’m trying to wrap my Italics with the tags. BUT – I have a lot of them. It’s a 300+ page, 100,000 word + book – and it’s set in Ecuador. Every instance of a word or speech in Spanish is in italics, and there are literally thousands of them! I’m a Mac user (older Mac, running OS 10.4). I’m using Appleworks as my word processor. Do you have any suggestions for how I can automate this process, as the Find/Replace in Appleworks doesn’t do styles as far as I can tell. Is there a 3rd party application I can get to help me with this?
Thanks in advance man. Keep up the good works!
Kind regards,
Tony
Tony,
Send me the word processor file and I’ll run it through Word on a PC real quick to automatically replace the italics with <i> tags for you. It will save you hours of work.
Really? Awesome, cheers for that! I’ll send you the file straight away. I’ll send it in the Appleworks format as that’s true to the original version. I tried to convert it to a ‘Word 6’ document with the ‘Save As’ function on Appleworks, but ended up with a copy full of what looked like html tags around all the quotes and n-dashes. Hopefully you’ll have more joy – I get the feeling you’re a little more comfortable with this stuff that me :0)
Tony
I started reading your guide and after talking to my husband who works with Adobe Dreamweaver, he suggested that I use that to cut the HTML creation time in half. So I started by putting half of my poetry book into one big Word doc, then I took a part of it and pasted it into Dreamweaver. From there, can I simply copy the code that Dreamweaver generates to finish the process once I’ve put the whole doc into HTML?
(I haven’t finished reading your guide to know what to do with Calibre afterward…)
Thanks for your help.
I’m a Machead too. And I do know HTML. But I didn’t know that’s what Ebooks use! I’m eager to read the rest of your tutorial, as I’m just about ready to self-publish my own ponderous tome. You’re a prince, Guido.
Thank you.
I saved this column months ago and started reading it tonight for the first time. Yeah, I am a little confused but at 72, it is allowed. I am not very computer literate. HTML appears to be written in Greek or maybe Hindi.
I guess I am looking for a “Magic Bullet,” something that will magically guide me on my way. Is there a “Magic Bullet?” (Software)
I’ve spent too much time with this project to fall flat on my butt. Your first installment made me realize that “Marijuana Dreamin” is not as close to ready as I thought.
Tomorrow I will print out all of your suggestions.
Thank you again for taking the time to offer these suggestions.
Ken
Sorry, Ken, but that magic bullet does not exist. All the software and plug-ins that proclaim to offer an easy solution simply do not work. I have yet to find any software that creates proper, reliable and compatible eBook formats as a turnkey solution. They all have problems of varying degrees. In you situation, your best option might be to simply hire and pay someone to do it for you. Being a writer does not mean you have to handle technical side of things yourself. As yu may have noticed, I am offering eBook formatting as a service and you can find more details about it here — http://guidohenkel.com/ebook-services/
I learned of your website and helpful information while reading Let’s get digital. After a multi year sailing trip from SF TO Istanbul I am ready to begin a memoir/ sailing adventure. Most likely I will turn It over to you for the formatting.
My question is what software should I write in? I have a PC w old MS word. My source is in email text. I worked at a Unix shop so use Star office, now from Oracle.
Kathleen,
Good for you. How I envy you for the journey. Word processors are a very personal thing and Word seems to work for most people. However, when it comes to writing books I personally prefer Scrivener, because it allows me to easily arrange and re-arrange text, collect thoughts and research, images and other things that inspire me, without getting in the way. Give it a look, you may like it, too. I wrote 15 books using Scrivener – http://www.literatureandlatte.com/scrivener.html
I just wanted to let everyone know, that I have just published a book called “Zen of eBook Formatting” that is now available. It covers the aspects from this tutorial in a lot more detail and also adds a hole lot of additional info, details and advanced techniques to the mix. Here is a link with a bit more info, including a look at the Table of Contents of the book.
http://guidohenkel.com/2014/05/zen-of-ebook-formatting-is-now-available/
Hi Guido!
I also found your website through “Let’s Get Digital,” and I have a quick question for you. Are you saying that while you used Scrivener to write your books, you use another method to actually format them? I just want to be sure that I am understanding this correctly. I am pretty familiar with some aspects of HTML but this seems a bit overwhelming to me, personally. Thank you!
Yes, indeed, that’s how I worked on my books. I wrote them in Scrivener and then exported the manuscript to RTF format. From there I then started the actual formatting process. While better than most other ePub exporters in the market, even Scrivener’s isn’t perfect and does not take all those little device idiosyncrasies into account that you have to work around in order to get a professional eBook result. In my opinion, only hand-tweaked code can do that for you.
If you haven’t purchased the book yet, make sure to do so now. The new version has been adapted to current developments and expands on various subjects to clarify and to accommodate new developments in eBook devices.
Click here to grab the book on Amazon!