CIS 1.0/Biomedical computing
Fall 2006
Lab B2/HWB Part I


  1. For this assignment, you will create several HTML files in Notepad.
  2. Type your name in the files and your email address as comments.
  3. Save your work!!!
    BEFORE YOU LEAVE THE LAB, make sure that you save your work (both HTML files and any images files you use) by storing them on a USB flash drive or by mailing them to yourself.
  4. When you are completely finished with all the steps, zip all your files together and email the zip file to me as an attachment. I will explain how to do this in session B.3.
  5. My email address is:
The assignment is due (both parts) on Tuesday October 3rd, 2006.



Step 1. Get started.
(1 point)

  1. Start up Notepad.

    In the file, you will write HTML code to do the things listed below.

  2. Set the title of the web page (the title is what is displayed in the heading bar of the browser, not in the body).

  3. Set the background color of the page to something other than the default (usually white).

    You can do this using the body tag and the bgcolor parameter, like this:
    <body bgcolor="yellow">
    which sets the background color in the browser to yellow.

  4. Set the text color of the page to something other than the default (usually black).

  5. Display text welcoming the user to your web page (e.g., "Welcome to Prof Parsons' home page!")

  6. Save the file and name it with your last name followed by the .html extension. For example, my file would be called parsons.html. Remember to tell Notepad not to put the "txt" extension after ".html"!

  7. Try opening the file with a browser and see what it looks like. If any of the elements above don't work, go back into the Notepad window, and edit the file to fix them. The reload the file in your browser. Keep doing this until everything looks just perfect :-)

Step 2. Add a list.
(1 point)

  1. Add to the file HTML that displays an unordered list of five of your favorite foods.
    Hint: use the <ul> tag.

  2. Be sure to make the page user-friendly and by putting in explanatory text telling what the list is (e.g., "Here is a list of my five of my favorite things to eat:").

Step 3. Create second HTML file.
(1 point)

  1. Open a new file in Notepad.

  2. In this file, put HTML code that displays a recipe for one of your five favorite foods. The recipe should contain step-by-step, numbered, detailed instructions for how to prepare the recipe. For example:
    1. Preheat the oven to 350o.
    2. Take the butter out of the refridgerator to soften.
    3. Measure out 2 1/4 cups of flour and place it in the sifter.
    4. etc.
    Hint: use the <ol> tag.

  3. Back in the first file, make a link (i.e., a href=...) to the second file, so that when you click on the list item for which the second file contains the recipe, you go to that recipe page.

  4. When you save this file, name it with your last name, followed by the number 2, followed by the .html extension. For example, mine is: parsons2.html.

Step 4. Add a table.
(1 point)

  1. As part of the recipe (second) file, write HTML code that uses a table to list the ingredients.

    The table should have at least 2 columns: one for the amount and one for the name of each ingredient.

Step 5. Add an image.
(1 point)

  1. In either file (first or second), write HTML code that displays a picture (image) in the page. This can either be a picture of yourself or of the recipe, or anything else appropriate. You can download a picture from the internet.


Part II (worth 5 more points) will be available in the lab on Wednesday September 27.