CPSCI 105: Explorations in Computer Science

Lab 10

February 27, 2007

Today we'll do some work with CSS background images and work on XHTML tables. Do the “Getting Ready” part of the lab as soon as you arrive in class today. Follow the instructions carefully so that everything will go smoothly when we start using the various windows you've got ready.

Getting Ready

1. Log in on warp and make public_html/labs your working directory.
2. In another browser window (or tab—your choice) connect over the web to the file background.html (that you copied into your labs directory last week).
3. In another browser window (or tab—your choice) open the file logo.html (that you also copied into your labs directory last week).
4. Start a new instance of Firefox (i.e., go to the Start menu) open this file: simple table examples.
5. Start a new instance of Internet Explorer (you may have to hunt for it in the Start menu) and also open it to the table examples file.
6. Minimize both table example browser windows. (We'll use them later.)
7. Open the file logo.html in emacs. While you're waiting for everyone to catch up, take a close look at the head section of that document.

Background images in CSS

I'm going to talk you through this. Take good notes.

Tables

I'm also going to talk you through this. Take even better notes.

Labwork

OK, we've talked about tables. Now you can make some tables on your own.

1. Use your template to create a new XHTML file named lab10.html. Make any adjustments to the link elements in the head of the document so that the browser can find any referenced stylesheets.
2. Go to the address element and fix the relative URL of your “about me” page. Also fix the relative URLs in any img elements at the bottom of the document.
3. Write an internal stylesheet for this document that puts distinguishing styles on all th and td elements. (You can write your own or copy the appropriate parts from the simple table examples file. It's OK to copy, but if you do, do not include any of the other style settings. That way, I'll know that you understand what you're doing.)
4. At this point, save your file, load it into a browser, and validate your XHTML and CSS. Fix any problems. Raise your hand if the validator gives you a message you don't understand.
5. OK, now create a simple table. It should have two columns and four rows. Each column should have a heading, ‘element’ and ‘tag’. In the remaining rows, list the name of three HTML elements and their corresponding start tags. (For example, "anchor" and "<a>".) Your table element should contain a summary attribute explaining what's in the table. Make sure your heading elements have appropriate scope attributes.
6. Save your file, refresh the browser it's being displayed in, and validate your XHTML code. Fix any mistakes until your table both looks correct and validates.

[ Return to the CPSCI 105-01 homepage ]