Making a banner page for your premium room

To have your own banners displayed in your own group you need several things

# 1 - a 468x60 banner image in gif, jpeg, png, or flash format

# 2 - the ability to create a web page (example code provided)

# 3 - a web host and a place to upload your banner page and images (usually provided by your isp)

# 4 - a FTP program to upload your files with (web based site building tools eliminate the need for FTP)

If you look at all of this and start drooling, have no fear, Paltalk is full of people who know how to make web pages.  Just ask a friend for help.

For those of you who have a need to know, or would like to try to learn how to make a basic banner page, we have provided a sort of 'tutorial' to help you understand some BASIC html concepts.  Don't worry, if you go thru all of this and still don't understand, you can send your friend who makes web pages to this site so they know what to do.

MAKING A BANNER PAGE

The first thing you need to know is that the banner area you see on Paltalk is a browser window.  You can only link to a web page, NOT a raw graphic file.  The reason you need to do this is because linking to a graphic, the browser window will display it, but will insert some default parameters to insert margins and borders.

This may be just fine if a person were to view the graphic in a full browser window, but the banner areas on Paltalk leave no room for wasted space.  This means that if you link directly to a graphic image, the image will be shifted to the right and down, and have scrollbars covering most of the banner.

Yuck....

The reason we have you link to a web page rather than a graphic image is so you can force the mini browser window in Paltalk to turn the scrollbars off, and get rid of the margins that shift the image to the right and down.

You would also want your banner to link to your web site, or maybe you want to rotate thru different sets of banners.  This is why we leave it up to you to just link your banner url to your own banner page that can be as flexible as your talents can take you.


LETS GET TO IT

Here is an example of a banner page....

----- beginning of web page code -----

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.Paltalk.com" target="_blank">
<img src="http://www.Paltalk.com/Paltalk/support/commerce/downloadbanner.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>

------ end of web page code -------
 

YEP - IT'S HTML

The first thing is to tell the browser that this is a HTML web page, where it starts and where it ends.

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.Paltalk.com" target="_blank">
<img src="http://www.Paltalk.com/Paltalk/support/commerce/downloadbanner.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>

Starting and ending things is important so this is a good lesson in starting and closing tags. Tags will start with the name of the tag and end with a slash in front of the name of the tag. You start things with <tag> and end things with </tag>.

So now we told the browser where our code starts and ends.....


THE BODY BODY THE PAGE

Now we have to tell the browser how to display the page to us. This is important because when making a banner you don't have the luxury of lots of space. The <body> of our HTML will be displayed using certain parameters, like margins, how wide the margins are, borders, scroll bars, background and text color, etc....

Most of this stuff is not needed for a simple banner. However, since we have limited space we don't want any margins, nor do we want any scroll bars! So we have to tell the browser to forget about its default settings and use ours instead. This is done in the <body> tag.

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.Paltalk.com" target="_blank">
<img src="http://www.Paltalk.com/Paltalk/support/commerce/downloadbanner.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>

The above example shows that we told the browser scroll=NO, so we won't get scroll bars. It also shows we want the top and left margins set to 0, and further that we set any remaining margin width to 0. Doing this assures that we have no wasted space in the banner area of a Paltalk window.


CENTERING THINGS

We want everything to be nice and neat so we should <center> our banner. Anything between the beginning of the <center> tag, and the end of the </center> tag will be centered in any browser window, and the banner area of a Paltalk window is indeed a browser window.

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.Paltalk.com" target="_blank">
<img src="http://www.Paltalk.com/Paltalk/support/commerce/downloadbanner.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>

You don't HAVE to center things but its good practice for a banner.


MAKING IT CLICKABLE

If you are going to have a banner image it's likely that you want people to click on it to visit your web site. You can wrap any text or image inside of a <a href=""> tag. Anything in between the start of a <a href=""> and end </a> (a is the actual reference for the tag name), will become 'clickable'. The 'href' part of the tag says that this is a reference to a location or URL.

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.Paltalk.com" target="_blank">
<img src="http://www.Paltalk.com/Paltalk/support/commerce/downloadbanner.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>

Notice we started the <a href=""> BEFORE the placement of the image or other stuff. We then closed the href with the </a> tag. Anything in between will be clickable.

Ok, so you can click it, but now you want it to send you to a web site.


SETTING LOCATION OF SITE

The 'href' portion of the link is the 'reference' or location of the web site you want to send a user to.

Simply replace the complete url in this example with the url to the web site.

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.Paltalk.com" target="_blank">
<img src="http://www.Paltalk.com/Paltalk/support/commerce/downloadbanner.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>

