In this post we are going to discuss how to
create TABLE and FRAME
TABLES:
*This
TABLE tag defines a table.
*Inside
the TABLE tag, use the TR tag to define rows in the table.
*Use
the TH tag to define row or column headings
*
Use the TD tag to define table cells.
*Width
of the border surrounding the table and default background color of the table.
*CELLSPACING
– attribute to specify the distance between cells in the table.
*CELLPADDING
- attribute to specify the distance between the border and content of every
cell
Syntax:
<TABLE
ALIGN=”LEFT|RIGHT” BGCOLOR= ”color ” BORDER=”value” CELLPADDING=”value” CELLSPACING=”value” HEIGHT=”height” WIDTH=”width”
COLS=”numofcols”
HSPACE=”horizMargin”
VSPACE=”vertMargin”>
………. </TABLE>
FOR
EXAMPLE:
<HTML>
<CENTER>
<TABLE
BORDER=”1” WIDTH="300">
<COLGROUP
ALIGN="CENTER" WIDTH="80"/>
<COLGROUP
SPAN="2"/>
<COL
ALIGN="RIGHT" WIDTH="80" />
<COL
ALIGN="RIGHT" WIDTH="80" />
<THEAD><TR>
<TH COLSPAN="3">
INFORMATION</TH>
</TR>
<TR></THEAD>
<TFOOT><TR>
<TD
COLSPAN="3"> FOOTER OF THE TABLE</TD></TFOOT>
<TR>
<TH COLSPAN="3">
INFORMATION</TH>
</TR>
<TR>
<TH>Name</TH>
<TH>Age</TH>
<TH>Percentage</TH>
</TR>
<TR>
<TD>Raj</TD>
<TD>21</TD>
<TD>80</TD>
</TR>
<TR>
<TD>Ram</TD>
<TD>23</TD>
<TD>60</TD>
</TR>
<TR>
<TD>Kavi</TD>
<TD>21</TD>
<TD>90</TD>
</TR>
</TABLE></CENTER>
</HTML>
*<THEAD>
<TBODY>and <TFOOT > elements can also be used
FRAMESET(SET OF FRAMES)
*FRAMESET tag defines a set of frames that
appear in a web browser window.
*Frames are created with the combination
of two elements:
=><FRAMESET>
=><FRAME>
*The <FRAME> element uses scr attribute
to specify the URL of the file to display.
Creating Frames:
Syntax
<FRAMESET
COLS=”columnwidthlist”
ROWS=”rowheightlist”
BORDER=”pixwidth”
BORDERCOLOR=”color”
FRAMEBORDER=”YES|NO”
>
…
</FRAMESET>
* COLS and ROWS can * value.
*An asterisk (*),
which means “as much space as possbile”. The total available left-over space is
divided equally between all rows that use an asterisk.
For Example:
<HTML>
<HEAD>
<TITLE>FRAMES
EXAMPLE</TITLE>
</HEAD>
<FRAMESET
COLS=”50”,”50”>
<FRAME
SRC=”FRAME1.HTML”/>
<FRAME
SRC=”FRAME2.HTML”/>
</FRAMESET>
</HTML>
Where FRAME1.HTML document is
<HTML>
<HEAD>
<TITLE>FRAME1
EXAMPLE</TITLE>
</HEAD>
<BODY
BGCOLOR=”BLACK” TEXT=”WHITE”>
<H1>FRAME
ONE</H1>
</BODY>
</HTML>
And FRAME2.HTML document is
<HTML>
<HEAD>
<TITLE>FRAME2
EXAMPLE</TITLE>
</HEAD>
<BODY
BGCOLOR=”WHITE” TEXT=”BLACK”>
<H1>FRAME
TWO</H1>
<P><A
HREF="http://www.google.com">GOOGLE</A></P>
<P><A
HREF="http://www.yahoo.com">YAHOO</A></P>
<P><A
HREF="http://www.rediff.com">REDIFF</A></P>
</BODY>
</HTML>
FORMS:
*Used
to create a HTML form.
*It
contains interface elements such as text fields, buttons, checkboxes, radio
buttons and selection lists that let user enter text and make choices.
*All
elements must be defined between <FORM> and </FORM> tags.
*Each
interface element in the form must be defined within an appropriate tag such as
<INPUT> or <SELECTION>.
*TYPE
attribute is used to indicate the type of element within the input
tag such as button , checkbox and so on.
SUBMIT
BUTTON:
To enable the form to process
the data that the user enters, it must have a “SUBMIT” button
<input type=”submit”>
tag
The action invoked is defined
by the ACTION attribute or the FORM tag. The value of the ACTION attribute is a
URL that points to a CGI program.
A CGI program runs on the
server, processes argument sent by the form and returns data to the browser.
The value of the form’s
METHOD attribute also affects the way CGI program is invoked.
SYNTAX
<FORM
ACTION=”serverURL”
METHOD=”GET|POST”
NAME=”forName”
>
..
</FORM>
GET(the default) appends
the input information to the URL which on the most receiving systems becomes
the value of the environment variable QUERY_STRING..
POST sends
the input information in a data body that is available on stdin with the
data length set in the environment variable CONTENT_LENGTH.
The
type attributes values
Value
Description
text Creates
a text box where characters can be typed
password Creates
a text box where characters can be typed but the input is marked as asterisks
checkbox Generates a
single check box control
radio Generates
a single radio button. Only one radio button in a group can be activated at a
time
submit Special
button type that submits all the data in the form to CGI script
reset Special
button type that resets all the data in the form to CGI script
file Display
a field where files can be inserted for upload
hidden A
non-displayed field that contain s data the web page author wants to include in
the overall form data
image Creates
a graphical submit button
button Creates
a push button, which is usually used for client-server scripting
Let us see an Example
for FORM :
<HTML>
<FORM NAME=”registerform” METHOD=”GET”
>
<H1>REGISTERATION FORM</H1>
<P>User Name:
<INPUT TYPE=”text” NAME=”userName”
SIZE=”20”>
<P>Password:
<INPUT TYPE=”password”
NAME=”password” SIZE=”12”>
<P>E-mail:
<INPUT TYPE=”text” NAME=”email”
SIZE=”20”>
<P>GENDER:<br>
<input type="radio" name=r1
value=”MALE”>MALE<br>
<input type="radio" name=r1
value=”FEMALE”>FEMALE
<br>
QUALIFICATION:<br>
<input type="checkbox"
name=c1 value=”B.Sc”>B.Sc<br>
<input type="checkbox"
name=c1 value=”B.C.A">B.C.A<br>
<input type="checkbox"
name=c1 value=”MBA”>MBA<br>
<input type="checkbox"
name=c1 value=”MCA”>MCA<br>
<input type="checkbox"
name=c1 value=”ME”>ME
<CENTER>
<input type="button"
value="Click">
<input type="reset"
value="Reset">
<input type="button"
value="Cancel">
</CENTER>
</FORM>
</HTML>
In above program to perform action of
button we can use java and vb script. So in above program button type won’t
work.
TEXT AREA:
*The <textarea> tag contain multiple
lines of text.
*The rows attribute sets how many
characters high the text area should be.
*The cols attribute sets how many
characters wide the text area should be.
*Any default text should be placed between
the<textarea> </textarea> tags.
Example for TEXT
AREA and Choice List
<html>
<form action="reg"
method="post">
Enter Remarks:<br>
<textarea
cols=40 name=story rows=7>
</textarea><br><br>
City:
<select
name="city"
style="HEIGHT:16
px;WIDTH:106 px">
<option
selected>Mumbai
<option>Agra
<option>New Delhi
<option>Chennai</option>
</select>
</form>
</html>
