HTML Tips

Home Laws Advice Fitness SiteMap Links GuestBook Discuss Search corshamref.net

HTML Tips

Thanks to Bravenet for most of these tips.

This page contains a useful selection of html tips I have gathered whilst making this web site (Webmaster).

Dopey Grubbing Referee Cartoon by Julian Carosi

Floating Text alongside an image

Copy and paste the following code that onto your website where you would normally put your content. Change the src="myImage.gif" to the path of the image that you want to use. Also, be sure to edit the descripton text that is inside of the paragraph tags!

<img src="myImage.gif" alt="My Image" style="float:right;">
<p> This will be the paragraph that you are wanting to float the image beside. </p>

Email Protection.

The following Javascript is a good way to help prevent spammers from grabbing the email addresses from your web pages.
The following code must be added to the head section of each webpage that you'd like to use this script in.

<head>
<script type="text/javascript">
function mailto(domain,user)
{
document.location.href = "mailto:" + user + "@" + domain;
}
</script>
</head>

After the above code has been added to the head section, you then gain the ability to use the following from anywhere within the body section of your HTML source code.

<a href="javascript:mailto('example.com','daniel')">daniel 'at' example.com</a>

The 'example.com' section of this code will need to be replaced with your email providers domain, and the 'daniel' section will need to be replaced with the username that you have for that particular email account.

What this Javascript actually does is takes these two pieces of data and then parses them into your full email address after you've clicked on the mailto link.

The example Javascript would parse daniel@example.com in this case, once the link was clicked.

Spiders and robots that search your website won't see the code as an email address that they can gather and so your email should be safe from spiders and robots!

Cool Fading Colour Effect

Add text to your website that fades and changes into different colours.

First, copy and paste the following code into the <head> section of your webpage's source code:

<script type="text/javascript">
function change()
{
re="rgb("+Math.round(Math.random()*256)+","+Math.round(Math.random()*256)+","+Math.round(Math.random()*256)+")"
text.style.color=re;
}
setInterval(change,1000);
</script>

Once that is in the head section of your webpage, you can paste this code into the body of your webpage where you would like the text to appear:

<p id="text"> Here is where you type your text. </p>

This is what it looks like below:

How does my coloured text look on my web site?.

The <p> tag is referred to as a paragraph tag. Between the opening and closing paragraph tags, you can type in as much or as little text as you want.

Clipboard Viewer

Unlike previous versions of Windows, the Clipboard Viewer utility in XP doesn't show up on the Programs list but it's still there. To put it on your desktop as a shortcut, open Windows Explorer and work your way to the System32 sub folder in the Windows folder (i.e. C:\WINDOWS\system32), find the file 'clipbrd.exe', right click and select Send To > Desktop (Create Shortcut) and it's done. If the System 32 folder isn't shown in Windows Explorer go to.. Tools > Folder Options, select the View tab and close to the top of the list uncheck 'Do not show hidden files...'click OK and try again. In Windows ME, the Clipboard Viewer utility file 'clipbrd.exe' can be found in the top level Windows folder.
Opening the Clipboard Viewer will allow you to see what it contains, and it also allows you to delete the contents. This is useful, as it can sometimes take up a lot of computer memory.

Embedding Sound Files in a web page

The <EMBED> tag is the most common way of adding sound to a Web page. Its advantage over the <BGSOUND> tag is that it is supported by both browsers, and more consistently across the PC and Mac platforms. The <EMBED> tag introduces many features that aren't supported by <BGSOUND>. Furthermore, while the <BGSOUND> tag only supports background sounds, the <EMBED> tag also features an interactive interface (including various buttons to play, stop, and handle the sound). Let's take a look at the <EMBED> tag in action (requires a sound-enabled browser):

The HTML code that generates a control panel is very simple:

See http://www.webreference.com/js/column20/embed.html for more details.

Lets say the wav file is referee.mid, to use the EMBED tag would be: <EMBED SRC="referee.mid ">.

To use the BGSOUND tag is similar: <BGSOUND SRC="referee.mid ">

The following code sample will play a background sound:-

<EMBED src = "fugue.mid"

autostart=true

hidden = true>

You can now use the EMBED tag for both Internet Explorer and Netscape Navigator.

If you're going to use the sound on a large page, place the tag towards the bottom of your code (but still within </BODY>). Wave files can take some time to load and may hold up the display of your page. This may cause users to hit the stop button in frustration..

To get rid of the underline on hyperlinks add this to the head section of your page:

<style>

</style>

To link a page to your style sheet, put this in the head section:

Style sheet text for Corsham Refeeee Site is below.

