HTML Help at CodeSpy.com

	html
	head
	title
	meta
	body
	heading
	paragraph
	lists
	pre text
	blockquote
	break
	char styles
	link
	email
	images
	table
	frame
	form

HTML Help
is part of the
CodeSpy.com

   <HTML>

HTML = Hyper Text Markup Language.

<html> has to be the first line of every file you are coding. It tells the browser what kind of language it should expect. Of course, the files need to have an .html file extension.

<html>
</html>
Remember to name the first file that your visitors will see on your website to index.html, when a visitor type in your url the browser displays the index.html file first.

   <HEAD> Top

<head> comes directly after the html tag. It will contain meta tags and title tags, which are discussed below.

<html>
<head>
</head>
</html>

The <head> tag is not necessary for a html file to function, but it is a powerful one if you know how to use it to its fullest.

   <TITLE> Top

<title> instructs the browser of the title of your html file and will display it on, of course, the title bar. In my case it is HTML Help.

<html>
<head>
<title>HTML Help</title>
</head>
</html>
A short and descriptive title is important when submitting your site to search engines.

   <META> Top

<meta> tags are a html component which provide information that describes the content of the webpage. Search engines looks at this tag when indexing webpages into their database. Meta tags can be very powerful, so make sure you use them correctly.

Description: Short statement about your site, what it is about and what people should expect when they visit your site. Try to stay below 30 words.
<meta name="Description" content="Your Description">

Keywords: These are the words that people will search for in the Search Engines. There are several rules when it comes to keywords:
1. Do not repeat words more than three times.
2. Put your most important keywords in the beginning.
3. Separate each keyword with a comma.
4. Stay below 650 characters.
5. Do not use keywords that do not reflect the content of your website.
<meta name="Keywords" content="Your Keyword1, Your Keyword2, Etc.">

Author: Is the person or company that has legal rights to the page. It is good business practice to include the webmaster's email.
<meta name="Author" content="Your name, Your Email">

Generator: What tool where used to build the site, not necessary but professional.
<meta name="Generator" content="The Tool You Used">

Language: Language used on you website. Use 2 letter abbreviation.
e.g. English = en.
<meta http-equiv="Content-Language" content="En">

Robots: This is important. Below are the explanations for the different content options. Note: You can use more then one content option.
<meta name="Robots" content="INDEX,NOFOLLOW">

ALL = Will index your site in the search engine, and follow links.

NONE = Will not index your site at all.
INDEX = Means that robots will include this page in search database.
FOLLOW = Means that robots will follow links from your page to find other pages.
NOINDEX = Allows the subsidiary links to be explored, even though your page is not indexed.
NOFOLLOW = Allows the your page to be indexed, but no links from your page are explored.

   <BODY> Top

<body> this is the most important tag of your webpage. The browser starts at the body to encode your page content. There are several attributes that goes into body tag:

1. bgcolor="#000000" - The background color.
2. background="images.jpg" - Uses a picture as the background.
3. text="#000000" - The color of your text.
4. link="#000000" - The link color.
5. vlink="#000000" - The link color after it has been clicked.
6. alink="#000000" - The link color when it is active.

<body bgcolor="#ffffff" text="#000000" link="#ffffcc" vlink="#ffffgg">

The six-digit number and letter combinations represent colors by giving their RGB (red, green, blue) value. The six digits are actually three two-digit numbers in sequence, representing the amount of red, green, or blue as a hexadecimal value in the range 00-FF. For example, 000000 is black and FFFFFF is white.

You can find a complete index of all the colors here.

   <HEADINGS> Top

<h> is a tag that controls the size of the text. There are six levels of the <hx> tag, where x is a number between 1 - 6. <h1> will display the largest size of the text, and <h6> will display the smallest.

<h6> This is the size of 6 </h6>

<h5> This is the size of 5 </h5>

<h4> This is the size of 4 </h4>

<h3> This is the size of 3 </h3>

<h2> This is the size of 2 </h2>

