Web Page Structure

So now we know some basic facts about web pages:

  • web sites are folders on computers connected to the Internet
  • 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 &nbsp;
  • "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.

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.

Formatting Note

You might notice that when I display the "head" HTML code above, I not only put each element on a different line, but I indented the lines to show levels of commands. This is called "nesting," and shows which commands are inside other commands. The beinning and ending "head" commands are farthest to the left; the "title" command is "nested" inside the "head" command, so it's indented; and the title itself is inside the title command, so it is indented one further.

You don't have to indent like this, but some people find that it helps them "see" the code they create more clearly. It's completely optional, up to your own personal tastes.

As for putting each element on a different line: again, this is not at all necessary, but it makes the code more clear. The web page code above could also be written like this:

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

And that will appear exactly the same in the web browser. 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. It's only to make things look "cleaner" to you as you write the HTML code.

I would like to test the HEAD command in a Live HTML window, but the HEAD command doesn't make any visible changes there. We'll have to wait until we make an actual web page document to test this one out. (If you're adventurous, you can try that now, using a text editor like Notepad.)

The Body

The BODY area will usually have a lot more information than the header, because that is where the actual web page will appear. Everything in the body appears "in" the web page, or in the main window area of the browser--between the toolbars at top and the status bar at the bottom.

The BODY command commonly takes five attributes:

Attribute Values Description
background image location sets a background image. If the image is smaller than the window, then it "tiles" (repeases horizontally and vertically) to cover the whole window space.
bgcolor color sets a solid color background (standard default is white).
text color sets the default font color for the page (standard default is black). The "FONT" command overrides this color.
link color sets the default color of unvisited links (standard default is blue)
vlink color sets the default color of visited links (standard default is pruple)


An example of a BODY command with all attributes:

<body bgcolor="lightblue" background="paper.jpg" text="darkred" link="orange" vlink="gray">

NOTE: if used together, the BACKGROUND attribute will "cover up" a BGCOLOR designation.

Live HTML Exercise (Body Attributes)

Quick review: try out the BODY attributes in the live-test window below. In this exercise, you should ONLY make changes to the BODY command at the very top. Just add various attributes.

To help with colors, here is a link to a page which shows 140 different color names which can be used in HTML.
NOTE: all colors are typed as one word; do NOT type "dark red" with a space; instead, type "darkred" as one word.

I have already added the BODY command, along with a few links to show you how they'll change in appearance. To test the BACKGROUND attribute, use the images "paper.jpg" or "paper.gif" which I have included with this page so it will work below:



Structural Commands

While we're looking at the body, let's review some formatting commands we've already learned and add a few more, looking more carefully at what each one does.

LINE BREAK

command
end command
name of command
possible attributes
<br>
none
line break
 clear; (css)

This is essentially like the "Enter" key for HTML. It will create a new line, with single-spacing. The "clear" attribute (values: all, left, right, none) clears away pre-existing alignment formatting; it is not often used.

When I type "(css)" under attributes, it means that if you study CSS in the future, you will be able to add formatting to this command using attributes such as "style" or "class".


PARAGRAPH

command
end command
name of command
possible attributes
<p>
</p>
paragraph
 align; (css)

The paragraph command is also like hitting the "Enter" key, but adds more space between lines. This is similar to "paragraph spacing" in MS Word, in that it will create an extra space to show the end of one paragraph and the start of another.

Using the "align" attribute (values: left, center, right) allows for paragraph alignment. If you use <p align="center">, then the "<center>" command is not needed.


BLOCKQUOTE

command
end command
name of command
possible attributes
<blockquote>
</blockquote>
blockquote
 cite; (css)

The blockquote is simply a "left indent," pushing the entire paragraph a half-inch to the right. You do not need to use the <p> command AND the <blockquote> command together; the blockquote replaces the paragraph command. Think of the blockquote command as paragraph-plus-1/2-inch-indent.

You can nest blockquote commands for incresed indents. Two blockquotes will indent by 1 inch, 3 will indent by one and a half inches, and so on. Each ending blockquote command (</blockquote>) will start a new paragraph a half-inch more to the left.

The "cite" attribute (value: any URL) is an invisible notation which will not affect the web page. It hides in the HTML code and only serves as a programmer's note as to where the cited material comes from.


HORIZONTAL RULE

command
end command
name of command
possible attributes
<hr>

none
horizontal rule
 width, size, align, color, noshade; (css)


The HR command makes a horizontal line, usually used to break up parts of text, as a divider.

The attributes include: width (values: number of pixels, percent of window/table width); size (values: number of pixels) which controls the thickness of the line; align (values: left, center, right) which controls where the line appears from left to right; color (values: color name); and noshade--noshade is unusual, in that it does not have a value. You just add "noshade." The noshade attribute takes away the 3-d shading of the line.

Keep in mind that "noshade" cancels out the "color" attribute, making the color a medium gray.

Here is an example of an HR command with many attributes, and what it looks like rendered below:

<hr width="300" size="10" align="center" color="darkred" noshade>

CSS can be used with the HR command to give it special qualities, such as dashed lines or background images.


H1-H6

command
end command
name of command
possible attributes
<h1>
</h1>
heading 1
 align; (css)

The heading command denotes the title of an area of text. Visually, it creates bold text of varying sizes. <h1> is the largest, <h6> is the smallest. <h1> is intended as the main title; <h2> for subtitles; <h3> for titles of the next-lower section, and so forth. The heading commands are special because they are counted by search engines as special text; any text in a heading tag is considered "keyword" material, and will help people find your page by typing in that text. It won't magically vault your page to the top of search engine results, but it can help in some ways.

You'll probably find H5 and H6 too small to be useful as titles.

The heading command is included here because it has special properties. First, it includes a paragraph break (like the blockquote command), so an addition <p> or <br> is not necessary; second, to denote sections of a pagel and third, because of the ability to influence search engine results.

Some people dislike the heading commands because they are inelegant and appear clunky to some. This can be changed by using CSS formatting.


Live HTML Test (Structure Commands)

Quick review: we have just gone over the BR, P, BLOCKQUOTE, HR, and H1-H6 commands. See if you can use each of these in the live HTML window below:

 

Review
  • Each web page must have a HEAD and a BODY.
  • The HEAD defines the TITLE for the page, which appears in the Title Bar of the Window.
  • The BODY command defines the main area of the web page, and has attributes to set a color or image for the page background, and colors for text, links, and visited links.
  • Structural commands (commands which help set the structure of text in the page) include BR, P, BLOCKQUOTE, HR, and H1-H6.

Now You Know

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