Chris's HTML Help Tutorial Section 4- Advanced HTML

Advanced

Section 4- Advanced HTML

Are you ready for some serious fun with HTML?

Creating tables
Adding background music
Categorizing your site for search engines
Other fun stuff for your page

-Creating tables

Tables can get quite hairy to create, but they are a very important part of HTML, and must be learnt eventually. In this section, I'll cover the general syntax for creating tables- complex tables are beyond the scope of this tutorial, though.

All tables involve using the below three tags:

<table></table>	Defines a table. All tables begin and end with this tag.
<tr></tr>	Defines a row. A table must have at least one row (think about it).
<td></td>	Defines a cell within a row. All tables must also have a least one row.

The best way to illustrate how to create tables is to begin by showing the syntax involved in creating a basic table:

<table>
<tr>
<td>A basic table</td>
</tr>
</table>

A basic table

Take special note of the structure of the tags- All tables begin with the <table> tag, followed by at least one <tr> tag, and then by at least one <td>.

Lets take the above a little further and create a table with two cells (as opposed to just one):

<table border=1>
<tr>
<td>This is the first cell</td>
<td>This is the second cell</td>
</tr>
</table>

This is the first cell This is the second cell

Want to try for a table with two rows, and two cells in each of the row?

<table border=1>
<tr>
<td>This is the first cell</td>
<td>This is the second cell</td>
</tr>
<tr>
<td>This is the third cell</td>
<td>This is the fourth cell</td>
</tr>
</table>

This is the first cell This is the second cell

This is the third cell This is the fourth cell

Since we wanted two rows, we defined two <tr> tags. Since we wanted two cells in each of the row, we defined two <td> tags inside each of the <tr>. Not that bad, right?

-Table attributes

Before we get too carried away with creating tables, its appropriate to first introduce the attributes available in manipulating a table's appearance, such as border size, background color, row/cell width etc. Below lists these important attributes:

width	Available to all of the table tags. Used to determine the tag's width, either in px or %
border	Available to the <table> tag. Defines its border size
cellpadding	Available to the <table> tag. Defines the padding width between each of it's cells.
cellspacing	Available to the <table> tag. Defines the spacing width between each of it's cells.
bgcolor	Available to the <table> tag. Defines the background color of he table
background	Available to the <table> tag. Specifies the background image of the table.

I encourage you to individually try out all of these attributes; here's an example that uses several of the attributes at once:

<table border="2" width="136" background="backgr15.jpg" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">Sample table<br>Sample table></td>
</tr>
</table>

Sample table
Sample table

-Adding background music

Many people have asked me how to add background music to their page. Its actually quite simple. Just add the below code to the document:

where "mymidi.mid" is the file path of the midi file you wish to use. The <bgsound> tag is for IE, and the <embed> tag is for NS. Here's a sample page that plays the background music Baywatch. Note that you must have the proper plugin installed in order to hear any music.

-Categorizing your site for search engines

If you ever want your web page to be seen at all by anyone, you're gonna have to submit it to search engines. Most search engines have a "Add URL" feature where you can submit your site to to be listed. Before you do that, however, there's something very important you need to do- categorize your page using the <meta> tag. The <meta> tag allows you associate specific keywords with your page, so when surfers type in those keywords in a search engine, they will be lead to your site. Furthermore, this tag also allows you to specify a short description of your page that will be shown on the search engine page when your page is found. The syntax for this tag is as follows:

Where "keywords here" is a list of keywords that you wish to be associated with your page, and "description here" the short description describing it. Here's a complete example that categorizes a page on pets:

<html>
<head>
<meta name="keywords" content="dogs, cats, pets, ">
<meta name="description" content="Click here to learn more about pets!">
</head>
<body>
Many families nowadays own pets...
"
"
</body>
</html>

The meta tag is inserted inside the <head> section. Keywords entered into the <meta> tag should each be separated by a comma. Once your site is categorized, submitting it to search engines will yield much better results in terms of people finding your site!

-Other fun stuff for your page

In this final part, I'll show you some miscellaneous cool stuff you can add to your page.

-Adding roll-over text links in IE 4.x:

If you go back to the frontpage of this site, you'll notice that whenever you pass your mouse over the links using IE 4, they turn red. You can add this same feature to your page by adding the below code to the <head> section of your page:

-Adding a live clock to your page:

You can impress your surfers with a live clock. Just add the below code to your page:

<form name="Tick">
<input type="text" size="11" name="Clock">
</form>
<script>
<!--

/*Live clock credit
Website Abstraction (www.wsabstract.com)
Credit must stay intact for use
*/

function show(){
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
document.Tick.Clock.value=hours+":"+minutes+":"
+seconds+" "+dn
setTimeout("show()",1000)
}
show()
//-->
</script>

Credit Notices: The above script was obtained from the site Website Abstraction. You can get a lot of cool JavaScripts there.

Well, that's it for now folks. Live well and prosper!