|
Learning HTML Is really simple.
The best way is by actually using the code in your auction listings so that you will have a tendency to experiment a bit,
trying to acheive certain effects in your listing. Don't be afraid, you really can't break anything. If you somehow mess up the file
betond recogntion... just delete it and get another copy on eBuys USA.
Since you need to learn HTML basically to compose appealing auction listings, let's open the basic.htm file and learn about HTML tags
For simplicity, you might print out the code to basic.htm, so you can refer to it as we go along.
Get the file from Here Right Click on it, click on "View Source", it will open in notepad,
Save the notepad file in your template directory as an htm file ie: basic.htm.
And, finally Print It so you can refer to it as we go.
OK, the page starts with a <br>
<br> is really nothing more than a line feed. Just like pressing "enter" in your word processor
ends the current line and moves down to the next. So at the end of each line, where ever you want the line to "break" just type
<br>
To skip some lines just type one or more <br> Each <br> will move you down 1 line.
You can use <br> with images as well
to move images one below the other instead of side by side and to add space between pictures. More on <br> later
The next tag at the top of the file is <center>
Most html tags -<br> is one of the few exceptions - have a Start tag and an End tag
maening that the start tag starts the effect on the text following it and the end tag ends the effect.
To demonstrate the center tag, look at the example below
<center> This test is centered </center>
the text is no longer centered
As you can see, this is very simple. The Start is <center> and the End is </center>
anything -this includes text, images, tables- in between the tags will be centered. And, if you forget the End tag, your whole file will be centered.
The next item that you may want to work with is tables. Tables can be very tricky, because HTML allows you to nestle unlimited tables within tables and unless
you are experienced with html and very neat in your coding, you will be litterally pulling your hairs out.
So, we will discuss how to use tables later BUT... in the meantime, I will explain some of the table attributes that you can easily modify.
the table Start tag always starts with <table and ends with >
everything else within the tags is an attributes as explained below. Note that you do not have to have any attributes in a table tag to make a table
a very basic tag would be <table>
| Attribute |
What it means |
|---|
| width="80%" |
Table width can be from 1% to 100%, you can also us pixels ie: table width="180" for a table that is 180 pixels wide |
| border="1" |
Border can be anything from 1 to 100 or more, try different sizes until you are satisfied. For no border use border="0" |
| bordercolor=#990099 |
Bordercolor can be specified by color number or color name, as found on HTML Color Charts. |
| bordercolor="" |
bordercolor="" or leaving the attribute out of the tags altogehter, result in a light grey border like this table |
| bgcolor="ccffff" |
Specifies the background color of the whole table, if unspecified, the color is white. You can specify the color of each individual cell. |
| background="http://mysite.com...." |
Specifies an image -usually image tiles- to use in the background, you can still put text over the images |
| cellpadding="5" |
Specifies an amount of space that surrounds text or images withing a cell. Typically padding of "5" keeps text from sitting on the border of cells |
| cellspacing="5" |
Specifies an amount of space in between the cells. Not used very often. This table specifies it at "0", notice the single border |
When specifying cellspacing, even if it is cellspacing="0" the table border is a single border, as the table above
When omitting cellspacing, the table border is a double line border, as shown below, increasing the size of the border only increases the size of the outer border
The table below has a border of "3"
Also notice the difference of the table above cellpadding="10" and the table below cellpadding="5"
| Table Tags |
What They Mean |
|---|
| <table> |
<table width="100%" border="3" bordercolor="#990099" cellpadding="5" bgcolor=""> |
| <tr> |
Stands for Table Row, the table above has 9 rows. <tr> tags Start and End like most tags ie: <tr> <td> td stands for table data </td> </tr> |
| <td> |
Stands for Table Data. The rows in this table have 2 data cells. You can have as many cells as needed & you can specify the size of each one.
Also, as you can see here, data cells will expand to accomodate text, images ...... they start & end as well <td> </td>
Table Data cells have the same attributes as tables ie: width, border, bordercolor, bgcolor, background images -cellpadding & spacing is in the table attribute |
| <td background=http://...> |
You can fill a cell with any images, the code to this cell looks like this:
<td width="80%" > |
| <td align="center"> |
Table Data Cells can align their contents. Unspecified as above alignment is to the left, this cell is aligned "center" |
| <td align="right"> |
This cell is aligned "right" |
| <td bgcolor="#e6e6fa"> |
By default, the vertical alignment is in the middle of the cell. It's not necessary to specify it. middle.
We added the background color attribute to this cell: bgcolor="#e6e6fa" |
| <td valign="top"> |
This cell aligns to the top . |
| <td valign="bottom"> |
This cell aligns to the bottom . |
| <td width="20%"> |
This cell to the left is 20% wide and this cell is 80% wide.
Note: that the percentages are relative to the table width.
This cell and the 3 cells above are 50 pixels high. <td width="20%" height="50"> |
<td colspan="2">
Colspan allows you to span 1 cell across 2 or more columns. ie if we had 4 cells across, and wanted only 1 cell in this row, we would specify <td colspan="4">
In this row, instead of: <td width="20%"> Small Cell</td"> <td width="80%"> Big Cell</td"> like the rows above.
Our Code looks like: <td colspan="2">One Cell spanning 2 columns</td"> |
<td rowspan="2">
| Rowspan works colspan, but vertically. We specify the Small Cell, the Big Cell and end the row. Then, we specify a new row and only the Big cell, - the Small Cell expanded from the first to the second row - We then End the second row. |
The code looks like this: <tr> <td rowspan="2">The Small Cell <td width="80%">The Big Cell</td> </tr>
<tr> <td width="80%">Second Row & The Big Cell Again </td> </tr>
|
OK, this should enlighten you on tables -or totally confuse you. Don't try to retain this info, you can alwasy refer back to it anytime, besides
using the templates you will only need to change some of the attirbutes, so now you'll understand what they are.
We only need to cover a few more tags, like font size, color, bold, italic, underlined, and highlighted....
we will also cover image tags for your pictures & Links so you can link to other web pages or images from your auction ads.
Font Sizes:
font sizes go from 1 to 7. as shown below. the font tag looks like this <font size='1'>
This is size 1
This is size 2
This is size 3
This is size 4
This is size 5
This is size 6
This is size 7
If you don't specify a size, then the default is size 3, Unless your web page are set to make another size the default. All of our pages are set to default at size 2.
to go from default size to size 5 and the back to default, you could do this:
This is default size - <font size='5'>Now were are doing size 5. </font> Now we're back to default.
You can also kee specifying the forn size throughout you whole page
Font Color:
You can make a tag for font color only or you can make it for font size and color.
to get the color, just do a search on "Free html color charts" then, pick one that you like.
most charts will give you the Hex number which is commonly used to specify color, and the color name which is less commonly used.
the default font color is black, unless you html pages change the default. To go from black to blue you could:
Here is some black text, pretty boring isn't t? <font color='#0033ff'>and now we made it blue by using the hex code #0033ff
for blue. </font> OK, enough blue, we end the blue with an "end" font tag.
You can also use size & color as:
<font size='5' color=#0033ff>
Now the size is 5 and the color is blue, Pretty simple isn't it? </font> OK, back to normal
Bold, Italic Underlined:
Other simple attributes are: Bold which is <b>Some text that you want bold</b> and the second tag ends the attribute.
the same goes for Italic and Underlined. <i>Some text that you want in italic</i> end the Italic
ad underlined <u>Some text that you wnat in underlined</u> end the underlined
You can also combine tags, just make sure you keep the order ie; <b><u> </u></b>
<b><u> Some Stuff you want bold and underlined </u></b>
Image tags
This is how you tell the browser where to get the image that you want to display. The image must be on a web server, but not necessarily on a web site.
here is an image It's the hearts that we used in the table above.
The tag looks like this: <img src="http://www.ebuysusa.com/templates/pics/candy2-64sq.jpg"> very simply img src stands for Image Source,
then you indicate the actual web url of where the image is.
|
|
|
