HTML Structure & Style Tags

HTML Caveat: It is not a "page layout" language

You cannot guarantee that your webpage will appear to other people exactly as it does to you.

So don't get obsessive about re-writing webpages "to get them to look right".

Example: Not a "Page Layout" language

Depending simply on the user-defined width of their viewing window, as well as the type of browser, a web page could display the following text and image differently (to view this in action, change the width of your viewing window to make it thin and then wide):

doggies How much are those doggies in the window? (Awww, ain't they cute?)

HTML Syntax: Based on Tags

Document Structure Tags

Some "Empty" Tags

For example:

Communication is everything!
You may be smart, but if you can't correctly communicate what you know to others then you won't be effective in your job.

would be coded as:


Communication is everything!<BR> You may

be smart, but if you can't correctly 

communicate what you know to others then 

you won't be effective in your job.

Headings within the body of an HTML

There are six levels of headings. H1 is "most important" and H6 is "least important." By default, browsers will display the six heading levels in the same font, with the point size decreasing as the importance of the heading decreases.

Here are the different heading styles:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

would be coded as:


<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>

Paragraph Tag

Example:

This is the start of the paragraph. It really does not matter how long or how short the paragraph is.

It could be a short one.

Or a very long paragraph.

would be coded as:


<P>This is the start of the paragraph.  It

really does not matter how long or how short

the paragraph is.</P> <P>It could be

a <I>short</I> one.</P> <P>Or a 

very <B>long</B> paragraph.</P>

Blockquote Tag

The BLOCKQUOTE tag basically indents everything in its container. For example:

Here is a quote from Golda Meir, the late Prime Minister of Israel:

Nothing in life just happens.

It is not enough to just believe in something; You have to have the stamina to meet obstacles, and overcome them.
To struggle.

would be coded as:


<P>Here is a quote from Golda Meir, the late 

Prime Minister of Israel:  

<BLOCKQUOTE>Nothing in life just happens.

<P>It is not enough to just believe in something; You 

have to have the stamina to meet obstacles, and 

overcome them.<BR>  To struggle. </P>
</BLOCKQUOTE></P>

Forced Style Tags:

Boldface
Everything between <B> ... </B> is boldfaced
Italics
Everything between <I> ... </I> is Italicized text
Underline
Everything between <U> ... </U> is underlined; however, underlining should be avoided.
Typewriter Text
Everything between <TT> ... </TT> is typewriter text (a monospaced font in most browsers). This is typically used for variable names, or to show snippets of HTML.

Presentation Formatting:

3.0 Strikeout
<S> ... </S> (not widely implemented yet)
3.0 Subscript
<SUB> ... </SUB>
3.0 Superscript
<SUP> ... </SUP>
Preformatted
<PRE> ... </PRE> (display text spacing as-is)
Width
<PRE WIDTH=?> ... </PRE> (in characters)
Center
<P ALIGN="CENTER"> ... </P> (for both text & images)
N1.0 Blinking
<BLINK> ... </BLINK>
N1.0 Font Size
<FONT SIZE=?> ... </FONT SIZE> (ranges from 1-7)
N1.0 Change Font Size
<FONT SIZE=+|-?> ... </FONT SIZE>
N1.0 Base Font Size
<BASEFONT SIZE=?> ... </FONT SIZE> (from 1-7; default is 3)
N2.0 Font Color
<FONT COLOR=&quot#$$$$$$"> ... </FONT>

Special Characters:

Special Character
&amp#?; (where ? is the ISO 8859-1 code)
< less than
&amplt;
> greater than
&ampgt;
& ampersand
&ampamp;
" double quote
&ampquot;
' single quote or apostrophe
&amp#39;
Registered symbol
&amp#174;
N1.0+
&ampreg;
Copyright symbol
&amp#169;
N1.0+
&ampcopy;

(Complete list at http://www.w3.org/hypertext/WWW/MarkUp/html3/latin1.html)