Browser Tips and Tricks

Glossary of Web Terms

Website Tips & Tricks

Index Go!
Use "Back" to return to Index

Hosting Tips

You generally get what you pay for in web hosting. You can find hosts for less than $10.00 per month, but be prepared for downtime and weak support.

Make a text file of all your Host information (Include your username and password, primary and secondary server names, FTP protocol information) print and save this file in multiple places.

Watch your case on filenames. Many hosting servers run on Unix and are case sensitive. Be sure your filenames are the same case in your link calls that they are on the server.

When changing hosts, redirect to new page with this META code in the original main page. (The "content=" is the time delay):
<meta http-equiv="refresh" content="10; URL=http://www.newsite/">

Ping your site in MS DOS to find your IP addess:
Open a DOS window and type:
ping domainname.com
Note the IP address that your site resolves to.

Load your site by using the IP address, In the browser address bar enter:
http://IP.ADDRESS for example: http://209.63.57.102

NEW See if a name is available for your website.

NEW Search to see who owns a Domain Name:

NEW If you are planning to build or buy a website and a preferred Domain Name is available. You can "Park" the domain name by purchasing it without assigning a website to it.

NEW If you use FrontPage to create your website, you must use a hosting service that supports FrontPage extensions. For additional FrontPage Tips and Tricks, check out FrontPage World.

Design Tricks

If you want to be browser-friendly for both Explorer and Netscape, do your testing in Netscape, because if it looks good in Netscape, it will almost always look good in Explorer also.

NEW To resize the browser window when a page is opened, use this script (embed in head tag):
<script language="JavaScript">

</script>

Eliminate the blank spaces around the edge of a webpage (embed in body tag):
< body leftmargin=0 rightmargin=0 topmargin=0 marginheight="0" marginwidth="0" >

No Right Click script to prevent downloading data from your pages (embed in head tag):
<script LANGUAGE="JavaScript"> function click() { if (event.button==2) { alert('THIS FUNCTION DISABLED!'); } } document.onmousedown=click // --> </script>

Have your own aggravating Popup Windows for your website
(embed in head tag):
<script language="JavaScript">

</script>
(embed in body tag):
<body onLoad="openwindow()" bgcolor="#ffffff">

If you want your aggravating Popup Windows to open when your visitors leave your website:
(embed in head tag):
<script language="JavaScript">

</script>
(embed in body tag):
<body onUnload="leave()" bgcolor="#ffffff">

Auto-Bookmark code to allow visitors to add your site to their favorites (embed in body):
<a href="javascript:window.external.AddFavorite('http://www.yoursite.com/', 'Your Site Title');">Bookmark This Site!</a>

NEW Add a simple IE marquee to your page with the following code (Netscape users will just see normal text):
<marquee bgcolor = "#99CCFF" > Welcome to JED-WEB enjoy your stay and come back soon! </marquee>

Welcome to JED-WEB enjoy your stay and come back soon!

Add browser navigation commands to your site (embed in body):
Back: <a href="javascript:history.back(1)">Go Back</a>
Forward: <a href="javascript:history.forward(1)">Go Forward</a>
Reload: <a href="javascript:location.reload(1)">Reload</a>
Print Page: <a href="javascript:window.print()">Print This Page </a>

Print This Page

Show your own icon in the location bar of the browser. Get or create a standard 16 x 16 pixel icon. Name it "favicon.ico" and place it in your webpage directory. You may also use the following code to direct browsers to your icon (embed in head tag):
<link rel="shortcut icon" href="http://www.jed-web.com/favicon.ico">

Displaying special characters on your web page. Some common characters are:
< (Less than) <
  (Space)
© (Copyright) ©
° (Degree Sign) °
´ (Acute accent) ´
¸ (Cedilla) ¸
½ (Fraction one-half) ½

Look here for additional codes in the HTML Character Set:

Look here for Basic HTML Code Tag Sets:
Background Tips

To set the background color or a textured graphic as the background (embed in body tag):
< body bgcolor="#ffffff" background="texture.jpg" >

Use the "fixed" attribute so the background image doesn't move along with other elements on the page:
< body background="texture.jpg" bgproperties="fixed">

Use the following code in your body tag to add a gradient background to the page:
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#4767AE', startColorstr='#FFFFFF', gradientType='0');"></body>

Use transparent background GIF images when placing graphics over a textured or colored background

Background color loads faster than background textured graphic.

Use light Text on dark background and dark text on light background to ease reading.

If you use a textured background, try to select one that is not busy and has either all light or all dark colors. Backgrounds with a lot of contrast are difficult to set a legible text color.

If you must use a high contrast textured background. Place your text and graphics in a solid background table. This adds readability and structure to your page.

Use the this java script to anchor a non-tiled watermark in the background of your page (embed in body):
<script language="JavaScript1.2">
if (document.all||document.getElementById) document.body.style.background="url('watermark.jpg') white center no-repeat fixed"
</script>

Bordered backgrounds should be at lease 1024 pixels wide to ensure that your work is visually pleasing to the largest number of visitors. This prevents the Left border from repeating at the right side of the screen.

Tiled Backgrounds should be at lease 72 by 72 pixels and should have seamless edges. Seamless Tiles can be downloaded from the web or created with Adobe Photoshop.

NEW To prevent a background image from tiling on your pages. Use the following CSS script:
<style type="text/css">

</style>

