Scribd
Unggah
170 tayangan5 halaman

Modul 9 Frame

Modul ini membahas tentang penggunaan frame dalam membagi tampilan jendela browser menjadi beberapa bagian. Frame dapat dibagi berdasarkan baris menggunakan atribut rows atau kolom menggunakan atribut cols pada elemen frameset. Contoh kode untuk membuat tiga baris frame dengan ukuran 100px, 150px dan 200px ditunjukkan. Modul ini juga berisi contoh kode lengkap untuk membuat sebuah website sederhana menggunakan frame.

Diunggah oleh

Detty Danira Mapaliey
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
170 tayangan5 halaman

Modul 9 Frame

Modul ini membahas tentang penggunaan frame dalam membagi tampilan jendela browser menjadi beberapa bagian. Frame dapat dibagi berdasarkan baris menggunakan atribut rows atau kolom menggunakan atribut cols pada elemen frameset. Contoh kode untuk membuat tiga baris frame dengan ukuran 100px, 150px dan 200px ditunjukkan. Modul ini juga berisi contoh kode lengkap untuk membuat sebuah website sederhana menggunakan frame.

Diunggah oleh

Detty Danira Mapaliey
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

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="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>
</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 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>
<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

S1 Teknik Informatika
3
Modul Pemrograman Web 1

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

S1 Teknik Informatika
5

Anda mungkin juga menyukai