Tips and Tricks


To make a "Reload Page" button:

<<>FORM><<>INPUT TYPE="button" VALUE="Reload Page" onClick="history.go(0)"> <<>/FORM>


To have one song play after another on a webpage, put this code in the HEAD:

<<>meta http-equiv="refresh" content="5;url=http://URL of the second sound here"<>>
<<>/head<>>

(content="time length of first song)

And this code in the BODY:
<<>bgsound
src="http://URL of first song"<>>


Page refresh code.
Put this in the head tags:
<<>meta http-equiv="refresh" content=15<>>
15=15 seconds

To pause on intro page, then go to next page:
<<>meta http-equiv="refresh" content="20;url=http://url-of-next-page"<>>


Transitions

To make the page slide onto the screen, add this attribute to the body tag:

transition="slideright"

there are the effects you can use:
SlideRight
SlideLeft
SlideDown
SlideUp
WipeRight
WipeLeft
WipeDown
WipeUp
wiperighttop
wipeleftttop
wiperightbottom
wipeleftbottom
spinoutin


Scrolling Background:

This will make the background of your page move....it is a really cool effect. You can change the numbers from 1 to 10 if you want to make it scroll faster.

Horizontal Scrolling
To make it scroll right horizontal:

To make it scroll left horizontal change the xspeed="1" to xspeed="-1"

Vertical Scrolling
To make it scroll up change the xspeed to yspeed.
To make it scroll down change the yspeed="1" to yspeed="-1"


To get this button


To get this button:

Name


To make one a colored seperator bar:

<<>center<>> <<>table width="400" height="10" bgcolor="lime"<>> <<>tr<>><<>td<>> <<>/td<>><<>/tr<>><<>/table<>><<>/center<>>

Of course, you can use any color you want.


Try making your images and links come to life. Here's two great tips:

For your HREF tag (did you know that text with a HREF is underlined on computer browsers?) try adding onMouseOver. My favorite one is the effect that says something in the status bar. I like to tell people where they are going, but you can add any message you like.

<<>A HREF="URL" onMouseOver="window.status='Site Name';return true;"<>>

Then, to play around some more you can take some of the animations on the page and add this to the IMG tag: animateonselect.

<<>IMG SRC="URL" HEIGHT="#" WIDTH="#" ALT="image name" animateonselect<>>


To make flashing text:

HTML + CCP + FUN !!!


To add a simple border around your gif.
<img
src="http://members.tripod.com/~Cannonball2/newbees/calvin1.gif" width="173" height="150" border="7">


To have a colored border:

<table bgcolor="lightgreen" border="5">
<tr> <td>
<img
src="http://members.tripod.com/~Cannonball2/newbees/calvin1.gif" width="173" height="150"> </td> </tr> </table>


Click here for grad color 


Using default alignment (left):
<<>img src="http://members.tripod.com/~Cannonball2/newbees/calvin1.gif" width="150">
produces
Text here starts near the bottom of the image and then goes underneath the image.


Using align="left" inside the image tag produces a different result
<<>img src="http://members.tripod.com/~Cannonball2/newbees/calvin1.gif" width="150" align="left">
produces
Text here starts at the top of the image and wraps underneath it. Text here starts near the top of the image and wraps underneath it. Text here starts near the top of the image and wraps underneath it. Text here starts near the top of the image and wraps underneath it. Text here starts near the top of the image and wraps underneath it. Text here starts near the top of the image and wraps underneath it.


How to unanimate an animated gif.

Use this code:
<<>img src="URL" animateonselect<>>
This will stop the animation, and since the image won't be clicked on, it will not animate.

If you wish to use an animated image as a clickable link and have it animate when selected use this code:
<<>a href="http://URL of link"<>>
<<>img
src="URL"animateonselect<>><<>/a<>>


How do I make thumbnails?

First transload the pics to your homepage.
Then re-size the pics to the thumbnail size you want at image magick, I used 80x100.
Name the thumbs something like pic1t.jpg   so you know its the thumb.
Then make the thumbnail pic a clickable link to the full size pic and put it in a table code.

Here is one row of 5 pics from my thumbnail page.
<<>a href=
"http://url of full size pic here"<>>
<<>img src=
"http://url of thumb here" height="100" width="80"<>><<>/a<>>
This is a row of 5 pics.
To do another row just repeat the code above and add a <<>tr<>> the tr starts a new row.
After you re-size the thumbs use the height and width attributes so your page will load faster.


Image Swap on mouse over:

<<>a href="url of whatever" onMouseOver='A.src="url of image 2"' onMouseOut='A.src="url of image 1"'<>>
<<>img src="url of image 1" name="A"<>><<>/a<>>

Both images should be the same size.
The "image 2" will be displayed when the cursor is highlighting it (onMouseOver), and the "image 1" will be displayed when the cursor is moved off of the image (onMouseOut).

You can preload the 2nd image by putting this at the bottom of the page:
<<>img src="url of image 2" width="1" height="1"<>>

.


Referencing to down the page:

To have a navagation section to reference to a section on down the page, You can use anchor tags.

To make a link that will scroll down to the proper section do this: On your link at the top of the page, use a formula like this:
  <<>a href="#me"<>> More About Me<<>/a<>>

Then, at the section "More About Me" of your page, use a fomula like this:
<<>a name="me"<>>More About Me<<>/a<>>
By using an anchor name, such as "me", you have specified where the link goes to.
<<>a name is short for Anchor Name.
<<>a href is short for Anchor Hypertext Reference.
By putting <<>a href="#me"<>> will make "More About Me" a hypertext link to a location named "me".
    Then when you put that same name in a tag such as <<>a name="me"<>> it tells the link where to go to.
It is VERY important to include the # sign in your <<>a href tag.
Of course you can name the anchor anything you want to, just be sure to use the same name in both tags, and be sure to use all lower case letters.

"Back to Top" anchor:

First-
Do your Link like this:
<<>a href="#top"<>>WELCOME<<>/a<>>
Then where you want the user to go back up to the "WELCOME", like say, at the bottom of the page- do this :
<<>a name="top"<>>Back to Top<<>/a<>>

You can use any word instead of "top", just make sure you use the same word in both places.
Also you can put the <<>a href="#top"<>> anywhere, and you don't necessarily have to use a place with TEXT (like in WELCOME,)
A graphic will work, or actually just inserted anywhere you want, will work !

You can also take them to a specific spot on another page.
Place the <a name="TargetWord"> code on the page at the point you want to end up at.
 Then just add the URL to the: <a href="http://URLofPage.html#TargetWord">Link </a> link to send them there.


Links Tags Examples


Here is a text thing for the status bar that puts out 1 letter at a time!! pretty cool!

Just remember to put these scripts in the <<>head<>>
  <<>/head<>> of you page!

<<>SCRIPT Language="JavaScript"<>>
<<>!-- timeID = 5; stcnt = 11; msg = "YOUR MESSAGE GOES HERE "; wmsg = new Array(33);                 wmsg[0]=msg;                 blnk = "                                         ";       for (i=1; i<32; i++)                 {                                 b = blnk.substring(0,i);                 wmsg[i]="";                 for (j=0; j -1) str = wmsg[stcnt]; else str = wmsg[0]; if (stcnt-- < -40) stcnt=31;                 status = str;         clearTimeout(timeID);         timeID = setTimeout("wiper()",100); } // --<>>
<<>/SCRIPT<>>

<<>BODY bgcolor="???" text="???" onload="wiper()" LINK="???" VLINK="???"<>>


Want to view 2 webpages on the same screen?




HTML Test Bed



horizontal spacer









 Cannonball


© Copyright November 6 1998  ©
© All Rights Reserved © © Cannonball ©


Sig Box Tutorial

HTML Tutorial

Lesson Two

Lesson Three: Tables

Webtv Tools

Webtv Helps

Home

Date & Clocks

Advanced Tips

****



visitor stats