Useractive Tutorial

Structure - HTML Lab 2

The Basic Structure of HTML

With all those WYSIWYG (What You See Is What You Get) editors out there, such as FrontPage and DreamWeaver, why learn HTML??

Good question. These editors are great if you want to create simple web pages quicky and easily. However, if you want to have control over both the presentation and functionality of your page, you must learn web programming techniques like JavaScript and CGI. And to learn these, you must learn HTML and learn it well.
The Head
By now you've gone through the first lesson, and you know how to save and edit your web page. If you've saved a page, you should go get it now. As you learned in the previous lesson, you can retrieve your saved document easily by clicking the button on the toolbar of CodeRunner®.

Got it? Good! Now, delete what you've written so far because we're going to start over. Sorry! Let's try using some other tags -- the head tag and the title tag.
In HTML mode, type the following into the Editor below
<head>
<title>
(your name)'S HOME PAGE
</title>
</head>
Click PREVIEW. When the new window comes up, examine the title bar at the top of the new window. What do you see?

You should see (your name)'S HOME PAGE displayed in the title bar. You can make the title anything you want. For example, the title of my web page looks like this:

Before talking about what these tags do, notice that these tags are closed by using something that looks like this: </tag>. Tags that need to be closed are called containers. For example, <head> is a container and is closed using </head>. <title> is a container and is closed using </title>. These pairs of tags tell the computer what to do with the text that is contained between them. Most of the tags you'll use are containers and therefore need a closing tag. Some tags do not need a closing tag because they do not give any information regarding what the format of any text. Such tags are called empty tags (or empty elements). An example of an empty tag is the HR tag. HR stands for Horozontal Rule. If you want to see what HR does, try it out! Type <HR> into the Editor, then click PREVIEW. It should look something like this.
Observe:
The Body
Ok, here is one of the most important things to learn from this lesson. Your HTML files are going to have two parts: a HEAD and a BODY. And, just like you, your page can have only

ONE HEAD and ONE BODY

Every HTML file has the following structure.
It should look something like this:

<head>
<---- Tags that are used within the head.
</head>

<body>
<---- Tags that are used within the body.
</body>

The majority of the tags you use will be contained in the body, between <body> and </body>. There are also some cool options called attributes that can be used with the <body> element itself. Let's try using some of them!
In HTML mode, type the following into the Editor below
<head>
<title>
(your name)'S HOME PAGE
</title>
</head>

<BODY BGCOLOR="#FF0000" TEXT="#0000FF">
<H1>Welcome to (YOUR NAME)'s Home Page</H1>
</BODY>
Click PREVIEW. We used the BGCOLOR attribute to set the background color of the web page. The TEXT attribute is used to set the color of the text. In this case, the background will be red, and the text will be blue.

The six characters following the # are the hexadecimal representation of the colors red and blue. To get other colors, all you have to do is change each character to one of sixteen values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Try changing these characters and see what kind of colors you can make! See if you can find a pattern. Can you make a purple background? Can you make dark green text? Take some time to experiment! Click here for more information about hexadecimal codes.

We can use the <BR> tag (which means line BReak) and the <CENTER> tag to make it look even better. Note that <BR> is an empty element -- you don't need </BR>.
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
(your name)'s HOME PAGE
</TITLE>
</HEAD>
<BODY BGCOLOR=#ffd0f0 TEXT=#0000ff>

<CENTER>
<H1>WELCOME TO
<BR>
(YOUR NAME)'s
<BR>
WEB PAGE</H1>
</CENTER>
</BODY>
Click PREVIEW. Pretty cool, huh?
The Font Tag
Another tag which has attributes is the <font> tag. We can use the <font> tag to change the size, color and face of any text in the document.
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
(your name)'s HOME PAGE
</TITLE>
</HEAD>
<BODY BGCOLOR=#ffd0f0 TEXT=#0000ff>

<font size="6" color="red">This text should be large and red</font>

</BODY>
Try playing around with other sizes and colors! See if you can get a darkgreen size 10 font.

You may have noticed that you can use names to designate colors instead of using those nasty hexadecimal codes. You can find a list of available color name if you click TOOLS -> COLOR NAMES from the menu. You can also use the <font> tag to change the font type. This is accomplished using the face attribute. Try this:
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
(your name)'s HOME PAGE
</TITLE>
</HEAD>
<BODY BGCOLOR=#ffd0f0 TEXT=#0000ff>

<font size=4>This is your default text</font>
<br>
<font size=4 face="arial, helvetica">This is Arial or Helvetica font</font>

</BODY>
Notice that "arial" is followed by a comma, then "helvetica." This is because a browser will first try to use the first font in the list. If the computer you are using doesn't have that font, it tries the next one and so on. If the computer you are using doesn't have any of the fonts in the list, the text will be displayed in the default browser font.
Lists
There are many different ways to display a list in HTML. The first type of list we'll create is an ordered list using <OL> and </OL>. Within these tags we will use <LI> to declare list items. Try making an ordered list of your favorite movies or musicians (or whatever you want!) on your web page.
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
(your name)'s HOME PAGE
</TITLE>
</HEAD>
<BODY BGCOLOR=#ffd0f0 TEXT=#0000ff>

Favorite Live Rock Bands:
<OL>
<LI>Phish
<LI>Blues Traveler
<LI>Widespread Panic
<LI>Pink Floyd
<LI>Rolling Stones
</OL>

</BODY>
Experiment a bit! What happens if you remove the <LI>?

We can use other tags to make the list look more interesting. How would you make it look like this?:

Favorite Live Rock Bands:

Phish
Blues Traveler
Widespread Panic
Pink Floyd
Rolling Stones
Answer

You can control the type of numbers in an ordered list. Click here for more information.

You can also make unordered lists.

Now that you know a little more about HTML, have fun using your new knowledge! To try using some other tags, check out theUseractive HTML Reference