Scribd
Upload
25 views5 pages

FRAMES

Uploaded by

magalongsamantha09
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 views5 pages

FRAMES

Uploaded by

magalongsamantha09
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/ 5

Commonwealth High School

Ecols st. Commonwealth Quezon City

GRADE 10- Information and Communications Technology

Name of Learner: _________________ Grade Level: _____________


Section: ____________________ Date: ___________________

INTRODUCTION TO FRAMES
WHAT is a frame?
• Frames divide the browser window into parts, each of which appears as a separate HTML document.
• Frames work very much like tables. They are used to divide the screen into two or more web pages,
and
• simultaneously display their contents in a single browser window.
• You can display more than one HTML documents in the same browser window. Each HTML document
is called a FRAME. Each frame is independent of each other while still being displayed on the same
page.
• Each region is scrollable. Each frame has its own scrollbar which can be used to scroll through the
pages.
• You can present information in a more flexible and useful manner.
• A frame can be resized on screen by the user. Resizing can also be disabled by the author, ensuring a
constant frame size.
• You can create a table of contents which can contain links that, when clicked, can display the results on
an adjoining frame.
• You can use frames to allow queries or questions to be posed and answered on the same page with
one frame containing the query or questionnaire and the other presenting the results.
SYNTAX: <frameset> </frameset>
FRAMESET – tag to create a frame
Attributes of Frameset tag
✓ Rows- defines the number and size of horizontal frames.
✓ Columns - defines the number and size of vertical frames.
✓ Border – specifies the space between frames
✓ Bordercolor – customizes color of lines separating frames.
✓ Frameborder – turns border between frames on and off. (0 or no borders, 1 or yes enables
border.

Attribute of Frame tag


✓ Source – file source
✓ Margin height – specifies space between frame contents and top and bottom borders.
✓ Margin width – specifies space between frame contents and left and right borders.
✓ Noresize – stops users from changing a frames dimension.
✓ Scrolling – controls the appearance of the frames: “YES” includes scrollbars and “NO” prevents
the scrollbar to appear.

Creating a Vertical Frame with Cols attribute


Example:
<frameset cols =“25%,75%”>
<frame src=“html file 1”>
<frame src=“html file 2”>
</frameset>
Save as framecols.html
 The element specifies two columns. The first column (on the left) takes 25% of the browser’s window
and the second window (on the right) takes 75% of the browser’s window space.

Creating a Horizontal Frame with Rows attribute

Example:
<frameset rows =“50%,50%”>
<frame src=“top.html”>
<frame src=“bottom.html”>
</frameset>
Save as framerows.html
 The rows attribute works similarly with Cols attribute. Horizontal frames are created from top to
bottom. Like the COLS attribute, specify the height of frames using percentage values.

HTML Iframes
 Just like frames, inline frames display another Webpage but inline frames are not placed within
<frameset></frameset> but instead in <body></body>, yes, within the body of the Web page itself.
Inline frames are embedded on the Web page-A Webpage within a Webpage.
 Inline frames are defined by the container tag <iframe></iframe>
 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.
HTML Iframe Syntax
 <iframe src="url" title="description"></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:
• <iframe src=“url" height=“value" width=“value" title="Iframe Example"> </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
• <iframe src=“url" style="border:none;" title="Iframe Example"></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
• <iframe src=“current webpage (url)" name="iframe_a" title="Iframe Example"></iframe>
• <p><a href=“target webpage (url)" target="iframe_a">target webpage</a></p>

 Navigation is like a road sign.


 Navigation: The art or science of determining the ship’s or aircraft’s position and of
conducting a ship or aircraft from one position to another.
 Navigation – to operate or control the direction of the links.
 Target – specifies where to display the file.
 Name – defines frame name for reference by hyperlink.
Two files/pages needed in navigational frame.
✓ Link page
✓ Frame Page
Attributes to be used in navigational frames.
✓ Name
✓ Target
Steps to create a navigational frame
Step 1 – Give each frame on the page a name.
Step 2 – Point each hyperlink to one of the named frame.

You might also like