Web Page Structure

So now we know some basic facts about web pages:

web pages are text files with an ".html" suffix and HTML commands / tags
HTML commands are written in angle brackets < >
Most HTML tags have a beginning and ending command; the ending has a backslash
Most HTML tags have attributes which give specific information
Attributes are not added to ending commands
In HTML, the "Enter" key will not make a new line in the web page
In HTML, more than one space will not be visible unless you use the special character  
"Enter"s and spaces will be visible if you put them inbetween <PRE> and </PRE> tags

Knowing these basic points, we can now move on an start understanding the structure of a web page.

Basic Parts of a Web Page

Each web page begins and ends with a special command: <html> and the ending </html>. These commands tell the browser that everything in-between is the web page.

Inside the web page, there are two basic parts: the HEAD and the BODY.

The HEAD is used to give the title of the web page (visible in the Title Bar). It can also contain information about the web page, such as keywords, what the page is for, where people will go after this page, and so on. In this class, we will use it just for the TITLE of the web page. The HEAD area of the web page begins and ends with the commands <head> and </head>.

The BODY is where the real web page is. That's the area which holds the information which we think of as the "web page." The BODY area of the web page begins and ends with the commands <body> and </body>.

Here is how the web page looks with only the basic structure:

<html>

<head>

</head>

<body>

</body>

</html>

Keep in mind that the colored boxes are only here to show you the basic areas; you won't see colored boxes when you create a web page.

The Head

Now let's learn the simple form of the HEAD of the web page. As I mentioned, many things can be put here, but we are just going to learn how to add the title of the web page, to appear in the Title Bar of the browser window.

It's very simple; inside the HEAD command, put the TITLE command. Then write the title inside the TITLE command. It should look like this:

<head>
<title>
Welcome to My Web Page!
</title>
</head>

That's it! Now your web page will have the words "Welcome to My Web Page!" in the Title Bar.

As I mentioned before, the "Enter" key will make no difference in the web page. Therefore, the above web page code could also be written like this:

<head><title>Welcome to My Web Page!</title></head>

And that will appear exactly the same. In the first example, I just added the line breaks ("Enter" key) just so it would look more simple and clean to you. But in reality, it makes no difference whether you have line breaks, no line breaks, or dozens of line breaks; none will appear on the actual web page.

The Body

The BODY area will of course have a lot more information, because that is where the actual web page will appear. Everything in the body appears "in" the web page.

Let's begin by learning some basic spacing and formatting commands that we can use.

Begin Tag	End Tag	Name	Description
<br>	none	Line Break	Makes one line space; like "Enter"
<p>	</p>	Paragraph	Makes two line spaces; like two "Enter"s (NOTE: the ending tag for the Paragraph command is not necessary unless you use attributes)
<b>	</b>	Bold	Makes text in between bold (heavy)
<em>	</em>	Emphasis	Makes text in between italic (emphasized)
<hr>	none	Horizontal Rule	Makes a line across the page separating things above and below the line
<center>	</center>	Center	Everything in between is changed to center alignment on the web page
<blockquote>	</blockquote>	Blockquote	Everything in between is given a 1/2-inch indent.

The BR and P tags are like the ENTER key on a keyboard. While the BR tag will simply jump to the next line, single spaced, the P tag will jump almost two line spaces, leaving a break between paragraphs.

B and EM are commands for Bold and Italic text. The STRONG tag also makes letters bold, and the I command also makes italics.

HR makes a Horizontal Rule, or a straight line across the page.

CENTER will center text on the page. Note that there are no "LEFT" or "RIGHT" commands. In order to do center or right spacing, you can use the P command with the ALIGN attribute (for example, ).

BLOCKQUOTE is a plain half-inch indent. In order to do first-line or hanging indents, one has to use CSS script, which is a more advanced script than HTML.

Let's begin with a very simple web page to start with. In the body, let's make this:

<body>
 
<center>
How do you like my web page so far?
<hr>

Are you having fun yet?
</center>
</body>

To see what this web page looks like, click this link.

Review

So, here is the whole code for the web page we are making so far:

<html>

<head>
<title>
Welcome to My Web Page!
</title>
</head>

<body>
 
<center>
How do you like my web page so far?
<hr>

Are you having fun yet?
</center>
</body>

</html>

That's all you need! Again, the page looks like this.

Now You Know

Now you know the basic structure of the HTML page. You are ready to start making your own web page.