So, you want to make a Web Page!
Lesson 1

Just like 'follow the bouncing ball', power up Notepad {or Mac BBedit} and type these characters (or copy-n-paste them)... {TCF389: You may find these keyboard shortcuts handy: copy is CONTROL-C, cut is CONTROL-X and paste is CONTROL-V. The Mac equivalents are CMD-C, CMD-X and CMD-V.}

<HTML>
</HTML>

Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag.

Think of tags as talking to the browser, or better yet giving it instructions. What you have just told the browser is 'this is the start of a HTML document' (<HTML>) and 'this is the end of a HTML document' (</HTML>). Now we need to put some stuff into it.

Every HTML document needs a pair of HEAD tags.

<HTML>
<HEAD>
</HEAD>
</HTML>

The only thing we have to concern ourselves with in the HEAD tags (for now) are the TITLE tags.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>

And the bulk of the page is going to be within the BODY tags.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Oh, and one more thing, give your document a title.

<HTML>
<HEAD>
<TITLE>My big ole bad page!</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Now save it, not as a text document, but as a html document. Save it as page1.html on a floppy disk (or in a new folder somewhere). If yer a little fuzzy about how to do this then here's what you do (in Windows)... In your Notepad {BBedit} window click File then Save as.

{TCF389: It's best to use a Zip or floppy disk to save your work. If you didn't bring one today, then create a temporary folder on one of the computers--as Joe explains next. Name your folder "TCF389tutorial".}
You will be presented with a dialog box. Make a new folder by clicking this ->

Name it whatever you want. Then double click on it to open it up. Where it says File name: type in page1.html Where it says Save as type: make sure it says All Files(*.*)
Hit return and you're done!

Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world could see your creation!

{TCF389: To view your new Web page while it's on the hard disk, start Microsoft Internet Explorer (MS IE), then go to the File Menu and select Open (or press CTRL-O). When you see the Open Dialog Box

click Browse. Go find page1.html and double-click it to select it. You'll be returned to the Open Dialog where you click OK.}

Unfortunately, as you can see, the page is just a little bit blank (but it is still a legitimate HTML document!). Next order of business is to start putting some neato stuff in your page.

The best way to use this tutorial is to run Notepad {BBedit} and two instances of Netscape or Internet Explorer:

  1. one window containing this tutorial and
  2. the other containing your new page.

Just toggle between the two browser windows and the Notepad window. If you are looking at this lesson in Netscape right now, you can open a second instance of Netscape in one of two ways-

  1. Click on the File Menu and select New and then Window in MS IE or Navigator Window in Netscape (or press CTRL-N).
  2. Then, as before, click on File/Open..., browse to the file (page1.html), and open it.
  3. Or, if you know how to use Windows Explorer, you may find the icon of the html file you just made (page1.html) and double click on it.

Two quick points before we go on to lesson 2. One, what you made is a skeletal HTML document. This is the minimum required information for a web document and all web documents should contain these basic components. And two, the document title is what appears at the very top of the browser window.

<--BACK        NEXT-->

Introduction Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Index
PROFESSIONAL WEB DESIGN