Files

If you use a computer, you know about files. Every time you create a word processing document, you put it in a file and store it on your disk.

Here's a picture of a word processing document. If you were to peek inside that document and see the way it actually looks inside the computer, you'd find something like this:

    

As you can see, the word processor stores lots of other fascinating tidbits in the file besides what you put in there. It uses that to tell itself how you want your document displayed -- what font and size to use (see where it says "Palatino"?), whether to center the text, and all the other formatting you can do.

Let's call that stuff Gunk.

The word processor puts that gunk there when you type in your document and knows what to do with it when you open it up the next time. So every word processing document you create has two things:

  • Your words (and pictures)
  • Gunk

Web Gunk

There's a similar kind of GUNK that web browsers use to display web pages. The difference is, with web pages you can write your own gunk.

HTML - Hyper Text Markup Language is the language you use to write your own web gunk.

Text Editor

Since we're writing our own gunk, we can't use a word processor. Word processors add gunk of their own and the only gunk we want in this file is the gunk we put there ourselves. So we need to use a type of program called a text editor.

Text editors put absolutely no gunk into the files they create. The only thing that ends up in the file is what you put there yourself. That's what we want.

On the Mac, a great freeware text editor is BBEdit Lite, available from Bare Bones Software (http://www.barebones.com). Or you can use SimpleText, which already comes with every Mac.

In Windows, you can use NotePad. In these examples, we'll use SimpleText, but the idea is exactly the same.

So fire up your text editor and let's write some HTML.

Files

Every web page gets its own file.

The file name should end with .html (.htm in Windows) and be called something descriptive, like:

index.html

Now just follow the steps.

1
The Text Editor

Launch the text editor by double-clicking on its icon.

The SimpleText looks like this:

You may launch NotePad in Windows from the Start button: click the Windows Start Button, select Programs, select Accessories, and then select NotePad.

Go to the File menu and select New. You get a blank page. This is where we're going to put our HTML.

Type this:

<HTML>

Then hit Return a few times and type this:

</HTML>

Our first bit of gunk!

This marks the beginning and end of the file, which should now look like this. The gunk tells your browser that it is looking at an HTML file.

 

<HTML>


</HTML>

There are two other bits of gunk we need to add to get our file ready. We need to define the beginning and end of the file header, and the beginning and end of the body of the file:

 

<HTML>

<HEAD>
</HEAD>

<BODY>
</BODY>

</HTML>

Notice anything? Yup, you can tell GUNK in a file by these things < >, and notice that they usually come in pairs, one marking the beginning and one marking the end of whatever it is:

< >
</ >


2
Content

So far all we have is gunk; let's put in some content. Let's make a web page that says, "I am an HTML Author."

The words and pictures in an HTML file go in the Body of the file, so let's put our words there.

 

<HTML>

<HEAD>
</HEAD>

<BODY>

  I am an HTML Author.

</BODY>

</HTML>

NOTE: Your file actually looks something like the one below. However, to help you keep your content separate from your gunk, in the guide we'll use examples like the one above where the html is blue and the content is black.

3
Save the File

Save the file, just like you would save a word processing file, by selecting Save from the File menu and typing in the name of the file. Let's call this one test.html.

Just remember the location of the folder in which you save it!

Now you can launch your browser and look at your file, just as if it were a real web page, which it is!

4
Launch the Browser

You can use your browser to look at files on your disk as well as pages on the Web. In Netscape or Explorer, select Open Page or Open File from the File menu, locate the folder where you saved test.html, and open it.

(NOTE: If your browser connects you to the Internet and goes to the same web site every time you launch, you can make it stop. In Netscape, select Preferences from the Edit menu, click on Navigator in the category list, select Blank Page, and click on OK. In Explorer, select Preferences from the Edit menu, click on Home/Search in the list under Web Browser, click on the "Use None" button, and click on OK.)

Here's what it looks like when you open the file you just created:

Congratulations! You've just written your first web page.

Now let's move on to Words.

Intro | Comm | Pub | Five Easy | Web Ed | Found | Squeezing | Standards | Animate | Epilogue

Files | Words | Pictures | Color | Links

 

All contents copyright (C) 1999-2007 Wanda Wigglebits. All rights reserved.