HTML - Bingkai

Frame HTML digunakan untuk membagi jendela browser Anda menjadi beberapa bagian di mana setiap bagian dapat memuat dokumen HTML terpisah. Kumpulan bingkai di jendela browser dikenal sebagai frameset. Jendela dibagi menjadi bingkai dengan cara yang sama seperti tabel diatur: menjadi baris dan kolom.

Kekurangan Frame

Ada beberapa kekurangan dalam menggunakan bingkai, jadi tidak pernah disarankan untuk menggunakan bingkai di halaman web Anda -

Beberapa perangkat yang lebih kecil sering kali tidak dapat menangani bingkai karena layarnya tidak cukup besar untuk dibagi.
Terkadang halaman Anda akan ditampilkan secara berbeda di komputer yang berbeda karena resolusi layar yang berbeda.
Tombol kembali di browser mungkin tidak berfungsi sesuai harapan pengguna.
Masih sedikit browser yang tidak mendukung teknologi frame.

Membuat Bingkai

Untuk menggunakan frame pada halaman kita menggunakan tag <frameset> daripada tag <body>. Tag <frameset> mendefinisikan, bagaimana membagi jendela menjadi beberapa bingkai. Iturows atribut dari tag <frameset> mendefinisikan bingkai horizontal dan colsatribut mendefinisikan bingkai vertikal. Setiap frame ditunjukkan oleh tag <frame> dan menentukan dokumen HTML mana yang akan dibuka ke dalam frame.

Note- Tag <frame> tidak lagi digunakan di HTML5. Jangan gunakan elemen ini.

Contoh

Berikut adalah contoh untuk membuat tiga bingkai horizontal -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh

Mari kita letakkan contoh di atas sebagai berikut, di sini kita mengganti atribut baris dengan kolom dan mengubah lebarnya. Ini akan membuat ketiga frame secara vertikal -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut Tag <frameset>

Berikut adalah atribut penting dari tag <frameset> -

Sr Tidak	Atribut & Deskripsi
1	cols Menentukan berapa banyak kolom yang ada di frameset dan ukuran setiap kolom. Anda dapat menentukan lebar setiap kolom dengan salah satu dari empat cara - Nilai mutlak dalam piksel. Misalnya, untuk membuat tiga bingkai vertikal, gunakan kolom = "100, 500, 100" . Persentase dari jendela browser. Misalnya, untuk membuat tiga bingkai vertikal, gunakan kolom = "10%, 80%, 10%" . Menggunakan simbol wildcard. Misalnya, untuk membuat tiga bingkai vertikal, gunakan kolom = "10%, , 10%"* . Dalam kasus ini, karakter pengganti mengambil sisa jendela. Sebagai lebar relatif dari jendela browser. Misalnya, untuk membuat tiga bingkai vertikal, gunakan kolom = "3 , 2 , 1 "* . Ini adalah alternatif persentase. Anda dapat menggunakan lebar relatif dari jendela browser. Di sini jendela dibagi menjadi enam: kolom pertama mengisi setengah dari jendela, yang kedua mengambil sepertiga, dan yang ketiga mengambil seperenam.
2	rows Atribut ini bekerja seperti atribut cols dan mengambil nilai yang sama, tetapi digunakan untuk menentukan baris dalam rangkaian bingkai. Misalnya, untuk membuat dua bingkai horizontal, gunakan baris = "10%, 90%" . Anda dapat menentukan tinggi setiap baris dengan cara yang sama seperti yang dijelaskan di atas untuk kolom.
3	border Atribut ini menentukan lebar perbatasan setiap frame dalam piksel. Misalnya, border = "5". Nilai nol berarti tidak ada batas.
4	frameborder Atribut ini menentukan apakah batas tiga dimensi harus ditampilkan di antara bingkai. Atribut ini mengambil nilai 1 (ya) atau 0 (tidak). Misalnya frameborder = "0" tidak menentukan batas.
5	framespacing Atribut ini menentukan jumlah ruang antara frame dalam sebuah frameset. Ini bisa mengambil nilai integer apa pun. Misalnya framespacing = "10" berarti harus ada jarak 10 piksel di antara setiap frame.

Atribut Tag <frame>

Berikut adalah atribut penting dari tag <frame> -

