Modul Pemrograman Web 1
BAB IX
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.
Contoh 1 : <FRAMESET ROWS =”25%, 25%, 50%”>
Contoh 2 : <FRAMESET ROWS =”*, 3*, *”>
Latihan 1 :
<HTML>
<HEAD>
<TITLE> Membuat Frame berdasarkan baris </TITLE>
</HEAD>
S1 Teknik Informatika
1
Modul Pemrograman Web 1
<frameset rows="25%,65%,10%">
<frame src="[Link]">
<frameset cols="15%, 85%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<frame src="[Link]">
</frameset>
</HTML>
Simpan dengan nama: [Link]
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="[Link]" target="kiri">Home</a></li>
<li><a href="[Link]"
target="kiri">Profil</a></li>
<li><a href="[Link]"
target="kiri">Gallery</a></li>
<li><a href="[Link]"
target="kiri">Kontak</a></li>
</ul></font>
</BODY>
</HTML>
Simpan dengan nama [Link]
q Buat halaman home
<HTML>
<HEAD>
<TITLE> Halaman Utama </TITLE>
</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
S1 Teknik Informatika
2
Modul Pemrograman Web 1
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 [Link]
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/[Link]"></center>
<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 [Link]
S1 Teknik Informatika
3
Modul Pemrograman Web 1
q Buat halaman galery
<HTML>
<HEAD>
<TITLE> Halaman Galery </TITLE></head>
<body>
<pre>
<img src="image/[Link]" width=250 height=200> <img
src="image/[Link]" width=250 height=200> <img
src="image/[Link]" width=170 height=200>
<img src="image/[Link]" width=170 height=200>
</pre>
</BODY>
</HTML>
Simpan dengan nama [Link]
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 : [Link]
Email : info@[Link]
Telp : 021 - 7412566
Fax : 021 - 7412566</font></pre>
</BODY>
</HTML>
Simpan dengan nama [Link]
Jalankan file [Link] dan pastikan tampilan browser sebagai berikut :
S1 Teknik Informatika
4
Modul Pemrograman Web 1
S1 Teknik Informatika
5