Little Tips and Tricks Page 1

W hen 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="124" HEIGHT="58">

This image has no "alt" tag but the width and height are defined

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" WIDTH="124" HEIGHT="58" ALT="This Is An Alt Tag">

This image has an "alt" tag and the width and height are defined

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

This image has an "alt" tag and the width and height are defined. It also is a link with the border defined as 0 and the other has no defined border as you see the border around it.

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

This text is aligned in the middle This Is An Alt Tag of the image on both sides

This text is aligned at the top This Is An Alt Tag of the image on both sides

This text is aligned at the bottom This Is An Alt Tag of the image on both sides

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

<p><img src="myimage.gif" VSPACE="5 "HSPACE="10 "ALIGN="middle "BORDER="0" WIDTH="124" HEIGHT="58" ALT="This Is An Alt Tag"></p>

A s we sum all this up, other than the below basic image tag, with the (a href) link tag included if the image is used instead of a text hyperlink. Every other attribute is used only when required.

<p><a href="URL Path To You Link"><img src="Path To Your Image" BORDER="0" WIDTH="124" HEIGHT="62" alt="This Is An Alt Tag"></a></p>

T he image links within this tutorial have been deactivated and do not work for this lesson. To see how to do this, see the previous page on how to make a link not function.

O ne last attribute we will cover when an image is used in conjunction with a link is the target="_blank". This attribute is used and connected to the URL (Page Address) that you want to open with the image and or text link. This attribute will cause the link to open in a new browser window as opposed to opening in the same browser window and lose the initial page. Below is a working example of this effect in action along with the code to see where you insert this attribute.

<p><a href="URL Path To You Link"target="_blank"><img src="Path To Your Image" BORDER="0" WIDTH="124" HEIGHT="62" ALT="This Is An Alt Tag"></a></p>

A final note on images. Many people do not use the complete URL address when inserting images. They just put the image name. This is bad for two reasons;

1) It takes longer to load because the computer has to search longer to find the path to the image and,

2) It is proper HTML coding to use the complete URL address.

Y ou have to remember that with an image, you need to treat it as a separate entity. In other words, unless you want it to run-on and have text on the same line (unless specified) you need to break it as in a complete paragraph to stand alone. You do this by adding either the attribute of <br> before and after or the attribute of <p> in front of the image tag and the closing attribute of </p> after the image tag.

This Site Was Last Updated As Of;

I f you have a site that you want to make active-looking, the best way to do it is by having a date somewhere, showing when it was updated. This makes it seem as if you have updated. Even if you haven't changed anything, it still looks good to say you have.

A lthough sometimes you may not have time to change the date on the page to show updates. This is why Javascript is so handy. This little snippet of code is enough 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:

<font face="georgia,arial,helvetica"size="3"color="#99cc00"> <script>

</script></font>

I f you would like to alter the font style, size and color of the updated date and time, all you need to do is add a font tag in front of the script and reconfigure it to your specifications. Then just close the font tag after the script. See the above example with the included font tag.,/font>

W e have tested the code in IE5.5, IE6 and Netscape4.7. This script worked well in all platforms with the exception of Netscape4.7 where it will "Not" work. properly. It will give you a totally erroneous date.

T his little tip is on how to stop people right clicking on your page to steal your images and view your source code. Since this is a very in depth and lengthy tutorial, we build a complete section on this that you can access from the below link.
[ Block Source Code Viewing And No Right Click ]

T his next little tip is one of the ones that no one ever thinks about until it is too late and then can't find it. It is a little form button that will close a page instead of using the X in the upper left hand corner of your browser window. This can be very useful if you have pages that open in new windows as opposed to opening in the same window.

Form Button

Hyperlink

<a href="javascript:window.close();">Close Window</a>

J ust copy and paste either one of the little sniplets of code any where in the <BODY> section of your document where you want it to appear.

T his little script is a pop up window in reverse. It will not appear until your visitor closes the page. Then it will appear. You just substitute in the script the URL you want to pop up on exit and reconfigure which attributes you want to be seen such as taskbar, toolbar etc. In this example all the attributes are set to 1. This denotes they will appear. If you change them to zero (0) they will not appear. The last reconfiguration is the size of the window you want to open. This is set in pixels under "width" and "height". Just copy and paste the below code anywhere in the <BODY> section of your document.

I f you would close this page, you would see the pop up in effect. we have it configured so it will open up this same page for you.

Automatic Forward & Back Link

H ere are a couple of handy little scripts that automatically send your users back or forward to previously visited pages. This is a handy feature for catalogues, archives or photo albums, where hard-coding back and foward motion can be problematic. Here they are:

<a href="javascript:history.forward(1)">Go Forward</a>

Manual Bookmark Of Your Site

T he below java script is unique in that you can preset it to bookmark whatever page you want your visitor to add to their favorites. It is a two part script that the below section is pasted into the <HEAD> section of your document. All the color coded areas are where you will make your reconfigurations.

<P><script language="JavaScript1.2">
var bookmarkurl="URL You Want To Bookmark"
var bookmarktitle="Bookmark Title"
function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}

</script></P>

T he next section of script goes anywhere in your <BODY> section of your document that you want the link to appear.

<P><a href="javascript:addbookmark()">Bookmark Our Site</a></P>

T he below link will show you how this works. It is set to add our main URL to your favorites.

[ Bookmark Our Site ]

I f you have any problems with this page or with anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Rate This Page ]