Make your own free website on Tripod.com

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 <B>, <I>, and <U> 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:

Most likely, you will notice that many of these tags do the same thing. On my browser, <EM>, <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:

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

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:

Keep in mind the same rules apply with these properties as for the COLOR property of the <FONT> 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 <FONT> 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 2<SUP>nd</SUP> Web Page!</H1></CENTER><BR>
<P><FONT SIZE=1>My </FONT><FONT SIZE=2>Skills </FONT><FONT SIZE=3>Keep </FONT><FONT SIZE=4>Growing </FONT><FONT SIZE=5>and </FONT><FONT SIZE=6>Growing</FONT><FONT SIZE=7>!</FONT><BR>
<A HREF="#">This is a link, I defined the colors in the body tag</A><BR>
<A HREF="#"><FONT COLOR="#FFFF00">This link is yellow no matter what</FONT></A></P>
</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 <BR> tag until the end of the sentence. Also, notice how the <FONT> tag is used to overide the normal color of a link. This is because the <FONT> 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.

Close this window when you are done printing.