HTML? What the heck is HTML?


So you decided to learn HTML?  Wonderful!  Now, let me see... what should we start with?  A TOC (Table Of Contents) maybe?  Yeah, I think so.

What do I need to get started?

You'll need atleast a Pentium running at 133 MHz. to start learning and using HTML comfortably.  Operating system should be Windows 95 or upwards.  A 28.8 KBPS (Minimum speed) modem is required.  If you don't know what that is, head over to the Computer Stuff page.  Of course, you will need a HTML editor.  You can try Allaire HomeSite 4.5.  It's an excellent editor, I use it.
You can use other OS's and configurations too.  For example, Unix/Linux fans could simply use vi.

Ok, how do I enter HTML?

Depends on wether your editor is a WYSIWYG (What You See Is What You Get) editor or not.  Actually, even if it's a WYSIWYG editor, like HoTMetaL, you should see something like HTML written on a card  or something like it.  That tells the browser that the following is HTML.  I'll show you an example:

Example 1
<HTML>
<HEAD>
    <TITLE>Exampleone</TITLE>
</HEAD>
<BODY>
This is <B>a<I>test <U>document</U></I></B>.
</BODY>
</HTML>

See it here
Here's a small table:
Example 1
When the Browser sees this... ...it thinks this
<HTML> Time to work
<HEAD> Top part
<TITLE> The next line should be the title...
Example one Okay, I'll stick this into the title bar.
</TITLE> Guess that's it for the title. What's next?
</HEAD> No more top part.
<BODY> Hmm... this should be the main body.
This is Text...
<B> Sheesh, bold text.
a More text.
<I> Italics, yet.
test Still more text.
<U> Gross, underlines.
document. More and more text.
</B> No more bold?
</I> No more italics?
</U> Wow, no more underline either!
</BODY> End of text.
</HTML> Here's the page, I'm going back to my Mah Jongg.

Nice to know what the other half thinks, ain't it?  Anyways, you know some stuff now.  Carry on.

I wanna give my page a title.

As you saw in Example 1, the <TITLE>...</TITLE> tag is where you put the title. I put the ... to let you know the tags come in a pair. This means you can't do this:

Example 2

<HTML>
<HEAD>
    <TITLE>Example2
</HEAD>
<BODY>
Sometext.
</BODY>
</HTML>

The browser wouldn't display it correctly or something. You can use numbers and letters as far as I know.

Fine, now let's get on to the text, etc.

You put the text, forms, etc. within the<BODY>...</BODY> tag. Using the <BODY> tag, you can do a lot of things. The things are done using attributes. Let me show you what they are, and how to use them.

Attributes of the BODY element
Attribute What it does
<BODY BGCOLOR="#000000"> Specify a background color. More on this in colors.
<BODY BACKGROUND="someimage.gif"> Specify a background image.
<BODY BGSOUND="somewav.wav"> Specify background music. (Internet Explorer only)
<BODY ALINK="red"> Color of link WHILE CLICKED.
<BODY VLINK="magenta"> Color of the visited links.
<BODY LINK="blue"> Color of normal links. :)
<BODY onLoad="function()"> Something to do when the page is loaded; normally calls a JavaScript function.
<BODY onUnload="function()"> Same as above, but when the user goes to another page.

