Definitions  HTML  Color  Template  Net Tools 

HTML

HTML is a simple code that only takes about an hour to learn the basics!


What is HTML?
HTML is an acronym for HyperText Markup Language. HTML is the code used to create web pages. What is being displayed now is a web page as it would appear in a browser. Two of the most common browsers are Netscape Navigator and Internet Explorer

HTML web pages can be viewed in two ways. First with the browser as you see here and the second is the HTML code. Below is a visual representation of the difference.

HTML Code     Browser Display
I want to <B>make this appear bold</B> I want to make this appear bold

The code on the left creates the browser display on the right.

Letters and words that are enclosed in < and > symbols are called tags. They tell the browser what to do: The <B> tag tells the browser to make bold text.
The </B> tag means to stop making bold text.

HTML code is made up of numerous tags.

Basically a tag tells the browser what to do.
When you are creating a page for the web, you enter tags for many reasons, for example to change the font of the text, to display a graphic, to make a link to another page or to create an E-Mail link. The tags you enter are not visible on the browser.
Tags begin with the symbol < and end with >.
Tags come in pairs, there are only a few that do not so just remember they always come in pairs. There are always two tags one that begins an action (the opening tag) and one that stops an action (the closing tag).
Most errors that appear in web pages are due to forgetting the closing tags. For example:
This tag: <I> starts printing italicized text.
This tag: </I> stops the effect of a previous <I> tag. Do not forget the slash /.
To italicize a word, you simply put <I> before the word and </I> after it: If you do not close a tag everything after the <I> will appear italicized for the rest of your document. As a basic design suggestion do not used italicized text. It appears differently in different browsers and is usually not pleasing visually, the edges of the text often appear jagged.

Familiarize yourself with HTML tags. Lets take a look at some of the tags. I highly recommend you memorize some of the basic tags. It is like multiplication tables, once you know them you will never forget them. Once you have HTML tags memorized you will immediately recognize mistakes.


HTML TAGS

Basic HTML


Document Type
<HTML></HTML>
(Must be placed at the beginning and end of a web page)

Head
<HEAD></HEAD>
(The title goes here and javascript as well as meta tags)

Title
<TITLE></TITLE>
(The title of your site)

Body
<BODY></BODY>
(The rest of your web page is entered between these tags)


Basic Tags

Heading
<H?></H?>
(There are six heading sizes 1-6)

Align Heading
<H? ALIGN=LEFT|CENTER|RIGHT></H?>

Division
<DIV></DIV>

Align Division
<DIV ALIGN=LEFT|RIGHT|CENTER></DIV>

Block Quote
<BLOCKQUOTE></BLOCKQUOTE>
(Like a paragraph break, this is one tag that does not require a closing tag)


Presentation Tags

Bold
<B></B>

Italic
<I></I>

Underline
<U></U>

Strikeout
<STRIKE></STRIKE>

Pre formatted
<PRE></PRE>
(Display text as-is good for poetry)

Width
<PRE WIDTH=?></PRE>
(In characters)

Center
<CENTER></CENTER>
(For both text and images)

Blinking
<BLINK></BLINK>
(I do not recommend)

Font Size
<FONT SIZE=?></FONT>
(ranges from 1-7)

Change Font Size
<FONT SIZE="+|-?"></FONT>

Font Color
<FONT COLOR="#??????"></FONT>

Select Font
<FONT FACE="name"></FONT>





Links and Graphics

Link Something
<A HREF="URL"></A>

Link to Target
<A HREF="URL#???"></A>
(If in another document)

<A HREF="#???"></A>
(If in current document)

Target Window
<A HREF="URL" TARGET="???| _top"></A>

Define Target in Document
<A NAME="???"></A>

Display Image
<IMG SRC="URL">

Alignment
<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

Alignment
<IMG SRC="URL" ALIGN=TOP|MIDDLE|BASELINE|BOTTOM>

Alternate
<IMG SRC="URL" ALT="describe">
(Describe your image)

Image map
<IMG SRC="URL" ISMAP>
(Requires a script)

Map Sections
<AREA SHAPE="RECT" COORDS=",,," HREF="URL">

Dimensions
<IMG SRC="URL" WIDTH=? HEIGHT=?>
(In pixels)

Border
<IMG SRC="URL" BORDER=?>
(In pixels)

Space around an image
<IMG SRC="URL" HSPACE=? VSPACE=?>
(In pixels)

Embed Object
<EMBED SRC="URL">
(Insert object into page, usually sound)

Object Size
<EMBED SRC="URL" WIDTH=? HEIGHT=?>

Paragraph
<P></P>
(Closing tag often unnecessary)

Align Text
<P ALIGN=LEFT|CENTER|RIGHT></P>

