Creating a Simple Web Page

There are many ways to create Web pages. Hundreds of companies have created tools to help with the process in one way or another. Our goal here, however, is to understand how Web pages really work, rather than have a tool hide the process from us. Therefore, we will use the simplest tools possible -- the ones already on your machine.

 

On your machine you have a program, or application, that can create simple text files. On Windows machines, this application is called Notepad. On a Macintosh, this program is called SimpleText. If you cannot find these programs, it is also possible to use a basic word processing program, like WordPerfect or Microsoft Word.

    Note:
  • In a Windows 95/98 environment, click the Start button, click Programs, click Accessories and click Notepad.
  • In a Windows 3.1 environment, click Accessories (in the Program Manager) and click Notepad.
  • In a Macintosh environment, click Macintosh HD, click Applications and click SimpleText.

Once you have the proper program open on your screen, type (or cut-and-paste) the following HTML text into the window: 


<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    Hello there. This is my first page!
  </body>
</html>
Whether you put the tags and text side-by-side, row-by-row or indented will not make a difference in how the text is displayed in a browser window. Whether you use uppercase or lowercase letters within your tags also does not make a difference.

Now you need to save this file somewhere so that you can find it in a moment. Save it to the desktop, or, better yet, to a directory that you set up to hold all of the pages you are going to create. Save it to the filename first.html.

Next, open the page in your Web browser (e.g., Microsoft Internet Explorer or Netscape Navigator). All Web browsers have a way to open a file stored on the local machine. In Internet Explorer and Netscape, select Open File from the File menu at the top of the window. Open the file first.html. When you open it in your browser, it will look something like this:


Three things are identified in this figure:

  • You can see that the page has the title "My First Page."
  • You can see that the page's body contains the words "Hello there. This is my first page!"
  • You can see that the URL being displayed in the address window is C:WINDOWSDESKTOPfirst.html from the local hard disk, rather than the usual http://... that a URL would contain if we were receiving the page from a server on the Internet.

By looking at the HTML text that makes up your first page, you can see exactly how the page got its title and body.

Now that you have created and viewed your first Web page, you are well on your way to becoming a Web page pro. The key to knowing everything about how a Web page works is to learn more and more of the HTML tags that let you customize your pages. You'll also want to learn about tools that can help you create tables, frames and graphics for your pages. This Web page series will guide you through all of the information you need.

Resources
  • The HowStuffWorks Big List of HTML Tags - A printable, one-page reference guide that contains all of the common HTML tags on one easy sheet

  • The Try It! page - Type in (or cut-and-paste) any piece of HTML code and see how it will look immediately

  • This article's detailed Table of Contents - Helps you find things fast