Exercise Four

Overview

Exercise four introduces you to paths, the anchor tag, hyperlinks, and lists. You will make an index.html page that will become the "home" page of all your assignments. Your index.html page will have links to all of your exercise assignments as well as to your final project. All of your exercise pages will have a link back to this "home" page.

You will also be making an HTML file (ex4.html) with a nested list illustrating a possible hierarchy of final project pages. This page (ex4.html), your ex2.html page , and your index.html page will all be uploaded to your webhawks.org web space; there, reproof all links and validate all pages.

Remember to take Quiz 4 on Blackboard Learn+ as well.

Details

Please follow these instructions as closely as possible.

  1. Create a new directory on your hard drive. Choose a name that reminds you of your webhawks.org public_html directory. Mine might be "Wally's DM 60A Web Files." You are creating a mirror or clone of your online directory so you will have backups of your files and to allow you to test the links between your exercise files. I will refer to this directory as your "local assignment directory" from now on.
  2. Place your backup copy of the file you created for exercise two in your local assignment directory. You kept a backup copy, didn't you...?

  3. Use your text editor to create an HTML file with a nested list that illustrates the possible layout of your final project; place it in your in your local assignment directory.

    Make sure you have used the complete HTML skeleton and the bits of code needed to keep the validator and your instructor happy.

    You should now have a directory with two HTML files inside.

  4. With your text editor, create a new HTML document, name it "index.html" and save it to your hard drive in your your local assignment directory. This page will become the "home" page of your exercise "web site."

    Make sure you have used the complete HTML skeleton and the two bits of code needed to keep the validator and your instructor happy.

  5. Place appropriate text between the <title> tags and also create a heading at the top of the page identifying the page. For example: "Joe Student's DM 60A Assignments" or something similar.

    Beneath this heading, place a short paragraph that fully identifies you if you have chosen to create a more cryptic headline.

  6. Construct an ordered list beneath the opening heading and paragraph. The list will have eleven items: Exercises 1 through 10 and Final Project.

    You will link each of these list items to the appropriate exercise as you complete each exercise.

  7. Make the "Exercise Two" text (the second item of your list on your new index.html page) link to your ex2.html file. Your code might look something like the following.

    <a href="ex2.html">Exercise Two</a>

  8. On your "ex2.html" page. place a link back to your new "home" page. It might look something like the following.

    <a href="index.html">Home</a>

  9. You now have links back and forth between these two pages. View them in your web browser and try out the links. Since these links use relative paths, they should work fine on your hard drive. Test them with your web browser.
  10. Link to your nested list page from the Exercise Four text on your index.html page. Put a "home" link on the nested list page you have been working on. Test these links with your web browser.

    There is nothing to link to for "Exercise One" and "Exercise Three."

  11. Upload your new pages to your online assignment directory.

  12. Reproof your pages in your browser now that they are online to make sure the links still work. Make sure all pages validate with no errors using the validator link on each page.

  13. Submit the Exercise Four Feedback Form with the appropriate options selected and you are done!

Grading

By the numbers...

  • Creation and upload index.html: +3 points
  • Creation and upload of ex4.html (example of nested lists illustrating possible final project web site hierarchy): +3 points
  • Links to and from the index.html page and the exercise 2 and 4 pages; no points for the nested list page if it requires hunting: +3 points
  • All pages pass w3.org html validation: +3 points
  • Submission of Exercise Four Feedback Form: +3 points

Outcome

Last week, you uploaded a web page (ex2.html). This week, you have created a web site! A three page web site at this point, but a site nonetheless, that will keep growing throughout the semester.

In the vein of a picture is worth a thousand words, here is a link to exercise examples that I will keep current with the class assignments.

Have fun!


Exercise Four Feedback Form

Will appear on February 21

bottom graphic for DM 60A pages