HTML tutorial

The following page is a mirror of a wonderful help page by Ed O'Brien. It is copyright 1999-2001 by Ed O'Brien and Ed has allowed Boomspeed.Com to run this mirror page. Thanks Ed!

MY COPY AND PASTE HTML PAGE FOR EBAY
eobcards@eobcards.com

Copy any of the HTML codes and paste them into your ebay description box. Then just add your descriptions. If you want to use this stuff to create a webpage Click here.

How to copy & paste. What is a URL?

NOTE
Size and color can be changed to meet your needs.
Everything must be pasted into the description box.
If you want the "camera icon" with your listing, you should add a small picture in the "Picture URL" box.
Click here to get some color codes for your text or background.
To start a new line add <BR>.
To add spaces below your lines or pictures add <BR><BR>. The more you add <BR>, the more spaces you will get.
Pictures, backgrounds and sound files must be uploaded to your server to use, click here to learn how to do it.
Be sure you only have http:// once at the beginning of your URL.

Table of contents

Add A Picture
Add 2 Pictures Side By Side
Add 2 Pictures Vertical
Add 3 Pictures Vertical
Align Your Pictures
Backgrounds (Full Page)
Background Colors (Full Page)
Backgrounds In A Table
Basic Text Color & Size
Bulleted Lists
Center Your Text & Pictures
Clickable Buttons
Colored Backgrounds In A Table
Cool Trick 1
Cool Trick 2
Drop Down Menu
e-mail Link
e-mail Link Using A Picture
Extra Large Text
Font Styles
Using An HTML Page On eBay
Link To Another Page Or Picture
Change Your Link Color
Link To Your Seller Page
Make A Picture A Link
Misc. HTML Codes
Picture In The Location Box
Sounds
Sounds You Can Turn On & Off
Scrolling Textbox
Two Column Table
Three Column Table
Another Three Column Table
Sample Description #1
Sample Description #2
Sample Description #3
Tables For Beginners
Understanding Tables
Spanning Columns & Rows
Table Templates
The Ultimate Table
Practice Your HTML On Notepad

<b>BOLD</b>
BOLD <I>ITALIC</I>
ITALIC <U>Underlined</U>
Underlined <strike>STRIKE</strike>
~~STRIKE~~

<b><I>BOLD And Italic</I></b>
BOLD And Italic <b><I><U>BOLD, Italic and Underlined</U></I></b>
BOLD, Italic and Underlined

<font color=red size=+2>RED LETTERS</font>
RED LETTERS

<font color=red size=+5>BIG RED LETTERS</font>
BIG RED LETTERS

Center Your Text & Pictures
Use this in the description box.
To center a picture you add in the "Add URL" box, put this
<center><center><center>
At the very bottom of your description in the description box.

<center>CENTERED</center> CENTERED
<center><img src=http://YOUR PICTURE URL></center>

Back to table of contents

<center><font color=blue size=+2>CENTERED BLUE LETTERS</font></center> CENTERED BLUE LETTERS

<center><font color=green size=+2><b>BOLD CENTERED AND GREEN</b></font></center>
BOLD CENTERED AND GREEN
Back to table of contents

Extra Large Text

<font style="font-size: 200pt" color=blue>A</font>

A
Back to table of contents

Link to another page or picture

<center><font size=+1><a href="http://ERASE THIS AND PUT PAGE URL HERE">Click here</a>Type your text here</font></center>

Click here to go somewhere else
Back to table of contents

Change Your Link Color

<center><a href=http://PAGE_URL_GOES_HERE><font color=red>Click here</font></a></center>
Click here
Back to table of contents

Link to your seller page

<center><font size=+2><a href="ERASE THIS AND PASTE YOUR SELLER PAGE URL HERE">VIEW MY OTHER AUCTION ITEMS</a></font></center>

VIEW MY OTHER AUCTION ITEMS
Back to table of contents

Add a picture

<center><img src="http://YOUR PICTURE URL"></center>

Back to table of contents

Two pictures side by side

<center><img src="http://YOUR PICTURE URL"> <img src="http://YOUR OTHER PICTURE URL"></center>

