HTML Programming by: "A" (Advanced)

ADVANCED HTML

Advanced HTML Programming
Using Tables
FORMS
Framing up your site
Adding visual improvements
Building Imagemaps
Multimedia

Go to Beginners Page
Return Home

Using Tables
Using tables will allow you to separate parts of your web site without using frames. There are
several differences between frames and tables. First, Tables are contained in the same HTML page
or file whereas frames is in a separate file. Second, After loading, frames can be contained in
a small portion of your memory but tables use much more of your memory, i.e. Table within a
table. It's like a 2-dimensional array.

Regarding tables, some say it is much harder to code rather than forms. Well, I agree. One mistake
and your table might appear elsewhere or it may not even be shown. Here are the codes to create
your tables in your web pages.

CODE:
<table border="1" bgcolor="white">
<tr> <td> <div align="center">
Hello!
</td>
<td>
How Are you?
</td> </tr>
</table>

OUTPUT:

Hello!
How Are you?

As you can see it's quite complicated. But it's not that hard. Here's the explanation. First make
the <table> Tag which signifies the beginning of your table. Next, make the <tr> tag which adds
1 row to your table and the <td> tag which adds 1 column to your table. Now you are ready
to insert images and text to your table. Make sure that it is inside the <td> tag like the example
above. Now terminate the tags by using </td> </tr> and the </table> which signifies the end
of your table. And if ever you want to add a column or a row, just insert a new <td> tag for a
new column, and a <tr> for a new row. (Tip: Follow the example above.)
Return to Top of Page

Forms

Using Forms in your web site makes your site more interactive. You can ask for the users' feedbacks about your site , ask for information and so on. Well, it's a little easier than Tables. Forms consists of textboxes, Radio Buttons, Check Boxes, selection lists, submit and reset buttons, and a text area which can be scrolled. Each of these are called regions of the form. A single form may consists one of each of these regions or more. Always remember that every region inside one <form> ... </form> tag, are considered as one. If you make a new <form> tag, it will be different from the previous one made. Also, information gathered from forms can be managed in 2 ways, either by your CGI Script which will handle the information or send it through e-mail. Here are the Form tags and their Examples.

STARING YOUR FORM
<form action="mailto:[email protected]" method="post">
.....
</form>

This is the most importannt code in your form (of course!). The "....." part is where you put the tags for the regions of your form. It is up to you what it will contain. Now, action="..." will determine where will the information be posted ( METHOD="POST" ). In the given example, it will be sent to the e-mail specified. Here are tags for the regions of your form.

<input type="text" name="textbox1" size=30 maxlength=40>
Text Box:

input type="..." determines what is the type of the region. name="..." is the name of the region. Size sets the length of the box and Maxlength is the maximum number of characters that can be typed in the specified box.

<input type="password" name="passbox1" size=30 maxlength=40>
Password:

It is almost the same as a textbox except that when the users types a character, all he/she will be seeing is an asterisk (*).

<textarea name="textarea1" rows=2 cols=30> </textarea>
Textarea:

In a text area, you can type paragraphs and sentences ROWS high and COLS wide.

<input type="checkbox" name="checkbox1">
Checkbox:

