Technical

Vocational
Education
QUARTER

Computer Programming

TECHNICAL VOCATIONAL LIVELIHOOD

Computer Programming (ICT) – Grade 11

Quarter 1 – Module 10: Creating HTML Frames

Republic Act 8293, section 176 states that: No copyright shall subsist in
any work of the Government of the Philippines. However, prior approval of the
government agency or office wherein the work is created shall be necessary for
exploitation of such work for profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand

names, trademarks, etc.) included in this module are owned by their respective
copyright holders. Every effort has been exerted to locate and seek permission to use
these materials from their respective copyright owners. The publisher and authors
do not represent nor claim ownership over them.

Published by the Department of Education Division of Pasig City

Development Team of the Module

Writer : Magiel L. Boncayao
Editor : Lerma Cantanero
Reviewer : Rowena O. Dimagiba
Illustrator:
Layout Artist:
Management Team: Ma. Evalou Concepcion A. Agustin
OIC-Schools Division Superintendent
Dr. Aurelio G. Alfonso
OIC-Assistant Schools Division Superintendent
Dr. Victor Javena
OIC – Chief Curriculum Implementation Division
Education Program Supervisors
Librada L. Agon EdD (EPP/TLE/TVL/TVE)
Liza A. Alvarez (Science/STEM/SSP)
Bernard R. Balitao (AP/HUMSS)
Joselito E. Calios (English/SPFL/GAS)
Norlyn D. Conde EdD (MAPEH/SPA/SPS/HOPE/A&D/Sports)
Wilma Q. Del Rosario (LRMS/ADM)
Ma. Teresita E. Herrera EdD (Filipino/GAS/Piling Larang)
Perlita M. Ignacio PhD (EsP)
Dulce O. Santos PhD (Kindergarten/MTB-MLE)
Teresita P. Tagulao EdD (Mathematics/ABM)

Printed in the Philippines by

Department of Education – Division of Pasig City
Office Address: Caruncho Avenue, San Nicolas, Pasig City
Telefax:
E-mail Address:
Introductory Message
For the Facilitator:

Welcome to the Computer Programming for the ICT Module on Creating HTML
Frames

This module was collaboratively designed, developed and reviewed by educators from
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools
Division Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the
Local Government of Pasig through its mayor, Honorable Victor Ma. Regis N.
Sotto. The writers utilized the standards set by the K to 12 Curriculum using the
Most Essential Learning Competencies (MELC) while overcoming their personal,
social, and economic constraints in schooling.
This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help
learners acquire the needed 21st century skills especially the 5 Cs namely:
Communication, Collaboration, Creativity, Critical Thinking and Character while
taking into consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher

This contains helpful tips or strategies that will help you in guiding the learners.

As a facilitator you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage
their own learning. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
 Computer
Programming
QUARTER 1
MODULE

CREATING HTML FRAMES

9
For the Learner:

Welcome to the Computer Programming for the ICT Module on Creating HTML
Frames
The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
accomplish. Hence, the hand in this learning resource signifies that you as a learner
is capable and empowered to successfully achieve the relevant competencies and
skills at your own pace and time. Your academic success lies in your own hands!

This module was designed to provide you with fun and meaningful opportunities for
guided and independent learning at your own pace and time. You will be enabled to
process the contents of the learning material while being an active learner.

This module has the following parts and corresponding icons:

Expectation - These are what you will be able to know after

completing the lessons in the module

Pre-test - This will measure your prior knowledge and the

concepts to be mastered throughout the lesson.

Recap - This section will measure what learnings and skills

that you understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap Up- This section summarizes the concepts

and applications of the lessons.

Valuing-this part will check the integration of values in the

learning competency.

Post-test - This will measure how much you have learned

from the entire module. Ito po ang parts ng module.
 EXPECTATION

The students should be able to :

 understand the HTML Frames, like frameset, frameset target and iframe;
 distinguish the difference of frameset, frameset target and iframe;
 use the HTML frames to create their own webpages.

PRE–TEST

Instructions: Select the letter that corresponds to the correct answer.

1. It is an HTML pages that breaks down into multiple windowpanes and put up
in a single window browser?

A. <Frames> B. <iframe> C. <frameset> D.<frame target>

2. Which of the following elements describes the amount of screen real estate
given to each windowpane by dividing the screen?
A. <Frames> B. <iframe> C. <frameset> D.<frame target>
3. Which of the following element is used to display a web page within a
webpage?

A. <Frames> B. <iframe> C. <frameset> D.<frame target>

4. Which of the following attributes is used in a frame environment to link the

