How to Make A Web Page

Summary

<HTML>: <HEAD><TITLE> </TITLE></HEAD>; <BODY> </BODY>
</HTML>

It takes 8 tags -- 4 paired sets ordered in a specific way and saved as an .htm file -- to make an "empty" web page. To fill in the page, other tags and attributes (features) are used to add color, links, paragraphs, tables, and pictures.

This page describes step by step how to make and save the page, add stuff to it, and use this and other web pages as reference to enhance your page. YOU MUST BE USING Internet Explorer® IN ORDER TO COMPLETE THE WORK ON THIS PAGE.

Part I: BEFORE BEGINNING	WORK ENVIRONMENT	JUST THE BASICS	STORAGE	TEMPLATES
Part II: COLOR	TEXT	LINKS	THINGS

BEFORE BEGINNING

1st: Select, Copy & Paste, Don't Type.

This page is designed so that one may select then copy some text, then paste it as source code in Notepad® to build or edit a web page. Select then copy the text in the white box below. If you don't know how, review select and copy and paste first.

<HTML>: <HEAD><TITLE> </TITLE></HEAD>; <BODY> </BODY>
</HTML>

2nd: Simultaneously Use More than One Application.

If you are reading this page, you are using an application or program called a browser -- your browser is "open."

If you are like me, you also have a game "open" so that you can alternate between work and play. In Windows®, holding down the ALT key and simultaneously pressing TAB permits one to alternate between programs that are "open." When ALT is released, that program says "on top."

Keep your browser open, and also open Notepad®. Alternate between applications so that you become comfortable with using more than one application at a time. Once you have mastered having at least the browser and Notepad open simultaneously, open the browser again so that you have open one Notepad and two browsers. If you feel adventurous, open two browsers and two Notepads, experiment, then close the second Notepad.

WORK ENVIRONMENT

3rd: Consider your work environment.

Your ability to access web pages will be important once you begin work. Look below at a copy of my browser noting the Links line on the Toolbar. You might wish to add links on your browser to the pages you use most.

4th: Have open two browsers and one Notepad, as directed in step 2.

One of the browsers displays this page. The other browser will be used to display the page you are creating. This is the normal work environment. Sometimes it will be necessary to open an additional web page either to see it or to select/copy/paste it's code. This might be done through the browser you are reading now or by opening yet another browser.

5th: Paste in the Notepad, the text selected and copied in step 1.

JUST THE BASICS

6th: Save the Notepad file as an .htm file not a .txt file as shown below.

7th: You have created your first web page.

It's empty, but it's a web page. It looks like the one below. View it with your other browser.

8th: Type a title for your web page.

Do this between the title tags in the .htm file of the web page.

9th: Save the file. Refresh or Reload the browser.

Save using ALT+F, then S. Refresh using the F5 function key.

View your newly titled page. Below the title may be seen on the very top of the picture.

This select-copy-paste-type-save-refresh procedure is all it takes. The rest is inspiration, organization, and perspiration.

STORAGE, TEMPLATES

10th: Decide where to put the pages you wish to make.

Play first but organize before you begun to build. Thoughtful storage of pages and graphic files and sound clips REALLY MAKES A DIFFERENCE in overall work load. Links are named by location and if a location changes, the link must be redone. If many things -- .gif, .wav, .htm files are needed to present an idea, consider one directory for this main idea (a parent) and subdirectories (children) for the .wav. .gif, .txt, files which support the page or pages.

At the left, part of the directory structure for this web site is displayed.

Each major part of the site has its own directory/folder and set of subdirectories/folders.

There are two gif directories directories visible, one at the top which contains graphics used on the entire site, one in webstuf directory which contains graphics used by pages just in that directory.

Planning before building pays off.

TEMPLATES

Remember: It takes 4 pair of tags to make a web page.

<HTML>: <HEAD><TITLE> </TITLE></HEAD>; <BODY> </BODY>
</HTML>

Templates, premade models,make page building easier still.

11th: Open a template.

12th: Press ALT + V, then C to View the Source Code for the new template page.

13th: Press ALT + F, then A, not S, to Save the Notepad File with A new name much as you did in step 6 above.

The select-copy-paste-type-save-refresh model used here to build a page will be used to fill the page. Then you can made templates for each of the pages you wish. Here's a template for a page from the dictionary MATH SPOKEN HERE! or the course Freshman Math for Education, Math101Ed.

Step 12's View the Source Code technique will become more important as you become better at building pages. You'll probably wish to return to this page and view the source code for opening a new browser and page.

The select-copy-paste-type-save-refresh model technique used to copy material from the page itself may also be used on source code.

BEFORE BEGINNING

WORK ENVIRONMENT

JUST THE BASICS

STORAGE

TEMPLATES

COLOR

TEXT

LINKS

THINGS