Part 1: Tools
Part 2: Basic Code
Part 3: More Codes
Part 4: Basic Page
Part 5: Conversion
Part 6: Clean-Up
Part 7: Skeleton!
Part 8: Demo
Part 9: Style!
Part 10: Resources
Contributor's Central:Main Page
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:
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
(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.
You can see the difference:
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:
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>
In this lesson, you've learned:
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.
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.
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.3