Fanzing's Web Design Tutorial

Part 2: Basic HTML

HTML's full name means "Hyper-Text Markup Language", which you don't need to know for a test or anything, so don't get scared. I only told you because I knew you'd ask. All that says is that HTML is a markup code. You put codes around certain words, and those words are now "marked up". If you wanted to make the word Superman in boldface (i.e. bold - darker and thicker), all you'd have to do is put bold tags on both ends of the word Superman. The word in between the two tags is now "marked up".

In most examples below, I will be using the word "Superman" as the word we will be marking up…just because it looks more attractive than "blah blah blah".

BASIC TAG STRUCTURE

Before I get into specific kinds of tags, let's discuss the most basic principle. The way HTML tags are constructed.

All tags are surrounded by brackets. You know them from math class as your "less than" and "greater than" signs.

< >

Anything in between the "less than" and "greater than" signs is interpreted by the computer as HTML coding. For instance, the Bold Tag is B, the Italics Tag is I, the P tag is P. Or, to see them as HTML codes:

<b>
<i>
<p>

Generally speaking, tags can be uppercase or lowercase. However, the newest design codes require it to be lowercase . It's nothing you need to concern yourself with as a beginner, but there are more complex things we may do to Fanzing later and they'd require lowercase. You could do uppercase and it would WORK…but it wouldn't be RIGHT.

Side note: You'll find that there are a lot of things about HTML which WORK but aren't RIGHT. That's been one of the problems with web design for years and years. Because there were so many stupid mistakes, the programmers of Netscape and Internet Explorer made their software "dummy-proof"…so that mis-coded HTML would still work. Unfortunately, that means thousands and thousands of designers thought you could type X and get Y. Had the browser programmers held their ground and said, "No, if you want Y you need to type Y, ya moron!", then web design would have been learned the correct way. Do you know how hard it is to tell someone they're doing something WRONG when it works right on their screen ANYWAY? YAGH!

Okay, back to HTML tags. Three paragraphs up, I taught you the codes for bold, italic and paragraph. But I literally only told you half of it. You see, those are all the "begin" tags. If you see the tag <b>, you should interpret it as "begin bold". In order to turn off the bold at the other end, you need to put the following tag: </b> It's almost the same tag, but it has an "upslash" or "forward slash" before the b. </b> should be interpreted as "end bold" or "turn off bold".

THUS, the proper use of the bold, italics and paragraph tags are:

<b> Superman </b> - Begins bold, makes "Superman" appear bold, and then turns off the bold
<i> Superman </i> - Begins italics, makes "Superman" appear italicized, and then turns off italics
<p> Superman </p> - Begins a paragraph, makes "Superman" the content of the paragraph, and then ends the paragraph

