Praktikum Web Programming IV · 2014. 4. 11. · HTML Frame Dengan frame, kita dapat menampilkan...
Transcript of Praktikum Web Programming IV · 2014. 4. 11. · HTML Frame Dengan frame, kita dapat menampilkan...
Praktikum Web Programming IV
HTML Frame
HTML FrameDengan frame, kita dapat menampilkan lebih dari 1 dokumen HTML dalam jendela browser yang sama. Setiap dokumen HTML disebut sebuah frame dan setiap frame berdiri sendiri.
Tag <frameset> mendefinisikan bagaimana membagi jendela menjadi frame
Setiap frameset mendefinisikan jumlah baris dan kolom
Tag <frame> mendefinisikan dokumen HTML yang akan ditampilkan dalam tiap frame.
Contoh :
Buat sebuah dokumen HTML dengan menggunakan Dreamweaver dan ketikkan listing berikut:
<html>
<frameset cols="25%,50%,25%">
<frame src="Praktikum 1.html">
<frame src="Praktikum 2.html">
<frame src="Praktikum 3.html">
</frameset>
</html>
Simpan dengan nama Praktikum 12.html.
Jalankan menggunakan Web Browser.
HTML FrameVertical Frameset
HTML FrameHorizontal Frameset
Contoh :
Buat sebuah dokumen HTML dengan menggunakan Dreamweaver dan ketikkan listing berikut:
<html>
<frameset rows="25%,50%,25%">
<frame src="Praktikum 4.html">
<frame src="Praktikum 5.html">
<frame src="Praktikum 6.html">
</frameset>
</html>
Simpan dengan nama Praktikum 13.html.
Jalankan menggunakan Web Browser.
HTML FrameHorizontal Frameset
HTML FrameMixed Frameset
Contoh :
Buat sebuah dokumen HTML dengan menggunakan Dreamweaver dan ketikkan listing berikut:
<html>
<frameset rows="50%,50%">
<frame src="Praktikum 7.html">
<frameset cols="25%,75%">
<frame src="Praktikum 8.html">
<frame src="Praktikum 9.html">
</frameset>
</frameset>
</html>
Simpan dengan nama Praktikum 14.html.
Jalankan menggunakan Web Browser.
HTML FrameMixed Frameset
HTML FrameInline Frame
Contoh :
Buat sebuah dokumen HTML dengan menggunakan Dreamweaver dan ketikkan listing berikut:
<html>
<body>
<iframe src="Praktikum 10.html"></iframe>
<p>Beberapa browser versi lama tidak mendukung iframes.</p>
<p>Jika browser tidak mendukung, iframe tidak akan kelihatan.</p>
</body>
</html>
Simpan dengan nama Praktikum 15.html.
Jalankan menggunakan Web Browser.
HTML FrameInline Frame
HTML FrameNavigation Frame
Contoh 1:
Buat sebuah dokumen HTML dengan menggunakan Dreamweaver dan ketikkan listing berikut:
<html>
<body>
<a href ="Praktikum 1.html" target ="showframe">Praktikum 1</a><br>
<a href ="Praktikum 2.html" target ="showframe">Praktikum 2</a><br>
<a href ="Praktikum 3.html" target ="showframe">Praktikum 3</a>
</body>
</html>
Simpan dengan nama Praktikum 16.html.
HTML FrameNavigation Frame
Contoh 2:
Buat sebuah dokumen HTML dengan menggunakan Dreamweaver dan ketikkan listing berikut:
<html>
<frameset cols="120,*">
<frame src="Praktikum 16.html">
<frame src="Praktikum 1.html" name="showframe">
</frameset>
</html>
Simpan dengan nama Praktikum 17.html.
Jalankan dengan menggunakan Web Browser.
HTML FrameNavigation Frame
LatihanBuatlah file dengan nama Latihan3.html, untuk menghasilkan output sbb :