1 / 9

HTML Frames

HTML Frames. Introduction to Frames Simple Frame Example Frame Layout Excercise. Why Frames?. Able to present documents in multiple views Views can be in independent windows/subwindows Information can be varied in different windows while navigation is controlled in one window.

debrajohnson
Download Presentation

HTML Frames

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. HTML Frames Introduction to Frames Simple Frame Example Frame Layout Excercise

  2. Why Frames? • Able to present documents in multiple views • Views can be in independent windows/subwindows • Information can be varied in different windows while navigation is controlled in one window

  3. Frame Layout <FRAMESET rows/cols=“x(%),y(%)| pix x, pix y” frameborder=[yes,no] > <FRAME src=“html file” name=“string” scrolling=“yes/no/auto” noresize > <NOFRAMES> <P> If you have a non-frame compatible browser, this message will show up instead of the frames. Usually you use it to tell users to go get a frame- compatible browser and come back. </P> </NOFRAMES> </FRAMESET>

  4. Simple Frame Example This is an example of a simple frame document : <HTML> <TITLE> Simple Frameset document </TITLE> <!-- Column --> <FRAMESET cols=“20%, 80%” frameborder=“no”> <!-- Contents of 1st column is 2 Rows --> <FRAMESET rows=“100, 200”> <!-- Row --> <FRAME src=“row1.html” name=“ rcoltrow”> <FRAME src=“row2.html” name=“rcolbrow” scrolling=“auto”> </FRAMESET> <!-- End of 2 Rows --> <!-- Contents of 2nd column --> <FRAME src=“col2.html” name=“lcol”> </FRAMESET> </HTML>

  5. A little exercise. Create 3 documents as follows: myframes.html <HTML> <HEAD> <TITLE> Frames exercise </TITLE> <FRAMESET cols="20%, 80%" FRAMEBORDER=0 FRAMESPACING=0> <FRAMESET rows="50%, 50%" FRAMEBORDER=1> <FRAME src="fav_searches.html" name="searchmenu" scrolling="auto"> <FRAME src="fav_mailers.html" name="mailmenu" scrolling="auto"> </FRAMESET> <FRAMESET rows="50%, 50%" FRAMEBORDER=1> <FRAME scr="blank.html" name="col2row1" scrolling="auto"> <FRAME scr="blank.html" name="col2row2" scrolling="auto"> </FRAMESET> </FRAMESET> </HTML>

  6. fav_searches.html<HTML><HEAD><BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF VLINK=#FF0000>These are my favourite search engines <BR><UL><LI> <A HREF=“http://www.altavista.com/” target =“col2row1” >Altavisata Search</A><LI> <A HREF=“http://www.google.com/” target =“col2row1”>Google Search</A><LI> <A HREF=“http://www.yahoo.com/” target =“col2row1”>Yahoo Search</A></UL></HTML>

  7. fav_mailers.html<HTML><HEAD><BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF VLINK=#FF0000>These are my favourite free mailers <BR><UL><LI> <A HREF=“http://www.hotmail.com/” target =“col2row2” >Hotmail</A><LI> <A HREF=http://www.nettaxi.com/ target =“col2row2”>Net Taxi</A><LI> <A HREF=“http://mail.yahoo.com/” target =“col2row2”>Yahoo Mail</A></UL></HTML>

More Related