<link rel="stylesheet" href="../style.css" type="text/css">

Stylesheets (CSS) offer the web designer some great tools above and beyond those available in regular HTML to alter the way text is formatted and displayed by Web browsers. Here are some great tricks to help you take control of your text elements, using CSS styles to manipulate HTML coding:

Note: The following examples are based on local and direct implementation of styles. All of the following could be used with an internal or external global stylesheet. First, we will show the declaration for each style. At the bottom of this article is an example of a multi-styled element in raw HTML code.

font-family: verdana,arial,sans serif; Declare a font.
font-size: 10px; Set the font size.
font-style: italic; Set a style for the font.
font-weight: bold; Define boldface type.
color :cc0033; Set the font color, here it's dark red.
background: f3f3f3; A background (gray) will surround text.
word-spacing: 2px; Set space between words (tracking).
letter-spacing: 5px; Set space between letters (kerning).
text-indent: 15px; Indent the text.
line-height: 10px; Set the space between lines.

To implement this kind of formatting, you can use a style, stylesheet, or simply delimit the text in question using a <span> tag, like this:

<span style="font-family: verdana,arial,sans serif; font-size: 14px; font-style: italic; font-weight: bold; color: cc0033; background: f3f3f3; word-spacing: 2px; letter-spacing: 5px; text-indent: 15px; line-height: 10px;"> ... Some Text ... </span>

Comment tags:

The best way to keep track of our code is to use "comment" code. You can place this code
anywhere on your pages, and it will not be visible on your site. It will
stay hidden from your visitors, but will allow you to keep everything
together. An example of this code is:

.

Place that tag anywhere in your pages and it
will not show.

You could also use this code as a way to mark things:
 <table>
</table>

Date:
Although sometimes you may not have time to change the date on the page to
show updates. Use this Javascript to show the date and time of the update. Well actually, it is
just the current date and time. But your visitors wont know that. So you get
the professional look and feel without doing anything. Here is the code:

<script>

</script>

Put a Subject text (and Body Text) into a blank email MAILTO hyperlink.

Pre-assign both the subject and the body text using the mailto tag.

The HTML for a normal MAILTO anchor tag is:
<a href="mailto:name@domain.com">Click here for details</a>

("Click here for details", is the underlined hyperlink text that will show in your Browser.)

This creates a hyperlink (Click here for detail) that, when clicked, will launch the user's default
mail program with the coded address in the "To" line.

To take this a step further by introducing the "Subject" variable. For example, if you
want people to submit a job application, you can pre-code the Subject text to show "For Job Application Click Here".

Code the mailto like this:

<a href="mailto:name@domain.com?Subject=For Job Application Click Here">Your Address</A>

Now, what if you wanted to pre-determine the Body Message as well? You may
wish to do this if you have an offer that is always the same, such as a
request for information. Let's say you're offering an IT Job. You can
code the subject as "IT Job" and the Body Message as "Please send me
details of your IT Job."

To pre-code text into the email Subject and the Body - Code the mailto this way:

<a href="mailto:name@domain.com?Subject=IT Job&Body=Please
send me details of your IT Job ...">For Job Application Click Here</A>

This can save your visitors some time, and save yourself
the anguish of strange email inquires by pre-coding your mailto expressions.

Status Bar Link Messages:

The status bar on your browser is the strip at the bottom of the window that shows you the status of current document transfers and connections to remote sites. You know you can code a message to appear in that box in place of the default on mousing over hyperlinks on showing on your page? This can entice the user to click if the right message is used.

<A HREF="home.html" onMouseOver="self.status='Go Back to the Home Page'; return
true;">Home</A><BR>

<A HREF="page2.html" onMouseOver="self.status='Go to Page 1'; return
true;">Home</A><BR>

The JavaScript included within the HREF Tag ('Go Back to the Home Page' or 'Go to Page 1') defines the message and targets the URL in question.
You can have as many of these as you have links on your page!

Page Transition Effects (IE 4+ only)

Welcome visitors to your pages with
transition effects that grab their attention? You can do this by using
special Meta Tags in the Head portion of your page.
Insert the code as shown below within the Head section of your page.

<META HTTP-EQUIV="Page-Enter"
CONTENT = "RevealTrans (Duration=4, Transition=23)">
<META HTTP-EQUIV="Page-Exit"
CONTENT = "RevealTrans (Duration=4, Transition=23)">

"Duration" is the amount of time in seconds for the effect to take place.
The default and minimum value is 4. "Transition" is the actual effect,
displayed as a number value between 1 and 23. (A list of all available
effects is shown below.)

