CPSCI 105: Explorations in Computer Science

Lab 8

February 15, 2007

Do the first section of this lab assignment as soon as you arrive in class today.

In the assignment, I've omitted most of the UNIX commands because at this point in the semester, you should know them by heart. If you're not sure how to do something, look at one of the earlier lab assignments.

Part I: More Stylesheets

1. Open your warp homepage in a new browser window. Leave it sitting there.
2. Log in to your account on warp and make public_html your working directory.
3. Create a directory named labs in the working directory. Set the permissions on this directory so that the web server can access it.
4. Copy the file feb15.html from the directory /home/public/web-authoring/ to your labs directory. Make the file available to the web server (i.e., make it readable by others).
5. Copy the file feb15.css from the directory /home/public/web-authoring/ to your style directory. Make the file available to the web server (i.e., make it readable by others).
6. Open emacs in its own window (i.e., use an ampersand at the end of the command line) and edit feb15.html. Type in your name as the author in the address element of the document.
7. Go to the browser window that's open to your homepage. Modify the URL in the address bar so that the browser loads your feb15.html page.
8. The level-1 heading on the page should be displayed inside a buff-colored box. If it's not, go back over the preceding instructions and make sure that you've put all files in the correct location and assigned the correct permissions to all files and directories. Do not proceed to the next step until your feb15.html file loads correctly.
9. In your web browser, go back to your homepage. Refresh it. Look at its level-1 heading. What do you notice? Go to your emacs window and examine the head section of feb15.html. Compare it to the head section of your homepage. What's the difference? Do not proceed to the next step until you have figured out what's going on.
10. In your web browser, go back to feb15.html. Scroll down to paragraph five. Take a look at the source code and then answer the following questions: What type of element is paragraph five? What attribute(s) does it have?

Part II: Classes

We'll be discussing XHTML classes today. While you're waiting for the rest of the class to complete Part I, go ahead and read about picking class names.

We'll be using XHTML classes to control presentation aspects of webpages using CSS class selectors. Take notes while we discuss that.

Homework 6

(If we have time in class today, we'll talk about XHTML phrase elements. If we don't have time, you can read through this handy page of phrase elements examples before you start working on this homework assignment.)

Part 0: Disability Studies

Update your Michalko document to include a summary and response paragraph for Chapter 4. In addition, write another paragraph (preceded by an appropriate heading) saying what you think of the book so far.

Part 1: Classes

Make modifications to the XHTML markup you've done on your Michalko document. Add a class attribute to each paragraph element to distinguish the different types of paragraph in your document.

Remember that the type of paragraph is determined by its content—e.g., a summary paragraph, an opinion paragraph, etc. Don't overdo it—it probably doesn't make sense for every individual paragraph in the document to be put into a different class. The idea is that for each chapter you discuss, there's a similar structure to your discussion, and that's what you want to capture.

Give your class attributes meaningful values, e.g., <p class="summary">, <p class="my-opinion">, etc. (Don't forget to follow the XML naming rules in assigning names to your classes.)

Add a class attribute to any other elements of your document for which it makes sense.

Run your document through the validator to make sure you haven't inadvertently messed up the syntax of your document.

Part 2: Phrase Elements

Use phrase elements as appropriate in your Michalko document. You should have at least one occurrence each of cite, em, and strong. You should also have at least three quotations from the text. Mark these up using the <q> tag; use the URL of the publisher's webpage for the book as the value of its cite attribute.

Here's an example of using the <q> tag. Since our document is in English (it's declared as an attribute of the html element in our template file), you don't need to specify lang or xml:lang attributes. But it would be useful to provide information about the source of the quote, i.e., Rod Michalko's book:

As Michalko puts it,
<q cite="http://www.temple.edu/tempress/titles/1431_reg.html">Sighted
people seldom question these preconceptions</q> (p. 4).

which the browser will render as follows:

As Michalko puts it, Sighted people seldom question these preconceptions (p. 4).

(Remember that if you're reading this in Internet Explorer, no quotation marks are displayed in the previous paragraph. That's OK for the purposes of this assignment.)

While you're working with your Michalko document, be sure to spell-check it in emacs ( M-x ispell-buffer ).

Run your document through the validator again to make sure you applied your phrase element markup correctly.

Part 3: Stylin’

Create a new stylesheet especially for your Michalko document. Call it michalko.css. It should be located in your style directory. (Don't forget to make it readable by others.)

This stylesheet will cascade upon your mystyle.css stylesheet. At a minimum, this new stylesheet should contain style settings for the new paragraph classes you added to michalko.html as Part 1 of this assignment.

Exactly what these style definitions are is up to you. Just keep in mind the course readings you've done on fonts and colors (and if you haven't read these, do so now!).

Don't forget to add a link element to this new stylesheet in the head section of your michalko.html document. (It should come after the link to mystyle.css.)

Use the link to the CSS validator at the bottom of michalko.html to make sure you've written correct CSS code. Fix any errors.

You may add as many other style definitions to michalko.css as you like—as long as your stylesheet validates. Please also keep in mind the text legibility considerations you've read about.

Due Date

This asssignment is due at the beginning of class on Tuesday, February 20.

[ Return to the CPSCI 105-01 homepage ]