Bingkai dalam HTML adalah cara membagi jendela browser menjadi beberapa bagian, yang masing-masing dapat memuat dan menampilkan dokumen HTML yang berbeda. Pada artikel ini kita akan melihat contoh praktis frame dalam HTML.

Meskipun penggunaannya telah menurun dalam beberapa tahun terakhir karena adopsi teknik yang lebih modern dan fleksibel, seperti CSS dan JavaScript, masih bisa ditemukan di beberapa website, terutama yang dibuat pada tahun 1990-an dan awal 1990-an. yang tahun 2000.

Bagaimana cara kerja frame atau bingkai dalam HTML?

Bingkai terdiri dari dua elemen:

1. Kumpulan bingkai: Elemen digunakan untuk membagi jendela browser menjadi beberapa bagian persegi panjang, yang masing-masing dapat memuat dokumen HTML-nya sendiri.

instagram story viewer

2. bingkai: Elemen digunakan dalam a untuk menentukan masing-masing bagian individu. Dan itu mengirim untuk memanggil beberapa dokumen lain yang dimuat di dalam frameset.

• Ikuti dengan: Contoh iFrame

Cara Membuat Frame di HTML

Untuk membuat dokumen HTML dengan bingkai, ikuti dua langkah yang sangat sederhana:

1. Buat dokumen HTML yang mendefinisikan struktur bingkai menggunakan elemen. Misalnya:

File 1: frameset.html

2. Buat satu atau lebih dokumen HTML untuk dimuat di dalam bingkai.

File 2: frame1.html

Ini adalah Bingkai 1

File 3: frame2.html

Ini adalah Bingkai 2

Atribut bingkai dalam HTML

Beberapa atribut elemen terpenting adalah:

• bergulir: Atribut ini digunakan untuk mengontrol tampilan scrollbar dalam bingkai. Itu bisa memiliki nilai "otomatis", "ya" atau "tidak".

• ukuran kecil: Atribut ini digunakan untuk mencegah pengguna mengubah ukuran bingkai.

• ubi: Atribut ini digunakan untuk memberi nama pada frame, yang dapat berguna untuk mereferensikan frame dalam tautan dan skrip.

• src: Atribut ini digunakan untuk menentukan URL dokumen HTML yang akan dimuat dalam bingkai.

• batas bingkai: Atribut ini menentukan apakah frame harus memiliki batas atau tidak. Nilai yang mungkin adalah "1" (untuk menunjukkan batas) atau "0" (untuk tidak menunjukkan batas). Misalnya, .

• berbatasan: Atribut ini menentukan lebar batas antara bingkai dalam piksel. Misalnya, akan membuat batas 5px di antara bingkai.

• framespacing: Atribut ini mirip dengan berbatasan. Ini juga menentukan ruang antara bingkai dalam piksel. Misalnya, akan menetapkan celah 10px di antara bingkai.

• bordercolor: Atribut ini memungkinkan Anda untuk mengubah warna batas bingkai. Setiap warna yang valid dapat ditentukan. Misalnya, akan membuat batas bingkai menjadi merah.

Contoh penggunaan:

Cara menautkan ke bingkai tertentu

Kami dapat membuat tautan terbuka di bingkai tertentu menggunakan atribut target Di dalam label. Nilai dari target harus sama dengan nama frame (ubi atribut dari ). Misalnya:

di menu.html
Halaman 1
Halaman 2

Dalam hal ini, mengklik tautan "Halaman 1" atau "Halaman 2" di bingkai menu akan memuat halaman yang sesuai di bingkai "konten".

Cara memecahkan bingkai

Jika Anda ingin link untuk membuka halaman di luar frameset (yaitu mengganti seluruh frameset), Anda dapat menggunakan nilai khusus _atas untuk atribut target. Misalnya:

di menu.html
keluar dari bingkai

Ketika Anda mengklik "Exit Frames", browser akan memuat "pageOutofFrames.html" di jendela penuh, menggantikan rangkaian bingkai.

Contoh untuk membagi layar menjadi dua kolom dengan bingkai

Contoh ini membagi layar menjadi dua kolom dengan ukuran yang sama. Setiap kolom memuat halaman HTML yang berbeda.

Contoh untuk membuat sidebar navigasi dengan bingkai

Contoh ini membuat sidebar yang memakan 25% layar dan digunakan untuk navigasi. Sisa layar digunakan untuk menampilkan konten utama.

Contoh untuk membagi layar menjadi baris dan kolom

Contoh yang lebih kompleks ini membagi layar menjadi empat bagian yang sama. Setiap bagian memuat halaman HTML yang berbeda.

Contoh navigasi atas dengan bingkai HTML

Buat file yang mendefinisikan dua frame berturut-turut. Dua file yang didefinisikannya adalah: satu untuk navigasi (yang memakan 20% lebar jendela) dan satu lagi untuk konten utama (yang memakan sisa lebar jendela).

Selanjutnya, Anda perlu membuat file "navigation.html" dan "content.html". Misalnya, "navigation.html" mungkin terlihat seperti ini:

Halaman 1

Halaman 2

Halaman 3


Dan "content.html" bisa seperti ini:

Selamat datang di website kami!

Ini akan menampilkan konten halaman yang dipilih dalam navigasi.

Dalam hal ini, saat Anda mengeklik tautan di "navigation.html", laman terkait dimuat di bingkai "konten".