Unit II - Lesson 10 - HTML Frames
-
Upload
mllalaguna -
Category
Documents
-
view
231 -
download
0
Transcript of Unit II - Lesson 10 - HTML Frames
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
1/19
Copyright 2004 ProsoftTraining, All Rights Reserved.
Lesson 10:HTML rames
2007 Prosoft Learning CorporationAll rights reserved
ITD 110 Web Page Design
Modified by Marlon L. Lalaguna for his Computer Education Class
S.Y. 2013-2014
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
2/19
Objectives
Define frames and the purpose of the frameset
document
Use the and tags
Identify the purpose of the tag Target links from one frame to another
Specify default targets using the tag
Create borderless frames, and control margins
and scrolling in frames Identify the purpose of inline frames
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
3/19
The Tag
A container tag, requires a closing
tag
Determines the frame types and sizes on the
page
Two frame types:
Columns
Rows
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
4/19
Columns Example
This frameset was created by the followingcode:
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
5/19
Rows Example
This frameset was created by the following
code:
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
6/19
The Tag
Defines the content in each frame
Placed between the tags
The srcattribute specifies the file that will appearin the frame
In the following example, the page that will appearin the top frame is the file fl-toc.html, and the pagethat will appear in the lower frame is fl-second.html.
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
7/19
The Frameset Document
Contains the the , and elements
The and tags will create frames
only if they are placed correctly into this document
In the frameset document, the element takes the place of the element
The opening tag follows the closing
tag
The tag must contain either the rows attribute or the cols attribute, or both
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
8/19
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
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
9/19
The Tag
For user agents that cannot render frames
Displays alternative text or images
In some ways, similar to the altattribute for
the tag
Code:
If you had a frames-capable browser, you
would see frames here.
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
10/19
Targeting Frames with Hyperlinks
Use thename
attribute to name a frame, then targetthe frame name with hyperlinks
The syntax for naming a frame is as follows:
The following code names a frame:
The following code targets this frame:
Visit James
If a user clicks the Visit James link, the James pagewill open in the Authors frame
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
11/19
Base Target
A base target automatically sets a default
target frame for all links in a page
Created using the tag
Code:
This code will cause all linked pages to open
in the frame named Main
The href attribute is optional
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
12/19
Borders, Margins and Scrolling
To create borderless frames, add thef rameborder attribute to the tag
f rameborder = "1" causes borders to display
(the default)
f rameborder = "0" hides borders Example:
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
13/19
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
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
14/19
Borders, Margins
and Scrolling (contd) Scrolling frames
The scrol l ing attribute to the tag controls
whether the scrollbar appears
The scrol l ing attribute values: " yes" enables scrolling (the default)
" no " disables scrolling
" au to" allows the browser to decide
Example:
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
15/19
Inline Frames
Inserts an HTML or XHTML document inside
another
Also called "floating frames"
Created with the tag
The browser reads the tag from the
file, then makes a separate request to the
server for the embedded file
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
16/19
Inline Frames (contd) Simple XHTML page with inline frame:
iFrame Example
This text is found iniframe.html
Your browser does not support frames.
This text is also found in iframe.html.
The next slide shows the results of this code
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
17/19
Inline Frames (contd)
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
18/19
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 necessarywithout 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 ora PDF)
-
7/27/2019 Unit II - Lesson 10 - HTML Frames
19/19
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