Other head Elements
Other items, such as CSS markup and JavaScript [21] code, can appear in the headelement, but we'll discuss these as we need them.
The body Element
Finally, we get to the place where it all happens! The body element of the page contains almost everything that you see on the screen, including headings, paragraphs, images, any navigation that's required, and footers that sit at the bottom of the web page.
<!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>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
The Most Basic Web Page in the World
Actually, that heading's a bit of a misnomer: we've already showed you the most basic page (the one without any content). However, to start to appreciate how everything fits together, you really need to see a simple page with some actual content on it. Let's have a go at it, shall we?
Open your text editor and type the following into a new, empty document (or grab the file from the code archive if you don't feel like typing it out -- I understand completely!).
Example 2.1. basic.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>The Most Basic Web Page in the World</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<h1>The Most Basic Web Page in the World</h1>
<p>This is a very simple web page to get you started.
Hopefully you will get to see how the markup that
drives the page relates to the end result that
you can see on screen.</p>
<p>This is another paragraph, by the way. Just to
show how it works.</p>
</body>
</html>
Once you've typed it out, save it as basic.html.
If you're using Notepad, select File > Save As from the menu and find the Web folder you created inside My Documents. Enter the filename as index.html, select UTF-8 from the Encoding drop-down list, and click Save.
If you're using TextEdit on a Mac, first make sure that you're in plain text mode, then select File > Save As from the menu. Find the Sites folder, enter index.html, select Unicode (UTF-8) from the Plain Text Encoding drop-down list, and click Save. TextEdit will warn you that you're saving a plain text file with an extension other than .txt, and offer to append .txt to the end of your filename. We want to save this file with an .html extension, so click the Don't Append button, and your file will be saved.
Note: The Importance of UTF-8
If you neglect to select UTF-8 when saving your files, it's likely that you won't notice much of a difference. However, when someone else comes along to view your web site (say, a Korean friend of yours), they'll probably end up with a screen of garbage. Why? Because their computer is set up to read Korean text, and yours is set up to create English text. UTF-8 can handle just about any language there is (including some quite obscure ones!) and most computers can read it, so UTF-8 is always a safe bet.
Next, using Windows Explorer or Finder, locate the file that you just saved, and double-click to open it in your browser. Figure 2.7, 'Displaying a basic page' shows how the page displays.
Figure 2.7. Displaying a basic page
Analyzing the Web Page
We've introduced two new elements to our simple page: a heading element, and a couple of paragraph elements, denoted by the <h1> tag and <p> tags, respectively.
Figure 2.8. Comparing the source markup with the view presented in the browser
Do you see how the markup you've typed out relates to what you can see in the browser? Figure 2.8 shows a direct comparison of the document displays.
The opening <h1> and closing </h1> tags are wrapped around the words "The Most Basic Web Page in the World," making that the main heading for the page. In the same way, the p elements contain the text in the two paragraphs.
There's another point to note: the tags are all lowercase. All of our attribute names will be in lowercase, too. Many older HTML documents include tags and attributes in uppercase, but this isn't allowed in XHTML.
Share and Enjoy:
