HyperText Markup Language (HTML 3.2 & 4) Reference.

Back to tools page

This is just going to be a basic explanation and reference for HTML. There are many places all over the internet that do a great job of explaining how to code in HTML, so there is no reason to reinvent the wheel. At the end of this documentI will include some links to sites that I have found useful. I will try to break this down into two sections, Reference Only, and Some Examples. Before we get started with all of that, there are a few basic things that you will need to understand.

HTML Basics.

HTML is not a programming language like C or Visual Basic, rather it is a way to format text and other simple things for viewing. This is done with tags. Tags are elements within the HTML code that tells the web browsers how to display the text or pictures. When you look at the HTML source, the letters (these can be one or more letters or characters) contained within the < and > signs are called tags. There are many, many tags available. I will just try to explain some of the basics for now. You can view the source of any page that is on the Internet to see what tags are being used on that web page. To view the HTML source In Netscape click on the View Menu, then click on Page Source. If you are using Internet Explorer click on the View Menu, then click on Source.

The first thing that you need to understand is that all HTML tags have an open and a close. The formatting done by the tag will affect everything between the open and close. The open and close tags look identical, except for one thing, the close tag will have a / as the first character inside of the <. For example, to make a section of text bold you would use <b>this text will be bold</b>. Notice how the text between the tags is bold while none of the other text is bold. This is because the bold tag (the <b>) was properly closed (with the </b>). Any time you use a tag to format text you will need to close the tag. Some tags if not closed properly will cause the page to display incorrectly, or not at all. There are some tags that if not closed properly, the browsers are smart enough to figure out what is supposed to be done, but do not count on this. It is always safer to close every tag that you use within an HTML document.

There are a few tags that are essential to any well layed out HTML document. These tags are <HTML>, <HEAD>, <TITLE>, and <BODY>, and of course the close of each of these tags (</HTML>, </HEAD>, </TITLE>, and </BODY>). The order of these tags is somewhat critical so that the page will load correctly. The first thing that should appear within your HTML document is the <HTML> tag. This lets the browser that is loading the page know that the following document is an HTML document so that it will correctly interpret the tags contained within it. Next is the <HEAD> tag. This is where the title is set and any of the header information is manipulated. Withing the <HEAD> and the </HEAD> tags, is the <TITLE> and </TITLE> tags. These tags allow you to give you web pages a title that is displayed at the very top of the browser window. If any javascript functions are to be used in the web document, the need to be contained within the HEAD tags. After the </HEAD> tag comes the <BODY> tag. This is where the meat of the HTML document is. This is the part of the document that will be displayed in the browser. After this part is done, you will need to close this tag (with </BODY>) and the <HTML> that you opened at the beginning of the document (with </HTML>).

Your document should start out looking like this:

<HTML>
<HEAD>
<TITLE>   </TITLE>
Declare any JavaScript Functions Here
</HEAD>
<BODY>
...
...
...

</BODY>
</HTML>

You can set the default colors for many things within your HTML document. This is done inside of the open <BODY> tag. You can get a list of most of the colors and their numbers and names from this page. The safest method is to use the number or code. You can also use the name, but this only works in the newer browsers (Netscape and Internet Explorer 4 or later). To change the background color use bgcolor="...", this stands for background color. To use a background image use the command background="...". To change the color of links in the page use link="...". To change the color of a link that the user has already been to use vlink="...", this stands for visited link. To change the color of a link when it is clicked, use alink="...", this stands for active link. To change the color of the default text for the document use text="...". The tags used for this document that you are reading is:

<BODY BACKGROUND="../images/graytex.jpg" BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#800000" VLINK="#800000" ALINK="#800000">
This will use the image graytex.jpg in the directory images for the background. The background color will be #FFFFFF, or white. If a background image is used, it will override the bgcolor setting. The default text color will be #000000 or black. The link colors in the document will be #800000. This is a maroon color. I have choosen to keep the visited link (vlink) and the active link (alink) the same color as the link (#800000 or a maroon color). You could change these to any color that you like.

HTML Reference.

Tag Brief Explanation
<b>...</b> This tag will make whatever text that is between the open and close bold.
<I>...</I> This tag will make whatever text that is between the open and close italics.
<p>...</p> This tag will make whatever is between the open and close into its own paragraph. It will put a blank line before and after the paragraph.
<u>...</u> This tag will underline whatever text is between the open and close.
<center>...</center> This tag will center in the open window or frame whatever text is between the open and close.
<ol>...</ol> This tag (used with the <li>...</li> tags) will create an ordered list. By default, the list will be numbered. You can also change this default to make upper or lower alphabetic and upper or lower roman numberals. This is done by adding a type=" " inside of the open <ol> tag. Set the type equal to 1 to get numbers, use a to get lower case letters, use A to get upper case letters, use i to get lower case Roman numerals, and use I to get upper case Roman numerals. Click here to get an example of this.
<ul>...</ul> This tag (used with the <li>...</li> tags) will create an unordered list. By default, the list will start with a disc. You can also change this default to make a disc, square, and circle for the bullets. This is done by adding a type=" " inside of the open <ol> tag. Set the type equal to disc to get a solid disc, use circle to get a empty circle, and use square to get a square. Click here to get an example of this.
<li>...</li> This tag (used with the <ol>...</ol> and the <ul>...</ul> tags) will create a list. This tag is used to for individual line items within a list.
<a href=" ">...</a> This tag is used to create links to other pages or other parts of a long page. Whatever text or image is between the tags will make up the link. When the user clicks on the text or image between the tags, it will take them to the page listed between the quotes following the href= in the opening tag.
<font>...</font> This tag is used to control the individual aspects of a font within an HTML document. It can be used to change the size, color, and face of a font. To change the size use the option size="+#" inside of the opening tag. The # sign will range from one to six. A minus sign ( - ) can also be used in place of the plus sign ( + ), with the same number range. To change the color of the font, use the option color="#xxxxxx" where #xxxxxx is a hex color code or the name of a color. These colors are the same that can be used from within the opening body tag. To view a list of these colors and their names and codes go here. To change the face of the font, use the face="..." option, where the ... is the name of the font face you wish to use. Click here for an example the font tag and its options.
<table>...</table> This is the tag used to start and close a table. It is to be used in conjunction with <tr>...</tr> and the <td>...</td> tags. To change the thickness of the border around the table, put border="#" inside of the opening <table> tag, replacing the # with an integer value. Use 0 (zero) for no border. Click here for an example of tables.
<tr>...</tr> This tag is used for a row within a table. It is used in conjunction with <table>...</table> and <td>...</td> tags. Click here for an example of tables.
<th>...</th> This tag is used to make a header row within a table. The header row will be centered and bolded. It is used in place of <td>...</td> tags. Click here for an example of tables.
<td>...</td> This tag is used for a cell within a row of a table. It is used in conjunction with <table>...</table> and <tr>...</tr> tag. There are several options to be used with this tag. To change the width of the cell, add width="##%" to the opening <td> tag. This will set the width to that percentage of the entire table. The width of that column will be the widest specified width. If you want the cell to cover more than one column, add the colspan="#" option to the opening tag. The same thing is also available for covering more than one row by using the rowspan="#" option. In both cases, the # is an integer greater than 0 (zero). Both of these options are not necessary if the cell is only to span 1 column and row. Click here for an example of tables.
<img src="..."> Use this tag to display images in a web page. Currently, only .GIF and .JPG formats are the only ones supported. To display the image, put the path to the image inside of the quotes after the src= inside of the tags. You can control the size of the border surronding the image by placing inside of the img tag, border="#". By replacing the # with an integer value, you can make a large border to no border, by using a 0 (zero), for the border size. It is also a good idea to include within the img tag an alt="..." command. This will display the text between the quotes when a picture is loading, when the person viewing your page has load images turned off, or when the mouse is left over the image. You can also change the size that your picture is being shown at within the web page by using width and height commands within the img tag. Both of these commands do not effect the byte size of the image, just the pixel size as it is displayed on the screen. Click here for an example of this tag.
&nbsp; This command will force the browser to display a space within the document. Web browsers treat several spaces together as one space. So to force more than one space between things, you must seperate them with &nbsp;. This will display one space for each &nbsp; that is used.
<!-- . . . --> This is used to make comments within a HTML document. The web browser will ingnore anything that is between the two ends.
<!--#include file="filename"--> This command is called a server side include. It is executed on the server and will include the file, filename, into the html code at this point. In order for many server side includes and variables to work properly, the extension of the file being displayed by the web browser needs to be shtml (for example support.shtml). By making the extension shtml, this tells the server that there are some bits of code that it needs to process before the document can be sent to the web browser.
<!--#echo var="Server_Side_Variable"--> This command will print out the value of a server variable. It is executed on the server, just before the page is sent to the web broser. In order for many server side variables to work properly, the extension of the file being displayed by the web browser needs to be shtml (for example support.shtml). By making the extension shtml, this tells the server that there are some bits of code that it needs to process before the document can be sent to the web browser.
<script language="JAVASCRIPT"> <!--
// --> </script>
This is how a script function is declared in HTML. You can use either JavaScript or VBScript as the script language. One thing to be careful of is that VBScript is not supported by Netscape. So if you want to use VBScript for the language, the script will not run in any current versions of Netscape. The <!-- ... --> is used to hide the function from much older web browsers that do not support scripting. The function itself will come between the <!-- ... -->.
<form> ... </form> This tag is used to create online forms. There are many different options and tags that can be used in conjunction with the <form> ... </form> tags. To get an explanation of each of these options and tags and how they are used, click here.
There are many different options and tags associated with the <form>...</form> tags. I will try to explain some of the basic options in this section.
method="GET" or method="POST" This option belongs within the opening <form> tag. This tells the web browser how to pass the entered information to the next page. The GET method will add a ? after the url and place the information after that in pairs. Each of these pairs consists of the name of the object being passed and the value of that object. These pairs are seperated by an &.
The POST method will pass the information through the document headers. This way is somewhat more secure because the passed information is not passed through the URL, sort of like hiding the information from anyone that looks at the url.
Also, after about 2000 characters in the url, it becomes a little more unstable, where the POST method does not have this problem. Also, there is a potential risk that when the url gets to about 2000 characters, someone may be able to add malicious code to the url that could possibly do some not nice things to the web browser or even the computer running the web browser. This problem is not likely to happen, but there is a slight chance that it could occur. Because of this, it is safer to pass large amounts of information by way of the POST method. To get an explanation of each of these options and tags and how they are used, click here.
name=" ... " This option belongs within the opening <form> tag. It assigns a name to the form so the form can be referred to by other things, such as functions. To get an explanation of each of these options and tags and how they are used, click here.
action=" ... " This option belongs within the opening <form> tag. It tells the form where to submit the information to. This is another page or some other type of form handler. This is where the information that is filled into the form will be handled. To get an explanation of each of these options and tags and how they are used, click here.
onsubmit=" ... " This option belongs within the opening <form> tag. It tells the form to do whatever is within the quotes before submitting the information to the page called in the action option. This is a way to error checking the form before getting to the next page. Within the quotes, put the name of a JAVASCRIPT function the evaluates each part of the form. To make sure this function works all of the time the funciton will need to be a JAVASCRIPT function. This is because Netscape doesn't support VBSCRIPT. For expample use onsubmit="return form_valid(this)" where this means that you are passing this form to the function for evalutaion. If the function returns a true, the information will be passed to the action page, otherwise nothing will happen until the user presses the submit button again. To get an explanation of each of these options and tags and how they are used, click here.
There are many different options and tags associated with the <form>...</form> tags. I will try to explain some of the basic tags in this section. To get an explanation of each of these options and tags and how they are used, click here.
<input> This tag gives several differnet options for entering information. To get an explanation of each of these options and tags and how they are used, click here.
type=" ... " This option belongs within the <input> tag. It tells the browser what type of input to expect from this form element. There are four basic type of input elements, TEXT, PASSWORD, HIDDEN, SUBMIT, and RESET.
type="TEXT" This option creates an input box for entering text. When using this option you can specify the width of the box in characters with width="##". To limit a text box to a certain length, use maxlength="##" where the ## is the max number of characters that can be entered.
type="PASSWORD" This option is very similiar to the TEXT option, except for one major difference. When this option is used, the characters within the text box are masked (with a series of asteriks for example).
Note: You should note that this element affords only light security protection. Although the password displayed on the screen is masked by the browser, it is transmitted to the server in clear text, and may be read by anyone with low-level access to the network.
type="HIDDEN" This option tells the browser that this input element is not supposed to be displayed in the web browser, but it's value is to be passed when the submit button is pressed.
type="RADIO" This option will create a radio button that can be used for selecting options. By naming many radio buttons the same name and giving them different values, the user can select one, and only one, radio button. To make a radio button the default selected radio button, add the word checked to the <input="...> tag.
type="CHECKBOX" This option will create a checkbox that can be used for selecting options. The user will be able to select as many or as few of the options as they wish.To make a checkbox the default selected checkbox, add the word checked to the <input="...> tag.
SUBMIT This option belongs within the <input> tag. It will create a button for the user to press. When the button is pressed, the form is processed by whatever is in the onsubmit="..." statement. If the onsubmit="..." statement does not exist, the form will pass the values of all the elements to the page specified in the action="..." option.
RESET This option belongs within the <input> tag. It will create a button that when pressed, will reset every element within the form to its initial values.

To get an explanation of each of these options and tags and how they are used, click here.
NAME="..." This option belongs within the <input> tag. It assigns a name to the input element so that it may be referred to directly by functions. This option is also used in many other tags in a form. To get an explanation of each of these options and tags and how they are used, click here.
VALUE="..." This option belongs within the <input> tag. It sets the default or starting value for the Input item. This option is also used in many other tags in a form. To get an explanation of each of these options and tags and how they are used, click here.
<select> ... </select> This tag is used to create either drop down boxes or scrollable select boxes. To control the number of lines showing, use the size="##" option. If the size is one, then the box is a drop down box. If the size is greater than one then the box is a scrollable select box. If you would like your users to be able to select more than one item, add multiple to the <select> tag. This option is best used in a scrollable select box. The name option is used to assign a name to the element. It is used the same as the name option with the input tag. To get an explanation of each of these options and tags and how they are used, click here.
<option> ... </option> This tag is placed between the opening <select> and the closing </select> tags. The <option> tags are used to show the different options within either the scrollable select box or the drop down box. The text that is between the opening <option> and the closing </option> tags will be the text that is displayed in the select box. To set the value of the option to be passed, add a value="..." option to the opening <option> tags. This option is used the same as the value option used with the input option. If a specific option needs to be the default selection, add selected to the opening <option> tag of the appropiate item. If selected is left out, no item will be start selected. To get an explanation of each of these options and tags and how they are used, click here.
<textarea></textarea> This tag is used to create a multiline text box. This is commonly used for submitting comments. To set the number of lines for the text box, use the row="##" option inside of the <textarea> tag. To set the width of the text box, use the cols="##" option inside of the opening <textarea> tag. The user can still add information that doesn't fit in the text box, both vertically and horizontally. If the user's input is larger than the size of the text box, scroll bars will be automatically added as necessary. The name option is used to assign a name to the element. It is used the same as the name option with the input tag. To get text inside of the textbox when it is loaded or reset, place the text between the opening <textarea> tag and the closing </textarea> tag. To get an explanation of each of these options and tags and how they are used, click here.

 

HTML Examples.

<ol>...</ol> (Ordered Lists)

The HTML Code What this looks like
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
<ol type="A">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
<ol type="i">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

<ul>...</ul> (Unordered Lists)

The HTML Code What this looks like
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul type="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul type="square">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

<font>...</font>

The HTML Code What this looks like
This is the default text for this page. This is the default text for this page.
<font size="+2" color="violet" face="comic sans ms">This is some sample text.</font> This is some sample text.
<font size="-2" color="#FF0000" face="arial">This is some more sample text.</font> This is some more sample text.
<font face="courier">This is some more sample text</font> This is some more sample text
<font size="+3">This is some more sample text</font> This is some more sample text
<font size="+1" color="#0000FF">This is some more sample text</font> This is some more sample text

<table>...</table>

The HTML Code What this looks like
<table border="3" width="90%">
  <tr>
    <th width="15%">Col 1</td>
    <th width="50%">Col 2</td>
    <th width="35%">Col 3</td>
  </tr>
  <tr>
    <td width="15%">cell 1</td>
    <td width="50%">cell 2</td>
    <td width="35%">cell 3</td>
  </tr>
  <tr>
    <td width="15%">cell 4</td>
    <td colspan="2" width="50%">cell 5</td>
  </tr>
  <tr>
    <td rowspan="3" width="15%">cell 6</td>
    <td width="50%">cell 7</td>
    <td width="35%">cell 8</td>
  </tr>
  <tr>
    <td width="50%">cell 9</td>
    <td width="35%">cell 10</td>
  </tr>
  <tr>
    <td width="50%">cell 11</td>
    <td width="35%">cell 12</td>
  </tr>
  <tr>
    <td width="15%">cell 13</td>
    <td rowspan="2" colspan="2" width="50%">cell 14</td>
  </tr>
  <tr>
    <td width="15%">cell 15</td>
  </tr>
  <tr>
    <td width="15%">cell 16</td>
    <td width="50%">cell 17</td>
    <td width="35%">cell 18</td>
  </tr>
