25 Auction HTML Codes

1. Quickie codes 8. Clickable Graphics 15. Resizing Your Images 22. Sample Description 4
2. Add an Image/Photo 9. Adding music / sounds 16. Frame an Image 23. Sample Description 5
3. Working with Fonts 10. Drop Down Menus 17. Code Combos 24. Font Styles - Ref.
4. Add a background 11. Create email link 18. 'Lil' Snippets 25. Hex Color Chart - Ref.
5. Horizontal Dividers 12. Link to pages/pictures 19. Sample Description 1  
6. Creating Lists 13. Anti-spam your email 20. Sample Description 2  
7. Two-column tables 14. Javascript Right-click disable 21. Sample Description 3  

1 - Quickie Codes


Center text in your description:
<center> text goes here </center>

EXAMPLE


Create blinking text:
<blink> text goes here </blink>

EXAMPLE


<br>  forces a break to a new line 

<p>  makes a new paragraph 

<b> your text here </b> make text bold 

<u> your text here </u>  make text underlined

<I> your text here </I>   make text in italics

<s> your text here </s>  strikeout as in strikeout 

<hl> your text here </hl>  Creates the largest headline

<h6> your text here </h6> Creates the smallest headline
 
 
 

2. Add an Image or Photo

First, your image must be in either .jpg or .gif format to be viewable on the page. Secondly, your image must be "hosted" somewhere to be viewable on the page. "Hosted" means located on a website server accessible from the internet. For free image hosting, visit Tupics or search the web for more options.


To add an image to your auction description, use the following code:

<img src="http://location_of_your_image">


To center the image, use the following code:

<center><img src="http://location_of_your_image"></center>


Remember to replace the text in GREEN with the location of the image. 

For example, if my picture is named "picture1.jpg" and it is hosted on my website "http://www.thenetter.com", then my code would like this:

<img src="http://www.thenetter.com/picture1.jpg">
 

3. Working with Fonts - Styles, Sizes and Colors



To change the style of your font, use the code below:

<font face=ABCD> YOUR TEXT HERE </font>
 

Replace the letters ABCD in green with the font style name you wish to use, and YOUR TEXT HERE with your text. For a selection of these fonts and their names, click here.


To change the size of your font, use the code below:

<font size =X> YOUR TEXT HERE </font>

Replace the green X with the font size of your choice, and YOUR TEXT HERE with, obviously, your text. You can find a selection of standard font sizes here.


To change the color of your font use the code below:

<font color =#000000> YOUR TEXT HERE </font>

Replace the green 000000 with the font color you wish to use, and YOUR TEXT HERE with, obviously, your text. For a selection of hex colors click here.

4. Adding a Background to Your Auction

To add a background to your auction, use the code below:

