1 / 18

FRAMEs in HTML

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!!!).

ramosd
Download Presentation

FRAMEs in HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 elementtypes:  • FRAMESET,  • FRAME, • NOFRAMES. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  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 aFRAMESET 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

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

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

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

  7. 5.1 FRAMEs (not suppurted in HTML5!!!) • The HTML frame Element • FRAME attributes: • NAME - identifies specific frame, enabling hyperlinks to load in theirintended 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 asanchor element • TARGET = “_parent” loads page in the parent FRAMESET • SRC - gives the URL of the page that will be displayed in • the specifiedframe http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  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 • 0 • 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

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

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

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

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

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

  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'tsupportthem.</P> • <P>Get Internet Explorer at the • <A HREF = "http://www.microsoft.com/">MicrosoftWebSite</A></P> • </NOFRAMES> • </FRAMESET> • </HTML> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

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

  16. 5.2 IFRAMEs • iFrameis 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

  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: • <iframesrc="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

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

More Related