Complete Auction CD

Quick Tips: Learn HTML a Bit at a Time!

This page will be developed over time with quick little bite-sized coding tips to help you grasp HTML a bit at a time. Click any of the menu items to be taken to the corresponding quick tip.

[ big pictures | better pictures | tag names | closing tags | uploads/downloads ]
[ highlight text | tags in chat | object tag ]

These are three of several ways to link thumbnails (small pictures) in your auction to larger pictures. Doing this correctly can allow your auction to display faster, thus keeping viewers longer. This can lead to more bids!

In order to do this properly, however, you need two files for each image: one small 'thumbnail' picture and one larger 'display' picture. The thumbnail should be no larger than 100x100 pixels (although the concept will work with larger sized pictures too!) and the display image should not exceed 600 pixels wide. In the HTML code for all examples below, use the acutal pixel dimensions in the WIDTH and HEIGHT attributes. Do not resize the image 'on the fly'!

  1. You can use a layout so the thumbnails and larger picture are all together in your auction, like this. (Use your browser's 'Back' button to return to this page.)

  2. You can use the TARGET="_blank" attribute in your thumbnail link so the image shows up in a separate window, like this. (Close the new browser to return to this page.)

    The code for this is <A HREF="http://uri.to.displaypage.html" TARGET="_blank">link text here</A>

  3. You can create an actual page for the graphic that has a link to return, like this.

It's always the right time to use good code!

[ back to top ]

Mr. J.G. Dainis, who frequents the eBay Photo/HTML board, said recently:

"Pixels are a measurement of size, similar to inches. Most computer monitors are 800×600. A 640×480 (640 pixels wide by 480 pixels high) picture would fill about 3/4 of the screen. That is all you should need. The most important feature on a camera for eBay is a good close focus, macro, capability. You would need one that focuses to 4 inches or less. I use a Sony Mavica FD73, earlier but identical to the later FD75. It can close focus to 1/2 inch." (used with permission)

It's always the right time to use good code!

[ back to top ]

At first, HTML code looks like so much Greek, but really it's quite easy. It is even easier if you know a little bit about the tag names and how to read them. HTML like this:

<img src="http://www.somehost.com/myspace/picture.jpg" width="250" height="300" border="1" alt="Roses in Vase">

can often be quite daunting and your eyes tend to glaze over each time you see it. On the other hand, HTML can all be so much easier if you know that the tag name always comes first and may be followed by one or more attributes, separated from the tag name and each other by one space. Attributes often have parameters following an equals sign and typically enclosed in quotation marks.

In the above example, the tag name is img from the word "image" (IMaGe) and it is followed by src from the word "source" (SouRCe), width, height, border and alt (ALternate Text) attributes. You could read this tag as follows:

Image source equals aitch tee tee pee colon slash slash double-u double-u double-u dot some host dot com slash my space slash picture dot jay-peg, width equals two fifty, height equals three hundred, border equals one, alt equals roses in vase.

Knowing that the tag name comes first and how to read it all should help you see HTML as more than just so much non-understandable Greek.

It's always the right time to use good code!

[ back to top ]

When you think of HTML tags it is helpful to think that there are three type or kinds:

  1. those that always work by themselves, like <HR> or <BR>
  2. those that always work in pairs like <BODY> and </BODY>
  3. those that can work in pairs but don't have to, like <P> or <LI>

When you use tags that need to be closed, you must remember to place the closing tag in the appropriate place. Some browsers will compensate for your error if you don't but others will not be so kind and your page may end up looking bad. If your browser covers for your errors you may not even realize your code is bad. MSIE is the worst for this, compensating for many errors on the fly. If you test your page or auction only in MSIE you may find many other people have problems seeing what you designed.

It's always the right time to use good code!

[ back to top ]

The terms upload and download seem to cause confusion for a lot of people. It's probably because they have seen one or the other used to refer to file transfers but never had the meaning explained to them. Some people use one or the other to signify any file transfers and some people use the two words interchangeably. In fact, there is a correct definition for each term:
uploading/downloading
When you are sending a file from your computer to a server (or any other computer) you are 'uploading' (the server is thought of as 'above' you) and when you are receiving a file from a server (or any other computer) to your computer you are 'downloading'.

These terms are often misused and interchanged. Using them wrong is like saying "I am filling the bucket" when what you mean to say is "I am emptying the bucket".

When thinking about placing image files in your auction listing on eBay, upload and download is a matter or perspective. If you refer to your placing the files, you might say, "I am uploading files to eBay." If you refer to eBay collecting the files from your computer you might say, "eBay is downloading files from my computer." The same process can be either uploading or downloading depending on the point of reference.

Perhaps an easier way to grasp this is to associate uploading and downloading with giving and taking. I am giving files is the same as I am uploading files. I am taking files is the same as I am downloading files. He is giving files to my computer is the same as he is uploading files to my computer. He is taking files from my computer is the same as he is downloading files from my computer.

It's always the right time to use good code!

[ back to top ]

Sometimes you want to highlight text to make a point or for any other purpose. The new in line STYLE attribute allows for many fun constructions. These are not fully supported in most new browsers yet, although that is changing quickly with each new release. Remember, though, that older browsers will not display many of these features at all!

Here are a couple of examples with code you can easily modify for your own use. Move your mouse over and along these lines of bold text:

This is an example of changing the color of text using a MouseOver.

<B>This is an <SPAN onmouseout="this.style.color='black';" onmouseover="this.style.color='red';">example</SPAN> of changing the color of text using a MouseOver.</B>

This is an example of highlighting the background color of text using a MouseOver.

<B>This is an <SPAN onmouseout="this.style.background='white';" onmouseover="this.style.background='red';">example</SPAN< of highlighting the background color of text using a MouseOver.</B>

It's always the right time to use good code!

[ back to top ]

If you would show your HTML code like this:

<IMG SRC="http://www.somepicturehost.com/yourspace/somepix.jpg">

on chat boards or other examples, instead of trying to explain how you used round brackets instead of the correct ones or put spaces in or some other convoluted process so the chat board will display rather than process what you type, it will be easier for the person you are helping to understand. It is confusing enough for someone new to HTML to understand the proper tags without trying to figure out what to leave out or put in or to space or not to space.

You can display HTML tags on chat boards and in me pages, auction listings or other web pages by using &lt; (ampersand el tee semi-colon) for the left bracket (remember it easily as the el tee part is for LESS THAN) and &gt; (ampersand gee tee semi-colon) for the right bracket (remember it easily as the gee tee part is for GREATER THAN).

To recap, that's:

&lt; = <

and

&gt; = >

Give it a try next time you post. A lot of people will be grateful for the help you offer and even more grateful if you make it easy to understand.

It's always the right time to use good code!

[ back to top ]

The OBJECT tag is still allowed by eBay (though I cannot for the life of me think why since there is at least one CERT alert issued in its regard) when the IFRAME tag is not, but it is not without it's problems. Often, and for no apparent reason, it forces the viewer to the auction list page only, and not the auction listing itself.

I've been poking around for the reason for this and suspect it is due to the failure to use the TYPE attribute appropriately. You might want to be sure that attribute is included like this:

<OBJECT TYPE="text/html" ALIGN="baseline" DATA="http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&include=0&userid=eBayUserID&sort=3&rows=200&since=-1" WIDTH="600" HEIGHT="250" BORDER="1"></OBJECT>

Further, OBJECT is problematic because although it is now a fully certified real HTML tag, it used to be a browser specific tag with a completely different set of attributes. Older MSIE browsers may render it differently and older Netscape and others not at all. You can help older browsers that don't recognize it by using the full tag pair, both the <OBJECT> tag and the closing </OBJECT> tag with this text in between:

<A HREF="http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=ebayuserid&rd=1">click here to see my other auctions</A>

This will only show up (and instead of the full chart) if the OBJECT tag is not recognized by the browser.

(in both examples above replace the part in red with your own eBay user ID)

It's always the right time to use good code!

[ back to main | back to top ]


Copyright © 2002 by Stephen B. Henry