Scribd
Upload
25 views33 pages

Web Designing Using HTML Unit 3

This document provides a comprehensive guide on designing HTML tables using various tags and attributes. It covers the purpose of tables, main tags like <TABLE>, <CAPTION>, <TR>, <TH>, and <TD>, and their associated attributes for formatting and customization. The content includes practical examples and explanations to help learners effectively organize and display data in a webpage.

Uploaded by

Bala Anand
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views33 pages

Web Designing Using HTML Unit 3

This document provides a comprehensive guide on designing HTML tables using various tags and attributes. It covers the purpose of tables, main tags like <TABLE>, <CAPTION>, <TR>, <TH>, and <TD>, and their associated attributes for formatting and customization. The content includes practical examples and explanations to help learners effectively organize and display data in a webpage.

Uploaded by

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

2.

1 LEARNING OBJECTIVE

Unit 2: Designing HTML Table 2 Hello Learners, in the Block 2 - Unit 2you will be able to learn and understand
Designing HTML Table Using Hyper Text Markup Language and its associated
Attributes used to incorporate a table in a Webpage of a Website. After studying this
Unit Structure
Unit student should be able to:
• Organize Data in form of Tables in Webpage using <TABLE> Tag.
2.1. Learning Objectives. • Provide Title to a Table using <CAPTION> Tag.
2.2. Introduction to Designing Tables in HTML. • Format table using Table Tag attributes like: BORDER, BORDERCOLOR,
2.3. HTML Table Main Tags. FRAME, RULES, CELLSPACING, CELLPADDING, ALIGN, BGCOLOR,
HEIGHT AND WIDTH.
2.4. <TABLE> Tag.
• Give Table Heading using Table Heading <TH> Tag.
2.5. <CAPTION> Tag.
• Insert and manage Table Row using <TR> Tag.
2.6. <TH> Tag.
• Add the data in the Table Cell using <TD> Tag and its attributes.
2.7. <TR> Tag.
2.8. <TD> Tag.
2.9. Let us sum up. 2.2 INTRODUCTION TO DESIGNING TABLES IN HTML
2.10. Check your Progress.
Explanation:
2.11. Check your Progress: Possible Answers.
• A table is a grid structured into columns and rows like a Spreadsheet in a
2.12. Further Reading.
Webpage of a Website Design.
2.13. Assignment.
• A Table is a collection of related data arranged in from of cells, rows and
2.14. Activities. columns in a tabular format.
• The Data in Cell can be in form of text, Hyperlinks, images, nested tables or
other.
• The tables are considered as two dimensional complex structures of rows
and Columns of Cell
• An example of basic Table representation is shown in Table 1 below where
the first Row represents Table Header Row 1/ Column 1,Table Header Row
2/ Column 2 and so on while the second row represents Table Row 1/Table
Data 1, Table Row 2/Table Data 6 and so on.

122 123
Table 1: Basic Table Structure • Tag wraps up a table and all its related
Table Header Table Header Table Header Table Header elements.
Row 1/ Column Row 2/ Column Row 3/ Column Row 4/ Column <CAPTION>...</CAPTION> • Defines a caption of a Table.
1 2 3 4 • Used to describe the Title for the Table.
Table Row Table Row Table Row Table Row <TH>...<TH> • Stands for Table Header.
1/Table Data 1 1/Table Data 2 1/Table Data 3 1/Table Data 4 • Defines Table’s Header.
Table Row Table Row Table Row Table Row • By default the contents declared as Table
2/Table Data 5 2/Table Data 6 2/Table Data 6 2/Table Data 8 Header are displayed in a unique style format
. . . . i.e. bold.
. . . . • Stands for Table Row.
. . . . <TR>...</TR> • Defines Table’s each Row.
Table Row Table Row Table Row Table Row • Used to begin new row in a Table.
N/Table Data N N/Table Data N N/Table Data N N/Table Data N <TD>...</TD> • Stands for Table Data.
• Defines Table’s Data of each cell.
Purpose: The Table in Webpage a technique to organize and display data in
• Using it data cells is described.
columns and rows that can be useful for:
Note for Practical: All the Sample code given in Examples must be typed in
• Numeric and Text Data summary and presentation.
notepad with entire HTML Structure saved with .html or .htm extension and
• Category wise communication.
finally open in web browser to get the output.
• Results Displays.
• Comparative Data Analysis. Example 1: HTML program to demonstrate basic Table Tag and its utility in HTML
• Creating Database Document.

Solution:
2.3 HTML TABLE MAIN TAGS
<HEAD>
<TITLE>HTML TABLE MAIN TAGS</TITLE>
Explanation:The main Tag is used to design the basic structure of table. All the
</HEAD>
Tags and sub-Tags are Container Tags. The main tags used to create a Table in
<BODY>
HTML are listed and defined in the below Table 2.
<TABLE>
Table 2: HTML TABLE M AIN T AGS
<CAPTION>A SIMPLE TABLE</CAPTION>
Tag Description
<TR>
<TABLE>... </T ABLE> • Defines a Table with this tag. <TD>ONE</TD>
• It is used to insert table on a Webpage of a <TD>TWO</TD>
Website. <TD>THREE</TD>

124 125
</TR> Solution:
<TR> <HEAD>
<TD>FOUR</TD> <TITLE>HTML TABLE BORDER ATTRIBUTE</TITLE>
<TD>FIVE</TD> </HEAD>
<TD>SIX</TD>
<BODY>
</TR>
<TABLE BORDER=1>
</TABLE>
<CAPTION>A SIMPLE TABLE</CAPTION>
</BODY>
<TR>
<TD>ONE</TD>
Output <TD>TWO</TD>
<TD>THREE</TD>
</TR>
2.4 <TABLE> TAG <TR>
<TD>FOUR</TD>

Explanation: The <TABLE> Tag is the main external tag within which all the other <TD>FIVE</TD>
<TD>SIX</TD>
tags used to create a Table structure are defined.
</TR>
Purpose: Creates a Table like structure in a Webpage of a Website in a HTML
</TABLE>
Document.
</BODY>
Type: Container Tag
Syntax: The table grid is created by enclosing table details with opening <TABLE>
OUTPUT
Tag and a Closing </TABLE> Tag. Example : <TABLE>... Other related tags
used to create a Table ... </TABLE>
Attributes: The <TABLE> Tag has various attributes that contribute to formatting
and customization of the Table Structure. The <TABLE> Tag attributes are • <TABLE> Tag BORDERCOLOR Attribute : The BORDERCOLOR Attribute
listed and described in the below. is used to specify the Border Color of a Table in a Webpage of a Website of
HTML Document. The value of the attribute is given in Hexa value or Color
• <TABLE> Tag BORDER Attribute: The BORDER attribute is used to specify Name. Like : <TABLE BORDERCOLOR= “green”>...</TABLE>
the border of a Table in a Webpage of a Website of HTML Document. The value Example 3: HTML programs to demonstrate BORDERCOLOR attribute of
of the attribute is given in pixel. Like : <TABLE BORDER=3>...</TABLE> <TABLE> Tag.

Solution:
Example 2: HTML programs to demonstrate BORDER attribute of <TABLE>
Tag. <HEAD>
<TITLE>HTML TABLE BORDERCOLOR ATTRIBUTE</TITLE>

126 127
</HEAD> <TABLE BORDER=1 BORDERCOLOR="red"
<BODY> BGCOLOR="green">
<TABLE BORDER=1 BORDERCOLOR="red"> <CAPTION>A SIMPLE TABLE</CAPTION>
<CAPTION>A SIMPLE T ABLE</CAPTION> <TR>
<TR> <TD>ONE</TD>
<TD>ONE</TD> <TD> TWO</TD>
<TD>TWO</TD> <TD>THREE</TD>
<TD>THREE</TD> </TR>
</TR> <TR>
<TR> <TD>FOUR</TD>
<TD>FOUR</TD> <TD>FIVE</TD>
<TD>FIVE</TD> <TD>SIX</TD>
<TD>SIX</TD> </TR>
</TR> </TABLE>
</TABLE> </BODY>
</BODY>
OUTPUT
OUTPUT

