Below you will find a Table of Basic HTML code (Part 1.) for quick reference along with links at the bottom of the table to several extensive HTML references, two of which are a must visit: Annabella's HTML and About.com's HTML/XHTML/XML.  Following this table are several more advanced Tips for which user questions have been addressed over time.  This page will be updated as other tips are added.

For anyone who would like to post the Basic HTML Table or a smaller Link Table to this page for the purpose of answering someone's basic HTML question, the Copy & Paste HTML can be found Here.


Part 1.   Table of Basic HTML;
Part 2.   Posting Copy & Paste HTML;
Part 3.   Use of Wide Tables (width=100%) in eBay Auctions;
Part 4.   Tip on Using Small Fonts;
Part 5.   Opening a Link in a New Window;
Part 6.   Why Specify Height & Width in Image Statements?
Part 7.   Are you getting the most from your "broadband" Service?
Part 8.   HTML for Lists


_

Basic HTML for Text, Images, HyperLinks & Tables
HTML to UseResult with Explanation
Text HTML - More Examples
<b>Your Bold Text</b>  =    Your Bold Text    Note: Be sure to use closing tags i.e. </b>
<i>Your Italic Text</i>  or <s>Strike Through Text</s> =    Your Italic Text or Strike Through Text
<u>Your Underline Text</u>  =    Your Underline Text
<b><font color=red>Your Bold Red Text</font></b>  =    Your Bold Red Text
Use <br> for Line Breaks & <p> for Paragraphs =    Note: No Closing tags are required for these two codes.
Image Source Specification - More Examples
<img src="http://YourUrl/YourImage.gif">  =    Example HTML code - Note: use space between <img and src= & this is case sensitive.  Use YourImage.gif or .jpg
<img src="http://pics.ebay.com/aw/pics/mask.gif">  =        Example showing eBay's shades
<img src="http://pics.ebay.com/aw/pics/mask.gif">
<img src="http://pics.ebay.com/aw/pics/mask.gif"> 
=          Example images Side by Side.  For Stacked Images use <br> or <p> between image source statements
HyperLink Source Specification with Text or Image - More Examples
<a href="http://www.ebay.com">Link Text</a>  =   Link Text   Example Link to eBay's Home page.  Note: use space between <a and href=
<a href="http://www.ebay.com">
<img src="http://pics.ebay.com/aw/pics/mask.gif"> </a> 
=       Example Link to eBay's Home Page using image for link.  Specify border=0 after .../mask.gif" border=0> for no border around image.
Basic Table & HTML Tutorial Links - More Examples
<table border=1><tr>
<td>Cell One</td> <td>Cell Two </td>
</tr></table> 
Cell One Cell Two
=    Simple Two Cell Table.  tr = table row, td = table data.
HTML Help Links:   | Annabella's HTML | Fonts & Colors | Images | Aligning Images | HyperLinks |
| Link Basics | Quick Tables | Basic Tables | HTML 4 eBayers | Tips & Tricks | HTML/XHTML/XML | Red-PT's Tips |





Posting Copy & Paste HTML

For those wanting to post direct Copy&Paste HTML on screen without the use of spaces or *s etc. and the need to explain those substitutions:  Use   &lt;    to substitute for each opening tag  <   in each tagged set of HTML.  

Example, typing the following:

&lt;a href="http://www.ebay.com">&lt;img src="http://pics.ebay.com/aw/pics/mask.gif">&lt;/a>

Will show up on screen as:

<a href="http://www.ebay.com"><img src="http://pics.ebay.com/aw/pics/mask.gif"></a>

Which when copied will result in a hyperlink to eBay.com using the mask gif as the link:

Note: if you need to post &lt; on screen the character code or entity name for the & must be used which is &#38; or &amp; ,respectively, and would be &#38;lt; or &amp;lt;   Other iso8859-1 HTML Symbols & Codes can be found here.

_

Use of Wide Tables (width=100%) in eBay Auctions

100% width tables work fine in eBay auctions without scrolling off to the right as long as you begin your auction html description with the closing blockquote tag  </blockquote>   This results from the fact that eBay uses a <blockquote> statement in their code immediately before the insertion point of the auction html that we post, therefore using a </blockquote> will negate the indentation that the eBay blockquote invokes.  A blockquote inserts a 40 pixel indent on both the left and right margins, however, if you're using a large table % width that encroaches on the 40 pixels that the blockquote invokes then the table will begin to scroll off to the right.  I have noticed that some people begin their auction html with a blockquote statement which in conjunction with the eBay blockquote is in effect a double blockquote that invokes an 80 pixel indent on both the left and right margins, thus an even smaller width table is required so as not to be affected by the blockquote margins as in the 80%to 85% widths.  This post shows the results of two blockquote statements, the text body here with the first and the 3 auction links below with the second.  Text shows the right margin indent but a table with a width of 100% will display with the browser's original width plus a 40 pixel right scroll off for a single blockquote or an 80 pixel right scroll off with a double blockquote.  Examples:  100% Table if used with </blockquote>;  100% Table preceded by 1 blockquote (as occurs in eBay auction format);  and a 100% Table preceded by 2 blockquotes (as would occur if one uses a blockquote at the beginning of their auction html).

