Tugas Modul 1 : Pemrograman Berbasis Web

1. Studi Kasus : Membuat halaman HTML yang memiliki 4 frame

Halaman web dengan 4 frame setidaknya memiliki 5 frame (ditambah frame tengah) seperti pada gambar berikut


Source Code ::

a. frame 1

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title></title>
</head>
<body>
Untuk kembali ke halaman pertama <a href=”awal.html”>klik disini</a>
</body>
</html>

b. frame 2

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title></title>
</head>
<body>
<a href=”awal.html”>klik disini</a>
</body>
</html>

c. frame 3

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title>utama</title>
</head>
<body>
<h3 id=”x”><b>Pendahuluan</b></h3>
<ul>
<li><a href=”#x1″> Pendahuluan</a></li>
<li><a href=”#x2″> Pembahasan</a></li>
<li><a href=”#x3″> Kesimpulan</a></li>
</body>
</ul>
<h3 id=”x1″><b>Pendahuluan</b></h3>
<p>

[content]

<a href=”#x”><b>kembali ke menu awal</b></a>

<h3 id=”x2″><b>Pembahasan</b></h3>
<p>
[content]

<a href=”#x”><b>kembali ke menu awal</b></a>

<h3 id=”x3″><b>Kesimpulan</b></h3>
<p>
[content]

<a href=”#x”><b>kembali ke menu awal</b></a>

</body>
</html>

d. frame 4

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title></title>
</head>
<body>
<a href=”awal.html”>klik disini</a>
</body>
</html>
e. frame 5

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title></title>
</head>
<body>
Untuk kembali ke halaman pertama <a href=”awal.html”>klik disini</a>
</body>
</html>

f. Penggabungan frame

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title>frame</title>
</head>
<frameset rows=”15%,*,10%”>
<frame src=”1.html” name=”atas” id=”atas”/>
<frameset cols=”20%,*,20%”>
<frame src=”2.html” name=”kiri” id=”kiri”/>
<frame src=”3.html” name=”tengah” id=”tengah”/>
<frame src=”4.html” name=”kanan” id=”kanan”/>
</frameset>
<frame src=”5.html” name=”bawah” id=”bawah”/>
</frameset>
</html>

Tugas Rumah

1. Membuat Tabel Grafik


<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title>Grafik Berbasis Tabel</title>
</head>
<body>
<table frame=”above” align=”left” cellspacing=5 cellpadding=5>
<tr>
<th width=”300″>Perusahaan</th>
<th width=”105″ colspan=3></th>
<th width=”190″ colspan=3>Pendapatan</th>
</tr>

<tr>
<td>Agen Robot Ltd</td>
<td width=”30″></td>
<td width=”52″></td>
<td width=”23″></td>
<td width=”150″ colspan=”2″ bgcolor=”green”></td>
<td width=”40″ align=”left”>+150%</td>
</tr>

<tr>
<td>Command Prompt, Inc</td>
<td width=”30″></td>
<td width=”52″></td>
<td width=”23″></td>
<td width=”55″ bgcolor=”green”></td>
<td width=”90″ align=”left”>+55%</td>
<td width=”40″></td>
</tr>

<tr>
<td>Hibernate Ltd</td>
<td width=”30″></td>
<td width=”52″ align=”right”>-23%</td>
<td width=”23″ bgcolor=”yellow”></td>
<td width=”55″></td>
<td width=”90″></td>
<td width=”40″></td>
</tr>

<tr frame=”below”>
<td>Shutdown Ltd</td>
<td width=”30″ align=”right”>-75%</td>
<td width=”52″ colspan=”2″ bgcolor=”red” border=></td>
<td width=”55″></td>
<td width=”90″></td>
<td width=”40″></td>
</tr>

</body>
</html>

2. Membuat Tabel


<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title>Grafik Berbasis Tabel</title>
</head>
<body background=”1.gif”>
<h3 align=”center”>Perbandingan Fitur</h3>
<table frame=”above” border=”1″ align=”center” cellspacing=3 cellpadding=3>
<tr>
<th width=”30″>No</th>
<th width=”180″>Fitur</th>
<th width=”50″>Enterprise</th>
<th width=”40″>Pro</th>
<th width=”40″>Free</th>
</tr>

<tr>
<td width=”30″>1
<br>2
<br>3
<br>4
<br>5
</td>
<td width=”180″>Garansi seumur hidup
<br>Multiuser
<br>Update otomatis
<br>Cetak laporan
<br>Notifikasi error
</td>
<td width=”50″ align=”center”>X
<br>X
<br>X
<br>X
<br>X</td>
<td width=”40″ align=”center”>-
<br>-
<br>X
<br>X
<br>X
</td>
<td width=”40″ align=”center”>-
<br>-
<br>-
<br>-
<br>X
</td>
</tr>

<tr>
<td width=”30″>6
<br>7
</td>

<td width=”180″>Ubah tema
<br>Try ikon
</td>

<td width=”50″ align=”center”>X
<br>X
</td>

<td width=”40″ align=”center”>X
<br>X
</td>

<td width=”40″ align=”center”>X
<br>X
</td></tr>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s