Article
XHTML Web Design for Beginners - Part 2
XHTML is called a "markup language" because that's what you do with it: you mark up areas of text to indicate what they mean, so the browser can know what to do with them. This is done using elements. An element consists of two tags, an opening tag and a closing tag. Tags use the angle brackets: < > to show they're tags, and each closing tag also has a slash /.
Let's look back at the document we just saw. The <title> element is used to indicate the title of a page. In Internet Explorer this title is displayed in the bar at the top of the window. Our title element looks like this:
<title>Hello World</title>
The <title> tag means we're starting a new title element. This is then followed by the text that we want the title to be. In this case the title will be "Hello World". To tell the browser that we have finished with the title, we use a closing tag </title>. As mentioned above, the only difference between a start tag and an end tag is the slash /. This is essential, as it's the only way the computer knows whether you're starting a new tag or finishing a previous one.
The name of the opening and closing tags must be the same, so:
<title>Hello World</heading>
is invalid and will not work.
As well as containing text such as "Hello World" above, elements can contain other elements. If we look just outside the <title> element we can see it appears inside a <head> element like so:
<head>
<title>Hello World</title>
</head>
This means that the <title> is part of the <head> of the document, because it is inside it. There is no limit to how many elements another element can contain, as long as you follow the rules that we'll look at in a moment.
The <head> of a document is used to tell the computer things about your document rather than things that should be in it. The <title> is not part of the page itself; it describes what the document is, so it goes in the <head>. All XHTML documents must have a <head> element that contains one <title> element, although others are allowed (again, we'll look at these a little later).
After the <head> comes the <body>. The <body> is the part of the document that contains the page itself. All XHTML documents must have one <body> element. The body contains things like paragraphs, bulleted lists, pictures and links to other documents. All the information you view when you visit a site is contained in the <body> element.
Our <body> element is very simple; it contains a single element <p>:
<body>
<p>My first Web page.</p>
</body>
Have you guessed what the <p> element is used for? It marks a paragraph, so our page will have one paragraph with the text "My first Web page." in it. If we wanted add another paragraph we could do it like this:
<body>
<p>My first Web page.</p>
<p>I hope you like it.</p>
</body>
In a visual browser such as Internet Explorer the page above would look something like this:
Figure 2
View how this code will appear in your browser.
There's one more essential ingredient that we haven't covered. The <head> and <body> elements are contained within an element <html>. Our <html> element above looks like this:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>My first Web page.</p>
</body>
</html>
The <html> element must contain one <head> element and one <body> element.
You may be wondering why there's extra space at the start of some of the lines. This is purely for our benefit and makes no difference to the computer processing your pages. The idea is to add tabs or a set amount of spaces at the start of each line to match the level of your tags. Look at the code above, <html> is not contained in any element so there is no space. <head> is contained by one element, <html>, so it has one tab. <title> is contained by two elements, <html> and <head> so it has two tabs, and so on. Trust me, when your documents get big, this kind of indentation makes life a lot easier.
Now It's Your Turn
If you're up to the challenge, have a go at creating some pages yourself before reading any more. First of all try the "Hello World" example that we just looked at. Here's how.
Open up a text editor of your choice. If you're using Windows, then:
Start > Programs > Accessories > Notepad
will get you into Notepad, but any text editor will do. Please note that Microsoft Word and other Word processors are not text editors and aren't suitable for this task.
Now type in the code below. I recommend that you type the code in yourself (rather than using copy and paste), as this will help you to understand what you are doing. The tab key (for the spacing) is usually located above "Caps Lock" on the left of your keyboard.
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>My first Web page.</p>
</body>
</html>
Once you've typed the code into your text editor you will need to save it as a Web page file. Web page files have their own "extension" (the period and the three letters after the file name) to distinguish them from other files such as Microsoft Word (.doc) or Adobe Acrobat (.pdf).
Web pages use an extension of either .htm or .html. I prefer to use .html as it matches the name of the language. The choice is yours. Some old systems will not save files with four letter extensions so .htm may be your only choice.
Once you've saved the file, open it up in your Web browser. If you have typed it in correctly, you'll see something similar to Figure 1 above.
Now that you have your page, try adding some more paragraphs to it like this:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>My first Web page.</p>
<p>A second paragraph.</p>
<p>Yet another paragraph.</p>
</body>
</html>
Save your document again and refresh your Web browser. You should see the extra paragraphs appear after the first one.
Summary
That's it for your "Hello World" page. As I said when we started, don't worry if you didn't take it all in, we're going to be looking at each area in greater detail, but hopefully that has given you an idea of how Web pages work. In the next section, we're going to take a closer look at elements and tags and how they are used to build your documents.