Fancy Links

Note: the following material is from an older, outdated version of the web design curriculum pack. Please read about the revised and updated version of our Introduction to Web Design Curriculum.

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.

Instructions

  1. Copy the Skeleton from the class website.
  2. Create a new folder called Fancy Links, and create a new XHTML file called index.html. Add an appropriate title to your page.
  3. Create a heading that says “My Favorite Web Sites”
  4. 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
Google Search Engine
Wikipedia Online Encyclopedia
White House Official White House Website
  1. 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.
  2. In the <head></head> section of your index.html file, add the following line:
<link rel="stylesheet" type="text/css" href="style.css" />
  1. In your stylesheet, remove the underlines from your links:
a {text-decoration: none;}
  1. Create separate styles for different behaviors of the links:
a:link {color: blue;} /* unvisited link */
a:hover {color: #FF0000} /* mouse over link */
a:active {color: #00FF00} /* selected link */
  1. 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

Rubric

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

For full projects and source code, download the updated version of our Introduction to Web Design Curriculum.