in the Extra Toolbar.)
So is everyone ready to begin their first HTML document. Well all you have to do is follow me. Start your new HTML editor and follow along. When you launch your editor, you should have a large, probably white, blank area. This is where you will do your typing. If your editor has already placed in the basics (in other words, it is not blank), then just follow along. And for those of you who have to type it all in by hand - don't worry there is a shortcut.
Here we go, just type in the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
</HTML>
Each one of these are a tag. There is a starting tag and an ending tag. The only difference between the two is the closing tag has a / added. Most tags have an ending tag, and it is good practice to use them, even if they are not necessary. This is what give the browser directions on what to do. These ones tell it that this is the beginning(<HTML>) and the end(</HTML>) of an HTML document. The !DOCTYPE tells HTML validators which type of HTML document we have created. You can find out more about DOCTYPEs in your W3C HTML Help files. Now we need to add a little more.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>My First HTML Page</TITLE>
</HEAD>
<BODY>
Hello World!
How are you doing?
</BODY>
</HTML>
So now you may be asking yourself "What did we just do?" Well every HTML document must have a beginning and an end, (the <HTML> </HTML>), a
header(<HEAD> </HEAD>), and a body (BODY> </BODY>). The <TITLE> </TITLE> tags tell your browser what to put in the title bar.
(There is a lot of different tags that can go into the header, but we are only going to worry about the title for now.) You may have noticed the indentations on each new line. If you
look, you will see that each starting tag lines up with each ending tag. Although it is not necessary to indent like this, it does create documents that are easier to understand and edit later.
So it is usually a good idea to get into the habit early, your thank me later.
Now that you have written your first HTML page, you need to save it as an HTML page. When you save an HTML document you need to follow a few precautions. You need to use the "dot extensions" format (i.e. readme.txt or lesson03.html), not use any spaces, and keep it all lower case. Although these things are not necessary, they will help to prevent problems later.
Here are a couple of screen shots of me saving an HTML document using a few of the programs I suggested in Lesson 1. The key is to make sure that you have changed the "File Type" option to include .html and/or you add it to the file name in the "File Name" option.
If you are using Macintosh's BBEdit Lite, you will see this:
Now that you have saved your file, you probably want to look at it. Well, for those of you using Linux or Windows, all you have to do is double click on the icon and that will launch your page in your default web browser. If you are using a Mac, or you want to see your page in a different browser, you will have to launch that browser first, then click on FILE > OPEN, and then navigate to where you saved your page.
When you viewed your page, did you notice that Hello World! How are you doing? was all placed on on line? This is because HTML does not understand a "return" or multiple
spaces. Any time we press return, or place more then one space between items, the web browser will only render one space. If you want a return you have to use the <BR> tag. (Some times
referred to as a line break). So now go back to your page and fix the BODY to look like:
Hello World!<BR>
How are you doing?<BR>
and see what happens. Each sentence should now be on its own line. We will talk more about this topic later, but for now this will do. So how does it feel, now that you have taken your first steps to becoming a Web Designer? Was it as hard as you thought it would be? (Hope not!!)
I would like to suggest that you all take a little time and check out the W3C HTML standards that you downloaded in Lesson 1. If you check out the Organizational List of HTML 4.0 Elements, you
will see a list of all the tags that can be used in the HEAD element. Although all of these elements are optional, you will probably what to learn about the TITLE and META elements. These are
the ones that are most commonly used. Also take some time an check out your HTML editor. Each one that I suggested has a quick and easy way to enter all the elements that we talked about in
this lesson. Each program is a little different, but look for something like "Quick Start" or "Wizard". Also each one has a quicker way to view the HTML page then what we
did. Look around and I bet you'll find it. (Note to Pad users: To view your page quickly, you first have to save it, then click on "View Current Page" in the clipbook, or click on
the "Run Current File" icon in the Extra Toolbar.)