NEW To make a background image tile only vertically on your page. Use this CSS script. (repeat-y = Vertical & repeat-x = Horizontal)
<style type="text/css">

</style>

Font & Text Tricks

SGML Declaration HTML Character Set based on ISO-8859-1:

Place white text on a white background by using a dark background span:
<font color="#FFFFFF"> <span style="background-color:0000f0;"> white text </span>

Highlight the Background of Text:
<span style="background-color:ffffcc;">yellow background </span>

This font effect make your text
SHADOW
<table style="filter:shadow(color=#ff0000)"><tr><td> SHADOW </td></tr></table>

This font effect make your text
DROP SHADOW
<table style="filter:drop shadow(OffX='3', OffY='3', color=#c0c0c0)"><tr><td> DROP SHADOW </td></tr></table>

This font effect make your text
GLOW
<table style="filter:glow(color=#ff00ff)"><tr><td> GLOW </td></tr></table>

To Highlight Background Color of Links (embed in head tag):
<style type="text/css">a:hover{background-color:red;}</style>

NEW With this code you can change the color of text when the mouse hovers over it:
<b onmouseover="this.style.color='red';"onmouseout="this.style.color='';">Hover over me to make me red </b>

Hover over me to make me red

Display messages in browser status bar when you hover over a link:
<a href="index.htm" OnMouseOver="self.status='JED-WEB Homepage!';
return true" onmouseout="self.status=''; return true">Home </a>

Use the "font style" statement instead of the "font size" statement to get better control of text size in HTML:
<font style="font-size: 10pt;" face="Arial" >Styled Font </font>
instead of: <font size="2" face="Arial" >HTML Font </font>
(Change your browser "View / Text Size" and watch the second line above)

To prevent your text from wrapping at the edge of the page. Use this code:
<nobr>Your text goes here... </nobr>

NEW To justify the text from edge to edge on your page. Use this code (embed in head tag):
<STYLE TYPE="text/css">  </STYLE>

NEW To justify the text within a paragraph. Use this code:
<P STYLE="text-align: justify;" > the text goes here </P>

Indenting a line text with the non-breaking space ( ) or two in front of the text.

To Indent a paragraph, you must use a style tag with a margin-left setting:
<P STYLE="margin-left:50px"> line 1 <br> line 2 <br> line 3 </P>

line 1
line 2
line 3

Indenting several lines can also be done with the <UL></UL> (blockquote) tags:
<UL> line 1 <br> line 2 <br> line 3 </UL>

Change the default font face from Times New Roman to add character to your page:
<font face="arial,helvetica">
Algerian
Arial
Comic Sans MS
Courier
Helvetica
System
Times New Roman

Applying attributes to your fonts can also add character to your page.
<b>bold</b> or <strong>strong</strong>
<cite>citation</cite>
<code>code</code>
<dfn>definition</dfn>
<i>italics</i> or <em>emphasize</em> or <var>variable</var>
<kbd>keyboard</kbd> or <tt>true-type or typewriter text</tt>
<samp>sample</samp>
<strike>~~strike through~~</strike>
<u>underlined</u>
<sup>^Superscript</sup>
<sub>_Subscript</sub>

NEW Applying the TITLE attribute will add a popup description to your text:
<div title="Adding a TITLE attribute in HTML"> Hover here to see a title attribute at work </div>

Hover here to see a title attribute at work

NEW Make the TITLE attribute a two line description, separate lines with "
" characters:
<div title="Adding a two line 
 TITLE attribute in HTML "> Hover here to see a two line title attribute at work </div>

Hover here to see a two line title attribute at work

Link Tricks

To open all links within a page in a new window use the following code (embed in head tag):
<base target="main">

To set the link color for links, visited links and active links (embed in body tag):
< body link=black vlink=red alink=blue" >

To set each link to a different color, place the font color tag after the <a href> tag:
<a href="page1.html" ><font color="FF0000"> LINK 1 </font></a>
<a href="page2.html" ><font color="00FF00"> LINK 2 </font></a>
<a href="page2.html" ><font color="0000FF"> LINK 3 </font></a>
LINK 1
LINK 2
LINK 3

To set a link color using CSS style tag inside the <a href> tag:
<a href="page1.html" style="color : FF0000;"> LINK 1 </font></a>
<a href="page2.html" style="color : 00FF00;"> LINK 2 </font></a>
<a href="page2.html" style="color : 0000FF;"> LINK 3 </font></a>
LINK 1
LINK 2
LINK 3

To eliminate the Underline in a link tag, try this CSS script (embed in body tag):
<style type="text/css">  </style>

To eliminate the dotted line around a link image, try this CSS script (embed in head tag):
<script language="Javascript" type="text/javascript">  </script>
Note: IE6 has removed the dotted line from the browser.

Adding a Title attribute to your links creates a mini-popup description:
<a href="http://www.jed-web.com" title="Great Website Tools!">JED-WEB</a>

NEW To add a two line Title attribute to your links, separate lines with "
" characters:
<a href="http://www.jed-web.com" title="Great Website Tools!
From jed-web.com">JED-WEB</a>
JED-WEB

Target your links to open in a new window with this code- target="_blank" to the end of the href tag like this:
<a href="http://www.jed-web.com" target="_blank">JED-WEB</a>

To cause a fresh copy of a page to always be retrieved from the site instead of from memory, use the following Meta tag:
<meta http-equiv="Expires" content="0">