<h1> This is the size of 1 </h1>
Remember to close the <hx> tag with the forward slash </hx>, otherwise your whole file will have the same heading.

   <PARAGRAPHS> Top

<p> the paragraph tag separate sections of your file into paragraphs. The paragraph tag is used when you want to assign different properties to different sections of your html file.

<p> Paragraph 1 </p>

<p> Paragraph 2 </p>

   <LISTS> Top

<li> there are three types of lists you can use on your webpage. Unordered, ordered and definition lists.

Unordered List:
The unordered list starts with <ul> and continues with a <li> for every list item.
<UL>
<li>First Bullet
<li>Second Bullet
<li>Third Bullet
</UL>

Result:

First Bullet

Second Bullet

Third Bullet

Ordered List:
The ordered list starts with <ol> and continues with a <li> for every list item.
<ol>
<li>Number 1
<li>Number 2
<li>Number 3
</ol>

Result:
1. Number 1
2. Number 2
3. Number 3

Definition List:
The definition list starts with <dl> and continues with a <dt> for every term and <dd> for every definition.
<dl>
<DT>WWW</DT>
<DD>World Wide Web</DD>
<DT>FTP</DT>
<DD>File Transfer Protocol</DD>
</dl>

Result:

WWW

World Wide Web

FTP

File Transfer Photocell

Note that you only need a the closing forward slash for <UL>, <ol>, <dl>, <DT>, and <DT>, but not for the list items <li>.

   <PREFORMATED TEXT> Top

<pre> this tag is used when you want to the text you type in your text editor to stay exactly as you typed it. When the browser sees the pre tag is will not try to interpret it, it will display it as is. The advantage of the pre tag is when you want to use a lot of spaces and tabs. Without the pre tag white spaces are ignored.

<pre>
					Five Tabs
				Four Tabs
			Three Tabs
                    Twenty Spaces
			
</pre>

Note, make sure that you close the pre tag with the forward slash, otherwise the browser will not read the rest of your html code </pre>.

   <BLOCKQUOTE> Top

<blockquote> is used to indent test on your page. You can use it to indent a whole block of text to make it stand out.

<blockquote>

HTML Help is created for those of us who would like to hand code a webpage rather than use bulky page makers.

</blockquote>

   <BR> Top

<br> the break tag forces a line break with between lines. So if you want to create a break where a natural break is not warranted, that is when your use the Br tag.

   <HR> Top

<hr> is a horizontal ruler. Which creates a line across your page. The ruler is very helpful when you want to separate two parts of text.
There are several properties to the <hr> tag:
1. width - The width of the ruler.
2. height - The height of the ruler.
3. noshade - If you want a shade of the ruler or not. Default is shaded.
4. color - The color of the ruler.

<hr width="50%>

<hr width="75%" height="10">

<hr width="100%" height="20" noshade color="black">

   <CHARACTER STYLES> Top

Character Styles are used to format text in the following manner:

<b> Bold Text </b>

<i> Italic Text </i>

<u> Underline Text </u>

<tt> Teletype Text </tt>

   <A HREF > Top

<a href> when creating a link on your webpage, you have make use the anchor tag.
<a href="File Location">Text to click on</a>

<a href="http://www.codespy.com">CodeSpy.com</a>

If the file is within your domain, then you do not need to include the http.

<a href="file.html">File</a>

You can also use a image as a link instead to the text link.

<a href="http://www.codespy.com"><img src="image.jpg"></a>

When using images as links, then you will see a border around the image. To avoid this you can set the border to zero.

<a href="index.html"><img src="image.jpg" border="0"></a>

If you are using a frame page, then you need to assign a target to the link. Frames will be discussed later.

<a href="http://www.codespy.com" target="right">CodeSpy.com</a>

Anchors can also be used to move a reader to a particular section in a file. This is done by creating an anchor and a named anchor. The hash (#) mark must be included.

<a href="#TopOfPage">Top Of Page</a>

Then you put the named anchor at the top of your page.

<a name="TopOfPage"></a>

You can also link to a specific section in a different file, then you have to include the filename before the hash (#) mark.

<a href="index.html#TopOfPage">Top Of Page</a>

When linking to a section in a different file you need to include the

<a name="TopOfPage"></a>

on that page.

   <MAILTO> Top

<mailto> is used to allow your visitors to send you an email with whatever email program they might be using, Outlook, Eudora, etc. The mailto anchor tag looks as follows:

<A HREF="mailto:name@domain.com">Your email address</a>

Click here to send me an email.

   <IMG SRC > Top

<img src> to display images on your website you need to call the images from its location. <img src> stands for image source e.g. where it is located. Remember that filenames are case sensitive.

<img src="filename.jpg">

The image size can be manipulated by using the width and height control.

<img src="filename.jpg" width="100" height="50">

Width and height are in pixels.

You can also align images by using the align and valign properties.

<img src="filename.jpg" align="center" valign="top">

The align tag has three properties: left, center, right, where left is default.
The valign tag has also three properties: top, middle, bottom, where middle is default.

You might have noticed that when you put the mouse over an image a small text caption pops up, this is done with the alt property within the image tag

<img src="filename.jpg" alt="hello">

Put mouse on image

   <TABLE> Top

<table> are extremely helpful when creating the layout of your webpage. It gives you control where text and images are placed on the page. The table tags are:

<table> - Starts the table.
<tr> - Starts the table row.
<td> - Starts the table data.
</Td> - Ends the table data.
</tr> - Ends the table row.
</table> - Ends the table.

Example:
<table>
<tr>
<td>First Cell First Row</td>
<td>Second Cell First Row</td>
</tr>
<tr>
<td>First Cell Second Row</td>
<td>Second Cell Second Row</td>
</tr>
</table>

Result:

First Cell First Row Second Cell First Row

First Cell Second Row Second Cell Second Row

There are several property tags with the table tags:
1. <table border="1"> creates a border around each cell.
2. <table align="left, center, right"> aligns the content within the cells.
3. <table cellpadding="5"> creates a 5 pixel space around the inside of the cell.
4. <table cellspacing="5"> creates a 5 pixel space between the cells within the table.
5. <table bgcolor="#000000"> creates a background color for the table. Note, bgcolor can be set for all the table tags: <td bgcolor>, <tr bgcolor>, just remember that <td> overrides the <tr>, <tr> overrides the <table>.
6. <table bordercolor> creates the color for the border.
7. <table width="100%" height="50%"> Width and height of the table.

Example with all the attributes:
<table width="70%" border="1" cellspacing="5" cellpadding="5" bgcolor="#6699CC" align="center">
<tr bgcolor="#66CCCC">
<td>First Cell First Row</td>
<td>Second Cell First Row</td>
</tr>
<tr>
<td bgcolor="#FF9999">First Cell Second Row</td>
<td bgcolor="#CCCCFF">Second Cell Second Row</td>
</tr>
</table>

Result:

First Cell First Row Second Cell First Row

First Cell Second Row Second Cell Second Row

   <FRAME> Top

<frame> are a way to display several html files inside one window. The frame page itself will not have any content on it, its function is only to call the other html files. So, to create a frame page you need one html file for every frame you have. The frame object are as follows:

<frameset> - Starts the frameset.
<frame> - Starts the frame.
</frameset> - Ends the frameset.

The <frameset> tag has several properties:
1. cols - Frame Columns.
2. rows - Frame Rows.
3. frameborder - Frame Border.
4. bordercolor - Color of the Frameborder.

Example:

<frameset cols="15%,*">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>

Note, the cols only only has to define the with of the first one, 15%, the other column is represented by the asterisk, *, which means that it will take whatever space is available. In this case 75%,

Result:

left.html right.html

The frame name is used so that if you put a link in the left frame and want it to open in the right frame, the link knows where to open.

<a href="file.html" target="right">File</a>

When using a frame page it is always good business practice to put in an option for visitors who have a browser that are old and do not have the capacity to display frame pages. What you do is put a <noframe> tag after the <frameset>, so instead of displaying the frame is shows what is between the <noframe> tag.

<frameset cols="15%,*">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>
<noframe>
You need a newer browser to view this page.
</noframe>

Another Frame Example:

<frameset rows="10%,*">
<frame src="top.html" name="top">
<frameset cols="15%, *">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>
</frameset>
<noframe>
You need a newer browser to view this page.
</noframe>

Result:

top.html

left.html right.html

   <FORM> Top

<form> are used to send information through your webpage. There are several components to the form tag.

First you need to open the form with the <form> tag. Inside the form tag goes two pieces of information: action and method.
The action component tells the browser where to send the form. If the form is being send through a cgi script, then the action will point to the location of that script.

<form action="cgi-bin/formscript.cgi">

If the form is being send through email, then the action will contain the standard mailto tag.

<form action="mailto:webmaster@codespy.com">

The second component is the method tag. Which instructs the browser how to send the form information from the form. The options are GET or POST. When using a mail form, then use POST.

<form method=POST>

So, the complete first form tag looks as follows if you use the mailto.

<form method=POST action="mailto:webmaster@codespy.com">

If you are using cgi, then it will look like.

<form method=POST action="cgi-bin/formscript.cgi">

Now we will look at what goes inside the form.

<input type="text"> collects information from the user, by having them type in a response.

<input type="text" name"fname" maxlenght=15 size=15>

maxlength is the maximum of characters you allow the user it input.
size is the size of the input field.

<input type="password"> looks like the <input type="text">, but display the input masked with asterisks.

<input type="password" name"pass" maxlenght=15 size=15>

<input type="hidden"> are used when you want to send information, but not display it to the user. When using hidden, you need to set the value of that variable. This input type does not display on the webpage.

<input type="hidden" name"private" maxlenght=15 size=15>

<input type="radio"> gives the user options where they click on one of the choice they want.

<input type="radio" name="color" value="Red">Red
<input type="radio" name="color" value="Blue">Blue

Red
Blue

<input type="checkbox"> works similar as the radio field, but gives the user the option to select more than one choice.

<Input type="checkbox" name="color" value="Red">Red
<input type="checkbox" name="color" value="Blue">Blue

Red
Blue

<textarea> looks like a <input text> but larger so that the user can type a longer message.

<textarea name="message" rows=5 cols=30></textarea>

<select> is a dropdown menu, which is a great idea if you have a lot of choices, like country or state.

<select>
<option value="">Select a country
<option value="US">United States
<option value="EN">England
<option value="MX">Mexico
<option value="CA">Canada
</select>

Now to the final part of the form tag, the submit and reset button.

<Input type="submit"> sends the form to the destination that your declared in the action component.

<Input type="submit" value="Send Form">

<input type="reset"> clears the form in case the user wants to change the information.

<Input type="reset" value="Clear Form">

Form Example:

<form method=POST action="mailto:youremail@domain.com">
Salutation:<Br>
<input type="radio" name="sal">Mr<Br>
<input type="radio" name="sal">Ms<Br>

Enter your first name: <Br><input type="text" name="fname"><Br>
Enter your last name: <Br><input type="text" name="lname"><Br>

What colors do you like:<Br>
<input type="checkbox" name="color" value="Red">Red
<input type="checkbox" name="color" value="Blue">Blue
<input type="checkbox" name="color" value="Green">Green
<input type="checkbox" name="color" value="Yellow">Yellow
<Br>
What is your gender:
<select>
<option value="">Gender
<option value="Male">Male
<option value="Female">Female
</select>
<Br>
Enter your message:<Br>
<textarea name="message" rows=5 cols=30></textarea>
<Br>
<input type="submit" value="Send Form">
<input type="reset" value="Clear Form">
</form>

Result:

Salutation:
Mr
Ms
Enter your first name:

Enter your last name:

What colors do you like:
Red Blue Green Yellow
What is your gender:
Enter your message:

Top

If there is a topic we missed,
please contact us through our contact form
or through email, at webmaster@codespy.com.