2b. Web Technology HTML Basics-2

Web Technology
HTML-2
Dr. Jyoti Yadav

Frames
 Frames are a relatively new addition to the HTML
standard. First introduced in Netscape Navigator 2.0.
Objectives:
Upon completing this section, you should be able to:
 Create a Frame based page.
 Work with the Frameset, Frame, and Noframes elements.
 Use the attributes of the Frames elements to control the
display.
 Set Targets appropriately.
2

Frames
A framed page is actually made up of multiple HTML
pages. There is one HTML document that describes how
to break up the single browser window into multiple
windowpanes. Each windowpane is filled with an HTML
document.
For Example to make a framed page with a windowpane
on the left and one on the right requires three HTML
pages. Doc1.html and Doc2.html are the pages that
contain content. Frames.html is the page that describes
the division of the single browser window into two
windowpanes. 3

Frames
4
Doc2.html
Doc1.html
Frames.html
Doc2.html
Doc1.html

Frame Page Architecture
A <FRAMESET> element is placed in the html
document before the <BODY> element. The
<FRAMESET> describes the amount of screen real
estate given to each windowpane by dividing the
screen into ROWS or COLS.
The <FRAMESET> will then contain <FRAME>
elements, one per division of the browser window.
Note: Because there is no BODY container, FRAMESET
pages can't have background images and background
colors associated with them. 5

Frame Page Architecture
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
<FRAMeSET COLS=“23%,77%”>
<FRAME SRC=“Doc1.html”>
<FRAME SRC=“Doc2.html”>
</FRAMeSET >
</HEAD>
</HTML> 6

7
FRAMESET COLS=”23%, 77%”
FRAME
NAME=right_pane
SRC= Doc2.html
FRAME
NAME= left_pane
SRC=Doc1.html
The Diagram below is a graphical view of the
document described above

<FRAMESET> Container
<FRAMESET> : The FRAMESET element creates divisions in the
browser window in a single direction. This allows you to define
divisions as either rows or columns.
ROWS : Determines the size and number of rectangular rows
within a <FRAMESET>. They are set from top of the display area
to the bottom.
Possible values are:
Absolute pixel units, I.e. “360,120”.
A percentage of screen height, e.g. “75%,25%”.
Proportional values using the asterisk (*). This is often
combined with a value in pixels , e.g. “360,*”.
<Frameset cols=“200,20%,*,2*”> 8

Creating a Frames Page
COLS: Determines the size and number of rectangular columns
within a <FRAMESET>. They are set from left to right of the
display area.
Possible values are:
Absolute pixel units, I.e. “480,160”.
A percentage of screen width, e.g. “75%,25%”.
Proportional values using the asterisk (*). This is often
combined with a value in pixels , e.g. “480,*”.
9

Creating a Frames Page
 FRAMEBORDER : Possible values 0, 1, YES, NO. A setting of zero will
create a borderless frame.
 FRAMESPACING: This attribute is specified in pixels. If you go to
borderless frames you will need to set this value to zero as well, or you will
have a gap between your frames where the border used to be.
 BORDER(thickness of the Frame): This attribute specified in pixels. A
setting of zero will create a borderless frame. Default value is 5.
 BORDERCOLOR: This attribute is allows you choose a color for your
border. This attribute is rarely used.
10

<FRAME>
<FRAME>: This element defines a single frame within a
frameset. There will be a FRAME element for each division
created by the FRAMESET element. This tag has the
following attributes:
SRC: Required, as it provides the URL for the page that will
be displayed in the frame.
NAME: Required for frames that will allow targeting by
other HTML documents. Works in conjunction with the
target attribute of the <A>, <AREA>, <BASE>, and <FORM>
tags. 12

<FRAME>
 MARGINWIDTH: Optional attribute stated in pixels. Determines
horizontal space between the <FRAME> contents and the frame’s
borders.
 MARGINHEIGHT: Optional attribute stated in pixels. Determines
vertical space between the <FRAME> contents and the frame’s borders.
 SCROLLING: Displays a scroll bar(s) in the frame. Possible values are:
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame contents.
By default: scrolling is auto.
13

<FRAME>
• NORESIZE: Optional – prevents viewers from resizing the frame. By
default the user can stretch or shrink the frame’s display by selecting the
frame’s border and moving it up, down, left, or right.
14

