UW UB Math/Science Lab #3

 HTML 2 – Tables and More

 

In today’s lab we will go back-and-forth between FrontPage and HTML to learn about tables.  We will first use  MS FrontPage to generate a simple table.  Then we will then quit FP and edit the HTML directly to make the page appear the way we want.

 

  1. Make sure that Front Page is set up the way we discussed in the last class (got your handout?).  If you don't remember to bring this sheet, go to:   http://depts.washington.edu/ubms/reference/fpset.htm
  2. Open a new (normal) web page.
  3. Type "Changing Tastes" and hit return.
  4. Go to the Tables menu and choose Insert Table.  Make sure that the Table settings are:
  5. Type The following into each of the cells in the first row:

Foods I've always liked

Foods I've never liked

Foods I used to like

Foods I didn't used to like

  1. The headings you've just typed are the labels for each column.  In the three rows below, type three foods that fit in each of the 4 categories.
  2. Select all of the cells in the table.  Right click on this table and choose Cell Properties.  Set the properties for the cells exactly as shown:
  3. Save the file in My Documents with your name (less than 8 characters, all lower case, no symbols).
  4. Exit MS FP, and let us know when you are done.

UW UB Math/Science Lab #3

HTML 2 – Tables and More- (cont.)

 

Now it's time to play around in the HTML.  Try and make all the changes described below in WordPad.  If you can't figure out how to do something, feel free to ask an instructor or another student.

 

  1. We want to edit our documents in a split screen like we did in the last lab.  Open your new page in a WordPad.  Reduce this window to fill only the bottom half of the screen.  Open the same page in a browser window and have the browser fill the top half.
  2. Remove the unnecessary FrontPage propaganda from the document head.  Be careful not to remove the Title. 
  3.  Change the title to something that describes your page.
  4. Replace the Paragraph tags in the first line of the body with Heading 1 tags.  To see what changes occurred in your web page, you have to do two things.  First, save your changes in WordPad.  Next, click on the Refresh button in the browser to load the updated page.
  5. Align the text "Changing Tastes" to the center of the page.  Save and Refresh.
  6. The tutorial talked about a way that you could change the first row of a table to Table Headings.  Go for it (hint- you'll have to make this change for all the cells in the first column).
  7. Next we will play around with the width of this table to see how that affects the way the page appears.  Make each of the following changes to the table and see what happens.  Save and Refresh after each change.

A.  Remove the <table> width statement.

B.  Place the width statement back in and set the width to 45.

C.  Change the width to 9000.

D.  Set width to the optimal width for on-screen viewing (hint: remember lecture?)

  1. Countries have borders; tables have borders.  Table borders are much easier to change- it seldom takes a war.  Let's change some borders without firing a single shot.  Remember to Save and Refresh after each change:
    1. Change the cell padding to 10.  (whoa)
    2. Reset the cell padding to 0  (better?)
    3. Try setting the cell spacing to 10.  Be sure to notice the difference between cell padding and cell spacing.
    4. Change the <table>  border size  to 5.
    5. Okay, enough playing with borders. For our final settings, set the set border size to 0 (almost always the setting of choice), cell spacing to 0, and make sure the padding is still at 0.

 

  1. We've gotten rid of the table borders, but now it might be a little hard to keep the info in the table straight.  How else could we make the table more readable?  How about color?

 

    1. Change row 1 to a non-white web safe color.  (Hint: you need to change the color for each cell in this row.)
    2. Change the color of rows 2 and 4 to a second non-white web safe color (rows 2 and 4 are the same color).

 

  1. When you're done reformatting your table, save your work and quit WordPad.  Follow the instructions on how to transfer your page to the server.