1AFM.com basic HTML Tutorial

Home

Back to:

Basic HTML Tutorial - learn basic HTML in a few easy steps

HTML stands for hypertext markup language and it is a very simply computer language. With a little information and practice you can master the basics in no time at all.

An important element of HTML is that everything that gets opened must be closed. As we go along you'll notice that closing what has been opened is a normal and logical part of html writing. Example:

Tables are the most important part of HTML. Creating tables is how pages and content are controlled. Here's a basic table:

Notice how everything opened was later closed. The above is a very simple table. Here's one that looks a little more like what you'de actually see around:

That one makes the table span the entire width of the page by adding the width="100%" the align="center" makes the table set to the center of the page, the default is to set to the left. The border="0" makes it so no border shows. Here's a little more detail added:

By adding the "cellpadding" tag the edges of the table are pushed away from the content in the table, which will be clearer in a moment. But first we're going to add some color so we can see the table. Also you'll see that I added div align="center" this will cause content to adjust to the center of the table. Without this tag the default is left and you can make it div align="right" as well.

The table you see above can be seen in code below:

What has been added is "bgcolor." The only reason this table has any height at all is because of the cellpadding tag. Now we're going to add a height attribute, but note that normally you wouldn't use a height tag because tables automatically expand to whatever height they need to be. Also I'm going to turn the inside of the table white.

The table you see above can be seen in code below:

Note that I added bgcolor="#FFFFFF" to the td to turn it white. Now let's add some content.

You now know basic HTML!

The table you see above can be seen in code below:

Now let's change the font

You now know basic HTML!

The table you see above can be seen in code below:

Note that following the td right after div align we added font face="arial" size="2" color="#000033" and right before /div align we added /font to close it.

Now let's talk a little bit more about the tr and td attributes. TR sets up the rows and TD sets up the columns. Let's add a column.

You now know basic HTML!
Here's a new column.

The table you see above can be seen in code below:

As you can see above, we closed the first column with a /td then opened another with a new td tag. Note that the text defaults to the left, it isn't arial and the background isn't white, so let's fix that.

You now know basic HTML!

Here's the new column with the new font face and a white bg.

The table you see above can be seen in code below:

You can see that we added all the necessary attributes: bgcolor="#FFFFFF" , div align="center" , and font face="arial" size="2" color="#000033"

Now if we don't want the columns to be broken by a line, we can either turn the bgcolor of the entire table to white or we can put another table inside a table. Here's turned white:

You now know basic HTML!

Here's the new column with the new font face and a white bg.

The table you see above can be seen in code below:

And here's a table within a table:

You now know basic HTML!

Here's the new column with the new font face and a white bg.

The table you see above can be seen in code below:

Note that my notes !-- new table is here -- and !-- end of new table -- are just comment tags to help you see where the table is, and they are not part of the code. You can use comment tags in your HTML to help you keep track of stuff. All I did here was add the following code:

But let's get back to columns for a minute.

column

The table you see above can be seen in code below:

You can see that by repeatedly adding /td then a new td you can make an unlimited number of columns. But what about rows? That requires a look at the tr attribute, and this is where things get a little more complex. Before we go on I want to point out that once you have the basic tables for your page you can put in other tables anywhere you want. It just takes practice. At the end of this tutorial is a template you can play around with using an online editor.

column	column	column
Here's the new row

The table you see above can be seen in code below:

Note that how this was accomplished is that we closed the major attributes of the table /td and /tr then we opened new ones in the same table tr td. Also note that we had to include colspan="3" in the new td tag so that the column would span the three columns above in the same table. A similar attribute is the rowspan= which goes in the tr tag when there are multiple rows, but we're not getting into that here. I wouldn't get too caught up in these two if I were you, though. I just wanted to make you aware of it. Normally what's easiest is to just set up a basic page and load it with individual tables. So, let's do that, let's take a look at a whole page: Go Here

Back to: Internet Consulting For Beginners | Home Business Money Making | Increase Your Link Popularity