<NOFRAMES>
<NOFRAMES>: Frame – capable browsers ignore all HTML
within this tag including the contents of the BODY element. This
element does not have any attributes.
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
</HEAD>
15

<NOFRAMES>
<FRAMESET COLS="23%,77%">
<FRAME SRC="" NAME="left_pane“>
<FRAME SRC="" NAME="right_pane">
<NOFRAMES>
<P> This is a Framed Page. Upgrade your browser to support
frames.</P>
</NOFRAMES></FRAMESET>
16

Compound FRAMESET Divisions
In this case a second FRAMESET element will be
inserted in the place of the FRAME element that would
describe the second row.
The second FRAMESET element will divide the
remaining screen real estate into 2 columns.
This nested FRAMESET will then be followed by 2
FRAME elements to describe each of the subsequent
frame divisions created.
17

18
<html>
<head>
<title> Compound Frames Page</title>
</head>
<frameset rows=“120,*”>
<frame src=“banner_file.html”
name”banner”>
<frameset cols=“120,*”>
<frame src=“links_file.html”
name=“links”>
<frame src=“content_file.html”
name=“content”>
<noframes>
<p>
Default message
</p>
</noframes>
</frameset>
</frameset>
</head>

19
Banner File
Contents File
Links
File
You may want to create a frames design with a
combination of rows and columns.

Compound FRAMESET Divisions Example
<HEAD>
<FRAMESET ROWS="25%,50%,25%”
<FRAME SRC="">
<FRAMESET COLS="25%,*">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
<FRAME SRC="">
</FRAMESET>
</HEAD>
20

Frame Formatting
• Example:
<frameset rows=“20%, *, 20%”>
<frame src=“header.html” noresize scrolling=no>
<frame src=“body.html”>
<frame src=“navigationbar.html” noresize
scrolling=no>
</frameset>
25

What do the following mean?
1. <FRAMESET COLS="2*, 3*, 5*">
2. <FRAMESET COLS="150, 20%, *, 3*">
So what are the space-allocation priorities? Absolute pixel
values are always assigned space first, in order from left to
right. These are followed by percentage values of the total
space. Finally, proportional values are divided based upon what
space is left.
26

Generic Frame Formula
• The <FRAME> tag has six associated attributes: SRC, NAME,
MARGINWIDTH, MARGINHEIGHT, SCROLLING, and NORESIZE.
Here's a complete generic FRAME:
• <FRAME SRC="url" NAME="window_name"
SCROLLING=YES|NO|AUTO MARGINWIDTH="value"
MARGINHEIGHT="value"
NORESIZE>
27

What will be the Output?
<FRAMESET ROWS="*, 2*, *" COLS="2*, *">
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
</FRAMESET>
28

Targets
When you use links for use in a frames environment you will
need to specify an additional attribute called TARGET.
The TARGET attribute uses the NAME attribute of the FRAME
element.
If we were to place a link in doc1.html that linked to doc3.html
and we wanted doc3.html to be displayed in the right
windowpane; the HTML code would appear in doc1.html as
follows:
<A HREF=“doc3.html” TARGET=“right_pane”>Link to Document
3 </A>
29

Special Targets
There are 4 special target names that cannot be assigned by the NAME attribute of
the FRAME tag.
1. TARGET=“_top” : This loads the linked document into the full browser window
with the URL specified by the HREF attribute. All frames disappear, leaving the
new linked page to occupy the entire window. The back is turned on.
2. TARGET=“_blank” : Opens an unnamed new browser window and loads the
document specified in the URL attribute into the new window (and your old
window stays open). The back is turned off. Other windows remains on.
3. TARGET=“_self” : Loads the document in the same window where the anchor
was {Clicked}. This is the default setting for linking elements.
4. TARGET=“_parent” : the _parent frame is a prior frameset that the current
frameset was “spawned” from. If there isn’t one it is the browser window. The
document is loaded into the area occupied by the columns or rows frameset
containing the frame that contains the link. The back is turned on. All windows
disappear.
30

