*Note: Don't let this page frighten you. It is meant to give you a basic
overview. Do NOT try to memorize all the tags. Simply scan over this page, to
gain an idea of the concepts. Then move on to the next page, where we will
actually begin learning HTML in small bites.
HEADER and BODY
[Document Structure]:
Before we get too involved, you need to understand just why HTML exists.
Ever try to put a Macintosh disk into an IBM computer? Doesn't work too well. They don't speak each other's language. So the wise guys who put
the internet together, came up with
HTML (Hypertext Markup Language)
. The basic idea behind HTML, is to write a document, in a way that every computer in the world understands exactly where to put the
pictures, the words and other things, so that it looks exactly the same on every computer in the world.
When learning HTML keep in mind that writing a web page uses a lot of the same procedures as writing a program in a programming language. There are
commands to learn, and a certain order (command structure) to follow. If you do not do things in order, the computer will do EXACTLY what you tell
it to, even if it is not what you wanted it to do!
First we will give a general overview of some basic
TAGS
or
COMMANDS
.
These are words that tell the computer what to do. Do not get to worried
if it seems a little much at first. The next lesson will begin with how
to put the tags together in an way that makes sense. For now, don't worry
about trying to memorize them all, just look them over, and try to
understand what we are doing.
All documents have 2 parts, a
HEADER
and a
BODY
.
The header describes the document, and the body is the actual information
provided within the
document.
Here is the document structure of every HTML document:
To begin with, all tags begin and end with 'gator' symbols. These are your
"less than"
<
and "greater than"
>
symbols. Each tag (with very few exceptions) must be opened (declared) and
closed. A tag is closed with a "
/
". Example:
<EXAMPLE>
would open the command "EXAMPLE" (if there were one). To close the
command you would have to type a
</EXAMPLE>
command. The
/
means close.
<DOCTYPE>
Is used to describe the version of HTML you are using.
Usage: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
Used as
REMARK
statement... (
!
) no closure necessary
<HTML></HTML>
Usage: <HTML lang="en">
Tells your browser that it is looking at a
Hypertext Markeup Language
document
<HEAD></HEAD>
Used to set the
HEADER
apart from the
BODY
of the document.
<TITLE> </TITLE>
Used to specify a document title
Usage: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
< BODY > < /BODY >
Used to delimit entire body
Tags
(Header)
:
< Hx > < /Hx >
(6 Levels
x = 1 - 6
) 1 is Largest
Example:
< H1 >This is a big header < /H1 >
would yield:
This is a big header
Tags
(Line control, text control, lists)
:
<HR>
Horizontal Dividing Line. Creates a line across the screen. No closure
is necessary for this command.
Example:
<BR>
[BREAK] The equivilant of a carriage return.
Creates a break in the page (jumps down a line). No closure necessary
for this command.
<P>Paragraph</P>
equivilant of two <BR> commands.
<B>
BOLD
>/B<
self explanitory.
<I>
Italics
<I>
self explanitory.
<BIG>
BIG
<BIG>
self explanitory.
<SMALL>
SMALL
<SMALL>
self explanitory.
<TT>
Fixed Width Typewriter Font
</TT>
<SUB>
Subscript
</SUB>
<SUP>
Superscript
</SUP>
<UL>Unordered Outline Format / List</UL>
This is an Unordered Outline Format / List - notice no bullet mark!
<LI>Defines a Listed Item</LI>
This is a Listed Item... note the bullet mark.
<OL>Ordered Outline Format / List</OL>
This is an Orderd List Item... note the HUGE indentation!
<DL>Defined Outline Format</DL>
Begins a "Definition List"... paired up with the <DD> tag.