I don't think there's anything else. You can specify colors using Hexadecimal values (eg, #000000) or some names (eg, blue). ALINK is when you click on the link and hold the mouse button. onLoad and onUnload are JavaScriptevent handlers.  Find out about them in the JavaScript tutorial.

Link The Stuff

Okay, you need to link web pages now, y'know. After all, that's why the call it a Web, not a Strand. There are basically 2 types of links: Anchors and hyperlinks.  Anchors are links to a specific location on a web page.  Hyperlinks are to other pages, either within the site, or on another site.

How to do it? Here's an example:

Link:
<A HREF="html.html">Back to Tutorial</A>
Click here to see it

Link to Anchor:
<A HREF="#anchor">Example</A>
Click here to see it

Anchor:
<A NAME="anchor">Example of anchor</A> in action. It must be in a paragraph, otherwise it doesn't come in the center so much. <This is the anchor>

Background needed! *BEEP* *BEEP*

Hmmm... you've got links, but you're stuck with the same background! Let's fix that. You recall one of the attributes of the BODY tag is BGCOLOR. So you could change the body tag to, let's say,

<BODY BGCOLOR="#C0C0C0">
Some stuff....
</BODY>

See it here

Let's put some sound

You have two choices here:

Inline Sound
Inline sounds is sound that plays automatically when a visitor opens the page.  Inline sound can be added with the EMBED element (deprecated, but works with most browsers).  Technically, it can also be added with the OBJECT element, but this doesn't seem to work...

Example: <EMBED SRC="media/sound/annoying-beep.mpeg" LOOP="infinite" AUTOSTART="true"> or <OBJECT DATA="media/sound/annoying-beep.mpeg" TYPE="application/mpeg">This is an annoying beep</OBJECT>

Out-of-line Sound
Out-of-line sound is the only (?) alternative to inline sound.  It is played as the result of a visitor's action.  Playing it is as simple as creating an A element and pointing to the sound file with the HREF attribute, for example: <A HREF="media/sound/elvis-impersonation.wav" alt="me singing Blue Christmas with the stadium filter">Listen to me singing blue Christmas at the Meadowlands</A>

You mean I can actually get user input?

Yes, user input is very much possible. In fact, in today's e-commerce centered Internet, forms are the basis of communication between the customer and company. Now, when I say form, you're probably thinking about some boring old piece of paper which you have to fill up with useless information. Well, a traditional form is like that. But today, forms call forexcitement! You can spice it up with images, JavaScript and much more, and even checking the form can be fully automated.

A basic form is like this:

<FORM><INPUT TYPE="button" onClick="doAction()"></FORM>

Attributes of the FORM element
Attribute Meaning
NAME Name of the form, used by JavaScript.
ACTION What happens when the visitor clicks the SUBMITbutton.
METHOD How the data is to be sent to the script (POST or GET).
ENCTYPE What type of files will be accepted if one or more form fields accept file uploads.
TARGET The target name of the frame within the frameset, if your script is a frameset.
EVENTS JavaScript events.

Let 'em type whatever they want, but short

You can add a text field like this:

It's very simple; this is the exact code:

<FORM>
<INPUT TYPE="text" SIZE=20 VALUE="This is a text field.">
</FORM>

Here are the attributes:

Attributes of the TEXT field
NAME Name of the text field, used by JavaScript.
SIZE The size of the field in columns (not applicable to the size of whatever is written in it).
MAXLENGTH The maximum number of characters allowed to be typed into it.
ALT Alternate text you want to associate with this field.
TABINDEX The number you want this field to be in the tabbing index.
ACCESSKEY The keyboard character associated with the field (unconfirmed!).

Let 'em type whatever they want, as long as they want

You can add a textarea like this:

Here's the code:

<FORM>
<TEXTAREA COLS=20 ROWS=4 WRAP="virtual">This is a textarea.</TEXTAREA>
</FORM>

Here are the attributes:

Attributes of the TEXTAREA element
NAME The name of the textarea, used by JavaScript.
ROWS How many rows it should have (note: this is not the number of lines the user can input)
COL How many columns wide it should be
READONLY Does what it says
DISABLED Again, does what it says

Group 'em together, choose quite a few

A bunch of checkboxes will let you select as many options as you like -- useful, for example, if you want to select the toppings on a burger. Here's a sample checkbox:

First checkbox Second checkbox Third checkbox

Here's the code:

<FORM>
<INPUT type="CHECKBOX">First checkbox
<INPUT type="CHECKBOX">Second checkbox
<INPUT type="CHECKBOX">Third checkbox
</FORM>

Here are the attributes:

Attributes of the checkbox element
©2000-2001, VampFoot. Help was enlisted of the following books: HTML 4 Bible and HTML For Dummies, both by Comdex computer publishing.