Winter 1998 Computers and Society
GST 2710, Section 90571
AGS 3360, Section 95198

Last updated: 3/16/98
Link back to course Welcome...

Making Your Personal Web Page

Background. The file XXXX.HTM is a template that you can use to create your own personal Web Page. The directions below tell you how to edit the file to make it your own. Edit the file on the floppy disk, save it back under the name "frstname.htm (where "frstname" is your first name), and I will put it on the course Web Site.

If you are familiar with HTML, you do not need to follow the directions below, or even to use the template file. (HTML stands for HyperText Markup Language, the set of codes used to write Web content. HyperText is linked text, in which you can go from one section to another, or from one file to another, by clicking on HyperText links.) If you are adventurous, try using the template file but not using the directions. If you have access to an HTML Editor, such as Microsoft Frontpage, HotMetal or HahtSite, and if you know how to use that editor, then create your file directly; you do not need these directions. (Note: some people have tried to use other software to create their personal Home Page, and not all of this software has been able to save as "*.htm" or "*.html". In order to go on the course Web site, your software must offer an option to save your Home Page under one of these two extensions.)

When you first open the file in Works, you will see the HTML tags, enclosed in angle brackets <>. With only a few exceptions, the directions below will NOT direct you to edit the markup tags inside the angle brackets, but instead to edit the text outside of the angle brackets. The text outside of the angle brackets is what appears on the screen, while the tags inside the angle brackets tell the Web Browser (for example, Netscape) how to format that text on the screen.

Most HTML tags come in pairs marking off the text to be formatted, with <tag> starting the markoff and </tag> ending the markoff ("tag" will be different for each tag). If you have edited HTML directly this way before, often the </tag> is not required, but here we will use them.

And when you are done editing and ready to save the file, make the filename your first name (up to a maximum of eight characters) and keep the extension as "htm", for example david.htm.

Directions.

  1. Open the file XXXX.HTM in Works.
    1. Start Works
    2. In the opening Works Wizard, choose to Open An Existing Document
    3. In the "Open" dialog (title bar says "Open"), down at the bottom, use the pull-down list to change List Files of Type to "All Files (*.*)"
    4. Change the drive to a:
    5. Double-click on xxxx.htm
    6. Now, since this is not a standard Works document, Works asks for help in how to open the file. Click on the "Word Processor" button. The file will open at this point.
    7. It is a good idea to save it right away under its final name. Choose the File / Save As... menu item. In the "Save As..." dialog, make sure that "Save File as Type" down at the bottom of the dialog says "Text". In the "File Name" text box, edit the filename to be "firstname.htm" where firstname is your first name (up to a maximum of eight letters). Then click the OK button.
  2. Find the document title near the beginning of the file, between the <title> and </title> tags. Change "XXXX" to your name, exactly as you want it to appear. There is no length limit for your name; it can be much longer than the four characters. It can also include first name, middle initial or name and/or last name, together with spaces between those parts of your name.
  3. [Notice the "bgcolor" and "fontcolor" tags just under the title. The colors are specified as Red/Green/Blue with two hexadecimal (base 16) digits for each color. 00 is none of that color, and FF is the maximum intensity of that color. FFFFFF is the maximum intensity of red, green and blue, which is white. FF0000 is the maximum intensity of red, with no green or blue, or a pure, intense red. 000000 would be no color of any type, which is black. You might want to experiment with other colors, but be prepared for surprises if you haven't done this kind of thing before.]
  4. Find the HTML tag that starts <img src= and change "frstname" to your first name, up to a maximum of eight letters (if your first name is longer than eight characters, include only the first eight characters). This is what I named the file with your class picture, so this will put your picture on your Home Page.
  5. Very soon after the img tag, find the XXXX and replace it with your full name.
  6. Very soon after the name, find the date "9/17/97" and change it to the current date.

    All of the other sections of the template can be deleted or changed in any way. Experiment. If you want to start over, load a fresh copy of the template file.
  7. Find the personal statement (something about way cool, I think) and change it to your own.
  8. The list of interests starts with the first <ul> tag (ul = unordered or bulleted list) and ends with the first </ul> tag. Each new bulleted item in the list starts with the tag <li> (list item) and ends with the </li> tag. Without changing the <ul>, <li>, </li> or </ul> tags, you can edit the list of interests to be your own interests. If you want a shorter list, delete list items by deleting the <li> tag and the text after it, and its </li> tag. If you want a longer list, add items by adding a new line with an <li> </li> pair and text in between for each additional item. If you want to delete this list entirely, delete everything between the <ul> and </ul> tags, including those tags themselves.
  9. Similarly, edit the list of hobbies to suit yourself.
  10. If you want lists of other things than interests and hobbies, find those terms and change them to what you want. The <strong> and <b> tags make those marked off sections boldface.
  11. If you want to include your own favorite quote, change the author, and change the quote itself, but leave the codes for the quotation marks (&quot; -- all 6 characters).
  12. The tag that has mailto in it creates a link that will open up the Browser e-mail function to send an e-mail message to you. (The user's Browser must first be configured with a return e-mail address by filling in the mail-related boxes for the Options / Mail and News Preferences... menu item.) If you do not want an e-mail link, delete the whole line, starting with <p><a href and ending with </a>. If you do want the e-mail link, change the yyyy@cll.wayne.edu to your own e-mail address. Note that this occurs in two places on this line, once in the tag to send e-mail, and once in the text to display on the screen. Change both occurrences.
  13. Now save the file to the floppy diskette, using the filename consisting of your first name (up to a maximum of eight letters) and the extension htm.
  14. Preview your Home Page in Netscape. Your picture will not show up in this preview, but it will when your Home Page is loaded onto the course Web Site. Everything else will look just the way it will on the Web. To preview in Netscape,
    1. Since you do not need Internet access for this preview, we will use the Windows Netscape instead of the Mac version.
    2. You must first close Works; Works will not let any other program use the file when Works has the file open.
    3. Start Netscape in Windows.
    4. Choose the File / Open File in Browser... menu item
    5. You will see the standard "Open" dialog. Navigate to the file and open it.
    6. If you want to make further changes, go back to Works and edit the file.
  15. With the file in Netscape, when you have it the way you want it, print out a copy and turn it in.