CSci 1101 Lab 2. Due Tuesday, Feb. 9 at 11:59pm

Goals of this lab:

Tasks for the lab:

  1. Find your project partner, or if he/she is not there, pair up with anyone in the class who doesn't have a partner. The goal is to work together at the same machine, one person typing (the "driver"), the other person directing the process (the "navigator"). You should switch roles often.
    If you don't finish the lab during the class time, you can either get together later and finish it, or send the html and css files to your partner who doesn't have a copy, and finish it separately.
  2. One of you needs to log in to a lab machine. Use the password that you set at lab 1. Start the Firefox browser and open this page. View the html source (View -> Source).
  3. Start jEdit, copy the page source into a new file, and save it with any name and the html extension in your public_html or its subfolder.
  4. Change the name of the css file in the link tag (in the head of the html file) to a name that represents your group (can be a combination of your names or any other name that your project group would like to go by). Do not use spaces and special symbols in the file name. The file must have the .css extension
  5. In jEdit window go to File -> New, open a new file, and save it with the name that you just specified in the same folder as your html file.
  6. Open the file in a Firefox tab by typing http://csci1101sp10/~yourloginname/pagename.html (replacing the login name and the pagename with the actual names)
  7. In the CSS file write settings for the properties given below. Make sure that your formatting is displayed in the page (open it in the Firefox tab and reload it after every change). Also make sure that your CSS validates.
    You need to set the following properties:
    1. background color or background image property for the entire page (the body tag)
    2. colors and/or fonts for links, including separate colors for visited links, active links (a:active, takes place when you start pressing the link), and the hover property
    3. formatting for at least two tags as a group (for instance: h1, em). Choose the tags that appear in your page so that you can see that the formatting works.
    4. set different formatting for the list elements in classes odd and even
    5. add formatting for the class center so that not only it centers the text, but also so that it changes the font or the letter spacing.
    6. use find-and-replace in your HTML file to change the class upper to class standout and format it in css so that it is very noticeable on your page.
    7. set background color and border properties of the element marked with the id footer
    8. Add two more css settings of your choice, explain (in comments) what they do. Make sure that they work as expected and that the css file validates.
    Make sure that your setting are different from the ones in the sample CSS file. Use links on the resources page to look up colors, fonts, etc.
    Please do not use the style attribute.

How to submit this lab

You don't need to submit anything, simply leave your web page on the server and send me and your partner an e-mail with the page location. Don't change anything in it after the deadline until you get the grade (by e-mail). If you would like to experiment with CSS further, simply make a copy of your files with different names and use those.

If you have any questions, please come to my office hours or e-mail me.

CSci 1101 course web site.