Some very basic HTML lessons
Some of the more commonly asked questions about this site have to do with basic HTML so on this page I'm going to run through a few of the simpler HTML tags while slightly more complex things like tables and image uploading, hosting and linking will be covered on other pages here on auctionSupplies.com.
That said, let's get to it.....
Line and Paragraph Breaks
Probably the simplest way to make your auctions more appealing is to add line and paragraph breaks to your description. I'm pretty sure that just about everyone has come across a listing on eBay that looks like the one on this page. It's difficult to read and hard on the eyes but it's nothing that a couple of simple HTML tags can't fix. Those tags are:
<br> for a single line break like the one between these two lines, and
<p> for a double spaced break.
That's not so hard, is it?
The Font Tag
Up next is the humble font tag, which is used to change the size, color and type of text your page will display. Unlike the paragraph and line break tags above, font tags are paired, or container tags, meaning that there is an opening and a closing tag. (Paragraph tags can also use a closing tag -- </p> -- but it's not necessary.) You'll find that most HTML tags are paired, and failure to close the tags properly can result in some less than desirable results.
The <font> and </font> don't do much of anything by themselves so we need to add in some attributes. The attributes provide the elements to change the look of your text. Font attributes include size, color and face, with 'face' being the type of font, such as Times New Roman, Arial, or in the case of this page, Verdana.
Okay, but what if you want to use green arial font with a size of 4? Do you have to use three tags to achieve it? No, you can combine attributes within the tag like shown below, adding a single space between each attribute.
That ugly green sure does clash with the rest of the page, doesn't it?
So, what exactly is size four text? In basic HTML text comes in seven different sizes, 1 through 7. Font size 3 is generally the default size within a page so a size of 4 would be slightly larger text and size 2 would be slightly smaller. The example box below demonstrates the seven different sizes of arial font.
Now, before we move onto something else I'm going to teach you some whacked out math relating to font sizes. Since 3 is the default it can generally be considered a "0" (zero), so in the case of font sizes, "+1" is equal to "4" and "-2" is the same thing as "1". Confused? Yeah, me too. Check out this table for some semblance of clarification.
That makes a bit more sense now, doesn't it? If you want a slightly larger than normal text size you can use <font size="+1"> instead of <font size="4">, or <font size="+2"> rather than <font size="5">. It may be easier to remember that way.
Quotation Marks in HTML
Do you have to use the quotation marks in your HTML coding? As a rule generally no, but there are instances when they are required and I think it's better to get in the habit of using them properly even when they're not necessary. Incorrect use of quotation marks can cause some major problems on the page and if you're not familiar with diagnosing these issues the cause is pretty easy to overlook and difficult to figure out.
When are they required? If you are using a single word (or character) value like "navy" to designate a color or "4" to designate a size then the quotation marks are not necessary, but if you were to use a multi-word value such as "Solomon Islands" in your calculator (which the USPS Domestic-International calculator on this site does) or "Times New Roman" as your font of choice then you would need to use the quotation marks.
Bold, Italics and Underline
You may sometimes find that you wish to add emphasis to certain words or strings of text to set them off from the rest of your page. If so, the bold, italics and underline tags are just what you're looking for.
These three are all paired or container tags meaning that you will need to use the closing tag for each just as you do for the font tag. The tags themselves are pretty self explanitory so I won't bother trying to describe what they do and will jump ahead to the example.
Everything within the tag assumes the property of the tag. Pretty simple. Can you utilize more than one of these tags at once? Yep, you sure can.
Which brings up the subject of nested tags....I'll cover nested tags a bit more in depth elsewhere but for now let's just say that if you use more than one tag set (as we did in the example above) make sure that you close them out in reverse order to the way that you opened them. In the example above I opened the bold tag first, the italics tag second and the underline tag third. When I closed them it needed to be done backwards, with the underline closed first, the italics second and the bold last. Think of the tags as being similar to a TupperwareTM bowl set with one fitting inside the other. The bold tag would be the larger outermost bowl and the underline would be the smallest inner bowl. Will it be the end of the world if you close them the wrong way? No, but in some cases it might cause a few problems....
Before I close this tutorial I'll toss out one more tag for you to play with. It really has limited use but may come in handy every now and then, and is known as the strike or stikethrough. There are two versions of this tag, both of which seem to work universally and it is also a container tag so it needs closing. Once again the example will be fairly self explanitory so I'll cut to the chase.
Remember the long, drawn out and boring looking description at the beginning of this tutorial? Well, here's one way that it could look using nothing more than the tags you've learned on this page. Nothing too fancy, but it's a heck of a lot better than the original version.
And that's it for now......See you next time.