Exercise 10: 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 CSS display property.

1) Create a new Web page for exercise 10.

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

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

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

7) Download the text and illustrations as a zip file for this exercise. Or, you can diretly download the text and illustrations for this exercise.

8) Copy and paste the entire text file into your exercise 10 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) All of the body text, including the poem, must be sans-serif; 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 characters:

See the Commonly Used Special Characters tutorial for information on how to do this. Note that there are two ways to do this: by using the special HTML character entities for all the special characters, or by using the keyboard shortcuts. You may use either method, or a combination of both.

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 ( — ).

Note: the search and replace feature of Microsoft Word is quite handy for this; you may find it easier to use than your text editor for this task. If you use Word for the search and replace, be careful to save the file as text (with a ".txt" file name extension); do not use Word's "save as HTML" feature, as it will add lots of terrible code to your own code. Then after you exit Word, change the file name's extension to ".html".

Hint: In the original text each paragraph is separated by two carriage returns (of course these are invisible characters, so you don't see them, but you do see the space they make between paragraphs). You can tell Word to "Show all nonprinting characters" to easily see them. But of course carriage returns are ignoerd by the browser, so you will need to place paragraph tags around every paragraph. Here's the efficient way to do this. When doing search and replace, search for two carriage returns and replace them with a closing and opening paragraph tag. In Word you would search for ^p^p and replace with </p><p>.

14) Make at least some of the text appear in a color other than black.

15) Create an external screen style sheet (name it something like "ex10screen.css") to be used with exercise 10.

16) Create an external print style sheet (name it something like "ex10print.css") to be used with exercise 10. 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).

17) 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 browser software that supports "print preview.")

18) The print style sheet must cause all of the text to print in black.

19) Using the display property, cause the links to the validators (which should appear on the screen) to not appear in print (You can test this by either printing the page or by using browser software that supports "print preview.")

20) Using the display property, cause the following sentence:

This chapter is printed from [your name here]'s Exercise 10.

to not appear on screen but to appear in print (You can test this by either printing the page or by using browser software that supports "print preview.") Of course replace "your name here" with your name.

21) 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/ex10screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/ex10print.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/ex10screen.css" type="text/css">
<link rel="stylesheet" href="css/ex10print.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.

22) Using the @font-face CSS selector (in your screen style sheet), specify one or more custom fonts to be used in your page. The custom font you use must be uploaded to the webhawks Web server (in a folder called "fonts" at the root level of your public_html folder), not a font on a third party server such as those hosted by Google.

Make sure that the custom font that you use is one that you have the rights to use online. Also make sure that it is not a font that is installed in your computer's operating system, or the browser will use that font instead and you will not be able to test if your @font-face style is working properly.

It is OK to use an online webfont generator to create different font formats and sample CSS code. The fontsquirrel webfont generator, at http://www.fontsquirrel.com/tools/webfont-generator, is a good one.

23) 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).

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

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

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

25) 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.

26) 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.

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

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

29) Make sure the HTML on your home 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 link. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

30) 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.

31) 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 . 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 //.