The effect shown here (23) is a random configuration of all
effects. You can choose them separately of course.

You can use these to create effects on either page entry or exit or both.
Play around with them and have some fun. Remember, though,
they only work with IE 4 or better (which is 75% of all users).

Here's the list of Transition types and their associated numeric values:

Box in = 0
Box out = 1
Circle in = 2
Circle out = 3
Wipe up = 4
Wipe down = 5
Wipe right = 6
Wipe left = 7
Vertical blinds = 8
Horizontal blinds = 9
Checkerboard across = 10
Checkerboard down = 11
Random dissolve = 12
Split vertical in = 13
Split vertical out = 14
Split horizontal in = 15
Split horizontal out = 16
Strips left down = 17
Strips left up = 18
Strips right down = 19
Strips right up =20
Random bars horizontal = 21
Random bars vertical = 22
Random = 23

Bookmarking your Web Page:

Ask visitors to your web to bookmark your Home page. Explorer and Navigator text shows seperately on each browser.
Change the Corsham Referee URL and title to show yours.

<SCRIPT LANGUAGE="JavaScript">


</script>

Image Tips:

When including images on your Web pages, there are a few rules you should
follow to enhance the experience for your visitor. Use the following as a
kind of checklist for placing images in your pages.

- Define widths and heights: Make sure you specify width and height
attributes in your image tags. This gives the browser the sense that it has
already loaded an image, even if has not, and will it will prevent any
nearby text or other elements from "re-wrapping" after the image has loaded.
<img src="myimage.gif" WIDTH="100" HEIGHT="100">

- Use the ALT attribute: This attribute of the image tag shows text on
mousing over the image, and also offers a description if browsers have
images turned off. If used effectively it can also increase your ranking
on the search engines.
<img src="myimage.gif" ALT="New York Metropolitan Museum">

- Specify a border: Even if your image has no border, it is a good idea to
specify a value of none, just in case your image is used as a hyperlink. By
defining a zero border, you eliminate that ugly blue box around hyperlinked
images.
<img src="myimage.gif" BORDER="0">

- Use alignments: If you place an image next to text, that text defaults to
display at the bottom of the image. You can specify an alternative
alignment.
<img src="myimage.gif" ALIGN="middle">

- Try hspace and vspace: These attributes create a margin of free space
around your image, both horizontally and vertically, in pixels. This can be
helpful in buffering your images from text or other page elements.
<img src="myimage.gif" VSPACE="5" HSPACE="10">

CSS goodies!
(Some may not work in older versions of Netscape.)

Mouse over this link, and see the color change, then change again.
This little trick is very simple to do. Just add:

<span onmouseover="style.color='color';" onmouseout="style.color='color';"> Some Text </span>

to any text, where 'color' is a named or numeric color value.

Look at this text!
This bit of code is quite versatile. You can change the color, size and even the position of it. All you need to do is play with the code a bit. Here it is:

<span style="position:relative;width:190;height:10;filter:glow(Color=#009966,Strength=1)"> Some Text </span>

Border in a Box The syntax for this dotted border effect is:

<span style="border: dotted; border-width: 1px; border-color: #990066;"> Some Text </span>

Launch popup windows on entry: This can be done easily with Javascript. Here is a code example:

<script language="Javascript">
pop1=window.open("http://www.bravenet.com","pop1", "toolbar=yes,location=yes,directories=yes,status=yes, menubar=no,scrollbars=yes,resizable=yes,width=800,height=600");
window.focus()
pop2=window.open("http://www.bravenet.com/members/signup.php","pop2", "toolbar=0,location=0,status=1,menubar=0, scrollbars=1,resizable=1,width=800,height=600");
window.focus()
</script>

How does this all work? The script tag is telling the browser that a script is about to be declared or executed, and window.open is the Javascript function to open a new window. The URL is just the URL in which you want the window to display. The next part you need to be careful with. If you do not name the next part the same as the "pop1=window.open" it will not function correctly. You can replace "pop1" with anything you like.

The next set of code is simply giving you options to play with the browser popup settings. Feel free to set any of these to "yes" or "no".

The "pop1" and "pop2" text are called "variables". The pop2 variable is telling the browser to open a new window again. The following text is the same as the first. The only difference is the way the last string of code is displayed. We are now showing you a different way to code browser display settings. "0" is NO, or FALSE. "1" is yes, or TRUE.

Popup Positioning

We've all seen popup windows before, sometimes called interstitials. But did you know you can actually pre-position where the popup will occur on a page? The positioning of a popup window is just as important as the window itself. With the help of a little coding, you can target your popups to where you want it appear on your user's screen. Consider the following example:

Click Here

Notice how the window popped in the middle? This was done with attributes in the Script tag! Check out this code example:
<A HREF="javascript:void(0)" ONCLICK="window.open('http://www.YOURSITE.com','miniwin',
'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,
width=300,height=170,screenX=300,screenY=400,top=300,left=400')">Click Here</a>

Note that we use two sets of attributes to determine placement. "X" and "Y" coordinates are for Netscape, while "top" and "left" are for Explorer.

CSS Tricks

CSS can add all sorts of interactivity to your website. Here is another example of a cool CSS trick that you can use to accentuate text with colored boxes:

Put Mouse Here

Cool, huh?! The text changed form! How did this happen? Easy ...

<style>
.navoff {
border : 1px solid #EAEAEA;
font : 12px Verdana;
}
.navon {
border : 1px dotted #808080;
background : #FFFFFF;
font : 12px Verdana;
}
</style>

First we placed the Style tag in our HEAD tag in our HTML document. This tells the browser that it needs to ready this code, because something is about to use it.

<span class="navoff" id="a3" onMouseOver="a3.className='navon'" onMouseOut="a3.className='navoff'">Put Mouse Here</span>

Why not take a couple additional attributes and add them to the ".navon" class? See what happens! Here are a few examples:

background: #bfbfbf url(image.gif);
font-size: xx-small; font-weight: bold; color: orange;

Zooming in on HTML in FrontPage<%=FP_FieldVal(fp_rs,"")%>

By default, FrontPage uses a relatively small font size in HTML view. If you'd like to increase or decrease the font size -- and you have a Microsoft IntelliMouse or Wheel Mouse -- just hold down the <Ctrl> key and roll the mouse wheel.

This feature lets you view long lines of HTML without horizontal scrolling and lets you zoom in on your code without having to squint.

Meta Tags

Meta Tags are important pieces of code that most search engines use to analyse, categorise and rank your website.

Proper use of Meta Tags can substantially increase your search engine traffic. Here is a basic set of Meta Tags:

<TITLE>The Corsham Referee WebSite</TITLE>
<META NAME="DESCRIPTION" CONTENT="Advice for Football-Soccer Referees.">
<META NAME="KEYWORDS" CONTENT="referee, football, soccer">
<META NAME="RATING" CONTENT="General">
<META NAME="ROBOTS" CONTENT="index, follow">
<META NAME="REVISIT-AFTER" CONTENT="4 weeks">

Note: Include these tags in the <HEAD> area of your HTML page!

Title Tag

While not strictly a Meta Tag, the TITLE Tag is an important piece of information for search engines. Many search engines lay extreme weight on a site's Title to index that site. Your Title should normally about 10 words in length but may contain up to 100 characters. Try to stick to the focus of your site when choosing a title.

Here's an example for a hotel:

<TITLE>The Corsham Referee, Corsham, England, Laws, Football, Advice, Referees, aTRaining.</TITLE>

Description Meta Tag

The DESCRIPTION Meta Tag is a one or two sentence description used by many search engines as a displayed description for your site. Not all search engines use this Meta Tag, but if you don't include it, those that do may display odd results or simply ignore your site.

Your description should be short and to the point, no more than 25 words. Be sure to use as many of your keywords as possible here! For example: "The Corhsam Referee web site offers advice on all of the Laws of teh Game. Many links to other similar sites are also included."

Keywords Meta Tag

The KEYWORDS Meta Tag are words that people use to find your products or services on the Internet through search engines. Our Referee site example might be found by typing in "Referee Soccer" in a search engine.

It is very important to select the right keywords for your site. Choose words directly related to your site and list them in order of importance. Take care over this selection. Write your ideas down and then list them in order of importance. Theories vary on the number of keywords to include in this tag. Limit yourself to those you are sure are directly connected to your site.

If you are not sure which keywords to use, check out which ones are being used by those sites in your general category of business which appear first in major search engines. This is a very good idea to do for all of the search engine tips and tricks.
For our Referee site, the Keywords Meta Tag might include: Referee, Football, Soccer, Referees, Referees', FIFA, Dopey, fouls, offside, goal kick, corner, throw in,, etc.
Note that it is a good idea to use plurals when possible.

Robots

Robots are electronic "spiders" that roam the Internet looking for pages to index to search engines. If you allow Robots to "Index" your page, that means you allow them to log your pages for inclusion in search engine listings. If you allow Robots to "Follow" that means you are letting them spider other pages on your site to index those as well. You may want to exclude Robots, for example, on administrative pages that you don't want people to find.

Protecting Your Site and Files

