Home » Html » Membuat Frame di Html

Membuat Frame di Html

Jumat, 15 Februari 2013


Dengan frame, Anda dapat menampilkan lebih dari satu dokumen HTML di jendela browser yang sama. Setiap dokumen HTML bisa disebut juga sebuah frame atau jendela dalam browser yang dibagi menjadi beberapa jendela disebut Frame.

Kelemahan menggunakan frame:
  • Frame yang diharapkan tidak mendukung pada versi HTML mendatang.
  • Frame sulit digunakan (browser jadi lambat karena harus membaca seluruh halaman web yang banyak menggunakan frame).
  • Web developer/pengembang web harus melacak beberapa/lebih dokumen HTML.

Elemen Frameset

Elemen frameset digunakan untuk mendefinisikan satu atau lebih elemen frame. Setiap elemen frame dapat memegang dokumen yang terpisah.

Eelemen Frameset menyatakan beberapa banyak kolom atau baris yang terdapat dalam rangkaian frame, dan beberapa banyak persentase/pixel dari ruang tersebut yang akan menempati masing-masing.

Sebuah halaman frameset juga memiliki header, tetapi tidak seperti dokumen HTML yang memiliki body, frameset tidak memiliki tag<body> melainkan tag <frameset>.


Elemen Frame

Tag <frame> berguna untuk menampilkan file sumber dari dokumen HTML tertentu yang ingin ditampilkan dalam satu frameset.

Pada contoh dibawah ini kita memiliki sebuah frameset dengan dua kolom.

Kolom pertama diatur 25% dari lebar jendela browser. Kolom kedua diatur 75% dari lebar jendela browser. Dokumen "frame_a.htm" dimasukkan kedalam kolom pertama, dan dokumen "frame_b.htm" dimasukkan kedalam kolom kedua.

Contoh : frameset.htm
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>Belajar Frameset</title>  
  4.   </head>  
  5. <frameset cols="25%, 75%">  
  6.   <frame src="frame_a.htm">  
  7.   <frame src="frame_b.htm" name="showframe">  
  8. </frameset>  
  9. <body>  
  10. </body>  
  11. </html>  

isi dokumen "frame_a.htm"
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>Frame A</title>  
  4.   </head>  
  5.   <body>  
  6. <H4>Contoh-contoh HTML:</H4>  
  7. <a href="heading.htm" target="showframe">Heading - HTML</a>  
  8.   
  9. <a href="list1.htm" target="showframe">List - HTML</a>  
  10.   
  11. <a href="tabel.htm" target="showframe">Table - HTML</a>  
  12.   
  13. <a href="form.htm" target="showframe">Form - HTML</a>  
  14.   </body>  
  15. </html>  

isi dokumen "frame_b.htm"
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>Frame B</title>  
  4.   </head>  
  5.   <body>  
  6. <H4>Klik pada menu contoh-contoh HTML</H4>  
  7. jika ingin melihat contoh html-html yang sederhana sekaliiii!  
  8.   </body>  
  9. </html>  

isi dokumen "frame_c.htm"
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>Frame C</title>  
  4.   </head>  
  5.   <body>  
  6. <H4>Profil eli's blog</H4>  
  7. Blog ini adalah dokumentasi ilmu komputer yang pernah penulis pelajari dan sebagai media Share ilmu komputer  
  8.   </body>  
  9. </html>  

HTML frame
Dokumen frameset.htm
Jika Anda klik salah satu link yang ada di frame_a maka hasilnya akan ditampilkan di frame_b, perhatikan gambar dibawah ini.
HTML frame
Dokumen frameset.htm

Contoh : frame_campuran.htm
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>Belajar Frameset Bagian 2</title>  
  4.   </head>  
  5. <frameset cols="25%, 75%" rows="50%, 50%">  
  6.   <frame src="frame_a.htm">  
  7.   <frame src="frame_b.htm" name="showframe">  
  8.   <frame src="img.htm">  
  9.   <frame src="frame_c.htm">  
  10. </frameset>  
  11. <body>  
  12. </body>  
  13. </html>  
HTML frame
Dokumen frame_campuran.htm


