At this point, you know enough to get started creating simple HTML pages. You understand what HTML is, you've been introduced to a handful of tags, and you've even opened an HTML file in your browser. You haven't created any links yet, but you'll get to that soon enough, in tomorrow's lesson.
This exercise shows you how to create an HTML file that uses the tags you've learned about up to this point. It'll give you a feel for what the tags look like when they're displayed onscreen and for the sorts of typical mistakes you're going to make. (Everyone makes them, and that's why using an HTML editor that does the typing for you is often helpful. The editor doesn't forget the closing tags, leave off the slash, or misspell the tag itself.)
So, create a simple example in your text editor. Your example doesn't have to say much of anything; in fact, all it needs to include are the structure tags, a title, a couple of headings, and a paragraph or two. Here's an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Camembert Incorporated</title> </head> <body> <h1>Camembert Incorporated</h1> <p>"Many's the long night I dreamed of cheese -- toasted, mostly." -- Robert Louis Stevenson</p> <h2>What We Do</h2> <p>We make cheese. Lots of cheese; more than eight tons of cheese a year.</p> <h2>Why We Do It</h2> <p>We are paid an awful lot of money by people who like cheese. So we make more.</p> <h2>Our Favorite Cheeses</h2> <ul> <li>Brie</li> <li>Havarti</li> <li>Camembert</li> <li>Mozzarella</li> </ul> </body> </html>
Save the example to an HTML file, open it in your browser, and see how it came out.
If you have access to another browser on your computer or, even better, one on a different kind of computer, I highly recommend opening the same HTML file there so that you can see the differences in appearance between browsers. Sometimes the differences can surprise you; lines that looked fine in one browser might look strange in another browser.
Figure 4.11 shows what the cheese factory example looks like.
Figure 4.11. The cheese factory example.