• <TABLE> Tag BACKGROUND Attribute: The BACKGROUND Attribute is


used to set an image as the background of a Table in a Webpage of a Website
• <TABLE> Tag BGCOLOR Attribute: The BGCOLOR Attribute is used to of HTML Document. The value of the attribute will be path of an image. Like :
specify the background color of a Table in a Webpage of a Website of HTML <TABLE BACKGROUND = “baba_img_n.jpg”> ...</TABLE>
Document. The value of the attribute is given in Hexa value or Color Name. Example 5: HTML programs to demonstrate BGRCOLOR attribute of
Like : <TABLE BGCOLOR= “green”>...</TABLE> <TABLE> Tag.
Example 4: HTML programs to demonstrate BGRCOLOR attribute of Solution:
<TABLE> Tag.
<HEAD>
Solution: <TITLE>HTML TABLE BACKGROUND ATTRIBUTE</TITLE>
<HEAD> </HEAD>

<TITLE>HTML TABLE BGCOLOR ATTRIBUTE</TITLE> <BODY>


</HEAD> <TABLE BORDER=1 BORDERCOLOR="red"
<BODY> BACKGROUND="baou_logo_n.png">

128 129
<CAPTION>A SIMPLE TABLE</CAPTION> Example : <TABLE FRAME = “above”> ...</TABLE>
<TR> Example 6: HTML programs to demonstrate FRAME attribute of <TABLE>
<TD>ONE</TD> Tag.
<TD>TWO</TD> Solution:
<TD>THREE</TD>
<HEAD>
</TR> <TITLE>HTML TABLE FRAME ATTRIBUTE</TITLE>
</HEAD>
<TR>
<BODY>
<TD>FOUR</TD>
<TABLE FRAME ="vsides">
<TD>FIVE</TD> <CAPTION>A SIMPLE TABLE</CAPTION>
<TD>SIX</TD> <TR>
<TD>ONE</TD>
</TR>
<TD>TWO</TD>
</TABLE>
<TD>THREE</TD>
</BODY>
</TR>

OUTPUT <TR>
<TD>FOUR</TD>
<TD>FIVE</TD>
<TD>SIX</TD>
• <TABLE> Tag FRAME Attribute : The FRAME Attribute allows to state which
</TR>
portion of the border in a Table of a Webpage in a Website of HTML
</TABLE>
Document will be displayed (render). The values of the attribute that can be
</BODY>
specified for FRAME attribute are:
above - displays top edge only.
OUTPUT
below – displays bottom edge only.
border – displays all four sides.
box – display all four sides( like border).
hsides – displays top and bottom edges.
• <TABLE> Tag RULES Attribute: The RULES Attribute like FRAME attribute
lhs – displays left edge only.
also deals with the BORDER attribute, differs that RULES deals with the inside
rhs – displays right edge only.
border edges in a Table of a Webpage in a Website of HTML Document. The
void – displays no border.
values of the attribute that can be specified for RULES attribute are:
vsides – displays left and right sides.
all – displays all borders.

130 131
cols – displays border between cells. • <TABLE> Tag CELLSPACING Attribute : The CELLSPACING Attribute
groups – displays borders between all cell group specifies the amount of space between cells of a Table in a Webpage of a
none – hides all interior borders. Website in HTML Document. The values of the CELLSPACING attribute can
rows – displays borders between rows only. be specifies in pixels OR percentage.
Like : <TABLE RULES = “cols”> ...</TABLE> Like : <TABLE CELLSPACING=1> ...</TABLE>

Example 7: HTML programs to demonstrate RULES attribute of <TABLE> - Example 8: HTML programs to demonstrate CELLSPACING attribute of
Tag. <TABLE> Tag.

Solution: Solution:

<HEAD> <HEAD>
<TITLE>HTML TABLE RULES ATTRIBUTE</TITLE> <TITLE>HTML TABLE CELLSPACING ATTRIBUTE</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<TABLE RULES ="all"> <TABLE BORDER=3 CELLSPACING=6>
<CAPTION>A SIMPLE TABLE</CAPTION> <CAPTION>A SIMPLE TABLE</CAPTION>
<TR> <TR>
<TD>ONE</TD> <TD>ONE</TD>
<TD>TWO</TD> <TD>TWO</TD>
<TD>THREE</TD> <TD>THREE</TD>
</TR> </TR>

<TR> <TR>
<TD>FOUR</TD>
<TD>FOUR</TD>
<TD>FIVE</TD>
<TD>FIVE</TD> <TD>SIX</TD>
<TD>SIX</TD> </TR>
</TABLE>
</TR>
</BODY>
</TABLE>

</BODY> OUTPUT

OUTPUT

132 133
• <TABLE> Tag CELLPADDING Attribute : The CELLPADDING attribute
specifies the amount of space between the cell border and the cell contents of OUTPUT
a Table in a Webpage of a Website in HTML Document. In other words it can
be used to specify the space between cell boundary and text. The values of
the CELLPADDING attribute can be specifies in pixels OR percentage. Like :
<TABLE CELLPADDING =1> ...</TABLE>

Example 9: HTML programs to demonstrate CELLPADDING attribute of • <TABLE> Tag ALIGN Attribute: The ALIGN attribute is used to align the
<TABLE> Tag. Table in Left, Center or Right in HTML Document. The values of the ALIGN
Solution: attribute are left, center and right.Like : <TABLE ALIGN =“center”> ...</TABLE>

<HTML> Example 10: HTML programs to demonstrate ALIGN attribute of <TABLE>


<HEAD> Tag.
<TITLE>HTML TABLE CELLPADDING ATTRIBUTE</TITLE> Solution:
</HEAD>
<HEAD>
<BODY>
<TITLE>HTML TABLE ALIGN ATTRIBUTE</TITLE>
<TABLE BORDER=3 CELLSPACING=6 CELLPADDING=12>
</HEAD>
<CAPTION>A SIMPLE TABLE</CAPTION>
<BODY>
<TR>
<TABLE BORDER=3 CELLSPACING=6 CELLPADDING=12
<TD>ONE</TD>
ALIGN="CENTER">
<TD>TWO</TD>
<CAPTION>A SIMPLE TABLE</CAPTION>
<TD>THREE</TD>
<TR>
</TR>
<TD>ONE</TD>
<TR>
<TD>TWO</TD>
<TD>FOUR</TD>
<TD>THREE</TD>
<TD>FIVE</TD>
</TR>
<TD>SIX</TD>
<TR>
</TR>
<TD>FOUR</TD>
</TABLE>
<TD>FIVE</TD>
</BODY>
<TD>SIX</TD>
</HTML>
</TR>
</TABLE>
</BODY>

134 135
OUTPUT

OUTPUT
• <TABLE> Tag HEIGHT AND WIDTH Attribute: The HEIGHT AND WIDTH
attribute is used to specify the height and width of the table respectively. The
values of the HEIGHT AND WIDTH attribute can be specifies in pixels OR
percentage.Like : <TABLE HEIGHT = “100px” W IDTH =“40px”> ...</TABLE>

Example 11: HTML programs to demonstrate HEIGHT AND WIDTH attribute


of <TABLE> Tag.

Solution: 2.5 <CAPTION> TAG


<HEAD>
<TITLE>HTML TABLE HEIGHT AND WIDTH ATTRIBUTE</TITLE> <CAPTION> Tag: The <CAPTION> TAG <TABLE> Tag defines the title of a Table
</HEAD> attribute in a HTML Document. The Title is written in between the opening <CAPTION>and
<BODY> closing </CAPTION> Tag. This tag is specified opening <TABLE> and closing </TABLE>
<TABLE BORDER=3 CELLSPACING=6 CELLPADDING=12 Tag.Like : <CAPTION>Table Title </CAPTION>
HEIGHT="200px" WIDTH="80px" >
<CAPTION>A SIMPLE TABLE</CAPTION> Example 12: HTML programs to demonstrate <CAPTION> TAG.
<TR> Solution:
<TD>ONE</TD> <HEAD>
<TD>TWO</TD> <TITLE>HTML TABLE CAPTION TAG</TITLE>
<TD>THREE</TD> </HEAD>
</TR> <BODY>
<TR> <TABLE BORDER=3 CELLSPACING=6 CELLPADDING=12
<TD>FOUR</TD> HEIGHT="200px" WIDTH="80px" >
<TD>FIVE</TD> <CAPTION>A NUMBERED TABLE</CAPTION>
<TD>SIX</TD> <TR>
</TR> <TD>ONE</TD>
</TABLE> <TD>TWO</TD>
</BODY> <TD>THREE</TD>
</TR>

