1. Windows and frames and the anchor tag

2. Frames Independent, scrollable portions of a Web browser window, with each frame capable of containing its own URL Each frame is its own independent HTML document AJAX “web 2.0” web pages were initially exploiting frames to pass data (browsers re-used their frame code too…)

3. Creating Framesets Frames can be created in rows, columns or both attribute: ROWS COLS

4. tag A frame container Can only contain tag Other tags are ignored

5. Code same: These holds 4 webpages 21 34

6. Frame dimensions Pixels: absolute sizing Percentages: relative sizing Asterisk (*) designates remainder of visible window You may combine the above kinds all at once List multiple frames with commas

7. frameset cols="40%, 60%" frameset cols="20, 50%,*" frameset cols="*, *,32 " Examples 40%60% 50%* **32

8. tag Used to specify options for individual frames, e.g., URLs Placed within tags Can be assigned a name using the NAME attribute, which can be used as a target for a link (A tag or javascript)

9. Frames Example Frame Example

11. AttributeDescription srcSpecifies the URL to be opened in the frame nameAssigns a name to an individual frame noresizeDisables the user’s ability to resize an individual frame scrollingDetermines whether a frame should include scrollbars marginheightSpecifies the top & bottom margins of the frame in pixels marginwidthSpecifies the left & right margins of the frame in pixels

14. Using the TARGET attribute TARGET attribute Determines in which frame or Web browser window a URL opens tag Used to specify a default target for all links in a document Menu systems are a popular use for frames One frame to contain the hypertext links Second frame to contain clicked URLs

15. Special Targets _top - kill all frames; the full window _self - the same frame _blank - always a new window _parent - in the parent frameset

16. Nesting Frames Nested frame: Frame contained within another frame Must be used to sub-divide frames URLs of frames are loaded in the order in which each tag is encountered Order your frame tags (in the html) in the order you want pages to be processed by the browser

17. Nesting Frames Example

19. Frame Formatting

20. Frame Formatting marginheight=”50”

21. The tag Displays an alternate message to users of those browsers Older browsers are incompatible with frames Solutions for those users: Show link to navigation frame’s web page Show link or provide a special navigation links page Provide links to where the user could upgrade their browser or submit a complaint

22. iFrames (Inline Frame) Create a box or “portal” anywhere inside your webpage which is a frame Similar to, except the it is used like an image tag is (width, height) longdesc=”this attribute is needed for non-visual browsers” exists within the normal DOCTYPE do not use iframe on the FRAMESET DOCTYPE

23. iFrame Example Lazy Poorman's Virtual Email Service.… old browsers see this.... buttons and whatever...

24. Frame design considerations Frame size – avoid making user scroll excessively Bookmarking can be a problem – what is bookmarked? Search engines cannot penetrate deeply into frames – code meta information carefully Not all browsers recognize frames; coding can cause repetitive work Frames are relatively complex

25. Alternate Uses Rich HTML editors The online text editors that go beyond the simple TEXTAREA form box almost all use iFrames or Frames Hidden size=0 frames Preload graphics without javascript coding store javascript code or data submit hidden forms; read results (1 st gen AJAX)

26. DOM / Javascript Frames are Window objects Security restrictions continue to limit your ability to manipulate objects between frames/windows You can code from the parent page to the child-frame page to a limited extent. Access to child frames is CUT if the child frame is not located on the same website!

27. Recommendations Do NOT use frames (general rule) Frames create user interface issues and security issues for browsers HTML 5 tried to kill frames; added to iFrame instead iFrames are commonly used; initially, iframes were the basis for AJAX Many “web 2.0” techniques depend upon the use of iframes