One form of bandwidth loss is from people linking to images on your site without your permission. If you suspect this activity is occurring from your site, you can run a check on some search engines to find out if it's happening to you.

Try this test out and see what results you get. Go to the AltaVista Search Engine and type: image:www.YOUR_SITE.com

How to change the way outgoing email identifies you personally:

To help you brand name your web site at the same time. If you want to change your email profile, so that your mail comes from: You at Yoursite.com, for example, here's how:

MS Outlook:
1. From the top menu select: Tools > Accounts
2. Select your account and click Properties
3. Change "Name" under "User Information" and click OK.

Netscape:
1. Click on the Edit pull-down menu and select Preferences
2. On the left column, click on the "Identity" sub-category.

Eudora:
1. Select Special then Configuration
2. In the box labelled Real Name, change the name to the desired.
3. Click on OK.

Get rid of that ugly dotted line that Internet Explorer places around image links when you click on them.

Place the script below inside your <HEAD> tag.

Or simply add this line to each link tag: onfocus='this.blur()'
Note: IE6 has removed the dotted line all together from the browser.

Mouse Rollover:

<SCRIPT LANGUAGE="JavaScript">
MouseOver("firstimage.gif","secondimage.gif",
"width=100 height=30 border=0 alt='Click Here'",
"yourpage.html");
</SCRIPT>

Print Page:

<a href="javascript:window.print()">Print This Page</a>

Back/Forward/Reload:

Back: <a href="javascript:history.back(1)">Go Back</a> Forward: <a href="javascript:history.forward(1)">Go Forward</a> Refresh: <a href="javascript:location.reload(1)">Refresh</a>

Pop Under Window:

Pop Up Window:

No Right Click:

Cool Text Effects
This is pretty neat stuff, style sheets that allow you to format specific
text effects for shadows, drop shadows and glowing characters. Play with the
variables to see which works best for you. Filter effect names are "shadow"
"dropshadow" and "glow".

<TABLE STYLE="filter:shadow(color=blue)">
<TR><TD> THIS IS COOL! </TD></TR>
</TABLE>

Pull-down, or drop-down, menus are great space savers when it comes to
displaying a series of hyperlinks. The form and script below will enable you
to easily place a drop-down selection of links, without the need for any
server-side programming. All you have to do is 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>

or alternative code

<form name="boogie">
<select name="surf" onChange="location=document.boogie.surf.options[document.boogie.surf.selectedIndex].value;" value="GO">
<option selected>Choose Destination</option>
<option value="book.html">Web Site Design Made Easy</option>
<option value="magic.html">Background Magic</option>
<option value="news.html">Almost a Newsletter</option>
</select>
</form>

<form name="nav">
<select name="link" onChange="location=document.nav.link.options[document.nav.link.selectedIndex].value;" value="GO">
<option selected>Choose Destination</option>
<option value="http://www.bravenet.com">Bravenet.com</option>
<option value="http://www.bravenet.com/reviews/archives/tips.php">Tips & Tricks Archive</option>
<option value="http://www.bravenet.com/members/helpcenter.php">Bravenet.com Help Center</option>
</select>
</form>

Protect your stuff!!!

While there is no way to completely hinder others from taking your source code, here are some very cool tricks you can use to make code-snatching a little more difficult. After all, webmasters are notoriously lazy; disabling right-click may well be enough to stop visitors from viewing – and taking – your valuable code.

All of the below tricks employ a tiny snippet of scripting code inside your page's BODY Tag. Try some of these to get a feel for what they accomplish when embedded into the tag.

Disable Right Click (to View Source):
<body oncontextmenu="return false">

Disable Mouse Dragging (Highlighting):
<body ondragstart="return false">

Disable Keyboard Use (Select/Copy):
<body onselectstart="return false">

Validate your html page.

The validator works off a simple premise to allow full cross-platform compatibility to your HTML code. This means proprietary tags specific to some browsers, or other tags not fully supported, will not validate through this system. The object here is to determine if your pages are in effect understood by any browser, using approved HTML that will function across all platforms.

http://validator.w3.org/

While platform-independent code is a goal worth striving for, it is almost impossible to create completely standardized pages. At least an attempt should be made, and we find we always learn something when running code validations. At worst, a visit to this resource will be an introduction to the online Mecca of HTML writers: http://www.w3.org.

To save space and to provide a nifty way of giving your visitors access to your pages, you could consider using a form-based, drop-down jump navigation system. This is practical especially if you have many sections to your site, with multiple pages in each section.