Here are three examples of wide tables used in eBay auctions.  These examples all begin with </blockquote> statement and use a 100% width table statement.

1).  Collectible Two Rows
2).  Book Two Rows
3).  Book Two Columns
In Summary, if you want to use wide tables in your auctions, i.e. 100% width tables, use a closing  </blockquote>   tag at the beginning of your auction html.

_

Tip on Using Small Fonts

HTML Hint:  When using a small font size as in <small> or <font size=1> or <font size="-1"> etc. specify a Verdana font face, i.e.  <font face=verdana>    a common installed proportional font as is Arial, Helvetica and Times etc. that has a much better proportional spacing for small font sizes than do most others.  Also note, depending on the default browser font size you have selected, that at several resolutions a bold Arial font will not show up as bold, whereas the Verdana does even in the smallest sizes.

Several examples:

Font FaceFont Size=1Font Size="-1"Font size="-2"Font Size is <small>
Arial Font Size of 1 Font Size of -1 Font Size of -2 Font Size of Small
Times Font Size of 1 Font Size of -1 Font Size of -2 Font Size of Small
Comic Sans MS Font Size of 1 Font Size of -1 Font Size of -2 Font Size of Small
Helvetica Font Size of 1 Font Size of -1 Font Size of -2 Font Size of Small
Verdana Font Size of 1 Font Size of -1 Font Size of -2 Font Size of Small
Arial bold Font Size of 1 Font Size of -1 Font Size of -2 Font Size of Small
Verdana bold Font Size of 1 Font Size of -1 Font Size of -2 Font Size of Small


_

Opening a Link in a New Window

Targeting to Open a Window

The following is quoted from about.com at:  http://html.about.com/compute/html/library/weekly/aa030600b.htm

"One of the side benefits that came out of the frames HTML is the ability to open a link in a brand new page. Using the target attribute will open the link as a full-sized, fully-functional new window.

Normally, you use the target attribute (of the anchor (a) tag) to open links in a frame already on the Web page. The frames are named in the frameset, and the target then opens the link in the named frame.

But if you target a frame that doesn't exist, the browsers will open a brand new browser Window. For example, you can go to the first page of this article by clicking here. I have targeted the frame "new_page". Because that doesn't exist, the browser will open the link in a new window, and call that window "new_page". <a href="aa030600a.htm" target="new_page"> Every link that is targeted to the "new_page" window will open in the same new window.

If you want every link you write to open in a different new window, you could give them all different names, or you could use the special target "_blank". If you put the tag <base target="_blank"> in the head of your page, all links on that page will open in a new window."

This link will open an example of the copy & paste Basic HTML Table, copied from this page, in a new browser window by using the following html:

<a href="http://gmanzer.home.sprynet.com/C&PBasicTrial.htm" target="new_page">link</a>

_

Why Specify Height & Width in Image Statements?

The primary reason for specifying both height and width (in pixels) in an image source statement <img src="..."> is to provide the browser with the exact size that will be necessary to display the image and allow the page to continue to load even as the image is being downloaded, i.e. all the remaining html text will continue to load even though the image may not have finished downloading.  This results in quicker page loading without the delays that are observed in loading a long page with many images that have not used height and width specifications, thus allowing the reader to continue reading the page while the images are still downloading.  Example:

<img width=256 height=340 src="http://yoururl.com/BookCover.jpg">

Another tip that will make the use of this additional HTML easier, is to add the width and height to the image file name.  For example, instead of saving an image file that you want to call BookJacket in a gif format with a width of 274 and a height of 360 with the filename of BookJacket.gif save it as BookJacket274x360.gif.  These parameters are readily easy to obtain from browsers and graphics viewing or editing software.  In Netscape, right clicking on an image and using View Info or View Image will yield these image parameters or in I.E. right clicking and selecting Properties will also yield the same.  The next time you use this file you will already have the dimensions available to enter into the image source statement.  Specifying just one of the two size parameters does not facilitate continued page loading while the image is downloading.  It is important to specify both as shown below.  Example:

<img width=274 height=360 src="http://yoururl.com/BookJacket274x360.gif">

A note on image reduction:  although it is not the most efficient method of image reduction for several reasons, many use HTML width and/or height specifications to reduce the displayed size of an image by specifying either a smaller height or width.  To take advantage of quicker page loading both width and height should be used.  Example for a 50% displayed size reduction of BookJacket274x360.gif:
<img width=137 height=180 src="http://yoururl.com/BookJacket274x360.gif">

Two disadvantages of HTML image reduction are: a). image resolution and clarity which are best obtained in graphics software reduction, and b). file size (in bytes) and download time remain the same even though the displayed image size is smaller.

_


Are you getting the most from your "broadband" Service?
If you haven't speed tested your connection, do it!  Your installer likely didn't may not have.  The links below can quickly get you up to speed.  If not already enabled, you will have to enable Java in your browser for the speed and tweak tests, and if you're using a firewall, you will have to make your connection pingable for the tweak test.  Here is the formula for a quick tweak:

Browse Tools + Speed test + Tweak Test + Tweak info + Download DrTCP + change RWIN + Reboot = Faster Surfing

Or if you're in a real hurry:    ( Where RWIN = Avg. ping time in ms X 1.5 X Advertised download speed in kbps ÷ 8 )

Tweak Test + Download DrTCP + change RWIN + Reboot = Faster Surfing


BroadbandReports.com
Check out the links at right for all you need to tune-up your connection.
Broadband Tools
Speed Test
Tweak Test
Tweaks with DrTcp
DrTcp Downloads


Results I've had with this quick and easy tweak follow for Win 98:

Cable Connection:
Service: 3000/256 kbps
DSL Connection:
Service: 1536/160 kbps
Before:
Download: 741 kbps
Upload: 213 kbps
After:
Download: 3018 kbps
Upload: 247 kbps
Before:
Download: 214 kbps
Upload: 136 kbps
After:
Download: 1187 kbps
Upload: 137 kbps
Net Increase:  4.1  times Net Increase:  5.5  times

Results I've had with this quick and easy tweak follow for Win XP:

Cable Connection:
Service: 3000/300 kbps
DSL Connection:
Service: 1536/160 kbps
Before:
Download: 1049 kbps
Upload: 147 kbps
After:
Download: 3280 kbps
Upload: 500 kbps
Before:
Download: 1172 kbps
Upload: 315 kbps
After:
Download: 2463 kbps
Upload: 417 kbps
Net Increase:  3.1  times Net Increase:  2.1  times




Cable speed test on 9/16/07, now 2.4 x faster than original tweak.

_


HTML for Lists

Bulleted Lists: <ul> begins a bulleted, indented list. Each item in the list is then prefaced with the <li> tag. It is not necessary to insert a break at the end of each line -- the <li> tag automatically creates a new line.

The type attribute can be used to set the bullet style on UL and LI elements. The permitted values are "disc", "square" or "circle". The default generally depends on the level of nesting for lists.
  • with <li type=disc>
  • with <li type=square>
  • with <li type=circle>

<ul>
<li>Nascar
<li>Cart
<li>F1
<li>IRL
</ul>
  • Nascar
  • Cart
  • F1
  • IRL
  • Nascar
  • Cart
  • F1
  • IRL
  • Nascar
  • Cart
  • F1
  • IRL


Numbered Lists: <ol> begins a numbered, indented list. Each item in the list is then prefaced with the <li> tag. You need to close the list with the </ol> tag. Note: You can expand the <ol> to specify the TYPE of numbering:

<ol> 1  (decimal numbers: 1, 2, 3, 4, 5, ...)
<ol type="a"> a  (lowercase alphabetic: a, b, c, d, e, ...)
<ol type="A"> A  (uppercase alphabetic: A, B, C, D, E, ...)
<ol type="i"> i  (lowercase Roman numerals: i, ii, iii, iv, v, ...)
<ol type="I"> I  (uppercase Roman numerals: I, II, III, IV, V, ...)

<ol>
<li>
Nascar
<li>Cart
<li>F1
<li>IRL
</ol>
  1. Nascar
  2. Cart
  3. F1
  4. IRL
  1. Nascar
  2. Cart
  3. F1
  4. IRL
  1. Nascar
  2. Cart
  3. F1
  4. IRL
  1. Nascar
  2. Cart
  3. F1
  4. IRL
  1. Nascar
  2. Cart
  3. F1
  4. IRL


Nested Lists: A nested list begins in the same way as an bulleted list. The nesting (or subsequent indenting of the list) is created by typing the <ul> tag several times. You must close the set with the </ul> tag, repeating once for every time that the <ul> tag is used.

<ul> <li>Nascar
<ul> <li>Cart
<ul> <li>F1
<ul> <li>IRL
</ul> </ul> </ul>
  • Nascar
    • Cart
      • F1
        • IRL


Definition Lists: Definition lists differ from other lists in that they do not use the <li> tag, and no "bullet" appears at the beginning of each listed line. There are 3 tags used within a definition list:

<dl> Begins the list. The list is closed with the </dl> tag.
<dt> Is the term to be defined.
<dd> Is the definition.
<dl> begins the list
<dt> Nascar
<dd> Founded more than 50 years ago,...
</dl> ends the list

Nascar
Founded more than 50 years ago, NASCAR has become one of the hottest spectator sports in the world. In the years following World War II, stock car racing began to grow. But there was very little organization and no consistency in the rules between tracks.
Bill France Sr. promoted racing events on the famous beach course at Daytona Beach, FL. France saw the sport needed organizing and so started the National Association for Stock Car Auto Racing (NASCAR) in 1947. Under the direction of Bill France Sr. and later his son, Bill France Jr., NASCAR has become the fastest growing spectator sport in the 1990s.







Honesty.com Counters
Bookmark ME
Other Stuff