1 HTML Frames

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

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

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

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

Planning Your Frames Layout 6

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

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

Simplest Layout Defined in Either Rows or Columns 9

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

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

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!!! 12

 use tag within o & tags 13 Define frame source

Let’s create the first example 14

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

Creating a Nested frame structure 16 Combination of rows and cols

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

18 Nesting framesets  nesting one pair of tags in another

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 19

The Syntax  The syntax for the element is: title frames This page uses frames, but your browser doesn't support them. 20

Site Layout #1 21 streetsign logo here John Jay Link Class website Link Some Description here logo.html link.html home.html index.html

Site Layout #2 22 Some content here

Site Layout #3 23 Some content here