HTML Tricks, Tips and General Help

This page isn't the fanciest but instead is designed to show you how to do things in HTML quickly and efficiently. Click on the links below and find descriptions, how to's and code snippets for each area. Click on the Back to Top when your done! Good luck with your Web Page development and I hope this page helps you. Send your comments, suggestions and request for help on items not listed to email.

Auto Forward
Code a page to transport the user to a different page after a short delay.
Password a Page
Create a password protected page using only JavaScripting.
Basic how-to for creating a web page using frames.
Changing Images
Make an image change when the mouse roll's over some other spot.
Auto-fill eMail
Pop up a user's email with fields filled in.
Basic how-to for creating forms (including emailing it).
Page Indexing
Index areas inside the current page so the user can jump there.
Server Side Include
Allows for dynamic content on HTML pages.
Back to Previous
Send the user back to the previous page without know where that is.
Image Maps
Index areas inside an image for links.
Link Sounds
Make a sound when the mouse passes over a link.
Change Text on mouse
Display different text in a box when the mouse passes over different links.
Break out of Frame
This allows your page not to be included inside someone else's frames.
More Tips and Tricks
Keep checking back for more usefull HTML tips coming soon!
Links not Underlined
There have been many request on how to make links that are not underlined. I use this technique on my home page for roll-over effects with no associated link.

 Back to previous page.


There are many reason's to autoforward the user to some other URL. The biggest reason is when a web page changes host. User's still going to the old page location can be transported to the new location. Two things you should do when Auto-forarding your users; 1)tell them you are and 2)give them a manual way to do it. The following code should be placed in the HEAD section of your HTML document (the 10 specifies the time to delay before the transport):

<meta http-equiv="REFRESH" content="10; url=">
In the BODY section of your HTML document you should include a brief text stating they are going to be transports to another location in ## seconds. Include in the text a link to the site so that the user can transport there themselves if the auto-transport doesn't work or they don't want to wait.
Back to the top

Password Protect a page

There are three ways to password protect a site.

1. Secure directories - This requires that the ISP sets up the directory to be password protected and then you maintain a database of User ID's and passwords. This is the most secure method.

2. Password=Name.HTML doc - In this method an HTML document is created with FORM code to prompt for a password. This password is the name of the document (minus the .html) you want to present to the user. The action of the form is to link to the document with the name entered by the users. If it doesn't find it... they get the error page. By making the document difficult to guess, it will increase the chances of the page not being located. Here's an example of the code:

<form action=$newpage+".html">
<input type="password" width="15" name="newpage">

3. JavaScript - here's a neat code that I have used to protect a group's member page. Each user knows the password, the script prompts for the password and then transfers the user to the correct page. If an invalid password is given, the user is transfered back the original page. This script was not written by me... But it works great. And it's difficult to hack into. Place this script in the HEAD section of your document. BTW there will be three pages - the start page (unsecured), the password page with the following script and the page you want to secure. The password is case sensitive.
<script lang="javascript">
<!-- BEGIN Script 
// This script is used to protect the members page(s)
// where to go if wrong password... 
var wrong="default.htm";
var rite="private.html"; 
// password... 
var password="PWord"; 
// prompts the user this... 
var name = prompt("Enter password for access:",""); 
// if... else statement... right, confirm this, wrong, go to wrong... 
if (name == password) {location.href=rite} 
else {location.href=wrong} 
// END Script -->

Back to the top

Basic Frames

Frames are a display technique that has some praising and some hating. The idea with frames is that you can divide up the user's browser window into sections. Each section is like another window and can be controled independently. The trick is to name each window and remember if you want a link to affect a different window, simply use the Target="name" property. In using frames I suggest you use the Target property even if your loading into the same frame, this way when you are debugging the code you can see exactly what's going to be affected.

