Fan Fiction
Preparing Simple HTML Files
by Richard Lobinske



This article was designed to help fan fiction writers quickly and easily prepare simple, compact HTML files for submission to websites. It will provide the basics for the standard alternative fonts of italic, bold and underline, how to set centered text, and how to insert a horizontal rule to delineate sections. For simplicity, I will not go further in this article. After you become comfortable with these basics, you can start experimenting with additional code to enhance your story presentation and to learn better coding practices.

Most writers will use some kind of word processor for writing. After you have completed revising and proofreading of the story; save a duplicate copy of the file. This will give you a visual reference to help in placing the basic HTML tags that you will need.

HTML tags are the codes that format what is seen in the web browser. They mostly are used in pairs: the open tag < >, which starts the formatting or action, and the close tag </ >, that ends it. HTML open and close tags should not cross, they should nestle within. For example, if you want the last word of a section of italic text in bold, you would use <i>text<b>text2</b></i> and not <i>text<b>text2</i></b>.

You can display standard alternative text with the italic tags (<i> and </i>), bold (<b> and </b>) and underline (<u> and </u>). Simply set the open tag at the beginning of the desired text and the close tag at the end. If you have written a story first for posting at a message board that uses a BBcode, you can again use find and replace on the brackets to change the [ ] to < >.

To create centered text, use the open tag <center> and the close tag </center>.

To make life a lot easier, you can use the macro or hotkey function in your word processor to add the tags. By using adjacent keys for matching open and close tags, you can streamline the process considerably.

Next is marking your paragraphs and line breaks. Without them, the browser will attempt to display the file as one very long line. The paragraph tag pair, <p> and </p> identifies them to browsers as a unit and it will be displayed with a single line break afterward. A fast way to set the paragraph tags is to use one of the online "Markdown" converters:

http://michelf.com/projects/php-markdown/dingus/
http://daringfireball.net/projects/markdown/dingus
http://attacklab.net/showdown/
For some instances, however, you will need to insert a directed line break, or <br> tag. This is needed for things like poetry, where you want line breaks at exact positions. The converters will treat them as ordinary paragraphs and group the lines together unless told otherwise. A second case is when you wish to have more than one line between sections of text, such as a separation between scenes or sections. I suggest adding the <br> tags before using the converter and make sure in the case of section breaks with multiple <br> tags you insert a blank line between the end of a paragraph and the breaks or the converter will roll them into the paragraph and nullify them. Fanfiction.net is a popular fanfiction website and its internal format only allows a horizontal rule tag, <hr> to separate text sections. You can again use find and replace to insert this tag into your section separations. When ready, copy and paste the text of your file into the converter and let it convert the text. Be aware that the converters are very good, but not perfect. You will need to inspect the final product to find possible small errors.

Make a new document in a text editor, like Notepad. You want this treated only as text, no formatting. Type or copy the following into it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<head>
<title>Untitled< /title >
</head>

<body>



</body>
</HTML>
Copy the text from the Markup converter and paste it into the above file under the <body> tag.

If you want, type the title or something like that between the title tags near the top of the page. This will be displayed above the navigation bar as the page title.

Save the file with a .HTML extension. If your text editor doesn't have the option to save with that extension, save as a .txt file and then use your file manager to manually change the extension to .HTML. Open the in a browser to see if it looks okay. If possible, it is best to check that it displays properly with multiple browsers. If it does, you're ready to go.

This will get you started. Once you get comfortable, you can start experimenting with changing font types, sizes, adjusting paragraph margins, and other things. There are many good reference sites available with a simple search.


Thanks to 31415 at PPMB for the Markup converter and advice on how to easily add the paragraph tag.