other pages?
A. <link> B. <source> C.target> D. <noresize>
5. Which of the following HTML attribute prevents viewers from resizing the
frame?
A. <link> B. <source> C. <target> D. <noresize>
 RECAP

We discussed last time the different types of multimedia in HTML documents, we

learned that there are many different formats like image, sound, records, films,
animations and more. Our webpages contain different multimedia to add more
creativity to the design and also to showcase the different functions of it.

Inside the box below give the syntax of the following formats when we going to insert
it in our HTML document.

VIDEO FORMAT AUDIO FORMAT

LESSON
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. It is used to divide
your browser windows into multiple sections where each section can load a
separate HTML document. A collection of frames in the browser is known as a
frameset. The window is divided into frames in a similar way the tables are
organize: into rows and columns.

Example:

Figure 1
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.

Frameset Container

COLS: Determines the size and number of rectangular columns within a

<frameset>. They are set from left to right of the display area.

Example syntax for columns:

<frameset cols="50%,50%">

<frame src="iframe1.html">

<frame src="iframe2.html">

</frameset>

Result:

Image1: https://www.google.com/search?q=gif&tbm=isch&tbs=rimg%3ACRe3ccUqz-T4YdjznNCOT57j&client=ms-
android
vivo&prmd=ivn&hl=en&ved=0CBoQuIIBahcKEwjA59GprM7qAhUAAAAAHQAAAAAQBQ&biw=360&bih=560#imgrc=
g5nfxLFL-XQVYM

Image2: https://www.google.com/search?q=cute+okay+gif&tbm=isch&ved=2ahUKEwj-i-
i2wdzqAhWly4sBHc6cBKYQ2-
cCegQIABAA&oq=cute+okay+gif&gs_lcp=CgNpbWcQAzICCAAyBggAEAgQHjIGCAAQCBAeOgQIIxAnOgQIABBDOgYI
ABAHEB46CAgAEAgQBxAeULdOWJ9fYOFraABwAHgAgAGbAYgBQSSAQMwLjWYAQCgAQGqAQtnd3Mtd2l6LWltZ8
ABAQ&sclient=img&ei=SOkVX_7HDKWXr7wPzrmSsAo&bih=657&biw=1349&rlz=1C1CHBF_enPH792PH792&hl=e
n#imgrc=WNwa_lJYbul_kM&imgdii=75r0PLTbxe9rkM

Figure 2
 ROWS: Determines the size and number of rectangular rows within a
<frameset>. They are set from top of the display area to the bottom.

Example syntax for rows:

<frameset rows="50%,50%">

<frame src="iframe1.html">

<frame src="iframe2.html">

</frameset>

Result:

Image1: https://www.google.com/search?q=gif&tbm=isch&tbs=rimg%3ACRe3ccUqz-T4YdjznNCOT57j&client=ms-
android
vivo&prmd=ivn&hl=en&ved=0CBoQuIIBahcKEwjA59GprM7qAhUAAAAAHQAAAAAQBQ&biw=360&bih=560#imgrc=
g5nfxLFL-XQVYM

Image2: https://www.google.com/search?q=cute+okay+gif&tbm=isch&ved=2ahUKEwj-i-
i2wdzqAhWly4sBHc6cBKYQ2-
cCegQIABAA&oq=cute+okay+gif&gs_lcp=CgNpbWcQAzICCAAyBggAEAgQHjIGCAAQCBAeOgQIIxAnOgQIABBDOgYI
ABAHEB46CAgAEAgQBxAeULdOWJ9fYOFraABwAHgAgAGbAYgBQSSAQMwLjWYAQCgAQGqAQtnd3Mtd2l6LWltZ8
ABAQ&sclient=img&ei=SOkVX_7HDKWXr7wPzrmSsAo&bih=657&biw=1349&rlz=1C1CHBF_enPH792PH792&hl=e
n#imgrc=WNwa_lJYbul_kM&imgdii=75r0PLTbxe9rkM

Figure 3

Frames Attributes

You can use these attributes to modify the overall look of your webpages, however
all of these attributes are just optional.

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.
 Ex: <frameset rows="50%,50%", noresize= “noresize”>

border(thickness of the Frame): This attribute specified in pixels. A setting of zero

will create a borderless frame. Default value is 5.

Ex: <frameset rows="50%,50%", noresize, border=20>

bordercolor: This attribute allows you choose a color for your border. This attribute
is rarely used.

Ex: <frameset rows="50%,50%", noresize, border=20, bordercolor=red>

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.

Sample syntax for proportional values:

<!Doctype html>
<html>
<head>
<title> Compound Frames Page</title>
<frameset rows="120,*">
<frame src="banner.html">
<frameset cols="120,*">
<frame src="links.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
Result:

Figure 4
FRAMESET TARGET

 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.

Figure 5

To create this simple webpage like this, you need to create 4 separate pages. The 1st
page we name it as Frame target.

Sample syntax for frame target:

<frameset cols="20%,80%">

<frme src="menu.htm" NORESIZE>

<frame scr="home.htm" name="content" NORESIZE>

<frame src="content.htm" name="content" NORESIZE>

</frameset>

For the 2nd page we name it Menu.

Sample syntax for frame targer:

<p> MENU </p>

<ul>

<li> <a href="home.htm" target="content"> HOME </a></li>

<li> <a href="content.htm" target="content"> CONTENT </a></li>

</ul>

As you can see in the Menu page, we use <ul> or unordered list to create a selection
between our Home and Content pages. We use also <li> or list item and <a> tag for
the hyperlink, which is used to link from one page to another, <href> attribute
indicate the link’s destination. Lastly the <target> attribute use to show the page that
you want to show in the bigger frame. The Home and Content pages is just normal
HTML documents that we do, where you can put any information that you want.

IFRAMES

An iframe is used to display a web page within a web page. An HTML iframe
is defined with the <iframe> tag:

Example:

<iframe src="URL"></iframe>

Iframe - Target for a Link

• An iframe can be used as the target frame for a link.

• The target attribute of the link must refer to the name attribute of the
iframe:

Image1: https://www.google.com/search?q=gif&tbm=isch&tbs=rimg%3ACRe3ccUqz-T4YdjznNCOT57j&client=ms-
android
vivo&prmd=ivn&hl=en&ved=0CBoQuIIBahcKEwjA59GprM7qAhUAAAAAHQAAAAAQBQ&biw=360&bih=560#imgrc=
g5nfxLFL-XQVYM

Image2: https://www.google.com/search?q=cute+okay+gif&tbm=isch&ved=2ahUKEwj-i-
i2wdzqAhWly4sBHc6cBKYQ2-
cCegQIABAA&oq=cute+okay+gif&gs_lcp=CgNpbWcQAzICCAAyBggAEAgQHjIGCAAQCBAeOgQIIxAnOgQIABBDOgYI
ABAHEB46CAgAEAgQBxAeULdOWJ9fYOFraABwAHgAgAGbAYgBQSSAQMwLjWYAQCgAQGqAQtnd3Mtd2l6LWltZ8
ABAQ&sclient=img&ei=SOkVX_7HDKWXr7wPzrmSsAo&bih=657&biw=1349&rlz=1C1CHBF_enPH792PH792&hl=e
n#imgrc=WNwa_lJYbul_kM&imgdii=75r0PLTbxe9rkM

Figure 6

To make this kind of simple iframe HTML document we need to create 3 separate
pages. First create the main page then we name it iframe.html.

Sample syntax for iframe.html page:

<body
<center>

<h2>Iframe - Target for a Link</h2>

<iframe height="320px" width= “300%" src="iframe1.html" name="iframe">

</iframe>

<p><a href="iframe2.html" target="iframe">click me pliss! </a></p>

<p>When the target of a link matches the name of an iframe, the link will open in
the iframe. </p>

</center>

</body>

For other pages it is just the same syntax that we use, we name it iframe1.html
and iframe2.html

Sample syntax for iframe1.html:

<body>

<h2>Animated Images</h2>

<p>The GIF standard allows moving images. </p>

<img src="iframe1.gif" style="width:200px;height:185px;">

</body>

As you can see also we modify the width and the height of our iframe pages so that
we can fit the right size that we want.

IFRAME ATTRIBUTES:

• Use the height and width attributes to specify the size of the iframe.

• The attribute values are specified in pixels by default, but they can also be in
percent (like "80%").

Ex. <iframe src="image.html" height="320" width="300"></iframe>

• By default, an iframe has a border around it.

• To remove the border, add the style attribute and use the
CSS border property:

Ex. <iframe src="demo_iframe.htm" style="border:none;"></iframe>

 ACTIVITIES

HTML FRAMES

Create a webpage that has several Frames like the example below:

The first that you need to do here is to create frame target, then add the frame set
for webpage number 1 and iframe for webpage number 2. Your output should look
like the image below.

For image 1:

• Create a frameset with 3 columns, MISSION, VISION, and CORE

VALUES of Rizal High School. You should also put background image
for 3 pages.

For image
 • Create simple iframe webpages, with an animated picture. Once you
click the link it will automatically change to another webpage.

HTML Frames
Rubrics:

For Activity 1 the students will get total of 50 points.