<style> <!--Body {background: url(http://YOUR BACKGROUND URL)}--> </style> 
                          <body background=http://YOUR BACKGROUND URL>

Replace the areas in green with location of your background image.

5. Creating Dividers

Below are some sample horizontal dividers with their codes displayed above each. To increase the length, you can adjust the percentage up to 100%. 
 
 

<hr width="25%">



 
 

<hr width="25%" size="10">



 
 

<hr width="25%" size="10" noshade>



 
 

<hr width="50%">



 
 

<hr width="50%" size="10">



 
 

<hr width="50%" size="10" noshade>



 

6. Creating Bulleted Lists

To create a bulleted list, use the code below for each section of text you want bulleted:

<li> YOUR TEXT HERE </li>

Obviously, replace the part in orange with your text. 

Here is an example of how a bulleted list should look:

  • This is item number one
  • This is item number two
  • This is item number

7. Creating two-column tables

This is great for displaying your picture(s) on one side, while your description on the other in a neatly formatted manner.
 
 

Item Description:

Bid today on this lovely assortment of junk items! 100% pure junk - bid now!
To create a two-column table similar to the one above, use the code below:

<center>
<table border=2 width=80% cellspacing=5 cellpadding=8 cols=2>
<tr><td><img src="http://your image location"></td><td> Your Item Description </td></tr>
</table></center>

Replace the URL in GREEN with your image location, and the text in orange with your item description.

Note: The code outlined here will create a table which is much bigger than the above example. 
 

8. Make your graphics clickable


Sample Clickable Graphic





To make your graphics "clickable", use the following code:

<a href="http://page or image linked to"><img src="http://image location" border=0></a>

Replace the area in GREEN with the location of the PAGE or IMAGE you want visitors to go to when clicked on. Replace the area in ORANGE with the location of the image.

9. Adding Music or Sounds

As with images, a sound file must be hosted somewhere on the web. In this code example, we are linking to a midi file which will play as soon as the page is loaded and will repeat itself:

<center><EMBED SRC=http://YOUR MIDI URL HIDDEN=false HEIGHT=100 WIDTH=195 AUTOSTART=true LOOP=true> </EMBED></center>

Change the area in green to the location of the midi file on your server. 

To adjust when and for how long a music file will play, adjust the areas in blue and red to get the desired effect:

To start the music when page is loaded:
AUTOSTART=true

When you want the sound to play over and over again with no bloody end:
LOOP=true

When you want the sound to play just once:
LOOP=false

10. Create a drop-down menu

To create a drop-down menu, use the code below:

<center><FORM><SELECT name="URL"
                     onChange="if(options[selectedIndex].value)
                     window.location.href=
                     (options[selectedIndex].value)">
                    <OPTION value="">Choose a destination:</OPTION>
                    <OPTION value="">------------------------</OPTION>
 <OPTION value=http://Destination URL 1>1. Your text goes here </OPTION>
 <OPTION value=""></OPTION>
 <OPTION value=http://Destination URL 2>2. Your text goes here </OPTION>
 <OPTION value=""></OPTION>
 <OPTION value=http://Destination URL 3>3. Your text goes here </OPTION>
 <OPTION value=""></OPTION>
 <OPTION value=http://Destination URL 4>4. Your text goes here </OPTION>
 <OPTION value=""></OPTION>
 </SELECT><NOSCRIPT><INPUT type=submit value="Go There!">
                    </NOSCRIPT></INPUT></FONT></FORM></center>
 

which will produce the following: 



To customize this drop-down menu, replace "http://Destination URL 1" with the URL location you want visitors sent to when they choose #1 from the menu. Then replace the numbered text in orange on the same line with a brief description of where the link goes - such as "My other auctions" . Repeat with each destination URL and numbered text.

Example:

<OPTION value=http://www.stores.ebay.com/id=19941984>1. Visit My eBay Store! </OPTION>

You can add or remove destinations as needed. To create a space between each destination, use the following code between each:

<OPTION value=""></OPTION>
 

11. Create an email link

To create a basic email link, use the following code:

<a href="mailto:you@yourmail.com">Click Here to Send Me An Email!</a>

Simply replace the area in ORANGE with your own email address and copy the code into your description!
 

12. Link to Other Pages and Pictures

To link to another page use the following code:

<a href="http://page location URL"> Page Location Description </a>

Replace the area in GREEN with the page URL, and replace the area in ORANGE with your description of the URL, such as "View My Other Auctions!"


To link to a picture:

<a href="http://picture location URL"> Picture Location Description </a>

Replace the area in GREEN with the location of the picture, and replace the area in ORANGE with your description of the picture, such as "Click here for a close-up!"

13. Prevent spammers from harvesting your email address

If you didn't already know, spammers have a sneaky habit of extracting email addresses from web pages and auctions, making spam hard to escape!

This little snippet of code will foul up spammer's efforts to harvest your email address while working just as smoothly as a regular email link:

<A HREF="mailto:you&#64;yourdomain.com">Contact Us</A>

Replace the "you" in green with the username part of your email address and the "yourdomain.com" in orange with the domain name part of your email address. 

Confused?

Here's an example: 

Let's say your email address is jughead@hotmail.com
Your code would look like this: 
<A HREF="mailto:jughead&#64;hotmail.com">Contact Us</A>

14. Disabling right-mouse clicking with javascript

Keep users from stealing graphics from your auction using this snippet of javascript code which displays a pop-up window when someone tries to right-click on your auction page. Replace all areas in ORANGE with your own custom copyright message.
 

<SCRIPT language="JavaScript">
<!--
var message="Copyright 2002 - You are not permitted to right-click on this page. ";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
void(0); 
return false;
}
}
if (document.layers) {
if (e.which == 3) {
void(0); 
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
foo1 =click;
// -->
</SCRIPT>
 

15. Resizing your images

To resize an image, all you need is the location of the URL and the new dimensions you want in pixels, as in the code below:

<IMG SRC="http://yourimage URL" WIDTH="45" HEIGHT="67" BORDER="0">

Replace the area in GREEN with the location of your image.
Then simply adjust the Width in BLUE, and the Height in ORANGE.

The example below will give you an idea on pixel size. 

Example:


Image Size 
Width: 170 Height: 178


New Image Size
Width:105  Height:110

16. Frame an Image 

Framing your images is a nice way to display them for auctions. Use the code below to create frames for your pictures:

<CENTER><TABLE BORDER=9> <TR><TD><IMG SRC="http://yourimage URL"></TD></TR></TABLE></CENTER> 

Replace the area in ORANGE with your picture location URL. 
Your frame effect should look something like this:


 

17.  Code Combos 

Click Here for a selection of easy cut 'n' paste code snippets for those just starting out! 
 

18. 'Lil' Snippets

These are little text-based snippets (also known as ASCII Art) you can copy and paste into your auction to make them just a little more eye-catching. You don't have to do anything with them except copy and paste the code!

Click Here to View All Snippets and Their Code