If your pictures are large, sometimes they will be forced to show one on top of the other. Keep in mind that other viewers may have different size monitors and use different monitor settings. If the pictures are too wide to fit on a small screen, you can make them fit on all monitors without scrolling like this:

<img src="http://YOUR PICTURE URL" width=48%>
<img src="http://YOUR OTHER PICTURE URL" width=48%>

Be sure you add </blockquote> to the top of your description
If you still want them side by side and don't care if the screen scrolls copy the code below and paste it in the description box. Then add your picture URL. If you want to put space between them, put your cursor in the middle between > and < Now all you have to do is hit your space bar and move the URL's apart. DON'T HIT YOUR ENTER KEY, they must be touching and seperated using your space bar only. You don't need to put anything in between. The further you move them apart, the further apart your pictures will be. This also works for more than two pictures.

<pre> <img src="http://YOUR PICTURE URL"><img src="http://YOUR PICTURE URL"> </pre>
Back to table of contents
Arrange Your Pictures Using Tables

Two pictures vertical

<center><img src="http://YOUR PICTURE URL"><br><br> <img src="http://YOUR OTHER PICTURE URL"></center>

Back to table of contents

Three pictures vertical

<center><img src="http://YOUR PICTURE URL"><br><br> <img src="http://YOUR OTHER PICTURE URL"><br><br> <img src="http://YOUR OTHER PICTURE URL"></center>

Back to table of contents

Make a picture a link

<center><a href="http://DESTINATION PAGE URL"> <img src="http://YOUR PICTURE URL"></a></center>

Make a picture a link without a border

<center><a href="http://DESTINATION PAGE URL"> <img src="http://YOUR PICTURE URL" border=0></a></center>

Back to table of contents

Below are 4 options for clickable pop up e-mail boxes. The first one is a standard box, the second one has the subject line already filled in by you and the third one is handy if you want to know where the e-mail is sent from. The fourth one is a combination of the second and third. Instead of text, you can use a picture by erasing "E-MAIL ME" and inserting the picture URL like this: <img src=http://YOUR PICTURE URL>
IMPORTANT Be sure to include all the quotation marks and < and > where I placed them.

<center>
<a href="mailto:YOUR E-MAIL ADDRESS">E-MAIL ME</a></center>
E-MAIL ME

<center>
<a href="mailto:YOUR E-MAIL ADDRESS?subject=YOUR SUBJECT"> E-Mail Me</a></center>
E-Mail Me

<center>
<a href="mailto:YOUR TEXT<YOUR E-MAIL ADDRESS>"> E-MAIL ME</A></center>

E-MAIL ME

<center> <a href="mailto:YOUR TEXT<YOUR E-MAIL ADDRESS>?subject=YOUR SUBJECT"> E-Mail Me</a></center>

E-Mail Me
Back to table of contents

<center><a href="mailto:YOUR E-MAIL ADDRESS">
<img src="http://YOUR PICTURE URL"></a></center>

Back to table of contents

Full page backgrounds
Notice: you have to add the URL twice.

<style>  </style> <body background=http://YOUR BACKGROUND URL>
Back to table of contents

Full Page Background Colors
NOTE:
You must make a small colored square in your paint program. Convert it to a .jpg or .gif file, and upload it to your server the same way you would upload a background.

<style>  </style> <body background=http://YOUR BACKGROUND URL>
Back to table of contents

Sounds

<embed src=http://YOUR SOUND URL loop=true autoplay=true hidden=true>

Back to table of contents

Sounds you can turn on & off.
AUTOSTART=true will start the music when the page is loaded.
Loop=false will only play the sound once.

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

Sounds you can turn on & off.

Click here to turn on the sound.
<a href="http://YOUR SOUND URL">Click here</a> to turn on the sound.

Back to table of contents

Scrolling Text Box

<center><form method="get" target="_top"> <textarea name="terms" cols="32" rows="5" wrap="hard"> YOUR TEXT GOES HERE</textarea></form></center>

You can set the width by adding to or subtracting from the cols= the higher the number the wider the box will be. You can also set the height with rows= The higher the number the more rows you will have. The box will not scroll unless there is more text than can be displayed in the box. Try it out, you can put all sorts of information in the box. Be careful of spaces, unlike most HTML two spaces will show if you leave two spaces in the text.