Line Break
<BR>
(A single carriage return)

Horizontal Rule
<HR>

Alignment
<HR ALIGN=LEFT|RIGHT|CENTER>

Thickness
<HR SIZE=?>
(In pixels)

Width
<HR WIDTH=?>
(In pixels)

Width Percent
<HR WIDTH="%">
(As a percentage of page width)

Solid Line
<HR NOSHADE>
(Appears solid)

Lists

Unordered List
<UL><LI></UL>
(<LI> before each list item)

Ordered List
<OL><LI></OL>
(<LI> before each list item)

Definition List
<DL><DT><DD></DL>
(<DT>=term, <DD>=definition)


Backgrounds and Colors

Tiled Background
<BODY BACKGROUND="URL">

Background Color
<BODY BGCOLOR="#??????">

Text Color
<BODY TEXT="#??????">

Link Color
<BODY LINK="#??????">

Visited Link
<BODY VLINK="#??????">

Active Link
<BODY ALINK="#??????">

SPECIAL CHARACTERS
(These must all be in lower case)
Special Character
<
&lt;

>
&gt;

&
&amp;

"
&quot;

Registered TM
&reg;

Copyright
&copy;

Non-Breaking Space
&nbsp;


Tables

Define Table
<TABLE></TABLE>

Table Border
<TABLE BORDER=?></TABLE>

Cell Spacing
<TABLE CELLSPACING=?>

Cell Padding
<TABLE CELLPADDING=?>

Desired Width
<TABLE WIDTH=?>
(In pixels)

Width Percent
<TABLE WIDTH="%">
(Percentage of page)

Table Row
<TR></TR>

Alignment
<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>

Table Cell
<TD></TD>
(Must appear within table rows)

Alignment
<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>

No line breaks
<TD NOWRAP>

Columns to Span
<TD COLSPAN=?>

Rows to Span
<TD ROWSPAN=?>

Desired Width
<TD WIDTH=?>
(In pixels)

Width Percent
<TD WIDTH="%">
(Percentage of table)

Cell Color
<TD BGCOLOR="#??????">

Table Header
<TH></TH>
(Same as data, except bold centered)

Alignment
<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>

No Line breaks
<TH NOWRAP>

Columns to Span
<TH COLSPAN=?>

Rows to Span
<TH ROWSPAN=?>

Desired Width
<TH WIDTH=?>
(In pixels)

Width Percent
<TH WIDTH="%">
(Percentage of table)

Cell Color
<TH BGCOLOR="#??????">

Table Caption
<CAPTION></CAPTION>

Alignment
<CAPTION ALIGN=TOP|BOTTOM>
(Above/below table)

Now that we know what HTML is and what some of the basic tags are, let's make a simple web page.
HTML Code     Browser Display
<HTML>

<HEAD>
<TITLE>Put title here</TITLE>
</HEAD>

<BODY>

A simple web page

</BODY>

</HTML>

 A simple web page


On to more complicated HTML code

A link is a tag that links one page to another page. If you click the link, the browser jumps to the link's destination.

There are two parts to a link:
One part tells the visitor what to do.
The other part tells the browser what to do.
Here is an example:

HTML Code     Browser Display
<A HREF="http://www.whatever.com">Go to Whatever</A> Go to Whatever

To link within your own web site just leave out the URL
HTML Code     Browser Display
<A HREF="yourpage.html">Go to your page</A> Go to your page


Putting images or graphics on your web page is adding another piece of HTML code. Use the IMG tag. For example:
HTML Code     Browser Display
<img src="images/small.gif" width=50 height=41 border="0">

When using the IMG tag always remember to enter the exact spelling and case size. For example if my image is uploaded to my site as small.gif, but I enter small.GIF in my html tag the browser will not recognize the image and it will not appear. This often why people have broken images on their site.

Putting a background image on your web page. Be careful here, if your background is too busy it will make your text unreadable. To create a background image you add an element to the body tag For example:
HTML Code     Browser Display
<BODY BACKGROUND="images/small.gif">


Backgrounds tile. In other words they repeat their image over and over until they cover the screen.

If you do not want a background image, you can select a color
Add an element to the body tag. For example:
HTML Code     Browser Display
<BODY BGCOLOR="#000000">

 black background

Selecting colors for your web page This is critical for presentation. There are a number of places to view how colors will look, you can find them in the resource section.
HTML Code     Browser Display
Choose <FONT COLOR="#000000">the color</FONT> Choose the color



An e-mail tag is no different than a link with a few modifications.
For example:
HTML Code     Browser Display
<A HREF="MAILTO:youraddress@yourserver.com">E-Mail</A> E-mail


| Definitions | HTML | Color | Template | Net Tools