M.FLORENCE DAYANA WEB DESIGN -Unit 3 (frames)

2/25/2019 Ms. M. Florence Dayana Head, Dept of CA 1
Name of the Staff : M.FLORENCE DAYANA M.C.A.,M.Phil.,(Ph.D).,
Head, Dept. of BCA
Bon Secours College For Women
Thanjavur.
Class : III BCA A
Subject : Web Designing
Semester : V
Unit : 3 - Frames

Frames
• The browser shows the web page through a
window. We scroll the web page and see the
entire document through window. The window is
called the container. It is possible to divide the
container into several frames, and use each
frame for displaying a different HTML document..
• Each frame has a given name
• Src specifies frame document URL
Ms. M. Florence Dayana Head, Dept of CA2/25/2019 2

• The Name of the frame begins with an alphabet
with double quotes
• Frame border turns the border of a frame off or
on (0 – off, 1 – on(default))
• Margin height and width sets the amount of
left, right, top and bottom margin spaces (min
value is “2”)
• The default scrolling attribute value is “auto”
which will automatically cause scroll bars to be
added to a frame if they are required.

FRAME STRUCTURE
The definition of the frame is using the <frame> tag.
The<frame> tag may have any of the following
attributes:
 Source HTML address(SRC-specifies the URL)
 Name of the frame(NAME)
 Margin width(MARGIN WIDTH)
 Scrolling button(SCROLLING-either “NO” or
“AUTO”)
 Whether it can be resized (NORESIZE-the frame
is not resizable)

Attribute Description
src This attribute is used to give the file name that should be loaded in the
frame. Its value can be any URL.
For example, src="/html/top_frame.html"
will load an HTML file available in html directory.
name This attribute allows you to give a name to a frame. It is used
to indicate which frame a document should be loaded into..
frameborder This attribute specifies whether or not the borders of that
frame are shown if one is given, and this can take values
either 1 (yes) or 0 (no).
marginwidth This attribute allows you to specify the width of the space between the
left and right of the frame's borders and the frame's content. The value is
given in pixels. For example marginwidth="10".
The <frame> Tag Attributes

Attribute Description
marginheight This attribute allows you to specify the height of the space between
the top and bottom of the frame's borders and its contents. The
value is given in pixels.
For example marginheight="10".
noresize By default you can resize any frame by clicking and dragging on the
borders of a frame.
For example noresize="noresize".
scrolling This attribute controls the appearance of the scrollbars that appear
on the frame.
This takes values either "yes", "no" or "auto".
For example scrolling="no" means it should not have scroll bars.
longdesc This attribute allows you to provide a link to another page containing
a long description of the contents of the frame.
For example longdesc="framedescription.htm"

The size of the frames are mentioned in any one
of the following units.
Row or column frame(rows and cols attribute)
Size of each frame(pixel, percentage, fraction)
Pixel Unit – It simply represents the number
of pixel(picture element) in each
frame. Commas must separate
the numbers
Eg:<Frameset rows=“150,30”>

• Percentage Unit –It divides the window
according to the specified
percentages.
Eg:
• <Frameset rows=“80%,20%”> (percentage)
• Fraction Unit –Instead of using pixel of
percentage units, we can use
fraction units to represent the
relative sizes of the frames.
<Frameset cols=“*,60%”> (fraction)2/25/2019 Ms. M. Florence Dayana Head, Dept of CA 8

Example:
<html>
<head><title>HTML Frames Example - Mixed Frameset
Example</title>
</head>
<frameset rows="25%,*">
<frame src="zframe1.htm">
<frameset cols="*,25%">
</frameset>
</frameset>
</html>

Creating two rows and the second row containing two columns
<html>
<frameset rows=“40%,60%”>
<frame name=“top” src=“d:florenceprg3.html” marginheight=“3”
marginwidth=“3” scrolling=“auto” >
<frameset cols=“40%,60%”>
<frame name=“left” src=“d:florenceprg1.html” marginheight=“3”
<frame name=“right” src=“d:florenceprg2.html” marginheight=“3”
</frameset>
</frameset>
<noframes>
<body bgcolor=“green” text=“red” link=“lime”>
Sorry, This page requires a frames capable browser, feel free to the view
the <a href=“noframe.html”>no frame versions</a>of this page
</noframes>
</html>

Nested framesets
• We want to divide the window column-wise
into three frames then
<frameset cols=“20%,40%,40%>
---
</frameset>
Eg:

Advantages of frames
• One of the most beneficial feature of frames is it lets
the user to have multiple pages in the same browser.
• Using frames we can keep one part of the page static
while changing the other parts of the page.
• Frames can be used to reduce server load, as there is
no need to reload all the pages when ever a new
page is visited.