Atribut Frameset 
  • Cols
    Atribut Cols digunakan untuk menentukan beberapa banyak kolom yang akan ditampilkan beserta lebar dari masing-masing kolom. Penggunaan Cols dapat dituliskan sebagai berikut:

    Contoh : frameset_cols.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>Frameset dengan atribut cols</title>  
    4.   </head>  
    5. <frameset cols="20%, 50%, 30%">  
    6.   <frame src="frame_a.htm">  
    7.   <frame src="frame_b.htm" name="showframe">  
    8.   <frame src="frame_c.htm">  
    9. </frameset>  
    10. <body>  
    11. </body>  
    12. </html>  

    Tag diatas akan menghasilkan 3 kolom yang masing-masing memiliki lebar 20%, 50%, 30%. Hasil yang sama dapat dituliskan sebagai berikut:

    view plainprint?
    1. <frameset cols="20%, 50%, *">  
    2.   <frame src="frame_a.htm">  
    3.   <frame src="frame_b.htm" name="showframe">  
    4.   <frame src="frame_c.htm">  
    5. </frameset>  

    Tanda bintang pada tag tersebut mengartikan 'sisanya', jadi apabila kolom pertama memiliki lebar 20%, dan kolom kedua memiliki lebar 50%, maka kolom ketiga memiliki lebar sebesar 'sisanya' yaitu sebesar 30%.
    HTML frame
    Dokumen frameset_cols.htm
  • Rows
    Atribut Rows digunakan untuk menentukan beberapa banyak baris yang akan ditampilkan beserta tinggi dari masing-masing baris. Penggunaan Rows dapat dituliskan sebagai berikut:

    Contoh : frameset_rows.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>Frameset dengan atribut rows</title>  
    4.   </head>  
    5. <frameset rows="25%, 50%, 25%">  
    6.   <frame src="frame_a.htm">  
    7.   <frame src="frame_b.htm" name="showframe">  
    8.   <frame src="frame_c.htm">  
    9. </frameset>  
    10. <body>  
    11. </body>  
    12. </html>  

    Tag diatas akan menghasilkan 3 baris yang masing-masing memiliki tinggi 25%, 50%, 25%. Hasil yang sama dapat dituliskan sebagai berikut:

    view plainprint?
    1. <frameset rows="25%, 50%, *">  
    2.   <frame src="frame_a.htm">  
    3.   <frame src="frame_b.htm" name="showframe">  
    4.   <frame src="frame_c.htm">  
    5. </frameset>  

    Tanda bintang pada tag tersebut mengartikan 'sisanya', jadi apabila baris pertama memiliki tinggi 25%, dan baris kedua memiliki tinggi 50%, maka baris ketiga memiliki tinggi sebesar 'sisanya' yaitu sebesar 25%.
    HTML frame
    Dokumen frameset_rows.htm
  • Frameborder
    Atribut Frameborder digunakan untuk menentukan apakah disekeliling tiap frame/bingkai nya akan diberi border atau tidak. Secara default frameset sudah memiliki frameborder="1", hasilnya seperti gambar dokumen frameser.htm.

    Contoh tanpa frameborder : frameborder.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>Frameborder</title>  
    4.   </head>  
    5. <frameset cols="20%, 50%, 30%" frameborder="0">  
    6.   <frame src="frame_a.htm">  
    7.   <frame src="frame_b.htm" name="showframe">  
    8.   <frame src="frame_c.htm">  
    9. </frameset>  
    10. <body>  
    11. </body>  
    12. </html>  
    • HTML frame
    Dokumen frameborder.htm
  • Border
    Atribut Border digunakan untuk menentukan seberapa tebal frameborder yang akan ditampilkan.

    Contoh  : f_border.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>Border untuk frameborder</title>  
    4.   </head>  
    5. <frameset cols="20%, 50%, 30%" frameborder="1" border="12">  
    6.   <frame src="frame_a.htm">  
    7.   <frame src="frame_b.htm" name="showframe">  
    8.   <frame src="frame_c.htm">  
    9. </frameset>  
    10. <body>  
    11. </body>  
    12. </html>  
    HTML frame
    Dokumen f_border.htm
  • Bordercolor
    Atribut Bordercolor digunakan untuk menentukan warna pada frameborder dari setiap frame/bingkai.

    Contoh  : f_bordercolor.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>Bordercolor untuk frameborder</title>  
    4.   </head>  
    5. <frameset cols="20%, 50%, 30%" frameborder="1" border="12" bordercolor="#CC0000">  
    6.   <frame src="frame_a.htm">  
    7.   <frame src="frame_b.htm" name="showframe">  
    8.   <frame src="frame_c.htm">  
    9. </frameset>  
    10. <body>  
    11. </body>  
    12. </html>  
    HTML frame
    Dokumen f_bordercolor.htm

Atribut Frame
  • Src
    Atribut Src merupakan kepanjangan dari SOURCE yang artinya "sumber", sesuai dengan namanya, atribut ini berfungsi untuk menentukan sumber dari setiap Frame yang akan ditampilkan.
    Contoh : f_src.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>SRC</title>  
    4.   </head>  
    5. <frameset rows="25%, 75%">  
    6.   <frame src="frame_c.htm">  
    7.   <frame src="http://eliastutik.blogspot.com" scrolling="auto">  
    8. </frameset>  
    9. <body>  
    10. </body>  
    11. </html>  
    HTML frame
    Dokumen f_src.htm
    Tag tersebut menyatakan bahwa file sumber dari Frame pada baris pertama menampilkan alamat frame_c.htm dan pada baris kedua menampilkan alamat http://eliastutik.blogspot.com.
  • Scrolling
    Atribut Scrolling berguna untuk menentukan apakah Frame yang akan ditampilkan memiliki Srcoll atau tidak. Terdapat tiga pilihan dari atribut ini, yaitu YES, NO, AUTO.

    Pilihan scrolling="yes" akan membuat Frame akan memiliki Scroll, diperlukan maupun tidak diperlukan. Pilihan  scrolling="no" akan membuat Frame tidak memiliki Scroll, meskipun dibutuhkan, sehingga dampaknya, Frame yang menggunakan pilihan scrolling="no" memiliki bagian yang tidak terbaca karena tidak memiliki Scroll. Sedangkan pilihan scrolling="auto" merupakan pilihan terbaik, dikarenakan suatu Frame akan memiliki Scroll hanya bila dibutuhkan, dan tidak akan menampilkan Scroll bila Frame tersebut tudak memerlukannya.
    Contoh : f_scrolling.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>Scrolling</title>  
    4.   </head>  
    5. <frameset rows="25%, 50%, 25%">  
    6.   <frame src="frame_a.htm" scrolling="yes">  
    7.   <frame src="frame_b.htm" name="showframe">  
    8.   <frame src="frame_c.htm">  
    9. </frameset>  
    10. <body>  
    11. </body>  
    12. </html>  
    HTML frame
    Dokumen f_scrolling.htm
  • Noresize
    Atribut Noresize berguna untuk melarang border suatu Frame untuk digeser-geser.
    Contoh : noresize.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>NO RESIZE</title>  
    4.   </head>  
    5. <frameset cols="20%, 50%, 30%">  
    6.   <frame src="frame_a.htm" noresize>  
    7.   <frame src="frame_b.htm" name="showframe">  
    8.   <frame src="frame_c.htm">  
    9. </frameset>  
    10. <body>  
    11. </body>  
    12. </html>  
    Jika Anda jalankan pasti garis frame antara frame_a.htm dan frame_b.htm tidak bisa digeser, sedangkan garis frame antara frame_b.htm dan frame_c.htm masih bisa digeser.
  • Marginwidth
    Atribut Marginwidth digunakan untuk menentukan rataan tepi horizontal dari suatu Frame.
    Contoh : margin_w.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>Margin width</title>  
    4.   </head>  
    5. <frameset cols="20%, 50%, 30%">  
    6.   <frame src="frame_a.htm">  
    7.   <frame src="frame_b.htm" name="showframe" marginwidth=50>  
    8.   <frame src="frame_c.htm" marginwidth=10>  
    9. </frameset>  
    10. <body>  
    11. </body>  
    12. </html>  
    HTML frame
    Dokumen margin_w.htm
    Jika Anda perhatikan gambar diatas. frame_b.htm memiliki perataan lebar sebesar 50 pixel, sedangkan frame_c.htm memiliki perataan lebar sebesar 10 pixel.
  • Marginheight
    Atribut Marginheight digunakan untuk menentukan rataan tepi vertical dari suatu Frame.
    Contoh :margin_h.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>Margin height</title>  
    4.   </head>  
    5. <frameset cols="20%, 50%, 30%">  
    6.   <frame src="frame_a.htm">  
    7.   <frame src="frame_b.htm" name="showframe" marginheight=20>  
    8. <frame src="frame_c.htm" marginheight=100>  
    9. </frameset>  
    10. <body>  
    11. </body>  
    12. </html>  
    HTML frame
    Dokumen margin_h.htm
    Jika Anda perhatikan gambar diatas. frame_b.htm memiliki perataan tinggi sebesar 20 pixel, sedangkan frame_c.htm memiliki perataan tinggi sebesar 100 pixel.
  • Name
    Atribut Name digunakan untuk menghubungkan tautan antar Frame. Atribut Name merupakan atribut wajib, jika frame yang bersangkutan akan dijadikan sebagai tempat untuk menampilkan URL suatu link.
    Contoh : frameset.htm
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>Belajar Frameset</title>  
    4.   </head>  
    5. <frameset cols="25%, 75%">  
    6.   <frame src="frame_a.htm">  
    7.   <frame src="frame_b.htm" name="showframe">  
    8. </frameset>  
    9. <body>  
    10. </body>  
    11. </html>  
    HTML frame
    Dokumen frameset.htm
    Jika Anda klik salah satu link yang ada di frame_a maka hasilnya akan ditampilkan di frame_b, perhatikan gambar dibawah ini.
    HTML frame
    Dokumen frameset.htm
    Jadi intinya atribut name dengan value/nilai NAME="SHOWFRAME" bertujuan untuk menampilkan link dari frame_a.htm akan ditampilkan pada frame_b.htm. Sebelumnya frame_a.htm sudah memiliki target frame yaituTARGET="SHOWFRAME". Lebih jelasnya perhatikan isi dokumen frame_a.htm
    isi dokumen "frame_a.htm"
    view plainprint?
    1. <html>  
    2.   <head>  
    3.     <title>Frame A</title>  
    4.   </head>  
    5.   <body>  
    6. <H4>Contoh-contoh HTML:</H4>  
    7. <a href="heading.htm" target="showframe">Heading - HTML</a>  
    8.   
    9. <a href="list1.htm" target="showframe">List - HTML</a>  
    10.   
    11. <a href="tabel.htm" target="showframe">Table - HTML</a>  
    12.   
    13. <a href="form.htm" target="showframe">Form - HTML</a>  
    14.   </body>   
    15. </html>  
