XHTML & CSS Tutorial - The webpage Shell

Before you make your first webpage I'll show you what tags (<p> and <table> for example are tags) are needed, I like to call this the webpage shell. I'll then show you a simple way to remember it and remember where to place the other tags and infomation in the right part of the shell.

This is the very basic webpage shell:

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

I'll show you a better more effective but longer shell soon after I explain a few things.

  • The <html> and </html> are the first and last things in your code. They tell the browser that theres some html code to look at.
  • The <head> and </head> open and close the head part of the webpage. The head part controls all the fancy stuff in your webpage and is generally the brains where all the complicated stuff goes.
  • <body> and </body> is where everything you want people to see on your webpage like text and images.

The way I remember this is think of the human body. The <html> and </html> tags enclose the whole code like your skin does with your body. The <head> and </head> tags is where all the complicated things in your page goes just like your head and brain. And finally the <body> and </body> tags is where you put anything you want people to see, like the clothes you wear.

Anyway I only used the very basic shell to show you where things goes without giving you too much to understand. Here's the shell your must likly be using in your webpages:

<!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" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Page Title here</title>
</head>
<body>
</body>
</html>

I'll explain what's been added here:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd"> is telling the browser that the webpage is XHTML 1.0 strict.
  • <html xmlns="http://www.w3.org/1999/XHTML" xml:lang="en" lang="en"> is a standard requierment for all XHTML pages.
  • <link href="style.css" rel="stylesheet" type="text/css"> includes the css file into the page.
  • <title>Page Title here</title> displays a title of the webpage like you see on the very top left of your screen.

Every tag must have a closing tag. Take <i> for example it's the tag to make text italic like what your reading now. Without the closing tag the browser wouldn't know when to stop making text italic. Closing tags are normally like the opening tag but with a / in. </i> is the closing tags for italic text for example.

Previous - 2. What is XHTML & CSS? || Next - 4. Your first webpage