1 / 20

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.

nonnie
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. Create 7 FILE as follows..! Index.html

  6. Output from index.html

  7. atas.html Note : File headersmaga2.jpg harus berada 1 lokasi dengan file htmlnya

  8. Output from index.html after we make atas.html

  9. bawah.html • Name=“isinya” adalah untuk mendefinisikan nama frame • Untuk memanggil frame tersebut nantinya cukup dengan • memanggil nama framesnya saja yaitu “isinya”

  10. Output from index.html after we make bawah.html

  11. kiri.html

  12. Output from index.html after we make kiri.html

  13. menu.html Target=“isinya” adalah frame tujuan dimana file isi.html harus diletakan, tetapi terlebih dahulu framenya harus diberi nama seperti pada slide sebelumnya

  14. Tag <A HREF>…..</A> is used to link the document or URLExample : Script above used to link text Home to isi.html document If we’ll link image, use script like this : < A HREF=“isi.html” target=“isinya”><img src=“gambar.jpg”></A>

  15. Output from index.html after we make menu.html

  16. isi.html File di atas adalah file yang dibuat pada pertemuan I

  17. Output from index.html after we make isi.html

  18. kanan.html

  19. Output from index.html after we make isi.html

More Related