Selasa, 08 Februari 2011

Praktikum Pemrograman Berbasis Web - Modul 2

STUDI KASUS
html (script)
<html>

<head>
  <title>Studi Kasus 2</title>
</head>

<frameset rows="20%,60%,20%">
<frame src="link2.html"/>

    <frameset cols="10%,80%,10%">
    <frame src="link1.html"/>
    <frame src="1_link_internal.html"/>
    <frame src="link1.html"/>
    </frameset>

<frame src="link2.html"/>
</frameset>

</html>

Screenshot (silahkan klik alamat di bawah ini)

http://i1201.photobucket.com/albums/bb346/hendriyanto1/mod2_studikasus_ss.jpg

TUGAS PRAKTIKUM

1. Grafik berbasis tabel.
html (script)
 <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">

<head>
    <title>Grafik Berbasis Tabel 1</title>
</head>

<body>
<p><strong>HENDRIYANTO_209533421948_PTI09 OFF C</strong></p>
<p><strong>Modul 2: Tugas Praktikum nomor 1  </strong></p>
<table width="600" >
<tr>
<td width="600" colspan="2">
<table rules="rows" frame="hsides" align="left" cellspacing="0" cellpadding="10">
<tr>
    <th width="200">Perusahaan</th>
    <th width="500">Pendapatan</th>
</tr>
</table>

</td>
</tr>
<tr>
<td>

<table frame="below" align="left" cellspacing="0" cellpadding="3">
<tr>
    <td width="200">Angin Reboot Ltd</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="150" colspan="5" >
    <table border="2" bordercolor="black" cellspacing="0" cellpadding="0" >
<tr>
<th width="150" height="16" colspan="5" bgcolor="green"></th>
</tr>
</table>
</td>
    <td >+150%</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>   
</tr>
<tr>
    <td width="200">Command Prompt, Inc</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="50" colspan="2">
    <table border="2" bordercolor="black" cellspacing="0" cellpadding="0" >
<tr>
<td width="55" height="16" colspan="2" bgcolor="green">
</td>
</tr>
</table>
</td>
    <td width="25">+55%</td>
    <td width="25"></td>
    <td width="25"></td>
</tr>
<tr>
    <td width="200">Hibernate Ltd</td>
    <td width="50"></td>
    <td width="25"></td>
    <td width="25" align="right">&nbsp;</td>
    <td width="25">-23%
    <table border="2" bordercolor="black" cellspacing="0" cellpadding="0" align="right">
<tr>
<td width="23" height="16" bgcolor="yellow">
</td>
</tr>
</table>
</td>
  <td width="25"></td>
  <td width="25"></td>
</tr>
<tr>
    <td width="200">Shutdown Ltd</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25">-75%</td>
    <td width="100">
    <table border="2" bordercolor="black" cellspacing="0" cellpadding="0" align="right">
<tr>
<td width="75" height="16" colspan="3" bgcolor="red">
</td>
</tr>
</table>
</td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>
Screenshot (silahkan klik alamat di bawah ini)
http://i1201.photobucket.com/albums/bb346/hendriyanto1/mod2_tp1_ss.jpg


