 | Writing HTML code
directly onto Notepad |  |
Notepad is a very basic text editing
program that is packaged with the Standard versions of Windows. You can identify
it by the icon of the little blue-covered notepad pictured above. The version
on the left is from Windows 1995 through MX, and the one on the right is the one
used for Windows XP. The Macintosh equivalent is called Simpletext. The HTML commands
used on either of these programs are identical. You will find Notepad by clicking
on the START menu at the lower left of your screen. Choose PROGRAMS (or "All
Programs" if you are using Windows XP) and then ACCESSORIES. For a demonstration,
view this movie that will show you how it's done (note:
the movie requires that you be able to view Flash on your computer. You might
need to install Macromedia's Flash player on your computer. The software is free and doesn't
take long to download). You can type your code directly onto Notepad or Simpletext
and start producing web pages right away without needing expensive software such
as Microsoft Front Page or Macromedia Dreamweaver. Even if you already have the
software, it's a good idea to know a little code so you can "tweak"
your page a little bit and get exactly what you want. Once you have the
program open, you should think of a name for your page and save it as an html
file. To save onto a floppy disk, choose FILE, SAVE AS, FLOPPY (A:) as shown below:
 |  |  |
The name for a home page is always index. That's the default name that your computer looks for when searching the web. So let's save this as index.
You'll need to specify the .html extension. Unlike, for instance, a Microsoft Word document, the extension is not automatically saved. You need to type index.html or it will save as a text file and your page won't work. Also, specify All Files or, again, you will wind up with a text file. If your file gets named index.txt by accident, it will not display as a web page.
After the page is saved, you can begin coding. Basic HTML commands all go inside <angle brackets> (there are other, less-basic commands that are exceptions to this rule, but for the time being just figure that the HTML commands are the ones inside the brackets). These commands are called tags.
The first thing you do is specify the language in which this document is being written. HTML stands for HyperText Markup Language. So your very first tag should be <HTML>. You will also need to tell the computer where the document ends. Closing tags are indicated with a slash in front of the command, so the very last tag on the page, at the end of everything, will be </HTML>
I usually add the </HTML> command when I first start a page, just to remind myself to do it. Then I hit "Enter" a couple of times and send it down the page and type everything I need in the space between <HTML> and </HTML>. Unlike a word processing program, Notepad and Simpletext do not recognize the "Enter" key, so you can put your tags on as many lines as you want and you can leave as much space between them as you like. Sometimes people like to double space their code just so they can read it more easily if they find they've made an error.
We
now have a file that looks like this. It's not very exciting yet, but hey, it's
a start!
Next we need to create the document's head. A web page is a little bit like a human being in that it has a head and a body. Also like a human being, the head always goes on top of the body, so you always start with the <HEAD> tag.
Underneath
<HTML>, open up your <HEAD> tag. Inside the <HEAD> we are going
to place the <TITLE> of your page (well, you wouldn't call a simple file
name like index.html a title, would you? You want a title that says something
about this document's content). Because a <TITLE> is not a file name,
you don't have to worry about spaces or capital letters and you can express yourself
as vividly as you like.
Here, I've used the title "Welcome to my home page!"
When you have written your title, close the two tags with </TITLE> and </HEAD>. By the way, HTML uses nested tags. If you want to become a good HTML coder you should always use the "first opened, last closed" rule. Notice that I opened <HEAD> first. Therefore, I close it after I close the <TITLE> tag. And this whole nested series of tags is securely nestled inside the <HTML></HTML> tags, which is where everything on the page ought to be.
Now save your page again (this time you can just do a standard "save" instead of "save as," since you've already given the file a .html extension) and open it up in a web browser such as Netscape or Internet Explorer. What do you see?
At first you might think that you
see nothing, but look again. The <TITLE> tag controls the little blue bar
at the top of the browser. You've just personalized your first web page!
Now let's move on to page two, which will explain about the <BODY>, or the most visible part of a web page.
Return to the top of the page