HTML - 3
Frame & Frameset Frame adalah Suatu cara atau metode yang digunakan untuk menampilkan dua atau lebih dokumen HTML secara bersamaan di dalam satu layar. Untuk membuat frame, kita perlu membuat satu dokumen HTML baru, yang disebut Frameset. Frameset adalah tipe dokumen HTML yang mendefinisikan tata letak, ukuran, berapa banyak frame dan file mana saja yang akan ditampilkan. Di dalam frameset boleh ada frameset lain (beranak) Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset. Dokumen tersebut tidak mempunyai isi dokumen (tidak ada <body> </body>)
Frame & Frameset Skema dasar dokumen frameset : <html> <head> <title>Judul dokumen</title> </head> <frameset> <frame src="namafile1"> <frame src="namafile2"> ...dst (atau frameset yang lain) <noframes> bagian ini ditampilkan jika browser tidak mendukung frame </noframes> </frameset> </html>
Contoh Frameset (Frame Kolom) File : Frame_Utama.html <html> <head> <title>Document Frameset</title> </head> <frameset cols="30%,40%,30%" frameborder="1"> <frameset rows="*,200"> <frame src="Frame_Page1.html" name="satu" scrolling="yes“ frameborder="0"> <frame src="Frame_Page2.html" name="dua" scrolling="yes" noresize> </frameset> <frame src="Frame_Page3.html" name="tiga" frameborder="0"> <frame src="Frame_Page4.html" name="empat" frameborder="1"> </html>
File : Frame_Page1.html <html> <head> <title>Frame and Frameset</title> </head> <body> <h2>Halaman 1</h2> <p>Jus adalah salah satu alternatif untuk mendapatkan asupan vitamin, mineral, dan antioksidan dari buah dan sayur atau bahan-bahan lainnya. Dengan sifatnya yang seperti itu jus dikenal sebagai salah satu minuman kesehatan. Bersamaan dengan itu, jus juga dipercaya dapat membantu orang yang sedang menjalani program diet. Tapi, Dreamers, ternyata efek meminum jus tidak selamanya baik! Jus juga berpotensi membawa bahaya yang dapat menyebabkan efek yang tidak diinginkan dan membahayakan kesehatan.</p> </body> </html>
Contoh Frame Baris <html> <head> <title>Frame Baris</title> </head> <frameset rows="30%,40%,30%" frameborder="1"> <frame src="Frame_Page1.html" name="satu"> <frame src="Frame_Page2.html" name="dua"> <frame src="Frame_Page3.html" name="tiga"> </frameset> </html>
Contoh Frame Campuran <html> <head> <title>Frame Baris</title> </head> <frameset rows="30%,40%,30%" frameborder="1"> <frameset cols="200,*"> <frame src="Frame_Page1.html" name="satu" scrolling="yes" frameborder="0"> <frame src="Frame_Page2.html" name="dua" scrolling="yes" noresize> </frameset> <frame src="Frame_Page3.html" name="tiga" frameborder="0"> <frame src="Frame_Page4.html" name="empat" frameborder="1"> <body> </body> </html>
IFRAME (inline frame) Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa dokumen lain (anak) Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah iframe Dokumen induk merupakan dokumen biasa yang mempunyai isi dokumen Skema dasar dokumen dengan iframe : <html> <head> <title>Judul dokumen</title> </head> <body> …isi dokumen… <iframe src="namafile"> bagian ini ditampilkan jika browser tidak mendukung frame </iframe> </body> </html>
Contoh inline frame File : Frame inline.html <html> <head> <title>Inline Frame</title> </head> <body> <h1>Kisah-kisah di sekolah</h1> <p>Masa sekolah adalah masa yang menyenangkan bagiku. Sebagian besar waktu hidupku sampai saat ini dihabiskan untuk sekolah, dan aku sangat menikmati saat-saat itu. Inilah sebagian kisah-kisahku di sekolah.<p> <iframe width="300" height="200" src="sd.html" frameborder="1"></iframe> <iframe width="400" height="200" src="smp.html" frameborder="1"> </iframe> <iframe width="400" height="200" src="smu.html" frameborder="1"> </iframe> <p>Semua pengalaman dan teman-teman yang kudapat sungguh sangat mewarnai hidupku dan memberikan pengaruh besar terhadap diriku.</p> </body> </html>
File : sd.html <html> <head> <title>Inline Frame</title> </head> <body> <h2>Sekolah Dasar</h2> <p>Sekolah dasar (disingkat SD; bahasa Inggris: Elementary School) adalah jenjang paling dasar pada pendidikan formal di Indonesia. Sekolah dasar ditempuh dalam waktu 6 tahun, mulai dari kelas 1 sampai kelas 6. Saat ini murid kelas 6 diwajibkan mengikuti Ujian Nasional (dahulu Ebtanas) yang memengaruhi kelulusan siswa. Lulusan sekolah dasar dapat melanjutkan pendidikan ke sekolah menengah pertama (atau sederajat). Pelajar sekolah dasar umumnya berusia 7-12 tahun. Di Indonesia, setiap warga negara berusia 7-15 tahun tahun wajib mengikuti pendidikan dasar, yakni sekolah dasar (atau sederajat) 6 tahun dan sekolah menengah pertama (atau sederajat) 3 tahun.</p> </body> </html>
Link antar Frame Agar suatu frame dapat menjadi tujuan untu menampilkan dokumen HTML tertentu yang diinginkan, kita perlu menamai frame tersebut dan menjadikan sebagai target didalam link yang kita buat. Pada saat pendefinisian link, kita perlu mengisikan nilai pada atribut TARGET : (contoh) <a href=“frame-content3.html” target=frm_bawah”>link</a> Meskipun demikian, terdapat beberapa nilai lain yang dapat dijadikan sebagai nilai dari atribut TARGET, yaitu : _blank : Dokumen akan tampil dengan windows baru _ self : Dokumen akan tampil dengan frame yang bersangkutan, halaman lama akan diganti. _parent : Dokumen akan tampil di frame parent _top : Dokumen akan tampil di semua frame yang ada.
Contoh Link antar Frame File : frame-link.html <html> <head> <title>Link Antar Frame</title> </head> <frameset cols="20%, *"> <frame src="frame-1.html" name="frm_kiri" /> <frame src="frame-2.html" name="frm_kanan" /> </frameset> </html>
File : frame-1.html <html> <head> <title>Link Antar Frame</title> </head> <body> <h3>Frame 1</h3> <p><a href="frame-dokumen.html" target="_blank" style="text-decoration:none">_blank</a></p> <p><a href="frame-dokumen.html" target="_self" style="text-decoration:none">_self</a></p> <p><a href="frame-dokumen.html" target="_parent" style="text-decoration:none">_parent</a></p> <p><a href="frame-dokumen.html" target="_top" style="text-decoration:none">_top</a></p> </body> </html>
File : frame-2.html <html> <head> <title>Link Antar Frame</title> </head> <body> <h3>Frame 2</h3> <p>Ini adalah teks di dalam frame 2</p> </body> </html> File : frame-dokumen.html <h3>Dokumen lain</h3> <p>Ini adalah dokumen lain yang ditampilkan</p>