Return to Dan McCracken Home Page
The major illustrations from this chapter are being posted here for testing and feedback. Please send email with corrections, comments, suggestions, praise, criticism, etc.
First I must acknowledge the capable and generous help of Rhonda Schauer in getting a multitude of technical issues straight, especially regarding styles. Without her help I might have had to give up on this appendix.
These are shown as they are planned for the book. They accordingly do not have links back to this page or to my home page. The Back Button works. Better yet, bookmark this page. Some format questions may be inconsistent, and will be fixed in a final check.
Here are all the examples in the appendix, as now planned. You will note the easy and gentle introduction of new ideas--and yet styles are brought into the fourth example, which will be on about page 7. All examples validate as correct XHTML, per the W3C validations routines, except for the very first, where I didn't want to put in the vastly confusing DTD stuff in the first few lines. If students simply copy in those lines, then use lower case tags and close all tags, they are already writing XHTML. See? It doesn't hurt.
Figure 1. Hello, HTML.Figure 2. A page with a heading, in default format.
Figure 3. Two levels of headings.Figure 4. First introduction of styles, within the HTML code at this point; external style sheets are introduced in Figure 6.
Figure 5. A few more things you can do with styles: change background color, indent margins, etc. Nothing fancy; all simple; all immediately useful.Figure 6. The page is exactly the same Figure 5, except for a changed title, but now all the style information is in an external style sheet named Style1.css. This is as painless an introduction to style sheets as I can figure out. And see the comments on the next example.
A First Example of Links, with a home page that links to a child page, which links back to its parent. Uses the same style sheet, Style1.css, as above. We begin to build the case for putting style in an external style sheet, where one modification can change the appearance of many pages--perhaps thousands, in a commercial site.
NOTE: The previous example uses an external style sheet named Style1.css. You can get that simply by putting that name in place of the page name in the URL. That is: the URL of the example is http://ccnyddm.com/XHTML+CSSPages/Links1.html. Change that to http://ccnyddm.com/XHTML+CSSPages/Style1.css, and you'll see the style sheet. Thanks to Rhonda Schauer for this tip. Details will vary depending on whether you have any software that is set to open style sheets, which can be the case with FrontPage, for example. There are a couple of other style sheets in later examples, which cascade to override some of the formatting in Style1. You can see those the same way. Commercial sites sometimes make this trick difficult or impossible, but since all the HTML and all the style sheets are in the same directory here, no problem.
A Second Example of Links, with a home page and four children, each child page having links to home and to next (except last page) and previous (except first page). The child pages are used by permission of the University of Minnesota Agricultural Experiment Station. This example uses an unordered list in about the simplest way possible, just to get bullets and closer line spacing. If reviewers feel that this is too much too soon and too fast, this can be changed. Unordered lists are introduced more gently just a little later.
Links Can Be Pictures shows one of the child pages with icons for Home, Previous, and Next. The point is: 1) to show how it's done, and 2) to talk about how icons can fail to communicate in other cultures, thus reinforcing the message in Chapter 14 on Globalization. NOTE: the icon links work, but no link of other pages point to this one. This one uses GIF images; prior were JPEG. Will add a note about this in text.
A Really Simple Ordered List is a DO-list of remaining topics in the chapter. The default numbering (Arabic numerals) is accepted. The point: HTML and the browser insert the numbers.
Same List But Two List Items Reversed underscores this point.
Advantages of Using CSS is a really a simple definition list. No new features; gives the reader a break and a little change of pace.
CSS Measures of Length is also a simple definition list, but introduces the use of <span> . . . </span> to get some body text in Courier.
Here are a number of lists, all giving some information about the solar system. In the later examples only the changed portions or the HTML code plus a small sample of the output will be shown in the book.
The box model is central to understanding and effective use of CSS. Here are three pages that show the basic features, with the relevant HTML included in the page itself on the last three. BUT: IE 6 has trouble with the white-space: pre declaration. There has been discussion in Microsoft circles about how to handle it; I am working on the intricacies of that. Short-term, I've had help--as so many other times--from Rhonda Schauer, who tells me that removing the first line of the incantations, the one that contains the ISO encoding information, solves the problem for IE. Of course the code now does not validate as XHTML. I'm working on this one. NN and Opera have no problem with this, with or without the ISO line. Browser variations are a fact of life.
Dan's Favorite Music shows some of the many things that can be done. A style sheet named DDMMusic.css controls the shading, borders, positioning, etc., for this page.
Tables are useful, and we show the student how to do the basic things. In most past and some current Web sites they are used extremely heavily, in a very bad way: to control placement of elements on the page. This is highly disparaged by W3C: it destroys the page for blind readers, because screen narration programs read each line, left to right, from top to bottom, ignoring the table structure. When tables are used, they should have some descriptive material--format specified in CSS--to make the table more intelligible to blind and partially-sighted persons. These tables pass the W3C Accessibility Validation Test.
Some Flowers That Grow Well in Minnesota is the capstone case study. It has 11 thumbnails; clicking on any image takes you to a page with a larger picture, usually some plant culture comments, and a global navigation bar on the bottom. All the links in the latter are placed in a DIV to get control of font size etc. Each page in the collection references both a Style1.css that appears in nearly every example in the book, followed by a link to a FlowerStyle.css that overrides some of the things in Style1.css. Both of these style sheets are subject to tuning when I get to the stage of running every example in the appendix to make sure everything works, and that things like indentation conventions are consistent.
The icons at the bottom show that the page is approved by the W3C validation suites, including Bobby, for conformance to rules for XHTML, CSS, and Bobby Level A. Going to Bobby Level AA or AAA would require a lot of extra code, which would complicate things excessively for the beginning student.
The case study ties together many of the major topics covered in the appendix, besides illustrating points made in the Navigation chapter among others.