Back to table of contents

Drop Down Menu

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

Back to table of contents

<center><FORM> <INPUT TYPE="button" value=" YOUR TEXT GOES HERE " onClick="parent.location='PAGE URL GOES HERE'"> </INPUT></FORM></center>

Back to table of contents

Bulleted Lists.

Unordered List

What You Type What You Get

<ul>Unordered list <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ul>

Unordered list
Item one
Item two
Item three
item four
Item five

Unordered List Square Variation

What You Type What You Get

<ul type="square">Unordered list <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ul>

Unordered list
Item one
Item two
Item three
item four
Item five

Unordered List Circle Variation

What You Type What You Get

<ul type="disc">Unordered list <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ul>

Unordered list
Item one
Item two
Item three
item four
Item five

Ordered List

What You Type What You Get

<ol>Ordered list <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ol>

Ordered list
Item one
Item two
Item three
item four
Item five

Ordered List Roman Numerals

What You Type What You Get

<ol type="I">Roman Numerals <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ol>

Roman Numerals
Item one
Item two
Item three
item four
Item five

Ordered List Capital Letters

What You Type What You Get

<ol type="A">Capital Letters <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ol>

Capital Letters
Item one
Item two
Item three
item four
Item five

Ordered List Lower Case Letters

What You Type What You Get

<ol type="a">Lower Case <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ol>

Lower Case
Item one
Item two
Item three
item four
Item five

Ordered List Example

What You Type What You Get

Ordered List
Item one

First

One
Two

Three
Four

Second

Five
Six

Seven
Eight

Item Two

First

One
Two

Back to table of contents

Put A Picture In The Location Box

You can add a picture in the location box the same way you put a picture in the Description box, using <img src=http://Your_Picture_URL>
The problem is, most URL's are too long to fit in the description box with the HTML needed to display the picture. Fortunately other HTML codes will work in the location box.
<font color=red size=+5>Florida</font> will give you Florida
Don't use quotation marks (") in the location box or the Add Picture box.

Back to table of contents

Cool Trick 1

Want to put a small logo or picture at the top of your auction item next to the title? This code makes it possible for you to do that.

<div style="position: absolute; top: 102px; left: 18px">
<img src=http://your_picture_URL.jpg></style></div>
The picture will show on the preview page but won't be in the correct location until the auction is submitted.

Back to table of contents

Cool Trick 2

Want to put a scrolling box with all your current auction items on every one of your auctions? This code makes it possible for you to do that.

<IFRAME height=250 marginHeight=0 marginWidth=0 scrolling=yes src="http://cgi6.ebay.com/aw-cgi/eBayISAPI.dll?ViewListedItems&userid=YOUR USER ID GOES HERE&sort=3&since=-1&page=1&rows=0" width="100%"></IFRAME>

Just replace YOUR USER ID GOES HERE with your eBay User name or e-mail address. Note this doesn't work on all browsers. Browsers that don't support this code will see nothing. If you don't see the box below, your browser doesn't support this code.

Back to table of contents

Misc. HTML Codes

These only works in Internet Explorer Color & size of text can be changed to meet your needs.

<marquee>MARQUEE</marquee>
MARQUEE

<marquee direction=right>MARQUEE</marquee>
MARQUEE

<marquee behavior=alternate>MARQUEE</marquee>
MARQUEE
<center><marquee behavior=alternate width=50%> MARQUEE</marquee></center>
MARQUEE
<marquee direction=up height=50>MARQUEE</marquee>
MARQUEE

<marquee direction=down height=50>MARQUEE</marquee>
MARQUEE

<marquee direction=down height=50 behavior=alternate>MARQUEE</marquee>
MARQUEE

Replace your text with a picture URL

<marquee><img src=http://Your picture URL></marquee>

<marquee direction=up height=50 behavior=alternate><img src=http://Your picture URL></marquee>

<marquee direction=right width=40%><img src=http://Your picture URL></marquee> <marquee width=40%><img src=http://Your picture URL></marquee>

