If you haven’t read part 1, do so before barreling into this coding fest!
HTML doesn’t recognize certain symbols and such unless they are literally in their HTML form. So, unless a curly quote like these “” are in its proper code (same goes for dash, hyphens, umlauts, tildas, etc.) then they will not be rendered properly. Also, in order to make sure that your word-processing software has rendered all your quotations, italics, and apostrophes in their correct form we have to do some work. So first, we’re going to do a series of Find and Replaces to easily change those up, or, make sure they’re accurate just in case! Just because your sentence looks and has the correct quotations, we still have to do this.
- Open your manuscript in Word or whatever word processor you use.
- Open the FIND and REPLACE box. (Usually CTRL+ F)
- In the FIND box put ” and in the REPLACE box put “. Select Replace all. Note: ” is your quotation mark, it looks a little weird here because this is a blog post–can’t help it.
- Next, in the FIND box put ‘ (that’s a single quote) and REPLACE with ‘. Select Replace all. Note: single quote = apostrophe.
Now a little different:
- FIND … for ellipses and REPLACE with … then select Replace all.
- In the FIND box press CTRL + I. You should see it now searches for font:italic. In the REPLACE box type exactly: <i>^&</i> and hit Replace all.
Now stop. That part’s done for now. But, if you have some issues later like I did then it might involve some manual tracking down of certain elements that are out of place. No worries about that for now! We’ll get to it when, or if, it happens.
- Select all, copy, and paste your manuscript into your text-editor. Save your document. In the Save As… box choose Hyper-text Markup Language (or .HTML). Your saved file might look like booktitle.html. The formatting might look a little odd but your book should now look something like this:
- Next, press CTRL + F to open the Find menu in your text-editor with your manuscript in there. Go to the Find and Replace section and check REGULAR EXPRESSION.
In the FIND box type ^(.+)$ and in the REPLACE box type <p>$1</p> then select Replace all.
This will wrap everything into neat little paragraph tags that we can alter and play with. It will also probably add some unnecessary ones that will need to be manually deleted. Now your manuscript should look like this:
Now we’re going to start adding the basics of HTML into our document. These are the same basic opening and closing tags that I discussed in the first post. Here is what the beginning HTML looks like. This will go at the very top of your document, before any of your book begins.
Type that at the beginning of your document. Be very careful that you type in every quotation mark, exclamation point, semi-colon, etc. I’m going to try to find a way to type that in so you can just copy and past it from this post, but every time I actually type in any real HTML, my blog posts goes all crazy because it’s trying to read it! Spacing or indenting doesn’t matter. So you can write each line on its own new one if you want to make it clear, but you don’t have to indent them.
When it’s finished, your document should look like this:
Now we’re going to close this. Because right now we have opening HTML tags but none closed. The closing tags for this goes at the very end of your story. As in after the very final paragraph.
- Scroll to the very end of your manuscript and hit ENTER a few times to give you some space. Then type the following:
Good, now you’ve closed the body and html tags which were open. Now you have the beginning of a solid HTML document. In the next blog post, we’ll beginning styling our document — the fun stuff!
Remember, if you have any problems just leave a comment. Hopefully, I am being detailed enough that you can just (slowly) follow along as I make these posts. Now that your manuscript is in HTML format, though without much styling, we can view it in a web browser! Simply go into your folder or wherever you have you booktitle.html file saved and double click it. Or, you should be able to drag the file to your browser and it will open.
Here’s what mine looks like in Google Chrome:
Browsers display web pages differently and is nothing to bother yourself with. I just thought it was neat to show.Next time on Formatting your eBook, we’ll be doing some more Find and Replacing, getting into designing your front matter, and maybe even (hopefully!) designing your chapter headings and title page. Though, I have a feeling chapter headings and title page will get a post of their own. I hope this has helped!
T. A. Grey