Sabtu, 09 Mei 2015

Membuat Frame Menggunakan HTML

02.10 | Diposting oleh | Print and PDF | Edit Entri
OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element frame untuk menampilkan informasi dalam bentuk subwindows.
MATERI:
Element FRAMESET, Element FRAME, Element NOFRAMES


ELEMENT FRAMESET
Element FRAMESET berfungsi untuk membagi isi jendela web browser menjadi beberapa bagian. Element ini mempunyai attribute yaitu cols (membagi jendela berdasarkan kolom), rows (membagi jendela berdasarkan baris), border , bordercolor, frameborder (untuk menampilkan border frame), dan framespacing (spasi antara frame). Element FRAMESET terletak di antara element HEAD dan BODY.

Sintaks:
<frameset
     cols="list"
     rows="list"
     border="pixel"
     bordercolor="color"
     frameborder="yes"|"no"
     framespacing="pixel">
   ...........................
</frameset>




ELEMENT FRAME
Element FRAME mendefinisikan frame yang terdapat dalam frameset. Element ini mempunyai attribute yaitu name (nama frame), marginheight, marginwidth, bordercolor, frameborder, noresize, scrolling, src (dokumen yang ditampilkan pada frame). Element ini tidak mempunyai tag penutup.

Sintaks:
<frame
     name="name"
     marginheight="pixel"
     maginwidth="pixel"
     bordercolor="color"
     frameborder="yes"|"no"
     noresize
     scrolling="yes"|"no"
     src="uri">


ELEMENT NOFRAMES
Element NOFRAME mendefinisikan isi yang akan ditampilkan jika suatu frame tidak dapat diakses .

Sintaks:
<noframes>
.....................
</noframes>





LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.


Latihan 1:
Bagilah jendela menjadi dua frame secara vertikal dengan komposisi 40% untuk dokumen left.html dan 60% untuk dokumen right.html.


Nama file: latihan8_1.html
<html>
<head>
<title>Latihan8-1</title>
</head>
<frameset cols="40%,60%">
<frame src="left.html">
<frame src="right.html">
</frameset>
<body>
</body>
</html>
Catatan: penulisan nilai attribute cols dapat juga ditulis cols="40%,*".

Latihan 2:
Dari latihan 1 ubahlah dengan memberikan warna merah pada border dengan ukuran 10pixel.

   
Nama file: latihan8_2.html
<html>
<head>
<title>Latihan8-2</title>
</head>
<frameset cols="40%,*" border="10" bordercolor="red">
<frame src="left.html">
<frame src="right.html">
</frameset>
<body>
</body>
</html>


Latihan 3:
Dari latihan 2, tambahkan pada frame dokumen right.html dengan margin 50pixel.

   
Nama file: latihan8_3.html
<html>
<head>
<title>Latihan8-3</title>
</head>
<frameset cols="40%,*" border="10" bordercolor="red">
<frame src="left.html">
<frame src="right.html" marginheight="50" marginwidth="50">
</frameset>
<body>
</body>
</html>



Tanpa mencoba anda pasti akan segeraa lupa. Jadi untuk mempraktekkan apa yang ada di atas, anda dapat mengunakan Edior Html Online dan pilih mode "Sumber" pada pojok kiri atas.

Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
Diberdayakan oleh Blogger.

Entri Populer

  • Membuat Baris Baru dI PHP
    Dalam penulisan file html, kita sering menemukan pembuatan baris baru yang menggunakan perintah Break (br). dan bagaimana cara menuliskan ba...
  • Memanipulasi URL Menggunakan .htaccess
    Dalam website terdapat dua jenis url, yaitu url dinamis dan statis. Secara agris besar url dinamis adalah url yang sering berubah ubah/tidak...
  • Dropdown Beringkat Menggunakan PHP
    Jalankan demo dropdown daftar provinsi dan kecamata ndi indonesia ini. Kali ini saya akan membahas cara membuat dropdown betringkat dengan...

Sistem Informasi © 2015 All rights reserved | Template by Uun Nurdiyanto