Dan's XHTML-CSS Tutorial : Walkthrough : Page 1

Writing HTML and XHTML

[back to 'Introduction' - skip to 'Standardizing the Page']

The first thing you should do in any project is consider what sort of content you're going to have. Obviously, if you're aiming to present a very specific type of information, you'll want to tailor your site to deliver it: an online photo album would have a different structure from a site devoted to your original poetry. In most cases though, you can get by with the same basic design--header, menu, content and footer--and that's what we'll be looking at here, to start with at least.

The basic structure of any HTML (or XHTML, in our case) page is always the same. The page consists of your text, plus information contained within angle brackets--like <this>--that tells the browser how the text should be displayed (each bracketed section is known as a tag). An empty HTML document might therefore look like this:

<html> <head> </head> <body> </body> </html>

You'll note that some tags begin with a slash; that indicates a closing tag. You see then that a browser would read everything between <head> and </head> as the head of the document, and between <body> and </body> as the body. And obviously <html> and </html> enclose the page's HTML contents. But of course, the tags are no good if there's no untagged content to go in them; so lets add some.

<html> <head> <title>beautiful AND standards-compliant</title> </head> <body> Look ma, I made this page all by myself! </body> </html> view result

Now you have a real web page! Copy those eight lines into a new text document, save it as 'index.html,' and drag-and-drop it into your browser. Voila, a really simple-looking web page! Since you're smart and already got tired of my pedantry in the last paragraph, I won't tell you what the <title> tags do, but will leave you to figure it out for yourself. I will tell you that your <title> can only go in the head of your document, and that if you leave out the title you'll a very amateur-looking page indeed.

Now, your title tells you that your page is beautiful and standards-compliant--but in fact, we have to admit that at this point neither is true. We'll deal with the latter first.

[ back to 'Introduction' - on to 'Standardizing the Page']