HTML Lab

CS 102

Oct. 18, 2006

In this lab, you'll create a small web page using Notepad, adding features as you go and observing the changes. The purpose of this lab is for you to ``peek behind the scenes'' and see what the HTML language looks like and how it works.

  1. Create a new folder on your G: drive for this work. I suggest naming the folder Html.

  2. Start Internet Explorer and open a Web page (any Web page will do) with an image on it. Click the right mouse button on the image and choose Save Picture As... from the menu.

    Save the picture into your Html folder. Make a mental note as to whether the image is a GIF or a JPEG image.

  3. Start notepad. From the Start menu, choose Run..., type notepad in the text box and click OK.

  4. Using Notepad, type the basic framework of a web page: 
    <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.

  5. Let's give your new Web page a title, a heading, and change the default color scheme.
    1. In the head block, add the title My First Web Page. The head block should now look like: 
      <head>
<title>My First Web Page</title>
</head>
      Note how we added this to the block, not the tag.

    2. In the body start tag add the attributes bgcolor="blue" and text="white". 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.) Or, try the obvious colors such as red, green, yellow, etc. The body start tag should now look something like this: 
      <body bgcolor="blue" text="white">
      Note how we added this to the tag, not the block and that the attributes are added between the angle brackets.

    3. In the body block, add a level 1 heading: My First Web Page. Hint: Use <h1> and </h1>.

    Save the web page, return to Internet Explorer, and refresh the page. If you don't refresh the page, you won't see your changes! It looks a little better now, right?

  6. Now, we'll add a few more improvements.
    1. Add the align="center" attribute to your <h1> tag to center the level 1 heading.

    2. Type a short paragraph of text following the level 1 heading.

    3. Finish your paragraph with a paragraph tag (<p>) to separate it from the next paragraph.

    4. Type a short second paragraph. Make sure this paragraph contains the sentence I attend Goucher College somewhere.

    5. Add tags to bold (use <b> and </b>) some text. Add tags to italicize (<i> and </i>) some text. Make some text appear red (<font color="red"> and </font>).

    6. Change the font of the entire page body to Arial (<font face="Arial"> and </font>).

    Again, save the page and view it in Internet Explorer, refreshing the page so that you see the new changes.

  7. 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/ (<a href="http://www.goucher.edu/"> and </a>).

    2. Following the last paragraph tag you added, add an image tag (similar to
      <img src="pict.gif">) using the image file name you saved earlier as the image on the page. The file extension has to be .gif or .jpg, depending upon the image type: GIF or JPEG, respectively. (You did note the type of image, didn't you?)

      Insert paragraph tags before and after the image tag.

    Save the page and view the results.

  8. Almost done. Just a couple more things:
    1. Add a horizontal rule tag (<hr>) following that last paragraph tag and then add another paragraph tag.

    2. Following that paragraph tag, adding the following JavaScript code, entering it exactly as you see it written here: 
         <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?

  9. Now that you're a ``Webmaster,'' feel free to experiment with the page and see what happens.


Thomas P. Kelliher 2006-10-17
Tom Kelliher