Normally, you would have a series of links for each page, and more links underneath for all of the subpages. Using this Jump script, you could simply name the various sections, and place a form selector below each to show all the sub-pages, without taking all that space to show them.

<Script Language="JavaScript">

</script>
<form>
<Select>
<OPTION SELECTED VALUE="freekick.htm">Free Kick
<OPTION VALUE="goalscor.htm">Goalscoring
<OPTION VALUE="mentoring.htm">Mentoring
</SELECT>
<INPUT TYPE="button" VALUE="Jump"
onClick="NavJump(this.form.elements[0])">
</FORM>

Here's a sample display:

Mini Tips

Highlight the Background of Text:
<span style="background-color:ffffcc;">Wow, that's yellow!</span>

Wow, that's yellow!

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

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

Timed redirect to another page automatically:
<META HTTP-EQUIV="refresh" CONTENT="10; URL=http://www.yoursite/newpage.htm">

Display messages in browser status bar on link hover:
<a href="index.htm" OnMouseOver="self.status='Go to my homepage!';
return true" onmouseout="self.status=''; return true">Visit this page.</a>

Adding a Title attribute to your links creates a mini-popup description:
<A HREF="http://www.bravenet.com" TITLE="Cool Website Tools!">Text</a>

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

</script>

Image Maps

br> <IMG SRC="theimage.gif" WIDTH=400 HEIGHT=50 ALT="" BORDER="0" usemap="#theimage">

<map name="theimage">
<area shape="rect" coords="1,1,100,50" href="page1.htm">
<area shape="rect" coords="101,1,200,50" href="page2.htm">
<area shape="rect" coords="201,1,300,50" href="page3.htm">
<area shape="rect" coords="301,1,400,50" href="mailto:you@yourserver.com">
</map>

The above code cuts up the image into 4 pieces for different links. The "coords" are the pixels of the image (the cells) X-start, Y-start, X-end, Y-end So our first link starts at pixel 1 width and 1 height and ends at 100 width and 50 height. (Remember width starts at left and height at top.)

Cascading Style Sheet properties are a powerful and useful method of fixing background images to your web pages. Here are three examples of how this can be accomplished with relative ease. These methods can be used to enhance your web pages by attaching highlighting graphics to the background of your pages.

To fix an image vertically on a web page and have it repeat down the left side of the page, you would use the following css. This is best used for repeating a background image to enhance a menu system or some similar type of area.
<style type="text/css">
body {
background-image: url("../images/yourimage.gif");
background-repeat: repeat-y
}
</style>

To fix an image horizontally on a page and have it repeat across the top of the page, you would use the following css. This is used to create a background strip at the top of the page. The width of this strip is controlled solely by the width of the image you are using.
<style type="text/css">
body {
background-image:url("../images/yourimage.gif");
background-repeat: repeat-x
}
</style>

We've all seen web pages with an image fixed in the center of the page while the rest of the page scrolls around it. Use this bit of css to accomplish that on your own webpages.
<style type="text/css">
body {
background: #FFFFFF url("../images/yourimage.gif")
no-repeat fixed center center
}
</style>

Simple Navigation Aids

Here are a few common and simple navigation aids that you can use on your website. These have been a standard for some time and are quite easy to implement on any website.

Back/Forward/Reload/Print page
<a href="javascript:history.back(1)">Go Back</a>
<a href="javascript:history.forward(1)">Go Forward</a>
<a href="javascript:location.reload(1)">Refresh</a>
<a href="javascript:window.print()">Print This Page</a>

Here are examples of navigation aids similar to the ones above but using form buttons incorporating css style to enhance the regular buttons.
<FORM>
<INPUT TYPE="button" VALUE=" BACK " onClick="history.go(-1)" style="font-family:verdana;color:#FFFFFF;background-color:blue;font-size:11px;">
<INPUT TYPE="button" VALUE="FORWARD" onCLick="history.go(1)" style="font-family:verdana;color:#FFFFFF;background-color:green;font-size:11px;">
<INPUT TYPE="button" VALUE="Print this page" onCLick="window.print()" style="font-family:verdana;color:#FFFFFF;background-color:orange;font-size:11px;">
</FORM>

This is how it would look using the form buttons and incorporating css styling.

Try these on your own web site to help improve the ease of navigation between pages for your visitors.

Add a Calendar to your Web Site!

Here is a nice little script that will allow you to display a calendar on your webpage. It shows the current month and highlights the current date.
Copy all the code that is in this text area and paste it into your html code. Place this in your code where you would like the calendar to appear on your webpage.

<SCRIPT LANGUAGE="JavaScript">





</SCRIPT>

GIF or JPEG,

