Reading the HTML file that uses CSS design

Back to Computer Tips
Back to CSS Syllabus

If you would like to receive weekly emails with articles like this one, email Nora

This exercise contains instructions for downloading and reading a web page that has been formatted with CSS. This file originated on css Zen Garden , however, it is also on the web server for TheComputerGal.com, in case the Zen Garden web site should ever be taken down.

Create a folder in your web space called SourceFiles.
Go to the source file.
Save this file in your SourceFiles folder as Web Page, HTML only.
Open the HTML source file in Dreamweaver and preview in a browser
Go to the original CSS Zen Garden home page and look at the difference between the HTML file and what it looks like after CSS has been applied. (Remember that all the sites that are part of the CSS Zen Garden project have to use this very same HTML file.)
Open Exercise 1. This is a Word file. Save it in your web space in a folder called Exercises.
Look at the original CSS Zen Garden page and define all the different text formatting areas. Give them a name that you would call that type of font (or area it is used in) if you were making the decisions for the site. We will look at their names later. How many did you find?
Now go to the code view of the HTML file. Scroll down the page and notice that there are no tables.
Notice the tags around the text areas. There is no formatting shown here. (The <div> tags are layout tags that we will discuss another time.) As we discussed in Principle 2, all the text formatting information is in an external style sheet. (We will look at these another time. )
The most of the text formatting for this page comes from rewriting HTML tags, as we discussed for Principles 2 & 4. You should have listed the area for the site title "Zen Garden" in your list from #7. Notice that the tag in the HTML is <H1>. That tag has been rewritten for the browser to show the way you see it.
Try to find all the other ways that text has been formatted from the HTML code. After each of your items in the Word document, list those tags. You may find more to add to your list. There are some things that won't make sense at this time.