Friday, August 9, 2013

The e-book template (full version)


The template for an e-book is an html  package containing a head and a body. Each can contain several elements. In my basic template, the head contains the book's title, the author's name, and a link to the external style sheet posted earlier.

<!DOCTYPE html>
<html>
<head>
<title>Your Book Title Goes Here</title>
<link rel="stylesheet" type="text/css" href="epub.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<!--Insert your title page here-->

<!--Insert your table of contents here-->

<!--Insert your book file here-->

<!--Insert copyright and author pages here-->

</body>
</html>

"Html" stands for "hyper-text mark-up language," a typically geeky title for what is really a very simple system for building web pages. All e-books are html at heart. Most html tags are doubled: the plain tag comes in front of the word or section to be affected, and a similar tag with a diagonal slash closes it off. Thus the statement <b>bold</b> comes out looking as bold. If you forget the closing tag, the rest of your book will be bolded.

There are excellent tutorials on the internet about html and style sheets (usually called CSS for cascading style sheet, another geeky term). Unfortunately most of them describe styling far beyond the needs of the author-publisher.

In other posts, I describe how I build the table of contents, title page, and text chapters of my e-books. Because I use the epub format, the html can be very simple. The html  shown here, for example, won't pass a validation test because it omits most of the throat-clearing that makes html look so frightening. E-books don't need that all that stuff--and if the truth be known, neither do most web pages. If uploaded to a website, the template above will work as a web page just as it is, with the only content being the statement "Your book content goes here". (In addition, "Your Book Title Goes Here" will appear as the name of the page.)

