By now, you can do the simple formatting required for many
fiction stories and articles in Fanzing. But you're probably not
happy with it yet. After all, how do you do a title so that it's
larger than the text, like that one right up there that says "Fanzing's
Web Design Tutorial"? And how do you make that copyright symbol
so that it says "© Syl Francis"? Is there a way to make a divider
between sections instead of just typing ************* ? What if,
like 90% of fan fiction, you want to open your story with a quote or a
poem; is there a way to end a sentence and begin a new sentence on a new
line within the same paragraph? How do you center text, or even
align it to the right side of the page if necessary? And how DO
you put the umlaught over the u in "Bludhaven"?
That's what I'm going to pass on in this simple section
of the tutorial: advice and a few simple codes for getting the most out
of formatting the story. You'll learn some more HTML codes, including
some which have changed since the earlier days of HTML. (To all
you who know HTML already; you should re-read this section just in case
you're doing something "wrong" like I've been doing for years.)
You'll also learn an important bit about spacing. I'll even pass
on a few important DON'Ts about doing HTML for Fanzing. In
the end, your formatted story will be not only "passable" but "attractive".
If at any point this page seems to be too much
Come back to it sometime when you need the knowledge contained within.
It isn't mandatory to know all this stuff in order to do a basic page.
It isn't my intention to overwhelm you or confuse you.
or What We Call Headers
When it comes to the title of your story, as well as your name underneath
the title, you don't have to worry about formatting. As I said
earlier, I will be giving you a skeleton web page to complete.
You'll be putting the title of your work where it says "put title here"
and your name where it says "put your name here." Thus, I'll be
controlling the layout and appearance of those particular page elements.
sometimes you want to divide your story into chapters, or separate
an article into sections. How do you make a subtitle that is larger
than the paragraph?
Well, see that phrase up there that says, "Titles
or What We Call Headers"?
That's what is called a HEADER in HTML. The titles at the top of the page,
which are both larger than this one, are also HEADERS.
"Ah! So is that done by putting <h> and </h> around
it?" I hear you ask. Well, yes and no. In order to work, you
also have to give the header tags a size between 1 and 6, 1 being the
largest and six being the smallest. The title at the top of the
page is an <h1>. The subtitle beneath
it is an <h2>. The section dividers
down here are each done with an <h3>
. (See a pattern?)
For subtitles (or chapter headings, as you may think of them) I would
recommend using the <h3>and </h3> tag. <h3>
is a good size, being a little larger than the paragraph text.
ONE IMPORTANT DIFFERENCE: I hate to confuse you with some
details you might not understand, but I should warn you here that Fanzing's
header tags have all been re-defined by me. I used what's called
a "stylesheet" (more on that later) to specify how big, how bold, what
color and what font face I want the headers to be. The reason I'm
telling you this is that the way you're seeing the headers on this web
page you're reading right now may not look the same as headers in your
own browser. If this is confusing
all you have to know
is that the headers look different in Fanzing and it's because of some
tinkering I did. Don't trouble yourself with "why".
Want to see the Headers in action?
<h1>This is Header
<h2>This is Header
<h3>This is Header
<h4>This is Header
<h5>This is Header
<h6>This is Header
and How To Spell "Bludhaven" Right!
How do you do symbols? Since some symbols like the <
and the > and the &
are used to begin and end HTML codes, special coding is needed to make
them appear on a web page. Indeed, you're probably wondering how
it is that you can see the <
symbol. After all, had I just typed that, you wouldn't see it!
The trick is: I used a character entity. Character entities
are little codes which, when processed by the browser, display a symbol
instead of the code. What this means is that all I had to type was
< and it appears to you as <.
It's a little code that begins with an ampersand sign (&) and ends in a semi-colon (;). When typed into the HTML of a page, it renders
as the Less Than sign (<). In fact,
that's what the lt in between the & and
the ; means: "Less Than"!
By that same logic, guess what you'd type to get a "Greater Than" symbol.
That's right: >
Okay. How about the ampersand? How do you make an &
if the & itself denotes the start of
one of these named entities? It's another character entity!
Am I throwing too much at you? Okay, I suspected as much.
Character entities seem a little bizarre and can be overwhelming once
you see just how many named entities there are. It's not really
important that you memorize how to do any of them; that's what lists of
codes and printouts are for. Just keep the list nearby your desk
and refer to it if you ever need to.
The full list of character entities (both named and numbered entities)
includes Greek letters, fractions, copyright symbols, trademark symbols,
arrows, capital and lower-case vowels with accents
and more! You can
find one at Webmonkey:
Here are the two you're wondering about:
The copyright symbol (©) is ©
The umlaught over the u (ü) in Blüdhaven is done by typing
Making A Straight Line
(regardless of blood-alcohol levels)
Want to divide up your chapters? Most authors working in text use
either a long dashed line (--------), a short line made of asterixes (****)
or a LONG line of asterixes (**************************************).
There is a better way of doing it in HTML. It involves the HR tag,
or what is properly called a "horizontal rule".
The simplest version of the tag is thus: <hr />
That code will make a line that goes all the way across the page body.
A classier version is to do a line which is a fraction of the whole page:
<hr width="50%" />
I leave it up to your discretion when it comes to changing the width
percentage. 50 is good, though.
"HEY! Don't you need an </hr> at
the end of that?"
Nope! That's why the tag ends in a space and an upslash.
The tag is thus self-contained and turns itself off.
Take A Break
Notice that every time you create a new paragraph using the <p>
and </p> tags, they are separated from
the other paragraphs by a white space. But what if you want to break
a line and start a new line without creating a new paragraph? After
all, you may want to put a song lyric or a poem into your text.
In that case, you need to use the break tag: <br
Here's how you'd use it:
<p> "Bilbo, Bilbo Baggins!
He's only three feet tall! <br />
Bilbo, Bilbo Baggins! <br />
The bravest little hobbit of them all!" <br />
--"The Ballad of Bilbo Baggins" by Leondard Nimoy</p>
Same rule as with the HR tag above, you'll notice. By including
a space and an upslash before the end bracket, you turn off the tag.
These upward slashes in order to turn off the tag are a relatively new
convention, and some of you who have seen HTML before may be surprised
to see them written that way!
Finding Your Spiritual Center
It used to be that you would use tags that said <center> and
</center> around anything you want centered, but this is being phased
out. There are two ways to center something properly. One way is
to use the align property, the other is to
use the <div> tag.
Here are the basics of using the DIV tag for centering as well as right-
One: Superman Arrives</div>
One: Superman Arrives</div>
One: Superman Arrives</div>
In case it's not obvious, you change the alignment by putting the word
left, center or right within the quotation marks. Clear?
Alignment is just one of the properties of the DIV tag, but it is the
only one you need concern yourself with for right now.
Spacing in a Spaceless Space
Here's an interesting tidbit: formatting of text does not carry
over to HTML. Spaces and line breaks need to be conveyed to the
computer via coding. Only one space between words will appear, even
if you leaned on the space bar for a half hour between words! Also,
you can hit the ENTER key a dozen times and it won't make any difference:
those two words will appear on the same line once they're displayed in
a web browser. It is both liberating and frustrating, depending
on what you're trying to accomplish!
There is a flip side to that: you can put a lot of coding on one line
in HTML, but it might display on several lines depending on the code.
<p>How are you?</p>
<p>You're looking good.</p> <hr /> <p>I hate
that Cliff Carmichael!</p>
Now, that looks pretty compact
but if you used that code in a web page
and looked at it in a browser, it would take up half the screen!
As you can see, spacing things out in HTML is a bit dodgy. For
the most part, though, you won't need to use much spacing for the kinds
of documents in Fanzing. I'll just cover a few little tricks, okay?
If you want to leave an extra space between two paragraphs
when the scene changes
all you have to do is leave an empty paragraph:
We'll go get Timmy and prove you don't know what you're talking about!"
Timmy, excitedly gunning his wheel chair. "Timmy! Rum blumb
Okay, that takes care of skipping one line. One problem:
empty paragraph tags can't be stacked more than once. <p></p><p></p> has
the same effect as only putting <p></p> once.
You could put 100 <p></p>
tags between those two paragraphs and they would appear to only skip once!
So, how do you create a lot of white space? With <br
/>tags! Unlike paragraph tags, the break tags stack up
just fine. For instance:
Fanzing has gotten a sneak preview of Titans, and now we can reveal
the identity of Dark Octopus. If you don't want to know, look away!</p>
<p> Dark Octopus is
really the new identity of Dumb Bunny!</p>
One more problem in the "spaceless space" is: what do you do to put a
little space in-between words?
This involves another named entity:  :
The "nbsp" means "non-breaking space". You get an extra blank space
for every time you use that code.
So the following code:
: : : : : : : : : :
WHAT ARE YOU DOING?"
Looks like this:
WHAT ARE YOU
Now, in the old days I used to use nine of those codes in
a row at the beginning of every paragraph in order to make it look like
a fancy indent. DON'T DO THAT! That's the way I USED to do
it. As of spring 2000, Fanzing.com has a style sheet which
will make every paragraph (if identified with a paragraph tag) indent
without any special coding.
Aside from a makeshift indent, I don't know how many uses there are for
an tag, but I just wanted you to know the coding in case you
The NEW HTML Adventures!
As I noted earlier, a lot of HTML codes have new rules. If
you've never used HTML before, ignore this part because you don't need
to read it and I'm going to be a bit more technical.
If you've used HTML before, you may be surprised at the way some of the
tags are written. Let me explain:
XML and XHTML are the hottest programming languages around, and what
they're trying to do is separate the content from the way the content
appears (i.e. the design). Currently, most everyone on the web is
trying to create advanced layouts using a simple language (HTML) that
was never intended to be used for fancy visuals. XHTML is similar
to HTML, but it is stricter and needs the HTML coding to be properly defined.
That's why paragraphs need to be inside <p>
tags and titles need to be properly defined as headers. All HTML
tags need to be lowercase. All self-contained tags (<br>,
">) now need to be closed off internally with a space
and an upslash (<br />, <HR
/>, <IMG SRC="
I know, I know. I've been doing this completely wrong for the last
few years, and it's going to take me forever to bring my code "up to code"!
That's why I'm trying to teach everyone to do this the right way from
While a lot of this "new" technology is more daunting than HTML, we really
need to be prepared for it. Identifying your content with XML
and then defining its appearance via style sheets is the way of the
future. Someday, browsers may not recognize HTML codes that aren't
up to spec! Just think: all of those junky pages will be unviewable
and the World Wide Web will consist of only a few thousand sites again.
Should that happen (it won't), I want Fanzing to be one of those few thousand.
Fanzing Formatting DON'Ts
Here are a few things to avoid when formatting your stories for Fanzing:
Don't get too inventive. Unless you're an HTML wiz or a CSS
genius, just stick to the basics of formatting your story or article.
I have no problem with you getting inventive with your own site, and
I don't mean to squelch creativity, but everyone's advanced coding is
different and sometime there are coding conflicts.
I've avoided mentioning <font> tags for a reason: they're being
phased out. In the future, all formatting will be done through
stylesheets and style tags. Avoid using font tags if at all possible.
If you're one of the newbies and you're saying to yourself, "What are
font tags? We didn't cover those?"
relax! I didn't cover
that because font tags are a little more difficult to learn and you
don't need to concern yourself with them. I will be controlling
the size and color of the text on Fanzing.. That's the same reason
I'm not bothering to explain how to change your page's colors, how to
do images, how to create tables and a number of other HTML "basics".
You don't need to know them to do Fanzing stories or articles.
Again, don't use the tag as a way of making indents at
the beginning of paragraphs. My style sheet will take care of
When using headers, avoid H1 and H2. Those are large headers,
intended for Title and Author on Fanzing pages.
is Editor-In-Chief of Fanzing.com. He is the world's biggest Elongated Man fan
and runs the only EM fan site.
He lives in Rochester, MN.