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

(1)

Click to edit Master subtitle style

Frame dan IFrame

Pengenalan Web

(2)

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}

(3)

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



_{ meskipun begitu, saat ini masih banyak}

web yang memanfaatkan frame

(4)

Pembuatan Frame

 _{Dibutuhkan :}

◦ file satu.html (mengisi bagian kiri)

◦ File dua.html (mengisi bagian kanan)

(5)

File : satu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title>

</body> </html>

55 stmik akakom yogyakarta -

(6)

File : dua.html

<body style="background-color:yellow"> Ini file yang kedua

</body> </html>

(7)

File Utama : fset.html

<frameset cols="25%,*">

<frame src="satu.html"></frame> <frame src="dua.html"></frame> </frameset>

</html> _{stmik akakom yogyakarta -} ₇₇

(8)

<frameset>

 _{<frameset> 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 ( * )

(9)

Contoh <frameset>

 _{Untuk membagi jendela menjadi :}

◦ 2 kolom, dengan ukuran 25% dan 75%

 _{<frameset cols=“25%, 75%”>}

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

 _{<frameset cols=“25%, 25%, *”>}

◦ 2 baris, dengan ukuran 100 piksel, dan sisanya

 _{<frameset rows=“100px, *”>}

◦ 3 kolom, dengan ukuran 100 piksel, dan 2 kolom lain sisanya

 _{<frameset cols=“100px, *, *>}

(10)

Catatan <frameset>



_{<frameset> menggantikan tag <body>, sehingga}

untuk dokumen html yang menggunakan tag

<frameset> tidak ada tag <body>



_{Elemen konten dari <frameset> hanyalah :}

◦ Tag <frame>

◦ Tag <frameset> lain, saat nested frameset

◦ Tag <noframes>

10 10 stmik akakom yogyakarta -

(11)

<frame>

 _{Tag <frame> merupakan elemen konten dari}

 _{Tag <frame> digunakan untuk menentukan behaviour}

dari tiap frame termasuk isi dari frame tersebut

 _{Bentuk paling sederhana dari frame:}

◦ <frame src= “URL_konten_dari_frame”>

 _{URL_konten_dari_frame bisa berisi dokumen HTML,}

image atau lainnya

(12)

Nested Frameset



_{Yaitu frameset yang terletak di dalam frameset}

yang lain

<frameset rows="80px,*" > <frame src="satu.html"></frame> <frameset cols="100px,*"> <frame src="dua.html"></frame> <frame src="girl.jpg"></frame> </frameset> </frameset> 12 12 stmik akakom yogyakarta -

(13)

Hasil

13 13

(14)

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”)

(15)

contoh

<frameset rows="80px,*" frameborder="no" > <frame src="satu.html"></frame> <frameset cols="100px,*"> <frame src="dua.html"></frame> <frame src="girl.jpg"></frame> </frameset> </frameset>

(16)

contoh

<frameset rows="80px,*" frameborder="yes" border="1"> <frame src="satu.html"></frame> <frameset cols="100px,*"> <frame src="dua.html"></frame> <frame src="girl.jpg"></frame> </frameset> </frameset> 16 16 stmik akakom yogyakarta -

(17)

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

(18)

Contoh

<frame src="satu.html" scrolling="no"></frame> <frameset cols="100px,*">

<frame src="girl.jpg" marginwidth="20"

marginheight="20"></frame>

</frameset> </frameset>

(19)

Hasil

(20)

Contoh lain

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<frameset rows="80px,*" frameborder="yes" border="5"> <frame src="satu.html" scrolling="no"></frame> <frameset cols="100px,*">

<frame src="dua.html" frameborder="0"></frame> <frame src="girl.jpg" frameborder="0"></frame> </frameset>

</frameset> </html>

stmik akakom yogyakarta - cmz@2011

20 20

(21)

Hasil

21 21

(22)

<noframes>



_{Tag <noframes> digunakan untuk}

mengantisipasi jika browser yang digunakan

tidak mendukung adanya frame



_{Contoh :}

<noframes>

Browser anda tidak mendukung frame </noframes

</frameset>

(23)

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

(24)

Attribut iframe



_{Attribut <iframe> mirip dengan attribut}

<frame>, beberapa penambahan :

◦

Untuk alignment digunakan :

 _{style=“float: left | right | none”}

◦

Pengaturan ukuran digunakan :

 _{height = “nilai_integer”}  _{width = “nilai_integer”}

(25)

Contoh

<body>

Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. <hr/><iframe src="satu.html" scrolling="yes" width="100"

height="100" style="float:right"></iframe>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.

</body>

</html> 25

(26)

Hasil:

(27)

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

(28)

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)

(29)

Linkframe.html

(30)

Head.html

(31)

Menu.html

<html>

<body>

<h3>Menu</h3>

<a href="satu.html"

target="content">File Satu</a><br/>

<a href="dua.html"

target="content">File Dua</a>

</body>

</html>

cmz@2011

Untuk setiap link yang dibuat, target diisikan

nama frame tujuan

(32)

Tampilan awal

(33)

Menu File Satu diklik

(34)

Link iframe

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>

<head>

<body>

<a href="dua.html" target="kotak" >Isikan File Dua</a>

Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. <hr/><iframe

src="satu.html" name="kotak" width="100" height="100“

style="float:right"></iframe> 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.

</body> </html>

34 34

Iframe diberi nama

Target Link = nama iframe tujuan

(35)

Hasil

35 35

(36)

Setelah link diklik

36 36

(37)