HTML and CSS:
An Absolute Beginner's Guide

By Ian Lloyd, SitePoint.com

Chapter 2. Your First Web Pages

A wise man once said that a journey of a thousand miles begins with a single step. In this chapter, you'll take that first metaphorical step on your journey towards web site enlightenment: you'll create your first web page. By the end of the chapter, you'll have duplicated that first page to form the beginnings of a multi-page web site.

Nice to Meet you, XHTML

In the preface to this book, we touched briefly on what XHTML is. In this chapter, we'll learn the basics of XHTML, periodically previewing our progress in a browser, and steadily building up our knowledge of various XHTML elements. Elements are the basic building blocks of XHTML; they tell the web browser what a particular item in the page is: a paragraph, a heading, a quotation, and so on. Elements contain all the information that the browser requires, as we'll soon see.

Anatomy of a Web Page

In the preface, we said that learning XHTML was like taking a driving lesson. To take that analogy a step further, you can imagine a web page as being the car in which you're learning to drive. There are some things that are essential to the process of driving; others are mere fashion items. For instance, the interior might have two seats, or it may have four or six; it might have black leather trim, fluffy dice, or faux leopard-skin door panels. But, while you may dearly love those door panels, they're not essential to driving.

You can't drive the car unless you have a steering wheel to hold onto, four wheels (at a minimum!), and a place to sit. The car must also have some kind of chassis to which the bodywork can be bolted. An engine is needed to power the car, as is bodywork to which your (nonessential, but spiffy) trim can be attached. Anything less, and all you have is a collection of attractive -- but useless! -- spare parts.

Like the car, your web page also needs to have a chassis: a basic structure upon which everything else can be built. But what does this hypothetical 'chassis' look like? The best way to find out is to get down on our hands and knees (again, figuratively speaking) and take a close look under the hood.

Viewing the Source

One of the great things about learning to build web pages is that you and I have the ability to view the source code of other people's web pages. You can learn a lot by simply taking a peek at how someone else's web page was built -- but how do you do it?

Although every browser uses slightly different terminology, the variations in the ways different browsers let us view web page code are so small that the process doesn't need to be spelled out for every browser. Here's the technique you'd use to view a web page's source in IE: [19]

• Bring up a page in your browser. (I'd suggest the Web Standards Project's homepage. The Web Standards Project (WaSP) is a group that promotes the benefits of building your web site correctly, so you can be pretty sure they've got it right!)
• Position your cursor somewhere on the page (other than over an image), and right-click (Ctrl-click on a Mac). You should be presented with the context menu shown in Figure 2.1.

Figure 2.1. Selecting the View Source command after right-clicking on a web page

• Select View Source, and a new window will appear, displaying all of the page's underlying markup.

At this point, we're not going to analyze the markup that you're looking at, but this is one of those tricks that's really useful to know from the beginning. A note of warning, though: most web pages don't use best-practice techniques, so avoid looking at a page's source unless the web site in question is mentioned in this book as being a good example.

Basic Requirements of a Web Page

As we've already discussed, in any web page, there are some basic must-have items (all of which you could pick out if you scanned through the markup that appeared when you tried to 'view source' a moment ago):

• a doctype
• an tag
• a tag
• a