IMY 110 Theme 11 HTML Frames

Size: px

Start display at page:

Download "IMY 110 Theme 11 HTML Frames"

Donna Hamilton
6 years ago
Views:

1 IMY 110 Theme 11 HTML Frames

2 1. Frames in HTML 1.1. Introduction Frames divide up the web browser window in much the same way that a table divides up part of a page, but a different HTML document is loaded into each frame. Although frames look good, they take longer to download, so we usually use them only when we really need them. We can mostly achieve the same effect with div-tags and CSS positioning Frame Example 1.3. Frameset DTD According to the W3C standards, we can specify different kinds of HTML standards, called DTD's. One of these standards is called the frameset DTD. When we implement a frameset, we have to specify that we are using the frameset DTD. We are going to discuss DTD's in more detail later in the course. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "

3 2. Framesets 2.1. The Frameset Tag <frameset></frameset> <body> is replaced with <frameset>. <html> <head> </head> <frameset>... </frameset> </html> The <frameset> tag defines how to divide the window into different frames. Each frameset defines a set of rows or columns. We can nest framesets to get a combination of rows and columns. The values of the rows/columns indicate the amount of screen area each row/column will occupy. Rows and columns are specified with: % (relative) px (absolute) * The * is used to size a row or column according to what space is left after the percentages or pixel values are specified. <frameset cols = 25%, * >... </frameset> Creates columns of 25% and 75%.

4 <frame></frame> 2.2. The Frameset Tag For each frame we have to specify a <frame> tag. This tag does not close. <frameset cols = 25%,75% > <frame src = page1.html > <frame src = page2.html > </frameset>

5 Attribute framebor der Value 0 1 Description Specifies whether or not to display border around the frame longdesc marginhe ight marginwi dth name URL pixels pixels frame_n ame A URL to a long description of the frame contents. Use it for browsers that do not support frames Defines the top and bottom margins in the frame Defines the left and right margins in the frame Defines a unique name for the frame (to use in scripts) noresize noresize When set to noresize the user cannot resize the frame scrolling yes no auto Determines scrollbar action src URL Defines the URL of the file to show in the frame

6 3. Navigation in Frames 3.1. Predefine Frame Names To help authors manage frames, there are some predefined names that are useful: _blank _parent _self _top 3.2. Target Attribute This attribute specifies what frame or browser window should contain the loaded page. <a target = window_name > Click on me </a> Name of window will load in the specified window _blank will load in new browser window _parent will load in parent frame _self will load in current frame and window _top will clear all frames and load in current frame 3.3. Top Loads into whole browser window and removes frames. <a target = _top > Click on me </a> Click on me

7 3.4. blank Opens new browser window containing the new page. The old page remains in the other window. <a target = _blank > Click on me </a> Click on me 3.5. self Loads the page in the frame in which the link was that called the page. <a target = _self > Click on me </a> Click on me

8 3.6. parent Loads in the parent frameset of the frame in which the link that called the page was. <a target = _parent > Click on me </a> Click on me

9 4. Inline Frame (iframes) 4.1. iframes Inserting an inline frame (iframe) within a section of text is similar to inserting an object by means of the object element. Both these elements allow you to insert an HTML document inside another document. The inline frame takes on the features of the block into which it is inserted in terms of alignment. Inline frames cannot be resized by a user. This is also sometimes referred to as a floating frame. <html> <head> <title> Frames </title> </head> <frameset cols = "25%, 75%"> <frame src = "page1.html"> <frame src = "page2.html"> </frameset> </html>

10 4.2. i-frame attributes Attribute Value Description align framebor der left right top middle botto m 1 0 Specifies how to align the iframe according to the surrounding text Specifies whether or not to display a frame border height pixels % Defines the height of the iframe longdesc marginhe ight marginwi dth name scrolling URL pixels pixels frame_na me yes no auto A URL to a long description of the frame contents Defines the top and bottom margins of the iframe Defines the left and right margins of the iframe Specifies a unique name of the iframe (to use in scripts) Define scroll bars src width URL pixels % The URL of the document to show in the iframe Defines the width of the iframe

COMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal

COMSC-030 Web Site Development- Part 1 Part-Time Instructor: Joenil Mistal Chapter 10 10 Working with Frames Looking for a way to enhance your Web site layout? Frames can help you present multiple pages