136 137
<TR> <TR>
<TD>FOUR</TD> <TH>HEADER ROW 1</TH>
<TD>FIVE</TD> <TH>HEADER ROW 2</TH>
<TD>SIX</TD> <TH>HEADER ROW 3</TH>
</TR> </TR>
</TABLE> <TR>
</BODY> <TD>ONE</TD>
<TD>TWO</TD>
<TD>THREE</TD>
</TR>
<TR>
OUTPUT <TD>FOUR</TD>
<TD>FIVE</TD>
<TD>SIX</TD>
</TR>
</TABLE>
</BODY>
2.6 <TH> TAG

<TH> Tag: The Table Header <TH> Tag is used to specify a Header Row within a
Table in a HTML Document. The Header Text is written in between the opening
<TH>and closing </HR> Tag. This tag is specified opening <TABLE> and closing OUTPUT
</TABLE> Tag. The content specified between Header Row is formatted distinctly as
Bold. Like: <TH>Header Text </TH>
Example 13: HTML programs to demonstrate <TH> TAG.
Solution:
<HEAD>
<TITLE>HTML TABLE HEADER ROW TAG</TITLE> 2.7 <TR> TAG
</HEAD>
<BODY>
<TR> Tag: The Table Row <TR> Tag is used to specify a Table Row within a Table
<TABLE BORDER=3 CELLSPACING=6 CELLPADDING=12
in a HTML Document. The Table Row Text is written in between the opening
HEIGHT="200px" WIDTH="80px" >
<TR>and closing </TR> Tag. This tag is specified opening <TABLE> and closing
<CAPTION>A NUMBERED TABLE</CAPTION>
</TABLE> Tag. Every row in a Table is specified with separate opening <TR>and

138 139
closing </TR> Tag, that means total number of rows will be equivalent to total
number of opening <TR>and closing </TR> Tag. Like: <TR>...</TR>
Example 14: HTML programs to demonstrate <TR> TAG.
Solution:
<HEAD> OUTPUT
<TITLE>HTML TABLE ROW TAG</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3 CELLSPACING=6 CELLPADDING=12
HEIGHT="200px" WIDTH="80px" >
<CAPTION> A NUMBERED TABLE</CAPTION>
<TR>
<TH>HEADER ROW 1</TH> 2.8 <TD> TAG
<TH>HEADER ROW 2</TH>
<TH>HEADER ROW 3</TH>
<TD> Tag: The Table Data <TD> Tag is used to specify a Table Data within a Row
</TR>
of a Table in a HTML Document. The Table Data Text is written in between the
<TR>
opening <TD>and closing </TD> Tag. This tag is specified main opening <TABLE>,
<TD>TABLE ROW 1: A</TD>
opening <TR>, closing </TR> Tag and closing </TABLE> Tag. Every Table data that
<TD>TABLE ROW 1: B</TD>
means Cell Data in a Table is specified with separate opening <TD>and closing
<TD>TABLE ROW 1: C</TD>
</TD> Tag, that means total number of cell will be equivalent to total number of
</TR>
opening <TD>and closing </TD> Tag. Like: <TD>Cell Text</TD>
<TR>
Example 15: HTML programs to demonstrate <TD> TAG.
<TD>TABLE ROW 2: D</TD>
Solution:
<TD>TABLE ROW 2: E</TD>
<HEAD>
<TD>TABLE ROW 2: F</TD>
<TITLE>HTML TABLE DATA TAG</TITLE>
</TR>
</HEAD>
</TABLE>
<BODY>
</BODY>
<TABLE BORDER=3 CELLSPACING=6 CELLPADDING=12
HEIGHT="200px" WIDTH="80px" >
<CAPTION> A NUMBERED TABLE</CAPTION>
<TR>
<TH>HEADER ROW 1</TH>
<TH>HEADER ROW 2</TH>

140 141
<TH>HEADER ROW 3</TH> <TD> Tag Attributes Description
</TR> Specified to control the horizontal
<TR> ALIGN alignment of the contents of a cell. The
<TD>TABLE ROW 1: Cell DATA 1</TD> values of the ALIGN attribute are left,
center and right. Example : <TD
<TD>TABLE ROW 1: Cell DATA 2</TD> ALIGN =“center”> ...</TD>
Specified to define width of cells.
<TD>TABLE ROW 1: Cell DATA 3</TD> WIDTH WIDTH attribute can be specifies in
pixels OR percentage. Example : <TD
</TR> WIDTH =“40px”> ...</TD>
<TR> Specified to set an image as
<TD>TABLE ROW 2: Cell DATA 4</TD> BACKGROUND background in a data cell. The value of
<TD>TABLE ROW 2: Cell DATA 5</TD> the attribute will be path of an image.
<TD>TABLE ROW 2: Cell DATA 6</TD> Example : <TD BACKGROUND =
</TR> “baba_img_n.jpg”> ...</TD>
</TABLE> Specified to change background color
</BODY> BGCOLOR of data cells. The value of the attribute
is given in Hexa value or Color Name.
Example : <TD BGCOLOR=
“green”>...</TD>
ROWSPAN Used to specify the span of a cell. The
OUTPUT value is given in numbers. Example :
<TD ROWSPAN= 2>...</TD>
COLSPAN Used to specify the span of a cell. The
value is given in numbers. Example :
<TD COLSPAN= 2>...</TD>
VALIGN Specifies the vertical alignment
when cells has span of more
than one row. The values can
• Attributes of <TD> tag: The <TD> Tag has a list of attributes that can be used be : Top, Middle and Bottom.
to format the Table Data content as well as enhance the table features.The <TD VALIGN
various <TD> Tag attributes are specified in the below Table 3. =“MIDDLE”>...</TD>
Table 3: <TD> Tag Attributes

142 143
Example 16: HTML programs to demonstrate Attributes of <TD> Tag.
Solution:
<HEAD>
<TITLE>HTML TABLE DATA TAG ATTRIBUTES</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3 CELLSPACING=6 CELLPADDING=12
HEIGHT="200px" WIDTH="80px" >
<CAPTION>HTML TABLE DATA TAG ATRIBUTES</CAPTION>
<TR>
<TH>HEADER ROW 1</TH>
<TH>HEADER ROW 2</TH>
<TH>HEADER ROW 3</TH> Friends, some Other <TABLE> Tags that are seldom used due to some
<TH>HEADER ROW 4</TH> deformity constraints of a table are:
</TR> • <THEAD> Tag: Specifies a set of header rows. The constraint is that it
<TR> can be specified only one time in a table within a HTML Document.
<TD>TABLE DATA TAG ATTRIBUTES</TD>
<TD ALIGN="LEFT" >Left Aligned</TD> • <TBODY> Tag: Specifies the table body. Similar constrains as
<TD ROWSPAN=2 VALIGN="BOTTOM">Rowspan & Vertical Bottom <THEAD> that it can be specified only one time in a table within a
Align</TD> HTML Document.
<TD BGCOLOR="GREEN">BGCOLOR</TD>
• <TFOOT> Tag: Specifies a set of footer rows. Similar constrains as
</TR>
<THEAD> and <TBODY> that it can be specified only one time in a
<TR>
table within a HTML Document.
<TD COLSPAN=2 BACKGROUND="baba_img_n.jpg"
VALIGN="BOTTOM">Colspan &
Background</TD>
2.9 LET US SUM UP
<TD >HTML TABLE TAG COMPLETED
</TD>
Hello Friends, now as you have completed this unit, you should be able to learn the
</TABLE>
concept of Designing Tables in HTML. Along with this you must have understood
</BODY>
HTML Table Tags like HTML Table Main Tags, <TABLE> Tag, <CAPTION> Tag,
OUTPUT
<TH> Tag, <TR> Tag and <TD> Tag.

