Lab 3
 Page 4

The Framework of an HTML file

The next few sections will help you create your own web page. Open Notepad and follow the instructions given for using each tag.

The HTML tag

Every HTML file must begin with <HTML> and end with </HTML>.

These two special tags tell your browser that the file is written in HTML and that it should translate every tag it finds between them into the proper effect. Everything you put in your HTML file must go between these two tags so you'll probably want to leave a lot of space to work with.

  1. Type <HTML> at the very top of your file.
  2. Press Enter a few times to make some space in the middle.
  3. Type </HTML> at the very bottom of your file.

The HEAD and TITLE tags

There are two separate parts to an HTML file - the HEAD and the BODY. The HEAD comes first, is surrounded by the <HEAD> and </HEAD> tags, and usually contains information about the HTML file that is not displayed as normal text. Often, it will include the author's name, keywords, and a summary of the file, though these things are never actually displayed in the browser. Instead, they are used by search engines and other programs to categorize or list the page. Since none of this information is displayed, you do not need to include it.

One exception to this invisibility rule, however, is the title of your page. If you look in the Titlebar of your Netscape window, you should see the title of the page you are on. If you were to find the page in a search engine or among your Netscape bookmarks, it would have the same title. You can use the <TITLE> and </TITLE> tags (within the HEAD section) to indicate what the title of your web page should be.

  1. Type <HEAD> underneath the <HTML> tag to begin the HEAD section.
  2. On the line below that, type <TITLE> to begin the title of your page.
  3. Type in a title.
  4. Type </TITLE> to indicate the end of your title.
  5. Type </HEAD> underneath that to end the HEAD section.

The BODY tag

Finally, it is time to create the BODY section of your file. Everything you place in this section will be displayed in the main window of your browser.

Unlike the other tags you've seen so far, the BODY tag has a few options, called attributes. These are special instructions which you can include inside the tag to customize your page. Each attribute is written as name = value where name is the name of the attribute and value is what you set it to be. You are never obligated to include these attribute pairs; they are completely optional.

For example, typing in <BODY BGCOLOR="blue"> instead of just <BODY> will make the background color of your page blue. (Note that there is a space between BODY and BGCOLOR)

The most popular attributes of the BODY tag are:

Name Value Effect
TEXT a color changes the color of all normal text
BGCOLOR a color changes the background color
BACKGROUND a filename displays an image file as the background

Thus, if you wanted a black page with white text, you would use: <BODY BGCOLOR="black" TEXT="white"> If, on the other hand, you had a picture of cats named "cat.gif", you might try: <BODY BACKGROUND="cat.gif" TEXT="red"> That would tile the cat picture over and over as the background of your page, and all your text would appear in red!

Here's a list of the available colors:

Available Colors
YELLOW GREEN BLUE RED WHITE
GOLD AQUAMARINE MIDNIGHT BLUE PINK SILVER
ORANGE TURQUOISE PURPLE LAVENDER GRAY
BROWN SKY BLUE MAROON BEIGE BLACK


  1. Type <BODY BGCOLOR="white" TEXT="black"> on the line under the </HEAD> tag to begin the BODY section.
  2. If you would prefer other colors for your background and text, change them now.
  3. Press Enter a few times to make some space (you'll be adding a lot more here later).
  4. Type </BODY> right above the </HTML> tag to end the BODY section.

The Entire Framework

That's everything you need to know to create a basic HTML file. Everything else you will learn in today's lab is all about how to create actual content for your web page, all of which will go between those <BODY> and </BODY> tags.

Here is what you should have so far. Don't worry if the spacing is a little bit different, or if you've chosen different colors. Just make sure you understand what each tag does. If you're confused, ask a TA for assistance.

(If you would like, you can copy all of this by highlighting it and choosing "Edit|Copy". Then you can paste it into your HTML file in Notepad instead of typing in each of the codes yourself.)

HTML Framework
<HTML>

<HEAD>
<TITLE> Title of the Web Page Goes Here </TITLE>
</HEAD>

<BODY BGCOLOR="white" TEXT="black">

(All the content of your web page - what you want your viewers to see in their main window - will go here. This section is usually be quite long.

</BODY>

</HTML>

PREVIOUS 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 NEXT