2. Tabel perbandingan item.
html (script)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabel Perbandingan Item</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<p><strong>HENDRIYANTO_209533421948_PTI09 OFF C</strong></p>
<p><strong>Modul 2: Tugas Praktikum nomor 2 </strong></p>
<table width="408" rules="rows" frame="below" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="5" ><div align="center">PERBANDINGAN FITUR </div></td>
  </tr>
  <tr>
    <td width="32" style="border-right:black solid thin;"><div align="center"><strong>No</strong></div></td>
    <td width="173" style="border-right:black solid thin;"><div align="center"><strong>Fitur</strong></div></td>
    <td width="103" style="border-right:black solid thin;"><div align="center"><strong>Enterprise</strong></div></td>
    <td width="44" style="border-right:black solid thin;"><div align="center"><strong>Pro</strong></div></td>
    <td width="44" ><div align="center"><strong>Free</strong></div></td>
  </tr>
  <tr>
    <td style="border-right:black solid thin;"><p align="center">1</p>
    <p align="center">2</p>
    <p align="center">3</p>
    <p align="center">4</p>
    <p align="center">5</p></td>
    <td style="border-right:black solid thin;"><p>Garansi seumur hidup</p>
    <p>Multiuser</p>
    <p>Update otomatis</p>
    <p>Cetak laporan</p>
    <p>Notifikasi error    </p></td>
    <td style="border-right:black solid thin;"><p align="center">X</p>
    <p align="center">X</p>
    <p align="center">X</p>
    <p align="center">X</p>
    <p align="center">X</p>    </td>
    <td style="border-right:black solid thin;"><p align="center">-</p>
    <p align="center">-</p>
    <p align="center">X</p>
    <p align="center">X</p>
    <p align="center">X</p></td>
    <td><p align="center">-</p>
    <p align="center">-</p>
    <p align="center">-</p>
    <p align="center">-</p>
    <p align="center">X</p></td>
  </tr>
  <tr>
    <td style="border-right:black solid thin;"><p align="center">6</p>
    <p align="center">7</p></td>
    <td style="border-right:black solid thin;"><p>Ubah tema</p>
    <p>Try ikon </p></td>
    <td style="border-right:black solid thin;"><p align="center">X</p>
    <p align="center">X</p></td>
    <td style="border-right:black solid thin;"><p align="center">X</p>
    <p align="center">X</p></td>
    <td><p align="center">X</p>
    <p align="center">X</p></td>
  </tr>
</table>
</body>
</html>
Screenshot (silahkan klik alamat di bawah ini)
http://i1201.photobucket.com/albums/bb346/hendriyanto1/mod2_tp2_ss.jpg

TAMBAHAN NOMOR 2
html (script)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Grafik Berbasis Tabel 2</title>
</head>
<body>
<p><strong>HENDRIYANTO_209533421948_PTI09 OFF C</strong></p>
<p><strong>Modul 2: Tugas Praktikum nomor 2  </strong></p>
<table width="390" border="0">
<tr>
    <td colspan="8" style="border-bottom:black solid thin;" align="center">PERBANDINGAN FITUR</td>
</tr>
<tr>
    <td width="30"align="center"><b>No</b></td>
    <td width="0" rowspan="10" style="border-left:black solid thin;"></td>
    <td width="250" align="center"><b>Fitur</b></td>
    <td width="0" rowspan="10" style="border-left:black solid thin;"></td>
    <td width="80" align="center"><b>Enterprise</b></td>
    <td width="0" rowspan="10" style="border-left:black solid thin;"></td>
    <td width="30"align="center"><b>Pro</b></td>
    <td width="0"align="center"><b>Free</b></td>
</tr>
<tr>
    <td colspan="8" style="border-top:black solid thin;"></td>
</tr>
<tr>
    <td align="center">1</td>
    <td align="left">Garansi seumur hidup </td>
    <td align="center">X</td>
    <td align="center">-</td>
    <td align="center">-</td>
</tr>
<tr>
    <td align="center">2</td>
    <td align="left">Multiuser</td>
    <td align="center">X</td>
    <td align="center">-</td>
    <td align="center">-</td>
</tr>
<tr>
    <td align="center">3</td>
    <td align="left">Update otomatis </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">-</td>
</tr>
<tr>
    <td align="center">4</td>
    <td align="left">Cetak Laporan </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">-</td>
</tr>
<tr>
    <td align="center">5</td>
    <td align="left">Notifikasi error </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">X</td>
</tr>
<tr>
    <td colspan="8" style="border-top:black solid thin;"></td>
</tr>
<tr>
    <td align="center">6</td>
    <td align="left">Ubah tema </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">X</td>
</tr>
<tr>
    <td align="center">7</td>
    <td align="left">Try ikon</td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">X</td>
</tr>
<tr>
    <td colspan="8" style="border-top:black solid thin;"></td>
</tr>
</table>
</body>
</html>
Screenshot (silahkan klik alamat di bawah ini)
 http://i1201.photobucket.com/albums/bb346/hendriyanto1/mod2_tp22_ss.jpg
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)