Scribd
Upload
21 views16 pages

Unit 3

css

Uploaded by

Suresh M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views16 pages

Unit 3

css

Uploaded by

Suresh M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

WEB PROGRAMMING BCA 4TH SEMESTER

UNIT -III
HTML Tables – table creations tags, Nested Tables
Frames: Frame introduction - frame creation tags – Nested Frames – Forms: Form
Controls: textbox, button, password, checkbox, radio button, select, text area -
Processing of forms

 HTML Tables

 1. TABLES IN HTML:
Table is a collection of rows and columns. Using tables we can
present the data in row wise and column wise. Using tables to provide an information in an
organised way. The following tags are used to create tables in an HTML document.
 Table tag
 Table row tag
 Table data tag
 Table heading tag
 Caption tag

 Table tag:
It is a primary tag. This tag is used to create tables in a webpage.It
is represented as <table>. It is a container tag . It contains following attributes:

 Border : This attribute specifies the border of the table.


 Bordercolor : This attribute specifies the bordercolor of the table
 Align : This attribute specifies the alignment of the table
 Bgcolor : This attribute specifies the background-color of the table
 Cellpadding : This attribute provides the space between the cell content and the table
cell.
 Cellspacing : This attribute provides the space between the two cells in a table.

The general form is:


<table border=”value” bordercolor=”colorname/coding” align=”left/center/right”
Bgcolor=”colorname/coding” cellpadding=”value” cellspacing=”value”>
………………….</table>

 Table row tag:


This tag is used to set a row on the table. It is represented as <tr>. It is a
container tag. It contains bgcolor attribute.
Syntax: <tr bgcolor=“colorname”>

 Table data tag:


This tag is used to store data on the particular row of a table. It
represented as <td>. It is a container tag. It contains two special attributes, those
are ROWSPAN and COLSPAN. The rowspan attribute defines the space between
two or more rows and colspan attribute defines the space between two or more
coloumns in a table.
Syntax: <td align=“center/left/right rowspan=“value” colspan=“value”>

RAO’S DEGREE COLLEGE M.SURESH MCA Page 1


WEB PROGRAMMING BCA 4TH SEMESTER

 Table Heading tag:


This tag is used to create a heading for the row in a table . It is
represented as <th>. It is a container tag.
Syntax:
<th align=”left/center/right”>…………………..</th>

 Caption tag :
This tag is used to create a small headings for the table. It is
represented as <caption>. It is a container tag.
Syntax: <caption>…………………………………..</caption>

Syntax: Structure of a TABLE:


<caption> --------</caption>
<Table>
<tr>
<th>.......</th>
<th>......</th>
...............
................
</tr>
<tr>
<td>.......</td>
<td>......</td>
...............
................
</tr>
<tr>
<td>.......</td>
<td>......</td>
...............
................
</tr>
<tr>
<td>.......</td>
<td>......</td>
...............
................
</tr>
</table>.

Ex:
<html>
<head></head>
<body>
<h1 align="center"><caption>Student Table</caption></h1>
<table border="4" bordercolor="red" align="center" cellpadding="10"
cellspacing="5" bgcolor="#ff4466">
<tr bgcolor="yellow">

RAO’S DEGREE COLLEGE M.SURESH MCA Page 2


WEB PROGRAMMING BCA 4TH SEMESTER

<th>sno</th>
<th>sname</th>
<th>marks</th>
</tr>
<tr>
<td>101</td>
<td> suresh</td>
<td>99</td>
</tr>
<tr>
<td>102</td>
<td>tirupal</td>
<td>100</td>
</tr>
<tr>
<td>103</td>
<td> Gopi</td>
<td>98</td>
</tr>
</table>
</body>
</html>

Output:

2. NESTED TABLES IN HTML:


Nested table is a table. It consists of a table inside another table..
By using nested tables, the web page provides visually interesting and how the
potential of introducing errors depend on its nesting nature.
Nested table always placed between the table data tag.. The
below example create a table inside another four tables. Each table consist of rows
and coloumns.

RAO’S DEGREE COLLEGE M.SURESH MCA Page 3


WEB PROGRAMMING BCA 4TH SEMESTER