144 145
2.10 CHECK YOUR PROGRESS • TR = Table Row

• TD = Table Data
 Define: HTML Table and <TABLE> Tag.  The CELLPADDING Attribute specifies the amount of space between cells of a
 The _________ Attribute is used to specify the background color of a Table in a Table in a Webpage of a Website in HTML Document. False
Webpage of a Website of HTML Document. [BGCOLOR,BACKGROUND,  The CELLSPACING attribute specifies the amount of space between the cell
BORDERCOLOR, NONE OF THIS ] border and the cell contents of a Table in a Webpage of a Website in HTML
 Give full form for below : Document. False

• TH  The <CAPTION> TAG <TABLE> Tag defines the Title of a Table attribute in a
HTML Document.
• TR

• TD

 The CELLPADDING Attribute specifies the amount of space between cells of a 2.12 FURTHER READING
Table in a Webpage of a Website in HTML Document. [True/False]
Online Reference Reading as PDF:
 The CELLSPACING attribute specifies the amount of space between the cell
border and the cell contents of a Table in a Webpage of a Website in HTML https://www.w3.org/TR/html401/struct/tables.html [ABOUT HTML TABLE TAG]

Document.[True/False]
Online Reference Reading as Video:
 The <CAPTION> TAG <TABLE> Tag defines the _________ of a Table attribute
in a HTML Document. [Title/Caption/Header/Footer] https://nptel.ac.in/courses/106105084/15[ABOUT HTML TABLE TAG]

2.13 ASSIGNMENTS
2.11 CHECK YOUR PROGRESS: POSSIBLE ANSWERS
6. Give the purpose of Table in HTML Document.
7. List and explain HTML Table Main Tags.
 Definition:
8. Give difference between :
• HTML Table: A table is a grid structured into columns and rows like a a. <CAPTION> TAG VERSUS <TH> TAG
Spreadsheet in a Webpage of a Website Design. b. <TR> TAG VERSUS <TD> TAG
• <TABLE> Tag: The <TABLE> Tag is the main external tag within which all 9. List and define all attributes of <TABLE> tag
the other tags used to create a Table structure are defined. 10. Write a short note onattributes of <TD> tag.
 The BGCOLOR Attribute is used to specify the background color of a Table in a
Webpage of a Website of HTML Document.
 Full forms are:

• TH = Table Header

146 147
2.14 ACTIVITIES
Creative Zone: Unit 3: Designing HTML Forms 3
Note: For Activities Learners can use search engine as their reference for supportive
knowledge enhancement
Unit Structure
• Design a Table having all attributes of <TABLE> Tag.

• “The HTML <table> element represents tabular data — that is, information 3.1. Learning Objectives.
presented in a two-dimensional table comprised of rows and columns of cells 3.2. Introduction to Designing Forms in HTML.
containing data”, justify the statement in your opinion.
3.3. Processing Forms in HTML.
3.4. Creating Forms using HTML <FORM> TAG and <INPUT> Tag.
Code Zone:
3.5. Text Input Controls.
Note: All the activities can be performed taking sequential reference of all Examples
3.6. Checkbox and Radio Option Control.
provided in this Unit.
3.7. Select Box and File Select Box Control.
Write a Program in HTML for HTML Document to:
3.8. Hidden Controls.
• Create a Table having 2 Rows and three columns.
3.9. Clickable, Submit and Reset Button Control.
• Demonstrate Table Attributes: CAPTION, BORDER, BORDERCOLOR,
3.10. Let us sum up.
BGCOLOR, BACKGROUND, CELLSPACING, CELLPADDING,
3.11. Check Your Progress
ALIGN, HEIGHT, W IDTH.
3.12. Check your Progress: Possible Answers.
• Create Table Header in a table having 2 Rows and three columns.
3.13. Further Reading.
• Generate a Table :
3.14. Assignment.
Device Brand Feature
3.15. Activities.
Mouse Logitech Wireless
Laptop Lenovo 360 degree
rotation

148 149
3.1 LEARNING OBJECTIVE 3.3 PROCESSING FORMS in HTML
Learners, broadly a Form in HTML document are used to display Information as well
Hello Learners, in the Block 2 - Unit 3 you will be able to learn and understand as it is a mode of communication between User and a Web Server. The processing
Designing HTML Forms Using Hyper Text Markup Language and its associated of the HTML Document Form is elaborated below.
Attributes used to incorporate different Form Controls in a Webpage of a Website as • The HTML Forms also known as Web-Forms/Fill-Out Forms firstly takes
following: required inputs in a Form from the User/Visitor of a Website.
• Concept of Form in HTML Document. • The simplest and commonly used approach to manage the data submitted by
• Creating and Designing Form in HTML Document using <FORM> user in HTML Form is, sending the information to a server side dedicated
Element. application developed mostly in scripting language or other platform.
• Adding HTML Form Controls in the HTML Document like : Different Text • Following same the information is posted to a Back-end Application such as
Inputs, Checkboxes, Radio Box, Select Box, File Select boxes, Hidden Common Gateway Interface (CGI) script written in Active Server Page or PHP
Controls, Clickable Buttons, Submit and Reset Buttons or other residing on a Web Server. Nowadays the CGI Script are written in
Computer Languages like Perl and Python, while when fast processing is

3.2 INTRODUCTION TO DESIGNING FORMS in HTML required it is written in C, C++ or JAVA.


• The information received on a Web Server will be processed as per the
requirement by the backend script or a program having the well defined
Friends, a Form are an element that is used to take input in form of some
processing logic. In the Latest Trends the Server Side programming is
required data from the user/visitor with his/her consent in a Website for
replaces by another approach of processing the HTML Forms. The approach
future/further reference. This type of form is known as Web Form. Example:
performs all processing through an Email where User/Visitor needs to first
Suppose any Internet user wants to use Email service of Website, before using
confirm the data/information to further progress the action before a backend
any such service the user need to register on the Website with details like
Software handles all.
Name, Date of Birth, ID, Password, Contact Number and others.

Facts to Ponder:

• A HTML document can have multiple Forms in a document while the Form
elements cannot be nested.
• The Forms in HTML Document can be coded effortlessly.
• Main Purpose of form is to collect User Inputs from Web Document.
• It supports to submit data from its controls to the Web Server.
• It is used to define and restrict the data input from User.
• The form can incorporate many controls like different types of Text field,
Radio Buttons, Check boxes, Menu buttons, Scrolling lists, Buttons and
others. Figure 1: Process of Forms in HTML

150 151
The Figure 1 displays the User Side and Client Side HTML Form Processing that <HTML>
can be elaborated by below steps <HEAD>
Step 1: At Client Side the User/Visitor sends the HTTP requests through the Web <TITLE>
Browser to the Web Server for a Web Document having </TITLE>
Step 2: At Server side the Web Server Request the Data and sends information to </HEAD>
the Backend Web Applications. The information is transferred to the Backend <BODY>
Application Software. The approach by which the data reached destination <FORM>
depends upon scripting logic. Usually the Web Application as well as CGI is …
developed by the same developer hence the required encoded format can be …
customized according to the Website Owner. …
Step 3: The Backend Web Applications at Server Side searches the data from the </FORM>
Database and receives the requested Data from the local Database and other </BODY>
related Database at Server end. The Backend Application Software can even </HTML>
process the information stored in database and even stores it at Database Purpose: Used to take various types of inputs of the User from the Webpage of
Server. HTML Document.
Step 4: The Web Application then submits the data to the Web Server. Step 5: Type: Container Tag
Step 5: A Webpage is generated by Backend Application Software that is returned Attributes:
as a response to the User/Visitor. o NAME: Denotes a specific unique name of FORM. Eg. : NAME=”UNIQUE”
Step6: The Web Server even receives the Static Web Resources from File Database o ACTION: Defines the action to be performed when the form is submitted. It is
at Server End that is send as response to the User/Visitor at Client End so used to send the data of FORM to the web page on the server when the user
that he/she can further progress as per his/her requirement. clicks submit button.Example. : ACTION=”TOI.ASP”
o TARGET: Specifies if the submitted result will open in a new browser tab, a