</table>
Col 1 Col 2 Col 3
cell 1 cell 2 cell 3
cell 4 cell 5
cell 6 cell 7 cell 8
cell 9 cell 10
cell 11 cell 12
cell 13 cell 14
cell 15
cell 16 cell 17 cell 18

<form>...</form>

The HTML Code What this looks like
<center>
<form name="test" method="GET" action="testget.html" onsubmit="return checkform(this)">

  <p>
<input type="hidden" name="hidden" value="value1">
  There is a hidden input type above this line, but notice how nothing is displayed.<br>
  Text box max length of 10:
<input type="text" name="text1" width="10" maxlength="10"><br>
  Text box no max length and default starting text:
<input type="text" name="text2" width="10" value="Value2"><br>
  Password text box:
<input type="password" width="10" name="password"></p>

  <p>Select the different radio buttons. Notice how you can only select one at a time.<br>
  <input type="radio" name="radio" value="1" checked> Radio Button 1<br>
  <input type="radio" name="radio" value="2"> Radio Button 2<br>
  <input type="radio" name="radio" value="3"> Radio Button 3<br>
  <input type="radio" name="radio" value="4"> Radio Button 4</p>

  <p>Select the different check boxes. Notice how you can select more than one at a time.<br>
  <input type="checkbox" name="check1" value="1" checked> Check Box 1<br>
  <input type="checkbox" name="check2" value="2"> Check Box 2<br>
  <input type="checkbox" name="check3" value="3"> Check Box 3<br>
  <input type="checkbox" name="check4" value="4" checked> Check Box 4</p>

  <p>This Select box has a size of 1 making it a drop down box. There are no default selected values with this box.
   <select name="DropDown" size="1">
  <option value="option1">First Option</option>
  <option value="option2">Second Option</option>
  <option value="option3">Third Option</option>
  <option value="option4">Fourth Option</option>
  <option value="option5">Fifth Option</option>
  <option value="option6">Sixth Option</option>
  <option value="option7">Seventh Option</option>
  <option value="option8">Eighth Option</option>
  </select></p>

  <p>This Select box has a size of 3 making it a scrollable select box. There second value is the default selected   value with this box. Any one of the other options could have been the default selected box.
  <select name="Scroll" size="3">
  <option value="option1">First Option</option>
  <option value="option2" selected>Second Option</option>
  <option value="option3">Third Option</option>
  <option value="option4">Fourth Option</option>
  <option value="option5">Fifth Option</option>
  <option value="option6">Sixth Option</option>
  <option value="option7">Seventh Option</option>
  <option value="option8">Eighth Option</option>
  <option value="option9">Nineth Option</option>
  </select></p>

  <p>This text area is 30 columns by 3 rows with no default value<br>
  <textarea name="TextArea1" cols="30" rows="3"></textarea></p>

  <p><textarea name="TextArea1" cols="45" rows="5">This text area is 45 columns by 5 rows with a default value</textarea></p>

  <input type="submit" name="Submit Button" value="Submit Button">
  <input type="reset" name="Reset Button" value="Reset Button"> </form></center>

There is a hidden input type above this line, but notice how nothing is displayed.
Text box max length of 10:
Text box no max length and default starting text:
Password text box:

Select the different radio buttons. Notice how you can only select one at a time.
Radio Button 1
Radio Button 2
Radio Button 3
Radio Button 4

Select the different check boxes. Notice how you can select more than one at a time.
Check Box 1
Check Box 2
Check Box 3
Check Box 4

This Select box has a size of 1 making it a drop down box. There are no default selected values with this box.

This Select box has a size of 3 making it a scrollable select box. There second value is the default selected value with this box. Any one of the other options could have been the default selected box.

This text area is 30 columns by 3 rows with no default value

Useful HTML Links.

This are just a few links to give further assistance with HTML. There are many, many, many more very good sites that can be used to answer your questions. So if these sites don't help you, just look around some. You are bound to find the answer to your question out there somewhere.

Back to tools page