Silahkan Klik...!!!

Minggu, 27 Maret 2011

Tag Frame dan Atributnya

01.58 semogaberkah2010.blogspot.com

FRAME adalah tag HTML yang digunakan untuk membuat sebuah bingkai yang terdapat didalam tag FRAMESET. Cara kerja FRAME hampir sama dengan cara kerja tag TD yang digunakan untuk membuat sebuah sel tunggal dari sebuah tabel, begitu juga dengan tag FRAME yang berguna untuk membuat sebuah bingkai tunggal dari sebuah FRAMESET. Penggunaan tag FRAME selalu berada didalam tag FRAMESET yang akan menentukan berapa banyak FRAME yang terdapat dalam suatu FRAMESET.

Sebagai contoh :

  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>Dasar pembuatan Frame</TITLE>  
  4. </HEAD>  
  5.   
  6.   <FRAMESET COLS="60%,40%" ROWS="75%,25%">  
  7.          <FRAME SRC="a.html">  
  8.          <FRAME SRC="b.html">  
  9.          <FRAME SRC="c.html">  
  10.          <FRAME SRC="d.html">  
  11.   </FRAMESET>  
  12. </HTML> 
 Tag diatas akan menghasilkan tampilan sebagai berikut :

4 frame







Tag tersebut akan menghasilkan sebuah dokumen HTML yang terdiri dari empat buah FRAME, dua kolom dan dua baris. Banyaknya kolom dan baris beserta lebar masing-masing diatur oleh tag FRAMESET. Sedangkan tag FRAME berguna untuk mengambil sumber dari setiap FRAME yang akan ditampilkan.

Dikarenakan tag diatas ingin menampilkanempat buah FRAME yang terbagi menjadi dua kolom dan dua baris. Maka tampilannya akan terbentuk sebagai berikut :

1 2
3 4


Tata letak keempat FRAME diatas pun, mengikuti urutan angka tersebut, sehingga akan menjadi :


FRAME A FRAME B
FRAME C FRAME D


Penentuan tata letak yang sama akan berlaku untuk menampilkan jumlah FRAME yang berbeda. Apabila ingin menampilkan enam FRAME dalam suatu dokumen HTML, dengan pembagian terdapat dua baris dan tiga kolom. Maka tata letaknya akan sebagai berikut :


4 frame


Rumus penentuan tata letak FRAME dapat dilihat lebih jelas pada contoh tampilan 12 FRAME (3 kolom dan 4 baris) sebagai berikut :
  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>Dasar pembuatan 12 Frame</TITLE>  
  4. </HEAD>  
  5.   <FRAMESET COLS="35%,35%,30%" ROWS="25%,25,%25%,25%">  
  6.          <FRAME SRC="a.html">  
  7.          <FRAME SRC="b.html">  
  8.          <FRAME SRC="c.html">  
  9.          <FRAME SRC="d.html">  
  10.          <FRAME SRC="e.html">  
  11.          <FRAME SRC="f.html">  
  12.          <FRAME SRC="g.html">  
  13.          <FRAME SRC="h.html">  
  14.          <FRAME SRC="i.html">  
  15.          <FRAME SRC="j.html">  
  16.          <FRAME SRC="k.html">  
  17.          <FRAME SRC="l.html">  
  18.   </FRAMESET>  
  19. </HTML> 

Hasil ..


FRAME A FRAME B FRAME C
FRAME D FRAME E FRAME F
FRAME G FRAME H FRAME I
FRAME J FRAME K FRAME L


SRC
Atribut ini merupakan kepanjangan dari SOURCE yang berarti "sumber", sesuai dengan namanya, atribut ini berfungsi untuk menentukan sumber dari setiap FRAME yang akan ditampilkan.

Contoh :

<FRAME SRC="http://semogaberkah2010.blogspot.com/contoh.html">

tag tersebut menyatakan bahwa file sumber dari FRAME yang akan ditampilkan terdapat pada alamat http://semogaberkah2010.blogspot.com/contoh.html.

SCROLLING
Atribut SCROLLING berguna untuk menentukan apakah FRAME yang akan ditampilkan memiliki SCROLL atau tidak. Terdapat tiga pilihan dari atribut ini, yaitu : YES, NO, AUTO.

Pilihan Yes akan membuat suatu FRAME akan memiliki SCROLL, diperlukan maupun tidak diperlukan. Pilihan NO, akan membuat suatu FRAME tidak memiliki SCROLL meskipun dibutuhkan, sehingga dampaknya, FRAME yang menggunakan pilihan SCROLLING=NO memiliki bagian yang tidak terbaca karena tidak memiliki SCROLL. Pilihan SCROLLING=AUTO merupakan pilihan terbaik, dikarenakan suatu FRAME akan memiliki SCROLL hanya bila dibutuhkan, dan tidak akan menampilkan SCROLL bila FRAME tersebut tidak memerlukannya.

Contoh :
  1. <FRAMESET ROWS="10%,10%,*">  
  2.    <FRAME SRC="a.html" SCROLLING=YES>  
  3.    <FRAME SRC="b.html" SCROLLING=NO>  
  4.    <FRAME SRC="c.html" SCROLLING=AUTO>  
  5.   
  6. </FRAMESET>

NORESIZE
Atribut ini berguna untuk melarang border suatu FRAME untuk digeser-geser.

Contoh :
  1.      <HTML>  
  2.  <HEAD>  
  3. <TITLE>No RESIZE</TITLE>  
  4. </HEAD>  
  5.   <FRAMESET COLS="60%,40%" ROWS="75%,25%">  
  6.          <FRAME SRC="a.html" NORESIZE>  
  7.          <FRAME SRC="b.html">  
  8.          <FRAME SRC="c.html">  
  9.          <FRAME SRC="d.html">  
  10.   </FRAMESET>  
  11. </HTML>  

MARGINWIDTH
Atribut ini digunakan untuk menentukkan rataan tepi horizontal dari suatu FRAME.

Contoh :
  1.      <HTML>  
  2.  <HEAD>  
  3. <TITLE>No RESIZE</TITLE>  
  4. </HEAD>  
  5.   <FRAMESET ROWS="30%,*,*">  
  6.          <FRAME SRC="a.html">  
  7.          <FRAME SRC="b.html" MARGINWIDTH=1>  
  8.          <FRAME SRC="c.html" MARGINWIDTH=100>  
  9.   </FRAMESET>  
  10. </HTML> 

MARGINHEIGHT
Atribut ini digunakan untuk menentukkan rataan tepi horizontal dari suatu FRAME.

Contoh :
  1.  <HTML>  
  2.  <HEAD>  
  3. <TITLE>No RESIZE</TITLE>  
  4. </HEAD>  
  5.   <FRAMESET COLS="33%,33%,*">  
  6.          <FRAME SRC="a.html">  
  7.          <FRAME SRC="b.html" MARGINHEIGHT=1>  
  8.          <FRAME SRC="c.html" MARGINHEIGHT=100>  
  9.   </FRAMESET>  
  10. </HTML> 

NAME
Atribut ini digunakan untuk menghubungkan tautan antar FRAME.

Contoh :
  1. <html>  
  2. <head>  
  3. <title>Menu Belajar di semogaberkah2010.blogspot.Com</title>  
  4. </head>  
  5.   <frameset rows="15%,*">  
  6.       <frame src="fold/menu kbc.html" <b>name="Judul"</b> scrolling="NO">  
  7.   
  8.     <frameset cols="20%,*">  
  9.                 <frame src="fold/daftar isi.html" <b>name="daftar isi"</b>  
  10.         <frame src="fold/isi.htm" <b>name="isi"</b>  
  11.          </frameset>  
  12.   </frameset>  
  13.   
  14. </html> 

