Fancy Links | Web Site Design Lesson Plans

Objectives

At the end of this lesson, you will be able to:

Apply CSS to change the styling of XHTML elements
Specify font family, style, weight, size, color, and alignment of text elements.

Copy the Skeleton from the class website.
Create a new folder called Fancy Links, and create a new XHTML file called index.html. Add an appropriate title to your page.
Create a heading that says “My Favorite Web Sites”
Crate a table with 5 rows and 2 columns. Place links to your web sites in the left column and a brief description of each web site in the right column. Use this table as an example:

Coding Horror	This page gives programming tips.
Digg	Technology News
WCHA	Western Collegiate Hockey Association
UMN	University of Minnesota
Cloquet Public Schools	Independent School District 94

Create an external file sheet. This should be a new Notepad file in the same folder as your index.html file. Save it as style.css.
In the <head></head> section of your index.html file, add the following line:

<link rel="stylesheet" type="text/css" href="style.css" />

a {text-decoration: none;}

a:link {color: blue;} /* unvisited link */
a:hover {color: #FF0000} /* mouse over link */
a:active {color: #00FF00} /* selected link */

Add styles to other elements of your web page to give it a unique look. Here are some things you can try:* Change the background color or background image of the web page
* Make the table a different color than the body
* Style the heading to be a different color, size, or style
* Add decorative borders to the table

Screenshots and source code for this project are available when you purchase the curriculum.

Component	Possible Points	Score
Each link opens the correct web page	5
Underlines have been removed from the links	2
Links change color when the mouse moves over them	2
Links change color when the user clicks on them	2
Unique styling has been applied to the web page	4
The project was submitted on time (20% off for each day late)
Total Score	15