HTML for Ninnyhammers
- or -
Everything you needed to know about HTML but were too frustrated to ask because you're damn sick and tired of being treated like a moron and you don't want to hear any more long, boring explanations that make little sense.

(c) 2000 by
Jim Farris

 

 

 

Table of Contents:

 

 

Overview and Scope of this Book:

Let's face it - you don't need someone sitting here and treating you like a complete moron just because they know something you don't. It's annoying, it's not helpful, and you just end up frustrated. Nor, by the same token, do you need someone with a PhD in Computer Science talking down to you like your head's full of nothing but cheese and always will be until you get a PhD, too. No, you're reading this book because you want to know how to get an image to appear on your website, or how to make frames, or what have you. You're not here to be made to feel like a moron. You may need someone to hold your hand when it comes to HTML, but you don't want to be made to feel like a two-year-old while they do it. That's why you're sitting there, reading this. You don't want long, drawn out explanations, nor do you want explanations that boil everything down to words of one or two syllables because the author figures it's the 21st century and if you haven't learned the stuff already, you must be a dolt.

So, I'm not going to beat about the bush.

The basic purpose of this book is to teach elementary HTML principles to those who know squat about HTML, and to serve as an easily-referenced work for those who do know a bit about HTML, but need to look up a certain basic HTML4.01 command they've forgotten. The book is designed to be "cut-and-paste" simple, with explanations brief, in plain language, and directly to the point.

That's it.

So how does it work?

Well, at the beginning of this book, there's a list of topics. Once the book is loaded into your browser, you can click the link to take you to the general topic you're interested in. In each section, there will be more links that you can click, which will take you directly to the topic you're interested in. So, you can sit there and read the whole book from beginning to end, or you can just click and read about the thing you want to know about. Each section will have a general overview, and then break down into the details of each part. To come back to the table of contents, just click the "back" button on your browser. And, by using your browser's "find text" command (Ctrl-F in Internet Explorer, for example), you can type in a keyword and click to search the whole document quickly and easily. Try that with your printed books on HTML, sometime.

Got it?

Good! Let's get to work!

 

Basic HTML Typographic Commands:

Overview:

Okay - when it comes to typing simple paragraphs and other straight text presentations, HTML is dreamy. Let's say you're typing at your favorite word-processor, trying to put together a presentation for the boss. In part of the presentation, you refer to the movie, Titanic (business isn't going well, I see). In your word processor, the sentence looks like this:

Mr, Johnson, if we don't if we don't raise our sales figures, it's likely that Acme Widgets will be remembered as the Titanic of the business world.

Well, you want to put the word Titanic in italics, because 1) It's the name of a movie, 2) It's the name of a ship, and 3) you want Mr. Johnson to realize you are really serious. What do you do? Well, in your word processor, you'd just hit CTRL+I, type T-i-t-a-n-i-c, then hit CTRL+I again to resume typing normal text. Right?

Well, HTML works exactly the same way. In fact, you'd type the code just like this:

Mr. Johnson, if we don't raise our sales figures, it's likely that Acme Widgets will be remembered as the <I>Titanic</I> of the business world.

See the first command, <I>? That's called an "opening tag", and it's the HTML command for italics. Now, see the second one, </I>? That's called a "closing tag", telling your browser that you're done with italics, for now. Simple, huh?

Oh, sure, I could lay a big long explanation on opening and closing tags and all that on you, but why bother? It's easier to simply remember that nearly every HTML command works like this - just like hitting CTRL+I or CTRL+B or whatever on your keyboard when you are typing into your usual word-processor, you have to hit the same button again to stop typing in bold or italics or whatever. It's really that simple. You don't even have to type it in capital letters, like I've been doing, here - I'm only doing that so it's easier to read and understand. <i> and </i> will work just as well as <I> and </I> - with very few exceptions, HTML is not "case-sensitive."

Paragraphs work the same way, really. When you start a paragraph, you begin it with <P>. When you close the paragraph, you close it with </P>. It's that simple. As far as basic typographic commands are concerned, the only exception is line-breaks - they don't need a "closing" command. You just type <BR> and move on.

Now, the corollary to this is the same as in your word processor. What happens if you hit CTRL+B while typing one word, then forget to hit it again and finish typing the rest of your manuscript? Answer: The whole manuscript, from that point on, is in bold, and it looks messed up. Well, it's the same thing for HTML. If you forget to use a closing tag, the last tag you used affects the rest of the document, and it looks messed up.

You see? Despite what you may have been taught to believe, HTML is not "Rocket Science." It's really very, very easy. Don't let yourself get intimidated just because it's not familiar, or get frustrated by some long and confusing explanation some "expert" gives you. It's really not that hard - particularly when it comes to the basic typographic commands.

There's only one word of warning, however: Currently, <U> and </U>, the commands for underlined text, are deprecated tags in the official HTML 4.0 specification from the W3C (World Wide Web Consortium). What does that mean? Well, it means that someday, it may disappear from the official specification for HTML.

Don't scream! I know you only just learned about them in the paragraph above and already they're obsolete (a pretty much normal situation in the world of computers), but it's nothing to worry about. All browsers will almost certainly still support it forever because of the concept of "Backwards Compatibility." There are literally billions of web-pages written with these commands, and no browser-company is going to want to offer a browser that can't read older pages properly. So, feel free to use the basic typographical commands of HTML whenever you wish - they aren't going away anytime soon, and your pages will still work (probably forever).

Okay, so why is it deprecated, you ask? Well, remember earlier when I talked about people with PhD's in Computer Science who often want to treat you like you're a moron when they talk about HTML? Well, the W3C is comprised almost entirely of Computer Science PhD's, and they figured that underlined text was entirely too difficult for people like you and me to tell apart from text that is actually a hyperlink. Yes, I know - if you've spent even ten seconds surfing the internet or reading this book, you're now yelling "DUH! You can tell by hovering your cursor over it!" Still, like I said, these people are like that. That's why this book exists.

 

Bold Text:

<B> text </B>
Type the opening tag <B>, then type the words you're wanting to appear as bold in your document, then type </B> to turn off bold lettering.

Italic Text:

<I> text </I>
Type the opening tag <I>, then type the words you're wanting to appear as italic in your document, then type </I> to turn off italic lettering.

Underlined Text:

<U> text </U>
Type the opening tag <U>, then type the words you're wanting to appear as underlined in your document, then type </U> to turn off bold lettering. Note - this tag is deprecated in the official HTML 4.0 specification.

Combined Text:

<B><I><U> text </U></I></B>
All of the above tags can be combined together. You can have underlined bold, bold italic, underlined italic, or even underlined bold italic text. Just remember to "turn off" the special text with the proper "closing" command after you're done, just like using CTRL+U, CTRL+I and CTRL+B commands in your favorite word-processor.

Line Breaks:

Text.<BR>
This command doesn't need a "closing tag", so don't worry. What it does is give you a single line break at exactly the point where it appears. It looks like this:

The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.

Notice how those lines are close together? Well, that's because of the <BR> command. All my paragraphs in this book are separated with the <P> and </P> commands, hence, they have a bigger space between them (and are more easily seen as being paragraphs). The <BR> command, however, gives you a single line-break. The code for the above lines looks like this:

The quick brown fox jumped over the lazy dog.<BR>
The quick brown fox jumped over the lazy dog.

Paragraph Breaks:

<P>The text of your paragraph goes here.</P>
This one is a simple one to remember. Each time you start a paragraph, type <P>. Each time you finish a paragraph, type </P>. What you'll end up with is paragraphs like what I have in this book, here. Single spaced, and easily readable.

Font Commands:

There are two basic font commands: Face and Size. Everything else, you do with the commands, above. Remember than when you're done with a font command, you have to use </FONT> to tell the browser you're done. Like with the Underline command, the FONT command is deprecated. However, again, this isn't something you should worry about - the FONT command will be with us for a long, long time.

Font Face:
<FONT FACE="Arial"> This would produce Arial text.</FONT>
While this seems pretty simple, it's important to remember that on the internet, not everyone will have all the really cool fonts you may have. The basic fonts that everyone is almost guaranteed to have are as follows:

Anadale Mono, Trebuchet MS, Georgia, Verdana, Comic Sans MS, Arial, Arial Black, Impact, Times New Roman, Courier New.

Incidentally, if you can't see one (or more) of the fonts in the paragraph above, click here to download the fonts you're missing (both Windows and Apple/Mac OS fonts are available).

Are there more fonts on the web? Yes - literally hundreds of thousands. And, most are free. However, not everyone will have your special (and possibly beloved) font, and if you create a webpage in it, it's likely that many (if not most) people who visit it will not see the page the way you intended.

Let's say, for example, I wrote a paragraph in one of my favorite fonts, "Alpha Centaurii". To me, it might look like this:

This is an image, incidentally.  I used it to make sure you'd be able to see the font.

To most people, however, it would just look like this:

The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.

So, always try to limit what you do to one of the ten fonts listed above - preferrably either Times New Roman or Arial. Also, remember to enclose the font name in quotation marks, exactly as I have it, above.

One last thing - remember how I mentioned earlier that, with very few exceptions, HTML wasn't case sensitive? Well, this is one of the exceptions. Some older browsers will NOT understand what font you mean unless you type the names exactly as I typed them, above. That means (for example) that "Times New Roman" will work, but "times new roman" will not, and "Times New" won't, either.

Font Size:
<FONT SIZE="2">This will produce text in what HTML calls "Size Two."</FONT>
Font size is pretty easy to remember. The "Default Size" is 3. There are two sizes smaller - 2, and 1. There's no size zero, sorry.
There are four sizes larger - 4, 5, 6, and 7. Font size 7 is as big as it gets, sorry. So, if you decide you want a larger or smaller font in your document, this is how you do it.

Font Color:
<FONT COLOR="#0000FF">
This will produce text in blue.</FONT>
This should probably be in the "Advanced" section, but I've put it here to make it easier to find. That funny string following the # sign is a hexadecimal (base sixteen) number that tells the browser what color to use. It has to be typed just like that - the # sign (which tells the browser this is a hexidecimal number), then the six digits which represent the number. Yes, I know - there are already those of you out there who are yelling "Argh! That's stupid! How come I can't just type 'blue' and have it work?" Well, you can - it works like this:

<FONT COLOR="Blue">This will produce text in blue.</FONT>

However, there's a problem: Some older browsers don't understand the plain English names of the colors. So, if you want to make sure everyone sees the right colors, you have to use the hexadecimal numbers.

Now, don't worry - we're not going to get into an enormously long, complicated and boring explanation. Instead, we're going to do this the simple way: Just copy and paste the line I have above into the document you're working on. Then, once you have it, use the Color Chart in this book to find the hexadecimal code (or plain English word) for the color you want, and paste it into your code over the code for "blue", above (unless "blue" is the color you wanted in the first place). Remember to keep the quotation marks at the beginning and end of the number (or word), otherwise your browser won't interpret the color command right. Save it, and you're done. To see the Color Chart, click here.

Combinations of the Above:
All of the font commands, above, can be combined together in one command, like this:

<FONT FACE="Arial" COLOR="Blue">This, for example, would produce blue Arial text in the default size for the document, usually size "3".</FONT>

<FONT FACE="Arial" SIZE="2">While this would produce Arial text in size "2" in the default text color for the document.</FONT>

<FONT COLOR="Blue" SIZE="2">Meanwhile, this would produce blue size "2" text in the default font face for the document.</FONT>

<FONT FACE="Arial" COLOR="Blue" SIZE="2">And finally, this would produce blue Arial text in size "2".</FONT>

You can also use the COLOR command to override the default colors of a hyperlink, which is usually set in the BODY command (see below). Let's say, for example, you have a hyperlink to my website, http://come.to/xaa - notice that in this document, that appears in black. The default colors for all hyperlinks in this book is black. But let's say that I wanted it to be blue, instead. Well, I'd do it like this:

<A HREF="http://come.to/xaa"><FONT COLOR="Blue">http://come.to/xaa</FONT></A>

Now, don't worry about that <A HREF> tag - we'll be discussing that later, in Advanced HTML Commands. For now, just know that it's the command to create a hyperlink, so that when people click that text, the browser pops over to my web-page. Anyway - the results of that line, above, look like this:

http://come.to/xaa

Notice that the text is blue, instead of black like all the other hyperlinks in this book. Also, if you click it, it stays blue - the COLOR command overrides the default colors for the link.

Text Alignment:

There are three basic text alignments - Left, Right, and Center. There's also a fourth, "Justify", which evenly spaces the words across the page in "full justification," but there's a problem - it doesn't work in older browsers. So, we'll just deal with the three that do work for everyone - Left, Right and Center. All three are part of the <P> command, though. Centering can also be accomplished with another, redundant command in HTML (see below).

Left:

<P ALIGN="left">This paragraph is left-justified.</P>

By default, all text is left-justified (just like everything in this book). However, should you need to use it, the format for this is above. Don't forget to use the </P> command at the end of all your paragraphs.

Right:

<P ALIGN="right">This paragraph is right-justified.</P>

I've yet to encounter anyone who has ever admitted formatting a page with right-justification anywhere on it. To the ordinary reader of English (and most of the Romance languages, for that matter), right-justification looks extremely odd, and is sometimes difficult to read. However, should you need to use it, the format for this is above. Don't forget to use the </P> command at the end of all your paragraphs.

Center:

<P ALIGN="center">This paragraph is centered.</P>

Centering of text is used a lot - and, there's even a redundant command to allow you to do it, intended for use with tables and such but often used for pretty much anything that needs to be centered. Normally, you will use the format above (remembering to use the </P> command at the end of all your paragraphs). However, the other way of accomplishing the same thing is to use the format below:

<CENTER>This sentence is centered.</CENTER>

The <CENTER> command, however, is overridden by any other aligment commands that appear after it. Remember to use </CENTER> when you want the text to return to the default alignment.

Indentation the Easy Way:

There are several different ways to do indentations, ranging from extremely easy to extremely hard. When you're just dealing with text, however, indentations can be easily accomplished using the <BLOCKQUOTE> command. Notice how in the paragraphs above, the text is indented? Well, I used the 'easy way' of the <BLOCKQUOTE> command. It works like this:

<BLOCKQUOTE>

<P>I typed the <BLOCKQUOTE> command before this paragraph, then typed these words. To return to normal indentation, I type the </BLOCKQUOTE> command.</P>

</BLOCKQUOTE>

Need two layers of indentation? Use two layers of blockquotes. Like this:

<BLOCKQUOTE>

<BLOCKQUOTE>

<P>I typed the <BLOCKQUOTE> command before this paragraph, hit the 'enter' key, typed <BLOCKQUOTE> again, then typed these words. To return to normal indentation, I type the </BLOCKQUOTE> command twice.</P>

</BLOCKQUOTE>

</BLOCKQUOTE>

Basically, each layer of the </BLOCKQUOTE> tag indents the paragraph one level. Believe it or not, this is the easiest way to do it. Other methods are, in my experience, harder.

So what do you do if you just want the beginning of the paragraph indented, but not the whole thing?

Well, you use the <P> command combined with a CSS 'style' command, like this:

<P style="text-indent:20.4pt"> Insert your paragraph here. I'll have to pad this a bit so you can see the indentation, however. Pad, pad, pad, stuff, stuff, stuff, babble, babble, babble, The Quick Brown Fox Jumped Over The Lazy Dog, She Sells Sea Shells By The Seashore.</P>

The above code creates this paragraph, below:

Insert your paragraph here. I'll have to pad this a bit so you can see the indentation, however. Pad, pad, pad, stuff, stuff, stuff, babble, babble, babble, The Quick Brown Fox Jumped Over The Lazy Dog, She Sells Sea Shells By The Seashore.

See how it works? You'll have to adjust the indent number to get the indent you want, but 20.4 is about right for 'size=3' fonts. The only problem with this is that not all browsers can see it - particularly older ones.

And yes, this is the easy way to do it - other methods only get harder from here on, and also don't work with all browsers. For example, the most commonly described method is to insert repeated &nbsp commands into your text, just after the <P> tag and before your text begins. &nbsp commands are explained in the next section, below. However, that method is extremely tedious, and again doesn't work in all browsers.

Blank Lines Between Paragraphs:

There are two basic ways to do this: The Easy Way, and The Hard Way. First, let's talk about when you would use this. Let's say for a moment that you have the following paragraphs:

This is my first paragraph.

This is my second paragraph.

Now, the code for that would look like this:

<P>This is my first paragraph.</P>

<P>This is my second paragraph.</P>

Now, let's say that, for some reason, you want extra space between those two paragraphs, so it ends up looking like this:

This is my first paragraph.

 

This is my second paragraph.

Well, as I mentioned above, there are two ways to get this effect - The Easy Way, and The Hard Way. Here's the Easy Way: Use the <BR> command. It works like this:

<P>This is my first paragraph.</P>

<BR><BR>

<P>This is my second paragraph.</P>

The result will look like this:

This is my first paragraph.



This is my second paragraph.

There's only one problem with this method: Some browsers may not interpret the <BR> command the same as yours, and what you end up with will be spaced slightly differently. Usually it's not a lot, but it annoys perfectionists immensely.

Okay, Now we talk about The Hard Way. It's not really "hard", but it may seem that way at first (though it's really not), and involves a "Special Character" (discussed more thoroughly, below). The way you do it is by creating a third paragraph in between the first and second - a blank paragraph. To do it, you use the HTML code for a "space", which is &nbsp. That's hard to remember, I think, so try using this mnemonic:

"& Now a Blank SPace"

...or "And Now a Blank SPace." It's not that hard to remember & (ampersand) is "And", as & is already shorthand for "and", as it is ("Black & Decker", "Cloak & Dagger", etc). So, while you're typing code and you realize you need a blank space, remember "&nd Now a Blank SPace" and you'll recall the code for it is &nbsp.

Anyway - the way you create a blank paragraph is with the following code:

<P>&nbsp;</P>

So, the code for our paragraphs above reads like this:

<P>This is my first paragraph.</P>

<P>&nbsp;</P>

<P>This is my second paragraph.</P>

This works because the &nbsp code forces the browser to insert a blank space, then your closing paragraph command forces a paragraph break. If you don't use the &nbsp code and just try sticking in a space with your spacebar, the browser will automatically collapse the extra space you want and it won't work. Remember to include the semicolon ;

"Special" and "Reserved" Characters:

Probably by this point, you're wondering how I manage to get < and > symbols in this book. After all, when you type them as raw code, anything caught between them vanishes. Well, the answer is by using the "Special Character" and "Reserved Character" codes for HTML.

You see, HTML has the ability to call up nearly any character in the standard ASCII character set. It does this by the use of codes, which tell the browser what character to show to you. For example, let's say I'm coding an HTML page about the wondrous and magical joys of owning a Volkswagen, and want to type the word Farfegnügen. Well, I'm on Windows with a QWERTY keyboard, so for me using my word-processor, I'd type F-a-r-f-e-g-n, then hold the ALT key and type 0252 on the number pad, let go of the ALT button, and POOF! The ü appears. I then type g-e-n, and we have it. I could also type the same thing while writing the HTML code for this page (which I did), and end up with the right letter.

However, HTML was written so it works with almost any keyboard, and in any OS - and some keyboard and OS combinations can't get a ü that easily. So, there's a lot of "Special" characters that HTML is capable of bringing up by code, which is useful when the person coding the page can't just poke a few keys and get the character they want. In HTML, to get the ü character, we call up the "Special Character" command set by typing &. We then follow it with the abbreviated name for what the ü character is, which is uuml. Then, we type ; to tell the browser we're done with the "Special Characters", and type the rest of the word. It would look like this, in code:

Farfegn&uuml;gen

If I wanted a Ü instead, I'd type &Uuml. Note that this is one of those "exceptions" to case-sensitivity in HTML that I mentioned earlier - these commands are case-sensitive.

Now, I'm not going to bore you to tears with an enormously long list of these commands. There are about a hundred or so of the silly things, and if you can read this, you're probably using a keyboard that can produce these characters, anyway, and don't need a list of how to pop them up in HTML. However, understanding them is important to understanding how we get four characters you will need to know how to get in HTML: &, ", > and <. When you want to have any or all of these three characters appear on a page (like when you're giving code examples, like I've done in this book), you have to use the HTML codes to get them. So, here are the codes:

Symbol

Code

&
(ampersand)

&amp;

>
(greater than)

&gt;

<
(less than)

&lt;

"
(quotation mark)

&quot;

Remember to include the ; symbol, the semicolon, at the end of each command. All of these are easy to remember. &amp; is what gets you the AMPersand, &gt; is what gets you the Greater Than symbol, &lt; is what gets you the Less Than symbol, and &quot; is what gets you the QUOTation mark.

Putting It All Together: Required HTML Declarations:

Overview:

Strangely enough, most of the "Required" declarations such as <HTML>, <HEAD> and <BODY> aren't really required at all by most browsers. If you save the file with an .HTM or .HTML extension, most browsers will automatically assume anything it's reading is HTML, and interpet the file accordingly. However, not all browsers are so obliging (particularly older ones), so you have to do it right, and use the proper HTML declarations.

DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
This line goes above the <HTML> tag, and should always be the first line of your code. What does it do? Well, it announces that the page you're coding is in HTML 4.01 specification (like everything else in this book), and that you're using the full specification, including deprecated tags (just like in this book), and that all the HTML commands are encoded in English (just like in this book). That's all.

While this is of limted use today (in fact, you can omit this line entirely and the page will still work perfectly well), in another 10 or 20 years, the specification for HTML will almost certainly be utterly and completely different. However, because there are literally billions of web-pages out there and most of them will never be updated, it's already been acknowledged by the browser manufacturers that "backwards compatibility" is essential for all future browser designs - this is one reason why the latest version of Netscape is so huge in filesize compared to the previous one, and why Internet Explorer just keeps getting bigger and bigger. So, this is a message to any future browsers that may come across your page to use the HTML 4.01 specification when reading your code - the same specification I'm teaching you in this book. Thus, if you use this line, your page will always be readable, even decades from now, when things in the computer world may be so completely different that HTML is considered "Stone Age."

HTML:
<HTML> your page goes here </HTML>
The second line of any HTML page you code, the one following the DOCTYPE declaration, should always be <HTML>. The last line of any page you code should always be </HTML>. Everything else goes in between these two lines. Why? Well, to tell older browsers that they're looking at an HTML page.

HEAD:
<HEAD> header info goes here </HEAD>
An important declaration if you're going to include things like a page title or automatic redirect, the <HEAD> declaration follows the <HTML> declaration, and is closed by the </HEAD> declaration. In it, information such as the character set used and any special interpretation information is kept.