Disadvantages of Frames
There are few drawbacks with using frames
• Some smaller devices cannot cope with frames often because
their screen is not big enough to be divided up.
• Sometimes your page will be displayed differently on different
computers due to different screen resolution.
• The browser's back button might not work as the user hopes.
• There are still few browsers that do not support frame
technology.
• Its difficult to print the content of all frames when compared
to a normal web page.
• Some browsers doesn't support frames, so we need to place
the content seperately for the people who doesn't have
frames using <noframes> ... </noframes>

FORMS
• Forms are used to get input from the users.
• Forms are the tools to improve user interface
in the web.
• The user input is submitted to the server.
• A form is an area that can contain form
elements.
• <form> </form>

• The form tag has three attributes. They are,
-Action -Method -enctype
1.Action: The action attributes inform the browser the
location of the server to which the form input to
be submitted.
form action=“----path------/index.html”
2. Method: This attribute has only two choices of values.
method=“get” or method=“post”
method=“post” is the recommended protocol.
3.Enctype: This attribute is used to inform the server the way
to handle the encryption process.
<enctype=“application/x-www-form-urlencoded”> 17

DROP DOWN LIST
• A drop down list present a list to the user. The
user can select his choice from the list. This is
done using <select> Tag.
• The <select> tag has three attributes:
• Name attribute
• Size attribute
• Multiple attribute

Name attribute:
• This is assigns a name for a variable, which will
hold the selected choice.
• eg:
• <select name=qualification>
• <option> BCA</option>
• <option> BA</option>
• <option> BSc</option>
• </select>

• Size attribute: This is used adjust the corner in
the field.
• Eg:
<select name=qualification size=3>
<option value=“1”> BCA</option>
<option value=“2”> BA</option>
<option value=“3”> BSc</option>
</select>

• Multiple Attribute: is used , the user can be
given freedom to select more than one of the
options.
Eg:
<select name=qualification multiple=“multiple”>
<option value=“C”> CA</option>
<option value=“B”> BA</option>
<option value=“BS”> BSc</option>
</select>

Commonly used form elements includes:
Text fields Radio buttons Checkboxes Submit buttons
Text Input Fields
• Used when you want the
user to type letters, number,
etc.
<form>
First name: <input
type="text"
name="firstname">
<br>
Last name: <input
type="text"
name="lastname"> </form>
• Output
First name:
Last name:

Submit Button
• When user clicks on the “Submit”
button, the content of the form is
sent to another file.
<form name="input"
action="html_form_action.asp"
method="get"> Username: <input
type="text" name="user">
<br>
<input type="submit"
value="Submit">
</form>
• Output
Username:

Reset Button
• The Reset button is used to reset the values of all the
values in the form of the user.
<form name="input"
action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<br>
<input type=“reset" value=“start">
</form>

Checkboxes
user to select one or more
options of a limited number
of choices.
<form>
<input type="checkbox"
name="bike“ value=“bike”>
I have a bike
<br>
<input type="checkbox"
name="car“ value=“car”>
I have a car </form>
• Output
I have a bike
I have a car

Radio Buttons
user to select one of a
limited number of choices.
<form>
<input type="radio"
name="sex" value="male">
Male
<br>
<input type="radio"
name="sex"
value="female">
Female
</form>
• Output
Male
Female

Text Area
• Used when you want to get
input from user.
<form>
<p>Please provide your
suggestion in the text box
below:</p>
<textarea row=“10”
cols=“30”>
</textarea>
</form>
• Output
Please provide your
suggestion in the text box
below:

Pull-down Menu
• Used when you want user
to respond with one specific
answer with choices you
given.
<p>Select a fruit:</p>
<select name="Fruit">
<option selected> Apples
<option> Bananas
< option > Oranges
</select>
• Output
Select a fruit:

Password
• There is a special type of test field called a
password field which also gets and sends text
input from the user.
• When the user types the input, only
asterisks(*) are displayed on the screen.
Ex:
<p> type your phone number
<input type=“password”>

Hidden Fields
• In the <input> tag, we can specify
type=“hidden” to hide the text typed by the
user.
• This is only for maintaining privacy from other
persons watching the monitor of the
computer.

M.FLORENCE DAYANA WEB DESIGN -Unit 3 (frames)

M.FLORENCE DAYANA WEB DESIGN -Unit 3 (frames)

More Related Content

Similar to M.FLORENCE DAYANA WEB DESIGN -Unit 3 (frames)

More from Dr.Florence Dayana

Recently uploaded

M.FLORENCE DAYANA WEB DESIGN -Unit 3 (frames)