The instructions for this lab will be much more vague than the last lab because you (presumably) are much better at working with XHTML than before. Feel free to refer back to lab 1, to ask a neighbor, or to ask me for help.

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 sports comedies that take place in an alternate reality where hamsters are the dominant intelligent life form on Earth.")
4. Make 5 subsections about 5 different movies. Each subsection should have the proper heading tag (i.e., one of h1, h2, h3, etc.).
   1. Have each heading be the movie's title. Make this a 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 as expected.
   2. Make the content for each movie section have a 1 paragraph description (copy from www.imdb.com if you'd like) and then give a 1 paragraph review of your own (minimum of 1 sentence). Give this review paragraph a subsubheading using the appropriate h tag.
   3. Add a paragraph to the movie section that describes 2 actors/actresses in the film. Give that paragraph an appropriate h tag heading. You do not need to make their names link to more information about them.

1. Give your web page its own custom look. Change each of these¹⁾:
   1. text color (make h tags have a different color than p tags)
   2. text font-family (choose serif, sans-serif, or monospace)
   3. background color
   4. text alignment
   5. link colors
   6. (feel free to make more changes, time permitting)

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." We will learn CSS classes (and more pseudoclasses) later on.

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.

Another CSS attribute that we can change is font size. For example, we can force text that the user hovers over to become slightly larger, so that it sticks out more. To do this, we set the font-size CSS property:

p { font-size: 14pt; }

You can specify font sizes in terms of points (pt). This is what you're probably most used to. We'll review others later.

Go ahead and change the font size of at least one type of element.

There's a CSS property called line height (e.g., "p { line-height: 2.0; }"). This lets you create paragraphs that are single spaced (line height of 1), double spaced (line height of 2) or any value in between. You can even create paragraphs whose line height is 0. Go and make your paragraphs to have 1.5 spacing.

Go ahead and give your paragraphs a line height of your choosing.

Another nice thing you can do with CSS, is to cause your paragraphs to automatically have an indentation on the first line. We know that browsers ignore whitespace, so we cannot just insert a tab if we'd like the first line to have a tab indent. To do this, we set the CSS property named "text-indent". Here's an example:

p { text-indent: 12pt; }

Go ahead and give your paragraphs a text-indent of your choosing.

Make it so that when the user hovers over a link, a tooltip pops up telling them where the link will bring them. Specificially, you should add a title attribute to each "a" tag and give the title attribute a value of: Go to the IMDB page for [MOVIE NAME HERE]

1. Submit your lab via FTP to the class FTP submission directory
2. Call me over to approve / look at your lab
3. Have a good day!