'Charset' Declaration:
With nearly every page you create, you should include a "charset" declaration, telling the browser what character set to use when interpreting the code you've written, and how to display graphics. If you don't have it, the browser will use it's default settings, which may be screwy or outdated. The full explanation of how and why this command works is long, extremely technical, extremely dull, and completely unnecessary because the only reason you'll normally need it is to adjust for older browsers looking at your page, or web-surfers who are using a foreign-language browser (who probably won't stay at your page long, anyway, unless they speak English, themselves). So, just copy and paste this command below the <HEAD> tag and above the </HEAD> tag, and don't worry about it.

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

So what does that line mean? Well, that line tells the browser that it's going to be looking at a normal webpage, it needs to use standard Anglo/Latin characters, and inlined graphics are meant to be displayed on the page (just like how this book is set up). That's it.

TITLE:
The next thing that usually goes between the <HEAD> and </HEAD> tags is the <TITLE> and </TITLE> tags. These tags allow you to display the title of your page across the top of the browser window. For example, if you'll look to the top of this window, you'll see "HTML for Ninnyhammers - (c)2001 Jim Farris, All Rights Reserved". That's the page title. The code for it looks like this:

<TITLE>HTML for Ninnyhammers - (c)2001 Jim Farris, All Rights Reserved</TITLE>

Keywords and Description:
Keywords and Descriptions used to be critically important for high placement in the best search engines. Now, they're not very important at all. Since pretty much everyone who wanted a halfway decent ranking was including "sex", "hot" and "new" in their keywords and stuffed their description with every word they could possibly think of that even might slightly be relevant, eventually the search-engine companies got smart, and made Keyword entries far less important in ranking for relevance of a page. Now, it's the content of the page itself that determines the rating of a page on most search engines - which, I suppose, is the way it should have been in the first place. However, if you want to have keywords on your page (and certainly having a few good keywords doesn't hurt), this is how you do it:

<META name="keywords" content="text, text, text">

Replace "text" with the keywords you want, remembering to separate each keyword with a comma, and enclose them all in quotation marks, just like I did, above.

Page Descriptions are are a little different. Here, you can write a description of what your page is about. It can be of any length, but the one limiting factor is you can't use quotation marks inside the description, because that's what marks the beginning and end of the description in HTML. Again, this used to be an important thing the search engines looked for when indexing pages. Now, it's not - some search engines don't even index your descriptions anymore. However, some still do, so here's how you do it:

<META name="description" content="Just type a description of what your page is about in between these quotation marks, here.">

Well, that's it for the <HEAD> tag. The special META commands I list below go between the <HEAD> and </HEAD> tags, as well, but these are the basics.

BODY:
The <BODY> and </BODY> tags are, when it comes to the 'Required Declarations', probably the most important. The <BODY> tag is always placed right after the </HEAD> tag (which makes sense, when you think about it), and the </BODY> tag is always placed just before the </HTML> tag. The content of your page (the stuff people will read) goes between the <BODY> and </BODY> commands.

The <BODY> tag is also where you set the basics of page structure - what color the page is, what color the text is, what color the links are, and so on. Now, I could probably take a very long time and talk about hexadecimal numbers and color declarations and all sorts of really confusing stuff, but I don't see much need to. So, this is how we're going to do it - copy and paste the line below into your page:

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

See where it says "bgcolor"? That's the background color. See where it says "text"? That's the color of the text. And "link" is the color of your hyperlinks before they are clicked, "vlink" is the color of hyperlinks a visitor has already been to (a 'visited' link), and "alink" is the color of links that have been clicked (an 'active' link). The code above will make your background white, your text black, all your links blue, visited links purple, and active links red - just like most pages on the internet (but not this book - in this book, all links are black because I have so many of them, the page looks too "busy" when they're different colors).

Now, these color declarations work throughout the entire document - once set, they're considered the "default" colors for the page. You can change the color of a specific line of text using the <FONT> command, and then go back to the "default" colors by using the closing tag, </FONT>.

Okay, so what do you do if you want different colors than white background, black letters, blue, purple and red links? Well, replace replace the codes, above, with the colors you want. Just copy and paste the hexadecimal numbers (or the plain English names) from the Color Chart over the colors you want to be different. To see the Color Chart, click here.

Incidentally, you can insert a background picture onto your page with the <BODY> tag. To do it, use the following code:

<BODY BACKGROUND="filename" bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

This works exactly like the <IMG> command, incidentally, which is explained below. Make sure your text can be seen on top of the image you use - it's no good if people can't read your page. Clear contrasts are important - many people have vision problems.

How To Create A Simple HTML Page:

Yes, that's right - the part you've all been waiting for! How to actually USE everything I've said, above!

Well, the first thing you need to do is get your page setup. Opening your favorite text editor, copy and paste the lines below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Insert the title of your page here</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">



</BODY>
</HTML>

And that's a basic page. Now, all you have to do is put the 'title' you want in, scroll down to between the <BODY> and </BODY> tags, and start typing, just like I showed you above. Use <P> to begin a paragraph, </P> to end a paragraph, and so on. Want a really big title centered at the top? Use the <FONT> commands, above, on your first paragraph, to center it and alter the size of the font.

That's all there is to it. You see? Like I said before - despite what you may have been told by other people, HTML is not "Rocket Science."

Advanced HTML Commands

Overview:

Alright, now we get into the stuff that's a bit more complicated. In all cases, however, remember that this isn't "Rocket Science." Relax - HTML is still very, very simple, and this stuff is only complicated because people make it that way. Just relax, read the explanations, and don't be afraid to "copy-and-paste." That's what I made this book for. What, you think I type everything out by hand, myself? Hoo-ha! Sorry to burst your bubble if you did, but no, I don't. In truth, nobody does, really. It's far too time-consuming. So don't be afraid to just copy what you see below and modify it to work on your pages - that's what this book is for.

In the section below, everything is divided into two basic parts: The Overview, The Basics, and How To Do It. In the first part, I chat a bit about the subect. In the second part, I give you a simple, plain-language explanation. In the third part, I give you stuff you can copy and paste. Feel free to skip right on down to the "How To" part if you already know how something works, and just want to see code-examples you can copy and paste.

Hyperlinks:

Hyperlinks are the basis of the web.

No, seriously. Hyperlinks are the basis of the web. Linking one page to another is the essential defining element that makes the whole Internet and World Wide Web work. Hyperlinks are often the most common thing beginners screw up, because nobody wants to give a simple explanation for what they do. Instead, we have to hear long, complicated explanations that are boring as hell, full of a lot of lovely philosophy about the interconnectivity of the web and the historic rate of information exchange hyperlinks allow - all of which are completely useless if all you want to know is why your hyperlinks aren't working.

So, we're going to cut right to the chase:

The Basics:

All hyperlinks follow this basic format: <A HREF="targetURL">text</A>

The 'A' part means 'Anchor'. Now that I've told you that, forget it. It's completely useless information, and was only invented by the HTML Gods to confuse you. I only mentioned it because everyone who first starts with HTML wonders what the 'A' is for. The 'HREF' part stands for Hypertext REFerence. And now that I've told you that, forget it, too. It's completely useless information that everyone wonders about but has no real application to anything. All you need to remember is this: <A HREF="targetURL"> is the Opening Tag that starts a hyperlink, you need some text following it that people can click on, and </A> is the closing tag that ends it. It's that simple.

Now - notice where it says "targetURL"? Well, that's where you want the browser to go to when someone clicks the link. URL, incidentally, stands for Uniform Rescource Locator. And, once again, now that I've told you that, forget it. It's completely useless information that everyone wants to know when they first start working with HTML, but it has no bearing on anything at all. Just remember that URL means 'address', and is the location of the page you want people to go to. That's all it really means.

Now - notice where it says "text"? That's the link-text. For example:

Jim's Webpage

http://come.to/xaa

See those links? Well, they both go to the same page - my homepages. Here's the code for each of them:

<p align="center"><a href="http://come.to/xaa">Jim's Webpage</a></p>

<p align="center"><a href="http://come.to/xaa">http://come.to/xaa</a></p>

See? The only difference is the link-text. The first tells you where the link is taking you, while the second tells you the URL. I could have just as easily typed something obscure, like "Click Here" or something totally inane, like "CLICK NOW FOR COOL STUFF!" Any text you want can be put as the link-text - but you have to have the link text, or people can't click the link and go where you want them to go.

Now: Here's the part everyone seems to screw up on the most often, at first. Notice how the URL is formatted HTTP:// and then the rest? Well, it has to be like that. Exactly. HTTP, a colon, two right-slashes. HTML is completely and utterly unforgiving about this - if you only have one slash, the wrong slash, too many colons, or anything else isn't exactly right, it won't work. It doesn't have to be capitalized, but it has to be typed correctly. In addition, most servers on the internet are Case Sensitive. That means if you are trying to reach http://xaa.tripod.com/redirect.htm and you type http://xaa.tripod.com/Redirect.htm - it doesn't work. Try it! The first link will take you to my pages. The second will give you an error. Why? Because the page you're trying to reach on Tripod, 'redirect.htm', is spelled all in lower-case, and Tripod's servers are Case-Sensitive.

However - there's some good news. There is one exception to this extremely picky nature of hyperlinks: Anytime you are pointing to another page that is in the same directory/folder as the page your visitor is currently on, you don't need to type "HTTP://". In fact, if it's in the same directory/folder as the current page, all you need to type is the file name instead of the full URL.

And, there's even more good news: Notice how, all throughout this book, you've been able to click links and pop around on the same page? Well, that's called an 'anchor' - sometimes also called a 'bookmark'. Yes, I know, some of you are saying "Hey, but didn't you say above that a hyperlink is an anchor?" Well, that's why I told you to forget it, remember? HTML has several terms that are like this - one word that covers two (or more) different things. There's no reason for it, really. The designers of HTML, all PhD's in Comp Sci, apparently just enjoyed being obtuse. When I say 'anchor', I mean exactly what you see in this book - hyperlinks that you can click that take you to different parts of the same page.

So how does it work?

Well, there are two parts: The Hyperlink, and The Target. The hyperlink is formed like this:

<a href="#AnchorName">text</a>

...and the target is formed like this:

<a name="AnchorName">optional text</a>

Now - notice that "AnchorName" is exactly the same. Whatever name you give to the anchor and the link that will pop people to it, the name has to be identical. Notice the # mark? That tells the browser to pop to an anchor on the page that has the following name. And, finally, see where I typed 'optional text'? Well, you can have text in that location (usually the first word or two of the paragraph that the anchor marks), or you can simply leave it blank. No matter which you choose, the browser will immediately scroll to the physical location on the page that the anchor is located in.

Here's an example of the above code, in use.

text

 

optional text

Click the link, and the browser will pop down to the line that reads "optional text", above.

And here's an example of the code without any text: Click this link here, and the browser will go back up to the blank line between these two paragraphs, above. Notice that because there's no text, the blank line will be scrolled off the screen, and the lines at the top of the window will be the beginning of this paragraph.

Hyperlinks can be used to link to any file, not just other webpages. To do this, you give the URL for the file instead of a URL for an HTML page. As above, if the file is in the same directory as the page the viewer is looking at is, then you only need the file name.

For example, in the same directory this book is in, there should be a picture called "htmlfo1.jpg" - it's the example picture I used in the "Font" discussion, earlier. I could use the following code to allow people to load it separately, instead of inline with the tex:

<p align="center"><a href="htmlfo1.jpg">Click Here To Download The Picture</p>

The code, in place, would look like this:

Click Here To Download The Picture

Now, depending on your browser's configuration and manufacturer, one of two things happened when you clicked that link. Either 1) You immediately popped to another window and all you saw was that picture of "The Quick Brown Fox" text and you had to click the 'back' button to return to reading, or 2) You got a little "pop up" from your browser that asked you if you wanted to open the file from it's current location, or save it to disk. However, I could have used any file I wanted in that hyperlink - a program, a .zip archive, a sound file, anything.

Okay - now, there are times when you will want to not have the window people are looking at go away. Instead, you might want a new window to open when people click on a link. To do that, you give the window a name. This name won't be seen anywhere, it'll just be an internal name that the browser uses to refer to the new window. To do this, you form the hyperlink like so:

<p align="left"><a href="htmlforninnyhammers.htm#SeeWhatIMean" target="WINDOWNAME">Click Here To See What I Mean</a></p>

Notice that I am allowed to add the # sign for an achor, because I'm calling up an HTML page. It goes right after the file name of the page (you can also do an HTTP:// URL that way, too). And here's what the code would look like on a page:

Click Here To See What I Mean

Go ahead and click the link, and see what happens.

If you have a browser with a standard configuration, you should now see a second window open, and be looking at this line both in your original window, and in the new one. If not, you'll just see the top of the book in a new window.

Now, you can use pretty much any name you want to call your new window. Every time you use a different name, a new window will open. If you use the same name with different hyperlinks, however, you can load new stuff into the window you've already opened - useful when loading images or music, which is discussed a bit later. There are also some "reserved" names (several, in fact), but the only one of any real use to a beginning HTML coder is "_top" (spelled just like that, with an underscore, and all lower-case). What that does is tells the browser to load in the same window you're looking at, at the top of the window - in other words, breaking out of any frames you may be in.

And finally, another thing you can do with hyperlinks is create a link that allows people to send you e-mail with one click of the button - this is extremely convenient, as it means they don't have to type in your e-mail address. The basic format is like this:

<A HREF="mailto:yourname@yourISP.com">text</a>

For example, here's an e-mail link to reach me:

xaa@3lefties.com

The code for that is as follows:

<p align="center"><a href="mailto:xaa@3lefties.com">xaa@3lefties.com</a></p>

You can also force the "subject" line of the e-mail, like this:

<p align="center"><a href="mailto:xaa@3lefties.com?subject=Enter_The_Subject_Here">xaa@3lefties.com</a></p>

The above code will produce the below effect:

xaa@3lefties.com

Notice that the spaces in the subject line are underscores. This is important - many e-mail programs won't work right if you don't do it like that.

And that's the basics of Hyperlinks.

How To Do It:

To link to another page on the internet on another website or in a different directory/folder than the current page:

<A HREF="http://targetURL">text</A>

To link to a file or another page on the same website and in the same directory/folder as the current page:

<A HREF="filename">text</A>

To link to an anchor on the same document:

<a href="#AnchorName">text</a>

<a name="AnchorName">optional text</a>

To link to an anchor on another page on the internet on another website or in a different directory/folder than the current page:

<a href="http://pageURL#AnchorName">text</a>
(make this line match the name of an anchor already on the page you're linking to)

To make any of the above hyperlinks open in a new window, add the TARGET command, and a window name:

<A HREF="http://targetURL" TARGET="WINDOWNAME">text</A>

To make a hyperlink that sends mail:

<A HREF="mailto:yourname@yourISP.com">text</a>

To make a mail hyperlink where you force the subject line:

<A HREF="mailto:yourname@yourISP.com?Enter_the_subject_here">text</a>

Images:

Images are pretty basic to web-pages - if you've seen at least one HTML page on the internet, you've probably seen an image, too. In fact, you've probably seen a lot. Over-use of images is probably the biggest mistake a beginner to HTML will ever make. Remember that the more images you have on a page, the slower it loads. Put too many images on a page (or just one too many large ones), and people will get tired of waiting for your page to load, and will go elsewhere. And by 'large', I'm not talking about how big it looks in the window - I'm talking about the size of the file itself. As a general rule, for smallest image sizes, use .GIF format for black & white (or monochrome) images, and .JPG format for color images.

The Basics:

Inserting an image into your webpages is easy - you use the IMG command. The basic format looks like this:

<p><IMG SRC="filename" WIDTH="X" HEIGHT="Y"></p>

Note that the IMG command does not have a 'closing tag'.

Okay - see the part that says SRC? That's the source, the filename of the image you want to appear. Now, just like Hyperlinks, you can just type the file name if the image is in the same directory/folder as the page it's going to appear on, or you can state a full URL for images that are located elsewhere.

However, you should not call up images that are on someone else's website, or on your website but at a different domain. It's called "Cross-Loading", it eats up enormous amounts of bandwidth, and web-site providers have been known to take a dim view of it. This means (for example) if you have pages at http://www.tripod.com you should not be calling up images stored on http://www.geocities.com - or vice-versa. Even if they're your own images on your own sites. Both of those hosts, and in fact nearly every web-host on the internet today, prohibit "Cross-Loading" in all forms. They can get mad and take away your website. Don't do it.

Anyway... Notice where it says WIDTH and HEIGHT? X is image width, in pixels, and Y is image height, in pixels. This can be determined by whatever image-manipulation program you have to edit images (such as Paint Shop Pro, found in the Links section, below). Simply open the image in your image-editing program, then follow whatever instructions are provided in the 'help' file for that program to find out the image information. You should, whenever possible, state the correct image height and width - it helps your pages load faster. The default resolution in HTML is 100 pixels per inch, incidentally, and can't be changed. Did I mention that the Comp Sci geniuses that designed HTML were all Americans? Well, they were. While this is no problem for me and about three quarters of the people on the internet, for the rest of the world, one inch is 2.54 centimeters. Keep that in mind, incidentally - all pixel resolutions in HTML are the same, 100pixels per inch, or a bit over 39 pixels per centimeter. There are two basic ways to do images - the first is to have all images that a page calls up in the same directory as the page itself. The second is to have a sub-folder for all images in your site, put all your images in it, and call them up from that sub-folder. How you create a sub-folder depends on your web-space provider - ask them. However, once you have an 'images' sub-folder created, you would call up files from it like this:

<p><img src="/images/filename" width="X" height="Y"></p>

The simplest method is to just have the pictures you want to appear on each page in the same directory as the page itself - that way, you just type the filename of the image you want to appear between the quotations for the image source, and all your image files that go with any particular page are easy to find. If you have lots of subdirectories for various purposes (like with a company website), you'll probably want to use a common image folder.

Notice that I've enclosed the image in <P> and </P>, making it a paragraph. Well, there's a reason for this - one can align the image using the <P> tag's text alignment commands. In fact, this is the easiest way to align an image.

For example:

<p ALIGN="left"><img src="HTMLforninnytrees.jpg" width="254" height="222"></p>

The above code would produce an image like this:

Trees to the left of me!

<p ALIGN="right"><img src="HTMLforninnytrees.jpg" width="254" height="222"></p>

The above code would produce an image like this:

Trees to the right of me!

 

<p ALIGN="center"><img src="HTMLforninnytrees.jpg" width="254" height="222"></p>

The above code would produce an image like this:

Trees front and center of me!

Another thing you can do with images is wrap text around it. This gives your HTML page the 'look' of a printed book. This is done by using the same 'ALIGN' command as you do text alignment within the image command. The text itself can have a separate alignment given by the <P> command.For example, let's look at the following HTML code:

<P ALIGN="left"><IMG SRC="HTMLforninnytrees.jpg" ALIGN="left" HSPACE="5" WIDTH="254" HEIGHT="222">text</p>

 

Wrapping Trees!Notice that the text here is wrapping to the right of the image. Notice also that the text itself is left-aligned, so that the left-hand side of the text is against the image itself. Putting ALIGN="left" inside the IMG command means that any text that follows within the same paragraph will be to the right of the image, aligned however the <P> command specifies text should be aligned for this paragraph. Notice also that when the text finally overruns the image, it then pops down below it, aligning itself to the left-hand side of the image - the text alignment in this paragraph is "left". Finally, notice the HSPACE command. That's the amount of space that you want inserted on the horizontal sides - this keeps images from bumping into other things, like text. The corallary is VSPACE, which does the same thing for an image's vertical spacing. And, of course, if I wanted the text centered or right-aligned, or if I wanted it to wrap around the right-hand side, I could just change the specifications in the line, above.

Oh - and all this is indented to make it easier to see the effect, as well, but that's not as important.

An image can also be declared to be a hyperlink - the color of the border will be whatever you have set as the defaults for hyperlinks in your document. Thus, people can click an image, and by the color change, see that they've already tried that link when they return to the page, later.

So how is it done? Well, remember that nearly all HTML tags are 'stackable'. Like hitting CTRL+U, CTRL+I and CTRL+B in your word processor to get bold italic underlined text, you simply add the <A HREF> command to the line that produces the image. For example:

<p align="center"><A HREF="http://come.to/xaa" TARGET="WINDOWNAME"><img src="HTMLforninnytrees.jpg" width="254" height="222"></A></p>

The above code produces the result, below:

Hyperlinked trees!

Notice that the image now has a border - it's in black, because all hyperlinks in this document are black.

Anyway... You can also specify a border for an image without making it a hyperlink. That's done like so:

<p align="center"><img src="HTMLforninnytrees.jpg" BORDER="2" width="254" height="222"></p>

The above code produces the below image:

Bordered trees!

You can also make a hyperlinked image have no border by specifying BORDER="0". Unfortunately, the border color of images cannot be altered with the FONT command, like you can for an ordinary hyperlink - yes, I know, you're probably sitting there and wondering "Why not?" Well, it's just the way they made HTML, unfortunately. Remember - the people who made this figured you were really dumb, and wouldn't be able to tell the difference between a bordered image and a hyperlinked image if the colors of the hyperlinked image's border could be hidden. They let you hide the border altogether by defining it's width as "0", but that's it.

Anyway... Of course, all the above effects can be combined together, like so:

<P ALIGN="left"><A HREF="http://come.to/xaa" TARGET="WINDOWNAME"><IMG SRC="HTMLforninnytrees.jpg" ALIGN="left" BORDER="6" HSPACE="5" VSPACE="1" WIDTH="254" HEIGHT="222"></A>text</p>

Hyperlinked Trees!Notice now that the image has a thick border. The thickness is from the use of the BORDER command (the usual default for image borders is two pixels, I specified six). Again, my hyperlinked border is black. In your documents, however, the border will be whatever your default color is for hyperlinks. Also, just as with any ordinary hyperlink, when you make an image a hyperlink, whatever colors you have for hyperlinks will apply to the border of the image. So, if your hyperlinks change color when visited or active, so will the image borders. Of course, everything we learned about hyperlinks, above, can still be used, here - we can open a new window, call up files, anything we like.

And, finally, you can add text to the image that appears when someone hovers their cursor over it. You've probably noticed this on all my pictures, above - well, that's the ALT tag, which is a part of the IMG tag. It works like this:

<p align="center"><img src="HTMLforninnytrees.jpg" ALT="Enter the text you want here." width="254" height="222"></p>

The above code produces the image, below:

Enter the text you want here.

And that's the basics of images.

How To Do It:

To insert an image in a page where the image is in the same directory/folder as the page itself:

<P><IMG SRC="filename" WIDTH="X" HEIGHT="Y"></P>

To insert an image in a page where the image is in a different directory/folder or on a different website entirely:

<P><IMG SRC="http://yourURLgoes.here/filename" WIDTH="X" HEIGHT="Y"></P>

To align an image left, right, or centered:

<P ALIGN="zzz"><IMG SRC="filename" WIDTH="X" HEIGHT="Y"></P>
(replace "zzz" with "left", "right" or "center", as required)

To make an image a hyperlink:

<P><A HREF="targetURL"><IMG SRC="filename" WIDTH="X" HEIGHT="Y"></A></P>

To make an image have no border:

<P><A HREF="targetURL"><IMG SRC="filename" WIDTH="X" HEIGHT="Y" BORDER="0"></A></P>
(you can also make an image have a wider border by specifying a number larger than 2 for BORDER)

To make text wrap around an image:

<P ALIGN="aaa"><IMG SRC="filename" ALIGN="bbb" HSPACE="zzz" WIDTH="X" HEIGHT="Y">text</p>
(replace "aaa" with the alignment you want the text to have, "bbb" with the opposite of the side you want the text to wrap around, and "zzz" with the space you want between the image and the edge of the text)

To make text appear when the cursor hovers over the image:

<P><IMG SRC="filename" ALT="Enter the text you want here." WIDTH="X" HEIGHT="Y"></P>

Sound and MIDI files:

Everybody, it seems, has to have a MIDI or sound file on their pages. Aside from the same load-time considerations you have with images, above (I.E. if your sound file is too big it makes the page load slowly), there's another important thing to consider that hardly anyone thinks about when it comes to sound files: Copyright.

Despite how many pages you may have seen that have the Titanic Theme or X-Files Theme on them, that music is copyrighted. You aren't legally allowed to use it on your pages without the permission of the copyright holder.

Yes, I know - there are those of you out there who are now yelling "So What? They'll never catch me!" Well, the fact is that eventually, they will. There are several "Sound Archives" on the internet who've discovered that they can no longer carry their 'Simpsons' sound files - a very tersely worded letter warning them of copyright infringement from a very powerful batch of attorneys convinced them to pull the files off their site. There are also groups that have been hired by various artists to surf the internet, looking for their music. Whether you agree with copyright laws or not, the reality is they exist, and they're not likely to go away anytime soon. And, as a general rule of thumb, if the music was written 75 years ago or less, then someone owns the copyright.

So what can you do if you want sound or music on your site and don't want to infringe on the artist's copyright?

Well, there are many, many artists out there on the internet who offer music for use in webpages - most offer it entirely free, only asking for a link back to their website. Some ask that you get permission, first, and place a copyright notice at the bottom of your page to protect their rights. Others charge a small fee for the use of their music. There are even composers out there who will create any kind of music you want, unique to you and your webpages, and simply charge you a one-time flat fee to use the music on your pages. Some will even do it for free, if you give them a link back to their site. And, of course, there are also "Archive" websites of copyright-free sounds and MIDI files that are available. Surf around - they're out there, and many are very, very happy to have their work spread around on as many webpages as possible.

The Basics:

There are three basic types of sound files you can put on your webpages: WAV files, Mp3 files, and MIDI files. First, let's explain what each type is:

A WAV file is a digital recording of a sound. It can be anything - music, speech, a sound-effect, whatever. The file itself is a long string of 1's and 0's which represent the sound itself, and by it's format, your computer's media-player program knows how to reproduce it through your computer's speakers for you. Generally speaking, the higher the quality of the sound, the larger the file is, because the more data there is in it. Also, generally speaking, WAV files are rather large.

An Mp3 file is a special compression format of a WAV file. In theory, you can store an enormous amount of information on much less disk space. In practice, it depends on the compression level of the file - an Mp3 with a lot of compression doesn't sound much better than a WAV file, really. Though it's claimed that Mp3 is "CD-Quality", this varies by the compression level. A WAV file of 3 minutes of music recorded at true CD-Quality can easily eat up 56 meg of disk space. An Mp3 recorded at the same sound-quality level will take up about half that. Most Mp3 files are recorded at a much higher compression, however, and take up far less space - typically, a 3-minute long music file takes up about 3 meg. However, the sound-quality is necessarily less. At the far end of compression, a 3-minute Mp3 can be squeezed down to about 300K - but the sound quality is atrocious.

MIDI stands for Musical Instrument Digital Interface. It's a file format, used to electronically record the performance of a piece of music, not the music itself. You see, a MIDI file is not really a sound file at all. Instead, it's a series of instructions, which tell your computer how to manipulate your sound-card to produce the music in the file. So, if you have a top-end sound-card or a soft-synth and you play a MIDI, it will sound exactly like real instruments. If you have an average or poor sound-card and no soft-synth, it will sound like Mel Blanc's old "Rubber Band" joke. MIDI cannot reproduce the human voice or incidental sounds - it's all a list of instructions, and based on a pre-set list of instruments that your computer knows how to ask the sound-card to play. In other words, to your computer, the instructions look like this: "Using this instrument, play this note for this long. Then, using this instrument, play this note for this long..." It's all done very fast, and a good midi on a good sound-card or soft-synth can, in truth, often sound better than the original song did. The advantage to recording the instructions for how to play the music rather than the sound of the music itself is that MIDI files are, in general, much smaller than WAV or Mp3 files. For example, a 3-minute song in MIDI format can take up as little as 8K, if there's not a lot of notes in it. And little MIDI files like that load in seconds - ones below 4K load almost instantly. The disadvantage to MIDI is that you can't control how it sounds on anyone's computer - if they have a good soundcard or a soft-synth, it will sound great. If they don't, it often won't.

There are two basic ways people use Sound and MIDI files on web-pages: The first is as a file that one clicks to download the music and listen to it. To do that, you just make a hyperlink that points to the file - see Hyperlinks, above.

The other way - and the most common way - people use Sound and MIDI files is as 'Background Music' for their web-pages. Now, there are several different ways to do this, which we'll cover one at a time. None of them are hard at all, really - but, for the most part, you can't use them all on the same page at the same time. Pick one method, and stick with it.

The first method is that used by Internet Explorer - if you use this method, about 80% of the people on the internet who run across your pages will be able to hear the music automatically. Internet Explorer recognizes a command called BGSOUND. BGSOUND is always placed below the <HEAD> and above the </HEAD> tags, and nowhere else. When an IE browser runs across a page with a properly-formatted BGSOUND tag, it plays the music invisibly in the background, while the surfer reads your page. There's no visible controls at all, but the music can be stopped by hitting the 'ESC' key, or clicking the 'STOP' button. The format is like this:

<BGSOUND SRC="filename" LOOP="X">

See where it says SRC? Well, as with the IMG command, that's the source of the sound or MIDI file - the filename, if it's in the same directory as the page you're looking at, or the URL to find the file if it's not. Again, as with images, don't link to files on other sites, even if you do own both sites - that's "Cross-Loading", and your web-hosts may get annoyed with you and cancel your site. LOOP is the number of times you want the music to repeat before it stops - usually a number between 1 and 32767. If you want it to never stop, replace "X" with the word "infinite", rather than a big number. If you only want it to repeat once, just replace "X" with "1". Note that BGSOUND has no "closing tag."

Now, if you use this method, about 20% of the people who visit your page won't hear a thing, because they're on Netscape or some other browser. To set it up so they, too, can hear the music, just create a hyperlink they can click that will open the file in another window.

The next method is that used by Netscape and most other browsers - if you use this method, everyone will hear the music you have, if they have a soundcard and working speakers and haven't disabled sound in their browser. The method uses the <EMBED> command. The basic format is like this:

<p><EMBED SRC="filename" BORDER="0" WIDTH="0" HEIGHT="0" AUTOSTART="TRUE" LOOP="TRUE"></p>

Again, SRC is the source of the music - either the filename if the music file is in the same directory as the page is, or the URL to find it. BORDER is like with images, and determines the border around the player, which will appear as an embedded object, just like an inline image. WIDTH and HEIGHT are the width and height of the player. To make the player invisible, set both to "0". To make the player visible, make them larger - usually a width of 75 and a height of 40 is adequate. AUTOSTART tells the browser whether or not to start playing the music automatically, or whether it should wait until the "play" button on the player is clicked. If you make the player invisible, this should always be set to "TRUE", otherwise nobody can play the music. If you make the player visible, you can set it to "FALSE", and the music will load, but not play until the "play" button is pressed. LOOP is whether or not the music repeats once it reaches the end - if you want it to just play one time and then stop, set it to "FALSE". If you want the music to play infinitely, set it to "TRUE". And finally, like images, you align the player called up by the <EMBED> command using the text-alignment properties of the <P> command.

For example, let's look at the following code:

<p align=center><embed src="Janet.mid" border="0" width="75" height="40" autostart="FALSE" loop="TRUE"></p>

The above code produces the effect, below:

Oh - and in case you're wondering, the music is an audio portrait of a friend I made, and the music is (c)2000 Jim Farris, All Rights Reserved.

And that's it for sound files.

How To Do It:

To insert background music that will play automatically in Internet Explorer:

<BGSOUND SRC="filename" LOOP="X">
(insert this line below the <HEAD> tag and above the </HEAD> tag, replacing "X" with either "infinite" or the number of times you want the music to loop)

<p><font size="1">Netscape users - click <a href="filename" target="MUSICWINDOW">here</a> to hear the music for this page.</font></p>
(insert this line anywhere below the <BODY> tag and above the </BODY> tag)

To insert background music that plays automatically and invisibly in all browsers:

<p><EMBED SRC="filename" BORDER="0" WIDTH="0" HEIGHT="0" AUTOSTART="TRUE" LOOP="TRUE"></p>
(insert this line anywhere below the <BODY> tag and above the </BODY> tag. If you only want the music to play one time, change LOOP to "FALSE")

To insert background music that the visitor has to click the "play" button to hear:

<p><EMBED SRC="filename" BORDER="0" WIDTH="75" HEIGHT="40" AUTOSTART="FALSE" LOOP="TRUE"></p>
(insert this line anywhere below the <BODY> tag and above the </BODY> tag. If you only want the music to play one time, change LOOP to "FALSE")

Bulleted and Numbered Lists:

If you've noticed, all throughout this book I've been using bulleted lists. Bulleted lists are very common on the internet - particularly in informational documents or lists of hyperlinks. Bulleted and numbered lists are, most likely, the easiest thing you'll learn to do of all the Advanced HTML Commands - so let's get right to it!

The Basics:

There are two types of lists you can create; bulleted lists and numbered lists. Numbered lists have the numbers placed there automatically by the browser itself, you don't have to worry about numbering the items. You've seen bulleted lists all throughout this document, so you know what they look like. Here's what a numbered list looks like:

  1. First Item
  2. Second Item
    1. First Sub-Item
    2. Second Sub-Item
  3. Third Item

To create a bulleted list, you use the <UL> command. UL stands for Unordered List, incidentally. Below the <UL> tag, you use the <LI> command to insert List Items. When you're done entering each item, use the closing tag of </LI>, then use <LI> again to enter the next item. When you're done with the list, use </UL>.

For example, let's look at the following code:

<UL>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
</UL>

The code above produces the effect, below:

Now, what if you want an item on the list to have sub-items, like I've been using in this book? Well, insert a <BR> instead of an </LI>, then start another list. When you're done with that sub-list, close it with </UL>, then return to the original list with </LI>.

For example, let's look at the following code:

<UL>
<LI>First Item</LI>
<LI>Second Item<br>
<UL>
<LI>First Sub-Item</LI>
<LI>Second Sub-Item</LI>
</UL>
</LI>
<LI>Third Item</LI>
</UL>

The code, above, produces the effect, below:

To create a numbered list, you use the <OL> command. OL stands for Ordered List, incidentally. It's done exactly the same way you do the <UL> command, above. For example, let's look at the following code:

<OL>
<LI>First Item</LI>
<LI>Second Item<br>
<OL>
<LI>First Sub-Item</LI>
<LI>Second Sub-Item</LI>
</OL>
</LI>
<LI>Third Item</LI>
</OL>

The code above produces the effect, below:

  1. First Item
  2. Second Item
    1. First Sub-Item
    2. Second Sub-Item
  3. Third Item

And you can even mix the two list-types, like so:

<OL>
<LI>First Item</LI>
<LI>Second Item<br>
<UL>
<LI>First Sub-Item</LI>
<LI>Second Sub-Item</LI>
</UL>
</LI>
<LI>Third Item</LI>
</OL>

The code above produces the effect, below:

  1. First Item
  2. Second Item
  3. Third Item

But what if you don't want bullets or numbers, just a list?

Well, you use a Definition List. A definition list works exactly like above, but just uses different tags. <DL> opens a Definition List, <DT> marks a word in the list, and <DD> marks a definition. It usually is used like this:

<DL>

<DT>Pencil </DT>

<DD>An implement for writing that is usually made of wood, and makes marks in graphite.</DD>

<DT>Pen </DT>

<DD>An implement made of various materials, usually plastic and/or metal, that makes marks in ink.</DD>

<DT>Paper</DT>

<DD>A sheet of crushed wood pulp which recieves the marks made by pens and pencils.</DD>

</DL>

The above code produces the effect, below:

Pencil
An implement for writing that is usually made of wood, and makes marks in graphite.
Pen
An implement made of various materials, usually plastic and/or metal, that makes marks in ink.
Paper
A sheet of crushed wood pulp which recieves the marks made by pens and pencils.

 

And that's all there is to it!

How To Do It:

To create a numbered list:

<UL>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
</UL>

To create a bulleted list:

<OL>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
</OL>

To create a Definition List:

<DL>
<DT>First Term</DT>
<DD>Description for First Term.</DD>
<DT>Second Term</DT>
<DD>Description for Second Term.</DD>
<DT>Third Term</DT>
<DD>Description for Third Term.</DD>
</DL>

Tables:

Tables are, perhaps, the most useful thing you will learn. With tables, you can organize information on your site, create web-pages with "newspaper" columns, and much, much more. They're also one of the hardest things you'll learn - tables are something even expert HTML coders screw up from time to time. But, if you pay attention here, you'll master tables in no time at all. So let's not waste any time - let's get right to it!

The Basics:

The best way to explain tables is to go straight to the code for a simple table. So, let's do that.

Table

Rows

Are

Horizontal

Columns

     

Are

     

Vertical

     

There's the table. Notice text I've inserted in it - it's important to remember it. Table Rows Are Horizontal, and Table Columns Are Vertical. Now, here's the code:

<div align="center"><center>

<table border="3" width="36%">

<tr>

<td align="center" width="9%"><p align="center">Table</p></td>

<td align="center" width="9%"><p align="center">Rows </p></td>

<td align="center" width="9%"><p align="center">Are </p></td>

<td align="center" width="9%"><p align="center">Horizontal</p></td>

</tr>

<tr>

<td align="center" width="9%"><p align="center">Columns</p></td>

<td align="center" width="9%">&nbsp;</td>

<td align="center" width="9%">&nbsp;</td>

<td align="center" width="9%">&nbsp;</td>

</tr>

<tr>

<td align="center" width="9%"><p align="center">Are</p></td>

<td align="center" width="9%">&nbsp;</td>

<td align="center" width="9%">&nbsp;</td>

<td align="center" width="9%">&nbsp;</td>

</tr>

<tr>

<td align="center" width="9%"><p align="center">Vertical</p></td>

<td align="center" width="9%">&nbsp;</td>

<td align="center" width="9%">&nbsp;</td>

<td align="center" width="9%">&nbsp;</td>

</tr>

</table>

</center></div>

Okay - now, I've colored and indented the text of the code, too, to make it easer to see what's happening. Follow along, here, and in a moment, it will be clear.

First, let's get the non-table related code out of the way.

See where I put <div align="center"><center>? That's the best way to center a table. Most tables you create will be centered, so I may as well show you the best way. The <DIV> command tells the browser "This is a special division, or a partition of the page". The </DIV> command tells the browser that the division has ended. the <CENTER> and </CENTER> commands make sure that all browsers, particularly the older ones, will indeed center the table. Notice that they go inside the boundaries of the <DIV> and </DIV> tags.

Anyway...

The first line of the table itself is this: <table border="3" width="33%"> That line tells the browser we're starting a table, sets the border of the table at 3 pixels, and the width of the table at 33% of the screen. You can also specify width in pixels - just don't use the % sign, and the number will be pixels.

The next line is simply <tr>. TR stands for Table Row - remember, rows go horizontally. In addition, everything starts from the left and moves on to the right. So, this line tells the browser that our first row begins here.

Now - notice the next line: <td align="center" width="9%"><p align="center">Table</p></td> TD stands for Table Data - this is the actual data we'll be inserting into the cells of the table itself. Notice that we can also specify width for each cell. Next, notice the <p> command - format your information inside the cells as paragraphs, and you can align the text within the cell to the left, right or center. Similarly, you can align image files and other things that you want to appear within each cell. We end the paragraph of text with </p>, and we signal the end of this cell with </td>. Each cell is structured like this. Note also that in the "empty" cells, I've used the format for a blank paragraph. You must do this - if you don't put anything inside each cell, the cell will not appear - you'll have a hole in the table.

The next line is </tr>. This tells the browser we're done with that row. We then start up a new row with <tr>, and begin filling out the cells all over again for the next row. When we're done filling out all our rows, we close the table with </table>, then finish with </center></div> to tell the browser we're done with this particular division of the page.

And that's really all there is to it. The table opens with the <TABLE> command, we specify what's in each cell in each row, then we close the table with </TABLE>. Take a look at the code, above, and the table that resulted from it. If you study it for a bit, it should become clear what's happening.

There are other atributes that can be set with each cell, also. Each cell can be given a separate background image, like so:

This is a 1x1 table. Notice that our 'Tree' picture is back again, this time as a background image for this cell. I could have used any image, or even made a table with many cells, and used lots of images.

This is a 1x1 table. Notice that our 'Tree' picture is back again, this time as a background image for this cell. I could have used any image, or even made a table with many cells, and used lots of images.

...and here's the code that produced the table, above:

<div align="center"><center>

<table border="0" width="33%">

<tr>

<td align="center" background="HTMLforninnytrees.jpg"><font

color="#FF0080"><B>This is a 1x1 table. Notice that

our 'Tree' picture is back again, this time as a

background image for this cell. I could have used any

image, or even made a table with many cells, and used

lots of images.</B></font></td>

</tr>

</table>

</center></div>

Also, each cell can have a different background color. Using the <FONT> command, you can also set the color, typeface, and other attributes of any text that appears in each cell. For an example of this (and for a list of colors you can set the cell backgrounds to), see the Color Chart.

And here's the code that created the Color Chart in the first place:

<div align="center"><center>

<table border="3" width="300">

<tr>

<td><p align="center"><font size="5">Color</font></p></td>

<td><p align="center"><font size="5">Hex</font></p></td>

</tr>

<tr>

<td bgcolor="#000000"><p align="center"><font color="#FFFFFF">Black</font></p></td>

<td><p align="center">#000000</p></td>

</tr>

<tr>

<td><p align="center">White</p></td>

<td><p align="center">#FFFFFF</p></td>

</tr>

<tr>

<td bgcolor="#008000"><p align="center"><font color="#FFFFFF">Green</font></p></td>

<td><p align="center">#008000</p></td>

</tr>

<tr>

<td bgcolor="#800000"><p align="center"><font color="#FFFFFF">Maroon</font></p></td>

<td><p align="center">#800000</p></td>

</tr>

<tr>

<td bgcolor="#808000"><p align="center"><font color="#FFFFFF">Olive</font></p></td>

<td><p align="center">#808000</p></td>

</tr>

<tr>

<td bgcolor="#000080"><p align="center"><font color="#FFFFFF">Navy</font></p></td>

<td><p align="center">#000080</p></td>

</tr>

<tr>

<td bgcolor="#800080"><p align="center"><font color="#FFFFFF">Purple</font></p></td>

<td><p align="center">#800080</p></td>

</tr>

<tr>

<td bgcolor="#808080"><p align="center"><font color="#FFFFFF">Gray</font></p></td>

<td><p align="center">#808080</p></td>

</tr>

<tr>

<td bgcolor="#FFFF00"><p align="center">Yellow</p></td>

<td><p align="center">#FFFF00</p></td>

</tr>

<tr>

<td bgcolor="#00FF00"><p align="center">Lime</p></td>

<td><p align="center">#00FF00</p></td>

</tr>

<tr>

<td bgcolor="#00FFFF"><p align="center">Aqua</p></td>

<td><p align="center">#00FFFF</p></td>

</tr>

<tr>

<td bgcolor="#FF00FF"><p align="center">Fuchsia</p></td>

<td><p align="center">#FF00FF</p></td>

</tr>

<tr>

<td bgcolor="#C0C0C0"><p align="center">Silver</p></td>

<td><p align="center">#C0C0C0</p></td>

</tr>

<tr>

<td bgcolor="#FF0000"><p align="center">Red</p></td>

<td><p align="center">#FF0000</p></td>

</tr>

<tr>

<td bgcolor="#0000FF"><p align="center"><font color="#FFFFFF">Blue</font></p></td>

<td><p align="center">#0000FF</p></td>

</tr>

<tr>

<td bgcolor="#008080"><p align="center"><font color="#FFFFFF">Teal</font></p></td>

<td><p align="center">#008080</p></td>

</tr>

</table>

</center></div>

Now I know that looks very complicated, but really it's not. Look carefully, and you'll see that it's just the same basic pattern, repeated over and over again to create the table. The <TABLE> command, then <TR> to start a row, then <TD> to start the first cell. Next is the actual data in each cell, then the </TD> to note the end of the cell, and a <TD> to note the beginning of the next cell. Once we reach the end of a row, we use </TR> to signify the end of a row, then <TR> to mark the beginning of the next one. This repeats until we hit the end of the table, and use </TABLE>. See? It's really not that hard at all - just long.

Positioning the table is simple if you only want it centered - the example of how to do that is given in the table codes I've shown, above. Likewise, if you only want the table left-aligned, that is also easy - don't use the <DIV> and <CENTER> commands. If you just enter the code for the table, it will be aligned to the left of the page by default. If, however, you need to align a table to the right of the page, here's how you do it:

<div align="right">

<table border="0" width="33%">

<tr>

<td align="center"><p align="center">This is a 1x1 table, right aligned</p></td>

</tr>

</table>

</div>

The above code produces the below effect:

This is a 1x1 table, right aligned.

And that's it for tables.

How To Do It:

The basic format for a table:

<TABLE>

<TR>

<TD><P>text</P></TD>

</TR>

</TABLE>

Repeat the TD lines to make more columns. Repeat the TR line to make more rows.

Acronyms:

In various spots throughout this book, you may have noticed that there are bits of text that, when you hover over them, a little pop-up bit of text appears. Well, this is with the use of the <ACRONYM> command.

The Basics:

ACRONYM was originally intended to allow you to spell out what an acronym meant.

For example, if you hover over this word - USA - you'll see it's an acronym for United States of America.

The code for that line, above, is as follows:

<p>For example, if you hover over this word - <ACRONYM TITLE="United States of America">USA</ACRONYM> - you'll see it's an acronym for United States of America. </p>

It's a neat little trick - and aside from it's original use, it allows you to stick in hidden "footnotes", "comments" or "asides" in your text. You can also stick notes into hyperlinks, telling people more about where the link goes to. For example:

http://come.to/xaa

The code that produced the hyperlink, above, is this:

<p align="center"><acronym title="This hyperlink leads to my homepages."><a href="http://come.to/xaa">http://come.to/xaa</a></acronym></p>

And that's all there is to Acronyms.

How To Do It:

To add special text that appears when you hover over any other text:

<ACRONYM TITLE="Insert the text you want to appear here.">This is the text you want it to appear over.</ACRONYM>

Frames, E-mail Forms, and other Advanced User Tricks:

Overview:

For the most part, these are all going to be 'tricks'. To use them, read how they work, then copy and paste the code into your pages and modify it to suit your needs. Whenever possible, I'll give as good an explanation as I can without bogging down in too much technical stuff, so don't worry.

Frames:

Frames are, in all honesty, somewhat complicated. In addition, they are possibly the most hated thing on the internet, today, other than pop-up ads. When you use frames, use them sparingly - too many frames can truly turn an excellent website into a pit of despair that nobody visits more than once.

The best use for frames is in making what's called a "navbar" - it's also the easiest way to show you how frames work, and to give you something you can put to use right now. As everyone knows (or should know), having a website that looks good and is easy to navigate is important for anyone who wants a professional-appearing website. One of the neatest tricks you will find on the web is the "navbar" - a little frame, usually containing a series of labeled buttons, which allow you to click through the entire website and still have the buttons visible in your window - this makes navigating a sight simple and fun. Yet, many people don't have one, or they are forced to simulate one using tables, simply because they don't know how to do frames. Well, today we're going to learn how to create a framed navbar, just like the professionals, and do it quickly and easily.

Step 1) The Buttons:

The fastest and easiest way to get the buttons you want is to browse the free-sites which offer buttons and other free web-graphics. If you have some skill at web-graphics, you can create the buttons yourself using a graphics program like Paint Shop Pro ( http://www.jasc.com ). I use a Java Applet from AnfyTeam ( http://www.anfyteam.com ), however, you have to pay and register the program before the navigation applets will work.

Step 2) NavBar Decisions:

Next, we've got to decide where we want the navbar - Top, Bottom, Right or Left? Also, we have to decide how wide it's going to be, in pixels. The easiest way to do this is to use the pixel size of your buttons, and add a comfortable margin (say 25% more). Create your buttons, then place them onto a page that you'll be using for your navbar - you can name the file "navbar.htm" to make it easier to remember. Set up navbar.htm so your buttons all look right - if the navbar is to be on the right or left sides of the window, make all your buttons line up vertically, and on the left hand side of the page. If your navbar is to be on the top or bottom, make all your buttons line up across the top of the page.

Having made all these decisions, you now set the button images so that they are hyperlinks. Make all the links open in a new window called 'TARGET". For example, a hyperlink for one of your buttons might look something like this:

<a href="index2.htm" target="TARGET"><img src="button1.gif" border="0" width="89" height="46"></a>

Now - here's the trick: If that window already exists (such as if it's already a part of your frameset), when the button is clicked, no new window will open - the page will load into the window (or frame) that is already open. Keep this in mind, and we'll move on to the next step.

Step 3) Backups and Setting Up the Frame Page:

The first thing you will have to do is rename your main page. For the sake of simplicity, just add 'BAK' to the end of the name, before the extension. Example: "index.htm" becomes "indexBAK.htm" This is important - you do NOT want to accidentally delete your main page while you're trying to get this to work!

Next, if your main page already has buttons on it, you'll want to make a copy of that page, then delete the buttons. Then, save the copy (the one that still has the buttons) with your main page's name, adding a '2' at the end, before the extension - if, for example, your main page was called "index.htm", you'd save the copy as "index2.htm".

If your main page does NOT have buttons, make a copy of it, and save it with the '2' at the end, as above. I.E. if the name of your main page is "index.htm", then the copy you save is named "index2.htm"

Now, we are going to create the frame page, and save it with the same name as your main page. This is why we made a backup (BAK) copy of it earlier - so you wouldn't lose your original page in case something goes wrong, and you can't get this HTML to work for you.

Below are four examples of HTML you can copy/paste to use for your pages. Just copy, paste, and save the result with the name of your original main page (such as "index.htm"). This way, you won't have to change hyperlink or re-enter your URL into the search engines.

Now: In the HTML examples, "navbar.htm" is from step 2, above, and "index2.htm" is from the paragraphs above this one. Also, where I have "200, *" or "*, 200", you need to replace the 200 with the pixel width of your navbar. You probably won't get this right the first try, so play with it on your machine and make sure it looks good before you upload it to the web. Also, see where it says "<!-- INSERT INDEXBAK.HTM HERE –>"? Well, what you do is open indexBAK.htm, then copy and paste everything between the <body> and </body> tags over that note.

So what does that do? Well, for people who don't have a frame-enabled browser, they will see your original index page, and still be able to navigate your site.

Anyway... Where it says "INSERT THE TITLE OF YOUR PAGE HERE", well, you insert the title of your page there. Once you've made all the changes, just save this as your main page (like "index.htm"), and it should work. Remember to try it out in your browser from your hard drive before you upload it to the web.

Navbar On Top of Window:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>INSERT THE TITLE OF YOUR PAGE HERE</title>
</head>

<frameset rows="200,*" frameborder="NO" border="0"framespacing="0">

<frame src="navbar.htm" name="NavBar" scrolling="NO" resize="NO">
<frame src="index2.htm" name="TARGET" scrolling="AUTO">
<noframes>
<body>
<!-- INSERT INDEXBAK.HTM HERE -->
</body>
</noframes>
</frameset>
</html>


Navbar On Bottom of Window:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>INSERT THE TITLE OF YOUR PAGE HERE</title>
</head>

<frameset rows="*,200" frameborder="NO" border="0"framespacing="0">

<frame src="index2.htm" name="TARGET" scrolling="AUTO">
<frame src="navbar.htm" name="NavBar" scrolling="NO" resize="NO">
<noframes>
<body>
<!-- INSERT INDEXBAK.HTM HERE -->
</body>
</noframes>
</frameset>
</html>


Navbar On Left Side of Window:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>INSERT THE TITLE OF YOUR PAGE HERE</title>
</head>

<frameset cols="200,*" frameborder="NO" border="0"framespacing="0">

<frame src="navbar.htm" name="NavBar" scrolling="NO" resize="NO">
<frame src="index2.htm" name="TARGET" scrolling="AUTO">
<noframes>
<body>
<!-- INSERT INDEXBAK.HTM HERE -->
</body>
</noframes>
</frameset>
</html>


Navbar On Right Side of Window:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>INSERT THE TITLE OF YOUR PAGE HERE</title>
</head>

<frameset cols="*,200" frameborder="NO" border="0"framespacing="0">

<frame src="index2.htm" name="TARGET" scrolling="AUTO">
<frame src="navbar.htm" name="NavBar" scrolling="NO" resize="NO">
<noframes>
<body>
<!-- INSERT INDEXBAK.HTM HERE -->
</body>
</noframes>
</frameset>
</html>

If you'd like to see how I did it, take a look at this URL:

http://come.to/xaa

And that's it for frames. Once you've played with this and gotten it to work on your pages, you'll be well on your way to understanding it yourself.

E-mail forms:

E-mail forms are a fast and simple way of collecting data from the visitors to your website, as well as allowing people to contact you in a manner that insures the moment you recieve their message, you know what they want. E-mail forms also give one-click simplicity to your users when they want to respond to something they see on your website.

For the most part, the technique I'll be showing you, here, works with nearly all e-mail programs and browsers. All you have to do is modify the form to suit what you need, adding or subtracting components as desired.

First, let's take a look at a basic e-mail form:

 


Please Supply The Following Information:

Please enter your name:

You only need to hit the Send button one time; once you confirm by clicking "Send," the form has been sent. Thanks!
If this form does not work for you, please submit the above information by e-mail to
xaa@3lefties.com


This form, when used, sends me an e-mail. If you fill out the "name" box, you can tell me your name. Notice that for those people who the form doesn't work with due to problems with their browser or e-mail program, they can simply click the e-mail link and submit the information manually. This is important - you need it as a backup system for those rare occasions when your e-mail form doesn't work for someone.

Now, let's look at the code for the form:

<hr>

<p align="center"><font size="5"><i><b>Please Supply The Following Information:</b></i></font></p>

<form action="mailto:xaa@3lefties.com?subject=I_AM_READING_YOUR_HTML_BOOK!" method="POST" enctype="text/plain">

<p align="center"><b>Please enter your name: </b><br>

<input type="text" size="30" name="username"></p>

<p align="center"><input type="submit" value="Send"><input type="reset" value="Start over"></p>

</form>

<p align="center"><font size="2"><b><i>You only need to hit the Send button one time; once you confirm by clicking &quot;Send,&quot; the form has been sent. Thanks!<br> If this form does not work for you, please submit the above information by e-mail to </i></b></font><a href="mailto:xaa@3lefties.com"><font size="2"><b><i>xaa@3lefties.com</i></b></font></a><font size="2"><b><i> </i></b></font></p>

<hr>

Again, I've colored the code to make it easier to see what's happening. First, let's dispense with the one thing that isn't an actual part of the form itself: <hr> stands for Horizontal Rule, and it's what makes the lines that separate the form visually from the rest of the page. There's no 'closing tag' for the command, it's like <BR> in that respect. Wherever it appears, the browser will make a horizontal line appear. If you just use the command <HR>, you'll get a line in the default colors for the document, in the default thickness of 2 pixels, centered on the page, and covering 100% of the window. You can, however, modify the characteristics of the line if you need to. For example:


The line above is produced with the following code:

<hr size="3" align="center" width="50%" color="Black">

Anyway...

The next line is a paragraph where we tell people what the form's about. You can just make it a simple heading, like I've done, or you can give people detailed instructions, or whatever you think is necessary. Though it's not technically part of the form, you should always have something that tells people what the form is about - for most people, the action of the form will be totally invisible, so you'll need to let them know what's happening.

The next line is the actual <FORM> command, itself. <form action="mailto:xaa@3lefties.com?subject=I_AM_READING_YOUR_HTML_BOOK!" method="POST" enctype="text/plain"> Notice where it says "action"? That's where you tell the form what to do. In this case, it's an e-mail link that automatically sets the subject of the e-mail to "I_AM_READING_YOUR_BOOK!" This technique is mentioned in the section on Hyperlinks, above.

Anyway - see the next part, "method"? Well, in this case, that tells the browser how to interpret all the data the form is gathering. "enctype" stands for "Encoding Type" - in this case, there is none. Nearly every e-mail form you design will use this method and enctype. There are others, but mainly they're used when you want to transmit secure information or files, neither of which is a subject we'll be talking about today because both are, in truth, an entire book to themselves.

Now - notice the next part, the <INPUT> line? That's where we actually collect the information from the user. <input type="text" size="30" name="username"> "type" is the type of input this is - in this case, text. Now, because this is a text input, "size" is in characters, not pixels. Next is "name" - don't let this confuse you. This is the name that the form applies to the data it's collecting. I could have asked for your hat-size, and had it read name="userhatsize" instead.

Next is <input type="submit" value="Send">. This line automatically makes a button appear, labeled with whatever I put as the "value" characteristic - in this case, "Send". Next is a button for the convenience of the user, <input type="reset" value="Start over">. This automatically makes a 'reset' button appear, labeled with whatever I put in the "value" characteristic. Since that's all the data I want my form to collect, I close the form with </form>.

Finally, I add a line for people who clicked the button and found that it didn't work, telling them they can click a simple e-mail hyperlink and can still send the information to me. Oh - and I capped it all off with another horizontal rule, so it would look nice.

Now, there are other elements we can add to collect information, aside from just simple text-boxes. As an example, let's take a look at this form:

 


Please Supply The Following Information:

Please enter your name:

Please enter your message:

Please choose one or more:
I like this book
I like all your books

Please choose one:
I am from Earth.
I am from Mars.

Please choose one:

You only need to hit the Send button one time; once you confirm by clicking "Send," the form has been sent. Thanks!
If this form does not work for you, please submit the above information by e-mail to
xaa@3lefties.com


Now, this silly little form is actually a very powerful tool - if you were trying to collect information for your company website about which products your users were using, or what computer they were using when they had a problem with your product, you'd be building a form something like this (though hopefully with choices that were less silly). Let's take a look at the code, and see how each part of it works:

<form action="mailto:xaa@3lefties.com?subject=I_AM_READING_YOUR_HTML_BOOK!" method="POST" enctype="text/plain">

<p align="center"><b>Please enter your name: </b><br>

<input type="text" size="30" name="username"></p>

<p align="center"><b>Please enter your message:<br></b>

<textarea name="usermessage" rows="4" cols="30"></textarea></p>

<p align="center"><b>Please choose one or more:<br></b>

<input type="checkbox" checked name="userlikesbook" value="ON">I like this book<br>

<input type="checkbox" name="userlikesallbooks" value="ON">I like all your books</p>

<p align="center"><b>Please choose one:<br></b>

<input type="radio" checked name="homeworld" value="earth">I am from Earth.<br>

<input type="radio" name="homeworld" value="mars">I am from Mars.</p>

<p align="center"><b>Please choose one:<br></b>

<select name="favoritecolor" size="1">

<option selected value="No selection">My Favorite Color Is:</option>

<option value="Red">Red</option>

<option value="Orange">Orange</option>

<option value="Yellow">Yellow</option>

<option value="Green">Green</option>

<option value="Blue">Blue</option>

<option value="Purple">Purple</option>

</select></p>

<p align="center"><input type="submit" value="Send"><input type="reset" value="Start over"></p>

</form>

Okay - let's skip right down to the new stuff, and explain it section by section. First, there's this line: <textarea name="usermessage" rows="4" cols="30"></textarea>. That line produces a scrolling text box, where a user can type a message. "rows" sets the number of rows that appear in the box, and "cols" sets the column width of the box.

Next are these two lines:

<input type="checkbox" checked name="userlikesbook" value="ON">I like this book<br>

<input type="checkbox" name="userlikesallbooks" value="ON">I like all your books</p>

They call up check-boxes. Notice that you can declare a check-box to be checked by saying "checked name" instead of just saying "name". The "value" is what is reported back when the user submits the form with the box checked - if they change nothing, the value that would be reported back is "userlikesbook=on".

Next are these lines:

<input type="radio" checked name="homeworld" value="earth">I am from Earth.<br>

<input type="radio" name="homeworld" value="mars">I am from Mars.</p>

These are radio buttons. Again, notice that I can declare one of the buttons to already be selected by saying "checked name".

Next is a long string of choices, where the user can tell me their favorite color. The first line looks like this:<select name="favoritecolor" size="1"> The "size" characteristic is the number of rows that are displayed at once. Now, if I wanted this to be a scroll-through-list where people could use the CTRL button to make multiple selections instead of a drop-down list where they can only make one, I'd use the code multiple size instead, and set the "size" characteristic to be equal to the number of choices. if I had a while lot of choices (like dozens), I'd simply show the first few - a scroll-bar would be automatically put in by the user's browser.

Now, the options of the drop-down menu look like this:

<option selected value="No selection">My Favorite Color Is:</option>

<option value="Red">Red</option>

Notice that I can make one of the choices the default by saying selected value instead of just value. When I'm done entering my selections I want people to have, I enter </select>.

I then finish the form with the "submit" and "reset" buttons I used before, and close the form with </form>.

By combining the parts you want into your e-mail form, you can create a form that can quickly and easily gather any information you may need - and, because it's an e-mail form, it has the advantage of not requiring you to learn CGI or Pearl to create a program on your server to do the same thing for you.

And now, let's review all the parts (here's the copy-paste stuff):

