Skip past the navigation links to the page content The Flying Cat Home

Handouts » HTML Handouts » Making a Page

How to Make a Web Page: Learning HTML Workshop


A Note About the Workshop

We cannot, in this one hour workshop, cover all of the issues that are central to creating and maintaining a web site. There are important issues of architecture and design that are crucial to the accessibility of your site. What we can do in this workshop, is to make a simple, stand alone page that will help you to understand the basics of HTML and how web pages link to each other.

A Little Background

A web page contains text, hyperlinks, images, sound and other multimedia such as movies. You can type out all of your text to start, then reformat that text to incorporate hyperlinks and other media.

Web pages are created as Hypertext Mark Up Language (HTML) files. These are plain text files that contain special codes to organize and present text and multimedia. Many people use special software programs, HTML editors to create their pages. Most HTML editors present a WYSIWYG view of the page you're creating and you can in fact create a web page without knowing anything about HTML. I recommend you understand the basics of HTML so that you can troubleshoot these editors and understand why problems arise and how to deal with those errors.

In this workshop we are going to make a web page containing an excerpt from Doris Lessing. You can learn about the formatting by viewing an example of HTML code

Planning and Preparation

Before beginning to make the page you need to know the following:
  1. You need an account that provides you with access to disk space on a web server computer.
  2. You need to know the account name and the password so you can upload your files to the server.
  3. What is the name of the directory where you will store the web page files? This name can vary from site to site.
  4. The name of the file that is your homepage. Like the directory name, this name can vary from one to another.
  5. Sketch out your plans for the web page in a word processor or ASCII editor.
  6. Collect any images you want to use, including backgrounds and color schemes.
  7. Create the page in your ASCII editor.
  8. Upload the files, the html file and any image files.

Anatomy of a Web Page

The commands used to organize and format the web page are called tags. These tags are defined by the use of angled brackets. The text inside the angled brackets can be upper case, lower case or a mixture of both. Often the tags come in pairs, the first turning on a special effect, such as boldface, the other turning the effect off.

A web page has two parts: the head and the body. The head contains administrative information that is not displayed in a browser, such as the formal title of the page. The body contains everything a person sees in the browser window.

Formatting the text is a task that's very similar to working in a word processor or publishing program. With one important difference: blank space. When a browser presents a web page, or "renders" the HTML code, it ignores blank space and carriage returns. You can press on the space bar all day long and what you get on the rendered page is a single blank space. That's true for pressing the enter, or carriage return, key. You must enter specific commands to break lines, insert blank lines and to handle blank space.

Creating a Web Page

Today we will create a small web page. The text is available for you to download, then we will format that text with HTML tags.

Download the raw text and Open it in Notepad

  1. Download the lessing.txt file.
  2. When you see the text displayed on screen, click on the File menu and select Save as.
  3. Save the file with the name lessing.txt.
  4. I will announce in the workshop the directory they've arranged for you to save the file in.
  5. Open that page in Notepad.
    click on the Start button.
    Select the option Run
    Type in notepad.
  6. Once Notepad is running, click on its File menu and select Open. Browse the directory structure until you see the filename, lessing.txt and open that file.

Viewing Your Work

You can view web pages from your hard drive, just as you can view them on the Internet. Open this newly saved file in Netscape.
  1. Click on the Netscape File menu
  2. Select Open Page
  3. An Open Page window will appear. Browse the hard drive to find the file lessing.txt and double click on the file name to open it.

Obtaining the background and carpet images.

You will need the background gif from the original sample and the image of the carpet. Open the story sample.

  1. To take the background image, place the mouse pointer anywhere on the page and click the opposite mouse button. If you're right-handed, this will be the right button.
  2. A pop up menu will appear. Click on Save background as. Save the file in the same directory as the text file.
  3. To download the carpet image, place your mouse pointer on the image itself and click the opposite mouse button. If you're right-handed, this will be the right button. Again, a menu will pop up. This time select Save image as. Be sure to place the image in the directory with the text and background.

Formatting the Page

Now you're ready to edit the file and insert the HTML tags. As you work along, save frequently and view your progress in Netscape. To see your changes you'll have to Reload Netscape. There's button on the tool bar for this command.

You may run into minor difficulties as you work along; the rendered page in Netscape may not appear as you intend. Just let me know and I'll be glad to look over your work. I've made so many typos and mistakes in HTML that I can spot an error faster than you can say "Who's the typist?"!

Web Site Issues

There are two basic approaches to building a web site: architecture and page design. Architecture refers to the maintenance of the site (directory structures, file names, etc) and navigation (making it clear to visitors where they are and where they're going). Page design refers to the content and "look" of the site and includes such issues as continuity of color and backgrounds, page layout, how the navigation links will be presented, and scripting.
  • Consider accessibility to your site. Many people with and without disabilities interact with the Internet and the WWW without graphical programs. The Web Accessibility Initiative and The Node Learning Technologies Network discuss this issue.
  • There are dozens of sites on the web that try to illustrate good design by using examples of bad design. My favorite is Jakob Nielsen's Top Ten Mistakes in Web Design.
  • Webwork is a clean and spare approach to linking tutorials and guides.
  • HTML Tips and Hints covers everything from relative vs absolute URLs to video hints.
  • And finally, Dr. HTML is a web-based service to check your code, links and spelling.



Workshop Files

The following files are used in this workshop

1994 - 2008 Paula Edmiston

http://theflyingcat.com/handouts/html/page.html
Last Edited: 25 Sep 07