XHTML Tutorial #1 - The Beginning - Page 3
Basic XHTML page structure
Back on page 1 of this tutorial we stated that HTML files contain text surrounded by markup tags.
Our example on the previous page only contained text, no markup tags. Let’s add two sets of tags that are required for every XHTML page.
Save the following code as example002.html in the directory where you are saving your HTML files.
<body>
Hello, World!
</body>
</html>
Now open this file using your browser. (If you’re getting confused about where to save files, or how to view them in a browser, review the previous page.)
What’s the big deal? It doesn’t look any different than example001.html did.
Different sections of HTML files are surrounded by different types of tags. We’ll be seeing more of these sections and tags in future examples.
In this example we see at the very beginning of the file and the very end the file <html> and </html> tags. These tell the browser “Hey! HTML coming!”
So now someone is asking – Why? It displayed the same way with or without the tags. At this point can you just accept that this is necessary? All will be made clear in time, but we need to add a few more pieces in future examples.
The other set of tags was the <body> and </body> tags. These tags indicate the...well, body of the document. This is the part of the file that is going to be displayed on the monitor.
Two things you have hopefully noted at this point: (1) Tags come in pairs, and (2) the ending tag resembles the form of the beginning tag with the addition of the slash (/) character.
Tags must come in pairs for the XHTML document to be a “well formed” XML document. HTML 4.01 is not strict about this, but you really should get in the habit of putting tags in pairs from the very beginning.
Add a few more tags
Back on page 1 of this tutorial we stated that HTML files contain text surrounded by markup tags.
Our example on the previous page contained text and HTML and BODY tags. Let’s add some more tags to start formatting our text and our window.
Save the following code as example003.html in the directory where you are saving your HTML files.
<html>
<head>
<title>XHTML - Adding Some Tags</title>
</head>
<body>
<h1>Basic Tags</h1>
<p>This is a paragraph</p>
</body>
</html>
Now open this file using your browser. (If you’re getting confused about where to save files, or how to view them in a browser, review the previous page.)
We have now added three tags, well, actually 4.
The first tags we added were the <head> </head> pair. This indicates a special section in an XHTML document. You will be learning a lot more about this special section in future lessons.
Inside of the HEAD section we added <title> </title> tags and within these tags we indicated the title of this web page. Note that the title we added now appears in the title bar of the window.
In the BODY of the document we have added two new sets of tags. The first set is the <h1> </h1> tag that indicates a header. There are actually six sets of header tags - <h1> through <h6>. The second set of tags is the <p> </p> tag that indicates a paragraph.
On the next page we'll discuss the structure of tags and their relationship to each other a little more in depth.
Additional resources
- <body> </body> tag
- <h1> </h1> to <h6> </h6> tag
- <head> </head> tag
- <html> </html> tag
- <p> </p> tag
- <title> </title> tag
BestWebTutorials.com is a free service of CrystalClearWeb.net. You can help us keep providing free tutorials and information by:
- Link to us
- Tell a friend
- Correct any you might find
- Make for improvement
- Make a donation
BestWebTutorials.com attempts to post accurate information on this site, but we cannot guarantee that errors do not sometimes occur. The use of code examples from this site in any other site is at the user's own risk. We cannot guarantee that our code might not be in conflict with code written by others, or that our code is fit for other uses.
For further information please review our Terms of Use and Privacy Policy.
Copyright 2005-2008 CrystalClearWeb.net. All rights reserved.
