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

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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 ( * ). http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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%,* "> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

5.1 FRAMEs (not suppurted in HTML5!!!) How to use <noframes> tag RESULT: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

5.1 FRAMEs (not suppurted in HTML5!!!) Nested <FRAMESET> Tags RESULT: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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 = "http://www.microsoft.com/">MicrosoftWebSite</A></P> </NOFRAMES> </HTML> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

5.1 FRAMEs (not suppurted in HTML5!!!) Result: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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="http://sct.emu.edu.tr/it/itec229" target="iframe_a"> ITEC 229</a></p> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

Thank You ! FRAMEs in HTML END of CHAPTER 5 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229