create two XHTML web pages and a CSS file

You will create two XHTML web pages and a
CSS file from content borrowed from the World's Healthiest Food web site. http://whfoods.org/

Create the following files.

·        
program1.html, the front home
page for these two web pages

·        
recipe.html, the second of two
web pages containing a recipe for 15-Minute Halibut Salad

·        
program1.css, the external
style sheet for both pages

program1.html

The first part of your task is to create a
front page for this web site, stored in a file named program1.html.

·        
Your front page must contain a
navigation bar which links to itself and to recipe.html file

·        
The file must also be at least
20 lines long and must contain at least 4 different XHTML elements in its body

·        
It must adhere to the CS 250
coding standards for HTML code, including header comment and metadata

·        
It may not significantly borrow
content from your recipe.html or other pages. The intent is for you to create
content, not copy and paste. Be creative and fun!

·        
Its overall look should be set by
program1.css

 

recipe.html

·        
The second (and more
substantial) part of the assignment is to create a specific web page describing
a recipe

·        
for 15-minute garbanzo bean
salad. Unlike program1.html, this content and style of this page is rigidly
specified

·        
and must exactly match the
appearance specified in this document.

The text and
images for this page may be copied from the recipe posted at the real web site:
World's Healthiest Foods. http://whfoods.org/


Do not copy the HTML code.

Specifications for the file recipe.html


  • The page's title text should be World's Healthiest Foods: 15-Minute Halibut
    Salad

  • Body


    • The font families for the page text
      (in order of preference) are Georgia, Garamond, or any serif font
      available on the system at the default size


  • Headings


    • All headings (h1, h2, etc) and table
      captions on the page should use a foreground color of #A4A400 and a background color of #F0F0F0

    • The font families for headings and
      table captions are Century Gothic, Futura, Verdana, or any sans-serif
      font available on the system

    • The page's main headings (h1 and h2)
      should have their text aligned to the center of the page body

    • Other headings on the page are
      left-aligned

    • The table caption should appear with
      a bold font weight


  • Tables


    • Tables should use a background color
      of #CC9933 and a text color of #FFFFFF (white).

    • Use a top margin of 20 pixels to add
      vertical spacing before each table

    • Table headings should use a
      background color of #003366, a font color of #FFFFFF (white), a 2 pixel
      solid white border line, and a padding on all sides of 5 pixels

    • Table headers and data cells should
      use a 2 pixel solid white border line and a padding on all sides of 5
      pixels


  • images - images may be downloaded
    directly from the World's Healthiest Foods site or downloaded from the
    links below:


    • foodchart.jpg and greekgarbonzosalad.jpg

    • Note: use a relative address for your
      img src attribute.




The top of the page has a
navigation bar with two links. The "Home" link should link to your program1.html page, the recipe link should link to recipe.html Use relative URLs and assume both pages
are contained in the same folder.

 
Powered by