what's the difference?
Different situations call for different image formats. For optimum display properties and to minimize download times, be sure to use the right format for the right job. Here are some tips:
Web Graphics take advantage of file compression to minmize size. Both GIF and JPEG images are compressed files that significantly reduce file size. However, there are some differences that you should take into consideration. GIF images are ideal for images with relatively few colors and little gradation. A rule of thumb to apply here is if your image has few colors and those colors don't meld into each other, then use the GIF format -- your file will be considerably smaller than a JPEG and will be much clearer. On the other hand, if your image is dithered (colors bleeding into one another as in a photograph), JPEG is the way to go. Multi-color, dithered images will actually be smaller and clearer in JPEG format.
Try a test by creating sample images in both formats and you'll soon get a feel for which format to use in which situation.Creating Vertical Rules and Lines

Creating Vertical Rules and Lines

Horizontal rules or lines are a snap in HTML, as they are embedded in the language with the <HR> tag. No such tag exists for vertical lines, but it's pretty simple to create this effect on your pages.

We do this by building a .gif image we'll call "vertbar.gif" and then placing that next to some text. You can build the image to width, say 2 pixels, and form the height as desired using the img height attribute, like this:

Now type some text next to the image and you'll see that it flows alongside the image.

Incidentally, did you know that the Horizontal Rule tag <HR> can take attributes of its own? They include:

Width: width in pixels, Size: height in pixels, Align: left, right or center, Color: color in hex format

So, we could build a horizontal line, using attributes, like this:

Non-dithered Colours for websites

Did you know that the Windows and Mac platforms agree on which colours are "safe" to display? Yes, if you have ever seen strange colours on Web pages, or colours that don't blend properly, chances are those colours are not standard and are "dithering," an attempt to blend which doesn't quite work.

To combat this, you should know that computers adhere to a simple formula for showing proper colours -- 216 in total. These colours are the ones you should be using for your Web pages, as they will render "true" on just about any machine and any browser. They follow this rule: 00, 33, 66, 99, CC and FF. If you stick to these numbers and letters in building your hex code colours, you will never experience that confounded "dithering." Using combinations of these values will give you 216 colour possibilities -- plenty for any website!

Cached Pages

Stop your site from saving itself to your visitors' computers:

Between your <HEAD> and </HEAD> tags, place this code:
<META http-equiv="Pragma" content="no-cache">

That line will cause your browser to say: "Do not save a local copy. Load from the server".

Browser Window Sizes
How To Reset memory for IE browser window size

Internet Explorer remembers the last setting of the last browser window when you close it. Sometimes it backfires causing windows to open smaller or larger than we want. Follow the instructions below to reset browser windows to open the size you want.

1. Close all browser windows but this one.

2. If you maximized this page before you started reading you need to click the restore down button. Its the pair of boxes between the X and the [-] minimize button (top right of your screen). If you didn't maximize this page before you started reading you can skip this step and go to the next.

3. All windows but this one should be closed. This window should not be maximized. Grab the corner of this browser window with your mouse and stretch it to the size you want. If you want windows to open full screen you have to stretch it as far as possible with the corners. DO NOT use the maximize button.

4. Once you have this window stretched to the size you want.. Click the X to close it.

5. All new windows should open to the size you set. If Internet Explorer's browser size memory gets screwed up in the future just follow these instructions again.

Cool Text Effects

This is pretty neat stuff, style sheets that allow you to format specific text effects for shadows, drop shadows and glowing characters. Play with the variables to see which works best for you. Filter effect names are "shadow" "dropshadow" and "glow". For a little added effect, add letter spacing to the style as well.

Shadow:
<table style="filter:shadow(color=green);font:bold 20px verdana;letter-spacing:8pt;"><tr><td>THIS IS COOL!</td></tr></table>
would look like this:

THIS IS COOL!

Dropshadow:
<table style="filter:dropshadow(color=green);font:bold 20px verdana;letter-spacing:letter-spacing:8pt;"><tr><td>THIS IS COOL!</td></tr></table>
would look like this:

THIS IS COOL!

Glow:
<table style="filter:glow(color=green);font:bold 20px verdana;letter-spacing:8pt;"><tr><td>THIS IS COOL!</td></tr></table>
would look like this:

THIS IS COOL!

Image Maps

Image maps are one of the most-used and least-understood display functions used in Web development. Although they have been around for ages, very few people understand the concept and the creation of image maps. In short, image maps are navigation tools that allow hyperlinking from within an image environment. A good example is actually a map, where you could click a city to take you to a page about that city.