31
If a frame contains the following link, then clicking the link launches a
new, unnamed browser display window that contains the content
defined in stuff.HTM. This can be a simple HTML document, or an
entirely new FRAMESET definition.
1. <A HREF="stuff.html" TARGET="_blank">
If a frame contains the following link, then clicking the link will simply
cause the frame which contains the link to clear, and its content will be
replaced with whatever is in stuff.htm.
2. <A HREF="stuff.html" TARGET="_self">
If a frame contains the following link, the frameset that contains the
frame that contains this link will be replaced by stuff.HTM.
3. <A HREF="stuff.html" TARGET="_parent">
Finally, if a frame contains the following link, clicking the link replaces
the entire browser window with the contents of stuff.HTM.
4. <A HREF="stuff.html" TARGET="_top">

32
TheTARGET attribute allows you to specify the frame into which a
page is to be loaded into in a frames setting.
<A HREF=“chap1.html”TARGET=“_self”> [Chapter 1]</A>
<A HREF=“chap1.html”TARGET=“_parent”> [Chapter 2]</A>
Parent window
Learning HTML
[Chapter 1][Chapter 2][Chapter 3]
chap1.html
chap2.html
Targeting links to frames

33
TheTARGET attribute allows you to specify the frame into which a page is to be loaded
into in a frames setting.
<A HREF=“chap1.html”TARGET=“bottom”> [Chapter 1]</A>
Learning HTML
[Chapter 1][Chapter 2][Chapter 3]
chap1.html
chap2.html
chap3.html
Targeting links to frames

Forms
 Forms add the ability to web pages to not only provide the person viewing the
document with dynamic information but also to obtain information from the
person viewing it, and process the information.
Objectives:
Upon completing this section, you should be able to
1. Create a FORM.
2. Add elements to a FORM.
3. Define CGI (Common Gateway Interface).
4. Describe the purpose of a CGI Application.
5. Specify an action for the FORM.
 Forms work in all browsers.
 Forms are Platform Independent.
34

Forms
 To insert a form we use the <FORM></FORM> tags.The rest of the form
elements must be inserted in between the form tags.
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = http://www.xnu.com/formtest.asp>
<P> First Name: <INPUTTYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”>
</P>
<P> <INPUTTYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P>
</FORM>
</BODY> </HTML> 35

<FORM> element attributes
ACTION: is the URL of the CGI (Common Gateway Interface)
program that is going to accept the data from the form, process it,
and send a response back to the browser.
METHOD: GET (default) or POST specifies which HTTP method will
be used to send the form’s contents to the web server.The CGI
application should be written to accept the data from either method.
NAME: is a form name used byVBScript or JavaScripts.
TARGET: is the target frame where the response page will show up.
36

Form Elements
 Form elements have properties:Text boxes, Password boxes,
Checkboxes, Option(Radio) buttons, Submit, Reset, File, Hidden and
Image.
 The properties are specified in theTYPE Attribute of the HTML element
<INPUT></INPUT>.
37

Form Elements
<INPUT> Element’s Properties
TYPE = Type of INPUT entry field.
NAME = Variable name passed to CGI application
VALUE = The data associated with the variable name to be
passed to the CGI application
CHECKED = Button/box checked
SIZE = Number of visible characters in text field
MAXLENGTH = Maximum number of characters accepted.
39

Text boxes: Used to provide input fields for text, phone numbers,
dates, etc.
<INPUTTYPE= "TEXT " >
Browser will display
Textboxes use the following attributes:
 TYPE: text.
 SIZE: determines the size of the textbox in characters. Default=20
characters.
MAXLENGHT : determines the maximum number of characters that
the field will accept.
 NAME: is the name of the variable to be sent to the CGI application.
 VALUE: will display its contents as the default value.
40
Text Box

Example on Text Box
<TITLE>FormText_Type</TITLE>
</HEAD> <BODY>
<h1> <font color=blue>Please enter the following bioData</font></h1>
<FORM name="form1" Method= " get " Action= " URL " >
First Name: <INPUTTYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>
Last Name: <INPUTTYPE="TEXT" NAME="LName"
Nationality: <INPUTTYPE="TEXT" NAME="Country"
The Phone Number: <INPUTTYPE="TEXT" NAME="Phone"
</FORM> </BODY> </HTML>
41

Password:Used to allow entry of passwords.
<INPUTTYPE= " PASSWORD " >
Text typed in a password box is starred out in the browser display.
Password boxes use the following attributes:
 TYPE: password.
 SIZE: determines the size of the textbox in characters.
 MAXLENGTH: determines the maximum size of the password in
characters.
 VALUE: is usually blank.
