tutiorials


Getting Started

Who was it that said "The longest journey starts with but a single step"? While the finished product may appear daunting, learning to build web pages is a clasic example. I'll begin with the basics, and gradually build into some of the more complex tricks and treasures.

First, the code: HTML (Hypertext markup language) is essentially a text based language. You can start with a simple document in a text editor, such as Notepad in Windows, Simple Text in Mac, or Edit in DOS - anything that will create an ascii text document. For our example, let's start with this:

Hello, World!

When you open a text document in a web browser, you get exectly what you see here... simple text. In order to make this a web page, you would have to change a few things. First, the extension would change from .txt to .htm or .html (for those of you who are coming to the fray from the mac world, PCs and Unix machines use something called an "extension" to tell applications what kind of file this is - the extension is the part of the filename that comes after the period).

Secondly, you must add some "tags" to the page to tell the browser how to display the page. Every web page must begin with a special tag that tells the browser that it's a web page. This tag looks like this:

<html>
Hello, World!



</html>

See how the tag at the beginning is enclosed in brackets (the "less-than", "greater-than"symbols)? every element in a web page, including the page itself, must be surrounded by a tag of some sort. These tell the browser what to do with the elements.

Inside the <html> and </html> (say, "not html") tags, there are two other sections of the web page. These are the head and the body. Get ready, this is a stretch... the tags for these are <head></head> and <body></body>. So, at this stage our page looks like this:

<html>
<head></head>

<body>
Hello, World!
</body>

</html>

If you put this page on a web server and opened it in a browser, it would look like this:

Hello, World!

So far, so good, right? Now, inside the <head></head> tag, there are a couple of other elements. most important of these is the one that displays the title at the top of the browser window. Wanna guess at this one? That's Right! It's <title></title>, like so:

<html>
<head>
<title>
Our Nifty Page
</title>
</head>

<body>
Hello, World!
</body>

</html>

When you look at this page in a browser, it looks like this:

mail