3.4 CREATING FORMS USING HTML <FORM> TAG AND frame, or in the current window.The default value is "_self" which means the
form will be submitted in the current window.To make the form result open in
<INPUT> TAG a new browser tab, use the value "_blank". Example. : TARGET=”_SELF”
o METHOD: Specifies the HTTP method (GET or POST) to be used when
• <FORM> TAG submitting the form data:
Explanation: The HTML Forms are mainly use for user input from a Web Page as in  GET METHOD: When GET is used, the submitted form data will
some Email Service Providers website, E-Commerce, Tutorials and other interactive be visible in the page address field.
websites. An HTML form contains Form Elements that are different types of input  POST METHOD: The POST method does not display the submitted
elements, like text fields, checkboxes, radio buttons, submit buttons, and more. form data in the page address field.
In the HTML structure the Web Form is defined in the <BODY> … </BODY> Tag Example: METHOD=”post”
section of HTML Structure as shown below:

152 153
• <INPUT> TAG <BR>
Explanation:The <INPUT> element is the most important FORM <BR>
element.The <INPUT> element can be displayed in several ways, depending on Enter Your College Name :<BR>
the type attribute. <INPUT TYPE="text" value="Clg_name">
Purpose: Specifies Input Control or field to receive the Input from the user in a
<BR><BR>
webpage.
<INPUT TYPE="submit" value="Submit">
Type: Empty Tag
</FORM>
Attributes:
o NAME: Denotes a specific unique name of the input element. Example. : </BODY>
NAME= "StudentID"
Output
o TYPE: Specifies the type of data collected through input field. Its values
can be Text, checkbox, radio, select, file, hidden, submit, reset and others.
Example:
<INPUT TYPE="text"> : Defines a one-line text input
field<INPUT TYPE="radio"> : Defines a radio button (for
selecting one of many choices)
<INPUT TYPE="submit"> : Defines a submit button (for submitting
the form).
o CHECKED: Indicates that the input element is checked when it is loaded at
first time in the Web Browser. Note for Practical: All the Sample code given in Examples must be typed in
o VALUE: Defines the default value of the Element. Example. : notepad with entire HTML Structure saved with .html or .htm extension and
VALUE=“M.SC.(IT)” finally open in web browser to get the output.

Example 1: Program to demonstrate <FROM> TAG AND <INPUT>


TAGSolution: 3.5 TEXT INPUT CONTROLS
<BODY>
<FORM ACTION="</action_page.php>"> Explanation: Specifies Text input from the user in a Webpage. There are 3 types
<H1> Details of Student </H1> of Text Input Controls:

<HR><BR> • Single-Line Text Input Control


• Password Input Control
Enter Your Name :<BR>
• Multi-Line Text Input Controls
<INPUT TYPE="text" value="Student_name">

154 155
• Single-Line Text Input Control: This control is used for scenarios that o NAME: Gives a name to the control which is sent to the server to be
require only one line of user input,such as search boxes or names. They are recognized and get the value.
created using HTML < INPUT > tag but type attribute is set to Text. o VALUE: Provides an initial value inside the control.
Syntax :< INPUT TYPE=“TEXT”> o SIZE: Specify the width of the text-input control in terms of characters.
o MAXLENGTH: Specify the maximum number of characters a user can
Attributes: enter into the text box.
o TYPE: Indicates the type of input control and for text input control it will Example3:
be set to text. USER ID :< INPUT TYPE="TEXT" NAME="USER_ID"/>
o NAME: Gives a name to the control which is sent to the server to be PASSWORD :< INPUT TYPE="PASSWORD" NAME="PASSWORD"/>
recognized and get the value. Output
o VALUE: Provides an initial value inside the control.
o SIZE: Allows specifying the maximum number of characters a user can User id:
enter into the text box. password:
o MAXLENGTH: Allows specifying the maximum number of characters a
user can enter into the text box.
• Multi-Line Text Input Control: Used when user is required to give details
that may be longer than a single sentence. Multi-line Input Controls are
Example 2: HTML program to demonstrateSingle-Line Text Input Control.
created using < TEXTAREA > Tag. It is a container Tag.
Solution:
Syntax:< TEXTAREA > tag.
FIRST NAME :< INPUT TYPE="TEXT" NAME="FIRST_NAME"/>
LAST NAME :< INPUT TYPE="TEXT" NAME="LAST_NAME"/>
Attributes:
OUTPUT o NAME: Give a name to the control which is sent to the server to be
recognized and get the value.
FIRST NAME:
o Rows: Indicates the number of rows of text area box.
LAST NAME:
o Cols: Indicates the number of columns of text area box.

• Password Input Control: This is also a single-line text input but it masks the Example4:
character soon as a user enters it. They are also created using HTML < < TEXTAREA ROWS="5" COLS="50" NAME="description"> enter Your Description
INPUT > tag but type attribute is set to password. Here........... < /TEXTAREA >.
Syntax :< INPUT TYPE= “password”> Output
Attributes:
ENTER YOUR DESCRIPTION HERE.......
o TYPE: Indicates the type of input control and for password input control
it will be set to password.

156 157
3.6 CHECKBOX AND RADIOBOX CONTROL Example6:
< INPUT TYPE="RADIO" NAME="SUBJECT" VALUE="MATHS"> MATHS
< INPUT TYPE="RADIO" NAME="SUBJECT" VALUE="PHYSICS">
• Checkbox Control: Used when more than one option is required to be selected.
PHYSICS
They are also created using < INPUT> tag but type attribute is set to CHECKBOX.
Syntax :< INPUT TYPE= “checkbox” >
Attributes:
o TYPE:Indicates the type of input control and for checkbox input control it will
be set to checkbox.
o NAME:Gives a name to the control which is sent to the server to be
recognized and get the value.
o VALUE:Used if the checkbox is selected.
o CHECKED:Set to checked if you want to select it by default. 3.7 SELECT BOX AND FILE SELECT BOX CONTROL

Example5: • Select Box: Select box,also called drop down box which provides option to list
< INPUT TYPE="CHECKBOX" NAME="maths" VALUE="ON">maths down various options in the form of drop down list, from where a user can select
< INPUT TYPE="CHECKBOX" NAME="physics" VALUE="ON">physics one or more options.
Output Syntax:<SELECT NAME="dropdown">
< OPTION VALUE="maths" Selected>maths
maths physics
< /SELECT>
Attributes:
o NAME: Gives name to the control which is sent to the server to be
• Radio Control: Used when out of many options, just one option is required
recognized and get the value.
to be selected. They are also created using < INPUT> tag but type attribute is
o SIZE:Used to present a scrolling list box.
set to RADIO.
o MULTIPLE:if set to multiple then allows a user to select multiple items
Syntax :< INPUT TYPE= “radio” >
from the menu.
Attributes:
o CHECKED:checked set to checked if you want to select it by default.
o TYPE:Indicates the type of input control and for checkbox input control
it will be set to radio.
Example7:
o NAME:Gives a name to the control which is sent to the server to be
< SELECT NAME="dropdown">
recognized and get the value.
< OPTION VALUE="MATHS" selected>MATHS
o VALUE:Used if the radio box is selected.
< OPTION VALUE="PHYSICS" selected>PHYSICS
o CHECKED:Set to checked if you want to select it by default.
< OPTION VALUE="HINDI" selected>HINDI

158 159
< OPTION VALUE="ENGLISH" selected>ENGLISH page number. When a user will click next page then the value of hidden control will
< /SELECT> be sent to the web server and there it will decide which page will be displayed next
based on the passed current page.
Syntax:<INPUT TYPE="HIDDEN">

Example9:
< P> this is page 10
< INPUT TYPE="HIDDEN" NAME="PAGENAME" VALUE="10"/>
< INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"/>
< INPUT TYPE="RESET" NAME="RESET" VALUE="RESET"/>

Output
• File Select/Upload Box Control: If you want to allow a user to upload a file This is page 10
to your web site, you will need to use a file select/upload box, also known as a
file select box. This is also created using the < input> element but type SUBMIT RESET

attribute is set to file.