To center a picture you put in the "Add Picture" box, Add this to the bottom of the "Description" box

<CENTER>
<CENTER>
<CENTER>

This only works with Netscape

<BLINK>BLINK </BLINK>
BLINK

This will eliminate the white space next to your description if you add it to the top of your description

</BLOCKQUOTE>

Back to table of contents

Colored Backgrounds In A Table

<center><table border=2 width=85% cellpadding=8 bgcolor=yellow><tr> <td align=center><font color=blue size=+2>YOUR TITLE</font></td></tr> <tr><td align=center><font color=blue size=+2> YOUR DESCRIPTION GOES HERE</font> </td></tr></table></center>

YOUR TITLE

YOUR DESCRIPTION GOES HERE, YOUR DESCRIPTION GOES HERE, YOUR DESCRIPTION GOES HERE

Back to table of contents

Backgrounds In A Table

<center><table border=2 width=85% cellpadding=8 background=http://YOUR BACKGROUND URL><tr> <td align=center><font color=blue size=+2>YOUR TITLE</font></td></tr> <tr><td align=center><font color=blue size=+2> YOUR DESCRIPTION GOES HERE</font> </td></tr></table></center>

YOUR TITLE

YOUR DESCRIPTION GOES HERE, YOUR DESCRIPTION GOES HERE, YOUR DESCRIPTION GOES HERE

Back to table of contents

<center><table border="0" width="70%" cellpadding="10" bgcolor="BLACK"> <tr><td valign=middle><font color="WHITE" size="+2" face="comic sans ms"> YOUR TEXT GOES HERE</td> <td align=center> <img src="http://YOUR PICTURE URL"> </td></tr></table></center>

Text on the left side.

Picture on the right.

Back to table of contents

<center><table border="0" width="85%" cellpadding="10" cellspacing="10" bgcolor="BLACK"> <tr><td valign=top><font color="WHITE" size="+2" face="comic sans ms"> Text on the left side.<br><br>Picture in the middle.</td> <td align=center><img src="http://YOUR PICTURE URL"></td> <td valign=bottom><font color="WHITE" size="+2" face="comic sans ms"> And more text on this side</td></tr> </table></center>

Text on the left side.

Picture in the middle. And more text on this side

Back to table of contents

<center><table border="0" width="85%" cellpadding="10" cellspacing="10"> <tr><td valign=top><font color="BLACK" size="+2" face="comic sans ms"> Text on the left side. Picture in the middle.</td> <td align=center><img src="http://YOUR PICTURE URL"></td> <td valign=bottom><font color="BLACK" size="+2" face="comic sans ms"> And more text on this side</td></tr> </table></center>

Text on the left side. Picture in the middle. And more text on this side

Back to table of contents

<center><table border="3" width="80%" cellpadding="8" bgcolor=gold><tr><td align=center> <font color=blue size=+3 face="arial"> Your Title Goes Here </font><br><br><font color=blue size=+2 face="arial"> Your description goes here. <br><br><img src=http://YOUR PICTURE URL GOES HERE> <br><br><a href=PASTE YOUR SELLER PAGE URL HERE> Click here</a> to view my other auction items<br><br> Got a question? <BR><a href="mailto:YOUR E-MAIL ADDRESS"> Click Here </a> to send me an e-mail</font><BR> </td></tr></table></center>

Your Title Goes Here

Your description goes here. Your description goes here. Your description goes here. Your description goes here. Your description goes here.

Click here to view my other auction items

Got a question?
Click Here to send me an e-mail

Back to table of contents

<center><table border="3" width="80%" cellpadding="8" bgcolor=cyan><tr><td align=center> <font color=blue size=+3 face="arial"> Your Title Goes Here </font><br><br><font color=blue size=+2 face="arial"> Your description goes here. <br><br><img src=http://YOUR PICTURE URL GOES HERE> <br><br><a href=PASTE YOUR SELLER PAGE URL HERE> Click here</a> to view my other auction items<br><br> Got a question? <a href="mailto:YOUR E-MAIL ADDRESS"> Click Here </a> to send me an e-mail <br><br><a href=http://YOUR WEBSITE URL> Click here</a> to visit my website.</font> </td></tr></table></center>

