1. 1 HTML Frames http://jjcweb.jjay.cuny.edu/ssengupta/

2. Learning Objectives  Explore the uses of frames in a Web site  Display a document within a frame  Format the appearance of a frame 2

3. What is a frame?  Frames are sections of the browser window capable of displaying the contents of multiple webpages in a single Web page display 3

4. Remember!  The browser has to load multiple HTML files when working with frames 4

5. Planning Your Frames first  Before you start creating your frames, plan their appearance and how they are to be used: o What information will be displayed in each frame? o How do you want the frames placed on the Web page? o What is the size of each frame? o What Web pages will users first see when they access the site? o Should users be permitted to resize the frames to suit their needs? 5

6. Planning Your Frames Layout 6

7. Frameset  A frameset describes the frame layout  The element is used to store the definitions of the various frames in the file. These definitions will typically include: o Size and location of the frame o Web pages the frames display 7

8.  What is the tag used for frameset?  …  example Learning Frames define layout and frames here 8 Frameset

9. Layout Defined in Either Rows or Columns 9

10. Frames in rows or columns  You must choose to layout your frames in either rows or columns  To create a frame layout, you will use the rows and cols attributes of the element o The rows attribute creates a row of frames o The cols attribute creates a column of frames 10

11.  Creating a row frame layout o attribute name: rows o attribute value: number of pixels | percentage | * 11 rows attribute for

12.  Creating a column frame layout o attribute name: cols o attribute value: number of pixels | percentage | * 12 cols attribute for

13. Content of frames  So, now we have created the frame layout  But the frames are not yet visible!!  So, what goes inside the frames? HTML files!!! 13

14.  use tag within o & tags 14 Define frame source

15. Let’s create the first example 15

16. Creating a Nested frame structure 16 Combination of rows and cols

17. Creating a Nested frame structure 17 Learning Frames Remember correct nesting of the structures are ABSOLUTELY important here.

18. 18 Nesting framesets  nesting one pair of tags in another

19. Practice example 19 streetsign logo here John Jay Link Class website Link Some Description here logo.html link.html home.html

20. Covered so far… 20

21. Learning Frame Styling 21

22. Quick recap from last class  What is the tag for creating frame structure?  What is the tag for inserting html files inside the frame structures? 22

23. Formatting a Frame  As developer, you can control three attributes of a frame: o Scroll bars o Whether or not the user is allowed to change the size of the frame o The size of the margin between the source document and the frame border 23

24. 1. Hiding and Displaying Scroll Bars  By default, scroll bars are displayed when the content of the source page cannot fit within the frame  You can override the default setting using the scrolling attribute  The scrolling syntax is: scrolling=“type” o scrolling can either be “yes” (to always display scroll bars) or “no” (to never display scroll bars) o Another option: “auto” 24

25. Example: Removing the Scroll Bars 25

26. 26 2. Resizing of frames  restrict resizing of a frame o attribute name, noresize Remember: this attribute does not have any value

27. 3. Specifying Frame Margins  Frame margins – the amount of space in between content and border o marginheight is the amount of space, in pixels, above and below the content of the page in the frame o marginwidth is the amount of space to the left and right of the page  The syntax for specifying margins for a frame: marginheight=“value” marginwidth=“value”  You can also use them together 27

28. Other Frame Structure attributes 28

29. 29 Frame Border  Format the appearance of frame border o Change width of frame border o Change color of frame border  Applied to the tag  change width of frame border o attribute name: border o attribute value: “number of pixels”  change color of frame border o attribute name: bordercolor o attribute value: “a color”  example

30. Working with Frames and Hyperlinks  By default, clicking a link within a frame opens the linked file inside the same frame  But what if you want to open the hyperlink in a new window or in a new frame? o Controlled targeting  Let’s do this case study step by step! 30

31. Working with Frames and Hyperlinks (contd.)  You can display hyperlinks in many ways: o In a new window (we already know about this!) o In a different frame o In the entire window (overriding the current frame structure)  When you want to control the behavior of links in a framed page, there are two required steps: 1. Give each frame on the page a name 2. Point each hyperlink to one of the named frames 31

32. 32 Working with Frames and Hyperlinks (contd.)  Step 1: assign name to each frame you create o attribute name, name o attribute value, “frame_name” o Note, you can provide any unique name for a frame. We will see shortly why frame name is important.

33. Example 33

34. Step 2: Specifying a Link Target  Now use the target attribute to open a page in a specific frame  The syntax for this is: target=“name of the frame” 34

35. Using Reserved Target Names  Reserved target names are special names that can be used in place of a frame name as the target  They are useful in situations: o Where the name of the frame is unavailable o When you want the page to appear in a new window o When you want the page to replace the current browser window  All reserved target names begin with the underscore character ( _ ) to distinguish them from other target names  Reserved target names are case-sensitive, they must be entered in lowercase 35

36. Using Reserved Target Names 36

37. Using the _top Target 37 target=“_top”

38. Using Reserved Target Names 38

39. How target=“_parent” works! 39

40. How target=“_parent” works! 40

41. How target=“_parent” works! 41

42. How target=“_parent” works! 42

43. How target=“_parent” works! 43

44. Using the base element 44  Base elements are used to set the target for entire frame  Inside the … o

45. Using the Element  Use the element to allow your Web site to be viewable using browsers that do or do not support frames  When a browser that supports frames processes this code, it ignores everything within the elements and concentrates solely on the code within the elements  When a browser that doesn’t support frames processes this code, it doesn’t know what to do with the and elements, so it ignores them  When you use the element, you must include elements, this way, both types of browsers are supported within a single HTML file 45

46. The Syntax  The syntax for the element is: title frames page content 46

47. Frameless Version of a Web Site 47