Sr Tidak	Atribut & Deskripsi
1	src Atribut ini digunakan untuk memberi nama file yang harus dimuat dalam bingkai. Nilainya dapat berupa URL apa pun. Misalnya, src = "/html/top_frame.htm" akan memuat file HTML yang tersedia di direktori html.
2	name Atribut ini memungkinkan Anda memberi nama pada bingkai. Ini digunakan untuk menunjukkan ke bingkai mana dokumen harus dimuat. Hal ini sangat penting ketika Anda ingin membuat tautan dalam satu bingkai yang memuat halaman ke bingkai lain, dalam hal ini bingkai kedua memerlukan nama untuk mengidentifikasi dirinya sebagai target tautan.
3	frameborder Atribut ini menentukan apakah tepi bingkai itu ditampilkan atau tidak; itu menimpa nilai yang diberikan dalam atribut frameborder pada tag <frameset> jika ada, dan ini dapat mengambil nilai 1 (ya) atau 0 (tidak).
4	marginwidth Atribut ini memungkinkan Anda menentukan lebar ruang antara kiri dan kanan batas bingkai dan konten bingkai. Nilainya diberikan dalam piksel. Misalnya marginwidth = "10".
5	marginheight Atribut ini memungkinkan Anda menentukan ketinggian ruang antara batas atas dan bawah bingkai serta isinya. Nilainya diberikan dalam piksel. Misalnya marginheight = "10".
6	noresize Secara default, Anda dapat mengubah ukuran bingkai apa pun dengan mengeklik dan menyeret di tepi bingkai. Atribut noresize mencegah pengguna untuk bisa mengubah ukuran frame. Misalnya noresize = "noresize".
7	scrolling Atribut ini mengontrol tampilan scrollbar yang muncul di bingkai. Ini mengambil nilai "ya", "tidak" atau "otomatis". Misalnya scrolling = "no" berarti tidak boleh memiliki scroll bar.
8	longdesc Atribut ini memungkinkan Anda memberikan link ke halaman lain yang berisi deskripsi panjang tentang konten frame. Misalnya longdesc = "framedescription.htm"

Dukungan Browser untuk Bingkai

Jika pengguna menggunakan browser lama atau browser apa pun, yang tidak mendukung frame, elemen <noframes> harus ditampilkan kepada pengguna.

Jadi Anda harus menempatkan elemen <body> di dalam elemen <noframes> karena elemen <frameset> seharusnya menggantikan elemen <body>, tetapi jika browser tidak memahami elemen <frameset> maka browser harus memahami apa yang ada di dalam Elemen <body> yang terkandung dalam elemen <noframes>.

Anda dapat memberikan pesan yang bagus untuk pengguna Anda yang memiliki browser lama. Misalnya, Maaf !! browser Anda tidak mendukung bingkai. seperti yang ditunjukkan pada contoh di atas.

Nama bingkai dan atribut target

Salah satu penggunaan bingkai yang paling populer adalah menempatkan bilah navigasi dalam satu bingkai dan kemudian memuat halaman utama ke dalam bingkai terpisah.

Mari kita lihat contoh berikut di mana file test.htm memiliki kode berikut -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

Di sini, kami telah membuat dua kolom untuk diisi dengan dua bingkai. Bingkai pertama berukuran lebar 200 piksel dan akan berisi bilah menu navigasi yang diterapkan olehmenu.htmmengajukan. Kolom kedua mengisi ruang yang tersisa dan akan berisi bagian utama halaman dan diimplementasikan olehmain.htmmengajukan. Untuk ketiga tautan yang tersedia di bilah menu, kami telah menyebutkan bingkai target sebagaimain_page, jadi setiap kali Anda mengklik salah satu tautan di bilah menu, tautan yang tersedia akan terbuka di halaman utama.

Berikut adalah isi dari file menu.htm

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

Berikut ini adalah konten file main.htm -

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

Saat kami memuat test.htm file, itu menghasilkan hasil sebagai berikut -

Sekarang Anda dapat mencoba mengklik tautan yang tersedia di panel kiri dan melihat hasilnya. The targetattribute juga dapat mengambil salah satu dari nilai berikut -

Sr Tidak	Opsi & Deskripsi
1	_self Memuat halaman ke dalam bingkai saat ini.
2	_blank Memuat halaman ke dalam jendela browser baru. Membuka jendela baru.
3	_parent Memuat halaman ke dalam jendela induk, yang dalam kasus satu frameset adalah jendela browser utama.
4	_top Memuat halaman ke jendela browser, menggantikan bingkai apa pun saat ini.
5	targetframe Memuat halaman ke dalam targetframe bernama.