|
|
There are many good references on the net and within various HTML authoring tools/editors (like Hippie) that supply definitions and samples of common usage of the tags used to construct HTML. While this tutorial will not replace the in-depth help available elsewhere, we've created a quick reference to get you up and running quickly using common HTML syntax.
First, it's important that you designate the beginning and ending of each page with the paired <HTML> </HTML> tags. If you examine the source for pages you visit on the web, you will see that each page begins with <HTML> and ends with </HTML>.
Next, each page you construct must contain the paired HTML tags to indicate the beginning and the end of the <BODY> </BODY> of your HTML document within the paired <HTML> </HTML> tags. This forms a template that marks the beginning and end of every individual page on the web
<HTML> <BODY> </BODY> </HTML> |
You can add to the opening <BODY> tag to specify a color, for example #80FFFF specifies the color shown below in the sample:
|
<HTML> <BODY BGCOLOR="#80FFFF"> </BODY> </HTML> |
Instead of a background color, you can specify a *.gif or *.jpg image using the syntax:|
<HTML> <BODY BACKGROUND="pwpbg.gif" bgproperties=fixed> </BODY> </HTML> |
Note the <HEAD> </ HEAD> and <TITLE> < /TITLE> tags used to do this.
<HTML> <HEAD> <TITLE>Basic HTML Construction</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML> |
One way of separating areas on your page is to use different size headings, much like a newspaper uses different size headlines to suggest the relative 'importance' of the article to which it refers.
The table below displays the six heading styles and the syntax used to create each.
Heading One | <H1>Heading One</H1> |
Heading Two | <H2>Heading Two</H2> |
Heading Three | <H3>Heading Three</H3> |
Heading Four | <H4>Heading Four</H4> |
Heading Five | <H5>Heading Five</H5> |
Heading Six | <H6>Heading Six</H6> |
Another easy way to separate areas on your page is with a Horizontal Rule that creates a line across your page.
The line above was created simply by using the syntax <HR>
To create a new paragraph, use the HTML syntax <P>.
It's important to note that you must use the paragraph tag except when using Headings to designate each new paragraph.
For many people, the default text style will be sufficient. If you want to experiment, you can use different style tags to change the look or appearance of the text inside the tag you specify.
The table below displays a few common styles and the syntax used to designate each style.
| Bold Text | <B>Bold Text</B> |
| Italicized Text | <I>Italicized Text</I> |
| Underlined Text | <U>Underlined Text</U> |
| Strong Text | <strong>Strong Text</strong> |
| Emphasized Text | <EM>Emphasized Text</EM> |
Preformatted Text | <PRE>Preformatted Text</PRE> |
| Address | <address>Address</address> |
| Cite | <cite>Cite</cite> |
| Keyboard Input | <KBD>Keyboard Input</KBD> |
Code | <code>Code</code> |
| Fixed Width | <TT>Fixed Width</TT> |
| Sample Text | <SAMP>Sample Text</SAMP> |
| Variable | <VAR>Variable</VAR> |