Syntax:<INPUT TYPE="file">
Attributes:
3.9 CLICKABLE, SUBMIT AND RESET BUTTON CONTROL
o Name: Gives name to the control which is sent to the server to be
recognized and get the value. Friends, the clickable controls are the controls that perform an action after the
clicking on it. Two Clickable Controls most commonly used are:
o Accept:specifies the type of files that the server accepts.
• Submit Button Control

Example8: • Reset Button Control

< INPUT TYPE="file" NAME="fileupload" ACCEPT="image/*" />


• Submit Button Control
Explanation: The submit button is used whenever you want to confirm and
submit the provided details in the Form.
Syntax: < INPUT TYPE="SUBMIT">

3.8 HIDDEN CONTROLS


Example10:
< INPUT TYPE="SUBMIT" VALUE="SUBMIT NOW"/>
Friends, Hidden form controls are used to hide data inside the page which later on
Output
can be pursued to the server; this control hides inside the code and does not appear
on the actual page. For example, following hidden form is being used to keep current

160 161
SUBMIT NOW 3.12 CHECK YOUR PROGRESS: POSSIBLE ANSWERS
• Reset Button Control
Explanation: The reset button is used to clear the inputs by the user while  Definition:

filling a Form in a Webpage of a Website. 1. Forms: A Form are an element that is used to take input in form of some required
data from the user/visitor with his/her consent in a Website for future/further
Example11: reference.
< INPUT TYPE="RESET" VALUE="RESET"/>
2.Checkbox: Used when more than one option is required to be selected.
Output
3.Radio Button:Used when out of many options, just one option is required to be
RESET selected.

4. File Select Box:If you want to allow a user to upload a file to your web site, you will
need to use a file select/upload box, also known as a file select box.
3.10 LET US SUM UP
 INPUTtag is used to create any kind of form button like radio button, check box,
select box, etc.
Hello friends, now as you have completed this unit, you should be able to learn the
concept, working and importance of Forms in HTML. The various HTML  There are 3 types of Input Text Input Control:
FormsControls like Text Input Control, Check Box Control, Radio Button Control, • Single-Line Text Input Control
Select Box Control, File Select Box Format, Submit Button, Reset Button purpose • Password Input Control
and implementation should have been understood. • Multi-Line Text Input Controls

 Difference:
3.11 CHECK YOUR PROGRESS
 Purpose: the submit button is Purpose: the reset button is used
 Define: 1. Forms used whenever you want to to clear the inputs by the user and
2. Checkbox submit a form. the markup looks like this:

3. Radio Button  Example:


Example:
4. File Select Box < INPUT TYPE="SUBMIT" < INPUT TYPE="RESET"
VALUE="SUBMIT NOW"/> VALUE="RESET"/>
 _______ Tag is used to create any kind of form button like Radio Button, Check
Box, Select Box, etc. [INPUT, TAG, ELEMENT, FORM] Output Output

 How many types of Text Input Control are there? SUBMIT NOW
RESET

 Write difference between select box and file select box.

162 163
3.13 FURTHER READING
Unit 4: Designing HTML Frames 4
Online Reference Reading as PDF:
http://pdf.coreservlets.com/HTML-Forms.pdf[About HTML Form Pg. 603-657]
Unit Structure

Online Reference Reading as Video:


https://www.youtube.com/watch?v=TeV2eDHtVa0 [About HTML Forms] 4.1. Learning Objectives.
4.2. Introduction to Designing Frame in HTML.
3.14 ASSIGNMENTS 4.3. Designing Frames using Frame Document Structure.
11. Explain the Text Input Control. 4.4. Enhancing Frame Functionalities.
12. Write Steps to Create a Radio button. 4.5. IFrame Tag.
13. Write a short note on HTML Forms.
4.6. Let us sum up.
14. Explain Hidden controls.
4.7. Check Your Progress
4.8. Check your Progress: Possible Answers.
3.15 Activities
4.9. Further Reading.
Creative Zone:
4.10. Assignment.
Note: For Activities Learners can use search engine as their reference for supportive
knowledge enhancement 4.11. Activities.

Create a college admission form using all the Form Controls you have learned.

Code Zone:
Note: All the activities can be performed taking sequential reference of all Examples
provided in this Unit.
Write a Program in HTML for HTML Document to:
• Code a HTML Form which has male and female options with Radio Controls.
• Code a HTML Form which has Checkbox and it includes many college options
you want to apply for after your M.Sc. (IT) course.
• Suppose you are uploading an image and you want to select a file from your
files which control box you use and write a code for it.
• By using Text Input Controls code user id and password but remember while
coding you must masks the password.

164 165
4.1 LEARNING OBJECTIVE 4.3 DESIGNING FRAMES USING FRAME DOCUMENT
STRUCTURE
Hello Learners, in the Block 2 - Unit 4 you will be able to learn and understand :
• Concept of HTML frames Using Hyper Text Markup Language. • HTML Frame Designing Process
• Designing HTML Frames using Frame Document Structure through Frameset In a HTML Document, the Frames can be created, designed and controlled using
and Frame Elements. a FRAME structure having various elements and following the procedure as
• Enhancing Frames by improvising <FRAME> Tag Source; <FRAMESET> elaborated below.
Tag: Frame Size, Margin between Frame, Border; and Frames Linking o Process 1: Incorporating <FRAMESET> TAG/ELEMENT in the basic HTML
• Working with iFrame. Document structure in place of <BODY> Tag to define the Frame that designs
the Webpage.
o Process 2: Constructing the Frames/partitions/divisions for HTML Document
4.2 INTRODUCTION TO DESIGNING FRAME IN HTML
content using <FRAME> TAG/ELEMENT that specifies the sub-documents
that will appear initially in each partitions of Frame.
Friends, HTML FRAMES are the elements used to partition the Web Browser
o Process 3: Creating a separate HTML Document to be displayed in separate
window into multiple partitions in a HTML Document. Using these partitions each
respective Frame.
section in HTML Document can be used to load and open another different HTML
o Process 4: Linking/Loading content within the frame with the respective HTML
Document.
Document using <SRC> ATTRIBUTE.
Facts to Ponder:
• The Web Browser Window is divided into FRAMES in a similar way the tables • Facts to Ponder:
are organized: into rows and columns. o The <FRAMESET> Tag even comprises of nested <FRAMESET> and
• A collection of FRAMES in the browser window is known as a FRAMESET. <FRAME> elements and the nested Frame becomes a Sub-Frame.
• Frames are displayed well defined in desktop, Laptop and other big screen o When some User Browser to do not support Frame the BODY element can
display devices. pursue the <FRAMESET> Element to present a substitute HTML Document
• The back button of browser is not applicable to navigate in frames. by including <NOFRAMES> elements whose contents are not to be

• A Frame is created by using Frame document that specifies the frame regions considered by User Browser that supports Frames.

on Web Brower and the display content within the frame is specifically loaded o The HTML Frame Document encloses a set of Frames where each Frame,

in the form of different HTML Documents using Hypertext anchors source utilizes the <BODY> element whose elements does not appear before

tags. <FRAMESET> element else the <FRAMESET> will be overlooked.

• The structure of a frame-enabling HTML document type is similar to usual o The <FRAMESET> Tag has an opening <FRAMESET> Tag and matching

HTML structure. The key difference in an HTML document type is that the </FRAMESET> End Tag.

BODY container element is basically replaced by a FRAMESET container


element. • Basic Structure of HTML <FRAME> Tag
The Basic Stricture of HTML <FRAME> Tag is as below.