Here's how it works. The image is really a coordinate of cells, with a block of cells designated to hyperlink to a particular page. To create an image map, your best bet is to get an image map editor, but you can code them by hand. Here's how:

<IMG SRC="theimage.gif" WIDTH=400 HEIGHT=50 ALT="" BORDER="0" usemap="#theimage">

<map name="theimage">
<area shape="rect" coords="1,1,100,50" href="page1.htm">
<area shape="rect" coords="101,1,200,50" href="page2.htm">
<area shape="rect" coords="201,1,300,50" href="page3.htm">
<area shape="rect" coords="301,1,400,50" href="mailto:you@yourserver.com">
</map>

The above code cuts up the image into 4 pieces for different links. The "coords" are the pixels of the image (the cells) X-start, Y-start, X-end, Y-end So our first link starts at pixel 1 width and 1 height and ends at 100 width and 50 height. (Remember width starts at left and height at top.)

Cascading Style Sheets

We have talked about the power and flexibility of Cascading Style Sheets in the past and this is yet another example of how to create a stylish and functional navigation menu bar without using any images. The speed of loading and using this method of navigation far out-weighs the use of javascripts and images. Try the following script for yourself and modify it to suit your own needs.

Include this code in the body of your html page where you would like the menu to appear.

<div class="menuBar">
<a class="menuButton" href="">First Button</a>
<a class="menuButton" href="">Second Button</a>
<a class="menuButton" href="">Third Button</a>
<a class="menuButton" href="">As Many more buttons as you need</a>
</div>

This is what the menubar will look like on your Web Site.

Laws Menu Advice Menu Third Button As Many more buttons as you need

Auto Refresh

Have you ever followed a link, only to encounter an error message that the file being requested cannot be found?

Maybe you have a page or section to your site that is no longer active. If so, you too may be sending visitors an error message if your server cannot find the page being requested. To solve this, when you take a page off your site, replace it with an automatic refresh page that will send your visitors in the right direction. A good way to do this automatically is to use the "Refresh" Meta Tag in the head section of the page. Here’s what the code looks like:

The number is the time in seconds for the Refresh to begin, while the URL is the page you wish to Refresh to. Don’t stop there, though. You should also include a direct hyperlink to the page that visitors can click if they don’t want to wait for the refresh action to take place.

1. Refresh/Update the same Page:

Between the <head> and </head> tags in your source code add
<meta http-equiv=refresh content=60> Edit "60" to the number of seconds you would like to wait before the page reloads.
Another common method of doing this is by placing this meta tag between <head> and </head> tags in your source code.
<meta http-equiv="Pragma" content="no-cache">

Redirecting to another page:

Between the <head> and </head> tags in your source code add
<meta http-equiv="refresh" content="1; url=http://www.anothersite.com/"> Then between the <body> and </body> tags in your source code add If the new site doesn't load, go here. <a href="http://www.anothersite.com/">Visit www.anothersite.com</a>
You can also use Javascript for this purpose. Between the <head> and </head> tags in your source code add
<script language="javascript">

</script>

Then replace the body tag with this
<body onload="timer=setTimeout('move()',3000)"> where 3000 is the time in milliseconds before the redirect happens.

Have you ever opened a link and found the browser window needs to be maximized? This can be worked around with a simple, but effective javascript you can place on your page. If you put this code into the <HEAD> section of your page, whenever the page is loaded, it will automatically force the browser to open to the maximum available area on a user's screen.

<SCRIPT language="javascript">
top.window.moveTo(0,0);
top.window.resizeTo(screen.availWidth,screen.availHeight);
</SCRIPT>

An easy way to add an image to your webpage, but have it appear behind a block of text is by using this handy little piece of CSS. To the style sheet in your <head> area, add the following class.

Then to the image you wish to have appear in the background add the applicable class id as illustrated below.
<img src="http://images.bravenet.com/bravenet/images/c/bravenet/
knight5a.gif" width="100" height="75" class="backone">

The easy way to remember this is by thinking that z-index is 0 by default. Setting the z-index to -1 has the effect of moving the image down one level on your page.

To open all links on a webpage in a new window, place the following code between your <HEAD> and </HEAD> tags.
<base target="main">

Highlighting text with CSS

<div style="border-left:4px solid #ff0000;font:11px verdana;padding-left:5px;">

Wrapping our paragraph in a styled "div" has given this paragraph the highlighted red line on the left. This is a very stylish method for highlighting sections of text.

</div>

This is another commonly used method of highlighting text. <span style="background-color:yellow;"> This is easily accomplished with CSS. </span>

Trademark symbol for web pages

Name Code Number Code Glyph Description

™ #8482 ™ Trademark