To begin and end an e-mail form:

<FORM ACTION="mailto:yourname@yourISP.com?subject=Enter_the_subject_here" METHOD="POST" ENCTYPE="text/plain">

(insert your form here)

<INPUT TYPE="submit" VALUE="Send"><INPUT TYPE="reset" VALUE="Start over">

</FORM>

To create a single-line input-box:

<INPUT TYPE="text" SIZE="30" NAME="name">

To create a multi-line text-area:

<TEXTAREA NAME="usermessage" ROWS="X" cols="Y"></TEXTAREA>

To create a check-box:

<INPUT TYPE="checkbox" NAME="name" VALUE="ON">text

To create a radio-button:

<INPUT TYPE="radio" NAME="name" VALUE="value">text

To begin and end a drop-down list:

<SELECT NAME="name" SIZE="1">

(insert your options, here)

</SELECT>

To begin and end a multiple-option list:

<SELECT MULTIPLE NAME="name" SIZE="X">

(insert your options, here)

</SELECT>

To insert options into drop-down or multiple-option lists:

<OPTION VALUE="value">text</OPTION>

And that's all there is to e-mail forms.

META Tags and Other Fun Things:

Auto-Refresh: If you update your pages frequently, one of the problems you may run across is people who don't hit "refresh" on their browser, and don't have their browser set to automatically fetch the latest version of the page. To solve this problem, insert the following META command between the <HEAD> and </HEAD> tags of your document:

<META http-equiv="expires" content="0">

This tells the browser that this page expires instantly, and every time the user visits the page, it needs to be refreshed. The page will never be loaded from the browser's cache.

Fadein/Fadeout: One of the niftier effects, you can make your pages fade in or out when people click to go to another page. To do this, insert the following META commands anywhere between the <HEAD> and </HEAD> tags of your document:

<META http-equiv="Page-Enter" content="blendTrans(Duration=5.0)">
<META http-equiv="Page-Exit" content="revealTrans(Duration=5.0,Transition=12)">

Iris In/Out: Similar to the above effect, except it's an opening or closing "iris" effect, like in the old-time movies. Again, paste the following META tags anywhere between the <HEAD> and </HEAD> tags of your document:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=5.0,Transition=2)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=5.0,Transition=3)">

Automatic Redirecting: Okay, you've probably seen it on the internet a million times - you go to a page, and it says "We're sorry, but this page has moved. If your browser does not automatically redirect you to the new page, please click here..." So how is that done? With this code:

<META http-equiv="Refresh" content="0; URL=http://yourURLgoes.here">

Okay - the "refresh" command tells the browser to refresh the page automatically. 0, above, is the amount of seconds that the browser waits before trying to load the new page - in this case, zero. You can make it any amount you wish, however, in seconds. Replace "yourURLgoes.here" with the full URL of the page you want the browser to go to. It doesn't have to be a different page, however - CNN.com uses this trick to refresh their main page every half an hour or so, so that visitors always have the latest updates to their stories. Once you have the above META tag in place, just add a hyperlink for those with older browsers that don't automatically redirect them.