166 167
<FRAMESET COLS/ROWS="*,*,*,*">
<frame src="DOCUMET1.HTML">
<frame src=" DOCUMET2.HTML "> • Note for Practical:
<frame src=" DOCUMET3.HTML"> o All the Sample code given in Examples must be typed in notepad with entire
<frame src=" DOCUMET4.HTML"> HTML Structure saved with .html or .htm extension and finally open in web
</FRAMESET> browser to get the output.
The role of HTML Frame Elements/Tags/Attributes is defined in the Table 1. o To perform the practical four HTML documents are created that will be utilized
Table 1: HTML Frame Ele ments/Tags/Attributes to be displayed in differently created frames as per Exercise 1 through 4.
HTML Frame Elements Attributes Description
Exercise 1 to 4: HTML Program to create four HTML Documents that will be
COLS/ROWS=”*,*” Specifies Frames
utilized for displays in created frames as displayed in Table 2.
Design
<FRAMESET>… Specifies pattern of Table 2: Creating HTML Document Solution and Output
</FRAMESET> Vertical/ Horizontal
FRAME BORDER HTML Solution Output
Frame. Document
Specifies Frame Name
border and Color. FRAME_A.HTML <BODY>
BORDER COLOR
<h1>!!!!! Frame A !!!!!</h1>
<p>!!! Frame A content !!!</p>
Specifies the HTML </BODY>
Document to be FRAME_B.HTML <BODY>
SRC=”Document.HTML” <h1>!!!!! Frame B !!!!!</h1>
loaded or displayed
in the created <p>!!! Frame B content !!!</p>
Frame. </BODY>
FRAME Specifies Name, FRAME_C.HTML <BODY>

Margin Width, <h1>!!!!! Frame C !!!!!</h1>


NAME, MARGIN <p>!!! Frame C content !!!</p>
Scrolling, Noresize
WIDTH, SCROLLING, </BODY>
property of a
NORESIZE FRAME_D.HTML <BODY>
Frame.
<h1>!!!!! Frame D !!!!!</h1>
<p>!!! Frame D content !!!</p>
</BODY>

168 169
<FRAMESET ROWS="*,*,*,*">
Exercise 5: HTML Program to demonstrate a simple Frame without <frame src="FRAME_A.html">
<FRAMESET> Tag. <frame src="FRAME_B.html">
Solution: <frame src="FRAME_C.html">
<BODY> <frame src="FRAME_D.html">
<h1>HTML Frame without FRAMESET Tag</h1> </FRAMESET>
<p>Content of Frame 1 within Frame 1</p> Output
</BODY>
Output

Exercise 6: HTML Program to demonstrate Web Browser resizable Vertical


Frames in Webpage.
Solution:
<FRAMESET COLS="*,*,*,*">
<frame src="FRAME_A.html">
<frame src="FRAME_B.html">
<frame src="FRAME_C.html">
<frame src="FRAME_D.html">
Exercise 8 through 11: HTML Program to demonstrate Web Browser
</FRAMESET>
resizable Vertical and Horizontal Frames of different variety of partitions in
Output
Webpage as displayed in Table 3.

Table 3: Different Frames Layouts Solution and Output


Exercise No: Exercise 8
Solution:
<FRAMESET COLS="*,*,*">
<FRAMESET ROWS="*,*">
<frame src="FRAME_A.html">
Exercise 7: HTML Program to demonstrate Web Browser resizable Vertical
<frame src="FRAME_B.html">
Frames in Webpage.
</FRAMESET>
Solution:
<frame src="FRAME_C.html">

170 171
<frame src="FRAME_D.html"> <FRAMESET COLS="*,*">
</FRAMESET> <frame src="frame_a.html">
Output: <FRAMESET ROWS="*,*">
<frame src="frame_b.html">
<FRAMESET COLS="*,*">
<frame src="frame_c.html">
<frame src="frame_d.html">
</FRAMESET>
</FRAMESET>
</FRAMESET>
Output:

Exercise No: Exercise 9


Solution:
<FRAMESET COLS="*,*,*">
<frame src="FRAME_A.html">
<FRAMESET ROWS="*,*">
<frame src="FRAME_B.html">
<frame src="FRAME_C.html">
</FRAMESET>
<frame src="FRAME_D.html"> Exercise No: Exercise 11
</FRAMESET> Solution:
Output: <FRAMESET ROWS="*,*" COLS="*,*">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
<frame src="frame_d.html">
</FRAMESET>
Output:

Exercise No: Exercise 10


Solution:

172 173
body {background: blue;}
h1 {color: red;}
p {margin: 20px;}
</STYLE>
</HEAD>
<BODY>
<h1>!!!!! Frame A !!!!!</h1>
<p>!!! Frame A content !!!</p>
</BODY>

4.4 ENHANCING FRAME FUNCTIONALITIES

The HTML Frame can be made more user friendly, attractive, eye-catching by
Output
enhanci ng the functionalities of <FRAMESET> and <FRAME> Tag. The
enhance ment that is required in <FRAME> is defined within the Source
document and of the <FRAMESET> Tag is defined within the parent
document included in the Frameset.

• Enhancing <FRAME> Tag Source


Explanation: The Frame can be style as the Webpage with the use of
Cascading Style Sheet (CSS). The Style is added to the source document itself
either by linking CSS or incorporatingCSS in the Source Document as applying
CSS to Frameset webpage will not be included in all the individual Source
Document of different frames.

Exercise 12:HTML Program to demonstrate Styling a Vertical and Horizontal Step 2: Update the Webpage code of any frame with the CSS code including Source
Frame in a Webpage. Document.
Solution: Sample Code:
Step 1: Include the Cascading Style sheet in FRAME_A.HTML file that is linked <FRAMESET ROWS="*,*" cols="*,*">
to an any Frame featured. <frame src="FRAME_A_ENHANCEMENT.HTML">
Sample Code: <frame src="FRAME_B.HTML">
<HEAD> <frame src="FRAME_C.HTML">
<STYLE> <frame src="FRAME_D.HTML">

174 175
</FRAMESET> Exercise 13:HTML Program to demonstrate the resizing attribute of the Frame in a
Webpage.
Output
Solution: Note in the output of below sample code all the frames can be resized
except FRAME_A_ENHANCEMENT.HTML
<FRAMESET ROWS="140px,*">
<FRAME NORESIZE SRC="FRAME_A_ENHANCEMENT.HTML">
<frameset cols="25%,*,25%">
<frame src="FRAME_B.HTML">
<frame src="FRAME_C.HTML">
<frame src="FRAME_D.HTML">
</FRAMESET>
</FRAMESET>
Output

• Enhancing <FRAMESET> Tag

Toenhance the appearance of Frameset, it can be style as the Webpage by


adding additional attributes as well as values to the <FRAME> Tag. The
features that can be enhanced are:
o Frame Size Enhancement.
o Margin between Frame and Borders Enhancement.

o Frame Size Enhancement


Explanation:The Frame size enhancement can be done either by defining
.
the size of frame or fixing the size of the frame according to the requirement
or even resizing the frame in web Browser display window available space
while viewing the Webpage. The Frame Size is defined in either pixels/
percentages by providing values in the cols or rows attribute of Frameset. To o Margin between Frame and Borders Enhance ment.
fix the size in Web Browser window the NORESIZE attribute is added to
Explanation: The Frame margin can be increase or decreased and even the
<FRAME> Tag as the default attribute is resize that allows the visitor to resize
border can be removed or customized according to the requirement.
the frame in Web Browser Window.
Exercise 14:HTML Program to demonstrate the margin and border attribute of the
Frame in a Webpage.

176 177
o Step 2: the <Anchor> Tag in the Source Document is added with TARGET
Solution:
attribute. Example: <A HREF="FRAME_B.HTML" TARGET="mid_col"> LOAD
<FRAMESET ROWS="300px,*">
FRAME_B.HTML</A>
<frame noresize src="frame_a_enhancement.html" marginheight="20">
<FRAMESET COLS="33%,*,33%">
Exercise 15:HTML Program to demonstrate Frame Linking Enhancement in a
<frame src="frame_b.html" frameborder="0">
Webpage.
<frame src="frame_c.html" frameborder="0">
Solution:
<frame src="frame_d.html" frameborder="0">
o Step 1: In Frame HTML Document assigning Name Attribute to the Frame tag
</FRAMESET>
of the Frame that need to upload the linking tag.
</FRAMESET>
Sample Code:
<FRAMESET ROWS="300px,*">
Output
<frame noresize src="FRAME_A_ENHANCEMENT.HTML" marginheight="20">
<FRAMESET COLS="33%,*,33%">
<frame src="frame_b_LINKING.html" frameborder="0">
<frame src="frame_c.html" name="center_col" frameborder="0">
<frame src="frame_d.html" frameborder="0">
</FRAMESET>
</FRAMESET>