Tag diatas akan membentuk sebuah dokumen HTML yang terdiri atas tiga buah FRAME, yang pertama bernama "Judul". Halaman tersebut hanya akan digunakan sebagai judul dari dokumen HTML. Kemudian ada FRAME kedua yang bernama "daftar isi" yang merupakan FRAME yang berisi tautan-tautan yang akan berhubungan dengan FRAME ketiga yang bernama "isi".
  1. <html><br>  
  2. <head><br>  
  3. <title>Daftar Isi</title><br>  
  4. </head><br>  
  5. <body><br>  
  6. <h3>Daftar Isi</h3><br>  
  7. <a href="isi.htm#Forum" target="isi">Forum</a><br>  
  8. <p>  
  9. <a href="isi.htm#Ujian Online" target="isi">Ujian Online</a>  
  10. </p><br>  
  11. <p>  
  12. <a href="isi.htm#Chat" target="isi">Chat</a>  
  13. </p><br>  
  14. <p>  
  15. <a href="isi.htm#Did You Know" target="isi">Did U Know ?</a></p><br>  
  16. <p>  
  17. <a href="isi.htm#Quote" target="isi">Quote</a></p><br>  
  18. </body><br>  
  19. </html> 

Pada tag diatas perhatikan bagian tautan :

<a href="isi.htm#Forum" target="isi">Forum</a>

Bagian tersebut akan membentuk tautan yang mengarah pada FRAME "isi" pada bagian FORUM, sehingga apabila tautan tersebut di-klik, maka FRAME "isi" akan menampilkan bagian yang bernama FORUM. FRAME ketiga bernama "isi" yang merupakan isi yang bertautan dengan FRAME kedua.

  1. <html><br>  
  2. <head><br>  
  3. <title>Isi</title><br>  
  4. </head><br>  
  5. <body><br>  
  6. <a name="Forum">  
  7. <h2>Forum</h2></a><br>  
  8. <p>Forum semogaberkah2010.blogspot.Com merupakan sebuah fitur yang akan segera diwujudkan dalam rangka</p><br>  
  9. <p>mempermudah setiap pengunjung melakukan tukar pendapat di semogaberkah2010.blogspot.Com</p><br>  
  10. <p> </p><br><br>  
  11. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque rhoncus augue vel dictum. Integer id risus eu magna pulvinar scelerisque. Integer consequat, ante in vestibulum vestibulum, augue enim ultrices diam, et rutrum neque ligula nec lorem. In pharetra condimentum varius. Proin viverra ante ac orci faucibus ac dignissim purus vulputate. Duis porttitor cursus orci, ut interdum urna malesuada vitae. Etiam aliquam vestibulum adipiscing. Integer a metus purus, sed venenatis sem. Nulla accumsan ultrices sapien, sed elementum mauris viverra nec. Nullam commodo cursus bibendum. Sed sed facilisis libero. Sed eget lacus nulla, non iaculis est.  
  12. Fusce non urna enim. Suspendisse vitae urna mi, nec cursus arcu. Cras lobortis ultricies elit, at cursus dui ultrices nec. Nam non arcu mauris. Morbi sollicitudin neque vitae velit consequat pharetra. Vivamus hendrerit, ligula eu adipiscing auctor, sem metus malesuada velit, quis venenatis  diam libero a est. Maecenas interdum lobortis lacinia. Phasellus pretium commodo lacinia.  Etiam rutrum dictum elit sed imperdiet. Pellentesque ac elit lacus. Sed pulvinar arcu sed nulla  mollis sodales. Nam fermentum nunc gravida ligula consectetur vulputate. Pellentesque habitant  morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin porta iaculis orci  ut euismod.</p><br>  
  13. <p><br><br>  
  14. <a name="Ujian Online"><br>  
  15. <h2>Ujian Online</h2><br>  
  16. </a><br>  
  17. <p>  
  18.   Ujian Online Klikbelajar.com adalah salah satu fitur utama yang dimiliki pada situs ini.  Fitur ini</p><br>  
  19. <p>bertujuan untuk memudahkan pengunjung mencoba kemampuannya dalam menjawab  soal-soal </p><br>  
  20. <p>ujian yang akan dihadapi oleh pengunjung.</p><br><br>  
  21. <p>ivamus vel ligula sapien. Aliquam sed libero leo. Donec rhoncus, eros sit amet pretium  bibendum, libero ligula egestas ante, non feugiat orci justo nec enim. Donec turpis metus,  fermentum id egestas vitae, tincidunt at metus. In hac habitasse platea dictumst. Nam mollis  dignissim sapien, vitae suscipit urna condimentum sed. Suspendisse faucibus imperdiet tortor,  sollicitudin consectetur odio dapibus quis. Nam pretium auctor neque quis tincidunt. Suspendisse  adipiscing ante at libero semper ornare. Etiam est tellus, consectetur rutrum tempus scelerisque,  blandit eget tellus. Integer tincidunt vulputate orci, non volutpat neque aliquam at. Donec sapien  neque, ullamcorper eget condimentum ac, vehicula et ante. Ut placerat, quam ut commodo congue,  risus metus bibendum metus, hendrerit hendrerit leo elit non felis. Sed vestibulum, dolor eu rhoncus  blandit, ante nulla sollicitudin risus, in placerat ligula ligula quis mauris. Sed dolor diam, ultrices  vel iaculis placerat, fringilla sit amet tellus. Morbi eu eros neque. Praesent et purus in tortor rutrum  tincidunt vehicula eu sapien. Donec at turpis arcu, quis aliquam dui. Duis convallis nunc nec nisi  porta non mattis purus pulvinar. Fusce sit amet elit sit amet metus euismod rutrum.</p><br>  
  22. <p>  
  23. <a name="Chat">  
  24. <h2>Chat</h2></a><br><br>  
  25. <p>Pellentesque turpis sem, feugiat non tincidunt condimentum, tempus et dolor.  Morbi at neque nec diam consequat euismod in sit amet tellus. Pellentesque arcu nisi,  aliquam sed mattis quis, iaculis id orci. Sed adipiscing hendrerit felis, eget malesuada nisi  fermentum nec. Duis rutrum pellentesque sapien, sit amet dictum turpis vestibulum eu.  Sed ac nibh id odio pharetra aliquet sagittis nec nulla. Aenean adipiscing mollis risus a  consectetur. Sed scelerisque neque at elit adipiscing fringilla sollicitudin metus ultrices.  Vestibulum a varius nibh. Etiam fermentum aliquet tempus. Cras venenatis condimentum  neque vel fringilla. Praesent leo orci, ornare eu ultrices bibendum, pellentesque eu diam.  Fusce dapibus dolor nec metus tincidunt congue.  
  26.   
  27. Sed aliquet commodo neque, nec congue felis posuere eget. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in nunc a risus  varius ornare eu vitae nisi. Pellentesque bibendum tortor ligula, sed tincidunt odio. Quisque  id leo non massa mattis commodo et nec mi. Proin ut nisi libero. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus. In mauris lectus, vestibulum vitae molestie  ac, dapibus ac nisl. Praesent est velit, rhoncus pellentesque imperdiet a, convallis a ipsum. Ut ut  sem ut dolor scelerisque accumsan tincidunt sit amet nisl. Praesent pretium fermentum placerat.  Praesent at mauris a felis laoreet ullamcorper a quis dui.</p><br><br>  
  28.   
  29.   
  30. <a name="Did You Know">  
  31. <h2>Did You Know</h2></a><br><br>  
  32.   <p>Fusce non urna enim. Suspendisse vitae urna mi, nec cursus arcu.  Cras lobortis ultricies elit, at cursus dui ultrices nec. Nam non arcu mauris. Morbi sollicitudin  neque vitae velit consequat pharetra. Vivamus hendrerit, ligula eu adipiscing auctor, sem metus  malesuada velit, quis venenatis diam libero a est. Maecenas interdum lobortis lacinia. Phasellus  pretium commodo lacinia. Etiam rutrum dictum elit sed imperdiet. Pellentesque ac elit lacus. Sed  pulvinar arcu sed nulla mollis sodales. Nam fermentum nunc gravida ligula consectetur vulputate.  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Proin porta iaculis orci ut euismod.  
  33. Vivamus vel ligula sapien. Aliquam sed libero leo. Donec rhoncus, eros sit amet  pretium bibendum, libero ligula egestas ante, non feugiat orci justo nec enim. Donec turpis  metus, fermentum id egestas vitae, tincidunt at metus. In hac habitasse platea dictumst. Nam mollis  dignissim sapien, vitae suscipit urna condimentum sed. Suspendisse faucibus imperdiet tortor,  sollicitudin consectetur odio dapibus quis. Nam pretium auctor neque quis tincidunt. Suspendisse  adipiscing ante at libero semper ornare. Etiam est tellus, consectetur rutrum tempus scelerisque,  blandit eget tellus. Integer tincidunt vulputate orci, non volutpat neque aliquam at. Donec sapien neque,  ullamcorper eget condimentum ac, vehicula et ante. Ut placerat, quam ut commodo congue, risus metus  bibendum metus, hendrerit hendrerit leo elit non felis. Sed vestibulum, dolor eu rhoncus blandit, ante  nulla sollicitudin risus, in placerat ligula ligula quis mauris. Sed dolor diam, ultrices vel iaculis placerat,  fringilla sit amet tellus. Morbi eu eros neque. Praesent et purus in tortor rutrum tincidunt vehicula eu  sapien. Donec at turpis arcu, quis aliquam dui. Duis convallis nunc nec nisi porta non mattis purus  pulvinar. Fusce sit amet elit sit amet metus euismod rutrum.</p><br><br>  
  34.     
  35.     
  36. <a name="Quote">  
  37. <h2>Quote</h2></a><br><br>  
  38.      
  39. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque rhoncus  augue vel dictum. Integer id risus eu magna pulvinar scelerisque. Integer consequat, ante in  vestibulum vestibulum, augue enim ultrices diam, et rutrum neque ligula nec lorem. In pharetra  condimentum varius. Proin viverra ante ac orci faucibus ac dignissim purus vulputate. Duis  porttitor cursus orci, ut interdum urna malesuada vitae. Etiam aliquam vestibulum adipiscing.  Integer a metus purus, sed venenatis sem. Nulla accumsan ultrices sapien, sed elementum mauris  viverra nec. Nullam commodo cursus bibendum. Sed sed facilisis libero. Sed eget lacus nulla,  non iaculis est.  
  40.   
  41. Fusce non urna enim. Suspendisse vitae urna mi, nec cursus arcu. Cras lobortis ultricies elit,  at cursus dui ultrices nec. Nam non arcu mauris. Morbi sollicitudin neque vitae velit consequat  pharetra. Vivamus hendrerit, ligula eu adipiscing auctor, sem metus malesuada velit, quis venenatis  diam libero a est. Maecenas interdum lobortis lacinia. Phasellus pretium commodo lacinia. Etiam  rutrum dictum elit sed imperdiet. Pellentesque ac elit lacus. Sed pulvinar arcu sed nulla mollis sodales.  Nam fermentum nunc gravida ligula consectetur vulputate. Pellentesque habitant morbi tristique s enectus et netus et malesuada fames ac turpis egestas. Proin porta iaculis orci ut euismod.</p><br><br>  
  42.   
  43. </body><br>  
  44. </html><br> 

Pada tag tersebut, perhatikan pada bagian :
  1. <a name="Forum"> 
Bagian tersebut menandakan bahwa daerah tersebut bernama "Forum" yang dapat memiliki hubungan dengan FRAME lain. Bagian ini yang berfungsi untuk menjadi pengenal agar mudah ditautkan dengan FRAME "daftar isi".

0 komentar:

Posting Komentar