HTML 101

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.....

Page Menu
[Paragraphs] [Font Tags] [Quotation Marks] [Bold, Italics & Underline]

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.

Example:  

Putting a line break tag here
<br>
moves the content following the tag down one line or a single carriage return. If we were to use a paragraph tag
<p>
anything coming after that tag would be moved down 2 lines.

The end result of this code would look like this:

Putting a line break tag here
moves the content following the tag down one line or a single carriage return. If we were to use a paragraph tag

anything coming after that tag would be moved down 2 lines.

That's not so hard, is it?

[Back to Top]

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.

A few examples:  

<font size="4">Font size 4</font>
<font color="green">Green colored text</font>
<font face="arial">Arial faced text</font>

Will give you this:

Font size 4
Green colored text
Arial faced text

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.

Multiple attributes in a single tag:  

<font face="arial" color="green" size="4">Green, arial, size 4 text</font>

is a much simpler way to achieve this:

Green, arial, size 4 text

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.

Seven different sizes:  

<font face="arial" color="navy" size="7">Font Size 7</font>
<font face="arial" color="navy" size="6">Font Size 6</font>
<font face="arial" color="navy" size="5">Font Size 5</font>
<font face="arial" color="navy" size="4">Font Size 4</font>
<font face="arial" color="navy" size="3">Font Size 3</font>
<font face="arial" color="navy" size="2">Font Size 2</font>
<font face="arial" color="navy" size="1">Font Size 1</font>

Results:

Font Size 7
Font Size 6
Font Size 5
Font Size 4
Font Size 3
Font Size 2
Font Size 1

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.

Does it add up?  
 <font size="7">   is the same as   <font size="+4"> 
 <font size="6">   is the same as   <font size="+3"> 
 <font size="5">   is the same as   <font size="+2"> 
 <font size="4">   is the same as   <font size="+1"> 
 <font size="3">   is the     default   
 <font size="2">   is the same as   <font size="-1"> 
 <font size="1">   is the same as   <font size="-2"> 

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.

[Back to Top]

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.

Examples:  

<font size="+1"> works the same as <font size=+1> and
<font color="navy"> works the same as <font color=navy>

but....

While <font face="Times New Roman"> works perfectly,
<font face=Times New Roman> might not work at all and will probably cause some browsers to lock up and crash.

[Back to Top]

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.

Examples:  

I want <b>these three words</b> to be in bolded text.
I want <i>these three words</i> to be italicized.
I want <u>these three words</u> to be underlined.

will give you this:

I want these three words to be in bolded text.
I want these three words to be italicized.
I want these three words to be underlined.

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.

Bold, italicized and underlined, all at once:  

I want <b><i><u>these three words</u></i></b> to be bold, italicized and underlined.

will give you this:

I want these three words to be bold, italicized and underlined.

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.

Striking through text:  

This widget can be yours for only <strike>$1.99!</strike> 99 cents!
This widget can be yours for only <s>$1.99!</s> 99 cents!

Both the <s> and the <strike> work exactly the same way. Personally, I can't understand why anyone would even use the <strike>, but this is how they each display:

This widget can be yours for only $1.99! 99 cents!
This widget can be yours for only $1.99! 99 cents!

[Back to Top]

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.

[Back to Top] [Tutorials Home Page] [HTML Tutorials]