o Step 2: In the Source Documentthe <Anchor> Tag is specified with TARGET


attribute having the Name attribute value assignment in Frame Document.
Solution:
<BODY>
• Frames Linking Enhance ment <h1>!!!!! Frame B !!!!!</h1>
Explanation: The Frame Navigation can be enhanced regardless to the <p>!!! Frame B content !!!</p>
content in other frames by creating Navigation links. The new resource is <UL>
loaded in one Frame while the other Frames in the Webpage remain static. <li><a href="FRAME_A_ENHANCEMENT.HTML"
This is done by using <ANCHOR> TAG that is customized to target a specific target="center_col">Load
Frame by: FRAME_A_ENHANCEMENT.HTML</a></li>
o Step 1: Assigning Name Attribute to the Frame tag of the Frame that need to <li><ahref="FRAME_B_LINKING.HTML" target="center_col">Load
upload the linking tag. Example. <FRAME SRC="FRAME_B.HTML" FRAME_B_LINKING.HTML</a></li>
NAME="mid_col" > <li><a href="FRAME_C.HTML" target="center_col">Load
FRAME_C.HTML</a></li>

178 179
<li><a href="FRAME_D.HTML" target="center_col">Load HTML Document is loaded in center Frame.
FRAME_D.HTML</a></li>
</UL>
</BODY>
Output: The customized Output is obtained as displayed in Table 4.

Table 4: Frame Liking Output Displays


Outputs

Output 2: When the Third Link is clicked and the linked


HTML Document is loaded in center Frame.

Output 1: Displaying four frames- Frame A, Frame B,


Frame C and Frame D, among which the Frame B is
having all the Links. When the First Link is clicked and the
linked HTML Document is loaded in center Frame.

Output 4: When the Fourth Link is clicked and the linked


HTML Document is loaded in center Frame.

Note:
o Frames Responsiveness: The advancement of the technology changed the
display and viewing devices from 15+ inches Visual Display Unit Desktop to a
handheld 2 inches screen Tables and Smart Phones. With this advancement
the Website having Frame Layout are point of concern. HTML5 has
considered Frames as obsolete and no more recommend its use, however the
previous Framed Layout based Website Owners have to upgrade their
Output 2: When the Second Link is clicked and the linked

180 181
Websites to improve the utility of Framed Designs or and redesign it with no • SOURCE: Defines address of HTML Document to be displayed IN THE in the
frame Layout. IFARAME. Example: src="Document.HTML"
• NAME: Defines an IFRAME’s target name for linking fames and HTML
o Frames Migration: The present latest versions of HTML have removed this Document.
feature entirely, hence Frames cannot be used in the presently designed • FRAME BORDER: Defines border to the IFRAME. Example:
Websites. Even Web Browser no longer support Frames, hence Website with frameborder=value. Value =1 is default and inserts a border while Value=0
Frame Layout becomes Unfeasible to use and transition from Frames has means no border.
become mandatory for the Website Designers. • MARGIN WIDTH: Defines Margin width for IFRAME. Example: marginwidth
=“Value”. Value is provided in pixels.
4.5 IFRAME TAG • MARGIN HEIGHT: Defines Margin height for IFRAME. Example:
marginheight =“Value”. Value is provided in pixels.

Explanation: Presently a new element has been designed to design complex • SCROLLING: Defines the availability/ unavailability of Scroll Bar in

composite HTML Documents called as Inline Frame (IFRAME). This support IFRAME.Example: scrolling="Value" Value=”yes/no/auto. Default is auto.

insertion of HTML Document the same way an Image is inserted, hence all the • WIDTH: Defines width of IFRAME Example: width=”Value” Value is provided

image attributes can be applied to it. The main difference between FRAME and in pixels.

IFRAME is that IFRAME element is included in BODY element of HTML Structure. • HEIGHT: Defines height of IFRAME Example: height=”Value”. Value is
provided in pixels.
Facts to Ponder • ALIGN: Defines the position of IFRAME according to the Text in already

• Paragraph Break is not implemented in IFRAME as it is a Text Level Feature. present in the HTML Document. Example: align="Value”

• IFRAME can include the target attributes and even can Value=left/middle/right/top/bottom. Default = bottom.

• Just like a FRAME, an IFRAME can be targeted and even can independently
Exercise 16:HTML Program to demonstrate IFRAME.
navigate in parent HTML Document.
Solution:
<BODY>
Working with IFRAME
<iframe width="600" height="200" name="iframe_A"></iframe>
• To execute IFRAME the container tags included are
<p><a href="FRAME_A_ENHANCEMENT.HTML" target="iframe_A">Load
<IFRAME>….</IFRAME>
FRAME_A_ENHANCEMENT.HTML</a></p>
• Shares most of the attributes used in FRAME elements like SRC, NAME,
</BODY>
FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT, SCROLLING.
Output: The output of the above IFRAME code is displayed in Table 5.
• The attributes that can be used is RESIZE.
• The add-on attribute of IFRAME is ALIGN. Table 5: IFRAME Output
IFRAME Output
Attributes:

182 183
 _______ Tag is used to create any kind of Frame.

 Write any 2 Disadvantages of Frame.

 IFRAME is a container Tag. [True/False]

4.8 Check your progress: Possible Answers


Output 1: IFRAME in HTML document and the link of
HTML Document to be loaded.  Definition:

1. FRAME: HTML FRAMES are used to divide your browser window into
multiple sections where each section can load a separate HTML
document.

2.FRAMESET: A FRAMESET may only contain nested FRAMESET and


FRAME elements. When a FRAMESET element is nested within another
FRAMESET element, it acts as a SUBFRAME.
Output 2: Once the link is clicked the Source Document
is displayed in IFRAME. 3. IFRAME: IFRAME are Inline Frame that support insertion of HTML
Document the same way an Image is inserted.

4. Value: A simple numeric value is assumed to be a fixed size in pixels. The


4.6 LET US SUM UP
result of this value varies with the size of a viewer's window.
Hello friends, now as you have completed this unit, you should be able to learn the
 Frame Tag is used to create any kind of frame.
concept, working and importance of Frames IN HTML. Designing Frames using
Frame Document Structure, Frameset and Frame Elements; Enhancing Frames by  The two disadvantages of Frame are:
improvising <FRAME> Tag Source; <FRAMESET> Tag: Frame Size, Margin • Some smaller devices cannot cope with frames often because their screen is
between Frame, Border; and Frames Linking; and IFRAME working, purpose and not big enough to be divided up.
implementation should have been understood.
• The browser's back button might not work as the user hopes.

 IFRAME is a container Tag. True


4.7 CHECK YOUR PROGRESS

 Define : 1. FRAME 4.9 FURTHER READING


2. FRAMESET

3. IFRAME Online Reference Reading as PDF:

4. Value

184 185
http://users.cs.cf.ac.uk/Dave.Marshall/Internet/Lectures/25_CM0133_Frames.pdf
[About Basic HTML Frames Pg. 1-35]

Online Reference Reading as Video:


https://www.youtube.com/watch?v=WRdTXaz4_Ls[About HTML FRAME Tags]

4.10 ASSIGNMENTS

1. What is the use of Frame in HTML Document? Explain.


2. Write the basic HTML Frame Structure to design a Frame.
3. List and explain the methods for enhancing Frames and Frameset.
4. Explain document for NON FRAME browser.
5. Write a note on iFrame.

4.11 ACTIVITIES
Creative Zone:
Note: For Activities Learners can use search engine as their reference for supportive
knowledge enhancement
Create a webpage of Educational Institute/E-Commerce/Sports that has frames
layout and include various Frame enhancements like Linking, resizing, Border,
Coloring etc.

Code Zone:
Note: All the activities can be performed taking sequential reference of all Examples
provided in this Unit.

Write a Program in HTML for HTML Frame Document to:


• Set all the Frame / window size to 50%.
• Design the frames tat not be resized.
• Set the link between Frame Document and the HTML Document.
• Design an IFRAME in a HTML Document.

186

You might also like