Scribd Logo
Upload

Welcome to Scribd!

  • 550 views

    Unit II - Lesson 10 - HTML Frames

    Uploaded by

    mllalaguna
    Lesson 10: HTML frames. Objectives Define frames and the purpose of the frameset document. Use the and tags to target links from one frame to another. Create borderless frames, and control margins and scrolling in frames.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd

    Unit II - Lesson 10 - HTML Frames

    Uploaded by

    mllalaguna
    550 views19 pages
    Lesson 10: HTML frames. Objectives Define frames and the purpose of the frameset document. Use the and tags to target links from one frame to another. Create borderless frames, and control margins and scrolling in frames.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Lesson 10: HTML frames. Objectives Define frames and the purpose of the frameset document. Use the and tags to target links from one frame to another. Create borderless frames, and control margins and scrolling in frames.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    550 views19 pages

    Unit II - Lesson 10 - HTML Frames

    Uploaded by

    mllalaguna
    Lesson 10: HTML frames. Objectives Define frames and the purpose of the frameset document. Use the and tags to target links from one frame to another. Create borderless frames, and control margins and scrolling in frames.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    of 19

    Lesson 10: HTML Frames

    Modified by Marlon L. Lalaguna for his Computer Education Class S.Y. 2013-2014

    2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design

    Copyright 2004 ProsoftTraining, All Rights Reserved.

    Objectives
    Define frames and the purpose of the frameset document Use the <frameset> and <frame> tags Identify the purpose of the <noframes> tag Target links from one frame to another Specify default targets using the <base> tag Create borderless frames, and control margins and scrolling in frames Identify the purpose of inline frames

    The <frameset> Tag


    A container tag, requires a closing </frameset> tag Determines the frame types and sizes on the page Two frame types: Columns Rows

    Columns Example

    This frameset was created by the following code: <frameset cols="35%,65%"> </frameset>

    Rows Example

    This frameset was created by the following code: <frameset rows="180,*"> </frameset>

    The <frame> Tag


    Defines the content in each frame Placed between the <frameset> </frameset> tags The src attribute specifies the file that will appear in the frame In the following example, the page that will appear in the top frame is the file fl-toc.html, and the page that will appear in the lower frame is flsecond.html.
    <frameset rows="180,*"> <frame src="fl-toc.html"/> <frame src="fl-second.html"/> </frameset>

    The Frameset Document


    Contains the the <frameset>, <frame> and <noframes> elements The <frameset> and <frame> tags will create frames only if they are placed correctly into this document In the frameset document, the <frameset> element takes the place of the <body> element The opening <frameset> tag follows the closing </head> tag The <frameset> tag must contain either the rows attribute or the cols attribute, or both

    Viewing Source with Framesets


    Click on the frame you want to view Take the necessary steps to view source The same instructions apply to printing from a frame

    The <noframes> Tag


    For user agents that cannot render frames Displays alternative text or images In some ways, similar to the alt attribute for the <img> tag Code:
    <noframes> <body> If you had a frames-capable browser, you would see frames here. </body> </noframes>

    Targeting Frames with Hyperlinks


    Use the name attribute to name a frame, then target the frame name with hyperlinks The syntax for naming a frame is as follows: <frame src="url" name="framename"/> The following code names a frame: <frame src="james.html" name="authors"/> The following code targets this frame:
    <a href="james.html" target= "authors"> Visit James </a>

    If a user clicks the Visit James link, the James page will open in the Authors frame

    Base Target
    A base target automatically sets a default target frame for all links in a page Created using the <base> tag Code: <base target="main" href="page.html"/> This code will cause all linked pages to open in the frame named Main The href attribute is optional

    Borders, Margins and Scrolling


    To create borderless frames, add the frameborder attribute to the <frame> tag frameborder= "1" causes borders to display (the default) frameborder= "0" hides borders Example:
    <frame src="home.html" name="main" frameborder="0"/>

    Borders, Margins and Scrolling (contd)


    Frame margin width and height The marginheight attribute designates the space, in pixels, between the top and bottom margins The marginwidth attribute designates the space, in pixels, between the left and right margins

    Borders, Margins and Scrolling (contd)


    Scrolling frames The scrolling attribute to the <frame> tag controls whether the scrollbar appears The scrolling attribute values: "yes" enables scrolling (the default) "no" disables scrolling "auto" allows the browser to decide Example:
    <frame src= "ex.html" name= "ex" frameborder="0" scrolling="no"/>

    Inline Frames
    Inserts an HTML or XHTML document inside another Also called "floating frames" Created with the <iframe> tag The browser reads the <iframe> tag from the file, then makes a separate request to the server for the embedded file

    Inline Frames (contd)


    Simple XHTML page with inline frame:
    <h1>iFrame Example</h1> <p><strong>This text is found in iframe.html</strong><p/> <iframe src="embedded.html" scrolling= "yes"> Your browser does not support frames. </iframe>
    <p><strong>This text is also found in iframe.html. </strong></p>

    The next slide shows the results of this code

    Inline Frames (contd)

    Inline Frames (contd)


    Inline frames are useful for: Web documents in which all content will remain stable, except for one section (e.g., a weekly special) -- the frequently changed section can be an inline frame, which can be quickly modified when necessary without editing the entire page Documents that you prefer to embed in a page instead of placing on a separate page or providing as a download (such as text or a PDF)

    Appropriate Use of Frames


    Frames are useful only in specific situations Consider the following issues: Function Appeal Development challenges Accessibility limitations Usability with the browser Back button

    You might also like