The location would open when a person clicked on the banner, BUT, it would open within the small banner area on the Paltalk window that contained the banner. This is way too small for a web site so you want to make sure that the click opens a new browser window.


MAKING A CLICK LAUNCH A WINDOW

Targeting is a great way to launch new windows, force a page to open in a certain frame, or open a page and jump to a location within the page itself. For this example we simply want to make the click launch a new browser window. We do this with the target="_blank" command within the <a href=> statement. Note that this comes immediately after the location or URL. Both the URL and the 'target location' are contained within double quotes.

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.Paltalk.com" target="_blank">
<img src="http://www.Paltalk.com/Paltalk/support/commerce/downloadbanner.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>

Now whenever a person clicks the banner, a new browser window will open with their web site being displayed.


IMAGE LOCATION

Now to the image for the banner. First you have to tell the browser that you want to display an image, and where it is. This is done with the <img src=""> command. The <img src=""> Specifies the location of the banner image. The banner image can be no bigger than 468 pixels wide, and 60 pixels high. The image must be stored on a web host somewhere. You simply specify the url to the location of the image. This url DOES end with a .gif, .jpg, .swf, etc... Simply replace the url (in bold) in the example below.

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.Paltalk.com" target="_blank">
<img src="http://www.Paltalk.com/Paltalk/support/commerce/downloadbanner.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>


IMAGE SIZE AND BORDERS

We must be sure we force the image to the correct size, even if its too big or too small. If it's just right these tags don't matter. But in the interest of conformity we should specify that we want the banner image to be the same size as the Paltalk window banner area.

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.Paltalk.com" target="_blank">
<img src="http://www.Paltalk.com/Paltalk/support/commerce/downloadbanner.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>

Note that we used the 'HEIGHT' and 'WIDTH' parameters to force the image source to the correct size.


ALTERNATE TEXT

Alternate text is cool to catch the attention or interest of someone who is hovering over the banner but really may not want to click on it to visit the site. People don't click banners for a variety of reasons and this is your last chance to get them to click on your banner... You can place any message you like as alternate text. Be sure not to make it too big as the text only stays popped up for a few seconds when a user hovers over your image.

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.Paltalk.com" target="_blank">
<img src="http://www.Paltalk.com/Paltalk/support/commerce/downloadbanner.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>

You can replace the 'alt' text with anything you like, keeping in mind that it only stays popped up for a few seconds when a person hovers over your banner or link.


DONE

Now that you are an expert you should be able to make a banner page for anyone. If a user pastes you a link to an image instead of a page, you can plug that link in and ask them the url to their site. You can then plug that in, save the page, and send it to the user in email or PM. They can then upload the page to their web host and modify their user group setup page to reflect the proper banner url.


ONE FINAL EXAMPLE

Your banner page may looks like this... (the important stuff is in bold)

<html>
<body scroll=NO marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor="black" text="white" alink="white" vlink="#ff9900" link="#ffcc33">
<center>
<a href="http://www.customer-site.com" target="_blank">
<img src="http://www.customer-site.com/images/customer-banner-image.gif" BORDER="0" HEIGHT="60" WIDTH= "468" alt="Click here for more info..">
</a>
</center>
</body>
</html>
 

UPLOAD THE PAGE AND IMAGE YOUR WEB HOST

Now that you have created the banner page you have to upload it to your web host.  If you have an internet connection chances are your ISP gives you some space for your own web site.  Contact them if in doubt.

The usual way to get to your web space provided by your ISP is to use a FTP program.   An example of how to log in to your space would be to enter ftp..hostname.com as the address (hostname is the name of your isp).  Example: ftp.earthlink.com  Your user name and password should be the same that you use to get your email with.

Once you log into your web space you will see some folders.  Use the 'public html' folder if you see it.  Some ISP's will automatically log you into this folder.

Upload your newly created banner page and banner image to this folder.

Assuming your called your banner page 'banner.html', the address to your banner page will probably be something like this....

http://website.yourhost.com/yourusername/banner.html

website.yourhost.com being where your ISP hosts users web sites
(contact them if you are confused)

yourusername being your user name you use for your email (usually)

If you have a .com or your own domain then use...

http://yourwebsiteaddress.com/banner.html
(you get the idea)
 

To see an approximation of what your banner will look like in Paltalk, enter your complete banner url (e.g. http://support.paltalk.com/TestBanner.html) and click on the show banner button (sorry, this only works for Internet Explorer).
 


Now you may want to rotate different banners through your group.  This is a bit more complicated but if you are familiar with JAVA script it's pretty easy.