TIPS

There are plenty of books and websites that give you detailed instructions on HTML, JavaScript and Cascading Style Sheets. This page is not intended to teach total beginners how to use each of these key technologies; rather the goal is to filter out some of the more useful techniques and code that I have found throughout the years when creating websites and web applications.

Subscript:

Heavy water: H₂0 has one more hydrogen atom than regular water.

Code:

Heavy water: H<sub>2</sub>0 has one more hydrogen atom than regular water.

Both subscript and superscript are examples of code that does not get any easier except for maybe <hr> , the horizontal rule. But I decided to include them here after I found that some very experienced web designers did not know about them!

Supercript:

This page is at Australia-Host.com^™.

Code:
This page is at Australia-Host.com.com<sup>&#153</sup>.

Prevent the page from jumping.

Code:
Non-Jumping <a href="#" onClick="alert('This is a message.'); return false;">page link.</a>

Sometimes you may want to call a JavaScript function when someone clicks on a link. The most common use of this is when creating a pop-up window. To keep the original page from jumping back to it's top position, you need to enter : 'return false' after your JavaScript function call. In this example and in the next, I call JavaScript's built in function 'alert'. Alert pops open a little box with a message you specify when you call the fucntion.

For those non-nerds out there, 'calling a function' is basically asking the browser to take an action. Sometimes these 'actions' (functions) are built in like the 'alert' function I mentioned above, and other times these 'actions' are created by you or other programmers. Don't worry about the function stuff now, it is not really important for our discussion here.

Cause the page to jump.

Code:

Jumping <a href="#" onClick="alert('This is a message.');">page link.</a>

In the above code samples you will notice that after you click the first link the page stays put, whereas when the 2nd link is clicked the page jumps to the top. The first link does not jump because of this code inside the onClick event handler:

return false

Jump to a spot on another page:

You can set what is called an anchor point in your pages with the following code :

<a name="myAnchor"></a>

And then refer to this anchor within the same page

<a href="tips-miscellaneous.html#subscript">Jump to spot</a>

Easy navigational drop-down menus.

Place this code in between your <head> and </head> tags at the top of the page:

         
<script language="JavaScript">       
         
	function jumpToArticle()
         
	{
         
	websitesBox = document.navForm.navigation;
         
	destination = websitesBox.options[websitesBox.selectedIndex].value;
         
	if (destination) location.href = destination;
         
	}
         
</script>

Now paste this code where you want the drop down menu (known as a select box in HTML) to appear on your page:

         
<form name="navForm" method="post" action="" onSubmit="jumpToArticle(); 
         
return false;">
					 
         
<select name="navigation">        
         
<option value="" selected>> SELECT TIP </option>
         
<option value="http://www.australia-host.com">Jump to this cool host site.</option>  
         
<option value="#2">Jump to a spot on the same page.</option>        
         
</select>
         
<input type="submit">
         
</form>

The key lies in each '<option></option>' tag in the above code. Each of those tag pairs holds your menu items of your drop-down list. If we look at an example:

You will notice that after the 'value=' text we have the URL of: "http://www.australia-host.com" . This tells the browser where to send the user when they select the option. And the text: 'Jump to this cool host site.' tells the browser what is actually displayed to the user in the menu. So to add menu items to your drop-down menu you need to just add <option> tags with the values filled in accordingly.

I have not described the details of the script assuming many of you have no idea about programming right now. That's ok because you don't need to understand everything to use it. In future articles I will explain some of the programming to you.

Removing the %20 in URL's.

Recently someone was wondering why the browser kept inserting this text in his URLs: %20. This code (%20) tells the browser there is a white space in between the text. Take for example the following html file that someone created and named it:

top ten.htm

The browser will insert the code %20 in the URL to deal with the space in the file 'top ten.htm' like so:

http://www.somesite.com/Top%20ten.htm

The bottom line is that there should be no white spaces in an url, and that includes your HTML file names. Sometimes people make this mistake of leaving a space because the name of the file would be hard to read otherwise. A good trick around this is to capitalize the second word in the file name and to keep the first letter of the first word in lower case:

topTen.html

This is a common way to name files and is very popular with Java programmers

Add to favorites: How to create an 'add to favorites' link

This little code snippet allows you to present a link that when clicked will add your page to the users list of favorites. The following example uses a text link but you could also swap up the text for an image if you would like to create a graphical button.

<a href="#" onClick='window.external.AddFavorite(location.href, document.title); return false'>Add to favorites</a>

The next code tip creates a link button that when clicked sets your page as the users home page. Like any html link, you can insert an image instead of the text to create a button link.

You need to insert your own website address.

Here is an example of a link made with an image instead of text:

One important thing I should point out is that when inserting an image into a hyperlink as we just did, you need to specify a border of zero (0):

Otherwise you will get an ugly looking border around the image.

If you arrived at this page from a search engine, please visit our MAIN PAGE