| File | Description |
|---|---|
| first.html | Demonstrates the essential elements of a minimal HTML file |
| second.html | Demonstrates a slightly more complex HTML file containing headings, paragraphs, and a division, plus some emphasized phrases |
| third.html | Demonstrates the basics of adding an image and some links to an HTML file and utilizes a comment, some character entities, and an id attribute |
| lists.html | Demonstrates the use of lists |
| inlinecss.html | Demonstrates the use of CSS as inline styles |
| embeddedcss.html | Demonstrates the use of CSS as embedded style sheets |
| externalcss.html | Demonstrates the use of CSS as external style sheets |
| fontscss.html | Demonstrates the use of fonts in CSS |
| colorscss.html | Illustrates the use of colors in CSS |
| selectorscss.html | Demonstrates the use of selectors in CSS |
| boxescss.html | Does not directly demonstrate anything new, but will act as the basis on which CSS box model and positioning concepts can be illustrated during lecture |
| images.html | Discusses and illustrates the use of inline images in HTML |
| backgrounds.html | Does not directly demonstrate anything new, but will act as the basis on which background images can be illustrated during lecture |
| tables.html | Demonstrates the use of tables |
| forms.html | Demonstrates the use of forms |
One important tool in learning about HTML 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 HTML 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 HTML 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.