Frames require a minimum of three pages a Frame definition page and an HTML page for each frame section. The definition page contains the FrameSet code and is the master page that controls the browser. In the example presented here, I actaully create 3 frame "windows", a title bar that rarely changes, a left side bar with links that rarely changes and a window that takes the rest of the browser window for the changing content. The following is the FrameSet coding to make this happen. This document should be the page acquired when a user first navigates to your site; ie Default.HTM or Index.HTML:


  <title>Three Window Frame Home Page</title>

<frameset rows="100,*">
  <frame src="fr-top.html" scrolling="no" marginwidth="1" marginheight="5" name="frtop">

  <frameset cols="150,80%">
    <frame src="fr-side.html" scrolling="no" marginwidth="1" marginheight="5" name="frside"><framset cols="*">
    <frame src="home.html" scrolling="auto" marginwidth="1" marginheight="5" name="frpage">


All frames can be simply thought of as another browser window. A standard HTML page is all that is required to be displayed in them. Note the Scrolling="no" coding in the title and side bar frames, that will keep the scroll bars from showing, but this may cause problems if you create an HTML page for these frames that cannot fit with in the space given on the users browser's window. The intial loading of this frameset example will load 3 HTML pages; fr-top.html, fr-side.html and home.html in the Title, side and main display frames respectively. Now... how do we get the links on the left side to make new pages show up in the display frame. Note that each frame window is named and the display frame is named "frpage". The links in the side bar frame should have the Target specified as shown in the following example:

<a href="2ndpage.html" target="frpage">Second Page</a>

Remember it is not required to specify a target if you want a link to display it's result in the same window... but trust me... when dealing with frames, it will make debuging a lot easier!

Back to the top

Changing Image

This is a really flashy trick that allows images to change when the mouse rolls over some location on the page. My main page uses this and changes my portrait image when the mouse rolls over certain words in the paragraph. It's really quite simple to implement. Here's the steps to do so.

1. Create multiple images all of the same size. 2. Create an image tag in your HTML document for the first image to display and assign it a name:

   <img src="firstimg.jpg" name="swapimg">
3. Create an Anchor tag over the items where you want the image to be changed. In this example the link to transfering the user to NEWPAGE.HTML is what changes the image.
   <a href="newpage.html"
   New Page</A>

That's all there is to it. Notice that in the anchor tag I included the onmouseout property to change the image back to the first image. If you want one image to change another, simply replace the link words (New Page) with an image code. Also if you want to use this method but not on a real link, use this code in place of the href="newpage.html" coding: href="javascript:void();"

Back to the top

Auto Fill eMail

Here's a nice touch for setting up an email link to make it easier for your users to send you messages and for you have a little more control over the format of the emails. By specifing name/content pairs you can have the email link auto fill the various input boxes of the users email system when they click on your link. Look at the following link that displays "eMail Us" on the browser window:

<a href="  inquiry&">eMail Us</a>

When the users clicks on the link, their default email program pops up with the To name, CC name, Blind-CC name and subject prefilled. This is really handy for the recipient because you can easily tell where the user was in your web-site by modifying the subject. In this example, the link would be placed on the "Consumer Information Page".

Back to the top

Fill in Forms

Forms are a great tool for allowing your users to send you information. The beauty of forms is that they allow a method to get user information into a program on your server that then processes the information and returns the desired results. Here's a quick breakdown of the events; User is presented a page with a form, User fills in form and "submits" it, the form data is sent to an application (sometimes through an interface first), the application process the information and finally user is presented with the results of their submission. So here's the basic method to set up a form in your web page. Remember that you can insert text, graphics and other HTML code winthin the boundries of the <form> and </form> codes for formatting and display purposes.

<form action="workdata.cgi" method="get">
First Name<input type="text" name="fname" size=15>
Last Name<input type="text" name="lname" size=15>
Password<input type="password" name="pword" size=15>
<input type="submit" value="Send Info">
<input type="reset" value="Reset Fields">
This simple form will prompt the user for three fields, a first name, a last name and a password. All fields are 15 characters long and the Password field entry will be displayed as asterisks. Two buttons will be shown, Send Info and Reset Fields. If the user clicks on Reset Fields, then all fields are cleared in the form. If the user clicks on the Send Info button, the data is sent to the CGI script workdata.cgi in the form of a URL query string. If John Doe uses password MyPass then the url called would look like the following:

CGI scripting is an advanced topic that takes more time to explain, however you can use these forms to allow users to mail you the same information. If you change the <form> code action to mailto then the server will email the information to your user id: The following is what the new <form> code would look like:

<form action="" method="get">

The subject of the email you recieve will look like the URL string sent by the previous code. Well, there is it... very short... but enough to get you started on forms.

Back to the top

Page Indexing

This method is used extensively on this page. By clicking on the links at the top of the page you are brought to the appropriate location of the information you are looking for. This is a great tool when creating a single page that is very long and you want to give the users the ability to jump to different sections instead of having to scroll through the whole document. It also allows you the ability to send your users back to the top of the document with a single click. This is done using anchor tags with name properties and standard links...with a # symbol. Look at this example:

<a name="datop">First title of page</a>
Document text is here and a jump point is listed...
<a href="#Sec2">Go to Section 2</a>
more text here...
<a name="sec2">Section 2 Title</a>
Section 2 text is here...
<a href="#datop">Go back to Top</a>
What the users sees is a link to section two and at the bottom of section two a link to return them to the top of the document. This method can be used to call a different HTML document but placing the user at a point other than the top of the document. An example of this call would be:
<a href="">Rusty's Page Index Tip</a>
This will transfer the user to this page to this tip section. If you view source this document you can really see how extensively this method is used here.

Back to the top

Server Side Includes

This is really a nice method to include content that changes regularly with out having to regenerate the complete HTML document. Let's say you have want to have a page that displays the results from each night's lotto pick three numbers. You could create a HTML document with the current numbers and upload it to your server. Then each day edit this HTML document replacing the numbers and reupload the document. However, there are a couple of gotcha's on this... one the costant editing of the same document will increase the chance human error slips in and screws it up and (more likely) the users' browser software has cached your document from last night and when the user selects your page they see what's in cache...not what's actually on your web page.'s how we do this... You will create a simple HTML page called LOTTOP3.SHTML (Note the SHTML extension). Then create a text file called currentp3.txt which contains the current picks. At the appropriate place in the HTML document include the following code:

<!--#include file="currentp3.txt"-->
That's all there is to it. Then each day, simply recreate the text file with the current numbers and upload it overwritting yesterday's file. The text file can include HTML codes as well so some fancy things can be done with this powerful command. One thing to remember, not all ISP's allow for Server Side Includes (SSI) so if this doesn't work... contact your ISP and see if they allow SSI's.

Back to the top

Back to previous

Here's a neat trick that will allow you to send your users back one step in their browsing history. This a good "back up" button that can be copied onto all of your pages (or included with a server side include) that you only have to create once. I love reusable code!

<a href="javascript: history.go(-1)">Back</a>
Simple single line of code works just like the users back button! Would be a great generic back button for image display systems to return the user back to the page that brought them there.

Back to the top

Image Maps

This is nice graphic feature that allows you to use different portions of an image as "hotspots" that, when clicked on, will link to different web pages. A good example of this is when a map is displayed with regional boundries drawn in. When the users clicks on a specific region, then the selected region's web page is displayed. The linking works the same as all other linking, it's just how the browser determines what link to use. The steps to create an image map is as follows:
1) Create image to be used.
2) Using a graphic's program that displays pixel points determine the areas that you want to be "click able". The areas can be rectangular, circular or a polygon, although square and circular areas are a lot easier!
3) On paper write down the Top left pixel coorrdinate and the bottom left pixel coordinates for rectangular areas. Write down the center pixel coordinate and radius distance in pixels for a circlular areas. Write down each corner pixel coordinates for a multi-sided (polygon) area.
4) Create the map code as shown below. we are using a rectangular image that is 250 x 250 pixels that is divided into 4 regions called TL-REG, TR-REG, BL-REG and BR-REG for the top left, right and bottom left right respectively. Each area will open a pages called the region name followed by the .HTML extension.

