HTML Lab

CS 102

Nov. 9, 2001

In this lab, you'll create a small web page using notepad, adding features as you go and observing the changes.

  1. Create a new folder for this work. Name it HTML. Copy the image file baltmap.jpg from the HTML Lab folder on \\ phoenix\cs102 to the HTML folder you just created.

  2. Start notepad. From the Start menu, choose Programs, then Accessories, and select notepad from there.

  3. Type the basic framework of a web page into notepad: 
    <html>

<head>
</head>

<body>
</body>

</html>
    Save the file into your HTML folder, using the name "index.htm" (this is one of those few times when you should type the quote characters). Find the file in your HTML folder and double-click the file icon; the file should open in Internet Explorer. Pretty boring page, right? Well, we're just getting started here.

  4. Let's give it a title, a heading, and change the default color scheme.
    1. In the head block, add the title My First Web Page.

    2. In the body start tag add the attributes bgcolor="white" and text="blue". Or, choose your own colors from the list at http://phoenix.goucher.edu/rgb.txt (Some of these colors work better than others --- I always type them in lower case characters, with no spaces between words. The color names that end in a number don't seem to work for me.)

    3. In the body block, add a level 1 heading: My First Web Page.

    Save the web page, return to Internet Explorer, and refresh the page. It looks a little better now, right?

  5. Now, we'll add a few more improvements.
    1. Surround the level 1 heading tags with a pair of tags to center the heading.

    2. Put a paragraph tag after the heading and then type the text This is my first web page. Isn't it cheesy?.

    3. Type a second paragraph tag and then type the text I attend Goucher College. Here's where it's located:. Add another paragraph tag.

    4. Add tags to bold first and italicize cheesy.

    Again, save the page and view it in Internet Explorer. Don't forget to refresh the page.

  6. Let's add a few multimedia effects:
    1. Surround Goucher College with a pair of link tags, linking the text to the College's home page at http://www.goucher.edu/.

    2. Following the last paragraph tag you added, add an image tag using the baltmap.jpg as the image on the page. After the image tag, insert another paragraph tag.

    Save the page and view the results.

  7. Almost done. Just a couple more things:
    1. Add a horizontal rule tag following that last paragraph tag and then add another paragraph tag.

    2. Following that paragraph tag, adding the following JavaScript code: 
         <script><!--
      var modiDate = document.lastModified;
      document.write("This page last updated on " + modiDate);
   // --></script>

    Save the file and view the page. You're done. How's it look?

  8. Feel free to experiment with the page and see what happens.


Thomas P. Kelliher
Fri Nov 9 10:15:38 EST 2001
Tom Kelliher