Scribd
Upload
17 views28 pages

Topic 2.4 Frameset and Iframe

The document discusses HTML frames and iframes. Frames allow splitting a browser window into multiple sections to display different content. Iframes embed external content within a page by specifying a URL source. Attributes control iframe properties like dimensions, scrolling, and borders.

Uploaded by

SHARVENE SHARVENE
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
17 views28 pages

Topic 2.4 Frameset and Iframe

The document discusses HTML frames and iframes. Frames allow splitting a browser window into multiple sections to display different content. Iframes embed external content within a page by specifying a URL source. Attributes control iframe properties like dimensions, scrolling, and borders.

Uploaded by

SHARVENE SHARVENE
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/ 28

Topic 2: Hypertext Markup Languange (HTML)

TOPIC 2.4 FRAME AND FRAMESET

2
FRAME AND FRAMESET

• Frameset used to split the visual real estate of a browser window into multiple
frames.
• Each frame has it’s own contents and the content in one don’t spill into the next.

Frameset

Frame 1 Frame 2 Frame 3

3
FRAME AND FRAMESET

• The <frame> tag is not supported in


If you want to validate a page
HTML5. containing frames, be sure
• The <frame> tag defines one particular the <!DOCTYPE> is set to either
"HTML Frameset DTD" or
window (frame) within a <frameset>.
"XHTML Frameset DTD".
• Each <frame> in a <frameset> can have
different attributes, such as border,
Frameset
scrolling, the ability to resize, etc.

Frame 1 Frame 2 Frame 3

4
FRAME AND FRAMESET

Usability challenges:

• simply not well-suited to creating responsive websites.

Accessibility challenges:

• Screen readers and other assistive technologies have a very hard time
understanding and communicating websites that use frames.
5
FRAME AND FRAMESET

A simple three-framed page:

6
FRAME AND FRAMESET

Example:

7
FRAME AND FRAMESET

Example:

8
FRAME AND FRAMESET

Example:

9
Activity 2.10 : Frame and Frameset

1. Construct and HTML code to build this frame

10
Activity 2.11 : Frame and Frameset

2. Construct and HTML code to build this frame

11
FRAME AND FRAMESET
noresize

• Frames can be sized either in pixels or


percentages, or they can be set to automatically
adjust in size based on the available space.
• To specify the size of a frame, insert the desired
value in the cols or rows attribute.
• website visitors can use their mouse to drag the
border between two frames to resize the
frames.
• If this is undesirable, the attribute noresize can
be applied to a frame element to prevent
resizing. 12
FRAME AND FRAMESET

scrolling

Has three possible values : YES, NO and AUTO.

<frame src=“menu.html” scrolling=“yes”>

13
FRAME AND FRAMESET
Embedded HTML frames
<frameset rows="15%,*,10%">
<frame src="header.html" name="top" id="top" />
<frameset cols="20%,*,11%">
<frame src="menu.html" name="left" id="left" />
<frame src="home.html" name="home" id="home" />
<frame src="right.html" name="right" id="right" />
</frameset>
<frame src="footer.html" name="bottom" id="bottom" />
<noframes>
<body> <p><a href="menu.html">Contents</a></p>
</body>
</noframes>
</frameset>

14
FRAME AND FRAMESET
Embedded HTML frames

top
<frameset rows="15%,*,10%">
<frame src="header.html" name="top" id="top" />
<frameset cols="20%,*,11%">
<frame src="menu.html" name="left" id="left" />
<frame src="home.html" name="home" id="home" />
<frame src="right.html" name="right" id="right" />
</frameset> left home right
<frame src="footer.html" name="bottom" id="bottom" />
<noframes>
<body> <p><a href="menu.html">Contents</a></p>
</body>
</noframes>
</frameset>
bottom
15
FRAME AND FRAMESET

16
iFRAME

An iframe (short for inline frame) is and HTML element that allows you to
embed a web page or other content within your web page

HTML iframe syntax

<iframe src="url" title="description"></iframe>

17
iFRAME

Iframe – set Height and Width


• Use the height and width attributes to specify the size of the iframe.
• The height and width are specified in pixels by default:
Example:
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

• Or you can add the style attribute and use the CSS height and width properties
Example:
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

18
iFRAME

Iframe – Remove the Border


• By default, an iframe has a border around it.
• To remove the border, add the style attribute and use the CSS border property:

Example:
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

• With CSS, you can also change the size, style and color of the iframe's border
Example:
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

19
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:

Example:
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

20
iFRAME

Other attributes
• You can also add other attributes to the iframe element, such as name, id, class, style,
and sandbox, depending on your needs.

Example:
<iframe src="https://www.example.com" width="500" height="500" name="example-iframe"
id="example-iframe" class="iframe-class" style="border: none;" sandbox="allowscripts">
</iframe>

