Last updated: 9/5/06
Link back to course Welcome...

Making Your Own Web Page

One of the assignments for this course is making your own web page to put on the class web site. One detail: while making a web page is an assignment for this course, if, for reasons of privacy, you do not want your web page to be public, then it does not have to be put on the web server. Otherwise, it is important to understand that your web page, along with those from the others in the class, will go in the same folder, so all web pages in this folder must have different names. That will come up under the "File Naming" section.

If you haven't made a web page before, one question probably leaps out at you: what should I put on it? The first rule is -- nothing goes on your web page that you don't want to be public. So here are some suggestions:

The requirements for your personal web page are a minimum of:

  1. Two font colors
  2. Two font attributes (e.g. Normal, Bold, Underlined, Italics)
  3. One picture
  4. One link (normally back to the home page for personal web pages, welcome.htm (relative URL)

File Naming

As mentioned above, all web pages for the class will go in the same folder, so all of the filenames have to be different. Your pictures are already in the folder with a filename constructed as follows:

Your main web page will also be named this way:

You do not need other files for this assignment, but if you do have other files, they should be names as follows:

Creating Web Pages and Web Sites

A web site is any collection of interlinked web pages housed together on one or more web servers. A sub-section of a web site, if it is self-contained and interlinked, can also be called a web site. For example, all of the courses that I teach have their own web sites, and they are all sub-sections of my web site, which is a part of the ISP web site, which is a part of the CLL web site. All of these are housed on the same web server. WSU has many web servers, and they are all part of the WSU web site. If you have several web pages, that is also a web site, which is part of the AGS 3360 web site, etc. etc. We will see later how to link web pages together into a web site.

A web page is an HTML file. An HTML file consists of two types of text: characters and tags. A tag is anything between angle brackets <...>, for example <u> is an HTML tag that starts underlining, and </u> is an HTML tag that stops underlining. (Things look very funny if the ending tag is missing or otherwise not working correctly.) everything outside of tags is characters, and goes on the computer screen. Tags say how the characters are formatted, but the tags themselves are not put on the screen..The HTML tags are defined officially by the World Wide Web Consortium, or WWWC, or simply W3C. However, Netscape and Microsoft are constantly competing to develop new tags, and the W3C wants to upgrade HTML also, so things are always changing. The version of HTML goes from 2.0 to 3.0 to 3.2 (current "safe" level) to 4.0 (not all parts are implemented). There are many software tools for creating HTML files, but they can be grouped into three main types:

  1. Text editors (low-level). Examples: NotePad, WordPad, TeachText. These are simple programs. the user types the characters and the tags by hand. These are slow, and you will make many mistakes by mistyping the tags, but they are free, widely available, and just about the only way to use all of the latest features of HTML. You see the characters and the tags together on the screen.
  2. Tag editors. Here you also see the characters and tags on the screen, but you can enter the tags automatically, and the editor will keep track that you have the starting (e.g. <u>, <em> or <b>) and ending tags (</u>, </em> or </b>) matched up correctly. These are more productive (faster) to work with. A good tag editor will also have handy examples of the effects of each tag.
  3. WYSIWYG editors. (WYSIWYG = "What You See Is What You Get".) These are like word processors. You do not see the tags on the screen, but instead the characters are formatted by using selection, menus and buttons. The screen view is very close to what a Browser would show. These are the most productive of all, but are more expensive, take more hard disk space, and often will not have the very latest features, especially if you have not upgraded. Also, the current generation is not quite up to word processor standards, and you will occasionally have to edit the tags directly.

With HTML, the situation is very different than it is with proprietary word processing file formats. Any HTML editor, of whatever type, should be able to work on the same file directly. And if one is not available, just use another. HTML is HTML and you can use different editors on the same file at different times, with no ill effects. (There are some places where the editor software can leave its name, and there is some competition there, to remove the name of the different editor, and change it to the name of the current editor, but that should not change the way the file loads or looks.)

So, you are free to use any HTML editor that you want. Here, we will go over what is available in the Macomb Lab, which is Netscape Composer, a good WYSIWYG editor. If you use other programs for your web page, make sure that they produce HTM files.

Preparation

The simplest way to create a web page or a web site, with other files such as graphics, is to prepare a folder and put all of the files for the web page / web site into that folder, and work with them there. That is what we will assume you have done here. The folder can be on your floppy diskette.

Starting Composer: start Netscape navigator, then
Compos1.gif (5959 bytes)

Working with Composer:

Compos2.gif (9301 bytes)

Using fonts other than "Variable Width" (which usually comes out as Times Roman) or "Fixed Width" (usually comes out as Courier) is inadvisable - the user must have that font installed on his/her computer.

Images are either GIF or JPEG files and must already exist; there are no drawing tools (MS Word has drawing tools and can Save As HTML, while converting drawings to GIF files but has other problems). Unlike Word files, which (normally) have the graphics embedded in the document, web pages only have links to the image files, which remain separate. For example, the figure above is put in this file using the tag <img src="Compos2.gif"> (OK, there is more to the tag but it would work as shown here).

Link tags look like <a href="welcome.htm">Link back to course Welcome...</a> -- this is the link up at the top of this page. To link to a web page on another server, include the full URL instead of the simple file name. For different folders on the same server, include the folder part of the path without the domain name of the server. Links are inserted using the link button, or the Insert / Link... menu item. The text between the <a> and >/a> tags is called the "link text", and is the words that will be blue and underlined when viewed in a Browser. Images can also be links; just use the "img" tag in place of the link text above.

To make a link within a page, first create a "target" (Netscape's name for them) or "anchor" (HTML name). Use the target button to create the target. Place the insertion point where you want to jump to, then click on the icon, type a name for the target, and then click OK. When you go to make the link, using the same link icon, you will see the name of the target; select it to jump there.

Other features:

Getting your files up to the web server.