WYSIWIG Editors: Interestingly enough, HTML is so simple, there are a ton of programs out there that will allow you to code it simply by typing what you want. WYSIWYG stands for What You See Is What You Get, incidentally. Win95 used to come with Front Page Express (also known as FPX), a very basic WYSIWYG editor that was so effective, people weren't spending any money on FrontPage, Microsoft's "Full Version" of the program. So, Microsoft didn't include it when they came out with Win98, and the "Upgrade" for Win95 to Win98 uninstalled FPX (you had to re-install it from your disks). AOL used to have a program called AOL Press, which made FPX look like scratching your code into tree-bark. However, when AOL bought up Netscape, they decided they didn't want a program competing with Netscape Composer, so they stopped supporting it. Unfortunately, Netscape Composer, while good, doesn't have all the features AOL Press did, and the user interface, for many people, isn't as intuitive.

The advantage of using a WYSIWYG editor is obvious - all you have to do is simply type. The page comes out looking exactly like you typed it. Also, much of the "hard" parts of HTML are reduced to one or two mouse-clicks, like making tables or frames. And, finally, you can convert pretty much any document to HTML simply by repeated copy/pastes.

Yes, I know - there are those of you out there right now screaming "Argh! I read through this whole thing, and now you tell me I could just be typing the page and not messing with the code at all?!" Well, there's a reason why you want to learn basic coding - WYSIWYG editors are not perfect.

