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

Exercise 4
Web Typography

Resources for this exercise:

In this exercise you will use CSS to style the text (and illustrations) from chapter 5 of Alice in Wonderland. You will also use a print style sheet, and use the display property.

1) Create a new Web page for exercise 4.

2) This page must contain the XHTML 1.0 Strict 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 4."

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

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

7) Download the text and illustrations for this exercise.

8) Copy and paste the entire text file into your exercise 4 page. Using CSS, you will style this text.

9) See Alice's Adventures in Wonderland, chapter 5 for an example of how someone else styled this text. I do not provide this as a particularly good example, but merely so you can see where to place the images. I expect that you will not use this as an example of anything else; style the page the way you wish to, not the way this page does.

10) Your Web page and style sheet must demonstrate the use of the following CSS pseudo-element selectors:

11) Your Web page and style sheet must demonstrate the use of the following CSS properties:

12) Make your font-family sans-serif type. Specify a cascade of a few sans-serif fonts, and end the cascade with the generic family of "sans-serif". For example:

p { font-family: Verdana, Arial, Helvetica, sans-serif; }

13) On this page, demonstrate the use of the following special chahracters:

See the Commonly Used Special Characters tutorial for information on how to do this.

All quotes, single and double, and all apostrophes, must be curled.

Note that the text file contains two sets of double quotes — actually they are inch marks ( " ). Replace these with the special characters for opening (and closing double quotes). There are only two sets of these, so you can easily do this by hand.

Also notice that the text file contains accent symbols ( ` ) for left single quotes, and single primes, or foot marks ( ' ) for right single quotes. You should use your text editor's "search and replace" feature to make these changes.

And you'll also need to change the double hyphens ( -- ) into em dashes ( — ).

14) Create an external screen style sheet (name it something like "ex4screen.css") to be used with exercise 4.

15) Create an external print style sheet (name it something like "ex4print.css") to be used with exercise 4. This print style sheet must cause all the text on this page to print in serif type (remember that local styles almost always override external styles, so you may need to use an !important statement).

16) The print style sheet must use the font-family property to specify a cascade of a few serif fonts, and end the cascade with the generic family of "serif". (You can test this print style sheet by either printing the page or by using software that supports "print preview.")

17) Using the display property, cause something to not appear in print that appears on screen (You can test this by either printing the page or by using software that supports "print preview.")

18) Using the display property, cause something to not appear on screen that appears in print (You can test this by either printing the page or by using software that supports "print preview.")

19) In the head section of this exercise page, don't forget to add the two <link> tags: one for the screen style sheet, and one for the print style sheet.For example:

<link rel="stylesheet" href="css/ex4screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/ex4print.css" type="text/css" media="print" />

If you use links like those above, the browser should use only the print style sheet when printing, and not apply the screen style sheet when printing. But if you use links like the following:

<link rel="stylesheet" href="css/ex4screen.css" type="text/css" />
<link rel="stylesheet" href="css/ex4print.css" type="text/css" media="print" />

and omit the media="screen" attribute, the first style sheet becomes a default style sheet for all media, including print. This means that the browser should apply styles from both sheets when printing. If you code this way, your print style sheet only needs to specify the differences, and should overrule any styles from the default style sheet. In other words, the browser will apply styles from both sheets when printing, but will use the styles of the print style sheet where there is a conflict.

20) Upload your Web page into your public_html folder on the server. Upload your external style sheets into your css folder that is within your public_html folder (if you haven't already created a folder called "css" within your public_html folder, do so now).

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

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

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

22) Make sure the HTML on this page validates (using the XHTML 1.0 Strict 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.

23) 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/validator-uri.html. 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.

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

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

26) Make sure the HTML on your home page validates (using the XHTML 1.0 Strict 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.

27) 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/validator-uri.html. 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.

28) Submit the feedback form. To receive credit for this exercise you must submit thi feedback form before it expires. This exercise is due on 3/17/08. 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 03/19/08.