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


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


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


4/19

Columns Example

This frameset was created by the followingcode:


5/19

Rows Example

This frameset was created by the following

code:


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


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


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.


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


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


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:


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


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:


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


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


17/19

Inline Frames (contd)


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)


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

Unit II - Lesson 10 - HTML Frames

Documents

Transcript of Unit II - Lesson 10 - HTML Frames