Frame dan IFrame Click to edit Master subtitle style Pengenalan Web STMIK AKAKOM Yogyakarta

Frame  Digunakan untuk membuat 2 atau lebih area terpisah yang bisa digulung (scrollable areas) dalam satu jendela browser  Dengan kata lain, frame membuat kita dapat menampilkan lebih dari satu HTML document dalam satu jendela browser  Masing-masing HTML document disebut sebagai frame, dan setiap frame independent satu sama lain.  Frame-frame tersebut terletak dalam satu wadah/bingkai yang disebut frameset

Kelemahan Frame  Frame (relatif) sulit digunakan bagi user (mis: pencetakan, tombol back)  Pengelolaan lebih dari 1 HTML document dalam 1 jendela terkadang menyulitkan bagi web developer  Kemungkinan tidak akan didukung untuk standar HTML ke depan 33

Pembuatan Frame

 Dibutuhkan : ◦ file satu.html (mengisi bagian kiri) ◦ File dua.html (mengisi bagian kanan) ◦ Frameset dengan pembagian berdasar kolom

File : satu.html <meta name="" content="">

Ini File Satu

stmik akakom yogyakarta -

55

File : dua.html <meta name="" content=""> Ini file yang kedua stmik akakom yogyakarta -

66

File Utama : fset.html <meta name="" content="">

stmik akakom yogyakarta -

77

 digunakan untuk membagi dokumen ke dalam frame  Pembagian bisa secara kolom (cols) atau baris (rows)  Bentuk umum :

 Ukuran_kolom_atau_baris bisa berupa : ◦ Persen ◦ Pixel ◦ Asterisk ( * )

stmik akakom yogyakarta -

88

Contoh

 Untuk membagi jendela menjadi :

◦ 2 kolom, dengan ukuran 25% dan 75% 

◦ 3 kolom, dengan ukuran 25%, 25% dan sisanya 

◦ 2 baris, dengan ukuran 100 piksel, dan sisanya 

◦ 3 kolom, dengan ukuran 100 piksel, dan 2 kolom lain sisanya  stmik akakom yogyakarta -

99

Catatan  menggantikan tag , sehingga untuk dokumen html yang menggunakan tag tidak ada tag  Elemen konten dari hanyalah : ◦ Tag ◦ Tag lain, saat nested frameset ◦ Tag <noframes>

stmik akakom yogyakarta -

10



 Tag merupakan elemen konten dari  Tag digunakan untuk menentukan behaviour dari tiap frame termasuk isi dari frame tersebut  Bentuk paling sederhana dari frame: ◦

 URL_konten_dari_frame bisa berisi dokumen HTML, image atau lainnya

stmik akakom yogyakarta -

11

Nested Frameset

 Yaitu frameset yang terletak di dalam frameset yang lain

stmik akakom yogyakarta -

12

Hasil

13

Attribut frameset

 Beberapa attribut penting frameset: ◦ Frameborder = “yes” | “no” | “1” | “0” ◦ Border = “nilai_integer”

 Frameborder, untuk menentukan apakah frame yang dibuat mempunyai border (“yes” | “1”) atau tidak (“no” | “0”) ◦  default : yes

 Border, untuk menentukan ukuran border (jika frameborder berisi nilai “yes” | “1”)

contoh



contoh



stmik akakom yogyakarta -

16

Attribut frame

 name = “nama_frame”

◦ Sangat penting untuk pengaksesan

 frameborder = “yes” | “1” | “no” | “0” ◦ Ada tidaknya border, default = “yes”

 scrolling = “yes” | “no” | “auto” ◦ Ada tidaknya scroll bar, default = “auto”

 marginwidth = “nilai_integer” ◦ Batas kanan/kiri halaman terhadap frame

 marginheight = “nilai_integer” ◦ Batas atas bawah halaman terhadap frame

 noresize = “noresize” ◦ Menjadikan ukuran frame tak bisa dirubah

stmik akakom yogyakarta -

17

Contoh



stmik akakom yogyakarta -

18

Hasil

stmik akakom yogyakarta -

19

Contoh lain

<meta name="" content="">

stmik akakom yogyakarta -

20

Hasil

stmik akakom yogyakarta -

21

<noframes>  Tag <noframes> digunakan untuk mengantisipasi jika browser yang digunakan tidak mendukung adanya frame  Contoh : <noframes> Browser anda tidak mendukung frame




stmik akakom yogyakarta -

22

Inline frame (iframe)  Berfungsi untuk meletakkan suatu potongan dokumen HTML lain ke dalam suatu dokumen HTML tanpa harus membagi dokumen ke dalam beberapa frame dengan frameset

stmik akakom yogyakarta -

23

Attribut iframe  Attribut <iframe> mirip dengan attribut , beberapa penambahan : ◦ Untuk alignment digunakan :  style=“float: left | right | none”

◦ Pengaturan ukuran digunakan :  height = “nilai_integer”  width = “nilai_integer” stmik akakom yogyakarta -

24

Contoh <meta name="" content=""> Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja.

---

<iframe src="satu.html" scrolling="yes" width="100" height="100" style="float:right">Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja.

stmik akakom yogyakarta -

25

Hasil:

stmik akakom yogyakarta -

26

Link dalam Frame  Penggunaan hyperlink dalam frame sama dengan hyperlink biasa, beberapa hal penting yang harus diperhatikan : ◦ Frame yang akan dijadikan target lokasi dokumen harus diberi nama ◦ Nama frame disebutkan pada target hyperlink

stmik akakom yogyakarta -

27

Contoh :  Akan dibuat ◦ File utama : linkframe.html ◦ File Header : head.html ◦ File Menu : menu.html ◦ File Isian : satu.html dan dua.html (keduanya sudah dibuat di slide sebelumnya)

stmik akakom yogyakarta -

28

Linkframe.html <meta name="" content="">

stmik akakom yogyakarta -

29

Head.html <meta name="" content="">

www.myweb.com

stmik akakom yogyakarta -

30

Menu.html

Menu

Untuk setiap link yang dibuat, target diisikan nama frame tujuan

File Satu
File Dua stmik akakom yogyakarta -

31

Tampilan awal

stmik akakom yogyakarta -

32

Menu File Satu diklik

stmik akakom yogyakarta -

33

Link iframe <meta name="" content="">

Target Link = nama iframe tujuan

Isikan File Dua Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja.

---

<iframe src="satu.html" name="kotak" width="100" height="100“ style="float:right"> Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja.

Iframe diberi nama

stmik akakom yogyakarta -

34

Hasil

stmik akakom yogyakarta -

35

Setelah link diklik

stmik akakom yogyakarta -

36

Selesai

stmik akakom yogyakarta -

37