| File | Description |
|---|---|
| first.html | Demonstrates the essential elements of a minimal XHTML file |
| second.html | Demonstrates a slightly more complex XHTML file |
| third.html | Demonstrates the basics of adding an image and a link to an XHTML file |
| paragraphs.html | A page consisting of only the paragraphs in basicstructure.html |
| headings.html | A page consisting of only the headings in basicstructure.html |
| basicstructure.html | Discusses and demonstrates the basic structural elements of XHTML |
| lists.html | Discusses and demonstrates the use of lists in XHTML |
| textstructure.html | Discusses and demonstrates a variety of XHTML elements for structuring text |
| firstcss.html | Demonstrates the essential elements of a simple internal style sheet |
| secondcss.html | Demonstrates the use of fonts and inheritance in a simple internal style sheet |
| inheritance.html | Another demonstration of inheritance in a simple internal style sheet |
| selectors.html | Demonstrates a variety of CSS selectors in a simple internal style sheet |
| images.html | Discusses and demonstrates the use of images in XHTML |
| links.html | Discusses and demonstrates the use of hyperlinks, named anchors and image maps in XHTML |
| tables.html | Discusses and demonstrates the use of tables in XHTML |
| externalcss.html | Demonstrates the use of an external style sheet |
| listscss.html | Demonstrates the use of CSS to control list markers |
| backgrounds.html | Demonstrates the use of CSS to control background images |
| boxmodel.html | Discusses and demonstrates the use of the CSS box model |
| float1.html | Demonstrates a floated image |
| float2.html | Demonstrates a floated image with a cleared element |
| float3.html | Demonstrates a floated image with a column of text beside it |
| float4.html | Demonstrates a floated navigation bar with a column of text beside it |
| relative1.html | Demonstrates relative positioning using the left and top properties |
| relative2.html | Demonstrates relative positioning using the right and bottom properties |
| absolute1.html | Demonstrates absolute positioning using the left and top properties |
| absolute2.html | Demonstrates absolute positioning using the right and bottom properties |
| forms.html | Discusses and demonstrates essential form concepts |
One important tool in learning about XHTML and CSS is to examine the code for existing pages.
Although there is a virtually limitless supply of pages to study available on the Web, there is no way for a beginner to accurately judge the correctness of their code. Therefore, studying code selected at random on the Web is just as likely to teach a beginner incorrect techniques as correct techniques.
For this reason, I have written several sample documents in strict compliance with the XHTML and CSS standards presented in this class. Each file is available via a link above. Several of them are designed to have informative content, but all of them are designed to present informative and correctly implemented source code. Therefore, you should not only examine the page itself, but also the source code that the browser used to render it if you intend to get the most out of these resources.
Please note that the samples are presented in the order in which they are most likely to be useful in the context of this course. At each stage, I tried to avoid parts of XHTML and CSS that I expect we will not have covered by the time that sample becomes useful. As a result, you should be able to work with each sample document as it becomes pertinent, without getting confused by things we have not yet discussed. A side effect of this, however, is that many of the pages are rather spartan in their design and implementation.