Ex:
<html>
<head>
<h1 align="center">Nested Tables</h1></head>
<body>
<table border="4" bordercolor="red" align="center">
<tr>
<td align="center"> First Row</td>
<td>
<table border="8" bordercolor="blue" align="center">
<tr>
<td>First Row</td>
</tr>
<tr>
<td>Second Row</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="6" bordercolor="green" align="center">
<tr>
<td>
<ul>
<li>Merit</li>
<li> Dull</li>
<li>Average</li>
</ul>
</td>
</tr>
</table>
</td>

<td>
<table border="8" bordercolor="yellow" align="center">
<tr>
<td> B.Sc & BCA students</td>
</tr>
</table>
</td>
</tr>

</table>
</body>
</html>

Output:

RAO’S DEGREE COLLEGE M.SURESH MCA Page 4


WEB PROGRAMMING BCA 4TH SEMESTER

 Frames
 3. Frames in HTML:
A frame allows the programmers to divide the browser window
into multiple sections. Each section acting independently to each other. The
following tags are used to create frames in HTML. They are <frameset> and <frame>.
 Frameset tag:
A collection of frames in the browser window is known as Frameset.
This tag determines how the screen will be divided into various frames either
vertically or horizontally. It is a container tag. This tag contains number of attributes.
They are:

ATTRIBUTE VALUE DESCRIPTION

Rows %(percentage) It specifies how many


rows are to be contained
in the frameset

Cols %(percentage) It specifies how many


coloumns are to be
contained in the frameset.

Border Value(in pixels) It specifies the border


width around theframe

Bordercolor Colorname/Hexadecimal It specifies the bordr color

RAO’S DEGREE COLLEGE M.SURESH MCA Page 5


WEB PROGRAMMING BCA 4TH SEMESTER

coding for the frame

Framespacing Value(in pixels) It specifies the space


between the frames

 Frame tag:
This tag defines the dimensions of the frame. It is a non-container
tag. Each frame is along with a frameset tag. This tag contains number of attributes.
They are:

ATTRIBUTE VALUE DESCRIPTION

Name Any name It specifies the name of the


fame.

Src url It specifies the URL for the


document to combined with
in a frame.

Marginheight Value in pixels It specifies the number of


pixels to use as top or
bottom margins with in a
frame.

Marginwidth Value in pixels It specifies the number of


pixels to use as left or right
margins with in a frame.

Scrolling Yes/no It specifies the scrollbars


are provided with in a
frame.

Syntax:
<frameset rows=“%,%” cols=“%,%” border=“value”
bordercolor=“colorname/coding”
framespacing=“value”>
<frame name=“anyname” src=“url” marginheight=“value”
marginwidth=“value” scrolling=“yes/no”>
<frame name=“anyname” src=“url” marginheight=“value”
marginwidth=“value” scrolling=“yes/no”>
<frame name=“anyname” src=“url” marginheight=“value”
marginwidth=“value” scrolling=“yes/no”>
-------------------
-------------------

RAO’S DEGREE COLLEGE M.SURESH MCA Page 6


WEB PROGRAMMING BCA 4TH SEMESTER

--------------------
</frameset>

Example program:
 Save as frame.html
<html>
<frameset rows="30%,70%" border="20" bordercolor="red"
framespacing="20">
<frame name="a" src="head.html" border="20" bordercolor="red">
<frameset cols="40%,60%">
<frame name="b" src="link.html" borde="20" bordercolor="green">
<frame name="c" src="matter.html" border="20" bordercolor="pink">
</frameset>
<frameset>
</html>

 Save as head.html
<html>
<head></head>
<body>
<h1 align="center">Satya Technologies</h1>
<h2 align="center">Hyderabad</h2>
</body>
</html>

 Save as matter.html
<html>
<head></head>
<body>
<h1>It is old Institute in Hyderabad.
It has many computer courses like
c,c++,Java,Python ,Dotnet etc.</h1>
</body>
</html>

 Save as link.html
<html>
<head>
</head>
<body>
<a href="fees.html">fees</a><br>
<a href="course.html">course</a>
</body>
</html>

RAO’S DEGREE COLLEGE M.SURESH MCA Page 7


WEB PROGRAMMING BCA 4TH SEMESTER

 Save as fees.html
<html>
<head></head>
<body>
<b><u> Fees Details:</u></b>
<ul>
<li>5000</li>
<li>6000</li>
</ul>
</body>
</html>

 Save as course.html
<html>
<head>
</head>
<body >
<i><u> Courses Offered</i></b><br>
<ul type="circle">
<li>Python</li>
<li> cloud computing</li>
</ul>
</body>
</html>

Output:

