HTML EssentialsFrames and Frame Tags

Introduction

• A frame used to be an effective design tool

• Utilized space effectively by subdividing screen

• One idea: use part of screen as TOC and display on other side

• Not using frames tended to be left-justified ( left-heavy )

• Direct result of HTML

• Tends to center or left justify

• Very few tags to right justify

Introduction

• Another design issue – users tend to go to new page then revert to previous page

• Scrolled down but needed / wanted to return to top

• Frames allow to display multiple HTML pages simultaneously

• Index in one frame

• Details in another

Introduction

• Example – Table of contents

• Split vertically with TOC down left side

• Result in right side

• Example – Browsing Internet sales sites

• Inventory on one side

• Description on another

• Could use tabbed panes but probably requires programming

Frame layout and design

• Think of independent regions to divide browser window into

• Common theme for frame layout and design

• Each is rectangle with width and height

• Has a location: left, right, top, or bottom

• Each frame has a web page associated with it

• Rules

• Keep frame set simple

• Keep frame contents short

• Keep frames organized

• Surf web for existing design details

Frame Sets

• Consists of multiple frames

• Each must be sized and placed in container

• Rectangle: determined with width and height

• Can be measured in pixels or percentage of browser window

• Axis are

• Horizontal from upper left ( Columns )

• Vertical from upper left ( Rows )

• HTML doesn’t have a limit on frame nesting

< frameset > Tags

• < frameset > tag

• Specifies

• ROWS

• COLS

• Can be specified by %, pixels, or proportion ( ‘7*,3*’ )

• If set at same time – grid is created

• Must close with a < /frameset >

< frame > Tags

• The < frame > tag

• Tag doesn’t close

• Major attributes:

• SRC: HTML document displayed initially

• NAME: Can be a target

< noframes > Tag

• Used if browser doesn’t understand frames / frames have been turned off

• < noframes > must close with a < /noframes > tag

• Has no attributes

• Appears as< noframes >

…tags that would normally appear inside a < body > tag

< /noframes >

< frame > Tags Attributes

• src: link to local or offsite web page

• name: target frame from link

• title: specifies the title of the page

• target: specifies that clicking on that link affects the target name

• If the target name is _BLANK, a new window is opened

< frame > Tags Attributes

• Examples:

<a href="InitialContents.html" target="myTarget">Initial Contents</a><br>

<a href="example2.html" target="myTarget" title="Another frame set">Another frame set</a><br>

<a href="http://www.slcc.edu" target="_BLANK" title="SLCC Web page">

SLCC programs</a><br>

<frameset cols = "160, *">

<frame src="tableOfContents.html">

<frame src="initialContents.html" name="myTarget">

</frameset>

< iframe > Tag

• By using an in-line < iframe > an external webpage may be placed into other HTML documents

• Originally, for IE but now is supported by other browsers: Firefox, Opera, Google Chrome, Safari

• Allows loading of separate HTML files into an existing document. Iframes can be placed anywhere in the document flow

• The iframe element bears a strong resemblance to the frame element and can be referenced via the frames array

• The iframe element is not valid in strict (X)HTML. Documents containing iframes will validate with transitional doctype declarations

< iframe > Tag

• Example:

<iframe src =“http://ksl.com/news_article.html width=“550” height="300"><p>Your browser does not support iframes.</p>

</iframe>

The End