Call Toll Free: 1-888-552-1323
Mon-Fri 9:00am - 5:00pm MST
Web Site Design Lesson Plans
Complete Curriculum for High School Teachers

Weather Forecast Project

Download this project with source code samples

Objectives

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

  • Apply CSS formatting to different elements of a table
  • Reshape and resize tables on a web page
  • Change borders and outlines on a table
  • Apply shading to a table cell
  • Insert pictures into a table

Instructions

  1. Create a new folder called Forecast.
  2. Copy the Skeleton from the class website and paste it into a new Notepad file.
  3. Save the file as forecast.html. Make sure this file is saved in your Forecast folder.
  4. Add a heading to the top of your page that says, “Five Day Forecast”
  5. Create a table with five rows and five columns, which will hold information like this:
Monday Tuesday Wednesday Thursday Friday
High temp High temp High temp High temp High temp
Low temp Low temp Low temp Low temp Low temp
Description of weather Description of weather Description of weather Description of weather Description of weather
Picture Picture Picture Picture Picture
  1. Using the internet, find a five day forecast for your city and insert the information into the table.
  2. Go to http://www.nws.noaa.gov/xml/current_obs/weather.php. Find the icons which match the forecast and save them to your Forecast folder. Add these images to the last row of your table.Note: If you need help remembering how to add images to your web pages, go to http://www.w3schools.com, click on Learn HTML, and then click the Images link. This will provide several examples. The images should go in between the <td> and </td> tags in the last row.
  3. Create a new file called styles.css and add a link to this file in your forecast.html page. Add the following link element inside the <head> section:<link rel=”stylesheet” href=”styles.css” />
  4. Add styles to your styles.css page. The table should be in the following format:
    1. Table cells should have a colored border.
    2. Borders for the table should be collapsed (you should not see double borders where table cells come together).
    3. The entire document should use a font other than Times New Roman (add a style to the body selector to change styles for the entire page).
    4. The font in the first row (with the days of the week) should be bold. All other text in the table should be normal (not bold).
    5. The first row should have a colored background (the other rows should not be colored).
    6. The high temperatures should be red.
    7. The low temperatures should be blue.
    8. Each column should be 200 pixels wide.
    9. Text inside the table cells should have 10 pixels of padding on each side.
    10. Your heading should be centered and have some other styling applied to it.

Styling Hints

  1. Create a separate class for the highs, lows, and header. These classes should be applied to the appropriate table rows.
  2. Any styles that you’d like to apply to every single cell should go inside of the td { } selector.

Properties You Will Need To Use

  1. color
  2. background-color
  3. text-align
  4. font-weight
  5. font-size
  6. border-style
  7. border-color
  8. border-width
  9. padding
  10. border-collapse
  11. font-family

Screenshot

Weather Forecast

Source code for this project is available when you purchase the curriculum.

Rubric

Component Possible Points Score
The table contains five rows:

  • Day of week
  • High temperature
  • Low temperature
  • Description of weather
  • Picture of weather
 5
The web page contains a heading 2
The table contains an up-to-date forecast for five days 2
The pictures accurately match the forecasted weather for each day 2
The website contains an external style sheet (styles.css), which the html page is linked to (forecast.html) 2
Table cells have a colored, styled, collapsed border 3
The entire web page uses a font other than Times New Roman 2
The first row is bold and has a colored background 4
High temperatures are red and low temperatures are blue 4
Each column is 200 pixels wide 2
The heading is centered and styled 2
The project was submitted on time (20% off for each day late)
Total Score 30

Resources

Use the following websites for more information on using these styles:

http://www.w3schools.com/css/css_dimension.asp

http://www.w3schools.com/css/css_border.asp

http://www.w3schools.com/css/css_padding.asp

http://www.w3schools.com/css/css_table.asp

http://www.w3schools.com/css/css_font.asp

http://www.w3schools.com/css/css_text.asp

http://www.w3schools.com/css/scc_background.asp

Download this project with source code samples