[an error occurred while processing this directive]
Go to Bottom Nav - August 21, 2017 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

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 and contribute to the topic related discussions on Blackboard Learn+ as well.

View me stumbling and mumbling as I demo exercise four, here are links to youtube video examples.
Part one: http://youtu.be/jaTRLjJ8veI
Part two: http://youtu.be/vlbzqmBx-ok

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 60 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 (ex4.html) with a nested list that illustrates the possible layout of your final project; place it in your in your local assignment directory.

    For your convenience, use the code for an HTML5 skeleton with validation links below between the horizontal rules. Or, type it yourself!

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>


<p>
<!-- validator code using text links -->
<a href="http://validator.w3.org/check?uri=referer">Validate HTML</a>
&nbsp;|&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a>
<!-- end validator code using text links -->
</p>
</body>
</html>


  1. 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."

    For your convenience, use the code for an HTML5 skeleton with validation links above between the horizontal rules. Or, type it yourself!

  2. 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 60 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.

  3. 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.

  4. 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>

  5. 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>

  6. 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.
  7. 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."

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

  9. 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.

  10. 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!


[an error occurred while processing this directive]

Find Exercise Four Feedback Form on Blackboard

Exercise feedback forms not available between semesters.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu