Building a page with html and css

You are going to build a home page for the Gabriola Bridge Society. Here are the steps:

1. html

  1. Open up a new template and save it in your folder as index.html
  2. Fill in the title in the head
  3. Link to a style sheet. Let's call it gbsstyle. Remember that the extension has to be css
  4. In the body section create the following menu by making an unordered list:
    home
    about us
    current projects
    news
    links
    contact us
  5. Create a link for each of the pages in your list
  6. Create a page title, Gabriola Bridge Society
  7. Write a welcome-to-our-site paragraph of about 3 to 4 sentences
  8. On the web, find an image of a bridge you like. Copy it to your images folder
  9. Include an image of the GBS's proposed bridge on your GBS home page
  10. Include another paragraph of three or four sentences promoting membership in the GBS

2. css references

Use the following links for reference to css coding:
css reference
css examples
W3Schools Home Page

3. css styles

  1. Create a css page. Call it gbsstyle.css
  2. Style each of the components in your web page: background colour, heading, unordered list with links to other web pages on the site, paragraphs

4. css page layout

  1. On paper, sketch a layout for your page
  2. Introduction to the CSS Box Model
  3. Examine this example of a horizontal menu
  4. Examine this example of a page layout

Back to the home page