Items Points
1. Create Frame target 10
2. Create Frameset 10
3. Put Mission, Vision and Core
Values of Rizal High School, 10
also
set a background image
4. Create iframe 10
5. Insert 2 different image once you 10
click the link.
TOTAL 50 points

 Answer Worksheet number 10-1 and submit your answer to our group
messenger

WRAP–UP
In this module we discussed the HTML Frames which describe on how you can
divide 3 or more different webpages in to one window browser. We learned the
different techniques and syntax on how to create frame target, frameset and
iframe.

For this activity you just need to differentiate the frame target, frameset and
iframe base on their uses and functionality on your website.

Frame Target Frameset iFrame

 VALUING

Instruction: Read and answer the following questions carefully in two to three
sentences each number.

1. Why is it important to know the different HTML frames?

2. What do you think are the advantages of having different HTML frames in
your websites?

POST TEST

INSTRUCTIONS: Select the letter that corresponds to the correct answer.

1. Which of the following HTML Frame element that describes the amount of screen
real estate given to each windowpane by dividing the screen into rows or cols.
A. <frames> B. <frameset> C. <iframe> D. <frametarget>
2. Which of the following HTML Frame element that is used to display a web page
within a web page.
A. <frames> B. <frameset> C. <iframe> D. <frametarget>
3. It describes the size and number of rectangular columns within a <frameset>.
A. <target> B. <cols> C. <rows> D. < name>

4. Which of the following HTML frame attributes that is used in frames to link the
other pages?
A. <target> B. <cols> C. <rows> D. < name>
5. This is an attribute that describes the size and number of rectangular rows
within a <frameset>.
A. <target> B. <cols> C. <rows> D. < name>
6. Which of the following HTML attribute prevents viewers from resizing the frame?
A. <link> B. <source> C. < bordercolor> D. <noresize>
7. Which of the following allows you choose a color for your border?
A. <link> B. <source> C. < bordercolor> D. <noresize>
8. Which of the following is syntax use for columns?
A. <frameset cols=”20%,*”> C. <frameset cos=”20%,*”>
B. <frameset columns=”20%,*”> D. <frameset col=”20%,*”>
9. It is an HTML pages that breaks down into multiple windowpanes and put up in
a single window browser?
A. <Frames> B. <iframe> C. <frameset> D.<frame target>
10. Which of the following is syntax use for rows?
A. <frameset ros=”20%,*”> C. <frameset ro=”20%,*”>
B. <frameset row=”20%,*”> D. <frameset rows=”20%,*”>

KEY TO CORRECTION

REFERENCES
Websites

 Accessed July 12, 2020 9:30 pm

https://www.w3schools.com/
 Accessed July 12, 2020 10:00 pm
https://www.tutorialspoint.com/html/html_frames.htm#:˜:text=HTML%fra
mes%20are%20to,organized%3A%20into%20rows%and%20columns.
Pictures

 Accessed July 12, 2020 10:30 pm

Image1:
https://www.google.com/search?q=gif&tbm=isch&tbs=rimg%3ACRe3ccUqz-
T4YdjznNCOT57j&client=ms-android
vivo&prmd=ivn&hl=en&ved=0CBoQuIIBahcKEwjA59GprM7qAhUAAAAAHQA
AAAAQBQ&biw=360&bih=560#imgrc=g5nfxLFL-XQVYM
 Accessed July 12, 2020 10:33 pm

Image2: https://www.google.com/search?
q=cute+okay+gif&tbm=isch&ved=2ahUKEw j-i-i2wdzqAhWly4sBHc6cBKYQ2-
cCegQIABAA&oq=cute+okay+gif&gs_lcp=CgNpbWcQAzICCAAyBggAEAgQHjI
GCAAQCBAeOgQIIxAnOgQIABBDOgYIABAHEB46CAgAEAgQBxAeULdOWJ9f
YOFraABwAHgAgAGbAYgBQSSAQMwLjWYAQCgAQGqAQtnd3Mtd2l6LWltZ8
ABAQ&sclient=img&ei=SOkVX_7HDKWXr7wPzrmSsAo&bih=657&biw=1349
&rlz=1C1CHBF_enPH792PH792&hl=en#imgrc=WNwa_lJYbul_kM&imgdii=75
r0PLTbxe9rkM

 Accessed July 12, 2020 11:20 pm

Image 3:
https://www.google.com/url?sa=i&url=https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwww.freepik.com
%2Ffree-photos-vectors%2Fwatercolor-
background&psig=AOvVaw3Zqa2KiDBLE91pSMhoQpLD&ust=15953650306
67000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOCh_ITc3OoCFQAAA
AAdAAAAABAD