So, you want to write your Pokémon fanfic in HTML, eh?


Good choice! This isn't to say that regular text documents are necessarily bad. In fact, I use a word processor myself to check for typos and other spelling errors before I change it over to HTML. But while I'm typing it, I put in the necessary HTML commands I'll need so that my browser will be able to read it like a webpage. So when I'm finished, I've got all the codes in place and I can simply save it as an ordinary text file with an .shtml extension and BANG! I've got a fanfic as a webpage. And that means you can do some pretty cool stuff with the look of your fanfic.

You can be assured that I'll try to keep things as simple as possible. There is a lot of information here with examples, so you're not completely left in the dark. On top of that, there's a template you can use to get you started. Most importantly, of course, if you have any questions about anything here or you're having problems, contact me.

The reason why HTML is a good format for your fanfic is simple: you can use bold, underlines, italics, tables, anything you've seen on a website, you name it; you can use it. In my own fanfic, Growlithes in the Real World, there are two tables in it. It's the centered text. ^_^ Agent 99's Snow Angels is another excellent example (Part II especially) as she used small pictures.

Now, let's get to the nitty gritty of the commands you'll be using.

Most commands in HTML are like light switches. You turn them on, do what you need to do, then turn it off. The "/" in front of the command tells the browser to turn it off. For example: </U> would tell the browser to turn the underlining off. Just keep this in mind when you do your HTML work. The examples provide insight on how the text should be formatted when you write/edit your fanfic. A template is provided at the bottom essentially shows a visual of how your fanfic should appear when you're done typing it up with HTML commands.

First, you need to use a word processor. Any one should do the trick, but make sure it gives you the option to be able to save your fanfic in different file formats, like .txt and .doc, for example. This is important later on. Now, before you even start typing your fanfic, you need to put in the following commands:

<HTML> <== This is necessary, so that the browser will recognize that you're running an HTML file

<BODY> <== This is used for designating the environment like text color, background color and so forth. As far as I'm concerned, all documents are black text on white and that's even by default when you first create a website. If you do otherwise, I'll change it for you, unless the fic obviously needs it to be different. As you might guess BGCOLOR stands for BackGround COLOR and TEXT is simply the text color.

Example: <BODY BGCOLOR="white" TEXT="black">

<TITLE> <== Any text entered after this command will appear in the title bar at the top of the browser.
</TITLE> <== This will turn it off.

Example: <TITLE>Flying Carp Invade Manhattan!</TITLE>


Text Manipulation and Other Deceptions

Okay, you've set up the environment in which your fanfic will appear. All the while, you're saving your fanfic as a word document, not a text file -- not yet, at any rate. Now we get to the slightly fancy stuff: bold, italics and underlines. Here's how they are formatted for use:

<B> <== Turns on bold for the following text
</B> <== Turns off bold for the following text
Example: This is <B>bolded</B> text.
Seen as: This is bolded text.

<U> <== Turns on underlining for the following text
</U> <== Turns off underlining for the following text
Example: This is <U>underlined</U> text.
Seen as: This is underlined text.

<I> <== Turns on italics for the following text
</I> <== Turns off italics for the following text
Example: This is <I>italicized</I> text.
Seen as: This is italicized text.

Here's all three in combination:
Example: This is <B><U><I>everything combined</I></U></B> text.
Seen as: This is everything combined text.

See? Light switch on, light switch off. You can mix and match your taste, but I advise to use it sparingly. If it isn't, then its purpose, which is to emphasize, gets lost.



Proper Spacing and Good Manners

The next command is fairly critical. It is this command that will allow proper spacing between paragraphs. Without this command, everything will string together and look really bad. Remember these commands well:


<P> </P>


These are your paragraph commands. To give you an idea of how your fanfic should appear when you're typing it out, here's an example that uses the <P> </P> commands.

<P>A few hours later, Jessie and James had explained the details of the past few days and recounted just about every criminal act they had ever done under Giovanni and Team Rocket's direction. While both of the ex-Rockets felt some relief for confessing to their sins against society, Jessie was strangely emotional. She had been crying softly on James' shoulder for the past fifteen minutes while James held her. The officer looked tired, but she was smiling.</P>

<P>"Okay," she began, "you've given me a lot of information that would send him away for a while. But a good lawyer, which I know he has, will get him off of most of these charges you're making. Something very solid is going to be needed." She paused for a moment and took a deep breath. "I need you to get Giovanni to confess to trying to kill you."</P>

<P>Both Jessie and James blanched at her words. After a minute of stunned silence, Jessie spoke up, sounding almost hysterical.</P>


As you can see, it's not too difficult to do this, you just have to get into the habit of putting paragraph commands at the start and the end of your text.