RAO’S DEGREE COLLEGE M.SURESH MCA Page 8


WEB PROGRAMMING BCA 4TH SEMESTER

4. Nested Frames in HTML:


A nested frame means a frame inside another frame.
Nested frames provide the improve the performance of web page. A frame allows the
programmers to divide the browser window into multiple sections. Each section
acting independently to each other. The following tags are used to create frames in
HTML. They are <frameset> and <frame>.

RAO’S DEGREE COLLEGE M.SURESH MCA Page 9


WEB PROGRAMMING BCA 4TH SEMESTER

 Frameset tag:
A collection of frames in the browser window is known as Frameset.
This tag determines how the screen will be divided into various frames either
vertically or horizontally. It is a container tag. This tag contains number of attributes.
They are:

ATTRIBUTE VALUE DESCRIPTION

Rows %(percentage) It specifies how many


rows are to be contained
in the frameset

Cols %(percentage) It specifies how many


coloumns are to be
contained in the frameset.

Border Value(in pixels) It specifies the border


width around theframe

Bordercolor Colorname/Hexadecimal It specifies the bordr color


coding for the frame

Framespacing Value(in pixels) It specifies the space


between the frames

 Frame tag:
This tag defines the dimensions of the frame. It is a non-container
tag. Each frame is along with a frameset tag. This tag contains number of attributes.
They are:

ATTRIBUTE VALUE DESCRIPTION

Name Any name It specifies the name of the


fame.

Src url It specifies the URL for the


document to combined with
in a frame.

Marginheight Value in pixels It specifies the number of


pixels to use as top or
bottom margins with in a
frame.

Marginwidth Value in pixels It specifies the number of


pixels to use as left or right

RAO’S DEGREE COLLEGE M.SURESH MCA Page 10


WEB PROGRAMMING BCA 4TH SEMESTER

margins with in a frame.

Scrolling Yes/no It specifies the scrollbars


are provided with in a
frame.

Syntax:
<frameset rows=“%,%” cols=“%,%” border=“value”
bordercolor=“colorname/coding”
framespacing=“value”>
<frame name=“anyname” src=“url” marginheight=“value”
marginwidth=“value” scrolling=“yes/no”>
<frame name=“anyname” src=“url” marginheight=“value”
marginwidth=“value” scrolling=“yes/no”>
<frame name=“anyname” src=“url” marginheight=“value”
marginwidth=“value” scrolling=“yes/no”>
-------------------
-------------------
--------------------
</frameset>

Example program:
Save as frames.html:

<html>
<frameset cols="20%,60%,20%" border="4" bordercolor="red"
framespacing="2">
<frameset rows="50%,50%" border="4" bordercolor="green"
framespacing="2">
<frame name="a" src="frame1.html" marginheight="100"
marginwidth="100" scrolling="yes">
<frame name="b" src="frame2.html" marginheight="100"
marginwidth="100" scrolling="yes">
</frameset>
<frame name="c" src="frame3.html" marginheight="200" marginwidth="200"
scrolling="yes">
<frame name="d" src="frame4.html" marginheight="100" marginwidth="100"
scrolling="yes">
</html>

Save as frame1.html:

RAO’S DEGREE COLLEGE M.SURESH MCA Page 11


WEB PROGRAMMING BCA 4TH SEMESTER

<html>
<head>
<title> frame1</title>
</head>
<body>
<h1 align="center"> FRAME1</h1>
</body>
</html>

Save as frame2.html:

<html>
<head>
<title> frame2</title>
</head>
<body>
<h1 align="center"> FRAME2</h1>
</body>
</html>

Save as frame3.html:

<html>
<head>
<title>frame3</title>
</head>
<body>
<table border="4" bordercolor="#3388dd" align="center">
<tr>
<td colspan="2" align="center"> frame inside table</td>
</tr>
<tr>
<td>
<ul>
<li>HTML</li>
<li>XML</li>
<li>DHTML</li>
</ul>
</td>
<td>
web related courses
</td>
</tr>
<tr>
<td colspan="2" align="center"> www.w3schools.com</td>
</tr>
</table>

RAO’S DEGREE COLLEGE M.SURESH MCA Page 12


WEB PROGRAMMING BCA 4TH SEMESTER

</body>
</html>
Save as frame4.html:

<html>
<head>
<title> frame4</title>
</head>
<body>
<h1 align="center"> FRAME4</h1>
</body>
</html>

