eBook Conversion

eBook conversion for Kindle and ePub readers

An introduction to HTML and CSS

I’ll admit it: HTML can be scary. Somewhere in your browser menu is a command called View Source or View Page Source – if you select that, you get a load of indecipherable code that looks very intimidating.

However, at the level of a file for an eBook, it’s really isn’t so complicated. HTML is a plain text format – you can write and edit any webpage using Notepad or TextEdit. The basic idea is to surround every element with a container, which take the form of <> and </>.

For instance to make a sentence bold, you would use the <strong> tag:

<strong>This text is entirely bold.</strong>

Now, something like a novel is essentially a long succession of paragraphs – to define a paragraph, you use the <p> tag:

<p>It was a dark and stormy night; the rain fell in torrents — except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.</p>

Tags within tags are also allowed – to make a word italic, you use the <em> tag:

<p>It was a dark and <em>stormy</em> night; the rain fell in torrents — except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.</p>

And that’s essentially it. Of course there are other tags for bullet points, headings, italicising text and so on, but that’s about as difficult as it gets.

About CSS

CSS stands for cascading style sheets. Put simply, it’s a way of separating structure and formatting, In HTML, you could manually code the attributes into every paragraph – the typeface, size, indentation, colour and so on – but that’s a very time-consuming way of doing things.

What CSS lets you do is – using the example of a normal paragraph surrounded by <p> tags – define the style for every paragraph in a single line of markup. If you suddenly decide you want every paragraph to indent, you just edit this line, rather than going through the whole document.

MS Word uses a similar principle in its Style and Formatting function. Unfortunately 95% of Word users are either unaware of it or can’t be bothered to use it. Which is a shame – for a long document it’s a real timesaver. If you do know how to use it, it can speed up the conversion process.

I won’t pretend CSS is easy, but all you need to do is copy the odd line of code from this website and paste it into your file. Sometimes the function is fairly obvious and you’ll be able to tweak values as you wish.

Page structure

Converting text to an HTML document in Notepad++ (or similar), using TextFX > TextFX HTML Tidy > Tidy automatically produces a page with this kind of content:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
  <meta name="generator"
  <title></title>
  </head>
  <body>

  </body>
</html>

Looks a bit scary, but there are only three things to concern yourself with.

1. The content of your book goes between the <body></body> tags
2. Putting your book title between the <title></title> tags is a good idea
3. Put your CSS code after the <title></title> tags, wrapped in <style type=”text/css”></style> tags

After you’ve done this, your code looks more like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Paul Clifford</title>
  <style type="text/css">
h1 {text-align:center; page-break-before: always;}
p {margin-top: 0.5em; text-indent:0;}
</style>
  </head>
  <body>
   <h1>Chapter 1</h1>
   <p>It was a dark and stormy night; the rain fell in torrents — except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.</p>
  </body>
</html>

Tags: , , ,

Leave a Reply

© Paul Brookes, 2015. Powered by Wordpress.