Printed from TeacherJohn.com • http://teacherjohn.com/cabrillo/dm160b/exercises/ex07.php

Exercise 7: Classes, IDs, Selectors, and Menus


Resources for this exercise:


1) Create a new Web page for exercise 7.

2) This page must contain the HTML 5 DocType that will enable you to use an HTML validator (as explained in How to Use the W3C HTML and CSS Validators).

3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

4) This page must display your name and say "Exercise 7."

5) This page's <title> must indicate that this is your exercise 7 page, so it should say something like "John Sky's DM61 Exercise 7".

6) This page must include the character encoding meta tag (as explained in Character Encoding for Web Pages). Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the <head> section. So right after the <head> tag, place this line of code:

<meta charset="utf-8">

7) This page must contain a relative link to your home page.

8) This page must contain an unordered list of at least 4 list items formatted in the following ways:

See this Listutorial page for a step-by-step tutorial on styling a list into a horizontal menu.

9) Of course, in order to use an external style sheet, this page must contain a <link> tag in the <head> section. In your<link> tag, use a relative path to the style sheet. You will be creating a directory, within your public_html directory, called "css" that will hold your style sheets for homework exercises, so the relative path from your exercise to the style sheet will be "css/exercise7.css".

10) This page must demonstrate the use of all of the rules defined in your style sheet. Note that some selectors are not supported by very oldbrowsers. (In other words, you should test your selectors in a fairly modern browser.)

11) Create an external style sheet for exercise 7. In this style sheet you will demonstrate the use of a variety of selectors, as indicated in the next steps.

12) In this style sheet, define the following:

13) In this style sheet, also define the following:

14) In this style sheet, also define the following:

15) Save this style sheet as "exercise7.css".

16) Upload the Web page into your public_html folder on the server.

17) Upload your external style sheet into your "css" directory.

18) View your page (the page on the server, not the page on your disk) in a Web browser. For example, if you called it exercise7.html:

Go to:
http://www.webhawks.org/~yourusername/exercise7.html
to view your exercise 7 page.

Or, to make it easier, you can always get to your home page by going to the Student Sites page for our class.

19) Make sure the HTML on this page validates (using the HTML 5 DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

20) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

21) If there are any errors, fix them, re-upload the page or style sheet, and validate again.

22) Make sure your home page has a relative link to exercise 7. Test this link to make sure it works!

23) Make sure the HTML on your home page page validates (using the HTML 5 DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

24) Make sure the CSS on your home page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

25) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 10/23/17. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 10/25/17.