1. HTML Essentials Frames and Frame Tags

2. 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

3. 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

4. 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

5. 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

6. 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

7. Tags 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

8. Tags The tag Tag doesn’t close Major attributes: SRC: HTML document displayed initially NAME: Can be a target

9. Tag Used if browser doesn’t understand frames / frames have been turned off must close with a tag Has no attributes Appears as …tags that would normally appear inside a tag

10. 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

11. Tags Attributes Examples: Initial Contents Another frame set SLCC programs

12. Tag By using an in-line 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

13. Tag Example: Your browser does not support iframes.

14. The End