You can also align your text to the left, center, or to the right. Here's how to use them and how they look.

Format:
<P ALIGN=LEFT>This is left aligned text.</P>
<P ALIGN=CENTER>This is centered text.</P>
<P ALIGN=RIGHT>This is right aligned text.</P>

Shown as:

This is left aligned text.

This is centered text.

This is right aligned text.


The </P> becomes more necessary to maintain control over the alignment, otherwise, your document will look really goofy if it's completely centered. Also, note the extra lines between the Shown As text because you're paragraphing.

There's another command that you can use if you want to simply jump down to the next line. You normally wouldn't need it in a fanfic, except at the top when you give the title and the author's name. Think of this command as a Line Break command:

<BR>

This doesn't require a "/" type of command because it just happens, there's no reason to "turn it off," so to speak. Here's an example:

This is line 1. <BR>    or   This is line 1.<BR>This is line 2.
This is line 2.

Both will appear as:
This is line 1.
This is line 2.








By God man! Pull yourself together!

Now, let's pull all these things together so you can get a feel for what the start of your HTML fanfic will look like. You can actually cut and paste the HTML template below and use it for your own nefarious purposes.


HTML TEMPLATE


<HTML>
<BODY BGCOLOR="white" TEXT="black">
<TITLE> Title of your fanfic here. </TITLE>
<P>[Place title here]<BR>
[Place "by author" here]<BR>
[Place part number here, if needed]</P>
<BR><BR>
<P>Both Jessie and James blanched at her words. After a minute of stunned silence, Jessie spoke up, sounding almost hysterical.</P>
<P>"You want us...to go <I>back</I> there?? Are you crazy?! How are we supposed to do that? We barely escaped with our lives to get here! We came here for <B>protection!</B>"</P>

</BODY>
</HTML>

Okay, now you've got all the commands in place and you've saved it as a .doc file. You need to now save it as an ordinary "Text Only" document. So in your word processor, click on File, then Save As. A window will pop up and the very last drop down menu, if you click on it, should provide you with a "Text Only" option -- NOT Text With Line Breaks. When you've selected it, type out your filename with the .html extension. This is very critical as your browser will not read it as a web page, but as a text document and you don't want that.

You may find that you don't see file extensions. That's the ".doc" or ".txt" or ".html" part of a file. When you create a document, say with MS Word, if you don't see the ".doc" part at the end of it, then your file extensions are hidden. You need to unhide them, so you can see if you need to rename the extension for submission to The Tower. Here's how you do it:

    1) With all your programs closed, you should be at the Desktop.
    2) Double-click on My Computer
    3) Click on Tools from the menu bar
    4) Select Folder Options
    5) Click on the View tab
    6) Find the line that reads: Hide file extensions for known file types and *uncheck* that option
    7) Click Apply, if it's lit up, then click Ok.
    8) Close the My Computer window
    9) You should now see the file extensions

Once you've done that, minimize everything and pull up your browser. You don't need to be connected to do this, so when you get some errors that it can't find a website, just click Ok; that's normal. Now you need to pull up the file in your browser. So, assuming you saved the file to your Desktop, just type this out in the address field:

file:///c:\windows\desktop\filename.html (filename being whatever name you gave the file), then press Enter

This should pull up your fanfic and it should look like the example below (with your text, of course) and it will be full screen, unlike the below example:

A few hours later, Jessie and James had explained the details of the past few days and recounted just about every criminal act they had ever done under Giovanni and Team Rocket's direction. While both of the ex-Rockets felt some relief for confessing to their sins against society, Jessie was strangely emotional. She had been crying softly on James' shoulder for the past fifteen minutes while James held her. The officer looked tired, but she was smiling.

"Okay," she began, "you've given me a lot of information that would send him away for a while. But a good lawyer, which I know he has, will get him off of most of these charges you're making. Something very solid is going to be needed." She paused for a moment and took a deep breath. "I need you to get Giovanni to confess to trying to kill you."

Both Jessie and James blanched at her words. After a minute of stunned silence, Jessie spoke up, sounding almost hysterical.

"You want us...to go back there?? Are you crazy?! How are we supposed to do that? We barely escaped with our lives to get here! We came here for protection!"


So there you have it! An HTML tutorial for your fanfic. Huzzah! Aren't you glad to be at the end of this heinous and lengthy piece of webpage. ^_^

Okay, more seriously though, with a little practice and understanding, writing your fanfic in HTML gets really easy. And as I mentioned at the start of this tutorial, I'm available to answer any questions you might have.

Good luck and have fun!

       --- Jolt



Back to the top      Back to the tutorials










Amazon Honor System Click Here to Pay Learn More

You can advertise here! On over 1000 pages!