copyright © 2004 prosofttraining, all rights reserved. lesson 9: html frames
TRANSCRIPT
![Page 1: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/1.jpg)
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Lesson 9:HTML Frames
![Page 2: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/2.jpg)
Lesson 9 Objectives• Define frames and the purpose of the frameset document• Use the <frameset> and <frame> tags• Create a frameset document• 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• Discuss the appropriate use of frames• Consider search engine optimization (SEO) issues when using
frames
![Page 3: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/3.jpg)
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
![Page 4: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/4.jpg)
Columns Example
• This frameset was created by the following code: <frameset cols="35%,65%"> </frameset>
![Page 5: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/5.jpg)
Rows Example
• This frameset was created by the following code: <frameset rows="180,*"> </frameset>
![Page 6: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/6.jpg)
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 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 fl-second.html:
<frameset rows="180,*"><frame src="fl-toc.html"/><frame src="fl-second.html"/>
</frameset>
![Page 7: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/7.jpg)
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
![Page 8: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/8.jpg)
Viewing Source with Framesets
• Click on the frame you want to view• Take the necessary steps to view the
source code• The same instructions apply to printing
from a frame
![Page 9: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/9.jpg)
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>
![Page 10: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/10.jpg)
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
![Page 11: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/11.jpg)
Specifying a 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
![Page 12: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/12.jpg)
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"/>
![Page 13: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/13.jpg)
Borders, Margins and Scrolling (cont'd)
• 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
![Page 14: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/14.jpg)
Borders, Margins and Scrolling (cont'd)
• 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"/>
![Page 15: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/15.jpg)
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
![Page 16: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/16.jpg)
Inline Frames (cont'd)
• 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…
![Page 17: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/17.jpg)
Inline Frames (cont'd)
![Page 18: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/18.jpg)
Inline Frames (cont'd)
• Inline frames are useful for:– Web documents in which all content will remain
static, 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)
![Page 19: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/19.jpg)
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
![Page 20: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/20.jpg)
Frames andSearch Engine Optimization
• In general, using frames will lower your page's rank in a search engine
• Many search engine spiders do not follow the frame sources from the frameset page
![Page 21: Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames](https://reader035.vdocument.in/reader035/viewer/2022062715/56649da65503460f94a915c3/html5/thumbnails/21.jpg)
Lesson 9 Summary Define frames and the purpose of the frameset document Use the <frameset> and <frame> tags Create a frameset document 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 Discuss the appropriate use of frames Consider search engine optimization (SEO) issues when using
frames