Handbook Home | Styling Tips | Misc Tips

WEB DESIGNERS HANDBOOK™ - Misc. Tips

Subscript

Heavy water: H20 has one more hydrogen atom than regular water.

Code:

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

Comment:

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 book is published by SecretSites.

Code:

This book is published by SecretSites <sup>&#153</sup>.

Top

Prevent the page from jumping

Non-Jumping page link.

Code:

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

Comment:

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.

Top

Cause the page to jump

Jumping page link. (Be careful, when this link is clicked your page will jump)

Code:

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

Comment:

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

Top

Obfuscated email address to protect yourself from spam

Spammers often send out webbots to scrape email addresses listed on web pages.This is a sample of an obfuscated (in other words: encoded) email address to protect yourself from spam.

my email

Code:

<a href="mailto:&#110;&#117;&#100;&#105;&#111;&#109;">my email</a>

Protect your email address with this easy to use script.

Top

Jump to a spot on another page

Jump to spot

Code:

<a href="styling.jsp#cssBorder">Jump to spot</a>

Comment:

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 (as seen at the top of this page: <a href="#book"> Jump to the book </a> ) or from another page by appending the number symbol : # and the anchor name to the URL of the page. In the above example I am jumping to the 'articles' anchor in the page 'styling.jsp'

Another way to do the same thing is to 'tag' your tag with an id:

<div class="codeSnippet" id="ascii">

Top

ASCII / HTML Character Codes

Comment:

ASCII character codes (often called HTML codes) allow you to insert special character into your HTML pages that you can't normally find on your keyboard. Having this list can prove to be very useful on some web jobs.

Learn more about HTML codes

Top

Removing the %20 in URL's

Comment:

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 (I do a lot of Java work and that is where I get it from… but it is not strictly a Java thing though)

Top

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

Comment:

This little code snippet allows you to present a link that when click 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 click 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.

<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.killersites.com'); return false">Make home page</a>

Of course you will have to replace the text:

http://www.killersites.com

You need to insert your own website address otherwise people will be making killersites.com their home page.

 

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

<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.killersites.com'); return false"><img src="myImages.gif" border="0"/> </a>

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

<img src="myImages.gif" border="0"/>

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


A more extensive version of the add to favorites code

I've only tested the add to favorites code in IE; you never know how code will react in every which browser, so I dug up this script that only allows people using IE to automatically 'add to favorites'. If the user is not using IE this script will cause a Java Script pop-up window to appear when the link is clicked, asking them to do it manually. In a nutshell: the link will appear in all browsers, but will only allow IE users to save the page as a favorite.


<script language="JavaScript">
<!--
function Add_A_Favorite() 

if (window.external) 
// The browser is Internet Explorer so we open the 'add favorite' window
{
external.AddFavorite(location.href, document.title)
// Add the document location and title to the AddFavorite window
}
else 
// Display and JavaScript alert box for any other browsers.
{
alert("Sorry, your browser doesn't support this feature." + 
"\nPlease use the bookmark feature of your browser to save the location of this page.");
}

}
// -->
</script>

Create a 'print page' button or link

Use this code to provide an on-page link that will allow people to easily print your page:

<a href="#" onClick=" window.print(); return false">&#8250; Print this page</a>

Print this page