Fanzing's Web Design Tutorial

Part 3: More HTML Design Tags

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…skip it.  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.

Titles…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. 

However…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 1</h1>

<h2>This is Header 2</h2>

<h3>This is Header 3</h3>

<h4>This is Header 4</h4>

<h5>This is Header 5</h5>

<h6>This is Header 6</h6>

Copyright Symbols…
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 &lt; and it appears to you as <.

What?

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:  &gt;

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!  &amp;

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: http://hotwired.lycos.com/webmonkey/reference/special_characters/

Here are the two you're wondering about:

The copyright symbol (©) is &copy;
The umlaught over the u (ü) in Blüdhaven is done by typing &uuml;

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! <br />
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…
or Left-alignment

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- and left-alignment.

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.  For example:

<p>Hello!</p> <p>Hey Doreen.</p>  <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…such as when the scene changes…all you have to do is leave an empty paragraph:

<p>"Okay, Cartman!  We'll go get Timmy and prove you don't know what you're talking about!" said Kyle.</p>

<p></p>

<p>"Timmaaaaaaay!" said Timmy, excitedly gunning his wheel chair.  "Timmy! Rum blumb bloo-yah!  Timmayyy!"</p>

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:

<p>SPOILERS!  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>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<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:  &nbsp:
The "nbsp" means "non-breaking space".  You get an extra blank space for every time you use that code.

So the following code:
"Hello, Batman … &nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: WHAT ARE YOU DOING?"
Looks like this:
"Hello, Batman …    WHAT ARE YOU DOING?"

Now, in the old days I used to use nine of those &nbsp; 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 &nbsp; tag, but I just wanted you to know the coding in case you need it.

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>, <HR>, <IMG SRC="…">) 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 the start!

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:

This tutorial is © 2000 Michael Hutchison
Fanzing is not associated with DC Comics.
All DC Comics characters, trademarks and images (where used) are ™ DC Comics, Inc.
DC characters are used here in fan art and fiction in accordance with their generous "fair use" policies.

Fanzing site version 7.1