In this example, the name and id attributes give the iframe a unique identifier, the class attribute applies a CSS class to
the iframe, the style attribute sets a custom border style, and the sandbox attribute restricts what the embedded page
can do (in this case, allowing only scripts to be executed)

21
iFRAME PROPERTIES
Here are some of the common properties and attributes of an iframe in HTML:
• src: Specifies the URL of the web page to be embedded in the iframe.
• width and height: Specifies the dimensions of the iframe in pixels.
• name and id: Specifies a unique identifier for the iframe.
• class and style: Specifies a CSS class and inline styles for the iframe.
• Frameborder and allowfullscreen: Specifies whether the iframe should have a border and whether it
should be allowed to enter full-screen mode.
• scrolling: Specifies whether scrollbars should appear within the iframe if the content is larger than the
dimensions of the iframe.
• sandbox: Specifies a set of restrictions on the embedded page, such as preventing scripts or plugins from
running.
• seamless: Specifies that the iframe should appear to be part of the parent document, without any borders
or padding.
• srcdoc: Specifies the HTML content of the iframe directly, instead of loading it from a separate URL.
These properties and attributes can be used to customize the appearance and behavior of the iframe and its
embedded content.
22
Techniques of iFrame design
There are several techniques for designing iframes in HTML. Here are a few common ones:
• Basic iframe: This technique involves creating a simple iframe that displays a web page inside the parent web page. It can be
customized with the src, width, height, and other attributes to fit the desired layout.

• Responsive iframe: This technique involves using CSS to make the iframe responsive to the size of the screen or viewport, so
that it scales and resizes automatically. This can be achieved by setting the width and height to a percentage value and using
CSS media queries to adjust the iframe's size and layout for different screen sizes.

• Floating iframe: This technique involves using CSS to make the iframe float or hover over the parent web page, creating a
dynamic effect. This can be achieved by using the position and z-index CSS properties to control the positioning and layering of
the iframe.

• Cross-domain iframe: This technique involves using an iframe to display content from a different domain or server than the
parent web page. This can be useful for embedding third-party content, such as videos, maps, or social media widgets.
However, cross-domain iframes can raise security concerns, so it's important to use them carefully and avoid exposing
sensitive data or functionality.

These are just a few examples of the many techniques that can be used to design iframes in HTML. The choice of technique will
depend on the specific requirements of the web page and the desired user experience.
23
Techniques of iFrame design
Here are some examples of how to use different techniques to create iframes in HTML:

Basic iframe: This technique involves creating a simple iframe that displays a web page inside the parent web page. It
can be customized with the src, width, height, and other attributes to fit the desired layout

Example:

< iframe src ="https://www.example.com" width="500" height="500"></iframe>


• Responsive iframe: This technique involves using CSS to make the iframe responsive to the size of the screen or
viewport, so that it scales and resizes automatically. This can be achieved by setting the width and height to a
percentage value and using CSS media queries to adjust the iframe's size and layout for different screen sizes.

Example: < div style="position:relative;padding-bottom:56.25%;height:0;">


<iframe src="https://www.example.com" width="100%" height="100%"
style="position:absolute;top:0;left:0;border:none;"></iframe>
</div>
24
Techniques of iFrame design
Here are some examples of how to use different techniques to create iframes in HTML:
• Floating iframe: This technique involves using CSS to make the iframe float or hover over the parent web page,
creating a dynamic effect. This can be achieved by using the position and z-index CSS properties to control the
positioning and layering of the iframe.
Example:
<style>
. floating-iframe {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999; }
</style>
< iframe src ="https://www.example.com" width="500" height="500“ class=“floating-
25
iframe"></iframe>
Techniques of iFrame design
Here are some examples of how to use different techniques to create iframes in HTML:
• Cross-domain iframe: This technique involves using an iframe to display content from a different domain or server
than the parent web page. This can be useful for embedding third-party content, such as videos, maps, or social
media widgets. However, cross-domain iframes can raise security concerns, so it's important to use them carefully
and avoid exposing sensitive data or functionality.

Example:

< iframe src ="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560"


height="315" allowfullscreen></iframe>

These examples illustrate some of the different techniques that can be used to create iframes in HTML,
including basic iframes, responsive iframes, floating iframes, and cross-domain iframes. By adjusting the
attributes and styles of the iframe element, you can customize the appearance and behavior of the iframe
to fit your needs.
26
Activity 2.12 : iFrame

1. Create a new HTML file using a text editor or an HTML editor.


2. Define a frameset that contains two frames, one on the left and one on the right.
3. Create two separate HTML files, one for the menu and one for the content.
4. In the menu HTML file, create a list of links that will be used to navigate the content in
the right frame.
5. In the content HTML file, create some content to display in the right frame.
6. Add an iframe to the content HTML file, which displays a map of your location.
7. Save all the HTML files in the same folder

27
Activity 2.13 : iFrame

Using the same file

1. Define an iframe that displays a YouTube video.


2. Add a caption below the YouTube video using the <figcaption> element.

28

You might also like