The instructions for this lab will be much more vague than the previous lab because you (presumably) are much better at developing your own website than before. If you get completely stuck, you might find lab 1 to be useful. Of course, feel free to ask a neighbor or me for help (but do not copy from another person).

There should be enough computers to go around, so everybody's work should be individually done.

Basing your work off of the XHTML strict template that we've used before, do the following:

1. Rename the file to be in the format [pittusernamehere]_lab2.html (e.g., rym4_lab2.html)
2. Make a "My Favorite Movies" page (give it an appropriate title)
3. Make a short paragraph introduction / header introducing what you will show. Possibly give some commentary about your favorite movies (e.g., "As you can see, I love romantic comedies.")
4. Make an ordered list of your 5 favorite movies of all time
   1. Have each movie title link to a page with more information about the movie. For example, visit www.imdb.com and search for your movie there. Then use the <a> tag to allow users to click the movie title and get detailed information about it. Naturally, test that your links work.
5. Give your web page its own custom look. Change each of these¹⁾:
   1. text color
   2. text font-family (choose serif, sans-serif, or monospace)
   3. background color
   4. link colors
   5. (feel free to make more changes, time permitting)
6. Under each movie entry, make an unordered list of 2 of the actors/actresses in the movie. You do not need to make their names link to more information about them.
   1. Change the list style for the unordered lists on your page (to ul { list-style: disc|circle|square } )

You might notice that once you've applied your custom link color and once you have visited the link's page, and reloaded your own page, then the link is no longer the custom color you want it to be. This is because the <a> tag has more than 1 state. A link's state will determine how it will display:

• link (normal, unvisited link. This is only when the <a> tag is being used to reference another page)
• visited
• hover (the mouse is over the link)
• active (the page is loading, not often used as pages often load quickly)

So, simply specify how each state should be displayed. Here is some example CSS code that makes unvisited links blue and visited links black. When the user hovers over links on the page, they will turn red. Technically, each of these states is called a "pseudoclass."

a:link    { color: blue }    
a:visited { color: black }   
a:hover   { color: maroon } 

Now, add the CSS code to make your links appear as you intended. You can use any CSS attribute at all. For example, hovered links can become underlined and bold, and visited links can change color to "blend in" to the text by becoming the normal text color.

1. Submit your lab via FTP to the class FTP submission directory
2. Call me over to approve / look at your lab
3. Get your pop quiz returned to you
4. Have a good day