I am creating this tutorial to help others with their layouts because people usually have trouble. This is mainly about tables, and that's the good part about a layout.
With the colours, the first two zeros (000000) are the values of red, the zeros in the middle are the green value, and the last two zeros are the blue value. The whole thing is called an "RGB Value", which stands for "Red Green Blue Value". Remember that it uses hex, too (so it goes from 0-FF). Also, when I put the # symbol somwhere, that means you replace it with a number (any amount of digits, but try not to go over 50 (an exception with colours that can use up to FF)).
First, you don't need a picture, but you can use one if you want to. If you don't want to, then it will be just one colour.
Let's get started now!
There are three major parts: the <table> tag as your whole layout, the <tr> (table row) tag as a row of "cells", and the <td> (table cell) tag as one cell.
A cell is a spot where you can put text.
I will show an example with one colour.
<table border="2" cellspacing="5" bgcolor="#FF0000">
<tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
would be
The border="2" part is for the gray around the cells and table. The cellspacing="5" is for the amount of pixels between the cells and border. Bgcolor is only usefull if you aren't using a picture. It is used for cell colour. Here are what you need to know, other than the three major parts of the table.
There are also headings, which the tag is <th> (table heading). This will allow to do diffrent things, such as descriptions. Here is an example:
<table border="2" cellspacing="5" bgcolor="#007700">
<tr><th>Word</th><th>Description</th></tr>
<tr><td>th</td><td>The tag used for a heading.</td></tr>
<tr><td>td</td><td>The tag used for a cell.</td></tr>
<tr><td>tr</td><td>The tag used for a row of cells.</td></tr>
<tr><td>table</td><td>1. Something mainly used for eating.
2. The tag used for starting a table (HTML).</td></tr>
</table>
would be
NEW!: URL Links- this is complicated, so I'll give an example: Click <a href="http://www.smwcentral.net">here</a> to go to SMW Central.
would be
Click here to go to SMW Central.
Remember, you HAVE to put the "useless" http:// section of the URL to make the link work properly.
Remember that these need to be put in the <table> tag (that means like this: <table (insert text here)>).
Border- the outlining of the table and cells. You need to put ="#" after border for it to work. If you put a 0 there, you won't really have a table because it will cause all lines to disappear.
NEW!: Width and Height- you do not put both of them together. Instead, you keep them seperate. Remember to put them both in the <table> tag. Width is how long it is left to right. You need to put ="#" after width for it to work.
Height is how long it is from top to bottom. You need to put ="#" after height for it to work.
Your best choice is to set them both in the table to 100%.
Cellspacing- the amount of pixels between the cell and border, or another cell. You need to put ="#" after cellspacing for it to work.
Bgcolor- the colour your cells and empty part of the table use. You need to put ="#" after bgcolor for it to work.
NEW!: Background- this works a little diffrent. You need to put background="$", except you put the URL for your image instead of a dollar sign. That means you need to be registered to a website that has a spot to put images. I would say to use Photobucket, which can be found here. Remember that this is optional, so you don't have to do it. You also need to choose direct link. Then, in front of the URL, put:<img src=". Then, after the URL, put:"> (you only need the extra parts for placing an image, use only background="(insert URL here)" for the background).
It needs to be in the <table> tag.
Here's a picture of the bramble BG from DKC 2:
</a>
This is an image placed, not a background.
NEW!: Rowspan and Colspan- this feature is cool! It fuses cells together.
Rowspan fuses them from up and down.
Colspan fuses them from left and right.
Example:
<table border="2" cellspacing="5" background="http://i159.photobucket.com/albums/t136/RedChameleon/Layout3.jpg">
<tr><td>Row 1, Column 1</td><td colspan="2">Row 1, Column 2+3</td></tr>
<tr><td>Row 2, Column 1</td><td rowspan="2">Row 2+3, Column 2</td><td>Row 2, Column 3</td></tr>
<tr><td>Row 3, Column 1</td><td>Row 3, Column 3</td></tr>
</table>
would be
(you may have to use the cursor and highlight the words)
You would usually expect it to be the other way around, but it's logical. Rowspan is how many rows high it would be. Colspan is how many columns long it would be.
Last, but not least:
NEW!: Text Areas- this is very, very, complex at first, so listen well!
A text area is something inserted that doesn't scroll the page, but keeps information that won't cause the page to oversize. It contains rows and cols (short for columns). They use the tag <textarea>, and the amount of rows and cols must be made in the tag. It also uses the ="#" after it. Here is an example:
<textarea rows=5 cols=25>This is an example. Do you like the textarea? It can use pictures! It's cool! But you may not like it! Who would not, though? It's one of HTML's best things to make!</textarea>
would be
The rows give a certain amount of lines to read, depending on the number. That doesn't mean you can't have more than that. That means it will start with that many lines, and you can scroll down! The cols are the amount of numbers allowed on a line. Pretty simple.
Now that you know about that, it's time to make your layout!
Just follow the above steps and do whatever! But when you want to make a spot for your main text in the layout, do this.
1. You need your header and footer empty. It doesn't matter about the footer because you can put that text in a cell. Neat, huh?
2. Create your layout completely (using the header and footer).
3. Put <tr><td> at the very end of your header.
That should give you a cell to put your text in. (thanks to darklink898 for the forum post text cell)
NEW!: Blank Cell- this will create a cell to appear, but it will have nothing in it. You need to type after the cell tag, and you will get a cell with nothing. I don't really find it useful, but you may use it if you want.
NEW!: Table in a Table- if you use the table tag after another table tag, there will be a table inside your table. This will also work putting after the tr tag to create that row have a table. Note that if you don't end it after you end the table row, then it will continue until you end it. This can also be done with the td tag. There can also be a table in that table, and a table in that table, and so on.
NEW: Align- this works with left, right, and center. You have to put align="^" in the td tag. The ^ means that you have to put left, right, or center there, and the text will be put on that section of the cell.
NEW!: Coloured Words- this will allow people to see what you type a lot better. For example, if you have a cell with the RGB value A8FFFF, and you have white coloured text, it will be very hard to see. In this case, you should turn the text black. The way to do this is put [, then color=#(######)] (the number signs in the brackets you change, the other one is needed, and don't include the brackets). You put that before your text, and there's something else you have to put after. It's first a [, then /color]. I did that and turned this sentence blue.
NEW!: Invisible Text- this makes text invisible until you highlight it. For example, your table is green, and the colour of the text is the same exact green. Here's an example:
<table bgcolor="#007700" cellspacing="3" border="3" height="100% width="100%">
<tr><td>Highlight this with the cursor: <color=#007700>do you like this trick? I thought of it myself!</color></td></tr></table>
(the < and > signs around the color and /color tags should be [ and ])
would be
do you like this trick? I thought of it myself!</span></td></tr>
NEW!: Covered Text- this is easier to find than invisible text. This is how it goes:
<span style="color: 000000; background-color: 000000;">This is neat!</span>
would be
This is neat!
ALWAYS put the color and background-color parts numbers the same.
That is all. (partial credit to Dotsarecool for helping me a little bit with my layout with his tutorial)
P.S. I am not adding anything more to this by myself, unless there's something I really want (or need) to add. If anyone has any questions or anything they'd like answered in this (except for marquees, since they are prohibited from layouts), post in this thread, and I'll answer and possibly put it in this tutorial. Also, this is allowed to be bumped as much as you like. If I catch anyone complaining about it being bumped, then watch out. I'll tell one of the admins or mods about what you did. Same goes with flaming, insulting, etc.
Unexpected end tag (</span>) at 10583, expected </table>
Unexpected end tag (</td>) at 10588, expected </table>
Unexpected end tag (</tr>) at 10593, expected </table>
With the colours, the first two zeros (000000) are the values of red, the zeros in the middle are the green value, and the last two zeros are the blue value. The whole thing is called an "RGB Value", which stands for "Red Green Blue Value". Remember that it uses hex, too (so it goes from 0-FF). Also, when I put the # symbol somwhere, that means you replace it with a number (any amount of digits, but try not to go over 50 (an exception with colours that can use up to FF)).
First, you don't need a picture, but you can use one if you want to. If you don't want to, then it will be just one colour.
Let's get started now!
The Major Parts
There are three major parts: the <table> tag as your whole layout, the <tr> (table row) tag as a row of "cells", and the <td> (table cell) tag as one cell.
A cell is a spot where you can put text.
I will show an example with one colour.
<table border="2" cellspacing="5" bgcolor="#FF0000">
<tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>
would be
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
The border="2" part is for the gray around the cells and table. The cellspacing="5" is for the amount of pixels between the cells and border. Bgcolor is only usefull if you aren't using a picture. It is used for cell colour. Here are what you need to know, other than the three major parts of the table.
There are also headings, which the tag is <th> (table heading). This will allow to do diffrent things, such as descriptions. Here is an example:
<table border="2" cellspacing="5" bgcolor="#007700">
<tr><th>Word</th><th>Description</th></tr>
<tr><td>th</td><td>The tag used for a heading.</td></tr>
<tr><td>td</td><td>The tag used for a cell.</td></tr>
<tr><td>tr</td><td>The tag used for a row of cells.</td></tr>
<tr><td>table</td><td>1. Something mainly used for eating.
2. The tag used for starting a table (HTML).</td></tr>
</table>
would be
Word | Description |
---|---|
th | The tag used for a heading. |
td | The tag used for a cell. |
tr | The tag used for a row of cells. |
table | 1. Something mainly used for eating. 2. The tag used for starting a table (HTML). |
The Minor Parts
NEW!: URL Links- this is complicated, so I'll give an example: Click <a href="http://www.smwcentral.net">here</a> to go to SMW Central.
would be
Click here to go to SMW Central.
Remember, you HAVE to put the "useless" http:// section of the URL to make the link work properly.
Border- the outlining of the table and cells. You need to put ="#" after border for it to work. If you put a 0 there, you won't really have a table because it will cause all lines to disappear.
NEW!: Width and Height- you do not put both of them together. Instead, you keep them seperate. Remember to put them both in the <table> tag. Width is how long it is left to right. You need to put ="#" after width for it to work.
Height is how long it is from top to bottom. You need to put ="#" after height for it to work.
Your best choice is to set them both in the table to 100%.
Cellspacing- the amount of pixels between the cell and border, or another cell. You need to put ="#" after cellspacing for it to work.
Bgcolor- the colour your cells and empty part of the table use. You need to put ="#" after bgcolor for it to work.
NEW!: Background- this works a little diffrent. You need to put background="$", except you put the URL for your image instead of a dollar sign. That means you need to be registered to a website that has a spot to put images. I would say to use Photobucket, which can be found here. Remember that this is optional, so you don't have to do it. You also need to choose direct link. Then, in front of the URL, put:<img src=". Then, after the URL, put:"> (you only need the extra parts for placing an image, use only background="(insert URL here)" for the background).
It needs to be in the <table> tag.
Here's a picture of the bramble BG from DKC 2:
</a>
This is an image placed, not a background.
NEW!: Rowspan and Colspan- this feature is cool! It fuses cells together.
Rowspan fuses them from up and down.
Colspan fuses them from left and right.
Example:
<table border="2" cellspacing="5" background="http://i159.photobucket.com/albums/t136/RedChameleon/Layout3.jpg">
<tr><td>Row 1, Column 1</td><td colspan="2">Row 1, Column 2+3</td></tr>
<tr><td>Row 2, Column 1</td><td rowspan="2">Row 2+3, Column 2</td><td>Row 2, Column 3</td></tr>
<tr><td>Row 3, Column 1</td><td>Row 3, Column 3</td></tr>
</table>
would be
Row 1, Column 1 | Row 1, Column 2+3 | |
Row 2, Column 1 | Row 2+3, Column 2 | Row 2, Column 3 |
Row 3, Column 1 | Row 3, Column 3 |
(you may have to use the cursor and highlight the words)
You would usually expect it to be the other way around, but it's logical. Rowspan is how many rows high it would be. Colspan is how many columns long it would be.
Last, but not least:
NEW!: Text Areas- this is very, very, complex at first, so listen well!
A text area is something inserted that doesn't scroll the page, but keeps information that won't cause the page to oversize. It contains rows and cols (short for columns). They use the tag <textarea>, and the amount of rows and cols must be made in the tag. It also uses the ="#" after it. Here is an example:
<textarea rows=5 cols=25>This is an example. Do you like the textarea? It can use pictures! It's cool! But you may not like it! Who would not, though? It's one of HTML's best things to make!</textarea>
would be
The rows give a certain amount of lines to read, depending on the number. That doesn't mean you can't have more than that. That means it will start with that many lines, and you can scroll down! The cols are the amount of numbers allowed on a line. Pretty simple.
Now that you know about that, it's time to make your layout!
MAKING A LAYOUT!
Just follow the above steps and do whatever! But when you want to make a spot for your main text in the layout, do this.
1. You need your header and footer empty. It doesn't matter about the footer because you can put that text in a cell. Neat, huh?
2. Create your layout completely (using the header and footer).
3. Put <tr><td> at the very end of your header.
That should give you a cell to put your text in. (thanks to darklink898 for the forum post text cell)
Extra things
NEW!: Blank Cell- this will create a cell to appear, but it will have nothing in it. You need to type after the cell tag, and you will get a cell with nothing. I don't really find it useful, but you may use it if you want.
NEW!: Table in a Table- if you use the table tag after another table tag, there will be a table inside your table. This will also work putting after the tr tag to create that row have a table. Note that if you don't end it after you end the table row, then it will continue until you end it. This can also be done with the td tag. There can also be a table in that table, and a table in that table, and so on.
NEW: Align- this works with left, right, and center. You have to put align="^" in the td tag. The ^ means that you have to put left, right, or center there, and the text will be put on that section of the cell.
NEW!: Coloured Words- this will allow people to see what you type a lot better. For example, if you have a cell with the RGB value A8FFFF, and you have white coloured text, it will be very hard to see. In this case, you should turn the text black. The way to do this is put [, then color=#(######)] (the number signs in the brackets you change, the other one is needed, and don't include the brackets). You put that before your text, and there's something else you have to put after. It's first a [, then /color]. I did that and turned this sentence blue.
NEW!: Invisible Text- this makes text invisible until you highlight it. For example, your table is green, and the colour of the text is the same exact green. Here's an example:
<table bgcolor="#007700" cellspacing="3" border="3" height="100% width="100%">
<tr><td>Highlight this with the cursor: <color=#007700>do you like this trick? I thought of it myself!</color></td></tr></table>
(the < and > signs around the color and /color tags should be [ and ])
would be
NEW!: Covered Text- this is easier to find than invisible text. This is how it goes:
<span style="color: 000000; background-color: 000000;">This is neat!</span>
would be
This is neat!
ALWAYS put the color and background-color parts numbers the same.
That is all. (partial credit to Dotsarecool for helping me a little bit with my layout with his tutorial)
P.S. I am not adding anything more to this by myself, unless there's something I really want (or need) to add. If anyone has any questions or anything they'd like answered in this (except for marquees, since they are prohibited from layouts), post in this thread, and I'll answer and possibly put it in this tutorial. Also, this is allowed to be bumped as much as you like. If I catch anyone complaining about it being bumped, then watch out. I'll tell one of the admins or mods about what you did. Same goes with flaming, insulting, etc.
Unexpected end tag (</span>) at 10583, expected </table>
Unexpected end tag (</td>) at 10588, expected </table>
Unexpected end tag (</tr>) at 10593, expected </table>