Page Control Codes

PAGE CONTROL CODES!
Subjects covered here are: links within your site, links outside your site, opening a page
in a new window, closing a window, returning to the top of the page and linking to text
on the same or other pages in your site. E-Mail linking, removing underline from links,
back and forward button links. And how to make a slide show using HTML pages.

SIZING YOUR PAGE!
You can insert a bar with set pixels so you don't over build your page.
Below is a bar, set at 640 pixels width. You can place a bar on your
page. Set it at the width you want and build your page within that setting.
You can remove the bar when the page is completed. Hope this helps!

OPEN LINK IN NEW WINDOW!
Opening a web page in a new window, whether it's a link to one of your pages or
one at another site. It's all the same. When you write the code for the link add this to
the code TARGET="_blank". The link that opened this page, which I called 'page',
is this: <A HREF="page.html" TARGET="_blank">Go To Control Code Page</A>
or use this: <A HREF="page.html" TARGET="_new">Go To Control Code Page</A>

RELATIVE LINKS!
Remember the rule for links, if the link is to a location other than your site,
you need the full URL address. When linking to something located in your
files, such as pages, graphics, etc., use a relative link. Here is an example
of an absolute or off site link: <A HREF="http://www.vpcr.50megs.com">
and here is an example of a relative link <A HREF="index.html">

LINKING TO TEXT
Linking to a text message on the same page or any other page at your site.
First go to the text you want to link to and where it starts insert this:
<A NAME="news"> in front of the first word of the text, which is 'news'.
Then after the word 'news', close the tag with </A>. So in the quote marks,
give it a name. One word and no spaces. Next go to the page where you want
the link and insert this: <A HREF="articles.html#news">Read the News</A>
That indicates that the news is on a different page called articles.html. And on
the same page as the link, do this:<A HREF="#news">Read the News</A>

E-MAIL LINKING!
There are two options for e-mail links. The first is the most common one used:
<A HREF="mailto:vpuglia@tampabay.rr.com">E-Mail Me!</A>
And the other option is with the Subject of the message included.
<A HREF="mailto:vpuglia@tampabay.rr.com?Subject=subject of email">E-Mail Me!</A>
=subject of email is where you put the subject you want to be contacted about. You can
always use an image in place of the text as the link. <IMG SRC="images/mailbox.gif">

MAKING A SLIDE SHOW USING HTML PAGES!
** VIEW A SLIDE SHOW FIRST **
If you would like to build a slide show like the one above, it's very easy. Start by creating
one web page for each picture, I used 15 pictures. It can be any number above two. Give
a title to each page like 'Slide Show 1', 'Slide Show 2', and so on. Make an empty folder
called 'ssone' to store your pages, and inside that folder create a folder called 'pics' to
store the pictures. The names are important or it will not work right. Save your pictures
to the 'pics' folder. Give them easy names. I used 'ss01.jpg', 'ss02.jpg' and so on. Put the
same body code on each page for background color, text color, etc. and put the code for
the pictures in the 'body' of the page. Put two to four breaks after the body code and the
same after the picture code. So that the picture is in the middle of the screen. Now the
picture: <CENTER><IMG SRC="pics/ss01.jpg" BORDER="4"></CENTER>
If you don't want a border around the picture, change that number from '4' to '0'.
Next put this in the <HEAD> of the page, right after where the 'title' ends.
<META HTTP-EQUIV="REFRESH" CONTENT="6;URL=ss02.html"> That does two
things, it tells the page to change in 6 seconds [you can change that number]. And it tells
it to go to page 2, which is 'ss02.html'. When finished save this page as 'ss01.html', make
sure you change the 'text' to 'all files', and put it in the folder called 'ssone'. Now you are
ready to make page two. Copy and paste page one text to a blank note pad page and
change the numbers in the 'title', META tag and picture. Like this: 'Slide Show 2',
<CENTER><IMG SRC="pics/ss02.jpg" BORDER="4"></CENTER> and
<META HTTP-EQUIV="REFRESH" CONTENT="6;URL=ss03.html"> Notice the
META tag has the next picture, number three. Just continue on until the last picture.
Now you have two options, one is to have the show replay. Just make the META tag
of the last picture 'ss01.html'. Or you can stop at the last picture by leaving the META
tag out. That's what I did. Now, two more items, opening and closing the show. First
opening the show. Where you want to put a link to your slide show, do it like this:
<A HREF="ssone/ss01.html" TARGET="_blank">VIEW MY SLIDE SHOW</A>
Now closing the show. On the page with the last picture, you can have two
options for the viewer. <A HREF="ss01.html">PLAY SHOW AGAIN</A> and
<A HREF="javascript:window.close()">CLOSE WINDOW</A> Once you have
complete all the pages for the show, upload the one folder that has everything in it.
The folder I named 'ssone'. Inside that folder are the pages and a folder called 'pics',
with all the picture. If this is done right, you should be able to view the slide show from
your hard drive. Check it, and make sure it's working right before uploading to your site.
** ANOTHER SLIDE SHOW MADE IN 15 MINUTES **
Here is a simple program that I created to make it easy to have many photo albums.
This is what one looks like--> CLICK HERE TO SEE IT!
Download a neat photo album program zip file that is only 39kbs!
CLICK HERE TO GET IT IN TWO DIFFERENT BACKGROUND STYLES!
REMOVING UNDERLINE FROM LINKS!
You may want to remove the underline that shows under all links.
Place one of the two codes shown below, under the <HTML> tag:
Copy and paste one of the codes and do not change the spacing.
<style type="text/css">

</style>

**OR**
<style type="text/css">

</style>

If you want to remove the underline from a specific link:
<A HREF="mailto:mrknow@tampabay.rr.com" STYLE="text-decoration:none">Mail!</A>
That code would make it look like this when inserted: Mail!

BACK ONE PAGE!
This will send the visitor back to the page they came from.
Back Button Code:
<INPUT TYPE="button" VALUE="<--Back" onClick="history.back()">

And to use your image for the button:
<A HREF="javascript:history.back()"><IMG SRC="imag/back.gif" BORDER="0"></A>

FORWARD ONE PAGE!
This will send the visitor forward one page.
Forward Button Code:
<INPUT TYPE="button" VALUE="Forward-->" onClick="history.forward()">

And to use your image for the button:
<A HREF="javascript:history.forward()"><IMG SRC="imag/forward.gif" BORDER="0"></A>

BACK TO TOP LINK!
The item below will take you back to the top of the page. It comes in handy
when you have a long page and want to give visitors a quick way to the top.
You can use an image or text, or both. But the basic code is simple.
<A HREF="#top">Go To Top</A> That example is with a text link.

TOP

CLOSING A WINDOW!
The items below will close this window. First the 'button' code:
<CENTER><INPUT TYPE="button" VALUE="Close Window" onClick="window.close()"></CENTER>

You can also use text or graphic or both for the link. The text code would look like this:
<CENTER><A HREF="javascript:window.close()">Close Window</A></CENTER>

Just COPY AND PASTE any code your want from these pages.
Change the colors, sizes, graphics or any other option in the codes!