Eastern Mediterranean University School of Computing and Technology

6. 1 FRAMEs v With frames, you can display more than one HTML document

6. 1 FRAMEs The HTML frameset Element <FRAMESET> v Tell the browser that the

6. 1 FRAMEs The HTML frame Element v The <frame> tag defines one particular

6. 1 FRAMEs The HTML frame Element FRAME attributes: v NAME - identifies specific

6. 1 FRAMEs Basic Notes & Usefull Tips Note 1: The frameset column size

6. 1 FRAMEs How to use <noframes> tag v for browsers that do not

6. 1 FRAMEs How to use <noframes> tag v RESULT: 8 http: //sct. emu.

6. 1 FRAMEs Nested <FRAMESET> Tags v Include the correct number of FRAME elements

6. 1 FRAMEs Nested <FRAMESET> Tags v RESULT: 10 http: //sct. emu. edu. tr/it/itec

6. 1 FRAMEs v Example for Nested Frames: <HTML> <HEAD> <FRAMESET COLS = "110,

6. 1 FRAMEs v Result: 12 http: //sct. emu. edu. tr/it/itec 229

6. 2 i. FRAMEs v i. Frame is used to display a web page

6. 2 i. FRAMEs v Use iframe as a Target for a Link §

Slides: 15

Download presentation

Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC 229 Client-Side Internet and Web Programming FRAMEs in HTML CHAPTER 6 Prepared by: R. Kansoy LOGO

6. 1 FRAMEs v With frames, you can display more than one HTML document in the same browser window. v Each HTML document is called a frame, and each frame is independent of the others. v If used properly, frames make your site more readable and usable v The disadvantages of using frames are: § Frames are not expected to be supported in future versions of HTML § Frames are difficult to use. (Printing the entire page is difficult). § The web developer must keep track of more HTML documents 2 http: //sct. emu. edu. tr/it/itec 229

6. 1 FRAMEs The HTML frameset Element <FRAMESET> v Tell the browser that the page contains frames v Holds one or more frame elements. v 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. 3 http: //sct. emu. edu. tr/it/itec 229

6. 1 FRAMEs The HTML frame Element v The <frame> tag defines one particular window (frame) within a frameset. v Each frame element can hold a separate document. v 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. htm" is put into the first column, and the document "frame_b. htm" is put into the second column: <frameset cols="25%, 75%"> <frame src="frame_a. htm" /> <frame src="frame_b. htm" /> </frameset> 4 http: //sct. emu. edu. tr/it/itec 229

6. 1 FRAMEs The HTML frame Element FRAME attributes: v NAME - identifies specific frame, enabling hyperlinks to load in their intended frame v TARGET attribute of A element § § § <A HREF = “links. html” TARGET = “main”> TARGET = “_blank” loads page in a new blank browser window TARGET = “_self” loads page in the same window as anchor element TARGET = “_parent” loads page in the parent FRAMESET TARGET = _top” loads page in the full browser window v SRC - gives the URL of the page that will be displayed in the specified frame v SCROLLING - Set to “no” to prevent scroll bars. 5 http: //sct. emu. edu. tr/it/itec 229

6. 1 FRAMEs Basic Notes & Usefull Tips Note 1: The frameset column size can also be set in pixels (cols="200, 500"), and one of the columns can be set to use the remaining space, with an asterisk (cols="25%, *"). Note 2: Add the <noframes> tag for browsers that do not support frames. Tip: 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. Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below. 6 http: //sct. emu. edu. tr/it/itec 229

6. 1 FRAMEs How to use <noframes> tag v for browsers that do not support frames <html> <frameset cols="25%, 50%, 25%"> <frame src="frame_a. htm"> <frame src="frame_b. htm"> <frame src="frame_c. htm"> </frameset> <noframes> <body>Your browser does not handle frames!</body> </noframes> </html> 7 http: //sct. emu. edu. tr/it/itec 229

6. 1 FRAMEs How to use <noframes> tag v RESULT: 8 http: //sct. emu. edu. tr/it/itec 229

6. 1 FRAMEs Nested <FRAMESET> Tags v Include the correct number of FRAME elements inside <html> <frameset cols="20%, 80%"> <frame src="frame_a. htm"> <frameset rows="80%, 20%"> <frame src="frame_b. htm"> <frame src="frame_c. htm"> </frameset> </html> 9 http: //sct. emu. edu. tr/it/itec 229

6. 1 FRAMEs Nested <FRAMESET> Tags v RESULT: 10 http: //sct. emu. edu. tr/it/itec 229

6. 1 FRAMEs v Example for Nested Frames: <HTML> <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 = "http: //www. microsoft. com/">Microsoft. Web. Site</A></P> </NOFRAMES> </HTML> 11 http: //sct. emu. edu. tr/it/itec 229

6. 1 FRAMEs v Result: 12 http: //sct. emu. edu. tr/it/itec 229

6. 2 i. FRAMEs v i. Frame is used to display a web page within a web page. v 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%"). <iframe src="demo_iframe. htm" width="200" height="200"></iframe> v 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_iframe. htm" frameborder="0"></iframe> 13 http: //sct. emu. edu. tr/it/itec 229

6. 2 i. FRAMEs v 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="http: //sct. emu. edu. tr/it/itec 229" target="iframe_a"> ITEC 229</a></p> 14 http: //sct. emu. edu. tr/it/itec 229

FRAMEs in HTML END of CHAPTER 6 LOGO http: //sct. emu. edu. tr/it/itec 229