Jump to navigation

Sample Files

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.