Visible's eBay tutorials
general eBay tutorials
- eBay Groups & Firewalls: If you can't view Group photo albums check here.
eBay auction template tutorials
- tutorials home: important introductory notes.
- tutorial #1: paragraphs.
- tutorial #2: headings.
- tutorial #3: font.
- tutorial #4: lists.
- tutorial #5: images.
- tutorial #6: links.
- tutorial #7: a simple table.
- tutorial #8: nested tables.
- tutorial #9: table rows and table cells.
- tutorial #10: put it all together. (coming soon)
important introductory notes
auction template principles
- Keep it simple. Remember that the purpose of an auction template is to present your merchandise in a clear, logical, and attractive manner. An auction template is not the best place to show off html skills. Less really is more.
- Keep file sizes small. Keep in mind that the majority of your potential customers are probably on 56K dial-up modem. If your page does not load in very few seconds people will hit the back button and you lose bidders. Try to keep image sizes small including images that are part of your template.
- Fit your customer's monitor. Keep in mind that your potential customers may have smaller monitors and use a different screen resolution that you do. Just because a template fits your screen doesn't mean that it fits everyone's screen. A good rule of thumb is to make your templates fit a 600 x 800 screen resolution. Resizable templates are probably best, but if you make a fixed template don't make it any wider than about 760 pixels. When creating a template, try looking at it in different screen resolutions to see how other people will see your page.
- Tags not to use on eBay. An auction template differs from a normal html webpage in the fact that eBay has already added the <html>, <head> and <body> tags to the auction page. It is bad html practice to duplicate these tags in your auction template. There is a real possibility that such additional tags will create problems in some browsers.
validating your html
[Optional but recommended] It is important that your page displays as intended for as many people using as many different browsers as possible. It is good practice to validate your html using the free w3c html validator. In order to validate your page you will have to include a "doctype" and the <html>, <head> and <body> tags that I just told you not to include. What I do is to include these tags while I am working on the template but I do not include them when I copy and paste the html into my auction. It's not important to know what a doctype is right now. If you want to validate your pages just use the following code as the framework for your template.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>eBay Auction Template</title>
</head>
<body>
<!-- DO NOT INCLUDE ANYTHING ABOVE HERE IN YOUR AUCTION TEMPLATE -->
<!-- BEGIN AUCTION TEMPLATE -->
Create your template here
<!-- END AUCTION TEMPLATE -->
<!-- DO NOT INCLUDE ANYTHING BELOW HERE IN YOUR AUCTION TEMPLATE -->
</body>
</html>
html FAQ
What is html?
Html is a mark-up language used for creating web pages. An auction template is simply a web page with a few missing html tags. Html "tags" are usually words (e.g. "table") or abbreviations of words (e.g. "p" for paragraph) enclosed in brackets < >. Some tags format elements on the page (e.g. <p> for paragraph) while others determine the appearance of elements (e.g. <b> for bold text).
Almost all html tags have an opening tag <p> and a closing tag </p> which is like the opening tag with an added forward slash "/". Content is usually written between the 2 tags.
Example:
<p>Type your text between the opening and closing paragraph tags.</p>
Do I need a special program?
When writing html it is best to use a plain text editor like Microsoft Notepad as opposed to Microsoft Word or similar programs. These programs add undesirable formatting elements that can mess up html code.
Creating and saving html documents.
Open Notepad and type your html. To save an html document click File > Save As. Type a File name followed by ".htm" or ".html", whichever you prefer (e.g. mypage.htm). Save as type "All Files" instead of as a text document. Now you can open the file in your browser and view it as a web page. After you do some editing in Notepad you can refresh your browser window and view the results of your html code.
Viewing html source code.
To view the html source code for your pages or any other web pages click View > Source (Internet Explorer) or View > Page Source (Netscape/Mozilla).
How to cut and paste.
On a PC use your mouse to highlight the text that you want to copy. With the text highlighted press "Ctrl" and "c" on your keyboard at the same time (copy). Then you can paste it into your document by pressing "Ctrl" + "v" (paste).
helpful reference links
- webmonkey's html cheatsheet. A simple html tags list for reference purposes.
- webmonkey's html color codes. A simple html color codes chart.
- webmonkey's special characters. A simple list of special characters.
- ranchoweb's practice board. If you need to post some html so that others can see it use this free service.
- w3c html validator. Validated pages are more cross-browser friendly.
- webmonkey intro to html. A basic html tutorial.
- w3schools. Learn html and many other web formatting and scripting languages for free.
Have a question? Post it on my forum!
First tutorial: paragraphs.
