HTML - Basic tags and codes
From Global Programming Syntax
Contents |
<body> Tag
The body tag is one of the most simplest and common tags used in html. Below is a table showing what methods may be placed into the body tag.
| Field | Sample value | Description |
| background | backgroundpic.jpg | Sets a background picture for your page |
| bgcolor | #FFFF00 | Sets a background color for your page |
| bottommargin | 0 | Sets the bottom margin of your page. The bottom margin is the small space at the very bottom of the page. |
| leftmargin | 4 | Sets the left margin of your page. This will determine how far in your text starts. |
| rightmargin | 3 | Sets the right marin of your page. This will determine where your text will end. |
| topmargin | 0 | Sets the margin at the top of your page. Normally there is a tiny gap at the top of the page which this can change. |
| onclick | javascript:jsfunction(); | Triggers a function on mouse left button click. |
| onload | javascript:jsfunction2(); | Triggers a function when the page loads. |
| onunload | javascript:jsfunction3(); | Triggers a function when the user exits the page. |
| onmouseover | javascript:jsfunction4(); | Triggers a function when the mouse moves over the page. |
| onmouseout | javascript:jsfunction5(); | Triggers a function when the mouse moves off the page. |
| style | a:visited { color: #0000FF; } | Sets some css code for the body tag. |
An example of how to use the above table is the bgcolor method which would look something like the following:
<body bgcolor="#FFFF00">
Or if you were to use all of the above methods it would look like the following
<body bgcolor="#FFFF00" background="backgroundpic.jpg" bottommargin=0 leftmargin=4
rightmargin=3 topmargin=0 onclick="javascript:jsfunction();" onload="javascript:jsfunction2();"
onunload="javascript:jsfunction3();" onmouseover="javascript:jsfunction4();"
onmouseout="javascript:jsfunction5();" style="a:visited { color: $0000FF; }">
You may want to also note that it is best not to mess with the margin tags unless the default margins are making your template look ugly. Particularly the left and right margins should remain the same.
<table> <tr> <td> Tags
Also when the below text refers to a table cell it is refering to a single box in the table.
<table> Tag
| Field | Sample value | Description |
| align | left | Sets the table alignment to left/right |
| bgcolor | #FF9999 | Sets the background color to #FF9999 |
| border | 1 | Sets the border to size 1 - the smalles visible size. If 0 is specified then there will be no border |
| cellpadding | 3 | This is the padding between the edge of a table cell and the contents of the cell. |
| cellspacing | 0 | This will determine what spacing will be between each table cell and will make a gap through the middle of the tables internal border. |
| style | margin: 0px; | Sets some css code for the table. Also this css code will determine the amount of space between the table and other elements beside the table. |
<tr> Tag
The <tr> tag is used to specify table rows. Below is a list of methods that may be used in the <tr> tag.
| Field | Sample value | Description |
| bgcolor | #FF9999 | Sets the background color to #FF9999 |
| style | margin: 0px; | Sets some css code for the table. Also this css code will determine the amount of space between the table and other elements beside the table. |
<td> Tag
And finally there is the <td> tag. This tag stores the table data into each column.
| Field | Sample value | Description |
| align | left | Sets the text alignment of the cell to the left/right |
| valign | middle | Sets the text Vertical alignment of the cell to the top/middle/bottom |
| bgcolor | #FF9999 | Sets the background color to #FF9999 |
| colspan | 2 | The colspan allows you to set a one cell to spread across multiple columns. |
| rowspan | 2 | The rowspan allows you to set a cell to spill over multiple rows. |
| style | margin: 0px; | Sets some css code for the table. Also this css code will determine the amount of space between the table and other elements beside the table. |
Examples
Below is a one row two column table with a border of 1 and cellspacing of 0
| <table border=1 cellspacing=0> |
Now the below table is like the above table but with a second and third row.
| <table border=1 cellspacing=0> |
Next lets say you want a title row and a cell that goes down two rows. Below is an example of how to do so.
| <table border=1 cellspacing=0> | |||||
<b> and </b> Tag
The <b> and </b> tags tell the browser where to make the text bold. So in simple, anything after the <b> opening tag will be bold until the browser reads the </b> tag. Below is an example:
HTML CODE:
Some of this text <b>is bold</b>.
The above code will output the following string: "Some of this text is bold."
<u> and </u> Tag
The <u> and </u> tags allow you to underline text. It works just like the <b> and </b> tags except instead of making the text bold, it just underlines the text. Below is an example of its usage:
HTML CODE:
Some of this text <u>is underlined</u>.
The above code will output the following string: "Some of this text is underlined."
<i> and </i> Tag
The <i> and </i> tags allow you to set the text style to italics. Italics is basically diagonal text and this tag can be used just like the <b> and </b> tag. Below is an example of its usage:
HTML CODE:
Some of this text <i>is italics</i>.
The above code will output the following string: "Some of this text is italics."
