HTML Web-Programming Part II

This is the second part of the web-programming tutorial, as you might have guessed ;). In the last tutorial you learned how to create simple Web-pages with text and images. what you didn't learn in the last tutorial are things, like placing the images where you actually want them, and how to create Tables... The most will be covered here. First i'll start with the easy part. Tables. In Html each table consists of Cells which are those square boxes ;). Most tables have more than 1 row and 1 column, otherwise it would be almost useless to create a table. When we want to indicate, that we are creating a table, we have to use the <TABLE> tag. in this tag we can specify things, like the border width of the Table. For example: 
    <TABLE BORDER=2 BGCOLOR="red">
This would create a table with no columns and no rows, but it would have a red background color and a border of the size of 2. To add a row, we just type <TR> every time we want to add a row. For Example:

    <TABLE BORDER=2>
     <TR>
     </TR>
     
     <TR>
     </TR>
    </TABLE>
This would create a Table with 2 empty rows. to add a column, we just add <TD> inside one of the TD tags. Like This: 
    <TABLE BORDER=2>
     <TR>
      <TD> Name </TD>
      <TD> Address </TD>
     </TR>
     
     <TR>
      <TD> Mister K </TD>
      <TD> At home </TD>
     </TR>
    </TABLE>

This would create a 2x2 Table. Between the TD tags, you can do everything, you did before in html, like add pictures and links, changing fonts etc... You can also change the colors of the single Columns/Rows, just by adding BGCOLOR to the tag, like <TD BGCOLOR="blue"> or <TR BGCOLOR="black>.
If you want a cell to continue in the next cell, for example giving the whole table a Title:

Title
Test Test 2 ;)

To do this, you will need to add COLSPAN to either your TD-tag. COLSPAN indicates that the Cell will span over X-Columns. ROWSPAN does the same only over Rows. For Example: 
    <TD COLSPAN=2> This spans over 2 Columns. </TD>

    <TD ROWSPAN=2> This spans over 2 Rows. </TR>
You can also indicate the height and width of each cell. For this just add HEIGHT or WIDTH to your TD/TR tag.
Now for some more advanced stuff. If you want to place an image at a certain location on the webpage, you either have the choice between the STYLE command or a TABLE. I suggest STYLE, because it is more flexible. You can add STYLE to almost any tag, like the IMG tag, like this <IMG STYLE="">. Between the Brackets, you have to add the actual style commands, like the X and Y position of the image in our case. Before the result becomes visible, you need to do following: 
    <IMG STYLE="position:absolute;">
This is important, or otherwise the STYLE has almost no effect. Now, we want to indicate our images' X and Y position. We want it to be 100 pixel away from the Left-Border of the Browser and 200 pixel away from the Top-Border of the Browser. 
    <IMG STYLE="position:absolute; left:100; top:200;">
Those of you who programmed with VB are fimiliar with this. You can also change the Height of the image in the STYLE command, just add "height: ###" or "width: ###".
If you want to apply the same STYLE to many objects on your page, like text and pictures and don't want to add STYLE to each tag, you can just use the DIV tag, which is something like an area. 
    <DIV STYLE="position absolute; left:100;">

         

    </DIV>
Everything between the tags would be 100 pixel away from the left border. If you want to do more advanced stuff on your webpage, html will not be enough, and you will need to learn one of the script languages, like Javascript or VBScript.