27 comments:

  1. Howdy Notjohn,
    Have a question for you. I'm on a MAC with a bunch of print books done in various versions of Quark, InDesign. I have yet to convert my first book for Kindle. I'm just going to copy and paste every book back into TEXT EDIT (MAC). My question is, I create the book in HTML, aren't the CSS and photos all separate files? How do you keep those files together submitting the book to Kindle? Do I create a folder with the book html file, the CSS file and all the .jpg files and upload that to Amazon?

    Or do you imbed the CSS into the html file - and then what about the jpgs?

    ReplyDelete
    Replies
    1. InDesign seems to have poor results on the Kindle publishing platform (KDP), so you are probably taking the best course. If you have a CSS file, images, and an html file, you can zip them together with any archiving program and upload the zip file to the KDP. Be careful that all file extensions are lower case (htm, not HTM; jpg, not JPG). Preview carefully in all emulations in the downloaded Kindle Previewer!

      Better yet, download Sigil and open the html file in it and tweak as necessary. It's a powerful soft (but free!) so might take an hour or two to get the feel of it. Save as epub. Uploading an epub takes the CSS and images with it, so there's no zipping, and it converts beautifully on the KDP. Don't however include a cover, or you will end up with two covers in the finished book. Good luck! -- NJ

      Delete
  2. Thanks for the answer!
    One more q: I would like to make the text of the book Arial, sans-serif, but no matter how I try to include a command in the p's (p, p.left etc.,) it still defaults to a serif face. I was successful putting:
    {
    font-style: roman;
    font-family: Arial, sans serif;
    }
    in the p.large, etc., headings but not in the book text.

    Have tried adding this to the p.'s:
    body {
    font-family: Arial, sans serif;
    }
    But just can't get it out of default serif. Any suggestion for changing the book text would be appreciated.

    Really appreciate your book.

    ReplyDelete
    Replies
    1. I know that you have already worked this out for yourself, but it's worth noting that the older Kindles (and there are millions of them out there; like Hondas, they seem to go on forever) won't display anything but a serf font called Caecilia and a monospace font similar to Courier.

      Delete
  3. Never mind, I got it, after studying the code! Thanks for doing this book.

    ReplyDelete
  4. Just FYI.
    I am doing my book on a MAC using Text Edit. The format for your book coding is HMTL 5 beta (according to W3C). When I run my html through W3C validator, I get no errors/100% passing validation.

    I tried copying and pasting the same document in then took that "cleaned" document and validated it in W3C. I got 405 errors (!) All the "p class" were converted to "div" and into HTML 4.0 transitional. It seems 'word2clean' is primarily for MS Word users?

    ReplyDelete
    Replies
    1. Word2cleanhtml is for Word, yes, though it works also on Open Office Writer files saved in *.doc format. You could I suppose have changed all those div tags back into paragraph tags? In any event, congratulations on having no errors on your html. That is actually fairly hard to achieve, though many resulting errors make no practical difference on a web page or e-book.

      Delete
  5. From my understanding Amazon only allows Latin-1 encoding (though UTF-8 would be much smarter). See https://kdp.amazon.com/self-publishing/help?topicId=A3G4LY8RGZ9SP6. In your example, this means you should swap “UTF-8” for “iso-8859-1”. Even shorter, then, is writing <meta charset="iso-8859-1">. I’m only coding up my first KDP file now but that seems to work.

    Typically, you should also make sure to actually use ISO-8859-1 in your editor then, but for all practical purposes people will probably be fine.

    ReplyDelete
    Replies
    1. Thanks for the tip. I think I hit upon that charset because my early books were created as Word Save As / Web Page and I needed a charset that accommodated all those weird symbols that Microsoft inserted instead of html entities. I will punt this issue on to someone more knowledgeable than I. -- NJ

      Delete
  6. Hi Notjohn - am using your book (bought in Sept 2013) and went to click on this link: http://notjohnkdp.blogspot.com/2012/12/a-style-sheet-for-e-books.html in chapter step 2 stylesheet for geeks - but no post - where do I find it or do I have to buy the new book?

    ReplyDelete
    Replies
    1. It's the post just below this one. (I forgot that when I revised and re-posted, the link would change. In the more recent edition, I've merely linked to the blog itself.)

      I also have three questions from you about using the width attribute in images. Could you combine them as a single question, please? This will help others. Thanks -- NJ

      Delete
  7. NJ - my links are not working from my TOC to the chapters (and my book is live): I am substituting (parens) here instead of > since your blog won't let us write HTML.
    My TOC is its own html file. Each chapter, is its own HTML file with a doc heading, body & html open/closed tags. Everything checked out perfect on W3C & in Sigil, but none of the chapter listings in TOC chapters are linking to the other chapters/files. Does everything have to be in one continuous file or is there some other way to make those hot links work?
    TOC (it's own html file):
    (p class="padding") (a href="#chapter02") (b)Chapter Two(/b)(/a)(br /)

    Chapter (it's own HTML file):
    (h2 id="chapter07")Chapter Seven(br /)(/h2)

    And one other question - have you used the index option in Sigil?

    ReplyDelete
  8. You can use the Tool / Table of Contents utility to create an html TOC from scratch, then edit that so it looks the way you want it. Or you can replace (a href="#chapter07") with its actual location, which will be something like (a href="../Text/Section0007.HTM"). (The section number probably won't coincide with the chapter number, alas!)

    Yes, it would have worked as a single file. I am not sure why it doesn't work now. Perhaps it's a matter of when the book was broken into separate files.

    No, I've never indexed a book. I didn't even know the option was there! My approach to software is to bang away until it works, and then go home with a satisfied smile on my face. Sorry!

    ReplyDelete
  9. Got them working thanks. One more question: You have a link to an outside webpage in your book (the Gizmo page) but I have paged through the book but have not been able to find the tag for creating a link to an outside web page. I have tried just putting in [http://www.outsidewebpage.com] but it only creates the code. What am I missing? I'd like to be able to link directly to referenced web pages. Thanks again in advance!

    ReplyDelete
  10. Never mind - it was simple! Found it. I was missing the -a href-! Thanks again NJ.

    ReplyDelete
  11. This is made very easy in Sigil. On the top menu, the third item is INSERT. One of your choices there is LINK. (Sorry it took me so long to reply!)

    ReplyDelete
  12. Hi NJ,

    Can we create the entire thing in one HTML file instead of Using a CSS separately. The book only contains 35 pages. I don't see a need of a separate CSS for it.

    ReplyDelete
    Replies
    1. Sure, but note that if you divide the book into chapters, the entire style sheet will be copied to each. This seems to me to add unnecessary bulk to the book. Besides, I find it easier simply to add the css file to the book rather than to paste its content into the main html file.

      Delete
  13. Hi NotJohn,
    Just bought a Kindle and am new to this process.

    After I purchase your ebook version how does one access your templates
    Thanks Rob.

    ReplyDelete
  14. That's what this blog is for (among other things). Though you can of course copy the template(s) from your Kindle device or app to your computer, it's much easier just to swipe your cursor over the template on this website, copy it to Clipboard (or the Mac equivalent), and paste it into a text file on Notepad or other text editor. Same with the style sheet.

    ReplyDelete
  15. Finally figured out how download your ebook and looking forward to digging in.
    Question though:
    When I go to amazon for your book it lists around 30 rather glowing reviews.
    When I click on your posting link on the kdp forum it takes me to a version with only
    one review. Is this the same book version in both cases?
    Thanks Rob

    ReplyDelete
    Replies
    1. The link is supposed to take you to your national store, which perhaps only has the one review. When I click on the link -- http://viewbook.at/notjohn -- it takes me to the US store, where I do indeed see 30 reviews, of which 20 intelligent people gave it a five-star rating. You should see the same at http://www.amazon.com/Notjohns-Guide-Kindle-Publishing-Anywhere-ebook/dp/B00BK9TN4E/ -- and whether you do or not, there's just the one book.

      Delete
  16. Hi Notjohn

    Sorry I'm a complete novice at the html thing - published fix format on Kindle converting Publisher to PDF. I'm now trying out a novel so need HTML. I've purchased your 2016 Guide, under Notepad++ you say 'select encoding option Encode in UTF-8'.
    Where do I do that? I have downloaded Notepad++
    Thanks

    ReplyDelete
    Replies
    1. On the menu at the top, choose ENCODING (fifth from left). The second option is ENCODE IN UTF-8. In my copy, it's checked by default.

      Delete
  17. Is it possible (and perhaps instructive to others) to give me advice, one step at a time, on how to convert a 400+ page book written in Word to a format that can be published as an eBook? My book is published by CreateSpace and the ebook will go on Kindle. The original document uses styles, section breaks, page breaks, etc and I spent a lot of time formatting it so that it is consistent and looks nice in print. In the Kindle version I would like to use hyperlinks - in the TOC, but also within the document to link to specific headings or words within the document. I initially saved the docx file as html in Word, added hyperlinks in the TOC and elsewhere. (First two chapters worked well, the subheadings in the third chapter link to subheadings in the first chapter - but that is a Word problem I haven't figured out). It looks "pretty" well in the Preview on Kindle - but not perfect. And the links are a problem. I don't mind doing the work, but I really need some handholding and step by step instruction.

    ReplyDelete
    Replies
    1. Well, yes, that's exactly what my Guide does! Ten steps, ten chapters, plus some miscellaneous advice which may or may not be needed or wanted.

      Delete
  18. Hi, I just want to say thank you for posting this. I am about to publish my first book with a co-author and this is going to help us so much. I will be downloading your book asap, but I am sure I will end up asking you a million and one questions anyway! Again, thank you for your blog. It will be incredibly helpful!

    ReplyDelete

English only. No links. Keep it clean.