Use links to "Anchor" other file formats. If your browser can't open a file, it will ask if you want to "Run" or "Download" it:
<a href="myfile.zip">Click here to Download Myfile</a>

To prevent the screen from blanking when you load other page on your site, use a transition with the duration set to .1 (embed in head tag):
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.1)">

Look here for additional Internet Explorer Transition effect codes:
Table Tricks

Set border, cellpadding, and cellspacing all to 0 for tight fast loading tables.

Use percentages not pixel widths to define table sizes. This will allow the table to fit different screen resolutions.

Use border and bordercolor tags to create a standard table border:
<table border="2" bordercolor="#4767AE" cellpading="4" align="center" width="50%"><tr>
<td bgcolor="#EEEEEE"><font face="Arial" size="2" color="#4767AE"><b>Your Text</b></font></td>
</tr>
</table>

Your Text

Make a Gradient Background tag to assign colors that blend into each other to form an ongoing color shift to a table:
<table style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#4767AE', gradientType='0');"><tr><td> Your Text <br><br><br></td></tr></table>

Note: Use gradient type 1 for horizontal gradation and 0 for vertical gradation.

Your Text

Use background tag to assign a background image to a table:
<table border="2" bordercolor="#4767AE" cellpading="4" align="center" width="50%">
<tr>
<td background="WEAVE.JPG"><font face="Arial" size="2" color="#4767AE"><b>Your Text</b></font></td>
</tr>
</table>

Your Text

NEW Use CSS for a simple table border. Play with the border width and color for variation:
<table style="border: 1px solid blue" width="50%" >
<tr>
<td bgcolor="#FFFFFF" valign="top" width="100%"><font face="Arial" size="2" color="#4767AE"><b>Your Text</b></font></td>
</tr>
</table>

Your Text

Place a table in a table to create a simple clean border:
<table border="0" bgcolor="#4767AE" cellspacing="0" cellpadding="1" width="50%" >
<tr>
<td>
<table border="0" bgcolor="#FFFFFF" cellspacing="0" cellpadding="3" width="100%">
<tr>
<td bgcolor="#FFFFFF" valign="top" width="100%"><font face="Arial" size="2" color="#4767AE"><b>Your Text</b></font></td>
</tr>
</table>
</td>
</tr>
</table>

Your Text

Change the cellspacing and cellpadding tags to change the size of the table border:
<table border="0" bgcolor="#4767AE" cellpadding="1" width="50%" >
<tr>
<td>
<table border="0" bgcolor="#EEEEEE" width="100%">
<tr>
<td bgcolor="#FFFFFF" valign="top" width="100%"><font face="Arial" size="2" color="#4767AE"><b>Your Text</b></font></td>
</tr>
</table>
</td>
</tr>
</table>

Your Text

Use a blank or transparent image to fill a 1 by 1 filler table between other tables to get a window effect on your tables:
<table width="50%" height="41" border="0" cellspacing="0" cellpadding="1">
<tr valign="top">
<td bgcolor="#990000" height="20" width="50%">
<p align="center"><font face="Arial" size="2" color="#FFFFFF"><b>Services</b></font></p>
</td>
<td height="20" width="1"><img src="blank.gif" width="1" height="1"></td>
<td bgcolor="#4767AE" height="20" width="50%">
<p align="center"><font face="Arial" size="2" color="#FFFFFF"><b>Links</b></font></p>
</td>
</tr>
<tr valign="top">
<td height="1" width="50%"><img src="blank.gif" width="1" height="1"></td>
<td height="1" width="1"><img src="blank.gif" width="1" height="1"></td>
<td height="1" width="50%"><img src="blank.gif" width="1" height="1"></td>
</tr>
<tr valign="top">
<td bgcolor="#4767AE" height="20" width="50%">
<p align="center"><b><font face="Arial" size="2" color="#FFFFFF">Resources</font></b></p>
</td>
<td width="1" height="20"><img src="blank.gif" width="1" height="1"></td>
<td bgcolor="#990000" height="20" width="50%">
<p align="center"><font face="Arial" size="2" color="#FFFFFF"><b>Tips & Tricks</b></font></p>
</td>
</tr>
</table>

Services

Links

Resources

Tips & Tricks

Create a table with header for menus or information spaces:
<table width="50%" border="0" cellspacing="0" cellpadding="2" height="60"> <tr valign="middle">
<td bgcolor="#4767AE" width="50%" height="20">
<div align="center"><font face="Arial" size="2" color="#FFFFFF"><b>Services</b></font></div>
</td>
<td width="4" height="20"></td>
<td bgcolor="#990000" width="50%" height="20">
<div align="center"><font face="Arial" size="2" color="#FFFFFF"><b>Links</b></font></div>
</td>
<td width="4" height="20"></td>
</tr>
<tr valign="top">
<td bgcolor="#4767AE" width="50%">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="40">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Arial" size="1">Line 1 <br> Line 2 <br> Line 3 </font></p>
</td>
</tr>
</table>
</td>
<td width="1"></td>
<td bgcolor="#990000" width="50%">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="40">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Arial" size="1">Line 1 <br> Line 2 <br> Line 3 </font></p>
</td>
</tr>
</table>
</td>
</tr>
</table>

Services

Links

Line 1
Line 2
Line 3

Line 1
Line 2
Line 3

Form Tricks

