HTML Tutorial #2

Make sure to read Tutorial #1 first!

Okay, now that we understand the basic format of HTML, we can play around with the many different tags available to us. In the last tutorial I listed several tags, such as , , and that can be used to format, or change the appearance of, text. There are many other tags similar to these which I will list briefly:

<TT> - This is teletype.
- This text is emphasized.
- This is strong text.
<CODE> - This text is code.
<VAR> - This text is variable.
<SAMP> - This is sample text.
<KBD> - This is keyboard text.
<CITE> - This is citation text.
<DFN> - This is definition text.

Most likely, you will notice that many of these tags do the same thing. On my browser, , <VAR>, <CITE>, and <DFN> all simply italicize the text. However, none of these tags are standardized, so each browser might display them differently. For this reason I don't recommend using any of these tags. These next tags are more dependable because they will show up the same in every browser:

<S> - ~~This text is crossed out.~~
- _{This text is subscript,
it is not often used.}
<SUPER> - ^{This text is superscript,
one possible use is writing exponents.}
<CENTER> - This text is centered on the page.

Now you're ready for the most powerful text-formatting tag: . Keep in mind none of the previous tags in this tutorial have any properties, but only works when you edit some or all of its properties. Here are the properties for the tag:

COLOR - This property sets the color of the text. Some browsers will accept words as the value, such as RED, or GREEN.
Example: 
However, not every browser recognizes the same set of words, and some browsers might not know any at all! The standardized way to write colors is in hexadecimal format, like this: #00FF00. This format is very confusing, maybe I will explain in it in another tutorial, but for now check the hexadecimal color table.
FACE - This property sets the font of the text. Some possible fonts are "Arial" and "Helvetica". But be careful! If the font is not installed on the viewer's computer, then the text will be displayed using the default font.
SIZE - There are 7 sizes of text in HTML (numbered 1 - 7). By default, all text is size 3. You can define the size by giving the exact number or giving a relative number such as +1 or -1.
Example: and do the same thing if the default font is 3 (because 3 + 1 = 4).

Remember that most of the page is contained within the <BODY> tag. This tag also has some properties that can be used for setting default colors:

BGCOLOR - This sets the background color of the page.
TEXT - This sets the default color of text (anything outside a tag).
LINK - This sets the default color of a link that the viewer has not yet been to.
VLINK - This sets the default color of links that the viewer has already been to.
ALINK - In most browsers, links will turn this color when the link is open in another window.

Keep in mind the same rules apply with these properties as for the COLOR property of the tag. Our last tags for today are the header tags. These tags are designed for headlines, or titles but they come in 6 sizes that range from very large to very tiny. Obviously, the very tiny ones don't work too well for titles, but this tag is ultimately easier to use than the font tag, because there are no properties. The tag looks like this: <H2> where the '2' can be any number from 1 to 6. VERY IMPORTANT NOTE: In header tags, 1 is the largest, and 6 is the smallest, in tags, 1 is the smallest and 7 is the largest. Now, here's a full example page that you can copy into your editor and play around with:

<HTML>
<HEAD>
<TITLE>My Second Web Page!</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#00FF00" ALINK="#0000FF">
<CENTER><H1>My 2nd Web Page!</H1></CENTER> 
My Skills Keep Growing and Growing! 
<A HREF="#">This is a link, I defined the colors in the body tag</A> 
<A HREF="#">This link is yellow no matter what</A>
</BODY>
</HTML>

A few things to note in this example: Even though the sentence "My Skills Keep Growing and Growing!" takes up more than one line in the code (because of the font tags), it appears on one line in the web browser because there is no tag until the end of the sentence. Also, notice how the tag is used to overide the normal color of a link. This is because the tag comes after the <A> tag. The order of tags can be very important, especially in the more advanced lessons. The HREF property is set to "#" which makes it a link to nowhere, so to speak.

Stay tuned for the next tutorial!
Get a printable version here.

Page Updated: 9/7/00