Welcome to the second step

For the survivors of the first step

Crossed tabs

For goodness sake don't cross the tabs!

If your tags are crossed, Your browser may not understand your code. And if its the case it will show something else then what you wanted to do!

Wrong:
<b> <u> Text </b> </u>
Right:
<b> <u> Text </u> </b>

Or you may find yourself in one of these situations:

Alignment

This part is where you learn to align stuff

Now let us see that pair of tags that will allow us to align the text. The pair is once more the <div> and </div>. Just like <font> they don't do anything without their added function. The function that makes them useful is align="" and in between the "" you must type "left", "center" or "right".

If you type : <div align="left">I'm on the left</div>
Your text will be aligned as such:
I'm on the left
If you type : <div align="center">I'm in the middle</div>
Your text will be aligned as such:
I'm in the middle
It you type : <div align="right">I'm on the right</div>
Your text will be aligned as such:
I'm on the right

Note: Everything between these tags (tables, pictures...) will be aligned like the text...

Tables

A whole new way of organizing your data

To start a table all you need is the <table> and </table> tags, as always a tag to open and a tag to close. But it isn't over, within the tags <table> and </table> you still have more tags; the tags that will represent a row: <tr> and </tr> and in between <tr> and </tr> the tags that will represent a column: <td> and </td>.

Table code structure:

<table> <tr> <td> </td> </tr> </table>

Well logic wants that if you want to add a row to your table, you must add a pair of <tr> tags. And if you want to add a column to your row you must add a pair of <td> tags.

A visual example:

<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
=
A B
C D

Warning! Even if you only want one column in your row, you must still add a pair of <td> tags to indicate the existance of the column.

Table form

Different aspects you can give your table

You can't see your table!!! It's normal, something is missing.



Now that we know how to make a table we will now see the different functionalities. On the opening table tag <table> you may add functions just like the <div> or the <font>. The functions that we will see are:

Border defines the table's border size. So if you put nothing in <table>, your table will be there but it will be invisible because the borders will be at 0. The size of the border can be chosen by adding a number; "0" being no border.

Bordercolor defines the table's border color. All you need to do is add the color between "" as seen for the text.

Bgcolor defines the table's background color. It works the same as the bordercolor. This function may be added to the <tr> and the <td> tags in order to color a specific cell or area of the table.

Width defines the width of your table. Like the <hr>, the % defines it's span.

Note: width may work without the % to define a specific span.

Heigth defines your table's height. Different from width, height doesn't work with a %, because the height of the page is in pixels and is unending.

Lists

How to organize your information


Now there are two types of lists, numbered and non numbered! The numbered tag list is <ol>, and the tag for a non numbered list is <ul>. Of course as you already know, they come with their closing partners </ol> and </ul>. And for each line of the list you have the </li> and </li> tags.

Numbered list
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
  1. One
  2. Two
  3. Three

Non numbered list
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
  • One
  • Two
  • Three

Background

Choose an other color for your background

You may set your background as a single color by applying this function: bgcolor="" to <div> just like with <table>.

Type <div bgcolor="red"> and find out what hapens to your page