Use CSS tags to color and format your form input boxes:
<INPUT type="text" STYLE="color: #0000CC; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #99CCFF;" maxlength="30">

Use a Form Button as a link to reload a page or link to another page:
<form method="post" action="body8b.html#form"><input type="submit" value="Reload"></form>
<form method="post" action="hex.html"><input type="submit" value="HEX code" ></form>

Use a Form Button to move back or forward in the history stack (-1 =back, 1 =forward):
<form><input type="button" value="Previous Page" onClick="history.go(-1)"></form>

Use the style tag to change the font weight of a form button:
<form><input type="button" style="font-weight: bold" value="Previous Page" onClick="history.go(-1)"></form>

Use the style tag to change the color of a form button:
<form><input type="button" style="background: #ff33ff" style="font-weight: bold" value="Previous Page" onClick="history.go(-1)"></form>

Use the style tag to add a graphic background to a form button:
<form><input type="button" style="background-image: url(WEAVE.JPG);" style="font-weight: bold" value="Previous Page" onClick="history.go(-1)"></form>

Ask for response from your visitors with this form script: <form> <b>Do you like my page?
Yes.
<input type="radio" onClick="alert('Thank You')">
No.
<input type="radio" onClick="alert('Too Bad')">
</font>
</form>

Use the "Tab" key to switch from box to box in a Form. The number must be unique for each box:
<input type="text" tabindex="1">

To automatically focus the cursor to your forms:
<body onload="document.thisform.username.focus()">
<form name="thisform">
<input name="username" type="text">
</form>

