This N That | Just a little of everything according to my interests!

Pictures: Insert, Name, Border, Resize, Link

Copy and Paste the codes on to your page... Put your own text where it says text here... Replace URL with the http:// address you want that link to go to. To copy the codes put your cursor at the top of the text box...press CMD and A at the same time to highlight the whole code in the text box...press CMD amd C at the same time to copy the highlighted code..go to your page and press CMD and V at the same time to paste your code on your page...Be sure to delete any notes i have made in the text box.

Basic Page:

<html> <head> <title>Title of your page here</title> </head> <body> All the stuff you want on your page goes between the body tags. </body> </html>

Body Tag:

Inside the body tag <body> you can set the background, text, link and visited link colors for your page. The body tag will look like this... <body bgcolor="#color" text="#color" link="#color" vlink="#color"> ...Note replace color with the color number you wa

Background Image:

You can use an image as a background.
<body background="http://URL of Image" text="#color" link="#color" vlink="#color">

...Note replace color with the color number you want and URL with address of your image.

Put an Image on Your Page:

<img src="URL of image">

Make an Image a Link:

<a href="URL"><img src="URL of image"></a>

Line Break:

<br>...Note..use br to break a line of text or put a line of space between items on your page. You can use several<br><br><br> to give you more spaces.

Click Link Button:

Same Page Link:

<a href="#gotohere">Your text here</a>...Then just above where on the page you want to go put this...<a name ="gotohere"></a>...Note...you can replace go to here with any text you want!

So, You wanna make a Table? Here is a Table Sampler =)

THE TABLE SAMPLER

This is intended to be a tutorial by example of Tables. This covers most of the new tags in tables, though it doesn't necessarily show some of the really creative capabilities available in tables.

A BASIC 3X2 TABLE

A	B	C
D	E	F

<TABLE BORDER>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

TWO DEMONSTRATIONS OF ROWSPAN

Item 1	Item 2	Item 3
Item 4	Item 2	Item 5

<TABLE BORDER>
	<TR>
		<TD>Item 1</TD>
		<TD ROWSPAN=2>Item 2</TD>
		<TD>Item 3</TD>
	</TR>
	<TR>
		<TD>Item 4</TD> <TD>Item 5</TD>
	</TR>
</TABLE>

Item 1	Item 2	Item 3	Item 4
Item 1	Item 5	Item 6	Item 7

<TABLE BORDER>
	<TR>
		<TD ROWSPAN=2>Item 1</TD>
	    	<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
	</TR>
	<TR>
		<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
	</TR>
</TABLE>

DEMONSTRATION OF COLSPAN

Item 1	Item 2
Item 3	Item 4	Item 5

<TABLE BORDER>
	<TR>
		<TD>Item 1</TD>
		<TD COLSPAN=2>Item 2</TD>
	</TR>
	<TR>
		<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
	</TR>
</TABLE>

DEMONSTRATION OF HEADERS, <TH>

Head1	Head2	Head3
A	B	C
D	E	F

<TABLE BORDER>
	<TR>
		<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

DEMONSTRATION OF COLSPAN AND HEADERS,

Head1		Head2
A	B	C	D
E	F	G	H

<TABLE BORDER>
	<TR>
		<TH COLSPAN=2>Head1</TH>
	    	<TH COLSPAN=2>Head2</TH>
	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> 
	</TR>
	<TR>	
		<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> 
	</TR>
</TABLE>

DEMONSTRATION OF MULTIPLE HEADERS, COLSPAN

Head1		Head2
Head 3	Head 4	Head 5	Head 6
A	B	C	D
E	F	G	H

<TABLE BORDER>
	<TR>
		<TH COLSPAN=2>Head1</TH>
		<TH COLSPAN=2>Head2</TH>
	</TR>
	<TR>
		<TH>Head 3</TH> <TH>Head 4</TH> 
		<TH>Head 5</TH> <TH>Head 6</TH> 
	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> 
	</TR>
	<TR>
		<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> 
	</TR>
</TABLE>

DEMONSTRATION OF SIDE HEADERS

Head1	Item 1	Item 2	Item 3
Head2	Item 4	Item 5	Item 6
Head3	Item 7	Item 8	Item 9

<TABLE BORDER>
	<TR><TH>Head1</TH>
		<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
	<TR><TH>Head2</TH>
		<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
	<TR><TH>Head3</TH>
		<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>

DEMONSTRATION OF SIDE HEADERS, ROWSPAN

Head1	Item 1	Item 2	Item 3	Item 4
Head1	Item 5	Item 6	Item 7	Item 8
Head2	Item 9	Item 10	Item 3	Item 11

<TABLE BORDER>
	<TR><TH ROWSPAN=2>Head1</TH>
	    <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
	</TR>
	<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD>
	</TR>
	<TR><TH>Head2</TH>
	    <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>
	</TR>
</TABLE>

SAMPLE TABLE USING ALL OF THESE

		Average
		Height	Weight
Gender	Males	1.9	0.003
Gender	Females	1.7	0.002

<TABLE BORDER>
	<TR>	<TD><TH ROWSPAN=2></TH>
		<TH COLSPAN=2>Average</TH></TD>
	</TR>
	<TR>	<TD><TH>Height</TH><TH>Weight</TH></TD>
	</TR>
	<TR>	<TH ROWSPAN=2>Gender</TH>
	    	<TH>Males</TH><TD>1.9</TD><TD>0.003</TD>
	</TR>
	<TR>	<TH>Females</TH><TD>1.7</TD><TD>0.002</TD>
	</TR>
</TABLE>

CLEVER USES OF ROWSPAN/COLSPAN

A	1	2
	3	4
C	D

<TABLE BORDER>
	<TR>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
		<TD>1</TD>
		<TD>2</TD>
	</TR>
	<TR>
		<TD>3</TD>
		<TD>4</TD>
	</TR>
	<TR>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
	</TR>
	<TR>
	</TR>
</TABLE>

ADJUSTING MARGINS AND BORDERS

A TABLE WITHOUT BORDERS

Item 1	Item 2	Item 3
Item 4	Item 2	Item 5

<TABLE>
	<TR>	<TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> 
	</TR>
	<TR>	<TD>Item 4</TD> <TD>Item 5</TD> 
	</TR>
</TABLE>

A TABLE WITH A BORDER OF 10

Item 1	Item 2
Item 3	Item 4

<TABLE BORDER=10>
	<TR>	<TD>Item 1</TD> <TD> Item 2</TD>
	</TR>
	<TR>	<TD>Item 3</TD> <TD>Item 4</TD> 
	</TR>
</TABLE>

CELLPADDING AND CELLSPACING

A	B	C
D	E	F

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

A	B	C
D	E	F

<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

A	B	C
D	E	F

<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

A	B	C
D	E	F

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

ALIGNMENT, CAPTIONS, AND SUBTABLES

DEMONSTRATION OF MULTIPLE LINES IN A TABLE

January	February	March
This is cell 1	Cell 2	Another cell, cell 3
Cell 4	and now this is cell 5	Cell 6

<TABLE BORDER>
	<TR>
		<TH>January</TH>
		<TH>February</TH>
		<TH>March</TH>
	</TR>
	<TR>
		<TD>This is cell 1</TD>
	    	<TD>Cell 2</TD>
	    	<TD>Another cell,<br> cell 3</TD>
	</TR>
	<TR>
		<TD>Cell 4</TD>
	    	<TD>and now this<br>is cell 5</TD>
	    	<TD>Cell 6</TD>
	</TR>
</TABLE>

ALIGN=LEFT|RIGHT|CENTER

can be applied to individual cells or whole ROWs

January	February	March
all aligned center	Cell 2	Another cell, cell 3
aligned right	aligned to center	default, aligned left

<TABLE BORDER>
	<TR>
	    <TH>January</TH>
	    <TH>February</TH>
	    <TH>March</TH>
	</TR>
	<TR ALIGN=center>
	    <TD>all aligned center</TD>
	    <TD>Cell 2</TD>
	    <TD>Another cell,<br> cell 3</TD>
	</TR>
	<TR>
	    <TD ALIGN=right>aligned right</TD>
	    <TD ALIGN=center>aligned to center</TD>
	    <TD>default,<br>aligned left</TD>
	</TR>
</TABLE>

VALIGN=TOP|BOTTOM|MIDDLE

can be applied to individual cells or whole ROWs

January	February	March
all aligned to top	and now this is cell 2	Cell 3
aligned to the top	aligned to the bottom	default alignment, center

<TABLE BORDER>
	<TR>
		<TH>January</TH>
		<TH>February</TH>
		<TH>March</TH>
	</TR>
	<TR VALIGN=top>
	    <TD>all aligned to top</TD>
	    <TD>and now this<br>is cell 2</TD>
	    <TD>Cell 3</TD>
	</TR>
	<TR>
	    <TD VALIGN=top>aligned to the top</TD>
	    <TD VALIGN=bottom>aligned to the bottom</TD>
	    <TD>default alignment,<br>center</TD>
	</TR>
</TABLE>

CAPTION=TOP|BOTTOM

A top CAPTION
January	February	March
This is cell 1	Cell 2	Another cell, cell 3

<TABLE BORDER>
<CAPTION ALIGN=top>A top CAPTION</CAPTION>
	<TR>
		<TH>January</TH>
		<TH>February</TH>
		<TH>March</TH>
	</TR>
	<TR>
		<TD>This is cell 1</TD>
		<TD>Cell 2</TD>
		<TD>Another cell,<br> cell 3</TD>
	</TR>
</TABLE>

A bottom CAPTION
January	February	March
This is cell 1	Cell 2	Another cell, cell 3

<TABLE BORDER>
<CAPTION ALIGN=bottom>A bottom CAPTION</CAPTION>
	<TR>
		<TH>January</TH>
		<TH>February</TH>
		<TH>March</TH>
	</TR>
	<TR>
		<TD>This is cell 1</TD>
		<TD>Cell 2</TD>
		<TD>Another cell,<br> cell 3</TD>
	</TR>
</TABLE>

NESTED TABLES: TABLE ABCD IS INSIDE TABLE 123456

A	B
C	D

<TABLE BORDER>
	<TR> <!-- ROW 1, TABLE 1 -->
		<TD>1</TD>
		<TD>2</TD>
		<TD>3
		<TABLE BORDER>
			<TR> <!-- ROW 1, TABLE 2 -->
				<TD>A</TD>
				<TD>B</TD>
			</TR>
			<TR> <!-- ROW 2, TABLE 2 -->
				<TD>C</TD>
				<TD>D</TD>
			</TR>
		</TABLE>
		</TD>
	</TR>
	<TR> <!-- ROW 2, TABLE 1 -->
		<TD>4</TD>
		<TD>5</TD>
		<TD>6</TD>
	</TR>
</TABLE>

TABLE WIDTHS

BASIC 50% WIDTH

Width=50%	Width=50%
3	4

<TABLE BORDER WIDTH="50%">
	<TR><TD>Width=50%</TD><TD>Width=50%</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

Item width affects cell size	2
3	4

<TABLE BORDER WIDTH="50%">
	<TR><TD>Item width affects cell size</TD><TD>2</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

WIDTH=100%	This is item 2
3	4

<TABLE BORDER WIDTH="100%">
	<TR><TD>WIDTH=100%</TD><TD>This is item 2</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

CENTERING A TABLE ON A PAGE

A	B	C
D	E	F

<CENTER>
<TABLE BORDER WIDTH="50%">
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>
</CENTER>

TABLE WIDTH AND NESTED TABLES

Item 1

Item 2

Item A

Item B

Item 4

<TABLE BORDER WIDTH="50%">
	<TR><TD>Item 1</TD><TD>Item 2</TD>
	</TR>
	<TR><TD>
	    <TABLE BORDER WIDTH=100%>
		<TR><TD>Item A</TD><TD>Item B</TD>
		</TR>
	    </TABLE>
	    </TD>
	    <TD>Item 4</TD>
	</TR>
</TABLE>

HEIGHT=15%

HEIGHT=15%	Item 2
3	4

<TABLE BORDER WIDTH="50%" HEIGHT="15%">
	<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

Ok--Lets try Tables with Color!:

If you would like your table to be a specific width, add the width property into the table code. You can add width to the cell code as long as all the given widths add up to the total table width. Here is an example of a table using width.

<table border="1" cellspacing="2" cellpadding="2" width="200"> <tr> <td width="50">There isn't much in this table, but its wide!</td> <td width="150">This is the 2nd cell. It is wider.</td> </tr> </table>

There isn't much in this table, but its wide!

This is the 2nd cell. It is wider since it has more text. Not much more, but more.

There are some more advanced table codes too, such as colspan and rowspan. They would be inserted into a cell, and would make the cell either span more rows, or more collums. If you wanted a table with the first collum as one cell, and 2 cells in the 2nd collum, your code would look something like this.

That would look like this!

cell 1	Cell 2
	cell 3

You can also change the background color of your tables. The tag for this is bgcolor="#HEX CODE"and you can insert this on the whole table, or on each cell. Here are some examples.

<table border="4" bordercolor="#000000" cellspacing="2" cellpadding="2"> <tr> <td bgcolor="#FF9999">Pink</td> <td bgcolor="#FF9900">Orange</td> </tr> <tr> <td bgcolor="#33CC33">Green</td> <td bgcolor="#009999">Teal</td> </tr> </table>

Pink	Orange
Green	Teal

---

<table border="0" cellspacing="0" cellpadding="5"> <tr> <table border="0" cellspacing="0" cellpadding="3"> <td bgcolor="#FF9999" colspan=4>Tables, YAY!</td> </tr> <tr> <td bgcolor="#33CC33">cell 1</td> <td bgcolor="#FF9900">cell 2</td> <td bgcolor="#009999">cell 3</td> <td bgcolor="#33CC33">cell 4</td> </tr> <tr> <td bgcolor="#FF9999">cell 5</td> <td bgcolor="#009999">cell 6</td> <td bgcolor="#FF9900">cell 7</td> <td bgcolor="#FF9999">cell 8</td> </tr> </table>

Tables, YAY!
cell 1	cell 2	cell 3	cell 4
cell 5	cell 6	cell 7	cell 8

---

<table border="1" bordercolor="#000000" cellspacing="3" cellpadding="7" bgcolor="#00CC99> <tr> <td colspan="4" bgcolor="#0033FF">Top Header Cell</td> </tr> <tr> <td bgcolor="#FFFFFF">Left Top</td> <td rowspan="2" colspan="2" bgcolor="#FF0000">Middle</td> <td bgcolor="#FFFFFF">Right Top</td> </tr> <tr> <td bgcolor="#00FF00">Left Bottom</td> <td bgcolor="#00FF00">Right Bottom</td> </tr> <tr> <td bgcolor="#FFFF00">Bottom 1</td> <td bgcolor="#00CCFF">Bottom 2</td> <td bgcolor="#FFFF00">Bottom 3</td> <td bgcolor="#00CCFF">Bottom 4</td> </table>

Top Header Cell
Left Top	Middle		Right Top
Left Bottom	Middle		Right Bottom
Bottom 1	Bottom 2	Bottom 3	Bottom 4

I think from these you probably get the basic concept of tables. A table can be fairly simple, or it can get quite complicated like in the final example shown. The best way is to just play around, and tweak the numbers until you get what you like.

�GVSH

Creating Hyperlinks

Hyperlink is just a fancy term for a link. A piece of text, or a button, that you click on and it moves you to another place. Basic text links are fairly easy to create. They are great to linking to your horses, or to a fellow member.
The code for a basic link looks like this.
<a href="http://your URL you want to link to">Text Goes Here</a>
And that would make a link like this: White Oak Stables
Where http://www.whiteoakstables.net is the URL you want to link to, and White Oak Stables is the Text.

If you want to make an E-mail link, try this code.
<a href="mailto:Your E-mail">E-Mail me</a> E-Mail Me

If you want your links to be a different color, use this, substituting the same information as above, plus a hex code in the color property.
<a href="http://your URL you want to link to" style="color: #000000"> Text Goes Here </a>

Another style of link is a button. This looks different, like a button you click on instead of just text.

To create a button like this, use <form method="get" action="http://YOUR URL"><input type="submit" value="BUTTON TEXT"></form>

You can also make a colored button.
This has a code much like the earlier one.
<FORM METHOD="get" ACTION="http://YOUR URL"><INPUT TYPE="submit" STYLE="background:#HEXCODE" VALUE="BUTTON TEXT"></FORM>

This concludes the simple tutorial of creating hyperlinks. If you need help, try the chat. There are almost always knowledgable people willing to lend a hand.

�GVSH

More Advanced HTML

So you think your ready to move on? Here are some more codes that you can try. Since your into the "more advanced" section, we are just going to provide you with the code, and the example of that code. This way we can fit more into the page.

Code	Example
	English Western Racing

	Pawpets Simdog< LI>CobbleStone Stables

	People Shows Horses

	People Shows Horses

	People Shows Horses

	First line Indented text. Cool eh? I think so... New line.



	Your Text

	WhiteOakStables selbatSkaOetihW

	your text This is just more of the properties you can use!

These are just a few decorations you can use on your page. I hope its helped, and as always try the chatroom if you need more help. Hopefully someday you will be able to help others! Who knows, maybe you already can!

� GVSH