Your Title Goes Here

Your description goes here. Your description goes here. Your description goes here. Your description goes here. Your description goes here.

Click here to view my other auction items

Got a question? Click Here to send me an e-mail

Click here to visit my website.

Back to table of contents

<center><table border="3" width="80%" cellpadding="8" background=http://YOUR BACKGROUND URL><tr><td align=center> <font color=blue size=+3 face="arial"> Your Title Goes Here </font><br><br><font color=blue size=+2 face="arial"> Your description goes here. <br><br><img src=http://YOUR PICTURE URL GOES HERE> <br><br><a href=PASTE YOUR SELLER PAGE URL HERE> Click here</a> to view my other auction items<br><br> Got a question? <a href="mailto:YOUR E-MAIL ADDRESS"> Click Here </a> to send me an e-mail <br><br><a href=http://YOUR WEBSITE URL> Click here</a> to visit my website.</font> </td></tr></table></center>

Your Title Goes Here

Your description goes here. Your description goes here. Your description goes here. Your description goes here. Your description goes here.

Click here to view my other auction items

Got a question? Click Here to send me an e-mail

Click here to visit my website.

Back to table of contents

FONTS
Change the color & size to meet your needs.
Font will only work if the viewer has the font installed on their computer, otherwise they will see their default font.

<font color=blue size=+2 face="adobe minion web">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="andale mono">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="arial">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="arial black">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="artistik">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="ashley inline">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="gill sans mt shadow">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="bedrock">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="broadway">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="carlisle">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="courier">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="courier new">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="comic sans ms">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="georgia">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="glowworm">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="harlow">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="impact">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="old english">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="lucida handwriting">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="lucida sans">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="lucida console">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="lucida sans unicode">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="helvetica">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="symbol">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="times new roman">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="trebuchet ms">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="verdana">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="wingdings">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="wonton icg">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2 face="Mini Pics Lil Events">YOUR TEXT GOES HERE</font>
Your Text Goes Here

<font color=blue size=+2><I>YOUR TEXT GOES HERE</I></font>
Your Text Goes Here
Back to table of contents

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

<hr width="75%">

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

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

<hr>

<hr size="10">

<hr size="10" noshade>

Back to table of contents

Questions? | My Website | My "ME" Page

Since 05-25-99

Unordered List
What You Type	What You Get
<ul>Unordered list <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ul>	Unordered list Item one Item two Item three item four Item five

Unordered List Square Variation
What You Type	What You Get
<ul type="square">Unordered list <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ul>	Unordered list Item one Item two Item three item four Item five

Unordered List Circle Variation
What You Type	What You Get
<ul type="disc">Unordered list <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ul>	Unordered list Item one Item two Item three item four Item five

Ordered List
What You Type	What You Get
<ol>Ordered list <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ol>	Ordered list Item one Item two Item three item four Item five

Ordered List Roman Numerals
What You Type	What You Get
<ol type="I">Roman Numerals <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ol>	Roman Numerals Item one Item two Item three item four Item five

Ordered List Capital Letters
What You Type	What You Get
<ol type="A">Capital Letters <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ol>	Capital Letters Item one Item two Item three item four Item five

Ordered List Lower Case Letters
What You Type	What You Get
<ol type="a">Lower Case <li>Item one <li>Item two <li>Item three <li>item four <li>Item five </li></ol>	Lower Case Item one Item two Item three item four Item five

Ordered List Example
What You Type	What You Get
	Ordered List Item one First One Two Three Four Second Five Six Seven Eight Item Two First One Two

The following page is a mirror of a wonderful help page by Ed O'Brien. It is copyright 1999-2001 by Ed O'Brien and Ed has allowed Boomspeed.Com to run this mirror page. Thanks Ed! MY COPY AND PASTE HTML PAGE FOR EBAY eobcards@eobcards.com

The following page is a mirror of a wonderful help page by Ed O'Brien. It is copyright 1999-2001 by Ed O'Brien and Ed has allowed Boomspeed.Com to run this mirror page. Thanks Ed!

MY COPY AND PASTE HTML PAGE FOR EBAY
eobcards@eobcards.com