Form Validation Script checks to see if certain information has not been entered:
(embed in head tag)
<script>
function checkrequired(which){
var pass=true
if (document.images){
for (i=0;ivar tempobj=which.elements[i]
if (tempobj.name.substring(0,8)=="required"){
if (((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)){
pass=false
break
}
}
}
}
if (!pass){
alert("One or more of the required elements are not completed. Please complete them, then submit again!")
return false
}
else
return true
}
</script>

(embed in body tag)
<form onSubmit="return checkrequired(this)">
Use "required" in the name of any required input tag.
<input type="text" name="requiredname" size="10">

Form Validation Script checks to see if email addresses have been faked or not entered at all:
(embed in body tag)
<script language="JavaScript1.2">
var testresults

function checkemail(){
var str=document.validation.emailcheck.value
var filter=/^.+@.+\..{2,3}$/

if (filter.test(str))
testresults=true
else {
alert("Please enter a valid email address!")
testresults=false
}
return (testresults)
}

function checkbae(){
if (document.layers||document.all)
return checkemail()
else
return true
}
</script>

(embed in body tag)
<form name="validation" onSubmit="return checkbae()">
Try entering a phony email, like (beafs@efsd.f):<br>
<input type="text" size=18 name="emailcheck">
<input type="submit" value="Submit">
</form>

Frame Tricks

The <FRAMESET> and <FRAME SRC> tags are used together to tell the browser how to load each page:
<FRAMESET COLS="100,200">
     <FRAME SRC="a.html">
     <FRAME SRC="b.html">
</FRAMESET>
Sets a 2 column page with the first 100 pixels wide and the second 200 pixels wide

<FRAMESET ROWS="75%,25%">
     <FRAME SRC="a.html">
     <FRAME SRC="b.html">
</FRAMESET>
Sets a 2 row page with the first 75% of the browser window and the second 25%

<FRAME SRC> Attribute reference:
NAME — Target name for links to an FRAME
NORESIZE — Prevents the user from dragging a frame to a different size
MARGINHEIGHT / MARGINWIDTH — Internal margin in pixels
SCROLLING — The default value is "AUTO"; otherwise, specify either "YES" or "NO"

To allow your visitors to escape from your web frames, use the Target="_top" tag:
<a href="exit.html" target="_top"> Exit Frames </a>

To load the document in the current frame, use the Target="_self" tag:
<a href="newpage.html" target="_self"> New Page </a>

To load the document in the parent FRAMESET, use the Target="_parent" tag:
<a href="nextpage.html" target="_self"> Next Page </a>

To load the document in a new window, use the Target="_blank" tag:
<a href="newwindow.html" target="_blank"> New Window </a>

To make a link in a frame named "FrameA" open in a frame named "FrameB", use the Target tag:
<a href="http://www.jed-web.com" target="FrameB">JED-WEB</a>

To cause a frame page to open the main page of a website use this JavaScript (embed in head tag):
<script language="JavaScript"> if (parent.location.href == self.location.href){ window.location.href = 'index.html'} </script>

IFRAME (Inline frames) allow one page to be run inside another by simply placing the IFRAME tag in the parent page:
<IFRAME SRC="sample.html"></IFRAME>
Attribute reference:
ALIGN — Offset to other elements, much like the Image Tag.
FRAMEBORDER — The default is 1 pixels ( 0 = none)
HEIGHT / WIDTH — (pixels or %)
NAME — Target name for links to an IFRAME
HSPACE / VSPACE — As with Images, this attribute specifies a pixel size for horizontal or vertical margins around the IFRAME (external margin)
MARGINHEIGHT / MARGINWIDTH — Internal margin in pixels
SCROLLING — Set to "AUTO" the browser determines whether scrollbars are necessary; otherwise, specify either "YES" or "NO"
Notes:
1. Opera 4 ships with IFRAME display capability turned off. To turn this on, go to File...Preferences menu, select the Documents category. Check the "Enable inline frames" box in the Frames section.

NEW Set your IFRAME scrollbar colors by setting the scrollbar-face-color in the target page:
Click here to see how!

NEW You can set a Border on an IFRAME with this style code (style="border:5px ridge #00FF00") tag:
<IFRAME SRC="sample.html" name="FrameB" style="border:5px ridge #00FF00" ></IFRAME>
Note: Other CSS Style codes also work with IFrame.

NEW If a browser does not support frames, a notification may be placed before the </IFRAME> closing tag:
<IFRAME SRC="sample.html"> Sorry! Frames do not show in your browser... </IFRAME>

NEW If a browser does not support frames, place a link to the imbeded page before the </IFRAME> closing tag:
<IFRAME SRC="sample.html"> Your browser does not support Frames <a href="sample.html" target="_new"> Click here to view missing page! </a> </IFRAME>

NEW Name an IFRAME so it can be used as a link target by the target tag:
<IFRAME SRC="sample.html" name="FrameB" ></IFRAME>

NEW To make an IFRAME transparrent add ALLOWTRANSPARENCY="true" to the IFRAME tag and add STYLE="background-color:transparent" to the BODY tag of the file that is being called with the IFRAME:
<IFRAME SRC="sample.html" ALLOWTRANSPARENCY="true" >
And the BODY tag of the called file:
<BODY STYLE="background-color:transparent">

NEW Another way to run a page inside of another, is using the EMBED tag:
<object data=http://www.jed-web.com width="300" height="200"> <embed src=http://www.jed-web.com width="300" height="200"> </embed> Error: Embedded page could not be displayed. </object>

NEW Place the Frame tag set between the </head> and the <body> tag to allow browsers that do not support frames to show the content of the body tag.

Menu Tricks

Anchor your menu in a table or frame to prevent it from scrolling out of site of the user.

NEW To anchor your menu without a table or frame Use the <div> tag for the page content
<p>Your menu and header content will go here.</p>
<div style="border: 1px solid #aaa;background-color:#99CCFF; height:65px; width:300px;overflow:auto; color:#000000;">
<p>Your page content will go inside here.</p>
</div>

Your menu and header content will go here.

Your page content wil go inside here.

Line 1

Line 2

Line 3

Line 4

Use more than one type of menu by backing up a graphics or Java menu with a simple text menu.

Use "alt=" tags or other text popups to inform your users what the menu action will be.

Do not use criptic or confusing menu titles. Help your visitors find what they want on your site.

Use a Text Menu Link to move back or forward in the browser history stack
( -1 =back 1 page)( 1 =forward 1 page):
<a href="javascript:history.go(-1)"> BACK</a>

BACK

Use a Form Button to move back or forward in the history stack ( -1 =back, 1 =forward):
<form><input type="button" value="BACK" onClick="history.go(-1)"></form>

Use a Graphic Button to move back or forward in the browser history stack
( -1 =back 1 page)( 1 =forward 1 page):
<a href="javascript:history.go(-1)"><img src="back.gif" border="0" width="88" height="31"></a>

Use a Text Menu Link as a link to another website or page:
<a href="http://www.jed-web.com" Target="_new">JED-WEB</a>

JED-WEB

Use a Form Button Menu as a link to another website or page:
<form><input type="button" value="JED-WEB" onClick="top.location.href='http://www.jed-web.com' "></form>

Use a Graphic Menu Button as a link to another website or page:
<ahref="http://www.jed-web.com" Target="_new"><img src="back.gif" border="0" ></a>

MouseOver menu link change the menu button image as you hover it: (For additional buttons rename the BUT#)
<a href ="http://www.jed-web.com'" target="_new" onMouseover="document.BUT1.src='firstbutton.gif'", onMouseout="document.BUT1.src='secondbutton.gif'"> <img src="secondbutton.gif" name="BUT1" border="0">

A simple MouseOver menu link using custom attribute (hsrc) inside the image's tag. Place the following JavaScript in your head tag:
<script type="text/javascript">
function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;
</script>
Then use this code in the body where you want a mouseover button:
<img src="firstbutton.gif" hsrc="secondbutton.gif">

Make menu to jump to the anchors you create throughout your page.
Place this anchor at the top of the page.
<A NAME="TOP"></A>
Place this anchor at the middle of the page.
<A NAME="MIDDLE"></A>
Place this anchor at the bottom of the page.
<A NAME="BOTTOM"></A>
Place this menu call in the body of the page:
<A HREF="#TOP">Go to the Top</A><BR>
<A HREF="#MIDDLE">Go to the middle</A><BR>
<A HREF="#BOTTOM">Go to the bottom</A><BR>

Pull-down menu form, just re-code the form elements, including the option values, file selections and submit button value:
<form name="drop_down" method="POST">
<select name="selections" size=1>
<option value="file1.htm"> first page </option>
<option value="file2.htm"> second page </option>
<option value="file3.htm"> third page </option>
</select>
<input type=button onClick= "location = '' +
document.drop_down.selections.options[
document.drop_down.selections.selectedIndex ].value;" value="Go!">
</form>

NEW Use the table style.background CSS tag to give a nice mouseover effect for menu items:
<table width=100 bgcolor=#EFEFFF >
<tr onMouseOver="this.style.background='#00E0FF'" onMouseOut="this.style.background='#EFEFFF'">
<td width="100"><a href="item1.html"> Menu Item 1 </a></td>
</tr>
<tr onMouseOver="this.style.background='#00FFE0'" onMouseOut="this.style.background='#EFEFFF'">
<td width="100"><a href="item2.html"> Menu Item 2 </a></td>
</tr>
<tr onMouseOver="this.style.background='#FF00E0'" onMouseOut="this.style.background='#EFEFFF'">
<td width="100"><a href="item3.html"> Menu Item 3 </a></td>
</tr>
</table>

Menu Item 1

Menu Item 2

Menu Item 3

NEW To change the opacity of a link button on mouseover, use this CSS tag:
<a href="whatever.htm"> <img src="jedwebdr.gif" border=0 style="-moz-opacity:0.5;filter:alpha(opacity=50);cursor:hand" onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;this.filters.alpha.opacity=50"> </a>

Loading Tips

Use this utility to find out how fast a website is loading: Stopwatch

Use multiple pages on your site instead of one large page. Then use a simple menu to access the other pages.

Do not place a lot of large graphic files on the first page of your website. The first page to load should be the fastest.

Consider using a Doorway Page to present a quick loading introduction to your website.

Remove all the spaces between your code lines in your HTML, this will reduce the size of the page and it will load faster.

Do not place tables inside other tables, it will take the browser longer to calculate spacing.

If you don't need sharp resolution or a lot of color, use GIF files instead of JPEGs.

Use height and width tags on all images, the browser will allocate space for the graphic and continue loading.

Compress all images and animation. Most good graphic editors offer a compression function. A good web utility to compress graphic files is GIF WORKS.

Reduce the file height and width of your graphics to the actual display size on the page.

Use this Meta tag to assure that a fresh copy of the page will always be loaded from your site (embed in head tag):
< META HTTP-EQUIV="Expires" CONTENT="0">

To automatically break out of frames when someone loads your page (embed in body tag):
<body onLoad="if (self != top) top.location = self.location;">

Preload your images with this simple JavaScript:
<script language="JavaScript">

</script>

Color Tricks

NEW If you wish to use HTML Color Names on your site. Here is a Color Names list:

Use the HEX color tables below to select colors for your site:

NEW Create a coordinated 10 shade Color Palette for your web page:

Color dithering makes colors fade or reproduce incorrectly. Use non-dithered colors on web pages. Follow this rule: Use only 00, 33, 66, 99, CC and FF when building your color hexcode.

Change your scrollbars colors, be sure to replace the word #color with your hex code: e.g. #003366 (embed in head tag):
<style> BODY { scrollbar-face-color:#color;
scrollbar-shadow-color: #color;
scrollbar-highlight-color: #color;
scrollbar-3dlight-color: #color;
scrollbar-darkshadow-color: #color;
scrollbar-track-color: #color;
scrollbar-arrow-color: #color;
} </style>

NEW Add colored borders to your frames by adding color attributes to the "FRAMESET" tag:
<FRAMESET COLS=*,70% BORDERCOLOR="#669900" BORDER=10>

NEW Add colored bullets to your page by adding colored characters in place of the <UL> tag:
<FONT COLOR="#color" SIZE=+2>  </FONT> First line <BR>
<FONT COLOR="#color" SIZE=+2>  </FONT> Second line <BR>
<FONT COLOR="#color" SIZE=+2>  </FONT> Third line

• First line
• Second line
• Third line

NEW Add colored dividers to your page by adding color attributes to the <HR> tag:
<HR WIDTH="75%" COLOR="#color" SIZE="6">

Choose a background color for a page dynamically from your site:
<FORM name="changeColor">
<FONT face="Arial" size="2">Choose a Background Color:
<INPUT type="button" onClick="document.bgColor='#0000FF'"
name="colr" value=" BLUE ">
<INPUT type="button" onClick="document.bgColor='#FF0000'"
name="colr" value=" RED ">
<INPUT type="button" onClick="document.bgColor='#00FF00'"
name="colr" value=" GREEN ">
<INPUT type="button" onClick="document.bgColor='#FFFFFF'"
name="colr" value=" WHITE ">
<INPUT type="button" onClick="document.bgColor='#000000'"
name="colr" value=" BLACK ">
</FONT>
</FORM>

Graphics Tips

To copy an image from a website, right click over the image and "Save Picture As".

Use graphic bullets to replace the standard text bullets by using the "DL" tag.
<DL>
<DD><IMG SRC="bullets.gif"> Item one</DD>
<DD><IMG SRC="bullets.gif"> Item two</DD>
</DL>

Item one

Item two

Change the mouse cursor to a Hand or Help with the following span tags:
<span style="cursor: hand">Hand</span>
<span style="cursor: help">Help</span>

Always define widths and heights on graphic files. This tells the browser to allow space for the graphic and continue loading the rest of the page:
<img src="myimage.gif" WIDTH="100" HEIGHT="100">

Adding a ALT attribute to your image creates a mini-popup description:
<img src="mydog.gif" ALT="Picture of my Dog">

Specify a border to eliminate that ugly blue box around hyperlink images:
<img src="image.gif" BORDER="0">

NEW Add a shadow to a graphic image with this code:
<img src="jedwebdr.gif" alt="my dog" width="88" height="31" style="filter: progid:DXImageTransform.Microsoft.dropShadow (OffX='3', OffY='3', Color='#c0c0c0', Positive='true')">

NEW To make a graphic image transparent. Use this code ( opacity of 0 = invisable , opacity of 100 = visable):
<img src="jedwebdr.gif" style="filter:alpha(opacity=50)">

jed-web

Note: This looks good on textured background.

Hspace and Vspace create a margin of free space around your image. This will buffer your image from text or other page elements
<img src="myimage.gif" VSPACE="5" HSPACE="5">

Align Images to Vertical Center of Text:
<img src="image.gif" align="middle">

Align Images to Absolute Vertical Center of Text:
<img src="image.gif" align="absmiddle">

Use the EMBED tag to show a movie clip on your web page:
<EMBED TYPE="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/download/default.asp" src="globe.avi" Name="MMPlayer1" Autostart="1" ShowControls="0" ShowDisplay="0" ShowStatusBar="0" DefaultFrame="Slide" loop="true" width="120" height="120" bgcolor="#FFFFFF">

Sound Tips

Use the EMBED tag to play sound from your web page:
<EMBED src = "mysound.mid" autostart=true hidden = true>

To display the Sound Console, use this EMBED tag to play sound:
<EMBED src="mysound.mid" width=200 height=100 loop=FALSE align=right >

Use the BGSOUND for Internet Explorer background sound (use a 1 in place of INFINITE to play only once):
<BGSOUND SRC="mysound.mid" LOOP=INFINITE>

Use the NOEMBED tag to allow Netscape to skip the BGSOUND tag and use the EMBED:
<NOEMBED><BGSOUND SRC="mysound.mid" LOOP=2></NOEMBED>
<EMBED src = "mysound.mid" autostart=true hidden = true>

Add sound to link mouseovers to give your page more character:
<BGSOUND SRC="#" ID="beep" AUTOSTART="TRUE">
<A HREF="http://www.jed-web.com" onmouseover="document.all.beep.src='ding.wav'">JED-WEB</A>

JED-WEB

You can use a Meta tag to play a sound when a page is loaded.
<META HTTP-EQUIV="refresh" CONTENT="0; url=mysound.wav">

NEW To turn the sound on and off from an HTML page with BGSOUND or EMBED sound, make a duplicate page with a different name and remove the sound tags. Then cross link the two pages.

Sound On/Off Demo

NEW To turn the sound off from an HTML page with BGSOUND, The following code will start the sound automatically and allow the user to turn the sound off - The last line of code will reload the page and restart the sound:
<BGSOUND id=BGSOUND_CTRL src="mysound.mid" LOOP="0" AUTOSTART="true" >
<input type=image src="soundstop.gif" onClick=document.all['BGSOUND_CTRL'].src="" >
<a href="javascript:location.reload(true)"><img src = "soundstart.gif" border=0></a>

Sound Stop - Start Demo

Email Tricks

NEW To place an EMAIL FORM on your website, you need an autoresponder to handle the processing of the form.
Try Bravenet Free Email Form Service:

Use email signitures to take advantage of your outgoing emails ability to promote your site.
(Use a dash, dash, space, carriage return to start a signiture tag.)
--

~~~~~~~~~~~~~~~~~~~~~~~~~
- JED-WEB -
John & Janie Dressel
Webmaster Resource Services
Email mailto:jed-web@hotmail.com
Web Site http://www.jed-web.com
~~~~~~~~~~~~~~~~~~~~~~~~~

Standard HTML code to send an email from your page:
<a href="mailto:jed-web@hotmail.com"> jed-web@hotmail.com </a>

NEW Standard HTML code to send an email from your page and copy sombody and blind copy someone else:
<a href="mailto:jed-web@hotmail.com?cc=sombody@mail.com&bcc=someone@mail.net"> jed-web@hotmail.com </a>

Standard HTML code to send an email from your page with a subject (no spaces allowed!):
<a href="mailto:jed-web@hotmail.com?Subject=web_Information"> jed-web@hotmail.com </a>

Standard HTML code to send an email from your page with a subject and body text (use %20 for spaces):
<a href="mailto:jed-web@hotmail.com?Subject=web Information&Body=Please%20send%20me%20more%20information.%0AThis%20is%20line%202.%0AThis%20is%20line%203"> jed-web@hotmail.com </a>

Note the use of the %0A to define new lines in the body.

The look and characteristics of the mailto tag varies with different email clients.
1. You are limited to 255 characters in your mailto link.
2. Some recognize spaces in the “&body=” tag while some do not.
3. The “%20” works well in most email clients to insert a space between words.
4. The html tag “ ” works as a space when the email client is set to use HTML content. The “+” character as a space also works on some clients.
5. The new line code "%0A" works well with MS Outlook Express but there have been mixed results with other email clients.
6. The new line code "<BR>" works when the email client is set to use HTML content, but the characters "<BR>" shows on other clients.
7. These were tested in MS Outlook, MS Outlook Express, Lotus Notes and Mozilla Thunderbird and in general performed correctly.

Try it here! jed-web@hotmail.com

A simple trick to prevent spiders from reading your email address from your page (use @ for the @ inside your code) :
<a href="mailto:jed-web@hotmail.com"> jed-web@hotmail.com </a>

Anti-Spam Tips

Assume all Mail from Unknown Senders is Spam "I don't know you... you must be a spammer!"

Choose Service Providers by Their Spam Policy Don't support Spam-friendly Internet service providers.

Domain Owners: Set up Throwaway Email addresses for promotion and site services and your Primary Email for site visitors.

Don't Reply to Spam on a Mailing List. This promotes the Spam to all on the list.

Don't try to Unsubscribe from a Spammer's List. Trying to unsubscribe will likely result in more Spam.

Obscure Your Email Address When You Post it to the Net Make it more difficult for spammers to get your address. (see Email Tricks above)

Watch Out for Those Checkboxes. Make sure you don't opt in for emails you don't want.

Learn how to stop junk e-mail by modifying your sendmail.cf file at arachnoid.com.

NEW Use a free spam filter that allows users to create a temporary email address for viewing web sites. mailinator.com.

NEW Use a service to bypass the login of web sites that require compulsory registration. bugmenot.com.

NEW This link will take you to a site that is dedicated to fighting spam: Smash Spam Now

Promotion Tips

Include your web site address on all your business correspondence: Stationery, business cards, literature, brochures etc.

Put your URL on Shirts, hats, stickers, coffee mugs, fridge magnets, on your vehicle or anywhere else you can think of.

Request links to your site from other sites that are relevant to your business and would be of interest to your customers.

Use the title, keyword and description Meta tags effectively by researching popular search words for your content.

Place Meta tags on your pages so spiders can load information about your site in their search engines. Copy the example Meta tags below and place in your header tag with modifications (See spider tricks below):

<title>The name of your site</title>
<meta name="description" content="What is this page about">
<meta name="keywords" content="What, words, describe, this, page,">
<meta name="author" content="your name">
<meta name="language" content="en-usa">
<meta name="revisit-after" content="30 days">
<meta name="owner" content="your name">
<meta name="copyright" content="Copyright© 1996 - 2007 your name, All rights reserved">
<meta name="contact_addr" content="email@address.com">
<meta name="rating" content="general">
<meta name="robots" content="all">
<meta name="distribution" content="global">
<meta name="classification" content="your category">
<meta http-equiv="reply-to" content="email@address.com">

NEW Use your primary key words in both your "Title" and "Description" Meta tags to get better placement in search pages.

NEW Remember, people use abbreviations, synonyms and acronyms to search by. Place abbreviations, synonyms and acronyms in your key word list.

NEW Here are a dictionary and a thesaurus to help you find abbreviations, synonyms and acronyms.
Dictionary
Thesaurus

NEW Find the most popular key words to use in your Meta tags:

Consider using a Doorway Page (designed to look good to Search Spiders) with all your Meta tags and search words in it.

Use text on the main page and content pages and avoid using only graphic or flash elements.

If you use frames on your main page, provide the content of the frame pages below the frame calls in your main page.

Consider Banner Exchange and Web Rings to get your URL exposed to relevant customers.

To highlight your web address in some Free For All links, use this code when submitting your URL:
http://www.yourdomain.com/" style="background:yellow; color:black

NEW Submit your site to several search engines to improve traffic, Try this multi-submission tool:

Search Engine Submitter

SEO - Spider Tricks

Mask your published email addresses from collection by spiders:
<script language="JavaScript">

</script>

Optomize your site with a SEO META Tag analyzer program:
Click here for Search Engine Optomization Tools

Submit your site to both search engines and indexes on a regular basis.

Buy multiple domain names with varying content to give search spiders alternative.

Rename your title line from time to time and resubmit to search engines and indexes.

Use key words and phrases in your title line to move your ranking higher in the indexes.

Place your Title line as the first line in your Head tag so spiders see it first. Then follow with your Meta tags.

Remember the alphabet when titling your page. Many search engines return the results of a search alphabetically.

Regular content additions will also allow spiders to index your site multiple times.

Use a Doorway Page with main topics and content embeded in "comment" areas. Many spiders read the hidden comments of your code.

Use keywords and phrases in the your Meta title and description tags. (See Meta Tags above)

Embed popular keyword phrases in all pages so spiders may index your site multiple times.

To prevent spiders from following all the links on your page use this Meta tag:
<meta name="robots" content="NOFOLLOW">

To stop spiders from indexing your page use this Meta tag:
<meta name="robots" content="NOINDEX">

Mobile Web Design Tips

Simplify! Use only the essence of the main website and then minimize all text and graphics for small screens

Cross link sites – Give users the option to go to the mobile site from the full site and vice versa

To switch to a Mobile Site from the main site based on screen size – use this script:
<script type="text/javascript">

</script>

Add a meta "Viewport" to a Mobile Site to tell the browser to scale your page to fit the device:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Minimize Scrolling - most mobile browsers use touch scrolling and will not display scroll bars. Never horizontal scroll on a mobile site.

Don't use Flash on a mobile site especially if you want visitors who use an iphone to see your site.

Make link buttons larger and use a mobile navigation design, optimized for touchscreens or non-mouse input devices.

Use images for logos or icons but minimize use of other images on a mobile webpage.

Resize images to fit the smaller screen and faster loading on slow mobile connections

Avoid sites that allow you to build your mobile site on their server and link to it from yours, they are driving traffic to their site not yours.

Get a free mobile website template that you can use to create your own mobile site:
Free Mobile Web Template

This Google Mobile Website builder will create a mobile friendly version of your website in seconds.
Mobile WebSite Converter

Want more?

Submit or Request a Tip or Trick:

Name:	Required
Email:	Required
Comments:

Name:
Email:
Tip or Trick:
You may attach files to this form: