Scribd
Upload
18 views11 pages

Comprog1 - SLK Q3 2

The document discusses HTML elements and iframes. It explains that elements have either block-level or inline display, and lists examples of each. It then defines iframes as elements that display other web pages within the current page. It demonstrates how to create an iframe and link to another page within the iframe using the target attribute.

Uploaded by

emmanuel sim
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
18 views11 pages

Comprog1 - SLK Q3 2

The document discusses HTML elements and iframes. It explains that elements have either block-level or inline display, and lists examples of each. It then defines iframes as elements that display other web pages within the current page. It demonstrates how to create an iframe and link to another page within the iframe using the target attribute.

Uploaded by

emmanuel sim
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/ 11

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
________________________________________________________________________________

You might also like