This article originally appeared on the website "Professionals in Pajamas"
which has now been incorporated into Widget Inc.

HTML 101 - Part 1: Inroduction

Roger L. Main

If you're starting a business these days then chances are you won't get very far without that which is commonly termed as "web presence." In other words, you need a web site. So, how difficult is it? Do you need to hire someone to put it together or can you do it yourself?

The answer, of course, depends on the answer to two other questions. One: how complex do you want your site to be? Two: how computer savvy are you? If you want an elaborate collection of forms, flash and graphics then be prepared to spend a lot, either in money or time (or both). If you're one of those sharp, can-pick-up-anything computer guru types, then the time and money factor go down considerably. If you're new to the web and you want the razzle-dazzle, hire Widget Inc. - it will save you a lot in the long run.

The final option? Learn the basics of HTML - the natural language of the Internet and that which we will be dicussing over the next few months. While it will not allow you to create a highly functional and flashy site, it will allow you to get, at least a basic web presence.

Behold, a complete web page:


Hello World!


Ok. There it is. It doesn't do anything particularly exciting. See for yourself - type this into any text editor, save it with a .htm or .html extension and open it with your browser. What you should see is an empty page with the words: Hello World! While not particularly exciting, it does introduce the basic concept of HTML: tags. Tags are those words surrounded by the < and > characters. They come in two flavours: stand-alone and bracketed (those are the terms I use for them).

The "body" tags used above are an example of bracketed tags - they remain in effect until the browser encounters an equivalent closing tag (designated with the / character). An example of a stand-alone tag would be the <br> tag. Want to see what it does? Type out the complete works of William Shakespeare in a text editor and load it into your browser (okay, it doesn't have to be Shakespeare, but any text that will cascade over more than one line).

What you will find is that even though you put new lines in your text editor, the browser will ignore these in your document. In order to put new lines on your web page, the browser needs the "break" tag (or <br>). Because a break is a single event and does not encapsulate any text, a closing break character <br> character is redundant. If you put one in, your browser will ignore it as it considers it meaningless (and rightly so).

Most tags are bracketing tags. Some can even be both. Many tags also have attributes. For example, consider this font formatting tag:

<font face='arial' size=2>Some Text</font>

It has two attributes: face and size. In this case, face designates which font type to use and size (on a scale of 1 to 7) states how big to make the text. Other text formatting tags are <b> and </b> tags for bolding text, <i> and </i> tags for italic text and <u> and </u> tags for underlining text. Another useful stand-alone tag is the <hr> tag for a horizontal rule (or line). This tag also has some attributes including color, size and noshade - a single, stand-alone attribute that tells the browser not to put a shadow under the line.

As for formatting on a page, the only one I'll be discussing here is the <center> and </center> tags which centers the text in the browser window.

That should be enough for you to play around with to get an idea of what HTML does. What? You want more formatting flexability? For that you'll have to wait for next month.

Return to the main menu

© Copyright 2002-2007 Widget Inc.
All Rights Reserved