<MAP name="mainmap">
<AREA shape="rect" coords="1,1,124,124" href="tl-reg.html">
<AREA shape="rect" coords="1,125,124,250" href="tl-reg.html">
<AREA shape="rect" coords="125,1,250,124" href="tl-reg.html">
<AREA shape="rect" coords="125,125,250,250" href="tl-reg.html">
5)Now create the image code to bring in the image and reference the above map coding to let the browser know this is an image-map.

<img src="big-map.jpg" border=0, width=250 height=250 usemap="#mainmap">

The map coding can be placed anywhere in your document, but I prefer to place them somewhere close to the image coding itself to help you when it comes time to debug it. THe following will code shows you how to create circle and polygon shaped areas with in your image map:
<AREA shape="circle" coords="25,25,20" href="circ-ara.html">
<AREA shape="poly" coords="1,25,1,100,25,120,25,140,5,140" href="shap-ara.html">

Back to the top

Link Sounds

Here's a cool trick. This code allows you to use sounds to alert the user that they are over a link. It's a real attention getter. Remember though, to many users sounds can make a page slow to load and can be really annoying to them. Here's how it works. In the top portion of your document you place to make a paticular sound... in my example the sound of a Golf Swing. Then on each link where you want the sound to be heard, use the onmouseover to activate the sound. Remember that sounds are associated with a specific page. If the sound doesn't finish playing before the page transfers to the next page, it will simply be cut off. Here's the code I used on a golf page I created for the Beaumont Chapter of EWGA:

First the sound definition coding. This code is placed between the <head> and </head> codes:

<EMBED SRC="hitball.wav" HIDDEN=TRUE AUTOSTART="false" MASTERSOUND NAME="soundfile">
Now an example of a link that activates the sound when the mouse if passed over the link:
<a href="events.html" onMouseOver="">Events Page</a>
There it is... one extra line of code per document and one extra property coding on each link that you want to make the sound. A very small amount of work for a really nice effect.

Back to the top

Change Text on mouse

This trick allows you to better inform your users what will happen when they click on a specific link. When their mouse passes over a link the text displayed will change and then when it's moved off, it will change back to the original. There are two components that make up this trick. First the text form box where the changing text will be displayed. Second is the onmouse over/out properties that are set on the links to make it all happen.

First the form definition for setting up the display area. Place this where it will appear correctly on your page.

<form name="DspAra">
<input type="text" name="Chgtext" size="60" value="Point to a link for more information!">
Finally the additional property to add to the link codes to make it all happen:
<a href="something.html"
  onMouseover="document.DspAra.chgtext.value='This link will present a page about something'"
  onMouseout="document.DspAra.chgtext.value='Point to a link for more information!'">
  Something Page</a>

With this bit of code your users will see a brief description to help them better navigate through your site. This is a flashy trick and really helps eliminate user confusion.

Back to the top

Break out of Frames

Many sites use frames with their links to your web page puting your web page inside of their frames. This prevents your page from having full access to the display area and leaves their garabage on the screen. I do not approve of this and here's a way to prevent it. Between the <head> and </head> codes of your document, place the following javascript.

<script language="JavaScript">
 if (window!= top)
// -->
</script> just let'm try to keep you fenced in!
Back to the top

Don't underline Links

I've had many request on how to create text links so that the are not underlined. Well... here's how:
There are two distinct ways to turn off the underlines. The first way is to set the style at the beginning of your document with the following code...

<STYLE TYPE="text/css">
A {text-decoration: none}

Then if you DO WANT a link underlined surround it with the Underline link code:
<U>this is underlined</u>

The second method is if you want just one link's underlining turned off. In this case insert this section of code:
within the HREF portion of the link.

Back to the top

Back to previous page.