HTML Lab

CS 102

Feb. 8, 1999

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 the S: drive 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. Double-click the file icon; the file should open in Internet Explorer. Pretty boring page, right?

  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

    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;
      modiDate = modiDate.substring(0,8);
      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
Sun Feb 7 22:15:00 EST 1999
Tom Kelliher