Well, this is an example of a checkbox. If the box is checked, the variable will be TRUE if not, FALSE. (Manipulating information from checkboxes, radio buttons and selection lists can easily be done by CGI Scripting. I hope I can include it in this tutorial.

<input type="radio" name="persons" value="you" checked> YOU
<input type="radio" name="persons" value="me"> ME
<input type="radio" name="persons" value="they"> THEY
YOU ME THEY

As you can see, the Radio button tag uses one variable only ("persons") and the Value will be the selection. If you put the word " checked" inside one of the radio button tag, it will be selected automatically and can be changed by the user afterwards. Radio buttons also uses CGI scripting, it can also be done through e-mail but it would be hard to understand.

<select size=2 name="selectionlist">
<option selected> ONE
<option> TWO
<option> THREE
</select>
Selection List:

That was how to make a selection list. Size will determine the number of rows the selections will be displayed. If there are more selections than the number of rows selected, a scroll bar will automatically be activated so that you can view the other selection/s. Options are the selections the user can choose. Adding a "selected" keyword will make the current selection active. If you want your users to select multiple choices, add the "select" keyword inside the <select> tag.

<input type="submit" value="Submit it now!">
<input type="reset" value="Reset form">

This will now be the end of your form. If the user clicked Submit the information within the <form>..</form> tags will be sent to the Script or to your e-mail. If the user clicked Reset all the regions of the current form will be reset.

Return to Top of Page

Framing up your site
Perhaps this is one of the best ways to present your site. The most common way to present Frames is the links are on the left frame which is 25% of the page and all other news or information on the main frame. Creating frame is not that hard. All you have to do is to create an html document which will call all the other frames. for example,

( MAIN.HTM )
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="left.htm">
<FRAME SRC="right.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>

MAIN.HTM Contains the different attributes of your frame. Here's the Explanation: FRAMESET COLS means that, your frame contains two columns 25%, 75% of the screen, left and right respectively. Thus, if you want to create a page which horizontally divides the screen equally, you'll use the tag <FRAMESET ROWS="50%,50%">.

Next, FRAME SRC tag calls the HTML document to be displayed on the frame. The first frame to be called will be automatically the Left frame for Vertical Frame, and Right frame for horizontal frames. Finally the </FRAMESET> tag signifying the end of the Frame Tag. You now have a frame!

Return to Top of Page

Adding visual improvements
Making some visual improvements will make your visitors return and admire your web site. Creating such improvements require A LOT of work. Use this page as an example. Once your mouse cursor is over a hyperlink, the color changes. Put your mouse cursor over some links and observe the changes. It's main purpose is to determine the links available in the web page.

Next, do you see a description of the link in your status bar? It is the horizontal bar at the bottom of your browser. Try putting the mouse cursor over a link and observe your status bar. It's coll isn't it. (It's also a way of hiding your link, but some EXPERIENCED(including me) users will eventually see it). I'm going to teach you how to do these improvements.

Now this TAG is put before the <BODY> tag of your document. Here is the Tag to put STYLE in your web page.

<STYLE>
A:LINK {text-decoration:bold;
font-family:times new roman;
font-size:12;
color:blue;}
A:VISITED {text-decoration:none;
font-family:courier new;
font-size:11;
color:green;}
A:HOVER {text-decoration:none;
font-family:Tahoma; font-size:12;
color:red;}
</STYLE>

As you can see it comprises of one tag, the <STYLE> Tag. It has 3 main attributed and each has 4 sub-attributes. The A:LINK attribute contains the attributes of a Normal Link, which means that it will be the attributes of ALL links in the current page and the mouse cursor is not over it. Next the A:VISITED attribute. It contains the attributes of a visited link, in other words, a link which you have already clicked. Then, the one which determines the attributes of a link wherein your mouse cursor it over them is in the A:HOVER attribute. Text-decoration, Text-Family, font-size, color, are purely self explanatory.

Now, let's go to the status bar. You can make a description of a link appear in the status bar of your browser when the mouse cursor is on top of a link. It's easy. Let's have a comparison.

With out Script:

CODE:
<a href="advanced.htm"> ADVANCED </a>

OUTPUT:
ADVANCED

Now put your mouse cursor over the link above. Examine the status bar. You should see the exact location of the link. Now let's add something to make a description appear on the status bar.

CODE:
<a href="advance.htm" onmouseover="window.status='Advanced Page'; return true;"
onmouseout="window.status=''; return true;">
ADVANCED </a>

OUTPUT:
ADVANCED

Not put your mouse cursor on top of the link above. You should see now the description of the link. "Advanced Page" should be displayed on the status bar. That's simple isn't it. Just add the onmouseover attribute to your link for the description to appear. One more thing, do not forget to add the onmouseout attribute. If you forgot to place this, the description will be displayed in the status bar even if the cursor is not on top of the link.

Return to Top of Page

Building Imagemaps

Multimedia