I collected the accessibility checklists that you put together. I talked a bit about our project that we'll work on after we finish Chapter 12. (We'll cover Chapters 13 and on after the project is underway.) I found somebody's list of most accessible Web sites. We looked a t a winner, but don't quite know why it won—at least not yet!

I returned Quiz 4. The scores were 20(2), 19, 18.5, 17, 16.5, 16, 14, 13, 11, and 8.5 with an average of 15.8. If you did not do well, make sure you understand what you missed.

We also took a look at layouts using CSS. HFHTML Chapter 12 presents some ways of doing layouts. We also took a look at CSS Layout Techniques: for Fun and Profit. What do you notice that these various techniques have in common? Each element that is associated with the layout is given an id and rules are written to position and style that element. Most often, the element is a <div>.

Homework

Construct a Web page with a two-column layout. The page should also have a header and a footer that spans the two columns. The left column should have a fixed width and contain a navigation menu. The right column should be "liquid" (or "fluid") and contain the main content of the page, which for now can be fake Latin text. The footer should contain contact information and have centered text. The header will contain text that serves as the main heading for the page content.

You may work with another student in the class on this. Put a sample HTML page and the external style sheet on the cs.wofford.int server, then send me the URL. If you work with a partner, be sure the e-mail message you send me states both names.

Due by the start of class on Friday.

