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.	Frames 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.	Forms 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=http://www.newaddres.com">

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">
<Submit>

<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 -->
</script>

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:

<html>

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

<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">
  </frameset>

</frameset>
</html>

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

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">

   <a href="newpage.html"
    onmouseover="javascript:document.swapimg.src='secndimg.jpg';"
     onmouseout="javascript:document.swapimg.src='firstimg.jpg';">
   New Page</A>

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="mailto:info@bigcompany.com?subject=Consumer  inquiry&cc=mrkting@bigco.com&bcc=pres@bigco.com">eMail Us</a>

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">
</form>

<form action="mailto:yourname@domain.com" method="get">

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>

<a href="http://www.rustykey.com/htmltips.thml#pitip">Rusty's Page Index Tip</a>

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. So...here'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"-->

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>

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">
</MAP>

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

<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">

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">

<a href="events.html" onMouseOver="javascript:document.soundfile.play()">Events Page</a>

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!">
</form>

<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>

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)
 top.location.href=location.href
// -->
</script>

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}
-->
</STYLE>

<U>this is underlined</u>

STYLE="TEXT-DECORATION: NONE"

Back to previous page.