While everyone's web page is different, they all have to have the same basic structure. This uniformity allows browsers (like Netscape) to read the page and understand what the author means.

The framework of a web page is this:

<HTML>
<HEAD>
<TITLE> Your Page's Title </TITLE>
</HEAD>
<BODY>
The Body of Your Page
</BODY>
</HTML>

The <HTML> </HTML> tells the browser that your page is definitely HTML code.
The <HEAD> </HEAD> encloses the header of your page. In the page header, you can add lots of other commands which give the browser special information about your page.
The <BODY> </BODY> sections off the part of your page that will actually be displayed.

Now that you have the framework, what actually goes in it? Well, think of the body of a web page as an old WordStar-style document. It consists mainly of text, modified by Tags. There are a wide variety of tags, some of which are interpreted differently by different browsers.

NOTE: In general, all HTML commands will take the form:
<COMMAND> text </COMMAND>.

Style Tags modify the way your text looks. The following list is not comprehensive, but it's close: 

preformatted text

NOTE: HTML does not recognize more than one consecutive space as separate entities, so ten spaces, 2 carriage returns, 3 tabs and 5 more spaces will look like a single space on your web page when viewed by a browser. One of the only ways to get HTML to recognize multiple whitespace characters is to use preformatted text. The downside is that it's displayed in a blah, typewriter-like font.

Since HTML interprets carriage returns as spaces, special tags must be used for carriage returns. The <BR> tag is the same as a carriage return, and <P> is the same as two carriage returns.

NOTE: Since HTML condenses whitespace, two <BR> tags together are still only equivalent to one carriage return. <P> must be used to get a space between lines.

Along the same lines as <P> and <BR>, is the <HR> tag. The difference is that instead of a space between lines, it draws a line between them.
The thickness of the line can be controlled by using <HR SIZE=##>, where ## is the thickness of the line you want.

There is also a No Break tag. It tells the browser that the enclosed text should not be broken up unless absolutely necessary. The No Break tag looks like this: <NOBR> text not to be broken </NOBR>.

Heading Tags are very similar to style tags. Headings come in six sizes, 1-6. 1 is the largest. 6 is smallest. The heading tag also includes an implicit <BR> at the beginning and end. The format for the heading tags is <H#> with # being a number 1-6, and they look like this:

<H1>

This is a size 1 heading

</H1>

<H2>

This is a size 2 heading

</H2>

<H5>

This is a size 5 heading

</H5>

A very useful ability is changing the Font Size. This can be done two ways. First, is can be done with <FONT SIZE=##> </FONT>, where ## is a number 1-7, 1 being smallest. It can also be done with <FONT SIZE="##"> </FONT>, where ## is a number from -2 to +4. There is a direct correlation between the two, i.e. 1="-2", 2="-1", etc.

Using the font tags, the whole text can be changed
Or just a part of it.

One of the cooler tricks with font tags is to simulate an ALLCAPS FONT. Just make the caps a size or more larger than the lower case letters.

Some characters are recognized by HTML as part of the code, not as text. &, ", <, and > all are interpreted as code. To use one of these characters in your text, you must use an equivalent code. Here's a list:
&&amp;
"&quot;
<&lt;
>&gt;
®&reg;
©&copy;
As you can see, other special characters may also be printed using & codes.

NOTE: & codes ARE case sensitive.

The next lesson is Structures.

Take the Basics Pop Quiz

Return to the Menu