1 / 15

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 6. Prepared by: R. Kansoy. 6.1 FRAMEs .

ova
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 6 Prepared by: R. Kansoy

  2. 6.1 FRAMEs • With frames, you can display more than one HTML document in the same browser window. • Each HTML document is called a frame, and each frame is independent of the others. • If used properly, frames make your site more readable and usable • 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 http://sct.emu.edu.tr/it/itec229

  3. 6.1 FRAMEs • 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 muchpercentage/pixels of space will occupy each of them. http://sct.emu.edu.tr/it/itec229

  4. 6.1 FRAMEs • The HTML frame Element • The <frame> tag defines one particular window (frame) within a frameset. • 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.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> http://sct.emu.edu.tr/it/itec229

  5. 6.1 FRAMEs • 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”> • TARGET = “_blank” loads page in a new blank browserwindow • TARGET = “_self” loads page in the same window asanchor element • TARGET = “_parent” loads page in the parent FRAMESET • TARGET = _top” loads page in the full browser window • SRC - gives the URL of the page that will be displayed in the specifiedframe • SCROLLING - Set to “no” to prevent scroll bars. http://sct.emu.edu.tr/it/itec229

  6. 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. http://sct.emu.edu.tr/it/itec229

  7. 6.1 FRAMEs • How to use <noframes> tag • 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> http://sct.emu.edu.tr/it/itec229

  8. 6.1 FRAMEs • How to use <noframes> tag • RESULT: http://sct.emu.edu.tr/it/itec229

  9. 6.1 FRAMEs • Nested <FRAMESET> Tags • 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> </frameset> </html> http://sct.emu.edu.tr/it/itec229

  10. 6.1 FRAMEs • Nested <FRAMESET> Tags • RESULT: http://sct.emu.edu.tr/it/itec229

  11. 6.1 FRAMEs • 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> • </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> • </HTML> http://sct.emu.edu.tr/it/itec229

  12. 6.1 FRAMEs • Result: http://sct.emu.edu.tr/it/itec229

  13. 6.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. • <iframesrc="demo_iframe.htm" width="200" height="200"></iframe> • <iframesrc="demo_iframe.htm" frameborder="0"></iframe> http://sct.emu.edu.tr/it/itec229

  14. 6.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://sct.emu.edu.tr/it/itec229

  15. Thank You ! FRAMEs in HTML http://sct.emu.edu.tr/it/itec229 END of CHAPTER 6

More Related