Note that this has the link to the Ioffer main page in it, so if you click on the Ioffer, you will go there. The html for making a link is the <9a href="yoursiteaddress">your site address ; in this context, the "A" is called an anchor. The default color for a clickable anchor is the bright blue. Again, remove the "9" and add your site address that you want people to go to instead of yoursiteaddress.

A quick and easy place to learn HTML code will be at this link Dave's interactive HTML tutorial - Learn how to code HTML! . I printed out the cheat sheet and it is a simple site to go through, designed for the non-coder to follow and learn easily. I can't say enough good stuff about this site!

A page with the mall starts with a simple idea of a single table that you end up using in different ways.

Basic HTML tags for Tables

The most basic building block you will need

Here is a code for a single cell, single row table with a border that looks like this:

this is a simple table for you

The code for this would look like the following,

<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2">
<TR>
<TD>this is a simple table for you </TD>
</TR>
</TABLE>

So, now you have one table.

Adding to the basics just a little

To increase the number of td's to look like this:

hi, my name is Sam the seller, shop at Ioffer.com

hi, my name is Suzy, the seller, shop at Ioffer.com

and the code would be:

<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2">
<TR>
<TD><P ALIGN=Center>hi, my name is Sam, the seller, shop at Ioffer.com </TD>
<TD><P ALIGN=Center>hi, my name is Suzy, the seller, shop at Ioffer.com </TD>
</TR>
</TABLE>

If you want to add more spots across, you increase the TD's; if you want another row under the first one, You use the command TR, then as many TD's as you want spots to go across.

Another step on to more

Now for a table that has more, here is a table that has 4 Td ( information area called a Table Data) in each Tr ( Table Row) :

block one information goes here	block two information goes here	block three information goes here	block four information goes here
block five information goes here	block six information goes here	block seven information goes here	block eight information goes here

your code would look like this and for more , simply add more rows (from a TR)and TDs (remember the end tag part with the / marks):


<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2">
<TR>
<TD><P ALIGN=Center> block one information goes here </TD>
<TD><P ALIGN=Center>block two information goes here </TD>
<TD><P ALIGN=Center>block three information goes here </TD>
<TD><P ALIGN=Center>block four information goes here </TD>
</TR>
<TR>
<TD><P ALIGN=Center>block five information goes here </TD>
<TD><P ALIGN=Center>block six information goes here </TD>
<TD><P ALIGN=Center>block seven information goes here </TD>
<TD><P ALIGN=Center>block eight information goes here </TD>
</TR>
</TABLE>

Always remember to check your code and size your images

Always add the TR and TD between the Table commands, check your < and > to make sure they are where they should be, and have fun. You can copy and paste any of the above. Put your information, ie - "Sam's Hardware" in where it says " Block # ??".

Watch any quote marks you use, if there is a goober on your page, check your tags (< and >) and your quotes as just one missing will mess it up. I often will put each piece of code on a seperate line as I code so it is easy to look at (for me) for any errors. This makes it not as pretty as making it all indented and such, but since I just started to learn, and it's my code, who cares?

When using images, it is best to keep them in a certain size group to keep your table cells in alignment the easy way. Click on th image and look at the properties so you may see the size of the image. If needed, reduce evenly to fit, ie- if image is 220 wide by 170 tall and you are using 150 by 150 spaces, simply mark in the width and size ( look at the table below for width="nnn" height="nnn") to 150 by 100; you keep the picture in balance by subtracting or adding the same amount to both numbers of the width x height. The actual image may not be 150 x 150, but it will fit neatly in the space alloted for it.

This also helps your images load more quickly and evenly. And the quicker your page loads, the more folks will stay.

One handy item I like to use to make notes to myself or others that are looking at my code, is the use of <9!--what ever note to me I want goes in here-->, which maybe be used, without the "9", as an unseen note on your "public" page but note to yourself about where you started or finished a certain section or script or just a note that informs you about what you need to recall at that point. (When you use that tag, it will only be seen by yourself or anyone looking at the source code, not the casual viewer of your webpage.)

Other than eggs, milk and coffee lists, of course!

Adding an image and centering in each TD

Okay, you now can put the text in, but you want it to be in the middle of your cell area and also add an image? We are in a hurry, hhhm? But that is good, you will have a more interesting table with some images as well as text.

Backing up a bit on the size of the table and rows, let's just use a simple table with one cell with centered text and centered image to start, something like this:

pretty pigeon flying

The code looks like this:

<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2">
<TR>
<TD><P ALIGN=Center>pretty pigeon flying <BR>
<IMG BORDER="0" WIDTH="how wide you want the image" HEIGHT="how tall you want the image" SRC="yourpigeon"></TD>
</TR>
</TABLE>

See what is different between this cell and the others so far? All you have to do is copy and paste the new stuff in your already made table to add in the image off your host and surprise! You have it.

Fun, hhhmmm?

Use different arrangements a bit, see how it works or doesn't work for you and how it looks on the page to decide how you want your page to look. Try adding more TD's to each row or less, add more rows to the table and see what it looks like.

One Ioffer Mall template

After you play a bit with the tables above, look below and you will find a template that Boxbug made for Ioffer. Look at the way it is structured and how come it works like that. This template has a background of xmas-paper and is 4 TD's across and 5 TR's long.

This is how it looks to the viewer of your page:


Ioffer mall template with x-mas paper background

Title of Your Page Here
Subtitle can go here, or delete.

Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927
Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927
Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927
Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927
Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927	Camry® Traditional Kitchen Scale hopalong927

here is the coding for it, Thank you, Boxbug!!!

The next page will have another code that may be used in a repeated pattern as many times as you wish. This one has a slightly wider border with a color; the color is green, but change it to what ever color you like.

Pigeon Alley page 3

don't ask where page 2 is for now, it's been bad and is currently standing in the corner!!! Visit our other pages on the web, and our Ioffer.com store for many holiday specials as well. Here are the links:

Pigeon Alley Antiques & Collectibles (Contest site)

Pigeon Alley Antiques & Collectibles Ioffer Mall

copyright pigeonalley, please contact for use permissions. Thank you.