You see, the disadvantage to WYSIWYG editors is that sometimes, they mess up. You end up with a page that doesn't work right, or look like you wanted it to, and it's extremely difficult to correct in the editor itself. This is caused by the assumptions of HTML programming that whoever created the editor had in the first place. For example, FPX doesn't allow <STYLE> commands to be inserted in the head of a document - at the time FPX was created, you couldn't do that in HTML. Netscape Composer has it's own problems - it often interprets code very strangely, particularly when you're trying to edit a page that was created by hand or with another editor. Normally, what you end up with is Composer taking a different route to arrive at the same page presentation - but, sometimes, what you end up with is a messed-up page that only looks good in Netscape.

So, even if you do use a WYSIWYG editor, you should still know basic coding - which is what you have learned in this book. That way, when something goes wrong with your page and your editor can't fix it, you can edit the code by hand and get it to work right.

 

 

 

Conclusion:

Well, that's it. If you've read this far, you should know enough about basic HTML coding to get started - and even a few advanced techniques to keep you going while you learn more. Check the Links section for links to places where you can learn more about HTML for free. And, of course, practice! Sit down and start coding - it's the best way to learn. Good luck!

Appendix:

Color Chart:
Here is a chart of the basic colors used in most HTML documents. All commands that allow you to specify colors will use these numbers. Just copy and paste the hexadecimal number for the color you want into your code - remember, the # sign is necessary, as it tells the browser that it is going to read a hesadecimal number. Please note that you can just copy and paste the word for the color (Black, White, Blue, etc), but some older browsers may not understand what color you mean. At the time of this writing, that's about 5% of the browsers out there on the internet. When you use the plain English word for the color you want, do NOT preface it with the # sign. Just copy and paste it as it is.

Color

Hex

Black

#000000

White

#FFFFFF

Green

#008000

Maroon

#800000

Olive

#808000

Navy

#000080

Purple

#800080

Gray

#808080

Yellow

#FFFF00

Lime

#00FF00

Aqua

#00FFFF

Fuchsia

#FF00FF

Silver

#C0C0C0

Red

#FF0000

Blue

#0000FF

Teal

#008080

 

Links:

As with any list of links that point to internet locations, there are always three things to keep in mind:

1) Just because I have a hyperlink pointing to an interent page I think might be helpful to you doesn't mean I'm responsible for the content of the page. If there's something you run across on one of these links below that you don't like, don't write me about it - tell the owner of the page.

2) Just because a hyperlink I have below was good at the time this book was written doesn't mean it will be good forever. Websites close, change addresses, and sometimes change owners. Sometimes all of this happens on the same day. If you find a page that has useful information and you want to be able to read that information anytime you want in the future, save a copy of the page to your hard drive. Bookmarks are nice, but remember - that page may not be there forever.

3) Just because a hyperlink I have below was good when I tried it doesn't mean it's good all the time. As I always say, "The Internet is a vast and glorious construction, the pinnacle of modern man's information technology, with all the stability and enduring nature of a pyramid of bowling balls held together with vaseline." Sites go down for any of thousands of reasons, ranging from server failure, squirrels chewing phone lines apart, and evil gremlins. Again - if you find a page that has useful information and you want to be able to read that information anytime you want in the future, save a copy of the page to your hard drive.

Paint Shop Pro - A very good image editor for creating web-graphics you want. Not free, though.

Jelane's Free Web Graphics - A place to get free web-graphics.

Bimsan Free Web Graphics - More free web graphics.

Cakewalk - Want to create your own MIDIs? Well, this is what you need to do it. You should have some musical talent before you try it, though. Not free.

Band-In-A-Box - Easier than Cakewalk, cheaper than Cakewalk (but still not free), BIAB can create an entire song from just a few basic chords you enter, and requires zero skill. The results, depending on how good you are at using the program, range from fair to excellent. Anything you create is yours to use any way you want, of course, so it's a good way to get original music for your webpages.

Classical Midi Archives - A veritable cornucopia of free midi files for you to use on your webpages. The catch? You have to ask permission from the person who sequenced the file.

Front Page - If you're willing to spend the money, this is the WYSIWYG HTML Editor to get. Works in windows, only. Not free - in fact, it's rather pricey, given what it is, and the fact that you can get other editors for free.

AOL Press - No longer supported by AOL, this link might not last forever - grab it now, or live without it. The best free WYSIWYG editor you can get. Only works in Windows, though.

Netscape Composer - Almost as good as AOL Press. Some of it's code interpretations are screwy, but it does work, and it's free. Alternate versions for Mac OS are available (or were, last time I looked).

http://www.htmlgoodies.com - Run by Professor Joe Burns, this is probably the only PhD in Computer Science alive who honestly, truthfully doesn't treat everyone else like a ninnyhammer. His pages are well-written, easy to search, and he has an enormous amount of incredibly useful tutorials on his site. You can learn everything there is to know about HTML, Java, CSS, the works - all for free.

http://www.w3c.org - Want to know what the latest HTML specs are? Here's the place to go - the home of the World Wide Web Consortium. Don't scream, but HTML 4.01 is old news, now. We're up to XHTML. And it's only a transitional language - in another year or two, it'll be replaced by something else. Articles are sometimes difficult to understand, examples are extremely brief - this is the upper crust of the Internet Intelligensia, and they aren't writing this stuff for Joe Average to peek at. Don't let them intimidate you, however - they're not that smart, and they're far from perfect (for example, the specification for HTML 4.0 contained several errors, which they had to correct in HTML 4.01).

AnfyTeam - They have several Java-based "Navigation" applets that would be useful in a framed "navbar" They're not free, though.

Cut-N-Paste Javascript - Over 200 JavaScripts (plus some Perl and CSS) ready to be cut and pasted into your web pages. Also a monthly JavaScript Newsletter discussing current issues.

DHTML Shock - Free Dynamic HTML and Javascripts - More free cut & paste stuff for you to peek at. DHTML stands for Dynamic HTML, incidentally. Don't worry - it's just a term meaning "HTML Code that combines java and CSS commands."

