Presentation is loading. Please wait.

Presentation is loading. Please wait.

Client-Side Internet and Web Programming

Published byPhilomena Goodwin Modified over 5 years ago

Similar presentations

Presentation on theme: "Client-Side Internet and Web Programming"— Presentation transcript:

1 Client-Side Internet and Web Programming
Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side Internet and Web Programming FRAMEs in HTML CHAPTER 5 Prepared by: R. Kansoy

2 5.1 FRAMEs (not suppurted in HTML5!!!)
Frames allow you to have multiple sections of the browser window, called frames, each showing their own .html file within the frame. This used to be common practice when trying to show separate sections of a site in separate sections of the browser window, such as a header at the top, navigation at the side, and the rest was page content that someone could scroll down without making the header and navigation disappear. Frames in HTML documents are created and controlled through the structure of three element types:  FRAMESET,  FRAME, NOFRAMES.

3 5.1 FRAMEs (not suppurted in HTML5!!!)
The structure of a frame-enabling HTML document type is similar to usual HTML structure. The key difference in an HTML document type is that the BODY container element is basically replaced by a FRAMESET container element. The initial FRAMESET element describes the frames that make up the page, and the FRAME elements specify the sub-documents that appear initially in each. If used properly, frames make your site more readable and usable The disadvantages of using frames are: Frames are not supported in HTML5!!! Frames are difficult to use. (Printing the entire page is difficult). The web developer must keep track of more HTML documents

4 5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML frameset Element <FRAMESET> Tell the browser that the page contains frames Holds one or more frame elements. COLS or ROWS attributes states; How many columns or rows there will be in the frameset, and How much percentage/pixels of space will occupy each of them. In the frameset, one of the columns or one of the rows can be set to use the remaining space, with an asterisk ( * ).

5 5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML frameset Element <FRAMESET> - Examples <frameset cols="30%,70%"> <frameset rows="30%,70%"> <frameset cols="200,500"> <frameset cols="25%,*"> <frameset cols="25%,*,25%"> <frameset rows="25%,*,25%"> <frameset rows="30%, 20%,* ">

6 5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML frame Element The <frame> tag defines one particular window (frame) within a frameset and has no end tag. Each frame element can hold a separate document. In the example below we have a frameset with two columns. the first column is set to 25% of the width of the browser window. the second column is set to 75% of the width of the browser window. the document "frame_a.html" is put into the first column, and the document "frame_b.html" is put into the second column: <frameset cols="25%,75%">    <frame src="frame_a.html" />    <frame src="frame_b.html" /> </frameset>

7 5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML frame Element FRAME attributes: NAME - identifies specific frame, enabling hyperlinks to load in their intended frame TARGET attribute of A element <A HREF = “links.html” TARGET = “main”> - opens the page in the frame which name is main. TARGET = “_self” loads page in the same frame as anchor element TARGET = “_parent” loads page in the parent FRAMESET SRC - gives the URL of the page that will be displayed in the specified frame

8 5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML frame Element FRAME attributes: SCROLLING - Specifies whether or not to display scrollbars in a frame yes no - Set to "no" to prevent scroll bars. auto FRAMEBORDER - Specifies whether or not to display a border around a frame 1 NORESIZE - Specifies that a frame is not resizable If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag.

9 5.1 FRAMEs (not suppurted in HTML5!!!)
The HTML <noframes> tag Add the <noframes> tag for browsers that do not support frames. It can contain all the HTML elements that you can find inside the <body> element of a normal HTML page. The <noframes> element can be used to link to a non- frameset version of the web site or to display a message to users that frames are required. The <noframes> element goes inside the <frameset> element.

10 5.1 FRAMEs (not suppurted in HTML5!!!)
How to use <noframes> tag for browsers that do not support frames <html> <head> <title>...</title> </head> <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> <noframes> Your browser does not handle frames! </noframes> </frameset> </html>

11 5.1 FRAMEs (not suppurted in HTML5!!!)
How to use <noframes> tag RESULT:

12 5.1 FRAMEs (not suppurted in HTML5!!!)
Nested <FRAMESET> Tags A FRAMESET may contain a nested FRAMESET and FRAME elements. When a FRAMESET element is nested within another FRAMESET element, it acts as a subframe. <html> <head><title>...</title></head> <frameset cols="20%,80%"> <frame src="frame_a.html"> <frameset rows="80%,20%"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </html>

13 5.1 FRAMEs (not suppurted in HTML5!!!)
Nested <FRAMESET> Tags RESULT:

14 5.1 FRAMEs (not suppurted in HTML5!!!)
Example for Nested Frames: <HTML> <HEAD></HEAD> <FRAMESET COLS = "110,*"> <FRAME NAME = "nav" SCROLLING = "no" SRC = "nav.html"> <FRAMESET ROWS = "175,*"> <FRAME NAME = "picture" SRC = "picture.html" NORESIZE> <FRAME NAME = "main" SRC = "main.html"> </FRAMESET> <NOFRAMES> <P>This page uses frames, but your browser doesn't support them.</P> <P>Get Internet Explorer at the <A HREF = " </NOFRAMES> </HTML>

15 5.1 FRAMEs (not suppurted in HTML5!!!)
Result:

16 5.2 IFRAMEs iFrame is used to display a web page within a web page.
Set Height and Width The height and width attributes are used to specify the height and width of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). Remove the Border The frameborder attribute specifies whether or not to display a border around the iframe. Set the attribute value to "0" to remove the border. <iframe src="demo.html" width="200" height="200"></iframe> <iframe src="demo_iframe.html" frameborder="0"></iframe>

17 5.2 IFRAMEs Use iframe as a Target for a Link
An iframe can be used as the target frame for a link. The target attribute of a link must refer to the name attribute of the iframe: <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href=" target="iframe_a"> ITEC 229</a></p>

18 Thank You ! FRAMEs in HTML END of CHAPTER 5

Download ppt "Client-Side Internet and Web Programming"

Similar presentations

Frames How to make a page that uses frames. Preview There used to be a time that frames were frowned upon because most browsers did not support them Nowadays.

Frames How to make a page that uses frames. Preview There used to be a time that frames were frowned upon because most browsers did not support them Nowadays.
Frames.

Frames.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.

CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.

Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.

Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
XP 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial 5.

XP 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial 5.
1 DePaul University SNL 262 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Instructor: David A. Lash.

1 DePaul University SNL 262 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Instructor: David A. Lash.
1 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Using HTML and JavaScript to Develop Website.

1 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Using HTML and JavaScript to Develop Website.
Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.

Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.
Create a Web Site with Frames

Create a Web Site with Frames
Web Technologies Lecture # 5 : HTML Frames. Objectives n Create/control appearance & placement of frames n Control the behavior of hyperlinks on pages.

Web Technologies Lecture # 5 : HTML Frames. Objectives n Create/control appearance & placement of frames n Control the behavior of hyperlinks on pages.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
Chapter 6 Working with Frames.

Chapter 6 Working with Frames.
 You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages. 

 You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages. 
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.
Frameset. FrameSet With frames, we can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each.

Frameset. FrameSet With frames, we can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each.
XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.

XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.
XHTML1 Topics Work with the Frameset Document Type Definition (DTD) Create frames Use the target and base attributes Create nested frames Format frames.

XHTML1 Topics Work with the Frameset Document Type Definition (DTD) Create frames Use the target and base attributes Create nested frames Format frames.
1 Advanced Frame Options Using NORESIZE  By default, users may resize frames unless you specify the NORESIZE attribute in the tag  Examples:

1 Advanced Frame Options Using NORESIZE  By default, users may resize frames unless you specify the NORESIZE attribute in the tag  Examples:
WHAT are frames? what.html are.htmlframes.html. Intro to Frames HTML frames allow you to display more than 1 HTML document in the same browser window.

WHAT are frames? what.html are.htmlframes.html. Intro to Frames HTML frames allow you to display more than 1 HTML document in the same browser window.

Similar presentations

Ads by Google