Output:

5. Explain FORMS in HTML or Explain form elements or Explain


Web Forms in HTML?
Forms are used to add an element of interactions to a website. If
we want to use forms check with the system administrator of your server, that allows
to run CGI script after the user fills the form. The input is directed to the program
running on the web server. In most cases a particular control called submit is used to
gather the information and send it to the proper designation on your website.
The following tags are used to create forms in HTML.
 Form tag.
 Input tag.

 FORM TAG:
This tag contains interface elements such as textbox, password field, radio
buttons, check box, action buttons, combobox and textarea.

RAO’S DEGREE COLLEGE M.SURESH MCA Page 13


WEB PROGRAMMING BCA 4TH SEMESTER

 INPUT TAG:
This tag defines a form control for the user to enter input. This
tag must be along with in the form tag.
The following attributes are used in input tag:
 Type: It specifies the type of the form control
 Name: It specifies the name of the form control
 Size: It specifies the size of the form control
 Value: It specifies the value of the form control

Syntax:
<form>
<input type=“form element type” name=“name” value=“value” size=“size”>
--------------
---------------
----------------
</form>
The form elements are:
 Textbox:
It is a rectangular shaped field in which the user can enter the text . The general
form is:
<input type=”textbox” name=”any name” value=”any value” size=”any size”>

 Password field:
This element is used to display the invisible characters. The general form is:
<input type=”password” name=”any name” value=”any value” size=”any size”>

 Radio buttons:
It is also called as group of buttons, from which only one can be selected at a
time, that means pushing button forced, currently selected or deleted. The general
form is:
<input type=”radio” name=”any name” value=”any value” size=”any size”>

 Checkbox:
It is represented by an icon , that the user can select or deselect by clicking on it.
By using checkbox, the user can easily spevify all preferences. The general form is:
< input type=”checkbox” name=”any name” value=”any value” size=”any size”>

 Combobox:
This element is used to specify the list of items from the list.The following tags
are used to create the combobox element.They are <select> and <option>. The
general form is:
<select name=”any name” value=”any value” size=”any size”>
<option>...................</option>
<option>....................</option>
......................................
......................................
......................................

RAO’S DEGREE COLLEGE M.SURESH MCA Page 14


WEB PROGRAMMING BCA 4TH SEMESTER

</select>.

 Action buttons(SUBMIT AND RESET):


When the user clicks “submit” button, the value that have been enclosed one
form into the program that process the form> The general form is:
<input type=”submit” name=’any name” value=”submit” size=”anysize”>
The reset button is used to allow the user to clear all the inputs that they have
for
Entered into the forms. The general form is:
<input type=”reset” name=”any name’ value=’any value” size=”any size”>

 Textarea:
This element defines the form controls , for the user to enter multiline input
tet. This element contains two special attributes, those are “rows” and “cols”. The
general form is:
<textarea name=”any name” rows=”value” cols=”value”>
</textarea>

NOTE: The form elements combobox and textarea are container tags.
Remaining all form controls are non-container.

Ex:

<html>
<head>
<h1 align="center">Rao's Degree College</h1>
<h2 align="center">Nellore</h2>
</head>
<hr align="center" size="20%" width="30%" color="red">
<body bgcolor="blue">
<form>
<p align="center">
Enter name &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <input
type="textbox" name="tb1"><br><br>
Enter Father's name <input type="textbox" name="tb2"><br><br>
Enter password &nbsp &nbsp <input type="password"><br><br>
select gender <input type="radio" name="r1"> Male &nbsp &nbsp &nbsp
&nbsp &nbsp &nbsp <input type="radio" name="r2"> Female<br><br>
select hobbies<input type="checkbox" name="cb1"> singing
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<input type="checkbox" name="cb2" > dancing<br><br>
Select Qualification <select >
<option>ssc</option>
<option>Inter</option>
<option> degree</option>
<option>pg</option>
</select><br><br>

Describe ur self <textarea name="ta" rows="20" cols="20">

RAO’S DEGREE COLLEGE M.SURESH MCA Page 15


WEB PROGRAMMING BCA 4TH SEMESTER

</textarea><br><br>
<input type="submit" value="Submit"> &nbsp &nbsp &nbsp &nbsp
&nbsp
&nbsp <input type="reset" value="Reset">

</p>
</form>
</body></html>

Output:

RAO’S DEGREE COLLEGE M.SURESH MCA Page 16

You might also like