Post by Square*** on Nov 26, 2007 10:45:15 GMT -5
HTML Tutorial Part 3: Tables and Forms
Here I am again,
After you learned the Basics and Colors (HTML Tutorial 1) and
how to add Pictures and Link (HTML Tutorial 2)
Now it's time to learn another thing about the HTML code.
We now are about to learn how to add tables and a form.
Lets start with the tables,
The first you need is a beginning code, I now set border:2 as default.
So add this line to your code to start
This is your beginning, now you have to add the first lines to make a table.
To add another row, copy the above code again into your code.
Dont forget to put a <tr> behind the first row before adding a new one.
This is how your code will look with 2 rows with both 5 columns:
Ok, A table looks good, but adding some info/text to it is handy,
So lets put the text "Hey guys" to every column.
Like this you can out every text you want in your table.
You can also change the colors of the text and the the table background color.
Got this all?. I will now learn you how to assign a color to a column
Example:
Now the first column is red, the second yellow, the third red and so on.
You can assign every color you want to the columns.
So thats enough about tables for this time
Now its time to add an form to your code, Its helpfull for a webmasster to have a feedback form. Or you can use it to collect info about members easily.
To start a forum use this <FORM>. As an example Im going to make a feedback form.
This will be my first line, it makes the form send all the collected info to my personal email account.
But atm there isnt much to mail to me, so lets create some fields to collect info.
I will make a field with your name, your emailadress and your opinion about HTML.
The MAXLENGTH sets the most allowed characters in the fields.
The ROWS sets the amount of rows where you can type in.
Like this you can make as much text areas if you want. But you also need a "Submit button" to let the people send the info to you. And also a RESET button to let people reset their text and start over.
Put this in your code for the buttons
Now close the Form with </FORM>
This is how your code will look to have a form for some info.
This is it about Forms for now,
Go on to Tutorial 4 if you are finished here.
square127.proboards54.com/index.cgi?action=display&board=htmtuto&thread=1196171228&page=1
Greets, Square
Here I am again,
After you learned the Basics and Colors (HTML Tutorial 1) and
how to add Pictures and Link (HTML Tutorial 2)
Now it's time to learn another thing about the HTML code.
We now are about to learn how to add tables and a form.
Lets start with the tables,
The first you need is a beginning code, I now set border:2 as default.
So add this line to your code to start
<table border=2 bgcolor=#FFFFFF>
This is your beginning, now you have to add the first lines to make a table.
<td align=left>
</td> <td align=left>
</td> <td align=left>
</td> <td align=left>
</td> <td align=left>
</td> <td align=left>
</td> </tr>
Put this under the code above, now you have your first row of the table with 5 columns.To add another row, copy the above code again into your code.
Dont forget to put a <tr> behind the first row before adding a new one.
This is how your code will look with 2 rows with both 5 columns:
<table border=2 bgcolor=#FFFFFF>
<tr>
<td align=left>
</td> <td align=left>
</td> <td align=left>
</td> <td align=left>
</td> <td align=left>
</td> <td align=left>
</td> </tr>
<tr>
<td align=left>
</td> <td align=left>
</td> <td align=left>
</td> <td align=left>
</td> <td align=left>
</td> <td align=left>
</td> </tr>
</table>
Ok, A table looks good, but adding some info/text to it is handy,
So lets put the text "Hey guys" to every column.
<table border=2 bgcolor=#FFFFFF>
<tr>
<td align=left>
<font color=#000000 size=2>hey guys!</font> </td> <td align=left>
<font color=#000000 size=2>hey guys!</font> </td> <td align=left>
<font color=#000000 size=2>hey guys!</font> </td> <td align=left>
<font color=#000000 size=2>hey guys!</font> </td> <td align=left>
<font color=#000000 size=2>hey guys!</font> </td> <td align=left>
</td> </tr>
Like this you can out every text you want in your table.
You can also change the colors of the text and the the table background color.
Got this all?. I will now learn you how to assign a color to a column
Example:
<table border=2 bgcolor=#FFFFFF>
<tr>
<td align=left bgcolor=#ECE9D8>
<font color=#000000 size=2>hey guys!</font> </td> <td align=left bgcolor=#FF0000>
<font color=#000000 size=2>hey guys!</font> </td> <td align=left bgcolor=#0000FF>
<font color=#000000 size=2>hey guys!</font> </td> <td align=left bgcolor=#FF0000>
<font color=#000000 size=2>hey guys!</font> </td> <td align=left bgcolor=#0000FF>
<font color=#000000 size=2>hey guys!</font> </td> <td align=left>
</td> </tr>
Now the first column is red, the second yellow, the third red and so on.
You can assign every color you want to the columns.
So thats enough about tables for this time
Now its time to add an form to your code, Its helpfull for a webmasster to have a feedback form. Or you can use it to collect info about members easily.
To start a forum use this <FORM>. As an example Im going to make a feedback form.
<FORM method="Post" action="MAILTO:square127@gmail.com">
This will be my first line, it makes the form send all the collected info to my personal email account.
But atm there isnt much to mail to me, so lets create some fields to collect info.
I will make a field with your name, your emailadress and your opinion about HTML.
<FORM method="Post" action="MAILTO:square127@gmail.com">
Your name:<INPUT TYPE="text" NAME="Name" SIZE="50" MAXLENGTH="50" ><BR>
Your E-M@il:<INPUT TYPE="text" EMAIL="Eemeli" SIZE="30" MAXLENGTH="30"><BR>
<TEXTAREA NAME="Opinion" ROWS="6" WRAP="SOFT"></TEXTAREA><BR>
The MAXLENGTH sets the most allowed characters in the fields.
The ROWS sets the amount of rows where you can type in.
Like this you can make as much text areas if you want. But you also need a "Submit button" to let the people send the info to you. And also a RESET button to let people reset their text and start over.
Put this in your code for the buttons
<INPUT TYPE="SUBMIT"> <INPUT TYPE="RESET"><BR>
Now close the Form with </FORM>
This is how your code will look to have a form for some info.
<HMTL>
Your name:<INPUT TYPE="text" NAME="Name" SIZE="50" MAXLENGTH="50" ><BR>
Your E-M@il:<INPUT TYPE="text" EMAIL="Email" SIZE="30" MAXLENGTH="30"><BR>
<TEXTAREA NAME="Opinion" ROWS="6" WRAP="SOFT"></TEXTAREA><BR>
<INPUT TYPE="SUBMIT"> <INPUT TYPE="RESET"><BR>
</FORM>
</HTML>
This is it about Forms for now,
Go on to Tutorial 4 if you are finished here.
square127.proboards54.com/index.cgi?action=display&board=htmtuto&thread=1196171228&page=1
Greets, Square