Homepage Help --- Edit Pad
( Read next: Topics in UPLOAD YOUR HOMEPAGE )
Assume that your homepage address is:
https://members.tripod.com/lienthi/index.html

What does Edit Pad look like ?
- It looks like the Figure 14 below:

Figure 14: Edit Pad and Shortcuts
Figure 14: Edit Pad & Shortcuts

- Edit Pad looks like the Figure 14 above.
*** You don't need to know about HTML (really), however, it's good to know ! You may find other website which explain clearly about HTML. This is just little about HTML which we should know to edit thithi.html.
- For more on HTML you may visit http://xoom.com/helpcenter/essential/essential/ .
- Little about HTML: A homepage usually has a Head, a Body and a Tail ( I named it ;-) ). Have a look at Figure 15:

Figure 15: Parts of a homepage
Figure 15: Parts of a homepage

- A homepage is always started with <HTML> tag and closed with </HTML> ( note the "/"). <HEAD> and </HEAD> is placed between <HTML> and </HTML>. Body of a homepage start with <BODY> and closed with </BODY> is always placed after </HEAD>.
- To align something ( a text, picture ) in the middle we use: the tag <CENTER> and </CENTER>. For example, I want to place the counter for Lien Thi's homepage in the center I can use the follwing code:

<CENTER><A HREF="http://www.beseen.com/hc-index.html">
<IMG SRC=
"http://jupiter.beseen.com/hit.counter?account=lamchanphong@hotmail.com-thithi&font=GreenOnBlack&base=2000"
BORDER=0></A></CENTER>

- I placed
<A HREF="http://www.beseen.com/hc-index.html">
<IMG SRC=
"http://jupiter.beseen.com/hit.counter?account=lamchanphong@hotmail.com-thithi&font=GreenOnBlack&base=2000"
BORDER=0></A>
in between <CENTER> and </CENTER>

Please refer to https://members.tripod.com/vietchats/thithi.html to see how the counter was placed at center. Here is what it looks like:

Figure 10a: Place counter at center
Figure 10a: Place a counter at center.

    The above was just a little bit about HTML.

1. ADD COUNTER:
- After register a counter at http://www.beseen.com , we get the following code:
<A HREF="http://www.beseen.com/hc-index.html">
<IMG SRC=
"http://jupiter.beseen.com/hit.counter?account=lamchanphong@hotmail.com-thithi&font=GreenOnBlack&base=2000"
BORDER=0></A>

    - Now , in Edit Pad, we open thithi.html from C:\Homepage\thithi.html. Click File ---> Open. Choose file thithi.html from C:\Homepage\, click OK.
    - You will see only HTML codes when you open the file thithi.html using Edit Pad. No ideas what they are ? ;-) No problem. You don't need to understand. Scroll down to the line as indicated in Figure 16 below:

Figure 16: Illustrate the point where to replace counter code
Figure 16: Illustrate the point where we will replace with the counter codes.

    - Search for the line:
<br><b><font face="Times New Roman,Times"><font color="#0000FF">COUNTER
HERE</font></font></b>
AND REPLACE with the counter codes above:
<A HREF="http://www.beseen.com/hc-index.html">
<IMG SRC=
"http://jupiter.beseen.com/hit.counter?account=lamchanphong@hotmail.com-thithi&font=GreenOnBlack&base=2000"
BORDER=0></A>

If you just leave
<A HREF="http://www.beseen.com/hc-index.html">
<IMG SRC=
"http://jupiter.beseen.com/hit.counter?account=lamchanphong@hotmail.com-thithi&font=GreenOnBlack&base=2000"
BORDER=0></A>
as it is, the counter will align to the Left. To align the counter to center, we need to add <CENTER> in front and </CENTER> at the end of:
<A HREF="http://www.beseen.com/hc-index.html">
<IMG SRC=
"http://jupiter.beseen.com/hit.counter?account=lamchanphong@hotmail.com-thithi&font=GreenOnBlack&base=2000"
BORDER=0></A>

NOW it becomes:
<CENTER><A HREF="http://www.beseen.com/hc-index.html">
<IMG SRC=
"http://jupiter.beseen.com/hit.counter?account=lamchanphong@hotmail.com-thithi&font=GreenOnBlack&base=2000"
BORDER=0></A></CENTER>

Save the file thithi.html

2. ADD MUSIC:
- To make your homepage more interesting, you may want to put some music into it. Where you can find midi files ? Please check out my MIDI page at https://members.tripod.com/vietchats/Midi.html . You may link to my midi if you like, or you have to download to your hard drive and have to upload it to your homepage account later. Here, we are going to add the song "Mu`a Thu La' Bay", a midi file called mua_thu_la_bay.mid which you download from my website http://www.geocities.com/CollegePark/Field/6529/VietMD/mua_thu_la_bay.mid
Save this mua_thu_la_bay.mid to your C:\Homepage\
After that you have to upload mua_thu_la_bay.mid to your homepage account, it will be https://members.tripod.com/lienthi/mua_thu_la_bay.mid . Now let put it in thithi.html:

Figure 17: Put midi code before </head>
Figure 17: Put midi codes before </head>

    - Enter this line of code ,
<EMBED SRC="https://members.tripod.com/lienthi/mua_thu_la_bay.mid" AUTOSTART=TRUE HIDDEN=TRUE LOOP=TRUE></EMBED>
before </head> as indicated in Figure 17. Save this thithi.html.

3. OPTIONAL: Add Star , when you move your cursor, the star will follow as you have seen from https://members.tripod.com/vietchats/thithi.html

Add the following codes after <head> or <HEAD> and before </head> or </HEAD>:
<!--STARS-->
<!-- Original: freeware.de -->
<!-- Web Site: http://freeware.de -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<style type="text/css">
<!-- Begin CSS
#a { position: absolute; top: 10px; left: 10px; visibility: visible }
#b { position: absolute; top: 10px; left: 10px; visibility: visible }
#c { position: absolute; top: 10px; left: 10px; visibility: visible }
#d { position: absolute; top: 10px; left: 10px; visibility: visible }
#e { position: absolute; top: 10px; left: 10px; visibility: visible }
#f { position: absolute; top: 10px; left: 10px; visibility: visible }
#g { position: absolute; top: 10px; left: 10px; visibility: visible }
End CSS -->
</style>
<!--END OF STAR-->
AND AND AND AND AND AND AND ( DON'T FORGET THIS )
Add the following codes anywhere after <body> or <BODY> and before </body> or </BODY>:
<!--STARS BODY-->

<LAYER NAME="a" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="b" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF8000" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="c" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="d" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00FF00" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="e" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000FF" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="f" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="g" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFFFF" CLIP="0,0,2,2"></LAYER>

<script language="JavaScript1.2">

<!-- Begin
var ns=document.layers ? 1 : 0;
if (ns) {
window.captureEvents(Event.MOUSEMOVE);
var yBase = 200;
var xBase = 200;
var delay = 10;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 50;
var Ypos = 50;
var j = 0;
function MoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = MoveHandler;
function animateLogo() {
yBase = window.innerHeight/4 ;
xBase = window.innerWidth/4;
for ( j = 0 ; j < 7 ; j++ ) {
document.layers[j].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
document.layers[j].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
}
currStep += step;
setTimeout("animateLogo()", delay);
}
animateLogo();
}
// End -->

</script>
<!--END OF STARS-->

Save thithi.html

( Read next: Topics in UPLOAD YOUR HOMEPAGE )
Created & Maintained by CongTuVSA
LAST UPDATE ( MAY 4, 1999 --- 1:00 A.M. )