Lesson Five
Bakers’ Dozen 2.0
Let’s make a listing template with just 13 HTML tags!
Thirteen HTML Tag Elements |
|
|
<a> </a> – anchor |
<p> </p> – paragraph |
|
<br /> – break |
<table> </table> – table |
|
<div> </div> – division |
<tr> </tr> – table row |
|
<img> – image |
<td> </td> – table data |
|
<ul> </ul> – unordered list |
<h1> </h1> – heading 1 |
|
<li> </li> – list item |
<h2> </h2> – heading 2 |
|
<span> </span> – span |
|
Lesson Five
The only tags left to use are unordered list and list item. These tags are used to code a bulleted list — you know, a point form list with bullets (or dots) in front of each point. A lot of people seem to think it is cool to center the lines of a bulleted list but the whole point of the bullets is that they align on each other. HTML rules automatically indent a bulleted list. Here’s the code:
<li> These little guys are just so cute.</li>
<li> They come already paper trained — guaranteed!</li>
<li> A color for every day of the week and one to spare.</li>
<li> Never find yourself without your own personal eBay troll again.</li>
</ul>
Notice that the whole list is enclosed in the unordered list element (<ul> … </ul>) and each line of information in the list is enclosed in the list item element (<li> … <li>). Although it isn’t a requirement, I leave a space between the opening list item tag and the line of content. I find this keeps the presentation consistent across all browsers.
Here is the bulleted list added to our sample template just below the pictures:
Beautiful Muti-Colored eBay Trolls
This auction is for this rare and complete matched set of pastel eBay trolls, including bubba blue, audrey aqua, geneveve green, charlotte chartreuse, mellow yellow, ollie orange, rhonda red and peter purple. These wonderful critters will bring hours of excitement to your life as they stalk your chat board posts and leave rude messages everywhere you go. Don’t waste any time. You can have the whole set today for just one price. Bid now before someone else takes this treasure from out of your grasp. This wonderful collector’s set would make an excellent gift for that annoying person who has everything!
• These little guys are just so cute.
• They come already paper trained — guaranteed! • A color for every day of the week and one to spare. • Never find yourself without your own personal eBay troll again. TERMS OF SERVICE
US PAYMENTS: We accept US check (order held until check clears), money order, or PayPal, including credit cards.
CANADIAN PAYMENTS: PayPal is preferred. Cheques and money orders can be paid in Canada. Contact us for special instructions. ALL OTHER INTERNATIONAL PAYMENTS: We will accept only Paypal from all other countries. RESIDENTS OF KANSAS: please add 7.05% for state and local sales tax. Email any questions to: thewiz@ourhutch.com. SHIPPING: Exact postage will be confirmed after the end of the auction. We do not charge over the actual postage amount. We will gladly ship internationally. Please contact us for details. If you win more than one of our auctions, we will be happy to combine the shipping which usually saves you money. Some sellers combine shipping by adding up individual shipping rates for each auction, then subtract a buck or two. Not us. We put as much in each box as we safely can, then weigh it, calculate the shipping at the USPS website, and charge exactly what the postage is. We offer only Insured Priority Mail for this item. OTHER: All auctions are for used merchandise, sold as is, unless otherwise noted. At the end of this auction, we will email the winner with payment instructions and other details. Please watch for and read this carefully to avoid unnecessary errors. Listings | eBay Store | Send Email
I am a Trading Assistant – I can sell items for you!
Site Design, Hosting and Copyright © 2008 by Stephen B. Henry |
This completes the example listing template design using all of the thirteen tags. With the previous course, and the sample template from this course, you should be able to go over this course and make changes in the code to create your very own personal listing template design.
As always you can contact me with any questions you might have. Please feel free to come back to this course at any time in the future when you feel you need a refresher. Also be sure to check out all the other feature links on the main course home page. And, you may want to take a look at the bonus lesson below:
[ top of page ]