Diving into our Web Site
So far, we've looked at some very basic web pages as a way to ease you into the process of writing your own XHTML markup. Perhaps you've typed them up and tried them out, or maybe you've pulled the pages from the code archive and run them in your browser. Perhaps you've even tried experimenting for yourself -- it's good to have a play around. None of the examples shown so far are keepers, though. You won't need to use any of these pages, but you will be using the ideas that we've introduced in them as you start to develop the fictitious project we'll complete in the course of this book: a web site for a local diving club.
The diving club comprises a group of local enthusiasts, and the web site will provide a way for club members to:
- share photos from previous dive trips
- stay informed about upcoming dive trips
- provide information about ad-hoc meet-ups
- read other members' dive reports and write-ups
- announce club news
The site also has the following goals:
- to help attract new members
- to provide links to other diving-related web sites
- to provide a convenient way to search for general diving-related information
The site's audience may not be enormous, but the regular visitors and club members are very keen to be involved. It's a fun site that people will want to come back to again and again, and it's a good project to work on. But it doesn't exist yet! You're going to start building it right now. Let's start with our first page: the site's home page.
The Homepage: the Starting Point for all Web Sites
At the very beginning of this chapter, we looked at a basic web page with nothing in it (the car chassis, with no bodywork or interior, remember?). You saved the file as basic.html. Open that file in your text editor now, and strip out the following:
- the text contained within the opening
<title> and closing </title> tags - all the content between the opening
<body> and closing </body> tags
Save the file as index.html.
Here's the markup you should have in front of you now:
Example 2.6. index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
Let's start building this web site, shall we?
Setting a Title
Remembering what we've learned so far, let's make a few changes to this document. Have a go at the following:
- Change the title of the page to read 'Bubble Under -- The diving club for the south-west UK.'
- Add a heading to the page -- a level one heading (hint, hint) -- that reads 'BubbleUnder.com.'
- Immediately after the heading, add a paragraph that reads, 'Diving club for the south-west UK -- let's make a splash!' (This is your basic, marketing-type tag line, folks!)
Once you make these changes, your markup should look something like this (the changes are shown in bold):
Example 2.7. index.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble Under - The diving club for the south-west
UK</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK - let's make a
splash!</p>
</body>
</html>
Save the page, then double-click on the file to open it in your chosen browser. Figure 2.13 shows what it should look like.
Figure 2.13. Displaying our work on the homepage
Share and Enjoy:
