Saturday, January 26, 2013

Building An Auction Template, Part I

I haven't seen one Ebay doll artist who won't benefit from this next series of posts.

Not one.

Ever look at your latest doll auction, and think your doll is pretty, but your auction itself is lamer than a one-legged dog?

Never fear. The HTML goddess has arrived. Together, we'll craft the template of your dreams. From scratch. Using what was installed on your computer the day you bought it. No $300 web design program necessary—in any case, those merely spawn templates that malfunction once they're on Ebay, or that contain code that is illegal for Ebay. Coding by hand isn't rocket science. You can do it. Not only can you do it, but chances are, you'll love doing it. Once the technical aspects are mastered, it becomes a highly creative process.

First off, what is HTML?

It's the language of the birds browsers.

Internet Explorer? Firefox? Google Chrome? They all speak HTML.

This blog page you're reading? It's an HTML file stored on a computer called a server. Servers are always running, and always connected to the internet. Some are owned by private individuals, who do their own hosting at home. In the instance of this blog, the server hosting it is one among thousands of other servers, all humming ominously inside a heavily-guarded Google warehouse.


Your first step towards building a template is to create a new folder on your computer. Someplace you can find. Personally, if I'm doing frequent work on something, I just keep its folder on my desktop, where I can't not find it. Then, when it's a done project, I'll file it away somewhere appropriate. Anyhow, name the folder 'Awesomest Template Evah'. Or something.

Next, let's create an HTML file.

Open Notepad. You can find it under Start > All Programs > Accessories. In the upper left corner of Notepad, click on 'File', then 'Save As...'. Now, how you save this file is important. Stay alert, my padawan. First of all, make sure you're about to save it in the folder you just created. Second of all, go to that little drop down menu, and change Text 'Documents' to 'All Files'. Otherwise it won't allow you to create an HTML file. Now, save your template as 'template.htm' or 'mermaid_doll.htm. Doesn't matter what you name it, as long as it ends with *.htm*, has no spaces, and no caps. Got that? No 'MY Mermaid Doll.htm'. Caps must be converted to lowercase, and spaces must be converted to underscore (_) or hyphen (-).

Collapse Notepad, but don't close it, and go to your 'Awesomest Template Evah' folder.

If you have successfully created an HTML file, you should see a little browser icon in there (IE, Firefox, whatever your default browser is.) Click on it. Your browser will open, but nothing will be there, because you haven't made anything yet.

Notepad is how you'll edit your HTML file. The browser is how you'll see your HTML file.

From here on out, whenever you go to work on your template, right click that icon, and select 'Open With' > 'Notepad', and then regular click on it to open it with your browser, as well.

Now, let's make a big box that will hold your entire auction.

Those of you using tables to do this? Get rid of them. They're, like, so seven years ago. Instead, use what's called a div (think of it as a divider, which divides your auction content into different segments).

Highlight the text below.

<div style="width:100%;border:5px outset pink;background-color:gray;">

<h1>Doll Title</h1>

<p>Someday, I shall be an magnificent doll auction template. What's so funny? Just wait. You'll see.</p>


Copy it (Ctrl + c) and paste it (Ctrl + v) onto Notepad. Now, save it (Ctrl + s).

Refresh your browser.

What have we here? The beginnings of a template! And it's a boasty little thing.

Notice how under the div's style, I command it to be 100% wide. That means it's gonna sprawl across the monitor, no matter how wide the monitor is. For your base div, you want that. But let's just experiment with this div for the heck of it. Replace 100% with 50%, save, and then refresh your browser. Or try 10%. Better yet, try something absolute, not influenced by the viewer's screen size. Try 600px (600 pixels wide). Then try something wider than your screen, like '6000px'. See what happens. Just mess around with the widths of this div. You know? Get a feel for it.

Umkay. Bored playing with the width yet?

Now mess with the border. Change '5px' to '10px'. Or '1px', or even 'none'. Change 'outset' to 'inset', 'double', 'groove', 'ridge', 'solid', 'dashed' or 'dotted'. Watch what happens with all these commands.

Is your heart beating faster yet?


Lets have fun with the colors of the div and the border. Here's a list of commonly supported web design colors you can use: Zoick's Background Color Selector. You can either use a color's name, like 'gray'. Or you can use a hash symbol followed by its hexadecimal number, like '#808080'.

Have fun with this a few days. Try stunning color and border combinations. Change the doll title sitting between the <h1> and </h1> tags. Change the paragraph content sitting between the <p> and </p> tags. Maybe add a few more paragraphs between more <p> and </p> tags. See what happens when you don't use paragraph tags, and instead hit 'Enter' as you normally would for the next paragraph.

In closing, I'll add that HTML is unforgiving. If you accidentally delete a colon, semicolon, or the spaces between the border commands, things won't work like you want them to. But don't let this frustrate you. Making mistakes will be crucial to your learning process. If you get totally lost, just delete everything in your HTML file, re-paste the above into it, and just start again from scratch.

Click here to continue on to the next post in this series, where we will cover putting a background in your auction.

Sara unleashed

No comments:

Post a Comment

~Anyone may post a response to this.
~Anyone may comment on this anonymously.
~No extremely vulgar remarks.
~No remarks discriminating against a person's race, age, gender, religion, or sexual orientation.
~Religious comments (such as, "I'll be praying for you!") ARE permitted here. But please be respectful of everyone's beliefs. We are a broad stroke of readers. Remarks like 'Because God says so,' will only spur an unwanted religious debate. Better to use Spock-like logic to get your point across.