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). Elements tell the web browser what a particular item in the page is: a paragraph, a heading, a quotation, and so on. These 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, 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.
To drive the car you need to have wheels (including the steering wheel), and a place to sit. The car must also have some kind of chassis to which the bodywork can be bolted. An engine is required 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 roll up our sleeves, figuratively speaking, then take a closer look at what’s going on underneath the cosmetic features.
Viewing the Source
One of the great things about learning to build web pages is that we all 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 that?
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:
- Bring up a page in your browser, for example 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 confident that 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 a context menu similar to those shown below.
- Select View Source, (or View Page Source for Firefox) 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.
Caution: Careful Who You Trust!
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. You would have seen all of these if you scanned through the markup that appeared when you tried to view source a moment ago:
- a doctype
- an
<html>tag - a
<head>tag <title>tag- a
<body>tag
These requirements make up the basic skeleton of a web page. It’s the chassis of your car with some unpainted bodywork, but no wheels or seats. A car enthusiast would call it a project — a solid foundation that needs a little extra work to turn it in to something usable. The same goes for a web page. Here’s what these requirements look like when they’re combined in a basic web page:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
</body>
</html>
Those of you with eagle eyes may have also spotted the <meta> tag in the markup above. I know I haven’t mentioned this yet; we’ll get to it soon enough. For now be content with the knowledge that, although the <meta> tag is not part of the skeletal requirements of a web page, it serves many useful purposes, especially the provision of supporting information about the web page.
The markup above is the most basic web page you’ll see here. It contains practically no content of any value (at least, as far as someone who looks at it in a browser is concerned), but it’s crucial that you understand what this markup means. Let’s delve a little deeper.
Ian Lloyd