Target Frame
Salah satu tantangan dalam membuat frames adalah mengatur dimana link akan ditampilkan. Secara default sebuah link dokumen akan diload di frame yang sama dengan link tersebut. Tetapi apabila kita ingin menampilkan link pada frame yang berbeda kita memerlukan atribut target pada tag <a> untuk mengarahkan hasil dari link ke frame yang dituju.

Nama TargetKegunaan
_selfDigunakan apabila target frame adalah tempat frame berada
_topDigunakan apabila target frame adalah windows tempat frame berada. Dengan menggunakan _top sebagai target maka definisi frame yang ada pada windows akan hilang, diganti dengan definisi frame yang baru jika ada.
_parentTarget frame ini setingkat diatas frame link berada. Akibat dari target frame _parent akan sama jika tempat frame link berada hanya satu level dibawah definisi frame windows
_blankTarget _blank digunakan untuk membuka windows baru.

Contoh : f_target.htm
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>Target _blank</title>  
  4.   </head>  
  5. <frameset cols="25%, 75%">  
  6.   <frame src="daftar.htm">  
  7.   <frame src="frame_d.htm">  
  8. </frameset>  
  9. <body>  
  10. </body>  
  11. </html>  

isi dokumen "daftar.htm"
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>Menggunakan Target _blank</title>  
  4.   </head>  
  5.   <body>  
  6. <H4>Contoh-contoh HTML:</H4>  
  7. <a href="heading.htm" target="_blank">Heading - HTML</a>  
  8.   
  9. <a href="list1.htm" target="_blank">List - HTML</a>  
  10.   
  11. <a href="tabel.htm" target="_blank">Table - HTML</a>  
  12.   
  13. <a href="form.htm" target="_blank">Form - HTML</a>  
  14.   </body>  
  15. </html>  

isi dokumen "frame_d.htm"
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <title>Frame D</title>  
  4.   </head>  
  5.   <body>  
  6. <H4>Klik pada menu contoh-contoh HTML</H4>  
  7. Jika Anda klik salah satu link disamping akan membuka windows/jendela baru  
  8.   </body>  
  9. </html>  
HTML frame
Dokumen f_target.htm


Semoga artikel tentang Membuat Frame di Html bermanfaat untuk anda dan jika ingin mencopy artikel ini mohon untuk meletakkan link dibawah ini sebagai sumbernya.
Label: