Bear with Me
08/08/2001 2:55
A Look at HTML
The Beginning
The Internet was initially created back in the 70's to swapinformation. Back then some brilliant scientists came up with some
ideas for writings documents to share their information. This idea
turned into what is called HTML.
HTML what?
HTML is a set of rules and functions for presenting informationon the Internet. With HTML you can write up a resume. You can write
up personal information about your summer vacations. Or you can
even write a page totally devoted to your pet hamster!
How do I write HTML?
HTML pages can be written up in many ways. You can use any texteditor on any computer system. The main structure of an HTML page
is quite a simple process. First, we need to discuss HTML tags.
HTML tags
In order for your internet browser to understand an HTML filethe scientists 30 years ago devised a simple yet powerful structure
for encapsulating information. These are called TAGS.
HTML Tags are used to wrap around information so the computer knows
what to do with it. The basic HTML Tag structure consists of two types
of tags.
One type of tag is for opening :
<HTML>
The other type of tag is for closing :
</HTML>
Notice the subtle difference between the opening and closing tags. Seen
side by side they look like : <HTML></HTML> . The rest of an HTML page
consists of using opening and closed tags to seperate data.
All HTML pages must be wrapped with <HTML> tags. It's the begining
and ending marker for the computer. Example :
<HTML>
... more text here
</HTML>
Types of Tags
So far our HTML page is looking pretty horrible. It consists of onlyone opened and closed tag. Now, the fun part starts. (A quick list of HTML
Tags can be found in the Appendix).
Let's take a look at our current HTML page :
<HTML>
</HTML>
This is quite boring. Let's add a title to the page :
<HTML>
<HEAD><TITLE>Ear Wax Museum</TITLE></HEAD>
</HTML>
Now notice I've introduced two new tags : <HEAD> and <TITLE> . The
<HEAD> Tag is for declaring stuff before the main part of the HTML is
downloaded from the internet. The <TITLE> Tag is used to tell the
computer to set the top bar of the browser to "Ear Wax Museum".
Change the <TITLE> Tag to something else if you like.
Now that we have a title for the page... how about adding some
content? I want to say hello to all the visitors of my Museum. I, also,
would like to have a list of all the different wax we have. Let's see
how I would do that :
<HTML>
<HEAD><TITLE>Ear Wax Museum</TITLE></HEAD>
<BODY TEXT="BLACK" BGCOLOR="WHITE">
<H1>Welcome to the wonderful Ear Wax Museum</H1>
<H3>We have wax from:</H3>
<UL>
<LI>Ford Prefect</LI>
<LI>Zaphod Beeblebrox</LI>
<LI>Trillian</LI>
</UL>
</BODY>
</HTML>
As you can see from the previous HTML it's quite obvious that
there are many different types of tags available for use. In this
section the <BODY> <H1> <H3> <UL> and <LI> tags were introduced.
Let us go over each quickly.
The <BODY> Tag helps distinguish where the bulk or body of the
text will go. Within the opening tag two attributes are attached.
These two attributes are called TEXT(for color of default text)
and BGCOLOR(for default background color). Attributes are always
placed with opening Tags. Essentially, we declared the page
to set the background to white and the forground text to black.
This change will make add an appealing look to the page.
Next, we have the <H1> and <H3> Tags... both are very similar Tags. They both make text between their opening and closing Tags "Headers" of differing sizes. Ranging from one to six, one being largest and size being the smallest, these header Tags help the computer show text in a larger font to attract more attention to parts of the HTML page. In this example we direct attention and welcome the viewers as well as begin our list of collected Ear Wax.
The Following section consists of what we call a list of items.
The <UL> tag stands for "Unordered List". The <UL> Tag can easily
be switched to <OL> or "Ordered List". This will take the following
objects wrapped in <LI> Tags or "Limerick" tags and list them
accordingly. For Lists declared as "Unordered" a small dot will
appear to each object in the list whereas for "Ordered Lists"
each object in the list will be numbered. Notice how the </UL> closing
tag comes after the final "Limerick" closing tag? Always remember
to have both opening and closing tags.
Now that I have my spiffy page with a list and headers I want to
add a link to my friends page so that others can view his collections
of wax, too! To add a link we add this :
<HTML>
...
<a href="http://www.waxman.com/qtip.html">Check out Alvin</a>
...
</HTML>
Somewhere in the HTML page we'll place this tag for a "Hyperlink"
to my friends page. Once the tag is in... the page will automatically
link to the address in the "href" attribute each time the user clicks
on the words "Check out Alvin". Also, <IMG> tags can be placed inside
<A> tags to have users click on the images instead of text.
Done already?
Now that you've seen a few of the uses of HTML it is time for you toexperiment and move on. Since this brief introduction to HTML was
written for simplicity. For those who would like to learn more about HTML
or would like to try different Tags check out the Appendix for a list
of tags, syntax, and their functions.
Appendix
Name : Function----------.----------------------
<A> : This can be used for linking to other pages.
ex : <A HREF="http://www.yahoo.com/">Go to Yahoo!</A>
<B> : Bold anything between begining and ending tags
ex : "I can't believe it's not buzzer", said <B>Charlie</B>.
<BODY> : Designates the attributes of the main body of text in the html
document.
ex : <BODY BGCOLOR="WHITE" TEXT="BLACK" VLINK="green">
<BR> : This tag stands for "Line Break"
ex : A Box :<BR>===<BR>= =<BR>===<BR>
<H1><H2> : These are for large headers. A <H6> header is very Big!
<H3><H4>
<H5><H6>
ex : <H1>To be or not to be...<H1>
<HEAD> : Holds stuff that needs to be defined before the rest of the
page loads.
ex : <HEAD><TITLE>My Terrific Page</TITLE></HEAD>
<I> : Italicize anything between begining and ending tags
ex : I am so in <I>love</I> with her.
<IMG> : This is the Image Tag.
ex : <IMG src="http://www.foo.org/foobar.gif" alt="A Picture of Foo">
<TABLE> : For setting up a table
ex : <TABLE><TR><TD>Whoa</TD><TD>Cool</TD></TR></TABLE>
<TITLE> : This sets the title of the page.
ex : See <HEAD>
<U> : Underline anything between begining and ending tags
ex : <U>You're fired!!</U>
Work In Progress