(You don't have to put spaces before and after the content. I simply put spaces on both ends of the word "Superman" to make it easier for you to read.)

That's it for basic structure.  You now know how HTML tags work!  Follow the above guidelines and you'll be able to make words appear in bold and italics.  You also know how to begin and end a paragraph!

Wow, I can't believe how easy that was.  Now, before we get into more tags, I need to teach you two important, basic rules about using these tags.

Remember what I said earlier about browsers being dummied to work with bad code?  Well, bad coding of the start and stop tags is the biggest offender.  Most of the rules I'm teaching you are rules that can be broken and still look okay in a browser…but they are stumbling blocks to good design and extremely hard to work with.  It's like a car that's been fixed by an amateur, with wiring and hoses and cables everywhere; it runs, but when you take it to the proper mechanic he'll have a bugger of a time finding his way around. 

Given that you are coding pages which will be passed on to another person (namely, Ye Olde Editor) and then possibly transformed into a different code in the future, it is important that you learn proper coding.

Let's start with the two most basic rules.

RULE 1: FINISH WHAT YOU STARTED

I know, this sounds like "Everything I Need To Know About Web Design I Learned In Kindergarten," but it's very true! One piece of advice describes the concept employed in HTML coding: "Finish what you started."  Always put your toys away, pick up your clothes and throw trash away in its proper place.  In the same way, you need to clean up after your HTML tags.

An opening bracket must have a closing bracket, and an opening tag must have a closing tag. If you write an HTML tag that begins some markup, be sure to turn off that markup later. For every tag that says "begin italics", there must be another tag that turns off the italics. For every "begin bold", there must be an "end bold". Get the idea?

CORRECT:  <b>"Hello, I'm Superman,"</b> said Superman as he landed on the Daily Planet's roof.
INCORRECT:  <b>"Hello, I'm Superman," said Superman as he landed on the Daily Planet's roof.

You can see the difference:
"Hello, I'm Superman," said Superman as he landed on the Daily Planet's roof.
"Hello, I'm Superman," said Superman as he landed on the Daily Planet's roof.

If you forget the opening tag, the markup never begins. If you forget the closing tag, the markup never ends. If you've ever seen a story where an exclamation such as "Stop" is in bold…and then the entire rest of the story is in bold…you know that somebody forgot their closing </b> tag!

It's really no different than the concept of quotation marks. If you're writing a story and you want to differentiate dialogue from descriptions, you have to put the quotation marks at both ends. You've seen authors who've left out one or the other, right? It's a bit confusing, and you have to mentally figure out where the dialogue ended and the narration resumed:

CORRECT:   "Hello, I'm Superman," said Superman as he landed on the Daily Planet's roof.
INCORRECT:  "Hello, I'm Superman, said Superman as he landed on the Daily Planet's roof.

Well, a computer has the same problem with a missing tag…and unlike you, it can't read and interpret. If you don't tell it to start or stop, it won't start or stop! It'll continue on like an enchanted water-carrying broomstick, or a robot who only responds to the voice of his dead creator, or a hypnotized man waiting for another snap of the fingers, or an editor who doesn't know when to stop with the metaphors.

This probably sounds stupid if you've already grasped it, but one of the biggest stumbling blocks to proper HTML coding is messing up with the start and stop tags!  Just think of that: if you've already grasped this simple concept, you are AHEAD of many web designers who are putting out pages and pages of crappy code on our nice clean World Wide Web.  And a few minutes ago you were a novice! 

RULE TWO: LAST ONE ON, FIRST ONE OFF

Okay, that last rule was pretty easy, right?  So is this one.  If you turn on two tags to apply to one sentence, you need to turn them off in reverse order.  A simpler way of saying that is that the last tag you turned on needs to be the first one turned off.

Yeah, I realize it's hard to visualize what I'm saying.  Want an example?

The most common application of this rule is when you want a word(s) to be both bold and italicized.  (I don't really know how often you want to use bold AND italicized words in your stories, but that's a personal choice.)  Here's an example:

"My name is Diana, and my strapless bustier could fall off at any moment!" said the Amazon as the wind blew down her cleavage at mach 5.

Now, here's the coding of how I did that:

<p>"My name is Diana, <i><b>and my strapless bustier could fall off at any moment!</b>" said the Amazon as the wind blew down her cleavage at mach 5.</i></p>

The outermost tags, the <p> and </p> tags, told the computer to display that sentence as a separate paragraph. The second tag I turned on, the <i> tag, begins the italics.  It is immediately followed by a <b> tag which begins the bold.  The bold tag needs to be second (or as I like to think of it: "on the inside"), since it is the first one turned off.  The </b> tag appears at the end of Wonder Woman's sentence.  The italics continue to be applied to the sentence until they are turned off at the end.  Then, notice that the italics are ended before the paragraph is ended.

Why do I call the bold tag "on the inside"?  Because if you removed the sentence, you'd be left with this beautiful, symmetrical structure:

<p> <i> <b> </b> </i> </p>

PIBBIP!  It's a palindrome, written the same way forwards and backwards!  When you look at it that way, it's pretty easy to understand, isn't it?

Now, suppose you goofed up, and turned off the tags in the wrong order?

<p>"My name is Diana, <b><i>and my strapless bustier could fall off at any moment!</b>" said the Amazon as the wind blew down her cleavage at mach 5.</p></i>

In case you don't see the difference, here is what it looks like as code:

<p> <b> <i> </b> </p> </i>

PBIBPI?  It's not a palindrome.  More to the point, the code is harder to understand at a glance, harder to work with…and may malfunction in a lot of browsers!  In fact, I wish I could say that it just wouldn't work in browsers, but unfortunately that's not the case thanks to the dummy-proof browsers.  Still, I'd advise you to follow this rule as well and write your tags properly.

One more example, just as reinforcement.  This is the simplest version of the "last on, first off" principle.  I'll make all three tags apply to a sentence, so that you aren't confused by the content.

At Batman's signal, the Zamaron ship exploded in a startling burst of lavender!

CORRECT:    <p><b><i>At Batman's signal, the Zamaron ship exploded in a startling burst of lavender!</i></b></p>

INCORRECT:  <p><b><i>At Batman's signal, the Zamaron ship exploded in a startling burst of lavender!</p></b></i>

INCORRECT:  <p><b><i>At Batman's signal, the Zamaron ship exploded in a startling burst of lavender!</b></i></p>

REVIEW:

In this lesson, you've learned:

• How to make an HTML tag
• The three most common HTML tags you'll use in writing for Fanzing: bold, italics and paragraphs
• Rule #1: Finish What You Started.  Always turn off your tags.
• Rule #2: Last One On, First One Off.  Always turn off your tags in reverse order.

If you feel that you haven't grasped these bits so far, please re-read this page. 

If you're raring to go, continue on.  Before we go to the next section, however, there are a few "myths" to debunk.  A little bit of knowledge is a dangerous thing…and whereas the complete newbie will have learned HTML properly, some people who have seen or worked with HTML before may have some questions and misconceptions.  For them, I have the following.

Q&A:

Q.  Can't you use <strong> in place of <b> and <em> instead of <i>?

A.  Yeah, but why would you?  <b> and <i> are easier to type.  I've seen both forms of the bold and italics tags advocated.  For now, stick to <b> and <i>.  Should it ever become necessary to change them, I can do it easily in Dreamweaver.

Q.  Am I all ready to begin coding web pages now?

A. No, but you could begin formatting your existing stories, as I'll explain in the next section of the tutorial.

Q.  Why do we have to put </p> at the end of paragraphs?  I thought that wasn't necessary?  I've seen tons of web pages where they just put a <p> at the start and that's it.  Isn't it a waste of time?

A. No, it's not a waste of time.  Unfortunately, this is one of those "dummy browser" errors that has inflicted bad coding on web designers for years and years!  The begin and end paragraph tags were supposed to go at both ends of the paragraph.  However, when designers learned that it "worked just as well" on most browsers to put a <p> in between paragraphs, the </p> tag was abandoned as unnecessary.  Guess what?  It is most definitely necessary!

In fact, it is becoming mandatory!  In future versions of HTML and similar languages, it will be required that paragraphs be defined properly.  See, the <p> and </p> tags are defining the paragraph.  They are saying to the computer, "everything within these tags is a paragraph."  By eliminating the end paragraph tag, we've confused the computer.

What we (that's right, I've been guilty of this for years) have been doing all this time is using a descriptive language as a design tool.  All we wanted was for the paragraphs to appear with spaces in between them, which is what the <p> tag (or two <br> tags) achieved visually.  But we've been making an expensive mistake.  To the computer, entire novels written without proper <p> and </p> tags appear to the computer as one huge honking paragraph!  Speaking as a guy who has to go back through hundreds of existing pages, putting the </p> tag everywhere, I can tell you this: put in the </p> tag NOW and save yourself the headache later!

Q.  HEY!  I'm using this Arachnophilia program and it doesn't put in the </p> tag!

A. That isn't a question, silly.  But you're right.  It's the one problem with Arachnophilia.  Don't worry, I have an easy way to fix that.  I'll explain it later.

Q.  What are you going to teach in the next section?

A. Well, before we get into any more instruction on web page design, I thought I'd go over some additional things you'd like to know about how to format your stories.  For instance, how to split up paragraphs, how to put dividing lines into your story without using a string of asterixes, how to do a title and subtitle, and that kind of thing!

Q.  Will it be hard?

A.  Nah.   I'll just give you the codes and you use them wherever you need to.  I mean, if you grasped the concept of HOW the italics and bold tags worked, then all I'm doing is teaching you more tags.  You don't have to memorize them.  In fact, I'll give you a handy chart at the end of the tutorial.  You print that out, hang it on the wall and glance at it whenever you want to remember the coding for something.  So long as you now understand how to use the begin and end tags, you'll be able to use almost any tags!

Q.  Can I have ice cream when it's over?

A.  As much as you can eat!

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