Belajar HTML part7 ( Frames ) ~ Blogke-bas

Frames, mungkin mendengar kata-kata ini anda akan berfikir frame adalah sebuah bingkai seperti yang anda lihat didinding rumah anda (kalo ada fotonya juga sih), oke, kita dapat mengibaratkan frame sebagai sebuah bingkai foto anda yang dipajang didinding, disini frame diperumpamakan sebagai bingkai, situs sebagai foto dan page browser anda sebagai dinding. Mudeng gak?? gini loh, dengan frame kita dapat memajang beberapa website sekaligus kedalam 1 halaman web saja. Caranya? Baca dulu ya ampe selesai...

A. Tag <frame> dan Tag <frameset>
Kedua tag ini digunakan secara bersamaan untuk menyusun sebuah frame, Tag <frameset> digunakan untuk mendeklerasikan sebuah frameset, sedangkan Tag <frame> digunakan untuk membuat frame-frame yang kita butuhkan. Untuk lebih jelasnya perhatikan contoh berikut :

Code :

<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<frameset cols="25%,50%,25%">
<frame src="http://www.cobalihatsaja.com" />
<frame src="http://www.4-mall.com" />
<frame src="http://awansusanto.4-mall.com" />
</frameset>
</body>
</html>

Hasil :

Penjelasan :
Pada contoh diatas kita bertujuan untuk menampilkan 3 buah website sekaligus kedalam sebuah halaman, situs tersebut adalah : http://www.cobalihatsaja.com , http://www.4-mall.com dan http://awaansusanto.4-mall.com . Untuk melakukannya, kita memulainya dengan membuat sebuah frameset dengan menggunakan tag <frameset> dan membaginya kedalam tiga bagian dengan menggunakan atribut “cols” , disini kita membaginya menjadi 25%, 50% dan 25%. setelah itu untuk mengisi kolom-kolom frameset yang sudah kita buat sebelumnya kita gunakan tag <frame> dan tambahkan alamat situs-situs tersebut kedalam tag frame dengan menggunakan atribut “src”.

B. Tag <noframe>
Tag ini digunakan untuk fungsi portability, yang artinya jika website kita dijalankan pada semua browser, makan website kita akan tetap menampilkan informasi yang benar. Nah, pada beberapa browser fungsi tag <frame> tidak didukung, sehingga halaman kita tidak akan menampilkan apapun jika dibuka, tentu pengunjung akan bingung dengan keadaan seperti ini. Untuk menyiasati kejadian seperti ini, kita dapat memanfaatkan tag <noframe> ini, sehingga apabila dideteksi browser pengunjung tidak mendukung fungsi frame, maka akan ditampilkan pesan error atau kesalaha. Cara penggunaanya pun simple, lihat kode dibawah ini :

Code :

<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<frameset cols="25%,50%,25%">
<frame src="http://www.cobalihatsaja.com" />
<frame src="http://www.4-mall.com" />
<frame src="http://awansusanto.4-mall.com" />
<noframes>
Maaf, browser yang anda gunakan tidak dapat menampilkan frame, coba buka dengan browser lain!
</noframes>
</frameset>
</body>
</html>

C. Tag <iframe>
Jika tag <frame> digunakan untuk membagi webpage menjadi beberapa bagian, tag <iframe> memiliki fungsi yang sedikit berbeda, yaitu frame yang kita buat terletak didalam webpage atau dokumen yang kita buat tanpa membagi halaman browser seperti yang dilakukan oleh tag <frame>, bingung? Liat ini aja deh...

Code :

<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<iframe src="http://www.4-mall.com" width="50%" height="50%"/>
</body>
</html>

Hasil :

Penjelasan :
Lihat pada frame yang kita buat kali ini, frame tersebut kita buat dengan tinggi dan lebar 50% dari webpage. Seperti anda lihat, penggunaan tag <iframe> sangat simple, anda cukup memberikan nilai pada atribut “src” dan beberapa atribut lainnya yang bersifat optional , berikut daftar atribut-atribut yang dapat anda coba untuk membuat perbedaan pada iframe anda :

Atribut <iframe>

align → atribut ini digunakan untuk menentukan bagaimana align dengan text pada webpage, adapun nilai-nilainya adalah : left, right, top, middle dan bottom.
frameborde → digunakan untuk memberikan border pada iframe, jika anda ingin menggunakan border, beri nilai 1 kedalam atribut ini, jika tidak beri nilai 0.
height → digunakan untuk menentukan tinggi dari iframe.
width – digunakan untuk menentukan lebar dari iframe.
src → digunakan untuk menentukan kontent sumber website yang ingin kita tampilkan.