You took another "quiz from hell." [Key to Quiz from Hell #4] Remember my motto: Quizzes should be learning experiences!

Homework

1. Finish reading Chapter 11. I encourage you to complete the work-along exercises, but you don't have to.
2. Browse the Web Accessibility Initiative (WAI) Web site to get familiar with what is there. Read Preliminary Review of Web Sites for Accessibility. For Wednesday (one week from today), make a checklist that you can use to evaluate a Web site for accessibility based on what is discussed in that article. Put your checklist on a Web page (XHTML strict, of course!). Number the items in your list. (Remember <ol>.) Send me the HTML file as an attachment to an e-mail message having the subject Accessibility Checklist. The e-mail message must have a timestamp before 12:00:01 AM on Wednesday, October 31, 2007. Open the HTML file in a browser, print the page, and bring a copy with you to class to turn in.

3. Note: I will be among those at the 2007 DOE Day of Science in Knoxville on Monday. Consequently, class will not meet on Monday.

   Read Chapter 12. Chapter 12 covers how to use CSS for page layouts—arranging things on a Web page. This chapter covers what is probably what you have most wanted to know all along (but what you didn't know you wanted to know). As you read, jot down at least three things that the chapter mentions that leave you either confused or wanting to know more about it. Be sure to write down specific pages. Bring your list with you to class on Wednesday.

For Fun

Log into your blogger account, click on the Template tab and then the Edit HTML link, and take a look at the HTML code for your blog. CSS style rules are embedded in the HTML. Change some of the style rules—colors, font families, margins, paddings, and the like. You can even define your own classes. (I defined one for homework. You are reading a <div class="homework">, in case you are wondering how I do it.

Enjoy the fall holiday and come back next Wednesday ready to get started on the project that will keep us all busy for the rest of the semester. I really would like to get through Chapter 12 next week (only two class meetings). I will be relying on you to dig into the chapter and learn what you can. Don't forget to do the work-along!

I introduced the <div> element, the idea of descendant selectors, and the width attribute. These will be covered in more detail in the reading assigned for Wednesday. The reading also covers shorthands for specifying related properties.

The zip file for the Chapter 10 exercises did not have the file print.css that the book mentions. Consider this print.css. Notice how various properties are set for printing compared to the settings for screen media.

Then we worked some more on the site for my mail-order business.

Quiz on Wednesday.

Homework

Read the first part of HFHTML Chapter 11—up through page 461. Stop at page 461 for this exercise. Do the work-along exercises [files to start with].

When you have finished the exercise, send the files lounge.html and lounge.css as attachments to an e-mail message having the subject Chapter 11 Part A.

We reviewed the CSS box model. I introduced the notion of the id attribute and how id's differ from classes. (Do you remember talking about the id attribute of an HTML element before today? Look back at pp. 152ff.) In a CSS rule selector, a class is identified by a period—e.g., .blueberry—while an id is identified by a pound sign—e.g., #navmenu.

I handed out an HTML cheat sheet and a CSS cheat sheet. Use these to trigger your memory about various things. Keep in mind that more details are available at DevGuru and other sites.

A couple of things to remember from last time:

• The unit em is the height of an M in the current font.
• If the levels of red, green, and blue in a color are the same, then the color is a shade of gray. #333333 (or #333) is a darker shade of gray and #aaaaaa (or #aaa) is a lighter shade.
• White is full intensity of all three colors (#ffffff) and black is the lack of all colors (#000000).

There will be a quiz next Wednesday. It will cover what we do through Monday's class.

Lab

I am starting a mail-order business called Dave's Daylilies. I know using a Web site to sell my products will be much cheaper than using printed catalogs. I sell daylilies, iris, and bird feeders.

Design a Web site for me. I know that eventually I will need to have the site use server-side scripting, but for now I think I can manage with static pages since my inventory is small: 12 kinds of daylilies, 15 kinds of iris, and 4 kinds of feeders.

Here is what I need users of my site to be able to do.

• Browse by type of product (daylily, iris, or birdfeeder). I should have a photo of each product eventually. I have a few already in a zip archive.
• Print an order sheet.
• Contact me via telephone, e-mail, or snail mail.
• Learn about the care of daylilies and iris. (Fortunately, they are pretty much care-free if they are planted correctly so there's not much to provide other than planting instructions, watering, and dividing.)
• Learn about the company.

What I'd like from you:

1. A design for the Web site—that is, the pages you recommend and how they are organized into folders.
2. A design for the home page, including what the navigation menu should be and what pages it links to.
3. A suggestion for the presentation. Since I'm just getting started, I could use a logo and a color theme.

For now, just use lorem ipsum to fill out the text parts of the pages that discuss products and product care.

Homework

Read the rest of Chapter 10 and complete the work-along exercise. Be sure your HTML file and your CSS file validate.

When you have finished the exercise, send the files lounge.html and lounge.css as attachments to an e-mail message having the subject Chapter 10 Part B.

We discussed accessibility. The general consensus was that we have a corporate social responsibility to make accessible the parts of the Web we develop. (I tried an accessibility check on my home page. One should and one may fix!)

We also worked a bit more with Nvu [download]. I walked you through some of its capabilities and some of its quirks (a need to refresh the site manager and the odd way you need to set up an external style sheet). We developed a skeletal Web site with a home page, an image, and a style sheet. I hope you'll start to use it and explore its capabilities. It makes you more productive than you can be coding tags by hand. However, you will often have to view the source and edit it to create the page you want. I encourage you to use it for the homework due Friday.

I introduced the CSS box model.

On your blog, please comment on (at least) three different Web sites each week. Be sure to check your grammar and spelling. Put a link to the page you are discussing.

Homework

Read pages 385–413. Work along with the book using the files provided. Be sure your HTML file and your CSS file validate.

When you have finished the exercise, send the files lounge.html and lounge.css as attachments to an e-mail message having the subject Chapter 10 Part A.

We talked briefly about answers to the homework assignment for today and then you worked through a lab in pairs.

We also welcomed Austin to our class. He was visiting Wofford today as a prospective student.

Lab

1. Find a partner to work with.
2. Download the file LoremIpsum.html to your computer.
3. Create an external style sheet that will make the page look like mine. (Why am I linking to an image instead of to an HTML file?)
4. Before the end of class, send me the CSS file via e-mail. Be sure to let me know the names of both partners.

The colors I used are among the standard 17 CSS colors.

Feel free to ask me questions or to as questions of other pairs around you.

Homework

For Wednesday, read the handout Introduction to Web Accessibility.

We investigated KompoZer after Quiz #3.

Homework

Read Chapter 9 of HFHTML.

Answer the questions below and bring the answers with you to hand in at the start of class on Monday.

1. For the font-family property, a list of font names can be specified. How does a browser use this list? And why isn't specifying one font sufficient?
2. What does the line-height property specify?
3. What is the meaning of the unit em? What is the em equivalent of 150%?
4. What does font-style: normal; mean?
5. What color is rgb(0,0,0)? What color is rgb(255,255,255)?
6. Suppose I want to set my page's background to the color listed as tomato among the X11 color names. Give two values I can list in a rule to get that color.
7. Determine the decimal values associated with the levels of red, green, and blue for the hex code #daa520.
8. What do all these colors have in common: #111111, #555555, #888888, #aaaaaa, and #dadada?

We reviewed CSS and many of the concepts discussed in Chapter 8. I posed a few questions and we discussed the answers [sheet from class].

I announced a quiz for Friday. I plan for it to be short. It will cover HFHTML chapters 6, 7, and 8. If you understood what we talked about this morning, then you should be in good shape.

We spent some time installing KompoZer on the lab computers because Nvu does not want to run correctly on some of the computers (including mine!). I'll show you how to use KompoZer next time.

I encourage you to start reading Chapter 10. I think you will find it interesting and useful. It focuses primarily on fonts and colors.

We continued to look at style sheets today. The latter part of Chapter 8 introduces some important concepts:

• external style sheets
• inheritance [pp. 311-315]
• fonts (sans-serif and serif) [p. 309]
• classes [pp. 316-323]
• CSS validation (jigsaw.w3.org/css-validator)
• various properties (p. 330)

Homework

Read Chapter 8. This is a key chapter to "get" for understanding how CSS works.

We started cascading style sheets (yay). They are covered in Chapter 8 of HFHTML.

Here is the style element we put into a Web page today. Recall that a selector designates the element type that the rule applies to and that the order rules are listed matters when two rules seem to contradict (as in the two color property settings for <h1> elements in the example.

<style type="text/css">
/*  style rule syntax: 

    selector {  property: value; ... }

*/

p {
    color: teal;
}

h1, h2, h3, h4, h5, h6 {
    color: teal;
}

h1 {
    border: thin black dashed;
    background-color: silver;
    color: black;
}

</style>

Homework

Read pages 285–310 of HFHTML. Add some style to your class home page on cs.wofford.int: sans-serif font of a color you choose (not black) and a background color of your choice (not white). See if you can figure out how to get a border around the whole body that is the same color as the text.

We started Chapter 7. Moving right along! We discussed XHTML and XML—how XHTML is the future. Benefits of using XHTML are given on pages 270–271 of HFHTML. On page 282, the authors note, "The choice is yours." I'll add, "No, it's not." At least in this course! You are required to use standards-conforming XHTML for your Web pages for the rest of the semester. The good news: You are almost there! at least in terms of what you have learned so far. Pages 274–275 of HFHTML explain how to get there.

To help you understand XML, check out this CD catalog. I admit that it's not very pretty, but check out the URI and the source (View Source in your browser.) Notice anything? There's no HTML, just XML. The cool thing about XML is that elements can be designed to get across all kinds of information, not just information about the components of a document that HTML does. And XML is expandable—that is, more kinds of elements can be added. XHTML is an XML version of HTML. HFHTML mentions (page 271) that people have already added some elements for math equations.

I also like the recipe example in the Wikipedia entry for XML.

Lab today: Download xml.html and revise it so that it validates as XHTML 1.0 Strict. Work with a partner. When you are done, send the file to me via e-mail. Please make the subject be XHTML Lab. Please copy (CC) your partner.

Homework

Read Chapter 7.

Revise the index.html file you submitted for the assignment due today to be XHTML. Send the validated file to me as an attachment to an e-mail message addressed to me. Please make the subject of the e-mail be Validated XHTML page. You may work with a partner from the class. If you do, make sure the e-mail message indicates so.

We started Chapter 6. My goal is to get through Chapters 6 and 7 this week. They are closely related. Then we will move on to cascading style sheets and accessibility.

A few links:

• W3C Markup Validation Service
• Character encodings
• Quirks mode

I returned the second quiz today. The score distribution was: 19.5, 16, 15, 14, 13, 12.5(2), 10, 9.5, 9 and 7. The average was 12.5. We spent a little time going over the most-missed items. Problem #2 gave the most trouble. Problem #3 gave the least. The rest were pretty much even, although 4, 7, and 9 had the largest standard deviations.

Homework

Download the archive of a small Web page. Edit the file index.html so it validates as HTML 4.01 Strict.

If you uncompress the archive to your W: drive, you can specify the URI of the file, just like I did in class for my home page. If you uncompress the archive to a local disk, then you'll need to use the Validate by File Upload method of input, or you can use the third tab, Validate by Direct Input.

Attach the validated HTML file to an e-mail message sent to me. Please make the subject of the e-mail be Validated 4.01 page.

You may work with another student in the class on this assignment if you like. If you do, please CC: the other student in your e-mail message and also put his/her name in the message.

Oh, I updated the key for Quiz #2 with a corrected diagram for the nesting hierarchy.