43
Password

Hidden
Hidden: Used to send data to the CGI application that you
don’t want the web surfer to see, change or have to enter but
is necessary for the application to process the form correctly.
<INPUTTYPE=“HIDDEN”>
Nothing is displayed in the browser.
Hidden inputs have the following attributes:
TYPE: hidden.
NAME: is the name of the variable to be sent to the CGI
application.
VALUE: is usually set a value expected by the CGI application.45

Check Box: Check boxes allow the users to select more than one
option.
<INPUTTYPE=“CHECKBOX”>
Checkboxes have the following attributes:
 TYPE: checkbox.
 CHECKED: is blank or CHECKED as the initial status.
 VALUE: is usually set to a value. 46
Check Box

• <HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
• <BODY>
• <h1> <font color=green>Please check one of the following</font></h1>
• <FORM name="form3" Action="url" method="get">
• <font color=red> Select City: </font><BR>
• Delhi:<INPUTTYPE="CheckBox" Name=“City" CHECKED><BR>
• Mumbai:<INPUTTYPE="CheckBox" Name=“City"><BR>
• Kolkatta:<INPUTTYPE="CheckBox" Name=“City"><BR> <BR>
• <font color=blue>Select Language:</font><BR>
• English:<INPUTTYPE="CheckBox" Name="language"CHECKED><BR>
Hindi:<INPUTTYPE="CheckBox" Name="language"><BR>
• Marathi:<INPUTTYPE="CheckBox" Name="language"> <BR>
• </FORM>
• </BODY>
• </HTML> 47

Radio Button:Radio buttons allow the users to select only one option.
<INPUTTYPE=“RADIO”>
Radio buttons have the following attributes:
 TYPE: radio.
 CHECKED: is blank or CHECKED as the initial status. Only one radio button can
be checked
NAME: is the name of the variable to be sent to the CGI application.
 VALUE: usually has a set value.
49
Radio Button

• <HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
• <BODY>
• <h1> <font color=green>Please check one of the following</font></h1>
• <FORM name="form3" Action="url" method="get">
• <font color=red> Select City: </font><BR>
• Delhi:<INPUTTYPE=“Radio" Name=“City" CHECKED><BR>
• Mumbai:<INPUTTYPE=" Radio " Name=“City"><BR>
• Kolkatta:<INPUTTYPE=" Radio" Name=“City"><BR> <BR>
• <font color=blue>Select Language:</font><BR>
• English:<INPUTTYPE=" Radio " Name="language"CHECKED><BR>
Hindi:<INPUTTYPE=" Radio" Name="language"><BR>
• Marathi:<INPUTTYPE=" Radio " Name="language"> <BR>
• </FORM>
• </BODY>
• </HTML> 50

52
<HTML><HEAD>
<TITLE>RADIOBox</TITLE> </HEAD>
<BODY>
Form #1:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="one"> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="two"> No.
</FORM>
<HR color=red size="10" >
Form #2:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="three"
CHECKED> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="four"> No.
</FORM>
</BODY></HTML>

Push Button:This element would be used with JavaScript to cause an
action to take place.
<INPUTTYPE=“BUTTON”>
Push Button has the following attributes:
 TYPE: button.
 NAME: is the name of the button to be used in scripting.
 VALUE: determines the text label on the button.
54
Push Button

<DIV align=center><BR><BR>
<FORM>
<FONT Color=red>
<h1>Press Here to see Form1 :<BR>
<INPUT TYPE="button" VALUE="PressMe"><BR><BR>
<FONT Color=blue>
Click Here to see Form2:<BR>
<INPUT TYPE="button" VALUE="ClickMe" > <BR><BR>
<FONT Color=green>
Hit Here to see Form3:<BR>
<INPUT TYPE="button" VALUE="HitME" > <BR><BR>
<FONT Color=yellow>
</FORM></DIV>
55

Submit: Every set of Form tags requires a Submit button. This is the
element causes the browser to send the names and values of the other
elements to the CGI Application specified by the ACTION attribute of the
FORM element.
<INPUTTYPE=“SUBMIT”>
The browser will display
Submit has the following attributes:
 TYPE: submit.
 NAME: value used by the CGI script for processing.
 VALUE: determines the text label on the button, usually Submit Query.57
Submit Button

58
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25 name="firstName"><BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color=red>
Press Here to submit the data:<BR>
<INPUT TYPE="submit" VALUE="SubmitData " >
</FORM>

• Reset: It is a good idea to include one of these for each form
where users are entering data. It allows the surfer to clear all the
input in the form.
• <INPUTTYPE=“RESET”>
• Browser will display
• Reset buttons have the following attributes:
• TYPE: reset.
• VALUE: determines the text label on the button, usually Reset.
60
Reset Button

61
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25 name="firstName">
<BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color = red>
<STRONG><font size=5>Press Here to submit the
data:</font></STRONG><BR>
<INPUT TYPE="submit" VALUE="SubmitData">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>

Image Submit Button:Allows you to substitute an image for the
standard submit button.
<INPUT TYPE=“IMAGE” SRC=“India.gif”>
Image submit button has the following attributes:
 TYPE: Image.
 NAME: is the name of the button to be used in scripting.
 SRC: URL of the Image file.
63
Image Submit Button

64
<form>
<H1><font color=blue>
Click to go India’s Map:
<INPUT TYPE="IMAGE" SRC=“India.gif">
</form>

• File Upload:You can use a file upload to allow surfers to upload files to your
web server.
• <INPUTTYPE=“FILE”>
• Browser will display
• File Upload has the following attributes:
• TYPE: file.
• SIZE: is the size of the text box in characters.
• NAME: is the name of the variable to be sent to the
CGI application.
• MAXLENGHT: is the maximum size of the input in the textbox in
characters. 65
File

<BODY bgcolor=lightblue>
<form>
<H3><font color=forestgreen>
Please attach your file here to for uploading to
My <font color =red>SERVER...<BR>
<INPUT TYPE="File" name="myFile" size="30">
<INPUT TYPE="Submit" value="SubmitFile">
</form>
</BODY>
66

<TEXTAREA></TEXTAREA>: is an element that allows for free
form text entry.
Text area has the following attributes:
NAME: is the name of the variable to be sent to the CGI
application.
ROWS: the number of rows to the textbox.
COLS: the number of columns to the textbox. 67
Other Elements used in Forms

68
<form>
<TEXTAREA COLS=40 ROWS=20 Name="comments" >
The National Pledge is an oath of allegiance to the Republic of India. It is commonly
recited by Indians in unison at public events, especially in schools, and during the
Independence Day and Republic Day celebrations. It is commonly found printed in
the opening pages of school textbooks and calendars.
</TEXTAREA>:
</form>
</BODY>

The two following examples are <SELECT></SELECT> elements,
where the attributes are set differently.
The Select elements attributes are:
NAME: is the name of the variable to be sent to the CGI application.
SIZE: this sets the number of visible choices.
MULTIPLE: the presence of this attribute signifies that the user can
make multiple selections. By default only one selection is allowed.
72

73
<form>
Select the cities you have visited:
<SELECT name=“list” size=5>
<option> London</option>
<option> Tokyo</option>
<option> Paris</option>
<option> New York</option>
<option> LA</option>
<option> KL</option>
</SELECT>
</form>
</BODY>

Drop Down List:
Name: is the name of the variable to be sent to the
CGI application.
Size: 1.
75

List Box:
Name: is the name of the variable to be sent to the CGI
application.
SIZE: is greater than one.
76

Option
The list items are added to the <SELECT> element by
inserting <OPTION></OPTION> elements.
The Option Element’s attributes are:
SELECTED:When this attribute is present, the option is
selected when the document is initially loaded. It is an
error for more than one option to be selected.
VALUE: Specifies the value the variable named in the
select element.
77

</HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=4>
<OPTION value="IBM" SELECTED> IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq"> Compaq</OPTION>
</SELECT>
</FORM></BODY></HTML>
78

<HEAD> <TITLE>SELECT with Mutiple </TITLE> </HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you
have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=5 multiple>
<OPTION value="IBM" > IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq" SELECTED> Compaq</OPTION>
<OPTION value=" other"> Other</OPTION>
</SELECT>
</FORM></BODY></HTML>
80

2b. Web Technology HTML Basics-2

2b. Web Technology HTML Basics-2

More Related Content

Similar to 2b. Web Technology HTML Basics-2 (20)

More from Jyoti Yadav (19)

Recently uploaded (20)

2b. Web Technology HTML Basics-2