SHS

GRADE
11

COMPUTER PROGRAMMING .NET 1

QUARTER 3
SELF-LEARNING KIT 2
PERFORM COMPUTER OPERATIONS

Name: _______________________________________________________________________

Grade Level & Section: __________________________________________________________

Subject Teacher: _______________________________________________________________

 OBJECTIVES:

After this lesson, you will be able to answer the following questions:
• What are Block and Inline Elements?
• What is an Iframe?
• How to create an Iframe that is Targeted by a Link?

LESSON PROPER

Every HTML element has a default display value,

depending on what type of element it is.
There are two display values: block and inline.

Block-level Elements
• A block-level element always starts on a new line.
• A block-level element always takes up the full width available (stretches out to the left and
right as far as it can).
• A block level element has a top and a bottom margin, whereas an inline element does not.

Example block level elements

<h1>-<h6> <hr> <p>

Page | 1
Inline Elements
• An inline element does not start on a new line.
• An inline element only takes up as much width as necessary.

Example Inline elements

<a> <img>

HTML Iframes
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.

HTML Iframes
• An HTML iframe is used to display a web page within a web page.
• The HTML <iframe> tag specifies an inline frame.
• An inline frame is used to embed another document within the current HTML document.

How to create and Iframe?

Page | 2
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

<iframe src=”1.html” name=”ed” height=”300” width=”300”></iframe>

<p><a href=”2.html” target=”ed”> open html 2 </a> </p>

<iframe src=”1.html” name=”ed” height=”300” width=”300”></iframe>

<p><a href=”2.html” target=”ed”> open html 2 </a> </p>

Page | 3
<iframe src=”1.html” name=”ed” height=”300” width=”300”></iframe>

<p><a href=”2.html” target=”ed”> open html 2 </a> </p>

<iframe src=”1.html” name=”ed” height=”300” width=”300”></iframe>

<p><a href=”2.html” target=”ed”> open html 2 </a> </p>

<iframe src=”1.html” name=”ed” height=”300” width=”300”></iframe>

<p><a href=”2.html” target=”ed”> open html 2 </a> </p>

Page | 4
<iframe src=”1.html” name=”ed” height=”300” width=”300”></iframe>

<p><a href=”2.html” target=”ed”> open html 2 </a> </p>

<iframe src=”1.html” name=”ed” height=”300” width=”300”></iframe>

<p><a href=”2.html” target=”ed”> open html 2 </a> </p>

<iframe src=”https://quizizz.com” name=”ed” height=”300” width=”300”></iframe>

REFERENCES:

https://www.w3schools.com/tags/tag_img.asp
https://w3schools.com/html/iframes
Page | 5
 ASSESMENT A

Encircle the correct answer.

1 How can we target our iframe? What attribute of <a> tag we will use?

A src="name of the iframe"

B src="filename of the webpage"

C target="filename of the webpage"

D target="name of the iframe"

2 How are we going to name our iframe? What attribute we will use?

A src

B name

C height

D target

3 How to put a webpage in an iframe? What attribute we will use?

A src

B name

C height

D target

Page | 6
4 What tag is used to create Inline Frames?

A <iframe>

B <inline>

C <frames>

D <insert>

5 <p> element is an example of.

A Block level Element

B Inline Element

C Both A and B

D None of the above

6 This element only takes up as much width as necessary

A Block level Element

B Inline Element

C Both A and B

D None of the above

7 This element does not start on a new line.

A Block level Element

B Inline Element

C Both A and B

D None of the above

Page | 7
8 This element always takes up the full width available.

A Block level Element

B Inline Element

C Both A and B

D None of the above

9 This element always starts on a new line.

A Block level Element

B Inline Element

C Both A and B

D None of the above

10 Every HTML element has a default display value. What are these values?

A Block level Element

B Inline Element

C Nested HTML Elements

D Both A and B

E Both B and C

Page | 8
 ASSESMENT B

Build you own code based on the given task and situation.

EXAMPLE
• Create an inline frame or iframe.
• The iframe should have the height and width of 400.
• Put “quizizz.com” inside your iframe.

EXAMPLE ANSWER

<iframe src=”https:\\quizizz.com” height=”400” width=”400”></iframe>

1
• Create an inline frame or iframe.
• The iframe should have the height and width of 300.
• Insert the filename “main.html” inside the iframe.

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

_______

Page | 9
2
• Create an inline frame or iframe with the height 200 and width of 300.
• Name your iframe “frame1”.
• Insert the filename “main.html” inside the iframe.
• Create and make the text “contact us” a hyperlink going to “contact.html”.
• The hyperlink “contact us” should target your iframe.

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________
Page | 10
________________________________________________________________________________