DHTML Lab: Free Dynamic HTML Tutorials, DHTML Scripts - More free cut & paste stuff.

 

Reference Table of Common HTML Tags:

Name End Tag (Yes/No) Deprecated. Description
A Y   discussed above
ABBR Y   identical to ACRONYM, discussed above
ACRONYM Y   discussed above
APPLET Y Y Java applet
AREA N   client-side image map area
B Y   bold text style, discussed above
BASE N   document base URL
BASEFONT N Y sets base font size
BIG Y   large text style
BLOCKQUOTE Y   discussed above.
BODY Y   discussed above.
BR N   discussed above.
BUTTON Y   push button
CAPTION Y   table caption
CENTER Y Y shorthand for DIV align=center
CITE Y   citation
CODE Y   computer code fragment
DD Y   discussed above.
DEL Y   deleted text
DFN Y   instance definition
DIR Y Y directory list
DIV Y   generic language/style container
DL Y   discussed above.
DT Y   discussed above.
EM Y   emphasis
FIELDSET Y   form control group
FONT Y Y discussed above.
FORM Y   discussed above.
FRAME N   see example, above.
FRAMESET Y   see example, above.
H1 Y   HUGE heading
H2 Y   very large heading
H3 Y   large heading
H4 Y   normal heading
H5 Y   small heading
H6 Y   very small heading
HEAD Y   discussed above.
HR N   horizontal rule
HTML Y   discussed above.
I Y   italic text style, discussed above
IMG N   discussed above.
INPUT N   see above.
INS Y   inserted text
KBD Y   text to be entered by the user
LI Y   discussed above.
MAP Y   client-side image map
MENU Y Y menu list
META N   see above.
NOFRAMES Y   see example, above.
NOSCRIPT Y   alternate content container for non script-based rendering
OBJECT Y   generic embedded object
OL Y   discussed above.
OPTION Y   explained above.
P Y   paragraph
PRE Y   preformatted text
S Y Y strike-through text style
SAMP Y   sample program output, scripts, etc.
SCRIPT Y   script statements
SELECT Y   explained above.
SMALL Y   small text style
SPAN Y   generic language/style container
STRIKE Y Y strike-through text
STRONG Y   strong emphasis
STYLE Y   style info
SUB Y   subscript
SUP Y   superscript
TABLE Y   see above.
TD Y   see above.
TEXTAREA Y   explained above.
TITLE Y   see above.
TR Y   see above.
TT Y   teletype or monospaced text style
U Y Y underlined text style, discussed above.
UL Y   discussed above.
VAR Y   instance of a variable or program argument

 

A

An Anchor. Discussed above

ABBR

This tag is identical to ACRONYM, described above.

ACRONYM

Fun with tooltips! This tag is fully explained above.

ADDRESS

The ADDRESS element may be used to supply contact information for a document or a major part of a document such as a form. Inside, it, you normally put things like e-mail hyperlinks, web-address hyperlinks, and so on. This element often appears at the beginning or end of a document. It is otherwise completely useless, and does absolutely nothing.

APPLET

This tag specifies where a Java applet is inserted into your document, and what data is sent to the applet. How this command is used is based on the applet you are inserting into your document. Consult the documentation that came with the applet, or just copy/paste from a page that works and modify the details to fit your needs.

AREA

This tag defines the coordinates of a client-side image-map. It's elements are as follows:

shape -- controls interpretation of coords
coords -- comma-separated list of lengths
href -- URI for linked resource
nohref -- this region has no action
alt
-- short description
tabindex -- position in tabbing order
accesskey -- accessibility key character
onfocus -- the element got the focus
onblur -- the element lost the focus

There are several good tutorials on Client-Side Image Maps on the internet - the best is at http://www.htmlgoodies.com

B

Makes Bold text, discussed above

BASE

This attribute specifies an absolute URL that acts as the base URL for resolving relative URLs, and thus allows you to use "shortcuts" in typing the code by specifying a relative URL as "../filename" It is inserted in the head of the document. For example, if you had this line between the <HEAD> and </HEAD> tags...

<BASE href="http://xaa.tripod.com/redirect.html">

...you could then later insert the following line...

<P>Click <a href="../PBMain.htm">here</a> to see my main page!</P>

...and the URL the browser would go to is http://xaa.tripod.com/PBMain.htm

Unfortunately, the tag is otherwise completely useless. You can do exactly the same thing by simply using this line...

<P>Click <a href="PBMain.htm">here</a> to see my main page!</P>

...and if the page they're looking at is in the same folder or directory as PBMain.htm, then that's where the browser will go.

BASEFONT

Allows you to specify the base font used throughout the document. It's format is exactly like the <FONT> tag, however, once you've used it, you can specify +X or -X for font sizes, where X is an integer from 1 to 7. In other words, you could specify the default font for the entire document is in size 4, then use a font size of -1 in a FONT command to get size three font.

Okay, I know, that's pretty useless, since you can just type out the size you want in the first place. Please remember I didn't invent HTML, I'm just trying to explain it.

BIG

The opposite of SMALL, this tag makes your text a size larger. For example, big text would look like this when compared to text that isn't big, but is otherwise the same size. Yes, I know, you can do this with the <FONT> command. It's pretty redundant.

BLOCKQUOTE

Indents text. Explained above.

BODY

Marks where the body of your document begins. Explained above.

BR

Inserts a line break. Explained above.

BUTTON

Buttons created with the BUTTON element function exactly like buttons created with the INPUT element, but you can add content, such as an image. For example, you could make a 'reset' button like this:

<BUTTON name="reset" type="reset"> Reset<IMG src="oops.gif" alt="oops"></BUTTON>

CAPTION

Allows you to add a caption to a table. It goes below the <TABLE> tag. It will appear as text next to the table, outside the cells. The format is this: <CAPTION align="xxx">text</CAPTION>. You can specify alignment as "top", "bottom", "left" and "right".

CENTER

Centers text on the page, or any other item caught between <CENTER> and </CENTER>. Not always effective in all browsers - paragraph alignment is more reliable.

CITE

Identical to <I>, it makes text look like this compared to the rest of the document. A redundant little bit of code left over from the days of ARPANET, when the majority of users were either computer programmers or scientists, it simply lets the user mark something as being a citation of authority by putting it in italics - like citing a quote in a book, or something. That's it.

CODE

Makes text look like this when compared to the rest of the text. Usually, the text will appear in Courier New - but it depends, based on the browser's settings. A redundant little bit of code left over from the days of ARPANET, when the majority of users were either computer programmers or scientists, it simply lets the user mark something as being computer code by showing it in a different font. That's it.

DD

Definition Description, explained under Lists, above.

DEL

INS and DEL are used to markup sections of the document that have been inserted or deleted with respect to a different version of a document. The simplest example would be draft legislation where lawmakers need to view the changes. For example, a certain small-town deputy in Mayberry, RFD, might want to propose city legislation to the mayor, changing the amount of bullets he's allowed to carry.

<P>The Deputy, Mr. B. Fife, may carry <DEL>1</DEL><INS>2</INS> bullets in his weapon..</P>

The above code would produce the below effect:

The Deputy, Mr. B. Fife, may carry 12 bullets in his weapon.

However, there's a problem - how it looks depends entirely on what browser you are using. Some show a deletion as a strike-through, others show a deletion in a different font, and others simply don't show the deletion at all.

DFN

DFN stands for "DeFiNing Instance", and is identical to CITE. It, too, is a redundant little bit of code left over from the days of ARPANET, when the majority of users were either computer programmers or scientists. It's original intent was to simply let the user mark something as being a defining instance of occurrence by putting it in italics. That's it.

DIR

Related to MENU, the DIR element was designed to be used for creating multicolumn directory lists. Both elements have the same structure as UL, most browsers will render a DIR or MENU list exactly as a UL list.

DIV

Creates a division on the page, in which you can change the alignment and other elements of the text in big blocks. The format is this:

<DIV align="xxx">

(insert the stuff you want to align or otherwise alter here)

</DIV>

DL

Definition List, explained under Lists, above.

DT

Definition Term, explained under Lists, above.

EM

Identical to <I>. Puts text in italics.

FIELDSET

FIELDSET and LEGEND elements are used together in forms. FIELDSET allows you to group related controls and labels together - everything inside the FIELDSET tags is considered one group. Grouping controls makes it easier for users to understand their purpose while simultaneously making tabbing navigation easier. You can then assign a caption to each group with LEGEND.

FONT

Explained above.

FORM

Explained above.

FRAME

See example, above.

FRAMESET

See example, above.

H1

Makes the font about size 6, like this.

H2

Makes the font about size 5, like this.

H3

Makes the font about size 4, like this.

H4

Makes the font about size 3 and bold, like this.

H5

Makes the font about size 2 and bold, like this.

H6

Makes the font about size 1 and bold, like this.

HEAD

Denotes the head of the document. Explained above.

HR

Horizontal Rule makes lines that separate one part of a page visually from the rest. If you just use the command <HR>, you'll get a line in the default colors for the document, in the default thickness of 2 pixels, centered on the page, and covering 100% of the window, which looks like this:


You can, however, modify the characteristics of the line if you need to. For example:


The line above is produced with the following code:

<hr size="3" align="center" width="50%" color="Black">

HTML

See above.

I

Makes Italic text, discussed above

IMG

Explained above.

INPUT

A part of Forms, see above.

INS

INS and DEL are used to markup sections of the document that have been inserted or deleted with respect to a different version of a document. The simplest example would be draft legislation where lawmakers need to view the changes. For example, a certain small-town deputy in Mayberry, RFD, might want to propose city legislation to the mayor, changing the amount of bullets he's allowed to carry.

<P>The Deputy, Mr. B. Fife, may carry <DEL>1</DEL><INS>2</INS> bullets in his weapon..</P>

The above code would produce the below effect:

The Deputy, Mr. B. Fife, may carry 12 bullets in his weapon.

However, there's a problem - how it looks depends entirely on what browser you are using. Some show a deletion as a strike-through, others show a deletion in a different font, and others simply don't show the deletion at all.

LEGEND

FIELDSET and LEGEND elements are used together in forms. FIELDSET allows you to group related controls and labels together - everything inside the FIELDSET tags is considered one group. Grouping controls makes it easier for users to understand their purpose while simultaneously making tabbing navigation easier. You can then assign a caption to each group with LEGEND.

LI

Used in Ordered and Unordered lists, above.

MAP

Tag to create a client-side image-map. There are several good tutorials on Client-Side Image Maps on the internet - the best is at http://www.htmlgoodies.com

MENU

Related to DIR, the MENU element was designed to be used for single column menu lists. Both elements have the same structure as UL, most browsers will render a DIR or MENU list exactly as a UL list.

META

What the W3C calls a "metaatribute" tag. for some examples of useful META tags, see above.

NOFRAMES

Used as a "container" to hold the page information for non-frame capable browsers. For an example of use, see above.

NOSCRIPT

The NOSCRIPT element allows you to provide alternate page information when a script is not executed, similar to how NOFRAMES allows you to provide page information for browsers that don't execute your frames.

OBJECT

For an example of this tag in use, see above.

OL

An Ordered List, explained above.

OPTION

Explained above.

P

<P> starts a paragraph. </P> closes a paragraph. To see how to align a paragraph, look here..

PRE

The PRE element tells the browser that the enclosed text is "preformatted" - in other words, it isn't to treat it like HTML text, but is to render it exactly as you typed it. When handling preformatted text, browsers will leave white space intact, render text with a fixed-pitch font, and disable automatic word wrap.

S

Same as STRIKE. Strikethrough. Makes text look like this.

SAMP

Identical to CODE. Makes text look like this compared to the rest of the document.

SCRIPT

Used to designate the start and end of a script, usually Java.

There are many good tutorials on Java scripting on the internet, the best being found at http://www.htmlgoodies.com

SELECT

See above.

SMALL

The opposite of BIG, this tag makes your text a size larger. For example, big text would look like this when compared to text that isn't big, but is otherwise the same size. Yes, I know, you can do this with the <FONT> command. It's pretty redundant.

SPAN

Used to call up CSS Style commands. There are many good tutorials on CSS available on the internet, the best being found at http://www.htmlgoodies.com

STRIKE

Same as S. Strikethrough. Makes text look like this.

STRONG

Bold text. Same as <B>.

STYLE

Used to call up CSS Style commands. There are many good tutorials on CSS available on the internet, the best being found at http://www.htmlgoodies.com

SUB

Subscript. Makes text look like this compared to the rest of the document - down half a line, and a size smaller. Another hold-over from the days of ARPANET, the SUB tag was originally used by scientists to denote sub-scripted variables, particularly with chemical formulas. Today, SUB and SUP remain in HTML because many languages require superscripts or subscripts for proper rendering.

SUP

Superscript. Makes text look like this compared to the rest of the document - up half a line, and a size smaller. Another hold-over from the days of ARPANET, the SUB tag was originally used by scientists to denote sub-scripted variables, particularly with chemical formulas. Today, SUB and SUP remain in HTML because many languages require superscripts or subscripts for proper rendering. The most common use for it in web-pages is to render 'nd', 'th' and 'nth' with numbers, like this:

22nd, 34th, 17th

TABLE

See above.

TD

See above.

TEXTAREA

See above.

TITLE

See above.

TR

See above.

TT

Identical to CODE. Makes text look like this compared to the rest of the document.

U

Makes Underlined text, discussed above

UL

An Unordered List, explained above.

VAR

Identical to CODE. Makes text look like this compared to the rest of the document.