Web Page Structure

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 & Title

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 (you saw the same thing in the last chapter):

<head>
<title>
This is the title of the page
</title>
</head>

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

Note: The <head> command has no attributesDo you remember what attributes are? They are extra information about a command, like the size and color attributes for the <font> command..

The <title> area can also hold special commands which "set up" the page, or add more information about the page. Using the <script> command, for example, can set up special JavaScript programs which will enhance your page (such as buttons that change appearance when you move the mouse over them). The <style> command can add CSS properties to enhance the layout of your page. The <meta> tag can be used to add information about your page--for example, the author's name, a description of the page, or a list of keywords that search engines can recognize and use to help people find your page.

We will not study or use the <script>, <style>, or <meta> tags in this class (though we will study the "script" attribute--not the tag--near the end).



If you know the code above, you can already make the most basic web page--it looks like this:

<html>
<head>
<title>
The Title
</title>
</head>
<body>
Here is some content!
</body>
</html>

We will not practice this in a Live Exercise because the exercises do not show the title in the title bar, and the structure doesn't show up either. However, you should try to practice this by typing it out in a text editor like Notepad, so you can remember it. If you make web pages often, you will be typing this basic structure quite a bit.


 



 



Video Review