Making a Web Page

So now we know some more facts about web pages:

  • each page begins and ends with <HTML and </HTML>
  • There are two parts to each web page: the HEAD and the BODY
  • The HEAD contains the TITLE which appears in the Title Bar
  • The BODY contains the web page information

And to review some previous basic points:

  • A web page is really just a text file with HTML commands
  • "Enter" and more than one "space" will not be visible
  • Most commands have beginning and ending tags
  • Most commands have attributes

Knowing these basic points, we can now move on an start making a web page.


Before You Start

Remember, a web page is nothing more than a text file in a folder, on a computer connected to the Internet.

It is possible to have many folders, but for beginners, it is much more simple just to put everything inside one folder. You can practice with multiple folders later.

When you start to make a web site, you should ALWAYS begin by creating a new folder. The folder will contain all the web page and image files.

So go ahead and create a new folder in your personal area on the computer. For this practice, give it the name "mywebpage" (all lower-case, no spaces).

IMPORTANT NAME RULES: When you give names to files and folders for web pages, they must follow some basic rules:

  • they should be lowercase (uppercase will work, but it can cause problems)
  • they should have only letters, numbers, dashes ( - ) or underscores ( _ )
  • the names should NEVER have spaces or puctuation/symbols except for dash and underscore
  • web pages should always have a filename extension of .htm or .html; folders names do not have an extension

Please remember these rules! If you break them, you may have problems.


Where to Start

As I mentioned, a web page is a text file. You only need a very basic text editor to make one. Every Windows operating system has a program called "Notepad" which is good for writing web pages. You can find Notepad in the Start Menu, under All Programs, inside the Accessories sub-menu:

When Notepad opens, you will see a very simple window:

At this time, I would like to point out some basic rules about typing web pages:

  • Be very careful to avoid ANY spelling mistakes in the commands
  • Don't forget to put both angle brackets < > around every command
  • Don't forget ending tags where they are needed
  • Don't forget to add the backslash "/" in the ending command

Now, type in the following text:<BODY>

<html>

<head>
<title>
Welcome to My Web Page!
</title>
</head>

<body>
Hello!
</body>

</html>

I have entered the same thing in my example below. I made the plain text red so you could see it more easily, but you don't have to do that.

Notice that this web page is very simple. It will have a title in the Title Bar, and it will have one word in the web page. But it's a start!

Now it's time to SAVE the web page. Remember, you must save it in the folder you made!

Start to save by opening the FILE menu and selecting "Save" or "Save As...".

(NOTE: in any program, the first time you save a file, these two commands will do the exact same thing, there is no difference. But the second time and later, the two commands are different!)

You should see this dialog box:

You must do two things:

1. First, navigate to the correct folder--in this case, the folder called "mywebpage":

2. Give the web page the correct name. A few rules about web page names:

  • all web pages should end with the filename suffix ".html"
  • the FIRST web page you make must be called "index.html"
  • do NOT use capital letters or extra punctuation; the only "period" should be before the filename suffix

So this page's "save" dialog should look like this:

When you have done these two things, then click "Save."

Now, find the folder where you made the web page (index.html), and open it by double-clicking. It should open your browser and show you the very simple web page you just made.

Congratulations! You just made your very first web page!


Now You Know

Now you know how to make a very basic web page. You are ready to start making more complex web pages.