Scribd
Unggah
22 tayangan

Modul 9 Frame

Diunggah oleh

Gusmaniar Al Hadi Gusman
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
22 tayangan

Modul 9 Frame

Diunggah oleh

Gusmaniar Al Hadi Gusman
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

Modul Pemrograman Web 1

BAB IX
FRAME

A. Tujuan Pembelajaran
Pada bab ini menjelaskan dan membahas mengenai pembuatan frame. Anda
harus mampu : Mengetahui dan mempraktekan penggunaan tag frame.

B. Uraian Materi

Tujuan Pembelajaran:
Mengetahui dan mempraktekan penggunaan tag frame

Frame dapat membagi tampilan window menjadi beberapa bagian berdasarkan


baris atau kolom.
<frameset border=n rows|cols = ”..%, ...%, dst”>
<frame src=”url” name=”name frame”>
</frameset>

Dokumen yang berisi frame tidak boleh menggunakan elemen BODY digantikan
oleh elemen FRAMESET yang menyatakan bahwa isi dokumen tersebut
mengandung suatu frame . Struktur dasar dokumen HTML dengan frame sebagai
berikut :
<html>
<head>
--- bagian head ---
</head>
<frameset>
--- bagian frame ---
</frameset>
</html>

FRAMESET mempunyai 2 buah atribut, yaitu ROWS (membagi jendela


browser menjadi beberapa baris frame) dan COLS (membagi jendela browser
menjadi beberapa kolom frame). Misalnya jika kita ingin membuat 3 buah baris
frame di mana tiap frame tingginya adalah 100, 150, dan 200 pixel, maka kode
HTML untuk membuat frame ini adalah : <FRAMESET ROWS = “100, 150,
200”>. Cara lain untuk menyatakan ukuran baris dan kolom suatu frame adalah
dengan menggunakan % dan nilai relative.

S1 Teknik Informatika 1
Modul Pemrograman Web 1

Contoh 1 : <FRAMESET ROWS =”25%, 25%, 50%”>


Contoh 2 : <FRAMESET ROWS =”*, 3*, *”>
Latihan 1 :

<HTML>
<HEAD>
<TITLE> Membuat Frame berdasarkan baris </TITLE>
</HEAD>
<frameset rows="25%,65%,10%">
<frame src="header.html">
<frameset cols="15%, 85%">
<frame src="menu.html">
<frame src="home.html">
</frameset>
<frame src="footer.html">
</frameset>
</HTML>

Simpan dengan nama: index.html

q Buat halaman menu

<HTML>
<HEAD>
<TITLE>Contoh Membuat Hyperlink</TITLE>
</HEAD>
<BODY>
<font color="navy" size="4">Menu </font>
<font color="sienna" size="4">
<ul type="square">
<li><a href="home.html" target="kiri">Home</a></li>
<li><a href="profil.html"
target="kiri">Profil</a></li>
<li><a href="galery.html"
target="kiri">Gallery</a></li>
<li><a href="kontak.html"
target="kiri">Kontak</a></li>
</ul></font>
</BODY>
</HTML>

Simpan dengan nama menu.html

q Buat halaman home

<HTML>
<HEAD>
<TITLE> Halaman Utama </TITLE>

S1 Teknik Informatika 2
Modul Pemrograman Web 1

</HEAD>
<BODY>
<font color="blue"><h1>Programming WEB dengan
HTML</h1></font>
<font color="brown"><h2><blink>Teknologi
Informatika</blink></h2></font>
<hr size=3 color="blue">
<font size=6 color="magenta"><marquee
behavior="scroll" direction="up" height=40
scrollamount="1">Selamat datang pada halaman website
kami....</marquee></font><br>
<p align="justify"><font size=5>Terimakasih anda telah
bergabung dan berkunjung pada situs kami, kami
berharap anda memperoleh informasi yang anda inginkan
dan anda cari.</p>
<p>Situs ini berisi informasi sekitar materi yang
berhubungan dengan programming web, diantaranya :
HTML, CSS, PHP, MySql dan materi atau artikel lain
sekitar web. </p></font>
</BODY>
</HTML>

Simpan dengan nama home.html

q Buatlah halaman profil

<HTML>
<HEAD>
<TITLE> Halaman Profil </TITLE>
</HEAD>

<BODY>

<font size=4 color="blue">


<b><p>Hypertext Markup Language yang sering disebut
HTML merupakan dasar pemrograman dalam membuat
website. Sebaiknya sebelum anda menggunakan template,
CMS atau fitur-fitur lain untuk membuat sebuah
website, saya sarankan anda untuk belajar HTML
terlebih dulu.</p></b> Dengan memahami perintah HTML
anda dapat memperbaiki template atau CMS atau fitur
lain dengan mudah.<b><i>HTML, CSS, PHP dan
MySql</i></b>. Seiring dengan perkembangan teknologi,
maka begitu banyak fasilitas yang disediakan untuk
mempermudah dalam pembuatan website. <b><u>Web site
builder, CMS, Template dan lain-lain merupakan
fasilitas untuk mempermudah pembuatan website.
</u></b><br>
<center><img src="image/img1.jpg"></center>

S1 Teknik Informatika 3
Modul Pemrograman Web 1

<p>Saat ini P4TK Bisnis dan Pariwisata mulai mencoba


untuk membuat diklat jarak jauh yang dapat dijangkau
oleh siapapun, dimanapun tanpa dibatasi oleh jarak dan
waktu dengan menggunakan fasilitas Open Source yang
biasa disebut Open Distance Learning.
</BODY>
</HTML>

Simpan dengan nama profil.html

q Buat halaman galery

<HTML>
<HEAD>
<TITLE> Halaman Galery </TITLE></head>
<body>
<pre>
<img src="image/me1.jpg" width=250 height=200> <img
src="image/me2.jpg" width=250 height=200> <img
src="image/me3.gif" width=170 height=200>
<img src="image/perform6.gif" width=170 height=200>
</pre>
</BODY>
</HTML>

Simpan dengan nama galery.html

q Buat halaman kontak

<HTML>
<HEAD>
<TITLE> Halaman Galery </TITLE>
</HEAD>
<BODY>
<pre>
<font color="purple" size=5>
Universitas Pamulang
Jl. Surya Kencana No.1 Pamulang-Tangerang Selatan
Website : www.unpam.ac.id
Email : [email protected]
Telp : 021 - 7412566
Fax : 021 - 7412566</font></pre>
</BODY>
</HTML>

Simpan dengan nama kontak.html


Jalankan file index.html dan pastikan tampilan browser sebagai berikut :

S1 Teknik Informatika 4
Modul Pemrograman Web 1

C. Referensi
http://www.w3c.org
Sebesta, R.W., Programming the World Wide Web, Addison Wesley, 2002
http://www.w3schools.com
http ://php.net
Effendi, Pemrograman Dynamic HTML
http://en.wikipedia.org/wiki/World_Wide_Web
http://www.promosi-web.com
http://www.tizag.com/htmlT/meta.php

S1 Teknik Informatika 5

Anda mungkin juga menyukai